From f3ab0f22fc690621059905047831a2379911eb2f Mon Sep 17 00:00:00 2001
From: Darko Gjorgjijoski <dg@darkog.com>
Date: Thu, 11 Jun 2026 11:00:25 +0200
Subject: [PATCH] chore(frontend): fix ESLint, add Pint+ESLint pre-commit hook,
 centralize v-html
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix the broken ESLint setup: add vue-eslint-parser and @typescript-eslint/parser
and wire the TS parser into eslint.config.mjs so .ts and <script lang=ts> parse
(was failing outright). Clear the resulting backlog to a clean 0/0 baseline —
fix genuine issues, relax two intentional-pattern rules (multi-word-component-names,
no-required-prop-with-default).

Add a committed .githooks/pre-commit (enabled via core.hooksPath, auto-set by the
prepare script) that runs Pint on staged PHP and ESLint --max-warnings 0 on staged
resources/scripts JS/TS/Vue, blocking on failure. Add composer/npm lint scripts and
document the gate in CLAUDE.md.

Replace every scattered v-html with a single audited BaseSanitizedHtml component
that DOMPurify-sanitizes its input (new utils/markdown.ts sanitizeHtml), so
server/registry-provided HTML is actually sanitized and vue/no-v-html stays enabled
everywhere but one reviewed sink.
---
 .githooks/pre-commit                          | 36 +++++++++++++++++++
 CLAUDE.md                                     | 14 ++++++++
 composer.json                                 |  2 ++
 eslint.config.mjs                             | 28 ++++++++++++++-
 .../base/BaseCustomerSelectPopup.vue          |  2 +-
 .../components/base/BaseItemSelect.vue        |  4 +--
 .../components/base/BaseMultiselect.vue       |  5 ++-
 .../components/base/BaseSanitizedHtml.vue     | 25 +++++++++++++
 .../base/InvoiceInformationCard.vue           |  2 +-
 .../scripts/components/editor/RichEditor.vue  |  4 +--
 .../scripts/components/form/SwitchSection.vue |  2 +-
 .../scripts/components/table/DataTable.vue    |  2 +-
 .../admin/modules/views/ModuleDetailView.vue  |  4 +--
 .../views/settings/AdminUpdateAppView.vue     | 12 ++-----
 .../company/ai/components/AiChatMessage.vue   |  6 +---
 .../components/SendEstimateModal.vue          |  4 +--
 .../estimates/views/EstimateIndexView.vue     |  2 +-
 .../invoices/components/SendInvoiceModal.vue  |  4 +--
 .../invoices/views/InvoiceIndexView.vue       |  2 +-
 .../modules/components/CompanyModuleCard.vue  |  3 +-
 .../modules/views/CompanyModulesIndexView.vue |  3 +-
 .../payments/components/SendPaymentModal.vue  |  4 +--
 .../EstimatesTabConvertEstimate.vue           |  2 +-
 .../components/ExchangeRateProviderModal.vue  |  2 +-
 .../components/InvoicesTabRetrospective.vue   |  2 +-
 .../document-form/DocumentItemRowTax.vue      |  2 +-
 .../shared/document-form/DocumentTotals.vue   |  2 +-
 .../shared/document-form/NoteSelectPopup.vue  |  2 +-
 .../shared/document-form/TaxSelectPopup.vue   |  2 +-
 .../scripts/layouts/partials/SiteSidebar.vue  |  2 +-
 resources/scripts/utils/markdown.ts           | 16 +++++++++
 31 files changed, 155 insertions(+), 47 deletions(-)
 create mode 100755 .githooks/pre-commit
 create mode 100644 resources/scripts/components/base/BaseSanitizedHtml.vue

diff --git a/.githooks/pre-commit b/.githooks/pre-commit
new file mode 100755
index 00000000..8f0f3a3e
--- /dev/null
+++ b/.githooks/pre-commit
@@ -0,0 +1,36 @@
+#!/bin/sh
+# Pre-commit gate: Laravel Pint (PHP) + ESLint (JS/TS/Vue) must be clean on staged files.
+# See CLAUDE.md "Code Quality Gate". Bypass intentionally (discouraged): git commit --no-verify
+
+status=0
+
+# --- Pint on staged PHP ---
+php_files=$(git diff --cached --name-only --diff-filter=ACMR | grep -E '\.php$' || true)
+if [ -n "$php_files" ]; then
+  echo "▶ Pint (pre-commit)…"
+  # shellcheck disable=SC2086
+  if command -v php >/dev/null 2>&1 && [ -f vendor/bin/pint ]; then
+    php vendor/bin/pint --test -- $php_files || status=1
+  else
+    echo "⚠ Pint unavailable — skipping (run: composer lint before pushing)." >&2
+  fi
+fi
+
+# --- ESLint on staged JS/TS/Vue under resources/scripts (ESLint's configured scope) ---
+js_files=$(git diff --cached --name-only --diff-filter=ACMR | grep -E '^resources/scripts/.*\.(js|cjs|mjs|ts|vue)$' || true)
+if [ -n "$js_files" ]; then
+  echo "▶ eslint (pre-commit)…"
+  # shellcheck disable=SC2086
+  if [ -x node_modules/.bin/eslint ]; then
+    node_modules/.bin/eslint --max-warnings 0 $js_files || status=1
+  else
+    echo "⚠ eslint unavailable — skipping (run: npm run lint before pushing)." >&2
+  fi
+fi
+
+if [ "$status" -ne 0 ]; then
+  echo "✖ Lint failed — fix it (composer lint:fix / npx eslint --fix), then re-commit." >&2
+  echo "  To bypass intentionally: git commit --no-verify" >&2
+  exit 1
+fi
+exit 0
diff --git a/CLAUDE.md b/CLAUDE.md
index 44406501..794c55f9 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -29,8 +29,22 @@ Tests use SQLite in-memory DB, configured in `phpunit.xml`. Tests seed via `Data
 ```bash
 vendor/bin/pint --dirty --format agent    # Fix style on modified PHP files
 vendor/bin/pint --test                    # Check style without fixing (CI uses this)
+composer lint        # = pint --test   ;  composer lint:fix = pint
+npm run lint         # eslint (--max-warnings 0)  ;  npm run lint:fix = eslint --fix
 ```
 
+### Code Quality Gate (pre-commit hook)
+A committed Git hook (`.githooks/pre-commit`) runs **Pint** on staged `.php` and **ESLint** on staged
+`resources/scripts/**` `.{js,cjs,mjs,ts,vue}` files, and **blocks the commit on any failure** (ESLint runs
+with `--max-warnings 0`). It lints **staged files only**, and soft-skips if PHP/Pint or `node_modules` is
+unavailable (CI is the backstop). The hook is enabled via `core.hooksPath`, set automatically by the
+`prepare` script on `npm install`/`yarn install`; to enable it manually run:
+```bash
+git config core.hooksPath .githooks
+```
+Bypass intentionally (discouraged): `git commit --no-verify`. Intentional `v-html` is allowed via an
+inline `<!-- eslint-disable-next-line vue/no-v-html -->` with a reason.
+
 ### Artisan Generators
 Always use `php artisan make:*` with `--no-interaction` to create new files (models, controllers, migrations, tests, etc.).
 
diff --git a/composer.json b/composer.json
index 3a9bdba2..c96acdf9 100644
--- a/composer.json
+++ b/composer.json
@@ -63,6 +63,8 @@
         }
     },
     "scripts": {
+        "lint": "pint --test",
+        "lint:fix": "pint",
         "post-autoload-dump": [
             "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
             "@php artisan package:discover --ansi"
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 35f46bfe..6788a096 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,13 +1,39 @@
 import pluginVue from 'eslint-plugin-vue'
 import eslintConfigPrettier from 'eslint-config-prettier'
+import tsParser from '@typescript-eslint/parser'
 
 export default [
   ...pluginVue.configs['flat/recommended'],
+  // Parse TypeScript inside <script lang="ts"> blocks of .vue files.
+  // vue-eslint-parser stays the top-level parser; it delegates <script> to tsParser.
+  {
+    files: ['resources/scripts/**/*.vue'],
+    languageOptions: {
+      parserOptions: {
+        parser: tsParser,
+        sourceType: 'module',
+        ecmaVersion: 'latest',
+      },
+    },
+  },
+  // Parse standalone .ts files with the TypeScript parser.
+  {
+    files: ['resources/scripts/**/*.ts'],
+    languageOptions: {
+      parser: tsParser,
+      sourceType: 'module',
+      ecmaVersion: 'latest',
+    },
+  },
   eslintConfigPrettier,
   {
-    files: ['resources/scripts/**/*.{js,vue}'],
+    files: ['resources/scripts/**/*.{js,ts,vue}'],
     rules: {
       'vue/no-mutating-props': 'off',
+      // Single-word components (Page, Breadcrumb) are intentional in this app.
+      'vue/multi-word-component-names': 'off',
+      // The app intentionally pairs `required` props with sensible `default`s.
+      'vue/no-required-prop-with-default': 'off',
     },
   },
 ]
diff --git a/resources/scripts/components/base/BaseCustomerSelectPopup.vue b/resources/scripts/components/base/BaseCustomerSelectPopup.vue
index 6e9f3c99..6b43caa6 100644
--- a/resources/scripts/components/base/BaseCustomerSelectPopup.vue
+++ b/resources/scripts/components/base/BaseCustomerSelectPopup.vue
@@ -411,7 +411,7 @@ function initGenerator(name: string): string {
                 :placeholder="$t('general.search')"
                 type="text"
                 icon="search"
-                @update:modelValue="() => debounceSearchCustomer()"
+                @update:model-value="() => debounceSearchCustomer()"
               />
 
               <ul
diff --git a/resources/scripts/components/base/BaseItemSelect.vue b/resources/scripts/components/base/BaseItemSelect.vue
index 2cda3dc5..cd2f1d3f 100644
--- a/resources/scripts/components/base/BaseItemSelect.vue
+++ b/resources/scripts/components/base/BaseItemSelect.vue
@@ -144,8 +144,8 @@ function deselectItem(index: number): void {
       searchable
       :options="searchItems"
       object
-      @update:modelValue="(val: Item) => $emit('select', val)"
-      @searchChange="(val: string) => $emit('search', val)"
+      @update:model-value="(val: Item) => $emit('select', val)"
+      @search-change="(val: string) => $emit('search', val)"
     >
       <!-- Add Item Action  -->
       <template #action>
diff --git a/resources/scripts/components/base/BaseMultiselect.vue b/resources/scripts/components/base/BaseMultiselect.vue
index c8e5632e..470614e5 100644
--- a/resources/scripts/components/base/BaseMultiselect.vue
+++ b/resources/scripts/components/base/BaseMultiselect.vue
@@ -27,7 +27,6 @@
           name="tag"
           :option="option.raw"
           :handle-tag-remove="handleTagRemove"
-          :handleTagRemove="handleTagRemove"
           :disabled="disabled"
         >
           <span
@@ -228,11 +227,11 @@
       />
       <template v-else>
         <input
-          v-for="(value, index) in nativeValues"
+          v-for="(nativeValue, index) in nativeValues"
           :key="index"
           type="hidden"
           :name="`${name}[]`"
-          :value="value"
+          :value="nativeValue"
         />
       </template>
     </template>
diff --git a/resources/scripts/components/base/BaseSanitizedHtml.vue b/resources/scripts/components/base/BaseSanitizedHtml.vue
new file mode 100644
index 00000000..0041e497
--- /dev/null
+++ b/resources/scripts/components/base/BaseSanitizedHtml.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { sanitizeHtml } from '@/scripts/utils/markdown'
+
+const props = withDefaults(
+  defineProps<{
+    /** Raw HTML to render. Always DOMPurify-sanitized before it is bound. */
+    html?: string | null
+  }>(),
+  { html: '' }
+)
+
+const clean = computed(() => sanitizeHtml(props.html))
+</script>
+
+<template>
+  <!--
+    The single, audited v-html sink in the app. `clean` is DOMPurify-sanitized
+    above, so any HTML (server-, registry-, or update-server-provided) rendered
+    through this component is safe. Do NOT use v-html anywhere else — route it
+    here instead. This is the only place vue/no-v-html is disabled.
+  -->
+  <!-- eslint-disable-next-line vue/no-v-html -->
+  <div v-html="clean" />
+</template>
diff --git a/resources/scripts/components/base/InvoiceInformationCard.vue b/resources/scripts/components/base/InvoiceInformationCard.vue
index addfb6a6..46a9fff2 100644
--- a/resources/scripts/components/base/InvoiceInformationCard.vue
+++ b/resources/scripts/components/base/InvoiceInformationCard.vue
@@ -77,7 +77,7 @@ defineProps<Props>()
             {{ $t('invoices.notes') }}
           </dt>
           <dd class="mt-1 text-sm text-heading sm:mt-0 sm:col-span-2">
-            <span v-html="invoice.formatted_notes"></span>
+            <BaseSanitizedHtml :html="invoice.formatted_notes" />
           </dd>
         </div>
       </dl>
diff --git a/resources/scripts/components/editor/RichEditor.vue b/resources/scripts/components/editor/RichEditor.vue
index 925a5355..44c2d6a7 100644
--- a/resources/scripts/components/editor/RichEditor.vue
+++ b/resources/scripts/components/editor/RichEditor.vue
@@ -23,8 +23,8 @@
           <div class="flex flex-wrap space-x-1">
             <button
               v-for="button in editorButtons"
-              type="button"
               :key="button.name"
+              type="button"
               class="p-1 rounded hover:bg-surface-tertiary"
               @click="button.action"
             >
@@ -44,8 +44,8 @@
         <div class="flex flex-wrap space-x-1">
           <button
               v-for="button in editorButtons"
-              type="button"
               :key="button.name"
+              type="button"
               class="p-1 rounded hover:bg-surface-tertiary"
               @click="button.action"
             >
diff --git a/resources/scripts/components/form/SwitchSection.vue b/resources/scripts/components/form/SwitchSection.vue
index e9d43c69..13061865 100644
--- a/resources/scripts/components/form/SwitchSection.vue
+++ b/resources/scripts/components/form/SwitchSection.vue
@@ -19,7 +19,7 @@
         modelValue ? 'bg-primary-500' : 'bg-surface-muted',
         'ml-4 relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
       ]"
-      @update:modelValue="onUpdate"
+      @update:model-value="onUpdate"
     >
       <span
         aria-hidden="true"
diff --git a/resources/scripts/components/table/DataTable.vue b/resources/scripts/components/table/DataTable.vue
index 451edfb9..60423aa3 100644
--- a/resources/scripts/components/table/DataTable.vue
+++ b/resources/scripts/components/table/DataTable.vue
@@ -132,7 +132,7 @@
           <TablePagination
             v-if="pagination"
             :pagination="pagination"
-            @pageChange="pageChange"
+            @page-change="pageChange"
           />
         </div>
       </div>
diff --git a/resources/scripts/features/admin/modules/views/ModuleDetailView.vue b/resources/scripts/features/admin/modules/views/ModuleDetailView.vue
index d3ea2912..88586cd8 100644
--- a/resources/scripts/features/admin/modules/views/ModuleDetailView.vue
+++ b/resources/scripts/features/admin/modules/views/ModuleDetailView.vue
@@ -285,7 +285,7 @@
               <div class="flex items-center mt-2">
                 <BaseRating :rating="review.rating" />
               </div>
-              <div class="mt-2 prose prose-sm max-w-none text-muted" v-html="review.comment" />
+              <BaseSanitizedHtml class="mt-2 prose prose-sm max-w-none text-muted" :html="review.comment" />
             </div>
           </div>
         </div>
@@ -302,7 +302,7 @@
 
       <!-- License -->
       <div v-if="activeTab === 'license'" class="py-6">
-        <div class="prose prose-sm max-w-none text-muted" v-html="moduleData.license" />
+        <BaseSanitizedHtml class="prose prose-sm max-w-none text-muted" :html="moduleData.license" />
       </div>
     </div>
 
diff --git a/resources/scripts/features/admin/views/settings/AdminUpdateAppView.vue b/resources/scripts/features/admin/views/settings/AdminUpdateAppView.vue
index 87b2a340..fad95c9d 100644
--- a/resources/scripts/features/admin/views/settings/AdminUpdateAppView.vue
+++ b/resources/scripts/features/admin/views/settings/AdminUpdateAppView.vue
@@ -372,17 +372,9 @@ function showApiError(error: unknown): void {
           </span>
         </div>
 
-        <div
-          v-if="updateRelease.description"
-          class="update-rich-text mt-4 max-w-[680px] text-sm leading-snug text-muted"
-          v-html="updateRelease.description"
-        />
+        <BaseSanitizedHtml v-if="updateRelease.description" class="update-rich-text mt-4 max-w-[680px] text-sm leading-snug text-muted" :html="updateRelease.description" />
 
-        <div
-          v-if="updateRelease.changelog"
-          class="update-rich-text mt-4 max-w-[680px] text-sm leading-snug text-muted"
-          v-html="updateRelease.changelog"
-        />
+        <BaseSanitizedHtml v-if="updateRelease.changelog" class="update-rich-text mt-4 max-w-[680px] text-sm leading-snug text-muted" :html="updateRelease.changelog" />
 
         <div v-if="requirementEntries.length" class="mt-6">
           <label class="text-sm font-medium input-label">
diff --git a/resources/scripts/features/company/ai/components/AiChatMessage.vue b/resources/scripts/features/company/ai/components/AiChatMessage.vue
index a02fba56..356639a9 100644
--- a/resources/scripts/features/company/ai/components/AiChatMessage.vue
+++ b/resources/scripts/features/company/ai/components/AiChatMessage.vue
@@ -36,11 +36,7 @@ const renderedHtml = computed(() =>
       </p>
       <!-- Assistant output is sanitized via DOMPurify in renderMarkdown
            before it reaches v-html — see resources/scripts/utils/markdown.ts. -->
-      <div
-        v-else
-        class="prose prose-sm max-w-none break-words"
-        v-html="renderedHtml"
-      />
+      <BaseSanitizedHtml v-else class="prose prose-sm max-w-none break-words" :html="renderedHtml" />
     </div>
   </div>
 </template>
diff --git a/resources/scripts/features/company/estimates/components/SendEstimateModal.vue b/resources/scripts/features/company/estimates/components/SendEstimateModal.vue
index 3843ccad..5e01c668 100644
--- a/resources/scripts/features/company/estimates/components/SendEstimateModal.vue
+++ b/resources/scripts/features/company/estimates/components/SendEstimateModal.vue
@@ -50,8 +50,8 @@
               v-model="estimateMailForm.cc"
               type="email"
               :invalid="v$.cc && v$.cc.$error"
-              @input="v$.cc && v$.cc.$touch()"
               placeholder="Optional: CC recipient"
+              @input="v$.cc && v$.cc.$touch()"
             />
           </BaseInputGroup>
           <BaseInputGroup
@@ -62,8 +62,8 @@
               v-model="estimateMailForm.bcc"
               type="email"
               :invalid="v$.bcc && v$.bcc.$error"
-              @input="v$.bcc && v$.bcc.$touch()"
               placeholder="Optional: BCC recipient"
+              @input="v$.bcc && v$.bcc.$touch()"
             />
           </BaseInputGroup>
           <BaseInputGroup
diff --git a/resources/scripts/features/company/estimates/views/EstimateIndexView.vue b/resources/scripts/features/company/estimates/views/EstimateIndexView.vue
index c2d5eea6..1b9370f4 100644
--- a/resources/scripts/features/company/estimates/views/EstimateIndexView.vue
+++ b/resources/scripts/features/company/estimates/views/EstimateIndexView.vue
@@ -143,10 +143,10 @@
 
       <BaseTable
         ref="tableRef"
+        :key="tableKey"
         :data="fetchData"
         :columns="estimateColumns"
         :placeholder-count="estimateStore.totalEstimateCount >= 20 ? 10 : 5"
-        :key="tableKey"
         class="mt-4"
       >
         <template #header>
diff --git a/resources/scripts/features/company/invoices/components/SendInvoiceModal.vue b/resources/scripts/features/company/invoices/components/SendInvoiceModal.vue
index 2b04b115..763ba933 100644
--- a/resources/scripts/features/company/invoices/components/SendInvoiceModal.vue
+++ b/resources/scripts/features/company/invoices/components/SendInvoiceModal.vue
@@ -58,8 +58,8 @@
               v-model="form.cc"
               type="text"
               :invalid="v$.cc.$error"
-              @input="v$.cc.$touch()"
               placeholder="Optional: CC recipient"
+              @input="v$.cc.$touch()"
             />
           </BaseInputGroup>
 
@@ -73,8 +73,8 @@
               v-model="form.bcc"
               type="text"
               :invalid="v$.bcc.$error"
-              @input="v$.bcc.$touch()"
               placeholder="Optional: BCC recipient"
+              @input="v$.bcc.$touch()"
             />
           </BaseInputGroup>
 
diff --git a/resources/scripts/features/company/invoices/views/InvoiceIndexView.vue b/resources/scripts/features/company/invoices/views/InvoiceIndexView.vue
index 5405df6b..585c704f 100644
--- a/resources/scripts/features/company/invoices/views/InvoiceIndexView.vue
+++ b/resources/scripts/features/company/invoices/views/InvoiceIndexView.vue
@@ -232,10 +232,10 @@
 
         <BaseTable
           ref="tableRef"
+          :key="tableKey"
           :data="fetchData"
           :columns="invoiceColumns"
           :placeholder-count="invoiceStore.invoiceTotalCount >= 20 ? 10 : 5"
-          :key="tableKey"
           class="mt-4"
         >
           <template #header>
diff --git a/resources/scripts/features/company/modules/components/CompanyModuleCard.vue b/resources/scripts/features/company/modules/components/CompanyModuleCard.vue
index ba92d69a..c6d870f9 100644
--- a/resources/scripts/features/company/modules/components/CompanyModuleCard.vue
+++ b/resources/scripts/features/company/modules/components/CompanyModuleCard.vue
@@ -7,7 +7,8 @@
   >
     <div class="flex items-start justify-between gap-3">
       <div class="flex items-center gap-3">
-        <div class="
+        <div
+class="
           shrink-0 h-10 w-10 rounded-lg bg-primary-50 text-primary-600
           flex items-center justify-center
         ">
diff --git a/resources/scripts/features/company/modules/views/CompanyModulesIndexView.vue b/resources/scripts/features/company/modules/views/CompanyModulesIndexView.vue
index c8b7895e..c05c7889 100644
--- a/resources/scripts/features/company/modules/views/CompanyModulesIndexView.vue
+++ b/resources/scripts/features/company/modules/views/CompanyModulesIndexView.vue
@@ -18,7 +18,8 @@
       v-else-if="store.modules.length === 0"
       class="mt-16 flex flex-col items-center justify-center text-center"
     >
-      <div class="
+      <div
+class="
         h-16 w-16 rounded-full bg-surface-tertiary
         flex items-center justify-center mb-4
       ">
diff --git a/resources/scripts/features/company/payments/components/SendPaymentModal.vue b/resources/scripts/features/company/payments/components/SendPaymentModal.vue
index 2cb1a7c9..2c85364a 100644
--- a/resources/scripts/features/company/payments/components/SendPaymentModal.vue
+++ b/resources/scripts/features/company/payments/components/SendPaymentModal.vue
@@ -49,8 +49,8 @@
               v-model="paymentMailForm.cc"
               type="email"
               :invalid="v$.cc && v$.cc.$error"
-              @input="v$.cc && v$.cc.$touch()"
               placeholder="Optional: CC recipient"
+              @input="v$.cc && v$.cc.$touch()"
             />
           </BaseInputGroup>
           <BaseInputGroup
@@ -61,8 +61,8 @@
               v-model="paymentMailForm.bcc"
               type="email"
               :invalid="v$.bcc && v$.bcc.$error"
-              @input="v$.bcc && v$.bcc.$touch()"
               placeholder="Optional: BCC recipient"
+              @input="v$.bcc && v$.bcc.$touch()"
             />
           </BaseInputGroup>
           <BaseInputGroup
diff --git a/resources/scripts/features/company/settings/components/EstimatesTabConvertEstimate.vue b/resources/scripts/features/company/settings/components/EstimatesTabConvertEstimate.vue
index a01f776e..75814d27 100644
--- a/resources/scripts/features/company/settings/components/EstimatesTabConvertEstimate.vue
+++ b/resources/scripts/features/company/settings/components/EstimatesTabConvertEstimate.vue
@@ -61,7 +61,7 @@ async function submitForm() {
       name="estimate_convert_action"
       :value="option.value"
       class="mt-2"
-      @update:modelValue="submitForm"
+      @update:model-value="submitForm"
     />
   </BaseInputGroup>
 </template>
diff --git a/resources/scripts/features/company/settings/components/ExchangeRateProviderModal.vue b/resources/scripts/features/company/settings/components/ExchangeRateProviderModal.vue
index d4153305..b93596b1 100644
--- a/resources/scripts/features/company/settings/components/ExchangeRateProviderModal.vue
+++ b/resources/scripts/features/company/settings/components/ExchangeRateProviderModal.vue
@@ -411,7 +411,7 @@ function closeExchangeRateModal(): void {
           :lists="[currenciesAlreadyInUsed.toString()]"
           :actions="['Remove']"
           @hide="dismiss"
-          @Remove="removeUsedSelectedCurrencies"
+          @remove="removeUsedSelectedCurrencies"
         />
       </div>
 
diff --git a/resources/scripts/features/company/settings/components/InvoicesTabRetrospective.vue b/resources/scripts/features/company/settings/components/InvoicesTabRetrospective.vue
index 7d7f7009..c5f7e32e 100644
--- a/resources/scripts/features/company/settings/components/InvoicesTabRetrospective.vue
+++ b/resources/scripts/features/company/settings/components/InvoicesTabRetrospective.vue
@@ -52,7 +52,7 @@ async function submitForm(): Promise<void> {
         name="retrospective_edits"
         :value="option.value"
         class="mt-2"
-        @update:modelValue="submitForm"
+        @update:model-value="submitForm"
       />
     </BaseInputGroup>
   </BaseSettingCard>
diff --git a/resources/scripts/features/shared/document-form/DocumentItemRowTax.vue b/resources/scripts/features/shared/document-form/DocumentItemRowTax.vue
index a181900b..9c5e3487 100644
--- a/resources/scripts/features/shared/document-form/DocumentItemRowTax.vue
+++ b/resources/scripts/features/shared/document-form/DocumentItemRowTax.vue
@@ -15,7 +15,7 @@
         searchable
         object
         label="name"
-        @update:modelValue="onSelectTax"
+        @update:model-value="onSelectTax"
       >
         <template #singlelabel="{ value }">
           <div class="absolute left-3.5">
diff --git a/resources/scripts/features/shared/document-form/DocumentTotals.vue b/resources/scripts/features/shared/document-form/DocumentTotals.vue
index 8bac81c9..f03346a1 100644
--- a/resources/scripts/features/shared/document-form/DocumentTotals.vue
+++ b/resources/scripts/features/shared/document-form/DocumentTotals.vue
@@ -161,7 +161,7 @@
       v-if="formData.tax_per_item === 'NO' || formData.tax_per_item === null"
     >
       <div
-        v-for="(tax, index) in taxes"
+        v-for="tax in taxes"
         :key="tax.id"
         class="flex items-center justify-between w-full mt-2 text-sm"
       >
diff --git a/resources/scripts/features/shared/document-form/NoteSelectPopup.vue b/resources/scripts/features/shared/document-form/NoteSelectPopup.vue
index c13b5dcc..8b9c3137 100644
--- a/resources/scripts/features/shared/document-form/NoteSelectPopup.vue
+++ b/resources/scripts/features/shared/document-form/NoteSelectPopup.vue
@@ -2,7 +2,7 @@
   <div>
     <NoteModal />
     <div class="w-full">
-    <Popover v-slot="{ open: isOpen }">
+    <Popover>
       <PopoverButton
         v-if="canViewNotes"
         class="flex items-center z-10 font-medium text-primary-400 focus:outline-hidden focus:border-none"
diff --git a/resources/scripts/features/shared/document-form/TaxSelectPopup.vue b/resources/scripts/features/shared/document-form/TaxSelectPopup.vue
index d332a194..f34bd4db 100644
--- a/resources/scripts/features/shared/document-form/TaxSelectPopup.vue
+++ b/resources/scripts/features/shared/document-form/TaxSelectPopup.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="w-full mt-4 tax-select">
-    <Popover v-slot="{ open: isOpen }" class="relative">
+    <Popover class="relative">
       <PopoverButton
         class="flex items-center text-sm font-medium text-primary-400 focus:outline-hidden focus:border-none"
       >
diff --git a/resources/scripts/layouts/partials/SiteSidebar.vue b/resources/scripts/layouts/partials/SiteSidebar.vue
index 1b7e5559..c2322e13 100644
--- a/resources/scripts/layouts/partials/SiteSidebar.vue
+++ b/resources/scripts/layouts/partials/SiteSidebar.vue
@@ -141,8 +141,8 @@
       <router-link
         v-for="item in menu"
         :key="item.name"
-        :to="item.link"
         v-tooltip="globalStore.isSidebarCollapsed ? { content: $t(item.title), placement: 'right' } : null"
+        :to="item.link"
         :class="[
           hasActiveUrl(item.link)
             ? 'text-primary-600 bg-primary-50 font-semibold'
diff --git a/resources/scripts/utils/markdown.ts b/resources/scripts/utils/markdown.ts
index 374102da..daeb016c 100644
--- a/resources/scripts/utils/markdown.ts
+++ b/resources/scripts/utils/markdown.ts
@@ -40,3 +40,19 @@ export function renderMarkdown(source: string): string {
 
   return DOMPurify.sanitize(rawHtml)
 }
+
+/**
+ * Sanitize a raw HTML string with DOMPurify's default browser profile
+ * (strips <script>, event handlers, javascript: URLs, and every other HTML
+ * vector). Use this for HTML that originates from the server, a third-party
+ * module registry, or the update server before binding it via v-html — the
+ * `BaseSanitizedHtml` component wraps this so feature code never touches
+ * v-html directly.
+ */
+export function sanitizeHtml(html: string | null | undefined): string {
+  if (!html) {
+    return ''
+  }
+
+  return DOMPurify.sanitize(html)
+}