God-Tier Crypto Trading Bot Dashboard

A professional, real-time Next.js 14 dashboard for monitoring and controlling your cryptocurrency trading bot.

Features

• Real-time Trading Positions - Live table showing open positions with P&L calculations
• Account Balance Chart - Interactive line chart displaying balance history over time
• Trade History Table - Paginated list of all executed trades with comprehensive details
• Bot Controls - Start, pause, and stop the trading bot with RPC functions
• Live Market Data - Real-time price feeds for BTC, ARB, and SOL
• Bot Status Indicator - Current status (RUNNING/PAUSED/STOPPED) with uptime tracking

Tech Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Shadcn/ui
• Database: Supabase (PostgreSQL with real-time subscriptions)
• Charts: Recharts
• Icons: Lucide React

Getting Started

Prerequisites

• Node.js 18+ installed
• Supabase account and project set up
• Environment variables configured

Installation

1. Install dependencies:

npm install

2. Create a .env.local file in the root directory:

cp .env.local.example .env.local

3. Update the .env.local file with your Supabase credentials:

NEXT_PUBLIC_SUPABASE_URL=https://uwcjhctzwvsfmknsrooy.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_actual_anon_key_here

Development

Run the development server:

npm run dev

Open http://localhost:3000 in your browser to see the dashboard.

Production Build

Build for production:

npm run build
npm start

Database Schema

The dashboard expects the following Supabase tables:

trades

• id: uuid (primary key)
• created_at: timestamp
• symbol: text
• side: text (buy/sell)
• type: text (market/limit)
• quantity: numeric
• price: numeric
• total: numeric
• fee: numeric
• profit_loss: numeric (nullable)
• status: text (pending/filled/cancelled)

positions

• id: uuid (primary key)
• symbol: text
• side: text (long/short)
• entry_price: numeric
• current_price: numeric
• quantity: numeric
• unrealized_pnl: numeric
• realized_pnl: numeric
• percentage_pnl: numeric
• opened_at: timestamp
• updated_at: timestamp

account_snapshots

• id: uuid (primary key)
• timestamp: timestamp
• balance: numeric
• equity: numeric
• unrealized_pnl: numeric
• total_trades: integer

bot_status

• id: uuid (primary key)
• status: text (RUNNING/PAUSED/STOPPED)
• uptime_seconds: integer
• last_heartbeat: timestamp
• config: jsonb
• error_message: text (nullable)

market_data

• symbol: text (primary key)
• price: numeric
• change_24h: numeric
• volume_24h: numeric
• high_24h: numeric
• low_24h: numeric
• last_updated: timestamp

RPC Functions

The following Supabase RPC functions should be created:

• start_bot() - Starts the trading bot
• pause_bot() - Pauses the trading bot
• stop_bot() - Stops the trading bot

Real-time Subscriptions

The dashboard subscribes to real-time changes on:

• trades table
• positions table
• account_snapshots table
• bot_status table
• market_data table

Enable real-time in your Supabase project for these tables.

Customization

Theme Colors

Edit the color scheme in tailwind.config.ts:

colors: {
  profit: {
    DEFAULT: "hsl(142, 76%, 36%)", // Green for profits
    foreground: "hsl(142, 76%, 96%)",
  },
  loss: {
    DEFAULT: "hsl(0, 84%, 60%)", // Red for losses
    foreground: "hsl(0, 0%, 100%)",
  },
}

Chart Timeframes

Balance chart supports 24h, 7d, and 30d timeframes. Modify in components/BalanceChart.tsx.

Trade History Pagination

Default shows 20 trades with "Load More" button. Adjust in components/TradeHistory.tsx.

Project Structure

trading-dashboard/
├── app/
│   ├── globals.css         # Global styles and theme
│   ├── layout.tsx          # Root layout with providers
│   └── page.tsx            # Main dashboard page
├── components/
│   ├── ui/                 # Shadcn/ui base components
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   ├── table.tsx
│   │   └── badge.tsx
│   ├── BalanceChart.tsx    # Account balance chart
│   ├── BotControls.tsx     # Bot control panel
│   ├── MarketData.tsx      # Live market data cards
│   ├── PositionsTable.tsx  # Open positions table
│   └── TradeHistory.tsx    # Trade history table
├── lib/
│   ├── supabase.ts         # Supabase client and types
│   └── utils.ts            # Utility functions
├── package.json
├── next.config.js
├── tailwind.config.ts
├── tsconfig.json
└── .env.local.example

Features in Detail

Real-time Updates

All components automatically update when data changes in Supabase without requiring page refresh.

Error Handling

Comprehensive error handling with user-friendly error messages displayed inline.

Loading States

Skeleton loaders and spinners during data fetching for better UX.

Responsive Design

Fully responsive layout that works on mobile, tablet, and desktop devices.

Color Coding

• Green for profits and long positions
• Red for losses and short positions
• Visual indicators for trends and changes

Support

For issues or questions, please check the documentation or contact support.

License

MIT License - feel free to use this dashboard for your trading bot projects.