Hugging Face's logo

Spaces:
fsalmansour
/
s
Running

App Files Community
fsalmansour commited on
Commit
2402d07
·
verified ·
1 Parent(s): 2589a0a

You are an expert frontend developer specializing in modern SaaS dashboards and AI-powered platforms. Your task is to dramatically enhance the UI/UX of an admin dashboard similar to the attached screenshot (DeepSite). The current design has a large empty space in the center and lacks interactive, modern touches. Please implement the following improvements: 1. Reduce or eliminate the large empty gap in the center by adding a dynamic Hero Widget (e.g., Start New Task, drag-and-drop area, animated welcome banner, quick stats). 2. Sidebar: Increase icon size, add tooltips, highlight active icon, add labels (on hover or always), make sidebar collapsible for mobile. 3. Top bar: Add glass blur, group language/help/settings, enlarge avatar with status indicator. 4. Stats cards: Add big icons, percentage arrows, bold fonts, animated effects. 5. Add a floating action button (FAB) for quick actions. 6. Add a command/search bar (Ctrl/Cmd+K) for actions and navigation. 7. Real-time notifications with badge. 8. Add system health & AI status widget (animated chart). 9. Customizable dashboard: allow dragging/rearranging widgets. 10. Theme toggle (dark/light). 11. Fully responsive design. 12. Add animations & microinteractions everywhere. 13. Add animated background elements (gradient, blurred shapes, or particles). 14. Smart quick stats row at the top. 15. Personalized welcome section: greet user by name, show AI status, suggest actions. Optional: Drag-and-drop file upload, system status bar, recent activity, tips, contextual help popovers. Redesign and implement all above features with modular code (e.g., React + Tailwind), using demo/sample content. Make the design look futuristic, premium, and extremely user-friendly. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1421 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: S
3
- emoji: 🔥
4
- colorFrom: green
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: s
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1421 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
6
+ <title>NeoVista AI Control Center</title>
7
+
8
+ <!-- Tailwind CSS -->
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ darkMode: 'class',
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ accent: '#a855f7',
17
+ success: '#10b981',
18
+ info: '#3b82f6',
19
+ primary: {
20
+ 50: '#f0f9ff',
21
+ 100: '#e0f2fe',
22
+ 200: '#bae6fd',
23
+ 300: '#7dd3fc',
24
+ 400: '#a855f7',
25
+ 500: '#9333ea',
26
+ 600: '#7e22ce',
27
+ 700: '#6a10a1',
28
+ 800: '#580c84',
29
+ 900: '#4c0a6d',
30
+ }
31
+ }
32
+ }
33
+ }
34
+ }
35
+ </script>
36
+
37
+ <!-- Font Awesome -->
38
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
39
+ <!-- Google Fonts -->
40
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
41
+
42
+ <style>
43
+ :root { --accent: #a855f7; }
44
+ html,body{overflow-x:hidden;min-width:320px}
45
+ body {
46
+ font-family: 'Inter', sans-serif;
47
+ background: #121212;
48
+ color: #e5e7eb;
49
+ -webkit-tap-highlight-color:transparent;
50
+ }
51
+ .blink { animation: blink 1s infinite; }
52
+ @keyframes blink { 50% { opacity: 0; } }
53
+ .glass {
54
+ backdrop-filter: blur(25px) saturate(200%);
55
+ border: 1px solid rgba(255, 255, 255, 0.18);
56
+ background: rgba(30, 41, 59, 0.5);
57
+ }
58
+ .glass-light {
59
+ background: rgba(248, 250, 252, 0.6);
60
+ color: #0f172a;
61
+ }
62
+ .kpi-card {
63
+ transition: transform 0.3s, box-shadow 0.3s;
64
+ }
65
+ .kpi-card:hover {
66
+ transform: translateY(-4px);
67
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
68
+ }
69
+ .tooltip:hover .tooltip-text {
70
+ visibility: visible;
71
+ opacity: 1;
72
+ }
73
+ .tooltip-text {
74
+ visibility: hidden;
75
+ opacity: 0;
76
+ position: absolute;
77
+ z-index: 1;
78
+ bottom: 100%;
79
+ left: 50%;
80
+ transform: translateX(-50%);
81
+ background: rgba(30, 41, 59, 0.9);
82
+ color: white;
83
+ padding: 0.5rem;
84
+ border-radius: 0.5rem;
85
+ font-size: 0.75rem;
86
+ white-space: nowrap;
87
+ transition: opacity 0.3s;
88
+ }
89
+ @keyframes pulse {
90
+ 0%, 100% { opacity: 1; }
91
+ 50% { opacity: 0.5; }
92
+ }
93
+ .animate-pulse {
94
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
95
+ }
96
+ .fab-shadow {
97
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
98
+ }
99
+ .progress-ring {
100
+ transform: rotate(-90deg);
101
+ }
102
+ .progress-ring-circle {
103
+ stroke-dasharray: 283;
104
+ stroke-dashoffset: 283;
105
+ transition: stroke-dashoffset 0.5s;
106
+ }
107
+ </style>
108
+ </head>
109
+
110
+ <body class="bg-slate-900 text-slate-200 antialiased overflow-x-hidden">
111
+ <!-- App Bar (enhanced) -->
112
+ <header class="glass fixed top-0 left-0 right-0 z-50 backdrop-blur-md">
113
+ <div class="container mx-auto px-4 h-16 flex items-center justify-between">
114
+ <!-- Logo -->
115
+ <div class="flex items-center space-x-3">
116
+ <div class="w-9 h-9 rounded-full bg-gradient-to-br from-indigo-500 to-cyan-400 flex items-center justify-center">
117
+ <i class="fas fa-brain text-white text-sm"></i>
118
+ </div>
119
+ <span class="font-extrabold text-lg hidden sm:inline">Store AI</span>
120
+ </div>
121
+
122
+ <!-- Command Palette -->
123
+ <div class="hidden md:flex flex-1 max-w-xs mx-4">
124
+ <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">
125
+ <i class="fas fa-search text-xs"></i>
126
+ <span>Search commands...</span>
127
+ <kbd class="ml-auto text-xs px-2 py-1 bg-slate-700 rounded">⌘K</kbd>
128
+ </button>
129
+ </div>
130
+
131
+ <!-- Nav Icons -->
132
+ <div class="flex items-center space-x-3">
133
+ <button class="text-sm font-semibold hover:opacity-80 transition" title="Switch to Arabic">EN</button>
134
+ <button id="themeToggle" class="p-1.5 rounded-full hover:bg-slate-700 transition tooltip">
135
+ <i class="fas fa-sun text-yellow-300"></i>
136
+ <span class="tooltip-text">Toggle Theme</span>
137
+ </button>
138
+ <button class="p-1.5 rounded-full hover:bg-slate-700 transition tooltip">
139
+ <i class="fas fa-microphone text-red-400"></i>
140
+ <span class="tooltip-text">Voice Command</span>
141
+ </button>
142
+ <div class="relative">
143
+ <button class="p-1.5 rounded-full hover:bg-slate-700 relative">
144
+ <i class="fas fa-bell text-xl"></i>
145
+ <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>
146
+ </button>
147
+ </div>
148
+ <div class="relative">
149
+ <button class="flex items-center space-x-2 hover:bg-slate-700 transition rounded-full p-1">
150
+ <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
151
+ <span class="text-xs font-bold">AI</span>
152
+ </div>
153
+ </button>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </header>
158
+
159
+ <!-- Sidebar (enhanced) -->
160
+ <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">
161
+ <nav class="flex flex-col items-center space-y-4 pt-3">
162
+ <a href="#home" class="group relative w-12 h-12 flex items-center justify-center rounded-xl hover:bg-slate-700/50">
163
+ <i class="fas fa-home text-xl"></i>
164
+ <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>
165
+ </a>
166
+ <a href="#products" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Smart Products">
167
+ <i class="fas fa-box-open text-lg"></i>
168
+ </a>
169
+ <a href="#orders" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Orders & Invoices">
170
+ <i class="fas fa-file-invoice-dollar text-lg"></i>
171
+ </a>
172
+ <a href="#integrations" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Store Integrations">
173
+ <i class="fas fa-store text-lg"></i>
174
+ </a>
175
+ <a href="#social" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Social Media Tools">
176
+ <i class="fas fa-share-alt text-lg"></i>
177
+ </a>
178
+ <a href="#ai" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="AI Assistant">
179
+ <i class="fas fa-robot text-lg"></i>
180
+ </a>
181
+ <a href="#automations" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Automations">
182
+ <i class="fas fa-cogs text-lg"></i>
183
+ </a>
184
+ <a href="#shipping" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Shipping & Invoices">
185
+ <i class="fas fa-shipping-fast text-lg"></i>
186
+ </a>
187
+ <a href="#payments" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Payments">
188
+ <i class="fas fa-credit-card text-lg"></i>
189
+ </a>
190
+ <a href="#social" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Social Publisher">
191
+ <i class="fas fa-share-alt text-lg"></i>
192
+ </a>
193
+ <a href="#trends" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Trends">
194
+ <i class="fas fa-fire text-lg"></i>
195
+ </a>
196
+ <a href="#settings" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Settings">
197
+ <i class="fas fa-sliders-h text-lg"></i>
198
+ </a>
199
+ <a href="#feedback" class="tooltip group relative p-2 rounded-lg hover:bg-gray-800/50" title="Feedback">
200
+ <i class="fas fa-comment-dots text-lg"></i>
201
+ </a>
202
+ </nav>
203
+ </aside>
204
+
205
+ <!-- Mobile Hamburger -->
206
+ <button id="openSidebar" class="glass fixed top-20 left-4 z-30 p-3 rounded-full lg:hidden fab-shadow touch-manipulation">
207
+ <i class="fas fa-bars"></i>
208
+ </button>
209
+
210
+ <!-- Main Content -->
211
+ <main class="pt-20 lg:pl-20 px-4 pb-32 space-y-16">
212
+ <!-- Hero Widget -->
213
+ <section id="home" class="scroll-mt-20">
214
+ <div class="relative glass rounded-xl p-6 mb-6 overflow-hidden">
215
+ <!-- animated bg -->
216
+ <div class="absolute inset-0 opacity-20">
217
+ <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>
218
+ <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>
219
+ </div>
220
+ <div class="relative z-10">
221
+ <h1 class="text-3xl font-bold mb-2">Welcome back, Alex! 🤖</h1>
222
+ <p class="text-gray-400 mb-4">
223
+ Your AI assistant is <span class="text-green-400 font-bold">Online</span> ·
224
+ <span class="text-xs glass px-2 py-1 rounded-full">Next task in 5 min</span>
225
+ </p>
226
+ <div class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-3">
227
+ <button class="glass px-3 py-2 rounded-lg text-xs hover:bg-slate-700 transition">Start Task</button>
228
+ <button class="glass px-3 py-2 rounded-lg text-xs hover:bg-slate-700 transition">Upload CSV</button>
229
+ <button class="glass px-3 py-2 rounded-lg text-xs hover:bg-slate-700 transition">View Reports</button>
230
+ <button class="glass px-3 py-2 rounded-lg text-xs hover:bg-slate-700 transition">Ask AI</button>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Upgrade Banner -->
236
+ <div class="glass rounded-xl p-4 mb-6 flex items-center gap-4">
237
+ <div class="text-purple-400 text-xl">
238
+ <i class="fas fa-rocket"></i>
239
+ </div>
240
+ <div class="flex-1">
241
+ <p class="font-bold">Upgrade to Pro</p>
242
+ <p class="text-sm text-gray-400">Unlock AI bulk actions, advanced analytics & priority support.</p>
243
+ </div>
244
+ <button class="px-4 py-2 bg-purple-600 rounded hover:bg-purple-500 transition text-sm font-semibold">Upgrade</button>
245
+ </div>
246
+
247
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
248
+ <div class="kpi-card glass p-4 rounded-xl">
249
+ <div class="flex items-center justify-between mb-2">
250
+ <i class="fas fa-dollar-sign text-3xl text-emerald-400"></i>
251
+ <span class="text-xs px-2 py-1 bg-emerald-600/20 text-emerald-400 rounded-full">
252
+ <i class="fas fa-caret-up"></i> 5.2 %
253
+ </span>
254
+ </div>
255
+ <p class="text-3xl font-extrabold">$1,247</p>
256
+ <p class="text-xs text-slate-400">Revenue</p>
257
+ </div>
258
+
259
+ <div class="kpi-card glass p-4 rounded-xl">
260
+ <div class="flex items-center justify-between mb-2">
261
+ <div class="flex items-center">
262
+ <div class="w-8 h-8 rounded-full bg-accent/10 flex items-center justify-center mr-2">
263
+ <i class="fas fa-shopping-cart text-accent text-sm"></i>
264
+ </div>
265
+ <span class="text-sm">Orders</span>
266
+ </div>
267
+ <button class="text-xs text-slate-400 hover:text-accent">
268
+ <i class="fas fa-info-circle"></i>
269
+ </button>
270
+ </div>
271
+ <p class="text-2xl font-bold mb-1">28</p>
272
+ <div class="flex items-center">
273
+ <span class="text-xs text-red-400">
274
+ <i class="fas fa-caret-down"></i>
275
+ <span>2.1%</span>
276
+ </span>
277
+ <span class="text-xs text-slate-400 ml-2">vs yesterday</span>
278
+ </div>
279
+ </div>
280
+
281
+ <div class="kpi-card glass p-4 rounded-xl">
282
+ <div class="flex items-center justify-between mb-2">
283
+ <div class="flex items-center">
284
+ <div class="w-8 h-8 rounded-full bg-accent/10 flex items-center justify-center mr-2">
285
+ <i class="fas fa-chart-line text-accent text-sm"></i>
286
+ </div>
287
+ <span class="text-sm">Conversion</span>
288
+ </div>
289
+ <button class="text-xs text-slate-400 hover:text-accent">
290
+ <i class="fas fa-info-circle"></i>
291
+ </button>
292
+ </div>
293
+ <p class="text-2xl font-bold mb-1">12.2%</p>
294
+ <div class="flex items-center">
295
+ <span class="text-xs text-emerald-400">
296
+ <i class="fas fa-caret-up"></i>
297
+ <span>1.8%</span>
298
+ </span>
299
+ <span class="text-xs text-slate-400 ml-2">vs yesterday</span>
300
+ </div>
301
+ </div>
302
+
303
+ <div class="kpi-card glass p-4 rounded-xl">
304
+ <div class="flex items-center justify-between mb-2">
305
+ <div class="flex items-center">
306
+ <div class="w-8 h-8 rounded-full bg-accent/10 flex items-center justify-center mr-2">
307
+ <i class="fas fa-heartbeat text-accent text-sm"></i>
308
+ </div>
309
+ <span class="text-sm">Health</span>
310
+ </div>
311
+ <button class="text-xs text-slate-400 hover:text-accent">
312
+ <i class="fas fa-info-circle"></i>
313
+ </button>
314
+ </div>
315
+ <p class="text-2xl font-bold mb-1">97%</p>
316
+ <div class="flex items-center">
317
+ <span class="text-xs text-emerald-400">
318
+ <i class="fas fa-caret-up"></i>
319
+ <span>0.5%</span>
320
+ </span>
321
+ <span class="text-xs text-slate-400 ml-2">vs yesterday</span>
322
+ </div>
323
+ </div>
324
+ </div>
325
+
326
+ <!-- Mini charts row -->
327
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
328
+ <div class="glass rounded-xl p-4">
329
+ <div class="flex items-center justify-between mb-2">
330
+ <span class="text-sm">Conversion Rate</span>
331
+ <span class="text-xs px-2 py-1 bg-emerald-600/20 text-emerald-400 rounded-full">+2.4%</span>
332
+ </div>
333
+ <div class="h-24">
334
+ <div class="w-full h-full flex items-center justify-center text-slate-400">
335
+ <i class="fas fa-chart-line text-3xl"></i>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ <div class="glass rounded-xl p-4">
340
+ <div class="flex items-center justify-between mb-2">
341
+ <span class="text-sm">Avg Order Value</span>
342
+ <span class="text-xs px-2 py-1 bg-red-600/20 text-red-400 rounded-full">-1.2%</span>
343
+ </div>
344
+ <div class="h-24">
345
+ <div class="w-full h-full flex items-center justify-center text-slate-400">
346
+ <i class="fas fa-chart-bar text-3xl"></i>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ <div class="glass rounded-xl p-4">
351
+ <div class="flex items-center justify-between mb-2">
352
+ <span class="text-sm">New Customers</span>
353
+ <span class="text-xs px-2 py-1 bg-emerald-600/20 text-emerald-400 rounded-full">+8.7%</span>
354
+ </div>
355
+ <div class="h-24">
356
+ <div class="w-full h-full flex items-center justify-center text-slate-400">
357
+ <i class="fas fa-chart-pie text-3xl"></i>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </section>
363
+
364
+ <!-- What-If Sim -->
365
+ <section id="sim" class="scroll-mt-20">
366
+ <div class="flex items-center justify-between mb-4">
367
+ <h2 class="text-xl font-bold">What-If Simulator</h2>
368
+ <button class="text-sm glass px-3 py-1 rounded hover:bg-slate-700">Save Scenario</button>
369
+ </div>
370
+
371
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
372
+ <div class="glass rounded-xl p-5">
373
+ <div class="space-y-4">
374
+ <div>
375
+ <label class="text-sm flex items-center justify-between">
376
+ <span>Discount</span>
377
+ <span class="text-xs text-slate-400">Current: 15%</span>
378
+ </label>
379
+ <input type="range" min="0" max="50" value="10" class="w-full accent-accent mb-1">
380
+ <div class="flex justify-between text-xs text-slate-400">
381
+ <span>0%</span>
382
+ <span>10%</span>
383
+ <span>50%</span>
384
+ </div>
385
+ </div>
386
+ <div>
387
+ <label class="text-sm flex items-center justify-between">
388
+ <span>Budget</span>
389
+ <span class="text-xs text-slate-400">Current: $750</span>
390
+ </label>
391
+ <input type="range" min="0" max="2000" step="50" value="500" class="w-full accent-accent mb-1">
392
+ <div class="flex justify-between text-xs text-slate-400">
393
+ <span>$0</span>
394
+ <span>$500</span>
395
+ <span>$2000</span>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+
401
+ <div class="glass rounded-xl p-5">
402
+ <h3 class="text-sm font-medium mb-3">Projected Results</h3>
403
+ <div class="space-y-3">
404
+ <div class="flex items-center justify-between">
405
+ <span class="text-sm">Revenue</span>
406
+ <span class="font-medium">$1,075</span>
407
+ </div>
408
+ <div class="flex items-center justify-between">
409
+ <span class="text-sm">Profit</span>
410
+ <span class="font-medium">$725</span>
411
+ </div>
412
+ <div class="flex items-center justify-between">
413
+ <span class="text-sm">New Customers</span>
414
+ <span class="font-medium">20</span>
415
+ </div>
416
+ <div class="flex items-center justify-between">
417
+ <span class="text-sm">ROI</span>
418
+ <span class="font-medium">145%</span>
419
+ </div>
420
+ </div>
421
+ </div>
422
+
423
+ <div class="glass rounded-xl p-5">
424
+ <h3 class="text-sm font-medium mb-3">Saved Scenarios</h3>
425
+ <div class="space-y-2">
426
+ <div class="flex items-center justify-between p-2 hover:bg-slate-700 rounded cursor-pointer">
427
+ <div>
428
+ <p class="text-sm font-medium">Summer Sale</p>
429
+ <p class="text-xs text-slate-400">Discount: 20% | Budget: $1000</p>
430
+ </div>
431
+ <button class="text-red-400 hover:text-red-300 p-1">
432
+ <i class="fas fa-trash text-xs"></i>
433
+ </button>
434
+ </div>
435
+ <div class="flex items-center justify-between p-2 hover:bg-slate-700 rounded cursor-pointer">
436
+ <div>
437
+ <p class="text-sm font-medium">Black Friday</p>
438
+ <p class="text-xs text-slate-400">Discount: 30% | Budget: $1500</p>
439
+ </div>
440
+ <button class="text-red-400 hover:text-red-300 p-1">
441
+ <i class="fas fa-trash text-xs"></i>
442
+ </button>
443
+ </div>
444
+ <div class="text-center py-4 text-sm text-slate-400">
445
+ <p>No saved scenarios</p>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </section>
451
+
452
+ <!-- Models Table -->
453
+ <section id="models" class="scroll-mt-20">
454
+ <div class="flex items-center justify-between mb-4">
455
+ <h2 class="text-xl font-bold">AI Models</h2>
456
+ <div class="flex items-center space-x-2">
457
+ <button class="text-sm glass px-3 py-1 rounded hover:bg-slate-700 flex items-center space-x-1">
458
+ <i class="fas fa-plus text-xs"></i>
459
+ <span>Add Model</span>
460
+ </button>
461
+ <div class="relative">
462
+ <select class="glass text-sm px-3 py-1 rounded appearance-none pr-7">
463
+ <option value="all">All Models</option>
464
+ <option value="active">Active</option>
465
+ <option value="inactive">Inactive</option>
466
+ </select>
467
+ <i class="fas fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-xs pointer-events-none"></i>
468
+ </div>
469
+ </div>
470
+ </div>
471
+
472
+ <div class="glass rounded-xl overflow-x-auto">
473
+ <table class="w-full text-sm">
474
+ <thead class="bg-slate-800">
475
+ <tr>
476
+ <th class="p-3 text-left">Model</th>
477
+ <th class="p-3 text-left">Provider</th>
478
+ <th class="p-3 text-left">Size</th>
479
+ <th class="p-3 text-left">Status</th>
480
+ <th class="p-3 text-left">Usage</th>
481
+ <th class="p-3">Action</th>
482
+ </tr>
483
+ </thead>
484
+ <tbody>
485
+ <tr class="border-t border-slate-700 hover:bg-slate-800/50">
486
+ <td class="p-3">
487
+ <div class="flex items-center space-x-2">
488
+ <i class="fas fa-robot text-accent"></i>
489
+ <span>GPT-3.5</span>
490
+ </div>
491
+ </td>
492
+ <td class="p-3">OpenAI</td>
493
+ <td class="p-3">800 MB</td>
494
+ <td class="p-3">
495
+ <span class="px-2 py-1 rounded-full text-xs bg-emerald-600/20 text-emerald-400">Active</span>
496
+ </td>
497
+ <td class="p-3">
498
+ <div class="w-20 h-1.5 bg-slate-700 rounded-full overflow-hidden">
499
+ <div class="h-full bg-accent rounded-full" style="width: 75%"></div>
500
+ </div>
501
+ </td>
502
+ <td class="p-3">
503
+ <div class="flex items-center space-x-2">
504
+ <button class="text-xs px-2 py-1 rounded hover:bg-slate-700 text-red-400">Deactivate</button>
505
+ <button class="text-xs px-2 py-1 rounded hover:bg-slate-700 text-slate-400">Remove</button>
506
+ </div>
507
+ </td>
508
+ </tr>
509
+ </tbody>
510
+ </table>
511
+ </div>
512
+ </section>
513
+
514
+ <!-- Stores Table -->
515
+ <section id="stores" class="scroll-mt-20">
516
+ <div class="flex items-center justify-between mb-4">
517
+ <h2 class="text-xl font-bold">Stores</h2>
518
+ <div class="flex items-center space-x-2">
519
+ <button class="text-sm glass px-3 py-1 rounded hover:bg-slate-700 flex items-center space-x-1">
520
+ <i class="fas fa-plus text-xs"></i>
521
+ <span>Add Store</span>
522
+ </button>
523
+ <div class="relative">
524
+ <select class="glass text-sm px-3 py-1 rounded appearance-none pr-7">
525
+ <option value="all">All Stores</option>
526
+ <option value="healthy">Healthy</option>
527
+ <option value="warning">Warning</option>
528
+ <option value="critical">Critical</option>
529
+ </select>
530
+ <i class="fas fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-xs pointer-events-none"></i>
531
+ </div>
532
+ </div>
533
+ </div>
534
+
535
+ <div class="glass rounded-xl overflow-x-auto">
536
+ <table class="w-full text-sm">
537
+ <thead class="bg-slate-800">
538
+ <tr>
539
+ <th class="p-3 text-left">Store</th>
540
+ <th class="p-3 text-left">Platform</th>
541
+ <th class="p-3 text-left">Health</th>
542
+ <th class="p-3 text-left">Last Sync</th>
543
+ <th class="p-3">Action</th>
544
+ </tr>
545
+ </thead>
546
+ <tbody>
547
+ <tr class="border-t border-slate-700 hover:bg-slate-800/50">
548
+ <td class="p-3">
549
+ <div class="flex items-center space-x-2">
550
+ <i class="fas fa-tshirt text-accent"></i>
551
+ <span>FashionHub</span>
552
+ </div>
553
+ </td>
554
+ <td class="p-3">Shopify</td>
555
+ <td class="p-3">
556
+ <div class="flex items-center space-x-2">
557
+ <div class="relative w-8 h-8">
558
+ <svg class="w-8 h-8 progress-ring" viewBox="0 0 100 100">
559
+ <circle class="text-slate-700" stroke-width="8" stroke="currentColor" fill="transparent" r="45" cx="50" cy="50" />
560
+ <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)" />
561
+ </svg>
562
+ <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>
563
+ </div>
564
+ <span class="text-xs text-emerald-400">
565
+ <i class="fas fa-caret-up"></i>
566
+ <span>2%</span>
567
+ </span>
568
+ </div>
569
+ </td>
570
+ <td class="p-3 text-xs text-slate-400">1 hour ago</td>
571
+ <td class="p-3">
572
+ <div class="flex items-center space-x-2">
573
+ <button class="text-xs px-2 py-1 rounded hover:bg-slate-700 text-accent">Sync</button>
574
+ <button class="text-xs px-2 py-1 rounded hover:bg-slate-700">Inspect</button>
575
+ </div>
576
+ </td>
577
+ </tr>
578
+ </tbody>
579
+ </table>
580
+ </div>
581
+ </section>
582
+
583
+ <!-- Products Table -->
584
+ <section id="products" class="scroll-mt-20">
585
+ <div class="flex items-center justify-between mb-4">
586
+ <h2 class="text-xl font-bold">Products</h2>
587
+ <div class="flex items-center space-x-2">
588
+ <button class="text-sm glass px-3 py-1 rounded hover:bg-slate-700 flex items-center space-x-1">
589
+ <i class="fas fa-plus text-xs"></i>
590
+ <span>Add Product</span>
591
+ </button>
592
+ <label class="glass px-3 py-1 rounded cursor-pointer text-sm">
593
+ <i class="fas fa-file-upload mr-1"></i> Import CSV
594
+ <input type="file" accept=".csv" class="hidden" />
595
+ </label>
596
+ </div>
597
+ </div>
598
+
599
+ <div class="glass rounded-xl overflow-x-auto">
600
+ <table class="w-full text-sm">
601
+ <thead class="bg-slate-800">
602
+ <tr>
603
+ <th class="p-3 text-left">#</th>
604
+ <th class="p-3 text-left">Name</th>
605
+ <th class="p-3 text-left">SKU</th>
606
+ <th class="p-3 text-left">Price</th>
607
+ <th class="p-3 text-left">Stock</th>
608
+ <th class="p-3 text-left">Action</th>
609
+ </tr>
610
+ </thead>
611
+ <tbody>
612
+ <tr class="border-t border-slate-700">
613
+ <td class="p-3">1</td>
614
+ <td class="p-3">Premium T-Shirt</td>
615
+ <td class="p-3">TSH-001</td>
616
+ <td class="p-3">$29.99</td>
617
+ <td class="p-3">
618
+ <span class="px-2 py-1 rounded-full text-xs bg-emerald-600">42</span>
619
+ </td>
620
+ <td class="p-3">
621
+ <button class="text-accent hover:underline">Edit</button>
622
+ </td>
623
+ </tr>
624
+ </tbody>
625
+ </table>
626
+ </div>
627
+ </section>
628
+
629
+ <!-- AI Usage Section -->
630
+ <section id="ai" class="scroll-mt-20">
631
+ <div class="flex items-center justify-between mb-4">
632
+ <h2 class="text-xl font-bold">AI Usage</h2>
633
+ <div class="relative">
634
+ <select class="glass text-sm px-3 py-1 rounded appearance-none pr-7">
635
+ <option value="7d">Last 7 Days</option>
636
+ <option value="30d">Last 30 Days</option>
637
+ <option value="90d">Last 90 Days</option>
638
+ </select>
639
+ <i class="fas fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-xs pointer-events-none"></i>
640
+ </div>
641
+ </div>
642
+
643
+ <div class="grid md:grid-cols-2 gap-6">
644
+ <div class="glass rounded-xl p-4">
645
+ <div class="flex items-center justify-between mb-4">
646
+ <h3 class="font-medium">API Usage</h3>
647
+ <div class="flex items-center space-x-2">
648
+ <div class="flex items-center">
649
+ <div class="w-2 h-2 rounded-full bg-accent mr-1"></div>
650
+ <span class="text-xs">This Month</span>
651
+ </div>
652
+ <div class="flex items-center">
653
+ <div class="w-2 h-2 rounded-full bg-slate-500 mr-1"></div>
654
+ <span class="text-xs">Last Month</span>
655
+ </div>
656
+ </div>
657
+ </div>
658
+ <div class="h-48">
659
+ <div class="w-full h-full flex items-center justify-center text-slate-400">
660
+ <i class="fas fa-chart-line text-4xl"></i>
661
+ </div>
662
+ </div>
663
+ </div>
664
+ </div>
665
+
666
+ <div class="glass rounded-xl p-4 mt-6">
667
+ <h3 class="font-medium mb-4">Cost Summary</h3>
668
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
669
+ <div class="bg-slate-800/50 rounded-lg p-3">
670
+ <p class="text-sm text-slate-400 mb-1">This Month</p>
671
+ <p class="text-xl font-bold">$1,245</p>
672
+ </div>
673
+ <div class="bg-slate-800/50 rounded-lg p-3">
674
+ <p class="text-sm text-slate-400 mb-1">Last Month</p>
675
+ <p class="text-xl font-bold">$1,080</p>
676
+ </div>
677
+ <div class="bg-slate-800/50 rounded-lg p-3">
678
+ <p class="text-sm text-slate-400 mb-1">Change</p>
679
+ <p class="text-xl font-bold text-emerald-400">+15.3%</p>
680
+ </div>
681
+ <div class="bg-slate-800/50 rounded-lg p-3">
682
+ <p class="text-sm text-slate-400 mb-1">Forecast</p>
683
+ <p class="text-xl font-bold">$1,450</p>
684
+ </div>
685
+ </div>
686
+ </div>
687
+ </section>
688
+
689
+ <!-- Products Section -->
690
+ <!-- Smart Product Manager -->
691
+ <section id="products" class="scroll-mt-20">
692
+ <div class="flex items-center justify-between mb-4">
693
+ <h2 class="text-xl font-bold">Smart Product Manager</h2>
694
+ <div class="flex items-center space-x-2">
695
+ <button id="bulkImportBtn" class="text-sm glass px-3 py-1 rounded hover:bg-gray-800/60 flex items-center space-x-1">
696
+ <i class="fas fa-file-import text-xs"></i>
697
+ <span>Bulk Import</span>
698
+ </button>
699
+ <button id="addProductBtn" class="text-sm glass px-3 py-1 rounded hover:bg-gray-800/60 flex items-center space-x-1">
700
+ <i class="fas fa-plus text-xs"></i>
701
+ <span>Add Product</span>
702
+ </button>
703
+ </div>
704
+ </div>
705
+
706
+ <div class="glass rounded-xl overflow-x-auto">
707
+ <table id="productsTable" class="w-full text-sm">
708
+ <thead class="bg-gray-800">
709
+ <tr>
710
+ <th class="p-3 text-left">Name</th>
711
+ <th class="p-3 text-left">SKU</th>
712
+ <th class="p-3 text-left">Price</th>
713
+ <th class="p-3 text-left">Stock</th>
714
+ <th class="p-3 text-left">Status</th>
715
+ </tr>
716
+ </thead>
717
+ <tbody></tbody>
718
+ </table>
719
+ </div>
720
+ </section>
721
+
722
+ <!-- Integrations -->
723
+ <section id="ads" class="scroll-mt-20">
724
+ <div class="flex items-center justify-between mb-4">
725
+ <h2 class="text-xl font-bold">Integrations</h2>
726
+ <button class="text-sm glass px-3 py-1 rounded hover:bg-slate-700 flex items-center space-x-1">
727
+ <i class="fas fa-plus text-xs"></i>
728
+ <span>Add Integration</span>
729
+ </button>
730
+ </div>
731
+
732
+ <div class="flex flex-wrap gap-2 mb-4">
733
+ <button class="px-3 py-1 rounded-md text-sm transition bg-accent text-white">All</button>
734
+ <button class="px-3 py-1 rounded-md text-sm transition glass hover:bg-slate-700">Ads</button>
735
+ <button class="px-3 py-1 rounded-md text-sm transition glass hover:bg-slate-700">Stores</button>
736
+ <button class="px-3 py-1 rounded-md text-sm transition glass hover:bg-slate-700">Email</button>
737
+ <button class="px-3 py-1 rounded-md text-sm transition glass hover:bg-slate-700">Automation</button>
738
+ </div>
739
+
740
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
741
+ <div class="glass rounded-xl p-4 hover:bg-slate-700/50 transition cursor-pointer">
742
+ <div class="flex items-start justify-between mb-3">
743
+ <div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center">
744
+ <i class="fab fa-wordpress text-accent text-lg"></i>
745
+ </div>
746
+ <span class="text-xs px-2 py-1 rounded-full bg-slate-700/50 text-slate-400">Disconnected</span>
747
+ </div>
748
+ <p class="font-semibold mb-1">WooCommerce</p>
749
+ <p class="text-xs text-slate-400 mb-3">Connect your WooCommerce store</p>
750
+ <div class="w-full bg-slate-700 rounded-full h-1.5 mb-1">
751
+ <div class="bg-accent h-1.5 rounded-full" style="width: 0%"></div>
752
+ </div>
753
+ <div class="flex justify-between text-xs text-slate-400">
754
+ <span>Not connected</span>
755
+ <span>E-commerce</span>
756
+ </div>
757
+ </div>
758
+
759
+ <div class="glass rounded-xl p-4 hover:bg-slate-700/50 transition cursor-pointer">
760
+ <div class="flex items-start justify-between mb-3">
761
+ <div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center">
762
+ <i class="fab fa-shopify text-accent text-lg"></i>
763
+ </div>
764
+ <span class="text-xs px-2 py-1 rounded-full bg-emerald-600/20 text-emerald-400">Connected</span>
765
+ </div>
766
+ <p class="font-semibold mb-1">Shopify</p>
767
+ <p class="text-xs text-slate-400 mb-3">Connect your Shopify store</p>
768
+ <div class="w-full bg-slate-700 rounded-full h-1.5 mb-1">
769
+ <div class="bg-accent h-1.5 rounded-full" style="width: 100%"></div>
770
+ </div>
771
+ <div class="flex justify-between text-xs text-slate-400">
772
+ <span>Connected</span>
773
+ <span>E-commerce</span>
774
+ </div>
775
+ </div>
776
+ </div>
777
+ </section>
778
+ <!-- Shipping & Invoice -->
779
+ <section id="shipping" class="scroll-mt-20">
780
+ <h2 class="text-xl font-bold mb-4">Shipping & Invoices</h2>
781
+ <div class="glass rounded-xl p-4 space-y-4">
782
+ <div class="flex items-center justify-between">
783
+ <span>Provider</span>
784
+ <select class="glass px-2 py-1 rounded text-sm">
785
+ <option>SMSA</option><option>Aramex</option><option>FedEx</option>
786
+ </select>
787
+ </div>
788
+ <button class="w-full bg-accent rounded py-2 text-sm">Generate ZATCA Invoice</button>
789
+ <button class="w-full glass rounded py-2 text-sm">Print Label(s)</button>
790
+ </div>
791
+ </section>
792
+
793
+ <!-- Payments -->
794
+ <section id="payments" class="scroll-mt-20">
795
+ <h2 class="text-xl font-bold mb-4">Payment Gateways</h2>
796
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
797
+ <div class="glass rounded-xl p-4 text-center">
798
+ <i class="fab fa-stripe text-3xl mb-2"></i>
799
+ <p class="text-sm">Stripe</p>
800
+ <button class="mt-2 text-xs glass px-2 py-1 rounded">Connect</button>
801
+ </div>
802
+ <div class="glass rounded-xl p-4 text-center">
803
+ <i class="fas fa-credit-card text-3xl mb-2"></i>
804
+ <p class="text-sm">Mada</p>
805
+ <button class="mt-2 text-xs glass px-2 py-1 rounded">Connect</button>
806
+ </div>
807
+ <div class="glass rounded-xl p-4 text-center">
808
+ <i class="fas fa-mobile-alt text-3xl mb-2"></i>
809
+ <p class="text-sm">STC Pay</p>
810
+ <button class="mt-2 text-xs glass px-2 py-1 rounded">Connect</button>
811
+ </div>
812
+ <div class="glass rounded-xl p-4 text-center">
813
+ <i class="fas fa-apple-alt text-3xl mb-2"></i>
814
+ <p class="text-sm">Apple Pay</p>
815
+ <button class="mt-2 text-xs glass px-2 py-1 rounded">Connect</button>
816
+ </div>
817
+ </div>
818
+ </section>
819
+
820
+ <!-- Social Publisher -->
821
+ <section id="social" class="scroll-mt-20">
822
+ <h2 class="text-xl font-bold mb-4">Social Publisher</h2>
823
+ <div class="glass rounded-xl p-4 space-y-3">
824
+ <textarea class="w-full glass rounded p-2 text-sm" rows="3" placeholder="Caption with AI suggestions"></textarea>
825
+ <div class="flex space-x-2">
826
+ <button class="text-xs glass px-2 py-1 rounded">TikTok</button>
827
+ <button class="text-xs glass px-2 py-1 rounded">Instagram</button>
828
+ <button class="text-xs glass px-2 py-1 rounded">Snapchat</button>
829
+ <button class="text-xs glass px-2 py-1 rounded">X</button>
830
+ <button class="text-xs glass px-2 py-1 rounded">Facebook</button>
831
+ </div>
832
+ <button class="w-full bg-accent rounded py-2 text-sm">Schedule Post</button>
833
+ </div>
834
+ </section>
835
+
836
+ <!-- Trends & Recommendations -->
837
+ <section id="trends" class="scroll-mt-20">
838
+ <h2 class="text-xl font-bold mb-4">Trends & Recommendations</h2>
839
+ <div class="glass rounded-xl p-4">
840
+ <ul class="space-y-2 text-sm">
841
+ <li>🔥 Steam Wallet Cards selling 4× last week</li>
842
+ <li>💡 AI: “Boost Netflix KSA ads 9 PM-11 PM”</li>
843
+ <li>📈 TikTok hashtag #PSNSaudi trending</li>
844
+ </ul>
845
+ </div>
846
+ </section>
847
+
848
+ <!-- Store Integrations -->
849
+ <section id="integrations" class="scroll-mt-20">
850
+ <h2 class="text-xl font-bold mb-4">Store Integrations</h2>
851
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
852
+ <div class="glass rounded-xl p-4">
853
+ <h3 class="text-sm font-bold mb-1">Salla</h3>
854
+ <button class="text-xs glass px-2 py-1 rounded">Connect</button>
855
+ </div>
856
+ <div class="glass rounded-xl p-4">
857
+ <h3 class="text-sm font-bold mb-1">Zid</h3>
858
+ <button class="text-xs glass px-2 py-1 rounded">Connect</button>
859
+ </div>
860
+ <div class="glass rounded-xl p-4">
861
+ <h3 class="text-sm font-bold mb-1">WooCommerce</h3>
862
+ <button class="text-xs glass px-2 py-1 rounded">Connect</button>
863
+ </div>
864
+ </div>
865
+ </section>
866
+
867
+ <!-- Notifications & Automation Engine -->
868
+ <section id="automations" class="scroll-mt-20">
869
+ <h2 class="text-xl font-bold mb-4">Notifications & Automation</h2>
870
+ <div class="glass rounded-xl p-4 space-y-3">
871
+ <div class="flex items-center justify-between">
872
+ <span>Low Stock Alerts</span>
873
+ <input type="checkbox" class="toggle" checked>
874
+ </div>
875
+ <div class="flex items-center justify-between">
876
+ <span>Failed Payment Webhooks</span>
877
+ <input type="checkbox" class="toggle" checked>
878
+ </div>
879
+ <div class="flex items-center justify-between">
880
+ <span>Auto-Print Labels</span>
881
+ <input type="checkbox" class="toggle">
882
+ </div>
883
+ <button class="w-full bg-accent rounded py-2 text-sm">Open n8n</button>
884
+ </div>
885
+ </section>
886
+ </main>
887
+
888
+ <!-- n8n Hidden Section -->
889
+ <section id="n8n" class="scroll-mt-20 hidden">
890
+ <div class="flex items-center justify-between mb-4">
891
+ <h2 class="text-xl font-bold">n8n Automation</h2>
892
+ <button id="refreshWorkflowsBtn" class="text-sm glass px-3 py-1 rounded hover:bg-slate-700">
893
+ <i class="fas fa-sync-alt mr-1"></i>Refresh
894
+ </button>
895
+ </div>
896
+ <div id="workflowsList" class="glass rounded-xl p-4">
897
+ <p class="text-slate-400">Loading workflows…</p>
898
+ </div>
899
+ </section>
900
+
901
+ <!-- Command Palette Modal -->
902
+ <div id="commandModal" class="fixed inset-0 bg-black/50 z-50 hidden items-start justify-center pt-20">
903
+ <div class="glass w-full max-w-lg rounded-xl overflow-hidden">
904
+ <div class="p-4 border-b border-gray-700 flex items-center">
905
+ <i class="fas fa-search text-sm mr-2 text-gray-400"></i>
906
+ <input id="cmdInput" type="search" placeholder="Type to search..." class="w-full bg-transparent outline-none placeholder-gray-400" />
907
+ </div>
908
+ <div id="cmdResults" class="max-h-96 overflow-y-auto">
909
+ <!-- dynamic results -->
910
+ </div>
911
+ </div>
912
+ </div>
913
+
914
+ <!-- Floating Action Button -->
915
+ <button id="primaryFab" class="fixed bottom-6 right-6 glass p-4 rounded-full shadow-xl fab-shadow hover:scale-110 transition z-40">
916
+ <i class="fas fa-plus text-lg"></i>
917
+ </button>
918
+ <i class="fas fa-cog"></i>
919
+ </button>
920
+ <button id="addProductFab" class="glass p-3 rounded-full shadow-lg fab-shadow transition hover:scale-110 neon" aria-label="Add Product">
921
+ <i class="fas fa-box-open"></i>
922
+ </button>
923
+ <button id="chatToggleFab" class="glass p-4 rounded-full shadow-lg fab-shadow transition hover:scale-110" aria-label="Toggle Chat">
924
+ <i class="fas fa-robot"></i>
925
+ </button>
926
+ </div>
927
+
928
+ <!-- Live Chat Panel -->
929
+ <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">
930
+ <header class="flex items-center justify-between p-4 border-b border-slate-700">
931
+ <div class="flex items-center space-x-2">
932
+ <i class="fas fa-robot text-accent"></i>
933
+ <span class="font-bold">Live Chat</span>
934
+ </div>
935
+ <button id="closeChat" class="p-1 rounded-full hover:bg-slate-700">
936
+ <i class="fas fa-times"></i>
937
+ </button>
938
+ </header>
939
+ <div id="chatMessages" class="h-[60vh] md:h-[70vh] overflow-y-auto p-4 space-y-3"></div>
940
+ <footer class="p-4 border-t border-slate-700 flex items-center space-x-2">
941
+ <button id="emojiToggle" class="p-2 rounded-full hover:bg-slate-700">
942
+ <i class="far fa-face-smile"></i>
943
+ </button>
944
+ <label class="p-2 rounded-full hover:bg-slate-700 cursor-pointer">
945
+ <i class="fas fa-paperclip"></i>
946
+ <input type="file" multiple accept="image/*,.pdf" class="hidden" @change="handleFileUpload($event)">
947
+ </label>
948
+ <button id="recordBtn" :class="recording ? 'text-red-400 blink' : ''" class="p-2 rounded-full hover:bg-slate-700" @click="toggleRecord">
949
+ <i :class="recording ? 'fas fa-stop' : 'fas fa-microphone-lines'"></i>
950
+ </button>
951
+ <input id="chatInput" type="text" placeholder="Type a message…" class="flex-1 bg-transparent outline-none" />
952
+ <button id="sendMessage" class="p-2 rounded-full hover:bg-slate-700">
953
+ <i class="fas fa-paper-plane"></i>
954
+ </button>
955
+ </footer>
956
+ </div>
957
+
958
+ <!-- Settings Modal -->
959
+ <div id="settingsModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
960
+ <div class="glass w-full max-w-md rounded-xl p-6 space-y-4">
961
+ <div class="flex items-center justify-between">
962
+ <h3 class="text-lg font-bold">Settings</h3>
963
+ <button id="closeSettings" class="p-1 rounded-full hover:bg-slate-700">
964
+ <i class="fas fa-times"></i>
965
+ </button>
966
+ </div>
967
+ <div>
968
+ <label class="block text-sm mb-1">Accent Color</label>
969
+ <input id="accentColorPicker" type="color" value="#38bdf8" class="w-full h-10 rounded cursor-pointer" />
970
+ </div>
971
+ <div>
972
+ <label class="block text-sm mb-1">Theme</label>
973
+ <button id="themeToggleBtn" class="glass px-3 py-1 rounded">Toggle Dark / Light</button>
974
+ </div>
975
+ <div>
976
+ <label class="flex items-center space-x-2">
977
+ <input id="pushToggle" type="checkbox" class="accent-accent">
978
+ <span class="text-sm">Enable Push Notifications</span>
979
+ </label>
980
+ </div>
981
+ <div class="text-right">
982
+ <button id="saveSettings" class="px-4 py-2 bg-accent rounded hover:bg-opacity-80">Save</button>
983
+ </div>
984
+ </div>
985
+ </div>
986
+
987
+ <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
988
+ <script>
989
+ // Service-Worker registration
990
+ if ('serviceWorker' in navigator) {
991
+ const swCode = `
992
+ self.addEventListener('push', e => {
993
+ const data = e.data?.json() ?? { title: 'Store AI', body: 'New message' };
994
+ e.waitUntil(
995
+ self.registration.showNotification(data.title, {
996
+ body: data.body,
997
+ icon: '/favicon.ico',
998
+ badge: '/favicon.ico'
999
+ })
1000
+ );
1001
+ });
1002
+ `;
1003
+ const blob = new Blob([swCode], { type: 'text/javascript' });
1004
+ navigator.serviceWorker.register(URL.createObjectURL(blob))
1005
+ .then(() => Notification.requestPermission());
1006
+ }
1007
+ // Push helper
1008
+ function notify(title, body) {
1009
+ if (Notification.permission === 'granted') {
1010
+ navigator.serviceWorker.getRegistration().then(reg => {
1011
+ reg?.showNotification(title, { body, icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJ3LTQgaC00IiBmaWxsPSIjZmZmIiB2aWV3Qm94PSIwIDAgNDQ4IDUxMiI+PHBhdGggZD0iTTIyNCAxMzZjMCA4LjgtNy4yIDE2LTE2IDE2cy0xNi03LjItMTYtMTZWNTEyYzAgOC44IDcuMiAxNiAxNiAxNnMxNi03LjIgMTYtMTZWMTM2em0tOTYgMGMwIDguOC03LjIgMTYtMTYgMTZzLTE2LTcuMi0xNi0xNlY1MTJjMCA4LjggNy4yIDE2IDE2IDE2czE2LTcuMiAxNi0xNlYxMzZ6bTMyMCAwYzAgOC44LTcuMiAxNi0xNiAxNnMtMTYtNy4yLTE2LTE2VjUxMmMwIDguOCA3LjIgMTYgMTYgMTZzMTYtNy4yIDE2LTE2VjEzNnoiLz48L3N2Zz4=' });
1012
+ });
1013
+ } else {
1014
+ // fallback toast
1015
+ const toast = document.createElement('div');
1016
+ toast.className = 'fixed top-20 right-4 glass px-4 py-2 rounded shadow';
1017
+ toast.textContent = `${title}: ${body}`;
1018
+ document.body.appendChild(toast);
1019
+ setTimeout(() => toast.remove(), 3000);
1020
+ }
1021
+ }
1022
+
1023
+ // Persisted state keys
1024
+ const STORAGE_KEYS = ['lang', 'theme', 'accent', 'plugins', 'products', 'chat'];
1025
+ // Default state
1026
+ const storeAi = () => ({
1027
+ theme: 'dark',
1028
+ accent: '#38bdf8',
1029
+ lang: 'en',
1030
+ products: [],
1031
+ openCmdK: false,
1032
+ chatOpen: false,
1033
+ emojisEnabled: false,
1034
+ messages: [],
1035
+ attachments: [],
1036
+ recording: false,
1037
+ mediaRec: null,
1038
+ chunks: [],
1039
+ init() {
1040
+ // Load persisted state
1041
+ STORAGE_KEYS.forEach(k => {
1042
+ const val = localStorage.getItem(k);
1043
+ if (val) { this[k] = k === 'products' ? JSON.parse(val) : val; }
1044
+ });
1045
+ this.applyTheme();
1046
+ this.applyAccent();
1047
+ this.loadProductsTable();
1048
+ this.loadChat();
1049
+ // Sidebar toggle
1050
+ document.getElementById('openSidebar').addEventListener('click', () => {
1051
+ document.getElementById('sidebar').classList.remove('-translate-x-full');
1052
+ });
1053
+ document.getElementById('closeSidebar').addEventListener('click', () => {
1054
+ document.getElementById('sidebar').classList.add('-translate-x-full');
1055
+ });
1056
+ // Command Palette
1057
+ document.addEventListener('keydown', e => {
1058
+ if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
1059
+ e.preventDefault();
1060
+ this.openCmdK = true;
1061
+ this.$nextTick(() => this.$refs.cmdInput?.focus());
1062
+ }
1063
+ if (e.key === 'Escape') {
1064
+ this.openCmdK = false;
1065
+ this.chatOpen = false;
1066
+ document.getElementById('settingsModal').classList.add('hidden');
1067
+ }
1068
+ });
1069
+ // Floating buttons
1070
+ document.getElementById('settingsFab').addEventListener('click', () => {
1071
+ document.getElementById('settingsModal').classList.remove('hidden');
1072
+ });
1073
+ document.getElementById('closeSettings').addEventListener('click', () => {
1074
+ document.getElementById('settingsModal').classList.add('hidden');
1075
+ });
1076
+ document.getElementById('addProductFab').addEventListener('click', () => this.openAddProductModal());
1077
+ document.getElementById('chatToggleFab').addEventListener('click', () => this.toggleChat());
1078
+ document.getElementById('closeChat').addEventListener('click', () => this.toggleChat());
1079
+ document.getElementById('sendMessage').addEventListener('click', () => this.sendChatMessage());
1080
+ document.getElementById('chatInput').addEventListener('keydown', e => {
1081
+ if (e.key === 'Enter') this.sendChatMessage();
1082
+ });
1083
+ document.getElementById('emojiToggle').addEventListener('click', () => this.emojisEnabled = !this.emojisEnabled);
1084
+ // Settings modal
1085
+ document.getElementById('saveSettings').addEventListener('click', () => this.saveSettings());
1086
+ document.getElementById('themeToggleBtn').addEventListener('click', () => {
1087
+ this.theme = this.theme === 'dark' ? 'light' : 'dark';
1088
+ this.applyTheme();
1089
+ });
1090
+ // Bulk import
1091
+ document.getElementById('bulkImportBtn').addEventListener('click', () => {
1092
+ const inp = document.createElement('input');
1093
+ inp.type = 'file';
1094
+ inp.accept = '.csv';
1095
+ inp.onchange = e => {
1096
+ const file = e.target.files[0];
1097
+ const reader = new FileReader();
1098
+ reader.onload = () => {
1099
+ const lines = reader.result.split('\n').slice(1);
1100
+ const prods = lines.map(l => {
1101
+ const [name, sku, price, stock] = l.split(',');
1102
+ return { name, sku, price: parseFloat(price), stock: parseInt(stock) };
1103
+ }).filter(p => p.name);
1104
+ this.products = [...this.products, ...prods];
1105
+ this.saveProducts();
1106
+ };
1107
+ reader.readAsText(file);
1108
+ };
1109
+ inp.click();
1110
+ });
1111
+ // Observer for nav highlighting
1112
+ const sections = document.querySelectorAll('section[id]');
1113
+ const navLinks = document.querySelectorAll('nav a');
1114
+ const observer = new IntersectionObserver(entries => {
1115
+ entries.forEach(entry => {
1116
+ if (entry.isIntersecting) {
1117
+ navLinks.forEach(link => link.classList.toggle('bg-slate-700/50', link.getAttribute('href') === `#${entry.target.id}`));
1118
+ }
1119
+ });
1120
+ }, { threshold: 0.4 });
1121
+ sections.forEach(s => observer.observe(s));
1122
+ },
1123
+ applyTheme() {
1124
+ document.documentElement.classList.toggle('dark', this.theme === 'dark');
1125
+ localStorage.setItem('theme', this.theme);
1126
+ },
1127
+ applyAccent() {
1128
+ document.documentElement.style.setProperty('--accent', this.accent);
1129
+ localStorage.setItem('accent', this.accent);
1130
+ },
1131
+ saveSettings() {
1132
+ this.accent = document.getElementById('accentColorPicker').value;
1133
+ this.applyAccent();
1134
+ // Push toggle
1135
+ const pushOn = document.getElementById('pushToggle').checked;
1136
+ if (pushOn && Notification.permission !== 'granted') {
1137
+ Notification.requestPermission().then(p => {
1138
+ if (p === 'granted') notify('Push enabled', 'You will receive system notifications.');
1139
+ });
1140
+ }
1141
+ document.getElementById('settingsModal').classList.add('hidden');
1142
+ },
1143
+ openAddProductModal() {
1144
+ const name = prompt('Product Name');
1145
+ const sku = prompt('SKU');
1146
+ const price = parseFloat(prompt('Price'));
1147
+ const stock = parseInt(prompt('Stock'));
1148
+ if (name && sku && !isNaN(price) && !isNaN(stock)) {
1149
+ this.products.push({ name, sku, price, stock });
1150
+ this.saveProducts();
1151
+ }
1152
+ },
1153
+ saveProducts() {
1154
+ localStorage.setItem('products', JSON.stringify(this.products));
1155
+ this.products.forEach(p => {
1156
+ if (p.stock < 10) notify('Low stock', `SKU ${p.sku} has ${p.stock} left`);
1157
+ });
1158
+ this.loadProductsTable();
1159
+ },
1160
+ loadProductsTable() {
1161
+ const tbody = document.querySelector('#productsTable tbody');
1162
+ tbody.innerHTML = '';
1163
+ this.products.forEach(p => {
1164
+ const tr = document.createElement('tr');
1165
+ tr.className = 'border-t border-slate-700 hover:bg-slate-800/50';
1166
+ tr.innerHTML = `
1167
+ <td class="p-3">${p.name}</td>
1168
+ <td class="p-3">${p.sku}</td>
1169
+ <td class="p-3">${p.price.toFixed(2)}</td>
1170
+ <td class="p-3">
1171
+ <span class="px-2 py-1 rounded-full text-xs ${p.stock < 10 ? 'bg-red-600' : 'bg-emerald-600'}">${p.stock}</span>
1172
+ </td>
1173
+ <td class="p-3">
1174
+ <span class="text-xs px-2 py-1 rounded-full bg-slate-700">Active</span>
1175
+ </td>
1176
+ `;
1177
+ tbody.appendChild(tr);
1178
+ });
1179
+ },
1180
+ toggleChat() {
1181
+ this.chatOpen = !this.chatOpen;
1182
+ const panel = document.getElementById('chatPanel');
1183
+ panel.classList.toggle('translate-y-full', !this.chatOpen);
1184
+ panel.classList.toggle('translate-y-0', this.chatOpen);
1185
+ if (this.chatOpen) this.scrollToBottom();
1186
+ },
1187
+ sendChatMessage() {
1188
+ const input = document.getElementById('chatInput');
1189
+ const text = input.value.trim();
1190
+ if (!text && this.attachments.length === 0) return;
1191
+ const msg = {
1192
+ role: 'user',
1193
+ content: text,
1194
+ attachments: [...this.attachments]
1195
+ };
1196
+ this.messages.push(msg);
1197
+ this.messages.push({ role: 'assistant', content: '...', emojis: this.emojisEnabled ? ['🤖'] : [] });
1198
+ input.value = '';
1199
+ this.attachments = [];
1200
+ this.saveChat();
1201
+ this.scrollToBottom();
1202
+ // Simulate response
1203
+ setTimeout(() => {
1204
+ const last = this.messages[this.messages.length - 1];
1205
+ last.content = 'Got your message! Anything else?';
1206
+ this.saveChat();
1207
+ if (!this.chatOpen) notify('Store AI', last.content);
1208
+ }, 500);
1209
+ },
1210
+ scrollToBottom() {
1211
+ this.$nextTick(() => {
1212
+ const box = document.getElementById('chatMessages');
1213
+ box.scrollTop = box.scrollHeight;
1214
+ });
1215
+ },
1216
+ saveChat() {
1217
+ localStorage.setItem('chat', JSON.stringify(this.messages));
1218
+ },
1219
+ loadChat() {
1220
+ this.messages = JSON.parse(localStorage.getItem('chat') || '[]');
1221
+ this.$nextTick(() => {
1222
+ const box = document.getElementById('chatMessages');
1223
+ box.innerHTML = '';
1224
+ this.messages.forEach(m => {
1225
+ const div = document.createElement('div');
1226
+ div.className = `flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`;
1227
+ let attachHTML = '';
1228
+ (m.attachments || []).forEach(f => {
1229
+ const url = URL.createObjectURL(f);
1230
+ if (f.type.startsWith('image/')) {
1231
+ attachHTML += `<img src="${url}" class="rounded mb-1 max-h-32 cursor-pointer" onclick="window.open('${url}')"/>`;
1232
+ } else if (f.type === 'application/pdf') {
1233
+ 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>`;
1234
+ } else if (f.type.startsWith('audio/')) {
1235
+ attachHTML += `<audio controls src="${url}" class="w-full"></audio>`;
1236
+ }
1237
+ });
1238
+ div.innerHTML = `
1239
+ <div class="max-w-[70%] px-3 py-2 rounded-xl ${
1240
+ m.role === 'user' ? 'bg-accent text-white' : 'glass'
1241
+ }">
1242
+ <span>${m.content}</span>
1243
+ ${m.emojis?.length ? `<div class="text-xs mt-1">${m.emojis.join('')}</div>` : ''}
1244
+ <div class="mt-1">${attachHTML}</div>
1245
+ </div>
1246
+ `;
1247
+ box.appendChild(div);
1248
+ });
1249
+ });
1250
+ },
1251
+ handleFileUpload(e) {
1252
+ [...e.target.files].forEach(f => this.attachments.push(f));
1253
+ },
1254
+ toggleRecord() {
1255
+ if (!this.recording) {
1256
+ navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
1257
+ this.mediaRec = new MediaRecorder(stream);
1258
+ this.mediaRec.ondataavailable = ev => this.chunks.push(ev.data);
1259
+ this.mediaRec.onstop = () => {
1260
+ const blob = new Blob(this.chunks, { type: 'audio/webm' });
1261
+ this.attachments.push(blob);
1262
+ this.chunks = [];
1263
+ };
1264
+ this.mediaRec.start();
1265
+ this.recording = true;
1266
+ });
1267
+ } else {
1268
+ this.mediaRec.stop();
1269
+ this.recording = false;
1270
+ }
1271
+ },
1272
+ // Command palette handler
1273
+ runCommand(cmd) {
1274
+ cmd = cmd.toLowerCase();
1275
+ if (cmd.includes('add product') this.openAddProductModal();
1276
+ if (cmd.includes('bulk import') document.getElementById('bulkImportBtn').click();
1277
+ if (cmd.includes('open n8n') document.getElementById('n8n').classList.remove('hidden');
1278
+ if (cmd.startsWith('find sku')) {
1279
+ const sku = cmd.split('sku')[1]?.trim();
1280
+ if (sku) {
1281
+ const row = [...document.querySelectorAll('#productsTable tbody tr')].find(tr => tr.children[1].textContent === sku);
1282
+ row?.scrollIntoView({ behavior: 'smooth' });
1283
+ row?.classList.add('ring', 'ring-accent');
1284
+ setTimeout(() => row?.classList.remove('ring', 'ring-accent'), 2000);
1285
+ }
1286
+ }
1287
+ }
1288
+ });
1289
+ Alpine.data('neoVista', () => ({
1290
+ products: [],
1291
+ chatOpen: false,
1292
+ messages: [],
1293
+ init() {
1294
+ // load persisted
1295
+ this.products = JSON.parse(localStorage.getItem('neovista-products') || '[]');
1296
+ this.loadProducts();
1297
+ // command palette
1298
+ document.addEventListener('keydown', e => {
1299
+ if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
1300
+ e.preventDefault();
1301
+ document.getElementById('commandModal').classList.remove('hidden');
1302
+ document.getElementById('cmdInput').focus();
1303
+ }
1304
+ });
1305
+ document.getElementById('cmdInput').addEventListener('input', e => this.handleCmd(e.target.value));
1306
+ document.getElementById('closeChat').addEventListener('click', () => this.toggleChat());
1307
+ document.getElementById('sendMessage').addEventListener('click', () => this.sendChatMessage());
1308
+ document.getElementById('chatInput').addEventListener('keydown', e => {
1309
+ if (e.key === 'Enter') this.sendChatMessage();
1310
+ });
1311
+ document.getElementById('addProductBtn').addEventListener('click', () => this.addProduct());
1312
+ document.getElementById('bulkImportBtn').addEventListener('click', () => this.bulkImport());
1313
+ },
1314
+ addProduct() {
1315
+ const name = prompt('Product name');
1316
+ const sku = prompt('SKU');
1317
+ const price = parseFloat(prompt('Price'));
1318
+ const stock = parseInt(prompt('Stock'));
1319
+ if (name && sku && !isNaN(price) && !isNaN(stock)) {
1320
+ this.products.push({ name, sku, price, stock });
1321
+ this.saveProducts();
1322
+ }
1323
+ },
1324
+ bulkImport() {
1325
+ const inp = document.createElement('input');
1326
+ inp.type = 'file';
1327
+ inp.accept = '.csv';
1328
+ inp.onchange = e => {
1329
+ const file = e.target.files[0];
1330
+ const reader = new FileReader();
1331
+ reader.onload = () => {
1332
+ const lines = reader.result.split('\n').slice(1);
1333
+ const prods = lines.map(l => {
1334
+ const [name, sku, price, stock] = l.split(',');
1335
+ return { name, sku, price: parseFloat(price), stock: parseInt(stock) };
1336
+ }).filter(p => p.name);
1337
+ this.products = [...this.products, ...prods];
1338
+ this.saveProducts();
1339
+ };
1340
+ reader.readAsText(file);
1341
+ };
1342
+ inp.click();
1343
+ },
1344
+ loadProducts() {
1345
+ const tbody = document.querySelector('#productsTable tbody');
1346
+ tbody.innerHTML = '';
1347
+ this.products.forEach(p => {
1348
+ const tr = document.createElement('tr');
1349
+ tr.className = 'border-t border-gray-700 hover:bg-gray-800/50';
1350
+ tr.innerHTML = `
1351
+ <td class="p-3">${p.name}</td>
1352
+ <td class="p-3">${p.sku}</td>
1353
+ <td class="p-3">${p.price.toFixed(2)}</td>
1354
+ <td class="p-3">
1355
+ <span class="px-2 py-1 rounded-full text-xs ${p.stock < 10 ? 'bg-red-600' : 'bg-green-600'}">${p.stock}</span>
1356
+ </td>
1357
+ <td class="p-3"><span class="text-xs px-2 py-1 rounded-full bg-gray-700">Active</span></td>
1358
+ `;
1359
+ tbody.appendChild(tr);
1360
+ });
1361
+ },
1362
+ saveProducts() {
1363
+ localStorage.setItem('neovista-products', JSON.stringify(this.products));
1364
+ this.loadProducts();
1365
+ },
1366
+ toggleChat() {
1367
+ this.chatOpen = !this.chatOpen;
1368
+ const panel = document.getElementById('chatPanel');
1369
+ panel.classList.toggle('translate-y-full', !this.chatOpen);
1370
+ panel.classList.toggle('translate-y-0', this.chatOpen);
1371
+ if (this.chatOpen) this.scrollChat();
1372
+ },
1373
+ sendChatMessage() {
1374
+ const input = document.getElementById('chatInput');
1375
+ const text = input.value.trim();
1376
+ if (!text) return;
1377
+ this.messages.push({ role: 'user', content: text });
1378
+ this.messages.push({ role: 'assistant', content: '...' });
1379
+ input.value = '';
1380
+ setTimeout(() => {
1381
+ const last = this.messages[this.messages.length - 1];
1382
+ last.content = 'Got your message! Anything else?';
1383
+ this.scrollChat();
1384
+ }, 500);
1385
+ },
1386
+ scrollChat() {
1387
+ setTimeout(() => {
1388
+ const box = document.getElementById('chatMessages');
1389
+ box.scrollTop = box.scrollHeight;
1390
+ }, 0);
1391
+ },
1392
+ handleCmd(query) {
1393
+ const cmds = [
1394
+ { name: 'Add Product', action: () => this.addProduct() },
1395
+ { name: 'Find SKU', action: () => alert('Type find sku <sku>') },
1396
+ { name: 'Send Bulk Email', action: () => alert('Feature locked') },
1397
+ ];
1398
+ const filtered = cmds.filter(c => c.name.toLowerCase().includes(query.toLowerCase()));
1399
+ const res = document.getElementById('cmdResults');
1400
+ res.innerHTML = '';
1401
+ filtered.forEach(c => {
1402
+ const btn = document.createElement('button');
1403
+ btn.className = 'w-full text-left p-3 hover:bg-gray-800/60 flex items-center space-x-3';
1404
+ btn.innerHTML = `
1405
+ <i class="fas fa-bolt text-sm w-5 text-center text-gray-400"></i>
1406
+ <div>
1407
+ <p>${c.name}</p>
1408
+ </div>
1409
+ `;
1410
+ btn.onclick = () => {
1411
+ c.action();
1412
+ document.getElementById('commandModal').classList.add('hidden');
1413
+ };
1414
+ res.appendChild(btn);
1415
+ });
1416
+ }
1417
+ }));
1418
+ Alpine.data('neoVista', neoVista);
1419
+ </script>
1420
+ <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>
1421
+ </html>