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

Atualização geral de inconsistencias da UX

Browse Source
This commit is contained in:
victor
2026-07-13 17:49:12 -03:00
parent 8e73bbe0ed
commit a08a0712f0
3 changed files with 57 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -206,7 +206,7 @@
<%# Gráficos diários (Chart.js) — flex-col p/ preencher a altura do card de motoristas %>
<div class="xl:col-span-2 bg-[#1a1a1a] rounded-2xl border border-white/5 p-6 flex flex-col">
<div class="flex items-center justify-between mb-6">
<div class="flex flex-wrap items-center justify-between gap-2 mb-6">
<div>
<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>
@@ -219,20 +219,19 @@
<canvas id="grafico-diario"></canvas>
</div>
<%# Resultado por dia (entregue x falhada x pendente) — mostra a taxa de insucesso %>
<div class="flex items-center justify-between mt-6 mb-4 pt-6 border-t border-white/5">
<%# Pagamentos por dia (fluxo de caixa) — quando o dinheiro saiu de fato %>
<div class="flex flex-wrap items-center justify-between gap-2 mt-6 mb-4 pt-6 border-t border-white/5">
<div>
<h2 class="text-lg font-semibold text-white">Resultado por dia</h2>
<p class="text-gray-400 text-sm">Entregues, falhadas e pendentes no período</p>
<h2 class="text-lg font-semibold text-white">Pagamentos por dia</h2>
<p class="text-gray-400 text-sm">Valor pago aos motoristas por data de pagamento</p>
</div>
<div class="flex items-center gap-3 text-xs text-gray-400">
<span class="flex items-center gap-1.5"><span class="inline-block w-3 h-2 bg-green-500 rounded-sm"></span> Entregues</span>
<span class="flex items-center gap-1.5"><span class="inline-block w-3 h-2 bg-red-500 rounded-sm"></span> Falhadas</span>
<span class="flex items-center gap-1.5"><span class="inline-block w-3 h-2 bg-yellow-500 rounded-sm"></span> Pendentes</span>
<div class="flex flex-wrap items-center gap-3 text-xs text-gray-400">
<span class="flex items-center gap-1.5"><span class="inline-block w-3 h-2 bg-green-500 rounded-sm"></span> Pago no dia</span>
<span class="flex items-center gap-1.5"><span class="inline-block w-3 h-0.5 bg-gray-300 rounded"></span> Acumulado</span>
</div>
</div>
<div class="relative flex-1 min-h-48">
<canvas id="grafico-entregas-dia"></canvas>
<canvas id="grafico-pagamentos-dia"></canvas>
</div>
</div>
@@ -642,35 +641,46 @@
})();
</script>
<%# Barras empilhadas: resultado das entregas por dia (entregue/falhada/pendente) %>
<%# Fluxo de pagamentos: barras (pago no dia) + linha (acumulado no período) %>
<script>
(function () {
const ctx = document.getElementById('grafico-entregas-dia');
const ctx = document.getElementById('grafico-pagamentos-dia');
if (!ctx || typeof Chart === 'undefined') return;
Chart.getChart(ctx)?.destroy();
const labels = <%= raw @grafico_status[:labels].to_json %>;
const entregues = <%= raw @grafico_status[:entregues].to_json %>;
const falhadas = <%= raw @grafico_status[:falhadas].to_json %>;
const pendentes = <%= raw @grafico_status[:pendentes].to_json %>;
const labels = <%= raw @grafico_pagamentos_dia[:labels].to_json %>;
const valores = <%= raw @grafico_pagamentos_dia[:valores].to_json %>;
const acumulado = <%= raw @grafico_pagamentos_dia[:acumulado].to_json %>;
const barra = (label, data, cor) => ({
label: label,
data: data,
backgroundColor: cor,
borderRadius: 4,
borderSkipped: false,
maxBarThickness: 28
});
const brl = (v) => `R$ ${v.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [
barra('Entregues', entregues, 'rgba(34, 197, 94, 0.75)'),
barra('Falhadas', falhadas, 'rgba(239, 68, 68, 0.85)'),
barra('Pendentes', pendentes, 'rgba(234, 179, 8, 0.70)')
{
label: 'Pago no dia',
data: valores,
backgroundColor: 'rgba(34, 197, 94, 0.65)',
hoverBackgroundColor: '#22c55e',
borderRadius: 4,
borderSkipped: false,
maxBarThickness: 28,
order: 2
},
{
label: 'Acumulado',
data: acumulado,
type: 'line',
borderColor: '#d1d5db',
borderWidth: 2,
borderDash: [5, 4],
pointRadius: 0,
pointHoverRadius: 4,
tension: 0.3,
order: 1
}
]
},
options: {
@@ -681,33 +691,25 @@
legend: { display: false },
tooltip: {
backgroundColor: '#0a0a0a',
borderColor: '#f97316',
borderColor: '#22c55e',
borderWidth: 1,
titleColor: '#9ca3af',
bodyColor: '#ffffff',
padding: 12,
callbacks: {
label: (c) => ` ${c.dataset.label}: ${c.parsed.y}`,
footer: (items) => {
const total = items.reduce((s, i) => s + i.parsed.y, 0);
const falha = items.find(i => i.dataset.label === 'Falhadas')?.parsed.y || 0;
return total > 0 ? `Total: ${total} · Insucesso: ${(falha / total * 100).toFixed(1)}%` : '';
}
},
footerColor: '#9ca3af'
label: (c) => ` ${c.dataset.label}: ${brl(c.parsed.y)}`
}
}
},
scales: {
x: {
stacked: true,
grid: { display: false, drawBorder: false },
ticks: { color: '#6b7280', font: { size: 11 }, maxTicksLimit: 10 }
},
y: {
stacked: true,
beginAtZero: true,
grid: { color: 'rgba(255,255,255,0.04)', drawBorder: false },
ticks: { color: '#6b7280', font: { size: 11 }, precision: 0 }
ticks: { color: '#6b7280', font: { size: 11 }, callback: (v) => `R$ ${v.toFixed(0)}` }
}
}
}

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

@@ -80,7 +80,10 @@
</script>
</head>
<body class="bg-[#0a0a0a] text-white min-h-screen">
<%# overflow-x-hidden: conteúdo largo demais não pode criar scroll horizontal na
página (aparecia como uma barra laranja "quebrando" o rodapé no celular);
tabelas largas já rolam nos próprios contêineres overflow-x-auto. %>
<body class="bg-[#0a0a0a] text-white min-h-screen overflow-x-hidden">
<%# ── Animação de abertura (uma vez, logo após o login) ── %>
<% if @mostrar_splash %>