import { useState, useEffect } from 'react'; import { DollarSign, Info, Calendar, Coins, CreditCard, Briefcase, Home, TrendingUp, Droplet, FileText, HelpCircle } from 'lucide-react'; const ZakatCalculator = () => { // Current market prices (ideally would come from API) const [marketPrices, setMarketPrices] = useState({ gold: 75.50, // USD per gram silver: 0.95, // USD per gram }); // Nisab thresholds (in grams) const nisabThresholds = { gold: 87.48, // grams of gold silver: 612.36, // grams of silver }; // State for user inputs const [selectedNisab, setSelectedNisab] = useState('gold'); const [currency, setCurrency] = useState('USD'); const [assets, setAssets] = useState({ cash: 0, gold: { weight: 0, purity: 24 }, silver: { weight: 0 }, stocks: { value: 0, intention: 'trade' }, agriculture: { value: 0, irrigationType: 'natural' }, business: { cash: 0, inventory: 0, receivables: 0, investments: 0 }, rental: { income: 0, expenses: 0 }, other: { value: 0, description: '' }, }); const [liabilities, setLiabilities] = useState({ shortTerm: 0, longTerm: 0, overduePayments: 0, }); // State for calculation results const [results, setResults] = useState({ totalAssets: 0, totalLiabilities: 0, netWorth: 0, nisabThreshold: 0, zakatDue: 0, isEligible: false, }); // State for active tab const [activeTab, setActiveTab] = useState('assets'); // State for showing educational info const [showInfo, setShowInfo] = useState(false); // Calculate Nisab value in selected currency const calculateNisabValue = () => { const nisabInGrams = nisabThresholds[selectedNisab]; const pricePerGram = marketPrices[selectedNisab]; return nisabInGrams * pricePerGram; }; // Calculate total assets value const calculateTotalAssets = () => { // Cash const cashValue = parseFloat(assets.cash) || 0; // Gold (adjusted for purity) const goldPurityFactor = (parseFloat(assets.gold.purity) || 24) / 24; const goldValue = (parseFloat(assets.gold.weight) || 0) * marketPrices.gold * goldPurityFactor; // Silver const silverValue = (parseFloat(assets.silver.weight) || 0) * marketPrices.silver; // Stocks const stocksValue = parseFloat(assets.stocks.value) || 0; // Agriculture (different rates based on irrigation) const agricultureValue = parseFloat(assets.agriculture.value) || 0; // Business assets const businessCash = parseFloat(assets.business.cash) || 0; const businessInventory = parseFloat(assets.business.inventory) || 0; const businessReceivables = parseFloat(assets.business.receivables) || 0; const businessInvestments = parseFloat(assets.business.investments) || 0; const businessTotal = businessCash + businessInventory + businessReceivables + businessInvestments; // Rental income (net) const rentalIncome = parseFloat(assets.rental.income) || 0; const rentalExpenses = parseFloat(assets.rental.expenses) || 0; const rentalNet = Math.max(0, rentalIncome - rentalExpenses); // Other investments const otherValue = parseFloat(assets.other.value) || 0; return cashValue + goldValue + silverValue + stocksValue + agricultureValue + businessTotal + rentalNet + otherValue; }; // Calculate total liabilities const calculateTotalLiabilities = () => { const shortTerm = parseFloat(liabilities.shortTerm) || 0; const longTerm = parseFloat(liabilities.longTerm) || 0; const overduePayments = parseFloat(liabilities.overduePayments) || 0; return shortTerm + longTerm + overduePayments; }; // Calculate Zakat const calculateZakat = () => { const totalAssets = calculateTotalAssets(); const totalLiabilities = calculateTotalLiabilities(); const netWorth = totalAssets - totalLiabilities; const nisabThreshold = calculateNisabValue(); const isEligible = netWorth >= nisabThreshold; // Different rates for different asset types let zakatDue = 0; if (isEligible) { // Standard rate for most assets (2.5%) const standardRate = 0.025; // Agriculture has different rates based on irrigation const agricultureRate = assets.agriculture.irrigationType === 'natural' ? 0.1 : 0.05; const agricultureZakat = (parseFloat(assets.agriculture.value) || 0) * agricultureRate; // Calculate standard zakat on remaining assets const standardAssets = netWorth - (parseFloat(assets.agriculture.value) || 0); const standardZakat = Math.max(0, standardAssets) * standardRate; zakatDue = standardZakat + agricultureZakat; } setResults({ totalAssets, totalLiabilities, netWorth, nisabThreshold, zakatDue, isEligible, }); }; // Handle input changes for assets const handleAssetChange = (category, field, value) => { if (field) { setAssets(prev => ({ ...prev, [category]: { ...prev[category], [field]: value } })); } else { setAssets(prev => ({ ...prev, [category]: value })); } }; // Handle input changes for liabilities const handleLiabilityChange = (field, value) => { setLiabilities(prev => ({ ...prev, [field]: value })); }; // Calculate results whenever inputs change useEffect(() => { calculateZakat(); }, [assets, liabilities, selectedNisab, marketPrices]); return (

Zakat Calculator

Calculate your annual Zakat obligations according to Islamic principles

{/* Nisab and Currency Selection */}

Nisab Standard

Currency

Current Nisab Value

{currency} {calculateNisabValue().toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

{showInfo && (

What is Nisab?

Nisab is the minimum amount of wealth a Muslim must possess before they become eligible to pay Zakat. It's equivalent to:

87.48 grams of gold, or
612.36 grams of silver

If your net wealth exceeds the Nisab threshold, you are required to pay 2.5% of your eligible wealth as Zakat.

)}

{/* Main Calculator Tabs */}

{/* Tab Content */}

{/* Assets Tab */} {activeTab === 'assets' && (

{/* Cash */}

Cash

Total Cash Holdings

{currency} handleAssetChange('cash', null, parseFloat(e.target.value) || 0)} className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="0.00" />

{/* Gold */}

Gold

Weight (grams) handleAssetChange('gold', 'weight', parseFloat(e.target.value) || 0)} className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="0.00" />

Purity (karat)

Value: {currency} {((parseFloat(assets.gold.weight) || 0) * marketPrices.gold * (parseFloat(assets.gold.purity) || 24) / 24).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

{/* Silver */}

Silver

Weight (grams) handleAssetChange('silver', 'weight', parseFloat(e.target.value) || 0)} className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="0.00" />

Value: {currency} {((parseFloat(assets.silver.weight) || 0) * marketPrices.silver).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

{/* Stocks */}

Stocks & Shares

Total Value

{currency} handleAssetChange('stocks', 'value', parseFloat(e.target.value) || 0)} className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="0.00" />

Holding Intention

{/* Agriculture */}

Agricultural Income

Total Value

{currency} handleAssetChange('agriculture', 'value', parseFloat(e.target.value) || 0)} className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="0.00" />

Irrigation Type

{/* Business Assets */}

Business Assets

Cash

{currency} handleAssetChange('business', 'cash', parseFloat(e.target.value) || 0)} className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="0.00" />

Inventory

{currency} handleAssetChange('business', 'inventory', parseFloat(e.target.value) || 0)} className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="0.00" />

Receivables

{currency} handleAssetChange('business', 'receivables', parseFloat(e.target.value) || 0)} className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="0.00" />

Investments

{currency} handleAssetChange('business', 'investments', parseFloat(e.target.value) || 0)} className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="0.00" />

{/* Rental Income */}

Rental Income

Total Income

{currency} handleAssetChange('rental', 'income', parseFloat(e.target.value) || 0)} className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="0.00" />

Expenses

{currency} handleAssetChange('rental', 'expenses', parseFloat(e.target.value) || 0)} className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="0.00" />

Net Income: {currency} {Math.max(0, (parseFloat(assets.rental.income) || 0) - (parseFloat(assets.rental.expenses) || 0)).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

{/* Other Investments */}

Other Investments

Total Value

{currency} handleAssetChange('other', 'value', parseFloat(e.target.value) || 0)} className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="0.00" />

Description handleAssetChange('other', 'description', e.target.value)} className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="e.g., Cryptocurrency, Pension funds" />

)} {/* Liabilities Tab */} {activeTab === 'liabilities' && (

{/* Short Term Debts */}

Short Term Debts

Total Short Term Debts

{currency} handleLiabilityChange('shortTerm', parseFloat(e.target.value) || 0)} className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="0.00" />

Include credit card balances, personal loans due within a year, etc.

{/* Long Term Debts */}

Long Term Debts (Principal Only)

Total Long Term Debt Principal

{currency} handleLiabilityChange('longTerm', parseFloat(e.target.value) || 0)} className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="0.00" />

Include mortgage principal, business loans, etc. (only include the principal amount, not future interest)

{/* Overdue Payments */}

Overdue Payments

Total Overdue Payments

{currency} handleLiabilityChange('overduePayments', parseFloat(e.target.value) || 0)} className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="0.00" />

Include any bills, payments, or obligations that are currently overdue

)} {/* Results Tab */} {activeTab === 'results' && (

Total Assets

{currency} {results.totalAssets.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

Total Liabilities

{currency} {results.totalLiabilities.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

Net Worth

{currency} {results.netWorth.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

Nisab Threshold ({selectedNisab === 'gold' ? 'Gold' : 'Silver'} Standard)

{currency} {results.nisabThreshold.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

{results.isEligible ? ( Zakat Due ) : ( No Zakat Due )}

{results.isEligible ? (

{currency} {results.zakatDue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

Your net worth exceeds the Nisab threshold. You are required to pay Zakat.

) : (

Your net worth does not exceed the Nisab threshold. You are not required to pay Zakat at this time.

)}

Zakat Calculation Rules:

Standard Zakat rate is 2.5% on most assets (cash, gold, silver, stocks, business assets)
Agricultural produce is calculated at 10% (natural irrigation) or 5% (artificial irrigation)
Zakat is only due if your net worth exceeds the Nisab threshold

)}

{/* Footer */}

This calculator is for guidance purposes only. For specific rulings, please consult with a qualified Islamic scholar.

); }; export default ZakatCalculator;

Zakat Calculator

what is Zakat Calculator