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" export default function TdsCalculator() { const [amount, setAmount] = useState('') const [tdsSection, setTdsSection] = useState('192') const [panAvailable, setPanAvailable] = useState('yes') const [calculated, setCalculated] = useState(false) const [tdsRate, setTdsRate] = useState(0) const [tdsAmount, setTdsAmount] = useState(0) const [netAmount, setNetAmount] = useState(0) const calculateTDS = () => { if (!amount) return const numAmount = parseFloat(amount) let rate = 0 // Determine TDS rate based on section and PAN availability switch(tdsSection) { case '192': // Salary rate = panAvailable === 'yes' ? 0.05 : 0.20 break case '194': // Interest (other than securities) rate = panAvailable === 'yes' ? 0.10 : 0.20 break case '194J': // Professional/Technical services rate = panAvailable === 'yes' ? 0.10 : 0.20 break case '194C': // Contractor payments rate = panAvailable === 'yes' ? 0.01 : 0.20 break case '194D': // Insurance commission rate = panAvailable === 'yes' ? 0.05 : 0.20 break case '194H': // Commission/brokerage rate = panAvailable === 'yes' ? 0.05 : 0.20 break case '194I': // Rent rate = panAvailable === 'yes' ? 0.10 : 0.20 break default: rate = 0.10 } const calculatedTds = numAmount * rate const calculatedNet = numAmount - calculatedTds setTdsRate(rate * 100) setTdsAmount(calculatedTds) setNetAmount(calculatedNet) setCalculated(true) } const resetCalculator = () => { setAmount('') setTdsSection('192') setPanAvailable('yes') setCalculated(false) setTdsRate(0) setTdsAmount(0) setNetAmount(0) } const getPieChartStyle = () => { if (!calculated) return {} const tdsPercentage = (tdsAmount / parseFloat(amount)) * 100 const netPercentage = (netAmount / parseFloat(amount)) * 100 return { background: `conic-gradient( #4f46e5 0% ${netPercentage}%, #10b981 ${netPercentage}% 100% )` } } const getSectionDescription = (section: string) => { switch(section) { case '192': return 'Salary' case '194': return 'Interest (Other than securities)' case '194C': return 'Contractor payments' case '194D': return 'Insurance commission' case '194H': return 'Commission/brokerage' case '194I': return 'Rent' case '194J': return 'Professional/Technical services' default: return section } } return (

TDS Calculator

Amount (₹) setAmount(e.target.value)} placeholder="Enter amount" />

TDS Section

PAN Available

{calculated && (

TDS Rate

{tdsRate}%

TDS Amount

₹{tdsAmount.toFixed(2)}

Net Amount After TDS

₹{netAmount.toFixed(2)}

Amount Breakdown

Net Amount: ₹{netAmount.toFixed(2)}

TDS: ₹{tdsAmount.toFixed(2)}

TDS Details:

Section {tdsSection} - {getSectionDescription(tdsSection)}

PAN {panAvailable === 'yes' ? 'Available' : 'Not Available'}

)}

) }