export function propertyTaxCalculator(form: FormTs) {
form.addRow(row => {
row.addTextPanel('header', {
computedValue: () => 'Property Tax Calculator',
customStyles: { 'font-size': '1.5rem', 'font-weight': '600', 'color': '#1e293b' }
});
});
form.addSpacer({ height: 20 });
// Property Value Section
const propertySection = form.addSubform('property', { title: '🏠 Property Value' });
propertySection.addRow(row => {
row.addMoney('marketValue', {
label: 'Market Value',
min: 0,
max: 50000000,
defaultValue: 350000,
currency: '$',
isRequired: true,
tooltip: 'Estimated fair market value of your property'
}, '1fr');
row.addDropdown('propertyType', {
label: 'Property Type',
options: [
{ id: 'single-family', name: 'Single Family Home' },
{ id: 'condo', name: 'Condo/Townhouse' },
{ id: 'multi-family', name: 'Multi-Family (2-4 units)' },
{ id: 'vacant', name: 'Vacant Land' },
{ id: 'commercial', name: 'Commercial Property' }
],
defaultValue: 'single-family'
}, '1fr');
});
propertySection.addRow(row => {
row.addDropdown('assessmentRatio', {
label: 'Assessment Ratio',
options: [
{ id: '100', name: '100% of Market Value' },
{ id: '80', name: '80% of Market Value' },
{ id: '70', name: '70% of Market Value' },
{ id: '60', name: '60% of Market Value' },
{ id: '50', name: '50% of Market Value' },
{ id: '40', name: '40% of Market Value' },
{ id: 'custom', name: 'Custom Ratio' }
],
defaultValue: '100',
tooltip: 'Assessed value as percentage of market value (varies by location)'
}, '1fr');
row.addDecimal('customRatio', {
label: 'Custom Assessment Ratio (%)',
min: 1,
max: 100,
defaultValue: 85,
isVisible: () => propertySection.dropdown('assessmentRatio')?.value() === 'custom'
}, '1fr');
});
propertySection.addRow(row => {
row.addTextPanel('assessedValue', {
label: 'Assessed Value',
computedValue: () => {
const marketValue = propertySection.money('marketValue')?.value() || 350000;
const ratioOption = propertySection.dropdown('assessmentRatio')?.value() || '100';
const ratio = ratioOption === 'custom'
? (propertySection.decimal('customRatio')?.value() || 85) / 100
: parseInt(ratioOption) / 100;
return `$${Math.round(marketValue * ratio).toLocaleString()}`;
},
customStyles: { 'font-size': '1.2rem', 'font-weight': '600', 'color': '#059669' }
});
});
// Tax Rate Section
const taxSection = form.addSubform('tax', { title: '📊 Tax Rate' });
taxSection.addRow(row => {
row.addRadioButton('rateInput', {
label: 'Enter Rate As',
options: [
{ id: 'percentage', name: 'Percentage' },
{ id: 'mills', name: 'Mill Rate' },
{ id: 'per-thousand', name: 'Per $1,000' }
],
defaultValue: 'percentage'
});
});
taxSection.addRow(row => {
row.addDecimal('taxRatePercent', {
label: 'Tax Rate (%)',
min: 0,
max: 10,
defaultValue: 1.2,
isVisible: () => taxSection.radioButton('rateInput')?.value() === 'percentage',
tooltip: 'Annual property tax rate as percentage'
}, '1fr');
row.addDecimal('millRate', {
label: 'Mill Rate',
min: 0,
max: 100,
defaultValue: 12,
isVisible: () => taxSection.radioButton('rateInput')?.value() === 'mills',
tooltip: 'Mills per dollar of assessed value (1 mill = $1 per $1,000)'
}, '1fr');
row.addMoney('perThousand', {
label: 'Rate per $1,000',
min: 0,
max: 100,
defaultValue: 12,
currency: '$',
isVisible: () => taxSection.radioButton('rateInput')?.value() === 'per-thousand',
tooltip: 'Tax per $1,000 of assessed value'
}, '1fr');
});
taxSection.addRow(row => {
row.addTextPanel('effectiveRate', {
label: 'Effective Tax Rate',
computedValue: () => {
const rateInput = taxSection.radioButton('rateInput')?.value() || 'percentage';
let rate = 0;
if (rateInput === 'percentage') {
rate = taxSection.decimal('taxRatePercent')?.value() || 1.2;
} else if (rateInput === 'mills') {
rate = (taxSection.decimal('millRate')?.value() || 12) / 10;
} else {
rate = (taxSection.money('perThousand')?.value() || 12) / 10;
}
return `${(Number(rate) || 0).toFixed(3)}%`;
},
customStyles: { 'font-size': '1.1rem', 'font-weight': '500', 'color': '#2563eb' }
});
});
// Exemptions Section
const exemptionsSection = form.addSubform('exemptions', { title: '✨ Exemptions & Deductions' });
exemptionsSection.addRow(row => {
row.addCheckbox('homestead', {
label: 'Homestead Exemption',
defaultValue: false,
tooltip: 'Primary residence exemption (varies by state)'
}, '1fr');
row.addDropdown('homesteadAmount', {
label: 'Exemption Amount',
options: [
{ id: '25000', name: '$25,000' },
{ id: '40000', name: '$40,000' },
{ id: '50000', name: '$50,000' },
{ id: '75000', name: '$75,000' },
{ id: '100000', name: '$100,000' },
{ id: 'custom', name: 'Custom Amount' }
],
defaultValue: '50000',
isVisible: () => exemptionsSection.checkbox('homestead')?.value() === true
}, '1fr');
});
exemptionsSection.addRow(row => {
row.addMoney('customHomestead', {
label: 'Custom Exemption Amount',
min: 0,
max: 500000,
defaultValue: 50000,
currency: '$',
isVisible: () => exemptionsSection.checkbox('homestead')?.value() === true &&
exemptionsSection.dropdown('homesteadAmount')?.value() === 'custom'
});
});
exemptionsSection.addRow(row => {
row.addCheckbox('seniorExemption', {
label: 'Senior Citizen Exemption',
defaultValue: false,
tooltip: 'Additional exemption for seniors 65+'
}, '1fr');
row.addMoney('seniorAmount', {
label: 'Senior Exemption Amount',
min: 0,
max: 100000,
defaultValue: 10000,
currency: '$',
isVisible: () => exemptionsSection.checkbox('seniorExemption')?.value() === true
}, '1fr');
});
exemptionsSection.addRow(row => {
row.addCheckbox('veteranExemption', {
label: 'Veteran/Disabled Exemption',
defaultValue: false
}, '1fr');
row.addMoney('veteranAmount', {
label: 'Veteran Exemption Amount',
min: 0,
max: 500000,
defaultValue: 25000,
currency: '$',
isVisible: () => exemptionsSection.checkbox('veteranExemption')?.value() === true
}, '1fr');
});
exemptionsSection.addRow(row => {
row.addMoney('otherExemptions', {
label: 'Other Exemptions',
min: 0,
max: 500000,
defaultValue: 0,
currency: '$',
tooltip: 'Any additional exemptions (agricultural, historical, etc.)'
});
});
// Special Assessments Section
const assessmentsSection = form.addSubform('assessments', { title: '📋 Special Assessments' });
assessmentsSection.addRow(row => {
row.addMoney('specialAssessments', {
label: 'Special District Assessments',
min: 0,
max: 50000,
defaultValue: 0,
currency: '$',
tooltip: 'Additional assessments (schools, fire, water, etc.)'
}, '1fr');
row.addMoney('hoaFees', {
label: 'HOA/Mello-Roos (Annual)',
min: 0,
max: 50000,
defaultValue: 0,
currency: '$',
tooltip: 'Not technically property tax but included in escrow'
}, '1fr');
});
form.addSpacer({ height: 20, showLine: true, lineStyle: 'dashed' });
// Results Section
const resultsSection = form.addSubform('results', { title: '📊 Tax Calculation', isCollapsible: false });
const calculateTax = () => {
const marketValue = propertySection.money('marketValue')?.value() || 350000;
const ratioOption = propertySection.dropdown('assessmentRatio')?.value() || '100';
const ratio = ratioOption === 'custom'
? (propertySection.decimal('customRatio')?.value() || 85) / 100
: parseInt(ratioOption) / 100;
const assessedValue = marketValue * ratio;
// Get tax rate as decimal
const rateInput = taxSection.radioButton('rateInput')?.value() || 'percentage';
let taxRate = 0;
if (rateInput === 'percentage') {
taxRate = (taxSection.decimal('taxRatePercent')?.value() || 1.2) / 100;
} else if (rateInput === 'mills') {
taxRate = (taxSection.decimal('millRate')?.value() || 12) / 1000;
} else {
taxRate = (taxSection.money('perThousand')?.value() || 12) / 1000;
}
// Calculate exemptions
let totalExemptions = 0;
if (exemptionsSection.checkbox('homestead')?.value()) {
const homesteadOption = exemptionsSection.dropdown('homesteadAmount')?.value() || '50000';
totalExemptions += homesteadOption === 'custom'
? (exemptionsSection.money('customHomestead')?.value() || 50000)
: parseInt(homesteadOption);
}
if (exemptionsSection.checkbox('seniorExemption')?.value()) {
totalExemptions += exemptionsSection.money('seniorAmount')?.value() || 10000;
}
if (exemptionsSection.checkbox('veteranExemption')?.value()) {
totalExemptions += exemptionsSection.money('veteranAmount')?.value() || 25000;
}
totalExemptions += exemptionsSection.money('otherExemptions')?.value() || 0;
// Taxable value
const taxableValue = Math.max(0, assessedValue - totalExemptions);
// Base property tax
const baseTax = taxableValue * taxRate;
// Special assessments
const specialAssessments = assessmentsSection.money('specialAssessments')?.value() || 0;
const hoaFees = assessmentsSection.money('hoaFees')?.value() || 0;
// Totals
const totalAnnualTax = baseTax + specialAssessments;
const totalWithHOA = totalAnnualTax + hoaFees;
const monthlyTax = totalAnnualTax / 12;
const monthlyWithHOA = totalWithHOA / 12;
// Effective rate on market value
const effectiveRate = marketValue > 0 ? (baseTax / marketValue) * 100 : 0;
return {
assessedValue: Math.round(assessedValue),
totalExemptions: Math.round(totalExemptions),
taxableValue: Math.round(taxableValue),
baseTax: Math.round(baseTax),
specialAssessments: Math.round(specialAssessments),
totalAnnualTax: Math.round(totalAnnualTax),
totalWithHOA: Math.round(totalWithHOA),
monthlyTax: Math.round(monthlyTax),
monthlyWithHOA: Math.round(monthlyWithHOA),
effectiveRate: (Number(effectiveRate) || 0).toFixed(3)
};
};
resultsSection.addRow(row => {
row.addPriceDisplay('assessedValue', {
label: 'Assessed Value',
computedValue: () => calculateTax().assessedValue,
variant: 'default'
}, '1fr');
row.addPriceDisplay('exemptions', {
label: 'Total Exemptions',
computedValue: () => calculateTax().totalExemptions,
variant: 'success',
isVisible: () => calculateTax().totalExemptions > 0
}, '1fr');
});
resultsSection.addRow(row => {
row.addPriceDisplay('taxableValue', {
label: 'Taxable Value',
computedValue: () => calculateTax().taxableValue,
variant: 'default'
}, '1fr');
row.addTextPanel('effectiveRate', {
label: 'Effective Rate (on Market Value)',
computedValue: () => `${calculateTax().effectiveRate}%`,
customStyles: { 'font-size': '1.1rem', 'font-weight': '500', 'text-align': 'center' }
}, '1fr');
});
resultsSection.addRow(row => {
row.addPriceDisplay('baseTax', {
label: 'Base Property Tax',
computedValue: () => calculateTax().baseTax,
variant: 'default'
}, '1fr');
row.addPriceDisplay('special', {
label: 'Special Assessments',
computedValue: () => calculateTax().specialAssessments,
variant: 'default',
isVisible: () => calculateTax().specialAssessments > 0
}, '1fr');
});
// Summary Section
const summarySection = form.addSubform('summary', {
title: '💰 Tax Summary',
isCollapsible: false,
sticky: 'bottom'
});
summarySection.addRow(row => {
row.addPriceDisplay('annualTax', {
label: 'Annual Property Tax',
computedValue: () => calculateTax().totalAnnualTax,
variant: 'large'
}, '1fr');
row.addPriceDisplay('monthlyTax', {
label: 'Monthly (for Escrow)',
computedValue: () => calculateTax().monthlyTax,
variant: 'success'
}, '1fr');
});
summarySection.addRow(row => {
row.addTextPanel('withHOA', {
computedValue: () => {
const tax = calculateTax();
if (tax.totalWithHOA > tax.totalAnnualTax) {
return `Including HOA: $${tax.monthlyWithHOA}/month`;
}
return '';
},
customStyles: { 'font-size': '0.9rem', 'color': '#64748b', 'text-align': 'center' },
isVisible: () => calculateTax().totalWithHOA > calculateTax().totalAnnualTax
});
});
summarySection.addRow(row => {
row.addTextPanel('note', {
computedValue: () => 'Actual taxes may vary. Contact your local tax assessor for exact amounts.',
customStyles: { 'font-size': '0.8rem', 'color': '#64748b', 'text-align': 'center' }
});
});
form.configureSubmitButton({
label: 'Get Full Tax Report'
});
}