├── src ├── vite-env.d.ts ├── main.tsx ├── data │ ├── banners.ts │ └── products.ts ├── components │ ├── layout │ │ ├── CustomCursor.tsx │ │ ├── Footer.tsx │ │ └── Navbar.tsx │ ├── common │ │ ├── BannerCarousel.tsx │ │ ├── Wishlist.tsx │ │ ├── ProductCard.tsx │ │ └── Cart.tsx │ └── admin │ │ └── UserManagement.tsx ├── App.tsx ├── types │ └── index.ts ├── index.css ├── pages │ ├── Home.tsx │ ├── Orders.tsx │ ├── Auth.tsx │ ├── ProductDetail.tsx │ ├── Products.tsx │ ├── AdminDashboard.tsx │ └── Checkout.tsx └── store │ └── useStore.ts ├── postcss.config.js ├── tsconfig.json ├── tailwind.config.js ├── vite.config.ts ├── .gitignore ├── index.html ├── tsconfig.node.json ├── tsconfig.app.json ├── eslint.config.js └── package.json /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | //postcss config -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | // ts config json -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | // tailwind -------------------------------------------------------------------------------- /src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import App from './App.tsx'; 4 | import './index.css'; 5 | 6 | createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | optimizeDeps: { 8 | exclude: ['lucide-react'], 9 | }, 10 | }); 11 | //vite config -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | #gitignore 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | .env 26 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Shop Market - Fashion eCommerce Website 9 | 10 | 11 |

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | {/* Ts config node json */ 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "lib": ["ES2023"], 5 | "module": "ESNext", 6 | "skipLibCheck": true, 7 | 8 | /* Bundler mode */ 9 | "moduleResolution": "bundler", 10 | "allowImportingTsExtensions": true, 11 | "isolatedModules": true, 12 | "moduleDetection": "force", 13 | "noEmit": true, 14 | 15 | /* Linting */ 16 | "strict": true, 17 | "noUnusedLocals": true, 18 | "noUnusedParameters": true, 19 | "noFallthroughCasesInSwitch": true 20 | }, 21 | "include": ["vite.config.ts"] 22 | } 23 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | {/* ts config app json */ 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src"] 24 | } 25 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js'; 2 | import globals from 'globals'; 3 | import reactHooks from 'eslint-plugin-react-hooks'; 4 | import reactRefresh from 'eslint-plugin-react-refresh'; 5 | import tseslint from 'typescript-eslint'; 6 | // eslint config 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | } 28 | ); 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-react-typescript-starter", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@headlessui/react": "^2.2.4", 14 | "@heroicons/react": "^2.2.0", 15 | "@hookform/resolvers": "^5.1.1", 16 | "@types/react-router-dom": "^5.3.3", 17 | "framer-motion": "^12.23.0", 18 | "lucide-react": "^0.344.0", 19 | "react": "^18.3.1", 20 | "react-dom": "^18.3.1", 21 | "react-hook-form": "^7.60.0", 22 | "react-hot-toast": "^2.5.2", 23 | "react-router-dom": "^7.6.3", 24 | "swiper": "^11.2.10", 25 | "yup": "^1.6.1", 26 | "zustand": "^5.0.6" 27 | }, 28 | "devDependencies": { 29 | "@eslint/js": "^9.9.1", 30 | "@types/react": "^18.3.5", 31 | "@types/react-dom": "^18.3.0", 32 | "@vitejs/plugin-react": "^4.3.1", 33 | "autoprefixer": "^10.4.18", 34 | "eslint": "^9.9.1", 35 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 36 | "eslint-plugin-react-refresh": "^0.4.11", 37 | "globals": "^15.9.0", 38 | "postcss": "^8.4.35", 39 | "tailwindcss": "^3.4.1", 40 | "typescript": "^5.5.3", 41 | "typescript-eslint": "^8.3.0", 42 | "vite": "^5.4.2" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/data/banners.ts: -------------------------------------------------------------------------------- 1 | import { Banner } from '../types'; 2 | 3 | export const banners: Banner[] = [ 4 | { 5 | id: 'banner-1', 6 | title: 'Summer Collection 2024', 7 | subtitle: 'Discover the latest trends in summer fashion', 8 | image: 'https://images.pexels.com/photos/1536619/pexels-photo-1536619.jpeg?auto=compress&cs=tinysrgb&w=1200', 9 | link: '/products?category=summer', 10 | buttonText: 'Shop Now', 11 | isActive: true 12 | }, 13 | { 14 | id: 'banner-2', 15 | title: 'Men\'s Premium Collection', 16 | subtitle: 'Elevate your style with our premium menswear', 17 | image: 'https://images.pexels.com/photos/1040945/pexels-photo-1040945.jpeg?auto=compress&cs=tinysrgb&w=1200', 18 | link: '/men', 19 | buttonText: 'Explore Men\'s', 20 | isActive: true 21 | }, 22 | { 23 | id: 'banner-3', 24 | title: 'Women\'s Exclusive Deals', 25 | subtitle: 'Up to 50% off on selected women\'s fashion', 26 | image: 'https://images.pexels.com/photos/1457983/pexels-photo-1457983.jpeg?auto=compress&cs=tinysrgb&w=1200', 27 | link: '/women', 28 | buttonText: 'Shop Women\'s', 29 | isActive: true 30 | }, 31 | { 32 | id: 'banner-4', 33 | title: 'New Arrivals', 34 | subtitle: 'Be the first to wear the latest fashion trends', 35 | image: 'https://images.pexels.com/photos/2827400/pexels-photo-2827400.jpeg?auto=compress&cs=tinysrgb&w=1200', 36 | link: '/products?filter=new', 37 | buttonText: 'View New', 38 | isActive: true 39 | } 40 | ]; -------------------------------------------------------------------------------- /src/components/layout/CustomCursor.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import { motion } from 'framer-motion'; 3 | 4 | export const CustomCursor: React.FC = () => { 5 | const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); 6 | const [isHovering, setIsHovering] = useState(false); 7 | 8 | useEffect(() => { 9 | const updateMousePosition = (e: MouseEvent) => { 10 | setMousePosition({ x: e.clientX, y: e.clientY }); 11 | }; 12 | 13 | const handleMouseOver = (e: MouseEvent) => { 14 | const target = e.target as HTMLElement; 15 | if (target.tagName === 'BUTTON' || target.tagName === 'A' || target.closest('button') || target.closest('a')) { 16 | setIsHovering(true); 17 | } else { 18 | setIsHovering(false); 19 | } 20 | }; 21 | 22 | window.addEventListener('mousemove', updateMousePosition); 23 | window.addEventListener('mouseover', handleMouseOver); 24 | 25 | return () => { 26 | window.removeEventListener('mousemove', updateMousePosition); 27 | window.removeEventListener('mouseover', handleMouseOver); 28 | }; 29 | }, []); 30 | 31 | return ( 32 | <> 33 | 42 | 50 | 51 | ); 52 | }; -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; 3 | import { Toaster } from 'react-hot-toast'; 4 | import { useStore } from './store/useStore'; 5 | import { Navbar } from './components/layout/Navbar'; 6 | import { Footer } from './components/layout/Footer'; 7 | import { Cart } from './components/common/Cart'; 8 | import { Wishlist } from './components/common/Wishlist'; 9 | import { Home } from './pages/Home'; 10 | import { Products } from './pages/Products'; 11 | import { ProductDetail } from './pages/ProductDetail'; 12 | import { Orders } from './pages/Orders'; 13 | import { Checkout } from './pages/Checkout'; 14 | import { Auth } from './pages/Auth'; 15 | import { AdminDashboard } from './pages/AdminDashboard'; 16 | 17 | function App() { 18 | const { isDarkMode } = useStore(); 19 | 20 | useEffect(() => { 21 | if (isDarkMode) { 22 | document.documentElement.classList.add('dark'); 23 | } else { 24 | document.documentElement.classList.remove('dark'); 25 | } 26 | }, [isDarkMode]); 27 | 28 | return ( 29 | 30 |

31 | 32 |

33 | 34 | } /> 35 | } /> 36 | } /> 37 | } /> 38 | } /> 39 | } /> 40 | } /> 41 | } /> 42 | } /> 43 | Wishlist page - use the wishlist sidebar instead!

} /> 44 | 45 | 46 |

47 | 48 | 49 | 58 | 59 | 60 | ); 61 | } 62 | 63 | export default App; -------------------------------------------------------------------------------- /src/types/index.ts: -------------------------------------------------------------------------------- 1 | export interface Product { 2 | id: string; 3 | name: string; 4 | description: string; 5 | price: number; 6 | originalPrice?: number; 7 | category: string; 8 | subcategory: string; 9 | brand: string; 10 | images: string[]; 11 | colors: string[]; 12 | sizes: string[]; 13 | inStock: boolean; 14 | stockCount: number; 15 | rating: number; 16 | reviewCount: number; 17 | tags: string[]; 18 | gender: 'men' | 'women' | 'unisex'; 19 | isNew?: boolean; 20 | isFeatured?: boolean; 21 | isVisible?: boolean; 22 | discount?: number; 23 | specifications?: Record; 24 | relatedProducts?: string[]; 25 | createdAt?: Date; 26 | updatedAt?: Date; 27 | } 28 | 29 | export interface User { 30 | id: string; 31 | email: string; 32 | firstName: string; 33 | lastName: string; 34 | avatar?: string; 35 | role: 'user' | 'admin'; 36 | addresses: Address[]; 37 | orders: Order[]; 38 | wishlist: string[]; 39 | isActive: boolean; 40 | createdAt: Date; 41 | lastLogin?: Date; 42 | } 43 | 44 | export interface Address { 45 | id: string; 46 | label: string; 47 | street: string; 48 | city: string; 49 | state: string; 50 | zipCode: string; 51 | country: string; 52 | isDefault: boolean; 53 | } 54 | 55 | export interface CartItem { 56 | id: string; 57 | productId: string; 58 | product: Product; 59 | quantity: number; 60 | selectedColor: string; 61 | selectedSize: string; 62 | price: number; 63 | } 64 | 65 | export interface WishlistItem { 66 | id: string; 67 | productId: string; 68 | product: Product; 69 | addedAt: Date; 70 | } 71 | 72 | export interface Order { 73 | id: string; 74 | userId: string; 75 | items: CartItem[]; 76 | subtotal: number; 77 | tax: number; 78 | shipping: number; 79 | total: number; 80 | status: 'pending' | 'processing' | 'shipped' | 'delivered' | 'cancelled'; 81 | shippingAddress: Address; 82 | billingAddress: Address; 83 | paymentMethod: string; 84 | paymentStatus: 'pending' | 'completed' | 'failed'; 85 | createdAt: Date; 86 | updatedAt: Date; 87 | trackingNumber?: string; 88 | estimatedDelivery?: Date; 89 | } 90 | 91 | export interface Banner { 92 | id: string; 93 | title: string; 94 | subtitle: string; 95 | image: string; 96 | link: string; 97 | buttonText: string; 98 | isActive: boolean; 99 | } 100 | 101 | export interface FilterOptions { 102 | category: string[]; 103 | brand: string[]; 104 | color: string[]; 105 | size: string[]; 106 | priceRange: [number, number]; 107 | inStock: boolean; 108 | rating: number; 109 | sortBy: 'newest' | 'price-low' | 'price-high' | 'rating' | 'popular'; 110 | } 111 | 112 | export interface PaymentMethod { 113 | id: string; 114 | type: 'card' | 'paypal' | 'apple-pay' | 'google-pay'; 115 | name: string; 116 | icon: string; 117 | isDefault: boolean; 118 | } 119 | 120 | export interface SearchSuggestion { 121 | id: string; 122 | text: string; 123 | type: 'product' | 'category' | 'brand'; 124 | count?: number; 125 | } 126 | 127 | export interface DashboardStats { 128 | totalProducts: number; 129 | totalUsers: number; 130 | totalOrders: number; 131 | totalRevenue: number; 132 | lowStockProducts: number; 133 | pendingOrders: number; 134 | } 135 | 136 | // Index js -------------------------------------------------------------------------------- /src/components/common/BannerCarousel.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { motion, AnimatePresence } from 'framer-motion'; 3 | import { ChevronLeft, ChevronRight } from 'lucide-react'; 4 | import { Link } from 'react-router-dom'; 5 | import { banners } from '../../data/banners'; 6 | 7 | export const BannerCarousel: React.FC = () => { 8 | const [currentBanner, setCurrentBanner] = useState(0); 9 | const activeBanners = banners.filter(banner => banner.isActive); 10 | 11 | useEffect(() => { 12 | const timer = setInterval(() => { 13 | setCurrentBanner((prev) => (prev + 1) % activeBanners.length); 14 | }, 5000); 15 | 16 | return () => clearInterval(timer); 17 | }, [activeBanners.length]); 18 | 19 | const nextBanner = () => { 20 | setCurrentBanner((prev) => (prev + 1) % activeBanners.length); 21 | }; 22 | 23 | const prevBanner = () => { 24 | setCurrentBanner((prev) => (prev - 1 + activeBanners.length) % activeBanners.length); 25 | }; 26 | 27 | if (activeBanners.length === 0) return null; 28 | 29 | return ( 30 |

31 | 32 | 40 |

44 |

45 | 46 |

47 |

48 | 54 | {activeBanners[currentBanner].title} 55 | 56 | 62 | {activeBanners[currentBanner].subtitle} 63 | 64 | 69 | 73 | {activeBanners[currentBanner].buttonText} 74 | 75 | 76 |

77 |

78 | 79 | 80 | 81 | {/* Navigation Arrows */} 82 | 88 | 94 | 95 | {/* Dots Indicator */} 96 |

97 | {activeBanners.map((_, index) => ( 98 |

107 |

108 | ); 109 | }; -------------------------------------------------------------------------------- /src/components/layout/Footer.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import { ShoppingBag, Mail, Phone, MapPin, Facebook, Twitter, Instagram, Youtube } from 'lucide-react'; 4 | 5 | export const Footer: React.FC = () => { 6 | return ( 7 | 88 | ); 89 | }; -------------------------------------------------------------------------------- /src/components/common/Wishlist.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { motion, AnimatePresence } from 'framer-motion'; 3 | import { X, ShoppingCart, Heart } from 'lucide-react'; 4 | import { useStore } from '../../store/useStore'; 5 | import { Link } from 'react-router-dom'; 6 | import toast from 'react-hot-toast'; 7 | 8 | export const Wishlist: React.FC = () => { 9 | const { 10 | isWishlistOpen, 11 | setWishlistOpen, 12 | wishlist, 13 | removeFromWishlist, 14 | addToCart 15 | } = useStore(); 16 | 17 | const handleAddToCart = (item: any) => { 18 | addToCart({ 19 | productId: item.product.id, 20 | product: item.product, 21 | quantity: 1, 22 | selectedColor: item.product.colors[0], 23 | selectedSize: item.product.sizes[0], 24 | price: item.product.price 25 | }); 26 | toast.success('Added to cart!'); 27 | }; 28 | 29 | return ( 30 | 31 | {isWishlistOpen && ( 32 | <> 33 | {/* Overlay */} 34 | setWishlistOpen(false)} 40 | /> 41 | 42 | {/* Wishlist Sidebar */} 43 | 50 |

51 |

52 |

53 | Wishlist ({wishlist.length}) 54 |

55 | 61 |

62 | 63 | {wishlist.length === 0 ? ( 64 |

65 | 66 |

Your wishlist is empty

67 | setWishlistOpen(false)} 70 | className="inline-block px-6 py-2 bg-black dark:bg-white text-white dark:text-black rounded-lg hover:bg-gray-800 dark:hover:bg-gray-200 transition-colors" 71 | > 72 | Discover Products 73 | 74 |

75 | ) : ( 76 |

77 | {wishlist.map((item) => ( 78 | 86 | setWishlistOpen(false)}> 87 |

92 | 93 | 94 |

95 | setWishlistOpen(false)} 98 | className="text-sm font-medium text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400" 99 | > 100 | {item.product.name} 101 | 102 |

103 | {item.product.brand} 104 |

105 |

106 | ${item.product.price} 107 |

108 |

109 | 110 |

111 | 118 | 125 |

126 | 127 | ))} 128 |

129 | )} 130 |

131 | 132 | 133 | )} 134 | 135 | ); 136 | }; -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --burgundy: #800020; 7 | --toast-bg: #ffffff; 8 | --toast-color: #000000; 9 | } 10 | 11 | .dark { 12 | --toast-bg: #374151; 13 | --toast-color: #ffffff; 14 | } 15 | 16 | /* Custom scrollbar */ 17 | ::-webkit-scrollbar { 18 | width: 8px; 19 | } 20 | 21 | ::-webkit-scrollbar-track { 22 | @apply bg-gray-100 dark:bg-gray-800; 23 | } 24 | 25 | ::-webkit-scrollbar-thumb { 26 | @apply bg-gray-300 dark:bg-gray-600 rounded-full; 27 | } 28 | 29 | ::-webkit-scrollbar-thumb:hover { 30 | @apply bg-gray-400 dark:bg-gray-500; 31 | } 32 | 33 | /* Focus styles for accessibility */ 34 | .focus-visible:focus { 35 | @apply outline-none ring-2 ring-offset-2; 36 | ring-color: var(--burgundy); 37 | } 38 | 39 | /* Custom checkbox and radio styles */ 40 | input[type="checkbox"]:checked, 41 | input[type="radio"]:checked { 42 | background-color: var(--burgundy); 43 | border-color: var(--burgundy); 44 | } 45 | 46 | input[type="checkbox"]:focus, 47 | input[type="radio"]:focus { 48 | ring-color: var(--burgundy); 49 | } 50 | 51 | /* Prevent layout shift */ 52 | .navbar-height { 53 | height: 64px; /* 16 * 4 = 64px (h-16) */ 54 | } 55 | 56 | /* Animation classes */ 57 | .animate-fade-in { 58 | animation: fadeIn 0.3s ease-in-out; 59 | } 60 | 61 | @keyframes fadeIn { 62 | from { 63 | opacity: 0; 64 | transform: translateY(10px); 65 | } 66 | to { 67 | opacity: 1; 68 | transform: translateY(0); 69 | } 70 | } 71 | 72 | .animate-slide-in { 73 | animation: slideIn 0.3s ease-out; 74 | } 75 | 76 | @keyframes slideIn { 77 | from { 78 | transform: translateX(100%); 79 | } 80 | to { 81 | transform: translateX(0); 82 | } 83 | } 84 | 85 | /* Hover effects */ 86 | .hover-scale { 87 | transition: transform 0.2s ease-in-out; 88 | } 89 | 90 | .hover-scale:hover { 91 | transform: scale(1.05); 92 | } 93 | 94 | /* Loading spinner */ 95 | .spinner { 96 | border: 2px solid #f3f3f3; 97 | border-top: 2px solid var(--burgundy); 98 | border-radius: 50%; 99 | width: 20px; 100 | height: 20px; 101 | animation: spin 1s linear infinite; 102 | } 103 | 104 | @keyframes spin { 105 | 0% { transform: rotate(0deg); } 106 | 100% { transform: rotate(360deg); } 107 | } 108 | 109 | /* Responsive text utilities */ 110 | .text-responsive { 111 | @apply text-sm sm:text-base lg:text-lg; 112 | } 113 | 114 | .text-responsive-lg { 115 | @apply text-lg sm:text-xl lg:text-2xl; 116 | } 117 | 118 | /* Card hover effects */ 119 | .card-hover { 120 | transition: all 0.3s ease; 121 | } 122 | 123 | .card-hover:hover { 124 | transform: translateY(-4px); 125 | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); 126 | } 127 | 128 | .dark .card-hover:hover { 129 | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); 130 | } 131 | 132 | /* Button styles */ 133 | .btn-primary { 134 | background-color: var(--burgundy); 135 | @apply text-white px-4 py-2 rounded-lg font-medium transition-all duration-200; 136 | } 137 | 138 | .btn-primary:hover { 139 | opacity: 0.9; 140 | transform: translateY(-1px); 141 | } 142 | 143 | .btn-secondary { 144 | @apply border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-lg font-medium transition-all duration-200; 145 | } 146 | 147 | .btn-secondary:hover { 148 | @apply bg-gray-50 dark:bg-gray-700; 149 | } 150 | 151 | /* Form styles */ 152 | .form-input { 153 | @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 dark:bg-gray-700 dark:text-white transition-colors; 154 | --tw-ring-color: var(--burgundy); 155 | } 156 | 157 | .form-label { 158 | @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2; 159 | } 160 | 161 | /* Table styles */ 162 | .table-responsive { 163 | @apply min-w-full divide-y divide-gray-200 dark:divide-gray-700; 164 | } 165 | 166 | .table-header { 167 | @apply px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider; 168 | } 169 | 170 | .table-cell { 171 | @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white; 172 | } 173 | 174 | /* Status badges */ 175 | .badge { 176 | @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium; 177 | } 178 | 179 | .badge-success { 180 | @apply bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400; 181 | } 182 | 183 | .badge-warning { 184 | @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400; 185 | } 186 | 187 | .badge-error { 188 | @apply bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400; 189 | } 190 | 191 | .badge-info { 192 | @apply bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400; 193 | } 194 | 195 | /* Utility classes */ 196 | .text-burgundy { 197 | color: var(--burgundy); 198 | } 199 | 200 | .bg-burgundy { 201 | background-color: var(--burgundy); 202 | } 203 | 204 | .border-burgundy { 205 | border-color: var(--burgundy); 206 | } 207 | 208 | /* Prevent horizontal scroll */ 209 | html, body { 210 | overflow-x: hidden; 211 | } 212 | 213 | /* Smooth scrolling */ 214 | html { 215 | scroll-behavior: smooth; 216 | } 217 | 218 | /* Image optimization */ 219 | img { 220 | max-width: 100%; 221 | height: auto; 222 | } 223 | 224 | /* Print styles */ 225 | @media print { 226 | .no-print { 227 | display: none !important; 228 | } 229 | } 230 | 231 | /* High contrast mode support */ 232 | @media (prefers-contrast: high) { 233 | .card-hover:hover { 234 | border: 2px solid var(--burgundy); 235 | } 236 | } 237 | 238 | /* Reduced motion support */ 239 | @media (prefers-reduced-motion: reduce) { 240 | * { 241 | animation-duration: 0.01ms !important; 242 | animation-iteration-count: 1 !important; 243 | transition-duration: 0.01ms !important; 244 | } 245 | 246 | html { 247 | scroll-behavior: auto; 248 | } 249 | } 250 | 251 | /* Fix for mobile viewport issues */ 252 | @supports (-webkit-touch-callout: none) { 253 | .min-h-screen { 254 | min-height: -webkit-fill-available; 255 | } 256 | } 257 | 258 | /* Ensure proper z-index stacking */ 259 | .navbar { 260 | z-index: 1000; 261 | } 262 | 263 | .modal { 264 | z-index: 1050; 265 | } 266 | 267 | .dropdown { 268 | z-index: 1020; 269 | } 270 | 271 | /* Loading states */ 272 | .loading { 273 | pointer-events: none; 274 | opacity: 0.6; 275 | } 276 | 277 | /* Error states */ 278 | .error { 279 | border-color: #ef4444; 280 | } 281 | 282 | .error:focus { 283 | ring-color: #ef4444; 284 | } 285 | 286 | /* Success states */ 287 | .success { 288 | border-color: #10b981; 289 | } 290 | 291 | .success:focus { 292 | ring-color: #10b981; 293 | } -------------------------------------------------------------------------------- /src/components/common/ProductCard.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import { motion } from 'framer-motion'; 4 | import { Heart, ShoppingCart, Star, Eye } from 'lucide-react'; 5 | import { Product } from '../../types'; 6 | import { useStore } from '../../store/useStore'; 7 | import toast from 'react-hot-toast'; 8 | 9 | interface ProductCardProps { 10 | product: Product; 11 | index?: number; 12 | } 13 | 14 | export const ProductCard: React.FC = ({ product, index = 0 }) => { 15 | const { addToCart, addToWishlist, removeFromWishlist, isInWishlist } = useStore(); 16 | 17 | const inWishlist = isInWishlist(product.id); 18 | 19 | const handleAddToCart = (e: React.MouseEvent) => { 20 | e.preventDefault(); 21 | e.stopPropagation(); 22 | 23 | addToCart({ 24 | productId: product.id, 25 | product, 26 | quantity: 1, 27 | selectedColor: product.colors[0], 28 | selectedSize: product.sizes[0], 29 | price: product.price 30 | }); 31 | 32 | toast.success('Added to cart!'); 33 | }; 34 | 35 | const handleWishlistToggle = (e: React.MouseEvent) => { 36 | e.preventDefault(); 37 | e.stopPropagation(); 38 | 39 | if (inWishlist) { 40 | removeFromWishlist(product.id); 41 | toast.success('Removed from wishlist'); 42 | } else { 43 | addToWishlist(product); 44 | toast.success('Added to wishlist'); 45 | } 46 | }; 47 | 48 | return ( 49 | 55 | 56 |

57 |

62 | 63 | {/* Badges */} 64 |

65 | {product.isNew && ( 66 | 67 | New 68 | 69 | )} 70 | {product.discount && ( 71 | 72 | -{product.discount}% 73 | 74 | )} 75 | {product.isFeatured && ( 76 | 77 | Featured 78 | 79 | )} 80 |

81 | 82 | {/* Hover Actions */} 83 |

84 | 94 | 100 | 104 | 105 | 106 |

107 |

108 | 109 |

110 |

111 | {product.name} 112 |

113 | 114 |

115 | {product.description} 116 |

117 | 118 |

119 |

120 | {[...Array(5)].map((_, i) => ( 121 | 129 | ))} 130 |

131 | 132 | ({product.reviewCount}) 133 | 134 |

135 | 136 |

137 |

138 | 139 | ${product.price} 140 | 141 | {product.originalPrice && ( 142 | 143 | ${product.originalPrice} 144 | 145 | )} 146 |

147 | 148 |

149 | {product.colors.slice(0, 3).map((color, i) => ( 150 |

155 | ))} 156 | {product.colors.length > 3 && ( 157 | 158 | +{product.colors.length - 3} 159 | 160 | )} 161 |

162 |

163 | 164 |

165 | 166 | {product.inStock ? `In Stock (${product.stockCount})` : 'Out of Stock'} 167 | 168 | 169 | {product.brand} 170 | 171 |

172 |

173 | 174 | 175 | ); 176 | }; -------------------------------------------------------------------------------- /src/pages/Home.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { motion } from 'framer-motion'; 3 | import { Link } from 'react-router-dom'; 4 | import { ArrowRight, Truck, Shield, Headphones, Star } from 'lucide-react'; 5 | import { BannerCarousel } from '../components/common/BannerCarousel'; 6 | import { ProductCard } from '../components/common/ProductCard'; 7 | import { useStore } from '../store/useStore'; 8 | import { allProducts } from '../data/products'; 9 | 10 | export const Home: React.FC = () => { 11 | const { setProducts } = useStore(); 12 | 13 | React.useEffect(() => { 14 | setProducts(allProducts); 15 | }, [setProducts]); 16 | 17 | const featuredProducts = allProducts.filter(p => p.isFeatured).slice(0, 8); 18 | const newProducts = allProducts.filter(p => p.isNew).slice(0, 8); 19 | 20 | return ( 21 |

22 | {/* Banner Carousel */} 23 |

24 | 25 |

26 | 27 | {/* Features Section */} 28 |

29 |

30 |

31 | 37 |

38 | 39 |

40 |

Free Shipping

41 |

Free shipping on all orders over $75

42 | 43 | 44 | 50 |

51 | 52 |

53 |

Secure Payment

54 |

100% secure payment with multiple options

55 | 56 | 57 | 63 |

64 | 65 |

66 |

24/7 Support

67 |

Round-the-clock customer support

68 | 69 |

70 |

71 |

72 | 73 | {/* Featured Products */} 74 |

75 |

76 | 81 |

82 | Featured Products 83 |

84 |

85 | Handpicked selections from our premium collection 86 |

87 | 88 | 89 |

90 | {featuredProducts.map((product, index) => ( 91 | 92 | ))} 93 |

94 | 95 |

96 | 100 | View All Products 101 | 102 |

103 |

104 |

105 | 106 | {/* New Arrivals */} 107 |

108 |

109 | 114 |

115 | New Arrivals 116 |

117 |

118 | Fresh styles just landed - be the first to wear them 119 |

120 | 121 | 122 |

123 | {newProducts.map((product, index) => ( 124 | 125 | ))} 126 |

127 |

128 |

129 | 130 | {/* Newsletter */} 131 |

132 |

133 | 138 |

139 | Stay Updated 140 |

141 |

142 | Subscribe to our newsletter for exclusive deals and latest fashion updates 143 |

144 |

145 | 150 | 153 |

154 | 155 |

156 |

157 |

158 | ); 159 | }; -------------------------------------------------------------------------------- /src/components/common/Cart.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { motion, AnimatePresence } from 'framer-motion'; 3 | import { X, Plus, Minus, ShoppingBag, Truck } from 'lucide-react'; 4 | import { useStore } from '../../store/useStore'; 5 | import { Link } from 'react-router-dom'; 6 | 7 | export const Cart: React.FC = () => { 8 | const { 9 | isCartOpen, 10 | setCartOpen, 11 | cart, 12 | removeFromCart, 13 | updateCartQuantity, 14 | cartSubtotal, 15 | cartTax, 16 | cartShipping, 17 | cartTotal 18 | } = useStore(); 19 | 20 | return ( 21 | 22 | {isCartOpen && ( 23 | <> 24 | {/* Overlay */} 25 | setCartOpen(false)} 31 | /> 32 | 33 | {/* Cart Sidebar */} 34 | 41 |

42 |

43 |

44 | Shopping Cart ({cart.length}) 45 |

46 | 52 |

53 | 54 | {cart.length === 0 ? ( 55 |

56 | 57 |

Your cart is empty

58 | setCartOpen(false)} 61 | className="inline-block px-6 py-2 bg-black dark:bg-white text-white dark:text-black rounded-lg hover:bg-gray-800 dark:hover:bg-gray-200 transition-colors" 62 | > 63 | Continue Shopping 64 | 65 |

66 | ) : ( 67 | <> 68 | {/* Cart Items */} 69 |

70 | {cart.map((item) => ( 71 | 79 |

84 | 85 |

86 |

87 | {item.product.name} 88 |

89 |

90 | {item.selectedColor} • {item.selectedSize} 91 |

92 |

93 | ${item.price} 94 |

95 |

96 | 97 |

98 | 104 | 105 | {item.quantity} 106 | 107 | 113 |

114 | 115 | 121 | 122 | ))} 123 |

124 | 125 | {/* Cart Summary */} 126 |

127 |

128 |

129 | Subtotal 130 | ${cartSubtotal.toFixed(2)} 131 |

132 |

133 | Tax 134 | ${cartTax.toFixed(2)} 135 |

136 |

137 | 138 | 139 | Shipping 140 | 141 | 142 | {cartShipping === 0 ? 'Free' : `$${cartShipping.toFixed(2)}`} 143 | 144 |

145 | {cartShipping > 0 && ( 146 |

147 | Free shipping on orders over $75 148 |

149 | )} 150 |

151 | 152 |

153 | 154 | Total 155 | 156 | 157 | ${cartTotal.toFixed(2)} 158 | 159 |

160 | 161 | setCartOpen(false)} 164 | className="w-full block text-center px-6 py-3 bg-black dark:bg-white text-white dark:text-black rounded-lg hover:bg-gray-800 dark:hover:bg-gray-200 transition-colors font-medium" 165 | > 166 | Proceed to Checkout 167 | 168 |

169 | 170 | )} 171 |

172 | 173 | 174 | )} 175 | 176 | ); 177 | }; -------------------------------------------------------------------------------- /src/pages/Orders.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { motion } from 'framer-motion'; 3 | import { Package, Truck, CheckCircle, Clock, XCircle } from 'lucide-react'; 4 | import { useStore } from '../store/useStore'; 5 | import { Link } from 'react-router-dom'; 6 | 7 | export const Orders: React.FC = () => { 8 | const { orders, isAuthenticated } = useStore(); 9 | 10 | if (!isAuthenticated) { 11 | return ( 12 |

13 |

14 |

15 | Please Login 16 |

17 |

18 | You need to be logged in to view your orders. 19 |

20 | 24 | Login 25 | 26 |

27 |

28 | ); 29 | } 30 | 31 | const getStatusIcon = (status: string) => { 32 | switch (status) { 33 | case 'pending': 34 | return ; 35 | case 'processing': 36 | return ; 37 | case 'shipped': 38 | return ; 39 | case 'delivered': 40 | return ; 41 | case 'cancelled': 42 | return ; 43 | default: 44 | return ; 45 | } 46 | }; 47 | 48 | const getStatusColor = (status: string) => { 49 | switch (status) { 50 | case 'pending': 51 | return 'text-yellow-600 bg-yellow-100 dark:bg-yellow-900/20'; 52 | case 'processing': 53 | return 'text-blue-600 bg-blue-100 dark:bg-blue-900/20'; 54 | case 'shipped': 55 | return 'text-purple-600 bg-purple-100 dark:bg-purple-900/20'; 56 | case 'delivered': 57 | return 'text-green-600 bg-green-100 dark:bg-green-900/20'; 58 | case 'cancelled': 59 | return 'text-red-600 bg-red-100 dark:bg-red-900/20'; 60 | default: 61 | return 'text-gray-600 bg-gray-100 dark:bg-gray-900/20'; 62 | } 63 | }; 64 | 65 | return ( 66 |

67 |

68 | 73 |

74 | Order History 75 |

76 |

77 | Track and manage your orders 78 |

79 | 80 | 81 | {orders.length === 0 ? ( 82 | 87 | 88 |

89 | No orders yet 90 |

91 |

92 | Start shopping to see your orders here 93 |

94 | 98 | Start Shopping 99 | 100 | 101 | ) : ( 102 |

103 | {orders.map((order, index) => ( 104 | 111 |

112 |

113 |

114 |

115 | Order #{order.id} 116 |

117 |

118 | Placed on {order.createdAt.toLocaleDateString()} 119 |

120 |

121 |

122 | {getStatusIcon(order.status)} 123 | 124 | {order.status.charAt(0).toUpperCase() + order.status.slice(1)} 125 | 126 |

127 |

128 | 129 |

130 |

131 |

132 | Total Amount 133 |

134 |

135 | ${order.total.toFixed(2)} 136 |

137 |

138 |

139 |

140 | Payment Method 141 |

142 |

143 | {order.paymentMethod} 144 |

145 |

146 |

147 |

148 | Tracking Number 149 |

150 |

151 | {order.trackingNumber || 'Not available'} 152 |

153 |

154 |

155 | 156 |

157 |

158 | Items ({order.items.length}) 159 |

160 |

161 | {order.items.map((item) => ( 162 |

163 |

168 |

169 |

170 | {item.product.name} 171 |

172 |

173 | {item.selectedColor} • {item.selectedSize} • Qty: {item.quantity} 174 |

175 |

176 |

177 | ${(item.price * item.quantity).toFixed(2)} 178 |

179 |

180 | ))} 181 |

182 |

183 | 184 |

185 |

186 |

187 |

Subtotal: ${order.subtotal.toFixed(2)}

188 |

Tax: ${order.tax.toFixed(2)}

189 |

Shipping: ${order.shipping.toFixed(2)}

190 |

191 |

192 |

193 | Total: ${order.total.toFixed(2)} 194 |

195 |

196 |

197 |

198 | 199 | {order.estimatedDelivery && ( 200 |

201 |

202 | Estimated delivery: {order.estimatedDelivery.toLocaleDateString()} 203 |

204 |

205 | )} 206 |

207 | 208 | ))} 209 |

210 | )} 211 |

212 |

213 | ); 214 | }; -------------------------------------------------------------------------------- /src/components/admin/UserManagement.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { motion } from 'framer-motion'; 3 | import { Search, Filter, MoreVertical, UserCheck, UserX, Shield, User } from 'lucide-react'; 4 | import { useStore } from '../../store/useStore'; 5 | 6 | export const UserManagement: React.FC = () => { 7 | const { users, updateUserStatus, updateUserRole } = useStore(); 8 | const [searchQuery, setSearchQuery] = useState(''); 9 | const [filterRole, setFilterRole] = useState<'all' | 'user' | 'admin'>('all'); 10 | const [filterStatus, setFilterStatus] = useState<'all' | 'active' | 'inactive'>('all'); 11 | 12 | const filteredUsers = users.filter(user => { 13 | const matchesSearch = user.firstName.toLowerCase().includes(searchQuery.toLowerCase()) || 14 | user.lastName.toLowerCase().includes(searchQuery.toLowerCase()) || 15 | user.email.toLowerCase().includes(searchQuery.toLowerCase()); 16 | 17 | const matchesRole = filterRole === 'all' || user.role === filterRole; 18 | const matchesStatus = filterStatus === 'all' || 19 | (filterStatus === 'active' && user.isActive) || 20 | (filterStatus === 'inactive' && !user.isActive); 21 | 22 | return matchesSearch && matchesRole && matchesStatus; 23 | }); 24 | 25 | const handleToggleStatus = (userId: string, currentStatus: boolean) => { 26 | updateUserStatus(userId, !currentStatus); 27 | }; 28 | 29 | const handleRoleChange = (userId: string, newRole: 'user' | 'admin') => { 30 | updateUserRole(userId, newRole); 31 | }; 32 | 33 | return ( 34 |

35 | {/* User Management Header */} 36 |

37 |

38 |

39 | 40 | setSearchQuery(e.target.value)} 45 | className="pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-burgundy dark:bg-gray-800" 46 | style={{ '--tw-ring-color': '#800020' } as React.CSSProperties} 47 | /> 48 |

49 | 59 | 69 |

70 |

71 | 72 | {/* Users Table */} 73 |

74 |

75 | 76 | 77 | 78 | 81 | 84 | 87 | 90 | 93 | 96 | 99 | 100 | 101 | 102 | {filteredUsers.map((user) => ( 103 | 104 | 122 | 132 | 154 | 157 | 160 | 163 | 175 | 176 | ))} 177 | 178 |

79 \| User 80 \|	82 \| Role 83 \|	85 \| Status 86 \|	88 \| Orders 89 \|	91 \| Joined 92 \|	94 \| Last Login 95 \|	97 \| Actions 98 \|
105 \| 106 \| 108 \| 109 \| {user.firstName.charAt(0)}{user.lastName.charAt(0)} 110 \| 111 \| 112 \| 113 \| 114 \| {user.firstName} {user.lastName} 115 \| 116 \| 117 \| {user.email} 118 \| 119 \| 120 \| 121 \|	123 \| 131 \|	133 \| 153 \|	155 \| {user.orders.length} 156 \|	158 \| {user.createdAt.toLocaleDateString()} 159 \|	161 \| {user.lastLogin ? user.lastLogin.toLocaleDateString() : 'Never'} 162 \|	164 \| 165 \| {user.role === 'admin' ? ( 166 \| 167 \| ) : ( 168 \| 169 \| )} 170 \| 173 \| 174 \|

179 |

180 |

181 | 182 | {filteredUsers.length === 0 && ( 183 |

184 | 185 |

No users found matching your criteria.

186 |

187 | )} 188 |

189 | ); 190 | }; -------------------------------------------------------------------------------- /src/store/useStore.ts: -------------------------------------------------------------------------------- 1 | import { create } from 'zustand'; 2 | import { persist } from 'zustand/middleware'; 3 | import { Product, User, CartItem, WishlistItem, Order, FilterOptions, PaymentMethod, SearchSuggestion, DashboardStats } from '../types'; 4 | // use store 5 | interface AppState { 6 | // Theme 7 | isDarkMode: boolean; 8 | toggleTheme: () => void; 9 | 10 | // User 11 | user: User | null; 12 | isAuthenticated: boolean; 13 | login: (user: User) => void; 14 | logout: () => void; 15 | 16 | // Users Management (Admin) 17 | users: User[]; 18 | updateUserStatus: (userId: string, isActive: boolean) => void; 19 | updateUserRole: (userId: string, role: 'user' | 'admin') => void; 20 | 21 | // Cart 22 | cart: CartItem[]; 23 | addToCart: (item: Omit) => void; 24 | removeFromCart: (id: string) => void; 25 | updateCartQuantity: (id: string, quantity: number) => void; 26 | clearCart: () => void; 27 | cartTotal: number; 28 | cartSubtotal: number; 29 | cartTax: number; 30 | cartShipping: number; 31 | 32 | // Wishlist 33 | wishlist: WishlistItem[]; 34 | addToWishlist: (product: Product) => void; 35 | removeFromWishlist: (productId: string) => void; 36 | isInWishlist: (productId: string) => boolean; 37 | 38 | // Orders 39 | orders: Order[]; 40 | addOrder: (order: Order) => void; 41 | updateOrderStatus: (orderId: string, status: Order['status']) => void; 42 | 43 | // Products 44 | products: Product[]; 45 | setProducts: (products: Product[]) => void; 46 | addProduct: (product: Product) => void; 47 | updateProduct: (id: string, product: Product) => void; 48 | deleteProduct: (id: string) => void; 49 | toggleProductVisibility: (id: string) => void; 50 | filteredProducts: Product[]; 51 | setFilteredProducts: (products: Product[]) => void; 52 | 53 | // Filters 54 | filters: FilterOptions; 55 | setFilters: (filters: Partial) => void; 56 | resetFilters: () => void; 57 | 58 | // Search 59 | searchQuery: string; 60 | setSearchQuery: (query: string) => void; 61 | searchSuggestions: SearchSuggestion[]; 62 | getSearchSuggestions: (query: string) => void; 63 | 64 | // Dashboard Stats 65 | dashboardStats: DashboardStats; 66 | 67 | // Payment Methods 68 | paymentMethods: PaymentMethod[]; 69 | addPaymentMethod: (method: PaymentMethod) => void; 70 | removePaymentMethod: (id: string) => void; 71 | 72 | // UI 73 | isMobileMenuOpen: boolean; 74 | setMobileMenuOpen: (open: boolean) => void; 75 | isCartOpen: boolean; 76 | setCartOpen: (open: boolean) => void; 77 | isWishlistOpen: boolean; 78 | setWishlistOpen: (open: boolean) => void; 79 | } 80 | 81 | const defaultFilters: FilterOptions = { 82 | category: [], 83 | brand: [], 84 | color: [], 85 | size: [], 86 | priceRange: [0, 1000], 87 | inStock: false, 88 | rating: 0, 89 | sortBy: 'newest' 90 | }; 91 | 92 | const TAX_RATE = 0.08; // 8% tax 93 | const SHIPPING_RATE = 9.99; 94 | const FREE_SHIPPING_THRESHOLD = 75; 95 | 96 | // Mock users data 97 | const mockUsers: User[] = [ 98 | { 99 | id: 'user-1', 100 | email: 'admin@shopmarket.com', 101 | firstName: 'Admin', 102 | lastName: 'User', 103 | role: 'admin', 104 | addresses: [], 105 | orders: [], 106 | wishlist: [], 107 | isActive: true, 108 | createdAt: new Date('2024-01-01'), 109 | lastLogin: new Date() 110 | }, 111 | { 112 | id: 'user-2', 113 | email: 'john.doe@example.com', 114 | firstName: 'John', 115 | lastName: 'Doe', 116 | role: 'user', 117 | addresses: [], 118 | orders: [], 119 | wishlist: [], 120 | isActive: true, 121 | createdAt: new Date('2024-02-15'), 122 | lastLogin: new Date('2024-12-01') 123 | }, 124 | { 125 | id: 'user-3', 126 | email: 'jane.smith@example.com', 127 | firstName: 'Jane', 128 | lastName: 'Smith', 129 | role: 'user', 130 | addresses: [], 131 | orders: [], 132 | wishlist: [], 133 | isActive: false, 134 | createdAt: new Date('2024-03-10'), 135 | lastLogin: new Date('2024-11-20') 136 | } 137 | ]; 138 | 139 | export const useStore = create()( 140 | persist( 141 | (set, get) => ({ 142 | // Theme 143 | isDarkMode: false, 144 | toggleTheme: () => set((state) => ({ isDarkMode: !state.isDarkMode })), 145 | 146 | // User 147 | user: null, 148 | isAuthenticated: false, 149 | login: (user) => set({ user, isAuthenticated: true }), 150 | logout: () => set({ user: null, isAuthenticated: false, cart: [], wishlist: [], orders: [] }), 151 | 152 | // Users Management 153 | users: mockUsers, 154 | updateUserStatus: (userId, isActive) => set((state) => ({ 155 | users: state.users.map(user => 156 | user.id === userId ? { ...user, isActive } : user 157 | ) 158 | })), 159 | updateUserRole: (userId, role) => set((state) => ({ 160 | users: state.users.map(user => 161 | user.id === userId ? { ...user, role } : user 162 | ) 163 | })), 164 | 165 | // Cart 166 | cart: [], 167 | addToCart: (item) => { 168 | const existingItem = get().cart.find( 169 | (cartItem) => 170 | cartItem.productId === item.productId && 171 | cartItem.selectedColor === item.selectedColor && 172 | cartItem.selectedSize === item.selectedSize 173 | ); 174 | 175 | if (existingItem) { 176 | set((state) => ({ 177 | cart: state.cart.map((cartItem) => 178 | cartItem.id === existingItem.id 179 | ? { ...cartItem, quantity: cartItem.quantity + item.quantity } 180 | : cartItem 181 | ) 182 | })); 183 | } else { 184 | set((state) => ({ 185 | cart: [...state.cart, { ...item, id: Date.now().toString() }] 186 | })); 187 | } 188 | }, 189 | removeFromCart: (id) => set((state) => ({ 190 | cart: state.cart.filter((item) => item.id !== id) 191 | })), 192 | updateCartQuantity: (id, quantity) => { 193 | if (quantity <= 0) { 194 | get().removeFromCart(id); 195 | return; 196 | } 197 | set((state) => ({ 198 | cart: state.cart.map((item) => 199 | item.id === id ? { ...item, quantity } : item 200 | ) 201 | })); 202 | }, 203 | clearCart: () => set({ cart: [] }), 204 | get cartSubtotal() { 205 | return get().cart.reduce((total, item) => total + item.price * item.quantity, 0); 206 | }, 207 | get cartTax() { 208 | return get().cartSubtotal * TAX_RATE; 209 | }, 210 | get cartShipping() { 211 | return get().cartSubtotal >= FREE_SHIPPING_THRESHOLD ? 0 : SHIPPING_RATE; 212 | }, 213 | get cartTotal() { 214 | return get().cartSubtotal + get().cartTax + get().cartShipping; 215 | }, 216 | 217 | // Wishlist 218 | wishlist: [], 219 | addToWishlist: (product) => set((state) => ({ 220 | wishlist: [...state.wishlist, { 221 | id: Date.now().toString(), 222 | productId: product.id, 223 | product, 224 | addedAt: new Date() 225 | }] 226 | })), 227 | removeFromWishlist: (productId) => set((state) => ({ 228 | wishlist: state.wishlist.filter((item) => item.productId !== productId) 229 | })), 230 | isInWishlist: (productId) => get().wishlist.some((item) => item.productId === productId), 231 | 232 | // Orders 233 | orders: [], 234 | addOrder: (order) => set((state) => ({ 235 | orders: [order, ...state.orders] 236 | })), 237 | updateOrderStatus: (orderId, status) => set((state) => ({ 238 | orders: state.orders.map((order) => 239 | order.id === orderId ? { ...order, status, updatedAt: new Date() } : order 240 | ) 241 | })), 242 | 243 | // Products 244 | products: [], 245 | setProducts: (products) => set({ products }), 246 | addProduct: (product) => set((state) => ({ 247 | products: [...state.products, product] 248 | })), 249 | updateProduct: (id, updatedProduct) => set((state) => ({ 250 | products: state.products.map(product => 251 | product.id === id ? { ...updatedProduct, id } : product 252 | ) 253 | })), 254 | deleteProduct: (id) => set((state) => ({ 255 | products: state.products.filter(product => product.id !== id) 256 | })), 257 | toggleProductVisibility: (id) => set((state) => ({ 258 | products: state.products.map(product => 259 | product.id === id 260 | ? { ...product, isVisible: product.isVisible === false ? true : false } 261 | : product 262 | ) 263 | })), 264 | filteredProducts: [], 265 | setFilteredProducts: (products) => set({ filteredProducts: products }), 266 | 267 | // Filters 268 | filters: defaultFilters, 269 | setFilters: (newFilters) => set((state) => ({ 270 | filters: { ...state.filters, ...newFilters } 271 | })), 272 | resetFilters: () => set({ filters: defaultFilters }), 273 | 274 | // Search 275 | searchQuery: '', 276 | setSearchQuery: (query) => set({ searchQuery: query }), 277 | searchSuggestions: [], 278 | getSearchSuggestions: (query) => { 279 | if (!query || query.length < 2) { 280 | set({ searchSuggestions: [] }); 281 | return; 282 | } 283 | 284 | const products = get().products; 285 | const suggestions: SearchSuggestion[] = []; 286 | const lowerQuery = query.toLowerCase(); 287 | 288 | // Product name suggestions 289 | const productMatches = products 290 | .filter(p => p.name.toLowerCase().includes(lowerQuery)) 291 | .slice(0, 3) 292 | .map(p => ({ 293 | id: `product-${p.id}`, 294 | text: p.name, 295 | type: 'product' as const 296 | })); 297 | 298 | // Category suggestions 299 | const categories = [...new Set(products.map(p => p.category))] 300 | .filter(c => c.toLowerCase().includes(lowerQuery)) 301 | .slice(0, 2) 302 | .map(c => ({ 303 | id: `category-${c}`, 304 | text: c, 305 | type: 'category' as const, 306 | count: products.filter(p => p.category === c).length 307 | })); 308 | 309 | // Brand suggestions 310 | const brands = [...new Set(products.map(p => p.brand))] 311 | .filter(b => b.toLowerCase().includes(lowerQuery)) 312 | .slice(0, 2) 313 | .map(b => ({ 314 | id: `brand-${b}`, 315 | text: b, 316 | type: 'brand' as const, 317 | count: products.filter(p => p.brand === b).length 318 | })); 319 | 320 | suggestions.push(...productMatches, ...categories, ...brands); 321 | set({ searchSuggestions: suggestions }); 322 | }, 323 | 324 | // Dashboard Stats 325 | get dashboardStats(): DashboardStats { 326 | const state = get(); 327 | return { 328 | totalProducts: state.products.length, 329 | totalUsers: state.users.length, 330 | totalOrders: state.orders.length, 331 | totalRevenue: state.orders.reduce((sum, order) => sum + order.total, 0), 332 | lowStockProducts: state.products.filter(p => p.stockCount < 10).length, 333 | pendingOrders: state.orders.filter(o => o.status === 'pending').length 334 | }; 335 | }, 336 | 337 | // Payment Methods 338 | paymentMethods: [ 339 | { 340 | id: 'card-1', 341 | type: 'card', 342 | name: 'Credit/Debit Card', 343 | icon: '💳', 344 | isDefault: true 345 | }, 346 | { 347 | id: 'paypal-1', 348 | type: 'paypal', 349 | name: 'PayPal', 350 | icon: '🅿️', 351 | isDefault: false 352 | }, 353 | { 354 | id: 'apple-pay-1', 355 | type: 'apple-pay', 356 | name: 'Apple Pay', 357 | icon: '🍎', 358 | isDefault: false 359 | }, 360 | { 361 | id: 'google-pay-1', 362 | type: 'google-pay', 363 | name: 'Google Pay', 364 | icon: '🔵', 365 | isDefault: false 366 | } 367 | ], 368 | addPaymentMethod: (method) => set((state) => ({ 369 | paymentMethods: [...state.paymentMethods, method] 370 | })), 371 | removePaymentMethod: (id) => set((state) => ({ 372 | paymentMethods: state.paymentMethods.filter((method) => method.id !== id) 373 | })), 374 | 375 | // UI 376 | isMobileMenuOpen: false, 377 | setMobileMenuOpen: (open) => set({ isMobileMenuOpen: open }), 378 | isCartOpen: false, 379 | setCartOpen: (open) => set({ isCartOpen: open }), 380 | isWishlistOpen: false, 381 | setWishlistOpen: (open) => set({ isWishlistOpen: open }) 382 | }), 383 | { 384 | name: 'ecommerce-store', 385 | partialize: (state) => ({ 386 | isDarkMode: state.isDarkMode, 387 | user: state.user, 388 | isAuthenticated: state.isAuthenticated, 389 | cart: state.cart, 390 | wishlist: state.wishlist, 391 | orders: state.orders, 392 | paymentMethods: state.paymentMethods, 393 | users: state.users 394 | }) 395 | } 396 | ) 397 | ); -------------------------------------------------------------------------------- /src/pages/Auth.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { motion } from 'framer-motion'; 3 | import { useForm } from 'react-hook-form'; 4 | import { Eye, EyeOff, User, Mail, Lock } from 'lucide-react'; 5 | import { useStore } from '../store/useStore'; 6 | import { useNavigate } from 'react-router-dom'; 7 | import toast from 'react-hot-toast'; 8 | 9 | interface LoginForm { 10 | email: string; 11 | password: string; 12 | } 13 | 14 | interface SignupForm { 15 | firstName: string; 16 | lastName: string; 17 | email: string; 18 | password: string; 19 | confirmPassword: string; 20 | } 21 | 22 | export const Auth: React.FC = () => { 23 | const [isLogin, setIsLogin] = useState(true); 24 | const [showPassword, setShowPassword] = useState(false); 25 | const { login } = useStore(); 26 | const navigate = useNavigate(); 27 | 28 | const loginForm = useForm(); 29 | const signupForm = useForm(); 30 | 31 | const handleLogin = async (data: LoginForm) => { 32 | try { 33 | // Simulate API call 34 | await new Promise(resolve => setTimeout(resolve, 1000)); 35 | 36 | const user = { 37 | id: '1', 38 | email: data.email, 39 | firstName: 'John', 40 | lastName: 'Doe', 41 | role: 'user' as const, 42 | addresses: [], 43 | orders: [], 44 | wishlist: [], 45 | createdAt: new Date() 46 | }; 47 | 48 | login(user); 49 | toast.success('Welcome back!'); 50 | navigate('/'); 51 | } catch (error) { 52 | toast.error('Invalid credentials'); 53 | } 54 | }; 55 | 56 | const handleSignup = async (data: SignupForm) => { 57 | if (data.password !== data.confirmPassword) { 58 | toast.error('Passwords do not match'); 59 | return; 60 | } 61 | 62 | try { 63 | // Simulate API call 64 | await new Promise(resolve => setTimeout(resolve, 1000)); 65 | 66 | const user = { 67 | id: '1', 68 | email: data.email, 69 | firstName: data.firstName, 70 | lastName: data.lastName, 71 | role: 'user' as const, 72 | addresses: [], 73 | orders: [], 74 | wishlist: [], 75 | createdAt: new Date() 76 | }; 77 | 78 | login(user); 79 | toast.success('Account created successfully!'); 80 | navigate('/'); 81 | } catch (error) { 82 | toast.error('Failed to create account'); 83 | } 84 | }; 85 | 86 | return ( 87 |

88 |

89 | 94 |

95 |

96 | {isLogin ? 'Welcome Back' : 'Create Account'} 97 |

98 |

99 | {isLogin ? 'Sign in to your account' : 'Join our community today'} 100 |

101 |

102 | 103 |

104 | 114 | 124 |

125 | 126 | {isLogin ? ( 127 |

128 |

129 | 130 | Email 131 | 132 |

133 | 134 | 140 |

141 |

142 | 143 |

144 | 145 | Password 146 | 147 |

148 | 149 | 155 | 166 |

167 |

168 | 169 |

170 | 171 | 175 | 176 | Remember me 177 | 178 | 179 | 180 | Forgot password? 181 | 182 |

183 | 184 | 190 |

191 | ) : ( 192 |

193 |

194 |

195 | 196 | First Name 197 | 198 |

199 | 200 | 206 |

207 |

208 | 209 |

210 | 211 | Last Name 212 | 213 | 219 |

220 |

221 | 222 |

223 | 224 | Email 225 | 226 |

227 | 228 | 234 |

235 |

236 | 237 |

238 | 239 | Password 240 | 241 |

242 | 243 | 249 | 260 |

261 |

262 | 263 |

264 | 265 | Confirm Password 266 | 267 |

268 | 269 | 275 |

276 |

277 | 278 | 284 |

285 | )} 286 | 287 |

288 |

289 | {isLogin ? "Don't have an account?" : 'Already have an account?'} 290 | 296 |

297 |

298 | 299 |

300 |

301 | ); 302 | }; -------------------------------------------------------------------------------- /src/data/products.ts: -------------------------------------------------------------------------------- 1 | import { Product } from '../types'; 2 | // Products 3 | export const products: Product[] = [ 4 | // Men's Products 5 | { 6 | id: 'men-tshirt-1', 7 | name: 'Premium Cotton T-Shirt', 8 | description: 'Ultra-soft premium cotton t-shirt with modern fit. Perfect for casual wear and layering. Made from 100% organic cotton with reinforced seams for durability.', 9 | price: 29.99, 10 | originalPrice: 39.99, 11 | category: 'Clothing', 12 | subcategory: 'T-Shirts', 13 | brand: 'Essential Wear', 14 | images: [ 15 | 'https://images.pexels.com/photos/8532616/pexels-photo-8532616.jpeg?auto=compress&cs=tinysrgb&w=800', 16 | 'https://images.pexels.com/photos/8532617/pexels-photo-8532617.jpeg?auto=compress&cs=tinysrgb&w=800', 17 | 'https://images.pexels.com/photos/8532618/pexels-photo-8532618.jpeg?auto=compress&cs=tinysrgb&w=800' 18 | ], 19 | colors: ['Black', 'White', 'Navy', 'Gray', 'Red'], 20 | sizes: ['XS', 'S', 'M', 'L', 'XL', 'XXL'], 21 | inStock: true, 22 | stockCount: 150, 23 | rating: 4.5, 24 | reviewCount: 234, 25 | tags: ['casual', 'cotton', 'basic', 'comfortable'], 26 | gender: 'men', 27 | isNew: true, 28 | discount: 25, 29 | specifications: { 30 | 'Material': '100% Organic Cotton', 31 | 'Fit': 'Regular Fit', 32 | 'Care': 'Machine Wash Cold', 33 | 'Origin': 'Made in USA' 34 | }, 35 | relatedProducts: ['men-jeans-1', 'men-jacket-1'] 36 | }, 37 | { 38 | id: 'men-jeans-1', 39 | name: 'Slim Fit Denim Jeans', 40 | description: 'Modern slim-fit jeans crafted from premium stretch denim. Features classic five-pocket styling with contemporary tapered leg for a sleek silhouette.', 41 | price: 79.99, 42 | originalPrice: 99.99, 43 | category: 'Clothing', 44 | subcategory: 'Jeans', 45 | brand: 'Denim Co', 46 | images: [ 47 | 'https://images.pexels.com/photos/1598507/pexels-photo-1598507.jpeg?auto=compress&cs=tinysrgb&w=800', 48 | 'https://images.pexels.com/photos/1598508/pexels-photo-1598508.jpeg?auto=compress&cs=tinysrgb&w=800' 49 | ], 50 | colors: ['Dark Blue', 'Light Blue', 'Black', 'Gray'], 51 | sizes: ['28', '30', '32', '34', '36', '38', '40'], 52 | inStock: true, 53 | stockCount: 89, 54 | rating: 4.3, 55 | reviewCount: 156, 56 | tags: ['denim', 'casual', 'slim-fit', 'stretch'], 57 | gender: 'men', 58 | discount: 20, 59 | specifications: { 60 | 'Material': '98% Cotton, 2% Elastane', 61 | 'Fit': 'Slim Fit', 62 | 'Rise': 'Mid Rise', 63 | 'Care': 'Machine Wash Cold' 64 | }, 65 | relatedProducts: ['men-tshirt-1', 'men-shoes-1'] 66 | }, 67 | { 68 | id: 'men-jacket-1', 69 | name: 'Leather Bomber Jacket', 70 | description: 'Genuine leather bomber jacket with premium craftsmanship. Features ribbed cuffs and hem, full zip closure, and interior pockets for functionality.', 71 | price: 299.99, 72 | originalPrice: 399.99, 73 | category: 'Clothing', 74 | subcategory: 'Jackets', 75 | brand: 'Leather Works', 76 | images: [ 77 | 'https://images.pexels.com/photos/1040945/pexels-photo-1040945.jpeg?auto=compress&cs=tinysrgb&w=800' 78 | ], 79 | colors: ['Black', 'Brown', 'Tan'], 80 | sizes: ['S', 'M', 'L', 'XL', 'XXL'], 81 | inStock: true, 82 | stockCount: 45, 83 | rating: 4.8, 84 | reviewCount: 89, 85 | tags: ['leather', 'bomber', 'premium', 'outerwear'], 86 | gender: 'men', 87 | isFeatured: true, 88 | discount: 25, 89 | specifications: { 90 | 'Material': '100% Genuine Leather', 91 | 'Lining': 'Polyester', 92 | 'Closure': 'Full Zip', 93 | 'Care': 'Professional Clean Only' 94 | }, 95 | relatedProducts: ['men-tshirt-1', 'men-jeans-1'] 96 | }, 97 | { 98 | id: 'men-shoes-1', 99 | name: 'Classic Oxford Shoes', 100 | description: 'Timeless oxford shoes crafted from premium leather. Features traditional lace-up design with leather sole and cushioned insole for all-day comfort.', 101 | price: 149.99, 102 | originalPrice: 199.99, 103 | category: 'Footwear', 104 | subcategory: 'Dress Shoes', 105 | brand: 'Classic Steps', 106 | images: [ 107 | 'https://images.pexels.com/photos/1598508/pexels-photo-1598508.jpeg?auto=compress&cs=tinysrgb&w=800' 108 | ], 109 | colors: ['Black', 'Brown', 'Tan'], 110 | sizes: ['7', '8', '9', '10', '11', '12'], 111 | inStock: true, 112 | stockCount: 78, 113 | rating: 4.5, 114 | reviewCount: 123, 115 | tags: ['formal', 'leather', 'oxford', 'dress'], 116 | gender: 'men', 117 | discount: 25, 118 | specifications: { 119 | 'Material': 'Premium Leather', 120 | 'Sole': 'Leather', 121 | 'Closure': 'Lace-up', 122 | 'Care': 'Polish Regularly' 123 | }, 124 | relatedProducts: ['men-jeans-1', 'men-jacket-1'] 125 | }, 126 | // Women's Products 127 | { 128 | id: 'women-dress-1', 129 | name: 'Elegant Maxi Dress', 130 | description: 'Flowing maxi dress perfect for special occasions and everyday elegance. Features adjustable straps, side pockets, and a flattering A-line silhouette.', 131 | price: 89.99, 132 | originalPrice: 119.99, 133 | category: 'Clothing', 134 | subcategory: 'Dresses', 135 | brand: 'Elegance', 136 | images: [ 137 | 'https://images.pexels.com/photos/1536619/pexels-photo-1536619.jpeg?auto=compress&cs=tinysrgb&w=800' 138 | ], 139 | colors: ['Navy', 'Burgundy', 'Emerald', 'Black'], 140 | sizes: ['XS', 'S', 'M', 'L', 'XL'], 141 | inStock: true, 142 | stockCount: 67, 143 | rating: 4.6, 144 | reviewCount: 178, 145 | tags: ['elegant', 'maxi', 'special-occasion', 'flowing'], 146 | gender: 'women', 147 | isNew: true, 148 | discount: 25, 149 | specifications: { 150 | 'Material': '95% Polyester, 5% Elastane', 151 | 'Length': 'Maxi', 152 | 'Fit': 'A-line', 153 | 'Care': 'Hand Wash Cold' 154 | }, 155 | relatedProducts: ['women-blouse-1', 'women-bag-1'] 156 | }, 157 | { 158 | id: 'women-blouse-1', 159 | name: 'Silk Button-Up Blouse', 160 | description: 'Luxurious silk blouse with classic button-up design and elegant drape. Perfect for professional settings or elevated casual looks.', 161 | price: 129.99, 162 | originalPrice: 169.99, 163 | category: 'Clothing', 164 | subcategory: 'Blouses', 165 | brand: 'Silk Studio', 166 | images: [ 167 | 'https://images.pexels.com/photos/1457983/pexels-photo-1457983.jpeg?auto=compress&cs=tinysrgb&w=800' 168 | ], 169 | colors: ['Ivory', 'Blush', 'Navy', 'Charcoal'], 170 | sizes: ['XS', 'S', 'M', 'L', 'XL'], 171 | inStock: true, 172 | stockCount: 34, 173 | rating: 4.7, 174 | reviewCount: 92, 175 | tags: ['silk', 'professional', 'luxury', 'button-up'], 176 | gender: 'women', 177 | isFeatured: true, 178 | discount: 23, 179 | specifications: { 180 | 'Material': '100% Mulberry Silk', 181 | 'Fit': 'Regular', 182 | 'Closure': 'Button-up', 183 | 'Care': 'Dry Clean Only' 184 | }, 185 | relatedProducts: ['women-dress-1', 'women-leggings-1'] 186 | }, 187 | { 188 | id: 'women-leggings-1', 189 | name: 'High-Waist Yoga Leggings', 190 | description: 'Performance leggings with moisture-wicking fabric and comfortable high-waist design. Perfect for yoga, gym, or casual wear.', 191 | price: 49.99, 192 | originalPrice: 69.99, 193 | category: 'Activewear', 194 | subcategory: 'Leggings', 195 | brand: 'Active Life', 196 | images: [ 197 | 'https://images.pexels.com/photos/2827400/pexels-photo-2827400.jpeg?auto=compress&cs=tinysrgb&w=800' 198 | ], 199 | colors: ['Black', 'Navy', 'Charcoal', 'Burgundy'], 200 | sizes: ['XS', 'S', 'M', 'L', 'XL'], 201 | inStock: true, 202 | stockCount: 125, 203 | rating: 4.4, 204 | reviewCount: 267, 205 | tags: ['activewear', 'yoga', 'high-waist', 'performance'], 206 | gender: 'women', 207 | discount: 29, 208 | specifications: { 209 | 'Material': '88% Polyester, 12% Elastane', 210 | 'Fit': 'Compression', 211 | 'Waist': 'High-waist', 212 | 'Care': 'Machine Wash Cold' 213 | }, 214 | relatedProducts: ['women-blouse-1', 'women-bag-1'] 215 | }, 216 | { 217 | id: 'women-bag-1', 218 | name: 'Designer Leather Handbag', 219 | description: 'Elegant leather handbag with multiple compartments and premium finish. Features adjustable strap and gold-tone hardware.', 220 | price: 199.99, 221 | originalPrice: 299.99, 222 | category: 'Accessories', 223 | subcategory: 'Handbags', 224 | brand: 'Luxury Bags', 225 | images: [ 226 | 'https://images.pexels.com/photos/1152077/pexels-photo-1152077.jpeg?auto=compress&cs=tinysrgb&w=800' 227 | ], 228 | colors: ['Black', 'Brown', 'Tan', 'Navy'], 229 | sizes: ['One Size'], 230 | inStock: true, 231 | stockCount: 56, 232 | rating: 4.8, 233 | reviewCount: 89, 234 | tags: ['luxury', 'leather', 'designer', 'handbag'], 235 | gender: 'women', 236 | isFeatured: true, 237 | discount: 33, 238 | specifications: { 239 | 'Material': 'Genuine Leather', 240 | 'Dimensions': '12" x 8" x 4"', 241 | 'Strap': 'Adjustable', 242 | 'Care': 'Leather Conditioner' 243 | }, 244 | relatedProducts: ['women-dress-1', 'women-blouse-1'] 245 | } 246 | ]; 247 | 248 | // Generate additional products for a fuller catalog 249 | const generateAdditionalProducts = (): Product[] => { 250 | const additionalProducts: Product[] = []; 251 | 252 | // Men's additional products 253 | const menCategories = [ 254 | { category: 'Clothing', subcategory: 'Sweaters', basePrice: 89.99, brand: 'Knit Co' }, 255 | { category: 'Clothing', subcategory: 'Shorts', basePrice: 39.99, brand: 'Summer Wear' }, 256 | { category: 'Footwear', subcategory: 'Sneakers', basePrice: 129.99, brand: 'Sport Style' }, 257 | { category: 'Accessories', subcategory: 'Watches', basePrice: 249.99, brand: 'Time Piece' }, 258 | { category: 'Accessories', subcategory: 'Belts', basePrice: 49.99, brand: 'Leather Craft' } 259 | ]; 260 | 261 | // Women's additional products 262 | const womenCategories = [ 263 | { category: 'Clothing', subcategory: 'Skirts', basePrice: 59.99, brand: 'Fashion Forward' }, 264 | { category: 'Clothing', subcategory: 'Crop Tops', basePrice: 29.99, brand: 'Trendy Tops' }, 265 | { category: 'Footwear', subcategory: 'Heels', basePrice: 89.99, brand: 'Elegant Steps' }, 266 | { category: 'Accessories', subcategory: 'Jewelry', basePrice: 79.99, brand: 'Sparkle Co' }, 267 | { category: 'Lingerie', subcategory: 'Bras', basePrice: 39.99, brand: 'Comfort Fit' } 268 | ]; 269 | 270 | menCategories.forEach((cat, index) => { 271 | for (let i = 0; i < 4; i++) { 272 | additionalProducts.push({ 273 | id: `men-${cat.subcategory.toLowerCase().replace(' ', '-')}-${index + 2}-${i + 1}`, 274 | name: `${cat.subcategory.slice(0, -1)} Style ${i + 1}`, 275 | description: `High-quality ${cat.subcategory.toLowerCase()} for men with premium materials and modern design.`, 276 | price: cat.basePrice + (i * 15), 277 | originalPrice: cat.basePrice + (i * 15) + 25, 278 | category: cat.category, 279 | subcategory: cat.subcategory, 280 | brand: cat.brand, 281 | images: [ 282 | `https://images.pexels.com/photos/${1500000 + index * 1000 + i * 100}/pexels-photo-${1500000 + index * 1000 + i * 100}.jpeg?auto=compress&cs=tinysrgb&w=800` 283 | ], 284 | colors: ['Black', 'Navy', 'Gray', 'Brown'], 285 | sizes: cat.subcategory === 'Watches' ? ['One Size'] : ['S', 'M', 'L', 'XL'], 286 | inStock: Math.random() > 0.1, 287 | stockCount: Math.floor(Math.random() * 200) + 10, 288 | rating: Math.round((Math.random() * 2 + 3) * 10) / 10, 289 | reviewCount: Math.floor(Math.random() * 300) + 10, 290 | tags: [cat.subcategory.toLowerCase(), 'men', 'fashion'], 291 | gender: 'men' as const, 292 | discount: Math.floor(Math.random() * 30) + 10, 293 | specifications: { 294 | 'Material': 'Premium Quality', 295 | 'Care': 'Follow Care Instructions', 296 | 'Origin': 'Imported' 297 | }, 298 | relatedProducts: [] 299 | }); 300 | } 301 | }); 302 | 303 | womenCategories.forEach((cat, index) => { 304 | for (let i = 0; i < 6; i++) { 305 | additionalProducts.push({ 306 | id: `women-${cat.subcategory.toLowerCase().replace(' ', '-')}-${index + 2}-${i + 1}`, 307 | name: `${cat.subcategory.slice(0, -1)} Collection ${i + 1}`, 308 | description: `Stylish ${cat.subcategory.toLowerCase()} for women featuring contemporary design and premium quality.`, 309 | price: cat.basePrice + (i * 20), 310 | originalPrice: cat.basePrice + (i * 20) + 30, 311 | category: cat.category, 312 | subcategory: cat.subcategory, 313 | brand: cat.brand, 314 | images: [ 315 | `https://images.pexels.com/photos/${2500000 + index * 1000 + i * 100}/pexels-photo-${2500000 + index * 1000 + i * 100}.jpeg?auto=compress&cs=tinysrgb&w=800` 316 | ], 317 | colors: ['Black', 'White', 'Red', 'Blue', 'Pink'], 318 | sizes: cat.subcategory === 'Jewelry' ? ['One Size'] : ['XS', 'S', 'M', 'L', 'XL'], 319 | inStock: Math.random() > 0.15, 320 | stockCount: Math.floor(Math.random() * 150) + 5, 321 | rating: Math.round((Math.random() * 2 + 3.5) * 10) / 10, 322 | reviewCount: Math.floor(Math.random() * 400) + 20, 323 | tags: [cat.subcategory.toLowerCase(), 'women', 'fashion'], 324 | gender: 'women' as const, 325 | isNew: Math.random() > 0.7, 326 | isFeatured: Math.random() > 0.8, 327 | discount: Math.floor(Math.random() * 35) + 10, 328 | specifications: { 329 | 'Material': 'High Quality', 330 | 'Care': 'Follow Care Instructions', 331 | 'Origin': 'Imported' 332 | }, 333 | relatedProducts: [] 334 | }); 335 | } 336 | }); 337 | 338 | return additionalProducts; 339 | }; 340 | 341 | export const allProducts = [...products, ...generateAdditionalProducts()]; -------------------------------------------------------------------------------- /src/pages/ProductDetail.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { useParams, Link } from 'react-router-dom'; 3 | import { motion } from 'framer-motion'; 4 | import { 5 | Heart, 6 | ShoppingCart, 7 | Star, 8 | Truck, 9 | Shield, 10 | RotateCcw, 11 | ChevronLeft, 12 | ChevronRight, 13 | Minus, 14 | Plus 15 | } from 'lucide-react'; 16 | import { useStore } from '../store/useStore'; 17 | import { allProducts } from '../data/products'; 18 | import { ProductCard } from '../components/common/ProductCard'; 19 | import toast from 'react-hot-toast'; 20 | 21 | export const ProductDetail: React.FC = () => { 22 | const { id } = useParams<{ id: string }>(); 23 | const [selectedColor, setSelectedColor] = useState(''); 24 | const [selectedSize, setSelectedSize] = useState(''); 25 | const [quantity, setQuantity] = useState(1); 26 | const [currentImageIndex, setCurrentImageIndex] = useState(0); 27 | 28 | const { addToCart, addToWishlist, removeFromWishlist, isInWishlist } = useStore(); 29 | 30 | const product = allProducts.find(p => p.id === id); 31 | const relatedProducts = product?.relatedProducts 32 | ? allProducts.filter(p => product.relatedProducts?.includes(p.id)) 33 | : allProducts.filter(p => p.category === product?.category && p.id !== product?.id).slice(0, 4); 34 | 35 | useEffect(() => { 36 | if (product) { 37 | setSelectedColor(product.colors[0]); 38 | setSelectedSize(product.sizes[0]); 39 | } 40 | }, [product]); 41 | 42 | if (!product) { 43 | return ( 44 |

45 |

46 |

Product Not Found

47 | 48 | Back to Products 49 | 50 |

51 |

52 | ); 53 | } 54 | 55 | const inWishlist = isInWishlist(product.id); 56 | 57 | const handleAddToCart = () => { 58 | addToCart({ 59 | productId: product.id, 60 | product, 61 | quantity, 62 | selectedColor, 63 | selectedSize, 64 | price: product.price 65 | }); 66 | toast.success('Added to cart!'); 67 | }; 68 | 69 | const handleWishlistToggle = () => { 70 | if (inWishlist) { 71 | removeFromWishlist(product.id); 72 | toast.success('Removed from wishlist'); 73 | } else { 74 | addToWishlist(product); 75 | toast.success('Added to wishlist'); 76 | } 77 | }; 78 | 79 | const nextImage = () => { 80 | setCurrentImageIndex((prev) => (prev + 1) % product.images.length); 81 | }; 82 | 83 | const prevImage = () => { 84 | setCurrentImageIndex((prev) => (prev - 1 + product.images.length) % product.images.length); 85 | }; 86 | 87 | return ( 88 |

89 |

90 | {/* Breadcrumb */} 91 | 100 | 101 |

102 | {/* Product Images */} 103 |

104 |

105 |

110 | 111 | {product.images.length > 1 && ( 112 | <> 113 | 119 | 125 | 126 | )} 127 | 128 | {/* Image Indicators */} 129 | {product.images.length > 1 && ( 130 |

131 | {product.images.map((_, index) => ( 132 |

141 | )} 142 |

143 | 144 | {/* Thumbnail Images */} 145 | {product.images.length > 1 && ( 146 |

147 | {product.images.map((image, index) => ( 148 | 163 | ))} 164 |

165 | )} 166 |

167 | 168 | {/* Product Info */} 169 |

170 |

171 |

172 | {product.name} 173 |

174 |

175 | {product.brand} 176 |

177 |

178 | 179 | {/* Rating */} 180 |

181 |

182 | {[...Array(5)].map((_, i) => ( 183 | 191 | ))} 192 |

193 | 194 | {product.rating} ({product.reviewCount} reviews) 195 | 196 |

197 | 198 | {/* Price */} 199 |

200 | 201 | ${product.price} 202 | 203 | {product.originalPrice && ( 204 | 205 | ${product.originalPrice} 206 | 207 | )} 208 | {product.discount && ( 209 | 210 | -{product.discount}% OFF 211 | 212 | )} 213 |

214 | 215 | {/* Description */} 216 |

217 |

218 | Description 219 |

220 |

221 | {product.description} 222 |

223 |

224 | 225 | {/* Color Selection */} 226 |

227 |

228 | Color: {selectedColor} 229 |

230 |

231 | {product.colors.map((color) => ( 232 |

245 |

246 | 247 | {/* Size Selection */} 248 |

249 |

250 | Size: {selectedSize} 251 |

252 |

253 | {product.sizes.map((size) => ( 254 | 265 | ))} 266 |

267 |

268 | 269 | {/* Quantity */} 270 |

271 |

272 | Quantity 273 |

274 |

275 | 281 | 282 | {quantity} 283 | 284 | 290 |

291 |

292 | 293 | {/* Stock Status */} 294 |

295 |

296 | 297 | {product.inStock ? `In Stock (${product.stockCount} available)` : 'Out of Stock'} 298 | 299 |

300 | 301 | {/* Action Buttons */} 302 |

303 | 311 | 312 | 319 |

320 | 321 | {/* Features */} 322 |

323 |

324 | 325 | 326 | Free shipping on orders over $75 327 | 328 |

329 |

330 | 331 | 332 | 30-day return policy 333 | 334 |

335 |

336 | 337 | 338 | Secure payment guaranteed 339 | 340 |

341 |

342 | 343 | {/* Specifications */} 344 | {product.specifications && ( 345 |

346 |

347 | Specifications 348 |

349 |

350 | {Object.entries(product.specifications).map(([key, value]) => ( 351 |

352 | {key}: 353 | {value} 354 |

355 | ))} 356 |

357 |

358 | )} 359 |

360 |

361 | 362 | {/* Related Products */} 363 | {relatedProducts.length > 0 && ( 364 |

365 |

366 | Related Products 367 |

368 |

369 | {relatedProducts.map((product, index) => ( 370 | 371 | ))} 372 |

373 |

374 | )} 375 |

376 |

377 | ); 378 | }; -------------------------------------------------------------------------------- /src/pages/Products.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { motion } from 'framer-motion'; 3 | import { Filter, Grid, List, ChevronDown } from 'lucide-react'; 4 | import { ProductCard } from '../components/common/ProductCard'; 5 | import { useStore } from '../store/useStore'; 6 | import { allProducts } from '../data/products'; 7 | import { useLocation } from 'react-router-dom'; 8 | // Products 9 | export const Products: React.FC = () => { 10 | const location = useLocation(); 11 | const { 12 | products, 13 | setProducts, 14 | filteredProducts, 15 | setFilteredProducts, 16 | filters, 17 | setFilters, 18 | resetFilters, 19 | searchQuery 20 | } = useStore(); 21 | 22 | const [isFilterOpen, setIsFilterOpen] = useState(false); 23 | const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid'); 24 | 25 | useEffect(() => { 26 | setProducts(allProducts); 27 | }, [setProducts]); 28 | 29 | // Handle URL-based filtering 30 | useEffect(() => { 31 | const params = new URLSearchParams(location.search); 32 | const category = params.get('category'); 33 | const filter = params.get('filter'); 34 | 35 | if (category) { 36 | setFilters({ category: [category] }); 37 | } 38 | 39 | if (filter === 'new') { 40 | // Filter for new products 41 | } 42 | }, [location.search, setFilters]); 43 | 44 | useEffect(() => { 45 | let filtered = [...products]; 46 | 47 | // Filter by gender based on route 48 | if (location.pathname === '/men') { 49 | filtered = filtered.filter(product => product.gender === 'men'); 50 | } else if (location.pathname === '/women') { 51 | filtered = filtered.filter(product => product.gender === 'women'); 52 | } 53 | 54 | // Apply search filter 55 | if (searchQuery) { 56 | filtered = filtered.filter(product => 57 | product.name.toLowerCase().includes(searchQuery.toLowerCase()) || 58 | product.description.toLowerCase().includes(searchQuery.toLowerCase()) || 59 | product.brand.toLowerCase().includes(searchQuery.toLowerCase()) || 60 | product.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase())) 61 | ); 62 | } 63 | 64 | // Apply category filter 65 | if (filters.category.length > 0) { 66 | filtered = filtered.filter(product => 67 | filters.category.includes(product.category) 68 | ); 69 | } 70 | 71 | // Apply brand filter 72 | if (filters.brand.length > 0) { 73 | filtered = filtered.filter(product => 74 | filters.brand.includes(product.brand) 75 | ); 76 | } 77 | 78 | // Apply color filter 79 | if (filters.color.length > 0) { 80 | filtered = filtered.filter(product => 81 | product.colors.some(color => filters.color.includes(color)) 82 | ); 83 | } 84 | 85 | // Apply size filter 86 | if (filters.size.length > 0) { 87 | filtered = filtered.filter(product => 88 | product.sizes.some(size => filters.size.includes(size)) 89 | ); 90 | } 91 | 92 | // Apply price range filter 93 | filtered = filtered.filter(product => 94 | product.price >= filters.priceRange[0] && product.price <= filters.priceRange[1] 95 | ); 96 | 97 | // Apply in stock filter 98 | if (filters.inStock) { 99 | filtered = filtered.filter(product => product.inStock); 100 | } 101 | 102 | // Apply rating filter 103 | if (filters.rating > 0) { 104 | filtered = filtered.filter(product => product.rating >= filters.rating); 105 | } 106 | 107 | // Apply sorting 108 | switch (filters.sortBy) { 109 | case 'price-low': 110 | filtered.sort((a, b) => a.price - b.price); 111 | break; 112 | case 'price-high': 113 | filtered.sort((a, b) => b.price - a.price); 114 | break; 115 | case 'rating': 116 | filtered.sort((a, b) => b.rating - a.rating); 117 | break; 118 | case 'popular': 119 | filtered.sort((a, b) => b.reviewCount - a.reviewCount); 120 | break; 121 | default: 122 | filtered.sort((a, b) => (b.isNew ? 1 : 0) - (a.isNew ? 1 : 0)); 123 | } 124 | 125 | setFilteredProducts(filtered); 126 | }, [products, filters, searchQuery, setFilteredProducts, location.pathname]); 127 | 128 | const categories = [...new Set(products.map(p => p.category))]; 129 | const brands = [...new Set(products.map(p => p.brand))]; 130 | const colors = [...new Set(products.flatMap(p => p.colors))]; 131 | const sizes = [...new Set(products.flatMap(p => p.sizes))]; 132 | 133 | const handleCategoryChange = (category: string) => { 134 | const newCategories = filters.category.includes(category) 135 | ? filters.category.filter(c => c !== category) 136 | : [...filters.category, category]; 137 | setFilters({ category: newCategories }); 138 | }; 139 | 140 | const handleBrandChange = (brand: string) => { 141 | const newBrands = filters.brand.includes(brand) 142 | ? filters.brand.filter(b => b !== brand) 143 | : [...filters.brand, brand]; 144 | setFilters({ brand: newBrands }); 145 | }; 146 | 147 | const handleColorChange = (color: string) => { 148 | const newColors = filters.color.includes(color) 149 | ? filters.color.filter(c => c !== color) 150 | : [...filters.color, color]; 151 | setFilters({ color: newColors }); 152 | }; 153 | 154 | const handleSizeChange = (size: string) => { 155 | const newSizes = filters.size.includes(size) 156 | ? filters.size.filter(s => s !== size) 157 | : [...filters.size, size]; 158 | setFilters({ size: newSizes }); 159 | }; 160 | 161 | const getPageTitle = () => { 162 | if (location.pathname === '/men') return "Men's Products"; 163 | if (location.pathname === '/women') return "Women's Products"; 164 | return "All Products"; 165 | }; 166 | 167 | return ( 168 |

169 |

170 |

171 |

172 |

173 | {getPageTitle()} 174 |

175 |

176 | Showing {filteredProducts.length} of {products.length} products 177 |

178 |

179 | 180 |

181 | {/* Sort */} 182 |

183 | 194 | 195 |

196 | 197 | {/* View Mode */} 198 |

199 | 205 | 211 |

212 | 213 | {/* Filter Toggle */} 214 | 221 |

222 |

223 | 224 |

225 | {/* Filters Sidebar */} 226 |

227 |

228 |

229 |

230 | Filters 231 |

232 | 238 |

239 | 240 | {/* Categories */} 241 |

242 |

Brands

263 |

264 | {brands.map(brand => ( 265 | 266 | handleBrandChange(brand)} 270 | className="rounded border-gray-300 text-black focus:ring-black dark:focus:ring-white" 271 | /> 272 | 273 | {brand} 274 | 275 | 276 | ))} 277 |

278 |

279 | 280 | {/* Colors */} 281 |

282 |

Colors

283 |

284 | {colors.map(color => ( 285 |

296 |

297 | 298 | {/* Sizes */} 299 |

300 |

Sizes

301 |

302 | {sizes.map(size => ( 303 | 314 | ))} 315 |

316 |

317 | 318 | {/* Price Range */} 319 |

320 |

Price Range

321 |

322 | setFilters({ priceRange: [0, parseInt(e.target.value)] })} 328 | className="w-full" 329 | /> 330 |

331 | $0 332 | ${filters.priceRange[1]} 333 |

334 |

335 |

336 | 337 | {/* In Stock */} 338 |

339 | 340 | setFilters({ inStock: e.target.checked })} 344 | className="rounded border-gray-300 text-black focus:ring-black dark:focus:ring-white" 345 | /> 346 | 347 | In Stock Only 348 | 349 | 350 |

351 | 352 | {/* Rating */} 353 |

354 |

Minimum Rating

355 |

356 | {[4, 3, 2, 1].map(rating => ( 357 | 358 | setFilters({ rating: parseInt(e.target.value) })} 364 | className="text-black focus:ring-black dark:focus:ring-white" 365 | /> 366 | 367 | {rating}+ Stars 368 | 369 | 370 | ))} 371 |

372 |

373 |

374 |

375 | 376 | {/* Products Grid */} 377 |

378 |

383 | {filteredProducts.map((product, index) => ( 384 | 385 | ))} 386 |

387 | 388 | {filteredProducts.length === 0 && ( 389 |

390 |

391 | No products found matching your criteria. 392 |

393 | 399 |

400 | )} 401 |

402 |

403 |

404 |

405 | ); 406 | }; -------------------------------------------------------------------------------- /src/pages/AdminDashboard.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { motion } from 'framer-motion'; 3 | import { 4 | Users, 5 | Package, 6 | ShoppingCart, 7 | DollarSign, 8 | TrendingUp, 9 | AlertTriangle, 10 | Plus, 11 | Edit, 12 | Trash2, 13 | Eye, 14 | EyeOff, 15 | Search, 16 | Filter, 17 | Download 18 | } from 'lucide-react'; 19 | import { useStore } from '../store/useStore'; 20 | import { Product, User as UserType } from '../types'; 21 | import { ProductForm } from '../components/admin/ProductForm'; 22 | import { UserManagement } from '../components/admin/UserManagement'; 23 | // admin 24 | export const AdminDashboard: React.FC = () => { 25 | const { 26 | user, 27 | isAuthenticated, 28 | products, 29 | users, 30 | orders, 31 | dashboardStats, 32 | updateProduct, 33 | deleteProduct, 34 | toggleProductVisibility 35 | } = useStore(); 36 | 37 | const [activeTab, setActiveTab] = useState<'overview' | 'products' | 'users' | 'orders'>('overview'); 38 | const [showProductForm, setShowProductForm] = useState(false); 39 | const [editingProduct, setEditingProduct] = useState(null); 40 | const [searchQuery, setSearchQuery] = useState(''); 41 | const [filterStatus, setFilterStatus] = useState<'all' | 'visible' | 'hidden'>('all'); 42 | 43 | // Redirect if not admin 44 | if (!isAuthenticated || user?.role !== 'admin') { 45 | return ( 46 |

47 |

48 |

49 | Access Denied 50 |

51 |

52 | You need admin privileges to access this page. 53 |

54 |

55 |

56 | ); 57 | } 58 | 59 | const filteredProducts = products.filter(product => { 60 | const matchesSearch = product.name.toLowerCase().includes(searchQuery.toLowerCase()) || 61 | product.brand.toLowerCase().includes(searchQuery.toLowerCase()) || 62 | product.category.toLowerCase().includes(searchQuery.toLowerCase()); 63 | 64 | const matchesFilter = filterStatus === 'all' || 65 | (filterStatus === 'visible' && product.isVisible !== false) || 66 | (filterStatus === 'hidden' && product.isVisible === false); 67 | 68 | return matchesSearch && matchesFilter; 69 | }); 70 | 71 | const handleEditProduct = (product: Product) => { 72 | setEditingProduct(product); 73 | setShowProductForm(true); 74 | }; 75 | 76 | const handleDeleteProduct = (productId: string) => { 77 | if (window.confirm('Are you sure you want to delete this product?')) { 78 | deleteProduct(productId); 79 | } 80 | }; 81 | 82 | const handleToggleVisibility = (productId: string) => { 83 | toggleProductVisibility(productId); 84 | }; 85 | 86 | const StatCard = ({ title, value, icon: Icon, trend, color }: any) => ( 87 | 92 |

93 |

94 |

{title}

95 |

{value}

96 | {trend && ( 97 |

0 ? 'text-green-600' : 'text-red-600' 99 | }`}> 100 | 101 | {trend > 0 ? '+' : ''}{trend}% 102 |

103 | )} 104 |

105 |

106 | 107 |

108 |

109 | 110 | ); 111 | 112 | return ( 113 |

114 |

115 | 120 |

121 | Admin Dashboard 122 |

123 |

124 | Manage your e-commerce platform 125 |

126 | 127 | 128 | {/* Navigation Tabs */} 129 |

130 |

131 | {[ 132 | { id: 'overview', name: 'Overview', icon: TrendingUp }, 133 | { id: 'products', name: 'Products', icon: Package }, 134 | { id: 'users', name: 'Users', icon: Users }, 135 | { id: 'orders', name: 'Orders', icon: ShoppingCart } 136 | ].map((tab) => ( 137 | 150 | ))} 151 |

152 |

153 | 154 | {/* Overview Tab */} 155 | {activeTab === 'overview' && ( 156 |

157 | {/* Stats Grid */} 158 |

159 | 166 | 173 | 180 | 187 |

188 | 189 | {/* Alerts */} 190 |

191 | 196 |

197 | 198 |

199 | Low Stock Alert 200 |

201 |

202 |

203 | {dashboardStats.lowStockProducts} products are running low on stock 204 |

205 | 209 | 210 | 211 | 216 |

217 | 218 |

219 | Pending Orders 220 |

221 |

222 |

223 | {dashboardStats.pendingOrders} orders need attention 224 |

225 | 229 | 230 |

231 |

232 | )} 233 | 234 | {/* Products Tab */} 235 | {activeTab === 'products' && ( 236 |

237 | {/* Product Management Header */} 238 |

239 |

240 |

241 | 242 | setSearchQuery(e.target.value)} 247 | className="pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-burgundy dark:bg-gray-800" 248 | style={{ '--tw-ring-color': '#800020' } as React.CSSProperties} 249 | /> 250 |

251 | 261 |

262 |

263 | 274 | 278 |

279 |

280 | 281 | {/* Products Table */} 282 |

283 |

284 | 285 | 286 | 287 | 290 | 293 | 296 | 299 | 302 | 305 | 306 | 307 | 308 | {filteredProducts.map((product) => ( 309 | 310 | 327 | 330 | 333 | 340 | 349 | 379 | 380 | ))} 381 | 382 |

288 \| Product 289 \|	291 \| Category 292 \|	294 \| Price 295 \|	297 \| Stock 298 \|	300 \| Status 301 \|	303 \| Actions 304 \|
311 \| 312 \| 317 \| 318 \| 319 \| {product.name} 320 \| 321 \| 322 \| {product.brand} 323 \| 324 \| 325 \| 326 \|	328 \| {product.category} 329 \|	331 \| ${product.price} 332 \|	334 \| 337 \| {product.stockCount} 338 \| 339 \|	341 \| 346 \| {product.isVisible !== false ? 'Visible' : 'Hidden'} 347 \| 348 \|	350 \| 351 \| 362 \| 370 \| 377 \| 378 \|

383 |

384 |

385 |

386 | )} 387 | 388 | {/* Users Tab */} 389 | {activeTab === 'users' && } 390 | 391 | {/* Orders Tab */} 392 | {activeTab === 'orders' && ( 393 |

394 |

395 | Order Management 396 |

397 |

398 | Order management functionality will be implemented here. 399 |

400 |

401 | )} 402 |

403 | 404 | {/* Product Form Modal */} 405 | {showProductForm && ( 406 | { 409 | setShowProductForm(false); 410 | setEditingProduct(null); 411 | }} 412 | /> 413 | )} 414 |

415 | ); 416 | }; -------------------------------------------------------------------------------- /src/components/layout/Navbar.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useRef } from 'react'; 2 | import { Link, useLocation, useNavigate } from 'react-router-dom'; 3 | import { motion, AnimatePresence } from 'framer-motion'; 4 | import { 5 | ShoppingBag, 6 | Search, 7 | User, 8 | Menu, 9 | X, 10 | Sun, 11 | Moon, 12 | Heart, 13 | ShoppingCart, 14 | Settings, 15 | LogOut, 16 | ChevronDown 17 | } from 'lucide-react'; 18 | import { useStore } from '../../store/useStore'; 19 | 20 | export const Navbar: React.FC = () => { 21 | const location = useLocation(); 22 | const navigate = useNavigate(); 23 | const [isScrolled, setIsScrolled] = useState(false); 24 | const [searchQuery, setSearchQuery] = useState(''); 25 | const [showSuggestions, setShowSuggestions] = useState(false); 26 | const [showUserMenu, setShowUserMenu] = useState(false); 27 | const searchRef = useRef(null); 28 | const userMenuRef = useRef(null); 29 | 30 | const { 31 | isDarkMode, 32 | toggleTheme, 33 | isMobileMenuOpen, 34 | setMobileMenuOpen, 35 | setCartOpen, 36 | setWishlistOpen, 37 | cart, 38 | wishlist, 39 | isAuthenticated, 40 | user, 41 | logout, 42 | setSearchQuery: setGlobalSearchQuery, 43 | searchSuggestions, 44 | getSearchSuggestions 45 | } = useStore(); 46 | 47 | useEffect(() => { 48 | const handleScroll = () => { 49 | setIsScrolled(window.scrollY > 50); 50 | }; 51 | 52 | window.addEventListener('scroll', handleScroll); 53 | return () => window.removeEventListener('scroll', handleScroll); 54 | }, []); 55 | 56 | useEffect(() => { 57 | const handleClickOutside = (event: MouseEvent) => { 58 | if (searchRef.current && !searchRef.current.contains(event.target as Node)) { 59 | setShowSuggestions(false); 60 | } 61 | if (userMenuRef.current && !userMenuRef.current.contains(event.target as Node)) { 62 | setShowUserMenu(false); 63 | } 64 | }; 65 | 66 | document.addEventListener('mousedown', handleClickOutside); 67 | return () => document.removeEventListener('mousedown', handleClickOutside); 68 | }, []); 69 | 70 | useEffect(() => { 71 | if (searchQuery.length > 0) { 72 | getSearchSuggestions(searchQuery); 73 | setShowSuggestions(true); 74 | } else { 75 | setShowSuggestions(false); 76 | } 77 | }, [searchQuery, getSearchSuggestions]); 78 | 79 | const handleSearchSubmit = (e: React.FormEvent) => { 80 | e.preventDefault(); 81 | if (searchQuery.trim()) { 82 | setGlobalSearchQuery(searchQuery); 83 | setShowSuggestions(false); 84 | if (location.pathname !== '/products') { 85 | navigate('/products'); 86 | } 87 | } 88 | }; 89 | 90 | const handleSuggestionClick = (suggestion: any) => { 91 | setSearchQuery(suggestion.text); 92 | setGlobalSearchQuery(suggestion.text); 93 | setShowSuggestions(false); 94 | if (location.pathname !== '/products') { 95 | navigate('/products'); 96 | } 97 | }; 98 | 99 | const handleLogout = () => { 100 | logout(); 101 | setShowUserMenu(false); 102 | navigate('/'); 103 | }; 104 | 105 | const navItems = [ 106 | { name: 'Home', path: '/' }, 107 | { name: 'Men', path: '/men' }, 108 | { name: 'Women', path: '/women' }, 109 | { name: 'All Products', path: '/products' }, 110 | { name: 'Orders', path: '/orders' }, 111 | ]; 112 | 113 | const isActive = (path: string) => location.pathname === path; 114 | 115 | return ( 116 | 125 |

126 |

127 | {/* Logo */} 128 | 129 | 130 | 131 | Shop Market 132 | 133 | 134 | 135 | {/* Desktop Navigation */} 136 |

137 | {navItems.map((item) => ( 138 | 148 | {item.name} 149 | {isActive(item.path) && ( 150 | 155 | )} 156 | 157 | ))} 158 |

159 | 160 | {/* Search Bar */} 161 |

162 |

163 |

164 | 165 | setSearchQuery(e.target.value)} 170 | onFocus={() => searchQuery.length > 0 && setShowSuggestions(true)} 171 | className="w-full pl-10 pr-4 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-burgundy text-sm" 172 | style={{ '--tw-ring-color': '#800020' } as React.CSSProperties} 173 | /> 174 | 175 | 176 | {/* Search Suggestions */} 177 | 178 | {showSuggestions && searchSuggestions.length > 0 && ( 179 | 185 | {searchSuggestions.map((suggestion) => ( 186 | 194 | ))} 195 | 196 | )} 197 | 198 |

199 |

200 | 201 | {/* Right Side Actions */} 202 |

203 | {/* Theme Toggle */} 204 | 215 | 216 | {/* Wishlist */} 217 | 230 | 231 | {/* Cart */} 232 | 245 | 246 | {/* User Menu */} 247 | {isAuthenticated ? ( 248 |

249 | 260 | 261 | 262 | {showUserMenu && ( 263 | 269 | setShowUserMenu(false)} 272 | className="flex items-center space-x-2 px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300" 273 | > 274 | 275 | My Orders 276 | 277 | {user?.role === 'admin' && ( 278 | setShowUserMenu(false)} 281 | className="flex items-center space-x-2 px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300" 282 | > 283 | 284 | Admin Dashboard 285 | 286 | )} 287 | 294 | 295 | )} 296 | 297 |

298 | ) : ( 299 | 304 | Login 305 | 306 | )} 307 | 308 | {/* Mobile Menu Button */} 309 | 320 |

321 |

322 |

323 | 324 | {/* Mobile Menu */} 325 | 326 | {isMobileMenuOpen && ( 327 | 333 |

334 | {/* Mobile Search */} 335 |

336 | 337 | setSearchQuery(e.target.value)} 342 | className="w-full pl-10 pr-4 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-burgundy text-sm" 343 | style={{ '--tw-ring-color': '#800020' } as React.CSSProperties} 344 | /> 345 | 346 | 347 | {navItems.map((item) => ( 348 | setMobileMenuOpen(false)} 352 | className={`block px-3 py-2 rounded-lg text-base font-medium transition-colors ${ 353 | isActive(item.path) 354 | ? 'text-burgundy bg-gray-100 dark:bg-gray-800' 355 | : 'text-gray-700 dark:text-gray-300 hover:text-burgundy dark:hover:text-burgundy' 356 | }`} 357 | style={isActive(item.path) ? { color: '#800020' } : {}} 358 | > 359 | {item.name} 360 | 361 | ))} 362 | 363 | {/* Mobile Actions */} 364 |

365 | 376 | 377 | 393 | 394 | 410 | 411 | {!isAuthenticated && ( 412 | setMobileMenuOpen(false)} 415 | className="px-4 py-2 bg-burgundy text-white rounded-lg hover:opacity-90 transition-colors text-sm font-medium" 416 | style={{ backgroundColor: '#800020' }} 417 | > 418 | Login 419 | 420 | )} 421 |

422 | 423 | {isAuthenticated && ( 424 |

425 |

426 | 427 | 428 | {user?.firstName} {user?.lastName} 429 | 430 |

431 | setMobileMenuOpen(false)} 434 | className="block px-3 py-2 text-gray-700 dark:text-gray-300 hover:text-burgundy" 435 | > 436 | My Orders 437 | 438 | {user?.role === 'admin' && ( 439 | setMobileMenuOpen(false)} 442 | className="block px-3 py-2 text-gray-700 dark:text-gray-300 hover:text-burgundy" 443 | > 444 | Admin Dashboard 445 | 446 | )} 447 | 456 |

457 | )} 458 |

459 | 460 | )} 461 | 462 | 463 | ); 464 | }; -------------------------------------------------------------------------------- /src/pages/Checkout.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { motion } from 'framer-motion'; 3 | import { CreditCard, Truck, MapPin, Lock } from 'lucide-react'; 4 | import { useStore } from '../store/useStore'; 5 | import { useNavigate } from 'react-router-dom'; 6 | import toast from 'react-hot-toast'; 7 | 8 | export const Checkout: React.FC = () => { 9 | const navigate = useNavigate(); 10 | const { 11 | cart, 12 | cartSubtotal, 13 | cartTax, 14 | cartShipping, 15 | cartTotal, 16 | clearCart, 17 | addOrder, 18 | paymentMethods, 19 | isAuthenticated 20 | } = useStore(); 21 | 22 | const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(paymentMethods[0]?.id || ''); 23 | const [isGuest, setIsGuest] = useState(!isAuthenticated); 24 | const [isProcessing, setIsProcessing] = useState(false); 25 | 26 | const [shippingInfo, setShippingInfo] = useState({ 27 | firstName: '', 28 | lastName: '', 29 | email: '', 30 | phone: '', 31 | address: '', 32 | city: '', 33 | state: '', 34 | zipCode: '', 35 | country: 'United States' 36 | }); 37 | 38 | const [billingInfo, setBillingInfo] = useState({ 39 | sameAsShipping: true, 40 | firstName: '', 41 | lastName: '', 42 | address: '', 43 | city: '', 44 | state: '', 45 | zipCode: '', 46 | country: 'United States' 47 | }); 48 | 49 | const [cardInfo, setCardInfo] = useState({ 50 | cardNumber: '', 51 | expiryDate: '', 52 | cvv: '', 53 | nameOnCard: '' 54 | }); 55 | 56 | if (cart.length === 0) { 57 | return ( 58 |

59 |

60 |

61 | Your cart is empty 62 |

63 |

64 | Add some items to your cart before checking out. 65 |

66 | 72 |

73 |

74 | ); 75 | } 76 | 77 | const handleSubmit = async (e: React.FormEvent) => { 78 | e.preventDefault(); 79 | setIsProcessing(true); 80 | 81 | try { 82 | // Simulate payment processing 83 | await new Promise(resolve => setTimeout(resolve, 2000)); 84 | 85 | // Create order 86 | const order = { 87 | id: `ORD-${Date.now()}`, 88 | userId: isGuest ? 'guest' : 'user-1', 89 | items: cart, 90 | subtotal: cartSubtotal, 91 | tax: cartTax, 92 | shipping: cartShipping, 93 | total: cartTotal, 94 | status: 'processing' as const, 95 | shippingAddress: { 96 | id: 'addr-1', 97 | label: 'Shipping', 98 | street: shippingInfo.address, 99 | city: shippingInfo.city, 100 | state: shippingInfo.state, 101 | zipCode: shippingInfo.zipCode, 102 | country: shippingInfo.country, 103 | isDefault: true 104 | }, 105 | billingAddress: { 106 | id: 'addr-2', 107 | label: 'Billing', 108 | street: billingInfo.sameAsShipping ? shippingInfo.address : billingInfo.address, 109 | city: billingInfo.sameAsShipping ? shippingInfo.city : billingInfo.city, 110 | state: billingInfo.sameAsShipping ? shippingInfo.state : billingInfo.state, 111 | zipCode: billingInfo.sameAsShipping ? shippingInfo.zipCode : billingInfo.zipCode, 112 | country: billingInfo.sameAsShipping ? shippingInfo.country : billingInfo.country, 113 | isDefault: false 114 | }, 115 | paymentMethod: paymentMethods.find(pm => pm.id === selectedPaymentMethod)?.name || 'Credit Card', 116 | paymentStatus: 'completed' as const, 117 | createdAt: new Date(), 118 | updatedAt: new Date(), 119 | trackingNumber: `TRK${Math.random().toString(36).substr(2, 9).toUpperCase()}`, 120 | estimatedDelivery: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000) // 7 days from now 121 | }; 122 | 123 | addOrder(order); 124 | clearCart(); 125 | toast.success('Order placed successfully!'); 126 | navigate('/orders'); 127 | } catch (error) { 128 | toast.error('Payment failed. Please try again.'); 129 | } finally { 130 | setIsProcessing(false); 131 | } 132 | }; 133 | 134 | return ( 135 |

136 |

137 | 142 |

Checkout

143 | 144 | 145 |

146 | {/* Main Content */} 147 |

148 | {/* Guest Checkout Option */} 149 | {!isAuthenticated && ( 150 | 155 |

156 | Checkout Options 157 |

158 |

159 | 160 | setIsGuest(true)} 164 | className="text-black focus:ring-black dark:focus:ring-white" 165 | /> 166 | 167 | Continue as Guest 168 | 169 | 170 | 171 | setIsGuest(false)} 175 | className="text-black focus:ring-black dark:focus:ring-white" 176 | /> 177 | 178 | Create Account / Login 179 | 180 | 181 |

182 | 183 | )} 184 | 185 | {/* Shipping Information */} 186 | 192 |

193 | 194 |

195 | Shipping Information 196 |

197 |

198 | 199 |

200 |

201 | 202 | First Name 203 | 204 | setShippingInfo({...shippingInfo, firstName: e.target.value})} 209 | className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white dark:bg-gray-700" 210 | /> 211 |

212 |

213 | 214 | Last Name 215 | 216 | setShippingInfo({...shippingInfo, lastName: e.target.value})} 221 | className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white dark:bg-gray-700" 222 | /> 223 |

224 |

225 | 226 | Email 227 | 228 | setShippingInfo({...shippingInfo, email: e.target.value})} 233 | className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white dark:bg-gray-700" 234 | /> 235 |

236 |

237 | 238 | Phone 239 | 240 | setShippingInfo({...shippingInfo, phone: e.target.value})} 245 | className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white dark:bg-gray-700" 246 | /> 247 |

248 |

249 | 250 | Address 251 | 252 | setShippingInfo({...shippingInfo, address: e.target.value})} 257 | className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white dark:bg-gray-700" 258 | /> 259 |

260 |

261 | 262 | City 263 | 264 | setShippingInfo({...shippingInfo, city: e.target.value})} 269 | className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white dark:bg-gray-700" 270 | /> 271 |

272 |

273 | 274 | State 275 | 276 | setShippingInfo({...shippingInfo, state: e.target.value})} 281 | className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white dark:bg-gray-700" 282 | /> 283 |

284 |

285 | 286 | ZIP Code 287 | 288 | setShippingInfo({...shippingInfo, zipCode: e.target.value})} 293 | className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white dark:bg-gray-700" 294 | /> 295 |

296 |

297 | 298 | Country 299 | 300 | 309 |

310 |

311 | 312 | 313 | {/* Payment Information */} 314 | 320 |

321 | 322 |

323 | Payment Method 324 |

325 |

326 | 327 |

328 | {paymentMethods.map((method) => ( 329 | 330 | setSelectedPaymentMethod(e.target.value)} 336 | className="text-black focus:ring-black dark:focus:ring-white" 337 | /> 338 | {method.icon} 339 | {method.name} 340 | 341 | ))} 342 |

343 | 344 | {selectedPaymentMethod === 'card-1' && ( 345 |

346 |

347 | 348 | Name on Card 349 | 350 | setCardInfo({...cardInfo, nameOnCard: e.target.value})} 355 | className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white dark:bg-gray-700" 356 | /> 357 |

358 |

359 | 360 | Card Number 361 | 362 | setCardInfo({...cardInfo, cardNumber: e.target.value})} 368 | className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white dark:bg-gray-700" 369 | /> 370 |

371 |

372 | 373 | Expiry Date 374 | 375 | setCardInfo({...cardInfo, expiryDate: e.target.value})} 381 | className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white dark:bg-gray-700" 382 | /> 383 |

384 |

385 | 386 | CVV 387 | 388 | setCardInfo({...cardInfo, cvv: e.target.value})} 394 | className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white dark:bg-gray-700" 395 | /> 396 |

397 |

398 | )} 399 | 400 |

401 | 402 | {/* Order Summary */} 403 |

404 | 410 |

411 | Order Summary 412 |

413 | 414 |

415 | {cart.map((item) => ( 416 |

417 |

422 |

423 |

424 | {item.product.name} 425 |

426 |

427 | {item.selectedColor} • {item.selectedSize} • Qty: {item.quantity} 428 |

429 |

430 |

431 | ${(item.price * item.quantity).toFixed(2)} 432 |

433 |

434 | ))} 435 |

436 | 437 |

438 |

439 | Subtotal 440 | ${cartSubtotal.toFixed(2)} 441 |

442 |

443 | Tax 444 | ${cartTax.toFixed(2)} 445 |

446 |

447 | Shipping 448 | 449 | {cartShipping === 0 ? 'Free' : `$${cartShipping.toFixed(2)}`} 450 | 451 |

452 |

453 | Total 454 | ${cartTotal.toFixed(2)} 455 |

456 |

457 | 458 | 468 | 469 |

470 | Your payment information is secure and encrypted 471 |

472 | 473 |

474 |

475 |

476 |

477 | ); 478 | }; --------------------------------------------------------------------------------