From e05ee5313bb46fcbf336a85b0ec70bb7b2a839de5f402b5f6409e38963838e5b Mon Sep 17 00:00:00 2001
From: victor <victor@paravatti.com.br>
Date: Fri, 3 Jul 2026 15:14:38 -0300
Subject: [PATCH] =?UTF-8?q?Corre=C3=A3o=20do=20layout=20inicial=20correta?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../operacoes_dashboard/_painel.html.erb      | 56 ++++++++++---------
 1 file changed, 31 insertions(+), 25 deletions(-)

diff --git a/app/views/operacoes_dashboard/_painel.html.erb b/app/views/operacoes_dashboard/_painel.html.erb
index 6d115b0..6c9a3d6 100644
--- a/app/views/operacoes_dashboard/_painel.html.erb
+++ b/app/views/operacoes_dashboard/_painel.html.erb
@@ -15,35 +15,38 @@
     </div>
   <% end %>
 
-  <%# ── KPIs ─────────────────────────────────────────────── %>
+  <%# ── Layout 2 colunas: cards empilhados (esquerda, estreito) + resto (direita) ── %>
   <% pct_total = ->(parte) { metricas.total.zero? ? 0 : (parte * 100.0 / metricas.total).round(1) } %>
-  <%# Cards de status compactos (orientação vertical da img 13, mas estreitos):
-      largura fixa que não ocupa a linha toda; os que couberem ficam lado a lado
-      e o restante quebra para a linha de baixo. %>
-  <div class="flex flex-wrap gap-3">
-    <div class="w-full sm:w-[calc(50%-0.375rem)] lg:w-52 bg-[#1a1a1a] rounded-2xl border border-white/5 p-5">
-      <p class="text-gray-400 text-sm font-medium mb-1">Total de Entregas</p>
-      <p class="text-4xl font-black text-white leading-none"><%= metricas.total %></p>
+  <div class="flex flex-col lg:flex-row gap-4">
+
+    <%# Coluna esquerda — 4 cards de status EMPILHADOS na vertical (orientação da img 13). %>
+    <div class="w-full lg:w-60 lg:shrink-0 space-y-3">
+      <div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-5">
+        <p class="text-gray-400 text-sm font-medium mb-1">Total de Entregas</p>
+        <p class="text-4xl font-black text-white leading-none"><%= metricas.total %></p>
+      </div>
+      <div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-5">
+        <p class="text-gray-400 text-sm font-medium mb-1">Total de Sucesso</p>
+        <p class="text-4xl font-black text-green-400 leading-none"><%= metricas.sucesso %></p>
+        <p class="text-xs text-gray-500 mt-2"><%= pct_total.(metricas.sucesso) %>% do total</p>
+      </div>
+      <div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-5">
+        <p class="text-gray-400 text-sm font-medium mb-1">Total de Recusas</p>
+        <p class="text-4xl font-black text-blue-500 leading-none"><%= metricas.recusas %></p>
+        <p class="text-xs text-gray-500 mt-2"><%= pct_total.(metricas.recusas) %>% do total</p>
+      </div>
+      <div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-5">
+        <p class="text-gray-400 text-sm font-medium mb-1">Entregas Pendentes</p>
+        <p class="text-4xl font-black text-yellow-400 leading-none"><%= metricas.pendentes %></p>
+        <p class="text-xs text-gray-500 mt-2"><%= pct_total.(metricas.pendentes) %>% do total</p>
+      </div>
     </div>
-    <div class="w-full sm:w-[calc(50%-0.375rem)] lg:w-52 bg-[#1a1a1a] rounded-2xl border border-white/5 p-5">
-      <p class="text-gray-400 text-sm font-medium mb-1">Total de Sucesso</p>
-      <p class="text-4xl font-black text-green-400 leading-none"><%= metricas.sucesso %></p>
-      <p class="text-xs text-gray-500 mt-2"><%= pct_total.(metricas.sucesso) %>% do total</p>
-    </div>
-    <div class="w-full sm:w-[calc(50%-0.375rem)] lg:w-52 bg-[#1a1a1a] rounded-2xl border border-white/5 p-5">
-      <p class="text-gray-400 text-sm font-medium mb-1">Total de Recusas</p>
-      <p class="text-4xl font-black text-blue-500 leading-none"><%= metricas.recusas %></p>
-      <p class="text-xs text-gray-500 mt-2"><%= pct_total.(metricas.recusas) %>% do total</p>
-    </div>
-    <div class="w-full sm:w-[calc(50%-0.375rem)] lg:w-52 bg-[#1a1a1a] rounded-2xl border border-white/5 p-5">
-      <p class="text-gray-400 text-sm font-medium mb-1">Entregas Pendentes</p>
-      <p class="text-4xl font-black text-yellow-400 leading-none"><%= metricas.pendentes %></p>
-      <p class="text-xs text-gray-500 mt-2"><%= pct_total.(metricas.pendentes) %>% do total</p>
-    </div>
-  </div>
+
+    <%# Coluna direita — gráficos/tabelas ocupam o espaço ao lado dos cards. %>
+    <div class="flex-1 min-w-0 space-y-4">
 
   <%# ── Insucessos % + Índices de falha + Status ─────────── %>
-  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+  <div class="grid grid-cols-1 lg:grid-cols-2 xl: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? %>
@@ -122,4 +125,7 @@
       </div>
     <% end %>
   </div>
+
+    </div><%# fim coluna direita %>
+  </div><%# fim layout 2 colunas %>
 </div>