Hugging Face's logo

Spaces:
artsmithai
/
undefined
Running

App Files Community
artsmithai commited on
Commit
59f83b0
·
verified ·
1 Parent(s): ff38f85

wow , you are amazing, please continue develioping

Browse files
Files changed (3) hide show
  1. index.html +4 -4
  2. locations.html +1 -1
  3. products.html +127 -120
index.html CHANGED
@@ -54,7 +54,7 @@
54
  </div>
55
  <div class="mb-6">
56
  <p class="text-xs uppercase text-indigo-300 mb-2">Inventory</p>
57
- <a href="products.html" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg mb-2">
58
  <i data-feather="box" class="mr-3"></i> Products
59
  </a>
60
  <a href="locations.html" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg mb-2">
@@ -116,10 +116,10 @@
116
  <div class="mb-6 flex justify-between items-center">
117
  <h2 class="text-2xl font-bold text-gray-800">Inventory Dashboard</h2>
118
  <div class="flex space-x-2">
119
- <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center">
120
  <i data-feather="plus" class="mr-2"></i> New Product
121
- </button>
122
- <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center">
123
  <i data-feather="refresh-cw" class="mr-2"></i> Refresh
124
  </button>
125
  </div>
 
54
  </div>
55
  <div class="mb-6">
56
  <p class="text-xs uppercase text-indigo-300 mb-2">Inventory</p>
57
+ <a href="products.html" class="flex items-center py-2 px-3 bg-indigo-700 rounded-lg text-white">
58
  <i data-feather="box" class="mr-3"></i> Products
59
  </a>
60
  <a href="locations.html" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg mb-2">
 
116
  <div class="mb-6 flex justify-between items-center">
117
  <h2 class="text-2xl font-bold text-gray-800">Inventory Dashboard</h2>
118
  <div class="flex space-x-2">
119
+ <a href="products.html" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center">
120
  <i data-feather="plus" class="mr-2"></i> New Product
121
+ </a>
122
+ <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center">
123
  <i data-feather="refresh-cw" class="mr-2"></i> Refresh
124
  </button>
125
  </div>
locations.html CHANGED
@@ -32,7 +32,7 @@
32
  <div class="mb-6">
33
  <p class="text-xs uppercase text-indigo-300 mb-2">Inventory</p>
34
  <a href="products.html" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg mb-2">
35
- <i data-feather="box" class="mr-3"></i> Products
36
  </a>
37
  <a href="locations.html" class="flex items-center py-2 px-3 bg-indigo-700 rounded-lg text-white">
38
  <i data-feather="map-pin" class="mr-3"></i> Locations
 
32
  <div class="mb-6">
33
  <p class="text-xs uppercase text-indigo-300 mb-2">Inventory</p>
34
  <a href="products.html" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg mb-2">
35
+ <i data-feather="box" class="mr-3"></i> Products
36
  </a>
37
  <a href="locations.html" class="flex items-center py-2 px-3 bg-indigo-700 rounded-lg text-white">
38
  <i data-feather="map-pin" class="mr-3"></i> Locations
products.html CHANGED
@@ -6,6 +6,21 @@
6
  <title>Products | StockSync Pro</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://unpkg.com/feather-icons"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  </head>
10
  <body class="bg-gray-50 font-sans text-gray-800">
11
  <div class="flex h-screen overflow-hidden">
@@ -88,19 +103,19 @@
88
  <h2 class="text-2xl font-bold text-gray-800">Product Inventory</h2>
89
  <div class="flex space-x-2">
90
  <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center">
91
- <i data-feather="plus" class="mr-2"></i> New Product
92
  </button>
93
  <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center">
94
- <i data-feather="refresh-cw" class="mr-2"></i> Refresh
95
  </button>
96
  <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center">
97
- <i data-feather="download" class="mr-2"></i> Export
98
  </button>
99
  </div>
100
  </div>
101
 
102
- <!-- Filters -->
103
- <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
104
  <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
105
  <div>
106
  <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
@@ -113,9 +128,9 @@
113
  </select>
114
  </div>
115
  <div>
116
- <label class="block text-sm font-medium text-gray-700 mb-1">Stock Level</label>
117
  <select class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
118
- <option>All Items</option>
119
  <option>In Stock</option>
120
  <option>Low Stock</option>
121
  <option>Out of Stock</option>
@@ -159,26 +174,30 @@
159
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
160
  Stock
161
  </th>
 
 
 
162
  <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
163
  Actions
164
  </th>
165
  </tr>
166
  </thead>
167
  <tbody class="bg-white divide-y divide-gray-200">
168
- <tr class="hover:bg-gray-50">
 
169
  <td class="px-6 py-4 whitespace-nowrap">
170
  <div class="flex items-center">
171
  <div class="flex-shrink-0 h-10 w-10">
172
- <img class="h-10 w-10 rounded" src="http://static.photos/technology/200x200/1" alt="">
173
  </div>
174
  <div class="ml-4">
175
  <div class="text-sm font-medium text-gray-900">Premium Widget</div>
176
- <div class="text-sm text-gray-500">Model: PW-2024</div>
177
  </div>
178
  </div>
179
  </td>
180
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
181
- PRM-WDG-01
182
  </td>
183
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
184
  Electronics
@@ -187,38 +206,35 @@
187
  Warehouse A
188
  </td>
189
  <td class="px-6 py-4 whitespace-nowrap">
190
- <div class="flex items-center">
191
- <div class="w-16 mr-2">
192
- <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
193
- <div class="h-full bg-green-500" style="width: 80%"></div>
194
- </div>
195
- </div>
196
- <span class="text-sm font-medium">120/150</span>
197
- </div>
198
  </td>
199
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
200
- <button class="text-indigo-600 hover:text-indigo-900 mr-3">
201
- <i data-feather="edit" class="w-4 h-4"></i>
202
- </button>
203
- <button class="text-red-600 hover:text-red-900">
204
- <i data-feather="trash-2" class="w-4 h-4"></i>
205
- </button>
206
  </td>
207
  </tr>
208
- <tr class="hover:bg-gray-50">
 
 
209
  <td class="px-6 py-4 whitespace-nowrap">
210
  <div class="flex items-center">
211
  <div class="flex-shrink-0 h-10 w-10">
212
- <img class="h-10 w-10 rounded" src="http://static.photos/industry/200x200/1" alt="">
213
  </div>
214
  <div class="ml-4">
215
- <div class="text-sm font-medium text-gray-900">Basic Component</div>
216
- <div class="text-sm text-gray-500">Model: BC-100</div>
217
  </div>
218
  </div>
219
  </td>
220
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
221
- BSC-CMP-01
222
  </td>
223
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
224
  Mechanical
@@ -227,118 +243,109 @@
227
  Warehouse B
228
  </td>
229
  <td class="px-6 py-4 whitespace-nowrap">
230
- <div class="flex items-center">
231
- <div class="w-16 mr-2">
232
- <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
233
- <div class="h-full bg-red-500" style="width: 15%"></div>
234
- </div>
235
- </div>
236
- <span class="text-sm font-medium text-red-500">12/80</span>
237
- </div>
238
  </td>
239
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
240
- <button class="text-indigo-600 hover:text-indigo-900 mr-3">
241
- <i data-feather="edit" class="w-4 h-4"></i>
242
- </button>
243
- <button class="text-red-600 hover:text-red-900">
244
- <i data-feather="trash-2" class="w-4 h-4"></i>
245
- </button>
246
  </td>
247
  </tr>
248
- <tr class="hover:bg-gray-50">
 
 
249
  <td class="px-6 py-4 whitespace-nowrap">
250
  <div class="flex items-center">
251
  <div class="flex-shrink-0 h-10 w-10">
252
- <img class="h-10 w-10 rounded" src="http://static.photos/education/200x200/1" alt="">
253
  </div>
254
  <div class="ml-4">
255
  <div class="text-sm font-medium text-gray-900">Power Adapter 12V</div>
256
- <div class="text-sm text-gray-500">Model: PA-12V</div>
257
  </div>
258
  </div>
259
  </td>
260
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
261
- PWR-ADP-12
262
  </td>
263
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
264
  Electronics
265
  </td>
266
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
267
- Production Line
268
  </td>
269
  <td class="px-6 py-4 whitespace-nowrap">
270
- <div class="flex items-center">
271
- <div class="w-16 mr-2">
272
- <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
273
- <div class="h-full bg-yellow-500" style="width: 25%"></div>
274
- </div>
275
- </div>
276
- <span class="text-sm font-medium text-yellow-500">8/30</span>
277
- </div>
278
  </td>
279
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
280
- <button class="text-indigo-600 hover:text-indigo-900 mr-3">
281
- <i data-feather="edit" class="w-4 h-4"></i>
282
- </button>
283
- <button class="text-red-600 hover:text-red-900">
284
- <i data-feather="trash-2" class="w-4 h-4"></i>
285
- </button>
286
  </td>
287
  </tr>
288
- <tr class="hover:bg-gray-50">
 
 
289
  <td class="px-6 py-4 whitespace-nowrap">
290
  <div class="flex items-center">
291
  <div class="flex-shrink-0 h-10 w-10">
292
- <img class="h-10 w-10 rounded" src="http://static.photos/construction/200x200/1" alt="">
293
  </div>
294
  <div class="ml-4">
295
  <div class="text-sm font-medium text-gray-900">LCD Display 7"</div>
296
- <div class="text-sm text-gray-500">Model: LCD-7IN</div>
297
  </div>
298
  </div>
299
  </td>
300
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
301
- LCD-7-IN
302
  </td>
303
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
304
  Electronics
305
  </td>
306
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
307
- Warehouse A
308
  </td>
309
  <td class="px-6 py-4 whitespace-nowrap">
310
- <div class="flex items-center">
311
- <div class="w-16 mr-2">
312
- <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
313
- <div class="h-full bg-green-500" style="width: 60%"></div>
314
- </div>
315
- </div>
316
- <span class="text-sm font-medium">36/60</span>
317
- </div>
318
  </td>
319
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
320
- <button class="text-indigo-600 hover:text-indigo-900 mr-3">
321
- <i data-feather="edit" class="w-4 h-4"></i>
322
- </button>
323
- <button class="text-red-600 hover:text-red-900">
324
- <i data-feather="trash-2" class="w-4 h-4"></i>
325
- </button>
326
  </td>
327
  </tr>
328
- <tr class="hover:bg-gray-50">
 
 
329
  <td class="px-6 py-4 whitespace-nowrap">
330
  <div class="flex items-center">
331
  <div class="flex-shrink-0 h-10 w-10">
332
- <img class="h-10 w-10 rounded" src="http://static.photos/retail/200x200/1" alt="">
333
  </div>
334
  <div class="ml-4">
335
  <div class="text-sm font-medium text-gray-900">Rubber Feet (4-pack)</div>
336
- <div class="text-sm text-gray-500">Model: RB-FT-4PK</div>
337
  </div>
338
  </div>
339
  </td>
340
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
341
- RB-FT-4PK
342
  </td>
343
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
344
  Packaging
@@ -347,47 +354,47 @@
347
  Warehouse B
348
  </td>
349
  <td class="px-6 py-4 whitespace-nowrap">
350
- <div class="flex items-center">
351
- <div class="w-16 mr-2">
352
- <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
353
- <div class="h-full bg-yellow-500" style="width: 22%"></div>
354
- </div>
355
- </div>
356
- <span class="text-sm font-medium text-yellow-500">22/100</span>
357
- </div>
358
  </td>
359
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
360
- <button class="text-indigo-600 hover:text-indigo-900 mr-3">
361
- <i data-feather="edit" class="w-4 h-4"></i>
362
- </button>
363
- <button class="text-red-600 hover:text-red-900">
364
- <i data-feather="trash-2" class="w-4 h-4"></i>
365
- </button>
366
  </td>
367
  </tr>
368
  </tbody>
369
  </table>
370
  </div>
371
- <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
372
- <div class="text-sm text-gray-500">
373
- Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">24</span> results
374
- </div>
375
- <div class="flex space-x-2">
376
- <button class="px-3 py-1 border rounded-lg text-gray-500 hover:bg-gray-50">
377
- Previous
378
- </button>
379
- <button class="px-3 py-1 bg-indigo-600 text-white rounded-lg">
380
- 1
381
- </button>
382
- <button class="px-3 py-1 border rounded-lg text-gray-500 hover:bg-gray-50">
383
- 2
384
- </button>
385
- <button class="px-3 py-1 border rounded-lg text-gray-500 hover:bg-gray-50">
386
- 3
387
- </button>
388
- <button class="px-3 py-1 border rounded-lg text-gray-500 hover:bg-gray-50">
389
- Next
390
- </button>
 
 
 
 
 
391
  </div>
392
  </div>
393
  </div>
 
6
  <title>Products | StockSync Pro</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://unpkg.com/feather-icons"></script>
9
+ <style>
10
+ .sidebar {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .product-card:hover {
14
+ transform: translateY(-3px);
15
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .status-badge {
18
+ transition: all 0.2s ease;
19
+ }
20
+ .status-badge:hover {
21
+ transform: scale(1.05);
22
+ }
23
+ </style>
24
  </head>
25
  <body class="bg-gray-50 font-sans text-gray-800">
26
  <div class="flex h-screen overflow-hidden">
 
103
  <h2 class="text-2xl font-bold text-gray-800">Product Inventory</h2>
104
  <div class="flex space-x-2">
105
  <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center">
106
+ <i data-feather="plus" class="mr-2"></i> Add Product
107
  </button>
108
  <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center">
109
+ <i data-feather="download" class="mr-2"></i> Export
110
  </button>
111
  <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center">
112
+ <i data-feather="filter" class="mr-2"></i> Filter
113
  </button>
114
  </div>
115
  </div>
116
 
117
+ <!-- Product Filters -->
118
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
119
  <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
120
  <div>
121
  <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
 
128
  </select>
129
  </div>
130
  <div>
131
+ <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
132
  <select class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
133
+ <option>All Statuses</option>
134
  <option>In Stock</option>
135
  <option>Low Stock</option>
136
  <option>Out of Stock</option>
 
174
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
175
  Stock
176
  </th>
177
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
178
+ Status
179
+ </th>
180
  <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
181
  Actions
182
  </th>
183
  </tr>
184
  </thead>
185
  <tbody class="bg-white divide-y divide-gray-200">
186
+ <!-- Product 1 -->
187
+ <tr class="hover:bg-gray-50 product-card">
188
  <td class="px-6 py-4 whitespace-nowrap">
189
  <div class="flex items-center">
190
  <div class="flex-shrink-0 h-10 w-10">
191
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/technology/200x200/1" alt="">
192
  </div>
193
  <div class="ml-4">
194
  <div class="text-sm font-medium text-gray-900">Premium Widget</div>
195
+ <div class="text-sm text-gray-500">Model 2024</div>
196
  </div>
197
  </div>
198
  </td>
199
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
200
+ PRD-2024-001
201
  </td>
202
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
203
  Electronics
 
206
  Warehouse A
207
  </td>
208
  <td class="px-6 py-4 whitespace-nowrap">
209
+ <div class="text-sm text-gray-900">250</div>
210
+ <div class="text-xs text-gray-500">Min: 100</div>
211
+ </td>
212
+ <td class="px-6 py-4 whitespace-nowrap">
213
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 status-badge">
214
+ In Stock
215
+ </span>
 
216
  </td>
217
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
218
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button>
219
+ <button class="text-gray-600 hover:text-gray-900">View</button>
 
 
 
 
220
  </td>
221
  </tr>
222
+
223
+ <!-- Product 2 -->
224
+ <tr class="hover:bg-gray-50 product-card">
225
  <td class="px-6 py-4 whitespace-nowrap">
226
  <div class="flex items-center">
227
  <div class="flex-shrink-0 h-10 w-10">
228
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/technology/200x200/2" alt="">
229
  </div>
230
  <div class="ml-4">
231
+ <div class="text-sm font-medium text-gray-900">Fasteners M3</div>
232
+ <div class="text-sm text-gray-500">Pack of 100</div>
233
  </div>
234
  </div>
235
  </td>
236
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
237
+ PRD-MCH-003
238
  </td>
239
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
240
  Mechanical
 
243
  Warehouse B
244
  </td>
245
  <td class="px-6 py-4 whitespace-nowrap">
246
+ <div class="text-sm text-gray-900">12</div>
247
+ <div class="text-xs text-red-500">Min: 50</div>
248
+ </td>
249
+ <td class="px-6 py-4 whitespace-nowrap">
250
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 status-badge">
251
+ Low Stock
252
+ </span>
 
253
  </td>
254
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
255
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button>
256
+ <button class="text-gray-600 hover:text-gray-900">View</button>
 
 
 
 
257
  </td>
258
  </tr>
259
+
260
+ <!-- Product 3 -->
261
+ <tr class="hover:bg-gray-50 product-card">
262
  <td class="px-6 py-4 whitespace-nowrap">
263
  <div class="flex items-center">
264
  <div class="flex-shrink-0 h-10 w-10">
265
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/technology/200x200/3" alt="">
266
  </div>
267
  <div class="ml-4">
268
  <div class="text-sm font-medium text-gray-900">Power Adapter 12V</div>
269
+ <div class="text-sm text-gray-500">2A Output</div>
270
  </div>
271
  </div>
272
  </td>
273
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
274
+ PRD-ELC-012
275
  </td>
276
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
277
  Electronics
278
  </td>
279
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
280
+ Warehouse A
281
  </td>
282
  <td class="px-6 py-4 whitespace-nowrap">
283
+ <div class="text-sm text-gray-900">8</div>
284
+ <div class="text-xs text-red-500">Min: 30</div>
285
+ </td>
286
+ <td class="px-6 py-4 whitespace-nowrap">
287
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 status-badge">
288
+ Low Stock
289
+ </span>
 
290
  </td>
291
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
292
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button>
293
+ <button class="text-gray-600 hover:text-gray-900">View</button>
 
 
 
 
294
  </td>
295
  </tr>
296
+
297
+ <!-- Product 4 -->
298
+ <tr class="hover:bg-gray-50 product-card">
299
  <td class="px-6 py-4 whitespace-nowrap">
300
  <div class="flex items-center">
301
  <div class="flex-shrink-0 h-10 w-10">
302
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/technology/200x200/4" alt="">
303
  </div>
304
  <div class="ml-4">
305
  <div class="text-sm font-medium text-gray-900">LCD Display 7"</div>
306
+ <div class="text-sm text-gray-500">Touchscreen</div>
307
  </div>
308
  </div>
309
  </td>
310
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
311
+ PRD-DSP-007
312
  </td>
313
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
314
  Electronics
315
  </td>
316
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
317
+ Production Line
318
  </td>
319
  <td class="px-6 py-4 whitespace-nowrap">
320
+ <div class="text-sm text-gray-900">15</div>
321
+ <div class="text-xs text-yellow-500">Min: 40</div>
322
+ </td>
323
+ <td class="px-6 py-4 whitespace-nowrap">
324
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 status-badge">
325
+ Warning
326
+ </span>
 
327
  </td>
328
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
329
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button>
330
+ <button class="text-gray-600 hover:text-gray-900">View</button>
 
 
 
 
331
  </td>
332
  </tr>
333
+
334
+ <!-- Product 5 -->
335
+ <tr class="hover:bg-gray-50 product-card">
336
  <td class="px-6 py-4 whitespace-nowrap">
337
  <div class="flex items-center">
338
  <div class="flex-shrink-0 h-10 w-10">
339
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/technology/200x200/5" alt="">
340
  </div>
341
  <div class="ml-4">
342
  <div class="text-sm font-medium text-gray-900">Rubber Feet (4-pack)</div>
343
+ <div class="text-sm text-gray-500">Black</div>
344
  </div>
345
  </div>
346
  </td>
347
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
348
+ PRD-ACC-004
349
  </td>
350
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
351
  Packaging
 
354
  Warehouse B
355
  </td>
356
  <td class="px-6 py-4 whitespace-nowrap">
357
+ <div class="text-sm text-gray-900">22</div>
358
+ <div class="text-xs text-yellow-500">Min: 100</div>
359
+ </td>
360
+ <td class="px-6 py-4 whitespace-nowrap">
361
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 status-badge">
362
+ Warning
363
+ </span>
 
364
  </td>
365
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
366
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button>
367
+ <button class="text-gray-600 hover:text-gray-900">View</button>
 
 
 
 
368
  </td>
369
  </tr>
370
  </tbody>
371
  </table>
372
  </div>
373
+ <!-- Pagination -->
374
+ <div class="bg-white px-6 py-4 border-t border-gray-200">
375
+ <div class="flex items-center justify-between">
376
+ <div class="flex-1 flex justify-between items-center">
377
+ <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
378
+ Previous
379
+ </button>
380
+ <div class="hidden md:flex space-x-2">
381
+ <button class="px-3 py-1 rounded-md bg-indigo-600 text-white">1</button>
382
+ <button class="px-3 py-1 rounded-md hover:bg-gray-100">2</button>
383
+ <button class="px-3 py-1 rounded-md hover:bg-gray-100">3</button>
384
+ <span class="px-3 py-1">...</span>
385
+ <button class="px-3 py-1 rounded-md hover:bg-gray-100">8</button>
386
+ </div>
387
+ <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
388
+ Next
389
+ </button>
390
+ </div>
391
+ <div class="ml-4">
392
+ <select class="border rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
393
+ <option>10 per page</option>
394
+ <option>25 per page</option>
395
+ <option>50 per page</option>
396
+ </select>
397
+ </div>
398
  </div>
399
  </div>
400
  </div>