159 lines
23 KiB
React
159 lines
23 KiB
React
import React, { useEffect, useState, useRef } from 'react';
|
|
import { createRoot } from 'react-dom/client';
|
|
import '../css/app.css';
|
|
import '../css/tempo-theme.css';
|
|
import ServicesWorkspace, { serviceAreas } from './ServicesWorkspace.jsx';
|
|
import DocumentPreparationWorkspace from './DocumentPreparationWorkspace.jsx';
|
|
import { DocumentPreviewConfiguration } from './DocumentPreview.jsx';
|
|
import CatalogueAccountingWorkspace from './CatalogueAccountingWorkspace.jsx';
|
|
import ServiceFiscalWorkspace from './ServiceFiscalWorkspace.jsx';
|
|
import ServiceInvoiceWorkspace from './ServiceInvoiceWorkspace.jsx';
|
|
import ServiceReceivablesWorkspace from './ServiceReceivablesWorkspace.jsx';
|
|
import WorkshopWorkspace from './WorkshopWorkspace.jsx';
|
|
import DirectCostsWorkspace from './DirectCostsWorkspace.jsx';
|
|
import IndustrialBudgetsWorkspace from './IndustrialBudgetsWorkspace.jsx';
|
|
import PurchasingBudgetWorkspace from './PurchasingBudgetWorkspace.jsx';
|
|
import IndustrialCostsWorkspace from './IndustrialCostsWorkspace.jsx';
|
|
import {navigationGroups} from './WorkspaceNavigation.jsx';
|
|
import ModuleNavigation, {moduleGroups} from './ModuleNavigation.jsx';
|
|
import {ContextTransition} from './context-transition.js';
|
|
import ModuleRecordsWorkspace from './ModuleRecordsWorkspace.jsx';
|
|
import ContextTransitionDialog from './ContextTransitionDialog.jsx';
|
|
import WorkspaceHome from './WorkspaceHome.jsx';
|
|
import WorkshopBillingWorkspace from './WorkshopBillingWorkspace.jsx';
|
|
import WorkshopCorrectionsWorkspace from './WorkshopCorrectionsWorkspace.jsx';
|
|
import BillingMenuWorkspace from './BillingMenuWorkspace.jsx';
|
|
import {billingSections} from './billing-menu.js';
|
|
import WorkshopMenuWorkspace from './WorkshopMenuWorkspace.jsx';
|
|
import {workshopSections} from './workshop-menu.js';
|
|
import StockMenuWorkspace from './StockMenuWorkspace.jsx';
|
|
import {stockSections} from './stock-menu.js';
|
|
import AccountingMenuWorkspace from './AccountingMenuWorkspace.jsx';
|
|
import {accountingSections} from './accounting-menu.js';
|
|
import PurchasingHome from './PurchasingHome.jsx';
|
|
|
|
const labels = { 'catalogue_accounting.view':'Consultar classificação contabilística', 'catalogue_accounting.propose':'Preparar classificação contabilística', 'catalogue_accounting.approve':'Validar ou recusar classificação contabilística', 'company.view': 'Consultar empresa', 'company.edit': 'Editar nome da empresa', 'unit.create': 'Criar unidades', 'access.manage': 'Gerir acessos', 'unit.view': 'Consultar unidade', 'unit.edit': 'Editar nome da unidade' };
|
|
|
|
function App() {
|
|
const [state, setState] = useState(null);
|
|
const [error, setError] = useState('');
|
|
const [notice, setNotice] = useState('');
|
|
const [busy, setBusy] = useState(false);
|
|
const [page, setPage] = useState('home');
|
|
const [aSelection, setASelection] = useState(null);
|
|
const transitions = useRef(new ContextTransition());
|
|
const [pendingTransition, setPendingTransition] = useState(null);
|
|
const [transitionBusy, setTransitionBusy] = useState(false);
|
|
const context = state?.context;
|
|
const currentToken = useRef(context?.token); currentToken.current = context?.token;
|
|
const mountedToken = useRef(context?.token);
|
|
useEffect(() => { if(mountedToken.current !== context?.token) { transitions.current.discard(); setASelection(null); setPage('home'); mountedToken.current=context?.token; } }, [context?.token]);
|
|
useEffect(() => { const leave=e=>{transitions.current.prune(); if(transitions.current.dirty.size||transitions.current.pending){e.preventDefault();e.returnValue='';}}; window.addEventListener('beforeunload',leave); return ()=>window.removeEventListener('beforeunload',leave); }, []);
|
|
function transition(action) { transitions.current.prune(); if(transitions.current.pending||busy||transitionBusy) {setError('Aguarde a conclusão da operação antes de mudar de contexto.');return;} if(transitions.current.dirty.size) setPendingTransition(()=>action); else action(); }
|
|
async function resolveTransition(save) { setTransitionBusy(true);setError(''); try { if(save) await transitions.current.save(); else transitions.current.discard(); const action=pendingTransition;setPendingTransition(null); await action(); } catch(e){setError(e.message);} finally{setTransitionBusy(false);} }
|
|
const can = (permission, unit = null) => !!context?.grants.some(g => g.permission === permission && g.unit_id === unit);
|
|
|
|
const allGroups = navigationGroups(can, context?.unit?.id ?? null);
|
|
const groups = [...allGroups.filter(g=>['start','admin'].includes(g.id)), ...moduleGroups(allGroups,context?.module_id)];
|
|
const navigate = (id,selection=null) => transition(async () => {
|
|
setError('');
|
|
if(!groups.some(g=>g.items.some(i=>i.id===id))) {
|
|
const target=context?.modules?.find(m=>moduleGroups(allGroups,m.id).some(g=>g.items.some(i=>i.id===id)));
|
|
if(!target){setError('Destino sem módulo ou permissão autorizados.');return;}
|
|
try {
|
|
const next=await api('/api/context','POST',{tenant_id:context.company.tenant_id,company_id:context.company.id,unit_id:context.unit?.id??null,module_id:target.id});
|
|
mountedToken.current=next.context.token;currentToken.current=next.context.token;setState(next);
|
|
} catch(e){setError(e.message);return;}
|
|
}
|
|
transitions.current.discard();setASelection(selection);setPage(id);
|
|
});
|
|
useEffect(() => { if (!groups.some(g => g.items.some(i => i.id === page))) setPage('home'); }, [context?.token, JSON.stringify(context?.grants), page]);
|
|
|
|
async function api(path, method = 'GET', body, token = context?.token, commandKey = null) {
|
|
const execute = async () => {
|
|
const response = await fetch(path, { method, credentials: 'same-origin', headers: { Accept: 'application/json', 'Content-Type': 'application/json', 'X-CSRF-TOKEN': state?.csrf || '', 'X-SGF-Context': token || '', ...(commandKey ? { 'Idempotency-Key': commandKey } : {}) }, ...(body === undefined ? {} : { body: JSON.stringify(body) }) });
|
|
const result = await response.json().catch(() => ({}));
|
|
if (!response.ok) {
|
|
if ([401,403,409].includes(response.status)) { await refresh(); }
|
|
const message = response.status === 419 ? 'A sessão expirou. Actualize a página e entre novamente.' : Object.values(result.errors || {}).flat().join(' ') || result.message || 'Não foi possível concluir a operação.';
|
|
throw new Error(message);
|
|
}
|
|
if(token && token !== currentToken.current) throw new Error('Resposta de um contexto anterior ignorada.');
|
|
return result;
|
|
};
|
|
return method==='GET' ? execute() : transitions.current.command(execute);
|
|
}
|
|
async function refresh() {
|
|
const response = await fetch('/api/session', { credentials: 'same-origin', headers: { Accept: 'application/json' } });
|
|
if (!response.ok) throw new Error('Não foi possível carregar a sessão.');
|
|
const next = await response.json(); setState(next);
|
|
if (next.notice) setNotice(next.notice);
|
|
}
|
|
useEffect(() => { refresh().catch(e => setError(e.message)); }, []);
|
|
async function perform(operation, message) {
|
|
setBusy(true); setError(''); setNotice('');
|
|
try { await operation(); await refresh(); if (message) setNotice(message); }
|
|
catch (e) { setError(e.message); }
|
|
finally { setBusy(false); }
|
|
}
|
|
async function select(companyId, unitId = null) {
|
|
const company = state.companies.find(c => c.id === Number(companyId));
|
|
if (!company) return;
|
|
transition(() => perform(() => api('/api/context', 'POST', { tenant_id: company.tenant_id, company_id: company.id, unit_id: unitId }), 'Contexto alterado. Seleccione o módulo.'));
|
|
}
|
|
if (!state) return <main className="loading"><h1>SGF TEMPO</h1><p role="status">{error || 'A carregar…'}</p></main>;
|
|
if (state.setup_pending) return <main className="setup-pending"><p className="eyebrow">SGF TEMPO · PREPARAÇÃO LOCAL</p><h1>Falta concluir a primeira conta</h1><p>A aplicação está pronta, mas ainda não existe um utilizador. O login ficará disponível depois de definires a palavra-passe no procedimento local já autorizado.</p><section className="panel"><h2>Concluir no terminal do VS Code</h2><p>Executa este comando, confere o âmbito apresentado e define a palavra-passe nos dois pedidos de entrada oculta:</p><pre>powershell.exe -NoProfile -ExecutionPolicy Bypass -File C:\laragon\data\sgf-tempo\run\complete-first-admin.ps1</pre><p className="help">Não envies a palavra-passe pelo chat. Nenhuma conta é criada por este ecrã.</p><button className="primary" disabled={busy} onClick={() => perform(async () => {}, '')}>Já concluí — actualizar estado</button>{error && <p role="alert">{error}</p>}</section></main>;
|
|
if (!state.user) return <div className="login-layout"><aside><span className="brand">TEMPO<span>SGF</span></span><h1>O seu trabalho,<br />no contexto certo.</h1><p>Uma entrada para as empresas e unidades a que tem acesso.</p><small>Ambiente local · Primeiro percurso funcional</small></aside><main className="login-card"><p className="eyebrow">BEM-VINDO AO SGF TEMPO</p><h2>Entrar na aplicação</h2><p className="muted">Use a conta preparada pelo procedimento local autorizado.</p>{error && <div className="alert error" role="alert">{error}</div>}<Login busy={busy} onSubmit={(email, password) => perform(() => api('/api/login', 'POST', { email, password }), 'Sessão iniciada. Seleccione o contexto de trabalho.')} /><p className="help">Precisa de recuperar o acesso? Solicite recuperação local assistida. Não existe recuperação por email nesta etapa.</p></main></div>;
|
|
return <div className="shell" onSubmitCapture={e=>{transitions.current.submitting=e.target;}} onInputCapture={e=>e.target.closest('main')&&!e.target.closest('.context-card')&&transitions.current.changed(e.target.closest('form')||e.target.closest('section')||e.target)} onChangeCapture={e=>e.target.closest('main')&&!e.target.closest('.context-card')&&transitions.current.changed(e.target.closest('form')||e.target.closest('section')||e.target)} onClickCapture={e=>{transitions.current.submitting=e.target.closest('form')||e.target.closest('section');const a=e.target.closest('a[href]');if(a&&a.origin===location.origin){e.preventDefault();transition(()=>{location.href=a.href;});}}}><ModuleNavigation groups={allGroups} context={context} page={page} navigate={navigate} changeModule={module_id=>transition(async()=>{await perform(()=>api('/api/context','POST',{tenant_id:context.company.tenant_id,company_id:context.company.id,unit_id:context.unit?.id??null,module_id}),'Módulo alterado.');})} user={state.user} busy={busy||transitionBusy} logout={()=>transition(()=>perform(()=>api('/api/logout','POST'),'Sessão terminada.'))} />{pendingTransition&&<ContextTransitionDialog busy={transitionBusy} error={error} onSave={()=>resolveTransition(true)} onDiscard={()=>resolveTransition(false)} onCancel={()=>setPendingTransition(null)}/>}<div className="workspace"><header><div><span className="eyebrow">CONTEXTO DE TRABALHO</span><strong>{context?.company.name || 'Seleccione uma empresa'}</strong><span className="muted">{context?.unit?.name || 'Sem unidade seleccionada'}</span></div><span className="local-badge">Ambiente local</span><div className="workspace-safety" role="status">Ensaios e rascunhos nos percursos identificados · Operações reais de custeio, oficinas, recebimentos e emissão bloqueadas.</div></header><main>
|
|
{error && <div className="alert error" role="alert">{error}</div>}{notice && <div className="alert success" role="status">{notice}</div>}
|
|
<section className="context-card"><label>Empresa<select aria-label="Empresa activa" disabled={busy} value={context?.company.id || ''} onChange={e => select(e.target.value)}><option value="">Escolher empresa autorizada</option>{state.companies.map(c => <option value={c.id} key={c.id}>{c.name}</option>)}</select></label><label>Unidade<select aria-label="Unidade activa" disabled={busy || !context} value={context?.unit?.id || ''} onChange={e => select(context.company.id, e.target.value ? Number(e.target.value) : null)}><option value="">Sem unidade seleccionada</option>{context?.units.map(u => <option value={u.id} key={u.id}>{u.name}</option>)}</select></label><p>Apenas os contextos com acesso explícito são apresentados.</p></section>
|
|
{!state.companies.length ? <section className="panel"><h1>Sem empresas autorizadas</h1><p>A conta existe, mas ainda não tem acesso a uma empresa. Peça ao responsável uma concessão explícita.</p></section> : !context ? <section className="panel"><h1>Escolha onde vai trabalhar</h1><p>Seleccione uma empresa. A pertença a um cliente contratante não dá acesso automático às suas empresas ou unidades.</p></section> : <div key={`${context.token}:${page}`}>
|
|
{page !== 'home' && page !== 'module_records' && context.module_id && <p className="help" role="status">Cadastros e rascunhos: apenas associações explícitas ao módulo activo. Dados anteriores sem associação estão preservados e pendentes de conferência pelo responsável. {can('access.manage')&&<button onClick={()=>navigate('module_records')}>Associações de módulos</button>}</p>}
|
|
{page === 'home' && <WorkspaceHome context={context} />}
|
|
{page === 'module_records' && <ModuleRecordsWorkspace context={context} can={can} api={api}/>}
|
|
{page === 'workshop_billing' && <WorkshopBillingWorkspace context={context} can={can} api={api} busy={busy} />}
|
|
{page === 'workshop_corrections' && <WorkshopCorrectionsWorkspace context={context} can={can} api={api} busy={busy} />}
|
|
{page === 'company' && <section className="panel"><p className="eyebrow">DADOS BÁSICOS</p><h1>Empresa</h1><NameForm key={context.company.id} label="Nome da empresa" initial={context.company.name} editable={can('company.edit')} busy={busy} onSave={name => perform(() => api(`/api/companies/${context.company.id}`, 'PATCH', { name }, context.token), 'Nome da empresa actualizado.')} />{!can('company.edit') && <p className="help">O seu acesso permite consulta. A edição exige uma concessão própria.</p>}</section>}
|
|
{page === 'units' && <><section className="panel"><p className="eyebrow">DADOS BÁSICOS</p><h1>Unidades autorizadas</h1>{!context.units.length && <p>Não tem consulta concedida a nenhuma unidade desta empresa.</p>}<ul className="unit-list">{context.units.map(u => <li key={u.id}><strong>{u.name}</strong><button disabled={busy || context.unit?.id === u.id} onClick={() => select(context.company.id, u.id)}>{context.unit?.id === u.id ? 'Seleccionada' : 'Seleccionar'}</button></li>)}</ul>{context.unit && <NameForm label="Nome da unidade" initial={context.unit.name} editable={can('unit.edit', context.unit.id)} busy={busy} onSave={name => perform(() => api(`/api/units/${context.unit.id}`, 'PATCH', { name }, context.token), 'Nome da unidade actualizado.')} />}</section>{can('unit.create') && <section className="panel"><h2>Criar unidade</h2><p className="help">A unidade será criada nesta empresa. Receberá consulta e edição explícitas apenas para a nova unidade.</p><NameForm label="Nome da nova unidade" initial="" editable busy={busy} button="Criar unidade" onSave={name => perform(() => api('/api/units', 'POST', { name }, context.token), 'Unidade criada com os seus acessos explícitos.')} /></section>}</>}
|
|
{serviceAreas[page] && <ServicesWorkspace key={page} area={page} context={context} can={can} api={api} perform={perform} busy={busy} initialId={aSelection?.area === page ? aSelection.id : null} initialCreate={aSelection?.area === page && aSelection.create} navigate={(area,id) => navigate(area,{area,id})} />}
|
|
{billingSections.some(s=>s.id===page)&&page!=='billing_drafts'&&<BillingMenuWorkspace key={JSON.stringify(context.grants)} section={page} context={context} can={can} api={api} navigate={(area,id=null,create=false)=>navigate(area,{area,id,create})}/>}
|
|
{stockSections.some(s=>s.id===page)&&<StockMenuWorkspace key={JSON.stringify(context.grants)} section={page} context={context} can={can} navigate={navigate} api={api}/>}
|
|
{accountingSections.some(s=>s.id===page)&&<AccountingMenuWorkspace key={JSON.stringify(context.grants)} section={page} context={context} can={can} navigate={navigate}/>}
|
|
{page === 'preview_model' && <DocumentPreviewConfiguration context={context} can={can} api={api} perform={perform} busy={busy} />}
|
|
{page === 'documents' && <DocumentPreparationWorkspace context={context} can={can} api={api} perform={perform} busy={busy} />}
|
|
{page === 'workshop' && <WorkshopWorkspace context={context} can={can} api={api} busy={busy} initialOrderId={aSelection?.area==='workshop'?aSelection.id:null} navigate={id=>navigate(id)} />}
|
|
{workshopSections.some(s=>s.id===page)&&page!=='workshop'&&<WorkshopMenuWorkspace key={JSON.stringify(context.grants)} section={page} context={context} can={can} api={api} navigate={(area,id=null)=>navigate(area,{area,id})}/>}
|
|
{page === 'direct_costs' && <DirectCostsWorkspace context={context} can={can} api={api} busy={busy} />}
|
|
{page === 'industrial_budgets' && <IndustrialBudgetsWorkspace context={context} can={can} api={api} busy={busy} />}
|
|
{page === 'purchasing_budget' && <PurchasingBudgetWorkspace context={context} can={can} api={api} busy={busy} />}
|
|
{page === 'purchasing_home' && <PurchasingHome context={context} can={can} navigate={navigate}/>}
|
|
{page === 'supplier_payables' && <section className="panel"><h1>Obrigações a fornecedores</h1><p>Percurso sintético ligado ao núcleo comum. Preparação, validação distinta e consulta, sem pagamentos ou vencimento presumido.</p><a href="/supplier-payables">Abrir preparação e consulta de obrigações</a></section>}
|
|
{page === 'supplier_payments' && <section className="panel"><h1>Pagamentos e afectações a fornecedores</h1><p>Ensaio sintético: preparação e confirmação distintas, afectação explícita e saldo canónico. Não executa transferências bancárias.</p><a href="/supplier-payments">Abrir pagamentos e afectações sintéticas</a></section>}
|
|
{page === 'industrial_costs' && <IndustrialCostsWorkspace context={context} can={can} api={api} busy={busy} />}
|
|
{page === 'service_receivables' && <ServiceReceivablesWorkspace context={context} can={can} api={api} busy={busy} />}
|
|
{page === 'service_invoice_setup' && <ServiceInvoiceWorkspace context={context} can={can} api={api} perform={perform} busy={busy} />}
|
|
{page === 'service_fiscal' && <ServiceFiscalWorkspace context={context} can={can} api={api} perform={perform} busy={busy} />}
|
|
{page === 'catalogue_accounting' && <CatalogueAccountingWorkspace context={context} can={can} api={api} perform={perform} busy={busy} />}
|
|
{page === 'access' && (can('access.manage') ? <AccessPanel context={context} can={can} api={api} perform={perform} busy={busy} /> : <section className="panel"><h1>Acesso não autorizado</h1><p>A gestão de acessos exige uma concessão própria.</p></section>)}
|
|
</div>}
|
|
</main><footer>SGF TEMPO · Rascunhos e confirmação interna · Sem emissão fiscal ou lançamentos</footer></div></div>;
|
|
}
|
|
function Login({ busy, onSubmit }) {
|
|
const [email, setEmail] = useState(''); const [password, setPassword] = useState('');
|
|
return <form onSubmit={async e => { e.preventDefault(); await onSubmit(email, password); setPassword(''); }}><label>Email<input type="email" autoComplete="username" value={email} onChange={e => setEmail(e.target.value)} required /></label><label>Palavra-passe<input type="password" autoComplete="current-password" value={password} onChange={e => setPassword(e.target.value)} required /></label><button className="primary" disabled={busy} type="submit">{busy ? 'A entrar…' : 'Entrar'}</button></form>;
|
|
}
|
|
function NameForm({ label, initial, editable, busy, onSave, button = 'Guardar nome' }) {
|
|
const [name, setName] = useState(initial);
|
|
return <form className="name-form" onSubmit={e => { e.preventDefault(); onSave(name); }}><label>{label}<input value={name} onChange={e => setName(e.target.value)} readOnly={!editable} maxLength={255} required /></label>{editable && <button className="primary" disabled={busy || !name.trim()}>{button}</button>}</form>;
|
|
}
|
|
function AccessPanel({ context, can, api, perform, busy }) {
|
|
const [list, setList] = useState(null); const [loadError, setLoadError] = useState('');
|
|
const [email, setEmail] = useState(''); const [scope, setScope] = useState('company'); const [permission, setPermission] = useState('company.view'); const [reason, setReason] = useState('');
|
|
const unit = scope === 'company' ? null : Number(scope);
|
|
const options = (unit === null ? ['company.view', 'company.edit', 'unit.create', 'access.manage'] : ['unit.view', 'unit.edit']).filter(p => can(p, unit));
|
|
useEffect(() => { api('/api/accesses').then(setList).catch(e => setLoadError(e.message)); }, [context.token]);
|
|
async function change(grant) { await perform(async () => { await api(grant ? '/api/accesses' : '/api/accesses/revoke', 'POST', { email, permission, unit_id: unit, reason }, context.token); setList(await api('/api/accesses')); }, grant ? 'Concessão registada.' : 'Revogação registada.'); }
|
|
return <><section className="panel"><p className="eyebrow">AUTORIZAÇÕES EXPLÍCITAS</p><h1>Gestão de acessos</h1><p>Actua apenas nesta empresa e pode delegar apenas direitos que possui no mesmo âmbito. Os utilizadores são preparados pelo procedimento local.</p>{loadError && <p role="alert">{loadError}</p>}<form onSubmit={e => { e.preventDefault(); change(true); }}><label>Email exacto do utilizador<input type="email" value={email} onChange={e => setEmail(e.target.value)} required /></label><div className="form-grid"><label>Âmbito<select value={scope} onChange={e => { setScope(e.target.value); setPermission(e.target.value === 'company' ? 'company.view' : 'unit.view'); }}><option value="company">Empresa activa</option>{context.units.map(u => <option key={u.id} value={u.id}>{u.name}</option>)}</select></label><label>Permissão<select value={permission} onChange={e => setPermission(e.target.value)}>{options.map(p => <option key={p} value={p}>{labels[p]}</option>)}</select></label></div><label>Motivo da alteração<textarea value={reason} onChange={e => setReason(e.target.value)} maxLength={500} required /></label><p className="help">Não escreva palavras-passe ou outros segredos no motivo. A revogação de consulta da empresa remove também os direitos dependentes, apenas se tiver autoridade sobre todos eles. Revogar a sua própria gestão pode exigir recuperação assistida de acessos.</p><div className="actions"><button className="primary" disabled={busy || !options.includes(permission)}>Conceder acesso</button><button type="button" disabled={busy || !email || !reason || !options.includes(permission)} onClick={() => change(false)}>Revogar acesso</button></div></form></section><section className="panel"><h2>Acessos nesta empresa</h2>{list ? <div className="table-scroll"><table><thead><tr><th>Utilizador</th><th>Permissão</th><th>Âmbito</th></tr></thead><tbody>{list.grants.map(g => { const member = list.members.find(m => m.id === g.user_id); return <tr key={g.id}><td>{member?.name}<small>{member?.email}</small></td><td>{labels[g.permission]}</td><td>{g.unit_id ? context.units.find(u => u.id === g.unit_id)?.name || 'Unidade autorizada' : 'Empresa'}</td></tr>; })}</tbody></table></div> : <p>A carregar acessos…</p>}</section></>;
|
|
}
|
|
createRoot(document.getElementById('app')).render(<App />);
|