feat: add Tip Calculator and Bill Splitter tool

"Tip Calculator & Bill Splitter" tool to the Maths category.
It allows users to calculate gratuity and split bills among multiple people with a clean, responsive UI.

Closes CorentinTh#1778

Co-authored-by: ShareVB <sharevb@gmail.com>

Author: rayrishu19-wq

locales/en.yml

@@ -162,6 +162,11 @@ tools:
       tag-x-is-what-percent-of-y: X is what percent of Y
       tag-is-what-percent-of: is what percent of
       tag-what-is-the-percentage-increase-decrease: What is the percentage increase/decrease
+
+  tip-calculator:
+    title: Tip calculator
+    description: Calculate the tip for a bill and split it among multiple people.
+
   svg-placeholder-generator:
     title: SVG placeholder generator
     description: Generate svg images to use as a placeholder in your applications.

src/tools/tip-calculator/index.ts

@@ -0,0 +1,14 @@
+import { Calculator } from '@vicons/tabler';
+import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
+
+export const tool = defineTool({
+  name: t('tools.tip-calculator.title'),
+  path: '/tip-calculator',
+  description: t('tools.tip-calculator.description'),
+  keywords: ['tip', 'calculator', 'bill', 'split', 'restaurant', 'money', 'payment'],
+  component: () => import('./tip-calculator.vue'),
+  icon: Calculator,
+  createdAt: new Date('2024-04-17'),
+  category: 'Maths',
+});

src/tools/tip-calculator/tip-calculator.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+const billAmount = ref<number>();
+const tipPercentage = ref<number>(15);
+const numberOfPeople = ref<number>(1);
+
+const tipAmount = computed(() => {
+  if (billAmount.value === undefined || tipPercentage.value === undefined) {
+    return 0;
+  }
+  return (billAmount.value * tipPercentage.value) / 100;
+});
+
+const totalAmount = computed(() => {
+  if (billAmount.value === undefined) {
+    return 0;
+  }
+  return billAmount.value + tipAmount.value;
+});
+
+const amountPerPerson = computed(() => {
+  if (totalAmount.value === 0 || numberOfPeople.value === undefined || numberOfPeople.value <= 0) {
+    return 0;
+  }
+  return totalAmount.value / numberOfPeople.value;
+});
+
+function formatCurrency(value: number) {
+  return new Intl.NumberFormat().format(value);
+}
+
+const tipAmountFormatted = computed(() => formatCurrency(tipAmount.value));
+const totalAmountFormatted = computed(() => formatCurrency(totalAmount.value));
+const amountPerPersonFormatted = computed(() => formatCurrency(amountPerPerson.value));
+</script>
+
+<template>
+  <div style="margin: 0 auto; max-width: 600px">
+    <c-card mb-3 title="Bill Details">
+      <n-form label-placement="left" label-width="150px" label-align="left">
+        <n-form-item label="Bill Amount:">
+          <n-input-number v-model:value="billAmount" :min="0" placeholder="Total Bill" />
+        </n-form-item>
+
+        <n-form-item label="Tip Percentage:">
+          <n-input-number v-model:value="tipPercentage" :min="0" placeholder="Tip %">
+            <template #suffix>
+              %
+            </template>
+          </n-input-number>
+        </n-form-item>
+
+        <n-form-item label="Number of person:">
+          <n-input-number v-model:value="numberOfPeople" :min="1" placeholder="People" />
+        </n-form-item>
+      </n-form>
+    </c-card>
+
+    <c-card mb-3 title="Results">
+      <input-copyable label="Tip Amount:" :value="tipAmountFormatted" readonly label-position="left" label-width="150px" mb-1 />
+      <input-copyable label="Total Bill:" :value="totalAmountFormatted" readonly label-position="left" label-width="150px" mb-1 />
+      <input-copyable label="Amount Per Person:" :value="amountPerPersonFormatted" readonly label-position="left" label-width="150px" mb-1 />
+    </c-card>
+
+    <c-card title="Quick Tip %">
+      <n-space justify="center">
+        <n-button v-for="tip in [10, 15, 18, 20, 25]" :key="tip" size="small" @click="tipPercentage = tip">
+          {{ tip }}%
+        </n-button>
+      </n-space>
+    </c-card>
+  </div>
+</template>