Most salary calculators I tried had the same problem: you type a number, you get a number, and you have no idea how it was calculated. That is fine for a rough guess. It is not fine when the number is someone's end-of-service gratuity or overtime pay.
So when I built the UAE tools on Toolkit Studio, I started from the rules first, and the UI second.
The rules I coded, not guessed
For UAE gratuity, the calculation follows Federal Decree-Law No. 33 of 2021. The daily wage is basic salary divided by 30. The entitlement is 21 days of basic salary for each year of service for the first five years, and 30 days per year after that. Partial years are calculated pro-rata, and the total is capped at two years of basic salary.
For overtime, the hourly rate is basic salary divided by 30, divided by 8. Daytime overtime is paid at 1.25x that rate, and night overtime (10 PM to 4 AM) plus rest-day work is paid at 1.5x.
These are estimates for planning, not legal advice. The pages say that clearly, and they link to the idea of checking the official MOHRE guidance for a real case. A calculator that pretends to be a lawyer is worse than no calculator at all.
Why the UAE weekend mattered
The UAE weekend has been Saturday and Sunday since January 2022. That small fact changes a date calculator too. My date difference tool already counted Monday to Friday as business days, which is also the UAE working week. When I added the UAE guides, I wrote that out in plain words instead of leaving it as an assumption in the code. If a rule affects the answer, it should be visible on the page.
The other two tools in the set
The AED converter uses the fixed peg of 3.6725 AED per US dollar, and lets the user edit the USD to INR rate instead of hard-coding a rate that goes stale. The Dubai salary calculator starts from a simple fact: Dubai has 0% income tax, so gross pay equals net pay, and then it compares that with a taxed-abroad figure so the user can see the difference in numbers, not in slogans. The example on the page uses AED 25,000 per month net in Dubai, AED 300,000 per year, and AED 18,750 per month abroad at a 25% tax rate, for an annual difference of AED 75,000.
How it is built
All four tools are client-side React components in a Vite app, with no signup and no backend. The same shared tool UI is reused, and each page is prerendered with its own guide and FAQs, so the explanation and the calculator live on the same page. That was a deliberate choice: if the formula is the point, the formula should not be hidden behind a second click.
The hardest part was not the maths. It was resisting the urge to add more inputs. Every extra field makes the tool look powerful and makes the user less likely to finish it. I kept the inputs to the ones the rule actually needs: basic salary, years of service, and for overtime, the hours and when they were worked.
What I would do differently
I would write the worked example first, before the component. On the first version of one page, the example and the live tool used different example numbers, and that kind of mismatch is exactly what makes a user stop trusting a calculator. Now the example on the page is the same example the tool would produce.
Try the tools here: Toolkit Studio — the UAE calculators are the gratuity calculator, the overtime pay calculator, the AED currency converter, and the Dubai salary calculator.
What rule-based calculator have you built where the rule itself was the hardest part to get right? I would like to hear how you handled it.
