Correção da Responsividade para celular e web
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user