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

Mudança dos cardes das operaçoes no formato vertical e adição do logo na tela inicial

Browse Source
This commit is contained in:
victor
2026-07-03 14:31:07 -03:00
parent 069301bc2e
commit e6e8ddc8d1
5 changed files with 79 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app/views/operacoes_dashboard/_painel.html.erb
View File

@@ -17,34 +17,27 @@
<%# ── KPIs ─────────────────────────────────────────────── %>
<% pct_total = ->(parte) { metricas.total.zero? ? 0 : (parte * 100.0 / metricas.total).round(1) } %>
<div class="grid grid-cols-2 xl:grid-cols-4 gap-4">
<div class="group bg-[#1a1a1a] rounded-2xl border border-white/5 p-6 transition-all duration-200 hover:border-white/20 hover:bg-[#202020] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/40">
<p class="text-gray-400 text-sm font-medium mb-2">📦 Total de Entregas</p>
<p class="text-4xl font-black text-white inline-block origin-left transition-transform duration-200 group-hover:scale-110"><%= metricas.total %></p>
<p class="text-xs text-gray-500 mt-2 h-0 overflow-hidden opacity-0 transition-all duration-200 group-hover:h-4 group-hover:opacity-100">
✅ <%= metricas.sucesso %> · <span class="text-blue-500">●</span> <%= metricas.recusas %> · ⏳ <%= metricas.pendentes %>
</p>
<%# Cards de status empilhados na vertical (orientação da img 13): título discreto
em cima, número grande colorido embaixo. %>
<div class="space-y-3">
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<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>
</div>
<div class="group bg-[#1a1a1a] rounded-2xl border border-white/5 p-6 transition-all duration-200 hover:border-green-500/40 hover:bg-[#202020] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/40">
<p class="text-gray-400 text-sm font-medium mb-2">✅ Total de Sucesso</p>
<p class="text-4xl font-black text-green-400 inline-block origin-left transition-transform duration-200 group-hover:scale-110"><%= metricas.sucesso %></p>
<p class="text-xs text-gray-500 mt-2 h-0 overflow-hidden opacity-0 transition-all duration-200 group-hover:h-4 group-hover:opacity-100">
<%= pct_total.(metricas.sucesso) %>% do total
</p>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<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-xs text-gray-500 mt-2"><%= pct_total.(metricas.sucesso) %>% do total</p>
</div>
<div class="group bg-[#1a1a1a] rounded-2xl border border-white/5 p-6 transition-all duration-200 hover:border-blue-500/40 hover:bg-[#202020] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/40">
<p class="text-gray-400 text-sm font-medium mb-2">❌ Total de Recusas</p>
<p class="text-4xl font-black text-blue-500 inline-block origin-left transition-transform duration-200 group-hover:scale-110"><%= metricas.recusas %></p>
<p class="text-xs text-gray-500 mt-2 h-0 overflow-hidden opacity-0 transition-all duration-200 group-hover:h-4 group-hover:opacity-100">
<%= pct_total.(metricas.recusas) %>% do total
</p>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<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-xs text-gray-500 mt-2"><%= pct_total.(metricas.recusas) %>% do total</p>
</div>
<div class="group bg-[#1a1a1a] rounded-2xl border border-white/5 p-6 transition-all duration-200 hover:border-yellow-500/40 hover:bg-[#202020] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/40">
<p class="text-gray-400 text-sm font-medium mb-2">⏳ Entregas Pendentes</p>
<p class="text-4xl font-black text-yellow-400 inline-block origin-left transition-transform duration-200 group-hover:scale-110"><%= metricas.pendentes %></p>
<p class="text-xs text-gray-500 mt-2 h-0 overflow-hidden opacity-0 transition-all duration-200 group-hover:h-4 group-hover:opacity-100">
<%= pct_total.(metricas.pendentes) %>% do total
</p>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<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-xs text-gray-500 mt-2"><%= pct_total.(metricas.pendentes) %>% do total</p>
</div>
</div>