// bulk-reg.jsx — Bulk Registration screen
// ─────────────────────────────────────────────────────────────────
// Five-tab pipeline UI:
// 01 COMPOSE — pick format · pick entities (selection model) · format options
// 02 VALIDATE — pre-flight validation results · severity ladder
// 03 PREVIEW — rendered file preview (with syntax tabs by format)
// 04 OUTBOX — pending transmissions · channel picker · send
// 05 HISTORY — past runs · re-build · download · replay
//
// Exports: window.ScreenBulkReg
// ─────────────────────────────────────────────────────────────────
(function () {
if (typeof window === 'undefined' || !window.React) return;
const _S = React.useState, _E = React.useEffect, _M = React.useMemo;
const E = window.BULK_REG_ENGINE;
const V = window.BULK_REG_VALIDATE;
if (!E || !V) { console.warn('[bulk-reg] engine/validate missing'); return; }
// ── primitives ──────────────────────────────────────────────────
function Mono({ children, upper, size, color, style, ...rest }) {
return {children};
}
function Pill({ tone, children }) {
const tones = {
ok: { bg:'#0a8754', fg:'#fff' },
warn: { bg:'#d4881f', fg:'#fff' },
err: { bg:'#a32a18', fg:'#fff' },
block: { bg:'#5b0a0a', fg:'#fff' },
info: { bg:'#1a4ed8', fg:'#fff' },
mono: { bg:'var(--ink)', fg:'var(--bg)' },
ghost: { bg:'transparent', fg:'var(--ink-2)', bd:'1px solid var(--rule)' },
};
const t = tones[tone] || tones.mono;
return {children};
}
function Cell({ label, value, sub, tone }) {
return (
);
}
function Btn({ kind, onClick, children, disabled, style }) {
const looks = {
pri: { bg:'var(--ink)', fg:'var(--bg)', bd:'1px solid var(--ink)' },
sec: { bg:'transparent', fg:'var(--ink)', bd:'1px solid var(--rule)' },
dan: { bg:'#a32a18', fg:'#fff', bd:'1px solid #a32a18' },
};
const k = looks[kind || 'sec'];
return ;
}
// ── screen ──────────────────────────────────────────────────────
function ScreenBulkReg({ go, payload }) {
const [tab, setTab] = _S('compose');
const [formatId, setFormatId] = _S(payload?.formatId || 'mlc-bdf');
const [selectionKind, setSelectionKind] = _S('all');
const [selectionN, setSelectionN] = _S(20);
const [society, setSociety] = _S('ASCAP');
const [submitterPubNumber, setSubmitterPubNumber] = _S('');
const [channel, setChannel] = _S('download');
const [outbox, setOutbox] = _S([]);
const [history, setHistory] = _S(() => E.loadHistory());
const [lastBuild, setLastBuild] = _S(null);
const adapter = E.ADAPTERS[formatId];
const selectionModel = _M(() => {
if (selectionKind === 'recent') return { kind: 'recent', n: selectionN };
if (selectionKind === 'untransmitted') return { kind: 'untransmitted' };
return { kind: 'all' };
}, [selectionKind, selectionN]);
const validation = _M(() => V.validate(formatId, selectionModel, { society, submitterPubNumber }), [formatId, selectionModel, society, submitterPubNumber]);
const buildOpts = { society, submitterPubNumber };
function doBuild() {
const result = E.build(formatId, selectionModel, buildOpts);
setLastBuild(result);
setTab('preview');
return result;
}
function queueOutbox() {
const built = lastBuild || doBuild();
const item = { id: 'OB-' + Date.now(), built, formatId, channel, status: 'queued', at: new Date().toISOString() };
setOutbox((o) => [item, ...o]);
setTab('outbox');
}
function send(item) {
const updated = { ...item, status: 'sent', sentAt: new Date().toISOString() };
setOutbox((o) => o.map((x) => x.id === item.id ? updated : x));
const newHistory = E.recordRun({
formatId: item.formatId,
adapter: item.built.adapter.label,
entityCount: item.built.entityCount,
entityIds: item.built.entityIds,
channel: item.channel,
fileName: item.built.name,
fileSize: item.built.content.length,
status: 'sent',
});
setHistory(newHistory);
}
function downloadFile(built) {
const blob = new Blob([built.content], { type: built.mime });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url; a.download = built.name; a.click();
setTimeout(() => URL.revokeObjectURL(url), 1000);
}
// ── header ───────────────────────────────────────────────────
const tabs = [
{ id: 'compose', l: '01 · COMPOSE' },
{ id: 'validate', l: '02 · VALIDATE' },
{ id: 'preview', l: '03 · PREVIEW' },
{ id: 'outbox', l: '04 · OUTBOX', badge: outbox.filter((o) => o.status === 'queued').length },
{ id: 'history', l: '05 · HISTORY', badge: history.length },
];
return (
{/* Header */}
TOOLS · TRANSMISSIONS
8 ADAPTERS
Bulk registrations & notifications
{/* Tab bar */}
{tabs.map((t) => (
))}
{tab === 'compose' && (
)}
{tab === 'validate' &&
}
{tab === 'preview' &&
}
{tab === 'outbox' &&
}
{tab === 'history' &&
{ localStorage.removeItem('astro_bulk_reg_history_v1'); setHistory([]); }} />}
{/* metric row */}
|
|
|
|
{/* LEFT — Format picker */}
PICK FORMAT
{formats.map((f) => (
))}
{/* RIGHT — Selection + options + delivery */}
SELECTION MODEL
{[
{ id:'all', l:'All entities', sub:`Everything in catalog (${E.selectEntities(adapter.entity, { kind:'all' }).length} ${adapter.entity})` },
{ id:'recent', l:'Recently added', sub:`Most recent N · adjustable` },
{ id:'untransmitted', l:'Not yet sent to this format', sub:`Excludes anything in History matching ${adapter.id}` },
].map((opt) => (
))}
{formatId === 'pro-direct' && (
PRO OPTIONS
{['ASCAP','BMI','SESAC','GMR'].map((s) => (
))}
{society === 'BMI' && (
SUBMITTER PUBLISHER NUMBER (BMI · required)
setSubmitterPubNumber(e.target.value)}
placeholder="e.g. 12345" style={{ display:'block', marginTop:6, padding:'6px 10px', border:'1px solid var(--rule)', width:160, fontSize:12 }} />
)}
)}
setTab('validate')}>Validate ({(counts.blocker||0)+(counts.error||0)})
Build & preview
Build & queue →
|
|
|
|
|
{['all','blocker','error','warn','info'].map((f) => (
))}
{ onBuild(); setTab('preview'); }} disabled={!validation.ok}>Build →
{filtered.length === 0 && (
{validation.ok ? '✓ No issues. Ready to build.' : 'No issues at this severity.'}
)}
{filtered.map((e, i) => (
{e.severity}
{e.msg}
{e.code}
{e.entityId ? <> · {e.entityType}:{e.entityId} : null}
{e.hint ? <> · {e.hint} : null}
))}
);
}
// ════════════════════════════════════════════════════════════════
// 03 PREVIEW
// ════════════════════════════════════════════════════════════════
function PreviewTab({ built, onBuild, onDownload, onQueue }) {
if (!built) {
return (
No file built yet.
Build now
);
}
const lines = built.content.split('\n');
const preview = lines.slice(0, 200).join('\n');
return (
|
|
|
|
onDownload(built)}>↓ Download
Queue for transmission →
SHOWING FIRST {Math.min(200, lines.length)} / {lines.length} LINES
{preview}
);
}
// ════════════════════════════════════════════════════════════════
// 04 OUTBOX
// ════════════════════════════════════════════════════════════════
function OutboxTab({ outbox, onSend, onDownload }) {
if (!outbox.length) {
return Outbox is empty. Build & queue from Compose.
;
}
return (
{['FORMAT','FILE','ENTITIES','CHANNEL','STATUS','ACTIONS'].map((h) => (
{h}
))}
{outbox.map((it) => (
{it.built.adapter.label}
{it.built.name}
{it.built.entityCount}
{it.channel}
onDownload(it.built)} style={{ padding:'4px 8px', fontSize:10 }}>↓
{it.status === 'queued' && onSend(it)} style={{ padding:'4px 10px', fontSize:10 }}>Send}
))}
);
}
// ════════════════════════════════════════════════════════════════
// 05 HISTORY
// ════════════════════════════════════════════════════════════════
function HistoryTab({ history, onClear }) {
if (!history.length) {
return No transmissions yet.
;
}
return (
{ if (confirm('Clear all history?')) onClear(); }}>Clear history
{['SENT','FORMAT','ENTITIES','CHANNEL','SIZE','STATUS'].map((h) => (
{h}
))}
{history.map((r) => (
{new Date(r.at).toLocaleString()}
{r.adapter}
{r.entityCount}
{r.channel}
{((r.fileSize || 0) / 1024).toFixed(1)} KB
))}
);
}
window.ScreenBulkReg = ScreenBulkReg;
})();