/* ============================================================ AppScreens.jsx — telas por dispositivo (papéis distintos) WEB: painel completo (com pipeline/funil/gráfico por módulo) TABLET: visão intermediária focada em um indicador (ring) MOBILE: visão compacta prática (métrica hero + ação da IA) ============================================================ */ const Panel = ({ title, hint, children, style, bodyStyle }) => (
{title && (
{title} {hint && {hint}}
)}
{children}
); const SideItem = ({ icon, active }) => (
); /* ====================== WEB APP ====================== */ const WebAppScreen = ({ m }) => { const isPipe = m.web === 'pipeline', isFun = m.web === 'funnel'; return (
{/* sidebar */}
AR
{AR_MODULES.map(mod => )}
{/* main */}
{/* topbar */}
{m.page}
Mercado São João · matriz
Pergunte à IA…
SJ
{/* content */}
{/* KPIs */}
{m.kpis.map((k, i) => )}
{isPipe ? (
) : isFun ? (
) : (
{m.labels.map(l => {l})}
)}
); }; /* ====================== TABLET ====================== Visão gerencial compacta: anel (indicador-chave) + 2 KPIs + recomendação da IA. Sem repetir o desktop. */ const TabletScreen = ({ m }) => (
AR
{m.page}
{/* anel — indicador-chave */}
{m.ring.label}
{m.ring.sub}
 {/* 2 KPIs em grade larga */}
{m.kpis.slice(0, 2).map((k, i) => )}
); /* ====================== MOBILE ====================== App operacional compacto: métrica-destaque + recomendação da IA. */ const PhoneAppScreen = ({ m }) => (
{/* status bar */}
9:41
{/* header */}
AR
Mercado São João
{m.page}
{/* hero metric */}
{m.hero.l}
{m.hero.v}
{m.hero.sub}
{/* 2 KPIs */}
{m.kpis.slice(1, 3).map((k, i) => )}
{/* bottom nav */}
{[['layout-dashboard', false], ['bar-chart-3', false], ['sparkles', true], ['bell', false], ['user', false]].map(([ic, act], i) => ( act ?
: ))}
); Object.assign(window, { WebAppScreen, TabletScreen, PhoneAppScreen });