Hugging Face's logo

Spaces:
artsmithai
/
undefined
Running

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

greta, please keep developing the other pages, the BOM next

Browse files
Files changed (3) hide show
  1. boms.html +261 -0
  2. products.html +2 -2
  3. transfers.html +2 -2
boms.html ADDED
@@ -0,0 +1,261 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>BOMs | 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
+ .bom-card:hover {
14
+ transform: translateY(-3px);
15
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
16
+ }
17
+ </style>
18
+ </head>
19
+ <body class="bg-gray-50 font-sans text-gray-800">
20
+ <div class="flex h-screen overflow-hidden">
21
+ <!-- Sidebar -->
22
+ <div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0 hidden md:block">
23
+ <div class="p-4 border-b border-indigo-700">
24
+ <h1 class="text-2xl font-bold flex items-center">
25
+ <i data-feather="package" class="mr-2"></i> StockSync Pro
26
+ </h1>
27
+ </div>
28
+ <nav class="p-4">
29
+ <div class="mb-6">
30
+ <p class="text-xs uppercase text-indigo-300 mb-2">Dashboard</p>
31
+ <a href="index.html" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg mb-2">
32
+ <i data-feather="home" class="mr-3"></i> Overview
33
+ </a>
34
+ </div>
35
+ <div class="mb-6">
36
+ <p class="text-xs uppercase text-indigo-300 mb-2">Inventory</p>
37
+ <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">
38
+ <i data-feather="box" class="mr-3"></i> Products
39
+ </a>
40
+ <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">
41
+ <i data-feather="map-pin" class="mr-3"></i> Locations
42
+ </a>
43
+ <a href="transfers.html" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg">
44
+ <i data-feather="move" class="mr-3"></i> Transfers
45
+ </a>
46
+ </div>
47
+ <div class="mb-6">
48
+ <p class="text-xs uppercase text-indigo-300 mb-2">Manufacturing</p>
49
+ <a href="boms.html" class="flex items-center py-2 px-3 bg-indigo-700 rounded-lg text-white">
50
+ <i data-feather="layers" class="mr-3"></i> BOMs
51
+ </a>
52
+ <a href="#" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg">
53
+ <i data-feather="clipboard" class="mr-3"></i> Work Orders
54
+ </a>
55
+ </div>
56
+ <div class="mb-6">
57
+ <p class="text-xs uppercase text-indigo-300 mb-2">Reports</p>
58
+ <a href="#" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg mb-2">
59
+ <i data-feather="bar-chart-2" class="mr-3"></i> Analytics
60
+ </a>
61
+ <a href="#" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg">
62
+ <i data-feather="file-text" class="mr-3"></i> Inventory Report
63
+ </a>
64
+ </div>
65
+ </nav>
66
+ </div>
67
+
68
+ <!-- Main Content -->
69
+ <div class="flex-1 flex flex-col overflow-hidden">
70
+ <!-- Top Navigation -->
71
+ <header class="bg-white border-b border-gray-200 flex items-center justify-between px-6 py-4">
72
+ <button class="md:hidden text-gray-500">
73
+ <i data-feather="menu"></i>
74
+ </button>
75
+ <div class="flex-1 mx-4">
76
+ <div class="relative max-w-md">
77
+ <input type="text" placeholder="Search BOMs..."
78
+ class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
79
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
80
+ </div>
81
+ </div>
82
+ <div class="flex items-center space-x-4">
83
+ <button class="relative p-2 text-gray-500 hover:text-gray-700">
84
+ <i data-feather="bell"></i>
85
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
86
+ </button>
87
+ <div class="flex items-center">
88
+ <img src="http://static.photos/people/200x200/1" alt="User" class="h-8 w-8 rounded-full">
89
+ <span class="ml-2 text-sm font-medium hidden md:inline">Admin User</span>
90
+ </div>
91
+ </div>
92
+ </header>
93
+
94
+ <!-- Main Content Area -->
95
+ <main class="flex-1 overflow-y-auto p-6">
96
+ <div class="mb-6 flex justify-between items-center">
97
+ <h2 class="text-2xl font-bold text-gray-800">Bill of Materials</h2>
98
+ <div class="flex space-x-2">
99
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center">
100
+ <i data-feather="plus" class="mr-2"></i> New BOM
101
+ </button>
102
+ <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center">
103
+ <i data-feather="download" class="mr-2"></i> Export
104
+ </button>
105
+ </div>
106
+ </div>
107
+
108
+ <!-- BOM Cards -->
109
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
110
+ <!-- BOM 1 -->
111
+ <div class="bg-white rounded-xl shadow-sm p-6 bom-card transition-transform">
112
+ <div class="flex justify-between items-start mb-4">
113
+ <div>
114
+ <h3 class="text-lg font-semibold text-gray-900">Premium Widget Assembly</h3>
115
+ <p class="text-sm text-gray-500">BOM-2023-001</p>
116
+ </div>
117
+ <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">
118
+ Active
119
+ </span>
120
+ </div>
121
+ <div class="mb-4">
122
+ <p class="text-sm text-gray-700 mb-2">6 Components</p>
123
+ <div class="space-y-2">
124
+ <div class="flex items-center text-sm">
125
+ <span class="w-4 h-4 mr-2 bg-indigo-100 rounded-full flex items-center justify-center">
126
+ <i data-feather="box" class="w-2 h-2 text-indigo-600"></i>
127
+ </span>
128
+ Premium Casing (1)
129
+ </div>
130
+ <div class="flex items-center text-sm">
131
+ <span class="w-4 h-4 mr-2 bg-indigo-100 rounded-full flex items-center justify-center">
132
+ <i data-feather="box" class="w-2 h-2 text-indigo-600"></i>
133
+ </span>
134
+ Circuit Board (1)
135
+ </div>
136
+ <div class="flex items-center text-sm">
137
+ <span class="w-4 h-4 mr-2 bg-indigo-100 rounded-full flex items-center justify-center">
138
+ <i data-feather="box" class="w-2 h-2 text-indigo-600"></i>
139
+ </span>
140
+ LCD Display (1)
141
+ </div>
142
+ <div class="text-xs text-gray-500 mt-1">+3 more components</div>
143
+ </div>
144
+ </div>
145
+ <div class="flex justify-between items-center text-sm">
146
+ <div class="text-gray-500">Last updated: 2 days ago</div>
147
+ <div class="flex space-x-2">
148
+ <button class="text-indigo-600 hover:text-indigo-900">
149
+ <i data-feather="edit" class="w-4 h-4"></i>
150
+ </button>
151
+ <button class="text-gray-500 hover:text-gray-700">
152
+ <i data-feather="eye" class="w-4 h-4"></i>
153
+ </button>
154
+ </div>
155
+ </div>
156
+ </div>
157
+
158
+ <!-- BOM 2 -->
159
+ <div class="bg-white rounded-xl shadow-sm p-6 bom-card transition-transform">
160
+ <div class="flex justify-between items-start mb-4">
161
+ <div>
162
+ <h3 class="text-lg font-semibold text-gray-900">Basic Widget Assembly</h3>
163
+ <p class="text-sm text-gray-500">BOM-2023-002</p>
164
+ </div>
165
+ <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">
166
+ Active
167
+ </span>
168
+ </div>
169
+ <div class="mb-4">
170
+ <p class="text-sm text-gray-700 mb-2">4 Components</p>
171
+ <div class="space-y-2">
172
+ <div class="flex items-center text-sm">
173
+ <span class="w-4 h-4 mr-2 bg-indigo-100 rounded-full flex items-center justify-center">
174
+ <i data-feather="box" class="w-2 h-2 text-indigo-600"></i>
175
+ </span>
176
+ Basic Casing (1)
177
+ </div>
178
+ <div class="flex items-center text-sm">
179
+ <span class="w-4 h-4 mr-2 bg-indigo-100 rounded-full flex items-center justify-center">
180
+ <i data-feather="box" class="w-2 h-2 text-indigo-600"></i>
181
+ </span>
182
+ Circuit Board (1)
183
+ </div>
184
+ <div class="flex items-center text-sm">
185
+ <span class="w-4 h-4 mr-2 bg-indigo-100 rounded-full flex items-center justify-center">
186
+ <i data-feather="box" class="w-2 h-2 text-indigo-600"></i>
187
+ </span>
188
+ Power Adapter (1)
189
+ </div>
190
+ </div>
191
+ </div>
192
+ <div class="flex justify-between items-center text-sm">
193
+ <div class="text-gray-500">Last updated: 1 week ago</div>
194
+ <div class="flex space-x-2">
195
+ <button class="text-indigo-600 hover:text-indigo-900">
196
+ <i data-feather="edit" class="w-4 h-4"></i>
197
+ </button>
198
+ <button class="text-gray-500 hover:text-gray-700">
199
+ <i data-feather="eye" class="w-4 h-4"></i>
200
+ </button>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- BOM 3 -->
206
+ <div class="bg-white rounded-xl shadow-sm p-6 bom-card transition-transform">
207
+ <div class="flex justify-between items-start mb-4">
208
+ <div>
209
+ <h3 class="text-lg font-semibold text-gray-900">Deluxe Widget Assembly</h3>
210
+ <p class="text-sm text-gray-500">BOM-2023-003</p>
211
+ </div>
212
+ <span class="px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800">
213
+ Draft
214
+ </span>
215
+ </div>
216
+ <div class="mb-4">
217
+ <p class="text-sm text-gray-700 mb-2">8 Components</p>
218
+ <div class="space-y-2">
219
+ <div class="flex items-center text-sm">
220
+ <span class="w-4 h-4 mr-2 bg-indigo-100 rounded-full flex items-center justify-center">
221
+ <i data-feather="box" class="w-2 h-2 text-indigo-600"></i>
222
+ </span>
223
+ Aluminum Casing (1)
224
+ </div>
225
+ <div class="flex items-center text-sm">
226
+ <span class="w-4 h-4 mr-2 bg-indigo-100 rounded-full flex items-center justify-center">
227
+ <i data-feather="box" class="w-2 h-2 text-indigo-600"></i>
228
+ </span>
229
+ Premium Circuit Board (1)
230
+ </div>
231
+ <div class="flex items-center text-sm">
232
+ <span class="w-4 h-4 mr-2 bg-indigo-100 rounded-full flex items-center justify-center">
233
+ <i data-feather="box" class="w-2 h-2 text-indigo-600"></i>
234
+ </span>
235
+ Touchscreen Display (1)
236
+ </div>
237
+ <div class="text-xs text-gray-500 mt-1">+5 more components</div>
238
+ </div>
239
+ </div>
240
+ <div class="flex justify-between items-center text-sm">
241
+ <div class="text-gray-500">Last updated: 3 days ago</div>
242
+ <div class="flex space-x-2">
243
+ <button class="text-indigo-600 hover:text-indigo-900">
244
+ <i data-feather="edit" class="w-4 h-4"></i>
245
+ </button>
246
+ <button class="text-gray-500 hover:text-gray-700">
247
+ <i data-feather="eye" class="w-4 h-4"></i>
248
+ </button>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </main>
254
+ </div>
255
+ </div>
256
+
257
+ <script>
258
+ feather.replace();
259
+ </script>
260
+ </body>
261
+ </html>
products.html CHANGED
@@ -52,10 +52,10 @@
52
  </div>
53
  <div class="mb-6">
54
  <p class="text-xs uppercase text-indigo-300 mb-2">Manufacturing</p>
55
- <a href="#" 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>
 
52
  </div>
53
  <div class="mb-6">
54
  <p class="text-xs uppercase text-indigo-300 mb-2">Manufacturing</p>
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>
transfers.html CHANGED
@@ -37,10 +37,10 @@
37
  </div>
38
  <div class="mb-6">
39
  <p class="text-xs uppercase text-indigo-300 mb-2">Manufacturing</p>
40
- <a href="#" 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>
 
37
  </div>
38
  <div class="mb-6">
39
  <p class="text-xs uppercase text-indigo-300 mb-2">Manufacturing</p>
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>