Implantação da função de controle de consolidaçoes pagas e pendentes

This commit is contained in:
2026-06-17 15:49:24 -03:00
parent 292ac31c66
commit e9def7e21a
17 changed files with 526 additions and 12 deletions

View File

@@ -138,6 +138,79 @@
</div>
</div>
<%# ── PAGAMENTOS (pago x pendente) ──────────────────────── %>
<div class="grid grid-cols-1 xl:grid-cols-3 gap-4">
<%# Rosca pago vs a pagar (por valor) %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<h2 class="text-lg font-semibold text-white mb-1">💵 Pagamentos</h2>
<p class="text-gray-400 text-sm mb-4">Consolidações finalizadas no período</p>
<% if (@pag_pago_qtd + @pag_pend_qtd).zero? %>
<div class="text-center py-8 text-gray-500">
<div class="text-3xl mb-2">🧾</div>
<p class="text-sm">Nenhuma consolidação finalizada no período</p>
</div>
<% else %>
<div class="relative h-44 mb-4">
<canvas id="grafico-pagamentos"></canvas>
</div>
<div class="space-y-2">
<div class="flex items-center justify-between text-sm">
<span class="text-green-400">● Pago</span>
<span class="text-white font-semibold">
<%= moeda(@pag_pago_valor) %> · <%= @pag_pago_qtd %> motorista(s)
</span>
</div>
<div class="flex items-center justify-between text-sm">
<span class="text-gray-400">● A pagar</span>
<span class="text-white font-semibold">
<%= moeda(@pag_pend_valor) %> · <%= @pag_pend_qtd %> motorista(s)
</span>
</div>
</div>
<% end %>
</div>
<%# Tabela de consolidações com status de pagamento %>
<div class="xl:col-span-2 bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<h2 class="text-lg font-semibold text-white mb-4">📋 Status de pagamento por consolidação</h2>
<% if @tabela_pagamentos.any? %>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="text-gray-500 text-left border-b border-white/5">
<th class="py-2 pr-3 font-medium">Consolidação</th>
<th class="py-2 px-3 font-medium">Status</th>
<th class="py-2 px-3 font-medium text-right">Pago</th>
<th class="py-2 pl-3 font-medium text-right">A pagar</th>
</tr>
</thead>
<tbody>
<% @tabela_pagamentos.each do |linha| %>
<tr class="border-b border-white/5">
<td class="py-2.5 pr-3">
<%= link_to linha[:consolidacao].nome, consolidacao_path(linha[:consolidacao]),
class: 'text-white hover:text-orange-500 font-medium' %>
</td>
<td class="py-2.5 px-3"><%= badge_pagamento(linha[:status]) %></td>
<td class="py-2.5 px-3 text-right text-green-400"><%= moeda(linha[:pago]) %></td>
<td class="py-2.5 pl-3 text-right text-gray-400"><%= moeda(linha[:pendente]) %></td>
</tr>
<% end %>
</tbody>
</table>
</div>
<% else %>
<div class="text-center py-8 text-gray-500">
<div class="text-3xl mb-2">📋</div>
<p class="text-sm">Nenhuma consolidação finalizada no período</p>
</div>
<% end %>
</div>
</div>
<%# Por operação %>
<% if @por_operacao.any? %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
@@ -271,3 +344,47 @@
});
})();
</script>
<%# Rosca de pagamentos (pago x a pagar, por valor) %>
<script>
(function () {
const ctx = document.getElementById('grafico-pagamentos');
if (!ctx || typeof Chart === 'undefined') return;
Chart.getChart(ctx)?.destroy();
const pago = <%= @pag_pago_valor.to_f %>;
const aPagar = <%= @pag_pend_valor.to_f %>;
new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Pago', 'A pagar'],
datasets: [{
data: [pago, aPagar],
backgroundColor: ['#22c55e', '#374151'],
borderColor: '#1a1a1a',
borderWidth: 3
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
cutout: '62%',
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: '#0a0a0a',
borderColor: '#22c55e',
borderWidth: 1,
titleColor: '#9ca3af',
bodyColor: '#ffffff',
padding: 12,
callbacks: {
label: (c) => ` ${c.label}: R$ ${c.parsed.toFixed(2).replace('.', ',')}`
}
}
}
}
});
})();
</script>