-
+
+ {/* Row 3: Charts */}
+
+
+ {/* Row 4: Trading + Log */}
+
+
+
+
);
}
diff --git a/web-dashboard/src/app/trades/layout.tsx b/web-dashboard/src/app/trades/layout.tsx
new file mode 100644
index 0000000..623b77e
--- /dev/null
+++ b/web-dashboard/src/app/trades/layout.tsx
@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+ title: "Trade History — XAUBOT AI",
+ description: "Complete trade history and performance analytics",
+};
+
+export default function TradesLayout({ children }: { children: React.ReactNode }) {
+ return children;
+}
diff --git a/web-dashboard/src/app/trades/page.tsx b/web-dashboard/src/app/trades/page.tsx
new file mode 100644
index 0000000..204b5c2
--- /dev/null
+++ b/web-dashboard/src/app/trades/page.tsx
@@ -0,0 +1,314 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import {
+ ArrowLeft,
+ History,
+ TrendingUp,
+ TrendingDown,
+ Trophy,
+ BarChart3,
+ ChevronLeft,
+ ChevronRight,
+ Filter,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { ThemeToggle } from "@/components/theme-toggle";
+import { useTrades, useTradeStats, useEquityCurve } from "@/hooks/use-trades";
+import { formatUSD } from "@/lib/utils";
+import { format } from "date-fns";
+import {
+ LineChart,
+ Line,
+ XAxis,
+ YAxis,
+ Tooltip,
+ ResponsiveContainer,
+ ReferenceLine,
+} from "recharts";
+
+function StatsCards({ startDate, endDate }: { startDate: string; endDate: string }) {
+ const { stats } = useTradeStats(startDate, endDate);
+
+ const cards = [
+ {
+ label: "Total Trades",
+ value: stats?.totalTrades ?? 0,
+ format: (v: number) => String(v),
+ icon: History,
+ color: "text-apple-blue",
+ accent: "accent-top-blue",
+ },
+ {
+ label: "Win Rate",
+ value: stats?.winRate ?? 0,
+ format: (v: number) => `${v.toFixed(1)}%`,
+ icon: Trophy,
+ color: "text-apple-green",
+ accent: "accent-top-green",
+ },
+ {
+ label: "Net Profit",
+ value: stats?.netProfit ?? 0,
+ format: (v: number) => formatUSD(v),
+ icon: TrendingUp,
+ color: (stats?.netProfit ?? 0) >= 0 ? "text-success" : "text-danger",
+ accent: (stats?.netProfit ?? 0) >= 0 ? "accent-top-green" : "accent-top-red",
+ },
+ {
+ label: "Profit Factor",
+ value: stats?.profitFactor ?? 0,
+ format: (v: number) => v.toFixed(2),
+ icon: BarChart3,
+ color: "text-apple-purple",
+ accent: "accent-top-purple",
+ },
+ ];
+
+ return (
+
+ {cards.map((c) => (
+
+
+ {c.label}
+
+
+
+ {c.format(c.value)}
+
+
+ ))}
+
+ );
+}
+
+function EquityCurveChart({ startDate, endDate }: { startDate: string; endDate: string }) {
+ const { points, loading } = useEquityCurve(startDate, endDate);
+
+ if (loading || points.length === 0) {
+ return (
+
+ {loading ? "Loading equity curve..." : "No trade data available"}
+
+ );
+ }
+
+ return (
+
+
Equity Curve
+
+
+
+ {
+ try { return format(new Date(v), "dd MMM"); } catch { return v; }
+ }}
+ stroke="var(--color-muted-foreground)"
+ tickLine={false}
+ axisLine={false}
+ />
+ `$${v}`}
+ stroke="var(--color-muted-foreground)"
+ tickLine={false}
+ axisLine={false}
+ width={60}
+ />
+ [formatUSD(v), "Cumulative P/L"]}
+ labelFormatter={(v) => {
+ try { return format(new Date(v), "dd MMM yyyy HH:mm"); } catch { return v; }
+ }}
+ />
+
+
+
+
+
+
+ );
+}
+
+function TradeTable({
+ filters,
+ setFilters,
+}: {
+ filters: { page: number; limit: number; direction: string; startDate: string; endDate: string };
+ setFilters: React.Dispatch
>;
+}) {
+ const { trades, total, loading } = useTrades(filters);
+ const totalPages = Math.ceil(total / filters.limit) || 1;
+
+ return (
+
+ {/* Filter bar */}
+
+
+
+ setFilters((p) => ({ ...p, startDate: e.target.value, page: 1 }))}
+ className="text-sm px-2 py-1 rounded-md bg-surface border border-border"
+ />
+ to
+ setFilters((p) => ({ ...p, endDate: e.target.value, page: 1 }))}
+ className="text-sm px-2 py-1 rounded-md bg-surface border border-border"
+ />
+
+ {total} trades
+
+
+
+ {/* Table */}
+
+
+
+
+ | Time |
+ Dir |
+ Entry |
+ Exit |
+ Lot |
+ P/L |
+ Exit Reason |
+ Conf |
+ Regime |
+ Session |
+
+
+
+ {loading ? (
+
+ | Loading... |
+
+ ) : trades.length === 0 ? (
+
+ | No trades found |
+
+ ) : (
+ trades.map((t) => (
+
+ |
+ {(() => {
+ try { return format(new Date(t.closed_at), "dd MMM HH:mm"); }
+ catch { return t.closed_at; }
+ })()}
+ |
+
+
+ {t.direction}
+
+ |
+ {t.entry_price?.toFixed(2)} |
+ {t.exit_price?.toFixed(2)} |
+ {t.lot_size?.toFixed(2)} |
+ = 0 ? "text-success" : "text-danger"}`}>
+ {formatUSD(t.profit_usd)}
+ |
+ {t.exit_reason} |
+ {(t.confidence * 100).toFixed(0)}% |
+ {t.regime} |
+ {t.session} |
+
+ ))
+ )}
+
+
+
+
+ {/* Pagination */}
+
+
+ Page {filters.page} of {totalPages}
+
+
+
+
+
+
+
+ {/* Header */}
+
+
+
+
+
+
Dashboard
+
+
+
+
Trade History
+
+
+
+ XAUBOT AI
+
+
+
+ {/* Content */}
+
+
+
+
+
+
+ {children}
+
+ ),
+ h2: ({ children }) => (
+
+ {children}
+
+ ),
+ h3: ({ children }) => (
+
+ {children}
+
+ ),
+ h4: ({ children }) => (
+
+ {children}
+
+ ),
+
+ // ── Paragraphs & text ──
+ p: ({ children }) => (
+
+ {children}
+
+ ),
+ strong: ({ children }) => (
+ {children}
+ ),
+ em: ({ children }) => (
+ {children}
+ ),
+
+ // ── Lists ──
+ ul: ({ children }) => (
+
+ ),
+ ol: ({ children }) => (
+
+ {children}
+
+ ),
+ li: ({ children }) => {children},
+
+ // ── Links ──
+ a: ({ href, children }) => (
+
+ {children}
+
+ ),
+
+ // ── Blockquotes ──
+ blockquote: ({ children }) => (
+
+ {children}
+
+ ),
+
+ // ── Code blocks — with Mermaid detection ──
+ pre: ({ children }) => {
+ const child = Children.only(children);
+ const childProps = isValidElement(child) ? (child.props as Record) : null;
+ if (childProps?.className === "language-mermaid") {
+ const chart = getTextContent(childProps.children as React.ReactNode);
+ return ;
+ }
+ return (
+
+ {children}
+
+ );
+ },
+ code: ({ className, children }) => {
+ const isBlock = className?.startsWith("language-");
+ if (isBlock) {
+ return (
+ {children}
+ );
+ }
+ return (
+
+ {children}
+
+ );
+ },
+
+ // ── Tables — Excel-style ──
+ table: ({ children }) => (
+
+ ),
+ thead: ({ children }) => (
+
+ {children}
+
+ ),
+ th: ({ children }) => (
+
+ {children}
+ |
+ ),
+ tbody: ({ children }) => {children},
+ tr: ({ children }) => (
+
+ {children}
+
+ ),
+ td: ({ children }) => (
+
+ {children}
+ |
+ ),
+
+ // ── Horizontal rule ──
+ hr: () => (
+
+ ),
+
+ // ── Images (placeholder) ──
+ img: ({ alt }) => (
+
+ [{alt || "image"}]
+
+ ),
+};
+
+export function MarkdownRenderer({ content }: MarkdownRendererProps) {
+ const processedContent = useMemo(() => content, [content]);
+
+ return (
+
+
+ {processedContent}
+
+
+ );
+}
diff --git a/web-dashboard/src/components/books/mermaid-diagram.tsx b/web-dashboard/src/components/books/mermaid-diagram.tsx
new file mode 100644
index 0000000..e61d06b
--- /dev/null
+++ b/web-dashboard/src/components/books/mermaid-diagram.tsx
@@ -0,0 +1,281 @@
+"use client";
+
+import { useEffect, useRef, useState, useCallback } from "react";
+import {
+ ZoomIn,
+ ZoomOut,
+ Maximize2,
+ Move,
+ RotateCcw,
+} from "lucide-react";
+
+interface MermaidDiagramProps {
+ chart: string;
+}
+
+const MIN_ZOOM = 0.3;
+const MAX_ZOOM = 3;
+const ZOOM_STEP = 0.2;
+
+export function MermaidDiagram({ chart }: MermaidDiagramProps) {
+ const containerRef = useRef(null);
+ const viewportRef = useRef(null);
+ const [svg, setSvg] = useState("");
+ const [error, setError] = useState("");
+
+ // Transform state
+ const [zoom, setZoom] = useState(1);
+ const [pan, setPan] = useState({ x: 0, y: 0 });
+ const [isDragging, setIsDragging] = useState(false);
+ const dragStart = useRef({ x: 0, y: 0, panX: 0, panY: 0 });
+
+ useEffect(() => {
+ let cancelled = false;
+
+ async function render() {
+ try {
+ const mermaid = (await import("mermaid")).default;
+ mermaid.initialize({
+ startOnLoad: false,
+ theme: "base",
+ themeVariables: {
+ primaryColor: "#e8f0fe",
+ primaryTextColor: "#1d1d1f",
+ primaryBorderColor: "#007AFF",
+ lineColor: "#86868b",
+ secondaryColor: "#f0f7ee",
+ tertiaryColor: "#fef7e0",
+ fontFamily: "IBM Plex Sans, system-ui, sans-serif",
+ fontSize: "13px",
+ nodeBorder: "#007AFF",
+ mainBkg: "#e8f0fe",
+ clusterBkg: "#f5f5f7",
+ clusterBorder: "#d1d1d6",
+ titleColor: "#1d1d1f",
+ edgeLabelBackground: "#ffffff",
+ },
+ flowchart: {
+ htmlLabels: true,
+ curve: "basis",
+ padding: 12,
+ },
+ });
+
+ const id = `mermaid-${Math.random().toString(36).slice(2, 9)}`;
+ const { svg: renderedSvg } = await mermaid.render(id, chart.trim());
+ if (!cancelled) {
+ setSvg(renderedSvg);
+ setError("");
+ }
+ } catch (e) {
+ if (!cancelled) {
+ setError(e instanceof Error ? e.message : "Diagram error");
+ }
+ }
+ }
+
+ render();
+ return () => {
+ cancelled = true;
+ };
+ }, [chart]);
+
+ // Reset when chart changes
+ useEffect(() => {
+ setZoom(1);
+ setPan({ x: 0, y: 0 });
+ }, [chart]);
+
+ const handleZoomIn = useCallback(() => {
+ setZoom((z) => Math.min(MAX_ZOOM, z + ZOOM_STEP));
+ }, []);
+
+ const handleZoomOut = useCallback(() => {
+ setZoom((z) => Math.max(MIN_ZOOM, z - ZOOM_STEP));
+ }, []);
+
+ const handleReset = useCallback(() => {
+ setZoom(1);
+ setPan({ x: 0, y: 0 });
+ }, []);
+
+ const handleFitToView = useCallback(() => {
+ if (!containerRef.current || !viewportRef.current) return;
+ const viewport = viewportRef.current.getBoundingClientRect();
+ const svgEl = containerRef.current.querySelector("svg");
+ if (!svgEl) return;
+
+ const svgW = svgEl.getBoundingClientRect().width / zoom;
+ const svgH = svgEl.getBoundingClientRect().height / zoom;
+ if (svgW === 0 || svgH === 0) return;
+
+ const fitZoom = Math.min(
+ (viewport.width - 32) / svgW,
+ (viewport.height - 32) / svgH,
+ MAX_ZOOM
+ );
+ setZoom(Math.max(MIN_ZOOM, fitZoom));
+ setPan({ x: 0, y: 0 });
+ }, [zoom]);
+
+ // Mouse wheel zoom
+ const handleWheel = useCallback((e: React.WheelEvent) => {
+ e.preventDefault();
+ const delta = e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;
+ setZoom((z) => Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, z + delta)));
+ }, []);
+
+ // Drag to pan
+ const handleMouseDown = useCallback(
+ (e: React.MouseEvent) => {
+ if (e.button !== 0) return;
+ setIsDragging(true);
+ dragStart.current = { x: e.clientX, y: e.clientY, panX: pan.x, panY: pan.y };
+ },
+ [pan]
+ );
+
+ const handleMouseMove = useCallback(
+ (e: React.MouseEvent) => {
+ if (!isDragging) return;
+ const dx = e.clientX - dragStart.current.x;
+ const dy = e.clientY - dragStart.current.y;
+ setPan({ x: dragStart.current.panX + dx, y: dragStart.current.panY + dy });
+ },
+ [isDragging]
+ );
+
+ const handleMouseUp = useCallback(() => {
+ setIsDragging(false);
+ }, []);
+
+ // Touch support for mobile
+ const touchStart = useRef({ x: 0, y: 0, panX: 0, panY: 0 });
+
+ const handleTouchStart = useCallback(
+ (e: React.TouchEvent) => {
+ if (e.touches.length === 1) {
+ const t = e.touches[0];
+ setIsDragging(true);
+ touchStart.current = { x: t.clientX, y: t.clientY, panX: pan.x, panY: pan.y };
+ }
+ },
+ [pan]
+ );
+
+ const handleTouchMove = useCallback(
+ (e: React.TouchEvent) => {
+ if (!isDragging || e.touches.length !== 1) return;
+ const t = e.touches[0];
+ const dx = t.clientX - touchStart.current.x;
+ const dy = t.clientY - touchStart.current.y;
+ setPan({ x: touchStart.current.panX + dx, y: touchStart.current.panY + dy });
+ },
+ [isDragging]
+ );
+
+ const handleTouchEnd = useCallback(() => {
+ setIsDragging(false);
+ }, []);
+
+ if (error) {
+ return (
+
+
Diagram Error
+
{error}
+
+ Source
+ {chart}
+
+
+ {/* Toolbar */}
+
+
+
+
+
+ {zoomPercent}%
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Drag untuk geser, scroll untuk zoom
+
+
+
+ {/* Viewport */}
+
+
- Balance
- {formatUSD(balance)}
-
-
- Equity
- {formatUSD(equity)}
-
-
- P/L
-
- {isProfit ? "+" : ""}{formatUSD(profit)}
-
-
+