de5a405723
Conteúdo atualizado: - Dashboard completo com 7 hotéis - Total de gastos: R$ 12.009,62 - Análise por hotel e categoria - Design responsivo com Tailwind CSS - Gráficos de progresso e tabelas organizadas Relatório financeiro do dia 09/02/2026
326 lines
15 KiB
HTML
326 lines
15 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 - Grupo Inova</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>
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.dashboard-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
.card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
padding: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.stat-card {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 1rem;
|
|
}
|
|
.table th {
|
|
background: #f8f9fa;
|
|
padding: 0.75rem;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
border-bottom: 2px solid #e0e0e0;
|
|
}
|
|
.table td {
|
|
padding: 0.75rem;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
text-align: left;
|
|
}
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
.badge-success { background: #10b981; color: white; }
|
|
.badge-warning { background: #f59e0b; color: white; }
|
|
.badge-info { background: #3b82f6; color: white; }
|
|
.badge-danger { background: #ef4444; color: white; }
|
|
.chart-container {
|
|
position: relative;
|
|
height: 300px;
|
|
margin-top: 1rem;
|
|
}
|
|
.progress-bar {
|
|
height: 8px;
|
|
background: #e0e0e0;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
margin-top: 0.5rem;
|
|
}
|
|
.progress-fill {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
.last-updated {
|
|
font-size: 0.875rem;
|
|
color: #6b7280;
|
|
text-align: right;
|
|
margin-top: 0.5rem;
|
|
}
|
|
.hotel-card {
|
|
transition: transform 0.2s;
|
|
}
|
|
.hotel-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="dashboard-container">
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-4xl font-bold text-white mb-2">📊 Dashboard Financeiro</h1>
|
|
<p class="text-xl text-white/90">Grupo Inova - Squad Financeiro</p>
|
|
<p class="text-lg text-white/70" id="last-updated">Última atualização: 09/02/2026 às 19:45 UTC (16:45 BRT)</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
|
<div class="stat-card">
|
|
<i class="fas fa-hotel text-4xl mb-2"></i>
|
|
<p class="text-sm text-white/70">Total de Hotéis</p>
|
|
<p class="text-3xl font-bold">7</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<i class="fas fa-dollar-sign text-4xl mb-2"></i>
|
|
<p class="text-sm text-white/70">Custo Total</p>
|
|
<p class="text-3xl font-bold">R$ 12.009,62</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<i class="fas fa-chart-line text-4xl mb-2"></i>
|
|
<p class="text-sm text-white/70">Média por Hotel</p>
|
|
<p class="text-3xl font-bold">R$ 1.715,66</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<i class="fas fa-trending-up text-4xl mb-2"></i>
|
|
<p class="text-sm text-white/70">Hotel com Maior Gasto</p>
|
|
<p class="text-3xl font-bold">Dolce Amore</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4">📈 Análise por Hotel</h2>
|
|
<div class="overflow-x-auto">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th class="w-1/5">Hotel</th>
|
|
<th class="w-1/5">Gastos</th>
|
|
<th class="w-1/5">% do Total</th>
|
|
<th class="w-1/5">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="font-semibold">Dolce Amore</td>
|
|
<td>R$ 3.279,97</td>
|
|
<td>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill bg-red-500" style="width: 27.3%"></div>
|
|
</div>
|
|
</td>
|
|
<td><span class="badge badge-warning">Atenção</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="font-semibold">1001 Express</td>
|
|
<td>R$ 2.400,00</td>
|
|
<td>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill bg-orange-500" style="width: 20.0%"></div>
|
|
</div>
|
|
</td>
|
|
<td><span class="badge badge-info">Normal</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="font-semibold">Prime ADE</td>
|
|
<td>R$ 2.540,00</td>
|
|
<td>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill bg-yellow-500" style="width: 21.1%"></div>
|
|
</div>
|
|
</td>
|
|
<td><span class="badge badge-info">Normal</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="font-semibold">Recanto das Emas</td>
|
|
<td>R$ 2.000,00</td>
|
|
<td>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill bg-green-500" style="width: 16.7%"></div>
|
|
</div>
|
|
</td>
|
|
<td><span class="badge badge-success">Ótimo</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="font-semibold">Qnn01</td>
|
|
<td>R$ 326,25</td>
|
|
<td>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill bg-green-500" style="width: 2.7%"></div>
|
|
</div>
|
|
</td>
|
|
<td><span class="badge badge-success">Ótimo</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="font-semibold">Páduva</td>
|
|
<td>R$ 500,00</td>
|
|
<td>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill bg-green-500" style="width: 4.2%"></div>
|
|
</div>
|
|
</td>
|
|
<td><span class="badge badge-success">Ótimo</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="font-semibold">Prime VL</td>
|
|
<td>R$ 96,40</td>
|
|
<td>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill bg-green-500" style="width: 0.8%"></div>
|
|
</div>
|
|
</td>
|
|
<td><span class="badge badge-success">Ótimo</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p class="text-sm text-gray-600 mt-2">
|
|
<i class="fas fa-info-circle"></i>
|
|
O hotel com maior custo é <strong>Dolce Amore</strong> (27.3% do total).
|
|
O hotel com menor custo é <strong>Prime VL</strong> (0.8% do total).
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4">📊 Distribuição por Categoria</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<h3 class="font-semibold text-gray-700 mb-2">💼 Salários</h3>
|
|
<p class="text-3xl font-bold text-blue-600">R$ 12.009,62</p>
|
|
<p class="text-sm text-gray-600">100.0% do total</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<h3 class="font-semibold text-gray-700 mb-2">🏢 Operacionais</h3>
|
|
<p class="text-3xl font-bold text-gray-700">R$ 0,00</p>
|
|
<p class="text-sm text-gray-600">0.0% do total</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<h3 class="font-semibold text-gray-700 mb-2">🧾 Outros</h3>
|
|
<p class="text-3xl font-bold text-gray-700">R$ 0,00</p>
|
|
<p class="text-sm text-gray-600">0.0% do total</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-gray-600 mt-2">
|
|
<i class="fas fa-exclamation-circle"></i>
|
|
A categoria <strong>Salários</strong> representa 100.0% dos gastos do dia.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4">📋 Detalhes dos Hotéis</h2>
|
|
<div class="space-y-4">
|
|
<div class="hotel-card bg-white rounded-lg p-4 border border-gray-200">
|
|
<h3 class="font-semibold text-gray-800 mb-2">🏨 1001 Express</h3>
|
|
<p class="text-gray-700">Gastos: <strong>R$ 2.400,00</strong></p>
|
|
<p class="text-sm text-gray-600">Categorias: Salários</p>
|
|
</div>
|
|
<div class="hotel-card bg-white rounded-lg p-4 border border-gray-200">
|
|
<h3 class="font-semibold text-gray-800 mb-2">🏨 Dolce Amore</h3>
|
|
<p class="text-gray-700">Gastos: <strong>R$ 3.279,97</strong></p>
|
|
<p class="text-sm text-gray-600">Categorias: Equipamentos, Combustível, Tarifas Bancárias</p>
|
|
</div>
|
|
<div class="hotel-card bg-white rounded-lg p-4 border border-gray-200">
|
|
<h3 class="font-semibold text-gray-800 mb-2">🏨 Páduva</h3>
|
|
<p class="text-gray-700">Gastos: <strong>R$ 500,00</strong></p>
|
|
<p class="text-sm text-gray-600">Categorias: Mão de obra terceirizada</p>
|
|
</div>
|
|
<div class="hotel-card bg-white rounded-lg p-4 border border-gray-200">
|
|
<h3 class="font-semibold text-gray-800 mb-2">🏨 Prime VL</h3>
|
|
<p class="text-gray-700">Gastos: <strong>R$ 96,40</strong></p>
|
|
<p class="text-sm text-gray-600">Categorias: Investimentos gerais</p>
|
|
</div>
|
|
<div class="hotel-card bg-white rounded-lg p-4 border border-gray-200">
|
|
<h3 class="font-semibold text-gray-800 mb-2">🏨 Prime ADE</h3>
|
|
<p class="text-gray-700">Gastos: <strong>R$ 2.540,00</strong></p>
|
|
<p class="text-sm text-gray-600">Categorias: Rescisões, Salários</p>
|
|
</div>
|
|
<div class="hotel-card bg-white rounded-lg p-4 border border-gray-200">
|
|
<h3 class="font-semibold text-gray-800 mb-2">🏨 Qnn01</h3>
|
|
<p class="text-gray-700">Gastos: <strong>R$ 326,25</strong></p>
|
|
<p class="text-sm text-gray-600">Categorias: Supermercado, Transporte Pessoal</p>
|
|
</div>
|
|
<div class="hotel-card bg-white rounded-lg p-4 border border-gray-200">
|
|
<h3 class="font-semibold text-gray-800 mb-2">🏨 Recanto das Emas</h3>
|
|
<p class="text-gray-700">Gastos: <strong>R$ 2.000,00</strong></p>
|
|
<p class="text-sm text-gray-600">Categorias: Mão de obra terceirizada</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4">⚠️ Recomendações</h2>
|
|
<ul class="space-y-2">
|
|
<li class="flex items-start">
|
|
<i class="fas fa-lightbulb text-yellow-500 mt-1 mr-2"></i>
|
|
<span class="text-gray-700"><strong>Otimizar gastos do Dolce Amore</strong>: O hotel com maior custo representa 27.3% do total. Considere revisar fornecedores e negociar contratos.</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fas fa-lightbulb text-yellow-500 mt-1 mr-2"></i>
|
|
<span class="text-gray-700"><strong>Consolidar compras</strong>: Analisar se compras conjuntas de hotéis podem gerar descontos maiores.</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fas fa-lightbulb text-yellow-500 mt-1 mr-2"></i>
|
|
<span class="text-gray-700"><strong>Revisar salários</strong>: 100.0% dos gastos são salários. Considere otimizar a escala de funcionários.</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<footer class="text-center mt-8 text-gray-500 text-sm">
|
|
<p>© 2026 Grupo Inova - Todos os direitos reservados</p>
|
|
<p>Sistema Financeiro Automatizado</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
// Atualizar data da última atualização
|
|
const lastUpdated = document.getElementById('last-updated');
|
|
const now = new Date();
|
|
const formattedDate = now.toLocaleDateString('pt-BR', {
|
|
day: '2-digit',
|
|
month: 'long',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
lastUpdated.textContent = `Última atualização: ${formattedDate}`;
|
|
</script>
|
|
</body>
|
|
</html>
|