RamitestAI commited on
Commit
0e7a943
·
verified ·
1 Parent(s): 8d12b15

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +669 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Workload
3
- emoji: 🐢
4
- colorFrom: gray
5
- colorTo: yellow
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: workload
3
+ emoji: 🐳
4
+ colorFrom: blue
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,669 @@
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>Workload Analyzer AI | Organizational Efficiency Tool</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
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6b73ff 0%, #000dff 100%);
12
+ }
13
+ .workload-card {
14
+ transition: all 0.3s ease;
15
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .workload-card:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
20
+ }
21
+ .chart-container {
22
+ height: 300px;
23
+ }
24
+ .animate-pulse {
25
+ animation: pulse 2s infinite;
26
+ }
27
+ @keyframes pulse {
28
+ 0% { opacity: 0.6; }
29
+ 50% { opacity: 1; }
30
+ 100% { opacity: 0.6; }
31
+ }
32
+ .sidebar {
33
+ transition: all 0.3s ease;
34
+ }
35
+ @media (max-width: 768px) {
36
+ .sidebar {
37
+ transform: translateX(-100%);
38
+ position: fixed;
39
+ z-index: 50;
40
+ height: 100vh;
41
+ top: 0;
42
+ left: 0;
43
+ }
44
+ .sidebar.open {
45
+ transform: translateX(0);
46
+ }
47
+ }
48
+ </style>
49
+ </head>
50
+ <body class="bg-gray-50 font-sans">
51
+ <!-- Mobile Menu Button -->
52
+ <div class="md:hidden fixed top-4 left-4 z-50">
53
+ <button id="menuBtn" class="p-2 rounded-md bg-white shadow-md text-blue-600">
54
+ <i class="fas fa-bars text-xl"></i>
55
+ </button>
56
+ </div>
57
+
58
+ <!-- Sidebar -->
59
+ <div id="sidebar" class="sidebar w-64 bg-white shadow-lg md:shadow-none md:translate-x-0">
60
+ <div class="p-4 border-b border-gray-200">
61
+ <div class="flex items-center space-x-3">
62
+ <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white">
63
+ <i class="fas fa-brain"></i>
64
+ </div>
65
+ <h1 class="text-xl font-bold text-blue-800">Workload AI</h1>
66
+ </div>
67
+ </div>
68
+ <nav class="p-4">
69
+ <ul class="space-y-2">
70
+ <li>
71
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg bg-blue-50 text-blue-700">
72
+ <i class="fas fa-chart-pie text-blue-600"></i>
73
+ <span>Dashboard</span>
74
+ </a>
75
+ </li>
76
+ <li>
77
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-100 text-gray-700">
78
+ <i class="fas fa-users"></i>
79
+ <span>Teams</span>
80
+ </a>
81
+ </li>
82
+ <li>
83
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-100 text-gray-700">
84
+ <i class="fas fa-tasks"></i>
85
+ <span>Tasks</span>
86
+ </a>
87
+ </li>
88
+ <li>
89
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-100 text-gray-700">
90
+ <i class="fas fa-chart-line"></i>
91
+ <span>Analytics</span>
92
+ </a>
93
+ </li>
94
+ <li>
95
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-100 text-gray-700">
96
+ <i class="fas fa-cog"></i>
97
+ <span>Settings</span>
98
+ </a>
99
+ </li>
100
+ </ul>
101
+ </nav>
102
+ <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200">
103
+ <div class="flex items-center space-x-3">
104
+ <div class="w-8 h-8 rounded-full bg-gray-300"></div>
105
+ <div>
106
+ <p class="text-sm font-medium">Admin User</p>
107
+ <p class="text-xs text-gray-500">admin@company.com</p>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Main Content -->
114
+ <div class="md:ml-64 min-h-screen">
115
+ <!-- Header -->
116
+ <header class="bg-white shadow-sm">
117
+ <div class="px-6 py-4 flex justify-between items-center">
118
+ <h2 class="text-2xl font-semibold text-gray-800">Workload Analysis Dashboard</h2>
119
+ <div class="flex items-center space-x-4">
120
+ <div class="relative">
121
+ <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
122
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
123
+ </div>
124
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
125
+ <i class="fas fa-bell"></i>
126
+ </button>
127
+ </div>
128
+ </div>
129
+ </header>
130
+
131
+ <!-- Main Content Area -->
132
+ <main class="p-6">
133
+ <!-- Overview Cards -->
134
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
135
+ <div class="workload-card bg-white rounded-xl p-6">
136
+ <div class="flex justify-between items-start">
137
+ <div>
138
+ <p class="text-gray-500">Total Units</p>
139
+ <h3 class="text-3xl font-bold mt-2">24</h3>
140
+ </div>
141
+ <div class="p-3 rounded-lg bg-blue-50 text-blue-600">
142
+ <i class="fas fa-sitemap text-xl"></i>
143
+ </div>
144
+ </div>
145
+ <div class="mt-4 pt-4 border-t border-gray-100">
146
+ <p class="text-sm text-gray-500 flex items-center">
147
+ <span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span>
148
+ <span>3% increase from last month</span>
149
+ </p>
150
+ </div>
151
+ </div>
152
+
153
+ <div class="workload-card bg-white rounded-xl p-6">
154
+ <div class="flex justify-between items-start">
155
+ <div>
156
+ <p class="text-gray-500">Avg. Workload</p>
157
+ <h3 class="text-3xl font-bold mt-2">72%</h3>
158
+ </div>
159
+ <div class="p-3 rounded-lg bg-purple-50 text-purple-600">
160
+ <i class="fas fa-tachometer-alt text-xl"></i>
161
+ </div>
162
+ </div>
163
+ <div class="mt-4 pt-4 border-t border-gray-100">
164
+ <p class="text-sm text-gray-500 flex items-center">
165
+ <span class="w-2 h-2 rounded-full bg-red-500 mr-2"></span>
166
+ <span>5% increase from last month</span>
167
+ </p>
168
+ </div>
169
+ </div>
170
+
171
+ <div class="workload-card bg-white rounded-xl p-6">
172
+ <div class="flex justify-between items-start">
173
+ <div>
174
+ <p class="text-gray-500">Overloaded Units</p>
175
+ <h3 class="text-3xl font-bold mt-2">6</h3>
176
+ </div>
177
+ <div class="p-3 rounded-lg bg-red-50 text-red-600">
178
+ <i class="fas fa-exclamation-triangle text-xl"></i>
179
+ </div>
180
+ </div>
181
+ <div class="mt-4 pt-4 border-t border-gray-100">
182
+ <p class="text-sm text-gray-500 flex items-center">
183
+ <span class="w-2 h-2 rounded-full bg-yellow-500 mr-2"></span>
184
+ <span>2 more than last month</span>
185
+ </p>
186
+ </div>
187
+ </div>
188
+
189
+ <div class="workload-card bg-white rounded-xl p-6">
190
+ <div class="flex justify-between items-start">
191
+ <div>
192
+ <p class="text-gray-500">Underutilized</p>
193
+ <h3 class="text-3xl font-bold mt-2">4</h3>
194
+ </div>
195
+ <div class="p-3 rounded-lg bg-yellow-50 text-yellow-600">
196
+ <i class="fas fa-bed text-xl"></i>
197
+ </div>
198
+ </div>
199
+ <div class="mt-4 pt-4 border-t border-gray-100">
200
+ <p class="text-sm text-gray-500 flex items-center">
201
+ <span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span>
202
+ <span>1 less than last month</span>
203
+ </p>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Charts and Analysis Section -->
209
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
210
+ <!-- Workload Distribution Chart -->
211
+ <div class="lg:col-span-2 workload-card bg-white rounded-xl p-6">
212
+ <div class="flex justify-between items-center mb-6">
213
+ <h3 class="text-lg font-semibold text-gray-800">Workload Distribution by Unit</h3>
214
+ <div class="flex space-x-2">
215
+ <button class="px-3 py-1 text-sm rounded-lg bg-blue-50 text-blue-600">Weekly</button>
216
+ <button class="px-3 py-1 text-sm rounded-lg hover:bg-gray-100">Monthly</button>
217
+ <button class="px-3 py-1 text-sm rounded-lg hover:bg-gray-100">Quarterly</button>
218
+ </div>
219
+ </div>
220
+ <div class="chart-container">
221
+ <canvas id="workloadChart"></canvas>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- Workload Recommendations -->
226
+ <div class="workload-card bg-white rounded-xl p-6">
227
+ <div class="flex justify-between items-center mb-6">
228
+ <h3 class="text-lg font-semibold text-gray-800">AI Recommendations</h3>
229
+ <div class="w-8 h-8 rounded-full gradient-bg flex items-center justify-center text-white">
230
+ <i class="fas fa-robot"></i>
231
+ </div>
232
+ </div>
233
+ <div class="space-y-4">
234
+ <div class="p-4 bg-blue-50 rounded-lg">
235
+ <div class="flex items-start space-x-3">
236
+ <div class="mt-1">
237
+ <i class="fas fa-lightbulb text-blue-600"></i>
238
+ </div>
239
+ <div>
240
+ <h4 class="font-medium text-blue-800">Reallocate Resources</h4>
241
+ <p class="text-sm text-gray-600 mt-1">Move 2 team members from Marketing to Sales to balance workload.</p>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ <div class="p-4 bg-purple-50 rounded-lg">
246
+ <div class="flex items-start space-x-3">
247
+ <div class="mt-1">
248
+ <i class="fas fa-clock text-purple-600"></i>
249
+ </div>
250
+ <div>
251
+ <h4 class="font-medium text-purple-800">Adjust Deadlines</h4>
252
+ <p class="text-sm text-gray-600 mt-1">Extend project X deadline by 1 week for Development team.</p>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ <div class="p-4 bg-green-50 rounded-lg">
257
+ <div class="flex items-start space-x-3">
258
+ <div class="mt-1">
259
+ <i class="fas fa-users text-green-600"></i>
260
+ </div>
261
+ <div>
262
+ <h4 class="font-medium text-green-800">Hiring Suggestion</h4>
263
+ <p class="text-sm text-gray-600 mt-1">Consider hiring 1 additional QA specialist for Testing team.</p>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ <button class="w-full mt-6 py-2 rounded-lg gradient-bg text-white font-medium hover:opacity-90 transition">
269
+ Generate New Recommendations
270
+ </button>
271
+ </div>
272
+ </div>
273
+
274
+ <!-- Unit Workload Details -->
275
+ <div class="workload-card bg-white rounded-xl p-6 mb-8">
276
+ <div class="flex justify-between items-center mb-6">
277
+ <h3 class="text-lg font-semibold text-gray-800">Unit Workload Details</h3>
278
+ <button class="px-4 py-2 rounded-lg border border-gray-300 text-sm font-medium hover:bg-gray-50">
279
+ Export Data
280
+ </button>
281
+ </div>
282
+ <div class="overflow-x-auto">
283
+ <table class="min-w-full divide-y divide-gray-200">
284
+ <thead class="bg-gray-50">
285
+ <tr>
286
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Unit</th>
287
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Members</th>
288
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Workload</th>
289
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Capacity</th>
290
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
291
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
292
+ </tr>
293
+ </thead>
294
+ <tbody class="bg-white divide-y divide-gray-200">
295
+ <tr>
296
+ <td class="px-6 py-4 whitespace-nowrap">
297
+ <div class="flex items-center">
298
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
299
+ <i class="fas fa-code"></i>
300
+ </div>
301
+ <div class="ml-4">
302
+ <div class="text-sm font-medium text-gray-900">Development</div>
303
+ <div class="text-sm text-gray-500">IT Department</div>
304
+ </div>
305
+ </div>
306
+ </td>
307
+ <td class="px-6 py-4 whitespace-nowrap">
308
+ <div class="text-sm text-gray-900">12</div>
309
+ </td>
310
+ <td class="px-6 py-4 whitespace-nowrap">
311
+ <div class="flex items-center">
312
+ <div class="w-32 bg-gray-200 rounded-full h-2.5">
313
+ <div class="bg-red-500 h-2.5 rounded-full" style="width: 92%"></div>
314
+ </div>
315
+ <span class="ml-2 text-sm font-medium text-gray-700">92%</span>
316
+ </div>
317
+ </td>
318
+ <td class="px-6 py-4 whitespace-nowrap">
319
+ <div class="text-sm text-gray-900">8%</div>
320
+ </td>
321
+ <td class="px-6 py-4 whitespace-nowrap">
322
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
323
+ Overloaded
324
+ </span>
325
+ </td>
326
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
327
+ <button class="text-blue-600 hover:text-blue-900">Analyze</button>
328
+ </td>
329
+ </tr>
330
+ <tr>
331
+ <td class="px-6 py-4 whitespace-nowrap">
332
+ <div class="flex items-center">
333
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
334
+ <i class="fas fa-chart-line"></i>
335
+ </div>
336
+ <div class="ml-4">
337
+ <div class="text-sm font-medium text-gray-900">Marketing</div>
338
+ <div class="text-sm text-gray-500">Growth Department</div>
339
+ </div>
340
+ </div>
341
+ </td>
342
+ <td class="px-6 py-4 whitespace-nowrap">
343
+ <div class="text-sm text-gray-900">8</div>
344
+ </td>
345
+ <td class="px-6 py-4 whitespace-nowrap">
346
+ <div class="flex items-center">
347
+ <div class="w-32 bg-gray-200 rounded-full h-2.5">
348
+ <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 65%"></div>
349
+ </div>
350
+ <span class="ml-2 text-sm font-medium text-gray-700">65%</span>
351
+ </div>
352
+ </td>
353
+ <td class="px-6 py-4 whitespace-nowrap">
354
+ <div class="text-sm text-gray-900">35%</div>
355
+ </td>
356
+ <td class="px-6 py-4 whitespace-nowrap">
357
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
358
+ Optimal
359
+ </span>
360
+ </td>
361
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
362
+ <button class="text-blue-600 hover:text-blue-900">Analyze</button>
363
+ </td>
364
+ </tr>
365
+ <tr>
366
+ <td class="px-6 py-4 whitespace-nowrap">
367
+ <div class="flex items-center">
368
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
369
+ <i class="fas fa-headset"></i>
370
+ </div>
371
+ <div class="ml-4">
372
+ <div class="text-sm font-medium text-gray-900">Customer Support</div>
373
+ <div class="text-sm text-gray-500">Service Department</div>
374
+ </div>
375
+ </div>
376
+ </td>
377
+ <td class="px-6 py-4 whitespace-nowrap">
378
+ <div class="text-sm text-gray-900">6</div>
379
+ </td>
380
+ <td class="px-6 py-4 whitespace-nowrap">
381
+ <div class="flex items-center">
382
+ <div class="w-32 bg-gray-200 rounded-full h-2.5">
383
+ <div class="bg-blue-500 h-2.5 rounded-full" style="width: 78%"></div>
384
+ </div>
385
+ <span class="ml-2 text-sm font-medium text-gray-700">78%</span>
386
+ </div>
387
+ </td>
388
+ <td class="px-6 py-4 whitespace-nowrap">
389
+ <div class="text-sm text-gray-900">22%</div>
390
+ </td>
391
+ <td class="px-6 py-4 whitespace-nowrap">
392
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
393
+ High
394
+ </span>
395
+ </td>
396
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
397
+ <button class="text-blue-600 hover:text-blue-900">Analyze</button>
398
+ </td>
399
+ </tr>
400
+ <tr>
401
+ <td class="px-6 py-4 whitespace-nowrap">
402
+ <div class="flex items-center">
403
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
404
+ <i class="fas fa-clipboard-check"></i>
405
+ </div>
406
+ <div class="ml-4">
407
+ <div class="text-sm font-medium text-gray-900">Quality Assurance</div>
408
+ <div class="text-sm text-gray-500">IT Department</div>
409
+ </div>
410
+ </div>
411
+ </td>
412
+ <td class="px-6 py-4 whitespace-nowrap">
413
+ <div class="text-sm text-gray-900">5</div>
414
+ </td>
415
+ <td class="px-6 py-4 whitespace-nowrap">
416
+ <div class="flex items-center">
417
+ <div class="w-32 bg-gray-200 rounded-full h-2.5">
418
+ <div class="bg-red-500 h-2.5 rounded-full" style="width: 88%"></div>
419
+ </div>
420
+ <span class="ml-2 text-sm font-medium text-gray-700">88%</span>
421
+ </div>
422
+ </td>
423
+ <td class="px-6 py-4 whitespace-nowrap">
424
+ <div class="text-sm text-gray-900">12%</div>
425
+ </td>
426
+ <td class="px-6 py-4 whitespace-nowrap">
427
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
428
+ Overloaded
429
+ </span>
430
+ </td>
431
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
432
+ <button class="text-blue-600 hover:text-blue-900">Analyze</button>
433
+ </td>
434
+ </tr>
435
+ <tr>
436
+ <td class="px-6 py-4 whitespace-nowrap">
437
+ <div class="flex items-center">
438
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600">
439
+ <i class="fas fa-bullhorn"></i>
440
+ </div>
441
+ <div class="ml-4">
442
+ <div class="text-sm font-medium text-gray-900">Sales</div>
443
+ <div class="text-sm text-gray-500">Growth Department</div>
444
+ </div>
445
+ </div>
446
+ </td>
447
+ <td class="px-6 py-4 whitespace-nowrap">
448
+ <div class="text-sm text-gray-900">10</div>
449
+ </td>
450
+ <td class="px-6 py-4 whitespace-nowrap">
451
+ <div class="flex items-center">
452
+ <div class="w-32 bg-gray-200 rounded-full h-2.5">
453
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 45%"></div>
454
+ </div>
455
+ <span class="ml-2 text-sm font-medium text-gray-700">45%</span>
456
+ </div>
457
+ </td>
458
+ <td class="px-6 py-4 whitespace-nowrap">
459
+ <div class="text-sm text-gray-900">55%</div>
460
+ </td>
461
+ <td class="px-6 py-4 whitespace-nowrap">
462
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
463
+ Underutilized
464
+ </span>
465
+ </td>
466
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
467
+ <button class="text-blue-600 hover:text-blue-900">Analyze</button>
468
+ </td>
469
+ </tr>
470
+ </tbody>
471
+ </table>
472
+ </div>
473
+ <div class="mt-4 flex justify-between items-center">
474
+ <div class="text-sm text-gray-500">
475
+ Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">24</span> units
476
+ </div>
477
+ <div class="flex space-x-2">
478
+ <button class="px-3 py-1 rounded-lg border border-gray-300 text-sm font-medium hover:bg-gray-50">Previous</button>
479
+ <button class="px-3 py-1 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700">1</button>
480
+ <button class="px-3 py-1 rounded-lg border border-gray-300 text-sm font-medium hover:bg-gray-50">2</button>
481
+ <button class="px-3 py-1 rounded-lg border border-gray-300 text-sm font-medium hover:bg-gray-50">3</button>
482
+ <button class="px-3 py-1 rounded-lg border border-gray-300 text-sm font-medium hover:bg-gray-50">Next</button>
483
+ </div>
484
+ </div>
485
+ </div>
486
+
487
+ <!-- Workload Analysis Form -->
488
+ <div class="workload-card bg-white rounded-xl p-6">
489
+ <h3 class="text-lg font-semibold text-gray-800 mb-6">Custom Workload Analysis</h3>
490
+ <form>
491
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
492
+ <div>
493
+ <label class="block text-sm font-medium text-gray-700 mb-1">Select Department</label>
494
+ <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
495
+ <option>All Departments</option>
496
+ <option>IT Department</option>
497
+ <option>Growth Department</option>
498
+ <option>Service Department</option>
499
+ <option>Operations</option>
500
+ </select>
501
+ </div>
502
+ <div>
503
+ <label class="block text-sm font-medium text-gray-700 mb-1">Time Period</label>
504
+ <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
505
+ <option>Last 7 days</option>
506
+ <option selected>Last 30 days</option>
507
+ <option>Last quarter</option>
508
+ <option>Last year</option>
509
+ <option>Custom range</option>
510
+ </select>
511
+ </div>
512
+ <div>
513
+ <label class="block text-sm font-medium text-gray-700 mb-1">Workload Threshold</label>
514
+ <div class="flex items-center space-x-2">
515
+ <input type="range" min="0" max="100" value="70" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
516
+ <span class="text-sm font-medium text-gray-700">70%</span>
517
+ </div>
518
+ <p class="text-xs text-gray-500 mt-1">Units above this threshold will be flagged as overloaded</p>
519
+ </div>
520
+ <div>
521
+ <label class="block text-sm font-medium text-gray-700 mb-1">Analysis Type</label>
522
+ <div class="space-y-2">
523
+ <div class="flex items-center">
524
+ <input id="basic" name="analysis-type" type="radio" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500">
525
+ <label for="basic" class="ml-2 block text-sm text-gray-700">Basic Analysis</label>
526
+ </div>
527
+ <div class="flex items-center">
528
+ <input id="advanced" name="analysis-type" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500">
529
+ <label for="advanced" class="ml-2 block text-sm text-gray-700">Advanced AI Analysis (+5 credits)</label>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ </div>
534
+ <div class="flex justify-end space-x-3">
535
+ <button type="button" class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50">
536
+ Reset
537
+ </button>
538
+ <button type="submit" class="px-6 py-2 rounded-lg gradient-bg text-white font-medium hover:opacity-90 transition">
539
+ Run Analysis
540
+ </button>
541
+ </div>
542
+ </form>
543
+ </div>
544
+ </main>
545
+
546
+ <!-- Footer -->
547
+ <footer class="bg-white border-t border-gray-200 py-6 px-6">
548
+ <div class="flex flex-col md:flex-row justify-between items-center">
549
+ <p class="text-sm text-gray-500">© 2023 Workload Analyzer AI. All rights reserved.</p>
550
+ <div class="flex space-x-6 mt-4 md:mt-0">
551
+ <a href="#" class="text-sm text-gray-500 hover:text-gray-700">Privacy Policy</a>
552
+ <a href="#" class="text-sm text-gray-500 hover:text-gray-700">Terms of Service</a>
553
+ <a href="#" class="text-sm text-gray-500 hover:text-gray-700">Contact Us</a>
554
+ </div>
555
+ </div>
556
+ </footer>
557
+ </div>
558
+
559
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
560
+ <script>
561
+ // Mobile menu toggle
562
+ const menuBtn = document.getElementById('menuBtn');
563
+ const sidebar = document.getElementById('sidebar');
564
+
565
+ menuBtn.addEventListener('click', () => {
566
+ sidebar.classList.toggle('open');
567
+ });
568
+
569
+ // Workload Chart
570
+ const workloadCtx = document.getElementById('workloadChart').getContext('2d');
571
+ const workloadChart = new Chart(workloadCtx, {
572
+ type: 'bar',
573
+ data: {
574
+ labels: ['Development', 'Marketing', 'Customer Support', 'Quality Assurance', 'Sales', 'HR', 'Finance'],
575
+ datasets: [
576
+ {
577
+ label: 'Current Workload',
578
+ data: [92, 65, 78, 88, 45, 60, 55],
579
+ backgroundColor: '#3B82F6',
580
+ borderRadius: 6
581
+ },
582
+ {
583
+ label: 'Capacity',
584
+ data: [8, 35, 22, 12, 55, 40, 45],
585
+ backgroundColor: '#E5E7EB',
586
+ borderRadius: 6
587
+ }
588
+ ]
589
+ },
590
+ options: {
591
+ responsive: true,
592
+ maintainAspectRatio: false,
593
+ scales: {
594
+ x: {
595
+ grid: {
596
+ display: false
597
+ }
598
+ },
599
+ y: {
600
+ beginAtZero: true,
601
+ max: 100,
602
+ ticks: {
603
+ callback: function(value) {
604
+ return value + '%';
605
+ }
606
+ }
607
+ }
608
+ },
609
+ plugins: {
610
+ legend: {
611
+ position: 'top',
612
+ },
613
+ tooltip: {
614
+ callbacks: {
615
+ label: function(context) {
616
+ return context.dataset.label + ': ' + context.raw + '%';
617
+ }
618
+ }
619
+ }
620
+ }
621
+ }
622
+ });
623
+
624
+ // Simulate AI analysis
625
+ document.querySelector('form').addEventListener('submit', function(e) {
626
+ e.preventDefault();
627
+
628
+ // Show loading state
629
+ const submitBtn = this.querySelector('button[type="submit"]');
630
+ const originalText = submitBtn.innerHTML;
631
+ submitBtn.innerHTML = '<i class="fas fa-spinner animate-spin mr-2"></i> Analyzing...';
632
+ submitBtn.disabled = true;
633
+
634
+ // Simulate API call
635
+ setTimeout(() => {
636
+ // Create a notification
637
+ const notification = document.createElement('div');
638
+ notification.className = 'fixed bottom-4 right-4 px-6 py-3 bg-green-500 text-white rounded-lg shadow-lg flex items-center animate-pulse';
639
+ notification.innerHTML = `
640
+ <i class="fas fa-check-circle mr-2"></i>
641
+ <span>Analysis completed! View your results.</span>
642
+ `;
643
+ document.body.appendChild(notification);
644
+
645
+ // Remove notification after 5 seconds
646
+ setTimeout(() => {
647
+ notification.remove();
648
+ }, 5000);
649
+
650
+ // Reset button
651
+ submitBtn.innerHTML = originalText;
652
+ submitBtn.disabled = false;
653
+
654
+ // Update chart with new data (simulated)
655
+ workloadChart.data.datasets[0].data = [85, 70, 75, 82, 60, 65, 58];
656
+ workloadChart.update();
657
+ }, 2000);
658
+ });
659
+
660
+ // Update threshold display
661
+ const thresholdSlider = document.querySelector('input[type="range"]');
662
+ const thresholdValue = document.querySelector('input[type="range"] + span');
663
+
664
+ thresholdSlider.addEventListener('input', function() {
665
+ thresholdValue.textContent = this.value + '%';
666
+ });
667
+ </script>
668
+ <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=RamitestAI/workload" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
669
+ </html>