diff --git a/btc-portfolio/frontend/src/pages/Dashboard.js b/btc-portfolio/frontend/src/pages/Dashboard.js index 6f25e44..adb9f70 100644 --- a/btc-portfolio/frontend/src/pages/Dashboard.js +++ b/btc-portfolio/frontend/src/pages/Dashboard.js @@ -19,6 +19,9 @@ const styles = { positive: { color: '#6bff8e' }, negative: { color: '#ff6b6b' }, neutral: { color: '#f7931a' }, + tabs: { display: 'flex', gap: '0.5rem', marginBottom: '1rem' }, + tab: { padding: '0.45rem 1.1rem', borderRadius: '8px', border: '1px solid #444', background: 'none', color: '#888', cursor: 'pointer', fontSize: '0.9rem' }, + tabActive: { padding: '0.45rem 1.1rem', borderRadius: '8px', border: '1px solid #f7931a', background: 'rgba(247,147,26,0.1)', color: '#f7931a', cursor: 'pointer', fontSize: '0.9rem', fontWeight: 700 }, }; function StatCard({ label, value, highlight }) { @@ -34,6 +37,7 @@ export default function Dashboard() { const [stats, setStats] = useState(null); const [purchases, setPurchases] = useState([]); const [history, setHistory] = useState(null); + const [chartView, setChartView] = useState('both'); // 'both' | 'portfolio' | 'history' const navigate = useNavigate(); const authHeaders = () => ({ @@ -95,8 +99,17 @@ export default function Dashboard() { )} - - +
+ {[['both', 'Both'], ['portfolio', 'Portfolio'], ['history', '1-Year BTC']].map(([key, label]) => ( + + ))} +
+ {(chartView === 'both' || chartView === 'portfolio') && } + {(chartView === 'both' || chartView === 'history') && }