Atualização dos icones para um modelo chapado

This commit is contained in:
2026-07-20 15:08:09 -03:00
parent 7d3753f9c5
commit 42d06c50a7
34 changed files with 550 additions and 337 deletions

View File

@@ -55,7 +55,7 @@
<%# Filtro de calendário — seleciona uma faixa de datas %>
<form id="dashboard-filtro-form" method="get" action="<%= dashboard_path %>" data-turbo="false" class="flex flex-wrap items-center gap-2">
<div class="relative">
<span class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-orange-500">📅</span>
<span class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2"><%= icone :calendario %></span>
<input type="text" id="periodo-range" readonly placeholder="Selecione o período"
value="<%= @periodo_inicio.strftime('%d/%m/%Y') %> até <%= @periodo_fim.strftime('%d/%m/%Y') %>"
class="cursor-pointer pl-4 pr-10 py-2.5 bg-[#1a1a1a] border border-white/10 rounded-xl
@@ -79,14 +79,14 @@
<% if @operacoes.any? %>
<details class="relative" id="operacao-dropdown">
<summary class="cursor-pointer list-none pl-4 pr-4 py-2.5 bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm whitespace-nowrap hover:border-orange-500">
🗂️ <%= @operacao_filtro.present? ? "#{@operacao_filtro.size} operação(ões)" : 'Todas as operações' %>
<%= icone :pasta %> <%= @operacao_filtro.present? ? "#{@operacao_filtro.size} operação(ões)" : 'Todas as operações' %>
</summary>
<div class="absolute right-0 mt-2 z-30 w-72 max-h-80 overflow-y-auto bg-[#1a1a1a] border border-white/10 rounded-xl p-2 shadow-xl">
<%# Limpar seleção — recarrega o dashboard sem filtro de operação %>
<div class="flex items-center justify-between px-2 pb-2 mb-1 border-b border-white/10">
<span class="text-xs uppercase tracking-wider text-gray-400">Operações</span>
<% if @operacao_filtro.present? %>
<%= link_to '✕ Limpar', dashboard_path(inicio: @periodo_inicio.strftime('%Y-%m-%d'), fim: @periodo_fim.strftime('%Y-%m-%d')),
<%= link_to rotulo(:fechar, 'Limpar', cor: nil, tamanho: 'w-3 h-3'), dashboard_path(inicio: @periodo_inicio.strftime('%Y-%m-%d'), fim: @periodo_fim.strftime('%Y-%m-%d')),
data: { turbo: false }, class: 'text-xs text-orange-400 hover:text-orange-300 font-semibold' %>
<% end %>
</div>
@@ -107,7 +107,7 @@
<% end %>
<%# Imprimir relatório financeiro do período/operação atuais %>
<%= link_to '🖨️ Relatório',
<%= link_to rotulo(:imprimir, 'Relatório'),
dashboard_relatorio_financeiro_path(
inicio: @periodo_inicio.strftime('%Y-%m-%d'),
fim: @periodo_fim.strftime('%Y-%m-%d'),
@@ -124,7 +124,7 @@
<div class="sm:col-span-2 xl:col-span-1 bg-[#f97316] rounded-2xl p-6 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-orange-400/20 to-transparent"></div>
<div class="relative">
<p class="text-orange-100 text-sm font-medium mb-2">💰 Valor Estimado</p>
<p class="text-orange-100 text-sm font-medium mb-2 flex items-center gap-2"><%= icone :dinheiro, cor: nil %> Valor Estimado</p>
<p class="text-4xl font-black text-white mb-1">
<%= moeda(@valor_estimado) %>
</p>
@@ -136,7 +136,7 @@
<%# Card destacado: total consolidado e pago (consolidações finalizadas do período) %>
<div class="sm:col-span-2 xl:col-span-1 bg-[#1a1a1a] rounded-2xl border border-green-500/30 p-6">
<p class="text-gray-400 text-sm font-medium mb-2">💼 Consolidado / Pago</p>
<p class="text-gray-400 text-sm font-medium mb-2 flex items-center gap-2"><%= icone :consolidado_pago %> Consolidado / Pago</p>
<p class="text-3xl font-black text-white mb-1"><%= moeda(@fin_custo_total) %></p>
<p class="text-gray-400 text-xs mb-2">consolidado no período</p>
<div class="flex items-center gap-2 text-sm border-t border-white/5 pt-2">
@@ -147,7 +147,7 @@
<%# Card 2: Total de entregas %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-2">📦 Total Entregas</p>
<p class="text-gray-400 text-sm font-medium mb-2 flex items-center gap-2"><%= icone :consolidacoes %> Total Entregas</p>
<p class="text-4xl font-black text-white mb-1"><%= @total_entregas %></p>
<div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm">
<span class="text-green-400"><%= @entregas_pagas %> entregues</span>
@@ -160,7 +160,7 @@
<%# Card 3: Consolidações %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-2">📋 Consolidações</p>
<p class="text-gray-400 text-sm font-medium mb-2 flex items-center gap-2"><%= icone :planilha %> Consolidações</p>
<p class="text-4xl font-black text-white mb-1"><%= @consolidacoes_mes.count %></p>
<div class="flex items-center gap-2 text-sm">
<span class="text-yellow-500"><%= @consolidacoes_abertas %> abertas</span>
@@ -171,7 +171,7 @@
<%# Card 4: Motoristas ativos %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-2">🚗 Motoristas</p>
<p class="text-gray-400 text-sm font-medium mb-2 flex items-center gap-2"><%= icone :veiculo %> Motoristas</p>
<p class="text-4xl font-black text-white mb-1"><%= @motoristas.count %></p>
<p class="text-gray-400 text-sm">com entregas no período</p>
</div>
@@ -180,22 +180,22 @@
<%# KPIs FINANCEIROS (consolidações finalizadas, já com filtro de operação) %>
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-2">💰 Custo total</p>
<p class="text-gray-400 text-sm font-medium mb-2 flex items-center gap-2"><%= icone :dinheiro %> Custo total</p>
<p class="text-3xl font-black text-white"><%= moeda(@fin_custo_total) %></p>
<p class="text-gray-400 text-xs mt-1"><%= @fin_qtd_entregas %> entregas classificadas</p>
</div>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-2">🎫 Ticket médio</p>
<p class="text-gray-400 text-sm font-medium mb-2 flex items-center gap-2"><%= icone :ticket %> Ticket médio</p>
<p class="text-3xl font-black text-white"><%= moeda(@fin_ticket_medio) %></p>
<p class="text-gray-400 text-xs mt-1">por entrega</p>
</div>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-2">✅ Pago</p>
<p class="text-gray-400 text-sm font-medium mb-2 flex items-center gap-2"><%= icone :sucesso, cor: 'text-green-500' %> Pago</p>
<p class="text-3xl font-black text-green-400"><%= moeda(@fin_pago) %></p>
<p class="text-gray-400 text-xs mt-1">já confirmado</p>
</div>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-2">🕗 A pagar</p>
<p class="text-gray-400 text-sm font-medium mb-2 flex items-center gap-2"><%= icone :relogio, cor: 'text-amber-400' %> A pagar</p>
<p class="text-3xl font-black text-yellow-500"><%= moeda(@fin_pendente) %></p>
<p class="text-gray-400 text-xs mt-1">pendente</p>
</div>
@@ -238,7 +238,7 @@
</div>
<% else %>
<div class="flex-1 min-h-48 flex flex-col items-center justify-center text-gray-400">
<div class="text-3xl mb-2">💸</div>
<div class="mb-2"><%= icone :custo, tamanho: 'w-8 h-8', cor: 'text-gray-600' %></div>
<p class="text-sm">Nenhum pagamento realizado neste período</p>
<% if @pag_pend_valor.positive? %>
<p class="text-xs mt-1">
@@ -252,7 +252,7 @@
<%# Top motoristas %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<h2 class="text-lg font-semibold text-white mb-4">🏆 Motoristas</h2>
<h2 class="text-lg font-semibold text-white mb-4 flex items-center gap-2"><%= icone :ranking %> Motoristas</h2>
<% if @motoristas.any? %>
<div class="space-y-3">
@@ -282,7 +282,7 @@
</div>
<% else %>
<div class="text-center py-8 text-gray-400">
<div class="text-3xl mb-2">🚚</div>
<div class="mb-2"><%= icone :caminhao, tamanho: 'w-8 h-8', cor: 'text-gray-600' %></div>
<p class="text-sm">Nenhuma entrega concluída neste período</p>
</div>
<% end %>
@@ -294,34 +294,34 @@
<%# Custo por operação (barra) %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<h2 class="text-lg font-semibold text-white mb-1">🏷️ Custo por operação</h2>
<h2 class="text-lg font-semibold text-white mb-1 flex items-center gap-2"><%= icone :tag %> Custo por operação</h2>
<p class="text-gray-400 text-sm mb-4">Valor consolidado no período</p>
<% if @fin_por_operacao.any? %>
<div class="relative h-64"><canvas id="grafico-custo-operacao"></canvas></div>
<% else %>
<div class="text-center py-8 text-gray-400"><div class="text-3xl mb-2">🏷️</div><p class="text-sm">Sem dados no período</p></div>
<div class="text-center py-8 text-gray-400"><div class="mb-2"><%= icone :tag, tamanho: 'w-8 h-8', cor: 'text-gray-600' %></div><p class="text-sm">Sem dados no período</p></div>
<% end %>
</div>
<%# Composição por tipo (rosca) %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<h2 class="text-lg font-semibold text-white mb-1">🧩 Composição do custo</h2>
<h2 class="text-lg font-semibold text-white mb-1 flex items-center gap-2"><%= icone :composicao %> Composição do custo</h2>
<p class="text-gray-400 text-sm mb-4">Por tipo de lançamento</p>
<% if @fin_por_tipo.any? %>
<div class="relative h-64"><canvas id="grafico-composicao-tipo"></canvas></div>
<% else %>
<div class="text-center py-8 text-gray-400"><div class="text-3xl mb-2">🧩</div><p class="text-sm">Sem dados no período</p></div>
<div class="text-center py-8 text-gray-400"><div class="mb-2"><%= icone :composicao, tamanho: 'w-8 h-8', cor: 'text-gray-600' %></div><p class="text-sm">Sem dados no período</p></div>
<% end %>
</div>
<%# Custo por motorista (barra) %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<h2 class="text-lg font-semibold text-white mb-1">👤 Custo por motorista</h2>
<h2 class="text-lg font-semibold text-white mb-1 flex items-center gap-2"><%= icone :pessoa %> Custo por motorista</h2>
<p class="text-gray-400 text-sm mb-4">Por motorista no período</p>
<% if @fin_por_motorista.any? %>
<div class="relative h-64"><canvas id="grafico-custo-motorista"></canvas></div>
<% else %>
<div class="text-center py-8 text-gray-400"><div class="text-3xl mb-2">👤</div><p class="text-sm">Sem dados no período</p></div>
<div class="text-center py-8 text-gray-400"><div class="mb-2"><%= icone :pessoa, tamanho: 'w-8 h-8', cor: 'text-gray-600' %></div><p class="text-sm">Sem dados no período</p></div>
<% end %>
</div>
</div>
@@ -331,12 +331,12 @@
<%# Rosca pago vs a pagar (por valor) %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<h2 class="text-lg font-semibold text-white mb-1">💵 Pagamentos</h2>
<h2 class="text-lg font-semibold text-white mb-1 flex items-center gap-2"><%= icone :pagamento %> Pagamentos</h2>
<p class="text-gray-400 text-sm mb-4">Pagos por data de pagamento · pendentes no período</p>
<% if (@pag_pago_qtd + @pag_pend_qtd).zero? %>
<div class="text-center py-8 text-gray-400">
<div class="text-3xl mb-2">🧾</div>
<div class="mb-2"><%= icone :nota_fiscal, tamanho: 'w-8 h-8', cor: 'text-gray-600' %></div>
<p class="text-sm">Nenhum pagamento ou pendência no período</p>
</div>
<% else %>
@@ -365,7 +365,7 @@
<%# Pagamentos realizados no período (filtrados por pago_em) %>
<div>
<h2 class="text-lg font-semibold text-white mb-4">✅ Pagamentos realizados no período</h2>
<h2 class="text-lg font-semibold text-white mb-4 flex items-center gap-2"><%= icone :sucesso, cor: 'text-green-500' %> Pagamentos realizados no período</h2>
<% if @pagamentos_feitos.any? %>
<div class="overflow-x-auto">
<table class="w-full text-sm">
@@ -405,7 +405,7 @@
<%# Pendentes (consolidações finalizadas do período sem pagamento) %>
<div>
<h2 class="text-lg font-semibold text-white mb-4">🕗 Pagamentos pendentes</h2>
<h2 class="text-lg font-semibold text-white mb-4 flex items-center gap-2"><%= icone :relogio, cor: 'text-amber-400' %> Pagamentos pendentes</h2>
<% if @pagamentos_pendentes.any? %>
<div class="overflow-x-auto">
<table class="w-full text-sm">
@@ -435,7 +435,7 @@
<div class="flex gap-1" id="pagamentos-pendentes-abas"></div>
</div>
<% else %>
<p class="text-gray-400 text-sm py-3">Nenhuma pendência no período. 🎉</p>
<p class="text-gray-400 text-sm py-3">Nenhuma pendência no período. <%= icone :sucesso, cor: 'text-green-500' %></p>
<% end %>
</div>
</div>
@@ -444,7 +444,7 @@
<%# Por operação %>
<% if @por_operacao.any? %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<h2 class="text-lg font-semibold text-white mb-4">🏥 Entregas por Local</h2>
<h2 class="text-lg font-semibold text-white mb-4 flex items-center gap-2"><%= icone :operacao %> Entregas por Local</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
<% total_op = @por_operacao.values.sum.to_f %>
<% @por_operacao.each do |local, qtd| %>