Hugging Face's logo

Spaces:
tnnguyen2404
/
assetninja-tracker
Running

App Files Community
tnnguyen2404 commited on
Commit
5cb3a81
·
verified ·
1 Parent(s): 5eb5e78

The web portal should have the following functionalities:

Browse files

[General] Need to have the following pages
Main Dashboard.
Solution details page for each solution type.
[General] User need to be able to toggle between users on the top right corner of any page.
[Main Dashboard] user need to be able to display a Item table of all item from each solution type
[Main Dashboard] For the Item table, user need to be able to click on a row of an item of a particular solution type and all item of the same
solution type should be highlighted
[Main Dashboard] For the Item table, at end of each row, there should be a button that allows the user to click into the detail’s page of the
Item itself.
[Details Page] The page should have a clear indication of the solution type
[Details Page] Be able to apply different action depending on the solution type and some action will also require a location to be selected
before submitting.
Asset:
“Moved to” “Select Location”
“Missing”
Inventory:
“Scanned at” “Select Location”
“Consumed”
Work Order:
“Received at” “Selection Location”
“Complete”
[Detail Page] There will be 3 main section
Detail Summary and Action
Name of the Item
Item solution Type
Item current location (When an item is “Missing, Consumed or Complete”, the current location should be NA)
Action - Submit section
Location History Table
User need to be able to click on a row of a location and all the same location should be highlighted
Action History Table
User need to be able to click on a row of a user and all the same user should be highlighted
[General] Table Schema
Item Table
Name, Solution Type and Last Location
Location History Table
Location Name and Time
Action History Table
User Name, Action and Time
[General] There needs to be enough data that is already pre-populated to show case all the requirement above
At least 4 items from each solution type
At least 4 locations.
At least 4 users.

Using react and javascript

Files changed (3) hide show
  1. README.md +8 -4
  2. details.html +297 -0
  3. index.html +249 -19
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Assetninja Tracker
3
- emoji: ⚡
4
  colorFrom: yellow
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: AssetNinja Tracker 🚀
 
3
  colorFrom: yellow
4
+ colorTo: red
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).
14
+
details.html ADDED
@@ -0,0 +1,297 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>AssetNinja Tracker - Details</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#3B82F6',
17
+ secondary: '#10B981',
18
+ warning: '#F59E0B'
19
+ }
20
+ }
21
+ }
22
+ }
23
+
24
+ document.addEventListener('DOMContentLoaded', function() {
25
+ feather.replace();
26
+
27
+ // Get solution type from URL
28
+ const urlParams = new URLSearchParams(window.location.search);
29
+ const solutionType = urlParams.get('type');
30
+ const itemId = urlParams.get('id');
31
+
32
+ // Highlight solution type indicator
33
+ document.getElementById('solutionTypeIndicator').classList.add(
34
+ solutionType === 'asset' ? 'bg-primary' :
35
+ solutionType === 'inventory' ? 'bg-secondary' : 'bg-warning'
36
+ );
37
+
38
+ // Set appropriate action buttons based on solution type
39
+ const actionForm = document.getElementById('actionForm');
40
+ if (solutionType === 'asset') {
41
+ actionForm.innerHTML = `
42
+ <div class="mb-4">
43
+ <label class="block text-sm font-medium text-gray-700 mb-1">Action</label>
44
+ <select id="actionSelect" class="w-full border-gray-300 rounded-md shadow-sm focus:border-primary focus:ring-primary">
45
+ <option value="moved">Moved to</option>
46
+ <option value="missing">Mark as Missing</option>
47
+ </select>
48
+ </div>
49
+ <div id="locationField" class="mb-4">
50
+ <label class="block text-sm font-medium text-gray-700 mb-1">Select Location</label>
51
+ <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-primary focus:ring-primary">
52
+ <option>Office Floor 1</option>
53
+ <option>Office Floor 2</option>
54
+ <option>Conference Room A</option>
55
+ <option>Storage Room</option>
56
+ </select>
57
+ </div>
58
+ <button type="submit" class="w-full bg-primary text-white py-2 px-4 rounded-md hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
59
+ Submit Action
60
+ </button>
61
+ `;
62
+ } else if (solutionType === 'inventory') {
63
+ actionForm.innerHTML = `
64
+ <div class="mb-4">
65
+ <label class="block text-sm font-medium text-gray-700 mb-1">Action</label>
66
+ <select id="actionSelect" class="w-full border-gray-300 rounded-md shadow-sm focus:border-primary focus:ring-primary">
67
+ <option value="scanned">Scanned at</option>
68
+ <option value="consumed">Mark as Consumed</option>
69
+ </select>
70
+ </div>
71
+ <div id="locationField" class="mb-4">
72
+ <label class="block text-sm font-medium text-gray-700 mb-1">Select Location</label>
73
+ <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-primary focus:ring-primary">
74
+ <option>Office Floor 1</option>
75
+ <option>Office Floor 2</option>
76
+ <option>Conference Room A</option>
77
+ <option>Storage Room</option>
78
+ </select>
79
+ </div>
80
+ <button type="submit" class="w-full bg-secondary text-white py-2 px-4 rounded-md hover:bg-secondary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary">
81
+ Submit Action
82
+ </button>
83
+ `;
84
+ } else {
85
+ actionForm.innerHTML = `
86
+ <div class="mb-4">
87
+ <label class="block text-sm font-medium text-gray-700 mb-1">Action</label>
88
+ <select id="actionSelect" class="w-full border-gray-300 rounded-md shadow-sm focus:border-primary focus:ring-primary">
89
+ <option value="received">Received at</option>
90
+ <option value="complete">Mark as Complete</option>
91
+ </select>
92
+ </div>
93
+ <div id="locationField" class="mb-4">
94
+ <label class="block text-sm font-medium text-gray-700 mb-1">Select Location</label>
95
+ <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-primary focus:ring-primary">
96
+ <option>Office Floor 1</option>
97
+ <option>Office Floor 2</option>
98
+ <option>Conference Room A</option>
99
+ <option>Storage Room</option>
100
+ </select>
101
+ </div>
102
+ <button type="submit" class="w-full bg-warning text-white py-2 px-4 rounded-md hover:bg-warning-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-warning">
103
+ Submit Action
104
+ </button>
105
+ `;
106
+ }
107
+
108
+ // Toggle location field based on action
109
+ document.getElementById('actionSelect')?.addEventListener('change', function(e) {
110
+ const locationField = document.getElementById('locationField');
111
+ if (['moved', 'scanned', 'received'].includes(e.target.value)) {
112
+ locationField.style.display = 'block';
113
+ } else {
114
+ locationField.style.display = 'none';
115
+ }
116
+ });
117
+
118
+ // Highlight rows in tables
119
+ function setupTableHighlight(tableClass, highlightClass) {
120
+ const rows = document.querySelectorAll(`.${tableClass} tbody tr`);
121
+ rows.forEach(row => {
122
+ row.addEventListener('click', function() {
123
+ const key = this.getAttribute('data-key');
124
+ rows.forEach(r => r.classList.remove(highlightClass));
125
+ document.querySelectorAll(`.${tableClass} tbody tr[data-key="${key}"]`)
126
+ .forEach(r => r.classList.add(highlightClass));
127
+ });
128
+ });
129
+ }
130
+
131
+ setupTableHighlight('location-history', 'highlight-location');
132
+ setupTableHighlight('action-history', 'highlight-user');
133
+ });
134
+ </script>
135
+ <style>
136
+ .highlight-location {
137
+ background-color: rgba(16, 185, 129, 0.1);
138
+ }
139
+ .highlight-user {
140
+ background-color: rgba(249, 168, 37, 0.1);
141
+ }
142
+ </style>
143
+ </head>
144
+ <body class="bg-gray-50">
145
+ <div class="min-h-screen flex flex-col">
146
+ <!-- Header -->
147
+ <header class="bg-white shadow-sm">
148
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
149
+ <div class="flex items-center space-x-2">
150
+ <i data-feather="package" class="text-primary"></i>
151
+ <h1 class="text-xl font-bold text-gray-800">AssetNinja Tracker</h1>
152
+ </div>
153
+ <div class="flex items-center space-x-4">
154
+ <div class="relative">
155
+ <button id="userDropdownBtn" class="flex items-center space-x-2 focus:outline-none">
156
+ <span class="text-sm font-medium text-gray-700">John Doe</span>
157
+ <i data-feather="chevron-down" class="w-4 h-4 text-gray-500"></i>
158
+ </button>
159
+ <div id="userDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10">
160
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Jane Smith</a>
161
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Mike Johnson</a>
162
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sarah Williams</a>
163
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">David Brown</a>
164
+ </div>
165
+ </div>
166
+ <button class="p-2 rounded-full bg-gray-100 text-gray-500 hover:bg-gray-200">
167
+ <i data-feather="bell"></i>
168
+ </button>
169
+ </div>
170
+ </div>
171
+ </header>
172
+
173
+ <!-- Main Content -->
174
+ <main class="flex-grow">
175
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
176
+ <!-- Back button -->
177
+ <a href="index.html" class="inline-flex items-center text-primary hover:text-primary-600 mb-6">
178
+ <i data-feather="arrow-left" class="w-4 h-4 mr-2"></i>
179
+ Back to Dashboard
180
+ </a>
181
+
182
+ <!-- Detail Summary and Action -->
183
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
184
+ <!-- Item Details -->
185
+ <div class="lg:col-span-2 bg-white rounded-lg shadow p-6">
186
+ <div class="flex items-start justify-between mb-4">
187
+ <div>
188
+ <div class="flex items-center space-x-3 mb-2">
189
+ <span id="solutionTypeIndicator" class="w-3 h-3 rounded-full"></span>
190
+ <span id="solutionTypeText" class="text-sm font-medium text-gray-500">Asset</span>
191
+ </div>
192
+ <h2 id="itemName" class="text-2xl font-bold text-gray-800">Laptop Dell XPS</h2>
193
+ <p id="currentLocation" class="text-gray-600 mt-2">Current Location: Office Floor 3</p>
194
+ </div>
195
+ <div class="flex space-x-2">
196
+ <button class="p-2 rounded-full bg-gray-100 text-gray-500 hover:bg-gray-200">
197
+ <i data-feather="edit"></i>
198
+ </button>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Action Form -->
204
+ <div class="bg-white rounded-lg shadow p-6">
205
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Item Actions</h3>
206
+ <form id="actionForm"></form>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- Location History -->
211
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-8">
212
+ <div class="px-6 py-4 border-b border-gray-200">
213
+ <h3 class="text-lg font-medium text-gray-900">Location History</h3>
214
+ </div>
215
+ <div class="overflow-x-auto">
216
+ <table class="location-history min-w-full divide-y divide-gray-200">
217
+ <thead class="bg-gray-50">
218
+ <tr>
219
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th>
220
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
221
+ </tr>
222
+ </thead>
223
+ <tbody class="bg-white divide-y divide-gray-200">
224
+ <tr data-key="floor3" class="cursor-pointer hover:bg-gray-50">
225
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Office Floor 3</td>
226
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 10:30 AM</td>
227
+ </tr>
228
+ <tr data-key="confA" class="cursor-pointer hover:bg-gray-50">
229
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Conference Room A</td>
230
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 2:15 PM</td>
231
+ </tr>
232
+ <tr data-key="floor2" class="cursor-pointer hover:bg-gray-50">
233
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Office Floor 2</td>
234
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Monday, 9:00 AM</td>
235
+ </tr>
236
+ </tbody>
237
+ </table>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Action History -->
242
+ <div class="bg-white rounded-lg shadow overflow-hidden">
243
+ <div class="px-6 py-4 border-b border-gray-200">
244
+ <h3 class="text-lg font-medium text-gray-900">Action History</h3>
245
+ </div>
246
+ <div class="overflow-x-auto">
247
+ <table class="action-history min-w-full divide-y divide-gray-200">
248
+ <thead class="bg-gray-50">
249
+ <tr>
250
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
251
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
252
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
253
+ </tr>
254
+ </thead>
255
+ <tbody class="bg-white divide-y divide-gray-200">
256
+ <tr data-key="john" class="cursor-pointer hover:bg-gray-50">
257
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">John Doe</td>
258
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Moved to Office Floor 3</td>
259
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 10:30 AM</td>
260
+ </tr>
261
+ <tr data-key="sarah" class="cursor-pointer hover:bg-gray-50">
262
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Sarah Williams</td>
263
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Moved to Conference Room A</td>
264
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 2:15 PM</td>
265
+ </tr>
266
+ <tr data-key="mike" class="cursor-pointer hover:bg-gray-50">
267
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Mike Johnson</td>
268
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Moved to Office Floor 2</td>
269
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Monday, 9:00 AM</td>
270
+ </tr>
271
+ </tbody>
272
+ </table>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </main>
277
+ </div>
278
+
279
+ <script>
280
+ // Toggle user dropdown
281
+ document.getElementById('userDropdownBtn')?.addEventListener('click', function() {
282
+ const dropdown = document.getElementById('userDropdown');
283
+ dropdown.classList.toggle('hidden');
284
+ });
285
+
286
+ // Close dropdown when clicking outside
287
+ document.addEventListener('click', function(event) {
288
+ const dropdownBtn = document.getElementById('userDropdownBtn');
289
+ const dropdown = document.getElementById('userDropdown');
290
+
291
+ if (!dropdownBtn.contains(event.target) && !dropdown.contains(event.target)) {
292
+ dropdown.classList.add('hidden');
293
+ }
294
+ });
295
+ </script>
296
+ </body>
297
+ </html>
index.html CHANGED
@@ -1,19 +1,249 @@
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>AssetNinja Tracker - Dashboard</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#3B82F6',
17
+ secondary: '#10B981',
18
+ warning: '#F59E0B'
19
+ }
20
+ }
21
+ }
22
+ }
23
+
24
+ function highlightSolutionType(type) {
25
+ const rows = document.querySelectorAll('#itemsTable tr');
26
+ rows.forEach(row => row.classList.remove('highlight-row'));
27
+
28
+ document.querySelectorAll(`#itemsTable tr[data-solution-type="${type}"]`)
29
+ .forEach(row => row.classList.add('highlight-row'));
30
+ }
31
+
32
+ // Toggle user dropdown
33
+ document.getElementById('userDropdownBtn')?.addEventListener('click', function() {
34
+ const dropdown = document.getElementById('userDropdown');
35
+ dropdown.classList.toggle('hidden');
36
+ });
37
+
38
+ // Close dropdown when clicking outside
39
+ document.addEventListener('click', function(event) {
40
+ const dropdownBtn = document.getElementById('userDropdownBtn');
41
+ const dropdown = document.getElementById('userDropdown');
42
+
43
+ if (!dropdownBtn.contains(event.target) && !dropdown.contains(event.target)) {
44
+ dropdown.classList.add('hidden');
45
+ }
46
+ });
47
+ </script>
48
+ <style>
49
+ .highlight-row {
50
+ background-color: rgba(59, 130, 246, 0.1);
51
+ }
52
+ .highlight-location {
53
+ background-color: rgba(16, 185, 129, 0.1);
54
+ }
55
+ .highlight-user {
56
+ background-color: rgba(249, 168, 37, 0.1);
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="bg-gray-50">
61
+ <div class="min-h-screen flex flex-col">
62
+ <!-- Header -->
63
+ <header class="bg-white shadow-sm">
64
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
65
+ <div class="flex items-center space-x-2">
66
+ <i data-feather="package" class="text-primary"></i>
67
+ <h1 class="text-xl font-bold text-gray-800">AssetNinja Tracker</h1>
68
+ </div>
69
+ <div class="flex items-center space-x-4">
70
+ <div class="relative">
71
+ <button id="userDropdownBtn" class="flex items-center space-x-2 focus:outline-none">
72
+ <span class="text-sm font-medium text-gray-700">John Doe</span>
73
+ <i data-feather="chevron-down" class="w-4 h-4 text-gray-500"></i>
74
+ </button>
75
+ <div id="userDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10">
76
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Jane Smith</a>
77
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Mike Johnson</a>
78
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sarah Williams</a>
79
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">David Brown</a>
80
+ </div>
81
+ </div>
82
+ <button class="p-2 rounded-full bg-gray-100 text-gray-500 hover:bg-gray-200">
83
+ <i data-feather="bell"></i>
84
+ </button>
85
+ </div>
86
+ </div>
87
+ </header>
88
+
89
+ <!-- Main Content -->
90
+ <main class="flex-grow">
91
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
92
+ <div class="mb-8">
93
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Dashboard Overview</h2>
94
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
95
+ <div class="bg-white rounded-lg shadow p-6">
96
+ <div class="flex items-center justify-between">
97
+ <div>
98
+ <p class="text-sm font-medium text-gray-500">Total Assets</p>
99
+ <p class="text-2xl font-bold text-primary mt-1">42</p>
100
+ </div>
101
+ <div class="p-3 rounded-full bg-blue-50 text-primary">
102
+ <i data-feather="box"></i>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ <div class="bg-white rounded-lg shadow p-6">
107
+ <div class="flex items-center justify-between">
108
+ <div>
109
+ <p class="text-sm font-medium text-gray-500">Inventory Items</p>
110
+ <p class="text-2xl font-bold text-secondary mt-1">28</p>
111
+ </div>
112
+ <div class="p-3 rounded-full bg-green-50 text-secondary">
113
+ <i data-feather="clipboard"></i>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ <div class="bg-white rounded-lg shadow p-6">
118
+ <div class="flex items-center justify-between">
119
+ <div>
120
+ <p class="text-sm font-medium text-gray-500">Work Orders</p>
121
+ <p class="text-2xl font-bold text-yellow-500 mt-1">15</p>
122
+ </div>
123
+ <div class="p-3 rounded-full bg-yellow-50 text-yellow-500">
124
+ <i data-feather="tool"></i>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ <div class="bg-white rounded-lg shadow overflow-hidden">
131
+ <div class="px-6 py-4 border-b border-gray-200">
132
+ <h3 class="text-lg font-medium text-gray-900">Items List</h3>
133
+ </div>
134
+ <div class="overflow-x-auto">
135
+ <table class="min-w-full divide-y divide-gray-200">
136
+ <thead class="bg-gray-50">
137
+ <tr>
138
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
139
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Solution Type</th>
140
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Location</th>
141
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
142
+ </tr>
143
+ </thead>
144
+ <tbody class="bg-white divide-y divide-gray-200" id="itemsTable">
145
+ <!-- Asset Items -->
146
+ <tr class="asset-row hover:bg-gray-50" data-solution-type="asset" onclick="highlightSolutionType('asset')">
147
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Laptop Dell XPS</td>
148
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Asset</td>
149
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Office Floor 3</td>
150
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
151
+ <a href="details.html?type=asset&id=1" class="text-primary hover:text-primary-600">View Details</a>
152
+ </td>
153
+ </tr>
154
+ <tr class="asset-row hover:bg-gray-50" data-solution-type="asset" onclick="highlightSolutionType('asset')">
155
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Projector Epson</td>
156
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Asset</td>
157
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Conference Room B</td>
158
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
159
+ <a href="details.html?type=asset&id=2" class="text-primary hover:text-primary-600">View Details</a>
160
+ </td>
161
+ </tr>
162
+ <tr class="asset-row hover:bg-gray-50" data-solution-type="asset" onclick="highlightSolutionType('asset')">
163
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">MacBook Pro</td>
164
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Asset</td>
165
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Office Floor 1</td>
166
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
167
+ <a href="details.html?type=asset&id=3" class="text-primary hover:text-primary-600">View Details</a>
168
+ </td>
169
+ </tr>
170
+ <tr class="asset-row hover:bg-gray-50" data-solution-type="asset" onclick="highlightSolutionType('asset')">
171
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Monitor Dell 24"</td>
172
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Asset</td>
173
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Office Floor 2</td>
174
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
175
+ <a href="details.html?type=asset&id=4" class="text-primary hover:text-primary-600">View Details</a>
176
+ </td>
177
+ </tr>
178
+ <!-- Inventory Items -->
179
+ <tr class="inventory-row hover:bg-gray-50" data-solution-type="inventory" onclick="highlightSolutionType('inventory')">
180
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">AA Batteries</td>
181
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Inventory</td>
182
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Storage Room</td>
183
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
184
+ <a href="details.html?type=inventory&id=1" class="text-secondary hover:text-secondary-600">View Details</a>
185
+ </td>
186
+ </tr>
187
+ <tr class="inventory-row hover:bg-gray-50" data-solution-type="inventory" onclick="highlightSolutionType('inventory')">
188
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">HDMI Cables</td>
189
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Inventory</td>
190
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">IT Closet</td>
191
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
192
+ <a href="details.html?type=inventory&id=2" class="text-secondary hover:text-secondary-600">View Details</a>
193
+ </td>
194
+ </tr>
195
+ <tr class="inventory-row hover:bg-gray-50" data-solution-type="inventory" onclick="highlightSolutionType('inventory')">
196
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">USB Hubs</td>
197
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Inventory</td>
198
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Office Floor 2</td>
199
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
200
+ <a href="details.html?type=inventory&id=3" class="text-secondary hover:text-secondary-600">View Details</a>
201
+ </td>
202
+ </tr>
203
+ <tr class="inventory-row hover:bg-gray-50" data-solution-type="inventory" onclick="highlightSolutionType('inventory')">
204
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Notebooks</td>
205
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Inventory</td>
206
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Supply Cabinet</td>
207
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
208
+ <a href="details.html?type=inventory&id=4" class="text-secondary hover:text-secondary-600">View Details</a>
209
+ </td>
210
+ </tr>
211
+ <!-- Work Order Items -->
212
+ <tr class="workorder-row hover:bg-gray-50" data-solution-type="workorder" onclick="highlightSolutionType('workorder')">
213
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Printer Maintenance</td>
214
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Work Order</td>
215
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Office Floor 1</td>
216
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
217
+ <a href="details.html?type=workorder&id=1" class="text-yellow-500 hover:text-yellow-600">View Details</a>
218
+ </td>
219
+ </tr>
220
+ <tr class="workorder-row hover:bg-gray-50" data-solution-type="workorder" onclick="highlightSolutionType('workorder')">
221
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Network Setup</td>
222
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Work Order</td>
223
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Conference Room A</td>
224
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
225
+ <a href="details.html?type=workorder&id=2" class="text-yellow-500 hover:text-yellow-600">View Details</a>
226
+ </td>
227
+ </tr>
228
+ <tr class="workorder-row hover:bg-gray-50" data-solution-type="workorder" onclick="highlightSolutionType('workorder')">
229
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Desk Assembly</td>
230
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Work Order</td>
231
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Office Floor 3</td>
232
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
233
+ <a href="details.html?type=workorder&id=3" class="text-yellow-500 hover:text-yellow-600">View Details</a>
234
+ </td>
235
+ </tr>
236
+ <tr class="workorder-row hover:bg-gray-50" data-solution-type="workorder" onclick="highlightSolutionType('workorder')">
237
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Software Installation</td>
238
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Work Order</td>
239
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Office Floor 2</td>
240
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
241
+ <a href="details.html?type=workorder&id=4" class="text-yellow-500 hover:text-yellow-600">View Details</a>
242
+ </td>
243
+ </tr>
244
+ </tbody>
245
+ </table>
246
+ </div>
247
+ </div>
248
+ </body>
249
+ </html>