Trading & Orders

Last updated on 2026-05-31

The trading module is the core transactional interface of the Trading Dashboard Kit. It provides five screens for placing orders, viewing market depth, analyzing options, monitoring positions, and reviewing trade history. All screens are in the (app) route group.

Order Entry

Route: /trading/order-entry

A two-panel layout with an order form and a compact order book side by side.

Order form -- full-featured trade entry form with:
- Ticker search -- autocomplete input to select the stock/asset to trade
- Side toggle -- Buy (green) / Sell (red) toggle buttons
- Order type selector -- dropdown for Market, Limit, Stop, Stop-Limit, and Trailing Stop order types
- Quantity input -- number input for share count
- Price inputs -- conditional price fields: limit price (for Limit and Stop-Limit), stop price (for Stop and Stop-Limit), trailing amount/percent (for Trailing Stop)
- Time in force -- dropdown selector for Day, GTC (Good Till Cancelled), IOC (Immediate or Cancel), and FOK (Fill or Kill)
- Order summary -- calculated estimated total, commission, and net amount displayed before submission
- Submit button -- color-coded by side: green "Buy" or red "Sell"
Mini order book -- compact view of the top bid and ask levels showing price, quantity, and spread; updates alongside the order form

import { OrderForm } from "@/components/trading/order-form"
import { OrderBookMini } from "@/components/trading/order-book-mini"

Order Entry Layout

┌─────────────────────┬─────────────────────┐
│ Order Form          │ Order Book (Mini)   │
│                     │                     │
│ Ticker: [AAPL    ]  │ Ask  $192.50  200   │
│ [  BUY  ] [ SELL ]  │ Ask  $192.45  150   │
│ Type: [Limit    ▾]  │ Ask  $192.40  300   │
│ Qty:  [100      ]   │ ─── Spread 0.05 ── │
│ Price: [$192.35 ]   │ Bid  $192.35  250   │
│ TIF:   [Day     ▾]  │ Bid  $192.30  180   │
│                     │ Bid  $192.25  400   │
│ Est. Total: $19,235 │                     │
│ [  Place Order    ] │                     │
└─────────────────────┴─────────────────────┘

Order Types

Type	Description	Required Fields
Market	Execute at current market price	Quantity only
Limit	Execute at specified price or better	Quantity, Limit Price
Stop	Trigger market order at stop price	Quantity, Stop Price
Stop-Limit	Trigger limit order at stop price	Quantity, Stop Price, Limit Price
Trailing Stop	Dynamic stop that follows price movement	Quantity, Trail Amount or %

Data Sources

Data	Source	Location
Stocks list	`stocks`	`data/seed.ts`
Order book	`orderBook`	`data/seed.ts`

Market Depth

Route: /trading/market-depth

Full order book visualization with a cumulative depth chart.

Full order book -- split-panel layout showing all bid levels (left/green) and ask levels (right/red) with price, quantity, order count, and cumulative total for each level; spread is displayed prominently between the two sides
Depth chart -- Recharts AreaChart showing cumulative bid volume (green area) and cumulative ask volume (red area) plotted against price levels; the intersection point highlights the current market price and spread

import { FullOrderBook } from "@/components/trading/full-order-book"
import { DepthChart } from "@/components/trading/depth-chart"

Order Book Columns

Column	Description
Price	Bid or ask price level
Quantity	Number of shares at this level
Orders	Number of individual orders
Total	Cumulative quantity up to this level

Options Chain

Route: /trading/options

An options chain table showing calls and puts with full Greeks data.

Expiration selector -- dropdown to choose the expiration date; available dates are listed chronologically
Options chain table -- split table with calls on the left and puts on the right, centered on strike price:
- Call columns -- last price, change, bid, ask, volume, open interest, implied volatility, delta, gamma, theta, vega
- Strike column -- strike price (center), highlighted for at-the-money strikes
- Put columns -- matching columns for put contracts
In-the-money highlighting -- ITM calls and puts are highlighted with a subtle background tint
Strategy builder -- multi-leg option strategy assembly (covered calls, spreads, iron condors, straddles)

import { OptionsChainTable } from "@/components/trading/options-chain-table"

Options Greeks

Greek	Symbol	What It Measures
Delta	D	Price sensitivity to underlying
Gamma	G	Rate of change of delta
Theta	Th	Time decay per day
Vega	V	Sensitivity to volatility
Rho	R	Sensitivity to interest rates
IV	--	Implied volatility percentage

Data Sources

Data	Source	Location
Options chain	`optionsChain`	`data/seed.ts`

Positions

Route: /trading/positions

A data table of all open positions with real-time P&L tracking.

Positions table -- columns for ticker, company name, quantity, average cost, current price, market value, unrealized P&L (dollar and percent, color-coded), day change (dollar and percent), and allocation weight
Sort options -- click column headers to sort by any field
P&L color coding -- green text and background tint for profitable positions, red for losing positions
Total row -- summary row at the bottom showing total market value, total unrealized P&L, and total day change

import { PositionsTable } from "@/components/trading/positions-table"

Trade History

Route: /trading/history

A searchable log of all executed trades.

Trade history table -- data table with columns for execution date/time, ticker, side badge (Buy = green, Sell = red), order type, quantity, fill price, total value, fees, and net amount
Date range filter -- date picker to narrow trades to a specific period
Side filter -- tabs for All, Buys, and Sells
Search -- text input to filter by ticker or order ID
Export -- button to export trade history as CSV

import { TradeHistoryTable } from "@/components/trading/trade-history-table"

Side Badges

Side	Badge Color	Icon
Buy	green	`ArrowDown`
Sell	red	`ArrowUp`

Data Sources

Data	Source	Location
Trades	`trades`	`data/seed.ts`
Orders	`orders`	`data/seed.ts`
Positions	`positions`	`data/seed.ts`

Next Steps

Markets & Screener -- stock screener, scanner, heatmap, and calendar
Portfolio -- holdings, allocation, and performance
Analytics & Risk -- P&L analysis and backtesting

Portfolio

Markets & Screener