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 - Caixa</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 <style>11 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');12 body {13 font-family: 'Inter', sans-serif;14 }15 </style>16</head>17<body class="bg-gray-50">18 <div class="min-h-screen">19 <header class="bg-white shadow-sm sticky top-0 z-10">20 <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">21 <div class="flex items-center space-x-6">22 <div class="flex items-center space-x-2">23 <i data-feather="dollar-sign" class="text-primary-600"></i>24 <h1 class="text-xl font-bold text-gray-800">TableMaster</h1>25 </div>26 <nav class="hidden md:flex items-center space-x-4">27 <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>28 <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>29 <a href="caixa.html" class="px-3 py-2 text-sm font-medium text-primary-600 bg-primary-50 rounded-md">Caixa</a>30 <a href="financeiro.html" class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition">Financeiro</a>31 </nav>32 </div>33 <div class="flex items-center space-x-4">34 <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition">35 <i data-feather="bell"></i>36 </button>37 <div class="flex items-center space-x-2">38 <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center text-white font-medium">JD</div>39 <span class="text-sm font-medium text-gray-700">John Doe</span>40 </div>41 </div>42 </div>43 </header>44 45 <main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">46 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">47 <div class="lg:col-span-2">48 <div class="bg-white rounded-lg shadow-sm p-6 mb-6">49 <h2 class="text-xl font-bold text-gray-800 mb-4">Contas para Fechar</h2>50 <div class="overflow-x-auto">51 <table class="min-w-full divide-y divide-gray-200">52 <thead class="bg-gray-50">53 <tr>54 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mesa</th>55 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cliente</th>56 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>57 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>58 </tr>59 </thead>60 <tbody class="bg-white divide-y divide-gray-200">61 <tr class="hover:bg-gray-50">62 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Mesa 02</td>63 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sarah Johnson</td>64 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 89,50</td>65 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">66 <button class="text-primary-600 hover:text-primary-900 mr-3">Ver</button>67 <button class="text-green-600 hover:text-green-900">Fechar</button>68 </td>69 </tr>70 <tr class="hover:bg-gray-50">71 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Mesa 05</td>72 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Anderson Family</td>73 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 156,80</td>74 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">75 <button class="text-primary-600 hover:text-primary-900 mr-3">Ver</button>76 <button class="text-green-600 hover:text-green-900">Fechar</button>77 </td>78 </tr>79 <tr class="hover:bg-gray-50">80 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Mesa 07</td>81 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Carlos Silva</td>82 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 72,30</td>83 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">84 <button class="text-primary-600 hover:text-primary-900 mr-3">Ver</button>85 <button class="text-green-600 hover:text-green-900">Fechar</button>86 </td>87 </tr>88 </tbody>89 </table>90 </div>91 </div>92 </div>93 <div>94 <div class="bg-white rounded-lg shadow-sm p-6 sticky top-24">95 <h2 class="text-xl font-bold text-gray-800 mb-4">Pagamento</h2>96 <div class="mb-4">97 <label class="block text-sm font-medium text-gray-700 mb-1">Forma de Pagamento</label>98 <select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-primary-500 focus:border-primary-500">99 <option>Dinheiro</option>100 <option>Cartão de Crédito</option>101 <option>Cartão de Débito</option>102 <option>PIX</option>103 </select>104 </div>105 <div class="mb-4">106 <label class="block text-sm font-medium text-gray-700 mb-1">Valor Total</label>107 <input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-primary-500 focus:border-primary-500" value="R$ 89,50" disabled>108 </div>109 <div class="mb-4">110 <label class="block text-sm font-medium text-gray-700 mb-1">Desconto</label>111 <input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-primary-500 focus:border-primary-500" placeholder="R$ 0,00">112 </div>113 <div class="mb-6">114 <label class="block text-sm font-medium text-gray-700 mb-1">Valor Final</label>115 <input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2 bg-gray-100 focus:outline-none focus:ring-primary-500 focus:border-primary-500" value="R$ 89,50" disabled>116 </div>117 <button class="w-full py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 transition">118 Finalizar Pagamento119 </button>120 </div>121 </div>122 </div>123 </main>124 </div>125 <script>126 feather.replace();127 </script>128</body>129</html>