DemoBuy

Portfolio

Last updated on 2026-05-31

The portfolio module provides six screens for comprehensive portfolio management. It covers holdings with real-time P&L, asset allocation breakdowns, performance benchmarking, transaction history, dividend tracking, and tax lot reporting. All screens are in the (app) route group.

Portfolio Overview

Route: /portfolio

The main portfolio page displays your holdings, key metrics, and visual breakdowns of allocation and performance.

  • KPI stat cards -- four StatCard components: Total Value (with total return %), Total Return (dollar amount with percentage), Unrealized P&L, and Realized P&L; each color-coded green for positive, red for negative
  • Holdings table -- data table showing all positions with columns for ticker, company name, quantity, average cost basis, current price, market value, unrealized P&L (dollar and percent), day change, and sector; rows are color-coded by P&L
  • Allocation donut chart -- AllocationChart component showing portfolio distribution by sector as a Recharts PieChart (donut variant) with legend and percentage labels
  • Performance line chart -- PerformanceChart component showing portfolio value vs S&P 500 benchmark as dual Recharts LineChart series over time
import { StatCard } from "@/components/shared/stat-card"
import { HoldingsTable } from "@/components/portfolio/holdings-table"
import { AllocationChart } from "@/components/portfolio/allocation-chart"
import { PerformanceChart } from "@/components/portfolio/performance-chart"

Portfolio Overview Layout

┌──────────┬──────────┬──────────┬──────────┐
│ Total    │ Total    │ Unreal.  │ Realized │
│ Value    │ Return   │ P&L      │ P&L      │
├──────────┴──────────┴──────────┴──────────┤
│ Holdings Table                            │
│ (ticker, qty, cost, price, P&L, sector)   │
├─────────────────────┬─────────────────────┤
│ Allocation by       │ Performance vs      │
│ Sector (donut)      │ Benchmark (line)    │
└─────────────────────┴─────────────────────┘

Data Sources

Data Source Location
Portfolio summary portfolio data/seed.ts
Positions positions data/seed.ts
Performance data portfolioPerformance data/seed.ts
Benchmark data portfolioPerformance.benchmarkDataPoints data/seed.ts

Asset Allocation

Route: /portfolio/allocation

A dedicated allocation analysis page with multiple breakdown views.

  • Allocation by sector -- donut chart showing portfolio weight per sector (Technology, Healthcare, Financials, etc.) with percentage labels and a color-coded legend
  • Allocation by asset class -- donut chart breaking down by stock, ETF, option, bond, etc.
  • Top holdings table -- ranked table of the largest positions by portfolio weight, showing ticker, name, market value, and allocation percentage with a progress bar
  • Concentration warnings -- visual indicators when a single position or sector exceeds recommended allocation thresholds
import { AllocationChart } from "@/components/portfolio/allocation-chart"

Performance

Route: /portfolio/performance

Portfolio performance analysis with benchmark comparison and key metrics.

  • Performance chart -- dual-line Recharts chart comparing portfolio returns against the S&P 500 benchmark over configurable time ranges
  • Performance metrics cards -- total return, annualized return, Sharpe ratio, max drawdown, alpha, and beta displayed as stat cards
  • Best and worst days -- cards highlighting the best and worst performing days with date and return percentage
import { PerformanceChart } from "@/components/portfolio/performance-chart"

Transactions

Route: /portfolio/transactions

A chronological log of all account transactions.

  • Transaction table -- data table with columns for date, type badge (Buy = green, Sell = red, Dividend = blue, Deposit = teal, Withdrawal = amber, Fee = gray), ticker, description, amount, and running balance
  • Type filter tabs -- filter transactions by type: All, Buys, Sells, Dividends, Deposits, Withdrawals
  • Date range filter -- date picker to narrow transactions to a specific period
  • Search -- text input to filter by ticker or description

Transaction Types

Type Badge Color Icon
Buy green ArrowDown
Sell red ArrowUp
Dividend blue DollarSign
Deposit teal Plus
Withdrawal amber Minus
Fee gray Receipt

Dividends

Route: /portfolio/dividends

Dividend income tracking and projection.

  • Dividend summary cards -- Total Dividends Received, YTD Dividends, Monthly Average, and Portfolio Yield displayed as stat cards
  • Monthly dividend chart -- Recharts BarChart showing dividend income by month over the past 12 months
  • Dividend records table -- data table with columns for ex-date, pay date, ticker, company name, dividend per share, shares held, total amount, type (cash/stock/special), and frequency (monthly/quarterly/annual)
  • Upcoming dividends -- section highlighting positions with upcoming ex-dates

Tax Lots

Route: /portfolio/tax

Tax reporting with lot-level gain/loss tracking and wash sale detection.

  • Tax summary cards -- Short-Term Gains, Long-Term Gains, Short-Term Losses, Long-Term Losses, Net Gain/Loss, and Wash Sale Adjustments
  • Tax lot table -- data table with columns for ticker, purchase date, sale date, quantity, cost basis, proceeds, gain/loss (color-coded), holding period badge (short-term = amber, long-term = green), and wash sale flag (red indicator)
  • Year selector -- dropdown to switch between tax years
  • Export -- button to export tax lot data as CSV for tax preparation

Holding Period Badges

Period Badge Color Condition
Short-term amber Held less than 1 year
Long-term green Held 1 year or more

Next Steps

Previous

Dashboard & Watchlist

Next

Trading & Orders