diff --git a/.eslintrc.js b/.eslintrc.js
index 93cffb594..79aae718b 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -43,6 +43,13 @@ module.exports = {
     'vue/component-options-name-casing': ['error', 'PascalCase'],
     'vue/custom-event-name-casing': ['error', 'camelCase'],
     'vue/define-emits-declaration': ['error'],
+    'vue/define-macros-order': [
+      'error',
+      {
+        order: ['defineProps', 'defineEmits'],
+        defineExposeLast: false,
+      },
+    ],
     'vue/max-attributes-per-line': [
       'error',
       {
diff --git a/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue b/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
index 4a3ea1387..05dc0976f 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
@@ -31,6 +31,7 @@ import CalendarMonth from './components/CalendarMonth.vue';
 import CalendarWeek from './components/CalendarWeek.vue';
 import CalendarFooter from './components/CalendarFooter.vue';
 
+const emit = defineEmits(['change']);
 const { LAST_7_DAYS, LAST_30_DAYS, CUSTOM_RANGE } = DATE_RANGE_TYPES;
 const { START_CALENDAR, END_CALENDAR } = CALENDAR_TYPES;
 const { WEEK, MONTH, YEAR } = CALENDAR_PERIODS;
@@ -54,8 +55,6 @@ const hoveredEndDate = ref(null);
 const manualStartDate = ref(selectedStartDate.value);
 const manualEndDate = ref(selectedEndDate.value);
 
-const emit = defineEmits(['change']);
-
 // Watcher will set the start and end dates based on the selected range
 watch(selectedRange, newRange => {
   if (newRange !== CUSTOM_RANGE) {
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue
index d4f56a15e..8347b7006 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue
@@ -18,6 +18,7 @@ const props = defineProps({
   endCurrentDate: Date,
 });
 
+const emit = defineEmits(['selectMonth', 'prev', 'next', 'setView']);
 const { START_CALENDAR } = CALENDAR_TYPES;
 const { MONTH, YEAR } = CALENDAR_PERIODS;
 
@@ -33,8 +34,6 @@ const activeMonthIndex = computed(() => {
   return getMonth(date);
 });
 
-const emit = defineEmits(['selectMonth', 'prev', 'next', 'setView']);
-
 const setViewMode = (type, mode) => {
   emit('setView', type, mode);
 };
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue
index 971861636..725925f07 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue
@@ -14,6 +14,8 @@ const props = defineProps({
   endCurrentDate: Date,
 });
 
+const emit = defineEmits(['selectYear']);
+
 const { START_CALENDAR } = CALENDAR_TYPES;
 
 const calculateStartYear = date => {
@@ -52,8 +54,6 @@ const onClickNext = () => {
   startYear.value = addYears(new Date(startYear.value, 0, 1), 10).getFullYear();
 };
 
-const emit = defineEmits(['selectYear']);
-
 const selectYear = year => {
   emit('selectYear', year);
 };
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue b/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
index c5ae54b6f..9a1561eb5 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
@@ -12,6 +12,8 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['open']);
+
 const formatDateRange = computed(() => {
   const startDate = props.selectedStartDate;
   const endDate = props.selectedEndDate;
@@ -39,8 +41,6 @@ const activeDateRange = computed(
   () => dateRanges.find(range => range.value === props.selectedRange).label
 );
 
-const emit = defineEmits(['open']);
-
 const openDatePicker = () => {
   emit('open');
 };
diff --git a/app/javascript/dashboard/components/widgets/TableFooterPagination.vue b/app/javascript/dashboard/components/widgets/TableFooterPagination.vue
index c68ea126c..8803ec39b 100644
--- a/app/javascript/dashboard/components/widgets/TableFooterPagination.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooterPagination.vue
@@ -17,6 +17,7 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['pageChange']);
 const hasLastPage = computed(
   () => props.currentPage === props.totalPages || props.totalPages === 1
 );
@@ -24,8 +25,6 @@ const hasFirstPage = computed(() => props.currentPage === 1);
 const hasNextPage = computed(() => props.currentPage === props.totalPages);
 const hasPrevPage = computed(() => props.currentPage === 1);
 
-const emit = defineEmits(['pageChange']);
-
 function buttonClass(hasPage) {
   if (hasPage) {
     return 'hover:!bg-slate-50 dark:hover:!bg-slate-800';
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue b/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
index 6c4ba4cb6..0a1cb9346 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
@@ -4,8 +4,6 @@ import { ref, computed } from 'vue';
 import wootConstants from 'dashboard/constants/globals';
 import SLAEventItem from './SLAEventItem.vue';
 
-const { SLA_MISS_TYPES } = wootConstants;
-
 const props = defineProps({
   slaMissedEvents: {
     type: Array,
@@ -13,6 +11,8 @@ const props = defineProps({
   },
 });
 
+const { SLA_MISS_TYPES } = wootConstants;
+
 const shouldShowAllNrts = ref(false);
 
 const frtMisses = computed(() =>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
index 9dc4a02a9..ad76878ec 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
@@ -5,10 +5,6 @@ import { ref } from 'vue';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 
-const { t } = useI18n();
-
-const emits = defineEmits(['update', 'close']);
-
 const props = defineProps({
   selectedInboxes: {
     type: Array,
@@ -32,6 +28,10 @@ const props = defineProps({
   },
 });
 
+const emits = defineEmits(['update', 'close']);
+
+const { t } = useI18n();
+
 const actions = ref([
   { icon: 'checkmark', key: 'resolved' },
   { icon: 'arrow-redo', key: 'open' },
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
index b95eb216c..ffe7d150e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
@@ -15,6 +15,8 @@ const props = defineProps({
   },
 });
 
+const emits = defineEmits(['close']);
+
 const { t } = useI18n();
 
 const selectedTabIndex = ref(0);
@@ -27,8 +29,6 @@ const title = computed(() => {
   });
 });
 
-const emits = defineEmits(['close']);
-
 const tabs = ref([
   {
     key: 0,
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
index 66d902874..8113ef29e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
@@ -4,13 +4,6 @@ import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.
 import IssueHeader from './IssueHeader.vue';
 import { computed } from 'vue';
 
-const priorityMap = {
-  1: 'Urgent',
-  2: 'High',
-  3: 'Medium',
-  4: 'Low',
-};
-
 const props = defineProps({
   issue: {
     type: Object,
@@ -24,6 +17,13 @@ const props = defineProps({
 
 const emit = defineEmits(['unlinkIssue']);
 
+const priorityMap = {
+  1: 'Urgent',
+  2: 'High',
+  3: 'Medium',
+  4: 'Low',
+};
+
 const formattedDate = computed(() => {
   const { createdAt } = props.issue;
   return format(new Date(createdAt), 'hh:mm a, MMM dd');
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue b/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue
index 9c3b886ae..3b2396a94 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue
@@ -11,10 +11,10 @@ const props = defineProps({
   },
 });
 
-const isUnlinking = inject('isUnlinking');
-
 const emit = defineEmits(['unlinkIssue']);
 
+const isUnlinking = inject('isUnlinking');
+
 const unlinkIssue = () => {
   emit('unlinkIssue');
 };
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue b/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue
index 4c77f3503..dc7c03a2f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue
@@ -3,10 +3,6 @@ import { ref, computed, defineComponent } from 'vue';
 import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
 import FilterListDropdown from 'dashboard/components/ui/Dropdown/DropdownList.vue';
 
-defineComponent({
-  name: 'SearchableDropdown',
-});
-
 const props = defineProps({
   type: { type: String, required: true },
   label: { type: String, default: null },
@@ -17,6 +13,11 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['change']);
+
+defineComponent({
+  name: 'SearchableDropdown',
+});
+
 const shouldShowDropdown = ref(false);
 
 const toggleDropdown = () => {
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
index c0e81217f..6d2c789c2 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
@@ -8,10 +8,6 @@ import CreateOrLinkIssue from './CreateOrLinkIssue.vue';
 import Issue from './Issue.vue';
 import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
 
-defineComponent({
-  name: 'Linear',
-});
-
 const props = defineProps({
   conversationId: {
     type: [Number, String],
@@ -19,6 +15,10 @@ const props = defineProps({
   },
 });
 
+defineComponent({
+  name: 'Linear',
+});
+
 const getters = useStoreGetters();
 const { t } = useI18n();
 
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
index 38e690bc2..fb62b3c94 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
@@ -15,15 +15,6 @@ import { uploadFile } from 'dashboard/helper/uploadHelper';
 import { isDomain } from 'shared/helpers/Validators';
 import SettingsLayout from './Layout/SettingsLayout.vue';
 
-const { EXAMPLE_URL } = wootConstants;
-const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
-
-const { t } = useI18n();
-
-defineComponent({
-  name: 'PortalSettingsBasicForm',
-});
-
 const props = defineProps({
   portal: {
     type: Object,
@@ -38,6 +29,16 @@ const props = defineProps({
     default: '',
   },
 });
+const emit = defineEmits(['submit', 'deleteLogo']);
+
+defineComponent({
+  name: 'PortalSettingsBasicForm',
+});
+
+const { EXAMPLE_URL } = wootConstants;
+const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
+
+const { t } = useI18n();
 
 const state = reactive({
   name: '',
@@ -97,8 +98,6 @@ const showDeleteButton = computed(() => {
   return hasValidAvatarUrl(state.logoUrl);
 });
 
-const emit = defineEmits(['submit', 'deleteLogo']);
-
 onMounted(() => {
   const portal = props.portal || {};
   state.name = portal.name || '';
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
index 7572f5b80..4049633df 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
@@ -2,20 +2,11 @@
 import { getRandomColor } from 'dashboard/helper/labelColor';
 import SettingsLayout from './Layout/SettingsLayout.vue';
 import wootConstants from 'dashboard/constants/globals';
-const { EXAMPLE_URL } = wootConstants;
-
 import { useVuelidate } from '@vuelidate/core';
 import { url } from '@vuelidate/validators';
 
 import { defineComponent, reactive, computed, onMounted } from 'vue';
 import { useI18n } from 'dashboard/composables/useI18n';
-
-defineComponent({
-  name: 'PortalSettingsCustomizationForm',
-});
-
-const { t } = useI18n();
-
 const props = defineProps({
   portal: {
     type: Object,
@@ -29,6 +20,14 @@ const props = defineProps({
 
 const emit = defineEmits(['submit']);
 
+defineComponent({
+  name: 'PortalSettingsCustomizationForm',
+});
+
+const { t } = useI18n();
+
+const { EXAMPLE_URL } = wootConstants;
+
 const state = reactive({
   color: getRandomColor(),
   pageTitle: '',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue
index ae6676ede..6c8947bfa 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue
@@ -6,8 +6,6 @@ import microsoftClient from 'dashboard/api/channel/microsoftClient';
 import { useI18n } from 'dashboard/composables/useI18n';
 import { useAlert } from 'dashboard/composables';
 
-const { t } = useI18n();
-
 const props = defineProps({
   inbox: {
     type: Object,
@@ -15,6 +13,8 @@ const props = defineProps({
   },
 });
 
+const { t } = useI18n();
+
 const isRequestingAuthorization = ref(false);
 
 async function requestAuthorization() {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue
index 5444ecf75..ddc6545f6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue
@@ -13,10 +13,10 @@ const props = defineProps({
   },
 });
 
-const alertEvents = ALERT_EVENTS;
-
 const emit = defineEmits(['update']);
 
+const alertEvents = ALERT_EVENTS;
+
 const selectedValue = computed({
   get: () => props.value,
   set: value => {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
index 541383ee4..d97356854 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
@@ -14,6 +14,8 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['change']);
+
 const alertTones = computed(() => [
   {
     value: 'ding',
@@ -25,8 +27,6 @@ const alertTones = computed(() => [
   },
 ]);
 
-const emit = defineEmits(['change']);
-
 const selectedValue = computed({
   get: () => props.value,
   set: value => {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
index bdacb998f..a0f830b41 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
@@ -11,10 +11,9 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['updateSignature']);
 const customEditorMenuList = MESSAGE_SIGNATURE_EDITOR_MENU_OPTIONS;
 const signature = ref(props.messageSignature);
-const emit = defineEmits(['updateSignature']);
-
 watch(
   () => props.messageSignature ?? '',
   newValue => {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue
index 6b3ad1833..e58d90a59 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue
@@ -33,6 +33,8 @@ defineProps({
   },
 });
 
+const emit = defineEmits(['toggleDropdown', 'addFilter', 'closeDropdown']);
+
 const hoveredItemId = ref(null);
 
 const showSubMenu = id => {
@@ -45,7 +47,6 @@ const hideSubMenu = () => {
 
 const isHovered = id => hoveredItemId.value === id;
 
-const emit = defineEmits(['toggleDropdown', 'addFilter', 'closeDropdown']);
 const toggleDropdown = () => emit('toggleDropdown');
 const addFilter = item => {
   emit('addFilter', item);
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
index 6f28dabb5..f31ddcd59 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
@@ -9,7 +9,6 @@ import { getQuantileIntervals } from '@chatwoot/utils';
 import { groupHeatmapByDay } from 'helpers/ReportsDataHelper';
 import { useI18n } from 'dashboard/composables/useI18n';
 
-const { t } = useI18n();
 const props = defineProps({
   heatData: {
     type: Array,
@@ -20,7 +19,7 @@ const props = defineProps({
     default: false,
   },
 });
-
+const { t } = useI18n();
 const processedData = computed(() => {
   return groupHeatmapByDay(props.heatData);
 });
diff --git a/app/javascript/v3/components/Form/Button.vue b/app/javascript/v3/components/Form/Button.vue
index aaeac9cc5..bcc3bf8e5 100644
--- a/app/javascript/v3/components/Form/Button.vue
+++ b/app/javascript/v3/components/Form/Button.vue
@@ -27,6 +27,8 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['click']);
+
 const attrs = useAttrs();
 
 const baseClasses = {
@@ -72,8 +74,6 @@ const sizeClass = computed(() => {
 
 const buttonClasses = computed(() => [colorClass.value, sizeClass.value]);
 
-const emit = defineEmits(['click']);
-
 const onClick = () => {
   if (props.disabled) {
     return;
diff --git a/app/javascript/v3/components/Form/InitialsAvatar.vue b/app/javascript/v3/components/Form/InitialsAvatar.vue
index b6ce03f53..ad427acaf 100644
--- a/app/javascript/v3/components/Form/InitialsAvatar.vue
+++ b/app/javascript/v3/components/Form/InitialsAvatar.vue
@@ -1,16 +1,6 @@
 <script setup>
 import { computed } from 'vue';
 import { userInitial } from 'v3/helpers/CommonHelper';
-const colors = {
-  1: 'bg-ash-200 text-ash-900',
-  2: 'bg-amber-200 text-amber-900',
-  3: 'bg-pink-100 text-pink-800',
-  4: 'bg-purple-100 text-purple-800',
-  5: 'bg-indigo-100 text-indigo-800',
-  6: 'bg-grass-100 text-grass-800',
-  7: 'bg-mint-100 text-mint-800',
-  8: 'bg-orange-100 text-orange-800',
-};
 const props = defineProps({
   name: {
     type: String,
@@ -21,6 +11,16 @@ const props = defineProps({
     default: 72,
   },
 });
+const colors = {
+  1: 'bg-ash-200 text-ash-900',
+  2: 'bg-amber-200 text-amber-900',
+  3: 'bg-pink-100 text-pink-800',
+  4: 'bg-purple-100 text-purple-800',
+  5: 'bg-indigo-100 text-indigo-800',
+  6: 'bg-grass-100 text-grass-800',
+  7: 'bg-mint-100 text-mint-800',
+  8: 'bg-orange-100 text-orange-800',
+};
 const style = computed(() => ({
   fontSize: `${Math.floor(props.size / 2.5)}px`,
 }));