// =========================================================== // DEAD SAILOR · PROJECT DOCK · SHARED COMPONENTS // =========================================================== const { useState, useEffect, useMemo, useRef, useCallback, Fragment } = React; var API = window.API; // ---- Tiny SVG icons (consistent stroke, no decoration) ---- const Ico = { arrow: (p={}) => , arrowL: (p={}) => , check: (p={}) => , close: (p={}) => , plus: (p={}) => , download: (p={}) => , upload: (p={}) => , bell: (p={}) => , search: (p={}) => , dot: (p={}) => , dash: (p={}) => , pin: (p={}) => , link: (p={}) => , ext: (p={}) => , drag: (p={}) => , trash: (p={}) => , edit: (p={}) => , view: (p={}) => , file: (p={}) => , flag: (p={}) => , layers: (p={}) => , inbox: (p={}) => , grid: (p={}) => , user: (p={}) => , users: (p={}) => , gear: (p={}) => , out: (p={}) => , home: (p={}) => , briefcase: (p={}) => , check2: (p={}) => , refresh: (p={}) => , send: (p={}) => , chat: (p={}) => , }; window.Ico = Ico; // ---- Button ---- function Button({ kind='default', size, icon, arrow, children, onClick, disabled, type, ...rest }){ const cls = ['btn']; if(kind === 'primary') cls.push('btn-primary'); if(kind === 'signal') cls.push('btn-signal'); if(kind === 'ghost') cls.push('btn-ghost'); if(kind === 'danger') cls.push('btn-danger'); if(size === 'sm') cls.push('btn-sm'); return ( ); } window.Button = Button; // ---- Chip / status ---- function Chip({ status='idle', children, live }){ return ( {children} ); } window.Chip = Chip; // Map status keys → chip variants const STATUS_MAP = { approved: 'approved', waiting: 'waiting', production: 'production', review: 'review', delay: 'delay', idle: 'idle', approval: 'waiting', 'brief-received': 'review', analysis: 'review', planning: 'production', final: 'approved', done: 'archived', 'in-analysis': 'waiting', awaiting: 'review', addendum: 'delay', }; function statusChip(key, label){ return {label}; } window.statusChip = statusChip; // ---- Avatar ---- function Avatar({ initials, size=36 }){ return ( {initials} ); } window.Avatar = Avatar; // ---- Sidebar ---- function Sidebar({ profile, current, navigate }){ const [user, setUser] = React.useState(null); const [briefingsCount, setBriefingsCount] = React.useState(0); React.useEffect(() => { if (API.token) { API.me().then(setUser).catch(() => {}); // Carrega contagem real de briefings pendentes API.getBriefings() .then(list => { const pendingCount = list.filter(b => b.status === 'pending' || b.status === 'in-analysis').length; setBriefingsCount(pendingCount); }) .catch(() => {}); } }, [profile]); const D = window.DS_DATA; const clientNav = [ { key:'home', label:'Dashboard', icon: Ico.home() }, { key:'projects', label:'Meus projetos', icon: Ico.briefcase() }, { key:'company', label:'Minha empresa',icon: Ico.user() }, ]; const adminNav = []; if (user) { if (user.role === 'admin') { adminNav.push( { key:'home', label:'Dashboard', icon: Ico.home() }, { key:'briefings', label:'Briefings', icon: Ico.inbox(), badge: briefingsCount > 0 ? String(briefingsCount) : null }, { key:'projects', label:'Projetos', icon: Ico.briefcase() }, { key:'clients', label:'Clientes', icon: Ico.users() }, { key:'settings', label:'Configurações',icon: Ico.gear() } ); } else if (user.role === 'leader') { adminNav.push( { key:'home', label:'Dashboard', icon: Ico.home() }, { key:'briefings', label:'Briefings', icon: Ico.inbox(), badge: briefingsCount > 0 ? String(briefingsCount) : null }, { key:'projects', label:'Projetos', icon: Ico.briefcase() }, { key:'clients', label:'Clientes', icon: Ico.users() } ); } else { // collaborator adminNav.push( { key:'projects', label:'Projetos', icon: Ico.briefcase() } ); } } else { // Fallback inicial adminNav.push( { key:'home', label:'Dashboard', icon: Ico.home() }, { key:'projects', label:'Projetos', icon: Ico.briefcase() } ); } const nav = profile === 'client' ? clientNav : adminNav; let whoRole = 'Cliente · Acesso'; if (profile !== 'client') { if (user?.role === 'admin') whoRole = 'Admin · Controle Total'; else if (user?.role === 'leader') whoRole = 'Líder · Gestão'; else if (user?.role === 'collaborator') whoRole = 'Colaborador · Projetos'; else whoRole = 'Equipe · Dead Sailor'; } const who = profile === 'client' ? { name: user?.name || D.currentClient.name, role: 'Cliente · Acesso completo', av: (user?.name?.[0] || D.currentClient.avatar) } : { name: user?.name || 'Denis Paganini', role: whoRole, av: (user?.name?.[0] || 'D') }; return ( ); } window.Sidebar = Sidebar; // ---- Topbar ---- function Topbar({ crumb, profile }){ const [isOpen, setIsOpen] = useState(false); const [notifications, setNotifications] = useState([]); const popoverRef = useRef(null); const loadNotifications = useCallback(async () => { if (!window.API?.getNotifications) return; try { const data = await window.API.getNotifications(); setNotifications(data); } catch (e) { console.warn('Erro ao carregar notificações:', e); } }, []); useEffect(() => { loadNotifications(); const timer = setInterval(loadNotifications, 15000); return () => clearInterval(timer); }, [loadNotifications]); useEffect(() => { if (!isOpen) return; function handleClickOutside(e) { if (popoverRef.current && !popoverRef.current.contains(e.target)) { setIsOpen(false); } } document.addEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside); }, [isOpen]); const unreadCount = notifications.filter(n => !n.read).length; const handleMarkAllRead = async (e) => { e.stopPropagation(); if (!window.API?.markAllNotificationsRead) return; try { await window.API.markAllNotificationsRead(); loadNotifications(); } catch (e) {} }; const handleItemClick = async (item) => { setIsOpen(false); if (window.API?.markNotificationRead) { try { await window.API.markNotificationRead(item.id); loadNotifications(); } catch (e) {} } if (item.link) { const cleanPath = item.link.replace(/^#/, ''); window.location.hash = cleanPath; } }; function getNotifIcon(title) { const t = title.toLowerCase(); if (t.includes('mensagem') || t.includes('chat')) return Ico.send({ width: 11, height: 11 }); if (t.includes('briefing')) return Ico.inbox({ width: 11, height: 11 }); if (t.includes('entrega') || t.includes('aprovad') || t.includes('revis')) return Ico.check2({ width: 11, height: 11 }); return Ico.bell({ width: 11, height: 11 }); } function formatTimeAgo(dateStr) { try { const d = new Date(dateStr); const diffMs = Date.now() - d.getTime(); const diffMins = Math.floor(diffMs / 60000); if (diffMins < 1) return 'Agora mesmo'; if (diffMins < 60) return `há ${diffMins} min`; const diffHrs = Math.floor(diffMins / 60); if (diffHrs < 24) return `há ${diffHrs} ${diffHrs === 1 ? 'hora' : 'horas'}`; return d.toLocaleDateString('pt-BR', { day: 'numeric', month: 'short' }); } catch(e) { return 'Algum tempo atrás'; } } return (
{crumb.flatMap((c, i) => { const node = {c}; return i === 0 ? [node] : [/, node]; })}
{Ico.search()} ⌘ K
{isOpen && (
Notificações {unreadCount > 0 && {unreadCount}} {unreadCount > 0 && ( )}
{notifications.length === 0 ? (
{Ico.bell({ width: 16, height: 16, style: { color: 'var(--steel-3)' } })} // NENHUMA NOTIFICAÇÃO PENDENTE
) : ( notifications.map(item => (
handleItemClick(item)} >
{getNotifIcon(item.title)}
{item.title} {item.body} {formatTimeAgo(item.created_at)}
)) )}
)}
25 MAI 2026
); } window.Topbar = Topbar; // ---- Stat card ---- function Stat({ l, v, desc, trend, em }){ return (
{l} {trend && {trend}}
{em ? {v} : v}
{desc}
); } window.Stat = Stat; // ---- Project card ---- function ProjectCard({ p, onOpen }){ return (
onOpen && onOpen(p.id)}>
{p.territory || 'DS / TERRITORY 014'} {statusChip(p.status, p.statusLabel)} {p.titleShort || p.title} {p.coord || '23°33′S · 46°38′W'}

{p.title.split(' ').slice(0,2).join(' ')}
{p.title.split(' ').slice(2).join(' ')}

{p.service}
// Progresso {p.progress}%
// Próximo prazo {p.nextDeadline}
{p.leadInitials} {p.leadInitials}
); } window.ProjectCard = ProjectCard; // ---- Section header ---- function SectionHd({ title, n, right }){ return (

{title}

{n && // {n}} {right}
); } window.SectionHd = SectionHd; // ---- Modal ---- function Modal({ title, onClose, children, footer, wide, xWide }){ useEffect(() => { const onKey = (e) => { if(e.key === 'Escape') onClose(); }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [onClose]); return (
e.stopPropagation()}>
{title}
{children}
{footer &&
{footer}
}
); } window.Modal = Modal; // ---- Field ---- function Field({ label, required, hint, children }){ return (
{children} {hint && {hint}}
); } window.Field = Field; // ---- Check ---- function Check({ checked, onChange, children }){ return (
onChange(!checked)}> {Ico.check({width:11, height:11})} {children}
); } window.Check = Check; // ---- Toast ---- function Toast({ children }){ return (
{children}
); } window.Toast = Toast; // ---- Tabs ---- function Tabs({ tabs, active, onChange }){ return (
{tabs.map((t, i) => (
onChange(t.key)}> § {String(i+1).padStart(2,'0')} {t.icon && {t.icon}} {t.label} {t.count != null && {t.count}}
))}
); } window.Tabs = Tabs; // ---- File icon helper ---- function FileIcon({ kind }){ return {kind}; } window.FileIcon = FileIcon; // ---- Notification toast helper hook ---- function useToast(){ const [msg, setMsg] = useState(null); useEffect(() => { if(!msg) return; const t = setTimeout(() => setMsg(null), 2800); return () => clearTimeout(t); }, [msg]); return [msg, setMsg]; } window.useToast = useToast;