Fases 7 e 8 — PDFs Prawn + QR + Painel Motorista + Notificações
This commit is contained in:
73
app/views/motorista/dashboard/index.html.erb
Normal file
73
app/views/motorista/dashboard/index.html.erb
Normal file
@@ -0,0 +1,73 @@
|
||||
<%# app/views/motorista/dashboard/index.html.erb — Painel do Motorista %>
|
||||
<% content_for :title, 'Meu Painel' %>
|
||||
|
||||
<div class="max-w-2xl mx-auto">
|
||||
|
||||
<h1 class="text-2xl font-bold text-white mb-1">Olá, <%= current_user.nome.split.first %>! 👋</h1>
|
||||
<p class="text-gray-400 mb-6">Aqui estão seus valores de entregas.</p>
|
||||
|
||||
<%# ── 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/70 font-bold text-sm uppercase tracking-wide">💰 Valor estimado deste mês</p>
|
||||
<p class="text-black font-black text-4xl mt-2"><%= moeda(@valor_estimado) %></p>
|
||||
<p class="text-black/70 text-sm mt-2">
|
||||
<%= @entregas_mes %> entregas feitas e confirmadas
|
||||
</p>
|
||||
<p class="text-black/50 text-xs mt-3">
|
||||
⚠️ Valor aproximado. O valor certo sai quando a empresa fechar o pagamento.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<%# Card 2 — Valor Consolidado (BRANCO) %>
|
||||
<div class="bg-white rounded-2xl p-6">
|
||||
<p class="text-gray-500 font-bold text-sm uppercase tracking-wide">✅ Valor fechado para pagamento</p>
|
||||
<p class="text-black font-black text-4xl mt-2"><%= moeda(@valor_consolidado) %></p>
|
||||
<p class="text-gray-500 text-sm mt-2">
|
||||
Soma dos pagamentos já confirmados pela empresa
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%# ── Lista de consolidações ──────────────────────────── %>
|
||||
<h2 class="text-white font-bold text-lg mb-3">📋 Meus pagamentos</h2>
|
||||
|
||||
<% if @minhas_consolidacoes.any? %>
|
||||
<div class="space-y-3">
|
||||
<% @minhas_consolidacoes.each do |c| %>
|
||||
<% cm = c.consolidacao_motoristas.find_by(motorista_nome: current_user.nome) %>
|
||||
<div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-5">
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="text-white font-bold"><%= c.nome %></p>
|
||||
<%= badge_status(c.status) %>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm mt-1">
|
||||
📅 <%= l c.data_inicio, format: :short %> a <%= l c.data_fim, format: :short %>
|
||||
</p>
|
||||
<p class="text-orange-500 font-black text-xl mt-1"><%= moeda(cm&.valor_total || 0) %></p>
|
||||
</div>
|
||||
<% if c.finalizada? %>
|
||||
<%= link_to '⬇️ Baixar meu holerite',
|
||||
gerar_pdf_holerite_consolidacao_path(c, motorista: current_user.nome),
|
||||
class: 'bg-orange-500 hover:bg-orange-600 text-black font-bold px-5 py-3.5 rounded-lg min-h-[48px] flex items-center justify-center text-center' %>
|
||||
<% else %>
|
||||
<span class="text-gray-500 text-sm px-4 py-3 border border-[#2a2a2a] rounded-lg text-center">
|
||||
⏳ Aguardando fechamento
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-10 text-center">
|
||||
<p class="text-4xl mb-3">📭</p>
|
||||
<p class="text-gray-400">Você ainda não aparece em nenhum pagamento.</p>
|
||||
<p class="text-gray-500 text-sm mt-1">Quando a empresa fechar um período com suas entregas, ele aparece aqui.</p>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
75
app/views/motorista/sessoes/new.html.erb
Normal file
75
app/views/motorista/sessoes/new.html.erb
Normal file
@@ -0,0 +1,75 @@
|
||||
<%# app/views/motorista/sessoes/new.html.erb — Login por PIN (mobile-first, público baixo tech) %>
|
||||
<% content_for :title, 'Entrar — Motorista' %>
|
||||
|
||||
<div class="min-h-screen flex items-center justify-center p-4">
|
||||
<div class="w-full max-w-sm">
|
||||
|
||||
<%# Logo %>
|
||||
<div class="text-center mb-8">
|
||||
<div class="w-16 h-16 bg-orange-500 rounded-2xl flex items-center justify-center font-black text-black text-3xl mx-auto mb-3">G</div>
|
||||
<h1 class="text-white font-bold text-2xl">Gade Logística</h1>
|
||||
<p class="text-gray-400 text-base mt-1">Digite seu PIN de 4 números</p>
|
||||
</div>
|
||||
|
||||
<%= form_with url: motorista_login_path, method: :post, id: 'form-pin' do |f| %>
|
||||
<%# Mostradores do PIN %>
|
||||
<div class="flex justify-center gap-3 mb-8" id="pin-display">
|
||||
<% 4.times do |i| %>
|
||||
<div class="pin-dot w-14 h-16 bg-[#1a1a1a] border-2 border-[#2a2a2a] rounded-xl flex items-center justify-center text-white text-3xl font-black"></div>
|
||||
<% end %>
|
||||
</div>
|
||||
<%= hidden_field_tag :pin, '', id: 'pin-valor' %>
|
||||
|
||||
<%# Teclado numérico grande %>
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<% [1,2,3,4,5,6,7,8,9].each do |n| %>
|
||||
<button type="button" onclick="digitar('<%= n %>')"
|
||||
class="bg-[#1a1a1a] hover:bg-[#2a2a2a] active:bg-orange-500 active:text-black text-white font-bold text-2xl rounded-xl py-5 min-h-[64px] transition-colors">
|
||||
<%= n %>
|
||||
</button>
|
||||
<% end %>
|
||||
<button type="button" onclick="apagar()"
|
||||
class="bg-[#1a1a1a] hover:bg-red-900 text-white font-bold text-xl rounded-xl py-5 min-h-[64px]">
|
||||
⌫
|
||||
</button>
|
||||
<button type="button" onclick="digitar('0')"
|
||||
class="bg-[#1a1a1a] hover:bg-[#2a2a2a] active:bg-orange-500 active:text-black text-white font-bold text-2xl rounded-xl py-5 min-h-[64px]">
|
||||
0
|
||||
</button>
|
||||
<button type="submit" id="btn-entrar" disabled
|
||||
class="bg-orange-500 disabled:bg-[#2a2a2a] disabled:text-gray-600 text-black font-bold text-xl rounded-xl py-5 min-h-[64px] transition-colors">
|
||||
✓
|
||||
</button>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<p class="text-gray-500 text-sm text-center mt-6">
|
||||
💡 Você também pode escanear o QR Code do seu holerite para entrar direto.
|
||||
</p>
|
||||
<p class="text-center mt-4">
|
||||
<%= link_to 'Sou administrador/gerente →', new_user_session_path, class: 'text-orange-500 hover:text-orange-400 text-sm' %>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let pin = '';
|
||||
function digitar(n) {
|
||||
if (pin.length >= 4) return;
|
||||
pin += n;
|
||||
atualizar();
|
||||
if (pin.length === 4) {
|
||||
// Envia automaticamente após o 4º dígito
|
||||
setTimeout(() => document.getElementById('form-pin').requestSubmit(), 250);
|
||||
}
|
||||
}
|
||||
function apagar() { pin = pin.slice(0, -1); atualizar(); }
|
||||
function atualizar() {
|
||||
document.getElementById('pin-valor').value = pin;
|
||||
document.querySelectorAll('.pin-dot').forEach((d, i) => {
|
||||
d.textContent = pin[i] ? '●' : '';
|
||||
d.classList.toggle('border-orange-500', !!pin[i]);
|
||||
});
|
||||
document.getElementById('btn-entrar').disabled = pin.length !== 4;
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user