Hugging Face's logo

Spaces:
JayStormX8
/
performance-management-v2
Running

App Files Community
JayStormX8 commited on
Commit
5cd4384
·
verified ·
1 Parent(s): e1e5aaa

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +948 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Performance Management V2
3
- emoji: 🏢
4
- colorFrom: green
5
  colorTo: gray
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: performance-management-v2
3
+ emoji: 🐳
4
+ colorFrom: red
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,948 @@
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>Team Performance 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>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#3B82F6',
15
+ secondary: '#10B981',
16
+ dark: '#1F2937',
17
+ light: '#F9FAFB'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ .sidebar {
25
+ transition: all 0.3s ease;
26
+ }
27
+ .modal {
28
+ transition: opacity 0.3s ease, transform 0.3s ease;
29
+ }
30
+ .modal-hidden {
31
+ opacity: 0;
32
+ transform: translateY(-20px);
33
+ pointer-events: none;
34
+ }
35
+ .kpi-progress {
36
+ transition: width 1s ease-in-out;
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="bg-gray-100 font-sans">
41
+ <div class="flex h-screen overflow-hidden">
42
+ <!-- Sidebar -->
43
+ <div class="sidebar bg-white w-64 md:w-20 lg:w-64 border-r border-gray-200 flex flex-col">
44
+ <div class="p-4 border-b border-gray-200 flex items-center justify-between">
45
+ <h1 class="text-xl font-bold text-primary md:hidden lg:block">TeamMetrics</h1>
46
+ <i class="fas fa-chart-line text-primary text-xl md:block lg:hidden"></i>
47
+ <button class="md:hidden text-gray-500" onclick="toggleSidebar()">
48
+ <i class="fas fa-bars"></i>
49
+ </button>
50
+ </div>
51
+ <nav class="flex-1 overflow-y-auto p-4">
52
+ <ul>
53
+ <li class="mb-2">
54
+ <a href="#" class="flex items-center p-2 text-primary bg-blue-50 rounded-lg">
55
+ <i class="fas fa-home mr-3 md:mr-0 lg:mr-3"></i>
56
+ <span class="md:hidden lg:block">Dashboard</span>
57
+ </a>
58
+ </li>
59
+ <li class="mb-2">
60
+ <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg" onclick="showSection('team-section')">
61
+ <i class="fas fa-users mr-3 md:mr-0 lg:mr-3"></i>
62
+ <span class="md:hidden lg:block">Team Members</span>
63
+ </a>
64
+ </li>
65
+ <li class="mb-2">
66
+ <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg" onclick="showSection('kpi-section')">
67
+ <i class="fas fa-bullseye mr-3 md:mr-0 lg:mr-3"></i>
68
+ <span class="md:hidden lg:block">KPIs</span>
69
+ </a>
70
+ </li>
71
+ <li class="mb-2">
72
+ <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg" onclick="showSection('reports-section')">
73
+ <i class="fas fa-chart-pie mr-3 md:mr-0 lg:mr-3"></i>
74
+ <span class="md:hidden lg:block">Reports</span>
75
+ </a>
76
+ </li>
77
+ </ul>
78
+ </nav>
79
+ <div class="p-4 border-t border-gray-200">
80
+ <div class="flex items-center">
81
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-8 h-8 rounded-full mr-2">
82
+ <div class="md:hidden lg:block">
83
+ <p class="text-sm font-medium">Sarah Johnson</p>
84
+ <p class="text-xs text-gray-500">Admin</p>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Main Content -->
91
+ <div class="flex-1 overflow-auto">
92
+ <header class="bg-white shadow-sm p-4 flex justify-between items-center">
93
+ <h2 class="text-xl font-semibold text-gray-800" id="section-title">Dashboard</h2>
94
+ <div class="flex items-center space-x-4">
95
+ <div class="relative">
96
+ <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-primary focus:border-transparent">
97
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
98
+ </div>
99
+ <button class="p-2 text-gray-500 hover:text-gray-700">
100
+ <i class="fas fa-bell"></i>
101
+ </button>
102
+ </div>
103
+ </header>
104
+
105
+ <!-- Dashboard Section -->
106
+ <main class="p-4" id="dashboard-section">
107
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
108
+ <div class="bg-white p-6 rounded-lg shadow">
109
+ <div class="flex items-center justify-between">
110
+ <div>
111
+ <p class="text-gray-500">Team Members</p>
112
+ <h3 class="text-2xl font-bold" id="team-count">0</h3>
113
+ </div>
114
+ <div class="bg-blue-100 p-3 rounded-full">
115
+ <i class="fas fa-users text-blue-500 text-xl"></i>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ <div class="bg-white p-6 rounded-lg shadow">
120
+ <div class="flex items-center justify-between">
121
+ <div>
122
+ <p class="text-gray-500">Active KPIs</p>
123
+ <h3 class="text-2xl font-bold" id="kpi-count">0</h3>
124
+ </div>
125
+ <div class="bg-green-100 p-3 rounded-full">
126
+ <i class="fas fa-bullseye text-green-500 text-xl"></i>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ <div class="bg-white p-6 rounded-lg shadow">
131
+ <div class="flex items-center justify-between">
132
+ <div>
133
+ <p class="text-gray-500">Avg. Performance</p>
134
+ <h3 class="text-2xl font-bold" id="avg-performance">0%</h3>
135
+ </div>
136
+ <div class="bg-purple-100 p-3 rounded-full">
137
+ <i class="fas fa-chart-line text-purple-500 text-xl"></i>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ <div class="bg-white p-6 rounded-lg shadow">
142
+ <div class="flex items-center justify-between">
143
+ <div>
144
+ <p class="text-gray-500">Top Performer</p>
145
+ <h3 class="text-2xl font-bold" id="top-performer">-</h3>
146
+ </div>
147
+ <div class="bg-yellow-100 p-3 rounded-full">
148
+ <i class="fas fa-trophy text-yellow-500 text-xl"></i>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
155
+ <div class="bg-white p-6 rounded-lg shadow lg:col-span-2">
156
+ <div class="flex justify-between items-center mb-4">
157
+ <h3 class="text-lg font-semibold">Performance Overview</h3>
158
+ <select class="border border-gray-300 rounded px-3 py-1 text-sm">
159
+ <option>Last 7 Days</option>
160
+ <option>Last 30 Days</option>
161
+ <option>Last Quarter</option>
162
+ </select>
163
+ </div>
164
+ <div class="h-64">
165
+ <canvas id="performance-chart"></canvas>
166
+ </div>
167
+ </div>
168
+ <div class="bg-white p-6 rounded-lg shadow">
169
+ <div class="flex justify-between items-center mb-4">
170
+ <h3 class="text-lg font-semibold">Top KPIs</h3>
171
+ <button class="text-primary text-sm font-medium" onclick="showSection('kpi-section')">View All</button>
172
+ </div>
173
+ <div id="top-kpis">
174
+ <!-- Will be populated by JavaScript -->
175
+ </div>
176
+ </div>
177
+ </div>
178
+
179
+ <div class="bg-white p-6 rounded-lg shadow">
180
+ <div class="flex justify-between items-center mb-4">
181
+ <h3 class="text-lg font-semibold">Recent Activities</h3>
182
+ <button class="text-primary text-sm font-medium">View All</button>
183
+ </div>
184
+ <div class="space-y-4">
185
+ <div class="flex items-start">
186
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
187
+ <i class="fas fa-user-plus text-blue-500"></i>
188
+ </div>
189
+ <div>
190
+ <p class="text-sm"><span class="font-medium">John Doe</span> was added to the team</p>
191
+ <p class="text-xs text-gray-500">2 hours ago</p>
192
+ </div>
193
+ </div>
194
+ <div class="flex items-start">
195
+ <div class="bg-green-100 p-2 rounded-full mr-3">
196
+ <i class="fas fa-bullseye text-green-500"></i>
197
+ </div>
198
+ <div>
199
+ <p class="text-sm">New KPI <span class="font-medium">"Customer Satisfaction"</span> was created</p>
200
+ <p class="text-xs text-gray-500">Yesterday</p>
201
+ </div>
202
+ </div>
203
+ <div class="flex items-start">
204
+ <div class="bg-purple-100 p-2 rounded-full mr-3">
205
+ <i class="fas fa-trophy text-purple-500"></i>
206
+ </div>
207
+ <div>
208
+ <p class="text-sm"><span class="font-medium">Sarah Johnson</span> achieved 95% of her monthly target</p>
209
+ <p class="text-xs text-gray-500">3 days ago</p>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </main>
215
+
216
+ <!-- Team Members Section -->
217
+ <main class="p-4 hidden" id="team-section">
218
+ <div class="flex justify-between items-center mb-6">
219
+ <h2 class="text-2xl font-semibold text-gray-800">Team Members</h2>
220
+ <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition" onclick="showAddTeamMemberModal()">
221
+ <i class="fas fa-plus mr-2"></i> Add Member
222
+ </button>
223
+ </div>
224
+
225
+ <div class="bg-white rounded-lg shadow overflow-hidden">
226
+ <div class="overflow-x-auto">
227
+ <table class="min-w-full divide-y divide-gray-200">
228
+ <thead class="bg-gray-50">
229
+ <tr>
230
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
231
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Position</th>
232
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Department</th>
233
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Performance</th>
234
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
235
+ </tr>
236
+ </thead>
237
+ <tbody class="bg-white divide-y divide-gray-200" id="team-members-table">
238
+ <!-- Will be populated by JavaScript -->
239
+ </tbody>
240
+ </table>
241
+ </div>
242
+ </div>
243
+ </main>
244
+
245
+ <!-- KPIs Section -->
246
+ <main class="p-4 hidden" id="kpi-section">
247
+ <div class="flex justify-between items-center mb-6">
248
+ <h2 class="text-2xl font-semibold text-gray-800">Key Performance Indicators</h2>
249
+ <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition" onclick="showAddKPIModal()">
250
+ <i class="fas fa-plus mr-2"></i> Add KPI
251
+ </button>
252
+ </div>
253
+
254
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="kpi-cards">
255
+ <!-- Will be populated by JavaScript -->
256
+ </div>
257
+ </main>
258
+
259
+ <!-- Reports Section -->
260
+ <main class="p-4 hidden" id="reports-section">
261
+ <div class="flex justify-between items-center mb-6">
262
+ <h2 class="text-2xl font-semibold text-gray-800">Performance Reports</h2>
263
+ <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition">
264
+ <i class="fas fa-download mr-2"></i> Export
265
+ </button>
266
+ </div>
267
+
268
+ <div class="bg-white rounded-lg shadow p-6">
269
+ <div class="mb-6">
270
+ <h3 class="text-lg font-semibold mb-2">Generate Report</h3>
271
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
272
+ <div>
273
+ <label class="block text-sm font-medium text-gray-700 mb-1">Report Type</label>
274
+ <select class="w-full border border-gray-300 rounded px-3 py-2">
275
+ <option>Team Performance</option>
276
+ <option>Individual Performance</option>
277
+ <option>KPI Analysis</option>
278
+ </select>
279
+ </div>
280
+ <div>
281
+ <label class="block text-sm font-medium text-gray-700 mb-1">Time Period</label>
282
+ <select class="w-full border border-gray-300 rounded px-3 py-2">
283
+ <option>Last Week</option>
284
+ <option>Last Month</option>
285
+ <option>Last Quarter</option>
286
+ <option>Custom Range</option>
287
+ </select>
288
+ </div>
289
+ <div class="flex items-end">
290
+ <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition w-full">
291
+ Generate Report
292
+ </button>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <div class="border-t border-gray-200 pt-6">
298
+ <h3 class="text-lg font-semibold mb-4">Recent Reports</h3>
299
+ <div class="space-y-4">
300
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
301
+ <div>
302
+ <p class="font-medium">Team Performance - Q2 2023</p>
303
+ <p class="text-sm text-gray-500">Generated on July 1, 2023</p>
304
+ </div>
305
+ <div class="flex space-x-2">
306
+ <button class="text-blue-500 hover:text-blue-700">
307
+ <i class="fas fa-eye"></i>
308
+ </button>
309
+ <button class="text-green-500 hover:text-green-700">
310
+ <i class="fas fa-download"></i>
311
+ </button>
312
+ </div>
313
+ </div>
314
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
315
+ <div>
316
+ <p class="font-medium">Individual Performance - June 2023</p>
317
+ <p class="text-sm text-gray-500">Generated on June 30, 2023</p>
318
+ </div>
319
+ <div class="flex space-x-2">
320
+ <button class="text-blue-500 hover:text-blue-700">
321
+ <i class="fas fa-eye"></i>
322
+ </button>
323
+ <button class="text-green-500 hover:text-green-700">
324
+ <i class="fas fa-download"></i>
325
+ </button>
326
+ </div>
327
+ </div>
328
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
329
+ <div>
330
+ <p class="font-medium">KPI Analysis - Q2 2023</p>
331
+ <p class="text-sm text-gray-500">Generated on June 15, 2023</p>
332
+ </div>
333
+ <div class="flex space-x-2">
334
+ <button class="text-blue-500 hover:text-blue-700">
335
+ <i class="fas fa-eye"></i>
336
+ </button>
337
+ <button class="text-green-500 hover:text-green-700">
338
+ <i class="fas fa-download"></i>
339
+ </button>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </main>
346
+ </div>
347
+ </div>
348
+
349
+ <!-- Add Team Member Modal -->
350
+ <div id="team-member-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 modal-hidden">
351
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
352
+ <div class="p-6">
353
+ <div class="flex justify-between items-center mb-4">
354
+ <h3 class="text-xl font-semibold" id="team-member-modal-title">Add Team Member</h3>
355
+ <button onclick="hideModal('team-member-modal')" class="text-gray-500 hover:text-gray-700">
356
+ <i class="fas fa-times"></i>
357
+ </button>
358
+ </div>
359
+ <form id="team-member-form">
360
+ <input type="hidden" id="team-member-id">
361
+ <div class="mb-4">
362
+ <label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
363
+ <input type="text" id="team-member-name" class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
364
+ </div>
365
+ <div class="mb-4">
366
+ <label class="block text-sm font-medium text-gray-700 mb-1">Position</label>
367
+ <input type="text" id="team-member-position" class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
368
+ </div>
369
+ <div class="mb-4">
370
+ <label class="block text-sm font-medium text-gray-700 mb-1">Department</label>
371
+ <select id="team-member-department" class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
372
+ <option value="Sales">Sales</option>
373
+ <option value="Marketing">Marketing</option>
374
+ <option value="Development">Development</option>
375
+ <option value="Support">Support</option>
376
+ <option value="HR">Human Resources</option>
377
+ </select>
378
+ </div>
379
+ <div class="mb-4">
380
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
381
+ <input type="email" id="team-member-email" class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
382
+ </div>
383
+ <div class="flex justify-end space-x-3 mt-6">
384
+ <button type="button" onclick="hideModal('team-member-modal')" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">Cancel</button>
385
+ <button type="button" onclick="saveTeamMember()" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600">Save</button>
386
+ </div>
387
+ </form>
388
+ </div>
389
+ </div>
390
+ </div>
391
+
392
+ <!-- Add KPI Modal -->
393
+ <div id="kpi-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 modal-hidden">
394
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
395
+ <div class="p-6">
396
+ <div class="flex justify-between items-center mb-4">
397
+ <h3 class="text-xl font-semibold" id="kpi-modal-title">Add KPI</h3>
398
+ <button onclick="hideModal('kpi-modal')" class="text-gray-500 hover:text-gray-700">
399
+ <i class="fas fa-times"></i>
400
+ </button>
401
+ </div>
402
+ <form id="kpi-form">
403
+ <input type="hidden" id="kpi-id">
404
+ <div class="mb-4">
405
+ <label class="block text-sm font-medium text-gray-700 mb-1">KPI Name</label>
406
+ <input type="text" id="kpi-name" class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
407
+ </div>
408
+ <div class="mb-4">
409
+ <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
410
+ <textarea id="kpi-description" rows="3" class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary"></textarea>
411
+ </div>
412
+ <div class="mb-4">
413
+ <label class="block text-sm font-medium text-gray-700 mb-1">Target Value</label>
414
+ <input type="number" id="kpi-target" class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
415
+ </div>
416
+ <div class="mb-4">
417
+ <label class="block text-sm font-medium text-gray-700 mb-1">Current Value</label>
418
+ <input type="number" id="kpi-current" class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
419
+ </div>
420
+ <div class="mb-4">
421
+ <label class="block text-sm font-medium text-gray-700 mb-1">Frequency</label>
422
+ <select id="kpi-frequency" class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
423
+ <option value="Daily">Daily</option>
424
+ <option value="Weekly">Weekly</option>
425
+ <option value="Monthly">Monthly</option>
426
+ <option value="Quarterly">Quarterly</option>
427
+ </select>
428
+ </div>
429
+ <div class="mb-4">
430
+ <label class="block text-sm font-medium text-gray-700 mb-1">Assigned To</label>
431
+ <select id="kpi-assigned" class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
432
+ <!-- Will be populated by JavaScript -->
433
+ </select>
434
+ </div>
435
+ <div class="flex justify-end space-x-3 mt-6">
436
+ <button type="button" onclick="hideModal('kpi-modal')" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">Cancel</button>
437
+ <button type="button" onclick="saveKPI()" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600">Save</button>
438
+ </div>
439
+ </form>
440
+ </div>
441
+ </div>
442
+ </div>
443
+
444
+ <!-- Confirmation Modal -->
445
+ <div id="confirm-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 modal-hidden">
446
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
447
+ <div class="p-6">
448
+ <div class="flex justify-between items-center mb-4">
449
+ <h3 class="text-xl font-semibold" id="confirm-modal-title">Confirm Action</h3>
450
+ <button onclick="hideModal('confirm-modal')" class="text-gray-500 hover:text-gray-700">
451
+ <i class="fas fa-times"></i>
452
+ </button>
453
+ </div>
454
+ <p id="confirm-modal-message">Are you sure you want to perform this action?</p>
455
+ <div class="flex justify-end space-x-3 mt-6">
456
+ <button type="button" onclick="hideModal('confirm-modal')" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">Cancel</button>
457
+ <button type="button" onclick="confirmAction()" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600">Confirm</button>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ </div>
462
+
463
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
464
+ <script>
465
+ // Data storage
466
+ let teamMembers = [
467
+ { id: 1, name: "John Doe", position: "Sales Manager", department: "Sales", email: "[email protected]", performance: 85 },
468
+ { id: 2, name: "Jane Smith", position: "Marketing Specialist", department: "Marketing", email: "[email protected]", performance: 92 },
469
+ { id: 3, name: "Mike Johnson", position: "Developer", department: "Development", email: "[email protected]", performance: 78 },
470
+ { id: 4, name: "Sarah Williams", position: "HR Manager", department: "HR", email: "[email protected]", performance: 88 }
471
+ ];
472
+
473
+ let kpis = [
474
+ { id: 1, name: "Sales Revenue", description: "Monthly sales revenue target", target: 100000, current: 85000, frequency: "Monthly", assigned: 1, progress: 85 },
475
+ { id: 2, name: "Customer Satisfaction", description: "Customer satisfaction score", target: 90, current: 87, frequency: "Monthly", assigned: 2, progress: 96.7 },
476
+ { id: 3, name: "Project Completion", description: "Projects completed on time", target: 95, current: 80, frequency: "Quarterly", assigned: 3, progress: 84.2 },
477
+ { id: 4, name: "Employee Retention", description: "Employee retention rate", target: 95, current: 92, frequency: "Quarterly", assigned: 4, progress: 96.8 }
478
+ ];
479
+
480
+ // State variables
481
+ let currentAction = null;
482
+ let currentId = null;
483
+
484
+ // Initialize the app
485
+ document.addEventListener('DOMContentLoaded', function() {
486
+ updateDashboard();
487
+ renderTeamMembers();
488
+ renderKPIs();
489
+ populateAssignedDropdown();
490
+ setupPerformanceChart();
491
+ });
492
+
493
+ // Section navigation
494
+ function showSection(sectionId) {
495
+ document.querySelectorAll('main').forEach(section => {
496
+ section.classList.add('hidden');
497
+ });
498
+ document.getElementById(sectionId).classList.remove('hidden');
499
+
500
+ // Update section title
501
+ const titles = {
502
+ 'team-section': 'Team Members',
503
+ 'kpi-section': 'Key Performance Indicators',
504
+ 'reports-section': 'Performance Reports'
505
+ };
506
+ document.getElementById('section-title').textContent = titles[sectionId] || 'Dashboard';
507
+ }
508
+
509
+ // Modal functions
510
+ function showModal(modalId) {
511
+ document.getElementById(modalId).classList.remove('modal-hidden');
512
+ }
513
+
514
+ function hideModal(modalId) {
515
+ document.getElementById(modalId).classList.add('modal-hidden');
516
+ }
517
+
518
+ function showAddTeamMemberModal() {
519
+ document.getElementById('team-member-modal-title').textContent = 'Add Team Member';
520
+ document.getElementById('team-member-id').value = '';
521
+ document.getElementById('team-member-name').value = '';
522
+ document.getElementById('team-member-position').value = '';
523
+ document.getElementById('team-member-department').value = 'Sales';
524
+ document.getElementById('team-member-email').value = '';
525
+ showModal('team-member-modal');
526
+ }
527
+
528
+ function showEditTeamMemberModal(id) {
529
+ const member = teamMembers.find(m => m.id === id);
530
+ if (member) {
531
+ document.getElementById('team-member-modal-title').textContent = 'Edit Team Member';
532
+ document.getElementById('team-member-id').value = member.id;
533
+ document.getElementById('team-member-name').value = member.name;
534
+ document.getElementById('team-member-position').value = member.position;
535
+ document.getElementById('team-member-department').value = member.department;
536
+ document.getElementById('team-member-email').value = member.email;
537
+ showModal('team-member-modal');
538
+ }
539
+ }
540
+
541
+ function showAddKPIModal() {
542
+ document.getElementById('kpi-modal-title').textContent = 'Add KPI';
543
+ document.getElementById('kpi-id').value = '';
544
+ document.getElementById('kpi-name').value = '';
545
+ document.getElementById('kpi-description').value = '';
546
+ document.getElementById('kpi-target').value = '';
547
+ document.getElementById('kpi-current').value = '';
548
+ document.getElementById('kpi-frequency').value = 'Monthly';
549
+ showModal('kpi-modal');
550
+ }
551
+
552
+ function showEditKPIModal(id) {
553
+ const kpi = kpis.find(k => k.id === id);
554
+ if (kpi) {
555
+ document.getElementById('kpi-modal-title').textContent = 'Edit KPI';
556
+ document.getElementById('kpi-id').value = kpi.id;
557
+ document.getElementById('kpi-name').value = kpi.name;
558
+ document.getElementById('kpi-description').value = kpi.description;
559
+ document.getElementById('kpi-target').value = kpi.target;
560
+ document.getElementById('kpi-current').value = kpi.current;
561
+ document.getElementById('kpi-frequency').value = kpi.frequency;
562
+ document.getElementById('kpi-assigned').value = kpi.assigned;
563
+ showModal('kpi-modal');
564
+ }
565
+ }
566
+
567
+ function showConfirmModal(action, id, message) {
568
+ currentAction = action;
569
+ currentId = id;
570
+ document.getElementById('confirm-modal-message').textContent = message || 'Are you sure you want to perform this action?';
571
+ showModal('confirm-modal');
572
+ }
573
+
574
+ function confirmAction() {
575
+ if (currentAction === 'deleteTeamMember') {
576
+ deleteTeamMember(currentId);
577
+ } else if (currentAction === 'deleteKPI') {
578
+ deleteKPI(currentId);
579
+ }
580
+ hideModal('confirm-modal');
581
+ }
582
+
583
+ // Team Member functions
584
+ function saveTeamMember() {
585
+ const id = document.getElementById('team-member-id').value;
586
+ const name = document.getElementById('team-member-name').value;
587
+ const position = document.getElementById('team-member-position').value;
588
+ const department = document.getElementById('team-member-department').value;
589
+ const email = document.getElementById('team-member-email').value;
590
+
591
+ if (!name || !position || !department || !email) {
592
+ alert('Please fill in all fields');
593
+ return;
594
+ }
595
+
596
+ if (id) {
597
+ // Update existing member
598
+ const index = teamMembers.findIndex(m => m.id === parseInt(id));
599
+ if (index !== -1) {
600
+ teamMembers[index] = {
601
+ ...teamMembers[index],
602
+ name,
603
+ position,
604
+ department,
605
+ email
606
+ };
607
+ }
608
+ } else {
609
+ // Add new member
610
+ const newId = teamMembers.length > 0 ? Math.max(...teamMembers.map(m => m.id)) + 1 : 1;
611
+ teamMembers.push({
612
+ id: newId,
613
+ name,
614
+ position,
615
+ department,
616
+ email,
617
+ performance: Math.floor(Math.random() * 30) + 70 // Random performance between 70-100
618
+ });
619
+ }
620
+
621
+ hideModal('team-member-modal');
622
+ renderTeamMembers();
623
+ updateDashboard();
624
+ populateAssignedDropdown();
625
+ }
626
+
627
+ function deleteTeamMember(id) {
628
+ teamMembers = teamMembers.filter(m => m.id !== id);
629
+ // Also remove any KPIs assigned to this member
630
+ kpis = kpis.filter(k => k.assigned !== id);
631
+ renderTeamMembers();
632
+ renderKPIs();
633
+ updateDashboard();
634
+ populateAssignedDropdown();
635
+ }
636
+
637
+ // KPI functions
638
+ function saveKPI() {
639
+ const id = document.getElementById('kpi-id').value;
640
+ const name = document.getElementById('kpi-name').value;
641
+ const description = document.getElementById('kpi-description').value;
642
+ const target = parseFloat(document.getElementById('kpi-target').value);
643
+ const current = parseFloat(document.getElementById('kpi-current').value);
644
+ const frequency = document.getElementById('kpi-frequency').value;
645
+ const assigned = parseInt(document.getElementById('kpi-assigned').value);
646
+
647
+ if (!name || isNaN(target) || isNaN(current) || !frequency || !assigned) {
648
+ alert('Please fill in all required fields with valid values');
649
+ return;
650
+ }
651
+
652
+ const progress = Math.min(100, (current / target) * 100);
653
+
654
+ if (id) {
655
+ // Update existing KPI
656
+ const index = kpis.findIndex(k => k.id === parseInt(id));
657
+ if (index !== -1) {
658
+ kpis[index] = {
659
+ ...kpis[index],
660
+ name,
661
+ description,
662
+ target,
663
+ current,
664
+ frequency,
665
+ assigned,
666
+ progress
667
+ };
668
+ }
669
+ } else {
670
+ // Add new KPI
671
+ const newId = kpis.length > 0 ? Math.max(...kpis.map(k => k.id)) + 1 : 1;
672
+ kpis.push({
673
+ id: newId,
674
+ name,
675
+ description,
676
+ target,
677
+ current,
678
+ frequency,
679
+ assigned,
680
+ progress
681
+ });
682
+ }
683
+
684
+ hideModal('kpi-modal');
685
+ renderKPIs();
686
+ updateDashboard();
687
+ }
688
+
689
+ function deleteKPI(id) {
690
+ kpis = kpis.filter(k => k.id !== id);
691
+ renderKPIs();
692
+ updateDashboard();
693
+ }
694
+
695
+ function updateKPIProgress(id, newValue) {
696
+ const kpi = kpis.find(k => k.id === id);
697
+ if (kpi) {
698
+ kpi.current = newValue;
699
+ kpi.progress = Math.min(100, (newValue / kpi.target) * 100);
700
+ renderKPIs();
701
+ updateDashboard();
702
+ }
703
+ }
704
+
705
+ // Rendering functions
706
+ function renderTeamMembers() {
707
+ const tableBody = document.getElementById('team-members-table');
708
+ tableBody.innerHTML = '';
709
+
710
+ teamMembers.forEach(member => {
711
+ const row = document.createElement('tr');
712
+ row.innerHTML = `
713
+ <td class="px-6 py-4 whitespace-nowrap">
714
+ <div class="flex items-center">
715
+ <div class="flex-shrink-0 h-10 w-10">
716
+ <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=${encodeURIComponent(member.name)}&background=random" alt="">
717
+ </div>
718
+ <div class="ml-4">
719
+ <div class="text-sm font-medium text-gray-900">${member.name}</div>
720
+ <div class="text-sm text-gray-500">${member.email}</div>
721
+ </div>
722
+ </div>
723
+ </td>
724
+ <td class="px-6 py-4 whitespace-nowrap">
725
+ <div class="text-sm text-gray-900">${member.position}</div>
726
+ </td>
727
+ <td class="px-6 py-4 whitespace-nowrap">
728
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">${member.department}</span>
729
+ </td>
730
+ <td class="px-6 py-4 whitespace-nowrap">
731
+ <div class="flex items-center">
732
+ <div class="w-24 mr-2">
733
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
734
+ <div class="bg-${getPerformanceColor(member.performance)} h-2.5 rounded-full" style="width: ${member.performance}%"></div>
735
+ </div>
736
+ </div>
737
+ <span class="text-sm font-medium text-gray-700">${member.performance}%</span>
738
+ </div>
739
+ </td>
740
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
741
+ <button onclick="showEditTeamMemberModal(${member.id})" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></button>
742
+ <button onclick="showConfirmModal('deleteTeamMember', ${member.id}, 'Are you sure you want to delete ${member.name}?')" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
743
+ </td>
744
+ `;
745
+ tableBody.appendChild(row);
746
+ });
747
+ }
748
+
749
+ function renderKPIs() {
750
+ const kpiContainer = document.getElementById('kpi-cards');
751
+ kpiContainer.innerHTML = '';
752
+
753
+ kpis.forEach(kpi => {
754
+ const assignedMember = teamMembers.find(m => m.id === kpi.assigned);
755
+ const card = document.createElement('div');
756
+ card.className = 'bg-white rounded-lg shadow overflow-hidden';
757
+ card.innerHTML = `
758
+ <div class="p-5">
759
+ <div class="flex justify-between items-start mb-2">
760
+ <h3 class="text-lg font-semibold">${kpi.name}</h3>
761
+ <div class="flex space-x-2">
762
+ <button onclick="showEditKPIModal(${kpi.id})" class="text-blue-500 hover:text-blue-700"><i class="fas fa-edit"></i></button>
763
+ <button onclick="showConfirmModal('deleteKPI', ${kpi.id}, 'Are you sure you want to delete the KPI ${kpi.name}?')" class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
764
+ </div>
765
+ </div>
766
+ <p class="text-sm text-gray-600 mb-4">${kpi.description}</p>
767
+
768
+ <div class="mb-4">
769
+ <div class="flex justify-between text-sm mb-1">
770
+ <span>Progress</span>
771
+ <span>${kpi.progress.toFixed(1)}%</span>
772
+ </div>
773
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
774
+ <div class="bg-${getPerformanceColor(kpi.progress)} h-2.5 rounded-full kpi-progress" style="width: ${kpi.progress}%"></div>
775
+ </div>
776
+ </div>
777
+
778
+ <div class="grid grid-cols-2 gap-4 text-sm mb-4">
779
+ <div>
780
+ <p class="text-gray-500">Target</p>
781
+ <p class="font-medium">${formatNumber(kpi.target)}</p>
782
+ </div>
783
+ <div>
784
+ <p class="text-gray-500">Current</p>
785
+ <p class="font-medium">${formatNumber(kpi.current)}</p>
786
+ </div>
787
+ <div>
788
+ <p class="text-gray-500">Frequency</p>
789
+ <p class="font-medium">${kpi.frequency}</p>
790
+ </div>
791
+ <div>
792
+ <p class="text-gray-500">Assigned To</p>
793
+ <p class="font-medium">${assignedMember ? assignedMember.name : 'Unassigned'}</p>
794
+ </div>
795
+ </div>
796
+
797
+ <div class="flex items-center justify-between">
798
+ <div class="text-sm">
799
+ <p class="text-gray-500">Update Value</p>
800
+ </div>
801
+ <div class="flex">
802
+ <input type="number" id="kpi-update-${kpi.id}" value="${kpi.current}" class="w-20 border border-gray-300 rounded-l px-2 py-1 text-sm">
803
+ <button onclick="updateKPIProgress(${kpi.id}, parseFloat(document.getElementById('kpi-update-${kpi.id}').value))" class="bg-primary text-white px-3 py-1 rounded-r text-sm hover:bg-blue-600">Update</button>
804
+ </div>
805
+ </div>
806
+ </div>
807
+ `;
808
+ kpiContainer.appendChild(card);
809
+ });
810
+ }
811
+
812
+ function populateAssignedDropdown() {
813
+ const dropdown = document.getElementById('kpi-assigned');
814
+ dropdown.innerHTML = '';
815
+
816
+ teamMembers.forEach(member => {
817
+ const option = document.createElement('option');
818
+ option.value = member.id;
819
+ option.textContent = member.name;
820
+ dropdown.appendChild(option);
821
+ });
822
+ }
823
+
824
+ // Dashboard functions
825
+ function updateDashboard() {
826
+ document.getElementById('team-count').textContent = teamMembers.length;
827
+ document.getElementById('kpi-count').textContent = kpis.length;
828
+
829
+ if (teamMembers.length > 0) {
830
+ const avgPerformance = teamMembers.reduce((sum, member) => sum + member.performance, 0) / teamMembers.length;
831
+ document.getElementById('avg-performance').textContent = avgPerformance.toFixed(1) + '%';
832
+
833
+ const topPerformer = teamMembers.reduce((top, member) => member.performance > top.performance ? member : top, teamMembers[0]);
834
+ document.getElementById('top-performer').textContent = topPerformer.name;
835
+ } else {
836
+ document.getElementById('avg-performance').textContent = '0%';
837
+ document.getElementById('top-performer').textContent = '-';
838
+ }
839
+
840
+ renderTopKPIs();
841
+ }
842
+
843
+ function renderTopKPIs() {
844
+ const topKPIsContainer = document.getElementById('top-kpis');
845
+ topKPIsContainer.innerHTML = '';
846
+
847
+ // Sort KPIs by progress (descending) and take top 3
848
+ const sortedKPIs = [...kpis].sort((a, b) => b.progress - a.progress).slice(0, 3);
849
+
850
+ if (sortedKPIs.length === 0) {
851
+ topKPIsContainer.innerHTML = '<p class="text-gray-500 text-sm">No KPIs available</p>';
852
+ return;
853
+ }
854
+
855
+ sortedKPIs.forEach(kpi => {
856
+ const assignedMember = teamMembers.find(m => m.id === kpi.assigned);
857
+ const kpiElement = document.createElement('div');
858
+ kpiElement.className = 'mb-4';
859
+ kpiElement.innerHTML = `
860
+ <div class="flex justify-between mb-1">
861
+ <span class="text-sm font-medium">${kpi.name}</span>
862
+ <span class="text-sm font-medium">${kpi.progress.toFixed(1)}%</span>
863
+ </div>
864
+ <div class="w-full bg-gray-200 rounded-full h-1.5 mb-1">
865
+ <div class="bg-${getPerformanceColor(kpi.progress)} h-1.5 rounded-full" style="width: ${kpi.progress}%"></div>
866
+ </div>
867
+ <div class="flex justify-between text-xs text-gray-500">
868
+ <span>${assignedMember ? assignedMember.name : 'Unassigned'}</span>
869
+ <span>${kpi.current} of ${kpi.target}</span>
870
+ </div>
871
+ `;
872
+ topKPIsContainer.appendChild(kpiElement);
873
+ });
874
+ }
875
+
876
+ function setupPerformanceChart() {
877
+ const ctx = document.getElementById('performance-chart').getContext('2d');
878
+
879
+ // Generate some sample data
880
+ const labels = [];
881
+ const today = new Date();
882
+ for (let i = 6; i >= 0; i--) {
883
+ const date = new Date(today);
884
+ date.setDate(date.getDate() - i);
885
+ labels.push(date.toLocaleDateString('en-US', { weekday: 'short' }));
886
+ }
887
+
888
+ const data = labels.map(() => Math.floor(Math.random() * 30) + 70);
889
+
890
+ new Chart(ctx, {
891
+ type: 'line',
892
+ data: {
893
+ labels: labels,
894
+ datasets: [{
895
+ label: 'Team Performance',
896
+ data: data,
897
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
898
+ borderColor: 'rgba(59, 130, 246, 1)',
899
+ borderWidth: 2,
900
+ tension: 0.4,
901
+ fill: true
902
+ }]
903
+ },
904
+ options: {
905
+ responsive: true,
906
+ maintainAspectRatio: false,
907
+ plugins: {
908
+ legend: {
909
+ display: false
910
+ }
911
+ },
912
+ scales: {
913
+ y: {
914
+ beginAtZero: false,
915
+ min: 50,
916
+ max: 100
917
+ }
918
+ }
919
+ }
920
+ });
921
+ }
922
+
923
+ // Helper functions
924
+ function getPerformanceColor(percentage) {
925
+ if (percentage >= 90) return 'green-500';
926
+ if (percentage >= 75) return 'blue-500';
927
+ if (percentage >= 50) return 'yellow-500';
928
+ return 'red-500';
929
+ }
930
+
931
+ function formatNumber(num) {
932
+ if (num >= 1000000) {
933
+ return (num / 1000000).toFixed(1) + 'M';
934
+ }
935
+ if (num >= 1000) {
936
+ return (num / 1000).toFixed(1) + 'K';
937
+ }
938
+ return num.toString();
939
+ }
940
+
941
+ function toggleSidebar() {
942
+ const sidebar = document.querySelector('.sidebar');
943
+ sidebar.classList.toggle('md:w-20');
944
+ sidebar.classList.toggle('lg:w-64');
945
+ }
946
+ </script>
947
+ <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/performance-management-v2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
948
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ Build a comprehensive functional kpi and team performance app that I can save and load data for. Make it completly functional with a blue color scheme and modern ui
2
+ Great now make the one page fully functional with ability to go in to edit team members save data, add kpi's etc... Very simple and completly functional
3
+ create a fully functional team performance management web app, everything should work and save properly