From ecb0b4a4f472919533107670c3810bef016ee036 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Thu, 25 Jul 2024 23:40:54 +0530
Subject: [PATCH] fix: apply ESLint rule vue/custom-event-name-casing

---
 .eslintrc.js                                  |  1 +
 .../dashboard/components/ChatList.vue         | 22 ++++++-------
 .../dashboard/components/ChatListHeader.vue   | 22 ++++++-------
 .../dashboard/components/ConversationItem.vue | 18 +++++------
 .../components/CustomSnoozeModal.vue          |  4 +--
 .../dashboard/components/layout/Sidebar.vue   | 20 ++++++------
 .../sidebarComponents/AccountContext.vue      | 10 +++---
 .../sidebarComponents/AccountSelector.vue     | 14 ++++----
 .../sidebarComponents/AddAccountModal.vue     | 13 +++-----
 .../layout/sidebarComponents/AgentDetails.vue |  4 +--
 .../sidebarComponents/NotificationBell.vue    |  4 +--
 .../layout/sidebarComponents/OptionsMenu.vue  | 12 +++----
 .../layout/sidebarComponents/Primary.vue      | 16 +++++-----
 .../layout/sidebarComponents/Secondary.vue    | 12 +++----
 .../sidebarComponents/SecondaryNavItem.vue    |  2 +-
 .../components/ui/DatePicker/DatePicker.vue   | 14 ++++----
 .../DatePicker/components/CalendarAction.vue  |  4 +--
 .../components/CalendarDateRange.vue          |  4 +--
 .../DatePicker/components/CalendarMonth.vue   |  8 ++---
 .../ui/DatePicker/components/CalendarWeek.vue | 14 ++++----
 .../ui/DatePicker/components/CalendarYear.vue |  4 +--
 .../components/ui/Dropdown/DropdownList.vue   |  4 +--
 .../components/widgets/AIAssistanceButton.vue |  6 ++--
 .../components/widgets/AIAssistanceModal.vue  | 10 +++---
 .../components/widgets/AttachmentsPreview.vue |  4 +--
 .../components/widgets/ChannelItem.vue        |  2 +-
 .../components/widgets/TableFooter.vue        |  4 +--
 .../widgets/TableFooterPagination.vue         | 12 +++----
 .../widgets/WootWriter/AudioRecorder.vue      |  6 ++--
 .../components/widgets/WootWriter/Editor.vue  | 12 +++----
 .../widgets/WootWriter/ReplyBottomPanel.vue   |  8 ++---
 .../widgets/conversation/CannedResponse.vue   |  2 +-
 .../widgets/conversation/ConversationBox.vue  | 10 +++---
 .../widgets/conversation/ConversationCard.vue | 30 ++++++++---------
 .../conversation/ConversationHeader.vue       |  6 ++--
 .../widgets/conversation/MessagesView.vue     |  8 ++---
 .../widgets/conversation/ReplyBox.vue         | 32 +++++++++----------
 .../widgets/conversation/VariableList.vue     |  2 +-
 .../conversation/WhatsappTemplates/Modal.vue  |  2 +-
 .../conversation/contextMenu/Index.vue        | 14 ++++----
 .../conversationBulkActions/Index.vue         | 20 ++++++------
 .../conversationBulkActions/TeamActions.vue   |  6 ++--
 .../widgets/conversation/linear/Issue.vue     |  6 ++--
 .../conversation/linear/IssueHeader.vue       |  4 +--
 .../widgets/conversation/linear/LinkIssue.vue |  2 +-
 .../widgets/conversation/linear/index.vue     |  2 +-
 .../widgets/mentions/MentionBox.vue           |  6 ++--
 .../widgets/modal/ConfirmDeleteModal.vue      |  4 +--
 .../contact/components/ContactFields.vue      |  2 +-
 .../contact/components/ContactPanel.vue       |  2 +-
 .../modules/search/components/SearchTabs.vue  |  2 +-
 .../modules/search/components/SearchView.vue  |  4 +--
 .../dashboard/routes/dashboard/Dashboard.vue  | 16 +++++-----
 .../contacts/components/ContactInfoPanel.vue  |  4 +--
 .../contacts/components/ContactsTable.vue     |  2 +-
 .../contacts/components/ContactsView.vue      | 22 ++++++-------
 .../dashboard/contacts/components/Header.vue  | 18 +++++------
 .../conversation/ConversationView.vue         |  8 ++---
 .../conversation/contact/ContactInfo.vue      |  4 +--
 .../conversation/contact/ConversationForm.vue |  4 +--
 .../contact/WhatsappTemplates.vue             |  4 +--
 .../conversation/search/PopOverSearch.vue     |  2 +-
 .../helpcenter/components/ArticleEditor.vue   |  2 +-
 .../helpcenter/components/ArticleTable.vue    | 20 ++++++------
 .../components/Header/ArticleHeader.vue       | 16 +++++-----
 .../components/Header/EditArticleHeader.vue   |  6 ++--
 .../components/HelpCenterLayout.vue           | 20 ++++++------
 .../helpcenter/components/PortalListItem.vue  |  6 ++--
 .../components/PortalListItemTable.vue        |  2 +-
 .../helpcenter/components/PortalPopover.vue   | 10 +++---
 .../components/PortalSettingsBasicForm.vue    |  4 +--
 .../helpcenter/components/PortalSwitch.vue    |  4 +--
 .../helpcenter/components/Sidebar/Sidebar.vue | 10 +++---
 .../components/Sidebar/SidebarHeader.vue      | 10 +++---
 .../pages/articles/ArticleSettings.vue        | 12 +++----
 .../helpcenter/pages/articles/EditArticle.vue | 12 +++----
 .../pages/articles/ListAllArticles.vue        | 12 +++----
 .../helpcenter/pages/articles/NewArticle.vue  |  4 +--
 .../pages/categories/AddCategory.vue          |  4 +--
 .../pages/categories/EditCategory.vue         |  4 +--
 .../pages/categories/NameEmojiInput.vue       |  6 ++--
 .../pages/portals/EditPortalBasic.vue         |  2 +-
 .../pages/portals/EditPortalLocales.vue       |  2 +-
 .../pages/portals/ListAllPortals.vue          |  4 +--
 .../routes/dashboard/inbox/InboxList.vue      | 10 +++---
 .../routes/dashboard/inbox/InboxView.vue      |  2 +-
 .../dashboard/inbox/components/InboxCard.vue  | 10 +++---
 .../inbox/components/InboxItemHeader.vue      |  2 +-
 .../inbox/components/InboxListHeader.vue      |  2 +-
 .../inbox/components/InboxOptionMenu.vue      |  4 +--
 .../components/NotificationPanelItem.vue      |  2 +-
 .../components/NotificationPanelList.vue      |  4 +--
 .../components/NotificationsView.vue          |  4 +--
 .../settings/attributes/CustomAttribute.vue   |  6 ++--
 .../settings/attributes/EditAttribute.vue     |  2 +-
 .../dashboard/settings/auditlogs/Index.vue    |  2 +-
 .../settings/campaigns/AddCampaign.vue        |  2 +-
 .../dashboard/settings/campaigns/Campaign.vue |  2 +-
 .../settings/campaigns/EditCampaign.vue       |  2 +-
 .../dashboard/settings/campaigns/Index.vue    |  4 +--
 .../dashboard/settings/inbox/ChannelList.vue  |  4 +--
 .../routes/dashboard/settings/inbox/Index.vue |  4 +--
 .../inbox/PreChatForm/PreChatFields.vue       |  2 +-
 .../settings/inbox/PreChatForm/Settings.vue   |  2 +-
 .../settings/profile/AccessToken.vue          |  4 +--
 .../dashboard/settings/profile/Index.vue      |  6 ++--
 .../settings/profile/MessageSignature.vue     |  4 +--
 .../settings/profile/UserBasicDetails.vue     |  2 +-
 .../dashboard/settings/reports/BotReports.vue |  2 +-
 .../settings/reports/CsatResponses.vue        |  4 +--
 .../dashboard/settings/reports/Index.vue      |  2 +-
 .../settings/reports/LiveReports.vue          | 14 ++++----
 .../dashboard/settings/reports/SLAReports.vue |  4 +--
 .../settings/reports/components/CsatTable.vue |  2 +-
 .../reports/components/FilterSelector.vue     | 14 ++++----
 .../reports/components/Filters/Agents.vue     |  2 +-
 .../components/Filters/DateGroupBy.vue        |  4 +--
 .../reports/components/Filters/Inboxes.vue    |  2 +-
 .../reports/components/Filters/Labels.vue     |  6 ++--
 .../reports/components/Filters/Ratings.vue    |  2 +-
 .../reports/components/Filters/Teams.vue      |  2 +-
 .../reports/components/ReportFilters.vue      | 30 ++++++++---------
 .../reports/components/SLA/SLAFilter.vue      |  6 ++--
 .../components/SLA/SLAReportFilters.vue       |  6 ++--
 .../reports/components/SLA/SLATable.vue       |  8 ++---
 .../reports/components/WootReports.vue        |  8 ++---
 .../components/overview/AgentTable.vue        |  4 +--
 .../specs/Filters/FiltersAgents.spec.js       |  4 +--
 .../specs/Filters/FiltersDateGroupBy.spec.js  |  4 +--
 .../specs/Filters/FiltersInboxes.spec.js      |  6 ++--
 .../specs/Filters/FiltersLabels.spec.js       |  4 +--
 .../specs/Filters/FiltersRatings.spec.js      |  4 +--
 .../specs/Filters/FiltersTeams.spec.js        |  4 +--
 .../routes/dashboard/settings/sla/Index.vue   |  2 +-
 .../settings/sla/components/SLAEmptyState.vue |  4 +--
 .../routes/dashboard/settings/teams/Index.vue |  4 +--
 .../shared/components/ResizableTextArea.vue   |  4 +--
 app/javascript/v3/views/auth/signup/Index.vue | 14 ++++----
 .../signup/components/Testimonials/Index.vue  | 10 +++---
 .../widget/components/ArticleCategoryCard.vue |  6 ++--
 .../widget/components/ArticleHero.vue         |  2 +-
 .../widget/components/ChatInputWrap.vue       |  4 +--
 .../widget/components/TeamAvailability.vue    | 10 +++---
 app/javascript/widget/views/Home.vue          | 16 +++++-----
 144 files changed, 509 insertions(+), 515 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index ec7b48107..e1c6720cc 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -41,6 +41,7 @@ module.exports = {
       },
     ],
     'vue/component-options-name-casing': ['error', 'PascalCase'],
+    'vue/custom-event-name-casing': ['error', 'camelCase'],
     'vue/max-attributes-per-line': [
       'error',
       {
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 4c39e6b08..9f09f5a85 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -612,7 +612,7 @@ export default {
       }
     },
     emitConversationLoaded() {
-      this.$emit('conversation-load');
+      this.$emit('conversationLoad');
       this.$nextTick(() => {
         // Addressing a known issue in the virtual list library where dynamically added items
         // might not render correctly. This workaround involves a slight manual adjustment
@@ -879,11 +879,11 @@ export default {
       :has-applied-filters="hasAppliedFilters"
       :has-active-folders="hasActiveFolders"
       :active-status="activeStatus"
-      @add-folders="onClickOpenAddFoldersModal"
-      @delete-folders="onClickOpenDeleteFoldersModal"
-      @filters-modal="onToggleAdvanceFiltersModal"
-      @reset-filters="resetAndFetchData"
-      @basic-filter-change="onBasicFilterChange"
+      @addFolders="onClickOpenAddFoldersModal"
+      @deleteFolders="onClickOpenDeleteFoldersModal"
+      @filtersModal="onToggleAdvanceFiltersModal"
+      @resetFilters="resetAndFetchData"
+      @basicFilterChange="onBasicFilterChange"
     />
 
     <AddCustomViews
@@ -924,11 +924,11 @@ export default {
       :show-open-action="allSelectedConversationsStatus('open')"
       :show-resolved-action="allSelectedConversationsStatus('resolved')"
       :show-snoozed-action="allSelectedConversationsStatus('snoozed')"
-      @select-all-conversations="selectAllConversations"
-      @assign-agent="onAssignAgent"
-      @update-conversations="onUpdateConversations"
-      @assign-labels="onAssignLabels"
-      @assign-team="onAssignTeamsForBulk"
+      @selectAllConversations="selectAllConversations"
+      @assignAgent="onAssignAgent"
+      @updateConversations="onUpdateConversations"
+      @assignLabels="onAssignLabels"
+      @assignTeam="onAssignTeamsForBulk"
     />
     <div
       ref="conversationList"
diff --git a/app/javascript/dashboard/components/ChatListHeader.vue b/app/javascript/dashboard/components/ChatListHeader.vue
index b519f6b03..eeca5377c 100644
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/app/javascript/dashboard/components/ChatListHeader.vue
@@ -22,15 +22,15 @@ const props = defineProps({
 });
 
 const emits = defineEmits([
-  'add-folders',
-  'delete-folders',
-  'reset-filters',
-  'basic-filter-change',
-  'filters-modal',
+  'addFolders',
+  'deleteFolders',
+  'resetFilters',
+  'basicFilterChange',
+  'filtersModal',
 ]);
 
 const onBasicFilterChange = (value, type) => {
-  emits('basic-filter-change', value, type);
+  emits('basicFilterChange', value, type);
 };
 
 const hasAppliedFiltersOrActiveFolders = computed(() => {
@@ -68,7 +68,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="secondary"
           icon="save"
-          @click="emits('add-folders')"
+          @click="emits('addFolders')"
         />
         <woot-button
           v-tooltip.top-end="$t('FILTER.CLEAR_BUTTON_LABEL')"
@@ -76,7 +76,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="alert"
           icon="dismiss-circle"
-          @click="emits('reset-filters')"
+          @click="emits('resetFilters')"
         />
       </div>
       <div v-if="hasActiveFolders">
@@ -86,7 +86,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="secondary"
           icon="edit"
-          @click="emits('filters-modal')"
+          @click="emits('filtersModal')"
         />
         <woot-button
           v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')"
@@ -94,7 +94,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="alert"
           icon="delete"
-          @click="emits('delete-folders')"
+          @click="emits('deleteFolders')"
         />
       </div>
       <woot-button
@@ -104,7 +104,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
         color-scheme="secondary"
         icon="filter"
         size="tiny"
-        @click="emits('filters-modal')"
+        @click="emits('filtersModal')"
       />
       <ConversationBasicFilter
         v-if="!hasAppliedFiltersOrActiveFolders"
diff --git a/app/javascript/dashboard/components/ConversationItem.vue b/app/javascript/dashboard/components/ConversationItem.vue
index 0a4e2b590..53ddfc164 100644
--- a/app/javascript/dashboard/components/ConversationItem.vue
+++ b/app/javascript/dashboard/components/ConversationItem.vue
@@ -59,14 +59,14 @@ export default {
     :selected="isConversationSelected(source.id)"
     :show-assignee="showAssignee"
     :enable-context-menu="true"
-    @select-conversation="selectConversation"
-    @de-select-conversation="deSelectConversation"
-    @assign-agent="assignAgent"
-    @assign-team="assignTeam"
-    @assign-label="assignLabels"
-    @update-conversation-status="updateConversationStatus"
-    @context-menu-toggle="toggleContextMenu"
-    @mark-as-unread="markAsUnread"
-    @assign-priority="assignPriority"
+    @selectConversation="selectConversation"
+    @deSelectConversation="deSelectConversation"
+    @assignAgent="assignAgent"
+    @assignTeam="assignTeam"
+    @assignLabel="assignLabels"
+    @updateConversationStatus="updateConversationStatus"
+    @contextMenuToggle="toggleContextMenu"
+    @markAsUnread="markAsUnread"
+    @assignPriority="assignPriority"
   />
 </template>
diff --git a/app/javascript/dashboard/components/CustomSnoozeModal.vue b/app/javascript/dashboard/components/CustomSnoozeModal.vue
index 6538e574e..76330fe55 100644
--- a/app/javascript/dashboard/components/CustomSnoozeModal.vue
+++ b/app/javascript/dashboard/components/CustomSnoozeModal.vue
@@ -22,7 +22,7 @@ export default {
       this.$emit('close');
     },
     chooseTime() {
-      this.$emit('choose-time', this.snoozeTime);
+      this.$emit('chooseTime', this.snoozeTime);
     },
     disabledDate(date) {
       // Disable all the previous dates
@@ -53,7 +53,7 @@ export default {
         :disabled-time="disabledTime"
         :popup-style="{ width: '100%' }"
       />
-      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
         <woot-button variant="clear" @click.prevent="onClose">
           {{ $t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
         </woot-button>
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index c30dcbbc4..e87ecbea0 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -133,10 +133,10 @@ export default {
       }
     },
     toggleKeyShortcutModal() {
-      this.$emit('open-key-shortcut-modal');
+      this.$emit('openKeyShortcutModal');
     },
     closeKeyShortcutModal() {
-      this.$emit('close-key-shortcut-modal');
+      this.$emit('closeKeyShortcutModal');
     },
     getKeyboardEvents() {
       return {
@@ -168,13 +168,13 @@ export default {
       window.$chatwoot.toggle();
     },
     toggleAccountModal() {
-      this.$emit('toggle-account-modal');
+      this.$emit('toggleAccountModal');
     },
     showAddLabelPopup() {
-      this.$emit('show-add-label-popup');
+      this.$emit('showAddLabelPopup');
     },
     openNotificationPanel() {
-      this.$emit('open-notification-panel');
+      this.$emit('openNotificationPanel');
     },
   },
 };
@@ -189,9 +189,9 @@ export default {
       :account-id="accountId"
       :menu-items="primaryMenuItems"
       :active-menu-item="activePrimaryMenu.key"
-      @toggle-accounts="toggleAccountModal"
-      @key-shortcut-modal="toggleKeyShortcutModal"
-      @open-notification-panel="openNotificationPanel"
+      @toggleAccounts="toggleAccountModal"
+      @openKeyShortcutModal="toggleKeyShortcutModal"
+      @openNotificationPanel="openNotificationPanel"
     />
     <SecondarySidebar
       v-if="showSecondarySidebar"
@@ -204,8 +204,8 @@ export default {
       :menu-config="activeSecondaryMenu"
       :current-user="currentUser"
       :is-on-chatwoot-cloud="isOnChatwootCloud"
-      @add-label="showAddLabelPopup"
-      @toggle-accounts="toggleAccountModal"
+      @addLabel="showAddLabelPopup"
+      @toggleAccounts="toggleAccountModal"
     />
   </aside>
 </template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
index c29020472..a85eac5d6 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
@@ -27,27 +27,27 @@ export default {
 <template>
   <div
     v-if="showShowCurrentAccountContext"
-    class="text-slate-700 dark:text-slate-200 rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer"
+    class="relative px-2 py-2 mt-2 text-xs border rounded-md cursor-pointer text-slate-700 dark:text-slate-200 border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800"
     @mouseover="setShowSwitch"
     @mouseleave="resetShowSwitch"
   >
     {{ $t('SIDEBAR.CURRENTLY_VIEWING_ACCOUNT') }}
     <p
-      class="text-ellipsis overflow-hidden whitespace-nowrap font-medium mb-0 text-slate-800 dark:text-slate-100"
+      class="mb-0 overflow-hidden font-medium text-ellipsis whitespace-nowrap text-slate-800 dark:text-slate-100"
     >
       {{ account.name }}
     </p>
     <transition name="fade">
       <div
         v-if="showSwitchButton"
-        class="ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark flex items-center h-full rounded-md justify-end absolute top-0 right-0 w-full"
+        class="absolute top-0 right-0 flex items-center justify-end w-full h-full rounded-md ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark"
       >
-        <div class="my-0 mx-2">
+        <div class="mx-2 my-0">
           <woot-button
             variant="clear"
             size="tiny"
             icon="arrow-swap"
-            @click="$emit('toggle-accounts')"
+            @click="$emit('toggleAccounts')"
           >
             {{ $t('SIDEBAR.SWITCH') }}
           </woot-button>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
index 37a115c59..73f727a0e 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
@@ -27,7 +27,7 @@ export default {
 <template>
   <woot-modal
     :show="showAccountModal"
-    :on-close="() => $emit('close-account-modal')"
+    :on-close="() => $emit('closeAccountModal')"
   >
     <woot-modal-header
       :header-title="$t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS')"
@@ -41,18 +41,18 @@ export default {
         class="pt-0 pb-0"
       >
         <button
-          class="flex justify-between items-center expanded clear link cursor-pointer px-4 py-3 w-full rounded-lg hover:underline hover:bg-slate-25 dark:hover:bg-slate-900"
+          class="flex items-center justify-between w-full px-4 py-3 rounded-lg cursor-pointer expanded clear link hover:underline hover:bg-slate-25 dark:hover:bg-slate-900"
           @click="onChangeAccount(account.id)"
         >
           <span class="w-full">
             <label :for="account.name" class="text-left rtl:text-right">
               <div
-                class="text-slate-700 text-lg dark:text-slate-100 font-medium hover:underline-offset-4 leading-5"
+                class="text-lg font-medium leading-5 text-slate-700 dark:text-slate-100 hover:underline-offset-4"
               >
                 {{ account.name }}
               </div>
               <div
-                class="text-slate-500 text-xs dark:text-slate-500 font-medium hover:underline-offset-4"
+                class="text-xs font-medium text-slate-500 dark:text-slate-500 hover:underline-offset-4"
               >
                 {{ account.role }}
               </div>
@@ -71,11 +71,11 @@ export default {
 
     <div
       v-if="globalConfig.createNewAccountFromDashboard"
-      class="flex justify-end items-center px-8 pb-8 pt-4 gap-2"
+      class="flex items-center justify-end gap-2 px-8 pt-4 pb-8"
     >
       <button
-        class="button success large expanded nice w-full"
-        @click="$emit('show-create-account-modal')"
+        class="w-full button success large expanded nice"
+        @click="$emit('showCreateAccountModal')"
       >
         {{ $t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
       </button>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
index e38d8f827..c36a108ab 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
@@ -40,7 +40,7 @@ export default {
         const account_id = await this.$store.dispatch('accounts/create', {
           account_name: this.accountName,
         });
-        this.$emit('close-account-create-modal');
+        this.$emit('closeAccountCreateModal');
         useAlert(this.$t('CREATE_ACCOUNT.API.SUCCESS_MESSAGE'));
         window.location = `/app/accounts/${account_id}/dashboard`;
       } catch (error) {
@@ -56,17 +56,14 @@ export default {
 </script>
 
 <template>
-  <woot-modal
-    :show="show"
-    :on-close="() => $emit('close-account-create-modal')"
-  >
-    <div class="h-auto overflow-auto flex flex-col">
+  <woot-modal :show="show" :on-close="() => $emit('closeAccountCreateModal')">
+    <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header
         :header-title="$t('CREATE_ACCOUNT.NEW_ACCOUNT')"
         :header-content="$t('CREATE_ACCOUNT.SELECTOR_SUBTITLE')"
       />
-      <div v-if="!hasAccounts" class="text-sm mt-6 mx-8 mb-0">
-        <div class="items-center rounded-md flex alert">
+      <div v-if="!hasAccounts" class="mx-8 mt-6 mb-0 text-sm">
+        <div class="flex items-center rounded-md alert">
           <div class="ml-1 mr-3">
             <fluent-icon icon="warning" />
           </div>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue
index be3e0c6bb..e0bbd0014 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue
@@ -17,7 +17,7 @@ export default {
   },
   methods: {
     handleClick() {
-      this.$emit('toggle-menu');
+      this.$emit('toggleMenu');
     },
   },
 };
@@ -26,7 +26,7 @@ export default {
   <woot-button
     v-tooltip.right="$t(`SIDEBAR.PROFILE_SETTINGS`)"
     variant="link"
-    class="items-center flex rounded-full"
+    class="flex items-center rounded-full"
     @click="handleClick"
   >
     <Thumbnail
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
index fa5318857..f2cbbf779 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
@@ -23,7 +23,7 @@ export default {
   methods: {
     openNotificationPanel() {
       if (this.$route.name !== 'notifications_index') {
-        this.$emit('open-notification-panel');
+        this.$emit('openNotificationPanel');
       }
     },
   },
@@ -32,7 +32,7 @@ export default {
 <template>
   <div class="mb-4">
     <button
-      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 p-0 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      class="relative flex items-center justify-center w-10 h-10 p-0 my-2 rounded-lg text-slate-600 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
       :class="{
         'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
           isNotificationPanelActive,
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
index cb5cdb143..707639b57 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
@@ -38,7 +38,7 @@ export default {
       navigate(e);
     },
     handleKeyboardHelpClick() {
-      this.$emit('key-shortcut-modal');
+      this.$emit('openKeyShortcutModal');
       this.$emit('close');
     },
     logout() {
@@ -60,7 +60,7 @@ export default {
     <div
       v-if="show"
       v-on-clickaway="onClickAway"
-      class="left-3 rtl:left-auto rtl:right-3 bottom-16 w-64 absolute z-30 rounded-md shadow-xl bg-white dark:bg-slate-800 py-2 px-2 border border-slate-25 dark:border-slate-700"
+      class="absolute z-30 w-64 px-2 py-2 bg-white border rounded-md shadow-xl left-3 rtl:left-auto rtl:right-3 bottom-16 dark:bg-slate-800 border-slate-25 dark:border-slate-700"
       :class="{ 'block visible': show }"
     >
       <AvailabilityStatus />
@@ -71,7 +71,7 @@ export default {
             color-scheme="secondary"
             size="small"
             icon="arrow-swap"
-            @click="$emit('toggle-accounts')"
+            @click="$emit('toggleAccounts')"
           >
             {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
           </woot-button>
@@ -82,7 +82,7 @@ export default {
             color-scheme="secondary"
             size="small"
             icon="chat-help"
-            @click="$emit('show-support-chat-window')"
+            @click="$emit('showSupportChatWindow')"
           >
             {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
           </woot-button>
@@ -106,7 +106,7 @@ export default {
           >
             <a
               :href="href"
-              class="button small clear secondary bg-white dark:bg-slate-800 h-8"
+              class="h-8 bg-white button small clear secondary dark:bg-slate-800"
               :class="{ 'is-active': isActive }"
               @click="e => handleProfileSettingClick(e, navigate)"
             >
@@ -131,7 +131,7 @@ export default {
         <WootDropdownItem v-if="currentUser.type === 'SuperAdmin'">
           <a
             href="/super_admin"
-            class="button small clear secondary bg-white dark:bg-slate-800 h-8"
+            class="h-8 bg-white button small clear secondary dark:bg-slate-800"
             target="_blank"
             rel="noopener nofollow noreferrer"
             @click="$emit('close')"
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
index 79cd2b8ef..b73dc40c2 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
@@ -54,21 +54,21 @@ export default {
       this.showOptionsMenu = !this.showOptionsMenu;
     },
     toggleAccountModal() {
-      this.$emit('toggle-accounts');
+      this.$emit('toggleAccounts');
     },
     toggleSupportChatWindow() {
       window.$chatwoot.toggle();
     },
     openNotificationPanel() {
       this.$track(ACCOUNT_EVENTS.OPENED_NOTIFICATIONS);
-      this.$emit('open-notification-panel');
+      this.$emit('openNotificationPanel');
     },
   },
 };
 </script>
 <template>
   <div
-    class="h-full w-16 bg-white dark:bg-slate-900 border-r border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0 flex justify-between flex-col"
+    class="flex flex-col justify-between w-16 h-full bg-white border-r dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0"
   >
     <div class="flex flex-col items-center">
       <Logo
@@ -94,13 +94,13 @@ export default {
         :open-in-new-page="true"
         :to="helpDocsURL"
       />
-      <NotificationBell @open-notification-panel="openNotificationPanel" />
-      <AgentDetails @toggle-menu="toggleOptions" />
+      <NotificationBell @openNotificationPanel="openNotificationPanel" />
+      <AgentDetails @toggleMenu="toggleOptions" />
       <OptionsMenu
         :show="showOptionsMenu"
-        @toggle-accounts="toggleAccountModal"
-        @show-support-chat-window="toggleSupportChatWindow"
-        @key-shortcut-modal="$emit('key-shortcut-modal')"
+        @toggleAccounts="toggleAccountModal"
+        @showSupportChatWindow="toggleSupportChatWindow"
+        @openKeyShortcutModal="$emit('openKeyShortcutModal')"
         @close="toggleOptions"
       />
     </div>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
index 469f875f0..6faaa0199 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@@ -223,10 +223,10 @@ export default {
   },
   methods: {
     showAddLabelPopup() {
-      this.$emit('add-label');
+      this.$emit('addLabel');
     },
     toggleAccountModal() {
-      this.$emit('toggle-accounts');
+      this.$emit('toggleAccounts');
     },
     showNewLink(featureFlag) {
       return this.isFeatureEnabledonAccount(this.accountId, featureFlag);
@@ -237,13 +237,13 @@ export default {
 <template>
   <div
     v-if="hasSecondaryMenu"
-    class="h-full overflow-auto w-48 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50 text-sm px-2 pb-8"
+    class="flex flex-col w-48 h-full px-2 pb-8 overflow-auto text-sm bg-white border-r dark:bg-slate-900 dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50"
   >
-    <AccountContext @toggle-accounts="toggleAccountModal" />
+    <AccountContext @toggleAccounts="toggleAccountModal" />
     <transition-group
       name="menu-list"
       tag="ul"
-      class="pt-2 list-none ml-0 mb-0"
+      class="pt-2 mb-0 ml-0 list-none"
     >
       <SecondaryNavItem
         v-for="menuItem in accessibleMenuItems"
@@ -254,7 +254,7 @@ export default {
         v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
         :key="menuItem.key"
         :menu-item="menuItem"
-        @add-label="showAddLabelPopup"
+        @addLabel="showAddLabelPopup"
       />
     </transition-group>
   </div>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
index b3cd48327..2132ffc9e 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@@ -169,7 +169,7 @@ export default {
       } else if (this.menuItem.showModalForNewItem) {
         if (this.menuItem.modalName === 'AddLabel') {
           e.preventDefault();
-          this.$emit('add-label');
+          this.$emit('addLabel');
         }
       }
     },
diff --git a/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue b/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
index 9b84d6548..4a3ea1387 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
@@ -223,7 +223,7 @@ const emitDateRange = () => {
     >
       <CalendarDateRange
         :selected-range="selectedRange"
-        @set-range="setDateRange"
+        @setRange="setDateRange"
       />
       <div
         class="flex flex-col w-[680px] ltr:border-l rtl:border-r border-slate-50 dark:border-slate-700/50"
@@ -265,15 +265,15 @@ const emitDateRange = () => {
                   :calendar-type="calendar"
                   :start-current-date="startCurrentDate"
                   :end-current-date="endCurrentDate"
-                  @select-year="openCalendar($event, calendar, YEAR)"
+                  @selectYear="openCalendar($event, calendar, YEAR)"
                 />
                 <CalendarMonth
                   v-else-if="calendarViews[calendar] === MONTH"
                   :calendar-type="calendar"
                   :start-current-date="startCurrentDate"
                   :end-current-date="endCurrentDate"
-                  @select-month="openCalendar($event, calendar)"
-                  @set-view="setViewMode"
+                  @selectMonth="openCalendar($event, calendar)"
+                  @setView="setViewMode"
                   @prev="moveCalendar(calendar, 'prev', YEAR)"
                   @next="moveCalendar(calendar, 'next', YEAR)"
                 />
@@ -287,9 +287,9 @@ const emitDateRange = () => {
                   :selected-end-date="selectedEndDate"
                   :selecting-end-date="selectingEndDate"
                   :hovered-end-date="hoveredEndDate"
-                  @update-hovered-end-date="hoveredEndDate = $event"
-                  @select-date="selectDate"
-                  @set-view="setViewMode"
+                  @updateHoveredEndDate="hoveredEndDate = $event"
+                  @selectDate="selectDate"
+                  @setView="setViewMode"
                   @prev="moveCalendar(calendar, 'prev')"
                   @next="moveCalendar(calendar, 'next')"
                 />
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue
index 447a83bf3..3efce5541 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue
@@ -19,7 +19,7 @@ defineProps({
     default: '',
   },
 });
-const emit = defineEmits(['prev', 'next', 'set-view']);
+const emit = defineEmits(['prev', 'next', 'setView']);
 
 const { YEAR } = CALENDAR_PERIODS;
 
@@ -32,7 +32,7 @@ const onClickNext = type => {
 };
 
 const onClickSetView = (type, mode) => {
-  emit('set-view', type, mode);
+  emit('setView', type, mode);
 };
 </script>
 
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue
index 38d4dd76f..b23f95d79 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue
@@ -8,10 +8,10 @@ defineProps({
   },
 });
 
-const emit = defineEmits(['set-range']);
+const emit = defineEmits(['setRange']);
 
 const setDateRange = range => {
-  emit('set-range', range);
+  emit('setRange', range);
 };
 </script>
 
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue
index ee68e7341..d4f56a15e 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue
@@ -33,10 +33,10 @@ const activeMonthIndex = computed(() => {
   return getMonth(date);
 });
 
-const emit = defineEmits(['select-month', 'prev', 'next', 'set-view']);
+const emit = defineEmits(['selectMonth', 'prev', 'next', 'setView']);
 
 const setViewMode = (type, mode) => {
-  emit('set-view', type, mode);
+  emit('setView', type, mode);
 };
 
 const onClickPrev = () => {
@@ -48,7 +48,7 @@ const onClickNext = () => {
 };
 
 const selectMonth = index => {
-  emit('select-month', index);
+  emit('selectMonth', index);
 };
 </script>
 
@@ -63,7 +63,7 @@ const selectMonth = index => {
           MONTH
         )
       "
-      @set-view="setViewMode"
+      @setView="setViewMode"
       @prev="onClickPrev"
       @next="onClickNext"
     />
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue
index c448e3eb1..d4962d21a 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue
@@ -31,22 +31,22 @@ const props = defineProps({
 });
 
 const emit = defineEmits([
-  'update-hovered-end-date',
-  'select-date',
+  'updateHoveredEndDate',
+  'selectDate',
   'prev',
   'next',
-  'set-view',
+  'setView',
 ]);
 
 const { START_CALENDAR } = CALENDAR_TYPES;
 const { MONTH } = CALENDAR_PERIODS;
 
 const emitHoveredEndDate = day => {
-  emit('update-hovered-end-date', day);
+  emit('updateHoveredEndDate', day);
 };
 
 const emitSelectDate = day => {
-  emit('select-date', day);
+  emit('selectDate', day);
 };
 const onClickPrev = () => {
   emit('prev');
@@ -57,7 +57,7 @@ const onClickNext = () => {
 };
 
 const setViewMode = (type, mode) => {
-  emit('set-view', type, mode);
+  emit('setView', type, mode);
 };
 
 const weeks = calendarType => {
@@ -139,7 +139,7 @@ const dayClasses = day => ({
       "
       @prev="onClickPrev"
       @next="onClickNext"
-      @set-view="setViewMode"
+      @setView="setViewMode"
     />
     <CalendarWeekLabel />
     <div
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue
index 1f5e7224f..971861636 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue
@@ -52,10 +52,10 @@ const onClickNext = () => {
   startYear.value = addYears(new Date(startYear.value, 0, 1), 10).getFullYear();
 };
 
-const emit = defineEmits(['select-year']);
+const emit = defineEmits(['selectYear']);
 
 const selectYear = year => {
-  emit('select-year', year);
+  emit('selectYear', year);
 };
 </script>
 
diff --git a/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue b/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
index 7d92f721c..24052ac66 100644
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
@@ -38,13 +38,13 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['on-search']);
+const emits = defineEmits(['onSearch']);
 
 const searchTerm = ref('');
 
 const onSearch = debounce(value => {
   searchTerm.value = value;
-  emits('on-search', value);
+  emits('onSearch', value);
 }, 300);
 
 const filteredListItems = computed(() => {
diff --git a/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue b/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
index 996ff2910..5939ac424 100644
--- a/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
@@ -66,7 +66,7 @@ export default {
         '$mod+KeyZ': {
           action: () => {
             if (this.initialMessage) {
-              this.$emit('replace-text', this.initialMessage);
+              this.$emit('replaceText', this.initialMessage);
               this.initialMessage = '';
             }
           },
@@ -101,7 +101,7 @@ export default {
       this.showAIAssistanceModal = true;
     },
     insertText(message) {
-      this.$emit('replace-text', message);
+      this.$emit('replaceText', message);
     },
   },
 };
@@ -128,7 +128,7 @@ export default {
       >
         <AIAssistanceModal
           :ai-option="aiOption"
-          @apply-text="insertText"
+          @applyText="insertText"
           @close="hideAIAssistanceModal"
         />
       </woot-modal>
diff --git a/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue b/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
index 52feb2762..f38337ff8 100644
--- a/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
@@ -53,7 +53,7 @@ export default {
     },
     applyText() {
       this.recordAnalytics(this.aiOption);
-      this.$emit('apply-text', this.generatedContent);
+      this.$emit('applyText', this.generatedContent);
       this.onClose();
     },
   },
@@ -64,15 +64,15 @@ export default {
   <div class="flex flex-col">
     <woot-modal-header :header-title="headerTitle" />
     <form
-      class="modal-content flex flex-col w-full"
+      class="flex flex-col w-full modal-content"
       @submit.prevent="applyText"
     >
       <div v-if="draftMessage" class="w-full">
-        <h4 class="text-base mt-1 text-slate-700 dark:text-slate-100">
+        <h4 class="mt-1 text-base text-slate-700 dark:text-slate-100">
           {{ $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.DRAFT_TITLE') }}
         </h4>
         <p v-dompurify-html="formatMessage(draftMessage, false)" />
-        <h4 class="text-base mt-1 text-slate-700 dark:text-slate-100">
+        <h4 class="mt-1 text-base text-slate-700 dark:text-slate-100">
           {{
             $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.GENERATED_TITLE')
           }}
@@ -83,7 +83,7 @@ export default {
         <p v-else v-dompurify-html="formatMessage(generatedContent, false)" />
       </div>
 
-      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
         <woot-button variant="clear" @click.prevent="onClose">
           {{
             $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.BUTTONS.CANCEL')
diff --git a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
index 2934c4637..91ea4fbdb 100644
--- a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
+++ b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
@@ -9,7 +9,7 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['remove-attachment']);
+const emits = defineEmits(['removeAttachment']);
 
 const nonRecordedAudioAttachments = computed(() => {
   return props.attachments.filter(attachment => !attachment?.isRecordedAudio);
@@ -21,7 +21,7 @@ const recordedAudioAttachments = computed(() =>
 
 const onRemoveAttachment = itemIndex => {
   emits(
-    'remove-attachment',
+    'removeAttachment',
     nonRecordedAudioAttachments.value
       .filter((_, index) => index !== itemIndex)
       .concat(recordedAudioAttachments.value)
diff --git a/app/javascript/dashboard/components/widgets/ChannelItem.vue b/app/javascript/dashboard/components/widgets/ChannelItem.vue
index db586a593..6f315e1f7 100644
--- a/app/javascript/dashboard/components/widgets/ChannelItem.vue
+++ b/app/javascript/dashboard/components/widgets/ChannelItem.vue
@@ -51,7 +51,7 @@ export default {
     },
     onItemClick() {
       if (this.isActive) {
-        this.$emit('channel-item-click', this.channel.key);
+        this.$emit('channelItemClick', this.channel.key);
       }
     },
   },
diff --git a/app/javascript/dashboard/components/widgets/TableFooter.vue b/app/javascript/dashboard/components/widgets/TableFooter.vue
index de3f2a2bb..7809cfdb2 100644
--- a/app/javascript/dashboard/components/widgets/TableFooter.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooter.vue
@@ -29,7 +29,7 @@ const isFooterVisible = computed(
 <template>
   <footer
     v-if="isFooterVisible"
-    class="h-12 flex items-center justify-between px-6"
+    class="flex items-center justify-between h-12 px-6"
   >
     <TableFooterResults
       :first-index="firstIndex"
@@ -42,7 +42,7 @@ const isFooterVisible = computed(
       :total-pages="totalPages"
       :total-count="totalCount"
       :page-size="pageSize"
-      @page-change="$emit('page-change', $event)"
+      @pageChange="$emit('pageChange', $event)"
     />
   </footer>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/TableFooterPagination.vue b/app/javascript/dashboard/components/widgets/TableFooterPagination.vue
index 5ba969107..c68ea126c 100644
--- a/app/javascript/dashboard/components/widgets/TableFooterPagination.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooterPagination.vue
@@ -24,7 +24,7 @@ const hasFirstPage = computed(() => props.currentPage === 1);
 const hasNextPage = computed(() => props.currentPage === props.totalPages);
 const hasPrevPage = computed(() => props.currentPage === 1);
 
-const emit = defineEmits(['page-change']);
+const emit = defineEmits(['pageChange']);
 
 function buttonClass(hasPage) {
   if (hasPage) {
@@ -34,7 +34,7 @@ function buttonClass(hasPage) {
 }
 
 function onPageChange(newPage) {
-  emit('page-change', newPage);
+  emit('pageChange', newPage);
 }
 
 const onNextPage = () => {
@@ -60,7 +60,7 @@ const onLastPage = () => {
 </script>
 
 <template>
-  <div class="flex items-center bg-slate-50 dark:bg-slate-800 h-8 rounded-lg">
+  <div class="flex items-center h-8 rounded-lg bg-slate-50 dark:bg-slate-800">
     <woot-button
       size="small"
       variant="smooth"
@@ -77,7 +77,7 @@ const onLastPage = () => {
         :class="hasFirstPage && 'opacity-40'"
       />
     </woot-button>
-    <div class="bg-slate-75 dark:bg-slate-700/50 w-px rounded-sm h-4" />
+    <div class="w-px h-4 rounded-sm bg-slate-75 dark:bg-slate-700/50" />
     <woot-button
       size="small"
       variant="smooth"
@@ -96,7 +96,7 @@ const onLastPage = () => {
     </woot-button>
 
     <div
-      class="flex px-3 items-center gap-3 tabular-nums bg-slate-50 dark:bg-slate-800 text-slate-700 dark:text-slate-100"
+      class="flex items-center gap-3 px-3 tabular-nums bg-slate-50 dark:bg-slate-800 text-slate-700 dark:text-slate-100"
     >
       <span class="text-sm text-slate-800 dark:text-slate-75">
         {{ currentPage }}
@@ -122,7 +122,7 @@ const onLastPage = () => {
         :class="hasNextPage && 'opacity-40'"
       />
     </woot-button>
-    <div class="bg-slate-75 dark:bg-slate-700/50 w-px rounded-sm h-4" />
+    <div class="w-px h-4 rounded-sm bg-slate-75 dark:bg-slate-700/50" />
     <woot-button
       size="small"
       variant="smooth"
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue b/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
index 6779ab4fd..09391edc7 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
@@ -217,7 +217,7 @@ export default {
       this.player.wavesurfer().pause();
     },
     fireRecorderBlob(blob) {
-      this.$emit('finish-record', {
+      this.$emit('finishRecord', {
         name: blob.name,
         type: blob.type,
         size: blob.size,
@@ -225,10 +225,10 @@ export default {
       });
     },
     fireStateRecorderChanged(state) {
-      this.$emit('state-recorder-changed', state);
+      this.$emit('stateRecorderChanged', state);
     },
     fireProgressRecord(duration) {
-      this.$emit('state-recorder-progress-changed', duration);
+      this.$emit('stateRecorderProgressChanged', duration);
     },
   },
 };
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index 54f3112ad..8fe929354 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -109,10 +109,10 @@ export default {
     return {
       typingIndicator: createTypingIndicator(
         () => {
-          this.$emit('typing-on');
+          this.$emit('typingOn');
         },
         () => {
-          this.$emit('typing-off');
+          this.$emit('typingOff');
         },
         TYPING_INDICATOR_IDLE_TIME
       ),
@@ -252,13 +252,13 @@ export default {
   },
   watch: {
     showUserMentions(updatedValue) {
-      this.$emit('toggle-user-mention', this.isPrivate && updatedValue);
+      this.$emit('toggleUserMention', this.isPrivate && updatedValue);
     },
     showCannedMenu(updatedValue) {
-      this.$emit('toggle-canned-menu', !this.isPrivate && updatedValue);
+      this.$emit('toggleCannedMenu', !this.isPrivate && updatedValue);
     },
     showVariables(updatedValue) {
-      this.$emit('toggle-variables-menu', !this.isPrivate && updatedValue);
+      this.$emit('toggleVariablesMenu', !this.isPrivate && updatedValue);
     },
     value(newVal = '') {
       if (newVal !== this.contentFromEditor) {
@@ -287,7 +287,7 @@ export default {
           this.state = this.editorView.state.apply(tr);
           this.editorView.updateState(this.state);
           this.emitOnChange();
-          this.$emit('clear-selection');
+          this.$emit('clearSelection');
         }
       }
       return null;
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index 77f11ecf1..9b9086b5a 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -227,10 +227,10 @@ export default {
       this.setSignatureFlagForInbox(this.channelType, !this.sendWithSignature);
     },
     replaceText(text) {
-      this.$emit('replace-text', text);
+      this.$emit('replaceText', text);
     },
     toggleInsertArticle() {
-      this.$emit('toggle-insert-article');
+      this.$emit('toggleInsertArticle');
     },
   },
 };
@@ -293,7 +293,7 @@ export default {
         color-scheme="secondary"
         variant="smooth"
         size="small"
-        @click="$emit('toggle-editor')"
+        @click="$emit('toggleEditor')"
       />
       <woot-button
         v-if="showAudioPlayStopButton"
@@ -334,7 +334,7 @@ export default {
         :conversation-id="conversationId"
         :is-private-note="isOnPrivateNote"
         :message="message"
-        @replace-text="replaceText"
+        @replaceText="replaceText"
       />
       <transition name="modal-fade">
         <div
diff --git a/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue b/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
index 904145da5..1600a9cff 100644
--- a/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
@@ -45,7 +45,7 @@ export default {
   <MentionBox
     v-if="items.length"
     :items="items"
-    @mention-select="handleMentionClick"
+    @mentionSelect="handleMentionClick"
   >
     <template slot-scope="{ item }">
       <strong>{{ item.label }}</strong> - {{ item.description }}
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index bd25ef551..cc4a23ae2 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -81,7 +81,7 @@ export default {
       this.$store.dispatch('conversationLabels/get', this.currentChat.id);
     },
     onToggleContactPanel() {
-      this.$emit('contact-panel-toggle');
+      this.$emit('contactPanelToggle');
     },
     onDashboardAppTabChange(index) {
       this.activeIndex = index;
@@ -100,12 +100,12 @@ export default {
       :is-inbox-view="isInboxView"
       :is-contact-panel-open="isContactPanelOpen"
       :show-back-button="isOnExpandedLayout && !isInboxView"
-      @contact-panel-toggle="onToggleContactPanel"
+      @contactPanelToggle="onToggleContactPanel"
     />
     <woot-tabs
       v-if="dashboardApps.length && currentChat.id"
       :index="activeIndex"
-      class="dashboard-app--tabs bg-white dark:bg-slate-900 -mt-px"
+      class="-mt-px bg-white dashboard-app--tabs dark:bg-slate-900"
       @change="onDashboardAppTabChange"
     >
       <woot-tabs-item
@@ -117,14 +117,14 @@ export default {
     </woot-tabs>
     <div
       v-show="!activeIndex"
-      class="flex bg-slate-25 dark:bg-slate-800 m-0 h-full min-h-0"
+      class="flex h-full min-h-0 m-0 bg-slate-25 dark:bg-slate-800"
     >
       <MessagesView
         v-if="currentChat.id"
         :inbox-id="inboxId"
         :is-inbox-view="isInboxView"
         :is-contact-panel-open="isContactPanelOpen"
-        @contact-panel-toggle="onToggleContactPanel"
+        @contactPanelToggle="onToggleContactPanel"
       />
       <EmptyState
         v-if="!currentChat.id && !isInboxView"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index 254c4d9d1..918ac87b8 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -179,19 +179,19 @@ export default {
       this.hovered = false;
     },
     onSelectConversation(checked) {
-      const action = checked ? 'select-conversation' : 'de-select-conversation';
+      const action = checked ? 'selectConversation' : 'deSelectConversation';
       this.$emit(action, this.chat.id, this.inbox.id);
     },
     openContextMenu(e) {
       if (!this.enableContextMenu) return;
       e.preventDefault();
-      this.$emit('context-menu-toggle', true);
+      this.$emit('contextMenuToggle', true);
       this.contextMenu.x = e.pageX || e.clientX;
       this.contextMenu.y = e.pageY || e.clientY;
       this.showContextMenu = true;
     },
     closeContextMenu() {
-      this.$emit('context-menu-toggle', false);
+      this.$emit('contextMenuToggle', false);
       this.showContextMenu = false;
       this.contextMenu.x = null;
       this.contextMenu.y = null;
@@ -199,30 +199,30 @@ export default {
     onUpdateConversation(status, snoozedUntil) {
       this.closeContextMenu();
       this.$emit(
-        'update-conversation-status',
+        'updateConversationStatus',
         this.chat.id,
         status,
         snoozedUntil
       );
     },
     async onAssignAgent(agent) {
-      this.$emit('assign-agent', agent, [this.chat.id]);
+      this.$emit('assignAgent', agent, [this.chat.id]);
       this.closeContextMenu();
     },
     async onAssignLabel(label) {
-      this.$emit('assign-label', [label.title], [this.chat.id]);
+      this.$emit('assignLabel', [label.title], [this.chat.id]);
       this.closeContextMenu();
     },
     async onAssignTeam(team) {
-      this.$emit('assign-team', team, this.chat.id);
+      this.$emit('assignTeam', team, this.chat.id);
       this.closeContextMenu();
     },
     async markAsUnread() {
-      this.$emit('mark-as-unread', this.chat.id);
+      this.$emit('markAsUnread', this.chat.id);
       this.closeContextMenu();
     },
     async assignPriority(priority) {
-      this.$emit('assign-priority', priority, this.chat.id);
+      this.$emit('assignPriority', priority, this.chat.id);
       this.closeContextMenu();
     },
   },
@@ -335,12 +335,12 @@ export default {
         :priority="chat.priority"
         :chat-id="chat.id"
         :has-unread-messages="hasUnread"
-        @update-conversation="onUpdateConversation"
-        @assign-agent="onAssignAgent"
-        @assign-label="onAssignLabel"
-        @assign-team="onAssignTeam"
-        @mark-as-unread="markAsUnread"
-        @assign-priority="assignPriority"
+        @updateConversation="onUpdateConversation"
+        @assignAgent="onAssignAgent"
+        @assignLabel="onAssignLabel"
+        @assignTeam="onAssignTeam"
+        @markAsUnread="markAsUnread"
+        @assignPriority="assignPriority"
       />
     </woot-context-menu>
   </div>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 99278d7ce..ec90095ad 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -123,7 +123,7 @@ export default {
     getKeyboardEvents() {
       return {
         'Alt+KeyO': {
-          action: () => this.$emit('contact-panel-toggle'),
+          action: () => this.$emit('contactPanelToggle'),
         },
       };
     },
@@ -160,7 +160,7 @@ export default {
               variant="link"
               color-scheme="secondary"
               class="[&>span]:overflow-hidden [&>span]:whitespace-nowrap [&>span]:text-ellipsis min-w-0"
-              @click.prevent="$emit('contact-panel-toggle')"
+              @click.prevent="$emit('contactPanelToggle')"
             >
               <span
                 class="text-base font-medium leading-tight text-slate-900 dark:text-slate-100"
@@ -191,7 +191,7 @@ export default {
               class="p-0"
               size="small"
               variant="link"
-              @click="$emit('contact-panel-toggle')"
+              @click="$emit('contactPanelToggle')"
             >
               {{ contactPanelToggleText }}
             </woot-button>
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index 43aba1585..9df772f07 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -366,7 +366,7 @@ export default {
       );
     },
     onToggleContactPanel() {
-      this.$emit('contact-panel-toggle');
+      this.$emit('contactPanelToggle');
     },
     setScrollParams() {
       this.heightBeforeLoad = this.conversationPanel.scrollHeight;
@@ -450,7 +450,7 @@ export default {
         variant="smooth"
         size="tiny"
         color-scheme="secondary"
-        class="rounded-bl-calc rtl:rotate-180 rounded-tl-calc fixed z-10 bg-white dark:bg-slate-700 border-slate-50 dark:border-slate-600 border-solid border border-r-0 box-border"
+        class="box-border fixed z-10 bg-white border border-r-0 border-solid rounded-bl-calc rtl:rotate-180 rounded-tl-calc dark:bg-slate-700 border-slate-50 dark:border-slate-600"
         :class="
           isInboxView ? 'top-52 md:top-40' : 'top-[9.5rem] md:top-[6.25rem]'
         "
@@ -516,14 +516,14 @@ export default {
     >
       <div
         v-if="isAnyoneTyping"
-        class="items-center flex h-0 absolute w-full -top-7"
+        class="absolute flex items-center w-full h-0 -top-7"
       >
         <div
           class="flex py-2 pr-4 pl-5 shadow-md rounded-full bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100 text-xs font-semibold my-2.5 mx-auto"
         >
           {{ typingUserNames }}
           <img
-            class="ltr:ml-2 rtl:mr-2 w-6"
+            class="w-6 ltr:ml-2 rtl:mr-2"
             src="~dashboard/assets/images/typing.gif"
             alt="Someone is typing"
           />
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index a051f2827..dca4e3e1b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -1134,9 +1134,9 @@ export default {
         v-if="showAudioRecorderEditor"
         ref="audioRecorderInput"
         :audio-record-format="audioRecordFormat"
-        @state-recorder-progress-changed="onStateProgressRecorderChanged"
-        @state-recorder-changed="onStateRecorderChanged"
-        @finish-record="onFinishRecorder"
+        @stateRecorderProgressChanged="onStateProgressRecorderChanged"
+        @stateRecorderChanged="onStateRecorderChanged"
+        @finishRecord="onFinishRecorder"
       />
       <ResizableTextArea
         v-else-if="!showRichContentEditor"
@@ -1148,8 +1148,8 @@ export default {
         :signature="signatureToApply"
         :allow-signature="true"
         :send-with-signature="sendWithSignature"
-        @typing-off="onTypingOff"
-        @typing-on="onTypingOn"
+        @typingOff="onTypingOff"
+        @typingOn="onTypingOn"
         @focus="onFocus"
         @blur="onBlur"
       />
@@ -1167,21 +1167,21 @@ export default {
         :signature="signatureToApply"
         :allow-signature="true"
         :channel-type="channelType"
-        @typing-off="onTypingOff"
-        @typing-on="onTypingOn"
+        @typingOff="onTypingOff"
+        @typingOn="onTypingOn"
         @focus="onFocus"
         @blur="onBlur"
-        @toggle-user-mention="toggleUserMention"
-        @toggle-canned-menu="toggleCannedMenu"
-        @toggle-variables-menu="toggleVariablesMenu"
-        @clear-selection="clearEditorSelection"
+        @toggleUserMention="toggleUserMention"
+        @toggleCannedMenu="toggleCannedMenu"
+        @toggleVariablesMenu="toggleVariablesMenu"
+        @clearSelection="clearEditorSelection"
       />
     </div>
     <div v-if="hasAttachments" class="attachment-preview-box" @paste="onPaste">
       <AttachmentPreview
         class="flex-col mt-4"
         :attachments="attachedFiles"
-        @remove-attachment="removeAttachment"
+        @removeAttachment="removeAttachment"
       />
     </div>
     <MessageSignatureMissingAlert
@@ -1212,15 +1212,15 @@ export default {
       :portal-slug="connectedPortalSlug"
       :new-conversation-modal-active="newConversationModalActive"
       @selectWhatsappTemplate="openWhatsappTemplateModal"
-      @toggle-editor="toggleRichContentEditor"
-      @replace-text="replaceText"
-      @toggle-insert-article="toggleInsertArticle"
+      @toggleEditor="toggleRichContentEditor"
+      @replaceText="replaceText"
+      @toggleInsertArticle="toggleInsertArticle"
     />
     <WhatsappTemplates
       :inbox-id="inbox.id"
       :show="showWhatsAppTemplatesModal"
       @close="hideWhatsappTemplatesModal"
-      @on-send="onSendWhatsAppReply"
+      @onSend="onSendWhatsAppReply"
       @cancel="hideWhatsappTemplatesModal"
     />
 
diff --git a/app/javascript/dashboard/components/widgets/conversation/VariableList.vue b/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
index bffa8a3d8..2c8521c01 100644
--- a/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
@@ -61,7 +61,7 @@ export default {
     v-if="items.length"
     type="variable"
     :items="items"
-    @mention-select="handleVariableClick"
+    @mentionSelect="handleVariableClick"
   >
     <template slot-scope="{ item }">
       <span class="text-capitalize variable--list-label">
diff --git a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue
index 17fa51dea..de025a1e5 100644
--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue
@@ -38,7 +38,7 @@ export default {
       this.selectedWaTemplate = null;
     },
     onSendMessage(message) {
-      this.$emit('on-send', message);
+      this.$emit('onSend', message);
     },
     onClose() {
       this.$emit('cancel');
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
index ea060fd80..fc9ec29fe 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
@@ -146,7 +146,7 @@ export default {
   },
   methods: {
     toggleStatus(status, snoozedUntil) {
-      this.$emit('update-conversation', status, snoozedUntil);
+      this.$emit('updateConversation', status, snoozedUntil);
     },
     async snoozeConversation() {
       await this.$store.dispatch('setContextMenuChatId', this.chatId);
@@ -154,7 +154,7 @@ export default {
       ninja.open({ parent: 'snooze_conversation' });
     },
     assignPriority(priority) {
-      this.$emit('assign-priority', priority);
+      this.$emit('assignPriority', priority);
     },
     show(key) {
       // If the conversation status is same as the action, then don't display the option
@@ -179,12 +179,12 @@ export default {
 </script>
 
 <template>
-  <div class="bg-white dark:bg-slate-700 shadow-xl rounded-md p-1">
+  <div class="p-1 bg-white rounded-md shadow-xl dark:bg-slate-700">
     <MenuItem
       v-if="!hasUnreadMessages"
       :option="unreadOption"
       variant="icon"
-      @click="$emit('mark-as-unread')"
+      @click="$emit('markAsUnread')"
     />
     <template v-for="option in statusMenuConfig">
       <MenuItem
@@ -219,7 +219,7 @@ export default {
         :key="label.id"
         :option="generateMenuLabelConfig(label, 'label')"
         variant="label"
-        @click="$emit('assign-label', label)"
+        @click="$emit('assignLabel', label)"
       />
     </MenuItemWithSubmenu>
     <MenuItemWithSubmenu
@@ -233,7 +233,7 @@ export default {
           :key="agent.id"
           :option="generateMenuLabelConfig(agent, 'agent')"
           variant="agent"
-          @click="$emit('assign-agent', agent)"
+          @click="$emit('assignAgent', agent)"
         />
       </template>
     </MenuItemWithSubmenu>
@@ -245,7 +245,7 @@ export default {
         v-for="team in teams"
         :key="team.id"
         :option="generateMenuLabelConfig(team, 'team')"
-        @click="$emit('assign-team', team)"
+        @click="$emit('assignTeam', team)"
       />
     </MenuItemWithSubmenu>
   </div>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
index 54632656b..7b83a31c5 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
@@ -109,22 +109,22 @@ export default {
       this.showCustomTimeSnoozeModal = false;
     },
     selectAll(e) {
-      this.$emit('select-all-conversations', e.target.checked);
+      this.$emit('selectAllConversations', e.target.checked);
     },
     submit(agent) {
-      this.$emit('assign-agent', agent);
+      this.$emit('assignAgent', agent);
     },
     updateConversations(status, snoozedUntil) {
-      this.$emit('update-conversations', status, snoozedUntil);
+      this.$emit('updateConversations', status, snoozedUntil);
     },
     assignLabels(labels) {
-      this.$emit('assign-labels', labels);
+      this.$emit('assignLabels', labels);
     },
     assignTeam(team) {
-      this.$emit('assign-team', team);
+      this.$emit('assignTeam', team);
     },
     resolveConversations() {
-      this.$emit('resolve-conversations');
+      this.$emit('resolveConversations');
     },
     toggleUpdateActions() {
       this.showUpdateActions = !this.showUpdateActions;
@@ -145,7 +145,7 @@ export default {
 <template>
   <div class="bulk-action__container">
     <div class="flex items-center justify-between">
-      <label class="bulk-action__panel flex items-center justify-between">
+      <label class="flex items-center justify-between bulk-action__panel">
         <input
           ref="selectAllCheck"
           type="checkbox"
@@ -162,7 +162,7 @@ export default {
           }}
         </span>
       </label>
-      <div class="bulk-action__actions flex gap-1 items-center">
+      <div class="flex items-center gap-1 bulk-action__actions">
         <woot-button
           v-tooltip="$t('BULK_ACTION.LABELS.ASSIGN_LABELS')"
           size="tiny"
@@ -231,7 +231,7 @@ export default {
         <TeamActions
           v-if="showTeamsList"
           class="team-actions-box"
-          @assign-team="assignTeam"
+          @assignTeam="assignTeam"
           @close="showTeamsList = false"
         />
       </transition>
@@ -245,7 +245,7 @@ export default {
     >
       <CustomSnoozeModal
         @close="hideCustomSnoozeModal"
-        @choose-time="customSnoozeTime"
+        @chooseTime="customSnoozeTime"
       />
     </woot-modal>
   </div>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
index 31977d49f..b67440172 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
@@ -20,7 +20,7 @@ export default {
   },
   methods: {
     assignTeam(key) {
-      this.$emit('assign-team', key);
+      this.$emit('assignTeam', key);
     },
     onClose() {
       this.$emit('close');
@@ -36,7 +36,7 @@ export default {
         <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
       </svg>
     </div>
-    <div class="header flex items-center justify-between">
+    <div class="flex items-center justify-between header">
       <span>{{ $t('BULK_ACTION.TEAMS.TEAM_SELECT_LABEL') }}</span>
       <woot-button
         size="tiny"
@@ -51,7 +51,7 @@ export default {
         <ul>
           <li class="search-container">
             <div
-              class="agent-list-search h-8 flex justify-between items-center gap-2"
+              class="flex items-center justify-between h-8 gap-2 agent-list-search"
             >
               <fluent-icon icon="search" class="search-icon" size="16" />
               <input
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
index 5f397df33..66d902874 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
@@ -22,7 +22,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['unlink-issue']);
+const emit = defineEmits(['unlinkIssue']);
 
 const formattedDate = computed(() => {
   const { createdAt } = props.issue;
@@ -50,7 +50,7 @@ const priorityLabel = computed(() => {
 });
 
 const unlinkIssue = () => {
-  emit('unlink-issue', props.linkId);
+  emit('unlinkIssue', props.linkId);
 };
 </script>
 
@@ -63,7 +63,7 @@ const unlinkIssue = () => {
         :identifier="issue.identifier"
         :link-id="linkId"
         :issue-url="issue.url"
-        @unlink-issue="unlinkIssue"
+        @unlinkIssue="unlinkIssue"
       />
 
       <span class="mt-2 text-sm font-medium text-ash-900">
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue b/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue
index be94792ae..9c3b886ae 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue
@@ -13,10 +13,10 @@ const props = defineProps({
 
 const isUnlinking = inject('isUnlinking');
 
-const emit = defineEmits(['unlink-issue']);
+const emit = defineEmits(['unlinkIssue']);
 
 const unlinkIssue = () => {
-  emit('unlink-issue');
+  emit('unlinkIssue');
 };
 
 const openIssue = () => {
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
index 84f7fd065..9d36fff6e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
@@ -118,7 +118,7 @@ const linkIssue = async () => {
           :loading-placeholder="$t('INTEGRATION_SETTINGS.LINEAR.LINK.LOADING')"
           enable-search
           class="left-0 flex flex-col w-full overflow-y-auto h-fit !max-h-[160px] md:left-auto md:right-0 top-10"
-          @on-search="onSearch"
+          @onSearch="onSearch"
           @click="onSelectIssue"
         />
       </template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
index ec3dbb1f1..c0e81217f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
@@ -123,7 +123,7 @@ onMounted(() => {
       :issue="linkedIssue.issue"
       :link-id="linkedIssue.id"
       class="absolute right-0 top-[40px] invisible group-hover:visible"
-      @unlink-issue="unlinkIssue"
+      @unlinkIssue="unlinkIssue"
     />
     <woot-modal
       :show.sync="shouldShowPopup"
diff --git a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
index 2b0b42aa3..bd1bddbd0 100644
--- a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
+++ b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
@@ -51,7 +51,7 @@ export default {
       this.onSelect();
     },
     onSelect() {
-      this.$emit('mention-select', this.items[this.selectedIndex]);
+      this.$emit('mentionSelect', this.items[this.selectedIndex]);
     },
     variableKey(item = {}) {
       return this.type === 'variable' ? `{{${item.label}}}` : `/${item.label}`;
@@ -81,7 +81,7 @@ export default {
           @click="onListItemSelection(index)"
         >
           <p
-            class="text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 font-medium mb-0 text-sm overflow-hidden text-ellipsis whitespace-nowrap min-w-0 max-w-full"
+            class="max-w-full min-w-0 mb-0 overflow-hidden text-sm font-medium text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
             :class="{
               'text-woot-500 dark:text-woot-500': index === selectedIndex,
             }"
@@ -89,7 +89,7 @@ export default {
             {{ item.description }}
           </p>
           <p
-            class="text-slate-500 dark:text-slate-300 group-hover:text-woot-500 dark:group-hover:text-woot-500 mb-0 text-xs overflow-hidden text-ellipsis whitespace-nowrap min-w-0 max-w-full"
+            class="max-w-full min-w-0 mb-0 overflow-hidden text-xs text-slate-500 dark:text-slate-300 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
             :class="{
               'text-woot-500 dark:text-woot-500': index === selectedIndex,
             }"
diff --git a/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue b/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
index 1bc74944f..e10f5b334 100644
--- a/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
@@ -56,10 +56,10 @@ export default {
   methods: {
     closeModal() {
       this.value = '';
-      this.$emit('on-close');
+      this.$emit('onClose');
     },
     onConfirm() {
-      this.$emit('on-confirm');
+      this.$emit('onConfirm');
     },
   },
 };
diff --git a/app/javascript/dashboard/modules/contact/components/ContactFields.vue b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
index ed2828a97..97d96e0ca 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactFields.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
@@ -40,7 +40,7 @@ export default {
       this.$emit('update', { location: value });
     },
     handleCustomCreate() {
-      this.$emit('create-attribute');
+      this.$emit('createAttribute');
     },
     onCustomAttributeUpdate(key, value) {
       this.$emit('update', { custom_attributes: { [key]: value } });
diff --git a/app/javascript/dashboard/modules/contact/components/ContactPanel.vue b/app/javascript/dashboard/modules/contact/components/ContactPanel.vue
index 94b805fdd..2e10d8172 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactPanel.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactPanel.vue
@@ -76,7 +76,7 @@ export default {
     <ContactFields
       :contact="contact"
       @update="updateField"
-      @create-attribute="toggleCustomAttributeModal"
+      @createAttribute="toggleCustomAttributeModal"
     />
     <EditContact
       v-if="showEditModal"
diff --git a/app/javascript/dashboard/modules/search/components/SearchTabs.vue b/app/javascript/dashboard/modules/search/components/SearchTabs.vue
index 9a6ae9ca0..e31c16bd1 100644
--- a/app/javascript/dashboard/modules/search/components/SearchTabs.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchTabs.vue
@@ -25,7 +25,7 @@ export default {
   methods: {
     onTabChange(index) {
       this.activeTab = index;
-      this.$emit('tab-change', this.tabs[index].key);
+      this.$emit('tabChange', this.tabs[index].key);
     },
   },
 };
diff --git a/app/javascript/dashboard/modules/search/components/SearchView.vue b/app/javascript/dashboard/modules/search/components/SearchView.vue
index b4c2c5a52..a5472e6e4 100644
--- a/app/javascript/dashboard/modules/search/components/SearchView.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchView.vue
@@ -160,7 +160,7 @@ export default {
           v-if="query"
           :tabs="tabs"
           :selected-tab="activeTabIndex"
-          @tab-change="tab => (selectedTab = tab)"
+          @tabChange="tab => (selectedTab = tab)"
         />
       </header>
       <div class="search-results">
@@ -195,7 +195,7 @@ export default {
             {{ $t('SEARCH.EMPTY_STATE_FULL', { query }) }}
           </p>
         </div>
-        <div v-else class="empty text-center">
+        <div v-else class="text-center empty">
           <p class="text-center margin-bottom-0">
             <fluent-icon icon="search" size="24px" class="icon" />
           </p>
diff --git a/app/javascript/dashboard/routes/dashboard/Dashboard.vue b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
index 2c0275cfd..77f7d879f 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -148,23 +148,23 @@ export default {
     <Sidebar
       :route="currentRoute"
       :show-secondary-sidebar="isSidebarOpen"
-      @open-notification-panel="openNotificationPanel"
-      @toggle-account-modal="toggleAccountModal"
-      @open-key-shortcut-modal="toggleKeyShortcutModal"
-      @close-key-shortcut-modal="closeKeyShortcutModal"
-      @show-add-label-popup="showAddLabelPopup"
+      @openNotificationPanel="openNotificationPanel"
+      @toggleAccountModal="toggleAccountModal"
+      @openKeyShortcutModal="toggleKeyShortcutModal"
+      @closeKeyShortcutModal="closeKeyShortcutModal"
+      @showAddLabelPopup="showAddLabelPopup"
     />
     <section class="flex flex-1 h-full min-h-0 px-0 overflow-hidden">
       <router-view />
       <CommandBar />
       <AccountSelector
         :show-account-modal="showAccountModal"
-        @close-account-modal="toggleAccountModal"
-        @show-create-account-modal="openCreateAccountModal"
+        @closeAccountModal="toggleAccountModal"
+        @showCreateAccountModal="openCreateAccountModal"
       />
       <AddAccountModal
         :show="showCreateAccountModal"
-        @close-account-create-modal="closeCreateAccountModal"
+        @closeAccountCreateModal="closeCreateAccountModal"
       />
       <WootKeyShortcutModal
         :show.sync="showShortcutModal"
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
index 82a677556..3b0133048 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
@@ -86,8 +86,8 @@ export default {
       :show-avatar="showAvatar"
       :contact="contact"
       close-icon-name="dismiss"
-      @panel-close="onClose"
-      @toggle-panel="onClose"
+      @panelClose="onClose"
+      @togglePanel="onClose"
     />
     <Draggable
       :list="contactSidebarItems"
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
index e8c4f84ac..bfc425790 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -51,7 +51,7 @@ export default {
       sortConfig: {},
       sortOption: {
         sortAlways: true,
-        sortChange: params => this.$emit('on-sort-change', params),
+        sortChange: params => this.$emit('onSortChange', params),
       },
     };
   },
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
index 03b138242..98037a821 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
@@ -396,15 +396,15 @@ export default {
         :header-title="pageTitle"
         :segments-id="segmentsId"
         this-selected-contact-id=""
-        @on-input-search="onInputSearch"
-        @on-toggle-create="onToggleCreate"
-        @on-toggle-filter="onToggleFilters"
-        @on-search-submit="onSearchSubmit"
-        @on-toggle-import="onToggleImport"
-        @on-export-submit="onExportSubmit"
-        @on-toggle-save-filter="onToggleSaveFilters"
-        @on-toggle-delete-filter="onToggleDeleteFilters"
-        @on-toggle-edit-filter="onToggleFilters"
+        @onInputSearch="onInputSearch"
+        @onToggleCreate="onToggleCreate"
+        @onToggleFilter="onToggleFilters"
+        @onSearchSubmit="onSearchSubmit"
+        @onToggleImport="onToggleImport"
+        @onExportSubmit="onExportSubmit"
+        @onToggleSaveFilter="onToggleSaveFilters"
+        @onToggleDeleteFilter="onToggleDeleteFilters"
+        @onToggleEditFilter="onToggleFilters"
       />
       <ContactsTable
         :contacts="records"
@@ -412,14 +412,14 @@ export default {
         :is-loading="uiFlags.isFetching"
         :on-click-contact="openContactInfoPanel"
         :active-contact-id="selectedContactId"
-        @on-sort-change="onSortChange"
+        @onSortChange="onSortChange"
       />
       <TableFooter
         class="border-t border-slate-75 dark:border-slate-700/50"
         :current-page="Number(meta.currentPage)"
         :total-count="meta.count"
         :page-size="15"
-        @page-change="onPageChange"
+        @pageChange="onPageChange"
       />
     </div>
 
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
index acc6b6efd..d4b992abd 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
@@ -52,36 +52,36 @@ export default {
   },
   methods: {
     onToggleSegmentsModal() {
-      this.$emit('on-toggle-save-filter');
+      this.$emit('onToggleSaveFilter');
     },
     onToggleEditSegmentsModal() {
-      this.$emit('on-toggle-edit-filter');
+      this.$emit('onToggleEditFilter');
     },
     onToggleDeleteSegmentsModal() {
-      this.$emit('on-toggle-delete-filter');
+      this.$emit('onToggleDeleteFilter');
     },
     toggleCreate() {
-      this.$emit('on-toggle-create');
+      this.$emit('onToggleCreate');
     },
     toggleFilter() {
-      this.$emit('on-toggle-filter');
+      this.$emit('onToggleFilter');
     },
     toggleImport() {
-      this.$emit('on-toggle-import');
+      this.$emit('onToggleImport');
     },
     async submitExport() {
       const ok =
         await this.$refs.confirmExportContactsDialog.showConfirmation();
 
       if (ok) {
-        this.$emit('on-export-submit');
+        this.$emit('onExportSubmit');
       }
     },
     submitSearch() {
-      this.$emit('on-search-submit');
+      this.$emit('onSearchSubmit');
     },
     inputSearch(event) {
-      this.$emit('on-input-search', event);
+      this.$emit('onInputSearch', event);
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
index 766b82c1f..0002533fb 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -229,11 +229,11 @@ export default {
       :conversation-type="conversationType"
       :folders-id="foldersId"
       :is-on-expanded-layout="isOnExpandedLayout"
-      @conversation-load="onConversationLoad"
+      @conversationLoad="onConversationLoad"
     >
       <PopOverSearch
         :is-on-expanded-layout="isOnExpandedLayout"
-        @toggle-conversation-layout="toggleConversationLayout"
+        @toggleConversationLayout="toggleConversationLayout"
       />
     </ChatList>
     <ConversationBox
@@ -241,7 +241,7 @@ export default {
       :inbox-id="inboxId"
       :is-contact-panel-open="isContactPanelOpen"
       :is-on-expanded-layout="isOnExpandedLayout"
-      @contact-panel-toggle="onToggleContactPanel"
+      @contactPanelToggle="onToggleContactPanel"
     />
     <woot-modal
       :show.sync="showCustomSnoozeModal"
@@ -249,7 +249,7 @@ export default {
     >
       <CustomSnoozeModal
         @close="hideCustomSnoozeModal"
-        @choose-time="chooseSnoozeTime"
+        @chooseTime="chooseSnoozeTime"
       />
     </woot-modal>
   </section>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index f71f6ce0b..d181e16e4 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -105,7 +105,7 @@ export default {
       this.showEditModal = !this.showEditModal;
     },
     onPanelToggle() {
-      this.$emit('toggle-panel');
+      this.$emit('togglePanel');
     },
     toggleConversationModal() {
       this.showConversationModal = !this.showConversationModal;
@@ -137,7 +137,7 @@ export default {
     async deleteContact({ id }) {
       try {
         await this.$store.dispatch('contacts/delete', id);
-        this.$emit('panel-close');
+        this.$emit('panelClose');
         useAlert(this.$t('DELETE_CONTACT.API.SUCCESS_MESSAGE'));
 
         if (isAConversationRoute(this.$route.name)) {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
index 00313cf7f..70532b82d 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
@@ -474,7 +474,7 @@ export default {
             v-else-if="hasWhatsappTemplates"
             :inbox-id="selectedInbox.inbox.id"
             @on-select-template="toggleWaTemplate"
-            @on-send="onSendWhatsAppReply"
+            @onSend="onSendWhatsAppReply"
           />
           <label v-else :class="{ error: v$.message.$error }">
             {{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
@@ -527,7 +527,7 @@ export default {
               <AttachmentPreview
                 class="[&>.preview-item]:dark:bg-slate-700 flex-row flex-wrap gap-x-3 gap-y-1"
                 :attachments="attachedFiles"
-                :remove-attachment="removeAttachment"
+                @removeAttachment="removeAttachment"
               />
             </div>
           </div>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue
index 438f3b4d2..b95fabb3e 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue
@@ -31,7 +31,7 @@ export default {
       this.selectedWaTemplate = null;
     },
     onSendMessage(message) {
-      this.$emit('on-send', message);
+      this.$emit('onSend', message);
     },
     onClose() {
       this.$emit('cancel');
@@ -41,7 +41,7 @@ export default {
 </script>
 
 <template>
-  <div class="mx-0 flex flex-wrap">
+  <div class="flex flex-wrap mx-0">
     <TemplatesPicker
       v-if="!selectedWaTemplate"
       :inbox-id="inboxId"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
index 3826bc6e6..e38c5500a 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
@@ -60,7 +60,7 @@ export default {
       </router-link>
       <SwitchLayout
         :is-on-expanded-layout="isOnExpandedLayout"
-        @toggle="$emit('toggle-conversation-layout')"
+        @toggle="$emit('toggleConversationLayout')"
       />
     </div>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
index 1dcb74c05..09866555a 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
@@ -32,7 +32,7 @@ export default {
     this.articleContent = this.article.content;
     this.saveArticle = debounce(
       values => {
-        this.$emit('save-article', values);
+        this.$emit('saveArticle', values);
       },
       300,
       false
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
index 58e5437f2..1bb2cc974 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
@@ -83,7 +83,7 @@ export default {
       this.$emit('reorder', reorderedGroup);
     },
     onPageChange(page) {
-      this.$emit('page-change', page);
+      this.$emit('pageChange', page);
     },
   },
 };
@@ -92,38 +92,38 @@ export default {
 <template>
   <div class="flex-1">
     <div
-      class="hidden lg:grid py-0 px-6 h-12 content-center grid-cols-12 z-10 gap-4 border-b border-slate-50 dark:border-slate-700 sticky top-16 bg-white dark:bg-slate-900"
+      class="sticky z-10 content-center hidden h-12 grid-cols-12 gap-4 px-6 py-0 bg-white border-b lg:grid border-slate-50 dark:border-slate-700 top-16 dark:bg-slate-900"
       :class="{ draggable: onCategoryPage }"
     >
       <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-6"
+        class="col-span-6 px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
       >
         {{ $t('HELP_CENTER.TABLE.HEADERS.TITLE') }}
       </div>
       <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-2"
+        class="col-span-2 px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
       >
         {{ $t('HELP_CENTER.TABLE.HEADERS.CATEGORY') }}
       </div>
       <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right hidden lg:block"
+        class="hidden px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right lg:block"
       >
         {{ $t('HELP_CENTER.TABLE.HEADERS.READ_COUNT') }}
       </div>
       <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right"
+        class="px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
       >
         {{ $t('HELP_CENTER.TABLE.HEADERS.STATUS') }}
       </div>
       <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-right rtl:text-left hidden md:block col-span-2"
+        class="hidden col-span-2 px-0 py-2 text-sm font-semibold text-right capitalize text-slate-700 dark:text-slate-100 rtl:text-left md:block"
       >
         {{ $t('HELP_CENTER.TABLE.HEADERS.LAST_EDITED') }}
       </div>
     </div>
     <Draggable
       tag="div"
-      class="border-t-0 px-4 pb-4"
+      class="px-4 pb-4 border-t-0"
       :disabled="!dragEnabled"
       :list="localArticles"
       ghost-class="article-ghost-class"
@@ -150,8 +150,8 @@ export default {
       :current-page="currentPage"
       :total-count="totalCount"
       :page-size="pageSize"
-      class="dark:bg-slate-900 bottom-0 border-t border-slate-75 dark:border-slate-700/50"
-      @page-change="onPageChange"
+      class="bottom-0 border-t dark:bg-slate-900 border-slate-75 dark:border-slate-700/50"
+      @pageChange="onPageChange"
     />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
index cb213e8ce..7e8c2d428 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
@@ -72,7 +72,7 @@ export default {
       this.showLocaleDropdown = false;
     },
     onClickNewArticlePage() {
-      this.$emit('new-article-page');
+      this.$emit('newArticlePage');
     },
     onClickSelectItem(value) {
       const { name, code } = value;
@@ -80,7 +80,7 @@ export default {
       if (!name || name === this.selectedLocale) {
         return;
       }
-      this.$emit('change-locale', code);
+      this.$emit('changeLocale', code);
     },
   },
 };
@@ -88,12 +88,12 @@ export default {
 
 <template>
   <div
-    class="flex p-6 items-center justify-between w-full h-16 sticky top-0 z-50 bg-white dark:bg-slate-900"
+    class="sticky top-0 z-50 flex items-center justify-between w-full h-16 p-6 bg-white dark:bg-slate-900"
   >
     <div class="flex items-center">
       <woot-sidemenu-icon />
-      <div class="flex items-center my-0 mx-2">
-        <h3 class="text-xl text-slate-800 dark:text-slate-100 font-medium mb-0">
+      <div class="flex items-center mx-2 my-0">
+        <h3 class="mb-0 text-xl font-medium text-slate-800 dark:text-slate-100">
           {{ headerTitle }}
         </h3>
         <span class="text-sm text-slate-600 dark:text-slate-300 mx-2 mt-0.5">{{
@@ -122,7 +122,7 @@ export default {
       >
         {{ $t('HELP_CENTER.HEADER.SORT') }}
         <span
-          class="inline-flex ml-1 rtl:ml-0 rtl:mr-1 items-center text-slate-800 dark:text-slate-100"
+          class="inline-flex items-center ml-1 rtl:ml-0 rtl:mr-1 text-slate-800 dark:text-slate-100"
         >
           {{ selectedValue }}
           <FluentIcon class="dropdown-arrow" icon="chevron-down" size="14" />
@@ -183,9 +183,9 @@ export default {
           variant="hollow"
           @click="openLocaleDropdown"
         >
-          <div class="flex justify-between w-full min-w-0 items-center">
+          <div class="flex items-center justify-between w-full min-w-0">
             <span
-              class="inline-flex ml-1 rtl:ml-0 rtl:mr-1 items-center text-slate-800 dark:text-slate-100"
+              class="inline-flex items-center ml-1 rtl:ml-0 rtl:mr-1 text-slate-800 dark:text-slate-100"
             >
               {{ selectedLocale }}
               <FluentIcon
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
index 4500080fc..b590e9f5a 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
@@ -78,7 +78,7 @@ export default {
           articleId: this.articleSlug,
           status: status,
         });
-        this.$emit('update-meta');
+        this.$emit('updateMeta');
         this.statusUpdateSuccessMessage(status);
         this.closeActionsDropdown();
         if (status === this.ARTICLE_STATUS_TYPES.ARCHIVE) {
@@ -140,7 +140,7 @@ export default {
     <div class="flex items-center gap-1">
       <span
         v-if="isUpdating || isSaved"
-        class="draft-status mr-1 ml-4 rtl:ml-2 rtl:mr-4 text-slate-400 dark:text-slate-300 items-center text-xs"
+        class="items-center ml-4 mr-1 text-xs draft-status rtl:ml-2 rtl:mr-4 text-slate-400 dark:text-slate-300"
       >
         {{ statusText }}
       </span>
@@ -188,7 +188,7 @@ export default {
         color-scheme="secondary"
         @click="closeSidebar"
       />
-      <div class="article--buttons relative">
+      <div class="relative article--buttons">
         <div class="button-group">
           <woot-button
             class-names="publish-button"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
index 213f3869c..4bf4fe9f6 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
@@ -287,10 +287,10 @@ export default {
   <div class="flex flex-grow-0 w-full h-full min-h-0 app-wrapper">
     <Sidebar
       :route="currentRoute"
-      @toggle-account-modal="toggleAccountModal"
-      @open-notification-panel="openNotificationPanel"
-      @open-key-shortcut-modal="toggleKeyShortcutModal"
-      @close-key-shortcut-modal="closeKeyShortcutModal"
+      @toggleAccountModal="toggleAccountModal"
+      @openNotificationPanel="openNotificationPanel"
+      @openKeyShortcutModal="toggleKeyShortcutModal"
+      @closeKeyShortcutModal="closeKeyShortcutModal"
     />
     <HelpCenterSidebar
       v-if="showHelpCenterSidebar"
@@ -300,18 +300,18 @@ export default {
       :sub-title="localeName(selectedLocaleInPortal)"
       :accessible-menu-items="accessibleMenuItems"
       :additional-secondary-menu-items="additionalSecondaryMenuItems"
-      @open-popover="openPortalPopover"
-      @open-modal="onClickOpenAddCategoryModal"
+      @openPopover="openPortalPopover"
+      @openModal="onClickOpenAddCategoryModal"
     />
     <section
       v-if="isHelpCenterEnabled"
       class="flex flex-1 h-full min-h-0 px-0 overflow-hidden bg-white dark:bg-slate-900"
     >
-      <router-view @reload-locale="fetchPortalAndItsCategories" />
+      <router-view @reloadLocale="fetchPortalAndItsCategories" />
       <CommandBar />
       <AccountSelector
         :show-account-modal="showAccountModal"
-        @close-account-modal="toggleAccountModal"
+        @closeAccountModal="toggleAccountModal"
       />
       <WootKeyShortcutModal
         v-if="showShortcutModal"
@@ -327,8 +327,8 @@ export default {
         :portals="portals"
         :active-portal-slug="selectedPortalSlug"
         :active-locale="selectedLocaleInPortal"
-        @fetch-portal="fetchPortalAndItsCategories"
-        @close-popover="closePortalPopover"
+        @fetchPortal="fetchPortalAndItsCategories"
+        @closePopover="closePortalPopover"
       />
       <AddCategory
         v-if="showAddCategoryModal"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
index d344a4be6..9a0ffb8a7 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
@@ -64,10 +64,10 @@ export default {
   },
   methods: {
     addLocale() {
-      this.$emit('add-locale', this.portal.id);
+      this.$emit('addLocale', this.portal.id);
     },
     openSite() {
-      this.$emit('open-site', this.portal.slug);
+      this.$emit('openSite', this.portal.slug);
     },
     openSettings() {
       this.fetchPortalAndItsCategories();
@@ -357,7 +357,7 @@ export default {
           <LocaleItemTable
             :locales="locales"
             :selected-locale-code="portal.meta.default_locale"
-            @change-default-locale="changeDefaultLocale"
+            @changeDefaultLocale="changeDefaultLocale"
             @delete="deletePortalLocale"
           />
         </div>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
index 95ba8e827..bd3c6965f 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
@@ -15,7 +15,7 @@ export default {
 
   methods: {
     changeDefaultLocale(localeCode) {
-      this.$emit('change-default-locale', { localeCode });
+      this.$emit('changeDefaultLocale', { localeCode });
     },
     deleteLocale(localeCode) {
       this.$emit('delete', { localeCode });
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
index 7c65e9742..a34bfb4fc 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
@@ -21,7 +21,7 @@ export default {
 
   methods: {
     closePortalPopover() {
-      this.$emit('close-popover');
+      this.$emit('closePopover');
     },
     openPortalPage() {
       this.closePortalPopover();
@@ -30,7 +30,7 @@ export default {
       });
     },
     fetchPortalAndItsCategories() {
-      this.$emit('fetch-portal');
+      this.$emit('fetchPortal');
     },
   },
 };
@@ -65,7 +65,7 @@ export default {
           />
         </div>
       </div>
-      <p class="text-xs text-slate-600 dark:text-slate-300 mt-2">
+      <p class="mt-2 text-xs text-slate-600 dark:text-slate-300">
         {{ $t('HELP_CENTER.PORTAL.POPOVER.SUBTITLE') }}
       </p>
     </header>
@@ -77,8 +77,8 @@ export default {
         :active-portal-slug="activePortalSlug"
         :active-locale="activeLocale"
         :active="portal.slug === activePortalSlug"
-        @open-portal-page="closePortalPopover"
-        @fetch-portal="fetchPortalAndItsCategories"
+        @openPortalPage="closePortalPopover"
+        @fetchPortal="fetchPortalAndItsCategories"
       />
     </div>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
index 4417fdf57..38e690bc2 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
@@ -97,7 +97,7 @@ const showDeleteButton = computed(() => {
   return hasValidAvatarUrl(state.logoUrl);
 });
 
-const emit = defineEmits(['submit', 'delete-logo']);
+const emit = defineEmits(['submit', 'deleteLogo']);
 
 onMounted(() => {
   const portal = props.portal || {};
@@ -135,7 +135,7 @@ function onSubmitClick() {
 async function deleteAvatar() {
   state.logoUrl = '';
   state.avatarBlobId = '';
-  emit('delete-logo');
+  emit('deleteLogo');
 }
 
 async function uploadLogoToStorage(file) {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
index 39c39e82f..886c06200 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
@@ -54,8 +54,8 @@ export default {
           locale: code,
         },
       });
-      this.$emit('fetch-portal');
-      this.$emit('open-portal-page');
+      this.$emit('fetchPortal');
+      this.$emit('openPortalPage');
     },
     isLocaleActive(code, slug) {
       const isPortalActive = this.portal.slug === slug;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
index 02c49f0cb..f0803ac6e 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
@@ -53,10 +53,10 @@ export default {
       this.$emit('input', value);
     },
     openPortalPopover() {
-      this.$emit('open-popover');
+      this.$emit('openPopover');
     },
     onClickOpenAddCatogoryModal() {
-      this.$emit('open-modal');
+      this.$emit('openModal');
     },
   },
 };
@@ -64,7 +64,7 @@ export default {
 
 <template>
   <div
-    class="h-full overflow-auto w-60 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-700 rtl:border-r-0 rtl:border-l border-slate-50 text-sm"
+    class="flex flex-col h-full overflow-auto text-sm bg-white border-r w-60 dark:bg-slate-900 dark:border-slate-700 rtl:border-r-0 rtl:border-l border-slate-50"
   >
     <SidebarHeader
       :thumbnail-src="thumbnailSrc"
@@ -72,12 +72,12 @@ export default {
       :sub-title="subTitle"
       :portal-link="portalLink"
       class="px-4"
-      @open-popover="openPortalPopover"
+      @openPopover="openPortalPopover"
     />
     <transition-group
       name="menu-list"
       tag="ul"
-      class="py-2 px-4 list-none ml-0 mb-0"
+      class="px-4 py-2 mb-0 ml-0 list-none"
     >
       <SecondaryNavItem
         v-for="menuItem in accessibleMenuItems"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
index 343dae71a..aa72a2bdf 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
@@ -27,7 +27,7 @@ export default {
       window.open(this.portalLink, '_blank');
     },
     openPortalPopover() {
-      this.$emit('open-popover');
+      this.$emit('openPopover');
     },
   },
 };
@@ -35,7 +35,7 @@ export default {
 
 <template>
   <div
-    class="flex h-16 items-center justify-between py-4 px-0 mb-1/4 border-b border-slate-50 dark:border-slate-700"
+    class="flex items-center justify-between h-16 px-0 py-4 border-b mb-1/4 border-slate-50 dark:border-slate-700"
   >
     <div class="flex items-center">
       <Thumbnail
@@ -44,13 +44,13 @@ export default {
         :username="headerTitle"
         variant="square"
       />
-      <div class="flex items-start flex-col ml-2 rtl:ml-0 rtl:mr-2">
+      <div class="flex flex-col items-start ml-2 rtl:ml-0 rtl:mr-2">
         <h4
-          class="text-sm w-28 h-4 mb-0 leading-4 overflow-hidden whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
+          class="h-4 mb-0 overflow-hidden text-sm leading-4 w-28 whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
         >
           {{ headerTitle }}
         </h4>
-        <span class="h-4 leading-4 text-slate-600 dark:text-slate-200 text-xs">
+        <span class="h-4 text-xs leading-4 text-slate-600 dark:text-slate-200">
           {{ subTitle }}
         </span>
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
index cfb98a8f2..303f8005c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
@@ -56,7 +56,7 @@ export default {
   mounted() {
     this.saveArticle = debounce(
       () => {
-        this.$emit('save-article', {
+        this.$emit('saveArticle', {
           meta: {
             title: this.metaTitle,
             description: this.metaDescription,
@@ -95,25 +95,25 @@ export default {
       }
     },
     onClickSelectCategory({ id }) {
-      this.$emit('save-article', { category_id: id });
+      this.$emit('saveArticle', { category_id: id });
     },
     onClickAssignAuthor({ id }) {
-      this.$emit('save-article', { author_id: id });
+      this.$emit('saveArticle', { author_id: id });
       this.updateMeta();
     },
     onChangeMetaInput() {
       this.saveArticle();
     },
     onClickArchiveArticle() {
-      this.$emit('archive-article');
+      this.$emit('archiveArticle');
       this.updateMeta();
     },
     onClickDeleteArticle() {
-      this.$emit('delete-article');
+      this.$emit('deleteArticle');
       this.updateMeta();
     },
     updateMeta() {
-      this.$emit('update-meta');
+      this.$emit('updateMeta');
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
index 9672851ca..346adf004 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
@@ -183,7 +183,7 @@ export default {
         @open="openArticleSettings"
         @close="closeArticleSettings"
         @show="showArticleInPortal"
-        @update-meta="updateMeta"
+        @updateMeta="updateMeta"
       />
       <div v-if="isFetching" class="h-full p-4 text-base text-center">
         <Spinner size="" />
@@ -193,16 +193,16 @@ export default {
         v-else
         :is-settings-sidebar-open="showArticleSettings"
         :article="article"
-        @save-article="saveArticle"
+        @saveArticle="saveArticle"
       />
     </div>
     <ArticleSettings
       v-if="showArticleSettings"
       :article="article"
-      @save-article="saveArticle"
-      @delete-article="openDeletePopup"
-      @archive-article="archiveArticle"
-      @update-meta="updateMeta"
+      @saveArticle="saveArticle"
+      @deleteArticle="openDeletePopup"
+      @archiveArticle="archiveArticle"
+      @updateMeta="updateMeta"
     />
     <woot-delete-modal
       :show.sync="showDeleteConfirmationPopup"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
index e896aed32..cb23d42b7 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
@@ -149,7 +149,7 @@ export default {
           locale,
         },
       });
-      this.$emit('reload-locale');
+      this.$emit('reloadLocale');
     },
   },
 };
@@ -157,7 +157,7 @@ export default {
 
 <template>
   <div
-    class="py-0 px-0 w-full max-w-full overflow-auto bg-white dark:bg-slate-900 flex flex-col"
+    class="flex flex-col w-full max-w-full px-0 py-0 overflow-auto bg-white dark:bg-slate-900"
   >
     <ArticleHeader
       :header-title="headerTitle"
@@ -166,12 +166,12 @@ export default {
       :all-locales="allowedLocales"
       selected-value="Published"
       class="border-b border-slate-50 dark:border-slate-700"
-      @new-article-page="newArticlePage"
-      @change-locale="onChangeLocale"
+      @newArticlePage="newArticlePage"
+      @changeLocale="onChangeLocale"
     />
     <div
       v-if="isFetching"
-      class="items-center flex text-base justify-center py-6 px-4 text-slate-600 dark:text-slate-200"
+      class="flex items-center justify-center px-4 py-6 text-base text-slate-600 dark:text-slate-200"
     >
       <Spinner />
       <span class="text-slate-600 dark:text-slate-200">
@@ -187,7 +187,7 @@ export default {
         :articles="articles"
         :current-page="Number(meta.currentPage)"
         :total-count="Number(meta.count)"
-        @page-change="onPageChange"
+        @pageChange="onPageChange"
         @reorder="onReorder"
       />
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
index 11c108d79..820cf3ab0 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
@@ -108,12 +108,12 @@ export default {
         @close="closeArticleSettings"
         @save-article="createNewArticle"
       />
-      <ArticleEditor :article="newArticle" @save-article="createNewArticle" />
+      <ArticleEditor :article="newArticle" @saveArticle="createNewArticle" />
     </div>
     <ArticleSettings
       v-if="showArticleSettings"
       :article="article"
-      @save-article="saveArticle"
+      @saveArticle="saveArticle"
     />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
index 247283d3a..32a5fd1c8 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
@@ -140,8 +140,8 @@ export default {
           :help-text="$t('HELP_CENTER.CATEGORY.ADD.NAME.HELP_TEXT')"
           :has-error="v$.name.$error"
           :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
-          @name-change="onNameChange"
-          @icon-change="onClickInsertEmoji"
+          @nameChange="onNameChange"
+          @iconChange="onClickInsertEmoji"
         />
         <woot-input
           v-model.trim="slug"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
index 0506e3d06..d4dfda7e7 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
@@ -151,8 +151,8 @@ export default {
           :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
           :existing-name="category.name"
           :saved-icon="category.icon"
-          @name-change="changeName"
-          @icon-change="onClickInsertEmoji"
+          @nameChange="changeName"
+          @iconChange="onClickInsertEmoji"
         />
         <woot-input
           v-model.trim="slug"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
index e07f00d73..73cc3c279 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
@@ -61,11 +61,11 @@ export default {
     },
     onClickInsertEmoji(emoji = '') {
       this.icon = emoji;
-      this.$emit('icon-change', emoji);
+      this.$emit('iconChange', emoji);
       this.showEmojiPicker = false;
     },
     onNameChange() {
-      this.$emit('name-change', this.name);
+      this.$emit('nameChange', this.name);
     },
     hideEmojiPicker() {
       if (this.showEmojiPicker) {
@@ -77,7 +77,7 @@ export default {
 </script>
 
 <template>
-  <div class="flex items-center relative">
+  <div class="relative flex items-center">
     <woot-button
       variant="hollow"
       class="absolute [&>span]:flex [&>span]:items-center [&>span]:justify-center z-10 top-[28px] h-[2.5rem] w-[2.45rem] !text-slate-400 dark:!text-slate-600 dark:!bg-slate-900 !p-0"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
index 7802e083c..4b2c6ebfe 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
@@ -79,6 +79,6 @@ async function deleteLogo() {
       $t('HELP_CENTER.PORTAL.EDIT.EDIT_BASIC_INFO.BUTTON_TEXT')
     "
     @submit="updatePortalSettings"
-    @delete-logo="deleteLogo"
+    @deleteLogo="deleteLogo"
   />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
index de1fd7e65..f8792cb2f 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
@@ -126,7 +126,7 @@ function addLocale() {
       v-if="currentPortal"
       :locales="locales"
       :selected-locale-code="currentPortal.meta.default_locale"
-      @change-default-locale="changeDefaultLocale"
+      @changeDefaultLocale="changeDefaultLocale"
       @delete="deletePortalLocale"
     />
     <woot-modal
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
index 157e6fbfd..3db06cb0c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
@@ -77,8 +77,8 @@ export default {
         :key="portal.id"
         :portal="portal"
         :status="portalStatus"
-        @add-locale="addLocale"
-        @open-site="openPortal"
+        @addLocale="addLocale"
+        @openSite="openPortal"
       />
       <div
         v-if="isFetching"
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
index ec998a20a..1cf1dd755 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
@@ -187,11 +187,11 @@ export default {
           :key="notificationItem.id"
           :active="currentNotificationId === notificationItem.id"
           :notification-item="notificationItem"
-          @mark-notification-as-read="markNotificationAsRead"
-          @mark-notification-as-unread="markNotificationAsUnRead"
-          @delete-notification="deleteNotification"
-          @context-menu-open="isInboxContextMenuOpen = true"
-          @context-menu-close="isInboxContextMenuOpen = false"
+          @markNotificationAsRead="markNotificationAsRead"
+          @markNotificationAsUnRead="markNotificationAsUnRead"
+          @deleteNotification="deleteNotification"
+          @contextMenuOpen="isInboxContextMenuOpen = true"
+          @contextMenuClose="isInboxContextMenuOpen = false"
         />
         <div v-if="uiFlags.isFetching" class="text-center">
           <span class="mt-4 mb-4 spinner" />
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
index 736972183..409146910 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
@@ -202,7 +202,7 @@ export default {
         :inbox-id="inboxId"
         :is-contact-panel-open="isContactPanelOpen"
         :is-on-expanded-layout="false"
-        @contact-panel-toggle="onToggleContactPanel"
+        @contactPanelToggle="onToggleContactPanel"
       />
     </div>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
index 81906284b..ac74b92c3 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
@@ -126,7 +126,7 @@ export default {
     closeContextMenu() {
       this.isContextMenuOpen = false;
       this.contextMenuPosition = { x: null, y: null };
-      this.$emit('context-menu-close');
+      this.$emit('contextMenuClose');
     },
     openContextMenu(e) {
       this.closeContextMenu();
@@ -136,18 +136,18 @@ export default {
         y: e.pageY || e.clientY,
       };
       this.isContextMenuOpen = true;
-      this.$emit('context-menu-open');
+      this.$emit('contextMenuOpen');
     },
     handleAction(key) {
       switch (key) {
         case 'mark_as_read':
-          this.$emit('mark-notification-as-read', this.notificationItem);
+          this.$emit('markNotificationAsRead', this.notificationItem);
           break;
         case 'mark_as_unread':
-          this.$emit('mark-notification-as-unread', this.notificationItem);
+          this.$emit('markNotificationAsUnRead', this.notificationItem);
           break;
         case 'delete':
-          this.$emit('delete-notification', this.notificationItem);
+          this.$emit('deleteNotification', this.notificationItem);
           break;
         default:
       }
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
index 99ee8380c..271c4460a 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
@@ -151,7 +151,7 @@ export default {
     >
       <CustomSnoozeModal
         @close="hideCustomSnoozeModal"
-        @choose-time="scheduleCustomSnooze"
+        @chooseTime="scheduleCustomSnooze"
       />
     </woot-modal>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
index 12adf38d0..4924eeb4f 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
@@ -126,7 +126,7 @@ export default {
         v-if="showInboxOptionMenu"
         v-on-clickaway="openInboxOptionsMenu"
         class="absolute top-9 ltr:right-0 ltr:md:right-[unset] rtl:left-0 rtl:md:left-[unset]"
-        @option-click="onInboxOptionMenuClick"
+        @optionClick="onInboxOptionMenuClick"
       />
     </div>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue
index 6eac87b46..e5ab0818c 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     onClick(key) {
-      this.$emit('option-click', key);
+      this.$emit('optionClick', key);
     },
   },
 };
@@ -32,7 +32,7 @@ export default {
 
 <template>
   <div
-    class="flex flex-col gap-1 bg-white z-50 dark:bg-slate-900 w-40 py-1 border shadow-md border-slate-100 dark:border-slate-700/50 rounded-xl divide-y divide-slate-100 dark:divide-slate-700/50"
+    class="z-50 flex flex-col w-40 gap-1 py-1 bg-white border divide-y shadow-md dark:bg-slate-900 border-slate-100 dark:border-slate-700/50 rounded-xl divide-slate-100 dark:divide-slate-700/50"
   >
     <div class="flex flex-col">
       <MenuItem
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
index e24403711..5257c0740 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
@@ -30,7 +30,7 @@ export default {
   methods: {
     dynamicTime,
     onClickOpenNotification() {
-      this.$emit('open-notification', this.notificationItem);
+      this.$emit('openNotification', this.notificationItem);
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
index bafcc8be9..b81bb9f70 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
@@ -57,7 +57,7 @@ export default {
       v-show="!isLoading"
       :key="notificationItem.id"
       :notification-item="notificationItem"
-      @open-notification="onClickNotification"
+      @openNotification="onClickNotification"
     />
     <EmptyState
       v-if="showEmptyResult"
@@ -75,7 +75,7 @@ export default {
     </woot-button>
     <div
       v-if="isLoading"
-      class="items-center justify-center my-12 mx-2 text-sm font-medium flex"
+      class="flex items-center justify-center mx-2 my-12 text-sm font-medium"
     >
       <Spinner />
       <span>{{
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
index 2cdee7ea8..8c1454304 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
@@ -57,7 +57,7 @@ export default {
 </script>
 
 <template>
-  <div class="overflow-y-auto h-full">
+  <div class="h-full overflow-y-auto">
     <div class="flex flex-col h-full">
       <NotificationTable
         :notifications="records"
@@ -71,7 +71,7 @@ export default {
         :current-page="Number(meta.currentPage)"
         :total-count="meta.count"
         :page-size="15"
-        @page-change="onPageChange"
+        @pageChange="onPageChange"
       />
     </div>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
index 54301e8b2..5c234ec03 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
@@ -194,7 +194,7 @@ export default {
       <EditAttribute
         :selected-attribute="selectedAttribute"
         :is-updating="uiFlags.isUpdating"
-        @on-close="hideEditPopup"
+        @onClose="hideEditPopup"
       />
     </woot-modal>
     <woot-confirm-delete-modal
@@ -206,8 +206,8 @@ export default {
       :reject-text="deleteRejectText"
       :confirm-value="selectedAttribute.attribute_display_name"
       :confirm-place-holder-text="confirmPlaceHolderText"
-      @on-confirm="confirmDeletion"
-      @on-close="closeDelete"
+      @onConfirm="confirmDeletion"
+      @onClose="closeDelete"
     />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
index 16a507505..843fb9321 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
@@ -109,7 +109,7 @@ export default {
   },
   methods: {
     onClose() {
-      this.$emit('on-close');
+      this.$emit('onClose');
     },
     addTagValue(tagValue) {
       const tag = {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
index 5eb56a58a..ef64c5551 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
@@ -130,7 +130,7 @@ export default {
       :total-count="meta.totalEntries"
       :page-size="meta.perPage"
       class="!bg-slate-25 dark:!bg-slate-900 border-t border-slate-75 dark:border-slate-700/50"
-      @page-change="onPageChange"
+      @pageChange="onPageChange"
     />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
index 6b1c0feb7..527227dfd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
@@ -115,7 +115,7 @@ export default {
   },
   methods: {
     onClose() {
-      this.$emit('on-close');
+      this.$emit('onClose');
     },
     onChange(value) {
       this.scheduledAt = value;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
index 337fa5a79..cbe2f87f0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
@@ -81,7 +81,7 @@ export default {
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
       <EditCampaign
         :selected-campaign="selectedCampaign"
-        @on-close="hideEditPopup"
+        @onClose="hideEditPopup"
       />
     </woot-modal>
     <woot-delete-modal
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
index 84dea5bc3..e1e897398 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
@@ -101,7 +101,7 @@ export default {
   },
   methods: {
     onClose() {
-      this.$emit('on-close');
+      this.$emit('onClose');
     },
 
     async loadInboxMembers() {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
index feaeb693c..d6f1918cf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
@@ -35,7 +35,7 @@ export default {
 </script>
 
 <template>
-  <div class="flex-1 overflow-auto p-4">
+  <div class="flex-1 p-4 overflow-auto">
     <woot-button
       color-scheme="success"
       class-names="button--fixed-top"
@@ -46,7 +46,7 @@ export default {
     </woot-button>
     <Campaign />
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <AddCampaign @on-close="hideAddPopup" />
+      <AddCampaign @onClose="hideAddPopup" />
     </woot-modal>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
index d262c2e5d..0cbcc554b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
@@ -75,14 +75,14 @@ export default {
       "
     />
     <div
-      class="mt-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 mx-0 max-w-3xl"
+      class="grid max-w-3xl grid-cols-2 mx-0 mt-6 sm:grid-cols-3 lg:grid-cols-4"
     >
       <ChannelItem
         v-for="channel in channelList"
         :key="channel.key"
         :channel="channel"
         :enabled-features="enabledFeatures"
-        @channel-item-click="initChannelAuth"
+        @channelItemClick="initChannelAuth"
       />
     </div>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index cf7085ddf..bc7eb0187 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -217,8 +217,8 @@ export default {
       :reject-text="deleteRejectText"
       :confirm-value="selectedInbox.name"
       :confirm-place-holder-text="confirmPlaceHolderText"
-      @on-confirm="confirmDeletion"
-      @on-close="closeDelete"
+      @onConfirm="confirmDeletion"
+      @onClose="closeDelete"
     />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
index 0c872a6c9..31b55bc5b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
@@ -26,7 +26,7 @@ export default {
       this.$emit('update', event, type, item);
     },
     onDragEnd() {
-      this.$emit('drag-end', this.preChatFieldOptions);
+      this.$emit('dragEnd', this.preChatFieldOptions);
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
index 4fc289100..6077f40fe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
@@ -154,7 +154,7 @@ export default {
             <PreChatFields
               :pre-chat-fields="preChatFields"
               @update="handlePreChatFieldOptions"
-              @drag-end="changePreChatFieldFieldsOrder"
+              @dragEnd="changePreChatFieldFieldsOrder"
             />
           </table>
         </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
index 0e19dc864..bb89889ef 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
@@ -7,7 +7,7 @@ const props = defineProps({
     default: '',
   },
 });
-const emit = defineEmits(['on-copy']);
+const emit = defineEmits(['onCopy']);
 const inputType = ref('password');
 const toggleMasked = () => {
   inputType.value = inputType.value === 'password' ? 'text' : 'password';
@@ -18,7 +18,7 @@ const maskIcon = computed(() => {
 });
 
 const onClick = () => {
-  emit('on-copy', props.value);
+  emit('onCopy', props.value);
 };
 </script>
 <template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index 3e9badd15..54d2d6992 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -191,7 +191,7 @@ export default {
         :display-name="displayName"
         :email="email"
         :email-enabled="!globalConfig.disableUserProfileUpdate"
-        @update-user="updateProfile"
+        @updateUser="updateProfile"
       />
     </div>
 
@@ -201,7 +201,7 @@ export default {
     >
       <MessageSignature
         :message-signature="messageSignature"
-        @update-signature="updateSignature"
+        @updateSignature="updateSignature"
       />
     </FormSection>
     <FormSection
@@ -251,7 +251,7 @@ export default {
         )
       "
     >
-      <AccessToken :value="currentUser.access_token" @on-copy="onCopyToken" />
+      <AccessToken :value="currentUser.access_token" @onCopy="onCopyToken" />
     </FormSection>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
index d9fb34722..bdacb998f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
@@ -13,7 +13,7 @@ const props = defineProps({
 
 const customEditorMenuList = MESSAGE_SIGNATURE_EDITOR_MENU_OPTIONS;
 const signature = ref(props.messageSignature);
-const emit = defineEmits(['update-signature']);
+const emit = defineEmits(['updateSignature']);
 
 watch(
   () => props.messageSignature ?? '',
@@ -23,7 +23,7 @@ watch(
 );
 
 const updateSignature = () => {
-  emit('update-signature', signature.value);
+  emit('updateSignature', signature.value);
 };
 </script>
 <template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
index 640ba8c6c..2fbf8186d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
@@ -79,7 +79,7 @@ export default {
         useAlert(this.$t('PROFILE_SETTINGS.FORM.ERROR'));
         return;
       }
-      this.$emit('update-user', {
+      this.$emit('updateUser', {
         name: this.userName,
         displayName: this.userDisplayName,
         email: this.userEmail,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
index eca7e14d8..96e1ad215 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
@@ -94,7 +94,7 @@ export default {
       :show-agents-filter="false"
       :show-group-by-filter="true"
       :show-business-hours-switch="false"
-      @filter-change="onFilterChange"
+      @filterChange="onFilterChange"
     />
 
     <BotMetrics :filters="requestPayload" />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
index f56b000e1..59d446a11 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
@@ -114,7 +114,7 @@ export default {
       :show-rating-filter="true"
       :show-team-filter="isTeamsEnabled"
       :show-business-hours-switch="false"
-      @filter-change="onFilterChange"
+      @filterChange="onFilterChange"
     />
     <woot-button
       color-scheme="success"
@@ -125,6 +125,6 @@ export default {
       {{ $t('CSAT_REPORTS.DOWNLOAD') }}
     </woot-button>
     <CsatMetrics :filters="requestPayload" />
-    <CsatTable :page-index="pageIndex" @page-change="onPageNumberChange" />
+    <CsatTable :page-index="pageIndex" @pageChange="onPageNumberChange" />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
index 730a3ccc8..9521f18ef 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
@@ -119,7 +119,7 @@ export default {
     <ReportFilterSelector
       :show-agents-filter="false"
       :show-group-by-filter="true"
-      @filter-change="onFilterChange"
+      @filterChange="onFilterChange"
     />
     <ReportContainer :group-by="groupBy" />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
index ca43f3c9f..8fc8f8d7e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
@@ -119,8 +119,8 @@ export default {
 };
 </script>
 <template>
-  <div class="flex-1 overflow-auto p-4">
-    <div class="flex flex-col md:flex-row items-center">
+  <div class="flex-1 p-4 overflow-auto">
+    <div class="flex flex-col items-center md:flex-row">
       <div
         class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
       >
@@ -134,7 +134,7 @@ export default {
           <div
             v-for="(metric, name, index) in conversationMetrics"
             :key="index"
-            class="metric-content flex-1 min-w-0"
+            class="flex-1 min-w-0 metric-content"
           >
             <h3 class="heading">
               {{ name }}
@@ -148,7 +148,7 @@ export default {
           <div
             v-for="(metric, name, index) in agentStatusMetrics"
             :key="index"
-            class="metric-content flex-1 min-w-0"
+            class="flex-1 min-w-0 metric-content"
           >
             <h3 class="heading">
               {{ name }}
@@ -158,7 +158,7 @@ export default {
         </MetricCard>
       </div>
     </div>
-    <div class="max-w-full flex flex-wrap flex-row ml-auto mr-auto">
+    <div class="flex flex-row flex-wrap max-w-full ml-auto mr-auto">
       <MetricCard :header="$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.HEADER')">
         <template #control>
           <woot-button
@@ -177,14 +177,14 @@ export default {
         />
       </MetricCard>
     </div>
-    <div class="max-w-full flex flex-wrap flex-row ml-auto mr-auto">
+    <div class="flex flex-row flex-wrap max-w-full ml-auto mr-auto">
       <MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.HEADER')">
         <AgentTable
           :agents="agents"
           :agent-metrics="agentConversationMetric"
           :page-index="pageIndex"
           :is-loading="uiFlags.isFetchingAgentConversationMetric"
-          @page-change="onPageNumberChange"
+          @pageChange="onPageNumberChange"
         />
       </MetricCard>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
index d61020d86..4a5baf8a0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
@@ -77,7 +77,7 @@ export default {
 </script>
 <template>
   <div class="flex flex-col flex-1 gap-6 px-4 pt-4 overflow-auto">
-    <SLAReportFilters @filter-change="onFilterChange" />
+    <SLAReportFilters @filterChange="onFilterChange" />
     <woot-button
       color-scheme="success"
       class-names="button--fixed-top"
@@ -98,7 +98,7 @@ export default {
         :is-loading="uiFlags.isFetching"
         :current-page="Number(slaMeta.currentPage)"
         :total-count="Number(slaMeta.count)"
-        @page-change="onPageChange"
+        @pageChange="onPageChange"
       />
     </div>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
index aabc151ff..fd0668629 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
@@ -121,7 +121,7 @@ export default {
   },
   methods: {
     onPageNumberChange(pageIndex) {
-      this.$emit('page-change', pageIndex);
+      this.$emit('pageChange', pageIndex);
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
index c9e94dc7b..7b4cd5355 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
@@ -130,7 +130,7 @@ export default {
         selectedTeam,
         selectedRating,
       } = this;
-      this.$emit('filter-change', {
+      this.$emit('filterChange', {
         from,
         to,
         groupBy,
@@ -198,27 +198,27 @@ export default {
         v-if="showGroupByFilter && isGroupByPossible"
         :valid-group-options="validGroupOptions"
         :selected-option="selectedGroupByFilter"
-        @on-grouping-change="onGroupingChange"
+        @onGroupingChange="onGroupingChange"
       />
       <ReportsFiltersAgents
         v-if="showAgentsFilter"
-        @agents-filter-selection="handleAgentsFilterSelection"
+        @agentsFilterSelection="handleAgentsFilterSelection"
       />
       <ReportsFiltersLabels
         v-if="showLabelsFilter"
-        @labels-filter-selection="handleLabelsFilterSelection"
+        @labelsFilterSelection="handleLabelsFilterSelection"
       />
       <ReportsFiltersTeams
         v-if="showTeamFilter"
-        @team-filter-selection="handleTeamFilterSelection"
+        @teamFilterSelection="handleTeamFilterSelection"
       />
       <ReportsFiltersInboxes
         v-if="showInboxFilter"
-        @inbox-filter-selection="handleInboxFilterSelection"
+        @inboxFilterSelection="handleInboxFilterSelection"
       />
       <ReportsFiltersRatings
         v-if="showRatingFilter"
-        @rating-filter-selection="handleRatingFilterSelection"
+        @ratingFilterSelection="handleRatingFilterSelection"
       />
     </div>
     <div v-if="showBusinessHoursSwitch" class="flex items-center">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue
index 610d5ea8b..fc6a37b17 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue
@@ -18,7 +18,7 @@ export default {
   },
   methods: {
     handleInput() {
-      this.$emit('agents-filter-selection', this.selectedOptions);
+      this.$emit('agentsFilterSelection', this.selectedOptions);
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue
index 84a07310b..7dd2119af 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue
@@ -1,8 +1,6 @@
 <script>
 import { GROUP_BY_OPTIONS } from '../../constants';
 
-const EVENT_NAME = 'on-grouping-change';
-
 export default {
   name: 'ReportsFiltersDateGroupBy',
   props: {
@@ -41,7 +39,7 @@ export default {
   },
   methods: {
     changeFilterSelection(selectedFilter) {
-      this.groupByOptions = this.$emit(EVENT_NAME, selectedFilter);
+      this.groupByOptions = this.$emit('onGroupingChange', selectedFilter);
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue
index 6d5dae41f..19706c716 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue
@@ -18,7 +18,7 @@ export default {
   },
   methods: {
     handleInput() {
-      this.$emit('inbox-filter-selection', this.selectedOption);
+      this.$emit('inboxFilterSelection', this.selectedOption);
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue
index 5809a1358..08e909a19 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue
@@ -18,7 +18,7 @@ export default {
   },
   methods: {
     handleInput() {
-      this.$emit('labels-filter-selection', this.selectedOption);
+      this.$emit('labelsFilterSelection', this.selectedOption);
     },
   },
 };
@@ -40,7 +40,7 @@ export default {
         <div class="flex items-center gap-2">
           <div
             :style="{ backgroundColor: props.option.color }"
-            class="rounded-full h-5 w-5"
+            class="w-5 h-5 rounded-full"
           />
           <span class="reports-option__desc">
             <span class="my-0 text-slate-800 dark:text-slate-75">
@@ -53,7 +53,7 @@ export default {
         <div class="flex items-center gap-2">
           <div
             :style="{ backgroundColor: props.option.color }"
-            class="rounded-full h-5 w-5 flex-shrink-0 border border-solid border-slate-100 dark:border-slate-800"
+            class="flex-shrink-0 w-5 h-5 border border-solid rounded-full border-slate-100 dark:border-slate-800"
           />
           <span class="reports-option__desc">
             <span class="my-0 text-slate-800 dark:text-slate-75">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Ratings.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Ratings.vue
index 4988dcabe..dc09b0744 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Ratings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Ratings.vue
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     handleInput(selectedRating) {
-      this.$emit('rating-filter-selection', selectedRating);
+      this.$emit('ratingFilterSelection', selectedRating);
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Teams.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Teams.vue
index a5bb458bd..e1c6088ad 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Teams.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Teams.vue
@@ -18,7 +18,7 @@ export default {
   },
   methods: {
     handleInput() {
-      this.$emit('team-filter-selection', this.selectedOption);
+      this.$emit('teamFilterSelection', this.selectedOption);
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
index a209f92b2..5779fa5af 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
@@ -102,7 +102,7 @@ export default {
       this.currentSelectedGroupByFilter = this.selectedGroupByFilter;
     },
     businessHoursSelected() {
-      this.$emit('business-hours-toggle', this.businessHoursSelected);
+      this.$emit('businessHoursToggle', this.businessHoursSelected);
     },
   },
   mounted() {
@@ -110,7 +110,7 @@ export default {
   },
   methods: {
     onDateRangeChange() {
-      this.$emit('date-range-change', {
+      this.$emit('dateRangeChange', {
         from: this.from,
         to: this.to,
         groupBy: this.groupBy,
@@ -127,26 +127,26 @@ export default {
       this.onDateRangeChange();
     },
     changeFilterSelection() {
-      this.$emit('filter-change', this.currentSelectedFilter);
+      this.$emit('filterChange', this.currentSelectedFilter);
     },
     onChange(value) {
       this.customDateRange = value;
       this.onDateRangeChange();
     },
     changeGroupByFilterSelection() {
-      this.$emit('group-by-filter-change', this.currentSelectedGroupByFilter);
+      this.$emit('groupByFilterChange', this.currentSelectedGroupByFilter);
     },
   },
 };
 </script>
 <template>
   <div class="flex flex-col md:flex-row">
-    <div class="flex items-center w-full flex-col md:flex-row">
+    <div class="flex flex-col items-center w-full md:flex-row">
       <div
         v-if="type === 'agent'"
         class="md:w-[240px] w-full multiselect-wrap--small"
       >
-        <p class="text-xs mb-2 font-medium">
+        <p class="mb-2 text-xs font-medium">
           {{ $t('AGENT_REPORTS.FILTER_DROPDOWN_LABEL') }}
         </p>
         <multiselect
@@ -193,7 +193,7 @@ export default {
         v-else-if="type === 'label'"
         class="md:w-[240px] w-full multiselect-wrap--small"
       >
-        <p class="text-xs mb-2 font-medium">
+        <p class="mb-2 text-xs font-medium">
           {{ $t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL') }}
         </p>
         <multiselect
@@ -207,10 +207,10 @@ export default {
           @input="changeFilterSelection"
         >
           <template slot="singleLabel" slot-scope="props">
-            <div class="flex gap-2 items-center">
+            <div class="flex items-center gap-2">
               <div
                 :style="{ backgroundColor: props.option.color }"
-                class="rounded-full h-5 w-5"
+                class="w-5 h-5 rounded-full"
               />
               <span class="reports-option__desc">
                 <span class="my-0 text-slate-800 dark:text-slate-75">
@@ -223,7 +223,7 @@ export default {
             <div class="flex items-center gap-2">
               <div
                 :style="{ backgroundColor: props.option.color }"
-                class="rounded-full h-5 w-5 flex-shrink-0 border border-solid border-slate-100 dark:border-slate-800"
+                class="flex-shrink-0 w-5 h-5 border border-solid rounded-full border-slate-100 dark:border-slate-800"
               />
               <span class="reports-option__desc">
                 <span class="my-0 text-slate-800 dark:text-slate-75">
@@ -235,7 +235,7 @@ export default {
         </multiselect>
       </div>
       <div v-else class="md:w-[240px] w-full multiselect-wrap--small">
-        <p class="text-xs mb-2 font-medium">
+        <p class="mb-2 text-xs font-medium">
           <template v-if="type === 'inbox'">
             {{ $t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL') }}
           </template>
@@ -262,7 +262,7 @@ export default {
         />
       </div>
       <div class="mx-1 md:w-[240px] w-full multiselect-wrap--small">
-        <p class="text-xs mb-2 font-medium">
+        <p class="mb-2 text-xs font-medium">
           {{ $t('REPORT.DURATION_FILTER_LABEL') }}
         </p>
         <multiselect
@@ -280,7 +280,7 @@ export default {
         />
       </div>
       <div v-if="isDateRangeSelected" class="">
-        <p class="text-xs mb-2 font-medium">
+        <p class="mb-2 text-xs font-medium">
           {{ $t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER') }}
         </p>
         <WootDateRangePicker
@@ -295,7 +295,7 @@ export default {
         v-if="notLast7Days"
         class="mx-1 md:w-[240px] w-full multiselect-wrap--small"
       >
-        <p class="text-xs mb-2 font-medium">
+        <p class="mb-2 text-xs font-medium">
           {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
         </p>
         <multiselect
@@ -311,7 +311,7 @@ export default {
       </div>
     </div>
     <div class="flex items-center my-2">
-      <span class="text-sm mx-2 whitespace-nowrap">
+      <span class="mx-2 text-sm whitespace-nowrap">
         {{ $t('REPORT.BUSINESS_HOURS') }}
       </span>
       <span>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue
index 849b6e25c..ad37910cb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue
@@ -108,13 +108,13 @@ export default {
       const { type, id, name } = item;
       const filterKey = getFilterType(type, 'typeToKey');
       this.appliedFilters[filterKey] = type === 'labels' ? name : id;
-      this.$emit('filter-change', this.appliedFilters);
+      this.$emit('filterChange', this.appliedFilters);
       this.resetDropdown();
     },
     removeFilter(type) {
       const filterKey = getFilterType(type, 'typeToKey');
       this.appliedFilters[filterKey] = null;
-      this.$emit('filter-change', this.appliedFilters);
+      this.$emit('filterChange', this.appliedFilters);
     },
     clearAllFilters() {
       this.appliedFilters = {
@@ -124,7 +124,7 @@ export default {
         sla_policy_id: null,
         label_list: null,
       };
-      this.$emit('filter-change', this.appliedFilters);
+      this.$emit('filterChange', this.appliedFilters);
       this.resetDropdown();
     },
     showDropdown() {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
index af6f42076..96495f722 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
@@ -38,7 +38,7 @@ export default {
       const fromDate = subDays(new Date(), offset);
       const from = getUnixStartOfDay(fromDate);
       const to = getUnixEndOfDay(new Date());
-      this.$emit('filter-change', {
+      this.$emit('filterChange', {
         from,
         to,
         ...this.selectedGroupByFilter,
@@ -46,7 +46,7 @@ export default {
     },
     emitChange() {
       const { from, to } = this;
-      this.$emit('filter-change', {
+      this.$emit('filterChange', {
         from,
         to,
         ...this.selectedGroupByFilter,
@@ -66,6 +66,6 @@ export default {
 <template>
   <div class="flex flex-col flex-wrap w-full gap-3 md:flex-row">
     <woot-date-picker @dateRangeChanged="onDateRangeChange" />
-    <SLAFilter @filter-change="emitFilterChange" />
+    <SLAFilter @filterChange="emitFilterChange" />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
index 7fd9fe957..542ba78e6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
@@ -47,7 +47,7 @@ export default {
   },
   methods: {
     onPageChange(page) {
-      this.$emit('page-change', page);
+      this.$emit('pageChange', page);
     },
   },
 };
@@ -78,7 +78,7 @@ export default {
 
       <div
         v-if="isLoading"
-        class="flex items-center rounded-b-xl justify-center h-32 bg-white dark:bg-slate-900"
+        class="flex items-center justify-center h-32 bg-white rounded-b-xl dark:bg-slate-900"
       >
         <Spinner />
         <span>{{ $t('SLA_REPORTS.LOADING') }}</span>
@@ -95,7 +95,7 @@ export default {
       </div>
       <div
         v-else
-        class="flex items-center justify-center rounded-b-xl h-32 bg-white dark:bg-slate-900"
+        class="flex items-center justify-center h-32 bg-white rounded-b-xl dark:bg-slate-900"
       >
         {{ $t('SLA_REPORTS.NO_RECORDS') }}
       </div>
@@ -105,7 +105,7 @@ export default {
       :current-page="currentPage"
       :total-count="totalCount"
       :page-size="pageSize"
-      @page-change="onPageChange"
+      @pageChange="onPageChange"
     />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
index 67293c230..2d5e52462 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
@@ -196,10 +196,10 @@ export default {
       :filter-items-list="filterItemsList"
       :group-by-filter-items-list="groupByfilterItemsList"
       :selected-group-by-filter="selectedGroupByFilter"
-      @date-range-change="onDateRangeChange"
-      @filter-change="onFilterChange"
-      @group-by-filter-change="onGroupByFilterChange"
-      @business-hours-toggle="onBusinessHoursToggle"
+      @dateRangeChange="onDateRangeChange"
+      @filterChange="onFilterChange"
+      @groupByFilterChange="onGroupByFilterChange"
+      @businessHoursToggle="onBusinessHoursToggle"
     />
     <ReportContainer v-if="filterItemsList.length" :group-by="groupBy" />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
index 7f89ce17e..8028dc6d5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
@@ -68,7 +68,7 @@ export default {
                 status={row.status}
               />
               <div class="user-block">
-                <h6 class="title overflow-hidden whitespace-nowrap text-ellipsis">
+                <h6 class="overflow-hidden title whitespace-nowrap text-ellipsis">
                   {row.agent}
                 </h6>
                 <span class="sub-title">{row.email}</span>
@@ -99,7 +99,7 @@ export default {
   },
   methods: {
     onPageNumberChange(pageIndex) {
-      this.$emit('page-change', pageIndex);
+      this.$emit('pageChange', pageIndex);
     },
     getAgentInformation(id) {
       return this.agents?.find(agent => agent.id === Number(id));
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersAgents.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersAgents.spec.js
index 2964bf24d..56b4fe186 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersAgents.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersAgents.spec.js
@@ -43,8 +43,8 @@ describe('ReportsFiltersAgents.vue', () => {
 
     wrapper.vm.handleInput();
 
-    expect(wrapper.emitted('agents-filter-selection')).toBeTruthy();
-    expect(wrapper.emitted('agents-filter-selection')[0]).toEqual([
+    expect(wrapper.emitted('agentsFilterSelection')).toBeTruthy();
+    expect(wrapper.emitted('agentsFilterSelection')[0]).toEqual([
       selectedAgents,
     ]);
   });
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateGroupBy.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateGroupBy.spec.js
index bbe93beb7..f25f57742 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateGroupBy.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateGroupBy.spec.js
@@ -16,8 +16,8 @@ describe('ReportsFiltersDateGroupBy.vue', () => {
     const selectedFilter = GROUP_BY_OPTIONS.DAY;
     wrapper.vm.changeFilterSelection(selectedFilter);
 
-    expect(wrapper.emitted('on-grouping-change')).toBeTruthy();
-    expect(wrapper.emitted('on-grouping-change')[0]).toEqual([selectedFilter]);
+    expect(wrapper.emitted('onGroupingChange')).toBeTruthy();
+    expect(wrapper.emitted('onGroupingChange')[0]).toEqual([selectedFilter]);
   });
 
   it('updates currentSelectedFilter when selectedOption is changed', async () => {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersInboxes.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersInboxes.spec.js
index 83e4b222c..50a87e979 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersInboxes.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersInboxes.spec.js
@@ -58,9 +58,7 @@ describe('ReportsFiltersInboxes.vue', () => {
 
     wrapper.vm.handleInput();
 
-    expect(wrapper.emitted('inbox-filter-selection')).toBeTruthy();
-    expect(wrapper.emitted('inbox-filter-selection')[0]).toEqual([
-      selectedInbox,
-    ]);
+    expect(wrapper.emitted('inboxFilterSelection')).toBeTruthy();
+    expect(wrapper.emitted('inboxFilterSelection')[0]).toEqual([selectedInbox]);
   });
 });
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersLabels.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersLabels.spec.js
index 03fadac5f..cf5fe6ebd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersLabels.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersLabels.spec.js
@@ -58,8 +58,8 @@ describe('ReportsFiltersLabels.vue', () => {
 
     wrapper.vm.handleInput();
 
-    expect(wrapper.emitted('labels-filter-selection')).toBeTruthy();
-    expect(wrapper.emitted('labels-filter-selection')[0]).toEqual([
+    expect(wrapper.emitted('labelsFilterSelection')).toBeTruthy();
+    expect(wrapper.emitted('labelsFilterSelection')[0]).toEqual([
       selectedLabel,
     ]);
   });
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersRatings.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersRatings.spec.js
index 5b650cd99..870aa5a50 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersRatings.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersRatings.spec.js
@@ -23,8 +23,8 @@ describe('ReportFiltersRatings.vue', () => {
 
     wrapper.vm.handleInput(selectedRating);
 
-    expect(wrapper.emitted('rating-filter-selection')).toBeTruthy();
-    expect(wrapper.emitted('rating-filter-selection')[0]).toEqual([
+    expect(wrapper.emitted('ratingFilterSelection')).toBeTruthy();
+    expect(wrapper.emitted('ratingFilterSelection')[0]).toEqual([
       selectedRating,
     ]);
   });
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersTeams.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersTeams.spec.js
index ecfec4e1e..aa1aba637 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersTeams.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersTeams.spec.js
@@ -54,8 +54,8 @@ describe('ReportsFiltersTeams.vue', () => {
     });
     wrapper.setData({ selectedOption: { id: 1, name: 'Team 1' } });
     wrapper.vm.handleInput();
-    expect(wrapper.emitted('team-filter-selection')).toBeTruthy();
-    expect(wrapper.emitted('team-filter-selection')[0]).toEqual([
+    expect(wrapper.emitted('teamFilterSelection')).toBeTruthy();
+    expect(wrapper.emitted('teamFilterSelection')[0]).toEqual([
       { id: 1, name: 'Team 1' },
     ]);
   });
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
index bcd3a356f..320d069a3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
@@ -133,7 +133,7 @@ export default {
       />
       <SLAEmptyState
         v-else-if="!records.length"
-        @primary-action="openAddPopup"
+        @primaryAction="openAddPopup"
       />
       <div v-else class="flex flex-col w-full h-full gap-3">
         <SLAListItem
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue
index 29b655e5e..b969a8c37 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue
@@ -1,8 +1,8 @@
 <script setup>
 import BaseEmptyState from './BaseEmptyState.vue';
 
-const emit = defineEmits(['primary-action']);
-const primaryAction = () => emit('primary-action');
+const emit = defineEmits(['primaryAction']);
+const primaryAction = () => emit('primaryAction');
 </script>
 
 <template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
index cd445d6b1..238c3905c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
@@ -147,8 +147,8 @@ export default {
       :reject-text="deleteRejectText"
       :confirm-value="selectedTeam.name"
       :confirm-place-holder-text="confirmPlaceHolderText"
-      @on-confirm="confirmDeletion"
-      @on-close="closeDelete"
+      @onConfirm="confirmDeletion"
+      @onClose="closeDelete"
     />
   </div>
 </template>
diff --git a/app/javascript/shared/components/ResizableTextArea.vue b/app/javascript/shared/components/ResizableTextArea.vue
index 86c26c9b8..9849c163e 100644
--- a/app/javascript/shared/components/ResizableTextArea.vue
+++ b/app/javascript/shared/components/ResizableTextArea.vue
@@ -44,10 +44,10 @@ export default {
     return {
       typingIndicator: createTypingIndicator(
         () => {
-          this.$emit('typing-on');
+          this.$emit('typingOn');
         },
         () => {
-          this.$emit('typing-off');
+          this.$emit('typingOff');
         },
         TYPING_INDICATOR_IDLE_TIME
       ),
diff --git a/app/javascript/v3/views/auth/signup/Index.vue b/app/javascript/v3/views/auth/signup/Index.vue
index d1c0bf09e..75ae10e9a 100644
--- a/app/javascript/v3/views/auth/signup/Index.vue
+++ b/app/javascript/v3/views/auth/signup/Index.vue
@@ -33,7 +33,7 @@ export default {
 </script>
 
 <template>
-  <div class="h-full w-full dark:bg-slate-900">
+  <div class="w-full h-full dark:bg-slate-900">
     <div v-show="!isLoading" class="flex h-full">
       <div
         class="flex-1 min-h-[640px] inline-flex items-center h-full justify-center overflow-auto py-6"
@@ -43,22 +43,22 @@ export default {
             <img
               :src="globalConfig.logo"
               :alt="globalConfig.installationName"
-              class="h-8 w-auto block dark:hidden"
+              class="block w-auto h-8 dark:hidden"
             />
             <img
               v-if="globalConfig.logoDark"
               :src="globalConfig.logoDark"
               :alt="globalConfig.installationName"
-              class="h-8 w-auto hidden dark:block"
+              class="hidden w-auto h-8 dark:block"
             />
             <h2
-              class="mb-7 mt-6 text-left text-3xl font-medium text-slate-900 dark:text-woot-50"
+              class="mt-6 text-3xl font-medium text-left mb-7 text-slate-900 dark:text-woot-50"
             >
               {{ $t('REGISTER.TRY_WOOT') }}
             </h2>
           </div>
           <SignupForm />
-          <div class="text-sm text-slate-800 dark:text-woot-50 px-1">
+          <div class="px-1 text-sm text-slate-800 dark:text-woot-50">
             <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}</span>
             <router-link class="text-link" to="/app/login">
               {{
@@ -74,12 +74,12 @@ export default {
       <Testimonials
         v-if="isAChatwootInstance"
         class="flex-1"
-        @resize-containers="resizeContainers"
+        @resizeContainers="resizeContainers"
       />
     </div>
     <div
       v-show="isLoading"
-      class="flex items-center justify-center h-full w-full"
+      class="flex items-center justify-center w-full h-full"
     >
       <Spinner color-scheme="primary" size="" />
     </div>
diff --git a/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue b/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
index 96e716dfb..718efc7ef 100644
--- a/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
+++ b/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
@@ -17,7 +17,7 @@ export default {
       } catch (error) {
         // Ignoring the error as the UI wouldn't break
       } finally {
-        this.$emit('resize-containers', !!this.testimonials.length);
+        this.$emit('resizeContainers', !!this.testimonials.length);
       }
     },
   },
@@ -27,21 +27,21 @@ export default {
 <template>
   <div
     v-if="testimonials.length"
-    class="hidden bg-woot-400 dark:bg-woot-800 overflow-hidden relative xl:flex flex-1"
+    class="relative flex-1 hidden overflow-hidden bg-woot-400 dark:bg-woot-800 xl:flex"
   >
     <img
       src="/assets/images/auth/top-left.svg"
-      class="left-0 absolute h-40 w-40 top-0"
+      class="absolute top-0 left-0 w-40 h-40"
     />
     <img
       src="/assets/images/auth/bottom-right.svg"
-      class="right-0 absolute h-40 w-40 bottom-0"
+      class="absolute bottom-0 right-0 w-40 h-40"
     />
     <img
       src="/assets/images/auth/auth--bg.svg"
       class="h-[96%] left-[6%] top-[8%] w-[96%] absolute"
     />
-    <div class="flex items-center justify-center flex-col h-full w-full z-50">
+    <div class="z-50 flex flex-col items-center justify-center w-full h-full">
       <div class="flex items-start justify-center p-6">
         <TestimonialCard
           v-for="(testimonial, index) in testimonials"
diff --git a/app/javascript/widget/components/ArticleCategoryCard.vue b/app/javascript/widget/components/ArticleCategoryCard.vue
index 4ed3bdc3f..989a9b0dc 100644
--- a/app/javascript/widget/components/ArticleCategoryCard.vue
+++ b/app/javascript/widget/components/ArticleCategoryCard.vue
@@ -28,14 +28,14 @@ export default {
 
 <template>
   <div>
-    <h3 class="text-sm font-medium text-slate-800 dark:text-slate-50 mb-0">
+    <h3 class="mb-0 text-sm font-medium text-slate-800 dark:text-slate-50">
       {{ title }}
     </h3>
     <ArticleList :articles="articles" @click="onArticleClick" />
     <button
-      class="inline-flex text-sm font-medium rounded-md px-2 py-1 -ml-2 leading-6 text-slate-800 dark:text-slate-50 justify-between items-center hover:bg-slate-25 dark:hover:bg-slate-800 see-articles"
+      class="inline-flex items-center justify-between px-2 py-1 -ml-2 text-sm font-medium leading-6 rounded-md text-slate-800 dark:text-slate-50 hover:bg-slate-25 dark:hover:bg-slate-800 see-articles"
       :style="{ color: widgetColor }"
-      @click="$emit('view-all')"
+      @click="$emit('viewAll')"
     >
       <span class="pr-2 text-sm">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
       <FluentIcon icon="arrow-right" size="14" />
diff --git a/app/javascript/widget/components/ArticleHero.vue b/app/javascript/widget/components/ArticleHero.vue
index 0be320f5f..b5f2fcb65 100644
--- a/app/javascript/widget/components/ArticleHero.vue
+++ b/app/javascript/widget/components/ArticleHero.vue
@@ -24,7 +24,7 @@ export default {
   <CategoryCard
     :title="$t('PORTAL.POPULAR_ARTICLES')"
     :articles="articles.slice(0, 6)"
-    @view-all="$emit('view-all')"
+    @viewAll="$emit('viewAll')"
     @view="onArticleClick"
   />
 </template>
diff --git a/app/javascript/widget/components/ChatInputWrap.vue b/app/javascript/widget/components/ChatInputWrap.vue
index 85f519660..b7576715f 100755
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/app/javascript/widget/components/ChatInputWrap.vue
@@ -140,8 +140,8 @@ export default {
       :placeholder="$t('CHAT_PLACEHOLDER')"
       class="form-input user-message-input is-focused"
       :class="inputColor"
-      @typing-off="onTypingOff"
-      @typing-on="onTypingOn"
+      @typingOff="onTypingOff"
+      @typingOn="onTypingOn"
       @focus="onFocus"
       @blur="onBlur"
     />
diff --git a/app/javascript/widget/components/TeamAvailability.vue b/app/javascript/widget/components/TeamAvailability.vue
index 7c3a8bee6..32d303348 100644
--- a/app/javascript/widget/components/TeamAvailability.vue
+++ b/app/javascript/widget/components/TeamAvailability.vue
@@ -50,7 +50,7 @@ export default {
   },
   methods: {
     startConversation() {
-      this.$emit('start-conversation');
+      this.$emit('startConversation');
       if (!this.hasConversation) {
         IFrameHelper.sendMessage({
           event: 'onEvent',
@@ -64,9 +64,9 @@ export default {
 </script>
 
 <template>
-  <div class="p-4 shadow-sm rounded-md bg-white dark:bg-slate-700">
+  <div class="p-4 bg-white rounded-md shadow-sm dark:bg-slate-700">
     <div class="flex items-center justify-between">
-      <div class="  ">
+      <div class="">
         <div class="text-sm font-medium text-slate-700 dark:text-slate-50">
           {{
             isOnline
@@ -74,14 +74,14 @@ export default {
               : $t('TEAM_AVAILABILITY.OFFLINE')
           }}
         </div>
-        <div class="text-sm mt-1 text-slate-500 dark:text-slate-100">
+        <div class="mt-1 text-sm text-slate-500 dark:text-slate-100">
           {{ replyWaitMessage }}
         </div>
       </div>
       <AvailableAgents v-if="isOnline" :agents="availableAgents" />
     </div>
     <button
-      class="inline-flex text-sm font-medium rounded-md py-1 mt-2 px-2 -ml-2 leading-6 text-slate-800 dark:text-slate-50 justify-between items-center hover:bg-slate-25 dark:hover:bg-slate-800"
+      class="inline-flex items-center justify-between px-2 py-1 mt-2 -ml-2 text-sm font-medium leading-6 rounded-md text-slate-800 dark:text-slate-50 hover:bg-slate-25 dark:hover:bg-slate-800"
       :style="{ color: widgetColor }"
       @click="startConversation"
     >
diff --git a/app/javascript/widget/views/Home.vue b/app/javascript/widget/views/Home.vue
index bf2c2a49b..87d74a9a0 100755
--- a/app/javascript/widget/views/Home.vue
+++ b/app/javascript/widget/views/Home.vue
@@ -102,19 +102,19 @@ export default {
 
 <template>
   <div
-    class="z-50 rounded-md w-full flex flex-1 flex-col"
+    class="z-50 flex flex-col flex-1 w-full rounded-md"
     :class="{ 'pb-2': showArticles, 'justify-end': !showArticles }"
   >
-    <div class="px-4 pt-4 w-full">
+    <div class="w-full px-4 pt-4">
       <TeamAvailability
         :available-agents="availableAgents"
         :has-conversation="!!conversationSize"
         :unread-count="unreadMessageCount"
-        @start-conversation="startConversation"
+        @startConversation="startConversation"
       />
     </div>
-    <div v-if="showArticles" class="px-4 py-2 w-full">
-      <div class="p-4 rounded-md bg-white dark:bg-slate-700 shadow-sm w-full">
+    <div v-if="showArticles" class="w-full px-4 py-2">
+      <div class="w-full p-4 bg-white rounded-md shadow-sm dark:bg-slate-700">
         <ArticleHero
           v-if="
             !articleUiFlags.isFetching &&
@@ -123,12 +123,12 @@ export default {
           "
           :articles="popularArticles"
           @view="openArticleInArticleViewer"
-          @view-all="viewAllArticles"
+          @viewAll="viewAllArticles"
         />
       </div>
     </div>
-    <div v-if="articleUiFlags.isFetching" class="px-4 py-2 w-full">
-      <div class="p-4 rounded-md bg-white dark:bg-slate-700 shadow-sm w-full">
+    <div v-if="articleUiFlags.isFetching" class="w-full px-4 py-2">
+      <div class="w-full p-4 bg-white rounded-md shadow-sm dark:bg-slate-700">
         <ArticleCardSkeletonLoader />
       </div>
     </div>