setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: "var(--z-dropdown)" }} />
{isDemo ? t("menu.demo_user") : t("menu.user")}
{isDemo &&
{t("demo.badge_suffix")}
}
}
onSet("th")}>TH
onSet("en")}>EN
;
}
function AppShell({ t, active, lang, onSetLang, onLogout, onQuickAdd, children }) {
const groups = NAV_GROUPS(t);
const tabs = TABS(t);
const go = (to) => (e) => { e.preventDefault(); navigate(to); };
return
{/* header (chrome มืด — mtos-chrome ตั้ง token subtree ให้ลูกทุกตัวเป็นโทนมืด) */}
{Session.isDemo() &&
{t("demo.badge_short")}
· {t("demo.badge_suffix")}
}
{/* sidebar desktop */}
{/* content */}
{children}
{/* FAB desktop (bottom-right) */}
{/* tabbar mobile (light · ขาว + border + active ม่วง ตาม mockup บนพื้นสว่าง) */}
{t("demo.state_switcher")}:
{opts.map(([k, lbl]) => )}
;
}
function PageHeader({ t, page }) {
return
{t("pages." + page + ".title")}
{t("pages." + page + ".subtitle")}
;
}
/* generic placeholder page ที่ demo states กลางครบ */
function GenericPage({ t, page, toast }) {
const [st, setSt] = useState("ready");
return
{st === "loading" &&
}
{st === "empty" &&
toast(t("states.toast_saved"))} />}
{st === "error" && setSt("ready")} />}
{st === "locked" &&
}
{st === "ready" &&
{t("demo.placeholder_note")}
{t("demo.central_states_note")}
}
;
}
/* ===========================================================================
Dashboard cards (Wave 1) — StatTile · EquityCurve · MiniHeatmap · FeesPanel
ทุกเลขมาจาก API · client format เท่านั้น · pf_flag/null render ตาม flag
=========================================================================== */
function StatTile({ label, value, sub, onClick, sample, t }) {
const clickable = !!onClick;
return { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(); } } : undefined}
style={{ position: "relative", cursor: clickable ? "pointer" : "default", minHeight: 92 }}>
{sample &&
}
{label}
{value}
{sub &&
{sub}
}
{tiles.map((ti) => navigate("/app/insights?dimension=" + ti.dim) : undefined} />)}
;
}
/* ---------------------------------------------------------------------------
Dashboard KPI cards (TradeZella-style · Wave dashkpi)
5 การ์ด gauge/donut/pills — reuse PFDonut · WinGauge · KpiPill (จาก Trades KPI)
ทุกเลขจาก /analytics/summary (สะท้อน account/range) · client วาด/format เท่านั้น
--------------------------------------------------------------------------- */
function InfoIcon({ tip }) {
return i;
}
function DashboardKPICards({ t, s, sample }) {
const gw = s.gross_win_cents || 0, gl = Math.abs(s.gross_loss_cents || 0);
const pfText = s.pf_flag === "no_losses" ? "∞" : s.pf_flag === "no_trades" ? "—" : fmtNum(s.profit_factor);
const aw = s.avg_win_cents || 0, al = Math.abs(s.avg_loss_cents || 0);
const payoff = (s.avg_win_cents != null && al) ? aw / al : null;
const barTot = aw + al || 1;
const netColor = s.net_pnl_cents > 0 ? "var(--profit)" : s.net_pnl_cents < 0 ? "var(--loss)" : "var(--ink)";
const lbl = { margin: 0 };
return
{sample &&
{t("common.sample")}
}
{/* 1 · Net P&L + count badge */}
{t("analytics.net_pnl")}
{s.trades_closed}
{fmtMoney(s.net_pnl_cents, s.currency)}
{/* 2 · Trade win % + half-gauge + pills */}
{t("analytics.win_rate")}
{/* 3 · Profit factor + donut */}
{t("analytics.profit_factor")}
{/* 4 · Day win % + half-gauge + pills (วันชนะ/เสมอ/แพ้) */}
{t("analytics.day_win_rate")}
{/* 5 · Avg win/loss + proportion bar + $ */}
{t("analytics.avg_wl")}
{payoff == null ? "—" : fmtNum(payoff)}
{s.avg_win_cents == null ? "—" : fmtMoney(s.avg_win_cents, s.currency)}
{s.avg_loss_cents == null ? "—" : fmtMoney(s.avg_loss_cents, s.currency)}
navigate("/app/insights?dimension=expectancy")}
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); navigate("/app/insights?dimension=expectancy"); } }}
style={{ position: "relative", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "space-between", gap: "var(--sp-3)", flexWrap: "wrap" }}>
{sample &&
}
{t("analytics.expectancy")}
{t("analytics.per_trade")}
{rExp && {rExp}}
{sample &&
}
{t("analytics.fees_title")}
{rows.map(([lbl, v], i) =>
{lbl}
)}
{t("analytics.fees_total")}
{[["trade", t("analytics.gran_trade")], ["day", t("analytics.gran_day")]].map(([g, lbl]) => )}
;
const header =
{t("analytics.equity_curve_label")}{toggle}
;
let body;
if (loading) body =
;
else if (!pts || pts.length < 2) body =
;
else {
const w = 600, h = 200, pad = 8;
const ys = pts.map((p) => p.cum_net_pnl_cents);
const min = Math.min.apply(null, ys.concat([0])), max = Math.max.apply(null, ys.concat([0]));
const span = max - min || 1;
const x = (i) => pad + i * (w - pad * 2) / (pts.length - 1);
const y = (v) => h - pad - (v - min) * (h - pad * 2) / span;
const line = pts.map((p, i) => (i ? "L" : "M") + x(i).toFixed(1) + " " + y(p.cum_net_pnl_cents).toFixed(1)).join(" ");
const area = line + " L" + x(pts.length - 1).toFixed(1) + " " + (h - pad) + " L" + x(0).toFixed(1) + " " + (h - pad) + " Z";
const y0 = y(0);
// x-axis: 4 label เดือนย่อ จากจุดจริง
const months = t("calendar.months_short");
const labelAt = (p) => { const s = p.t || p.trade_date || ""; const d = parseYMD((s.split("T")[0]) || ""); return d ? months[d.getMonth()] : ""; };
const nLbl = 4, xlabels = [];
for (let k = 0; k < nLbl; k++) { const idx = Math.round(k * (pts.length - 1) / (nLbl - 1)); xlabels.push([x(idx), labelAt(pts[idx])]); }
body =
{xlabels.map((l, i) => {l[1]})}
;
}
return {header}{body}
;
}
/* MiniHeatmap (C8) — เดือนปัจจุบัน · สีตาม sign · แตะวัน -> /app/calendar?day= */
function MiniHeatmap({ t }) {
const [res, setRes] = useState(null);
const [err, setErr] = useState(false);
useEffect(() => { window.MTOS_API.get("/analytics/calendar?month=" + ymNow()).then(setRes).catch(() => setErr(true)); }, []);
if (err) return null;
if (!res) return ;
const ym = parseYM(res.data.month) || parseYM(ymNow());
const dmap = {}; (res.data.days || []).forEach((d) => { dmap[d.trade_date] = d; });
const first = new Date(ym.y, ym.m - 1, 1);
const lead = (first.getDay() + 6) % 7;
const dim = new Date(ym.y, ym.m, 0).getDate();
const cells = []; for (let i = 0; i < lead; i++) cells.push(null); for (let d = 1; d <= dim; d++) cells.push(d);
const weekdays = t("calendar.weekdays");
const monthName = t("calendar.months")[ym.m - 1] + " " + ym.y;
// TradeZella-style: พื้นเขียว/แดงอ่อน + ตัวเลข P&L เด่นกลางช่อง · เลขวันเล็กมุมบน
const cellBg = (d) => { if (!d) return "var(--zebra)"; const n = d.net_pnl_cents; const c = n > 0 ? "var(--profit)" : n < 0 ? "var(--loss)" : "var(--surface-3)"; return "color-mix(in srgb, " + c + " 15%, transparent)"; };
const cellInk = (d) => { const n = d.net_pnl_cents; return n > 0 ? "var(--profit)" : n < 0 ? "var(--loss)" : "var(--ink-mute)"; };
return
{weekdays.map((w, i) =>
{w}
)}
{cells.map((num, i) => {
if (!num) return
;
const date = res.data.month + "-" + pad2(num);
const d = dmap[date];
const aria = d ? num + " " + t("calendar.months_short")[ym.m - 1] + " " + fmtMoneyShort(d.net_pnl_cents, res.meta.currency) + ", " + d.trades_closed_count + " ไม้" : String(num);
return
;
})}
{t("analytics.month_total")}
;
}
/* Dashboard เต็ม (Wave 1) — 5 tile · fees · equity · heatmap + ทุก state */
function DashboardPage({ t, toast }) {
const [devState, setDevState] = useState("ready"); // dev state switcher
const [gran, setGran] = useState("trade");
const [phase, setPhase] = useState("loading"); // loading|ready|empty|error|locked
const [summary, setSummary] = useState(null);
const [meta, setMeta] = useState(null);
const [errCode, setErrCode] = useState(null);
const [lockInfo, setLockInfo] = useState(null);
const [sample, setSample] = useState(null);
const [accts, setAccts] = useState(null);
const q = getQuery();
const acct = q.get("account_id") || "";
const range = q.get("range") || "30d";
const noAccounts = accts && accts.length === 0;
useEffect(() => { window.MTOS_API.get("/accounts").then((r) => setAccts(r.data)).catch(() => setAccts([])); }, []);
const load = useCallback((sim) => {
setPhase("loading");
if (sim === "loading") return;
if (sim === "empty") { setTimeout(() => setPhase("empty"), 120); return; }
const opts = sim === "error" ? { simulate: "error" } : sim === "locked" ? { simulate: "locked" } : {};
window.MTOS_API.get("/analytics/summary" + analyticsQS(acct, range), opts)
.then((r) => { setSummary(r.data); setMeta(r.meta); setPhase(r.data.trades_closed === 0 ? "empty" : "ready"); })
.catch((e) => {
if (e.status === 409) {
const det = (e.envelope && e.envelope.error && e.envelope.error.details) || { minutes: 6, progress: 0.35 };
setLockInfo(det);
window.MTOS_API.get("/analytics/sample").then((sr) => { setSample(sr.data); setPhase("locked"); }).catch(() => { setErrCode("sample_fail"); setPhase("error"); });
} else { setErrCode((e.envelope && e.envelope.error && e.envelope.error.code) || "error"); setPhase("error"); }
});
}, [acct, range]);
useEffect(() => { load(devState === "ready" ? null : devState); }, [devState, load]);
return
{phase === "loading" &&
}
{phase === "error" &&
load(null)} />}
{phase === "empty" && noAccounts ? navigate("/app/connect") : patchQuery({ quickadd: "1" })} />}
{phase === "locked" && sample &&
{t("analytics.first_sync_note")}
}
{phase === "ready" && summary && }
;
}
/* ===========================================================================
Calendar (Wave 1) — MonthHeader · MonthGrid · WeeklySubtotal · DayDetailSheet
=========================================================================== */
function MonthHeader({ t, ym, data }) {
const ms = data.month_summary || {};
const name = t("calendar.months")[ym.m - 1] + " " + ym.y;
const go = (delta) => {
let m = ym.m + delta, y = ym.y;
if (m < 1) { m = 12; y--; } if (m > 12) { m = 1; y++; }
patchQuery({ month: y + "-" + pad2(m), day: null });
};
const btn = { width: 40, height: 40, borderRadius: "var(--radius-sm)", border: "1px solid var(--hairline)", background: "transparent", color: "var(--ink)", cursor: "pointer", fontSize: 18 };
return
{name}
{t("calendar.net_month")}
{t("analytics.win_rate")}
{fmtPct(ms.win_rate)}
{t("calendar.trade_count", { n: "" }).replace("{n}", "").trim() || "ไม้"}
{ms.trades_closed_count}
;
}
function MonthGrid({ t, ym, data, sample }) {
const dmap = {}; (data.days || []).forEach((d) => { dmap[d.trade_date] = d; });
const wmap = {}; (data.weekly || []).forEach((w) => { wmap[w.week_start] = w; });
const first = new Date(ym.y, ym.m - 1, 1);
const lead = (first.getDay() + 6) % 7;
const dim = new Date(ym.y, ym.m, 0).getDate();
const cells = []; for (let i = 0; i < lead; i++) cells.push(null); for (let d = 1; d <= dim; d++) cells.push(d);
while (cells.length % 7) cells.push(null);
const weeks = []; for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));
const mondayOf = (wi) => { const dd = new Date(ym.y, ym.m - 1, 1 + wi * 7 - lead); return ymd(dd); };
const weekdays = t("calendar.weekdays");
const monShort = t("calendar.months_short")[ym.m - 1];
const today = ymd(new Date());
const openDay = (date) => patchQuery({ day: date, month: data.month });
const cellColor = (d) => { const n = d.net_pnl_cents; return n > 0 ? "var(--profit)" : n < 0 ? "var(--loss)" : "var(--surface-3)"; };
const dotStr = (n) => n <= 3 ? "•".repeat(n) : "×" + n;
const Cell = ({ num, week }) => {
if (!num) return ;
const date = data.month + "-" + pad2(num);
const d = dmap[date];
const isToday = date === today;
return ;
};
return
{/* weekday header */}
{weekdays.map((w, i) =>
{w}
)}
{weeks.map((wk, wi) =>
{wk.map((num, ci) => | )}
)}
{/* WeeklySubtotal — desktop = ท้ายเป็นบล็อค · mobile = list ท้าย scroll */}
{t("calendar.weekly_subtotal")}
{weeks.map((wk, wi) => {
const w = wmap[mondayOf(wi)];
if (!w) return null;
return
{t("calendar.week_label")} {wi + 1} · {t("calendar.traded_days", { n: w.traded_days_count })}
;
})}
{t("calendar.day_sessions")}
{sorted.map((s) =>
{t("session." + s.key)} · {t("calendar.trade_count", { n: s.trades })}
)}
;
}
/* DayDetailSheet — mobile bottom-sheet 85% · desktop side panel ขวา */
function DayDetailSheet({ t, date, sample, onClose, toast }) {
const [d, setD] = useState(null);
const [note, setNote] = useState("");
const [noteState, setNoteState] = useState(""); // "" | saving | saved
const timer = useRef(null);
useEffect(() => {
setD(null); setNoteState("");
window.MTOS_API.get("/calendar/days/" + date).then((r) => { setD(r.data); setNote((r.data.daily_note && r.data.daily_note.body) || ""); }).catch(() => setD({ error: true }));
}, [date]);
useEffect(() => {
const onKey = (e) => { if (e.key === "Escape") onClose(); };
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [onClose]);
const onNote = (e) => {
const v = e.target.value; setNote(v); setNoteState("saving");
if (timer.current) clearTimeout(timer.current);
timer.current = setTimeout(() => {
window.MTOS_API.put("/daily-notes/" + date, { body: v }).then(() => setNoteState("saved")).catch(() => setNoteState(""));
}, 600);
};
const summary = d && d.summary;
const content =
{date}
{sample &&
{t("common.sample")}}
{!d &&
}
{d && d.error &&
{ }} />}
{d && !d.error &&
{/* สรุปวัน */}
{t("calendar.day_summary")}
{summary ?
{t("analytics.trades_line", { count: summary.trades_closed_count, wins: summary.wins_count, losses: summary.losses_count, be: summary.be_count })}
:
{t("calendar.no_trades_day")}
}
{/* รายการไม้ */}
{d.trades && d.trades.length > 0 &&
{t("calendar.day_trades")}
{d.trades.map((tr) => )}
}
{/* daily note + autosave */}
{t("calendar.day_note")}
{noteState === "saving" ? t("calendar.note_saving") : noteState === "saved" ? t("calendar.note_saved") : ""}
;
return ReactDOM.createPortal(
{/* mobile bottom-sheet (wrapper คุม display ผ่าน class · panel เป็น block ปกติ) */}
{/* desktop side panel ขวา */}
, document.body);
}
/* ===========================================================================
Wave 2.5: Calendar desktop — day cards (expandable) + sticky mini-calendar
เฉพาะ ≥1024px · มือถือคงเดิม (MonthGrid + DayDetailSheet)
=========================================================================== */
function fmtDayLabel(date, t) {
const d = parseYMD(date); if (!d) return date;
return d.getDate() + " " + t("calendar.months_short")[d.getMonth()] + " " + d.getFullYear();
}
/* mini equity ของวัน (intraday cumulative · line + area) */
function DayMiniChart({ t, points }) {
if (!points || points.length < 2) return {t("calendar.no_intraday")}
;
const w = 300, h = 120, pad = 8;
const ys = points.map((p) => p.cum_net_pnl_cents);
const min = Math.min.apply(null, ys.concat([0])), max = Math.max.apply(null, ys.concat([0]));
const span = max - min || 1;
const x = (i) => pad + i * (w - pad * 2) / (points.length - 1);
const y = (v) => h - pad - (v - min) * (h - pad * 2) / span;
const up = ys[ys.length - 1] >= 0;
const col = up ? "var(--profit)" : "var(--loss)";
const line = points.map((p, i) => (i ? "L" : "M") + x(i).toFixed(1) + " " + y(p.cum_net_pnl_cents).toFixed(1)).join(" ");
const area = line + " L" + x(points.length - 1).toFixed(1) + " " + (h - pad) + " L" + x(0).toFixed(1) + " " + (h - pad) + " Z";
const y0 = y(0);
return ;
}
/* daily note editor (desktop day card) — autosave debounce → PUT /daily-notes */
function DayNoteEditor({ t, date, initial }) {
const [note, setNote] = useState(initial || "");
const [state, setState] = useState("");
const timer = useRef(null);
useEffect(() => { setNote(initial || ""); setState(""); }, [date]);
const onChange = (e) => {
const v = e.target.value; setNote(v); setState("saving");
if (timer.current) clearTimeout(timer.current);
timer.current = setTimeout(() => { window.MTOS_API.put("/daily-notes/" + date, { body: v }).then(() => setState("saved")).catch(() => setState("")); }, 600);
};
return
{t("calendar.day_note")}
{state === "saving" ? t("calendar.note_saving") : state === "saved" ? t("calendar.note_saved") : ""}
;
}
/* DayCard — collapsed: caret+วันที่+Net P&L · expand: mini chart + 7 stats + trades table + note */
function DayCard({ t, date, agg, currency, expanded, onToggle }) {
const [d, setD] = useState(null);
const [err, setErr] = useState(false);
const ref = useRef(null);
useEffect(() => {
if (!expanded) return;
if (d || err) return;
setErr(false);
window.MTOS_API.get("/calendar/days/" + date).then((r) => setD(r.data)).catch(() => setErr(true));
}, [expanded, date]);
useEffect(() => { if (expanded && ref.current) { try { ref.current.scrollIntoView({ behavior: "smooth", block: "nearest" }); } catch (e) {} } }, [expanded]);
const net = agg ? agg.net_pnl_cents : (d && d.summary ? d.summary.net_pnl_cents : null);
const noTrades = agg == null && (!d || !d.summary);
const sm = d && d.summary;
const winsLosses = sm ? (sm.wins_count + " / " + sm.losses_count) : "—";
const statCells = sm ? [
[t("calendar.stat.total_trades"), {sm.trades_closed_count}],
[t("calendar.stat.gross"), ],
[t("calendar.stat.winners_losers"), {winsLosses}],
[t("calendar.stat.commissions"), ],
[t("calendar.stat.win_rate"), {fmtPct(sm.win_rate)}],
[t("calendar.stat.volume"), {(sm.volume_lots_x100 / 100).toFixed(2)}],
[t("calendar.stat.pf"), {sm.profit_factor == null ? "∞" : fmtNum(sm.profit_factor)}],
] : [];
return
{expanded &&
{err &&
{ setErr(false); setD(null); }} />}
{!err && !d &&
}
{!err && d && noTrades &&
{t("calendar.no_trades_day")}
}
{!err && d && !noTrades &&
{t("calendar.day_curve")}
{statCells.map((c, i) =>
)}
{d.trades && d.trades.length > 0 &&
| {t("trades.col_time")} | {t("trades.col_symbol")} | {t("trades.col_direction")} | {t("trades.col_pnl")} | {t("trades.col_r")} |
|---|
{d.trades.map((tr) => navigate("/app/trades/" + tr.trade_id)}>
| {fmtTime(tr.closed_at)} |
{tr.symbol} |
|
|
{fmtR(tr.r_multiple)} |
)}
}
}
}
;
}
/* mini calendar sticky (desktop) — grid สีตาม sign · คลิกวันที่มีเทรด → expand card */
function CalMiniCal({ t, ym, month, dmap, selected, onPick }) {
const first = new Date(ym.y, ym.m - 1, 1);
const lead = (first.getDay() + 6) % 7;
const dim = new Date(ym.y, ym.m, 0).getDate();
const cells = []; for (let i = 0; i < lead; i++) cells.push(null); for (let dd = 1; dd <= dim; dd++) cells.push(dd);
const weekdays = t("calendar.weekdays");
return
{weekdays.map((w, i) =>
{w}
)}
{cells.map((num, i) => {
if (!num) return
;
const date = month + "-" + pad2(num);
const dd = dmap[date];
const isSel = date === selected;
const net = dd ? dd.net_pnl_cents : null;
const dot = net == null ? null : net > 0 ? "var(--profit)" : net < 0 ? "var(--loss)" : "var(--ink-subtle)";
return
;
})}
;
}
function CalendarDesktop({ t, ym, data, sample, dayParam, toast }) {
const month = data.month;
const dmap = {}; (data.days || []).forEach((d) => { dmap[d.trade_date] = d; });
const currency = "USD";
const [expanded, setExpanded] = useState(dayParam && dmap[dayParam] ? dayParam : null);
// sync กับ ?day= (back/forward · deep-link)
useEffect(() => { setExpanded(dayParam && dmap[dayParam] ? dayParam : (dayParam && !dmap[dayParam] ? dayParam : null)); }, [dayParam, month]);
const toggle = (date) => { const next = expanded === date ? null : date; setExpanded(next); patchQuery({ day: next || null, month: month }); };
const pick = (date) => { setExpanded(date); patchQuery({ day: date, month: month }); };
// วันเรียงล่าสุดก่อน · ถ้า deep-link วันว่าง (ไม่มีเทรด) แทรกการ์ดว่างบนสุด
const dates = (data.days || []).map((d) => d.trade_date).sort().reverse();
const emptySelected = expanded && !dmap[expanded];
return
{emptySelected && toggle(expanded)} />}
{dates.map((date) => toggle(date)} />)}
;
}
function CalendarPage({ t, toast }) {
const isDesktop = useIsDesktop();
const [devState, setDevState] = useState("ready");
const [phase, setPhase] = useState("loading"); // loading|ready|empty|error|locked
const [data, setData] = useState(null);
const [meta, setMeta] = useState(null);
const [errCode, setErrCode] = useState(null);
const [accts, setAccts] = useState(null);
const q = getQuery();
const monthParam = q.get("month");
const dayParam = q.get("day");
const acct = q.get("account_id") || "";
const noAccounts = accts && accts.length === 0;
useEffect(() => { window.MTOS_API.get("/accounts").then((r) => setAccts(r.data)).catch(() => setAccts([])); }, []);
// strip ?day= ที่ผิด format / เป็นอนาคต (E10)
const dayDate = parseYMD(dayParam);
const todayMid = new Date(); todayMid.setHours(0, 0, 0, 0);
const dayValid = !!(dayDate && dayDate <= todayMid);
useEffect(() => { if (dayParam && !dayValid) patchQuery({ day: null }, true); }, [dayParam, dayValid]);
const sheetOpen = !!(dayParam && dayValid);
const load = useCallback((sim, mparam) => {
setPhase("loading");
if (sim === "loading") return;
if (sim === "empty") { setTimeout(() => setPhase("empty"), 120); return; }
if (sim === "locked") {
window.MTOS_API.get("/calendar/sample").then((r) => { setData(r.data); setMeta(r.meta); setPhase("locked"); }).catch(() => { setErrCode("error"); setPhase("error"); });
return;
}
const ym = parseYM(mparam) ? mparam : ymNow();
window.MTOS_API.get("/calendar/" + ym, sim === "error" ? { simulate: "error" } : {})
.then((r) => { setData(r.data); setMeta(r.meta); setPhase(r.data.days && r.data.days.length ? "ready" : "empty"); })
.catch((e) => { setErrCode((e.envelope && e.envelope.error && e.envelope.error.code) || "error"); setPhase("error"); });
}, []);
useEffect(() => { load(devState === "ready" ? null : devState, monthParam); }, [devState, monthParam, acct, load]);
const ym = data ? (parseYM(data.month) || parseYM(ymNow())) : null;
return
{phase === "loading" &&
}
{phase === "error" &&
load(null, monthParam)} />}
{phase === "empty" && noAccounts ? navigate("/app/connect") : patchQuery({ quickadd: "1" })} />}
{(phase === "ready" || phase === "locked") && data && ym &&
{phase === "locked" &&
}
{isDesktop && phase === "ready"
?
:
{phase === "locked" && }
}
;
}
/* ===========================================================================
Public pages (login/register — mock)
=========================================================================== */
function AuthPage({ t, mode, onLogin }) {
const params = new URLSearchParams(window.location.search);
const next = params.get("next") || "/app";
const doLogin = () => { onLogin(); navigate(next, true); };
return ;
}
function NotFoundPage({ t }) {
return
404
{t("errors.not_found_page")}
{t("errors.not_found_page_body")}
;
}
/* ===========================================================================
LandingPage — route "/" (public · ไม่ต้อง session)
โครงย่อจาก marketing landing · CTA เดียวพาเข้า demo · light theme · mobile-first
copy: MT4 = อัปโหลด statement (ห้าม "sync") · ไม่มีราคา hardcode
=========================================================================== */
function EquityCurveSignature({ t }) {
// ลายเซ็น equity curve — SVG นิ่ง (0 external request) · แสดงผลอย่างเดียว
const line = "M0,176 L60,170 L120,180 L180,150 L240,160 L300,118 L360,130 L420,86 L480,96 L540,50 L600,36";
const area = line + " L600,200 L0,200 Z";
return
{t("landing.eq_title")}
{t("landing.eq_delta")}
{t("landing.eq_caption")}
;
}
function LandingPage({ t, lang, onSetLang, onDemo }) {
const goLogin = (e) => { e.preventDefault(); navigate("/login"); };
const goRegister = (e) => { e.preventDefault(); navigate("/register"); };
const feats = [
{ icon: "▦", k: "f1" }, { icon: "◎", k: "f2" }, { icon: "⇪", k: "f3" }, { icon: "◱", k: "f4" },
];
return
{/* top bar */}
{/* hero */}
{t("landing.eyebrow")}
{t("landing.hero_h1a")}
{t("landing.hero_h1b")}
{t("landing.hero_tagline")}
{t("landing.cta_note")}
{/* equity curve signature */}
{/* features */}
{t("landing.feat_h2")}
{feats.map((f) =>
{f.icon}
{t("landing." + f.k + "_t")}
{t("landing." + f.k + "_d")}
)}
{EMOTIONS.map((k) => {
const on = value === k;
return ;
})}
;
}
/* TradeNoteBox — autosave debounce 800ms → PUT journal · "บันทึกแล้ว ✓" */
function TradeNoteBox({ t, tradeId, initial }) {
const [note, setNote] = useState(initial || "");
const [state, setState] = useState(""); // "" | saving | saved
const timer = useRef(null);
useEffect(() => { setNote(initial || ""); setState(""); }, [tradeId]);
const onChange = (e) => {
const v = e.target.value.slice(0, 10000);
setNote(v); setState("saving");
if (timer.current) clearTimeout(timer.current);
timer.current = setTimeout(() => {
window.MTOS_API.put("/trades/" + tradeId + "/journal", { note_body: v }).then(() => setState("saved")).catch(() => setState(""));
}, 800);
};
return
{t("journal.note_title")}
{state === "saving" ? t("journal.note_saving") : state === "saved" ? t("journal.note_saved") + " ✓" : ""}
{note.length > 9000 &&
{t("journal.note_counter", { n: note.length })}
}
;
}
/* TagPicker — tag ระบบ (EA/Manual) lock · user tag toggle · สร้างใหม่ inline */
function TagPicker({ t, options, selected, onToggle, onCreate }) {
const [adding, setAdding] = useState(false);
const [name, setName] = useState("");
const sel = {}; (selected || []).forEach((id) => { sel[id] = 1; });
const create = () => { const n = name.trim(); if (!n) return; onCreate(n); setName(""); setAdding(false); };
const sysSelected = (options || []).filter((x) => x.is_system && sel[x.public_id]);
const userTags = (options || []).filter((x) => !x.is_system);
return ;
}
/* badges — EA/Manual · ปิดบางส่วน · สถานะ open */
function OriginBadge({ t, origin }) {
const ea = origin === "ea";
return {ea ? t("trades.badge_ea") : t("trades.badge_manual")};
}
function PartialBadge({ t }) {
return {t("trades.partial_badge")};
}
function DirText({ t, dir }) {
return {dir === "long" ? "▲ " + t("filters.direction_long") : "▼ " + t("filters.direction_short")};
}
function fmtR(r) { return r === null || r === undefined ? "—" : (r >= 0 ? "+" : "−") + Math.abs(r).toFixed(2) + "R"; }
/* ===========================================================================
Wave 2: Trade log filter (FilterBar · FilterSheet · ActiveFilterChips · ResultSummary · ExcludedNotice)
ทุก dim → query string · back/forward re-parse (ผ่าน patchQuery + useRoute)
=========================================================================== */
function filterDims(t, opts) {
const all = {
symbol: { label: t("filters.dim_symbol"), values: (opts.symbols || []).map((s) => [s, s]) },
direction: { label: t("filters.dim_direction"), values: [["long", t("filters.direction_long")], ["short", t("filters.direction_short")]] },
session: { label: t("filters.dim_session"), values: (opts.sessions || []).map((s) => [s.key, t("session." + s.key)]) },
outcome: { label: t("filters.dim_outcome"), values: [["win", t("filters.outcome_win")], ["loss", t("filters.outcome_loss")], ["be", t("filters.outcome_be")]] },
origin: { label: t("filters.dim_origin"), values: [["ea", t("filters.origin_ea")], ["manual", t("filters.origin_manual")]] },
sort: { label: t("filters.dim_sort"), values: [["-closed_at", t("filters.sort_recent")], ["closed_at", t("filters.sort_oldest")], ["-net_cents", t("filters.sort_pnl_high")], ["net_cents", t("filters.sort_pnl_low")]] },
};
const enabled = opts.dims_enabled || Object.keys(all);
const out = {};
["symbol", "direction", "session", "outcome", "origin", "sort"].forEach((k) => { if (enabled.indexOf(k) >= 0) out[k] = all[k]; });
return out;
}
const FILTER_KEYS = ["symbol", "direction", "session", "outcome", "origin"]; // sort ไม่นับเป็น active chip
function activeCount(q) { let n = 0; FILTER_KEYS.forEach((k) => { if (q[k]) n++; }); return n; }
/* desktop inline chip ต่อ dim */
function DimChip({ t, dimKey, g, sel, onPick }) {
const [open, setOpen] = useState(false);
const cur = g.values.find((v) => v[0] === sel);
return setOpen((o) => !o)}>
{dimKey !== "sort" && }
{g.values.map((v) => )}
;
}
function FilterSheet({ t, open, onClose, dims, q }) {
const [draft, setDraft] = useState({});
useEffect(() => {
if (open) { const d = {}; Object.keys(dims).forEach((k) => { d[k] = q[k] || ""; }); setDraft(d); }
}, [open]);
const setD = (k, v) => setDraft((o) => Object.assign({}, o, { [k]: v }));
const apply = () => { const patch = { cursor: null }; Object.keys(dims).forEach((k) => { patch[k] = draft[k] || null; }); patchQuery(patch); onClose(); };
const clear = () => { const d = {}; Object.keys(dims).forEach((k) => { d[k] = ""; }); setDraft(d); };
return
{Object.keys(dims).map((dk) => { const g = dims[dk];
return
{g.label}
{dk !== "sort" && }
{g.values.map((v) => )}
;
})}
;
}
function ActiveFilterChips({ t, q }) {
const chips = [];
if (q.symbol) chips.push(["symbol", q.symbol]);
if (q.direction) chips.push(["direction", t("filters.direction_" + q.direction)]);
if (q.session) chips.push(["session", t("session." + q.session)]);
if (q.outcome) chips.push(["outcome", t("filters.outcome_" + q.outcome)]);
if (q.origin) chips.push(["origin", t("filters.origin_" + q.origin)]);
if (!chips.length) return null;
const clearAll = () => patchQuery({ symbol: null, direction: null, session: null, outcome: null, origin: null, cursor: null });
return
{chips.map(([k, label]) =>
{label}
)}
;
}
function TradeCard({ t, tr, onOpen }) {
const net = tr.net_cents;
return ;
}
/* ===========================================================================
Wave 2.5: Trades KPI strip — 4 ใบเหนือ list · เลขจาก /trades/summary (สะท้อน filter)
ทุกค่าจาก mock (client format/วาดเท่านั้น) · re-fetch เมื่อ filter/qkey เปลี่ยน
=========================================================================== */
/* donut 2 arc (PF) — เขียว=gross win · แดง=gross loss */
function PFDonut({ win, loss }) {
const tot = win + loss || 1;
const r = 15, c = 2 * Math.PI * r, gw = c * (win / tot);
return ;
}
/* half-gauge (win%) — semicircle · เขียว fill ตาม rate */
function WinGauge({ rate }) {
const r = rate == null ? 0 : Math.max(0, Math.min(1, rate));
const R = 22, cx = 26, cy = 26;
const p = (frac) => { const ang = Math.PI - Math.PI * frac; return [cx + R * Math.cos(ang), cy - R * Math.sin(ang)]; };
const s = p(0), e = p(r), bgEnd = p(1);
return ;
}
function KpiPill({ n, kind, label }) {
const map = { W: "var(--profit)", BE: "#3b82f6", L: "var(--loss)" };
const bg = { W: "#e7f8f0", BE: "#eef1fe", L: "#fdecef" };
return {kind} {n};
}
function TradesKPIStrip({ t, qkey }) {
const [s, setS] = useState(null);
const [phase, setPhase] = useState("loading"); // loading | ready | error
useEffect(() => {
let dead = false; setPhase("loading");
const sp = new URLSearchParams();
["symbol", "direction", "session", "outcome", "origin", "status", "account_id"].forEach((k) => { const v = getQuery().get(k); if (v) sp.set(k, v); });
const range = getQuery().get("range") || "30d";
const df = rangeToDateFrom(range); if (df) sp.set("date_from", df);
window.MTOS_API.get("/trades/summary?" + sp.toString())
.then((r) => { if (!dead) { setS(r.data); setPhase("ready"); } })
.catch(() => { if (!dead) setPhase("error"); });
return () => { dead = true; };
}, [qkey]);
if (phase === "error") return null;
if (phase === "loading" || !s) return
{[0, 1, 2, 3].map((i) =>
)}
{/* 1 · Net cumulative P&L */}
{t("trades.kpi.net")}
{fmtMoney(s.net_pnl_cents, s.currency)}
{t("trades.kpi.trade_count", { n: s.trades_closed })}
{/* 2 · Profit factor + donut */}
{/* 3 · Win % + half gauge + pills */}
{t("trades.kpi.winrate")}
{/* 4 · Avg win/loss + proportion bar */}
{t("trades.kpi.avgwl")}
{payoff == null ? "—" : fmtNum(payoff)}
{s.avg_win_cents == null ? "—" : fmtMoney(s.avg_win_cents, s.currency)}
{s.avg_loss_cents == null ? "—" : fmtMoney(s.avg_loss_cents, s.currency)}
{rows.map((tr) => openTrade(tr.trd_id)} />)}
;
const listDesktop =
| {t("trades.col_symbol")} | {t("trades.col_direction")} | {t("trades.col_lots")} |
{t("trades.col_pnl")} | {t("trades.col_r")} | {t("trades.col_time")} |
{rows.map((tr) => openTrade(tr.trd_id)}>
| {tr.symbol}{tr.is_partial && } |
|
{tr.lots.toFixed(2)} |
{tr.status === "open" ? {t("trades.status_open")} : } |
{fmtR(tr.r_multiple)} |
{fmtTime(tr.closed_at || tr.opened_at)} |
)}
{/* FilterBar sticky */}
{Object.keys(dims).map((dk) => patchQuery({ [dk]: v, cursor: null })} />)}
{/* KPI strip — สะท้อน filter slice (ซ่อนตอน error / locked / ยังไม่มีไม้เลย) */}
{(phase === "ready" || phase === "loading" || phase === "empty_filter") &&
}
{phase === "loading" &&
}
{phase === "error" &&
load(null)} />}
{phase === "empty_none" && patchQuery({ quickadd: "1" })} />}
{phase === "empty_filter" && patchQuery({ symbol: null, direction: null, session: null, outcome: null, origin: null, cursor: null })} />}
{phase === "locked" &&
{t("trades.sample_hint")}
{rows.map((tr) => {}} />)}
}
{phase === "ready" &&
{meta ? t("trades.result_summary", { count: meta.result_count, accounts: meta.account_count }) : ""}
{meta && meta.excluded_null_r > 0 &&
⚠ {t("trades.excluded_notice", { n: meta.excluded_null_r })}
}
{listMobile}
{listDesktop}
{loadingMore ? t("trades.loading_more") : meta && meta.next_cursor ? : t("trades.end_of_list")}
}
setSheetOpen(false)} dims={dims} q={{ symbol: q.get("symbol"), direction: q.get("direction"), session: q.get("session"), outcome: q.get("outcome"), origin: q.get("origin"), sort: q.get("sort") }} />
;
}
function rangeToDateFrom(range) {
if (!range || range === "all") return null;
const days = range === "7d" ? 7 : range === "90d" ? 90 : 30;
const now = new Date();
const base = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()));
base.setUTCDate(base.getUTCDate() - days);
return base.toISOString().slice(0, 10);
}
/* querystring กลางสำหรับ analytics calls — แนบ account_id + date range จาก URL (P0-3) */
function analyticsQS(acct, range) {
const sp = new URLSearchParams();
if (acct) sp.set("account_id", acct);
const df = rangeToDateFrom(range); if (df) sp.set("date_from", df);
const qs = sp.toString();
return qs ? "?" + qs : "";
}
/* ===========================================================================
Wave 2: TradeDetailPage — header + EmotionPicker + TradeNoteBox + TagPicker + legs + AI placeholder
=========================================================================== */
function TradeDetailPage({ t, id, toast }) {
const [phase, setPhase] = useState("loading"); // loading|ready|notfound|error
const [tr, setTr] = useState(null);
const [journal, setJournal] = useState({ emotion: null, tag_ids: [], note: { body: "" } });
const [tagOptions, setTagOptions] = useState([]);
useEffect(() => {
let dead = false; setPhase("loading");
window.MTOS_API.get("/trades/" + id).then((r) => {
if (dead) return; setTr(r.data); setJournal(r.data.journal || { emotion: null, tag_ids: [], note: { body: "" } }); setPhase("ready");
}).catch((e) => { if (dead) return; setPhase(e.status === 404 ? "notfound" : "error"); });
window.MTOS_API.get("/tags").then((r) => { if (!dead) setTagOptions(r.data); }).catch(() => {});
return () => { dead = true; };
}, [id]);
const curEmotion = journal && journal.emotion ? journal.emotion.emotion : null;
const setEmotion = (k) => {
const prev = journal.emotion;
setJournal((j) => Object.assign({}, j, { emotion: k ? { emotion: k } : null })); // optimistic
window.MTOS_API.put("/trades/" + id + "/journal", { emotion: k }).catch(() => { setJournal((j) => Object.assign({}, j, { emotion: prev })); toast(t("states.error_title")); });
};
const toggleTag = (tid) => {
const cur = journal.tag_ids || [];
const next = cur.indexOf(tid) >= 0 ? cur.filter((x) => x !== tid) : cur.concat([tid]);
setJournal((j) => Object.assign({}, j, { tag_ids: next }));
window.MTOS_API.put("/trades/" + id + "/journal", { tag_ids: next }).catch(() => {});
};
const createTag = (name) => {
window.MTOS_API.post("/tags", { name: name }).then((r) => { setTagOptions((o) => o.concat([r.data])); toggleTag(r.data.public_id); }).catch(() => {});
};
if (phase === "loading") return ;
if (phase === "error") return navigate("/app/trades/" + id)} />;
if (phase === "notfound") return
404
{t("journal.not_found_title")}
{t("journal.not_found_body")}
;
const isOpen = tr.status === "open";
const header =
{tr.symbol}
{tr.is_partial &&
}
{isOpen &&
{t("trades.status_open")}}
{tr.lots.toFixed(2)} lot · {t("session." + tr.session)}
{isOpen ? "—" : }
{fmtR(tr.r_multiple)}{tr.r_multiple === null && !isOpen ? " · " + t("journal.r_null_hint") : ""}
;
const legs =
{t("journal.legs_title")}
{(tr.legs || []).map((lg, i) =>
{lg.kind === "entry" ? t("journal.leg_entry") : t("journal.leg_exit")}
{lg.price} · {lg.lots.toFixed(2)} lot
{fmtTime(lg.at)}
)}
{tr.sl_price &&
{t("journal.f_sl")}: {tr.sl_price}
}
;
const ai =
✦
{t("journal.ai_title")}
{t("journal.ai_coming_soon")}
;
return
{header}
{t("journal.emotion_title")}
{t("journal.emotion_hint")}
{legs}
{ai}
;
}
/* ===========================================================================
Wave 2: QuickAddSheet — ≤6 field · validation ไทย · หลังบันทึก → EmotionPicker ต่อ (ปิด loop)
=========================================================================== */
function QuickAddSheet({ t, toast, onClose, onCreated }) {
const [step, setStep] = useState("form"); // form | emotion
const [newId, setNewId] = useState(null);
const [emotion, setEmotionSel] = useState(null);
const [f, setF] = useState({ symbol: "", direction: "long", lots: "", entry_price: "", entry_at: "", exit_price: "", exit_at: "", sl_price: "" });
const [stillOpen, setStillOpen] = useState(false);
const [err, setErr] = useState({});
const [sug, setSug] = useState([]);
const set = (k, v) => setF((o) => Object.assign({}, o, { [k]: v }));
useEffect(() => {
if (!f.symbol) { setSug([]); return; }
let dead = false;
window.MTOS_API.get("/symbols?q=" + encodeURIComponent(f.symbol)).then((r) => { if (!dead) setSug((r.data || []).filter((s) => s !== f.symbol.toUpperCase()).slice(0, 6)); }).catch(() => {});
return () => { dead = true; };
}, [f.symbol]);
const validate = () => {
const e = {};
if (!f.symbol.trim()) e.symbol = t("quickadd.err_symbol");
if (!(parseFloat(f.lots) > 0)) e.lots = t("quickadd.err_lots");
if (!(parseFloat(f.entry_price) > 0)) e.entry_price = t("quickadd.err_entry_price");
if (!f.entry_at) e.entry_at = t("quickadd.err_entry_time");
if (!stillOpen && !(parseFloat(f.exit_price) > 0)) e.exit_price = t("quickadd.err_exit_price");
setErr(e); return Object.keys(e).length === 0;
};
const save = () => {
if (!validate()) return;
const body = { symbol: f.symbol.toUpperCase(), direction: f.direction, lots: f.lots, entry_price: f.entry_price, entry_at: toIso(f.entry_at), sl_price: f.sl_price };
if (!stillOpen) { body.exit_price = f.exit_price; body.exit_at = toIso(f.exit_at); }
window.MTOS_API.post("/manual-entries", body).then((r) => {
setNewId(r.data.trd_id); if (onCreated) onCreated(r.data.trd_id);
toast(t("quickadd.saved_toast")); setStep("emotion");
}).catch(() => toast(t("states.error_title")));
};
const pickEmotion = (k) => { setEmotionSel(k); if (newId) window.MTOS_API.put("/trades/" + newId + "/journal", { emotion: k }).catch(() => {}); };
const field = (label, node, e) =>
{node}
{e &&
{e}
}
;
if (step === "emotion") return
{t("quickadd.emotion_step_title")}
{t("quickadd.emotion_step_hint")}
;
return
{field(t("quickadd.f_symbol"),
set("symbol", e.target.value)} placeholder={t("quickadd.f_symbol_ph")} autoComplete="off" />
{sug.length > 0 &&
{sug.map((s) => )}
}
, err.symbol)}
{field(t("quickadd.f_direction"),
{[["long", t("quickadd.buy")], ["short", t("quickadd.sell")]].map(([v, lbl]) => )}
)}
{field(t("quickadd.f_lots"),
set("lots", e.target.value)} placeholder="0.50" />, err.lots)}
{!stillOpen &&
}
{field(t("quickadd.f_sl"),
)}
โหลดข้อความไม่สำเร็จ
;
if (!cat) return …
;
const pathname = window.location.pathname;
const route = matchRoute(pathname);
// landing (public) — มี session แล้วเข้า "/" → เด้งเข้าแอป
if (route.name === "landing") {
if (authed) { navigate("/app", true); return null; }
return ;
}
// public routes
if (route.name === "login" || route.name === "register") {
return
setToastMsg(null)} />
;
}
// SessionGuard
if (!authed) { navigate("/login?next=" + encodeURIComponent(pathname + window.location.search), true); return null; }
// onboarding = full-screen (นอก AppShell)
if (route.name === "onboarding") {
return
setToastMsg(null)} />
;
}
const qaOpen = getQuery().get("quickadd") === "1";
const closeQa = () => patchQuery({ quickadd: null });
let page;
if (route.name === "dashboard") page = ;
else if (route.name === "calendar") page = ;
else if (route.name === "trades") page = ;
else if (route.name === "trade_detail") page = ;
else if (route.name === "connect") page = ;
else if (route.name === "import") page = ;
else if (route.name === "insights") page = ;
else if (route.name === "unlock") page = ;
else if (route.name === "settings") page = ;
else if (route.name === "not_found") page = ;
else page = ;
return
patchQuery({ quickadd: "1" })}>
{page}
{qaOpen && setListRev((r) => r + 1)} />}
setToastMsg(null)} />
;
}
/* render ย้ายไป pages-w3.jsx (โหลดหลัง app.jsx) — เพื่อให้ W3 page components พร้อมก่อน render แรก */