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

Imṕlantação do dash board de acompanhamento diario das entregas

Browse Source
This commit is contained in:
victor
2026-06-29 20:04:32 -03:00
parent 16032be620
commit 11531479f8
35 changed files with 848 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/views/layouts/_navbar.html.erb
View File

@@ -37,6 +37,7 @@
<%# Dashboard — admin/gerente/operador/externo (todos menos motorista) %>
<% unless current_user.motorista? %>
<%= nav_link_to '📊 Dashboard', dashboard_path %>
<%= nav_link_to '📈 Operações', operacoes_dashboard_path %>
<% end %>
<%# Consolidações — só quem pode consolidar (exclui o externo) %>

15
app/views/operacoes_dashboard/_mapa.html.erb Normal file
View File

@@ -0,0 +1,15 @@
<%# locals: metricas (Analytics::OperacaoMetricas) %>
<% pontos = metricas.pontos_mapa %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<div class="flex items-center justify-between mb-4">
<p class="text-gray-400 text-sm font-medium">Mapa de Calor de Entregas</p>
<span class="text-xs text-gray-500"><%= pontos.size %> pontos</span>
</div>
<% if pontos.empty? %>
<p class="text-center py-8 text-gray-500 text-sm">Sem coordenadas para exibir no período.</p>
<% else %>
<div class="mapa-calor h-96 rounded-xl overflow-hidden"
data-pontos="<%= pontos.to_json %>"
data-centro="<%= metricas.centro_mapa.to_json %>"></div>
<% end %>
</div>

110
app/views/operacoes_dashboard/_painel.html.erb Normal file
View File

@@ -0,0 +1,110 @@
<%# locals: metricas (Analytics::OperacaoMetricas), titulo (opcional) %>
<% titulo = local_assigns[:titulo] %>
<% ins = metricas.insucessos_pct %>
<% pd = metricas.por_dia %>
<div class="space-y-4">
<% if titulo.present? %>
<div class="flex items-center justify-between">
<h2 class="text-lg font-bold text-white"><%= titulo %></h2>
<span class="text-xs text-gray-500"><%= metricas.total %> entregas</span>
</div>
<% end %>
<%# ── KPIs ─────────────────────────────────────────────── %>
<div class="grid 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">📦 Total de Entregas</p>
<p class="text-4xl font-black text-white"><%= metricas.total %></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">✅ Total de Sucesso</p>
<p class="text-4xl font-black text-green-400"><%= metricas.sucesso %></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">❌ Total de Recusas</p>
<p class="text-4xl font-black text-red-400"><%= metricas.recusas %></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">⏳ Entregas Pendentes</p>
<p class="text-4xl font-black text-yellow-400"><%= metricas.pendentes %></p>
</div>
</div>
<%# ── Insucessos % + Índices de falha + Status ─────────── %>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-4">Insucessos %</p>
<% if metricas.total.zero? %>
<p class="text-center py-8 text-gray-500 text-sm">Sem dados no período.</p>
<% else %>
<div class="relative h-56">
<canvas class="dash-donut"
data-completed="<%= ins[:completed] %>"
data-failed="<%= ins[:failed] %>"></canvas>
</div>
<div class="flex justify-center gap-4 mt-3 text-xs">
<span class="text-cyan-400">● Completas <%= ins[:pct_completed] %>%</span>
<span class="text-indigo-400">● Falhas <%= ins[:pct_failed] %>%</span>
</div>
<% end %>
</div>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-4">Índices de Falha</p>
<%= render 'tabela_simples',
cabecalhos: ['Observação', 'Total', '%'],
linhas: metricas.indices_falha.map { |h| [h[:observation], h[:total], "#{h[:pct]}%"] },
vazio: 'Nenhuma falha no período.' %>
</div>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-4">Por Status</p>
<%= render 'tabela_simples',
cabecalhos: ['Status', 'Quantidade'],
linhas: metricas.por_status_gade.map { |h| [h[:status], h[:total]] },
vazio: 'Sem dados.',
total: metricas.total %>
</div>
</div>
<%# ── Motoristas + STS ─────────────────────────────────── %>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-4">Notas fiscais por Motorista</p>
<div class="max-h-80 overflow-y-auto">
<%= render 'tabela_simples',
cabecalhos: ['Motorista', 'Notas fiscais'],
linhas: metricas.por_motorista.map { |h| [h[:nome], h[:total]] },
vazio: 'Sem dados.',
total: metricas.total %>
</div>
</div>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-4">Entregas por STS (Unidade)</p>
<div class="max-h-80 overflow-y-auto">
<%= render 'tabela_simples',
cabecalhos: ['Unidade', 'NFs entregues'],
linhas: metricas.por_sts.map { |h| [h[:nome], h[:total]] },
vazio: 'Sem dados.',
total: metricas.sucesso %>
</div>
</div>
</div>
<%# ── Entregas por dia ─────────────────────────────────── %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-4">Entregas por Dia</p>
<% if pd[:labels].empty? %>
<p class="text-center py-8 text-gray-500 text-sm">Sem dados no período.</p>
<% else %>
<div class="relative h-72">
<canvas class="dash-bars"
data-labels="<%= pd[:labels].to_json %>"
data-completed="<%= pd[:completed].to_json %>"
data-failed="<%= pd[:failed].to_json %>"></canvas>
</div>
<% end %>
</div>
</div>

32
app/views/operacoes_dashboard/_tabela_simples.html.erb Normal file
View File

@@ -0,0 +1,32 @@
<%# locals: cabecalhos (Array), linhas (Array de Array), vazio (String), total (opcional) %>
<% total_rodape = local_assigns[:total] %>
<% if linhas.blank? %>
<p class="text-center py-6 text-gray-500 text-sm"><%= vazio %></p>
<% else %>
<table class="w-full text-sm">
<thead>
<tr class="text-gray-400 text-left border-b border-white/5">
<% cabecalhos.each_with_index do |c, i| %>
<th class="pb-2 font-medium <%= 'text-right' if i.positive? %>"><%= c %></th>
<% end %>
</tr>
</thead>
<tbody>
<% linhas.each do |celulas| %>
<tr class="border-b border-white/5">
<% celulas.each_with_index do |cel, i| %>
<td class="py-2 <%= i.positive? ? 'text-right font-semibold text-white' : 'text-gray-300' %>"><%= cel %></td>
<% end %>
</tr>
<% end %>
</tbody>
<% if total_rodape %>
<tfoot>
<tr class="text-white font-bold">
<td class="pt-2">Total</td>
<td class="pt-2 text-right" colspan="<%= cabecalhos.size - 1 %>"><%= total_rodape %></td>
</tr>
</tfoot>
<% end %>
</table>
<% end %>

286
app/views/operacoes_dashboard/index.html.erb Normal file
View File

@@ -0,0 +1,286 @@
<%# app/views/operacoes_dashboard/index.html.erb %>
<%# Dashboard de análise de entregas por operação (KPIs, insucessos, STS, mapa). %>
<% content_for :head do %>
<meta name="turbo-cache-control" content="no-cache">
<%# Flatpickr (date range) — CSS no <head> %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/themes/dark.css">
<%# Leaflet (mapa de calor) %>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<style>
.flatpickr-calendar { background: #1a1a1a; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.flatpickr-months, .flatpickr-weekdays, .flatpickr-weekday { background: #1a1a1a; color: #9ca3af; }
.flatpickr-current-month, .flatpickr-monthDropdown-months, .numInput { color: #fff; }
.flatpickr-day { color: #e5e7eb; }
.flatpickr-day:hover { background: #2a2a2a; border-color: #2a2a2a; }
.flatpickr-day.today { border-color: #f97316; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
background: #f97316; border-color: #f97316; color: #0a0a0a;
}
.flatpickr-day.inRange { background: rgba(249,115,22,.18); border-color: rgba(249,115,22,.18); box-shadow: -5px 0 0 rgba(249,115,22,.18), 5px 0 0 rgba(249,115,22,.18); }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: #f97316; }
/* O mapa do Leaflet usa fundo claro — moldura escura ao redor */
.leaflet-container { background: #1a1a1a; }
</style>
<% end %>
<% hoje = Date.current %>
<% atalhos = {
'Hoje' => [hoje, hoje],
'7 dias' => [hoje - 6, hoje],
'Este mês' => [hoje.beginning_of_month, hoje],
'30 dias' => [hoje - 29, hoje]
} %>
<% ini_iso = @periodo_inicio.strftime('%Y-%m-%d') %>
<% fim_iso = @periodo_fim.strftime('%Y-%m-%d') %>
<%# Parâmetros de operação a preservar ao trocar de modo/período %>
<% ctx_ops = { operacao: @operacao, op_a: @op_a, op_b: @op_b }.compact %>
<div class="space-y-6">
<%# ── Cabeçalho ─────────────────────────────────────────── %>
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div>
<h1 class="text-2xl font-bold text-white">Dashboard de Operações</h1>
<p class="text-gray-400 text-sm mt-0.5">
<%= @periodo_inicio.strftime('%d/%m/%Y') %> – <%= @periodo_fim.strftime('%d/%m/%Y') %>
· Atualizado às <%= Time.now.strftime('%H:%M') %>
</p>
</div>
<%# Filtro de período (flatpickr) + atalhos %>
<div class="flex flex-wrap items-center gap-2">
<div class="relative">
<span class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-orange-500">📅</span>
<input type="text" id="periodo-range" readonly placeholder="Selecione o período"
value="<%= @periodo_inicio.strftime('%d/%m/%Y') %> até <%= @periodo_fim.strftime('%d/%m/%Y') %>"
class="cursor-pointer pl-4 pr-10 py-2.5 bg-[#1a1a1a] border border-white/10 rounded-xl
text-white text-sm w-full sm:w-[240px] focus:outline-none focus:border-orange-500 placeholder-gray-500">
</div>
<div class="flex flex-wrap items-center gap-1">
<% atalhos.each do |label, (ini, fim)| %>
<% ativo = @periodo_inicio == ini && @periodo_fim == fim %>
<%= link_to label,
operacoes_dashboard_path(ctx_ops.merge(modo: @modo, inicio: ini.strftime('%Y-%m-%d'), fim: fim.strftime('%Y-%m-%d'))),
data: { turbo: false },
class: "px-3 py-2.5 rounded-xl text-sm whitespace-nowrap border #{ativo ? 'bg-orange-500 text-black border-orange-500 font-bold' : 'bg-[#1a1a1a] text-gray-300 border-white/10 hover:border-orange-500'}" %>
<% end %>
</div>
</div>
</div>
<%# ── Abas de modo ──────────────────────────────────────── %>
<% modos = { 'operacao' => '🏥 Operação', 'global' => '🌐 Global', 'comparar' => '⚖️ Comparar' } %>
<div class="flex flex-wrap items-center gap-2 border-b border-white/5 pb-3">
<% modos.each do |m, label| %>
<% ativo = @modo == m %>
<%= link_to label,
operacoes_dashboard_path(ctx_ops.merge(modo: m, inicio: ini_iso, fim: fim_iso)),
data: { turbo: false },
class: "px-4 py-2 rounded-xl text-sm font-semibold whitespace-nowrap #{ativo ? 'bg-orange-500 text-black' : 'bg-[#1a1a1a] text-gray-300 border border-white/10 hover:border-orange-500'}" %>
<% end %>
</div>
<% if @tabelas_validas.blank? %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-10 text-center text-gray-400">
Nenhuma operação encontrada no banco (tabelas <code class="text-orange-400">gade_entregas_*</code>).
</div>
<% else %>
<%# ── Seletor de operação por modo ───────────────────── %>
<% if @modo == 'operacao' %>
<form method="get" action="<%= operacoes_dashboard_path %>" data-turbo="false" class="flex flex-wrap items-center gap-2">
<input type="hidden" name="modo" value="operacao">
<input type="hidden" name="inicio" value="<%= ini_iso %>">
<input type="hidden" name="fim" value="<%= fim_iso %>">
<label class="text-gray-400 text-sm">Operação:</label>
<select name="operacao" class="auto-submit bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500 min-w-[240px]">
<% @operacoes_agrupadas.each do |titulo, ops| %>
<optgroup label="<%= titulo %>">
<% ops.each do |op| %>
<option value="<%= op[:tabela] %>" <%= 'selected' if op[:tabela] == @operacao %>><%= op[:label] %></option>
<% end %>
</optgroup>
<% end %>
</select>
</form>
<% if @metricas %>
<%= render 'painel', metricas: @metricas %>
<%= render 'mapa', metricas: @metricas %>
<% end %>
<% elsif @modo == 'global' %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-4 text-sm text-gray-300">
🌐 Visão <strong class="text-white">Global</strong> — todas as
<%= @tabelas_validas.size %> operações agregadas no período.
</div>
<% if @metricas %>
<%= render 'painel', metricas: @metricas %>
<%= render 'mapa', metricas: @metricas %>
<% end %>
<% else # comparar %>
<form method="get" action="<%= operacoes_dashboard_path %>" data-turbo="false" class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<input type="hidden" name="modo" value="comparar">
<input type="hidden" name="inicio" value="<%= ini_iso %>">
<input type="hidden" name="fim" value="<%= fim_iso %>">
<div class="flex items-center gap-2">
<label class="text-cyan-400 text-sm font-semibold">A:</label>
<select name="op_a" class="auto-submit flex-1 bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-cyan-500">
<% @operacoes_agrupadas.each do |titulo, ops| %>
<optgroup label="<%= titulo %>">
<% ops.each do |op| %>
<option value="<%= op[:tabela] %>" <%= 'selected' if op[:tabela] == @op_a %>><%= op[:label] %></option>
<% end %>
</optgroup>
<% end %>
</select>
</div>
<div class="flex items-center gap-2">
<label class="text-indigo-400 text-sm font-semibold">B:</label>
<select name="op_b" class="auto-submit flex-1 bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-indigo-500">
<% @operacoes_agrupadas.each do |titulo, ops| %>
<optgroup label="<%= titulo %>">
<% ops.each do |op| %>
<option value="<%= op[:tabela] %>" <%= 'selected' if op[:tabela] == @op_b %>><%= op[:label] %></option>
<% end %>
</optgroup>
<% end %>
</select>
</div>
</form>
<div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
<div>
<% if @metricas_a %>
<%= render 'painel', metricas: @metricas_a, titulo: "A · #{@metricas_a.operacoes_label}" %>
<% else %>
<p class="text-gray-500 text-sm">Selecione a operação A.</p>
<% end %>
</div>
<div>
<% if @metricas_b %>
<%= render 'painel', metricas: @metricas_b, titulo: "B · #{@metricas_b.operacoes_label}" %>
<% else %>
<p class="text-gray-500 text-sm">Selecione a operação B.</p>
<% end %>
</div>
</div>
<% end %>
<% end %>
</div>
<%# ── Scripts: flatpickr, Chart.js, Leaflet ───────────────── %>
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/l10n/pt.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
<script>
(function () {
const ISO = '<%= ini_iso %>';
const ISO_FIM = '<%= fim_iso %>';
// ── Flatpickr (período) ──
function initPeriodo() {
const input = document.getElementById('periodo-range');
if (!input || typeof flatpickr === 'undefined' || input._flatpickr) return;
const toISO = (d) =>
d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
const parseISO = (s) => { const [y, m, d] = s.split('-').map(Number); return new Date(y, m - 1, d); };
flatpickr(input, {
mode: 'range',
locale: Object.assign({}, flatpickr.l10ns.pt, { rangeSeparator: ' até ' }),
dateFormat: 'd/m/Y',
defaultDate: [parseISO(ISO), parseISO(ISO_FIM)],
maxDate: 'today',
onClose: function (selectedDates) {
if (selectedDates.length === 0) return;
const ini = toISO(selectedDates[0]);
const fim = toISO(selectedDates[selectedDates.length - 1]);
const url = new URL(window.location.href);
url.searchParams.set('inicio', ini);
url.searchParams.set('fim', fim);
window.location.href = url.toString();
}
});
}
// ── Selects que submetem o form ao mudar ──
function initAutoSubmit() {
document.querySelectorAll('select.auto-submit').forEach(function (s) {
if (s.dataset.bound) return;
s.dataset.bound = '1';
s.addEventListener('change', function () { s.form.requestSubmit(); });
});
}
// ── Charts (donut + barras) ──
function initCharts() {
if (typeof Chart === 'undefined') return;
document.querySelectorAll('canvas.dash-donut').forEach(function (ctx) {
Chart.getChart(ctx)?.destroy();
new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Completas', 'Falhas'],
datasets: [{
data: [Number(ctx.dataset.completed), Number(ctx.dataset.failed)],
backgroundColor: ['#06b6d4', '#6366f1'],
borderColor: '#1a1a1a', borderWidth: 2
}]
},
options: { responsive: true, maintainAspectRatio: false, cutout: '62%', plugins: { legend: { display: false } } }
});
});
document.querySelectorAll('canvas.dash-bars').forEach(function (ctx) {
Chart.getChart(ctx)?.destroy();
new Chart(ctx, {
type: 'bar',
data: {
labels: JSON.parse(ctx.dataset.labels),
datasets: [
{ label: 'Completas', data: JSON.parse(ctx.dataset.completed), backgroundColor: '#06b6d4' },
{ label: 'Falhas', data: JSON.parse(ctx.dataset.failed), backgroundColor: '#6366f1' }
]
},
options: {
responsive: true, maintainAspectRatio: false,
scales: {
x: { stacked: true, ticks: { color: '#6b7280', maxTicksLimit: 12 }, grid: { color: 'rgba(255,255,255,0.04)' } },
y: { stacked: true, beginAtZero: true, ticks: { color: '#6b7280' }, grid: { color: 'rgba(255,255,255,0.04)' } }
},
plugins: { legend: { labels: { color: '#9ca3af' } } }
}
});
});
}
// ── Mapa de calor (Leaflet) ──
function initMapas() {
if (typeof L === 'undefined') return;
document.querySelectorAll('.mapa-calor').forEach(function (el) {
if (el._leaflet_id) return;
const pontos = JSON.parse(el.dataset.pontos || '[]');
const centro = JSON.parse(el.dataset.centro || '[-23.55,-46.63]');
const mapa = L.map(el).setView(centro, 11);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap', maxZoom: 19
}).addTo(mapa);
if (pontos.length && L.heatLayer) {
L.heatLayer(pontos, { radius: 18, blur: 22, maxZoom: 14 }).addTo(mapa);
}
setTimeout(function () { mapa.invalidateSize(); }, 200);
});
}
function initTudo() { initPeriodo(); initAutoSubmit(); initCharts(); initMapas(); }
initTudo();
document.addEventListener('turbo:load', initTudo);
})();
</script>