|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>QR Order Pro - Quản Lý Nhà Hàng Thông Minh</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#4361ee', |
|
|
secondary: '#3f37c9', |
|
|
accent: '#4cc9f0', |
|
|
success: '#4ade80', |
|
|
warning: '#facc15', |
|
|
danger: '#f87171', |
|
|
dark: '#1e293b', |
|
|
light: '#f8fafc' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #f1f5f9; |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.dashboard-card { |
|
|
padding: 1rem; |
|
|
} |
|
|
.stats-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
.table-container { |
|
|
overflow-x: auto; |
|
|
} |
|
|
} |
|
|
.dashboard-card { |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
|
|
} |
|
|
.dashboard-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
.status-badge { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.status-badge:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
.order-item { |
|
|
border-left: 4px solid #4361ee; |
|
|
} |
|
|
.chart-container { |
|
|
height: 300px; |
|
|
} |
|
|
.notification-dot { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 201, 240, 0.7); } |
|
|
70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(76, 201, 240, 0); } |
|
|
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 201, 240, 0); } |
|
|
} |
|
|
.sidebar-item.active { |
|
|
background-color: #4361ee; |
|
|
color: white; |
|
|
} |
|
|
.sidebar-item:hover { |
|
|
background-color: #e2e8f0; |
|
|
} |
|
|
.sidebar-item.active:hover { |
|
|
background-color: #3f37c9; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100"> |
|
|
<div class="flex h-screen"> |
|
|
|
|
|
<div class="w-64 bg-white shadow-lg hidden md:block"> |
|
|
<div class="p-5"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="bg-blue-500 text-white p-2 rounded-lg"> |
|
|
<i class="fas fa-qrcode text-xl"></i> |
|
|
</div> |
|
|
<h1 class="text-2xl font-bold text-gray-800">QR Order Pro</h1> |
|
|
</div> |
|
|
<p class="text-gray-500 text-sm mt-1">Quản Lý Nhà Hàng Thông Minh</p> |
|
|
</div> |
|
|
|
|
|
<nav class="mt-8"> |
|
|
<a href="#" class="flex items-center px-6 py-3 text-gray-700 sidebar-item active"> |
|
|
<i class="fas fa-home mr-3"></i> |
|
|
<span>Bảng Điều Khiển</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-6 py-3 text-gray-700 sidebar-item"> |
|
|
<i class="fas fa-utensils mr-3"></i> |
|
|
<span>Quản Lý Thực Đơn</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-6 py-3 text-gray-700 sidebar-item"> |
|
|
<i class="fas fa-shopping-cart mr-3"></i> |
|
|
<span>Đơn Hàng</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-6 py-3 text-gray-700 sidebar-item"> |
|
|
<i class="fas fa-chart-line mr-3"></i> |
|
|
<span>Phân Tích</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-6 py-3 text-gray-700 sidebar-item"> |
|
|
<i class="fas fa-users mr-3"></i> |
|
|
<span>Nhân Viên</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-6 py-3 text-gray-700 sidebar-item"> |
|
|
<i class="fas fa-cog mr-3"></i> |
|
|
<span>Cài Đặt</span> |
|
|
</a> |
|
|
</nav> |
|
|
|
|
|
<div class="absolute bottom-0 w-64 p-4 border-t"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10"></div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">Restaurant Admin</p> |
|
|
<p class="text-xs text-gray-500">admin@restaurant.com</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<header class="bg-white shadow-sm"> |
|
|
<div class="flex items-center justify-between px-6 py-4"> |
|
|
<div class="flex items-center"> |
|
|
<button class="md:hidden text-gray-500 mr-4"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Bảng Điều Khiển</h2> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-bell text-xl"></i> |
|
|
<span class="absolute top-0 right-0 w-3 h-3 bg-red-500 rounded-full notification-dot"></span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10"></div> |
|
|
<span class="ml-2 text-gray-700 hidden md:block">Admin</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto p-6"> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
|
|
<div class="dashboard-card bg-white rounded-xl p-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<p class="text-gray-500">Tổng Đơn Hàng</p> |
|
|
<h3 class="text-2xl font-bold mt-1">142</h3> |
|
|
</div> |
|
|
<div class="bg-blue-100 p-3 rounded-lg"> |
|
|
<i class="fas fa-shopping-cart text-blue-500 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 12.5%</span> |
|
|
<span class="text-gray-500 text-sm ml-2">so với tuần trước</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="dashboard-card bg-white rounded-xl p-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<p class="text-gray-500">Doanh Thu</p> |
|
|
<h3 class="text-2xl font-bold mt-1">24.560.000₫</h3> |
|
|
</div> |
|
|
<div class="bg-green-100 p-3 rounded-lg"> |
|
|
<i class="fas fa-dollar-sign text-green-500 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 8.3%</span> |
|
|
<span class="text-gray-500 text-sm ml-2">so với tuần trước</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="dashboard-card bg-white rounded-xl p-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<p class="text-gray-500">Bàn Hoạt Động</p> |
|
|
<h3 class="text-2xl font-bold mt-1">24/30</h3> |
|
|
</div> |
|
|
<div class="bg-purple-100 p-3 rounded-lg"> |
|
|
<i class="fas fa-chair text-purple-500 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 5.2%</span> |
|
|
<span class="text-gray-500 text-sm ml-2">so với tuần trước</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="dashboard-card bg-white rounded-xl p-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<p class="text-gray-500">Thời Gian Đặt TB</p> |
|
|
<h3 class="text-2xl font-bold mt-1">18 phút</h3> |
|
|
</div> |
|
|
<div class="bg-amber-100 p-3 rounded-lg"> |
|
|
<i class="fas fa-clock text-amber-500 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-red-500 text-sm font-medium"><i class="fas fa-arrow-down"></i> 2.1%</span> |
|
|
<span class="text-gray-500 text-sm ml-2">so với tuần trước</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<div class="lg:col-span-2 dashboard-card bg-white rounded-xl p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Tổng Quan Doanh Thu</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded">Tuần</button> |
|
|
<button class="text-xs bg-blue-500 text-white px-3 py-1 rounded">Tháng</button> |
|
|
<button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded">Năm</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="chart-container"> |
|
|
<canvas id="revenueChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="dashboard-card bg-white rounded-xl p-6"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-6">Món Ăn Bán Chạy</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div> |
|
|
<div class="ml-4 flex-1"> |
|
|
<h4 class="font-medium">Cá Hồi Nướng</h4> |
|
|
<p class="text-gray-500 text-sm">24 đã bán hôm nay</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium">24.990₫</p> |
|
|
<p class="text-green-500 text-sm">+12%</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div> |
|
|
<div class="ml-4 flex-1"> |
|
|
<h4 class="font-medium">Mì Ý Truffle</h4> |
|
|
<p class="text-gray-500 text-sm">18 đã bán hôm nay</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium">18.500₫</p> |
|
|
<p class="text-green-500 text-sm">+8%</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div> |
|
|
<div class="ml-4 flex-1"> |
|
|
<h4 class="font-medium">Salad Caesar</h4> |
|
|
<p class="text-gray-500 text-sm">15 đã bán hôm nay</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium">12.990₫</p> |
|
|
<p class="text-red-500 text-sm">-3%</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div> |
|
|
<div class="ml-4 flex-1"> |
|
|
<h4 class="font-medium">Burger Bò</h4> |
|
|
<p class="text-gray-500 text-sm">14 đã bán hôm nay</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium">15.750₫</p> |
|
|
<p class="text-green-500 text-sm">+5%</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div> |
|
|
<div class="ml-4 flex-1"> |
|
|
<h4 class="font-medium">Bánh Socola</h4> |
|
|
<p class="text-gray-500 text-sm">12 đã bán hôm nay</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium">8.990₫</p> |
|
|
<p class="text-green-500 text-sm">+15%</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="dashboard-card bg-white rounded-xl p-6 mb-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Đơn Hàng Gần Đây</h3> |
|
|
<button class="text-blue-500 hover:text-blue-700 text-sm"> |
|
|
<i class="fas fa-external-link-alt mr-1"></i> Xem Tất Cả |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mã Đơn</th> |
|
|
<th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bàn</th> |
|
|
<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> |
|
|
<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> |
|
|
<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> |
|
|
<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> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-00125</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Bàn 5</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3 món</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">42.500₫</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> |
|
|
Hoàn Thành |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10:24</td> |
|
|
</tr> |
|
|
|
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-00124</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Bàn 12</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 món</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">28.750₫</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800"> |
|
|
Đang Làm |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10:18</td> |
|
|
</tr> |
|
|
|
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-00123</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Bàn 3</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5 món</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">67.300₫</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"> |
|
|
Đang Chuẩn Bị |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10:15</td> |
|
|
</tr> |
|
|
|
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-00122</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Bàn 8</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 món</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12.990₫</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"> |
|
|
Đã Hủy |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10:05</td> |
|
|
</tr> |
|
|
|
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-00121</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Bàn 15</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4 món</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">54.200₫</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> |
|
|
Hoàn Thành |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">9:52</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
|
|
<div class="dashboard-card bg-white rounded-xl p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Đơn Hàng Trực Tiếp</h3> |
|
|
<span class="relative flex h-3 w-3"> |
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span> |
|
|
<span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span> |
|
|
</span> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="order-item p-4 border rounded-lg"> |
|
|
<div class="flex justify-between"> |
|
|
<div> |
|
|
<h4 class="font-medium">Bàn 7</h4> |
|
|
<p class="text-gray-500 text-sm">2 món</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium">28.500₫</p> |
|
|
<p class="text-gray-500 text-sm">Vừa xong</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 flex items-center"> |
|
|
<span class="px-2 py-1 text-xs rounded bg-blue-100 text-blue-800">Đơn Mới</span> |
|
|
<button class="ml-2 text-xs bg-blue-500 text-white px-3 py-1 rounded">Nhận</button> |
|
|
<button class="ml-2 text-xs bg-gray-200 text-gray-700 px-3 py-1 rounded">Xem</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="order-item p-4 border rounded-lg"> |
|
|
<div class="flex justify-between"> |
|
|
<div> |
|
|
<h4 class="font-medium">Bàn 11</h4> |
|
|
<p class="text-gray-500 text-sm">3 món</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium">36.750₫</p> |
|
|
<p class="text-gray-500 text-sm">2 phút trước</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 flex items-center"> |
|
|
<span class="px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800">Đang Làm</span> |
|
|
<button class="ml-2 text-xs bg-gray-200 text-gray-700 px-3 py-1 rounded">Xem</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="order-item p-4 border rounded-lg"> |
|
|
<div class="flex justify-between"> |
|
|
<div> |
|
|
<h4 class="font-medium">Bàn 2</h4> |
|
|
<p class="text-gray-500 text-sm">1 món</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium">15.990₫</p> |
|
|
<p class="text-gray-500 text-sm">5 phút trước</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 flex items-center"> |
|
|
<span class="px-2 py-1 text-xs rounded bg-green-100 text-green-800">Sẵn Sàng</span> |
|
|
<button class="ml-2 text-xs bg-gray-200 text-gray-700 px-3 py-1 rounded">Xem</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="dashboard-card bg-white rounded-xl p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Trạng Thái Bàn</h3> |
|
|
<button class="text-blue-500 hover:text-blue-700 text-sm"> |
|
|
<i class="fas fa-sync-alt mr-1"></i> Làm Mới |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-3 gap-4"> |
|
|
<div class="text-center p-4 border rounded-lg bg-green-50 border-green-200"> |
|
|
<div class="text-2xl font-bold text-green-600">12</div> |
|
|
<div class="text-sm text-gray-600">Trống</div> |
|
|
</div> |
|
|
<div class="text-center p-4 border rounded-lg bg-amber-50 border-amber-200"> |
|
|
<div class="text-2xl font-bold text-amber-600">8</div> |
|
|
<div class="text-sm text-gray-600">Có Khách</div> |
|
|
</div> |
|
|
<div class="text-center p-4 border rounded-lg bg-red-50 border-red-200"> |
|
|
<div class="text-2xl font-bold text-red-600">10</div> |
|
|
<div class="text-sm text-gray-600">Đặt Trước</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<h4 class="font-medium mb-3">Table Map</h4> |
|
|
<div class="grid grid-cols-5 gap-2"> |
|
|
|
|
|
<div class="p-3 text-center bg-green-100 rounded-lg text-green-800 text-sm">T1</div> |
|
|
<div class="p-3 text-center bg-green-100 rounded-lg text-green-800 text-sm">T2</div> |
|
|
<div class="p-3 text-center bg-amber-100 rounded-lg text-amber-800 text-sm">T3</div> |
|
|
<div class="p-3 text-center bg-green-100 rounded-lg text-green-800 text-sm">T4</div> |
|
|
<div class="p-3 text-center bg-green-100 rounded-lg text-green-800 text-sm">T5</div> |
|
|
<div class="p-3 text-center bg-red-100 rounded-lg text-red-800 text-sm">T6</div> |
|
|
<div class="p-3 text-center bg-amber-100 rounded-lg text-amber-800 text-sm">T7</div> |
|
|
<div class="p-3 text-center bg-green-100 rounded-lg text-green-800 text-sm">T8</div> |
|
|
<div class="p-3 text-center bg-red-100 rounded-lg text-red-800 text-sm">T9</div> |
|
|
<div class="p-3 text-center bg-green-100 rounded-lg text-green-800 text-sm">T10</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const ctx = document.getElementById('revenueChart').getContext('2d'); |
|
|
const revenueChart = new Chart(ctx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
|
|
datasets: [{ |
|
|
label: 'This Week', |
|
|
data: [1200, 1900, 1500, 2200, 1800, 2500, 2100], |
|
|
borderColor: '#4361ee', |
|
|
backgroundColor: 'rgba(67, 97, 238, 0.1)', |
|
|
tension: 0.4, |
|
|
fill: true |
|
|
}, { |
|
|
label: 'Last Week', |
|
|
data: [1000, 1500, 1300, 1800, 1600, 2000, 1700], |
|
|
borderColor: '#4cc9f0', |
|
|
backgroundColor: 'rgba(76, 201, 240, 0.1)', |
|
|
tension: 0.4, |
|
|
borderDash: [5, 5], |
|
|
fill: true |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top', |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
grid: { |
|
|
drawBorder: false |
|
|
} |
|
|
}, |
|
|
x: { |
|
|
grid: { |
|
|
display: false |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
setInterval(() => { |
|
|
const now = new Date(); |
|
|
const timeString = now.toLocaleTimeString(); |
|
|
console.log(`Dashboard updated at ${timeString}`); |
|
|
}, 30000); |
|
|
}); |
|
|
</script> |
|
|
<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> |
|
|
</html> |
