Netovero/tablemaster-delight
0
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>TableMaster - Financeiro</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>11 <style>12 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');13 body {14 font-family: 'Inter', sans-serif;15 }16 </style>17</head>18<body class="bg-gray-50">19 <div class="min-h-screen">20 <header class="bg-white shadow-sm sticky top-0 z-10">21 <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">22 <div class="flex items-center space-x-6">23 <div class="flex items-center space-x-2">24 <i data-feather="pie-chart" class="text-primary-600"></i>25 <h1 class="text-xl font-bold text-gray-800">TableMaster</h1>26 </div>27 <nav class="hidden md:flex items-center space-x-4">28 <a href="index.html" class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition">Mesas</a>29 <a href="garcom.html" class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition">Garçom</a>30 <a href="caixa.html" class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition">Caixa</a>31 <a href="financeiro.html" class="px-3 py-2 text-sm font-medium text-primary-600 bg-primary-50 rounded-md">Financeiro</a>32 </nav>33 </div>34 <div class="flex items-center space-x-4">35 <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition">36 <i data-feather="bell"></i>37 </button>38 <div class="flex items-center space-x-2">39 <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center text-white font-medium">JD</div>40 <span class="text-sm font-medium text-gray-700">John Doe</span>41 </div>42 </div>43 </div>44 </header>45 46 <main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">47 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">48 <div class="bg-white p-6 rounded-lg shadow-sm">49 <h3 class="text-lg font-medium text-gray-800 mb-2">Faturamento Hoje</h3>50 <p class="text-3xl font-bold text-gray-800">R$ 2.845,70</p>51 <p class="text-sm text-green-600 mt-1">+12% em relação a ontem</p>52 </div>53 <div class="bg-white p-6 rounded-lg shadow-sm">54 <h3 class="text-lg font-medium text-gray-800 mb-2">Faturamento Mensal</h3>55 <p class="text-3xl font-bold text-gray-800">R$ 48.920,50</p>56 <p class="text-sm text-green-600 mt-1">+8% em relação ao mês passado</p>57 </div>58 <div class="bg-white p-6 rounded-lg shadow-sm">59 <h3 class="text-lg font-medium text-gray-800 mb-2">Média por Mesa</h3>60 <p class="text-3xl font-bold text-gray-800">R$ 118,60</p>61 <p class="text-sm text-red-600 mt-1">-3% em relação ao mês passado</p>62 </div>63 </div>64 65 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">66 <div class="bg-white p-6 rounded-lg shadow-sm">67 <h3 class="text-lg font-medium text-gray-800 mb-4">Faturamento Semanal</h3>68 <canvas id="weeklyChart" height="250"></canvas>69 </div>70 <div class="bg-white p-6 rounded-lg shadow-sm">71 <h3 class="text-lg font-medium text-gray-800 mb-4">Formas de Pagamento</h3>72 <canvas id="paymentChart" height="250"></canvas>73 </div>74 </div>75 76 <div class="bg-white rounded-lg shadow-sm overflow-hidden">77 <div class="p-6">78 <h3 class="text-lg font-medium text-gray-800 mb-4">Últimos Pagamentos</h3>79 <div class="overflow-x-auto">80 <table class="min-w-full divide-y divide-gray-200">81 <thead class="bg-gray-50">82 <tr>83 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data/Hora</th>84 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mesa</th>85 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Valor</th>86 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Forma de Pagamento</th>87 </tr>88 </thead>89 <tbody class="bg-white divide-y divide-gray-200">90 <tr class="hover:bg-gray-50">91 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10/06/2023 21:15</td>92 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Mesa 05</td>93 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 156,80</td>94 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Cartão de Crédito</td>95 </tr>96 <tr class="hover:bg-gray-50">97 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10/06/2023 20:30</td>98 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Mesa 02</td>99 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 89,50</td>100 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">PIX</td>101 </tr>102 <tr class="hover:bg-gray-50">103 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10/06/2023 19:45</td>104 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Mesa 08</td>105 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 124,20</td>106 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Cartão de Débito</td>107 </tr>108 </tbody>109 </table>110 </div>111 </div>112 </div>113 </main>114 </div>115 116 <script>117 feather.replace();118 119 // Weekly Chart120 const weeklyCtx = document.getElementById('weeklyChart').getContext('2d');121 const weeklyChart = new Chart(weeklyCtx, {122 type: 'bar',123 data: {124 labels: ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],125 datasets: [{126 label: 'Faturamento (R$)',127 data: [1200, 1900, 1500, 2000, 2500, 3000, 2845],128 backgroundColor: '#4F46E5',129 borderColor: '#4F46E5',130 borderWidth: 1131 }]132 },133 options: {134 responsive: true,135 scales: {136 y: {137 beginAtZero: true138 }139 }140 }141 });142 143 // Payment Methods Chart144 const paymentCtx = document.getElementById('paymentChart').getContext('2d');145 const paymentChart = new Chart(paymentCtx, {146 type: 'doughnut',147 data: {148 labels: ['Cartão de Crédito', 'Cartão de Débito', 'Dinheiro', 'PIX'],149 datasets: [{150 data: [45, 25, 15, 15],151 backgroundColor: [152 '#4F46E5',153 '#10B981',154 '#F59E0B',155 '#EF4444'156 ],157 borderWidth: 1158 }]159 },160 options: {161 responsive: true,162 plugins: {163 legend: {164 position: 'right',165 }166 }167 }168 });169 </script>170</body>171</html>