// Targets — leadership upload + per-designer monthly/quarterly tracking // Stores per-designer per-month target $ in localStorage // // Data shape (window.SALES_DATA.TARGETS or kub_targets_v1): // { 'r_ally': { '2026-07': 40000, '2026-08': 45000, ... }, 'r_deena': {...} } const FY_MONTHS = [ // Australian FY: Jul 2025 → Jun 2026 (current FY) { key: '2025-07', label: 'Jul 25', q: 1 }, { key: '2025-08', label: 'Aug 25', q: 1 }, { key: '2025-09', label: 'Sep 25', q: 1 }, { key: '2025-10', label: 'Oct 25', q: 2 }, { key: '2025-11', label: 'Nov 25', q: 2 }, { key: '2025-12', label: 'Dec 25', q: 2 }, { key: '2026-01', label: 'Jan 26', q: 3 }, { key: '2026-02', label: 'Feb 26', q: 3 }, { key: '2026-03', label: 'Mar 26', q: 3 }, { key: '2026-04', label: 'Apr 26', q: 4 }, { key: '2026-05', label: 'May 26', q: 4 }, { key: '2026-06', label: 'Jun 26', q: 4 }, ]; function TargetsAdmin({ reps, currentUser, onSave, targets }) { const [draft, setDraft] = React.useState(targets || {}); const [fyStart, setFyStart] = React.useState(2025); // FY start year (Jul) — 2025 = FY26 (current) const [bulkMode, setBulkMode] = React.useState(false); const [bulkValues, setBulkValues] = React.useState({}); // rep_id -> annual $ to split // Build the 12 months for any FY (Jul → Jun) const fyMonths = (startYear) => { const labels = ['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']; return Array.from({ length: 12 }).map((_, i) => { const monthIndex = (6 + i) % 12; // Jul = index 6 const year = i < 6 ? startYear : startYear + 1; const q = Math.floor(i / 3) + 1; return { key: `${year}-${String(monthIndex + 1).padStart(2, '0')}`, label: `${labels[i]} ${String(year).slice(2)}`, q }; }); }; const fyLabel = (startYear) => `FY${String(startYear + 1).slice(2)} (Jul ${String(startYear).slice(2)} – Jun ${String(startYear + 1).slice(2)})`; const fyOptions = Array.from({ length: 6 }).map((_, i) => 2025 + i); // current + next 5 const months = fyMonths(fyStart); const updateCell = (repId, monthKey, value) => { const cleaned = parseFloat(String(value).replace(/[^\d.]/g, '')) || 0; setDraft(prev => ({ ...prev, [repId]: { ...(prev[repId] || {}), [monthKey]: cleaned }, })); }; const applyBulk = (repId) => { const annual = parseFloat(String(bulkValues[repId] || '').replace(/[^\d.]/g, '')) || 0; if (annual <= 0) return; const monthly = Math.round(annual / 12); setDraft(prev => ({ ...prev, [repId]: months.reduce((acc, m) => ({ ...acc, [m.key]: monthly }), prev[repId] || {}), })); setBulkValues(prev => ({ ...prev, [repId]: '' })); }; const copyFromPrevMonth = (repId) => { const repTargets = draft[repId] || {}; const filled = { ...repTargets }; let lastKnown = 0; for (const m of months) { if (filled[m.key] > 0) lastKnown = filled[m.key]; else if (lastKnown > 0) filled[m.key] = lastKnown; } setDraft(prev => ({ ...prev, [repId]: filled })); }; // CSV bulk upload const fileInputRef = React.useRef(null); const handleCSVUpload = (e) => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = (evt) => { const text = evt.target.result; try { const lines = text.trim().split(/\r?\n/); const header = lines[0].split(',').map(s => s.trim()); // Expected: Designer, Jul 25, Aug 25, ... const monthCols = header.slice(1).map(h => { const m = months.find(mo => mo.label.toLowerCase() === h.toLowerCase()); return m?.key || null; }); const newDraft = { ...draft }; let imported = 0; for (let i = 1; i < lines.length; i++) { const cells = lines[i].split(',').map(s => s.trim()); const designerName = cells[0]; const rep = reps.find(r => r.name.toLowerCase() === designerName.toLowerCase()); if (!rep) continue; if (!newDraft[rep.id]) newDraft[rep.id] = {}; for (let j = 0; j < monthCols.length; j++) { if (!monthCols[j]) continue; const val = parseFloat(cells[j + 1]?.replace(/[$,]/g, '')) || 0; newDraft[rep.id][monthCols[j]] = val; } imported++; } setDraft(newDraft); alert(`Imported targets for ${imported} designer${imported !== 1 ? 's' : ''}.`); } catch (err) { alert('Could not parse CSV. Expected format:\nDesigner, Jul 25, Aug 25, Sep 25, ...'); } }; reader.readAsText(file); e.target.value = ''; }; const downloadTemplate = () => { const headers = ['Designer', ...months.map(m => m.label)]; const rows = reps.map(r => [r.name, ...months.map(() => 0)]); const csv = [headers.join(','), ...rows.map(r => r.join(','))].join('\n'); const blob = new Blob([csv], { type: 'text/csv' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `targets-template-FY${String(fyStart + 1).slice(2)}.csv`; a.click(); URL.revokeObjectURL(url); }; const totals = months.reduce((acc, m) => { acc[m.key] = reps.reduce((s, r) => s + ((draft[r.id] || {})[m.key] || 0), 0); return acc; }, {}); const grandAnnual = Object.values(totals).reduce((a, b) => a + b, 0); return (
Set yearly targets for each designer
Enter monthly targets per designer. They'll show up on each designer's Forecast page with monthly, quarterly, and FY progress. Upload a CSV for fast bulk entry, or type values directly.
Designer monthly targets
Team total: {fmt.money(grandAnnual, true)} across {fyLabel(fyStart).split(' ')[0]}
Tip: type one month's value and press the copy-down arrow to fill the rest →
{bulkMode && } {months.map(m => ( ))} {reps.map(r => { const repTargets = draft[r.id] || {}; const annualTotal = months.reduce((s, m) => s + (repTargets[m.key] || 0), 0); return ( {bulkMode && ( )} {months.map(m => ( ))} ); })} {bulkMode && } {months.map(m => ( ))}
DesignerAnnual $ (split /12)
Q{m.q}
{m.label} 		FY Total
{r.name}
setBulkValues(prev => ({ ...prev, [r.id]: e.target.value }))} style={{ width: 100, padding: '4px 6px', border: '1px solid var(--border)', borderRadius: 4, fontSize: 12 }} />
updateCell(r.id, m.key, e.target.value)} placeholder="0" style={{ width: 70, padding: '4px 6px', border: '1px solid transparent', borderRadius: 4, fontSize: 12, textAlign: 'right', background: 'transparent', fontFamily: 'inherit' }} onFocus={(e) => { e.target.style.borderColor = 'var(--ink-3)'; e.target.style.background = 'white'; }} onBlur={(e) => { e.target.style.borderColor = 'transparent'; e.target.style.background = 'transparent'; }} /> {fmt.money(annualTotal, true)}
Team total {totals[m.key] > 0 ? fmt.money(totals[m.key], true) : '—'} {fmt.money(grandAnnual, true)}
); } // Helper: compute progress for a designer (or all) against targets function computeTargetProgress(deals, targets, repId, periodKeys) { // periodKeys: array of 'YYYY-MM' months let targetTotal = 0; for (const key of periodKeys) { if (repId) targetTotal += (targets[repId] || {})[key] || 0; else { // Sum all reps for (const rep of Object.keys(targets)) targetTotal += (targets[rep] || {})[key] || 0; } } // Sum sold value for that period — based on when the deal was won (forecastDepositMonth or lastActivity) let achieved = 0; for (const d of deals) { if (d.stage !== 'sold') continue; if (repId && d.rep !== repId) continue; // Use forecastDepositMonth as the recognised "won month" first, fall back to lastActivity then created const closeDate = d.forecastDepositMonth || d.lastActivity || d.created; if (!closeDate) continue; const monthKey = closeDate.slice(0, 7); if (periodKeys.includes(monthKey)) achieved += d.value; } return { targetTotal, achieved, pct: targetTotal > 0 ? achieved / targetTotal : 0 }; } window.TargetsAdmin = TargetsAdmin; window.FY_MONTHS = FY_MONTHS; window.computeTargetProgress = computeTargetProgress;