diff --git a/dashboard/src/app/eshop/page.tsx b/dashboard/src/app/eshop/page.tsx new file mode 100644 index 0000000..e7aacbf --- /dev/null +++ b/dashboard/src/app/eshop/page.tsx @@ -0,0 +1,560 @@ +"use client"; + +import { useState, useMemo } from "react"; +import { motion, AnimatePresence } from "framer-motion"; +import { + ShoppingCart, + Search, + Filter, + X, + Plus, + Minus, + Shield, + Lock, + Zap, + Eye, + Trash2, + ChevronDown, + ChevronUp +} from "lucide-react"; + +// Product type definition +interface Product { + id: string; + name: string; + description: string; + price: number; + category: string; + image: string; + stock: number; + featured?: boolean; +} + +// Cart item type +interface CartItem extends Product { + quantity: number; +} + +// Sample products - Privacy/Security themed +const PRODUCTS: Product[] = [ + { + id: "1", + name: "ZK-Proof Shield Pro", + description: "Advanced zero-knowledge proof generation for maximum transaction privacy", + price: 0.5, + category: "Privacy Tools", + image: "🛡️", + stock: 15, + featured: true + }, + { + id: "2", + name: "Stealth Wallet Premium", + description: "Hardware wallet with military-grade encryption and privacy features", + price: 1.2, + category: "Hardware", + image: "🔐", + stock: 8, + featured: true + }, + { + id: "3", + name: "Privacy Mixer Credits", + description: "10,000 credits for transaction mixing and anonymization", + price: 0.25, + category: "Credits", + image: "💎", + stock: 100, + featured: false + }, + { + id: "4", + name: "Forensic Scanner License", + description: "1-year license for advanced blockchain forensic analysis", + price: 2.0, + category: "Software", + image: "🔍", + stock: 50, + featured: true + }, + { + id: "5", + name: "Anonymous VPN Service", + description: "Premium VPN with no-log policy and Tor integration", + price: 0.15, + category: "Services", + image: "🌐", + stock: 200, + featured: false + }, + { + id: "6", + name: "Encrypted Storage Drive", + description: "1TB hardware-encrypted storage for sensitive data", + price: 0.8, + category: "Hardware", + image: "💾", + stock: 12, + featured: false + }, + { + id: "7", + name: "Tactical Training Course", + description: "Complete privacy operations training (20 hours)", + price: 3.5, + category: "Education", + image: "📚", + stock: 30, + featured: false + }, + { + id: "8", + name: "Shadow Network Access", + description: "3-month access to decentralized shadow network", + price: 1.5, + category: "Services", + image: "⚡", + stock: 25, + featured: true + }, + { + id: "9", + name: "Privacy Audit Kit", + description: "Complete toolkit for conducting privacy audits", + price: 0.65, + category: "Privacy Tools", + image: "🔬", + stock: 40, + featured: false + }, + { + id: "10", + name: "Secure Communication Suite", + description: "End-to-end encrypted messaging and file sharing", + price: 0.45, + category: "Software", + image: "📱", + stock: 75, + featured: false + }, + { + id: "11", + name: "Crypto Tumbler Service", + description: "50 transaction privacy enhancement credits", + price: 0.35, + category: "Credits", + image: "🌀", + stock: 150, + featured: false + }, + { + id: "12", + name: "Privacy Passport Premium", + description: "Lifetime access to privacy scoring and monitoring", + price: 5.0, + category: "Services", + image: "🎫", + stock: 10, + featured: true + } +]; + +const CATEGORIES = ["All", "Privacy Tools", "Hardware", "Software", "Services", "Credits", "Education"]; + +export default function EShopPage() { + // Search and filter state + const [searchQuery, setSearchQuery] = useState(""); + const [selectedCategory, setSelectedCategory] = useState("All"); + const [showFilters, setShowFilters] = useState(false); + const [priceRange, setPriceRange] = useState<[number, number]>([0, 10]); + const [sortBy, setSortBy] = useState<"name" | "price-low" | "price-high" | "featured">("featured"); + + // Cart state + const [cart, setCart] = useState([]); + const [showCart, setShowCart] = useState(false); + + // Filter and sort products + const filteredProducts = useMemo(() => { + let filtered = PRODUCTS.filter(product => { + const matchesSearch = product.name.toLowerCase().includes(searchQuery.toLowerCase()) || + product.description.toLowerCase().includes(searchQuery.toLowerCase()); + const matchesCategory = selectedCategory === "All" || product.category === selectedCategory; + const matchesPrice = product.price >= priceRange[0] && product.price <= priceRange[1]; + + return matchesSearch && matchesCategory && matchesPrice; + }); + + // Sort products + filtered.sort((a, b) => { + switch (sortBy) { + case "name": + return a.name.localeCompare(b.name); + case "price-low": + return a.price - b.price; + case "price-high": + return b.price - a.price; + case "featured": + return (b.featured ? 1 : 0) - (a.featured ? 1 : 0); + default: + return 0; + } + }); + + return filtered; + }, [searchQuery, selectedCategory, priceRange, sortBy]); + + // Cart functions + const addToCart = (product: Product) => { + setCart(prev => { + const existing = prev.find(item => item.id === product.id); + if (existing) { + if (existing.quantity >= product.stock) { + return prev; // Don't add if at stock limit + } + return prev.map(item => + item.id === product.id + ? { ...item, quantity: item.quantity + 1 } + : item + ); + } + return [...prev, { ...product, quantity: 1 }]; + }); + }; + + const removeFromCart = (productId: string) => { + setCart(prev => prev.filter(item => item.id !== productId)); + }; + + const updateQuantity = (productId: string, delta: number) => { + setCart(prev => { + return prev.map(item => { + if (item.id === productId) { + const newQuantity = Math.max(0, Math.min(item.stock, item.quantity + delta)); + return { ...item, quantity: newQuantity }; + } + return item; + }).filter(item => item.quantity > 0); + }); + }; + + const cartTotal = useMemo(() => { + return cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); + }, [cart]); + + const cartItemCount = useMemo(() => { + return cart.reduce((sum, item) => sum + item.quantity, 0); + }, [cart]); + + return ( +
+ {/* Background Effects */} +
+
+
+ + {/* Header */} +
+
+
+ +
+
+

SolVoid Store

+

Privacy Tools & Services

+
+
+ + {/* Cart Button */} + +
+ +
+ {/* Search and Filters */} +
+ {/* Search Bar */} +
+ + setSearchQuery(e.target.value)} + className="w-full pl-12 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder:text-white/30 focus:outline-none focus:border-tactical-cyan/50 transition-colors" + /> +
+ + {/* Filter Controls */} +
+ + + {/* Category Pills */} +
+ {CATEGORIES.map(category => ( + + ))} +
+ + {/* Sort Dropdown */} + +
+ + {/* Extended Filters */} + + {showFilters && ( + +
+
+
+ Price Range: {priceRange[0]} - {priceRange[1]} SOL +
+
+ { + const newMin = parseFloat(e.target.value); + setPriceRange([newMin, Math.max(newMin, priceRange[1])]); + }} + aria-label="Minimum price" + className="flex-1" + /> + { + const newMax = parseFloat(e.target.value); + setPriceRange([Math.min(priceRange[0], newMax), newMax]); + }} + aria-label="Maximum price" + className="flex-1" + /> +
+
+
+ + )} + +
+ + {/* Product Grid */} +
+ + {filteredProducts.map(product => ( + + {product.featured && ( +
+ FEATURED +
+ )} + + {/* Product Image */} +
+ {product.image} +
+ + {/* Product Info */} +
+

{product.name}

+

{product.description}

+ +
+
+
{product.price} SOL
+
+ {product.stock > 0 ? `${product.stock} in stock` : "Out of stock"} +
+
+ + +
+
+ + ))} + +
+ + {/* No Results */} + {filteredProducts.length === 0 && ( +
+ +

No Products Found

+

Try adjusting your search or filters

+
+ )} +
+ + {/* Shopping Cart Sidebar */} + + {showCart && ( + <> + {/* Backdrop */} + setShowCart(false)} + className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40" + /> + + {/* Cart Panel */} + + {/* Cart Header */} +
+
+ +

Shopping Cart

+
+ +
+ + {/* Cart Items */} +
+ {cart.length === 0 ? ( +
+ +

Your cart is empty

+
+ ) : ( + cart.map(item => ( + +
+
+ {item.image} +
+
+

{item.name}

+

{item.price} SOL

+ +
+ + {item.quantity} + + +
+
+
+ + )) + )} +
+ + {/* Cart Footer */} + {cart.length > 0 && ( +
+
+ Total: + {cartTotal.toFixed(2)} SOL +
+ +

+ All transactions are secured with zero-knowledge proofs +

+
+ )} + + + )} + +
+ ); +}