Initial commit - Fase 1: Setup Rails + Docker
This commit is contained in:
92
app/views/layouts/_navbar.html.erb
Normal file
92
app/views/layouts/_navbar.html.erb
Normal file
@@ -0,0 +1,92 @@
|
||||
<%# app/views/layouts/_navbar.html.erb %>
|
||||
<%# Sidebar lateral — responsiva (esconde no mobile, hamburguer abre) %>
|
||||
|
||||
<%# Overlay mobile %>
|
||||
<div id="sidebar-overlay"
|
||||
class="fixed inset-0 bg-black/70 z-30 hidden md:hidden"
|
||||
onclick="toggleSidebar()"></div>
|
||||
|
||||
<%# Sidebar %>
|
||||
<aside id="sidebar"
|
||||
class="fixed top-0 left-0 h-full w-64 bg-[#111111] border-r border-[#2a2a2a] z-40
|
||||
transform -translate-x-full md:translate-x-0 transition-transform duration-300">
|
||||
|
||||
<%# Logo / Marca %>
|
||||
<div class="flex items-center gap-3 px-6 py-5 border-b border-[#2a2a2a]">
|
||||
<div class="w-9 h-9 bg-orange-500 rounded-lg flex items-center justify-center font-black text-black text-lg">G</div>
|
||||
<div>
|
||||
<p class="font-bold text-white text-sm leading-tight">Gade Hospitalar</p>
|
||||
<p class="text-orange-500 text-xs">Logística</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%# Usuário logado %>
|
||||
<div class="px-6 py-4 border-b border-[#2a2a2a]">
|
||||
<p class="text-xs text-gray-500 mb-1">Logado como</p>
|
||||
<p class="text-white font-semibold text-sm truncate"><%= current_user.nome_display %></p>
|
||||
<span class="inline-block mt-1 px-2 py-0.5 text-xs rounded-full
|
||||
<%= current_user.admin? ? 'bg-orange-500 text-black' :
|
||||
current_user.gerente? ? 'bg-orange-800 text-white' :
|
||||
current_user.operador? ? 'bg-gray-700 text-white' :
|
||||
'bg-gray-900 text-orange-400 border border-orange-500' %>">
|
||||
<%= current_user.role_label %>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<%# Navegação %>
|
||||
<nav class="px-3 py-4 space-y-1 flex-1 overflow-y-auto">
|
||||
|
||||
<%# Dashboard — admin/gerente/operador %>
|
||||
<% unless current_user.motorista? %>
|
||||
<%= nav_link_to '📊 Dashboard', dashboard_path %>
|
||||
<%= nav_link_to '📦 Consolidações', consolidacoes_path %>
|
||||
<% end %>
|
||||
|
||||
<%# Motorista %>
|
||||
<% if current_user.motorista? %>
|
||||
<%= nav_link_to '🏠 Meu Painel', motorista_dashboard_path %>
|
||||
<% end %>
|
||||
|
||||
<%# Admin/Gerente — Configurações %>
|
||||
<% if current_user.pode_ver_config? %>
|
||||
<div class="pt-4 mt-4 border-t border-[#2a2a2a]">
|
||||
<p class="px-3 text-xs text-gray-600 uppercase tracking-wider mb-2">Administração</p>
|
||||
<%= nav_link_to '👥 Usuários', admin_usuarios_path %>
|
||||
<%= nav_link_to '⚙️ Configurações', admin_configuracoes_path %>
|
||||
<%= nav_link_to '🔍 Auditoria', admin_auditoria_logs_path %>
|
||||
</div>
|
||||
<% end %>
|
||||
</nav>
|
||||
|
||||
<%# Footer da sidebar — sair %>
|
||||
<div class="px-6 py-4 border-t border-[#2a2a2a]">
|
||||
<%= link_to destroy_user_session_path, method: :delete,
|
||||
class: "flex items-center gap-2 text-gray-400 hover:text-red-400 text-sm transition-colors" do %>
|
||||
<span>🚪</span> Sair
|
||||
<% end %>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<%# Topbar mobile %>
|
||||
<header class="md:hidden fixed top-0 left-0 right-0 z-30 bg-[#111111] border-b border-[#2a2a2a] px-4 py-3 flex items-center justify-between">
|
||||
<button onclick="toggleSidebar()"
|
||||
class="text-orange-500 text-2xl min-h-[48px] min-w-[48px] flex items-center justify-center">
|
||||
☰
|
||||
</button>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-7 h-7 bg-orange-500 rounded flex items-center justify-center font-black text-black text-sm">G</div>
|
||||
<span class="font-bold text-white text-sm">Gade Logística</span>
|
||||
</div>
|
||||
<div class="w-12"></div>
|
||||
</header>
|
||||
<%# Espaço para topbar no mobile %>
|
||||
<div class="h-14 md:hidden"></div>
|
||||
|
||||
<script>
|
||||
function toggleSidebar() {
|
||||
const s = document.getElementById('sidebar');
|
||||
const o = document.getElementById('sidebar-overlay');
|
||||
s.classList.toggle('-translate-x-full');
|
||||
o.classList.toggle('hidden');
|
||||
}
|
||||
</script>
|
||||
95
app/views/layouts/application.html.erb
Normal file
95
app/views/layouts/application.html.erb
Normal file
@@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR" class="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>
|
||||
|
||||
<%# 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">
|
||||
|
||||
<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;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
</style>
|
||||
|
||||
<%= yield :head %>
|
||||
</head>
|
||||
|
||||
<body class="bg-[#0a0a0a] text-white min-h-screen">
|
||||
|
||||
<%# ── Navbar ─────────────────────────────────────────── %>
|
||||
<% if user_signed_in? %>
|
||||
<%= render 'layouts/navbar' %>
|
||||
<% end %>
|
||||
|
||||
<%# ── 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 %>
|
||||
</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 %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%# ── Conteúdo principal ──────────────────────────────── %>
|
||||
<main class="<%= user_signed_in? ? 'ml-0 md:ml-64 p-4 md:p-8' : '' %> min-h-screen">
|
||||
<%= yield %>
|
||||
</main>
|
||||
|
||||
<%# 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user