maha3d / index.html
EraDigital's picture
Update index.html
85032d5 verified
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Análise Financeira Completa - DRE (Jan-Abr 2025)</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.card {
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.progress-bar {
height: 8px;
border-radius: 4px;
overflow: hidden;
}
.trend-up {
color: #10B981;
}
.trend-down {
color: #EF4444;
}
.chart-container {
height: 300px;
position: relative;
}
.bar-chart {
display: flex;
height: 100%;
align-items: flex-end;
gap: 20px;
padding: 0 20px;
}
.bar-group {
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
justify-content: flex-end;
}
.bar {
position: relative;
transition: height 0.5s ease;
border-radius: 4px 4px 0 0;
width: 100%;
}
.bar-receita {
background-color: #10B981;
margin-bottom: 4px;
}
.bar-despesa {
background-color: #EF4444;
}
.bar-value {
position: absolute;
top: -22px;
width: 100%;
text-align: center;
font-size: 12px;
font-weight: 600;
}
.bar-label {
position: absolute;
bottom: -30px;
width: 100%;
text-align: center;
font-size: 12px;
color: #6B7280;
}
.line-chart {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
pointer-events: none;
}
.line {
height: 2px;
background-color: #8B5CF6;
position: relative;
width: calc(100% - 40px);
margin: 0 20px;
}
.line-dot {
position: absolute;
width: 10px;
height: 10px;
background-color: #8B5CF6;
border-radius: 50%;
top: -4px;
transform: translateX(-50%);
}
.y-axis {
position: absolute;
left: 10px;
top: 0;
bottom: 30px;
width: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.y-tick {
font-size: 10px;
color: #6B7280;
position: relative;
}
.y-tick::after {
content: '';
position: absolute;
left: 30px;
top: 50%;
width: 10px;
border-top: 1px dashed #E5E7EB;
}
.table-highlight {
background-color: #F0FDF4;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen p-6">
<div class="max-w-7xl mx-auto">
<!-- Header -->
<div class="text-center mb-10">
<h1 class="text-3xl font-bold text-gray-800 mb-2">Análise Financeira Completa</h1>
<h2 class="text-xl text-gray-600">Demonstração de Resultados do Exercício (Jan-Abr 2025)</h2>
<div class="mt-4 bg-blue-50 inline-flex items-center px-4 py-2 rounded-full">
<i class="fas fa-calendar-alt text-blue-500 mr-2"></i>
<span class="text-blue-800 font-medium">Mês de fechamento: Abril 2025</span>
</div>
</div>
<!-- Key Metrics -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<!-- Revenue -->
<div class="card bg-white rounded-xl p-6 border-l-4 border-green-500 shadow-sm">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">Receita Líquida</p>
<h3 class="text-2xl font-bold">R$ 44.044</h3>
<p class="text-sm text-gray-500">Abril 2025</p>
</div>
<div class="bg-green-100 p-3 rounded-full">
<i class="fas fa-money-bill-wave text-green-600 text-xl"></i>
</div>
</div>
<div class="mt-4">
<div class="flex justify-between text-sm mb-1">
<span>Meta: R$ 55K</span>
<span class="font-medium">85%</span>
</div>
<div class="progress-bar bg-gray-200">
<div class="bg-green-500 h-full" style="width: 85%"></div>
</div>
</div>
</div>
<!-- Gross Profit -->
<div class="card bg-white rounded-xl p-6 border-l-4 border-blue-500 shadow-sm">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">Margem de Contribuição</p>
<h3 class="text-2xl font-bold">R$ 27.355</h3>
<p class="text-sm text-gray-500">Margem: 59%</p>
</div>
<div class="bg-blue-100 p-3 rounded-full">
<i class="fas fa-percent text-blue-600 text-xl"></i>
</div>
</div>
<div class="mt-4">
<div class="flex justify-between text-sm">
<span class="text-gray-500">Evolução:</span>
<span class="font-medium trend-down">↓ 25pp vs Março</span>
</div>
</div>
</div>
<!-- Operational Result -->
<div class="card bg-white rounded-xl p-6 border-l-4 border-purple-500 shadow-sm">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">Resultado Operacional</p>
<h3 class="text-2xl font-bold text-red-500">-R$ 4.867</h3>
<p class="text-sm text-gray-500">-11% da Receita</p>
</div>
<div class="bg-purple-100 p-3 rounded-full">
<i class="fas fa-chart-line text-purple-600 text-xl"></i>
</div>
</div>
<div class="mt-4">
<div class="flex justify-between text-sm">
<span class="text-gray-500">Comparativo:</span>
<span class="font-medium trend-down">↓ R$ 26.993 vs Março</span>
</div>
</div>
</div>
<!-- Net Profit -->
<div class="card bg-white rounded-xl p-6 border-l-4 border-yellow-500 shadow-sm">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">Lucro Líquido</p>
<h3 class="text-2xl font-bold text-red-500">-R$ 7.496</h3>
<p class="text-sm text-gray-500">-17% da Receita</p>
</div>
<div class="bg-yellow-100 p-3 rounded-full">
<i class="fas fa-wallet text-yellow-600 text-xl"></i>
</div>
</div>
<div class="mt-4">
<div class="flex justify-between text-sm">
<span class="text-gray-500">Comparativo:</span>
<span class="font-medium trend-down">↓ R$ 27.561 vs Março</span>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Left Column -->
<div class="lg:col-span-2 space-y-6">
<!-- Revenue vs Expenses Chart -->
<div class="card bg-white rounded-xl p-6 shadow">
<h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fas fa-chart-bar text-indigo-500 mr-2"></i>
Receitas x (Despesas + Custos Operacionais) e Resultado Operacional
</h3>
<div class="chart-container">
<!-- Eixo Y -->
<div class="y-axis">
<div class="y-tick">R$ 70K</div>
<div class="y-tick">R$ 60K</div>
<div class="y-tick">R$ 50K</div>
<div class="y-tick">R$ 40K</div>
<div class="y-tick">R$ 30K</div>
<div class="y-tick">R$ 20K</div>
<div class="y-tick">R$ 10K</div>
<div class="y-tick">R$ 0</div>
</div>
<div class="bar-chart">
<!-- Janeiro -->
<div class="bar-group">
<div class="bar bar-receita" style="height: 48.2%;">
<div class="bar-value">R$ 33.8K</div>
</div>
<div class="bar bar-despesa" style="height: 53.3%;">
<div class="bar-value">R$ 37.3K</div>
</div>
<div class="bar-label">Jan</div>
</div>
<!-- Fevereiro -->
<div class="bar-group">
<div class="bar bar-receita" style="height: 55.5%;">
<div class="bar-value">R$ 38.9K</div>
</div>
<div class="bar bar-despesa" style="height: 72.1%;">
<div class="bar-value">R$ 50.5K</div>
</div>
<div class="bar-label">Fev</div>
</div>
<!-- Março -->
<div class="bar-group">
<div class="bar bar-receita" style="height: 88.3%;">
<div class="bar-value">R$ 61.8K</div>
</div>
<div class="bar bar-despesa" style="height: 56.6%;">
<div class="bar-value">R$ 39.7K</div>
</div>
<div class="bar-label">Mar</div>
</div>
<!-- Abril -->
<div class="bar-group">
<div class="bar bar-receita" style="height: 62.9%;">
<div class="bar-value">R$ 44.0K</div>
</div>
<div class="bar bar-despesa" style="height: 69.8%;">
<div class="bar-value">R$ 48.9K</div>
</div>
<div class="bar-label">Abr</div>
</div>
</div>
<!-- Linha do Resultado Operacional -->
<div class="line-chart">
<div class="line">
<!-- Janeiro -->
<div class="line-dot" style="left: 12.5%; bottom: 5%;"></div>
<!-- Fevereiro -->
<div class="line-dot" style="left: 37.5%; bottom: 16.6%;"></div>
<!-- Março -->
<div class="line-dot" style="left: 62.5%; bottom: 31.6%;"></div>
<!-- Abril -->
<div class="line-dot" style="left: 87.5%; bottom: 7%;"></div>
</div>
</div>
</div>
<div class="mt-10 flex justify-center space-x-8">
<div class="flex items-center">
<div class="w-4 h-4 bg-green-500 rounded mr-2"></div>
<span class="text-sm">Receita Líquida</span>
</div>
<div class="flex items-center">
<div class="w-4 h-4 bg-red-500 rounded mr-2"></div>
<span class="text-sm">Despesas + Custos</span>
</div>
<div class="flex items-center">
<div class="w-4 h-4 bg-purple-500 rounded-full mr-2"></div>
<span class="text-sm">Resultado Operacional</span>
</div>
</div>
<div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="p-3 bg-blue-50 rounded-lg">
<p class="text-sm text-blue-800">
<i class="fas fa-info-circle text-blue-500 mr-2"></i>
Março foi o único mês com receita acima de despesas + custos (+R$ 22.1K)
</p>
</div>
<div class="p-3 bg-red-50 rounded-lg">
<p class="text-sm text-red-800">
<i class="fas fa-exclamation-triangle text-red-500 mr-2"></i>
Abril teve despesas + custos equivalentes a 111% da receita líquida
</p>
</div>
</div>
</div>
<!-- Revenue Analysis -->
<div class="card bg-white rounded-xl p-6 shadow">
<h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fas fa-chart-line text-green-500 mr-2"></i>
Análise de Receitas e Meta de Faturamento
</h3>
<div class="mb-6">
<div class="flex justify-between items-center mb-2">
<h4 class="font-medium text-gray-700">Desempenho vs Meta Mensal (R$ 55.000)</h4>
</div>
<div class="grid grid-cols-4 gap-4 text-center">
<div>
<div class="h-24 bg-gray-100 rounded-lg flex items-end">
<div class="w-full bg-green-500 rounded-lg" style="height: 65%;"></div>
</div>
<p class="mt-1 text-sm">Jan: 65%</p>
<p class="text-xs text-gray-500">R$ 35.611</p>
</div>
<div>
<div class="h-24 bg-gray-100 rounded-lg flex items-end">
<div class="w-full bg-green-500 rounded-lg" style="height: 78%;"></div>
</div>
<p class="mt-1 text-sm">Fev: 78%</p>
<p class="text-xs text-gray-500">R$ 42.818</p>
</div>
<div>
<div class="h-24 bg-gray-100 rounded-lg flex items-end">
<div class="w-full bg-green-500 rounded-lg" style="height: 120%;"></div>
</div>
<p class="mt-1 text-sm">Mar: 120%</p>
<p class="text-xs text-gray-500">R$ 66.173</p>
</div>
<div>
<div class="h-24 bg-gray-100 rounded-lg flex items-end">
<div class="w-full bg-green-500 rounded-lg" style="height: 85%;"></div>
</div>
<p class="mt-1 text-sm">Abr: 85%</p>
<p class="text-xs text-gray-500">R$ 46.544</p>
</div>
</div>
</div>
<div class="mt-4 p-3 bg-yellow-50 rounded-lg">
<p class="text-sm text-yellow-800">
<i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i>
Abril apresentou queda de 30% nas receitas em relação a março, ficando abaixo da meta. Média trimestral de 87% da meta.
</p>
</div>
</div>
</div>
<!-- Right Column -->
<div class="space-y-6">
<!-- Profitability Analysis -->
<div class="card bg-white rounded-xl p-6 shadow">
<h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fas fa-coins text-yellow-500 mr-2"></i>
Análise de Rentabilidade
</h3>
<div class="space-y-4">
<div>
<h4 class="text-sm font-medium text-gray-700 mb-2">Margem de Contribuição</h4>
<div class="flex justify-between items-center">
<div class="text-2xl font-bold">59%</div>
<div class="text-sm trend-down">↓ 25pp vs Março</div>
</div>
<p class="text-xs text-gray-500 mt-1">Capacidade de cobrir despesas fixas e gerar lucro</p>
</div>
<div class="pt-2 border-t border-gray-100">
<h4 class="text-sm font-medium text-gray-700 mb-2">Resultado Operacional</h4>
<div class="flex justify-between items-center">
<div class="text-2xl font-bold text-red-500">-R$ 4.867</div>
<div class="text-sm trend-down">↓ R$ 26.993 vs Março</div>
</div>
<p class="text-xs text-gray-500 mt-1">-11% da Receita Líquida</p>
</div>
<div class="pt-2 border-t border-gray-100">
<h4 class="text-sm font-medium text-gray-700 mb-2">Resultado Não Operacional</h4>
<div class="flex justify-between items-center">
<div class="text-2xl font-bold text-red-500">-R$ 2.545</div>
<div class="text-sm">Despesas diversas</div>
</div>
</div>
<div class="pt-2 border-t border-gray-100">
<h4 class="text-sm font-medium text-gray-700 mb-2">Lucro Líquido</h4>
<div class="flex justify-between items-center">
<div class="text-2xl font-bold text-red-500">-R$ 7.496</div>
<div class="text-sm trend-down">↓ R$ 27.561 vs Março</div>
</div>
<p class="text-xs text-gray-500 mt-1">-17% da Receita Líquida</p>
</div>
</div>
<div class="mt-4 p-3 bg-red-50 rounded-lg">
<p class="text-sm text-red-800">
<i class="fas fa-exclamation-circle text-red-500 mr-2"></i>
Abril apresentou o segundo pior resultado líquido do trimestre, com prejuízo de 17% sobre a receita.
</p>
</div>
</div>
<!-- Key Points -->
<div class="card bg-white rounded-xl p-6 shadow">
<h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fas fa-exclamation-triangle text-orange-500 mr-2"></i>
Principais Pontos de Atenção
</h3>
<div class="space-y-3">
<div class="flex items-start">
<div class="bg-red-100 p-1 rounded-full mr-3 mt-1">
<i class="fas fa-arrow-down text-red-500 text-sm"></i>
</div>
<div>
<p class="text-sm font-medium text-gray-700">Queda na Margem Bruta</p>
<p class="text-xs text-gray-600">De 84% em março para 59% em abril devido a custos de serviços (R$ 16.588)</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-yellow-100 p-1 rounded-full mr-3 mt-1">
<i class="fas fa-money-bill-wave text-yellow-500 text-sm"></i>
</div>
<div>
<p class="text-sm font-medium text-gray-700">Despesas + Custos Elevados</p>
<p class="text-xs text-gray-600">Total de R$ 48.910 em abril (111% da receita líquida)</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
<i class="fas fa-chart-line text-blue-500 text-sm"></i>
</div>
<div>
<p class="text-sm font-medium text-gray-700">Volatilidade nas Receitas</p>
<p class="text-xs text-gray-600">Queda de 30% em abril vs março (R$ 66K → R$ 47K)</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-purple-100 p-1 rounded-full mr-3 mt-1">
<i class="fas fa-bullseye text-purple-500 text-sm"></i>
</div>
<div>
<p class="text-sm font-medium text-gray-700">Meta de Faturamento</p>
<p class="text-xs text-gray-600">Apenas março atingiu meta (120%), média trimestral de 87%</p>
</div>
</div>
</div>
</div>
<!-- Recommendations -->
<div class="card bg-white rounded-xl p-6 shadow">
<h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fas fa-clipboard-list text-green-500 mr-2"></i>
Diretrizes Recomendadas
</h3>
<div class="space-y-3">
<div class="flex items-start">
<div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
<i class="fas fa-search-dollar text-blue-500 text-sm"></i>
</div>
<p class="text-sm text-gray-700">Auditar custos operacionais (R$ 16.588) e despesas (R$ 32.222) para redução</p>
</div>
<div class="flex items-start">
<div class="bg-purple-100 p-1 rounded-full mr-3 mt-1">
<i class="fas fa-cut text-purple-500 text-sm"></i>
</div>
<p class="text-sm text-gray-700">Programa de eficiência operacional para reduzir custos em 20%</p>
</div>
<div class="flex items-start">
<div class="bg-green-100 p-1 rounded-full mr-3 mt-1">
<i class="fas fa-bullhorn text-green-500 text-sm"></i>
</div>
<p class="text-sm text-gray-700">Plano comercial para atingir meta mínima de R$ 55K/mês</p>
</div>
<div class="flex items-start">
<div class="bg-yellow-100 p-1 rounded-full mr-3 mt-1">
<i class="fas fa-calculator text-yellow-500 text-sm"></i>
</div>
<p class="text-sm text-gray-700">Revisão de precificação para margem bruta mínima de 65%</p>
</div>
</div>
</div>
</div>
</div>
<!-- Quarterly Summary -->
<div class="card bg-white rounded-xl p-6 shadow mt-6">
<h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fas fa-table text-blue-500 mr-2"></i>
Resumo Trimestral Comparativo
</h3>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Indicador</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Janeiro</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fevereiro</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Março</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Abril</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Receita Bruta</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">R$ 35.611</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">R$ 42.818</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">R$ 66.173</td>
<td class="px-6 py-4 whitespace-nowrap text-sm table-highlight">R$ 46.544</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">% Meta (55K)</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">65%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">78%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">120%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm table-highlight">85%</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Receita Líquida</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">R$ 33.754</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">R$ 38.870</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">R$ 61.782</td>
<td class="px-6 py-4 whitespace-nowrap text-sm table-highlight">R$ 44.044</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Custos + Despesas</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">R$ 37.267</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">R$ 50.450</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">R$ 39.655</td>
<td class="px-6 py-4 whitespace-nowrap text-sm table-highlight">R$ 48.910</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Margem Bruta</td>
<td class="px-6 py-4 whitespace-nowrap text-sm trend-up">76%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm trend-down">58%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm trend-up">84%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm trend-down table-highlight">59%</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Resultado Operacional</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-R$ 3.513</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-R$ 11.580</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">R$ 22.126</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-red-500 table-highlight">-R$ 4.867</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Lucro Líquido</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-R$ 3.913</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-R$ 10.483</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">R$ 20.065</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-red-500 table-highlight">-R$ 7.496</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="p-3 bg-green-50 rounded-lg">
<p class="text-sm text-green-800">
<i class="fas fa-thumbs-up text-green-500 mr-2"></i>
Melhor desempenho em março: Lucro de R$ 20.065 (32% da receita)
</p>
</div>
<div class="p-3 bg-red-50 rounded-lg">
<p class="text-sm text-red-800">
<i class="fas fa-exclamation-triangle text-red-500 mr-2"></i>
Abril teve despesas + custos superando receitas em R$ 4.866
</p>
</div>
</div>
</div>
<!-- Footer -->
<div class="mt-8 text-center text-sm text-gray-500">
<p>Relatório gerado em 30/04/2025 | Análise financeira por competência</p>
<p class="mt-1">Para análises detalhadas ou ajustes, contate o departamento financeiro</p>
</div>
</div>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">