import React, { useState, useEffect, useRef } from 'react'; // ============================================================================ // STYLES (Embedded for a single file) // ============================================================================ const StyleInjector = () => ( ); // ============================================================================ // PROFESSIONAL SVG ICONS // ============================================================================ function LogoIcon() { return ( ); } function MenuIcon() { return ( ); } function SearchIcon() { return ( ); } function WishlistIcon() { return ( ); } function BagIcon() { return ( ); } function ChatIcon() { return ( ); } function CloseIcon() { return ( ); } function PlusIcon() { return ( ); } function MinusIcon() { return ( ); } function SendIcon() { return ( ); } function SmallCartIcon() { return ( ); } // ============================================================================ // ADMIN ICONS (Re-added) // ============================================================================ function DashboardIcon() { return } function UsersIcon() { return } function AdminShoppingBagIcon() { return } function BoxIcon() { return } function TagIcon() { return } function FileTextIcon() { return } function MessageSquareIcon() { return } function EditIcon() { return } function TicketIcon() { return } function DollarSignIcon() { return } function AwardIcon() { return } function SettingsIcon() { return } // --- NEW: More Admin Icons --- function HeatmapIcon() { return ; } function SendNotificationIcon() { return ; } function EmailIcon() { return ; } function UploadIcon() { return ; } function DownloadIcon() { return ; } function ViewIcon() { return ; } function DeleteIcon() { return ; } function SeoIcon() { return ; } function CalendarIcon() { return ; } function ProductIcon() { return ; } function LinkIcon() { return ; } function ChevronLeftIcon() { return ; } function ChevronRightIcon() { return ; } function ColorSwatchIcon() { return ; } function RulerIcon() { return ; } // ============================================================================ // NEW: Loader Components // ============================================================================ /** * A full-page loading indicator. */ function PageLoader() { return (
Loading...
); } /** * A smaller loading indicator for image containers. */ function ImageLoader() { return (
Loading...
); } // ============================================================================ // ADMIN LOGIN PAGE (Re-added) // ============================================================================ function AdminLogin({ onLogin, onViewHome }) { const [username, setUsername] = useState('') const [password, setPassword] = useState('') const [error, setError] = useState('') const handleLogin = (e) => { e.preventDefault() // Admin 1: Talha / Tabraiz@123 // Admin 2: Mona / Talha@123 if ((username === 'Talha' && password === 'Tabraiz@123') || (username === 'Mona' && password === 'Talha@123')) { onLogin(username); } else { setError('Invalid credentials') } } return (
🔐

Admin Login

Talha Mona Management

setUsername(e.target.value)} className="input-field" />
setPassword(e.target.value)} className="input-field" />
{error && (
{error}
)}
Demo: Talha / Tabraiz@123
Demo: Mona / Talha@123
) } // ============================================================================ // ADMIN DASHBOARD (Re-added) // ============================================================================ function AdminDashboard({ user, onLogout, onViewHome }) { const [activeTab, setActiveTab] = useState('dashboard'); const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false); // NEW // --- All detailed states are now managed inside their respective components --- const tabs = [ { id: 'dashboard', label: 'Dashboard', icon: DashboardIcon }, { id: 'crm', label: 'CRM', icon: UsersIcon }, { id: 'orders', label: 'Orders', icon: AdminShoppingBagIcon }, { id: 'products', label: 'Products', icon: BoxIcon }, { id: 'sale', label: 'Sale Config', icon: TagIcon }, { id: 'documents', label: 'Documents', icon: FileTextIcon }, { id: 'chat', label: 'Chat', icon: MessageSquareIcon }, { id: 'blog', label: 'Blog', icon: EditIcon }, { id: 'promo', label: 'Promo Codes', icon: TicketIcon }, { id: 'finance', label: 'Finance', icon: DollarSignIcon }, { id: 'loyalty', label: 'Loyalty', icon: AwardIcon }, { id: 'settings', label: 'Settings', icon: SettingsIcon } ]; const sidebarWidth = isSidebarCollapsed ? '70px' : '260px'; return (

{tabs.find(t => t.id === activeTab)?.label}

{activeTab === 'dashboard' && } {activeTab === 'crm' && } {activeTab === 'orders' && } {activeTab === 'products' && } {activeTab === 'sale' && } {activeTab === 'documents' && } {activeTab === 'chat' && } {activeTab === 'blog' && } {activeTab === 'promo' && } {activeTab === 'finance' && } {activeTab === 'loyalty' && } {activeTab === 'settings' && }
) } // --- NEW MOCK CHART COMPONENTS (Re-added) --- const MockBarChart = () => (
); const MockPieChart = () => (
); const MockHeatmap = () => (
{Array.from({ length: 84 }).map((_, i) => (
))}
); // --- UPDATED ADMIN COMPONENTS (Re-added) --- // STAGE 1: Dashboard (Re-added) function DashboardContent() { const [filter, setFilter] = useState('Monthly'); const stats = [ { label: 'Today Revenue', value: 'PKR 45,230', change: '+12%', color: 'var(--tm-accent)' }, { label: 'Total Orders', value: '342', change: '+8%', color: 'var(--tm-green)' }, { label: 'New Customers', value: '28', change: '+23%', color: 'var(--tm-yellow)' }, { label: 'Active Chats', value: '12', change: '+5%', color: 'var(--tm-red)' } ]; const recentOrders = [ { id: 'TM-1234', customer: 'Sarah Ahmed', total: 11050, status: 'Processing' }, { id: 'TM-1233', customer: 'Ali Hassan', total: 8500, status: 'Shipped' }, { id: 'TM-1232', customer: 'Fatima Khan', total: 19200, status: 'Delivered' } ]; return (
{stats.map((stat, i) => (
{stat.label}
{stat.value}
{stat.change} from yesterday
))}
{['Weekly', 'Monthly', 'Yearly'].map(f => ( ))}

Sales Overview ({filter})

Top Products ({filter})

Recent Orders

{recentOrders.map((order, i) => ( ))}
Order ID Customer Total Status
{order.id} {order.customer} PKR {order.total.toLocaleString()} {order.status}
); } // STAGE 1: CRM (Re-added) function CRMContent() { const [selectedCustomer, setSelectedCustomer] = useState(null); const [heatmapFilter, setHeatmapFilter] = useState('Weekly'); const customers = [ { id: 1, name: 'Sarah Ahmed', email: 'sarah@example.com', segment: 'Active', totalSpent: 45000, orders: 12, phone: '+92 300 1234567', loyaltyPoints: 4500 }, { id: 2, name: 'Ali Hassan', email: 'ali@example.com', segment: 'High-Value', totalSpent: 125000, orders: 28, phone: '+92 321 9876543', loyaltyPoints: 12500 } ]; if (selectedCustomer) { return (

{selectedCustomer.name}

{selectedCustomer.email} {selectedCustomer.phone}
Total Spent
PKR {selectedCustomer.totalSpent.toLocaleString()}
Total Orders
{selectedCustomer.orders}
Loyalty Points
{selectedCustomer.loyaltyPoints.toLocaleString()}

Order History

[List of recent orders for this customer would appear here]

); } return (

Customer Activity Heatmap

{['Weekly', 'Monthly', 'Yearly'].map(f => ( ))}

Customer Profiles

{customers.map((c, i) => ( ))}
Customer Segment Total Spent Actions
{c.name}
{c.email}
 {c.segment} PKR {c.totalSpent.toLocaleString()}
); } // STAGE 2: Orders (Re-added) function OrdersContent() { const [selectedOrder, setSelectedOrder] = useState(null); const orders = [ { id: 'TM-1234', customer: 'Sarah Ahmed', email: 'sarah@example.com', phone: '+92 300 1234567', items: 3, subtotal: 12000, discount: 1200, shipping: 250, total: 11050, status: 'Processing', paymentMethod: 'COD', paymentStatus: 'Pending', date: '2025-11-12', invoiceNo: 'INV-001234', trackingNo: '', address: 'House 123, Street 5, DHA Phase 6, Lahore', isNew: true }, { id: 'TM-1233', customer: 'Ali Hassan', email: 'ali@example.com', phone: '+92 321 9876543', items: 2, subtotal: 8500, discount: 0, shipping: 0, total: 8500, status: 'Shipped', paymentMethod: 'Card', paymentStatus: 'Paid', date: '2025-11-10', invoiceNo: 'INV-001233', trackingNo: 'TCS123456789', address: 'Flat 45, Tower B, Emaar Heights, Karachi', isNew: false }, { id: 'TM-1232', customer: 'Fatima Khan', email: 'fatima@example.com', phone: '+92 333 5555555', items: 5, subtotal: 24000, discount: 4800, shipping: 0, total: 19200, status: 'Delivered', paymentMethod: 'Bank Transfer', paymentStatus: 'Paid', date: '2025-11-08', invoiceNo: 'INV-001232', trackingNo: 'TCS987654321', address: 'House 67, F-7/2, Islamabad', isNew: false } ]; const [currentStatus, setCurrentStatus] = useState(selectedOrder?.status || 'Processing'); if (selectedOrder) { return (

Order {selectedOrder.id}

Placed on {selectedOrder.date}

{selectedOrder.status}
{/* Customer Info */}

Customer Information

Name: {selectedOrder.customer}
Email: {selectedOrder.email}
Phone: {selectedOrder.phone}
Payment: {selectedOrder.paymentMethod}
Shipping Address:
{selectedOrder.address}
{/* Order Items */}

Order Items (3)

{/* Mock items */}
Product Qty Total
Product
Embroidered Lawn Kurta
SKU: TM-LW-001
 1 PKR 4,990
Product
Silk Tunic - Ruby Red
SKU: TM-SLK-045
 2 PKR 14,900
{/* Order Summary */}
Subtotal: PKR {selectedOrder.subtotal.toLocaleString()}
Discount: - PKR {selectedOrder.discount.toLocaleString()}
Shipping: PKR {selectedOrder.shipping.toLocaleString()}
Total: PKR {selectedOrder.total.toLocaleString()}
{/* Actions Sidebar */}

Update Status

Tracking Number

); } return (
{orders.map((order, i) => ( ))}
Order ID Customer Total Status Date Actions
{order.isNew && } {order.id} {order.customer} PKR {order.total.toLocaleString()} {order.status} {order.date}
); } // STAGE 2: Products (Re-added) function ProductsContent() { const [selectedProduct, setSelectedProduct] = useState(null); const [showAddProduct, setShowAddProduct] = useState(false); const [viewMode, setViewMode] = useState('grid'); const products = [ { id: 1, name: 'Embroidered Lawn Kurta', sku: 'TM-LAW-001', category: 'Women > Tops', price: 4990, salePrice: 3992, productionCost: 2500, stock: 45, sizes: ['S', 'M', 'L', 'XL'], colors: [{name: 'Beige', code: '#f5f5dc'}, {name: 'Pink', code: '#ffc0cb'}], images: ['https://placehold.co/400x533/f3f4f6/6b7280?text=Talha+Mona+1'], visible: true, discount: 20 }, { id: 2, name: 'Silk Tunic - Ruby Red', sku: 'TM-SLK-045', category: 'Women > Festive', price: 7450, salePrice: 6332, productionCost: 3800, stock: 12, sizes: ['S', 'M', 'L'], colors: [{name: 'Red', code: '#FF0000'}], images: ['https://placehold.co/400x533/f3f4f6/6b7280?text=Talha+Mona+2'], visible: true, discount: 15 }, { id: 4, name: 'Classic Khussa', sku: 'TM-SHO-089', category: 'Women > Footwear', price: 3200, salePrice: 2560, productionCost: 1800, stock: 3, sizes: ['38', '39', '40'], colors: [{name: 'Gold', code: '#FFD700'}], images: ['https://placehold.co/400x533/f3f4f6/6b7280?text=Talha+Mona+3'], visible: false, discount: 20 } ]; if (showAddProduct || selectedProduct) { return { setShowAddProduct(false); setSelectedProduct(null); }} />; } return (
{viewMode === 'grid' ? (
{products.map(product => (
{product.visible ? 'Visible' : 'Hidden'}
{product.name}
{product.name}
{product.sku}
{product.category}
PKR {product.salePrice.toLocaleString()}
{product.stock} in stock
))}
) : (
{/* List view table would go here, similar to Orders table */}

List view not yet implemented in this mock.

)}
); } // --- NEW: Detailed Product Editor Component (Re-added) --- function ProductEditor({ product, onBack }) { const [colors, setColors] = useState(product?.colors || []); const [newColorName, setNewColorName] = useState(''); const [newColorCode, setNewColorCode] = useState('#000000'); const addColor = () => { if (newColorName && newColorCode) { setColors([...colors, { name: newColorName, code: newColorCode }]); setNewColorName(''); setNewColorCode('#000000'); } }; return (

{product ? 'Edit Product' : 'Add New Product'}

{/* Basic Info */}

Basic Information

{/* Images */}

Images

Drag & drop or click to upload
1200x1600px recommended
{/* Image previews would go here */}
{/* Variants (Colors & Sizes) */}

Variants

{/* Colors */}
{colors.map((c, i) => (
{c.name}
))}
setNewColorName(e.target.value)} className="input-field" style={{ flex: 1 }} /> setNewColorCode(e.target.value)} className="input-field" style={{ padding: '0.25rem', width: '50px' }} />
{/* Sizes */}
{/* Pricing */}

Pricing

{/* Inventory */}

Inventory

{/* Organization */}

Organization

); } // STAGE 2: Sale Config (Re-added) function SaleConfigContent() { const [flashSaleEnabled, setFlashSaleEnabled] = useState(true); const [flashSaleDiscount, setFlashSaleDiscount] = useState(20); const [autoSale, setAutoSale] = useState(false); return (

Flash Sale Settings

Enable Flash Sale
Show flash sale banner on homepage
setFlashSaleDiscount(e.target.value)} min="0" max="100" className="input-field" />

Automations

New User Auto-Sale
Start a random 1-3 day flash sale for new visitors.
); } // STAGE 3: Documents (Re-added) function DocumentsContent() { const userDocs = [ { id: 1, name: 'Company_Policies.pdf', status: 'Ready', size: '2.4 MB' }, { id: 2, name: 'Product_Catalog_2024.docx', status: 'Ready', size: '5.8 MB' } ]; const aiDocs = [ { name: 'live_inventory.csv', updated: 'Auto-updated every 15 mins' }, { name: 'live_orders.csv', updated: 'Auto-updated in real-time' }, { name: 'live_invoices.csv', updated: 'Auto-updated in real-time' } ]; return (

📚 Train Your AI Chatbot

Upload documents to train the AI. AI will access all documents below.

{/* Live AI Data (Read-Only) */}

Live AI Data (Read-Only)

{aiDocs.map((doc, i) => (
{doc.name}
{doc.updated}
))}
{/* User Uploaded Documents */}

Uploaded Knowledge Base

Drag & drop or click to upload (DOCX, PDF, TXT)
{userDocs.map((doc, i) => ( ))}
Document Size Status Actions
{doc.name} {doc.size} {doc.status}
); } // STAGE 3: Chat (Re-added) function ChatManagementContent() { const [selectedChat, setSelectedChat] = useState(null); const [aiEnabled, setAiEnabled] = useState(true); const chats = [ { id: 1, customer: 'Sarah Ahmed', lastMessage: 'Can I return this item?', time: '2 min ago', email: 'sarah@example.com', phone: '+92 300 1234567' }, { id: 2, customer: 'Ali Hassan', lastMessage: 'What sizes are available?', time: '15 min ago', email: 'ali@example.com', phone: '+92 321 9876543' } ]; return (
{chats.map((chat, i) => (
setSelectedChat(chat)} style={{ padding: '1rem', borderBottom: '1px solid var(--tm-border)', cursor: 'pointer', background: selectedChat?.id === chat.id ? 'var(--tm-light)' : 'white' }}>
{chat.customer}
{chat.lastMessage}
{chat.time}
))}
{selectedChat ? ( <>
{selectedChat.customer}
{selectedChat.email} | {selectedChat.phone}
{/* Mock Chat Messages */}
{selectedChat.lastMessage}
This is an agent's reply.
) : (
Select a conversation
)}
) } // STAGE 3: Blog (Re-added) function BlogContent() { const [showEditor, setShowEditor] = useState(false); const [selectedPost, setSelectedPost] = useState(null); const posts = [ { id: 1, title: 'Modest Fashion Trends 2025', status: 'Published', views: 1250, seoScore: 92 }, { id: 2, title: 'How to Style Your Hijab', status: 'Published', views: 890, seoScore: 88 }, { id: 3, title: 'New Winter Collection', status: 'Scheduled', views: 0, seoScore: 75 } ]; if (showEditor || selectedPost) { const post = selectedPost; // In a real app, `showEditor` would mean a new post return (

Embed Content

Incorporate products or links directly into your post.

Publishing

SEO Settings

); } return (
{posts.map((post, i) => ( ))}
Title Status Views SEO Actions
{post.title} {post.status} {post.views.toLocaleString()} 90 ? 'var(--tm-green)' : 'var(--tm-yellow)' }}>{post.seoScore}
); } // STAGE 4: Promo Codes (Re-added) function PromoCodesContent() { const [selectedPromo, setSelectedPromo] = useState(null); const [showAddPromo, setShowAddPromo] = useState(false); const promos = [ { code: 'FLASH15', discount: 15, uses: 234, type: 'Percentage', status: 'Active' }, { code: 'WELCOME10', discount: 10, uses: 89, type: 'Percentage', status: 'Active' }, { code: 'OLD2024', discount: 20, uses: 512, type: 'Percentage', status: 'Expired' } ]; if (showAddPromo || selectedPromo) { return (

{selectedPromo ? 'Edit Promo Code' : 'Create Promo Code'}

Send Notification

Notify customers about this promo code.

); } return (
{promos.map((p, i) => ( ))}
Code Type Discount Uses Status Actions
{p.code} {p.type} {p.discount}% {p.uses} {p.status}
); } // STAGE 4: Finance (Re-added) function FinanceContent() { const [period, setPeriod] = useState('Monthly'); const transactions = [ { id: 'TM-1234', date: '2025-11-12', customer: 'Sarah Ahmed', amount: 11050, status: 'Paid' }, { id: 'TM-1233', date: '2025-11-10', customer: 'Ali Hassan', amount: 8500, status: 'Paid' }, { id: 'TM-1232', date: '2025-11-08', customer: 'Fatima Khan', amount: 19200, status: 'Paid' } ]; return (
Total Revenue
PKR 2.4M
Gross Profit
PKR 980K
Net Profit
PKR 720K
Profit Margin
30%

Recent Transactions

{transactions.map((t, i) => ( ))}
Order ID Date Customer Amount Status
{t.id} {t.date} {t.customer} PKR {t.amount.toLocaleString()} {t.status}
); } // STAGE 4: Loyalty (Re-added) function LoyaltyContent() { return (
Points Issued
245K
Points Redeemed
89K
Active Members
3,420

Loyalty Settings

Loyalty Tiers

{/* Bronze Tier */}
🥉
Bronze
0 - 10,000 pts
{/* Silver Tier */}
🥈
Silver
10,001 - 50,000 pts
{/* Gold Tier */}
🥇
Gold
50,001+ pts
); } // STAGE 4: Settings (Re-added) function SettingsContent() { return (

API Keys

System Toggles

Enable AI Chat
Allow AI to respond to customer chats.
Enable Blog Auto-posting
Allow scheduled blog posts to be published automatically.
Enable Loyalty Program
Allow customers to earn and redeem points.
); } // ============================================================================ // NEW: Loyalty Page Component // ============================================================================ function LoyaltyPage({ onViewHome }) { return ( // REMOVED: Internal minimal header. This page now uses the main persistent header.
{/* Hero Section */}

Join Our Loyalty Program

Earn points on every purchase and get exclusive rewards. New users get 500 points just for signing up!

{/* How it works Section */}

How It Works

1.

Sign Up

Create an account and instantly receive 500 bonus points.

2.

Earn Points

Get 1 point for every 1 PKR spent. Earn bonus points for referrals and reviews.

3.

Redeem

Use your points at checkout for discounts on future orders.

{/* Referral Section */}

Refer a Friend!

Share your unique referral link. When your friend makes their first purchase, you BOTH get 1000 bonus points!

You can exchange your referral points for currency, while invited users can use their points for store discounts.

{/* Footer */}
Talha Mona

Premium modest fashion

Shop
Women
Men
Kids
Fragrances
Support
Contact Us
Shipping
Returns
Loyalty Program
Legal
Privacy Policy
Terms of Service
© 2025 Talha Mona. All rights reserved.
); } // ============================================================================ // NEW: Menu Search Component // ============================================================================ function MenuSearch() { return (
); } // ============================================================================ // NEW: Recursive Menu Category Component // ============================================================================ function CategoryItem({ category, level = 0, onClick }) { const [isOpen, setIsOpen] = useState(false); const hasSub = category.sub && category.sub.length > 0; const handleClick = (e) => { e.stopPropagation(); if (onClick) { onClick(); } else if (hasSub) { setIsOpen(!isOpen); } }; return (
0 ? 'var(--tm-gray)' : 'var(--tm-primary)', borderBottom: level === 0 ? '1px solid var(--tm-border)' : 'none', background: level > 0 && isOpen ? 'var(--tm-light)' : 'transparent' }} > {category.name} {hasSub && ( {isOpen ? : } )}
{hasSub && isOpen && (
{category.sub.map((subItem, index) => ( ))}
)}
); } // ============================================================================ // NEW: Medium Product Card (for search suggestions) // ============================================================================ function ProductCardSearch({ product, convertPrice }) { const finalPrice = product.discount > 0 ? product.price * (1 - product.discount / 100) : product.price; const [isImageLoading, setIsImageLoading] = useState(true); return (
e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.08)'} onMouseOut={(e) => e.currentTarget.style.boxShadow = 'none'} > {/* Product Images */}
{isImageLoading && } {product.name} setIsImageLoading(false)} onError={() => setIsImageLoading(false)} style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', objectFit: 'cover', display: isImageLoading ? 'none' : 'block' }} />
{/* Product Info */}
{product.name}
{/* Colors */}
{product.colors.map((color, i) => (
))}
{/* Sizes */}
{product.sizes.map((size, i) => { const available = product.availableSizes.includes(size); return (
{size}
) })}
{/* Price */}
{convertPrice(finalPrice)} {product.discount > 0 && ( {convertPrice(product.price)} )}
); } // ============================================================================ // NEW: Main Header Component // ============================================================================ function MainHeader({ menuOpen, searchOpen, onToggleMenu, onToggleSearch, onViewHome, onViewLoyalty, currency, setCurrency, wishlist, cart, categories }) { return ( <>
{/* 1. Left Side (Menu + Logo) */}
{/* 3-Line Menu Button (Forced Visible) */} {/* Logo + Name (Moved to Left) */}
Talha Mona
{/* 2. CENTER (Desktop Nav) */} {/* 3. RIGHT SIDE (Icons) */}
{wishlist.length > 0 && ( {wishlist.length} )}
{cart.length > 0 && ( {cart.length} )}
{/* Search Panel (Unchanged) */} {searchOpen && (
You might be interested in
{/* This uses dummy data, in real app you'd fetch this */} `PKR ${p.toLocaleString()}`} /> `PKR ${p.toLocaleString()}`} /> `PKR ${p.toLocaleString()}`} />
)}
{/* Menu Sidebar (Unchanged) */} {menuOpen && ( <>
{categories.map((cat, index) => ( ))}
)} ); } // ============================================================================ // NEW: Product Detail View // ============================================================================ function ProductDetailView({ product, onClose, convertPrice, onAddToCart }) { const [currentImage, setCurrentImage] = useState(0); const [selectedSize, setSelectedSize] = useState(null); const [selectedColor, setSelectedColor] = useState(product.colors[0]); const finalPrice = product.discount > 0 ? product.price * (1 - product.discount / 100) : product.price; const handleAddToCart = () => { if (!selectedSize) { // In a real app, show a user-friendly error console.log("Please select a size"); return; } onAddToCart({ ...product, selectedSize, selectedColor }); onClose(); }; return (
{/* Backdrop */}
{/* Modal Content */}
{/* Close Button */} {/* Image Gallery */}
{`${product.name}
{product.images.map((imgSrc, i) => ( {`Thumbnail setCurrentImage(i)} style={{ width: '60px', height: '80px', objectFit: 'cover', borderRadius: '4px', cursor: 'pointer', border: i === currentImage ? '2px solid var(--tm-primary)' : '2px solid transparent', opacity: i === currentImage ? 1 : 0.7 }} /> ))}
{/* Product Info */}
SKU: {product.sku}

{product.name}

{/* Price */}
{convertPrice(finalPrice)} {product.discount > 0 && ( {convertPrice(product.price)} )} {product.discount > 0 && ( -{product.discount}% )}
{/* Colors */}
Color: {selectedColor}
{product.colors.map((color, i) => (
setSelectedColor(color)} style={{ width: '32px', height: '32px', borderRadius: '50%', background: color, border: '2px solid var(--tm-border)', cursor: 'pointer', boxShadow: selectedColor === color ? '0 0 0 3px var(--tm-primary)' : 'none' }} /> ))}
{/* Sizes */}
Size:
{product.sizes.map((size, i) => { const available = product.availableSizes.includes(size); return ( ) })}
{/* Add to Cart Button */}
); } // ============================================================================ // HOMEPAGE (UPDATED with new view state and product detail modal) // ============================================================================ function HomePage({ onViewAdmin, // Re-added onViewLoyalty, wishlist, setWishlist, cart, setCart, // Re-added convertPrice, products, categories, setHomeView, // NEW homeView // NEW }) { const [chatOpen, setChatOpen] = useState(false) const [chatStep, setChatStep] = useState(1) const [chatData, setChatData] = useState({ name: '', email: '', phone: '', agreed: false }) const [selectedProduct, setSelectedProduct] = useState(null) const [chatInput, setChatInput] = useState(''); const [chatMessages, setChatMessages] = useState([]); // Flash sale countdown const [countdown, setCountdown] = useState(null); const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0 }) useEffect(() => { // This code now only runs on the client const stored = localStorage.getItem('flashSaleEnd'); let endDate; if (stored) { endDate = new Date(stored); if (new Date() > endDate) { endDate = null; // force reset } } if (!endDate) { // NEW: Randomize hours (24-71) and minutes (0-59) const hours = Math.floor(Math.random() * 48) + 24; const minutes = Math.floor(Math.random() * 60); endDate = new Date(Date.now() + (hours * 60 * 60 * 1000) + (minutes * 60 * 1000)); localStorage.setItem('flashSaleEnd', endDate.toISOString()); } setCountdown(endDate); }, []); // Empty dependency array means this runs once on mount useEffect(() => { if (!countdown) return; const timer = setInterval(() => { const now = new Date() const diff = countdown - now if (diff > 0) { setTimeLeft({ days: Math.floor(diff / (1000 * 60 * 60 * 24)), hours: Math.floor((diff / (1000 * 60 * 60)) % 24), minutes: Math.floor((diff / (1000 * 60)) % 60), seconds: Math.floor((diff / 1000) % 60) }) } else { setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 }); clearInterval(timer); } }, 1000) return () => clearInterval(timer) }, [countdown]) const handleSendChat = () => { if (chatInput.trim() === '') return; const newMessages = [...chatMessages, { sender: 'user', text: chatInput }]; // Mock AI response setTimeout(() => { setChatMessages([ ...newMessages, { sender: 'ai', text: "Thank you for your message. An agent will be with you shortly." } ]); }, 1000); setChatMessages(newMessages); setChatInput(''); }; const startChat = () => { if (chatStep === 1 && chatData.name && chatData.email && chatData.phone && chatData.agreed) { setChatMessages([ { sender: 'ai', text: `Assalam o Alaikum, ${chatData.name}! How can we help you today?` } ]); setChatStep(2); } }; const internalToggleWishlist = (productId) => { if (wishlist.includes(productId)) { setWishlist(wishlist.filter(id => id !== productId)) } else { setWishlist([...wishlist, productId]) } } const handleAddToCart = (productToAdd) => { setCart([...cart, productToAdd]); // In a real app, you'd also handle quantity }; // Filter products based on the homeView const displayedProducts = products.filter(product => { if (homeView === 'new-in') { return product.isNew; } if (homeView === 'sale') { return product.discount > 0; } return true; // 'main' view shows all }); const getTitle = () => { if (homeView === 'new-in') return 'New Arrivals'; if (homeView === 'sale') return 'Sale Items'; return 'New Arrivals'; // Default for 'main' }; return (
{/* Floating Admin Button (Re-added) */} {/* Hero Section (Only on main view) */} {homeView === 'main' && (

Elegance in Modesty

Premium Pakistani Cultural Heritage with Islamic Values

)} {/* Flash Sale Countdown (Only on main view) */} {homeView === 'main' && (
FLASH SALE ENDS IN
{Object.entries(timeLeft).map(([unit, value]) => (
{String(value).padStart(2, '0')}
{unit}
))}
)} {/* --- PRODUCTS GRID (Dynamic Content) --- */}

{getTitle()}

{displayedProducts.length > 0 ? (
{displayedProducts.map(product => ( ))}
) : (
No products found in this category.
)}
{/* --- END OF DYNAMIC SECTION --- */} {/* Chat Button */} {/* Chat Modal */} {chatOpen && (
Chat with us
{chatStep === 1 && (
setChatData({...chatData, name: e.target.value})} placeholder="Name *" className="input-field" /> setChatData({...chatData, email: e.target.value})} placeholder="Email *" type="email" className="input-field" /> setChatData({...chatData, phone: e.target.value})} placeholder="Phone *" className="input-field" />
)} {chatStep === 2 && (
{chatMessages.map((msg, index) => (
{msg.text}
))}
setChatInput(e.target.value)} placeholder="Type a message..." className="input-field" onKeyPress={(e) => e.key === 'Enter' && handleSendChat()} />
)}
)} {/* Product Detail Modal */} {selectedProduct && ( setSelectedProduct(null)} convertPrice={convertPrice} onAddToCart={handleAddToCart} /> )} {/* Footer */}
Talha Mona

Premium modest fashion

Shop
Women
Men
Kids
Fragrances
Support
Contact Us
Shipping
Returns
Loyalty Program
FAQ
Legal
Privacy Policy
Terms of Service
© 2025 Talha Mona. All rights reserved.
) } // ============================================================================ // PRODUCT CARD (UPDATED with image loader) // ============================================================================ function ProductCard({ product, wishlist, toggleWishlist, convertPrice, setSelectedProduct }) { const [currentImage, setCurrentImage] = useState(0); const [dragStart, setDragStart] = useState(0); const [dragEnd, setDragEnd] = useState(0); const imgRef = useRef(null); const [isImageLoading, setIsImageLoading] = useState(true); const isWishlisted = wishlist.includes(product.id); const finalPrice = product.discount > 0 ? product.price * (1 - product.discount / 100) : product.price; const nextImage = (e) => { e.stopPropagation(); setCurrentImage((prev) => (prev + 1) % product.images.length); }; const prevImage = (e) => { e.stopPropagation(); setCurrentImage((prev) => (prev - 1 + product.images.length) % product.images.length); }; const handleMouseDown = (e) => { e.stopPropagation(); setDragStart(e.clientX); }; const handleMouseUp = (e) => { e.stopPropagation(); setDragEnd(e.clientX); handleSwipe(); }; const handleTouchStart = (e) => { e.stopPropagation(); setDragStart(e.touches[0].clientX); }; const handleTouchEnd = (e) => { e.stopPropagation(); // dragEnd is set by the last touchmove event, so we just call handleSwipe handleSwipe(); }; const handleTouchMove = (e) => { e.stopPropagation(); setDragEnd(e.touches[0].clientX); } const handleSwipe = () => { if (dragStart - dragEnd > 50) { // Swiped left setCurrentImage((prev) => (prev + 1) % product.images.length); } else if (dragEnd - dragStart > 50) { // Swiped right setCurrentImage((prev) => (prev - 1 + product.images.length) % product.images.length); } // Reset drag values setDragStart(0); setDragEnd(0); }; return (
e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.08)'} onMouseOut={(e) => e.currentTarget.style.boxShadow = 'none'} > {/* Discount/New Badge */}
0 ? 'var(--tm-red)' : 'var(--tm-green)', color: 'white', padding: '0.25rem 0.75rem', borderRadius: '0.5rem', fontSize: '12px', fontWeight: 'bold', zIndex: 10 }}> {product.discount > 0 ? `-${product.discount}%` : 'NEW'}
{/* Wishlist Heart */} {/* Product Images (with swipe) */}
setSelectedProduct(product)} > {isImageLoading && } {/* MOVED HERE: Small Cart Icon */} {product.name} setIsImageLoading(false)} onError={() => setIsImageLoading(false)} style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', objectFit: 'cover', userSelect: 'none', pointerEvents: 'none', display: isImageLoading ? 'none' : 'block' }} /> {product.images.length > 1 && (
{product.images.map((_, i) => (
)}
{/* Product Info */}
{product.sku}
setSelectedProduct(product)}>{product.name}
{/* Colors */}
{product.colors.map((color, i) => (
))}
{/* Sizes */}
{product.sizes.map((size, i) => { const available = product.availableSizes.includes(size) return (
{size}
) })}
{/* Price */}
{convertPrice(finalPrice)} {product.discount > 0 && ( {convertPrice(product.price)} )}
{/* REMOVED Add to Bag Button from here */}
) } // ============================================================================ // MAIN APP COMPONENT (Router - UPDATED) // ============================================================================ export default function App() { // 'home', 'login', 'dashboard', 'loyalty' const [page, setPage] = useState('home'); const [adminUser, setAdminUser] = useState(null); // Re-added // App loading state const [isLoading, setIsLoading] = useState(true); // Lifted state for persistent header const [menuOpen, setMenuOpen] = useState(false); const [searchOpen, setSearchOpen] = useState(false); const [currency, setCurrency] = useState('PKR'); const [wishlist, setWishlist] = useState([]); const [cart, setCart] = useState([]); // NEW: State for homepage view const [homeView, setHomeView] = useState('main'); // 'main', 'new-in', 'sale' // Currency rates (PKR base) - Lifted to App const rates = { PKR: 1, SAR: 0.013, AED: 0.013, USD: 0.0036, GBP: 0.0028 }; // convertPrice - Lifted to App const convertPrice = (price) => { const converted = price * rates[currency]; // Updated to format as PKR return `PKR ${converted.toLocaleString('en-US', { style: 'currency', currency: 'PKR', minimumFractionDigits: 0, maximumFractionDigits: 0 }).replace('PKR', '').trim()}`; }; // *** FIX: Moved product and category definitions up *** // Sample products - Lifted to App const products = [ { id: 1, name: 'Embroidered Lawn Suit', price: 6500, discount: 15, images: ['https://placehold.co/400x533/f3f4f6/6b7280?text=Talha+Mona+1', 'https://placehold.co/400x533/e5e7eb/6b7280?text=Talha+Mona+2', 'https://placehold.co/400x533/d1d5db/6b7280?text=Talha+Mona+3'], colors: ['#f5f5dc', '#ffc0cb', '#ffffff'], // Beige, Pink, White sizes: ['S', 'M', 'L', 'XL'], availableSizes: ['S', 'M', 'L'], sku: 'TM-LW-001', isNew: true // Set to true for "New In" }, { id: 2, name: 'Chiffon Dupatta Set', price: 3200, discount: 10, images: ['https://placehold.co/400x533/f3f4f6/6b7280?text=Talha+Mona+1', 'https://placehold.co/400x533/e5e7eb/6b7280?text=Talha+Mona+2', 'https://placehold.co/400x533/d1d5db/6b7280?text=Talha+Mona+3'], colors: ['#000000', '#000080', '#ffffff'], // Black, Navy, White sizes: ['One Size'], availableSizes: ['One Size'], sku: 'TM-CH-002', isNew: false }, { id: 3, name: 'Premium Hijab Collection', price: 1800, discount: 0, images: ['https://placehold.co/400x533/f3f4f6/6b7280?text=Talha+Mona+1', 'https://placehold.co/400x533/e5e7eb/6b7280?text=Talha+Mona+2', 'https://placehold.co/400x533/d1d5db/6b7280?text=Talha+Mona+3'], colors: ['#000000', '#f5f5dc', '#808080', '#000080'], // Black, Beige, Grey, Navy sizes: ['One Size'], availableSizes: ['One Size'], sku: 'TM-HJ-003', isNew: true }, { id: 4, name: 'Men\'s Classic Kurta', price: 4200, discount: 20, // Set discount for "Sale" images: ['https://placehold.co/400x533/f3f4f6/6b7280?text=Talha+Mona+1', 'https://placehold.co/400x533/e5e7eb/6b7280?text=Talha+Mona+2', 'https://placehold.co/400x533/d1d5db/6b7280?text=Talha+Mona+3'], colors: ['#ffffff', '#000000'], // White, Black sizes: ['S', 'M', 'L', 'XL', 'XXL'], availableSizes: ['S', 'M', 'L', 'XL', 'XXL'], sku: 'TM-MN-001', isNew: false } ]; // Categories - Lifted to App const categories = [ { name: 'Women', sub: [ { name: 'Ready to Wear', sub: [ { name: 'Co-ord Sets' }, { name: 'Tops & Kurtas' }, { name: 'Bottoms' }, { name: 'Dresses & Abayas' } ]}, { name: 'Unstitched', sub: [ { name: '2-Piece Suits' }, { name: '3-Piece Suits' }, { name: 'Single Shirts' } ]}, { name: 'Festive & Bridal', sub: [ { name: 'Party Wear' }, { name: 'Wedding & Bridal' } ]}, { name: 'Accessories (Women)', sub: [ { name: 'Jewelry' }, { name: 'Footwear' }, { name: 'Socks & Gloves' }, { name: 'Shawls & Stoles' }, { name: 'Mufflers' }, { name: 'Dupattas' }, { name: 'Capes' }, { name: 'Bags' } ]} ]}, { name: 'Men', sub: [ { name: 'Eastern Wear', sub: [ { name: 'Kurtas' }, { name: 'Pajama Kurta' }, { name: 'Waistcoats' } ]}, { name: 'Western Wear', sub: [ { name: 'Shirts' }, { name: 'Pants & Trousers' } ]}, { name: 'Accessories (Men)', sub: [ { name: 'Footwear' }, { name: 'Shawls' }, { name: 'Belts & Wallets' }, { name: "Watches & Cufflinks" }, { name: 'Ties' } ]} ]}, // NEW: Added top-level Accessories { name: 'Accessories', sub: [ { name: 'Jewelry' }, { name: 'Footwear (Women)' }, { name: 'Footwear (Men)' }, { name: 'Bags' }, { name: 'Shawls & Stoles' }, { name: 'Belts & Wallets' }, ]}, { name: 'Kids', sub: [ { name: 'Boys' }, { name: 'Girls' }, { name: 'Infants' } ]}, { name: 'Fragrances', sub: [ { name: 'Body Mist' }, { name: 'Eau De Parfum' }, { name: 'Gift Set' } ]}, { name: 'Loyalty Program', sub: [] }, { name: 'Sale', sub: [] } ]; // Simple session persistence for preview (Re-added) useEffect(() => { try { const auth = sessionStorage.getItem('admin_auth_preview'); const user = sessionStorage.getItem('admin_user_preview'); if (auth === 'true' && user) { setAdminUser(user); setPage('dashboard'); } } catch (e) { console.error("Session storage unavailable."); } // Simulate loading time const timer = setTimeout(() => { setIsLoading(false); }, 1000); // Show loader for 1 second return () => clearTimeout(timer); }, []); const handleLogin = (username) => { // Re-added try { sessionStorage.setItem('admin_auth_preview', 'true'); sessionStorage.setItem('admin_user_preview', username); } catch (e) { console.error("Session storage unavailable."); } setAdminUser(username); setPage('dashboard'); }; const handleLogout = () => { // Re-added try { sessionStorage.removeItem('admin_auth_preview'); sessionStorage.removeItem('admin_user_preview'); } catch (e) { console.error("Session storage unavailable."); } setAdminUser(null); setPage('login'); }; // Navigation handlers const showHome = (view = 'main') => { // Updated setPage('home'); setHomeView(view); // Set the specific home view setMenuOpen(false); setSearchOpen(false); }; const showLoyalty = () => { setPage('loyalty'); setHomeView('main'); setMenuOpen(false); setSearchOpen(false); }; const showLoginFromHome = () => { // Re-added setPage('login'); setMenuOpen(false); setSearchOpen(false); } const toggleMenu = () => { setMenuOpen(o => !o); setSearchOpen(false); // Close search when menu opens } const toggleSearch = () => { setSearchOpen(o => !o); setMenuOpen(false); // Close menu when search opens } return (
{isLoading && } {/* Persistent Header (not on login/dashboard) */} {page !== 'login' && page !== 'dashboard' && ( )} {/* Page Content */} {page === 'home' && ( )} {page === 'login' && showHome('main')} />} {page === 'dashboard' && showHome('main')} />} {page === 'loyalty' && showHome('main')} />}
); }