);
const stage = (typeof document !== 'undefined') ? document.getElementById('proto-stage') : null;
return stage ? ReactDOM.createPortal(node, stage) : node;
}
// ─────────────────────────────────────────────────────────────────────
// ADMINISTRATION — the account / people-&-access surface.
//
// Reached from the manager's identity (the avatar in the Operations Hub
// header), NOT from the operational action grid. This is where managing
// WHO can contribute lives — deliberately separate from the operational
// workflows that act on vehicles and their history. It is built to grow:
// today, Team & Access; over time, owners & family, additional managers,
// per-vehicle permissions, and collection settings.
// ─────────────────────────────────────────────────────────────────────
function AdminRow({ icon, title, desc, badge, onClick, danger }) {
return (
Contributors get capture & submit only — never allocation, reports, or the archive.
{invite && setInvite(false)} onInvite={addInvite} />}
);
}
// ─────────────────────────────────────────────────────────────────────
// BILLING — account billing summary, reached from Manage Account.
// Modest by design: current plan, payment method on file, billing contact.
// ─────────────────────────────────────────────────────────────────────
function BillingLine({ k, v, mono }) {
return (
{k}{v}
);
}
function BillingScreen({ onBack }) {
const M = (typeof COLLECTION_MANAGER !== 'undefined') ? COLLECTION_MANAGER
: { name: 'Collection Manager', collection: 'The Collection', email: '' };
return (
PLAN & PAYMENT
{/* plan card */}
CURRENT PLAN
Collection
Active
AMOUNT$1,200 / yr
{/* payment method */}
PAYMENT METHOD
•••• •••• •••• 4242
VISA · EXPIRES 09 / 28
{/* billing contact */}
BILLING CONTACT
Invoices are emailed to the billing contact and archived with the collection record.
);
}
// ─────────────────────────────────────────────────────────────────────
// EMERGENCY ACCESS — estate & family fail-safe, reached from Manage Account.
// Designate who can reach the archive if the manager becomes unavailable.
// Aligns with the series principle: collections outlive their managers.
// ─────────────────────────────────────────────────────────────────────
function EmergencyAccessScreen({ onBack }) {
return (
THE FAIL-SAFE
Collections outlive the people who manage them. Designate who can reach the archive if you become unavailable.
{/* designated contact */}
DESIGNATED CONTACT
CV
Clara Voss
FAMILY · ESTATE EXECUTOR
c.voss@vosscollection.com
{/* trigger condition */}
WHEN ACCESS UNLOCKS
AFTER INACTIVITY90 days
GRANTSFull archive · read & export
NOTIFICATIONYou're warned first, twice
Emergency access never exposes the management tools — only the archive and its documentation.
);
}
// ─────────────────────────────────────────────────────────────────────
// TRANSFER ACCOUNT — permanent succession of the collection, from
// Manage Account. Sale, inheritance, or estate handoff: the whole archive
// moves to a new owner. Deliberately weighty and reversible only before
// the recipient accepts.
// ─────────────────────────────────────────────────────────────────────
function TransferAccountScreen({ onBack }) {
const transfers = [
{ icon: 'Inbox', label: 'Reviewing & filing submissions' },
{ icon: 'FileSpreadsheet', label: 'Reports & reimbursements' },
{ icon: 'Users', label: 'The contributor team' },
{ icon: 'CreditCard', label: 'Billing administration' },
];
return (
HAND OVER
Assign a new collection manager to run the archive day to day. Ownership stays with the collector — only who manages it changes.
{/* recipient — empty state */}
NEW MANAGER
{/* what transfers */}
WHAT THEY TAKE ON
{transfers.map(t => (
{t.label}
))}
{/* action */}
Ownership is unchanged. Choose a manager to continue — nothing changes until they accept.
);
}
// ─────────────────────────────────────────────────────────────────────
// COLLECTION OWNER — who the collection belongs to, from Manage Account.
// The collector / family. They receive organized reimbursement reports —
// never raw receipts. Distinct from the manager, who runs the platform.
// ─────────────────────────────────────────────────────────────────────
function CollectionOwnerScreen({ onBack }) {
const receives = [
{ icon: 'FileSpreadsheet', label: 'Reimbursement reports' },
{ icon: 'Coins', label: 'Financial summaries' },
{ icon: 'FileText', label: 'Supporting documentation' },
];
return (
THE OWNER
Who the collection belongs to. The owner receives organized reports — never raw receipts — and is who reimbursements are prepared for.
{/* owner card */}
OWNER OF RECORD
HV
Henrik Voss
COLLECTOR · THE VOSS COLLECTION
h.voss@vosscollection.com
{/* what the owner receives */}
WHAT THE OWNER RECEIVES
{receives.map(r => (
{r.label}
))}
The owner never sees raw receipts — only the reports assembled from them.