victor/Reem-Notas
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Correção da Responsividade para celular e web

Browse Source
This commit is contained in:
victor
2026-06-17 17:14:34 -03:00
parent a01af23691
commit 70d29029f6
6 changed files with 55 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/views/dashboard/index.html.erb
View File

@@ -75,7 +75,7 @@
<p class="text-4xl font-black text-white mb-1"><%= @total_entregas %></p>
<div class="flex items-center gap-2 text-sm">
<span class="text-green-400"><%= @entregas_pagas %> pagas</span>
<span class="text-gray-600">·</span>
<span class="text-gray-400">·</span>
<span class="text-yellow-500"><%= @entregas_pendentes %> pendentes</span>
</div>
</div>
@@ -86,7 +86,7 @@
<p class="text-4xl font-black text-white mb-1"><%= @consolidacoes_mes.count %></p>
<div class="flex items-center gap-2 text-sm">
<span class="text-yellow-500"><%= @consolidacoes_abertas %> abertas</span>
<span class="text-gray-600">·</span>
<span class="text-gray-400">·</span>
<span class="text-green-400"><%= @consolidacoes_fechadas %> fechadas</span>
</div>
</div>
@@ -95,31 +95,31 @@
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-2">🚗 Motoristas</p>
<p class="text-4xl font-black text-white mb-1"><%= @motoristas.count %></p>
<p class="text-gray-500 text-sm">com entregas no período</p>
<p class="text-gray-400 text-sm">com entregas no período</p>
</div>
</div>
<%# KPIs FINANCEIROS (consolidações finalizadas, já com filtro de operação) %>
<div class="grid grid-cols-2 xl:grid-cols-4 gap-4">
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-2">💰 Custo total</p>
<p class="text-3xl font-black text-white"><%= moeda(@fin_custo_total) %></p>
<p class="text-gray-500 text-xs mt-1"><%= @fin_qtd_entregas %> entregas classificadas</p>
<p class="text-gray-400 text-xs mt-1"><%= @fin_qtd_entregas %> entregas classificadas</p>
</div>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-2">🎫 Ticket médio</p>
<p class="text-3xl font-black text-white"><%= moeda(@fin_ticket_medio) %></p>
<p class="text-gray-500 text-xs mt-1">por entrega</p>
<p class="text-gray-400 text-xs mt-1">por entrega</p>
</div>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-2">✅ Pago</p>
<p class="text-3xl font-black text-green-400"><%= moeda(@fin_pago) %></p>
<p class="text-gray-500 text-xs mt-1">já confirmado</p>
<p class="text-gray-400 text-xs mt-1">já confirmado</p>
</div>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-2">🕗 A pagar</p>
<p class="text-3xl font-black text-yellow-500"><%= moeda(@fin_pendente) %></p>
<p class="text-gray-500 text-xs mt-1">pendente</p>
<p class="text-gray-400 text-xs mt-1">pendente</p>
</div>
</div>
@@ -133,7 +133,7 @@
<h2 class="text-lg font-semibold text-white">Evolução do custo</h2>
<p class="text-gray-400 text-sm">Valor estimado por dia no período<%= ' · operação filtrada' if @operacao_filtro.present? %></p>
</div>
<div class="flex items-center gap-2 text-xs text-gray-500">
<div class="flex items-center gap-2 text-xs text-gray-400">
<span class="inline-block w-3 h-0.5 bg-[#f97316] rounded"></span> Valor (R$)
</div>
</div>
@@ -151,7 +151,7 @@
<% @motoristas.each_with_index do |m, i| %>
<div class="flex items-center gap-3">
<span class="text-xs font-bold w-5 text-center
<%= i == 0 ? 'text-yellow-400' : i == 1 ? 'text-gray-300' : i == 2 ? 'text-orange-600' : 'text-gray-600' %>">
<%= i == 0 ? 'text-yellow-400' : i == 1 ? 'text-gray-300' : i == 2 ? 'text-orange-600' : 'text-gray-400' %>">
<%= i + 1 %>
</span>
<div class="flex-1 min-w-0">
@@ -167,13 +167,13 @@
<div class="h-1.5 rounded-full bg-[#f97316]"
style="width: <%= [(m[:entregas] / max * 100).round, 100].min %>%"></div>
</div>
<span class="text-gray-500 text-xs"><%= m[:entregas] %> entregas</span>
<span class="text-gray-400 text-xs"><%= m[:entregas] %> entregas</span>
</div>
</div>
<% end %>
</div>
<% else %>
<div class="text-center py-8 text-gray-500">
<div class="text-center py-8 text-gray-400">
<div class="text-3xl mb-2">🚚</div>
<p class="text-sm">Nenhuma entrega paga neste período</p>
</div>
@@ -191,7 +191,7 @@
<% if @fin_por_operacao.any? %>
<div class="relative h-64"><canvas id="grafico-custo-operacao"></canvas></div>
<% else %>
<div class="text-center py-8 text-gray-500"><div class="text-3xl mb-2">🏷️</div><p class="text-sm">Sem dados no período</p></div>
<div class="text-center py-8 text-gray-400"><div class="text-3xl mb-2">🏷️</div><p class="text-sm">Sem dados no período</p></div>
<% end %>
</div>
@@ -202,7 +202,7 @@
<% if @fin_por_tipo.any? %>
<div class="relative h-64"><canvas id="grafico-composicao-tipo"></canvas></div>
<% else %>
<div class="text-center py-8 text-gray-500"><div class="text-3xl mb-2">🧩</div><p class="text-sm">Sem dados no período</p></div>
<div class="text-center py-8 text-gray-400"><div class="text-3xl mb-2">🧩</div><p class="text-sm">Sem dados no período</p></div>
<% end %>
</div>
@@ -213,7 +213,7 @@
<% if @fin_por_motorista.any? %>
<div class="relative h-64"><canvas id="grafico-custo-motorista"></canvas></div>
<% else %>
<div class="text-center py-8 text-gray-500"><div class="text-3xl mb-2">👤</div><p class="text-sm">Sem dados no período</p></div>
<div class="text-center py-8 text-gray-400"><div class="text-3xl mb-2">👤</div><p class="text-sm">Sem dados no período</p></div>
<% end %>
</div>
</div>
@@ -227,7 +227,7 @@
<p class="text-gray-400 text-sm mb-4">Pagos por data de pagamento · pendentes no período</p>
<% if (@pag_pago_qtd + @pag_pend_qtd).zero? %>
<div class="text-center py-8 text-gray-500">
<div class="text-center py-8 text-gray-400">
<div class="text-3xl mb-2">🧾</div>
<p class="text-sm">Nenhum pagamento ou pendência no período</p>
</div>
@@ -262,7 +262,7 @@
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="text-gray-500 text-left border-b border-white/5">
<tr class="text-gray-400 text-left border-b border-white/5">
<th class="py-2 pr-3 font-medium">Pago em</th>
<th class="py-2 px-3 font-medium">Motorista</th>
<th class="py-2 px-3 font-medium">Consolidação</th>
@@ -287,7 +287,7 @@
</table>
</div>
<% else %>
<p class="text-gray-500 text-sm py-3">Nenhum pagamento realizado neste período.</p>
<p class="text-gray-400 text-sm py-3">Nenhum pagamento realizado neste período.</p>
<% end %>
</div>
@@ -298,7 +298,7 @@
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="text-gray-500 text-left border-b border-white/5">
<tr class="text-gray-400 text-left border-b border-white/5">
<th class="py-2 pr-3 font-medium">Motorista</th>
<th class="py-2 px-3 font-medium">Consolidação</th>
<th class="py-2 pl-3 font-medium text-right">Valor</th>
@@ -319,7 +319,7 @@
</table>
</div>
<% else %>
<p class="text-gray-500 text-sm py-3">Nenhuma pendência no período. 🎉</p>
<p class="text-gray-400 text-sm py-3">Nenhuma pendência no período. 🎉</p>
<% end %>
</div>
</div>
@@ -335,7 +335,7 @@
<div class="bg-[#0a0a0a] rounded-xl p-4 border border-white/5 text-center">
<p class="text-2xl font-bold text-[#f97316]"><%= qtd %></p>
<p class="text-gray-400 text-xs mt-1 leading-tight"><%= local.to_s.truncate(20) %></p>
<p class="text-gray-600 text-xs mt-1"><%= ((qtd / total_op) * 100).round %>%</p>
<p class="text-gray-400 text-xs mt-1"><%= ((qtd / total_op) * 100).round %>%</p>
</div>
<% end %>
</div>

7
app/views/layouts/application.html.erb
View File

@@ -33,7 +33,12 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; }
/* Fonte base maior para conforto de leitura (Tailwind usa rem → escala tudo).
16px no desktop e 18px no celular, conforme o padrão de design do projeto. */
html { font-size: 17px; }
@media (max-width: 767px) { html { font-size: 18px; } }
body { font-family: 'Inter', sans-serif; -webkit-text-size-adjust: 100%; }
/* Scrollbar tema escuro */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }

54
app/views/motorista/dashboard/index.html.erb
View File

@@ -3,21 +3,21 @@
<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>
<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>
<%# ── 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">
<p class="text-green-400 font-bold text-sm uppercase tracking-wide mb-2">✅ Pagamento confirmado!</p>
<div class="space-y-2">
<p class="text-green-400 font-bold uppercase tracking-wide mb-3">✅ Pagamento confirmado!</p>
<div class="space-y-3">
<% @pagamentos_recentes.each do |cm| %>
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1">
<p class="text-white text-sm">
<div class="flex flex-col gap-0.5">
<p class="text-white text-base">
Você recebeu <span class="font-black text-green-400"><%= moeda(cm.valor_total) %></span>
pela consolidação <span class="font-semibold"><%= cm.consolidacao.nome %></span>
</p>
<p class="text-gray-400 text-xs">
<p class="text-gray-300 text-sm">
💰 <%= l cm.pago_em.to_date, format: :short %>
<% if cm.forma_pagamento.present? %>· <%= cm.forma_pagamento.humanize %><% end %>
</p>
@@ -32,49 +32,49 @@
<%# 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">
<p class="text-black/80 font-bold uppercase tracking-wide">💰 Valor estimado deste mês</p>
<p class="text-black font-black text-5xl mt-2 leading-tight"><%= moeda(@valor_estimado) %></p>
<p class="text-black/80 text-base mt-2">
<%= @entregas_mes %> entregas feitas e confirmadas
</p>
<p class="text-black/50 text-xs mt-3">
<p class="text-black/60 text-sm 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">
<p class="text-gray-600 font-bold uppercase tracking-wide">✅ Valor fechado para pagamento</p>
<p class="text-black font-black text-5xl mt-2 leading-tight"><%= moeda(@valor_consolidado) %></p>
<p class="text-gray-600 text-base 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>
<h2 class="text-white font-bold text-xl 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 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="flex items-center gap-2 flex-wrap">
<p class="text-white font-bold"><%= c.nome %></p>
<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 %>
</div>
<p class="text-gray-400 text-sm mt-1">
<p class="text-gray-300 text-base 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>
<p class="text-orange-500 font-black text-3xl mt-1"><%= moeda(cm&.valor_total || 0) %></p>
<% if cm&.pago? %>
<p class="text-green-400 text-xs mt-1">
<p class="text-green-400 text-sm mt-1">
💰 Pago em <%= l cm.pago_em.to_date, format: :short %>
<% if cm.forma_pagamento.present? %>via <%= cm.forma_pagamento.humanize %><% end %>
</p>
@@ -84,9 +84,9 @@
<%= link_to '⬇️ Baixar meu holerite',
gerar_pdf_holerite_consolidacao_path(c, motorista: current_user.nome),
data: { turbo: false },
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' %>
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="text-gray-500 text-sm px-4 py-3 border border-[#2a2a2a] rounded-lg text-center">
<span class="w-full md:w-auto text-gray-300 text-base px-5 py-4 border border-[#2a2a2a] rounded-xl text-center">
⏳ Aguardando fechamento
</span>
<% end %>
@@ -95,10 +95,10 @@
<% 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 class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl p-10 text-center">
<p class="text-5xl mb-3">📭</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>
</div>
<% end %>
</div>

2
app/views/motorista/sessoes/new.html.erb
View File

@@ -43,7 +43,7 @@
</div>
<% end %>
<p class="text-gray-500 text-sm text-center mt-6">
<p class="text-gray-300 text-base 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">