/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useMemo, useState } from "https://esm.sh/react@18.2.0"; // Utility for financial calculations const FinancialUtils = { calculateEMI: (principal, annualRate, tenureMonths) => { const monthlyRate = annualRate / 12 / 100; const emi = principal * (monthlyRate * Math.pow(1 + monthlyRate, tenureMonths)) / (Math.pow(1 + monthlyRate, tenureMonths) - 1); return emi; }, calculateShareCount: (loanAmount, sharePrice) => { // Calculate number of shares by dividing loan amount by share price return sharePrice > 0 ? Math.max(0, Math.floor(loanAmount / sharePrice)) : 0; }, calculateDividendIncome: (shareCount, sharePrice, annualDividendPerShare) => { // Calculate dividend income based on number of shares and dividend per share const totalAnnualDividend = shareCount * annualDividendPerShare; const monthlyDividend = totalAnnualDividend / 12; return { monthlyDividendIncome: Math.round(monthlyDividend), annualDividendIncome: Math.round(totalAnnualDividend), }; }, calculateCashFlow: (monthlyDividendIncome, monthlyEMI) => { return Math.round(monthlyDividendIncome - monthlyEMI); }, generateAmortizationSchedule: (principal, annualRate, tenureMonths) => { const monthlyRate = annualRate / 12 / 100; const emi = FinancialUtils.calculateEMI(principal, annualRate, tenureMonths); let balance = principal; const schedule = []; for (let month = 1; month <= tenureMonths; month++) { const interestPayment = balance * monthlyRate; const principalPayment = Math.min(emi - interestPayment, balance); balance = Math.max(0, balance - principalPayment); schedule.push({ month, emi, principalPayment: Math.round(principalPayment), interestPayment: Math.round(interestPayment), remainingBalance: Math.round(balance), }); } return schedule; }, }; // Enhanced Stock Data Service using a proxy approach const StockDataService = { async fetchStockData(ticker) { try { // Use a proxy service to fetch stock data const response = await fetch(`https://query1.finance.yahoo.com/v8/finance/chart/${ticker}`); if (!response.ok) { throw new Error("Failed to fetch stock data"); } const data = await response.json(); const stockInfo = data.chart.result[0]; // Fetch additional details const summaryResponse = await fetch( `https://query2.finance.yahoo.com/v10/finance/quoteSummary/${ticker}?modules=summaryDetail`, ); const summaryData = await summaryResponse.json(); return { price: stockInfo.meta.regularMarketPrice, dividendYield: summaryData.quoteSummary.result[0].summaryDetail.dividendYield?.raw * 100 || 0, annualDividend: summaryData.quoteSummary.result[0].summaryDetail.dividendRate?.raw || 0, }; } catch (error) { console.error("Stock data fetch error:", error); // Fallback mock data return { price: 100, dividendYield: 2.5, annualDividend: 2.5, }; } }, }; function FinancialCalculator() { const [darkMode, setDarkMode] = useState(false); // EMI Calculator State const [loanAmount, setLoanAmount] = useState(""); const [interestRate, setInterestRate] = useState(""); const [loanTenure, setLoanTenure] = useState(""); // Stock Calculator State const [stockTicker, setStockTicker] = useState(""); const [sharePrice, setSharePrice] = useState(""); const [annualDividendPerShare, setAnnualDividendPerShare] = useState(""); const [shareCount, setShareCount] = useState(0); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); // Reset function const resetCalculator = () => { // Reset EMI Calculator setLoanAmount(""); setInterestRate(""); setLoanTenure(""); // Reset Stock Calculator setStockTicker(""); setSharePrice(""); setAnnualDividendPerShare(""); setShareCount(0); setLoading(false); setError(null); }; // Fetch stock data when ticker changes useEffect(() => { const fetchStockData = async () => { if (!stockTicker) return; setLoading(true); setError(null); try { const stockData = await StockDataService.fetchStockData(stockTicker); if (stockData) { setSharePrice(stockData.price.toString()); setAnnualDividendPerShare(stockData.annualDividend.toString()); } } catch (err) { setError(err.message || "Could not fetch stock data. Please check the ticker."); setSharePrice(""); setAnnualDividendPerShare(""); } finally { setLoading(false); } }; fetchStockData(); }, [stockTicker]); // Share Count Calculation useEffect(() => { // Calculate shares when loan amount and share price are available if (loanAmount && sharePrice) { const calculatedShareCount = FinancialUtils.calculateShareCount( Number(loanAmount), Number(sharePrice), ); setShareCount(calculatedShareCount); } }, [loanAmount, sharePrice]); // EMI Calculation const emiDetails = useMemo(() => { if (!loanAmount || !interestRate || !loanTenure) return null; const emi = FinancialUtils.calculateEMI( Number(loanAmount), Number(interestRate), Number(loanTenure), ); const totalPayment = emi * Number(loanTenure); const totalInterest = totalPayment - Number(loanAmount); return { monthlyEMI: Math.round(emi), totalPayment: Math.round(totalPayment), totalInterest: Math.round(totalInterest), amortizationSchedule: FinancialUtils.generateAmortizationSchedule( Number(loanAmount), Number(interestRate), Number(loanTenure), ), }; }, [loanAmount, interestRate, loanTenure]); // Dividend Income Calculation const dividendDetails = useMemo(() => { if (!shareCount || !sharePrice || !annualDividendPerShare) return null; return FinancialUtils.calculateDividendIncome( shareCount, Number(sharePrice), Number(annualDividendPerShare), ); }, [shareCount, sharePrice, annualDividendPerShare]); // Cash Flow Calculation const cashFlowDetails = useMemo(() => { if (!emiDetails || !dividendDetails) return null; return { monthlyCashFlow: FinancialUtils.calculateCashFlow( dividendDetails.monthlyDividendIncome, emiDetails.monthlyEMI, ), }; }, [emiDetails, dividendDetails]); return (

Cash Flow Calculator

Loan Details

Loan Amount (₹) setLoanAmount(e.target.value)} placeholder="Enter Loan Amount" />

Annual Interest Rate (%) setInterestRate(e.target.value)} placeholder="Enter Interest Rate" />

Loan Tenure (Months) setLoanTenure(e.target.value)} placeholder="Enter Loan Tenure" />

{emiDetails && (

EMI Details

Monthly EMI: ₹{emiDetails.monthlyEMI}

Total Payment: ₹{emiDetails.totalPayment}

Total Interest: ₹{emiDetails.totalInterest}

)}

Stock & Dividend Details

Stock Ticker setStockTicker(e.target.value.toUpperCase())} placeholder="Enter Stock Ticker" />

{loading &&

Loading stock data...

} {error &&

{error}

}

Current Share Price (₹) setSharePrice(e.target.value)} placeholder="Enter Share Price" />

Annual Dividend per Share (₹) setAnnualDividendPerShare(e.target.value)} placeholder="Enter Annual Dividend per Share" />

Number of Shares

{dividendDetails && (

Dividend Income Analysis

Monthly Dividend Income: ₹{dividendDetails.monthlyDividendIncome}

Annual Dividend Income: ₹{dividendDetails.annualDividendIncome}

)}

{/* Cash Flow Section */} {cashFlowDetails && emiDetails && dividendDetails && (

Cash Flow Analysis

Monthly Cash Flow

Monthly Dividend Income: ₹{dividendDetails.monthlyDividendIncome}
Monthly EMI: ₹{emiDetails.monthlyEMI}
Net Monthly Cash Flow: = 0 ? "positive-cash-flow" : "negative-cash-flow"}> ₹{cashFlowDetails.monthlyCashFlow}

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request) { return new Response( ` Loan EMI & Dividend Calculator

`, { headers: { "content-type": "text/html" }, }, ); }

bheemanadam