/* global React, Icon, ProductArt, fmtMXN */ // Admin panel — dashboard, products, orders, customers, coupons, categories, blog, stores, settings const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA } = React; // ============ ADMIN ENTRY ============ function PageAdmin({ route, navigate, user, onLogout }) { const tab = route.tab || 'dashboard'; const setTab = (t) => navigate('admin', { tab: t }); const sections = [ { id: 'dashboard', label: 'Dashboard', icon: Icon.bolt }, { id: 'products', label: 'Productos', icon: Icon.cart }, { id: 'orders', label: 'Pedidos', icon: Icon.truck }, { id: 'customers', label: 'Clientes', icon: Icon.user }, { id: 'coupons', label: 'Cupones', icon: Icon.shield }, { id: 'categories', label: 'Categorías', icon: Icon.chev }, { id: 'blog', label: 'Blog', icon: Icon.search }, { id: 'stores', label: 'Sucursales', icon: Icon.pin }, { id: 'settings', label: 'Configuración', icon: Icon.gear || Icon.shield }]; return (
{tab === 'dashboard' && } {tab === 'products' && } {tab === 'orders' && } {tab === 'customers' && } {tab === 'coupons' && } {tab === 'categories' && } {tab === 'blog' && } {tab === 'stores' && } {tab === 'settings' && }
); } // ============ DASHBOARD ============ function AdminDashboard({ navigate, setTab }) { const kpis = [ { label: 'Ingresos · mes', val: '$2,184,592', delta: '+12.4%', up: true, sub: 'vs. abril 2026' }, { label: 'Pedidos', val: '342', delta: '+8.2%', up: true, sub: '214 entregados · 128 en curso' }, { label: 'Ticket promedio', val: '$6,389', delta: '+3.7%', up: true, sub: 'avg de últimos 30 días' }, { label: 'Conversión', val: '2.84%', delta: '−0.3%', up: false, sub: '4.2K visitas únicas' }]; // Mock revenue chart — last 30 days const revenueData = useMemoA(() => { const points = []; let v = 60000; for (let i = 0; i < 30; i++) { v += Math.sin(i * 0.6) * 12000 + Math.cos(i * 0.3) * 8000 + (Math.random() * 6000 - 3000); v = Math.max(35000, Math.min(110000, v)); points.push(v); } return points; }, []); const maxR = Math.max(...revenueData); const minR = Math.min(...revenueData); const W = 800,H = 220; const path = revenueData.map((v, i) => { const x = i / (revenueData.length - 1) * W; const y = H - (v - minR) / (maxR - minR) * (H - 20) - 10; return `${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`; }).join(' '); const areaPath = path + ` L ${W} ${H} L 0 ${H} Z`; const topProducts = window.BK_DATA.PRODUCTS.slice(0, 5).map((p, i) => ({ ...p, sold: [142, 98, 76, 54, 47][i], revenue: p.price * [142, 98, 76, 54, 47][i] })); const recentOrders = [ { id: 'BKM-928410', customer: 'Carlos M.', total: 14580, status: 'transit', date: 'Hace 12 min' }, { id: 'BKM-928409', customer: 'Andrea L.', total: 3290, status: 'pending', date: 'Hace 28 min' }, { id: 'BKM-928408', customer: 'Roberto P.', total: 8490, status: 'delivered', date: 'Hace 1h' }, { id: 'BKM-928407', customer: 'Mariana V.', total: 26500, status: 'transit', date: 'Hace 2h' }, { id: 'BKM-928406', customer: 'Pablo G.', total: 1890, status: 'delivered', date: 'Hace 3h' }]; return ( <>
Panel general

DASHBOARD

Hola David — esto es lo que pasó hoy.

{kpis.map((k, i) =>
{k.label}
{k.val}
{k.up ? '▲' : '▼'} {k.delta} {k.sub}
)}

Ingresos · 30 días

EN MXN · POR DÍA
{fmtMXN(revenueData.reduce((a, b) => a + b, 0))}
{[0.2, 0.4, 0.6, 0.8].map((p) => )} {revenueData.map((v, i) => { const x = i / (revenueData.length - 1) * W; const y = H - (v - minR) / (maxR - minR) * (H - 20) - 10; return ; })}
14 ABR 13 MAY

Productos top

setTab('products')}>Ver todos →
{topProducts.map((p, i) =>
{String(i + 1).padStart(2, '0')}
{p.name}
{p.sold} vendidos
{fmtMXN(p.revenue)}
)}

Pedidos recientes

ÚLTIMAS 24H
setTab('orders')}>Ver todos →
{recentOrders.map((o) => )}
PedidoClienteEstadoTotalTiempo
{o.id} {o.customer} {{ delivered: 'Entregado', transit: 'En tránsito', pending: 'Procesando' }[o.status]} {fmtMXN(o.total)} {o.date}
⚠ Stock bajo

5 productos por debajo del umbral

Revisa antes de que se agoten — los compradores siguen llegando.

Pendientes de envío

14 pedidos esperando

3 con prioridad express. Promedio de procesamiento: 4h.

Devoluciones

2 abiertas

1 cambio de talla · 1 producto defectuoso (en revisión).

); } // ============ PRODUCTS ============ function AdminProducts() { // Load overrides from localStorage const [overrides, setOverrides] = useStateA(() => { try {return JSON.parse(localStorage.getItem('bk_product_overrides')) || {};} catch {return {};} }); useEffectA(() => { localStorage.setItem('bk_product_overrides', JSON.stringify(overrides)); // Apply to BK_DATA so storefront reflects edits window.BK_DATA.PRODUCTS.forEach((p) => { if (overrides[p.id]) Object.assign(p, overrides[p.id]); }); }, [overrides]); const products = window.BK_DATA.PRODUCTS; const [q, setQ] = useStateA(''); const [catFilter, setCatFilter] = useStateA(''); const [showHidden, setShowHidden] = useStateA(true); const [selected, setSelected] = useStateA(new Set()); const [editing, setEditing] = useStateA(null); // product being edited in drawer const [adding, setAdding] = useStateA(false); const cats = window.BK_DATA.CATEGORIES; const filtered = products.filter((p) => { const norm = (s) => s.toLowerCase(); if (q && !norm(p.name).includes(norm(q)) && !norm(p.brand).includes(norm(q)) && !norm(p.id).includes(norm(q))) return false; if (catFilter && p.cat !== catFilter) return false; if (!showHidden && p.hidden) return false; return true; }); const updateProduct = (id, patch) => { setOverrides((o) => ({ ...o, [id]: { ...(o[id] || {}), ...patch } })); }; const toggleSelect = (id) => { setSelected((s) => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); }; const stockBadge = (stock) => { if (stock === 0) return SIN STOCK; if (stock < 5) return {stock} unid.; return {stock} unid.; }; return ( <>
Catálogo

PRODUCTOS

{products.length} productos · {filtered.length} mostrados

{Icon.search()} setQ(e.target.value)} />
{selected.size > 0 &&
{selected.size} seleccionados
}
{filtered.map((p) => { const isHidden = p.hidden; return ( ); })}
setSelected(e.target.checked ? new Set(filtered.map((p) => p.id)) : new Set())} /> Producto SKU Categoría Precio Stock Estado
toggleSelect(p.id)} />
{p.name}
{p.brand}
 {p.id.toUpperCase()} {cats.find((c) => c.slug === p.cat)?.name} updateProduct(p.id, { price: v })} /> updateProduct(p.id, { stock: v })} after={stockBadge(p.stock)} />
{(editing || adding) && {setEditing(null);setAdding(false);}} onSave={(patch) => { if (editing) updateProduct(editing.id, patch); // For "new" we'd need to push a new product — left as demo setEditing(null);setAdding(false); }} /> } ); } function InlineEditPrice({ value, onChange }) { const [editing, setEditing] = useStateA(false); const [v, setV] = useStateA(value); useEffectA(() => setV(value), [value]); const commit = () => { const n = +v; if (!isNaN(n) && n > 0) onChange(n);else setV(value); setEditing(false); }; if (editing) { return setV(e.target.value)} onBlur={commit} onKeyDown={(e) => e.key === 'Enter' && commit()} />; } return ; } function InlineEditNumber({ value, onChange, after }) { const [editing, setEditing] = useStateA(false); const [v, setV] = useStateA(value); useEffectA(() => setV(value), [value]); const commit = () => { const n = parseInt(v, 10); if (!isNaN(n) && n >= 0) onChange(n);else setV(value); setEditing(false); }; if (editing) { return setV(e.target.value)} onBlur={commit} onKeyDown={(e) => e.key === 'Enter' && commit()} />; } return ; } function ProductEditorDrawer({ product, isNew, cats, onClose, onSave }) { const [form, setForm] = useStateA(product || { name: '', brand: '', cat: 'cascos', price: 0, oldPrice: 0, stock: 0, description: '', tags: [], colors: ['#0A0A0A'], sizes: ['Unica'] }); const update = (k, v) => setForm((f) => ({ ...f, [k]: v })); return ( <>