Criação da visão geral da consolidação por motorista e Estilização
This commit is contained in:
@@ -1,14 +1,23 @@
|
||||
<%# app/views/motorista/dashboard/index.html.erb — Painel do Motorista %>
|
||||
<%# app/views/motorista/dashboard/index.html.erb — Painel do Motorista
|
||||
Uma tela só: período → quanto já está FECHADO, quanto ainda é ESTIMATIVA e
|
||||
de onde vem cada valor. Feita para celular: alvos grandes, número em
|
||||
destaque, sem tabela que precise de zoom. %>
|
||||
<% content_for :title, 'Meu Painel' %>
|
||||
|
||||
<% mes = Date.current.beginning_of_month..Date.current.end_of_month %>
|
||||
<% mes_ant = (Date.current - 1.month).beginning_of_month..(Date.current - 1.month).end_of_month %>
|
||||
<% tres_meses = (Date.current - 2.months).beginning_of_month..Date.current.end_of_month %>
|
||||
<% atalhos = { 'Este mês' => mes, 'Mês passado' => mes_ant, '3 meses' => tres_meses } %>
|
||||
<% atalhos['Tudo'] = (@faixa_total.first..@faixa_total.last) if @faixa_total %>
|
||||
|
||||
<div class="max-w-2xl mx-auto">
|
||||
|
||||
<h1 class="text-3xl font-bold text-white mb-1">Olá, <%= current_user.nome.split.first %>!</h1>
|
||||
<p class="text-gray-300 text-lg mb-6">Aqui estão seus valores de entregas.</p>
|
||||
<p class="text-gray-300 text-lg mb-5">Escolha o período e veja quanto você tem a receber.</p>
|
||||
|
||||
<%# ── Aviso de pagamento recém-confirmado ───────────────── %>
|
||||
<% if @pagamentos_recentes.any? %>
|
||||
<div class="bg-green-600/15 border border-green-600/40 rounded-2xl p-5 mb-6">
|
||||
<div class="bg-green-600/15 border border-green-600/40 rounded-2xl p-5 mb-5">
|
||||
<p class="text-green-400 font-bold uppercase tracking-wide mb-3 flex items-center gap-2"><%= icone :sucesso, cor: nil, espaco: false %> Pagamento confirmado!</p>
|
||||
<div class="space-y-3">
|
||||
<% @pagamentos_recentes.each do |cm| %>
|
||||
@@ -28,65 +37,112 @@
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%# ── 2 Cards grandes ─────────────────────────────────── %>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
|
||||
|
||||
<%# Card 1 — Valor Estimado (LARANJA) %>
|
||||
<div class="bg-orange-500 rounded-2xl p-6">
|
||||
<p class="text-black/80 font-bold uppercase tracking-wide flex items-center gap-2"><%= icone :dinheiro, cor: nil, espaco: false %> Valor estimado deste mês</p>
|
||||
<p class="text-black/70 text-sm mt-1"><%= icone :calendario, cor: nil %> <%= l @estimado_inicio, format: :short %> a <%= l @estimado_fim, format: :short %></p>
|
||||
<p class="text-black font-black text-4xl sm:text-5xl mt-2 leading-tight whitespace-nowrap"><%= moeda(@valor_estimado) %></p>
|
||||
<%# "Atendidas" = concluídas + sem sucesso. O rótulo NÃO pode voltar a dizer
|
||||
"feitas e confirmadas": o valor acima inclui as visitas sem sucesso, que
|
||||
a empresa também paga (o motorista foi ao local). Sem a segunda linha o
|
||||
motorista não consegue conferir a conta. %>
|
||||
<p class="text-black/80 text-base mt-2">
|
||||
<%= @entregas_mes %> entregas atendidas
|
||||
</p>
|
||||
<p class="text-black/70 text-sm mt-1">
|
||||
<%= @entregas_concluidas %> entregues · <%= @entregas_falhadas %> sem sucesso (pagas também)
|
||||
</p>
|
||||
<p class="text-black/60 text-sm mt-3">
|
||||
<%= icone :alerta, cor: nil %> Valor aproximado. O valor certo sai quando a empresa fechar o pagamento.
|
||||
</p>
|
||||
<%# ── Período ───────────────────────────────────────────
|
||||
Chips grandes para o caso comum e um "outro período" escondido no
|
||||
<details> (sem JS) para a data exata. %>
|
||||
<div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl p-4 mb-5">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<% atalhos.each do |label, faixa| %>
|
||||
<% ativo = @inicio == faixa.first && @fim == faixa.last %>
|
||||
<%= link_to label,
|
||||
motorista_dashboard_path(inicio: faixa.first.strftime('%Y-%m-%d'), fim: faixa.last.strftime('%Y-%m-%d')),
|
||||
class: "px-4 py-3 rounded-xl text-base font-bold min-h-[48px] flex items-center #{ativo ? 'bg-orange-500 text-black' : 'bg-[#0a0a0a] text-gray-300 border border-[#2a2a2a]'}" %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<%# Card 2 — Valor Consolidado (BRANCO). Clicável: leva ao total POR PERÍODO,
|
||||
com as consolidações que compõem o valor e o PDF do período. %>
|
||||
<%= link_to motorista_totais_path, class: 'block bg-white rounded-2xl p-6 hover:ring-2 hover:ring-orange-500 transition' do %>
|
||||
<p class="text-gray-600 font-bold uppercase tracking-wide flex items-center gap-2"><%= icone :sucesso, cor: 'text-green-600', espaco: false %> Valor fechado para pagamento</p>
|
||||
<p class="text-black font-black text-4xl sm:text-5xl mt-2 leading-tight whitespace-nowrap"><%= moeda(@valor_consolidado) %></p>
|
||||
<p class="text-gray-600 text-base mt-2">
|
||||
Soma dos pagamentos já confirmados pela empresa
|
||||
</p>
|
||||
<p class="text-orange-600 font-bold text-base mt-3">
|
||||
<%= icone :avancar, cor: 'text-orange-600' %> Ver por período e baixar o PDF
|
||||
<details class="mt-3" <%= 'open' if atalhos.values.none? { |f| @inicio == f.first && @fim == f.last } %>>
|
||||
<summary class="text-gray-400 text-base cursor-pointer select-none py-2"><%= icone :calendario %> Outro período</summary>
|
||||
<%= form_with url: motorista_dashboard_path, method: :get, class: 'flex flex-wrap items-end gap-3 mt-2' do |f| %>
|
||||
<div class="flex-1 basis-36 min-w-0">
|
||||
<label class="block text-gray-400 text-sm mb-1">De</label>
|
||||
<%= f.date_field :inicio, value: @inicio.strftime('%Y-%m-%d'),
|
||||
class: 'w-full bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-xl px-3 py-3 text-base' %>
|
||||
</div>
|
||||
<div class="flex-1 basis-36 min-w-0">
|
||||
<label class="block text-gray-400 text-sm mb-1">Até</label>
|
||||
<%= f.date_field :fim, value: @fim.strftime('%Y-%m-%d'),
|
||||
class: 'w-full bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-xl px-3 py-3 text-base' %>
|
||||
</div>
|
||||
<%= f.submit 'Ver', class: 'bg-orange-500 hover:bg-orange-600 text-black font-bold rounded-xl cursor-pointer px-6 py-3 min-h-[48px]' %>
|
||||
<% end %>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<%# ── Card principal: o que já está FECHADO ────────────── %>
|
||||
<div class="bg-white rounded-2xl p-6 mb-4">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<p class="text-gray-600 font-bold uppercase tracking-wide flex items-center gap-2">
|
||||
<%= icone :sucesso, cor: 'text-green-600', espaco: false %> Fechado pela empresa
|
||||
</p>
|
||||
<span class="text-gray-500 text-sm whitespace-nowrap"><%= l @inicio, format: :short %> a <%= l @fim, format: :short %></span>
|
||||
</div>
|
||||
|
||||
<p class="text-black font-black text-5xl mt-2 leading-tight whitespace-nowrap"><%= moeda(@valor_consolidado) %></p>
|
||||
|
||||
<%# As duas metades do total: o que já caiu e o que ainda vem. %>
|
||||
<div class="grid grid-cols-2 gap-3 mt-4">
|
||||
<div class="bg-green-50 border border-green-200 rounded-xl p-3">
|
||||
<p class="text-green-700 text-sm font-bold uppercase tracking-wide"><%= icone :dinheiro, cor: 'text-green-700' %> Já recebido</p>
|
||||
<p class="text-green-700 font-black text-2xl mt-0.5 whitespace-nowrap"><%= moeda(@totais.total_pago) %></p>
|
||||
</div>
|
||||
<div class="bg-amber-50 border border-amber-200 rounded-xl p-3">
|
||||
<p class="text-amber-700 text-sm font-bold uppercase tracking-wide"><%= icone :parcial, cor: 'text-amber-700' %> A receber</p>
|
||||
<p class="text-amber-700 font-black text-2xl mt-0.5 whitespace-nowrap"><%= moeda(@totais.total_pendente) %></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-600 text-base mt-3">
|
||||
<%= @consolidacoes.size %> fechamento(s) no período.
|
||||
</p>
|
||||
|
||||
<% if @consolidacoes.any? %>
|
||||
<%= link_to rotulo(:baixar, 'Baixar meu relatório do período (PDF)', cor: nil),
|
||||
motorista_totais_pdf_path(inicio: @inicio, fim: @fim),
|
||||
data: { turbo: false },
|
||||
class: 'w-full bg-orange-500 hover:bg-orange-600 text-black font-bold text-base px-6 py-4 rounded-xl min-h-[52px] flex items-center justify-center text-center mt-4' %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<%# ── Lista de consolidações ──────────────────────────── %>
|
||||
<h2 class="text-white font-bold text-xl mb-3 flex items-center gap-2"><%= icone :planilha, espaco: false %> Meus pagamentos</h2>
|
||||
<%# ── Card secundário: estimativa (ainda não fechada) ──── %>
|
||||
<div class="bg-orange-500 rounded-2xl p-6 mb-6">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<p class="text-black/80 font-bold uppercase tracking-wide flex items-center gap-2"><%= icone :dinheiro, cor: nil, espaco: false %> Estimativa das entregas</p>
|
||||
<span class="text-black/60 text-sm whitespace-nowrap"><%= l @estimado_inicio, format: :short %> a <%= l @estimado_fim, format: :short %></span>
|
||||
</div>
|
||||
<p class="text-black font-black text-4xl mt-2 leading-tight whitespace-nowrap"><%= moeda(@valor_estimado) %></p>
|
||||
<%# "Atendidas" = concluídas + sem sucesso. O rótulo NÃO pode voltar a dizer
|
||||
"feitas e confirmadas": o valor acima inclui as visitas sem sucesso, que
|
||||
a empresa também paga (o motorista foi ao local). Sem a segunda linha o
|
||||
motorista não consegue conferir a conta. %>
|
||||
<p class="text-black/80 text-base mt-2"><%= @entregas_mes %> entregas atendidas</p>
|
||||
<p class="text-black/70 text-sm mt-1">
|
||||
<%= @entregas_concluidas %> entregues · <%= @entregas_falhadas %> sem sucesso (pagas também)
|
||||
</p>
|
||||
<p class="text-black/60 text-sm mt-3">
|
||||
<%= icone :alerta, cor: nil %> Valor aproximado. O valor certo é o de cima, quando a empresa fecha o pagamento.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<% if @minhas_consolidacoes.any? %>
|
||||
<%# ── Composição: de onde vem o valor fechado ──────────── %>
|
||||
<h2 class="text-white font-bold text-xl mb-1 flex items-center gap-2"><%= icone :composicao, espaco: false %> De onde vem esse valor</h2>
|
||||
<p class="text-gray-400 text-base mb-3">Cada fechamento abaixo entra na soma do card branco.</p>
|
||||
|
||||
<% if @consolidacoes.any? %>
|
||||
<div class="space-y-3">
|
||||
<% @minhas_consolidacoes.each do |c| %>
|
||||
<% cm = c.consolidacao_motoristas.find_by(motorista_nome: current_user.nome) %>
|
||||
<% @consolidacoes.each do |cm| %>
|
||||
<% c = cm.consolidacao %>
|
||||
<div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl p-5">
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
<div>
|
||||
<div class="min-w-0">
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<p class="text-white font-bold text-lg"><%= c.nome %></p>
|
||||
<%= badge_status(c.status) %>
|
||||
<% if c.finalizada? %>
|
||||
<%= badge_pagamento(cm&.pago? ? :pago : :pendente) %>
|
||||
<% end %>
|
||||
<%= badge_pagamento(cm.pago? ? :pago : :pendente) %>
|
||||
</div>
|
||||
<p class="text-gray-300 text-base mt-1">
|
||||
<%= icone :calendario %> <%= l c.data_inicio, format: :short %> a <%= l c.data_fim, format: :short %>
|
||||
</p>
|
||||
<p class="text-orange-500 font-black text-3xl mt-1 whitespace-nowrap"><%= moeda(cm&.valor_total || 0) %></p>
|
||||
<% if cm&.pago? %>
|
||||
<p class="text-orange-500 font-black text-3xl mt-1 whitespace-nowrap"><%= moeda(cm.valor_total) %></p>
|
||||
<% if cm.pago? %>
|
||||
<p class="text-green-400 text-sm mt-1">
|
||||
<%= icone :dinheiro, cor: 'text-green-400' %> Pago em <%= l cm.pago_em.to_date, format: :short %>
|
||||
<% if cm.forma_pagamento.present? %>via <%= cm.forma_pagamento.humanize %><% end %>
|
||||
@@ -94,18 +150,14 @@
|
||||
<% if cm.nota_fiscal.present? %>
|
||||
<p class="text-gray-300 text-sm mt-0.5"><%= icone :nota_fiscal %> Nota Fiscal: <%= cm.nota_fiscal %></p>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<p class="text-amber-400 text-sm mt-1"><%= icone :parcial, cor: 'text-amber-400' %> Ainda não pago</p>
|
||||
<% end %>
|
||||
</div>
|
||||
<% if c.finalizada? %>
|
||||
<%= link_to rotulo(:baixar, 'Baixar meu extrato', cor: nil),
|
||||
gerar_pdf_extrato_consolidacao_path(c, motorista: current_user.nome),
|
||||
data: { turbo: false },
|
||||
class: 'w-full md:w-auto bg-orange-500 hover:bg-orange-600 text-black font-bold text-base px-6 py-4 rounded-xl min-h-[52px] flex items-center justify-center text-center' %>
|
||||
<% else %>
|
||||
<span class="w-full md:w-auto text-gray-300 text-base px-5 py-4 border border-[#2a2a2a] rounded-xl text-center">
|
||||
<%= icone :parcial, cor: 'text-amber-400' %> Aguardando fechamento
|
||||
</span>
|
||||
<% end %>
|
||||
<%= link_to rotulo(:baixar, 'Extrato deste fechamento', cor: nil),
|
||||
gerar_pdf_extrato_consolidacao_path(c, motorista: current_user.nome),
|
||||
data: { turbo: false },
|
||||
class: 'w-full md:w-auto bg-[#0a0a0a] border border-[#2a2a2a] hover:border-orange-500 text-white font-bold text-base px-5 py-4 rounded-xl min-h-[52px] flex items-center justify-center text-center' %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
@@ -113,8 +165,14 @@
|
||||
<% else %>
|
||||
<div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl p-10 text-center">
|
||||
<p class="mb-3"><%= icone :vazio, tamanho: 'w-12 h-12', cor: 'text-gray-600', espaco: false %></p>
|
||||
<p class="text-gray-200 text-lg">Você ainda não aparece em nenhum pagamento.</p>
|
||||
<p class="text-gray-400 text-base mt-1">Quando a empresa fechar um período com suas entregas, ele aparece aqui.</p>
|
||||
<p class="text-gray-200 text-lg">Nenhum fechamento neste período.</p>
|
||||
<p class="text-gray-400 text-base mt-1">
|
||||
<% if @faixa_total %>
|
||||
Toque em <span class="text-white font-semibold">Tudo</span> para ver todos os seus fechamentos.
|
||||
<% else %>
|
||||
Quando a empresa fechar um período com suas entregas, ele aparece aqui.
|
||||
<% end %>
|
||||
</p>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user