Hugging Face's logo

Spaces:
JayStormX8
/
scale-v2
Running

App Files Community
JayStormX8 commited on
Commit
44b84e0
·
verified ·
1 Parent(s): 65009a4

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1387 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Scale V2
3
- emoji: 🦀
4
- colorFrom: purple
5
- colorTo: purple
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: scale-v2
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: red
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,1387 @@
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">
6
+ <title>Scaling Up Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#1E40AF',
17
+ secondary: '#1E3A8A',
18
+ accent: '#3B82F6',
19
+ dark: '#1F2937',
20
+ light: '#F9FAFB',
21
+ },
22
+ fontFamily: {
23
+ sans: ['Inter', 'sans-serif'],
24
+ },
25
+ }
26
+ }
27
+ }
28
+ </script>
29
+ <style>
30
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
31
+
32
+ body {
33
+ font-family: 'Inter', sans-serif;
34
+ }
35
+
36
+ .progress-ring__circle {
37
+ transition: stroke-dashoffset 0.35s;
38
+ transform: rotate(-90deg);
39
+ transform-origin: 50% 50%;
40
+ }
41
+
42
+ .animate-pulse {
43
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
44
+ }
45
+
46
+ @keyframes pulse {
47
+ 0%, 100% {
48
+ opacity: 1;
49
+ }
50
+ 50% {
51
+ opacity: 0.5;
52
+ }
53
+ }
54
+
55
+ .grid-stack-item {
56
+ position: absolute;
57
+ }
58
+
59
+ .grid-stack-item-content {
60
+ background: white;
61
+ border-radius: 0.5rem;
62
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
63
+ height: 100%;
64
+ padding: 1rem;
65
+ }
66
+
67
+ .sidebar-item {
68
+ transition: all 0.2s ease;
69
+ }
70
+
71
+ .sidebar-item:hover {
72
+ background-color: rgba(255, 255, 255, 0.1);
73
+ }
74
+
75
+ .sidebar-item.active {
76
+ background-color: rgba(255, 255, 255, 0.2);
77
+ }
78
+
79
+ .dashboard-card {
80
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
81
+ }
82
+
83
+ .dashboard-card:hover {
84
+ transform: translateY(-2px);
85
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
86
+ }
87
+
88
+ .priority-badge {
89
+ font-size: 0.65rem;
90
+ padding: 0.15rem 0.4rem;
91
+ }
92
+
93
+ .scrollbar-hide::-webkit-scrollbar {
94
+ display: none;
95
+ }
96
+
97
+ .scrollbar-hide {
98
+ -ms-overflow-style: none;
99
+ scrollbar-width: none;
100
+ }
101
+ </style>
102
+ </head>
103
+ <body class="bg-gray-50">
104
+ <div class="flex h-screen overflow-hidden">
105
+ <!-- Mobile sidebar overlay -->
106
+ <div id="mobileSidebarOverlay" class="fixed inset-0 z-40 bg-black bg-opacity-50 hidden"></div>
107
+
108
+ <!-- Sidebar -->
109
+ <div id="sidebar" class="hidden md:flex md:flex-shrink-0">
110
+ <div class="flex flex-col w-64 bg-primary text-white">
111
+ <div class="flex items-center justify-center h-16 px-4 bg-secondary">
112
+ <div class="flex items-center">
113
+ <i class="fas fa-chart-line text-2xl mr-2 text-accent"></i>
114
+ <span class="text-xl font-semibold">ScaleUp</span>
115
+ </div>
116
+ </div>
117
+ <div class="flex flex-col flex-grow pt-5 overflow-y-auto">
118
+ <div class="px-4 mb-10">
119
+ <div class="flex items-center justify-center">
120
+ <img class="h-16 w-16 rounded-full object-cover border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar">
121
+ <div class="ml-3">
122
+ <p class="text-sm font-medium">John Doe</p>
123
+ <p class="text-xs text-gray-300">CEO</p>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ <nav class="flex-1 px-2 space-y-1">
128
+ <a href="#" class="sidebar-item active flex items-center px-4 py-3 text-sm font-medium rounded-md bg-secondary text-white">
129
+ <i class="fas fa-home mr-3"></i>
130
+ Dashboard
131
+ </a>
132
+ <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-secondary hover:text-white">
133
+ <i class="fas fa-bullseye mr-3"></i>
134
+ Priorities
135
+ </a>
136
+ <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-secondary hover:text-white">
137
+ <i class="fas fa-chart-pie mr-3"></i>
138
+ Metrics
139
+ </a>
140
+ <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-secondary hover:text-white">
141
+ <i class="fas fa-users mr-3"></i>
142
+ People
143
+ </a>
144
+ <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-secondary hover:text-white">
145
+ <i class="fas fa-file-alt mr-3"></i>
146
+ OPSP
147
+ </a>
148
+ <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-secondary hover:text-white">
149
+ <i class="fas fa-calendar-alt mr-3"></i>
150
+ Meeting Pulse
151
+ </a>
152
+ <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-secondary hover:text-white">
153
+ <i class="fas fa-cog mr-3"></i>
154
+ Settings
155
+ </a>
156
+ </nav>
157
+ <div class="px-4 py-4 border-t border-gray-700">
158
+ <div class="flex items-center">
159
+ <div class="p-2 rounded-full bg-blue-100 text-blue-600">
160
+ <i class="fas fa-question-circle"></i>
161
+ </div>
162
+ <div class="ml-3">
163
+ <p class="text-xs font-medium">Need help?</p>
164
+ <a href="#" class="text-xs text-blue-300 hover:underline">Contact support</a>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Main content -->
173
+ <div class="flex flex-col flex-1 overflow-hidden">
174
+ <!-- Top navigation -->
175
+ <header class="bg-white shadow-sm z-10">
176
+ <div class="flex items-center justify-between px-4 py-3">
177
+ <div class="flex items-center">
178
+ <button id="mobileSidebarButton" class="md:hidden text-gray-500 focus:outline-none">
179
+ <i class="fas fa-bars text-xl"></i>
180
+ </button>
181
+ <h1 class="ml-2 text-xl font-semibold text-gray-800">Scaling Up Dashboard</h1>
182
+ </div>
183
+ <div class="flex items-center space-x-4">
184
+ <div class="relative">
185
+ <button id="notificationsButton" class="text-gray-500 hover:text-gray-700 focus:outline-none relative">
186
+ <i class="fas fa-bell text-xl"></i>
187
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
188
+ </button>
189
+ <div id="notificationsDropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg py-1 z-50">
190
+ <div class="px-4 py-2 border-b border-gray-200">
191
+ <p class="text-sm font-medium text-gray-800">Notifications</p>
192
+ </div>
193
+ <div class="max-h-60 overflow-y-auto">
194
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
195
+ <div class="flex items-start">
196
+ <div class="flex-shrink-0 pt-1">
197
+ <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
198
+ <i class="fas fa-calendar-check"></i>
199
+ </div>
200
+ </div>
201
+ <div class="ml-3">
202
+ <p class="text-sm font-medium">Quarterly review meeting in 2 days</p>
203
+ <p class="text-xs text-gray-500">10 minutes ago</p>
204
+ </div>
205
+ </div>
206
+ </a>
207
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
208
+ <div class="flex items-start">
209
+ <div class="flex-shrink-0 pt-1">
210
+ <div class="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center text-green-600">
211
+ <i class="fas fa-check-circle"></i>
212
+ </div>
213
+ </div>
214
+ <div class="ml-3">
215
+ <p class="text-sm font-medium">New hire completed onboarding</p>
216
+ <p class="text-xs text-gray-500">1 hour ago</p>
217
+ </div>
218
+ </div>
219
+ </a>
220
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
221
+ <div class="flex items-start">
222
+ <div class="flex-shrink-0 pt-1">
223
+ <div class="h-8 w-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
224
+ <i class="fas fa-exclamation-triangle"></i>
225
+ </div>
226
+ </div>
227
+ <div class="ml-3">
228
+ <p class="text-sm font-medium">Customer NPS dropped by 5 points</p>
229
+ <p class="text-xs text-gray-500">3 hours ago</p>
230
+ </div>
231
+ </div>
232
+ </a>
233
+ </div>
234
+ <div class="px-4 py-2 border-t border-gray-200">
235
+ <a href="#" class="text-xs font-medium text-blue-600 hover:text-blue-800">View all notifications</a>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ <button class="text-gray-500 hover:text-gray-700 focus:outline-none">
240
+ <i class="fas fa-question-circle text-xl"></i>
241
+ </button>
242
+ <div class="relative">
243
+ <button id="userMenuButton" class="flex items-center focus:outline-none">
244
+ <span class="hidden md:inline-block ml-2 text-sm font-medium text-gray-700">John Doe</span>
245
+ <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar">
246
+ </button>
247
+ <div id="userMenuDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
248
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
249
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
250
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </header>
256
+
257
+ <!-- Main content area -->
258
+ <main class="flex-1 overflow-y-auto p-4 bg-gray-50">
259
+ <!-- Quick stats and company health -->
260
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
261
+ <div class="dashboard-card bg-white rounded-lg shadow p-6">
262
+ <div class="flex items-center">
263
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
264
+ <i class="fas fa-rocket text-xl"></i>
265
+ </div>
266
+ <div class="ml-4">
267
+ <p class="text-sm font-medium text-gray-500">Revenue</p>
268
+ <p class="text-2xl font-semibold text-gray-800">$1.2M</p>
269
+ <p class="text-xs text-green-500 flex items-center">
270
+ <i class="fas fa-arrow-up mr-1"></i> +12% from last quarter
271
+ </p>
272
+ </div>
273
+ </div>
274
+ <div class="mt-4">
275
+ <div id="revenueChart" style="height: 60px;"></div>
276
+ </div>
277
+ </div>
278
+ <div class="dashboard-card bg-white rounded-lg shadow p-6">
279
+ <div class="flex items-center">
280
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
281
+ <i class="fas fa-users text-xl"></i>
282
+ </div>
283
+ <div class="ml-4">
284
+ <p class="text-sm font-medium text-gray-500">Employees</p>
285
+ <p class="text-2xl font-semibold text-gray-800">84</p>
286
+ <p class="text-xs text-green-500 flex items-center">
287
+ <i class="fas fa-arrow-up mr-1"></i> +5 this quarter
288
+ </p>
289
+ </div>
290
+ </div>
291
+ <div class="mt-4">
292
+ <div id="employeesChart" style="height: 60px;"></div>
293
+ </div>
294
+ </div>
295
+ <div class="dashboard-card bg-white rounded-lg shadow p-6">
296
+ <div class="flex items-center">
297
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
298
+ <i class="fas fa-heart text-xl"></i>
299
+ </div>
300
+ <div class="ml-4">
301
+ <p class="text-sm font-medium text-gray-500">Customer NPS</p>
302
+ <p class="text-2xl font-semibold text-gray-800">72</p>
303
+ <p class="text-xs text-red-500 flex items-center">
304
+ <i class="fas fa-arrow-down mr-1"></i> -3 from last quarter
305
+ </p>
306
+ </div>
307
+ </div>
308
+ <div class="mt-4">
309
+ <div id="npsChart" style="height: 60px;"></div>
310
+ </div>
311
+ </div>
312
+ <div class="dashboard-card bg-white rounded-lg shadow p-6">
313
+ <div class="flex items-center">
314
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
315
+ <i class="fas fa-bullseye text-xl"></i>
316
+ </div>
317
+ <div class="ml-4">
318
+ <p class="text-sm font-medium text-gray-500">Quarterly Goals</p>
319
+ <p class="text-2xl font-semibold text-gray-800">65%</p>
320
+ <p class="text-xs text-blue-500">On track</p>
321
+ </div>
322
+ </div>
323
+ <div class="mt-4">
324
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
325
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 65%"></div>
326
+ </div>
327
+ <p class="text-xs text-gray-500 mt-1">35 days remaining</p>
328
+ </div>
329
+ </div>
330
+ </div>
331
+
332
+ <!-- Company health scorecard -->
333
+ <div class="mb-6">
334
+ <div class="bg-white rounded-lg shadow overflow-hidden">
335
+ <div class="px-6 py-4 border-b border-gray-200">
336
+ <h2 class="text-lg font-semibold text-gray-800">Company Health Scorecard</h2>
337
+ <p class="text-sm text-gray-500">Key indicators across all business functions</p>
338
+ </div>
339
+ <div class="p-6">
340
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
341
+ <div class="text-center">
342
+ <div class="relative inline-block mb-3">
343
+ <svg class="w-16 h-16" viewBox="0 0 36 36">
344
+ <path
345
+ d="M18 2.0845
346
+ a 15.9155 15.9155 0 0 1 0 31.831
347
+ a 15.9155 15.9155 0 0 1 0 -31.831"
348
+ fill="none"
349
+ stroke="#E5E7EB"
350
+ stroke-width="3"
351
+ stroke-dasharray="100, 100"
352
+ />
353
+ <path
354
+ d="M18 2.0845
355
+ a 15.9155 15.9155 0 0 1 0 31.831
356
+ a 15.9155 15.9155 0 0 1 0 -31.831"
357
+ fill="none"
358
+ stroke="#10B981"
359
+ stroke-width="3"
360
+ stroke-dasharray="85, 100"
361
+ />
362
+ <text x="18" y="20.5" text-anchor="middle" font-size="10" fill="#111827" font-weight="bold">85%</text>
363
+ </svg>
364
+ </div>
365
+ <h3 class="text-sm font-medium text-gray-700">People</h3>
366
+ <p class="text-xs text-gray-500">Employee engagement</p>
367
+ </div>
368
+ <div class="text-center">
369
+ <div class="relative inline-block mb-3">
370
+ <svg class="w-16 h-16" viewBox="0 0 36 36">
371
+ <path
372
+ d="M18 2.0845
373
+ a 15.9155 15.9155 0 0 1 0 31.831
374
+ a 15.9155 15.9155 0 0 1 0 -31.831"
375
+ fill="none"
376
+ stroke="#E5E7EB"
377
+ stroke-width="3"
378
+ stroke-dasharray="100, 100"
379
+ />
380
+ <path
381
+ d="M18 2.0845
382
+ a 15.9155 15.9155 0 0 1 0 31.831
383
+ a 15.9155 15.9155 0 0 1 0 -31.831"
384
+ fill="none"
385
+ stroke="#3B82F6"
386
+ stroke-width="3"
387
+ stroke-dasharray="78, 100"
388
+ />
389
+ <text x="18" y="20.5" text-anchor="middle" font-size="10" fill="#111827" font-weight="bold">78%</text>
390
+ </svg>
391
+ </div>
392
+ <h3 class="text-sm font-medium text-gray-700">Strategy</h3>
393
+ <p class="text-xs text-gray-500">Execution clarity</p>
394
+ </div>
395
+ <div class="text-center">
396
+ <div class="relative inline-block mb-3">
397
+ <svg class="w-16 h-16" viewBox="0 0 36 36">
398
+ <path
399
+ d="M18 2.0845
400
+ a 15.9155 15.9155 0 0 1 0 31.831
401
+ a 15.9155 15.9155 0 0 1 0 -31.831"
402
+ fill="none"
403
+ stroke="#E5E7EB"
404
+ stroke-width="3"
405
+ stroke-dasharray="100, 100"
406
+ />
407
+ <path
408
+ d="M18 2.0845
409
+ a 15.9155 15.9155 0 0 1 0 31.831
410
+ a 15.9155 15.9155 0 0 1 0 -31.831"
411
+ fill="none"
412
+ stroke="#8B5CF6"
413
+ stroke-width="3"
414
+ stroke-dasharray="92, 100"
415
+ />
416
+ <text x="18" y="20.5" text-anchor="middle" font-size="10" fill="#111827" font-weight="bold">92%</text>
417
+ </svg>
418
+ </div>
419
+ <h3 class="text-sm font-medium text-gray-700">Execution</h3>
420
+ <p class="text-xs text-gray-500">Meeting rhythm</p>
421
+ </div>
422
+ <div class="text-center">
423
+ <div class="relative inline-block mb-3">
424
+ <svg class="w-16 h-16" viewBox="0 0 36 36">
425
+ <path
426
+ d="M18 2.0845
427
+ a 15.9155 15.9155 0 0 1 0 31.831
428
+ a 15.9155 15.9155 0 0 1 0 -31.831"
429
+ fill="none"
430
+ stroke="#E5E7EB"
431
+ stroke-width="3"
432
+ stroke-dasharray="100, 100"
433
+ />
434
+ <path
435
+ d="M18 2.0845
436
+ a 15.9155 15.9155 0 0 1 0 31.831
437
+ a 15.9155 15.9155 0 0 1 0 -31.831"
438
+ fill="none"
439
+ stroke="#EC4899"
440
+ stroke-width="3"
441
+ stroke-dasharray="65, 100"
442
+ />
443
+ <text x="18" y="20.5" text-anchor="middle" font-size="10" fill="#111827" font-weight="bold">65%</text>
444
+ </svg>
445
+ </div>
446
+ <h3 class="text-sm font-medium text-gray-700">Cash</h3>
447
+ <p class="text-xs text-gray-500">Financial health</p>
448
+ </div>
449
+ <div class="text-center">
450
+ <div class="relative inline-block mb-3">
451
+ <svg class="w-16 h-16" viewBox="0 0 36 36">
452
+ <path
453
+ d="M18 2.0845
454
+ a 15.9155 15.9155 0 0 1 0 31.831
455
+ a 15.9155 15.9155 0 0 1 0 -31.831"
456
+ fill="none"
457
+ stroke="#E5E7EB"
458
+ stroke-width="3"
459
+ stroke-dasharray="100, 100"
460
+ />
461
+ <path
462
+ d="M18 2.0845
463
+ a 15.9155 15.9155 0 0 1 0 31.831
464
+ a 15.9155 15.9155 0 0 1 0 -31.831"
465
+ fill="none"
466
+ stroke="#F59E0B"
467
+ stroke-width="3"
468
+ stroke-dasharray="88, 100"
469
+ />
470
+ <text x="18" y="20.5" text-anchor="middle" font-size="10" fill="#111827" font-weight="bold">88%</text>
471
+ </svg>
472
+ </div>
473
+ <h3 class="text-sm font-medium text-gray-700">Overall</h3>
474
+ <p class="text-xs text-gray-500">Company health</p>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </div>
480
+
481
+ <!-- Main dashboard sections -->
482
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
483
+ <!-- Rockefeller Habits Checklist -->
484
+ <div class="lg:col-span-1 bg-white rounded-lg shadow overflow-hidden">
485
+ <div class="px-6 py-4 border-b border-gray-200">
486
+ <div class="flex items-center justify-between">
487
+ <div>
488
+ <h2 class="text-lg font-semibold text-gray-800">Rockefeller Habits</h2>
489
+ <p class="text-sm text-gray-500">Daily/Weekly disciplines</p>
490
+ </div>
491
+ <span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">5/10</span>
492
+ </div>
493
+ </div>
494
+ <div class="p-6">
495
+ <div class="space-y-4">
496
+ <div class="flex items-start">
497
+ <input type="checkbox" id="habit1" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked>
498
+ <label for="habit1" class="ml-3 block text-sm font-medium text-gray-700">
499
+ Executive team is healthy and aligned
500
+ <p class="text-xs text-gray-500 mt-1">Last checked: Today</p>
501
+ </label>
502
+ </div>
503
+ <div class="flex items-start">
504
+ <input type="checkbox" id="habit2" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked>
505
+ <label for="habit2" class="ml-3 block text-sm font-medium text-gray-700">
506
+ Everyone is aligned with #1 priority
507
+ <p class="text-xs text-gray-500 mt-1">Last checked: Today</p>
508
+ </label>
509
+ </div>
510
+ <div class="flex items-start">
511
+ <input type="checkbox" id="habit3" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500">
512
+ <label for="habit3" class="ml-3 block text-sm font-medium text-gray-700">
513
+ Communication rhythm is established
514
+ <p class="text-xs text-gray-500 mt-1">Last checked: 2 days ago</p>
515
+ </label>
516
+ </div>
517
+ <div class="flex items-start">
518
+ <input type="checkbox" id="habit4" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500">
519
+ <label for="habit4" class="ml-3 block text-sm font-medium text-gray-700">
520
+ Every facet has a person assigned
521
+ <p class="text-xs text-gray-500 mt-1">Last checked: 1 week ago</p>
522
+ </label>
523
+ </div>
524
+ <div class="flex items-start">
525
+ <input type="checkbox" id="habit5" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked>
526
+ <label for="habit5" class="ml-3 block text-sm font-medium text-gray-700">
527
+ Ongoing employee feedback
528
+ <p class="text-xs text-gray-500 mt-1">Last checked: Yesterday</p>
529
+ </label>
530
+ </div>
531
+ </div>
532
+ <div class="mt-6">
533
+ <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
534
+ <i class="fas fa-sync-alt mr-2"></i> Update Habits
535
+ </button>
536
+ </div>
537
+ </div>
538
+ </div>
539
+
540
+ <!-- One Page Strategic Plan -->
541
+ <div class="lg:col-span-2 bg-white rounded-lg shadow overflow-hidden">
542
+ <div class="px-6 py-4 border-b border-gray-200">
543
+ <div class="flex items-center justify-between">
544
+ <div>
545
+ <h2 class="text-lg font-semibold text-gray-800">One Page Strategic Plan</h2>
546
+ <p class="text-sm text-gray-500">Company vision and priorities</p>
547
+ </div>
548
+ <div class="flex space-x-2">
549
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-xs font-medium text-gray-700 hover:bg-gray-50">
550
+ <i class="fas fa-history mr-1"></i> Version History
551
+ </button>
552
+ <button class="px-3 py-1 border border-transparent rounded-md text-xs font-medium text-white bg-blue-600 hover:bg-blue-700">
553
+ <i class="fas fa-print mr-1"></i> Print
554
+ </button>
555
+ </div>
556
+ </div>
557
+ </div>
558
+ <div class="p-6">
559
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
560
+ <div>
561
+ <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center">
562
+ <span class="bg-blue-100 text-blue-800 p-1 rounded mr-2">
563
+ <i class="fas fa-medal text-xs"></i>
564
+ </span>
565
+ Core Values
566
+ </h3>
567
+ <ul class="space-y-3">
568
+ <li class="flex items-start">
569
+ <span class="flex-shrink-0 h-6 w-6 text-green-500 flex items-center justify-center">
570
+ <i class="fas fa-check"></i>
571
+ </span>
572
+ <div class="ml-2">
573
+ <span class="text-sm font-medium text-gray-700">Customer Obsession</span>
574
+ <p class="text-xs text-gray-500">Start with the customer and work backwards</p>
575
+ </div>
576
+ </li>
577
+ <li class="flex items-start">
578
+ <span class="flex-shrink-0 h-6 w-6 text-green-500 flex items-center justify-center">
579
+ <i class="fas fa-check"></i>
580
+ </span>
581
+ <div class="ml-2">
582
+ <span class="text-sm font-medium text-gray-700">Ownership</span>
583
+ <p class="text-xs text-gray-500">Think long term and don't sacrifice for short-term results</p>
584
+ </div>
585
+ </li>
586
+ <li class="flex items-start">
587
+ <span class="flex-shrink-0 h-6 w-6 text-green-500 flex items-center justify-center">
588
+ <i class="fas fa-check"></i>
589
+ </span>
590
+ <div class="ml-2">
591
+ <span class="text-sm font-medium text-gray-700">Innovate & Simplify</span>
592
+ <p class="text-xs text-gray-500">Expect and require innovation and invention</p>
593
+ </div>
594
+ </li>
595
+ </ul>
596
+ </div>
597
+ <div>
598
+ <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center">
599
+ <span class="bg-purple-100 text-purple-800 p-1 rounded mr-2">
600
+ <i class="fas fa-bullseye text-xs"></i>
601
+ </span>
602
+ BHAG (10-25 Year Goal)
603
+ </h3>
604
+ <div class="bg-gray-50 p-3 rounded-lg">
605
+ <p class="text-sm text-gray-700">To become the most customer-centric company in our industry, serving 1 million customers globally by 2040.</p>
606
+ </div>
607
+ <div class="mt-4">
608
+ <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Progress</h4>
609
+ <div class="w-full bg-gray-200 rounded-full h-2">
610
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 15%"></div>
611
+ </div>
612
+ <p class="text-xs text-gray-500 mt-1">15% towards goal</p>
613
+ </div>
614
+ </div>
615
+ <div>
616
+ <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center">
617
+ <span class="bg-green-100 text-green-800 p-1 rounded mr-2">
618
+ <i class="fas fa-chart-line text-xs"></i>
619
+ </span>
620
+ 3-5 Year Targets
621
+ </h3>
622
+ <ul class="space-y-3">
623
+ <li class="flex items-start">
624
+ <span class="flex-shrink-0 h-6 w-6 text-blue-500 flex items-center justify-center">
625
+ <i class="fas fa-bullseye"></i>
626
+ </span>
627
+ <div class="ml-2">
628
+ <span class="text-sm font-medium text-gray-700">$50M annual revenue</span>
629
+ <p class="text-xs text-gray-500">Current: $12M</p>
630
+ </div>
631
+ </li>
632
+ <li class="flex items-start">
633
+ <span class="flex-shrink-0 h-6 w-6 text-blue-500 flex items-center justify-center">
634
+ <i class="fas fa-bullseye"></i>
635
+ </span>
636
+ <div class="ml-2">
637
+ <span class="text-sm font-medium text-gray-700">Expand to 3 new markets</span>
638
+ <p class="text-xs text-gray-500">Current: 1 new market entered</p>
639
+ </div>
640
+ </li>
641
+ <li class="flex items-start">
642
+ <span class="flex-shrink-0 h-6 w-6 text-blue-500 flex items-center justify-center">
643
+ <i class="fas fa-bullseye"></i>
644
+ </span>
645
+ <div class="ml-2">
646
+ <span class="text-sm font-medium text-gray-700">300 employees</span>
647
+ <p class="text-xs text-gray-500">Current: 84 employees</p>
648
+ </div>
649
+ </li>
650
+ </ul>
651
+ </div>
652
+ <div>
653
+ <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center">
654
+ <span class="bg-yellow-100 text-yellow-800 p-1 rounded mr-2">
655
+ <i class="fas fa-flag text-xs"></i>
656
+ </span>
657
+ 1 Year Priorities
658
+ </h3>
659
+ <ul class="space-y-3">
660
+ <li class="flex items-start">
661
+ <span class="flex-shrink-0 h-6 w-6 text-purple-500 flex items-center justify-center">
662
+ <i class="fas fa-flag"></i>
663
+ </span>
664
+ <div class="ml-2">
665
+ <span class="text-sm font-medium text-gray-700">Launch new product line</span>
666
+ <div class="mt-1">
667
+ <div class="w-full bg-gray-200 rounded-full h-1.5">
668
+ <div class="bg-purple-600 h-1.5 rounded-full" style="width: 45%"></div>
669
+ </div>
670
+ <p class="text-xs text-gray-500 mt-1">On track for Q4 launch</p>
671
+ </div>
672
+ </div>
673
+ </li>
674
+ <li class="flex items-start">
675
+ <span class="flex-shrink-0 h-6 w-6 text-purple-500 flex items-center justify-center">
676
+ <i class="fas fa-flag"></i>
677
+ </span>
678
+ <div class="ml-2">
679
+ <span class="text-sm font-medium text-gray-700">Improve customer retention by 15%</span>
680
+ <div class="mt-1">
681
+ <div class="w-full bg-gray-200 rounded-full h-1.5">
682
+ <div class="bg-purple-600 h-1.5 rounded-full" style="width: 30%"></div>
683
+ </div>
684
+ <p class="text-xs text-gray-500 mt-1">Currently at +5%</p>
685
+ </div>
686
+ </div>
687
+ </li>
688
+ </ul>
689
+ </div>
690
+ </div>
691
+ <div class="mt-6">
692
+ <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
693
+ <i class="fas fa-edit mr-2"></i> Edit Strategic Plan
694
+ </button>
695
+ </div>
696
+ </div>
697
+ </div>
698
+ </div>
699
+
700
+ <!-- Quarterly Priorities and Metrics -->
701
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
702
+ <!-- Quarterly Priorities -->
703
+ <div class="lg:col-span-2 bg-white rounded-lg shadow overflow-hidden">
704
+ <div class="px-6 py-4 border-b border-gray-200">
705
+ <div class="flex items-center justify-between">
706
+ <div>
707
+ <h2 class="text-lg font-semibold text-gray-800">Quarterly Priorities</h2>
708
+ <p class="text-sm text-gray-500">Q3 2023 - Critical Few</p>
709
+ </div>
710
+ <div class="flex space-x-2">
711
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-xs font-medium text-gray-700 hover:bg-gray-50">
712
+ <i class="fas fa-plus mr-1"></i> Add Priority
713
+ </button>
714
+ <button class="px-3 py-1 border border-transparent rounded-md text-xs font-medium text-white bg-blue-600 hover:bg-blue-700">
715
+ <i class="fas fa-sliders-h mr-1"></i> Adjust
716
+ </button>
717
+ </div>
718
+ </div>
719
+ </div>
720
+ <div class="p-6">
721
+ <div class="space-y-6">
722
+ <div class="flex items-start">
723
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 font-bold">
724
+ 1
725
+ </div>
726
+ <div class="ml-4 flex-1">
727
+ <div class="flex items-center justify-between">
728
+ <h3 class="text-md font-medium text-gray-800">Launch new marketing campaign</h3>
729
+ <span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full priority-badge">On Track</span>
730
+ </div>
731
+ <p class="text-sm text-gray-600 mt-1">Increase brand awareness and lead generation by 30%</p>
732
+ <div class="mt-3">
733
+ <div class="flex items-center justify-between mb-1">
734
+ <span class="text-xs font-medium text-gray-500">Progress</span>
735
+ <span class="text-xs font-semibold text-green-600">75%</span>
736
+ </div>
737
+ <div class="w-full bg-gray-200 rounded-full h-2">
738
+ <div class="bg-green-500 h-2 rounded-full" style="width: 75%"></div>
739
+ </div>
740
+ <div class="flex items-center justify-between mt-1">
741
+ <p class="text-xs text-gray-500">Due in 2 weeks</p>
742
+ <p class="text-xs text-gray-500">Sarah Johnson (Owner)</p>
743
+ </div>
744
+ </div>
745
+ </div>
746
+ </div>
747
+ <div class="flex items-start">
748
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold">
749
+ 2
750
+ </div>
751
+ <div class="ml-4 flex-1">
752
+ <div class="flex items-center justify-between">
753
+ <h3 class="text-md font-medium text-gray-800">Hire 5 new sales reps</h3>
754
+ <span class="px-2 py-1 text-xs font-semibold text-blue-800 bg-blue-100 rounded-full priority-badge">In Progress</span>
755
+ </div>
756
+ <p class="text-sm text-gray-600 mt-1">Expand sales team to meet growing demand</p>
757
+ <div class="mt-3">
758
+ <div class="flex items-center justify-between mb-1">
759
+ <span class="text-xs font-medium text-gray-500">Progress</span>
760
+ <span class="text-xs font-semibold text-blue-600">40%</span>
761
+ </div>
762
+ <div class="w-full bg-gray-200 rounded-full h-2">
763
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 40%"></div>
764
+ </div>
765
+ <div class="flex items-center justify-between mt-1">
766
+ <p class="text-xs text-gray-500">2 hires completed</p>
767
+ <p class="text-xs text-gray-500">Michael Chen (Owner)</p>
768
+ </div>
769
+ </div>
770
+ </div>
771
+ </div>
772
+ <div class="flex items-start">
773
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold">
774
+ 3
775
+ </div>
776
+ <div class="ml-4 flex-1">
777
+ <div class="flex items-center justify-between">
778
+ <h3 class="text-md font-medium text-gray-800">Implement new CRM system</h3>
779
+ <span class="px-2 py-1 text-xs font-semibold text-purple-800 bg-purple-100 rounded-full priority-badge">Needs Attention</span>
780
+ </div>
781
+ <p class="text-sm text-gray-600 mt-1">Improve customer relationship management and sales tracking</p>
782
+ <div class="mt-3">
783
+ <div class="flex items-center justify-between mb-1">
784
+ <span class="text-xs font-medium text-gray-500">Progress</span>
785
+ <span class="text-xs font-semibold text-purple-600">20%</span>
786
+ </div>
787
+ <div class="w-full bg-gray-200 rounded-full h-2">
788
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 20%"></div>
789
+ </div>
790
+ <div class="flex items-center justify-between mt-1">
791
+ <p class="text-xs text-gray-500">In discovery phase</p>
792
+ <p class="text-xs text-gray-500">Alex Rodriguez (Owner)</p>
793
+ </div>
794
+ </div>
795
+ </div>
796
+ </div>
797
+ </div>
798
+ </div>
799
+ </div>
800
+
801
+ <!-- Key Metrics -->
802
+ <div class="lg:col-span-1 bg-white rounded-lg shadow overflow-hidden">
803
+ <div class="px-6 py-4 border-b border-gray-200">
804
+ <div class="flex items-center justify-between">
805
+ <div>
806
+ <h2 class="text-lg font-semibold text-gray-800">Key Metrics</h2>
807
+ <p class="text-sm text-gray-500">Quarterly performance</p>
808
+ </div>
809
+ <div class="flex space-x-2">
810
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-xs font-medium text-gray-700 hover:bg-gray-50">
811
+ <i class="fas fa-cog mr-1"></i> Configure
812
+ </button>
813
+ </div>
814
+ </div>
815
+ </div>
816
+ <div class="p-6">
817
+ <div class="space-y-6">
818
+ <div>
819
+ <div class="flex justify-between items-center mb-1">
820
+ <span class="text-sm font-medium text-gray-700 flex items-center">
821
+ <i class="fas fa-dollar-sign text-gray-400 mr-1 text-xs"></i> Revenue Growth
822
+ </span>
823
+ <span class="text-sm font-semibold text-green-600">+12%</span>
824
+ </div>
825
+ <div class="w-full bg-gray-200 rounded-full h-2">
826
+ <div class="bg-green-500 h-2 rounded-full" style="width: 80%"></div>
827
+ </div>
828
+ <div class="flex justify-between items-center mt-1">
829
+ <p class="text-xs text-gray-500">$1.2M actual</p>
830
+ <p class="text-xs text-gray-500">$1.35M target</p>
831
+ </div>
832
+ </div>
833
+ <div>
834
+ <div class="flex justify-between items-center mb-1">
835
+ <span class="text-sm font-medium text-gray-700 flex items-center">
836
+ <i class="fas fa-user-plus text-gray-400 mr-1 text-xs"></i> Customer Acquisition
837
+ </span>
838
+ <span class="text-sm font-semibold text-blue-600">245</span>
839
+ </div>
840
+ <div class="w-full bg-gray-200 rounded-full h-2">
841
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 65%"></div>
842
+ </div>
843
+ <div class="flex justify-between items-center mt-1">
844
+ <p class="text-xs text-gray-500">245 actual</p>
845
+ <p class="text-xs text-gray-500">375 target</p>
846
+ </div>
847
+ </div>
848
+ <div>
849
+ <div class="flex justify-between items-center mb-1">
850
+ <span class="text-sm font-medium text-gray-700 flex items-center">
851
+ <i class="fas fa-heart text-gray-400 mr-1 text-xs"></i> Employee Engagement
852
+ </span>
853
+ <span class="text-sm font-semibold text-yellow-600">78%</span>
854
+ </div>
855
+ <div class="w-full bg-gray-200 rounded-full h-2">
856
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 78%"></div>
857
+ </div>
858
+ <div class="flex justify-between items-center mt-1">
859
+ <p class="text-xs text-gray-500">+3% from last quarter</p>
860
+ <p class="text-xs text-gray-500">80% target</p>
861
+ </div>
862
+ </div>
863
+ <div>
864
+ <div class="flex justify-between items-center mb-1">
865
+ <span class="text-sm font-medium text-gray-700 flex items-center">
866
+ <i class="fas fa-bolt text-gray-400 mr-1 text-xs"></i> Productivity
867
+ </span>
868
+ <span class="text-sm font-semibold text-purple-600">1.2x</span>
869
+ </div>
870
+ <div class="w-full bg-gray-200 rounded-full h-2">
871
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 60%"></div>
872
+ </div>
873
+ <div class="flex justify-between items-center mt-1">
874
+ <p class="text-xs text-gray-500">1.2x actual</p>
875
+ <p class="text-xs text-gray-500">2x target</p>
876
+ </div>
877
+ </div>
878
+ </div>
879
+ <div class="mt-6">
880
+ <div class="bg-gray-50 p-4 rounded-lg">
881
+ <h3 class="text-sm font-medium text-gray-800 mb-2">Trend Analysis</h3>
882
+ <div id="metricsTrendChart" style="height: 150px;"></div>
883
+ </div>
884
+ </div>
885
+ </div>
886
+ </div>
887
+ </div>
888
+
889
+ <!-- Meeting Pulse and To-Dos -->
890
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
891
+ <!-- Meeting Pulse -->
892
+ <div class="lg:col-span-2 bg-white rounded-lg shadow overflow-hidden">
893
+ <div class="px-6 py-4 border-b border-gray-200">
894
+ <div class="flex items-center justify-between">
895
+ <div>
896
+ <h2 class="text-lg font-semibold text-gray-800">Meeting Pulse</h2>
897
+ <p class="text-sm text-gray-500">Daily, weekly, monthly rhythm</p>
898
+ </div>
899
+ <div class="flex space-x-2">
900
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-xs font-medium text-gray-700 hover:bg-gray-50">
901
+ <i class="fas fa-calendar-plus mr-1"></i> Add Meeting
902
+ </button>
903
+ </div>
904
+ </div>
905
+ </div>
906
+ <div class="p-6">
907
+ <div class="space-y-6">
908
+ <div>
909
+ <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center">
910
+ <span class="bg-blue-100 text-blue-800 p-1 rounded mr-2">
911
+ <i class="fas fa-calendar-day text-xs"></i>
912
+ </span>
913
+ Daily Huddle (15 min)
914
+ </h3>
915
+ <div class="bg-blue-50 p-4 rounded-lg">
916
+ <div class="flex items-center justify-between">
917
+ <div>
918
+ <p class="text-sm font-medium text-gray-700">Today's Priorities</p>
919
+ <p class="text-xs text-gray-500">8:15 AM, Conference Room</p>
920
+ </div>
921
+ <div class="flex space-x-2">
922
+ <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium">
923
+ <i class="fas fa-video mr-1"></i> Join
924
+ </button>
925
+ <button class="px-3 py-1 bg-white text-blue-700 rounded-full text-xs font-medium border border-blue-200">
926
+ <i class="fas fa-clipboard-list mr-1"></i> Agenda
927
+ </button>
928
+ </div>
929
+ </div>
930
+ </div>
931
+ <div class="mt-2">
932
+ <div class="flex items-center text-xs text-gray-500">
933
+ <i class="fas fa-info-circle mr-1"></i>
934
+ <span>Next meeting: Tomorrow at 8:15 AM</span>
935
+ </div>
936
+ </div>
937
+ </div>
938
+ <div>
939
+ <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center">
940
+ <span class="bg-green-100 text-green-800 p-1 rounded mr-2">
941
+ <i class="fas fa-calendar-week text-xs"></i>
942
+ </span>
943
+ Weekly Meeting (90 min)
944
+ </h3>
945
+ <div class="bg-green-50 p-4 rounded-lg">
946
+ <div class="flex items-center justify-between">
947
+ <div>
948
+ <p class="text-sm font-medium text-gray-700">Quarterly Priority Review</p>
949
+ <p class="text-xs text-gray-500">Monday, 10:00 AM, Board Room</p>
950
+ </div>
951
+ <div class="flex space-x-2">
952
+ <button class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium">
953
+ <i class="fas fa-clipboard-check mr-1"></i> Prepare
954
+ </button>
955
+ <button class="px-3 py-1 bg-white text-green-700 rounded-full text-xs font-medium border border-green-200">
956
+ <i class="fas fa-file-alt mr-1"></i> Notes
957
+ </button>
958
+ </div>
959
+ </div>
960
+ </div>
961
+ <div class="mt-2">
962
+ <div class="flex items-center text-xs text-gray-500">
963
+ <i class="fas fa-info-circle mr-1"></i>
964
+ <span>Next meeting: Monday, July 10 at 10:00 AM</span>
965
+ </div>
966
+ </div>
967
+ </div>
968
+ <div>
969
+ <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center">
970
+ <span class="bg-purple-100 text-purple-800 p-1 rounded mr-2">
971
+ <i class="fas fa-calendar-alt text-xs"></i>
972
+ </span>
973
+ Monthly Learning (2 hours)
974
+ </h3>
975
+ <div class="bg-purple-50 p-4 rounded-lg">
976
+ <div class="flex items-center justify-between">
977
+ <div>
978
+ <p class="text-sm font-medium text-gray-700">Customer Feedback Analysis</p>
979
+ <p class="text-xs text-gray-500">First Friday, 1:00 PM, Training Room</p>
980
+ </div>
981
+ <div class="flex space-x-2">
982
+ <button class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-medium">
983
+ <i class="fas fa-chart-bar mr-1"></i> Review Data
984
+ </button>
985
+ </div>
986
+ </div>
987
+ </div>
988
+ <div class="mt-2">
989
+ <div class="flex items-center text-xs text-gray-500">
990
+ <i class="fas fa-info-circle mr-1"></i>
991
+ <span>Next meeting: Friday, July 7 at 1:00 PM</span>
992
+ </div>
993
+ </div>
994
+ </div>
995
+ <div>
996
+ <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center">
997
+ <span class="bg-yellow-100 text-yellow-800 p-1 rounded mr-2">
998
+ <i class="fas fa-calendar-check text-xs"></i>
999
+ </span>
1000
+ Quarterly Offsite (2 days)
1001
+ </h3>
1002
+ <div class="bg-yellow-50 p-4 rounded-lg">
1003
+ <div class="flex items-center justify-between">
1004
+ <div>
1005
+ <p class="text-sm font-medium text-gray-700">Strategic Planning</p>
1006
+ <p class="text-xs text-gray-500">Oct 15-16, Mountain View Resort</p>
1007
+ </div>
1008
+ <div class="flex space-x-2">
1009
+ <button class="px-3 py-1 bg-yellow-100 text-yellow-700 rounded-full text-xs font-medium">
1010
+ <i class="fas fa-reply mr-1"></i> RSVP
1011
+ </button>
1012
+ <button class="px-3 py-1 bg-white text-yellow-700 rounded-full text-xs font-medium border border-yellow-200">
1013
+ <i class="fas fa-map-marked-alt mr-1"></i> Location
1014
+ </button>
1015
+ </div>
1016
+ </div>
1017
+ </div>
1018
+ <div class="mt-2">
1019
+ <div class="flex items-center text-xs text-gray-500">
1020
+ <i class="fas fa-info-circle mr-1"></i>
1021
+ <span>90 days until offsite</span>
1022
+ </div>
1023
+ </div>
1024
+ </div>
1025
+ </div>
1026
+ </div>
1027
+ </div>
1028
+
1029
+ <!-- To-Dos and Action Items -->
1030
+ <div class="lg:col-span-1 bg-white rounded-lg shadow overflow-hidden">
1031
+ <div class="px-6 py-4 border-b border-gray-200">
1032
+ <div class="flex items-center justify-between">
1033
+ <div>
1034
+ <h2 class="text-lg font-semibold text-gray-800">My Action Items</h2>
1035
+ <p class="text-sm text-gray-500">Priority tasks</p>
1036
+ </div>
1037
+ <div class="flex space-x-2">
1038
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-xs font-medium text-gray-700 hover:bg-gray-50">
1039
+ <i class="fas fa-filter mr-1"></i> Filter
1040
+ </button>
1041
+ </div>
1042
+ </div>
1043
+ </div>
1044
+ <div class="p-6">
1045
+ <div class="space-y-4">
1046
+ <div class="flex items-start">
1047
+ <input type="checkbox" id="task1" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500">
1048
+ <label for="task1" class="ml-3 block text-sm font-medium text-gray-700">
1049
+ Review marketing campaign results
1050
+ <div class="flex items-center mt-1">
1051
+ <span class="text-xs text-gray-500">Due tomorrow</span>
1052
+ <span class="ml-2 px-1 py-0.5 text-xs font-medium bg-blue-100 text-blue-800 rounded">High</span>
1053
+ </div>
1054
+ </label>
1055
+ </div>
1056
+ <div class="flex items-start">
1057
+ <input type="checkbox" id="task2" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked>
1058
+ <label for="task2" class="ml-3 block text-sm font-medium text-gray-700 line-through text-gray-400">
1059
+ Interview sales candidate
1060
+ <div class="flex items-center mt-1">
1061
+ <span class="text-xs text-gray-400">Completed today</span>
1062
+ </div>
1063
+ </label>
1064
+ </div>
1065
+ <div class="flex items-start">
1066
+ <input type="checkbox" id="task3" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500">
1067
+ <label for="task3" class="ml-3 block text-sm font-medium text-gray-700">
1068
+ Prepare quarterly board report
1069
+ <div class="flex items-center mt-1">
1070
+ <span class="text-xs text-gray-500">Due in 3 days</span>
1071
+ <span class="ml-2 px-1 py-0.5 text-xs font-medium bg-yellow-100 text-yellow-800 rounded">Medium</span>
1072
+ </div>
1073
+ </label>
1074
+ </div>
1075
+ <div class="flex items-start">
1076
+ <input type="checkbox" id="task4" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500">
1077
+ <label for="task4" class="ml-3 block text-sm font-medium text-gray-700">
1078
+ Follow up with key client
1079
+ <div class="flex items-center mt-1">
1080
+ <span class="text-xs text-gray-500">Due Friday</span>
1081
+ </div>
1082
+ </label>
1083
+ </div>
1084
+ <div class="flex items-start">
1085
+ <input type="checkbox" id="task5" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500">
1086
+ <label for="task5" class="ml-3 block text-sm font-medium text-gray-700">
1087
+ Approve budget for Q4 initiatives
1088
+ <div class="flex items-center mt-1">
1089
+ <span class="text-xs text-gray-500">Due next week</span>
1090
+ </div>
1091
+ </label>
1092
+ </div>
1093
+ </div>
1094
+ <div class="mt-6">
1095
+ <div class="flex">
1096
+ <input type="text" class="flex-1 min-w-0 block w-full px-3 py-2 rounded-md border border-gray-300 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Add new action item">
1097
+ <button class="ml-3 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
1098
+ <i class="fas fa-plus mr-1"></i> Add
1099
+ </button>
1100
+ </div>
1101
+ </div>
1102
+ </div>
1103
+ </div>
1104
+ </div>
1105
+ </main>
1106
+ </div>
1107
+ </div>
1108
+
1109
+ <script>
1110
+ // Initialize all interactive elements
1111
+ document.addEventListener('DOMContentLoaded', function() {
1112
+ // Mobile sidebar toggle
1113
+ const mobileSidebarButton = document.getElementById('mobileSidebarButton');
1114
+ const mobileSidebarOverlay = document.getElementById('mobileSidebarOverlay');
1115
+ const sidebar = document.getElementById('sidebar');
1116
+
1117
+ mobileSidebarButton.addEventListener('click', function() {
1118
+ sidebar.classList.toggle('hidden');
1119
+ mobileSidebarOverlay.classList.toggle('hidden');
1120
+ document.body.classList.toggle('overflow-hidden');
1121
+ });
1122
+
1123
+ mobileSidebarOverlay.addEventListener('click', function() {
1124
+ sidebar.classList.add('hidden');
1125
+ mobileSidebarOverlay.classList.add('hidden');
1126
+ document.body.classList.remove('overflow-hidden');
1127
+ });
1128
+
1129
+ // Notifications dropdown
1130
+ const notificationsButton = document.getElementById('notificationsButton');
1131
+ const notificationsDropdown = document.getElementById('notificationsDropdown');
1132
+
1133
+ notificationsButton.addEventListener('click', function() {
1134
+ notificationsDropdown.classList.toggle('hidden');
1135
+ userMenuDropdown.classList.add('hidden');
1136
+ });
1137
+
1138
+ // User menu dropdown
1139
+ const userMenuButton = document.getElementById('userMenuButton');
1140
+ const userMenuDropdown = document.getElementById('userMenuDropdown');
1141
+
1142
+ userMenuButton.addEventListener('click', function() {
1143
+ userMenuDropdown.classList.toggle('hidden');
1144
+ notificationsDropdown.classList.add('hidden');
1145
+ });
1146
+
1147
+ // Close dropdowns when clicking outside
1148
+ document.addEventListener('click', function(event) {
1149
+ if (!notificationsButton.contains(event.target) && !notificationsDropdown.contains(event.target)) {
1150
+ notificationsDropdown.classList.add('hidden');
1151
+ }
1152
+ if (!userMenuButton.contains(event.target) && !userMenuDropdown.contains(event.target)) {
1153
+ userMenuDropdown.classList.add('hidden');
1154
+ }
1155
+ });
1156
+
1157
+ // Toggle checkboxes and strike through text
1158
+ const checkboxes = document.querySelectorAll('input[type="checkbox"]');
1159
+ checkboxes.forEach(checkbox => {
1160
+ checkbox.addEventListener('change', function() {
1161
+ const label = this.nextElementSibling;
1162
+ if (this.checked) {
1163
+ label.classList.add('line-through', 'text-gray-400');
1164
+ } else {
1165
+ label.classList.remove('line-through', 'text-gray-400');
1166
+ }
1167
+ });
1168
+ });
1169
+
1170
+ // Initialize mini charts
1171
+ const revenueChartOptions = {
1172
+ series: [{
1173
+ name: 'Revenue',
1174
+ data: [30, 40, 45, 50, 49, 60, 70, 80, 90, 100, 110, 120]
1175
+ }],
1176
+ chart: {
1177
+ type: 'area',
1178
+ height: 60,
1179
+ sparkline: {
1180
+ enabled: true
1181
+ },
1182
+ },
1183
+ stroke: {
1184
+ curve: 'smooth',
1185
+ width: 2
1186
+ },
1187
+ fill: {
1188
+ type: 'gradient',
1189
+ gradient: {
1190
+ shadeIntensity: 1,
1191
+ opacityFrom: 0.7,
1192
+ opacityTo: 0.2,
1193
+ stops: [0, 100]
1194
+ }
1195
+ },
1196
+ colors: ['#3B82F6'],
1197
+ tooltip: {
1198
+ fixed: {
1199
+ enabled: false
1200
+ },
1201
+ x: {
1202
+ show: false
1203
+ },
1204
+ marker: {
1205
+ show: false
1206
+ }
1207
+ }
1208
+ };
1209
+
1210
+ const revenueChart = new ApexCharts(document.querySelector("#revenueChart"), revenueChartOptions);
1211
+ revenueChart.render();
1212
+
1213
+ const employeesChartOptions = {
1214
+ series: [{
1215
+ name: 'Employees',
1216
+ data: [60, 65, 68, 70, 72, 75, 78, 80, 82, 84]
1217
+ }],
1218
+ chart: {
1219
+ type: 'area',
1220
+ height: 60,
1221
+ sparkline: {
1222
+ enabled: true
1223
+ },
1224
+ },
1225
+ stroke: {
1226
+ curve: 'smooth',
1227
+ width: 2
1228
+ },
1229
+ fill: {
1230
+ type: 'gradient',
1231
+ gradient: {
1232
+ shadeIntensity: 1,
1233
+ opacityFrom: 0.7,
1234
+ opacityTo: 0.2,
1235
+ stops: [0, 100]
1236
+ }
1237
+ },
1238
+ colors: ['#10B981'],
1239
+ tooltip: {
1240
+ fixed: {
1241
+ enabled: false
1242
+ },
1243
+ x: {
1244
+ show: false
1245
+ },
1246
+ marker: {
1247
+ show: false
1248
+ }
1249
+ }
1250
+ };
1251
+
1252
+ const employeesChart = new ApexCharts(document.querySelector("#employeesChart"), employeesChartOptions);
1253
+ employeesChart.render();
1254
+
1255
+ const npsChartOptions = {
1256
+ series: [{
1257
+ name: 'NPS',
1258
+ data: [70, 72, 71, 73, 75, 74, 72, 70, 71, 72, 70, 72]
1259
+ }],
1260
+ chart: {
1261
+ type: 'area',
1262
+ height: 60,
1263
+ sparkline: {
1264
+ enabled: true
1265
+ },
1266
+ },
1267
+ stroke: {
1268
+ curve: 'smooth',
1269
+ width: 2
1270
+ },
1271
+ fill: {
1272
+ type: 'gradient',
1273
+ gradient: {
1274
+ shadeIntensity: 1,
1275
+ opacityFrom: 0.7,
1276
+ opacityTo: 0.2,
1277
+ stops: [0, 100]
1278
+ }
1279
+ },
1280
+ colors: ['#8B5CF6'],
1281
+ tooltip: {
1282
+ fixed: {
1283
+ enabled: false
1284
+ },
1285
+ x: {
1286
+ show: false
1287
+ },
1288
+ marker: {
1289
+ show: false
1290
+ }
1291
+ }
1292
+ };
1293
+
1294
+ const npsChart = new ApexCharts(document.querySelector("#npsChart"), npsChartOptions);
1295
+ npsChart.render();
1296
+
1297
+ // Metrics trend chart
1298
+ const metricsTrendChartOptions = {
1299
+ series: [{
1300
+ name: 'Revenue',
1301
+ data: [30, 40, 45, 50, 49, 60, 70, 80, 90, 100, 110, 120]
1302
+ }, {
1303
+ name: 'Customers',
1304
+ data: [100, 120, 140, 160, 180, 185, 190, 210, 230, 245, 260, 280]
1305
+ }, {
1306
+ name: 'NPS',
1307
+ data: [70, 72, 71, 73, 75, 74, 72, 70, 71, 72, 70, 72]
1308
+ }],
1309
+ chart: {
1310
+ type: 'line',
1311
+ height: 150,
1312
+ toolbar: {
1313
+ show: false
1314
+ },
1315
+ },
1316
+ colors: ['#3B82F6', '#10B981', '#8B5CF6'],
1317
+ stroke: {
1318
+ curve: 'smooth',
1319
+ width: 2
1320
+ },
1321
+ markers: {
1322
+ size: 0
1323
+ },
1324
+ xaxis: {
1325
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
1326
+ labels: {
1327
+ style: {
1328
+ fontSize: '10px'
1329
+ }
1330
+ }
1331
+ },
1332
+ yaxis: {
1333
+ show: false
1334
+ },
1335
+ tooltip: {
1336
+ enabled: false
1337
+ },
1338
+ legend: {
1339
+ show: false
1340
+ },
1341
+ grid: {
1342
+ show: false
1343
+ }
1344
+ };
1345
+
1346
+ const metricsTrendChart = new ApexCharts(document.querySelector("#metricsTrendChart"), metricsTrendChartOptions);
1347
+ metricsTrendChart.render();
1348
+
1349
+ // Simulate progress updates
1350
+ setInterval(() => {
1351
+ const progressBars = document.querySelectorAll('[class*="bg-"]:not(.bg-white):not(.bg-gray-200):not(.bg-gray-300)');
1352
+ progressBars.forEach(bar => {
1353
+ const currentWidth = parseInt(bar.style.width) || 0;
1354
+ const maxWidth = bar.parentElement.getAttribute('data-max') || 100;
1355
+ const newWidth = Math.min(currentWidth + (Math.random() * 2), maxWidth);
1356
+ bar.style.width = `${newWidth}%`;
1357
+
1358
+ // Update color based on progress
1359
+ if (newWidth > 80) {
1360
+ bar.classList.remove('bg-yellow-500', 'bg-purple-500', 'bg-blue-500');
1361
+ bar.classList.add('bg-green-500');
1362
+ } else if (newWidth > 50) {
1363
+ bar.classList.remove('bg-green-500', 'bg-purple-500', 'bg-blue-500');
1364
+ bar.classList.add('bg-yellow-500');
1365
+ }
1366
+ });
1367
+
1368
+ // Update percentage labels
1369
+ document.querySelectorAll('.progress-percentage').forEach(el => {
1370
+ const current = parseInt(el.textContent) || 0;
1371
+ const newValue = Math.min(current + Math.floor(Math.random() * 2), 100);
1372
+ el.textContent = newValue + '%';
1373
+ });
1374
+ }, 3000);
1375
+
1376
+ // Sidebar navigation active state
1377
+ const sidebarItems = document.querySelectorAll('.sidebar-item');
1378
+ sidebarItems.forEach(item => {
1379
+ item.addEventListener('click', function() {
1380
+ sidebarItems.forEach(i => i.classList.remove('active', 'bg-secondary', 'text-white'));
1381
+ this.classList.add('active', 'bg-secondary', 'text-white');
1382
+ });
1383
+ });
1384
+ });
1385
+ </script>
1386
+ <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=JayStormX8/scale-v2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1387
+ </html>
prompts.txt ADDED
File without changes