import React, { useState, useMemo } from "react";
import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from "recharts";
// SIP Calculator - Single-file React component
// Uses Tailwind CSS for styling. Default export is the component.
export default function SIPCalculator() {
const [monthly, setMonthly] = useState(10000);
const [annualReturn, setAnnualReturn] = useState(12);
const [years, setYears] = useState(10);
const [logo, setLogo] = useState(null);
const [investedColor, setInvestedColor] = useState("#2563EB"); // blue
const [returnsColor, setReturnsColor] = useState("#10B981"); // green
const [thirdColor, setThirdColor] = useState(""); // optional third color (not used in pie by default)
const [useAnnuityDue, setUseAnnuityDue] = useState(false);
// Format number in INR
const fmtINR = (value) => {
try {
return new Intl.NumberFormat("en-IN", { style: "currency", currency: "INR", maximumFractionDigits: 0 }).format(value);
} catch (e) {
return `₹${Math.round(value).toLocaleString()}`;
}
};
// SIP future value calculation (end-of-period by default)
// FV = P * [ ((1+r)^n - 1) / r ] * (1 + r)^0 for end-of-period
// If annuity-due (contribution at beginning), multiply by (1 + r)
const results = useMemo(() => {
const P = Number(monthly) || 0;
const annual = Number(annualReturn) || 0;
const yrs = Number(years) || 0;
const n = yrs * 12;
const r = annual / 100 / 12;
let fv = 0;
if (r === 0) {
fv = P * n;
} else {
fv = P * ((Math.pow(1 + r, n) - 1) / r);
if (useAnnuityDue) fv *= (1 + r);
}
const invested = P * n;
const totalReturns = Math.max(0, fv - invested);
return {
futureValue: fv,
invested,
totalReturns,
months: n,
};
}, [monthly, annualReturn, years, useAnnuityDue]);
const pieData = [
{ name: "Invested", value: Math.round(results.invested) },
{ name: "Returns", value: Math.round(results.totalReturns) },
];
// handle logo upload
const onLogoChange = (e) => {
const file = e.target.files?.[0];
if (!file) return;
const url = URL.createObjectURL(file);
setLogo({ file, url });
};
return (
{logo ? (
) : (
Logo
)}
SIP Calculator (Monthly)
Enter monthly SIP (₹), expected annual return (%) and tenure (years).
Upload Logo
Monthly investment (₹)
setMonthly(e.target.value)} className="mt-1 block w-full rounded-lg border p-3" />
}
top of page
About us In early 2021, we opened our doors for the first time and haven’t closed them since. Fund Masters now leads the Investment market with unsurpassed service.
We hold ourselves to the highest standards with everything we do. A united vision, steady leadership, and a focus on integrity allow us to embrace the challenges our clients face and overcome them through transparent analysis and collaboration.
We apply new methods of thinking with technological tools and services to create more opportunities for our clients. From start to finish, we always strive to succeed by working together honestly and respectfully.
bottom of page