/* global React */
const { useState, useEffect, useMemo, useRef } = React;
// ============ Shared components ============
window.Icon = function Icon({ name, size = 16, stroke = 2 }) {
const paths = {
arrow_left: <>,
arrow_right: <>,
chevron_right: ,
chevron_down: ,
refresh: <>,
log_out: <>,
home: <>,
grid: <>,
users: <>,
user: <>,
list: <>,
package: <>,
clock: <>,
alert: <>,
trending_up: <>,
trending_down: <>,
camera: <>,
};
return (
);
};
// ============ Update banner ============
// Page is refreshed every 10 minutes — show last update + countdown to next.
window.LiveBanner = function LiveBanner({ scenario, role, storeName }) {
// Anchor 'now' to mount so the countdown ticks down deterministically
// toward the next 10-min cycle. Real backend would push the actual timestamp.
const [now, setNow] = useState(new Date());
useEffect(() => {
const t = setInterval(() => setNow(new Date()), 1000);
return () => clearInterval(t);
}, []);
// Last update = most recent 10-minute boundary in wall time.
const lastUpdate = new Date(now);
lastUpdate.setMinutes(Math.floor(lastUpdate.getMinutes() / 10) * 10, 0, 0);
const nextUpdate = new Date(lastUpdate.getTime() + 10 * 60 * 1000);
const secsToNext = Math.max(0, Math.floor((nextUpdate - now) / 1000));
const mm = Math.floor(secsToNext / 60).toString().padStart(2, '0');
const ss = (secsToNext % 60).toString().padStart(2, '0');
const fmtTime = (d) => d.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
const fmtDate = (d) => d.toLocaleDateString('pt-BR', { weekday: 'long', day: '2-digit', month: 'long' });
const dateLabel = fmtDate(now).charAt(0).toUpperCase() + fmtDate(now).slice(1);
return (
Última atualização
{fmtTime(lastUpdate)}
{dateLabel}
Próxima atualização em {mm}:{ss}
);
};
// ============ KPI Big Number Card ============
window.KPICard = function KPICard({ label, value, unit, raw, status, delta, deltaLabel, hint, max = 100, invert = false, onClick }) {
const statusClass = status || 'neutral';
const fillWidth = invert
? Math.min(100, (value / Math.max(max, 1)) * 100)
: Math.min(100, (value / Math.max(max, 1)) * 100);
return (
{label}
{value}
{unit && {unit}}
{raw}
{delta !== undefined && (
0 ? 'up' : delta < 0 ? 'down' : 'neutral'}`}>
0 ? 'trending_up' : 'trending_down'} size={11} />
{delta > 0 ? '+' : ''}{delta}{deltaLabel || ''}
)}
{hint &&
{hint}
}
);
};
// ============ Status pill ============
window.StatusPill = function StatusPill({ status, children }) {
return {children};
};
// ============ Pct cell ============
window.PctCell = function PctCell({ value, status }) {
return (
);
};
// ============ Initials helper ============
window.initials = function initials(name) {
return name.split(' ').filter(Boolean).slice(0, 2).map(w => w[0]).join('').toUpperCase();
};
// ============ Tab bar (top tabs) ============
window.Tabs = function Tabs({ tabs, value, onChange }) {
return (
{tabs.map((t) => (
))}
);
};