// ============================================================================ // ScreenTerritory — control center for multi-territory operations. // // Tabs: // 01 EXPLORER — picker playground + live ISO resolution + conflicts // 02 BLOCS — manage custom blocs (Tier 1, regional groupings) // 03 FX — multi-currency rates + reporting-currency toggle // 04 WITHHOLDING — per-territory tax rates incl. treaty overrides // 05 CONFLICTS — scan all agreements for territory × right × period overlaps // 06 COVERAGE — choropleth of catalog earnings per territory // // EXPORT: window.ScreenTerritory // ============================================================================ (function () { const { useState, useMemo, useEffect } = React; function ScreenTerritory({ go }) { const [tab, setTab] = useState('blocs'); const tabs = [ ['blocs', 'Custom blocs'], ['fx', 'FX rates'], ['wht', 'Withholding'], ]; return (
Tools · Territories

Territories & FX

Configure custom blocs, reporting currency, and withholding overrides. Conflicts now appear inline on each agreement and in your Inbox; coverage lives in go && go('analytics', { tab: 'market' })} style={{ color: 'var(--ink)', cursor: 'pointer', textDecoration: 'underline', textDecorationStyle: 'dotted' }}>Analytics → Market.
{tab === 'blocs' && } {tab === 'fx' && } {tab === 'wht' && }
); } // ── Tab 1: Explorer ───────────────────────────────────────────────────── function ExplorerTab() { const [sel, setSel] = useState({ mode: 'list', codes: ['EU', 'JP', 'US'], excludes: [] }); const eng = window.TerritoryEngine; const { isos, label } = eng.resolveSelection(sel); const fx = window.TerritoryFx; return (
SELECTION
{window.TerritoryPicker && }
); } function currencyMix(isos) { const fx = window.TerritoryFx; const m = new Map(); Array.from(isos).forEach(iso => { const ccy = fx.ccyOf(iso); m.set(ccy, (m.get(ccy) || 0) + 1); }); return Array.from(m.entries()).sort((a, b) => b[1] - a[1]); } // ── Tab 2: Custom Blocs ───────────────────────────────────────────────── function BlocsTab() { const eng = window.TerritoryEngine; const [tick, setTick] = useState(0); const customs = Object.values(eng.customBlocs); const [draft, setDraft] = useState({ code: '', label: '', leaves: [] }); const [sel, setSel] = useState({ mode: 'list', codes: [], excludes: [] }); function save() { if (!draft.code || !draft.label) return; const isos = Array.from(eng.resolveSelection(sel).isos); eng.saveCustomBloc(draft.code.toUpperCase(), draft.label, isos); setDraft({ code: '', label: '', leaves: [] }); setSel({ mode: 'list', codes: [], excludes: [] }); setTick(t => t + 1); } function del(code) { eng.deleteCustomBloc(code); setTick(t => t + 1); } return (
YOUR BLOCS · {customs.length}
{customs.length === 0 && (
No custom blocs yet. Pre-fab blocs (EU, GSA, Nordics, ANZ, …) are always available.
)} {customs.map(b => (
{b.code}
{b.label}
{b.leaves.map(iso => ( {eng.flagOf(iso)} {iso} ))}
))}
NEW BLOC
setDraft({ ...draft, code: e.target.value.toUpperCase().slice(0, 12) })} placeholder="CODE" className="ff-mono" style={{ padding: '6px 10px', fontSize: 12, background: 'var(--bg)', border: '1px solid var(--rule)', boxSizing: 'border-box' }} /> setDraft({ ...draft, label: e.target.value })} placeholder="Display name (e.g. 'Tier 1 markets')" style={{ padding: '6px 10px', fontSize: 12, background: 'var(--bg)', border: '1px solid var(--rule)', boxSizing: 'border-box' }} />
{window.TerritoryPicker && }
); } // ── Tab 3: FX rates ───────────────────────────────────────────────────── function FxTab() { const fx = window.TerritoryFx; const [reportCcy, setReportCcy] = useState(localStorage.getItem('astro_report_ccy') || 'USD'); useEffect(() => { try { localStorage.setItem('astro_report_ccy', reportCcy); } catch {} }, [reportCcy]); const ccys = Object.keys(fx.FX_USD).sort(); return (
REPORTING CURRENCY
{ccys.length} currencies · rates per USD as of period close
{ccys.map(ccy => { const rate = fx.convert(1, reportCcy, ccy); return (
{fx.symbolOf(ccy)}{ccy}
{rate.toLocaleString('en-US', { maximumFractionDigits: ccy === 'JPY' || ccy === 'KRW' || ccy === 'IDR' || ccy === 'VND' ? 1 : 4 })}
per 1 {reportCcy}
); })}
WALLET MODE

Statements arrive in the source currency and stay there until withdrawal — keeping you in control of FX timing. Reporting views consolidate into {reportCcy} at period-close rates.

); } // ── Tab 4: Withholding ────────────────────────────────────────────────── function WhtTab() { const fx = window.TerritoryFx; const eng = window.TerritoryEngine; const [payee, setPayee] = useState('US'); const isos = Object.keys(fx.WHT_BY_ISO).sort(); return (
PAYEE TAX RESIDENCE
Treaty rates apply where bilateral conventions exist.
{isos.map(iso => { const stat = fx.WHT_BY_ISO[iso]; const eff = fx.whtOf(iso, payee); const reduced = eff < stat; return (
{eng.flagOf(iso)} {iso} {reduced && TREATY}
{(eff * 100).toFixed(0)}%
{reduced &&
statutory {(stat * 100).toFixed(0)}%
}
{eng.labelOf(iso)}
); })}
); } // ── Tab 5: Conflicts ──────────────────────────────────────────────────── function ConflictsTab({ go }) { const eng = window.TerritoryEngine; const agreements = window.AGREEMENTS || []; // Group by work / counterparty + scan for territory × right × period overlaps. const conflicts = useMemo(() => { // Build comparable rows from agreements const rows = agreements .filter(a => a.territories && a.territories.length) .flatMap(a => (a.territories || []).map((t, i) => ({ id: `${a.id}#${i}`, agreementId: a.id, name: a.name, counterparty: a.b || a.counterparty, selection: { mode: t.code === 'WW' ? 'world' : 'list', codes: t.code === 'WW' ? [] : [t.code], excludes: t.excluded || [] }, rights: (t.rights || '').split(/[+,/·]/).map(s => s.trim()).filter(Boolean), start: a.start, end: a.end, }))); return eng.findConflicts(rows).slice(0, 50); }, [agreements]); return (
{conflicts.length} conflicts found across {agreements.length} agreements
{conflicts.length === 0 && ✓ no overlaps}
{conflicts.length === 0 ? (
No territory × right × period conflicts in the active catalog.
) : (
AGREEMENT AAGREEMENT BOVERLAPRIGHTSSEVERITY
{conflicts.map((c, i) => (
{c.isos.length} ISO
{c.isos.slice(0, 8).map(iso => ( {eng.flagOf(iso)} {iso} ))} {c.isos.length > 8 && +{c.isos.length - 8}}
{c.rights.join('+')} 5 ? 'var(--danger)' : 'var(--accent)', textAlign: 'right' }}>{c.isos.length > 5 ? 'BLOCK' : 'WARN'}
))}
)}
); } // ── Tab 6: Coverage choropleth ─────────────────────────────────────────── function CoverageTab() { const eng = window.TerritoryEngine; const fx = window.TerritoryFx; // Earnings per ISO from statements (synthesize if missing). const earnings = useMemo(() => coverageData(), []); const max = Math.max(1, ...Object.values(earnings)); function color(v) { if (!v) return 'var(--bg)'; const t = v / max; // 5-step ramp from --bg-2 to --ink if (t > 0.8) return 'var(--ink)'; if (t > 0.6) return 'oklch(35% 0.02 240)'; if (t > 0.4) return 'oklch(50% 0.02 240)'; if (t > 0.2) return 'oklch(65% 0.02 240)'; return 'oklch(80% 0.02 240)'; } const top = Object.entries(earnings).sort((a, b) => b[1] - a[1]).slice(0, 12); return (
EARNINGS BY TERRITORY · last 4 quarters
); } // Synthesize earnings per ISO from statements / catalog. function coverageData() { const out = {}; const stmts = (window.STATEMENTS || []); stmts.forEach(s => { const iso = (s.country || s.territory || '').slice(0, 2).toUpperCase(); if (!iso) return; out[iso] = (out[iso] || 0) + (s.gross || s.amount || 0); }); if (Object.keys(out).length < 5) { // Fallback synthetic const seed = ['US', 'GB', 'DE', 'FR', 'JP', 'AU', 'CA', 'BR', 'MX', 'NL', 'IT', 'ES', 'KR', 'IN', 'SE', 'NO', 'DK', 'PL', 'IE', 'SG']; seed.forEach((iso, i) => { out[iso] = (out[iso] || 0) + Math.round(180000 * Math.exp(-i * 0.18) + Math.random() * 20000); }); } return out; } // ── Choropleth — same tile grid as TerritoryMap, value-shaded. function Choropleth({ values, colorOf }) { const eng = window.TerritoryEngine; const fx = window.TerritoryFx; const [hover, setHover] = useState(null); // Same grid as TerritoryMap. const GRID = window.__TM_GRID || ([ 'IS,GL,,,,,,,,,,,,,,,,,,,,RU,RU,RU', 'NO,SE,FI,EE,LV,LT,BY,RU,RU,RU,MN,,,,,,,,,,,,,', 'IE,GB,DK,NL,DE,PL,UA,MD,GE,AM,AZ,TM,UZ,KZ,KG,TJ,CN,KP,KR,JP,,,,', 'PT,ES,FR,BE,LU,CH,AT,CZ,SK,HU,RO,BG,TR,IR,AF,PK,NP,BT,BD,MM,TW,HK,,', ',,MA,IT,SM,HR,SI,RS,BA,ME,AL,MK,GR,CY,SY,LB,IL,JO,IQ,SA,QA,AE,OM,YE', ',EH,DZ,TN,LY,EG,SD,ER,DJ,SO,ET,UG,KE,TZ,RW,BI,,IN,LK,MV,TH,VN,PH,', ',,MR,ML,NE,TD,CF,SS,,,,,,,,,,LA,KH,MY,SG,BN,ID,', ',,SN,GM,GN,BF,BJ,NG,CM,GA,CG,CD,AO,ZM,MW,MZ,ZW,BW,NA,MG,,,PG,', ',,,,GH,TG,,,,,,,,,,,,ZA,LS,SZ,,,,', ',,US,US,US,US,CA,CA,CA,,,,,,,,,,,AU,NZ,,,', 'CU,BS,MX,GT,HN,SV,NI,CR,PA,CO,VE,GY,SR,BR,BR,BR,BR,,,,NC,FJ,,', ',,,EC,PE,BO,PY,CL,AR,UY,,,,,,,,,,,,,,', ]); const cols = 24; const cellW = 30, cellH = 26; return (
{GRID.map((row, y) => row.split(',').map((iso, x) => { if (!iso) return null; const v = values[iso] || 0; const fill = colorOf(v); return ( setHover({ iso, v })} onMouseLeave={() => setHover(null)}> {iso} ); }))} {hover && hover.iso && (
{eng.flagOf(hover.iso)} {hover.iso} · {eng.labelOf(hover.iso)} · {fx.fmt(hover.v, 'USD', { short: true })}
)}
); } window.ScreenTerritory = ScreenTerritory; window.Choropleth = Choropleth; })();