Spaces:
Running
Running
Ctrl+K
TAB BÁO CÁO HÀNG NGÀY CHỈ BAO GỒM: <!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Quản trị báo cáo - Hệ thống kho hàng TVL</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <body class="bg-gray-100 text-gray-800 p-6"> <!-- Header --> <div class="mb-6"> <h1 class="text-2xl font-bold">📦 Dashboard quản lý kho hàng TVL</h1> <p class="text-sm text-gray-500">Theo dõi hoạt động cân hàng và lưu kho theo thời gian thực</p> </div> <!-- KPI cards --> <div class="grid grid-cols-2 gap-4 mb-6"> <div class="bg-white rounded-2xl shadow p-4"> <p class="text-sm text-gray-500">🚛 Lượt xe vào hôm nay</p> <h2 class="text-3xl font-bold text-blue-600">36</h2> </div> <div class="bg-white rounded-2xl shadow p-4"> <p class="text-sm text-gray-500">⚖️ Tổng khối lượng hôm nay</p> <h2 class="text-3xl font-bold text-green-600">182,360 kg</h2> </div> </div> <!-- Charts & Top data --> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> <!-- Line Chart --> <div class="bg-white rounded-2xl shadow p-4"> <p class="font-semibold mb-2">📈 Trọng lượng hàng theo tuần</p> <canvas id="weightChart"></canvas> </div> <!-- Top hàng nặng --> <div class="bg-white rounded-2xl shadow p-4"> <p class="font-semibold mb-2">🏆 Top 5 xe có hàng nặng nhất hôm nay</p> <ul class="text-sm space-y-1"> <li>51C-123.45 - 10,200 kg</li> <li>51D-678.90 - 9,850 kg</li> <li>60A-123.78 - 9,740 kg</li> <li>61B-332.18 - 9,300 kg</li> <li>50F-999.99 - 9,100 kg</li> </ul> </div> </div> <!-- Table recent trucks --> <div class="bg-white rounded-2xl shadow p-4"> <p class="font-semibold mb-2">🕑 Danh sách xe vào kho gần đây</p> <div class="overflow-auto"> <table class="table-auto w-full text-sm"> <thead> <tr class="bg-gray-100"> <th class="p-2 text-left">Biển số</th> <th class="p-2 text-left">Giờ vào</th> <th class="p-2 text-left">Trọng lượng</th> <th class="p-2 text-left">Nhân viên</th> </tr> </thead> <tbody> <tr class="border-t"> <td class="p-2">51C-123.45</td> <td class="p-2">09:15</td> <td class="p-2">10,200 kg</td> <td class="p-2">Nguyễn Văn A</td> </tr> <tr class="border-t"> <td class="p-2">51D-678.90</td> <td class="p-2">09:45</td> <td class="p-2">9,850 kg</td> <td class="p-2">Trần Thị B</td> </tr> <tr class="border-t"> <td class="p-2">60A-123.78</td> <td class="p-2">10:00</td> <td class="p-2">9,740 kg</td> <td class="p-2">Lê Văn C</td> </tr> </tbody> </table> </div> </div> <!-- Chart.js script --> <script> const ctx = document.getElementById('weightChart').getContext('2d'); new Chart(ctx, { type: 'line', data: { labels: ['T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'], datasets: [{ label: 'Tổng trọng lượng (kg)', data: [120000, 135000, 142000, 126000, 160000, 182000, 172000], borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.1)', tension: 0.4 }] }, options: { responsive: true, scales: { y: { beginAtZero: false } } } }); </script> </body> </html> - Initial Deployment
d41db3f verified