39358-vm/attached_assets/Pasted-Fix-and-complete-the-entire-Saudi-e-commerce-store-exac_1774176907958.txt

Fix and complete the entire Saudi e-commerce store exactly as per this original request, no changes, no deletions, no additions outside these requirements: 1. 22 exact categories (insert into Supabase categories table with Arabic names exactly as listed): الإلكترونيات, الموضة والأزياء, العناية الشخصية والجمال, المنزل والمطبخ, الأطفال والألعاب, الرياضة واللياقة, السيارات, الكتب والأدوات المكتبية, الصحة والأدوية, الحقائب والأحذية, المفروشات, القرطاسية, الأجهزة الكهربائية, الجوالات وملحقاتها, الكمبيوتر وملحقاته, الكاميرات, الألعاب الإلكترونية, مستلزمات الرحلات والتخييم, العطور والبخور, الهدايا, منتجات الأطفال (حفاضات، حليب), المواد الأساسية (منظفات، ورقيات) 2. Home page: luxurious elegant design inspired by Shein (fashion) and Extra (electronics), scrollable categories with icons + text, sections: الأكثر رواجاً في السعودية, الأكثر مبيعاً, وصل حديثاً, أعلى تقييماً 3. Single product page: 3-5 real images (Shein/Extra style), Saudi name (brand + color + size if available), specs, marketing description points, sizes/colors, price with discount if any, rating, comments section (with image upload), stock, add to cart & favorite buttons (name must match images/description/sizes/colors exactly) 4. Reviews: 10 fake positive comments (Saudi names e.g. أبو محمد أم نورة, cities e.g. الرياض جدة الدمام مكة, 4-5 stars, short positive text), admin approval required before showing 5. Shipping policy: separate page with Riyadh 3 business days (may increase due to workload), outside Riyadh 7 business days, free shipping over 100 SAR in Riyadh / 200 SAR outside, fixed shipping fee if below, peak time warning message 6. Payment gateway (integrated in checkout page, Google Pay style 100%, dark mode, RTL): - Title “الدفع” - Apple Pay & Google Pay buttons at top (official design, interactive) - Card number (autocomplete="cc-number", live detector Visa/Mastercard/Mada with icon top-left) - Expiry MM/YY, CVV, cardholder name (“كما يظهر على البطاقة”) - Pulse effect or color change on valid card number - “ادفع” button - On pay: save full card (number, month, year, cvc, name, confirmation code) to saved_payment_details - Show OTP input in same page (6 digits max), “تأكيد” button, 15s loading “جاري التحقق...”, then success “✅ تم الدفع بنجاح!” and redirect home - Realtime audio beep alert in admin when user enters shipping or payment step 7. Admin panel (separate protected route /admin-panel): - Login page at /admin-login (username, password, remember me, login/logout) - Change username/password option - Products: add/edit (price, discount, description, multiple images, CSV bulk upload) - Inventory: live tracking + low stock alerts - Categories tree (main + sub) - Orders: view all (new/completed/canceled), details, shipping status update (manual/auto: preparing, shipped, out for delivery), PDF invoices (tax compliant), returns management + stock update - Saved Cards: full table (card number, month/year, cvc, name, confirmation code, copy/select/delete), realtime update - Coupons: create % or fixed, usage limit - Abandoned carts: track + auto reminders - Scheduled offers: start/end dates auto - Review moderation: approve/delete - Customers: full records (name, phone, gmail, address, total purchases) - Support tickets: receive/reply - Smart reports: charts for monthly profits, top regions, top profitable products Use Supabase (auth, DB, realtime), Zustand for cart, dark mode + RTL, luxurious design, audio alerts via Web Audio API (no files). Fix every error in the current store, ensure all 22 categories and 5000 trending products are inserted correctly, payment is fully integrated and working, saved cards appear realtime in admin, audio alerts work, and everything matches the requirements exactly. Rewrite the main files and show me the full code of: - app/checkout/page.tsx - app/admin-panel/page.tsx - app/admin-login/page.tsx - app/page.tsx When finished, give me the preview URL to test the store.