messy work. backtests / mock-data

apps/stock/web-app/src/features/backtest/BacktestListPage.tsx

@@ -0,0 +1,119 @@
+import { useEffect } from 'react';
+import { useBacktestList } from './hooks/useBacktest';
+import { Link } from 'react-router-dom';
+
+export function BacktestListPage() {
+  const { backtests, isLoading, error, loadBacktests } = useBacktestList();
+
+  useEffect(() => {
+    loadBacktests();
+  }, [loadBacktests]);
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'completed':
+        return 'text-success';
+      case 'running':
+        return 'text-primary-400';
+      case 'failed':
+        return 'text-error';
+      case 'cancelled':
+        return 'text-text-muted';
+      default:
+        return 'text-text-secondary';
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleString();
+  };
+
+  return (
+    <div className="flex flex-col h-full space-y-6">
+      <div className="flex-shrink-0 flex justify-between items-center">
+        <div>
+          <h1 className="text-lg font-bold text-text-primary mb-2">Backtest History</h1>
+          <p className="text-text-secondary text-sm">
+            View and manage your backtest runs
+          </p>
+        </div>
+        <Link
+          to="/backtests/new"
+          className="px-4 py-2 bg-primary-500 text-white rounded-md text-sm font-medium hover:bg-primary-600 transition-colors"
+        >
+          New Backtest
+        </Link>
+      </div>
+
+      {error && (
+        <div className="bg-error/10 border border-error text-error px-4 py-3 rounded-lg text-sm">
+          {error}
+        </div>
+      )}
+
+      {isLoading ? (
+        <div className="flex items-center justify-center h-64">
+          <div className="text-text-secondary">Loading backtests...</div>
+        </div>
+      ) : backtests.length === 0 ? (
+        <div className="bg-surface-secondary p-8 rounded-lg border border-border text-center">
+          <p className="text-text-secondary mb-4">No backtests found</p>
+          <Link
+            to="/backtests/new"
+            className="inline-flex px-4 py-2 bg-primary-500 text-white rounded-md text-sm font-medium hover:bg-primary-600 transition-colors"
+          >
+            Create Your First Backtest
+          </Link>
+        </div>
+      ) : (
+        <div className="bg-surface-secondary rounded-lg border border-border overflow-hidden">
+          <table className="w-full">
+            <thead className="bg-background border-b border-border">
+              <tr>
+                <th className="px-4 py-3 text-left text-sm font-medium text-text-secondary">ID</th>
+                <th className="px-4 py-3 text-left text-sm font-medium text-text-secondary">Strategy</th>
+                <th className="px-4 py-3 text-left text-sm font-medium text-text-secondary">Symbols</th>
+                <th className="px-4 py-3 text-left text-sm font-medium text-text-secondary">Period</th>
+                <th className="px-4 py-3 text-left text-sm font-medium text-text-secondary">Status</th>
+                <th className="px-4 py-3 text-left text-sm font-medium text-text-secondary">Created</th>
+                <th className="px-4 py-3 text-left text-sm font-medium text-text-secondary">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {backtests.map((backtest) => (
+                <tr key={backtest.id} className="border-b border-border hover:bg-background/50 transition-colors">
+                  <td className="px-4 py-3 text-sm text-text-primary font-mono">
+                    {backtest.id.slice(0, 8)}...
+                  </td>
+                  <td className="px-4 py-3 text-sm text-text-primary capitalize">
+                    {backtest.strategy}
+                  </td>
+                  <td className="px-4 py-3 text-sm text-text-primary">
+                    {backtest.symbols.join(', ')}
+                  </td>
+                  <td className="px-4 py-3 text-sm text-text-primary">
+                    {new Date(backtest.startDate).toLocaleDateString()} - {new Date(backtest.endDate).toLocaleDateString()}
+                  </td>
+                  <td className={`px-4 py-3 text-sm font-medium capitalize ${getStatusColor(backtest.status)}`}>
+                    {backtest.status}
+                  </td>
+                  <td className="px-4 py-3 text-sm text-text-secondary">
+                    {formatDate(backtest.createdAt)}
+                  </td>
+                  <td className="px-4 py-3 text-sm">
+                    <Link
+                      to={`/backtests/${backtest.id}`}
+                      className="text-primary-400 hover:text-primary-300 font-medium"
+                    >
+                      View
+                    </Link>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}