Javascript, HTML, CSS Code
<html> <head> <script type="text/javascript"> window.addEventListener('error', function(event) { var message = JSON.parse(JSON.stringify(event.message)); var source = event.filename; var lineno = event.lineno; var colno = event.colno; var error = event.error; window.parent.postMessage({ type: 'iframeError', details: { message: message, source: source, lineno: lineno, colno: colno, error: error ? error.stack : '' } }, '*'); }); window.addEventListener('unhandledrejection', function(event) { window.parent.postMessage({ type: 'iframePromiseRejection', details: { reason: event.reason } }, '*'); }); </script> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>ASN Partners Estimate Fee</title> <meta name="description" content="Calculate professional service fees for your clients easily using our interactive ASN Partners Estimate 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 clientName = ''; let contactNo = ''; let clientType = 'Limited Company'; let turnover = 0; let employees = 0; 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-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">£${calculatedFees.accounts.toFixed(2)}</span></li> <li class="text-gray-600">VAT Fee: <span class="font-bold text-maroon-600">£${calculatedFees.vat.toFixed(2)}</span></li> <li class="text-gray-600">Payroll Fee: <span class="font-bold text-maroon-600">£${calculatedFees.payroll.toFixed(2)}</span></li> <li class="text-gray-600">Pension Fee: <span class="font-bold text-maroon-600">£${calculatedFees.pension.toFixed(2)}</span></li> <li class="text-gray-600">Property Fee: <span class="font-bold text-maroon-600">£${calculatedFees.property.toFixed(2)}</span></li> <li class="text-gray-600">Management Fee: <span class="font-bold text-maroon-600">£${calculatedFees.management.toFixed(2)}</span></li> ${services.selfAssessment ? ` <li class="text-gray-600">Self Assessment Fee: <span class="font-bold text-maroon-600">£${calculatedFees.selfAssessment.toFixed(2)}</span></li> ` : ''} </ul> <div class="mt-6 bg-white rounded-xl p-5 shadow-inner border border-gray-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-maroon-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-maroon-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-maroon-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-maroon-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 === 'clientName') clientName = value; else if (id === 'contactNo') contactNo = value; else if (id === 'clientType') clientType = value; else if (id === 'turnover') turnover = 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 === 'employees') employees = Number(value); if (id === 'pensionEmployees') pensionEmployees = Number(value); if (id === 'selfAssessmentPersons') selfAssessmentPersons = Number(value); displayResults(); togglePayrollFields(); }); const updateServiceStatus = (service) => { const isActive = services[service]; $(`#status_${service}`).text(isActive ? "Yes" : "No").css("color", isActive ? "green" : "red"); togglePayrollFields(); }; const togglePayrollFields = () => { if (services.payroll) { $('#payrollFrequency').parent().show(); $('#employees').parent().show(); } else { $('#payrollFrequency').parent().hide(); $('#employees').parent().hide(); } }; const resetInputs = () => { clientName = ''; contactNo = ''; clientType = 'Limited Company'; turnover = 0; employees = 0; 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="properties"]') ? properties : el.is('[id="selfAssessmentPersons"]') ? selfAssessmentPersons : el.is('[id="pensionEmployees"]') ? pensionEmployees : el.is('[id="clientName"]') ? clientName : el.is('[id="contactNo"]') ? contactNo : payrollFrequency); } }); displayResults(); }; $('#resetButton').on('click', resetInputs); displayResults(); togglePayrollFields(); }); </script> <style> body { font-family: 'Inter', sans-serif; background-color: #FFFFFF; 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: #9A0A24; border: none; border-radius: 5px; color: white; padding: 10px 20px; cursor: pointer; transition: background 0.3s; margin-top: 10px; } button:hover { background: #7A0A19; } h1, h3, h4 { text-align: center; margin: 10px 0; } .bg-white { background-color: #FFFFFF; } .results-upper { margin-top: 20px; background: #f1f1f1; 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; } label { margin-top: 10px; display: block; } select { width: 100%; height: 35px; margin-bottom: 10px; } .conditional { display: none; } </style> <link rel="canonical" href="https://calculator.tools/prompt/10024/"> <meta charset="utf-8"> </head> <body> <div id="main-container" class="container"> <div class="bg-white rounded-lg p-6 shadow-md"> <h1 class="text-3xl font-bold">ASN Partners Estimate Fee</h1> <p>Calculate professional service fees for your 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">👤 Client Details</h3> <form id="inputForm"> <label>Client Name:</label> <input type="text" id="clientName" placeholder="Enter client name"> <label>Contact Number:</label> <input type="tel" id="contactNo" placeholder="Enter contact number"> <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> </select> <label>Annual Turnover (£):</label> <select id="turnover"> <option value="0">£ 0k - £ 90k</option> <option value="90000">£ 91k - £ 99k</option> <option value="100000">£ 100k - £ 149k</option> <option value="150000">£ 150k - £ 249k</option> <option value="250000">£ 250k - £ 349k</option> <option value="350000">£ 350k - £ 499k</option> <option value="500000">£ 500k - £ 749k</option> <option value="750000">£ 750k - £ 999k</option> <option value="1000000">£ 1m +</option> </select> <label>Properties Managed:</label> <input type="number" id="properties" value="1" min="0"> <label>✔️ Management Accounts:</label> <input type="checkbox" id="management" checked> <h4 class="font-bold mt-4">🛠️ Selected 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> <div class="conditional"> <label>Payroll Frequency:</label> <select id="payrollFrequency"> <option value="Weekly">Weekly</option> <option value="Monthly">Monthly</option> <option value="Fortnightly">Fortnightly</option> </select> <label>Number of Employees:</label> <select id="employees"> <option value="1">01 – 05</option> <option value="6">06 – 10</option> <option value="11">11 – 15</option> <option value="16">16 – 20</option> <option value="21">21 – 30</option> <option value="31">31 – 40</option> <option value="41">41 – 50</option> <option value="51">51 – 75</option> <option value="76">76 – 100</option> <option value="101">100+</option> </select> </div> <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>Number of Employees (for Pension):</label> <select id="pensionEmployees"> <option value="1">01 – 05</option> <option value="6">06 – 10</option> <option value="11">11 – 15</option> <option value="16">16 – 20</option> <option value="21">21 – 30</option> <option value="31">31 – 40</option> <option value="41">41 – 50</option> <option value="51">51 – 75</option> <option value="76">76 – 100</option> <option value="101">100+</option> </select> <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>Number of Persons for Self-Assessment:</label> <input type="number" id="selfAssessmentPersons" value="1" min="1"> <button type="button" id="resetButton">Reset All Inputs</button> </form> </div> <div id="results" class="results-upper mt-6"></div> </div> </div> <script type="text/javascript"> var localStoragePrefix = "ct-{{ cachebreaker }}"; var lastSave = 0; function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } </script> <script type="text/javascript"> window.addEventListener('load', function() { var observer = new MutationObserver(function() { window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); observer.observe(document.body, {attributes: true, childList: true, subtree: true}); window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); </script> </body> </html>
ASN Partners Estimate Fee
Calculator Tools