{title}

{desc&&

{desc}

}

{scoped&&}{actions}

;} function Stub({icon,title,desc}){return

{title}

{desc}

;} const CP_ICON=["M12 4.2l2.2 5.6 5.6 2.2-5.6 2.2-2.2 5.6-2.2-5.6L4.2 12l5.6-2.2z"]; function Copilot({route,label,open,setOpen}){ const [msgs,setMsgs]=React.useState([]);const [q,setQ]=React.useState(""); const [ctx,setCtx]=React.useState(true); const listRef=React.useRef(null); React.useEffect(()=>{const el=listRef.current;if(el)el.scrollTop=el.scrollHeight;},[msgs]); const sug=(CP_SUG[route]||[]).slice(0,2); const send=text=>{const v=(text||q).trim();if(!v)return; setMsgs(m=>[...m,{me:true,t:v},{me:false,t:ctx?"Com o contexto de "+label+", respondia aqui ligado aos dados reais.":"Respondia aqui, sem contexto de nenhum ecrã em particular."}]);setQ("");}; if(!open)return
setOpen(true)} title="Abrir copiloto (⌘J)">
; return
setOpen(false)}/>

Copiloto {msgs.length>0&&setMsgs([])}>} setOpen(false)}>

{!msgs.length&&

Em que posso ajudar?

Pergunta o que quiseres, sobre qualquer assunto. Se quiseres, junto o contexto do que tens aberto.

{[...sug,"Escreve um email","Resume um documento"].slice(0,4).map(s=> send(s)} className="cp-sug">{s})}
} {msgs.map((m,i)=>
{m.t}
)}

{ctx&&
{label}setCtx(false)} title="Remover contexto" style={{cursor:"pointer",display:"inline-flex",opacity:0.6}}>
} setQ(e.target.value)} onKeyDown={e=>{if(e.key==="Enter"&&!e.shiftKey){e.preventDefault();send();}}} rows={2} placeholder="Escreve uma pergunta…" className="cp-ta"/> <div className="row" style={{gap:8,marginTop:6}}> {!ctx&&<span className="cp-add" onClick={()=>setCtx(true)} title="Juntar o contexto desta página"><I d={["M12 5v14","M5 12h14"]} size={13}/>contexto</span>} <div className="spring"/> <span className="cp-send" onClick={()=>send()} title="Enviar"><I d={["m22 2-7 20-4-9-9-4z"]} size={15}/></span> </div> </div> </div> </aside> </React.Fragment>; } function RailTips({active}){ const [tip,setTip]=React.useState(null); React.useEffect(()=>{ if(!active){setTip(null);return;} const enter=e=>{const el=e.target.closest?e.target.closest("[data-tip]"):null; if(!el||!el.closest(".rail"))return; const r=el.getBoundingClientRect(); setTip({t:el.getAttribute("data-tip"),x:r.right+12,y:r.top+r.height/2});}; const leave=e=>{const el=e.target.closest?e.target.closest("[data-tip]"):null;if(el)setTip(null);}; document.addEventListener("mouseover",enter); document.addEventListener("mouseout",leave); window.addEventListener("scroll",()=>setTip(null),true); return ()=>{document.removeEventListener("mouseover",enter);document.removeEventListener("mouseout",leave);}; },[active]); if(!active||!tip)return null; return <div className="tip on" style={{left:tip.x,top:tip.y,transform:"translateY(-50%)"}}>{tip.t}</div>; } function useWidth(ref){ const [w,setW]=React.useState(0); React.useLayoutEffect(()=>{ let raf=0,last=0; const read=()=>{const el=ref.current;if(!el)return;const n=el.getBoundingClientRect().width; if(n&&Math.abs(n-last)>0.5){last=n;setW(n);}}; read(); let ro;if(window.ResizeObserver){try{ro=new ResizeObserver(read);ro.observe(ref.current);}catch(e){}} window.addEventListener("resize",read); const tick=()=>{read();raf=window.setTimeout(tick,250);}; raf=window.setTimeout(tick,250); return ()=>{if(ro)ro.disconnect();window.removeEventListener("resize",read);clearTimeout(raf);}; },[ref]); return w; } const isMac=typeof navigator!=="undefined"&&/Mac|iPhone|iPad/.test(navigator.platform||navigator.userAgent); function Spotlight({onClose,go}){ const [q,setQ]=React.useState("");const [i,setI]=React.useState(0);const ref=React.useRef(null); const nav=NAV.flatMap(([,,items])=>items.flatMap(([id,l,ic,kids])=>kids?kids.map(([k,kl])=>({kind:"Ecrã",label:kl,id:k,ic})):[{kind:"Ecrã",label:l,id,ic}])); const acts=SPOT_ACTIONS.map(([l,id,ic])=>({kind:"Ação",label:l,id,ic})); const people=["Ana Reis","Bruno Costa","Marta Lopes","Tomás Jervell","Tomás Machado"].map(n=>({kind:"Pessoa",label:n,id:"admin-employees",person:true})); const all=[...acts,...nav,...people]; const res=(q?all.filter(r=>r.label.toLowerCase().includes(q.toLowerCase())):[...acts.slice(0,4),...nav.slice(0,5)]).slice(0,9); React.useEffect(()=>{if(ref.current)ref.current.focus();},[]); React.useEffect(()=>setI(0),[q]); const key=e=>{if(e.key==="Escape")onClose();if(e.key==="ArrowDown"){e.preventDefault();setI(v=>Math.min(v+1,res.length-1));}if(e.key==="ArrowUp"){e.preventDefault();setI(v=>Math.max(v-1,0));}if(e.key==="Enter"&&res[i])go(res[i].id);}; const tone={"Ação":"accent","Ecrã":"neutral","Pessoa":"info"}; return <div onClick={onClose} style={{position:"fixed",inset:0,zIndex:200,background:"rgba(12,16,18,0.34)",backdropFilter:"blur(6px)",display:"grid",placeItems:"center",padding:16,animation:"spotIn 140ms ease-out"}}> <div onClick={e=>e.stopPropagation()} style={{width:"min(620px,100%)",background:"var(--ui-surface)",border:"1px solid var(--ui-border)",borderRadius:"var(--ui-r-xl)",boxShadow:"var(--ui-elev-3, 0 24px 70px rgba(10,20,25,0.28))",overflow:"hidden",animation:"spotPanel 200ms cubic-bezier(0.16,1,0.3,1)"}}> <div className="row" style={{gap:12,padding:"16px 20px",borderBottom:res.length?"1px solid var(--ui-divider)":"none"}}> <I d={P.search} size={19} c="var(--ui-text-3)"/> <input ref={ref} value={q} onChange={e=>setQ(e.target.value)} onKeyDown={key} placeholder="Pesquisar ecrãs, ações e pessoas…" style={{flex:1,border:"none",outline:"none",background:"transparent",color:"var(--ui-text)",fontFamily:"var(--font-sans)",fontSize:"var(--ui-fs-h3)",fontWeight:500}}/> <kbd style={{fontFamily:"var(--font-sans)",fontSize:"var(--ui-fs-xs)",fontWeight:600,border:"1px solid var(--ui-border-2)",borderRadius:5,padding:"2px 6px",color:"var(--ui-text-3)"}}>esc</kbd> </div> <div style={{maxHeight:"min(420px,50vh)",overflow:"auto",padding:res.length?6:0}}> {res.map((r,j)=><div key={r.kind+r.label} onMouseEnter={()=>setI(j)} onClick={()=>go(r.id)} className="row" style={{gap:12,padding:"11px 14px",borderRadius:"var(--ui-r-sm)",cursor:"pointer",background:i===j?"var(--ui-accent-weak)":"transparent"}}> {r.person?<UIAvatar name={r.label} size="sm"/>:<I d={P[r.ic||"grid"]} size={17} c="var(--ui-text-2)"/>} <span style={{flex:1,fontSize:"var(--ui-fs-body)",fontWeight:500}}>{r.label}</span> <UIPill tone={tone[r.kind]}>{r.kind}</UIPill> </div>)} {q&&res.length===0&&<div className="muted" style={{padding:"26px 20px",fontSize:"var(--ui-fs-sm)"}}>Sem resultados para «{q}».</div>} </div> <div className="row" style={{gap:16,padding:"9px 18px",borderTop:"1px solid var(--ui-divider)",background:"var(--ui-surface-2)"}}> {[["↑↓","navegar"],["↵","abrir"],["esc","fechar"]].map(([k,l])=><span key={k} className="row" style={{gap:8,fontSize:"var(--ui-fs-xs)",color:"var(--ui-text-3)"}}><kbd style={{fontFamily:"var(--font-sans)",fontWeight:600,border:"1px solid var(--ui-border-2)",borderRadius:4,padding:"0 5px"}}>{k}</kbd>{l}</span>)} </div> </div> </div>; } function App(){ const [dark,setDarkRaw]=React.useState(()=>{try{return localStorage.getItem("xcope-theme")==="dark";}catch(e){return false;}}); const setDark=v=>{setDarkRaw(v);try{localStorage.setItem("xcope-theme",v?"dark":"light");}catch(e){}}; const [spot,setSpot]=React.useState(false);const [navOpen,setNavOpen]=React.useState(false);const [help,setHelp]=React.useState(false); const [manualMini,setManualMini]=React.useState(null);const [autoMini,setAutoMini]=React.useState(false);const [phone,setPhone]=React.useState(false); const [sw,setSw]=React.useState(false);const [more,setMore]=React.useState(false); const railScroll=React.useRef(null); React.useEffect(()=>{const box=railScroll.current;if(!box)return; const id=window.setTimeout(()=>{ const el=box.querySelector('.nav-i[data-active="1"]');if(!el)return; const b=box.getBoundingClientRect(),r=el.getBoundingClientRect(); if(r.bottom>b.bottom-4) box.scrollTop+=r.bottom-b.bottom+12; else if(r.top<b.top+4) box.scrollTop-=b.top-r.top+12; },60); return ()=>window.clearTimeout(id); },[route]);const [companyId,setCompanyId]=React.useState("norte");const [groupView,setGroupView]=React.useState(false); const [scope,setScope]=React.useState(["norte"]);const [done,setDone]=React.useState([]); const pendCount=PEND.filter(p=>scope.includes(p.co)&&p.kind==="action"&&!done.includes(p.id)).length; const company=GROUP.companies.find(c=>c.id===companyId); const mini=phone?true:(manualMini===null?autoMini:manualMini);const setMini=v=>setManualMini(v); React.useEffect(()=>{const el=document.getElementById("app");if(!el||!window.ResizeObserver)return;const ro=new ResizeObserver(es=>{const w=es[0].contentRect.width;setAutoMini(w<1180);setPhone(w<760);});ro.observe(el);return ()=>ro.disconnect();},[]); React.useEffect(()=>{const h=e=>{if((e.metaKey||e.ctrlKey)&&e.key.toLowerCase()==="b"){e.preventDefault();setManualMini(v=>!(v===null?autoMini:v));}};window.addEventListener("keydown",h);return ()=>window.removeEventListener("keydown",h);},[autoMini]); React.useEffect(()=>{const h=e=>{if((e.metaKey||e.ctrlKey)&&e.key.toLowerCase()==="k"){e.preventDefault();setSpot(v=>!v);}};window.addEventListener("keydown",h);return ()=>window.removeEventListener("keydown",h);},[]); const [openNav,setOpenNav]=React.useState({});const swRef=React.useRef(null);const [swPos,setSwPos]=React.useState({top:0,left:0,w:224});const [rowMenu,setRowMenu]=React.useState(null);const [userMenu,setUserMenu]=React.useState(false); React.useEffect(()=>{const h=e=>{if(!(e.metaKey||e.ctrlKey))return;const n=parseInt(e.key,10); if(!n)return;const list=GROUP.companies.filter(c=>!c.noAccess);const c=list[n-1];if(!c)return; e.preventDefault();setCompanyId(c.id);setGroupView(false);setScope([c.id]);setSw(false);}; window.addEventListener("keydown",h);return ()=>window.removeEventListener("keydown",h);},[]); const [cp,setCp]=React.useState(()=>{try{return window.innerWidth>=1100;}catch(e){return true;}}); React.useEffect(()=>{const h=e=>{if((e.metaKey||e.ctrlKey)&&e.key.toLowerCase()==="j"){e.preventDefault();setCp(v=>!v);}};window.addEventListener("keydown",h);return ()=>window.removeEventListener("keydown",h);},[]); React.useEffect(()=>{const h=e=>{if((e.metaKey||e.ctrlKey)&&e.key==="/"){e.preventDefault();setHelp(v=>!v);}};window.addEventListener("keydown",h);return ()=>window.removeEventListener("keydown",h);},[]); const [hist,setHist]=React.useState(["home"]);const [hi,setHi]=React.useState(0); const route=hist[hi]; const secOf=id=>{const g=SECTION_OF[id]||null;return g;}; const setRoute=React.useCallback(id=>{ // pushing only makes sense inside the same nav tab/section; crossing tabs starts a new flow setHist(h=>{const cur=h[hi];if(cur===id)return h; if(secOf(cur)!==secOf(id)){setHi(0);return [id];} const base=h.slice(0,hi+1);setHi(base.length);return [...base,id];}); },[hi]); // rail / breadcrumb = switching tab: starts a fresh flow, arrows reset const jump=React.useCallback(id=>{setHist([id]);setHi(0);},[]); const canBack=hi>0,canFwd=hi<hist.length-1; React.useEffect(()=>{document.getElementById("app").setAttribute("data-theme",dark?"dark":"");},[dark]); React.useEffect(()=>{const el=document.getElementById("app");if(el)el.setAttribute("data-nav",navOpen?"open":"");},[navOpen]); React.useEffect(()=>{setNavOpen(false);},[route]); const Screen=S[route]||(()=><Stub icon="grid" title={LABELS[route]||"Ecrã"} desc="Mock em construção."/>); return (<CTX.Provider value={{scope,setScope,company,groupView,companies:GROUP.companies,done,setDone}}><React.Fragment> <div className={"railcol"+(mini?" mini":"")}> <div className="rail-srch" title="Pesquisar" onClick={()=>setSpot(true)}> <I d={P.search} size={16}/> <span className="lbl" style={{flex:1,fontSize:"var(--ui-fs-body)"}}>Pesquisar…</span> <span className="kbds">{[isMac?"⌘":"Ctrl","K"].map(k=><kbd key={k}>{k}</kbd>)}</span> </div> <aside className={"rail"+(mini?" mini":"")} style={{position:"relative"}}> <div className="rail-top"> <div className="rail-hdr"> <div ref={swRef} className="ws" style={{flex:1,minWidth:0,position:"relative"}} onClick={()=>{const el=swRef.current.closest(".rail")||swRef.current;const r=el.getBoundingClientRect();const t0=swRef.current.getBoundingClientRect().top;setSwPos({top:t0,left:r.right+8,w:256});setSw(v=>!v);}}><img className="mk" src={BRAND.logo} alt="Xcope" style={{objectFit:"cover"}}/><div className="ws-txt" style={{flex:1,minWidth:0}}><div style={{fontSize:"var(--ui-fs-body)",fontWeight:600,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{company.name}</div><div className="muted" style={{fontSize:"var(--ui-fs-xs)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{company.role}</div></div><span className="ws-txt" style={{display:"inline-flex",color:"var(--ui-text-3)",flexShrink:0}}><I d={["m7 15 5 5 5-5","m7 9 5-5 5 5"]} size={14}/></span></div> </div> {sw&&<React.Fragment><div onClick={()=>setSw(false)} style={{position:"fixed",inset:0,zIndex:60}}></div> <div className="teammenu" style={{top:swPos.top,left:swPos.left,width:swPos.w}}> <div className="tm-label">Plataforma Xcope</div> {PRODUCTS.map(p=><div key={p.id} className="tm-item" title={p.desc} onClick={()=>{if(p.url){window.location.href=p.url;}else{setSw(false);}}}> <span className="tm-ic" style={p.active?{background:"var(--ui-accent)",color:"var(--ui-on-accent)",borderColor:"transparent",fontWeight:600,fontSize:"var(--ui-fs-xs)"}:undefined}>{p.label.replace("XCOPE ","")[0]}</span> <span className="tm-name">{p.label}</span> {p.active ? <I d={["M20 6 9 17l-5-5"]} size={15} c="var(--ui-accent)"/> : <I d={["M7 17 17 7","M8 7h9v9"]} size={13} c="var(--ui-text-3)"/>} </div>)} <div className="tm-sep"/> <div className="tm-label">{GROUP.name}</div> <div className="tm-item" onClick={()=>{setGroupView(true);setScope(GROUP.companies.filter(c=>!c.noAccess).map(c=>c.id));setSw(false);jump("group");}}> <span className="tm-ic"><I d={P.grid} size={14}/></span> <span className="tm-name">Visão consolidada</span> {groupView&&<I d={["M20 6 9 17l-5-5"]} size={15} c="var(--ui-accent)"/>} </div> <div className="tm-sep"/> <div className="tm-label">Empresas</div> {GROUP.companies.map(c=>{const idx=GROUP.companies.filter(x=>!x.noAccess).indexOf(c)+1; return <div key={c.id} className={"tm-item"+(c.noAccess?" off":"")} title={c.noAccess?"Sem acesso a esta empresa":c.name} onClick={()=>{if(c.noAccess)return;setCompanyId(c.id);setGroupView(false);setScope([c.id]);setSw(false);}}> <span className="tm-ic" style={{background:c.color,color:"#fff",borderColor:"transparent",fontWeight:600,fontSize:"var(--ui-fs-xs)"}}>{c.short}</span> <span className="tm-name">{c.name}</span> {!groupView&&companyId===c.id ? <I d={["M20 6 9 17l-5-5"]} size={15} c="var(--ui-accent)"/> : !c.noAccess&&<span className="tm-kbd">{isMac?"⌘":"^"}{idx}</span>} </div>;})} <div className="tm-sep"/> <div className="tm-item" onClick={()=>{setSw(false);jump("admin-tenants");}}> <span className="tm-ic dashed"><I d={["M12 5v14","M5 12h14"]} size={14}/></span> <span className="tm-name muted" style={{fontWeight:500}}>Adicionar empresa</span> </div> </div></React.Fragment>} </div> <div className="rail-scroll" ref={railScroll}>{NAV.map(([group,kind,items],gi)=> <div key={gi} className={kind==="flat"?"navgroup flat":"navgroup"}> <div className="sec"><span>{group}</span></div> {items.map(([id,l,ic,kids])=>{ if(!kids)return <div key={id} className="menuitem"> <UINavItem title={mini?undefined:l} data-tip={l} aria-label={l} className="nav-i" icon={<I d={P[ic]} size={16}/>} active={route===id} data-active={route===id?"1":undefined} onClick={()=>{setSw(false);jump(id);}}><span className="lbl">{l}</span></UINavItem> <span className="menuaction" title="Mais" onClick={e=>{e.stopPropagation();setRowMenu(rowMenu===id?null:id);}}><I d={["M12 5h.01","M12 12h.01","M12 19h.01"]} size={15}/></span> {rowMenu===id&&<React.Fragment> <div onClick={()=>setRowMenu(null)} style={{position:"fixed",inset:0,zIndex:70}}/> <div className="rowmenu"> <div onClick={()=>setRowMenu(null)}><I d={P.folder} size={15}/>Abrir</div> <div onClick={()=>setRowMenu(null)}><I d={P.share} size={15}/>Partilhar</div> <div className="sep"/> <div onClick={()=>setRowMenu(null)}><I d={["M4 7h16","M10 11v6","M14 11v6","M6 7l1 13h10l1-13","M9 7V4h6v3"]} size={15}/>Remover do menu</div> </div></React.Fragment>} </div>; const inKids=kids.some(([k])=>k===route); const open=!mini&&(openNav[id]!==undefined?openNav[id]:inKids); return <div key={id} className="menuitem"> <UINavItem title={mini?undefined:l} data-tip={l} aria-label={l} className="nav-i" icon={<I d={P[ic]} size={16}/>} active={route===id||(inKids&&!open)} onClick={()=>{setSw(false);if(mini){jump(kids[0][0]);}else setOpenNav(o=>({...o,[id]:!open}));}} badge={!mini?<span className={"treechev"+(open?" open":"")}><I d={["m9 18 6-6-6-6"]} size={14}/></span>:undefined}> <span className="lbl">{l}</span></UINavItem> {open&&<div className="menusub">{kids.map(([kid,kl])=> <div key={kid} className={"subbtn nav-i"+(route===kid?" on":"")} data-active={route===kid?"1":undefined} onClick={()=>{setSw(false);jump(kid);}}>{kl}</div>)}</div>} </div>;})} {kind==="flat"&&<div className="menuitem" style={{position:"relative"}}> <UINavItem className="nav-i more" data-tip="Mais" aria-label="Mais" title={mini?undefined:"Mais"} onClick={()=>setMore(v=>!v)} icon={<I d={["M12 5h.01","M12 12h.01","M12 19h.01"]} size={16}/>}><span className="lbl">Mais</span></UINavItem> {more&&<React.Fragment> <div onClick={()=>setMore(false)} style={{position:"fixed",inset:0,zIndex:70}}/> <div className="usermenu" style={{left:mini?56:8,right:"auto",bottom:"auto",top:0,width:220}}> {[["calendar","Calendário"],["my-tickets","Os meus tickets"],["surveys","Inquéritos"],["career","Carreira"]].map(([id,l])=> <div key={id} onClick={()=>{setMore(false);jump(id);}}>{l}</div>)} </div> </React.Fragment>} </div>} </div>)}</div> <div className="rail-bot"> <div className="ws navuser" onClick={()=>setUserMenu(v=>!v)} style={{position:"relative"}}> <UIAvatar name={USER.name} size="sm"/> <div className="ws-txt" style={{flex:1,minWidth:0}}> <div style={{fontSize:"var(--ui-fs-body)",fontWeight:600,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{USER.name}</div> <div className="muted" style={{fontSize:"var(--ui-fs-xs)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{USER.email}</div> </div> <span className="ws-txt" style={{display:"inline-flex",color:"var(--ui-text-3)",flexShrink:0}}><I d={["m7 15 5 5 5-5","m7 9 5-5 5 5"]} size={14}/></span> </div> {userMenu&&<React.Fragment> <div onClick={()=>setUserMenu(false)} style={{position:"fixed",inset:0,zIndex:70}}/> <div className="usermenu"> <div className="row" style={{gap:8,padding:"6px 8px 10px"}}> <UIAvatar name={USER.name} size="sm"/> <div style={{minWidth:0}}><div style={{fontSize:"var(--ui-fs-body)",fontWeight:600}}>{USER.name}</div><div className="muted" style={{fontSize:"var(--ui-fs-xs)"}}>{USER.email}</div></div> </div> <div className="sep"/> <div onClick={()=>{setUserMenu(false);jump("profile");}}><I d={P.badge} size={15}/>Conta</div> <div onClick={()=>{setUserMenu(false);jump("notifications");}}><I d={P.bell} size={15}/>Notificações</div> <div onClick={()=>{setUserMenu(false);jump("settings");}}><I d={P.cog} size={15}/>Definições</div> <div onClick={()=>{setUserMenu(false);setHelp(true);}}><I d={P.info} size={15}/>Ajuda e atalhos</div> <div className="sep"/> <div onClick={()=>setUserMenu(false)}><I d={["M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4","m16 17 5-5-5-5","M21 12H9"]} size={15}/>Terminar sessão</div> </div></React.Fragment>} </div> </aside> </div> <div className="main"> <div className="navscrim" onClick={()=>setNavOpen(false)}/> <nav className="tabbar"> {[["home","Início",P.home],["inbox","Inbox",P.mail],["chat","Chat",P.chat],["notifications","Pendentes",P.bell],["profile","Perfil",P.badge]].map(([id,l,d])=> <button key={id} aria-current={route===id?"page":undefined} onClick={()=>jump(id)}> <I d={d} size={20}/> <span>{l}</span> {id==="notifications"&&pendCount>0&&<span className="dot"/>} </button>)} </nav> <header className="top"> <span className="ico-btn navtoggle" title="Menu" onClick={()=>setNavOpen(true)}><I d={["M4 6h16","M4 12h16","M4 18h16"]} size={18}/></span> <div className="row" style={{flex:1,minWidth:0,gap:8,fontSize:"var(--ui-fs-sm)",overflow:"hidden"}}> <span className="bare-btn" title={(mini?"Expandir":"Condensar")+" menu (⌘B)"} onClick={()=>setMini(!mini)}><I d={["M3 4h18v16H3z","M9 4v16"]} size={16}/></span> <span style={{width:1,height:16,background:"var(--ui-border)",flexShrink:0,margin:"0 4px"}}/> {(()=>{const sect=SECTION_OF[route];const grp=null;const lbl=LABELS[route]; return <React.Fragment>{sect&&<React.Fragment><span className="muted" style={{whiteSpace:"nowrap"}}>{sect}</span><span className="muted" style={{display:"inline-flex",opacity:0.6,flexShrink:0}}><I d={["m9 18 6-6-6-6"]} size={14}/></span></React.Fragment>}{lbl&&<span style={{fontWeight:600,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{lbl}</span>}</React.Fragment>;})()} </div> <div className="row" style={{gap:14}}> <div className="ico-btn" title="Pendentes" onClick={()=>jump("notifications")}><I d={P.bell} size={17}/>{pendCount>0&&<span className="cnt">{pendCount}</span>}</div> <UIAvatar name={USER.name} size="md" status="online"/> </div> </header> {spot&&<Spotlight onClose={()=>setSpot(false)} go={id=>{setSpot(false);jump(id);}}/>} <div className="scroll"><div style={{display:"flex",flexDirection:"column",minHeight:"100%",height:FIT.includes(route)?"100%":undefined}}><Screen go={setRoute} dark={dark} setDark={setDark}/></div></div> </div> <Copilot route={route} label={LABELS[route]||"esta página"} open={cp} setOpen={setCp}/> <UIModal open={help} onClose={()=>setHelp(false)} title="Ajuda e atalhos" width={480} footer={<div className="row" style={{gap:8}}><span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>Suporte: suporte@xcope.ai</span><div className="spring"/><UIButton variant="ghost" onClick={()=>setHelp(false)}>Fechar</UIButton></div>}> <div style={{display:"flex",flexDirection:"column",gap:4}}> {[[isMac?"⌘ K":"Ctrl K","Pesquisa e ações rápidas"],[isMac?"⌘ B":"Ctrl B","Recolher ou expandir a barra lateral"],[isMac?"⌘ J":"Ctrl J","Abrir ou fechar o Copiloto"],[isMac?"⌘ /":"Ctrl /","Esta janela de ajuda"],[isMac?"⌘ 1-3":"Ctrl 1-3","Mudar de empresa do grupo"],["Esc","Fechar janelas e painéis"]].map(([k,d])=> <div key={k} className="row" style={{gap:12,padding:"9px 0",borderBottom:"1px solid var(--ui-divider)",fontSize:"var(--ui-fs-sm)"}}> <span style={{minWidth:70}}>{k.split(" ").map(x=><kbd key={x} style={{fontFamily:"var(--font-sans)",fontSize:"var(--ui-fs-xs)",fontWeight:600,border:"1px solid var(--ui-border-2)",borderRadius:5,padding:"1px 6px",marginRight:4,background:"var(--ui-surface-2)"}}>{x}</kbd>)}</span> <span>{d}</span></div>)} <div className="muted" style={{fontSize:"var(--ui-fs-sm)",paddingTop:12,lineHeight:1.55}}>Precisas de mais? O Copiloto responde a perguntas sobre qualquer ecrã, e a equipa de suporte responde em menos de um dia útil.</div> </div> </UIModal> <RailTips active={mini}/> </React.Fragment></CTX.Provider>); } window.WFA={S,Head,AV,I,P,PEOPLE,useCtx,GROUP,useWidth}; window.XcopeShell={I,P,Head,Stub,useCtx,useWidth, mount:()=>ReactDOM.createRoot(document.getElementById("app")).render(<App/>)};