DemoBuy

Dashboard & Watchlist

Last updated on 2026-05-31

The dashboard and watchlist provide the primary landing experience for the trading platform. The dashboard shows a portfolio snapshot with market data, while the watchlist offers multi-list stock tracking. Both screens share the (app) route group layout with Sidebar and AppHeader.

Trading Dashboard

Route: /

The main dashboard is the default landing page. It provides a high-level snapshot of your portfolio, current market conditions, and recent activity.

  • Market status badge -- colored badge indicating whether the market is open (green) or in after-hours (amber), displayed above the page header
  • Market indices strip -- horizontal scrolling strip showing major indices (S&P 500, NASDAQ, DOW, Russell 2000) with current value, change, and change percentage; green for positive, red for negative
  • KPI stat cards -- four StatCard components: Portfolio Value (with day change %), Day P&L (with percentage), Open Positions (count), and Buying Power (available cash)
  • Portfolio value chart -- Recharts AreaChart showing portfolio value over time with a teal gradient fill, rendered inside the PortfolioChart component
  • Watchlist widget -- compact preview of the default watchlist showing ticker, price, change, and change percentage in a scrollable card
  • Activity feed -- recent notifications and alerts displayed as a vertical list with type icons, timestamps, and descriptions
import { StatCard } from "@/components/shared/stat-card"
import { MarketStrip } from "@/components/dashboard/market-strip"
import { PortfolioChart } from "@/components/dashboard/portfolio-chart"
import { WatchlistWidget } from "@/components/dashboard/watchlist-widget"
import { ActivityFeed } from "@/components/dashboard/activity-feed"

Dashboard Layout

┌───────────────────────────────────────────┐
│ ● Market Open                             │
│ Dashboard                                 │
├───────────────────────────────────────────┤
│ S&P 500 +0.8%  NASDAQ +1.2%  DOW +0.5%  │
├──────────┬──────────┬──────────┬──────────┤
│ Portfolio│ Day P&L  │ Open     │ Buying   │
│ Value    │          │ Positions│ Power    │
├──────────┴──────────┼──────────┴──────────┤
│ Portfolio Chart     │ Watchlist Widget    │
│ (area chart)        │ (stock list)        │
├─────────────────────┴─────────────────────┤
│ Activity Feed                             │
└───────────────────────────────────────────┘

Data Sources

Data Source Location
Portfolio summary portfolio data/seed.ts
Positions positions data/seed.ts
Market indices marketIndices data/seed.ts
Portfolio chart portfolioPerformance.dataPoints data/seed.ts
Watchlist items watchlists[0].items data/seed.ts
Notifications notifications data/seed.ts

Watchlist

Route: /watchlist

A full watchlist management page with multiple named lists, real-time quotes, and symbol management.

  • Tabbed watchlists -- horizontal Tabs component with one tab per watchlist (e.g., "Tech Stocks", "Dividend Picks", "Crypto"); switching tabs shows the corresponding stock list
  • Add symbol dialog -- "Add Symbol" button in the page header opens a Dialog with a ticker input field and confirmation button
  • Watchlist table -- data table showing ticker symbol, company name, last price, change amount, change percentage (color-coded green/red), volume, and market cap for each item
  • Color-coded changes -- positive changes display in green text, negative in red, with corresponding arrow indicators
import { WatchlistTable } from "@/components/watchlist/watchlist-table"
import { PageHeader } from "@/components/shared/page-header"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"

Watchlist Features

Feature Description
Multiple lists Create and switch between named watchlists via tabs
Add symbol Dialog-based ticker entry with form validation
Real-time quotes Price, change, volume, and market cap columns
Color coding Green for gains, red for losses throughout
Responsive Table scrolls horizontally on mobile

Data Sources

Data Source Location
Watchlists watchlists data/seed.ts
Watchlist items watchlists[n].items data/seed.ts

Next Steps

  • Portfolio -- holdings, allocation, performance, transactions, dividends, and tax lots
  • Trading & Orders -- order entry, order book, options chain, and trade history
  • Markets & Screener -- stock screener, scanner, heatmap, and calendar

Previous

Project Structure

Next

Portfolio