Arrumar a tela do dashboard

app/views/dashboard/index.html.erb

@@ -204,8 +204,8 @@
   <%# GRÁFICO + MOTORISTAS (lado a lado no desktop) %>
   <div class="grid grid-cols-1 xl:grid-cols-3 gap-4">
 
-    <%# Gráfico de linha diário (Chart.js) %>
-    <div class="xl:col-span-2 bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
+    <%# 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>
           <h2 class="text-lg font-semibold text-white">Evolução do custo</h2>
@@ -215,9 +215,23 @@
           <span class="inline-block w-3 h-0.5 bg-[#f97316] rounded"></span> Valor (R$)
         </div>
       </div>
-      <div class="relative h-64">
+      <div class="relative flex-1 min-h-56">
         <canvas id="grafico-diario"></canvas>
       </div>
+
+      <%# Entregas por dia (volume) — complementa o valor acima %>
+      <div class="flex items-center justify-between mt-6 mb-4 pt-6 border-t border-white/5">
+        <div>
+          <h2 class="text-lg font-semibold text-white">Entregas por dia</h2>
+          <p class="text-gray-400 text-sm">Volume de entregas no período</p>
+        </div>
+        <div class="flex items-center gap-2 text-xs text-gray-400">
+          <span class="inline-block w-3 h-2 bg-[#f97316]/60 rounded-sm"></span> Entregas
+        </div>
+      </div>
+      <div class="relative flex-1 min-h-48">
+        <canvas id="grafico-entregas-dia"></canvas>
+      </div>
     </div>
 
     <%# Top motoristas %>
@@ -626,6 +640,64 @@
   })();
 </script>
 
+<%# Barras de entregas por dia (volume — complementa a evolução do custo) %>
+<script>
+  (function () {
+    const ctx = document.getElementById('grafico-entregas-dia');
+    if (!ctx || typeof Chart === 'undefined') return;
+    Chart.getChart(ctx)?.destroy();
+
+    const labels = <%= raw @grafico_diario[:labels].to_json %>;
+    const qtds   = <%= raw @grafico_diario[:qtds].to_json %>;
+
+    new Chart(ctx, {
+      type: 'bar',
+      data: {
+        labels: labels,
+        datasets: [{
+          label: 'Entregas',
+          data: qtds,
+          backgroundColor: 'rgba(249, 115, 22, 0.55)',
+          hoverBackgroundColor: '#f97316',
+          borderRadius: 6,
+          borderSkipped: false,
+          maxBarThickness: 28
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        interaction: { mode: 'index', intersect: false },
+        plugins: {
+          legend: { display: false },
+          tooltip: {
+            backgroundColor: '#0a0a0a',
+            borderColor: '#f97316',
+            borderWidth: 1,
+            titleColor: '#9ca3af',
+            bodyColor: '#ffffff',
+            padding: 12,
+            callbacks: {
+              label: (c) => `  Entregas: ${c.parsed.y}`
+            }
+          }
+        },
+        scales: {
+          x: {
+            grid: { display: false, drawBorder: false },
+            ticks: { color: '#6b7280', font: { size: 11 }, maxTicksLimit: 10 }
+          },
+          y: {
+            beginAtZero: true,
+            grid: { color: 'rgba(255,255,255,0.04)', drawBorder: false },
+            ticks: { color: '#6b7280', font: { size: 11 }, precision: 0 }
+          }
+        }
+      }
+    });
+  })();
+</script>
+
 <%# Rosca de pagamentos (pago x a pagar, por valor) %>
 <script>
   (function () {