import { useState } from 'react'; import { Button } from "/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "/components/ui/card"; import { Label } from "/components/ui/label"; import { Input } from "/components/ui/input"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "/components/ui/select"; import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from 'recharts'; const COLORS = ['#0088FE', '#FF8042']; export default function HRACalculator() { const [formData, setFormData] = useState({ basicSalary: '', dearnessAllowance: '', hraReceived: '', rentPaid: '', cityType: 'metro', }); const [results, setResults] = useState({ hraExempt: 0, hraTaxable: 0, showResults: false, }); const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value, }); }; const handleSelectChange = (value: string) => { setFormData({ ...formData, cityType: value, }); }; const calculateHRA = () => { const basicSalary = parseFloat(formData.basicSalary) || 0; const dearnessAllowance = parseFloat(formData.dearnessAllowance) || 0; const hraReceived = parseFloat(formData.hraReceived) || 0; const rentPaid = parseFloat(formData.rentPaid) || 0; const salary = basicSalary + dearnessAllowance; const percentageOfSalary = formData.cityType === 'metro' ? 0.5 : 0.4; const rentMinus10Percent = rentPaid - (0.1 * salary); // Calculate the three values const value1 = hraReceived; const value2 = percentageOfSalary * salary; const value3 = rentMinus10Percent > 0 ? rentMinus10Percent : 0; // HRA exempt is the minimum of the three values const hraExempt = Math.min(value1, value2, value3); const hraTaxable = hraReceived - hraExempt; setResults({ hraExempt, hraTaxable, showResults: true, }); }; const resetForm = () => { setFormData({ basicSalary: '', dearnessAllowance: '', hraReceived: '', rentPaid: '', cityType: 'metro', }); setResults({ hraExempt: 0, hraTaxable: 0, showResults: false, }); }; const chartData = [ { name: 'Exempt', value: results.hraExempt }, { name: 'Taxable', value: results.hraTaxable }, ]; return (

HRA Calculator

Basic Salary (Monthly)

Dearness Allowance (Monthly)

HRA Received (Monthly)

Rent Paid (Monthly)

City Type

{results.showResults && ( <>

HRA Calculation Results

HRA Exempt

₹{results.hraExempt.toFixed(2)}

HRA Taxable

₹{results.hraTaxable.toFixed(2)}

HRA Breakdown

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

)} {!results.showResults && (

Enter your salary details and click "Calculate" to see your HRA exemption.

)}

); }