Hugging Face's logo

Spaces:
ITjez
/
taskvoyage-dashboard
Running

App Files Community
ITjez commited on
Commit
cd81522
·
verified ·
1 Parent(s): 3379d7b

buat tampilan summary report pengajuan tugas luar atau dinas. yang berisi tanggal pengajuan, Nama, Divisi, tipe tugas, tanggal dan waktu mulai, tanggal dan waktu seelsai, periode pakai jam dan hari, Lokasi, status, action button (Approve, Reject, HR Check, Finance Check, View Details)

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +328 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Taskvoyage Dashboard
3
- emoji: 🚀
4
- colorFrom: gray
5
- colorTo: red
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: TaskVoyage Dashboard 🚀
3
+ colorFrom: purple
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,328 @@
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>TaskVoyage | Assignment Summary</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#3B82F6',
16
+ secondary: '#10B981',
17
+ pending: '#F59E0B',
18
+ approved: '#10B981',
19
+ rejected: '#EF4444',
20
+ hrcheck: '#8B5CF6',
21
+ financecheck: '#EC4899'
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <style>
28
+ .status-badge {
29
+ @apply px-3 py-1 rounded-full text-xs font-semibold;
30
+ }
31
+ .action-btn {
32
+ @apply px-3 py-1 rounded-md text-sm font-medium transition-all;
33
+ }
34
+ .table-container {
35
+ @apply overflow-x-auto shadow-lg rounded-lg;
36
+ }
37
+ .table-container::-webkit-scrollbar {
38
+ height: 8px;
39
+ }
40
+ .table-container::-webkit-scrollbar-track {
41
+ @apply bg-gray-100 rounded;
42
+ }
43
+ .table-container::-webkit-scrollbar-thumb {
44
+ @apply bg-gray-300 rounded hover:bg-gray-400;
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="bg-gray-50">
49
+ <div class="min-h-screen">
50
+ <!-- Header -->
51
+ <header class="bg-white shadow-sm">
52
+ <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">
53
+ <h1 class="text-2xl font-bold text-gray-800 flex items-center">
54
+ <i data-feather="navigation" class="mr-2 text-primary"></i>
55
+ TaskVoyage
56
+ </h1>
57
+ <div class="flex items-center space-x-4">
58
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
59
+ <i data-feather="bell"></i>
60
+ </button>
61
+ <div class="flex items-center">
62
+ <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white font-semibold">
63
+ <i data-feather="user"></i>
64
+ </div>
65
+ <span class="ml-2 text-sm font-medium text-gray-700">Admin</span>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </header>
70
+
71
+ <!-- Main Content -->
72
+ <main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
73
+ <!-- Page Title and Controls -->
74
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
75
+ <div>
76
+ <h2 class="text-xl font-bold text-gray-800">Assignment Summary Report</h2>
77
+ <p class="text-sm text-gray-500">Overview of all external task submissions</p>
78
+ </div>
79
+ <div class="mt-4 md:mt-0 flex space-x-3">
80
+ <div class="relative">
81
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
82
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
83
+ </div>
84
+ <button class="flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors">
85
+ <i data-feather="plus" class="mr-2"></i>
86
+ New Submission
87
+ </button>
88
+ </div>
89
+ </div>
90
+
91
+ <!-- Filters -->
92
+ <div class="bg-white p-4 rounded-lg shadow mb-6">
93
+ <div class="flex flex-col md:flex-row md:items-center md:space-x-6 space-y-3 md:space-y-0">
94
+ <div class="w-full md:w-auto">
95
+ <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
96
+ <select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary focus:border-primary">
97
+ <option value="">All Status</option>
98
+ <option value="pending">Pending</option>
99
+ <option value="approved">Approved</option>
100
+ <option value="rejected">Rejected</option>
101
+ <option value="hrcheck">HR Check</option>
102
+ <option value="financecheck">Finance Check</option>
103
+ </select>
104
+ </div>
105
+ <div class="w-full md:w-auto">
106
+ <label class="block text-sm font-medium text-gray-700 mb-1">Division</label>
107
+ <select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary focus:border-primary">
108
+ <option value="">All Divisions</option>
109
+ <option value="marketing">Marketing</option>
110
+ <option value="finance">Finance</option>
111
+ <option value="hr">Human Resources</option>
112
+ <option value="it">Information Technology</option>
113
+ <option value="operations">Operations</option>
114
+ </select>
115
+ </div>
116
+ <div class="w-full md:w-auto">
117
+ <label class="block text-sm font-medium text-gray-700 mb-1">Date Range</label>
118
+ <div class="flex space-x-2">
119
+ <input type="date" class="border border-gray-300 rounded-md px-3 py-2 focus:ring-primary focus:border-primary">
120
+ <span class="flex items-center">to</span>
121
+ <input type="date" class="border border-gray-300 rounded-md px-3 py-2 focus:ring-primary focus:border-primary">
122
+ </div>
123
+ </div>
124
+ <div class="w-full md:w-auto flex items-end">
125
+ <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-600 transition-colors">
126
+ Apply Filters
127
+ </button>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Summary Cards -->
133
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
134
+ <div class="bg-white p-4 rounded-lg shadow">
135
+ <div class="flex justify-between items-start">
136
+ <div>
137
+ <p class="text-sm font-medium text-gray-500">Total Submissions</p>
138
+ <p class="text-2xl font-bold text-gray-800">124</p>
139
+ </div>
140
+ <div class="p-2 rounded-full bg-blue-100 text-primary">
141
+ <i data-feather="file-text"></i>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ <div class="bg-white p-4 rounded-lg shadow">
146
+ <div class="flex justify-between items-start">
147
+ <div>
148
+ <p class="text-sm font-medium text-gray-500">Pending</p>
149
+ <p class="text-2xl font-bold text-pending">32</p>
150
+ </div>
151
+ <div class="p-2 rounded-full bg-yellow-100 text-pending">
152
+ <i data-feather="clock"></i>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ <div class="bg-white p-4 rounded-lg shadow">
157
+ <div class="flex justify-between items-start">
158
+ <div>
159
+ <p class="text-sm font-medium text-gray-500">Approved</p>
160
+ <p class="text-2xl font-bold text-approved">78</p>
161
+ </div>
162
+ <div class="p-2 rounded-full bg-green-100 text-approved">
163
+ <i data-feather="check-circle"></i>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ <div class="bg-white p-4 rounded-lg shadow">
168
+ <div class="flex justify-between items-start">
169
+ <div>
170
+ <p class="text-sm font-medium text-gray-500">Rejected</p>
171
+ <p class="text-2xl font-bold text-rejected">8</p>
172
+ </div>
173
+ <div class="p-2 rounded-full bg-red-100 text-rejected">
174
+ <i data-feather="x-circle"></i>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ <div class="bg-white p-4 rounded-lg shadow">
179
+ <div class="flex justify-between items-start">
180
+ <div>
181
+ <p class="text-sm font-medium text-gray-500">In Process</p>
182
+ <p class="text-2xl font-bold text-hrcheck">6</p>
183
+ </div>
184
+ <div class="p-2 rounded-full bg-purple-100 text-hrcheck">
185
+ <i data-feather="refresh-cw"></i>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Assignment Table -->
192
+ <div class="bg-white rounded-lg shadow overflow-hidden">
193
+ <div class="table-container">
194
+ <table class="min-w-full divide-y divide-gray-200">
195
+ <thead class="bg-gray-50">
196
+ <tr>
197
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
198
+ <div class="flex items-center">
199
+ Submission Date
200
+ <i data-feather="chevron-down" class="ml-1 w-3 h-3"></i>
201
+ </div>
202
+ </th>
203
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
204
+ <div class="flex items-center">
205
+ Name
206
+ <i data-feather="chevron-down" class="ml-1 w-3 h-3"></i>
207
+ </div>
208
+ </th>
209
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
210
+ <div class="flex items-center">
211
+ Division
212
+ <i data-feather="chevron-down" class="ml-1 w-3 h-3"></i>
213
+ </div>
214
+ </th>
215
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
216
+ <div class="flex items-center">
217
+ Task Type
218
+ <i data-feather="chevron-down" class="ml-1 w-3 h-3"></i>
219
+ </div>
220
+ </th>
221
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
222
+ <div class="flex items-center">
223
+ Start Date/Time
224
+ <i data-feather="chevron-down" class="ml-1 w-3 h-3"></i>
225
+ </div>
226
+ </th>
227
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
228
+ <div class="flex items-center">
229
+ End Date/Time
230
+ <i data-feather="chevron-down" class="ml-1 w-3 h-3"></i>
231
+ </div>
232
+ </th>
233
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
234
+ <div class="flex items-center">
235
+ Duration
236
+ <i data-feather="chevron-down" class="ml-1 w-3 h-3"></i>
237
+ </div>
238
+ </th>
239
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
240
+ <div class="flex items-center">
241
+ Location
242
+ <i data-feather="chevron-down" class="ml-1 w-3 h-3"></i>
243
+ </div>
244
+ </th>
245
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
246
+ <div class="flex items-center">
247
+ Status
248
+ <i data-feather="chevron-down" class="ml-1 w-3 h-3"></i>
249
+ </div>
250
+ </th>
251
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
252
+ Actions
253
+ </th>
254
+ </tr>
255
+ </thead>
256
+ <tbody class="bg-white divide-y divide-gray-200">
257
+ <!-- Sample Row 1 -->
258
+ <tr class="hover:bg-gray-50">
259
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/05/2023</td>
260
+ <td class="px-6 py-4 whitespace-nowrap">
261
+ <div class="flex items-center">
262
+ <div class="flex-shrink-0 h-10 w-10">
263
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/1" alt="">
264
+ </div>
265
+ <div class="ml-4">
266
+ <div class="text-sm font-medium text-gray-900">John Doe</div>
267
+ <div class="text-sm text-gray-500">EMP-1001</div>
268
+ </div>
269
+ </div>
270
+ </td>
271
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Marketing</td>
272
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Client Meeting</td>
273
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">17/05/2023 09:00</td>
274
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">17/05/2023 17:00</td>
275
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8 hours / 1 day</td>
276
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jakarta</td>
277
+ <td class="px-6 py-4 whitespace-nowrap">
278
+ <span class="status-badge bg-approved/10 text-approved">Approved</span>
279
+ </td>
280
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
281
+ <div class="flex space-x-2 justify-end">
282
+ <button class="action-btn bg-primary/10 text-primary hover:bg-primary/20">
283
+ <i data-feather="eye" class="w-4 h-4"></i>
284
+ </button>
285
+ <button class="action-btn bg-green-100 text-approved hover:bg-green-200">
286
+ <i data-feather="check" class="w-4 h-4"></i>
287
+ </button>
288
+ <button class="action-btn bg-red-100 text-rejected hover:bg-red-200">
289
+ <i data-feather="x" class="w-4 h-4"></i>
290
+ </button>
291
+ </div>
292
+ </td>
293
+ </tr>
294
+
295
+ <!-- Sample Row 2 -->
296
+ <tr class="hover:bg-gray-50">
297
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">16/05/2023</td>
298
+ <td class="px-6 py-4 whitespace-nowrap">
299
+ <div class="flex items-center">
300
+ <div class="flex-shrink-0 h-10 w-10">
301
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/2" alt="">
302
+ </div>
303
+ <div class="ml-4">
304
+ <div class="text-sm font-medium text-gray-900">Jane Smith</div>
305
+ <div class="text-sm text-gray-500">EMP-1002</div>
306
+ </div>
307
+ </div>
308
+ </td>
309
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Finance</td>
310
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Training</td>
311
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">18/05/2023 08:00</td>
312
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">20/05/2023 16:00</td>
313
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">24 hours / 3 days</td>
314
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Bandung</td>
315
+ <td class="px-6 py-4 whitespace-nowrap">
316
+ <span class="status-badge bg-pending/10 text-pending">Pending</span>
317
+ </td>
318
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
319
+ <div class="flex space-x-2 justify-end">
320
+ <button class="action-btn bg-primary/10 text-primary hover:bg-primary/20">
321
+ <i data-feather="eye" class="w-4 h-4"></i>
322
+ </button>
323
+ <button class="action-btn bg-green-100 text-approved hover:bg-green-200">
324
+ <i data-feather="check" class="w-4 h-4"></i>
325
+ </button>
326
+ <button class="action-btn bg-red-100 text-rejected
327
+ </body>
328
+ </html>