/* screen_comercial_bp_studio.jsx — BP Studio
Edição de objectivos de performance por segmento/modelo/mês
Dados: tabela bp_objectivos via /api/bp/*
*/
const BP_MESES = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];
const BP_SEGS_MIMAKI = [
{ id: 'SG', label: 'Sign & Graphics' },
{ id: 'CP', label: 'Cutting Plotters' },
{ id: 'IP', label: 'Inkjet Print' },
{ id: 'TA', label: 'Têxtil' },
{ id: '3D', label: '3D' },
];
const BP_SEGS_MEDIA = [
{ id: 'DECAL', label: 'Decal' },
{ id: 'BIOND', label: 'Biond' },
{ id: 'OUTROS', label: 'Outros' },
];
const BP_EMPRESAS = [
{ id: 'PTDIG', label: 'Portugal (PTDIG)' },
{ id: 'DIGES', label: 'Espanha (DIGES)' },
{ id: 'IBERIA', label: 'Ibéria (total)' },
];
function bpCanEdit(userTipo) {
return ['ceo','board','superadmin','admin'].includes(userTipo);
}
// ── Hook: versões ─────────────────────────────────────────────────────────────
function useBpVersoes(fy) {
const [versoes, setVersoes] = React.useState([]);
const [loading, setLoading] = React.useState(false);
const load = React.useCallback(() => {
setLoading(true);
fetch(`/api/bp/versoes?fy=${fy}`)
.then(r => r.json())
.then(rows => { setVersoes(Array.isArray(rows) ? rows : []); setLoading(false); })
.catch(() => setLoading(false));
}, [fy]);
React.useEffect(() => { load(); }, [load]);
return { versoes, loading, reload: load };
}
// ── Hook: objectivos ──────────────────────────────────────────────────────────
function useBpObjectivos(versaoId, empresa) {
const [rows, setRows] = React.useState([]);
const [loading, setLoading] = React.useState(false);
React.useEffect(() => {
if (!versaoId || !empresa) { setRows([]); return; }
setLoading(true);
fetch(`/api/bp/objectivos?versao_id=${versaoId}&empresa=${empresa}`)
.then(r => r.json())
.then(data => { setRows(Array.isArray(data) ? data : []); setLoading(false); })
.catch(() => setLoading(false));
}, [versaoId, empresa]);
return { rows, loading };
}
// ── Grelha editável por segmento ──────────────────────────────────────────────
const BpGrid = ({ rows, seg, canEdit, versaoId, empresa, onSaved }) => {
// edits: key "modelo|mes" → qty
const [edits, setEdits] = React.useState({});
const [saving, setSaving] = React.useState(false);
const [msg, setMsg] = React.useState(null);
// Reset edits when rows/seg change
React.useEffect(() => { setEdits({}); setMsg(null); }, [rows, seg, versaoId, empresa]);
// Filter rows by segmento
const segRows = rows.filter(r => r.segmento === seg);
// Build grid: modelo → {1:qty, 2:qty, ...}
const modelos = [...new Set(segRows.map(r => r.modelo))].sort();
const base = {};
segRows.forEach(r => {
if (!base[r.modelo]) base[r.modelo] = {};
base[r.modelo][r.mes] = parseFloat(r.qty) || 0;
});
function getQty(modelo, mes) {
const k = `${modelo}|${mes}`;
if (k in edits) return edits[k];
return base[modelo]?.[mes] ?? 0;
}
function handleChange(modelo, mes, val) {
const k = `${modelo}|${mes}`;
const num = val === '' ? 0 : parseFloat(val);
setEdits(prev => ({ ...prev, [k]: isNaN(num) ? 0 : num }));
}
function hasChanges() { return Object.keys(edits).length > 0; }
async function handleSave() {
setSaving(true); setMsg(null);
const cells = Object.entries(edits).map(([k, qty]) => {
const [modelo, mes] = k.split('|');
return { modelo, mes: parseInt(mes), qty };
});
try {
const r = await fetch('/api/bp/objectivos', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ versao_id: versaoId, empresa, seg, cells }),
});
const d = await r.json();
if (!r.ok) throw new Error(d.error || 'Erro ao guardar');
setMsg({ ok: true, text: `Guardado — ${d.updated} células actualizadas` });
setEdits({});
if (onSaved) onSaved();
} catch (e) {
setMsg({ ok: false, text: e.message });
} finally { setSaving(false); }
}
const thSt = { padding: '6px 8px', fontSize: 10, fontWeight: 700, color: 'var(--dgd-fg-3,#6b7280)', textTransform: 'uppercase', letterSpacing: '0.06em', borderBottom: '2px solid var(--dgd-border-1,#e5e7eb)', textAlign: 'center', background: 'var(--dgd-bg-card,white)', position: 'sticky', top: 0, zIndex: 1 };
const tdSt = { padding: '4px 2px', textAlign: 'center', borderBottom: '1px solid var(--dgd-border-1,#f3f4f6)' };
const inputSt = { width: 36, textAlign: 'center', fontSize: 12, border: '1px solid transparent', borderRadius: 4, padding: '2px 2px', background: 'transparent', color: 'var(--dgd-fg-1,#111)', outline: 'none' };
const inputFocusSt = { border: '1px solid var(--dgd-accent,#3b82f6)', background: 'white' };
if (modelos.length === 0) return (
Sem dados para este segmento nesta versão.
);
return (
{/* Tabela */}
| Modelo |
{BP_MESES.map((m, i) => {m} | )}
Total |
{modelos.map(modelo => {
const total = BP_MESES.reduce((s, _, i) => s + (getQty(modelo, i + 1) || 0), 0);
const hasEdit = BP_MESES.some((_, i) => `${modelo}|${i+1}` in edits);
return (
|
{modelo}
|
{BP_MESES.map((_, i) => {
const mes = i + 1;
const qty = getQty(modelo, mes);
const edited = `${modelo}|${mes}` in edits;
return (
{canEdit ? (
handleChange(modelo, mes, e.target.value)}
onFocus={e => { e.target.style.border = '1px solid var(--dgd-accent,#3b82f6)'; e.target.style.background = 'white'; }}
onBlur={e => { if (!edited) { e.target.style.border = '1px solid transparent'; e.target.style.background = 'transparent'; } }}
/>
) : (
{qty || '—'}
)}
|
);
})}
{total % 1 === 0 ? total : total.toFixed(1)}
|
);
})}
{/* Totais */}
|
TOTAL {seg}
|
{BP_MESES.map((_, i) => {
const mes = i + 1;
const t = modelos.reduce((s, m) => s + (getQty(m, mes) || 0), 0);
return (
{t % 1 === 0 ? (t || '') : t.toFixed(1)}
|
);
})}
{(() => { const t = modelos.reduce((s, m) => s + BP_MESES.reduce((s2, _, i) => s2 + (getQty(m, i+1)||0), 0), 0); return t % 1 === 0 ? t : t.toFixed(1); })()}
|
{/* Footer */}
{canEdit && (
{hasChanges() && (
)}
{msg && (
{msg.ok ? '✓ ' : '✗ '}{msg.text}
)}
)}
Versão:
{versaoAtual && !versaoAtual.ativo && canEdit && (
)}
{versaoAtual?.ativo && (
ACTIVA
)}
{canEdit && !showForm && (
)}
{showForm && (
setNovaNome(e.target.value)}
placeholder="Nome da versão"
style={{ fontSize: 12, padding: '4px 8px', borderRadius: 6, border: '1px solid var(--dgd-border-1,#e5e7eb)', width: 160 }}
onKeyDown={e => e.key === 'Enter' && handleCriar()}
/>
)}
);
};
// ── Componente principal ──────────────────────────────────────────────────────
const ScreenBPStudio = ({ user, userTipo }) => {
const canEdit = bpCanEdit(userTipo || '');
const [fy, setFy] = React.useState(26);
const [empresa, setEmpresa] = React.useState('PTDIG');
const [tipo, setTipo] = React.useState('mimaki');
const [seg, setSeg] = React.useState('SG');
const { versoes, loading: vLoading, reload: reloadVersoes } = useBpVersoes(fy);
const versaoAtiva = versoes.find(v => v.ativo);
const [versaoId, setVersaoId] = React.useState(null);
// Inicializar versaoId quando versões carregam
React.useEffect(() => {
if (versoes.length && !versaoId) {
const ativa = versoes.find(v => v.ativo);
setVersaoId(ativa?.id || versoes[0]?.id || null);
}
}, [versoes]);
// Reset seg quando tipo muda
React.useEffect(() => {
setSeg(tipo === 'media' ? 'DECAL' : 'SG');
}, [tipo]);
const { rows, loading: rLoading } = useBpObjectivos(versaoId, empresa);
const activeSegs = tipo === 'media' ? BP_SEGS_MEDIA : BP_SEGS_MIMAKI;
const btnTogSt = (active) => ({
padding: '4px 12px', borderRadius: 6, border: 'none', cursor: 'pointer', fontSize: 12, fontWeight: active ? 700 : 400,
background: active ? 'var(--dgd-fg-1,#111)' : 'transparent',
color: active ? 'white' : 'var(--dgd-fg-3,#6b7280)',
});
return (
{/* Header */}
COMERCIAL · BP STUDIO
Objectivos de Performance
{!canEdit && (
Modo leitura — edição requer acesso CEO/Board
)}
{/* Controlos */}
{/* FY */}
FY:
{[25, 26].map(f => (
))}
{/* Empresa */}
Empresa:
{/* Versão */}
{vLoading ?
A carregar versões... : (
)}
{/* Tipo tabs */}
{/* Segmentos */}
{activeSegs.map(s => (
))}
{/* Grelha */}
{seg} — {activeSegs.find(s => s.id === seg)?.label} · {BP_EMPRESAS.find(e => e.id === empresa)?.label} · FY{fy}
{versoes.find(v => v.id === versaoId)?.nome ? ` · ${versoes.find(v => v.id === versaoId).nome}` : ''}
{rLoading ? (
A carregar...
) : !versaoId ? (
Selecciona uma versão.
) : (
{}}
/>
)}