Hugging Face's logo

Spaces:
artsmithai
/
undefined
Running

App Files Community
artsmithai commited on
Commit
109070d
·
verified ·
1 Parent(s): d73b707

kepp building out the other pages

Browse files
Files changed (3) hide show
  1. boms.html +58 -64
  2. products.html +90 -180
  3. transfers.html +110 -129
boms.html CHANGED
@@ -96,118 +96,112 @@
96
  </div>
97
  </div>
98
 
99
- <!-- BOM List -->
100
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
101
- <!-- BOM 1 -->
102
  <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300">
 
 
 
103
  <div class="p-6">
104
  <div class="flex justify-between items-start mb-2">
105
- <h3 class="text-xl font-bold">Premium Widget Assembly</h3>
106
- <span class="px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">Active</span>
107
  </div>
108
- <p class="text-gray-600 mb-4">Complete assembly for flagship product</p>
109
-
110
- <div class="space-y-3">
111
- <div class="flex justify-between text-sm">
112
- <span class="text-gray-500">Revision:</span>
113
- <span class="font-medium">3.2</span>
114
  </div>
115
- <div class="flex justify-between text-sm">
116
- <span class="text-gray-500">Components:</span>
117
- <span class="font-medium">14</span>
118
  </div>
119
- <div class="flex justify-between text-sm">
120
- <span class="text-gray-500">Last Updated:</span>
121
- <span class="font-medium">2024-02-15</span>
122
  </div>
123
  </div>
124
-
125
  <div class="mt-4 flex justify-between">
126
- <button class="px-3 py-1 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700">
127
- View
128
  </button>
129
  <button class="px-3 py-1 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50">
130
  Edit
131
  </button>
132
- <button class="px-3 py-1 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700">
133
- Create WO
134
- </button>
135
  </div>
136
  </div>
137
  </div>
138
 
139
- <!-- BOM 2 -->
140
  <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300">
 
 
 
141
  <div class="p-6">
142
  <div class="flex justify-between items-start mb-2">
143
- <h3 class="text-xl font-bold">Basic Widget Kit</h3>
144
- <span class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">Draft</span>
145
  </div>
146
- <p class="text-gray-600 mb-4">Entry-level product assembly</p>
147
-
148
- <div class="space-y-3">
149
- <div class="flex justify-between text-sm">
150
- <span class="text-gray-500">Revision:</span>
151
- <span class="font-medium">1.0</span>
152
  </div>
153
- <div class="flex justify-between text-sm">
154
- <span class="text-gray-500">Components:</span>
155
- <span class="font-medium">8</span>
156
  </div>
157
- <div class="flex justify-between text-sm">
158
- <span class="text-gray-500">Last Updated:</span>
159
- <span class="font-medium">2024-01-28</span>
160
  </div>
161
  </div>
162
-
163
  <div class="mt-4 flex justify-between">
164
- <button class="px-3 py-1 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700">
165
- View
166
  </button>
167
  <button class="px-3 py-1 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50">
168
  Edit
169
  </button>
170
- <button class="px-3 py-1 bg-gray-300 text-gray-600 text-sm rounded-lg cursor-not-allowed" disabled>
171
- Create WO
172
- </button>
173
  </div>
174
  </div>
175
  </div>
176
 
177
- <!-- BOM 3 -->
178
  <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300">
 
 
 
179
  <div class="p-6">
180
  <div class="flex justify-between items-start mb-2">
181
- <h3 class="text-xl font-bold">Power Module</h3>
182
- <span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-xs font-medium rounded-full">Pending Review</span>
183
  </div>
184
- <p class="text-gray-600 mb-4">Power supply and regulation</p>
185
-
186
- <div class="space-y-3">
187
- <div class="flex justify-between text-sm">
188
- <span class="text-gray-500">Revision:</span>
189
- <span class="font-medium">2.1</span>
190
  </div>
191
- <div class="flex justify-between text-sm">
192
- <span class="text-gray-500">Components:</span>
193
- <span class="font-medium">11</span>
194
  </div>
195
- <div class="flex justify-between text-sm">
196
- <span class="text-gray-500">Last Updated:</span>
197
- <span class="font-medium">2024-02-10</span>
198
  </div>
199
  </div>
200
-
201
  <div class="mt-4 flex justify-between">
202
- <button class="px-3 py-1 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700">
203
- View
204
  </button>
205
  <button class="px-3 py-1 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50">
206
  Edit
207
  </button>
208
- <button class="px-3 py-1 bg-gray-300 text-gray-600 text-sm rounded-lg cursor-not-allowed" disabled>
209
- Create WO
210
- </button>
211
  </div>
212
  </div>
213
  </div>
 
96
  </div>
97
  </div>
98
 
99
+ <!-- BOMs Grid -->
100
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
101
+ <!-- Deluxe Model BOM -->
102
  <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300">
103
+ <div class="h-48 bg-purple-100 flex items-center justify-center">
104
+ <i data-feather="layers" class="text-purple-600 w-16 h-16"></i>
105
+ </div>
106
  <div class="p-6">
107
  <div class="flex justify-between items-start mb-2">
108
+ <h3 class="text-xl font-bold">Deluxe Model 2024</h3>
109
+ <span class="px-3 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded-full">Active</span>
110
  </div>
111
+ <p class="text-gray-600 mb-4">Premium product with advanced features</p>
112
+ <div class="space-y-2">
113
+ <div class="flex items-center text-sm text-gray-500">
114
+ <i data-feather="hash" class="mr-2 w-4 h-4"></i>
115
+ <span>BOM-2024-DLX</span>
 
116
  </div>
117
+ <div class="flex items-center text-sm text-gray-500">
118
+ <i data-feather="box" class="mr-2 w-4 h-4"></i>
119
+ <span>15 components</span>
120
  </div>
121
+ <div class="flex items-center text-sm text-gray-500">
122
+ <i data-feather="clock" class="mr-2 w-4 h-4"></i>
123
+ <span>Last updated: 3 days ago</span>
124
  </div>
125
  </div>
 
126
  <div class="mt-4 flex justify-between">
127
+ <button class="px-3 py-1 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700">
128
+ View Details
129
  </button>
130
  <button class="px-3 py-1 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50">
131
  Edit
132
  </button>
 
 
 
133
  </div>
134
  </div>
135
  </div>
136
 
137
+ <!-- Standard Model BOM -->
138
  <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300">
139
+ <div class="h-48 bg-blue-100 flex items-center justify-center">
140
+ <i data-feather="layers" class="text-blue-600 w-16 h-16"></i>
141
+ </div>
142
  <div class="p-6">
143
  <div class="flex justify-between items-start mb-2">
144
+ <h3 class="text-xl font-bold">Standard Model 2024</h3>
145
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">Active</span>
146
  </div>
147
+ <p class="text-gray-600 mb-4">Base model with essential features</p>
148
+ <div class="space-y-2">
149
+ <div class="flex items-center text-sm text-gray-500">
150
+ <i data-feather="hash" class="mr-2 w-4 h-4"></i>
151
+ <span>BOM-2024-STD</span>
 
152
  </div>
153
+ <div class="flex items-center text-sm text-gray-500">
154
+ <i data-feather="box" class="mr-2 w-4 h-4"></i>
155
+ <span>9 components</span>
156
  </div>
157
+ <div class="flex items-center text-sm text-gray-500">
158
+ <i data-feather="clock" class="mr-2 w-4 h-4"></i>
159
+ <span>Last updated: 1 week ago</span>
160
  </div>
161
  </div>
 
162
  <div class="mt-4 flex justify-between">
163
+ <button class="px-3 py-1 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700">
164
+ View Details
165
  </button>
166
  <button class="px-3 py-1 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50">
167
  Edit
168
  </button>
 
 
 
169
  </div>
170
  </div>
171
  </div>
172
 
173
+ <!-- Budget Model BOM -->
174
  <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300">
175
+ <div class="h-48 bg-green-100 flex items-center justify-center">
176
+ <i data-feather="layers" class="text-green-600 w-16 h-16"></i>
177
+ </div>
178
  <div class="p-6">
179
  <div class="flex justify-between items-start mb-2">
180
+ <h3 class="text-xl font-bold">Budget Model 2024</h3>
181
+ <span class="px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">Draft</span>
182
  </div>
183
+ <p class="text-gray-600 mb-4">Cost-effective entry-level product</p>
184
+ <div class="space-y-2">
185
+ <div class="flex items-center text-sm text-gray-500">
186
+ <i data-feather="hash" class="mr-2 w-4 h-4"></i>
187
+ <span>BOM-2024-BGT</span>
 
188
  </div>
189
+ <div class="flex items-center text-sm text-gray-500">
190
+ <i data-feather="box" class="mr-2 w-4 h-4"></i>
191
+ <span>7 components</span>
192
  </div>
193
+ <div class="flex items-center text-sm text-gray-500">
194
+ <i data-feather="clock" class="mr-2 w-4 h-4"></i>
195
+ <span>Last updated: 2 weeks ago</span>
196
  </div>
197
  </div>
 
198
  <div class="mt-4 flex justify-between">
199
+ <button class="px-3 py-1 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700">
200
+ View Details
201
  </button>
202
  <button class="px-3 py-1 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50">
203
  Edit
204
  </button>
 
 
 
205
  </div>
206
  </div>
207
  </div>
products.html CHANGED
@@ -6,21 +6,6 @@
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">
@@ -55,7 +40,7 @@
55
  <a href="boms.html" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg mb-2">
56
  <i data-feather="layers" class="mr-3"></i> BOMs
57
  </a>
58
- <a href="#" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg">
59
  <i data-feather="clipboard" class="mr-3"></i> Work Orders
60
  </a>
61
  </div>
@@ -103,19 +88,19 @@
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>
@@ -159,32 +144,17 @@
159
  <table class="min-w-full divide-y divide-gray-200">
160
  <thead class="bg-gray-50">
161
  <tr>
162
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
163
- Product
164
- </th>
165
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
166
- SKU
167
- </th>
168
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
169
- Category
170
- </th>
171
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
172
- Location
173
- </th>
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">
@@ -192,208 +162,148 @@
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
204
- </td>
205
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
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
241
- </td>
242
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
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
352
- </td>
353
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
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>
 
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">
 
40
  <a href="boms.html" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg mb-2">
41
  <i data-feather="layers" class="mr-3"></i> BOMs
42
  </a>
43
+ <a href="#" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg">
44
  <i data-feather="clipboard" class="mr-3"></i> Work Orders
45
  </a>
46
  </div>
 
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="download" class="mr-2"></i> Export
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="refresh-cw" class="mr-2"></i> Refresh
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>
 
144
  <table class="min-w-full divide-y divide-gray-200">
145
  <thead class="bg-gray-50">
146
  <tr>
147
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
148
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">SKU</th>
149
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
150
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th>
151
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stock</th>
152
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
153
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
154
  </tr>
155
  </thead>
156
  <tbody class="bg-white divide-y divide-gray-200">
157
+ <tr class="hover:bg-gray-50">
 
158
  <td class="px-6 py-4 whitespace-nowrap">
159
  <div class="flex items-center">
160
  <div class="flex-shrink-0 h-10 w-10">
 
162
  </div>
163
  <div class="ml-4">
164
  <div class="text-sm font-medium text-gray-900">Premium Widget</div>
165
+ <div class="text-sm text-gray-500">Model: PW-2023</div>
166
  </div>
167
  </div>
168
  </td>
169
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SKU-PW-2023</td>
170
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Electronics</td>
171
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Warehouse A</td>
172
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">250</td>
 
 
 
 
 
173
  <td class="px-6 py-4 whitespace-nowrap">
174
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">In Stock</span>
 
 
 
 
 
 
175
  </td>
176
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
177
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a>
178
+ <a href="#" class="text-red-600 hover:text-red-900">Delete</a>
179
  </td>
180
  </tr>
181
+ <tr class="hover:bg-gray-50">
 
 
182
  <td class="px-6 py-4 whitespace-nowrap">
183
  <div class="flex items-center">
184
  <div class="flex-shrink-0 h-10 w-10">
185
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/industry/200x200/2" alt="">
186
  </div>
187
  <div class="ml-4">
188
+ <div class="text-sm font-medium text-gray-900">Basic Component</div>
189
+ <div class="text-sm text-gray-500">Model: BC-100</div>
190
  </div>
191
  </div>
192
  </td>
193
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SKU-BC-100</td>
194
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Mechanical</td>
195
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Warehouse B</td>
196
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">50</td>
 
 
 
 
 
 
 
 
 
197
  <td class="px-6 py-4 whitespace-nowrap">
198
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Low Stock</span>
 
 
199
  </td>
200
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
201
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a>
202
+ <a href="#" class="text-red-600 hover:text-red-900">Delete</a>
203
  </td>
204
  </tr>
205
+ <tr class="hover:bg-gray-50">
 
 
206
  <td class="px-6 py-4 whitespace-nowrap">
207
  <div class="flex items-center">
208
  <div class="flex-shrink-0 h-10 w-10">
209
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/office/200x200/3" alt="">
210
  </div>
211
  <div class="ml-4">
212
+ <div class="text-sm font-medium text-gray-900">LCD Display 7"</div>
213
+ <div class="text-sm text-gray-500">Model: LCD-7-IN</div>
214
  </div>
215
  </div>
216
  </td>
217
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SKU-LCD-7-IN</td>
218
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Electronics</td>
219
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Production Line</td>
220
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15</td>
 
 
 
 
 
221
  <td class="px-6 py-4 whitespace-nowrap">
222
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Critical</span>
 
 
 
 
 
 
223
  </td>
224
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
225
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a>
226
+ <a href="#" class="text-red-600 hover:text-red-900">Delete</a>
227
  </td>
228
  </tr>
229
+ <tr class="hover:bg-gray-50">
 
 
230
  <td class="px-6 py-4 whitespace-nowrap">
231
  <div class="flex items-center">
232
  <div class="flex-shrink-0 h-10 w-10">
233
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/retail/200x200/4" alt="">
234
  </div>
235
  <div class="ml-4">
236
+ <div class="text-sm font-medium text-gray-900">Power Adapter 12V</div>
237
+ <div class="text-sm text-gray-500">Model: PWR-ADP-12</div>
238
  </div>
239
  </div>
240
  </td>
241
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SKU-PWR-ADP-12</td>
242
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Electronics</td>
243
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Warehouse A</td>
244
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8</td>
 
 
 
 
 
245
  <td class="px-6 py-4 whitespace-nowrap">
246
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Critical</span>
 
 
 
 
 
 
247
  </td>
248
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
249
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a>
250
+ <a href="#" class="text-red-600 hover:text-red-900">Delete</a>
251
  </td>
252
  </tr>
253
+ <tr class="hover:bg-gray-50">
 
 
254
  <td class="px-6 py-4 whitespace-nowrap">
255
  <div class="flex items-center">
256
  <div class="flex-shrink-0 h-10 w-10">
257
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/minimal/200x200/5" alt="">
258
  </div>
259
  <div class="ml-4">
260
  <div class="text-sm font-medium text-gray-900">Rubber Feet (4-pack)</div>
261
+ <div class="text-sm text-gray-500">Model: RB-FT-4PK</div>
262
  </div>
263
  </div>
264
  </td>
265
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SKU-RB-FT-4PK</td>
266
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Mechanical</td>
267
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Warehouse B</td>
268
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">22</td>
 
 
 
 
 
 
 
 
 
269
  <td class="px-6 py-4 whitespace-nowrap">
270
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Low Stock</span>
 
 
271
  </td>
272
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
273
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a>
274
+ <a href="#" class="text-red-600 hover:text-red-900">Delete</a>
275
  </td>
276
  </tr>
277
  </tbody>
278
  </table>
279
  </div>
280
+ <div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200">
281
+ <div class="flex-1 flex justify-between sm:hidden">
282
+ <a href="#" 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">Previous</a>
283
+ <a href="#" class="ml-3 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">Next</a>
284
+ </div>
285
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
286
+ <div>
287
+ <p class="text-sm text-gray-700">
288
+ Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">1248</span> results
289
+ </p>
 
 
 
 
 
 
 
290
  </div>
291
+ <div>
292
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
293
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
294
+ <span class="sr-only">Previous</span>
295
+ <i data-feather="chevron-left" class="h-5 w-5"></i>
296
+ </a>
297
+ <a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">1</a>
298
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">2</a>
299
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">3</a>
300
+ <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">...</span>
301
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">25</a>
302
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
303
+ <span class="sr-only">Next</span>
304
+ <i data-feather="chevron-right" class="h-5 w-5"></i>
305
+ </a>
306
+ </nav>
307
  </div>
308
  </div>
309
  </div>
transfers.html CHANGED
@@ -40,7 +40,7 @@
40
  <a href="boms.html" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg mb-2">
41
  <i data-feather="layers" class="mr-3"></i> BOMs
42
  </a>
43
- <a href="#" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg">
44
  <i data-feather="clipboard" class="mr-3"></i> Work Orders
45
  </a>
46
  </div>
@@ -96,14 +96,42 @@
96
  </div>
97
  </div>
98
 
99
- <!-- Transfer Status Tabs -->
100
- <div class="bg-white rounded-xl shadow-sm p-1 mb-6">
101
- <div class="flex border-b border-gray-200">
102
- <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-indigo-600">All</button>
103
- <button class="px-4 py-2 text-sm font-medium text-indigo-600 border-b-2 border-indigo-600">Pending</button>
104
- <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-indigo-600">In Transit</button>
105
- <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-indigo-600">Completed</button>
106
- <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-indigo-600">Cancelled</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
107
  </div>
108
  </div>
109
 
@@ -113,160 +141,113 @@
113
  <table class="min-w-full divide-y divide-gray-200">
114
  <thead class="bg-gray-50">
115
  <tr>
116
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
117
- Transfer ID
118
- </th>
119
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
120
- Items
121
- </th>
122
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
123
- From → To
124
- </th>
125
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
126
- Requested
127
- </th>
128
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
129
- Status
130
- </th>
131
- <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
132
- Actions
133
- </th>
134
  </tr>
135
  </thead>
136
  <tbody class="bg-white divide-y divide-gray-200">
137
  <tr class="hover:bg-gray-50">
138
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
139
- TR-2023-0425
140
- </td>
141
- <td class="px-6 py-4">
142
- <div class="text-sm text-gray-900">Basic Components (50)</div>
143
- <div class="text-sm text-gray-500">SKU: BSC-CMP-01</div>
144
- </td>
145
  <td class="px-6 py-4 whitespace-nowrap">
146
- <div class="text-sm text-gray-900">Warehouse A → Production Line</div>
147
- <div class="text-sm text-gray-500">For Work Order #WO-2023-102</div>
148
- </td>
149
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
150
- Today, 08:15 AM
151
- </td>
152
- <td class="px-6 py-4 whitespace-nowrap">
153
- <span class="px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800">
154
- Pending
155
- </span>
156
  </td>
157
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
158
- <button class="text-indigo-600 hover:text-indigo-900 mr-3">
159
- <i data-feather="check" class="w-4 h-4"></i>
160
- </button>
161
- <button class="text-red-600 hover:text-red-900">
162
- <i data-feather="x" class="w-4 h-4"></i>
163
- </button>
164
  </td>
165
  </tr>
166
  <tr class="hover:bg-gray-50">
167
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
168
- TR-2023-0424
169
- </td>
170
- <td class="px-6 py-4">
171
- <div class="text-sm text-gray-900">Premium Widgets (25)</div>
172
- <div class="text-sm text-gray-500">SKU: PRM-WDG-01</div>
173
- </td>
174
- <td class="px-6 py-4 whitespace-nowrap">
175
- <div class="text-sm text-gray-900">Warehouse B → Warehouse A</div>
176
- <div class="text-sm text-gray-500">Inventory rebalancing</div>
177
- </td>
178
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
179
- Yesterday, 03:45 PM
180
- </td>
181
  <td class="px-6 py-4 whitespace-nowrap">
182
- <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">
183
- In Transit
184
- </span>
185
  </td>
186
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
187
- <button class="text-indigo-600 hover:text-indigo-900 mr-3">
188
- <i data-feather="check" class="w-4 h-4"></i>
189
- </button>
190
- <button class="text-red-600 hover:text-red-900">
191
- <i data-feather="x" class="w-4 h-4"></i>
192
- </button>
193
  </td>
194
  </tr>
195
  <tr class="hover:bg-gray-50">
196
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
197
- TR-2023-0423
198
- </td>
199
- <td class="px-6 py-4">
200
- <div class="text-sm text-gray-900">Rubber Feet (100)</div>
201
- <div class="text-sm text-gray-500">SKU: RB-FT-4PK</div>
202
- </td>
203
- <td class="px-6 py-4 whitespace-nowrap">
204
- <div class="text-sm text-gray-900">Warehouse A → Warehouse B</div>
205
- <div class="text-sm text-gray-500">Stock redistribution</div>
206
- </td>
207
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
208
- Apr 23, 10:30 AM
209
- </td>
210
  <td class="px-6 py-4 whitespace-nowrap">
211
- <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">
212
- Completed
213
- </span>
214
  </td>
215
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
216
- <button class="text-indigo-600 hover:text-indigo-900">
217
- <i data-feather="eye" class="w-4 h-4"></i>
218
- </button>
219
  </td>
220
  </tr>
221
  <tr class="hover:bg-gray-50">
222
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
223
- TR-2023-0420
224
- </td>
225
- <td class="px-6 py-4">
226
- <div class="text-sm text-gray-900">Power Adapters (30)</div>
227
- <div class="text-sm text-gray-500">SKU: PWR-ADP-12</div>
228
- </td>
229
  <td class="px-6 py-4 whitespace-nowrap">
230
- <div class="text-sm text-gray-900">Production Line → Warehouse A</div>
231
- <div class="text-sm text-gray-500">Excess inventory</div>
232
  </td>
233
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
234
- Apr 20, 02:15 PM
235
  </td>
 
 
 
 
 
 
 
236
  <td class="px-6 py-4 whitespace-nowrap">
237
- <span class="px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-800">
238
- Cancelled
239
- </span>
240
  </td>
241
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
242
- <button class="text-indigo-600 hover:text-indigo-900">
243
- <i data-feather="eye" class="w-4 h-4"></i>
244
- </button>
245
  </td>
246
  </tr>
247
  </tbody>
248
  </table>
249
  </div>
250
- <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
251
- <div class="text-sm text-gray-500">
252
- Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">12</span> results
 
253
  </div>
254
- <div class="flex space-x-2">
255
- <button class="px-3 py-1 border rounded-lg text-gray-500 hover:bg-gray-50">
256
- Previous
257
- </button>
258
- <button class="px-3 py-1 bg-indigo-600 text-white rounded-lg">
259
- 1
260
- </button>
261
- <button class="px-3 py-1 border rounded-lg text-gray-500 hover:bg-gray-50">
262
- 2
263
- </button>
264
- <button class="px-3 py-1 border rounded-lg text-gray-500 hover:bg-gray-50">
265
- 3
266
- </button>
267
- <button class="px-3 py-1 border rounded-lg text-gray-500 hover:bg-gray-50">
268
- Next
269
- </button>
 
 
 
 
 
 
 
270
  </div>
271
  </div>
272
  </div>
 
40
  <a href="boms.html" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg mb-2">
41
  <i data-feather="layers" class="mr-3"></i> BOMs
42
  </a>
43
+ <a href="#" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg">
44
  <i data-feather="clipboard" class="mr-3"></i> Work Orders
45
  </a>
46
  </div>
 
96
  </div>
97
  </div>
98
 
99
+ <!-- Filters -->
100
+ <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
101
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
102
+ <div>
103
+ <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
104
+ <select class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
105
+ <option>All Statuses</option>
106
+ <option>Pending</option>
107
+ <option>In Transit</option>
108
+ <option>Completed</option>
109
+ <option>Cancelled</option>
110
+ </select>
111
+ </div>
112
+ <div>
113
+ <label class="block text-sm font-medium text-gray-700 mb-1">From Location</label>
114
+ <select class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
115
+ <option>All Locations</option>
116
+ <option>Warehouse A</option>
117
+ <option>Warehouse B</option>
118
+ <option>Production Line</option>
119
+ </select>
120
+ </div>
121
+ <div>
122
+ <label class="block text-sm font-medium text-gray-700 mb-1">To Location</label>
123
+ <select class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
124
+ <option>All Locations</option>
125
+ <option>Warehouse A</option>
126
+ <option>Warehouse B</option>
127
+ <option>Production Line</option>
128
+ </select>
129
+ </div>
130
+ <div class="flex items-end">
131
+ <button class="w-full px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
132
+ Apply Filters
133
+ </button>
134
+ </div>
135
  </div>
136
  </div>
137
 
 
141
  <table class="min-w-full divide-y divide-gray-200">
142
  <thead class="bg-gray-50">
143
  <tr>
144
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transfer ID</th>
145
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">From</th>
146
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">To</th>
147
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Items</th>
148
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
149
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
150
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
 
 
 
 
 
 
 
 
 
 
 
151
  </tr>
152
  </thead>
153
  <tbody class="bg-white divide-y divide-gray-200">
154
  <tr class="hover:bg-gray-50">
155
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">TR-2023-0452</td>
156
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Warehouse A</td>
157
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Production Line</td>
158
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3 items</td>
159
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 08:15 AM</td>
 
 
160
  <td class="px-6 py-4 whitespace-nowrap">
161
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">In Transit</span>
 
 
 
 
 
 
 
 
 
162
  </td>
163
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
164
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">View</a>
165
+ <a href="#" class="text-red-600 hover:text-red-900">Cancel</a>
 
 
 
 
166
  </td>
167
  </tr>
168
  <tr class="hover:bg-gray-50">
169
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">TR-2023-0451</td>
170
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Warehouse B</td>
171
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Warehouse A</td>
172
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12 items</td>
173
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 03:45 PM</td>
 
 
 
 
 
 
 
 
 
174
  <td class="px-6 py-4 whitespace-nowrap">
175
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
 
 
176
  </td>
177
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
178
+ <a href="#" class="text-indigo-600 hover:text-indigo-900">View</a>
 
 
 
 
 
179
  </td>
180
  </tr>
181
  <tr class="hover:bg-gray-50">
182
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">TR-2023-0450</td>
183
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Warehouse A</td>
184
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Warehouse B</td>
185
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5 items</td>
186
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 days ago</td>
 
 
 
 
 
 
 
 
 
187
  <td class="px-6 py-4 whitespace-nowrap">
188
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">Cancelled</span>
 
 
189
  </td>
190
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
191
+ <a href="#" class="text-indigo-600 hover:text-indigo-900">View</a>
 
 
192
  </td>
193
  </tr>
194
  <tr class="hover:bg-gray-50">
195
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">TR-2023-0449</td>
196
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Production Line</td>
197
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Warehouse A</td>
198
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8 items</td>
199
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3 days ago</td>
 
 
200
  <td class="px-6 py-4 whitespace-nowrap">
201
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
 
202
  </td>
203
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
204
+ <a href="#" class="text-indigo-600 hover:text-indigo-900">View</a>
205
  </td>
206
+ </tr>
207
+ <tr class="hover:bg-gray-50">
208
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">TR-2023-0448</td>
209
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Warehouse A</td>
210
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Production Line</td>
211
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 items</td>
212
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5 days ago</td>
213
  <td class="px-6 py-4 whitespace-nowrap">
214
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
 
 
215
  </td>
216
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
217
+ <a href="#" class="text-indigo-600 hover:text-indigo-900">View</a>
 
 
218
  </td>
219
  </tr>
220
  </tbody>
221
  </table>
222
  </div>
223
+ <div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200">
224
+ <div class="flex-1 flex justify-between sm:hidden">
225
+ <a href="#" 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">Previous</a>
226
+ <a href="#" class="ml-3 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">Next</a>
227
  </div>
228
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
229
+ <div>
230
+ <p class="text-sm text-gray-700">
231
+ Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">42</span> results
232
+ </p>
233
+ </div>
234
+ <div>
235
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
236
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
237
+ <span class="sr-only">Previous</span>
238
+ <i data-feather="chevron-left" class="h-5 w-5"></i>
239
+ </a>
240
+ <a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">1</a>
241
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">2</a>
242
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">3</a>
243
+ <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">...</span>
244
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">9</a>
245
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
246
+ <span class="sr-only">Next</span>
247
+ <i data-feather="chevron-right" class="h-5 w-5"></i>
248
+ </a>
249
+ </nav>
250
+ </div>
251
  </div>
252
  </div>
253
  </div>