{l.desc}
window.__sl && window.__sl.setModule && window.__sl.setModule('purchase')}
title="Open Purchasing" className="inline-flex items-center gap-1 rounded-md border border-line px-1.5 py-0.5 text-[10px] font-600 text-electric-soft hover:border-electric/50">
{l._committed > 0 &&
Committed {money(l._committed)} · awaiting purchase
}
{money(lineEst(l))}
{l.actual ? money(l.actual) : '—'}
{!readOnly &&
}
);
}
const est = lineEst(l);
const act = +l.actual || 0;
const variance = act === 0 ? 0 : act - est;
const owner = l.owner || '';
return (
onPatch({ desc: v })} placeholder="Line item…" className="text-[13px] font-600 text-zinc-100" />
onPatch({ owner: v })}
onAddOption={readOnly ? null : onAddOwner} onDeleteOption={readOnly ? null : onDeleteOwner}
trigger={owner
?
{initials(owner)} {owner}
:
onPatch({ qty: v })} className="text-zinc-300" /> ×
onPatch({ unit: v })}
onAddOption={readOnly ? null : onAddUnit} onDeleteOption={readOnly ? null : onDeleteUnit}
trigger={{l.unit || 'unit'} } />
× onPatch({ rate: v })} className="text-zinc-300" />
{money(est)}
onPatch({ actual: v })} placeholder="—"
className={cx('font-display text-[14px] font-700', act === 0 ? 'text-zinc-600' : variance > 0 ? 'text-[#FF4D6D]' : 'text-mint')} />
{!readOnly && (
)}
);
}
function BudgetModule({ mobile, readOnly = false }) {
const [cats, setCatsState] = useState(budgetLoad);
const setCats = next => {
setCatsState(prev => {
const v = typeof next === 'function' ? next(prev) : next;
window.SLStore.set(BUDGET_KEY, v);
return v;
});
};
const [target, setTargetState] = useState(budgetTarget);
const saveTarget = v => setTargetState(setBudgetTargetValue(v));
const [units, setUnits] = useState(() => listLoad(BUDGET_UNITS_KEY, UNITS_DEFAULT));
const [owners, setOwners] = useState(() => listLoad(BUDGET_OWNERS_KEY, OWNERS_DEFAULT));
const addUnit = u => setUnits(us => { const n = us.includes(u) ? us : [...us, u]; listSave(BUDGET_UNITS_KEY, n); return n; });
const deleteUnit = u => setUnits(us => { const n = us.filter(x => x !== u); listSave(BUDGET_UNITS_KEY, n); return n; });
const addOwner = o => setOwners(os => { const n = os.includes(o) ? os : [...os, o]; listSave(BUDGET_OWNERS_KEY, n); return n; });
const deleteOwner = o => setOwners(os => { const n = os.filter(x => x !== o); listSave(BUDGET_OWNERS_KEY, n); return n; });
/* live link from Purchasing: fold a derived (non-editable, non-stored) line into
the Art/Production category so the topsheet reflects real art-dept spend. */
const pur = window.purchaseRollup ? window.purchaseRollup() : null;
const purLine = (pur && pur.count > 0)
? { id: 'auto-purchase', desc: 'Art purchasing — from Purchasing', _derived: true, qty: 1, unit: 'flat', rate: pur.committed, actual: pur.purchased, _committed: pur.approved }
: null;
const displayCats = (() => {
if (!purLine || !cats.length) return cats;
let idx = cats.findIndex(c => /art/i.test(c.name));
if (idx < 0) idx = cats.findIndex(c => /production/i.test(c.name));
if (idx < 0) idx = 0;
return cats.map((c, i) => i !== idx ? c : { ...c, lines: [...c.lines, purLine] });
})();
const totalEst = displayCats.reduce((a, c) => a + catEst(c), 0);
const totalAct = displayCats.reduce((a, c) => a + catActual(c), 0);
const overEst = totalEst > target;
const overAct = totalAct > target;
/* you can't un-spend actuals — the honest headline is the worse of estimate vs
actuals-to-date, so an overspent production never reads as "under target" */
const projected = Math.max(totalEst, totalAct);
const remaining = target - projected;
const over = projected > target;
const pct = v => target > 0 ? Math.min(100, (v / target) * 100) : 0;
const patchLine = (ci, id, p) => setCats(cs => cs.map((c, i) => i !== ci ? c : { ...c, lines: c.lines.map(l => l.id === id ? { ...l, ...p } : l) }));
const removeLine = (ci, id) => {
const prev = cats; const line = (cats[ci] && cats[ci].lines.find(l => l.id === id)) || {};
setCats(cs => cs.map((c, i) => i !== ci ? c : { ...c, lines: c.lines.filter(l => l.id !== id) }));
window.pushUndo && window.pushUndo(`Removed "${line.desc || 'line item'}"`, () => setCats(prev));
};
const addLine = ci => setCats(cs => cs.map((c, i) => i !== ci ? c : { ...c, lines: [...c.lines, { id:'l' + Date.now(), desc:'', qty:1, unit:'flat', rate:0, actual:0 }] }));
const patchCat = (ci, p) => setCats(cs => cs.map((c, i) => i !== ci ? { ...c, ...{} } : { ...c, ...p }));
const removeCat = ci => {
const prev = cats; const cat = cats[ci] || {};
setCats(cs => cs.filter((_, i) => i !== ci));
window.pushUndo && window.pushUndo(`Removed category "${cat.name || ''}"`, () => setCats(prev));
};
const addCat = () => setCats(cs => [...cs, { id:'cat' + Date.now(), name:'New Category', lines:[] }]);
return (