Annotated mockups of the key Portfolio screens. These depict the Delio Frontend's Portfolio Reporting module (React + Ant Design) as seen by an internal admin user.
These are structural mockups, not pixel-perfect screenshots
The layouts, labels, and data placement match the real application. Colors follow Delio's accent scheme (purple primary). The mockup data is illustrative — a fund called "Helm Growth Fund I" with realistic metrics.
1. Portfolio Dashboard (Group View — Fund Mode)
This is the default view for an internal admin. It shows the fund overview with capital metrics, a valuation bridge chart, and allocation breakdowns.
1Structure Switcher — toggles between Fund, Direct, and Combined views. Each loads entirely different data and widget endpoints.
2View Mode Toggle — "Group View" shows all investors (admin view). Toggle to "My View" to see what an individual investor sees.
3Quarter & Currency selectors — reporting quarter controls the date cutoff sent to the calc service. Currency selector triggers FX conversion of all amounts.
4Tab bar — Overview, Investors, Investments, Transactions, Ledger. Fund managers see all 5; investors see Overview, Investments, Documents, Transactions.
5Widget cards — powered by /widgets/capital-overview. Each value comes from the Go calc service (or Redis cache).
6Valuation Bridge — waterfall chart from /graphs/overview-bridge. Shows how NAV changed between periods. Can be hidden via hideValuationBridge config setting.
2. Investors Table
The Investors tab shows all LPs with their key metrics per fund. This data comes from /tables/investors.
Overview
Investors
Investments
Transactions
Ledger
Export
Investor
Committed
Called
Paid-In
Distributions
NAV
TVPI
DPI
Alice Smith
$5,000,000
$2,000,000
$2,000,000
$147,059
$5,912,000
3.03x
0.07x
Bob Johnson
$3,000,000
$1,200,000
$1,200,000
$88,235
$3,547,000
3.03x
0.07x
Elm Street Capital
$4,000,000
$1,600,000
$1,600,000
$117,647
$4,729,000
3.03x
0.07x
Carol Williams
$2,000,000
$800,000
$800,000
$58,824
$2,365,000
3.03x
0.07x
Showing 4 of 6 investors
1Investor names are clickable — drilling into an investor shows their detail page with sub-tabs: Dashboard, Investments, Documents, Transactions.
2Export button — downloads the table as Excel via /tables/investors/export.
3All values are currency-converted — if the reporting currency is EUR, all amounts are converted from their native currency using the rates DB.
3. Data Import Page
The import page has a left sidebar with import categories and a main area for template download + file upload. This is where Module 6's import pipeline begins.
1Left sidebar categories — each category shows downloadable templates and the upload zone. "Imports" tab shows import history with status, errors, and reversal actions.
2Template downloads — pre-formatted .xlsx files with the correct headers and a description row. Always start from these rather than building from scratch.
3Upload zone — Ant Design's Upload.Dragger component. On upload: file goes to S3, job is queued, and you're taken to the Imports tab to watch progress. On validation error: a modal shows per-row error messages.
4. Investor Self-Service ("My View")
When an LP logs in, they see a scoped-down version of the dashboard — only their own positions, metrics, and documents. No other investors visible.
1Reduced sidebar — investors see only "My Portfolio" in the nav. No access to admin-level features, Data Import, or Settings.
2Scoped tabs — Overview, Investments, Documents (capital call/distribution notices, QPRs), Transactions. No Investors tab (they can't see other LPs) and no Ledger.
3All data is investor-scoped — every API call filters by the logged-in investor's ID. The widget endpoint returns only their committed, paid-in, NAV, and metrics. Investors can request redemptions or asset transfers from this view (which enter the approval workflow from Module 5).