// Octale Legal — App principal com autenticação real // ─── URL ↔ view routing ─────────────────────────────────────────────────── const VIEW_TO_PATH = { painel: '/', // Meu Painel é a tela principal dash: '/dashboard', // dashboard antigo (fora da sidebar, mantido para validação) tasks: '/tarefas', propostas: '/propostas', 'contratos-revisao': '/contratos/revisao', documentos: '/documentos', 'contratos-honorarios': '/contratos/honorarios', assinaturas: '/assinaturas', library: '/biblioteca', clients: '/clientes', cases: '/casos', processos: '/processos', andamentos: '/andamentos', calendar: '/calendario', team: '/equipe', reports: '/relatorios', publicacoes: '/publicacoes', ai: '/ia', financeiro: '/financeiro', artigos: '/ferramentas/artigos', 'pdf-studio': '/ferramentas/pdf', 'org-admin': '/organizacao', 'gestor-dash': '/gestor', credits: '/creditos', }; const PATH_TO_VIEW = Object.fromEntries( Object.entries(VIEW_TO_PATH).map(([k, v]) => [v, k]) ); const viewFromPath = () => PATH_TO_VIEW[window.location.pathname] || 'painel'; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "kanbanLayout": "cards", "aiPanel": "fixed" }/*EDITMODE-END*/; // ============================================================ // Tela de Login // ============================================================ const LoginScreen = ({ onLogin, onGoToSignup }) => { const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(''); // Erro vindo do callback do Google (?google_error=...) — mostra e limpa a URL React.useEffect(() => { const params = new URLSearchParams(window.location.search); const googleError = params.get('google_error'); if (googleError) { setError(googleError); params.delete('google_error'); const qs = params.toString(); window.history.replaceState({}, '', window.location.pathname + (qs ? `?${qs}` : '')); } }, []); const handleLogin = async (e) => { e?.preventDefault(); if (!email || !password) return; setLoading(true); setError(''); try { const user = await window.OctaleApi.auth.login(email, password); onLogin(user); } catch (err) { setError(err.message || 'Credenciais inválidas.'); } finally { setLoading(false); } }; return (
{/* Coluna esquerda — identidade visual */}
{/* Círculos decorativos de fundo */}
{/* Logo Octale Legal */}
octale legal

Gestão jurídica integrada para o escritório moderno

Casos, tarefas, agenda e documentos em um único lugar — seguro e acessível de qualquer dispositivo.

{['Kanban de tarefas com cronômetro', 'IA integrada para análise de casos', 'Calendário com Google Calendar'].map(item => (
{item}
))}
{/* Coluna direita — formulário */}
{/* Logo compacta na coluna do form (mobile / telas pequenas onde a coluna esquerda some) */}
octale legal

Entrar

Acesso restrito à equipe do seu escritório

setEmail(e.target.value)} placeholder="voce@escritorio.com.br" autoFocus style={{ width: '100%', boxSizing: 'border-box', padding: '11px 14px', background: '#ffffff', border: '1.5px solid #ddd', borderRadius: 8, fontSize: 13.5, color: 'var(--octale-navy)', outline: 'none', transition: 'border-color .15s', }} onFocus={e => e.target.style.borderColor = 'var(--octale-navy)'} onBlur={e => e.target.style.borderColor = '#ddd'} />
setPassword(e.target.value)} placeholder="••••••••••••" style={{ width: '100%', boxSizing: 'border-box', padding: '11px 14px', background: '#ffffff', border: '1.5px solid #ddd', borderRadius: 8, fontSize: 13.5, color: 'var(--octale-navy)', outline: 'none', transition: 'border-color .15s', }} onFocus={e => e.target.style.borderColor = 'var(--octale-navy)'} onBlur={e => e.target.style.borderColor = '#ddd'} />
{error && (
{error}
)}
{/* Login com Google (Google Workspace — mesmo e-mail já cadastrado) */}
ou
); }; // ============================================================ // Tela de Cadastro — autoatendimento (POST /api/signup) // ============================================================ const SignupScreen = ({ onSignup, onGoToLogin }) => { const [organizationName, setOrganizationName] = React.useState(''); const [ownerName, setOwnerName] = React.useState(''); const [ownerEmail, setOwnerEmail] = React.useState(''); const [ownerPassword, setOwnerPassword] = React.useState(''); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(''); const fieldStyle = { width: '100%', boxSizing: 'border-box', padding: '11px 14px', background: '#ffffff', border: '1.5px solid #ddd', borderRadius: 8, fontSize: 13.5, color: 'var(--octale-navy)', outline: 'none', transition: 'border-color .15s', }; const labelStyle = { display: 'block', marginBottom: 6, fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--fg-muted)', }; const handleSignup = async (e) => { e?.preventDefault(); if (!organizationName || !ownerName || !ownerEmail || !ownerPassword) return; setLoading(true); setError(''); try { const user = await window.OctaleApi.auth.signup({ organizationName, ownerName, ownerEmail, ownerPassword }); onSignup(user); } catch (err) { setError(err.message || 'Não foi possível criar a conta.'); } finally { setLoading(false); } }; return (
{/* Coluna esquerda — identidade visual (mesma do login) */}
octale legal

Comece grátis, sem cartão

14 dias de teste com o produto completo — Casos, Propostas e Motor de Contratos inclusos, para você ver o valor antes de decidir o plano.

{['14 dias grátis, sem cartão de crédito', 'Cancele quando quiser', 'Seus dados isolados dos de outros escritórios'].map(item => (
{item}
))}
{/* Coluna direita — formulário de cadastro */}
octale legal

Criar conta

Sem compromisso — avalie por 14 dias

setOrganizationName(e.target.value)} placeholder="Advocacia Exemplo Ltda." autoFocus style={fieldStyle} onFocus={e => e.target.style.borderColor = 'var(--octale-navy)'} onBlur={e => e.target.style.borderColor = '#ddd'} />
setOwnerName(e.target.value)} placeholder="Nome completo" style={fieldStyle} onFocus={e => e.target.style.borderColor = 'var(--octale-navy)'} onBlur={e => e.target.style.borderColor = '#ddd'} />
setOwnerEmail(e.target.value)} placeholder="voce@escritorio.com.br" style={fieldStyle} onFocus={e => e.target.style.borderColor = 'var(--octale-navy)'} onBlur={e => e.target.style.borderColor = '#ddd'} />
setOwnerPassword(e.target.value)} placeholder="Mínimo 8 caracteres" style={fieldStyle} onFocus={e => e.target.style.borderColor = 'var(--octale-navy)'} onBlur={e => e.target.style.borderColor = '#ddd'} />
{error && (
{error}
)}
); }; // ============================================================ // Error Boundary — captura erros de render e mostra detalhes // ============================================================ class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, error: null }; } static getDerivedStateFromError(error) { return { hasError: true, error }; } componentDidCatch(error, info) { console.error('PAC ErrorBoundary:', error, info); } render() { if (this.state.hasError) { return (
⚠ Erro ao carregar componente 
            {this.state.error && (this.state.error.stack || this.state.error.message || String(this.state.error))}
); } return this.props.children; } } // ============================================================ // Modal de notificacao de aceite (polling global) // ============================================================ const AcceptNotifModal = ({ proposals, onDismiss, onCreateTask }) => { const p = proposals[0]; const [busy, setBusy] = React.useState(false); const [taskDone, setTaskDone] = React.useState(false); const handleDismiss = async () => { setBusy(true); await onDismiss(p.id); setBusy(false); }; const handleCreateTask = async () => { setBusy(true); try { await onCreateTask(p.id); setTaskDone(true); } catch (e) { // ignore — continua e fecha await onDismiss(p.id); } finally { setBusy(false); } }; if (taskDone) { return (
✅

Tarefa criada!

A tarefa para {p.client_name} foi adicionada ao Kanban.

); } return (
{proposals.length > 1 && (
+{proposals.length - 1} mais
)}
🎉

Proposta aceita!

{p.client_name}

{p.proposal_number}{p.responsible ? ' · ' + p.responsible : ''}

{p.total_value && (
{p.total_value}
)}
); }; // ============================================================ // App principal // ============================================================ const App = () => { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [view, setView] = React.useState(() => viewFromPath()); const [navCaseId, setNavCaseId] = React.useState(null); const [navClientId, setNavClientId] = React.useState(null); const [cmdOpen, setCmdOpen] = React.useState(false); const [uploadOpen, setUploadOpen] = React.useState(false); const [notifOpen, setNotifOpen] = React.useState(false); const [menuOpen, setMenuOpen] = React.useState(false); const [currentUser, setCurrentUser] = React.useState(null); const [authLoading, setAuthLoading] = React.useState(true); // Tela pública mostrada quando não há sessão: login (padrão) ou cadastro // (/cadastro — link direto de marketing). Troca sem reload via pushState. const [authScreen, setAuthScreen] = React.useState( window.location.pathname === '/cadastro' ? 'signup' : 'login' ); const goToAuthScreen = (screen) => { const path = screen === 'signup' ? '/cadastro' : '/'; window.history.pushState({}, '', path); setAuthScreen(screen); }; const [counts, setCounts] = React.useState({ tasks: 0, clients: 0, cases: 0, publicacoes: 0, artigos: 0 }); const [acceptNotifs, setAcceptNotifs] = React.useState([]); const [notifUnread, setNotifUnread] = React.useState(0); const [artigoBannerOff, setArtigoBannerOff] = React.useState(false); // Verificar sessão ao carregar React.useEffect(() => { window.OctaleApi.auth.me() .then(user => { setCurrentUser(user); }) .catch(() => setCurrentUser(null)) .finally(() => setAuthLoading(false)); }, []); // Buscar contadores reais após autenticação // (super admin não pertence a nenhuma organização — não usa o app do escritório) React.useEffect(() => { if (!currentUser || currentUser.is_super_admin) return; const load = async () => { try { const [tasks, clients, cases, pubStats, andamentosCount] = await Promise.all([ window.OctaleApi.tasks.list().catch(() => []), window.OctaleApi.clients.list().catch(() => []), window.OctaleApi.cases.list().catch(() => []), window.OctaleApi.publicacoes.stats().catch(() => ({ nova: 0 })), window.OctaleApi.andamentos.pendingCount().catch(() => 0), ]); setCounts({ tasks: tasks.filter(t => t.kanban_column !== 'concluido').length, clients: clients.length, cases: cases.length, publicacoes: (pubStats.nova || 0) + (pubStats.sem_vinculo || 0), artigos: 0, andamentos: andamentosCount, }); } catch (e) { // silencioso — counts ficam em zero se API falhar } }; load(); }, [currentUser]); // Polling de aceites pendentes (a cada 15s quando autenticado) React.useEffect(() => { if (!currentUser || currentUser.is_super_admin) return; const poll = async () => { try { const proposals = await window.OctaleApi.propostas.pendingAccepts().catch(() => []); setAcceptNotifs(proposals || []); } catch (e) {} }; poll(); const id = setInterval(poll, 15000); return () => clearInterval(id); }, [currentUser]); // Polling do badge de notificações não lidas (30s) React.useEffect(() => { if (!currentUser || currentUser.is_super_admin) return; const poll = () => { window.OctaleApi.notifications.unreadCount() .then(setNotifUnread) .catch(() => {}); }; poll(); const id = setInterval(poll, 30000); return () => clearInterval(id); }, [currentUser]); // ⌘K / Ctrl+K React.useEffect(() => { const onKey = (e) => { const isCmd = e.metaKey || e.ctrlKey; if (isCmd && (e.key === 'k' || e.key === 'K')) { e.preventDefault(); setCmdOpen(true); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); // Sync view → URL (push state when view changes programmatically) React.useEffect(() => { const path = VIEW_TO_PATH[view] || '/'; if (window.location.pathname !== path) { history.pushState({ view }, '', path); } }, [view]); // Sync URL → view on browser back / forward React.useEffect(() => { const onPop = () => { setView(viewFromPath()); }; window.addEventListener('popstate', onPop); return () => window.removeEventListener('popstate', onPop); }, []); // Navegação programática via evento customizado (usado por componentes filhos) React.useEffect(() => { const onNav = (e) => { if (e.detail) setView(e.detail); }; window.addEventListener('pac:nav', onNav); return () => window.removeEventListener('pac:nav', onNav); }, []); // close notif on outside click React.useEffect(() => { if (!notifOpen) return; const onClick = () => setNotifOpen(false); window.addEventListener('click', onClick); return () => window.removeEventListener('click', onClick); }, [notifOpen]); const onJump = (target, item) => { if (target === '__upload') { setUploadOpen(true); return; } if (target === '__ai') { setView('ai'); return; } if (target) { // Navega para item específico vindo da busca (passa o ID direto) if (target === 'cases') setNavCaseId(item?.id || null); else if (target === 'clients') setNavClientId(item?.id || null); else { setNavCaseId(null); setNavClientId(null); } setView(target); } }; // Loading inicial if (authLoading) return (
Carregando…
); // Não autenticado if (!currentUser) { return authScreen === 'signup' ? setCurrentUser(user)} onGoToLogin={() => goToAuthScreen('login')} /> : setCurrentUser(user)} onGoToSignup={() => goToAuthScreen('signup')} />; } // Super admin do app (dono da plataforma) — shell próprio, sem sidebar do escritório. if (currentUser.is_super_admin) { return ( window.OctaleApi.auth.logout()} /> ); } return (
{ setView(v); setNavCaseId(null); setNavClientId(null); setMenuOpen(false); }} counts={counts} user={currentUser} open={menuOpen} onClose={() => setMenuOpen(false)} />
setCmdOpen(true)} onOpenUpload={() => setUploadOpen(true)} onOpenNotif={(e) => { e?.stopPropagation?.(); setNotifOpen(v => !v); }} notifOpen={notifOpen} notifCount={notifUnread} user={currentUser} onLogout={() => window.OctaleApi.auth.logout()} onMenuOpen={() => setMenuOpen(v => !v)} />
{view === 'dash' && } {view === 'painel' && { if (v === 'cases') setNavCaseId(id ?? null); setView(v); }} />} {view === 'tasks' && } {view === 'propostas' && } {view === 'contratos-revisao' && } {view === 'documentos' && } {view === 'contratos-honorarios' && } {view === 'assinaturas' && } {view === 'library' && } {view === 'clients' && { setNavCaseId(id); setView('cases'); }} />} {view === 'cases' && } {view === 'processos' && { setNavCaseId(id); setView('cases'); }} />} {view === 'andamentos' && } {view === 'calendar' && } {view === 'team' && } {view === 'reports' && } {view === 'publicacoes-astrea' && } {view === 'publicacoes' && } {view === 'upload' && (() => { setUploadOpen(true); setView('painel'); return null; })()} {view === 'ai' && } {view === 'financeiro' && } {view === 'artigos' && } {view === 'org-admin' && } {view === 'gestor-dash' && } {view === 'credits' && } {view === 'pdf-studio' && (