280 lines
8.3 KiB
TypeScript
280 lines
8.3 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { View, Text, ScrollView, StyleSheet } from 'react-native';
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
import { Colors, Fonts, FontSize, BorderRadius, Shadows, Spacing } from '@/constants/theme';
|
|
import { trades, historyMetrics } from '@/constants/mockData';
|
|
import { formatPrice, formatPercent, formatCurrency } from '@/utils/format';
|
|
import SegmentedControl from '@/components/SegmentedControl';
|
|
import AnimatedCard from '@/components/AnimatedCard';
|
|
import PillBadge from '@/components/PillBadge';
|
|
|
|
const PROFILES = ['All', 'Aggressive Bot', 'Balanced Core', 'Conservative Swing'];
|
|
const FILTERS = ['All', 'Today', 'This Week', 'This Month'];
|
|
|
|
export default function HistoryScreen() {
|
|
const insets = useSafeAreaInsets();
|
|
const [profileIndex, setProfileIndex] = useState(0);
|
|
const [filterIndex, setFilterIndex] = useState(0);
|
|
|
|
const filteredTrades = profileIndex === 0
|
|
? trades
|
|
: trades.filter(t => t.profileName === PROFILES[profileIndex]);
|
|
|
|
return (
|
|
<View style={[styles.container, { paddingTop: insets.top }]}>
|
|
<View style={styles.headerSection}>
|
|
<Text style={styles.subtitle}>COMPLETE TRADE LEDGER</Text>
|
|
<Text style={styles.pageTitle}>Audit Logs</Text>
|
|
</View>
|
|
|
|
<ScrollView
|
|
style={styles.scroll}
|
|
contentContainerStyle={styles.content}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<SegmentedControl
|
|
segments={PROFILES}
|
|
activeIndex={profileIndex}
|
|
onPress={setProfileIndex}
|
|
/>
|
|
|
|
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.metricsRow}>
|
|
<MetricCard label="TOTAL TRADES" value={historyMetrics.totalTrades.toString()} />
|
|
<MetricCard label="WIN RATE" value={`${historyMetrics.winRate}%`} color={Colors.accent.green} />
|
|
<MetricCard label="NET P&L" value={`+$${historyMetrics.netPnl.toFixed(2)}`} color={Colors.accent.green} mono />
|
|
</ScrollView>
|
|
|
|
<View style={styles.filterRow}>
|
|
{FILTERS.map((f, i) => (
|
|
<PressableFilter
|
|
key={f}
|
|
label={f}
|
|
active={filterIndex === i}
|
|
onPress={() => setFilterIndex(i)}
|
|
/>
|
|
))}
|
|
</View>
|
|
|
|
{filteredTrades.map((trade, index) => (
|
|
<TradeRow key={trade.id} trade={trade} index={index} />
|
|
))}
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function MetricCard({ label, value, color, mono }: { label: string; value: string; color?: string; mono?: boolean }) {
|
|
return (
|
|
<View style={styles.metricCard}>
|
|
<Text style={styles.metricLabel}>{label}</Text>
|
|
<Text style={[styles.metricValue, color ? { color } : null, mono ? { fontFamily: Fonts.mono.extraBold } : null]}>
|
|
{value}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function PressableFilter({ label, active, onPress }: { label: string; active: boolean; onPress: () => void }) {
|
|
return (
|
|
<View style={[styles.filterPill, active && styles.filterActive]}>
|
|
<Text
|
|
style={[styles.filterText, active && styles.filterTextActive]}
|
|
onPress={onPress}
|
|
>
|
|
{label}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function TradeRow({ trade, index }: { trade: typeof trades[0]; index: number }) {
|
|
const isLoss = trade.pnl < 0;
|
|
const pnlColor = isLoss ? Colors.accent.red : Colors.accent.green;
|
|
|
|
const reasonColors: Record<string, { bg: string; color: string }> = {
|
|
'Take Profit': { bg: 'rgba(0,255,136,0.1)', color: Colors.accent.green },
|
|
'Stop Loss': { bg: 'rgba(255,51,102,0.1)', color: Colors.accent.red },
|
|
'Signal Exit': { bg: 'rgba(52,152,219,0.1)', color: Colors.accent.blue },
|
|
'Manual': { bg: 'rgba(255,255,255,0.05)', color: Colors.text.secondary },
|
|
};
|
|
const rc = reasonColors[trade.reason] || reasonColors['Manual'];
|
|
|
|
return (
|
|
<AnimatedCard index={index} style={[styles.tradeCard, isLoss ? styles.tradeCardLoss : undefined]}>
|
|
{isLoss && <View style={styles.lossLeftBorder} />}
|
|
<View style={styles.tradeContent}>
|
|
<View style={styles.tradeHeader}>
|
|
<Text style={styles.tradeSymbol}>{trade.symbol}</Text>
|
|
<PillBadge
|
|
label={trade.side}
|
|
color={trade.side === 'BUY' ? Colors.accent.green : Colors.accent.red}
|
|
bgColor={trade.side === 'BUY' ? 'rgba(0,255,136,0.15)' : 'rgba(255,51,102,0.15)'}
|
|
/>
|
|
<Text style={[styles.tradePnl, { color: pnlColor }]}>
|
|
{formatCurrency(trade.pnl)} ({formatPercent(trade.pnlPercent)})
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={styles.tradeDetails}>
|
|
<Text style={styles.tradeArrow}>
|
|
{formatPrice(trade.entryPrice)} → {formatPrice(trade.exitPrice)}
|
|
</Text>
|
|
<Text style={styles.tradeSize}>{trade.size} {trade.sizeUnit}</Text>
|
|
</View>
|
|
|
|
<View style={styles.tradeFooter}>
|
|
<PillBadge label={trade.reason} color={rc.color} bgColor={rc.bg} />
|
|
<PillBadge
|
|
label={trade.source}
|
|
color={trade.source === 'BOT' ? Colors.accent.purple : Colors.accent.orange}
|
|
bgColor={trade.source === 'BOT' ? 'rgba(168,85,247,0.15)' : 'rgba(230,126,34,0.15)'}
|
|
/>
|
|
<Text style={styles.tradeTime}>{trade.timestamp}</Text>
|
|
</View>
|
|
</View>
|
|
</AnimatedCard>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: Colors.background.primary,
|
|
},
|
|
headerSection: {
|
|
padding: Spacing.screenPadding,
|
|
paddingBottom: 0,
|
|
},
|
|
subtitle: {
|
|
fontFamily: Fonts.inter.black,
|
|
fontSize: FontSize.micro,
|
|
color: Colors.accent.green,
|
|
letterSpacing: 4,
|
|
marginBottom: 8,
|
|
},
|
|
pageTitle: {
|
|
fontFamily: Fonts.inter.black,
|
|
fontSize: FontSize.hero,
|
|
color: Colors.text.primary,
|
|
letterSpacing: -0.5,
|
|
marginBottom: 16,
|
|
},
|
|
scroll: {
|
|
flex: 1,
|
|
},
|
|
content: {
|
|
padding: Spacing.screenPadding,
|
|
gap: 16,
|
|
paddingBottom: 120,
|
|
},
|
|
metricsRow: {
|
|
gap: 12,
|
|
},
|
|
metricCard: {
|
|
backgroundColor: Colors.background.subtle,
|
|
borderRadius: BorderRadius.large,
|
|
borderWidth: 1,
|
|
borderColor: Colors.border.default,
|
|
padding: 20,
|
|
minWidth: 140,
|
|
},
|
|
metricLabel: {
|
|
fontFamily: Fonts.inter.black,
|
|
fontSize: FontSize.micro,
|
|
color: Colors.text.secondary,
|
|
letterSpacing: 3,
|
|
marginBottom: 8,
|
|
},
|
|
metricValue: {
|
|
fontFamily: Fonts.inter.black,
|
|
fontSize: FontSize.hero,
|
|
color: Colors.text.primary,
|
|
},
|
|
filterRow: {
|
|
flexDirection: 'row',
|
|
gap: 8,
|
|
},
|
|
filterPill: {
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 7,
|
|
borderRadius: BorderRadius.xs,
|
|
borderWidth: 1,
|
|
borderColor: Colors.border.medium,
|
|
backgroundColor: 'rgba(255,255,255,0.03)',
|
|
},
|
|
filterActive: {
|
|
borderColor: 'rgba(0,255,136,0.45)',
|
|
backgroundColor: 'rgba(0,255,136,0.08)',
|
|
},
|
|
filterText: {
|
|
fontFamily: Fonts.inter.semiBold,
|
|
fontSize: FontSize.badge,
|
|
color: '#a1a1aa',
|
|
},
|
|
filterTextActive: {
|
|
color: Colors.accent.green,
|
|
},
|
|
tradeCard: {
|
|
backgroundColor: Colors.background.card,
|
|
borderRadius: BorderRadius.medium,
|
|
borderWidth: 1,
|
|
borderColor: Colors.border.default,
|
|
overflow: 'hidden',
|
|
flexDirection: 'row',
|
|
},
|
|
tradeCardLoss: {
|
|
backgroundColor: 'rgba(255,51,102,0.04)',
|
|
},
|
|
lossLeftBorder: {
|
|
width: 2,
|
|
backgroundColor: Colors.accent.red,
|
|
},
|
|
tradeContent: {
|
|
flex: 1,
|
|
padding: 16,
|
|
gap: 8,
|
|
},
|
|
tradeHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
},
|
|
tradeSymbol: {
|
|
fontFamily: Fonts.inter.extraBold,
|
|
fontSize: FontSize.bodyLarge,
|
|
color: Colors.text.primary,
|
|
},
|
|
tradePnl: {
|
|
fontFamily: Fonts.mono.extraBold,
|
|
fontSize: FontSize.body,
|
|
marginLeft: 'auto',
|
|
},
|
|
tradeDetails: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
},
|
|
tradeArrow: {
|
|
fontFamily: Fonts.mono.medium,
|
|
fontSize: FontSize.body,
|
|
color: Colors.text.primary,
|
|
},
|
|
tradeSize: {
|
|
fontFamily: Fonts.mono.regular,
|
|
fontSize: FontSize.bodySmall,
|
|
color: Colors.text.secondary,
|
|
},
|
|
tradeFooter: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
marginTop: 4,
|
|
},
|
|
tradeTime: {
|
|
fontFamily: Fonts.inter.medium,
|
|
fontSize: FontSize.micro,
|
|
color: Colors.text.secondary,
|
|
marginLeft: 'auto',
|
|
},
|
|
});
|