Skip to content

Dashboard Overview

The ICT Edge Fund dashboard is a live web UI that displays strategy signals generated by TradingView indicators in real time. It aggregates session bias, higher-timeframe bias, order block data, SMT divergence, and a computed trade direction into a single view.

Access

Method URL
Local (direct) http://localhost:8000
Production (via nginx) https://ictedgefund.com

The dashboard is served by a Node.js HTTP server (server.js) running on port 8000. In production, nginx terminates TLS and proxies requests to the host.

Theme and Branding

The dashboard uses a Material Design theme built on a BTC-inspired palette:

Role Value
Gold (accent) BTC gold
Primary background Black
Primary foreground White

Fonts

Usage Font
UI text Inter (Google Fonts)
Numeric values JetBrains Mono (Google Fonts)
Icons Material Symbols Outlined (Google Fonts)

Light / Dark Mode

A sun/moon toggle icon in the header switches between light and dark mode. The selection is persisted to localStorage and on first load the dashboard detects the user's system color-scheme preference.

Favicon

A gold diamond SVG serves as the browser tab favicon.

Branding

The header displays "ICT EDGE" followed by "FUND" in gold, accompanied by a pulsing green status dot that indicates the live connection.

Layout

The dashboard is organized into the following regions:

Header (48 px)

  • Branding text with pulsing green status dot
  • Symbol and price of the active instrument
  • Timeframe label
  • Light/dark mode toggle (sun/moon icon)
  • Cog icon -- opens the Settings popup
  • Docs link -- links to this wiki

Ticker Strip (40 px)

A horizontal strip below the header showing cached ticker data.

Strategy Banner

A horizontal bar below the ticker strip showing the computed trade signal:

Field Description
Direction Pill-shaped tag: LONG (green tint), SHORT (red tint), WAITING (gray), or TARGET HIT (gold tint)
Entry Entry price from the nearest unspent order block
Stop Stop-loss level
Target Take-profit level
R:R Risk-to-reward ratio
ATR Average True Range value
QTY Position size from the OB AI table

Each stat item shows an uppercase label above a monospace value. On mobile the direction pill is centered and the six stats wrap into a 3-column grid.

Desktop: 3-Column Layout

Column Width Contents
Left sidebar 300 px Session Bias, HTF Bias, SMT AI cards
Center Fluid Live chart screenshot
Right sidebar 300 px Order Blocks table, ATR / Risk panel
  • Ticker cache table -- shows cached ticker data used by the strategy
  • Collapsed by default; click to expand

Component System

The UI is built from a consistent set of reusable components:

Component Description
Cards Collapsible headers with expand/collapse toggle
Pill tags Pill-shaped colored labels (e.g., BULLISH, BEAR)
Toggle switches On/off switches (e.g., Fresh OB filter)
Ghost / outline buttons Low-emphasis action buttons
KV pairs Key-value rows with tinted background cells
Card rows Label-left / value-right layout inside cards
Status dot Pulsing colored dot indicating live status

Mobile Responsive Design

The dashboard adapts to smaller screens with two breakpoints:

Breakpoint Behavior
768 px Mobile layout activates
480 px Compact mobile adjustments

Mobile behavior:

  • Single-column layout; all sidebar cards stack vertically
  • All cards collapsed by default
  • Chart screenshot remains prominent at the top
  • Tables scroll horizontally when they overflow
  • Footer collapsed by default
  • Settings modal renders full-width, anchored to the bottom of the screen

Auto-Refresh

The dashboard polls two endpoints on a timer:

Data Interval Endpoint
Strategy signals Every 5 seconds GET /api/data
Chart screenshot Every 15 seconds GET /api/screenshot

No manual refresh is needed -- the page stays current automatically.