learning_ai_invt_trdg/web

Bytelyst Trading Dashboard

Real-time trading dashboard for the Bytelyst Trading Platform. Built with React 19, TypeScript, Tailwind CSS 4, and Supabase.

Features

• AI Strategy Assistant — Chat-based profile creation using natural language (powered by Perplexity/OpenAI/Gemini). Floating robot icon available on all pages with quick-action suggestions, profile preview, and apply/cancel workflow
• Live Market Data — Real-time price updates via Socket.IO from the bot service
• Strategy Profile Management — Create, edit, delete, and activate/deactivate trading profiles with per-profile rule configuration. Elevated 2D card design with embedded metrics table and color-coded rule icons
• 7-Rule Pipeline Visualization — View the strategy rule pipeline in the Admin tab
• Position Tracking — Hybrid view of manual entries and bot-managed positions with profile attribution
• Trade History — Complete trade ledger filtered by profile, with P&L metrics and win rate
• Signal Monitor — Live rule-by-rule signal analysis per symbol
• Global Config — Edit bot configuration from the dashboard
• User Settings — Manage exchange API keys, thresholds, and preferences
• Auth — Supabase Authentication with email/password and password reset
• Role-Based Access — Admin tab only visible and accessible to admin users

Tech Stack

Layer	Technology
Framework	React 19
Language	TypeScript 5.9
Build	Vite 7
Styling	Tailwind CSS 4
Charts	Recharts
Icons	Lucide React
Real-time	Socket.IO Client
Database	Supabase (PostgreSQL)
Auth	Supabase Auth

Quick Start

Prerequisites

• Node.js 18+
• Running instance of bytelyst-trading-bot-service
• Supabase project

Installation

git clone https://github.com/saravanakumardb/bytelyst-trading-dashboard-web.git
cd bytelyst-trading-dashboard-web
npm install

Configuration

Create a .env file in the project root:

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=eyJ...your-anon-key
VITE_API_URL=http://localhost:5000

Run

# Development
npm run dev

# Production build
npm run build

# Preview production build
npm run preview

Project Structure

src/
├── components/
│   ├── AuthContext.tsx           # Supabase auth provider + user profile
│   ├── Login.tsx                # Login / signup form
│   ├── ResetPassword.tsx        # Password reset flow
│   ├── TradeProfileManager.tsx  # Strategy profile CRUD + rule config (elevated 2D cards)
│   ├── ChatControl.tsx          # AI Strategy Assistant (floating robot + chat panel)
│   ├── GlobalConfigManager.tsx  # Bot config editor
│   ├── EntryForm.tsx            # Manual trade entry form
│   ├── SymbolCard.tsx           # Symbol price card with indicators
│   ├── PriceChart.tsx           # Recharts price history chart
│   ├── AlertFeed.tsx            # Real-time alert feed
│   ├── MarketTicker.tsx         # Horizontal price ticker
│   └── MarketOpportunities.tsx  # Market opportunity scanner
├── tabs/
│   ├── OverviewTab.tsx          # Dashboard home with symbol cards
│   ├── SignalsTab.tsx           # Live rule-by-rule signal analysis
│   ├── PositionsTab.tsx         # Active positions (manual + bot)
│   ├── HistoryTab.tsx           # Trade history with profile filter
│   ├── EntriesTab.tsx           # Manual watchlist entries
│   ├── AdminTab.tsx             # Admin panel (rules, profiles, config)
│   ├── ConfigTab.tsx            # Global bot config editor
│   └── SettingsTab.tsx          # User settings + API keys
├── hooks/
│   └── useWebSocket.ts         # Socket.IO hook for real-time data
├── lib/
│   ├── authSession.ts          # Platform-service session bootstrap + token refresh
│   └── const.ts                # Table names + constants
├── App.tsx                      # Main app layout + tab navigation
├── main.tsx                     # React entry point
└── index.css                    # Tailwind CSS imports + custom styles

Environment Variables

Variable	Required	Description
VITE_PLATFORM_URL	Yes	Platform-service API base URL
VITE_TRADING_API_URL	Yes	Trading backend API base URL
VITE_PRODUCT_ID	No	Product identifier override
VITE_SOCKET_PATH	No	Custom Socket.IO path

Dashboard Tabs

Overview

Main dashboard showing live market data for all tracked symbols. Each symbol card displays price, 24h change, session, signal status, indicators (EMA, RSI), and active position P&L.

Signals

Detailed rule-by-rule breakdown for each symbol showing which strategy rules pass/fail in the current market context.

Positions

Hybrid view merging manual entries and bot-managed positions. Positions are tagged as BOT (with profile name) or MANUAL. Filters by profile.

History

Complete trade ledger with:

• Profile filter dropdown
• Metrics bar (total P&L, win rate, trade count, avg P&L)
• Per-trade detail: symbol, side, entry/exit price, P&L, reason

Strategy Clusters (main tab)

Elevated 2D profile cards with:

• Aggregate stats header (total profiles, capital, P&L, trades)
• Per-profile metrics panel (Capital, P&L, Risk) with column dividers
• Embedded details table (active rules with color-coded icons, max daily loss, max open trades, order type, cooldown)
• Win rate progress bar with gradient fill
• Edit drawer with General / Rules / Risk & Execution tabs
• AI chat-created profiles appear instantly

Admin (admin-only)

Three sub-sections:

• Strategy Pipeline — Read-only pipeline view of the 7 strategy rules
• Global Config — Edit bot key-value configuration
• Debug — Dashboard environment variables and bot configuration display (fetched from /api/config)

Settings

User account settings: name, exchange API keys (paper + live), trading thresholds, and notification preferences.

Database Tables

The dashboard reads/writes these Supabase tables (defined in lib/const.ts):

Constant	Table	Usage
tableNameStocks	entries	Manual watchlist entries
tableNameTransactions	trade_history	Completed trades
tableNameOrders	orders	Active/pending orders
tableNameProfiles	trade_profiles	Strategy profiles
tableNameUsers	users	User accounts
tableNameBotConfig	bot_config	Global configuration

Connecting to Bot Service

The dashboard connects to the bot service via:

1. Socket.IO — Real-time updates (prices, signals, positions, alerts)
2. REST API — Status checks, manual trades, config reads

Set VITE_API_URL to point to your bot service instance. The connection status is shown in the header.

License

Private