diff --git a/backend/Dockerfile b/backend/Dockerfile
index cf34877..4deb290 100644
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -7,6 +7,7 @@ RUN apk add --no-cache curl jq
 COPY package*.json ./
 COPY prisma ./prisma
 RUN npm ci
+RUN npx prisma generate
 
 COPY . .
 
diff --git a/frontend/app/pages/calendar-zoom-lab.vue b/frontend/app/pages/calendar-zoom-lab.vue
deleted file mode 100644
index a43aae3..0000000
--- a/frontend/app/pages/calendar-zoom-lab.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import CrmCalendarZoomCanvasLab from "~~/app/components/workspace/calendar/lab/CrmCalendarZoomCanvasLab.vue";
-</script>
-
-<template>
-  <main class="h-dvh w-full bg-base-200/40 p-2">
-    <CrmCalendarZoomCanvasLab />
-  </main>
-</template>
diff --git a/frontend/app/pages/calendar/[view]/[cursor].vue b/frontend/app/pages/calendar/[view]/[cursor].vue
deleted file mode 100644
index 82cba6d..0000000
--- a/frontend/app/pages/calendar/[view]/[cursor].vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import CrmWorkspaceApp from "~~/app/components/workspace/CrmWorkspaceApp.vue";
-</script>
-
-<template>
-  <CrmWorkspaceApp />
-</template>
diff --git a/frontend/app/pages/calendar/event/[eventId].vue b/frontend/app/pages/calendar/event/[eventId].vue
deleted file mode 100644
index 82cba6d..0000000
--- a/frontend/app/pages/calendar/event/[eventId].vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import CrmWorkspaceApp from "~~/app/components/workspace/CrmWorkspaceApp.vue";
-</script>
-
-<template>
-  <CrmWorkspaceApp />
-</template>
diff --git a/frontend/app/pages/changes/[changeSetId]/index.vue b/frontend/app/pages/changes/[changeSetId]/index.vue
deleted file mode 100644
index 82cba6d..0000000
--- a/frontend/app/pages/changes/[changeSetId]/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import CrmWorkspaceApp from "~~/app/components/workspace/CrmWorkspaceApp.vue";
-</script>
-
-<template>
-  <CrmWorkspaceApp />
-</template>
diff --git a/frontend/app/pages/changes/[changeSetId]/step/[step].vue b/frontend/app/pages/changes/[changeSetId]/step/[step].vue
deleted file mode 100644
index 82cba6d..0000000
--- a/frontend/app/pages/changes/[changeSetId]/step/[step].vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import CrmWorkspaceApp from "~~/app/components/workspace/CrmWorkspaceApp.vue";
-</script>
-
-<template>
-  <CrmWorkspaceApp />
-</template>
diff --git a/frontend/app/pages/chat/[conversationId].vue b/frontend/app/pages/chat/[conversationId].vue
deleted file mode 100644
index 82cba6d..0000000
--- a/frontend/app/pages/chat/[conversationId].vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import CrmWorkspaceApp from "~~/app/components/workspace/CrmWorkspaceApp.vue";
-</script>
-
-<template>
-  <CrmWorkspaceApp />
-</template>
diff --git a/frontend/app/pages/contact/[contactId].vue b/frontend/app/pages/contact/[contactId].vue
deleted file mode 100644
index 82cba6d..0000000
--- a/frontend/app/pages/contact/[contactId].vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import CrmWorkspaceApp from "~~/app/components/workspace/CrmWorkspaceApp.vue";
-</script>
-
-<template>
-  <CrmWorkspaceApp />
-</template>
diff --git a/frontend/app/pages/deal/[dealId].vue b/frontend/app/pages/deal/[dealId].vue
deleted file mode 100644
index 82cba6d..0000000
--- a/frontend/app/pages/deal/[dealId].vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import CrmWorkspaceApp from "~~/app/components/workspace/CrmWorkspaceApp.vue";
-</script>
-
-<template>
-  <CrmWorkspaceApp />
-</template>
diff --git a/frontend/app/pages/documents/[documentId].vue b/frontend/app/pages/documents/[documentId].vue
deleted file mode 100644
index 82cba6d..0000000
--- a/frontend/app/pages/documents/[documentId].vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import CrmWorkspaceApp from "~~/app/components/workspace/CrmWorkspaceApp.vue";
-</script>
-
-<template>
-  <CrmWorkspaceApp />
-</template>
diff --git a/frontend/app/pages/documents/index.vue b/frontend/app/pages/documents/index.vue
deleted file mode 100644
index 82cba6d..0000000
--- a/frontend/app/pages/documents/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import CrmWorkspaceApp from "~~/app/components/workspace/CrmWorkspaceApp.vue";
-</script>
-
-<template>
-  <CrmWorkspaceApp />
-</template>
diff --git a/frontend/app/pages/index.vue b/frontend/app/pages/index.vue
deleted file mode 100644
index 82cba6d..0000000
--- a/frontend/app/pages/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import CrmWorkspaceApp from "~~/app/components/workspace/CrmWorkspaceApp.vue";
-</script>
-
-<template>
-  <CrmWorkspaceApp />
-</template>
diff --git a/instructions b/instructions
index 521250d..19bbaf3 160000
--- a/instructions
+++ b/instructions
@@ -1 +1 @@
-Subproject commit 521250d2828eef7f9e02f05c7b96a4d1c56470de
+Subproject commit 19bbaf3e08a05156135f75e2cd449af3ebb5d66c
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue b/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue
deleted file mode 100644
index 1835736..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup>
-import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
-
-defineProps({
-  campaigns: {
-    type: Array,
-    required: true,
-  },
-  isLiveChatType: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['edit', 'delete']);
-
-const handleEdit = campaign => emit('edit', campaign);
-const handleDelete = campaign => emit('delete', campaign);
-</script>
-
-<template>
-  <div class="flex flex-col gap-4">
-    <CampaignCard
-      v-for="campaign in campaigns"
-      :key="campaign.id"
-      :title="campaign.title"
-      :message="campaign.message"
-      :is-enabled="campaign.enabled"
-      :status="campaign.campaign_status"
-      :sender="campaign.sender"
-      :inbox="campaign.inbox"
-      :scheduled-at="campaign.scheduled_at"
-      :is-live-chat-type="isLiveChatType"
-      @edit="handleEdit(campaign)"
-      @delete="handleDelete(campaign)"
-    />
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/ConfirmDeleteCampaignDialog.vue b/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/ConfirmDeleteCampaignDialog.vue
deleted file mode 100644
index f55c88e..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/ConfirmDeleteCampaignDialog.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useStore } from 'dashboard/composables/store';
-import { useI18n } from 'vue-i18n';
-import { useAlert } from 'dashboard/composables';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-
-const props = defineProps({
-  selectedCampaign: {
-    type: Object,
-    default: null,
-  },
-});
-
-const { t } = useI18n();
-const store = useStore();
-
-const dialogRef = ref(null);
-
-const deleteCampaign = async id => {
-  if (!id) return;
-
-  try {
-    await store.dispatch('campaigns/delete', id);
-    useAlert(t('CAMPAIGN.CONFIRM_DELETE.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    useAlert(t('CAMPAIGN.CONFIRM_DELETE.API.ERROR_MESSAGE'));
-  }
-};
-
-const handleDialogConfirm = async () => {
-  await deleteCampaign(props.selectedCampaign.id);
-  dialogRef.value?.close();
-};
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="alert"
-    :title="t('CAMPAIGN.CONFIRM_DELETE.TITLE')"
-    :description="t('CAMPAIGN.CONFIRM_DELETE.DESCRIPTION')"
-    :confirm-button-label="t('CAMPAIGN.CONFIRM_DELETE.CONFIRM')"
-    @confirm="handleDialogConfirm"
-  />
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue b/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue
deleted file mode 100644
index 9f46a1b..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useMapGetter, useStore } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import { useI18n } from 'vue-i18n';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import LiveChatCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue';
-
-const props = defineProps({
-  selectedCampaign: {
-    type: Object,
-    default: null,
-  },
-});
-
-const { t } = useI18n();
-const store = useStore();
-
-const dialogRef = ref(null);
-const liveChatCampaignFormRef = ref(null);
-
-const uiFlags = useMapGetter('campaigns/getUIFlags');
-const isUpdatingCampaign = computed(() => uiFlags.value.isUpdating);
-
-const isInvalidForm = computed(
-  () => liveChatCampaignFormRef.value?.isSubmitDisabled
-);
-
-const selectedCampaignId = computed(() => props.selectedCampaign.id);
-
-const updateCampaign = async campaignDetails => {
-  try {
-    await store.dispatch('campaigns/update', {
-      id: selectedCampaignId.value,
-      ...campaignDetails,
-    });
-
-    useAlert(t('CAMPAIGN.LIVE_CHAT.EDIT.FORM.API.SUCCESS_MESSAGE'));
-    dialogRef.value.close();
-  } catch (error) {
-    const errorMessage =
-      error?.response?.message ||
-      t('CAMPAIGN.LIVE_CHAT.EDIT.FORM.API.ERROR_MESSAGE');
-    useAlert(errorMessage);
-  }
-};
-
-const handleSubmit = () => {
-  updateCampaign(liveChatCampaignFormRef.value.prepareCampaignDetails());
-};
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="edit"
-    :title="t('CAMPAIGN.LIVE_CHAT.EDIT.TITLE')"
-    :is-loading="isUpdatingCampaign"
-    :disable-confirm-button="isUpdatingCampaign || isInvalidForm"
-    overflow-y-auto
-    @confirm="handleSubmit"
-  >
-    <LiveChatCampaignForm
-      ref="liveChatCampaignFormRef"
-      mode="edit"
-      :selected-campaign="selectedCampaign"
-      :show-action-buttons="false"
-      @submit="handleSubmit"
-    />
-  </Dialog>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue b/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue
deleted file mode 100644
index 36cb7c7..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';
-import { CAMPAIGNS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events.js';
-
-import LiveChatCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue';
-
-const emit = defineEmits(['close']);
-
-const store = useStore();
-const { t } = useI18n();
-
-const addCampaign = async campaignDetails => {
-  try {
-    await store.dispatch('campaigns/create', campaignDetails);
-
-    // tracking this here instead of the store to track the type of campaign
-    useTrack(CAMPAIGNS_EVENTS.CREATE_CAMPAIGN, {
-      type: CAMPAIGN_TYPES.ONGOING,
-    });
-
-    useAlert(t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    const errorMessage =
-      error?.response?.message ||
-      t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.API.ERROR_MESSAGE');
-    useAlert(errorMessage);
-  }
-};
-
-const handleClose = () => emit('close');
-
-const handleSubmit = campaignDetails => {
-  addCampaign(campaignDetails);
-  handleClose();
-};
-</script>
-
-<template>
-  <div
-    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-n-weak shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
-  >
-    <h3 class="text-base font-medium text-n-slate-12">
-      {{ t(`CAMPAIGN.LIVE_CHAT.CREATE.TITLE`) }}
-    </h3>
-    <LiveChatCampaignForm
-      mode="create"
-      @submit="handleSubmit"
-      @cancel="handleClose"
-    />
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue b/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue
deleted file mode 100644
index 00bd229..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue
+++ /dev/null
@@ -1,323 +0,0 @@
-<script setup>
-import { reactive, computed, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
-import { useMapGetter, useStore } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import { URLPattern } from 'urlpattern-polyfill';
-
-import Input from 'dashboard/components-next/input/Input.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
-import Editor from 'dashboard/components-next/Editor/Editor.vue';
-
-const props = defineProps({
-  mode: {
-    type: String,
-    required: true,
-    validator: value => ['edit', 'create'].includes(value),
-  },
-  selectedCampaign: {
-    type: Object,
-    default: () => ({}),
-  },
-  showActionButtons: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const emit = defineEmits(['submit', 'cancel']);
-
-const { t } = useI18n();
-const store = useStore();
-
-const formState = {
-  uiFlags: useMapGetter('campaigns/getUIFlags'),
-  inboxes: useMapGetter('inboxes/getWebsiteInboxes'),
-};
-
-const senderList = ref([]);
-
-const initialState = {
-  title: '',
-  message: '',
-  inboxId: null,
-  senderId: 0,
-  enabled: true,
-  triggerOnlyDuringBusinessHours: false,
-  endPoint: '',
-  timeOnPage: 10,
-};
-
-const state = reactive({ ...initialState });
-
-const urlValidators = {
-  shouldBeAValidURLPattern: value => {
-    try {
-      // eslint-disable-next-line
-      new URLPattern(value);
-      return true;
-    } catch {
-      return false;
-    }
-  },
-  shouldStartWithHTTP: value =>
-    value ? value.startsWith('https://') || value.startsWith('http://') : false,
-};
-
-const validationRules = {
-  title: { required, minLength: minLength(1) },
-  message: { required, minLength: minLength(1) },
-  inboxId: { required },
-  senderId: { required },
-  endPoint: { required, ...urlValidators },
-  timeOnPage: { required },
-};
-
-const v$ = useVuelidate(validationRules, state);
-
-const isCreating = computed(() => formState.uiFlags.value.isCreating);
-const isSubmitDisabled = computed(() => v$.value.$invalid);
-
-const mapToOptions = (items, valueKey, labelKey) =>
-  items?.map(item => ({
-    value: item[valueKey],
-    label: item[labelKey],
-  })) ?? [];
-
-const inboxOptions = computed(() =>
-  mapToOptions(formState.inboxes.value, 'id', 'name')
-);
-
-const sendersAndBotList = computed(() => [
-  { value: 0, label: 'Bot' },
-  ...mapToOptions(senderList.value, 'id', 'name'),
-]);
-
-const getErrorMessage = (field, errorKey) => {
-  const baseKey = 'CAMPAIGN.LIVE_CHAT.CREATE.FORM';
-  return v$.value[field].$error ? t(`${baseKey}.${errorKey}.ERROR`) : '';
-};
-
-const formErrors = computed(() => ({
-  title: getErrorMessage('title', 'TITLE'),
-  message: getErrorMessage('message', 'MESSAGE'),
-  inbox: getErrorMessage('inboxId', 'INBOX'),
-  endPoint: getErrorMessage('endPoint', 'END_POINT'),
-  timeOnPage: getErrorMessage('timeOnPage', 'TIME_ON_PAGE'),
-  sender: getErrorMessage('senderId', 'SENT_BY'),
-}));
-
-const resetState = () => Object.assign(state, initialState);
-
-const handleCancel = () => emit('cancel');
-
-const handleInboxChange = async inboxId => {
-  if (!inboxId) {
-    senderList.value = [];
-    return;
-  }
-
-  try {
-    const response = await store.dispatch('inboxMembers/get', { inboxId });
-    senderList.value = response?.data?.payload ?? [];
-  } catch (error) {
-    senderList.value = [];
-    useAlert(
-      error?.response?.message ??
-        t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.API.ERROR_MESSAGE')
-    );
-  }
-};
-
-const prepareCampaignDetails = () => ({
-  title: state.title,
-  message: state.message,
-  inbox_id: state.inboxId,
-  sender_id: state.senderId || null,
-  enabled: state.enabled,
-  trigger_only_during_business_hours: state.triggerOnlyDuringBusinessHours,
-  trigger_rules: {
-    url: state.endPoint,
-    time_on_page: state.timeOnPage,
-  },
-});
-
-const handleSubmit = async () => {
-  const isFormValid = await v$.value.$validate();
-  if (!isFormValid) return;
-
-  emit('submit', prepareCampaignDetails());
-  if (props.mode === 'create') {
-    resetState();
-    handleCancel();
-  }
-};
-
-const updateStateFromCampaign = campaign => {
-  if (!campaign) return;
-
-  const {
-    title,
-    message,
-    inbox: { id: inboxId },
-    sender,
-    enabled,
-    trigger_only_during_business_hours: triggerOnlyDuringBusinessHours,
-    trigger_rules: { url: endPoint, time_on_page: timeOnPage },
-  } = campaign;
-
-  Object.assign(state, {
-    title,
-    message,
-    inboxId,
-    senderId: sender?.id ?? 0,
-    enabled,
-    triggerOnlyDuringBusinessHours,
-    endPoint,
-    timeOnPage,
-  });
-};
-
-watch(
-  () => state.inboxId,
-  newInboxId => {
-    if (newInboxId) {
-      handleInboxChange(newInboxId);
-    }
-  },
-  { immediate: true }
-);
-
-watch(
-  () => props.selectedCampaign,
-  newCampaign => {
-    if (props.mode === 'edit' && newCampaign) {
-      updateStateFromCampaign(newCampaign);
-    }
-  },
-  { immediate: true }
-);
-
-defineExpose({ prepareCampaignDetails, isSubmitDisabled });
-</script>
-
-<template>
-  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
-    <Input
-      v-model="state.title"
-      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TITLE.LABEL')"
-      :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TITLE.PLACEHOLDER')"
-      :message="formErrors.title"
-      :message-type="formErrors.title ? 'error' : 'info'"
-    />
-
-    <Editor
-      v-model="state.message"
-      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.MESSAGE.LABEL')"
-      :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.MESSAGE.PLACEHOLDER')"
-      :message="formErrors.message"
-      :message-type="formErrors.message ? 'error' : 'info'"
-    />
-
-    <div class="flex flex-col gap-1">
-      <label for="inbox" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.INBOX.LABEL') }}
-      </label>
-      <ComboBox
-        id="inbox"
-        v-model="state.inboxId"
-        :options="inboxOptions"
-        :has-error="!!formErrors.inbox"
-        :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.INBOX.PLACEHOLDER')"
-        :message="formErrors.inbox"
-        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
-      />
-    </div>
-
-    <div class="flex flex-col gap-1">
-      <label for="sentBy" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.SENT_BY.LABEL') }}
-      </label>
-      <ComboBox
-        id="sentBy"
-        v-model="state.senderId"
-        :options="sendersAndBotList"
-        :has-error="!!formErrors.sender"
-        :disabled="!state.inboxId"
-        :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.SENT_BY.PLACEHOLDER')"
-        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
-        :message="formErrors.sender"
-      />
-    </div>
-
-    <Input
-      v-model="state.endPoint"
-      type="url"
-      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.END_POINT.LABEL')"
-      :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.END_POINT.PLACEHOLDER')"
-      :message="formErrors.endPoint"
-      :message-type="formErrors.endPoint ? 'error' : 'info'"
-    />
-
-    <Input
-      v-model="state.timeOnPage"
-      type="number"
-      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TIME_ON_PAGE.LABEL')"
-      :placeholder="
-        t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TIME_ON_PAGE.PLACEHOLDER')
-      "
-      :message="formErrors.timeOnPage"
-      :message-type="formErrors.timeOnPage ? 'error' : 'info'"
-    />
-
-    <fieldset class="flex flex-col gap-2.5">
-      <legend class="mb-2.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.OTHER_PREFERENCES.TITLE') }}
-      </legend>
-
-      <label class="flex items-center gap-2">
-        <input v-model="state.enabled" type="checkbox" />
-        <span class="text-sm font-medium text-n-slate-12">
-          {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.OTHER_PREFERENCES.ENABLED') }}
-        </span>
-      </label>
-
-      <label class="flex items-center gap-2">
-        <input v-model="state.triggerOnlyDuringBusinessHours" type="checkbox" />
-        <span class="text-sm font-medium text-n-slate-12">
-          {{
-            t(
-              'CAMPAIGN.LIVE_CHAT.CREATE.FORM.OTHER_PREFERENCES.TRIGGER_ONLY_BUSINESS_HOURS'
-            )
-          }}
-        </span>
-      </label>
-    </fieldset>
-
-    <div
-      v-if="showActionButtons"
-      class="flex items-center justify-between w-full gap-3"
-    >
-      <Button
-        type="button"
-        variant="faded"
-        color="slate"
-        :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
-        @click="handleCancel"
-      />
-      <Button
-        type="submit"
-        :label="
-          t(`CAMPAIGN.LIVE_CHAT.CREATE.FORM.BUTTONS.${mode.toUpperCase()}`)
-        "
-        class="w-full"
-        :is-loading="isCreating"
-        :disabled="isCreating || isSubmitDisabled"
-      />
-    </div>
-  </form>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue b/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue
deleted file mode 100644
index 74ec98c..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';
-import { CAMPAIGNS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events.js';
-
-import SMSCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue';
-
-const emit = defineEmits(['close']);
-
-const store = useStore();
-const { t } = useI18n();
-
-const addCampaign = async campaignDetails => {
-  try {
-    await store.dispatch('campaigns/create', campaignDetails);
-
-    // tracking this here instead of the store to track the type of campaign
-    useTrack(CAMPAIGNS_EVENTS.CREATE_CAMPAIGN, {
-      type: CAMPAIGN_TYPES.ONE_OFF,
-    });
-
-    useAlert(t('CAMPAIGN.SMS.CREATE.FORM.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    const errorMessage =
-      error?.response?.message ||
-      t('CAMPAIGN.SMS.CREATE.FORM.API.ERROR_MESSAGE');
-    useAlert(errorMessage);
-  }
-};
-
-const handleSubmit = campaignDetails => {
-  addCampaign(campaignDetails);
-};
-
-const handleClose = () => emit('close');
-</script>
-
-<template>
-  <div
-    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-n-weak shadow-md flex flex-col gap-6"
-  >
-    <h3 class="text-base font-medium text-n-slate-12">
-      {{ t(`CAMPAIGN.SMS.CREATE.TITLE`) }}
-    </h3>
-    <SMSCampaignForm @submit="handleSubmit" @cancel="handleClose" />
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue b/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue
deleted file mode 100644
index 6f6b615..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue
+++ /dev/null
@@ -1,189 +0,0 @@
-<script setup>
-import { reactive, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
-import { useMapGetter } from 'dashboard/composables/store';
-
-import Input from 'dashboard/components-next/input/Input.vue';
-import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
-import TagMultiSelectComboBox from 'dashboard/components-next/combobox/TagMultiSelectComboBox.vue';
-
-const emit = defineEmits(['submit', 'cancel']);
-
-const { t } = useI18n();
-
-const formState = {
-  uiFlags: useMapGetter('campaigns/getUIFlags'),
-  labels: useMapGetter('labels/getLabels'),
-  inboxes: useMapGetter('inboxes/getSMSInboxes'),
-};
-
-const initialState = {
-  title: '',
-  message: '',
-  inboxId: null,
-  scheduledAt: null,
-  selectedAudience: [],
-};
-
-const state = reactive({ ...initialState });
-
-const rules = {
-  title: { required, minLength: minLength(1) },
-  message: { required, minLength: minLength(1) },
-  inboxId: { required },
-  scheduledAt: { required },
-  selectedAudience: { required },
-};
-
-const v$ = useVuelidate(rules, state);
-
-const isCreating = computed(() => formState.uiFlags.value.isCreating);
-
-const currentDateTime = computed(() => {
-  // Added to disable the scheduled at field from being set to the current time
-  const now = new Date();
-  const localTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000);
-  return localTime.toISOString().slice(0, 16);
-});
-
-const mapToOptions = (items, valueKey, labelKey) =>
-  items?.map(item => ({
-    value: item[valueKey],
-    label: item[labelKey],
-  })) ?? [];
-
-const audienceList = computed(() =>
-  mapToOptions(formState.labels.value, 'id', 'title')
-);
-
-const inboxOptions = computed(() =>
-  mapToOptions(formState.inboxes.value, 'id', 'name')
-);
-
-const getErrorMessage = (field, errorKey) => {
-  const baseKey = 'CAMPAIGN.SMS.CREATE.FORM';
-  return v$.value[field].$error ? t(`${baseKey}.${errorKey}.ERROR`) : '';
-};
-
-const formErrors = computed(() => ({
-  title: getErrorMessage('title', 'TITLE'),
-  message: getErrorMessage('message', 'MESSAGE'),
-  inbox: getErrorMessage('inboxId', 'INBOX'),
-  scheduledAt: getErrorMessage('scheduledAt', 'SCHEDULED_AT'),
-  audience: getErrorMessage('selectedAudience', 'AUDIENCE'),
-}));
-
-const isSubmitDisabled = computed(() => v$.value.$invalid);
-
-const formatToUTCString = localDateTime =>
-  localDateTime ? new Date(localDateTime).toISOString() : null;
-
-const resetState = () => {
-  Object.assign(state, initialState);
-};
-
-const handleCancel = () => emit('cancel');
-
-const prepareCampaignDetails = () => ({
-  title: state.title,
-  message: state.message,
-  inbox_id: state.inboxId,
-  scheduled_at: formatToUTCString(state.scheduledAt),
-  audience: state.selectedAudience?.map(id => ({
-    id,
-    type: 'Label',
-  })),
-});
-
-const handleSubmit = async () => {
-  const isFormValid = await v$.value.$validate();
-  if (!isFormValid) return;
-
-  emit('submit', prepareCampaignDetails());
-  resetState();
-  handleCancel();
-};
-</script>
-
-<template>
-  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
-    <Input
-      v-model="state.title"
-      :label="t('CAMPAIGN.SMS.CREATE.FORM.TITLE.LABEL')"
-      :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.TITLE.PLACEHOLDER')"
-      :message="formErrors.title"
-      :message-type="formErrors.title ? 'error' : 'info'"
-    />
-
-    <TextArea
-      v-model="state.message"
-      :label="t('CAMPAIGN.SMS.CREATE.FORM.MESSAGE.LABEL')"
-      :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.MESSAGE.PLACEHOLDER')"
-      show-character-count
-      :message="formErrors.message"
-      :message-type="formErrors.message ? 'error' : 'info'"
-    />
-
-    <div class="flex flex-col gap-1">
-      <label for="inbox" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.SMS.CREATE.FORM.INBOX.LABEL') }}
-      </label>
-      <ComboBox
-        id="inbox"
-        v-model="state.inboxId"
-        :options="inboxOptions"
-        :has-error="!!formErrors.inbox"
-        :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.INBOX.PLACEHOLDER')"
-        :message="formErrors.inbox"
-        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
-      />
-    </div>
-
-    <div class="flex flex-col gap-1">
-      <label for="audience" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.SMS.CREATE.FORM.AUDIENCE.LABEL') }}
-      </label>
-      <TagMultiSelectComboBox
-        v-model="state.selectedAudience"
-        :options="audienceList"
-        :label="t('CAMPAIGN.SMS.CREATE.FORM.AUDIENCE.LABEL')"
-        :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.AUDIENCE.PLACEHOLDER')"
-        :has-error="!!formErrors.audience"
-        :message="formErrors.audience"
-        class="[&>div>button]:bg-n-alpha-black2"
-      />
-    </div>
-
-    <Input
-      v-model="state.scheduledAt"
-      :label="t('CAMPAIGN.SMS.CREATE.FORM.SCHEDULED_AT.LABEL')"
-      type="datetime-local"
-      :min="currentDateTime"
-      :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.SCHEDULED_AT.PLACEHOLDER')"
-      :message="formErrors.scheduledAt"
-      :message-type="formErrors.scheduledAt ? 'error' : 'info'"
-    />
-
-    <div class="flex items-center justify-between w-full gap-3">
-      <Button
-        variant="faded"
-        color="slate"
-        type="button"
-        :label="t('CAMPAIGN.SMS.CREATE.FORM.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
-        @click="handleCancel"
-      />
-      <Button
-        :label="t('CAMPAIGN.SMS.CREATE.FORM.BUTTONS.CREATE')"
-        class="w-full"
-        type="submit"
-        :is-loading="isCreating"
-        :disabled="isCreating || isSubmitDisabled"
-      />
-    </div>
-  </form>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignDialog.vue b/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignDialog.vue
deleted file mode 100644
index f430137..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignDialog.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';
-import { CAMPAIGNS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events.js';
-
-import WhatsAppCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignForm.vue';
-
-const emit = defineEmits(['close']);
-
-const store = useStore();
-const { t } = useI18n();
-
-const addCampaign = async campaignDetails => {
-  try {
-    await store.dispatch('campaigns/create', campaignDetails);
-
-    useTrack(CAMPAIGNS_EVENTS.CREATE_CAMPAIGN, {
-      type: CAMPAIGN_TYPES.ONE_OFF,
-    });
-
-    useAlert(t('CAMPAIGN.WHATSAPP.CREATE.FORM.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    const errorMessage =
-      error?.response?.message ||
-      t('CAMPAIGN.WHATSAPP.CREATE.FORM.API.ERROR_MESSAGE');
-    useAlert(errorMessage);
-  }
-};
-
-const handleSubmit = campaignDetails => {
-  addCampaign(campaignDetails);
-};
-
-const handleClose = () => emit('close');
-</script>
-
-<template>
-  <div
-    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] rounded-xl border border-n-weak shadow-md max-h-[80vh] overflow-y-auto"
-  >
-    <div class="p-6 flex flex-col gap-6">
-      <h3 class="text-base font-medium text-n-slate-12 flex-shrink-0">
-        {{ t(`CAMPAIGN.WHATSAPP.CREATE.TITLE`) }}
-      </h3>
-      <WhatsAppCampaignForm @submit="handleSubmit" @cancel="handleClose" />
-    </div>
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignForm.vue b/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignForm.vue
deleted file mode 100644
index 2bb1005..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignForm.vue
+++ /dev/null
@@ -1,266 +0,0 @@
-<script setup>
-import { reactive, computed, watch, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
-import { useMapGetter } from 'dashboard/composables/store';
-
-import Input from 'dashboard/components-next/input/Input.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
-import TagMultiSelectComboBox from 'dashboard/components-next/combobox/TagMultiSelectComboBox.vue';
-import WhatsAppTemplateParser from 'dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue';
-
-const emit = defineEmits(['submit', 'cancel']);
-
-const { t } = useI18n();
-
-const formState = {
-  uiFlags: useMapGetter('campaigns/getUIFlags'),
-  labels: useMapGetter('labels/getLabels'),
-  inboxes: useMapGetter('inboxes/getWhatsAppInboxes'),
-  getFilteredWhatsAppTemplates: useMapGetter(
-    'inboxes/getFilteredWhatsAppTemplates'
-  ),
-};
-
-const initialState = {
-  title: '',
-  inboxId: null,
-  templateId: null,
-  scheduledAt: null,
-  selectedAudience: [],
-};
-
-const state = reactive({ ...initialState });
-const templateParserRef = ref(null);
-
-const rules = {
-  title: { required, minLength: minLength(1) },
-  inboxId: { required },
-  templateId: { required },
-  scheduledAt: { required },
-  selectedAudience: { required },
-};
-
-const v$ = useVuelidate(rules, state);
-
-const isCreating = computed(() => formState.uiFlags.value.isCreating);
-
-const currentDateTime = computed(() => {
-  // Added to disable the scheduled at field from being set to the current time
-  const now = new Date();
-  const localTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000);
-  return localTime.toISOString().slice(0, 16);
-});
-
-const mapToOptions = (items, valueKey, labelKey) =>
-  items?.map(item => ({
-    value: item[valueKey],
-    label: item[labelKey],
-  })) ?? [];
-
-const audienceList = computed(() =>
-  mapToOptions(formState.labels.value, 'id', 'title')
-);
-
-const inboxOptions = computed(() =>
-  mapToOptions(formState.inboxes.value, 'id', 'name')
-);
-
-const templateOptions = computed(() => {
-  if (!state.inboxId) return [];
-  const templates = formState.getFilteredWhatsAppTemplates.value(state.inboxId);
-  return templates.map(template => {
-    // Create a more user-friendly label from template name
-    const friendlyName = template.name
-      .replace(/_/g, ' ')
-      .replace(/\b\w/g, l => l.toUpperCase());
-
-    return {
-      value: template.id,
-      label: `${friendlyName} (${template.language || 'en'})`,
-      template: template,
-    };
-  });
-});
-
-const selectedTemplate = computed(() => {
-  if (!state.templateId) return null;
-  return templateOptions.value.find(option => option.value === state.templateId)
-    ?.template;
-});
-
-const getErrorMessage = (field, errorKey) => {
-  const baseKey = 'CAMPAIGN.WHATSAPP.CREATE.FORM';
-  return v$.value[field].$error ? t(`${baseKey}.${errorKey}.ERROR`) : '';
-};
-
-const formErrors = computed(() => ({
-  title: getErrorMessage('title', 'TITLE'),
-  inbox: getErrorMessage('inboxId', 'INBOX'),
-  template: getErrorMessage('templateId', 'TEMPLATE'),
-  scheduledAt: getErrorMessage('scheduledAt', 'SCHEDULED_AT'),
-  audience: getErrorMessage('selectedAudience', 'AUDIENCE'),
-}));
-
-const hasRequiredTemplateParams = computed(() => {
-  return templateParserRef.value?.v$?.$invalid === false || true;
-});
-
-const isSubmitDisabled = computed(
-  () => v$.value.$invalid || !hasRequiredTemplateParams.value
-);
-
-const formatToUTCString = localDateTime =>
-  localDateTime ? new Date(localDateTime).toISOString() : null;
-
-const resetState = () => {
-  Object.assign(state, initialState);
-  v$.value.$reset();
-};
-
-const handleCancel = () => emit('cancel');
-
-const prepareCampaignDetails = () => {
-  // Find the selected template to get its content
-  const currentTemplate = selectedTemplate.value;
-  const parserData = templateParserRef.value;
-
-  // Extract template content - this should be the template message body
-  const templateContent = parserData?.renderedTemplate || '';
-
-  // Prepare template_params object with the same structure as used in contacts
-  const templateParams = {
-    name: currentTemplate?.name || '',
-    namespace: currentTemplate?.namespace || '',
-    category: currentTemplate?.category || 'UTILITY',
-    language: currentTemplate?.language || 'en_US',
-    processed_params: parserData?.processedParams || {},
-  };
-
-  return {
-    title: state.title,
-    message: templateContent,
-    template_params: templateParams,
-    inbox_id: state.inboxId,
-    scheduled_at: formatToUTCString(state.scheduledAt),
-    audience: state.selectedAudience?.map(id => ({
-      id,
-      type: 'Label',
-    })),
-  };
-};
-
-const handleSubmit = async () => {
-  const isFormValid = await v$.value.$validate();
-  if (!isFormValid) return;
-
-  emit('submit', prepareCampaignDetails());
-  resetState();
-  handleCancel();
-};
-
-// Reset template selection when inbox changes
-watch(
-  () => state.inboxId,
-  () => {
-    state.templateId = null;
-  }
-);
-</script>
-
-<template>
-  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
-    <Input
-      v-model="state.title"
-      :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.TITLE.LABEL')"
-      :placeholder="t('CAMPAIGN.WHATSAPP.CREATE.FORM.TITLE.PLACEHOLDER')"
-      :message="formErrors.title"
-      :message-type="formErrors.title ? 'error' : 'info'"
-    />
-
-    <div class="flex flex-col gap-1">
-      <label for="inbox" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.INBOX.LABEL') }}
-      </label>
-      <ComboBox
-        id="inbox"
-        v-model="state.inboxId"
-        :options="inboxOptions"
-        :has-error="!!formErrors.inbox"
-        :placeholder="t('CAMPAIGN.WHATSAPP.CREATE.FORM.INBOX.PLACEHOLDER')"
-        :message="formErrors.inbox"
-        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
-      />
-    </div>
-
-    <div class="flex flex-col gap-1">
-      <label for="template" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.LABEL') }}
-      </label>
-      <ComboBox
-        id="template"
-        v-model="state.templateId"
-        :options="templateOptions"
-        :has-error="!!formErrors.template"
-        :placeholder="t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.PLACEHOLDER')"
-        :message="formErrors.template"
-        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
-      />
-      <p class="mt-1 text-xs text-n-slate-11">
-        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.INFO') }}
-      </p>
-    </div>
-
-    <!-- Template Parser -->
-    <WhatsAppTemplateParser
-      v-if="selectedTemplate"
-      ref="templateParserRef"
-      :template="selectedTemplate"
-    />
-
-    <div class="flex flex-col gap-1">
-      <label for="audience" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.AUDIENCE.LABEL') }}
-      </label>
-      <TagMultiSelectComboBox
-        v-model="state.selectedAudience"
-        :options="audienceList"
-        :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.AUDIENCE.LABEL')"
-        :placeholder="t('CAMPAIGN.WHATSAPP.CREATE.FORM.AUDIENCE.PLACEHOLDER')"
-        :has-error="!!formErrors.audience"
-        :message="formErrors.audience"
-        class="[&>div>button]:bg-n-alpha-black2"
-      />
-    </div>
-
-    <Input
-      v-model="state.scheduledAt"
-      :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.SCHEDULED_AT.LABEL')"
-      type="datetime-local"
-      :min="currentDateTime"
-      :placeholder="t('CAMPAIGN.WHATSAPP.CREATE.FORM.SCHEDULED_AT.PLACEHOLDER')"
-      :message="formErrors.scheduledAt"
-      :message-type="formErrors.scheduledAt ? 'error' : 'info'"
-    />
-
-    <div class="flex gap-3 justify-between items-center w-full">
-      <Button
-        variant="faded"
-        color="slate"
-        type="button"
-        :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
-        @click="handleCancel"
-      />
-      <Button
-        :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.BUTTONS.CREATE')"
-        class="w-full"
-        type="submit"
-        :is-loading="isCreating"
-        :disabled="isCreating || isSubmitDisabled"
-      />
-    </div>
-  </form>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue b/research/chatwoot/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue
deleted file mode 100644
index b7014c4..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue
+++ /dev/null
@@ -1,203 +0,0 @@
-<script setup>
-import { computed, ref, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import { dynamicTime } from 'shared/helpers/timeHelper';
-
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import ContactLabels from 'dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue';
-import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
-import ConfirmContactDeleteDialog from 'dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue';
-import Policy from 'dashboard/components/policy.vue';
-
-const props = defineProps({
-  selectedContact: {
-    type: Object,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['goToContactsList']);
-
-const { t } = useI18n();
-const store = useStore();
-
-const confirmDeleteContactDialogRef = ref(null);
-
-const avatarFile = ref(null);
-const avatarUrl = ref('');
-
-const contactsFormRef = ref(null);
-
-const uiFlags = useMapGetter('contacts/getUIFlags');
-const isUpdating = computed(() => uiFlags.value.isUpdating);
-
-const isFormInvalid = computed(() => contactsFormRef.value?.isFormInvalid);
-
-const contactData = ref({});
-
-const getInitialContactData = () => {
-  if (!props.selectedContact) return {};
-  return { ...props.selectedContact };
-};
-
-onMounted(() => {
-  Object.assign(contactData.value, getInitialContactData());
-});
-
-const createdAt = computed(() => {
-  return contactData.value?.createdAt
-    ? dynamicTime(contactData.value.createdAt)
-    : '';
-});
-
-const lastActivityAt = computed(() => {
-  return contactData.value?.lastActivityAt
-    ? dynamicTime(contactData.value.lastActivityAt)
-    : '';
-});
-
-const avatarSrc = computed(() => {
-  return avatarUrl.value ? avatarUrl.value : contactData.value?.thumbnail;
-});
-
-const handleFormUpdate = updatedData => {
-  Object.assign(contactData.value, updatedData);
-};
-
-const updateContact = async () => {
-  try {
-    const { customAttributes, ...basicContactData } = contactData.value;
-    await store.dispatch('contacts/update', basicContactData);
-    await store.dispatch(
-      'contacts/fetchContactableInbox',
-      props.selectedContact.id
-    );
-    useAlert(t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.SUCCESS_MESSAGE'));
-  } catch (error) {
-    useAlert(t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.ERROR_MESSAGE'));
-  }
-};
-
-const openConfirmDeleteContactDialog = () => {
-  confirmDeleteContactDialogRef.value?.dialogRef.open();
-};
-
-const handleAvatarUpload = async ({ file, url }) => {
-  avatarFile.value = file;
-  avatarUrl.value = url;
-
-  try {
-    await store.dispatch('contacts/update', {
-      ...contactsFormRef.value?.state,
-      avatar: file,
-      isFormData: true,
-    });
-    useAlert(t('CONTACTS_LAYOUT.DETAILS.AVATAR.UPLOAD.SUCCESS_MESSAGE'));
-  } catch {
-    useAlert(t('CONTACTS_LAYOUT.DETAILS.AVATAR.UPLOAD.ERROR_MESSAGE'));
-  }
-};
-
-const handleAvatarDelete = async () => {
-  try {
-    if (props.selectedContact && props.selectedContact.id) {
-      await store.dispatch('contacts/deleteAvatar', props.selectedContact.id);
-      useAlert(t('CONTACTS_LAYOUT.DETAILS.AVATAR.DELETE.SUCCESS_MESSAGE'));
-    }
-    avatarFile.value = null;
-    avatarUrl.value = '';
-    contactData.value.thumbnail = null;
-  } catch (error) {
-    useAlert(
-      error.message
-        ? error.message
-        : t('CONTACTS_LAYOUT.DETAILS.AVATAR.DELETE.ERROR_MESSAGE')
-    );
-  }
-};
-</script>
-
-<template>
-  <div class="flex flex-col items-start gap-8 pb-6">
-    <div class="flex flex-col items-start gap-3">
-      <Avatar
-        :src="avatarSrc || ''"
-        :name="selectedContact?.name || ''"
-        :size="72"
-        allow-upload
-        @upload="handleAvatarUpload"
-        @delete="handleAvatarDelete"
-      />
-      <div class="flex flex-col gap-1">
-        <h3 class="text-base font-medium text-n-slate-12">
-          {{ selectedContact?.name }}
-        </h3>
-        <div class="flex flex-col gap-1.5">
-          <span
-            v-if="selectedContact?.identifier"
-            class="inline-flex items-center gap-1 text-sm text-n-slate-11"
-          >
-            <span class="i-ph-user-gear text-n-slate-10 size-4" />
-            {{ selectedContact?.identifier }}
-          </span>
-          <span class="inline-flex items-center gap-1 text-sm text-n-slate-11">
-            <span
-              v-if="selectedContact?.identifier"
-              class="i-ph-activity text-n-slate-10 size-4"
-            />
-            {{ $t('CONTACTS_LAYOUT.DETAILS.CREATED_AT', { date: createdAt }) }}
-            •
-            {{
-              $t('CONTACTS_LAYOUT.DETAILS.LAST_ACTIVITY', {
-                date: lastActivityAt,
-              })
-            }}
-          </span>
-        </div>
-      </div>
-      <ContactLabels :contact-id="selectedContact?.id" />
-    </div>
-    <div class="flex flex-col items-start gap-6">
-      <ContactsForm
-        ref="contactsFormRef"
-        :contact-data="contactData"
-        is-details-view
-        @update="handleFormUpdate"
-      />
-      <Button
-        :label="t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.UPDATE_BUTTON')"
-        size="sm"
-        :is-loading="isUpdating"
-        :disabled="isUpdating || isFormInvalid"
-        @click="updateContact"
-      />
-    </div>
-    <Policy :permissions="['administrator']">
-      <div
-        class="flex flex-col items-start w-full gap-4 pt-6 border-t border-n-strong"
-      >
-        <div class="flex flex-col gap-2">
-          <h6 class="text-base font-medium text-n-slate-12">
-            {{ t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT') }}
-          </h6>
-          <span class="text-sm text-n-slate-11">
-            {{ t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT_DESCRIPTION') }}
-          </span>
-        </div>
-        <Button
-          :label="t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT')"
-          color="ruby"
-          @click="openConfirmDeleteContactDialog"
-        />
-      </div>
-      <ConfirmContactDeleteDialog
-        ref="confirmDeleteContactDialogRef"
-        :selected-contact="selectedContact"
-        @go-to-contacts-list="emit('goToContactsList')"
-      />
-    </Policy>
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue b/research/chatwoot/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
deleted file mode 100644
index 72bc2c7..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import { useI18n } from 'vue-i18n';
-import { useRouter, useRoute } from 'vue-router';
-import {
-  DuplicateContactException,
-  ExceptionWithMessage,
-} from 'shared/helpers/CustomErrors';
-import ContactsCard from 'dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue';
-
-const props = defineProps({
-  contacts: { type: Array, required: true },
-  selectedContactIds: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const emit = defineEmits(['toggleContact']);
-
-const { t } = useI18n();
-const store = useStore();
-const router = useRouter();
-const route = useRoute();
-
-const uiFlags = useMapGetter('contacts/getUIFlags');
-const isUpdating = computed(() => uiFlags.value.isUpdating);
-const expandedCardId = ref(null);
-const hoveredAvatarId = ref(null);
-
-const selectedIdsSet = computed(() => new Set(props.selectedContactIds || []));
-
-const updateContact = async updatedData => {
-  try {
-    await store.dispatch('contacts/update', updatedData);
-    useAlert(t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.SUCCESS_MESSAGE'));
-  } catch (error) {
-    const i18nPrefix = 'CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.FORM';
-    if (error instanceof DuplicateContactException) {
-      if (error.data.includes('email')) {
-        useAlert(t(`${i18nPrefix}.EMAIL_ADDRESS.DUPLICATE`));
-      } else if (error.data.includes('phone_number')) {
-        useAlert(t(`${i18nPrefix}.PHONE_NUMBER.DUPLICATE`));
-      }
-    } else if (error instanceof ExceptionWithMessage) {
-      useAlert(error.data);
-    } else {
-      useAlert(t(`${i18nPrefix}.ERROR_MESSAGE`));
-    }
-  }
-};
-
-const onClickViewDetails = async id => {
-  const routeTypes = {
-    contacts_dashboard_segments_index: ['contacts_edit_segment', 'segmentId'],
-    contacts_dashboard_labels_index: ['contacts_edit_label', 'label'],
-  };
-  const [name, paramKey] = routeTypes[route.name] || ['contacts_edit'];
-  const params = {
-    contactId: id,
-    ...(paramKey && { [paramKey]: route.params[paramKey] }),
-  };
-
-  await router.push({ name, params, query: route.query });
-};
-
-const toggleExpanded = id => {
-  expandedCardId.value = expandedCardId.value === id ? null : id;
-};
-
-const isSelected = id => selectedIdsSet.value.has(id);
-
-const shouldShowSelection = id => {
-  return hoveredAvatarId.value === id || isSelected(id);
-};
-
-const handleSelect = (id, value) => {
-  emit('toggleContact', { id, value });
-};
-
-const handleAvatarHover = (id, isHovered) => {
-  hoveredAvatarId.value = isHovered ? id : null;
-};
-</script>
-
-<template>
-  <div class="flex flex-col gap-4">
-    <div v-for="contact in contacts" :key="contact.id" class="relative">
-      <ContactsCard
-        :id="contact.id"
-        :name="contact.name"
-        :email="contact.email"
-        :thumbnail="contact.thumbnail"
-        :phone-number="contact.phoneNumber"
-        :additional-attributes="contact.additionalAttributes"
-        :availability-status="contact.availabilityStatus"
-        :is-expanded="expandedCardId === contact.id"
-        :is-updating="isUpdating"
-        :selectable="shouldShowSelection(contact.id)"
-        :is-selected="isSelected(contact.id)"
-        @toggle="toggleExpanded(contact.id)"
-        @update-contact="updateContact"
-        @show-contact="onClickViewDetails"
-        @select="value => handleSelect(contact.id, value)"
-        @avatar-hover="value => handleAvatarHover(contact.id, value)"
-      />
-    </div>
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
deleted file mode 100644
index 4c4d95f..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { debounce } from '@chatwoot/utils';
-import { useI18n } from 'vue-i18n';
-import { ARTICLE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
-
-import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
-import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
-import FullEditor from 'dashboard/components/widgets/WootWriter/FullEditor.vue';
-import ArticleEditorHeader from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue';
-import ArticleEditorControls from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue';
-
-const props = defineProps({
-  article: {
-    type: Object,
-    default: () => ({}),
-  },
-  isUpdating: {
-    type: Boolean,
-    default: false,
-  },
-  isSaved: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits([
-  'saveArticle',
-  'saveArticleAsync',
-  'goBack',
-  'setAuthor',
-  'setCategory',
-  'previewArticle',
-]);
-
-const { t } = useI18n();
-
-const isNewArticle = computed(() => !props.article?.id);
-
-const saveAndSync = value => {
-  emit('saveArticle', value);
-};
-
-// this will only send the data to the backend
-// but will not update the local state preventing unnecessary re-renders
-// since the data is already saved and we keep the editor text as the source of truth
-const quickSave = debounce(
-  value => emit('saveArticleAsync', value),
-  400,
-  false
-);
-
-// 2.5 seconds is enough to know that the user has stopped typing and is taking a pause
-// so we can save the data to the backend and retrieve the updated data
-// this will update the local state with response data
-// Only use to save for existing articles
-const saveAndSyncDebounced = debounce(saveAndSync, 2500, false);
-
-// Debounced save for new articles
-const quickSaveNewArticle = debounce(saveAndSync, 400, false);
-
-const handleSave = value => {
-  if (isNewArticle.value) {
-    quickSaveNewArticle(value);
-  } else {
-    quickSave(value);
-    saveAndSyncDebounced(value);
-  }
-};
-
-const articleTitle = computed({
-  get: () => props.article.title,
-  set: value => {
-    handleSave({ title: value });
-  },
-});
-
-const articleContent = computed({
-  get: () => props.article.content,
-  set: content => {
-    handleSave({ content });
-  },
-});
-
-const onClickGoBack = () => {
-  emit('goBack');
-};
-
-const setAuthorId = authorId => {
-  emit('setAuthor', authorId);
-};
-
-const setCategoryId = categoryId => {
-  emit('setCategory', categoryId);
-};
-
-const previewArticle = () => {
-  emit('previewArticle');
-};
-</script>
-
-<template>
-  <HelpCenterLayout :show-header-title="false" :show-pagination-footer="false">
-    <template #header-actions>
-      <ArticleEditorHeader
-        :is-updating="isUpdating"
-        :is-saved="isSaved"
-        :status="article.status"
-        :article-id="article.id"
-        @go-back="onClickGoBack"
-        @preview-article="previewArticle"
-      />
-    </template>
-    <template #content>
-      <div class="flex flex-col gap-3 pl-4 mb-3 rtl:pr-3 rtl:pl-0">
-        <TextArea
-          v-model="articleTitle"
-          auto-height
-          min-height="4rem"
-          custom-text-area-class="!text-[32px] !leading-[48px] !font-medium !tracking-[0.2px]"
-          custom-text-area-wrapper-class="border-0 !bg-transparent dark:!bg-transparent !py-0 !px-0"
-          placeholder="Title"
-          autofocus
-        />
-        <ArticleEditorControls
-          :article="article"
-          @save-article="saveAndSync"
-          @set-author="setAuthorId"
-          @set-category="setCategoryId"
-        />
-      </div>
-      <FullEditor
-        v-model="articleContent"
-        class="py-0 pb-10 pl-4 rtl:pr-4 rtl:pl-0 h-fit"
-        :placeholder="
-          t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.EDITOR_PLACEHOLDER')
-        "
-        :enabled-menu-options="ARTICLE_EDITOR_MENU_OPTIONS"
-        :autofocus="false"
-      />
-    </template>
-  </HelpCenterLayout>
-</template>
-
-<style lang="scss" scoped>
-::v-deep {
-  .ProseMirror .empty-node::before {
-    @apply text-n-slate-10 text-base;
-  }
-
-  .ProseMirror-menubar-wrapper {
-    .ProseMirror-woot-style {
-      @apply min-h-[15rem] max-h-full;
-    }
-  }
-
-  .ProseMirror-menubar {
-    display: none; // Hide by default
-  }
-
-  .editor-root .has-selection {
-    .ProseMirror-menubar {
-      @apply h-8 rounded-lg !px-2 z-50 bg-n-solid-3 items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak;
-      display: flex;
-      top: var(--selection-top, auto) !important;
-      left: var(--selection-left, 0) !important;
-      width: fit-content !important;
-      position: absolute !important;
-
-      .ProseMirror-menuitem {
-        @apply mr-0;
-
-        .ProseMirror-icon {
-          @apply p-0 mt-0 !mr-0;
-
-          svg {
-            width: 20px !important;
-            height: 20px !important;
-          }
-        }
-      }
-
-      .ProseMirror-menu-active {
-        @apply bg-n-slate-3;
-      }
-    }
-  }
-}
-</style>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
deleted file mode 100644
index c93aa1a..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
+++ /dev/null
@@ -1,266 +0,0 @@
-<script setup>
-import { computed, ref, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import { OnClickOutside } from '@vueuse/components';
-import { useMapGetter } from 'dashboard/composables/store';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-import ArticleEditorProperties from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue';
-
-const props = defineProps({
-  article: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const emit = defineEmits(['saveArticle', 'setAuthor', 'setCategory']);
-
-const { t } = useI18n();
-const route = useRoute();
-
-const openAgentsList = ref(false);
-const openCategoryList = ref(false);
-const openProperties = ref(false);
-const selectedAuthorId = ref(null);
-const selectedCategoryId = ref(null);
-
-const agents = useMapGetter('agents/getAgents');
-const categories = useMapGetter('categories/allCategories');
-const currentUserId = useMapGetter('getCurrentUserID');
-
-const isNewArticle = computed(() => !props.article?.id);
-
-const currentUser = computed(() =>
-  agents.value.find(agent => agent.id === currentUserId.value)
-);
-
-const categorySlugFromRoute = computed(() => route.params.categorySlug);
-
-const author = computed(() => {
-  if (isNewArticle.value) {
-    return selectedAuthorId.value
-      ? agents.value.find(agent => agent.id === selectedAuthorId.value)
-      : currentUser.value;
-  }
-  return props.article?.author || null;
-});
-
-const authorName = computed(
-  () => author.value?.name || author.value?.available_name || ''
-);
-const authorThumbnailSrc = computed(() => author.value?.thumbnail);
-
-const agentList = computed(() => {
-  return (
-    agents.value
-      ?.map(({ name, id, thumbnail }) => ({
-        label: name,
-        value: id,
-        thumbnail: { name, src: thumbnail },
-        isSelected: props.article?.author?.id
-          ? id === props.article.author.id
-          : id === (selectedAuthorId.value || currentUserId.value),
-        action: 'assignAuthor',
-      }))
-      // Sort the list by isSelected first, then by name(label)
-      .toSorted((a, b) => {
-        if (a.isSelected !== b.isSelected) {
-          return Number(b.isSelected) - Number(a.isSelected);
-        }
-        return a.label.localeCompare(b.label);
-      }) ?? []
-  );
-});
-
-const hasAgentList = computed(() => {
-  return agents.value?.length > 1;
-});
-
-const findCategoryFromSlug = slug => {
-  return categories.value?.find(category => category.slug === slug);
-};
-
-const assignCategoryFromSlug = slug => {
-  const categoryFromSlug = findCategoryFromSlug(slug);
-  if (categoryFromSlug) {
-    selectedCategoryId.value = categoryFromSlug.id;
-    return categoryFromSlug;
-  }
-  return null;
-};
-
-const selectedCategory = computed(() => {
-  if (isNewArticle.value) {
-    if (categorySlugFromRoute.value) {
-      const categoryFromSlug = assignCategoryFromSlug(
-        categorySlugFromRoute.value
-      );
-      if (categoryFromSlug) return categoryFromSlug;
-    }
-    return selectedCategoryId.value
-      ? categories.value.find(
-          category => category.id === selectedCategoryId.value
-        )
-      : categories.value[0] || null;
-  }
-  return categories.value.find(
-    category => category.id === props.article?.category?.id
-  );
-});
-
-const categoryList = computed(() => {
-  return (
-    categories.value
-      .map(({ name, id, icon }) => ({
-        label: name,
-        value: id,
-        emoji: icon,
-        isSelected: isNewArticle.value
-          ? id === (selectedCategoryId.value || selectedCategory.value?.id)
-          : id === props.article?.category?.id,
-        action: 'assignCategory',
-      }))
-      // Sort categories by isSelected
-      .toSorted((a, b) => Number(b.isSelected) - Number(a.isSelected))
-  );
-});
-
-const hasCategoryMenuItems = computed(() => {
-  return categoryList.value?.length > 0;
-});
-
-const handleArticleAction = ({ action, value }) => {
-  const actions = {
-    assignAuthor: () => {
-      if (isNewArticle.value) {
-        selectedAuthorId.value = value;
-        emit('setAuthor', value);
-      } else {
-        emit('saveArticle', { author_id: value });
-      }
-      openAgentsList.value = false;
-    },
-    assignCategory: () => {
-      if (isNewArticle.value) {
-        selectedCategoryId.value = value;
-        emit('setCategory', value);
-      } else {
-        emit('saveArticle', { category_id: value });
-      }
-      openCategoryList.value = false;
-    },
-  };
-
-  actions[action]?.();
-};
-
-const updateMeta = meta => {
-  emit('saveArticle', { meta });
-};
-
-onMounted(() => {
-  if (categorySlugFromRoute.value && isNewArticle.value) {
-    // Assign category from slug if there is one
-    const categoryFromSlug = findCategoryFromSlug(categorySlugFromRoute.value);
-    if (categoryFromSlug) {
-      handleArticleAction({
-        action: 'assignCategory',
-        value: categoryFromSlug?.id,
-      });
-    }
-  }
-});
-</script>
-
-<template>
-  <div class="flex items-center gap-4">
-    <div class="relative flex items-center gap-2">
-      <OnClickOutside @trigger="openAgentsList = false">
-        <Button
-          variant="ghost"
-          color="slate"
-          class="!px-0 font-normal hover:!bg-transparent"
-          text-variant="info"
-          @click="openAgentsList = !openAgentsList"
-        >
-          <Avatar
-            :name="authorName"
-            :src="authorThumbnailSrc"
-            :size="20"
-            rounded-full
-          />
-          <span class="text-sm text-n-slate-12 hover:text-n-slate-11">
-            {{ authorName || '-' }}
-          </span>
-        </Button>
-        <DropdownMenu
-          v-if="openAgentsList && hasAgentList"
-          :menu-items="agentList"
-          show-search
-          class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-60"
-          @action="handleArticleAction"
-        />
-      </OnClickOutside>
-    </div>
-    <div class="w-px h-3 bg-n-weak" />
-    <div class="relative">
-      <OnClickOutside @trigger="openCategoryList = false">
-        <Button
-          :label="
-            selectedCategory?.name ||
-            t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')
-          "
-          :icon="!selectedCategory?.icon ? 'i-lucide-shapes' : ''"
-          variant="ghost"
-          color="slate"
-          class="!px-2 font-normal hover:!bg-transparent"
-          @click="openCategoryList = !openCategoryList"
-        >
-          <span
-            v-if="selectedCategory"
-            class="text-sm text-n-slate-12 hover:text-n-slate-11"
-          >
-            {{
-              `${selectedCategory.icon || ''} ${selectedCategory.name || t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')}`
-            }}
-          </span>
-        </Button>
-        <DropdownMenu
-          v-if="openCategoryList && hasCategoryMenuItems"
-          :menu-items="categoryList"
-          show-search
-          class="w-48 mt-2 z-[100] overflow-y-auto left-0 top-full max-h-60"
-          @action="handleArticleAction"
-        />
-      </OnClickOutside>
-    </div>
-
-    <div class="w-px h-3 bg-n-weak" />
-    <div class="relative">
-      <OnClickOutside @trigger="openProperties = false">
-        <Button
-          :label="
-            t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.MORE_PROPERTIES')
-          "
-          icon="i-lucide-plus"
-          variant="ghost"
-          color="slate"
-          :disabled="isNewArticle"
-          class="!px-2 font-normal hover:!bg-transparent hover:!text-n-slate-11"
-          @click="openProperties = !openProperties"
-        />
-        <ArticleEditorProperties
-          v-if="openProperties"
-          :article="article"
-          class="right-0 z-[100] mt-2 xl:left-0 top-full"
-          @save-article="updateMeta"
-          @close="openProperties = false"
-        />
-      </OnClickOutside>
-    </div>
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue
deleted file mode 100644
index bec5459..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import { useStore } from 'dashboard/composables/store.js';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-import { OnClickOutside } from '@vueuse/components';
-import { getArticleStatus } from 'dashboard/helper/portalHelper.js';
-import {
-  ARTICLE_EDITOR_STATUS_OPTIONS,
-  ARTICLE_STATUSES,
-  ARTICLE_MENU_ITEMS,
-} from 'dashboard/helper/portalHelper';
-import wootConstants from 'dashboard/constants/globals';
-
-import ButtonGroup from 'dashboard/components-next/buttonGroup/ButtonGroup.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-
-const props = defineProps({
-  isUpdating: {
-    type: Boolean,
-    default: false,
-  },
-  isSaved: {
-    type: Boolean,
-    default: false,
-  },
-  status: {
-    type: String,
-    default: '',
-  },
-  articleId: {
-    type: Number,
-    default: 0,
-  },
-});
-
-const emit = defineEmits(['goBack', 'previewArticle']);
-
-const { t } = useI18n();
-const store = useStore();
-const route = useRoute();
-
-const isArticlePublishing = ref(false);
-
-const { ARTICLE_STATUS_TYPES } = wootConstants;
-
-const showArticleActionMenu = ref(false);
-
-const articleMenuItems = computed(() => {
-  const statusOptions = ARTICLE_EDITOR_STATUS_OPTIONS[props.status] ?? [];
-  return statusOptions.map(option => {
-    const { label, value, icon } = ARTICLE_MENU_ITEMS[option];
-    return {
-      label: t(label),
-      value,
-      action: 'update-status',
-      icon,
-    };
-  });
-});
-
-const statusText = computed(() =>
-  t(
-    `HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.STATUS.${props.isUpdating ? 'SAVING' : 'SAVED'}`
-  )
-);
-
-const onClickGoBack = () => emit('goBack');
-
-const previewArticle = () => emit('previewArticle');
-
-const getStatusMessage = (status, isSuccess) => {
-  const messageType = isSuccess ? 'SUCCESS' : 'ERROR';
-  const statusMap = {
-    [ARTICLE_STATUS_TYPES.PUBLISH]: 'PUBLISH_ARTICLE',
-    [ARTICLE_STATUS_TYPES.ARCHIVE]: 'ARCHIVE_ARTICLE',
-    [ARTICLE_STATUS_TYPES.DRAFT]: 'DRAFT_ARTICLE',
-  };
-
-  return statusMap[status]
-    ? t(`HELP_CENTER.${statusMap[status]}.API.${messageType}`)
-    : '';
-};
-
-const updateArticleStatus = async ({ value }) => {
-  showArticleActionMenu.value = false;
-  const status = getArticleStatus(value);
-  if (status === ARTICLE_STATUS_TYPES.PUBLISH) {
-    isArticlePublishing.value = true;
-  }
-  const { portalSlug } = route.params;
-
-  try {
-    await store.dispatch('articles/update', {
-      portalSlug,
-      articleId: props.articleId,
-      status,
-    });
-
-    useAlert(getStatusMessage(status, true));
-
-    if (status === ARTICLE_STATUS_TYPES.ARCHIVE) {
-      useTrack(PORTALS_EVENTS.ARCHIVE_ARTICLE, { uiFrom: 'header' });
-    } else if (status === ARTICLE_STATUS_TYPES.PUBLISH) {
-      useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
-    }
-    isArticlePublishing.value = false;
-  } catch (error) {
-    useAlert(error?.message ?? getStatusMessage(status, false));
-    isArticlePublishing.value = false;
-  }
-};
-</script>
-
-<template>
-  <div class="flex items-center justify-between h-20">
-    <Button
-      :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.BACK_TO_ARTICLES')"
-      icon="i-lucide-chevron-left"
-      variant="link"
-      color="slate"
-      size="sm"
-      class="ltr:pl-3 rtl:pr-3"
-      @click="onClickGoBack"
-    />
-    <div class="flex items-center gap-4">
-      <span
-        v-if="isUpdating || isSaved"
-        class="text-xs font-medium transition-all duration-300 text-n-slate-11"
-      >
-        {{ statusText }}
-      </span>
-      <div class="flex items-center gap-2">
-        <Button
-          :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PREVIEW')"
-          color="slate"
-          size="sm"
-          :disabled="!articleId"
-          @click="previewArticle"
-        />
-        <ButtonGroup class="flex items-center">
-          <Button
-            :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH')"
-            size="sm"
-            class="ltr:rounded-r-none rtl:rounded-l-none"
-            no-animation
-            :is-loading="isArticlePublishing"
-            :disabled="
-              status === ARTICLE_STATUSES.PUBLISHED ||
-              !articleId ||
-              isArticlePublishing
-            "
-            @click="updateArticleStatus({ value: ARTICLE_STATUSES.PUBLISHED })"
-          />
-          <div class="relative">
-            <OnClickOutside @trigger="showArticleActionMenu = false">
-              <Button
-                icon="i-lucide-chevron-down"
-                size="sm"
-                :disabled="!articleId"
-                no-animation
-                class="ltr:rounded-l-none rtl:rounded-r-none"
-                @click.stop="showArticleActionMenu = !showArticleActionMenu"
-              />
-              <DropdownMenu
-                v-if="showArticleActionMenu"
-                :menu-items="articleMenuItems"
-                class="mt-2 ltr:right-0 rtl:left-0 top-full"
-                @action="updateArticleStatus($event)"
-              />
-            </OnClickOutside>
-          </div>
-        </ButtonGroup>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
deleted file mode 100644
index aa04ba5..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<script setup>
-import { reactive, watch, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { debounce } from '@chatwoot/utils';
-
-import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
-import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
-import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  article: {
-    type: Object,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['saveArticle', 'close']);
-
-const saveArticle = debounce(value => emit('saveArticle', value), 400, false);
-
-const { t } = useI18n();
-
-const state = reactive({
-  title: '',
-  description: '',
-  tags: [],
-});
-
-const updateState = () => {
-  state.title = props.article.meta?.title || '';
-  state.description = props.article.meta?.description || '';
-  state.tags = props.article.meta?.tags || [];
-};
-
-watch(
-  state,
-  newState => {
-    saveArticle({
-      title: newState.title,
-      description: newState.description,
-      tags: newState.tags,
-    });
-  },
-  { deep: true }
-);
-
-onMounted(() => {
-  updateState();
-});
-</script>
-
-<template>
-  <div
-    class="flex flex-col absolute w-[25rem] bg-n-alpha-3 outline outline-1 outline-n-container backdrop-blur-[100px] shadow-lg gap-6 rounded-xl p-6"
-  >
-    <div class="flex items-center justify-between">
-      <h3>
-        {{
-          t(
-            'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.ARTICLE_PROPERTIES'
-          )
-        }}
-      </h3>
-      <Button
-        icon="i-lucide-x"
-        size="sm"
-        variant="ghost"
-        color="slate"
-        class="hover:text-n-slate-11"
-        @click="emit('close')"
-      />
-    </div>
-    <div class="flex flex-col gap-2">
-      <div>
-        <div class="flex justify-between w-full gap-4 py-2">
-          <label
-            class="text-sm font-medium whitespace-nowrap min-w-[6.25rem] text-n-slate-12"
-          >
-            {{
-              t(
-                'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_DESCRIPTION'
-              )
-            }}
-          </label>
-          <TextArea
-            v-model="state.description"
-            :placeholder="
-              t(
-                'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_DESCRIPTION_PLACEHOLDER'
-              )
-            "
-            class="w-[13.75rem]"
-            custom-text-area-wrapper-class="!p-0 !border-0 !rounded-none !bg-transparent transition-none"
-            custom-text-area-class="max-h-[9.375rem]"
-            auto-height
-            min-height="3rem"
-          />
-        </div>
-        <div class="flex justify-between w-full gap-2 py-2">
-          <InlineInput
-            v-model="state.title"
-            :placeholder="
-              t(
-                'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TITLE_PLACEHOLDER'
-              )
-            "
-            :label="
-              t('HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TITLE')
-            "
-            custom-label-class="min-w-[7.5rem]"
-          />
-        </div>
-        <div class="flex justify-between w-full gap-3 py-2">
-          <label
-            class="text-sm font-medium whitespace-nowrap min-w-[7.5rem] text-n-slate-12"
-          >
-            {{
-              t('HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TAGS')
-            }}
-          </label>
-          <TagInput
-            v-model="state.tags"
-            :placeholder="
-              t(
-                'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TAGS_PLACEHOLDER'
-              )
-            "
-            class="w-[14rem]"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue
deleted file mode 100644
index 6565fab..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue
+++ /dev/null
@@ -1,197 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import { OnClickOutside } from '@vueuse/components';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-import {
-  ARTICLE_TABS,
-  CATEGORY_ALL,
-  ARTICLE_TABS_OPTIONS,
-} from 'dashboard/helper/portalHelper';
-
-import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-
-const props = defineProps({
-  categories: {
-    type: Array,
-    required: true,
-  },
-  allowedLocales: {
-    type: Array,
-    required: true,
-  },
-  meta: {
-    type: Object,
-    required: true,
-  },
-});
-
-const emit = defineEmits([
-  'tabChange',
-  'localeChange',
-  'categoryChange',
-  'newArticle',
-]);
-
-const route = useRoute();
-const { t } = useI18n();
-const { updateUISettings } = useUISettings();
-
-const isCategoryMenuOpen = ref(false);
-const isLocaleMenuOpen = ref(false);
-
-const countKey = tab => {
-  if (tab.value === 'all') {
-    return 'articlesCount';
-  }
-  return `${tab.value}ArticlesCount`;
-};
-
-const tabs = computed(() => {
-  return ARTICLE_TABS_OPTIONS.map(tab => ({
-    label: t(`HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.TABS.${tab.key}`),
-    value: tab.value,
-    count: props.meta[countKey(tab)],
-  }));
-});
-
-const activeTabIndex = computed(() => {
-  const tabParam = route.params.tab || ARTICLE_TABS.ALL;
-  return tabs.value.findIndex(tab => tab.value === tabParam);
-});
-
-const activeCategoryName = computed(() => {
-  const activeCategory = props.categories.find(
-    category => category.slug === route.params.categorySlug
-  );
-
-  if (activeCategory) {
-    const { icon, name } = activeCategory;
-    return `${icon} ${name}`;
-  }
-
-  return t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.CATEGORY.ALL');
-});
-
-const activeLocaleName = computed(() => {
-  return props.allowedLocales.find(
-    locale => locale.code === route.params.locale
-  )?.name;
-});
-
-const categoryMenuItems = computed(() => {
-  const defaultMenuItem = {
-    label: t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.CATEGORY.ALL'),
-    value: CATEGORY_ALL,
-    action: 'filter',
-  };
-
-  const categoryItems = props.categories.map(category => ({
-    label: category.name,
-    value: category.slug,
-    action: 'filter',
-    emoji: category.icon,
-  }));
-
-  const hasCategorySlug = !!route.params.categorySlug;
-
-  return hasCategorySlug ? [defaultMenuItem, ...categoryItems] : categoryItems;
-});
-
-const hasCategoryMenuItems = computed(() => {
-  return categoryMenuItems.value?.length > 0;
-});
-
-const localeMenuItems = computed(() => {
-  return props.allowedLocales.map(locale => ({
-    label: locale.name,
-    value: locale.code,
-    action: 'filter',
-  }));
-});
-
-const handleLocaleAction = ({ value }) => {
-  emit('localeChange', value);
-  isLocaleMenuOpen.value = false;
-  updateUISettings({
-    last_active_locale_code: value,
-  });
-};
-
-const handleCategoryAction = ({ value }) => {
-  emit('categoryChange', value);
-  isCategoryMenuOpen.value = false;
-};
-
-const handleNewArticle = () => {
-  emit('newArticle');
-};
-
-const handleTabChange = value => {
-  emit('tabChange', value);
-};
-</script>
-
-<template>
-  <div class="flex flex-col items-start w-full gap-2 lg:flex-row">
-    <TabBar
-      :tabs="tabs"
-      :initial-active-tab="activeTabIndex"
-      @tab-changed="handleTabChange"
-    />
-    <div class="flex items-start justify-between w-full gap-2">
-      <div class="flex items-center gap-2">
-        <div class="relative group">
-          <OnClickOutside @trigger="isLocaleMenuOpen = false">
-            <Button
-              :label="activeLocaleName"
-              size="sm"
-              icon="i-lucide-chevron-down"
-              color="slate"
-              trailing-icon
-              @click="isLocaleMenuOpen = !isLocaleMenuOpen"
-            />
-
-            <DropdownMenu
-              v-if="isLocaleMenuOpen"
-              :menu-items="localeMenuItems"
-              show-search
-              class="left-0 w-40 max-w-[300px] mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
-              @action="handleLocaleAction"
-            />
-          </OnClickOutside>
-        </div>
-        <div v-if="hasCategoryMenuItems" class="relative group">
-          <OnClickOutside @trigger="isCategoryMenuOpen = false">
-            <Button
-              :label="activeCategoryName"
-              icon="i-lucide-chevron-down"
-              size="sm"
-              color="slate"
-              trailing-icon
-              class="max-w-48"
-              @click="isCategoryMenuOpen = !isCategoryMenuOpen"
-            />
-
-            <DropdownMenu
-              v-if="isCategoryMenuOpen"
-              :menu-items="categoryMenuItems"
-              show-search
-              class="left-0 w-48 mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
-              @action="handleCategoryAction"
-            />
-          </OnClickOutside>
-        </div>
-      </div>
-      <Button
-        :label="t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.NEW_ARTICLE')"
-        icon="i-lucide-plus"
-        size="sm"
-        @click="handleNewArticle"
-      />
-    </div>
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue
deleted file mode 100644
index 756857f..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue
+++ /dev/null
@@ -1,199 +0,0 @@
-<script setup>
-import { ref, computed, watch } from 'vue';
-import Draggable from 'vuedraggable';
-import { useMapGetter, useStore } from 'dashboard/composables/store.js';
-import { useRouter, useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-import { getArticleStatus } from 'dashboard/helper/portalHelper.js';
-import wootConstants from 'dashboard/constants/globals';
-
-import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
-
-const props = defineProps({
-  articles: {
-    type: Array,
-    required: true,
-  },
-  isCategoryArticles: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const { ARTICLE_STATUS_TYPES } = wootConstants;
-
-const router = useRouter();
-const route = useRoute();
-const store = useStore();
-const { t } = useI18n();
-
-const localArticles = ref(props.articles);
-
-const dragEnabled = computed(() => {
-  // Enable dragging only for category articles and when there's more than one article
-  return props.isCategoryArticles && localArticles.value?.length > 1;
-});
-
-const getCategoryById = useMapGetter('categories/categoryById');
-
-const openArticle = id => {
-  const { tab, categorySlug, locale } = route.params;
-  if (props.isCategoryArticles) {
-    router.push({
-      name: 'portals_categories_articles_edit',
-      params: { articleSlug: id },
-    });
-  } else {
-    router.push({
-      name: 'portals_articles_edit',
-      params: {
-        articleSlug: id,
-        tab,
-        categorySlug,
-        locale,
-      },
-    });
-  }
-};
-
-const onReorder = reorderedGroup => {
-  store.dispatch('articles/reorder', {
-    reorderedGroup,
-    portalSlug: route.params.portalSlug,
-  });
-};
-
-const onDragEnd = () => {
-  // Reuse existing positions to maintain order within the current group
-  const sortedArticlePositions = localArticles.value
-    .map(article => article.position)
-    .sort((a, b) => a - b); // Use custom sort to handle numeric values correctly
-
-  const orderedArticles = localArticles.value.map(article => article.id);
-
-  // Create a map of article IDs to their new positions
-  const reorderedGroup = orderedArticles.reduce((obj, key, index) => {
-    obj[key] = sortedArticlePositions[index];
-    return obj;
-  }, {});
-
-  onReorder(reorderedGroup);
-};
-
-const getCategory = categoryId => {
-  return getCategoryById.value(categoryId) || { name: '', icon: '' };
-};
-
-const getStatusMessage = (status, isSuccess) => {
-  const messageType = isSuccess ? 'SUCCESS' : 'ERROR';
-  const statusMap = {
-    [ARTICLE_STATUS_TYPES.PUBLISH]: 'PUBLISH_ARTICLE',
-    [ARTICLE_STATUS_TYPES.ARCHIVE]: 'ARCHIVE_ARTICLE',
-    [ARTICLE_STATUS_TYPES.DRAFT]: 'DRAFT_ARTICLE',
-  };
-
-  return statusMap[status]
-    ? t(`HELP_CENTER.${statusMap[status]}.API.${messageType}`)
-    : '';
-};
-
-const updatePortalMeta = () => {
-  const { portalSlug, locale } = route.params;
-  return store.dispatch('portals/show', { portalSlug, locale });
-};
-
-const updateArticlesMeta = () => {
-  const { portalSlug, locale } = route.params;
-  return store.dispatch('articles/updateArticleMeta', {
-    portalSlug,
-    locale,
-  });
-};
-
-const handleArticleAction = async (action, { status, id }) => {
-  const { portalSlug } = route.params;
-  try {
-    if (action === 'delete') {
-      await store.dispatch('articles/delete', {
-        portalSlug,
-        articleId: id,
-      });
-      useAlert(t('HELP_CENTER.DELETE_ARTICLE.API.SUCCESS_MESSAGE'));
-    } else {
-      await store.dispatch('articles/update', {
-        portalSlug,
-        articleId: id,
-        status,
-      });
-      useAlert(getStatusMessage(status, true));
-
-      if (status === ARTICLE_STATUS_TYPES.ARCHIVE) {
-        useTrack(PORTALS_EVENTS.ARCHIVE_ARTICLE, { uiFrom: 'header' });
-      } else if (status === ARTICLE_STATUS_TYPES.PUBLISH) {
-        useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
-      }
-    }
-    await updateArticlesMeta();
-    await updatePortalMeta();
-  } catch (error) {
-    const errorMessage =
-      error?.message ||
-      (action === 'delete'
-        ? t('HELP_CENTER.DELETE_ARTICLE.API.ERROR_MESSAGE')
-        : getStatusMessage(status, false));
-    useAlert(errorMessage);
-  }
-};
-
-const updateArticle = ({ action, value, id }) => {
-  const status = action !== 'delete' ? getArticleStatus(value) : null;
-  handleArticleAction(action, { status, id });
-};
-
-// Watch for changes in the articles prop and update the localArticles ref
-watch(
-  () => props.articles,
-  newArticles => {
-    localArticles.value = newArticles;
-  },
-  { deep: true }
-);
-</script>
-
-<template>
-  <Draggable
-    v-model="localArticles"
-    :disabled="!dragEnabled"
-    item-key="id"
-    tag="ul"
-    ghost-class="article-ghost-class"
-    class="w-full h-full space-y-4"
-    @end="onDragEnd"
-  >
-    <template #item="{ element }">
-      <li class="list-none rounded-2xl">
-        <ArticleCard
-          :id="element.id"
-          :key="element.id"
-          :title="element.title"
-          :status="element.status"
-          :author="element.author"
-          :category="getCategory(element.category.id)"
-          :views="element.views || 0"
-          :updated-at="element.updatedAt"
-          :class="{ 'cursor-grab': dragEnabled }"
-          @open-article="openArticle"
-          @article-action="updateArticle"
-        />
-      </li>
-    </template>
-  </Draggable>
-</template>
-
-<style lang="scss" scoped>
-.article-ghost-class {
-  @apply opacity-50 bg-n-solid-1;
-}
-</style>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.story.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.story.vue
deleted file mode 100644
index 58c7ace..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.story.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<script setup>
-import ArticlesPage from './ArticlesPage.vue';
-
-const articles = [
-  {
-    title: "How to get an SSL certificate for your Help Center's custom domain",
-    status: 'draft',
-    updatedAt: '2 days ago',
-    author: 'Michael',
-    category: '⚡️ Marketing',
-    views: 3400,
-  },
-  {
-    title: 'Setting up your first Help Center portal',
-    status: '',
-    updatedAt: '1 week ago',
-    author: 'John',
-    category: '🛠️ Development',
-    views: 400,
-  },
-  {
-    title: 'Best practices for organizing your Help Center content',
-    status: 'archived',
-    updatedAt: '3 days ago',
-    author: 'Fernando',
-    category: '💰 Finance',
-    views: 400,
-  },
-  {
-    title: 'Customizing the appearance of your Help Center',
-    status: '',
-    updatedAt: '5 days ago',
-    author: 'Jane',
-    category: '💰 Finance',
-    views: 400,
-  },
-  {
-    title: 'Best practices for organizing your Help Center content',
-    status: 'archived',
-    updatedAt: '3 days ago',
-    author: 'Fernando',
-    category: '💰 Finance',
-    views: 400,
-  },
-  {
-    title: 'Customizing the appearance of your Help Center',
-    status: '',
-    updatedAt: '5 days ago',
-    author: 'Jane',
-    category: '💰 Finance',
-    views: 400,
-  },
-  {
-    title: 'Best practices for organizing your Help Center content',
-    status: 'archived',
-    updatedAt: '3 days ago',
-    author: 'Fernando',
-    category: '💰 Finance',
-    views: 400,
-  },
-];
-</script>
-
-<template>
-  <Story title="Pages/HelpCenter/ArticlesPage" :layout="{ type: 'single' }">
-    <Variant title="All Articles">
-      <div class="w-full min-h-screen bg-n-background">
-        <ArticlesPage :articles="articles" />
-      </div>
-    </Variant>
-  </Story>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue
deleted file mode 100644
index e31d40d..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useMapGetter } from 'dashboard/composables/store.js';
-import { ARTICLE_TABS, CATEGORY_ALL } from 'dashboard/helper/portalHelper';
-
-import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
-import ArticleList from 'dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue';
-import ArticleHeaderControls from 'dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue';
-import CategoryHeaderControls from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import ArticleEmptyState from 'dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue';
-
-const props = defineProps({
-  articles: {
-    type: Array,
-    required: true,
-  },
-  categories: {
-    type: Array,
-    required: true,
-  },
-  allowedLocales: {
-    type: Array,
-    required: true,
-  },
-  portalName: {
-    type: String,
-    required: true,
-  },
-  meta: {
-    type: Object,
-    required: true,
-  },
-  isCategoryArticles: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['pageChange', 'fetchPortal']);
-
-const router = useRouter();
-const route = useRoute();
-const { t } = useI18n();
-
-const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
-const isFetching = useMapGetter('articles/isFetching');
-
-const hasNoArticles = computed(
-  () => !isFetching.value && !props.articles.length
-);
-
-const isLoading = computed(() => isFetching.value || isSwitchingPortal.value);
-
-const totalArticlesCount = computed(() => props.meta.allArticlesCount);
-
-const hasNoArticlesInPortal = computed(
-  () => totalArticlesCount.value === 0 && !props.isCategoryArticles
-);
-
-const shouldShowPaginationFooter = computed(() => {
-  return !(isFetching.value || isSwitchingPortal.value || hasNoArticles.value);
-});
-
-const updateRoute = newParams => {
-  const { portalSlug, locale, tab, categorySlug } = route.params;
-  router.push({
-    name: 'portals_articles_index',
-    params: {
-      portalSlug,
-      locale: newParams.locale ?? locale,
-      tab: newParams.tab ?? tab,
-      categorySlug: newParams.categorySlug ?? categorySlug,
-      ...newParams,
-    },
-  });
-};
-
-const articlesCount = computed(() => {
-  const { tab } = route.params;
-  const { meta } = props;
-  const countMap = {
-    '': meta.articlesCount,
-    mine: meta.mineArticlesCount,
-    draft: meta.draftArticlesCount,
-    archived: meta.archivedArticlesCount,
-  };
-  return Number(countMap[tab] || countMap['']);
-});
-
-const showArticleHeaderControls = computed(
-  () => !props.isCategoryArticles && !isSwitchingPortal.value
-);
-
-const showCategoryHeaderControls = computed(
-  () => props.isCategoryArticles && !isSwitchingPortal.value
-);
-
-const getEmptyStateText = type => {
-  if (props.isCategoryArticles) {
-    return t(`HELP_CENTER.ARTICLES_PAGE.EMPTY_STATE.CATEGORY.${type}`);
-  }
-  const tabName = route.params.tab?.toUpperCase() || 'ALL';
-  return t(`HELP_CENTER.ARTICLES_PAGE.EMPTY_STATE.${tabName}.${type}`);
-};
-
-const getEmptyStateTitle = computed(() => getEmptyStateText('TITLE'));
-const getEmptyStateSubtitle = computed(() => getEmptyStateText('SUBTITLE'));
-
-const handleTabChange = tab =>
-  updateRoute({ tab: tab.value === ARTICLE_TABS.ALL ? '' : tab.value });
-
-const handleCategoryAction = value =>
-  updateRoute({ categorySlug: value === CATEGORY_ALL ? '' : value });
-
-const handleLocaleAction = value => {
-  updateRoute({ locale: value, categorySlug: '' });
-  emit('fetchPortal', value);
-};
-const handlePageChange = page => emit('pageChange', page);
-
-const navigateToNewArticlePage = () => {
-  const { categorySlug, locale } = route.params;
-  router.push({
-    name: 'portals_articles_new',
-    params: { categorySlug, locale },
-  });
-};
-</script>
-
-<template>
-  <HelpCenterLayout
-    :current-page="Number(meta.currentPage)"
-    :total-items="articlesCount"
-    :items-per-page="25"
-    :header="portalName"
-    :show-pagination-footer="shouldShowPaginationFooter"
-    @update:current-page="handlePageChange"
-  >
-    <template #header-actions>
-      <div class="flex items-end justify-between">
-        <ArticleHeaderControls
-          v-if="showArticleHeaderControls"
-          :categories="categories"
-          :allowed-locales="allowedLocales"
-          :meta="meta"
-          @tab-change="handleTabChange"
-          @locale-change="handleLocaleAction"
-          @category-change="handleCategoryAction"
-          @new-article="navigateToNewArticlePage"
-        />
-        <CategoryHeaderControls
-          v-else-if="showCategoryHeaderControls"
-          :categories="categories"
-          :allowed-locales="allowedLocales"
-          :has-selected-category="isCategoryArticles"
-        />
-      </div>
-    </template>
-    <template #content>
-      <div
-        v-if="isLoading"
-        class="flex items-center justify-center py-10 text-n-slate-11"
-      >
-        <Spinner />
-      </div>
-      <ArticleList
-        v-else-if="!hasNoArticles"
-        :articles="articles"
-        :is-category-articles="isCategoryArticles"
-      />
-      <ArticleEmptyState
-        v-else
-        class="pt-14"
-        :title="getEmptyStateTitle"
-        :subtitle="getEmptyStateSubtitle"
-        :show-button="hasNoArticlesInPortal"
-        :button-label="
-          t('HELP_CENTER.ARTICLES_PAGE.EMPTY_STATE.ALL.BUTTON_LABEL')
-        "
-        @click="navigateToNewArticlePage"
-      />
-    </template>
-  </HelpCenterLayout>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.story.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.story.vue
deleted file mode 100644
index 6165949..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.story.vue
+++ /dev/null
@@ -1,209 +0,0 @@
-<script setup>
-import CategoriesPage from './CategoriesPage.vue';
-
-const categories = [
-  {
-    id: 'getting-started',
-    title: '🚀 Getting started',
-    description:
-      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
-    articlesCount: '2',
-    articles: [
-      {
-        variant: 'Draft article',
-        title:
-          "How to get an SSL certificate for your Help Center's custom domain",
-        status: 'draft',
-        updatedAt: '2 days ago',
-        author: 'Michael',
-        category: '⚡️ Marketing',
-        views: 3400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-    ],
-  },
-  {
-    id: 'marketing',
-    title: 'Marketing',
-    description:
-      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support.',
-    articlesCount: '4',
-    articles: [
-      {
-        variant: 'Draft article',
-        title:
-          "How to get an SSL certificate for your Help Center's custom domain",
-        status: 'draft',
-        updatedAt: '2 days ago',
-        author: 'Michael',
-        category: '⚡️ Marketing',
-        views: 3400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-      {
-        variant: 'Archived article',
-        title: 'Best practices for organizing your Help Center content',
-        status: 'archived',
-        updatedAt: '3 days ago',
-        author: 'Fernando',
-        category: '💰 Finance',
-        views: 400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Customizing the appearance of your Help Center',
-        status: '',
-        updatedAt: '5 days ago',
-        author: 'Jane',
-        category: '💰 Finance',
-        views: 400,
-      },
-    ],
-  },
-  {
-    id: 'development',
-    title: 'Development',
-    description: '',
-    articlesCount: '5',
-    articles: [
-      {
-        variant: 'Draft article',
-        title:
-          "How to get an SSL certificate for your Help Center's custom domain",
-        status: 'draft',
-        updatedAt: '2 days ago',
-        author: 'Michael',
-        category: '⚡️ Marketing',
-        views: 3400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-      {
-        variant: 'Archived article',
-        title: 'Best practices for organizing your Help Center content',
-        status: 'archived',
-        updatedAt: '3 days ago',
-        author: 'Fernando',
-        category: '💰 Finance',
-        views: 400,
-      },
-      {
-        variant: 'Archived article',
-        title: 'Best practices for organizing your Help Center content',
-        status: 'archived',
-        updatedAt: '3 days ago',
-        author: 'Fernando',
-        category: '💰 Finance',
-        views: 400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Customizing the appearance of your Help Center',
-        status: '',
-        updatedAt: '5 days ago',
-        author: 'Jane',
-        category: '💰 Finance',
-        views: 400,
-      },
-    ],
-  },
-  {
-    id: 'roadmap',
-    title: '🛣️ Roadmap',
-    description:
-      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
-    articlesCount: '3',
-    articles: [
-      {
-        variant: 'Draft article',
-        title:
-          "How to get an SSL certificate for your Help Center's custom domain",
-        status: 'draft',
-        updatedAt: '2 days ago',
-        author: 'Michael',
-        category: '⚡️ Marketing',
-        views: 3400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-    ],
-  },
-  {
-    id: 'finance',
-    title: '💰 Finance',
-    description:
-      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
-    articlesCount: '2',
-    articles: [
-      {
-        variant: 'Draft article',
-        title:
-          "How to get an SSL certificate for your Help Center's custom domain",
-        status: 'draft',
-        updatedAt: '2 days ago',
-        author: 'Michael',
-        category: '⚡️ Marketing',
-        views: 3400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-    ],
-  },
-];
-</script>
-
-<template>
-  <Story title="Pages/HelpCenter/CategoryPage" :layout="{ type: 'single' }">
-    <Variant title="All Categories">
-      <div class="w-full min-h-screen bg-n-background">
-        <CategoriesPage :categories="categories" />
-      </div>
-    </Variant>
-  </Story>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.vue
deleted file mode 100644
index 12acd1b..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-
-import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
-import CategoryList from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue';
-import CategoryHeaderControls from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue';
-import CategoryEmptyState from 'dashboard/components-next/HelpCenter/EmptyState/Category/CategoryEmptyState.vue';
-import EditCategoryDialog from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-
-const props = defineProps({
-  categories: {
-    type: Array,
-    required: true,
-  },
-  isFetching: {
-    type: Boolean,
-    required: false,
-  },
-  allowedLocales: {
-    type: Array,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['fetchCategories']);
-
-const route = useRoute();
-const router = useRouter();
-const store = useStore();
-const { t } = useI18n();
-
-const editCategoryDialog = ref(null);
-const selectedCategory = ref(null);
-
-const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
-const isLoading = computed(() => props.isFetching || isSwitchingPortal.value);
-const hasCategories = computed(() => props.categories?.length > 0);
-
-const updateRoute = (newParams, routeName) => {
-  const { accountId, portalSlug, locale } = route.params;
-  const baseParams = { accountId, portalSlug, locale };
-
-  router.push({
-    name: routeName,
-    params: {
-      ...baseParams,
-      ...newParams,
-      categorySlug: newParams.categorySlug,
-    },
-  });
-};
-
-const openCategoryArticles = slug => {
-  updateRoute({ categorySlug: slug }, 'portals_categories_articles_index');
-};
-
-const handleLocaleChange = value => {
-  updateRoute({ locale: value }, 'portals_categories_index');
-  emit('fetchCategories', value);
-};
-
-async function deleteCategory(category) {
-  try {
-    await store.dispatch('categories/delete', {
-      portalSlug: route.params.portalSlug,
-      categoryId: category.id,
-    });
-
-    useTrack(PORTALS_EVENTS.DELETE_CATEGORY, {
-      hasArticles: category?.meta?.articles_count > 0,
-    });
-
-    useAlert(
-      t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.DELETE.API.SUCCESS_MESSAGE')
-    );
-  } catch (error) {
-    useAlert(
-      error.message ||
-        t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.DELETE.API.ERROR_MESSAGE')
-    );
-  }
-}
-
-const handleAction = ({ action, id, category: categoryData }) => {
-  if (action === 'edit') {
-    selectedCategory.value = props.categories.find(
-      category => category.id === id
-    );
-    editCategoryDialog.value.dialogRef.open();
-  }
-  if (action === 'delete') {
-    deleteCategory(categoryData);
-  }
-};
-</script>
-
-<template>
-  <HelpCenterLayout :show-pagination-footer="false">
-    <template #header-actions>
-      <CategoryHeaderControls
-        :categories="categories"
-        :is-category-articles="false"
-        :allowed-locales="allowedLocales"
-        @locale-change="handleLocaleChange"
-      />
-    </template>
-    <template #content>
-      <div
-        v-if="isLoading"
-        class="flex items-center justify-center py-10 text-n-slate-11"
-      >
-        <Spinner />
-      </div>
-      <CategoryList
-        v-else-if="hasCategories"
-        :categories="categories"
-        @click="openCategoryArticles"
-        @action="handleAction"
-      />
-      <CategoryEmptyState
-        v-else
-        class="pt-14"
-        :title="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_EMPTY_STATE.TITLE')"
-        :subtitle="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_EMPTY_STATE.SUBTITLE')"
-      />
-    </template>
-    <EditCategoryDialog
-      ref="editCategoryDialog"
-      :allowed-locales="allowedLocales"
-      :selected-category="selectedCategory"
-    />
-  </HelpCenterLayout>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue
deleted file mode 100644
index d71c172..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { useRoute } from 'vue-router';
-import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-
-import CategoryForm from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue';
-
-const props = defineProps({
-  mode: {
-    type: String,
-    default: 'edit',
-    validator: value => ['edit', 'create'].includes(value),
-  },
-  selectedCategory: {
-    type: Object,
-    default: () => ({}),
-  },
-  portalName: {
-    type: String,
-    default: '',
-  },
-  activeLocaleName: {
-    type: String,
-    default: '',
-  },
-  activeLocaleCode: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['close']);
-
-const store = useStore();
-const { t } = useI18n();
-const route = useRoute();
-
-const handleCategory = async formData => {
-  const { id, name, slug, icon, description, locale } = formData;
-  const categoryData = { name, icon, slug, description };
-
-  if (props.mode === 'create') {
-    categoryData.locale = locale;
-  } else {
-    categoryData.id = id;
-  }
-
-  try {
-    const action = props.mode === 'edit' ? 'update' : 'create';
-    const payload = {
-      portalSlug: route.params.portalSlug,
-      categoryObj: categoryData,
-    };
-
-    if (action === 'update') {
-      payload.categoryId = id;
-    }
-
-    await store.dispatch(`categories/${action}`, payload);
-
-    const successMessage = t(
-      `HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.${props.mode.toUpperCase()}.API.SUCCESS_MESSAGE`
-    );
-    useAlert(successMessage);
-
-    const trackEvent =
-      props.mode === 'edit'
-        ? PORTALS_EVENTS.EDIT_CATEGORY
-        : PORTALS_EVENTS.CREATE_CATEGORY;
-    useTrack(
-      trackEvent,
-      props.mode === 'create'
-        ? { hasDescription: Boolean(description) }
-        : undefined
-    );
-
-    emit('close');
-  } catch (error) {
-    const errorMessage =
-      error?.message ||
-      t(
-        `HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.${props.mode.toUpperCase()}.API.ERROR_MESSAGE`
-      );
-    useAlert(errorMessage);
-  }
-};
-</script>
-
-<template>
-  <div
-    class="w-[25rem] absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-n-weak shadow-md flex flex-col gap-6"
-  >
-    <h3 class="text-base font-medium text-n-slate-12">
-      {{
-        t(
-          `HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.${mode.toUpperCase()}`
-        )
-      }}
-    </h3>
-    <CategoryForm
-      :mode="mode"
-      :selected-category="selectedCategory"
-      :active-locale-code="activeLocaleCode"
-      :portal-name="portalName"
-      :active-locale-name="activeLocaleName"
-      @submit="handleCategory"
-      @cancel="emit('close')"
-    />
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
deleted file mode 100644
index ee9f60f..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
+++ /dev/null
@@ -1,272 +0,0 @@
-<script setup>
-import {
-  reactive,
-  ref,
-  watch,
-  computed,
-  defineAsyncComponent,
-  onMounted,
-} from 'vue';
-import { useI18n } from 'vue-i18n';
-import { OnClickOutside } from '@vueuse/components';
-import { useStoreGetters, useMapGetter } from 'dashboard/composables/store';
-import { useRoute } from 'vue-router';
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
-import { convertToCategorySlug } from 'dashboard/helper/commons.js';
-
-import Input from 'dashboard/components-next/input/Input.vue';
-import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  mode: {
-    type: String,
-    required: true,
-    validator: value => ['edit', 'create'].includes(value),
-  },
-  selectedCategory: {
-    type: Object,
-    default: () => ({}),
-  },
-  activeLocaleCode: {
-    type: String,
-    default: '',
-  },
-  showActionButtons: {
-    type: Boolean,
-    default: true,
-  },
-  portalName: {
-    type: String,
-    default: '',
-  },
-  activeLocaleName: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['submit', 'cancel']);
-
-const EmojiInput = defineAsyncComponent(
-  () => import('shared/components/emoji/EmojiInput.vue')
-);
-
-const { t } = useI18n();
-const route = useRoute();
-const getters = useStoreGetters();
-
-const isCreating = useMapGetter('categories/isCreating');
-
-const isUpdatingCategory = computed(() => {
-  const id = props.selectedCategory?.id;
-  if (id) return getters['categories/uiFlags'].value(id)?.isUpdating;
-
-  return false;
-});
-
-const isEmojiPickerOpen = ref(false);
-
-const state = reactive({
-  id: '',
-  name: '',
-  icon: '',
-  slug: '',
-  description: '',
-  locale: '',
-});
-
-const isEditMode = computed(() => props.mode === 'edit');
-
-const rules = {
-  name: { required, minLength: minLength(1) },
-  slug: { required },
-};
-
-const v$ = useVuelidate(rules, state);
-
-const isSubmitDisabled = computed(() => v$.value.$invalid);
-
-const nameError = computed(() =>
-  v$.value.name.$error
-    ? t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.NAME.ERROR')
-    : ''
-);
-
-const slugError = computed(() =>
-  v$.value.slug.$error
-    ? t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.SLUG.ERROR')
-    : ''
-);
-
-const slugHelpText = computed(() => {
-  const { portalSlug, locale } = route.params;
-  return t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.SLUG.HELP_TEXT', {
-    portalSlug,
-    localeCode: locale,
-    categorySlug: state.slug,
-  });
-});
-
-const onClickInsertEmoji = emoji => {
-  state.icon = emoji;
-  isEmojiPickerOpen.value = false;
-};
-
-const handleSubmit = async () => {
-  const isFormCorrect = await v$.value.$validate();
-  if (!isFormCorrect) return;
-
-  emit('submit', { ...state });
-};
-
-const handleCancel = () => {
-  emit('cancel');
-};
-
-watch(
-  () => state.name,
-  () => {
-    if (!isEditMode.value) {
-      state.slug = convertToCategorySlug(state.name);
-    }
-  }
-);
-
-watch(
-  () => props.selectedCategory,
-  newCategory => {
-    if (props.mode === 'edit' && newCategory) {
-      const { id, name, icon, slug, description } = newCategory;
-      Object.assign(state, { id, name, icon, slug, description });
-    }
-  },
-  { immediate: true }
-);
-
-onMounted(() => {
-  if (props.mode === 'create') {
-    state.locale = props.activeLocaleCode;
-  }
-});
-
-defineExpose({ state, isSubmitDisabled });
-</script>
-
-<template>
-  <div class="flex flex-col gap-4">
-    <div
-      class="flex items-center justify-start gap-8 px-4 py-2 border rounded-lg border-n-strong"
-    >
-      <div class="flex flex-col items-start w-full gap-2 py-2">
-        <span class="text-sm font-medium text-n-slate-11">
-          {{ t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.PORTAL') }}
-        </span>
-        <span class="text-sm text-n-slate-12">
-          {{ portalName }}
-        </span>
-      </div>
-      <div class="justify-start w-px h-10 bg-n-strong" />
-      <div class="flex flex-col w-full gap-2 py-2">
-        <span class="text-sm font-medium text-n-slate-11">
-          {{ t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.LOCALE') }}
-        </span>
-        <span
-          :title="`${activeLocaleName} (${activeLocaleCode})`"
-          class="text-sm line-clamp-1 text-n-slate-12"
-        >
-          {{ `${activeLocaleName} (${activeLocaleCode})` }}
-        </span>
-      </div>
-    </div>
-    <div class="flex flex-col gap-4">
-      <div class="relative">
-        <Input
-          v-model="state.name"
-          :label="
-            t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.NAME.LABEL')
-          "
-          :placeholder="
-            t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.NAME.PLACEHOLDER')
-          "
-          :message="nameError"
-          :message-type="nameError ? 'error' : 'info'"
-          custom-input-class="!h-10 ltr:!pl-12 rtl:!pr-12"
-        >
-          <template #prefix>
-            <OnClickOutside @trigger="isEmojiPickerOpen = false">
-              <Button
-                :label="state.icon"
-                color="slate"
-                size="sm"
-                type="button"
-                :icon="!state.icon ? 'i-lucide-smile-plus' : ''"
-                class="!h-[2.4rem] !w-[2.375rem] absolute top-[1.94rem] !outline-none !rounded-[0.438rem] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
-                @click="isEmojiPickerOpen = !isEmojiPickerOpen"
-              />
-              <EmojiInput
-                v-if="isEmojiPickerOpen"
-                class="left-0 top-16"
-                show-remove-button
-                :on-click="onClickInsertEmoji"
-              />
-            </OnClickOutside>
-          </template>
-        </Input>
-      </div>
-      <Input
-        v-model="state.slug"
-        :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.SLUG.LABEL')"
-        :placeholder="
-          t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.SLUG.PLACEHOLDER')
-        "
-        :disabled="isEditMode"
-        :message="slugError ? slugError : slugHelpText"
-        :message-type="slugError ? 'error' : 'info'"
-        custom-input-class="!h-10"
-      />
-      <TextArea
-        v-model="state.description"
-        :label="
-          t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.DESCRIPTION.LABEL')
-        "
-        :placeholder="
-          t(
-            'HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.DESCRIPTION.PLACEHOLDER'
-          )
-        "
-        show-character-count
-      />
-      <div
-        v-if="showActionButtons"
-        class="flex items-center justify-between w-full gap-3"
-      >
-        <Button
-          variant="faded"
-          color="slate"
-          :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.BUTTONS.CANCEL')"
-          class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
-          @click="handleCancel"
-        />
-        <Button
-          :label="
-            t(
-              `HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.BUTTONS.${mode.toUpperCase()}`
-            )
-          "
-          class="w-full"
-          :disabled="isSubmitDisabled || isCreating || isUpdatingCategory"
-          :is-loading="isCreating || isUpdatingCategory"
-          @click="handleSubmit"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.emoji-dialog::before {
-  @apply hidden;
-}
-</style>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue
deleted file mode 100644
index d4e76cf..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue
+++ /dev/null
@@ -1,201 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { OnClickOutside } from '@vueuse/components';
-import { useStoreGetters } from 'dashboard/composables/store.js';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-import CategoryDialog from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue';
-
-const props = defineProps({
-  categories: {
-    type: Array,
-    default: () => [],
-  },
-  allowedLocales: {
-    type: Array,
-    default: () => [],
-  },
-  hasSelectedCategory: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['localeChange']);
-
-const route = useRoute();
-const router = useRouter();
-const getters = useStoreGetters();
-const { t } = useI18n();
-
-const isLocaleMenuOpen = ref(false);
-const isCreateCategoryDialogOpen = ref(false);
-const isEditCategoryDialogOpen = ref(false);
-
-const currentPortalSlug = computed(() => {
-  return route.params.portalSlug;
-});
-
-const currentPortal = computed(() => {
-  const slug = currentPortalSlug.value;
-  if (slug) return getters['portals/portalBySlug'].value(slug);
-
-  return getters['portals/allPortals'].value[0];
-});
-
-const currentPortalName = computed(() => {
-  return currentPortal.value?.name;
-});
-
-const activeLocale = computed(() => {
-  return props.allowedLocales.find(
-    locale => locale.code === route.params.locale
-  );
-});
-
-const activeLocaleName = computed(() => activeLocale.value?.name ?? '');
-const activeLocaleCode = computed(() => activeLocale.value?.code ?? '');
-
-const localeMenuItems = computed(() => {
-  return props.allowedLocales.map(locale => ({
-    label: locale.name,
-    value: locale.code,
-    action: 'filter',
-  }));
-});
-
-const selectedCategory = computed(() =>
-  props.categories.find(category => category.slug === route.params.categorySlug)
-);
-
-const selectedCategoryName = computed(() => {
-  return selectedCategory.value?.name;
-});
-
-const selectedCategoryCount = computed(
-  () => selectedCategory.value?.meta?.articles_count || 0
-);
-
-const selectedCategoryEmoji = computed(() => {
-  return selectedCategory.value?.icon;
-});
-
-const categoriesCount = computed(() => props.categories?.length);
-
-const breadcrumbItems = computed(() => {
-  const items = [
-    {
-      label: t(
-        'HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.BREADCRUMB.CATEGORY_LOCALE',
-        { localeCode: activeLocaleCode.value }
-      ),
-      link: '#',
-    },
-  ];
-  if (selectedCategory.value) {
-    items.push({
-      label: t(
-        'HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.BREADCRUMB.ACTIVE_CATEGORY',
-        {
-          categoryName: selectedCategoryName.value,
-          categoryCount: selectedCategoryCount.value,
-        }
-      ),
-      emoji: selectedCategoryEmoji.value,
-    });
-  }
-  return items;
-});
-
-const handleLocaleAction = ({ value }) => {
-  emit('localeChange', value);
-  isLocaleMenuOpen.value = false;
-};
-
-const handleBreadcrumbClick = () => {
-  const { categorySlug, ...otherParams } = route.params;
-  router.push({
-    name: 'portals_categories_index',
-    params: otherParams,
-  });
-};
-</script>
-
-<template>
-  <div class="flex items-center justify-between w-full">
-    <div v-if="!hasSelectedCategory" class="flex items-center gap-4">
-      <div class="relative group">
-        <OnClickOutside @trigger="isLocaleMenuOpen = false">
-          <Button
-            :label="activeLocaleName"
-            size="sm"
-            trailing-icon
-            icon="i-lucide-chevron-down"
-            color="slate"
-            @click="isLocaleMenuOpen = !isLocaleMenuOpen"
-          />
-          <DropdownMenu
-            v-if="isLocaleMenuOpen"
-            :menu-items="localeMenuItems"
-            show-search
-            class="left-0 w-40 mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
-            @action="handleLocaleAction"
-          />
-        </OnClickOutside>
-      </div>
-      <div class="w-px h-3.5 rounded my-auto bg-n-weak" />
-      <span class="min-w-0 text-sm font-medium truncate text-n-slate-12">
-        {{
-          t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.CATEGORIES_COUNT', {
-            n: categoriesCount,
-          })
-        }}
-      </span>
-    </div>
-    <Breadcrumb
-      v-else
-      :items="breadcrumbItems"
-      @click="handleBreadcrumbClick"
-    />
-    <div v-if="!hasSelectedCategory" class="relative">
-      <OnClickOutside @trigger="isCreateCategoryDialogOpen = false">
-        <Button
-          :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.NEW_CATEGORY')"
-          icon="i-lucide-plus"
-          size="sm"
-          @click="isCreateCategoryDialogOpen = !isCreateCategoryDialogOpen"
-        />
-        <CategoryDialog
-          v-if="isCreateCategoryDialogOpen"
-          mode="create"
-          :portal-name="currentPortalName"
-          :active-locale-name="activeLocaleName"
-          :active-locale-code="activeLocaleCode"
-          @close="isCreateCategoryDialogOpen = false"
-        />
-      </OnClickOutside>
-    </div>
-    <div v-else class="relative">
-      <OnClickOutside @trigger="isEditCategoryDialogOpen = false">
-        <Button
-          :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.EDIT_CATEGORY')"
-          color="slate"
-          size="sm"
-          @click="isEditCategoryDialogOpen = !isEditCategoryDialogOpen"
-        />
-        <CategoryDialog
-          v-if="isEditCategoryDialogOpen"
-          :selected-category="selectedCategory"
-          :portal-name="currentPortalName"
-          :active-locale-name="activeLocaleName"
-          :active-locale-code="activeLocaleCode"
-          @close="isEditCategoryDialogOpen = false"
-        />
-      </OnClickOutside>
-    </div>
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue
deleted file mode 100644
index 62cfd5c..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup>
-import CategoryCard from 'dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue';
-
-defineProps({
-  categories: {
-    type: Array,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['click', 'action']);
-
-const handleClick = slug => {
-  emit('click', slug);
-};
-
-const handleAction = ({ action, value, id }, category) => {
-  emit('action', { action, value, id, category });
-};
-</script>
-
-<template>
-  <ul role="list" class="grid w-full h-full grid-cols-1 gap-4 md:grid-cols-2">
-    <CategoryCard
-      v-for="category in categories"
-      :id="category.id"
-      :key="category.id"
-      :title="category.name"
-      :icon="category.icon"
-      :description="category.description"
-      :articles-count="category.meta.articles_count || 0"
-      :slug="category.slug"
-      @click="handleClick(category.slug)"
-      @action="handleAction($event, category)"
-    />
-  </ul>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue
deleted file mode 100644
index 5b339e5..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore, useStoreGetters } from 'dashboard/composables/store';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { useRoute } from 'vue-router';
-import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import CategoryForm from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue';
-
-const props = defineProps({
-  selectedCategory: {
-    type: Object,
-    default: () => ({}),
-  },
-  allowedLocales: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const { t } = useI18n();
-const store = useStore();
-const route = useRoute();
-const getters = useStoreGetters();
-
-const dialogRef = ref(null);
-const categoryFormRef = ref(null);
-
-const isUpdatingCategory = computed(() => {
-  const id = props.selectedCategory?.id;
-  if (id) return getters['categories/uiFlags'].value(id)?.isUpdating;
-
-  return false;
-});
-
-const isInvalidForm = computed(() => {
-  if (!categoryFormRef.value) return false;
-  const { isSubmitDisabled } = categoryFormRef.value;
-  return isSubmitDisabled;
-});
-
-const activeLocale = computed(() => {
-  return props.allowedLocales.find(
-    locale => locale.code === route.params.locale
-  );
-});
-
-const activeLocaleName = computed(() => activeLocale.value?.name ?? '');
-const activeLocaleCode = computed(() => activeLocale.value?.code ?? '');
-
-const onUpdateCategory = async () => {
-  if (!categoryFormRef.value) return;
-  const { state } = categoryFormRef.value;
-  const { id, name, slug, icon, description } = state;
-  const categoryData = { name, icon, slug, description };
-  categoryData.id = id;
-
-  try {
-    const payload = {
-      portalSlug: route.params.portalSlug,
-      categoryObj: categoryData,
-      categoryId: id,
-    };
-
-    await store.dispatch(`categories/update`, payload);
-
-    const successMessage = t(
-      `HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.EDIT.API.SUCCESS_MESSAGE`
-    );
-    useAlert(successMessage);
-    dialogRef.value.close();
-
-    const trackEvent = PORTALS_EVENTS.EDIT_CATEGORY;
-    useTrack(trackEvent, { hasDescription: Boolean(description) });
-  } catch (error) {
-    const errorMessage =
-      error?.message ||
-      t(`HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.EDIT.API.ERROR_MESSAGE`);
-    useAlert(errorMessage);
-  }
-};
-
-// Expose the dialogRef to the parent component
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="edit"
-    :title="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.EDIT')"
-    :description="
-      t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.DESCRIPTION')
-    "
-    :is-loading="isUpdatingCategory"
-    :disable-confirm-button="isUpdatingCategory || isInvalidForm"
-    @confirm="onUpdateCategory"
-  >
-    <CategoryForm
-      ref="categoryFormRef"
-      mode="edit"
-      :selected-category="selectedCategory"
-      :active-locale-code="activeLocaleCode"
-      :portal-name="route.params.portalSlug"
-      :active-locale-name="activeLocaleName"
-      :show-action-buttons="false"
-    />
-  </Dialog>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue
deleted file mode 100644
index 30044a5..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { useRoute } from 'vue-router';
-import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-import allLocales from 'shared/constants/locales.js';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
-
-const props = defineProps({
-  portal: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const { t } = useI18n();
-const store = useStore();
-const route = useRoute();
-
-const dialogRef = ref(null);
-const isUpdating = ref(false);
-
-const selectedLocale = ref('');
-
-const addedLocales = computed(() => {
-  const { allowed_locales: allowedLocales = [] } = props.portal?.config || {};
-  return allowedLocales.map(locale => locale.code);
-});
-
-const locales = computed(() => {
-  return Object.keys(allLocales)
-    .map(key => {
-      return {
-        value: key,
-        label: `${allLocales[key]} (${key})`,
-      };
-    })
-    .filter(locale => !addedLocales.value.includes(locale.value));
-});
-
-const onCreate = async () => {
-  if (!selectedLocale.value) return;
-
-  isUpdating.value = true;
-  const updatedLocales = [...addedLocales.value, selectedLocale.value];
-
-  try {
-    await store.dispatch('portals/update', {
-      portalSlug: props.portal?.slug,
-      config: {
-        allowed_locales: updatedLocales,
-        default_locale: props.portal?.meta?.default_locale,
-      },
-    });
-
-    useTrack(PORTALS_EVENTS.CREATE_LOCALE, {
-      localeAdded: selectedLocale.value,
-      totalLocales: updatedLocales.length,
-      from: route.name,
-    });
-
-    selectedLocale.value = '';
-    dialogRef.value?.close();
-    useAlert(
-      t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.API.SUCCESS_MESSAGE')
-    );
-  } catch (error) {
-    useAlert(
-      error?.message ||
-        t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.API.ERROR_MESSAGE')
-    );
-  } finally {
-    isUpdating.value = false;
-  }
-};
-
-// Expose the dialogRef to the parent component
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="edit"
-    :title="t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.TITLE')"
-    :description="t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.DESCRIPTION')"
-    @confirm="onCreate"
-  >
-    <div class="flex flex-col gap-6">
-      <ComboBox
-        v-model="selectedLocale"
-        :options="locales"
-        :placeholder="
-          t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.COMBOBOX.PLACEHOLDER')
-        "
-        class="[&>div>button:not(.focused)]:!outline-n-slate-5 [&>div>button:not(.focused)]:dark:!outline-n-slate-5"
-      />
-    </div>
-  </Dialog>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue
deleted file mode 100644
index 9f72b1a..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<script setup>
-import LocaleCard from 'dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-
-const props = defineProps({
-  locales: {
-    type: Array,
-    required: true,
-  },
-  portal: {
-    type: Object,
-    required: true,
-  },
-});
-
-const store = useStore();
-const { t } = useI18n();
-const route = useRoute();
-const { uiSettings, updateUISettings } = useUISettings();
-
-const isLocaleDefault = code => {
-  return props.portal?.meta?.default_locale === code;
-};
-
-const updatePortalLocales = async ({
-  newAllowedLocales,
-  defaultLocale,
-  messageKey,
-}) => {
-  let alertMessage = '';
-  try {
-    await store.dispatch('portals/update', {
-      portalSlug: props.portal.slug,
-      config: {
-        default_locale: defaultLocale,
-        allowed_locales: newAllowedLocales,
-      },
-    });
-
-    alertMessage = t(`HELP_CENTER.PORTAL.${messageKey}.API.SUCCESS_MESSAGE`);
-  } catch (error) {
-    alertMessage =
-      error?.message || t(`HELP_CENTER.PORTAL.${messageKey}.API.ERROR_MESSAGE`);
-  } finally {
-    useAlert(alertMessage);
-  }
-};
-
-const changeDefaultLocale = ({ localeCode }) => {
-  const newAllowedLocales = props.locales.map(locale => locale.code);
-  updatePortalLocales({
-    newAllowedLocales,
-    defaultLocale: localeCode,
-    messageKey: 'CHANGE_DEFAULT_LOCALE',
-  });
-  useTrack(PORTALS_EVENTS.SET_DEFAULT_LOCALE, {
-    newLocale: localeCode,
-    from: route.name,
-  });
-};
-
-const updateLastActivePortal = async localeCode => {
-  const { last_active_locale_code: lastActiveLocaleCode } =
-    uiSettings.value || {};
-  const defaultLocale = props.portal.meta.default_locale;
-
-  // Update UI settings only if deleting locale matches the last active locale in UI settings.
-  if (localeCode === lastActiveLocaleCode) {
-    await updateUISettings({
-      last_active_locale_code: defaultLocale,
-    });
-  }
-};
-
-const deletePortalLocale = async ({ localeCode }) => {
-  const updatedLocales = props.locales
-    .filter(locale => locale.code !== localeCode)
-    .map(locale => locale.code);
-
-  const defaultLocale = props.portal.meta.default_locale;
-
-  await updatePortalLocales({
-    newAllowedLocales: updatedLocales,
-    defaultLocale,
-    messageKey: 'DELETE_LOCALE',
-  });
-
-  await updateLastActivePortal(localeCode);
-
-  useTrack(PORTALS_EVENTS.DELETE_LOCALE, {
-    deletedLocale: localeCode,
-    from: route.name,
-  });
-};
-
-const handleAction = ({ action }, localeCode) => {
-  if (action === 'change-default') {
-    changeDefaultLocale({ localeCode: localeCode });
-  } else if (action === 'delete') {
-    deletePortalLocale({ localeCode: localeCode });
-  }
-};
-</script>
-
-<template>
-  <ul role="list" class="w-full h-full space-y-4">
-    <LocaleCard
-      v-for="(locale, index) in locales"
-      :key="index"
-      :locale="locale.name"
-      :is-default="isLocaleDefault(locale.code)"
-      :locale-code="locale.code"
-      :article-count="locale.articlesCount || 0"
-      :category-count="locale.categoriesCount || 0"
-      @action="handleAction($event, locale.code)"
-    />
-  </ul>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.story.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.story.vue
deleted file mode 100644
index 54adbcb..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.story.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup>
-import LocalesPage from './LocalesPage.vue';
-
-const locales = [
-  {
-    name: 'English (en-US)',
-    isDefault: true,
-    articleCount: 5,
-    categoryCount: 5,
-  },
-  {
-    name: 'Spanish (es-ES)',
-    isDefault: false,
-    articleCount: 20,
-    categoryCount: 10,
-  },
-  {
-    name: 'English (en-UK)',
-    isDefault: false,
-    articleCount: 15,
-    categoryCount: 7,
-  },
-  {
-    name: 'Malay (ms-MY)',
-    isDefault: false,
-    articleCount: 15,
-    categoryCount: 7,
-  },
-  {
-    name: 'Malayalam (ml-IN)',
-    isDefault: false,
-    articleCount: 10,
-    categoryCount: 5,
-  },
-  {
-    name: 'Hindi (hi-IN)',
-    isDefault: false,
-    articleCount: 15,
-    categoryCount: 7,
-  },
-];
-</script>
-
-<template>
-  <Story title="Pages/HelpCenter/LocalePage" :layout="{ type: 'single' }">
-    <Variant title="All Locales">
-      <div class="w-full min-h-screen bg-n-background">
-        <LocalesPage :locales="locales" />
-      </div>
-    </Variant>
-  </Story>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue
deleted file mode 100644
index 22dd42e..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useMapGetter } from 'dashboard/composables/store.js';
-
-import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import LocaleList from 'dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue';
-import AddLocaleDialog from 'dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue';
-
-const props = defineProps({
-  locales: {
-    type: Array,
-    required: true,
-  },
-  portal: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const addLocaleDialogRef = ref(null);
-
-const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
-
-const openAddLocaleDialog = () => {
-  addLocaleDialogRef.value.dialogRef.open();
-};
-
-const localeCount = computed(() => props.locales?.length);
-</script>
-
-<template>
-  <HelpCenterLayout :show-pagination-footer="false">
-    <template #header-actions>
-      <div class="flex items-center justify-between">
-        <div class="flex items-center gap-4">
-          <span class="text-sm font-medium text-n-slate-12">
-            {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALES_COUNT', localeCount) }}
-          </span>
-        </div>
-        <Button
-          :label="$t('HELP_CENTER.LOCALES_PAGE.NEW_LOCALE_BUTTON_TEXT')"
-          icon="i-lucide-plus"
-          size="sm"
-          @click="openAddLocaleDialog"
-        />
-      </div>
-    </template>
-    <template #content>
-      <div
-        v-if="isSwitchingPortal"
-        class="flex items-center justify-center py-10 text-n-slate-11"
-      >
-        <Spinner />
-      </div>
-      <LocaleList v-else :locales="locales" :portal="portal" />
-    </template>
-    <AddLocaleDialog ref="addLocaleDialogRef" :portal="portal" />
-  </HelpCenterLayout>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue
deleted file mode 100644
index 0791f05..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<script setup>
-import { ref, reactive, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useVuelidate } from '@vuelidate/core';
-import { helpers } from '@vuelidate/validators';
-import { isValidDomain } from '@chatwoot/utils';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
-
-const props = defineProps({
-  mode: {
-    type: String,
-    default: 'add',
-  },
-  customDomain: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['addCustomDomain']);
-
-const { t } = useI18n();
-
-const dialogRef = ref(null);
-
-const formState = reactive({
-  customDomain: props.customDomain,
-});
-
-const rules = {
-  customDomain: {
-    isValidDomain: helpers.withMessage(
-      () =>
-        t(
-          'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.FORMAT_ERROR'
-        ),
-      isValidDomain
-    ),
-  },
-};
-
-const v$ = useVuelidate(rules, formState);
-
-watch(
-  () => props.customDomain,
-  newVal => {
-    formState.customDomain = newVal;
-  }
-);
-
-const handleDialogConfirm = async () => {
-  const isFormCorrect = await v$.value.$validate();
-  if (!isFormCorrect) return;
-
-  emit('addCustomDomain', formState.customDomain);
-};
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    :title="
-      t(
-        `HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.${props.mode.toUpperCase()}_HEADER`
-      )
-    "
-    :confirm-button-label="
-      t(
-        `HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.${props.mode.toUpperCase()}_CONFIRM_BUTTON_LABEL`
-      )
-    "
-    @confirm="handleDialogConfirm"
-  >
-    <Input
-      v-model="formState.customDomain"
-      :label="
-        t(
-          'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.LABEL'
-        )
-      "
-      :placeholder="
-        t(
-          'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.PLACEHOLDER'
-        )
-      "
-      :message="
-        v$.customDomain.$error ? v$.customDomain.$errors[0].$message : ''
-      "
-      :message-type="v$.customDomain.$error ? 'error' : 'info'"
-      @blur="v$.customDomain.$touch()"
-    />
-  </Dialog>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/ConfirmDeletePortalDialog.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/ConfirmDeletePortalDialog.vue
deleted file mode 100644
index 6f9337c..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/ConfirmDeletePortalDialog.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-
-defineProps({
-  activePortalName: {
-    type: String,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['deletePortal']);
-
-const { t } = useI18n();
-
-const dialogRef = ref(null);
-
-const handleDialogConfirm = () => {
-  emit('deletePortal');
-};
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="alert"
-    :title="
-      t(
-        'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.DIALOG.HEADER',
-        {
-          portalName: activePortalName,
-        }
-      )
-    "
-    :description="
-      t(
-        'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.DIALOG.DESCRIPTION'
-      )
-    "
-    :confirm-button-label="
-      t(
-        'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.DIALOG.CONFIRM_BUTTON_LABEL'
-      )
-    "
-    @confirm="handleDialogConfirm"
-  />
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue
deleted file mode 100644
index 8df7f55..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<script setup>
-import { reactive, computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useAlert } from 'dashboard/composables';
-import { copyTextToClipboard } from 'shared/helpers/clipboard';
-import { getHostNameFromURL } from 'dashboard/helper/URLHelper';
-import { email, required } from '@vuelidate/validators';
-import { useVuelidate } from '@vuelidate/core';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  customDomain: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['send', 'close']);
-
-const { t } = useI18n();
-
-const state = reactive({
-  email: '',
-});
-
-const validationRules = {
-  email: { email, required },
-};
-
-const v$ = useVuelidate(validationRules, state);
-
-const domain = computed(() => {
-  const { hostURL, helpCenterURL } = window?.chatwootConfig || {};
-  return getHostNameFromURL(helpCenterURL) || getHostNameFromURL(hostURL) || '';
-});
-
-const subdomainCNAME = computed(
-  () => `${props.customDomain} CNAME ${domain.value}`
-);
-
-const handleCopy = async e => {
-  e.stopPropagation();
-  await copyTextToClipboard(subdomainCNAME.value);
-  useAlert(
-    t(
-      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.COPY'
-    )
-  );
-};
-
-const dialogRef = ref(null);
-
-const resetForm = () => {
-  v$.value.$reset();
-  state.email = '';
-};
-
-const onClose = () => {
-  resetForm();
-  emit('close');
-};
-
-const handleSend = async () => {
-  const isFormCorrect = await v$.value.$validate();
-  if (!isFormCorrect) return;
-
-  emit('send', state.email);
-  onClose();
-};
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    :show-cancel-button="false"
-    :show-confirm-button="false"
-    @close="resetForm"
-  >
-    <NextButton
-      icon="i-lucide-x"
-      sm
-      ghost
-      slate
-      class="flex-shrink-0 absolute top-2 ltr:right-2 rtl:left-2"
-      @click="onClose"
-    />
-    <div class="flex flex-col gap-6 divide-y divide-n-strong">
-      <div class="flex flex-col gap-6">
-        <div class="flex flex-col gap-2 ltr:pr-10 rtl:pl-10">
-          <h3 class="text-base font-medium leading-6 text-n-slate-12">
-            {{
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.HEADER'
-              )
-            }}
-          </h3>
-          <p class="mb-0 text-sm text-n-slate-12">
-            {{
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.DESCRIPTION'
-              )
-            }}
-          </p>
-        </div>
-        <div class="flex items-center gap-3 w-full">
-          <span
-            class="min-h-10 px-3 py-2.5 inline-flex items-center w-full text-sm bg-transparent border rounded-lg text-n-slate-11 border-n-strong"
-          >
-            {{ subdomainCNAME }}
-          </span>
-          <NextButton
-            faded
-            slate
-            type="button"
-            icon="i-lucide-copy"
-            class="flex-shrink-0"
-            @click="handleCopy"
-          />
-        </div>
-      </div>
-
-      <div class="flex flex-col gap-6 pt-6">
-        <div class="flex flex-col gap-2 ltr:pr-10 rtl:pl-10">
-          <h3 class="text-base font-medium leading-6 text-n-slate-12">
-            {{
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.HEADER'
-              )
-            }}
-          </h3>
-          <p class="mb-0 text-sm text-n-slate-12">
-            {{
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.DESCRIPTION'
-              )
-            }}
-          </p>
-        </div>
-        <form
-          class="flex items-start gap-3 w-full"
-          @submit.prevent="handleSend"
-        >
-          <Input
-            v-model="state.email"
-            :placeholder="
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.PLACEHOLDER'
-              )
-            "
-            :message="
-              v$.email.$error
-                ? t(
-                    'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.ERROR'
-                  )
-                : ''
-            "
-            :message-type="v$.email.$error ? 'error' : 'info'"
-            class="w-full"
-            @blur="v$.email.$touch()"
-          />
-          <NextButton
-            :label="
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.SEND_BUTTON'
-              )
-            "
-            type="submit"
-            class="flex-shrink-0"
-          />
-        </form>
-      </div>
-    </div>
-  </Dialog>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
deleted file mode 100644
index b99f08a..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
+++ /dev/null
@@ -1,348 +0,0 @@
-<script setup>
-import { reactive, watch, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { buildPortalURL } from 'dashboard/helper/portalHelper';
-import { useAlert } from 'dashboard/composables';
-import { useStore, useStoreGetters } from 'dashboard/composables/store';
-import { uploadFile } from 'dashboard/helper/uploadHelper';
-import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength, helpers, url } from '@vuelidate/validators';
-import { isValidSlug } from 'shared/helpers/Validators';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
-import ColorPicker from 'dashboard/components-next/colorpicker/ColorPicker.vue';
-
-const props = defineProps({
-  activePortal: {
-    type: Object,
-    required: true,
-  },
-  isFetching: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['updatePortal']);
-
-const { t } = useI18n();
-const store = useStore();
-const getters = useStoreGetters();
-
-const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
-
-const state = reactive({
-  name: '',
-  headerText: '',
-  pageTitle: '',
-  slug: '',
-  widgetColor: '',
-  homePageLink: '',
-  liveChatWidgetInboxId: '',
-  logoUrl: '',
-  avatarBlobId: '',
-});
-
-const originalState = reactive({ ...state });
-
-const liveChatWidgets = computed(() => {
-  const inboxes = store.getters['inboxes/getInboxes'];
-  const widgetOptions = inboxes
-    .filter(inbox => inbox.channel_type === 'Channel::WebWidget')
-    .map(inbox => ({
-      value: inbox.id,
-      label: inbox.name,
-    }));
-
-  return [
-    {
-      value: '',
-      label: t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.NONE_OPTION'),
-    },
-    ...widgetOptions,
-  ];
-});
-
-const rules = {
-  name: { required, minLength: minLength(2) },
-  slug: {
-    required: helpers.withMessage(
-      () => t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.ERROR'),
-      required
-    ),
-    isValidSlug: helpers.withMessage(
-      () => t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.FORMAT_ERROR'),
-      isValidSlug
-    ),
-  },
-  homePageLink: { url },
-};
-
-const v$ = useVuelidate(rules, state);
-
-const nameError = computed(() =>
-  v$.value.name.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.ERROR') : ''
-);
-
-const slugError = computed(() => {
-  return v$.value.slug.$errors[0]?.$message || '';
-});
-
-const homePageLinkError = computed(() =>
-  v$.value.homePageLink.$error
-    ? t('HELP_CENTER.PORTAL_SETTINGS.FORM.HOME_PAGE_LINK.ERROR')
-    : ''
-);
-
-const isUpdatingPortal = computed(() => {
-  const slug = props.activePortal?.slug;
-  if (slug) return getters['portals/uiFlagsIn'].value(slug)?.isUpdating;
-
-  return false;
-});
-
-watch(
-  () => props.activePortal,
-  newVal => {
-    if (newVal && !props.isFetching) {
-      Object.assign(state, {
-        name: newVal.name,
-        headerText: newVal.header_text,
-        pageTitle: newVal.page_title,
-        widgetColor: newVal.color,
-        homePageLink: newVal.homepage_link,
-        slug: newVal.slug,
-        liveChatWidgetInboxId: newVal.inbox?.id || '',
-      });
-      if (newVal.logo) {
-        const {
-          logo: { file_url: logoURL, blob_id: blobId },
-        } = newVal;
-        state.logoUrl = logoURL;
-        state.avatarBlobId = blobId;
-      } else {
-        state.logoUrl = '';
-        state.avatarBlobId = '';
-      }
-      Object.assign(originalState, state);
-    }
-  },
-  { immediate: true, deep: true }
-);
-
-const hasChanges = computed(() => {
-  return JSON.stringify(state) !== JSON.stringify(originalState);
-});
-
-const handleUpdatePortal = () => {
-  const portal = {
-    id: props.activePortal?.id,
-    slug: state.slug,
-    name: state.name,
-    color: state.widgetColor,
-    page_title: state.pageTitle,
-    header_text: state.headerText,
-    homepage_link: state.homePageLink,
-    blob_id: state.avatarBlobId,
-    inbox_id: state.liveChatWidgetInboxId,
-  };
-  emit('updatePortal', portal);
-};
-
-async function uploadLogoToStorage({ file }) {
-  try {
-    const { fileUrl, blobId } = await uploadFile(file);
-    if (fileUrl) {
-      state.logoUrl = fileUrl;
-      state.avatarBlobId = blobId;
-    }
-    useAlert(t('HELP_CENTER.PORTAL_SETTINGS.FORM.AVATAR.IMAGE_UPLOAD_SUCCESS'));
-  } catch (error) {
-    useAlert(t('HELP_CENTER.PORTAL_SETTINGS.FORM.AVATAR.IMAGE_UPLOAD_ERROR'));
-  }
-}
-
-async function deleteLogo() {
-  try {
-    const portalSlug = props.activePortal?.slug;
-    await store.dispatch('portals/deleteLogo', {
-      portalSlug,
-    });
-    useAlert(t('HELP_CENTER.PORTAL_SETTINGS.FORM.AVATAR.IMAGE_DELETE_SUCCESS'));
-  } catch (error) {
-    useAlert(
-      error?.message ||
-        t('HELP_CENTER.PORTAL_SETTINGS.FORM.AVATAR.IMAGE_DELETE_ERROR')
-    );
-  }
-}
-
-const handleAvatarUpload = file => {
-  if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
-    uploadLogoToStorage(file);
-  } else {
-    const errorKey =
-      'HELP_CENTER.PORTAL_SETTINGS.FORM.AVATAR.IMAGE_UPLOAD_SIZE_ERROR';
-    useAlert(t(errorKey, { size: MAXIMUM_FILE_UPLOAD_SIZE }));
-  }
-};
-
-const handleAvatarDelete = () => {
-  state.logoUrl = '';
-  state.avatarBlobId = '';
-  deleteLogo();
-};
-</script>
-
-<template>
-  <div class="flex flex-col w-full gap-4">
-    <div class="flex flex-col w-full gap-2">
-      <label class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50">
-        {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.AVATAR.LABEL') }}
-      </label>
-      <Avatar
-        :src="state.logoUrl"
-        :name="state.name"
-        :size="72"
-        allow-upload
-        icon-name="i-lucide-building-2"
-        @upload="handleAvatarUpload"
-        @delete="handleAvatarDelete"
-      />
-    </div>
-    <div class="flex flex-col w-full gap-4">
-      <div
-        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
-      >
-        <label
-          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
-        >
-          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.NAME.LABEL') }}
-        </label>
-        <Input
-          v-model="state.name"
-          :placeholder="t('HELP_CENTER.PORTAL_SETTINGS.FORM.NAME.PLACEHOLDER')"
-          :message-type="nameError ? 'error' : 'info'"
-          :message="nameError"
-          custom-input-class="!bg-transparent dark:!bg-transparent"
-          @input="v$.name.$touch()"
-          @blur="v$.name.$touch()"
-        />
-      </div>
-      <div
-        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
-      >
-        <label
-          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
-        >
-          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.HEADER_TEXT.LABEL') }}
-        </label>
-        <Input
-          v-model="state.headerText"
-          :placeholder="
-            t('HELP_CENTER.PORTAL_SETTINGS.FORM.HEADER_TEXT.PLACEHOLDER')
-          "
-          custom-input-class="!bg-transparent dark:!bg-transparent"
-        />
-      </div>
-      <div
-        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
-      >
-        <label
-          class="text-sm font-medium whitespace-nowrap text-n-slate-12 py-2.5"
-        >
-          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.PAGE_TITLE.LABEL') }}
-        </label>
-        <Input
-          v-model="state.pageTitle"
-          :placeholder="
-            t('HELP_CENTER.PORTAL_SETTINGS.FORM.PAGE_TITLE.PLACEHOLDER')
-          "
-          custom-input-class="!bg-transparent dark:!bg-transparent"
-        />
-      </div>
-      <div
-        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
-      >
-        <label
-          class="text-sm font-medium whitespace-nowrap text-n-slate-12 py-2.5"
-        >
-          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.HOME_PAGE_LINK.LABEL') }}
-        </label>
-        <Input
-          v-model="state.homePageLink"
-          :placeholder="
-            t('HELP_CENTER.PORTAL_SETTINGS.FORM.HOME_PAGE_LINK.PLACEHOLDER')
-          "
-          :message-type="homePageLinkError ? 'error' : 'info'"
-          :message="homePageLinkError"
-          custom-input-class="!bg-transparent dark:!bg-transparent"
-          @input="v$.homePageLink.$touch()"
-          @blur="v$.homePageLink.$touch()"
-        />
-      </div>
-      <div
-        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
-      >
-        <label
-          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
-        >
-          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.SLUG.LABEL') }}
-        </label>
-        <Input
-          v-model="state.slug"
-          :placeholder="t('HELP_CENTER.PORTAL_SETTINGS.FORM.SLUG.PLACEHOLDER')"
-          :message-type="slugError ? 'error' : 'info'"
-          :message="slugError || buildPortalURL(state.slug)"
-          custom-input-class="!bg-transparent dark:!bg-transparent"
-          @input="v$.slug.$touch()"
-          @blur="v$.slug.$touch()"
-        />
-      </div>
-      <div
-        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
-      >
-        <label
-          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
-        >
-          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.LABEL') }}
-        </label>
-        <ComboBox
-          v-model="state.liveChatWidgetInboxId"
-          :options="liveChatWidgets"
-          :placeholder="
-            t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.PLACEHOLDER')
-          "
-          :message="
-            t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.HELP_TEXT')
-          "
-          class="[&>div>button:not(.focused)]:!outline-n-weak"
-        />
-      </div>
-      <div
-        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
-      >
-        <label
-          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
-        >
-          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.BRAND_COLOR.LABEL') }}
-        </label>
-        <div class="w-[432px] justify-start">
-          <ColorPicker v-model="state.widgetColor" />
-        </div>
-      </div>
-      <div class="flex justify-end w-full gap-2">
-        <Button
-          :label="t('HELP_CENTER.PORTAL_SETTINGS.FORM.SAVE_CHANGES')"
-          :disabled="!hasChanges || isUpdatingPortal || v$.$invalid"
-          :is-loading="isUpdatingPortal"
-          @click="handleUpdatePortal"
-        />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalConfigurationSettings.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalConfigurationSettings.vue
deleted file mode 100644
index 46d9492..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalConfigurationSettings.vue
+++ /dev/null
@@ -1,254 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useAccount } from 'dashboard/composables/useAccount';
-
-import AddCustomDomainDialog from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue';
-import DNSConfigurationDialog from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  activePortal: {
-    type: Object,
-    required: true,
-  },
-  isFetchingStatus: {
-    type: Boolean,
-    required: true,
-  },
-});
-
-const emit = defineEmits([
-  'updatePortalConfiguration',
-  'refreshStatus',
-  'sendCnameInstructions',
-]);
-
-const SSL_STATUS = {
-  LIVE: ['active', 'staging_active'],
-  PENDING: [
-    'provisioned',
-    'pending',
-    'initializing',
-    'pending_validation',
-    'pending_deployment',
-    'pending_issuance',
-    'holding_deployment',
-    'holding_validation',
-    'pending_expiration',
-    'pending_cleanup',
-    'pending_deletion',
-    'staging_deployment',
-    'backup_issued',
-  ],
-  ERROR: [
-    'blocked',
-    'inactive',
-    'moved',
-    'expired',
-    'deleted',
-    'timed_out_initializing',
-    'timed_out_validation',
-    'timed_out_issuance',
-    'timed_out_deployment',
-    'timed_out_deletion',
-    'deactivating',
-  ],
-};
-
-const { t } = useI18n();
-const { isOnChatwootCloud } = useAccount();
-
-const addCustomDomainDialogRef = ref(null);
-const dnsConfigurationDialogRef = ref(null);
-const updatedDomainAddress = ref('');
-
-const customDomainAddress = computed(
-  () => props.activePortal?.custom_domain || ''
-);
-
-const sslSettings = computed(() => props.activePortal?.ssl_settings || {});
-const verificationErrors = computed(
-  () => sslSettings.value.verification_errors || ''
-);
-
-const isLive = computed(() =>
-  SSL_STATUS.LIVE.includes(sslSettings.value.status)
-);
-const isPending = computed(() =>
-  SSL_STATUS.PENDING.includes(sslSettings.value.status)
-);
-const isError = computed(() =>
-  SSL_STATUS.ERROR.includes(sslSettings.value.status)
-);
-
-const statusText = computed(() => {
-  if (isLive.value)
-    return t(
-      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS.LIVE'
-    );
-  if (isPending.value)
-    return t(
-      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS.PENDING'
-    );
-  if (isError.value)
-    return t(
-      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS.ERROR'
-    );
-  return '';
-});
-
-const statusColors = computed(() => {
-  if (isLive.value)
-    return { text: 'text-n-teal-11', bubble: 'outline-n-teal-6 bg-n-teal-9' };
-  if (isError.value)
-    return { text: 'text-n-ruby-11', bubble: 'outline-n-ruby-6 bg-n-ruby-9' };
-  return { text: 'text-n-amber-11', bubble: 'outline-n-amber-6 bg-n-amber-9' };
-});
-
-const updatePortalConfiguration = customDomain => {
-  const portal = {
-    id: props.activePortal?.id,
-    custom_domain: customDomain,
-  };
-  emit('updatePortalConfiguration', portal);
-  addCustomDomainDialogRef.value.dialogRef.close();
-  if (customDomain) {
-    updatedDomainAddress.value = customDomain;
-    dnsConfigurationDialogRef.value.dialogRef.open();
-  }
-};
-
-const closeDNSConfigurationDialog = () => {
-  updatedDomainAddress.value = '';
-  dnsConfigurationDialogRef.value.dialogRef.close();
-};
-
-const onClickRefreshSSLStatus = () => {
-  emit('refreshStatus');
-};
-
-const onClickSend = email => {
-  emit('sendCnameInstructions', {
-    portalSlug: props.activePortal?.slug,
-    email,
-  });
-};
-</script>
-
-<template>
-  <div class="flex flex-col w-full gap-6">
-    <div class="flex flex-col gap-2">
-      <h6 class="text-base font-medium text-n-slate-12">
-        {{
-          t(
-            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.HEADER'
-          )
-        }}
-      </h6>
-      <span class="text-sm text-n-slate-11">
-        {{
-          t(
-            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DESCRIPTION'
-          )
-        }}
-      </span>
-    </div>
-    <div class="flex flex-col w-full gap-4">
-      <div class="flex items-center justify-between w-full gap-2">
-        <div v-if="customDomainAddress" class="flex flex-col gap-1">
-          <div class="flex items-center w-full h-8 gap-4">
-            <label class="text-sm font-medium text-n-slate-12">
-              {{
-                t(
-                  'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.LABEL'
-                )
-              }}
-            </label>
-            <span class="text-sm text-n-slate-12">
-              {{ customDomainAddress }}
-            </span>
-          </div>
-          <span
-            v-if="!isLive && isOnChatwootCloud"
-            class="text-sm text-n-slate-11"
-          >
-            {{
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS_DESCRIPTION'
-              )
-            }}
-          </span>
-        </div>
-        <div class="flex items-center">
-          <div v-if="customDomainAddress" class="flex items-center gap-3">
-            <div
-              v-if="statusText && isOnChatwootCloud"
-              v-tooltip="verificationErrors"
-              class="flex items-center gap-3 flex-shrink-0"
-            >
-              <span
-                class="size-1.5 rounded-full outline outline-2 block flex-shrink-0"
-                :class="statusColors.bubble"
-              />
-              <span
-                :class="statusColors.text"
-                class="text-sm leading-[16px] font-medium"
-              >
-                {{ statusText }}
-              </span>
-            </div>
-            <div
-              v-if="statusText && isOnChatwootCloud"
-              class="w-px h-3 bg-n-weak"
-            />
-            <Button
-              slate
-              sm
-              link
-              :label="
-                t(
-                  'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.EDIT_BUTTON'
-                )
-              "
-              class="hover:!no-underline flex-shrink-0"
-              @click="addCustomDomainDialogRef.dialogRef.open()"
-            />
-            <div v-if="isOnChatwootCloud" class="w-px h-3 bg-n-weak" />
-            <Button
-              v-if="isOnChatwootCloud"
-              slate
-              sm
-              link
-              icon="i-lucide-refresh-ccw"
-              :class="isFetchingStatus && 'animate-spin'"
-              @click="onClickRefreshSSLStatus"
-            />
-          </div>
-          <Button
-            v-else
-            :label="
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.ADD_BUTTON'
-              )
-            "
-            color="slate"
-            @click="addCustomDomainDialogRef.dialogRef.open()"
-          />
-        </div>
-      </div>
-    </div>
-    <AddCustomDomainDialog
-      ref="addCustomDomainDialogRef"
-      :mode="customDomainAddress ? 'edit' : 'add'"
-      :custom-domain="customDomainAddress"
-      @add-custom-domain="updatePortalConfiguration"
-    />
-    <DNSConfigurationDialog
-      ref="dnsConfigurationDialogRef"
-      :custom-domain="updatedDomainAddress || customDomainAddress"
-      @close="closeDNSConfigurationDialog"
-      @send="onClickSend"
-    />
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.story.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.story.vue
deleted file mode 100644
index ab25484..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.story.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup>
-import PortalSettings from './PortalSettings.vue';
-</script>
-
-<template>
-  <Story title="Pages/HelpCenter/PortalSettings" :layout="{ type: 'single' }">
-    <Variant title="Default">
-      <div class="w-[1000px] min-h-screen bg-n-background">
-        <PortalSettings />
-      </div>
-    </Variant>
-  </Story>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue b/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
deleted file mode 100644
index 83800e0..0000000
--- a/research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useMapGetter } from 'dashboard/composables/store.js';
-
-import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
-import PortalBaseSettings from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue';
-import PortalConfigurationSettings from './PortalConfigurationSettings.vue';
-import ConfirmDeletePortalDialog from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/ConfirmDeletePortalDialog.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  portals: {
-    type: Array,
-    required: true,
-  },
-  isFetching: {
-    type: Boolean,
-    required: true,
-  },
-});
-
-const emit = defineEmits([
-  'updatePortal',
-  'updatePortalConfiguration',
-  'deletePortal',
-  'refreshStatus',
-  'sendCnameInstructions',
-]);
-
-const { t } = useI18n();
-const route = useRoute();
-
-const confirmDeletePortalDialogRef = ref(null);
-
-const currentPortalSlug = computed(() => route.params.portalSlug);
-
-const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
-const isFetchingSSLStatus = useMapGetter('portals/isFetchingSSLStatus');
-
-const activePortal = computed(() => {
-  return props.portals?.find(portal => portal.slug === currentPortalSlug.value);
-});
-
-const activePortalName = computed(() => activePortal.value?.name || '');
-
-const isLoading = computed(() => props.isFetching || isSwitchingPortal.value);
-
-const handleUpdatePortal = portal => {
-  emit('updatePortal', portal);
-};
-
-const handleUpdatePortalConfiguration = portal => {
-  emit('updatePortalConfiguration', portal);
-};
-
-const fetchSSLStatus = () => {
-  emit('refreshStatus');
-};
-
-const handleSendCnameInstructions = payload => {
-  emit('sendCnameInstructions', payload);
-};
-
-const openConfirmDeletePortalDialog = () => {
-  confirmDeletePortalDialogRef.value.dialogRef.open();
-};
-
-const handleDeletePortal = () => {
-  emit('deletePortal', activePortal.value);
-  confirmDeletePortalDialogRef.value.dialogRef.close();
-};
-</script>
-
-<template>
-  <HelpCenterLayout :show-pagination-footer="false">
-    <template #content>
-      <div
-        v-if="isLoading"
-        class="flex items-center justify-center py-10 pt-2 pb-8 text-n-slate-11"
-      >
-        <Spinner />
-      </div>
-      <div
-        v-else-if="activePortal"
-        class="flex flex-col w-full gap-4 max-w-[40rem] pb-8"
-      >
-        <PortalBaseSettings
-          :active-portal="activePortal"
-          :is-fetching="isFetching"
-          @update-portal="handleUpdatePortal"
-        />
-        <div class="w-full h-px bg-n-weak" />
-        <PortalConfigurationSettings
-          :active-portal="activePortal"
-          :is-fetching="isFetching"
-          :is-fetching-status="isFetchingSSLStatus"
-          @update-portal-configuration="handleUpdatePortalConfiguration"
-          @refresh-status="fetchSSLStatus"
-          @send-cname-instructions="handleSendCnameInstructions"
-        />
-        <div class="w-full h-px bg-n-weak" />
-        <div class="flex items-end justify-between w-full gap-4">
-          <div class="flex flex-col gap-2">
-            <h6 class="text-base font-medium text-n-slate-12">
-              {{
-                t(
-                  'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.HEADER'
-                )
-              }}
-            </h6>
-            <span class="text-sm text-n-slate-11">
-              {{
-                t(
-                  'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.DESCRIPTION'
-                )
-              }}
-            </span>
-          </div>
-          <Button
-            :label="
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.BUTTON',
-                {
-                  portalName: activePortalName,
-                }
-              )
-            "
-            color="ruby"
-            class="max-w-56 !w-fit"
-            @click="openConfirmDeletePortalDialog"
-          />
-        </div>
-      </div>
-    </template>
-    <ConfirmDeletePortalDialog
-      ref="confirmDeletePortalDialogRef"
-      :active-portal-name="activePortalName"
-      @delete-portal="handleDeletePortal"
-    />
-  </HelpCenterLayout>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue
deleted file mode 100644
index 9e80661..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup>
-import { onMounted } from 'vue';
-import { useStore } from 'dashboard/composables/store';
-
-defineProps({
-  keepAlive: { type: Boolean, default: true },
-});
-
-const store = useStore();
-
-onMounted(() => {
-  store.dispatch('campaigns/get');
-  store.dispatch('labels/get');
-});
-</script>
-
-<template>
-  <div
-    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-surface-1"
-  >
-    <router-view v-slot="{ Component }">
-      <keep-alive v-if="keepAlive">
-        <component :is="Component" />
-      </keep-alive>
-      <component :is="Component" v-else />
-    </router-view>
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/campaigns/pages/LiveChatCampaignsPage.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/campaigns/pages/LiveChatCampaignsPage.vue
deleted file mode 100644
index 6cc2bf1..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/campaigns/pages/LiveChatCampaignsPage.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useToggle } from '@vueuse/core';
-import { useStoreGetters, useMapGetter } from 'dashboard/composables/store';
-
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import CampaignLayout from 'dashboard/components-next/Campaigns/CampaignLayout.vue';
-import CampaignList from 'dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue';
-import LiveChatCampaignDialog from 'dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue';
-import EditLiveChatCampaignDialog from 'dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue';
-import ConfirmDeleteCampaignDialog from 'dashboard/components-next/Campaigns/Pages/CampaignPage/ConfirmDeleteCampaignDialog.vue';
-import LiveChatCampaignEmptyState from 'dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue';
-
-const { t } = useI18n();
-const getters = useStoreGetters();
-
-const editLiveChatCampaignDialogRef = ref(null);
-const confirmDeleteCampaignDialogRef = ref(null);
-const selectedCampaign = ref(null);
-
-const uiFlags = useMapGetter('campaigns/getUIFlags');
-const isFetchingCampaigns = computed(() => uiFlags.value.isFetching);
-
-const [showLiveChatCampaignDialog, toggleLiveChatCampaignDialog] = useToggle();
-
-const liveChatCampaigns = computed(
-  () => getters['campaigns/getLiveChatCampaigns'].value
-);
-
-const hasNoLiveChatCampaigns = computed(
-  () => liveChatCampaigns.value?.length === 0 && !isFetchingCampaigns.value
-);
-
-const handleEdit = campaign => {
-  selectedCampaign.value = campaign;
-  editLiveChatCampaignDialogRef.value.dialogRef.open();
-};
-const handleDelete = campaign => {
-  selectedCampaign.value = campaign;
-  confirmDeleteCampaignDialogRef.value.dialogRef.open();
-};
-</script>
-
-<template>
-  <CampaignLayout
-    :header-title="t('CAMPAIGN.LIVE_CHAT.HEADER_TITLE')"
-    :button-label="t('CAMPAIGN.LIVE_CHAT.NEW_CAMPAIGN')"
-    @click="toggleLiveChatCampaignDialog()"
-    @close="toggleLiveChatCampaignDialog(false)"
-  >
-    <template #action>
-      <LiveChatCampaignDialog
-        v-if="showLiveChatCampaignDialog"
-        @close="toggleLiveChatCampaignDialog(false)"
-      />
-    </template>
-
-    <div
-      v-if="isFetchingCampaigns"
-      class="flex justify-center items-center py-10 text-n-slate-11"
-    >
-      <Spinner />
-    </div>
-    <CampaignList
-      v-else-if="!hasNoLiveChatCampaigns"
-      :campaigns="liveChatCampaigns"
-      is-live-chat-type
-      @edit="handleEdit"
-      @delete="handleDelete"
-    />
-    <LiveChatCampaignEmptyState
-      v-else
-      :title="t('CAMPAIGN.LIVE_CHAT.EMPTY_STATE.TITLE')"
-      :subtitle="t('CAMPAIGN.LIVE_CHAT.EMPTY_STATE.SUBTITLE')"
-      class="pt-14"
-    />
-    <EditLiveChatCampaignDialog
-      ref="editLiveChatCampaignDialogRef"
-      :selected-campaign="selectedCampaign"
-    />
-    <ConfirmDeleteCampaignDialog
-      ref="confirmDeleteCampaignDialogRef"
-      :selected-campaign="selectedCampaign"
-    />
-  </CampaignLayout>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/campaigns/pages/SMSCampaignsPage.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/campaigns/pages/SMSCampaignsPage.vue
deleted file mode 100644
index c04726e..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/campaigns/pages/SMSCampaignsPage.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useToggle } from '@vueuse/core';
-import { useStoreGetters, useMapGetter } from 'dashboard/composables/store';
-
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import CampaignLayout from 'dashboard/components-next/Campaigns/CampaignLayout.vue';
-import CampaignList from 'dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue';
-import SMSCampaignDialog from 'dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue';
-import ConfirmDeleteCampaignDialog from 'dashboard/components-next/Campaigns/Pages/CampaignPage/ConfirmDeleteCampaignDialog.vue';
-import SMSCampaignEmptyState from 'dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue';
-
-const { t } = useI18n();
-const getters = useStoreGetters();
-
-const selectedCampaign = ref(null);
-const [showSMSCampaignDialog, toggleSMSCampaignDialog] = useToggle();
-
-const uiFlags = useMapGetter('campaigns/getUIFlags');
-const isFetchingCampaigns = computed(() => uiFlags.value.isFetching);
-
-const confirmDeleteCampaignDialogRef = ref(null);
-
-const SMSCampaigns = computed(() => getters['campaigns/getSMSCampaigns'].value);
-
-const hasNoSMSCampaigns = computed(
-  () => SMSCampaigns.value?.length === 0 && !isFetchingCampaigns.value
-);
-
-const handleDelete = campaign => {
-  selectedCampaign.value = campaign;
-  confirmDeleteCampaignDialogRef.value.dialogRef.open();
-};
-</script>
-
-<template>
-  <CampaignLayout
-    :header-title="t('CAMPAIGN.SMS.HEADER_TITLE')"
-    :button-label="t('CAMPAIGN.SMS.NEW_CAMPAIGN')"
-    @click="toggleSMSCampaignDialog()"
-    @close="toggleSMSCampaignDialog(false)"
-  >
-    <template #action>
-      <SMSCampaignDialog
-        v-if="showSMSCampaignDialog"
-        @close="toggleSMSCampaignDialog(false)"
-      />
-    </template>
-    <div
-      v-if="isFetchingCampaigns"
-      class="flex items-center justify-center py-10 text-n-slate-11"
-    >
-      <Spinner />
-    </div>
-    <CampaignList
-      v-else-if="!hasNoSMSCampaigns"
-      :campaigns="SMSCampaigns"
-      @delete="handleDelete"
-    />
-    <SMSCampaignEmptyState
-      v-else
-      :title="t('CAMPAIGN.SMS.EMPTY_STATE.TITLE')"
-      :subtitle="t('CAMPAIGN.SMS.EMPTY_STATE.SUBTITLE')"
-      class="pt-14"
-    />
-    <ConfirmDeleteCampaignDialog
-      ref="confirmDeleteCampaignDialogRef"
-      :selected-campaign="selectedCampaign"
-    />
-  </CampaignLayout>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/campaigns/pages/WhatsAppCampaignsPage.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/campaigns/pages/WhatsAppCampaignsPage.vue
deleted file mode 100644
index 96aa21b..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/campaigns/pages/WhatsAppCampaignsPage.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useToggle } from '@vueuse/core';
-import { useStoreGetters, useMapGetter } from 'dashboard/composables/store';
-
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import CampaignLayout from 'dashboard/components-next/Campaigns/CampaignLayout.vue';
-import CampaignList from 'dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue';
-import WhatsAppCampaignDialog from 'dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignDialog.vue';
-import ConfirmDeleteCampaignDialog from 'dashboard/components-next/Campaigns/Pages/CampaignPage/ConfirmDeleteCampaignDialog.vue';
-import WhatsAppCampaignEmptyState from 'dashboard/components-next/Campaigns/EmptyState/WhatsAppCampaignEmptyState.vue';
-
-const { t } = useI18n();
-const getters = useStoreGetters();
-
-const selectedCampaign = ref(null);
-const [showWhatsAppCampaignDialog, toggleWhatsAppCampaignDialog] = useToggle();
-
-const uiFlags = useMapGetter('campaigns/getUIFlags');
-const isFetchingCampaigns = computed(() => uiFlags.value.isFetching);
-
-const confirmDeleteCampaignDialogRef = ref(null);
-
-const WhatsAppCampaigns = computed(
-  () => getters['campaigns/getWhatsAppCampaigns'].value
-);
-
-const hasNoWhatsAppCampaigns = computed(
-  () => WhatsAppCampaigns.value?.length === 0 && !isFetchingCampaigns.value
-);
-
-const handleDelete = campaign => {
-  selectedCampaign.value = campaign;
-  confirmDeleteCampaignDialogRef.value.dialogRef.open();
-};
-</script>
-
-<template>
-  <CampaignLayout
-    :header-title="t('CAMPAIGN.WHATSAPP.HEADER_TITLE')"
-    :button-label="t('CAMPAIGN.WHATSAPP.NEW_CAMPAIGN')"
-    @click="toggleWhatsAppCampaignDialog()"
-    @close="toggleWhatsAppCampaignDialog(false)"
-  >
-    <template #action>
-      <WhatsAppCampaignDialog
-        v-if="showWhatsAppCampaignDialog"
-        @close="toggleWhatsAppCampaignDialog(false)"
-      />
-    </template>
-    <div
-      v-if="isFetchingCampaigns"
-      class="flex items-center justify-center py-10 text-n-slate-11"
-    >
-      <Spinner />
-    </div>
-    <CampaignList
-      v-else-if="!hasNoWhatsAppCampaigns"
-      :campaigns="WhatsAppCampaigns"
-      @delete="handleDelete"
-    />
-    <WhatsAppCampaignEmptyState
-      v-else
-      :title="t('CAMPAIGN.WHATSAPP.EMPTY_STATE.TITLE')"
-      :subtitle="t('CAMPAIGN.WHATSAPP.EMPTY_STATE.SUBTITLE')"
-      class="pt-14"
-    />
-    <ConfirmDeleteCampaignDialog
-      ref="confirmDeleteCampaignDialogRef"
-      :selected-campaign="selectedCampaign"
-    />
-  </CampaignLayout>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/captain/pages/AssistantsIndexPage.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/captain/pages/AssistantsIndexPage.vue
deleted file mode 100644
index 01ec646..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/captain/pages/AssistantsIndexPage.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<script setup>
-import { computed, nextTick, onMounted } from 'vue';
-import { useStore } from 'vuex';
-import { useRoute, useRouter } from 'vue-router';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-
-const store = useStore();
-const router = useRouter();
-const { uiSettings } = useUISettings();
-const route = useRoute();
-
-const assistants = computed(
-  () => store.getters['captainAssistants/getRecords']
-);
-
-const isAssistantPresent = assistantId => {
-  return !!assistants.value.find(a => a.id === Number(assistantId));
-};
-
-const routeToView = (name, params) => {
-  router.replace({ name, params, replace: true });
-};
-
-const generateRouterParams = () => {
-  const { last_active_assistant_id: lastActiveAssistantId } =
-    uiSettings.value || {};
-
-  if (isAssistantPresent(lastActiveAssistantId)) {
-    return {
-      assistantId: lastActiveAssistantId,
-    };
-  }
-
-  if (assistants.value.length > 0) {
-    const { id: assistantId } = assistants.value[0];
-    return { assistantId };
-  }
-
-  return null;
-};
-
-const routeToLastActiveAssistant = () => {
-  const params = generateRouterParams();
-
-  // No assistants found, redirect to create page
-  if (!params) {
-    return routeToView('captain_assistants_create_index', {
-      accountId: route.params.accountId,
-    });
-  }
-
-  const { navigationPath } = route.params;
-  const isAValidRoute = [
-    'captain_assistants_responses_index', // Faq page
-    'captain_assistants_documents_index', // Document page
-    'captain_assistants_scenarios_index', // Scenario page
-    'captain_assistants_playground_index', // Playground page
-    'captain_assistants_inboxes_index', // Inboxes page
-    'captain_tools_index', // Tools page
-    'captain_assistants_settings_index', // Settings page
-  ].includes(navigationPath);
-
-  const navigateTo = isAValidRoute
-    ? navigationPath
-    : 'captain_assistants_responses_index';
-
-  return routeToView(navigateTo, {
-    accountId: route.params.accountId,
-    ...params,
-  });
-};
-
-const performRouting = async () => {
-  await store.dispatch('captainAssistants/get');
-  nextTick(() => routeToLastActiveAssistant());
-};
-
-onMounted(() => performRouting());
-</script>
-
-<template>
-  <div
-    class="flex items-center justify-center w-full bg-n-surface-1 text-n-slate-11"
-  >
-    <Spinner />
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/captain/pages/CaptainPageRouteView.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/captain/pages/CaptainPageRouteView.vue
deleted file mode 100644
index 23e294c..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/captain/pages/CaptainPageRouteView.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup>
-import { watch } from 'vue';
-import { useRoute } from 'vue-router';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-
-const route = useRoute();
-const { uiSettings, updateUISettings } = useUISettings();
-
-watch(
-  () => route.params.assistantId,
-  newAssistantId => {
-    if (
-      newAssistantId &&
-      newAssistantId !== String(uiSettings.value.last_active_assistant_id)
-    ) {
-      updateUISettings({
-        last_active_assistant_id: Number(newAssistantId),
-      });
-    }
-  }
-);
-</script>
-
-<template>
-  <div class="flex w-full h-full min-h-0">
-    <section class="flex flex-1 h-full px-0 overflow-hidden bg-n-surface-1">
-      <router-view />
-    </section>
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/companies/pages/CompaniesIndex.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/companies/pages/CompaniesIndex.vue
deleted file mode 100644
index 2807142..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/companies/pages/CompaniesIndex.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script setup>
-import { ref, computed, onMounted, reactive } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-import { debounce } from '@chatwoot/utils';
-import { useCompaniesStore } from 'dashboard/stores/companies';
-
-import CompaniesListLayout from 'dashboard/components-next/Companies/CompaniesListLayout.vue';
-import CompaniesCard from 'dashboard/components-next/Companies/CompaniesCard/CompaniesCard.vue';
-
-const DEFAULT_SORT_FIELD = 'name';
-const DEBOUNCE_DELAY = 300;
-
-const companiesStore = useCompaniesStore();
-
-const route = useRoute();
-const router = useRouter();
-const { t } = useI18n();
-
-const { updateUISettings, uiSettings } = useUISettings();
-
-const companies = computed(() => companiesStore.getCompaniesList);
-const meta = computed(() => companiesStore.getMeta);
-const uiFlags = computed(() => companiesStore.getUIFlags);
-
-const searchQuery = computed(() => route.query?.search || '');
-const searchValue = ref(searchQuery.value);
-const pageNumber = computed(() => Number(route.query?.page) || 1);
-
-const parseSortSettings = (sortString = '') => {
-  const hasDescending = sortString.startsWith('-');
-  const sortField = hasDescending ? sortString.slice(1) : sortString;
-  return {
-    sort: sortField || DEFAULT_SORT_FIELD,
-    order: hasDescending ? '-' : '',
-  };
-};
-
-const { companies_sort_by: companySortBy = DEFAULT_SORT_FIELD } =
-  uiSettings.value ?? {};
-const { sort: initialSort, order: initialOrder } =
-  parseSortSettings(companySortBy);
-
-const sortState = reactive({
-  activeSort: initialSort,
-  activeOrdering: initialOrder,
-});
-
-const activeSort = computed(() => sortState.activeSort);
-const activeOrdering = computed(() => sortState.activeOrdering);
-
-const isFetchingList = computed(() => uiFlags.value.fetchingList);
-
-const buildSortAttr = () =>
-  `${sortState.activeOrdering}${sortState.activeSort}`;
-
-const sortParam = computed(() => buildSortAttr());
-
-const updateURLParams = (page, search = '', sort = '') => {
-  const query = {
-    ...route.query,
-    page: page.toString(),
-  };
-
-  if (search) {
-    query.search = search;
-  } else {
-    delete query.search;
-  }
-
-  if (sort) {
-    query.sort = sort;
-  } else {
-    delete query.sort;
-  }
-
-  router.replace({ query });
-};
-
-const fetchCompanies = async (page, search, sort) => {
-  const currentPage = page ?? pageNumber.value;
-  const currentSearch = search ?? searchQuery.value;
-  const currentSort = sort ?? sortParam.value;
-
-  // Only update URL if arguments were explicitly provided
-  if (page !== undefined || search !== undefined || sort !== undefined) {
-    updateURLParams(currentPage, currentSearch, currentSort);
-  }
-
-  if (currentSearch) {
-    await companiesStore.search({
-      search: currentSearch,
-      page: currentPage,
-      sort: currentSort,
-    });
-  } else {
-    await companiesStore.get({
-      page: currentPage,
-      sort: currentSort,
-    });
-  }
-};
-
-const onSearch = debounce(query => {
-  searchValue.value = query;
-  fetchCompanies(1, query, sortParam.value);
-}, DEBOUNCE_DELAY);
-
-const onPageChange = page => {
-  fetchCompanies(page, searchValue.value, sortParam.value);
-};
-
-const handleSort = async ({ sort, order }) => {
-  Object.assign(sortState, { activeSort: sort, activeOrdering: order });
-
-  await updateUISettings({
-    companies_sort_by: buildSortAttr(),
-  });
-
-  fetchCompanies(1, searchValue.value, buildSortAttr());
-};
-
-onMounted(() => {
-  searchValue.value = searchQuery.value;
-  fetchCompanies();
-});
-</script>
-
-<template>
-  <CompaniesListLayout
-    :search-value="searchValue"
-    :header-title="t('COMPANIES.HEADER')"
-    :current-page="pageNumber"
-    :total-items="Number(meta.totalCount || 0)"
-    :active-sort="activeSort"
-    :active-ordering="activeOrdering"
-    :is-fetching-list="isFetchingList"
-    :show-pagination-footer="!!companies.length"
-    @update:current-page="onPageChange"
-    @update:sort="handleSort"
-    @search="onSearch"
-  >
-    <div v-if="isFetchingList" class="flex items-center justify-center p-8">
-      <span class="text-n-slate-11 text-base">{{
-        t('COMPANIES.LOADING')
-      }}</span>
-    </div>
-    <div
-      v-else-if="companies.length === 0"
-      class="flex items-center justify-center p-8"
-    >
-      <span class="text-n-slate-11 text-base">{{
-        t('COMPANIES.EMPTY_STATE.TITLE')
-      }}</span>
-    </div>
-    <div v-else class="flex flex-col gap-4">
-      <CompaniesCard
-        v-for="company in companies"
-        :id="company.id"
-        :key="company.id"
-        :name="company.name"
-        :domain="company.domain"
-        :contacts-count="company.contactsCount || 0"
-        :description="company.description"
-        :avatar-url="company.avatarUrl"
-        :updated-at="company.updatedAt"
-      />
-    </div>
-  </CompaniesListLayout>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
deleted file mode 100644
index fe23e23..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-<script setup>
-import { onMounted, computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useAlert } from 'dashboard/composables';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useRoute, useRouter } from 'vue-router';
-
-import ContactsDetailsLayout from 'dashboard/components-next/Contacts/ContactsDetailsLayout.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import ContactDetails from 'dashboard/components-next/Contacts/Pages/ContactDetails.vue';
-import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
-import ContactNotes from 'dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue';
-import ContactHistory from 'dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue';
-import ContactMerge from 'dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue';
-import ContactCustomAttributes from 'dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue';
-
-const store = useStore();
-const route = useRoute();
-const router = useRouter();
-
-const contact = useMapGetter('contacts/getContactById');
-const uiFlags = useMapGetter('contacts/getUIFlags');
-
-const activeTab = ref('attributes');
-const contactMergeRef = ref(null);
-
-const isFetchingItem = computed(() => uiFlags.value.isFetchingItem);
-const isMergingContact = computed(() => uiFlags.value.isMerging);
-const isUpdatingContact = computed(() => uiFlags.value.isUpdating);
-
-const selectedContact = computed(() => contact.value(route.params.contactId));
-
-const showSpinner = computed(
-  () => isFetchingItem.value || isMergingContact.value
-);
-
-const { t } = useI18n();
-
-const CONTACT_TABS_OPTIONS = [
-  { key: 'ATTRIBUTES', value: 'attributes' },
-  { key: 'HISTORY', value: 'history' },
-  { key: 'NOTES', value: 'notes' },
-  { key: 'MERGE', value: 'merge' },
-];
-
-const tabs = computed(() => {
-  return CONTACT_TABS_OPTIONS.map(tab => ({
-    label: t(`CONTACTS_LAYOUT.SIDEBAR.TABS.${tab.key}`),
-    value: tab.value,
-  }));
-});
-
-const activeTabIndex = computed(() => {
-  return CONTACT_TABS_OPTIONS.findIndex(v => v.value === activeTab.value);
-});
-
-const goToContactsList = () => {
-  if (window.history.state?.back || window.history.length > 1) {
-    router.back();
-  } else {
-    router.push(`/app/accounts/${route.params.accountId}/contacts?page=1`);
-  }
-};
-
-const fetchActiveContact = async () => {
-  if (route.params.contactId) {
-    await store.dispatch('contacts/show', { id: route.params.contactId });
-    await store.dispatch(
-      'contacts/fetchContactableInbox',
-      route.params.contactId
-    );
-  }
-};
-
-const handleTabChange = tab => {
-  activeTab.value = tab.value;
-};
-
-const fetchContactNotes = () => {
-  const { contactId } = route.params;
-  if (contactId) store.dispatch('contactNotes/get', { contactId });
-};
-
-const fetchContactConversations = () => {
-  const { contactId } = route.params;
-  if (contactId) store.dispatch('contactConversations/get', contactId);
-};
-
-const fetchAttributes = () => {
-  store.dispatch('attributes/get');
-};
-
-const toggleContactBlock = async isBlocked => {
-  const ALERT_MESSAGES = {
-    success: {
-      block: t('CONTACTS_LAYOUT.HEADER.ACTIONS.BLOCK_SUCCESS_MESSAGE'),
-      unblock: t('CONTACTS_LAYOUT.HEADER.ACTIONS.UNBLOCK_SUCCESS_MESSAGE'),
-    },
-    error: {
-      block: t('CONTACTS_LAYOUT.HEADER.ACTIONS.BLOCK_ERROR_MESSAGE'),
-      unblock: t('CONTACTS_LAYOUT.HEADER.ACTIONS.UNBLOCK_ERROR_MESSAGE'),
-    },
-  };
-
-  try {
-    await store.dispatch(`contacts/update`, {
-      ...selectedContact.value,
-      blocked: !isBlocked,
-    });
-    useAlert(
-      isBlocked ? ALERT_MESSAGES.success.unblock : ALERT_MESSAGES.success.block
-    );
-  } catch (error) {
-    useAlert(
-      isBlocked ? ALERT_MESSAGES.error.unblock : ALERT_MESSAGES.error.block
-    );
-  }
-};
-
-onMounted(() => {
-  fetchActiveContact();
-  fetchContactNotes();
-  fetchContactConversations();
-  fetchAttributes();
-});
-</script>
-
-<template>
-  <div
-    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-surface-1"
-  >
-    <ContactsDetailsLayout
-      :button-label="$t('CONTACTS_LAYOUT.HEADER.SEND_MESSAGE')"
-      :selected-contact="selectedContact"
-      is-detail-view
-      :show-pagination-footer="false"
-      :is-updating="isUpdatingContact"
-      @go-to-contacts-list="goToContactsList"
-      @toggle-block="toggleContactBlock"
-    >
-      <div
-        v-if="showSpinner"
-        class="flex items-center justify-center py-10 text-n-slate-11"
-      >
-        <Spinner />
-      </div>
-      <ContactDetails
-        v-else-if="selectedContact"
-        :selected-contact="selectedContact"
-        @go-to-contacts-list="goToContactsList"
-      />
-      <template #sidebar>
-        <div class="px-6">
-          <TabBar
-            :tabs="tabs"
-            :initial-active-tab="activeTabIndex"
-            class="w-full [&>button]:w-full bg-n-alpha-black2"
-            @tab-changed="handleTabChange"
-          />
-        </div>
-        <div
-          v-if="isFetchingItem"
-          class="flex items-center justify-center py-10 text-n-slate-11"
-        >
-          <Spinner />
-        </div>
-        <template v-else>
-          <ContactCustomAttributes
-            v-if="activeTab === 'attributes'"
-            :selected-contact="selectedContact"
-          />
-          <ContactNotes v-if="activeTab === 'notes'" />
-          <ContactHistory v-if="activeTab === 'history'" />
-          <ContactMerge
-            v-if="activeTab === 'merge'"
-            ref="contactMergeRef"
-            :selected-contact="selectedContact"
-            @go-to-contacts-list="goToContactsList"
-            @reset-tab="handleTabChange(CONTACT_TABS_OPTIONS[0])"
-          />
-        </template>
-      </template>
-    </ContactsDetailsLayout>
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
deleted file mode 100644
index 357758e..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
+++ /dev/null
@@ -1,516 +0,0 @@
-<script setup>
-import { onMounted, computed, ref, reactive, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import { debounce } from '@chatwoot/utils';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-import filterQueryGenerator from 'dashboard/helper/filterQueryGenerator';
-
-import ContactsListLayout from 'dashboard/components-next/Contacts/ContactsListLayout.vue';
-import ContactEmptyState from 'dashboard/components-next/Contacts/EmptyState/ContactEmptyState.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import ContactsList from 'dashboard/components-next/Contacts/Pages/ContactsList.vue';
-import ContactsBulkActionBar from '../components/ContactsBulkActionBar.vue';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import BulkActionsAPI from 'dashboard/api/bulkActions';
-
-const DEFAULT_SORT_FIELD = 'last_activity_at';
-const DEBOUNCE_DELAY = 300;
-
-const store = useStore();
-const route = useRoute();
-const router = useRouter();
-const { t } = useI18n();
-
-const { updateUISettings, uiSettings } = useUISettings();
-
-const contacts = useMapGetter('contacts/getContactsList');
-const uiFlags = useMapGetter('contacts/getUIFlags');
-const customViewsUiFlags = useMapGetter('customViews/getUIFlags');
-const segments = useMapGetter('customViews/getContactCustomViews');
-const appliedFilters = useMapGetter('contacts/getAppliedContactFilters');
-const meta = useMapGetter('contacts/getMeta');
-
-const searchQuery = computed(() => route.query?.search);
-const searchValue = ref(searchQuery.value || '');
-const pageNumber = computed(() => Number(route.query?.page) || 1);
-// For infinite scroll in search, track page internally
-const searchPageNumber = ref(1);
-const isLoadingMore = ref(false);
-
-const parseSortSettings = (sortString = '') => {
-  const hasDescending = sortString.startsWith('-');
-  const sortField = hasDescending ? sortString.slice(1) : sortString;
-  return {
-    sort: sortField || DEFAULT_SORT_FIELD,
-    order: hasDescending ? '-' : '',
-  };
-};
-
-const { contacts_sort_by: contactSortBy = '' } = uiSettings.value ?? {};
-const { sort: initialSort, order: initialOrder } =
-  parseSortSettings(contactSortBy);
-
-const sortState = reactive({
-  activeSort: initialSort,
-  activeOrdering: initialOrder,
-});
-
-const activeLabel = computed(() => route.params.label);
-const activeSegmentId = computed(() => route.params.segmentId);
-const isFetchingList = computed(
-  () => uiFlags.value.isFetching || customViewsUiFlags.value.isFetching
-);
-const currentPage = computed(() => Number(meta.value?.currentPage));
-const totalItems = computed(() => meta.value?.count);
-const hasMore = computed(() => meta.value?.hasMore ?? false);
-const isSearchView = computed(() => !!searchQuery.value);
-
-const selectedContactIds = ref([]);
-const isBulkActionLoading = ref(false);
-const bulkDeleteDialogRef = ref(null);
-const selectedCount = computed(() => selectedContactIds.value.length);
-const bulkDeleteDialogTitle = computed(() =>
-  selectedCount.value > 1
-    ? t('CONTACTS_BULK_ACTIONS.DELETE_DIALOG.TITLE')
-    : t('CONTACTS_BULK_ACTIONS.DELETE_DIALOG.SINGULAR_TITLE')
-);
-const bulkDeleteDialogDescription = computed(() =>
-  selectedCount.value > 1
-    ? t('CONTACTS_BULK_ACTIONS.DELETE_DIALOG.DESCRIPTION', {
-        count: selectedCount.value,
-      })
-    : t('CONTACTS_BULK_ACTIONS.DELETE_DIALOG.SINGULAR_DESCRIPTION')
-);
-const bulkDeleteDialogConfirmLabel = computed(() =>
-  selectedCount.value > 1
-    ? t('CONTACTS_BULK_ACTIONS.DELETE_DIALOG.CONFIRM_MULTIPLE')
-    : t('CONTACTS_BULK_ACTIONS.DELETE_DIALOG.CONFIRM_SINGLE')
-);
-const hasSelection = computed(() => selectedCount.value > 0);
-const activeSegment = computed(() => {
-  if (!activeSegmentId.value) return undefined;
-  return segments.value.find(view => view.id === Number(activeSegmentId.value));
-});
-
-const hasContacts = computed(() => contacts.value.length > 0);
-const isContactIndexView = computed(
-  () => route.name === 'contacts_dashboard_index' && pageNumber.value === 1
-);
-const isActiveView = computed(() => route.name === 'contacts_dashboard_active');
-const hasAppliedFilters = computed(() => {
-  return appliedFilters.value.length > 0;
-});
-
-const showEmptyStateLayout = computed(() => {
-  return (
-    !searchQuery.value &&
-    !hasContacts.value &&
-    isContactIndexView.value &&
-    !hasAppliedFilters.value
-  );
-});
-const showEmptyText = computed(() => {
-  return (
-    (searchQuery.value ||
-      hasAppliedFilters.value ||
-      !isContactIndexView.value) &&
-    !hasContacts.value
-  );
-});
-
-const headerTitle = computed(() => {
-  if (searchQuery.value) return t('CONTACTS_LAYOUT.HEADER.SEARCH_TITLE');
-  if (isActiveView.value) return t('CONTACTS_LAYOUT.HEADER.ACTIVE_TITLE');
-  if (activeSegmentId.value) return activeSegment.value?.name;
-  if (activeLabel.value) return `#${activeLabel.value}`;
-  return t('CONTACTS_LAYOUT.HEADER.TITLE');
-});
-
-const emptyStateMessage = computed(() => {
-  if (isActiveView.value)
-    return t('CONTACTS_LAYOUT.EMPTY_STATE.ACTIVE_EMPTY_STATE_TITLE');
-  if (!searchQuery.value || hasAppliedFilters.value)
-    return t('CONTACTS_LAYOUT.EMPTY_STATE.LIST_EMPTY_STATE_TITLE');
-  return t('CONTACTS_LAYOUT.EMPTY_STATE.SEARCH_EMPTY_STATE_TITLE');
-});
-
-const visibleContactIds = computed(() =>
-  contacts.value.map(contact => contact.id)
-);
-
-const clearSelection = () => {
-  selectedContactIds.value = [];
-};
-
-const openBulkDeleteDialog = () => {
-  if (!selectedContactIds.value.length || isBulkActionLoading.value) return;
-  bulkDeleteDialogRef.value?.open?.();
-};
-
-const toggleSelectAll = shouldSelect => {
-  selectedContactIds.value = shouldSelect ? [...visibleContactIds.value] : [];
-};
-
-const toggleContactSelection = ({ id, value }) => {
-  const isAlreadySelected = selectedContactIds.value.includes(id);
-  const shouldSelect = value ?? !isAlreadySelected;
-
-  if (shouldSelect && !isAlreadySelected) {
-    selectedContactIds.value = [...selectedContactIds.value, id];
-  } else if (!shouldSelect && isAlreadySelected) {
-    selectedContactIds.value = selectedContactIds.value.filter(
-      contactId => contactId !== id
-    );
-  }
-};
-
-const updatePageParam = (page, search = '') => {
-  const query = {
-    ...route.query,
-    page: page.toString(),
-    ...(search ? { search } : {}),
-  };
-
-  if (!search) {
-    delete query.search;
-  }
-
-  router.replace({ query });
-};
-
-const buildSortAttr = () =>
-  `${sortState.activeOrdering}${sortState.activeSort}`;
-
-const getCommonFetchParams = (page = 1) => ({
-  page,
-  sortAttr: buildSortAttr(),
-  label: activeLabel.value,
-});
-
-const fetchContacts = async (page = 1) => {
-  clearSelection();
-  await store.dispatch('contacts/clearContactFilters');
-  await store.dispatch('contacts/get', getCommonFetchParams(page));
-  updatePageParam(page);
-};
-
-const fetchSavedOrAppliedFilteredContact = async (payload, page = 1) => {
-  if (!activeSegmentId.value && !hasAppliedFilters.value) return;
-  clearSelection();
-  await store.dispatch('contacts/filter', {
-    ...getCommonFetchParams(page),
-    queryPayload: payload,
-  });
-  updatePageParam(page);
-};
-
-const fetchActiveContacts = async (page = 1) => {
-  clearSelection();
-  await store.dispatch('contacts/clearContactFilters');
-  await store.dispatch('contacts/active', {
-    page,
-    sortAttr: buildSortAttr(),
-  });
-  updatePageParam(page);
-};
-
-const searchContacts = debounce(async (value, page = 1, append = false) => {
-  if (!append) {
-    clearSelection();
-    searchPageNumber.value = 1;
-  }
-  await store.dispatch('contacts/clearContactFilters');
-  searchValue.value = value;
-
-  if (!value) {
-    updatePageParam(page);
-    await fetchContacts(page);
-    return;
-  }
-
-  updatePageParam(page, value);
-  await store.dispatch('contacts/search', {
-    ...getCommonFetchParams(page),
-    search: encodeURIComponent(value),
-    append,
-  });
-  searchPageNumber.value = page;
-}, DEBOUNCE_DELAY);
-
-const loadMoreSearchResults = async () => {
-  if (!hasMore.value || isLoadingMore.value) return;
-
-  isLoadingMore.value = true;
-  const nextPage = searchPageNumber.value + 1;
-
-  await store.dispatch('contacts/search', {
-    ...getCommonFetchParams(nextPage),
-    search: encodeURIComponent(searchValue.value),
-    append: true,
-  });
-
-  searchPageNumber.value = nextPage;
-  isLoadingMore.value = false;
-};
-
-const fetchContactsBasedOnContext = async page => {
-  clearSelection();
-  updatePageParam(page, searchValue.value);
-  if (isFetchingList.value) return;
-  if (searchQuery.value) {
-    await searchContacts(searchQuery.value, page);
-    return;
-  }
-  // Reset the search value when we change the view
-  searchValue.value = '';
-  // If we're on the active route, fetch active contacts
-  if (isActiveView.value) {
-    await fetchActiveContacts(page);
-    return;
-  }
-  // If there are applied filters or active segment with query
-  if (
-    (hasAppliedFilters.value || activeSegment.value?.query) &&
-    !activeLabel.value
-  ) {
-    const queryPayload =
-      activeSegment.value?.query || filterQueryGenerator(appliedFilters.value);
-    await fetchSavedOrAppliedFilteredContact(queryPayload, page);
-    return;
-  }
-  // Default case: fetch regular contacts + label
-  await fetchContacts(page);
-};
-
-const assignLabels = async labels => {
-  if (!labels.length || !selectedContactIds.value.length) {
-    return;
-  }
-
-  isBulkActionLoading.value = true;
-  try {
-    await BulkActionsAPI.create({
-      type: 'Contact',
-      ids: selectedContactIds.value,
-      labels: { add: labels },
-    });
-    useAlert(t('CONTACTS_BULK_ACTIONS.ASSIGN_LABELS_SUCCESS'));
-    clearSelection();
-    await fetchContactsBasedOnContext(pageNumber.value);
-  } catch (error) {
-    useAlert(t('CONTACTS_BULK_ACTIONS.ASSIGN_LABELS_FAILED'));
-  } finally {
-    isBulkActionLoading.value = false;
-  }
-};
-
-const deleteContacts = async () => {
-  if (!selectedContactIds.value.length) {
-    return;
-  }
-
-  isBulkActionLoading.value = true;
-  try {
-    await BulkActionsAPI.create({
-      type: 'Contact',
-      ids: selectedContactIds.value,
-      action_name: 'delete',
-    });
-    useAlert(t('CONTACTS_BULK_ACTIONS.DELETE_SUCCESS'));
-    clearSelection();
-    await fetchContactsBasedOnContext(pageNumber.value);
-    bulkDeleteDialogRef.value?.close?.();
-  } catch (error) {
-    useAlert(t('CONTACTS_BULK_ACTIONS.DELETE_FAILED'));
-  } finally {
-    isBulkActionLoading.value = false;
-  }
-};
-
-const handleSort = async ({ sort, order }) => {
-  Object.assign(sortState, { activeSort: sort, activeOrdering: order });
-
-  await updateUISettings({
-    contacts_sort_by: buildSortAttr(),
-  });
-
-  if (searchQuery.value) {
-    await searchContacts(searchValue.value);
-    return;
-  }
-
-  if (isActiveView.value) {
-    await fetchActiveContacts();
-    return;
-  }
-
-  await (activeSegmentId.value || hasAppliedFilters.value
-    ? fetchSavedOrAppliedFilteredContact(
-        activeSegmentId.value
-          ? activeSegment.value?.query
-          : filterQueryGenerator(appliedFilters.value)
-      )
-    : fetchContacts());
-};
-
-const createContact = async contact => {
-  await store.dispatch('contacts/create', contact);
-};
-
-watch(
-  contacts,
-  newContacts => {
-    const idsOnPage = newContacts.map(contact => contact.id);
-    selectedContactIds.value = selectedContactIds.value.filter(id =>
-      idsOnPage.includes(id)
-    );
-  },
-  { deep: true }
-);
-
-watch(hasSelection, value => {
-  if (!value) {
-    bulkDeleteDialogRef.value?.close?.();
-  }
-});
-
-watch(
-  () => uiSettings.value?.contacts_sort_by,
-  newSortBy => {
-    if (newSortBy) {
-      const { sort, order } = parseSortSettings(newSortBy);
-      sortState.activeSort = sort;
-      sortState.activeOrdering = order;
-    }
-  },
-  { immediate: true }
-);
-
-watch(
-  [activeLabel, activeSegment, isActiveView],
-  () => {
-    fetchContactsBasedOnContext(pageNumber.value);
-  },
-  { deep: true }
-);
-
-watch(searchQuery, value => {
-  if (isFetchingList.value) return;
-  searchValue.value = value || '';
-  // Reset the view if there is search query when we click on the sidebar group
-  if (value === undefined) {
-    if (
-      isActiveView.value ||
-      activeLabel.value ||
-      activeSegment.value ||
-      hasAppliedFilters.value
-    )
-      return;
-    fetchContacts();
-  }
-});
-
-onMounted(async () => {
-  if (!activeSegmentId.value) {
-    if (searchQuery.value) {
-      await searchContacts(searchQuery.value, pageNumber.value);
-      return;
-    }
-    if (isActiveView.value) {
-      await fetchActiveContacts(pageNumber.value);
-      return;
-    }
-    await fetchContacts(pageNumber.value);
-  } else if (activeSegment.value && activeSegmentId.value) {
-    await fetchSavedOrAppliedFilteredContact(
-      activeSegment.value.query,
-      pageNumber.value
-    );
-  }
-});
-</script>
-
-<template>
-  <div
-    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-surface-1"
-  >
-    <ContactsListLayout
-      :search-value="searchValue"
-      :header-title="headerTitle"
-      :current-page="currentPage"
-      :total-items="totalItems"
-      :show-pagination-footer="!isFetchingList && hasContacts && !isSearchView"
-      :active-sort="sortState.activeSort"
-      :active-ordering="sortState.activeOrdering"
-      :active-segment="activeSegment"
-      :segments-id="activeSegmentId"
-      :is-fetching-list="isFetchingList"
-      :has-applied-filters="hasAppliedFilters"
-      :use-infinite-scroll="isSearchView"
-      :has-more="hasMore"
-      :is-loading-more="isLoadingMore"
-      @update:current-page="fetchContactsBasedOnContext"
-      @search="searchContacts"
-      @update:sort="handleSort"
-      @apply-filter="fetchSavedOrAppliedFilteredContact"
-      @clear-filters="fetchContacts"
-      @load-more="loadMoreSearchResults"
-    >
-      <div
-        v-if="isFetchingList && !(isSearchView && hasContacts)"
-        class="flex items-center justify-center py-10 text-n-slate-11"
-      >
-        <Spinner />
-      </div>
-
-      <template v-else>
-        <ContactsBulkActionBar
-          v-if="hasSelection"
-          :visible-contact-ids="visibleContactIds"
-          :selected-contact-ids="selectedContactIds"
-          :is-loading="isBulkActionLoading"
-          @toggle-all="toggleSelectAll"
-          @clear-selection="clearSelection"
-          @assign-labels="assignLabels"
-          @delete-selected="openBulkDeleteDialog"
-        />
-        <ContactEmptyState
-          v-if="showEmptyStateLayout"
-          class="pt-14"
-          :title="t('CONTACTS_LAYOUT.EMPTY_STATE.TITLE')"
-          :subtitle="t('CONTACTS_LAYOUT.EMPTY_STATE.SUBTITLE')"
-          :button-label="t('CONTACTS_LAYOUT.EMPTY_STATE.BUTTON_LABEL')"
-          @create="createContact"
-        />
-        <div
-          v-else-if="showEmptyText"
-          class="flex items-center justify-center py-10"
-        >
-          <span class="text-base text-n-slate-11">
-            {{ emptyStateMessage }}
-          </span>
-        </div>
-        <div v-else class="flex flex-col gap-4 pt-4 pb-6">
-          <ContactsList
-            :contacts="contacts"
-            :selected-contact-ids="selectedContactIds"
-            @toggle-contact="toggleContactSelection"
-          />
-          <Dialog
-            v-if="selectedCount"
-            ref="bulkDeleteDialogRef"
-            type="alert"
-            :title="bulkDeleteDialogTitle"
-            :description="bulkDeleteDialogDescription"
-            :confirm-button-label="bulkDeleteDialogConfirmLabel"
-            :is-loading="isBulkActionLoading"
-            @confirm="deleteContacts"
-          />
-        </div>
-      </template>
-    </ContactsListLayout>
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue
deleted file mode 100644
index 334465e..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<script setup>
-import { computed, onMounted, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import { useStore } from 'vuex';
-import UpgradePage from '../components/UpgradePage.vue';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-
-const route = useRoute();
-const store = useStore();
-const { uiSettings, updateUISettings } = useUISettings();
-
-const accountId = computed(() => store.getters.getCurrentAccountId);
-const portals = computed(() => store.getters['portals/allPortals']);
-const isFeatureEnabledonAccount = (id, flag) =>
-  store.getters['accounts/isFeatureEnabledonAccount'](id, flag);
-
-const isHelpCenterEnabled = computed(() =>
-  isFeatureEnabledonAccount(accountId.value, FEATURE_FLAGS.HELP_CENTER)
-);
-
-const selectedPortal = computed(() => {
-  const slug =
-    route.params.portalSlug || uiSettings.value.last_active_portal_slug;
-  if (slug) return store.getters['portals/portalBySlug'](slug);
-  return portals.value[0];
-});
-
-const defaultPortalLocale = computed(() =>
-  selectedPortal.value ? selectedPortal.value.meta?.default_locale : ''
-);
-const selectedLocaleInPortal = computed(
-  () => route.params.locale || defaultPortalLocale.value
-);
-
-const selectedPortalSlug = computed(() =>
-  selectedPortal.value ? selectedPortal.value.slug : ''
-);
-
-const fetchPortalAndItsCategories = async () => {
-  await store.dispatch('portals/index');
-  const selectedPortalParam = {
-    portalSlug: selectedPortalSlug.value,
-    locale: selectedLocaleInPortal.value,
-  };
-  store.dispatch('portals/show', selectedPortalParam);
-  store.dispatch('categories/index', selectedPortalParam);
-  store.dispatch('agents/get');
-};
-
-onMounted(() => fetchPortalAndItsCategories());
-
-watch(
-  () => route.params.portalSlug,
-  newSlug => {
-    if (newSlug && newSlug !== uiSettings.value.last_active_portal_slug) {
-      updateUISettings({
-        last_active_portal_slug: newSlug,
-        last_active_locale_code: selectedLocaleInPortal.value,
-      });
-    }
-  }
-);
-</script>
-
-<template>
-  <div class="flex w-full h-full min-h-0">
-    <section
-      v-if="isHelpCenterEnabled"
-      class="flex flex-1 h-full px-0 overflow-hidden bg-n-surface-1"
-    >
-      <router-view />
-    </section>
-    <UpgradePage v-else />
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue
deleted file mode 100644
index 809fd5d..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<script setup>
-import { ref, computed, onMounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-import { buildPortalArticleURL } from 'dashboard/helper/portalHelper';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-
-import ArticleEditor from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue';
-
-const route = useRoute();
-const router = useRouter();
-const store = useStore();
-const { t } = useI18n();
-
-const { articleSlug, portalSlug } = route.params;
-
-const articleById = useMapGetter('articles/articleById');
-
-const article = computed(() => articleById.value(articleSlug));
-
-const portalBySlug = useMapGetter('portals/portalBySlug');
-
-const portal = computed(() => portalBySlug.value(portalSlug));
-
-const isUpdating = ref(false);
-const isSaved = ref(false);
-
-const articleLink = computed(() => {
-  const { slug: categorySlug, locale: categoryLocale } = article.value.category;
-  const { slug: articleSlugValue } = article.value;
-  const portalCustomDomain = portal.value?.custom_domain;
-  return buildPortalArticleURL(
-    portalSlug,
-    categorySlug,
-    categoryLocale,
-    articleSlugValue,
-    portalCustomDomain
-  );
-});
-
-const saveArticle = async ({ ...values }, isAsync = false) => {
-  const actionToDispatch = isAsync ? 'articles/updateAsync' : 'articles/update';
-  isUpdating.value = true;
-  try {
-    await store.dispatch(actionToDispatch, {
-      portalSlug,
-      articleId: articleSlug,
-      ...values,
-    });
-    isSaved.value = true;
-  } catch (error) {
-    const errorMessage =
-      error?.message || t('HELP_CENTER.EDIT_ARTICLE_PAGE.API.ERROR');
-    useAlert(errorMessage);
-  } finally {
-    setTimeout(() => {
-      isUpdating.value = false;
-      isSaved.value = true;
-    }, 1500);
-  }
-};
-
-const saveArticleAsync = async ({ ...values }) => {
-  saveArticle({ ...values }, true);
-};
-
-const isCategoryArticles = computed(() => {
-  return (
-    route.name === 'portals_categories_articles_index' ||
-    route.name === 'portals_categories_articles_edit' ||
-    route.name === 'portals_categories_index'
-  );
-});
-
-const goBackToArticles = () => {
-  const { tab, categorySlug, locale } = route.params;
-  if (isCategoryArticles.value) {
-    router.push({
-      name: 'portals_categories_articles_index',
-      params: { categorySlug, locale },
-    });
-  } else {
-    router.push({
-      name: 'portals_articles_index',
-      params: { tab, categorySlug, locale },
-    });
-  }
-};
-
-const fetchArticleDetails = () => {
-  store.dispatch('articles/show', {
-    id: articleSlug,
-    portalSlug,
-  });
-};
-
-const previewArticle = () => {
-  window.open(articleLink.value, '_blank');
-  useTrack(PORTALS_EVENTS.PREVIEW_ARTICLE, {
-    status: article.value?.status,
-  });
-};
-
-onMounted(fetchArticleDetails);
-</script>
-
-<template>
-  <ArticleEditor
-    :article="article"
-    :is-updating="isUpdating"
-    :is-saved="isSaved"
-    @save-article="saveArticle"
-    @save-article-async="saveArticleAsync"
-    @preview-article="previewArticle"
-    @go-back="goBackToArticles"
-  />
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesIndexPage.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesIndexPage.vue
deleted file mode 100644
index f7a109e..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesIndexPage.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<script setup>
-import { computed, ref, onMounted, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import { useMapGetter, useStore } from 'dashboard/composables/store.js';
-import allLocales from 'shared/constants/locales.js';
-import { getArticleStatus } from 'dashboard/helper/portalHelper.js';
-import ArticlesPage from 'dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue';
-
-const route = useRoute();
-const store = useStore();
-
-const pageNumber = ref(1);
-
-const articles = useMapGetter('articles/allArticles');
-const categories = useMapGetter('categories/allCategories');
-const meta = useMapGetter('articles/getMeta');
-const portalMeta = useMapGetter('portals/getMeta');
-const currentUserId = useMapGetter('getCurrentUserID');
-const getPortalBySlug = useMapGetter('portals/portalBySlug');
-
-const selectedPortalSlug = computed(() => route.params.portalSlug);
-const selectedCategorySlug = computed(() => route.params.categorySlug);
-const status = computed(() => getArticleStatus(route.params.tab));
-
-const author = computed(() =>
-  route.params.tab === 'mine' ? currentUserId.value : null
-);
-
-const activeLocale = computed(() => route.params.locale);
-const portal = computed(() => getPortalBySlug.value(selectedPortalSlug.value));
-const allowedLocales = computed(() => {
-  if (!portal.value) {
-    return [];
-  }
-  const { allowed_locales: allAllowedLocales } = portal.value.config;
-  return allAllowedLocales.map(locale => {
-    return {
-      id: locale.code,
-      name: allLocales[locale.code],
-      code: locale.code,
-    };
-  });
-});
-
-const defaultPortalLocale = computed(() => {
-  return portal.value?.meta?.default_locale;
-});
-
-const selectedLocaleInPortal = computed(() => {
-  return route.params.locale || defaultPortalLocale.value;
-});
-
-const isCategoryArticles = computed(() => {
-  return (
-    route.name === 'portals_categories_articles_index' ||
-    route.name === 'portals_categories_articles_edit' ||
-    route.name === 'portals_categories_index'
-  );
-});
-
-const fetchArticles = ({ pageNumber: pageNumberParam } = {}) => {
-  store.dispatch('articles/index', {
-    pageNumber: pageNumberParam || pageNumber.value,
-    portalSlug: selectedPortalSlug.value,
-    locale: activeLocale.value,
-    status: status.value,
-    authorId: author.value,
-    categorySlug: selectedCategorySlug.value,
-  });
-};
-
-const onPageChange = pageNumberParam => {
-  fetchArticles({ pageNumber: pageNumberParam });
-};
-
-const fetchPortalAndItsCategories = async locale => {
-  await store.dispatch('portals/index');
-  const selectedPortalParam = {
-    portalSlug: selectedPortalSlug.value,
-    locale: locale || selectedLocaleInPortal.value,
-  };
-  store.dispatch('portals/show', selectedPortalParam);
-  store.dispatch('categories/index', selectedPortalParam);
-  store.dispatch('agents/get');
-};
-
-onMounted(() => {
-  fetchArticles();
-});
-
-watch(
-  () => route.params,
-  () => {
-    pageNumber.value = 1;
-    fetchArticles();
-  },
-  { deep: true, immediate: true }
-);
-</script>
-
-<template>
-  <div class="w-full h-full">
-    <ArticlesPage
-      v-if="portal"
-      :articles="articles"
-      :portal-name="portal.name"
-      :categories="categories"
-      :allowed-locales="allowedLocales"
-      :meta="meta"
-      :portal-meta="portalMeta"
-      :is-category-articles="isCategoryArticles"
-      @page-change="onPageChange"
-      @fetch-portal="fetchPortalAndItsCategories"
-    />
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesNewPage.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesNewPage.vue
deleted file mode 100644
index 3833573..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesNewPage.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-
-import ArticleEditor from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue';
-
-const route = useRoute();
-const router = useRouter();
-const store = useStore();
-const { t } = useI18n();
-
-const { portalSlug } = route.params;
-
-const selectedAuthorId = ref(null);
-const selectedCategoryId = ref(null);
-
-const currentUserId = useMapGetter('getCurrentUserID');
-const categories = useMapGetter('categories/allCategories');
-
-const categoryId = computed(() => categories.value[0]?.id || null);
-
-const article = ref({});
-const isUpdating = ref(false);
-const isSaved = ref(false);
-
-const setAuthorId = authorId => {
-  selectedAuthorId.value = authorId;
-};
-
-const setCategoryId = newCategoryId => {
-  selectedCategoryId.value = newCategoryId;
-};
-
-const createNewArticle = async ({ title, content }) => {
-  if (title) article.value.title = title;
-  if (content) article.value.content = content;
-
-  if (!article.value.title || !article.value.content) return;
-
-  isUpdating.value = true;
-  try {
-    const { locale } = route.params;
-    const articleId = await store.dispatch('articles/create', {
-      portalSlug,
-      content: article.value.content,
-      title: article.value.title,
-      locale: locale,
-      authorId: selectedAuthorId.value || currentUserId.value,
-      categoryId: selectedCategoryId.value || categoryId.value,
-    });
-
-    useTrack(PORTALS_EVENTS.CREATE_ARTICLE, { locale });
-
-    router.replace({
-      name: 'portals_articles_edit',
-      params: {
-        articleSlug: articleId,
-        portalSlug,
-        locale,
-      },
-    });
-  } catch (error) {
-    const errorMessage =
-      error?.message || t('HELP_CENTER.EDIT_ARTICLE_PAGE.API.ERROR');
-    useAlert(errorMessage);
-  } finally {
-    isUpdating.value = false;
-  }
-};
-
-const goBackToArticles = () => {
-  const { tab, categorySlug, locale } = route.params;
-  router.push({
-    name: 'portals_articles_index',
-    params: { tab, categorySlug, locale },
-  });
-};
-</script>
-
-<template>
-  <ArticleEditor
-    :article="article"
-    :is-updating="isUpdating"
-    :is-saved="isSaved"
-    @save-article="createNewArticle"
-    @go-back="goBackToArticles"
-    @set-author="setAuthorId"
-    @set-category="setCategoryId"
-  />
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsCategoriesIndexPage.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsCategoriesIndexPage.vue
deleted file mode 100644
index ca95143..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsCategoriesIndexPage.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script setup>
-import { computed, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import { useMapGetter, useStore } from 'dashboard/composables/store.js';
-import allLocales from 'shared/constants/locales.js';
-
-import CategoriesPage from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.vue';
-
-const store = useStore();
-const route = useRoute();
-
-const categories = useMapGetter('categories/allCategories');
-
-const selectedPortalSlug = computed(() => route.params.portalSlug);
-const getPortalBySlug = useMapGetter('portals/portalBySlug');
-
-const isFetching = useMapGetter('categories/isFetching');
-
-const portal = computed(() => getPortalBySlug.value(selectedPortalSlug.value));
-
-const allowedLocales = computed(() => {
-  if (!portal.value) {
-    return [];
-  }
-  const { allowed_locales: allAllowedLocales } = portal.value.config;
-  return allAllowedLocales.map(locale => {
-    return {
-      id: locale.code,
-      name: allLocales[locale.code],
-      code: locale.code,
-    };
-  });
-});
-
-const fetchCategoriesByPortalSlugAndLocale = async localeCode => {
-  await store.dispatch('categories/index', {
-    portalSlug: selectedPortalSlug.value,
-    locale: localeCode,
-  });
-};
-
-const updateMeta = async localeCode => {
-  return store.dispatch('portals/show', {
-    portalSlug: selectedPortalSlug.value,
-    locale: localeCode,
-  });
-};
-
-const fetchCategories = async localeCode => {
-  await fetchCategoriesByPortalSlugAndLocale(localeCode);
-  await updateMeta(localeCode);
-};
-
-onMounted(() => {
-  fetchCategoriesByPortalSlugAndLocale(route.params.locale);
-});
-</script>
-
-<template>
-  <CategoriesPage
-    :categories="categories"
-    :is-fetching="isFetching"
-    :allowed-locales="allowedLocales"
-    @fetch-categories="fetchCategories"
-  />
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsIndexPage.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsIndexPage.vue
deleted file mode 100644
index 65bc6c0..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsIndexPage.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<script setup>
-import { computed, nextTick, onMounted } from 'vue';
-import { useStore } from 'vuex';
-import { useRoute, useRouter } from 'vue-router';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-
-const store = useStore();
-const router = useRouter();
-const { uiSettings } = useUISettings();
-const route = useRoute();
-
-const portals = computed(() => store.getters['portals/allPortals']);
-
-const isPortalPresent = portalSlug => {
-  return !!portals.value.find(portal => portal.slug === portalSlug);
-};
-
-const routeToView = (name, params) => {
-  router.replace({ name, params, replace: true });
-};
-
-const generateRouterParams = () => {
-  const {
-    last_active_portal_slug: lastActivePortalSlug,
-    last_active_locale_code: lastActiveLocaleCode,
-  } = uiSettings.value || {};
-  if (isPortalPresent(lastActivePortalSlug)) {
-    return {
-      portalSlug: lastActivePortalSlug,
-      locale: lastActiveLocaleCode,
-    };
-  }
-
-  if (portals.value.length > 0) {
-    const { slug: portalSlug, meta: { default_locale: locale } = {} } =
-      portals.value[0];
-    return { portalSlug, locale };
-  }
-
-  return null;
-};
-
-const routeToLastActivePortal = () => {
-  const params = generateRouterParams();
-  const { navigationPath } = route.params;
-  const isAValidRoute = [
-    'portals_articles_index',
-    'portals_categories_index',
-    'portals_locales_index',
-    'portals_settings_index',
-  ].includes(navigationPath);
-
-  const navigateTo = isAValidRoute ? navigationPath : 'portals_articles_index';
-  if (params) {
-    return routeToView(navigateTo, params);
-  }
-  return routeToView('portals_new', {});
-};
-
-const performRouting = async () => {
-  await store.dispatch('portals/index');
-  nextTick(() => routeToLastActivePortal());
-};
-
-onMounted(() => performRouting());
-</script>
-
-<template>
-  <div
-    class="flex items-center justify-center w-full bg-n-surface-1 text-n-slate-11"
-  >
-    <Spinner />
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsLocalesIndexPage.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsLocalesIndexPage.vue
deleted file mode 100644
index 95a650e..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsLocalesIndexPage.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { useMapGetter } from 'dashboard/composables/store.js';
-import allLocales from 'shared/constants/locales.js';
-
-import LocalesPage from 'dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue';
-
-const route = useRoute();
-
-const getPortalBySlug = useMapGetter('portals/portalBySlug');
-
-const portal = computed(() => getPortalBySlug.value(route.params.portalSlug));
-
-const allowedLocales = computed(() => {
-  if (!portal.value) {
-    return [];
-  }
-  const { allowed_locales: allAllowedLocales } = portal.value.config;
-  return allAllowedLocales.map(locale => {
-    return {
-      id: locale?.code,
-      name: allLocales[locale?.code],
-      code: locale?.code,
-      articlesCount: locale?.articles_count || 0,
-      categoriesCount: locale?.categories_count || 0,
-    };
-  });
-});
-</script>
-
-<template>
-  <LocalesPage :locales="allowedLocales" :portal="portal" />
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsNewPage.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsNewPage.vue
deleted file mode 100644
index 1c94fc6..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsNewPage.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup>
-import PortalEmptyState from 'dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue';
-</script>
-
-<template>
-  <div class="w-full h-full bg-n-background">
-    <PortalEmptyState />
-  </div>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsSettingsIndexPage.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsSettingsIndexPage.vue
deleted file mode 100644
index e095333..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsSettingsIndexPage.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-import { useAlert } from 'dashboard/composables';
-import { useMapGetter, useStore } from 'dashboard/composables/store.js';
-import { useAccount } from 'dashboard/composables/useAccount';
-import PortalSettings from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue';
-
-const SSL_STATUS_FETCH_INTERVAL = 5000;
-
-const { t } = useI18n();
-const store = useStore();
-const route = useRoute();
-const router = useRouter();
-const { isOnChatwootCloud } = useAccount();
-
-const { updateUISettings } = useUISettings();
-
-const portals = useMapGetter('portals/allPortals');
-const isFetching = useMapGetter('portals/isFetchingPortals');
-const getPortalBySlug = useMapGetter('portals/portalBySlug');
-
-const getNextAvailablePortal = deletedPortalSlug =>
-  portals.value?.find(portal => portal.slug !== deletedPortalSlug) ?? null;
-
-const getDefaultLocale = slug => {
-  return getPortalBySlug.value(slug)?.meta?.default_locale;
-};
-
-const fetchSSLStatus = () => {
-  if (!isOnChatwootCloud.value) return;
-
-  const { portalSlug } = route.params;
-  store.dispatch('portals/sslStatus', {
-    portalSlug,
-  });
-};
-
-const fetchPortalAndItsCategories = async (slug, locale) => {
-  const selectedPortalParam = { portalSlug: slug, locale };
-  await Promise.all([
-    store.dispatch('portals/index'),
-    store.dispatch('portals/show', selectedPortalParam),
-    store.dispatch('categories/index', selectedPortalParam),
-    store.dispatch('agents/get'),
-    store.dispatch('inboxes/get'),
-  ]);
-};
-
-const updateRouteAfterDeletion = async deletedPortalSlug => {
-  const nextPortal = getNextAvailablePortal(deletedPortalSlug);
-  if (nextPortal) {
-    const {
-      slug,
-      meta: { default_locale: defaultLocale },
-    } = nextPortal;
-    await fetchPortalAndItsCategories(slug, defaultLocale);
-    router.push({
-      name: 'portals_articles_index',
-      params: { portalSlug: slug, locale: defaultLocale },
-    });
-  } else {
-    router.push({ name: 'portals_new' });
-  }
-};
-
-const refreshPortalRoute = async (newSlug, defaultLocale) => {
-  // This is to refresh the portal route and update the UI settings
-  // If there is slug change, this will be called to refresh the route and UI settings
-  await fetchPortalAndItsCategories(newSlug, defaultLocale);
-  updateUISettings({
-    last_active_portal_slug: newSlug,
-    last_active_locale_code: defaultLocale,
-  });
-  await router.replace({
-    name: 'portals_settings_index',
-    params: { portalSlug: newSlug },
-  });
-};
-
-const updatePortalSettings = async portalObj => {
-  const { portalSlug } = route.params;
-  try {
-    const defaultLocale = getDefaultLocale(portalSlug);
-    await store.dispatch('portals/update', {
-      ...portalObj,
-      portalSlug: portalSlug || portalObj?.slug,
-    });
-
-    // If there is a slug change, this will refresh the route and update the UI settings
-    if (portalObj?.slug && portalSlug !== portalObj.slug) {
-      await refreshPortalRoute(portalObj.slug, defaultLocale);
-    }
-    useAlert(
-      t('HELP_CENTER.PORTAL_SETTINGS.API.UPDATE_PORTAL.SUCCESS_MESSAGE')
-    );
-  } catch (error) {
-    useAlert(
-      error?.message ||
-        t('HELP_CENTER.PORTAL_SETTINGS.API.UPDATE_PORTAL.ERROR_MESSAGE')
-    );
-  }
-};
-
-const deletePortal = async selectedPortalForDelete => {
-  const { slug } = selectedPortalForDelete;
-  try {
-    await store.dispatch('portals/delete', { portalSlug: slug });
-    await updateRouteAfterDeletion(slug);
-    useAlert(
-      t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.API.DELETE_SUCCESS')
-    );
-  } catch (error) {
-    useAlert(
-      error?.message ||
-        t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.API.DELETE_ERROR')
-    );
-  }
-};
-
-const handleSendCnameInstructions = async payload => {
-  try {
-    await store.dispatch('portals/sendCnameInstructions', payload);
-    useAlert(
-      t(
-        'HELP_CENTER.PORTAL.PORTAL_SETTINGS.SEND_CNAME_INSTRUCTIONS.API.SUCCESS_MESSAGE'
-      )
-    );
-  } catch (error) {
-    useAlert(
-      error?.message ||
-        t(
-          'HELP_CENTER.PORTAL.PORTAL_SETTINGS.SEND_CNAME_INSTRUCTIONS.API.ERROR_MESSAGE'
-        )
-    );
-  }
-};
-
-const handleUpdatePortal = updatePortalSettings;
-const handleUpdatePortalConfiguration = portalObj => {
-  updatePortalSettings(portalObj);
-
-  // If custom domain is added or updated, fetch SSL status after a delay of 5 seconds (only on Chatwoot cloud)
-  if (portalObj?.custom_domain && isOnChatwootCloud.value) {
-    setTimeout(() => {
-      fetchSSLStatus();
-    }, SSL_STATUS_FETCH_INTERVAL);
-  }
-};
-const handleDeletePortal = deletePortal;
-</script>
-
-<template>
-  <PortalSettings
-    :portals="portals"
-    :is-fetching="isFetching"
-    @update-portal="handleUpdatePortal"
-    @update-portal-configuration="handleUpdatePortalConfiguration"
-    @delete-portal="handleDeletePortal"
-    @refresh-status="fetchSSLStatus"
-    @send-cname-instructions="handleSendCnameInstructions"
-  />
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentCreatePage.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentCreatePage.vue
deleted file mode 100644
index c892e38..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentCreatePage.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useRoute, useRouter } from 'vue-router';
-import { useAlert } from 'dashboard/composables';
-
-import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
-import SettingsLayout from 'dashboard/routes/dashboard/settings/SettingsLayout.vue';
-import AssignmentPolicyForm from 'dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentAssignmentPolicyForm.vue';
-
-const route = useRoute();
-const router = useRouter();
-const store = useStore();
-const { t } = useI18n();
-
-const formRef = ref(null);
-const uiFlags = useMapGetter('assignmentPolicies/getUIFlags');
-
-const inboxIdFromQuery = computed(() => {
-  const id = route.query.inboxId;
-  return id ? Number(id) : null;
-});
-
-const breadcrumbItems = computed(() => {
-  if (inboxIdFromQuery.value) {
-    return [
-      {
-        label: t('INBOX_MGMT.SETTINGS'),
-        routeName: 'settings_inbox_show',
-        params: { inboxId: inboxIdFromQuery.value },
-      },
-      {
-        label: t(
-          'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.CREATE.HEADER.TITLE'
-        ),
-      },
-    ];
-  }
-  return [
-    {
-      label: t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.HEADER.TITLE'),
-      routeName: 'agent_assignment_policy_index',
-    },
-    {
-      label: t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.CREATE.HEADER.TITLE'),
-    },
-  ];
-});
-
-const handleBreadcrumbClick = item => {
-  if (item.params) {
-    const accountId = route.params.accountId;
-    const inboxId = item.params.inboxId;
-    // Navigate using explicit path to ensure tab parameter is included
-    router.push(
-      `/app/accounts/${accountId}/settings/inboxes/${inboxId}/collaborators`
-    );
-  } else {
-    router.push({
-      name: item.routeName,
-    });
-  }
-};
-
-const handleSubmit = async formState => {
-  try {
-    const policy = await store.dispatch('assignmentPolicies/create', formState);
-    useAlert(
-      t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.CREATE.API.SUCCESS_MESSAGE')
-    );
-    formRef.value?.resetForm();
-
-    router.push({
-      name: 'agent_assignment_policy_edit',
-      params: {
-        id: policy.id,
-      },
-      // Pass inboxId to edit page to show link prompt
-      query: inboxIdFromQuery.value ? { inboxId: inboxIdFromQuery.value } : {},
-    });
-  } catch (error) {
-    useAlert(
-      t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.CREATE.API.ERROR_MESSAGE')
-    );
-  }
-};
-</script>
-
-<template>
-  <SettingsLayout class="w-full max-w-2xl ltr:mr-auto rtl:ml-auto">
-    <template #header>
-      <div class="flex items-center gap-2 w-full justify-between mb-4 min-h-10">
-        <Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
-      </div>
-    </template>
-
-    <template #body>
-      <AssignmentPolicyForm
-        ref="formRef"
-        mode="CREATE"
-        :is-loading="uiFlags.isCreating"
-        @submit="handleSubmit"
-      />
-    </template>
-  </SettingsLayout>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentEditPage.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentEditPage.vue
deleted file mode 100644
index dfae603..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentEditPage.vue
+++ /dev/null
@@ -1,293 +0,0 @@
-<script setup>
-import { computed, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useRoute, useRouter } from 'vue-router';
-import { useAlert } from 'dashboard/composables';
-import { getInboxIconByType } from 'dashboard/helper/inbox';
-import {
-  ROUND_ROBIN,
-  EARLIEST_CREATED,
-} from 'dashboard/routes/dashboard/settings/assignmentPolicy/constants';
-
-import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
-import SettingsLayout from 'dashboard/routes/dashboard/settings/SettingsLayout.vue';
-import AssignmentPolicyForm from 'dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentAssignmentPolicyForm.vue';
-import ConfirmInboxDialog from 'dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/ConfirmInboxDialog.vue';
-import InboxLinkDialog from 'dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/InboxLinkDialog.vue';
-
-const BASE_KEY = 'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY';
-
-const { t } = useI18n();
-const route = useRoute();
-const router = useRouter();
-const store = useStore();
-
-const uiFlags = useMapGetter('assignmentPolicies/getUIFlags');
-const inboxes = useMapGetter('inboxes/getAllInboxes');
-const inboxUiFlags = useMapGetter('assignmentPolicies/getInboxUiFlags');
-const selectedPolicyById = useMapGetter(
-  'assignmentPolicies/getAssignmentPolicyById'
-);
-
-const routeId = computed(() => route.params.id);
-const selectedPolicy = computed(() => selectedPolicyById.value(routeId.value));
-
-const confirmInboxDialogRef = ref(null);
-// Store the policy linked to the inbox when adding a new inbox
-const inboxLinkedPolicy = ref(null);
-
-// Inbox linking prompt from create flow
-const inboxIdFromQuery = computed(() => {
-  const id = route.query.inboxId;
-  return id ? Number(id) : null;
-});
-
-const suggestedInbox = computed(() => {
-  if (!inboxIdFromQuery.value || !inboxes.value) return null;
-  return inboxes.value.find(inbox => inbox.id === inboxIdFromQuery.value);
-});
-
-const isLinkingInbox = ref(false);
-
-const dismissInboxLinkPrompt = () => {
-  router.replace({
-    name: route.name,
-    params: route.params,
-    query: {},
-  });
-};
-
-const breadcrumbItems = computed(() => {
-  if (inboxIdFromQuery.value) {
-    return [
-      {
-        label: t('INBOX_MGMT.SETTINGS'),
-        routeName: 'settings_inbox_show',
-        params: { inboxId: inboxIdFromQuery.value },
-      },
-      { label: t(`${BASE_KEY}.EDIT.HEADER.TITLE`) },
-    ];
-  }
-  return [
-    {
-      label: t(`${BASE_KEY}.INDEX.HEADER.TITLE`),
-      routeName: 'agent_assignment_policy_index',
-    },
-    { label: t(`${BASE_KEY}.EDIT.HEADER.TITLE`) },
-  ];
-});
-
-const buildInboxList = allInboxes =>
-  allInboxes?.map(({ name, id, email, phoneNumber, channelType, medium }) => ({
-    name,
-    id,
-    email,
-    phoneNumber,
-    icon: getInboxIconByType(channelType, medium, 'line'),
-  })) || [];
-
-const policyInboxes = computed(() =>
-  buildInboxList(selectedPolicy.value?.inboxes)
-);
-
-const inboxList = computed(() =>
-  buildInboxList(
-    inboxes.value?.slice().sort((a, b) => a.name.localeCompare(b.name))
-  )
-);
-
-const formData = computed(() => ({
-  name: selectedPolicy.value?.name || '',
-  description: selectedPolicy.value?.description || '',
-  enabled: true,
-  assignmentOrder: selectedPolicy.value?.assignmentOrder || ROUND_ROBIN,
-  conversationPriority:
-    selectedPolicy.value?.conversationPriority || EARLIEST_CREATED,
-  fairDistributionLimit: selectedPolicy.value?.fairDistributionLimit || 100,
-  fairDistributionWindow: selectedPolicy.value?.fairDistributionWindow || 3600,
-}));
-
-const handleDeleteInbox = async inboxId => {
-  try {
-    await store.dispatch('assignmentPolicies/removeInboxPolicy', {
-      policyId: selectedPolicy.value?.id,
-      inboxId,
-    });
-    useAlert(t(`${BASE_KEY}.EDIT.INBOX_API.REMOVE.SUCCESS_MESSAGE`));
-  } catch {
-    useAlert(t(`${BASE_KEY}.EDIT.INBOX_API.REMOVE.ERROR_MESSAGE`));
-  }
-};
-
-const handleBreadcrumbClick = ({ routeName, params }) => {
-  if (params) {
-    const accountId = route.params.accountId;
-    const inboxId = params.inboxId;
-    // Navigate using explicit path to ensure tab parameter is included
-    router.push(
-      `/app/accounts/${accountId}/settings/inboxes/${inboxId}/collaborators`
-    );
-  } else {
-    router.push({ name: routeName });
-  }
-};
-
-const handleNavigateToInbox = inbox => {
-  router.push({
-    name: 'settings_inbox_show',
-    params: {
-      accountId: route.params.accountId,
-      inboxId: inbox.id,
-    },
-  });
-};
-
-const setInboxPolicy = async (inboxId, policyId) => {
-  try {
-    await store.dispatch('assignmentPolicies/setInboxPolicy', {
-      inboxId,
-      policyId,
-    });
-    useAlert(t(`${BASE_KEY}.FORM.INBOXES.API.SUCCESS_MESSAGE`));
-    await store.dispatch(
-      'assignmentPolicies/getInboxes',
-      Number(routeId.value)
-    );
-    return true;
-  } catch (error) {
-    useAlert(t(`${BASE_KEY}.FORM.INBOXES.API.ERROR_MESSAGE`));
-    return false;
-  }
-};
-
-const handleAddInbox = async inbox => {
-  try {
-    const policy = await store.dispatch('assignmentPolicies/getInboxPolicy', {
-      inboxId: inbox?.id,
-    });
-
-    if (policy?.id !== selectedPolicy.value?.id) {
-      inboxLinkedPolicy.value = {
-        ...policy,
-        assignedInboxCount: policy.assignedInboxCount - 1,
-      };
-      confirmInboxDialogRef.value.openDialog(inbox);
-      return;
-    }
-  } catch (error) {
-    // If getInboxPolicy fails, continue to setInboxPolicy
-  }
-
-  await setInboxPolicy(inbox?.id, selectedPolicy.value?.id);
-};
-
-const handleLinkSuggestedInbox = async () => {
-  if (!suggestedInbox.value) return;
-
-  isLinkingInbox.value = true;
-  const inbox = {
-    id: suggestedInbox.value.id,
-    name: suggestedInbox.value.name,
-  };
-
-  await handleAddInbox(inbox);
-
-  // Clear the query param after linking
-  router.replace({
-    name: route.name,
-    params: route.params,
-    query: {},
-  });
-  isLinkingInbox.value = false;
-};
-
-const handleConfirmAddInbox = async inboxId => {
-  const success = await setInboxPolicy(inboxId, selectedPolicy.value?.id);
-
-  if (success) {
-    // Update the policy to reflect the assigned inbox count change
-    await store.dispatch('assignmentPolicies/updateInboxPolicy', {
-      policy: inboxLinkedPolicy.value,
-    });
-    // Fetch the updated inboxes for the policy after update, to reflect real-time changes
-    store.dispatch(
-      'assignmentPolicies/getInboxes',
-      inboxLinkedPolicy.value?.id
-    );
-    inboxLinkedPolicy.value = null;
-    confirmInboxDialogRef.value.closeDialog();
-  }
-};
-
-const handleSubmit = async formState => {
-  try {
-    await store.dispatch('assignmentPolicies/update', {
-      id: selectedPolicy.value?.id,
-      ...formState,
-    });
-    useAlert(t(`${BASE_KEY}.EDIT.API.SUCCESS_MESSAGE`));
-  } catch {
-    useAlert(t(`${BASE_KEY}.EDIT.API.ERROR_MESSAGE`));
-  }
-};
-
-const fetchPolicyData = async () => {
-  if (!routeId.value) return;
-
-  // Fetch inboxes if not already loaded (needed for inbox link prompt)
-  if (!inboxes.value?.length) {
-    store.dispatch('inboxes/get');
-  }
-
-  // Fetch policy if not available
-  if (!selectedPolicy.value?.id)
-    await store.dispatch('assignmentPolicies/show', routeId.value);
-
-  await store.dispatch('assignmentPolicies/getInboxes', Number(routeId.value));
-};
-
-watch(routeId, fetchPolicyData, { immediate: true });
-</script>
-
-<template>
-  <SettingsLayout
-    :is-loading="uiFlags.isFetchingItem"
-    class="w-full max-w-2xl ltr:mr-auto rtl:ml-auto"
-  >
-    <template #header>
-      <div class="flex items-center gap-2 w-full justify-between mb-4 min-h-10">
-        <Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
-      </div>
-    </template>
-
-    <template #body>
-      <AssignmentPolicyForm
-        :key="routeId"
-        mode="EDIT"
-        :initial-data="formData"
-        :policy-inboxes="policyInboxes"
-        :inbox-list="inboxList"
-        show-inbox-section
-        :is-loading="uiFlags.isUpdating"
-        :is-inbox-loading="inboxUiFlags.isFetching"
-        @submit="handleSubmit"
-        @add-inbox="handleAddInbox"
-        @delete-inbox="handleDeleteInbox"
-        @navigate-to-inbox="handleNavigateToInbox"
-      />
-    </template>
-
-    <ConfirmInboxDialog
-      ref="confirmInboxDialogRef"
-      @add="handleConfirmAddInbox"
-    />
-
-    <InboxLinkDialog
-      :inbox="suggestedInbox"
-      :is-linking="isLinkingInbox"
-      @link="handleLinkSuggestedInbox"
-      @dismiss="dismissInboxLinkPrompt"
-    />
-  </SettingsLayout>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentIndexPage.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentIndexPage.vue
deleted file mode 100644
index 69c6a7e..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentIndexPage.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<script setup>
-import { computed, onMounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useRouter } from 'vue-router';
-import { useAlert } from 'dashboard/composables';
-
-import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import SettingsLayout from 'dashboard/routes/dashboard/settings/SettingsLayout.vue';
-import AssignmentPolicyCard from 'dashboard/components-next/AssignmentPolicy/AssignmentPolicyCard/AssignmentPolicyCard.vue';
-import ConfirmDeletePolicyDialog from './components/ConfirmDeletePolicyDialog.vue';
-
-const store = useStore();
-const { t } = useI18n();
-const router = useRouter();
-
-const agentAssignmentsPolicies = useMapGetter(
-  'assignmentPolicies/getAssignmentPolicies'
-);
-const uiFlags = useMapGetter('assignmentPolicies/getUIFlags');
-const inboxUiFlags = useMapGetter('assignmentPolicies/getInboxUiFlags');
-
-const confirmDeletePolicyDialogRef = ref(null);
-
-const breadcrumbItems = computed(() => {
-  const items = [
-    {
-      label: t('ASSIGNMENT_POLICY.INDEX.HEADER.TITLE'),
-      routeName: 'assignment_policy_index',
-    },
-    {
-      label: t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.HEADER.TITLE'),
-    },
-  ];
-  return items;
-});
-
-const handleBreadcrumbClick = item => {
-  router.push({
-    name: item.routeName,
-  });
-};
-
-const onClickCreatePolicy = () => {
-  router.push({
-    name: 'agent_assignment_policy_create',
-  });
-};
-
-const onClickEditPolicy = id => {
-  router.push({
-    name: 'agent_assignment_policy_edit',
-    params: {
-      id,
-    },
-  });
-};
-
-const handleFetchInboxes = id => {
-  if (inboxUiFlags.value.isFetching) return;
-  store.dispatch('assignmentPolicies/getInboxes', id);
-};
-
-const handleDelete = id => {
-  confirmDeletePolicyDialogRef.value.openDialog(id);
-};
-
-const handleDeletePolicy = async policyId => {
-  try {
-    await store.dispatch('assignmentPolicies/delete', policyId);
-    useAlert(
-      t(
-        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.DELETE_POLICY.SUCCESS_MESSAGE'
-      )
-    );
-    confirmDeletePolicyDialogRef.value.closeDialog();
-  } catch (error) {
-    useAlert(
-      t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.DELETE_POLICY.ERROR_MESSAGE')
-    );
-  }
-};
-
-onMounted(() => {
-  store.dispatch('assignmentPolicies/get');
-});
-</script>
-
-<template>
-  <SettingsLayout
-    :is-loading="uiFlags.isFetching"
-    :no-records-found="agentAssignmentsPolicies.length === 0"
-    :no-records-message="
-      $t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.NO_RECORDS_FOUND')
-    "
-  >
-    <template #header>
-      <div class="flex items-center gap-2 w-full justify-between min-h-10">
-        <Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
-        <Button icon="i-lucide-plus" md @click="onClickCreatePolicy">
-          {{
-            $t(
-              'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.HEADER.CREATE_POLICY'
-            )
-          }}
-        </Button>
-      </div>
-    </template>
-    <template #body>
-      <div class="flex flex-col gap-4 pt-4">
-        <AssignmentPolicyCard
-          v-for="policy in agentAssignmentsPolicies"
-          :key="policy.id"
-          v-bind="policy"
-          :is-fetching-inboxes="inboxUiFlags.isFetching"
-          @fetch-inboxes="handleFetchInboxes"
-          @edit="onClickEditPolicy"
-          @delete="handleDelete"
-        />
-      </div>
-    </template>
-    <ConfirmDeletePolicyDialog
-      ref="confirmDeletePolicyDialogRef"
-      @delete="handleDeletePolicy"
-    />
-  </SettingsLayout>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityCreatePage.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityCreatePage.vue
deleted file mode 100644
index 421a788..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityCreatePage.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useRouter } from 'vue-router';
-import { useAlert } from 'dashboard/composables';
-
-import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
-import SettingsLayout from 'dashboard/routes/dashboard/settings/SettingsLayout.vue';
-import AgentCapacityPolicyForm from 'dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentCapacityPolicyForm.vue';
-
-const router = useRouter();
-const store = useStore();
-const { t } = useI18n();
-
-const formRef = ref(null);
-const uiFlags = useMapGetter('agentCapacityPolicies/getUIFlags');
-const labelsList = useMapGetter('labels/getLabels');
-
-const allLabels = computed(() =>
-  labelsList.value?.map(({ title, color, id }) => ({
-    id,
-    name: title,
-    color,
-  }))
-);
-
-const breadcrumbItems = computed(() => [
-  {
-    label: t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.INDEX.HEADER.TITLE'),
-    routeName: 'agent_capacity_policy_index',
-  },
-  {
-    label: t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.CREATE.HEADER.TITLE'),
-  },
-]);
-
-const handleBreadcrumbClick = item => {
-  router.push({
-    name: item.routeName,
-  });
-};
-
-const handleSubmit = async formState => {
-  try {
-    const policy = await store.dispatch(
-      'agentCapacityPolicies/create',
-      formState
-    );
-    useAlert(
-      t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.CREATE.API.SUCCESS_MESSAGE')
-    );
-    formRef.value?.resetForm();
-
-    router.push({
-      name: 'agent_capacity_policy_edit',
-      params: {
-        id: policy.id,
-      },
-    });
-  } catch (error) {
-    useAlert(
-      t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.CREATE.API.ERROR_MESSAGE')
-    );
-  }
-};
-</script>
-
-<template>
-  <SettingsLayout class="w-full max-w-2xl ltr:mr-auto rtl:ml-auto">
-    <template #header>
-      <div class="flex items-center gap-2 w-full justify-between mb-4 min-h-10">
-        <Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
-      </div>
-    </template>
-
-    <template #body>
-      <AgentCapacityPolicyForm
-        ref="formRef"
-        mode="CREATE"
-        :is-loading="uiFlags.isCreating"
-        :label-list="allLabels"
-        @submit="handleSubmit"
-      />
-    </template>
-  </SettingsLayout>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityEditPage.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityEditPage.vue
deleted file mode 100644
index 3906087..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityEditPage.vue
+++ /dev/null
@@ -1,220 +0,0 @@
-<script setup>
-import { computed, watch, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useRoute, useRouter } from 'vue-router';
-import { useAlert } from 'dashboard/composables';
-import camelcaseKeys from 'camelcase-keys';
-import { getInboxIconByType } from 'dashboard/helper/inbox';
-
-import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
-import SettingsLayout from 'dashboard/routes/dashboard/settings/SettingsLayout.vue';
-import AgentCapacityPolicyForm from 'dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentCapacityPolicyForm.vue';
-
-const BASE_KEY = 'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY';
-
-const { t } = useI18n();
-const route = useRoute();
-const router = useRouter();
-const store = useStore();
-
-const uiFlags = useMapGetter('agentCapacityPolicies/getUIFlags');
-const usersUiFlags = useMapGetter('agentCapacityPolicies/getUsersUIFlags');
-const selectedPolicyById = useMapGetter(
-  'agentCapacityPolicies/getAgentCapacityPolicyById'
-);
-const agentsList = useMapGetter('agents/getAgents');
-const labelsList = useMapGetter('labels/getLabels');
-const inboxes = useMapGetter('inboxes/getAllInboxes');
-const inboxesUiFlags = useMapGetter('inboxes/getUIFlags');
-
-const routeId = computed(() => route.params.id);
-const selectedPolicy = computed(() => selectedPolicyById.value(routeId.value));
-const selectedPolicyId = computed(() => selectedPolicy.value?.id);
-
-const breadcrumbItems = computed(() => [
-  {
-    label: t(`${BASE_KEY}.INDEX.HEADER.TITLE`),
-    routeName: 'agent_capacity_policy_index',
-  },
-  { label: t(`${BASE_KEY}.EDIT.HEADER.TITLE`) },
-]);
-
-const buildList = items =>
-  items?.map(({ name, title, id, email, avatarUrl, thumbnail, color }) => ({
-    name: name || title,
-    id,
-    email,
-    avatarUrl: avatarUrl || thumbnail,
-    color,
-  })) || [];
-
-const policyUsers = computed(() => buildList(selectedPolicy.value?.users));
-
-const allAgents = computed(() =>
-  buildList(camelcaseKeys(agentsList.value)).filter(
-    agent => !policyUsers.value?.some(user => user.id === agent.id)
-  )
-);
-
-const allLabels = computed(() => buildList(labelsList.value));
-
-const allInboxes = computed(
-  () =>
-    inboxes.value
-      ?.slice()
-      .sort((a, b) => a.name.localeCompare(b.name))
-      .map(({ name, id, email, phoneNumber, channelType, medium }) => ({
-        name,
-        id,
-        email,
-        phoneNumber,
-        icon: getInboxIconByType(channelType, medium, 'line'),
-      })) || []
-);
-
-const formData = computed(() => ({
-  name: selectedPolicy.value?.name || '',
-  description: selectedPolicy.value?.description || '',
-  exclusionRules: {
-    excludedLabels: [
-      ...(selectedPolicy.value?.exclusionRules?.excludedLabels || []),
-    ],
-    excludeOlderThanHours:
-      selectedPolicy.value?.exclusionRules?.excludeOlderThanHours || 10,
-  },
-  inboxCapacityLimits:
-    selectedPolicy.value?.inboxCapacityLimits?.map(limit => ({
-      ...limit,
-    })) || [],
-}));
-
-const handleBreadcrumbClick = ({ routeName }) =>
-  router.push({ name: routeName });
-
-const handleDeleteUser = async agentId => {
-  try {
-    await store.dispatch('agentCapacityPolicies/removeUser', {
-      policyId: selectedPolicyId.value,
-      userId: agentId,
-    });
-    useAlert(t(`${BASE_KEY}.EDIT.AGENT_API.REMOVE.SUCCESS_MESSAGE`));
-  } catch {
-    useAlert(t(`${BASE_KEY}.EDIT.AGENT_API.REMOVE.ERROR_MESSAGE`));
-  }
-};
-
-const handleAddUser = async agent => {
-  try {
-    await store.dispatch('agentCapacityPolicies/addUser', {
-      policyId: selectedPolicyId.value,
-      userData: { id: agent.id, capacity: 20 },
-    });
-    useAlert(t(`${BASE_KEY}.EDIT.AGENT_API.ADD.SUCCESS_MESSAGE`));
-  } catch {
-    useAlert(t(`${BASE_KEY}.EDIT.AGENT_API.ADD.ERROR_MESSAGE`));
-  }
-};
-
-const handleDeleteInboxLimit = async limitId => {
-  try {
-    await store.dispatch('agentCapacityPolicies/deleteInboxLimit', {
-      policyId: selectedPolicyId.value,
-      limitId,
-    });
-    useAlert(t(`${BASE_KEY}.EDIT.INBOX_LIMIT_API.DELETE.SUCCESS_MESSAGE`));
-  } catch {
-    useAlert(t(`${BASE_KEY}.EDIT.INBOX_LIMIT_API.DELETE.ERROR_MESSAGE`));
-  }
-};
-
-const handleAddInboxLimit = async limit => {
-  try {
-    await store.dispatch('agentCapacityPolicies/createInboxLimit', {
-      policyId: selectedPolicyId.value,
-      limitData: {
-        inboxId: limit.inboxId,
-        conversationLimit: limit.conversationLimit,
-      },
-    });
-    useAlert(t(`${BASE_KEY}.EDIT.INBOX_LIMIT_API.ADD.SUCCESS_MESSAGE`));
-  } catch {
-    useAlert(t(`${BASE_KEY}.EDIT.INBOX_LIMIT_API.ADD.ERROR_MESSAGE`));
-  }
-};
-
-const handleLimitChange = async limit => {
-  try {
-    await store.dispatch('agentCapacityPolicies/updateInboxLimit', {
-      policyId: selectedPolicyId.value,
-      limitId: limit.id,
-      limitData: { conversationLimit: limit.conversationLimit },
-    });
-    useAlert(t(`${BASE_KEY}.EDIT.INBOX_LIMIT_API.UPDATE.SUCCESS_MESSAGE`));
-  } catch {
-    useAlert(t(`${BASE_KEY}.EDIT.INBOX_LIMIT_API.UPDATE.ERROR_MESSAGE`));
-  }
-};
-
-const handleSubmit = async formState => {
-  try {
-    await store.dispatch('agentCapacityPolicies/update', {
-      id: selectedPolicyId.value,
-      ...formState,
-    });
-
-    useAlert(t(`${BASE_KEY}.EDIT.API.SUCCESS_MESSAGE`));
-  } catch {
-    useAlert(t(`${BASE_KEY}.EDIT.API.ERROR_MESSAGE`));
-  }
-};
-
-const fetchPolicyData = async () => {
-  if (!routeId.value) return;
-
-  // Fetch policy if not available
-  if (!selectedPolicyId.value)
-    await store.dispatch('agentCapacityPolicies/show', routeId.value);
-
-  await store.dispatch('agentCapacityPolicies/getUsers', Number(routeId.value));
-};
-
-watch(routeId, fetchPolicyData, { immediate: true });
-onMounted(() => store.dispatch('agents/get'));
-</script>
-
-<template>
-  <SettingsLayout
-    :is-loading="uiFlags.isFetchingItem"
-    class="w-full max-w-2xl ltr:mr-auto rtl:ml-auto"
-  >
-    <template #header>
-      <div class="flex items-center gap-2 w-full justify-between mb-4 min-h-10">
-        <Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
-      </div>
-    </template>
-
-    <template #body>
-      <AgentCapacityPolicyForm
-        :key="routeId"
-        mode="EDIT"
-        :initial-data="formData"
-        :policy-users="policyUsers"
-        :agent-list="allAgents"
-        :label-list="allLabels"
-        :inbox-list="allInboxes"
-        show-user-section
-        show-inbox-limit-section
-        :is-loading="uiFlags.isUpdating"
-        :is-users-loading="usersUiFlags.isFetching"
-        :is-inboxes-loading="inboxesUiFlags.isFetching"
-        @submit="handleSubmit"
-        @add-user="handleAddUser"
-        @delete-user="handleDeleteUser"
-        @add-inbox-limit="handleAddInboxLimit"
-        @update-inbox-limit="handleLimitChange"
-        @delete-inbox-limit="handleDeleteInboxLimit"
-      />
-    </template>
-  </SettingsLayout>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityIndexPage.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityIndexPage.vue
deleted file mode 100644
index 670ea76..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityIndexPage.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<script setup>
-import { computed, onMounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useRouter } from 'vue-router';
-import { useAlert } from 'dashboard/composables';
-
-import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import SettingsLayout from 'dashboard/routes/dashboard/settings/SettingsLayout.vue';
-import AgentCapacityPolicyCard from 'dashboard/components-next/AssignmentPolicy/AgentCapacityPolicyCard/AgentCapacityPolicyCard.vue';
-import ConfirmDeletePolicyDialog from './components/ConfirmDeletePolicyDialog.vue';
-
-const store = useStore();
-const { t } = useI18n();
-const router = useRouter();
-
-const agentCapacityPolicies = useMapGetter(
-  'agentCapacityPolicies/getAgentCapacityPolicies'
-);
-const uiFlags = useMapGetter('agentCapacityPolicies/getUIFlags');
-const usersUiFlags = useMapGetter('agentCapacityPolicies/getUsersUIFlags');
-
-const confirmDeletePolicyDialogRef = ref(null);
-
-const breadcrumbItems = computed(() => {
-  const items = [
-    {
-      label: t('ASSIGNMENT_POLICY.INDEX.HEADER.TITLE'),
-      routeName: 'assignment_policy_index',
-    },
-    {
-      label: t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.INDEX.HEADER.TITLE'),
-    },
-  ];
-  return items;
-});
-
-const handleBreadcrumbClick = item => {
-  router.push({
-    name: item.routeName,
-  });
-};
-
-const onClickCreatePolicy = () => {
-  router.push({
-    name: 'agent_capacity_policy_create',
-  });
-};
-
-const onClickEditPolicy = id => {
-  router.push({
-    name: 'agent_capacity_policy_edit',
-    params: {
-      id,
-    },
-  });
-};
-
-const handleFetchUsers = id => {
-  if (usersUiFlags.value.isFetching) return;
-  store.dispatch('agentCapacityPolicies/getUsers', id);
-};
-
-const handleDelete = id => {
-  confirmDeletePolicyDialogRef.value.openDialog(id);
-};
-
-const handleDeletePolicy = async policyId => {
-  try {
-    await store.dispatch('agentCapacityPolicies/delete', policyId);
-    useAlert(
-      t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.DELETE_POLICY.SUCCESS_MESSAGE')
-    );
-    confirmDeletePolicyDialogRef.value.closeDialog();
-  } catch (error) {
-    useAlert(
-      t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.DELETE_POLICY.ERROR_MESSAGE')
-    );
-  }
-};
-
-onMounted(() => {
-  store.dispatch('agentCapacityPolicies/get');
-});
-</script>
-
-<template>
-  <SettingsLayout
-    :is-loading="uiFlags.isFetching"
-    :no-records-found="agentCapacityPolicies.length === 0"
-    :no-records-message="
-      $t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.INDEX.NO_RECORDS_FOUND')
-    "
-  >
-    <template #header>
-      <div class="flex items-center gap-2 w-full justify-between min-h-10">
-        <Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
-        <Button icon="i-lucide-plus" md @click="onClickCreatePolicy">
-          {{
-            $t(
-              'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.INDEX.HEADER.CREATE_POLICY'
-            )
-          }}
-        </Button>
-      </div>
-    </template>
-    <template #body>
-      <div class="flex flex-col gap-4 pt-4">
-        <AgentCapacityPolicyCard
-          v-for="policy in agentCapacityPolicies"
-          :key="policy.id"
-          v-bind="policy"
-          :is-fetching-users="usersUiFlags.isFetching"
-          @fetch-users="handleFetchUsers"
-          @edit="onClickEditPolicy"
-          @delete="handleDelete"
-        />
-      </div>
-    </template>
-    <ConfirmDeletePolicyDialog
-      ref="confirmDeletePolicyDialogRef"
-      @delete="handleDeletePolicy"
-    />
-  </SettingsLayout>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentAssignmentPolicyForm.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentAssignmentPolicyForm.vue
deleted file mode 100644
index 566b579..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentAssignmentPolicyForm.vue
+++ /dev/null
@@ -1,290 +0,0 @@
-<script setup>
-import { computed, reactive, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import { useMapGetter } from 'dashboard/composables/store';
-import BaseInfo from 'dashboard/components-next/AssignmentPolicy/components/BaseInfo.vue';
-import RadioCard from 'dashboard/components-next/AssignmentPolicy/components/RadioCard.vue';
-import FairDistribution from 'dashboard/components-next/AssignmentPolicy/components/FairDistribution.vue';
-import DataTable from 'dashboard/components-next/AssignmentPolicy/components/DataTable.vue';
-import AddDataDropdown from 'dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue';
-import WithLabel from 'v3/components/Form/WithLabel.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import {
-  OPTIONS,
-  ROUND_ROBIN,
-  EARLIEST_CREATED,
-  DEFAULT_FAIR_DISTRIBUTION_LIMIT,
-  DEFAULT_FAIR_DISTRIBUTION_WINDOW,
-} from 'dashboard/routes/dashboard/settings/assignmentPolicy/constants';
-
-const props = defineProps({
-  initialData: {
-    type: Object,
-    default: () => ({
-      name: '',
-      description: '',
-      assignmentOrder: ROUND_ROBIN,
-      conversationPriority: EARLIEST_CREATED,
-      fairDistributionLimit: DEFAULT_FAIR_DISTRIBUTION_LIMIT,
-      fairDistributionWindow: DEFAULT_FAIR_DISTRIBUTION_WINDOW,
-    }),
-  },
-  mode: {
-    type: String,
-    required: true,
-    validator: value => ['CREATE', 'EDIT'].includes(value),
-  },
-  policyInboxes: {
-    type: Array,
-    default: () => [],
-  },
-  inboxList: {
-    type: Array,
-    default: () => [],
-  },
-  showInboxSection: {
-    type: Boolean,
-    default: false,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-  isInboxLoading: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits([
-  'submit',
-  'addInbox',
-  'deleteInbox',
-  'navigateToInbox',
-  'validationChange',
-]);
-
-const { t } = useI18n();
-const route = useRoute();
-
-const accountId = computed(() => Number(route.params.accountId));
-const isFeatureEnabledonAccount = useMapGetter(
-  'accounts/isFeatureEnabledonAccount'
-);
-
-const BASE_KEY = 'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY';
-
-const state = reactive({
-  name: '',
-  description: '',
-  enabled: true,
-  assignmentOrder: ROUND_ROBIN,
-  conversationPriority: EARLIEST_CREATED,
-  fairDistributionLimit: DEFAULT_FAIR_DISTRIBUTION_LIMIT,
-  fairDistributionWindow: DEFAULT_FAIR_DISTRIBUTION_WINDOW,
-});
-
-const validationState = ref({
-  isValid: false,
-});
-
-const createOption = (
-  type,
-  key,
-  stateKey,
-  disabled = false,
-  disabledMessage = '',
-  disabledLabel = ''
-) => ({
-  key,
-  label: t(`${BASE_KEY}.FORM.${type}.${key.toUpperCase()}.LABEL`),
-  description: t(`${BASE_KEY}.FORM.${type}.${key.toUpperCase()}.DESCRIPTION`),
-  isActive: state[stateKey] === key,
-  disabled,
-  disabledMessage,
-  disabledLabel,
-});
-
-const assignmentOrderOptions = computed(() => {
-  const hasAdvancedAssignment = isFeatureEnabledonAccount.value(
-    accountId.value,
-    'advanced_assignment'
-  );
-
-  return OPTIONS.ORDER.map(key => {
-    const isBalanced = key === 'balanced';
-    const disabled = isBalanced && !hasAdvancedAssignment;
-    const disabledMessage = disabled
-      ? t(`${BASE_KEY}.FORM.ASSIGNMENT_ORDER.BALANCED.PREMIUM_MESSAGE`)
-      : '';
-    const disabledLabel = disabled
-      ? t(`${BASE_KEY}.FORM.ASSIGNMENT_ORDER.BALANCED.PREMIUM_BADGE`)
-      : '';
-
-    return createOption(
-      'ASSIGNMENT_ORDER',
-      key,
-      'assignmentOrder',
-      disabled,
-      disabledMessage,
-      disabledLabel
-    );
-  });
-});
-
-const assignmentPriorityOptions = computed(() =>
-  OPTIONS.PRIORITY.map(key =>
-    createOption('ASSIGNMENT_PRIORITY', key, 'conversationPriority')
-  )
-);
-
-const radioSections = computed(() => [
-  {
-    key: 'assignmentOrder',
-    label: t(`${BASE_KEY}.FORM.ASSIGNMENT_ORDER.LABEL`),
-    options: assignmentOrderOptions.value,
-  },
-  {
-    key: 'conversationPriority',
-    label: t(`${BASE_KEY}.FORM.ASSIGNMENT_PRIORITY.LABEL`),
-    options: assignmentPriorityOptions.value,
-  },
-]);
-
-const buttonLabel = computed(() =>
-  t(`${BASE_KEY}.${props.mode.toUpperCase()}.${props.mode}_BUTTON`)
-);
-
-const handleValidationChange = validation => {
-  validationState.value = validation;
-  emit('validationChange', validation);
-};
-
-const resetForm = () => {
-  Object.assign(state, {
-    name: '',
-    description: '',
-    enabled: true,
-    assignmentOrder: ROUND_ROBIN,
-    conversationPriority: EARLIEST_CREATED,
-    fairDistributionLimit: DEFAULT_FAIR_DISTRIBUTION_LIMIT,
-    fairDistributionWindow: DEFAULT_FAIR_DISTRIBUTION_WINDOW,
-  });
-};
-
-const handleSubmit = () => {
-  emit('submit', { ...state });
-};
-
-watch(
-  () => props.initialData,
-  newData => {
-    Object.assign(state, newData);
-  },
-  { immediate: true, deep: true }
-);
-
-defineExpose({
-  resetForm,
-});
-</script>
-
-<template>
-  <form @submit.prevent="handleSubmit">
-    <div class="flex flex-col gap-4 divide-y divide-n-weak mb-4">
-      <BaseInfo
-        v-model:policy-name="state.name"
-        v-model:description="state.description"
-        :name-label="t(`${BASE_KEY}.FORM.NAME.LABEL`)"
-        :name-placeholder="t(`${BASE_KEY}.FORM.NAME.PLACEHOLDER`)"
-        :description-label="t(`${BASE_KEY}.FORM.DESCRIPTION.LABEL`)"
-        :description-placeholder="t(`${BASE_KEY}.FORM.DESCRIPTION.PLACEHOLDER`)"
-        @validation-change="handleValidationChange"
-      />
-
-      <div class="flex flex-col items-center">
-        <div
-          v-for="section in radioSections"
-          :key="section.key"
-          class="py-4 flex flex-col items-start gap-3 w-full"
-        >
-          <WithLabel
-            :label="section.label"
-            name="assignmentPolicy"
-            class="w-full flex items-start flex-col gap-3"
-          >
-            <div class="grid grid-cols-1 xs:grid-cols-2 gap-4 w-full">
-              <RadioCard
-                v-for="option in section.options"
-                :id="option.key"
-                :key="option.key"
-                :label="option.label"
-                :description="option.description"
-                :is-active="option.isActive"
-                :disabled="option.disabled"
-                :disabled-label="option.disabledLabel"
-                :disabled-message="option.disabledMessage"
-                @select="state[section.key] = $event"
-              />
-            </div>
-          </WithLabel>
-        </div>
-      </div>
-
-      <div class="pt-4 pb-2 flex-col flex gap-4">
-        <div class="flex flex-col items-start gap-1 py-1">
-          <label class="text-sm font-medium text-n-slate-12 py-1">
-            {{ t(`${BASE_KEY}.FORM.FAIR_DISTRIBUTION.LABEL`) }}
-          </label>
-          <p class="mb-0 text-n-slate-11 text-sm">
-            {{ t(`${BASE_KEY}.FORM.FAIR_DISTRIBUTION.DESCRIPTION`) }}
-          </p>
-        </div>
-        <FairDistribution
-          v-model:fair-distribution-limit="state.fairDistributionLimit"
-          v-model:fair-distribution-window="state.fairDistributionWindow"
-          v-model:window-unit="state.windowUnit"
-        />
-      </div>
-    </div>
-
-    <Button
-      type="submit"
-      :label="buttonLabel"
-      :disabled="!validationState.isValid || isLoading"
-      :is-loading="isLoading"
-    />
-
-    <div
-      v-if="showInboxSection"
-      class="py-4 flex-col flex gap-4 border-t border-n-weak mt-6"
-    >
-      <div class="flex items-end gap-4 w-full justify-between">
-        <div class="flex flex-col items-start gap-1 py-1">
-          <label class="text-sm font-medium text-n-slate-12 py-1">
-            {{ t(`${BASE_KEY}.FORM.INBOXES.LABEL`) }}
-          </label>
-          <p class="mb-0 text-n-slate-11 text-sm">
-            {{ t(`${BASE_KEY}.FORM.INBOXES.DESCRIPTION`) }}
-          </p>
-        </div>
-        <AddDataDropdown
-          :label="t(`${BASE_KEY}.FORM.INBOXES.ADD_BUTTON`)"
-          :search-placeholder="
-            t(`${BASE_KEY}.FORM.INBOXES.DROPDOWN.SEARCH_PLACEHOLDER`)
-          "
-          :items="inboxList"
-          @add="$emit('addInbox', $event)"
-        />
-      </div>
-      <DataTable
-        :items="policyInboxes"
-        :is-fetching="isInboxLoading"
-        :empty-state-message="t(`${BASE_KEY}.FORM.INBOXES.EMPTY_STATE`)"
-        @delete="$emit('deleteInbox', $event)"
-        @navigate="$emit('navigateToInbox', $event)"
-      />
-    </div>
-  </form>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentCapacityPolicyForm.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentCapacityPolicyForm.vue
deleted file mode 100644
index 24c4f0a..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentCapacityPolicyForm.vue
+++ /dev/null
@@ -1,214 +0,0 @@
-<script setup>
-import { computed, reactive, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import BaseInfo from 'dashboard/components-next/AssignmentPolicy/components/BaseInfo.vue';
-import DataTable from 'dashboard/components-next/AssignmentPolicy/components/DataTable.vue';
-import AddDataDropdown from 'dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import ExclusionRules from 'dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue';
-import InboxCapacityLimits from 'dashboard/components-next/AssignmentPolicy/components/InboxCapacityLimits.vue';
-
-const props = defineProps({
-  initialData: {
-    type: Object,
-    default: () => ({
-      name: '',
-      description: '',
-      enabled: false,
-      exclusionRules: {
-        excludedLabels: [],
-        excludeOlderThanHours: 10,
-      },
-      inboxCapacityLimits: [],
-    }),
-  },
-  mode: {
-    type: String,
-    required: true,
-    validator: value => ['CREATE', 'EDIT'].includes(value),
-  },
-  policyUsers: {
-    type: Array,
-    default: () => [],
-  },
-  agentList: {
-    type: Array,
-    default: () => [],
-  },
-  labelList: {
-    type: Array,
-    default: () => [],
-  },
-  inboxList: {
-    type: Array,
-    default: () => [],
-  },
-  showUserSection: {
-    type: Boolean,
-    default: false,
-  },
-  showInboxLimitSection: {
-    type: Boolean,
-    default: false,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-  isUsersLoading: {
-    type: Boolean,
-    default: false,
-  },
-  isInboxesLoading: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits([
-  'submit',
-  'addUser',
-  'deleteUser',
-  'validationChange',
-  'deleteInboxLimit',
-  'addInboxLimit',
-  'updateInboxLimit',
-]);
-
-const { t } = useI18n();
-
-const BASE_KEY = 'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY';
-
-const state = reactive({
-  name: '',
-  description: '',
-  exclusionRules: {
-    excludedLabels: [],
-    excludeOlderThanHours: 10,
-  },
-  inboxCapacityLimits: [],
-});
-
-const validationState = ref({
-  isValid: false,
-});
-
-const buttonLabel = computed(() =>
-  t(`${BASE_KEY}.${props.mode.toUpperCase()}.${props.mode}_BUTTON`)
-);
-
-const handleValidationChange = validation => {
-  validationState.value = validation;
-  emit('validationChange', validation);
-};
-
-const handleDeleteInboxLimit = id => {
-  emit('deleteInboxLimit', id);
-};
-
-const handleAddInboxLimit = limit => {
-  emit('addInboxLimit', limit);
-};
-
-const handleLimitChange = limit => {
-  emit('updateInboxLimit', limit);
-};
-
-const resetForm = () => {
-  Object.assign(state, {
-    name: '',
-    description: '',
-    exclusionRules: {
-      excludedLabels: [],
-      excludeOlderThanHours: 10,
-    },
-    inboxCapacityLimits: [],
-  });
-};
-
-const handleSubmit = () => {
-  emit('submit', { ...state });
-};
-
-watch(
-  () => props.initialData,
-  newData => {
-    Object.assign(state, newData);
-  },
-  { immediate: true, deep: true }
-);
-
-defineExpose({
-  resetForm,
-});
-</script>
-
-<template>
-  <form @submit.prevent="handleSubmit">
-    <div class="flex flex-col gap-4 mb-2 divide-y divide-n-weak">
-      <BaseInfo
-        v-model:policy-name="state.name"
-        v-model:description="state.description"
-        :name-label="t(`${BASE_KEY}.FORM.NAME.LABEL`)"
-        :name-placeholder="t(`${BASE_KEY}.FORM.NAME.PLACEHOLDER`)"
-        :description-label="t(`${BASE_KEY}.FORM.DESCRIPTION.LABEL`)"
-        :description-placeholder="t(`${BASE_KEY}.FORM.DESCRIPTION.PLACEHOLDER`)"
-        @validation-change="handleValidationChange"
-      />
-      <ExclusionRules
-        v-model:excluded-labels="state.exclusionRules.excludedLabels"
-        v-model:exclude-older-than-minutes="
-          state.exclusionRules.excludeOlderThanHours
-        "
-        :tags-list="labelList"
-      />
-    </div>
-    <Button
-      type="submit"
-      :label="buttonLabel"
-      :disabled="!validationState.isValid || isLoading"
-      :is-loading="isLoading"
-    />
-
-    <div
-      v-if="showInboxLimitSection || showUserSection"
-      class="flex flex-col gap-4 divide-y divide-n-weak border-t border-n-weak mt-6"
-    >
-      <InboxCapacityLimits
-        v-if="showInboxLimitSection"
-        v-model:inbox-capacity-limits="state.inboxCapacityLimits"
-        :inbox-list="inboxList"
-        :is-fetching="isInboxesLoading"
-        @delete="handleDeleteInboxLimit"
-        @add="handleAddInboxLimit"
-        @update="handleLimitChange"
-      />
-      <div v-if="showUserSection" class="py-4 flex-col flex gap-4">
-        <div class="flex items-end gap-4 w-full justify-between">
-          <div class="flex flex-col items-start gap-1 py-1">
-            <label class="text-sm font-medium text-n-slate-12 py-1">
-              {{ t(`${BASE_KEY}.FORM.USERS.LABEL`) }}
-            </label>
-            <p class="mb-0 text-n-slate-11 text-sm">
-              {{ t(`${BASE_KEY}.FORM.USERS.DESCRIPTION`) }}
-            </p>
-          </div>
-          <AddDataDropdown
-            :label="t(`${BASE_KEY}.FORM.USERS.ADD_BUTTON`)"
-            :search-placeholder="
-              t(`${BASE_KEY}.FORM.USERS.DROPDOWN.SEARCH_PLACEHOLDER`)
-            "
-            :items="agentList"
-            @add="$emit('addUser', $event)"
-          />
-        </div>
-        <DataTable
-          :items="policyUsers"
-          :is-fetching="isUsersLoading"
-          :empty-state-message="t(`${BASE_KEY}.FORM.USERS.EMPTY_STATE`)"
-          @delete="$emit('deleteUser', $event)"
-        />
-      </div>
-    </div>
-  </form>
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/ConfirmDeletePolicyDialog.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/ConfirmDeletePolicyDialog.vue
deleted file mode 100644
index 2dd57f7..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/ConfirmDeletePolicyDialog.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-
-const emit = defineEmits(['delete']);
-
-const { t } = useI18n();
-
-const dialogRef = ref(null);
-const currentPolicyId = ref(null);
-
-const openDialog = policyId => {
-  currentPolicyId.value = policyId;
-  dialogRef.value.open();
-};
-
-const closeDialog = () => {
-  dialogRef.value.close();
-};
-
-const handleDialogConfirm = () => {
-  emit('delete', currentPolicyId.value);
-};
-
-defineExpose({ openDialog, closeDialog });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="alert"
-    :title="t('ASSIGNMENT_POLICY.DELETE_POLICY.TITLE')"
-    :description="t('ASSIGNMENT_POLICY.DELETE_POLICY.DESCRIPTION')"
-    :confirm-button-label="
-      t('ASSIGNMENT_POLICY.DELETE_POLICY.CONFIRM_BUTTON_LABEL')
-    "
-    :cancel-button-label="
-      t('ASSIGNMENT_POLICY.DELETE_POLICY.CANCEL_BUTTON_LABEL')
-    "
-    @confirm="handleDialogConfirm"
-  />
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/ConfirmInboxDialog.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/ConfirmInboxDialog.vue
deleted file mode 100644
index af49a29..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/ConfirmInboxDialog.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-
-const emit = defineEmits(['add']);
-
-const { t } = useI18n();
-
-const dialogRef = ref(null);
-const currentInbox = ref(null);
-
-const openDialog = inbox => {
-  currentInbox.value = inbox;
-  dialogRef.value.open();
-};
-
-const closeDialog = () => {
-  dialogRef.value.close();
-};
-
-const handleDialogConfirm = () => {
-  emit('add', currentInbox.value.id);
-};
-
-defineExpose({ openDialog, closeDialog });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="alert"
-    :title="
-      t(
-        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.EDIT.CONFIRM_ADD_INBOX_DIALOG.TITLE'
-      )
-    "
-    :description="
-      t(
-        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.EDIT.CONFIRM_ADD_INBOX_DIALOG.DESCRIPTION',
-        {
-          inboxName: currentInbox?.name,
-        }
-      )
-    "
-    :confirm-button-label="
-      t(
-        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.EDIT.CONFIRM_ADD_INBOX_DIALOG.CONFIRM_BUTTON_LABEL'
-      )
-    "
-    :cancel-button-label="
-      t(
-        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.EDIT.CONFIRM_ADD_INBOX_DIALOG.CANCEL_BUTTON_LABEL'
-      )
-    "
-    @confirm="handleDialogConfirm"
-  />
-</template>
diff --git a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/InboxLinkDialog.vue b/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/InboxLinkDialog.vue
deleted file mode 100644
index 69ea620..0000000
--- a/research/chatwoot/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/InboxLinkDialog.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<script setup>
-import { ref, computed, watch, nextTick } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { getInboxIconByType } from 'dashboard/helper/inbox';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-
-const props = defineProps({
-  inbox: {
-    type: Object,
-    default: null,
-  },
-  isLinking: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['link', 'dismiss']);
-
-const { t } = useI18n();
-
-const dialogRef = ref(null);
-
-const inboxName = computed(() => props.inbox?.name || '');
-
-const inboxIcon = computed(() => {
-  if (!props.inbox) return 'i-lucide-inbox';
-  return getInboxIconByType(
-    props.inbox.channelType,
-    props.inbox.medium,
-    'line'
-  );
-});
-
-const openDialog = () => {
-  dialogRef.value?.open();
-};
-
-const closeDialog = () => {
-  dialogRef.value?.close();
-};
-
-const handleConfirm = () => {
-  emit('link');
-};
-
-const handleClose = () => {
-  emit('dismiss');
-};
-
-watch(
-  () => props.inbox,
-  async newInbox => {
-    if (newInbox) {
-      await nextTick();
-      openDialog();
-    } else {
-      closeDialog();
-    }
-  },
-  { immediate: true }
-);
-
-defineExpose({ openDialog, closeDialog });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="edit"
-    :title="
-      t(
-        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.EDIT.INBOX_LINK_PROMPT.TITLE'
-      )
-    "
-    :confirm-button-label="
-      t(
-        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.EDIT.INBOX_LINK_PROMPT.LINK_BUTTON'
-      )
-    "
-    :cancel-button-label="
-      t(
-        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.EDIT.INBOX_LINK_PROMPT.CANCEL_BUTTON'
-      )
-    "
-    :is-loading="isLinking"
-    @confirm="handleConfirm"
-    @close="handleClose"
-  >
-    <template #description>
-      <p class="text-sm text-n-slate-11">
-        {{
-          t(
-            'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.EDIT.INBOX_LINK_PROMPT.DESCRIPTION'
-          )
-        }}
-      </p>
-    </template>
-
-    <div
-      class="flex items-center gap-3 p-3 rounded-xl border border-n-weak bg-n-alpha-1"
-    >
-      <div
-        class="flex-shrink-0 size-10 rounded-lg bg-n-alpha-2 flex items-center justify-center"
-      >
-        <i :class="inboxIcon" class="text-lg text-n-slate-11" />
-      </div>
-      <div class="flex flex-col min-w-0">
-        <span class="text-sm font-medium text-n-slate-12 truncate">
-          {{ inboxName }}
-        </span>
-      </div>
-    </div>
-  </Dialog>
-</template>
diff --git a/research/chatwoot/docker/Dockerfile b/research/chatwoot/docker/Dockerfile
deleted file mode 100644
index 645a61a..0000000
--- a/research/chatwoot/docker/Dockerfile
+++ /dev/null
@@ -1,152 +0,0 @@
-# pre-build stage
-FROM node:24-alpine as node
-FROM ruby:3.4.4-alpine3.21 AS pre-builder
-
-ARG NODE_VERSION="24.13.0"
-ARG PNPM_VERSION="10.2.0"
-ENV NODE_VERSION=${NODE_VERSION}
-ENV PNPM_VERSION=${PNPM_VERSION}
-
-# ARG default to production settings
-# For development docker-compose file overrides ARGS
-ARG BUNDLE_WITHOUT="development:test"
-ENV BUNDLE_WITHOUT ${BUNDLE_WITHOUT}
-ENV BUNDLER_VERSION=2.5.16
-
-ARG RAILS_SERVE_STATIC_FILES=true
-ENV RAILS_SERVE_STATIC_FILES ${RAILS_SERVE_STATIC_FILES}
-
-ARG RAILS_ENV=production
-ENV RAILS_ENV ${RAILS_ENV}
-
-ARG NODE_OPTIONS="--max-old-space-size=4096 --openssl-legacy-provider"
-ENV NODE_OPTIONS ${NODE_OPTIONS}
-
-ENV BUNDLE_PATH="/gems"
-
-RUN apk update && apk add --no-cache \
-  openssl \
-  tar \
-  build-base \
-  tzdata \
-  postgresql-dev \
-  postgresql-client \
-  git \
-  curl \
-  xz \
-  && mkdir -p /var/app \
-  && gem install bundler -v "$BUNDLER_VERSION"
-
-COPY --from=node /usr/local/bin/node /usr/local/bin/
-COPY --from=node /usr/local/lib/node_modules /usr/local/lib/node_modules
-RUN ln -s /usr/local/lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npm \
-  && ln -s /usr/local/lib/node_modules/npm/bin/npx-cli.js /usr/local/bin/npx
-
-RUN npm install -g pnpm@${PNPM_VERSION}
-
-RUN echo 'export PNPM_HOME="/root/.local/share/pnpm"' >> /root/.shrc \
-  && echo 'export PATH="$PNPM_HOME:$PATH"' >> /root/.shrc \
-  && export PNPM_HOME="/root/.local/share/pnpm" \
-  && export PATH="$PNPM_HOME:$PATH" \
-  && pnpm --version
-
-# Persist the environment variables in Docker
-ENV PNPM_HOME="/root/.local/share/pnpm"
-ENV PATH="$PNPM_HOME:$PATH"
-
-WORKDIR /app
-
-COPY Gemfile Gemfile.lock ./
-
-# natively compile grpc and protobuf to support alpine musl (dialogflow-docker workflow)
-# https://github.com/googleapis/google-cloud-ruby/issues/13306
-# adding xz as nokogiri was failing to build libxml
-# https://github.com/chatwoot/chatwoot/issues/4045
-RUN apk update && apk add --no-cache build-base musl ruby-full ruby-dev gcc make musl-dev openssl openssl-dev g++ linux-headers xz vips
-RUN bundle config set --local force_ruby_platform true
-
-# Do not install development or test gems in production
-RUN if [ "$RAILS_ENV" = "production" ]; then \
-  bundle config set without 'development test'; bundle install -j 4 -r 3; \
-  else bundle install -j 4 -r 3; \
-  fi
-
-COPY package.json pnpm-lock.yaml ./
-RUN pnpm i
-
-COPY . /app
-
-# creating a log directory so that image wont fail when RAILS_LOG_TO_STDOUT is false
-# https://github.com/chatwoot/chatwoot/issues/701
-RUN mkdir -p /app/log
-
-# generate production assets if production environment
-RUN if [ "$RAILS_ENV" = "production" ]; then \
-  SECRET_KEY_BASE=precompile_placeholder RAILS_LOG_TO_STDOUT=enabled bundle exec rake assets:precompile \
-  && rm -rf spec node_modules tmp/cache; \
-  fi
-
-# Generate .git_sha file with current commit hash
-RUN git rev-parse HEAD > /app/.git_sha
-
-# Remove unnecessary files
-RUN rm -rf /gems/ruby/3.4.0/cache/*.gem \
-  && find /gems/ruby/3.4.0/gems/ \( -name "*.c" -o -name "*.o" \) -delete \
-  && rm -rf .git \
-  && rm .gitignore
-
-# final build stage
-FROM ruby:3.4.4-alpine3.21
-
-ARG NODE_VERSION="24.13.0"
-ARG PNPM_VERSION="10.2.0"
-ENV NODE_VERSION=${NODE_VERSION}
-ENV PNPM_VERSION=${PNPM_VERSION}
-
-ARG BUNDLE_WITHOUT="development:test"
-ENV BUNDLE_WITHOUT ${BUNDLE_WITHOUT}
-ENV BUNDLER_VERSION=2.5.16
-
-ARG EXECJS_RUNTIME="Disabled"
-ENV EXECJS_RUNTIME ${EXECJS_RUNTIME}
-
-ARG RAILS_SERVE_STATIC_FILES=true
-ENV RAILS_SERVE_STATIC_FILES ${RAILS_SERVE_STATIC_FILES}
-
-ARG BUNDLE_FORCE_RUBY_PLATFORM=1
-ENV BUNDLE_FORCE_RUBY_PLATFORM ${BUNDLE_FORCE_RUBY_PLATFORM}
-
-ARG RAILS_ENV=production
-ENV RAILS_ENV ${RAILS_ENV}
-ENV BUNDLE_PATH="/gems"
-
-RUN apk update && apk add --no-cache \
-  build-base \
-  openssl \
-  tzdata \
-  postgresql-client \
-  imagemagick \
-  git \
-  vips \
-  && gem install bundler -v "$BUNDLER_VERSION"
-
-COPY --from=node /usr/local/bin/node /usr/local/bin/
-COPY --from=node /usr/local/lib/node_modules /usr/local/lib/node_modules
-
-RUN if [ "$RAILS_ENV" != "production" ]; then \
-  apk add --no-cache curl \
-  && ln -s /usr/local/lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npm \
-  && ln -s /usr/local/lib/node_modules/npm/bin/npx-cli.js /usr/local/bin/npx \
-  && npm install -g pnpm@${PNPM_VERSION} \
-  && pnpm --version; \
-  fi
-
-COPY --from=pre-builder /gems/ /gems/
-COPY --from=pre-builder /app /app
-
-# Copy .git_sha file from pre-builder stage
-COPY --from=pre-builder /app/.git_sha /app/.git_sha
-
-WORKDIR /app
-
-EXPOSE 3000
diff --git a/research/chatwoot/docker/dockerfiles/rails.Dockerfile b/research/chatwoot/docker/dockerfiles/rails.Dockerfile
deleted file mode 100644
index 8617ba8..0000000
--- a/research/chatwoot/docker/dockerfiles/rails.Dockerfile
+++ /dev/null
@@ -1,9 +0,0 @@
-FROM chatwoot:development
-
-ENV PNPM_HOME="/root/.local/share/pnpm"
-ENV PATH="$PNPM_HOME:$PATH"
-
-RUN chmod +x docker/entrypoints/rails.sh
-
-EXPOSE 3000
-CMD ["rails", "server", "-b", "0.0.0.0", "-p", "3000"]
\ No newline at end of file
diff --git a/research/chatwoot/docker/dockerfiles/vite.Dockerfile b/research/chatwoot/docker/dockerfiles/vite.Dockerfile
deleted file mode 100644
index f3da365..0000000
--- a/research/chatwoot/docker/dockerfiles/vite.Dockerfile
+++ /dev/null
@@ -1,9 +0,0 @@
-FROM chatwoot:development
-
-ENV PNPM_HOME="/root/.local/share/pnpm"
-ENV PATH="$PNPM_HOME:$PATH"
-
-RUN chmod +x docker/entrypoints/vite.sh
-
-EXPOSE 3036
-CMD ["bin/vite", "dev"]
diff --git a/research/chatwoot/docker/entrypoints/helpers/pg_database_url.rb b/research/chatwoot/docker/entrypoints/helpers/pg_database_url.rb
deleted file mode 100755
index 2aec699..0000000
--- a/research/chatwoot/docker/entrypoints/helpers/pg_database_url.rb
+++ /dev/null
@@ -1,10 +0,0 @@
-#!/usr/bin/env ruby
-require 'uri'
-
-# Let DATABASE_URL env take presedence over individual connection params.
-if !ENV['DATABASE_URL'].nil? && ENV['DATABASE_URL'] != ''
-  uri = URI(ENV.fetch('DATABASE_URL', nil))
-  puts "export POSTGRES_HOST=#{uri.host} POSTGRES_PORT=#{uri.port} POSTGRES_USERNAME=#{uri.user}"
-elsif ENV['POSTGRES_PORT'].nil? || ENV['POSTGRES_PORT'] == ''
-  puts 'export POSTGRES_PORT=5432'
-end
diff --git a/research/chatwoot/docker/entrypoints/rails.sh b/research/chatwoot/docker/entrypoints/rails.sh
deleted file mode 100755
index 77657f6..0000000
--- a/research/chatwoot/docker/entrypoints/rails.sh
+++ /dev/null
@@ -1,34 +0,0 @@
-#!/bin/sh
-
-set -x
-
-# Remove a potentially pre-existing server.pid for Rails.
-rm -rf /app/tmp/pids/server.pid
-rm -rf /app/tmp/cache/*
-
-echo "Waiting for postgres to become ready...."
-
-# Let DATABASE_URL env take presedence over individual connection params.
-# This is done to avoid printing the DATABASE_URL in the logs
-$(docker/entrypoints/helpers/pg_database_url.rb)
-PG_READY="pg_isready -h $POSTGRES_HOST -p $POSTGRES_PORT -U $POSTGRES_USERNAME"
-
-until $PG_READY
-do
-  sleep 2;
-done
-
-echo "Database ready to accept connections."
-
-#install missing gems for local dev as we are using base image compiled for production
-bundle install
-
-BUNDLE="bundle check"
-
-until $BUNDLE
-do
-  sleep 2;
-done
-
-# Execute the main process of the container
-exec "$@"
diff --git a/research/chatwoot/docker/entrypoints/vite.sh b/research/chatwoot/docker/entrypoints/vite.sh
deleted file mode 100755
index 8af968f..0000000
--- a/research/chatwoot/docker/entrypoints/vite.sh
+++ /dev/null
@@ -1,12 +0,0 @@
-#!/bin/sh
-set -x
-
-rm -rf /app/tmp/pids/server.pid
-rm -rf /app/tmp/cache/*
-
-pnpm store prune
-pnpm install --force
-
-echo "Ready to run Vite development server."
-
-exec "$@"
diff --git a/research/openhands-cli b/research/openhands-cli
new file mode 160000
index 0000000..f97c377
--- /dev/null
+++ b/research/openhands-cli
@@ -0,0 +1 @@
+Subproject commit f97c3778cd9e2af977a65679953f3303a4525ed9