Hugging Face's logo

Spaces:
TDN-M
/
menu
Running

App Files Community
TDN-M commited on
Commit
06fdd78
·
verified ·
1 Parent(s): bc05cb8

Giao diện tiếng việt, tối ưu cả từ phía khách hàng - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +577 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Menu
3
- emoji: 🏆
4
- colorFrom: yellow
5
  colorTo: green
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: menu
3
+ emoji: 🐳
4
+ colorFrom: pink
5
  colorTo: green
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,577 @@
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>QR Order Pro - Quản Lý Nhà Hàng Thông Minh</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#4361ee',
15
+ secondary: '#3f37c9',
16
+ accent: '#4cc9f0',
17
+ success: '#4ade80',
18
+ warning: '#facc15',
19
+ danger: '#f87171',
20
+ dark: '#1e293b',
21
+ light: '#f8fafc'
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <style>
28
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
29
+ body {
30
+ font-family: 'Poppins', sans-serif;
31
+ background-color: #f1f5f9;
32
+ }
33
+ @media (max-width: 768px) {
34
+ .dashboard-card {
35
+ padding: 1rem;
36
+ }
37
+ .stats-grid {
38
+ grid-template-columns: 1fr;
39
+ }
40
+ .table-container {
41
+ overflow-x: auto;
42
+ }
43
+ }
44
+ .dashboard-card {
45
+ transition: all 0.3s ease;
46
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
47
+ }
48
+ .dashboard-card:hover {
49
+ transform: translateY(-5px);
50
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
51
+ }
52
+ .status-badge {
53
+ transition: all 0.2s ease;
54
+ }
55
+ .status-badge:hover {
56
+ transform: scale(1.05);
57
+ }
58
+ .order-item {
59
+ border-left: 4px solid #4361ee;
60
+ }
61
+ .chart-container {
62
+ height: 300px;
63
+ }
64
+ .notification-dot {
65
+ animation: pulse 2s infinite;
66
+ }
67
+ @keyframes pulse {
68
+ 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 201, 240, 0.7); }
69
+ 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(76, 201, 240, 0); }
70
+ 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 201, 240, 0); }
71
+ }
72
+ .sidebar-item.active {
73
+ background-color: #4361ee;
74
+ color: white;
75
+ }
76
+ .sidebar-item:hover {
77
+ background-color: #e2e8f0;
78
+ }
79
+ .sidebar-item.active:hover {
80
+ background-color: #3f37c9;
81
+ }
82
+ </style>
83
+ </head>
84
+ <body class="bg-gray-100">
85
+ <div class="flex h-screen">
86
+ <!-- Sidebar -->
87
+ <div class="w-64 bg-white shadow-lg hidden md:block">
88
+ <div class="p-5">
89
+ <div class="flex items-center space-x-2">
90
+ <div class="bg-blue-500 text-white p-2 rounded-lg">
91
+ <i class="fas fa-qrcode text-xl"></i>
92
+ </div>
93
+ <h1 class="text-2xl font-bold text-gray-800">QR Order Pro</h1>
94
+ </div>
95
+ <p class="text-gray-500 text-sm mt-1">Quản Lý Nhà Hàng Thông Minh</p>
96
+ </div>
97
+
98
+ <nav class="mt-8">
99
+ <a href="#" class="flex items-center px-6 py-3 text-gray-700 sidebar-item active">
100
+ <i class="fas fa-home mr-3"></i>
101
+ <span>Bảng Điều Khiển</span>
102
+ </a>
103
+ <a href="#" class="flex items-center px-6 py-3 text-gray-700 sidebar-item">
104
+ <i class="fas fa-utensils mr-3"></i>
105
+ <span>Quản Lý Thực Đơn</span>
106
+ </a>
107
+ <a href="#" class="flex items-center px-6 py-3 text-gray-700 sidebar-item">
108
+ <i class="fas fa-shopping-cart mr-3"></i>
109
+ <span>Đơn Hàng</span>
110
+ </a>
111
+ <a href="#" class="flex items-center px-6 py-3 text-gray-700 sidebar-item">
112
+ <i class="fas fa-chart-line mr-3"></i>
113
+ <span>Phân Tích</span>
114
+ </a>
115
+ <a href="#" class="flex items-center px-6 py-3 text-gray-700 sidebar-item">
116
+ <i class="fas fa-users mr-3"></i>
117
+ <span>Nhân Viên</span>
118
+ </a>
119
+ <a href="#" class="flex items-center px-6 py-3 text-gray-700 sidebar-item">
120
+ <i class="fas fa-cog mr-3"></i>
121
+ <span>Cài Đặt</span>
122
+ </a>
123
+ </nav>
124
+
125
+ <div class="absolute bottom-0 w-64 p-4 border-t">
126
+ <div class="flex items-center">
127
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10"></div>
128
+ <div class="ml-3">
129
+ <p class="text-sm font-medium text-gray-800">Restaurant Admin</p>
130
+ <p class="text-xs text-gray-500">admin@restaurant.com</p>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Main Content -->
137
+ <div class="flex-1 flex flex-col overflow-hidden">
138
+ <!-- Header -->
139
+ <header class="bg-white shadow-sm">
140
+ <div class="flex items-center justify-between px-6 py-4">
141
+ <div class="flex items-center">
142
+ <button class="md:hidden text-gray-500 mr-4">
143
+ <i class="fas fa-bars text-xl"></i>
144
+ </button>
145
+ <h2 class="text-xl font-semibold text-gray-800">Bảng Điều Khiển</h2>
146
+ </div>
147
+
148
+ <div class="flex items-center space-x-4">
149
+ <div class="relative">
150
+ <button class="text-gray-500 hover:text-gray-700">
151
+ <i class="fas fa-bell text-xl"></i>
152
+ <span class="absolute top-0 right-0 w-3 h-3 bg-red-500 rounded-full notification-dot"></span>
153
+ </button>
154
+ </div>
155
+ <div class="flex items-center">
156
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10"></div>
157
+ <span class="ml-2 text-gray-700 hidden md:block">Admin</span>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </header>
162
+
163
+ <!-- Content -->
164
+ <main class="flex-1 overflow-y-auto p-6">
165
+ <!-- Stats Cards -->
166
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
167
+ <div class="dashboard-card bg-white rounded-xl p-6">
168
+ <div class="flex justify-between items-center">
169
+ <div>
170
+ <p class="text-gray-500">Tổng Đơn Hàng</p>
171
+ <h3 class="text-2xl font-bold mt-1">142</h3>
172
+ </div>
173
+ <div class="bg-blue-100 p-3 rounded-lg">
174
+ <i class="fas fa-shopping-cart text-blue-500 text-xl"></i>
175
+ </div>
176
+ </div>
177
+ <div class="mt-4">
178
+ <span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 12.5%</span>
179
+ <span class="text-gray-500 text-sm ml-2">so với tuần trước</span>
180
+ </div>
181
+ </div>
182
+
183
+ <div class="dashboard-card bg-white rounded-xl p-6">
184
+ <div class="flex justify-between items-center">
185
+ <div>
186
+ <p class="text-gray-500">Doanh Thu</p>
187
+ <h3 class="text-2xl font-bold mt-1">24.560.000₫</h3>
188
+ </div>
189
+ <div class="bg-green-100 p-3 rounded-lg">
190
+ <i class="fas fa-dollar-sign text-green-500 text-xl"></i>
191
+ </div>
192
+ </div>
193
+ <div class="mt-4">
194
+ <span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 8.3%</span>
195
+ <span class="text-gray-500 text-sm ml-2">so với tuần trước</span>
196
+ </div>
197
+ </div>
198
+
199
+ <div class="dashboard-card bg-white rounded-xl p-6">
200
+ <div class="flex justify-between items-center">
201
+ <div>
202
+ <p class="text-gray-500">Bàn Hoạt Động</p>
203
+ <h3 class="text-2xl font-bold mt-1">24/30</h3>
204
+ </div>
205
+ <div class="bg-purple-100 p-3 rounded-lg">
206
+ <i class="fas fa-chair text-purple-500 text-xl"></i>
207
+ </div>
208
+ </div>
209
+ <div class="mt-4">
210
+ <span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 5.2%</span>
211
+ <span class="text-gray-500 text-sm ml-2">so với tuần trước</span>
212
+ </div>
213
+ </div>
214
+
215
+ <div class="dashboard-card bg-white rounded-xl p-6">
216
+ <div class="flex justify-between items-center">
217
+ <div>
218
+ <p class="text-gray-500">Thời Gian Đặt TB</p>
219
+ <h3 class="text-2xl font-bold mt-1">18 phút</h3>
220
+ </div>
221
+ <div class="bg-amber-100 p-3 rounded-lg">
222
+ <i class="fas fa-clock text-amber-500 text-xl"></i>
223
+ </div>
224
+ </div>
225
+ <div class="mt-4">
226
+ <span class="text-red-500 text-sm font-medium"><i class="fas fa-arrow-down"></i> 2.1%</span>
227
+ <span class="text-gray-500 text-sm ml-2">so với tuần trước</span>
228
+ </div>
229
+ </div>
230
+ </div>
231
+
232
+ <!-- Charts and Tables -->
233
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
234
+ <!-- Revenue Chart -->
235
+ <div class="lg:col-span-2 dashboard-card bg-white rounded-xl p-6">
236
+ <div class="flex justify-between items-center mb-6">
237
+ <h3 class="text-lg font-semibold text-gray-800">Tổng Quan Doanh Thu</h3>
238
+ <div class="flex space-x-2">
239
+ <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded">Tuần</button>
240
+ <button class="text-xs bg-blue-500 text-white px-3 py-1 rounded">Tháng</button>
241
+ <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded">Năm</button>
242
+ </div>
243
+ </div>
244
+ <div class="chart-container">
245
+ <canvas id="revenueChart"></canvas>
246
+ </div>
247
+ </div>
248
+
249
+ <!-- Top Dishes -->
250
+ <div class="dashboard-card bg-white rounded-xl p-6">
251
+ <h3 class="text-lg font-semibold text-gray-800 mb-6">Món Ăn Bán Chạy</h3>
252
+ <div class="space-y-4">
253
+ <div class="flex items-center">
254
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
255
+ <div class="ml-4 flex-1">
256
+ <h4 class="font-medium">Cá Hồi Nướng</h4>
257
+ <p class="text-gray-500 text-sm">24 đã bán hôm nay</p>
258
+ </div>
259
+ <div class="text-right">
260
+ <p class="font-medium">24.990₫</p>
261
+ <p class="text-green-500 text-sm">+12%</p>
262
+ </div>
263
+ </div>
264
+
265
+ <div class="flex items-center">
266
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
267
+ <div class="ml-4 flex-1">
268
+ <h4 class="font-medium">Mì Ý Truffle</h4>
269
+ <p class="text-gray-500 text-sm">18 đã bán hôm nay</p>
270
+ </div>
271
+ <div class="text-right">
272
+ <p class="font-medium">18.500₫</p>
273
+ <p class="text-green-500 text-sm">+8%</p>
274
+ </div>
275
+ </div>
276
+
277
+ <div class="flex items-center">
278
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
279
+ <div class="ml-4 flex-1">
280
+ <h4 class="font-medium">Salad Caesar</h4>
281
+ <p class="text-gray-500 text-sm">15 đã bán hôm nay</p>
282
+ </div>
283
+ <div class="text-right">
284
+ <p class="font-medium">12.990₫</p>
285
+ <p class="text-red-500 text-sm">-3%</p>
286
+ </div>
287
+ </div>
288
+
289
+ <div class="flex items-center">
290
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
291
+ <div class="ml-4 flex-1">
292
+ <h4 class="font-medium">Burger Bò</h4>
293
+ <p class="text-gray-500 text-sm">14 đã bán hôm nay</p>
294
+ </div>
295
+ <div class="text-right">
296
+ <p class="font-medium">15.750₫</p>
297
+ <p class="text-green-500 text-sm">+5%</p>
298
+ </div>
299
+ </div>
300
+
301
+ <div class="flex items-center">
302
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
303
+ <div class="ml-4 flex-1">
304
+ <h4 class="font-medium">Bánh Socola</h4>
305
+ <p class="text-gray-500 text-sm">12 đã bán hôm nay</p>
306
+ </div>
307
+ <div class="text-right">
308
+ <p class="font-medium">8.990₫</p>
309
+ <p class="text-green-500 text-sm">+15%</p>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Orders Table -->
317
+ <div class="dashboard-card bg-white rounded-xl p-6 mb-6">
318
+ <div class="flex justify-between items-center mb-6">
319
+ <h3 class="text-lg font-semibold text-gray-800">Đơn Hàng Gần Đây</h3>
320
+ <button class="text-blue-500 hover:text-blue-700 text-sm">
321
+ <i class="fas fa-external-link-alt mr-1"></i> Xem Tất Cả
322
+ </button>
323
+ </div>
324
+
325
+ <div class="overflow-x-auto">
326
+ <table class="min-w-full divide-y divide-gray-200">
327
+ <thead>
328
+ <tr>
329
+ <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mã Đơn</th>
330
+ <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bàn</th>
331
+ <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Số Món</th>
332
+ <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Thành Tiền</th>
333
+ <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Trạng Thái</th>
334
+ <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Thời Gian</th>
335
+ </tr>
336
+ </thead>
337
+ <tbody class="bg-white divide-y divide-gray-200">
338
+ <tr>
339
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-00125</td>
340
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Bàn 5</td>
341
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3 món</td>
342
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">42.500₫</td>
343
+ <td class="px-6 py-4 whitespace-nowrap">
344
+ <span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
345
+ Hoàn Thành
346
+ </span>
347
+ </td>
348
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10:24</td>
349
+ </tr>
350
+
351
+ <tr>
352
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-00124</td>
353
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Bàn 12</td>
354
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 món</td>
355
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">28.750₫</td>
356
+ <td class="px-6 py-4 whitespace-nowrap">
357
+ <span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
358
+ Đang Làm
359
+ </span>
360
+ </td>
361
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10:18</td>
362
+ </tr>
363
+
364
+ <tr>
365
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-00123</td>
366
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Bàn 3</td>
367
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5 món</td>
368
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">67.300₫</td>
369
+ <td class="px-6 py-4 whitespace-nowrap">
370
+ <span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
371
+ Đang Chuẩn Bị
372
+ </span>
373
+ </td>
374
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10:15</td>
375
+ </tr>
376
+
377
+ <tr>
378
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-00122</td>
379
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Bàn 8</td>
380
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 món</td>
381
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12.990₫</td>
382
+ <td class="px-6 py-4 whitespace-nowrap">
383
+ <span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
384
+ Đã Hủy
385
+ </span>
386
+ </td>
387
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10:05</td>
388
+ </tr>
389
+
390
+ <tr>
391
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-00121</td>
392
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Bàn 15</td>
393
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4 món</td>
394
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">54.200₫</td>
395
+ <td class="px-6 py-4 whitespace-nowrap">
396
+ <span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
397
+ Hoàn Thành
398
+ </span>
399
+ </td>
400
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">9:52</td>
401
+ </tr>
402
+ </tbody>
403
+ </table>
404
+ </div>
405
+ </div>
406
+
407
+ <!-- Real-time Orders -->
408
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
409
+ <div class="dashboard-card bg-white rounded-xl p-6">
410
+ <div class="flex justify-between items-center mb-6">
411
+ <h3 class="text-lg font-semibold text-gray-800">Đơn Hàng Trực Tiếp</h3>
412
+ <span class="relative flex h-3 w-3">
413
+ <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
414
+ <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
415
+ </span>
416
+ </div>
417
+
418
+ <div class="space-y-4">
419
+ <div class="order-item p-4 border rounded-lg">
420
+ <div class="flex justify-between">
421
+ <div>
422
+ <h4 class="font-medium">Bàn 7</h4>
423
+ <p class="text-gray-500 text-sm">2 món</p>
424
+ </div>
425
+ <div class="text-right">
426
+ <p class="font-medium">28.500₫</p>
427
+ <p class="text-gray-500 text-sm">Vừa xong</p>
428
+ </div>
429
+ </div>
430
+ <div class="mt-3 flex items-center">
431
+ <span class="px-2 py-1 text-xs rounded bg-blue-100 text-blue-800">Đơn Mới</span>
432
+ <button class="ml-2 text-xs bg-blue-500 text-white px-3 py-1 rounded">Nhận</button>
433
+ <button class="ml-2 text-xs bg-gray-200 text-gray-700 px-3 py-1 rounded">Xem</button>
434
+ </div>
435
+ </div>
436
+
437
+ <div class="order-item p-4 border rounded-lg">
438
+ <div class="flex justify-between">
439
+ <div>
440
+ <h4 class="font-medium">Bàn 11</h4>
441
+ <p class="text-gray-500 text-sm">3 món</p>
442
+ </div>
443
+ <div class="text-right">
444
+ <p class="font-medium">36.750₫</p>
445
+ <p class="text-gray-500 text-sm">2 phút trước</p>
446
+ </div>
447
+ </div>
448
+ <div class="mt-3 flex items-center">
449
+ <span class="px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800">Đang Làm</span>
450
+ <button class="ml-2 text-xs bg-gray-200 text-gray-700 px-3 py-1 rounded">Xem</button>
451
+ </div>
452
+ </div>
453
+
454
+ <div class="order-item p-4 border rounded-lg">
455
+ <div class="flex justify-between">
456
+ <div>
457
+ <h4 class="font-medium">Bàn 2</h4>
458
+ <p class="text-gray-500 text-sm">1 món</p>
459
+ </div>
460
+ <div class="text-right">
461
+ <p class="font-medium">15.990₫</p>
462
+ <p class="text-gray-500 text-sm">5 phút trước</p>
463
+ </div>
464
+ </div>
465
+ <div class="mt-3 flex items-center">
466
+ <span class="px-2 py-1 text-xs rounded bg-green-100 text-green-800">Sẵn Sàng</span>
467
+ <button class="ml-2 text-xs bg-gray-200 text-gray-700 px-3 py-1 rounded">Xem</button>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ </div>
472
+
473
+ <div class="dashboard-card bg-white rounded-xl p-6">
474
+ <div class="flex justify-between items-center mb-6">
475
+ <h3 class="text-lg font-semibold text-gray-800">Trạng Thái Bàn</h3>
476
+ <button class="text-blue-500 hover:text-blue-700 text-sm">
477
+ <i class="fas fa-sync-alt mr-1"></i> Làm Mới
478
+ </button>
479
+ </div>
480
+
481
+ <div class="grid grid-cols-3 gap-4">
482
+ <div class="text-center p-4 border rounded-lg bg-green-50 border-green-200">
483
+ <div class="text-2xl font-bold text-green-600">12</div>
484
+ <div class="text-sm text-gray-600">Trống</div>
485
+ </div>
486
+ <div class="text-center p-4 border rounded-lg bg-amber-50 border-amber-200">
487
+ <div class="text-2xl font-bold text-amber-600">8</div>
488
+ <div class="text-sm text-gray-600">Có Khách</div>
489
+ </div>
490
+ <div class="text-center p-4 border rounded-lg bg-red-50 border-red-200">
491
+ <div class="text-2xl font-bold text-red-600">10</div>
492
+ <div class="text-sm text-gray-600">Đặt Trước</div>
493
+ </div>
494
+ </div>
495
+
496
+ <div class="mt-6">
497
+ <h4 class="font-medium mb-3">Table Map</h4>
498
+ <div class="grid grid-cols-5 gap-2">
499
+ <!-- Table representation -->
500
+ <div class="p-3 text-center bg-green-100 rounded-lg text-green-800 text-sm">T1</div>
501
+ <div class="p-3 text-center bg-green-100 rounded-lg text-green-800 text-sm">T2</div>
502
+ <div class="p-3 text-center bg-amber-100 rounded-lg text-amber-800 text-sm">T3</div>
503
+ <div class="p-3 text-center bg-green-100 rounded-lg text-green-800 text-sm">T4</div>
504
+ <div class="p-3 text-center bg-green-100 rounded-lg text-green-800 text-sm">T5</div>
505
+ <div class="p-3 text-center bg-red-100 rounded-lg text-red-800 text-sm">T6</div>
506
+ <div class="p-3 text-center bg-amber-100 rounded-lg text-amber-800 text-sm">T7</div>
507
+ <div class="p-3 text-center bg-green-100 rounded-lg text-green-800 text-sm">T8</div>
508
+ <div class="p-3 text-center bg-red-100 rounded-lg text-red-800 text-sm">T9</div>
509
+ <div class="p-3 text-center bg-green-100 rounded-lg text-green-800 text-sm">T10</div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+ </div>
514
+ </main>
515
+ </div>
516
+ </div>
517
+
518
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
519
+ <script>
520
+ // Initialize charts
521
+ document.addEventListener('DOMContentLoaded', function() {
522
+ const ctx = document.getElementById('revenueChart').getContext('2d');
523
+ const revenueChart = new Chart(ctx, {
524
+ type: 'line',
525
+ data: {
526
+ labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
527
+ datasets: [{
528
+ label: 'This Week',
529
+ data: [1200, 1900, 1500, 2200, 1800, 2500, 2100],
530
+ borderColor: '#4361ee',
531
+ backgroundColor: 'rgba(67, 97, 238, 0.1)',
532
+ tension: 0.4,
533
+ fill: true
534
+ }, {
535
+ label: 'Last Week',
536
+ data: [1000, 1500, 1300, 1800, 1600, 2000, 1700],
537
+ borderColor: '#4cc9f0',
538
+ backgroundColor: 'rgba(76, 201, 240, 0.1)',
539
+ tension: 0.4,
540
+ borderDash: [5, 5],
541
+ fill: true
542
+ }]
543
+ },
544
+ options: {
545
+ responsive: true,
546
+ maintainAspectRatio: false,
547
+ plugins: {
548
+ legend: {
549
+ position: 'top',
550
+ }
551
+ },
552
+ scales: {
553
+ y: {
554
+ beginAtZero: true,
555
+ grid: {
556
+ drawBorder: false
557
+ }
558
+ },
559
+ x: {
560
+ grid: {
561
+ display: false
562
+ }
563
+ }
564
+ }
565
+ }
566
+ });
567
+
568
+ // Simulate real-time updates
569
+ setInterval(() => {
570
+ const now = new Date();
571
+ const timeString = now.toLocaleTimeString();
572
+ console.log(`Dashboard updated at ${timeString}`);
573
+ }, 30000);
574
+ });
575
+ </script>
576
+ <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=TDN-M/menu" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
577
+ </html>