function Link({ schemes = [], initialSelectedScheme = "", initialInvestmentAmount = "", initialInvestmentType = "sip" }) { const [portfolio, setPortfolio] = React.useState(null); const [selectedScheme, setSelectedScheme] = React.useState(initialSelectedScheme); const [investmentAmount, setInvestmentAmount] = React.useState(initialInvestmentAmount); const [investmentType, setInvestmentType] = React.useState(initialInvestmentType); const [performance, setPerformance] = React.useState("No portfolio data available. Please create a virtual portfolio."); const createVirtualPortfolio = async ()=>{ const today = new Date(); const formattedDate = today.toISOString().slice(0, 10).split("-").reverse().join("-"); const navDataUrl = `https://portal.amfiindia.com/DownloadNAVHistoryReport_Po.aspx?frmdt=${formattedDate}`; try { const response = await fetch(navDataUrl); const text = await response.text(); const parser = new DOMParser(); const doc = parser.parseFromString(text, "text/html"); let navRate = extractNavRate(doc, selectedScheme); setPortfolio({ scheme: selectedScheme, amount: investmentAmount, type: investmentType, navRate: navRate, total: investmentAmount / navRate }); setPerformance(`Your investment in ${selectedScheme} is worth ${(investmentAmount / navRate).toFixed(2)} units.`); } catch (error) { setPerformance("Failed to fetch NAV data. Please try again later."); } }; const extractNavRate = (doc, scheme)=>{ const rows = Array.from(doc.querySelectorAll("tr")); for (let row of rows){ const cells = row.querySelectorAll("td"); if (cells[0].textContent.includes(scheme)) { return parseFloat(cells[4].textContent); } } return null; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 space-y-4 font-sans", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, "Virtual Mutual Fund Investment App"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px]", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-medium", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "Select Mutual Fund Scheme:"), /*#__PURE__*/ React.createElement("select", { name: "scheme", value: selectedScheme, onChange: (e)=>setSelectedScheme(e.target.value), className: "block w-full p-2 border rounded", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, schemes.map((scheme)=>/*#__PURE__*/ React.createElement("option", { key: scheme, __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, scheme)))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px]", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-medium", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "Investment Amount:"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "amount", value: investmentAmount, onChange: (e)=>setInvestmentAmount(e.target.value), placeholder: "Enter amount", className: "block w-full p-2 border rounded", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px]", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-medium", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "Investment Type:"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "investmentType", value: "sip", checked: investmentType === "sip", onChange: ()=>setInvestmentType("sip"), __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "SIP (Monthly)")), /*#__PURE__*/ React.createElement("label", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "investmentType", value: "onetime", checked: investmentType === "onetime", onChange: ()=>setInvestmentType("onetime"), __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "One-time")))), /*#__PURE__*/ React.createElement("button", { onClick: createVirtualPortfolio, className: "px-4 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, "Create Virtual Portfolio"), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, "Portfolio Performance"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] p-4 border rounded-lg bg-white", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, performance))); } function LinkStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 91, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Link, { schemes: [ "Scheme 1", "Scheme 2", "Scheme 3" ], initialSelectedScheme: "Scheme 1", initialInvestmentAmount: "10000", initialInvestmentType: "sip", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this })); } function MainComponent() { const schemes = [ "Scheme 1", "Scheme 2", "Scheme 3" ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Link, { schemes: schemes, initialSelectedScheme: schemes[0], initialInvestmentAmount: "10000", initialInvestmentType: "sip", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this })); }