2569718930@qq.com
955 lines
38 KiB
TypeScript
955 lines
38 KiB
TypeScript
"use client";
|
|
|
|
import clsx from "clsx";
|
|
import Link from "next/link";
|
|
import {
|
|
Activity,
|
|
BarChart3,
|
|
Bell,
|
|
ChevronDown,
|
|
ChevronRight,
|
|
CloudSun,
|
|
CreditCard,
|
|
Gauge,
|
|
LineChart,
|
|
LockKeyhole,
|
|
LogIn,
|
|
Menu,
|
|
RefreshCw,
|
|
Search,
|
|
Table2,
|
|
UserRound,
|
|
} from "lucide-react";
|
|
import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import {
|
|
Area,
|
|
AreaChart,
|
|
Bar,
|
|
BarChart as ReBarChart,
|
|
CartesianGrid,
|
|
Line,
|
|
LineChart as ReLineChart,
|
|
ReferenceLine,
|
|
ResponsiveContainer,
|
|
Tooltip,
|
|
XAxis,
|
|
YAxis,
|
|
} from "recharts";
|
|
import type { ProAccessState, ScanOpportunityRow } from "@/lib/dashboard-types";
|
|
import { getInitialLocaleFromNavigator } from "@/lib/i18n";
|
|
import { isBrowserLocalFullAccess } from "@/lib/local-dev-access";
|
|
import { sortRowsByUserTime } from "@/components/dashboard/scan-terminal/decision-utils";
|
|
import { ProductAccessRequired } from "@/components/dashboard/scan-terminal/ProductAccessRequired";
|
|
import {
|
|
type ContinentGroup,
|
|
buildContinentGroups,
|
|
formatPrice,
|
|
formatSpreadLiquidity,
|
|
GAP_COLOR_MAP,
|
|
getDefaultExpanded,
|
|
getGapColor,
|
|
getSignalLabel,
|
|
getSignalState,
|
|
} from "@/components/dashboard/scan-terminal/continent-grouping";
|
|
import { MobileCityCard } from "@/components/dashboard/scan-terminal/MobileCityCard";
|
|
import { MobileRegionTabs } from "@/components/dashboard/scan-terminal/MobileRegionTabs";
|
|
import { useScanTerminalQuery } from "@/components/dashboard/scan-terminal/use-scan-terminal-query";
|
|
import {
|
|
useScanTerminalTheme,
|
|
useUserLocalClock,
|
|
} from "@/components/dashboard/scan-terminal/use-scan-terminal-ui-state";
|
|
import { ScanTerminalLoadingScreen } from "@/components/dashboard/scan-terminal/ScanTerminalShellParts";
|
|
import { scanRootClass } from "@/components/dashboard/scan-root-styles";
|
|
import { useRelativeTime } from "@/hooks/useRelativeTime";
|
|
import { Panel } from "@/components/dashboard/scan-terminal/Panel";
|
|
import { GroupedMarketTable } from "@/components/dashboard/scan-terminal/GroupedMarketTable";
|
|
import { RunwayMeteorologyPanel } from "@/components/dashboard/scan-terminal/RunwayMeteorologyPanel";
|
|
import { rowName, pct, money, temp, edgeClass } from "@/components/dashboard/scan-terminal/utils";
|
|
|
|
function createEmptyAccess(loading = true): ProAccessState {
|
|
return {
|
|
loading,
|
|
authenticated: false,
|
|
userId: null,
|
|
subscriptionActive: false,
|
|
subscriptionPlanCode: null,
|
|
subscriptionExpiresAt: null,
|
|
subscriptionTotalExpiresAt: null,
|
|
subscriptionQueuedDays: 0,
|
|
points: 0,
|
|
error: null,
|
|
};
|
|
}
|
|
|
|
function createLocalAccess(): ProAccessState {
|
|
return {
|
|
loading: false,
|
|
authenticated: true,
|
|
userId: "local-dev",
|
|
subscriptionActive: true,
|
|
subscriptionPlanCode: "local-full-access",
|
|
subscriptionExpiresAt: "2099-12-31T23:59:59Z",
|
|
subscriptionTotalExpiresAt: "2099-12-31T23:59:59Z",
|
|
subscriptionQueuedDays: 0,
|
|
points: 999_999,
|
|
error: null,
|
|
};
|
|
}
|
|
|
|
|
|
|
|
const TERM = {
|
|
cityContract: { en: "City / Contract", zh: "城市 / 合约" },
|
|
live: { en: "Live", zh: "实测" },
|
|
deb: { en: "DEB", zh: "DEB" },
|
|
mkt: { en: "Mkt", zh: "市场" },
|
|
edge: { en: "Edge", zh: "优势" },
|
|
liq: { en: "Liq", zh: "流动性" },
|
|
signal: { en: "Signal", zh: "信号" },
|
|
searchPlaceholder: { en: "Search city, contract, station, or signal", zh: "搜索城市、合约、站点或信号" },
|
|
weatherContracts: { en: "Weather Contracts", zh: "天气合约" },
|
|
approvedSignals: { en: "Approved Signals", zh: "已确认信号" },
|
|
selectedContractMonitor: { en: "Selected Contract Monitor", zh: "选中合约监控" },
|
|
probabilityDistribution: { en: "Probability Distribution", zh: "概率分布" },
|
|
marketList: { en: "Market List", zh: "市场列表" },
|
|
watchlist: { en: "Watchlist", zh: "观察列表" },
|
|
rows: { en: "Rows", zh: "行数" },
|
|
avgEdge: { en: "Avg Edge", zh: "平均优势" },
|
|
liquidity: { en: "Liquidity", zh: "流动性" },
|
|
intradayPerformance: { en: "Intraday Performance", zh: "日内表现" },
|
|
spread: { en: "Spread", zh: "价差" },
|
|
model: { en: "Model", zh: "模型" },
|
|
noData: { en: "No data", zh: "无数据" },
|
|
noDistributionData: { en: "No distribution data", zh: "无分布数据" },
|
|
selectContract: {
|
|
en: "Select a weather contract to inspect model edge, market price, and live evidence.",
|
|
zh: "选择天气合约以查看模型优势、市场价格和实况证据。",
|
|
},
|
|
signInToContinue: { en: "Sign in to continue", zh: "请先登录" },
|
|
signInHint: {
|
|
en: "The terminal is only available to registered users. Please sign in or create an account.",
|
|
zh: "决策台仅对注册用户开放。请登录或创建账号。",
|
|
},
|
|
logIn: { en: "Log in", zh: "登录" },
|
|
createAccount: { en: "Create an account", zh: "注册账号" },
|
|
learnAbout: { en: "Learn about PolyWeather", zh: "了解 PolyWeather" },
|
|
proAccessRequired: { en: "Pro Access Required", zh: "需要付费订阅" },
|
|
proDesc: {
|
|
en: "The PolyWeather terminal is a paid product. Subscribe to unlock real-time weather-market intelligence.",
|
|
zh: "PolyWeather 决策台为付费产品。订阅以解锁实时天气市场情报。",
|
|
},
|
|
subscriptionTerms: {
|
|
en: "Billed monthly. Cancel anytime. Payment via USDC on Polygon.",
|
|
zh: "按月计费，随时可取消。通过 Polygon 链 USDC 支付。",
|
|
},
|
|
month: { en: "/ month", zh: "/ 月" },
|
|
subscribeNow: { en: "Subscribe Now — $10/mo", zh: "立即订阅 — $10/月" },
|
|
subscribePrompt: {
|
|
en: "You need an active subscription to access the terminal.",
|
|
zh: "你需要开通有效订阅才能访问决策台。",
|
|
},
|
|
backToProduct: { en: "Back to product overview", zh: "返回产品介绍页" },
|
|
dashboard: { en: "PolyWeather Terminal", zh: "PolyWeather 交易决策台" },
|
|
refresh: { en: "Refresh", zh: "刷新" },
|
|
switchLang: { en: "Switch to Chinese", zh: "切换到英文" },
|
|
globalWeatherFactors: { en: "Global Weather Factors", zh: "全球天气因子" },
|
|
heat: { en: "Heat", zh: "高温风险" },
|
|
active: { en: "Active", zh: "活跃" },
|
|
watch: { en: "Watch", zh: "观察" },
|
|
tradable: { en: "Tradable", zh: "可交易" },
|
|
primary: { en: "Primary", zh: "主信号" },
|
|
ai: { en: "AI", zh: "AI" },
|
|
closed: { en: "Closed", zh: "已关闭" },
|
|
terminalStatus: { en: "Terminal Status", zh: "终端状态" },
|
|
tsData: { en: "Data", zh: "数据" },
|
|
tsAccess: { en: "Access", zh: "访问权限" },
|
|
tsLayout: { en: "Layout", zh: "布局" },
|
|
tsLayoutValue: { en: "Multi-panel grid", zh: "多面板网格" },
|
|
tsDataLive: { en: "live", zh: "实时" },
|
|
tsAccessPaid: { en: "paid", zh: "付费" },
|
|
} as const;
|
|
|
|
function t(key: keyof typeof TERM, isEn: boolean) {
|
|
return isEn ? TERM[key].en : TERM[key].zh;
|
|
}
|
|
|
|
function decisionLabel(row?: ScanOpportunityRow | null) {
|
|
const raw =
|
|
row?.ai_decision ||
|
|
row?.v4_metar_decision ||
|
|
row?.action ||
|
|
row?.signal_status ||
|
|
"";
|
|
const value = String(raw || "").toLowerCase();
|
|
if (value.includes("approve")) return "Approve";
|
|
if (value.includes("veto")) return "Veto";
|
|
if (value.includes("watch")) return "Watch";
|
|
if (value.includes("downgrade")) return "Downgrade";
|
|
if (row?.tradable) return "Tradable";
|
|
return "Monitor";
|
|
}
|
|
|
|
function decisionClass(label: string) {
|
|
const l = label.toLowerCase();
|
|
if (l.includes("approve") || l.includes("active") || l.includes("活跃")) {
|
|
return "bg-emerald-50 border-emerald-200 text-emerald-700";
|
|
}
|
|
if (l.includes("watch") || l.includes("观察") || l.includes("monitor")) {
|
|
return "bg-amber-50 border-amber-200 text-amber-700";
|
|
}
|
|
if (l.includes("veto") || l.includes("downgrade") || l.includes("closed") || l.includes("关闭")) {
|
|
return "bg-slate-50 border-slate-200 text-slate-500";
|
|
}
|
|
return "bg-blue-50 border-blue-200 text-blue-700";
|
|
}
|
|
|
|
|
|
function SparkArea({
|
|
color = "#2563eb",
|
|
data,
|
|
isEn = true,
|
|
}: {
|
|
color?: string;
|
|
data: { v: number }[];
|
|
isEn?: boolean;
|
|
}) {
|
|
if (!data.length) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center text-xs text-slate-400">
|
|
{t("noData", isEn)}
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<AreaChart data={data} margin={{ top: 2, right: 0, left: 0, bottom: 2 }}>
|
|
<defs>
|
|
<linearGradient id={`fill-${color}`} x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stopColor={color} stopOpacity={0.18} />
|
|
<stop offset="100%" stopColor={color} stopOpacity={0.02} />
|
|
</linearGradient>
|
|
</defs>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="v"
|
|
stroke={color}
|
|
strokeWidth={2}
|
|
fill={`url(#fill-${color})`}
|
|
dot={false}
|
|
isAnimationActive={false}
|
|
/>
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|
|
|
|
function ProbabilityDistributionChart({
|
|
points,
|
|
isEn = true,
|
|
}: {
|
|
points?: ScanOpportunityRow["distribution_preview"];
|
|
isEn?: boolean;
|
|
}) {
|
|
if (!points?.length) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center text-xs text-slate-400">
|
|
{t("noDistributionData", isEn)}
|
|
</div>
|
|
);
|
|
}
|
|
const chartData = points.map((p) => ({
|
|
label: p.label || "",
|
|
model: Number((p.model_probability ?? 0) * 100),
|
|
market: Number((p.market_probability ?? 0) * 100),
|
|
}));
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<ReBarChart data={chartData} margin={{ top: 4, right: 4, left: 0, bottom: 4 }}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
|
|
<XAxis
|
|
dataKey="label"
|
|
tick={{ fontSize: 11, fill: "#64748b" }}
|
|
axisLine={{ stroke: "#e2e8f0" }}
|
|
tickLine={false}
|
|
/>
|
|
<YAxis
|
|
tick={{ fontSize: 11, fill: "#64748b" }}
|
|
axisLine={false}
|
|
tickLine={false}
|
|
tickFormatter={(v) => `${v}%`}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
borderRadius: 4,
|
|
border: "1px solid #e2e8f0",
|
|
fontSize: 12,
|
|
fontFamily: "monospace",
|
|
}}
|
|
formatter={(value: unknown) =>
|
|
`${Number(value).toFixed(1)}%`
|
|
}
|
|
/>
|
|
<Bar dataKey="model" fill="#2563eb" radius={[2, 2, 0, 0]} name={t("model", isEn)} />
|
|
<Bar dataKey="market" fill="#059669" radius={[2, 2, 0, 0]} name={t("mkt", isEn)} />
|
|
</ReBarChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|
|
|
|
function PolyWeatherTerminal({
|
|
generatedText,
|
|
isEn,
|
|
locale,
|
|
onRefresh,
|
|
refreshing,
|
|
rows,
|
|
selectedRow,
|
|
setSelectedRow,
|
|
toggleLocale,
|
|
userLocalTime,
|
|
searchQuery,
|
|
setSearchQuery,
|
|
searchInputRef,
|
|
}: {
|
|
generatedText: string;
|
|
isEn: boolean;
|
|
locale: "zh-CN" | "en-US";
|
|
onRefresh: () => void;
|
|
refreshing: boolean;
|
|
rows: ScanOpportunityRow[];
|
|
selectedRow: ScanOpportunityRow | null;
|
|
setSelectedRow: (row: ScanOpportunityRow) => void;
|
|
toggleLocale: () => void;
|
|
userLocalTime: string;
|
|
searchQuery: string;
|
|
setSearchQuery: (val: string) => void;
|
|
searchInputRef: React.RefObject<HTMLInputElement | null>;
|
|
}) {
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
const activeEl = document.activeElement;
|
|
const isInputFocused =
|
|
activeEl &&
|
|
(activeEl.tagName === "INPUT" ||
|
|
activeEl.tagName === "TEXTAREA" ||
|
|
(activeEl instanceof HTMLElement && activeEl.isContentEditable));
|
|
if (e.key === "/" && !isInputFocused) {
|
|
e.preventDefault();
|
|
searchInputRef.current?.focus();
|
|
searchInputRef.current?.select();
|
|
}
|
|
if (e.key === "Escape" && activeEl === searchInputRef.current) {
|
|
setSearchQuery("");
|
|
searchInputRef.current?.blur();
|
|
}
|
|
};
|
|
window.addEventListener("keydown", handleKeyDown);
|
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
}, [searchInputRef, setSearchQuery]);
|
|
const approveRows = rows
|
|
.filter((row) => ["Approve", "Tradable"].includes(decisionLabel(row)))
|
|
.slice(0, 8);
|
|
const watchRows = rows
|
|
.filter((row) => decisionLabel(row) === "Watch" || !row.tradable)
|
|
.slice(0, 8);
|
|
const selectedSignal = selectedRow ? getSignalState(selectedRow) : "data" as const;
|
|
const selectedLabel = selectedRow ? getSignalLabel(selectedSignal, isEn) : "";
|
|
const continentGroups = useMemo(
|
|
() => buildContinentGroups(rows, isEn),
|
|
[rows, isEn]
|
|
);
|
|
const [mobileTab, setMobileTab] = useState<string>("active_signals");
|
|
const mobileActiveGroup = useMemo(
|
|
() => continentGroups.find((g) => g.key === mobileTab) || continentGroups[0],
|
|
[continentGroups, mobileTab]
|
|
);
|
|
useEffect(() => {
|
|
if (continentGroups.length > 0 && !continentGroups.find((g) => g.key === mobileTab)) {
|
|
setMobileTab(continentGroups[0].key);
|
|
}
|
|
}, [continentGroups, mobileTab]);
|
|
const avgEdge =
|
|
rows.reduce((sum, row) => sum + Number(row.edge_percent || 0), 0) /
|
|
Math.max(rows.length, 1);
|
|
const totalLiquidity = rows.reduce(
|
|
(sum, row) =>
|
|
sum + Number(row.book_liquidity || row.market_liquidity || row.volume || 0),
|
|
0,
|
|
);
|
|
|
|
return (
|
|
<div className="flex h-screen w-full overflow-hidden bg-[#e9edf3] text-[#202833]">
|
|
<aside className="flex w-[52px] shrink-0 flex-col items-center gap-2 bg-[#11161d] py-3 text-slate-400">
|
|
<Link
|
|
href="/"
|
|
className="mb-2 block h-7 w-7 overflow-hidden rounded transition hover:opacity-90"
|
|
title="PolyWeather"
|
|
>
|
|
<img src="/apple-touch-icon.png" alt="PolyWeather" className="h-full w-full object-cover" />
|
|
</Link>
|
|
<Menu size={20} className="mb-2 hover:text-white cursor-pointer" />
|
|
{[CloudSun, Table2, BarChart3, LineChart, Gauge, Bell].map((Icon, i) => (
|
|
<button
|
|
key={i}
|
|
className={clsx(
|
|
"grid h-9 w-full place-items-center border-l-4 transition-colors",
|
|
i === 0
|
|
? "border-blue-500 bg-white/5 text-white"
|
|
: "border-transparent hover:bg-white/5 hover:text-white",
|
|
)}
|
|
type="button"
|
|
>
|
|
<Icon size={16} />
|
|
</button>
|
|
))}
|
|
</aside>
|
|
|
|
<div className="flex min-w-0 flex-1 flex-col">
|
|
<header className="flex h-12 shrink-0 items-center justify-between bg-[#11161d] border-b border-[#242f3d] px-4 text-white">
|
|
<div className="flex min-w-0 items-center gap-4">
|
|
<div className="flex h-8 min-w-[320px] items-center gap-2 rounded border border-[#2d3846] bg-[#1e2630] px-2.5 text-slate-300">
|
|
<Search size={14} className="text-slate-400" />
|
|
<input
|
|
ref={searchInputRef}
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
placeholder={t("searchPlaceholder", isEn)}
|
|
className="w-full bg-transparent text-xs font-semibold text-white placeholder-slate-500 outline-none"
|
|
/>
|
|
{searchQuery && (
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setSearchQuery("");
|
|
searchInputRef.current?.focus();
|
|
}}
|
|
className="text-slate-400 hover:text-white text-xs"
|
|
>
|
|
✕
|
|
</button>
|
|
)}
|
|
<kbd className="ml-auto rounded border border-slate-600 bg-[#2a3543] px-1.5 py-0.5 text-[9px] font-mono text-slate-400">
|
|
/
|
|
</kbd>
|
|
</div>
|
|
<div className="hidden items-center gap-1.5 text-[10px] font-bold uppercase text-slate-500 lg:flex tracking-wider">
|
|
<Activity size={13} />
|
|
{t("dashboard", isEn)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3 text-xs text-slate-400">
|
|
<span className="hidden font-mono md:inline text-slate-500">{userLocalTime}</span>
|
|
{/* Language toggle — matches landing page style */}
|
|
<button
|
|
type="button"
|
|
aria-label={t("switchLang", isEn)}
|
|
title={t("switchLang", isEn)}
|
|
onClick={toggleLocale}
|
|
className="inline-flex h-7 items-center gap-0.5 rounded border border-slate-700 bg-[#1e2630] p-0.5 text-[10px] font-bold text-slate-400 hover:border-slate-400"
|
|
>
|
|
<span
|
|
className={clsx(
|
|
"rounded px-1.5 py-0.5 transition-colors",
|
|
locale === "zh-CN"
|
|
? "bg-blue-600 text-white"
|
|
: "hover:text-slate-200",
|
|
)}
|
|
>
|
|
中文
|
|
</span>
|
|
<span
|
|
className={clsx(
|
|
"rounded px-1.5 py-0.5 transition-colors",
|
|
locale === "en-US"
|
|
? "bg-blue-600 text-white"
|
|
: "hover:text-slate-200",
|
|
)}
|
|
>
|
|
EN
|
|
</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onRefresh}
|
|
disabled={refreshing}
|
|
className="inline-flex h-7 items-center gap-1.5 rounded border border-slate-700 bg-[#1e2630] px-2.5 font-bold hover:bg-[#29323d] text-slate-300 disabled:opacity-60 transition-colors"
|
|
>
|
|
<RefreshCw size={12} className={refreshing ? "animate-spin" : ""} />
|
|
{t("refresh", isEn)}
|
|
</button>
|
|
<Link
|
|
href="/account"
|
|
className="grid h-7 w-7 place-items-center rounded-full bg-slate-700 border border-slate-600 text-slate-200 hover:bg-slate-600 hover:text-white transition-colors"
|
|
title="User Account"
|
|
>
|
|
<UserRound size={13} />
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="min-h-0 flex-1 overflow-hidden flex flex-col p-2 bg-[#eef2f6]">
|
|
{/* Mobile layout */}
|
|
<div className="flex flex-col gap-2 lg:hidden overflow-auto flex-1 pb-6">
|
|
<MobileRegionTabs
|
|
activeTab={mobileTab}
|
|
groups={continentGroups}
|
|
isEn={isEn}
|
|
onSelectTab={setMobileTab}
|
|
/>
|
|
<div className="space-y-2 px-1">
|
|
{mobileActiveGroup?.rows.map((row) => (
|
|
<MobileCityCard
|
|
key={row.id}
|
|
row={row}
|
|
isEn={isEn}
|
|
onClick={setSelectedRow}
|
|
/>
|
|
))}
|
|
</div>
|
|
{/* Mobile Selected Row Detail */}
|
|
{selectedRow && (
|
|
<div className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
|
|
<h3 className="text-sm font-black text-slate-900 mb-2">{rowName(selectedRow)}</h3>
|
|
<div className="grid grid-cols-2 gap-2 text-xs">
|
|
{[
|
|
["Obs", temp(selectedRow.current_temp, selectedRow.temp_symbol)],
|
|
["High", temp(selectedRow.current_max_so_far, selectedRow.temp_symbol)],
|
|
["DEB", temp(selectedRow.deb_prediction, selectedRow.temp_symbol)],
|
|
["Gap", temp(selectedRow.signed_gap ?? selectedRow.gap_to_target, selectedRow.temp_symbol)],
|
|
["Edge", pct(selectedRow.edge_percent)],
|
|
["Market", formatPrice(selectedRow.midpoint, selectedRow.ask, selectedRow.bid)],
|
|
].map(([label, value]) => (
|
|
<div key={label} className="rounded border border-slate-200 bg-slate-50 p-2">
|
|
<div className="text-[10px] font-black uppercase text-slate-500">{label}</div>
|
|
<div className="font-mono font-bold text-slate-900">{value}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Desktop layout */}
|
|
<div className="hidden lg:grid lg:grid-cols-[1.1fr_1.65fr_0.95fr] h-full gap-2 min-h-0">
|
|
{/* Column 1 */}
|
|
<div className="flex flex-col gap-2 min-h-0 h-full">
|
|
<Panel title={isEn ? "Weather Contracts" : "天气合约"}>
|
|
<div className="grid grid-cols-3 border-b border-slate-200 text-center bg-[#f8f9fa] shrink-0">
|
|
<div className="py-2 border-r border-slate-200">
|
|
<div className="text-[10px] font-bold uppercase text-slate-400">
|
|
{t("rows", isEn)}
|
|
</div>
|
|
<div className="font-mono text-base font-black text-slate-800">{rows.length}</div>
|
|
</div>
|
|
<div className="py-2 border-r border-slate-200">
|
|
<div className="text-[10px] font-bold uppercase text-slate-400">
|
|
{t("avgEdge", isEn)}
|
|
</div>
|
|
<div className={clsx("font-mono text-base font-black", edgeClass(avgEdge))}>
|
|
{pct(avgEdge)}
|
|
</div>
|
|
</div>
|
|
<div className="py-2">
|
|
<div className="text-[10px] font-bold uppercase text-slate-400">
|
|
{t("liquidity", isEn)}
|
|
</div>
|
|
<div className="font-mono text-base font-black text-slate-800">
|
|
{money(totalLiquidity)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 min-h-0 overflow-auto">
|
|
<GroupedMarketTable
|
|
groups={continentGroups}
|
|
isEn={isEn}
|
|
selectedId={selectedRow?.id}
|
|
onSelect={setSelectedRow}
|
|
/>
|
|
</div>
|
|
</Panel>
|
|
|
|
<Panel title={t("approvedSignals", isEn)} className="h-[210px] shrink-0">
|
|
<div className="divide-y divide-slate-100">
|
|
{(approveRows.length ? approveRows : rows.slice(0, 5)).map((row) => (
|
|
<button
|
|
key={row.id}
|
|
type="button"
|
|
onClick={() => setSelectedRow(row)}
|
|
className="grid w-full grid-cols-[1fr_auto] items-center gap-3 px-3 py-1.5 text-left hover:bg-slate-50 transition-colors"
|
|
>
|
|
<span>
|
|
<b className="block text-xs font-bold text-slate-800">{rowName(row)}</b>
|
|
<small className="text-[10px] text-slate-400 block truncate max-w-[200px]">
|
|
{row.ai_reason_zh || row.ai_city_thesis_zh || row.target_label || "--"}
|
|
</small>
|
|
</span>
|
|
<span className={clsx("font-mono text-xs font-bold", edgeClass(row.edge_percent))}>
|
|
{pct(row.edge_percent)}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</Panel>
|
|
</div>
|
|
|
|
{/* Column 2 */}
|
|
<div className="flex flex-col gap-2 min-h-0 h-full">
|
|
<Panel title={t("selectedContractMonitor", isEn)} className="shrink-0">
|
|
<div className="grid gap-4 p-3 lg:grid-cols-[1fr_200px]">
|
|
<div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<h1 className="text-lg font-black leading-tight text-slate-800">
|
|
{rowName(selectedRow)}
|
|
</h1>
|
|
<span
|
|
className={clsx(
|
|
"rounded border px-1.5 py-0.5 text-[10px] font-bold",
|
|
selectedSignal === "active" ? "border-emerald-200 bg-emerald-50 text-emerald-700" :
|
|
selectedSignal === "watch" ? "border-amber-200 bg-amber-50 text-amber-700" :
|
|
selectedSignal === "closed" ? "border-slate-200 bg-slate-50 text-slate-500" :
|
|
"border-red-200 bg-red-50 text-red-700",
|
|
)}
|
|
>
|
|
{selectedLabel}
|
|
</span>
|
|
</div>
|
|
<p className="mt-1.5 text-[11px] leading-relaxed text-slate-500">
|
|
{isEn
|
|
? selectedRow?.ai_city_thesis_en || selectedRow?.ai_reason_en || selectedRow?.market_question || t("selectContract", isEn)
|
|
: selectedRow?.ai_city_thesis_zh || selectedRow?.ai_reason_zh || selectedRow?.market_question || t("selectContract", isEn)}
|
|
</p>
|
|
<div className="mt-3 grid grid-cols-2 gap-1.5 md:grid-cols-4">
|
|
{[
|
|
[t("live", isEn), temp(selectedRow?.current_max_so_far ?? selectedRow?.current_temp, selectedRow?.temp_symbol)],
|
|
[t("deb", isEn), temp(selectedRow?.deb_prediction, selectedRow?.temp_symbol)],
|
|
[t("model", isEn), pct(selectedRow?.model_probability ?? selectedRow?.model_event_probability)],
|
|
[t("mkt", isEn), pct(selectedRow?.market_probability ?? selectedRow?.market_event_probability)],
|
|
].map(([label, value]) => (
|
|
<div key={String(label)} className="rounded border border-slate-200 bg-slate-50 px-2 py-1">
|
|
<div className="text-[9px] font-bold uppercase text-slate-400">
|
|
{label}
|
|
</div>
|
|
<div className="font-mono text-[13px] font-bold text-slate-800">{value}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="rounded border border-slate-200 bg-[#f8f9fa] p-2.5 flex flex-col justify-between">
|
|
<div>
|
|
<div className="mb-1 text-[9px] font-bold uppercase text-slate-400">
|
|
{t("intradayPerformance", isEn)}
|
|
</div>
|
|
<div className="h-12">
|
|
<SparkArea
|
|
isEn={isEn}
|
|
color={
|
|
Number(selectedRow?.edge_percent || 0) >= 0
|
|
? "#059669"
|
|
: "#dc2626"
|
|
}
|
|
data={
|
|
selectedRow?.distribution_preview?.map((p) => ({
|
|
v:
|
|
typeof p === "number"
|
|
? p
|
|
: p.model_probability ?? 0,
|
|
})) || []
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="mt-1.5 grid grid-cols-2 gap-1 text-[10px] font-bold">
|
|
<span className="rounded border border-slate-200 bg-white p-1 text-center">
|
|
{t("edge", isEn)} <b className={clsx("block font-mono", edgeClass(selectedRow?.edge_percent))}>{pct(selectedRow?.edge_percent)}</b>
|
|
</span>
|
|
<span className="rounded border border-slate-200 bg-white p-1 text-center text-slate-700">
|
|
{t("spread", isEn)} <b className="block font-mono">{pct(selectedRow?.spread)}</b>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
|
|
<Panel title={isEn ? "Runway Temperature Trend & Option Threshold Lines" : "实时气象走势与期权阈值线"} className="flex-1 min-h-0">
|
|
<RunwayMeteorologyPanel row={selectedRow} isEn={isEn} />
|
|
</Panel>
|
|
</div>
|
|
|
|
{/* Column 3 */}
|
|
<div className="flex flex-col gap-2 min-h-0 h-full">
|
|
<Panel title={t("watchlist", isEn)} className="flex-1 min-h-0">
|
|
<div className="divide-y divide-slate-100">
|
|
{(watchRows.length ? watchRows : rows.slice(0, 8)).map((row) => (
|
|
<button
|
|
key={row.id}
|
|
type="button"
|
|
onClick={() => setSelectedRow(row)}
|
|
className="grid w-full grid-cols-[1fr_auto] gap-3 px-3 py-1.5 text-left hover:bg-slate-50 transition-colors"
|
|
>
|
|
<span>
|
|
<b className="block text-xs font-bold text-slate-800">{rowName(row)}</b>
|
|
<small className="text-[10px] text-slate-400 block truncate max-w-[150px]">
|
|
{row.airport || row.trading_region_label || row.local_time || "--"}
|
|
</small>
|
|
</span>
|
|
<span className={clsx("font-mono text-xs font-bold", edgeClass(row.signed_gap ?? row.gap))}>
|
|
{pct(row.signed_gap ?? row.gap)}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</Panel>
|
|
|
|
<Panel title={t("globalWeatherFactors", isEn)} className="shrink-0">
|
|
<div className="grid grid-cols-3 gap-1.5 p-2 text-center">
|
|
{[
|
|
[t("heat", isEn), rows.filter((r) => r.risk_level === "high").length],
|
|
[t("active", isEn), rows.filter((r) => r.active).length],
|
|
[t("tradable", isEn), rows.filter((r) => r.tradable).length],
|
|
[t("primary", isEn), rows.filter((r) => r.is_primary_signal).length],
|
|
[t("ai", isEn), rows.filter((r) => r.ai_decision).length],
|
|
[t("closed", isEn), rows.filter((r) => r.closed).length],
|
|
].map(([label, value]) => (
|
|
<div key={String(label)} className="rounded border border-slate-200 bg-slate-50 p-1.5">
|
|
<div className="font-mono text-sm font-bold text-slate-800">{value}</div>
|
|
<div className="text-[9px] font-bold uppercase text-slate-400 truncate">
|
|
{label}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Panel>
|
|
|
|
<Panel title={t("terminalStatus", isEn)} className="shrink-0">
|
|
<div className="space-y-1.5 p-2 text-[11px]">
|
|
<div className="flex items-center justify-between rounded border border-slate-200 bg-slate-50 px-2.5 py-1.5">
|
|
<span className="font-bold text-slate-500">{t("tsData", isEn)}</span>
|
|
<span className="font-mono text-emerald-700 font-bold">
|
|
{generatedText || t("tsDataLive", isEn)}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between rounded border border-slate-200 bg-slate-50 px-2.5 py-1.5">
|
|
<span className="font-bold text-slate-500">{t("tsAccess", isEn)}</span>
|
|
<span className="font-mono text-blue-700 font-bold">{t("tsAccessPaid", isEn)}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between rounded border border-slate-200 bg-slate-50 px-2.5 py-1.5">
|
|
<span className="font-bold text-slate-500">{t("tsLayout", isEn)}</span>
|
|
<span className="font-mono text-slate-700 font-medium">{t("tsLayoutValue", isEn)}</span>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|
|
|
|
function ScanTerminalScreen() {
|
|
const [proAccess, setProAccess] = useState<ProAccessState>(() =>
|
|
createEmptyAccess(true),
|
|
);
|
|
const [locale, setLocale] = useState<"zh-CN" | "en-US">("zh-CN");
|
|
const isEn = locale === "en-US";
|
|
const toggleLocale = () =>
|
|
setLocale((prev) => (prev === "zh-CN" ? "en-US" : "zh-CN"));
|
|
const [hydrated, setHydrated] = useState(false);
|
|
const [localFullAccess, setLocalFullAccess] = useState(false);
|
|
const canUseLocalFullAccess = hydrated && localFullAccess;
|
|
const isAuthenticated =
|
|
hydrated && (proAccess.authenticated || canUseLocalFullAccess);
|
|
const isPro =
|
|
hydrated && (proAccess.subscriptionActive || canUseLocalFullAccess);
|
|
const userLocalTime = useUserLocalClock();
|
|
const { themeMode } = useScanTerminalTheme();
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
setHydrated(true);
|
|
setLocale(getInitialLocaleFromNavigator());
|
|
const localAccess = isBrowserLocalFullAccess();
|
|
setLocalFullAccess(localAccess);
|
|
if (localAccess) {
|
|
setProAccess(createLocalAccess());
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}
|
|
if (typeof fetch !== "function") {
|
|
setProAccess(createEmptyAccess(false));
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}
|
|
fetch("/api/auth/me", {
|
|
cache: "no-store",
|
|
headers: { Accept: "application/json" },
|
|
})
|
|
.then(async (response) => {
|
|
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
|
return response.json() as Promise<{
|
|
authenticated?: boolean;
|
|
user_id?: string | null;
|
|
subscription_active?: boolean | null;
|
|
subscription_plan_code?: string | null;
|
|
subscription_expires_at?: string | null;
|
|
subscription_total_expires_at?: string | null;
|
|
subscription_queued_days?: number | null;
|
|
points?: number | null;
|
|
}>;
|
|
})
|
|
.then((payload) => {
|
|
if (cancelled) return;
|
|
setProAccess({
|
|
loading: false,
|
|
authenticated: Boolean(payload.authenticated),
|
|
userId: payload.user_id ?? null,
|
|
subscriptionActive: payload.subscription_active === true,
|
|
subscriptionPlanCode: payload.subscription_plan_code ?? null,
|
|
subscriptionExpiresAt: payload.subscription_expires_at ?? null,
|
|
subscriptionTotalExpiresAt:
|
|
payload.subscription_total_expires_at ??
|
|
payload.subscription_expires_at ??
|
|
null,
|
|
subscriptionQueuedDays: Math.max(
|
|
0,
|
|
Number(payload.subscription_queued_days ?? 0),
|
|
),
|
|
points: Number(payload.points ?? 0),
|
|
error: null,
|
|
});
|
|
})
|
|
.catch((error) => {
|
|
if (cancelled) return;
|
|
setProAccess({
|
|
...createEmptyAccess(false),
|
|
error: String(error),
|
|
});
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, []);
|
|
|
|
const { refreshScanTerminalManually, scanLoading, terminalData } =
|
|
useScanTerminalQuery({
|
|
isPro,
|
|
proAccessLoading: !hydrated || (proAccess.loading && !canUseLocalFullAccess),
|
|
});
|
|
const rows = useMemo(
|
|
() => sortRowsByUserTime(terminalData?.rows || []),
|
|
[terminalData?.rows],
|
|
);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const searchInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const filteredRows = useMemo(() => {
|
|
if (!searchQuery.trim()) return rows;
|
|
const q = searchQuery.toLowerCase().trim();
|
|
return rows.filter((row) => {
|
|
const city = (rowName(row) || "").toLowerCase();
|
|
const airport = (row.airport || "").toLowerCase();
|
|
const region = ((isEn ? row.trading_region_label : row.trading_region_label_zh) || row.trading_region_label || "").toLowerCase();
|
|
const signal = (row.ai_decision || row.v4_metar_decision || row.signal_status || "").toLowerCase();
|
|
return city.includes(q) || airport.includes(q) || region.includes(q) || signal.includes(q);
|
|
});
|
|
}, [rows, searchQuery, isEn]);
|
|
|
|
const [selectedId, setSelectedId] = useState<string | null>(null);
|
|
const selectedRow = useMemo(
|
|
() => filteredRows.find((row) => row.id === selectedId) || filteredRows[0] || null,
|
|
[filteredRows, selectedId],
|
|
);
|
|
const generatedText = useRelativeTime(terminalData?.generated_at ?? null);
|
|
|
|
if (!hydrated || (proAccess.loading && !canUseLocalFullAccess)) {
|
|
return (
|
|
<ScanTerminalLoadingScreen
|
|
isEn={isEn}
|
|
rootClassName={scanRootClass}
|
|
themeMode={themeMode}
|
|
userLocalTime={userLocalTime}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const refreshAuth = useCallback(() => {
|
|
fetch("/api/auth/me", {
|
|
cache: "no-store",
|
|
headers: { Accept: "application/json" },
|
|
})
|
|
.then(async (response) => {
|
|
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
|
return response.json() as Promise<{
|
|
authenticated?: boolean;
|
|
user_id?: string | null;
|
|
subscription_active?: boolean | null;
|
|
subscription_plan_code?: string | null;
|
|
subscription_expires_at?: string | null;
|
|
subscription_total_expires_at?: string | null;
|
|
subscription_queued_days?: number | null;
|
|
points?: number | null;
|
|
}>;
|
|
})
|
|
.then((payload) => {
|
|
setProAccess({
|
|
loading: false,
|
|
authenticated: Boolean(payload.authenticated),
|
|
userId: payload.user_id ?? null,
|
|
subscriptionActive: payload.subscription_active === true,
|
|
subscriptionPlanCode: payload.subscription_plan_code ?? null,
|
|
subscriptionExpiresAt: payload.subscription_expires_at ?? null,
|
|
subscriptionTotalExpiresAt:
|
|
payload.subscription_total_expires_at ??
|
|
payload.subscription_expires_at ??
|
|
null,
|
|
subscriptionQueuedDays: Math.max(
|
|
0,
|
|
Number(payload.subscription_queued_days ?? 0),
|
|
),
|
|
points: Number(payload.points ?? 0),
|
|
error: null,
|
|
});
|
|
})
|
|
.catch(() => {}); // keep current state on error
|
|
}, []);
|
|
|
|
if (!isAuthenticated || !isPro) {
|
|
return (
|
|
<ProductAccessRequired
|
|
isAuthenticated={isAuthenticated}
|
|
isEn={isEn}
|
|
points={proAccess.points}
|
|
onPaid={refreshAuth}
|
|
userLocalTime={userLocalTime}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<PolyWeatherTerminal
|
|
generatedText={generatedText || ""}
|
|
isEn={isEn}
|
|
locale={locale}
|
|
onRefresh={refreshScanTerminalManually}
|
|
refreshing={scanLoading}
|
|
rows={filteredRows}
|
|
selectedRow={selectedRow}
|
|
setSelectedRow={(row) => setSelectedId(row.id)}
|
|
toggleLocale={toggleLocale}
|
|
userLocalTime={userLocalTime}
|
|
searchQuery={searchQuery}
|
|
setSearchQuery={setSearchQuery}
|
|
searchInputRef={searchInputRef}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function ScanTerminalDashboard() {
|
|
return <ScanTerminalScreen />;
|
|
}
|