refactor(ui): migrate strategy dashboard actions
This commit is contained in:
parent
ec705a3d7b
commit
1ee57d5aeb
@ -27,6 +27,7 @@ import { StrategyWizard } from '../components/StrategyWizard';
|
||||
import { BacktestRunnerPanel } from '../backtest/components/BacktestRunnerPanel';
|
||||
import { useBacktestFeatureGate } from '../backtest/useBacktestFeatureGate';
|
||||
import { deleteTradeProfile, fetchTradeProfiles, setTradeProfileActive } from '../lib/profileApi';
|
||||
import { Button, IconButton } from '../components/ui/Primitives';
|
||||
|
||||
function getStrategyKindLabel(config: any) {
|
||||
if (config?.type === 'visual') return 'Visual Builder';
|
||||
@ -103,17 +104,11 @@ const ActiveStrategyCard: React.FC<{
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
{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">
|
||||
<Activity size={18} />
|
||||
</button>
|
||||
<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" />
|
||||
)}
|
||||
<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">
|
||||
<Settings size={18} />
|
||||
</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>
|
||||
<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" />
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3. Identity */}
|
||||
@ -156,9 +151,11 @@ const ActiveStrategyCard: React.FC<{
|
||||
|
||||
{/* 5. Health Diagnostic (Education Layer) */}
|
||||
<div style={{ marginBottom: '32px' }}>
|
||||
<button
|
||||
onClick={() => onToggleExpand(profile.id)}
|
||||
style={{
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => onToggleExpand(profile.id)}
|
||||
variant="ghost"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '16px',
|
||||
borderRadius: '20px',
|
||||
@ -170,7 +167,7 @@ const ActiveStrategyCard: React.FC<{
|
||||
cursor: 'pointer',
|
||||
textAlign: 'left'
|
||||
}}
|
||||
>
|
||||
>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#00ff88', fontSize: '10px', fontWeight: 900, textTransform: 'uppercase' }}>
|
||||
<Fingerprint size={14} /> Diagnostic Intelligence {tier === 'free' && <Lock size={12} style={{ marginLeft: '4px', opacity: 0.5 }} />}
|
||||
@ -194,14 +191,16 @@ const ActiveStrategyCard: React.FC<{
|
||||
<p style={{ fontSize: '11px', color: '#fbbf24', margin: 0, fontStyle: 'italic', fontWeight: 600 }}>{explanation.recommendation}</p>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 6. Action */}
|
||||
<div style={{ marginTop: 'auto' }}>
|
||||
<button
|
||||
onClick={() => onToggle(profile)}
|
||||
style={{
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => onToggle(profile)}
|
||||
variant={profile.is_active ? 'outline' : 'primary'}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '56px',
|
||||
background: profile.is_active ? 'rgba(255,255,255,0.03)' : '#00ff88',
|
||||
@ -221,13 +220,13 @@ const ActiveStrategyCard: React.FC<{
|
||||
letterSpacing: '1.5px'
|
||||
}}
|
||||
className="action-btn-hover"
|
||||
>
|
||||
>
|
||||
{profile.is_active ? (
|
||||
<><Pause size={18} fill="currentColor" /> PAUSE TRADING</>
|
||||
) : (
|
||||
<><Play size={18} fill="currentColor" /> START TRADING</>
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
@ -303,15 +302,17 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
|
||||
return (
|
||||
<div style={{ animation: 'fadeIn 0.5s ease-out' }}>
|
||||
<div style={{ marginBottom: '24px' }}>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowWizard(false);
|
||||
setEditingProfile(null);
|
||||
}}
|
||||
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
|
||||
</button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowWizard(false);
|
||||
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' }}
|
||||
>
|
||||
← Back to My Strategies
|
||||
</Button>
|
||||
</div>
|
||||
<StrategyWizard
|
||||
editingProfile={editingProfile}
|
||||
@ -403,9 +404,11 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
|
||||
}}>
|
||||
{botState?.connected ? 'SYSTEMS ONLINE' : 'SYSTEMS DISCONNECTED'}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowWizard(true)}
|
||||
style={{
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setShowWizard(true)}
|
||||
variant="secondary"
|
||||
style={{
|
||||
background: 'white',
|
||||
border: 'none',
|
||||
color: 'black',
|
||||
@ -421,9 +424,9 @@ export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewA
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
}}
|
||||
>
|
||||
<Plus size={18} strokeWidth={3} /> NEW STRATEGY
|
||||
</button>
|
||||
>
|
||||
<Plus size={18} strokeWidth={3} /> NEW STRATEGY
|
||||
</Button>
|
||||
</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' }} />
|
||||
<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>
|
||||
<button
|
||||
onClick={() => setShowWizard(true)}
|
||||
style={{ marginTop: '32px', background: 'white', border: 'none', color: 'black', padding: '16px 40px', borderRadius: '16px', fontWeight: 900, cursor: 'pointer' }}
|
||||
>
|
||||
GET STARTED
|
||||
</button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setShowWizard(true)}
|
||||
variant="secondary"
|
||||
style={{ marginTop: '32px', background: 'white', border: 'none', color: 'black', padding: '16px 40px', borderRadius: '16px', fontWeight: 900, cursor: 'pointer' }}
|
||||
>
|
||||
GET STARTED
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user