Since I can’t see the exact /dashboard/scalp-trading UI because it’s behind login, I’ll recreate the same vibe:

Clean table/grid of pairs

Columns like: Pair • TF • Bias • Entry • SL • TP1/TP2 • Confidence • Updated • Button

Timeframe tabs (1m / 5m / 15m / 1h)

Filters for Forex / Crypto

One-click “Analyze” / “Refresh” for each pair

Below is copy-pasteable code you can drop into your project to get that Tradvio-style scalp dashboard.

1️⃣ Backend: Add a “Scalp Trading” Endpoint

In backend/main.py, add this to your router (or similar):

from fastapi import APIRouter, HTTPException
from pydantic import BaseModel
from typing import List, Literal
import asyncio

from backend.signal_engine import generate_signal_from_market

router = APIRouter()

class ScalpSignalRequest(BaseModel):
timeframe: str = "5m"
asset_type: Literal["crypto", "forex", "mixed"] = "forex"
symbols: List[str] | None = None # optional custom list

class ScalpSignal(BaseModel):
symbol: str
asset_type: str
timeframe: str
direction: str
entry_zone: List[float]
stop_loss: float
take_profit_levels: List[float]
confidence: int
time_horizon: str
explanation: str
updated_at: str

class ScalpSignalResponse(BaseModel):
signals: List[ScalpSignal]

DEFAULT_CRYPTO = ["BTCUSDT", "ETHUSDT", "SOLUSDT"]
DEFAULT_FOREX = ["EURUSD", "GBPUSD", "XAUUSD", "USDJPY", "NAS100"]

@router.post("/scalp/signals", response_model=ScalpSignalResponse)
async def get_scalp_signals(req: ScalpSignalRequest):
if req.symbols:
symbols = req.symbols
else:
if req.asset_type == "crypto":
symbols = DEFAULT_CRYPTO
elif req.asset_type == "forex":
symbols = DEFAULT_FOREX
else:
symbols = DEFAULT_CRYPTO + DEFAULT_FOREX

tasks = []
for symbol in symbols:
tasks.append(
generate_signal_from_market(
symbol=symbol,
timeframe=req.timeframe,
asset_type="crypto" if symbol.endswith("USDT") else "forex",
)
)

try:
results = await asyncio.gather(*tasks)
except Exception as e:
raise HTTPException(status_code=500, detail=str(e))

scalp_signals: List[ScalpSignal] = []
from datetime import datetime, timezone

now_iso = datetime.now(timezone.utc).isoformat()

for symbol, sig in zip(symbols, results):
scalp_signals.append(
ScalpSignal(
symbol=symbol,
asset_type="crypto" if symbol.endswith("USDT") else "forex",
timeframe=req.timeframe,
direction=sig["direction"],
entry_zone=sig["entry_zone"],
stop_loss=sig["stop_loss"],
take_profit_levels=sig["take_profit_levels"],
confidence=sig["confidence"],
time_horizon=sig["time_horizon"],
explanation=sig["explanation"],
updated_at=now_iso,
)
)

return ScalpSignalResponse(signals=scalp_signals)


This gives you a single API like Tradvio’s scalp page:

POST /api/scalp/signals
{
"timeframe": "5m",
"asset_type": "forex"
}


→ returns a list of live signals for multiple pairs in one shot.

2️⃣ Frontend: Tradvio-Style “Scalp Trading” Page
2.1 Add a New Page: frontend/src/pages/ScalpDashboard.tsx
import { useEffect, useState } from "react";
import { getScalpSignals } from "../lib/api";

type AssetType = "crypto" | "forex" | "mixed";

interface ScalpSignal {
symbol: string;
asset_type: string;
timeframe: string;
direction: "long" | "short" | "neutral" | string;
entry_zone: number[];
stop_loss: number;
take_profit_levels: number[];
confidence: number;
time_horizon: string;
explanation: string;
updated_at: string;
}

const TIMEFRAMES = ["1m", "5m", "15m", "1h"];

export default function ScalpDashboard() {
const [timeframe, setTimeframe] = useState<string>("5m");
const [assetType, setAssetType] = useState<AssetType>("forex");
const [signals, setSignals] = useState<ScalpSignal[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [search, setSearch] = useState("");

const loadSignals = async () => {
try {
setLoading(true);
setError(null);
const data = await getScalpSignals({ timeframe, asset_type: assetType });
setSignals(data.signals || []);
} catch (e: any) {
console.error(e);
setError("Failed to load signals");
} finally {
setLoading(false);
}
};

useEffect(() => {
loadSignals();
}, [timeframe, assetType]);

const filteredSignals = signals.filter((s) =>
s.symbol.toLowerCase().includes(search.toLowerCase())
);

const directionBadge = (dir: string) => {
let base =
"px-2 py-1 text-xs rounded-full font-semibold uppercase tracking-wide ";
if (dir.toLowerCase() === "long") {
return base + "bg-emerald-500/20 text-emerald-300 border border-emerald-500/40";
}
if (dir.toLowerCase() === "short") {
return base + "bg-rose-500/20 text-rose-300 border border-rose-500/40";
}
return base + "bg-slate-500/20 text-slate-200 border border-slate-500/40";
};

const confidenceBarWidth = (conf: number) =>
`${Math.min(Math.max(conf, 0), 100)}%`;

return (
<div className="flex flex-col gap-4 h-full">
{/* Header */}
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
<div>
<h1 className="text-xl md:text-2xl font-semibold text-slate-50">
Scalp Trading Dashboard
</h1>
<p className="text-slate-400 text-sm">
Live multi-pair signals for crypto & forex · powered by your AI
</p>
</div>

<div className="flex flex-wrap gap-2 items-center">
{/* Timeframe tabs */}
<div className="flex bg-slate-800/80 rounded-xl p-1">
{TIMEFRAMES.map((tf) => (
<button
key={tf}
onClick={() => setTimeframe(tf)}
className={`px-3 py-1 text-xs md:text-sm rounded-lg transition ${
timeframe === tf
? "bg-slate-100 text-slate-900 font-semibold"
: "text-slate-300 hover:bg-slate-700/80"
}`}
>
{tf}
</button>
))}
</div>

{/* Asset type */}
<select
className="bg-slate-800 text-slate-100 text-sm rounded-lg px-3 py-1.5 border border-slate-700"
value={assetType}
onChange={(e) => setAssetType(e.target.value as AssetType)}
>
<option value="forex">Forex</option>
<option value="crypto">Crypto</option>
<option value="mixed">Mixed</option>
</select>

{/* Search */}
<input
type="text"
placeholder="Search pair (e.g. EURUSD, BTCUSDT)"
className="bg-slate-800 text-slate-100 text-sm rounded-lg px-3 py-1.5 border border-slate-700 placeholder:text-slate-500"
value={search}
onChange={(e) => setSearch(e.target.value)}
/>

<button
onClick={loadSignals}
className="px-4 py-1.5 rounded-lg text-sm bg-indigo-500 hover:bg-indigo-400 text-white font-semibold shadow-md shadow-indigo-500/30"
>
Refresh
</button>
</div>
</div>

{/* Table */}
<div className="flex-1 overflow-auto rounded-2xl bg-slate-900/80 border border-slate-800">
{loading && (
<div className="p-6 text-center text-slate-300 text-sm">
Loading signals…
</div>
)}
{error && !loading && (
<div className="p-4 text-center text-rose-400 text-sm">{error}</div>
)}
{!loading && !error && filteredSignals.length === 0 && (
<div className="p-6 text-center text-slate-400 text-sm">
No signals found for this filter.
</div>
)}

{!loading && !error && filteredSignals.length > 0 && (
<table className="w-full text-sm">
<thead className="bg-slate-900/90 sticky top-0 z-10">
<tr className="text-slate-400 text-xs uppercase tracking-wide">
<th className="px-4 py-3 text-left">Pair</th>
<th className="px-4 py-3 text-left">Type</th>
<th className="px-4 py-3 text-left">TF</th>
<th className="px-4 py-3 text-left">Bias</th>
<th className="px-4 py-3 text-left">Entry Zone</th>
<th className="px-4 py-3 text-left">SL</th>
<th className="px-4 py-3 text-left">TP1 / TP2 / TP3</th>
<th className="px-4 py-3 text-left">Confidence</th>
<th className="px-4 py-3 text-left">Updated</th>
<th className="px-4 py-3 text-right">Action</th>
</tr>
</thead>
<tbody>
{filteredSignals.map((s) => (
<tr
key={`${s.symbol}-${s.timeframe}`}
className="border-t border-slate-800 hover:bg-slate-800/60"
>
<td className="px-4 py-3 text-slate-100 font-medium">
{s.symbol}
</td>
<td className="px-4 py-3 text-slate-300 text-xs">
{s.asset_type.toUpperCase()}
</td>
<td className="px-4 py-3 text-slate-300 text-xs">
{s.timeframe}
</td>
<td className="px-4 py-3">
<span className={directionBadge(s.direction)}>
{s.direction.toUpperCase()}
</span>
</td>
<td className="px-4 py-3 text-slate-200 text-xs">
{s.entry_zone && s.entry_zone.length === 2
? `${s.entry_zone[0].toFixed(5)} – ${s.entry_zone[1].toFixed(5)}`
: "-"}

backend/main.py

@@ -1,5 +1,5 @@
 ```python
-from fastapi import FastAPI, UploadFile, File, HTTPException, Depends
+from fastapi import FastAPI, UploadFile, File, HTTPException, Depends, APIRouter
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.security import APIKeyHeader
 from typing import Optional
@@ -10,9 +10,50 @@ from .timeseries_analysis import fetch_ohlcv, compute_technicals
 from .sentiment_analysis import get_crypto_sentiment
 from .models_registry import model_registry
 from pydantic import BaseModel
-
 app = FastAPI(title="CryptoSignal Sleuth Pro API")
 
+# Create a router for scalp signals
+scalp_router = APIRouter()
+
+DEFAULT_CRYPTO = ["BTCUSDT", "ETHUSDT", "SOLUSDT"]
+DEFAULT_FOREX = ["EURUSD", "GBPUSD", "XAUUSD", "USDJPY", "NAS100"]
+
+@scalp_router.post("/scalp/signals")
+async def get_scalp_signals(
+    timeframe: str = "5m",
+    asset_type: str = "forex"
+):
+    if asset_type == "crypto":
+        symbols = DEFAULT_CRYPTO
+    elif asset_type == "forex":
+        symbols = DEFAULT_FOREX
+    else:  # mixed
+        symbols = DEFAULT_CRYPTO + DEFAULT_FOREX
+
+    from datetime import datetime, timezone
+    from .signal_engine import generate_signal_from_market
+    
+    try:
+        signals = []
+        for symbol in symbols:
+            signal = await generate_signal_from_market(
+                symbol=symbol,
+                timeframe=timeframe,
+                asset_type="crypto" if symbol.endswith("USDT") else "forex"
+            )
+            signals.append({
+                **signal,
+                "symbol": symbol,
+                "asset_type": "crypto" if symbol.endswith("USDT") else "forex",
+                "timeframe": timeframe,
+                "updated_at": datetime.now(timezone.utc).isoformat()
+            })
+        
+        return {"signals": signals}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+app.include_router(scalp_router)
 # CORS settings
 app.add_middleware(
     CORSMiddleware,

scalp.html

@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Scalp Trading Dashboard | CryptoSignal Sleuth Pro</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-900 text-gray-100">
+    <custom-navbar></custom-navbar>
+    
+    <div class="container mx-auto px-4 py-6">
+        <!-- Header -->
+        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
+            <div>
+                <h1 class="text-2xl font-bold">Scalp Trading Dashboard</h1>
+                <p class="text-gray-400">Live multi-pair signals for crypto & forex</p>
+            </div>
+            
+            <div class="flex flex-wrap gap-2 items-center">
+                <!-- Timeframe tabs -->
+                <div class="flex bg-gray-800 rounded-lg p-1">
+                    <button class="timeframe-tab active" data-timeframe="1m">1m</button>
+                    <button class="timeframe-tab" data-timeframe="5m">5m</button>
+                    <button class="timeframe-tab" data-timeframe="15m">15m</button>
+                    <button class="timeframe-tab" data-timeframe="1h">1h</button>
+                </div>
+                
+                <!-- Asset type -->
+                <select id="asset-type" class="bg-gray-800 text-sm rounded-lg px-3 py-1.5 border border-gray-700">
+                    <option value="forex">Forex</option>
+                    <option value="crypto">Crypto</option>
+                    <option value="mixed">Mixed</option>
+                </select>
+                
+                <!-- Search -->
+                <input type="text" id="pair-search" placeholder="Search pair" 
+                       class="bg-gray-800 text-sm rounded-lg px-3 py-1.5 border border-gray-700 w-40">
+                
+                <button id="refresh-btn" class="px-4 py-1.5 rounded-lg text-sm bg-indigo-600 hover:bg-indigo-500">
+                    <i data-feather="refresh-cw" class="w-4 h-4"></i> Refresh
+                </button>
+            </div>
+        </div>
+        
+        <!-- Signals Table -->
+        <div class="rounded-xl overflow-hidden border border-gray-800">
+            <table class="w-full text-sm">
+                <thead class="bg-gray-800">
+                    <tr class="text-gray-400 text-xs uppercase">
+                        <th class="px-4 py-3 text-left">Pair</th>
+                        <th class="px-4 py-3 text-left">Type</th>
+                        <th class="px-4 py-3 text-left">TF</th>
+                        <th class="px-4 py-3 text-left">Bias</th>
+                        <th class="px-4 py-3 text-left">Entry Zone</th>
+                        <th class="px-4 py-3 text-left">SL</th>
+                        <th class="px-4 py-3 text-left">TP1 / TP2</th>
+                        <th class="px-4 py-3 text-left">Confidence</th>
+                        <th class="px-4 py-3 text-left">Updated</th>
+                        <th class="px-4 py-3 text-right">Action</th>
+                    </tr>
+                </thead>
+                <tbody id="signals-body" class="divide-y divide-gray-800">
+                    <!-- Signals will be loaded here -->
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <script src="components/navbar.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        
+        // Timeframe tabs
+        document.querySelectorAll('.timeframe-tab').forEach(tab => {
+            tab.addEventListener('click', () => {
+                document.querySelectorAll('.timeframe-tab').forEach(t => t.classList.remove('active'));
+                tab.classList.add('active');
+                loadSignals();
+            });
+        });
+        
+        // Asset type and search
+        document.getElementById('asset-type').addEventListener('change', loadSignals);
+        document.getElementById('pair-search').addEventListener('input', filterSignals);
+        document.getElementById('refresh-btn').addEventListener('click', loadSignals);
+        
+        async function loadSignals() {
+            const timeframe = document.querySelector('.timeframe-tab.active').dataset.timeframe;
+            const assetType = document.getElementById('asset-type').value;
+            
+            try {
+                const response = await fetch('/api/scalp/signals', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ timeframe, asset_type: assetType })
+                });
+                
+                const data = await response.json();
+                renderSignals(data.signals);
+            } catch (error) {
+                console.error('Error loading signals:', error);
+            }
+        }
+        
+        function renderSignals(signals) {
+            const tbody = document.getElementById('signals-body');
+            tbody.innerHTML = '';
+            
+            signals.forEach(signal => {
+                const row = document.createElement('tr');
+                row.className = 'hover:bg-gray-800/50';
+                
+                const directionClass = signal.direction === 'long' ? 
+                    'bg-emerald-500/20 text-emerald-300 border-emerald-500/40' :
+                    signal.direction === 'short' ?
+                    'bg-rose-500/20 text-rose-300 border-rose-500/40' :
+                    'bg-gray-500/20 text-gray-300 border-gray-500/40';
+                
+                row.innerHTML = `
+                    <td class="px-4 py-3 font-medium">${signal.symbol}</td>
+                    <td class="px-4 py-3 text-xs">${signal.asset_type.toUpperCase()}</td>
+                    <td class="px-4 py-3 text-xs">${signal.timeframe}</td>
+                    <td class="px-4 py-3">
+                        <span class="px-2 py-1 text-xs rounded-full font-semibold uppercase border ${directionClass}">
+                            ${signal.direction.toUpperCase()}
+                        </span>
+                    </td>
+                    <td class="px-4 py-3 text-xs">
+                        ${signal.entry_zone[0].toFixed(5)} - ${signal.entry_zone[1].toFixed(5)}
+                    </td>
+                    <td class="px-4 py-3 text-xs">${signal.stop_loss.toFixed(5)}</td>
+                    <td class="px-4 py-3 text-xs">
+                        ${signal.take_profit_levels[0].toFixed(5)} / ${signal.take_profit_levels[1].toFixed(5)}
+                    </td>
+                    <td class="px-4 py-3">
+                        <div class="flex items-center gap-2">
+                            <div class="h-1.5 w-16 bg-gray-700 rounded-full overflow-hidden">
+                                <div class="h-full bg-emerald-500" style="width: ${signal.confidence}%"></div>
+                            </div>
+                            <span class="text-xs">${signal.confidence}%</span>
+                        </div>
+                    </td>
+                    <td class="px-4 py-3 text-xs text-gray-400">
+                        ${new Date(signal.updated_at).toLocaleTimeString()}
+                    </td>
+                    <td class="px-4 py-3 text-right">
+                        <button class="text-xs px-3 py-1 rounded-lg bg-gray-700 hover:bg-gray-600">
+                            View Plan
+                        </button>
+                    </td>
+                `;
+                
+                tbody.appendChild(row);
+            });
+        }
+        
+        function filterSignals() {
+            const search = document.getElementById('pair-search').value.toLowerCase();
+            const rows = document.querySelectorAll('#signals-body tr');
+            
+            rows.forEach(row => {
+                const pair = row.querySelector('td:first-child').textContent.toLowerCase();
+                row.style.display = pair.includes(search) ? '' : 'none';
+            });
+        }
+        
+        // Load initial signals
+        loadSignals();
+    </script>
+</body>
+</html>

style.css

@@ -45,6 +45,31 @@ p {
 .signal-card.buy {
   animation: pulse 2s infinite;
 }
+
+/* Scalp Trading Dashboard */
+.timeframe-tab {
+  padding: 0.35rem 0.75rem;
+  font-size: 0.75rem;
+  color: #9ca3af;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.timeframe-tab.active {
+  background: #374151;
+  color: white;
+  border-radius: 0.375rem;
+}
+
+#signals-body tr:hover {
+  background: rgba(55, 65, 81, 0.5);
+}
+
+#signals-body td {
+  padding: 0.75rem 1rem;
+  color: #e5e7eb;
+  font-size: 0.875rem;
+}
 .card p:last-child {
 	margin-bottom: 0;
 }