/* Blackstock — Product page (deep dive on the system) */ const ProductPage = ({ onNavigate, onCTA }) => { return (
); }; /* FullPanelMockup — Clon visual del panel real (panel.blackstock.es). * Sidebar con la jerarquía exacta + topbar Blackstock OS + selector de * pestañas para mostrar Resumen, Pedidos, Inventario, Productos y * Contabilidad con datos demo realistas. */ const FullPanelMockup = () => { const [activeTab, setActiveTab] = React.useState('resumen'); const [openGroup, setOpenGroup] = React.useState('Pedidos'); const navGroups = [ { label: 'Tablero', icon: 'M3 13h8V3H3v10zm10 8h8V11h-8v10zM3 21h8v-6H3v6zM13 3v6h8V3h-8z', tab: 'resumen' }, { label: 'Pedidos', icon: 'M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2 M9 4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2H9V4z', children: [ { label: 'Resumen', tab: 'resumen' }, { label: 'Pedidos', tab: 'pedidos' }, { label: 'Clientes', tab: 'clientes' }, ], }, { label: 'Artículos', icon: 'M16.5 9.4 7.5 4.21 M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z M3.27 6.96 12 12.01l8.73-5.05 M12 22.08V12', children: [ { label: 'Artículos guardados', tab: 'articulos' }, { label: 'Importación pendiente', tab: 'articulos' }, ], }, { label: 'Productos', icon: 'M16.5 9.4 7.5 4.21 M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z', children: [ { label: 'Catálogo', tab: 'productos' }, { label: 'Resumen', tab: 'productos' }, ], }, { label: 'Inventario', icon: 'M3 9h18 M3 15h18 M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z', tab: 'inventario' }, { label: 'Contabilidad', icon: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8', tab: 'contabilidad' }, { label: 'Cuentas', icon: 'M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2 M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z M23 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75', tab: 'cuentas' }, { label: 'Documentación', icon: 'M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z', tab: 'docs' }, { label: 'Guías', icon: 'M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z', tab: 'guias' }, { label: 'Extensión', icon: 'M14 12V8a4 4 0 1 0-8 0v4 M5 12h18 M14 12h7 M5 16h14 M5 20h14', tab: 'extension', external: true }, ]; return (
{/* Glow verde sutil */}
{/* SIDEBAR */} {/* MAIN AREA */}
{/* TOPBAR */}
Blackstock OS
Blackstock Pro
Marc
{/* CONTENT */}
{activeTab === 'resumen' && } {activeTab === 'pedidos' && } {activeTab === 'clientes' && } {activeTab === 'inventario' && } {activeTab === 'productos' && } {activeTab === 'contabilidad' && } {activeTab === 'cuentas' && } {(activeTab === 'docs' || activeTab === 'guias' || activeTab === 'extension' || activeTab === 'articulos') && }
); }; /* ─── Sub-vistas del FullPanelMockup ─── */ const PanelSummaryCard = ({ title, value, icon }) => (
{title}
{value}
{icon}
); const HelpIcon = () => ( ); const PanelResumen = () => (
{/* Filtros */}

Resumen

1 may 2026 — 8 may 2026
{/* 5 SummaryCards — números aterrizados, semana de un reseller real */}
} /> } /> } /> } /> } />
{/* Charts */}
Ventas a lo largo del tiempo
1 may — 8 may
Número de ventas
1 may — 8 may
16
{[3, 4, 1, 5, 2, 4, 3, 2].map((v, i) => (
))}
{/* 3 col: Mejores horas, Pedidos por país, Top */}
Mejores horas
1 may — 8 may
{Array.from({ length: 42 }).map((_, i) => { const intensities = [0.05, 0.10, 0.18, 0.32, 0.50, 0.72, 0.90]; const v = intensities[Math.floor(Math.random()*7)]; return
; })}
Pedidos por país
1 may — 8 may
{[ { flag: '🇪🇸', code: 'ES', n: 9 }, { flag: '🇫🇷', code: 'FR', n: 4 }, { flag: '🇮🇹', code: 'IT', n: 2 }, { flag: '🇩🇪', code: 'DE', n: 1 }, ].map((c, i) => (
{c.flag}
{c.code}
{c.n}
))}
Top artículos
1 may — 8 may
{[ ['Carhartt Detroit M', '4 ud'], ['Acne scarf wool', '3 ud'], ['Birkenstock Boston 42', '3 ud'], ['Stüssy 8-Ball 90s', '2 ud'], ['Levi\'s 501 MIUSA', '2 ud'], ].map((r, i) => (
{i+1}
{r[0]}
{r[1]}
))}
); const PanelPedidosTable = () => (

Pedidos de Vinted

16 pedidos en los últimos 7 días
FechaTítuloEstadoSeguimientoEnviar antesCuentaCliente
{[ ['8 may', 'Carhartt Detroit M', 'Pagado', 'CE 832 419', '10 may', 'archive.dpt', 'Aitana V.', 'ok'], ['8 may', 'Acne scarf wool', 'Listo enviar', 'Pendiente', 'Hoy', 'nordic.studio', 'Iker S.', 'wait'], ['7 may', 'Birkenstock Boston 42', 'Enviado', 'CE 832 401', '–', 'archive.dpt', 'Marina C.', 'ship'], ['7 may', 'Levi\'s 501 MIUSA W32', 'Enviado', 'DH 994 102', '–', 'maison.eu', 'Pol M.', 'ship'], ['6 may', 'Stüssy 8-Ball 90s', 'Pagado', 'CE 832 388', '8 may', 'nordic.studio', 'Júlia R.', 'ok'], ['6 may', 'Diesel archive denim 30', 'Incidencia', 'Bloqueado', 'Urgente', 'archive.dpt', 'Bruno F.', 'alert'], ].map((r, i) => (
{r[0]} {r[1]} {r[2]} {r[3]} {r[5]} {r[5] !== r[6] ? r[6] : ''} {r[6]}
))}
); const PanelClientes = () => (

Clientes

Histórico de compradores únicos
{[ ['Aitana V.', '@aitanavc', '3 pedidos', '184€'], ['Iker S.', '@iker.s', '2 pedidos', '156€'], ['Marina C.', '@marina_c', '2 pedidos', '128€'], ['Pol M.', '@polm', '2 pedidos', '108€'], ['Júlia R.', '@julia_r', '2 pedidos', '96€'], ].map((r, i, arr) => (
{r[0][0]}
{r[0]} {r[1]} {r[2]} {r[3]}
))}
); const PanelInventario = () => (

Inventario

Stock unificado entre cuentas · 7 referencias
} /> } /> } /> } />
{[ ['Carhartt Detroit M', 4, 6, 67, ''], ['Acne scarf wool', 1, 4, 25, 'crit'], ['Birkenstock Boston 42', 2, 5, 40, 'warn'], ['Levi\'s 501 MIUSA W32', 3, 5, 60, ''], ['Stüssy 8-Ball 90s', 6, 8, 75, ''], ['Diesel archive denim 30', 2, 5, 40, 'warn'], ['Salomon XT-6 41', 0, 3, 0, 'crit'], ].map((it, i) => (
{it[0]}
{it[1]}/{it[2]} {it[4]==='crit' ? 'Crítico' : it[4]==='warn' ? 'Bajo' : 'OK'}
))}
); const PanelProductos = () => (

Catálogo de productos

96 productos publicados · 3 cuentas
{[ ['Carhartt Detroit M', '92€', 4, '@archive.dpt'], ['Acne scarf wool', '78€', 1, '@nordic.studio'], ['Birkenstock Boston 42', '65€', 2, '@maison.eu'], ['Levi\'s 501 MIUSA W32', '54€', 3, '@archive.dpt'], ['Stüssy 8-Ball 90s', '48€', 6, '@nordic.studio'], ['Our Legacy denim 33', '95€', 1, '@maison.eu'], ].map((p, i) => (
{p[0]}
{p[3]} {p[1]} · {p[2]} ud
))}
); const PanelContabilidad = () => (

Contabilidad

Mayo 2026 · todas las cuentas
} /> } /> } /> } />
Desglose de gastos
{[['Coste mercancía', '2.140€'], ['Comisiones plataforma', '360€'], ['Envíos', '320€'], ['IVA repercutido', '120€'], ['Suscripciones', '40€']].map((r, i, arr) => (
{r[0]} {r[1]}
))}
Beneficio por cuenta
{[['archive.dpt', '+ 1.940€'], ['nordic.studio', '+ 870€'], ['maison.eu', '+ 450€']].map((r, i, arr) => (
{r[0]} {r[1]}
))}
); const PanelCuentas = () => (

Cuentas conectadas

3 de 4 disponibles · plan Pro
{[ ['archive.dpt', 'Cuenta principal · ES — vintage / archive', 38, 'Conectada'], ['nordic.studio', 'Cuenta secundaria · FR/IT — basics premium', 32, 'Conectada'], ['maison.eu', 'Drop fines de semana · ES — workwear', 26, 'Conectada'], ].map((c, i) => (
{c[0][0].toUpperCase()}
{c[0]}
{c[1]}
{c[2]} productos
{c[3]}
))}
); const PanelPlaceholder = ({ name }) => (
Sección "{name}" — abre la demo completa para ver el contenido.
); const FeatureSplit = ({ tag, title, body, bullets, right, reverse }) => (
{tag}

{title}

{body}

{bullets.map((b, j) => (
{b}
))}
{right}
); const BotMockup = () => (
BOT ANÁLISIS · LIVE
> analizar "carhartt detroit jacket vintage"
✦
VEREDICTO: compra. Publica a 89€, demanda estable en M/L sobre las 4 últimas semanas.
); const ChatMockup = () => (
@aitanavc IA AUTO
{[ { from: 'them', text: 'Hola, ¿lo dejarías a 70€?' }, { from: 'us', text: 'Hola Aitana 🖤 a 70€ no me sale, lo mínimo serían 82€ con envío incluido. ¿Te encaja?' }, { from: 'them', text: '¿Y 78€?' }, { from: 'us', text: 'Cerramos en 80€. Te lanzo la oferta ahora.' }, { from: 'system', text: '✦ Oferta aplicada · 80€ · Pendiente respuesta' }, ].map((m, i) => (
{m.text}
))}
); const MultiAccountMockup = () => (
{[ { n: '@archive.dpt', s: '118€', d: '4 vendidos', c: 'var(--acid)' }, { n: '@nordic.studio', s: '76€', d: '2 vendidos', c: 'var(--fg)' }, { n: '@maison.eu', s: '54€', d: '1 vendido', c: 'var(--fg)' }, { n: '@boldface', s: '32€', d: '1 vendido', c: 'var(--fg)' }, ].map((a, i) => (
{a.n}
{a.s}
{a.d}
))}
); Object.assign(window, { ProductPage, FullPanelMockup, FeatureSplit, BotMockup, ChatMockup, MultiAccountMockup, });