123 lines
6.5 KiB
HTML
123 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es" class="h-full bg-gray-50">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>RIPS Manager - {% block title %}Dashboard{% endblock %}</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: {'50': '#eff6ff','100': '#dbeafe','200': '#bfdbfe','300': '#93c5fd','400': '#60a5fa','500': '#3b82f6','600': '#2563eb','700': '#1d4ed8','800': '#1e40af','900': '#1e3a8a'}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
</head>
|
|
<body class="h-full">
|
|
<div class="min-h-full">
|
|
{% if user %}
|
|
<!-- Sidebar -->
|
|
<div class="fixed inset-y-0 left-0 w-64 bg-gray-900 text-white z-30">
|
|
<div class="flex items-center h-16 px-6 border-b border-gray-700">
|
|
<i class="fas fa-file-medical text-blue-400 text-xl mr-3"></i>
|
|
<span class="font-bold text-lg">RIPS Manager</span>
|
|
</div>
|
|
<nav class="mt-4 px-3 space-y-1">
|
|
<a href="/dashboard" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/dashboard' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
|
|
<i class="fas fa-chart-pie w-5 mr-2"></i> Dashboard
|
|
</a>
|
|
<a href="/config" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/config' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
|
|
<i class="fas fa-cog w-5 mr-2"></i> Configuración
|
|
</a>
|
|
<a href="/queries" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/queries' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
|
|
<i class="fas fa-database w-5 mr-2"></i> Consultas SQL
|
|
</a>
|
|
<hr class="my-3 border-gray-700">
|
|
<p class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Envíos</p>
|
|
<a href="/terceros" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/terceros' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
|
|
<i class="fas fa-user w-5 mr-2"></i> Terceros
|
|
</a>
|
|
<a href="/transaccion" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/transaccion' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
|
|
<i class="fas fa-exchange-alt w-5 mr-2"></i> Transacción RIPS
|
|
</a>
|
|
<a href="/automation" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/automation' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
|
|
<i class="fas fa-robot w-5 mr-2"></i> Automatización
|
|
</a>
|
|
<hr class="my-3 border-gray-700">
|
|
<a href="/logs" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/logs' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
|
|
<i class="fas fa-history w-5 mr-2"></i> Historial
|
|
</a>
|
|
<a href="/auth/logout" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:bg-gray-700">
|
|
<i class="fas fa-sign-out-alt w-5 mr-2"></i> Salir
|
|
</a>
|
|
</nav>
|
|
<div class="absolute bottom-0 left-0 right-0 px-4 py-3 border-t border-gray-700">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-sm font-bold">
|
|
{{ user.username[0]|upper }}
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-sm font-medium text-white">{{ user.username }}</p>
|
|
<p class="text-xs text-gray-400">Sesión activa</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main content -->
|
|
<div class="pl-64">
|
|
<header class="bg-white shadow-sm border-b border-gray-200">
|
|
<div class="flex items-center justify-between h-16 px-8">
|
|
<h1 class="text-xl font-semibold text-gray-800">{% block header %}Dashboard{% endblock %}</h1>
|
|
<div class="flex items-center space-x-4">
|
|
<span class="text-sm text-gray-500">
|
|
<i class="far fa-calendar-alt mr-1"></i>
|
|
<script>document.write(new Date().toLocaleDateString('es-CO', {year:'numeric',month:'long',day:'numeric'}))</script>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main class="p-8">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
</div>
|
|
{% else %}
|
|
<main>
|
|
{% block auth_content %}{% endblock %}
|
|
</main>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<script>
|
|
async function fetchJSON(url, options = {}) {
|
|
const resp = await fetch(url, options);
|
|
return await resp.json();
|
|
}
|
|
|
|
function showToast(message, type = 'success') {
|
|
const colors = {success: 'bg-green-500', error: 'bg-red-500', info: 'bg-blue-500', warning: 'bg-yellow-500'};
|
|
const toast = document.createElement('div');
|
|
toast.className = `fixed top-4 right-4 z-50 ${colors[type]} text-white px-6 py-3 rounded-lg shadow-lg transition-all duration-500`;
|
|
toast.textContent = message;
|
|
document.body.appendChild(toast);
|
|
setTimeout(() => { toast.style.opacity = '0'; setTimeout(() => toast.remove(), 500); }, 4000);
|
|
}
|
|
|
|
function showLoading(btn) {
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Procesando...';
|
|
}
|
|
|
|
function hideLoading(btn, text) {
|
|
btn.disabled = false;
|
|
btn.innerHTML = text;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|