bytelyst/learning_ai_invt_trdg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): migrate strategy dashboard actions

Browse Source
This commit is contained in:
Saravana Achu Mac 2026-05-06 14:08:02 -07:00
parent ec705a3d7b
commit 1ee57d5aeb
1 changed files with 46 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/src/tabs/MyStrategiesTab.tsx
View File

@ -27,6 +27,7 @@ import { StrategyWizard } from '../components/StrategyWizard';
import { BacktestRunnerPanel } from '../backtest/components/BacktestRunnerPanel'; import { BacktestRunnerPanel } from '../backtest/components/BacktestRunnerPanel';
import { useBacktestFeatureGate } from '../backtest/useBacktestFeatureGate'; import { useBacktestFeatureGate } from '../backtest/useBacktestFeatureGate';
import { deleteTradeProfile, fetchTradeProfiles, setTradeProfileActive } from '../lib/profileApi'; import { deleteTradeProfile, fetchTradeProfiles, setTradeProfileActive } from '../lib/profileApi';
import { Button, IconButton } from '../components/ui/Primitives';
function getStrategyKindLabel(config: any) { function getStrategyKindLabel(config: any) {
if (config?.type === 'visual') return 'Visual Builder'; if (config?.type === 'visual') return 'Visual Builder';
@ -103,16 +104,10 @@ const ActiveStrategyCard: React.FC<{
</div> </div>
<div style={{ display: 'flex', gap: '8px' }}> <div style={{ display: 'flex', gap: '8px' }}>
{onBacktest && ( {onBacktest && (
<button onClick={() => onBacktest(profile)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#555', cursor: 'pointer' }} className="icon-btn-hover"> <IconButton type="button" label={`Backtest ${profile.name}`} icon={<Activity size={18} />} onClick={() => onBacktest(profile)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#555', cursor: 'pointer' }} className="icon-btn-hover" />
<Activity size={18} />
</button>
)} )}
<button onClick={() => onEdit(profile)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#555', cursor: 'pointer' }} className="icon-btn-hover"> <IconButton type="button" label={`Edit ${profile.name}`} icon={<Settings size={18} />} onClick={() => onEdit(profile)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#555', cursor: 'pointer' }} className="icon-btn-hover" />
<Settings size={18} /> <IconButton type="button" label={`Delete ${profile.name}`} icon={<Trash2 size={18} />} onClick={() => onDelete(profile.id)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#555', cursor: 'pointer' }} className="icon-btn-hover" />
</button>
<button onClick={() => onDelete(profile.id)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#555', cursor: 'pointer' }} className="icon-btn-hover">
<Trash2 size={18} />
</button>
</div> </div>
</div> </div>
@ -156,8 +151,10 @@ const ActiveStrategyCard: React.FC<{
{/* 5. Health Diagnostic (Education Layer) */} {/* 5. Health Diagnostic (Education Layer) */}
<div style={{ marginBottom: '32px' }}> <div style={{ marginBottom: '32px' }}>
<button <Button
type="button"
onClick={() => onToggleExpand(profile.id)} onClick={() => onToggleExpand(profile.id)}
variant="ghost"
style={{ style={{
width: '100%', width: '100%',
padding: '16px', padding: '16px',
@ -194,13 +191,15 @@ const ActiveStrategyCard: React.FC<{
<p style={{ fontSize: '11px', color: '#fbbf24', margin: 0, fontStyle: 'italic', fontWeight: 600 }}>{explanation.recommendation}</p> <p style={{ fontSize: '11px', color: '#fbbf24', margin: 0, fontStyle: 'italic', fontWeight: 600 }}>{explanation.recommendation}</p>
</div> </div>
)} )}
</button> </Button>
</div> </div>
{/* 6. Action */} {/* 6. Action */}
<div style={{ marginTop: 'auto' }}> <div style={{ marginTop: 'auto' }}>
<button <Button
type="button"
onClick={() => onToggle(profile)} onClick={() => onToggle(profile)}
variant={profile.is_active ? 'outline' : 'primary'}
style={{ style={{
width: '100%', width: '100%',
height: '56px', height: '56px',
@ -227,7 +226,7 @@ const ActiveStrategyCard: React.FC<{
) : ( ) : (
<><Play size={18} fill="currentColor" /> START TRADING</> <><Play size={18} fill="currentColor" /> START TRADING</>
)} )}
</button> </Button>
</div> </div>
<style>{` <style>{`
@ -303,15 +302,17 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
return ( return (
<div style={{ animation: 'fadeIn 0.5s ease-out' }}> <div style={{ animation: 'fadeIn 0.5s ease-out' }}>
<div style={{ marginBottom: '24px' }}> <div style={{ marginBottom: '24px' }}>
<button <Button
type="button"
onClick={() => { onClick={() => {
setShowWizard(false); setShowWizard(false);
setEditingProfile(null); setEditingProfile(null);
}} }}
variant="ghost"
style={{ background: 'none', border: 'none', color: '#666', fontWeight: 900, fontSize: '12px', textTransform: 'uppercase', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }} style={{ background: 'none', border: 'none', color: '#666', fontWeight: 900, fontSize: '12px', textTransform: 'uppercase', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}
> >
← Back to My Strategies ← Back to My Strategies
</button> </Button>
</div> </div>
<StrategyWizard <StrategyWizard
editingProfile={editingProfile} editingProfile={editingProfile}
@ -403,8 +404,10 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
}}> }}>
{botState?.connected ? 'SYSTEMS ONLINE' : 'SYSTEMS DISCONNECTED'} {botState?.connected ? 'SYSTEMS ONLINE' : 'SYSTEMS DISCONNECTED'}
</div> </div>
<button <Button
type="button"
onClick={() => setShowWizard(true)} onClick={() => setShowWizard(true)}
variant="secondary"
style={{ style={{
background: 'white', background: 'white',
border: 'none', border: 'none',
@ -423,7 +426,7 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
}} }}
> >
<Plus size={18} strokeWidth={3} /> NEW STRATEGY <Plus size={18} strokeWidth={3} /> NEW STRATEGY
</button> </Button>
</div> </div>
</div> </div>
</div> </div>
@ -541,12 +544,14 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
<Activity size={60} color="#222" style={{ marginBottom: '24px' }} /> <Activity size={60} color="#222" style={{ marginBottom: '24px' }} />
<h3 style={{ color: '#444', fontWeight: 900, textTransform: 'uppercase', letterSpacing: '4px' }}>No Engines Deployed</h3> <h3 style={{ color: '#444', fontWeight: 900, textTransform: 'uppercase', letterSpacing: '4px' }}>No Engines Deployed</h3>
<p style={{ color: '#222', fontSize: '14px', marginTop: '12px', maxWidth: '300px' }}>Your fleet is currently dormant. Deploy your first engine to begin automated dominance.</p> <p style={{ color: '#222', fontSize: '14px', marginTop: '12px', maxWidth: '300px' }}>Your fleet is currently dormant. Deploy your first engine to begin automated dominance.</p>
<button <Button
type="button"
onClick={() => setShowWizard(true)} onClick={() => setShowWizard(true)}
variant="secondary"
style={{ marginTop: '32px', background: 'white', border: 'none', color: 'black', padding: '16px 40px', borderRadius: '16px', fontWeight: 900, cursor: 'pointer' }} style={{ marginTop: '32px', background: 'white', border: 'none', color: 'black', padding: '16px 40px', borderRadius: '16px', fontWeight: 900, cursor: 'pointer' }}
> >
GET STARTED GET STARTED
</button> </Button>
</div> </div>
)} )}
</div> </div>