// Desktop screens — 1440px wide const DESKTOP_W = 1440; const DESKTOP_H = 900; window.DESKTOP_W = DESKTOP_W; window.DESKTOP_H = DESKTOP_H; function AdminDesktop({ onNav, userData, theme, onToggleTheme, fetchStats, stats: appStats = null }) { const [adminStats, setAdminStats] = React.useState(null); const [loading, setLoading] = React.useState(false); React.useEffect(() => { let alive = true; if (!fetchStats) return; setLoading(true); fetchStats().then((data) => { if (!alive) return; setAdminStats(data); setLoading(false); }); return () => { alive = false; }; }, [fetchStats]); return (
{[ { label: 'Usuarios totales', value: adminStats?.total_users ?? '—', color: SK.gold }, { label: 'Nuevos (7d)', value: adminStats?.new_users_7d ?? '—', color: SK.green }, { label: 'Nuevos (24h)', value: adminStats?.new_users_24h ?? '—', color: SK.coral }, ].map(s => (
{s.value}
{s.label}
))}
uso
Promedios
Estampas promedio {adminStats?.avg_have ?? '—'}
Repetidas promedio {adminStats?.avg_duplicates ?? '—'}
Usuarios con colección {adminStats?.users_with_collection ?? '—'}
estado
Marketplace
Publicaciones activas {adminStats?.market_active ?? '—'}
Publicaciones totales {adminStats?.market_total ?? '—'}
{loading && (
Cargando estadísticas...
)}
); } // Sidebar function DesktopSidebar({ active, onNav, stats = null }) { const [hovId, setHovId] = React.useState(null); const items = [ { id: 'home', label: 'Inicio', Icon: Icon.Home }, { id: 'album', label: 'Álbum', Icon: Icon.Grid }, { id: 'trade', label: 'Intercambios', Icon: Icon.Swap }, { id: 'marketplace', label: 'Marketplace', Icon: Icon.Store }, { id: 'profile', label: 'Perfil', Icon: Icon.User }, ]; return (
{items.map(it => { const on = active === it.id; const hov = !on && hovId === it.id; return ( ); })}
PROGRESO
{(stats?.have ?? 0)}/{(stats?.total ?? 992)}
); } function DesktopTopbar({ title, sub, onCmdOpen, userData }) { const [unreadCount, setUnreadCount] = React.useState(() => window.getUnreadCount ? window.getUnreadCount() : 0); const [bellOpen, setBellOpen] = React.useState(false); const [notifications, setNotifications] = React.useState(() => window.readNotifications ? window.readNotifications() : []); const safeName = userData?.name || userData?.username || null; const initials = safeName ? safeName.split(' ').filter(Boolean).map(w => w[0]).join('').slice(0, 2).toUpperCase() : '?'; const firstName = safeName ? safeName.split(' ')[0] : 'Yo'; const [hovUser, setHovUser] = React.useState(false); React.useEffect(() => { const update = () => { setUnreadCount(window.getUnreadCount ? window.getUnreadCount() : 0); setNotifications(window.readNotifications ? window.readNotifications() : []); }; window.addEventListener('stickio:notification-added', update); window.addEventListener('stickio:notification-updated', update); return () => { window.removeEventListener('stickio:notification-added', update); window.removeEventListener('stickio:notification-updated', update); }; }, []); const handleLogout = async () => { if (window.supabase?.auth) await window.supabase.auth.signOut(); }; return (
{sub}
{title}
e.currentTarget.style.borderColor = SK.gold + '66'} onMouseLeave={e => e.currentTarget.style.borderColor = SK.border} > Buscar estampas... ⌘K
{bellOpen && (
setBellOpen(false)} > {notifications.length === 0 ? ( ) : notifications.slice(0, 20).map((n, idx) => (
{(window.NOTIFICATION_TYPES?.[n.type] || {}).icon || '🔔'}
{n.text}
{window.timeAgo ? window.timeAgo(n.ts) : ''}
))}
)}
setHovUser(true)} onMouseLeave={() => setHovUser(false)} >
{firstName}
{hovUser && (
)}
); } function DesktopShell({ children, active, onNav, title, sub, theme, onToggleTheme, userData, stats = null }) { const [cmdOpen, setCmdOpen] = React.useState(false); React.useEffect(() => { const onKey = (e) => { if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); setCmdOpen(v => !v); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); return (
setCmdOpen(true)} userData={userData}/>
{children}
{cmdOpen && setCmdOpen(false)}/>}
); } const timeAgo = window.timeAgo; function activityIcon(type) { const map = { add: 'check', dup: 'dup', remove: 'remove', listing: 'listing', closed: 'closed', }; return map[type] || 'check'; } function activityText(event) { const cfg = window.ACTIVITY_TYPES?.[event.type]; if (!cfg?.label) return `Movimiento: ${event.id || ''}`; return cfg.label(event.id || ''); } function extractRecentStickerIds(log = []) { const ids = []; const seen = new Set(); for (const ev of log) { if (ev.type !== 'add' && ev.type !== 'dup') continue; if (!ev.id || seen.has(ev.id)) continue; ids.push(ev.id); seen.add(ev.id); if (ids.length >= 3) break; } return ids; } function ActivityRow({ icon, text, time, last = false }) { const IconMap = { check: , dup: , remove: , listing: , closed: , }; return (
{IconMap[icon] || IconMap.check}
{text}
{time}
); } // ───────────────────────────────────────────────────────────── // DESKTOP — Dashboard // ───────────────────────────────────────────────────────────── function DashboardDesktop({ onNav, onNavToCountry, stats, collection = {}, activityLog = [], theme, onToggleTheme, userData }) { const { have, total, missing, duplicates } = stats; const pct = ((have / total) * 100).toFixed(1); const topCountries = React.useMemo(() => { const withProgress = COUNTRIES.map(c => { const haveCount = Array.from({ length: c.total }, (_, i) => (collection[`${c.code}${String(i + 1).padStart(2, '0')}`] || 0) > 0 ? 1 : 0 ).reduce((a, b) => a + b, 0); return { ...c, have: haveCount, pct: c.total ? haveCount / c.total : 0, }; }); const hasAnyProgress = withProgress.some(c => c.have > 0); if (!hasAnyProgress) { return [...withProgress] .sort((a, b) => a.group.localeCompare(b.group) || a.name.localeCompare(b.name)) .slice(0, 6); } return [...withProgress] .sort((a, b) => { if (b.pct !== a.pct) return b.pct - a.pct; if (b.have !== a.have) return b.have - a.have; return a.group.localeCompare(b.group) || a.name.localeCompare(b.name); }) .slice(0, 6); }, [collection]); const recentStickerItems = React.useMemo(() => { const idsFromLog = extractRecentStickerIds(activityLog); const fallbackIds = Object.entries(collection) .filter(([, qty]) => qty >= 1) .map(([id]) => id) .reverse(); const ids = [...idsFromLog]; for (const id of fallbackIds) { if (ids.length >= 3) break; if (!ids.includes(id)) ids.push(id); } return ids.slice(0, 3).map(id => { const qty = collection[id] || 1; const info = window.stickerInfoFromId ? window.stickerInfoFromId(id) : { num: 0, country: null, label: id }; return { id, qty, info }; }); }, [activityLog, collection]); return (
{/* Top grid */}
{/* Hero */}
MUNDIAL 2026
{have}
/ {total}
{pct}%
tu progreso
{have === 0 ? 'Empieza tu álbum' : pct >= 100 ? '¡Álbum completo!' : pct >= 75 ? '¡Casi lo tienes!' : pct >= 25 ? 'Vas por buen camino' : '¡Buen comienzo!'}
Te faltan {missing} estampas para completar el álbum.
{/* Stats stack */}
0 ? `${duplicates} para intercambio` : null}/>
{/* Countries row */}
continúa coleccionando
Por selección
{topCountries.map(c => )}
{/* Activity + featured */}
actividad reciente
Últimos movimientos
{activityLog.length === 0 ? ( ) : activityLog.slice(0, 5).map((ev, idx, arr) => ( ))}
recientes
Últimas marcadas
{recentStickerItems.length === 0 ? (
) : (
{recentStickerItems.map(item => (
= 2 ? 'duplicate' : 'have'} count={item.qty} size="sm" />
{item.id}
))}
)}
); } function DashboardTeamCard({ country, onNavToCountry }) { const pct = Math.round(((country.have || 0) / country.total) * 100); return ( ); } function BigStat({ label, value, color, IconC, trend }) { return (
{label}
{value}
{trend}
); } function EspecialesRailEntry({ active, onSelect }) { const [hov, setHov] = React.useState(false); return ( ); } function CocaColaRailEntry({ active, onSelect }) { const [hov, setHov] = React.useState(false); return ( ); } function DupConfirmModal({ sticker, qty, onConfirm, onCancel, onRemove }) { return (
e.stopPropagation()}>
Agregar repetida
Ya tenés {qty} de{' '} #{String(sticker.num).padStart(3,'0')} {sticker.player}.
ID: {sticker.id}
); } // ───────────────────────────────────────────────────────────── // DESKTOP — Album // ───────────────────────────────────────────────────────────── function AlbumDesktop({ onNav, initialCountry = null, theme, onToggleTheme, collection = {}, setCollection = () => {}, onStickerChange = () => {}, userData, stats = null }) { const [filter, setFilter] = React.useState('Todos'); const [activeCountry, setActiveCountry] = React.useState(initialCountry || 'MX'); const [activeGroup, setActiveGroup] = React.useState('Todos'); const [animateCountry, setAnimateCountry] = React.useState(false); const [animateFilter, setAnimateFilter] = React.useState(false); const [hovFilter, setHovFilter] = React.useState(null); const [hovCountry, setHovCountry] = React.useState(null); const [hovGroup, setHovGroup] = React.useState(null); const [dupModal, setDupModal] = React.useState(null); const haveByCountry = React.useMemo(() => { const map = {}; COUNTRIES.forEach(c => { map[c.code] = Array.from({ length: 20 }, (_, i) => (collection[`${c.code}${String(i + 1).padStart(2, '0')}`] || 0) > 0 ? 1 : 0 ).reduce((a, b) => a + b, 0); }); return map; }, [collection]); const GROUPS = ['Todos', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L']; const visibleCountries = activeGroup === 'Todos' ? COUNTRIES : COUNTRIES.filter(c => c.group === activeGroup); const isEspeciales = activeCountry === '__especiales__'; const isCoca = activeCountry === '__coca_cola__'; const country = (!isEspeciales && !isCoca) ? (COUNTRIES.find(c => c.code === activeCountry) || COUNTRIES[0]) : { flag: isCoca ? '🥤' : '🏆', name: isCoca ? 'Coca-Cola' : 'Copa & Sedes 2026', total: isCoca ? 14 : 20, group: isCoca ? 'CC' : 'FWC', color: isCoca ? '#F40009' : SK.gold }; const stickers = isEspeciales ? (window.specialStickers || specialStickers)() : isCoca ? (window.ccStickers || ccStickers)() : (window.stickersFor || stickersFor)(country); const getQty = (s) => s.id in collection ? collection[s.id] : 0; const handleStickerClick = (s) => { const qty = getQty(s); if (qty === 0) { setCollection(prev => ({ ...prev, [s.id]: 1 })); onStickerChange(s.id, 1); } else { setDupModal(s); } }; const handleAddDuplicate = () => { setCollection(prev => { const current = prev[dupModal.id] ?? getQty(dupModal); const nextQty = current + 1; onStickerChange(dupModal.id, nextQty); return { ...prev, [dupModal.id]: nextQty }; }); setDupModal(null); }; const handleRemoveOne = () => { const current = dupModal.id in collection ? collection[dupModal.id] : getQty(dupModal); const nextQty = Math.max(0, current - 1); setCollection(prev => ({ ...prev, [dupModal.id]: nextQty })); onStickerChange(dupModal.id, nextQty); setDupModal(null); }; const mergedStickers = stickers.map(s => { const qty = s.id in collection ? collection[s.id] : 0; return { ...s, state: qty === 0 ? 'missing' : qty === 1 ? 'have' : 'duplicate', count: qty }; }); const filterFn = (s) => { if (filter === 'Tengo') return s.state === 'have' || s.state === 'duplicate'; if (filter === 'Falta') return s.state === 'missing'; if (filter === 'Repetidas') return s.state === 'duplicate'; return true; }; const filtered = mergedStickers.filter(filterFn); const activeHave = React.useMemo( () => mergedStickers.reduce((acc, s) => acc + (s.count > 0 ? 1 : 0), 0), [mergedStickers] ); const activeDuplicates = React.useMemo( () => mergedStickers.reduce((acc, s) => acc + (s.count >= 2 ? 1 : 0), 0), [mergedStickers] ); const handleGroupChange = (g) => { setActiveGroup(g); const first = g === 'Todos' ? COUNTRIES[0] : COUNTRIES.find(c => c.group === g); if (first) setActiveCountry(first.code); }; React.useEffect(() => { setAnimateCountry(true); const id = setTimeout(() => setAnimateCountry(false), 180); return () => clearTimeout(id); }, [activeCountry]); React.useEffect(() => { setAnimateFilter(true); const id = setTimeout(() => setAnimateFilter(false), 160); return () => clearTimeout(id); }, [filter]); React.useEffect(() => { if (initialCountry) setActiveCountry(initialCountry); }, [initialCountry]); return (
{/* Country rail */}
{/* Group filter */}
Grupo
{GROUPS.map(g => { const on = activeGroup === g; const hov = !on && hovGroup === g; return ( ); })}
Selecciones {activeGroup !== 'Todos' ? `· Grupo ${activeGroup}` : `· ${COUNTRIES.length}`}
{/* Especiales entry */} {activeGroup === 'Todos' && setActiveCountry('__especiales__')}/>} {visibleCountries.map(c => { const on = c.code === activeCountry; const hov = !on && hovCountry === c.code; const haveCount = haveByCountry[c.code] ?? c.have; const pct = Math.round((haveCount / c.total) * 100); return ( ); })} {/* CC Coca-Cola entry — last section */} {activeGroup === 'Todos' && setActiveCountry('__coca_cola__')}/>}
{/* Main */}
{/* Country header */}
{country.flag}
{isEspeciales ? 'FWC · 000–019' : isCoca ? 'CC · 001–014 · Patrocinador' : `Grupo ${country.group} · Selección`}
{country.name}
{activeHave}/{country.total}
{[ { l: 'Tengo', v: activeHave, c: SK.gold }, { l: 'Faltan', v: country.total - activeHave, c: SK.textMute }, { l: 'Repetidas', v: activeDuplicates, c: SK.coral }, ].map(s => (
{s.v}
{s.l}
))}
{/* Filters */}
{['Todos', 'Tengo', 'Falta', 'Repetidas', 'Especiales'].map(f => { const on = filter === f; const hov = !on && hovFilter === f; return ( ); })}
{/* Grid — 6 cols desktop, or empty state */} {filtered.length === 0 ? (
{filter === 'Repetidas' ? '📦' : filter === 'Falta' ? '🏆' : '🔍'}
{filter === 'Repetidas' && 'Sin repetidas aquí'} {filter === 'Falta' && '¡Colección completa!'} {filter !== 'Repetidas' && filter !== 'Falta' && 'Sin estampas para mostrar'}
{filter === 'Repetidas' && `No tienes repetidas de ${country.name}. ¡Buen trabajo!`} {filter === 'Falta' && `Tienes todas las estampas de ${country.name}.`} {filter !== 'Repetidas' && filter !== 'Falta' && 'Prueba con otro filtro o selecciona otro país.'}
{filter !== 'Todos' && ( )}
) : (
{filtered.map(s => handleStickerClick(s)}/>)}
)}
{dupModal && ( setDupModal(null)} onRemove={handleRemoveOne} /> )} ); } Object.assign(window, { DashboardDesktop, AlbumDesktop, AdminDesktop, DesktopShell, DESKTOP_W, DESKTOP_H });