1190 lines
43 KiB
TypeScript
1190 lines
43 KiB
TypeScript
/**
|
||
* History page - browse saved analysis reports
|
||
*/
|
||
"use client";
|
||
|
||
import { useState, useEffect, useRef } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
import { format } from "date-fns";
|
||
import { zhTW } from "date-fns/locale";
|
||
import { useAnalysisContext } from "@/context/AnalysisContext";
|
||
import { useAuth } from "@/contexts/auth-context";
|
||
import { useLanguage } from "@/contexts/LanguageContext";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
CardHeader,
|
||
CardTitle,
|
||
CardDescription,
|
||
CardFooter,
|
||
} from "@/components/ui/card";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "@/components/ui/dialog";
|
||
import {
|
||
Trash2,
|
||
Eye,
|
||
RefreshCw,
|
||
TrendingUp,
|
||
FileText,
|
||
Download,
|
||
MessageCircle,
|
||
} from "lucide-react";
|
||
import {
|
||
getReportsByMarketType,
|
||
deleteReport,
|
||
deleteReports,
|
||
getAllReports,
|
||
bulkSaveReports,
|
||
type SavedReport,
|
||
} from "@/lib/reports-db";
|
||
import {
|
||
getCloudReports,
|
||
deleteCloudReport,
|
||
saveCloudReport,
|
||
isCloudSyncEnabled,
|
||
} from "@/lib/user-api";
|
||
// import { LoginPrompt } from "@/components/auth/login-button";
|
||
import { PendingTaskRecovery } from "@/components/PendingTaskRecovery";
|
||
|
||
// Analyst definitions for download
|
||
const ANALYSTS = [
|
||
{
|
||
key: "market",
|
||
label: "市場分析師",
|
||
reportKey: "market_report",
|
||
description: "技術分析與市場趨勢評估",
|
||
},
|
||
{
|
||
key: "social",
|
||
label: "社群媒體分析師",
|
||
reportKey: "sentiment_report",
|
||
description: "社群情緒與市場氛圍分析",
|
||
},
|
||
{
|
||
key: "news",
|
||
label: "新聞分析師",
|
||
reportKey: "news_report",
|
||
description: "新聞事件與影響分析",
|
||
},
|
||
{
|
||
key: "fundamentals",
|
||
label: "基本面分析師",
|
||
reportKey: "fundamentals_report",
|
||
description: "財務數據與基本面分析",
|
||
},
|
||
{
|
||
key: "bull",
|
||
label: "看漲研究員",
|
||
reportKey: "investment_debate_state.bull_history",
|
||
description: "看漲觀點與投資論據",
|
||
},
|
||
{
|
||
key: "bear",
|
||
label: "看跌研究員",
|
||
reportKey: "investment_debate_state.bear_history",
|
||
description: "看跌觀點與風險警告",
|
||
},
|
||
{
|
||
key: "research_manager",
|
||
label: "研究經理",
|
||
reportKey: "investment_debate_state.judge_decision",
|
||
description: "研究團隊綜合決策",
|
||
},
|
||
{
|
||
key: "trader",
|
||
label: "交易員",
|
||
reportKey: "trader_investment_plan",
|
||
description: "交易執行計劃與策略",
|
||
},
|
||
{
|
||
key: "risky",
|
||
label: "激進分析師",
|
||
reportKey: "risk_debate_state.risky_history",
|
||
description: "高風險高回報策略分析",
|
||
},
|
||
{
|
||
key: "safe",
|
||
label: "保守分析師",
|
||
reportKey: "risk_debate_state.safe_history",
|
||
description: "穩健保守策略分析",
|
||
},
|
||
{
|
||
key: "neutral",
|
||
label: "中立分析師",
|
||
reportKey: "risk_debate_state.neutral_history",
|
||
description: "中立平衡策略分析",
|
||
},
|
||
{
|
||
key: "risk_manager",
|
||
label: "風險經理",
|
||
reportKey: "risk_debate_state.judge_decision",
|
||
description: "風險管理綜合決策",
|
||
},
|
||
];
|
||
|
||
// Market type labels - dynamic function to support translations
|
||
const getMarketLabels = (t: ReturnType<typeof useLanguage>["t"]) => ({
|
||
us: { label: `🇺🇸 ${t.form.usMarket}`, description: t.form.tickerDescUS },
|
||
twse: {
|
||
label: `🇹🇼 ${t.form.twseMarket}`,
|
||
description: t.form.tickerDescTWSE,
|
||
},
|
||
tpex: {
|
||
label: `🇹🇼 ${t.form.tpexMarket}`,
|
||
description: t.form.tickerDescTPEX,
|
||
},
|
||
});
|
||
|
||
// Helper function to extract decision from Risk Manager's final decision
|
||
const extractDecisionFromReport = (
|
||
report: SavedReport,
|
||
): { action: string; color: string } => {
|
||
// DEBUG: Log the actual data structure to diagnose issues
|
||
console.log("📊 DEBUG extractDecisionFromReport for:", report.ticker);
|
||
console.log(" - result type:", typeof report.result);
|
||
console.log(" - result.reports exists:", !!report.result?.reports);
|
||
console.log(
|
||
" - trader_investment_plan exists:",
|
||
!!report.result?.reports?.trader_investment_plan,
|
||
);
|
||
console.log(" - decision.action exists:", !!report.result?.decision?.action);
|
||
|
||
if (report.result?.reports?.trader_investment_plan) {
|
||
const traderText = report.result.reports.trader_investment_plan;
|
||
console.log(" - trader_investment_plan type:", typeof traderText);
|
||
console.log(" - trader_investment_plan length:", traderText.length);
|
||
// Show last 150 chars to see the final decision
|
||
console.log(" - last 150 chars:", traderText.slice(-150));
|
||
// Check if it contains the key phrase
|
||
const hasProposal = traderText.includes("最終交易提案");
|
||
console.log(" - contains '最終交易提案':", hasProposal);
|
||
} else {
|
||
console.log(" - trader_investment_plan is NULL or undefined");
|
||
}
|
||
// Helper function to find "最終交易提案" or "Final Trading Proposal"
|
||
const findFinalProposal = (
|
||
text: string,
|
||
): { action: string; color: string } | null => {
|
||
if (!text || typeof text !== "string") return null;
|
||
|
||
// === CHINESE PATTERN ===
|
||
// Match "最終交易提案：持有" - handle markdown ** bold markers
|
||
// Pattern handles: 最終交易提案：持有, 最終交易提案：**持有**, **最終交易提案：持有**
|
||
// Use global flag to find ALL matches, then take the LAST one (final decision)
|
||
const zhRegex =
|
||
/\*{0,2}最終交易提案[：:]\s*\*{0,2}(買入|賣出|持有)\*{0,2}/g;
|
||
const zhMatches = [...text.matchAll(zhRegex)];
|
||
|
||
if (zhMatches.length > 0) {
|
||
// Take the LAST match (the final decision at the end of the report)
|
||
const lastMatch = zhMatches[zhMatches.length - 1];
|
||
const decision = lastMatch[1];
|
||
console.log(
|
||
` ✅ Matched ZH pattern: "${lastMatch[0]}" -> decision: "${decision}"`,
|
||
);
|
||
if (decision === "買入")
|
||
return { action: "買入", color: "text-green-600" };
|
||
if (decision === "賣出") return { action: "賣出", color: "text-red-600" };
|
||
if (decision === "持有")
|
||
return { action: "持有", color: "text-yellow-600" };
|
||
}
|
||
|
||
// === ENGLISH PATTERN ===
|
||
// Match "Final Trading Proposal: BUY/SELL/HOLD" - handle markdown ** bold markers
|
||
// Pattern handles: Final Trading Proposal: Buy, **Final Trading Proposal**: Hold, etc.
|
||
const enRegex =
|
||
/\*{0,2}Final Trading Proposal\*{0,2}[：:]\s*\*{0,2}(BUY|SELL|HOLD|Buy|Sell|Hold)\*{0,2}/gi;
|
||
const enMatches = [...text.matchAll(enRegex)];
|
||
|
||
if (enMatches.length > 0) {
|
||
const lastMatch = enMatches[enMatches.length - 1];
|
||
const decision = lastMatch[1].toUpperCase();
|
||
console.log(
|
||
` ✅ Matched EN pattern: "${lastMatch[0]}" -> decision: "${decision}"`,
|
||
);
|
||
if (decision === "BUY") return { action: "BUY", color: "text-green-600" };
|
||
if (decision === "SELL") return { action: "SELL", color: "text-red-600" };
|
||
if (decision === "HOLD")
|
||
return { action: "HOLD", color: "text-yellow-600" };
|
||
}
|
||
|
||
return null;
|
||
};
|
||
|
||
// Helper function to find other decision patterns
|
||
const findOtherDecision = (
|
||
text: string,
|
||
): { action: string; color: string } | null => {
|
||
if (!text || typeof text !== "string") return null;
|
||
|
||
const lowerText = text.toLowerCase();
|
||
|
||
// Look for "最終決策" or "最終建議"
|
||
const finalDecisionMatch = text.match(
|
||
/最終(?:決策|建議)[：:]\s*(買入|賣出|持有)/,
|
||
);
|
||
if (finalDecisionMatch) {
|
||
const decision = finalDecisionMatch[1];
|
||
if (decision === "買入")
|
||
return { action: "買入", color: "text-green-600" };
|
||
if (decision === "賣出") return { action: "賣出", color: "text-red-600" };
|
||
if (decision === "持有")
|
||
return { action: "持有", color: "text-yellow-600" };
|
||
}
|
||
|
||
// English patterns
|
||
if (lowerText.match(/(?:final|recommendation|decision)[:\s]*(buy|long)/i)) {
|
||
return { action: "買入", color: "text-green-600" };
|
||
}
|
||
if (
|
||
lowerText.match(/(?:final|recommendation|decision)[:\s]*(sell|short)/i)
|
||
) {
|
||
return { action: "賣出", color: "text-red-600" };
|
||
}
|
||
if (lowerText.match(/(?:final|recommendation|decision)[:\s]*(hold)/i)) {
|
||
return { action: "持有", color: "text-yellow-600" };
|
||
}
|
||
|
||
return null;
|
||
};
|
||
|
||
// ====== PRIORITY 1: Trader's "最終交易提案" - HIGHEST PRIORITY ======
|
||
const traderReport = report.result.reports?.trader_investment_plan;
|
||
if (traderReport) {
|
||
const decision = findFinalProposal(traderReport);
|
||
if (decision) {
|
||
console.log(`📊 Found trader decision: ${decision.action}`);
|
||
return decision;
|
||
}
|
||
}
|
||
|
||
// ====== PRIORITY 2: Check final_trade_decision ======
|
||
const finalTradeDecision = report.result.reports?.final_trade_decision;
|
||
if (finalTradeDecision) {
|
||
const decision =
|
||
findFinalProposal(finalTradeDecision) ||
|
||
findOtherDecision(finalTradeDecision);
|
||
if (decision) return decision;
|
||
}
|
||
|
||
// ====== PRIORITY 3: Check risk_debate_state judge decision ======
|
||
const riskJudge = report.result.reports?.risk_debate_state?.judge_decision;
|
||
if (riskJudge) {
|
||
const decision = findOtherDecision(riskJudge);
|
||
if (decision) return decision;
|
||
}
|
||
|
||
// ====== PRIORITY 4: Fall back to decision.action field ======
|
||
if (report.result.decision?.action) {
|
||
const action = report.result.decision.action;
|
||
const actionLower = action.toLowerCase();
|
||
const color = actionLower.includes("buy")
|
||
? "text-green-600"
|
||
: actionLower.includes("sell")
|
||
? "text-red-600"
|
||
: "text-yellow-600";
|
||
return { action, color };
|
||
}
|
||
|
||
// ====== PRIORITY 5: Search in other report fields ======
|
||
const allReports = report.result.reports;
|
||
if (allReports) {
|
||
const reportTexts = [
|
||
allReports.market_report,
|
||
allReports.sentiment_report,
|
||
allReports.news_report,
|
||
allReports.fundamentals_report,
|
||
].filter((t) => t && typeof t === "string");
|
||
|
||
for (const text of reportTexts) {
|
||
const decision = findFinalProposal(text);
|
||
if (decision) return decision;
|
||
}
|
||
}
|
||
|
||
return { action: "N/A", color: "text-gray-500" };
|
||
};
|
||
|
||
/**
|
||
* Detect report language from content (for backward compatibility with old reports)
|
||
* Checks trader_investment_plan for Chinese/English keywords
|
||
*/
|
||
const detectReportLanguage = (reports: any): "en" | "zh-TW" => {
|
||
const traderPlan = reports?.trader_investment_plan;
|
||
if (!traderPlan || typeof traderPlan !== "string") {
|
||
// If no trader plan, check other reports for Chinese characters
|
||
const allText = JSON.stringify(reports || {});
|
||
const chineseRegex = /[\u4e00-\u9fa5]/;
|
||
return chineseRegex.test(allText) ? "zh-TW" : "en";
|
||
}
|
||
|
||
// Check for Chinese decision keywords
|
||
const chineseKeywords = ["買入", "賣出", "持有", "最終交易提案"];
|
||
for (const keyword of chineseKeywords) {
|
||
if (traderPlan.includes(keyword)) {
|
||
return "zh-TW";
|
||
}
|
||
}
|
||
|
||
// Check for English decision keywords
|
||
const englishKeywords = ["buy", "sell", "hold", "final trading proposal"];
|
||
const lowerPlan = traderPlan.toLowerCase();
|
||
for (const keyword of englishKeywords) {
|
||
if (lowerPlan.includes(keyword.toLowerCase())) {
|
||
return "en";
|
||
}
|
||
}
|
||
|
||
// Fallback: check for Chinese characters in the content
|
||
const chineseRegex = /[\u4e00-\u9fa5]/;
|
||
return chineseRegex.test(traderPlan) ? "zh-TW" : "en";
|
||
};
|
||
|
||
/**
|
||
* Parse a date string from the backend as UTC.
|
||
* Backend stores created_at in UTC but may not always include timezone info.
|
||
* This ensures the date is correctly interpreted as UTC so the browser
|
||
* converts it to the user's local timezone for display.
|
||
*/
|
||
const parseUTCDate = (dateStr: string): Date => {
|
||
// If the string already has timezone info (Z, +, or - offset), parse directly
|
||
if (dateStr.endsWith('Z') || /[+-]\d{2}:\d{2}$/.test(dateStr)) {
|
||
return new Date(dateStr);
|
||
}
|
||
// Otherwise, append 'Z' to treat as UTC
|
||
return new Date(dateStr + 'Z');
|
||
};
|
||
|
||
/**
|
||
* Helper to generate a unique signature for deduplication.
|
||
* This ensures reports for the same ticker on the same day are not squashed together.
|
||
*/
|
||
const getReportSignature = (report: any): string => {
|
||
const baseKey = `${report.ticker}_${report.analysis_date}_${report.market_type || 'us'}`;
|
||
|
||
let contentHash = "";
|
||
if (report.result) {
|
||
if (report.result.reports?.trader_investment_plan) {
|
||
const plan = report.result.reports.trader_investment_plan;
|
||
contentHash = `${plan.length}_${plan.slice(-30).replace(/[\s\n\r]+/g, '')}`;
|
||
} else {
|
||
contentHash = JSON.stringify(report.result).length.toString();
|
||
}
|
||
}
|
||
|
||
const langKey = report.language || "unknown_lang";
|
||
return `${baseKey}_${langKey}_${contentHash}`;
|
||
};
|
||
|
||
export default function HistoryPage() {
|
||
const router = useRouter();
|
||
const { setAnalysisResult, setTaskId, setMarketType } = useAnalysisContext();
|
||
const { isAuthenticated } = useAuth();
|
||
const { t, locale } = useLanguage();
|
||
|
||
// Dynamic market labels based on language
|
||
const MARKET_LABELS = getMarketLabels(t);
|
||
|
||
const [activeTab, setActiveTab] = useState<"us" | "twse" | "tpex">("us");
|
||
const [reports, setReports] = useState<SavedReport[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [counts, setCounts] = useState({ us: 0, twse: 0, tpex: 0 });
|
||
const [isCloudData, setIsCloudData] = useState(false);
|
||
|
||
// Delete confirmation dialog
|
||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||
const [reportToDelete, setReportToDelete] = useState<SavedReport | null>(
|
||
null,
|
||
);
|
||
const [deleting, setDeleting] = useState(false);
|
||
|
||
// Sync state
|
||
const [syncing, setSyncing] = useState(false);
|
||
|
||
// Auto-sync tracking ref
|
||
const hasAutoSyncedRef = useRef(false);
|
||
const cloudReportsPromiseRef = useRef<Promise<any[]> | null>(null);
|
||
|
||
const fetchCloudReportsCached = async (forceRefresh = false) => {
|
||
if (forceRefresh || !cloudReportsPromiseRef.current) {
|
||
cloudReportsPromiseRef.current = getCloudReports().catch(() => {
|
||
cloudReportsPromiseRef.current = null;
|
||
return [];
|
||
});
|
||
}
|
||
return cloudReportsPromiseRef.current;
|
||
};
|
||
|
||
// Load reports when tab changes, auth state changes, or language changes
|
||
useEffect(() => {
|
||
loadReports();
|
||
}, [activeTab, isAuthenticated, locale]);
|
||
|
||
// Load counts on mount, auth change, or language change
|
||
useEffect(() => {
|
||
loadCounts();
|
||
}, [isAuthenticated, locale]);
|
||
|
||
// Bidirectional sync: upload local to cloud AND download cloud to local
|
||
const performBidirectionalSync = async (isInitialSync = false) => {
|
||
if (!isAuthenticated || !isCloudSyncEnabled()) {
|
||
return;
|
||
}
|
||
|
||
// For initial sync, only run once per session
|
||
if (isInitialSync && hasAutoSyncedRef.current) {
|
||
return;
|
||
}
|
||
|
||
if (isInitialSync) {
|
||
hasAutoSyncedRef.current = true;
|
||
}
|
||
|
||
try {
|
||
// First auto-clean local duplicates that might exist from older flawed versions
|
||
try {
|
||
const allLocal = await getAllReports();
|
||
const seenSignatures = new Set<string>();
|
||
const idsToDelete: number[] = [];
|
||
|
||
for (const report of allLocal) {
|
||
const signature = getReportSignature(report as any);
|
||
if (seenSignatures.has(signature)) {
|
||
if (report.id) idsToDelete.push(report.id);
|
||
} else {
|
||
seenSignatures.add(signature);
|
||
}
|
||
}
|
||
|
||
if (idsToDelete.length > 0) {
|
||
console.log(`🧹 Found ${idsToDelete.length} duplicate local reports, cleaning...`);
|
||
await deleteReports(idsToDelete);
|
||
}
|
||
} catch (err) {
|
||
console.error("Failed to cleanup local duplicates:", err);
|
||
}
|
||
|
||
// Get all local reports (re-fetch after cleanup)
|
||
const [usLocal, twseLocal, tpexLocal] = await Promise.all([
|
||
getReportsByMarketType("us"),
|
||
getReportsByMarketType("twse"),
|
||
getReportsByMarketType("tpex"),
|
||
]);
|
||
const allLocal = [...usLocal, ...twseLocal, ...tpexLocal];
|
||
|
||
// Get cloud reports
|
||
const cloudReports = await fetchCloudReportsCached(true); // Force refresh
|
||
const cloudKeys = new Set(cloudReports.map((r) => getReportSignature(r)));
|
||
const localKeys = new Set(allLocal.map((r) => getReportSignature(r)));
|
||
|
||
// === UPLOAD: Local -> Cloud ===
|
||
const toUpload = allLocal.filter(
|
||
(r) => !cloudKeys.has(getReportSignature(r)),
|
||
);
|
||
|
||
if (toUpload.length > 0) {
|
||
console.log(`☁️ Sync: Uploading ${toUpload.length} local reports to cloud...`);
|
||
let uploadSuccess = 0;
|
||
for (const report of toUpload) {
|
||
try {
|
||
const cloudId = await saveCloudReport({
|
||
ticker: report.ticker,
|
||
market_type: report.market_type,
|
||
analysis_date: report.analysis_date,
|
||
result: report.result,
|
||
language: report.language || detectReportLanguage(report.result?.reports),
|
||
});
|
||
if (cloudId) uploadSuccess++;
|
||
} catch (e) {
|
||
// Silently continue on error
|
||
}
|
||
}
|
||
if (uploadSuccess > 0) {
|
||
console.log(`☁️ Sync: Uploaded ${uploadSuccess} reports to cloud`);
|
||
}
|
||
}
|
||
|
||
// === DOWNLOAD: Cloud -> Local ===
|
||
const toDownload = cloudReports.filter(
|
||
(r) => !localKeys.has(getReportSignature(r)),
|
||
);
|
||
|
||
if (toDownload.length > 0) {
|
||
console.log(`☁️ Sync: Downloading ${toDownload.length} cloud reports to local...`);
|
||
const reportsToSave = toDownload.map((r) => ({
|
||
ticker: r.ticker,
|
||
market_type: r.market_type as "us" | "twse" | "tpex",
|
||
analysis_date: r.analysis_date,
|
||
saved_at: parseUTCDate(r.created_at),
|
||
result: r.result,
|
||
language: (r.language || detectReportLanguage(r.result?.reports)) as "en" | "zh-TW" | undefined,
|
||
}));
|
||
|
||
const savedCount = await bulkSaveReports(reportsToSave);
|
||
if (savedCount > 0) {
|
||
console.log(`☁️ Sync: Downloaded ${savedCount} reports to local`);
|
||
}
|
||
}
|
||
|
||
// === DELETE SYNC: Remove local reports that were deleted from cloud ===
|
||
// Only delete reports that are old enough (> 2 minutes) to avoid deleting newly saved reports
|
||
const TWO_MINUTES_AGO = Date.now() - 2 * 60 * 1000;
|
||
const toDeleteLocal = allLocal.filter((localReport) => {
|
||
// Don't delete recently saved reports (might not be uploaded yet)
|
||
const savedTime = new Date(localReport.saved_at).getTime();
|
||
if (savedTime > TWO_MINUTES_AGO) {
|
||
return false;
|
||
}
|
||
// If local report is not in cloud, it was likely deleted on another device
|
||
return !cloudKeys.has(getReportSignature(localReport));
|
||
});
|
||
|
||
if (toDeleteLocal.length > 0) {
|
||
console.log(`☁️ Sync: Removing ${toDeleteLocal.length} locally cached reports that were deleted from cloud...`);
|
||
const idsToDelete = toDeleteLocal
|
||
.map((r) => r.id)
|
||
.filter((id): id is number => id !== undefined);
|
||
if (idsToDelete.length > 0) {
|
||
await deleteReports(idsToDelete);
|
||
console.log(`☁️ Sync: Removed ${idsToDelete.length} local reports`);
|
||
}
|
||
}
|
||
|
||
// Reload UI if any changes
|
||
if (toUpload.length > 0 || toDownload.length > 0 || toDeleteLocal.length > 0) {
|
||
await loadReports();
|
||
await loadCounts();
|
||
} else {
|
||
console.log("☁️ Sync: Already in sync");
|
||
}
|
||
} catch (error) {
|
||
console.error("☁️ Sync failed:", error);
|
||
}
|
||
};
|
||
|
||
// Initial sync when page loads (if authenticated)
|
||
useEffect(() => {
|
||
performBidirectionalSync(true);
|
||
}, [isAuthenticated]);
|
||
|
||
// Re-sync when page becomes visible (handles cross-device changes)
|
||
useEffect(() => {
|
||
const handleVisibilityChange = () => {
|
||
if (document.visibilityState === "visible" && isAuthenticated && isCloudSyncEnabled()) {
|
||
console.log("☁️ Page visible, checking for updates...");
|
||
performBidirectionalSync(false);
|
||
}
|
||
};
|
||
|
||
document.addEventListener("visibilitychange", handleVisibilityChange);
|
||
return () => {
|
||
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
||
};
|
||
}, [isAuthenticated]);
|
||
|
||
const loadReports = async () => {
|
||
setLoading(true);
|
||
try {
|
||
// Helper to filter reports by current UI language
|
||
const filterByLang = (reports: SavedReport[]) => {
|
||
return reports.filter((report) => {
|
||
const reportLang = report.language || detectReportLanguage(report.result?.reports);
|
||
return reportLang === locale;
|
||
});
|
||
};
|
||
|
||
// Always load local IndexedDB reports first
|
||
const localData = await getReportsByMarketType(activeTab);
|
||
|
||
// If authenticated, also load from cloud and merge
|
||
if (isAuthenticated && isCloudSyncEnabled()) {
|
||
const cloudReports = await fetchCloudReportsCached();
|
||
|
||
// Convert cloud reports to SavedReport format and filter by market type
|
||
const cloudFiltered = cloudReports
|
||
.filter((r) => r.market_type === activeTab)
|
||
.map((r) => ({
|
||
id: parseInt(r.id.replace(/-/g, "").slice(0, 8), 16), // Convert UUID to number
|
||
cloudId: r.id, // Keep cloud ID for deletion
|
||
ticker: r.ticker,
|
||
market_type: r.market_type as "us" | "twse" | "tpex",
|
||
analysis_date: r.analysis_date,
|
||
saved_at: parseUTCDate(r.created_at),
|
||
result: r.result,
|
||
language: r.language, // Include language from cloud
|
||
})) as (SavedReport & { cloudId?: string })[];
|
||
|
||
if (cloudFiltered.length > 0) {
|
||
// Merge: prefer cloud data, but include local-only reports
|
||
// Create a Set of cloud report keys (ticker + date + content snippet) for deduplication
|
||
const cloudKeys = new Set(
|
||
cloudFiltered.map((r) => getReportSignature(r)),
|
||
);
|
||
|
||
// Find local reports that don't exist in cloud
|
||
const localOnly = localData.filter(
|
||
(r) => !cloudKeys.has(getReportSignature(r)),
|
||
);
|
||
|
||
// Combine: cloud reports + local-only reports
|
||
const merged = [...cloudFiltered, ...localOnly];
|
||
|
||
// Sort by saved_at descending
|
||
merged.sort(
|
||
(a, b) =>
|
||
new Date(b.saved_at).getTime() - new Date(a.saved_at).getTime(),
|
||
);
|
||
|
||
// Filter by current UI language before display
|
||
setReports(filterByLang(merged));
|
||
setIsCloudData(true);
|
||
return;
|
||
}
|
||
}
|
||
|
||
// Filter local data by language before display
|
||
setReports(filterByLang(localData));
|
||
setIsCloudData(false);
|
||
} catch (error) {
|
||
console.error("Failed to load reports:", error);
|
||
const data = await getReportsByMarketType(activeTab);
|
||
// Filter by language on error fallback too
|
||
const filtered = data.filter((report) => {
|
||
const reportLang = report.language || detectReportLanguage(report.result?.reports);
|
||
return reportLang === locale;
|
||
});
|
||
setReports(filtered as SavedReport[]);
|
||
setIsCloudData(false);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const loadCounts = async () => {
|
||
try {
|
||
// Helper to filter reports by language (matches current UI locale)
|
||
const filterByLanguage = (reports: SavedReport[]) => {
|
||
return reports.filter((report) => {
|
||
// Get report language - use stored value or detect from content
|
||
const reportLang = report.language || detectReportLanguage(report.result?.reports);
|
||
// Match against current locale
|
||
return reportLang === locale;
|
||
});
|
||
};
|
||
|
||
if (isAuthenticated && isCloudSyncEnabled()) {
|
||
const cloudReports = await fetchCloudReportsCached();
|
||
|
||
if (cloudReports.length > 0) {
|
||
// Get local reports to check for duplicates
|
||
const [usLocal, twseLocal, tpexLocal] = await Promise.all([
|
||
getReportsByMarketType("us"),
|
||
getReportsByMarketType("twse"),
|
||
getReportsByMarketType("tpex"),
|
||
]);
|
||
|
||
// Cloud report keys for deduplication
|
||
const cloudKeys = new Set(
|
||
cloudReports.map(r => getReportSignature(r))
|
||
);
|
||
|
||
// Convert cloud reports to SavedReport format for language filtering
|
||
const cloudAsSaved = cloudReports.map(r => ({
|
||
id: 0,
|
||
ticker: r.ticker,
|
||
market_type: r.market_type as "us" | "twse" | "tpex",
|
||
analysis_date: r.analysis_date,
|
||
saved_at: parseUTCDate(r.created_at),
|
||
result: r.result,
|
||
language: r.language,
|
||
})) as SavedReport[];
|
||
|
||
// Filter cloud reports by language
|
||
const cloudFiltered = filterByLanguage(cloudAsSaved);
|
||
|
||
// Count local-only reports (not in cloud) and filter by language
|
||
const usLocalOnly = filterByLanguage(usLocal.filter(
|
||
r => !cloudKeys.has(getReportSignature(r))
|
||
)).length;
|
||
const twseLocalOnly = filterByLanguage(twseLocal.filter(
|
||
r => !cloudKeys.has(getReportSignature(r))
|
||
)).length;
|
||
const tpexLocalOnly = filterByLanguage(tpexLocal.filter(
|
||
r => !cloudKeys.has(getReportSignature(r))
|
||
)).length;
|
||
|
||
// Cloud counts (already filtered by language)
|
||
const usCloud = cloudFiltered.filter(r => r.market_type === "us").length;
|
||
const twseCloud = cloudFiltered.filter(r => r.market_type === "twse").length;
|
||
const tpexCloud = cloudFiltered.filter(r => r.market_type === "tpex").length;
|
||
|
||
// Merged counts: cloud + local-only (both filtered by language)
|
||
setCounts({
|
||
us: usCloud + usLocalOnly,
|
||
twse: twseCloud + twseLocalOnly,
|
||
tpex: tpexCloud + tpexLocalOnly,
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
|
||
// If no cloud data or not authenticated, use local only with language filter
|
||
const [usLocal, twseLocal, tpexLocal] = await Promise.all([
|
||
getReportsByMarketType("us"),
|
||
getReportsByMarketType("twse"),
|
||
getReportsByMarketType("tpex"),
|
||
]);
|
||
|
||
setCounts({
|
||
us: filterByLanguage(usLocal).length,
|
||
twse: filterByLanguage(twseLocal).length,
|
||
tpex: filterByLanguage(tpexLocal).length,
|
||
});
|
||
} catch (error) {
|
||
console.error("Failed to load counts:", error);
|
||
}
|
||
};
|
||
|
||
// Handle refresh button - performs full sync if authenticated
|
||
const handleRefresh = async () => {
|
||
if (isAuthenticated && isCloudSyncEnabled()) {
|
||
setSyncing(true);
|
||
try {
|
||
await performBidirectionalSync(false);
|
||
} finally {
|
||
setSyncing(false);
|
||
}
|
||
} else {
|
||
await loadReports();
|
||
}
|
||
};
|
||
|
||
const handleViewReport = (report: SavedReport) => {
|
||
// Set the context with the saved report data
|
||
setAnalysisResult(report.result);
|
||
setTaskId(report.task_id || null);
|
||
setMarketType(report.market_type);
|
||
// Navigate to results page
|
||
router.push("/analysis/results");
|
||
};
|
||
|
||
const handleDeleteClick = (report: SavedReport) => {
|
||
setReportToDelete(report);
|
||
setDeleteDialogOpen(true);
|
||
};
|
||
|
||
const handleConfirmDelete = async () => {
|
||
if (!reportToDelete) return;
|
||
|
||
setDeleting(true);
|
||
try {
|
||
const cloudId = (reportToDelete as any).cloudId;
|
||
|
||
// IMPORTANT: Delete from BOTH cloud AND local to prevent re-sync issues
|
||
// 1. If cloud ID exists, delete from cloud
|
||
if (cloudId) {
|
||
console.log("🗑️ Deleting from cloud:", cloudId);
|
||
await deleteCloudReport(cloudId);
|
||
}
|
||
|
||
// 2. Always try to delete from local IndexedDB as well
|
||
// Use strict matching: ticker + date + market_type + language
|
||
try {
|
||
const localReports = await getReportsByMarketType(
|
||
reportToDelete.market_type,
|
||
);
|
||
// Get language of report to delete (use stored or detect)
|
||
const targetLang = reportToDelete.language || detectReportLanguage(reportToDelete.result?.reports);
|
||
|
||
// Find matching report with same ticker, date, market, AND language
|
||
const matchingLocal = localReports.find((r) => {
|
||
if (r.ticker !== reportToDelete.ticker) return false;
|
||
if (r.analysis_date !== reportToDelete.analysis_date) return false;
|
||
if (r.market_type !== reportToDelete.market_type) return false;
|
||
// Match language (detect if not stored)
|
||
const localLang = r.language || detectReportLanguage(r.result?.reports);
|
||
return localLang === targetLang;
|
||
});
|
||
|
||
if (matchingLocal && matchingLocal.id) {
|
||
console.log("🗑️ Deleting from local IndexedDB:", matchingLocal.id, "language:", targetLang);
|
||
await deleteReport(matchingLocal.id);
|
||
}
|
||
} catch (localError) {
|
||
console.warn("Could not delete local copy:", localError);
|
||
}
|
||
|
||
// Refresh reports and counts
|
||
await fetchCloudReportsCached(true);
|
||
await loadReports();
|
||
await loadCounts();
|
||
setDeleteDialogOpen(false);
|
||
setReportToDelete(null);
|
||
} catch (error) {
|
||
console.error("Failed to delete report:", error);
|
||
} finally {
|
||
setDeleting(false);
|
||
}
|
||
};
|
||
|
||
// Download PDF handler
|
||
const [downloadingId, setDownloadingId] = useState<number | null>(null);
|
||
|
||
const handleDownloadPdf = async (report: SavedReport) => {
|
||
setDownloadingId(report.id ?? null);
|
||
try {
|
||
// Get all available analyst keys
|
||
const getNestedValue = (obj: any, path: string) => {
|
||
return path.split(".").reduce((current, key) => current?.[key], obj);
|
||
};
|
||
|
||
const availableAnalystKeys = ANALYSTS.filter((analyst) => {
|
||
const reportContent = getNestedValue(
|
||
report.result.reports,
|
||
analyst.reportKey,
|
||
);
|
||
return reportContent && reportContent.trim().length > 0;
|
||
}).map((a) => a.key);
|
||
|
||
if (availableAnalystKeys.length === 0) {
|
||
alert("此報告沒有可下載的分析師報告");
|
||
return;
|
||
}
|
||
|
||
// Detect report language based on trader's final decision keywords
|
||
// This ensures PDF language matches the report content, not UI language
|
||
const detectReportLanguage = (reports: any): "zh-TW" | "en" => {
|
||
const traderPlan = reports?.trader_investment_plan;
|
||
if (!traderPlan || typeof traderPlan !== "string") {
|
||
return "zh-TW"; // Default to Chinese
|
||
}
|
||
|
||
// Chinese decision keywords: 買入, 賣出, 持有
|
||
const chineseKeywords = ["買入", "賣出", "持有", "最終交易提案"];
|
||
// English decision keywords: buy, sell, hold (case insensitive)
|
||
const englishKeywords = ["buy", "sell", "hold", "final trading proposal"];
|
||
|
||
const lowerPlan = traderPlan.toLowerCase();
|
||
|
||
// Check for Chinese keywords first
|
||
for (const keyword of chineseKeywords) {
|
||
if (traderPlan.includes(keyword)) {
|
||
return "zh-TW";
|
||
}
|
||
}
|
||
|
||
// Check for English keywords
|
||
for (const keyword of englishKeywords) {
|
||
if (lowerPlan.includes(keyword)) {
|
||
return "en";
|
||
}
|
||
}
|
||
|
||
// Fallback: check for any Chinese characters
|
||
const chineseRegex = /[\u4e00-\u9fa5]/;
|
||
if (chineseRegex.test(traderPlan)) {
|
||
return "zh-TW";
|
||
}
|
||
|
||
return "en";
|
||
};
|
||
|
||
const reportLanguage = detectReportLanguage(report.result.reports);
|
||
|
||
// Build request body
|
||
const requestBody = {
|
||
ticker: report.ticker,
|
||
analysis_date: report.analysis_date,
|
||
analysts: availableAnalystKeys,
|
||
reports: report.result.reports,
|
||
price_data: report.result.price_data,
|
||
price_stats: report.result.price_stats,
|
||
language: reportLanguage, // Use detected language based on trader decision
|
||
};
|
||
|
||
const response = await fetch("/api/download/reports", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify(requestBody),
|
||
});
|
||
|
||
if (!response.ok) {
|
||
const errorData = await response.json().catch(() => ({}));
|
||
throw new Error(errorData.detail || `下載失敗 (${response.status})`);
|
||
}
|
||
|
||
// Get the blob
|
||
const blob = await response.blob();
|
||
|
||
// Get filename from header
|
||
const contentDisposition = response.headers.get("Content-Disposition");
|
||
let filename = `${report.ticker}_Combined_Report_${report.analysis_date}.pdf`;
|
||
if (contentDisposition) {
|
||
const filenameMatch = contentDisposition.match(/filename=(.+)/);
|
||
if (filenameMatch) {
|
||
filename = filenameMatch[1];
|
||
}
|
||
}
|
||
|
||
// Create download link
|
||
const url = window.URL.createObjectURL(blob);
|
||
const link = document.createElement("a");
|
||
link.href = url;
|
||
link.download = filename;
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
|
||
// Cleanup
|
||
document.body.removeChild(link);
|
||
window.URL.revokeObjectURL(url);
|
||
} catch (error: any) {
|
||
console.error("Download error:", error);
|
||
alert(error.message || "下載失敗，請稍後再試");
|
||
} finally {
|
||
setDownloadingId(null);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-purple-50/30 via-pink-50/20 to-purple-50/30 dark:from-gray-950 dark:via-purple-950/40 dark:to-gray-950">
|
||
<div className="container mx-auto px-4 py-12">
|
||
<div className="max-w-6xl mx-auto space-y-8">
|
||
{/* Header */}
|
||
<div className="text-center relative animate-fade-in">
|
||
<div className="absolute inset-0 gradient-bg-radial opacity-40 -z-10" />
|
||
<h1 className="text-4xl font-bold mb-2 gradient-text-primary">
|
||
{t.history.title}
|
||
</h1>
|
||
<p className="text-gray-600 dark:text-gray-400">
|
||
{t.history.noHistory.replace(
|
||
"尚無分析紀錄",
|
||
"瀏覽已儲存的分析報告",
|
||
)}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Pending Task Recovery Notice */}
|
||
<PendingTaskRecovery />
|
||
|
||
{/* Market Type Tabs */}
|
||
<Tabs
|
||
value={activeTab}
|
||
onValueChange={(v: string) => setActiveTab(v as typeof activeTab)}
|
||
className="w-full animate-slide-up animate-delay-200"
|
||
>
|
||
<TabsList className="grid w-full grid-cols-1 sm:grid-cols-3 h-auto gap-2">
|
||
{(
|
||
Object.keys(MARKET_LABELS) as Array<keyof typeof MARKET_LABELS>
|
||
).map((key) => (
|
||
<TabsTrigger
|
||
key={key}
|
||
value={key}
|
||
className="py-2 sm:py-3 text-sm sm:text-base transition-all duration-300 hover:scale-105"
|
||
>
|
||
<span className="mr-1 sm:mr-2">{MARKET_LABELS[key].label}</span>
|
||
<span className="px-1.5 sm:px-2 py-0.5 rounded-full bg-white/20 text-xs">
|
||
{counts[key]}
|
||
</span>
|
||
</TabsTrigger>
|
||
))}
|
||
</TabsList>
|
||
|
||
{(
|
||
Object.keys(MARKET_LABELS) as Array<keyof typeof MARKET_LABELS>
|
||
).map((marketType) => (
|
||
<TabsContent key={marketType} value={marketType} className="mt-6">
|
||
<div className="space-y-4">
|
||
{/* Refresh/Sync button */}
|
||
<div className="flex justify-end">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={handleRefresh}
|
||
disabled={loading || syncing}
|
||
className="gap-2"
|
||
>
|
||
<RefreshCw
|
||
className={`h-4 w-4 ${loading || syncing ? "animate-spin" : ""}`}
|
||
/>
|
||
{syncing ? t.history.syncing : t.history.refresh}
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Report List */}
|
||
{loading ? (
|
||
<div className="text-center py-12">
|
||
<RefreshCw className="h-8 w-8 animate-spin mx-auto text-gray-400" />
|
||
<p className="text-gray-500 mt-4">{t.history.loading}</p>
|
||
</div>
|
||
) : reports.length === 0 ? (
|
||
<Card className="animate-fade-in">
|
||
<CardContent className="py-12 text-center">
|
||
<TrendingUp className="h-12 w-12 mx-auto text-gray-300 dark:text-gray-600 mb-4" />
|
||
<p className="text-gray-500 dark:text-gray-400">
|
||
{t.history.noReportsFor}{" "}
|
||
{MARKET_LABELS[marketType].label}
|
||
</p>
|
||
<p className="text-sm text-gray-400 dark:text-gray-500 mt-2">
|
||
{t.history.afterAnalysisSave}
|
||
</p>
|
||
<Button
|
||
variant="outline"
|
||
className="mt-4"
|
||
onClick={() => router.push("/analysis")}
|
||
>
|
||
{t.home.startAnalysis}
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
) : (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
{reports.map((report) => (
|
||
<Card
|
||
key={report.id}
|
||
className="hover-lift animate-scale-up transition-all duration-300"
|
||
>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center justify-between">
|
||
<span className="text-xl font-bold gradient-text-primary">
|
||
{report.ticker}
|
||
</span>
|
||
<span className="text-xs px-2 py-1 rounded-full bg-gradient-to-r from-blue-100 to-pink-100 dark:from-blue-900 dark:to-purple-900 text-gray-600 dark:text-gray-300">
|
||
{MARKET_LABELS[report.market_type].label}
|
||
</span>
|
||
</CardTitle>
|
||
<CardDescription>
|
||
{t.history.analysisDate}：{report.analysis_date}
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||
{t.history.savedAt}：
|
||
{format(
|
||
new Date(report.saved_at),
|
||
"yyyy/MM/dd HH:mm",
|
||
{ locale: zhTW },
|
||
)}
|
||
</p>
|
||
{(() => {
|
||
const decision =
|
||
extractDecisionFromReport(report);
|
||
return (
|
||
<p className="text-sm mt-2">
|
||
<span className="font-medium">
|
||
{t.history.decision}：
|
||
</span>
|
||
<span
|
||
className={`ml-1 font-semibold ${decision.color}`}
|
||
>
|
||
{decision.action}
|
||
</span>
|
||
</p>
|
||
);
|
||
})()}
|
||
</CardContent>
|
||
<CardFooter className="grid grid-cols-2 gap-2">
|
||
<Button
|
||
variant="default"
|
||
size="sm"
|
||
className="w-full gap-1"
|
||
onClick={() => handleViewReport(report)}
|
||
>
|
||
<Eye className="h-4 w-4" />
|
||
{t.history.view}
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="w-full gap-1"
|
||
onClick={() => handleDownloadPdf(report)}
|
||
disabled={downloadingId === report.id}
|
||
>
|
||
{downloadingId === report.id ? (
|
||
<>
|
||
<Download className="h-4 w-4 animate-bounce" />
|
||
{t.history.downloading}
|
||
</>
|
||
) : (
|
||
<>
|
||
<FileText className="h-4 w-4" />
|
||
PDF
|
||
</>
|
||
)}
|
||
</Button>
|
||
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="col-span-2 w-full gap-2 text-purple-600 dark:text-purple-400 border-purple-200 dark:border-purple-800 hover:bg-purple-50 dark:hover:bg-purple-950/50"
|
||
onClick={() => router.push(`/history/chat?ticker=${report.ticker}&date=${report.analysis_date}&market=${report.market_type}`)}
|
||
>
|
||
<MessageCircle className="h-4 w-4" />
|
||
{t.chat?.title || "Report Chat"} — {t.chat?.allReports || "All Reports"}
|
||
</Button>
|
||
|
||
<Button
|
||
variant="destructive"
|
||
size="sm"
|
||
className="col-span-2 w-full gap-1"
|
||
onClick={() => handleDeleteClick(report)}
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
{t.history.delete}
|
||
</Button>
|
||
</CardFooter>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</TabsContent>
|
||
))}
|
||
</Tabs>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Delete Confirmation Dialog */}
|
||
<Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>{t.history.confirmDeleteTitle}</DialogTitle>
|
||
<DialogDescription>
|
||
{t.history.confirmDeleteDesc}{" "}
|
||
<strong>{reportToDelete?.ticker}</strong> {t.history.on}{" "}
|
||
<strong>{reportToDelete?.analysis_date}</strong>?
|
||
<br />
|
||
<span className="text-red-500">{t.history.cannotUndo}</span>
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<DialogFooter>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => setDeleteDialogOpen(false)}
|
||
disabled={deleting}
|
||
>
|
||
{t.history.cancel}
|
||
</Button>
|
||
<Button
|
||
variant="destructive"
|
||
onClick={handleConfirmDelete}
|
||
disabled={deleting}
|
||
>
|
||
{deleting ? t.history.deleting : t.history.confirmDeleteBtn}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
);
|
||
}
|