// ═══ GENESIS BUILD dbexplorer-f1 · 2026-07-12 ═══ // Tidal — Shell (sidebar + topbar) + global state, role-aware const NAV_ALL = [ {section:'sec_abordo', items:[ {id:'home', icon:'home', label:'nav_home', roles:['*']}, {id:'agenda', icon:'calendar', label:'nav_agenda', roles:['*'], count:e=>{const today=(new Date()).toISOString().split('T')[0]; return (e.events||[]).filter(x=>(x.data||'')>=today).length;}}, {id:'avisos', icon:'bell', label:'nav_avisos', roles:['*'], count:e=>(e.announcements||[]).filter(a=>!a.expired).length}, {id:'solicitacoes', icon:'tools', label:'nav_solicitacoes', roles:['*']}, ]}, {section:'sec_conviv', items:[ {id:'cinema', icon:'film', label:'nav_cinema', roles:['*']}, {id:'musica', icon:'music', label:'nav_musica', roles:['*']}, {id:'saude', icon:'health', label:'nav_saude', roles:['*']}, {id:'conquistas', icon:'star', label:'nav_conquistas', roles:['*']}, {id:'habilidades', icon:'fork', label:'nav_habilidades', roles:['*']}, ]}, {section:'sec_oper', items:[ {id:'bridge', icon:'anchor', label:'nav_bridge', roles:['admin','staff']}, {id:'logbook', icon:'list', label:'nav_logbook', roles:['admin','staff']}, {id:'gangway', icon:'anchor', label:'nav_gangway', roles:['admin','staff'], count:e=>e.abordo_count||0}, {id:'cabines', icon:'grid', label:'nav_cabines', roles:['admin','staff']}, {id:'manifesto', icon:'list', label:'nav_manifesto', roles:['admin','staff'], count:e=>e.abordo_count||0}, {id:'pessoas', icon:'users', label:'nav_pessoas', roles:['admin','staff']}, {id:'solicitacoes_op', icon:'flag', label:'nav_solicitacoes_op', roles:['admin','staff']}, {id:'coach', icon:'health', label:'nav_coach', roles:['admin','staff']}, {id:'inventario', icon:'list', label:'Inventário', roles:['admin','staff']}, {id:'dbexplorer', icon:'grid', label:'DB Explorer', roles:['admin']}, {id:'config', icon:'flag', label:'nav_config', roles:['*']}, ]}, ]; const visibleNav = (role, isStaff, permissoes) => { const canManage = role === 'admin' || isStaff === true; const chaves = permissoes || []; const temChave = (id) => chaves.some(k => k.startsWith(id + '.')); return NAV_ALL.map(sec => ({ ...sec, items: sec.items.filter(it => { if (it.roles.includes('*')) return true; if (it.roles.includes('admin') && it.roles.length === 1) return role === 'admin'; if (it.roles.includes('admin') || it.roles.includes('staff')) return canManage || temChave(it.id); return it.roles.includes(role) || temChave(it.id); }) })).filter(sec => sec.items.length); }; const Sidebar = ({page, setPage, state, lang, role, isStaff, currentUser, onLogout}) => ( ); // ─── Mobile bottom-nav ─── const BottomNav = ({page, setPage, state, lang, role, openMenu}) => { // primary 4 items + menu const primary = [ {id:'home', icon:'home', label:'nav_home'}, {id:'agenda', icon:'calendar', label:'nav_agenda'}, {id:'avisos', icon:'bell', label:'nav_avisos'}, {id:'solicitacoes', icon:'tools', label:'nav_solicitacoes'}, ]; return ( ); }; const MobileMenu = ({open, onClose, page, setPage, state, lang, role, isStaff, currentUser, onLogout}) => { if (!open) return null; return (
e.stopPropagation()} style={{ background:'var(--surface)', width:'100%', maxHeight:'82vh', borderRadius:'24px 24px 0 0', padding:'10px 0 max(env(safe-area-inset-bottom),20px)', animation:'slideUp .3s', overflowY:'auto' }}>
{visibleNav(role, isStaff, state?.currentUser?.permissoes).map(sec => (
{t(sec.section, lang)}
{sec.items.map(it => (
{setPage(it.id);onClose();}} style={{ display:'flex',alignItems:'center',gap:14,padding:'14px 22px', color: page===it.id ? 'var(--accent)':'var(--ink)', background: page===it.id ? 'var(--accent-soft)':'transparent', fontSize:15 }}> {t(it.label, lang)}
))}
))} {/* Botão de logout */}
{onClose();onLogout();}} style={{ display:'flex',alignItems:'center',gap:14,padding:'14px 22px', color:'var(--muted)',fontSize:15,cursor:'pointer',borderRadius:12 }}> Sair
); }; const PageTitles = { home: {t1:'page_home_t1', t2:'page_home_t2', sub:'page_home_sub'}, agenda: {t1:'page_agenda_t1',t2:'page_agenda_t2',sub:'page_agenda_sub'}, avisos: {t1:'page_avisos_t1',t2:'page_avisos_t2',sub:'page_avisos_sub'}, solicitacoes:{t1:'page_solic_t1', t2:'page_solic_t2', sub:'page_solic_sub'}, cinema: {t1:'page_cinema_t1',t2:'page_cinema_t2',sub:'page_cinema_sub'}, musica: {t1:'page_musica_t1',t2:'page_musica_t2',sub:'page_musica_sub'}, saude: {t1:'page_saude_t1', t2:'page_saude_t2', sub:'page_saude_sub'}, conquistas: {t1:'page_conq_t1', t2:'page_conq_t2', sub:'page_conq_sub'}, habilidades: {t1:'page_habil_t1', t2:'page_habil_t2', sub:'page_habil_sub'}, manifesto: {t1:'page_manif_t1', t2:'page_manif_t2', sub:'page_manif_sub'}, gangway: {t1:'page_gang_t1', t2:'page_gang_t2', sub:'page_gang_sub'}, cabines: {t1:'page_cab_t1', t2:'page_cab_t2', sub:'page_cab_sub'}, pessoas: {t1:'page_pessoas_t1',t2:'page_pessoas_t2',sub:'page_pessoas_sub'}, importar: {t1:'page_imp_t1', t2:'page_imp_t2', sub:'page_imp_sub'}, config: {t1:'page_cfg_t1', t2:'page_cfg_t2', sub:'page_cfg_sub'}, solicitacoes_op:{t1:'page_solop_t1',t2:'page_solop_t2',sub:'page_solop_sub'}, }; const Topbar = ({page, lang, setLang, theme, setTheme, role, setRole, onCmdK, isMobile, openMenu, currentUser}) => { const cfg = PageTitles[page] || PageTitles.home; // Saudação baseada no horário const hour = new Date().getHours(); const greeting = hour < 12 ? (lang==='pt'?'Bom dia,':'Good morning,') : hour < 18 ? (lang==='pt'?'Boa tarde,':'Good afternoon,') : (lang==='pt'?'Boa noite,':'Good evening,'); const primeiroNome = (currentUser?.nome || '').split(' ')[0] || '—'; // Resolve título — substitui t1 pela saudação na home const t1 = page === 'home' ? greeting : t(cfg.t1, lang); const t2 = page === 'home' ? `${primeiroNome}.` : t(cfg.t2, lang); return (
{t1} {t2}
{t(cfg.sub, lang)}
{!isMobile && ( )}
); }; // Escalas para descrever o tempo no banner (bilíngue pt/en) const _wxBeaufort = (kt) => { if (kt == null || isNaN(kt)) return null; const T = [[1,0,'Calmaria','Calm'],[3,1,'Aragem','Light air'],[6,2,'Brisa leve','Light breeze'],[10,3,'Brisa fraca','Gentle breeze'],[16,4,'Brisa moderada','Moderate breeze'],[21,5,'Brisa forte','Fresh breeze'],[27,6,'Vento fresco','Strong breeze'],[33,7,'Vento forte','Near gale'],[40,8,'Ventania','Gale'],[47,9,'Ventania forte','Strong gale'],[55,10,'Tempestade','Storm'],[63,11,'Tempestade violenta','Violent storm']]; for (const [max,forca,pt,en] of T) if (kt <= max) return {forca,pt,en}; return {forca:12,pt:'Furacão',en:'Hurricane'}; }; const _wxDouglas = (m) => { if (m == null || isNaN(m)) return null; const T = [[0,0,'Calmo','Calm'],[0.10,1,'Calmo','Rippled'],[0.50,2,'Chão','Smooth'],[1.25,3,'Pequeno','Slight'],[2.50,4,'Moderado','Moderate'],[4,5,'Grosso','Rough'],[6,6,'Muito grosso','Very rough'],[9,7,'Alto','High'],[14,8,'Muito alto','Very high']]; for (const [max,grau,pt,en] of T) if (m <= max) return {grau,pt,en}; return {grau:9,pt:'Excepcional',en:'Phenomenal'}; }; const BridgeBanner = ({state, lang}) => { const [st, setSt] = useState(null); const pt = lang === 'pt'; const me = state.currentUser || {}; const canManage = me.role === 'admin' || me.is_staff === true; const token = () => localStorage.getItem('genesis_token'); const load = () => fetch('/api/bridge/status', {headers:{'Authorization':`Bearer ${token()}`}}).then(r=>r.ok?r.json():null).then(setSt).catch(()=>{}); useEffect(() => { load(); const iv = setInterval(load, 120000); return () => clearInterval(iv); }, []); const reg = st && st.reg; const local = (st && st.local) || (pt ? 'Bacia de Santos' : 'Santos Basin'); const editarLocal = async () => { const v = window.prompt(pt ? 'Local / posição:' : 'Location / position:', local); if (v === null) return; await fetch('/api/bridge/local', {method:'PUT', headers:{'Authorization':`Bearer ${token()}`,'Content-Type':'application/json'}, body:JSON.stringify({local:v})}).catch(()=>{}); load(); }; const heading = (reg && reg.heading != null) ? `${String(Math.round(reg.heading)).padStart(3,'0')}°` : '047°'; const speed = (reg && reg.speed != null) ? reg.speed : '11.2'; const nm = (o) => (o && (pt ? o.pt : o.en)) || ''; const bf = reg ? _wxBeaufort(reg.vento_int) : null; const dg = reg ? _wxDouglas(reg.swell_int) : null; let weather; if (reg && (reg.vento_int != null || reg.swell_int != null)) { const p = []; if (reg.vento_int != null && bf) p.push(`${pt?'vento':'wind'} ${reg.vento_int}kt · ${nm(bf).toLowerCase()}`); if (reg.swell_int != null && dg) p.push(`${pt?'mar':'sea'} ${reg.swell_int}m · ${nm(dg).toLowerCase()}`); weather = p.join(' · '); } else weather = pt ? 'mar calmo · vento leve' : 'calm sea · light wind'; return (
{t('bridge', lang).toUpperCase()}
· {heading} • {speed}kn · {local} · {weather} {reg && reg.hora != null && {String(reg.hora).padStart(2,'0')}:00}
); }; // ─── Cmd-K palette ─── const CmdK = ({open, onClose, setPage, role, isStaff, lang, permissoes}) => { const [q, setQ] = useState(''); const [people, setPeople] = useState([]); const ref = useRef(null); const canManage = role === 'admin' || isStaff === true; const items = useMemo(() => visibleNav(role, isStaff, permissoes).flatMap(s => s.items.map(i => ({id:i.id, label:t(i.label,lang), icon:i.icon, sec:t(s.section,lang)}))) , [role, isStaff, lang]); // Carrega pessoas para busca (só quem pode gerir) useEffect(() => { if (open && canManage && people.length === 0) { const token = localStorage.getItem('genesis_token'); fetch('/api/users', {headers:{'Authorization':`Bearer ${token}`}}) .then(r => r.ok ? r.json() : []) .then(data => setPeople(data.filter(u => u.role !== 'admin'))) .catch(() => {}); } }, [open, canManage]); const filteredNav = q ? items.filter(i => i.label.toLowerCase().includes(q.toLowerCase())) : items; const filteredPeople = q && canManage ? people.filter(p => (p.nome||'').toLowerCase().includes(q.toLowerCase()) || (p.genesis_id||'').toLowerCase().includes(q.toLowerCase()) || (p.empresa||'').toLowerCase().includes(q.toLowerCase()) ).slice(0, 6) : []; useEffect(() => { if (open && ref.current) setTimeout(()=>ref.current.focus(),50) }, [open]); if (!open) return null; return (
e.stopPropagation()} style={{ background:'var(--surface)', borderRadius:18, width:'min(560px, 92vw)', boxShadow:'0 32px 80px -24px rgba(0,0,0,0.4)', overflow:'hidden', animation:'slideUp .25s' }}>
setQ(e.target.value)} placeholder={lang==='pt'?'Buscar páginas ou pessoas…':'Search pages or people…'} style={{flex:1,border:'none',outline:'none',background:'transparent',fontSize:15,color:'var(--ink)',fontFamily:'var(--f)'}}/>
{filteredNav.map(i => (
{setPage(i.id);onClose()}} style={{display:'flex',alignItems:'center',gap:12,padding:'10px 14px',borderRadius:12,cursor:'pointer'}} onMouseEnter={e=>e.currentTarget.style.background='var(--cream-2)'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}> {i.label} {i.sec}
))} {filteredPeople.length > 0 && ( <>
{lang==='pt'?'Pessoas':'People'}
{filteredPeople.map(p => (
{setPage('pessoas');onClose()}} style={{display:'flex',alignItems:'center',gap:12,padding:'10px 14px',borderRadius:12,cursor:'pointer'}} onMouseEnter={e=>e.currentTarget.style.background='var(--cream-2)'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
{(p.initials || (p.nome||'?').slice(0,2)).toUpperCase()}
{p.nome||p.genesis_id} {p.empresa||p.genesis_id}
))} )} {filteredNav.length === 0 && filteredPeople.length === 0 && (
nada encontrado para "{q}"
)}
); }; // ─── TopNav — barra horizontal de navegação (estilo Cabin Management) ─── // ─── Central de notificações: o sino do portal ────────────────────────────── const NotifSino = ({ setPage }) => { const [dados, setDados] = useState({ itens: [], nao_lidas: 0 }); const [aberto, setAberto] = useState(false); const token = () => localStorage.getItem('genesis_token'); const carregar = () => { fetch('/api/announcements/notifs', { headers: { 'Authorization': `Bearer ${token()}` } }) .then(r => r.ok ? r.json() : null).then(d => { if (d) setDados(d); }).catch(() => {}); }; useEffect(() => { carregar(); const t = setInterval(carregar, 60000); return () => clearInterval(t); }, []); const tempoRel = (iso) => { const min = Math.floor((Date.now() - new Date(iso).getTime()) / 60000); if (min < 1) return 'agora'; if (min < 60) return `${min}min`; const h = Math.floor(min / 60); if (h < 24) return `${h}h`; return `${Math.floor(h / 24)}d`; }; const abrir = (n) => { fetch(`/api/announcements/notifs/${n.id}/lida`, { method: 'POST', headers: { 'Authorization': `Bearer ${token()}` } }).catch(() => {}); setDados(d => ({ itens: d.itens.map(x => x.id === n.id ? { ...x, lida: true } : x), nao_lidas: Math.max(0, d.nao_lidas - 1) })); if (n.pagina && setPage) { setAberto(false); setPage(n.pagina); } }; const todasLidas = () => { fetch('/api/announcements/notifs/lidas', { method: 'POST', headers: { 'Authorization': `Bearer ${token()}` } }).catch(() => {}); setDados(d => ({ itens: d.itens.map(x => ({ ...x, lida: true })), nao_lidas: 0 })); }; return (
{aberto && ( <>
setAberto(false)} style={{position:'fixed',inset:0,zIndex:8090}}/>
Notificações {dados.nao_lidas > 0 && }
{dados.itens.length === 0 ? (
tudo em dia por aqui 🌊
) : dados.itens.map(n => (
abrir(n)} style={{padding:'11px 14px',borderBottom:'1px solid var(--line-soft)',cursor:'pointer',background: n.lida ? 'transparent' : 'var(--cream-2)',transition:'background .12s'}} onMouseEnter={e=>e.currentTarget.style.background='var(--cream-3)'} onMouseLeave={e=>e.currentTarget.style.background = n.lida ? 'transparent' : 'var(--cream-2)'}>
{!n.lida && } {n.titulo} {tempoRel(n.criado_em)}
{n.corpo &&
{n.corpo}
}
))}
)}
); }; const TopNav = ({page, setPage, state, lang, setLang, theme, setTheme, role, isStaff, currentUser, onCmdK, onLogout, isMobile, openMenu}) => { const [userMenu, setUserMenu] = useState(false); const canManage = role === 'admin' || isStaff === true; // Itens principais da barra (achatados — sem seções) // 'modulos' é o hub de cards; 'home' é o dashboard const navItems = [ {id:'home', label: lang==='pt'?'Início':'Home', icon:'home'}, {id:'modulos', label: lang==='pt'?'Módulos':'Modules', icon:'grid'}, {id:'agenda', label: lang==='pt'?'Agenda':'Schedule', icon:'calendar'}, {id:'avisos', label: lang==='pt'?'Avisos':'Notices', icon:'bell'}, {id:'solicitacoes', label: lang==='pt'?'Solicitações':'Requests', icon:'tools'}, ]; const primeiroNome = (currentUser?.nome || '').split(' ')[0] || '—'; const initials = (currentUser?.initials || (currentUser?.nome||'?').slice(0,2)).toUpperCase(); if (isMobile) { // No mobile, a barra vira um cabeçalho compacto com botão de menu return (
G
Genesis I
PORTAL
); } return (
{/* Logo */}
setPage('home')}>
G
MPSV Genesis I
PORTAL · OSM THOME
{/* Nav items */} {/* Right controls */}
{/* User menu */}
{userMenu && ( <>
setUserMenu(false)} style={{position:'fixed',inset:0,zIndex:198}}/>
{currentUser?.nome}
{currentUser?.genesis_id} · {role}
)}
); }; // IDs que pertencem ao hub de Módulos (para destacar a aba ativa) const MODULE_IDS = ['gangway','cabines','manifesto','pessoas','solicitacoes_op','coach','inventario','dbexplorer','config','cinema','musica','saude','conquistas','habilidades','permissoes']; // ─── ModulesPage — hub de cards (estilo Cabin Management) ─── const ModulesPage = ({setPage, state, lang, role, isStaff}) => { const canManage = role === 'admin' || isStaff === true; const isAdmin = role === 'admin'; // Catálogo de módulos com cor, ícone e permissão const MODULES = [ // Operacional (gestão) {id:'bridge', icon:'anchor', color:'#1F2A2E', pt:'Bridge', en:'Bridge', descPt:'Quadro de fainas, POs e NPT', descEn:'Tasks, POs & NPT', need:'manage', grupo:'op'}, {id:'logbook', icon:'list', color:'#1F5755', pt:'Logbook', en:'Logbook', descPt:'Console de turno DP', descEn:'DP watch console', need:'manage', grupo:'op'}, {id:'gangway', icon:'anchor', color:'#1F5755', pt:'Gangway', en:'Gangway', descPt:'Embarque e desembarque', descEn:'Boarding control', need:'manage', grupo:'op'}, {id:'cabines', icon:'grid', color:'#5C8DAE', pt:'Cabines', en:'Cabins', descPt:'Acomodação a bordo', descEn:'Accommodation', need:'manage', grupo:'op'}, {id:'manifesto',icon:'list', color:'#5C7E4F', pt:'Manifesto', en:'Manifest', descPt:'Quem está a bordo', descEn:"Who's on board", need:'manage', grupo:'op'}, {id:'permissoes',icon:'lock', color:'#B14E36', pt:'Permissões', en:'Permissions', descPt:'Perfis e autorizações por módulo', descEn:'Profiles & module grants', need:'manage', grupo:'op'}, {id:'pessoas', icon:'users', color:'#D9694B', pt:'Pessoas', en:'People', descPt:'Tripulação e visitantes', descEn:'Crew & visitors', need:'manage', grupo:'op'}, {id:'solicitacoes_op', icon:'flag', color:'#B14E5C', pt:'Triagem', en:'Triage', descPt:'Painel de solicitações', descEn:'Requests board', need:'manage', grupo:'op'}, {id:'coach', icon:'health', color:'#C0728C', pt:'Coach', en:'Coach', descPt:'Treino, dieta e avaliações', descEn:'Training & diet', need:'manage', grupo:'op'}, {id:'inventario', icon:'list', color:'#1F5755', pt:'Inventário', en:'Inventory', descPt:'Paióis, itens e contagens', descEn:'Storerooms & stock', need:'manage', grupo:'op'}, {id:'dbexplorer', icon:'grid', color:'#1F2A2E', pt:'DB Explorer', en:'DB Explorer', descPt:'O banco como planilha (só leitura)', descEn:'Database as spreadsheet (read-only)', need:'admin', grupo:'op'}, {id:'config', icon:'flag', color:'#6B6258', pt:'Configurações', en:'Settings', descPt:'Aparência e sistema', descEn:'Appearance & system', need:'all', grupo:'op'}, // Convivência (todos) {id:'cinema', icon:'film', color:'#B14E36', pt:'Cinema', en:'Cinema', descPt:'Sessões e filmes', descEn:'Movie nights', need:'all', grupo:'conv'}, {id:'musica', icon:'music', color:'#5C8DAE', pt:'Música', en:'Music', descPt:'Playlists do navio', descEn:'Ship playlists', need:'all', grupo:'conv'}, {id:'saude', icon:'health', color:'#5C7E4F', pt:'Saúde', en:'Health', descPt:'Bem-estar e exercício', descEn:'Wellness', need:'all', grupo:'conv'}, {id:'conquistas',icon:'star', color:'#C68A1F', pt:'Conquistas', en:'Achievements', descPt:'Medalhas da tripulação', descEn:'Crew badges', need:'all', grupo:'conv'}, {id:'habilidades',icon:'fork', color:'#1F5755', pt:'Habilidades', en:'Skills', descPt:'Talentos a bordo', descEn:'Talents aboard', need:'all', grupo:'conv'}, ]; const chavesHub = state?.currentUser?.permissoes || []; const canSee = (m) => m.need==='all' ? true : m.need==='admin' ? isAdmin : (canManage || chavesHub.some(k => k.startsWith(m.id + '.'))); const visible = MODULES.filter(canSee); const op = visible.filter(m=>m.grupo==='op'); const conv = visible.filter(m=>m.grupo==='conv'); const renderGroup = (title, mods) => mods.length > 0 && (
{title}
{mods.map(m => ( ))}
); return (
{lang==='pt'?'todos os recursos':'all features'}

Módulos.

{renderGroup(lang==='pt'?'Operação':'Operations', op)} {renderGroup(lang==='pt'?'Convivência':'Community', conv)}
); }; Object.assign(window, {Sidebar, BottomNav, MobileMenu, Topbar, TopNav, ModulesPage, MODULE_IDS, BridgeBanner, CmdK, NAV_ALL, visibleNav, PageTitles});