From 1ee57d5aeb548aefd505f53fa7d08d47cc8f4db7 Mon Sep 17 00:00:00 2001
From: Saravana Achu Mac <saravanakumardb1@gmail.com>
Date: Wed, 6 May 2026 14:08:02 -0700
Subject: [PATCH] refactor(ui): migrate strategy dashboard actions

---
 web/src/tabs/MyStrategiesTab.tsx | 87 +++++++++++++++++---------------
 1 file changed, 46 insertions(+), 41 deletions(-)

diff --git a/web/src/tabs/MyStrategiesTab.tsx b/web/src/tabs/MyStrategiesTab.tsx
index 12025ac..c5cb9f4 100644
--- a/web/src/tabs/MyStrategiesTab.tsx
+++ b/web/src/tabs/MyStrategiesTab.tsx
@@ -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>