Implantação da função de controle de consolidaçoes pagas e pendentes
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user