Correão do layout
This commit is contained in:
@@ -17,26 +17,27 @@
|
|||||||
|
|
||||||
<%# ── KPIs ─────────────────────────────────────────────── %>
|
<%# ── KPIs ─────────────────────────────────────────────── %>
|
||||||
<% pct_total = ->(parte) { metricas.total.zero? ? 0 : (parte * 100.0 / metricas.total).round(1) } %>
|
<% pct_total = ->(parte) { metricas.total.zero? ? 0 : (parte * 100.0 / metricas.total).round(1) } %>
|
||||||
<%# Cards de status empilhados na vertical (orientação da img 13): título discreto
|
<%# Cards de status compactos (orientação vertical da img 13, mas estreitos):
|
||||||
em cima, número grande colorido embaixo. %>
|
largura fixa que não ocupa a linha toda; os que couberem ficam lado a lado
|
||||||
<div class="space-y-3">
|
e o restante quebra para a linha de baixo. %>
|
||||||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
|
<div class="flex flex-wrap gap-3">
|
||||||
|
<div class="w-full sm: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-gray-400 text-sm font-medium mb-1">Total de Entregas</p>
|
||||||
<p class="text-5xl font-black text-white leading-none"><%= metricas.total %></p>
|
<p class="text-4xl font-black text-white leading-none"><%= metricas.total %></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
|
<div class="w-full sm: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-gray-400 text-sm font-medium mb-1">Total de Sucesso</p>
|
||||||
<p class="text-5xl font-black text-green-400 leading-none"><%= metricas.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>
|
<p class="text-xs text-gray-500 mt-2"><%= pct_total.(metricas.sucesso) %>% do total</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
|
<div class="w-full sm: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-gray-400 text-sm font-medium mb-1">Total de Recusas</p>
|
||||||
<p class="text-5xl font-black text-blue-500 leading-none"><%= metricas.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>
|
<p class="text-xs text-gray-500 mt-2"><%= pct_total.(metricas.recusas) %>% do total</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
|
<div class="w-full sm: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-gray-400 text-sm font-medium mb-1">Entregas Pendentes</p>
|
||||||
<p class="text-5xl font-black text-yellow-400 leading-none"><%= metricas.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>
|
<p class="text-xs text-gray-500 mt-2"><%= pct_total.(metricas.pendentes) %>% do total</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user