Criação da visão geral da consolidação por motorista e Estilização
This commit is contained in:
@@ -6,8 +6,6 @@
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-2xl font-bold text-white flex items-center gap-2"><%= icone :consolidacoes, espaco: false %> Consolidações</h1>
|
||||
<div class="flex gap-2">
|
||||
<%= link_to rotulo(:motorista, 'Totais por motorista', cor: nil), totais_consolidacoes_path,
|
||||
class: 'text-gray-400 hover:text-white border border-[#2a2a2a] px-4 py-3 rounded-lg min-h-[48px] flex items-center transition-colors' %>
|
||||
<%= link_to rotulo(:arquivadas, 'Arquivadas', cor: nil), arquivadas_consolidacoes_path,
|
||||
class: 'text-gray-400 hover:text-white border border-[#2a2a2a] px-4 py-3 rounded-lg min-h-[48px] flex items-center transition-colors' %>
|
||||
<% if policy(Consolidacao).create? %>
|
||||
@@ -72,6 +70,25 @@
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<%# ── Modo de visualização ──────────────────────────────
|
||||
A mesma tela lida de dois jeitos: por CONSOLIDAÇÃO (como o trabalho é
|
||||
organizado) e por MOTORISTA (como o pagamento sai). Os filtros abaixo valem
|
||||
para os dois — por isso eles viajam junto no link da aba. %>
|
||||
<% ctx_filtros = { nome: params[:nome], motorista: params[:motorista], status: params[:status],
|
||||
pagamento: params[:pagamento], vehicle: params[:vehicle],
|
||||
inicio: params[:inicio], fim: params[:fim] }.compact_blank %>
|
||||
<div class="flex flex-wrap items-center gap-2 border-b border-[#2a2a2a] pb-3 mb-5">
|
||||
<% [['lista', :consolidacoes, 'Consolidações'], ['motoristas', :motorista, 'Por motorista']].each do |modo, ic, label| %>
|
||||
<% ativo = @visao == modo %>
|
||||
<%= link_to rotulo(ic, label, cor: (ativo ? nil : 'text-brand-laranja')),
|
||||
consolidacoes_path(ctx_filtros.merge(visao: modo)),
|
||||
class: "px-4 py-2.5 rounded-xl text-sm font-semibold whitespace-nowrap #{ativo ? 'bg-orange-500 text-black' : 'bg-[#1a1a1a] text-gray-300 border border-[#2a2a2a] hover:border-orange-500'}" %>
|
||||
<% end %>
|
||||
<span class="text-gray-500 text-xs ml-auto hidden sm:block">
|
||||
<%= @visao == 'motoristas' ? 'Quanto cada motorista fechou no período — clique num deles para ver de onde vem o valor' : 'Uma linha por consolidação' %>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<%# ── Filtros ──────────────────────────────────────────── %>
|
||||
<%# Filtros em flex-wrap, NÃO em grade de 6 colunas fixas.
|
||||
Motivo: os breakpoints do Tailwind (md:, lg:…) enxergam a JANELA, mas o
|
||||
@@ -82,66 +99,49 @@
|
||||
tamanho legível e a linha quebra sozinha conforme o espaço REAL. %>
|
||||
<%= form_with url: consolidacoes_path, method: :get,
|
||||
class: 'bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-4 mb-6 flex flex-wrap items-center gap-3' do |f| %>
|
||||
<%= f.text_field :nome, value: params[:nome], placeholder: 'Buscar por nome…',
|
||||
class: 'flex-1 basis-48 min-w-0 bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-2.5 focus:border-orange-500 focus:outline-none' %>
|
||||
<%# O modo de visualização é mantido ao filtrar (senão filtrar jogava o
|
||||
operador de volta para a lista). %>
|
||||
<%= hidden_field_tag :visao, @visao %>
|
||||
|
||||
<% if @visao == 'motoristas' %>
|
||||
<%= f.text_field :motorista, value: params[:motorista], placeholder: 'Buscar motorista…',
|
||||
class: 'flex-1 basis-48 min-w-0 bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-2.5 focus:border-orange-500 focus:outline-none' %>
|
||||
<% else %>
|
||||
<%= f.text_field :nome, value: params[:nome], placeholder: 'Buscar por nome…',
|
||||
class: 'flex-1 basis-48 min-w-0 bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-2.5 focus:border-orange-500 focus:outline-none' %>
|
||||
<% end %>
|
||||
|
||||
<%= f.select :status,
|
||||
options_for_select([['Todos os status', ''], ['Rascunho', 'rascunho'], ['Finalizada', 'finalizada']], params[:status]),
|
||||
{}, class: 'flex-1 basis-40 min-w-0 bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-2.5' %>
|
||||
|
||||
<%= f.select :pagamento,
|
||||
options_for_select([['Pagamento (todos)', ''], ['Pagas', 'pago'], ['Parciais', 'parcial'], ['Pendentes', 'pendente']], params[:pagamento]),
|
||||
{}, class: 'flex-1 basis-44 min-w-0 bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-2.5' %>
|
||||
<%# "Pagamento" é status DA CONSOLIDAÇÃO (todos os motoristas dela); no modo
|
||||
Por motorista cada linha já mostra pago/a receber, então o filtro sairia
|
||||
confuso — some. %>
|
||||
<% if @visao != 'motoristas' %>
|
||||
<%= f.select :pagamento,
|
||||
options_for_select([['Pagamento (todos)', ''], ['Pagas', 'pago'], ['Parciais', 'parcial'], ['Pendentes', 'pendente']], params[:pagamento]),
|
||||
{}, class: 'flex-1 basis-44 min-w-0 bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-2.5' %>
|
||||
<% end %>
|
||||
|
||||
<%= f.date_field :inicio, value: params[:inicio],
|
||||
<%# No modo Por motorista o período SEMPRE vale (default: mês corrente
|
||||
inteiro), então os campos já vêm preenchidos com o que está sendo somado. %>
|
||||
<%= f.date_field :inicio, value: (@visao == 'motoristas' ? @inicio.strftime('%Y-%m-%d') : params[:inicio]),
|
||||
class: 'flex-1 basis-36 max-w-[13rem] min-w-0 bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-2.5' %>
|
||||
|
||||
<%= f.date_field :fim, value: params[:fim],
|
||||
<%= f.date_field :fim, value: (@visao == 'motoristas' ? @fim.strftime('%Y-%m-%d') : params[:fim]),
|
||||
class: 'flex-1 basis-36 max-w-[13rem] min-w-0 bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-2.5' %>
|
||||
|
||||
<%# shrink-0 + whitespace-nowrap: os botões nunca são espremidos a ponto de
|
||||
cortar o texto — se faltar espaço, a linha quebra e eles descem inteiros. %>
|
||||
<div class="flex gap-2 shrink-0">
|
||||
<%= f.submit 'Filtrar', class: 'bg-orange-500 hover:bg-orange-600 text-black font-bold rounded-lg cursor-pointer px-5 py-2.5 whitespace-nowrap' %>
|
||||
<%= link_to 'Limpar', consolidacoes_path, class: 'px-4 py-2.5 text-gray-400 hover:text-white border border-[#2a2a2a] rounded-lg whitespace-nowrap' %>
|
||||
<%= link_to 'Limpar', consolidacoes_path(visao: @visao), class: 'px-4 py-2.5 text-gray-400 hover:text-white border border-[#2a2a2a] rounded-lg whitespace-nowrap' %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%# ── Lista ────────────────────────────────────────────── %>
|
||||
<% if @consolidacoes.any? %>
|
||||
<div class="space-y-3">
|
||||
<% @consolidacoes.each do |c| %>
|
||||
<%= link_to consolidacao_path(c),
|
||||
class: 'block bg-[#1a1a1a] border border-[#2a2a2a] hover:border-orange-500 rounded-xl p-5 transition-colors' do %>
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-1">
|
||||
<h3 class="text-white font-bold text-lg"><%= c.nome %></h3>
|
||||
<%= badge_status(c.status) %>
|
||||
<% if c.finalizada? %><%= badge_pagamento(c.status_pagamento) %><% end %>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm">
|
||||
<%= icone :calendario %> <%= l c.data_inicio, format: :short %> → <%= l c.data_fim, format: :short %>
|
||||
· <%= icone :pessoa %> <%= c.consolidacao_motoristas.count %> motorista(s)
|
||||
· Criada por <%= c.criador.nome_display %>
|
||||
</p>
|
||||
<% if c.operacoes.present? %>
|
||||
<p class="text-gray-500 text-xs mt-1"><%= icone :pasta %> <%= c.operacoes_label.join(' · ') %></p>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-orange-500 font-black text-2xl"><%= moeda(c.valor_total) %></p>
|
||||
<p class="text-gray-500 text-xs"><%= c.consolidacao_entregas.count %> entregas classificadas</p>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% if @visao == 'motoristas' %>
|
||||
<%= render 'por_motorista' %>
|
||||
<% else %>
|
||||
<div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-12 text-center">
|
||||
<p class="mb-4"><%= icone :vazio, tamanho: 'w-12 h-12', cor: 'text-gray-600', espaco: false %></p>
|
||||
<p class="text-gray-400 mb-4">Nenhuma consolidação encontrada.</p>
|
||||
<%= link_to 'Criar primeira consolidação', new_consolidacao_path,
|
||||
class: 'inline-block bg-orange-500 hover:bg-orange-600 text-black font-bold px-5 py-3 rounded-lg' %>
|
||||
</div>
|
||||
<%= render 'lista' %>
|
||||
<% end %>
|
||||
|
||||
Reference in New Issue
Block a user