# 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/
│   ├── supabaseClient.ts       # Supabase client initialization
│   └── 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_SUPABASE_URL` | Yes | Supabase project URL |
| `VITE_SUPABASE_ANON_KEY` | Yes | Supabase anonymous key |
| `VITE_API_URL` | Yes | Bot service API URL (default: `http://localhost:5000`) |
| `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