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

@@ -18,10 +18,10 @@
class: 'inline-flex items-center gap-1 bg-[#1a1a1a] hover:bg-[#2a2a2a] text-white border border-[#2a2a2a] hover:border-orange-500 font-semibold px-4 py-2.5 rounded-lg text-sm min-h-[44px]' %>
<div class="flex items-center justify-between mt-2">
<div>
<h1 class="text-2xl font-bold text-white">🚚 <%= @motorista %></h1>
<h1 class="text-2xl font-bold text-white flex items-center gap-2"><%= icone :caminhao %> <%= @motorista %></h1>
<p class="text-gray-400 text-sm"><%= @consolidacao.nome %> · <%= l @consolidacao.data_inicio, format: :short %> → <%= l @consolidacao.data_fim, format: :short %></p>
</div>
<%= link_to 'Revisar (Passo 3)',
<%= link_to safe_join(['Revisar (Passo 3)', icone(:avancar, cor: nil)], ' '),
revisar_consolidacao_consolidacao_entregas_path(@consolidacao, motorista: @motorista),
class: 'bg-orange-500 hover:bg-orange-600 text-black font-bold px-5 py-3 rounded-lg min-h-[48px] flex items-center' %>
</div>
@@ -31,7 +31,7 @@
<div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-3 mb-3">
<div class="flex justify-between text-sm mb-2">
<span class="text-white font-semibold">
<% if @veiculos_sel.any? %>🚚 <%= @veiculos_sel.join(', ') %> — <% end %>
<% if @veiculos_sel.any? %><%= icone :caminhao %> <%= @veiculos_sel.join(', ') %> — <% end %>
<span data-validacao-target="contadorClassificadas"><%= @classificadas %></span>
de <span data-validacao-target="contadorTotal"><%= @total_entregas %></span> entregas classificadas
<span data-validacao-target="manuaisInfo" class="<%= 'hidden' unless @manuais.positive? %> text-blue-400 font-normal">·
@@ -53,8 +53,8 @@
<% if @veiculos_status.size > 1 %>
<div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-3 mb-3">
<div class="flex items-center gap-2 mb-2 flex-wrap">
<span class="text-gray-400 text-sm font-semibold">🚗 Fechar por veículo:</span>
<span class="text-gray-600 text-xs">clique no nome para filtrar; consolide o carro quando estiver 100% (🔒)</span>
<span class="text-gray-400 text-sm font-semibold"><%= icone :veiculo %> Fechar por veículo:</span>
<span class="text-gray-600 text-xs">clique no nome para filtrar; consolide o carro quando estiver 100% (<%= icone :travado, cor: nil, tamanho: 'w-3 h-3' %>)</span>
</div>
<div class="flex flex-wrap gap-2">
<%# Chip "Todos" — limpa a seleção (mostra todos os carros) %>
@@ -68,7 +68,7 @@
<% selecionado = @veiculos_sel.include?(v[:vehicle]) %>
<%# Alterna este veículo dentro da seleção atual (multi-seleção) %>
<% nova_sel = selecionado ? (@veiculos_sel - [v[:vehicle]]) : (@veiculos_sel + [v[:vehicle]]) %>
<%# Cor determinística: selecionado(laranja) > consolidado(verde+🔒) >
<%# Cor determinística: selecionado(laranja) > consolidado(verde+cadeado) >
pronto(verde) > arquivado(cinza tracejado) > neutro. %>
<% cor = if selecionado then 'border-orange-500 text-orange-400 bg-orange-500/10'
elsif v[:fechado] then 'border-green-500 text-green-400 bg-green-500/10'
@@ -78,11 +78,11 @@
<%= link_to validar_consolidacao_consolidacao_entregas_path(@consolidacao, motorista: @motorista, vehicle: nova_sel.presence),
data: { 'validacao-target': 'chipVeiculo', vehicle: v[:vehicle], eligible: v[:eligible] },
class: "px-3 py-2 rounded-lg text-sm font-semibold border min-h-[40px] flex items-center gap-2 transition-colors #{cor}" do %>
<span data-chip-lock class="<%= 'hidden' unless v[:fechado] %>">🔒</span>
<span data-chip-lock class="<%= 'hidden' unless v[:fechado] %>"><%= icone :travado, cor: nil, tamanho: 'w-3 h-3' %></span>
<span><%= v[:vehicle] %></span>
<span class="text-xs <%= v[:completo] ? 'text-green-400' : 'text-gray-500' %>">
<span data-chip-feito><%= v[:classificadas] %></span>/<span data-chip-total><%= v[:eligible] %></span>
<span data-chip-check><%= '✓' if v[:completo] %></span>
<span data-chip-check class="<%= 'hidden' unless v[:completo] %>"><%= icone :confirmar, cor: nil, tamanho: 'w-3 h-3' %></span>
</span>
<% end %>
<% end %>
@@ -97,32 +97,35 @@
<p class="text-gray-500 text-xs">Selecione <strong>um</strong> veículo (clique no nome) para consolidá-lo separadamente.</p>
<% elsif status_unico[:fechado] %>
<div class="flex items-center gap-2 flex-wrap">
<span class="text-green-400 text-sm font-semibold">🔒 <%= sel_unico %> consolidado.</span>
<%= button_to '🔓 Reabrir veículo',
reabrir_veiculo_consolidacao_consolidacao_entregas_path(@consolidacao),
<span class="text-green-400 text-sm font-semibold"><%= icone :travado, cor: nil %> <%= sel_unico %> consolidado.</span>
<%= button_to reabrir_veiculo_consolidacao_consolidacao_entregas_path(@consolidacao),
method: :post,
params: { motorista: @motorista, vehicle: sel_unico, vehicle_sel: @veiculos_sel },
data: { turbo_confirm: "Reabrir o veículo #{sel_unico} para edição?" },
class: 'text-gray-400 hover:text-white border border-[#2a2a2a] hover:border-orange-500 px-3 py-2 rounded-lg text-xs min-h-[40px]' %>
form: { data: { turbo_confirm: "Reabrir o veículo #{sel_unico} para edição?" } },
class: 'text-gray-400 hover:text-white border border-[#2a2a2a] hover:border-orange-500 px-3 py-2 rounded-lg text-xs min-h-[40px] inline-flex items-center gap-1.5' do %>
<%= icone :destravado, cor: nil, tamanho: 'w-3.5 h-3.5' %> Reabrir veículo
<% end %>
</div>
<% else %>
<div class="flex items-center gap-2 flex-wrap">
<%# Habilita só quando o carro está 100% classificado; o JS liga/desliga
conforme a barra do escopo selecionado chega (ou não) a 100%. %>
<%= button_to '🔒 Consolidar este veículo',
fechar_veiculo_consolidacao_consolidacao_entregas_path(@consolidacao),
<%= button_to fechar_veiculo_consolidacao_consolidacao_entregas_path(@consolidacao),
method: :post,
params: { motorista: @motorista, vehicle: sel_unico, vehicle_sel: @veiculos_sel },
disabled: !status_unico[:completo],
data: { 'validacao-target': 'consolidarBtn',
turbo_confirm: "Consolidar o veículo #{sel_unico}? Você poderá reabrir depois." },
class: "font-bold px-4 py-2 rounded-lg text-xs min-h-[40px] #{status_unico[:completo] ? 'bg-green-600 hover:bg-green-500 text-white cursor-pointer' : 'bg-[#2a2a2a] text-gray-600 cursor-not-allowed'}" %>
<%= button_to '🗄️ Arquivar veículo',
arquivar_veiculo_consolidacao_consolidacao_entregas_path(@consolidacao),
data: { 'validacao-target': 'consolidarBtn' },
form: { data: { turbo_confirm: "Consolidar o veículo #{sel_unico}? Você poderá reabrir depois." } },
class: "font-bold px-4 py-2 rounded-lg text-xs min-h-[40px] inline-flex items-center gap-1.5 #{status_unico[:completo] ? 'bg-green-600 hover:bg-green-500 text-white cursor-pointer' : 'bg-[#2a2a2a] text-gray-600 cursor-not-allowed'}" do %>
<%= icone :travado, cor: nil, tamanho: 'w-3.5 h-3.5' %> Consolidar este veículo
<% end %>
<%= button_to arquivar_veiculo_consolidacao_consolidacao_entregas_path(@consolidacao),
method: :post,
params: { motorista: @motorista, vehicle: sel_unico, vehicle_sel: @veiculos_sel },
data: { turbo_confirm: "Arquivar o veículo #{sel_unico}? Ele sai da finalização (as entregas já classificadas continuam no pagamento)." },
class: 'text-gray-400 hover:text-white border border-[#2a2a2a] hover:border-red-500/50 px-3 py-2 rounded-lg text-xs min-h-[40px]' %>
form: { data: { turbo_confirm: "Arquivar o veículo #{sel_unico}? Ele sai da finalização (as entregas já classificadas continuam no pagamento)." } },
class: 'text-gray-400 hover:text-white border border-[#2a2a2a] hover:border-red-500/50 px-3 py-2 rounded-lg text-xs min-h-[40px] inline-flex items-center gap-1.5' do %>
<%= icone :arquivar, cor: nil, tamanho: 'w-3.5 h-3.5' %> Arquivar veículo
<% end %>
<span class="text-gray-500 text-xs" data-validacao-target="consolidarHint">
<%= status_unico[:completo] ? 'Pronto para consolidar.' : 'Classifique 100% deste veículo para consolidar.' %>
</span>
@@ -160,7 +163,7 @@
<%# Oculta/mostra o resumo lateral (mais largura para a lista) %>
<button type="button" data-action="validacao#toggleResumo"
class="text-gray-400 hover:text-white text-sm border border-[#2a2a2a] hover:border-orange-500 px-3 py-2 rounded-lg whitespace-nowrap">
📊 <span data-validacao-target="btnResumoLabel">Ocultar resumo</span>
<%= icone :dashboard %> <span data-validacao-target="btnResumoLabel">Ocultar resumo</span>
</button>
<%= link_to params[:apenas_pendentes] == '1' ? 'Mostrar todas' : 'Apenas não classificadas',
validar_consolidacao_consolidacao_entregas_path(@consolidacao, motorista: @motorista, vehicle: @veiculos_sel.presence,
@@ -182,20 +185,20 @@
<%# Botão único + menu suspenso %>
<button type="button" data-action="ferramentas#toggle"
class="w-full md:w-auto inline-flex items-center justify-center gap-2 bg-[#1a1a1a] hover:bg-[#2a2a2a] text-white border border-dashed border-[#3a3a3a] hover:border-orange-500 font-semibold px-4 py-3 rounded-lg min-h-[48px]">
Adicionar lançamento
<span class="text-gray-500">▾</span>
<%= icone :adicionar %> Adicionar lançamento
<%= icone :expandir, cor: 'text-gray-500' %>
</button>
<div data-ferramentas-target="menu"
class="hidden absolute z-40 mt-2 w-72 bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl shadow-xl overflow-hidden">
<button type="button" data-action="apontamento-manual#abrir ferramentas#fechar"
class="w-full text-left px-4 py-3 hover:bg-[#2a2a2a] border-l-2 border-transparent hover:border-purple-500">
<span class="block text-white font-semibold">📝 Registrar entrega manualmente</span>
<span class="block text-white font-semibold"><%= icone :apontamento %> Registrar entrega manualmente</span>
<span class="block text-gray-500 text-xs">fora da base de rastreio</span>
</button>
<button type="button" data-action="apontamento-termo#abrir ferramentas#fechar"
class="w-full text-left px-4 py-3 hover:bg-[#2a2a2a] border-t border-[#2a2a2a] border-l-2 border-l-transparent hover:border-l-blue-500">
<span class="block text-white font-semibold">📄 Entrega de termo</span>
<span class="block text-white font-semibold"><%= icone :documento %> Entrega de termo</span>
<span class="block text-gray-500 text-xs">sem nota/código — só quantidade</span>
</button>
</div>
@@ -207,7 +210,7 @@
<div class="flex items-center justify-between mb-1">
<h2 class="text-xl font-bold text-white">Registro manual de entrega</h2>
<button type="button" data-action="apontamento-manual#fechar"
class="text-gray-500 hover:text-white text-2xl leading-none"></button>
class="text-gray-500 hover:text-white leading-none" aria-label="Fechar"><%= icone :fechar, cor: nil, tamanho: 'w-5 h-5' %></button>
</div>
<p class="text-gray-400 text-sm mb-4">Lançe uma entrega à mão, sem buscar na base de rastreio. Use quando o motorista foi ao local mas a nota ficou registrada com outro motorista.</p>
@@ -251,16 +254,16 @@
<%# Pilares (múltiplos) %>
<label class="block text-gray-400 text-sm mb-2">Classificar como <span class="text-gray-600">(pode marcar mais de uma)</span></label>
<div class="grid grid-cols-2 gap-2 mb-3">
<% [['entrega_normal', '🚚 Entrega Normal', Configuracao.preco_entrega],
['retirada', '📦 Retirada', Configuracao.preco_retirada],
['bonus', 'Bônus', Configuracao.preco_bonus],
['desconto', '⚠️ Desconto', Configuracao.preco_desconto],
['extraordinaria', 'Entrega Extraordinária', Configuracao.preco_extraordinaria]].each do |tipo, label, preco| %>
<% [['entrega_normal', :caminhao, 'Entrega Normal', Configuracao.preco_entrega],
['retirada', :retirada, 'Retirada', Configuracao.preco_retirada],
['bonus', :bonus, 'Bônus', Configuracao.preco_bonus],
['desconto', :desconto, 'Desconto', Configuracao.preco_desconto],
['extraordinaria', :extraordinaria, 'Entrega Extraordinária', Configuracao.preco_extraordinaria]].each do |tipo, ic, label, preco| %>
<label class="flex items-center gap-2 bg-[#0a0a0a] border border-[#2a2a2a] rounded-lg px-3 py-3 cursor-pointer hover:border-purple-500 text-sm text-white">
<input type="checkbox" value="<%= tipo %>" data-apontamento-manual-target="tipoCheck"
<%= 'checked' if tipo == 'entrega_normal' %>
class="accent-purple-500">
<span><%= label %><br><span class="text-gray-500 text-xs"><%= moeda(preco) %></span></span>
<span><%= icone ic %> <%= label %><br><span class="text-gray-500 text-xs"><%= moeda(preco) %></span></span>
</label>
<% end %>
</div>
@@ -274,7 +277,7 @@
<button type="button" data-action="apontamento-manual#adicionar"
class="w-full bg-green-600 hover:bg-green-500 text-white font-bold py-3.5 rounded-lg min-h-[48px]">
Adicionar apontamento
Adicionar apontamento <%= icone :confirmar, cor: nil %>
</button>
</div>
</div>
@@ -284,9 +287,9 @@
class="hidden fixed inset-0 z-50 bg-black/70 flex items-center justify-center p-4">
<div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl w-full max-w-md p-6">
<div class="flex items-center justify-between mb-1">
<h2 class="text-xl font-bold text-white">📄 Entrega de termo</h2>
<h2 class="text-xl font-bold text-white flex items-center gap-2"><%= icone :documento %> Entrega de termo</h2>
<button type="button" data-action="apontamento-termo#fechar"
class="text-gray-500 hover:text-white text-2xl leading-none"></button>
class="text-gray-500 hover:text-white leading-none" aria-label="Fechar"><%= icone :fechar, cor: nil, tamanho: 'w-5 h-5' %></button>
</div>
<p class="text-gray-400 text-sm mb-4">Entrega sem nota fiscal nem código de rastreio. Informe quantos termos de cada tipo foram entregues.</p>
@@ -295,7 +298,7 @@
<%# Motorista (contexto da tela) %>
<div class="bg-[#0a0a0a] border border-[#2a2a2a] rounded-lg px-4 py-3 mb-4">
<p class="text-gray-500 text-xs">Motorista</p>
<p class="text-white font-semibold">🚚 <%= @motorista %></p>
<p class="text-white font-semibold"><%= icone :caminhao %> <%= @motorista %></p>
</div>
<%# Veículo (Q3) — a qual carro estes termos pertencem %>
@@ -311,7 +314,7 @@
<%# Steppers de quantidade — termo normal e termo especial %>
<div class="grid grid-cols-2 gap-3 mb-5">
<div class="bg-[#0a0a0a] border border-[#2a2a2a] rounded-lg p-3">
<p class="text-white text-sm font-semibold text-center">📄 Termo Normal</p>
<p class="text-white text-sm font-semibold text-center"><%= icone :documento %> Termo Normal</p>
<p class="text-blue-400 text-xs text-center mb-2"><%= moeda(@precos[:termo]) %> cada</p>
<div class="flex items-center justify-center gap-2">
<button type="button" data-action="apontamento-termo#menos"
@@ -323,7 +326,7 @@
</div>
</div>
<div class="bg-[#0a0a0a] border border-[#2a2a2a] rounded-lg p-3">
<p class="text-white text-sm font-semibold text-center">📋 Termo Especial</p>
<p class="text-white text-sm font-semibold text-center"><%= icone :termo_especial %> Termo Especial</p>
<p class="text-cyan-400 text-xs text-center mb-2"><%= moeda(@precos[:termo_especial]) %> cada</p>
<div class="flex items-center justify-center gap-2">
<button type="button" data-action="apontamento-termo#menosEspecial"
@@ -338,7 +341,7 @@
<button type="button" data-action="apontamento-termo#adicionar"
class="w-full bg-green-600 hover:bg-green-500 text-white font-bold py-3.5 rounded-lg min-h-[48px]">
Adicionar termos
Adicionar termos <%= icone :confirmar, cor: nil %>
</button>
</div>
</div>
@@ -351,10 +354,10 @@
<%# ── Lista de entregas (3 colunas) — área rolável ──── %>
<div class="lg:col-span-3 space-y-2 lg:overflow-y-auto lg:pr-1" data-validacao-target="listaCol">
<%# 🔍 Busca na listagem — filtra os cards por NF, local, endereço ou veículo %>
<%# Busca na listagem — filtra os cards por NF, local, endereço ou veículo %>
<div class="sticky top-0 z-20 bg-[#0a0a0a] pb-2">
<div class="relative">
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none">🔍</span>
<span class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none"><%= icone :buscar, cor: 'text-gray-500' %></span>
<input type="search" data-validacao-target="busca" data-action="input->validacao#filtrarBusca"
placeholder="Buscar NF, local, endereço ou veículo…" autocomplete="off"
class="w-full bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg pl-10 pr-3 py-2.5 text-sm text-gray-200 placeholder-gray-500 focus:border-orange-500 focus:outline-none">
@@ -379,15 +382,15 @@
<p class="text-white font-semibold truncate">
NF <%= e.numero_nf %> · <%= e.local %>
<% if e.falhada? %>
<span class="ml-1 align-middle text-[10px] font-bold uppercase tracking-wide bg-red-500/20 text-red-400 border border-red-500/40 px-1.5 py-0.5 rounded">⚠️ Insucesso</span>
<span class="ml-1 align-middle text-[10px] font-bold uppercase tracking-wide bg-red-500/20 text-red-400 border border-red-500/40 px-1.5 py-0.5 rounded"><%= icone :alerta, cor: nil, tamanho: 'w-3 h-3' %> Insucesso</span>
<% else %>
<span class="ml-1 align-middle text-[10px] font-bold uppercase tracking-wide bg-green-500/20 text-green-400 border border-green-500/40 px-1.5 py-0.5 rounded"> Entregue</span>
<span class="ml-1 align-middle text-[10px] font-bold uppercase tracking-wide bg-green-500/20 text-green-400 border border-green-500/40 px-1.5 py-0.5 rounded"><%= icone :confirmar, cor: nil, tamanho: 'w-3 h-3' %> Entregue</span>
<% end %>
</p>
<p class="text-gray-400 text-xs truncate">📍 <%= e.address.presence || 'sem endereço' %></p>
<p class="text-gray-400 text-xs truncate"><%= icone :local %> <%= e.address.presence || 'sem endereço' %></p>
<p class="text-gray-500 text-xs">
📅 <%= e.checkout&.strftime('%d/%m/%Y') || '—' %> · 🚚 <%= e.vehicle.presence || 'sem veículo' %>
<% if e.atraso_minutos > 0 %> · ⏱️ atraso <%= e.atraso_minutos %>min<% end %>
<%= icone :calendario %> <%= e.checkout&.strftime('%d/%m/%Y') || '—' %> · <%= icone :caminhao %> <%= e.vehicle.presence || 'sem veículo' %>
<% if e.atraso_minutos > 0 %> · <%= icone :relogio, cor: 'text-amber-400' %> atraso <%= e.atraso_minutos %>min<% end %>
</p>
</div>
@@ -412,7 +415,7 @@
<% end %>
<% else %>
<div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-10 text-center">
<p class="text-4xl mb-3">🎉</p>
<p class="mb-3"><%= icone :sucesso, tamanho: 'w-10 h-10', cor: 'text-green-500' %></p>
<p class="text-gray-400">Nenhuma entrega pendente neste filtro.</p>
</div>
<% end %>
@@ -421,7 +424,7 @@
<%# ── Resumo lateral (1 coluna) — rola junto se precisar ─────── %>
<div class="lg:col-span-1 lg:overflow-y-auto" data-validacao-target="resumo">
<div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-5 space-y-4">
<h3 class="text-white font-bold">📊 Resumo</h3>
<h3 class="text-white font-bold flex items-center gap-2"><%= icone :dashboard %> Resumo</h3>
<div class="space-y-2 text-sm">
<div class="flex justify-between items-center">
@@ -465,13 +468,13 @@
</div>
<div class="border-t border-[#2a2a2a] pt-4 text-xs text-gray-500 space-y-1">
<p>💰 Normal: <%= moeda(@precos[:entrega_normal]) %></p>
<p>📦 Retirada: <%= moeda(@precos[:retirada]) %></p>
<p> Bônus: <%= moeda(@precos[:bonus]) %></p>
<p>⚠️ Desconto: -<%= moeda(@precos[:desconto]) %></p>
<p> Extraordinária: <%= moeda(@precos[:extraordinaria]) %> (valor por entrega)</p>
<p>📄 Termo: <%= moeda(@precos[:termo]) %></p>
<p>📋 Termo Especial: <%= moeda(@precos[:termo_especial]) %></p>
<p><%= icone :dinheiro %> Normal: <%= moeda(@precos[:entrega_normal]) %></p>
<p><%= icone :retirada %> Retirada: <%= moeda(@precos[:retirada]) %></p>
<p><%= icone :bonus %> Bônus: <%= moeda(@precos[:bonus]) %></p>
<p><%= icone :desconto %> Desconto: -<%= moeda(@precos[:desconto]) %></p>
<p><%= icone :extraordinaria %> Extraordinária: <%= moeda(@precos[:extraordinaria]) %> (valor por entrega)</p>
<p><%= icone :documento %> Termo: <%= moeda(@precos[:termo]) %></p>
<p><%= icone :termo_especial %> Termo Especial: <%= moeda(@precos[:termo_especial]) %></p>
</div>
</div>
</div>