Hugging Face's logo

Spaces:
bounsong
/
shopsync-pro-dashboard
Running

App Files Community
bounsong commited on
Commit
116e32d
·
verified ·
1 Parent(s): 145ecc0

inventory.html

Browse files
Files changed (2) hide show
  1. index.html +1 -1
  2. inventory.html +144 -0
index.html CHANGED
@@ -72,7 +72,7 @@
72
  <i data-feather="package" class="w-6 h-6 text-indigo-600 mb-2"></i>
73
  <span class="text-sm font-medium">Inventory</span>
74
  </a>
75
- <a href="/reports.html" class="bg-white rounded-lg shadow p-4 flex flex-col items-center justify-center hover:bg-indigo-50 transition-colors">
76
  <i data-feather="bar-chart-2" class="w-6 h-6 text-indigo-600 mb-2"></i>
77
  <span class="text-sm font-medium">Reports</span>
78
  </a>
 
72
  <i data-feather="package" class="w-6 h-6 text-indigo-600 mb-2"></i>
73
  <span class="text-sm font-medium">Inventory</span>
74
  </a>
75
+ <a href="/reports.html" class="bg-white rounded-lg shadow p-4 flex flex-col items-center justify-center hover:bg-indigo-50 transition-colors">
76
  <i data-feather="bar-chart-2" class="w-6 h-6 text-indigo-600 mb-2"></i>
77
  <span class="text-sm font-medium">Reports</span>
78
  </a>
inventory.html ADDED
@@ -0,0 +1,144 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>ShopSync Pro - Inventory</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ </head>
12
+ <body class="bg-gray-50">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <div class="container mx-auto px-4 py-8">
16
+ <div class="flex justify-between items-center mb-8">
17
+ <h1 class="text-2xl font-bold text-gray-800">Inventory Management</h1>
18
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
19
+ <i data-feather="plus" class="mr-2 w-4 h-4"></i>
20
+ Add Product
21
+ </button>
22
+ </div>
23
+
24
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
25
+ <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
26
+ <h3 class="text-lg font-medium">Product Inventory</h3>
27
+ <div class="relative">
28
+ <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
29
+ <input type="text" placeholder="Search products..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
30
+ </div>
31
+ </div>
32
+
33
+ <div class="overflow-x-auto">
34
+ <table class="min-w-full divide-y divide-gray-200">
35
+ <thead class="bg-gray-50">
36
+ <tr>
37
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
38
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">SKU</th>
39
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
40
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stock</th>
41
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
42
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
43
+ </tr>
44
+ </thead>
45
+ <tbody class="bg-white divide-y divide-gray-200">
46
+ <tr>
47
+ <td class="px-6 py-4 whitespace-nowrap">
48
+ <div class="flex items-center">
49
+ <div class="flex-shrink-0 h-10 w-10">
50
+ <img class="h-10 w-10 rounded-md" src="http://static.photos/retail/120x120/1" alt="">
51
+ </div>
52
+ <div class="ml-4">
53
+ <div class="text-sm font-medium text-gray-900">Wireless Headphones</div>
54
+ </div>
55
+ </div>
56
+ </td>
57
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">HP-001</td>
58
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Electronics</td>
59
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
60
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">In Stock (45)</span>
61
+ </td>
62
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$89.99</td>
63
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
64
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i data-feather="edit-2" class="w-4 h-4"></i></a>
65
+ <a href="#" class="text-red-600 hover:text-red-900"><i data-feather="trash-2" class="w-4 h-4"></i></a>
66
+ </td>
67
+ </tr>
68
+ <tr>
69
+ <td class="px-6 py-4 whitespace-nowrap">
70
+ <div class="flex items-center">
71
+ <div class="flex-shrink-0 h-10 w-10">
72
+ <img class="h-10 w-10 rounded-md" src="http://static.photos/retail/120x120/2" alt="">
73
+ </div>
74
+ <div class="ml-4">
75
+ <div class="text-sm font-medium text-gray-900">Bluetooth Speaker</div>
76
+ </div>
77
+ </div>
78
+ </td>
79
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SP-002</td>
80
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Electronics</td>
81
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
82
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Low Stock (3)</span>
83
+ </td>
84
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$59.99</td>
85
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
86
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i data-feather="edit-2" class="w-4 h-4"></i></a>
87
+ <a href="#" class="text-red-600 hover:text-red-900"><i data-feather="trash-2" class="w-4 h-4"></i></a>
88
+ </td>
89
+ </tr>
90
+ <tr>
91
+ <td class="px-6 py-4 whitespace-nowrap">
92
+ <div class="flex items-center">
93
+ <div class="flex-shrink-0 h-10 w-10">
94
+ <img class="h-10 w-10 rounded-md" src="http://static.photos/retail/120x120/3" alt="">
95
+ </div>
96
+ <div class="ml-4">
97
+ <div class="text-sm font-medium text-gray-900">Smart Watch</div>
98
+ </div>
99
+ </div>
100
+ </td>
101
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SW-003</td>
102
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Wearables</td>
103
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
104
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Out of Stock</span>
105
+ </td>
106
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$199.99</td>
107
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
108
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i data-feather="edit-2" class="w-4 h-4"></i></a>
109
+ <a href="#" class="text-red-600 hover:text-red-900"><i data-feather="trash-2" class="w-4 h-4"></i></a>
110
+ </td>
111
+ </tr>
112
+ </tbody>
113
+ </table>
114
+ </div>
115
+
116
+ <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
117
+ <div class="text-sm text-gray-500">
118
+ Showing <span class="font-medium">1</span> to <span class="font-medium">3</span> of <span class="font-medium">24</span> products
119
+ </div>
120
+ <div class="flex space-x-2">
121
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
122
+ Previous
123
+ </button>
124
+ <button class="px-3 py-1 border border-indigo-500 rounded-md text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
125
+ 1
126
+ </button>
127
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
128
+ Next
129
+ </button>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <custom-footer></custom-footer>
136
+
137
+ <script src="components/navbar.js"></script>
138
+ <script src="components/footer.js"></script>
139
+ <script src="script.js"></script>
140
+ <script>
141
+ feather.replace();
142
+ </script>
143
+ </body>
144
+ </html>