// Admin interface: documents, folders, users, groups, upload const AdminApp = ({ user, onSwitchRole, onExit, onPushToast }) => { const [section, setSection] = React.useState("dashboard"); const [uploadOpen, setUploadOpen] = React.useState(false); const [editingUser, setEditingUser] = React.useState(null); const [editingGroup, setEditingGroup] = React.useState(null); const [editingFolder, setEditingFolder] = React.useState(null); return (
{}} onHome={onExit} />
{section === "dashboard" && setUploadOpen(true)} onSection={setSection} />} {section === "documents" && setUploadOpen(true)} onPushToast={onPushToast} />} {section === "folders" && } {section === "users" && } {section === "groups" && } {section === "audit" && } {section === "notifications" && } {section === "settings" && }
{uploadOpen && setUploadOpen(false)} onPushToast={onPushToast} />} {editingUser && setEditingUser(null)} onPushToast={onPushToast} />} {editingGroup && setEditingGroup(null)} onPushToast={onPushToast} />} {editingFolder && setEditingFolder(null)} onPushToast={onPushToast} />}
); }; const AdminNavItem = ({ icon, label, active, onClick, count }) => (
{label} {count !== undefined && {count}}
); // ─── Dashboard ──────────────────────────────────────────────────────────── const AdminDashboard = ({ onUpload, onSection }) => { const data = window.PORTAL_DATA; return (
Administration · {data.firm.name}

Good morning, Marcus.

Q1 2026 distribution closes in 12 days. Three documents are still pending review by counsel.

62%} delta="55 of 89 viewed" />
Recent activity
All admin and download events, last 14 days.
{data.activity.map((a, i) => (
{a.who} {a.what} {a.target} {a.period && · {a.period}} {a.time}
))}
Quarter readiness
{[ { label: "Quarterly Letter", status: "Published", on: true }, { label: "Performance Report", status: "Published", on: true }, { label: "Capital Statements (24)", status: "Published", on: true }, { label: "Holdings Detail", status: "Pending counsel", on: false }, { label: "Risk Summary", status: "Pending counsel", on: false }, { label: "ESG Report", status: "Pending counsel", on: false }, ].map((it, i) => (
{it.on && } {it.label}
{it.status}
))}
); }; const Stat = ({ label, value, delta, up }) => (
{label}
{value}
{delta &&
{delta}
}
); // ─── Documents ──────────────────────────────────────────────────────────── const AdminDocuments = ({ onUpload, onPushToast }) => { const data = window.PORTAL_DATA; const [period, setPeriod] = React.useState("all"); const [search, setSearch] = React.useState(""); const [selected, setSelected] = React.useState(new Set()); const visible = data.documents.filter(d => { if (period !== "all" && d.period !== period) return false; if (search && !d.title.toLowerCase().includes(search.toLowerCase())) return false; return true; }); const toggle = (id) => { const n = new Set(selected); n.has(id) ? n.delete(id) : n.add(id); setSelected(n); }; return (
Library

Documents

{data.documents.length} documents across {data.periods.length} reporting periods. Click any document to edit visibility, replace the file, or attach it to a different period.

setSearch(e.target.value)} />
{selected.size > 0 && (
{selected.size} selected
)}
{visible.map(d => { const periodObj = data.periods.find(p => p.id === d.period); return ( ); })}
0} onChange={(e) => setSelected(e.target.checked ? new Set(visible.map(d => d.id)) : new Set())} /> Document Period Visible to Updated
e.stopPropagation()}> toggle(d.id)} />
{d.title} {d.restricted && Restricted}
{d.date} · {d.size} · {d.category}
 {periodObj?.label}
{d.groups.slice(0, 2).map(gid => { const g = data.groups.find(x => x.id === gid); return {g?.name}; })} {d.groups.length > 2 && +{d.groups.length - 2}}
{d.updated || "—"}
); }; // ─── Folders ────────────────────────────────────────────────────────────── const AdminFolders = ({ onEdit }) => { const data = window.PORTAL_DATA; return (
Reporting periods

Folders

Folders represent reporting periods. Documents with a date in the period's range automatically appear in the matching folder.

{data.periods.map(p => (
onEdit(p)}>
{p.status}
{p.label}
{p.dateRange || "—"}
{p.docCount} documents {p.type}
))}
); }; // ─── Users ──────────────────────────────────────────────────────────────── const AdminUsers = ({ onEdit }) => { const data = window.PORTAL_DATA; const [search, setSearch] = React.useState(""); const visible = data.users.filter(u => !search || u.name.toLowerCase().includes(search.toLowerCase()) || u.entity.toLowerCase().includes(search.toLowerCase())); return (
Access · {data.users.length} accounts

Users

Manage investor accounts, group membership and access status. Pending users have been invited but haven't completed sign-in.

setSearch(e.target.value)} />
{visible.map(u => ( onEdit(u)}> ))}
Investor Entity Groups Status Last active
s[0]).slice(0,2).join("")} />
{u.name}
{u.email}
 {u.entity}
{u.groups.map(gid => { const g = data.groups.find(x => x.id === gid); return {g?.name}; })}
{u.status === "pending" ? Pending : Active} {u.lastActive}
); }; // ─── Groups ─────────────────────────────────────────────────────────────── const AdminGroups = ({ onEdit }) => { const data = window.PORTAL_DATA; return (
Access · {data.groups.length} groups

Groups

Groups control which documents users can see. Assign documents to one or more groups and add users to those groups.

{data.groups.map(g => { const docCount = data.documents.filter(d => d.groups.includes(g.id)).length; return (
onEdit(g)}>
{g.name}
{g.description}
Members
{g.memberCount}
Documents
{docCount}
); })}
); }; // ─── Audit / Notifications / Settings ──────────────────────────────────── const AdminAudit = () => { const fakeRows = [ { who: "Marcus Holloway", role: "Admin", action: "Uploaded document", target: "Quarterly Letter to Investors", ip: "82.41.x.x", time: "Apr 27, 14:22" }, { who: "Eleanor Whitfield", role: "Client", action: "Downloaded", target: "Capital Account Statement", ip: "203.0.x.x", time: "Apr 27, 11:08" }, { who: "Marcus Holloway", role: "Admin", action: "Replaced document", target: "Q1 2026 Performance Report (v2)", ip: "82.41.x.x", time: "Apr 24, 09:51" }, { who: "Charles Pemberton", role: "Client", action: "Downloaded", target: "Portfolio Holdings Detail", ip: "92.18.x.x", time: "Apr 23, 16:34" }, { who: "Marcus Holloway", role: "Admin", action: "Added user", target: "Theodore Ashby (t.ashby@…)", ip: "82.41.x.x", time: "Apr 22, 10:12" }, { who: "Sofia Ramírez", role: "Client", action: "Signed in", target: "—", ip: "85.62.x.x", time: "Apr 22, 08:45" }, { who: "Marcus Holloway", role: "Admin", action: "Created folder", target: "Q1 2026", ip: "82.41.x.x", time: "Apr 12, 09:00" }, ]; return (
Compliance

Audit log

Immutable record of every administrative action and document access. Retained for seven years per regulatory requirement.

{fakeRows.map((r, i) => ( ))}
ActorActionTargetIPTime
{r.who}
{r.role}
 {r.action} {r.target} {r.ip} {r.time}
); }; const AdminNotifications = () => { const [enabled, setEnabled] = React.useState(true); const [perDoc, setPerDoc] = React.useState(false); const [digestDay, setDigestDay] = React.useState("Friday"); return (
System

Notifications

Configure how investors are notified when new documents are added or replaced.

Email delivery
setEnabled(!enabled)} />
setPerDoc(!perDoc)} />
Email preview
C
CodeDrips Financial Services
New documents available — Q1 2026

Dear Eleanor,

Three new documents have been published to your portal for the Q1 2026 reporting period:

  • Quarterly Letter to Investors
  • Q1 2026 Performance Report
  • Capital Account Statement
You're receiving this because you're a member of LPs — Class A.
); }; const SettingRow = ({ label, sub, children }) => (
{label}
{sub &&
{sub}
}
{children}
); const AdminSettings = () => (
System

Settings

Portal branding, retention policy and integrations.

); // ─── Modals ──────────────────────────────────────────────────────────────── const UploadModal = ({ onClose, onPushToast }) => { const data = window.PORTAL_DATA; const [over, setOver] = React.useState(false); const [files, setFiles] = React.useState([ { name: "Q1 2026 Performance Report.pdf", size: "1.8 MB", type: "PDF" }, ]); const [period, setPeriod] = React.useState("2026-q1"); const [date, setDate] = React.useState("2026-04-12"); const [category, setCategory] = React.useState("Performance"); const [groups, setGroups] = React.useState(["g_lp_a", "g_lp_b"]); const [notify, setNotify] = React.useState(true); const submit = () => { onPushToast(`Uploaded ${files.length} document${files.length !== 1 ? "s" : ""} to ${data.periods.find(p => p.id === period).label}`); onClose(); }; return (
e.target === e.currentTarget && onClose()}>

Upload documents

Files are scanned and encrypted at rest.

{ e.preventDefault(); setOver(true); }} onDragLeave={() => setOver(false)} onDrop={(e) => { e.preventDefault(); setOver(false); }}>
Drop files here
PDF, XLSX, DOCX, PPTX up to 50 MB each
{files.length > 0 && (
Queued · {files.length}
{files.map((f, i) => (
{f.name}
{f.size}
))}
)}
); }; const UserModal = ({ user, onClose, onPushToast }) => { const data = window.PORTAL_DATA; const [name, setName] = React.useState(user.name); const [email, setEmail] = React.useState(user.email); const [entity, setEntity] = React.useState(user.entity); const [groups, setGroups] = React.useState([...user.groups]); const isNew = !user.id; const save = () => { onPushToast(isNew ? `Invitation sent to ${email}` : `${name} updated`); onClose(); }; return (
e.target === e.currentTarget && onClose()}>

{isNew ? "Add user" : "Edit user"}

{isNew ? "An invitation email will be sent on save." : "Changes apply immediately."}

{!isNew && (
Last active {user.lastActive} Status {user.status}
)}
{!isNew && }
); }; const GroupModal = ({ group, onClose, onPushToast }) => { const [name, setName] = React.useState(group.name); const [desc, setDesc] = React.useState(group.description); const isNew = !group.id; const save = () => { onPushToast(isNew ? `Group "${name}" created` : `Group updated`); onClose(); }; return (
e.target === e.currentTarget && onClose()}>

{isNew ? "New group" : "Edit group"}

Groups control which users can see which documents.