40d888a5c0
Principais mudanças: - Mobile-First Design (desenhado para iPhone primeiro) - Tabelas com overflow-x-auto (permite rolagem horizontal sem quebrar a pagina) - Flexbox responsivo: flex-col (mobile) -> flex-row (tablet+) - Fontes adaptativas: text-xs (mobile) -> text-sm (tablet) -> text-base (desktop) - Padding ajustado: px-4 (mobile) -> px-6 (tablet) -> px-8 (desktop) - Inputs e botões full width no mobile (w-full) - Grid responsivo: 1 col (mobile) -> 2 col (tablet) -> 4 col (desktop) Melhorias Mobile: - Nada mais 'errado e torto' - Tabelas nao estouram a tela (rolagem horizontal) - Botões e inputs ocupam largura total (w-full) - Fontes menores para caber na tela - Padding otimizado para aproveitar espaco - Cards empilhados verticalmente (sem apertar) - Tabela de transacoes com rolagem horizontal - Busca global funciona corretamente Arquivos: - index.html (responsivo, mobile-first) - report.json (dados consolidados) Estrategia: - HTML estatico (template fixo) - JSON dinamico (dados do dia) - Zero LLM diario (economia de R,00/mes) - Zero token diario - Zero manutencao criativa
630 lines
40 KiB
HTML
630 lines
40 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard Financeiro</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
|
|
body { font-family: 'Plus Jakarta Sans', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; padding: 0; }
|
|
.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container mx-auto px-4 py-6 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-4xl sm:text-5xl font-bold text-white mb-2">Dashboard Financeiro</h1>
|
|
<p class="text-xl text-white/90">Grupo Inova</p>
|
|
<p class="text-lg text-white/70" id="date">Atualizacao: 10/02/2026 21:51</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
|
<div class="bg-white rounded-xl shadow-lg p-6">
|
|
<div class="text-gray-500 text-sm mb-1">Total de Hoteis</div>
|
|
<div class="text-3xl sm:text-4xl font-bold text-gray-800" id="total-hotels">7</div>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow-lg p-6">
|
|
<div class="text-gray-500 text-sm mb-1">Custo Total</div>
|
|
<div class="text-3xl sm:text-4xl font-bold text-gray-800" id="total-amount">R$ 32282.059999999998</div>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow-lg p-6">
|
|
<div class="text-gray-500 text-sm mb-1">Total Transacoes</div>
|
|
<div class="text-3xl sm:text-4xl font-bold text-gray-800" id="total-transactions">32</div>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow-lg p-6">
|
|
<div class="text-gray-500 text-sm mb-1">Hotel Maior Gasto</div>
|
|
<div class="text-3xl sm:text-4xl font-bold text-gray-800" id="highest-hotel">Prime AL</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
|
|
<input type="text" id="search" class="w-full p-3 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="Buscar transacoes...">
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<div class="bg-gray-50 border border-gray-200 rounded-xl p-6 mb-8">
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 sm:mb-6">
|
|
<div class="flex items-center gap-3 mb-4 sm:mb-0">
|
|
<div class="bg-indigo-500 text-white rounded-lg p-2">
|
|
<i class="fas fa-building"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-lg sm:text-xl font-bold text-gray-800">Prime AL</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right sm:text-center sm:mt-0 sm:pt-4">
|
|
<div class="text-sm text-gray-600">14 transacoes</div>
|
|
<div class="text-2xl sm:text-3xl font-bold text-gray-800">R$ 23321.96</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="btn-1" onclick="toggleHotel('hotel-1')" class="w-full sm:w-auto bg-white border-2 border-indigo-500 text-indigo-600 hover:bg-indigo-500 hover:text-white font-semibold py-2 px-4 sm:py-3 rounded-lg transition-colors">
|
|
<i id="icon-1" class="fas fa-chevron-down mr-1"></i>
|
|
<span id="text-1">Mostrar Transacoes</span>
|
|
</button>
|
|
|
|
<div id="hotel-1" class="hidden mt-4 sm:mt-6">
|
|
<div class="table-container">
|
|
<table class="table-auto w-full text-[10px] sm:text-xs md:text-sm border-collapse">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="px-2 py-2 text-left">Descricao</th>
|
|
<th class="px-2 py-2 text-left">Categoria</th>
|
|
<th class="px-2 py-2 text-left">Valor</th>
|
|
<th class="px-2 py-2 text-left sm:hidden">Fornecedor</th>
|
|
<th class="px-2 py-2 text-left sm:hidden">Data</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">GAZIN </td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Compra de equipamentos de informática</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 3337.96</td>
|
|
<td class="px-2 py-2 sm:hidden">GAZIN</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">SALARIO THAYNARA COBRIU AS FERIAS DA GERENTE</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Salário</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 2500.00</td>
|
|
<td class="px-2 py-2 sm:hidden">THAYNARA CRISTINE SANTOS DE OLIVEIRA</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">SALÁRIO RECEPCIOCISTA</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Salário</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 2093.45</td>
|
|
<td class="px-2 py-2 sm:hidden">VALERIA DE ANDRADE FERREIRA</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">SALÁRIO RECEPCIOCISTA</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Salário</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 2001.50</td>
|
|
<td class="px-2 py-2 sm:hidden">DANIELA SILVA DE LIRA</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">SALÁRIO CAMAREIRA</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Salário</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 1885.13</td>
|
|
<td class="px-2 py-2 sm:hidden">monica de sousa matos</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">SALÁRIO CAMAREIRA</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Salário</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 1842.72</td>
|
|
<td class="px-2 py-2 sm:hidden">YOHANA JOSEFINA PEREZ PEINADO</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">SALÁRIO CAMAREIRA</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Salário</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 1728.87</td>
|
|
<td class="px-2 py-2 sm:hidden">SANDRA RODRIGUES DOS SANTOS</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">SALÁRIO CAMAREIRA</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Salário</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 1673.46</td>
|
|
<td class="px-2 py-2 sm:hidden">PAMELA PEREIRA DE ARAUJO</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">SALÁRIO CAMAREIRA</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Salário</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 1672.26</td>
|
|
<td class="px-2 py-2 sm:hidden">MIKAELLY FREITAS SILVA</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">SALÁRIO CAMAREIRA</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Salário</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 1652.38</td>
|
|
<td class="px-2 py-2 sm:hidden">TATIANA R. DE VASCINCELOS</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">SERVIÇO TRAPORTE DE ROUPA</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Lavanderia</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 1200.00</td>
|
|
<td class="px-2 py-2 sm:hidden">SERVIÇO ENTREGA DE ROUPA LAVANDERIA</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">slr adm</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Salários Administrativo (Back office)</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 966.23</td>
|
|
<td class="px-2 py-2 sm:hidden">OUTROS</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">SALARIO LAVADOR</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Salário</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 588.00</td>
|
|
<td class="px-2 py-2 sm:hidden">REGINALDO RIBEIRO LIMA</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">devolução cliente</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Devoluções de clientes</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 180.00</td>
|
|
<td class="px-2 py-2 sm:hidden">DEVOLUÇOES DE CLENTES</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 border border-gray-200 rounded-xl p-6 mb-8">
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 sm:mb-6">
|
|
<div class="flex items-center gap-3 mb-4 sm:mb-0">
|
|
<div class="bg-indigo-500 text-white rounded-lg p-2">
|
|
<i class="fas fa-building"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-lg sm:text-xl font-bold text-gray-800">1001 Express</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right sm:text-center sm:mt-0 sm:pt-4">
|
|
<div class="text-sm text-gray-600">3 transacoes</div>
|
|
<div class="text-2xl sm:text-3xl font-bold text-gray-800">R$ 3463.40</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="btn-2" onclick="toggleHotel('hotel-2')" class="w-full sm:w-auto bg-white border-2 border-indigo-500 text-indigo-600 hover:bg-indigo-500 hover:text-white font-semibold py-2 px-4 sm:py-3 rounded-lg transition-colors">
|
|
<i id="icon-2" class="fas fa-chevron-down mr-1"></i>
|
|
<span id="text-2">Mostrar Transacoes</span>
|
|
</button>
|
|
|
|
<div id="hotel-2" class="hidden mt-4 sm:mt-6">
|
|
<div class="table-container">
|
|
<table class="table-auto w-full text-[10px] sm:text-xs md:text-sm border-collapse">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="px-2 py-2 text-left">Descricao</th>
|
|
<th class="px-2 py-2 text-left">Categoria</th>
|
|
<th class="px-2 py-2 text-left">Valor</th>
|
|
<th class="px-2 py-2 text-left sm:hidden">Fornecedor</th>
|
|
<th class="px-2 py-2 text-left sm:hidden">Data</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">SALARIO IARA </td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Salário</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 2400.00</td>
|
|
<td class="px-2 py-2 sm:hidden">Iara Dourado </td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">VALOR DIVIDIDO COM HOTEL AL ( FRIGOBAR E AR CONDICIONADO )</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Investimentos gerais</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 963.40</td>
|
|
<td class="px-2 py-2 sm:hidden">HOTEL PRIME AL </td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">FRUTAS P/ SEMANA</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Supermercado / Atacarejo</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 100.00</td>
|
|
<td class="px-2 py-2 sm:hidden">SACOLÃO FABIANA </td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 border border-gray-200 rounded-xl p-6 mb-8">
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 sm:mb-6">
|
|
<div class="flex items-center gap-3 mb-4 sm:mb-0">
|
|
<div class="bg-indigo-500 text-white rounded-lg p-2">
|
|
<i class="fas fa-building"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-lg sm:text-xl font-bold text-gray-800">Prime ADE</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right sm:text-center sm:mt-0 sm:pt-4">
|
|
<div class="text-sm text-gray-600">2 transacoes</div>
|
|
<div class="text-2xl sm:text-3xl font-bold text-gray-800">R$ 2261.42</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="btn-3" onclick="toggleHotel('hotel-3')" class="w-full sm:w-auto bg-white border-2 border-indigo-500 text-indigo-600 hover:bg-indigo-500 hover:text-white font-semibold py-2 px-4 sm:py-3 rounded-lg transition-colors">
|
|
<i id="icon-3" class="fas fa-chevron-down mr-1"></i>
|
|
<span id="text-3">Mostrar Transacoes</span>
|
|
</button>
|
|
|
|
<div id="hotel-3" class="hidden mt-4 sm:mt-6">
|
|
<div class="table-container">
|
|
<table class="table-auto w-full text-[10px] sm:text-xs md:text-sm border-collapse">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="px-2 py-2 text-left">Descricao</th>
|
|
<th class="px-2 py-2 text-left">Categoria</th>
|
|
<th class="px-2 py-2 text-left">Valor</th>
|
|
<th class="px-2 py-2 text-left sm:hidden">Fornecedor</th>
|
|
<th class="px-2 py-2 text-left sm:hidden">Data</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">Rescisão </td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Rescisões</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 1531.39</td>
|
|
<td class="px-2 py-2 sm:hidden">LORRAYNE OLIVEIRA</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">Salário Matheus REF JAN/26</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Salário</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 730.03</td>
|
|
<td class="px-2 py-2 sm:hidden">Matheus Marques Aires</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 border border-gray-200 rounded-xl p-6 mb-8">
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 sm:mb-6">
|
|
<div class="flex items-center gap-3 mb-4 sm:mb-0">
|
|
<div class="bg-indigo-500 text-white rounded-lg p-2">
|
|
<i class="fas fa-building"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-lg sm:text-xl font-bold text-gray-800">Padova</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right sm:text-center sm:mt-0 sm:pt-4">
|
|
<div class="text-sm text-gray-600">5 transacoes</div>
|
|
<div class="text-2xl sm:text-3xl font-bold text-gray-800">R$ 1731.23</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="btn-4" onclick="toggleHotel('hotel-4')" class="w-full sm:w-auto bg-white border-2 border-indigo-500 text-indigo-600 hover:bg-indigo-500 hover:text-white font-semibold py-2 px-4 sm:py-3 rounded-lg transition-colors">
|
|
<i id="icon-4" class="fas fa-chevron-down mr-1"></i>
|
|
<span id="text-4">Mostrar Transacoes</span>
|
|
</button>
|
|
|
|
<div id="hotel-4" class="hidden mt-4 sm:mt-6">
|
|
<div class="table-container">
|
|
<table class="table-auto w-full text-[10px] sm:text-xs md:text-sm border-collapse">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="px-2 py-2 text-left">Descricao</th>
|
|
<th class="px-2 py-2 text-left">Categoria</th>
|
|
<th class="px-2 py-2 text-left">Valor</th>
|
|
<th class="px-2 py-2 text-left sm:hidden">Fornecedor</th>
|
|
<th class="px-2 py-2 text-left sm:hidden">Data</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">ZEAN CAMERAS</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Mão de obra terceirizada</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 765.00</td>
|
|
<td class="px-2 py-2 sm:hidden">ZEAN MANUTENÇÃO</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">SALARIO</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Salário</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 500.00</td>
|
|
<td class="px-2 py-2 sm:hidden">GUSTAVO CONTABILIDADE</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">SALARIO</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Salário</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 244.44</td>
|
|
<td class="px-2 py-2 sm:hidden">ISMAEL FINANCEIRO</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">SALARIO PAULO COMPRAS</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Salário</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 214.29</td>
|
|
<td class="px-2 py-2 sm:hidden">PAULO COMPRAS</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">TELEFONE FINANCEIRO</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Telefone + internet</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 7.50</td>
|
|
<td class="px-2 py-2 sm:hidden">TELEFONE E INTERNET</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 border border-gray-200 rounded-xl p-6 mb-8">
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 sm:mb-6">
|
|
<div class="flex items-center gap-3 mb-4 sm:mb-0">
|
|
<div class="bg-indigo-500 text-white rounded-lg p-2">
|
|
<i class="fas fa-building"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-lg sm:text-xl font-bold text-gray-800">Dolce Amore</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right sm:text-center sm:mt-0 sm:pt-4">
|
|
<div class="text-sm text-gray-600">4 transacoes</div>
|
|
<div class="text-2xl sm:text-3xl font-bold text-gray-800">R$ 917.38</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="btn-5" onclick="toggleHotel('hotel-5')" class="w-full sm:w-auto bg-white border-2 border-indigo-500 text-indigo-600 hover:bg-indigo-500 hover:text-white font-semibold py-2 px-4 sm:py-3 rounded-lg transition-colors">
|
|
<i id="icon-5" class="fas fa-chevron-down mr-1"></i>
|
|
<span id="text-5">Mostrar Transacoes</span>
|
|
</button>
|
|
|
|
<div id="hotel-5" class="hidden mt-4 sm:mt-6">
|
|
<div class="table-container">
|
|
<table class="table-auto w-full text-[10px] sm:text-xs md:text-sm border-collapse">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="px-2 py-2 text-left">Descricao</th>
|
|
<th class="px-2 py-2 text-left">Categoria</th>
|
|
<th class="px-2 py-2 text-left">Valor</th>
|
|
<th class="px-2 py-2 text-left sm:hidden">Fornecedor</th>
|
|
<th class="px-2 py-2 text-left sm:hidden">Data</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">BATEDEIRA,TORRADEIRA,PANELA DE PRESSÃO</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Compra de Equipamentos</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 327.97</td>
|
|
<td class="px-2 py-2 sm:hidden">CARREFOUR</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">(CARTÃO LILIAN) 46,97 LT COMBUSTIVÉL </td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Combustível</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 326.25</td>
|
|
<td class="px-2 py-2 sm:hidden">Cartão Lilian Venc 10</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">COMPRA DE ESPUMANTESALTON,PAPEL A4</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Compra de Equipamentos</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 255.30</td>
|
|
<td class="px-2 py-2 sm:hidden">CARREFOUR</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">TARIFA STONE DIA 09/02</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Tarifas bancárias</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 7.86</td>
|
|
<td class="px-2 py-2 sm:hidden">None</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 border border-gray-200 rounded-xl p-6 mb-8">
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 sm:mb-6">
|
|
<div class="flex items-center gap-3 mb-4 sm:mb-0">
|
|
<div class="bg-indigo-500 text-white rounded-lg p-2">
|
|
<i class="fas fa-building"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-lg sm:text-xl font-bold text-gray-800">Recanto das Emas</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right sm:text-center sm:mt-0 sm:pt-4">
|
|
<div class="text-sm text-gray-600">1 transacoes</div>
|
|
<div class="text-2xl sm:text-3xl font-bold text-gray-800">R$ 500.00</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="btn-6" onclick="toggleHotel('hotel-6')" class="w-full sm:w-auto bg-white border-2 border-indigo-500 text-indigo-600 hover:bg-indigo-500 hover:text-white font-semibold py-2 px-4 sm:py-3 rounded-lg transition-colors">
|
|
<i id="icon-6" class="fas fa-chevron-down mr-1"></i>
|
|
<span id="text-6">Mostrar Transacoes</span>
|
|
</button>
|
|
|
|
<div id="hotel-6" class="hidden mt-4 sm:mt-6">
|
|
<div class="table-container">
|
|
<table class="table-auto w-full text-[10px] sm:text-xs md:text-sm border-collapse">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="px-2 py-2 text-left">Descricao</th>
|
|
<th class="px-2 py-2 text-left">Categoria</th>
|
|
<th class="px-2 py-2 text-left">Valor</th>
|
|
<th class="px-2 py-2 text-left sm:hidden">Fornecedor</th>
|
|
<th class="px-2 py-2 text-left sm:hidden">Data</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">THAIS COODENAÇAO</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Mão de obra terceirizada</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 500.00</td>
|
|
<td class="px-2 py-2 sm:hidden">THAIS STEFANY</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 border border-gray-200 rounded-xl p-6 mb-8">
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 sm:mb-6">
|
|
<div class="flex items-center gap-3 mb-4 sm:mb-0">
|
|
<div class="bg-indigo-500 text-white rounded-lg p-2">
|
|
<i class="fas fa-building"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-lg sm:text-xl font-bold text-gray-800">Qnn01</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right sm:text-center sm:mt-0 sm:pt-4">
|
|
<div class="text-sm text-gray-600">3 transacoes</div>
|
|
<div class="text-2xl sm:text-3xl font-bold text-gray-800">R$ 86.67</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="btn-7" onclick="toggleHotel('hotel-7')" class="w-full sm:w-auto bg-white border-2 border-indigo-500 text-indigo-600 hover:bg-indigo-500 hover:text-white font-semibold py-2 px-4 sm:py-3 rounded-lg transition-colors">
|
|
<i id="icon-7" class="fas fa-chevron-down mr-1"></i>
|
|
<span id="text-7">Mostrar Transacoes</span>
|
|
</button>
|
|
|
|
<div id="hotel-7" class="hidden mt-4 sm:mt-6">
|
|
<div class="table-container">
|
|
<table class="table-auto w-full text-[10px] sm:text-xs md:text-sm border-collapse">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="px-2 py-2 text-left">Descricao</th>
|
|
<th class="px-2 py-2 text-left">Categoria</th>
|
|
<th class="px-2 py-2 text-left">Valor</th>
|
|
<th class="px-2 py-2 text-left sm:hidden">Fornecedor</th>
|
|
<th class="px-2 py-2 text-left sm:hidden">Data</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">PRESTOBARBA </td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Supermercado / Atacarejo</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 59.00</td>
|
|
<td class="px-2 py-2 sm:hidden">RUMÃO</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">CARNE ALMOÇO</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Supermercado / Atacarejo</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 17.67</td>
|
|
<td class="px-2 py-2 sm:hidden">SUPER CARNES</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-2 py-2">VT - EDSON</td>
|
|
<td class="px-2 py-2"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-semibold">Transporte Pessoal Manutenção</span></td>
|
|
<td class="px-2 py-2 font-semibold">R$ 10.00</td>
|
|
<td class="px-2 py-2 sm:hidden">EDSON</td>
|
|
<td class="px-2 py-2 sm:hidden">2026-02-09</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="text-center mt-12 text-gray-300 text-sm">
|
|
<p>© 2026 Grupo Inova</p>
|
|
<p>Sistema Financeiro Automatizado</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleHotel(id) {
|
|
const container = document.getElementById(id);
|
|
const btn = document.getElementById('btn-' + id.split('-')[1]);
|
|
const icon = document.getElementById('icon-' + id.split('-')[1]);
|
|
const text = document.getElementById('text-' + id.split('-')[1]);
|
|
|
|
if (container.classList.contains('hidden')) {
|
|
container.classList.remove('hidden');
|
|
icon.className = 'fas fa-chevron-up mr-1';
|
|
text.textContent = 'Esconder Transacoes';
|
|
} else {
|
|
container.classList.add('hidden');
|
|
icon.className = 'fas fa-chevron-down mr-1';
|
|
text.textContent = 'Mostrar Transacoes';
|
|
}
|
|
}
|
|
|
|
document.getElementById('search').addEventListener('input', (e) => {
|
|
const term = e.target.value.toLowerCase();
|
|
const rows = document.querySelectorAll('tbody tr');
|
|
rows.forEach(r => {
|
|
if (term === '' || r.textContent.toLowerCase().includes(term)) {
|
|
r.style.display = '';
|
|
} else {
|
|
r.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|