\n \n {children}\n
\n {screenWidth >= __md_breakpoint__ && \n \n {title}\n
\n \n \n {(suffix ? \"\" : \"₹\") + formatNumber(value.toString()) + (suffix ?? \"\")}\n
\n \n );\n};\n\nexport default ChartLegend;\n","import React, { useState } from \"react\";\nimport { Cell, Pie, PieChart, ResponsiveContainer } from \"recharts\";\n\nconst chartColors = [\n \"#FC7A69\",\n \"#075955\",\n \"#27ABA7\",\n \"#7B67C1\",\n \"#FFBFB5\",\n \"#A3E3E3\",\n];\n\ninterface DonutChartProps {\n width?: string | number;\n height?: string | number;\n aspect?: number;\n top?: number;\n bottom?: number;\n left?: number;\n right?: number;\n layoutDir?: \"row\" | \"col\";\n data: {\n name: string;\n value: number;\n }[];\n}\n\nconst renderCustomizedLabel = ({\n cx,\n cy,\n midAngle,\n innerRadius,\n outerRadius,\n percent,\n index,\n}: {\n cx: number;\n cy: number;\n midAngle: number;\n innerRadius: number;\n outerRadius: number;\n percent: number;\n index: number;\n}) => {\n const RADIAN = Math.PI / 180;\n\n const radius = innerRadius + (outerRadius - innerRadius) * 0.5;\n const x = cx + radius * Math.cos(-midAngle * RADIAN);\n const y = cy + radius * Math.sin(-midAngle * RADIAN);\n\n return (\n \n Calculate Instantly\n
\n \n
\n \n \n \n );\n};\n\nexport default Tooltip;\n","import React from \"react\";\nimport { pieColors, formatNumber, legendProp } from \"../utils\";\nimport ChartLegend from \"./chartLegend\";\nimport DonutChart from \"./donutChart\";\nimport ResultLayout from \"./resultLayout\";\nimport Tooltip from \"./tooltip\";\n\ninterface DonutResultProps {\n data: { name: string; value: number }[];\n extendedLegends?: legendProp[];\n chartWidth?: string | number;\n chartHeight?: string | number;\n chartAspect?: number;\n totalData?: legendProp;\n assumptions?: string[];\n}\n\nconst DonutResult: React.FC\n {assumptions.map((assumption, idx) => {\n return (\n
\n \n
\n );\n })}\n {assumption}
\n \n \n
\n \n
\n \n
\n \n
\n \n {data.map((legend, idx) => (\n
\n \n {extendedLegends?.map((legend, idx) => (\n
\n {totalData && (\n \n )}\n
\n {totalData && (\n <>\n
\n \n
\n \n )}\n {assumptions && {totalData.name}
\n \n ₹{formatNumber(totalData.value.toString())}\n
\n \n
\n );\n};\n\nexport default FormLayout;\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { extractNumber, formatNumber } from \"../utils\";\n\ninterface TextFieldProps {\n prefix?: string;\n value: number;\n optional?: boolean;\n min?: number;\n max?: number;\n allowDecimal?: boolean;\n errorMessage?: string;\n setError: (newError: \"min\" | \"max\" | \"empty\" | undefined) => void;\n setValue:\n | React.Dispatch\n Calculate Instantly\n
\n \n {children}\n
\n {screenWidth < __md_breakpoint__ && {errorMessage}
\n )}\n \n );\n};\n\nexport default NumberField;\n","import React from \"react\";\n\ninterface QuestionTitleProps {\n responsePreview?: string;\n title: string;\n error?: boolean;\n}\n\nconst QuestionTitle: React.FC\n
\n \n \n {title}\n
\n {responsePreview}
\n \n );\n};\n\nexport default QuestionTitle;\n","import React, { useState } from \"react\";\nimport NumberField from \"./numberField\";\nimport QuestionTitle from \"./questionTitle\";\n\ninterface NumberFieldSectionProps {\n title: string;\n description?: string;\n allowDecimal?: boolean;\n value: number;\n min?: number;\n max?: number;\n optional?: boolean;\n suffix?: string;\n prefix?: string;\n previewSuffix?: string;\n setValue: React.Dispatch\n \n {description}\n
\n )}\n \n
\n );\n};\n\nexport default RangeSlider;\n","import React from \"react\";\nimport QuestionTitle from \"./questionTitle\";\nimport RangeSlider from \"./rangeSlider\";\n\ninterface SliderSectionProps {\n thumbRef?: React.RefObject{min}
\n \n {\n if (newValue < disabledPosition) onChange(disabledPosition);\n else onChange(newValue);\n }}\n >\n \n 0 ? disabledWidth + 15 : 0,\n height: \"3px\",\n }}\n className=\"absolute bg-black20\"\n />\n
\n {max}
\n \n \n {description}\n
\n )}\n \n
\n );\n return null;\n};\n\nexport default BarChartToolTip;\n","import React from \"react\";\n\ninterface BarLabelProps {\n x?: number;\n y?: number;\n fill?: string;\n rate: string;\n}\n\nconst BarLabel: React.FC\n
\n {BarLabels[label]}
\n \n ₹{\" \"}\n {formatNumber(\n (\n payload[0].value + (payload[1] ? payload[1].value : 0)\n ).toString()\n )}\n
\n \n
\n \n \n \n abbreviateNumber(tick)}\n />\n \n
\n \n Total Corpus at Retirement\n
\n \n
\n
\n
\n \n
\n \n
\n
\n \n
\n \n ₹\n {formatNumber(\n (\n npsData.maturityValue +\n npsData.totalAnnuity +\n npsData.totalInvestment\n ).toString()\n )}\n
\n \n Total Maturity\n
\n \n
\n \n Annuity
\n \n {options.map((option, idx) => (\n
\n );\n};\n\nconst SelectOption: React.FC\n \n {description}\n
\n )}\n \n \n );\n};\n\nexport default SelectSection;\n","import React, { useMemo, useState } from \"react\";\nimport CalculatorLayout from \"../components/calculatorLayout\";\nimport { __interest_rate__ } from \"../utils\";\nimport FormLayout from \"../components/formLayout\";\nimport SelectSection from \"../components/selectSection\";\nimport SliderSection from \"../components/sliderSection\";\nimport NumberFieldSection from \"../components/numberFieldSection\";\nimport DonutResult from \"../components/donutResult\";\n\nconst yearlyInvestmentMin = 6000;\nconst yearlyInvestmentMax = 150000;\n\ninterface PpfData {\n maturityValue: number;\n totalInterest: number;\n totalInvestment: number;\n}\n\nfunction calculatePpf(\n ppfBalance: number,\n numberOfYears: number,\n investmentAmount: number,\n investmentFrequencyOption: number\n): PpfData {\n let add: number = 0;\n let investmentFrequency = 0;\n if (investmentFrequencyOption === 0) {\n add =\n investmentAmount * (__interest_rate__ / 1200) * 6 * 13 +\n investmentAmount * 12 +\n ppfBalance;\n investmentFrequency = 12;\n } else if (investmentFrequencyOption === 1) {\n add =\n investmentAmount * (__interest_rate__ / 1200) * 30 +\n investmentAmount * 4 +\n ppfBalance;\n investmentFrequency = 4;\n } else if (investmentFrequencyOption === 2) {\n add =\n investmentAmount * (__interest_rate__ / 1200) * 18 +\n investmentAmount * 2 +\n ppfBalance;\n investmentFrequency = 2;\n } else {\n add =\n investmentAmount * (__interest_rate__ / 1200) * 12 +\n investmentAmount +\n ppfBalance;\n investmentFrequency = 1;\n }\n let maturityValue: number = 0;\n for (let i = 0; i < numberOfYears; i++) {\n maturityValue = maturityValue * (1 + __interest_rate__ / 100) + add;\n }\n const totalInvestment = Math.ceil(\n investmentAmount * numberOfYears * investmentFrequency\n );\n const totalInterest: number = Math.ceil(maturityValue) - totalInvestment;\n\n return {\n maturityValue: Math.ceil(maturityValue),\n totalInterest,\n totalInvestment,\n };\n}\n\nconst PpfCalculator: React.FC = () => {\n const [numberOfYears, setNumberOfYears] = useState\n item !== undefined) ? true : false}\n title={title}\n />\n \n =\n
\n \n {values.map((value, idx) => (\n \n \n +\n
\n )}\n \n ))}\n\n \n {\n const newErrors = [...errors];\n newErrors[idx] = newError;\n setErrors(newErrors);\n }}\n />\n
\n {idx < values.length - 1 && (\n \n {descriptions[idx]}\n
\n \n
\n \n \n );\n else\n return (\n {totalDescription}
\n \n {prefix}\n
\n \n {values.reduce((a, b) => a + b, 0)}\n
\n \n e !== undefined) ? true : false}\n title={title}\n />\n
\n );\n};\n\nexport default MultipleNumberFieldSection;\n","import React from \"react\";\n\ninterface ToggleProps {\n label1: string;\n label2: string;\n selected: 0 | 1;\n setSelected: React.Dispatch\n {values.map((value, idx) => (\n \n \n ))}\n =\n \n \n {totalDescription}\n \n
\n \n {\n const newErrors = [...errors];\n newErrors[idx] = newError;\n setErrors(newErrors);\n }}\n />\n
\n \n {idx < values.length && idx > 0 && (\n +\n )}\n {descriptions[idx]}\n
\n \n {prefix}\n
\n \n \n {values.reduce((a, b) => a + b, 0)}\n
\n \n {screenWidth >= __md_breakpoint__ && (\n ({ name: item[0], value: item[1] }))\n .concat([\n {\n name: \"Provident Fund\",\n value: salaryData.providentFund,\n },\n {\n name: \"Professional Tax\",\n value: salaryData.professionalTax,\n },\n ])}\n />\n )}\n
\n \n
\n \n {getChartData().map((dataItem, idx) => (\n
\n
\n
\n Deductions
\n {getDeductionsData().map((dataItem, idx) => (\n \n
\n
\n Total Deductions
\n \n ₹\n {formatNumber(\n getDeductionsData()\n .map((dataItem) => dataItem[1])\n .reduce((a, b) => a + b, 0)\n .toString()\n )}\n
\n \n
\n
\n Net Salary
\n \n ₹{formatNumber(salaryData.netSalary.toString())}\n
\n \n
\n Income Tax
\n \n -₹\n {formatNumber(salaryData.incomeTax.toString())}\n
\n \n
\n \n
\n Net Salary Post Tax
\n \n ₹{formatNumber(salaryData.postTaxSalary.toString())}\n
\n \n *\n The basic salary is calculated as\n {\n setBasicSalaryRateError(\"\");\n let newBasicSalaryRate = basicSalaryRate;\n if (!isNaN(parseFloat(e.currentTarget.value))) {\n newBasicSalaryRate = parseInt(e.currentTarget.value);\n setBasicSalaryRateInput(newBasicSalaryRate.toString());\n } else if (e.currentTarget.value.trim() === \"\") {\n setBasicSalaryRateInput(e.currentTarget.value.trim());\n newBasicSalaryRate = 0;\n }\n if (newBasicSalaryRate > 100) {\n newBasicSalaryRate = 100;\n setBasicSalaryRateError(\n \"Basic Salary Rate cannot be greater than 100.\"\n );\n }\n if (newBasicSalaryRate < 20) {\n newBasicSalaryRate = 20;\n setBasicSalaryRateError(\n \"Basic Salary Rate cannot be less than 20.\"\n );\n }\n setBasicSalaryRate(newBasicSalaryRate);\n }}\n />\n % of the CTC.\n
\n \n {basicSalaryRateError}\n
\n \n setIsOpen(!isOpen)}\n >\n {options[index]}\n ![\"\"](\"/assets/down-arrow.png\")
\n
\n \n \n {isOpen\n ? options.map((option, idx) => (\n {\n setIndex(idx);\n setIsOpen(!isOpen);\n }}\n >\n {option}\n \n ))\n : null}\n
\n \n );\n};\n\nexport default DropDown;\n","import React, { useMemo } from \"react\";\nimport CalculatorLayout from \"../components/calculatorLayout\";\nimport DonutResult from \"../components/donutResult\";\nimport DropDown from \"../components/dropDown\";\nimport FormLayout from \"../components/formLayout\";\nimport NumberFieldSection from \"../components/numberFieldSection\";\nimport SelectSection from \"../components/selectSection\";\n\nconst durationUnits: string[] = [\n \"Days\",\n \"Months\",\n \"Quarters\",\n \"Half-Years\",\n \"Years\",\n];\n\ninterface InterestData {\n principal: number;\n interest: number;\n totalAmount: number;\n}\n\nfunction calculateInterest(\n type: number,\n compoundFrequency: number,\n principal: number,\n rate: number,\n durationUnit: number,\n duration: number\n): InterestData {\n if (type) {\n let n,\n durationMultiplier = 1;\n if (compoundFrequency === 0) {\n n = 365;\n if (durationUnit === 0) durationMultiplier = 1;\n else if (durationUnit === 1) durationMultiplier = 30;\n else if (durationUnit === 2) durationMultiplier = 91;\n else if (durationUnit === 3) durationMultiplier = 182;\n else durationMultiplier = 365;\n } else if (compoundFrequency === 1) {\n n = 12;\n if (durationUnit === 0) durationMultiplier = 1;\n else if (durationUnit === 1) durationMultiplier = 3;\n else if (durationUnit === 2) durationMultiplier = 6;\n else durationMultiplier = 12;\n } else if (compoundFrequency === 2) {\n n = 4;\n if (durationUnit === 0) durationMultiplier = 1;\n else if (durationUnit === 1) durationMultiplier = 2;\n else durationMultiplier = 4;\n } else if (compoundFrequency === 3) {\n n = 2;\n if (durationUnit === 0) durationMultiplier = 1;\n else durationMultiplier = 2;\n } else n = 1;\n\n const totalAmount = Math.round(\n principal * Math.pow(1 + rate / 100 / n, durationMultiplier * duration)\n );\n return {\n principal,\n interest: totalAmount - principal,\n totalAmount,\n };\n }\n let t = 0;\n if (durationUnit === 0) t = duration / 365;\n else if (durationUnit === 1) t = duration / 12;\n else if (durationUnit === 2) t = duration / 4;\n else if (durationUnit === 3) t = duration / 2;\n else if (durationUnit === 4) t = duration;\n const totalAmount = Math.round(principal * (1 + (rate / 100) * t));\n return {\n principal,\n interest: totalAmount - principal,\n totalAmount,\n };\n}\n\nconst InterestCalculator: React.FC = () => {\n const [type, setType] = React.useState\n
\n \n
\n \n Calculate Instantly\n
\n \n Gratuity Amount\n
\n \n If you're covered\n
\n \n ₹{formatNumber(gratuityData.covered.toString())}\n
\n \n If you're not covered\n
\n \n ₹{formatNumber(gratuityData.uncovered.toString())}\n
\n \n
\n \n
\n \n
\n
\n \n
\n Total Amount
\n \n ₹{formatNumber(interestRateData.totalAmount.toString())}\n
\n \n
\n \n
\n Interest Rate
\n \n {formatNumber(interestRateData.rate.toString())}%\n
\n \n
\n \n
\n \n \n ₹{formatNumber(rpcData.annualIncome.toString())}\n
\n \n Annual income required immediately after retirement\n
\n \n \n ₹{formatNumber(rpcData.inflationMonthlyIncome.toString())}\n
\n \n Inflation adjusted monthly income at retirement\n
\n \n \n ₹{formatNumber(rpcData.corpusAmount.toString())}\n
\n \n \n Corpus required at the age of retirement\n
\n \n \n ₹{formatNumber(rpcData.monthlySavings.toString())}\n
\n \n \n \n \n Monthly savings\n
\n \n
\n\n \n
\n \n
\n \n
\n \n
\n \n Total yearly income\n
\n \n ₹{formatNumber((monthlyIncome * 12).toString())}\n
\n \n
\n setselected(0)}\n className={\n \"text-xs px-3 lg:px-5 py-1 cursor-pointer rounded-full \" +\n (selected === 0 ? \"bg-gt20\" : \"text-gt20 md:text-gt80\")\n }\n >\n {\"Daily\"}\n
\n \n
\n \n
\n \n Sutta expense\n
\n \n ₹\n {selected === 0\n ? formatNumber(chaiSuttaData.smokingExpense.toString())\n : selected === 1\n ? formatNumber((chaiSuttaData.smokingExpense * 7).toString())\n : selected === 2\n ? formatNumber((chaiSuttaData.smokingExpense * 30).toString())\n : formatNumber((chaiSuttaData.smokingExpense * 365).toString())}\n
\n \n
\n\n \n
\n \n Chai expense\n
\n \n ₹\n {selected === 0\n ? formatNumber(chaiSuttaData.chaiExpense.toString())\n : selected === 1\n ? formatNumber((chaiSuttaData.chaiExpense * 7).toString())\n : selected === 2\n ? formatNumber((chaiSuttaData.chaiExpense * 30).toString())\n : formatNumber((chaiSuttaData.chaiExpense * 365).toString())}\n
\n \n
\n \n
\n \n Total expense\n
\n \n ₹\n {selected === 0\n ? formatNumber(chaiSuttaData.TotalExpense.toString())\n : selected === 1\n ? formatNumber((chaiSuttaData.TotalExpense * 7).toString())\n : selected === 2\n ? formatNumber((chaiSuttaData.TotalExpense * 30).toString())\n : formatNumber((chaiSuttaData.TotalExpense * 365).toString())}\n
\n \n
\n\n \n
\n \n
\n \n
\n \n
\n \n Total yearly income\n
\n \n ₹{formatNumber((monthlyIncome * 12).toString())}\n
\n \n\n
\n
\n \n
\n \n Fuel cost for your own vehicle (daily)\n
\n \n ₹ {formatNumber(fuelData.fuelCost.toString())}\n
\n \n
\n\n \n
\n \n Fuel cost for your own vehicle (monthly)\n
\n \n ₹ {formatNumber((fuelData.fuelCost * 30).toString())}\n
\n \n
\n \n
\n \n Fuel cost for your own vehicle (yearly)\n
\n \n ₹ {formatNumber((fuelData.fuelCost * 365).toString())}\n
\n \n \n {children}\n
\n \n );\n};\n\nexport default MainLayout;\n","import React, { useState, useEffect, useRef } from \"react\";\nimport { formatNumber } from \"../../utils\";\n\ninterface AnimatedCounterProps {\n value: number;\n}\n\nconst AnimatedCounter: React.FC\n {formatNumber(displayValue.toString())} {/* Format number with commas */}\n
\n );\n};\n\nexport default AnimatedCounter;\n","import React from \"react\";\nimport { formatNumber } from \"../../utils\";\nimport AnimatedCounter from \"../../components/v2/animationCounter\";\n\ninterface ChartLegendProps {\n bulletColor: string;\n suffix?: string;\n title: string;\n value: number;\n textSize?: \"text-xs\" | \"text-sm\";\n smDirection?: \"flex-col\" | \"flex-row\";\n smMarginY?: \"my-6\" | \"my-1\";\n}\n\nconst ChartLegend: React.FC\n \n
\n {title}
\n \n {suffix ? \"\" : \"₹ \"}\n
\n \n );\n};\n\nexport default ChartLegend;\n","import React from \"react\";\nimport { Cell, Pie, PieChart, ResponsiveContainer } from \"recharts\";\n\nconst chartColors = [\"#767676\", \"#E36E64\", \"#B7352A\", \"#101112\"];\n\ninterface DonutChartProps {\n width?: string | number;\n height?: string | number;\n aspect?: number;\n top?: number;\n bottom?: number;\n left?: number;\n right?: number;\n layoutDir?: \"row\" | \"col\";\n data: {\n name: string;\n value: number;\n }[];\n}\n\nconst DonutChart: React.FC\n \n {children}\n
\n \n );\n};\n\nexport default ResultLayout;\n","import React from \"react\";\nimport { pieColorsV2, formatNumber, legendProp } from \"../../utils\";\nimport ChartLegend from \"./chartLegend\";\nimport DonutChart from \"./donutChart\";\nimport ResultLayout from \"./resultLayout\";\nimport AnimatedCounter from \"../../components/v2/animationCounter\";\n\ninterface DonutResultProps {\n data: { name: string; value: number }[];\n extendedLegends?: legendProp[];\n chartWidth?: string | number;\n chartHeight?: string | number;\n chartAspect?: number;\n totalData?: legendProp;\n assumptions?: string[];\n}\n\nconst DonutResult: React.FC\n
\n \n
\n \n
\n \n {data.map((legend, idx) => (\n
\n \n {totalData && (\n <>\n
\n \n
\n \n )}\n \n {totalData.name}\n
\n \n \n ₹{\" \"}\n \n
\n \n
\n );\n};\n\nexport default FormLayout;\n","import React, { useEffect } from \"react\";\nimport {\n SliderHandle,\n SliderInput,\n SliderRange,\n SliderTrack,\n} from \"@reach/slider\";\n\ninterface SliderProps {\n thumbRef?: React.RefObject\n
\n \n {children}\n
\n \n
\n );\n};\n\nexport default RangeSlider;\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { extractNumber, formatNumber } from \"../../utils\";\n\ninterface TextFieldProps {\n prefix?: string;\n suffix?: string;\n value: number;\n valueName: string;\n optional?: boolean;\n description?: string;\n min?: number;\n max?: number;\n allowDecimal?: boolean;\n errorMessage?: string;\n inputWidth?: string;\n setError: (newError: \"min\" | \"max\" | \"empty\" | undefined) => void;\n setInputField: (ip: boolean) => void;\n setValue: (newName: string, newVal: number) => void;\n}\n\nconst NumberField: React.FC\n {\n onChange(valueName, newValue);\n }}\n >\n \n 0 ? disabledWidth + 15 : 0,\n height: \"4px\",\n }}\n className=\"absolute bg-lightContentAccent\"\n />\n
\n \n
\n \n );\n};\n\nexport default NumberField;\n","import React from \"react\";\n\ninterface QuestionTitleProps {\n responsePreview?: string;\n title: string;\n error?: boolean;\n errorMessage?: string;\n value: number;\n min?: number;\n max?: number;\n}\n\nconst QuestionTitle: React.FC\n \n \n {prefix}\n \n \n {\n setCaretPosition(e.target.selectionStart ?? 0);\n if (e.target.value.trim() === \"\") return setInputValue(\"\");\n\n if (!/^[\\d.]+$/.test(e.target.value.slice(-1))) {\n setInputValue(\n formatNumber(e.target.value.slice(0, -1).toString())\n );\n } else if (!allowDecimal && e.target.value.slice(-1) === \".\") {\n setInputValue(\n formatNumber(e.target.value.slice(0, -1).toString())\n );\n } else if (\n e.target.value.endsWith(\".\") &&\n e.target.value.slice(0, -1).includes(\".\")\n ) {\n setInputValue(\n formatNumber(e.target.value.slice(0, -1).toString())\n );\n } else {\n setInputValue(e.target.value);\n }\n }}\n inputMode=\"numeric\"\n type=\"text\"\n value={\n inputValue.endsWith(\".\")\n ? inputValue\n : formatNumber(value.toLocaleString(\"en-IN\"))\n }\n />\n \n {suffix}\n \n {description}\n \n
\n \n
\n );\n};\n\nexport default QuestionTitle;\n","import React, { useState } from \"react\";\nimport NumberField from \"./numberField\";\nimport QuestionTitle from \"./questionTitle\";\nimport { formatNumber } from \"../../utils\";\n\ninterface NumberFieldSectionProps {\n title: string;\n description?: string;\n allowDecimal?: boolean;\n valueName: string;\n value: number;\n min?: number;\n max?: number;\n optional?: boolean;\n suffix?: string;\n prefix?: string;\n previewSuffix?: string;\n setValue: (name: string, value: number) => void;\n responsePreview?: string;\n showPreview?: boolean;\n inputWidth?: string;\n}\n\nconst NumberFieldSection: React.FC\n
\n \n {title}\n {errorMessage &&\n error &&\n ((min && value < min) || (max && value > max)) && (\n {errorMessage}\n )}\n
\n \n \n setValue(valueName, value)\n }\n prefix={prefix}\n suffix={suffix}\n errorMessage={\n error === \"min\"\n ? `${title} can not be less than ${min}.`\n : error === \"max\"\n ? `${title} can not be more than ${max}.`\n : error === \"empty\"\n ? `${title} can not be empty.`\n : undefined\n }\n setError={setError}\n setInputField={setInputField}\n />\n
\n );\n};\n\nexport default NumberFieldSection;\n","import React from \"react\";\nimport RangeSlider from \"./rangeSlider\";\nimport NumberFieldSection from \"../../components/v2/numberFieldSection\";\n\ninterface SliderSectionProps {\n thumbRef?: React.RefObject\n \n setValue(newName, newValue)\n }\n min={min}\n max={max}\n title={title}\n valueName={valueName}\n value={value}\n prefix={prefix}\n suffix={suffix}\n inputWidth={inputWidth}\n description={description}\n responsePreview={showPreview !== false ? value.toString() : \"\"}\n />\n\n \n setValue(newName, newValue)\n }\n max={max}\n min={min}\n step={step}\n disabledWidth={disabledWidth}\n disabledPosition={disabledPosition}\n thumbRef={thumbRef}\n trackRef={trackRef}\n />\n
\n );\n};\n\nexport default SliderSection;\n","import React from \"react\";\n\ninterface BannerProps {\n description: string;\n}\n\nconst Banner: React.FC\n \n ![\"\"](\"/assets/star-icon.svg\")
\n
\n \n );\n};\n\nexport default Banner;\n","import React, { useEffect, useState } from \"react\";\n\ninterface DropDownProps {\n options: string[];\n index: number;\n setIndex: React.Dispatch\n \n {description}\n
\n \n setIsOpen(!isOpen)}\n >\n {options[index]}\n
\n \n {isOpen\n ? options.map((option, idx) => (\n {\n setIndex(idx);\n setIsOpen(!isOpen);\n }}\n >\n {option}\n \n ))\n : null}\n
\n \n );\n};\n\nexport default DropDown;\n","import React, { useState } from \"react\";\n\ninterface CollapsibleProps {\n title: React.ReactNode;\n children: React.ReactNode;\n}\n\nconst Collapsible: React.FC\n \n {title}\n
\n {children}
}\n \n \n );\n};\n\nexport default Collapsible;\n","import React from \"react\";\nimport Collapsible from \"../../components/v2/collapsible\";\nimport { formatNumber } from \"../../utils\";\nimport AnimatedCounter from \"../../components/v2/animationCounter\";\n\ninterface Installment {\n installmentNumber: number;\n installmentMonth: string;\n installmentYear: string;\n installmentMonthNumber: number;\n openingBalance: string;\n principal: string;\n monthlyInterest: string;\n monthlyPayment: string;\n partPaymentMade: string;\n monthlyPaymentWithPartPayment: string;\n remainingLoanAmount: string;\n loanPaid: string;\n}\n\ninterface HomeLoanEmiData {\n principal: number;\n totalInterest: number;\n monthlyEmi: number;\n totalPartPayment: number;\n emiStartDate: string;\n monthlyPayment: number;\n totalAmount: number;\n amortizationSchedule: Installment[][];\n processingFees: number;\n prepaymentFrequency: number;\n}\n\ninterface ScheduleTableProps {\n homeLoanEmiData: HomeLoanEmiData;\n prepaymentFrequency: number;\n prepaymentDate: string;\n setHeight: (showschedule: boolean) => void;\n}\n\nconst ScheduleTable: React.FC\n 0 ? \"w-1/6\" : \"w-1/5\"}`}\n >\n Principal
(A)\n
\n \n \n \n \n \n Year\n \n \n Monthly EMI Breakup\n \n \n Principal
(A)\n \n\n Interest
(B)\n \n {homeLoanEmiData.totalPartPayment > 0 && (\n\n Pre-payment
(C)\n \n )}\n\n Total Payment
(A+B+C)\n \n\n Loan paid
to date\n \n \n \n \n {homeLoanEmiData.amortizationSchedule &&\n homeLoanEmiData.amortizationSchedule.map(\n (row: Installment[], index: number) => {\n const principalAmounts = row.map((x: Installment) =>\n Number(x.principal.replace(/,/g, \"\"))\n );\n\n const totalPrincipalAmounts = principalAmounts.reduce(\n (acc: number, curr: number) => acc + curr\n );\n\n const interestAmounts = row.map((x: Installment) =>\n Number(x.monthlyInterest.replace(/,/g, \"\"))\n );\n\n const totalInterestAmounts = interestAmounts.reduce(\n (acc: number, curr: number) => acc + curr\n );\n\n const prepaymentAmounts = row.map((x: Installment) =>\n Number(x.partPaymentMade.replace(/,/g, \"\"))\n );\n\n const totalPrepaymentAmounts = prepaymentAmounts.reduce(\n (acc: number, curr: number) => acc + curr\n );\n\n const totalAmount = row.map((x: Installment) =>\n Number(x.monthlyPaymentWithPartPayment.replace(/,/g, \"\"))\n );\n\n const totalAmounts = totalAmount.reduce(\n (acc: number, curr: number) => acc + curr\n );\n\n const loanPaid = row.map((x: Installment) =>\n Number(x.loanPaid.replace(/,/g, \"\"))\n );\n\n const avarageLoanPaid = loanPaid[loanPaid.length - 1];\n\n return (\n \n \n {row[0].installmentYear}\n \n \n \n {row.map((el: Installment) => {\n const totalEmiAmount =\n Number(el.principal.replace(/,/g, \"\")) +\n Number(el.monthlyInterest.replace(/,/g, \"\")) +\n (Number(el.partPaymentMade) > 0\n ? Number(el.partPaymentMade.replace(/,/g, \"\"))\n : 0);\n\n const el_principal = Number(\n el.principal.replace(/,/g, \"\")\n );\n const principalPercentage = Math.round(\n (el_principal / totalEmiAmount) * 100\n );\n\n const el_interest = Number(\n el.monthlyInterest.replace(/,/g, \"\")\n );\n const interestPercentage = Math.round(\n (el_interest / totalEmiAmount) * 100\n );\n\n const el_partpayment = Number(\n el.partPaymentMade.replace(/,/g, \"\")\n );\n const partpaymentPercentage = Math.round(\n (el_partpayment / totalEmiAmount) * 100\n );\n\n return el.openingBalance !== \"0\" ? (\n \n \n \n \n 0\n ? \"170px\"\n : \"142px\",\n width: \"220px\",\n left: \"-98px\",\n }}\n >\n \n \n \n \n \n \n \n \n \n {avarageLoanPaid}%\n \n \n );\n }\n )}\n \n \n
\n (A)\n \n
(B)\n \n {homeLoanEmiData.totalPartPayment > 0 && (\n
(C)\n \n )}\n
(A+B+C)\n \n
to date\n \n
\n {el.installmentMonth}\n
\n\n {el.installmentMonth} {el.installmentYear}\n
\n\n \n {\" \"}\n Principal:{\" \"}\n \n \n ₹{\" \"}\n {formatNumber(el.principal.toString())}\n \n
\n \n \n {\" \"}\n Interest:{\" \"}\n \n \n ₹{\" \"}\n {formatNumber(\n el.monthlyInterest.toString()\n )}\n \n
\n {Number(\n el.partPaymentMade.replace(/,/g, \"\")\n ) > 0 && (\n \n \n {\" \"}\n Pre-Payment:{\" \"}\n \n \n ₹ {el.partPaymentMade}\n \n
\n )}\n\n \n \n {\" \"}\n EMI amount:{\" \"}\n \n \n ₹{\" \"}\n {formatNumber(\n (\n Number(\n el.principal.replace(/,/g, \"\")\n ) +\n Number(\n el.monthlyInterest.replace(\n /,/g,\n \"\"\n )\n ) +\n (Number(el.partPaymentMade) > 0\n ? Number(\n el.partPaymentMade.replace(\n /,/g,\n \"\"\n )\n )\n : 0)\n ).toString()\n )}\n \n
\n \n \n \n ) : (\n \n
\n );\n })}\n \n \n \n {el.installmentMonth}\n
\n\n ₹{\" \"}\n
\n \n \n ₹{\" \"}\n
\n \n {prepaymentFrequency &&\n prepaymentFrequency == 2 &&\n Number(row[0].installmentYear) ===\n new Date(prepaymentDate).getFullYear() &&\n homeLoanEmiData.totalPartPayment > 0 ? (\n \n ₹{\" \"}\n
\n \n ) : homeLoanEmiData.totalPartPayment > 0 ? (\n \n ₹{\" \"}\n
\n \n ) : null}\n \n ₹{\" \"}\n
\n \n\n \n \n 0 ? \"w-1/6\" : \"w-1/5\"}`}\n style={{\n borderLeft: \"1px solid rgb(43, 45, 51, 0.12)\",\n borderRight: \"1px solid rgb(43, 45, 51, 0.12)\",\n }}\n >\n Year\n
\n (A)\n
(B)\n \n {homeLoanEmiData.totalPartPayment > 0 && (\n
(C)\n \n )}\n
(A+B+C)\n \n
to date\n \n \n
\n {homeLoanEmiData.amortizationSchedule &&\n homeLoanEmiData.amortizationSchedule.map(\n (row: Installment[], index: number) => {\n const principalAmounts = row.map((x: Installment) =>\n Number(x.principal.replace(/,/g, \"\"))\n );\n\n const totalPrincipalAmounts = principalAmounts.reduce(\n (acc: number, curr: number) => acc + curr\n );\n\n const interestAmounts = row.map((x: Installment) =>\n Number(x.monthlyInterest.replace(/,/g, \"\"))\n );\n\n const totalInterestAmounts = interestAmounts.reduce(\n (acc: number, curr: number) => acc + curr\n );\n\n const prepaymentAmounts = row.map((x: Installment) =>\n Number(x.partPaymentMade.replace(/,/g, \"\"))\n );\n\n const totalPrepaymentAmounts = prepaymentAmounts.reduce(\n (acc: number, curr: number) => acc + curr\n );\n\n const totalAmount = row.map((x: Installment) =>\n Number(x.monthlyPaymentWithPartPayment.replace(/,/g, \"\"))\n );\n\n const totalAmounts = totalAmount.reduce(\n (acc: number, curr: number) => acc + curr\n );\n\n const loanPaid = row.map((x: Installment) =>\n Number(x.loanPaid.replace(/,/g, \"\"))\n );\n\n const avarageLoanPaid = loanPaid[loanPaid.length - 1];\n\n return (\n 0\n ? \"w-1/6\"\n : \"w-1/5\"\n }`}\n >\n
\n \n setHeight(false)}\n >\n 0\n ? \"w-1/6\"\n : \"w-1/5\"\n }`}\n style={{\n borderLeft: \"solid 1px rgb(43, 45, 51, 0.12)\",\n borderRight: \"1px solid rgb(43, 45, 51, 0.12)\",\n }}\n >\n
\n \n
\n {row[0].installmentYear}\n \n ₹{\" \"}\n
\n \n ₹{\" \"}\n
\n \n {prepaymentFrequency == 2 &&\n Number(row[0].installmentYear) ==\n new Date(prepaymentDate).getFullYear() &&\n homeLoanEmiData.totalPartPayment > 0 ? (\n \n ₹{\" \"}\n
\n \n ) : homeLoanEmiData.totalPartPayment > 0 ? (\n \n ₹{\" \"}\n
\n \n ) : null}\n \n ₹{\" \"}\n
\n \n \n ₹{\" \"}\n
\n \n \n ₹{\" \"}\n
\n \n {homeLoanEmiData.totalPartPayment > 0 && (\n \n ₹{\" \"}\n
\n \n )}\n\n \n ₹{\" \"}\n
\n \n \n
\n )}\n\n \n \n 12487501 &&\n formValues.loanAmount < 24975000\n ? \"block\"\n : \"hidden\"\n }`}\n alt=\"home-illustration-2\"\n >\n 24975001 &&\n formValues.loanAmount < 37462500\n ? \"block\"\n : \"hidden\"\n }`}\n alt=\"home-illustration-3\"\n >\n 37462501 &&\n formValues.loanAmount < 49950000\n ? \"block\"\n : \"hidden\"\n }`}\n alt=\"home-illustration-4\"\n >\n 49950001 &&\n formValues.loanAmount < 62437500\n ? \"block\"\n : \"hidden\"\n }`}\n alt=\"home-illustration-5\"\n >\n 62437501 &&\n formValues.loanAmount < 74925000\n ? \"block\"\n : \"hidden\"\n }`}\n alt=\"home-illustration-6\"\n >\n 74925001 &&\n formValues.loanAmount < 87412500\n ? \"block\"\n : \"hidden\"\n }`}\n alt=\"home-illustration-7\"\n >\n 87412501 ? \"block\" : \"hidden\"\n }`}\n alt=\"home-illustration-8\"\n >\n
\n \n {location.pathname == \"/home-loan-emi\" ? (\n
\n )}\n \n
\n \n \n EMI\n (Monthly payments)\n \n \n {\" \"}\n ₹{\" \"}\n
\n \n
\n \n
\n \n )}\n {isProcessingFees && (\n \n
\n \n
\n {prepaymentFrequency == 0 && (\n \n
\n \n
\n \n \n Pre-payment amount:\n \n
\n \n {\n if (e.target.value.trim() === \"\") {\n setPrepayment(\"\");\n setCustomPrepayment(\n \"\",\n prepaymentDate ? prepaymentDate : \"\"\n );\n }\n\n if (!/^[\\d.]+$/.test(e.target.value.slice(-1))) {\n setPrepayment(\n formatNumber(\n e.target.value.slice(0, -1).toString()\n )\n );\n } else if (\n e.target.value.endsWith(\".\") &&\n e.target.value.slice(0, -1).includes(\".\")\n ) {\n setPrepayment(\n formatNumber(\n e.target.value.slice(0, -1).toString()\n )\n );\n } else {\n setPrepayment(e.target.value);\n setCustomPrepayment(\n e.target.value,\n prepaymentDate ? prepaymentDate : \"\"\n );\n }\n }}\n />\n
\n \n
\n \n {prepaymentFrequency == 2 ? (\n \n On:\n \n ) : (\n \n Starting from:\n \n )}\n\n {\n setPrepaymentDate(e.target.value);\n setCustomPrepayment(\n prepayment ? prepayment : \"\",\n e.target.value\n );\n }}\n className=\"left-0 opacity-0\"\n style={{\n position: \"absolute\",\n top: -14,\n }}\n />\n
\n \n \n \n {prepaymentDate &&\n new Date(prepaymentDate).toLocaleString(\"default\", {\n month: \"short\",\n })}\n \n \n \n {prepaymentDate &&\n new Date(prepaymentDate).getFullYear()}\n \n \n\n
\n \n
\n )}\n \n \n Total monthly payment\n \n \n (EMI + pre-payment):\n \n
\n\n \n ₹\n \n {formatNumber(\n (\n Number(homeLoanEmiData.monthlyPayment) +\n Number(prepayment.replace(/,/g, \"\"))\n ).toString()\n )}\n \n \n {\" \"}\n /month\n \n
\n \n {\n showPrepayment(false);\n setPrepayment(\"\");\n setCustomPartPaymentSchedule([]);\n setPrepaymentFrequency(0);\n setHeight(displaySchedule ? true : false);\n }}\n >\n Remove\n \n
\n \n
\n )}\n {location.pathname != \"/credit-card-emi\" && (\n \n
\n \n
\n \n \n Processing fees:\n \n
\n \n ₹\n {\n if (e.target.value.trim() === \"\") {\n setProcessingFees(\"\");\n }\n\n if (!/^[\\d.]+$/.test(e.target.value.slice(-1))) {\n setProcessingFees(\n formatNumber(e.target.value.slice(0, -1).toString())\n );\n } else if (\n e.target.value.endsWith(\".\") &&\n e.target.value.slice(0, -1).includes(\".\")\n ) {\n setProcessingFees(\n formatNumber(e.target.value.slice(0, -1).toString())\n );\n } else {\n setProcessingFees(e.target.value);\n }\n }}\n />\n
\n \n {\n showProcessingFees(false);\n setProcessingFees(\"\");\n setHeight(displaySchedule ? true : false);\n }}\n >\n Remove\n \n
\n \n {!isPrepayment && (\n {\n showPrepayment(true);\n setHeight(displaySchedule ? true : false);\n }}\n >\n {\" \"}\n + Add Pre-payments\n \n )}\n {!isProcessingFees && (\n {\n showProcessingFees(true);\n setHeight(displaySchedule ? true : false);\n }}\n >\n {\" \"}\n + Add processing fees\n \n )}\n
\n )}\n\n {location.pathname != \"/credit-card-emi\" && (\n \n
\n )}\n \n \n \n )}\n \n );\n};\n\nexport default HomeLoanEmiCalculator;\n","import React, { useMemo, useEffect } from \"react\";\nimport CalculatorLayout from \"../components/calculatorLayout\";\nimport DonutResult from \"../components/donutResult\";\nimport DropDown from \"../components/dropDown\";\nimport FormLayout from \"../components/formLayout\";\nimport NumberFieldSection from \"../components/numberFieldSection\";\nimport SelectSection from \"../components/selectSection\";\nimport { formatNumber } from \"../utils\";\nimport AnimatedCounter from \"../components/v2/animationCounter\";\n\ninterface InterestData {\n monthlyInterest: number;\n dailyInterest: number;\n}\n\ninterface FormValues {\n [key: string]: string; // Index signature to allow any string keys with string values\n}\n\nfunction calculateInterest(loanAmount: number, rateOfInterest: number) {\n const monthlyInterestRate: number = rateOfInterest / (12 * 100);\n\n let monthlyInterest = Math.round(loanAmount * monthlyInterestRate);\n let dailyInterest = Number((monthlyInterest / 30).toFixed(2));\n\n return {\n monthlyInterest: monthlyInterest,\n dailyInterest: dailyInterest,\n };\n}\n\nconst LoanAgainstMutualFundCalculator: React.FC = () => {\n const [formValues, setFormValues] = React.useState\n
\n {showschedule && (\n \n \n \n {\n showSchedule(!showschedule);\n setHeight(\n screenWidth < __md_breakpoint__ ? false : !showschedule\n );\n }}\n >\n \n Amortization schedule\n \n {showschedule ? (\n
\n \n \n \n
\n \n \n \n EMI start month: \n \n\n
\n \n {\n setEmiStartDate(e.target.value);\n setPrepaymentDate(e.target.value);\n }}\n className=\"left-0 opacity-0\"\n style={{\n position: \"absolute\",\n top: -2,\n }}\n />\n
\n \n \n {emiStartDate &&\n new Date(emiStartDate).toLocaleString(\"default\", {\n month: \"short\",\n })}\n \n \n \n {emiStartDate && new Date(emiStartDate).getFullYear()}\n \n \n\n
\n \n
\n \n {\n handleClick(formValues.loanAmount, rateOfInterest, tenure);\n setShareOption(true);\n }}\n >\n Share\n \n {\n Download(\"amortization_schedule\");\n }}\n >\n Download full EMI chart\n \n
\n {isShare && (\n \n
\n )}\n \n Copy and share below link\n
\n\n
\n {`${location.pathname}/?${location.search}`}
\n\n Download(\"amortization_schedule\")}\n >\n Download full EMI chart\n \n \n handleClick(formValues.loanAmount, rateOfInterest, tenure)\n }\n >\n Share\n \n
*/}\n \n \n \n Interest calculator\n \n
\n \n \n );\n};\n\nexport default LoanAgainstMutualFundCalculator;\n","import React, { useRef, useState, useEffect, useCallback } from \"react\";\nimport QuestionLayout from \"../components/v2/formLayout\";\nimport SliderSection from \"../components/v2/sliderSection\";\nimport { formatNumber, useDebounce } from \"../utils\";\nimport AnimatedCounter from \"../components/v2/animationCounter\";\n\ninterface FormValues {\n [key: string]: number; // Index signature to allow any string keys with number values\n}\n\nfunction calculateAndSetHomeLoanEmiData(\n loanAmount: number,\n rateOfInterest: number,\n tenure: number\n) {\n const monthlyInterestRate: number = rateOfInterest / (12 * 100);\n\n const months: number = tenure;\n const monthlyPayment =\n monthlyInterestRate == 0 || months == 0\n ? 0\n : (loanAmount * monthlyInterestRate) /\n (1 - Math.pow(1 + monthlyInterestRate, -months));\n\n return Math.round(monthlyPayment);\n}\n\nconst PersonalLoanEmiCalculator: React.FC = () => {\n const [formValues, setFormValues] = useState\n
\n\n \n \n
\n \n {\n handleChange(e.target.name, e.target.value);\n }}\n />\n
\n \n Loan amount\n
\n\n {\n handleChange(e.target.name, e.target.value);\n }}\n />\n
\n \n Annual interest rate\n
\n\n
\n \n
\n \n
\n \n \n ₹\n
\n \n Interest-only EMI\n
\n\n \n {\" \"}\n Interest is calculated monthly at{\" \"}\n \n ₹
\n \n
\n \n \n
\n \n Download Jupiter
\n\n
\n \n );\n};\n\nexport default PersonalLoanEmiCalculator;\n","import React from \"react\";\nimport { BrowserRouter as Router, Link, Route, Switch } from \"react-router-dom\";\nimport EpfCalculator from \"./pages/epf\";\nimport NpsCalculator from \"./pages/nps\";\nimport PpfCalculator from \"./pages/ppf\";\nimport RoiCalculator from \"./pages/roi\";\nimport SalaryCalculator from \"./pages/salary\";\nimport InterestCalculator from \"./pages/interest\";\nimport GratuityCalculator from \"./pages/gratuity\";\nimport HraCalculator from \"./pages/hra\";\nimport InterestRateCalculator from \"./pages/interestRate\";\nimport RetirementPlanningCalculator from \"./pages/rpc\";\nimport ChaiSuttaCalculator from \"./pages/chaiSutta\";\nimport FuelCalculator from \"./pages/fuel\";\nimport HomeLoanEmiCalculator from \"./pages/HomeLoanEmi/homeLoanEmi\";\nimport LoanAgainstMutualFundCalculator from \"./pages/loanAgainstMutualFund\";\nimport PersonalLoanCalculator from \"./pages/personalLoan\";\n\nconst App: React.FC = () => {\n return (\n \n
\n\n \n \n \n
\n \n Your EMI\n
\n\n \n {\" \"}\n ₹{\" \"}\n\n
\n \n Check Eligibility
\n\n\n
\n \n Check Eligibility
\n\n\n \n
\n \n EPF Calculator\n
\n \n \n \n NPS Calculator\n
\n \n \n \n PPF Calculator\n
\n \n \n \n ROI Calculator\n
\n \n \n \n Salary Calculator\n
\n \n \n \n Interest Calculator\n
\n \n \n \n Gratuity Calculator\n
\n \n \n \n HRA Calculator\n
\n \n \n \n EMI Calculator\n
\n \n \n \n Interest Rate Calculator\n
\n \n \n \n Retirement Planning Calculator\n
\n \n \n \n Chai Sutta calculator\n
\n \n \n \n Fuel calculator\n
\n \n \n \n Home Loan EMI Calculator\n
\n \n \n \n Credit Card EMI Calculator\n
\n \n \n \n Interest Only Lamf Calculator\n
\n \n \n \n Personal Loan Calculator\n
\n \n