Spaces:

fsalmansour
/

s

Running

App Files Files Community

fsalmansour commited on Jul 24, 2025

Commit

24dc896

verified ·

1 Parent(s): 2402d07

🧠 Role Prompt: You are a world-class AI-powered full-stack designer and engineer. Your task is to build a next-generation, all-in-one admin dashboard for a smart e-commerce store called “Store AI Hub,” with a professional dark mode theme, modern UX, and future-proof modular architecture. Design as if you’re building a global SaaS product to impress both Gulf-region and international clients. Quality and speed are priorities. --- 🎨 Core Design Requirements: - Beautiful dark mode (high contrast, visually appealing) - Single Page Application (SPA) structure with modular, dynamic sections - UI inspired by premium SaaS platforms (Figma, Linear, Notion, Bolt) - Fixed sidebar with modern, interactive icons & short labels - Floating Action Button (FAB) always visible for adding new content - Flexible components that handle empty states gracefully --- 📋 Main Layout Structure (Sample HTML): ```html <div class="flex h-screen bg-gray-900 text-gray-100">  <aside class="w-64 bg-gray-800 p-4"> <nav> <ul> <li class="sidebar-tab" data-tab="products">📦 Products</li> <li class="sidebar-tab" data-tab="shipping">🚚 Shipping</li> <li class="sidebar-tab" data-tab="ai">🤖 AI Center</li> <li class="sidebar-tab" data-tab="analytics">📈 Analytics</li> <li class="sidebar-tab" data-tab="social">📣 Social</li> <li class="sidebar-tab" data-tab="settings">⚙️ Settings</li> </ul> </nav> </aside>  <main class="flex-1 p-6 overflow-y-auto"> <div id="module-container"></div> </main>  <button class="fab">+</button> </div> - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +726 -925

index.html CHANGED Viewed

@@ -33,43 +33,64 @@
       }
     }
   </script>
   <!-- Font Awesome -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
   <!-- Google Fonts -->
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
   <style>
-    :root { --accent: #a855f7; }
-    html,body{overflow-x:hidden;min-width:320px}
     body {
       font-family: 'Inter', sans-serif;
       background: #121212;
       color: #e5e7eb;
       -webkit-tap-highlight-color:transparent;
     }
-    .blink { animation: blink 1s infinite; }
-    @keyframes blink { 50% { opacity: 0; } }
     .glass {
       backdrop-filter: blur(25px) saturate(200%);
-      border: 1px solid rgba(255, 255, 255, 0.18);
-      background: rgba(30, 41, 59, 0.5);
     }
     .glass-light {
       background: rgba(248, 250, 252, 0.6);
       color: #0f172a;
     }
     .kpi-card {
       transition: transform 0.3s, box-shadow 0.3s;
     }
     .kpi-card:hover {
       transform: translateY(-4px);
       box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
     }
     .tooltip:hover .tooltip-text {
       visibility: visible;
       opacity: 1;
     }
     .tooltip-text {
       visibility: hidden;
       opacity: 0;
@@ -86,24 +107,106 @@
       white-space: nowrap;
       transition: opacity 0.3s;
     }
     @keyframes pulse {
       0%, 100% { opacity: 1; }
       50% { opacity: 0.5; }
     }
     .animate-pulse {
       animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     }
     .fab-shadow {
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
     }
     .progress-ring {
       transform: rotate(-90deg);
     }
     .progress-ring-circle {
       stroke-dasharray: 283;
       stroke-dashoffset: 283;
       transition: stroke-dashoffset 0.5s;
     }
   </style>
 </head>
@@ -113,138 +216,182 @@
     <div class="container mx-auto px-4 h-16 flex items-center justify-between">
       <!-- Logo -->
       <div class="flex items-center space-x-3">
-        <div class="w-9 h-9 rounded-full bg-gradient-to-br from-indigo-500 to-cyan-400 flex items-center justify-center">
-          <i class="fas fa-brain text-white text-sm"></i>
         </div>
-        <span class="font-extrabold text-lg hidden sm:inline">Store AI</span>
       </div>
       <!-- Command Palette -->
-      <div class="hidden md:flex flex-1 max-w-xs mx-4">
-        <button id="openCommand" class="w-full glass text-sm px-3 py-2 rounded-md flex items-center space-x-2 hover:bg-slate-700 transition">
-          <i class="fas fa-search text-xs"></i>
           <span>Search commands...</span>
           <kbd class="ml-auto text-xs px-2 py-1 bg-slate-700 rounded">⌘K</kbd>
         </button>
       </div>
       <!-- Nav Icons -->
-      <div class="flex items-center space-x-3">
         <button class="text-sm font-semibold hover:opacity-80 transition" title="Switch to Arabic">EN</button>
-        <button id="themeToggle" class="p-1.5 rounded-full hover:bg-slate-700 transition tooltip">
           <i class="fas fa-sun text-yellow-300"></i>
           <span class="tooltip-text">Toggle Theme</span>
         </button>
-        <button class="p-1.5 rounded-full hover:bg-slate-700 transition tooltip">
           <i class="fas fa-microphone text-red-400"></i>
           <span class="tooltip-text">Voice Command</span>
         </button>
         <div class="relative">
-          <button class="p-1.5 rounded-full hover:bg-slate-700 relative">
             <i class="fas fa-bell text-xl"></i>
             <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center animate-pulse">3</span>
           </button>
         </div>
         <div class="relative">
           <button class="flex items-center space-x-2 hover:bg-slate-700 transition rounded-full p-1">
-            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
-              <span class="text-xs font-bold">AI</span>
             </div>
           </button>
         </div>
       </div>
     </div>
   </header>
   <!-- Sidebar (enhanced) -->
-  <aside id="sidebar" class="glass fixed inset-y-0 left-0 z-40 w-16 p-2 space-y-3 overflow-y-auto lg:relative lg:translate-x-0 transform -translate-x-full lg:translate-x-0 transition-transform duration-300">
-    <nav class="flex flex-col items-center space-y-4 pt-3">
-      <a href="#home" class="group relative w-12 h-12 flex items-center justify-center rounded-xl hover:bg-slate-700/50">
         <i class="fas fa-home text-xl"></i>
         <span class="absolute left-full ml-3 px-2 py-1 text-xs glass rounded opacity-0 group-hover:opacity-100 whitespace-nowrap pointer-events-none transition">Home</span>
       </a>
-      <a href="#products" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Smart Products">
-        <i class="fas fa-box-open text-lg"></i>
-      </a>
-      <a href="#orders" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Orders & Invoices">
-        <i class="fas fa-file-invoice-dollar text-lg"></i>
       </a>
-      <a href="#integrations" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Store Integrations">
-        <i class="fas fa-store text-lg"></i>
       </a>
-      <a href="#social" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Social Media Tools">
-        <i class="fas fa-share-alt text-lg"></i>
       </a>
-      <a href="#ai" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="AI Assistant">
-        <i class="fas fa-robot text-lg"></i>
       </a>
-      <a href="#automations" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Automations">
-        <i class="fas fa-cogs text-lg"></i>
       </a>
-      <a href="#shipping" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Shipping & Invoices">
-        <i class="fas fa-shipping-fast text-lg"></i>
       </a>
-      <a href="#payments" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Payments">
-        <i class="fas fa-credit-card text-lg"></i>
       </a>
-      <a href="#social" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Social Publisher">
-        <i class="fas fa-share-alt text-lg"></i>
       </a>
-      <a href="#trends" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Trends">
-        <i class="fas fa-fire text-lg"></i>
       </a>
-      <a href="#settings" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Settings">
-        <i class="fas fa-sliders-h text-lg"></i>
       </a>
-      <a href="#feedback" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Feedback">
-        <i class="fas fa-comment-dots text-lg"></i>
       </a>
     </nav>
   </aside>
   <!-- Mobile Hamburger -->
   <button id="openSidebar" class="glass fixed top-20 left-4 z-30 p-3 rounded-full lg:hidden fab-shadow touch-manipulation">
     <i class="fas fa-bars"></i>
   </button>
   <!-- Main Content -->
-  <main class="pt-20 lg:pl-20 px-4 pb-32 space-y-16">
     <!-- Hero Widget -->
     <section id="home" class="scroll-mt-20">
-      <div class="relative glass rounded-xl p-6 mb-6 overflow-hidden">
         <!-- animated bg -->
         <div class="absolute inset-0 opacity-20">
           <div class="absolute -top-8 -left-8 w-40 h-40 bg-gradient-to-br from-indigo-500 to-cyan-400 rounded-full blur-2xl animate-pulse"></div>
           <div class="absolute -bottom-8 -right-8 w-48 h-48 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full blur-2xl animate-pulse delay-1000"></div>
         </div>
         <div class="relative z-10">
-          <h1 class="text-3xl font-bold mb-2">Welcome back, Alex! 🤖</h1>
-          <p class="text-gray-400 mb-4">
-            Your AI assistant is <span class="text-green-400 font-bold">Online</span> ·
-            <span class="text-xs glass px-2 py-1 rounded-full">Next task in 5 min</span>
-          </p>
-          <div class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-3">
-            <button class="glass px-3 py-2 rounded-lg text-xs hover:bg-slate-700 transition">Start Task</button>
-            <button class="glass px-3 py-2 rounded-lg text-xs hover:bg-slate-700 transition">Upload CSV</button>
-            <button class="glass px-3 py-2 rounded-lg text-xs hover:bg-slate-700 transition">View Reports</button>
-            <button class="glass px-3 py-2 rounded-lg text-xs hover:bg-slate-700 transition">Ask AI</button>
           </div>
         </div>
       </div>
-      <!-- Upgrade Banner -->
-      <div class="glass rounded-xl p-4 mb-6 flex items-center gap-4">
-        <div class="text-purple-400 text-xl">
-          <i class="fas fa-rocket"></i>
-        </div>
-        <div class="flex-1">
-          <p class="font-bold">Upgrade to Pro</p>
-          <p class="text-sm text-gray-400">Unlock AI bulk actions, advanced analytics & priority support.</p>
-        </div>
-        <button class="px-4 py-2 bg-purple-600 rounded hover:bg-purple-500 transition text-sm font-semibold">Upgrade</button>
-      </div>
-      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
         <div class="kpi-card glass p-4 rounded-xl">
           <div class="flex items-center justify-between mb-2">
             <i class="fas fa-dollar-sign text-3xl text-emerald-400"></i>
@@ -255,12 +402,12 @@
           <p class="text-3xl font-extrabold">$1,247</p>
           <p class="text-xs text-slate-400">Revenue</p>
         </div>
         <div class="kpi-card glass p-4 rounded-xl">
           <div class="flex items-center justify-between mb-2">
             <div class="flex items-center">
-              <div class="w-8 h-8 rounded-full bg-accent/10 flex items-center justify-center mr-2">
-                <i class="fas fa-shopping-cart text-accent text-sm"></i>
               </div>
               <span class="text-sm">Orders</span>
             </div>
@@ -277,12 +424,12 @@
             <span class="text-xs text-slate-400 ml-2">vs yesterday</span>
           </div>
         </div>
         <div class="kpi-card glass p-4 rounded-xl">
           <div class="flex items-center justify-between mb-2">
             <div class="flex items-center">
-              <div class="w-8 h-8 rounded-full bg-accent/10 flex items-center justify-center mr-2">
-                <i class="fas fa-chart-line text-accent text-sm"></i>
               </div>
               <span class="text-sm">Conversion</span>
             </div>
@@ -299,12 +446,12 @@
             <span class="text-xs text-slate-400 ml-2">vs yesterday</span>
           </div>
         </div>
         <div class="kpi-card glass p-4 rounded-xl">
           <div class="flex items-center justify-between mb-2">
             <div class="flex items-center">
-              <div class="w-8 h-8 rounded-full bg-accent/10 flex items-center justify-center mr-2">
-                <i class="fas fa-heartbeat text-accent text-sm"></i>
               </div>
               <span class="text-sm">Health</span>
             </div>
@@ -322,52 +469,114 @@
           </div>
         </div>
       </div>
-      <!-- Mini charts row -->
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
-        <div class="glass rounded-xl p-4">
-          <div class="flex items-center justify-between mb-2">
-            <span class="text-sm">Conversion Rate</span>
-            <span class="text-xs px-2 py-1 bg-emerald-600/20 text-emerald-400 rounded-full">+2.4%</span>
-          </div>
-          <div class="h-24">
-            <div class="w-full h-full flex items-center justify-center text-slate-400">
-              <i class="fas fa-chart-line text-3xl"></i>
             </div>
           </div>
-        </div>
-        <div class="glass rounded-xl p-4">
-          <div class="flex items-center justify-between mb-2">
-            <span class="text-sm">Avg Order Value</span>
-            <span class="text-xs px-2 py-1 bg-red-600/20 text-red-400 rounded-full">-1.2%</span>
           </div>
-          <div class="h-24">
-            <div class="w-full h-full flex items-center justify-center text-slate-400">
-              <i class="fas fa-chart-bar text-3xl"></i>
             </div>
           </div>
         </div>
-        <div class="glass rounded-xl p-4">
-          <div class="flex items-center justify-between mb-2">
-            <span class="text-sm">New Customers</span>
-            <span class="text-xs px-2 py-1 bg-emerald-600/20 text-emerald-400 rounded-full">+8.7%</span>
           </div>
-          <div class="h-24">
-            <div class="w-full h-full flex items-center justify-center text-slate-400">
-              <i class="fas fa-chart-pie text-3xl"></i>
             </div>
           </div>
         </div>
       </div>
     </section>
     <!-- What-If Sim -->
     <section id="sim" class="scroll-mt-20">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-xl font-bold">What-If Simulator</h2>
-        <button class="text-sm glass px-3 py-1 rounded hover:bg-slate-700">Save Scenario</button>
       </div>
       <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div class="glass rounded-xl p-5">
           <div class="space-y-4">
@@ -397,7 +606,7 @@
             </div>
           </div>
         </div>
         <div class="glass rounded-xl p-5">
           <h3 class="text-sm font-medium mb-3">Projected Results</h3>
           <div class="space-y-3">
@@ -419,7 +628,7 @@
             </div>
           </div>
         </div>
         <div class="glass rounded-xl p-5">
           <h3 class="text-sm font-medium mb-3">Saved Scenarios</h3>
           <div class="space-y-2">
@@ -448,456 +657,281 @@
         </div>
       </div>
     </section>
-    <!-- Models Table -->
-    <section id="models" class="scroll-mt-20">
       <div class="flex items-center justify-between mb-4">
-        <h2 class="text-xl font-bold">AI Models</h2>
         <div class="flex items-center space-x-2">
-          <button class="text-sm glass px-3 py-1 rounded hover:bg-slate-700 flex items-center space-x-1">
             <i class="fas fa-plus text-xs"></i>
-            <span>Add Model</span>
           </button>
-          <div class="relative">
-            <select class="glass text-sm px-3 py-1 rounded appearance-none pr-7">
-              <option value="all">All Models</option>
-              <option value="active">Active</option>
-              <option value="inactive">Inactive</option>
-            </select>
-            <i class="fas fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-xs pointer-events-none"></i>
-          </div>
         </div>
       </div>
       <div class="glass rounded-xl overflow-x-auto">
-        <table class="w-full text-sm">
-          <thead class="bg-slate-800">
             <tr>
-              <th class="p-3 text-left">Model</th>
-              <th class="p-3 text-left">Provider</th>
-              <th class="p-3 text-left">Size</th>
               <th class="p-3 text-left">Status</th>
-              <th class="p-3 text-left">Usage</th>
-              <th class="p-3">Action</th>
             </tr>
           </thead>
           <tbody>
             <tr class="border-t border-slate-700 hover:bg-slate-800/50">
               <td class="p-3">
-                <div class="flex items-center space-x-2">
-                  <i class="fas fa-robot text-accent"></i>
-                  <span>GPT-3.5</span>
-                </div>
-              </td>
-              <td class="p-3">OpenAI</td>
-              <td class="p-3">800 MB</td>
-              <td class="p-3">
-                <span class="px-2 py-1 rounded-full text-xs bg-emerald-600/20 text-emerald-400">Active</span>
-              </td>
-              <td class="p-3">
-                <div class="w-20 h-1.5 bg-slate-700 rounded-full overflow-hidden">
-                  <div class="h-full bg-accent rounded-full" style="width: 75%"></div>
-                </div>
               </td>
               <td class="p-3">
-                <div class="flex items-center space-x-2">
-                  <button class="text-xs px-2 py-1 rounded hover:bg-slate-700 text-red-400">Deactivate</button>
-                  <button class="text-xs px-2 py-1 rounded hover:bg-slate-700 text-slate-400">Remove</button>
-                </div>
               </td>
             </tr>
-          </tbody>
-        </table>
-      </div>
-    </section>
-    <!-- Stores Table -->
-    <section id="stores" class="scroll-mt-20">
-      <div class="flex items-center justify-between mb-4">
-        <h2 class="text-xl font-bold">Stores</h2>
-        <div class="flex items-center space-x-2">
-          <button class="text-sm glass px-3 py-1 rounded hover:bg-slate-700 flex items-center space-x-1">
-            <i class="fas fa-plus text-xs"></i>
-            <span>Add Store</span>
-          </button>
-          <div class="relative">
-            <select class="glass text-sm px-3 py-1 rounded appearance-none pr-7">
-              <option value="all">All Stores</option>
-              <option value="healthy">Healthy</option>
-              <option value="warning">Warning</option>
-              <option value="critical">Critical</option>
-            </select>
-            <i class="fas fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-xs pointer-events-none"></i>
-          </div>
-        </div>
-      </div>
-      <div class="glass rounded-xl overflow-x-auto">
-        <table class="w-full text-sm">
-          <thead class="bg-slate-800">
-            <tr>
-              <th class="p-3 text-left">Store</th>
-              <th class="p-3 text-left">Platform</th>
-              <th class="p-3 text-left">Health</th>
-              <th class="p-3 text-left">Last Sync</th>
-              <th class="p-3">Action</th>
-            </tr>
-          </thead>
-          <tbody>
             <tr class="border-t border-slate-700 hover:bg-slate-800/50">
               <td class="p-3">
-                <div class="flex items-center space-x-2">
-                  <i class="fas fa-tshirt text-accent"></i>
-                  <span>FashionHub</span>
-                </div>
-              </td>
-              <td class="p-3">Shopify</td>
-              <td class="p-3">
-                <div class="flex items-center space-x-2">
-                  <div class="relative w-8 h-8">
-                    <svg class="w-8 h-8 progress-ring" viewBox="0 0 100 100">
-                      <circle class="text-slate-700" stroke-width="8" stroke="currentColor" fill="transparent" r="45" cx="50" cy="50" />
-                      <circle class="progress-ring-circle" stroke-width="8" stroke-linecap="round" stroke="#10b981" fill="transparent" r="45" cx="50" cy="50" stroke-dashoffset="283 - (283 * 94 / 100)" />
-                    </svg>
-                    <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs font-bold text-emerald-400">94%</span>
-                  </div>
-                  <span class="text-xs text-emerald-400">
-                    <i class="fas fa-caret-up"></i>
-                    <span>2%</span>
-                  </span>
-                </div>
               </td>
-              <td class="p-3 text-xs text-slate-400">1 hour ago</td>
               <td class="p-3">
-                <div class="flex items-center space-x-2">
-                  <button class="text-xs px-2 py-1 rounded hover:bg-slate-700 text-accent">Sync</button>
-                  <button class="text-xs px-2 py-1 rounded hover:bg-slate-700">Inspect</button>
-                </div>
               </td>
             </tr>
-          </tbody>
-        </table>
-      </div>
-    </section>
-    <!-- Products Table -->
-    <section id="products" class="scroll-mt-20">
-      <div class="flex items-center justify-between mb-4">
-        <h2 class="text-xl font-bold">Products</h2>
-        <div class="flex items-center space-x-2">
-          <button class="text-sm glass px-3 py-1 rounded hover:bg-slate-700 flex items-center space-x-1">
-            <i class="fas fa-plus text-xs"></i>
-            <span>Add Product</span>
-          </button>
-          <label class="glass px-3 py-1 rounded cursor-pointer text-sm">
-            <i class="fas fa-file-upload mr-1"></i> Import CSV
-            <input type="file" accept=".csv" class="hidden" />
-          </label>
-        </div>
-      </div>
-      <div class="glass rounded-xl overflow-x-auto">
-        <table class="w-full text-sm">
-          <thead class="bg-slate-800">
-            <tr>
-              <th class="p-3 text-left">#</th>
-              <th class="p-3 text-left">Name</th>
-              <th class="p-3 text-left">SKU</th>
-              <th class="p-3 text-left">Price</th>
-              <th class="p-3 text-left">Stock</th>
-              <th class="p-3 text-left">Action</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr class="border-t border-slate-700">
-              <td class="p-3">1</td>
-              <td class="p-3">Premium T-Shirt</td>
-              <td class="p-3">TSH-001</td>
-              <td class="p-3">$29.99</td>
               <td class="p-3">
-                <span class="px-2 py-1 rounded-full text-xs bg-emerald-600">42</span>
               </td>
               <td class="p-3">
-                <button class="text-accent hover:underline">Edit</button>
               </td>
             </tr>
           </tbody>
         </table>
       </div>
     </section>
-    <!-- AI Usage Section -->
-    <section id="ai" class="scroll-mt-20">
-      <div class="flex items-center justify-between mb-4">
-        <h2 class="text-xl font-bold">AI Usage</h2>
-        <div class="relative">
-          <select class="glass text-sm px-3 py-1 rounded appearance-none pr-7">
-            <option value="7d">Last 7 Days</option>
-            <option value="30d">Last 30 Days</option>
-            <option value="90d">Last 90 Days</option>
-          </select>
-          <i class="fas fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-xs pointer-events-none"></i>
-        </div>
-      </div>
-      <div class="grid md:grid-cols-2 gap-6">
-        <div class="glass rounded-xl p-4">
-          <div class="flex items-center justify-between mb-4">
-            <h3 class="font-medium">API Usage</h3>
-            <div class="flex items-center space-x-2">
-              <div class="flex items-center">
-                <div class="w-2 h-2 rounded-full bg-accent mr-1"></div>
-                <span class="text-xs">This Month</span>
-              </div>
-              <div class="flex items-center">
-                <div class="w-2 h-2 rounded-full bg-slate-500 mr-1"></div>
-                <span class="text-xs">Last Month</span>
-              </div>
-            </div>
-          </div>
-          <div class="h-48">
-            <div class="w-full h-full flex items-center justify-center text-slate-400">
-              <i class="fas fa-chart-line text-4xl"></i>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="glass rounded-xl p-4 mt-6">
-        <h3 class="font-medium mb-4">Cost Summary</h3>
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-          <div class="bg-slate-800/50 rounded-lg p-3">
-            <p class="text-sm text-slate-400 mb-1">This Month</p>
-            <p class="text-xl font-bold">$1,245</p>
-          </div>
-          <div class="bg-slate-800/50 rounded-lg p-3">
-            <p class="text-sm text-slate-400 mb-1">Last Month</p>
-            <p class="text-xl font-bold">$1,080</p>
-          </div>
-          <div class="bg-slate-800/50 rounded-lg p-3">
-            <p class="text-sm text-slate-400 mb-1">Change</p>
-            <p class="text-xl font-bold text-emerald-400">+15.3%</p>
-          </div>
-          <div class="bg-slate-800/50 rounded-lg p-3">
-            <p class="text-sm text-slate-400 mb-1">Forecast</p>
-            <p class="text-xl font-bold">$1,450</p>
-          </div>
-        </div>
-      </div>
-    </section>
-    <!-- Products Section -->
-    <!-- Smart Product Manager -->
-    <section id="products" class="scroll-mt-20">
-      <div class="flex items-center justify-between mb-4">
-        <h2 class="text-xl font-bold">Smart Product Manager</h2>
-        <div class="flex items-center space-x-2">
-          <button id="bulkImportBtn" class="text-sm glass px-3 py-1 rounded hover:bg-gray-800/60 flex items-center space-x-1">
-            <i class="fas fa-file-import text-xs"></i>
-            <span>Bulk Import</span>
-          </button>
-          <button id="addProductBtn" class="text-sm glass px-3 py-1 rounded hover:bg-gray-800/60 flex items-center space-x-1">
-            <i class="fas fa-plus text-xs"></i>
-            <span>Add Product</span>
-          </button>
-        </div>
-      </div>
-      <div class="glass rounded-xl overflow-x-auto">
-        <table id="productsTable" class="w-full text-sm">
-          <thead class="bg-gray-800">
-            <tr>
-              <th class="p-3 text-left">Name</th>
-              <th class="p-3 text-left">SKU</th>
-              <th class="p-3 text-left">Price</th>
-              <th class="p-3 text-left">Stock</th>
-              <th class="p-3 text-left">Status</th>
-            </tr>
-          </thead>
-          <tbody></tbody>
-        </table>
-      </div>
-    </section>
     <!-- Integrations -->
     <section id="ads" class="scroll-mt-20">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-xl font-bold">Integrations</h2>
-        <button class="text-sm glass px-3 py-1 rounded hover:bg-slate-700 flex items-center space-x-1">
           <i class="fas fa-plus text-xs"></i>
           <span>Add Integration</span>
         </button>
       </div>
       <div class="flex flex-wrap gap-2 mb-4">
-        <button class="px-3 py-1 rounded-md text-sm transition bg-accent text-white">All</button>
-        <button class="px-3 py-1 rounded-md text-sm transition glass hover:bg-slate-700">Ads</button>
-        <button class="px-3 py-1 rounded-md text-sm transition glass hover:bg-slate-700">Stores</button>
-        <button class="px-3 py-1 rounded-md text-sm transition glass hover:bg-slate-700">Email</button>
-        <button class="px-3 py-1 rounded-md text-sm transition glass hover:bg-slate-700">Automation</button>
       </div>
       <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
         <div class="glass rounded-xl p-4 hover:bg-slate-700/50 transition cursor-pointer">
           <div class="flex items-start justify-between mb-3">
-            <div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center">
-              <i class="fab fa-wordpress text-accent text-lg"></i>
             </div>
             <span class="text-xs px-2 py-1 rounded-full bg-slate-700/50 text-slate-400">Disconnected</span>
           </div>
           <p class="font-semibold mb-1">WooCommerce</p>
           <p class="text-xs text-slate-400 mb-3">Connect your WooCommerce store</p>
-          <div class="w-full bg-slate-700 rounded-full h-1.5 mb-1">
-            <div class="bg-accent h-1.5 rounded-full" style="width: 0%"></div>
           </div>
           <div class="flex justify-between text-xs text-slate-400">
             <span>Not connected</span>
             <span>E-commerce</span>
           </div>
         </div>
         <div class="glass rounded-xl p-4 hover:bg-slate-700/50 transition cursor-pointer">
           <div class="flex items-start justify-between mb-3">
-            <div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center">
-              <i class="fab fa-shopify text-accent text-lg"></i>
             </div>
             <span class="text-xs px-2 py-1 rounded-full bg-emerald-600/20 text-emerald-400">Connected</span>
           </div>
           <p class="font-semibold mb-1">Shopify</p>
           <p class="text-xs text-slate-400 mb-3">Connect your Shopify store</p>
-          <div class="w-full bg-slate-700 rounded-full h-1.5 mb-1">
-            <div class="bg-accent h-1.5 rounded-full" style="width: 100%"></div>
           </div>
           <div class="flex justify-between text-xs text-slate-400">
             <span>Connected</span>
             <span>E-commerce</span>
           </div>
         </div>
       </div>
     </section>
-    <!-- Shipping & Invoice -->
-    <section id="shipping" class="scroll-mt-20">
-      <h2 class="text-xl font-bold mb-4">Shipping & Invoices</h2>
-      <div class="glass rounded-xl p-4 space-y-4">
-        <div class="flex items-center justify-between">
-          <span>Provider</span>
-          <select class="glass px-2 py-1 rounded text-sm">
-            <option>SMSA</option><option>Aramex</option><option>FedEx</option>
           </select>
         </div>
-        <button class="w-full bg-accent rounded py-2 text-sm">Generate ZATCA Invoice</button>
-        <button class="w-full glass rounded py-2 text-sm">Print Label(s)</button>
       </div>
-    </section>
-    <!-- Payments -->
-    <section id="payments" class="scroll-mt-20">
-      <h2 class="text-xl font-bold mb-4">Payment Gateways</h2>
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-        <div class="glass rounded-xl p-4 text-center">
-          <i class="fab fa-stripe text-3xl mb-2"></i>
-          <p class="text-sm">Stripe</p>
-          <button class="mt-2 text-xs glass px-2 py-1 rounded">Connect</button>
-        </div>
-        <div class="glass rounded-xl p-4 text-center">
-          <i class="fas fa-credit-card text-3xl mb-2"></i>
-          <p class="text-sm">Mada</p>
-          <button class="mt-2 text-xs glass px-2 py-1 rounded">Connect</button>
-        </div>
-        <div class="glass rounded-xl p-4 text-center">
-          <i class="fas fa-mobile-alt text-3xl mb-2"></i>
-          <p class="text-sm">STC Pay</p>
-          <button class="mt-2 text-xs glass px-2 py-1 rounded">Connect</button>
-        </div>
-        <div class="glass rounded-xl p-4 text-center">
-          <i class="fas fa-apple-alt text-3xl mb-2"></i>
-          <p class="text-sm">Apple Pay</p>
-          <button class="mt-2 text-xs glass px-2 py-1 rounded">Connect</button>
         </div>
-      </div>
-    </section>
-    <!-- Social Publisher -->
-    <section id="social" class="scroll-mt-20">
-      <h2 class="text-xl font-bold mb-4">Social Publisher</h2>
-      <div class="glass rounded-xl p-4 space-y-3">
-        <textarea class="w-full glass rounded p-2 text-sm" rows="3" placeholder="Caption with AI suggestions"></textarea>
-        <div class="flex space-x-2">
-          <button class="text-xs glass px-2 py-1 rounded">TikTok</button>
-          <button class="text-xs glass px-2 py-1 rounded">Instagram</button>
-          <button class="text-xs glass px-2 py-1 rounded">Snapchat</button>
-          <button class="text-xs glass px-2 py-1 rounded">X</button>
-          <button class="text-xs glass px-2 py-1 rounded">Facebook</button>
         </div>
-        <button class="w-full bg-accent rounded py-2 text-sm">Schedule Post</button>
       </div>
     </section>
     <!-- Trends & Recommendations -->
     <section id="trends" class="scroll-mt-20">
       <h2 class="text-xl font-bold mb-4">Trends & Recommendations</h2>
       <div class="glass rounded-xl p-4">
-        <ul class="space-y-2 text-sm">
-          <li>🔥 Steam Wallet Cards selling 4× last week</li>
-          <li>💡 AI: “Boost Netflix KSA ads 9 PM-11 PM”</li>
-          <li>📈 TikTok hashtag #PSNSaudi trending</li>
         </ul>
       </div>
     </section>
-    <!-- Store Integrations -->
-    <section id="integrations" class="scroll-mt-20">
-      <h2 class="text-xl font-bold mb-4">Store Integrations</h2>
-      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-        <div class="glass rounded-xl p-4">
-          <h3 class="text-sm font-bold mb-1">Salla</h3>
-          <button class="text-xs glass px-2 py-1 rounded">Connect</button>
-        </div>
-        <div class="glass rounded-xl p-4">
-          <h3 class="text-sm font-bold mb-1">Zid</h3>
-          <button class="text-xs glass px-2 py-1 rounded">Connect</button>
-        </div>
-        <div class="glass rounded-xl p-4">
-          <h3 class="text-sm font-bold mb-1">WooCommerce</h3>
-          <button class="text-xs glass px-2 py-1 rounded">Connect</button>
-        </div>
-      </div>
-    </section>
-    <!-- Notifications & Automation Engine -->
-    <section id="automations" class="scroll-mt-20">
-      <h2 class="text-xl font-bold mb-4">Notifications & Automation</h2>
-      <div class="glass rounded-xl p-4 space-y-3">
-        <div class="flex items-center justify-between">
-          <span>Low Stock Alerts</span>
-          <input type="checkbox" class="toggle" checked>
-        </div>
-        <div class="flex items-center justify-between">
-          <span>Failed Payment Webhooks</span>
-          <input type="checkbox" class="toggle" checked>
-        </div>
-        <div class="flex items-center justify-between">
-          <span>Auto-Print Labels</span>
-          <input type="checkbox" class="toggle">
-        </div>
-        <button class="w-full bg-accent rounded py-2 text-sm">Open n8n</button>
-      </div>
-    </section>
   </main>
-  <!-- n8n Hidden Section -->
-  <section id="n8n" class="scroll-mt-20 hidden">
-    <div class="flex items-center justify-between mb-4">
-      <h2 class="text-xl font-bold">n8n Automation</h2>
-      <button id="refreshWorkflowsBtn" class="text-sm glass px-3 py-1 rounded hover:bg-slate-700">
-        <i class="fas fa-sync-alt mr-1"></i>Refresh
-      </button>
-    </div>
-    <div id="workflowsList" class="glass rounded-xl p-4">
-      <p class="text-slate-400">Loading workflows…</p>
-    </div>
-  </section>
   <!-- Command Palette Modal -->
   <div id="commandModal" class="fixed inset-0 bg-black/50 z-50 hidden items-start justify-center pt-20">
     <div class="glass w-full max-w-lg rounded-xl overflow-hidden">
@@ -907,46 +941,81 @@
       </div>
       <div id="cmdResults" class="max-h-96 overflow-y-auto">
         <!-- dynamic results -->
       </div>
     </div>
   </div>
   <!-- Floating Action Button -->
-  <button id="primaryFab" class="fixed bottom-6 right-6 glass p-4 rounded-full shadow-xl fab-shadow hover:scale-110 transition z-40">
-    <i class="fas fa-plus text-lg"></i>
-  </button>
-      <i class="fas fa-cog"></i>
     </button>
-    <button id="addProductFab" class="glass p-3 rounded-full shadow-lg fab-shadow transition hover:scale-110 neon" aria-label="Add Product">
       <i class="fas fa-box-open"></i>
     </button>
-    <button id="chatToggleFab" class="glass p-4 rounded-full shadow-lg fab-shadow transition hover:scale-110" aria-label="Toggle Chat">
       <i class="fas fa-robot"></i>
     </button>
   </div>
   <!-- Live Chat Panel -->
   <div id="chatPanel" class="fixed inset-x-0 bottom-0 z-50 glass rounded-t-xl shadow-2xl transform translate-y-full transition-transform duration-300 md:max-w-md md:mx-auto">
     <header class="flex items-center justify-between p-4 border-b border-slate-700">
       <div class="flex items-center space-x-2">
         <i class="fas fa-robot text-accent"></i>
-        <span class="font-bold">Live Chat</span>
       </div>
       <button id="closeChat" class="p-1 rounded-full hover:bg-slate-700">
         <i class="fas fa-times"></i>
       </button>
     </header>
-    <div id="chatMessages" class="h-[60vh] md:h-[70vh] overflow-y-auto p-4 space-y-3"></div>
     <footer class="p-4 border-t border-slate-700 flex items-center space-x-2">
       <button id="emojiToggle" class="p-2 rounded-full hover:bg-slate-700">
         <i class="far fa-face-smile"></i>
       </button>
       <label class="p-2 rounded-full hover:bg-slate-700 cursor-pointer">
         <i class="fas fa-paperclip"></i>
-        <input type="file" multiple accept="image/*,.pdf" class="hidden" @change="handleFileUpload($event)">
       </label>
-      <button id="recordBtn" :class="recording ? 'text-red-400 blink' : ''" class="p-2 rounded-full hover:bg-slate-700" @click="toggleRecord">
-        <i :class="recording ? 'fas fa-stop' : 'fas fa-microphone-lines'"></i>
       </button>
       <input id="chatInput" type="text" placeholder="Type a message…" class="flex-1 bg-transparent outline-none" />
       <button id="sendMessage" class="p-2 rounded-full hover:bg-slate-700">
@@ -954,7 +1023,7 @@
       </button>
     </footer>
   </div>
   <!-- Settings Modal -->
   <div id="settingsModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
     <div class="glass w-full max-w-md rounded-xl p-6 space-y-4">
@@ -966,456 +1035,188 @@
       </div>
       <div>
         <label class="block text-sm mb-1">Accent Color</label>
-        <input id="accentColorPicker" type="color" value="#38bdf8" class="w-full h-10 rounded cursor-pointer" />
       </div>
       <div>
         <label class="block text-sm mb-1">Theme</label>
-        <button id="themeToggleBtn" class="glass px-3 py-1 rounded">Toggle Dark / Light</button>
       </div>
       <div>
         <label class="flex items-center space-x-2">
-          <input id="pushToggle" type="checkbox" class="accent-accent">
           <span class="text-sm">Enable Push Notifications</span>
         </label>
       </div>
       <div class="text-right">
-        <button id="saveSettings" class="px-4 py-2 bg-accent rounded hover:bg-opacity-80">Save</button>
       </div>
     </div>
   </div>
-  <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
   <script>
-  // Service-Worker registration
-  if ('serviceWorker' in navigator) {
-    const swCode = `
-      self.addEventListener('push', e => {
-        const data = e.data?.json() ?? { title: 'Store AI', body: 'New message' };
-        e.waitUntil(
-          self.registration.showNotification(data.title, {
-            body: data.body,
-            icon: '/favicon.ico',
-            badge: '/favicon.ico'
-          })
-        );
-      });
-    `;
-    const blob = new Blob([swCode], { type: 'text/javascript' });
-    navigator.serviceWorker.register(URL.createObjectURL(blob))
-      .then(() => Notification.requestPermission());
-  }
-  // Push helper
-  function notify(title, body) {
-    if (Notification.permission === 'granted') {
-      navigator.serviceWorker.getRegistration().then(reg => {
-        reg?.showNotification(title, { body, icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJ3LTQgaC00IiBmaWxsPSIjZmZmIiB2aWV3Qm94PSIwIDAgNDQ4IDUxMiI+PHBhdGggZD0iTTIyNCAxMzZjMCA4LjgtNy4yIDE2LTE2IDE2cy0xNi03LjItMTYtMTZWNTEyYzAgOC44IDcuMiAxNiAxNiAxNnMxNi03LjIgMTYtMTZWMTM2em0tOTYgMGMwIDguOC03LjIgMTYtMTYgMTZzLTE2LTcuMi0xNi0xNlY1MTJjMCA4LjggNy4yIDE2IDE2IDE2czE2LTcuMiAxNi0xNlYxMzZ6bTMyMCAwYzAgOC44LTcuMiAxNi0xNiAxNnMtMTYtNy4yLTE2LTE2VjUxMmMwIDguOCA3LjIgMTYgMTYgMTZzMTYtNy4yIDE2LTE2VjEzNnoiLz48L3N2Zz4=' });
-      });
-    } else {
-      // fallback toast
-      const toast = document.createElement('div');
-      toast.className = 'fixed top-20 right-4 glass px-4 py-2 rounded shadow';
-      toast.textContent = `${title}: ${body}`;
-      document.body.appendChild(toast);
-      setTimeout(() => toast.remove(), 3000);
-    }
-  }
-    // Persisted state keys
-    const STORAGE_KEYS = ['lang', 'theme', 'accent', 'plugins', 'products', 'chat'];
-    // Default state
-    const storeAi = () => ({
-      theme: 'dark',
-      accent: '#38bdf8',
-      lang: 'en',
-      products: [],
-      openCmdK: false,
-      chatOpen: false,
-      emojisEnabled: false,
-      messages: [],
-      attachments: [],
-      recording: false,
-      mediaRec: null,
-      chunks: [],
-      init() {
-        // Load persisted state
-        STORAGE_KEYS.forEach(k => {
-          const val = localStorage.getItem(k);
-          if (val) { this[k] = k === 'products' ? JSON.parse(val) : val; }
-        });
-        this.applyTheme();
-        this.applyAccent();
-        this.loadProductsTable();
-        this.loadChat();
-        // Sidebar toggle
-        document.getElementById('openSidebar').addEventListener('click', () => {
-          document.getElementById('sidebar').classList.remove('-translate-x-full');
-        });
-        document.getElementById('closeSidebar').addEventListener('click', () => {
-          document.getElementById('sidebar').classList.add('-translate-x-full');
-        });
-        // Command Palette
-        document.addEventListener('keydown', e => {
-          if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-            e.preventDefault();
-            this.openCmdK = true;
-            this.$nextTick(() => this.$refs.cmdInput?.focus());
-          }
-          if (e.key === 'Escape') {
-            this.openCmdK = false;
-            this.chatOpen = false;
-            document.getElementById('settingsModal').classList.add('hidden');
-          }
-        });
-        // Floating buttons
-        document.getElementById('settingsFab').addEventListener('click', () => {
-          document.getElementById('settingsModal').classList.remove('hidden');
-        });
-        document.getElementById('closeSettings').addEventListener('click', () => {
-          document.getElementById('settingsModal').classList.add('hidden');
-        });
-        document.getElementById('addProductFab').addEventListener('click', () => this.openAddProductModal());
-        document.getElementById('chatToggleFab').addEventListener('click', () => this.toggleChat());
-        document.getElementById('closeChat').addEventListener('click', () => this.toggleChat());
-        document.getElementById('sendMessage').addEventListener('click', () => this.sendChatMessage());
-        document.getElementById('chatInput').addEventListener('keydown', e => {
-          if (e.key === 'Enter') this.sendChatMessage();
-        });
-        document.getElementById('emojiToggle').addEventListener('click', () => this.emojisEnabled = !this.emojisEnabled);
-        // Settings modal
-        document.getElementById('saveSettings').addEventListener('click', () => this.saveSettings());
-        document.getElementById('themeToggleBtn').addEventListener('click', () => {
-          this.theme = this.theme === 'dark' ? 'light' : 'dark';
-          this.applyTheme();
-        });
-        // Bulk import
-        document.getElementById('bulkImportBtn').addEventListener('click', () => {
-          const inp = document.createElement('input');
-          inp.type = 'file';
-          inp.accept = '.csv';
-          inp.onchange = e => {
-            const file = e.target.files[0];
-            const reader = new FileReader();
-            reader.onload = () => {
-              const lines = reader.result.split('\n').slice(1);
-              const prods = lines.map(l => {
-                const [name, sku, price, stock] = l.split(',');
-                return { name, sku, price: parseFloat(price), stock: parseInt(stock) };
-              }).filter(p => p.name);
-              this.products = [...this.products, ...prods];
-              this.saveProducts();
-            };
-            reader.readAsText(file);
-          };
-          inp.click();
-        });
-        // Observer for nav highlighting
-        const sections = document.querySelectorAll('section[id]');
-        const navLinks = document.querySelectorAll('nav a');
-        const observer = new IntersectionObserver(entries => {
-          entries.forEach(entry => {
-            if (entry.isIntersecting) {
-              navLinks.forEach(link => link.classList.toggle('bg-slate-700/50', link.getAttribute('href') === `#${entry.target.id}`));
-            }
-          });
-        }, { threshold: 0.4 });
-        sections.forEach(s => observer.observe(s));
-      },
-      applyTheme() {
-        document.documentElement.classList.toggle('dark', this.theme === 'dark');
-        localStorage.setItem('theme', this.theme);
-      },
-      applyAccent() {
-        document.documentElement.style.setProperty('--accent', this.accent);
-        localStorage.setItem('accent', this.accent);
-      },
-      saveSettings() {
-        this.accent = document.getElementById('accentColorPicker').value;
-        this.applyAccent();
-        // Push toggle
-        const pushOn = document.getElementById('pushToggle').checked;
-        if (pushOn && Notification.permission !== 'granted') {
-          Notification.requestPermission().then(p => {
-            if (p === 'granted') notify('Push enabled', 'You will receive system notifications.');
-          });
-        }
-        document.getElementById('settingsModal').classList.add('hidden');
-      },
-      openAddProductModal() {
-        const name = prompt('Product Name');
-        const sku = prompt('SKU');
-        const price = parseFloat(prompt('Price'));
-        const stock = parseInt(prompt('Stock'));
-        if (name && sku && !isNaN(price) && !isNaN(stock)) {
-          this.products.push({ name, sku, price, stock });
-          this.saveProducts();
-        }
-      },
-      saveProducts() {
-        localStorage.setItem('products', JSON.stringify(this.products));
-        this.products.forEach(p => {
-          if (p.stock < 10) notify('Low stock', `SKU ${p.sku} has ${p.stock} left`);
-        });
-        this.loadProductsTable();
-      },
-      loadProductsTable() {
-        const tbody = document.querySelector('#productsTable tbody');
-        tbody.innerHTML = '';
-        this.products.forEach(p => {
-          const tr = document.createElement('tr');
-          tr.className = 'border-t border-slate-700 hover:bg-slate-800/50';
-          tr.innerHTML = `
-            <td class="p-3">${p.name}</td>
-            <td class="p-3">${p.sku}</td>
-            <td class="p-3">${p.price.toFixed(2)}</td>
-            <td class="p-3">
-              <span class="px-2 py-1 rounded-full text-xs ${p.stock < 10 ? 'bg-red-600' : 'bg-emerald-600'}">${p.stock}</span>
-            </td>
-            <td class="p-3">
-              <span class="text-xs px-2 py-1 rounded-full bg-slate-700">Active</span>
-            </td>
-          `;
-          tbody.appendChild(tr);
-        });
-      },
-      toggleChat() {
-        this.chatOpen = !this.chatOpen;
-        const panel = document.getElementById('chatPanel');
-        panel.classList.toggle('translate-y-full', !this.chatOpen);
-        panel.classList.toggle('translate-y-0', this.chatOpen);
-        if (this.chatOpen) this.scrollToBottom();
-      },
-      sendChatMessage() {
-        const input = document.getElementById('chatInput');
-        const text = input.value.trim();
-        if (!text && this.attachments.length === 0) return;
-        const msg = {
-          role: 'user',
-          content: text,
-          attachments: [...this.attachments]
-        };
-        this.messages.push(msg);
-        this.messages.push({ role: 'assistant', content: '...', emojis: this.emojisEnabled ? ['🤖'] : [] });
-        input.value = '';
-        this.attachments = [];
-        this.saveChat();
-        this.scrollToBottom();
-        // Simulate response
-        setTimeout(() => {
-          const last = this.messages[this.messages.length - 1];
-          last.content = 'Got your message! Anything else?';
-          this.saveChat();
-          if (!this.chatOpen) notify('Store AI', last.content);
-        }, 500);
-      },
-      scrollToBottom() {
-        this.$nextTick(() => {
-          const box = document.getElementById('chatMessages');
-          box.scrollTop = box.scrollHeight;
-        });
-      },
-      saveChat() {
-        localStorage.setItem('chat', JSON.stringify(this.messages));
-      },
-      loadChat() {
-        this.messages = JSON.parse(localStorage.getItem('chat') || '[]');
-        this.$nextTick(() => {
-          const box = document.getElementById('chatMessages');
-          box.innerHTML = '';
-          this.messages.forEach(m => {
-            const div = document.createElement('div');
-            div.className = `flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`;
-            let attachHTML = '';
-            (m.attachments || []).forEach(f => {
-              const url = URL.createObjectURL(f);
-              if (f.type.startsWith('image/')) {
-                attachHTML += `<img src="${url}" class="rounded mb-1 max-h-32 cursor-pointer" onclick="window.open('${url}')"/>`;
-              } else if (f.type === 'application/pdf') {
-                attachHTML += `<a href="${url}" download="${f.name}" class="text-sm underline flex items-center"><i class="fas fa-file mr-1"></i>${f.name}</a>`;
-              } else if (f.type.startsWith('audio/')) {
-                attachHTML += `<audio controls src="${url}" class="w-full"></audio>`;
-              }
-            });
-            div.innerHTML = `
-              <div class="max-w-[70%] px-3 py-2 rounded-xl ${
-                m.role === 'user' ? 'bg-accent text-white' : 'glass'
-              }">
-                <span>${m.content}</span>
-                ${m.emojis?.length ? `<div class="text-xs mt-1">${m.emojis.join('')}</div>` : ''}
-                <div class="mt-1">${attachHTML}</div>
-              </div>
-            `;
-            box.appendChild(div);
-          });
-        });
-      },
-      handleFileUpload(e) {
-        [...e.target.files].forEach(f => this.attachments.push(f));
-      },
-      toggleRecord() {
-        if (!this.recording) {
-          navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
-            this.mediaRec = new MediaRecorder(stream);
-            this.mediaRec.ondataavailable = ev => this.chunks.push(ev.data);
-            this.mediaRec.onstop = () => {
-              const blob = new Blob(this.chunks, { type: 'audio/webm' });
-              this.attachments.push(blob);
-              this.chunks = [];
-            };
-            this.mediaRec.start();
-            this.recording = true;
-          });
         } else {
-          this.mediaRec.stop();
-          this.recording = false;
-        }
-      },
-      // Command palette handler
-      runCommand(cmd) {
-        cmd = cmd.toLowerCase();
-        if (cmd.includes('add product') this.openAddProductModal();
-        if (cmd.includes('bulk import') document.getElementById('bulkImportBtn').click();
-        if (cmd.includes('open n8n') document.getElementById('n8n').classList.remove('hidden');
-        if (cmd.startsWith('find sku')) {
-          const sku = cmd.split('sku')[1]?.trim();
-          if (sku) {
-            const row = [...document.querySelectorAll('#productsTable tbody tr')].find(tr => tr.children[1].textContent === sku);
-            row?.scrollIntoView({ behavior: 'smooth' });
-            row?.classList.add('ring', 'ring-accent');
-            setTimeout(() => row?.classList.remove('ring', 'ring-accent'), 2000);
-          }
         }
       }
     });
-    Alpine.data('neoVista', () => ({
-      products: [],
-      chatOpen: false,
-      messages: [],
-      init() {
-        // load persisted
-        this.products = JSON.parse(localStorage.getItem('neovista-products') || '[]');
-        this.loadProducts();
-        // command palette
-        document.addEventListener('keydown', e => {
-          if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-            e.preventDefault();
-            document.getElementById('commandModal').classList.remove('hidden');
-            document.getElementById('cmdInput').focus();
-          }
-        });
-        document.getElementById('cmdInput').addEventListener('input', e => this.handleCmd(e.target.value));
-        document.getElementById('closeChat').addEventListener('click', () => this.toggleChat());
-        document.getElementById('sendMessage').addEventListener('click', () => this.sendChatMessage());
-        document.getElementById('chatInput').addEventListener('keydown', e => {
-          if (e.key === 'Enter') this.sendChatMessage();
-        });
-        document.getElementById('addProductBtn').addEventListener('click', () => this.addProduct());
-        document.getElementById('bulkImportBtn').addEventListener('click', () => this.bulkImport());
-      },
-      addProduct() {
-        const name = prompt('Product name');
-        const sku = prompt('SKU');
-        const price = parseFloat(prompt('Price'));
-        const stock = parseInt(prompt('Stock'));
-        if (name && sku && !isNaN(price) && !isNaN(stock)) {
-          this.products.push({ name, sku, price, stock });
-          this.saveProducts();
-        }
-      },
-      bulkImport() {
-        const inp = document.createElement('input');
-        inp.type = 'file';
-        inp.accept = '.csv';
-        inp.onchange = e => {
-          const file = e.target.files[0];
-          const reader = new FileReader();
-          reader.onload = () => {
-            const lines = reader.result.split('\n').slice(1);
-            const prods = lines.map(l => {
-              const [name, sku, price, stock] = l.split(',');
-              return { name, sku, price: parseFloat(price), stock: parseInt(stock) };
-            }).filter(p => p.name);
-            this.products = [...this.products, ...prods];
-            this.saveProducts();
-          };
-          reader.readAsText(file);
-        };
-        inp.click();
-      },
-      loadProducts() {
-        const tbody = document.querySelector('#productsTable tbody');
-        tbody.innerHTML = '';
-        this.products.forEach(p => {
-          const tr = document.createElement('tr');
-          tr.className = 'border-t border-gray-700 hover:bg-gray-800/50';
-          tr.innerHTML = `
-            <td class="p-3">${p.name}</td>
-            <td class="p-3">${p.sku}</td>
-            <td class="p-3">${p.price.toFixed(2)}</td>
-            <td class="p-3">
-              <span class="px-2 py-1 rounded-full text-xs ${p.stock < 10 ? 'bg-red-600' : 'bg-green-600'}">${p.stock}</span>
-            </td>
-            <td class="p-3"><span class="text-xs px-2 py-1 rounded-full bg-gray-700">Active</span></td>
-          `;
-          tbody.appendChild(tr);
-        });
-      },
-      saveProducts() {
-        localStorage.setItem('neovista-products', JSON.stringify(this.products));
-        this.loadProducts();
-      },
-      toggleChat() {
-        this.chatOpen = !this.chatOpen;
-        const panel = document.getElementById('chatPanel');
-        panel.classList.toggle('translate-y-full', !this.chatOpen);
-        panel.classList.toggle('translate-y-0', this.chatOpen);
-        if (this.chatOpen) this.scrollChat();
-      },
-      sendChatMessage() {
-        const input = document.getElementById('chatInput');
-        const text = input.value.trim();
-        if (!text) return;
-        this.messages.push({ role: 'user', content: text });
-        this.messages.push({ role: 'assistant', content: '...' });
-        input.value = '';
-        setTimeout(() => {
-          const last = this.messages[this.messages.length - 1];
-          last.content = 'Got your message! Anything else?';
-          this.scrollChat();
-        }, 500);
-      },
-      scrollChat() {
         setTimeout(() => {
-          const box = document.getElementById('chatMessages');
-          box.scrollTop = box.scrollHeight;
-        }, 0);
-      },
-      handleCmd(query) {
-        const cmds = [
-          { name: 'Add Product', action: () => this.addProduct() },
-          { name: 'Find SKU', action: () => alert('Type find sku <sku>') },
-          { name: 'Send Bulk Email', action: () => alert('Feature locked') },
-        ];
-        const filtered = cmds.filter(c => c.name.toLowerCase().includes(query.toLowerCase()));
-        const res = document.getElementById('cmdResults');
-        res.innerHTML = '';
-        filtered.forEach(c => {
-          const btn = document.createElement('button');
-          btn.className = 'w-full text-left p-3 hover:bg-gray-800/60 flex items-center space-x-3';
-          btn.innerHTML = `
-            <i class="fas fa-bolt text-sm w-5 text-center text-gray-400"></i>
-            <div>
-              <p>${c.name}</p>
-            </div>
-          `;
-          btn.onclick = () => {
-            c.action();
-            document.getElementById('commandModal').classList.add('hidden');
-          };
-          res.appendChild(btn);
         });
       }
-    }));
-    Alpine.data('neoVista', neoVista);
   </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=fsalmansour/s" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

       }
     }
   </script>
   <!-- Font Awesome -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
   <!-- Google Fonts -->
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
   <style>
+    :root {
+      --accent: #a855f7;
+      --glass-bg: rgba(30, 41, 59, 0.5);
+      --glass-border: rgba(255, 255, 255, 0.18);
+    }
+    html,body{
+      overflow-x:hidden;
+      min-width:320px;
+    }
     body {
       font-family: 'Inter', sans-serif;
       background: #121212;
       color: #e5e7eb;
       -webkit-tap-highlight-color:transparent;
     }
+    .blink {
+      animation: blink 1s infinite;
+    }
+    @keyframes blink {
+      50% { opacity: 0; }
+    }
     .glass {
       backdrop-filter: blur(25px) saturate(200%);
+      border: 1px solid var(--glass-border);
+      background: var(--glass-bg);
     }
     .glass-light {
       background: rgba(248, 250, 252, 0.6);
       color: #0f172a;
     }
     .kpi-card {
       transition: transform 0.3s, box-shadow 0.3s;
     }
     .kpi-card:hover {
       transform: translateY(-4px);
       box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
     }
     .tooltip:hover .tooltip-text {
       visibility: visible;
       opacity: 1;
     }
     .tooltip-text {
       visibility: hidden;
       opacity: 0;
       white-space: nowrap;
       transition: opacity 0.3s;
     }
     @keyframes pulse {
       0%, 100% { opacity: 1; }
       50% { opacity: 0.5; }
     }
     .animate-pulse {
       animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     }
     .fab-shadow {
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
     }
     .progress-ring {
       transform: rotate(-90deg);
     }
     .progress-ring-circle {
       stroke-dasharray: 283;
       stroke-dashoffset: 283;
       transition: stroke-dashoffset 0.5s;
     }
+    .active-nav {
+      background: rgba(168, 85, 247, 0.2);
+      border-left: 3px solid var(--accent);
+    }
+    .sidebar-expanded {
+      width: 240px;
+    }
+    .sidebar-collapsed {
+      width: 72px;
+    }
+    .sidebar-toggle {
+      transition: all 0.3s ease;
+    }
+    .sidebar-toggle:hover {
+      transform: scale(1.1);
+    }
+    .status-indicator {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      border: 2px solid #121212;
+    }
+    .hero-gradient {
+      background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(59, 130, 246, 0.15) 100%);
+    }
+    .drag-over {
+      border: 2px dashed var(--accent);
+      background: rgba(168, 85, 247, 0.1);
+    }
+    .drag-over * {
+      pointer-events: none;
+    }
+    .neon-glow {
+      box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
+    }
+    .pulse-glow {
+      animation: pulse-glow 2s infinite;
+    }
+    @keyframes pulse-glow {
+      0% { box-shadow: 0 0 5px rgba(168, 85, 247, 0.5); }
+      50% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.8); }
+      100% { box-shadow: 0 0 5px rgba(168, 85, 247, 0.5); }
+    }
+    .floating {
+      animation: floating 3s ease-in-out infinite;
+    }
+    @keyframes floating {
+      0% { transform: translateY(0px); }
+      50% { transform: translateY(-10px); }
+      100% { transform: translateY(0px); }
+    }
+    .chart-bar {
+      animation: chart-grow 1s ease-out forwards;
+    }
+    @keyframes chart-grow {
+      from { height: 0; }
+      to { height: var(--target-height); }
+    }
   </style>
 </head>
     <div class="container mx-auto px-4 h-16 flex items-center justify-between">
       <!-- Logo -->
       <div class="flex items-center space-x-3">
+        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-cyan-400 flex items-center justify-center">
+          <i class="fas fa-brain text-white text-lg"></i>
         </div>
+        <span class="font-extrabold text-xl hidden sm:inline">NeoVista AI</span>
       </div>
       <!-- Command Palette -->
+      <div class="hidden md:flex flex-1 max-w-md mx-4">
+        <button id="openCommand" class="w-full glass text-sm px-4 py-2.5 rounded-lg flex items-center space-x-3 hover:bg-slate-700 transition">
+          <i class="fas fa-search text-sm"></i>
           <span>Search commands...</span>
           <kbd class="ml-auto text-xs px-2 py-1 bg-slate-700 rounded">⌘K</kbd>
         </button>
       </div>
       <!-- Nav Icons -->
+      <div class="flex items-center space-x-4">
         <button class="text-sm font-semibold hover:opacity-80 transition" title="Switch to Arabic">EN</button>
+        <button id="themeToggle" class="p-2 rounded-full hover:bg-slate-700 transition tooltip">
           <i class="fas fa-sun text-yellow-300"></i>
           <span class="tooltip-text">Toggle Theme</span>
         </button>
+        <button class="p-2 rounded-full hover:bg-slate-700 transition tooltip">
           <i class="fas fa-microphone text-red-400"></i>
           <span class="tooltip-text">Voice Command</span>
         </button>
         <div class="relative">
+          <button class="p-2 rounded-full hover:bg-slate-700 relative">
             <i class="fas fa-bell text-xl"></i>
             <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center animate-pulse">3</span>
           </button>
         </div>
         <div class="relative">
           <button class="flex items-center space-x-2 hover:bg-slate-700 transition rounded-full p-1">
+            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center relative">
+              <span class="text-sm font-bold">AI</span>
+              <div class="status-indicator bg-green-500"></div>
             </div>
           </button>
         </div>
       </div>
     </div>
   </header>
   <!-- Sidebar (enhanced) -->
+  <aside id="sidebar" class="glass fixed inset-y-0 left-0 z-40 sidebar-collapsed p-3 space-y-3 overflow-y-auto transition-all duration-300 lg:relative lg:translate-x-0 transform -translate-x-full lg:translate-x-0">
+    <div class="flex justify-between items-center mb-6 mt-2">
+      <h2 class="text-xl font-bold px-3 hidden sidebar-text">Navigation</h2>
+      <button id="toggleSidebar" class="p-2 rounded-full hover:bg-slate-700 sidebar-toggle">
+        <i class="fas fa-chevron-left text-sm"></i>
+      </button>
+    </div>
+    <nav class="flex flex-col space-y-2">
+      <a href="#home" class="group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50 active-nav">
         <i class="fas fa-home text-xl"></i>
+        <span class="ml-4 font-medium sidebar-text hidden">Home</span>
         <span class="absolute left-full ml-3 px-2 py-1 text-xs glass rounded opacity-0 group-hover:opacity-100 whitespace-nowrap pointer-events-none transition">Home</span>
       </a>
+      <a href="#products" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="Smart Products">
+        <i class="fas fa-box-open text-xl"></i>
+        <span class="ml-4 font-medium sidebar-text hidden">Products</span>
       </a>
+      <a href="#orders" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="Orders & Invoices">
+        <i class="fas fa-file-invoice-dollar text-xl"></i>
+        <span class="ml-4 font-medium sidebar-text hidden">Orders</span>
       </a>
+      <a href="#integrations" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="Store Integrations">
+        <i class="fas fa-store text-xl"></i>
+        <span class="ml-4 font-medium sidebar-text hidden">Integrations</span>
       </a>
+      <a href="#social" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="Social Media Tools">
+        <i class="fas fa-share-alt text-xl"></i>
+        <span class="ml-4 font-medium sidebar-text hidden">Social</span>
       </a>
+      <a href="#ai" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="AI Assistant">
+        <i class="fas fa-robot text-xl"></i>
+        <span class="ml-4 font-medium sidebar-text hidden">AI Assistant</span>
       </a>
+      <a href="#automations" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="Automations">
+        <i class="fas fa-cogs text-xl"></i>
+        <span class="ml-4 font-medium sidebar-text hidden">Automations</span>
       </a>
+      <a href="#shipping" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="Shipping & Invoices">
+        <i class="fas fa-shipping-fast text-xl"></i>
+        <span class="ml-4 font-medium sidebar-text hidden">Shipping</span>
       </a>
+      <a href="#payments" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="Payments">
+        <i class="fas fa-credit-card text-xl"></i>
+        <span class="ml-4 font-medium sidebar-text hidden">Payments</span>
       </a>
+      <a href="#trends" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="Trends">
+        <i class="fas fa-fire text-xl"></i>
+        <span class="ml-4 font-medium sidebar-text hidden">Trends</span>
       </a>
+      <a href="#settings" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="Settings">
+        <i class="fas fa-sliders-h text-xl"></i>
+        <span class="ml-4 font-medium sidebar-text hidden">Settings</span>
       </a>
+      <a href="#feedback" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="Feedback">
+        <i class="fas fa-comment-dots text-xl"></i>
+        <span class="ml-4 font-medium sidebar-text hidden">Feedback</span>
       </a>
     </nav>
+    <div class="mt-auto pt-4 border-t border-slate-700/50">
+      <div class="p-3 rounded-xl bg-slate-800/30">
+        <div class="flex items-center">
+          <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center mr-3">
+            <span class="text-sm font-bold">AI</span>
+          </div>
+          <div class="sidebar-text hidden">
+            <p class="font-medium">AI Assistant</p>
+            <p class="text-xs text-slate-400">Online</p>
+          </div>
+        </div>
+        <button class="w-full mt-3 px-3 py-2 bg-slate-700/50 hover:bg-slate-700 rounded-lg text-sm transition sidebar-text hidden">
+          <i class="fas fa-comment mr-2"></i>Chat with AI
+        </button>
+      </div>
+    </div>
   </aside>
   <!-- Mobile Hamburger -->
   <button id="openSidebar" class="glass fixed top-20 left-4 z-30 p-3 rounded-full lg:hidden fab-shadow touch-manipulation">
     <i class="fas fa-bars"></i>
   </button>
   <!-- Main Content -->
+  <main class="pt-20 lg:pl-20 px-4 pb-32 space-y-8">
     <!-- Hero Widget -->
     <section id="home" class="scroll-mt-20">
+      <div class="relative glass rounded-xl p-6 mb-6 overflow-hidden hero-gradient">
         <!-- animated bg -->
         <div class="absolute inset-0 opacity-20">
           <div class="absolute -top-8 -left-8 w-40 h-40 bg-gradient-to-br from-indigo-500 to-cyan-400 rounded-full blur-2xl animate-pulse"></div>
           <div class="absolute -bottom-8 -right-8 w-48 h-48 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full blur-2xl animate-pulse delay-1000"></div>
         </div>
         <div class="relative z-10">
+          <div class="flex flex-col md:flex-row md:items-center justify-between">
+            <div>
+              <h1 class="text-3xl font-bold mb-2">Welcome back, Alex! <span class="text-accent">🤖</span></h1>
+              <p class="text-gray-400 mb-4">
+                Your AI assistant is <span class="text-green-400 font-bold">Online</span> ·
+                <span class="text-xs glass px-2 py-1 rounded-full">Next task in 5 min</span>
+              </p>
+            </div>
+            <div class="flex space-x-3 mt-4 md:mt-0">
+              <button class="glass px-4 py-2.5 rounded-lg text-sm hover:bg-slate-700 transition flex items-center">
+                <i class="fas fa-plus mr-2"></i>Start Task
+              </button>
+              <button class="glass px-4 py-2.5 rounded-lg text-sm hover:bg-slate-700 transition flex items-center">
+                <i class="fas fa-bolt mr-2"></i>Quick Action
+              </button>
+            </div>
+          </div>
+          <div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-3">
+            <button class="glass px-3 py-2.5 rounded-lg text-xs hover:bg-slate-700 transition flex items-center justify-center">
+              <i class="fas fa-upload mr-1"></i> Upload CSV
+            </button>
+            <button class="glass px-3 py-2.5 rounded-lg text-xs hover:bg-slate-700 transition flex items-center justify-center">
+              <i class="fas fa-chart-line mr-1"></i> View Reports
+            </button>
+            <button class="glass px-3 py-2.5 rounded-lg text-xs hover:bg-slate-700 transition flex items-center justify-center">
+              <i class="fas fa-robot mr-1"></i> Ask AI
+            </button>
+            <button class="glass px-3 py-2.5 rounded-lg text-xs hover:bg-slate-700 transition flex items-center justify-center">
+              <i class="fas fa-sync-alt mr-1"></i> Refresh Data
+            </button>
           </div>
         </div>
       </div>
+      <!-- Quick Stats Row -->
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
         <div class="kpi-card glass p-4 rounded-xl">
           <div class="flex items-center justify-between mb-2">
             <i class="fas fa-dollar-sign text-3xl text-emerald-400"></i>
           <p class="text-3xl font-extrabold">$1,247</p>
           <p class="text-xs text-slate-400">Revenue</p>
         </div>
         <div class="kpi-card glass p-4 rounded-xl">
           <div class="flex items-center justify-between mb-2">
             <div class="flex items-center">
+              <div class="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center mr-2">
+                <i class="fas fa-shopping-cart text-accent text-lg"></i>
               </div>
               <span class="text-sm">Orders</span>
             </div>
             <span class="text-xs text-slate-400 ml-2">vs yesterday</span>
           </div>
         </div>
         <div class="kpi-card glass p-4 rounded-xl">
           <div class="flex items-center justify-between mb-2">
             <div class="flex items-center">
+              <div class="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center mr-2">
+                <i class="fas fa-chart-line text-accent text-lg"></i>
               </div>
               <span class="text-sm">Conversion</span>
             </div>
             <span class="text-xs text-slate-400 ml-2">vs yesterday</span>
           </div>
         </div>
         <div class="kpi-card glass p-4 rounded-xl">
           <div class="flex items-center justify-between mb-2">
             <div class="flex items-center">
+              <div class="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center mr-2">
+                <i class="fas fa-heartbeat text-accent text-lg"></i>
               </div>
               <span class="text-sm">Health</span>
             </div>
           </div>
         </div>
       </div>
+      <!-- System Health & AI Status -->
+      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+        <div class="glass rounded-xl p-5 lg:col-span-2">
+          <div class="flex items-center justify-between mb-4">
+            <h3 class="text-lg font-bold">System Health</h3>
+            <div class="flex items-center space-x-2">
+              <div class="flex items-center">
+                <div class="w-3 h-3 rounded-full bg-green-500 mr-1"></div>
+                <span class="text-xs">Operational</span>
+              </div>
             </div>
           </div>
+          <div class="h-48 flex items-end space-x-1 justify-center">
+            <div class="w-8 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 80%;">
+              <div class="absolute bottom-0 w-full bg-gradient-to-t from-green-500 to-emerald-400 rounded-t chart-bar" style="--target-height: 80%;"></div>
+            </div>
+            <div class="w-8 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 95%;">
+              <div class="absolute bottom-0 w-full bg-gradient-to-t from-green-500 to-emerald-400 rounded-t chart-bar" style="--target-height: 95%;"></div>
+            </div>
+            <div class="w-8 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 70%;">
+              <div class="absolute bottom-0 w-full bg-gradient-to-t from-green-500 to-emerald-400 rounded-t chart-bar" style="--target-height: 70%;"></div>
+            </div>
+            <div class="w-8 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 90%;">
+              <div class="absolute bottom-0 w-full bg-gradient-to-t from-green-500 to-emerald-400 rounded-t chart-bar" style="--target-height: 90%;"></div>
+            </div>
+            <div class="w-8 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 85%;">
+              <div class="absolute bottom-0 w-full bg-gradient-to-t from-green-500 to-emerald-400 rounded-t chart-bar" style="--target-height: 85%;"></div>
+            </div>
+            <div class="w-8 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 92%;">
+              <div class="absolute bottom-0 w-full bg-gradient-to-t from-green-500 to-emerald-400 rounded-t chart-bar" style="--target-height: 92%;"></div>
+            </div>
+            <div class="w-8 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 75%;">
+              <div class="absolute bottom-0 w-full bg-gradient-to-t from-green-500 to-emerald-400 rounded-t chart-bar" style="--target-height: 75%;"></div>
+            </div>
           </div>
+          <div class="grid grid-cols-4 gap-2 mt-4 text-center text-xs">
+            <div>
+              <p class="text-slate-400">API</p>
+              <p class="text-green-400 font-medium">98%</p>
+            </div>
+            <div>
+              <p class="text-slate-400">Database</p>
+              <p class="text-green-400 font-medium">99%</p>
+            </div>
+            <div>
+              <p class="text-slate-400">Storage</p>
+              <p class="text-green-400 font-medium">95%</p>
+            </div>
+            <div>
+              <p class="text-slate-400">Network</p>
+              <p class="text-green-400 font-medium">97%</p>
             </div>
           </div>
         </div>
+        <div class="glass rounded-xl p-5">
+          <div class="flex items-center justify-between mb-4">
+            <h3 class="text-lg font-bold">AI Assistant</h3>
+            <span class="text-xs px-2 py-1 bg-emerald-600/20 text-emerald-400 rounded-full">Online</span>
+          </div>
+          <div class="flex items-center justify-center mb-4">
+            <div class="relative w-32 h-32">
+              <svg class="w-32 h-32 progress-ring" viewBox="0 0 100 100">
+                <circle class="text-slate-700" stroke-width="10" stroke="currentColor" fill="transparent" r="45" cx="50" cy="50" />
+                <circle class="progress-ring-circle" stroke-width="10" stroke-linecap="round" stroke="url(#gradient)" fill="transparent" r="45" cx="50" cy="50" stroke-dashoffset="283 - (283 * 87 / 100)" />
+                <defs>
+                  <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                    <stop offset="0%" stop-color="#8b5cf6" />
+                    <stop offset="100%" stop-color="#ec4899" />
+                  </linearGradient>
+                </defs>
+              </svg>
+              <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
+                <p class="text-2xl font-bold text-accent">87%</p>
+                <p class="text-xs text-slate-400">Efficiency</p>
+              </div>
+            </div>
           </div>
+          <div class="space-y-3">
+            <div class="flex items-center justify-between">
+              <span class="text-sm">Tasks Completed</span>
+              <span class="font-medium">42/50</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span class="text-sm">Response Time</span>
+              <span class="font-medium">120ms</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span class="text-sm">Accuracy</span>
+              <span class="font-medium">94%</span>
             </div>
           </div>
         </div>
       </div>
     </section>
     <!-- What-If Sim -->
     <section id="sim" class="scroll-mt-20">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-xl font-bold">What-If Simulator</h2>
+        <button class="text-sm glass px-3 py-1.5 rounded hover:bg-slate-700">Save Scenario</button>
       </div>
       <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div class="glass rounded-xl p-5">
           <div class="space-y-4">
             </div>
           </div>
         </div>
         <div class="glass rounded-xl p-5">
           <h3 class="text-sm font-medium mb-3">Projected Results</h3>
           <div class="space-y-3">
             </div>
           </div>
         </div>
         <div class="glass rounded-xl p-5">
           <h3 class="text-sm font-medium mb-3">Saved Scenarios</h3>
           <div class="space-y-2">
         </div>
       </div>
     </section>
+    <!-- Smart Product Manager -->
+    <section id="products" class="scroll-mt-20">
       <div class="flex items-center justify-between mb-4">
+        <h2 class="text-xl font-bold">Smart Product Manager</h2>
         <div class="flex items-center space-x-2">
+          <button id="bulkImportBtn" class="text-sm glass px-3 py-1.5 rounded hover:bg-gray-800/60 flex items-center space-x-1">
+            <i class="fas fa-file-import text-xs"></i>
+            <span>Bulk Import</span>
+          </button>
+          <button id="addProductBtn" class="text-sm glass px-3 py-1.5 rounded hover:bg-gray-800/60 flex items-center space-x-1">
             <i class="fas fa-plus text-xs"></i>
+            <span>Add Product</span>
           </button>
         </div>
       </div>
       <div class="glass rounded-xl overflow-x-auto">
+        <table id="productsTable" class="w-full text-sm">
+          <thead class="bg-gray-800">
             <tr>
+              <th class="p-3 text-left">Name</th>
+              <th class="p-3 text-left">SKU</th>
+              <th class="p-3 text-left">Price</th>
+              <th class="p-3 text-left">Stock</th>
               <th class="p-3 text-left">Status</th>
             </tr>
           </thead>
           <tbody>
             <tr class="border-t border-slate-700 hover:bg-slate-800/50">
+              <td class="p-3">Premium T-Shirt</td>
+              <td class="p-3">TSH-001</td>
+              <td class="p-3">$29.99</td>
               <td class="p-3">
+                <span class="px-2 py-1 rounded-full text-xs bg-emerald-600">42</span>
               </td>
               <td class="p-3">
+                <span class="text-xs px-2 py-1 rounded-full bg-slate-700">Active</span>
               </td>
             </tr>
             <tr class="border-t border-slate-700 hover:bg-slate-800/50">
+              <td class="p-3">Wireless Headphones</td>
+              <td class="p-3">WH-002</td>
+              <td class="p-3">$89.99</td>
               <td class="p-3">
+                <span class="px-2 py-1 rounded-full text-xs bg-emerald-600">15</span>
               </td>
               <td class="p-3">
+                <span class="text-xs px-2 py-1 rounded-full bg-slate-700">Active</span>
               </td>
             </tr>
+            <tr class="border-t border-slate-700 hover:bg-slate-800/50">
+              <td class="p-3">Smart Watch</td>
+              <td class="p-3">SW-003</td>
+              <td class="p-3">$199.99</td>
               <td class="p-3">
+                <span class="px-2 py-1 rounded-full text-xs bg-red-600">3</span>
               </td>
               <td class="p-3">
+                <span class="text-xs px-2 py-1 rounded-full bg-slate-700">Active</span>
               </td>
             </tr>
           </tbody>
         </table>
       </div>
     </section>
     <!-- Integrations -->
     <section id="ads" class="scroll-mt-20">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-xl font-bold">Integrations</h2>
+        <button class="text-sm glass px-3 py-1.5 rounded hover:bg-slate-700 flex items-center space-x-1">
           <i class="fas fa-plus text-xs"></i>
           <span>Add Integration</span>
         </button>
       </div>
       <div class="flex flex-wrap gap-2 mb-4">
+        <button class="px-3 py-1.5 rounded-md text-sm transition bg-accent text-white">All</button>
+        <button class="px-3 py-1.5 rounded-md text-sm transition glass hover:bg-slate-700">Ads</button>
+        <button class="px-3 py-1.5 rounded-md text-sm transition glass hover:bg-slate-700">Stores</button>
+        <button class="px-3 py-1.5 rounded-md text-sm transition glass hover:bg-slate-700">Email</button>
+        <button class="px-3 py-1.5 rounded-md text-sm transition glass hover:bg-slate-700">Automation</button>
       </div>
       <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
         <div class="glass rounded-xl p-4 hover:bg-slate-700/50 transition cursor-pointer">
           <div class="flex items-start justify-between mb-3">
+            <div class="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center">
+              <i class="fab fa-wordpress text-accent text-xl"></i>
             </div>
             <span class="text-xs px-2 py-1 rounded-full bg-slate-700/50 text-slate-400">Disconnected</span>
           </div>
           <p class="font-semibold mb-1">WooCommerce</p>
           <p class="text-xs text-slate-400 mb-3">Connect your WooCommerce store</p>
+          <div class="w-full bg-slate-700 rounded-full h-2 mb-1">
+            <div class="bg-accent h-2 rounded-full" style="width: 0%"></div>
           </div>
           <div class="flex justify-between text-xs text-slate-400">
             <span>Not connected</span>
             <span>E-commerce</span>
           </div>
         </div>
         <div class="glass rounded-xl p-4 hover:bg-slate-700/50 transition cursor-pointer">
           <div class="flex items-start justify-between mb-3">
+            <div class="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center">
+              <i class="fab fa-shopify text-accent text-xl"></i>
             </div>
             <span class="text-xs px-2 py-1 rounded-full bg-emerald-600/20 text-emerald-400">Connected</span>
           </div>
           <p class="font-semibold mb-1">Shopify</p>
           <p class="text-xs text-slate-400 mb-3">Connect your Shopify store</p>
+          <div class="w-full bg-slate-700 rounded-full h-2 mb-1">
+            <div class="bg-accent h-2 rounded-full" style="width: 100%"></div>
           </div>
           <div class="flex justify-between text-xs text-slate-400">
             <span>Connected</span>
             <span>E-commerce</span>
           </div>
         </div>
+        <div class="glass rounded-xl p-4 hover:bg-slate-700/50 transition cursor-pointer">
+          <div class="flex items-start justify-between mb-3">
+            <div class="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center">
+              <i class="fab fa-google text-accent text-xl"></i>
+            </div>
+            <span class="text-xs px-2 py-1 rounded-full bg-emerald-600/20 text-emerald-400">Connected</span>
+          </div>
+          <p class="font-semibold mb-1">Google Ads</p>
+          <p class="text-xs text-slate-400 mb-3">Connect your Google Ads account</p>
+          <div class="w-full bg-slate-700 rounded-full h-2 mb-1">
+            <div class="bg-accent h-2 rounded-full" style="width: 85%"></div>
+          </div>
+          <div class="flex justify-between text-xs text-slate-400">
+            <span>Connected</span>
+            <span>Advertising</span>
+          </div>
+        </div>
+        <div class="glass rounded-xl p-4 hover:bg-slate-700/50 transition cursor-pointer">
+          <div class="flex items-start justify-between mb-3">
+            <div class="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center">
+              <i class="fab fa-facebook text-accent text-xl"></i>
+            </div>
+            <span class="text-xs px-2 py-1 rounded-full bg-slate-700/50 text-slate-400">Disconnected</span>
+          </div>
+          <p class="font-semibold mb-1">Facebook</p>
+          <p class="text-xs text-slate-400 mb-3">Connect your Facebook page</p>
+          <div class="w-full bg-slate-700 rounded-full h-2 mb-1">
+            <div class="bg-accent h-2 rounded-full" style="width: 0%"></div>
+          </div>
+          <div class="flex justify-between text-xs text-slate-400">
+            <span>Not connected</span>
+            <span>Social</span>
+          </div>
+        </div>
       </div>
     </section>
+    <!-- AI Usage Section -->
+    <section id="ai" class="scroll-mt-20">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-xl font-bold">AI Usage</h2>
+        <div class="relative">
+          <select class="glass text-sm px-3 py-1.5 rounded appearance-none pr-7">
+            <option value="7d">Last 7 Days</option>
+            <option value="30d">Last 30 Days</option>
+            <option value="90d">Last 90 Days</option>
           </select>
+          <i class="fas fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-xs pointer-events-none"></i>
         </div>
       </div>
+      <div class="grid md:grid-cols-2 gap-6">
+        <div class="glass rounded-xl p-4">
+          <div class="flex items-center justify-between mb-4">
+            <h3 class="font-medium">API Usage</h3>
+            <div class="flex items-center space-x-2">
+              <div class="flex items-center">
+                <div class="w-3 h-3 rounded-full bg-accent mr-1"></div>
+                <span class="text-xs">This Month</span>
+              </div>
+              <div class="flex items-center">
+                <div class="w-3 h-3 rounded-full bg-slate-500 mr-1"></div>
+                <span class="text-xs">Last Month</span>
+              </div>
+            </div>
+          </div>
+          <div class="h-48 flex items-end space-x-1 justify-center">
+            <div class="w-6 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 60%;">
+              <div class="absolute bottom-0 w-full bg-gradient-to-t from-accent to-purple-500 rounded-t chart-bar" style="--target-height: 60%;"></div>
+            </div>
+            <div class="w-6 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 75%;">
+              <div class="absolute bottom-0 w-full bg-gradient-to-t from-accent to-purple-500 rounded-t chart-bar" style="--target-height: 75%;"></div>
+            </div>
+            <div class="w-6 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 90%;">
+              <div class="absolute bottom-0 w-full bg-gradient-to-t from-accent to-purple-500 rounded-t chart-bar" style="--target-height: 90%;"></div>
+            </div>
+            <div class="w-6 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 85%;">
+              <div class="absolute bottom-0 w-full bg-gradient-to-t from-accent to-purple-500 rounded-t chart-bar" style="--target-height: 85%;"></div>
+            </div>
+            <div class="w-6 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 95%;">
+              <div class="absolute bottom-0 w-full bg-gradient-to-t from-accent to-purple-500 rounded-t chart-bar" style="--target-height: 95%;"></div>
+            </div>
+            <div class="w-6 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 80%;">
+              <div class="absolute bottom-0 w-full bg-gradient-to-t from-accent to-purple-500 rounded-t chart-bar" style="--target-height: 80%;"></div>
+            </div>
+            <div class="w-6 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 70%;">
+              <div class="absolute bottom-0 w-full bg-gradient-to-t from-accent to-purple-500 rounded-t chart-bar" style="--target-height: 70%;"></div>
+            </div>
+          </div>
         </div>
+        <div class="glass rounded-xl p-4">
+          <h3 class="font-medium mb-4">Cost Summary</h3>
+          <div class="grid grid-cols-2 gap-4">
+            <div class="bg-slate-800/50 rounded-lg p-3">
+              <p class="text-sm text-slate-400 mb-1">This Month</p>
+              <p class="text-xl font-bold">$1,245</p>
+            </div>
+            <div class="bg-slate-800/50 rounded-lg p-3">
+              <p class="text-sm text-slate-400 mb-1">Last Month</p>
+              <p class="text-xl font-bold">$1,080</p>
+            </div>
+            <div class="bg-slate-800/50 rounded-lg p-3">
+              <p class="text-sm text-slate-400 mb-1">Change</p>
+              <p class="text-xl font-bold text-emerald-400">+15.3%</p>
+            </div>
+            <div class="bg-slate-800/50 rounded-lg p-3">
+              <p class="text-sm text-slate-400 mb-1">Forecast</p>
+              <p class="text-xl font-bold">$1,450</p>
+            </div>
+          </div>
         </div>
       </div>
     </section>
     <!-- Trends & Recommendations -->
     <section id="trends" class="scroll-mt-20">
       <h2 class="text-xl font-bold mb-4">Trends & Recommendations</h2>
       <div class="glass rounded-xl p-4">
+        <ul class="space-y-3">
+          <li class="flex items-start">
+            <div class="w-8 h-8 rounded-full bg-red-500/20 flex items-center justify-center mr-3 mt-1 flex-shrink-0">
+              <i class="fas fa-fire text-red-400"></i>
+            </div>
+            <div>
+              <p class="font-medium">Steam Wallet Cards selling 4× last week</p>
+              <p class="text-xs text-slate-400">Trending in Gaming</p>
+            </div>
+          </li>
+          <li class="flex items-start">
+            <div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center mr-3 mt-1 flex-shrink-0">
+              <i class="fas fa-lightbulb text-blue-400"></i>
+            </div>
+            <div>
+              <p class="font-medium">AI: "Boost Netflix KSA ads 9 PM-11 PM"</p>
+              <p class="text-xs text-slate-400">AI Recommendation</p>
+            </div>
+          </li>
+          <li class="flex items-start">
+            <div class="w-8 h-8 rounded-full bg-green-500/20 flex items-center justify-center mr-3 mt-1 flex-shrink-0">
+              <i class="fas fa-chart-line text-green-400"></i>
+            </div>
+            <div>
+              <p class="font-medium">TikTok hashtag #PSNSaudi trending</p>
+              <p class="text-xs text-slate-400">Social Media</p>
+            </div>
+          </li>
         </ul>
       </div>
     </section>
   </main>
   <!-- Command Palette Modal -->
   <div id="commandModal" class="fixed inset-0 bg-black/50 z-50 hidden items-start justify-center pt-20">
     <div class="glass w-full max-w-lg rounded-xl overflow-hidden">
       </div>
       <div id="cmdResults" class="max-h-96 overflow-y-auto">
         <!-- dynamic results -->
+        <div class="p-3 hover:bg-slate-700/50 cursor-pointer flex items-center">
+          <i class="fas fa-plus text-sm w-5 text-center text-accent mr-3"></i>
+          <span>Add Product</span>
+        </div>
+        <div class="p-3 hover:bg-slate-700/50 cursor-pointer flex items-center">
+          <i class="fas fa-file-import text-sm w-5 text-center text-accent mr-3"></i>
+          <span>Bulk Import Products</span>
+        </div>
+        <div class="p-3 hover:bg-slate-700/50 cursor-pointer flex items-center">
+          <i class="fas fa-cog text-sm w-5 text-center text-accent mr-3"></i>
+          <span>System Settings</span>
+        </div>
+        <div class="p-3 hover:bg-slate-700/50 cursor-pointer flex items-center">
+          <i class="fas fa-robot text-sm w-5 text-center text-accent mr-3"></i>
+          <span>Ask AI Assistant</span>
+        </div>
+        <div class="p-3 hover:bg-slate-700/50 cursor-pointer flex items-center">
+          <i class="fas fa-chart-line text-sm w-5 text-center text-accent mr-3"></i>
+          <span>View Analytics</span>
+        </div>
       </div>
     </div>
   </div>
   <!-- Floating Action Button -->
+  <div class="fixed bottom-6 right-6 z-40 flex flex-col items-end space-y-3">
+    <button id="primaryFab" class="glass p-4 rounded-full shadow-xl fab-shadow hover:scale-110 transition pulse-glow">
+      <i class="fas fa-plus text-lg"></i>
     </button>
+    <button id="addProductFab" class="glass p-3 rounded-full shadow-lg fab-shadow transition hover:scale-110 neon hidden">
       <i class="fas fa-box-open"></i>
     </button>
+    <button id="chatToggleFab" class="glass p-3 rounded-full shadow-lg fab-shadow transition hover:scale-110 hidden">
       <i class="fas fa-robot"></i>
     </button>
   </div>
   <!-- Live Chat Panel -->
   <div id="chatPanel" class="fixed inset-x-0 bottom-0 z-50 glass rounded-t-xl shadow-2xl transform translate-y-full transition-transform duration-300 md:max-w-md md:mx-auto">
     <header class="flex items-center justify-between p-4 border-b border-slate-700">
       <div class="flex items-center space-x-2">
         <i class="fas fa-robot text-accent"></i>
+        <span class="font-bold">AI Assistant</span>
       </div>
       <button id="closeChat" class="p-1 rounded-full hover:bg-slate-700">
         <i class="fas fa-times"></i>
       </button>
     </header>
+    <div id="chatMessages" class="h-[60vh] md:h-[70vh] overflow-y-auto p-4 space-y-3">
+      <div class="flex justify-start">
+        <div class="max-w-[80%] px-4 py-3 rounded-xl glass">
+          <p>Hello Alex! How can I assist you today?</p>
+        </div>
+      </div>
+      <div class="flex justify-end">
+        <div class="max-w-[80%] px-4 py-3 rounded-xl bg-accent text-white">
+          <p>Can you show me the sales report for last month?</p>
+        </div>
+      </div>
+      <div class="flex justify-start">
+        <div class="max-w-[80%] px-4 py-3 rounded-xl glass">
+          <p>Sure! Here's the sales report for last month. Revenue was $1,247 with a 5.2% increase from the previous month.</p>
+        </div>
+      </div>
+    </div>
     <footer class="p-4 border-t border-slate-700 flex items-center space-x-2">
       <button id="emojiToggle" class="p-2 rounded-full hover:bg-slate-700">
         <i class="far fa-face-smile"></i>
       </button>
       <label class="p-2 rounded-full hover:bg-slate-700 cursor-pointer">
         <i class="fas fa-paperclip"></i>
+        <input type="file" multiple accept="image/*,.pdf" class="hidden">
       </label>
+      <button id="recordBtn" class="p-2 rounded-full hover:bg-slate-700">
+        <i class="fas fa-microphone-lines"></i>
       </button>
       <input id="chatInput" type="text" placeholder="Type a message…" class="flex-1 bg-transparent outline-none" />
       <button id="sendMessage" class="p-2 rounded-full hover:bg-slate-700">
       </button>
     </footer>
   </div>
   <!-- Settings Modal -->
   <div id="settingsModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
     <div class="glass w-full max-w-md rounded-xl p-6 space-y-4">
       </div>
       <div>
         <label class="block text-sm mb-1">Accent Color</label>
+        <input id="accentColorPicker" type="color" value="#a855f7" class="w-full h-10 rounded cursor-pointer" />
       </div>
       <div>
         <label class="block text-sm mb-1">Theme</label>
+        <button id="themeToggleBtn" class="glass px-3 py-2 rounded w-full text-left">Dark Mode</button>
       </div>
       <div>
         <label class="flex items-center space-x-2">
+          <input id="pushToggle" type="checkbox" class="accent-accent" checked>
           <span class="text-sm">Enable Push Notifications</span>
         </label>
       </div>
       <div class="text-right">
+        <button id="saveSettings" class="px-4 py-2 bg-accent rounded hover:bg-opacity-80">Save Changes</button>
       </div>
     </div>
   </div>
   <script>
+    // DOM Elements
+    const toggleSidebarBtn = document.getElementById('toggleSidebar');
+    const sidebar = document.getElementById('sidebar');
+    const openCommandBtn = document.getElementById('openCommand');
+    const commandModal = document.getElementById('commandModal');
+    const cmdInput = document.getElementById('cmdInput');
+    const primaryFab = document.getElementById('primaryFab');
+    const addProductFab = document.getElementById('addProductFab');
+    const chatToggleFab = document.getElementById('chatToggleFab');
+    const chatPanel = document.getElementById('chatPanel');
+    const closeChatBtn = document.getElementById('closeChat');
+    const themeToggleBtn = document.getElementById('themeToggleBtn');
+    const themeToggle = document.getElementById('themeToggle');
+    const settingsModal = document.getElementById('settingsModal');
+    const closeSettingsBtn = document.getElementById('closeSettings');
+    const saveSettingsBtn = document.getElementById('saveSettings');
+    const accentColorPicker = document.getElementById('accentColorPicker');
+    // State
+    let isSidebarExpanded = true;
+    let isChatOpen = false;
+    let isDarkMode = true;
+    // Toggle sidebar
+    toggleSidebarBtn.addEventListener('click', () => {
+      isSidebarExpanded = !isSidebarExpanded;
+      sidebar.classList.toggle('sidebar-expanded', isSidebarExpanded);
+      sidebar.classList.toggle('sidebar-collapsed', !isSidebarExpanded);
+      const sidebarTexts = document.querySelectorAll('.sidebar-text');
+      sidebarTexts.forEach(text => {
+        if (isSidebarExpanded) {
+          text.classList.remove('hidden');
         } else {
+          text.classList.add('hidden');
         }
+      });
+      const icon = toggleSidebarBtn.querySelector('i');
+      if (isSidebarExpanded) {
+        icon.classList.remove('fa-chevron-right');
+        icon.classList.add('fa-chevron-left');
+      } else {
+        icon.classList.remove('fa-chevron-left');
+        icon.classList.add('fa-chevron-right');
       }
     });
+    // Command palette
+    openCommandBtn.addEventListener('click', () => {
+      commandModal.classList.remove('hidden');
+      cmdInput.focus();
+    });
+    cmdInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        commandModal.classList.add('hidden');
+      }
+    });
+    commandModal.addEventListener('click', (e) => {
+      if (e.target === commandModal) {
+        commandModal.classList.add('hidden');
+      }
+    });
+    // Floating action button
+    primaryFab.addEventListener('click', () => {
+      const isHidden = addProductFab.classList.contains('hidden');
+      if (isHidden) {
+        addProductFab.classList.remove('hidden');
+        chatToggleFab.classList.remove('hidden');
         setTimeout(() => {
+          addProductFab.classList.add('animate-fadeIn');
+          chatToggleFab.classList.add('animate-fadeIn');
+        }, 10);
+      } else {
+        addProductFab.classList.add('hidden');
+        chatToggleFab.classList.add('hidden');
+        addProductFab.classList.remove('animate-fadeIn');
+        chatToggleFab.classList.remove('animate-fadeIn');
+      }
+    });
+    // Chat panel
+    chatToggleFab.addEventListener('click', () => {
+      isChatOpen = !isChatOpen;
+      chatPanel.classList.toggle('translate-y-full', !isChatOpen);
+      chatPanel.classList.toggle('translate-y-0', isChatOpen);
+    });
+    closeChatBtn.addEventListener('click', () => {
+      isChatOpen = false;
+      chatPanel.classList.add('translate-y-full');
+      chatPanel.classList.remove('translate-y-0');
+    });
+    // Theme toggle
+    themeToggleBtn.addEventListener('click', () => {
+      isDarkMode = !isDarkMode;
+      document.documentElement.classList.toggle('dark', isDarkMode);
+      themeToggleBtn.textContent = isDarkMode ? 'Dark Mode' : 'Light Mode';
+      themeToggle.innerHTML = isDarkMode ? '<i class="fas fa-sun text-yellow-300"></i>' : '<i class="fas fa-moon text-slate-300"></i>';
+    });
+    themeToggle.addEventListener('click', () => {
+      isDarkMode = !isDarkMode;
+      document.documentElement.classList.toggle('dark', isDarkMode);
+      themeToggle.innerHTML = isDarkMode ? '<i class="fas fa-sun text-yellow-300"></i>' : '<i class="fas fa-moon text-slate-300"></i>';
+      themeToggleBtn.textContent = isDarkMode ? 'Dark Mode' : 'Light Mode';
+    });
+    // Settings modal
+    document.querySelectorAll('[id$="Fab"]').forEach(btn => {
+      if (btn.id !== 'primaryFab') {
+        btn.addEventListener('click', () => {
+          settingsModal.classList.remove('hidden');
         });
       }
+    });
+    closeSettingsBtn.addEventListener('click', () => {
+      settingsModal.classList.add('hidden');
+    });
+    saveSettingsBtn.addEventListener('click', () => {
+      const newAccent = accentColorPicker.value;
+      document.documentElement.style.setProperty('--accent', newAccent);
+      settingsModal.classList.add('hidden');
+    });
+    // Close modals when clicking outside
+    document.addEventListener('click', (e) => {
+      if (commandModal.classList.contains('hidden') &&
+          settingsModal.classList.contains('hidden') &&
+          !isChatOpen) return;
+      if (!commandModal.contains(e.target) &&
+          e.target !== openCommandBtn &&
+          !commandModal.classList.contains('hidden')) {
+        commandModal.classList.add('hidden');
+      }
+      if (!settingsModal.contains(e.target) &&
+          e.target !== primaryFab &&
+          e.target !== addProductFab &&
+          e.target !== chatToggleFab &&
+          !settingsModal.classList.contains('hidden')) {
+        settingsModal.classList.add('hidden');
+      }
+    });
+    // Initialize
+    document.addEventListener('DOMContentLoaded', () => {
+      // Simulate loading data
+      setTimeout(() => {
+        const bars = document.querySelectorAll('.chart-bar');
+        bars.forEach(bar => {
+          bar.style.height = bar.style.getPropertyValue('--target-height');
+        });
+      }, 500);
+    });
   </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=fsalmansour/s" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>