519 lines
36 KiB
Plaintext
519 lines
36 KiB
Plaintext
<%# app/views/consolidacao_entregas/validar.html.erb — PASSO 2: Validar entregas %>
|
||
<% content_for :title, "Validar — #{@motorista}" %>
|
||
|
||
<div class="max-w-6xl mx-auto lg:h-[calc(100vh-4rem)] lg:flex lg:flex-col" data-controller="validacao"
|
||
data-validacao-url-value="<%= classificar_consolidacao_consolidacao_entregas_path(@consolidacao) %>"
|
||
data-validacao-massa-url-value="<%= classificar_em_massa_consolidacao_consolidacao_entregas_path(@consolidacao) %>"
|
||
data-validacao-motorista-value="<%= @motorista %>"
|
||
data-validacao-total-value="<%= @total_entregas %>"
|
||
data-validacao-veiculos-value="<%= @veiculos_sel.to_json %>"
|
||
data-validacao-preco-extraordinaria-value="<%= @precos[:extraordinaria] %>">
|
||
|
||
<%# Cabeçalho + controles fixos no topo (no desktop); só a lista de NFs rola. %>
|
||
<div class="lg:shrink-0">
|
||
|
||
<%# Cabeçalho compacto: voltar, identificação e progresso numa faixa só.
|
||
Espaço vertical aqui é CARO — tudo isto fica fixo e é subtraído da lista,
|
||
que é o que o ADM realmente precisa ver. Antes eram 178px em dois cards. %>
|
||
<div class="flex flex-wrap items-center gap-x-3 gap-y-2 mb-2">
|
||
<%= link_to wizard_consolidacao_path(@consolidacao), title: 'Voltar (Passo 1)',
|
||
class: 'shrink-0 inline-flex items-center justify-center gap-1 bg-[#1a1a1a] hover:bg-[#2a2a2a] text-white border border-[#2a2a2a] hover:border-orange-500 font-semibold px-3 h-11 rounded-lg text-sm' do %>
|
||
←<span class="hidden sm:inline">Passo 1</span>
|
||
<% end %>
|
||
|
||
<%# basis-40: o nome não pode ser espremido até virar "P…" — se não couber
|
||
com o resto, a linha quebra em vez de esmagar a identificação. %>
|
||
<div class="min-w-0 flex-1 basis-40">
|
||
<h1 class="text-xl lg:text-2xl font-bold text-white flex items-center gap-2 truncate"><%= icone :caminhao, espaco: false %> <%= @motorista %></h1>
|
||
<p class="text-gray-400 text-sm truncate"><%= @consolidacao.nome %> · <%= l @consolidacao.data_inicio, format: :short %> → <%= l @consolidacao.data_fim, format: :short %></p>
|
||
</div>
|
||
|
||
<%# Progresso ao lado do título (em vez de um card de 70px só p/ ele). No
|
||
celular vai para uma linha própria, no fim, para não brigar pelo espaço.
|
||
Números em branco/negrito: esta é a informação que o ADM confere o tempo
|
||
todo enquanto classifica — compactar não pode custar a leitura dela. %>
|
||
<p class="order-last w-full text-left sm:order-none sm:w-auto sm:shrink-0 sm:text-right text-sm text-gray-400">
|
||
<% if @veiculos_sel.any? %><span class="text-gray-300"><%= icone :caminhao %> <%= @veiculos_sel.join(', ') %></span> — <% end %>
|
||
<span class="text-white font-semibold"><span data-validacao-target="contadorClassificadas"><%= @classificadas %></span>/<span data-validacao-target="contadorTotal"><%= @total_entregas %></span></span>
|
||
classificadas
|
||
<span data-validacao-target="manuaisInfo" class="<%= 'hidden' unless @manuais.positive? %> text-blue-400">·
|
||
+<span data-validacao-target="contadorManuais"><%= @manuais %></span> manuais</span>
|
||
<span class="text-orange-500 font-bold ml-1 text-base" data-validacao-target="percentual"></span>
|
||
</p>
|
||
|
||
<%= link_to revisar_consolidacao_consolidacao_entregas_path(@consolidacao, motorista: @motorista),
|
||
class: 'shrink-0 bg-orange-500 hover:bg-orange-600 text-black font-bold px-4 h-11 rounded-lg flex items-center gap-1 text-sm' do %>
|
||
Revisar<span class="hidden sm:inline"> (Passo 3)</span><%= icone :avancar, cor: nil %>
|
||
<% end %>
|
||
</div>
|
||
|
||
<%# Barra com 2 segmentos: laranja = elegíveis classificadas · azul = manuais %>
|
||
<div class="w-full bg-[#0a0a0a] rounded-full h-2 flex overflow-hidden mb-2">
|
||
<div data-validacao-target="barra" class="h-2 bg-orange-500 transition-all duration-300" style="width: 0%"></div>
|
||
<div data-validacao-target="barraManuais" class="h-2 bg-blue-500 transition-all duration-300" style="width: 0%"></div>
|
||
</div>
|
||
|
||
<%# Fechar por veículo — filtra a tela por carro, mostra o estado (pronto/
|
||
consolidado/arquivado) e permite CONSOLIDAR o veículo selecionado.
|
||
Só aparece quando o motorista usou mais de um veículo no período. %>
|
||
<% pode_fechar_veiculo = !(@consolidacao.finalizada? && current_user.operador?) %>
|
||
<% 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"><%= 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.5 h-3.5' %>)</span>
|
||
</div>
|
||
<div class="flex flex-wrap gap-2">
|
||
<%# Chip "Todos" — limpa a seleção (mostra todos os carros) %>
|
||
<%= link_to validar_consolidacao_consolidacao_entregas_path(@consolidacao, motorista: @motorista),
|
||
class: "px-3 py-2 rounded-lg text-sm font-semibold border min-h-[40px] flex items-center
|
||
#{@veiculos_sel.empty? ? 'border-orange-500 text-orange-400 bg-orange-500/10' : 'border-[#2a2a2a] text-gray-300 hover:border-orange-500'}" do %>
|
||
Todos
|
||
<% end %>
|
||
|
||
<% @veiculos_status.each do |v| %>
|
||
<% 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+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'
|
||
elsif v[:completo] then 'border-green-600/50 text-green-400'
|
||
elsif v[:arquivado] then 'border-dashed border-[#3a3a3a] text-gray-500'
|
||
else 'border-[#2a2a2a] text-gray-300 hover:border-orange-500' end %>
|
||
<%= 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] %>"><%= icone :travado, cor: nil, tamanho: 'w-3.5 h-3.5', espaco: false %></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 class="<%= 'hidden' unless v[:completo] %>"><%= icone :confirmar, cor: nil, tamanho: 'w-3.5 h-3.5', espaco: false %></span>
|
||
</span>
|
||
<% end %>
|
||
<% end %>
|
||
</div>
|
||
|
||
<%# Ação de consolidação — opera sobre o veículo único selecionado. %>
|
||
<% if pode_fechar_veiculo %>
|
||
<% sel_unico = @veiculos_sel.size == 1 ? @veiculos_sel.first : nil %>
|
||
<% status_unico = sel_unico && @veiculos_status.find { |v| v[:vehicle] == sel_unico } %>
|
||
<div class="mt-3 pt-3 border-t border-[#2a2a2a]">
|
||
<% if status_unico.nil? %>
|
||
<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"><%= 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 },
|
||
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-4 h-4' %> 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 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' },
|
||
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-4 h-4' %> 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 },
|
||
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-4 h-4' %> 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>
|
||
</div>
|
||
<% end %>
|
||
</div>
|
||
<% end %>
|
||
</div>
|
||
<% end %>
|
||
|
||
<%# Barra de ações — uma linha só. O botão "Adicionar lançamento" (bloco
|
||
abaixo, que carrega os modais) entra NESTA mesma faixa via flex `order`,
|
||
sem precisar mover os modais de lugar. %>
|
||
<div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl px-3 py-2 mb-2 flex flex-wrap items-center gap-x-3 gap-y-2">
|
||
<label class="order-1 flex items-center gap-2 text-gray-300 text-sm cursor-pointer select-none h-11">
|
||
<input type="checkbox" data-validacao-target="selecionarTodos"
|
||
data-action="change->validacao#selecionarTodos"
|
||
class="rounded text-orange-500 bg-[#0a0a0a] border-[#2a2a2a] w-5 h-5">
|
||
Selecionar todos
|
||
</label>
|
||
|
||
<div class="order-3 ml-auto flex items-center gap-2">
|
||
<%# 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 h-11 rounded-lg whitespace-nowrap">
|
||
<%= 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,
|
||
apenas_pendentes: params[:apenas_pendentes] == '1' ? nil : '1'),
|
||
class: 'text-orange-400 hover:text-orange-300 text-sm border border-orange-500/40 px-3 h-11 rounded-lg flex items-center' %>
|
||
</div>
|
||
|
||
<%# Caixa de ferramentas — concentra os lançamentos avulsos (registro manual de
|
||
entrega e entrega de termo) num único botão com menu suspenso. Os modais e
|
||
controllers existentes são reaproveitados; só o gatilho mudou.
|
||
Fica DENTRO da barra de ações (order-2) para não custar uma linha própria;
|
||
os modais são `fixed`, então não afetam o layout da faixa. %>
|
||
<% unless @consolidacao.finalizada? && current_user.operador? %>
|
||
<div class="order-2 relative"
|
||
data-controller="ferramentas apontamento-manual apontamento-termo"
|
||
data-apontamento-manual-apontar-manual-url-value="<%= apontar_manual_consolidacao_consolidacao_entregas_path(@consolidacao) %>"
|
||
data-apontamento-termo-apontar-termo-url-value="<%= apontar_termo_consolidacao_consolidacao_entregas_path(@consolidacao) %>"
|
||
data-apontamento-termo-motorista-value="<%= @motorista %>">
|
||
|
||
<%# Botão único + menu suspenso %>
|
||
<button type="button" data-action="ferramentas#toggle"
|
||
class="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 h-11 rounded-lg text-sm whitespace-nowrap">
|
||
<%= icone :adicionar %> Adicionar lançamento
|
||
<%= icone :expandir, cor: 'text-gray-500', espaco: false %>
|
||
</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"><%= 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"><%= icone :documento %> Entrega de termo</span>
|
||
<span class="block text-gray-500 text-xs">sem nota/código — só quantidade</span>
|
||
</button>
|
||
</div>
|
||
|
||
<%# Modal — registro manual de entrega %>
|
||
<div data-apontamento-manual-target="modal" data-action="click->apontamento-manual#fundo"
|
||
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-lg p-6 max-h-[90vh] overflow-y-auto">
|
||
<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 leading-none" aria-label="Fechar"><%= icone :fechar, cor: nil, tamanho: 'w-6 h-6', espaco: false %></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>
|
||
|
||
<p data-apontamento-manual-target="erro" class="hidden bg-red-500/10 text-red-400 border border-red-500/30 rounded-lg px-3 py-2 text-sm mb-3"></p>
|
||
|
||
<%# Motorista (default = o motorista da tela; pode trocar) %>
|
||
<label class="block text-gray-400 text-sm mb-1">Motorista</label>
|
||
<input data-apontamento-manual-target="motorista" type="text" list="motoristas-consolidacao"
|
||
value="<%= @motorista %>" placeholder="Nome do motorista"
|
||
class="w-full bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-3 text-base focus:border-purple-500 focus:outline-none mb-3">
|
||
<datalist id="motoristas-consolidacao">
|
||
<% Array(@motoristas_consolidacao).each do |nome| %>
|
||
<option value="<%= nome %>"></option>
|
||
<% end %>
|
||
</datalist>
|
||
|
||
<%# Veículo (Q3) — a qual carro este lançamento pertence (soma no balde dele) %>
|
||
<label class="block text-gray-400 text-sm mb-1">Veículo <span class="text-gray-600">(opcional)</span></label>
|
||
<select data-apontamento-manual-target="veiculo"
|
||
class="w-full bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-3 text-base focus:border-purple-500 focus:outline-none mb-3">
|
||
<option value="">— sem veículo —</option>
|
||
<% @veiculos_status.map { |v| v[:vehicle] }.reject { |x| x == '(sem veículo)' }.each do |veic| %>
|
||
<option value="<%= veic %>"><%= veic %></option>
|
||
<% end %>
|
||
</select>
|
||
|
||
<%# NF + observação (texto livre) %>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">
|
||
<div>
|
||
<label class="block text-gray-400 text-sm mb-1">NF <span class="text-gray-600">(opcional)</span></label>
|
||
<input data-apontamento-manual-target="nf" type="text" inputmode="numeric" placeholder="Número da nota"
|
||
class="w-full bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-3 text-base focus:border-purple-500 focus:outline-none">
|
||
</div>
|
||
<div>
|
||
<label class="block text-gray-400 text-sm mb-1">Observação / local <span class="text-gray-600">(opcional)</span></label>
|
||
<input data-apontamento-manual-target="obs" type="text" placeholder="Ex.: UBS Sacomã"
|
||
class="w-full bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-3 text-base focus:border-purple-500 focus:outline-none">
|
||
</div>
|
||
</div>
|
||
|
||
<%# 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', :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><%= icone ic %> <%= label %><br><span class="text-gray-500 text-xs"><%= moeda(preco) %></span></span>
|
||
</label>
|
||
<% end %>
|
||
</div>
|
||
|
||
<%# Valor customizado da Extraordinária (opcional) %>
|
||
<div class="mb-4">
|
||
<label class="block text-gray-400 text-sm mb-1">Valor da Extraordinária <span class="text-gray-600">(opcional — vazio usa o padrão)</span></label>
|
||
<input data-apontamento-manual-target="valorExtra" type="text" inputmode="decimal" placeholder="<%= moeda(Configuracao.preco_extraordinaria) %>"
|
||
class="w-full bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-3 text-base focus:border-purple-500 focus:outline-none">
|
||
</div>
|
||
|
||
<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 <%= icone :confirmar, cor: nil, espaco: false %>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<%# Modal — entrega de termo %>
|
||
<div data-apontamento-termo-target="modal" data-action="click->apontamento-termo#fundo"
|
||
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 flex items-center gap-2"><%= icone :documento, espaco: false %> Entrega de termo</h2>
|
||
<button type="button" data-action="apontamento-termo#fechar"
|
||
class="text-gray-500 hover:text-white leading-none" aria-label="Fechar"><%= icone :fechar, cor: nil, tamanho: 'w-6 h-6', espaco: false %></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>
|
||
|
||
<p data-apontamento-termo-target="erro" class="hidden bg-red-500/10 text-red-400 border border-red-500/30 rounded-lg px-3 py-2 text-sm mb-3"></p>
|
||
|
||
<%# 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"><%= icone :caminhao %> <%= @motorista %></p>
|
||
</div>
|
||
|
||
<%# Veículo (Q3) — a qual carro estes termos pertencem %>
|
||
<label class="block text-gray-400 text-sm mb-1">Veículo <span class="text-gray-600">(opcional)</span></label>
|
||
<select data-apontamento-termo-target="veiculo"
|
||
class="w-full bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-3 text-base focus:border-blue-500 focus:outline-none mb-4">
|
||
<option value="">— sem veículo —</option>
|
||
<% @veiculos_status.map { |v| v[:vehicle] }.reject { |x| x == '(sem veículo)' }.each do |veic| %>
|
||
<option value="<%= veic %>"><%= veic %></option>
|
||
<% end %>
|
||
</select>
|
||
|
||
<%# 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"><%= 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"
|
||
class="w-10 h-10 rounded-lg bg-[#1a1a1a] border border-[#2a2a2a] hover:border-blue-500 text-white text-xl font-bold leading-none">−</button>
|
||
<input data-apontamento-termo-target="quantidade" type="text" inputmode="numeric" value="1" readonly
|
||
class="w-14 text-center bg-[#1a1a1a] border border-[#2a2a2a] text-white text-xl font-bold rounded-lg py-2 focus:outline-none">
|
||
<button type="button" data-action="apontamento-termo#mais"
|
||
class="w-10 h-10 rounded-lg bg-[#1a1a1a] border border-[#2a2a2a] hover:border-blue-500 text-white text-xl font-bold leading-none">+</button>
|
||
</div>
|
||
</div>
|
||
<div class="bg-[#0a0a0a] border border-[#2a2a2a] rounded-lg p-3">
|
||
<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"
|
||
class="w-10 h-10 rounded-lg bg-[#1a1a1a] border border-[#2a2a2a] hover:border-cyan-500 text-white text-xl font-bold leading-none">−</button>
|
||
<input data-apontamento-termo-target="quantidadeEspecial" type="text" inputmode="numeric" value="0" readonly
|
||
class="w-14 text-center bg-[#1a1a1a] border border-[#2a2a2a] text-white text-xl font-bold rounded-lg py-2 focus:outline-none">
|
||
<button type="button" data-action="apontamento-termo#maisEspecial"
|
||
class="w-10 h-10 rounded-lg bg-[#1a1a1a] border border-[#2a2a2a] hover:border-cyan-500 text-white text-xl font-bold leading-none">+</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<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 <%= icone :confirmar, cor: nil, espaco: false %>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<% end %>
|
||
</div>
|
||
<%# Fim da barra de ações %>
|
||
|
||
<%# Ações em massa — SÓ aparecem quando há entregas selecionadas. Ocupavam
|
||
160px fixos para botões que, sem seleção, respondiam com um alerta
|
||
pedindo para selecionar algo. %>
|
||
<div data-validacao-target="barraSelecao"
|
||
class="hidden bg-orange-500/10 border border-orange-500/40 rounded-xl px-3 py-2 mb-2 flex flex-wrap items-center gap-x-3 gap-y-2">
|
||
<span class="text-sm text-white font-semibold whitespace-nowrap">
|
||
<span data-validacao-target="contadorSelecao">0</span> selecionada(s)
|
||
</span>
|
||
<span class="text-gray-400 text-xs">aplicar <span class="hidden sm:inline">(clique de novo p/ remover)</span>:</span>
|
||
<div class="flex items-center gap-2 flex-wrap">
|
||
<button data-action="click->validacao#marcarSelecionados" data-tipo="entrega_normal"
|
||
class="bg-orange-500 text-black font-bold px-3 h-11 rounded-lg text-xs">Normal</button>
|
||
<button data-action="click->validacao#marcarSelecionados" data-tipo="retirada"
|
||
class="bg-orange-800 text-white font-bold px-3 h-11 rounded-lg text-xs">Retirada</button>
|
||
<button data-action="click->validacao#marcarSelecionados" data-tipo="bonus"
|
||
class="bg-white text-black font-bold px-3 h-11 rounded-lg text-xs border border-orange-500">Bônus</button>
|
||
<button data-action="click->validacao#marcarSelecionados" data-tipo="desconto"
|
||
class="bg-black text-white font-bold px-3 h-11 rounded-lg text-xs border border-gray-700">Desconto</button>
|
||
<button data-action="click->validacao#marcarSelecionados" data-tipo="extraordinaria"
|
||
class="bg-purple-600 text-white font-bold px-3 h-11 rounded-lg text-xs">Extra</button>
|
||
</div>
|
||
<button type="button" data-action="validacao#limparSelecao"
|
||
class="ml-auto text-gray-400 hover:text-white text-xs underline whitespace-nowrap">limpar seleção</button>
|
||
</div>
|
||
|
||
</div>
|
||
<%# Fim do cabeçalho fixo — abaixo só a lista de NFs rola. %>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-3 lg:flex-1 lg:min-h-0">
|
||
|
||
<%# ── 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 %>
|
||
<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 pointer-events-none"><%= icone :buscar, cor: 'text-gray-500', espaco: false %></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">
|
||
</div>
|
||
<p data-validacao-target="buscaVazia" class="hidden text-gray-500 text-xs mt-2 px-1">Nenhuma nota encontrada para a busca.</p>
|
||
</div>
|
||
<% if @entregas.any? %>
|
||
<% @entregas.each do |e| %>
|
||
<% tipos_ativos = (@classificacoes[e.tracking_id] || []).map(&:tipo) %>
|
||
<div class="bg-[#1a1a1a] border <%= e.falhada? ? 'border-red-500/50' : 'border-[#2a2a2a]' %> rounded-xl p-4 flex flex-col lg:flex-row lg:items-center gap-3"
|
||
data-validacao-target="linha" data-tracking="<%= e.tracking_id %>"
|
||
data-vehicle="<%= e.vehicle.presence || '(sem veículo)' %>"
|
||
data-busca="<%= [e.numero_nf, e.local, e.address, e.vehicle].compact.join(' ').downcase %>"
|
||
data-classificada="<%= tipos_ativos.any? ? '1' : '0' %>">
|
||
|
||
<%# Checkbox seleção em massa %>
|
||
<input type="checkbox" data-validacao-target="checkbox" value="<%= e.tracking_id %>"
|
||
data-action="change->validacao#atualizarSelecao"
|
||
class="rounded text-orange-500 bg-[#0a0a0a] border-[#2a2a2a] w-5 h-5">
|
||
|
||
<%# Dados da entrega %>
|
||
<div class="flex-1 min-w-0">
|
||
<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"><%= icone :alerta, cor: nil, tamanho: 'w-3.5 h-3.5' %> 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"><%= icone :confirmar, cor: nil, tamanho: 'w-3.5 h-3.5' %> Entregue</span>
|
||
<% end %>
|
||
</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">
|
||
<%= 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>
|
||
|
||
<%# Toggles coloridos — laranja=normal, laranja escuro=retirada, branco=bônus, preto=desconto %>
|
||
<div class="flex flex-wrap gap-1.5 lg:shrink-0" data-validacao-target="toggles" data-tracking="<%= e.tracking_id %>">
|
||
<% [
|
||
['entrega_normal', 'Normal', 'bg-orange-500 text-black'],
|
||
['retirada', 'Retirada', 'bg-orange-800 text-white'],
|
||
['bonus', 'Bônus', 'bg-white text-black border border-orange-500'],
|
||
['desconto', 'Desc.', 'bg-black text-white border border-gray-700'],
|
||
['extraordinaria', 'Extra', 'bg-purple-600 text-white']
|
||
].each do |tipo, label, cores| %>
|
||
<button data-action="click->validacao#classificar"
|
||
data-tracking="<%= e.tracking_id %>" data-tipo="<%= tipo %>"
|
||
class="toggle-btn <%= cores %> font-bold px-3 py-2.5 rounded-lg text-xs min-h-[44px] transition-all
|
||
<%= tipos_ativos.include?(tipo) ? 'ring-2 ring-green-400 scale-105' : 'opacity-50 hover:opacity-100' %>">
|
||
<%= label %>
|
||
</button>
|
||
<% end %>
|
||
</div>
|
||
</div>
|
||
<% end %>
|
||
<% else %>
|
||
<div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-10 text-center">
|
||
<p class="mb-3"><%= icone :sucesso, tamanho: 'w-10 h-10', cor: 'text-green-500', espaco: false %></p>
|
||
<p class="text-gray-400">Nenhuma entrega pendente neste filtro.</p>
|
||
</div>
|
||
<% end %>
|
||
</div>
|
||
|
||
<%# ── 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 flex items-center gap-2"><%= icone :dashboard, espaco: false %> Resumo</h3>
|
||
|
||
<div class="space-y-2 text-sm">
|
||
<div class="flex justify-between items-center">
|
||
<span class="flex items-center gap-2"><span class="w-3 h-3 bg-orange-500 rounded-full"></span> Normal</span>
|
||
<span class="text-white font-bold" data-validacao-target="qtdNormal">0</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class="flex items-center gap-2"><span class="w-3 h-3 bg-orange-800 rounded-full"></span> Retirada</span>
|
||
<span class="text-white font-bold" data-validacao-target="qtdRetirada">0</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class="flex items-center gap-2"><span class="w-3 h-3 bg-white rounded-full border border-orange-500"></span> Bônus</span>
|
||
<span class="text-white font-bold" data-validacao-target="qtdBonus">0</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class="flex items-center gap-2"><span class="w-3 h-3 bg-black border border-gray-600 rounded-full"></span> Desconto</span>
|
||
<span class="text-white font-bold" data-validacao-target="qtdDesconto">0</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class="flex items-center gap-2"><span class="w-3 h-3 bg-purple-600 rounded-full"></span> Extraordinária</span>
|
||
<span class="text-white font-bold" data-validacao-target="qtdExtraordinaria">0</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class="flex items-center gap-2"><span class="w-3 h-3 bg-blue-600 rounded-full"></span> Termo</span>
|
||
<span class="text-white font-bold" data-validacao-target="qtdTermo">0</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class="flex items-center gap-2"><span class="w-3 h-3 bg-cyan-600 rounded-full"></span> Termo Especial</span>
|
||
<span class="text-white font-bold" data-validacao-target="qtdTermoEspecial">0</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border-t border-[#2a2a2a] pt-4 flex justify-between items-center text-sm">
|
||
<span class="flex items-center gap-2 text-blue-400"><span class="w-3 h-3 bg-blue-500 rounded-full"></span> Apontamentos manuais</span>
|
||
<span class="text-blue-400 font-bold" data-validacao-target="qtdManuais"><%= @manuais %></span>
|
||
</div>
|
||
|
||
<div class="border-t border-[#2a2a2a] pt-4">
|
||
<p class="text-gray-500 text-xs mb-1">Total do motorista</p>
|
||
<p class="text-orange-500 font-black text-2xl" data-validacao-target="valorTotal">R$ 0,00</p>
|
||
</div>
|
||
|
||
<div class="border-t border-[#2a2a2a] pt-4 text-xs text-gray-500 space-y-1">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
|
||
<%# Estado inicial para o Stimulus %>
|
||
<script type="application/json" id="validacao-estado-inicial">
|
||
<% _todas = @classificacoes.values.flatten %>
|
||
<%= raw({
|
||
classificadas: @classificadas,
|
||
manuais: @manuais,
|
||
por_tipo: _todas.group_by(&:tipo).transform_values { |arr| arr.sum(&:quantidade) },
|
||
valor_total: _todas.sum { |c| c.tipo == 'desconto' ? -c.valor_aplicado : c.valor_aplicado }.to_f
|
||
}.to_json) %>
|
||
</script>
|