Initial commit

2025-11-25 00:43:00 +05:30
commit ce133723fd
48 changed files with 22361 additions and 0 deletions
--- a/.env
+++ b/.env
@@ -0,0 +1 @@
 REACT_APP_API_URL=172.232.124.96:5370/api
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,169 @@
 # Dependencies
 node_modules/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 # Production builds
 dist/
 build/
 *.tgz
 *.tar.gz
 # Vite
 .vite/
 # IDE and editor files
 .vscode/
 .idea/
 *.swp
 *.swo
 *~
 # OS generated files
 .DS_Store
 .DS_Store?
 ._*
 .Spotlight-V100
 .Trashes
 ehthumbs.db
 Thumbs.db
 # Logs
 logs/
 *.log
 # Runtime data
 pids/
 *.pid
 *.seed
 *.pid.lock
 # Coverage directory used by tools like istanbul
 coverage/
 *.lcov
 # nyc test coverage
 .nyc_output/
 # Dependency directories
 jspm_packages/
 # TypeScript cache
 *.tsbuildinfo
 # Optional npm cache directory
 .npm
 # Optional eslint cache
 .eslintcache
 # Optional REPL history
 .node_repl_history
 # Output of 'npm pack'
 *.tgz
 # Yarn Integrity file
 .yarn-integrity
 # parcel-bundler cache (https://parceljs.org/)
 .parcel-cache/
 # next.js build output
 .next/
 # nuxt.js build output
 .nuxt/
 # vuepress build output
 .vuepress/dist/
 # Serverless directories
 .serverless/
 # FuseBox cache
 .fusebox/
 # DynamoDB Local files
 .dynamodb/
 # TernJS port file
 .tern-port
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
 # Temporary folders
 tmp/
 temp/
 # Archive files
 *.zip
 *.rar
 *.7z
 # Backend data files (keep structure but ignore data)
 backend/data.json
 backend/db.json
 # Config files with sensitive data
 config/local.json
 config/production.json
 # Build artifacts
 *.cache
 .parcel-cache
 # Testing
 coverage/
 .nyc_output/
 # Storybook build outputs
 storybook-static
 # Local development
 .local
 # API keys and secrets
 .env.keys
 secrets.json
 # User-specific files
 *.user.js
 *.user.css
 # Lock files (optional - comment out if you want to track them)
 # package-lock.json
 # yarn.lock
 # pnpm-lock.yaml
 # Vite specific
 .vite/
 # React specific
 .eslintcache
 # Development server
 .eslintcache
 # Custom ignores for this project
 # Keep the final index.html but ignore build files
 dist/
 build/
 # Ignore compiled/bundled JS files but keep source
 src/**/*.bundle.js
 src/**/*.min.js
 # Ignore source maps in production
 *.map
 src/**/*.map
 # Keep important files
 !index.html
 !package.json
 !package-lock.json
 !vite.config.js
 !eslint.config.js
--- a/media/logo/wraffle_logo.png
+++ b/media/logo/wraffle_logo.png
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,31 @@
 {
  "name": "wraffle-ecommerce-frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "axios": "^1.13.1",
    "react-router-dom": "^7.9.5"
  },
  "proxy": "http://172.232.124.96:5370",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
 }
--- a/public/images/hoodie1.png
+++ b/public/images/hoodie1.png
--- a/public/images/hoodie2.png
+++ b/public/images/hoodie2.png
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Wraffle - Premium hoodies for every style and occasion"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>Wraffle Ecommerce</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
 </html>
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -0,0 +1,25 @@
 {
  "short_name": "Wraffle",
  "name": "Wraffle Ecommerce",
  "icons": [
    {
      "src": "wraffle_logo.png",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/png"
    },
    {
      "src": "wraffle_logo.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "wraffle_logo.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#FFB400",
  "background_color": "#ffffff"
 }
--- a/public/verify-email.css
+++ b/public/verify-email.css
@@ -0,0 +1,181 @@
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }
 body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #000000 0%, #333333 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
 }
 .verify-container {
    width: 100%;
    max-width: 500px;
 }
 .verify-card {
    background: #000000;
    border: 2px solid #FFB400;
    border-radius: 15px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
 }
 /* Hidden class */
 .hidden {
    display: none !important;
 }
 /* Verifying state */
 .verifying {
    color: #ffffff;
 }
 .verifying h2 {
    color: #FFD700;
    margin-bottom: 20px;
    font-size: 2rem;
    font-weight: bold;
 }
 /* Spinner */
 .spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #333333;
    border-top: 4px solid #FFD700;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
 }
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
 }
 /* Success state */
 .success h2 {
    color: #FFD700;
    margin-bottom: 20px;
    font-size: 2rem;
    font-weight: bold;
 }
 .success p {
    color: #ffffff;
    margin-bottom: 20px;
    font-size: 1.1rem;
    line-height: 1.5;
 }
 .redirect-message {
    color: #FFD700 !important;
    font-weight: bold;
    margin-bottom: 30px !important;
 }
 /* Success icon */
 .success-icon {
    width: 80px;
    height: 80px;
    background: #FFD700;
    color: #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0 auto 20px;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
 }
 /* Error state */
 .error h2 {
    color: #ff4444;
    margin-bottom: 20px;
    font-size: 2rem;
    font-weight: bold;
 }
 .error p {
    color: #ffffff;
    margin-bottom: 20px;
    font-size: 1.1rem;
    line-height: 1.5;
 }
 /* Error icon */
 .error-icon {
    width: 80px;
    height: 80px;
    background: #ff4444;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0 auto 20px;
    box-shadow: 0 5px 15px rgba(255, 68, 68, 0.4);
 }
 /* Buttons */
 .home-btn, .retry-btn {
    background: #FFD700;
    color: #000000;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
 }
 .home-btn:hover, .retry-btn:hover {
    background: #ffed4e;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
 }
 .retry-btn {
    background: #ff4444;
    color: #ffffff;
 }
 .retry-btn:hover {
    background: #ff6666;
    box-shadow: 0 5px 15px rgba(255, 102, 102, 0.4);
 }
 /* Responsive design */
@media (max-width: 768px) {
    .verify-card {
        padding: 30px 20px;
        margin: 20px;
    }
    .verifying h2, .success h2, .error h2 {
        font-size: 1.5rem;
    }
    .success p, .error p {
        font-size: 1rem;
    }
    .home-btn, .retry-btn {
        padding: 10px 25px;
        font-size: 1rem;
    }
 }
--- a/public/verify-email.html
+++ b/public/verify-email.html
@@ -0,0 +1,103 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email Verification - Wraffle</title>
    <link rel="stylesheet" href="verify-email.css">
 </head>
 <body>
    <div class="verify-container">
        <div class="verify-card">
            <div id="verifying" class="verifying">
                <div class="spinner"></div>
                <h2>Verifying your email...</h2>
            </div>
            <div id="success" class="success hidden">
                <div class="success-icon">✓</div>
                <h2>Email Verified Successfully!</h2>
                <p>Your email has been verified. You can now access all features of your account.</p>
                <p class="redirect-message">Redirecting to home page in <span id="countdown">10</span> seconds...</p>
                <button class="home-btn" onclick="goHome()">Go to Home Now</button>
            </div>
            <div id="error" class="error hidden">
                <div class="error-icon">✕</div>
                <h2>Verification Failed</h2>
                <p id="error-message">Verification failed</p>
                <p class="redirect-message">Redirecting to login page in <span id="countdown-error">10</span> seconds...</p>
                <button class="retry-btn" onclick="goLogin()">Back to Login</button>
            </div>
        </div>
    </div>
    <script>
        const urlParams = new URLSearchParams(window.location.search);
        const token = urlParams.get('token');
        let countdownInterval;
        async function verifyEmail() {
            if (!token) {
                showError('No verification token provided');
                return;
            }
            try {
                const response = await fetch(`http://172.232.124.96:5370/api/auth/verify-email?token=${token}`);
                const data = await response.json();
                if (response.ok) {
                    showSuccess();
                } else {
                    showError(data.message || 'Verification failed');
                }
            } catch (error) {
                showError('Network error occurred');
            }
        }
        function showSuccess() {
            document.getElementById('verifying').classList.add('hidden');
            document.getElementById('success').classList.remove('hidden');
            startCountdown('countdown', () => window.location.href = '/');
        }
        function showError(message) {
            document.getElementById('verifying').classList.add('hidden');
            document.getElementById('error').classList.remove('hidden');
            document.getElementById('error-message').textContent = message;
            startCountdown('countdown-error', () => window.location.href = '/login');
        }
        function startCountdown(elementId, callback) {
            let timeLeft = 10;
            const countdownElement = document.getElementById(elementId);
            countdownElement.textContent = timeLeft;
            countdownInterval = setInterval(() => {
                timeLeft--;
                countdownElement.textContent = timeLeft;
                if (timeLeft <= 0) {
                    clearInterval(countdownInterval);
                    callback();
                }
            }, 1000);
        }
        function goHome() {
            clearInterval(countdownInterval);
            window.location.href = '/';
        }
        function goLogin() {
            clearInterval(countdownInterval);
            window.location.href = '/login';
        }
        // Start verification on page load
        verifyEmail();
    </script>
 </body>
 </html>
--- a/public/wraffle_logo.png
+++ b/public/wraffle_logo.png
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,3 @@
 main {
  flex: 1;
 }
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,75 @@
 import React, { useState, useEffect } from 'react';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import Header from './components/Header';
 import Footer from './components/Footer';
 import Home from './pages/Home';
 import Shop from './pages/Shop';
 import About from './pages/About';
 import Contact from './pages/Contact';
 import Auth from './pages/Auth';
 import VerifyEmail from './pages/VerifyEmail';
 import VerifyEmailSuccess from './pages/VerifyEmailSuccess';
 import ResetPassword from './pages/ResetPassword';
 import authService from './services/authService';
 import './App.css';
 // import admin from './pages/Admin';
 import Product from './pages/ProductDetails';
 import ProductDetails from './pages/ProductDetails';
 import Cart from './pages/Cart';
 import Admin from './pages/Admin';
 function App() {
  const [user, setUser] = useState(null);
  const [isAdmin, setIsAdmin] = useState(false);
  const fetchProfile = async () => {
    try {
      const response = await authService.getProfile();
      setUser(response.user);
      setIsAdmin(response.user.role === 'admin');
    } catch (error) {
      console.error('Failed to fetch profile:', error);
      setUser(null);
      setIsAdmin(false);
    }
  };
  useEffect(() => {
    fetchProfile();
  }, []);
  const handleLogin = async () => {
    await fetchProfile();
  };
  const handleLogout = () => {
    authService.logout();
    setUser(null);
    setIsAdmin(false);
  };
  return (
    <div className="App">
      <Header user={user} onLogout={handleLogout} isAdmin={isAdmin} />
      <main>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/shop" element={<Shop />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/auth" element={user ? <Navigate to="/" replace /> : <Auth onLogin={handleLogin} />} />
          <Route path="/verify-email" element={<VerifyEmail />} />
          <Route path="/verify-email-success" element={<VerifyEmailSuccess />} />
          <Route path="/reset-password" element={<ResetPassword />} />
          {/* <Route path="/admin" element={<admin />} /> */}
          <Route path="/productdetail" element={<ProductDetails/>}/>
          <Route path="/cart" element={<Cart/>} />
          <Route path="/admin" element={isAdmin ? <Admin/> : <Navigate to="/auth" replace />} />
        </Routes>
      </main>
      <Footer />
    </div>
  );
 }
 export default App;
--- a/src/components/Footer.css
+++ b/src/components/Footer.css
@@ -0,0 +1,71 @@
 .footer {
  background-color: #000;
  color: #FFB400;
  padding: 2rem 0 1rem;
  margin-top: auto;
 }
 .footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
 }
 .footer-section h3 {
  color: #FFB400;
  margin-bottom: 1rem;
  font-size: 1.2rem;
 }
 .footer-section p {
  color: #ccc;
  line-height: 1.6;
 }
 .footer-logo {
  width: 70px;
  height: 50px;
  margin-bottom: 1rem;
  filter: brightness(0) invert(1);
 }
 .footer-section ul {
  list-style: none;
  padding: 0;
 }
 .footer-section ul li {
  margin-bottom: 0.5rem;
 }
 .footer-section ul li a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s ease;
 }
 .footer-section ul li a:hover {
  color: #FFB400;
 }
 .footer-bottom {
  text-align: center;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid #333;
  color: #ccc;
 }
@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-section {
    margin-bottom: 1.5rem;
  }
 }
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -0,0 +1,47 @@
 import React from 'react';
 import './Footer.css';
 const Footer = () => {
  return (
    <footer className="footer">
      <div className="footer-container">
        <div className="footer-section">
          <img src="/wraffle_logo.png" alt="Wraffle" className="footer-logo" />
          <p>Made to Fit Your Vibe.</p>
        </div>
        <div className="footer-section">
          <h3>Quick Links</h3>
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/shop">Shop</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
          </ul>
        </div>
        <div className="footer-section">
          <h3>Customer Service</h3>
          <ul>
            <li><a href="/orders">My Orders</a></li>
            <li><a href="/contact">Support</a></li>
            <li><a href="/contact">FAQ</a></li>
          </ul>
        </div>
        <div className="footer-section">
          <h3>Contact Info</h3>
          <p>Email: info@wraffle.com</p>
          <p>Phone: (555) 123-4567</p>
          <p>Address: 123 Food St, City, State 12345</p>
        </div>
      </div>
      <div className="footer-bottom">
        <p>&copy; 2024 Wraffle. All rights reserved.</p>
      </div>
    </footer>
  );
 };
 export default Footer;
--- a/src/components/Header.css
+++ b/src/components/Header.css
@@ -0,0 +1,131 @@
 .header {
  background-color: #000;
  color: #FFB400;
  padding: 1rem 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
 }
 .header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
 }
 .logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #FFB400;
  font-size: 1.5rem;
  font-weight: bold;
 }
 .logo-img {
  width: 40px;
  height: 40px;
  margin-right: 0.5rem;
  filter: brightness(0) invert(1);
  object-fit: contain;
 }
 .logo-text {
  color: #FFB400;
 }
 .nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
 }
 .nav-link {
  color: #FFB400;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  transition: background-color 0.3s ease;
 }
 .nav-link:hover,
 .nav-link.signup {
  background-color: #FFB400;
  color: #000;
 }
 .nav-user {
  color: #FFB400;
  font-weight: bold;
 }
 .nav-button {
  background-color: #FFB400;
  color: #000;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
 }
 .nav-button:hover {
  background-color: #FFC107;
 }
 .menu-toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
 }
 .menu-bar {
  width: 25px;
  height: 3px;
  background-color: #FFB400;
  margin: 3px 0;
  transition: 0.3s;
 }
@media (max-width: 768px) {
  .nav {
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #000;
    flex-direction: column;
    padding: 1rem;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }
  .nav.nav-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .menu-toggle {
    display: flex;
  }
  .nav-link,
  .nav-user,
  .nav-button {
    width: 100%;
    text-align: center;
    margin: 0.5rem 0;
  }
 }
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -0,0 +1,59 @@
 import React, { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import './Header.css';
 const Header = ({ user, onLogout, isAdmin }) => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const navigate = useNavigate();
  const handleLogout = () => {
    onLogout();
    navigate('/');
  };
  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };
  return (
    <header className="header">
      <div className="header-container">
        <Link to="/" className="logo">
          <img src="/wraffle_logo.png" alt="Wraffle" className="logo-img" />
          <span className="logo-text">Wraffle</span>
        </Link>
        <nav className={`nav ${isMenuOpen ? 'nav-open' : ''}`}>
          <Link to="/" className="nav-link" onClick={() => setIsMenuOpen(false)}>Home</Link>
          <Link to="/shop" className="nav-link" onClick={() => setIsMenuOpen(false)}>Shop</Link>
          <Link to="/about" className="nav-link" onClick={() => setIsMenuOpen(false)}>About</Link>
          <Link to="/contact" className="nav-link" onClick={() => setIsMenuOpen(false)}>Contact</Link>
          <Link to="/cart" className="nav-link" onClick={() => setIsMenuOpen(false)}>Cart</Link>
          {user ? (
            <>
              <Link to="/orders" className="nav-link" onClick={() => setIsMenuOpen(false)}>My Orders</Link>
              {isAdmin && (
                <Link to="/admin" className="nav-link" onClick={() => setIsMenuOpen(false)}>Admin</Link>
              )}
              <span className="nav-user">Welcome, {user.first_name}</span>
              <button className="nav-button logout" onClick={handleLogout}>Logout</button>
            </>
          ) : (
            <>
              <Link to="/auth" className="nav-link" onClick={() => setIsMenuOpen(false)}>Login</Link>
            </>
          )}
        </nav>
        <button className="menu-toggle" onClick={toggleMenu}>
          <span className="menu-bar"></span>
          <span className="menu-bar"></span>
          <span className="menu-bar"></span>
        </button>
      </div>
    </header>
  );
 };
 export default Header;
--- a/src/components/LoadingSpinner.css
+++ b/src/components/LoadingSpinner.css
@@ -0,0 +1,65 @@
 .loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
 }
 .spinner-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
 }
 .spinner-logo {
  max-width: 60px;
  height: auto;
  animation: spin 2s linear infinite;
  filter: brightness(0) invert(1);
 }
 .loading-spinner.yellow .spinner-logo {
  filter: none;
 }
 .spinner-ring {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 80px;
  height: 80px;
  border: 3px solid transparent;
  border-top: 3px solid #FFB400;
  border-radius: 50%;
  animation: spin 1s linear infinite;
 }
 .loading-spinner.small .spinner-logo {
  max-width: 40px;
  height: auto;
 }
 .loading-spinner.small .spinner-ring {
  width: 60px;
  height: 60px;
  top: -10px;
  left: -10px;
 }
 .loading-spinner.large .spinner-logo {
  max-width: 100px;
  height: auto;
 }
 .loading-spinner.large .spinner-ring {
  width: 120px;
  height: 120px;
  top: -10px;
  left: -10px;
 }
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
 }
--- a/src/components/LoadingSpinner.jsx
+++ b/src/components/LoadingSpinner.jsx
@@ -0,0 +1,19 @@
 import React from 'react';
 import './LoadingSpinner.css';
 const LoadingSpinner = ({ size = 'medium', color = 'yellow' }) => {
  return (
    <div className={`loading-spinner ${size} ${color}`}>
      <div className="spinner-container">
        <img
          src="/wraffle_logo.png"
          alt="Wraffle Logo"
          className="spinner-logo"
        />
        <div className="spinner-ring"></div>
      </div>
    </div>
  );
 };
 export default LoadingSpinner;
--- a/src/config/api.jsx
+++ b/src/config/api.jsx
@@ -0,0 +1,4 @@
 // API Configuration
 const API_BASE_URL = 'http://172.232.124.96:5370/api';
 export default API_BASE_URL;
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,23 @@
 body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
 code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
 }
 * {
  box-sizing: border-box;
 }
 .App {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
 }
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
 import App from './App';
 import './index.css';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
 );
--- a/src/pages/About.css
+++ b/src/pages/About.css
@@ -0,0 +1,178 @@
 .about {
  min-height: calc(100vh - 160px);
  padding: 2rem 1rem;
 }
 .about-header {
  text-align: center;
  margin-bottom: 4rem;
 }
 .about-header h1 {
  color: #000;
  font-size: 2.5rem;
  margin-bottom: 1rem;
 }
 .about-header p {
  color: #666;
  font-size: 1.1rem;
 }
 .about-content {
  max-width: 1200px;
  margin: 0 auto;
 }
 /* Story Section */
 .story-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-bottom: 4rem;
  align-items: center;
 }
 .story-content h2 {
  color: #000;
  font-size: 2rem;
  margin-bottom: 1.5rem;
 }
 .story-content p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1rem;
  font-size: 1.1rem;
 }
 .story-image {
  display: flex;
  justify-content: center;
  align-items: center;
 }
 .story-logo {
  max-width: 250px;
  height: auto;
  animation: pulse 4s ease-in-out infinite;
 }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
 }
 /* Values Section */
 .values-section {
  margin-bottom: 4rem;
 }
 .values-section h2 {
  color: #000;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 3rem;
 }
 .values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
 }
 .value-card {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease;
 }
 .value-card:hover {
  transform: translateY(-5px);
 }
 .value-card h3 {
  color: #FFB400;
  font-size: 1.3rem;
  margin-bottom: 1rem;
 }
 .value-card p {
  color: #666;
  line-height: 1.6;
 }
 /* Mission Section */
 .mission-section {
  background-color: #000;
  color: #FFB400;
  padding: 4rem 2rem;
  border-radius: 10px;
  text-align: center;
 }
 .mission-section h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
 }
 .mission-section p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 3rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
 }
 .mission-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
  max-width: 600px;
  margin: 0 auto;
 }
 .stat h3 {
  color: #FFB400;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
 }
 .stat p {
  color: #ccc;
  font-size: 1rem;
 }
@media (max-width: 768px) {
  .story-section {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  .story-logo {
    max-width: 200px;
    height: auto;
  }
  .values-grid {
    grid-template-columns: 1fr;
  }
  .mission-stats {
    grid-template-columns: 1fr;
  }
  .about-header h1 {
    font-size: 2rem;
  }
  .story-content h2,
  .values-section h2 {
    font-size: 1.5rem;
  }
 }
--- a/src/pages/About.jsx
+++ b/src/pages/About.jsx
@@ -0,0 +1,92 @@
 import React from 'react';
 import './About.css';
 const About = () => {
  return (
    <div className="about">
      <div className="about-header">
        <h1>About Wraffle</h1>
        <p>Your premium hoodie destination</p>
      </div>
      <div className="about-content">
        <section className="story-section">
          <div className="story-content">
            <h2>Our Story</h2>
            <p>
              Wraffle was born from a passion for quality streetwear and a desire to create
              hoodies that stand out from the crowd. We believe that everyone deserves to
              wear comfortable, stylish clothing that expresses their unique personality.
            </p>
            <p>
              Founded in 2024, we've quickly become a go-to destination for fashion enthusiasts
              who appreciate premium quality, unique designs, and exceptional comfort.
            </p>
          </div>
          <div className="story-image">
            <img src="/wraffle_logo.png" alt="Wraffle Story" className="story-logo" />
          </div>
        </section>
        <section className="values-section">
          <h2>Our Values</h2>
          <div className="values-grid">
            <div className="value-card">
              <h3>Quality First</h3>
              <p>
                We use only the finest materials and pay attention to every detail
                in our manufacturing process to ensure lasting quality.
              </p>
            </div>
            <div className="value-card">
              <h3>Unique Designs</h3>
              <p>
                Our designs are created by talented artists and designers who push
                the boundaries of streetwear fashion.
              </p>
            </div>
            <div className="value-card">
              <h3>Sustainability</h3>
              <p>
                We're committed to reducing our environmental impact through
                sustainable practices and eco-friendly materials.
              </p>
            </div>
            <div className="value-card">
              <h3>Customer Focus</h3>
              <p>
                Your satisfaction is our top priority. We strive to provide
                exceptional service and support to every customer.
              </p>
            </div>
          </div>
        </section>
        <section className="mission-section">
          <h2>Our Mission</h2>
          <p>
            To empower individuals to express themselves through fashion while maintaining
            the highest standards of quality, comfort, and style. We believe that great
            clothing should be accessible to everyone, regardless of their budget or style preferences.
          </p>
          <div className="mission-stats">
            <div className="stat">
              <h3>1000+</h3>
              <p>Happy Customers</p>
            </div>
            <div className="stat">
              <h3>50+</h3>
              <p>Unique Designs</p>
            </div>
            <div className="stat">
              <h3>24/7</h3>
              <p>Customer Support</p>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
 };
 export default About;
--- a/src/pages/Admin.css
+++ b/src/pages/Admin.css
@@ -0,0 +1,259 @@
 :root {
  --primary-color: #2563eb;
  --secondary-color: #1e40af;
  --bg-color: #f3f4f6;
  --sidebar-bg: #1f2937;
  --sidebar-text: #e5e7eb;
  --card-bg: #ffffff;
  --text-color: #111827;
  --border-color: #e5e7eb;
  --danger-color: #ef4444;
 }
 .admin-container {
  display: flex;
  min-height: 100vh;
  background-color: var(--bg-color);
  font-family: 'Inter', sans-serif;
 }
 /* Sidebar */
 .admin-sidebar {
  width: 260px;
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  padding: 20px;
  flex-shrink: 0;
 }
 .sidebar-header {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 40px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
 }
 .sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
 }
 .nav-item {
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--sidebar-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
 }
 .nav-item:hover, .nav-item.active {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
 }
 /* Main Content */
 .admin-main {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
 }
 .page-header {
  margin-bottom: 32px;
 }
 .page-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
 }
 /* Cards */
 .admin-card {
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 24px;
  margin-bottom: 32px;
 }
 .card-header {
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
 }
 .card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
 }
 /* Form */
 .admin-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
 }
 .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
 }
 .form-group.full-width {
  grid-column: span 2;
 }
 .form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color);
 }
 .form-input, .form-textarea, .form-select {
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.95rem;
  transition: border-color 0.2s;
  width: 100%;
 }
 .form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
 }
 .form-textarea {
  min-height: 100px;
  resize: vertical;
 }
 .file-upload-wrapper {
  border: 2px dashed var(--border-color);
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #f9fafb;
 }
 .file-upload-wrapper:hover {
  border-color: var(--primary-color);
  background: #eff6ff;
 }
 .image-preview {
  margin-top: 10px;
  max-height: 150px;
  border-radius: 6px;
  object-fit: cover;
 }
 .btn-primary {
  background-color: var(--primary-color);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
  width: fit-content;
 }
 .btn-primary:hover {
  background-color: var(--secondary-color);
 }
 /* Table */
 .table-container {
  overflow-x: auto;
 }
 .admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
 }
 .admin-table th {
  background-color: #f9fafb;
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  color: #6b7280;
 }
 .admin-table td {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color);
  vertical-align: middle;
 }
 .product-thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  background: #f3f4f6;
 }
 .action-btn {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: white;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--danger-color);
  transition: all 0.2s;
 }
 .action-btn:hover {
  background: #fee2e2;
  border-color: #fecaca;
 }
 .admin-error {
  background-color: #fee2e2;
  color: #991b1b;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 20px;
  border: 1px solid #fecaca;
 }
@media (max-width: 768px) {
  .admin-container {
    flex-direction: column;
  }
  .admin-sidebar {
    width: 100%;
    padding: 16px;
  }
  .admin-form {
    grid-template-columns: 1fr;
  }
 }
--- a/src/pages/Admin.jsx
+++ b/src/pages/Admin.jsx
@@ -0,0 +1,251 @@
 import React, { useEffect, useState } from 'react';
 import productService from '../services/productService';
 import './Admin.css';
 const Admin = () => {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [form, setForm] = useState({ 
    name: '', 
    description: '', 
    price: '', 
    stockQuantity: 0, 
    category: '',
    imageUrl: '',
    imageUrl1: ''
  });
  const [imagePreview, setImagePreview] = useState('');
  const [imagePreview1, setImagePreview1] = useState('');
  const [error, setError] = useState(null);
  const [activeTab, setActiveTab] = useState('products');
  useEffect(() => {
    fetchProducts();
  }, []);
  const fetchProducts = async () => {
    try {
      setLoading(true);
      const data = await productService.getProducts({ limit: 200 });
      setProducts(data.products || []);
    } catch (err) {
      console.error(err);
      setError('Failed to load products or you may not have admin access');
    } finally {
      setLoading(false);
    }
  };
  const handleInput = (e) => setForm({ ...form, [e.target.name]: e.target.value }); 
  const handleImageUpload = (e, field) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setForm(prev => ({ ...prev, [field]: reader.result }));
        if (field === 'imageUrl') setImagePreview(reader.result);
        if (field === 'imageUrl1') setImagePreview1(reader.result);
      };
      reader.readAsDataURL(file);
    }
  };
  const handleAddProduct = async (e) => {
    e.preventDefault();
    if (!form.name || !form.price) {
      setError('Name and price are required');
      return;
    }
    const payload = {
      name: form.name,
      description: form.description,
      price: parseFloat(form.price),
      stockQuantity: parseInt(form.stockQuantity, 10) || 0,
      imageUrl: form.imageUrl,
      imageUrl1: form.imageUrl1, // Sending second image
      category: form.category,
    };
    try {
      await productService.addProduct(payload);
      setForm({ name: '', description: '', price: '', stockQuantity: 0, category: '', imageUrl: '', imageUrl1: '' });
      setImagePreview('');
      setImagePreview1('');
      fetchProducts();
      setError(null);
      alert('Product added successfully!');
    } catch (err) {
      console.error(err);
      setError(err.response?.data?.message || 'Failed to add product');
    }
  };
  const handleUpdateStock = async (id, newQty) => {
    try {
      await productService.updateProduct(id, { stockQuantity: parseInt(newQty, 10) });
      fetchProducts();
    } catch (err) {
      console.error(err);
      setError('Failed to update stock');
    }
  };
  const handleDelete = async (id) => {
    if (!window.confirm('Delete this product?')) return;
    try {
      await productService.deleteProduct(id);
      fetchProducts();
    } catch (err) {
      console.error(err);
      setError('Failed to delete product');
    }
  };
  return (
    <div className="admin-container">
      {/* Sidebar */}
      <aside className="admin-sidebar">
        <div className="sidebar-header">
          <span>Wraffle Admin</span>
        </div>
        <nav className="sidebar-nav">
          <a 
            href="#" 
            className={`nav-item ${activeTab === 'products' ? 'active' : ''}`}
            onClick={() => setActiveTab('products')}
          >
            📦 Products
          </a>
          <a 
            href="#" 
            className={`nav-item ${activeTab === 'orders' ? 'active' : ''}`}
            onClick={() => setActiveTab('orders')}
          >
            🛒 Orders (Coming Soon)
          </a>
          <a href="/" className="nav-item">
            🏠 Back to Site
          </a>
        </nav>
      </aside>
      {/* Main Content */}
      <main className="admin-main">
        <div className="page-header">
          <h1 className="page-title">Product Management</h1>
        </div>
        {error && <div className="admin-error">{error}</div>}
        {/* Add Product Form */}
        <section className="admin-card">
          <div className="card-header">
            <h2 className="card-title">Add New Product</h2>
          </div>
          <form onSubmit={handleAddProduct} className="admin-form">
            <div className="form-group">
              <label className="form-label">Product Name</label>
              <input className="form-input" name="name" placeholder="e.g. Summer T-Shirt" value={form.name} onChange={handleInput} />
            </div>
            <div className="form-group">
              <label className="form-label">Price ($)</label>
              <input className="form-input" name="price" type="number" step="0.01" placeholder="0.00" value={form.price} onChange={handleInput} />
            </div>
            <div className="form-group">
              <label className="form-label">Stock Quantity</label>
              <input className="form-input" name="stockQuantity" type="number" placeholder="0" value={form.stockQuantity} onChange={handleInput} />
            </div>
            <div className="form-group">
              <label className="form-label">Category</label>
              <input className="form-input" name="category" placeholder="e.g. Men, Women" value={form.category} onChange={handleInput} />
            </div>
            <div className="form-group full-width">
              <label className="form-label">Description</label>
              <textarea className="form-textarea" name="description" placeholder="Product details..." value={form.description} onChange={handleInput} />
            </div>
            {/* Image Uploads */}
            <div className="form-group">
              <label className="form-label">Main Image</label>
              <div className="file-upload-wrapper">
                <input type="file" accept="image/*" onChange={(e) => handleImageUpload(e, 'imageUrl')} />
                {imagePreview && <img src={imagePreview} alt="Preview" className="image-preview" />}
              </div>
            </div>
            <div className="form-group">
              <label className="form-label">Second Image</label>
              <div className="file-upload-wrapper">
                <input type="file" accept="image/*" onChange={(e) => handleImageUpload(e, 'imageUrl1')} />
                {imagePreview1 && <img src={imagePreview1} alt="Preview" className="image-preview" />}
              </div>
            </div>
              <div className="form-group full-width">
              <button type="submit" className="btn-primary">Add Product</button>
            </div>
          </form>
        </section>
        {/* Product List */}
        <section className="admin-card">
          <div className="card-header">
            <h2 className="card-title">Product List</h2>
          </div>
          {loading ? <p>Loading...</p> : (
            <div className="table-container">
              <table className="admin-table">
                <thead>
                  <tr>
                    <th>Image</th>
                    <th>Name</th>
                    <th>Price</th>
                    <th>Stock</th>
                    <th>Category</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {products.map(p => (
                    <tr key={p.id}>
                      <td>
                        {p.image_url ? (
                          <img src={p.image_url} alt={p.name} className="product-thumb" />
                        ) : (
                          <div className="product-thumb" style={{display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#ccc'}}>No Img</div>
                        )}
                      </td>
                      <td>{p.name}</td>
                      <td>${p.price}</td>
                      <td>
                        <input 
                          type="number" 
                          className="form-input" 
                          style={{width: '80px'}}
                          defaultValue={p.stock_quantity} 
                          onBlur={(e) => handleUpdateStock(p.id, e.target.value)} 
                        />
                      </td>
                      <td>{p.category}</td>
                      <td>
                        <button className="action-btn" onClick={() => handleDelete(p.id)}>Delete</button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </section>
      </main>
    </div>
  );
 };
 export default Admin;
--- a/src/pages/Auth.css
+++ b/src/pages/Auth.css
@@ -0,0 +1,169 @@
 .auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #000000 0%, #333333 100%);
  padding: 20px;
 }
 .auth-card {
  background: #000;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 450px;
  padding: 40px;
  animation: slideIn 0.5s ease-out;
  border: 2px solid #FFB400;
 }
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
 }
 .auth-header {
  text-align: center;
  margin-bottom: 30px;
 }
 .auth-logo {
  text-align: center;
  margin-bottom: 20px;
 }
 .auth-logo-img {
  max-width: 60px;
  height: auto;
  filter: brightness(0) invert(1);
 }
 .auth-header h2 {
  color: #FFB400;
  font-size: 28px;
  font-weight: 600;
  margin: 0;
 }
 .auth-form {
  margin-bottom: 20px;
 }
 .form-row {
  display: flex;
  gap: 15px;
 }
 .form-row .form-group {
  flex: 1;
 }
 .form-group {
  margin-bottom: 20px;
 }
 .form-group label {
  display: block;
  margin-bottom: 8px;
  color: #FFB400;
  font-weight: 500;
 }
 .form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #FFB400;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
  background-color: #111;
  color: #FFB400;
 }
 .form-group input:focus {
  outline: none;
  border-color: #FFC107;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
  background-color: #222;
 }
 .error-message {
  background: #ff4444;
  color: #fff;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 14px;
  text-align: center;
 }
 .auth-button {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #FFB400 0%, #FFC107 100%);
  color: #000;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 .auth-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
 }
 .auth-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
 }
 .auth-toggle {
  text-align: center;
  margin-top: 20px;
 }
 .auth-toggle p {
  color: #FFB400;
  margin: 0;
  font-size: 14px;
 }
 .toggle-button {
  background: none;
  border: none;
  color: #FFB400;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  margin-left: 5px;
  transition: color 0.2s ease;
 }
 .toggle-button:hover {
  color: #FFC107;
 }
@media (max-width: 480px) {
  .auth-container {
    padding: 10px;
  }
  .auth-card {
    padding: 30px 20px;
  }
  .form-row {
    flex-direction: column;
    gap: 0;
  }
 }
--- a/src/pages/Auth.jsx
+++ b/src/pages/Auth.jsx
@@ -0,0 +1,273 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import authService from '../services/authService';
 import productService from '../services/productService';
 import './Auth.css';
 const Auth = ({ onLogin }) => {
  const [isLogin, setIsLogin] = useState(true);
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    password: '',
    confirmPassword: ''
  });
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const [emailNotVerified, setEmailNotVerified] = useState(false);
  const [showForgotPassword, setShowForgotPassword] = useState(false);
  const navigate = useNavigate();
  const handleInputChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };
  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    setEmailNotVerified(false);
    try {
      if (isLogin) {
        const response = await authService.login({
          email: formData.email,
          password: formData.password
        });
        // If backend returned a token (helpful in dev over HTTP), set it in memory
        if (response && response.token) {
          authService.setToken(response.token);
          productService.setToken(response.token);
        }
        // Inform parent to refresh profile and update UI
        onLogin();
        navigate('/');
      } else {
        if (formData.password !== formData.confirmPassword) {
          setError('Passwords do not match');
          setLoading(false);
          return;
        }
        await authService.register({
          firstName: formData.firstName,
          lastName: formData.lastName,
          email: formData.email,
          password: formData.password
        });
        setIsLogin(true);
        setError('Registration successful! Please check your email for verification and then login.');
      }
    } catch (err) {
      const errorMessage = err.response?.data?.message || 'An error occurred';
      setError(errorMessage);
      if (errorMessage === 'Please verify your email before logging in') {
        setEmailNotVerified(true);
      }
    } finally {
      setLoading(false);
    }
  };
  const handleResendVerification = async () => {
    setError('');
    setLoading(true);
    try {
      await authService.resendVerificationEmail({ email: formData.email });
      setError('A new verification email has been sent. Please check your inbox.');
    } catch (err) {
      setError(err.response?.data?.message || 'An error occurred while resending the verification email.');
    } finally {
      setLoading(false);
    }
  };
  const handleForgotPasswordSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    try {
      await authService.forgotPassword(formData.email);
      setError('If an account with that email exists, a password reset link has been sent.');
      setShowForgotPassword(false);
    } catch (err) {
      setError(err.response?.data?.message || 'An error occurred.');
    } finally {
      setLoading(false);
    }
  };
  const toggleMode = () => {
    setIsLogin(!isLogin);
    setError('');
    setFormData({
      firstName: '',
      lastName: '',
      email: '',
      password: '',
      confirmPassword: ''
    });
    setEmailNotVerified(false);
    setShowForgotPassword(false);
  };
  if (showForgotPassword) {
    return (
      <div className="auth-container">
        <div className="auth-card">
          <div className="auth-header">
            <div className="auth-logo">
              <img src="/wraffle_logo.png" alt="Wraffle" className="auth-logo-img" />
            </div>
            <h2>Forgot Password</h2>
          </div>
          <form onSubmit={handleForgotPasswordSubmit} className="auth-form">
            <p>Enter your email address and we'll send you a link to reset your password.</p>
            <div className="form-group">
              <label htmlFor="email">Email</label>
              <input
                type="email"
                id="email"
                name="email"
                value={formData.email}
                onChange={handleInputChange}
                required
              />
            </div>
            {error && <div className="error-message">{error}</div>}
            <button type="submit" className="auth-button" disabled={loading}>
              {loading ? 'Sending...' : 'Send Reset Link'}
            </button>
          </form>
          <div className="auth-toggle">
            <p>
              Remember your password?
              <button type="button" onClick={() => setShowForgotPassword(false)} className="toggle-button">
                Login
              </button>
            </p>
          </div>
        </div>
      </div>
    );
  }
  return (
    <div className="auth-container">
      <div className="auth-card">
        <div className="auth-header">
          <div className="auth-logo">
            <img src="/wraffle_logo.png" alt="Wraffle" className="auth-logo-img" />
          </div>
          <h2>{isLogin ? 'Login' : 'Sign Up'}</h2>
        </div>
        <form onSubmit={handleSubmit} className="auth-form">
          {!isLogin && (
            <div className="form-row">
              <div className="form-group">
                <label htmlFor="firstName">First Name</label>
                <input
                  type="text"
                  id="firstName"
                  name="firstName"
                  value={formData.firstName}
                  onChange={handleInputChange}
                  required={!isLogin}
                />
              </div>
              <div className="form-group">
                <label htmlFor="lastName">Last Name</label>
                <input
                  type="text"
                  id="lastName"
                  name="lastName"
                  value={formData.lastName}
                  onChange={handleInputChange}
                  required={!isLogin}
                />
              </div>
            </div>
          )}
          <div className="form-group">
            <label htmlFor="email">Email</label>
            <input
              type="email"
              id="email"
              name="email"
              value={formData.email}
              onChange={handleInputChange}
              required
            />
          </div>
          <div className="form-group">
            <label htmlFor="password">Password</label>
            <input
              type="password"
              id="password"
              name="password"
              value={formData.password}
              onChange={handleInputChange}
              required
            />
            {isLogin && (
              <div className="forgot-password-link">
                <button type="button" onClick={() => setShowForgotPassword(true)} className="toggle-button">
                  Forgot Password?
                </button>
              </div>
            )}
          </div>
          {!isLogin && (
            <div className="form-group">
              <label htmlFor="confirmPassword">Confirm Password</label>
              <input
                type="password"
                id="confirmPassword"
                name="confirmPassword"
                value={formData.confirmPassword}
                onChange={handleInputChange}
                required={!isLogin}
              />
            </div>
          )}
          {error && <div className="error-message">{error}</div>}
          {emailNotVerified && (
            <div className="resend-verification">
              <p>Your email is not verified.</p>
              <button type="button" onClick={handleResendVerification} className="toggle-button" disabled={loading}>
                {loading ? 'Sending...' : 'Resend Verification Link'}
              </button>
            </div>
          )}
          <button type="submit" className="auth-button" disabled={loading}>
            {loading ? 'Please wait...' : (isLogin ? 'Login' : 'Sign Up')}
          </button>
        </form>
        <div className="auth-toggle">
          <p>
            {isLogin ? "Don't have an account?" : 'Already have an account?'}
            <button type="button" onClick={toggleMode} className="toggle-button">
              {isLogin ? 'Sign Up' : 'Login'}
            </button>
          </p>
        </div>
      </div>
    </div>
  );
 };
 export default Auth;
--- a/src/pages/Cart.css
+++ b/src/pages/Cart.css
@@ -0,0 +1,41 @@
 .cart-page {
  padding: 24px;
 }
 .cart-table {
  width: 100%;
  border-collapse: collapse;
 }
 .cart-table th, .cart-table td {
  padding: 12px;
  border-bottom: 1px solid #eee;
  text-align: left;
 }
 .cart-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  margin-right: 12px;
 }
 .cart-product {
  display: flex;
  align-items: center;
 }
 .cart-summary {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
 }
 .cart-actions button {
  margin-left: 8px;
 }
 .cart-remove {
  background: transparent;
  color: #c00;
  border: 1px solid #c00;
  padding: 6px 10px;
  cursor: pointer;
 }
 .cart-error { color: #c00; margin-bottom: 12px; }
 .cart-empty { padding: 24px; }
 .cart-loading { padding: 24px; }
--- a/src/pages/Cart.jsx
+++ b/src/pages/Cart.jsx
@@ -0,0 +1,121 @@
 import React, { useEffect, useState } from 'react';
 import cartService from '../services/cartService';
 import './Cart.css';
 import { useNavigate } from 'react-router-dom';
 const Cart = () => {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const navigate = useNavigate();
  const fetchCart = async () => {
    try {
      setLoading(true);
      const data = await cartService.getCart();
      setItems(data.items || []);
      setError(null);
    } catch (err) {
      console.error('Fetch cart error', err);
      if (err.response && (err.response.status === 401 || err.response.status === 403)) {
        // go to login
        navigate('/auth');
      } else {
        setError('Failed to load cart');
      }
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    fetchCart();
  }, []);
  const handleQuantityChange = async (itemId, qty) => {
    if (qty < 0) return;
    try {
      await cartService.updateItem(itemId, qty);
      fetchCart();
    } catch (err) {
      console.error('Update item error', err);
      setError('Failed to update item');
    }
  };
  const handleRemove = async (itemId) => {
    if (!window.confirm('Remove this item from cart?')) return;
    try {
      await cartService.removeItem(itemId);
      fetchCart();
    } catch (err) {
      console.error('Remove item error', err);
      setError('Failed to remove item');
    }
  };
  const subtotal = items.reduce((sum, it) => sum + (it.price || 0) * (it.quantity || 0), 0);
  if (loading) return <div className="cart-loading">Loading cart...</div>;
  return (
    <div className="cart-page">
      <h1>Your Cart</h1>
      {error && <div className="cart-error">{error}</div>}
      {items.length === 0 ? (
        <div className="cart-empty">Your cart is empty.</div>
      ) : (
        <div className="cart-list">
          <table className="cart-table">
            <thead>
              <tr>
                <th>Product</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {items.map(item => (
                <tr key={item.cartItemId}>
                  <td className="cart-product">
                    <img src={item.imageUrl || '/placeholder.jpg'} alt={item.name} className="cart-thumb" />
                    <div className="cart-prod-info">
                      <div className="cart-prod-name">{item.name}</div>
                      <div className="cart-prod-stock">{item.stockQuantity > 0 ? `${item.stockQuantity} in stock` : 'Out of stock'}</div>
                    </div>
                  </td>
                  <td>₹ {item.price}</td>
                  <td>
                    <input
                      type="number"
                      min="0"
                      value={item.quantity}
                      onChange={(e) => handleQuantityChange(item.cartItemId, parseInt(e.target.value || '0', 10))}
                    />
                  </td>
                  <td>₹ {(item.price * item.quantity).toFixed(2)}</td>
                  <td>
                    <button className="cart-remove" onClick={() => handleRemove(item.cartItemId)}>Remove</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          <div className="cart-summary">
            <div>Subtotal: <strong>₹ {subtotal.toFixed(2)}</strong></div>
            <div className="cart-actions">
              <button onClick={() => navigate('/shop')}>Continue Shopping</button>
              <button onClick={() => navigate('/orders')}>Proceed to Checkout</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
 };
 export default Cart;
--- a/src/pages/Contact.css
+++ b/src/pages/Contact.css
@@ -0,0 +1,190 @@
 .contact {
  min-height: calc(100vh - 160px);
  padding: 2rem 1rem;
 }
 .contact-header {
  text-align: center;
  margin-bottom: 4rem;
 }
 .contact-header h1 {
  color: #000;
  font-size: 2.5rem;
  margin-bottom: 1rem;
 }
 .contact-header p {
  color: #666;
  font-size: 1.1rem;
 }
 .contact-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
 }
 .contact-info {
  display: flex;
  flex-direction: column;
  gap: 3rem;
 }
 .info-section h2,
 .social-section h2 {
  color: #000;
  font-size: 1.8rem;
  margin-bottom: 2rem;
 }
 .contact-details {
  display: grid;
  gap: 1.5rem;
 }
 .contact-item h3 {
  color: #FFB400;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
 }
 .contact-item p {
  color: #666;
  line-height: 1.5;
 }
 .social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
 }
 .social-link {
  background-color: #000;
  color: #FFB400;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  font-weight: bold;
 }
 .social-link:hover {
  background-color: #333;
 }
 .contact-form {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 .contact-form h2 {
  color: #000;
  margin-bottom: 2rem;
  text-align: center;
 }
 .form-group {
  margin-bottom: 1.5rem;
 }
 .form-group label {
  display: block;
  color: #333;
  font-weight: bold;
  margin-bottom: 0.5rem;
 }
 .form-group input,
 .form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
 }
 .form-group input:focus,
 .form-group textarea:focus {
  outline: none;
  border-color: #FFB400;
 }
 .form-group textarea {
  resize: vertical;
  min-height: 120px;
 }
 .submit-button {
  background-color: #FFB400;
  color: #000;
  border: none;
  padding: 1rem 2rem;
  border-radius: 5px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.3s ease;
 }
 .submit-button:hover:not(:disabled) {
  background-color: #FFC107;
 }
 .submit-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
 }
 .submit-message {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
 }
 .submit-message.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
 }
 .submit-message.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
 }
@media (max-width: 768px) {
  .contact-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .contact-header h1 {
    font-size: 2rem;
  }
  .info-section h2,
  .social-section h2,
  .contact-form h2 {
    font-size: 1.5rem;
  }
  .social-links {
    justify-content: center;
  }
  .contact-form {
    padding: 1.5rem;
  }
 }
--- a/src/pages/Contact.jsx
+++ b/src/pages/Contact.jsx
@@ -0,0 +1,151 @@
 import React, { useState } from 'react';
 import './Contact.css';
 const Contact = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    subject: '',
    message: ''
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitMessage, setSubmitMessage] = useState('');
  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };
  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    // Simulate form submission
    try {
      // In a real app, this would send to your backend
      await new Promise(resolve => setTimeout(resolve, 1000));
      setSubmitMessage('Thank you for your message! We\'ll get back to you soon.');
      setFormData({ name: '', email: '', subject: '', message: '' });
    } catch (error) {
      setSubmitMessage('Sorry, there was an error sending your message. Please try again.');
    } finally {
      setIsSubmitting(false);
    }
  };
  return (
    <div className="contact">
      <div className="contact-header">
        <h1>Contact Us</h1>
        <p>Get in touch with the Wraffle team</p>
      </div>
      <div className="contact-content">
        <div className="contact-info">
          <div className="info-section">
            <h2>Get In Touch</h2>
            <div className="contact-details">
              <div className="contact-item">
                <h3>Email</h3>
                <p>support@wraffle.com</p>
              </div>
              <div className="contact-item">
                <h3>Phone</h3>
                <p>+1 (555) 123-4567</p>
              </div>
              <div className="contact-item">
                <h3>Address</h3>
                <p>123 Fashion Street<br />Style City, SC 12345</p>
              </div>
              <div className="contact-item">
                <h3>Hours</h3>
                <p>Mon-Fri: 9AM-6PM<br />Sat-Sun: 10AM-4PM</p>
              </div>
            </div>
          </div>
          <div className="social-section">
            <h2>Follow Us</h2>
            <div className="social-links">
              <a href="#" className="social-link">Facebook</a>
              <a href="#" className="social-link">Instagram</a>
              <a href="#" className="social-link">Twitter</a>
              <a href="#" className="social-link">TikTok</a>
            </div>
          </div>
        </div>
        <div className="contact-form">
          <h2>Send us a Message</h2>
          <form onSubmit={handleSubmit}>
            <div className="form-group">
              <label htmlFor="name">Name *</label>
              <input
                type="text"
                id="name"
                name="name"
                value={formData.name}
                onChange={handleChange}
                required
              />
            </div>
            <div className="form-group">
              <label htmlFor="email">Email *</label>
              <input
                type="email"
                id="email"
                name="email"
                value={formData.email}
                onChange={handleChange}
                required
              />
            </div>
            <div className="form-group">
              <label htmlFor="subject">Subject *</label>
              <input
                type="text"
                id="subject"
                name="subject"
                value={formData.subject}
                onChange={handleChange}
                required
              />
            </div>
            <div className="form-group">
              <label htmlFor="message">Message *</label>
              <textarea
                id="message"
                name="message"
                value={formData.message}
                onChange={handleChange}
                rows="6"
                required
              ></textarea>
            </div>
            <button
              type="submit"
              className="submit-button"
              disabled={isSubmitting}
            >
              {isSubmitting ? 'Sending...' : 'Send Message'}
            </button>
            {submitMessage && (
              <div className={`submit-message ${submitMessage.includes('error') ? 'error' : 'success'}`}>
                {submitMessage}
              </div>
            )}
          </form>
        </div>
      </div>
    </div>
  );
 };
 export default Contact;
--- a/src/pages/Home.css
+++ b/src/pages/Home.css
@@ -0,0 +1,234 @@
 .home {
  min-height: calc(100vh - 160px);
 }
 .hero {
  background: linear-gradient(135deg, #000 0%, #333 100%);
  color: #FFB400;
  padding: 4rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60vh;
 }
 .hero-content {
  flex: 1;
  max-width: 500px;
 }
 .hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #FFB400;
 }
 .hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #ccc;
 }
 .cta-button {
  background-color: #FFB400;
  color: #000;
  padding: 1rem 2rem;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  font-size: 1.1rem;
  transition: background-color 0.3s ease;
  display: inline-block;
 }
 .cta-button:hover {
  background-color: #FFC107;
 }
 .hero-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
 }
 .hero-logo {
  max-width: 200px;
  height: auto;
  animation: float 3s ease-in-out infinite;
 }
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
 }
 /* Featured Products */
 .featured-products {
  padding: 4rem 1rem;
  background-color: #f9f9f9;
  text-align: center;
 }
 .featured-products h2 {
  color: #000;
  font-size: 2.5rem;
  margin-bottom: 3rem;
 }
 .products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
 }
 .product-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
 }
 .product-card:hover {
  transform: translateY(-5px);
 }
 .product-image {
  height: 250px;
  overflow: hidden;
 }
 .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
 }
 .product-info {
  padding: 1.5rem;
 }
 .product-info h3 {
  color: #000;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
 }
 .product-price {
  color: #FFB400;
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 1rem;
 }
 .view-product {
  background-color: #000;
  color: #FFB400;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 5px;
  display: inline-block;
  transition: background-color 0.3s ease;
 }
 .view-product:hover {
  background-color: #333;
 }
 .view-all {
  margin-top: 3rem;
 }
 .view-all-button {
  background-color: #FFB400;
  color: #000;
  padding: 1rem 2rem;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  display: inline-block;
  transition: background-color 0.3s ease;
 }
 .view-all-button:hover {
  background-color: #FFC107;
 }
 /* About Preview */
 .about-preview {
  padding: 4rem 1rem;
  background-color: #000;
  color: #FFB400;
 }
 .about-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
 }
 .about-content h2 {
  font-size: 2.5rem;
  margin-bottom: 3rem;
 }
 .features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
 }
 .feature h3 {
  color: #FFB400;
  margin-bottom: 1rem;
  font-size: 1.3rem;
 }
 .feature p {
  color: #ccc;
  line-height: 1.6;
 }
 .learn-more {
  background-color: #FFB400;
  color: #000;
  padding: 1rem 2rem;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  display: inline-block;
  transition: background-color 0.3s ease;
 }
 .learn-more:hover {
  background-color: #FFC107;
 }
@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1rem;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero-logo {
    max-width: 150px;
    height: auto;
  }
  .products-grid {
    grid-template-columns: 1fr;
  }
  .features {
    grid-template-columns: 1fr;
  }
 }
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -0,0 +1,91 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import productService from '../services/productService';
 import LoadingSpinner from '../components/LoadingSpinner';
 import './Home.css';
 const Home = () => {
  const [featuredProducts, setFeaturedProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const fetchFeaturedProducts = async () => {
      try {
        const response = await productService.getProducts({ limit: 6 });
        setFeaturedProducts(response.products || []);
      } catch (error) {
        console.error('Error fetching products:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchFeaturedProducts();
  }, []);
  if (loading) {
    return <LoadingSpinner />;
  }
  return (
    <div className="home">
      {/* Hero Section */}
      <section className="hero">
        <div className="hero-content">
          <h1>Welcome to Wraffle</h1>
          <p>Premium hoodies for every style and occasion</p>
          <Link to="/shop" className="cta-button">Shop Now</Link>
        </div>
        <div className="hero-image">
          <img src="/wraffle_logo.png" alt="Wraffle Logo" className="hero-logo" />
        </div>
      </section>
      {/* Featured Products */}
      <section className="featured-products">
        <h2>Featured Hoodies</h2>
        <div className="products-grid">
          {featuredProducts.map((product) => (
            <div key={product.id} className="product-card">
              <div className="product-image">
                <img src={product.image_url || '/placeholder.jpg'} alt={product.name} />
              </div>
              <div className="product-info">
                <h3>{product.name}</h3>
                <p className="product-price">${product.price}</p>
                <Link to={`/productdetail`} className="view-product">View Details</Link>
              </div>
            </div>
          ))}
        </div>
        <div className="view-all">
          <Link to="/shop" className="view-all-button">View All Products</Link>
        </div>
      </section>
      {/* About Section */}
      <section className="about-preview">
        <div className="about-content">
          <h2>Why Choose Wraffle?</h2>
          <div className="features">
            <div className="feature">
              <h3>Premium Quality</h3>
              <p>High-quality fabrics and craftsmanship in every hoodie</p>
            </div>
            <div className="feature">
              <h3>Unique Designs</h3>
              <p>Exclusive designs that stand out from the crowd</p>
            </div>
            <div className="feature">
              <h3>Fast Shipping</h3>
              <p>Quick delivery to get your hoodie as soon as possible</p>
            </div>
          </div>
          <Link to="/about" className="learn-more">Learn More About Us</Link>
        </div>
      </section>
    </div>
  );
 };
 export default Home;
--- a/src/pages/ProductDetails.css
+++ b/src/pages/ProductDetails.css
@@ -0,0 +1,482 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 /* Container */
 .product-details-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
  padding: 60px 40px 120px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  position: relative;
 }
 .product-details-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 60px;
  align-items: start;
 }
 /* Loading & Error States */
 .product-details-loading,
 .product-details-error {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
 }
 .product-details-error button {
  padding: 12px 32px;
  background: #d4a574;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
 }
 .product-details-error button:hover {
  background: #c59563;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(212, 165, 116, 0.3);
 }
 /* Left Panel - Details */
 .details-panel {
  background: white;
  padding: 40px 30px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 20px;
  transition: all 0.3s ease;
 }
 .details-panel:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
 }
 .details-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 30px 0;
  color: #1a1a1a;
  letter-spacing: -0.5px;
 }
 .details-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 0;
 }
 .tab-button {
  background: none;
  border: none;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  margin-right: 20px;
 }
 .tab-button:hover {
  color: #1a1a1a;
 }
 .tab-button.active {
  color: #1a1a1a;
  font-weight: 600;
 }
 .tab-button.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #d4a574;
  animation: slideIn 0.3s ease;
 }
@keyframes slideIn {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
 }
 .details-content {
  animation: fadeIn 0.4s ease;
 }
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
 }
 .tab-content {
  padding: 0;
 }
 .details-description {
  font-size: 15px;
  line-height: 1.8;
  color: #444;
  margin: 0;
 }
 .details-description strong {
  color: #1a1a1a;
  display: block;
  margin-top: 12px;
 }
 /* Center Panel - Product Image */
 .product-image-panel {
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .product-image-wrapper {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1;
  background: white;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
 }
 .product-image-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.05) 0%, rgba(212, 165, 116, 0) 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
 }
 .product-image-wrapper:hover::before {
  opacity: 1;
 }
 .product-image-wrapper:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
 }
 .product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.6s ease;
  animation: productSlideIn 0.6s ease;
 }
@keyframes productSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
 }
 /* Right Panel - Product Info */
 .product-info-panel {
  background: white;
  padding: 40px 35px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 20px;
  transition: all 0.3s ease;
 }
 .product-info-panel:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
 }
 .product-name {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 20px 0;
  color: #1a1a1a;
  letter-spacing: -0.5px;
  line-height: 1.2;
 }
 .product-tagline {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
  margin: 0 0 30px 0;
 }
 .product-price {
  font-size: 36px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 35px 0;
  letter-spacing: -1px;
 }
 .size-selector {
  margin-bottom: 30px;
 }
 .size-selector label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
 }
 .size-dropdown {
  width: 100%;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 45px;
 }
 .size-dropdown:hover {
  border-color: #d4a574;
  background: white;
 }
 .size-dropdown:focus {
  outline: none;
  border-color: #d4a574;
  background: white;
  box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.1);
 }
 .add-to-cart-btn {
  width: 100%;
  padding: 18px 32px;
  background: #1a1a1a;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
 }
 .add-to-cart-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
 }
 .add-to-cart-btn:hover::before {
  left: 100%;
 }
 .add-to-cart-btn:hover {
  background: #d4a574;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(212, 165, 116, 0.4);
 }
 .add-to-cart-btn:active {
  transform: translateY(0);
 }
 /* Navigation Arrows */
 .navigation-arrows {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  z-index: 10;
 }
 .arrow-button {
  width: 56px;
  height: 56px;
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 .arrow-button:hover {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: white;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 .arrow-button:active {
  transform: translateY(-2px);
 }
 .arrow-button svg {
  width: 24px;
  height: 24px;
 }
 /* Responsive Design */
@media (max-width: 1200px) {
  .product-details-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .details-panel,
  .product-info-panel {
    position: static;
  }
  .product-image-wrapper {
    max-width: 500px;
    margin: 0 auto;
  }
 }
@media (max-width: 768px) {
  .product-details-container {
    padding: 30px 20px 100px;
  }
  .product-details-wrapper {
    gap: 30px;
  }
  .details-panel,
  .product-info-panel {
    padding: 30px 20px;
  }
  .details-title {
    font-size: 24px;
  }
  .product-name {
    font-size: 26px;
  }
  .product-price {
    font-size: 28px;
  }
  .product-image-wrapper {
    padding: 20px;
    max-width: 100%;
  }
  .navigation-arrows {
    bottom: 30px;
  }
  .arrow-button {
    width: 48px;
    height: 48px;
  }
  .details-tabs {
    flex-wrap: wrap;
  }
  .tab-button {
    margin-right: 15px;
    font-size: 14px;
  }
 }
@media (max-width: 480px) {
  .product-details-container {
    padding: 20px 15px 80px;
  }
  .details-panel,
  .product-info-panel {
    padding: 25px 18px;
    border-radius: 12px;
  }
  .product-name {
    font-size: 22px;
  }
  .product-price {
    font-size: 24px;
  }
  .details-description {
    font-size: 14px;
  }
  .add-to-cart-btn {
    padding: 16px 28px;
    font-size: 15px;
  }
  .arrow-button {
    width: 44px;
    height: 44px;
  }
 }
--- a/src/pages/ProductDetails.jsx
+++ b/src/pages/ProductDetails.jsx
@@ -0,0 +1,228 @@
 import React, { useState, useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import productService from '../services/productService';
 import cartService from '../services/cartService';
 import './ProductDetails.css';
 const ProductDetails = () => {
  const location = useLocation();
  const selectedProduct = location.state?.selectedProduct; // Product passed from Shop page
  const [products, setProducts] = useState([]);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [activeTab, setActiveTab] = useState('details');
  const [selectedSize, setSelectedSize] = useState('Large');
  useEffect(() => {
    fetchProducts();
  }, []);
  useEffect(() => {
    // If a product was selected from Shop page, find it and set as current
    if (selectedProduct && products.length > 0) {
      const productIndex = products.findIndex(p => p.id === selectedProduct.id);
      if (productIndex !== -1) {
        setCurrentIndex(productIndex);
      }
    }
  }, [selectedProduct, products]);
  const fetchProducts = async () => {
    try {
      setLoading(true);
      const data = await productService.getProducts();
      setProducts(data.products || []);
      setLoading(false);
    } catch (err) {
      console.error('Error fetching products:', err);
      setError('Failed to load products. Please try again later.');
      setLoading(false);
    }
  };
  const currentProduct = products[currentIndex];
  const handlePrevious = () => {
    setCurrentIndex((prev) => (prev > 0 ? prev - 1 : products.length - 1));
  };
  const handleNext = () => {
    setCurrentIndex((prev) => (prev < products.length - 1 ? prev + 1 : 0));
  };
  const navigate = useNavigate();
  const handleAddToCart = async () => {
    if (!currentProduct) return;
    try {
      await cartService.addToCart(currentProduct.id, 1);
      alert(`Added ${currentProduct.name} to cart.`);
    } catch (err) {
      // If unauthorized, redirect to login
      if (err.response && (err.response.status === 401 || err.response.status === 403)) {
        alert('Please login to add items to your cart.');
        navigate('/auth');
      } else if (err.response && err.response.data && err.response.data.message) {
        alert(err.response.data.message);
      } else {
        console.error('Add to cart error', err);
        alert('Failed to add to cart. Please try again later.');
      }
    }
  };
  if (loading) {
    return (
      <div className="product-details-loading">
        <p>Loading products...</p>
      </div>
    );
  }
  if (error) {
    return (
      <div className="product-details-error">
        <p>{error}</p>
        <button onClick={fetchProducts}>Retry</button>
      </div>
    );
  }
  if (!currentProduct) {
    return (
      <div className="product-details-error">
        <p>No products available</p>
      </div>
    );
  }
  return (
    <div className="product-details-container">
      <div className="product-details-wrapper">
        {/* Left Panel - Details */}
        <div className="details-panel">
          <h2 className="details-title">Details</h2>
          <div className="details-tabs">
            <button 
              className={`tab-button ${activeTab === 'details' ? 'active' : ''}`}
              onClick={() => setActiveTab('details')}
            >
              {currentProduct.category || 'Product'}
            </button>
            <button 
              className={`tab-button ${activeTab === 'sale' ? 'active' : ''}`}
              onClick={() => setActiveTab('sale')}
            >
              Sale
            </button>
            <button 
              className={`tab-button ${activeTab === 'faq' ? 'active' : ''}`}
              onClick={() => setActiveTab('faq')}
            >
              FAQ
            </button>
          </div>
          <div className="details-content">
            {activeTab === 'details' && (
              <div className="tab-content">
                <p className="details-description">
                  {currentProduct.description || `Meet the ${currentProduct.name} – where clean style meets unmatched comfort. Built from ultra-premium fabric, this product delivers a soft, relaxed feel that keeps you cozy while looking effortlessly sharp. Its crisp finish gives it a refined edge, and the upcoming fresh design details make it a true standout piece.`}
                </p>
              </div>
            )}
            {activeTab === 'sale' && (
              <div className="tab-content">
                <p className="details-description">
                  Special offer! Get exclusive discounts on this amazing product. Limited time only. Don't miss out on this incredible deal!
                </p>
              </div>
            )}
            {activeTab === 'faq' && (
              <div className="tab-content">
                <p className="details-description">
                  <strong>Q: What materials is this made from?</strong><br/>
                  A: Premium quality materials for maximum comfort and durability.<br/><br/>
                  <strong>Q: How do I care for this product?</strong><br/>
                  A: Machine wash cold, tumble dry low. Iron on low heat if needed.
                </p>
              </div>
            )}
          </div>
        </div>
        {/* Center Panel - Product Image */}
        <div className="product-image-panel">
          <div className="product-image-wrapper">
            <img 
              src={currentProduct.image || currentProduct.image_url || currentProduct.imageUrl || 'https://via.placeholder.com/500x600?text=Product+Image'} 
              alt={currentProduct.name}
              className="product-image"
            />
          </div>
        </div>
        {/* Right Panel - Product Info */}
        <div className="product-info-panel">
          <h1 className="product-name">{currentProduct.name}</h1>
          <p className="product-tagline">
            {currentProduct.tagline || `Whether you're dressing it up, keeping it casual, or aiming for that street-ready vibe, the ${currentProduct.name} is your new go-to. Elevate your wardrobe with a product that blends style – effortlessly.`}
          </p>
          <div className="product-price">
            ₹ {currentProduct.price ? currentProduct.price.toLocaleString() : 'XXX'}
          </div>
          <div className="size-selector">
            <label htmlFor="size">Size</label>
            <select 
              id="size"
              value={selectedSize}
              onChange={(e) => setSelectedSize(e.target.value)}
              className="size-dropdown"
            >
              <option value="Small">Small</option>
              <option value="Medium">Medium</option>
              <option value="Large">Large</option>
              <option value="X-Large">X-Large</option>
              <option value="XX-Large">XX-Large</option>
            </select>
          </div>
          <button className="add-to-cart-btn" onClick={handleAddToCart}>
            Add to Cart
          </button>
        </div>
      </div>
      {/* Navigation Arrows */}
      <div className="navigation-arrows">
        <button 
          className="arrow-button arrow-left"
          onClick={handlePrevious}
          aria-label="Previous product"
        >
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M15 18L9 12L15 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
        <button 
          className="arrow-button arrow-right"
          onClick={handleNext}
          aria-label="Next product"
        >
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M9 18L15 12L9 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
      </div>
    </div>
  );
 };
 export default ProductDetails;
--- a/src/pages/ResetPassword.jsx
+++ b/src/pages/ResetPassword.jsx
@@ -0,0 +1,100 @@
 import React, { useState } from 'react';
 import { useSearchParams, useNavigate } from 'react-router-dom';
 import authService from '../services/authService';
 import './Auth.css';
 const ResetPassword = () => {
  const [formData, setFormData] = useState({
    password: '',
    confirmPassword: ''
  });
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  const token = searchParams.get('token');
  const handleInputChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };
  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    if (formData.password !== formData.confirmPassword) {
      setError('Passwords do not match');
      setLoading(false);
      return;
    }
    if (!token) {
      setError('Invalid or missing reset token.');
      setLoading(false);
      return;
    }
    try {
      await authService.resetPassword({ token, password: formData.password });
      setError('Password has been reset successfully. You can now login with your new password.');
      setTimeout(() => {
        navigate('/auth');
      }, 3000);
    } catch (err) {
      setError(err.response?.data?.message || 'An error occurred.');
    } finally {
      setLoading(false);
    }
  };
  return (
    <div className="auth-container">
      <div className="auth-card">
        <div className="auth-header">
          <div className="auth-logo">
            <img src="/wraffle_logo.png" alt="Wraffle" className="auth-logo-img" />
          </div>
          <h2>Reset Password</h2>
        </div>
        <form onSubmit={handleSubmit} className="auth-form">
          <div className="form-group">
            <label htmlFor="password">New Password</label>
            <input
              type="password"
              id="password"
              name="password"
              value={formData.password}
              onChange={handleInputChange}
              required
            />
          </div>
          <div className="form-group">
            <label htmlFor="confirmPassword">Confirm New Password</label>
            <input
              type="password"
              id="confirmPassword"
              name="confirmPassword"
              value={formData.confirmPassword}
              onChange={handleInputChange}
              required
            />
          </div>
          {error && <div className="error-message">{error}</div>}
          <button type="submit" className="auth-button" disabled={loading}>
            {loading ? 'Resetting...' : 'Reset Password'}
          </button>
        </form>
      </div>
    </div>
  );
 };
 export default ResetPassword;
--- a/src/pages/Shop.css
+++ b/src/pages/Shop.css
@@ -0,0 +1,240 @@
 .shop {
  padding: 2rem 1rem;
  min-height: calc(100vh - 160px);
 }
 .shop-header {
  text-align: center;
  margin-bottom: 3rem;
 }
 .shop-header h1 {
  color: #000;
  font-size: 2.5rem;
  margin-bottom: 1rem;
 }
 .shop-header p {
  color: #666;
  font-size: 1.1rem;
 }
 .shop-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
 }
 .search-bar {
  flex: 1;
  max-width: 400px;
 }
 .search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
 }
 .search-input:focus {
  outline: none;
  border-color: #FFB400;
 }
 .category-filter {
  min-width: 200px;
 }
 .category-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  background-color: white;
  cursor: pointer;
  transition: border-color 0.3s ease;
 }
 .category-select:focus {
  outline: none;
  border-color: #FFB400;
 }
 .products-section {
  max-width: 1200px;
  margin: 0 auto;
 }
 .products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
 }
 .product-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  max-height: fit-content;
 }
 .product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 .product-image {
  height: 200px;
  overflow: hidden;
  position: relative;
 }
 .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
 }
 .out-of-stock {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ff4444;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: bold;
 }
 .product-info {
  padding: 1.5rem;
 }
 .product-info h3 {
  color: #000;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
 }
 .product-description {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 .product-price {
  color: #FFB400;
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
 }
 .product-stock {
  color: #888;
  font-size: 0.9rem;
  margin-bottom: 1rem;
 }
 .view-product {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  color: white;
  padding: 0.875rem 1.75rem;
  text-decoration: none;
  border-radius: 12px;
  display: inline-block;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 .view-product::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: left 0.6s ease;
 }
 .view-product:hover:not(.disabled)::before {
  left: 100%;
 }
 .view-product:hover:not(.disabled) {
  background: linear-gradient(135deg, #d4a574 0%, #e6b684 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(212, 165, 116, 0.4);
 }
 .view-product:active:not(.disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
 }
 .view-product.disabled {
  background: linear-gradient(135deg, #e0e0e0 0%, #cccccc 100%);
  color: #888;
  cursor: not-allowed;
  box-shadow: none;
 }
 .no-products {
  text-align: center;
  padding: 4rem 2rem;
 }
 .no-products h3 {
  color: #666;
  font-size: 1.5rem;
  margin-bottom: 1rem;
 }
 .no-products p {
  color: #999;
  font-size: 1.1rem;
 }
@media (max-width: 768px) {
  .shop-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .search-bar,
  .category-filter {
    max-width: none;
  }
  .products-grid {
    grid-template-columns: 1fr;
  }
  .shop-header h1 {
    font-size: 2rem;
  }
 }
--- a/src/pages/Shop.jsx
+++ b/src/pages/Shop.jsx
@@ -0,0 +1,120 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import productService from '../services/productService';
 import LoadingSpinner from '../components/LoadingSpinner';
 import './Shop.css';
 const Shop = () => {
  const [products, setProducts] = useState([]);
  const [categories, setCategories] = useState([]);
  const [loading, setLoading] = useState(true);
  const [selectedCategory, setSelectedCategory] = useState('');
  const [searchTerm, setSearchTerm] = useState('');
  useEffect(() => {
    const fetchProductsAndCategories = async () => {
      try {
        const [productsResponse, categoriesResponse] = await Promise.all([
          productService.getProducts(),
          productService.getCategories()
        ]);
        setProducts(productsResponse.products || []);
        setCategories(categoriesResponse.categories || []);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchProductsAndCategories();
  }, []);
  const filteredProducts = products.filter(product => {
    const matchesCategory = !selectedCategory || product.category === selectedCategory;
    const matchesSearch = !searchTerm ||
      product.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      product.description.toLowerCase().includes(searchTerm.toLowerCase());
    return matchesCategory && matchesSearch;
  });
  if (loading) {
    return <LoadingSpinner />;
  }
  return (
    <div className="shop">
      <div className="shop-header">
        <h1>Shop Hoodies</h1>
        <p>Find your perfect hoodie from our collection</p>
      </div>
      <div className="shop-controls">
        <div className="search-bar">
          <input
            type="text"
            placeholder="Search hoodies..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="search-input"
          />
        </div>
        <div className="category-filter">
          <select
            value={selectedCategory}
            onChange={(e) => setSelectedCategory(e.target.value)}
            className="category-select"
          >
            <option value="">All Categories</option>
            {categories.map(category => (
              <option key={category} value={category}>{category}</option>
            ))}
          </select>
        </div>
      </div>
      <div className="products-section">
        {filteredProducts.length === 0 ? (
          <div className="no-products">
            <h3>No products found</h3>
            <p>Try adjusting your search or filter criteria</p>
          </div>
        ) : (
          <div className="products-grid">
            {filteredProducts.map((product) => (
              <div key={product.id} className="product-card">
                <div className="product-image">
                  <img src={product.image_url || '/placeholder.jpg'} alt={product.name} />
                  {product.stock_quantity === 0 && (
                    <div className="out-of-stock">Out of Stock</div>
                  )}
                </div>
                <div className="product-info">
                  <h3>{product.name}</h3>
                  <p className="product-description">{product.description}</p>
                  <p className="product-price">${product.price}</p>
                  <p className="product-stock">
                    {product.stock_quantity > 0
                      ? `${product.stock_quantity} in stock`
                      : 'Out of stock'
                    }
                  </p>
                  <Link
                    to="/productdetail"
                    state={{ selectedProduct: product }}
                    className={`view-product ${product.stock_quantity === 0 ? 'disabled' : ''}`}
                  >
                    View Product
                  </Link>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
 };
 export default Shop;
--- a/src/pages/VerifyEmail.css
+++ b/src/pages/VerifyEmail.css
@@ -0,0 +1,146 @@
 .verify-email-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #000000 0%, #333333 100%);
  padding: 20px;
 }
 .verify-email-card {
  background: #000000;
  border: 2px solid #FFB400;
  border-radius: 15px;
  padding: 40px;
  text-align: center;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
 }
 .verify-email-card h2 {
  color: #FFB400;
  margin-bottom: 20px;
  font-size: 2rem;
  font-weight: bold;
 }
 .verify-email-card p {
  color: #ffffff;
  margin-bottom: 20px;
  font-size: 1.1rem;
  line-height: 1.5;
 }
 .redirect-message {
  color: #FFB400 !important;
  font-weight: bold;
  margin-bottom: 30px !important;
 }
 /* Spinner */
 .spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #333333;
  border-top: 4px solid #FFB400;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
 }
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
 }
 /* Success styles */
 .success-icon {
  width: 80px;
  height: 80px;
  background: #FFB400;
  color: #000000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0 auto 20px;
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
 }
 .success h2 {
  color: #FFB400 !important;
 }
 /* Error styles */
 .error-icon {
  width: 80px;
  height: 80px;
  background: #ff4444;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0 auto 20px;
  box-shadow: 0 5px 15px rgba(255, 68, 68, 0.4);
 }
 .error h2 {
  color: #ff4444 !important;
 }
 /* Buttons */
 .close-btn, .retry-btn {
  background: #FFB400;
  color: #000000;
  border: none;
  padding: 12px 30px;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
 }
 .close-btn:hover, .retry-btn:hover {
  background: #ffed4e;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
 }
 .retry-btn {
  background: #ff4444;
  color: #ffffff;
 }
 .retry-btn:hover {
  background: #ff6666;
  box-shadow: 0 5px 15px rgba(255, 102, 102, 0.4);
 }
 /* Responsive design */
@media (max-width: 768px) {
  .verify-email-card {
    padding: 30px 20px;
    margin: 20px;
  }
  .verify-email-card h2 {
    font-size: 1.5rem;
  }
  .verify-email-card p {
    font-size: 1rem;
  }
  .close-btn, .retry-btn {
    padding: 10px 25px;
    font-size: 1rem;
  }
 }
--- a/src/pages/VerifyEmail.jsx
+++ b/src/pages/VerifyEmail.jsx
@@ -0,0 +1,89 @@
 import React, { useEffect, useState } from 'react';
 import { useSearchParams, useNavigate } from 'react-router-dom';
 import axios from 'axios';
 import API_BASE_URL from '../config/api';
 import './VerifyEmail.css';
 const VerifyEmail = () => {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  const [status, setStatus] = useState('verifying');
  const [message, setMessage] = useState('');
  useEffect(() => {
    // Auto-close after 10 seconds from page open
    const closeTimer = setTimeout(() => {
      navigate('/');
    }, 10000);
    const verifyEmail = async () => {
      const token = searchParams.get('token');
      if (!token) {
        setStatus('error');
        setMessage('No verification token provided');
        return;
      }
      try {
        const response = await axios.get(`${API_BASE_URL}/auth/verify-email?token=${token}`);
        setStatus('success');
        setMessage('Email verified successfully!');
        // Redirect to success page after verification
        navigate('/verify-email-success');
      } catch (error) {
        setStatus('error');
        setMessage(error.response?.data?.message || 'Verification failed');
      }
    };
    verifyEmail();
    // Cleanup timer on unmount
    return () => clearTimeout(closeTimer);
  }, [searchParams, navigate]);
  return (
    <div className="verify-email-container">
      <div className="verify-email-card">
        {status === 'verifying' && (
          <div className="verifying">
            <div className="spinner"></div>
            <h2>Verifying your email...</h2>
          </div>
        )}
        {status === 'success' && (
          <div className="success">
            <div className="success-icon">✓</div>
            <h2>Email Verified!</h2>
            <p>{message}</p>
            <p className="redirect-message">Redirecting to home page in 10 seconds...</p>
            <button
              className="close-btn"
              onClick={() => navigate('/')}
            >
              Go to Home Now
            </button>
          </div>
        )}
        {status === 'error' && (
          <div className="error">
            <div className="error-icon">✕</div>
            <h2>Verification Failed</h2>
            <p>{message}</p>
            <button
              className="retry-btn"
              onClick={() => navigate('/login')}
            >
              Back to Login
            </button>
          </div>
        )}
      </div>
    </div>
  );
 };
 export default VerifyEmail;
--- a/src/pages/VerifyEmailSuccess.css
+++ b/src/pages/VerifyEmailSuccess.css
@@ -0,0 +1,96 @@
 .verify-success-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #000000 0%, #333333 100%);
  padding: 20px;
 }
 .verify-success-card {
  background: #000000;
  border: 2px solid #FFB400;
  border-radius: 15px;
  padding: 40px;
  text-align: center;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
 }
 .verify-success-card h2 {
  color: #FFB400;
  margin-bottom: 20px;
  font-size: 2rem;
  font-weight: bold;
 }
 .verify-success-card p {
  color: #ffffff;
  margin-bottom: 20px;
  font-size: 1.1rem;
  line-height: 1.5;
 }
 .redirect-message {
  color: #FFB400 !important;
  font-weight: bold;
  margin-bottom: 30px !important;
 }
 /* Success icon */
 .success-icon {
  width: 80px;
  height: 80px;
  background: #FFB400;
  color: #000000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0 auto 20px;
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
 }
 /* Button */
 .home-btn {
  background: #FFB400;
  color: #000000;
  border: none;
  padding: 12px 30px;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
 }
 .home-btn:hover {
  background: #ffed4e;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
 }
 /* Responsive design */
@media (max-width: 768px) {
  .verify-success-card {
    padding: 30px 20px;
    margin: 20px;
  }
  .verify-success-card h2 {
    font-size: 1.5rem;
  }
  .verify-success-card p {
    font-size: 1rem;
  }
  .home-btn {
    padding: 10px 25px;
    font-size: 1rem;
  }
 }
--- a/src/pages/VerifyEmailSuccess.jsx
+++ b/src/pages/VerifyEmailSuccess.jsx
@@ -0,0 +1,36 @@
 import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import './VerifyEmailSuccess.css';
 const VerifyEmailSuccess = () => {
  const navigate = useNavigate();
  useEffect(() => {
    // Auto-close after 10 seconds
    const timer = setTimeout(() => {
      navigate('/');
    }, 10000);
    // Cleanup timer on unmount
    return () => clearTimeout(timer);
  }, [navigate]);
  return (
    <div className="verify-success-container">
      <div className="verify-success-card">
        <div className="success-icon">✓</div>
        <h2>Email Verified Successfully!</h2>
        <p>Your email has been verified. You can now access all features of your account.</p>
        <p className="redirect-message">Redirecting to home page in 10 seconds...</p>
        <button
          className="home-btn"
          onClick={() => navigate('/')}
        >
          Go to Home Now
        </button>
      </div>
    </div>
  );
 };
 export default VerifyEmailSuccess;
--- a/src/services/authService.jsx
+++ b/src/services/authService.jsx
@@ -0,0 +1,105 @@
 import axios from 'axios';
 import API_BASE_URL from '../config/api';
 class AuthService {
  constructor() {
    this.api = axios.create({
      baseURL: API_BASE_URL,
      headers: {
        'Content-Type': 'application/json'
      },
      withCredentials: true // Enable sending cookies with requests
    });
    // Handle 403 responses (invalid token) by logging out
    this.api.interceptors.response.use(
      (response) => response,
      (error) => {
        if (error.response && error.response.status === 403) {
          this.logout();
          window.location.href = '/auth'; // Assuming there's an auth page
        }
        return Promise.reject(error);
      }
    );
  }
  async register(userData) {
    const response = await this.api.post('/auth/register', userData);
    return response.data;
  }
  async login(credentials) {
    const response = await this.api.post('/auth/login', credentials);
    // Token is now stored in httpOnly cookie by backend
    // We rely on httpOnly cookie for authentication. Return response data for UI.
    return response.data;
  }
  // Set a token in memory (Authorization header) for the current session only.
  // This does NOT persist the token to localStorage and is safe for short-lived
  // development convenience. The server-side httpOnly cookie remains primary.
  setToken(token) {
    if (token) {
      this.api.defaults.headers['Authorization'] = `Bearer ${token}`;
    }
  }
  clearToken() {
    delete this.api.defaults.headers['Authorization'];
  }
  async verifyEmail(token) {
    const response = await this.api.get(`/auth/verify-email?token=${token}`);
    return response.data;
  }
  async getProfile() {
    const response = await this.api.get('/auth/profile');
    return response.data;
  }
  async logout() {
    try {
      await this.api.post('/auth/logout');
      // Cookies are cleared by backend; no local storage to clear since we avoid storing tokens in dev.
    } catch (error) {
      console.error('Logout API call failed:', error);
    }
  }
  async resendVerificationEmail(email) {
    const response = await this.api.post('/auth/resend-verification', email);
    return response.data;
  }
  async forgotPassword(email) {
    const response = await this.api.post('/auth/forgot-password', { email });
    return response.data;
  }
  async resetPassword(data) {
    const response = await this.api.post('/auth/reset-password', data);
    return response.data;
  }
  getToken() {
    // Token is now stored in httpOnly cookie, not accessible from JavaScript
    // We'll check authentication status via a server call or maintain a flag
    return null; // Cookies are not accessible from client-side JavaScript
  }
  async isAuthenticated() {
    try {
      // Check authentication by making a request to a protected endpoint
      await this.api.get('/auth/profile');
      return true;
    } catch (error) {
      return false;
    }
  }
 }
 export default new AuthService();
--- a/src/services/cartService.jsx
+++ b/src/services/cartService.jsx
@@ -0,0 +1,34 @@
 import axios from 'axios';
 import API_BASE_URL from '../config/api';
 class CartService {
  constructor() {
    this.api = axios.create({
      baseURL: API_BASE_URL,
      headers: { 'Content-Type': 'application/json' },
      withCredentials: true
    });
  }
  async getCart() {
    const res = await this.api.get('/cart');
    return res.data;
  }
  async addToCart(productId, quantity = 1) {
    const res = await this.api.post('/cart/add', { productId, quantity });
    return res.data;
  }
  async updateItem(itemId, quantity) {
    const res = await this.api.put(`/cart/item/${itemId}`, { quantity });
    return res.data;
  }
  async removeItem(itemId) {
    const res = await this.api.put(`/cart/item/${itemId}`, { quantity: 0 });
    return res.data;
  }
 }
 export default new CartService();
--- a/src/services/orderService.jsx
+++ b/src/services/orderService.jsx
@@ -0,0 +1,43 @@
 import axios from 'axios';
 import API_BASE_URL from '../config/api';
 class OrderService {
  constructor() {
    this.api = axios.create({
      baseURL: API_BASE_URL,
      headers: {
        'Content-Type': 'application/json'
      }
    });
    // Add withCredentials to send cookies with requests
    this.api.defaults.withCredentials = true;
  }
  async getOrders() {
    const response = await this.api.get('/orders');
    return response.data;
  }
  async getOrder(id) {
    const response = await this.api.get(`/orders/${id}`);
    return response.data;
  }
  async createOrder(orderData) {
    const response = await this.api.post('/orders', orderData);
    return response.data;
  }
  async updateOrderStatus(id, statusData) {
    const response = await this.api.put(`/orders/${id}/status`, statusData);
    return response.data;
  }
  async getAllOrders(params = {}) {
    const response = await this.api.get('/orders/admin/all', { params });
    return response.data;
  }
 }
 export default new OrderService();
--- a/src/services/productService.jsx
+++ b/src/services/productService.jsx
@@ -0,0 +1,89 @@
 // src/services/productService.jsx
 import axios from 'axios';
 import API_BASE_URL from '../config/api';
 class ProductService {
  constructor() {
    this.token = null; // in-memory token
    this.api = axios.create({
      baseURL: API_BASE_URL,
      headers: {
        'Content-Type': 'application/json',
      },
      // withCredentials: true // keep commented unless you use cookie auth
    });
    // Interceptor uses this.token (in-memory)
    this.api.interceptors.request.use((config) => {
      const t = this.token;
      if (t) {
        // ensure token is clean string
        const token = String(t).replace(/(^"|"$)/g, '').trim().replace(/[\r\n\t]+/g, '');
        config.headers = { ...config.headers, Authorization: `Bearer ${token}` };
      }
      return config;
    }, (err) => Promise.reject(err));
  }
  // call this after login or when token becomes available
  setToken(token) {
    this.token = token;
  }
  // optional: allow clearing token (logout)
  clearToken() {
    this.token = null;
  }
  async getProducts(params = {}) {
    const response = await this.api.get('/products', { params });
    return response.data;
  }
  async getProduct(id) {
    const response = await this.api.get(`/products/${id}`);
    return response.data;
  }
  async getCategories() {
    const response = await this.api.get('/products/categories/all');
    return response.data;
  }
  // Note: backend column names use snake_case (see DB). Map fields accordingly.
  async addProduct(productData) {
    // map camelCase keys to DB expected snake_case if needed
    const payload = this._mapClientToServer(productData);
    const response = await this.api.post('/products', payload);
    return response.data;
  }
  async updateProduct(id, productData) {
    const payload = this._mapClientToServer(productData);
    const response = await this.api.put(`/products/${id}`, payload);
    return response.data;
  }
  async deleteProduct(id) {
    const response = await this.api.delete(`/products/${id}`);
    return response.data;
  }
  // helper to map client camelCase -> server snake_case (adjust as necessary)
  _mapClientToServer(data = {}) {
    const mapped = {};
    if (data.name !== undefined) mapped.name = data.name;
    if (data.description !== undefined) mapped.description = data.description;
    if (data.price !== undefined) mapped.price = data.price;
    if (data.imageUrl !== undefined) mapped.image_url = data.imageUrl;
    if (data.imageUrl1 !== undefined) mapped.image_url1 = data.imageUrl1;
    if (data.stockQuantity !== undefined) mapped.stock_quantity = data.stockQuantity;
    if (data.category !== undefined) mapped.category = data.category;
    if (data.details !== undefined) mapped.details = data.details;
    if (data.sizeAvailable !== undefined) mapped.size_available = data.sizeAvailable;
    return mapped;
  }
 }
 export default new ProductService();