177 lines
6.9 KiB
Markdown
177 lines
6.9 KiB
Markdown
# 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](https://github.com/saravanakumardb/bytelyst-trading-bot-service)
|
|
- Supabase project
|
|
|
|
### Installation
|
|
|
|
```bash
|
|
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:
|
|
|
|
```env
|
|
VITE_SUPABASE_URL=https://your-project.supabase.co
|
|
VITE_SUPABASE_ANON_KEY=eyJ...your-anon-key
|
|
VITE_API_URL=http://localhost:5000
|
|
```
|
|
|
|
### Run
|
|
|
|
```bash
|
|
# 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
|