import { useState } from 'react' import { Button } from "/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "/components/ui/card" import { Input } from "/components/ui/input" import { Label } from "/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "/components/ui/select" import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts' export default function EMICalculator() { const [loanAmount, setLoanAmount] = useState('') const [interestRate, setInterestRate] = useState('') const [tenure, setTenure] = useState('') const [tenureUnit, setTenureUnit] = useState('months') const [emi, setEmi] = useState(null) const [totalInterest, setTotalInterest] = useState(null) const [totalPayment, setTotalPayment] = useState(null) const calculateEMI = () => { if (!loanAmount || !interestRate || !tenure) return const principal = parseFloat(loanAmount) const annualRate = parseFloat(interestRate) / 100 const monthlyRate = annualRate / 12 let months = tenureUnit === 'years' ? parseFloat(tenure) * 12 : parseFloat(tenure) // EMI formula: [P x R x (1+R)^N]/[(1+R)^N-1] const emiValue = principal * monthlyRate * Math.pow(1 + monthlyRate, months) / (Math.pow(1 + monthlyRate, months) - 1) const totalPaymentValue = emiValue * months const totalInterestValue = totalPaymentValue - principal setEmi(emiValue) setTotalInterest(totalInterestValue) setTotalPayment(totalPaymentValue) } const resetCalculator = () => { setLoanAmount('') setInterestRate('') setTenure('') setTenureUnit('months') setEmi(null) setTotalInterest(null) setTotalPayment(null) } const pieChartData = [ { name: 'Principal', value: parseFloat(loanAmount) || 0 }, { name: 'Interest', value: totalInterest || 0 } ] const COLORS = ['#1c2657', '#3a4a8a'] return (

EMI Calculator – MN & Co.

Loan Details

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

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

Loan Tenure

setTenure(e.target.value)} placeholder="e.g. 5" />

{emi !== null && (

Monthly EMI

₹{emi.toFixed(2)}

Total Interest

₹{totalInterest?.toFixed(2)}

Total Payment

₹{totalPayment?.toFixed(2)}

Principal vs Interest

`${name}: ${(percent * 100).toFixed(1)}%`} > {pieChartData.map((entry, index) => ( ))} [`₹${value.toFixed(2)}`, '']} />

)}

) }