// Screen 2 (Allocation) and Screen 3 (Goals) function AllocationScreen({ T, t, accent, theme, alloc, setAlloc, onNext }) { const items = [ { key: "bank", label: t.bank, c: "#10b981" }, // Emerald green { key: "realEstate", label: t.realEstate, c: "#3b82f6" }, // Blue { key: "stocks", label: t.stocks, c: "#ec4899" }, // Pink { key: "bonds", label: t.bonds, c: "#f59e0b" }, // Amber { key: "gold", label: t.gold, c: "#eab308" }, // Yellow { key: "crypto", label: t.crypto, c: "#8b5cf6" }, // Violet ]; const total = items.reduce((s, i) => s + (alloc[i.key] || 0), 0); const left = 100 - total; const balanced = total === 100; // Adjust slider, then redistribute the delta proportionally across the others const onChange = (key, raw) => { const v = Math.max(0, Math.min(100, Math.round(raw))); const others = items.filter(i => i.key !== key); const otherTotal = others.reduce((s, i) => s + (alloc[i.key] || 0), 0); const remaining = 100 - v; const next = { ...alloc, [key]: v }; if (otherTotal === 0) { // distribute equally others.forEach(o => next[o.key] = Math.round(remaining / others.length)); } else { others.forEach(o => { next[o.key] = Math.max(0, Math.round((alloc[o.key] / otherTotal) * remaining)); }); } // fix rounding to make sum = 100 const newTotal = items.reduce((s, i) => s + next[i.key], 0); const diff = 100 - newTotal; if (diff !== 0) { const target = others.find(o => next[o.key] + diff >= 0) || others[0]; next[target.key] = Math.max(0, next[target.key] + diff); } setAlloc(next); }; return (
{t.allocKicker}
{t.allocTitle}
{t.allocSub}
{/* Stacked horizontal bar visualisation of the allocation */}
{items.map(i => alloc[i.key] > 0 && (
))}
{t.allocTotal}
{total}% {balanced ? `· ${t.allocBalanced}` : `· ${t.allocLeft} ${left > 0 ? "+" : ""}${left}%`}
{/* Slider rows */}
{items.map(i => ( onChange(i.key, v)} /> ))}
{t.next}
); } function AllocRow({ label, color, value, onChange, T, accent }) { return (
{label}
{value}%
{[0, 5, 10, 30, 50, 75, 100].map(pct => ( ))}
); } function GoalsScreen({ T, t, accent, theme, goals, setGoals, onNext }) { const cards = [ { key: "growth", title: t.goal1Title, body: t.goal1Body, img: "uploads/high_growth_icon_1778013442682.png" }, { key: "preserve", title: t.goal2Title, body: t.goal2Body, img: "uploads/preservation_icon_1778013461383.png" }, { key: "income", title: t.goal3Title, body: t.goal3Body, img: "uploads/passive_income_icon_1778013476266.png" }, { key: "retire", title: t.goal4Title, body: t.goal4Body, img: "uploads/retirement_icon_1778013493933.png" }, { key: "children", title: t.goal5Title, body: t.goal5Body, img: "uploads/children_icon_1778013507207.png" }, { key: "freedom", title: t.goal6Title, body: t.goal6Body, img: "uploads/financial_freedom_icon_1778013524803.png" }, ]; const toggle = (k) => { if (goals.includes(k)) setGoals(goals.filter(g => g !== k)); else if (goals.length < 3) setGoals([...goals, k]); }; return (
{t.goalsKicker}
{t.goalsTitle}
{t.goalsSub}
{goals.length} / 3 {t.selected.toLowerCase()}
{cards.map((c, idx) => { const sel = goals.includes(c.key); const order = goals.indexOf(c.key); return ( ); })}
Thời hạn đầu tư
{[ { value: "lt2", label: "Dưới 2 năm" }, { value: "2to5", label: "2 - 5 năm" }, { value: "5to10", label: "5 - 10 năm" }, { value: "gt10", label: "Trên 10 năm / để lại cho con cái" }, ].map(opt => ( ))}
{t.analyze}
); } function AssetPerformanceScreen({ T, t, accent, theme, alloc, assetPerf, setAssetPerf, onNext }) { const items = [ { key: "bank", label: t.bank, icon: "🏦" }, { key: "realEstate", label: t.realEstate, icon: "🏠" }, { key: "stocks", label: t.stocks, icon: "📈" }, { key: "bonds", label: t.bonds, icon: "📜" }, { key: "gold", label: t.gold, icon: "🥇" }, { key: "crypto", label: t.crypto, icon: "₿" }, ]; const perfOptions = { bank: ["< 4%", "4–5%", "5–6%", "6–7%", "> 7%", "Không rõ"], gold: ["< 1 năm", "1–3 năm", "3–5 năm", "> 5 năm", "Mua nhiều lần"], realEstate: ["Đang tăng tốt", "Giữ nguyên / tăng nhẹ", "Khó bán / giảm", "Cho thuê — có dòng tiền", "Không cho thuê"], stocks: ["Lỗ", "Hoà vốn", "Lãi 0–10%", "Lãi 10–25%", "Lãi 25–50%", "Không theo dõi"], bonds: ["Không rõ", "Đang nhận lãi tốt", "Chậm trả lãi"], crypto: ["Lỗ", "Hoà vốn", "Lãi", "Không theo dõi"] }; const activeAssets = items.filter(i => alloc[i.key] > 0); const allSet = activeAssets.every(i => (assetPerf || {})[i.key]); return (
HIỆU SUẤT HIỆN TẠI
Hiệu suất hiện tại của bạn
Chúng tôi cần ước lượng để so sánh với chuẩn tối ưu.
{activeAssets.map(i => (
{i.icon} {i.label} {alloc[i.key]}%
{perfOptions[i.key].map(opt => ( ))}
))}
{t.next}
); } function RiskToleranceScreen({ T, t, accent, theme, riskTol, setRiskTol, onNext }) { const options = [ { value: "withdraw", label: "\"Nếu giảm 10%, tôi rút hết\"" }, { value: "hold1020", label: "\"Tôi chịu được giảm 10-20% nếu kỳ vọng dài hạn tốt\"" }, { value: "hold2030", label: "\"Tôi chịu được giảm 20-30%\" - tôi đầu tư dài hạn" }, { value: "ignore", label: "\"Tôi không quan tâm biến động ngắn hạn\"" }, ]; return (
KHẨU VỊ RỦI RO
Khi danh mục giảm mạnh, bạn sẽ...
{options.map(opt => ( ))}
{t.next}
); } function ExpectedReturnScreen({ T, t, accent, theme, expRet, setExpRet, onNext }) { const options = [ { value: "bank", label: "Ngang lãi suất ngân hàng (~5–7%)" }, { value: "bank_plus", label: "Tốt hơn ngân hàng một chút (8–12%)" }, { value: "market", label: "Tốt hơn đáng kể (12–20%)" }, { value: "max", label: "Tối đa hoá (20%+)" }, ]; return (
MỤC TIÊU LỢI NHUẬN
Kỳ vọng lợi nhuận hàng năm?
{options.map(opt => ( ))}
{t.next}
); } function PrimaryConcernsScreen({ T, t, accent, theme, concerns, setConcerns, onNext }) { const options = [ { value: "bank_low", label: "Tiền gửi không đủ sinh lời" }, { value: "asset_stagnant", label: "Vàng / BĐS không còn tăng tốt" }, { value: "stock_picking", label: "Không biết chọn cổ phiếu nào" }, { value: "scam", label: "Sợ bị lừa đảo, mất tiền" }, { value: "diversify", label: "Muốn đa dạng nhưng không biết cách" }, { value: "time", label: "Không có thời gian theo dõi" }, ]; const toggle = (k) => { if (concerns.includes(k)) setConcerns(concerns.filter(c => c !== k)); else if (concerns.length < 2) setConcerns([...concerns, k]); }; return (
NỖI LO TÀI CHÍNH
Lo ngại chính của bạn?
Chọn tối đa 2 lựa chọn {concerns.length} / 2
{options.map(opt => { const sel = concerns.includes(opt.value); return ( ); })}
{t.next}
); } Object.assign(window, { AllocationScreen, GoalsScreen, AssetPerformanceScreen, RiskToleranceScreen, ExpectedReturnScreen, PrimaryConcernsScreen });