Top shows del período

Ordenado por revenue

Show

Venue

Fecha

Revenue

Margen

Margen %

{shows.map((r, i) => { const margPct = r.margin / r.revenue; return (

onOpenShow && onOpenShow(r)} style={{ display: "grid", gridTemplateColumns: cols, padding: "12px 20px", borderTop: i === 0 ? "none" : "1px solid var(--live-border)", alignItems: "center", fontSize: 13, cursor: onOpenShow ? "pointer" : "default", transition: "background 120ms ease-out", }} onMouseEnter={(e) => (e.currentTarget.style.background = "var(--live-row-hover)")} onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")} >

{r.artist}

{r.venue}

{r.date}

{plFmtM(r.revenue)}

{plFmtM(r.margin)}

= 0.30 ? "rgba(91,143,93,0.16)" : "rgba(176,99,99,0.16)", color: margPct >= 0.30 ? "#1F6B2F" : "#8E2323", }}> {plFmtPct(margPct)}

); })}

); } const PL_MONTH_ES = { "01": "Enero", "02": "Febrero", "03": "Marzo", "04": "Abril", "05": "Mayo", "06": "Junio", "07": "Julio", "08": "Agosto", "09": "Septiembre", "10": "Octubre", "11": "Noviembre", "12": "Diciembre", }; function PLArtistFilter({ artists, selected, onChange }) { const [open, setOpen] = useStateHome(false); const [query, setQuery] = useStateHome(""); const ref = React.useRef(null); useEffectHome(() => { if (!open) return; const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", onDoc); return () => document.removeEventListener("mousedown", onDoc); }, [open]); const allOn = selected.length === 0; const label = allOn ? "Todos los artistas" : selected.length === 1 ? selected[0] : `${selected.length} artistas`; const toggle = (a) => { if (selected.includes(a)) onChange(selected.filter((x) => x !== a)); else onChange([...selected, a]); }; const clear = () => onChange([]); const filtered = artists.filter((a) => a.toLowerCase().includes(query.toLowerCase())); return (

{open && (

setQuery(e.target.value)} placeholder="Buscar artista…" style={{ flex: 1, border: "none", outline: "none", background: "transparent", fontFamily: "var(--font-sans)", fontSize: 12.5, color: "var(--live-heading)", }} />

{filtered.length === 0 && (

No coincide ningún artista.

)} {filtered.map((a) => { const checked = selected.includes(a); return ( ); })}

)}

); } // Period buckets — quarter / YTD pull a range of months from PL_SHOWS. function plPeriodRange(periodId) { if (periodId === "ytd-2026") return { start: "2026-01", end: "2026-12", label: "YTD 2026", granularity: "ytd" }; if (periodId === "2026-q1") return { start: "2026-01", end: "2026-03", label: "Q1 2026", granularity: "quarter" }; // Single month const [y, mm] = periodId.split("-"); return { start: periodId, end: periodId, label: `${PL_MONTH_ES[mm]} ${y}`, granularity: "month" }; } function plMatchesPeriod(show, range) { const ym = show.date.slice(0, 7); return ym >= range.start && ym <= range.end; } function plPriorRange(range) { if (range.granularity !== "month") return null; const [y, mm] = range.start.split("-"); const idx = parseInt(mm, 10) - 1; // current month index if (idx === 0) { const py = (parseInt(y, 10) - 1).toString().padStart(4, "0"); const id = `${py}-12`; return { start: id, end: id, label: `Diciembre ${py}` }; } const pmm = idx.toString().padStart(2, "0"); const id = `${y}-${pmm}`; return { start: id, end: id, label: `${PL_MONTH_ES[pmm]} ${y}` }; } function plAggregate(shows) { let revenue = 0, margin = 0; for (const s of shows) { revenue += s.revenue; margin += s.margin; } const costs = revenue - margin; const variables = Math.round(costs * 0.58); const fijos = costs - variables; return { revenue, margin, variables, fijos, count: shows.length }; } function PLPane({ onOpenShow }) { const [periodId, setPeriodId] = useStateHome("2026-03"); const [selectedArtists, setSelectedArtists] = useStateHome([]); const monthOptions = [...PL_SHOWS] .map((s) => s.date.slice(0, 7)) .filter((v, i, a) => a.indexOf(v) === i) .sort() .reverse() .map((id) => { const [y, mm] = id.split("-"); return { id, label: `${PL_MONTH_ES[mm]} ${y}` }; }); const periodOptions = [ { id: "ytd-2026", label: "YTD 2026" }, { id: "2026-q1", label: "Q1 2026" }, ...monthOptions, ]; // Apply the artist filter once — every downstream computation derives from // this filtered list so toggling an artist rolls through KPIs / trend / // statement / top shows in lockstep. const filteredShows = selectedArtists.length === 0 ? PL_SHOWS : PL_SHOWS.filter((s) => selectedArtists.includes(s.artist)); const monthly = plBuildMonthly(filteredShows); const range = plPeriodRange(periodId); const priorR = plPriorRange(range); const periodShows = filteredShows.filter((s) => plMatchesPeriod(s, range)); const priorShows = priorR ? filteredShows.filter((s) => plMatchesPeriod(s, priorR)) : []; const active = plAggregate(periodShows); const prior = priorR ? plAggregate(priorShows) : null; const isEmpty = active.revenue === 0; const totalCosts = active.variables + active.fijos; const priorCosts = prior ? prior.variables + prior.fijos : null; const marginRate = isEmpty ? 0 : active.margin / active.revenue; const priorMarginRate = prior && prior.revenue ? prior.margin / prior.revenue : null; const marginRateDelta = priorMarginRate != null ? { abs: marginRate - priorMarginRate, pct: priorMarginRate === 0 ? 0 : (marginRate - priorMarginRate) / priorMarginRate, positive: marginRate >= priorMarginRate, } : null; // Active id used to highlight the chart bar — month rows always exist in // `monthly`; quarter / YTD selections highlight nothing. const activeMonthlyId = range.granularity === "month" ? range.start : null; const topShows = [...periodShows].sort((a, b) => b.revenue - a.revenue).slice(0, 8).map((s) => ({ id: s.id, artist: s.artist, venue: s.venue, date: s.date.split("-").reverse().join("/"), revenue: s.revenue, margin: s.margin, })); const summary = selectedArtists.length === 0 ? `${active.count} shows en ${range.label}` : `${active.count} shows · ${selectedArtists.length === 1 ? selectedArtists[0] : selectedArtists.length + " artistas"} · ${range.label}`; return (

Business · P&L

Estado de resultados agregado de la productora · {summary}.

{/* KPI ribbon */}

); } // ───────────────────────────────────────────────────────────── // Home surface // ───────────────────────────────────────────────────────────── function AssistantPane({ bannerOpen, setBannerOpen }) { const [query, setQuery] = useStateHome(""); const [status, setStatus] = useStateHome(null); const chips = ["This week's shows", "Pending approvals", "P&L summary", "Unpaid invoices", "Ticket sales today"]; const submit = (prefill) => { const q = prefill || query; if (!q.trim()) return; setQuery(q); setStatus(`Routing "${q}" to Malbec Live…`); setTimeout(() => setStatus(null), 1800); }; return (

{bannerOpen && setBannerOpen(false)} />} {/* Assistant hero — single centered column, all elements aligned to same width */}

Your personal Assistant.

submit()} />

{chips.map((c) => ( submit(c)} /> ))}

{status && (

{status}

)} {/* Three columns — same max-width as input/chips for vertical alignment */}

); } function ShowsHeader() { return (

MalbecLive

); } // ───────────────────────────────────────────────────────────── // Workspace tabs — browser-like tabs across the top of the app. // One tab per open route. Click to activate, X to close. Logo on the right. // ───────────────────────────────────────────────────────────── function WorkspaceTabs({ tabs, activeId, onActivate, onClose }) { useEffectHome(() => { if (window.lucide) window.lucide.createIcons(); }, [tabs.length, activeId]); return (

{tabs.map((t) => { const active = t.id === activeId; return (

onActivate(t.id)} style={{ display: "inline-flex", alignItems: "center", gap: 10, background: active ? "var(--live-card)" : "transparent", border: "1px solid", borderColor: active ? "var(--live-border)" : "transparent", borderBottom: active ? "1px solid var(--live-card)" : "1px solid transparent", marginBottom: -1, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: "10px 14px 10px 16px", whiteSpace: "nowrap", fontSize: 13, fontWeight: active ? 600 : 500, color: active ? "var(--live-heading)" : "var(--live-muted)", cursor: "pointer", fontFamily: "var(--font-sans)", transition: "color 140ms ease-out, background 140ms ease-out", maxWidth: 280, overflow: "hidden", textOverflow: "ellipsis", }} > {t.label}

); })}

{/* Brand lockup top-right */}

MalbecLive

); } function Home({ onBackToOnboarding }) { const initialRoute = new URLSearchParams(location.search).get("route") || "home"; // Map a route to a tab definition const tabFor = (route, project) => { switch (route) { case "home": return { id: "home", route: "home", label: "Home - Personal Assistant" }; case "pl": return { id: "pl", route: "pl", label: "Business - P&L" }; case "project-hub": return { id: "project-hub", route: "project-hub", label: "Project Hub" }; case "project-detail": return { id: `project-${(project || {}).id || "detail"}`, route: "project-detail", label: `Project · ${(project || {}).artist || "Detail"}`, project }; case "shows": return { id: "shows", route: "shows", label: "Shows" }; case "show-detail": return { id: "show-detail", route: "show-detail", label: "Show · Detail" }; case "venues": return { id: "venues", route: "venues", label: "Venues" }; case "calendar": return { id: "calendar", route: "calendar", label: "Calendar" }; case "ticketing": return { id: "ticketing", route: "ticketing", label: "Ticketing" }; // Live Nation parent workspace case "ln-productoras": return { id: "ln-productoras", route: "ln-productoras", label: "Productoras" }; case "ln-pl": return { id: "ln-pl", route: "ln-pl", label: "Business · P&L" }; case "ln-calendar": return { id: "ln-calendar", route: "ln-calendar", label: "Calendar" }; case "ln-ticketing": return { id: "ln-ticketing", route: "ln-ticketing", label: "Ticketing" }; case "ln-productora-detail": return { id: `ln-prod-${(project || {}).id || "detail"}`, route: "ln-productora-detail", label: `P&L · ${(project || {}).name || "Productora"}`, project }; default: return { id: route, route, label: route }; } }; const [workspace, setWorkspaceState] = useStateHome("dale-play"); const initialTab = tabFor(initialRoute); const plTab = tabFor("pl"); const [openTabs, setOpenTabs] = useStateHome( initialRoute === "home" ? [initialTab, plTab] : [initialTab] ); const [activeTabId, setActiveTabId] = useStateHome(initialTab.id); // Switching workspace replaces all open tabs with that workspace's landing page. // Live Nation lands on Productoras; productoras land on Project Hub. const setWorkspace = (wsId) => { setWorkspaceState(wsId); if (wsId === "live-nation") { const t = tabFor("ln-productoras"); setOpenTabs([t]); setActiveTabId(t.id); } else { // Any productora → Project Hub landing const t = tabFor("project-hub"); setOpenTabs([t]); setActiveTabId(t.id); } }; const [tab, setTab] = useStateHome("Home - Personal Assistant"); const [bannerOpen, setBannerOpen] = useStateHome(true); const [selectedProject, setSelectedProject] = useStateHome( initialRoute === "project-detail" ? { id: "p1", artist: "Bad Bunny", venue: "River", date: "13/02/2026" } : null ); // Open or focus a tab for a given route const openRoute = (route, project) => { const t = tabFor(route, project); setOpenTabs((prev) => { if (prev.find((x) => x.id === t.id)) { // update project if needed return prev.map((x) => (x.id === t.id ? { ...x, ...t } : x)); } return [...prev, t]; }); setActiveTabId(t.id); }; // setRoute compatible API for sub-components (sidebar, etc) const setRoute = (route, project) => { if (route === "project-detail" && project) { setSelectedProject(project); } openRoute(route, project || (route === "project-detail" ? selectedProject : null)); }; const closeTab = (id) => { setOpenTabs((prev) => { const idx = prev.findIndex((x) => x.id === id); if (idx === -1) return prev; const next = prev.filter((x) => x.id !== id); if (next.length === 0) { // Always keep at least one tab — fall back to project-hub const fallback = tabFor("project-hub"); setActiveTabId(fallback.id); return [fallback]; } if (id === activeTabId) { const neighbor = next[Math.min(idx, next.length - 1)]; setActiveTabId(neighbor.id); } return next; }); }; const activeTab = openTabs.find((t) => t.id === activeTabId) || openTabs[0]; const route = activeTab ? activeTab.route : "project-hub"; useEffectHome(() => { if (window.lucide) window.lucide.createIcons(); }); return (
openRoute(r)} workspace={workspace} setWorkspace={setWorkspace} />

{route === "ln-productoras" ? ( setWorkspace(p.id)} /> ) : route === "ln-pl" ? ( openRoute("ln-productora-detail", p)} /> ) : route === "ln-productora-detail" ? ( openRoute("ln-pl")} onOpenShow={() => openRoute("show-detail")} /> ) : route === "ln-calendar" ? ( ) : route === "ln-ticketing" ? ( ) : route === "show-detail" ? ( openRoute("shows")} /> ) : route === "project-hub" || route === "project-detail" ? ( { setSelectedProject(p); openRoute("project-detail", p); }} onBack={() => { openRoute("project-hub"); setSelectedProject(null); }} /> ) : route === "venues" ? ( ) : route === "calendar" ? ( ) : route === "ticketing" ? ( ) : route === "shows" ? ( openRoute("show-detail")} /> ) : route === "home" ? ( ) : ( openRoute("show-detail")} /> )} {onBackToOnboarding && route === "home" && ( )}

); } Object.assign(window, { Home });