spb/crypto-trade-bot

1"use client";2import { useQuery } from "@tanstack/react-query";3import Link from "next/link";4import { Card, Empty, ErrorBox, PageHeader, Spinner, Table, Td, Th } from "@/components/ui";5import { api } from "@/lib/api";6import { fmtIso, fmtNum, fmtPct, signClass } from "@/lib/format";7import type { RunRow } from "@/lib/types";89export default function ReportsPage() {10  const runs = useQuery({ queryKey: ["runs", 200], queryFn: () => api<{ items: RunRow[] }>("/api/backtests?limit=200") });11  const done = runs.data?.items.filter((r) => r.status === "done") ?? [];12  return (13    <>14      <PageHeader title="Research Reports" subtitle="One report per backtest run: hypothesis, data coverage, parameters, in-sample and out-of-sample results, uncertainty, costs and failure modes. Machine-readable JSON and CSV artifacts alongside." />15      <Card title="Completed runs">16        {runs.isLoading && <Spinner />}17        {runs.error && <ErrorBox error={runs.error} />}18        {runs.data && (done.length ? (19          <Table>20            <thead><tr><Th>Strategy</Th><Th>Symbol</Th><Th align="right">Sharpe</Th><Th align="right">Return</Th><Th>Label</Th><Th>Created</Th><Th>Artifacts</Th></tr></thead>21            <tbody>{done.map((r) => (22              <tr key={r.id} className="hover:bg-bg-sub">23                <Td><Link href={`/reports/${r.id}`} className="font-medium text-accent hover:underline">{r.strategy}</Link></Td><Td>{r.symbol} {r.interval_min}m</Td>24                <Td align="right" num>{fmtNum(r.sharpe)}</Td><Td align="right" num className={signClass(r.total_return)}>{fmtPct(r.total_return)}</Td><Td className="text-fg-muted">{r.label ?? ""}</Td><Td num className="text-fg-dim">{fmtIso(r.created_at)}</Td>25                <Td><span className="flex gap-2 text-xs"><Link href={`/reports/${r.id}`} className="text-accent hover:underline">HTML</Link><a href={`/api/backtests/${r.id}`} download={`backtest-${r.id}.json`} className="text-accent hover:underline">JSON</a><a href={`/api/backtests/${r.id}/trades.csv`} download className="text-accent hover:underline">CSV</a></span></Td>26              </tr>27            ))}</tbody>28          </Table>29        ) : <Empty title="No completed runs">Reports are generated from finished backtests.</Empty>)}30      </Card>31    </>32  );33}34