<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<title>Restaurant Ops Pro | Admin</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root { --brand: #2563eb; }
/* Cambio a fondo blanco premium */
body { background-color: #f8fafc; color: #1e293b; font-family: 'Inter', system-ui, sans-serif; }
/* Cards blancas con sombras suaves */
.glass-card { background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); }
/* Navegación en tonos claros */
.nav-link { @apply flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 text-slate-500 hover:bg-slate-100 hover:text-slate-900; }
.nav-link.active { @apply bg-blue-600 text-white shadow-lg shadow-blue-600/20; }
.status-pill { @apply px-2 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider; }
.btn-primary { @apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-xl font-bold transition-all flex items-center gap-2 shadow-md shadow-blue-600/10; }
/* Inputs claros */
input, select { @apply bg-white border-slate-200 text-slate-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent rounded-xl p-2 border; }
.fade-in { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
</style>
</head>
<body>
<div class="flex min-h-screen">
<aside class="w-64 border-r border-slate-200 bg-white p-6 hidden lg:block">
<div class="flex items-center gap-3 mb-10">
<div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center font-bold text-white shadow-lg shadow-blue-600/30">R</div>
<span class="font-black text-xl tracking-tight text-slate-900">OpsPro</span>
</div>
<nav class="space-y-2">
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest px-4 mb-4">Administración</p>
<button onclick="showView('dashboard')" class="nav-link w-full active" id="nav-dashboard">
<i class="fas fa-chart-pie"></i> Dashboard
</button>
<button onclick="showView('sales')" class="nav-link w-full" id="nav-sales">
<i class="fas fa-receipt"></i> Ventas
</button>
<button onclick="showView('delivery')" class="nav-link w-full" id="nav-delivery">
<i class="fas fa-motorcycle"></i> Delivery
</button>
<button onclick="showView('waiters')" class="nav-link w-full" id="nav-waiters">
<i class="fas fa-user-tie"></i> Garzones
</button>
<button onclick="showView('branches')" class="nav-link w-full" id="nav-branches">
<i class="fas fa-store"></i> Sucursales
</button>
</nav>
</aside>
<main class="flex-1 flex flex-col">
<header class="h-16 border-b border-slate-200 flex items-center justify-between px-8 bg-white/80 backdrop-blur-md">
<div id="view-title" class="font-bold text-lg text-slate-800">Panel de Control</div>
<div class="flex items-center gap-4">
<span class="text-xs text-emerald-600 font-semibold flex items-center gap-2">
<span class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></span> Sistema Online
</span>
</div>
</header>
<div class="p-8 overflow-y-auto">
<section id="view-dashboard" class="fade-in space-y-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="glass-card p-6 rounded-3xl">
<p class="text-slate-500 text-xs font-bold uppercase">Ventas Brutas</p>
<h3 id="kpi-total" class="text-3xl font-black mt-1 text-slate-900">$0</h3>
</div>
<div class="glass-card p-6 rounded-3xl">
<p class="text-slate-500 text-xs font-bold uppercase">Tickets Hoy</p>
<h3 id="kpi-count" class="text-3xl font-black mt-1 text-slate-900">0</h3>
</div>
<div class="glass-card p-6 rounded-3xl border-l-4 border-l-blue-500">
<p class="text-slate-500 text-xs font-bold uppercase">Delivery Activo</p>
<h3 id="kpi-delivery" class="text-3xl font-black mt-1 text-slate-900">0</h3>
</div>
<div class="glass-card p-6 rounded-3xl">
<p class="text-slate-500 text-xs font-bold uppercase">Promedio Ticket</p>
<h3 id="kpi-avg" class="text-3xl font-black mt-1 text-slate-900">$0</h3>
</div>
</div>
</section>
<section id="view-sales" class="hidden fade-in space-y-6">
<div class="flex flex-wrap justify-between items-center gap-4">
<div class="flex gap-2">
<select id="filter-branch" onchange="loadSales()" class="text-sm">
<option value="all">Todas las Sucursales</option>
</select>
<select id="filter-channel" onchange="loadSales()" class="text-sm">
<option value="all">Todos los Canales</option>
<option value="SALON">Salón</option>
<option value="DELIVERY">Delivery</option>
</select>
</div>
<button onclick="openModal('sale')" class="btn-primary">
<i class="fas fa-plus"></i> Nueva Venta
</button>
</div>
<div class="glass-card rounded-3xl overflow-hidden">
<table class="w-full text-left">
<thead class="bg-slate-50 text-slate-500 text-xs uppercase border-b border-slate-100">
<tr>
<th class="p-4">Fecha/Hora</th>
<th class="p-4">Sucursal</th>
<th class="p-4">Canal</th>
<th class="p-4">Monto</th>
<th class="p-4">Acción</th>
</tr>
</thead>
<tbody id="sales-list" class="divide-y divide-slate-100">
</tbody>
</table>
</div>
</section>
<section id="view-waiters" class="hidden fade-in">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-bold text-slate-800">Gestión de Personal</h2>
<button onclick="openModal('waiter')" class="btn-primary"><i class="fas fa-user-plus"></i> Añadir Garzón</button>
</div>
<div id="waiters-grid" class="grid grid-cols-1 md:grid-cols-3 gap-4"></div>
</section>
<section id="view-delivery" class="hidden fade-in"><p class="text-slate-500">Listado de entregas en tiempo real...</p></section>
<section id="view-branches" class="hidden fade-in">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-bold text-slate-800">Sucursales</h2>
<button onclick="openModal('branch')" class="btn-primary">+ Nueva Sucursal</button>
</div>
<div id="branches-list" class="grid gap-4"></div>
</section>
</div>
</main>
</div>
<div id="modal" class="hidden fixed inset-0 z-50 bg-slate-900/40 backdrop-blur-sm flex items-center justify-center p-4">
<div class="glass-card max-w-md w-full rounded-3xl p-8 shadow-2xl">
<div class="flex justify-between items-center mb-6">
<h3 id="modal-title" class="text-xl font-bold text-slate-900">Registro</h3>
<button onclick="closeModal()" class="text-slate-400 hover:text-slate-600"><i class="fas fa-times"></i></button>
</div>
<div id="modal-body" class="space-y-4"></div>
<div class="flex justify-end gap-3 mt-8">
<button onclick="closeModal()" class="px-4 py-2 text-slate-500 font-bold hover:text-slate-700">Cancelar</button>
<button id="btn-save" class="btn-primary px-8">Guardar Datos</button>
</div>
</div>
</div>
<script>
/* CONFIGURACIÓN SUPABASE */
const SUPABASE_URL = "TU_URL_AQUI";
const SUPABASE_ANON_KEY = "TU_KEY_AQUI";
const sb = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
let state = { branches: [], waiters: [], sales: [] };
window.onload = async () => {
await loadInitialData();
showView('dashboard');
};
async function loadInitialData() {
const { data: b } = await sb.from('branches').select('*').is('deleted_at', null);
const { data: w } = await sb.from('waiters').select('*').is('deleted_at', null);
state.branches = b || [];
state.waiters = w || [];
const filterBranch = document.getElementById('filter-branch');
state.branches.forEach(branch => {
filterBranch.innerHTML += `<option value="${branch.id}">${branch.name}</option>`;
});
await loadSales();
renderWaiters();
renderBranches();
}
async function loadSales() {
const branchFilter = document.getElementById('filter-branch').value;
const channelFilter = document.getElementById('filter-channel').value;
let query = sb.from('sales').select('*, branches(name)').is('deleted_at', null).order('sold_at', {ascending: false});
if(branchFilter !== 'all') query = query.eq('branch_id', branchFilter);
if(channelFilter !== 'all') query = query.eq('channel', channelFilter);
const { data } = await query;
state.sales = data || [];
renderSales();
updateDashboard();
}
function showView(viewId) {
document.querySelectorAll('section').forEach(s => s.classList.add('hidden'));
document.getElementById(`view-${viewId}`).classList.remove('hidden');
document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
document.getElementById(`nav-${viewId}`).classList.add('active');
document.getElementById('view-title').textContent = viewId.charAt(0).toUpperCase() + viewId.slice(1);
}
function renderSales() {
const container = document.getElementById('sales-list');
container.innerHTML = state.sales.map(s => `
<tr class="hover:bg-slate-50 transition-colors">
<td class="p-4 text-sm">
<div class="font-medium text-slate-900">${new Date(s.sold_at).toLocaleDateString()}</div>
<div class="text-[10px] text-slate-500">${new Date(s.sold_at).toLocaleTimeString()}</div>
</td>
<td class="p-4 text-sm font-bold text-slate-700">${s.branches?.name || '---'}</td>
<td class="p-4">
<span class="status-pill ${s.channel === 'DELIVERY' ? 'bg-orange-100 text-orange-600' : 'bg-blue-100 text-blue-600'}">
${s.channel}
</span>
</td>
<td class="p-4 font-black text-slate-900">$${s.net_amount.toLocaleString()}</td>
<td class="p-4"><button class="text-slate-400 hover:text-slate-600"><i class="fas fa-ellipsis-v"></i></button></td>
</tr>
`).join('');
}
function renderWaiters() {
const grid = document.getElementById('waiters-grid');
grid.innerHTML = state.waiters.map(w => `
<div class="glass-card p-4 rounded-2xl flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center font-bold text-blue-600">
${w.full_name.charAt(0)}
</div>
<div>
<div class="font-bold text-slate-800">${w.full_name}</div>
<div class="text-xs text-slate-500">${w.phone || 'Sin teléfono'}</div>
</div>
</div>
`).join('');
}
function renderBranches() {
const container = document.getElementById('branches-list');
container.innerHTML = state.branches.map(b => `
<div class="glass-card p-4 rounded-2xl flex justify-between items-center">
<div>
<div class="font-bold text-lg text-slate-800">${b.name}</div>
<div class="text-sm text-slate-500"><i class="fas fa-map-marker-alt mr-1"></i> ${b.city}</div>
</div>
<div class="text-right">
<span class="status-pill bg-emerald-100 text-emerald-600">Operativa</span>
</div>
</div>
`).join('');
}
function updateDashboard() {
const total = state.sales.reduce((acc, s) => acc + (s.net_amount || 0), 0);
const deliv = state.sales.filter(s => s.channel === 'DELIVERY').length;
document.getElementById('kpi-total').textContent = `$${total.toLocaleString()}`;
document.getElementById('kpi-count').textContent = state.sales.length;
document.getElementById('kpi-delivery').textContent = deliv;
document.getElementById('kpi-avg').textContent = `$${state.sales.length ? Math.round(total/state.sales.length).toLocaleString() : 0}`;
}
function openModal(type) {
const body = document.getElementById('modal-body');
const btn = document.getElementById('btn-save');
const title = document.getElementById('modal-title');
if(type === 'sale') {
title.textContent = "Registrar Nueva Venta";
body.innerHTML = `
<label class="block text-xs font-bold text-slate-500 mb-1">SUCURSAL</label>
<select id="f_branch" class="w-full">${state.branches.map(b => `<option value="${b.id}">${b.name}</option>`).join('')}</select>
<label class="block text-xs font-bold text-slate-500 mt-4 mb-1">MONTO NETO</label>
<input id="f_amount" type="number" placeholder="0.00" class="w-full">
<label class="block text-xs font-bold text-slate-500 mt-4 mb-1">CANAL DE VENTA</label>
<select id="f_channel" class="w-full"><option value="SALON">SALÓN</option><option value="DELIVERY">DELIVERY</option></select>
`;
btn.onclick = async () => {
const { error } = await sb.from('sales').insert({
branch_id: document.getElementById('f_branch').value,
net_amount: parseFloat(document.getElementById('f_amount').value),
gross_amount: parseFloat(document.getElementById('f_amount').value),
channel: document.getElementById('f_channel').value,
sold_at: new Date().toISOString()
});
if(!error) { closeModal(); loadSales(); }
};
}
if(type === 'waiter') {
title.textContent = "Añadir Garzón";
body.innerHTML = `
<input id="f_name" placeholder="Nombre completo" class="w-full mb-3">
<input id="f_phone" placeholder="Teléfono de contacto" class="w-full">
`;
btn.onclick = async () => {
await sb.from('waiters').insert({ full_name: document.getElementById('f_name').value, phone: document.getElementById('f_phone').value });
closeModal();
loadInitialData();
};
}
document.getElementById('modal').classList.remove('hidden');
}
function closeModal() { document.getElementById('modal').classList.add('hidden'); }
</script>
</body>
</html>