// Screen: Missing Out / Deep Dive (Sections 4.7.3, 4.7.4, 4.8, 4.9) and Dashboard function MissingOutPanel2Screen({ T, t, accent, theme, onNext }) { return (
Bảng 2 / 3
Bạn đang bỏ lỡ điều gì?
A — Hiệu suất 5 năm
Lucy Capital · VN Equity +18.4%
Chỉ số VN30 +9.1%
Tiền gửi NH tốt nhất +5.5%
Quy đổi VND Với 5 tỷ ban đầu, sau 5 năm:
Tiền gửi NH ~6.5 tỷ
Lucy Capital VN Equity ~11.7 tỷ
Chênh lệch +5.2 tỷ
B — Lợi ích quản lý chuyên nghiệp
{[ "Không cần theo dõi thị trường hàng ngày.", "Quyết định dựa trên phân tích định lượng — không tin đồn.", "Quản lý rủi ro hệ thống — không đặt cược một cổ phiếu.", "Kỷ luật đầu tư — không bị chi phối bởi cảm xúc." ].map((text, i) => (
●
{text}
))}
Nếu đầu tư khác đi
); } function MissingOutPanel3Screen({ T, t, accent, theme, alloc, onNext }) { return (
Bảng 3 / 3
Nếu bạn đầu tư khác đi…
Mô phỏng: nếu 3 tỷ tiền gửi của bạn được quản lý chuyên nghiệp từ 01/2022.
Q4'22 điều chỉnh
01/202204/2026
Tiền gửi NH
3.7 tỷ
+22% (4 năm)
Lucy VN Equity
5.9 tỷ
+96% (4 năm)
Chênh lệch
+ 2.2 tỷ đồng
Trên cùng 3 tỷ ban đầu
Lưu ý: Đây là mô phỏng dựa trên dữ liệu lịch sử và không đảm bảo lợi nhuận tương lai. Đầu tư luôn có rủi ro. Kết quả thực tế có thể khác biệt đáng kể.
Thử phân bổ tối ưu
); } function SimulatorScreen({ T, t, accent, theme, alloc, onNext }) { const [simAlloc, setSimAlloc] = React.useState(alloc); const [selectedScenario, setSelectedScenario] = React.useState(null); const [hoverScen, setHoverScen] = React.useState(null); const [activeScen, setActiveScen] = React.useState(null); const applyScenario = (type) => { setSelectedScenario(type); if (type === "safe") setSimAlloc({ bank: 45, realEstate: 15, stocks: 25, bonds: 5, gold: 10, crypto: 0 }); if (type === "balanced") setSimAlloc({ bank: 25, realEstate: 15, stocks: 40, bonds: 10, gold: 10, crypto: 0 }); if (type === "growth") setSimAlloc({ bank: 5, realEstate: 10, stocks: 70, bonds: 5, gold: 0, crypto: 10 }); if (type === "optimal") setSimAlloc({ bank: 5, realEstate: 15, stocks: 65, bonds: 5, gold: 10, crypto: 0 }); }; const RET = { bank: 0.055, realEstate: 0.09, stocks: 0.18, bonds: 0.07, gold: 0.08, crypto: 0.40, cash: 0.02 }; const sumW = (w) => Object.values(w).reduce((a, b) => a + (b || 0), 0) || 100; // Calculate simulation returns const wSim = sumW(simAlloc); const baseSimRet = Object.entries(simAlloc).reduce((acc, [k, v]) => acc + (v / wSim) * (RET[k] || 0), 0); // Lucy AI adds an "Alpha" (excess return) due to quantitative optimization and active management const alpha = selectedScenario === "optimal" ? 0.037 : (selectedScenario === "growth" ? 0.025 : (selectedScenario ? 0.015 : 0)); const simRet = baseSimRet + alpha; // Calculate current user allocation returns const wCur = sumW(alloc); // Assume current allocation is unoptimized (retail investor penalty ~3% underperformance due to timing/fees/emotion) const curRet = Math.max(0.04, Object.entries(alloc).reduce((acc, [k, v]) => acc + (v / wCur) * (RET[k] || 0), 0) - 0.03); const score = Math.min(100, Math.round(40 + (simRet * 100 * 3.2))); const maxDrawdown = simRet > 0.16 ? "-18%" : simRet > 0.12 ? "-12%" : "-6%"; const capital = 5; // Assuming 5B capital const sim5 = capital * Math.pow(1 + simRet, 5); const cur5 = capital * Math.pow(1 + curRet, 5); const delta5 = sim5 - cur5; const deltaPct = (simRet - curRet) * 100; return (
Mô phỏng
Nếu bạn phân bổ khác đi?
{[ { id: "safe", label: "An toàn", desc: "8-10% /năm" }, { id: "balanced", label: "Cân bằng", desc: "12-15% /năm" }, { id: "growth", label: "Tăng trưởng", desc: "18-22% /năm" }, { id: "optimal", label: "Tối ưu cho tôi", desc: "Gợi ý từ AI" } ].map(scen => { const isSel = selectedScenario === scen.id; const isHov = hoverScen === scen.id; const isAct = activeScen === scen.id; return ( ); })}
{(() => { const colors = { bank: "#94A3B8", realEstate: "#64748B", stocks: accent.primary, bonds: "#475569", gold: "#CBD5E1", crypto: "#334155" }; let cumulative = 0; const gradientStops = Object.entries(simAlloc).map(([k, v]) => { if (!v) return ""; const pct = (v / wSim) * 100; const start = cumulative; cumulative += pct; const end = cumulative; return `${colors[k]} ${start}% ${end}%`; }).filter(Boolean).join(", "); return (
{Object.entries(simAlloc).map(([key, val]) => { if (val === 0) return null; return (
{t[key]}
{Math.round((val/wSim)*100)}%
) })}
); })()} Kết quả mô phỏng sau 5 năm
Lợi nhuận trung bình +{(simRet*100).toFixed(1)}% /năm
Ước tính tài sản Vốn {capital} tỷ
{sim5.toFixed(1)} tỷ
Biến động tối đa Rủi ro giảm giá (Max Drawdown)
{maxDrawdown}
Khác biệt so với hiện tại Mức chênh lệch lợi nhuận sau 5 năm
+{delta5.toFixed(1)} tỷ
+{Math.round(deltaPct)}% lợi nhuận/năm
💡 Diễn giải kết quả:
Nếu giữ nguyên danh mục phân bổ hiện tại, tài sản của bạn sau 5 năm ước tính chỉ đạt khoảng {cur5.toFixed(1)} tỷ. Nhưng nếu chuyển sang chiến lược {selectedScenario === "optimal" ? "Tối ưu AI" : "Được chọn"}, tài sản có thể tăng lên {sim5.toFixed(1)} tỷ.

Khoảng chênh lệch khổng lồ {delta5.toFixed(1)} tỷ đến từ sức mạnh của việc tối ưu hóa tỷ trọng, bắt đúng nhịp thị trường và loại bỏ yếu tố cảm xúc.
Phân tích chiến lược Lucy AI
); } function FundPreviewScreen({ T, t, accent, theme, onNext, onRestart }) { return (
Chiến Lược Quản Lý Quỹ
Để tài sản của bạn làm việc hiệu quả hơn
Một cuộc trao đổi 30 phút với chuyên gia quản lý quỹ — không có áp lực, không phí tư vấn. Chúng tôi sẽ chia sẻ chiến lược phân bổ phù hợp với hồ sơ của bạn. Đội ngũ và chiến lược đứng sau công cụ này
Tại sao chúng tôi khác biệt?
{[ { t: "Phân tích định lượng", b: "Mọi quyết định đầu tư đều dựa trên mô hình toán học, không phải tin đồn." }, { t: "Minh bạch hoàn toàn", b: "Hiệu suất được kiểm toán độc lập. Luôn biết tiền đang ở đâu." }, { t: "Quản lý rủi ro nghiêm ngặt", b: "Danh mục đa dạng hoá, có hệ thống dừng lỗ tự động." }, { t: "Chứng chỉ quốc tế", b: "CFA charterholder với hơn 10 năm kinh nghiệm tại Việt Nam." } ].map((item, i) => (
{item.t}
{item.b}
))}
Điều kiện tham gia
Đầu tư tối thiểu: 2 tỷ đồng. Dành cho nhà đầu tư đủ điều kiện.
📅 Đặt lịch tư vấn 30 phút alert("Gửi yêu cầu tài liệu chi tiết (mock)")} accent={accent} T={T}>Nhận tài liệu
); } function BookingFormScreen({ T, t, accent, theme, name, gender, setGender, onNext }) { return (
Liên Hệ Tư Vấn
Để lại thông tin để chuyên gia hỗ trợ bạn
Danh xưng
Họ và tên
Số điện thoại (Zalo)
Thời gian thuận tiện để liên hệ
Gửi thông tin
); } function BookingConfirmScreen({ T, t, accent, theme, name, gender, onNext }) { return (
Cảm ơn {gender} {name || ""}
Chuyên gia của chúng tôi sẽ phản hồi qua Zalo trong 15 phút.
Xem Insights
); } // ---------------- DASHBOARD / TAB BAR VIEWS ---------------- function DashboardScreen({ T, t, accent, theme, alloc, name, onRestart, onGoToReport }) { const [activeTab, setActiveTab] = React.useState("pulse"); // pulse, insights, account return (
{activeTab === "pulse" && setActiveTab("insights")} onGoToReport={onGoToReport} />} {activeTab === "insights" && } {activeTab === "account" && }
{/* Tab Bar — sticky inside phone frame */}
setActiveTab("pulse")} T={T} accent={accent} /> setActiveTab("insights")} T={T} accent={accent} /> setActiveTab("account")} T={T} accent={accent} />
); } function TabButton({ id, icon, label, active, onClick, T, accent }) { return ( ); } function MarketPulseTab({ T, t, accent, onGoToInsights, onGoToReport, name, score }) { const [timeframe, setTimeframe] = React.useState("year"); const [chartHover, setChartHover] = React.useState(null); const [animIn, setAnimIn] = React.useState(false); const [hoverCard, setHoverCard] = React.useState(null); React.useEffect(() => { requestAnimationFrame(() => setAnimIn(true)); }, []); const userScore = score || 47; const opportunityCost = 450; // triệu // Chart data per timeframe const chartData = { month: { labels: ["T1","T2","T3","T4"], lucy: [5.0, 5.05, 5.10, 5.15], vn30: [5.0, 5.02, 5.04, 5.06], deposit: [5.0, 5.01, 5.02, 5.03] }, quarter: { labels: ["Q1","Q2","Q3","Q4"], lucy: [5.0, 5.15, 5.30, 5.45], vn30: [5.0, 5.08, 5.15, 5.23], deposit: [5.0, 5.05, 5.09, 5.14] }, year: { labels: ["2022","2023","2024","2025","2026"], lucy: [5.0, 5.20, 5.42, 5.65, 5.91], vn30: [5.0, 5.11, 5.22, 5.34, 5.46], deposit: [5.0, 5.07, 5.14, 5.21, 5.28] } }; const cd = chartData[timeframe]; const maxVal = Math.max(...cd.lucy, ...cd.vn30, ...cd.deposit); const minVal = Math.min(...cd.lucy, ...cd.vn30, ...cd.deposit) * 0.95; const range = maxVal - minVal; const chartH = 160; const toY = (v) => chartH - ((v - minVal) / range) * chartH; const toPath = (arr) => arr.map((v, i) => `${i === 0 ? "M" : "L"}${(i / (arr.length - 1)) * 100},${toY(v)}`).join(" "); const now = new Date(); const hour = now.getHours(); const greeting = hour < 12 ? "Chào buổi sáng" : hour < 18 ? "Chào buổi chiều" : "Chào buổi tối"; const timeStr = `${now.getHours()}:${String(now.getMinutes()).padStart(2,"0")} — ${now.getDate()}/${now.getMonth()+1}/${now.getFullYear()}`; const metrics = [ { label: "VN-Index", val: "1,245", chg: "+1.2%", pos: true }, { label: "Lãi suất", val: "5.5%", chg: "-0.2%", pos: false }, { label: "Vàng SJC", val: "89.5tr", chg: "+2.5%", pos: true }, { label: "BĐS", val: "+4.2%", chg: "QoQ", pos: true } ]; const featured = [ { title: "Cơ hội từ sự phân hoá nhóm vốn hoá lớn", date: "15/05/2026", img: "https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?auto=format&fit=crop&w=400&q=80" }, { title: "Xây dựng danh mục thích ứng chu kỳ mới", date: "02/05/2026", img: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=400&q=80" } ]; const fadeStyle = (delay) => ({ opacity: animIn ? 1 : 0, transform: animIn ? "translateY(0)" : "translateY(16px)", transition: `opacity 600ms ${delay}ms, transform 600ms ${delay}ms` }); return (
{/* Greeting */}
{greeting}, {name || "bạn"} 👋
Cập nhật lúc {timeStr}
{/* Hero Score Card */}
{userScore}
Hiệu Quả Tài Sản
Chi phí cơ hội bị bỏ lỡ:
~{opportunityCost} triệu
*(Mức lợi nhuận chênh lệch nếu bạn đã đầu tư cùng Lucy AI)
{/* Portfolio Chart */}
Mô phỏng tài sản
{[{k:"month",l:"Tháng"},{k:"quarter",l:"Quý"},{k:"year",l:"Năm"}].map(tf => ( ))}
setChartHover(null)} onTouchEnd={() => setTimeout(() => setChartHover(null), 2000)}> {[0, 0.25, 0.5, 0.75, 1].map((f, i) => ( ))} {cd.labels.map((_, i) => { const x = (i / (cd.labels.length - 1)) * 100; return ( setChartHover(i)} onTouchStart={() => setChartHover(i)} style={{ cursor: "crosshair" }} /> ); })} {chartHover !== null && ( )} {chartHover !== null && (
{cd.labels[chartHover]}
Lucy: {cd.lucy[chartHover].toFixed(2)} tỷ
VN30: {cd.vn30[chartHover].toFixed(2)} tỷ
NH: {cd.deposit[chartHover].toFixed(2)} tỷ
)}
{cd.labels.map((l, i) => {l})}
Lucy AI
VN30
Gửi NH
{/* Performance Comparison */}
So sánh hiệu suất 12 tháng
{[ {n:"Lucy AI",p:"+18.2%",v:"5.91 tỷ",c:accent.primary,id:0}, {n:"VN30",p:"+9.1%",v:"5.46 tỷ",c:T.text,id:1}, {n:"Gửi NH",p:"+5.5%",v:"5.28 tỷ",c:T.textDim,id:2} ].map((h,i) => (
setHoverCard(i)} onMouseLeave={() => setHoverCard(null)} style={{ textAlign: "center", padding: "12px 4px", borderRadius: 12, background: hoverCard === i ? T.bg : "transparent", border: `1px solid ${hoverCard === i ? T.borderStrong : "transparent"}`, transition: "all 250ms ease", transform: hoverCard === i ? "translateY(-4px)" : "none" }}>
{h.n}
{h.p}
{h.v}
))}
{/* Diễn giải chi tiết hiệu suất */}
Hiệu quả sinh lời vượt trội
Với cùng số vốn ban đầu (5 tỷ), danh mục tối ưu bởi Lucy AI mang lại lợi nhuận cao hơn 450 triệu so với thị trường chung (VN30) và 630 triệu so với gửi tiết kiệm ngân hàng trong vòng 1 năm qua.
{/* Market Indicators */}
Chỉ số thị trường
🟢 Tích cực
{metrics.map((m, i) => (
{m.label}
{m.val}
{m.chg}
))}
{/* Featured Insights */}
Tin chuyên sâu
Xem tất cả →
{featured.map((f, i) => (
{f.date}
{f.title}
))}
); } function InsightsTab({ T, t, accent }) { const articles = [ { date: "15/05/2026", title: "Cơ hội từ sự phân hoá nhóm vốn hoá lớn", desc: "Thị trường tháng 5 chứng kiến sự dịch chuyển dòng tiền rõ nét. Nhóm vốn hoá lớn bắt đầu dẫn dắt.", tag: "Cổ phiếu", img: "https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?auto=format&fit=crop&w=400&q=80" }, { date: "02/05/2026", title: "Xây dựng danh mục thích ứng với chu kỳ mới", desc: "Bối cảnh vĩ mô thay đổi đòi hỏi chiến lược phân bổ linh hoạt. Tiền gửi không còn là kênh trú ẩn tối ưu.", tag: "Chiến lược", img: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=400&q=80" }, { date: "18/04/2026", title: "Động lực từ nhóm cổ phiếu Ngân hàng", desc: "Phân tích định lượng chỉ ra định giá nhóm Ngân hàng đang ở mức hấp dẫn nhất trong 3 năm qua.", tag: "Ngân hàng", img: "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=400&q=80" }, { date: "05/04/2026", title: "Lạm phát và chiến lược bảo vệ sức mua", desc: "Cách bảo vệ tài sản của bạn khi áp lực lạm phát có dấu hiệu quay trở lại vào giữa năm.", tag: "Vĩ mô", img: "https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?auto=format&fit=crop&w=400&q=80" }, { date: "20/03/2026", title: "Giá vàng thế giới liên tục phá đỉnh lịch sử", desc: "Những động lực chính đứng sau đà tăng của vàng và tác động đến các kênh đầu tư khác.", tag: "Hàng hoá", img: "https://images.unsplash.com/photo-1579621970588-a35d0e7ab9b6?auto=format&fit=crop&w=400&q=80" }, { date: "05/03/2026", title: "Vai trò của Bất động sản trong danh mục đa dạng", desc: "Giảm tỷ trọng Bất động sản trực tiếp và tăng tỷ trọng qua kênh chứng khoán.", tag: "Bất động sản", img: "https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&w=400&q=80" }, ]; return (
Insights
Góc nhìn từ chuyên gia về thị trường.
{articles.map((art, i) => (
{art.tag}
{art.date}
{art.title}
{art.desc}
))}
); } function AccountTab({ T, t, accent, name, score, onRestart }) { const [animIn, setAnimIn] = React.useState(false); const [hoverAction, setHoverAction] = React.useState(null); React.useEffect(() => { requestAnimationFrame(() => setAnimIn(true)); }, []); const fadeStyle = (delay) => ({ opacity: animIn ? 1 : 0, transform: animIn ? "translateY(0)" : "translateY(16px)", transition: `opacity 600ms ${delay}ms, transform 600ms ${delay}ms` }); const handleClear = () => { if (confirm("Bạn có muốn xoá toàn bộ dữ liệu và bắt đầu lại từ đầu?")) { localStorage.clear(); window.location.reload(); } }; const userScore = score || 47; return (
{/* Profile Header */}
{(name || "K").charAt(0).toUpperCase()}
{name || "Khách hàng"}
Hội viên Lucy Pro
{/* Summary Cards */}
Điểm chẩn đoán
{userScore} /100
Khẩu vị rủi ro
Cân bằng
{/* Actions Section */}
Hành động ưu tiên
{/* Settings Section */}
Cài đặt hệ thống
Thông báo thị trường
Lucy AI Ecosystem
v6.2.0 • build_46e6cbb1
); } Object.assign(window, { MissingOutPanel2Screen, MissingOutPanel3Screen, SimulatorScreen, FundPreviewScreen, BookingFormScreen, BookingConfirmScreen, DashboardScreen });