Hugging Face's logo

Spaces:
gtkh
/
test
Running

App Files Community
gtkh commited on
Commit
a72a3ca
·
verified ·
1 Parent(s): 9185f96

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1352 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test
3
- emoji: 🦀
4
- colorFrom: purple
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: test
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1352 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Advanced Cash Register System</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ .sidebar {
12
+ transition: all 0.3s ease;
13
+ }
14
+ .product-card:hover {
15
+ transform: translateY(-5px);
16
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
17
+ }
18
+ .receipt-item:hover {
19
+ background-color: #f3f4f6;
20
+ }
21
+ .modal {
22
+ transition: opacity 0.3s ease;
23
+ }
24
+ .tabs-container {
25
+ scrollbar-width: none;
26
+ }
27
+ .tabs-container::-webkit-scrollbar {
28
+ display: none;
29
+ }
30
+ @keyframes pulse {
31
+ 0%, 100% {
32
+ opacity: 1;
33
+ }
34
+ 50% {
35
+ opacity: 0.5;
36
+ }
37
+ }
38
+ .animate-pulse {
39
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-gray-100 font-sans">
44
+ <div class="flex h-screen overflow-hidden">
45
+ <!-- Sidebar -->
46
+ <div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0 flex flex-col">
47
+ <div class="p-4 flex items-center justify-between border-b border-indigo-700">
48
+ <h1 class="text-2xl font-bold">Cash Register</h1>
49
+ <button id="sidebarToggle" class="md:hidden text-white">
50
+ <i class="fas fa-bars"></i>
51
+ </button>
52
+ </div>
53
+ <nav class="flex-1 overflow-y-auto">
54
+ <div class="p-4">
55
+ <button id="posTab" class="w-full flex items-center space-x-3 p-3 rounded-lg bg-indigo-900 text-white mb-2">
56
+ <i class="fas fa-cash-register"></i>
57
+ <span>Point of Sale</span>
58
+ </button>
59
+ <button id="productsTab" class="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 text-white mb-2">
60
+ <i class="fas fa-boxes"></i>
61
+ <span>Products</span>
62
+ </button>
63
+ <button id="inventoryTab" class="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 text-white mb-2">
64
+ <i class="fas fa-warehouse"></i>
65
+ <span>Inventory</span>
66
+ </button>
67
+ <button id="salesTab" class="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 text-white mb-2">
68
+ <i class="fas fa-chart-line"></i>
69
+ <span>Sales Reports</span>
70
+ </button>
71
+ <button id="settingsTab" class="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 text-white">
72
+ <i class="fas fa-cog"></i>
73
+ <span>Settings</span>
74
+ </button>
75
+ </div>
76
+ </nav>
77
+ <div class="p-4 border-t border-indigo-700">
78
+ <div class="flex items-center space-x-3">
79
+ <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center">
80
+ <i class="fas fa-user"></i>
81
+ </div>
82
+ <div>
83
+ <div class="font-medium" id="usernameDisplay">Admin</div>
84
+ <div class="text-xs text-indigo-300">Logged In</div>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Main Content -->
91
+ <div class="flex-1 flex flex-col overflow-hidden">
92
+ <!-- Header -->
93
+ <header class="bg-white shadow-sm p-4 flex items-center justify-between">
94
+ <h2 class="text-xl font-semibold text-gray-800" id="currentTabTitle">Point of Sale</h2>
95
+ <div class="flex items-center space-x-4">
96
+ <div class="relative">
97
+ <button id="notificationsBtn" class="text-gray-600 hover:text-indigo-600">
98
+ <i class="fas fa-bell"></i>
99
+ <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
100
+ </button>
101
+ </div>
102
+ <div class="relative">
103
+ <button id="syncBtn" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 flex items-center space-x-2">
104
+ <i class="fas fa-sync-alt"></i>
105
+ <span>Sync with Google</span>
106
+ </button>
107
+ <div id="syncStatus" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10">
108
+ <div class="px-4 py-2 text-sm text-gray-700">Last sync: <span id="lastSyncTime">Never</span></div>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </header>
113
+
114
+ <!-- Tab Content -->
115
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
116
+ <!-- POS Tab -->
117
+ <div id="posContent" class="tab-content">
118
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
119
+ <!-- Product Selection -->
120
+ <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6">
121
+ <div class="flex justify-between items-center mb-6">
122
+ <h3 class="text-lg font-semibold text-gray-800">Products</h3>
123
+ <div class="relative w-64">
124
+ <input type="text" id="productSearch" placeholder="Search products..." class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
125
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Categories -->
130
+ <div class="mb-6 overflow-x-auto tabs-container">
131
+ <div class="flex space-x-2 pb-2">
132
+ <button class="category-btn px-4 py-2 bg-indigo-600 text-white rounded-lg whitespace-nowrap">All</button>
133
+ <button class="category-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 whitespace-nowrap">Electronics</button>
134
+ <button class="category-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 whitespace-nowrap">Groceries</button>
135
+ <button class="category-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 whitespace-nowrap">Clothing</button>
136
+ <button class="category-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 whitespace-nowrap">Home Goods</button>
137
+ </div>
138
+ </div>
139
+
140
+ <!-- Product Grid -->
141
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" id="productGrid">
142
+ <!-- Product cards will be dynamically inserted here -->
143
+ <div class="product-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm cursor-pointer transition-all duration-300">
144
+ <div class="h-32 bg-gray-100 flex items-center justify-center">
145
+ <i class="fas fa-box-open text-4xl text-gray-400"></i>
146
+ </div>
147
+ <div class="p-3">
148
+ <h4 class="font-medium text-gray-800 truncate">Sample Product</h4>
149
+ <div class="flex justify-between items-center mt-2">
150
+ <span class="text-indigo-600 font-semibold">$19.99</span>
151
+ <button class="bg-indigo-600 text-white p-1 rounded-full hover:bg-indigo-700">
152
+ <i class="fas fa-plus"></i>
153
+ </button>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+
160
+ <!-- Cart and Checkout -->
161
+ <div class="bg-white rounded-xl shadow-sm p-6">
162
+ <div class="flex justify-between items-center mb-6">
163
+ <h3 class="text-lg font-semibold text-gray-800">Current Sale</h3>
164
+ <button id="clearCartBtn" class="text-red-500 hover:text-red-700 text-sm flex items-center">
165
+ <i class="fas fa-trash-alt mr-1"></i> Clear
166
+ </button>
167
+ </div>
168
+
169
+ <!-- Receipt Items -->
170
+ <div class="mb-4 max-h-96 overflow-y-auto" id="receiptItems">
171
+ <!-- Receipt items will be dynamically inserted here -->
172
+ <div class="receipt-item flex justify-between items-center py-3 px-2 border-b border-gray-100 transition-colors duration-200">
173
+ <div>
174
+ <div class="font-medium">Sample Product</div>
175
+ <div class="text-sm text-gray-500">1 x $19.99</div>
176
+ </div>
177
+ <div class="flex items-center">
178
+ <span class="font-semibold mr-4">$19.99</span>
179
+ <button class="text-red-500 hover:text-red-700">
180
+ <i class="fas fa-times"></i>
181
+ </button>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Totals -->
187
+ <div class="border-t border-gray-200 pt-4 mb-4">
188
+ <div class="flex justify-between mb-2">
189
+ <span class="text-gray-600">Subtotal:</span>
190
+ <span class="font-semibold" id="subtotal">$0.00</span>
191
+ </div>
192
+ <div class="flex justify-between mb-2">
193
+ <span class="text-gray-600">Tax (10%):</span>
194
+ <span class="font-semibold" id="tax">$0.00</span>
195
+ </div>
196
+ <div class="flex justify-between text-lg font-bold">
197
+ <span>Total:</span>
198
+ <span id="total">$0.00</span>
199
+ </div>
200
+ </div>
201
+
202
+ <!-- Payment Methods -->
203
+ <div class="mb-6">
204
+ <h4 class="text-sm font-semibold text-gray-600 mb-2">PAYMENT METHOD</h4>
205
+ <div class="grid grid-cols-3 gap-2">
206
+ <button class="payment-method-btn bg-indigo-100 text-indigo-800 py-2 rounded-lg hover:bg-indigo-200">Cash</button>
207
+ <button class="payment-method-btn bg-gray-100 text-gray-800 py-2 rounded-lg hover:bg-gray-200">Card</button>
208
+ <button class="payment-method-btn bg-gray-100 text-gray-800 py-2 rounded-lg hover:bg-gray-200">Mobile</button>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Complete Sale Button -->
213
+ <button id="completeSaleBtn" class="w-full bg-green-600 text-white py-3 rounded-lg hover:bg-green-700 font-semibold flex items-center justify-center space-x-2">
214
+ <i class="fas fa-check-circle"></i>
215
+ <span>Complete Sale ($0.00)</span>
216
+ </button>
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- Products Management Tab -->
222
+ <div id="productsContent" class="tab-content hidden">
223
+ <div class="bg-white rounded-xl shadow-sm p-6">
224
+ <div class="flex justify-between items-center mb-6">
225
+ <h3 class="text-lg font-semibold text-gray-800">Product Management</h3>
226
+ <button id="addProductBtn" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 flex items-center space-x-2">
227
+ <i class="fas fa-plus"></i>
228
+ <span>Add Product</span>
229
+ </button>
230
+ </div>
231
+
232
+ <!-- Product Table -->
233
+ <div class="overflow-x-auto">
234
+ <table class="min-w-full divide-y divide-gray-200">
235
+ <thead class="bg-gray-50">
236
+ <tr>
237
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Image</th>
238
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
239
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">SKU</th>
240
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
241
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stock</th>
242
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
243
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
244
+ </tr>
245
+ </thead>
246
+ <tbody class="bg-white divide-y divide-gray-200" id="productTableBody">
247
+ <!-- Product rows will be dynamically inserted here -->
248
+ <tr>
249
+ <td class="px-6 py-4 whitespace-nowrap">
250
+ <div class="w-10 h-10 bg-gray-200 rounded flex items-center justify-center">
251
+ <i class="fas fa-box text-gray-500"></i>
252
+ </div>
253
+ </td>
254
+ <td class="px-6 py-4 whitespace-nowrap">
255
+ <div class="text-sm font-medium text-gray-900">Sample Product</div>
256
+ </td>
257
+ <td class="px-6 py-4 whitespace-nowrap">
258
+ <div class="text-sm text-gray-500">SKU123</div>
259
+ </td>
260
+ <td class="px-6 py-4 whitespace-nowrap">
261
+ <div class="text-sm text-gray-900">$19.99</div>
262
+ </td>
263
+ <td class="px-6 py-4 whitespace-nowrap">
264
+ <div class="text-sm text-gray-900">25</div>
265
+ </td>
266
+ <td class="px-6 py-4 whitespace-nowrap">
267
+ <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Electronics</span>
268
+ </td>
269
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
270
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">
271
+ <i class="fas fa-edit"></i>
272
+ </button>
273
+ <button class="text-red-600 hover:text-red-900">
274
+ <i class="fas fa-trash-alt"></i>
275
+ </button>
276
+ </td>
277
+ </tr>
278
+ </tbody>
279
+ </table>
280
+ </div>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Inventory Tab -->
285
+ <div id="inventoryContent" class="tab-content hidden">
286
+ <div class="bg-white rounded-xl shadow-sm p-6">
287
+ <div class="flex justify-between items-center mb-6">
288
+ <h3 class="text-lg font-semibold text-gray-800">Inventory Management</h3>
289
+ <div class="flex space-x-3">
290
+ <button id="exportInventoryBtn" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 flex items-center space-x-2">
291
+ <i class="fas fa-file-export"></i>
292
+ <span>Export</span>
293
+ </button>
294
+ <button id="importInventoryBtn" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 flex items-center space-x-2">
295
+ <i class="fas fa-file-import"></i>
296
+ <span>Import</span>
297
+ </button>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- Inventory Stats -->
302
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
303
+ <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
304
+ <div class="flex justify-between items-start">
305
+ <div>
306
+ <p class="text-sm text-blue-600">Total Products</p>
307
+ <h3 class="text-2xl font-bold text-blue-900">125</h3>
308
+ </div>
309
+ <div class="bg-blue-100 p-2 rounded-lg">
310
+ <i class="fas fa-boxes text-blue-600"></i>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ <div class="bg-green-50 p-4 rounded-lg border border-green-100">
315
+ <div class="flex justify-between items-start">
316
+ <div>
317
+ <p class="text-sm text-green-600">In Stock Items</p>
318
+ <h3 class="text-2xl font-bold text-green-900">98</h3>
319
+ </div>
320
+ <div class="bg-green-100 p-2 rounded-lg">
321
+ <i class="fas fa-check-circle text-green-600"></i>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ <div class="bg-red-50 p-4 rounded-lg border border-red-100">
326
+ <div class="flex justify-between items-start">
327
+ <div>
328
+ <p class="text-sm text-red-600">Out of Stock</p>
329
+ <h3 class="text-2xl font-bold text-red-900">27</h3>
330
+ </div>
331
+ <div class="bg-red-100 p-2 rounded-lg">
332
+ <i class="fas fa-exclamation-circle text-red-600"></i>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </div>
337
+
338
+ <!-- Inventory Table -->
339
+ <div class="overflow-x-auto">
340
+ <table class="min-w-full divide-y divide-gray-200">
341
+ <thead class="bg-gray-50">
342
+ <tr>
343
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
344
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">SKU</th>
345
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Current Stock</th>
346
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Low Stock Alert</th>
347
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Updated</th>
348
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
349
+ </tr>
350
+ </thead>
351
+ <tbody class="bg-white divide-y divide-gray-200" id="inventoryTableBody">
352
+ <!-- Inventory rows will be dynamically inserted here -->
353
+ <tr>
354
+ <td class="px-6 py-4 whitespace-nowrap">
355
+ <div class="flex items-center">
356
+ <div class="flex-shrink-0 h-10 w-10 bg-gray-200 rounded flex items-center justify-center">
357
+ <i class="fas fa-box text-gray-500"></i>
358
+ </div>
359
+ <div class="ml-4">
360
+ <div class="text-sm font-medium text-gray-900">Sample Product</div>
361
+ <div class="text-sm text-gray-500">Electronics</div>
362
+ </div>
363
+ </div>
364
+ </td>
365
+ <td class="px-6 py-4 whitespace-nowrap">
366
+ <div class="text-sm text-gray-900">SKU123</div>
367
+ </td>
368
+ <td class="px-6 py-4 whitespace-nowrap">
369
+ <div class="text-sm text-gray-900">25</div>
370
+ </td>
371
+ <td class="px-6 py-4 whitespace-nowrap">
372
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">In Stock</span>
373
+ </td>
374
+ <td class="px-6 py-4 whitespace-nowrap">
375
+ <div class="text-sm text-gray-500">2023-06-15</div>
376
+ </td>
377
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
378
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">
379
+ <i class="fas fa-edit"></i>
380
+ </button>
381
+ <button class="text-red-600 hover:text-red-900">
382
+ <i class="fas fa-trash-alt"></i>
383
+ </button>
384
+ </td>
385
+ </tr>
386
+ </tbody>
387
+ </table>
388
+ </div>
389
+ </div>
390
+ </div>
391
+
392
+ <!-- Sales Reports Tab -->
393
+ <div id="salesContent" class="tab-content hidden">
394
+ <div class="bg-white rounded-xl shadow-sm p-6">
395
+ <div class="flex justify-between items-center mb-6">
396
+ <h3 class="text-lg font-semibold text-gray-800">Sales Reports</h3>
397
+ <div class="flex space-x-3">
398
+ <div class="relative">
399
+ <select id="reportPeriod" class="appearance-none bg-gray-100 border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
400
+ <option>Today</option>
401
+ <option>This Week</option>
402
+ <option>This Month</option>
403
+ <option>This Year</option>
404
+ <option>Custom Range</option>
405
+ </select>
406
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
407
+ <i class="fas fa-chevron-down"></i>
408
+ </div>
409
+ </div>
410
+ <button id="exportReportBtn" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 flex items-center space-x-2">
411
+ <i class="fas fa-file-export"></i>
412
+ <span>Export</span>
413
+ </button>
414
+ </div>
415
+ </div>
416
+
417
+ <!-- Sales Stats -->
418
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
419
+ <div class="bg-purple-50 p-4 rounded-lg border border-purple-100">
420
+ <div class="flex justify-between items-start">
421
+ <div>
422
+ <p class="text-sm text-purple-600">Total Sales</p>
423
+ <h3 class="text-2xl font-bold text-purple-900">$12,345.67</h3>
424
+ </div>
425
+ <div class="bg-purple-100 p-2 rounded-lg">
426
+ <i class="fas fa-dollar-sign text-purple-600"></i>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
431
+ <div class="flex justify-between items-start">
432
+ <div>
433
+ <p class="text-sm text-blue-600">Transactions</p>
434
+ <h3 class="text-2xl font-bold text-blue-900">87</h3>
435
+ </div>
436
+ <div class="bg-blue-100 p-2 rounded-lg">
437
+ <i class="fas fa-receipt text-blue-600"></i>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ <div class="bg-green-50 p-4 rounded-lg border border-green-100">
442
+ <div class="flex justify-between items-start">
443
+ <div>
444
+ <p class="text-sm text-green-600">Avg. Sale</p>
445
+ <h3 class="text-2xl font-bold text-green-900">$141.90</h3>
446
+ </div>
447
+ <div class="bg-green-100 p-2 rounded-lg">
448
+ <i class="fas fa-chart-bar text-green-600"></i>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ <div class="bg-orange-50 p-4 rounded-lg border border-orange-100">
453
+ <div class="flex justify-between items-start">
454
+ <div>
455
+ <p class="text-sm text-orange-600">Items Sold</p>
456
+ <h3 class="text-2xl font-bold text-orange-900">256</h3>
457
+ </div>
458
+ <div class="bg-orange-100 p-2 rounded-lg">
459
+ <i class="fas fa-shopping-cart text-orange-600"></i>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ </div>
464
+
465
+ <!-- Charts -->
466
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
467
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
468
+ <h4 class="text-md font-semibold text-gray-800 mb-4">Sales Over Time</h4>
469
+ <canvas id="salesChart" height="250"></canvas>
470
+ </div>
471
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
472
+ <h4 class="text-md font-semibold text-gray-800 mb-4">Top Selling Products</h4>
473
+ <canvas id="productsChart" height="250"></canvas>
474
+ </div>
475
+ </div>
476
+
477
+ <!-- Sales Table -->
478
+ <div class="overflow-x-auto">
479
+ <table class="min-w-full divide-y divide-gray-200">
480
+ <thead class="bg-gray-50">
481
+ <tr>
482
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
483
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction ID</th>
484
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Items</th>
485
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Payment Method</th>
486
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
487
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
488
+ </tr>
489
+ </thead>
490
+ <tbody class="bg-white divide-y divide-gray-200" id="salesTableBody">
491
+ <!-- Sales rows will be dynamically inserted here -->
492
+ <tr>
493
+ <td class="px-6 py-4 whitespace-nowrap">
494
+ <div class="text-sm text-gray-900">2023-06-15</div>
495
+ <div class="text-sm text-gray-500">10:45 AM</div>
496
+ </td>
497
+ <td class="px-6 py-4 whitespace-nowrap">
498
+ <div class="text-sm font-medium text-indigo-600">TXN-20230615-001</div>
499
+ </td>
500
+ <td class="px-6 py-4 whitespace-nowrap">
501
+ <div class="text-sm text-gray-900">3 items</div>
502
+ </td>
503
+ <td class="px-6 py-4 whitespace-nowrap">
504
+ <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Card</span>
505
+ </td>
506
+ <td class="px-6 py-4 whitespace-nowrap">
507
+ <div class="text-sm font-semibold text-gray-900">$87.50</div>
508
+ </td>
509
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
510
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">
511
+ <i class="fas fa-receipt"></i>
512
+ </button>
513
+ <button class="text-red-600 hover:text-red-900">
514
+ <i class="fas fa-trash-alt"></i>
515
+ </button>
516
+ </td>
517
+ </tr>
518
+ </tbody>
519
+ </table>
520
+ </div>
521
+ </div>
522
+ </div>
523
+
524
+ <!-- Settings Tab -->
525
+ <div id="settingsContent" class="tab-content hidden">
526
+ <div class="bg-white rounded-xl shadow-sm p-6">
527
+ <h3 class="text-lg font-semibold text-gray-800 mb-6">System Settings</h3>
528
+
529
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
530
+ <!-- General Settings -->
531
+ <div class="lg:col-span-2">
532
+ <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 mb-6">
533
+ <h4 class="text-md font-semibold text-gray-800 mb-4">General Settings</h4>
534
+
535
+ <div class="space-y-4">
536
+ <div>
537
+ <label class="block text-sm font-medium text-gray-700 mb-1">Business Name</label>
538
+ <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" value="My Retail Store">
539
+ </div>
540
+
541
+ <div>
542
+ <label class="block text-sm font-medium text-gray-700 mb-1">Currency</label>
543
+ <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
544
+ <option>USD ($)</option>
545
+ <option>EUR (€)</option>
546
+ <option>GBP (£)</option>
547
+ <option>JPY (¥)</option>
548
+ </select>
549
+ </div>
550
+
551
+ <div>
552
+ <label class="block text-sm font-medium text-gray-700 mb-1">Tax Rate (%)</label>
553
+ <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" value="10">
554
+ </div>
555
+
556
+ <div>
557
+ <label class="block text-sm font-medium text-gray-700 mb-1">Receipt Footer</label>
558
+ <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" rows="3">Thank you for shopping with us!</textarea>
559
+ </div>
560
+ </div>
561
+ </div>
562
+
563
+ <!-- Google Sheets Integration -->
564
+ <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
565
+ <h4 class="text-md font-semibold text-gray-800 mb-4">Google Sheets Integration</h4>
566
+
567
+ <div class="space-y-4">
568
+ <div>
569
+ <label class="block text-sm font-medium text-gray-700 mb-1">Google Sheet ID</label>
570
+ <input type="text" id="sheetId" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Enter your Google Sheet ID">
571
+ </div>
572
+
573
+ <div>
574
+ <label class="block text-sm font-medium text-gray-700 mb-1">Sync Frequency</label>
575
+ <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
576
+ <option>Manual</option>
577
+ <option>Every 15 minutes</option>
578
+ <option>Every hour</option>
579
+ <option>Every day</option>
580
+ </select>
581
+ </div>
582
+
583
+ <div class="pt-2">
584
+ <button id="testConnectionBtn" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 flex items-center space-x-2">
585
+ <i class="fas fa-plug"></i>
586
+ <span>Test Connection</span>
587
+ </button>
588
+ </div>
589
+ </div>
590
+ </div>
591
+ </div>
592
+
593
+ <!-- User Management -->
594
+ <div>
595
+ <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
596
+ <h4 class="text-md font-semibold text-gray-800 mb-4">User Management</h4>
597
+
598
+ <div class="space-y-4">
599
+ <div>
600
+ <label class="block text-sm font-medium text-gray-700 mb-1">Current User</label>
601
+ <div class="flex items-center space-x-3 p-3 bg-white border border-gray-200 rounded-lg">
602
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center">
603
+ <i class="fas fa-user text-indigo-600"></i>
604
+ </div>
605
+ <div>
606
+ <div class="font-medium">Admin User</div>
607
+ <div class="text-xs text-gray-500">Administrator</div>
608
+ </div>
609
+ </div>
610
+ </div>
611
+
612
+ <div>
613
+ <label class="block text-sm font-medium text-gray-700 mb-1">Change Password</label>
614
+ <input type="password" placeholder="Current password" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 mb-2">
615
+ <input type="password" placeholder="New password" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 mb-2">
616
+ <input type="password" placeholder="Confirm new password" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
617
+ </div>
618
+
619
+ <div class="pt-2">
620
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 w-full">
621
+ Update Password
622
+ </button>
623
+ </div>
624
+ </div>
625
+ </div>
626
+
627
+ <!-- Backup & Restore -->
628
+ <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 mt-6">
629
+ <h4 class="text-md font-semibold text-gray-800 mb-4">Backup & Restore</h4>
630
+
631
+ <div class="space-y-4">
632
+ <button class="w-full bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 flex items-center justify-center space-x-2">
633
+ <i class="fas fa-download"></i>
634
+ <span>Create Backup</span>
635
+ </button>
636
+
637
+ <button class="w-full bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 flex items-center justify-center space-x-2">
638
+ <i class="fas fa-upload"></i>
639
+ <span>Restore Backup</span>
640
+ </button>
641
+
642
+ <button class="w-full bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 flex items-center justify-center space-x-2">
643
+ <i class="fas fa-trash-alt"></i>
644
+ <span>Reset System</span>
645
+ </button>
646
+ </div>
647
+ </div>
648
+ </div>
649
+ </div>
650
+ </div>
651
+ </div>
652
+ </main>
653
+ </div>
654
+ </div>
655
+
656
+ <!-- Add Product Modal -->
657
+ <div id="addProductModal" class="modal fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden z-50">
658
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl">
659
+ <div class="p-6">
660
+ <div class="flex justify-between items-center mb-4">
661
+ <h3 class="text-xl font-semibold text-gray-800">Add New Product</h3>
662
+ <button id="closeAddProductModal" class="text-gray-500 hover:text-gray-700">
663
+ <i class="fas fa-times"></i>
664
+ </button>
665
+ </div>
666
+
667
+ <div class="space-y-4">
668
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
669
+ <div>
670
+ <label class="block text-sm font-medium text-gray-700 mb-1">Product Name</label>
671
+ <input type="text" id="productName" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
672
+ </div>
673
+
674
+ <div>
675
+ <label class="block text-sm font-medium text-gray-700 mb-1">SKU</label>
676
+ <input type="text" id="productSKU" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
677
+ </div>
678
+ </div>
679
+
680
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
681
+ <div>
682
+ <label class="block text-sm font-medium text-gray-700 mb-1">Price</label>
683
+ <input type="number" id="productPrice" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
684
+ </div>
685
+
686
+ <div>
687
+ <label class="block text-sm font-medium text-gray-700 mb-1">Cost</label>
688
+ <input type="number" id="productCost" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
689
+ </div>
690
+
691
+ <div>
692
+ <label class="block text-sm font-medium text-gray-700 mb-1">Initial Stock</label>
693
+ <input type="number" id="productStock" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
694
+ </div>
695
+ </div>
696
+
697
+ <div>
698
+ <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
699
+ <select id="productCategory" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
700
+ <option value="">Select a category</option>
701
+ <option>Electronics</option>
702
+ <option>Groceries</option>
703
+ <option>Clothing</option>
704
+ <option>Home Goods</option>
705
+ <option>Other</option>
706
+ </select>
707
+ </div>
708
+
709
+ <div>
710
+ <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
711
+ <textarea id="productDescription" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" rows="3"></textarea>
712
+ </div>
713
+
714
+ <div>
715
+ <label class="block text-sm font-medium text-gray-700 mb-1">Product Image</label>
716
+ <div class="mt-1 flex items-center">
717
+ <span class="inline-block h-24 w-24 rounded-full overflow-hidden bg-gray-100">
718
+ <svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
719
+ <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
720
+ </svg>
721
+ </span>
722
+ <button type="button" class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-lg shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
723
+ Upload Image
724
+ </button>
725
+ </div>
726
+ </div>
727
+ </div>
728
+
729
+ <div class="mt-6 flex justify-end space-x-3">
730
+ <button id="cancelAddProduct" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
731
+ Cancel
732
+ </button>
733
+ <button id="saveProduct" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
734
+ Save Product
735
+ </button>
736
+ </div>
737
+ </div>
738
+ </div>
739
+ </div>
740
+
741
+ <!-- Receipt Modal -->
742
+ <div id="receiptModal" class="modal fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden z-50">
743
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
744
+ <div class="p-6">
745
+ <div class="flex justify-between items-center mb-4">
746
+ <h3 class="text-xl font-semibold text-gray-800">Sale Receipt</h3>
747
+ <button id="closeReceiptModal" class="text-gray-500 hover:text-gray-700">
748
+ <i class="fas fa-times"></i>
749
+ </button>
750
+ </div>
751
+
752
+ <div class="text-center mb-6">
753
+ <div class="text-lg font-bold">MY RETAIL STORE</div>
754
+ <div class="text-sm text-gray-600">123 Main Street, City</div>
755
+ <div class="text-sm text-gray-600">Tel: (123) 456-7890</div>
756
+ </div>
757
+
758
+ <div class="border-t border-b border-gray-200 py-3 mb-4">
759
+ <div class="flex justify-between text-sm mb-1">
760
+ <span class="text-gray-600">Date:</span>
761
+ <span id="receiptDate" class="font-medium">2023-06-15 10:45 AM</span>
762
+ </div>
763
+ <div class="flex justify-between text-sm">
764
+ <span class="text-gray-600">Transaction #:</span>
765
+ <span id="receiptTransactionId" class="font-medium">TXN-20230615-001</span>
766
+ </div>
767
+ </div>
768
+
769
+ <div class="mb-4" id="receiptItemsList">
770
+ <!-- Receipt items will be dynamically inserted here -->
771
+ <div class="flex justify-between py-1">
772
+ <div>
773
+ <div>Sample Product</div>
774
+ <div class="text-sm text-gray-600">1 x $19.99</div>
775
+ </div>
776
+ <div class="font-medium">$19.99</div>
777
+ </div>
778
+ </div>
779
+
780
+ <div class="border-t border-gray-200 pt-3 mb-4">
781
+ <div class="flex justify-between mb-1">
782
+ <span class="text-gray-600">Subtotal:</span>
783
+ <span id="receiptSubtotal" class="font-medium">$19.99</span>
784
+ </div>
785
+ <div class="flex justify-between mb-1">
786
+ <span class="text-gray-600">Tax (10%):</span>
787
+ <span id="receiptTax" class="font-medium">$2.00</span>
788
+ </div>
789
+ <div class="flex justify-between text-lg font-bold">
790
+ <span>Total:</span>
791
+ <span id="receiptTotal" class="text-indigo-600">$21.99</span>
792
+ </div>
793
+ </div>
794
+
795
+ <div class="text-center text-sm text-gray-600 mb-4">
796
+ Thank you for shopping with us!
797
+ </div>
798
+
799
+ <div class="flex justify-center space-x-4">
800
+ <button id="printReceipt" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center space-x-2">
801
+ <i class="fas fa-print"></i>
802
+ <span>Print Receipt</span>
803
+ </button>
804
+ <button id="emailReceipt" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 flex items-center space-x-2">
805
+ <i class="fas fa-envelope"></i>
806
+ <span>Email Receipt</span>
807
+ </button>
808
+ </div>
809
+ </div>
810
+ </div>
811
+ </div>
812
+
813
+ <!-- Sync Status Toast -->
814
+ <div id="syncToast" class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg hidden flex items-center space-x-2">
815
+ <i class="fas fa-check-circle"></i>
816
+ <span>Data synchronized successfully!</span>
817
+ </div>
818
+
819
+ <script>
820
+ // DOM Elements
821
+ const sidebarToggle = document.getElementById('sidebarToggle');
822
+ const sidebar = document.querySelector('.sidebar');
823
+ const tabButtons = {
824
+ pos: document.getElementById('posTab'),
825
+ products: document.getElementById('productsTab'),
826
+ inventory: document.getElementById('inventoryTab'),
827
+ sales: document.getElementById('salesTab'),
828
+ settings: document.getElementById('settingsTab')
829
+ };
830
+ const tabContents = {
831
+ pos: document.getElementById('posContent'),
832
+ products: document.getElementById('productsContent'),
833
+ inventory: document.getElementById('inventoryContent'),
834
+ sales: document.getElementById('salesContent'),
835
+ settings: document.getElementById('settingsContent')
836
+ };
837
+ const currentTabTitle = document.getElementById('currentTabTitle');
838
+ const addProductBtn = document.getElementById('addProductBtn');
839
+ const addProductModal = document.getElementById('addProductModal');
840
+ const closeAddProductModal = document.getElementById('closeAddProductModal');
841
+ const cancelAddProduct = document.getElementById('cancelAddProduct');
842
+ const saveProduct = document.getElementById('saveProduct');
843
+ const receiptModal = document.getElementById('receiptModal');
844
+ const closeReceiptModal = document.getElementById('closeReceiptModal');
845
+ const printReceipt = document.getElementById('printReceipt');
846
+ const emailReceipt = document.getElementById('emailReceipt');
847
+ const syncBtn = document.getElementById('syncBtn');
848
+ const syncStatus = document.getElementById('syncStatus');
849
+ const syncToast = document.getElementById('syncToast');
850
+ const completeSaleBtn = document.getElementById('completeSaleBtn');
851
+ const clearCartBtn = document.getElementById('clearCartBtn');
852
+ const productSearch = document.getElementById('productSearch');
853
+ const categoryBtns = document.querySelectorAll('.category-btn');
854
+ const productGrid = document.getElementById('productGrid');
855
+ const receiptItems = document.getElementById('receiptItems');
856
+ const subtotalEl = document.getElementById('subtotal');
857
+ const taxEl = document.getElementById('tax');
858
+ const totalEl = document.getElementById('total');
859
+ const testConnectionBtn = document.getElementById('testConnectionBtn');
860
+ const sheetId = document.getElementById('sheetId');
861
+
862
+ // Sample Data
863
+ let products = [
864
+ { id: 1, name: "Wireless Headphones", sku: "SKU001", price: 99.99, cost: 60.00, stock: 25, category: "Electronics", image: null },
865
+ { id: 2, name: "Organic Apples", sku: "SKU002", price: 3.99, cost: 2.00, stock: 50, category: "Groceries", image: null },
866
+ { id: 3, name: "Cotton T-Shirt", sku: "SKU003", price: 19.99, cost: 10.00, stock: 30, category: "Clothing", image: null },
867
+ { id: 4, name: "Smartphone", sku: "SKU004", price: 799.99, cost: 500.00, stock: 15, category: "Electronics", image: null },
868
+ { id: 5, name: "Coffee Mug", sku: "SKU005", price: 12.99, cost: 5.00, stock: 40, category: "Home Goods", image: null },
869
+ { id: 6, name: "Bluetooth Speaker", sku: "SKU006", price: 59.99, cost: 35.00, stock: 20, category: "Electronics", image: null },
870
+ { id: 7, name: "Jeans", sku: "SKU007", price: 49.99, cost: 25.00, stock: 25, category: "Clothing", image: null },
871
+ { id: 8, name: "Desk Lamp", sku: "SKU008", price: 29.99, cost: 15.00, stock: 18, category: "Home Goods", image: null }
872
+ ];
873
+
874
+ let cart = [];
875
+ let sales = [];
876
+ let currentCategory = 'All';
877
+
878
+ // Initialize the app
879
+ function init() {
880
+ // Set current date for receipt
881
+ const now = new Date();
882
+ document.getElementById('receiptDate').textContent = now.toLocaleString();
883
+
884
+ // Generate a random transaction ID
885
+ document.getElementById('receiptTransactionId').textContent = `TXN-${now.getFullYear()}${(now.getMonth()+1).toString().padStart(2, '0')}${now.getDate().toString().padStart(2, '0')}-${Math.floor(Math.random() * 1000).toString().padStart(3, '0')}`;
886
+
887
+ // Load products
888
+ renderProducts();
889
+
890
+ // Setup event listeners
891
+ setupEventListeners();
892
+
893
+ // Initialize charts
894
+ initCharts();
895
+ }
896
+
897
+ // Setup event listeners
898
+ function setupEventListeners() {
899
+ // Sidebar toggle for mobile
900
+ sidebarToggle.addEventListener('click', () => {
901
+ sidebar.classList.toggle('-translate-x-full');
902
+ });
903
+
904
+ // Tab switching
905
+ Object.keys(tabButtons).forEach(tab => {
906
+ tabButtons[tab].addEventListener('click', () => {
907
+ // Hide all tab contents
908
+ Object.keys(tabContents).forEach(content => {
909
+ tabContents[content].classList.add('hidden');
910
+ });
911
+
912
+ // Show selected tab content
913
+ tabContents[tab].classList.remove('hidden');
914
+
915
+ // Update tab title
916
+ currentTabTitle.textContent = tabButtons[tab].querySelector('span').textContent;
917
+
918
+ // Highlight active tab button
919
+ Object.keys(tabButtons).forEach(btn => {
920
+ tabButtons[btn].classList.remove('bg-indigo-900');
921
+ tabButtons[btn].classList.add('hover:bg-indigo-700');
922
+ });
923
+ tabButtons[tab].classList.add('bg-indigo-900');
924
+ tabButtons[tab].classList.remove('hover:bg-indigo-700');
925
+ });
926
+ });
927
+
928
+ // Product management
929
+ addProductBtn.addEventListener('click', () => {
930
+ addProductModal.classList.remove('hidden');
931
+ });
932
+
933
+ closeAddProductModal.addEventListener('click', () => {
934
+ addProductModal.classList.add('hidden');
935
+ });
936
+
937
+ cancelAddProduct.addEventListener('click', () => {
938
+ addProductModal.classList.add('hidden');
939
+ });
940
+
941
+ saveProduct.addEventListener('click', () => {
942
+ // In a real app, you would save the product to your database
943
+ const newProduct = {
944
+ id: products.length + 1,
945
+ name: document.getElementById('productName').value,
946
+ sku: document.getElementById('productSKU').value,
947
+ price: parseFloat(document.getElementById('productPrice').value),
948
+ cost: parseFloat(document.getElementById('productCost').value),
949
+ stock: parseInt(document.getElementById('productStock').value),
950
+ category: document.getElementById('productCategory').value,
951
+ description: document.getElementById('productDescription').value,
952
+ image: null
953
+ };
954
+
955
+ products.push(newProduct);
956
+ renderProducts();
957
+ addProductModal.classList.add('hidden');
958
+
959
+ // Reset form
960
+ document.getElementById('productName').value = '';
961
+ document.getElementById('productSKU').value = '';
962
+ document.getElementById('productPrice').value = '';
963
+ document.getElementById('productCost').value = '';
964
+ document.getElementById('productStock').value = '';
965
+ document.getElementById('productCategory').value = '';
966
+ document.getElementById('productDescription').value = '';
967
+ });
968
+
969
+ // POS functionality
970
+ categoryBtns.forEach(btn => {
971
+ btn.addEventListener('click', () => {
972
+ currentCategory = btn.textContent;
973
+ renderProducts();
974
+
975
+ // Highlight selected category
976
+ categoryBtns.forEach(b => {
977
+ b.classList.remove('bg-indigo-600', 'text-white');
978
+ b.classList.add('bg-gray-200', 'text-gray-700', 'hover:bg-gray-300');
979
+ });
980
+
981
+ btn.classList.add('bg-indigo-600', 'text-white');
982
+ btn.classList.remove('bg-gray-200', 'text-gray-700', 'hover:bg-gray-300');
983
+ });
984
+ });
985
+
986
+ productSearch.addEventListener('input', () => {
987
+ renderProducts();
988
+ });
989
+
990
+ completeSaleBtn.addEventListener('click', () => {
991
+ if (cart.length === 0) return;
992
+
993
+ // Create a sale record
994
+ const sale = {
995
+ id: sales.length + 1,
996
+ date: new Date(),
997
+ items: [...cart],
998
+ subtotal: calculateSubtotal(),
999
+ tax: calculateTax(),
1000
+ total: calculateTotal(),
1001
+ paymentMethod: 'Cash' // In a real app, you would get this from the UI
1002
+ };
1003
+
1004
+ sales.push(sale);
1005
+
1006
+ // Update inventory
1007
+ cart.forEach(item => {
1008
+ const product = products.find(p => p.id === item.id);
1009
+ if (product) {
1010
+ product.stock -= item.quantity;
1011
+ }
1012
+ });
1013
+
1014
+ // Show receipt
1015
+ showReceipt(sale);
1016
+
1017
+ // Clear cart
1018
+ cart = [];
1019
+ renderCart();
1020
+
1021
+ // Update products in case stock changed
1022
+ renderProducts();
1023
+ });
1024
+
1025
+ clearCartBtn.addEventListener('click', () => {
1026
+ cart = [];
1027
+ renderCart();
1028
+ });
1029
+
1030
+ // Sync functionality
1031
+ syncBtn.addEventListener('click', () => {
1032
+ // In a real app, this would sync with Google Sheets
1033
+ syncBtn.innerHTML = '<i class="fas fa-sync-alt animate-spin"></i><span>Syncing...</span>';
1034
+
1035
+ setTimeout(() => {
1036
+ syncBtn.innerHTML = '<i class="fas fa-sync-alt"></i><span>Sync with Google</span>';
1037
+ showSyncToast('Data synchronized successfully!');
1038
+
1039
+ // Update last sync time
1040
+ const now = new Date();
1041
+ document.getElementById('lastSyncTime').textContent = now.toLocaleString();
1042
+ }, 1500);
1043
+ });
1044
+
1045
+ syncBtn.addEventListener('mouseenter', () => {
1046
+ syncStatus.classList.remove('hidden');
1047
+ });
1048
+
1049
+ syncBtn.addEventListener('mouseleave', () => {
1050
+ syncStatus.classList.add('hidden');
1051
+ });
1052
+
1053
+ // Test Google Sheets connection
1054
+ testConnectionBtn.addEventListener('click', () => {
1055
+ const id = sheetId.value;
1056
+ if (!id) {
1057
+ alert('Please enter a Google Sheet ID');
1058
+ return;
1059
+ }
1060
+
1061
+ testConnectionBtn.innerHTML = '<i class="fas fa-plug animate-pulse"></i><span>Testing Connection...</span>';
1062
+
1063
+ // In a real app, you would make an API call to your Apps Script backend
1064
+ setTimeout(() => {
1065
+ testConnectionBtn.innerHTML = '<i class="fas fa-plug"></i><span>Test Connection</span>';
1066
+ showSyncToast('Connection to Google Sheets successful!');
1067
+ }, 1500);
1068
+ });
1069
+
1070
+ // Receipt modal
1071
+ closeReceiptModal.addEventListener('click', () => {
1072
+ receiptModal.classList.add('hidden');
1073
+ });
1074
+
1075
+ printReceipt.addEventListener('click', () => {
1076
+ // In a real app, this would print the receipt
1077
+ alert('Receipt printed!');
1078
+ });
1079
+
1080
+ emailReceipt.addEventListener('click', () => {
1081
+ // In a real app, this would email the receipt
1082
+ alert('Receipt emailed!');
1083
+ });
1084
+ }
1085
+
1086
+ // Render products grid
1087
+ function renderProducts() {
1088
+ productGrid.innerHTML = '';
1089
+
1090
+ const searchTerm = productSearch.value.toLowerCase();
1091
+
1092
+ products
1093
+ .filter(product => {
1094
+ const matchesCategory = currentCategory === 'All' || product.category === currentCategory;
1095
+ const matchesSearch = product.name.toLowerCase().includes(searchTerm) ||
1096
+ product.sku.toLowerCase().includes(searchTerm);
1097
+ return matchesCategory && matchesSearch;
1098
+ })
1099
+ .forEach(product => {
1100
+ const productCard = document.createElement('div');
1101
+ productCard.className = 'product-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm cursor-pointer transition-all duration-300';
1102
+ productCard.innerHTML = `
1103
+ <div class="h-32 bg-gray-100 flex items-center justify-center">
1104
+ ${product.image ?
1105
+ `<img src="${product.image}" alt="${product.name}" class="h-full w-full object-cover">` :
1106
+ `<i class="fas fa-box-open text-4xl text-gray-400"></i>`}
1107
+ </div>
1108
+ <div class="p-3">
1109
+ <h4 class="font-medium text-gray-800 truncate">${product.name}</h4>
1110
+ <div class="flex justify-between items-center mt-2">
1111
+ <span class="text-indigo-600 font-semibold">$${product.price.toFixed(2)}</span>
1112
+ <button class="add-to-cart-btn bg-indigo-600 text-white p-1 rounded-full hover:bg-indigo-700" data-id="${product.id}">
1113
+ <i class="fas fa-plus"></i>
1114
+ </button>
1115
+ </div>
1116
+ ${product.stock <= 0 ?
1117
+ `<div class="text-xs text-red-500 mt-1">Out of Stock</div>` :
1118
+ `<div class="text-xs text-gray-500 mt-1">Stock: ${product.stock}</div>`}
1119
+ </div>
1120
+ `;
1121
+
1122
+ productGrid.appendChild(productCard);
1123
+ });
1124
+
1125
+ // Add event listeners to add-to-cart buttons
1126
+ document.querySelectorAll('.add-to-cart-btn').forEach(btn => {
1127
+ btn.addEventListener('click', (e) => {
1128
+ const productId = parseInt(e.currentTarget.getAttribute('data-id'));
1129
+ addToCart(productId);
1130
+ });
1131
+ });
1132
+ }
1133
+
1134
+ // Add product to cart
1135
+ function addToCart(productId) {
1136
+ const product = products.find(p => p.id === productId);
1137
+ if (!product || product.stock <= 0) return;
1138
+
1139
+ const existingItem = cart.find(item => item.id === productId);
1140
+ if (existingItem) {
1141
+ existingItem.quantity += 1;
1142
+ } else {
1143
+ cart.push({
1144
+ id: productId,
1145
+ name: product.name,
1146
+ price: product.price,
1147
+ quantity: 1
1148
+ });
1149
+ }
1150
+
1151
+ renderCart();
1152
+ }
1153
+
1154
+ // Render cart
1155
+ function renderCart() {
1156
+ receiptItems.innerHTML = '';
1157
+
1158
+ if (cart.length === 0) {
1159
+ receiptItems.innerHTML = '<div class="text-center py-8 text-gray-500">Your cart is empty</div>';
1160
+ subtotalEl.textContent = '$0.00';
1161
+ taxEl.textContent = '$0.00';
1162
+ totalEl.textContent = '$0.00';
1163
+ completeSaleBtn.innerHTML = '<i class="fas fa-check-circle"></i><span>Complete Sale ($0.00)</span>';
1164
+ return;
1165
+ }
1166
+
1167
+ cart.forEach(item => {
1168
+ const product = products.find(p => p.id === item.id);
1169
+ if (!product) return;
1170
+
1171
+ const receiptItem = document.createElement('div');
1172
+ receiptItem.className = 'receipt-item flex justify-between items-center py-3 px-2 border-b border-gray-100 transition-colors duration-200';
1173
+ receiptItem.innerHTML = `
1174
+ <div>
1175
+ <div class="font-medium">${item.name}</div>
1176
+ <div class="text-sm text-gray-500">${item.quantity} x $${item.price.toFixed(2)}</div>
1177
+ </div>
1178
+ <div class="flex items-center">
1179
+ <span class="font-semibold mr-4">$${(item.price * item.quantity).toFixed(2)}</span>
1180
+ <button class="remove-item-btn text-red-500 hover:text-red-700" data-id="${item.id}">
1181
+ <i class="fas fa-times"></i>
1182
+ </button>
1183
+ </div>
1184
+ `;
1185
+
1186
+ receiptItems.appendChild(receiptItem);
1187
+ });
1188
+
1189
+ // Add event listeners to remove buttons
1190
+ document.querySelectorAll('.remove-item-btn').forEach(btn => {
1191
+ btn.addEventListener('click', (e) => {
1192
+ const productId = parseInt(e.currentTarget.getAttribute('data-id'));
1193
+ removeFromCart(productId);
1194
+ });
1195
+ });
1196
+
1197
+ // Update totals
1198
+ const subtotal = calculateSubtotal();
1199
+ const tax = calculateTax();
1200
+ const total = calculateTotal();
1201
+
1202
+ subtotalEl.textContent = `$${subtotal.toFixed(2)}`;
1203
+ taxEl.textContent = `$${tax.toFixed(2)}`;
1204
+ totalEl.textContent = `$${total.toFixed(2)}`;
1205
+ completeSaleBtn.innerHTML = `<i class="fas fa-check-circle"></i><span>Complete Sale ($${total.toFixed(2)})</span>`;
1206
+ }
1207
+
1208
+ // Remove product from cart
1209
+ function removeFromCart(productId) {
1210
+ const itemIndex = cart.findIndex(item => item.id === productId);
1211
+ if (itemIndex !== -1) {
1212
+ if (cart[itemIndex].quantity > 1) {
1213
+ cart[itemIndex].quantity -= 1;
1214
+ } else {
1215
+ cart.splice(itemIndex, 1);
1216
+ }
1217
+ }
1218
+
1219
+ renderCart();
1220
+ }
1221
+
1222
+ // Calculate subtotal
1223
+ function calculateSubtotal() {
1224
+ return cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
1225
+ }
1226
+
1227
+ // Calculate tax (10%)
1228
+ function calculateTax() {
1229
+ return calculateSubtotal() * 0.1;
1230
+ }
1231
+
1232
+ // Calculate total
1233
+ function calculateTotal() {
1234
+ return calculateSubtotal() + calculateTax();
1235
+ }
1236
+
1237
+ // Show receipt
1238
+ function showReceipt(sale) {
1239
+ const receiptItemsList = document.getElementById('receiptItemsList');
1240
+ receiptItemsList.innerHTML = '';
1241
+
1242
+ sale.items.forEach(item => {
1243
+ const receiptItem = document.createElement('div');
1244
+ receiptItem.className = 'flex justify-between py-1';
1245
+ receiptItem.innerHTML = `
1246
+ <div>
1247
+ <div>${item.name}</div>
1248
+ <div class="text-sm text-gray-600">${item.quantity} x $${item.price.toFixed(2)}</div>
1249
+ </div>
1250
+ <div class="font-medium">$${(item.price * item.quantity).toFixed(2)}</div>
1251
+ `;
1252
+
1253
+ receiptItemsList.appendChild(receiptItem);
1254
+ });
1255
+
1256
+ document.getElementById('receiptSubtotal').textContent = `$${sale.subtotal.toFixed(2)}`;
1257
+ document.getElementById('receiptTax').textContent = `$${sale.tax.toFixed(2)}`;
1258
+ document.getElementById('receiptTotal').textContent = `$${sale.total.toFixed(2)}`;
1259
+
1260
+ receiptModal.classList.remove('hidden');
1261
+ }
1262
+
1263
+ // Show sync toast
1264
+ function showSyncToast(message) {
1265
+ syncToast.querySelector('span').textContent = message;
1266
+ syncToast.classList.remove('hidden');
1267
+
1268
+ setTimeout(() => {
1269
+ syncToast.classList.add('hidden');
1270
+ }, 3000);
1271
+ }
1272
+
1273
+ // Initialize charts
1274
+ function initCharts() {
1275
+ // Sales over time chart
1276
+ const salesCtx = document.getElementById('salesChart').getContext('2d');
1277
+ const salesChart = new Chart(salesCtx, {
1278
+ type: 'line',
1279
+ data: {
1280
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
1281
+ datasets: [{
1282
+ label: 'Sales',
1283
+ data: [1200, 1900, 1500, 2000, 1800, 2200],
1284
+ backgroundColor: 'rgba(79, 70, 229, 0.1)',
1285
+ borderColor: 'rgba(79, 70, 229, 1)',
1286
+ borderWidth: 2,
1287
+ tension: 0.3,
1288
+ fill: true
1289
+ }]
1290
+ },
1291
+ options: {
1292
+ responsive: true,
1293
+ plugins: {
1294
+ legend: {
1295
+ display: false
1296
+ }
1297
+ },
1298
+ scales: {
1299
+ y: {
1300
+ beginAtZero: true
1301
+ }
1302
+ }
1303
+ }
1304
+ });
1305
+
1306
+ // Top products chart
1307
+ const productsCtx = document.getElementById('productsChart').getContext('2d');
1308
+ const productsChart = new Chart(productsCtx, {
1309
+ type: 'bar',
1310
+ data: {
1311
+ labels: ['Headphones', 'Apples', 'T-Shirt', 'Smartphone', 'Mug'],
1312
+ datasets: [{
1313
+ label: 'Units Sold',
1314
+ data: [45, 38, 29, 22, 18],
1315
+ backgroundColor: [
1316
+ 'rgba(79, 70, 229, 0.7)',
1317
+ 'rgba(99, 102, 241, 0.7)',
1318
+ 'rgba(129, 140, 248, 0.7)',
1319
+ 'rgba(165, 180, 252, 0.7)',
1320
+ 'rgba(199, 210, 254, 0.7)'
1321
+ ],
1322
+ borderColor: [
1323
+ 'rgba(79, 70, 229, 1)',
1324
+ 'rgba(99, 102, 241, 1)',
1325
+ 'rgba(129, 140, 248, 1)',
1326
+ 'rgba(165, 180, 252, 1)',
1327
+ 'rgba(199, 210, 254, 1)'
1328
+ ],
1329
+ borderWidth: 1
1330
+ }]
1331
+ },
1332
+ options: {
1333
+ responsive: true,
1334
+ plugins: {
1335
+ legend: {
1336
+ display: false
1337
+ }
1338
+ },
1339
+ scales: {
1340
+ y: {
1341
+ beginAtZero: true
1342
+ }
1343
+ }
1344
+ }
1345
+ });
1346
+ }
1347
+
1348
+ // Initialize the app
1349
+ document.addEventListener('DOMContentLoaded', init);
1350
+ </script>
1351
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=gtkh/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1352
+ </html>