root = Card([header, statusRow, timeframeBar, portfolioSection, pnlSection, positionsSection, exposureSection, varSection, moversSection, watchlistSection, ordersSection, marginSection, headlinesSection, econSection, strategySection, drawdownSection, riskSection, rebalanceSection, orderFormSection])

header = CardHeader("Trading Desk", "Morning workspace — overview of positions, risk and market")

statusRow = Card([marketStatus, sessionBadge], "sunk", "row", "m")
marketStatus = Callout("info", "Market open", "U.S. equities trading live — 09:42 ET")
sessionBadge = Badge("Live", "outline")

timeframeBar = Card([timeframeLabel, timeframeButtons], "clear", "row", "m")
timeframeLabel = TextContent("Timeframe", "small-heavy")
timeframeButtons = Buttons([tf1h, tf1d, tf1w, tf1m])
tf1h = Button("1H", null, "secondary", null, "small")
tf1d = Button("1D", null, "primary", null, "small")
tf1w = Button("1W", null, "secondary", null, "small")
tf1m = Button("1M", null, "secondary", null, "small")

portfolioSection = Card([portfolioHeading, portfolioKpis], "sunk")
portfolioHeading = Heading("Portfolio value", "h3")
portfolioKpis = Table([portMetricCol, portValueCol])
portMetricCol = Col("Metric", ["Total value", "Cash", "Invested", "Day P&L"])
portValueCol = Col("Value", ["$4,820,500", "$315,000", "$4,505,500", "+$28,400"])

pnlSection = Card([pnlHeading, pnlChart])
pnlHeading = Heading("Profit & loss today", "h3")
pnlChart = AreaChart(["09:30", "10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00"], [pnlSeries], "natural", "Time", "USD")
pnlSeries = Series("Cumulative P&L", [-1200, 3400, 5200, 8900, 12400, 15800, 14300, 17600, 20900, 23400, 25100, 26800, 27400, 28400])

positionsSection = Card([positionsHeading, positionsTable])
positionsHeading = Heading("Positions", "h3")
positionsTable = Table([posTicker, posSize, posEntry, posCurrent])
posTicker = Col("Ticker", ["AAPL", "MSFT", "NVDA", "TSLA", "AMZN", "GOOGL", "JPM"])
posSize = Col("Size", [1200, 800, 1500, 600, 900, 700, 1100])
posEntry = Col("Entry", ["$198.40", "$415.20", "$128.60", "$245.30", "$182.10", "$172.40", "$204.80"])
posCurrent = Col("Current", ["$205.10", "$422.80", "$135.40", "$238.20", "$186.50", "$175.90", "$209.30"])

exposureSection = Card([exposureHeading, exposureChart])
exposureHeading = Heading("Exposure by sector", "h3")
exposureChart = PieChart(["Technology", "Consumer", "Financials", "Healthcare", "Energy"], [42, 18, 15, 13, 12], "donut")

varSection = Card([varHeading, varKpis])
varHeading = Heading("Value at risk", "h3")
varKpis = Table([varMetricCol, varValueCol])
varMetricCol = Col("Metric", ["1-day VaR (95%)", "1-day VaR (99%)", "10-day VaR (95%)"])
varValueCol = Col("Value", ["$62,300", "$94,800", "$197,000"])

moversSection = Card([moversHeading, moversTable])
moversHeading = Heading("Today's biggest movers", "h3")
moversTable = Table([moverTicker, moverPnl])
moverTicker = Col("Ticker", ["NVDA", "AAPL", "TSLA", "JPM", "AMZN"])
moverPnl = Col("Day P&L", ["+$12,900", "+$8,040", "-$4,200", "+$4,950", "+$3,960"])

watchlistSection = Card([watchlistHeading, watchlistTable])
watchlistHeading = Heading("Watchlist", "h3")
watchlistTable = Table([watchTicker, watchPrice])
watchTicker = Col("Ticker", ["META", "NFLX", "AMD", "CRM", "ORCL", "INTC"])
watchPrice = Col("Price", ["$512.30", "$689.40", "$178.20", "$312.60", "$145.80", "$43.90"])

ordersSection = Card([ordersHeading, ordersTable])
ordersHeading = Heading("Working orders", "h3")
ordersTable = Table([orderTicker, orderSide, orderSize, orderLimit])
orderTicker = Col("Ticker", ["NVDA", "TSLA", "AMD"])
orderSide = Col("Side", ["BUY", "SELL", "BUY"])
orderSize = Col("Size", [500, 300, 800])
orderLimit = Col("Limit", ["$134.00", "$240.00", "$176.50"])

marginSection = Card([marginHeading, marginProgress])
marginHeading = Heading("Margin in use", "h3")
marginProgress = Progress(68, "68% of available margin used")

headlinesSection = Card([headlinesHeading, headlineList])
headlinesHeading = Heading("Market headlines", "h3")
headlineList = ListBlock([headline1, headline2, headline3, headline4])
headline1 = ListItem("Fed signals rate cut in September", "Positive sentiment", null, "Positive")
headline2 = ListItem("Tech earnings beat expectations", "Positive sentiment", null, "Positive")
headline3 = ListItem("Oil prices slip on supply concerns", "Neutral sentiment", null, "Neutral")
headline4 = ListItem("Retail sales miss forecasts", "Negative sentiment", null, "Negative")

econSection = Card([econHeading, econTable])
econHeading = Heading("Economic releases this week", "h3")
econTable = Table([econDay, econEvent, econImpact])
econDay = Col("Day", ["Mon", "Tue", "Wed", "Thu", "Fri"])
econEvent = Col("Event", ["CPI", "PPI", "Retail Sales", "Jobless Claims", "Consumer Sentiment"])
econImpact = Col("Impact", ["High", "Medium", "High", "Medium", "Medium"])

strategySection = Card([strategyHeading, strategyChart])
strategyHeading = Heading("Strategy returns — year to date", "h3")
strategyChart = HorizontalBarChart(["Momentum", "Mean reversion", "Pairs", "Event driven"], [momentumSeries, meanRevSeries, pairsSeries, eventSeries], "grouped", "Return %", "Strategy")
momentumSeries = Series("Return", [18.2])
meanRevSeries = Series("Return", [11.4])
pairsSeries = Series("Return", [8.9])
eventSeries = Series("Return", [14.6])

drawdownSection = Card([drawdownHeading, drawdownChart])
drawdownHeading = Heading("Drawdown — past year", "h3")
drawdownChart = AreaChart(["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], [drawdownSeries], "step", "Month", "Drawdown %")
drawdownSeries = Series("Drawdown", [0, -2, -4, -3, -6, -8, -5, -3, -7, -9, -4, -2])

riskSection = Card([riskHeading, riskList])
riskHeading = Heading("Risk limits near breach", "h3")
riskList = ListBlock([risk1, risk2, risk3])
risk1 = ListItem("Concentration limit — Technology", "At 84% of 20% cap", null, "Watch")
risk2 = ListItem("Leverage ratio", "At 91% of 2.5x limit", null, "Watch")
risk3 = ListItem("Single-name VaR — NVDA", "At 88% of limit", null, "Watch")

rebalanceSection = Card([rebalanceHeading, rebalanceText, rebalanceButton])
rebalanceHeading = Heading("Rebalance", "h3")
rebalanceText = TextContent("Target portfolio to benchmark weights across sectors.", "default")
rebalanceButton = Buttons([runRebalance])
runRebalance = Button("Run rebalance", null, "primary")

orderFormSection = Card([orderHeading, orderForm])
orderHeading = Heading("Place order", "h3")
orderForm = Form("place-order", orderButtons, [orderTickerField, orderSideField, orderQtyField])
orderTickerField = FormControl("Ticker", orderTickerInput)
orderTickerInput = Input("ticker", "e.g. AAPL")
orderSideField = FormControl("Side", orderSideSelect)
orderSideSelect = Select("side", [sideBuy, sideSell], "Choose side")
sideBuy = SelectItem("BUY", "Buy")
sideSell = SelectItem("SELL", "Sell")
orderQtyField = FormControl("Quantity", orderQtyInput)
orderQtyInput = Input("quantity", "e.g. 500", "number")
orderButtons = Buttons([submitOrder, cancelOrder])
submitOrder = Button("Place order", null, "primary")
cancelOrder = Button("Cancel", null, "tertiary")