/* screens-overview.jsx — Home, Visão Geral, Fechamento do Dia, Análise de Produtos */
// Deterministic mock data — no client refs
const MOCK = (() => {
const series = (n, base, vol = 0.15, trend = 0) =>
Array.from({ length: n }, (_, i) => Math.max(0, base * (1 + trend * i / n + (Math.sin(i * 1.3) + Math.cos(i * 2.1)) * vol)));
return {
salesTrend: series(30, 48000, 0.18, 0.4),
salesLY: series(30, 42000, 0.16, 0.25),
storesKPI: PH.stores.slice(0, 6).map((s, i) => ({
cod: i + 1,
loja: s,
vlr: 220000 - i * 28000 + (i % 2 ? 14000 : 0),
qtd: 1400 - i * 160,
yoy: [12.4, 8.7, -2.1, 5.6, -6.3, 2.0][i],
mkp: 2.42 + i * 0.04,
pa: 1.62 - i * 0.03,
tkm: 412 + i * 8,
pm: 255 - i * 4,
cli: 540 - i * 60,
})),
weekly: ["S1","S2","S3","S4","S5","S6","S7","S8","S9","S10","S11","S12"].map((w, i) => ({
label: w, atual: 180000 + i * 7000 + (i % 3) * 9000, prev: 165000 + i * 5500 + (i % 4) * 7000,
})),
topProducts: PH.products.slice(0, 8).map((p, i) => ({
rank: i + 1,
nome: p,
vlr: 92000 - i * 8400,
qtd: 280 - i * 22,
yoy: [22.4, 18.1, 11.3, 7.2, 3.5, -1.8, -5.6, -11.0][i],
})),
sellers: ["Operadora A","Operadora B","Operadora C","Operadora D","Operadora E"].map((n, i) => ({
nome: n, loja: PH.stores[i % 4], vlr: 88000 - i * 7400, yoy: [16.8, 12.3, 5.4, -1.2, -8.6][i],
})),
forecast: Array.from({ length: 16 }, (_, i) => ({
sem: `S${i + 1}`,
real: i < 9 ? 180000 + i * 7000 + (i % 3) * 9000 : null,
previsto: i >= 7 ? 195000 + i * 6500 + Math.sin(i) * 8000 : null,
lo: i >= 7 ? 175000 + i * 6500 + Math.sin(i) * 8000 : null,
hi: i >= 7 ? 215000 + i * 6500 + Math.sin(i) * 8000 : null,
})),
coverage: PH.stores.slice(0, 6).map((s, i) => ({
loja: s,
rupturaPct: [3.2, 4.8, 7.1, 2.4, 9.2, 5.6][i],
coberturaDias: [42, 28, 18, 56, 14, 32][i],
skusCriticos: [12, 18, 27, 8, 41, 19][i],
faturamentoRisco: [12400, 28900, 51200, 8200, 78400, 31800][i],
})),
};
})();
// ============================================================
// HOME — Executive summary with HealthScore + Narrative + Radar + dual YoY
// ============================================================
function HomeScreen({ onNavigate }) {
const { period, setPeriod, mult: periodMult } = usePeriod();
// Tanto Atual quanto LY escalam pelo mesmo multiplicador (pra YoY permanecer ~constante)
const totalVendas = MOCK.salesTrend.reduce((a, b) => a + b, 0) * periodMult;
const totalLY = MOCK.salesLY.reduce((a, b) => a + b, 0) * periodMult;
// YoY agora oscila levemente conforme periodo (Dia volátil, YTD estável)
const yoyBase = ((totalVendas - totalLY) / totalLY) * 100;
const yoyAdjust = { "Dia": -3.2, "Semana": 1.4, "Mês": 0, "YTD": 2.1 }[period] || 0;
const yoy = yoyBase + yoyAdjust;
// Multiplicadores derivados pros KPIs e gráficos
const pecasTotal = Math.round(28412 * periodMult);
const ticketMedio = 412 + (period === "Dia" ? -8 : period === "Semana" ? -3 : period === "YTD" ? 12 : 0);
const mkpValue = (2.42 + (period === "Dia" ? -0.04 : period === "Semana" ? -0.02 : period === "YTD" ? 0.06 : 0)).toFixed(2);
// KPIs vs anterior também variam por período
const vsPrev = { "Dia": 3.2, "Semana": 6.8, "Mês": 8.4, "YTD": 11.2 }[period] || 8.4;
// Radar values escalam levemente (algumas dimensões reagem mais que outras)
const radarValue = {
vendas: Math.round(87 * (period === "Dia" ? 0.92 : period === "Semana" ? 0.96 : period === "YTD" ? 1.04 : 1)),
meta: Math.round(74 * (period === "Dia" ? 0.88 : period === "Semana" ? 0.94 : period === "YTD" ? 1.08 : 1)),
mkp: Math.round(92 * (period === "Dia" ? 0.96 : 1)),
ticket: Math.round(81 * (period === "Dia" ? 0.93 : period === "YTD" ? 1.03 : 1)),
conv: Math.round(68 * (period === "Dia" ? 0.85 : period === "Semana" ? 0.92 : period === "YTD" ? 1.08 : 1)),
pa: Math.round(78 * (period === "Dia" ? 0.94 : 1)),
};
const now = new Date();
const greeting = now.getHours() < 12 ? "Bom dia" : now.getHours() < 18 ? "Boa tarde" : "Boa noite";
// Storytelling pra Narrative do dia varia conforme periodo
const narrativePeriodLabel = { "Dia": "hoje", "Semana": "essa semana", "Mês": "nos últimos 30 dias", "YTD": "no ano até aqui" }[period] || "nos últimos 30 dias";
const narrativeMetaPct = { "Dia": "Meta diária 102% atingida", "Semana": "Meta semanal 96% atingida", "Mês": "A meta do mês está em 87% atingida, com 6 dias úteis restantes", "YTD": "Meta anual 84% atingida com 7 meses restantes" }[period] || "Meta atingida";
return (
{/* Greeting + period pills */}
{now.toLocaleDateString("pt-BR", { month: "long", year: "numeric" })}
{greeting}, Operador . Aqui está o resumo de hoje.
{/* HealthScore + Narrative side by side */}
{GLOSSARY.health.title}
{GLOSSARY.health.desc}
}
/>
onNavigate && onNavigate("fechamento")}>Ver detalhe}
>
Vendas {fmt.money(totalVendas, { compact: true })} {narrativePeriodLabel} —{" "}
= 0 ? "text-[var(--pos)]" : "text-[var(--neg)]"}`}>{yoy >= 0 ? "+" : ""}{yoy.toFixed(1)}% vs. 2025 e{" "}
+{vsPrev.toFixed(1)}% vs. período anterior. {narrativeMetaPct}.
125 SKUs em ruptura colocam{" "}
{fmt.money(210900, { compact: true })} em risco essa semana —
priorize Filial 05 e Filial 03 .
{/* Performance Radar + Sales trend */}
Atual vs. meta · todas dimensões
2026 vs. mesmo período de 2025
w.label)}
series={[
{ name: "Atual", data: MOCK.weekly.map(w => w.atual * periodMult), color: "var(--accent)" },
{ name: "LY", data: MOCK.weekly.map(w => w.prev * periodMult), color: "var(--accent-2)", dashed: true },
]}
height={250}
/>
{/* 3-col content */}
{/* Ranking lojas */}
onNavigate("visao")} className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)] hover:text-[var(--accent)] flex items-center gap-1">
Detalhar
{MOCK.storesKPI.slice(0, 5).map((s, i) => (
{i + 1}
{s.loja}
{fmt.int(s.qtd)} peças
{fmt.money(s.vlr, { compact: true })}
))}
{/* Top produtos */}
onNavigate("produtos")} className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)] hover:text-[var(--accent)] flex items-center gap-1">
Ver todos
{MOCK.topProducts.slice(0, 6).map((p) => (
{p.rank.toString().padStart(2, "0")}
{p.nome}
{fmt.int(p.qtd)} pç
{fmt.money(p.vlr, { compact: true })}
))}
{/* WOW · módulos de inteligência */}
WOW
onNavigate("forecast")} className="w-full text-left p-3 rounded-xl border border-[var(--border)] bg-[var(--panel-2)] hover:border-[var(--accent)] transition-colors">
{fmt.money(2890000, { compact: true })}
próximas 4 semanas · horizon 30d
onNavigate("ruptura")} className="w-full text-left p-3 rounded-xl border border-[var(--border)] bg-[var(--panel-2)] hover:border-[var(--accent)] transition-colors">
{fmt.pct(5.4)}
faturamento em risco · {fmt.money(210900, { compact: true })}
{/* Header bar with narrative + period pills */}
Performance comercial · todas filiais
Vendas +12,4% vs. 2025, com{" "}
Filial 01 liderando o ranking.
Filial 05 e Filial 03 negativas — atenção.
{/* Filter bar — dropdowns funcionais com checkboxes */}
Filtros
{FILTER_DEFS.map((def) => (
setOpenFilter(openFilter === def.id ? null : def.id)}
className={`badge cursor-pointer transition-colors ${openFilter === def.id ? "border-[var(--accent)] text-[var(--accent)]" : "hover:border-[var(--accent)]"}`}
>
{def.label}: {filterLabel(def)}
{openFilter === def.id && (
<>
setOpenFilter(null)} />
{def.label}
setFilters((s) => ({ ...s, [def.id]: filters[def.id].length === def.options.length ? [] : [...def.options] }))}
className="text-[10px] text-[var(--accent)] hover:underline"
>
{filters[def.id].length === def.options.length ? "Limpar" : "Todos"}
{def.options.map((opt) => {
const checked = filters[def.id].includes(opt);
return (
toggleFilterOption(def.id, opt)}
className="w-full px-3 py-2 flex items-center gap-2.5 hover:bg-[var(--panel-2)] text-left text-[12px]"
>
{checked &&
{opt}
);
})}
)}
))}
{
setFilters({
filial: [...FILTER_DEFS[0].options],
regiao: [...FILTER_DEFS[1].options],
grupo: [...FILTER_DEFS[2].options],
estacao: [...FILTER_DEFS[3].options],
});
toast.push({ tone: "info", title: "Filtros limpos", desc: "Visualizando todas filiais" });
}}>Limpar
toast.push({ tone: "success", title: "XLSX exportado com sucesso", desc: "Arquivo salvo em Downloads" })}>Exportar
toast.push({ tone: "success", title: "Filtros aplicados", desc: "Dados atualizados" })}>Aplicar
{/* KPI cards + coachmark */}
{coachmarkOpen && (
)}
{KPI_OPTS.map((k) => {
const total = MOCK.storesKPI.reduce((acc, s) => acc + s[k.id], 0) * (k.format === "num" ? 1 : periodMult);
return (
{ setActiveKPI(k.id); setCoachmarkOpen(false); }}
className={`kpi text-left transition-all ${activeKPI === k.id ? "border-[var(--accent)] kpi-accent ring-2 ring-[var(--accent)] ring-opacity-30" : "hover:border-[var(--accent)]"}`}
>
{k.label}
{k.info &&
{k.info.title}
{k.info.desc}
} />}
{k.format === "money" ? fmt.money(total, { compact: true }) : k.format === "int" ? fmt.int(total) : fmt.num(total / MOCK.storesKPI.length, 2)}
x.id === k.id)]} />
);
})}
{/* Chart + Table grid */}
{KPI_OPTS.find(k => k.id === activeKPI).label} por filial {chartMetric === "yoy" && · %YoY }
Ordenado por código de loja · cor indica ranking
Detalhamento
setColumnsOpen((o) => !o)}>Colunas
{columnsOpen && (
<>
setColumnsOpen(false)} />
Colunas visíveis
{COLUMN_DEFS.map((c) => (
toggleColumn(c.id)}
className="w-full px-3 py-2 flex items-center gap-2.5 hover:bg-[var(--panel-2)] text-left text-[12px]"
>
{visibleCols[c.id] &&
{c.label}
))}
)}
Filial
{visibleCols.vendas && Vendas }
{visibleCols.yoy && YoY }
{visibleCols.mkp && MKP }
{visibleCols.pa && P.A. }
{visibleCols.tkm && T.K.M. }
{visibleCols.pm && P.M. }
{MOCK.storesKPI.map((s) => (
{String(s.cod).padStart(2, "0")}
{s.loja}
{visibleCols.vendas && {fmt.money(s.vlr * periodMult, { compact: true })} }
{visibleCols.yoy && {s.mkp.toFixed(2)}× }
{visibleCols.pa && {s.pa.toFixed(2)} }
{visibleCols.tkm && {fmt.money(s.tkm, { compact: true })} }
{visibleCols.pm && {fmt.money(s.pm, { compact: true })} }
))}
{/* Weekly comparison */}
Evolução semanal · 12 semanas
Acumulado por semana — atual vs. ano anterior
w.label)}
series={[
{ name: "Atual", data: MOCK.weekly.map(w => w.atual), color: "var(--accent)" },
{ name: "LY", data: MOCK.weekly.map(w => w.prev), color: "var(--accent-2)", dashed: true },
]}
height={240}
/>
);
}
let barData_idx_unused = 0; // legacy placeholder, unused
// helper sub-component because of mid-fn JSX const
function VisaoBarChart({ kpi, metric = "valor", periodMult = 1 }) {
const isYoY = metric === "yoy";
// Derivar YoY% deterministic por loja+KPI
const yoyMap = { vlr: [12.4, 8.7, -2.1, 5.6, -6.3, 2.0], qtd: [9.1, 6.4, -3.2, 4.1, -7.8, 1.4], cli: [11.2, 7.3, 0.8, 4.5, -3.1, 2.6], pm: [3.4, 2.1, 1.6, 0.9, -0.4, 1.0], tkm: [5.6, 4.2, 1.1, 3.7, -1.8, 2.3], pa: [-1.2, 0.3, -0.8, 1.4, -2.1, 0.4], mkp: [1.4, 1.1, 0.6, 0.9, -0.3, 0.5] };
const data = MOCK.storesKPI.map((s, i) => {
const raw = kpi === "vlr" ? s.vlr : kpi === "qtd" ? s.qtd : kpi === "cli" ? s.cli : kpi === "pm" ? s.pm : kpi === "tkm" ? s.tkm : kpi === "pa" ? s.pa : s.mkp;
const value = isYoY ? (yoyMap[kpi] || yoyMap.vlr)[i] : raw * (kpi === "vlr" || kpi === "qtd" || kpi === "cli" ? periodMult : 1);
return { label: s.loja.replace("Filial ", "F"), value };
});
// Color by rank (sort by value) ou por sinal (verde positivo / vermelho negativo) se YoY
let colored;
if (isYoY) {
colored = data.map((d) => ({ ...d, color: d.value >= 0 ? "var(--pos)" : "var(--neg)" }));
} else {
const sorted = [...data].sort((a, b) => b.value - a.value);
const colors = ["var(--accent)", "var(--accent-2)", "#7dd3fc", "#a78bfa", "#fbbf24", "#fb7185"];
colored = data.map((d) => ({ ...d, color: colors[sorted.findIndex(s => s.label === d.label)] || "var(--fg-faint)" }));
}
return (
isYoY ? `${v >= 0 ? "+" : ""}${v.toFixed(1)}%` : kpi === "vlr" || kpi === "pm" || kpi === "tkm" ? fmt.money(v, { compact: true, currency: false }) : kpi === "pa" || kpi === "mkp" ? v.toFixed(2) : fmt.int(v)}
/>
);
}
// ============================================================
// FECHAMENTO DO DIA
// ============================================================
function FechamentoScreen() {
const [period, setPeriod] = useState("Dia");
const today = new Date().toLocaleDateString("pt-BR", { weekday: "long", day: "numeric", month: "long" });
// Multiplicador local: Fechamento opera em escala de dia/semana, não meses
const fMult = { "Dia": 1, "Ontem": 0.94, "Semana": 6.8 }[period] || 1;
return (
{today}
Vendas +18,2% vs. ontem e +12,6% vs. mesmo dia de 2025.
A meta diária está 113% atingida com 3 filiais acima do plano.
Fechamento do dia
{today}
Resumo executivo para a direção · atualizado a cada 15 min
Meta do dia
{fmt.money(180000, { compact: true })}
{MOCK.storesKPI.map((s, i) => {
const meta = 30000 - i * 1800;
const real = s.vlr / 7; // a "daily" sample
const pct = (real / meta) * 100;
return (
{String(s.cod).padStart(2,"0")}
{s.loja}
= 100 ? "badge-pos" : pct >= 80 ? "badge-warn" : "badge-neg"}`}>{pct.toFixed(0)}% meta
= 100 ? "var(--pos)" : pct >= 80 ? "var(--warn)" : "var(--neg)"} />
{fmt.money(real, { compact: true })}
/ {fmt.money(meta, { compact: true })}
);
})}
{(() => {
// 14 horas (9h-22h) — gera valores deterministicos pra Hoje e Ontem.
// Padrão: pico no almoço (12-13h) + pico noturno (18-20h).
const hours = Array.from({ length: 14 }, (_, i) => 9 + i);
const peakAt = (h, peak) => Math.exp(-Math.pow((h - peak) / 2.2, 2));
const valToday = (h) => Math.round(8000 + 12000 * peakAt(h, 13) + 16000 * peakAt(h, 19));
const valYday = (h) => Math.round(7000 + 11000 * peakAt(h, 12.5) + 14000 * peakAt(h, 18.5));
const maxV = Math.max(...hours.map(valToday), ...hours.map(valYday));
return (
{hours.map((h, i) => {
const today = valToday(h);
const yday = valYday(h);
const todayH = (today / maxV) * 100;
const ydayH = (yday / maxV) * 100;
return (
);
})}
19h · {fmt.money(Math.max(...hours.map(valToday)), { compact: true })}
);
})()}
{/* Vendedoras — ranking visual com gradiente decrescente por posição */}
{MOCK.sellers.map((v, i) => {
// Hierarquia visual decrescente: ouro → prata → bronze → cinza → cinza claro
const podium = [
{ bg: "linear-gradient(180deg, color-mix(in oklch, #FFD700 18%, var(--panel-2)) 0%, var(--panel-2) 100%)", border: "#FFD700", badge: "bg-gradient-to-br from-[#FFD700] to-[#FFA500] text-white border-[#FFA500]", icon: "crown", iconColor: "#FFD700", label: "1º lugar" },
{ bg: "linear-gradient(180deg, color-mix(in oklch, #C0C0C0 14%, var(--panel-2)) 0%, var(--panel-2) 100%)", border: "#C0C0C0", badge: "bg-gradient-to-br from-[#C0C0C0] to-[#9E9E9E] text-white border-[#9E9E9E]", icon: "medal", iconColor: "#9E9E9E", label: "2º lugar" },
{ bg: "linear-gradient(180deg, color-mix(in oklch, #CD7F32 12%, var(--panel-2)) 0%, var(--panel-2) 100%)", border: "#CD7F32", badge: "bg-gradient-to-br from-[#CD7F32] to-[#8B5A2B] text-white border-[#8B5A2B]", icon: "medal", iconColor: "#CD7F32", label: "3º lugar" },
{ bg: "var(--panel-2)", border: "var(--border)", badge: "bg-[var(--panel)] text-[var(--fg-muted)] border-[var(--border)]", icon: null, iconColor: null, label: "4º lugar" },
{ bg: "var(--panel-2)", border: "var(--border)", badge: "bg-[var(--panel)] text-[var(--fg-faint)] border-[var(--border)]", icon: null, iconColor: null, label: "5º lugar" },
];
const p = podium[i] || podium[4];
const isTop3 = i < 3;
return (
= 3 ? 0.92 : 1,
}}
title={p.label}
>
{/* Glow só no 1º lugar */}
{i === 0 &&
}
{v.nome}
{v.loja}
{fmt.money(v.vlr, { compact: true })}
);
})}
{/* Calendário de meta diária */}
);
}
// ============================================================
// MetaCalendar — daily meta achievement heatmap (current month)
// ============================================================
function MetaCalendar() {
// monthOffset: 0 = mês atual, -1 = mês anterior, -2 = dois meses atrás, etc.
// Avanço (>) bloqueado em 0 — não simulamos dados futuros.
const [monthOffset, setMonthOffset] = useState(0);
const today = new Date();
const baseYear = today.getFullYear();
const baseMonth = today.getMonth();
// Data de referência do mês visualizado (dia 1 evita estouro em meses com 28-31 dias)
const refDate = new Date(baseYear, baseMonth + monthOffset, 1);
const year = refDate.getFullYear();
const month = refDate.getMonth();
const firstDay = new Date(year, month, 1).getDay();
const daysInMonth = new Date(year, month + 1, 0).getDate();
// Em mês passado, todos os dias já são "fechados" (todayDay = último dia do mês)
const isCurrentMonth = monthOffset === 0;
const todayDay = isCurrentMonth ? today.getDate() : daysInMonth;
// Pseudo-random but deterministic meta % per day — varia com monthOffset pra simular meses diferentes
const seed = monthOffset * 0.4;
const dailyData = Array.from({ length: daysInMonth }, (_, i) => {
const day = i + 1;
const dow = new Date(year, month, day).getDay();
const isWeekend = dow === 0 || dow === 6;
if (day > todayDay) return { day, future: true };
// Higher meta on weekends, mix of beat/miss
const base = isWeekend ? 110 : 85;
const wobble = Math.sin((i + seed) * 1.3) * 22 + Math.cos((i + seed) * 0.7) * 18;
const pct = Math.max(40, Math.min(140, base + wobble));
const real = (pct / 100) * (isWeekend ? 42000 : 28000);
return { day, pct, real, isWeekend, future: false };
});
const padding = Array(firstDay).fill(null);
const totalCells = [...padding, ...dailyData];
// Header stats
const completed = dailyData.filter(d => !d.future);
const beat = completed.filter(d => d.pct >= 100).length;
const missed = completed.filter(d => d.pct < 80).length;
const totalReal = completed.reduce((acc, d) => acc + (d.real || 0), 0);
const colorFor = (pct) => {
if (pct == null) return null;
if (pct >= 120) return "var(--pos)";
if (pct >= 100) return "color-mix(in oklch, var(--pos) 70%, var(--bg))";
if (pct >= 80) return "var(--warn)";
return "var(--neg)";
};
const monthName = refDate.toLocaleDateString("pt-BR", { month: "long", year: "numeric" });
const weekdays = ["D", "S", "T", "Q", "Q", "S", "S"];
const canGoNext = monthOffset < 0;
const canGoPrev = monthOffset > -11; // limite arbitrário de 11 meses atrás
return (
Acompanhamento diário · verde = bateu meta · vermelho = abaixo
{/* Cluster de navegação: setas + label do mês, agrupados num "pill" pra separar visualmente do Exportar */}
canGoPrev && setMonthOffset(monthOffset - 1)}
disabled={!canGoPrev}
className="w-7 h-7 rounded-md flex items-center justify-center text-[var(--fg-muted)] hover:text-[var(--fg)] hover:bg-[var(--panel-2)] disabled:opacity-30 disabled:cursor-not-allowed"
title="Mês anterior"
>
{monthOffset === 0 ? "Atual" : `${monthOffset}`}
canGoNext && setMonthOffset(monthOffset + 1)}
disabled={!canGoNext}
className="w-7 h-7 rounded-md flex items-center justify-center text-[var(--fg-muted)] hover:text-[var(--fg)] hover:bg-[var(--panel-2)] disabled:opacity-30 disabled:cursor-not-allowed"
title={canGoNext ? "Próximo mês" : "Sem dados futuros"}
>
Exportar
{/* Calendar grid */}
{weekdays.map((w, i) => (
{w}
))}
{totalCells.map((cell, i) => {
if (!cell) return
;
if (cell.future) {
return (
{cell.day}
);
}
const color = colorFor(cell.pct);
const isToday = cell.day === todayDay;
return (
{cell.day.toString().padStart(2, "0")}/{(month + 1).toString().padStart(2, "0")}
Realizado: {fmt.money(cell.real, { compact: true })}
% da meta: {cell.pct.toFixed(0)}%
{cell.isWeekend ? "Final de semana — meta ampliada" : "Dia útil"}
}
>
{cell.day}
{cell.pct.toFixed(0)}%
);
})}
{/* Legend */}
Legenda
{/* Side stats + narrative */}
missed ? "positive" : "warn"} icon="target" kicker="Resumo do mês">
{beat} de {completed.length} dias bateram a meta —{" "}
{((beat / completed.length) * 100).toFixed(0)}% de aderência.
{missed} dias abaixo de 80% precisam de plano de recuperação.
Realizado · mês
{fmt.money(totalReal, { compact: true })}
Meta restante
{fmt.money(280000, { compact: true })}
faltam 6 dias úteis
Melhor dia
142%
15/06 · sábado
Pior dia
52%
04/06 · terça
Classificação ABC (Pareto)
SKUs ordenados por receita e divididos em 3 grupos: A (top, ~80% da receita), B (médio), C (cauda).
} width={300} />
Concentração de receita por classe · 1.240 SKUs ativos
{/* Donut + center stat */}
{fmt.money(totalVendas, { compact: true })}
receita total
{/* Class breakdown — cards clicaveis filtram a tabela abaixo */}
{data.map((d) => {
const isActive = activeCurva === d.curva;
return (
onSelectCurva && onSelectCurva(isActive ? null : d.curva)}
className="p-4 rounded-xl border bg-[var(--panel-2)] relative text-left transition-all hover:scale-[1.02] cursor-pointer"
style={{
borderColor: isActive ? d.color : "var(--border)",
borderWidth: isActive ? "2px" : "1px",
boxShadow: isActive ? `0 0 0 4px color-mix(in oklch, ${d.color} 18%, transparent)` : undefined,
}}
title={isActive ? `Limpar filtro Curva ${d.curva}` : `Filtrar produtos da Curva ${d.curva}`}
>
{/* Coachmark "clique pra filtrar" — fica acima da Curva A apenas, some no primeiro clique */}
{d.curva === "A" && coachOpen && (
)}
{d.curva}
Curva {d.curva}
{isActive &&
{fmt.money(d.vendas, { compact: true })}
SKUs
{fmt.int(d.skus)} ({d.pctSkus}%)
Da receita
{d.pctVendas}%
{d.desc}
);
})}
{/* Header — narrative + period */}
Catálogo · 1.240 SKUs ativos
+11,4% de peças vendidas hoje vs. 2025.
Curva A concentra 62% da receita —
125 SKUs em ruptura precisam de reposição imediata.
{/* Filter + pivot pills */}
{/* Curva ABC module — clicavel pra filtrar tabela abaixo */}
Detalhe por {pivot === "sku" ? "SKU" : pivot}
{curvaFilter && (
setCurvaFilter(null)}
className="badge badge-accent text-[10px] flex items-center gap-1 hover:opacity-80"
title="Limpar filtro de curva"
>
Curva {curvaFilter}
)}
{q && (
"{q}" · {filtered.length} resultado{filtered.length !== 1 ? "s" : ""}
)}
#
Produto
Grupo
Vendas
Peças
YoY
MKP
Cobertura
{filtered.map((p, i) => (
setOpenProduct(p)} className="cursor-pointer">
{(p.rank).toString().padStart(2,"0")}
{p.nome}
SKU · {1000 + i * 137}
{PH.groups[i % PH.groups.length]} {fmt.money(p.vlr * periodMult, { compact: true })}
{fmt.int(Math.round(p.qtd * periodMult))}
{(2.2 + i * 0.08).toFixed(2)}×
{[12, 18, 24, 32, 42, 28, 8, 14][i % 8]}d
))}
{/* Drilldown drawer */}
{openProduct &&
setOpenProduct(null)} />}
e.stopPropagation()} className="relative w-full max-w-[920px] h-full bg-[var(--bg)] border-l border-[var(--border)] shadow-[var(--shadow-lg)] flex flex-col overflow-hidden" style={{ animation: "slideUp .35s cubic-bezier(.2,.8,.2,1)" }}>
{/* Header */}
{sku}
{PH.groups[product.rank % PH.groups.length]}
Fornecedor 0{(product.rank % 4) + 1}
{name}
toast.push({ tone: "info", title: "Galeria de fotos", desc: `${sku} · 12 imagens disponíveis · abrindo viewer…` })}
>
Fotos
toast.push({ tone: "success", title: "Pedido em rascunho criado", desc: `${sku} · adicionado ao carrinho de compras` })}
>
Criar pedido
toast.push({ tone: "success", title: "Alerta configurado", desc: `Você será notificado quando ${sku} cair abaixo de 7 dias de cobertura` })}
>
Alerta personalizado
{/* Body */}
{/* Storytelling header — YoY narrative */}
Resumo · ano vs. ano
{name} vendeu{" "}
{fmt.money(product.vlr)} nos últimos 30 dias —{" "}
= 0 ? "text-[var(--pos)]" : "text-[var(--neg)]"}`}>{product.yoy > 0 ? "+" : ""}{product.yoy.toFixed(1)}% {" "}
vs. o mesmo período de 2025. Concentração:{" "}
Filial 01 responde por 31% do volume.
Cobertura média da rede: 18 dias , com{" "}
2 filiais críticas abaixo de 10d.
{/* KPI strip */}
{/* Drilldown tabs */}
{/* Trend chart 12m */}
Evolução · 12 meses
Vendas mensais · atual vs. 2025
{/* Breakdown by store */}
Filial
{byStoreView === "vendas" && <>
Vendas
Peças
Participação
YoY
}
{byStoreView === "estoque" && <>
Estoque atual
Mínimo
Saturação
Última entrada
}
{byStoreView === "cob" && <>
Cobertura
Vendas 30d
Saúde
Sugestão
}
{byStore.map((s) => {
const pct = (s.vendas / totalVendas) * 100;
const minimo = Math.round(s.pecas * 0.4);
const saturacao = Math.min(100, (s.estoque / (minimo * 2)) * 100);
const ultimaEntrada = ["8d", "12d", "5d", "22d", "3d", "15d"][PH.stores.indexOf(s.loja) % 6] || "—";
return (
{s.loja}
{byStoreView === "vendas" && <>
{fmt.money(s.vendas, { compact: true })}
{s.pecas}
{s.estoque}
{minimo}
{ultimaEntrada}
}
{byStoreView === "cob" && <>
{s.cobertura}d
{fmt.money(s.vendas, { compact: true })}
{s.cobertura < 7 ? "Crítica" : s.cobertura < 14 ? "Atenção" : "Saudável"}
{s.cobertura < 14 ? Repor : OK }
}
);
})}
Total
{fmt.money(totalVendas, { compact: true })}
{totalPecas}
{totalEstoque}
{/* Side-by-side: by size + by color + top sellers */}
{byColor.map((c) => (
))}
{byColor.map((c) => (
))}
{topSellers.map((v, i) => (
{i + 1}
{fmt.money(v.vendas, { compact: true })}
{v.pecas} pç
))}
{/* Order history */}
{orderHistory.map((h, i) => (
))}
);
}
// ============================================================
// COMPARATIVO POR LOJA — tabela completa cross-filial (Vendas, TKM, PA, MKP, Peças, YoY, Cobertura)
// ============================================================
function ComparativoLojasScreen() {
const { period, setPeriod, mult: periodMult } = usePeriod();
const [sortBy, setSortBy] = useState("vlr");
const [sortDir, setSortDir] = useState("desc"); // "asc" | "desc"
const [regiaoFilter, setRegiaoFilter] = useState("Todas");
const toast = useToast();
// Atribuição determinística de região por filial (espelha o que o cliente esperaria ver)
const regiaoMap = { 0: "Sudeste", 1: "Sudeste", 2: "Sul", 3: "Sul", 4: "Nordeste", 5: "Centro-Oeste" };
const REGIOES = ["Todas", "Sudeste", "Sul", "Nordeste", "Centro-Oeste"];
// Dataset enriquecido — coverage vem de MOCK.coverage (mesma ordem de filiais)
const dataset = MOCK.storesKPI.map((s, i) => {
const cov = MOCK.coverage[i] || {};
return {
cod: s.cod,
loja: s.loja,
regiao: regiaoMap[i] || "Sudeste",
vlr: s.vlr * periodMult,
qtd: Math.round(s.qtd * periodMult),
tkm: s.tkm,
pa: s.pa,
mkp: s.mkp,
yoy: s.yoy,
cobertura: cov.coberturaDias ?? 30,
rupturaPct: cov.rupturaPct ?? 0,
meta: s.vlr * periodMult * (0.85 + (i % 3) * 0.08), // meta deterministic
};
});
const filtered = regiaoFilter === "Todas" ? dataset : dataset.filter(d => d.regiao === regiaoFilter);
const sorted = [...filtered].sort((a, b) => {
const av = a[sortBy], bv = b[sortBy];
if (av === bv) return 0;
const dir = sortDir === "asc" ? 1 : -1;
return av < bv ? -dir : dir;
});
const toggleSort = (col) => {
if (sortBy === col) {
setSortDir(d => d === "asc" ? "desc" : "asc");
} else {
setSortBy(col);
setSortDir("desc");
}
};
// KPI strip — agregados sobre o filtered
const totalRede = filtered.reduce((acc, d) => acc + d.vlr, 0);
const melhor = filtered.reduce((best, d) => (best == null || d.yoy > best.yoy) ? d : best, null);
const pior = filtered.reduce((worst, d) => (worst == null || d.yoy < worst.yoy) ? d : worst, null);
const batendoMeta = filtered.filter(d => d.vlr >= d.meta).length;
const pctBatendo = filtered.length ? (batendoMeta / filtered.length) * 100 : 0;
// YoY heatmap — interpolar entre red (-10%) e green (+15%)
const yoyBg = (yoy) => {
if (yoy >= 10) return "color-mix(in oklch, var(--pos) 28%, var(--panel))";
if (yoy >= 5) return "color-mix(in oklch, var(--pos) 18%, var(--panel))";
if (yoy >= 0) return "color-mix(in oklch, var(--pos) 8%, var(--panel))";
if (yoy >= -5) return "color-mix(in oklch, var(--neg) 12%, var(--panel))";
return "color-mix(in oklch, var(--neg) 24%, var(--panel))";
};
const yoyFg = (yoy) => yoy >= 0 ? "var(--pos)" : "var(--neg)";
// Cobertura color — <14d crítico, <30d atenção, >=30 ok
const coberturaColor = (d) => {
if (d < 14) return "var(--neg)";
if (d < 30) return "var(--warn)";
return "var(--fg-muted)";
};
const SortHead = ({ col, children, align = "right" }) => (
toggleSort(col)}
className={`text-${align} text-[10.5px] uppercase tracking-wider text-[var(--fg-muted)] font-semibold py-2.5 px-2 cursor-pointer hover:text-[var(--fg)] select-none`}
>
{children}
{sortBy === col &&
);
return (
{/* Header */}
Inteligência · cross-filial
Compare todas as métricas entre filiais lado a lado — ordene por qualquer coluna pra achar quem está puxando ou segurando a rede.
{/* KPI strip */}
{melhor?.loja || "—"}
YoY {melhor ? `+${melhor.yoy.toFixed(1)}%` : "—"}
{pior?.loja || "—"}
YoY {pior ? `${pior.yoy.toFixed(1)}%` : "—"}
{batendoMeta}/ {filtered.length}
{pctBatendo.toFixed(0)}% da rede
{/* Filter bar */}
Região
{REGIOES.map((r) => (
setRegiaoFilter(r)}
className={`badge cursor-pointer transition-colors ${regiaoFilter === r ? "border-[var(--accent)] text-[var(--accent)] bg-[var(--accent-soft)]" : "hover:border-[var(--accent)]"}`}
>
{r}
))}
{filtered.length} filiais
Exportar
{/* Tabela comparativa */}
Filial
Região
Vendas
Peças
TKM
PA
MKP
YoY
Cobertura
{sorted.map((d, idx) => (
{d.cod.toString().padStart(2, "0")}
{d.loja}
{d.regiao}
{fmt.money(d.vlr, { compact: true })}
{fmt.int(d.qtd)}
{fmt.money(d.tkm, { compact: true })}
{d.pa.toFixed(2)}
{d.mkp.toFixed(2)}×
{d.yoy >= 0 ? "+" : ""}{d.yoy.toFixed(1)}%
{d.cobertura}d
))}
{/* Footer da tabela */}
Clique em qualquer coluna pra ordenar · cores YoY indicam aceleração ou desaceleração vs. mesmo período de 2025
Total: {fmt.money(totalRede, { compact: true })}
{[
{ id: "vendas", label: "Vendas", icon: "trending-up" },
{ id: "estoque", label: "Estoque", icon: "package" },
{ id: "preco", label: "Preço & Margem", icon: "tag" },
{ id: "clientes", label: "Clientes", icon: "users" },
{ id: "fornec", label: "Fornecedores", icon: "truck" },
{ id: "campanha", label: "Campanhas", icon: "megaphone" },
].map((t) => (
setTab(t.id)} className={`px-3 py-1.5 text-[11.5px] font-medium rounded-lg whitespace-nowrap flex items-center gap-1.5 transition-colors ${tab === t.id ? "bg-[var(--accent-soft)] text-[var(--accent)] border border-[var(--accent)]" : "border border-[var(--border)] text-[var(--fg-muted)] hover:text-[var(--fg)]"}`}>
))}
);
}
Object.assign(window, { MOCK, HomeScreen, VisaoGeralScreen, FechamentoScreen, ProdutosScreen, ComparativoLojasScreen });