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

implantação da fase 2 e 3

Browse Source
This commit is contained in:
victor
2026-06-10 20:12:20 -03:00
parent d37237ead2
commit 472484798f
33 changed files with 2915 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
app/views/configuracoes/edit.html.erb Normal file
View File

@@ -0,0 +1,58 @@
<%# app/views/configuracoes/edit.html.erb %>
<div class="max-w-lg mx-auto space-y-6">
<div>
<h1 class="text-2xl font-bold text-white">
<%= @configuracao.icone %> Editar: <%= @configuracao.tipo_label %>
</h1>
<p class="text-gray-400 text-sm mt-0.5">Atualize o valor do pilar de preço</p>
</div>
<%= render 'shared/flash' %>
<%= form_with(model: @configuracao, url: configuracao_path(@configuracao), method: :patch,
class: 'bg-[#1a1a1a] rounded-2xl border border-white/5 p-8 space-y-6') do |f| %>
<% if @configuracao.errors.any? %>
<div class="p-4 bg-red-900/30 border border-red-500/40 rounded-xl">
<ul class="list-disc list-inside space-y-1">
<% @configuracao.errors.full_messages.each do |msg| %>
<li class="text-red-300 text-sm"><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div>
<%= f.label :valor, 'Valor (R$)', class: 'block text-sm font-medium text-gray-300 mb-1.5' %>
<div class="relative">
<span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 font-medium">R$</span>
<%= f.number_field :valor,
step: 0.01,
min: 0,
class: 'w-full pl-10 pr-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl
text-white text-xl font-bold focus:outline-none focus:border-[#f97316]
focus:ring-1 focus:ring-[#f97316] transition-colors',
placeholder: '0.00' %>
</div>
<p class="text-gray-500 text-xs mt-1.5">Valor atual: <%= moeda(@configuracao.valor) %></p>
</div>
<div>
<%= f.label :descricao, 'Descrição (opcional)', class: 'block text-sm font-medium text-gray-300 mb-1.5' %>
<%= f.text_area :descricao, rows: 2,
class: 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
placeholder-gray-600 focus:outline-none focus:border-[#f97316] focus:ring-1
focus:ring-[#f97316] transition-colors resize-none',
placeholder: 'Ex: Entrega padrão para UBS e EMAD' %>
</div>
<div class="flex items-center justify-between pt-2 border-t border-white/5">
<%= link_to 'Cancelar', configuracoes_path,
class: 'px-6 py-3 text-gray-400 hover:text-white border border-white/10
hover:border-white/20 rounded-xl transition-colors' %>
<%= f.submit 'Salvar Preço',
class: 'px-8 py-3 bg-[#f97316] hover:bg-orange-500 text-white font-semibold
rounded-xl transition-colors cursor-pointer min-h-[48px]' %>
</div>
<% end %>
</div>

64
app/views/configuracoes/index.html.erb Normal file
View File

@@ -0,0 +1,64 @@
<%# app/views/configuracoes/index.html.erb %>
<div class="space-y-6">
<div>
<h1 class="text-2xl font-bold text-white">Configurações</h1>
<p class="text-gray-400 text-sm mt-0.5">Pilares de preço e parâmetros do sistema</p>
</div>
<%= render 'shared/flash' %>
<%# Pilares de preço %>
<div>
<h2 class="text-lg font-semibold text-white mb-4">💰 Pilares de Preço</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<% @configuracoes.each do |cfg| %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6 group relative">
<div class="flex items-start justify-between mb-4">
<div class="text-3xl"><%= cfg.icone %></div>
<% if policy(cfg).edit? %>
<%= link_to edit_configuracao_path(cfg),
class: 'opacity-0 group-hover:opacity-100 transition-opacity p-1.5
text-gray-500 hover:text-white hover:bg-white/10 rounded-lg' do %>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
</svg>
<% end %>
<% end %>
</div>
<p class="text-gray-400 text-sm mb-1"><%= cfg.tipo_label %></p>
<p class="text-3xl font-bold text-white"><%= moeda(cfg.valor) %></p>
<% if cfg.descricao.present? %>
<p class="text-gray-500 text-xs mt-2"><%= cfg.descricao %></p>
<% end %>
</div>
<% end %>
</div>
</div>
<%# Informações do banco externo %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<h2 class="text-lg font-semibold text-white mb-4">🗄️ Banco de Dados Externo</h2>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div class="p-4 bg-[#0a0a0a] rounded-xl border border-white/5">
<p class="text-gray-400 text-xs mb-1">Tabela monitorada</p>
<p class="text-white font-mono text-sm">db_reem_simplerout_2026</p>
</div>
<div class="p-4 bg-[#0a0a0a] rounded-xl border border-white/5">
<p class="text-gray-400 text-xs mb-1">Account ID</p>
<p class="text-white font-mono text-sm">95907 (Gade Hospitalar)</p>
</div>
<div class="p-4 bg-[#0a0a0a] rounded-xl border border-white/5">
<p class="text-gray-400 text-xs mb-1">Atualização</p>
<p class="text-white font-mono text-sm">A cada 1 hora</p>
</div>
</div>
<p class="text-yellow-500/80 text-xs mt-4 flex items-center gap-1.5">
<svg class="w-3.5 h-3.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
</svg>
Somente leitura — nunca alterar, deletar ou truncar esta tabela.
</p>
</div>
</div>

234
app/views/dashboard/index.html.erb Normal file
View File

@@ -0,0 +1,234 @@
<%# app/views/dashboard/index.html.erb %>
<%# Fase 3: Dashboard com cards, gráfico Chart.js e cálculo ao vivo %>
<div class="space-y-6">
<%# Header + filtro de mês %>
<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</h1>
<p class="text-gray-400 text-sm mt-0.5">
<%= @data_referencia.strftime('%B de %Y').capitalize %> · Atualizado às <%= Time.now.strftime('%H:%M') %>
</p>
</div>
<%# Navegação de mês %>
<div class="flex items-center gap-2">
<%= link_to dashboard_path(data: (@data_referencia - 1.month).to_s),
class: 'p-2.5 bg-[#1a1a1a] hover:bg-white/10 border border-white/10 rounded-xl
text-gray-400 hover:text-white transition-colors' do %>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
</svg>
<% end %>
<div class="px-4 py-2.5 bg-[#1a1a1a] border border-white/10 rounded-xl text-white font-medium min-w-[140px] text-center">
<%= @data_referencia.strftime('%b %Y').capitalize %>
</div>
<% unless @data_referencia >= Date.today.beginning_of_month %>
<%= link_to dashboard_path(data: (@data_referencia + 1.month).to_s),
class: 'p-2.5 bg-[#1a1a1a] hover:bg-white/10 border border-white/10 rounded-xl
text-gray-400 hover:text-white transition-colors' do %>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
<% end %>
<% end %>
</div>
</div>
<%# CARDS GRANDES — KPIs %>
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
<%# Card 1: Valor estimado %>
<div class="sm:col-span-2 xl:col-span-1 bg-[#f97316] rounded-2xl p-6 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-orange-400/20 to-transparent"></div>
<div class="relative">
<p class="text-orange-100 text-sm font-medium mb-2">💰 Valor Estimado</p>
<p class="text-4xl font-black text-white mb-1">
<%= moeda(@valor_estimado) %>
</p>
<p class="text-orange-200 text-sm">
<%= @entregas_pagas %> entregas pagas
</p>
</div>
</div>
<%# Card 2: Total de entregas %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-2">📦 Total Entregas</p>
<p class="text-4xl font-black text-white mb-1"><%= @total_entregas %></p>
<div class="flex items-center gap-2 text-sm">
<span class="text-green-400"><%= @entregas_pagas %> pagas</span>
<span class="text-gray-600">·</span>
<span class="text-yellow-500"><%= @entregas_pendentes %> pendentes</span>
</div>
</div>
<%# Card 3: Consolidações %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-2">📋 Consolidações</p>
<p class="text-4xl font-black text-white mb-1"><%= @consolidacoes_mes.count %></p>
<div class="flex items-center gap-2 text-sm">
<span class="text-yellow-500"><%= @consolidacoes_abertas %> abertas</span>
<span class="text-gray-600">·</span>
<span class="text-green-400"><%= @consolidacoes_fechadas %> fechadas</span>
</div>
</div>
<%# Card 4: Motoristas ativos %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-2">🚗 Motoristas</p>
<p class="text-4xl font-black text-white mb-1"><%= @motoristas.count %></p>
<p class="text-gray-500 text-sm">com entregas no mês</p>
</div>
</div>
<%# 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">
<div class="flex items-center justify-between mb-6">
<div>
<h2 class="text-lg font-semibold text-white">Evolução Diária</h2>
<p class="text-gray-400 text-sm">Valor estimado por dia no mês</p>
</div>
<div class="flex items-center gap-2 text-xs text-gray-500">
<span class="inline-block w-3 h-0.5 bg-[#f97316] rounded"></span> Valor (R$)
</div>
</div>
<div class="relative h-64">
<canvas id="grafico-diario"></canvas>
</div>
</div>
<%# Top motoristas %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<h2 class="text-lg font-semibold text-white mb-4">🏆 Top Motoristas</h2>
<% if @motoristas.any? %>
<div class="space-y-3">
<% @motoristas.each_with_index do |m, i| %>
<div class="flex items-center gap-3">
<span class="text-xs font-bold w-5 text-center
<%= i == 0 ? 'text-yellow-400' : i == 1 ? 'text-gray-300' : i == 2 ? 'text-orange-600' : 'text-gray-600' %>">
<%= i + 1 %>
</span>
<div class="flex-1 min-w-0">
<div class="flex items-center justify-between mb-1">
<span class="text-white text-sm font-medium truncate"><%= m[:nome].split.first %></span>
<span class="text-[#f97316] text-sm font-semibold ml-2 flex-shrink-0">
<%= moeda(m[:valor]) %>
</span>
</div>
<%# Barra de progresso %>
<div class="w-full bg-white/5 rounded-full h-1.5">
<% max = @motoristas.first[:entregas].to_f %>
<div class="h-1.5 rounded-full bg-[#f97316]"
style="width: <%= [(m[:entregas] / max * 100).round, 100].min %>%"></div>
</div>
<span class="text-gray-500 text-xs"><%= m[:entregas] %> entregas</span>
</div>
</div>
<% end %>
</div>
<% else %>
<div class="text-center py-8 text-gray-500">
<div class="text-3xl mb-2">🚚</div>
<p class="text-sm">Nenhuma entrega paga neste mês</p>
</div>
<% end %>
</div>
</div>
<%# Por operação %>
<% if @por_operacao.any? %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<h2 class="text-lg font-semibold text-white mb-4">🏥 Entregas por Local</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
<% total_op = @por_operacao.values.sum.to_f %>
<% @por_operacao.each do |local, qtd| %>
<div class="bg-[#0a0a0a] rounded-xl p-4 border border-white/5 text-center">
<p class="text-2xl font-bold text-[#f97316]"><%= qtd %></p>
<p class="text-gray-400 text-xs mt-1 leading-tight"><%= local.to_s.truncate(20) %></p>
<p class="text-gray-600 text-xs mt-1"><%= ((qtd / total_op) * 100).round %>%</p>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
<%# Chart.js via CDN %>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
const ctx = document.getElementById('grafico-diario');
const labels = <%= raw @grafico_diario[:labels].to_json %>;
const valores = <%= raw @grafico_diario[:valores].to_json %>;
const qtds = <%= raw @grafico_diario[:qtds].to_json %>;
new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Valor (R$)',
data: valores,
borderColor: '#f97316',
backgroundColor: 'rgba(249, 115, 22, 0.08)',
borderWidth: 2.5,
pointBackgroundColor: '#f97316',
pointBorderColor: '#1a1a1a',
pointBorderWidth: 2,
pointRadius: 4,
pointHoverRadius: 6,
fill: true,
tension: 0.4
}]
},
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: (ctx) => {
const idx = ctx.dataIndex;
return [
` Valor: R$ ${ctx.parsed.y.toFixed(2).replace('.', ',')}`,
` Entregas: ${qtds[idx]}`
];
}
}
}
},
scales: {
x: {
grid: { color: 'rgba(255,255,255,0.04)', drawBorder: false },
ticks: { color: '#6b7280', font: { size: 11 }, maxTicksLimit: 10 }
},
y: {
grid: { color: 'rgba(255,255,255,0.04)', drawBorder: false },
ticks: {
color: '#6b7280',
font: { size: 11 },
callback: (v) => `R$ ${v.toFixed(0)}`
}
}
}
}
});
</script>

231
app/views/devise/sessions/new.html.erb Normal file
View File

@@ -0,0 +1,231 @@
<%# app/views/devise/sessions/new.html.erb %>
<div class="min-h-screen bg-[#0a0a0a] flex items-center justify-center px-4">
<div class="w-full max-w-md">
<%# Logo / Header %>
<div class="text-center mb-10">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-[#f97316] mb-4">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"/>
</svg>
</div>
<h1 class="text-3xl font-bold text-white">Gade Logística</h1>
<p class="text-gray-400 mt-1 text-sm">Sistema de Controle de Custos</p>
</div>
<%# Flash messages %>
<% if flash[:alert] %>
<div class="mb-4 p-4 bg-red-900/40 border border-red-500/50 rounded-xl text-red-300 text-sm">
<%= flash[:alert] %>
</div>
<% end %>
<%# Tabs: Email / PIN %>
<div class="bg-[#1a1a1a] rounded-2xl overflow-hidden border border-white/5">
<%# Tab switcher %>
<div class="flex border-b border-white/10">
<button id="tab-email"
onclick="switchTab('email')"
class="flex-1 py-4 text-sm font-medium transition-colors tab-active text-[#f97316] border-b-2 border-[#f97316]">
📧 E-mail
</button>
<button id="tab-pin"
onclick="switchTab('pin')"
class="flex-1 py-4 text-sm font-medium transition-colors text-gray-400 hover:text-white border-b-2 border-transparent">
🔑 PIN Motorista
</button>
</div>
<%# Login por e-mail %>
<div id="form-email" class="p-8">
<%= form_with(url: user_session_path, method: :post) do |f| %>
<div class="space-y-5">
<div>
<%= f.label :email, 'E-mail', class: 'block text-sm font-medium text-gray-300 mb-1.5' %>
<%= f.email_field :email,
autofocus: true,
autocomplete: 'email',
class: 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
placeholder-gray-600 focus:outline-none focus:border-[#f97316] focus:ring-1
focus:ring-[#f97316] transition-colors text-base',
placeholder: 'admin@gade.com' %>
</div>
<div>
<%= f.label :password, 'Senha', class: 'block text-sm font-medium text-gray-300 mb-1.5' %>
<%= f.password_field :password,
autocomplete: 'current-password',
class: 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
placeholder-gray-600 focus:outline-none focus:border-[#f97316] focus:ring-1
focus:ring-[#f97316] transition-colors text-base',
placeholder: '••••••••' %>
</div>
<div class="flex items-center justify-between">
<label class="flex items-center gap-2 cursor-pointer">
<%= f.check_box :remember_me,
class: 'w-4 h-4 rounded accent-[#f97316]' %>
<span class="text-sm text-gray-400">Lembrar</span>
</label>
<%= link_to 'Esqueci a senha', new_user_password_path,
class: 'text-sm text-[#f97316] hover:text-orange-400 transition-colors' %>
</div>
<%= f.submit 'Entrar',
class: 'w-full py-3.5 bg-[#f97316] hover:bg-orange-500 text-white font-semibold
rounded-xl transition-colors cursor-pointer text-base min-h-[48px]' %>
</div>
<% end %>
</div>
<%# Login por PIN %>
<div id="form-pin" class="p-8 hidden">
<%= form_with(url: user_session_path, method: :post) do |f| %>
<%= f.hidden_field :pin_login, value: '1' %>
<div class="space-y-6">
<div class="text-center">
<p class="text-gray-400 text-sm mb-6">Digite seu PIN de 4 dígitos</p>
<%# PIN display visual %>
<div class="flex justify-center gap-3 mb-6" id="pin-display">
<% 4.times do |i| %>
<div id="pin-dot-<%= i %>"
class="w-14 h-14 rounded-xl bg-[#0a0a0a] border-2 border-white/10
flex items-center justify-center text-2xl font-bold text-white
transition-all duration-150">
</div>
<% end %>
</div>
<%= f.hidden_field :pin, id: 'pin-value' %>
<%# Teclado numérico %>
<div class="grid grid-cols-3 gap-3 max-w-[240px] mx-auto" id="pin-keypad">
<% [1,2,3,4,5,6,7,8,9].each do |n| %>
<button type="button"
onclick="pinPress('<%= n %>')"
class="h-14 rounded-xl bg-[#0a0a0a] border border-white/10 text-white
text-xl font-semibold hover:bg-[#f97316] hover:border-[#f97316]
active:scale-95 transition-all min-h-[48px]">
<%= n %>
</button>
<% end %>
<button type="button"
onclick="pinClear()"
class="h-14 rounded-xl bg-[#0a0a0a] border border-white/10 text-gray-400
text-sm hover:bg-red-900/40 hover:border-red-500/50 hover:text-red-400
active:scale-95 transition-all">
✕
</button>
<button type="button"
onclick="pinPress('0')"
class="h-14 rounded-xl bg-[#0a0a0a] border border-white/10 text-white
text-xl font-semibold hover:bg-[#f97316] hover:border-[#f97316]
active:scale-95 transition-all">
0
</button>
<button type="button"
onclick="pinBackspace()"
class="h-14 rounded-xl bg-[#0a0a0a] border border-white/10 text-gray-400
text-lg hover:bg-white/5 active:scale-95 transition-all">
⌫
</button>
</div>
</div>
<%= f.submit 'Entrar com PIN',
id: 'btn-pin-submit',
class: 'w-full py-3.5 bg-[#f97316] hover:bg-orange-500 text-white font-semibold
rounded-xl transition-colors cursor-pointer text-base min-h-[48px]
disabled:opacity-40 disabled:cursor-not-allowed',
disabled: true %>
</div>
<% end %>
</div>
</div>
<p class="text-center text-gray-600 text-xs mt-6">
Gade Hospitalar © <%= Date.today.year %>
</p>
</div>
</div>
<script>
let pinDigits = [];
function switchTab(tab) {
const emailForm = document.getElementById('form-email');
const pinForm = document.getElementById('form-pin');
const tabEmail = document.getElementById('tab-email');
const tabPin = document.getElementById('tab-pin');
if (tab === 'email') {
emailForm.classList.remove('hidden');
pinForm.classList.add('hidden');
tabEmail.classList.add('text-[#f97316]', 'border-[#f97316]');
tabEmail.classList.remove('text-gray-400', 'border-transparent');
tabPin.classList.add('text-gray-400', 'border-transparent');
tabPin.classList.remove('text-[#f97316]', 'border-[#f97316]');
} else {
pinForm.classList.remove('hidden');
emailForm.classList.add('hidden');
tabPin.classList.add('text-[#f97316]', 'border-[#f97316]');
tabPin.classList.remove('text-gray-400', 'border-transparent');
tabEmail.classList.add('text-gray-400', 'border-transparent');
tabEmail.classList.remove('text-[#f97316]', 'border-[#f97316]');
}
}
function updatePinDisplay() {
for (let i = 0; i < 4; i++) {
const dot = document.getElementById(`pin-dot-${i}`);
if (pinDigits[i] !== undefined) {
dot.textContent = '●';
dot.classList.add('border-[#f97316]');
dot.classList.remove('border-white/10');
} else {
dot.textContent = '';
dot.classList.remove('border-[#f97316]');
dot.classList.add('border-white/10');
}
}
document.getElementById('pin-value').value = pinDigits.join('');
const btn = document.getElementById('btn-pin-submit');
btn.disabled = pinDigits.length !== 4;
}
function pinPress(digit) {
if (pinDigits.length < 4) {
pinDigits.push(digit);
updatePinDisplay();
if (pinDigits.length === 4) {
document.getElementById('btn-pin-submit').click();
}
}
}
function pinBackspace() {
pinDigits.pop();
updatePinDisplay();
}
function pinClear() {
pinDigits = [];
updatePinDisplay();
}
// Suporte a teclado físico no PIN
document.addEventListener('keydown', (e) => {
if (!document.getElementById('form-pin').classList.contains('hidden')) {
if (e.key >= '0' && e.key <= '9') pinPress(e.key);
if (e.key === 'Backspace') pinBackspace();
}
});
<% if @pin_login %>
document.addEventListener('DOMContentLoaded', () => switchTab('pin'));
<% end %>
</script>

64
app/views/layouts/_sidebar.html.erb Normal file
View File

@@ -0,0 +1,64 @@
<%# app/views/layouts/_sidebar.html.erb %>
<div class="flex flex-col h-full">
<%# Logo %>
<div class="flex items-center gap-3 px-6 py-5 border-b border-white/5">
<div class="w-10 h-10 rounded-xl bg-[#f97316] flex items-center justify-center flex-shrink-0">
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"/>
</svg>
</div>
<div>
<p class="text-white font-bold text-sm leading-tight">Gade Logística</p>
<p class="text-gray-500 text-xs">Controle de Custos</p>
</div>
</div>
<%# Navegação %>
<nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto scrollbar-hidden">
<%# Dashboard (todos exceto motorista) %>
<%= nav_link_to 'Dashboard', dashboard_path, icon: '📊' %>
<%# Consolidações (admin, gerente, operador) %>
<% if current_user.pode_criar_consolidacao? %>
<%= nav_link_to 'Consolidações', consolidacoes_path, icon: '📋' %>
<% end %>
<%# Separador Admin %>
<% if current_user.pode_acessar_admin? %>
<div class="pt-3 pb-1">
<p class="px-4 text-xs font-semibold text-gray-600 uppercase tracking-wider">Administração</p>
</div>
<%= nav_link_to 'Usuários', usuarios_path, icon: '👥' %>
<%= nav_link_to 'Configurações', configuracoes_path, icon: '⚙️' %>
<% end %>
<%# PDFs (fase 7 — link desabilitado por enquanto) %>
<% if current_user.pode_acessar_admin? %>
<div class="pt-3 pb-1">
<p class="px-4 text-xs font-semibold text-gray-600 uppercase tracking-wider">Relatórios</p>
</div>
<div class="flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium text-gray-600 cursor-not-allowed">
<span class="text-lg w-5 text-center">📄</span>
<span>Relatórios PDF</span>
<span class="ml-auto text-[10px] bg-gray-800 text-gray-500 px-1.5 py-0.5 rounded">Em breve</span>
</div>
<% end %>
</nav>
<%# Footer do sidebar - info do usuário %>
<div class="px-3 py-4 border-t border-white/5">
<div class="flex items-center gap-3 px-3 py-3 rounded-xl bg-white/5">
<div class="w-8 h-8 rounded-full bg-[#f97316]/20 border border-[#f97316]/30
flex items-center justify-center text-[#f97316] font-bold text-sm flex-shrink-0">
<%= current_user.name.to_s[0].upcase %>
</div>
<div class="flex-1 min-w-0">
<p class="text-white text-sm font-medium truncate"><%= current_user.name %></p>
<p class="text-gray-500 text-xs truncate"><%= current_user.role.humanize %></p>
</div>
</div>
</div>
</div>

216
app/views/layouts/application.html.erb
View File

@@ -1,95 +1,169 @@
<%# app/views/layouts/application.html.erb %>
<!DOCTYPE html>
<html lang="pt-BR" class="dark">
<html lang="pt-BR" class="<%= @tema == 'light' ? '' : 'dark' %>">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-param" content="<%= request_forgery_protection_token %>">
<meta name="csrf-token" content="<%= form_authenticity_token %>">
<title><%= content_for?(:title) ? "#{yield(:title)} | Gade Logística" : "Gade Logística" %></title>
<title><%= content_for?(:title) ? yield(:title) + ' · ' : '' %>Gade Logística</title>
<%# Tailwind via CDN em desenvolvimento — compilar em produção %>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
brand: {
preto: '#0a0a0a',
'preto-card': '#1a1a1a',
laranja: '#f97316',
'laranja-escuro': '#ea580c',
branco: '#ffffff',
}
}
}
}
}
</script>
<%# Google Fonts — Inter %>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<%= stylesheet_link_tag 'application', data: { turbo_track: 'reload' } %>
<%= javascript_importmap_tags %>
<style>
body { font-family: 'Inter', sans-serif; }
/* Scrollbar tema escuro */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #f97316; border-radius: 3px; }
/* Loading spinner laranja */
.spinner {
border: 3px solid #1a1a1a;
border-top-color: #f97316;
border-radius: 50%;
animation: spin 0.8s linear infinite;
:root {
--bg-main: #0a0a0a;
--bg-card: #1a1a1a;
--accent: #f97316;
--text-main: #ffffff;
--text-muted:#9ca3af;
--border: rgba(255,255,255,0.05);
}
@keyframes spin { to { transform: rotate(360deg); } }
html.light {
--bg-main: #f8fafc;
--bg-card: #ffffff;
--text-main: #0f172a;
--text-muted:#64748b;
--border: rgba(0,0,0,0.08);
}
body { background-color: var(--bg-main); color: var(--text-main); }
.scrollbar-hidden::-webkit-scrollbar { display: none; }
</style>
<%= yield :head %>
</head>
<body class="bg-[#0a0a0a] text-white min-h-screen">
<body class="font-sans antialiased min-h-screen" style="background-color: var(--bg-main)">
<%# ── Navbar ─────────────────────────────────────────── %>
<% if user_signed_in? %>
<%= render 'layouts/navbar' %>
<% end %>
<% if user_signed_in? && !current_user.motorista? %>
<%# Layout principal com sidebar %>
<div class="flex min-h-screen">
<%# ── Flash Messages ─────────────────────────────────── %>
<% if notice.present? %>
<div id="flash-notice"
class="fixed top-4 right-4 z-50 bg-orange-500 text-black font-semibold px-5 py-3 rounded-lg shadow-lg flex items-center gap-2 animate-fade-in"
data-controller="flash">
<span>✅</span> <%= notice %>
<%# Sidebar Desktop %>
<aside id="sidebar"
class="fixed inset-y-0 left-0 z-50 w-64 flex-col hidden lg:flex
border-r border-white/5"
style="background-color: var(--bg-card)">
<%= render 'layouts/sidebar' %>
</aside>
<%# Overlay mobile %>
<div id="sidebar-overlay"
class="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm hidden lg:hidden"
onclick="toggleSidebar()"></div>
<%# Sidebar Mobile (drawer) %>
<aside id="sidebar-mobile"
class="fixed inset-y-0 left-0 z-50 w-64 flex flex-col lg:hidden
transform -translate-x-full transition-transform duration-300 ease-in-out
border-r border-white/5"
style="background-color: var(--bg-card)">
<%= render 'layouts/sidebar' %>
</aside>
<%# Main content %>
<div class="flex-1 lg:ml-64 flex flex-col min-h-screen">
<%# Topbar %>
<header class="sticky top-0 z-30 px-4 lg:px-6 py-4 flex items-center justify-between
border-b border-white/5 backdrop-blur-md"
style="background-color: rgba(10,10,10,0.8)">
<%# Hamburger mobile %>
<button onclick="toggleSidebar()"
class="lg:hidden p-2 text-gray-400 hover:text-white rounded-lg hover:bg-white/10 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
<%# Breadcrumb / título da página %>
<div class="flex-1 lg:ml-0 ml-3">
<span class="text-white font-semibold text-sm lg:text-base">
<%= content_for?(:page_title) ? yield(:page_title) : 'Dashboard' %>
</span>
</div>
<%# Ações do header %>
<div class="flex items-center gap-3">
<%# Toggle tema %>
<%= button_to toggle_tema_configuracoes_path, method: :post,
class: 'p-2 text-gray-400 hover:text-white hover:bg-white/10
rounded-lg transition-colors cursor-pointer',
title: @tema == 'dark' ? 'Mudar para tema claro' : 'Mudar para tema escuro' do %>
<% if @tema == 'dark' %>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
</svg>
<% else %>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
</svg>
<% end %>
<% end %>
<%# Avatar / menu usuário %>
<div class="relative" x-data="{ open: false }">
<button class="flex items-center gap-2 p-1.5 rounded-xl hover:bg-white/10 transition-colors">
<div class="w-8 h-8 rounded-full bg-[#f97316]/20 border border-[#f97316]/30
flex items-center justify-center text-[#f97316] font-bold text-sm">
<%= current_user.name.to_s[0].upcase %>
</div>
<span class="hidden sm:block text-white text-sm font-medium pr-1">
<%= current_user.nome_display %>
</span>
</button>
</div>
<%# Logout %>
<%= button_to destroy_user_session_path, method: :delete,
class: 'px-3 py-2 text-gray-500 hover:text-red-400 text-sm
hover:bg-red-900/20 rounded-lg transition-colors cursor-pointer' do %>
Sair
<% end %>
</div>
</header>
<%# Conteúdo principal %>
<main class="flex-1 p-4 lg:p-6">
<%= yield %>
</main>
</div>
</div>
<% end %>
<% if alert.present? %>
<div id="flash-alert"
class="fixed top-4 right-4 z-50 bg-red-600 text-white font-semibold px-5 py-3 rounded-lg shadow-lg flex items-center gap-2"
data-controller="flash">
<span>⚠️</span> <%= alert %>
<% elsif user_signed_in? && current_user.motorista? %>
<%# Layout simplificado para motorista %>
<div class="min-h-screen" style="background-color: var(--bg-main)">
<main class="max-w-2xl mx-auto px-4 py-6">
<%= yield %>
</main>
</div>
<% end %>
<%# ── Conteúdo principal ──────────────────────────────── %>
<main class="<%= user_signed_in? ? 'ml-0 md:ml-64 p-4 md:p-8' : '' %> min-h-screen">
<% else %>
<%# Layout sem sidebar (login, etc) %>
<%= yield %>
</main>
<% end %>
<%# Auto-hide flash após 4s (JS simples) %>
<script>
setTimeout(() => {
['flash-notice', 'flash-alert'].forEach(id => {
const el = document.getElementById(id);
if (el) el.style.transition = 'opacity 0.5s', el.style.opacity = '0',
setTimeout(() => el.remove(), 500);
});
}, 4000);
</script>
function toggleSidebar() {
const mobile = document.getElementById('sidebar-mobile');
const overlay = document.getElementById('sidebar-overlay');
const isOpen = !mobile.classList.contains('-translate-x-full');
if (isOpen) {
mobile.classList.add('-translate-x-full');
overlay.classList.add('hidden');
} else {
mobile.classList.remove('-translate-x-full');
overlay.classList.remove('hidden');
}
}
// Fecha sidebar ao pressionar Escape
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
const mobile = document.getElementById('sidebar-mobile');
if (mobile && !mobile.classList.contains('-translate-x-full')) toggleSidebar();
}
});
</script>
</body>
</html>

96
app/views/motorista/index.html.erb Normal file
View File

@@ -0,0 +1,96 @@
<%# app/views/motorista/index.html.erb %>
<div class="space-y-6">
<div class="flex items-center justify-between">
<div>
<h1 class="text-2xl font-bold text-white">
Olá, <%= current_user.nome_display %>! 👋
</h1>
<p class="text-gray-400 text-sm mt-0.5">
Suas entregas de <%= @data_referencia.strftime('%B/%Y').capitalize %>
</p>
</div>
<%= link_to new_user_session_path, method: :delete,
data: { turbo_method: :delete },
class: 'px-4 py-2.5 bg-[#1a1a1a] border border-white/10 hover:border-red-500/50
text-gray-400 hover:text-red-400 rounded-xl transition-colors text-sm' do %>
Sair
<% end %>
</div>
<%# Cards do motorista %>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
<div class="bg-[#f97316] rounded-2xl p-5 col-span-2 sm:col-span-1">
<p class="text-orange-100 text-xs font-medium mb-1">💰 Estimado</p>
<p class="text-2xl font-black text-white"><%= moeda(@valor_estimado) %></p>
</div>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-5">
<p class="text-gray-400 text-xs mb-1">Total</p>
<p class="text-2xl font-bold text-white"><%= @total_entregas %></p>
</div>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-5">
<p class="text-gray-400 text-xs mb-1 text-green-400">✅ Pagas</p>
<p class="text-2xl font-bold text-white"><%= @pagas %></p>
</div>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-5">
<p class="text-gray-400 text-xs mb-1 text-yellow-500">⏳ Pendentes</p>
<p class="text-2xl font-bold text-white"><%= @pendentes %></p>
</div>
</div>
<%# Últimas entregas %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 overflow-hidden">
<div class="px-6 py-4 border-b border-white/10">
<h2 class="text-lg font-semibold text-white">Últimas Entregas Pagas</h2>
</div>
<% if @ultimas_entregas.any? %>
<div class="divide-y divide-white/5">
<% @ultimas_entregas.each do |entrega| %>
<div class="px-6 py-4 flex items-center justify-between">
<div>
<p class="text-white text-sm font-medium"><%= entrega.contact_name %></p>
<p class="text-gray-500 text-xs mt-0.5">NF: <%= entrega.reference_id %></p>
</div>
<div class="text-right">
<p class="text-green-400 text-sm font-semibold">✅ Paga</p>
<p class="text-gray-500 text-xs"><%= entrega.data_formatada %></p>
</div>
</div>
<% end %>
</div>
<% else %>
<div class="px-6 py-12 text-center text-gray-500">
<div class="text-4xl mb-3">🚚</div>
<p>Nenhuma entrega paga este mês ainda.</p>
</div>
<% end %>
</div>
<%# Consolidações do motorista %>
<% if @consolidacoes.any? %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 overflow-hidden">
<div class="px-6 py-4 border-b border-white/10">
<h2 class="text-lg font-semibold text-white">Seus Fechamentos</h2>
</div>
<div class="divide-y divide-white/5">
<% @consolidacoes.each do |cm| %>
<div class="px-6 py-4 flex items-center justify-between">
<div>
<p class="text-white text-sm font-medium"><%= cm.consolidacao.mes_label %></p>
<p class="text-gray-500 text-xs mt-0.5"><%= cm.consolidacao_entregas.count %> entregas</p>
</div>
<div class="flex items-center gap-3">
<%= badge_status(cm.consolidacao.status) %>
<% if cm.consolidacao.aprovada? %>
<%= link_to '#', class: 'text-[#f97316] text-sm hover:underline' do %>
📄 PDF
<% end %>
<% end %>
</div>
</div>
<% end %>
</div>
</div>
<% end %>
</div>

18
app/views/shared/_flash.html.erb Normal file
View File

@@ -0,0 +1,18 @@
<%# app/views/shared/_flash.html.erb %>
<% if flash[:notice] %>
<div class="p-4 bg-green-900/30 border border-green-500/40 rounded-xl text-green-300 text-sm flex items-center gap-2">
<svg class="w-4 h-4 flex-shrink-0 text-green-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
</svg>
<%= flash[:notice] %>
</div>
<% end %>
<% if flash[:alert] %>
<div class="p-4 bg-red-900/30 border border-red-500/40 rounded-xl text-red-300 text-sm flex items-center gap-2">
<svg class="w-4 h-4 flex-shrink-0 text-red-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
</svg>
<%= flash[:alert] %>
</div>
<% end %>

153
app/views/usuarios/_form.html.erb Normal file
View File

@@ -0,0 +1,153 @@
<%# app/views/usuarios/_form.html.erb %>
<div class="max-w-2xl mx-auto space-y-6">
<div>
<h1 class="text-2xl font-bold text-white">
<%= usuario.new_record? ? 'Novo Usuário' : "Editar: #{usuario.name}" %>
</h1>
<p class="text-gray-400 text-sm mt-0.5">
<%= usuario.new_record? ? 'Preencha os dados para criar um novo acesso' : 'Atualize as informações do usuário' %>
</p>
</div>
<%= render 'shared/flash' %>
<%= form_with(model: usuario, url: usuario.new_record? ? usuarios_path : usuario_path(usuario),
method: usuario.new_record? ? :post : :patch,
class: 'bg-[#1a1a1a] rounded-2xl border border-white/5 p-8 space-y-6') do |f| %>
<% if usuario.errors.any? %>
<div class="p-4 bg-red-900/30 border border-red-500/40 rounded-xl">
<p class="text-red-400 text-sm font-medium mb-2">
<%= pluralize(usuario.errors.count, 'erro', 'erros') %> encontrado<%= usuario.errors.count > 1 ? 's' : '' %>:
</p>
<ul class="list-disc list-inside space-y-1">
<% usuario.errors.full_messages.each do |msg| %>
<li class="text-red-300 text-sm"><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<%# Nome %>
<div class="sm:col-span-2">
<%= f.label :name, 'Nome completo', class: 'block text-sm font-medium text-gray-300 mb-1.5' %>
<%= f.text_field :name,
class: 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
placeholder-gray-600 focus:outline-none focus:border-[#f97316] focus:ring-1
focus:ring-[#f97316] transition-colors',
placeholder: 'João da Silva' %>
</div>
<%# Perfil %>
<div>
<%= f.label :role, 'Perfil de acesso', class: 'block text-sm font-medium text-gray-300 mb-1.5' %>
<%= f.select :role,
options_for_select(role_options_for_select, usuario.role),
{},
class: 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
focus:outline-none focus:border-[#f97316] focus:ring-1 focus:ring-[#f97316]
transition-colors cursor-pointer' %>
</div>
<%# Ativo toggle %>
<div class="flex items-center">
<div class="flex-1">
<%= f.label :ativo, 'Usuário ativo', class: 'block text-sm font-medium text-gray-300' %>
<p class="text-gray-500 text-xs mt-0.5">Usuários inativos não conseguem fazer login</p>
</div>
<label class="relative inline-flex items-center cursor-pointer ml-4">
<%= f.check_box :ativo, class: 'sr-only peer' %>
<div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer
peer-checked:after:translate-x-full peer-checked:after:border-white
after:content-[''] after:absolute after:top-[2px] after:left-[2px]
after:bg-white after:border-gray-300 after:border after:rounded-full
after:h-5 after:w-5 after:transition-all peer-checked:bg-[#f97316]"></div>
</label>
</div>
</div>
<%# E-mail e senha (não motorista) %>
<div id="fields-email" class="space-y-6">
<div class="border-t border-white/5 pt-6">
<p class="text-sm font-medium text-gray-300 mb-4">Credenciais de acesso</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div class="sm:col-span-2">
<%= f.label :email, 'E-mail', class: 'block text-sm font-medium text-gray-300 mb-1.5' %>
<%= f.email_field :email,
class: 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
placeholder-gray-600 focus:outline-none focus:border-[#f97316] focus:ring-1
focus:ring-[#f97316] transition-colors',
placeholder: 'usuario@gade.com' %>
</div>
<div>
<%= f.label :password,
usuario.new_record? ? 'Senha' : 'Nova senha (deixe em branco para manter)',
class: 'block text-sm font-medium text-gray-300 mb-1.5' %>
<%= f.password_field :password,
class: 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
placeholder-gray-600 focus:outline-none focus:border-[#f97316] focus:ring-1
focus:ring-[#f97316] transition-colors',
placeholder: '••••••••' %>
</div>
<div>
<%= f.label :password_confirmation, 'Confirmar senha',
class: 'block text-sm font-medium text-gray-300 mb-1.5' %>
<%= f.password_field :password_confirmation,
class: 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
placeholder-gray-600 focus:outline-none focus:border-[#f97316] focus:ring-1
focus:ring-[#f97316] transition-colors',
placeholder: '••••••••' %>
</div>
</div>
</div>
</div>
<%# PIN (motorista) %>
<div id="fields-pin" class="hidden border-t border-white/5 pt-6">
<p class="text-sm font-medium text-gray-300 mb-4">PIN de acesso</p>
<div class="max-w-xs">
<%= f.label :pin_acesso, 'PIN (4 dígitos)', class: 'block text-sm font-medium text-gray-300 mb-1.5' %>
<%= f.text_field :pin_acesso,
maxlength: 4,
pattern: '\d{4}',
inputmode: 'numeric',
class: 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
placeholder-gray-600 focus:outline-none focus:border-[#f97316] focus:ring-1
focus:ring-[#f97316] transition-colors text-center text-2xl tracking-[0.5em] font-bold',
placeholder: '0000' %>
<p class="text-gray-500 text-xs mt-1.5">Deve ser único entre todos os motoristas</p>
</div>
</div>
<%# Botões %>
<div class="flex items-center justify-between pt-2 border-t border-white/5">
<%= link_to 'Cancelar', usuarios_path,
class: 'px-6 py-3 text-gray-400 hover:text-white border border-white/10
hover:border-white/20 rounded-xl transition-colors' %>
<%= f.submit usuario.new_record? ? 'Criar Usuário' : 'Salvar Alterações',
class: 'px-8 py-3 bg-[#f97316] hover:bg-orange-500 text-white font-semibold
rounded-xl transition-colors cursor-pointer min-h-[48px]' %>
</div>
<% end %>
</div>
<script>
const roleSelect = document.querySelector('select[name="user[role]"]');
const fieldsEmail = document.getElementById('fields-email');
const fieldsPin = document.getElementById('fields-pin');
function toggleFields() {
if (roleSelect.value === 'motorista') {
fieldsEmail.classList.add('hidden');
fieldsPin.classList.remove('hidden');
} else {
fieldsEmail.classList.remove('hidden');
fieldsPin.classList.add('hidden');
}
}
roleSelect.addEventListener('change', toggleFields);
toggleFields(); // run on load
</script>

2
app/views/usuarios/edit.html.erb Normal file
View File

@@ -0,0 +1,2 @@
<%# app/views/usuarios/edit.html.erb %>
<%= render 'form', usuario: @usuario %>

120
app/views/usuarios/index.html.erb Normal file
View File

@@ -0,0 +1,120 @@
<%# app/views/usuarios/index.html.erb %>
<div class="space-y-6">
<%# Header %>
<div class="flex items-center justify-between">
<div>
<h1 class="text-2xl font-bold text-white">Usuários</h1>
<p class="text-gray-400 text-sm mt-0.5">Gerencie o acesso ao sistema</p>
</div>
<% if policy(User).create? %>
<%= link_to new_usuario_path,
class: 'flex items-center gap-2 px-5 py-3 bg-[#f97316] hover:bg-orange-500
text-white font-semibold rounded-xl transition-colors min-h-[48px]' do %>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
</svg>
Novo Usuário
<% end %>
<% end %>
</div>
<%# Flash %>
<%= render 'shared/flash' %>
<%# Tabela %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 overflow-hidden">
<table class="w-full">
<thead>
<tr class="border-b border-white/10">
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Nome</th>
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">E-mail / PIN</th>
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Perfil</th>
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Status</th>
<th class="px-6 py-4 text-right text-xs font-semibold text-gray-400 uppercase tracking-wider">Ações</th>
</tr>
</thead>
<tbody class="divide-y divide-white/5">
<% @usuarios.each do |usuario| %>
<tr class="hover:bg-white/5 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-9 h-9 rounded-full bg-[#f97316]/20 border border-[#f97316]/30
flex items-center justify-center text-[#f97316] font-bold text-sm flex-shrink-0">
<%= usuario.name.to_s[0].upcase %>
</div>
<span class="text-white font-medium"><%= usuario.name %></span>
</div>
</td>
<td class="px-6 py-4">
<% if usuario.motorista? && usuario.pin_acesso.present? %>
<div class="text-gray-300 text-sm">PIN: ••••</div>
<% else %>
<div class="text-gray-300 text-sm"><%= usuario.email %></div>
<% end %>
</td>
<td class="px-6 py-4">
<%= badge_role(usuario.role) %>
</td>
<td class="px-6 py-4">
<%= badge_status_usuario(usuario.ativo?) %>
</td>
<td class="px-6 py-4">
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
<% if policy(usuario).edit? %>
<%= link_to edit_usuario_path(usuario),
class: 'p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg transition-colors',
title: 'Editar' do %>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
</svg>
<% end %>
<% end %>
<% if policy(usuario).toggle_ativo? %>
<%= button_to toggle_ativo_usuario_path(usuario), method: :post,
class: "p-2 rounded-lg transition-colors #{usuario.ativo? ? 'text-green-400 hover:bg-green-900/30' : 'text-red-400 hover:bg-red-900/30'}",
title: usuario.ativo? ? 'Desativar' : 'Ativar',
data: { confirm: "#{usuario.ativo? ? 'Desativar' : 'Ativar'} #{usuario.name}?" } do %>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
</svg>
<% end %>
<% end %>
<% if policy(usuario).destroy? %>
<%= button_to usuario_path(usuario), method: :delete,
class: 'p-2 text-gray-600 hover:text-red-400 hover:bg-red-900/20 rounded-lg transition-colors',
title: 'Excluir',
data: { confirm: "Excluir #{usuario.name} permanentemente?" } do %>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
</svg>
<% end %>
<% end %>
</div>
</td>
</tr>
<% end %>
<% if @usuarios.empty? %>
<tr>
<td colspan="5" class="px-6 py-16 text-center text-gray-500">
<div class="text-4xl mb-3">👥</div>
<p>Nenhum usuário encontrado.</p>
</td>
</tr>
<% end %>
</tbody>
</table>
<% if @usuarios.respond_to?(:total_pages) && @usuarios.total_pages > 1 %>
<div class="px-6 py-4 border-t border-white/10">
<%= paginate @usuarios %>
</div>
<% end %>
</div>
</div>

2
app/views/usuarios/new.html.erb Normal file
View File

@@ -0,0 +1,2 @@
<%# app/views/usuarios/new.html.erb %>
<%= render 'form', usuario: @usuario %>