{tip}
{/* y axis */}
{Array.from({ length: ticks + 1 }).map((_, i) => (
{fmtInt(max * (ticks - i) / ticks)}
))}
{/* plot */}
{/* gridlines */}
{Array.from({ length: ticks + 1 }).map((_, i) => (
))}
{/* bars */}
{data.map((d, i) => {
const hpct = (d.value / max) * 100;
return (
setTip({ x: e.clientX, y: e.clientY, content: `${d.label}: ${valueFmt(d.value)}` })}
onMouseLeave={() => setTip(null)}>
0 ? 2 : 0,
background: d.highlight ? color : 'hsl(var(--primary) / .82)', borderRadius: '4px 4px 0 0',
transition: 'background .12s', cursor: 'default',
}} />
);
})}
{/* x labels */}
{data.map((d, i) => (
{d.short ?? d.label}
))}
);
}
// ---------- Donut ----------
function Donut({ data, size = 168, thickness = 26, centerLabel, centerSub }) {
const [tip, setTip] = useChartTip();
const total = data.reduce((s, d) => s + d.value, 0) || 1;
const r = (size - thickness) / 2;
const c = 2 * Math.PI * r;
let acc = 0;
return (
{tip}
setTip({ x: e.clientX, y: e.clientY, content: `${d.label}: ${fmtInt(d.value)} (${Math.round(frac * 100)}%)` })}
onMouseLeave={() => setTip(null)} />
);
})}
{centerLabel != null && (
{centerLabel}
{centerSub &&
{centerSub}
}
)}
);
}
// ---------- Ranking horizontal ----------
function RankBars({ data, valueFmt = fmtInt, max: maxProp }) {
const max = maxProp ?? Math.max(...data.map(d => d.value), 1);
return (
{data.map((d, i) => (
{d.dot && {d.label}
{valueFmt(d.value)}
))}
);
}
// ---------- Sparkline (área) ----------
function Sparkline({ data, width = 120, height = 34, color = 'hsl(var(--primary))' }) {
const max = Math.max(...data, 1), min = Math.min(...data, 0);
const rng = max - min || 1;
const pts = data.map((v, i) => [i / (data.length - 1) * width, height - ((v - min) / rng) * (height - 4) - 2]);
const line = pts.map((p, i) => `${i ? 'L' : 'M'}${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ');
const area = `${line} L${width} ${height} L0 ${height} Z`;
const id = useMemo(() => 'sp' + Math.random().toString(36).slice(2, 7), []);
return (
);
}
// ---------- Mapa de calor geográfico (capturas por coordenada) ----------
function HeatMap({ records, locais, height = 320, onPointHover }) {
const [tip, setTip] = useChartTip();
// bounding box a partir dos locais
const lats = locais.map(l => l.lat), lngs = locais.map(l => l.lng);
const pad = 0.6;
const minLat = Math.min(...lats) - pad, maxLat = Math.max(...lats) + pad;
const minLng = Math.min(...lngs) - pad, maxLng = Math.max(...lngs) + pad;
const W = 1000, H = 620;
const proj = (lat, lng) => [
((lng - minLng) / (maxLng - minLng)) * W,
H - ((lat - minLat) / (maxLat - minLat)) * H,
];
// agregação por local
const agg = useMemo(() => {
const m = {};
for (const r of records) { m[r.local] = (m[r.local] || 0) + 1; }
return locais.map(l => ({ ...l, n: m[l.nome] || 0 })).filter(l => l.n > 0);
}, [records, locais]);
const maxN = Math.max(...agg.map(a => a.n), 1);
return (
{tip}
{/* graticula */}
setTip({ x: e.clientX, y: e.clientY, content: `${a.nome} · ${fmtInt(a.n)} capturas` })}
onMouseLeave={() => setTip(null)}>
);
})}
{/* labels HTML overlay para nitidez */}
{agg.map((a, i) => {
const [x, y] = proj(a.lat, a.lng);
return (
{a.nome}
);
})}
{/* legenda */}
);
}
Object.assign(window, { BarChart, Donut, RankBars, Sparkline, HeatMap, useChartTip });
})();
/* ===== shell.jsx ===== */
;(function(){
/* ============ FTrack — shell: sidebar + topbar ============ */
const NAV = [
{ group: null, items: [
{ id: 'dashboard', label: 'Dashboard', icon: 'dashboard' },
{ id: 'registros', label: 'Registros', icon: 'table', badge: () => fmtInt(window.FT.RECORDS.length) },
{ id: 'relatorios', label: 'Relatórios', icon: 'fileText' },
]},
{ group: 'Cadastros', items: [
{ id: 'especies', label: 'Espécies', icon: 'fish' },
{ id: 'operacoes', label: 'Operações', icon: 'ship' },
{ id: 'usuarios', label: 'Usuários', icon: 'users' },
]},
];
function Logo({ compact }) {
return (
);
}
function NavItem({ item, active, onClick }) {
const [hover, setHover] = useState(false);
return (
setHover(true)} onMouseLeave={() => setHover(false)}
style={{
display: 'flex', alignItems: 'center', gap: 9, width: '100%', height: 33, padding: '0 9px',
borderRadius: 'var(--radius-sm)', border: 'none', textAlign: 'left',
background: active ? 'hsl(var(--primary-50))' : hover ? 'hsl(var(--muted))' : 'transparent',
color: active ? 'hsl(var(--primary-700))' : 'hsl(var(--foreground))',
fontSize: 13.5, fontWeight: active ? 600 : 450, position: 'relative', transition: 'background .1s',
}}>
{active && {item.label}
{item.badge && {item.badge()} }
);
}
function Sidebar({ current, onNavigate, user, onLogout }) {
return (
{NAV.map((sec, si) => (
{sec.group &&
{sec.group}
}
{sec.items.map(it => onNavigate(it.id)} />)}
(
)}>
{(close) => (
{[['user', 'Meu perfil'], ['settings', 'Configurações']].map(([ic, lb]) => (
))}
{ close(); onLogout(); }} style={{ ...menuItemStyle, color: 'hsl(var(--danger))' }}>
);
}
const menuItemStyle = { display: 'flex', alignItems: 'center', gap: 9, width: '100%', padding: '7px 8px', borderRadius: 5, border: 'none', background: 'transparent', cursor: 'pointer', fontSize: 13, color: 'hsl(var(--foreground))', textAlign: 'left' };
function Topbar({ title, onSearch }) {
return (
);
}
const iconBtn = { width: 32, height: 32, borderRadius: 'var(--radius-sm)', border: '1px solid transparent', background: 'transparent', color: 'hsl(var(--muted-foreground))', display: 'grid', placeItems: 'center', cursor: 'pointer' };
Object.assign(window, { Sidebar, Topbar, Logo, iconBtn });
})();
/* ===== login.jsx ===== */
;(function(){
/* ============ FTrack — tela de Login ============ */
function LoginScreen({ onLogin }) {
const [email, setEmail] = useState('admin@ftrack.com.br');
const [senha, setSenha] = useState('demo1234');
const [loading, setLoading] = useState(false);
const submit = (e) => {
e.preventDefault();
setLoading(true);
setTimeout(() => { setLoading(false); onLogin(); }, 650);
};
return (
{/* esquerda — formulário */}
© 2026 FTrack · Gestão de pesca esportiva
{/* direita — painel de marca */}
{/* placeholder de foto (listrado) */}
{[0, 1, 2].map(i =>
Cada captura, registrada e mensurável.
Seus guias registram peso, espécie e coordenadas direto do barco. Você acompanha tudo aqui — em tempo real.
{[['4.180', 'capturas em 2025'], ['14', 'espécies-alvo'], ['7', 'operações ativas']].map(([n, l]) => (
))}
);
}
function Field({ label, aside, children }) {
return (
{label}
{aside}
{children}
);
}
Object.assign(window, { LoginScreen });
})();
/* ===== dashboard.jsx ===== */
;(function(){
/* ============ FTrack — Dashboard ============ */
function useDashData() {
return useMemo(() => {
const R = window.FT.RECORDS, S = window.FT.speciesById, G = window.FT.guidesById;
const total = R.length;
const pesoMedio = R.reduce((s, r) => s + r.peso, 0) / total;
const pesoTotal = R.reduce((s, r) => s + r.peso, 0);
const maiorPeixe = R.reduce((a, b) => b.peso > a.peso ? b : a);
// por mês (últimos 12)
const ref = new Date(R[0].data); // mais recente
const months = [];
for (let i = 11; i >= 0; i--) {
const d = new Date(ref.getFullYear(), ref.getMonth() - i, 1);
months.push({ key: `${d.getFullYear()}-${d.getMonth()}`, label: `${MESES[d.getMonth()]}/${String(d.getFullYear()).slice(2)}`, short: MESES[d.getMonth()], value: 0 });
}
const mIdx = Object.fromEntries(months.map((m, i) => [m.key, i]));
R.forEach(r => { const d = new Date(r.data); const k = `${d.getFullYear()}-${d.getMonth()}`; if (k in mIdx) months[mIdx[k]].value++; });
months[months.length - 1].highlight = true;
// espécies
const spArr = window.FT.SPECIES.map(s => ({ ...s })).sort((a, b) => b.capturas - a.capturas);
const topSp = spArr[0];
// guias top
const topGuias = window.FT.GUIDES.slice().sort((a, b) => b.capturas - a.capturas).slice(0, 6);
// sparkline últimos 12
const spark = months.map(m => m.value);
return { total, pesoMedio, pesoTotal, maiorPeixe, months, spArr, topSp, topGuias, spark, S, G };
}, []);
}
function Panel({ title, sub, children, action, style = {}, bodyStyle = {} }) {
return (
{(title || action) && (
)}
{children}
);
}
function RecentTable({ data, rows = 8 }) {
const R = window.FT.RECORDS.slice(0, rows);
return (
{R.map((r, i) => {
const sp = data.S[r.especieId], g = data.G[r.guiaId];
return (
{sp.nome}
{r.local} · {g.nome.split(' ')[0]}
{fmtKg(r.peso)}
{fmtTime(r.data)}
);
})}
);
}
function SpeciesLegend({ spArr, total }) {
return (
{spArr.slice(0, 6).map(s => (
{s.nome}
{Math.round(s.capturas / total * 100)}%
))}
);
}
function Dashboard({ layout = 'padrao', onNavigate }) {
const d = useDashData();
const donutData = d.spArr.slice(0, 7).map(s => ({ label: s.nome, value: s.capturas, cor: s.cor }));
const period = (
{}} options={[
{ value: '12m', label: 'Últimos 12 meses' }, { value: '6m', label: 'Últimos 6 meses' }, { value: 'ytd', label: 'Este ano' },
]} minWidth={150} align="right" />
);
const kpis = (
<>
{window.FT.LOCAIS.length} pontos}>
);
const monthsPanel = (