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. Client Type: Sole Trader Limited Company Partnership Annual Turnover (£): Number of Employees: Properties Managed: Management Accounts: Yes Accounts Service: Yes VAT Service: Yes Payroll Service: Yes Payroll Frequency: Weekly Monthly Fortnightly Self-Assessment Service: Yes Number of Persons for Self-Assessment: Reset All Inputs
Related apps
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 accounting clients with our interactive Client Fee Calculator. Estimate fees based on turnover, client type, and selected services.">
<meta name="keywords" content="client fee calculator, accounting fees calculator, business fees calculator, professional services calculator">
<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 calculateAccountsFee = () => {
if (!services.accounts) return 0;
if (clientType === 'Sole Trader') {
if (turnover <= 90000) return 700;
if (turnover <= 99000) return 850;
if (turnover <= 149000) return 900;
if (turnover <= 249000) return 1000;
if (turnover <= 349000) return 1300;
if (turnover <= 499000) return 1400;
if (turnover <= 749000) return 1600;
if (turnover <= 999000) return 1800;
return 2000;
} else if (clientType === 'Limited Company') {
if (turnover <= 90000) return 875;
if (turnover <= 99000) return 975;
if (turnover <= 149000) return 1100;
if (turnover <= 249000) return 1250;
if (turnover <= 349000) return 1500;
if (turnover <= 499000) return 1600;
if (turnover <= 749000) return 1800;
if (turnover <= 999000) return 2000;
return 2200;
}
// Additional client type calculations...
return 0; // Default case for unsupported types
};
const calculateVATFee = () => {
if (!services.vat) return 0;
if (turnover <= 99000) return 550;
if (turnover <= 149000) return 750;
if (turnover <= 249000) return 850;
if (turnover <= 349000) return 950;
if (turnover <= 499000) return 1150;
if (turnover <= 749000) return 1600;
if (turnover <= 999000) return 1900;
return 2300;
};
const calculatePayrollFee = () => {
if (!services.payroll) return 0;
let fee = 0;
// Various conditions for payroll fees...
return Math.round(fee);
};
const calculatePensionFee = () => {
if (!services.pension) return 0;
// Conditions for pension fees...
return 0;
};
const calculateTotalFees = () => {
const accountsFee = calculateAccountsFee();
const vatFee = calculateVATFee();
const payrollFee = calculatePayrollFee();
const pensionFee = calculatePensionFee();
const propertyFee = calculatePropertyFee(); // Define this function based on properties
const managementFee = calculateManagementFee(); // Define this function based on management
const selfAssessmentFee = calculateSelfAssessmentFee(); // Define this parameter separately
const subtotal = accountsFee + vatFee + payrollFee + pensionFee + propertyFee + managementFee + selfAssessmentFee;
const vatAmount = subtotal * 0.2;
const total = subtotal + vatAmount;
const monthly = total / 12;
fees.accounts = accountsFee;
fees.vat = vatFee;
fees.payroll = payrollFee;
fees.pension = pensionFee;
fees.property = propertyFee;
fees.management = managementFee;
fees.selfAssessment = selfAssessmentFee;
fees.subtotal = subtotal;
fees.vatAmount = vatAmount;
fees.total = total;
fees.monthly = monthly;
displayResults();
};
const displayResults = () => {
const resultsDiv = $('#results');
resultsDiv.html(`
<h3 class="text-xl font-semibold text-gray-700 border-b-2 border-maroon-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-maroon-600">£${fees.accounts.toFixed(2)}</span></li>
<li class="text-gray-600">VAT Fee (£): <span class="font-bold text-maroon-600">£${fees.vat.toFixed(2)}</span></li>
<li class="text-gray-600">Payroll Fee (£): <span class="font-bold text-maroon-600">£${fees.payroll.toFixed(2)}</span></li>
<li class="text-gray-600">Pension Fee (£): <span class="font-bold text-maroon-600">£${fees.pension.toFixed(2)}</span></li>
<li class="text-gray-600">Property Fee (£): <span class="font-bold text-maroon-600">£${fees.property.toFixed(2)}</span></li>
<li class="text-gray-600">Management Fee (£): <span class="font-bold text-maroon-600">£${fees.management.toFixed(2)}</span></li>
${services.selfAssessment ? `<li class="text-gray-600">Self Assessment Fee (£): <span class="font-bold text-maroon-600">£${fees.selfAssessment.toFixed(2)}</span></li>` : ''}
</ul>
<div class="mt-6 bg-white rounded-xl p-5 shadow-inner border border-gray-100">
<div class="grid grid-cols-2 py-2">
<span class="font-semibold text-lg">Subtotal Fee (£): </span>
<span class="font-bold text-maroon-600">£${fees.subtotal.toFixed(2)}</span>
</div>
<div class="grid grid-cols-2 py-2">
<span class="font-semibold text-lg">VAT 20% (£): </span>
<span class="font-bold text-maroon-600">£${fees.vatAmount.toFixed(2)}</span>
</div>
<div class="grid grid-cols-2 bg-white p-2 rounded-lg shadow mt-3">
<span class="font-semibold text-lg">Total Fee (£):</span>
<span class="font-bold text-2xl text-maroon-700">£${fees.total.toFixed(2)}</span>
</div>
<div class="grid grid-cols-2 bg-white p-2 shadow mt-3">
<span class="font-semibold text-lg">Monthly With VAT (£):</span>
<span class="font-bold text-maroon-600">£${fees.monthly.toFixed(2)}</span>
</div>
</div>
`);
};
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;
calculateTotalFees();
};
// Trigger Fee calculation on initial load
calculateTotalFees();
// Attach reset function to reset button
$('#resetButton').click(resetInputs);
});
</script>
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #ffffff;
color: #333;
}
#main-container {
margin: 0 auto;
max-width: 800px;
padding: 20px;
}
select, input[type="number"], input[type="text"], input[type="tel"] {
width: calc(100% - 16px);
margin: 5px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
button {
background-color: #9A0A24;
record: none;
color: white;
padding: 10px;
border-radius: 5px;
margin-top: 10px;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background-color: #7A0A19;
}
.results-upper {
margin-top: 20px;
padding: 20px;
background: #f1f1f1;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1 class="text-3xl font-bold">🏦 Client Fee Calculator</h1>
<p>Calculate professional service fees for your accounting clients.</p>
<div>
<label>Client Type:</label>
<select id="clientType">
<option value="Sole Trader">Sole Trader</option>
<option value="Limited Company" selected>Limited Company</option>
<option value="Partnership">Partnership</option>
</select>
<label>Annual 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">
<div>
<label>Management Accounts:</label>
<label><input type="checkbox" id="management" checked> Yes</label>
</div>
<div>
<label>Accounts Service:</label>
<label><input type="checkbox" id="accounts" checked> Yes</label>
<label>VAT Service:</label>
<label><input type="checkbox" id="vat" checked> Yes</label>
<label>Payroll Service:</label>
<label><input type="checkbox" id="payroll" checked> Yes</label>
<div id="payrollDetails" style="display:block;">
<label>Payroll Frequency:</label>
<select id="payrollFrequency">
<option value="Weekly">Weekly</option>
<option value="Monthly" selected>Monthly</option>
<option value="Fortnightly">Fortnightly</option>
</select>
</div>
<label>Self-Assessment Service:</label>
<label><input type="checkbox" id="selfAssessment"> Yes</label>
<label>Number of Persons for Self-Assessment:</label>
<input type="number" id="selfAssessmentPersons" value="1" min="1" disabled>
<button type="button" id="resetButton">Reset All Inputs</button>
</div>
</div>
<div id="results" class="results-upper mt-6"></div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!