# CoinEx Futures Dashboard — Rebuild in Next.js

**Priority:** HIGH
**Assigned:** Glitch (build) → Hawk (review)
**Created:** 2026-02-26
**Port:** 8891 (same as current)

## Overview
Rebuild the CoinEx Futures Scanner dashboard from plain HTML into the standard stack.

## Stack (MANDATORY)
- **Next.js 15** (App Router)
- **Tailwind CSS v4**
- **Framer Motion** (animations)
- **ShadCN UI** (component library)
- **Lucide Icons**
- **TypeScript** throughout
- **SSE or WebSockets** for real-time data (no third-party backend — we handle it ourselves)
- **NO Convex**

## Current Dashboard Features (must replicate)
The existing dashboard at `projects/crypto-signals/dashboard/index.html` (433 lines) has:

### Header
- Title: "⚡ CoinEx Futures Scanner"
- Live indicator, last scan timestamp, auto-refresh countdown (30s)

### Controls
- Sort: Long Score, Short Score, Name, 24h Change, RSI
- Filter: All Coins, Long Signals Only, Short Signals Only, Any Signal

### Summary Bar
- Coin count, Long signals count, Short signals count, Average RSI

### Thresholds Display
- LONG threshold: 45 pts, SHORT threshold: 50 pts
- TP: +5%, SL: -3%
- Leverage: 5x / 7x (score≥60)

### Coin Cards (grid layout, responsive)
Each card shows:
- Coin name + signal badges (LONG ✓ / SHORT ✓)
- Price + 24h change %
- 4 indicator boxes: RSI (14) with gauge, VWAP %, 24h Change, BB Position
- Each indicator shows Long/Short point contributions
- Score bars for LONG and SHORT with threshold markers
- Signal badge with direction + leverage

### Data Source
- Binance US API: `https://api.binance.us/api/v3/klines?symbol=${symbol}&interval=1h&limit=100`
- 29 coins: BTC, ETH, SOL, XRP, DOGE, ADA, AVAX, LINK, DOT, MATIC, NEAR, ATOM, LTC, UNI, AAVE, FIL, ALGO, XLM, VET, ICP, APT, SUI, ARB, OP, SEI, HYPE, TRUMP, PUMP, ASTER
- All client-side calculated: RSI(14), VWAP(24h), Bollinger Bands(20), scoring

### Scoring System
- **Long score** (max 80): RSI(<25=30, <30=25, <35=15, <40=5) + VWAP(<-3%=20, <-1.5%=15, <0=8) + 24hChange(<-10%=15, <-5%=10, <-2%=5) + BB(<0=15, <0.2=10)
- **Short score** (max 80): RSI(>75=30, >70=25, >65=15, >60=5) + VWAP(>3%=20, >1.5%=15, >0=8) + 24hChange(>10%=15, >5%=10, >2%=5) + BB(>1=15, >0.8=10)

## Enhancements for v2
1. **Dark theme** (keep the current dark aesthetic — bg #0a0e17 / #111827)
2. **Animated transitions** with Framer Motion when data updates
3. **Mobile responsive** — card grid should work on phone
4. **SSE endpoint** for real-time price updates instead of polling from client
5. **Live positions panel** — read from `projects/crypto-signals/data/coinex-live/trader_state.json` to show current open positions with P&L
6. **Trade history** — read from `projects/crypto-signals/data/coinex-live/trade_log.json`

## Project Location
`projects/coinex-dashboard/` (new directory, clean Next.js project)

## Systemd
Create `~/.config/systemd/user/coinex-dashboard.service` on port 8891.
Kill the old Python server first (pid of old `server.py`).

## Context7
Use Context7 for Next.js 15, Tailwind v4, ShadCN UI, and Framer Motion docs before writing any code.

## Tests
- Unit tests for scoring functions
- E2E smoke test that the page loads and renders coin cards