Client Fee Calculator
About this app
Calculate professional service fees for your accounting clients easily using our interactive Client Fee Calculator. Get instant fee breakdown.
Client Fee Calculator Client Fee Calculator Calculate professional service fees for your accounting clients easily with instant breakdowns! 🔧 Inputs & Services Client Type: Sole Trader Limited Company Partnership Individual Turnover (£): Number of Employees: Properties Managed: ✔️ Management: 🛠️ Services: 🧾 Accounts Service: Yes 🛠️ VAT Service: Yes 📑 Payroll Service: Yes Payroll Frequency: Weekly Monthly Fortnightly 📈 Pension Service: Yes Pension Employees: 📝 Self-Assessment Service: No Self-Assessment Persons: Reset All Inputs
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Client Fee Calculator</title>
<meta name="description" content="Calculate professional service fees for your accounting clients easily using our interactive Client Fee Calculator. Get instant fee breakdown.">
<meta name="keywords" content="calculator, fee calculator, accounting fees, business fees, professional services, client fees">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function() {
let clientType = 'Limited Company';
let turnover = 50000;
let employees = 3;
let properties = 1;
let management = true;
let services = {
accounts: true,
vat: true,
payroll: true,
pension: true,
selfAssessment: false
};
let selfAssessmentPersons = 1;
let payrollFrequency = 'Monthly';
let pensionEmployees = 3;
const fees = {
accounts: 0,
vat: 0,
payroll: 0,
pension: 0,
property: 0,
management: 0,
selfAssessment: 0,
subtotal: 0,
vatAmount: 0,
total: 0,
monthly: 0
};
const calculateFees = () => {
const accountsFee = calculateAccountsFee();
const vatFee = calculateVATFee();
const payrollFee = calculatePayrollFee();
const pensionFee = calculatePensionFee();
const propertyFee = calculatePropertyFee();
const managementFee = calculateManagementFee();
const selfAssessmentFee = calculateSelfAssessmentFee();
const subtotal = accountsFee + vatFee + payrollFee + pensionFee + propertyFee + managementFee + selfAssessmentFee;
const vatAmount = subtotal * 0.2;
const total = subtotal + vatAmount;
const monthly = total / 12;
return {
accounts: accountsFee,
vat: vatFee,
payroll: payrollFee,
pension: pensionFee,
property: propertyFee,
management: managementFee,
selfAssessment: selfAssessmentFee,
subtotal: subtotal,
vatAmount: vatAmount,
total: total,
monthly: monthly
};
};
const calculateAccountsFee = () => {
if (!services.accounts) return 0;
const tiers = clientType === 'Sole Trader' ? [700, 850, 900, 1000, 1300, 1400, 1600, 1800, 2000] :
clientType === 'Limited Company' ? [875, 975, 1100, 1250, 1500, 1600, 1800, 2000, 2200] :
clientType === 'Partnership' ? [800, 900, 1000, 1150, 1400, 1500, 1700, 1900, 2100] :
[650, 750, 850, 950, 1200, 1300, 1500, 1700, 1900];
const turnoverThresholds = [90000, 99000, 149000, 249000, 349000, 499000, 749000, 999000];
for (let i = 0; i < turnoverThresholds.length; i++) {
if (turnover <= turnoverThresholds[i]) {
return tiers[i];
}
}
return tiers[tiers.length - 1];
};
const calculateVATFee = () => {
if (!services.vat) return 0;
const thresholds = [99000, 149000, 249000, 349000, 499000, 749000, 999000, Infinity];
const fees = [550, 750, 850, 950, 1150, 1600, 1900, 2300];
for (let i = 0; i < thresholds.length; i++) {
if (turnover <= thresholds[i]) {
return fees[i];
}
}
};
const calculatePayrollFee = () => {
if (!services.payroll) return 0;
let fee;
if (payrollFrequency === 'Weekly') {
fee = employees <= 5 ? 520 : employees <= 10 ? 580 : employees <= 15 ? 675 : employees <= 20 ? 820 : employees <= 30 ? 1085 : employees <= 40 ? 1350 : employees <= 50 ? 1640 : 1800;
} else if (payrollFrequency === 'Monthly') {
fee = employees <= 5 ? 350 : employees <= 10 ? 400 : employees <= 15 ? 450 : employees <= 20 ? 550 : employees <= 30 ? 665 : employees <= 40 ? 780 : employees <= 50 ? 880 : 1000;
} else {
fee = employees <= 5 ? 420 : employees <= 10 ? 475 : employees <= 15 ? 550 : employees <= 20 ? 650 : employees <= 30 ? 785 : employees <= 40 ? 920 : employees <= 50 ? 1100 : 1300;
}
return Math.round(fee);
};
const calculatePensionFee = () => {
if (!services.pension) return 0;
if (pensionEmployees <= 5) return 180;
if (pensionEmployees <= 10) return 195;
if (pensionEmployees <= 15) return 235;
if (pensionEmployees <= 20) return 270;
if (pensionEmployees <= 30) return 365;
if (pensionEmployees <= 40) return 465;
if (pensionEmployees <= 50) return 550;
return 650;
};
const calculatePropertyFee = () => {
if (properties === 0) return 0;
if (properties <= 5) return 150 + (100 * (properties - 1));
return 550 + (75 * (properties - 5));
};
const calculateManagementFee = () => management ? 800 : 0;
const calculateSelfAssessmentFee = () => {
if (!services.selfAssessment) return 0;
if (selfAssessmentPersons === 1) return 175;
if (selfAssessmentPersons === 2) return 300;
return 140 * selfAssessmentPersons;
};
const displayResults = () => {
const calculatedFees = calculateFees();
const resultsDiv = $('#results');
resultsDiv.html(`
<h3 class="text-xl font-semibold text-gray-700 border-b-2 border-blue-200 pb-2">📊 Fee Breakdown</h3>
<ul class="list-disc pl-5">
<li class="text-gray-600">Accounts & Tax Fee: <span class="font-bold text-blue-600">£${calculatedFees.accounts.toFixed(2)}</span></li>
<li class="text-gray-600">VAT Fee: <span class="font-bold text-blue-600">£${calculatedFees.vat.toFixed(2)}</span></li>
<li class="text-gray-600">Payroll Fee: <span class="font-bold text-blue-600">£${calculatedFees.payroll.toFixed(2)}</span></li>
<li class="text-gray-600">Pension Fee: <span class="font-bold text-blue-600">£${calculatedFees.pension.toFixed(2)}</span></li>
<li class="text-gray-600">Property Fee: <span class="font-bold text-blue-600">£${calculatedFees.property.toFixed(2)}</span></li>
<li class="text-gray-600">Management Fee: <span class="font-bold text-blue-600">£${calculatedFees.management.toFixed(2)}</span></li>
${services.selfAssessment ? `
<li class="text-gray-600">Self Assessment Fee: <span class="font-bold text-blue-600">£${calculatedFees.selfAssessment.toFixed(2)}</span></li>
` : ''}
</ul>
<div class="mt-6 bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl p-5 shadow-inner border border-blue-100">
<h4 class="font-semibold text-gray-700">✨ Summary:</h4>
<div class="grid grid-cols-2 py-2">
<span class="font-semibold text-gray-700">Subtotal Fee: </span>
<span class="font-bold text-right text-purple-600">£${calculatedFees.subtotal.toFixed(2)}</span>
</div>
<div class="grid grid-cols-2 py-2">
<span class="font-semibold text-gray-700">VAT 20%: </span>
<span class="font-bold text-right text-purple-600">£${calculatedFees.vatAmount.toFixed(2)}</span>
</div>
<div class="grid grid-cols-2 bg-white rounded-lg p-3 shadow mt-3">
<span class="font-semibold text-lg text-gray-800">Total Fee - Annual:</span>
<span class="font-bold text-right text-2xl text-purple-700">£${calculatedFees.total.toFixed(2)}</span>
</div>
<div class="grid grid-cols-2 bg-white p-3 shadow mt-3">
<span class="font-semibold text-lg text-gray-800">Monthly Fee:</span>
<span class="font-bold text-right text-blue-600">£${calculatedFees.monthly.toFixed(2)}</span>
</div>
</div>
`);
};
$('#main-container').on('change', 'input, select', function() {
const id = $(this).attr('id');
const value = $(this).val();
if (id === 'clientType') clientType = value;
else if (id === 'turnover') turnover = Number(value);
else if (id === 'employees') employees = Number(value);
else if (id === 'properties') properties = Number(value);
else if (id === 'management') management = $(this).is(':checked');
else if (id.includes('service')) {
const service = id.split('_')[1];
services[service] = $(this).is(':checked');
updateServiceStatus(service);
}
if (id === 'payrollFrequency') payrollFrequency = value;
if (id === 'pensionEmployees') pensionEmployees = Number(value);
if (id === 'selfAssessmentPersons') selfAssessmentPersons = Number(value);
displayResults();
});
const updateServiceStatus = (service) => {
const isActive = services[service];
$(`#status_${service}`).text(isActive ? "Yes" : "No").css("color", isActive ? "green" : "red");
};
const resetInputs = () => {
clientType = 'Limited Company';
turnover = 50000;
employees = 3;
properties = 1;
management = true;
services = { accounts: true, vat: true, payroll: true, pension: true, selfAssessment: false };
selfAssessmentPersons = 1;
payrollFrequency = 'Monthly';
pensionEmployees = 3;
$('input, select').each(function() {
const el = $(this);
if (el.is('input[type="checkbox"]')) {
el.prop('checked', services[el.attr('id').split('_')[1]]);
updateServiceStatus(el.attr('id').split('_')[1]);
} else {
el.val(el.is('[id="clientType"]') ? clientType :
el.is('[id="turnover"]') ? turnover :
el.is('[id="employees"]') ? employees :
el.is('[id="properties"]') ? properties :
el.is('[id="selfAssessmentPersons"]') ? selfAssessmentPersons :
el.is('[id="pensionEmployees"]') ? pensionEmployees : payrollFrequency);
}
});
displayResults();
};
$('#resetButton').on('click', resetInputs);
displayResults();
});
</script>
<style>
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(to right, #60c5e9, #b569e7);
color: #333;
}
#main-container {
margin: 0 auto;
max-width: 1200px;
padding: 20px;
}
.two-columns {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 20px;
}
button {
background: linear-gradient(to right, #ff6a00, #ee0979);
border: none;
border-radius: 5px;
color: white;
padding: 10px 20px;
cursor: pointer;
transition: background 0.3s;
margin-top: 10px;
}
button:hover {
background: linear-gradient(to right, #ee0979, #ff6a00);
}
h1, h3, h4 {
text-align: center;
margin: 10px 0;
}
.bg-white, .bg-gray-100 {
border-radius: 10px;
}
.results-upper {
margin-top: 20px;
background: #f8f8f8;
padding: 15px;
border-radius: 10px;
}
ul {
padding: 0;
list-style-type: none;
}
.service-point {
display: flex;
justify-content: space-between;
align-items: center;
margin: 5px 0;
}
.service-point label {
width: 70%;
}
.status {
font-weight: bold;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<div class="bg-white rounded-lg p-6 shadow-md">
<h1 class="text-3xl font-bold">Client Fee Calculator</h1>
<p>Calculate professional service fees for your accounting clients easily with instant breakdowns!</p>
</div>
<div class="two-columns">
<div class="p-6 bg-gray-100 rounded-lg">
<h3 class="font-bold text-lg">🔧 Inputs & Services</h3>
<form id="inputForm">
<label>Client Type:</label>
<select id="clientType">
<option value="Sole Trader">Sole Trader</option>
<option value="Limited Company">Limited Company</option>
<option value="Partnership">Partnership</option>
<option value="Individual">Individual</option>
</select>
<label>Turnover (£):</label>
<input type="number" id="turnover" value="50000" min="0">
<label>Number of Employees:</label>
<input type="number" id="employees" value="3" min="0">
<label>Properties Managed:</label>
<input type="number" id="properties" value="1" min="0">
<label>✔️ Management:</label>
<input type="checkbox" id="management" checked>
</form>
<h4 class="font-bold mt-4">🛠️ Services:</h4>
<div class="service-point">
<label>🧾 Accounts Service:</label>
<input type="checkbox" id="service_accounts" checked>
<span id="status_accounts" class="status">Yes</span>
</div>
<div class="service-point">
<label>🛠️ VAT Service:</label>
<input type="checkbox" id="service_vat" checked>
<span id="status_vat" class="status">Yes</span>
</div>
<div class="service-point">
<label>📑 Payroll Service:</label>
<input type="checkbox" id="service_payroll" checked>
<span id="status_payroll" class="status">Yes</span>
</div>
<label>Payroll Frequency:</label>
<select id="payrollFrequency">
<option value="Weekly">Weekly</option>
<option value="Monthly">Monthly</option>
<option value="Fortnightly">Fortnightly</option>
</select>
<div class="service-point">
<label>📈 Pension Service:</label>
<input type="checkbox" id="service_pension" checked>
<span id="status_pension" class="status">Yes</span>
</div>
<label>Pension Employees:</label>
<input type="number" id="pensionEmployees" value="3" min="0">
<div class="service-point">
<label>📝 Self-Assessment Service:</label>
<input type="checkbox" id="service_selfAssessment">
<span id="status_selfAssessment" class="status">No</span>
</div>
<label>Self-Assessment Persons:</label>
<input type="number" id="selfAssessmentPersons" value="1" min="1">
<button type="button" id="resetButton">Reset All Inputs</button>
</div>
<div id="results" class="results-upper mt-6"></div>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!