507 lines
22 KiB
TypeScript
507 lines
22 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState, useCallback, useRef } from "react";
|
||
import { fetchAPI, postAPI } from "@/lib/api";
|
||
import type { LatestResult, SectorData, IndexOverview, OpsStatusResponse, StrategyBoard } from "@/lib/api";
|
||
import MarketTemp from "@/components/market-temp";
|
||
import SectorHeatmap from "@/components/sector-heatmap";
|
||
import { useWebSocket } from "@/hooks/use-websocket";
|
||
import { useAuth } from "@/hooks/use-auth";
|
||
import { ThemeToggle } from "@/components/theme-toggle";
|
||
|
||
interface ScanStatus {
|
||
is_trading: boolean;
|
||
scan_mode: string;
|
||
description: string;
|
||
}
|
||
|
||
const SCAN_TIMEOUT_MS = 120_000; // 扫描超时：120秒后自动刷新数据
|
||
|
||
export default function DashboardPage() {
|
||
const { user } = useAuth();
|
||
const [data, setData] = useState<LatestResult | null>(null);
|
||
const [sectors, setSectors] = useState<SectorData[]>([]);
|
||
const [scanStatus, setScanStatus] = useState<ScanStatus | null>(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [refreshing, setRefreshing] = useState(false);
|
||
const [refreshResult, setRefreshResult] = useState<string | null>(null);
|
||
const [indices, setIndices] = useState<IndexOverview[]>([]);
|
||
const [strategyBoard, setStrategyBoard] = useState<StrategyBoard | null>(null);
|
||
const [opsStatus, setOpsStatus] = useState<OpsStatusResponse | null>(null);
|
||
const [opsRunning, setOpsRunning] = useState<string | null>(null);
|
||
const scanTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||
|
||
const loadData = useCallback(async () => {
|
||
try {
|
||
const [latest, sectorData, status, overview, board, ops] = await Promise.all([
|
||
fetchAPI<LatestResult>("/api/recommendations/latest"),
|
||
fetchAPI<SectorData[]>("/api/sectors/hot?limit=8"),
|
||
fetchAPI<ScanStatus>("/api/recommendations/status"),
|
||
fetchAPI<IndexOverview[]>("/api/market/overview").catch(() => []),
|
||
fetchAPI<StrategyBoard>("/api/market/strategy-board").catch(() => null),
|
||
fetchAPI<OpsStatusResponse>("/api/market/ops-status").catch(() => null),
|
||
]);
|
||
setData(latest);
|
||
setSectors(sectorData);
|
||
setScanStatus(status);
|
||
setIndices(overview);
|
||
setStrategyBoard(board);
|
||
setOpsStatus(ops);
|
||
} catch (e) {
|
||
console.error("加载数据失败:", e);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
// 清除扫描超时计时器
|
||
const clearScanTimeout = useCallback(() => {
|
||
if (scanTimeoutRef.current) {
|
||
clearTimeout(scanTimeoutRef.current);
|
||
scanTimeoutRef.current = null;
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
loadData();
|
||
}, [loadData]);
|
||
|
||
useWebSocket(
|
||
useCallback((msg: { type: string; count?: number; scan_mode?: string; message?: string }) => {
|
||
clearScanTimeout();
|
||
if (msg.type === "scan_update") {
|
||
const modeLabel = msg.scan_mode === "intraday" ? "盘中实时" : "盘后";
|
||
setRefreshResult(`${modeLabel}扫描完成，发现 ${msg.count ?? 0} 只股票`);
|
||
setRefreshing(false);
|
||
loadData();
|
||
setTimeout(() => setRefreshResult(null), 5000);
|
||
} else if (msg.type === "scan_error") {
|
||
setRefreshResult("扫描失败，请重试");
|
||
setRefreshing(false);
|
||
setTimeout(() => setRefreshResult(null), 5000);
|
||
} else {
|
||
// 其他消息类型（如 llm_analysis_ready），刷新数据
|
||
loadData();
|
||
}
|
||
}, [loadData, clearScanTimeout]),
|
||
["scan_update", "scan_error", "llm_analysis_ready", "sector_scan_ready", "scan_complete"]
|
||
);
|
||
|
||
const handleRefresh = async () => {
|
||
setRefreshing(true);
|
||
setRefreshResult(null);
|
||
try {
|
||
const res = await postAPI<{
|
||
status: string;
|
||
message?: string;
|
||
is_trading: boolean;
|
||
}>("/api/recommendations/refresh?scan_session=manual");
|
||
|
||
if (res.status === "already_running") {
|
||
setRefreshResult(res.message || "扫描正在执行中，请稍候");
|
||
// 保持 refreshing，等待 WS 推送完成
|
||
} else if (res.status === "scanning") {
|
||
setRefreshResult("扫描已启动，完成后自动刷新...");
|
||
// 保持 refreshing，等待 WS 推送
|
||
}
|
||
|
||
// 设置超时：如果 120 秒内没收到 WebSocket 消息，自动停止加载状态并刷新数据
|
||
scanTimeoutRef.current = setTimeout(() => {
|
||
setRefreshResult("扫描超时，已自动刷新数据");
|
||
setRefreshing(false);
|
||
loadData();
|
||
setTimeout(() => setRefreshResult(null), 5000);
|
||
}, SCAN_TIMEOUT_MS);
|
||
} catch (e) {
|
||
console.error("触发扫描失败:", e);
|
||
setRefreshResult("触发扫描失败，请重试");
|
||
setRefreshing(false);
|
||
setTimeout(() => setRefreshResult(null), 5000);
|
||
}
|
||
};
|
||
|
||
const handleAdminAction = async (action: "update_tracking" | "generate_strategy_board" | "generate_strategy_iteration") => {
|
||
setOpsRunning(action);
|
||
setRefreshResult(null);
|
||
try {
|
||
if (action === "update_tracking") {
|
||
const result = await postAPI<{ tracked?: number; win_rate?: number; avg_return?: number }>("/api/recommendations/update-tracking");
|
||
setRefreshResult(`跟踪已更新，样本 ${result.tracked ?? 0}，胜率 ${(result.win_rate ?? 0).toFixed(1)}%`);
|
||
} else if (action === "generate_strategy_board") {
|
||
await postAPI("/api/market/generate-strategy-board");
|
||
setRefreshResult("策略板已生成");
|
||
} else {
|
||
await postAPI("/api/market/generate-strategy-iteration");
|
||
setRefreshResult("策略复盘已生成");
|
||
}
|
||
await loadData();
|
||
setTimeout(() => setRefreshResult(null), 5000);
|
||
} catch (error) {
|
||
console.error("管理员操作失败:", error);
|
||
setRefreshResult("管理员操作失败，请重试");
|
||
setTimeout(() => setRefreshResult(null), 5000);
|
||
} finally {
|
||
setOpsRunning(null);
|
||
}
|
||
};
|
||
|
||
// 清理超时计时器
|
||
useEffect(() => {
|
||
return () => clearScanTimeout();
|
||
}, [clearScanTimeout]);
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="max-w-7xl mx-auto px-4 md:px-8 pt-6 space-y-5">
|
||
<div className="h-32 glass-card-static animate-shimmer" />
|
||
<div className="h-48 glass-card-static animate-shimmer" />
|
||
<div className="h-48 glass-card-static animate-shimmer" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="max-w-7xl mx-auto px-4 md:px-8 pt-6 pb-20 md:pb-10 space-y-6">
|
||
{/* Header bar */}
|
||
<div className="flex items-center justify-between animate-fade-in-up">
|
||
<div>
|
||
<h1 className="text-lg font-bold tracking-tight">今日作战</h1>
|
||
{scanStatus && (
|
||
<p className="text-xs text-text-muted mt-1">
|
||
{scanStatus.is_trading ? (
|
||
<span className="inline-flex items-center gap-1.5">
|
||
<span className="w-1.5 h-1.5 bg-emerald-400 rounded-full animate-pulse" />
|
||
<span className="text-emerald-400/80">交易中</span>
|
||
<span className="text-text-muted/40">·</span>
|
||
实时行情
|
||
</span>
|
||
) : (
|
||
<span className="inline-flex items-center gap-1.5">
|
||
<span className="w-1.5 h-1.5 bg-text-muted/40 rounded-full" />
|
||
已收盘
|
||
<span className="text-text-muted/40">·</span>
|
||
Tushare 日级数据
|
||
</span>
|
||
)}
|
||
</p>
|
||
)}
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<ThemeToggle />
|
||
{user?.role === "admin" && (
|
||
<button
|
||
onClick={handleRefresh}
|
||
disabled={refreshing}
|
||
className="text-xs px-4 py-2 bg-gradient-to-r from-amber-500/20 to-amber-600/15 text-amber-400 rounded-xl hover:from-amber-500/30 hover:to-amber-600/25 disabled:opacity-40 transition-all duration-200 border border-amber-500/10 font-medium"
|
||
>
|
||
{refreshing ? (
|
||
<span className="inline-flex items-center gap-1.5">
|
||
<span className="w-3 h-3 border border-amber-400/40 border-t-amber-400 rounded-full animate-spin" />
|
||
分析中...
|
||
</span>
|
||
) : scanStatus?.is_trading ? (
|
||
"盘中扫描"
|
||
) : (
|
||
"立即扫描"
|
||
)}
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Scan result toast */}
|
||
{refreshResult && (
|
||
<div className="glass-card-static border-amber-500/15 px-4 py-2.5 text-xs text-amber-400 animate-fade-in-up flex items-center gap-2">
|
||
<span className="w-1 h-1 rounded-full bg-amber-400" />
|
||
{refreshResult}
|
||
</div>
|
||
)}
|
||
|
||
<MissionControl
|
||
board={strategyBoard}
|
||
recommendations={data?.recommendations ?? []}
|
||
sectors={sectors}
|
||
strategyProfile={data?.strategy_profile ?? null}
|
||
/>
|
||
|
||
{opsStatus && (
|
||
user?.role === "admin" ? (
|
||
<OpsPanel
|
||
opsStatus={opsStatus}
|
||
isAdmin={true}
|
||
refreshing={refreshing}
|
||
onRefresh={handleRefresh}
|
||
opsRunning={opsRunning}
|
||
onAction={handleAdminAction}
|
||
/>
|
||
) : null
|
||
)}
|
||
|
||
<div className="animate-fade-in-up delay-100">
|
||
<EvidenceHeader title="决策证据" />
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-3">
|
||
<MarketTemp data={data?.market_temperature ?? null} indices={indices} />
|
||
<SectorHeatmap sectors={sectors} />
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function OpsPanel({
|
||
opsStatus,
|
||
isAdmin,
|
||
refreshing,
|
||
onRefresh,
|
||
opsRunning,
|
||
onAction,
|
||
}: {
|
||
opsStatus: OpsStatusResponse;
|
||
isAdmin: boolean;
|
||
refreshing: boolean;
|
||
onRefresh: () => void;
|
||
opsRunning: string | null;
|
||
onAction: (action: "update_tracking" | "generate_strategy_board" | "generate_strategy_iteration") => void;
|
||
}) {
|
||
return (
|
||
<div className="glass-card-static p-4 animate-fade-in-up">
|
||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||
<div>
|
||
<div className="text-[10px] uppercase tracking-[0.22em] text-cyan-400 font-semibold">Admin Ops</div>
|
||
<div className="text-xs text-text-muted mt-2">
|
||
{opsStatus.data_freshness.message}
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-2 text-[11px] text-text-muted">
|
||
<span>市场 {opsStatus.data_freshness.market_trade_date || "暂无"}</span>
|
||
<span>板块 {opsStatus.data_freshness.sector_trade_date || "暂无"}</span>
|
||
<span>跟踪 {opsStatus.data_freshness.tracking_trade_date || "暂无"}</span>
|
||
<span>{opsStatus.scan_running ? "扫描中" : "空闲"}</span>
|
||
</div>
|
||
</div>
|
||
{isAdmin ? (
|
||
<div className="flex flex-wrap gap-2 mt-3">
|
||
<button
|
||
onClick={onRefresh}
|
||
disabled={refreshing || !!opsRunning}
|
||
className="text-xs px-3 py-2 bg-gradient-to-r from-amber-500/20 to-amber-600/15 text-amber-400 rounded-xl hover:from-amber-500/30 hover:to-amber-600/25 disabled:opacity-40 transition-all border border-amber-500/10"
|
||
>
|
||
{refreshing ? "扫描中..." : "立即扫描"}
|
||
</button>
|
||
<button
|
||
onClick={() => onAction("update_tracking")}
|
||
disabled={refreshing || !!opsRunning}
|
||
className="text-xs px-3 py-2 rounded-xl border border-border-subtle bg-surface-1 text-text-secondary hover:text-cyan-400 transition-colors disabled:opacity-40"
|
||
>
|
||
{opsRunning === "update_tracking" ? "更新中..." : "更新跟踪"}
|
||
</button>
|
||
<button
|
||
onClick={() => onAction("generate_strategy_board")}
|
||
disabled={refreshing || !!opsRunning}
|
||
className="text-xs px-3 py-2 rounded-xl border border-border-subtle bg-surface-1 text-text-secondary hover:text-cyan-400 transition-colors disabled:opacity-40"
|
||
>
|
||
{opsRunning === "generate_strategy_board" ? "生成中..." : "生成策略板"}
|
||
</button>
|
||
<button
|
||
onClick={() => onAction("generate_strategy_iteration")}
|
||
disabled={refreshing || !!opsRunning}
|
||
className="text-xs px-3 py-2 rounded-xl border border-border-subtle bg-surface-1 text-text-secondary hover:text-cyan-400 transition-colors disabled:opacity-40"
|
||
>
|
||
{opsRunning === "generate_strategy_iteration" ? "生成中..." : "生成策略复盘"}
|
||
</button>
|
||
<a href="/strategy" className="text-xs px-3 py-2 rounded-xl border border-border-subtle bg-surface-1 text-text-secondary hover:text-cyan-400 transition-colors">
|
||
查看策略复盘
|
||
</a>
|
||
<a href="/recommendations" className="text-xs px-3 py-2 rounded-xl border border-border-subtle bg-surface-1 text-text-secondary hover:text-amber-400 transition-colors">
|
||
查看推荐闭环
|
||
</a>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function EvidenceHeader({ title }: { title: string }) {
|
||
return (
|
||
<div>
|
||
<h2 className="text-xs font-semibold text-text-muted uppercase tracking-wider">
|
||
{title}
|
||
</h2>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function MissionControl({
|
||
board,
|
||
recommendations,
|
||
sectors,
|
||
strategyProfile,
|
||
}: {
|
||
board: StrategyBoard | null;
|
||
recommendations: LatestResult["recommendations"];
|
||
sectors: SectorData[];
|
||
strategyProfile: LatestResult["strategy_profile"];
|
||
}) {
|
||
const actionable = recommendations.filter((rec) => rec.action_plan === "可操作");
|
||
const watch = recommendations.filter((rec) => rec.action_plan === "重点关注");
|
||
const observe = recommendations.filter((rec) => !["可操作", "重点关注"].includes(rec.action_plan ?? ""));
|
||
const topSectors = sectors.slice(0, 3);
|
||
const risks = board?.avoid_rules?.length ? board.avoid_rules : ["等待市场状态和推荐结果更新后生成风险约束。"];
|
||
const primaryQueue = (actionable.length ? actionable : watch).slice(0, 3);
|
||
const laneTitle = actionable.length ? "优先执行" : watch.length ? "候选观察" : "等待信号";
|
||
const strategyName = strategyProfile?.name ?? board?.recommended_mode ?? "待定";
|
||
const strategyHint = strategyProfile?.description ?? "系统判断今天更适合采用的出手方式";
|
||
const riskText = risks.slice(0, 2).join(" / ");
|
||
|
||
return (
|
||
<div className="glass-card-static px-4 py-4 md:px-5 md:py-5 overflow-hidden relative animate-fade-in-up">
|
||
<div className="absolute right-[-100px] top-[-120px] w-72 h-72 rounded-full bg-amber-500/[0.04] blur-3xl pointer-events-none" />
|
||
<div className="relative grid grid-cols-1 xl:grid-cols-[minmax(0,1fr)_300px] gap-4">
|
||
<div className="min-w-0 space-y-3">
|
||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<span className="text-[10px] uppercase tracking-[0.22em] text-amber-400 font-semibold">今日结论</span>
|
||
{board?.generated_by === "rules+llm" && (
|
||
<span className="text-[10px] px-2 py-0.5 rounded-full border border-cyan-500/15 bg-cyan-500/10 text-cyan-400">AI增强</span>
|
||
)}
|
||
</div>
|
||
<a href="/recommendations" className="text-[11px] text-text-muted hover:text-amber-400 transition-colors">
|
||
推荐池
|
||
</a>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_220px] gap-3 items-start">
|
||
<div className="min-w-0">
|
||
<h2 className="text-lg md:text-[1.2rem] font-bold tracking-tight truncate">
|
||
{board?.market_regime ?? "等待市场状态"}
|
||
</h2>
|
||
<p className="text-[12px] text-text-secondary leading-relaxed mt-1.5 max-w-3xl line-clamp-2">
|
||
{board?.summary ?? "系统尚未生成今日作战结论。触发扫描后，将基于市场温度、板块主线、推荐生命周期和策略复盘生成操作框架。"}
|
||
</p>
|
||
</div>
|
||
<div className="grid grid-cols-3 lg:grid-cols-1 gap-1.5">
|
||
<CommandMetric label="可操作" value={actionable.length} description="盯盘" />
|
||
<CommandMetric label="关注" value={watch.length} description="等确认" />
|
||
<CommandMetric label="观察" value={observe.length} description="不追" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-2">
|
||
<CompactDecision label="今日打法" value={strategyName} extra={strategyHint} />
|
||
<CompactDecision label="仓位建议" value={board?.position_suggestion ?? "等待判断"} extra="今天建议的进攻上限" />
|
||
<CompactDecision label="市场倾向" value={board?.action_bias ?? "等待确认"} extra={`风险 ${board?.risk_level ?? "-"}`} />
|
||
<CompactDecision label="主线板块" value={topSectors.length ? topSectors.map((sector) => sector.sector_name).join(" / ") : "暂无"} extra={riskText || "暂无风险约束"} />
|
||
</div>
|
||
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
{topSectors.length ? (
|
||
topSectors.map((sector) => (
|
||
<span key={sector.sector_code} className="inline-flex items-center gap-1.5 rounded-full bg-surface-1/80 border border-border-subtle px-2.5 py-1 text-[11px]">
|
||
<span className="font-medium text-text-primary">{sector.sector_name}</span>
|
||
<span className={`font-mono tabular-nums ${sector.pct_change >= 0 ? "text-red-400" : "text-emerald-400"}`}>
|
||
{sector.pct_change > 0 ? "+" : ""}{sector.pct_change.toFixed(2)}%
|
||
</span>
|
||
</span>
|
||
))
|
||
) : (
|
||
<span className="text-xs text-text-muted">暂无主线板块</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rounded-2xl bg-surface-1/70 border border-border-subtle p-3">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<SectionTitle title={laneTitle} />
|
||
<span className="text-[10px] text-text-muted">{primaryQueue.length}只</span>
|
||
</div>
|
||
<div className="mt-2.5 space-y-1.5">
|
||
{primaryQueue.length ? (
|
||
primaryQueue.map((rec) => (
|
||
<CompactMissionStock key={`mission-${rec.ts_code}`} rec={rec} />
|
||
))
|
||
) : (
|
||
<div className="rounded-lg bg-surface-2/60 border border-border-subtle p-3 text-center">
|
||
<div className="text-xs text-text-muted">暂无执行标的</div>
|
||
<div className="text-[11px] text-text-muted/50 mt-0.5">等待扫描生成可操作或重点关注列表</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<a
|
||
href="/strategy"
|
||
className="inline-flex items-center justify-center mt-3 w-full rounded-xl border border-border-subtle bg-surface-2/60 px-3 py-2 text-[11px] text-text-muted hover:text-amber-400 hover:border-amber-500/20 transition-colors"
|
||
>
|
||
查看策略复盘
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function CompactDecision({ label, value, extra }: { label: string; value: string; extra: string }) {
|
||
return (
|
||
<div className="rounded-lg bg-surface-2 px-3 py-2">
|
||
<div className="text-[10px] text-text-muted uppercase tracking-wider font-semibold">{label}</div>
|
||
<div className="text-sm font-semibold text-text-primary mt-1 truncate">{value}</div>
|
||
{extra ? <div className="text-[10px] text-text-muted mt-1 truncate">{extra}</div> : null}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function CompactMissionStock({ rec }: { rec: LatestResult["recommendations"][number] }) {
|
||
const actionStyle: Record<string, string> = {
|
||
"可操作": "bg-red-500/15 text-red-400 border-red-500/20",
|
||
"重点关注": "bg-amber-500/15 text-amber-400 border-amber-500/20",
|
||
"观察": "bg-surface-3 text-text-muted border-border-default",
|
||
};
|
||
|
||
return (
|
||
<a
|
||
href={`/stock/${rec.ts_code}`}
|
||
className="block rounded-lg bg-surface-2/60 border border-border-subtle px-3 py-2 hover:border-amber-500/20 transition-colors"
|
||
>
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div className="min-w-0">
|
||
<div className="flex items-center gap-1.5 min-w-0">
|
||
<span className="text-sm font-semibold truncate">{rec.name}</span>
|
||
<span className={`shrink-0 text-[10px] px-1.5 py-0.5 rounded-md border ${actionStyle[rec.action_plan ?? "观察"] ?? actionStyle["观察"]}`}>
|
||
{rec.action_plan ?? "观察"}
|
||
</span>
|
||
</div>
|
||
<div className="text-[10px] text-text-muted font-mono tabular-nums mt-0.5 truncate">
|
||
{rec.ts_code} · {rec.sector}
|
||
</div>
|
||
</div>
|
||
<div className="shrink-0 text-right">
|
||
<div className="text-base font-bold font-mono tabular-nums text-text-primary">{rec.score}</div>
|
||
<div className="text-[10px] text-text-muted">参考</div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-1.5 text-[11px] text-text-secondary leading-relaxed line-clamp-1">
|
||
{rec.trigger_condition ?? rec.reasons?.[0] ?? "等待触发条件确认"}
|
||
</div>
|
||
</a>
|
||
);
|
||
}
|
||
|
||
function CommandMetric({ label, value, description }: { label: string; value: number; description: string }) {
|
||
return (
|
||
<div className="rounded-lg bg-surface-1/70 border border-border-subtle px-2.5 py-2">
|
||
<div className="text-[10px] text-text-muted uppercase tracking-wider font-semibold">{label}</div>
|
||
<div className="flex items-baseline justify-between gap-2 mt-0.5">
|
||
<div className="text-lg font-bold font-mono tabular-nums text-text-primary">{value}</div>
|
||
<div className="text-[10px] text-text-muted">{description}</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function SectionTitle({ title }: { title: string }) {
|
||
return (
|
||
<div className="text-[10px] text-text-muted uppercase tracking-wider font-semibold">
|
||
{title}
|
||
</div>
|
||
);
|
||
}
|