From 8a2d926801fdb731f5fbd1109bb9e8522ba719a4 Mon Sep 17 00:00:00 2001
From: rishu ray <rayrishu19@gmail.com>
Date: Fri, 17 Apr 2026 12:21:26 +0530
Subject: [PATCH 1/5] feat: add Tip Calculator and Bill Splitter tool

---
 locales/en.yml                              |  4 +
 src/tools/index.ts                          |  3 +-
 src/tools/tip-calculator/index.ts           | 13 +++
 src/tools/tip-calculator/tip-calculator.vue | 93 +++++++++++++++++++++
 4 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 src/tools/tip-calculator/index.ts
 create mode 100644 src/tools/tip-calculator/tip-calculator.vue

diff --git a/locales/en.yml b/locales/en.yml
index d03d80d3f6..221c854716 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -97,6 +97,10 @@ tools:
     title: Percentage calculator
     description: Easily calculate percentages from a value to another value, or from a percentage to a value.
 
+  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.
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 388cfaf494..4143e205e8 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -58,6 +58,7 @@ import { tool as dateTimeConverter } from './date-time-converter';
 import { tool as deviceInformation } from './device-information';
 import { tool as cypher } from './encryption';
 import { tool as etaCalculator } from './eta-calculator';
+import { tool as tipCalculator } from './tip-calculator';
 import { tool as percentageCalculator } from './percentage-calculator';
 import { tool as gitMemo } from './git-memo';
 import { tool as hashText } from './hash-text';
@@ -168,7 +169,7 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Math',
-    components: [mathEvaluator, etaCalculator, percentageCalculator],
+    components: [mathEvaluator, etaCalculator, percentageCalculator, tipCalculator],
   },
   {
     name: 'Measurement',
diff --git a/src/tools/tip-calculator/index.ts b/src/tools/tip-calculator/index.ts
new file mode 100644
index 0000000000..d1e528fae5
--- /dev/null
+++ b/src/tools/tip-calculator/index.ts
@@ -0,0 +1,13 @@
+import { Calculator } from '@vicons/tabler';
+import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
+
+export const tool = defineTool({
+  name: translate('tools.tip-calculator.title'),
+  path: '/tip-calculator',
+  description: translate('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'),
+});
diff --git a/src/tools/tip-calculator/tip-calculator.vue b/src/tools/tip-calculator/tip-calculator.vue
new file mode 100644
index 0000000000..576a5cf761
--- /dev/null
+++ b/src/tools/tip-calculator/tip-calculator.vue
@@ -0,0 +1,93 @@
+<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;
+});
+
+const formatCurrency = (value: number) => {
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
+};
+
+const tipAmountFormatted = computed(() => formatCurrency(tipAmount.value));
+const totalAmountFormatted = computed(() => formatCurrency(totalAmount.value));
+const amountPerPersonFormatted = computed(() => formatCurrency(amountPerPerson.value));
+</script>
+
+<template>
+  <div style="flex: 0 0 100%">
+    <div style="margin: 0 auto; max-width: 600px">
+      <c-card mb-3>
+        <div mb-3>
+          Bill details
+        </div>
+        <div flex flex-col gap-4>
+          <div flex items-center gap-2>
+            <div style="min-width: 120px;">Bill Amount</div>
+            <n-input-number v-model:value="billAmount" :min="0" placeholder="Total Bill" style="flex: 1">
+              <template #prefix>$</template>
+            </n-input-number>
+          </div>
+          
+          <div flex items-center gap-2>
+            <div style="min-width: 120px;">Tip Percentage</div>
+            <n-input-number v-model:value="tipPercentage" :min="0" placeholder="Tip %" style="flex: 1">
+              <template #suffix>%</template>
+            </n-input-number>
+          </div>
+
+          <div flex items-center gap-2>
+            <div style="min-width: 120px;">Number of People</div>
+            <n-input-number v-model:value="numberOfPeople" :min="1" placeholder="People" style="flex: 1" />
+          </div>
+        </div>
+      </c-card>
+
+      <c-card mb-3>
+        <div mb-3>Results</div>
+        <div flex flex-col gap-3>
+          <div flex justify-between items-center>
+            <span>Tip Amount:</span>
+            <input-copyable :value="tipAmountFormatted" readonly style="max-width: 200px;" />
+          </div>
+          <div flex justify-between items-center>
+            <span>Total Bill:</span>
+            <input-copyable :value="totalAmountFormatted" readonly style="max-width: 200px;" />
+          </div>
+          <div border-t pt-3 flex justify-between items-center font-bold>
+            <span>Amount Per Person:</span>
+            <input-copyable :value="amountPerPersonFormatted" readonly style="max-width: 200px;" />
+          </div>
+        </div>
+      </c-card>
+
+      <c-card>
+        <div mb-2>Quick Tip %</div>
+        <div flex gap-2>
+          <n-button v-for="tip in [10, 15, 18, 20, 25]" :key="tip" @click="tipPercentage = tip" size="small">
+            {{ tip }}%
+          </n-button>
+        </div>
+      </c-card>
+    </div>
+  </div>
+</template>

From a48ca886c29a1690004a8bbb83ec087434b4a529 Mon Sep 17 00:00:00 2001
From: rishu ray <rayrishu19@gmail.com>
Date: Sun, 19 Apr 2026 20:49:17 +0530
Subject: [PATCH 2/5] fix: add E2E tests, data-test-id and remove currency
 symbols

---
 .../tip-calculator/tip-calculator.e2e.spec.ts | 49 ++++++++++++++++
 src/tools/tip-calculator/tip-calculator.vue   | 58 ++++++++++++++-----
 2 files changed, 94 insertions(+), 13 deletions(-)
 create mode 100644 src/tools/tip-calculator/tip-calculator.e2e.spec.ts

diff --git a/src/tools/tip-calculator/tip-calculator.e2e.spec.ts b/src/tools/tip-calculator/tip-calculator.e2e.spec.ts
new file mode 100644
index 0000000000..f122afefab
--- /dev/null
+++ b/src/tools/tip-calculator/tip-calculator.e2e.spec.ts
@@ -0,0 +1,49 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Tool - Tip calculator', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/tip-calculator');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('Tip calculator - IT Tools');
+  });
+
+  test('Correctly calculates tip and split', async ({ page }) => {
+    // Fill bill amount
+    await page.getByTestId('billAmount').locator('input').fill('100');
+    
+    // Fill tip percentage
+    await page.getByTestId('tipPercentage').locator('input').fill('15');
+    
+    // Fill number of people
+    await page.getByTestId('numberOfPeople').locator('input').fill('2');
+
+    // Check results
+    // 100 * 0.15 = 15.00
+    await expect(page.getByTestId('tipAmountResult').locator('input')).toHaveValue('15.00');
+    
+    // 100 + 15 = 115.00
+    await expect(page.getByTestId('totalBillResult').locator('input')).toHaveValue('115.00');
+    
+    // 115 / 2 = 57.50
+    await expect(page.getByTestId('amountPerPersonResult').locator('input')).toHaveValue('57.50');
+  });
+
+  test('Quick tip buttons work', async ({ page }) => {
+    await page.getByTestId('billAmount').locator('input').fill('100');
+    
+    // Click 20% button
+    await page.getByRole('button', { name: '20%' }).click();
+    
+    await expect(page.getByTestId('tipPercentage').locator('input')).toHaveValue('20');
+    await expect(page.getByTestId('tipAmountResult').locator('input')).toHaveValue('20.00');
+  });
+
+  test('Displays initial/empty results correctly', async ({ page }) => {
+    // Initial state with empty bill
+    await expect(page.getByTestId('tipAmountResult').locator('input')).toHaveValue('0.00');
+    await expect(page.getByTestId('totalBillResult').locator('input')).toHaveValue('0.00');
+    await expect(page.getByTestId('amountPerPersonResult').locator('input')).toHaveValue('0.00');
+  });
+});
diff --git a/src/tools/tip-calculator/tip-calculator.vue b/src/tools/tip-calculator/tip-calculator.vue
index 576a5cf761..3838724c21 100644
--- a/src/tools/tip-calculator/tip-calculator.vue
+++ b/src/tools/tip-calculator/tip-calculator.vue
@@ -24,13 +24,13 @@ const amountPerPerson = computed(() => {
   return totalAmount.value / numberOfPeople.value;
 });
 
-const formatCurrency = (value: number) => {
-  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
+const formatNumber = (value: number) => {
+  return new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value);
 };
 
-const tipAmountFormatted = computed(() => formatCurrency(tipAmount.value));
-const totalAmountFormatted = computed(() => formatCurrency(totalAmount.value));
-const amountPerPersonFormatted = computed(() => formatCurrency(amountPerPerson.value));
+const tipAmountFormatted = computed(() => formatNumber(tipAmount.value));
+const totalAmountFormatted = computed(() => formatNumber(totalAmount.value));
+const amountPerPersonFormatted = computed(() => formatNumber(amountPerPerson.value));
 </script>
 
 <template>
@@ -43,21 +43,37 @@ const amountPerPersonFormatted = computed(() => formatCurrency(amountPerPerson.v
         <div flex flex-col gap-4>
           <div flex items-center gap-2>
             <div style="min-width: 120px;">Bill Amount</div>
-            <n-input-number v-model:value="billAmount" :min="0" placeholder="Total Bill" style="flex: 1">
-              <template #prefix>$</template>
-            </n-input-number>
+            <n-input-number
+              v-model:value="billAmount"
+              data-test-id="billAmount"
+              :min="0"
+              placeholder="Total Bill"
+              style="flex: 1"
+            />
           </div>
           
           <div flex items-center gap-2>
             <div style="min-width: 120px;">Tip Percentage</div>
-            <n-input-number v-model:value="tipPercentage" :min="0" placeholder="Tip %" style="flex: 1">
+            <n-input-number
+              v-model:value="tipPercentage"
+              data-test-id="tipPercentage"
+              :min="0"
+              placeholder="Tip %"
+              style="flex: 1"
+            >
               <template #suffix>%</template>
             </n-input-number>
           </div>
 
           <div flex items-center gap-2>
             <div style="min-width: 120px;">Number of People</div>
-            <n-input-number v-model:value="numberOfPeople" :min="1" placeholder="People" style="flex: 1" />
+            <n-input-number
+              v-model:value="numberOfPeople"
+              data-test-id="numberOfPeople"
+              :min="1"
+              placeholder="People"
+              style="flex: 1"
+            />
           </div>
         </div>
       </c-card>
@@ -67,15 +83,30 @@ const amountPerPersonFormatted = computed(() => formatCurrency(amountPerPerson.v
         <div flex flex-col gap-3>
           <div flex justify-between items-center>
             <span>Tip Amount:</span>
-            <input-copyable :value="tipAmountFormatted" readonly style="max-width: 200px;" />
+            <input-copyable
+              :value="tipAmountFormatted"
+              data-test-id="tipAmountResult"
+              readonly
+              style="max-width: 200px;"
+            />
           </div>
           <div flex justify-between items-center>
             <span>Total Bill:</span>
-            <input-copyable :value="totalAmountFormatted" readonly style="max-width: 200px;" />
+            <input-copyable
+              :value="totalAmountFormatted"
+              data-test-id="totalBillResult"
+              readonly
+              style="max-width: 200px;"
+            />
           </div>
           <div border-t pt-3 flex justify-between items-center font-bold>
             <span>Amount Per Person:</span>
-            <input-copyable :value="amountPerPersonFormatted" readonly style="max-width: 200px;" />
+            <input-copyable
+              :value="amountPerPersonFormatted"
+              data-test-id="amountPerPersonResult"
+              readonly
+              style="max-width: 200px;"
+            />
           </div>
         </div>
       </c-card>
@@ -91,3 +122,4 @@ const amountPerPersonFormatted = computed(() => formatCurrency(amountPerPerson.v
     </div>
   </div>
 </template>
+

From 6419e7836d024cfaf620e848112aba421f10ab2e Mon Sep 17 00:00:00 2001
From: rishu ray <rayrishu19@gmail.com>
Date: Mon, 20 Apr 2026 04:02:07 +0530
Subject: [PATCH 3/5] fix(tip-calculator): resolve SonarCloud duplication and
 stabilize E2E locators

---
 src/tools/tip-calculator/tip-calculator.vue | 110 +++++---------------
 1 file changed, 27 insertions(+), 83 deletions(-)

diff --git a/src/tools/tip-calculator/tip-calculator.vue b/src/tools/tip-calculator/tip-calculator.vue
index 3838724c21..55f5b28637 100644
--- a/src/tools/tip-calculator/tip-calculator.vue
+++ b/src/tools/tip-calculator/tip-calculator.vue
@@ -3,77 +3,44 @@ 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 tipAmount = computed(() => (billAmount.value && tipPercentage.value) ? (billAmount.value * tipPercentage.value) / 100 : 0);
+const totalAmount = computed(() => billAmount.value ? billAmount.value + tipAmount.value : 0);
+const amountPerPerson = computed(() => (totalAmount.value && numberOfPeople.value && numberOfPeople.value > 0) ? totalAmount.value / numberOfPeople.value : 0);
 
-const totalAmount = computed(() => {
-  if (billAmount.value === undefined) {
-    return 0;
-  }
-  return billAmount.value + tipAmount.value;
-});
+const formatNum = (v: number) => new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(v);
 
-const amountPerPerson = computed(() => {
-  if (totalAmount.value === 0 || numberOfPeople.value === undefined || numberOfPeople.value <= 0) {
-    return 0;
-  }
-  return totalAmount.value / numberOfPeople.value;
-});
-
-const formatNumber = (value: number) => {
-  return new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value);
-};
-
-const tipAmountFormatted = computed(() => formatNumber(tipAmount.value));
-const totalAmountFormatted = computed(() => formatNumber(totalAmount.value));
-const amountPerPersonFormatted = computed(() => formatNumber(amountPerPerson.value));
+const results = computed(() => [
+  { label: 'Tip Amount', val: formatNum(tipAmount.value), id: 'tipAmountResult' },
+  { label: 'Total Bill', val: formatNum(totalAmount.value), id: 'totalBillResult' },
+  { label: 'Amount Per Person', val: formatNum(amountPerPerson.value), id: 'amountPerPersonResult', isBold: true }
+]);
 </script>
 
 <template>
   <div style="flex: 0 0 100%">
     <div style="margin: 0 auto; max-width: 600px">
       <c-card mb-3>
-        <div mb-3>
-          Bill details
-        </div>
+        <div mb-3>Bill details</div>
         <div flex flex-col gap-4>
           <div flex items-center gap-2>
             <div style="min-width: 120px;">Bill Amount</div>
-            <n-input-number
-              v-model:value="billAmount"
-              data-test-id="billAmount"
-              :min="0"
-              placeholder="Total Bill"
-              style="flex: 1"
-            />
+            <div style="flex: 1" data-test-id="billAmount">
+              <n-input-number v-model:value="billAmount" :min="0" placeholder="Total Bill" />
+            </div>
           </div>
-          
           <div flex items-center gap-2>
             <div style="min-width: 120px;">Tip Percentage</div>
-            <n-input-number
-              v-model:value="tipPercentage"
-              data-test-id="tipPercentage"
-              :min="0"
-              placeholder="Tip %"
-              style="flex: 1"
-            >
-              <template #suffix>%</template>
-            </n-input-number>
+            <div style="flex: 1" data-test-id="tipPercentage">
+              <n-input-number v-model:value="tipPercentage" :min="0" placeholder="Tip %">
+                <template #suffix>%</template>
+              </n-input-number>
+            </div>
           </div>
-
           <div flex items-center gap-2>
             <div style="min-width: 120px;">Number of People</div>
-            <n-input-number
-              v-model:value="numberOfPeople"
-              data-test-id="numberOfPeople"
-              :min="1"
-              placeholder="People"
-              style="flex: 1"
-            />
+            <div style="flex: 1" data-test-id="numberOfPeople">
+              <n-input-number v-model:value="numberOfPeople" :min="1" placeholder="People" />
+            </div>
           </div>
         </div>
       </c-card>
@@ -81,32 +48,11 @@ const amountPerPersonFormatted = computed(() => formatNumber(amountPerPerson.val
       <c-card mb-3>
         <div mb-3>Results</div>
         <div flex flex-col gap-3>
-          <div flex justify-between items-center>
-            <span>Tip Amount:</span>
-            <input-copyable
-              :value="tipAmountFormatted"
-              data-test-id="tipAmountResult"
-              readonly
-              style="max-width: 200px;"
-            />
-          </div>
-          <div flex justify-between items-center>
-            <span>Total Bill:</span>
-            <input-copyable
-              :value="totalAmountFormatted"
-              data-test-id="totalBillResult"
-              readonly
-              style="max-width: 200px;"
-            />
-          </div>
-          <div border-t pt-3 flex justify-between items-center font-bold>
-            <span>Amount Per Person:</span>
-            <input-copyable
-              :value="amountPerPersonFormatted"
-              data-test-id="amountPerPersonResult"
-              readonly
-              style="max-width: 200px;"
-            />
+          <div v-for="res in results" :key="res.id" flex justify-between items-center :class="{'border-t pt-3 font-bold': res.isBold}">
+            <span>{{ res.label }}:</span>
+            <div :data-test-id="res.id" style="max-width: 200px; width: 100%;">
+              <input-copyable :value="res.val" readonly />
+            </div>
           </div>
         </div>
       </c-card>
@@ -114,9 +60,7 @@ const amountPerPersonFormatted = computed(() => formatNumber(amountPerPerson.val
       <c-card>
         <div mb-2>Quick Tip %</div>
         <div flex gap-2>
-          <n-button v-for="tip in [10, 15, 18, 20, 25]" :key="tip" @click="tipPercentage = tip" size="small">
-            {{ tip }}%
-          </n-button>
+          <n-button v-for="tip in [10, 15, 18, 20, 25]" :key="tip" @click="tipPercentage = tip" size="small">{{ tip }}%</n-button>
         </div>
       </c-card>
     </div>

From 57942c3d5e3014726a69293d815cb84daad2adc3 Mon Sep 17 00:00:00 2001
From: rishu ray <rayrishu19@gmail.com>
Date: Thu, 4 Jun 2026 10:36:44 +0530
Subject: [PATCH 4/5] fix(tip-calculator): fix E2E title check flakiness and
 resolve linting violations

---
 components.d.ts                               | 34 +++++++++++++++++
 .../command-palette/command-palette.vue       |  2 +-
 .../tip-calculator/tip-calculator.e2e.spec.ts | 13 ++++---
 src/tools/tip-calculator/tip-calculator.vue   | 37 +++++++++++++------
 src/ui/c-select/c-select.vue                  |  2 +-
 src/ui/c-table/c-table.vue                    |  2 +-
 6 files changed, 70 insertions(+), 20 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 3e65c3cc52..3508494e79 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -90,17 +90,28 @@ declare module '@vue/runtime-core' {
     HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
     IbanValidatorAndParser: typeof import('./src/tools/iban-validator-and-parser/iban-validator-and-parser.vue')['default']
     'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
+    'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
     'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
+    IconMdiArrowDown: typeof import('~icons/mdi/arrow-down')['default']
+    IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
+    IconMdiCamera: typeof import('~icons/mdi/camera')['default']
     IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     IconMdiClose: typeof import('~icons/mdi/close')['default']
     IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
+    IconMdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
+    IconMdiDownload: typeof import('~icons/mdi/download')['default']
     IconMdiEye: typeof import('~icons/mdi/eye')['default']
     IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
     IconMdiHeart: typeof import('~icons/mdi/heart')['default']
+    IconMdiPause: typeof import('~icons/mdi/pause')['default']
+    IconMdiPlay: typeof import('~icons/mdi/play')['default']
+    IconMdiRecord: typeof import('~icons/mdi/record')['default']
+    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
     IconMdiSearch: typeof import('~icons/mdi/search')['default']
     IconMdiTranslate: typeof import('~icons/mdi/translate')['default']
     IconMdiTriangleDown: typeof import('~icons/mdi/triangle-down')['default']
+    IconMdiVideo: typeof import('~icons/mdi/video')['default']
     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
     IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
     Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
@@ -129,20 +140,42 @@ declare module '@vue/runtime-core' {
     MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
+    NButton: typeof import('naive-ui')['NButton']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDivider: typeof import('naive-ui')['NDivider']
+    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
+    NGi: typeof import('naive-ui')['NGi']
+    NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
+    NH2: typeof import('naive-ui')['NH2']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NImage: typeof import('naive-ui')['NImage']
+    NInputGroup: typeof import('naive-ui')['NInputGroup']
+    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NProgress: typeof import('naive-ui')['NProgress']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSlider: typeof import('naive-ui')['NSlider']
     NSpace: typeof import('naive-ui')['NSpace']
+    NSpin: typeof import('naive-ui')['NSpin']
+    NStatistic: typeof import('naive-ui')['NStatistic']
+    NSwitch: typeof import('naive-ui')['NSwitch']
     NTable: typeof import('naive-ui')['NTable']
+    NTag: typeof import('naive-ui')['NTag']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
@@ -173,6 +206,7 @@ declare module '@vue/runtime-core' {
     TextToBinary: typeof import('./src/tools/text-to-binary/text-to-binary.vue')['default']
     TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default']
     TextToUnicode: typeof import('./src/tools/text-to-unicode/text-to-unicode.vue')['default']
+    TipCalculator: typeof import('./src/tools/tip-calculator/tip-calculator.vue')['default']
     TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default']
     'TokenGenerator.tool': typeof import('./src/tools/token-generator/token-generator.tool.vue')['default']
     TomlToJson: typeof import('./src/tools/toml-to-json/toml-to-json.vue')['default']
diff --git a/src/modules/command-palette/command-palette.vue b/src/modules/command-palette/command-palette.vue
index bceef5cdcd..5d953fee2e 100644
--- a/src/modules/command-palette/command-palette.vue
+++ b/src/modules/command-palette/command-palette.vue
@@ -128,7 +128,7 @@ function activateOption(option: PaletteOption) {
       <c-input-text ref="inputRef" v-model:value="searchPrompt" raw-text placeholder="Type to search a tool or a command..." autofocus clearable />
 
       <div v-for="(options, category) in filteredSearchResult" :key="category">
-        <div ml-3 mt-3 text-sm font-bold text-primary op-60>
+        <div ml-3 mt-3 text-sm text-primary font-bold op-60>
           {{ category }}
         </div>
         <command-palette-option v-for="option in options" :key="option.name" :option="option" :selected="selectedOptionIndex === getOptionIndex(option)" @activated="activateOption" />
diff --git a/src/tools/tip-calculator/tip-calculator.e2e.spec.ts b/src/tools/tip-calculator/tip-calculator.e2e.spec.ts
index f122afefab..93ff12a788 100644
--- a/src/tools/tip-calculator/tip-calculator.e2e.spec.ts
+++ b/src/tools/tip-calculator/tip-calculator.e2e.spec.ts
@@ -3,6 +3,7 @@ import { expect, test } from '@playwright/test';
 test.describe('Tool - Tip calculator', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/tip-calculator');
+    await page.locator('[data-test-id="billAmount"]').waitFor();
   });
 
   test('Has correct title', async ({ page }) => {
@@ -12,30 +13,30 @@ test.describe('Tool - Tip calculator', () => {
   test('Correctly calculates tip and split', async ({ page }) => {
     // Fill bill amount
     await page.getByTestId('billAmount').locator('input').fill('100');
-    
+
     // Fill tip percentage
     await page.getByTestId('tipPercentage').locator('input').fill('15');
-    
+
     // Fill number of people
     await page.getByTestId('numberOfPeople').locator('input').fill('2');
 
     // Check results
     // 100 * 0.15 = 15.00
     await expect(page.getByTestId('tipAmountResult').locator('input')).toHaveValue('15.00');
-    
+
     // 100 + 15 = 115.00
     await expect(page.getByTestId('totalBillResult').locator('input')).toHaveValue('115.00');
-    
+
     // 115 / 2 = 57.50
     await expect(page.getByTestId('amountPerPersonResult').locator('input')).toHaveValue('57.50');
   });
 
   test('Quick tip buttons work', async ({ page }) => {
     await page.getByTestId('billAmount').locator('input').fill('100');
-    
+
     // Click 20% button
     await page.getByRole('button', { name: '20%' }).click();
-    
+
     await expect(page.getByTestId('tipPercentage').locator('input')).toHaveValue('20');
     await expect(page.getByTestId('tipAmountResult').locator('input')).toHaveValue('20.00');
   });
diff --git a/src/tools/tip-calculator/tip-calculator.vue b/src/tools/tip-calculator/tip-calculator.vue
index 55f5b28637..9be68b8b25 100644
--- a/src/tools/tip-calculator/tip-calculator.vue
+++ b/src/tools/tip-calculator/tip-calculator.vue
@@ -12,7 +12,7 @@ const formatNum = (v: number) => new Intl.NumberFormat('en-US', { minimumFractio
 const results = computed(() => [
   { label: 'Tip Amount', val: formatNum(tipAmount.value), id: 'tipAmountResult' },
   { label: 'Total Bill', val: formatNum(totalAmount.value), id: 'totalBillResult' },
-  { label: 'Amount Per Person', val: formatNum(amountPerPerson.value), id: 'amountPerPersonResult', isBold: true }
+  { label: 'Amount Per Person', val: formatNum(amountPerPerson.value), id: 'amountPerPersonResult', isBold: true },
 ]);
 </script>
 
@@ -20,24 +20,34 @@ const results = computed(() => [
   <div style="flex: 0 0 100%">
     <div style="margin: 0 auto; max-width: 600px">
       <c-card mb-3>
-        <div mb-3>Bill details</div>
+        <div mb-3>
+          Bill details
+        </div>
         <div flex flex-col gap-4>
           <div flex items-center gap-2>
-            <div style="min-width: 120px;">Bill Amount</div>
+            <div style="min-width: 120px;">
+              Bill Amount
+            </div>
             <div style="flex: 1" data-test-id="billAmount">
               <n-input-number v-model:value="billAmount" :min="0" placeholder="Total Bill" />
             </div>
           </div>
           <div flex items-center gap-2>
-            <div style="min-width: 120px;">Tip Percentage</div>
+            <div style="min-width: 120px;">
+              Tip Percentage
+            </div>
             <div style="flex: 1" data-test-id="tipPercentage">
               <n-input-number v-model:value="tipPercentage" :min="0" placeholder="Tip %">
-                <template #suffix>%</template>
+                <template #suffix>
+                  %
+                </template>
               </n-input-number>
             </div>
           </div>
           <div flex items-center gap-2>
-            <div style="min-width: 120px;">Number of People</div>
+            <div style="min-width: 120px;">
+              Number of People
+            </div>
             <div style="flex: 1" data-test-id="numberOfPeople">
               <n-input-number v-model:value="numberOfPeople" :min="1" placeholder="People" />
             </div>
@@ -46,9 +56,11 @@ const results = computed(() => [
       </c-card>
 
       <c-card mb-3>
-        <div mb-3>Results</div>
+        <div mb-3>
+          Results
+        </div>
         <div flex flex-col gap-3>
-          <div v-for="res in results" :key="res.id" flex justify-between items-center :class="{'border-t pt-3 font-bold': res.isBold}">
+          <div v-for="res in results" :key="res.id" flex items-center justify-between :class="{ 'border-t pt-3 font-bold': res.isBold }">
             <span>{{ res.label }}:</span>
             <div :data-test-id="res.id" style="max-width: 200px; width: 100%;">
               <input-copyable :value="res.val" readonly />
@@ -58,12 +70,15 @@ const results = computed(() => [
       </c-card>
 
       <c-card>
-        <div mb-2>Quick Tip %</div>
+        <div mb-2>
+          Quick Tip %
+        </div>
         <div flex gap-2>
-          <n-button v-for="tip in [10, 15, 18, 20, 25]" :key="tip" @click="tipPercentage = tip" size="small">{{ tip }}%</n-button>
+          <n-button v-for="tip in [10, 15, 18, 20, 25]" :key="tip" size="small" @click="tipPercentage = tip">
+            {{ tip }}%
+          </n-button>
         </div>
       </c-card>
     </div>
   </div>
 </template>
-
diff --git a/src/ui/c-select/c-select.vue b/src/ui/c-select/c-select.vue
index 7b3607c93e..38e2eb8fef 100644
--- a/src/ui/c-select/c-select.vue
+++ b/src/ui/c-select/c-select.vue
@@ -151,7 +151,7 @@ function onSearchInput() {
       >
         <div flex-1 truncate>
           <slot name="displayed-value">
-            <input v-if="searchable && isOpen" ref="searchInputRef" v-model="searchQuery" type="text" placeholder="Search..." class="search-input" w-full lh-normal color-current @input="onSearchInput">
+            <input v-if="searchable && isOpen" ref="searchInputRef" v-model="searchQuery" type="text" placeholder="Search..." class="search-input" w-full color-current lh-normal @input="onSearchInput">
             <span v-else-if="selectedOption" lh-normal>
               {{ selectedOption.label }}
             </span>
diff --git a/src/ui/c-table/c-table.vue b/src/ui/c-table/c-table.vue
index ef569890e0..43293ab3c9 100644
--- a/src/ui/c-table/c-table.vue
+++ b/src/ui/c-table/c-table.vue
@@ -39,7 +39,7 @@ const headers = computed(() => {
 <template>
   <div class="relative overflow-x-auto rounded">
     <table class="w-full border-collapse text-left text-sm text-gray-500 dark:text-gray-400" role="table" :aria-label="description">
-      <thead v-if="!hideHeaders" class="bg-#ffffff uppercase text-gray-700 dark:bg-#333333 dark:text-gray-400" border-b="1px solid dark:transparent #efeff5">
+      <thead v-if="!hideHeaders" class="bg-#ffffff text-gray-700 uppercase dark:bg-#333333 dark:text-gray-400" border-b="1px solid dark:transparent #efeff5">
         <tr>
           <th v-for="header in headers" :key="header.key" scope="col" class="px-6 py-3 text-xs">
             {{ header.label }}

From b27216faf806da635332d0a476575644539a293e Mon Sep 17 00:00:00 2001
From: rishu ray <rayrishu19@gmail.com>
Date: Mon, 8 Jun 2026 00:20:32 +0530
Subject: [PATCH 5/5] fix(ci): change E2E test runner to ubuntu-22.04

---
 .github/workflows/e2e-tests.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/e2e-tests.yml b/.github/workflows/e2e-tests.yml
index 13b787ef46..4929eb4062 100644
--- a/.github/workflows/e2e-tests.yml
+++ b/.github/workflows/e2e-tests.yml
@@ -7,7 +7,7 @@ on:
 jobs:
   test:
     timeout-minutes: 10
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     strategy:
       matrix:
         shard: [1/3, 2/3, 3/3]