import React from "react";
import { View, ScrollView, StyleSheet, RefreshControl, Text, Alert } from "react-native";
import { Card, H1, H2, Muted, Body, Pill, Row, PrimaryButton } from "@/components/ui";
import { colors, spacing } from "@/theme";
import { useBackendStream } from "@/hooks/useBackendStream";
import { api } from "@/api/client";
function fmt(n: number | undefined, digits = 2) {
if (n == null || Number.isNaN(n)) return "—";
return Number(n).toLocaleString(undefined, { maximumFractionDigits: digits });
}
export default function DashboardScreen() {
const { positions, account, connected, refresh } = useBackendStream();
const [busy, setBusy] = React.useState(false);
const onRefresh = async () => { setBusy(true); await refresh(); setBusy(false); };
const totalPnl = positions.reduce((s, p) => s + (p.pnl ?? 0), 0);
const live = positions.filter((p) => p.execution_mode !== "paper").length;
const paper = positions.length - live;
const close = (id: string) =>
Alert.alert("Close position?", "Market close now.", [
{ text: "Cancel", style: "cancel" },
{ text: "Close", style: "destructive", onPress: async () => {
try { await api.closePosition(id); await refresh(); }
catch (e: any) { Alert.alert("Failed", String(e?.message ?? e)); }
} },
]);
return (
}
>
Dashboard
{connected ? "Live stream connected" : "Connecting…"}
Wallet
{account?.balance != null ? `$${fmt(account.balance)}` : "—"}
{account?.currency ?? ""}
Open PnL
= 0 ? colors.long : colors.short }]}>
{totalPnl >= 0 ? "+" : ""}{fmt(totalPnl)}
{positions.length} positions
Active positions
{positions.length === 0 && No open positions.}
{positions.map((p) => (
{p.coin_symbol}
Entry {fmt(p.entry_price, 4)} · Now {fmt(p.current_price, 4)} · {p.leverage}×
SL {fmt(p.stop_loss, 4)} · TP {fmt(p.take_profit, 4)}
= 0 ? colors.long : colors.short, fontWeight: "700" }}>
{p.pnl >= 0 ? "+" : ""}{fmt(p.pnl)}
{(p.pnl_pct ?? 0).toFixed(2)}%
close(p._id)} />
))}
);
}
const styles = StyleSheet.create({
kpi: { flex: 1 },
kpiVal: { color: colors.text, fontSize: 22, fontWeight: "700", marginVertical: 2 },
});