From a37d44758b2d65c36d143a59a8912cdd0f779906 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 18 Oct 2024 04:21:24 +0530
Subject: [PATCH 01/39] feat: Add portal empty state (#10277)

---
 .../Portal/PortalEmptyState.story.vue         |  16 +++
 .../EmptyState/Portal/PortalEmptyState.vue    | 123 ++++++++++++++++++
 2 files changed, 139 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.story.vue
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue

diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.story.vue b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.story.vue
new file mode 100644
index 000000000..56ab5edc3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.story.vue
@@ -0,0 +1,16 @@
+<script setup>
+import PortalEmptyState from './PortalEmptyState.vue';
+</script>
+
+<template>
+  <Story
+    title="Components/HelpCenter/EmptyState/PortalEmptyState"
+    :layout="{ type: 'single', width: '1100px' }"
+  >
+    <Variant title="Portal Empty State">
+      <div class="w-full h-full px-20 mx-auto bg-white dark:bg-slate-900">
+        <PortalEmptyState />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue
new file mode 100644
index 000000000..86366375b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue
@@ -0,0 +1,123 @@
+<script setup>
+// import { ref } from 'vue';
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
+import CategoryCard from 'dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue';
+import LocaleCard from 'dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue';
+// import CreatePortalDialog from 'dashboard/playground/HelpCenter/components/CreatePortalDialog.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,
+  },
+];
+const categories = [
+  {
+    title: 'Getting Started',
+    description: 'Essential guides for new users',
+    articlesCount: '5',
+  },
+  {
+    title: 'Advanced Features',
+    description: 'In-depth tutorials for power users',
+    articlesCount: '8',
+  },
+];
+
+const locales = [
+  { name: 'English', isDefault: true },
+  { name: 'Spanish', isDefault: false },
+  { name: 'Malayalam', isDefault: false },
+];
+
+// const createPortalDialogRef = ref(null);
+// const openDialog = () => {
+//   createPortalDialogRef.value.dialogRef.open();
+// };
+// const handleDialogConfirm = () => {
+//   // Add logic to create a new portal
+// };
+</script>
+
+<!-- TODO: Add i18n -->
+<!-- eslint-disable vue/no-bare-strings-in-template -->
+<template>
+  <EmptyStateLayout
+    title="Help Center"
+    subtitle="Create self-service portals to access articles and information. Streamline queries, enhance agent efficiency, and elevate customer support."
+  >
+    <template #empty-state-item>
+      <div class="grid grid-cols-2 gap-4">
+        <div class="space-y-4">
+          <ArticleCard
+            v-for="(article, index) in articles"
+            :key="`article-${index}`"
+            :title="article.title"
+            :status="article.status"
+            :updated-at="article.updatedAt"
+            :author="article.author"
+            :category="article.category"
+            :views="article.views"
+          />
+        </div>
+        <div class="space-y-4">
+          <CategoryCard
+            v-for="(category, index) in categories"
+            :key="`category-${index}`"
+            :title="category.title"
+            :description="category.description"
+            :articles-count="category.articlesCount"
+          />
+          <LocaleCard
+            v-for="(locale, index) in locales"
+            :key="`locale-${index}`"
+            :locale="locale.name"
+            :is-default="locale.isDefault"
+          />
+        </div>
+      </div>
+    </template>
+    <template #actions>
+      <Button
+        variant="default"
+        label="Create Portal"
+        icon="add"
+        @click="openDialog"
+      />
+      <!-- <CreatePortalDialog
+          ref="createPortalDialogRef"
+          @confirm="handleDialogConfirm"
+        /> -->
+    </template>
+  </EmptyStateLayout>
+</template>

From dff57013c3fbc4c847b972accdd88dcf98d66906 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 18 Oct 2024 08:26:38 +0530
Subject: [PATCH 02/39] feat: Add article empty state component (#10278)

---
 .../Article/ArticleEmptyState.story.vue       | 16 ++++
 .../EmptyState/Article/ArticleEmptyState.vue  | 87 +++++++++++++++++++
 2 files changed, 103 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.story.vue
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue

diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.story.vue b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.story.vue
new file mode 100644
index 000000000..4a3cb8135
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.story.vue
@@ -0,0 +1,16 @@
+<script setup>
+import ArticleEmptyState from './ArticleEmptyState.vue';
+</script>
+
+<template>
+  <Story
+    title="Components/HelpCenter/EmptyState/ArticleEmptyState"
+    :layout="{ type: 'single', width: '1100px' }"
+  >
+    <Variant title="Article Empty State">
+      <div class="w-full h-full px-20 mx-auto bg-white dark:bg-slate-900">
+        <ArticleEmptyState />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue
new file mode 100644
index 000000000..fbc75a08a
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue
@@ -0,0 +1,87 @@
+<script setup>
+// import { ref } from 'vue';
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
+// import AddLocaleDialog from 'dashboard/playground/HelpCenter/components/AddLocaleDialog.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,
+  },
+];
+
+// const addLocaleDialogRef = ref(null);
+// const openDialog = () => {
+//   addLocaleDialogRef.value.dialogRef.open();
+// };
+// const handleDialogConfirm = () => {
+//   // Add logic to create a new portal
+// };
+</script>
+
+<!-- TODO: Add i18n -->
+<!-- eslint-disable vue/no-bare-strings-in-template -->
+
+<template>
+  <EmptyStateLayout
+    title="Write an article"
+    subtitle="Write a rich article, let's get started!"
+  >
+    <template #empty-state-item>
+      <div class="grid grid-cols-1 gap-4">
+        <ArticleCard
+          v-for="(article, index) in articles"
+          :key="`article-${index}`"
+          :title="article.title"
+          :status="article.status"
+          :updated-at="article.updatedAt"
+          :author="article.author"
+          :category="article.category"
+          :views="article.views"
+        />
+      </div>
+    </template>
+    <template #actions>
+      <Button
+        variant="default"
+        label="New article"
+        icon="add"
+        @click="openDialog"
+      />
+      <!-- <AddLocaleDialog
+          ref="addLocaleDialogRef"
+          @confirm="handleDialogConfirm"
+        /> -->
+    </template>
+  </EmptyStateLayout>
+</template>

From 4e64097421ab58685ab0703b9d68a330e2278b9d Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 18 Oct 2024 15:59:21 +0530
Subject: [PATCH 03/39] fix: solid colors (#10321)

Fix mismatch in CSS vars for `amber` and `blue` solid colors
---
 app/javascript/dashboard/assets/scss/_woot.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index 4f59b592c..8afefe384 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -108,11 +108,11 @@
     --solid-2: 252 252 252;
     --solid-3: 255 255 255;
     --solid-active: 250 251 251;
+    --solid-amber: 252 232 193;
+    --solid-blue: 218 236 255;
     --white-alpha: 255 255 255 0.1;
     --border-weak: 231 231 231;
     --border-strong: 235 235 235;
-    --amber-solid: 252 232 193;
-    --blue-solid: 218 236 255;
     --blue: 39 129 246;
 
     /* alpha is added by default */
@@ -181,11 +181,11 @@
     --solid-1: 23 23 26;
     --solid-2: 29 30 36;
     --solid-3: 36 38 48;
+    --solid-amber: 42 37 30;
+    --solid-blue: 16 49 91;
     --solid-active: 51 53 64;
     --border-weak: 34 34 37;
     --border-strong: 46 47 49;
-    --amber-solid: 42 37 30;
-    --blue-solid: 16 49 91;
     --blue: 126 182 255;
 
     /* alpha is added by default */

From 3fe771df6f27a1dd4c321b8c048936fc9f226d61 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 22 Oct 2024 13:26:56 +0530
Subject: [PATCH 04/39] fix: Modal in the context menu disappears unless
 hovered (#10333)

# Pull Request Template

## Description

This PR resolves the issue where the modal in the context menu
disappears when not being hovered over.

**Cause of issue.**
The problem occurred because the modal-related component was placed
inside `MessageContextMenu.vue`, and the parent wrapper was using the
classes `group-hover:visible invisible`. This caused the modal to only
appear when the message item, where the context menu was opened, was
hovered over.

**Solution**
To fix this, I removed the `group-hover:visible` invisible class from
the parent wrapper and moved it into the `woot-button` within the
`MessageContextMenu.vue` component. Additionally, I added a nested group
with the class group/context-menu, allowing the focus to remain on the
context menu itself.

Fixes
https://linear.app/chatwoot/issue/PR-1415/modal-in-the-context-menu-disappears-unless-hovered

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

**Loom video**

**Before**

https://www.loom.com/share/458f90708664493c86e909a56869d065?sid=0564a508-09a5-4e73-800b-8042140a22ba

**After**

https://www.loom.com/share/c119936d181d406d89468f9482ef6b81?sid=5cf3b1b4-6c66-4f8c-8f93-a62465a93b57

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 .../dashboard/components/widgets/conversation/Message.vue  | 7 ++-----
 .../conversations/components/MessageContextMenu.vue        | 1 +
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 06124270e..0cccde65a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -444,7 +444,7 @@ export default {
   <li
     v-if="shouldRenderMessage"
     :id="`message${data.id}`"
-    class="group"
+    class="group/context-menu"
     :class="[alignBubble]"
   >
     <div :class="wrapClass">
@@ -568,10 +568,7 @@ export default {
         </a>
       </div>
     </div>
-    <div
-      v-if="shouldShowContextMenu"
-      class="invisible context-menu-wrap group-hover:visible"
-    >
+    <div v-if="shouldShowContextMenu" class="context-menu-wrap">
       <ContextMenu
         v-if="isBubble && !isMessageDeleted"
         :context-menu-position="contextMenuPosition"
diff --git a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
index 0a8b7a9f0..38c075cb6 100644
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@@ -187,6 +187,7 @@ export default {
       color-scheme="secondary"
       variant="clear"
       size="small"
+      class="invisible group-hover/context-menu:visible"
       @click="handleOpen"
     />
     <ContextMenu

From 35a1dcce4380a70fc67ef4b7e02bbe64a913d30f Mon Sep 17 00:00:00 2001
From: Vishnu Narayanan <iamwishnu@gmail.com>
Date: Tue, 22 Oct 2024 14:40:30 +0530
Subject: [PATCH 05/39] feat: switch docker dev from webpack to vite (#10322)

# Pull Request Template

## Description

- Fix docker development
- Switch from webpack to vite

## Type of change

Please delete options that are not relevant.

- [x] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [x] Breaking change (fix or feature that would cause existing
functionality not to work as expected)

## How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce. Please also list any relevant details
for your test configuration.


## Checklist:

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 docker-compose.yaml                | 21 ++++++++++-----------
 docker/dockerfiles/vite.Dockerfile |  6 ++++++
 docker/entrypoints/vite.sh         | 20 ++++++++++++++++++++
 3 files changed, 36 insertions(+), 11 deletions(-)
 create mode 100644 docker/dockerfiles/vite.Dockerfile
 create mode 100644 docker/entrypoints/vite.sh

diff --git a/docker-compose.yaml b/docker-compose.yaml
index 37c21c069..cbc25a59e 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -30,14 +30,14 @@ services:
     depends_on:
       - postgres
       - redis
-      - webpack
+      - vite
       - mailhog
       - sidekiq
     ports:
       - 3000:3000
     env_file: .env
     environment:
-      - WEBPACKER_DEV_SERVER_HOST=webpack
+      - VITE_DEV_SERVER_HOST=vite
       - NODE_ENV=development
       - RAILS_ENV=development
     entrypoint: docker/entrypoints/rails.sh
@@ -61,27 +61,26 @@ services:
       - RAILS_ENV=development
     command: ["bundle", "exec", "sidekiq", "-C", "config/sidekiq.yml"]
 
-  webpack:
+  vite:
     <<: *base
     build:
       context: .
-      dockerfile: ./docker/dockerfiles/webpack.Dockerfile
-    image: chatwoot-webpack:development
+      dockerfile: ./docker/dockerfiles/vite.Dockerfile
+    image: chatwoot-vite:development
     volumes:
       - ./:/app:delegated
-      - node_modules:/app/node_modules # Node modules shared across containers
+      - node_modules:/app/node_modules
       - packs:/app/public/packs
       - cache:/app/tmp/cache
       - bundle:/usr/local/bundle
     ports:
-      - "3035" # Webpack dev server
+      - "5173:5173" # Vite dev server
     environment:
-      - WEBPACKER_DEV_SERVER_HOST=0.0.0.0
+      - VITE_DEV_SERVER_HOST=0.0.0.0
       - NODE_ENV=development
-      - NODE_OPTIONS=--openssl-legacy-provider
       - RAILS_ENV=development
-    entrypoint: docker/entrypoints/webpack.sh
-    command: bin/webpack-dev-server
+    entrypoint: docker/entrypoints/vite.sh
+    command: pnpm run dev
 
   postgres:
     image: postgres:12
diff --git a/docker/dockerfiles/vite.Dockerfile b/docker/dockerfiles/vite.Dockerfile
new file mode 100644
index 000000000..2117ff691
--- /dev/null
+++ b/docker/dockerfiles/vite.Dockerfile
@@ -0,0 +1,6 @@
+FROM chatwoot:development
+
+RUN chmod +x docker/entrypoints/vite.sh
+
+EXPOSE 5173
+CMD ["pnpm", "run", "dev"]
diff --git a/docker/entrypoints/vite.sh b/docker/entrypoints/vite.sh
new file mode 100644
index 000000000..16e57e82c
--- /dev/null
+++ b/docker/entrypoints/vite.sh
@@ -0,0 +1,20 @@
+#!/bin/sh
+set -e
+
+rm -rf /app/tmp/pids/server.pid
+rm -rf /app/tmp/cache/*
+
+pnpm install --frozen-lockfile
+
+echo "Waiting for pnpm and bundle integrity to match lockfiles...."
+PNPM="pnpm list --json | grep -q 'Missing dependencies'"
+BUNDLE="bundle check"
+
+until ! $PNPM && $BUNDLE
+do
+  sleep 2;
+done
+
+echo "Ready to run Vite development server."
+
+exec "$@"

From 2a832f8ed59008d5039e76be949e683983349618 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 22 Oct 2024 15:43:01 +0530
Subject: [PATCH 06/39] fix: parsing of `@` in i18n values (#10334)

Vue i18n has a new [linked message
syntax.](https://vue-i18n.intlify.dev/guide/essentials/syntax.html#linked-messages)
When it encounters `@` it assumes that we're trying to use a linked
message. And tries to parse it as such, in any case, it breaks since the
syntax is not valid and the params are not present. So it causes an
error. This works on dev but on production the error is bubbled up to
the top and rendering breaks.

A lot of folks use Chatwoot with default locale set in the env, this
surfaced the issue for the languages for which the syntax was not
updated

Fixes: https://github.com/chatwoot/chatwoot/issues/10313
---
 app/javascript/dashboard/i18n/locale/ar/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/bg/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/ca/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/cs/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/cs/signup.json    | 2 +-
 app/javascript/dashboard/i18n/locale/da/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/de/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/el/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/el/signup.json    | 2 +-
 app/javascript/dashboard/i18n/locale/es/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/es/signup.json    | 2 +-
 app/javascript/dashboard/i18n/locale/fa/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/fa/signup.json    | 2 +-
 app/javascript/dashboard/i18n/locale/fi/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/fi/signup.json    | 2 +-
 app/javascript/dashboard/i18n/locale/fr/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/he/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/hi/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/hr/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/hu/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/hu/signup.json    | 2 +-
 app/javascript/dashboard/i18n/locale/hy/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/id/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/is/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/it/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/ko/signup.json    | 2 +-
 app/javascript/dashboard/i18n/locale/lt/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/lv/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/nl/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/no/signup.json    | 2 +-
 app/javascript/dashboard/i18n/locale/pl/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/pt/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/pt/signup.json    | 2 +-
 app/javascript/dashboard/i18n/locale/pt_BR/login.json  | 2 +-
 app/javascript/dashboard/i18n/locale/pt_BR/signup.json | 2 +-
 app/javascript/dashboard/i18n/locale/ro/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/ru/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/tr/login.json     | 2 +-
 app/javascript/dashboard/i18n/locale/zh/login.json     | 2 +-
 39 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/app/javascript/dashboard/i18n/locale/ar/login.json b/app/javascript/dashboard/i18n/locale/ar/login.json
index 41ce73b55..c3f5e439a 100644
--- a/app/javascript/dashboard/i18n/locale/ar/login.json
+++ b/app/javascript/dashboard/i18n/locale/ar/login.json
@@ -3,7 +3,7 @@
     "TITLE": "تسجيل الدخول إلى Chatwoot",
     "EMAIL": {
       "LABEL": "البريد الإلكتروني",
-      "PLACEHOLDER": "مثلاً: someone@example.com",
+      "PLACEHOLDER": "مثلاً: someone{'@'}example.com",
       "ERROR": "الرجاء إدخال عنوان بريد إلكتروني صحيح"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/bg/login.json b/app/javascript/dashboard/i18n/locale/bg/login.json
index ee3712235..4033c9485 100644
--- a/app/javascript/dashboard/i18n/locale/bg/login.json
+++ b/app/javascript/dashboard/i18n/locale/bg/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Login to Chatwoot",
     "EMAIL": {
       "LABEL": "Email",
-      "PLACEHOLDER": "Email eg: someone@example.com",
+      "PLACEHOLDER": "Email eg: someone{'@'}example.com",
       "ERROR": "Please enter a valid email address"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/ca/login.json b/app/javascript/dashboard/i18n/locale/ca/login.json
index f7892513a..40350a079 100644
--- a/app/javascript/dashboard/i18n/locale/ca/login.json
+++ b/app/javascript/dashboard/i18n/locale/ca/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Entra a Chatwoot",
     "EMAIL": {
       "LABEL": "Correu electrònic",
-      "PLACEHOLDER": "exemple@nomdelacompanyia.com",
+      "PLACEHOLDER": "exemple{'@'}nomdelacompanyia.com",
       "ERROR": "Introduïu una adreça de correu electrònic vàlida"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/cs/login.json b/app/javascript/dashboard/i18n/locale/cs/login.json
index f63d825ab..d303e2440 100644
--- a/app/javascript/dashboard/i18n/locale/cs/login.json
+++ b/app/javascript/dashboard/i18n/locale/cs/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Přihlásit se do Chatwoot",
     "EMAIL": {
       "LABEL": "E-mailová adresa",
-      "PLACEHOLDER": "E-mail např: někdo@example.com",
+      "PLACEHOLDER": "E-mail např: někdo{'@'}example.com",
       "ERROR": "Zadejte prosím platnou e-mailovou adresu"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/cs/signup.json b/app/javascript/dashboard/i18n/locale/cs/signup.json
index f05140e49..c7738805b 100644
--- a/app/javascript/dashboard/i18n/locale/cs/signup.json
+++ b/app/javascript/dashboard/i18n/locale/cs/signup.json
@@ -20,7 +20,7 @@
     },
     "EMAIL": {
       "LABEL": "Pracovní e-mail",
-      "PLACEHOLDER": "Zadejte svou pracovní e-mailovou adresu. např.: jan@novak.spolecnost",
+      "PLACEHOLDER": "Zadejte svou pracovní e-mailovou adresu. např.: jan{'@'}novak.spolecnost",
       "ERROR": "Please enter a valid work email address"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/da/login.json b/app/javascript/dashboard/i18n/locale/da/login.json
index 3fb3a66d9..884bbb7c3 100644
--- a/app/javascript/dashboard/i18n/locale/da/login.json
+++ b/app/javascript/dashboard/i18n/locale/da/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Log ind på Chatwoot",
     "EMAIL": {
       "LABEL": "E-mail",
-      "PLACEHOLDER": "E-mail, fx: navn@eksempel.dk",
+      "PLACEHOLDER": "E-mail, fx: navn{'@'}eksempel.dk",
       "ERROR": "Indtast venligst en gyldig e-mailadresse"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/de/login.json b/app/javascript/dashboard/i18n/locale/de/login.json
index 5131d3952..73713415f 100644
--- a/app/javascript/dashboard/i18n/locale/de/login.json
+++ b/app/javascript/dashboard/i18n/locale/de/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Melden Sie sich bei Chatwoot an",
     "EMAIL": {
       "LABEL": "E-Mail",
-      "PLACEHOLDER": "E-Mail zB: jemand@example.com",
+      "PLACEHOLDER": "E-Mail zB: jemand{'@'}example.com",
       "ERROR": "Bitte geben Sie eine gültige E-Mail-Adresse ein"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/el/login.json b/app/javascript/dashboard/i18n/locale/el/login.json
index 14b74d076..d2f593904 100644
--- a/app/javascript/dashboard/i18n/locale/el/login.json
+++ b/app/javascript/dashboard/i18n/locale/el/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Είσοδος στο Chatwoot",
     "EMAIL": {
       "LABEL": "Email",
-      "PLACEHOLDER": "Email π.χ.: someone@example.com",
+      "PLACEHOLDER": "Email π.χ.: someone{'@'}example.com",
       "ERROR": "Παρακαλώ εισάγετε μια έγκυρη διεύθυνση email"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/el/signup.json b/app/javascript/dashboard/i18n/locale/el/signup.json
index c610bb125..13d098283 100644
--- a/app/javascript/dashboard/i18n/locale/el/signup.json
+++ b/app/javascript/dashboard/i18n/locale/el/signup.json
@@ -20,7 +20,7 @@
     },
     "EMAIL": {
       "LABEL": "email εργασίας",
-      "PLACEHOLDER": "συμπληρώστε το email εργασίας πχ: papadopoulos@wyane.com",
+      "PLACEHOLDER": "συμπληρώστε το email εργασίας πχ: papadopoulos{'@'}wyane.com",
       "ERROR": "Παρακαλώ εισάγετε μια έγκυρη διεύθυνση email"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/es/login.json b/app/javascript/dashboard/i18n/locale/es/login.json
index d2ccdf7b4..4ddfbc81c 100644
--- a/app/javascript/dashboard/i18n/locale/es/login.json
+++ b/app/javascript/dashboard/i18n/locale/es/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Iniciar sesión en Chatwoot",
     "EMAIL": {
       "LABEL": "E-mail",
-      "PLACEHOLDER": "Email por ejemplo: alguien@ejemplo.com",
+      "PLACEHOLDER": "Email por ejemplo: alguien{'@'}ejemplo.com",
       "ERROR": "Por favor, introduzca una dirección de correo válida"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/es/signup.json b/app/javascript/dashboard/i18n/locale/es/signup.json
index a50166b4c..d0e0d8c63 100644
--- a/app/javascript/dashboard/i18n/locale/es/signup.json
+++ b/app/javascript/dashboard/i18n/locale/es/signup.json
@@ -20,7 +20,7 @@
     },
     "EMAIL": {
       "LABEL": "E-mail",
-      "PLACEHOLDER": "bruce@wayne.empresas",
+      "PLACEHOLDER": "bruce{'@'}wayne.empresas",
       "ERROR": "Por favor, introduzca una dirección de correo válida"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/fa/login.json b/app/javascript/dashboard/i18n/locale/fa/login.json
index 70c05892c..23c4b139a 100644
--- a/app/javascript/dashboard/i18n/locale/fa/login.json
+++ b/app/javascript/dashboard/i18n/locale/fa/login.json
@@ -3,7 +3,7 @@
     "TITLE": "ورود به چت ووت",
     "EMAIL": {
       "LABEL": "ایمیل",
-      "PLACEHOLDER": "ایمیل به عنوان مثال: someone@example.com",
+      "PLACEHOLDER": "ایمیل به عنوان مثال: someone{'@'}example.com",
       "ERROR": "لطفا ایمیل خود را به شکل صحیح وارد کنید"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/fa/signup.json b/app/javascript/dashboard/i18n/locale/fa/signup.json
index fef19a0cb..9562eba62 100644
--- a/app/javascript/dashboard/i18n/locale/fa/signup.json
+++ b/app/javascript/dashboard/i18n/locale/fa/signup.json
@@ -20,7 +20,7 @@
     },
     "EMAIL": {
       "LABEL": "ایمیل کاری",
-      "PLACEHOLDER": "ایمیل کاری خود را وارد کنید به عنوان مثال: jafari@wayne.enterprises",
+      "PLACEHOLDER": "ایمیل کاری خود را وارد کنید به عنوان مثال: jafari{'@'}wayne.enterprises",
       "ERROR": "لطفا یک آدرس ایمیل کاری معتبر وارد کنید"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/fi/login.json b/app/javascript/dashboard/i18n/locale/fi/login.json
index 9bd376f64..ea7e7d652 100644
--- a/app/javascript/dashboard/i18n/locale/fi/login.json
+++ b/app/javascript/dashboard/i18n/locale/fi/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Kirjaudu sisään Chatwootiin",
     "EMAIL": {
       "LABEL": "Sähköposti",
-      "PLACEHOLDER": "Sähköposti, esim: someone@example.fi",
+      "PLACEHOLDER": "Sähköposti, esim: someone{'@'}example.fi",
       "ERROR": "Ole hyvä ja syötä validi sähköposti"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/fi/signup.json b/app/javascript/dashboard/i18n/locale/fi/signup.json
index efd64c37f..2ea149339 100644
--- a/app/javascript/dashboard/i18n/locale/fi/signup.json
+++ b/app/javascript/dashboard/i18n/locale/fi/signup.json
@@ -20,7 +20,7 @@
     },
     "EMAIL": {
       "LABEL": "Työsähköposti",
-      "PLACEHOLDER": "Anna työsähköpostiosoiteeesi, esim: ismo@hassisenkone.fi",
+      "PLACEHOLDER": "Anna työsähköpostiosoiteeesi, esim: ismo{'@'}hassisenkone.fi",
       "ERROR": "Syötä voimassa oleva työsähköpostiosoite."
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/fr/login.json b/app/javascript/dashboard/i18n/locale/fr/login.json
index 12f19f933..0418dcf7d 100644
--- a/app/javascript/dashboard/i18n/locale/fr/login.json
+++ b/app/javascript/dashboard/i18n/locale/fr/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Se connecter à Chatwoot",
     "EMAIL": {
       "LABEL": "Courriel",
-      "PLACEHOLDER": "exemple@nomentreprise.fr",
+      "PLACEHOLDER": "exemple{'@'}nomentreprise.fr",
       "ERROR": "Veuillez saisir une adresse de courriel valide"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/he/login.json b/app/javascript/dashboard/i18n/locale/he/login.json
index f183ab730..34acf14fb 100644
--- a/app/javascript/dashboard/i18n/locale/he/login.json
+++ b/app/javascript/dashboard/i18n/locale/he/login.json
@@ -3,7 +3,7 @@
     "TITLE": "התחבר ל Woot",
     "EMAIL": {
       "LABEL": "אימייל",
-      "PLACEHOLDER": "מייל לדוגמא: someone@example.com",
+      "PLACEHOLDER": "מייל לדוגמא: someone{'@'}example.com",
       "ERROR": "נא הכנס כתובת דוא\"ל תקינה"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/hi/login.json b/app/javascript/dashboard/i18n/locale/hi/login.json
index 941565463..63231cad1 100644
--- a/app/javascript/dashboard/i18n/locale/hi/login.json
+++ b/app/javascript/dashboard/i18n/locale/hi/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Login to Chatwoot",
     "EMAIL": {
       "LABEL": "Email",
-      "PLACEHOLDER": "Email eg: someone@example.com",
+      "PLACEHOLDER": "Email eg: someone{'@'}example.com",
       "ERROR": "Please enter a valid email address"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/hr/login.json b/app/javascript/dashboard/i18n/locale/hr/login.json
index 941565463..63231cad1 100644
--- a/app/javascript/dashboard/i18n/locale/hr/login.json
+++ b/app/javascript/dashboard/i18n/locale/hr/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Login to Chatwoot",
     "EMAIL": {
       "LABEL": "Email",
-      "PLACEHOLDER": "Email eg: someone@example.com",
+      "PLACEHOLDER": "Email eg: someone{'@'}example.com",
       "ERROR": "Please enter a valid email address"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/hu/login.json b/app/javascript/dashboard/i18n/locale/hu/login.json
index 3cae5f036..f34568609 100644
--- a/app/javascript/dashboard/i18n/locale/hu/login.json
+++ b/app/javascript/dashboard/i18n/locale/hu/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Chatwoot belépés",
     "EMAIL": {
       "LABEL": "E-mail",
-      "PLACEHOLDER": "E-mail pl.: valaki@példa.hu",
+      "PLACEHOLDER": "E-mail pl.: valaki{'@'}példa.hu",
       "ERROR": "Kérjük helyes e-mailcímet adj meg"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/hu/signup.json b/app/javascript/dashboard/i18n/locale/hu/signup.json
index dbaa05dc3..f111d4370 100644
--- a/app/javascript/dashboard/i18n/locale/hu/signup.json
+++ b/app/javascript/dashboard/i18n/locale/hu/signup.json
@@ -20,7 +20,7 @@
     },
     "EMAIL": {
       "LABEL": "Munkahelyi e-mail",
-      "PLACEHOLDER": "Add meg munkahelyi e-mailcímed. Pl. kovacs.janos@email.hu",
+      "PLACEHOLDER": "Add meg munkahelyi e-mailcímed. Pl. kovacs.janos{'@'}email.hu",
       "ERROR": "Please enter a valid work email address"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/hy/login.json b/app/javascript/dashboard/i18n/locale/hy/login.json
index 941565463..63231cad1 100644
--- a/app/javascript/dashboard/i18n/locale/hy/login.json
+++ b/app/javascript/dashboard/i18n/locale/hy/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Login to Chatwoot",
     "EMAIL": {
       "LABEL": "Email",
-      "PLACEHOLDER": "Email eg: someone@example.com",
+      "PLACEHOLDER": "Email eg: someone{'@'}example.com",
       "ERROR": "Please enter a valid email address"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/id/login.json b/app/javascript/dashboard/i18n/locale/id/login.json
index 32c45965e..fd0728017 100644
--- a/app/javascript/dashboard/i18n/locale/id/login.json
+++ b/app/javascript/dashboard/i18n/locale/id/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Masuk ke Chatwoot",
     "EMAIL": {
       "LABEL": "Email",
-      "PLACEHOLDER": "contoh@perusahan-mu.com",
+      "PLACEHOLDER": "contoh{'@'}perusahan-mu.com",
       "ERROR": "Harap masukkan alamat email yang valid"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/is/login.json b/app/javascript/dashboard/i18n/locale/is/login.json
index f77dc09e1..7c9f4b810 100644
--- a/app/javascript/dashboard/i18n/locale/is/login.json
+++ b/app/javascript/dashboard/i18n/locale/is/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Login to Chatwoot",
     "EMAIL": {
       "LABEL": "Tölvupóstfang",
-      "PLACEHOLDER": "Tölvupóstfang t.d. someone@example.com",
+      "PLACEHOLDER": "Tölvupóstfang t.d. someone{'@'}example.com",
       "ERROR": "Vinsamlegast skrifaðu gilt netfang"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/it/login.json b/app/javascript/dashboard/i18n/locale/it/login.json
index 8e7ed71a9..830c11e5a 100644
--- a/app/javascript/dashboard/i18n/locale/it/login.json
+++ b/app/javascript/dashboard/i18n/locale/it/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Accedi a Chatwoot",
     "EMAIL": {
       "LABEL": "Email",
-      "PLACEHOLDER": "Email es.: qualcuno@esempio.com",
+      "PLACEHOLDER": "Email es.: qualcuno{'@'}esempio.com",
       "ERROR": "Inserisci un indirizzo email valido"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/ko/signup.json b/app/javascript/dashboard/i18n/locale/ko/signup.json
index e38ef41f6..fc0a9f772 100644
--- a/app/javascript/dashboard/i18n/locale/ko/signup.json
+++ b/app/javascript/dashboard/i18n/locale/ko/signup.json
@@ -20,7 +20,7 @@
     },
     "EMAIL": {
       "LABEL": "회사 이메일",
-      "PLACEHOLDER": "회사 이메일 주소를 입력하세요. 예: taeyeon@girls.generation",
+      "PLACEHOLDER": "회사 이메일 주소를 입력하세요. 예: taeyeon{'@'}girls.generation",
       "ERROR": "Please enter a valid work email address"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/lt/login.json b/app/javascript/dashboard/i18n/locale/lt/login.json
index 1f7555e05..53ded068f 100644
--- a/app/javascript/dashboard/i18n/locale/lt/login.json
+++ b/app/javascript/dashboard/i18n/locale/lt/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Login to Chatwoot",
     "EMAIL": {
       "LABEL": "El. paštas",
-      "PLACEHOLDER": "email pavyzdys: someone@example.com",
+      "PLACEHOLDER": "email pavyzdys: someone{'@'}example.com",
       "ERROR": "Prašau įveskite teisingą el. pašto adresą"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/lv/login.json b/app/javascript/dashboard/i18n/locale/lv/login.json
index 0c3782de8..f8a89b168 100644
--- a/app/javascript/dashboard/i18n/locale/lv/login.json
+++ b/app/javascript/dashboard/i18n/locale/lv/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Login to Chatwoot",
     "EMAIL": {
       "LABEL": "E-pasts",
-      "PLACEHOLDER": "piemers@firmasnosaukums.com",
+      "PLACEHOLDER": "piemers{'@'}firmasnosaukums.com",
       "ERROR": "Lūdzu, ievadiet derīgu e-pasta adresi"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/nl/login.json b/app/javascript/dashboard/i18n/locale/nl/login.json
index a545ee69d..17c5ebab7 100644
--- a/app/javascript/dashboard/i18n/locale/nl/login.json
+++ b/app/javascript/dashboard/i18n/locale/nl/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Inloggen bij Chatwoot",
     "EMAIL": {
       "LABEL": "E-mailadres",
-      "PLACEHOLDER": "voorbeeld@bedrijfsnaam.nl",
+      "PLACEHOLDER": "voorbeeld{'@'}bedrijfsnaam.nl",
       "ERROR": "Voer een geldig e-mailadres in"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/no/signup.json b/app/javascript/dashboard/i18n/locale/no/signup.json
index 0028ddd43..c22de5723 100644
--- a/app/javascript/dashboard/i18n/locale/no/signup.json
+++ b/app/javascript/dashboard/i18n/locale/no/signup.json
@@ -20,7 +20,7 @@
     },
     "EMAIL": {
       "LABEL": "Bedriftse-postadresse",
-      "PLACEHOLDER": "Skriv inn din profesjonelle e-postadresse. F.eks: ola@olasbedrift.no",
+      "PLACEHOLDER": "Skriv inn din profesjonelle e-postadresse. F.eks: ola{'@'}olasbedrift.no",
       "ERROR": "Please enter a valid work email address"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/pl/login.json b/app/javascript/dashboard/i18n/locale/pl/login.json
index 008005d27..f2d7df949 100644
--- a/app/javascript/dashboard/i18n/locale/pl/login.json
+++ b/app/javascript/dashboard/i18n/locale/pl/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Zaloguj się do Chatwoot",
     "EMAIL": {
       "LABEL": "E-mail",
-      "PLACEHOLDER": "przyklad@nazwafirmy.com",
+      "PLACEHOLDER": "przyklad{'@'}nazwafirmy.com",
       "ERROR": "Wprowadź poprawny adres e-mail"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/pt/login.json b/app/javascript/dashboard/i18n/locale/pt/login.json
index 637ae8678..61991c750 100644
--- a/app/javascript/dashboard/i18n/locale/pt/login.json
+++ b/app/javascript/dashboard/i18n/locale/pt/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Entrar no Chatwoot",
     "EMAIL": {
       "LABEL": "E-mail",
-      "PLACEHOLDER": "exemplo@nomedaempresa.pt",
+      "PLACEHOLDER": "exemplo{'@'}nomedaempresa.pt",
       "ERROR": "Por favor, insira um endereço de e-mail válido"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/pt/signup.json b/app/javascript/dashboard/i18n/locale/pt/signup.json
index edaa8e4ba..257cb12a2 100644
--- a/app/javascript/dashboard/i18n/locale/pt/signup.json
+++ b/app/javascript/dashboard/i18n/locale/pt/signup.json
@@ -20,7 +20,7 @@
     },
     "EMAIL": {
       "LABEL": "E-mail de trabalho",
-      "PLACEHOLDER": "Digite o seu endereço de e-mail profissional. Por exemplo: geral@informatico.pt",
+      "PLACEHOLDER": "Digite o seu endereço de e-mail profissional. Por exemplo: geral{'@'}informatico.pt",
       "ERROR": "Please enter a valid work email address"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/login.json b/app/javascript/dashboard/i18n/locale/pt_BR/login.json
index 3222d0672..d4b9e2160 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/login.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Entrar no Chatwoot",
     "EMAIL": {
       "LABEL": "e-mail",
-      "PLACEHOLDER": "exemplo@empresa.com",
+      "PLACEHOLDER": "exemplo{'@'}empresa.com",
       "ERROR": "Digite um endereço de e-mail válido"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/signup.json b/app/javascript/dashboard/i18n/locale/pt_BR/signup.json
index 36b7b83f2..c9912c070 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/signup.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/signup.json
@@ -20,7 +20,7 @@
     },
     "EMAIL": {
       "LABEL": "E-mail comercial",
-      "PLACEHOLDER": "Digite seu e-mail de trabalho. Ex.: bruce@wayne.com.br",
+      "PLACEHOLDER": "Digite seu e-mail de trabalho. Ex.: bruce{'@'}wayne.com.br",
       "ERROR": "Por favor, insira um endereço de e-mail de trabalho válido."
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/ro/login.json b/app/javascript/dashboard/i18n/locale/ro/login.json
index 47a8ae093..8eb566e34 100644
--- a/app/javascript/dashboard/i18n/locale/ro/login.json
+++ b/app/javascript/dashboard/i18n/locale/ro/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Conectează-te la Chatwoot",
     "EMAIL": {
       "LABEL": "E-mail",
-      "PLACEHOLDER": "exemplu@companyname.com",
+      "PLACEHOLDER": "exemplu{'@'}companyname.com",
       "ERROR": "Vă rugăm să introduceți o adresă de e-mail validă"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/ru/login.json b/app/javascript/dashboard/i18n/locale/ru/login.json
index 71197f416..78ee4b55b 100644
--- a/app/javascript/dashboard/i18n/locale/ru/login.json
+++ b/app/javascript/dashboard/i18n/locale/ru/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Войти в Chatwoot",
     "EMAIL": {
       "LABEL": "Email",
-      "PLACEHOLDER": "пример @companyname.com",
+      "PLACEHOLDER": "пример {'@'}companyname.com",
       "ERROR": "Пожалуйста, введите действительный адрес электронной почты"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/tr/login.json b/app/javascript/dashboard/i18n/locale/tr/login.json
index 6f5eb0b41..a6e57369c 100644
--- a/app/javascript/dashboard/i18n/locale/tr/login.json
+++ b/app/javascript/dashboard/i18n/locale/tr/login.json
@@ -3,7 +3,7 @@
     "TITLE": "Chatwoot'ta oturum açın",
     "EMAIL": {
       "LABEL": "E-Posta",
-      "PLACEHOLDER": "ornek@firmadi.com",
+      "PLACEHOLDER": "ornek{'@'}firmadi.com",
       "ERROR": "Lütfen geçerli bir e-posta adresi girin"
     },
     "PASSWORD": {
diff --git a/app/javascript/dashboard/i18n/locale/zh/login.json b/app/javascript/dashboard/i18n/locale/zh/login.json
index fb64d8045..a3a90e359 100644
--- a/app/javascript/dashboard/i18n/locale/zh/login.json
+++ b/app/javascript/dashboard/i18n/locale/zh/login.json
@@ -3,7 +3,7 @@
     "TITLE": "登录到Chatwoot",
     "EMAIL": {
       "LABEL": "Email",
-      "PLACEHOLDER": "电子邮址 例如：somone@example.com"
+      "PLACEHOLDER": "电子邮址 例如：somone{'@'}example.com"
     },
     "PASSWORD": {
       "LABEL": "密码",

From 601a0f8a766e8a02a48a743346a4f3b44b7019c6 Mon Sep 17 00:00:00 2001
From: Mazen Khalil <mazen_k@outlook.com>
Date: Wed, 23 Oct 2024 09:18:30 +0300
Subject: [PATCH 07/39] fix: ip-lookup database lazy loading for all
 environments (#8052)

The current task for loading `GeoLite2-City.mmdb` doesn't work for all build types. This PR addresses this and move the task to initializer to ensure consistency across environments.

---------

Co-authored-by: Sojan Jose <sojan@pepalo.com>
Co-authored-by: Sojan Jose <sojan.official@gmail.com>
---
 app/services/geocoder/setup_service.rb | 49 ++++++++++++++++++++++++++
 config/initializers/geocoder.rb        |  4 +++
 lib/tasks/ip_lookup.rake               | 31 +---------------
 3 files changed, 54 insertions(+), 30 deletions(-)
 create mode 100644 app/services/geocoder/setup_service.rb

diff --git a/app/services/geocoder/setup_service.rb b/app/services/geocoder/setup_service.rb
new file mode 100644
index 000000000..0b71c6740
--- /dev/null
+++ b/app/services/geocoder/setup_service.rb
@@ -0,0 +1,49 @@
+require 'rubygems/package'
+
+class Geocoder::SetupService
+  def perform
+    return if File.exist?(GeocoderConfiguration::LOOK_UP_DB)
+
+    ip_lookup_api_key = ENV.fetch('IP_LOOKUP_API_KEY', nil)
+    if ip_lookup_api_key.blank?
+      log_info('IP_LOOKUP_API_KEY empty. Skipping geoip database setup')
+      return
+    end
+
+    log_info('Fetch GeoLite2-City database')
+    fetch_and_extract_database(ip_lookup_api_key)
+  end
+
+  private
+
+  def fetch_and_extract_database(api_key)
+    base_url = ENV.fetch('IP_LOOKUP_BASE_URL', 'https://download.maxmind.com/app/geoip_download')
+    source_file = Down.download("#{base_url}?edition_id=GeoLite2-City&suffix=tar.gz&license_key=#{api_key}")
+
+    extract_tar_file(source_file)
+    log_info('Fetch complete')
+  rescue StandardError => e
+    log_error(e.message)
+  end
+
+  def extract_tar_file(source_file)
+    tar_extract = Gem::Package::TarReader.new(Zlib::GzipReader.open(source_file))
+    tar_extract.rewind
+
+    tar_extract.each do |entry|
+      next unless entry.full_name.include?('GeoLite2-City.mmdb') && entry.file?
+
+      File.open GeocoderConfiguration::LOOK_UP_DB, 'wb' do |f|
+        f.print entry.read
+      end
+    end
+  end
+
+  def log_info(message)
+    Rails.logger.info "[rake ip_lookup:setup] #{message}"
+  end
+
+  def log_error(message)
+    Rails.logger.error "[rake ip_lookup:setup] #{message}"
+  end
+end
diff --git a/config/initializers/geocoder.rb b/config/initializers/geocoder.rb
index 9c53a1635..e1c7de695 100644
--- a/config/initializers/geocoder.rb
+++ b/config/initializers/geocoder.rb
@@ -24,3 +24,7 @@ module GeocoderConfiguration
 end
 
 Geocoder.configure(ip_lookup: :geoip2, geoip2: { file: GeocoderConfiguration::LOOK_UP_DB }) if ENV['IP_LOOKUP_API_KEY'].present?
+
+Rails.application.config.after_initialize do
+  Geocoder::SetupService.new.perform
+end
diff --git a/lib/tasks/ip_lookup.rake b/lib/tasks/ip_lookup.rake
index 3225caffa..644a5c825 100644
--- a/lib/tasks/ip_lookup.rake
+++ b/lib/tasks/ip_lookup.rake
@@ -2,35 +2,6 @@ require 'rubygems/package'
 
 namespace :ip_lookup do
   task setup: :environment do
-    next if File.exist?(GeocoderConfiguration::LOOK_UP_DB)
-
-    ip_lookup_api_key = ENV.fetch('IP_LOOKUP_API_KEY', nil)
-    if ip_lookup_api_key.blank?
-      Rails.logger.info '[rake ip_lookup:setup] IP_LOOKUP_API_KEY empty. Skipping geoip database setup'
-      next
-    end
-
-    Rails.logger.info '[rake ip_lookup:setup] Fetch GeoLite2-City database'
-
-    begin
-      base_url = ENV.fetch('IP_LOOKUP_BASE_URL', 'https://download.maxmind.com/app/geoip_download')
-      source_file = Down.download(
-        "#{base_url}?edition_id=GeoLite2-City&suffix=tar.gz&license_key=#{ip_lookup_api_key}"
-      )
-
-      tar_extract = Gem::Package::TarReader.new(Zlib::GzipReader.open(source_file))
-      tar_extract.rewind
-
-      tar_extract.each do |entry|
-        next unless entry.full_name.include?('GeoLite2-City.mmdb') && entry.file?
-
-        File.open GeocoderConfiguration::LOOK_UP_DB, 'wb' do |f|
-          f.print entry.read
-        end
-      end
-      Rails.logger.info '[rake ip_lookup:setup] Fetch complete'
-    rescue StandardError => e
-      Rails.logger.error "[rake ip_lookup:setup] #{e.message}"
-    end
+    Geocoder::SetupService.new.perform
   end
 end

From 6d3ecfe3c1d3bc860ba1fc050ebc3319cc5a8787 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 24 Oct 2024 07:02:37 +0530
Subject: [PATCH 08/39] feat: Add new sidebar for Chatwoot V4 (#10291)

This PR has the initial version of the new sidebar targeted for the next major redesign of the app. This PR includes the following changes

- Components in the `layouts-next` and `base-next` directories in `dashboard/components`
- Two generic components `Avatar` and `Icon`
- `SidebarGroup` component to manage expandable sidebar groups with nested navigation items. This includes handling active states, transitions, and permissions.
- `SidebarGroupHeader` component to display the header of each navigation group with optional icons and active state indication.
- `SidebarGroupLeaf` component for individual navigation items within a group, supporting icons and active state.
- `SidebarGroupSeparator` component to visually separate nested navigation items. (They look a lot like header)
- `SidebarGroupEmptyLeaf` component to render empty state of any navigation groups.

----

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../dashboard/assets/scss/_woot.scss          |  12 +
 .../components-next/avatar/Avatar.story.vue   |  38 +-
 .../components-next/avatar/Avatar.vue         | 130 +++--
 .../components-next/button/Button.vue         |   6 +-
 .../dashboard/components-next/icon/Icon.vue   |  19 +
 .../dashboard/components-next/icon/Logo.vue   |  28 ++
 .../components-next/sidebar/ChannelLeaf.vue   |  71 +++
 .../components-next/sidebar/Sidebar.vue       | 473 ++++++++++++++++++
 .../sidebar/SidebarAccountSwitcher.vue        | 110 ++++
 .../components-next/sidebar/SidebarGroup.vue  | 146 ++++++
 .../sidebar/SidebarGroupEmptyLeaf.vue         |  13 +
 .../sidebar/SidebarGroupHeader.vue            |  42 ++
 .../sidebar/SidebarGroupLeaf.vue              |  92 ++++
 .../sidebar/SidebarGroupSeparator.vue         |  25 +
 .../sidebar/SidebarNotificationBell.vue       |  40 ++
 .../sidebar/SidebarProfileMenu.vue            | 146 ++++++
 .../sidebar/SidebarProfileMenuStatus.vue      | 119 +++++
 .../sidebar/SidebarSubGroup.vue               | 114 +++++
 .../components-next/sidebar/provider.js       |  49 ++
 .../sidebar/useSidebarKeyboardShortcuts.js    |  39 ++
 .../dashboard/components/ChatList.vue         |   2 +-
 .../dashboard/components/SidemenuIcon.vue     |  16 +
 .../dashboard/components/layout/Sidebar.vue   |   3 +
 .../dashboard/components/policy.vue           |  31 +-
 .../components/specs/SidemenuIcon.spec.js     |  19 +
 .../composables/spec/useAccount.spec.js       |  92 +++-
 .../dashboard/composables/useAccount.js       |  15 +-
 .../dashboard/composables/usePolicy.js        |  29 ++
 .../dashboard/composables/utils/useKbd.js     |  22 +
 app/javascript/dashboard/featureFlags.js      |   1 +
 .../dashboard/i18n/locale/en/settings.json    |   5 +-
 .../dashboard/routes/dashboard/Dashboard.vue  |  31 +-
 .../contacts/components/ContactsView.vue      |   2 +-
 .../routes/dashboard/dashboard.routes.js      |   3 +
 .../components/HelpCenterLayout.vue           |  16 +
 .../routes/dashboard/inbox/routes.js          |   4 +
 .../settings/reports/reports.routes.js        |   3 +
 .../dashboard/store/modules/customViews.js    |  62 ++-
 .../modules/specs/customViews/actions.spec.js |  33 +-
 .../modules/specs/customViews/fixtures.js     |  25 +-
 .../modules/specs/customViews/getters.spec.js |  44 +-
 .../specs/customViews/mutations.spec.js       | 120 ++++-
 config/features.yml                           |   2 +
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  10 +
 tailwind.config.js                            |  39 +-
 vite.config.ts                                |   1 +
 47 files changed, 2188 insertions(+), 155 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/icon/Icon.vue
 create mode 100644 app/javascript/dashboard/components-next/icon/Logo.vue
 create mode 100644 app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
 create mode 100644 app/javascript/dashboard/components-next/sidebar/Sidebar.vue
 create mode 100644 app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
 create mode 100644 app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
 create mode 100644 app/javascript/dashboard/components-next/sidebar/SidebarGroupEmptyLeaf.vue
 create mode 100644 app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
 create mode 100644 app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
 create mode 100644 app/javascript/dashboard/components-next/sidebar/SidebarGroupSeparator.vue
 create mode 100644 app/javascript/dashboard/components-next/sidebar/SidebarNotificationBell.vue
 create mode 100644 app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
 create mode 100644 app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
 create mode 100644 app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue
 create mode 100644 app/javascript/dashboard/components-next/sidebar/provider.js
 create mode 100644 app/javascript/dashboard/components-next/sidebar/useSidebarKeyboardShortcuts.js
 create mode 100644 app/javascript/dashboard/composables/usePolicy.js
 create mode 100644 app/javascript/dashboard/composables/utils/useKbd.js

diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index 8afefe384..75df32cfe 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -540,3 +540,15 @@
     --color-orange-900: 255 224 194;
   }
 }
+
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
diff --git a/app/javascript/dashboard/components-next/avatar/Avatar.story.vue b/app/javascript/dashboard/components-next/avatar/Avatar.story.vue
index 869970f94..d502291c9 100644
--- a/app/javascript/dashboard/components-next/avatar/Avatar.story.vue
+++ b/app/javascript/dashboard/components-next/avatar/Avatar.story.vue
@@ -7,28 +7,58 @@ import Avatar from './Avatar.vue';
     <Variant title="Default">
       <div class="p-4 bg-white dark:bg-slate-900">
         <Avatar
-          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Amaya"
+          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
           class="bg-ruby-300 dark:bg-ruby-900"
         />
       </div>
     </Variant>
 
+    <Variant title="Default with upload">
+      <div class="p-4 bg-white dark:bg-slate-900">
+        <Avatar
+          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
+          class="bg-ruby-300 dark:bg-ruby-900"
+          allow-upload
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Invalid or empty SRC">
+      <div class="p-4 bg-white dark:bg-slate-900 space-x-4">
+        <Avatar src="https://example.com/ruby.png" name="Ruby" allow-upload />
+        <Avatar name="Bruce Wayne" allow-upload />
+      </div>
+    </Variant>
+
+    <Variant title="Rounded Full">
+      <div class="p-4 bg-white dark:bg-slate-900 space-x-4">
+        <Avatar
+          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
+          allow-upload
+          rounded-full
+        />
+      </div>
+    </Variant>
+
     <Variant title="Different Sizes">
       <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
         <Avatar
-          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Felix"
+          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Felix"
           :size="48"
           class="bg-green-300 dark:bg-green-900"
+          allow-upload
         />
         <Avatar
           :size="72"
-          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Jade"
+          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Jade"
           class="bg-indigo-300 dark:bg-indigo-900"
+          allow-upload
         />
         <Avatar
-          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Emery"
+          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Emery"
           :size="96"
           class="bg-woot-300 dark:bg-woot-900"
+          allow-upload
         />
       </div>
     </Variant>
diff --git a/app/javascript/dashboard/components-next/avatar/Avatar.vue b/app/javascript/dashboard/components-next/avatar/Avatar.vue
index d5bb653b2..d558f030a 100644
--- a/app/javascript/dashboard/components-next/avatar/Avatar.vue
+++ b/app/javascript/dashboard/components-next/avatar/Avatar.vue
@@ -1,52 +1,122 @@
 <script setup>
-import { computed } from 'vue';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import { computed, ref, watch } from 'vue';
+import wootConstants from 'dashboard/constants/globals';
 
 const props = defineProps({
   src: {
     type: String,
     default: '',
   },
+  name: {
+    type: String,
+    required: true,
+  },
   size: {
     type: Number,
-    default: 72,
+    default: 32,
+  },
+  allowUpload: {
+    type: Boolean,
+    default: false,
+  },
+  roundedFull: {
+    type: Boolean,
+    default: false,
+  },
+  status: {
+    type: String,
+    default: null,
+    validator: value => {
+      if (!value) return true;
+      return wootConstants.AVAILABILITY_STATUS_KEYS.includes(value);
+    },
   },
 });
-
 const emit = defineEmits(['upload']);
 
-const avatarSize = computed(() => `${props.size}px`);
-const iconSize = computed(() => `${props.size / 2}px`);
+const isImageValid = ref(true);
 
-const handleUploadAvatar = () => {
-  emit('upload');
-};
+function invalidateCurrentImage() {
+  isImageValid.value = false;
+}
+
+const initials = computed(() => {
+  const splitNames = props.name.split(' ');
+
+  if (splitNames.length > 1) {
+    const firstName = splitNames[0];
+    const lastName = splitNames[splitNames.length - 1];
+
+    return firstName[0] + lastName[0];
+  }
+
+  const firstName = splitNames[0];
+  return firstName[0];
+});
+
+watch(
+  () => props.src,
+  () => {
+    isImageValid.value = true;
+  }
+);
 </script>
 
 <template>
-  <div
-    class="relative flex flex-col items-center gap-2 select-none rounded-xl group/avatar"
+  <span
+    class="relative inline"
     :style="{
-      width: avatarSize,
-      height: avatarSize,
+      width: `${size}px`,
+      height: `${size}px`,
     }"
   >
-    <img
-      v-if="src"
-      :src="props.src"
-      alt="avatar"
-      class="w-full h-full shadow-sm rounded-xl"
-    />
-    <div
-      class="absolute inset-0 flex items-center justify-center invisible w-full h-full transition-all duration-500 ease-in-out opacity-0 rounded-xl dark:bg-slate-900/50 bg-slate-900/20 group-hover/avatar:visible group-hover/avatar:opacity-100"
-      @click="handleUploadAvatar"
-    >
-      <FluentIcon
-        icon="upload-lucide"
-        icon-lib="lucide"
-        :size="iconSize"
-        class="text-white dark:text-white"
+    <slot name="badge" :size>
+      <div
+        class="rounded-full w-2.5 h-2.5 absolute z-20"
+        :style="{
+          top: `${size - 10}px`,
+          left: `${size - 10}px`,
+        }"
+        :class="{
+          'bg-n-teal-10': status === 'online',
+          'bg-n-amber-10': status === 'busy',
+          'bg-n-slate-10': status === 'offline',
+        }"
       />
-    </div>
-  </div>
+    </slot>
+    <span
+      role="img"
+      class="inline-flex relative items-center justify-center object-cover overflow-hidden font-medium bg-woot-50 text-woot-500 group/avatar"
+      :class="{
+        'rounded-full': roundedFull,
+        'rounded-xl': !roundedFull,
+      }"
+      :style="{
+        width: `${size}px`,
+        height: `${size}px`,
+      }"
+    >
+      <img
+        v-if="src && isImageValid"
+        :src="src"
+        :alt="name"
+        @error="invalidateCurrentImage"
+      />
+      <span v-else>
+        {{ initials }}
+      </span>
+      <div
+        v-if="allowUpload"
+        role="button"
+        class="absolute inset-0 flex items-center justify-center invisible w-full h-full transition-all duration-500 ease-in-out opacity-0 rounded-xl dark:bg-slate-900/50 bg-slate-900/20 group-hover/avatar:visible group-hover/avatar:opacity-100"
+        @click="emit('upload')"
+      >
+        <Icon
+          icon="i-lucide-upload"
+          class="text-white dark:text-white size-4"
+        />
+      </div>
+    </span>
+  </span>
 </template>
diff --git a/app/javascript/dashboard/components-next/button/Button.vue b/app/javascript/dashboard/components-next/button/Button.vue
index 5f7e8d6c7..d2487cabe 100644
--- a/app/javascript/dashboard/components-next/button/Button.vue
+++ b/app/javascript/dashboard/components-next/button/Button.vue
@@ -118,7 +118,11 @@ const handleClick = () => {
       :icon-lib="iconLib"
       class="flex-shrink-0"
     />
-    <span v-if="label" class="min-w-0 truncate">{{ label }}</span>
+    <slot>
+      <span v-if="label" class="min-w-0 truncate">
+        {{ label }}
+      </span>
+    </slot>
     <FluentIcon
       v-if="icon && iconPosition === 'right'"
       :icon="icon"
diff --git a/app/javascript/dashboard/components-next/icon/Icon.vue b/app/javascript/dashboard/components-next/icon/Icon.vue
new file mode 100644
index 000000000..2c0156b09
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/Icon.vue
@@ -0,0 +1,19 @@
+<script setup>
+import { h, isVNode } from 'vue';
+
+const props = defineProps({
+  icon: { type: [String, Object, Function], required: true },
+});
+
+const renderIcon = () => {
+  if (!props.icon) return null;
+  if (typeof props.icon === 'function' || isVNode(props.icon)) {
+    return props.icon;
+  }
+  return h('span', { class: props.icon });
+};
+</script>
+
+<template>
+  <component :is="renderIcon" />
+</template>
diff --git a/app/javascript/dashboard/components-next/icon/Logo.vue b/app/javascript/dashboard/components-next/icon/Logo.vue
new file mode 100644
index 000000000..2330021c3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/Logo.vue
@@ -0,0 +1,28 @@
+<template>
+  <svg
+    v-once
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#woot-logo-clip-2342424e23u32098)">
+      <path
+        d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
+        fill="#2781F6"
+      />
+      <path
+        d="M11.4172 11.4172H7.70831C5.66383 11.4172 4 9.75328 4 7.70828C4 5.66394 5.66383 4 7.70835 4C9.75339 4 11.4172 5.66394 11.4172 7.70828V11.4172Z"
+        fill="white"
+        stroke="white"
+        stroke-width="0.1875"
+      />
+    </g>
+    <defs>
+      <clipPath id="woot-logo-clip-2342424e23u32098">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue b/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
new file mode 100644
index 000000000..2ae5bd0c5
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
@@ -0,0 +1,71 @@
+<script setup>
+import { computed } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  inbox: {
+    type: Object,
+    required: true,
+  },
+});
+
+const channelTypeIconMap = {
+  'Channel::Api': 'i-ri-cloudy-fill',
+  'Channel::Email': 'i-ri-mail-fill',
+  'Channel::FacebookPage': 'i-ri-messenger-fill',
+  'Channel::Line': 'i-ri-line-fill',
+  'Channel::Sms': 'i-ri-chat-1-fill',
+  'Channel::Telegram': 'i-ri-telegram-fill',
+  'Channel::TwilioSms': 'i-ri-chat-1-fill',
+  'Channel::TwitterProfile': 'i-ri-twitter-x-fill',
+  'Channel::WebWidget': 'i-ri-global-fill',
+  'Channel::Whatsapp': 'i-ri-whatsapp-fill',
+};
+
+const providerIconMap = {
+  microsoft: 'i-ri-microsoft-fill',
+  google: 'i-ri-google-fill',
+};
+
+const channelIcon = computed(() => {
+  const type = props.inbox.channel_type;
+  let icon = channelTypeIconMap[type];
+
+  if (type === 'Channel::Email' && props.inbox.provider) {
+    if (Object.keys(providerIconMap).includes(props.inbox.provider)) {
+      icon = providerIconMap[props.inbox.provider];
+    }
+  }
+
+  return icon ?? 'i-ri-global-fill';
+});
+
+const reauthorizationRequired = computed(() => {
+  return props.inbox.reauthorization_required;
+});
+</script>
+
+<template>
+  <span
+    class="size-4 grid place-content-center rounded-full bg-n-alpha-2"
+    :class="{ 'bg-n-blue/20': active }"
+  >
+    <Icon :icon="channelIcon" class="size-3" />
+  </span>
+  <div class="flex-1 truncate min-w-0">{{ label }}</div>
+  <div
+    v-if="reauthorizationRequired"
+    v-tooltip.top-end="$t('SIDEBAR.REAUTHORIZE')"
+    class="grid place-content-center size-5 bg-n-ruby-5/60 rounded-full"
+  >
+    <Icon icon="i-woot-alert" class="size-3 text-n-ruby-9" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
new file mode 100644
index 000000000..a84db8ae5
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -0,0 +1,473 @@
+<script setup>
+import { h, computed, onMounted } from 'vue';
+import { provideSidebarContext } from './provider';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useKbd } from 'dashboard/composables/utils/useKbd';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
+import { useStorage } from '@vueuse/core';
+
+import { useSidebarKeyboardShortcuts } from './useSidebarKeyboardShortcuts';
+import SidebarGroup from './SidebarGroup.vue';
+import SidebarProfileMenu from './SidebarProfileMenu.vue';
+import ChannelLeaf from './ChannelLeaf.vue';
+import SidebarNotificationBell from './SidebarNotificationBell.vue';
+import SidebarAccountSwitcher from './SidebarAccountSwitcher.vue';
+import Logo from 'next/icon/Logo.vue';
+
+const emit = defineEmits([
+  'openNotificationPanel',
+  'closeKeyShortcutModal',
+  'openKeyShortcutModal',
+  'showCreateAccountModal',
+]);
+
+const { accountScopedRoute } = useAccount();
+const store = useStore();
+const searchShortcut = useKbd([`$mod`, 'k']);
+const { t } = useI18n();
+const enableNewConversation = false;
+
+const toggleShortcutModalFn = show => {
+  if (show) {
+    emit('openKeyShortcutModal');
+  } else {
+    emit('closeKeyShortcutModal');
+  }
+};
+
+useSidebarKeyboardShortcuts(toggleShortcutModalFn);
+
+// We're using localStorage to store the expanded item in the sidebar
+// This helps preserve context when navigating between portal and dashboard layouts
+// and also when the user refreshes the page
+const expandedItem = useStorage(
+  'next-sidebar-expanded-item',
+  null,
+  localStorage
+);
+
+const setExpandedItem = name => {
+  expandedItem.value = expandedItem.value === name ? null : name;
+};
+provideSidebarContext({
+  expandedItem,
+  setExpandedItem,
+});
+
+const inboxes = useMapGetter('inboxes/getInboxes');
+const labels = useMapGetter('labels/getLabelsOnSidebar');
+const teams = useMapGetter('teams/getMyTeams');
+const contactCustomViews = useMapGetter('customViews/getContactCustomViews');
+const conversationCustomViews = useMapGetter(
+  'customViews/getConversationCustomViews'
+);
+
+onMounted(() => {
+  store.dispatch('labels/get');
+  store.dispatch('inboxes/get');
+  store.dispatch('notifications/unReadCount');
+  store.dispatch('teams/get');
+  store.dispatch('attributes/get');
+  store.dispatch('customViews/get', 'conversation');
+  store.dispatch('customViews/get', 'contact');
+});
+
+const sortedInboxes = computed(() =>
+  inboxes.value.slice().sort((a, b) => a.name.localeCompare(b.name))
+);
+
+const menuItems = computed(() => {
+  return [
+    {
+      name: 'Inbox',
+      label: t('SIDEBAR.INBOX'),
+      icon: 'i-lucide-inbox',
+      to: accountScopedRoute('inbox_view'),
+    },
+    {
+      name: 'Conversation',
+      label: t('SIDEBAR.CONVERSATIONS'),
+      icon: 'i-lucide-message-circle',
+      children: [
+        {
+          name: 'All',
+          label: t('SIDEBAR.ALL_CONVERSATIONS'),
+          activeOn: ['inbox_conversation'],
+          to: accountScopedRoute('home'),
+        },
+        {
+          name: 'Mentions',
+          label: t('SIDEBAR.MENTIONED_CONVERSATIONS'),
+          activeOn: ['conversation_through_mentions'],
+          to: accountScopedRoute('conversation_mentions'),
+        },
+        {
+          name: 'Unattended',
+          activeOn: ['conversation_through_unattended'],
+          label: t('SIDEBAR.UNATTENDED_CONVERSATIONS'),
+          to: accountScopedRoute('conversation_unattended'),
+        },
+        {
+          name: 'Folders',
+          label: t('SIDEBAR.CUSTOM_VIEWS_FOLDER'),
+          icon: 'i-lucide-folder',
+          activeOn: ['conversations_through_folders'],
+          children: conversationCustomViews.value.map(view => ({
+            name: `${view.name}-${view.id}`,
+            label: view.name,
+            to: accountScopedRoute('folder_conversations', { id: view.id }),
+          })),
+        },
+        {
+          name: 'Teams',
+          label: t('SIDEBAR.TEAMS'),
+          icon: 'i-lucide-users',
+          activeOn: ['conversations_through_team'],
+          children: teams.value.map(team => ({
+            name: `${team.name}-${team.id}`,
+            label: team.name,
+            to: accountScopedRoute('team_conversations', { teamId: team.id }),
+          })),
+        },
+        {
+          name: 'Channels',
+          label: t('SIDEBAR.CHANNELS'),
+          icon: 'i-lucide-mailbox',
+          activeOn: ['conversation_through_inbox'],
+          children: sortedInboxes.value.map(inbox => ({
+            name: `${inbox.name}-${inbox.id}`,
+            label: inbox.name,
+            to: accountScopedRoute('inbox_dashboard', { inbox_id: inbox.id }),
+            component: leafProps => h(ChannelLeaf, { ...leafProps, inbox }),
+          })),
+        },
+        {
+          name: 'Labels',
+          label: t('SIDEBAR.LABELS'),
+          icon: 'i-lucide-tag',
+          activeOn: ['conversations_through_label'],
+          children: labels.value.map(label => ({
+            name: `${label.title}-${label.id}`,
+            label: label.title,
+            icon: h('span', {
+              class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`,
+              style: { backgroundColor: label.color },
+            }),
+            to: accountScopedRoute('label_conversations', {
+              label: label.title,
+            }),
+          })),
+        },
+      ],
+    },
+    {
+      name: 'Captain',
+      icon: 'i-lucide-bot',
+      label: t('SIDEBAR.CAPTAIN'),
+      to: accountScopedRoute('captain'),
+    },
+    {
+      name: 'Contacts',
+      label: t('SIDEBAR.CONTACTS'),
+      icon: 'i-lucide-contact',
+      children: [
+        {
+          name: 'All Contacts',
+          label: t('SIDEBAR.ALL_CONTACTS'),
+          to: accountScopedRoute('contacts_dashboard'),
+        },
+        {
+          name: 'Segments',
+          icon: 'i-lucide-group',
+          label: t('SIDEBAR.CUSTOM_VIEWS_SEGMENTS'),
+          children: contactCustomViews.value.map(view => ({
+            name: `${view.name}-${view.id}`,
+            label: view.name,
+            to: accountScopedRoute('contacts_segments_dashboard', {
+              id: view.id,
+            }),
+          })),
+        },
+        {
+          name: 'Tagged With',
+          icon: 'i-lucide-tag',
+          label: t('SIDEBAR.TAGGED_WITH'),
+          children: labels.value.map(label => ({
+            name: `${label.title}-${label.id}`,
+            label: label.title,
+            icon: h('span', {
+              class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`,
+              style: { backgroundColor: label.color },
+            }),
+            to: accountScopedRoute('contacts_labels_dashboard', {
+              label: label.title,
+            }),
+          })),
+        },
+      ],
+    },
+    {
+      name: 'Reports',
+      label: t('SIDEBAR.REPORTS'),
+      icon: 'i-lucide-chart-spline',
+      children: [
+        {
+          name: 'Report Overview',
+          label: t('SIDEBAR.REPORTS_OVERVIEW'),
+          to: accountScopedRoute('account_overview_reports'),
+        },
+        {
+          name: 'Report Conversation',
+          label: t('SIDEBAR.REPORTS_CONVERSATION'),
+          to: accountScopedRoute('conversation_reports'),
+        },
+        {
+          name: 'Reports CSAT',
+          label: t('SIDEBAR.CSAT'),
+          to: accountScopedRoute('csat_reports'),
+        },
+        {
+          name: 'Reports Bot',
+          label: t('SIDEBAR.REPORTS_BOT'),
+          to: accountScopedRoute('bot_reports'),
+        },
+        {
+          name: 'Reports Agent',
+          label: t('SIDEBAR.REPORTS_AGENT'),
+          to: accountScopedRoute('agent_reports'),
+        },
+        {
+          name: 'Reports Label',
+          label: t('SIDEBAR.REPORTS_LABEL'),
+          to: accountScopedRoute('label_reports'),
+        },
+        {
+          name: 'Reports Inbox',
+          label: t('SIDEBAR.REPORTS_INBOX'),
+          to: accountScopedRoute('inbox_reports'),
+        },
+        {
+          name: 'Reports Team',
+          label: t('SIDEBAR.REPORTS_TEAM'),
+          to: accountScopedRoute('team_reports'),
+        },
+        {
+          name: 'Reports SLA',
+          label: t('SIDEBAR.REPORTS_SLA'),
+          to: accountScopedRoute('sla_reports'),
+        },
+      ],
+    },
+    {
+      name: 'Campaigns',
+      label: t('SIDEBAR.CAMPAIGNS'),
+      icon: 'i-lucide-megaphone',
+      children: [
+        {
+          name: 'Ongoing',
+          label: t('SIDEBAR.ONGOING'),
+          to: accountScopedRoute('ongoing_campaigns'),
+        },
+        {
+          name: 'One-off',
+          label: t('SIDEBAR.ONE_OFF'),
+          to: accountScopedRoute('one_off'),
+        },
+      ],
+    },
+    {
+      name: 'Portals',
+      label: t('SIDEBAR.HELP_CENTER.TITLE'),
+      icon: 'i-lucide-library-big',
+      to: accountScopedRoute('default_portal_articles'),
+      activeOn: [
+        'all_locale_categories',
+        'default_portal_articles',
+        'edit_article',
+        'edit_category',
+        'edit_portal_customization',
+        'edit_portal_information',
+        'edit_portal_locales',
+        'list_all_locale_articles',
+        'list_all_locale_categories',
+        'list_all_portals',
+        'list_archived_articles',
+        'list_draft_articles',
+        'list_mine_articles',
+        'new_article',
+        'new_category_in_locale',
+        'new_portal_information',
+        'portalSlug',
+        'portal_customization',
+        'portal_finish',
+        'show_category',
+        'show_category_articles',
+      ],
+    },
+    {
+      name: 'Settings',
+      label: t('SIDEBAR.SETTINGS'),
+      icon: 'i-lucide-bolt',
+      children: [
+        {
+          name: 'Settings Account Settings',
+          label: t('SIDEBAR.ACCOUNT_SETTINGS'),
+          icon: 'i-lucide-briefcase',
+          to: accountScopedRoute('general_settings_index'),
+        },
+        {
+          name: 'Settings Agents',
+          label: t('SIDEBAR.AGENTS'),
+          icon: 'i-lucide-square-user',
+          to: accountScopedRoute('agent_list'),
+        },
+        {
+          name: 'Settings Teams',
+          label: t('SIDEBAR.TEAMS'),
+          icon: 'i-lucide-users',
+          to: accountScopedRoute('settings_teams_list'),
+        },
+        {
+          name: 'Settings Inboxes',
+          label: t('SIDEBAR.INBOXES'),
+          icon: 'i-lucide-inbox',
+          to: accountScopedRoute('settings_inbox_list'),
+        },
+        {
+          name: 'Settings Labels',
+          label: t('SIDEBAR.LABELS'),
+          icon: 'i-lucide-tags',
+          to: accountScopedRoute('labels_list'),
+        },
+        {
+          name: 'Settings Custom Attributes',
+          label: t('SIDEBAR.CUSTOM_ATTRIBUTES'),
+          icon: 'i-lucide-code',
+          to: accountScopedRoute('attributes_list'),
+        },
+        {
+          name: 'Settings Automation',
+          label: t('SIDEBAR.AUTOMATION'),
+          icon: 'i-lucide-workflow',
+          to: accountScopedRoute('automation_list'),
+        },
+        {
+          name: 'Settings Agent Bots',
+          label: t('SIDEBAR.AGENT_BOTS'),
+          icon: 'i-lucide-bot',
+          to: accountScopedRoute('agent_bots'),
+        },
+        {
+          name: 'Settings Macros',
+          label: t('SIDEBAR.MACROS'),
+          icon: 'i-lucide-toy-brick',
+          to: accountScopedRoute('macros_wrapper'),
+        },
+        {
+          name: 'Settings Canned Responses',
+          label: t('SIDEBAR.CANNED_RESPONSES'),
+          icon: 'i-lucide-message-square-quote',
+          to: accountScopedRoute('canned_list'),
+        },
+        {
+          name: 'Settings Integrations',
+          label: t('SIDEBAR.INTEGRATIONS'),
+          icon: 'i-lucide-blocks',
+          to: accountScopedRoute('settings_applications'),
+        },
+        {
+          name: 'Settings Audit Logs',
+          label: t('SIDEBAR.AUDIT_LOGS'),
+          icon: 'i-lucide-briefcase',
+          to: accountScopedRoute('auditlogs_list'),
+        },
+        {
+          name: 'Settings Custom Roles',
+          label: t('SIDEBAR.CUSTOM_ROLES'),
+          icon: 'i-lucide-shield-plus',
+          to: accountScopedRoute('custom_roles_list'),
+        },
+        {
+          name: 'Settings Sla',
+          label: t('SIDEBAR.SLA'),
+          icon: 'i-lucide-clock-alert',
+          to: accountScopedRoute('sla_list'),
+        },
+        {
+          name: 'Settings Billing',
+          label: t('SIDEBAR.BILLING'),
+          icon: 'i-lucide-credit-card',
+          to: accountScopedRoute('billing_settings_index'),
+        },
+      ],
+    },
+  ];
+});
+</script>
+
+<template>
+  <aside
+    class="w-[200px] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pt-2 pb-1"
+  >
+    <section class="grid gap-2 mt-2 mb-4">
+      <div class="flex gap-2 px-2 items-center min-w-0">
+        <div class="size-6 grid place-content-center flex-shrink-0">
+          <Logo />
+        </div>
+        <div class="w-px h-3 bg-n-strong flex-shrink-0" />
+        <SidebarAccountSwitcher
+          class="-mx-1 flex-grow min-w-0"
+          @show-create-account-modal="emit('showCreateAccountModal')"
+        />
+      </div>
+      <div class="gap-2 flex px-2">
+        <RouterLink
+          :to="{ name: 'search' }"
+          class="rounded-lg py-1 flex items-center gap-2 px-2 border-n-weak border bg-n-solid-3 dark:bg-n-black/30 w-full"
+        >
+          <span class="i-lucide-search size-4 text-n-slate-11 flex-shrink-0" />
+          <span class="flex-grow text-left">
+            {{ t('COMBOBOX.SEARCH_PLACEHOLDER') }}
+          </span>
+          <span
+            class="tracking-wide select-none pointer-events-none text-n-slate-10 hidden"
+          >
+            {{ searchShortcut }}
+          </span>
+        </RouterLink>
+        <button
+          v-if="enableNewConversation"
+          class="rounded-lg py-1 flex items-center gap-2 px-2 border-n-weak border bg-n-solid-3 w-full"
+        >
+          <span
+            class="i-lucide-square-pen size-4 text-n-slate-11 flex-shrink-0"
+          />
+        </button>
+      </div>
+    </section>
+    <nav class="grid gap-2 overflow-y-scroll no-scrollbar px-2 flex-grow pb-5">
+      <ul class="flex flex-col gap-2 list-none m-0">
+        <SidebarGroup
+          v-for="item in menuItems"
+          :key="item.name"
+          v-bind="item"
+        />
+      </ul>
+    </nav>
+    <section
+      class="p-1 border-t border-n-strong shadow-[0px_-2px_4px_0px_rgba(27,28,29,0.02)] flex-shrink-0 flex justify-between gap-2 items-center"
+    >
+      <SidebarProfileMenu
+        @open-key-shortcut-modal="emit('openKeyShortcutModal')"
+      />
+      <div v-if="false" class="flex items-center">
+        <div class="w-px h-3 bg-n-strong flex-shrink-0" />
+        <SidebarNotificationBell
+          @open-notification-panel="emit('openNotificationPanel')"
+        />
+      </div>
+    </section>
+  </aside>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue b/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
new file mode 100644
index 000000000..881034b4c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
@@ -0,0 +1,110 @@
+<script setup>
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useToggle } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import ButtonNext from 'next/button/Button.vue';
+import Icon from 'next/icon/Icon.vue';
+
+const emit = defineEmits(['showCreateAccountModal']);
+
+const { t } = useI18n();
+const { accountId, currentAccount } = useAccount();
+const currentUser = useMapGetter('getCurrentUser');
+const globalConfig = useMapGetter('globalConfig/get');
+const [showDropdown, toggleDropdown] = useToggle(false);
+
+const close = () => {
+  if (showDropdown.value) {
+    toggleDropdown(false);
+  }
+};
+
+const onChangeAccount = newId => {
+  const accountUrl = `/app/accounts/${newId}/dashboard`;
+  window.location.href = accountUrl;
+};
+
+const emitNewAccount = () => {
+  close();
+  emit('showCreateAccountModal');
+};
+</script>
+
+<template>
+  <div class="relative z-20">
+    <button
+      id="sidebar-account-switcher"
+      :data-account-id="accountId"
+      aria-haspopup="listbox"
+      aria-controls="account-options"
+      class="flex items-center gap-2 justify-between w-full rounded-lg hover:bg-n-alpha-1 px-2"
+      :class="{ 'bg-n-alpha-1': showDropdown }"
+      @click="toggleDropdown()"
+    >
+      <span
+        class="text-sm font-medium leading-5 text-n-slate-12 truncate"
+        aria-live="polite"
+      >
+        {{ currentAccount.name }}
+      </span>
+
+      <span
+        aria-hidden="true"
+        class="i-lucide-chevron-down size-4 text-n-slate-10 flex-shrink-0"
+      />
+    </button>
+    <div v-if="showDropdown" v-on-clickaway="close" class="absolute top-8 z-50">
+      <div
+        class="w-72 text-sm block bg-n-solid-1 border border-n-weak rounded-xl shadow-sm"
+      >
+        <div
+          class="px-4 pt-3 pb-2 leading-4 font-medium tracking-[0.2px] text-n-slate-10 text-xs"
+        >
+          {{ t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
+        </div>
+        <div class="px-1 gap-1 grid">
+          <button
+            v-for="account in currentUser.accounts"
+            :id="`account-${account.id}`"
+            :key="account.id"
+            class="flex w-full hover:bg-n-alpha-1 space-x-4"
+            @click="onChangeAccount(account.id)"
+          >
+            <div
+              :for="account.name"
+              class="text-left rtl:text-right flex gap-2"
+            >
+              <span class="text-n-slate-12">
+                {{ account.name }}
+              </span>
+              <span class="text-n-slate-11 capitalize">
+                {{
+                  account.custom_role_id
+                    ? account.custom_role.name
+                    : account.role
+                }}
+              </span>
+            </div>
+            <Icon
+              v-show="account.id === accountId"
+              icon="i-lucide-check"
+              class="text-n-teal-11 size-5"
+            />
+          </button>
+        </div>
+        <div class="px-2 mt-2 pb-2">
+          <ButtonNext
+            v-if="globalConfig.createNewAccountFromDashboard"
+            variant="secondary"
+            class="w-full"
+            size="sm"
+            @click="emitNewAccount"
+          >
+            {{ t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
+          </ButtonNext>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
new file mode 100644
index 000000000..ecc189bea
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
@@ -0,0 +1,146 @@
+<script setup>
+import { computed, watch, ref } from 'vue';
+import { useSidebarContext } from './provider';
+import { useRoute } from 'vue-router';
+import Policy from 'dashboard/components/policy.vue';
+import SidebarGroupHeader from './SidebarGroupHeader.vue';
+import SidebarGroupLeaf from './SidebarGroupLeaf.vue';
+import SidebarSubGroup from './SidebarSubGroup.vue';
+import SidebarGroupEmptyLeaf from './SidebarGroupEmptyLeaf.vue';
+
+const props = defineProps({
+  name: { type: String, required: true },
+  label: { type: String, required: true },
+  icon: { type: [String, Object, Function], default: null },
+  to: { type: Object, default: null },
+  activeOn: { type: Array, default: () => [] },
+  children: { type: Array, default: undefined },
+});
+
+const {
+  expandedItem,
+  setExpandedItem,
+  resolvePath,
+  resolvePermissions,
+  resolveFeatureFlag,
+  isAllowed,
+} = useSidebarContext();
+
+const parentEl = ref(null);
+
+const locateLastChild = () => {
+  parentEl.value?.querySelectorAll('.child-item').forEach((child, index) => {
+    if (index === parentEl.value.querySelectorAll('.child-item').length - 1) {
+      child.classList.add('last-child-item');
+    }
+  });
+};
+
+const navigableChildren = computed(() => {
+  return props.children?.flatMap(child => child.children || child) || [];
+});
+
+const route = useRoute();
+
+const isExpanded = computed(() => expandedItem.value === props.name);
+const isExpandable = computed(() => props.children);
+const hasChildren = computed(
+  () => Array.isArray(props.children) && props.children.length > 0
+);
+
+const accessibleItems = computed(() => {
+  if (!hasChildren.value) return [];
+  return props.children.filter(child => isAllowed(child.to));
+});
+
+const hasAccessibleItems = computed(() => {
+  // default true so that rendering is not blocked
+  if (!hasChildren.value) return true;
+
+  return accessibleItems.value.length > 0;
+});
+
+const isActive = computed(() => {
+  if (props.to) {
+    if (route.path === resolvePath(props.to)) return true;
+
+    return props.activeOn.includes(route.name);
+  }
+
+  return false;
+});
+
+// We could use the RouterLink isActive too, but our routes are not always
+// nested correctly, so we need to check the active state ourselves
+// TODO: Audit the routes and fix the nesting and remove this
+const activeChild = computed(() => {
+  const pathSame = navigableChildren.value.find(
+    child => child.to && route.path === resolvePath(child.to)
+  );
+  if (pathSame) return pathSame;
+
+  const pathSatrtsWith = navigableChildren.value.find(
+    child => child.to && route.path.startsWith(resolvePath(child.to))
+  );
+  if (pathSatrtsWith) return pathSatrtsWith;
+
+  return navigableChildren.value.find(child =>
+    child.activeOn?.includes(route.name)
+  );
+});
+
+const hasActiveChild = computed(() => {
+  return activeChild.value !== undefined;
+});
+
+watch(expandedItem, locateLastChild, {
+  immediate: true,
+});
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <Policy
+    v-if="hasAccessibleItems"
+    :permissions="resolvePermissions(to)"
+    :feature-flag="resolveFeatureFlag(to)"
+    as="li"
+    class="text-sm cursor-pointer select-none gap-1 grid"
+  >
+    <SidebarGroupHeader
+      :icon
+      :name
+      :label
+      :to
+      :is-active="isActive"
+      :has-active-child="hasActiveChild"
+      :expandable="hasChildren"
+      :is-expanded="isExpanded"
+      @toggle="setExpandedItem(name)"
+    />
+    <ul
+      v-if="hasChildren"
+      v-show="isExpanded || hasActiveChild"
+      ref="parentEl"
+      class="list-none m-0 grid sidebar-group-children"
+    >
+      <template v-for="child in children" :key="child.name">
+        <SidebarSubGroup
+          v-if="child.children"
+          v-bind="child"
+          :is-expanded="isExpanded"
+          :active-child="activeChild"
+        />
+        <SidebarGroupLeaf
+          v-else
+          v-show="isExpanded || activeChild?.name === child.name"
+          v-bind="child"
+          :active="activeChild?.name === child.name"
+        />
+      </template>
+    </ul>
+    <ul v-else-if="isExpandable && isExpanded">
+      <SidebarGroupEmptyLeaf />
+    </ul>
+  </Policy>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupEmptyLeaf.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupEmptyLeaf.vue
new file mode 100644
index 000000000..dd4128dfe
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupEmptyLeaf.vue
@@ -0,0 +1,13 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <li
+    class="py-1 pl-3 text-n-slate-10 border rounded-lg border-dashed text-center border-n-alpha-2 text-xs h-8 grid place-content-center select-none pointer-events-none"
+  >
+    <slot>{{ t('SIDEBAR.NO_ITEMS') }}</slot>
+  </li>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
new file mode 100644
index 000000000..289ec73a4
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
@@ -0,0 +1,42 @@
+<script setup>
+import Icon from 'next/icon/Icon.vue';
+
+defineProps({
+  to: { type: [Object, String], default: '' },
+  label: { type: String, default: '' },
+  icon: { type: [String, Object], default: '' },
+  expandable: { type: Boolean, default: false },
+  isExpanded: { type: Boolean, default: false },
+  isActive: { type: Boolean, default: false },
+  hasActiveChild: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['toggle']);
+</script>
+
+<template>
+  <component
+    :is="to ? 'router-link' : 'div'"
+    class="flex items-center gap-2 px-2 py-1.5 rounded-lg h-8"
+    role="button"
+    :to="to"
+    :title="label"
+    :class="{
+      'text-n-blue bg-n-alpha-2 font-medium': isActive && !hasActiveChild,
+      'text-n-slate-12 font-medium': hasActiveChild,
+      'text-n-slate-11 hover:bg-n-alpha-2': !isActive && !hasActiveChild,
+    }"
+    @click.stop="emit('toggle')"
+  >
+    <Icon v-if="icon" :icon="icon" class="size-4" />
+    <span class="text-sm font-medium leading-5 flex-grow">
+      {{ label }}
+    </span>
+    <span
+      v-if="expandable"
+      v-show="isExpanded"
+      class="i-lucide-chevron-up size-3"
+      @click.stop="emit('toggle')"
+    />
+  </component>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
new file mode 100644
index 000000000..13c893fa5
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
@@ -0,0 +1,92 @@
+<script setup>
+import { isVNode, computed } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+import Policy from 'dashboard/components/policy.vue';
+import { useSidebarContext } from './provider';
+
+const props = defineProps({
+  label: { type: String, required: true },
+  to: { type: [String, Object], required: true },
+  icon: { type: [String, Object], default: null },
+  active: { type: Boolean, default: false },
+  component: { type: Function, default: null },
+});
+
+const { resolvePermissions, resolveFeatureFlag } = useSidebarContext();
+
+const shouldRenderComponent = computed(() => {
+  return typeof props.component === 'function' || isVNode(props.component);
+});
+</script>
+
+<template>
+  <Policy
+    :permissions="resolvePermissions(to)"
+    :feature-flag="resolveFeatureFlag(to)"
+    as="li"
+    class="py-0.5 ltr:pl-3 rtl:pr-3 rtl:mr-3 ltr:ml-3 relative text-n-slate-11 child-item before:bg-n-slate-4 after:bg-transparent after:border-n-slate-4 before:left-0 rtl:before:right-0"
+  >
+    <component
+      :is="to ? 'router-link' : 'div'"
+      :to="to"
+      :title="label"
+      class="flex h-8 items-center gap-2 px-2 py-1 rounded-lg max-w-[151px] hover:bg-gradient-to-r from-transparent via-n-slate-3/70 to-n-slate-3/70 group"
+      :class="{
+        'text-n-blue bg-n-alpha-2 active': active,
+      }"
+    >
+      <component
+        :is="component"
+        v-if="shouldRenderComponent"
+        :label
+        :icon
+        :active
+      />
+      <template v-else>
+        <Icon v-if="icon" :icon="icon" class="size-4 inline-block" />
+        <div class="flex-1 truncate min-w-0">{{ label }}</div>
+      </template>
+    </component>
+  </Policy>
+</template>
+
+<style scoped>
+.child-item::before {
+  content: '';
+  position: absolute;
+  width: 0.125rem;
+  /* 0.5px */
+  height: 100%;
+}
+
+.child-item:first-child::before {
+  border-radius: 4px 4px 0 0;
+}
+
+.last-child-item::before {
+  height: 20%;
+}
+
+.last-child-item::after {
+  content: '';
+  position: absolute;
+  width: 10px;
+  height: 12px;
+  bottom: calc(50% - 2px);
+  border-bottom-width: 0.125rem;
+  border-left-width: 0.125rem;
+  border-right-width: 0px;
+  border-top-width: 0px;
+  border-radius: 0 0 0 4px;
+  left: 0;
+}
+
+.app-rtl--wrapper .last-child-item::after {
+  right: 0;
+  border-bottom-width: 0.125rem;
+  border-right-width: 0.125rem;
+  border-left-width: 0px;
+  border-top-width: 0px;
+  border-radius: 0 0 4px 0px;
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupSeparator.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupSeparator.vue
new file mode 100644
index 000000000..ddc92a2b3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupSeparator.vue
@@ -0,0 +1,25 @@
+<script setup>
+import Icon from 'next/icon/Icon.vue';
+
+defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <div
+    class="flex items-center gap-2 px-2 py-1.5 rounded-lg h-8 text-n-slate-10 select-none pointer-events-none"
+  >
+    <Icon v-if="icon" :icon="icon" class="size-4" />
+    <span class="text-sm font-medium leading-5 flex-grow">
+      {{ label }}
+    </span>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarNotificationBell.vue b/app/javascript/dashboard/components-next/sidebar/SidebarNotificationBell.vue
new file mode 100644
index 000000000..94f3dd6bd
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarNotificationBell.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store';
+
+const emit = defineEmits(['openNotificationPanel']);
+
+const notificationMetadata = useMapGetter('notifications/getMeta');
+const route = useRoute();
+const unreadCount = computed(() => {
+  if (!notificationMetadata.value.unreadCount) {
+    return '';
+  }
+
+  return notificationMetadata.value.unreadCount < 100
+    ? `${notificationMetadata.value.unreadCount}`
+    : '99+';
+});
+
+function openNotificationPanel() {
+  if (route.name !== 'notifications_index') {
+    emit('openNotificationPanel');
+  }
+}
+</script>
+
+<template>
+  <button
+    class="size-8 rounded-lg hover:bg-n-alpha-1 flex-shrink-0 grid place-content-center relative"
+    @click="openNotificationPanel"
+  >
+    <span class="i-lucide-bell size-4" />
+    <span
+      v-if="unreadCount"
+      class="min-h-2 min-w-2 p-0.5 px-1 bg-n-ruby-9 rounded-lg absolute -top-1 -right-1.5 grid place-items-center text-[9px] leading-none text-n-ruby-3"
+    >
+      {{ unreadCount }}
+    </span>
+  </button>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
new file mode 100644
index 000000000..ae88ebe69
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
@@ -0,0 +1,146 @@
+<script setup>
+import { computed } from 'vue';
+import Auth from 'dashboard/api/auth';
+import { useRouter } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
+import Avatar from 'next/avatar/Avatar.vue';
+import Icon from 'next/icon/Icon.vue';
+import SidebarProfileMenuStatus from './SidebarProfileMenuStatus.vue';
+
+const emit = defineEmits(['close', 'openKeyShortcutModal']);
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const { t } = useI18n();
+const router = useRouter();
+
+const globalConfig = useMapGetter('globalConfig/get');
+const currentUser = useMapGetter('getCurrentUser');
+const currentUserAvailability = useMapGetter('getCurrentUserAvailability');
+const [showProfileMenu, toggleProfileMenu] = useToggle(false);
+
+const closeMenu = () => {
+  if (showProfileMenu.value) {
+    emit('close');
+    toggleProfileMenu(false);
+  }
+};
+
+const menuItems = computed(() => {
+  return [
+    {
+      show: !!globalConfig.value.chatwootInboxToken,
+      label: t('SIDEBAR_ITEMS.CONTACT_SUPPORT'),
+      icon: 'i-lucide-life-buoy',
+      click: () => {
+        closeMenu();
+        window.$chatwoot.toggle();
+      },
+    },
+    {
+      show: true,
+      label: t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS'),
+      icon: 'i-lucide-keyboard',
+      click: () => {
+        closeMenu();
+        emit('openKeyShortcutModal');
+      },
+    },
+    {
+      show: true,
+      label: t('SIDEBAR_ITEMS.PROFILE_SETTINGS'),
+      icon: 'i-lucide-user-pen',
+      click: () => {
+        closeMenu();
+        router.push({ name: 'profile_settings_index' });
+      },
+    },
+    {
+      show: true,
+      label: t('SIDEBAR_ITEMS.APPEARANCE'),
+      icon: 'i-lucide-swatch-book',
+      click: () => {
+        closeMenu();
+        const ninja = document.querySelector('ninja-keys');
+        ninja.open({ parent: 'appearance_settings' });
+      },
+    },
+    {
+      show: currentUser.value.type === 'SuperAdmin',
+      label: t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE'),
+      icon: 'i-lucide-castle',
+      link: '/super_admin',
+      target: '_blank',
+    },
+    {
+      show: true,
+      label: t('SIDEBAR_ITEMS.LOGOUT'),
+      icon: 'i-lucide-log-out',
+      click: Auth.logout,
+    },
+  ];
+});
+
+const allowedMenuItems = computed(() => {
+  return menuItems.value.filter(item => item.show);
+});
+</script>
+
+<template>
+  <div class="relative z-20 w-full min-w-0">
+    <button
+      class="flex gap-2 items-center rounded-lg cursor-pointer text-left w-full hover:bg-n-alpha-1 p-1"
+      v-bind="$attrs"
+      :class="{
+        'bg-n-alpha-1': showProfileMenu,
+      }"
+      @click="toggleProfileMenu"
+    >
+      <Avatar
+        :size="32"
+        :name="currentUser.available_name"
+        :src="currentUser.avatar_url"
+        :status="currentUserAvailability"
+        class="flex-shrink-0"
+        rounded-full
+      />
+      <div class="min-w-0">
+        <div class="text-n-slate-12 text-sm leading-4 font-medium truncate">
+          {{ currentUser.available_name }}
+        </div>
+        <div class="text-n-slate-11 text-xs truncate">
+          {{ currentUser.email }}
+        </div>
+      </div>
+    </button>
+    <div
+      v-if="showProfileMenu"
+      v-on-clickaway="closeMenu"
+      class="absolute left-0 bottom-12 z-50"
+    >
+      <div
+        class="w-72 min-h-32 bg-n-solid-1 border border-n-weak rounded-xl shadow-sm"
+      >
+        <SidebarProfileMenuStatus />
+        <div class="border-t border-n-strong mx-2 my-0" />
+        <ul class="list-none m-0 grid gap-1 p-1 text-n-slate-12">
+          <li v-for="item in allowedMenuItems" :key="item.label" class="m-0">
+            <component
+              :is="item.link ? 'a' : 'button'"
+              v-bind="item.link ? { target: item.target, href: item.link } : {}"
+              class="text-left hover:bg-n-alpha-1 px-2 py-1.5 w-full flex items-center gap-2"
+              @click="item.click"
+            >
+              <Icon :icon="item.icon" class="size-4" />
+              {{ item.label }}
+            </component>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
new file mode 100644
index 000000000..9642e4103
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
@@ -0,0 +1,119 @@
+<script setup>
+import { computed } from 'vue';
+import { useMapGetter, useStore } from 'dashboard/composables/store';
+import wootConstants from 'dashboard/constants/globals';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+
+import Icon from 'next/icon/Icon.vue';
+
+const { t } = useI18n();
+const store = useStore();
+const currentUserAvailability = useMapGetter('getCurrentUserAvailability');
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const currentUserAutoOffline = useMapGetter('getCurrentUserAutoOffline');
+
+const { AVAILABILITY_STATUS_KEYS } = wootConstants;
+const statusList = computed(() => {
+  return [
+    t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUS.ONLINE'),
+    t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUS.BUSY'),
+    t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUS.OFFLINE'),
+  ];
+});
+
+const availabilityStatuses = computed(() => {
+  return statusList.value.map((statusLabel, index) => ({
+    label: statusLabel,
+    value: AVAILABILITY_STATUS_KEYS[index],
+    active: currentUserAvailability.value === AVAILABILITY_STATUS_KEYS[index],
+  }));
+});
+
+function changeAvailabilityStatus(availability) {
+  try {
+    store.dispatch('updateAvailability', {
+      availability,
+      account_id: currentAccountId.value,
+    });
+  } catch (error) {
+    useAlert(t('PROFILE_SETTINGS.FORM.AVAILABILITY.SET_AVAILABILITY_ERROR'));
+  }
+}
+
+function updateAutoOffline(autoOffline) {
+  store.dispatch('updateAutoOffline', {
+    accountId: currentAccountId.value,
+    autoOffline,
+  });
+}
+</script>
+
+<template>
+  <div class="pt-2 text-n-slate-12">
+    <span
+      class="px-3 leading-4 font-medium tracking-[0.2px] text-n-slate-10 text-xs"
+    >
+      {{ t('SIDEBAR.SET_AVAILABILITY_TITLE') }}
+    </span>
+    <ul class="list-none m-0 grid gap-1 p-1">
+      <li
+        v-for="status in availabilityStatuses"
+        :key="status.value"
+        class="flex items-baseline"
+      >
+        <button
+          class="text-left rtl:text-right hover:bg-n-alpha-1 px-2 py-1.5 w-full flex items-center gap-2"
+          :class="{
+            'pointer-events-none bg-n-amber-10/10': status.active,
+            'bg-n-teal-3': status.active && status.value === 'online',
+            'bg-n-amber-3': status.active && status.value === 'busy',
+            'bg-n-slate-3': status.active && status.value === 'offline',
+          }"
+          @click="changeAvailabilityStatus(status.value)"
+        >
+          <div
+            class="rounded-full w-2.5 h-2.5"
+            :class="{
+              'bg-n-teal-10': status.value === 'online',
+              'bg-n-amber-10': status.value === 'busy',
+              'bg-n-slate-10': status.value === 'offline',
+            }"
+          />
+          <span class="flex-grow">{{ status.label }}</span>
+          <Icon
+            v-if="status.active"
+            icon="i-lucide-check"
+            class="size-4 flex-shrink-0"
+            :class="{
+              'text-n-teal-11': status.value === 'online',
+              'text-n-amber-11': status.value === 'busy',
+              'text-n-slate-11': status.value === 'offline',
+            }"
+          />
+        </button>
+      </li>
+    </ul>
+  </div>
+  <div class="border-t border-n-strong mx-2 my-0" />
+  <ul class="list-none m-0 grid gap-1 p-1">
+    <li class="px-2 py-1.5 flex items-start w-full gap-2">
+      <div class="h-5 flex items-center flex-shrink-0">
+        <Icon icon="i-lucide-info" class="size-4" />
+      </div>
+      <div class="flex-grow">
+        <div class="h-5 leading-none flex place-items-center text-n-slate-12">
+          {{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}
+        </div>
+        <div class="text-xs leading-tight text-n-slate-10 mt-1">
+          {{ t('SIDEBAR.SET_AUTO_OFFLINE.INFO_SHORT') }}
+        </div>
+      </div>
+      <woot-switch
+        class="flex-shrink-0"
+        :model-value="currentUserAutoOffline"
+        @input="updateAutoOffline"
+      />
+    </li>
+  </ul>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue b/app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue
new file mode 100644
index 000000000..8c7f5c3a7
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue
@@ -0,0 +1,114 @@
+<script setup>
+import { computed, ref } from 'vue';
+import SidebarGroupLeaf from './SidebarGroupLeaf.vue';
+import SidebarGroupSeparator from './SidebarGroupSeparator.vue';
+import SidebarGroupEmptyLeaf from './SidebarGroupEmptyLeaf.vue';
+
+import { useSidebarContext } from './provider';
+import { useEventListener } from '@vueuse/core';
+
+const props = defineProps({
+  isExpanded: { type: Boolean, default: false },
+  label: { type: String, required: true },
+  icon: { type: [Object, String], required: true },
+  children: { type: Array, default: undefined },
+  activeChild: { type: Object, default: undefined },
+});
+
+const { isAllowed } = useSidebarContext();
+const scrollableContainer = ref(null);
+
+const accessibleItems = computed(() =>
+  props.children.filter(child => isAllowed(child.to))
+);
+
+const hasAccessibleItems = computed(() => {
+  if (props.children.length === 0) {
+    // cases like segment, folder and labels where users can create new items
+    return true;
+  }
+
+  return accessibleItems.value.length > 0;
+});
+
+const isScrollable = computed(() => {
+  return accessibleItems.value.length > 7;
+});
+
+const scrollEnd = ref(false);
+
+// set scrollEnd to true when the scroll reaches the end
+useEventListener(scrollableContainer, 'scroll', () => {
+  const { scrollHeight, scrollTop, clientHeight } = scrollableContainer.value;
+  scrollEnd.value = scrollHeight - scrollTop === clientHeight;
+});
+</script>
+
+<template>
+  <SidebarGroupSeparator
+    v-if="hasAccessibleItems"
+    v-show="isExpanded"
+    :label
+    :icon
+    class="my-1"
+  />
+  <ul class="m-0 list-none relative group">
+    <!-- Each element has h-8, which is 32px, we will show 7 items with one hidden at the end,
+    which is 14rem. Then we add 16px so that we have some text visible from the next item  -->
+    <div
+      ref="scrollableContainer"
+      :class="{
+        'max-h-[calc(14rem+16px)] overflow-y-scroll no-scrollbar': isScrollable,
+      }"
+    >
+      <template v-if="children.length">
+        <SidebarGroupLeaf
+          v-for="child in children"
+          v-show="isExpanded || activeChild?.name === child.name"
+          v-bind="child"
+          :key="child.name"
+          :active="activeChild?.name === child.name"
+        />
+      </template>
+      <SidebarGroupEmptyLeaf v-else v-show="isExpanded" class="ml-3 rtl:mr-3" />
+    </div>
+    <div
+      v-if="isScrollable && isExpanded"
+      v-show="!scrollEnd"
+      class="absolute bg-gradient-to-t from-n-solid-2 w-full h-12 to-transparent -bottom-1 pointer-events-none flex items-end justify-end px-2 animate-fade-in-up"
+    >
+      <svg
+        width="16"
+        height="24"
+        viewBox="0 0 16 24"
+        fill="none"
+        class="text-n-slate-9 opacity-50 group-hover:opacity-100"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4 4L8 8L12 4"
+          stroke="currentColor"
+          opacity="0.5"
+          stroke-width="1.33333"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M4 10L8 14L12 10"
+          stroke="currentColor"
+          opacity="0.75"
+          stroke-width="1.33333"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M4 16L8 20L12 16"
+          stroke="currentColor"
+          stroke-width="1.33333"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  </ul>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/provider.js b/app/javascript/dashboard/components-next/sidebar/provider.js
new file mode 100644
index 000000000..d6571dcd9
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/provider.js
@@ -0,0 +1,49 @@
+import { inject, provide } from 'vue';
+import { usePolicy } from 'dashboard/composables/usePolicy';
+import { useRouter } from 'vue-router';
+
+const SidebarControl = Symbol('SidebarControl');
+
+export function useSidebarContext() {
+  const context = inject(SidebarControl, null);
+  if (context === null) {
+    throw new Error(`Component is missing a parent <Sidebar /> component.`);
+  }
+
+  const router = useRouter();
+  const { checkFeatureAllowed, checkPermissions } = usePolicy();
+
+  const resolvePath = to => {
+    if (to) return router.resolve(to)?.path || '/';
+    return '/';
+  };
+
+  const resolvePermissions = to => {
+    if (to) return router.resolve(to)?.meta?.permissions ?? [];
+    return [];
+  };
+
+  const resolveFeatureFlag = to => {
+    if (to) return router.resolve(to)?.meta?.featureFlag || '';
+    return '';
+  };
+
+  const isAllowed = to => {
+    const permissions = resolvePermissions(to);
+    const featureFlag = resolveFeatureFlag(to);
+
+    return checkPermissions(permissions) && checkFeatureAllowed(featureFlag);
+  };
+
+  return {
+    ...context,
+    resolvePath,
+    resolvePermissions,
+    resolveFeatureFlag,
+    isAllowed,
+  };
+}
+
+export function provideSidebarContext(context) {
+  provide(SidebarControl, context);
+}
diff --git a/app/javascript/dashboard/components-next/sidebar/useSidebarKeyboardShortcuts.js b/app/javascript/dashboard/components-next/sidebar/useSidebarKeyboardShortcuts.js
new file mode 100644
index 000000000..0ef050369
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/useSidebarKeyboardShortcuts.js
@@ -0,0 +1,39 @@
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import { useRoute, useRouter } from 'vue-router';
+
+export function useSidebarKeyboardShortcuts(toggleShortcutModalFn) {
+  const route = useRoute();
+  const router = useRouter();
+
+  const isCurrentRouteSameAsNavigation = routeName => {
+    return route.name === routeName;
+  };
+
+  const navigateToRoute = routeName => {
+    if (!isCurrentRouteSameAsNavigation(routeName)) {
+      router.push({ name: routeName });
+    }
+  };
+  const keyboardEvents = {
+    '$mod+Slash': {
+      action: () => toggleShortcutModalFn(true),
+    },
+    '$mod+Escape': {
+      action: () => toggleShortcutModalFn(false),
+    },
+    'Alt+KeyC': {
+      action: () => navigateToRoute('home'),
+    },
+    'Alt+KeyV': {
+      action: () => navigateToRoute('contacts_dashboard'),
+    },
+    'Alt+KeyR': {
+      action: () => navigateToRoute('account_overview_reports'),
+    },
+    'Alt+KeyS': {
+      action: () => navigateToRoute('agent_list'),
+    },
+  };
+
+  return useKeyboardEvents(keyboardEvents);
+}
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 267b9e422..3ebefebe6 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -109,7 +109,7 @@ const chatListLoading = useMapGetter('getChatListLoadingStatus');
 const activeInbox = useMapGetter('getSelectedInbox');
 const conversationStats = useMapGetter('conversationStats/getStats');
 const appliedFilters = useMapGetter('getAppliedConversationFilters');
-const folders = useMapGetter('customViews/getCustomViews');
+const folders = useMapGetter('customViews/getConversationCustomViews');
 const agentList = useMapGetter('agents/getAgents');
 const teamsList = useMapGetter('teams/getTeams');
 const inboxesList = useMapGetter('inboxes/getInboxes');
diff --git a/app/javascript/dashboard/components/SidemenuIcon.vue b/app/javascript/dashboard/components/SidemenuIcon.vue
index a81a3fedb..59ef4c4c2 100644
--- a/app/javascript/dashboard/components/SidemenuIcon.vue
+++ b/app/javascript/dashboard/components/SidemenuIcon.vue
@@ -1,5 +1,7 @@
 <script>
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { mapGetters } from 'vuex';
 import { emitter } from 'shared/helpers/mitt';
 
 export default {
@@ -9,6 +11,18 @@ export default {
       default: 'small',
     },
   },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+    }),
+    hasNextSidebar() {
+      return this.isFeatureEnabledonAccount(
+        this.accountId,
+        FEATURE_FLAGS.CHATWOOT_V4
+      );
+    },
+  },
   methods: {
     onMenuItemClick() {
       emitter.emit(BUS_EVENTS.TOGGLE_SIDEMENU);
@@ -17,8 +31,10 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <woot-button
+    v-if="!hasNextSidebar"
     :size="size"
     variant="clear"
     color-scheme="secondary"
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index 81539c1bb..4d6bfbb58 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -104,6 +104,9 @@ export default {
       return '';
     },
     customViews() {
+      if (!this.activeCustomView) {
+        return [];
+      }
       return this.$store.getters['customViews/getCustomViewsByFilterType'](
         this.activeCustomView
       );
diff --git a/app/javascript/dashboard/components/policy.vue b/app/javascript/dashboard/components/policy.vue
index e9ad2de1f..bafe4caa7 100644
--- a/app/javascript/dashboard/components/policy.vue
+++ b/app/javascript/dashboard/components/policy.vue
@@ -1,32 +1,31 @@
 <script setup>
-import { useStoreGetters } from 'dashboard/composables/store';
+import { usePolicy } from 'dashboard/composables/usePolicy';
 import { computed } from 'vue';
-import {
-  getUserPermissions,
-  hasPermissions,
-} from '../helper/permissionsHelper';
 
 const props = defineProps({
+  as: {
+    type: String,
+    default: 'div',
+  },
   permissions: {
     type: Array,
     required: true,
   },
+  featureFlag: {
+    type: String,
+    default: null,
+  },
 });
 
-const getters = useStoreGetters();
-const user = computed(() => getters.getCurrentUser.value);
-const accountId = computed(() => getters.getCurrentAccountId.value);
-const userPermissions = computed(() => {
-  return getUserPermissions(user.value, accountId.value);
-});
-const hasPermission = computed(() => {
-  return hasPermissions(props.permissions, userPermissions.value);
-});
+const { checkFeatureAllowed, checkPermissions } = usePolicy();
+
+const isFeatureAllowed = computed(() => checkFeatureAllowed(props.featureFlag));
+const hasPermission = computed(() => checkPermissions(props.permissions));
 </script>
 
 <!-- eslint-disable vue/no-root-v-if -->
 <template>
-  <div v-if="hasPermission">
+  <component :is="as" v-if="isFeatureAllowed && hasPermission">
     <slot />
-  </div>
+  </component>
 </template>
diff --git a/app/javascript/dashboard/components/specs/SidemenuIcon.spec.js b/app/javascript/dashboard/components/specs/SidemenuIcon.spec.js
index 5029eed48..59cf8f4ec 100644
--- a/app/javascript/dashboard/components/specs/SidemenuIcon.spec.js
+++ b/app/javascript/dashboard/components/specs/SidemenuIcon.spec.js
@@ -1,10 +1,29 @@
 import { shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
 import SidemenuIcon from '../SidemenuIcon.vue';
 
+const store = createStore({
+  modules: {
+    auth: {
+      namespaced: false,
+      getters: {
+        getCurrentAccountId: () => 1,
+      },
+    },
+    accounts: {
+      namespaced: true,
+      getters: {
+        isFeatureEnabledonAccount: () => () => false,
+      },
+    },
+  },
+});
+
 describe('SidemenuIcon', () => {
   test('matches snapshot', () => {
     const wrapper = shallowMount(SidemenuIcon, {
       stubs: { WootButton: { template: '<button><slot /></button>' } },
+      global: { plugins: [store] },
     });
     expect(wrapper.vm).toBeTruthy();
     expect(wrapper.element).toMatchSnapshot();
diff --git a/app/javascript/dashboard/composables/spec/useAccount.spec.js b/app/javascript/dashboard/composables/spec/useAccount.spec.js
index 5523c6d91..bb4bfdee3 100644
--- a/app/javascript/dashboard/composables/spec/useAccount.spec.js
+++ b/app/javascript/dashboard/composables/spec/useAccount.spec.js
@@ -1,6 +1,38 @@
+import { defineComponent, h } from 'vue';
+import { createStore } from 'vuex';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { useAccount } from '../useAccount';
 import { useRoute } from 'vue-router';
+import { mount } from '@vue/test-utils';
+
+const store = createStore({
+  modules: {
+    auth: {
+      namespaced: false,
+      getters: {
+        getCurrentAccountId: () => 1,
+        getCurrentUser: () => ({
+          accounts: [
+            { id: 1, name: 'Chatwoot', role: 'administrator' },
+            { id: 2, name: 'GitX', role: 'agent' },
+          ],
+        }),
+      },
+    },
+    accounts: {
+      namespaced: true,
+      getters: {
+        getAccount: () => id => ({ id, name: 'Chatwoot' }),
+      },
+    },
+  },
+});
+
+const mountParams = {
+  global: {
+    plugins: [store],
+  },
+};
 
 vi.mock('vue-router');
 
@@ -8,31 +40,77 @@ describe('useAccount', () => {
   beforeEach(() => {
     useRoute.mockReturnValue({
       params: {
-        accountId: 123,
+        accountId: '123',
       },
     });
   });
 
+  const createComponent = () =>
+    defineComponent({
+      setup() {
+        return useAccount();
+      },
+      render() {
+        return h('div'); // Dummy render to satisfy mount
+      },
+    });
+
   it('returns accountId as a computed property', () => {
-    const { accountId } = useAccount();
-    expect(accountId.value).toBe(123);
+    const wrapper = mount(createComponent(), mountParams);
+    const { accountId } = wrapper.vm;
+    expect(accountId).toBe(123);
   });
 
   it('generates account-scoped URLs correctly', () => {
-    const { accountScopedUrl } = useAccount();
+    const wrapper = mount(createComponent(), mountParams);
+    const { accountScopedUrl } = wrapper.vm;
     const result = accountScopedUrl('settings/inbox/new');
     expect(result).toBe('/app/accounts/123/settings/inbox/new');
   });
 
   it('handles URLs with leading slash', () => {
-    const { accountScopedUrl } = useAccount();
+    const wrapper = mount(createComponent(), mountParams);
+    const { accountScopedUrl } = wrapper.vm;
     const result = accountScopedUrl('users');
-    expect(result).toBe('/app/accounts/123/users');
+    expect(result).toBe('/app/accounts/123/users'); // Ensures no double slashes
   });
 
   it('handles empty URL', () => {
-    const { accountScopedUrl } = useAccount();
+    const wrapper = mount(createComponent(), mountParams);
+    const { accountScopedUrl } = wrapper.vm;
     const result = accountScopedUrl('');
     expect(result).toBe('/app/accounts/123/');
   });
+
+  it('returns current account based on accountId', () => {
+    const wrapper = mount(createComponent(), mountParams);
+    const { currentAccount } = wrapper.vm;
+    expect(currentAccount).toEqual({ id: 123, name: 'Chatwoot' });
+  });
+
+  it('returns an account-scoped route', () => {
+    const wrapper = mount(createComponent(), mountParams);
+    const { accountScopedRoute } = wrapper.vm;
+    const result = accountScopedRoute('accountDetail', { userId: 456 });
+    expect(result).toEqual({
+      name: 'accountDetail',
+      params: { accountId: 123, userId: 456 },
+    });
+  });
+
+  it('returns route with correct params', () => {
+    const wrapper = mount(createComponent(), mountParams);
+    const { route } = wrapper.vm;
+    expect(route.params).toEqual({ accountId: '123' });
+  });
+
+  it('handles non-numeric accountId gracefully', async () => {
+    useRoute.mockReturnValueOnce({
+      params: { accountId: 'abc' },
+    });
+
+    const wrapper = mount(createComponent(), mountParams);
+    const { accountId } = wrapper.vm;
+    expect(accountId).toBeNaN(); // Handles invalid numeric conversion
+  });
 });
diff --git a/app/javascript/dashboard/composables/useAccount.js b/app/javascript/dashboard/composables/useAccount.js
index 0cc0663b4..08e291e39 100644
--- a/app/javascript/dashboard/composables/useAccount.js
+++ b/app/javascript/dashboard/composables/useAccount.js
@@ -1,5 +1,6 @@
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
+import { useMapGetter } from './store';
 
 /**
  * Composable for account-related operations.
@@ -11,11 +12,13 @@ export function useAccount() {
    * @type {import('vue').ComputedRef<number>}
    */
   const route = useRoute();
-
+  const getAccountFn = useMapGetter('accounts/getAccount');
   const accountId = computed(() => {
     return Number(route.params.accountId);
   });
 
+  const currentAccount = computed(() => getAccountFn.value(accountId.value));
+
   /**
    * Generates an account-scoped URL.
    * @param {string} url - The URL to be scoped to the account.
@@ -25,8 +28,18 @@ export function useAccount() {
     return `/app/accounts/${accountId.value}/${url}`;
   };
 
+  const accountScopedRoute = (name, params) => {
+    return {
+      name,
+      params: { accountId: accountId.value, ...params },
+    };
+  };
+
   return {
     accountId,
+    route,
+    currentAccount,
     accountScopedUrl,
+    accountScopedRoute,
   };
 }
diff --git a/app/javascript/dashboard/composables/usePolicy.js b/app/javascript/dashboard/composables/usePolicy.js
new file mode 100644
index 000000000..0653003ec
--- /dev/null
+++ b/app/javascript/dashboard/composables/usePolicy.js
@@ -0,0 +1,29 @@
+import { useMapGetter } from 'dashboard/composables/store';
+import { useAccount } from 'dashboard/composables/useAccount';
+import {
+  getUserPermissions,
+  hasPermissions,
+} from 'dashboard/helper/permissionsHelper';
+
+export function usePolicy() {
+  const user = useMapGetter('getCurrentUser');
+  const isFeatureEnabled = useMapGetter('accounts/isFeatureEnabledonAccount');
+  const { accountId } = useAccount();
+
+  const getUserPermissionsForAccount = () => {
+    return getUserPermissions(user.value, accountId.value);
+  };
+
+  const checkFeatureAllowed = featureFlag => {
+    if (!featureFlag) return true;
+    return isFeatureEnabled.value(accountId.value, featureFlag);
+  };
+
+  const checkPermissions = requiredPermissions => {
+    if (!requiredPermissions || !requiredPermissions.length) return true;
+    const userPermissions = getUserPermissionsForAccount();
+    return hasPermissions(requiredPermissions, userPermissions);
+  };
+
+  return { checkFeatureAllowed, checkPermissions };
+}
diff --git a/app/javascript/dashboard/composables/utils/useKbd.js b/app/javascript/dashboard/composables/utils/useKbd.js
new file mode 100644
index 000000000..800c270c4
--- /dev/null
+++ b/app/javascript/dashboard/composables/utils/useKbd.js
@@ -0,0 +1,22 @@
+import { computed } from 'vue';
+
+export function useKbd(keys) {
+  const keySymbols = {
+    $mod: navigator.platform.includes('Mac') ? '⌘' : 'Ctrl',
+    shift: '⇧',
+    alt: '⌥',
+    ctrl: 'Ctrl',
+    cmd: '⌘',
+    option: '⌥',
+    enter: '↩',
+    tab: '⇥',
+    esc: '⎋',
+  };
+
+  return computed(() => {
+    return keys
+      .map(key => keySymbols[key.toLowerCase()] || key)
+      .join('')
+      .toUpperCase();
+  });
+}
diff --git a/app/javascript/dashboard/featureFlags.js b/app/javascript/dashboard/featureFlags.js
index 73ea57f06..4417ef164 100644
--- a/app/javascript/dashboard/featureFlags.js
+++ b/app/javascript/dashboard/featureFlags.js
@@ -32,4 +32,5 @@ export const FEATURE_FLAGS = {
   LINEAR: 'linear_integration',
   CAPTAIN: 'captain_integration',
   CUSTOM_ROLES: 'custom_roles',
+  CHATWOOT_V4: 'chatwoot_v4',
 };
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index eb007916a..1cdf82357 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -227,6 +227,7 @@
     }
   },
   "SIDEBAR": {
+    "NO_ITEMS": "No items",
     "CURRENTLY_VIEWING_ACCOUNT": "Currently viewing:",
     "SWITCH": "Switch",
     "INBOX_VIEW": "Inbox View",
@@ -291,9 +292,11 @@
       "SETTINGS": "Settings",
       "CATEGORY_EMPTY_MESSAGE": "No categories found"
     },
+    "CHANNELS": "Channels",
     "SET_AUTO_OFFLINE": {
       "TEXT": "Mark offline automatically",
-      "INFO_TEXT": "Let the system automatically mark you offline when you aren't using the app or dashboard."
+      "INFO_TEXT": "Let the system automatically mark you offline when you aren't using the app or dashboard.",
+      "INFO_SHORT": "Automatically mark offline when you aren't using the app."
     },
     "DOCS": "Read docs"
   },
diff --git a/app/javascript/dashboard/routes/dashboard/Dashboard.vue b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
index fa8df4c89..3b3199afe 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -1,14 +1,22 @@
 <script>
+import { mapGetters } from 'vuex';
 import { defineAsyncComponent } from 'vue';
+
+import NextSidebar from 'next/sidebar/Sidebar.vue';
 import Sidebar from '../../components/layout/Sidebar.vue';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
 import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal.vue';
 import AddAccountModal from 'dashboard/components/layout/sidebarComponents/AddAccountModal.vue';
 import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector.vue';
 import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel.vue';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
+
 import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useAccount } from 'dashboard/composables/useAccount';
+
 import wootConstants from 'dashboard/constants/globals';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+
 const CommandBar = defineAsyncComponent(
   () => import('./commands/commandbar.vue')
 );
@@ -16,6 +24,7 @@ import { emitter } from 'shared/helpers/mitt';
 
 export default {
   components: {
+    NextSidebar,
     Sidebar,
     CommandBar,
     WootKeyShortcutModal,
@@ -26,10 +35,12 @@ export default {
   },
   setup() {
     const { uiSettings, updateUISettings } = useUISettings();
+    const { accountId } = useAccount();
 
     return {
       uiSettings,
       updateUISettings,
+      accountId,
     };
   },
   data() {
@@ -44,6 +55,9 @@ export default {
     };
   },
   computed: {
+    ...mapGetters({
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+    }),
     currentRoute() {
       return ' ';
     },
@@ -62,6 +76,12 @@ export default {
         this.uiSettings;
       return showSecondarySidebar;
     },
+    showNextSidebar() {
+      return this.isFeatureEnabledonAccount(
+        this.accountId,
+        FEATURE_FLAGS.CHATWOOT_V4
+      );
+    },
   },
   watch: {
     displayLayoutType() {
@@ -155,7 +175,16 @@ export default {
 
 <template>
   <div class="flex flex-wrap app-wrapper dark:text-slate-300">
+    <NextSidebar
+      v-if="showNextSidebar"
+      @toggle-account-modal="toggleAccountModal"
+      @open-notification-panel="openNotificationPanel"
+      @open-key-shortcut-modal="toggleKeyShortcutModal"
+      @close-key-shortcut-modal="closeKeyShortcutModal"
+      @show-create-account-modal="openCreateAccountModal"
+    />
     <Sidebar
+      v-else
       :route="currentRoute"
       :has-banner="hasBanner"
       :show-secondary-sidebar="isSidebarOpen"
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
index bc08c8bfa..8fb292414 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
@@ -71,7 +71,7 @@ export default {
       records: 'contacts/getContacts',
       uiFlags: 'contacts/getUIFlags',
       meta: 'contacts/getMeta',
-      segments: 'customViews/getCustomViews',
+      segments: 'customViews/getContactCustomViews',
       getAppliedContactFilters: 'contacts/getAppliedContactFilters',
     }),
     showEmptySearchResult() {
diff --git a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
index aa6ce24ff..d75836aba 100644
--- a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
@@ -7,6 +7,8 @@ import { routes as inboxRoutes } from './inbox/routes';
 import { frontendURL } from '../../helper/URLHelper';
 import helpcenterRoutes from './helpcenter/helpcenter.routes';
 
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+
 const AppContainer = () => import('./Dashboard.vue');
 const Captain = () => import('./Captain.vue');
 const Suspended = () => import('./suspended/Index.vue');
@@ -24,6 +26,7 @@ export default {
           component: Captain,
           meta: {
             permissions: ['administrator', 'agent'],
+            featureFlag: FEATURE_FLAGS.CAPTAIN,
           },
         },
         ...inboxRoutes,
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
index 2ece1a755..46e5c144b 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
@@ -2,6 +2,7 @@
 import { defineAsyncComponent } from 'vue';
 import { mapGetters } from 'vuex';
 import UpgradePage from './UpgradePage.vue';
+import NextSidebar from 'next/sidebar/Sidebar.vue';
 import { frontendURL } from '../../../../helper/URLHelper';
 import Sidebar from 'dashboard/components/layout/Sidebar.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
@@ -22,6 +23,7 @@ const CommandBar = defineAsyncComponent(
 
 export default {
   components: {
+    NextSidebar,
     AccountSelector,
     AddCategory,
     CommandBar,
@@ -68,6 +70,12 @@ export default {
         FEATURE_FLAGS.HELP_CENTER
       );
     },
+    showNextSidebar() {
+      return this.isFeatureEnabledonAccount(
+        this.accountId,
+        FEATURE_FLAGS.CHATWOOT_V4
+      );
+    },
     isSidebarOpen() {
       const { show_help_center_secondary_sidebar: showSecondarySidebar } =
         this.uiSettings;
@@ -289,7 +297,15 @@ export default {
 
 <template>
   <div class="flex flex-grow-0 w-full h-full min-h-0 app-wrapper">
+    <NextSidebar
+      v-if="showNextSidebar"
+      @toggle-account-modal="toggleAccountModal"
+      @open-notification-panel="openNotificationPanel"
+      @open-key-shortcut-modal="toggleKeyShortcutModal"
+      @close-key-shortcut-modal="closeKeyShortcutModal"
+    />
     <Sidebar
+      v-else
       :route="currentRoute"
       @toggle-account-modal="toggleAccountModal"
       @open-notification-panel="openNotificationPanel"
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/routes.js b/app/javascript/dashboard/routes/dashboard/inbox/routes.js
index b55c33d73..44b265c5c 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/inbox/routes.js
@@ -7,6 +7,8 @@ import {
   CONVERSATION_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
 
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+
 export const routes = [
   {
     path: frontendURL('accounts/:accountId/inbox-view'),
@@ -18,6 +20,7 @@ export const routes = [
         component: InboxEmptyStateView,
         meta: {
           permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
+          featureFlag: FEATURE_FLAGS.INBOX_VIEW,
         },
       },
       {
@@ -26,6 +29,7 @@ export const routes = [
         component: InboxDetailView,
         meta: {
           permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
+          featureFlag: FEATURE_FLAGS.INBOX_VIEW,
         },
       },
     ],
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
index 6be49c595..3949bf7a5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
@@ -1,4 +1,5 @@
 import { frontendURL } from '../../../../helper/URLHelper';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 const SettingsContent = () => import('../Wrapper.vue');
 const Index = () => import('./Index.vue');
@@ -90,6 +91,7 @@ export default {
           name: 'bot_reports',
           meta: {
             permissions: ['administrator', 'report_manage'],
+            featureFlag: FEATURE_FLAGS.RESPONSE_BOT,
           },
           component: BotReports,
         },
@@ -184,6 +186,7 @@ export default {
           name: 'sla_reports',
           meta: {
             permissions: ['administrator', 'report_manage'],
+            featureFlag: FEATURE_FLAGS.SLA,
           },
           component: SLAReports,
         },
diff --git a/app/javascript/dashboard/store/modules/customViews.js b/app/javascript/dashboard/store/modules/customViews.js
index c5c073af2..9c7f6f0ff 100644
--- a/app/javascript/dashboard/store/modules/customViews.js
+++ b/app/javascript/dashboard/store/modules/customViews.js
@@ -2,8 +2,26 @@ import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import types from '../mutation-types';
 import CustomViewsAPI from '../../api/customViews';
 
+const VIEW_TYPES = {
+  CONVERSATION: 'conversation',
+  CONTACT: 'contact',
+};
+
+// use to normalize the filter type
+const FILTER_KEYS = {
+  0: VIEW_TYPES.CONVERSATION,
+  1: VIEW_TYPES.CONTACT,
+  [VIEW_TYPES.CONVERSATION]: VIEW_TYPES.CONVERSATION,
+  [VIEW_TYPES.CONTACT]: VIEW_TYPES.CONTACT,
+};
+
 export const state = {
-  records: [],
+  [VIEW_TYPES.CONVERSATION]: {
+    records: [],
+  },
+  [VIEW_TYPES.CONTACT]: {
+    records: [],
+  },
   uiFlags: {
     isFetching: false,
     isCreating: false,
@@ -16,11 +34,15 @@ export const getters = {
   getUIFlags(_state) {
     return _state.uiFlags;
   },
-  getCustomViews(_state) {
-    return _state.records;
+  getCustomViewsByFilterType: _state => key => {
+    const filterType = FILTER_KEYS[key];
+    return _state[filterType].records;
   },
-  getCustomViewsByFilterType: _state => filterType => {
-    return _state.records.filter(record => record.filter_type === filterType);
+  getConversationCustomViews(_state) {
+    return _state[VIEW_TYPES.CONVERSATION].records;
+  },
+  getContactCustomViews(_state) {
+    return _state[VIEW_TYPES.CONTACT].records;
   },
   getActiveConversationFolder(_state) {
     return _state.activeConversationFolder;
@@ -33,7 +55,7 @@ export const actions = {
     try {
       const response =
         await CustomViewsAPI.getCustomViewsByFilterType(filterType);
-      commit(types.SET_CUSTOM_VIEW, response.data);
+      commit(types.SET_CUSTOM_VIEW, { data: response.data, filterType });
     } catch (error) {
       // Ignore error
     } finally {
@@ -44,7 +66,10 @@ export const actions = {
     commit(types.SET_CUSTOM_VIEW_UI_FLAG, { isCreating: true });
     try {
       const response = await CustomViewsAPI.create(obj);
-      commit(types.ADD_CUSTOM_VIEW, response.data);
+      commit(types.ADD_CUSTOM_VIEW, {
+        data: response.data,
+        filterType: FILTER_KEYS[obj.filter_type],
+      });
     } catch (error) {
       const errorMessage = error?.response?.data?.message;
       throw new Error(errorMessage);
@@ -56,7 +81,10 @@ export const actions = {
     commit(types.SET_CUSTOM_VIEW_UI_FLAG, { isCreating: true });
     try {
       const response = await CustomViewsAPI.update(obj.id, obj);
-      commit(types.UPDATE_CUSTOM_VIEW, response.data);
+      commit(types.UPDATE_CUSTOM_VIEW, {
+        data: response.data,
+        filterType: FILTER_KEYS[obj.filter_type],
+      });
     } catch (error) {
       const errorMessage = error?.response?.data?.message;
       throw new Error(errorMessage);
@@ -68,7 +96,7 @@ export const actions = {
     commit(types.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: true });
     try {
       await CustomViewsAPI.deleteCustomViews(id, filterType);
-      commit(types.DELETE_CUSTOM_VIEW, id);
+      commit(types.DELETE_CUSTOM_VIEW, { data: id, filterType });
     } catch (error) {
       throw new Error(error);
     } finally {
@@ -88,10 +116,18 @@ export const mutations = {
     };
   },
 
-  [types.ADD_CUSTOM_VIEW]: MutationHelpers.create,
-  [types.SET_CUSTOM_VIEW]: MutationHelpers.set,
-  [types.UPDATE_CUSTOM_VIEW]: MutationHelpers.update,
-  [types.DELETE_CUSTOM_VIEW]: MutationHelpers.destroy,
+  [types.ADD_CUSTOM_VIEW]: (_state, { data, filterType }) => {
+    MutationHelpers.create(_state[filterType], data);
+  },
+  [types.SET_CUSTOM_VIEW]: (_state, { data, filterType }) => {
+    MutationHelpers.set(_state[filterType], data);
+  },
+  [types.UPDATE_CUSTOM_VIEW]: (_state, { data, filterType }) => {
+    MutationHelpers.update(_state[filterType], data);
+  },
+  [types.DELETE_CUSTOM_VIEW]: (_state, { data, filterType }) => {
+    MutationHelpers.destroy(_state[filterType], data);
+  },
 
   [types.SET_ACTIVE_CONVERSATION_FOLDER](_state, folder) {
     _state.activeConversationFolder = folder;
diff --git a/app/javascript/dashboard/store/modules/specs/customViews/actions.spec.js b/app/javascript/dashboard/store/modules/specs/customViews/actions.spec.js
index ff04206c6..f303eb5b6 100644
--- a/app/javascript/dashboard/store/modules/specs/customViews/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/customViews/actions.spec.js
@@ -11,10 +11,13 @@ describe('#actions', () => {
   describe('#get', () => {
     it('sends correct actions if API is success', async () => {
       axios.get.mockResolvedValue({ data: customViewList });
-      await actions.get({ commit });
+      await actions.get({ commit }, 'conversation');
       expect(commit.mock.calls).toEqual([
         [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isFetching: true }],
-        [types.default.SET_CUSTOM_VIEW, customViewList],
+        [
+          types.default.SET_CUSTOM_VIEW,
+          { data: customViewList, filterType: 'conversation' },
+        ],
         [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isFetching: false }],
       ]);
     });
@@ -30,11 +33,15 @@ describe('#actions', () => {
 
   describe('#create', () => {
     it('sends correct actions if API is success', async () => {
-      axios.post.mockResolvedValue({ data: customViewList[0] });
-      await actions.create({ commit }, customViewList[0]);
+      const firstItem = customViewList[0];
+      axios.post.mockResolvedValue({ data: firstItem });
+      await actions.create({ commit }, firstItem);
       expect(commit.mock.calls).toEqual([
         [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isCreating: true }],
-        [types.default.ADD_CUSTOM_VIEW, customViewList[0]],
+        [
+          types.default.ADD_CUSTOM_VIEW,
+          { data: firstItem, filterType: 'conversation' },
+        ],
         [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isCreating: false }],
       ]);
     });
@@ -54,7 +61,7 @@ describe('#actions', () => {
       await actions.delete({ commit }, { id: 1, filterType: 'contact' });
       expect(commit.mock.calls).toEqual([
         [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: true }],
-        [types.default.DELETE_CUSTOM_VIEW, 1],
+        [types.default.DELETE_CUSTOM_VIEW, { data: 1, filterType: 'contact' }],
         [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: false }],
       ]);
     });
@@ -70,15 +77,15 @@ describe('#actions', () => {
 
   describe('#update', () => {
     it('sends correct actions if API is success', async () => {
-      axios.patch.mockResolvedValue({ data: updateCustomViewList[0] });
-      await actions.update(
-        { commit },
-        updateCustomViewList[0].id,
-        updateCustomViewList[0]
-      );
+      const item = updateCustomViewList[0];
+      axios.patch.mockResolvedValue({ data: item });
+      await actions.update({ commit }, item);
       expect(commit.mock.calls).toEqual([
         [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isCreating: true }],
-        [types.default.UPDATE_CUSTOM_VIEW, updateCustomViewList[0]],
+        [
+          types.default.UPDATE_CUSTOM_VIEW,
+          { data: item, filterType: 'conversation' },
+        ],
         [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isCreating: false }],
       ]);
     });
diff --git a/app/javascript/dashboard/store/modules/specs/customViews/fixtures.js b/app/javascript/dashboard/store/modules/specs/customViews/fixtures.js
index 3cd57478e..c244467ed 100644
--- a/app/javascript/dashboard/store/modules/specs/customViews/fixtures.js
+++ b/app/javascript/dashboard/store/modules/specs/customViews/fixtures.js
@@ -1,3 +1,20 @@
+export const contactViewList = [
+  {
+    name: 'Custom view 1',
+    filter_type: 1,
+    query: {
+      payload: [
+        {
+          attribute_key: 'name',
+          filter_operator: 'equal_to',
+          values: ['john doe'],
+          query_operator: null,
+        },
+      ],
+    },
+  },
+];
+
 export const customViewList = [
   {
     name: 'Custom view',
@@ -21,14 +38,14 @@ export const customViewList = [
   },
   {
     name: 'Custom view 1',
-    filter_type: 1,
+    filter_type: 0,
     query: {
       payload: [
         {
-          attribute_key: 'name',
+          attribute_key: 'assignee_id',
           filter_operator: 'equal_to',
-          values: ['john doe'],
-          query_operator: null,
+          values: [45],
+          query_operator: 'and',
         },
       ],
     },
diff --git a/app/javascript/dashboard/store/modules/specs/customViews/getters.spec.js b/app/javascript/dashboard/store/modules/specs/customViews/getters.spec.js
index f2c6d5239..709abc7a0 100644
--- a/app/javascript/dashboard/store/modules/specs/customViews/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/customViews/getters.spec.js
@@ -1,49 +1,9 @@
 import { getters } from '../../customViews';
-import { customViewList } from './fixtures';
+import { contactViewList, customViewList } from './fixtures';
 
 describe('#getters', () => {
-  it('getCustomViews', () => {
-    const state = { records: customViewList };
-    expect(getters.getCustomViews(state)).toEqual([
-      {
-        name: 'Custom view',
-        filter_type: 0,
-        query: {
-          payload: [
-            {
-              attribute_key: 'assignee_id',
-              filter_operator: 'equal_to',
-              values: [45],
-              query_operator: 'and',
-            },
-            {
-              attribute_key: 'inbox_id',
-              filter_operator: 'equal_to',
-              values: [144],
-              query_operator: 'and',
-            },
-          ],
-        },
-      },
-      {
-        name: 'Custom view 1',
-        filter_type: 1,
-        query: {
-          payload: [
-            {
-              attribute_key: 'name',
-              filter_operator: 'equal_to',
-              values: ['john doe'],
-              query_operator: null,
-            },
-          ],
-        },
-      },
-    ]);
-  });
-
   it('getCustomViewsByFilterType', () => {
-    const state = { records: customViewList };
+    const state = { contact: { records: contactViewList } };
     expect(getters.getCustomViewsByFilterType(state)(1)).toEqual([
       {
         name: 'Custom view 1',
diff --git a/app/javascript/dashboard/store/modules/specs/customViews/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/customViews/mutations.spec.js
index acf67f396..d46756066 100644
--- a/app/javascript/dashboard/store/modules/specs/customViews/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/customViews/mutations.spec.js
@@ -4,34 +4,122 @@ import { customViewList, updateCustomViewList } from './fixtures';
 
 describe('#mutations', () => {
   describe('#SET_CUSTOM_VIEW', () => {
-    it('set custom view records', () => {
-      const state = { records: [] };
-      mutations[types.SET_CUSTOM_VIEW](state, customViewList);
-      expect(state.records).toEqual(customViewList);
+    it('[Conversation] set custom view records', () => {
+      const state = {
+        records: [],
+        conversation: { records: [] },
+        contact: { records: [] },
+      };
+      mutations[types.SET_CUSTOM_VIEW](state, {
+        data: customViewList,
+        filterType: 'conversation',
+      });
+      expect(state.conversation.records).toEqual(customViewList);
+      expect(state.contact.records).toEqual([]);
+    });
+
+    it('[Contact] set custom view records', () => {
+      const state = {
+        records: [],
+        conversation: { records: [] },
+        contact: { records: [] },
+      };
+      mutations[types.SET_CUSTOM_VIEW](state, {
+        data: customViewList,
+        filterType: 'contact',
+      });
+      expect(state.contact.records).toEqual(customViewList);
+      expect(state.conversation.records).toEqual([]);
     });
   });
 
   describe('#ADD_CUSTOM_VIEW', () => {
-    it('push newly created custom views to the store', () => {
-      const state = { records: [customViewList] };
-      mutations[types.ADD_CUSTOM_VIEW](state, customViewList[0]);
-      expect(state.records).toEqual([customViewList, customViewList[0]]);
+    it('[Conversation] push newly created custom views to the store', () => {
+      const state = {
+        conversation: { records: [customViewList] },
+        contact: { records: [] },
+      };
+      mutations[types.ADD_CUSTOM_VIEW](state, {
+        data: customViewList[0],
+        filterType: 'conversation',
+      });
+      expect(state.conversation.records).toEqual([
+        customViewList,
+        customViewList[0],
+      ]);
+      expect(state.contact.records).toEqual([]);
+    });
+
+    it('[Contact] push newly created custom views to the store', () => {
+      const state = {
+        conversation: { records: [] },
+        contact: { records: [customViewList] },
+      };
+      mutations[types.ADD_CUSTOM_VIEW](state, {
+        data: customViewList[0],
+        filterType: 'contact',
+      });
+      expect(state.contact.records).toEqual([
+        customViewList,
+        customViewList[0],
+      ]);
+      expect(state.conversation.records).toEqual([]);
     });
   });
 
   describe('#DELETE_CUSTOM_VIEW', () => {
-    it('delete custom view record', () => {
-      const state = { records: [customViewList[0]] };
-      mutations[types.DELETE_CUSTOM_VIEW](state, customViewList[0]);
-      expect(state.records).toEqual([customViewList[0]]);
+    it('[Conversation] delete custom view record', () => {
+      const state = {
+        conversation: { records: [customViewList[0]] },
+        contact: { records: [] },
+      };
+      mutations[types.DELETE_CUSTOM_VIEW](state, {
+        data: customViewList[0],
+        filterType: 'conversation',
+      });
+      expect(state.conversation.records).toEqual([customViewList[0]]);
+      expect(state.contact.records).toEqual([]);
+    });
+
+    it('[Contact] delete custom view record', () => {
+      const state = {
+        contact: { records: [customViewList[0]] },
+        conversation: { records: [] },
+      };
+      mutations[types.DELETE_CUSTOM_VIEW](state, {
+        data: customViewList[0],
+        filterType: 'contact',
+      });
+      expect(state.contact.records).toEqual([customViewList[0]]);
+      expect(state.conversation.records).toEqual([]);
     });
   });
 
   describe('#UPDATE_CUSTOM_VIEW', () => {
-    it('update custom view record', () => {
-      const state = { records: [updateCustomViewList[0]] };
-      mutations[types.UPDATE_CUSTOM_VIEW](state, updateCustomViewList[0]);
-      expect(state.records).toEqual(updateCustomViewList);
+    it('[Conversation] update custom view record', () => {
+      const state = {
+        conversation: { records: [updateCustomViewList[0]] },
+        contact: { records: [] },
+      };
+      mutations[types.UPDATE_CUSTOM_VIEW](state, {
+        data: updateCustomViewList[0],
+        filterType: 'conversation',
+      });
+      expect(state.conversation.records).toEqual(updateCustomViewList);
+      expect(state.contact.records).toEqual([]);
+    });
+
+    it('[Contact] update custom view record', () => {
+      const state = {
+        contact: { records: [updateCustomViewList[0]] },
+        conversation: { records: [] },
+      };
+      mutations[types.UPDATE_CUSTOM_VIEW](state, {
+        data: updateCustomViewList[0],
+        filterType: 'contact',
+      });
+      expect(state.contact.records).toEqual(updateCustomViewList);
+      expect(state.conversation.records).toEqual([]);
     });
   });
 
diff --git a/config/features.yml b/config/features.yml
index 4f62694f8..2cc15983c 100644
--- a/config/features.yml
+++ b/config/features.yml
@@ -92,3 +92,5 @@
 - name: custom_roles
   enabled: false
   premium: true
+- name: chatwoot_v4
+  enabled: false
diff --git a/package.json b/package.json
index 554e7594d..18e2b6ecf 100644
--- a/package.json
+++ b/package.json
@@ -100,6 +100,7 @@
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.8.1",
+    "@iconify-json/ri": "^1.2.1",
     "@histoire/plugin-vue": "0.17.15",
     "@iconify-json/logos": "^1.2.0",
     "@iconify-json/lucide": "^1.2.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 54c841785..786b1becb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -222,6 +222,9 @@ importers:
       '@iconify-json/lucide':
         specifier: ^1.2.5
         version: 1.2.5
+      '@iconify-json/ri':
+        specifier: ^1.2.1
+        version: 1.2.1
       '@size-limit/file':
         specifier: ^8.2.4
         version: 8.2.6(size-limit@8.2.6)
@@ -835,6 +838,9 @@ packages:
   '@iconify-json/lucide@1.2.5':
     resolution: {integrity: sha512-ZRw1GRcN5CQ+9BW+yBEFjRNf4pQfsU8gvNVcCY81yVmwKLUegTncGHXjBuspK6HSmsJspOhGBgLqNbHb0dpxfw==}
 
+  '@iconify-json/ri@1.2.1':
+    resolution: {integrity: sha512-xI3+xZHBI+wlhQqd6jRRcLD5K8B8vQNyxcSB43myxNZ/SfXIn7Ny28h0jyPo9e0gT8fGhqx6R5PeLz/UBB8jwQ==}
+
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
@@ -5479,6 +5485,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/ri@1.2.1':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/types@2.0.0': {}
 
   '@iconify/utils@2.1.32':
diff --git a/tailwind.config.js b/tailwind.config.js
index d9ba07687..e973b49a1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,19 @@ const {
   getIconCollections,
 } = require('@egoist/tailwindcss-icons');
 
-module.exports = {
+const defaultSansFonts = [
+  '-apple-system',
+  'system-ui',
+  'BlinkMacSystemFont',
+  '"Segoe UI"',
+  'Roboto',
+  '"Helvetica Neue"',
+  'Tahoma',
+  'Arial',
+  'sans-serif !important',
+];
+
+const tailwindConfig = {
   darkMode: 'class',
   content: [
     './enterprise/app/views/**/*.html.erb',
@@ -21,8 +33,9 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        inter: ['Inter', ...defaultTheme.fontFamily.sans],
-        interDisplay: ['Inter Display', ...defaultTheme.fontFamily.sans],
+        sans: defaultSansFonts,
+        inter: ['Inter', ...defaultSansFonts],
+        interDisplay: ['Inter Display', ...defaultSansFonts],
       },
     },
     screens: {
@@ -58,6 +71,10 @@ module.exports = {
         '90%': { transform: 'translateX(-0.375rem)' },
         '100%': { transform: 'translateX(0)' },
       },
+      'fade-in-up': {
+        '0%': { opacity: 0, transform: 'translateY(0.5rem)' },
+        '100%': { opacity: 1, transform: 'translateY(0)' },
+      },
       'loader-pulse': {
         '0%': { opacity: 0.4 },
         '50%': { opacity: 1 },
@@ -81,6 +98,7 @@ module.exports = {
     animation: {
       ...defaultTheme.animation,
       wiggle: 'wiggle 0.5s ease-in-out',
+      'fade-in-up': 'fade-in-up 0.3s ease-out',
       'loader-pulse': 'loader-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
       'card-select': 'card-select 0.25s ease-in-out',
       shake: 'shake 0.3s ease-in-out 0s 2',
@@ -90,7 +108,20 @@ module.exports = {
     // eslint-disable-next-line
     require('@tailwindcss/typography'),
     iconsPlugin({
-      collections: getIconCollections(['lucide', 'logos']),
+      collections: {
+        woot: {
+          icons: {
+            alert: {
+              body: `<path d="M1.81348 0.9375L1.69727 7.95117H0.302734L0.179688 0.9375H1.81348ZM1 11.1025C0.494141 11.1025 0.0908203 10.7061 0.0976562 10.2207C0.0908203 9.72852 0.494141 9.33203 1 9.33203C1.49219 9.33203 1.89551 9.72852 1.90234 10.2207C1.89551 10.7061 1.49219 11.1025 1 11.1025Z" fill="currentColor" />`,
+              width: 2,
+              height: 12,
+            },
+          },
+        },
+        ...getIconCollections(['lucide', 'logos', 'ri']),
+      },
     }),
   ],
 };
+
+module.exports = tailwindConfig;
diff --git a/vite.config.ts b/vite.config.ts
index 46ab310a8..8af1a9538 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -75,6 +75,7 @@ export default defineConfig({
     alias: {
       vue: 'vue/dist/vue.esm-bundler.js',
       components: path.resolve('./app/javascript/dashboard/components'),
+      next: path.resolve('./app/javascript/dashboard/components-next'),
       v3: path.resolve('./app/javascript/v3'),
       dashboard: path.resolve('./app/javascript/dashboard'),
       helpers: path.resolve('./app/javascript/shared/helpers'),

From a3855a8d1d1973de9746a09f59b486f2f14593e5 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 24 Oct 2024 10:39:36 +0530
Subject: [PATCH 09/39] feat(v4): Update the help center portal design (#10296)

Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../api/v1/accounts/articles_controller.rb    |  30 +-
 .../api/v1/accounts/portals_controller.rb     |  18 +-
 .../api/v1/portals/articles_controller.rb     |   2 +-
 .../dashboard/api/helpCenter/articles.js      |   7 +-
 .../dashboard/components-next/CardLayout.vue  |   2 +-
 .../components-next/EmptyStateLayout.vue      |  10 +-
 .../ArticleCard/ArticleCard.story.vue         |  51 ++-
 .../HelpCenter/ArticleCard/ArticleCard.vue    | 157 +++++---
 .../CategoryCard/CategoryCard.story.vue       |  19 +-
 .../HelpCenter/CategoryCard/CategoryCard.vue  |  72 ++--
 .../EmptyState/Article/ArticleEmptyState.vue  |  90 ++---
 .../Category/CategoryEmptyState.vue           |  49 +++
 .../Category/categoryEmptyStateContent.js     | 142 +++++++
 .../EmptyState/Portal/PortalEmptyState.vue    | 118 ++----
 .../Portal/portalEmptyStateContent.js         | 172 ++++++++
 .../HelpCenter/HelpCenterLayout.vue           |  66 +--
 .../HelpCenter/LocaleCard/LocaleCard.vue      |  86 ++--
 .../ArticleEditor.vue}                        | 126 +++---
 .../ArticleEditorControls.vue                 | 206 ++++++++++
 .../ArticleEditorPage/ArticleEditorHeader.vue | 178 ++++++++
 .../ArticleEditorProperties.vue               | 134 +++++++
 .../ArticlePage/ArticleHeaderControls.vue     | 197 +++++++++
 .../Pages/ArticlePage/ArticleList.vue         | 191 ++++++++-
 .../Pages/ArticlePage/ArticlesPage.vue        | 208 +++++++---
 .../Pages/CategoryPage/CategoriesPage.vue     | 176 ++++----
 .../Pages/CategoryPage/CategoryDialog.vue     | 112 ++++++
 .../Pages/CategoryPage/CategoryForm.vue       | 272 +++++++++++++
 .../CategoryPage/CategoryHeaderControls.vue   | 201 ++++++++++
 .../Pages/CategoryPage/CategoryList.vue       |  21 +-
 .../Pages/CategoryPage/EditCategoryDialog.vue | 112 ++++++
 .../Pages/LocalePage/AddLocaleDialog.vue      | 101 +++++
 .../Pages/LocalePage/LocaleList.vue           |  92 ++++-
 .../Pages/LocalePage/LocalesPage.vue          |  25 +-
 .../AddCustomDomainDialog.vue                 |  74 ++++
 .../ConfirmDeletePortalDialog.vue             |  51 +++
 .../DNSConfigurationDialog.vue                |  79 ++++
 .../PortalSettingsPage/PortalBaseSettings.vue | 320 +++++++++++++++
 .../PortalConfigurationSettings.vue           | 118 ++++++
 .../PortalSettingsPage/PortalSettings.vue     | 215 +++++-----
 .../PortalSwitcher/CreatePortalDialog.vue     | 148 +++++++
 .../PortalSwitcher/PortalSwitcher.vue         | 214 +++++-----
 .../components-next/avatar/Avatar.story.vue   |   4 +-
 .../avatar/EditableAvatar.story.vue           |  36 ++
 .../components-next/avatar/EditableAvatar.vue | 107 +++++
 .../breadcrumb/Breadcrumb.story.vue           |   8 +-
 .../components-next/breadcrumb/Breadcrumb.vue |  57 +--
 .../components-next/button/Button.story.vue   |   4 +-
 .../components-next/button/Button.vue         |  70 ++--
 .../colorpicker/ColorPicker.vue               | 102 +++++
 .../components-next/combobox/ComboBox.vue     | 138 ++++---
 .../components-next/dialog/Dialog.vue         | 122 +++---
 .../dropdown-menu/DropdownMenu.vue            |  34 +-
 .../inline-input/InlineInput.vue              |   9 +-
 .../dashboard/components-next/input/Input.vue |  25 +-
 .../pagination/PaginationFooter.vue           |  14 +-
 .../components-next/sidebar/Sidebar.vue       | 103 +++--
 .../components-next/tabbar/TabBar.vue         |  21 +-
 .../components-next/taginput/TagInput.vue     |  90 +++++
 .../components-next/textarea/TextArea.vue     | 135 ++++++-
 .../components-next/thumbnail/Thumbnail.vue   | 121 ++++++
 .../layout/config/sidebarItems/primaryMenu.js |   4 +-
 .../layout/sidebarComponents/Primary.vue      |   3 +-
 .../sidebarComponents/PrimaryNavItem.vue      |  93 ++++-
 .../widgets/WootWriter/FullEditor.vue         |   8 +-
 app/javascript/dashboard/helper/URLHelper.js  |   8 +
 .../dashboard/helper/portalHelper.js          | 137 +++++++
 .../dashboard/helper/specs/URLHelper.spec.js  |  25 ++
 .../dashboard/i18n/locale/en/helpCenter.json  | 308 +++++++++++++-
 .../dashboard/i18n/locale/en/settings.json    |  11 +-
 .../routes/dashboard/dashboard.routes.js      |   2 +-
 .../helpcenter/components/AddLocale.vue       | 159 --------
 .../helpcenter/components/ArticleEditor.vue   |  71 ----
 .../helpcenter/components/ArticleItem.vue     | 167 --------
 .../ArticleSearch/SearchPopover.vue           |   6 +-
 .../helpcenter/components/ArticleTable.vue    | 168 --------
 .../components/Header/ArticleHeader.vue       | 237 -----------
 .../components/Header/EditArticleHeader.vue   | 252 ------------
 .../components/HelpCenterLayout.vue           | 364 -----------------
 .../components/Layout/SettingsLayout.vue      |  34 --
 .../helpcenter/components/PortalListItem.vue  | 379 ------------------
 .../components/PortalListItemTable.vue        | 147 -------
 .../helpcenter/components/PortalPopover.vue   |  86 ----
 .../components/PortalSettingsBasicForm.vue    | 240 -----------
 .../PortalSettingsCustomizationForm.vue       | 155 -------
 .../helpcenter/components/PortalSwitch.vue    | 175 --------
 .../helpcenter/components/Sidebar/Sidebar.vue |  96 -----
 .../components/Sidebar/SidebarHeader.vue      |  76 ----
 .../dashboard/helpcenter/helpcenter.routes.js | 255 ++++--------
 .../helpcenter/helpers/routeHelper.js         |   2 +-
 .../helpcenter/mixins/portalMixin.js          |  24 --
 .../mixins/specs/portalMixin.spec.js          |  78 ----
 .../pages/HelpCenterPageRouteView.vue         |  76 ++++
 .../pages/PortalsArticlesEditPage.vue         | 109 +++++
 .../pages/PortalsArticlesIndexPage.vue        | 116 ++++++
 .../pages/PortalsArticlesNewPage.vue          |  94 +++++
 .../pages/PortalsCategoriesIndexPage.vue      |  66 +++
 .../helpcenter/pages/PortalsIndexPage.vue     |  76 ++++
 .../pages/PortalsLocalesIndexPage.vue         |  34 ++
 .../helpcenter/pages/PortalsNewPage.vue       |   9 +
 .../pages/PortalsSettingsIndexPage.vue        | 122 ++++++
 .../pages/articles/ArticleSettings.vue        | 277 -------------
 .../pages/articles/DefaultPortalArticles.vue  |  68 ----
 .../helpcenter/pages/articles/EditArticle.vue | 216 ----------
 .../pages/articles/ListAllArticles.vue        | 195 ---------
 .../pages/articles/ListCategoryArticles.vue   |   4 -
 .../helpcenter/pages/articles/NewArticle.vue  | 118 ------
 .../pages/categories/AddCategory.vue          | 199 ---------
 .../pages/categories/CategoryListItem.vue     | 113 ------
 .../pages/categories/EditCategory.vue         | 219 ----------
 .../pages/categories/ListAllCategories.vue    | 159 --------
 .../pages/categories/NameEmojiInput.vue       | 125 ------
 .../pages/categories/NewCategory.vue          |   4 -
 .../pages/categories/ShowCategory.vue         |   4 -
 .../helpcenter/pages/portals/EditPortal.vue   | 107 -----
 .../pages/portals/EditPortalBasic.vue         |  85 ----
 .../pages/portals/EditPortalCustomization.vue |  57 ---
 .../pages/portals/EditPortalLocales.vue       | 142 -------
 .../pages/portals/ListAllPortals.vue          | 105 -----
 .../helpcenter/pages/portals/NewPortal.vue    |  75 ----
 .../pages/portals/PortalCustomization.vue     |  71 ----
 .../pages/portals/PortalDetails.vue           |  70 ----
 .../pages/portals/PortalSettingsFinish.vue    |  31 --
 .../helpcenter/pages/portals/ShowPortal.vue   |   4 -
 .../modules/helpCenterArticles/actions.js     |  24 +-
 .../modules/helpCenterArticles/mutations.js   |  25 +-
 .../helpCenterArticles/specs/action.spec.js   |  21 +-
 .../helpCenterArticles/specs/mutation.spec.js |  36 +-
 .../modules/helpCenterCategories/getters.js   |   1 +
 .../modules/helpCenterCategories/index.js     |   1 +
 .../specs/getters.spec.js                     |   1 -
 .../modules/helpCenterPortals/actions.js      |   6 +
 .../modules/helpCenterPortals/getters.js      |   3 +
 .../store/modules/helpCenterPortals/index.js  |   1 +
 .../modules/helpCenterPortals/mutations.js    |   5 +
 app/javascript/histoire.setup.ts              |   2 +
 .../FluentIcon/dashboard-icons.json           |   8 +-
 app/models/article.rb                         |   6 +-
 .../v1/accounts/articles/index.json.jbuilder  |   8 +-
 .../v1/accounts/portals/_portal.json.jbuilder |   6 +
 package.json                                  |   3 +-
 pnpm-lock.yaml                                |  26 ++
 .../v1/portals/articles_controller_spec.rb    |   7 +
 spec/models/article_spec.rb                   |   2 +-
 theme/colors.js                               |   6 +-
 144 files changed, 6376 insertions(+), 6604 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/EmptyState/Category/CategoryEmptyState.vue
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/EmptyState/Category/categoryEmptyStateContent.js
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/portalEmptyStateContent.js
 rename app/javascript/dashboard/components-next/HelpCenter/Pages/{EditArticlePage/EditArticlePage.vue => ArticleEditorPage/ArticleEditor.vue} (52%)
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/ConfirmDeletePortalDialog.vue
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalConfigurationSettings.vue
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue
 create mode 100644 app/javascript/dashboard/components-next/avatar/EditableAvatar.story.vue
 create mode 100644 app/javascript/dashboard/components-next/avatar/EditableAvatar.vue
 create mode 100644 app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue
 create mode 100644 app/javascript/dashboard/components-next/taginput/TagInput.vue
 create mode 100644 app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/Layout/SettingsLayout.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/mixins/portalMixin.js
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/mixins/specs/portalMixin.spec.js
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesIndexPage.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesNewPage.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsCategoriesIndexPage.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsIndexPage.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsLocalesIndexPage.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsNewPage.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsSettingsIndexPage.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListCategoryArticles.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NewCategory.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ShowCategory.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ShowPortal.vue

diff --git a/app/controllers/api/v1/accounts/articles_controller.rb b/app/controllers/api/v1/accounts/articles_controller.rb
index d164778ac..9148e4386 100644
--- a/app/controllers/api/v1/accounts/articles_controller.rb
+++ b/app/controllers/api/v1/accounts/articles_controller.rb
@@ -6,13 +6,15 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
 
   def index
     @portal_articles = @portal.articles
-    @all_articles = @portal_articles.search(list_params)
-    @articles_count = @all_articles.count
+
+    set_article_count
+
+    @articles = @articles.search(list_params)
 
     @articles = if list_params[:category_slug].present?
-                  @all_articles.order_by_position.page(@current_page)
+                  @articles.order_by_position.page(@current_page)
                 else
-                  @all_articles.order_by_updated_at.page(@current_page)
+                  @articles.order_by_updated_at.page(@current_page)
                 end
   end
 
@@ -43,6 +45,19 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
 
   private
 
+  def set_article_count
+    # Search the params without status and author_id, use this to
+    # compute mine count published draft etc
+    base_search_params = list_params.except(:status, :author_id)
+    @articles = @portal_articles.search(base_search_params)
+
+    @articles_count = @articles.count
+    @mine_articles_count = @articles.search_by_author(Current.user.id).count
+    @published_articles_count = @articles.published.count
+    @draft_articles_count = @articles.draft.count
+    @archived_articles_count = @articles.archived.count
+  end
+
   def fetch_article
     @article = @portal.articles.find(params[:id])
   end
@@ -53,9 +68,10 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
 
   def article_params
     params.require(:article).permit(
-      :title, :slug, :position, :content, :description, :position, :category_id, :author_id, :associated_article_id, :status, meta: [:title,
-                                                                                                                                     :description,
-                                                                                                                                     { tags: [] }]
+      :title, :slug, :position, :content, :description, :position, :category_id, :author_id, :associated_article_id, :status,
+      :locale, meta: [:title,
+                      :description,
+                      { tags: [] }]
     )
   end
 
diff --git a/app/controllers/api/v1/accounts/portals_controller.rb b/app/controllers/api/v1/accounts/portals_controller.rb
index bd8da5549..fe9a03ef5 100644
--- a/app/controllers/api/v1/accounts/portals_controller.rb
+++ b/app/controllers/api/v1/accounts/portals_controller.rb
@@ -20,7 +20,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
   end
 
   def create
-    @portal = Current.account.portals.build(portal_params)
+    @portal = Current.account.portals.build(portal_params.merge(live_chat_widget_params))
     @portal.custom_domain = parsed_custom_domain
     @portal.save!
     process_attached_logo
@@ -28,7 +28,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
 
   def update
     ActiveRecord::Base.transaction do
-      @portal.update!(portal_params) if params[:portal].present?
+      @portal.update!(portal_params.merge(live_chat_widget_params)) if params[:portal].present?
       # @portal.custom_domain = parsed_custom_domain
       process_attached_logo if params[:blob_id].present?
     rescue StandardError => e
@@ -70,11 +70,21 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
 
   def portal_params
     params.require(:portal).permit(
-      :account_id, :color, :custom_domain, :header_text, :homepage_link, :name, :page_title, :slug, :archived, { config: [:default_locale,
-                                                                                                                          { allowed_locales: [] }] }
+      :account_id, :color, :custom_domain, :header_text, :homepage_link,
+      :name, :page_title, :slug, :archived, { config: [:default_locale, { allowed_locales: [] }] }
     )
   end
 
+  def live_chat_widget_params
+    permitted_params = params.permit(:inbox_id)
+    return {} if permitted_params[:inbox_id].blank?
+
+    inbox = Inbox.find(permitted_params[:inbox_id])
+    return {} unless inbox.web_widget?
+
+    { channel_web_widget_id: inbox.channel.id }
+  end
+
   def portal_member_params
     params.require(:portal).permit(:account_id, member_ids: [])
   end
diff --git a/app/controllers/public/api/v1/portals/articles_controller.rb b/app/controllers/public/api/v1/portals/articles_controller.rb
index 2807ae41a..08c62bada 100644
--- a/app/controllers/public/api/v1/portals/articles_controller.rb
+++ b/app/controllers/public/api/v1/portals/articles_controller.rb
@@ -30,7 +30,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
 
   def set_article
     @article = @portal.articles.find_by(slug: permitted_params[:article_slug])
-    @article.increment_view_count
+    @article.increment_view_count if @article.published?
     @parsed_content = render_article_content(@article.content)
   end
 
diff --git a/app/javascript/dashboard/api/helpCenter/articles.js b/app/javascript/dashboard/api/helpCenter/articles.js
index e5847dc1b..727340ed5 100644
--- a/app/javascript/dashboard/api/helpCenter/articles.js
+++ b/app/javascript/dashboard/api/helpCenter/articles.js
@@ -52,12 +52,13 @@ class ArticlesAPI extends PortalsAPI {
   }
 
   createArticle({ portalSlug, articleObj }) {
-    const { content, title, author_id, category_id } = articleObj;
+    const { content, title, authorId, categoryId, locale } = articleObj;
     return axios.post(`${this.url}/${portalSlug}/articles`, {
       content,
       title,
-      author_id,
-      category_id,
+      author_id: authorId,
+      category_id: categoryId,
+      locale,
     });
   }
 
diff --git a/app/javascript/dashboard/components-next/CardLayout.vue b/app/javascript/dashboard/components-next/CardLayout.vue
index 6012512a7..9949ec86b 100644
--- a/app/javascript/dashboard/components-next/CardLayout.vue
+++ b/app/javascript/dashboard/components-next/CardLayout.vue
@@ -7,7 +7,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="relative flex flex-col w-full gap-3 px-6 py-5 group/cardLayout rounded-2xl bg-slate-25 dark:bg-slate-800/50"
+    class="relative flex flex-col w-full gap-3 px-6 py-5 shadow-sm group/cardLayout rounded-2xl bg-n-solid-1"
     @click="handleClick"
   >
     <slot name="header" />
diff --git a/app/javascript/dashboard/components-next/EmptyStateLayout.vue b/app/javascript/dashboard/components-next/EmptyStateLayout.vue
index 3c37e6276..e845ccaf6 100644
--- a/app/javascript/dashboard/components-next/EmptyStateLayout.vue
+++ b/app/javascript/dashboard/components-next/EmptyStateLayout.vue
@@ -13,7 +13,7 @@ defineProps({
 
 <template>
   <section
-    class="relative flex flex-col items-center justify-center w-full h-full min-h-screen p-4 overflow-hidden"
+    class="relative flex flex-col items-center justify-center w-full h-full overflow-hidden"
   >
     <div
       class="relative w-full max-w-[940px] mx-auto overflow-hidden h-full max-h-[448px]"
@@ -24,17 +24,17 @@ defineProps({
         <slot name="empty-state-item" />
       </div>
       <div
-        class="absolute inset-x-0 bottom-0 flex flex-col items-center justify-end w-full h-full pb-9 bg-gradient-to-t from-white dark:from-slate-900 to-transparent font-interDisplay"
+        class="absolute inset-x-0 bottom-0 flex flex-col items-center justify-end w-full h-full pb-20 bg-gradient-to-t from-n-background from-25% dark:from-n-background to-transparent"
       >
         <div class="flex flex-col items-center justify-center gap-6">
-          <div class="flex flex-col items-center justify-center gap-2">
+          <div class="flex flex-col items-center justify-center gap-3">
             <h2
-              class="text-3xl font-medium text-center text-slate-900 dark:text-white"
+              class="text-3xl font-medium text-center text-slate-900 dark:text-white font-interDisplay"
             >
               {{ title }}
             </h2>
             <p
-              class="max-w-lg text-base text-center text-slate-600 dark:text-slate-300"
+              class="max-w-lg text-base text-center text-slate-600 dark:text-slate-300 font-interDisplay tracking-[0.3px]"
             >
               {{ subtitle }}
             </p>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.story.vue b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.story.vue
index 49eece053..be0c41163 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.story.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.story.vue
@@ -3,30 +3,60 @@ import ArticleCard from './ArticleCard.vue';
 
 const articles = [
   {
+    id: 1,
     title: "How to get an SSL certificate for your Help Center's custom domain",
     status: 'draft',
-    updatedAt: '2 days ago',
-    author: 'Michael',
-    category: '⚡️ Marketing',
+    updatedAt: 1729048936,
+    author: {
+      name: 'John',
+      thumbnail: 'https://i.pravatar.cc/300',
+    },
+    category: {
+      title: 'Marketing',
+      slug: 'marketing',
+      icon: '📈',
+    },
     views: 400,
   },
   {
+    id: 2,
     title: 'Setting up your first Help Center portal',
     status: '',
-    updatedAt: '1 week ago',
-    author: 'John',
-    category: '🛠️ Development',
+    updatedAt: 1729048936,
+    author: {
+      name: 'John',
+      thumbnail: 'https://i.pravatar.cc/300',
+    },
+    category: {
+      title: 'Development',
+      slug: 'development',
+      icon: '🛠️',
+    },
     views: 1400,
   },
   {
+    id: 3,
     title: 'Best practices for organizing your Help Center content',
     status: 'archived',
-    updatedAt: '3 days ago',
-    author: 'Fernando',
-    category: '💰 Finance',
+    updatedAt: 1729048936,
+    author: {
+      name: 'Fernando',
+      thumbnail: 'https://i.pravatar.cc/300',
+    },
+    category: {
+      title: 'Finance',
+      slug: 'finance',
+      icon: '💰',
+    },
     views: 4300,
   },
 ];
+
+const category = {
+  name: 'Marketing',
+  slug: 'marketing',
+  icon: '📈',
+};
 </script>
 
 <!-- eslint-disable vue/no-bare-strings-in-template -->
@@ -43,10 +73,11 @@ const articles = [
         class="px-20 py-4 bg-white dark:bg-slate-900"
       >
         <ArticleCard
+          :id="article.id"
           :title="article.title"
           :status="article.status"
           :author="article.author"
-          :category="article.category"
+          :category="category"
           :views="article.views"
           :updated-at="article.updatedAt"
         />
diff --git a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
index b4fde0332..4dbac9993 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
@@ -1,13 +1,25 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { OnClickOutside } from '@vueuse/components';
+import { useI18n } from 'vue-i18n';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+import {
+  ARTICLE_MENU_ITEMS,
+  ARTICLE_MENU_OPTIONS,
+  ARTICLE_STATUSES,
+} from 'dashboard/helper/portalHelper';
 
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 
 const props = defineProps({
+  id: {
+    type: Number,
+    required: true,
+  },
   title: {
     type: String,
     required: true,
@@ -17,11 +29,11 @@ const props = defineProps({
     required: true,
   },
   author: {
-    type: String,
+    type: Object,
     required: true,
   },
   category: {
-    type: String,
+    type: Object,
     required: true,
   },
   views: {
@@ -29,84 +41,112 @@ const props = defineProps({
     required: true,
   },
   updatedAt: {
-    type: String,
+    type: Number,
     required: true,
   },
 });
 
+const emit = defineEmits(['openArticle', 'articleAction']);
+
+const { t } = useI18n();
+
 const isOpen = ref(false);
 
-const menuItems = computed(() => {
-  const baseItems = [{ label: 'Delete', action: 'delete', icon: 'delete' }];
-  const menuOptions = {
-    archived: [
-      { label: 'Publish', action: 'publish', icon: 'checkmark' },
-      { label: 'Draft', action: 'draft', icon: 'draft' },
-    ],
-    draft: [
-      { label: 'Publish', action: 'publish', icon: 'checkmark' },
-      { label: 'Archive', action: 'archive', icon: 'archive' },
-    ],
-    '': [
-      // Empty string represents published status
-      { label: 'Draft', action: 'draft', icon: 'draft' },
-      { label: 'Archive', action: 'archive', icon: 'archive' },
-    ],
-  };
-  return [...(menuOptions[props.status] || menuOptions['']), ...baseItems];
+const articleMenuItems = computed(() => {
+  const commonItems = Object.entries(ARTICLE_MENU_ITEMS).reduce(
+    (acc, [key, item]) => {
+      acc[key] = { ...item, label: t(item.label) };
+      return acc;
+    },
+    {}
+  );
+
+  const statusItems = (
+    ARTICLE_MENU_OPTIONS[props.status] ||
+    ARTICLE_MENU_OPTIONS[ARTICLE_STATUSES.PUBLISHED]
+  ).map(key => commonItems[key]);
+
+  return [...statusItems, commonItems.delete];
 });
 
 const statusTextColor = computed(() => {
   switch (props.status) {
     case 'archived':
-      return '!text-slate-600 dark:!text-slate-200';
+      return '!text-n-slate-12';
     case 'draft':
-      return '!text-amber-700 dark:!text-amber-400';
+      return '!text-n-amber-11';
     default:
-      return '!text-teal-700 dark:!text-teal-400';
+      return '!text-n-teal-11';
   }
 });
 
 const statusText = computed(() => {
   switch (props.status) {
     case 'archived':
-      return 'Archived';
+      return t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.STATUS.ARCHIVED');
     case 'draft':
-      return 'Draft';
+      return t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.STATUS.DRAFT');
     default:
-      return 'Published';
+      return t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.STATUS.PUBLISHED');
   }
 });
 
-const handleAction = () => {
+const categoryName = computed(() => {
+  if (props.category?.slug) {
+    return `${props.category.icon} ${props.category.name}`;
+  }
+  return t(
+    'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.CATEGORY.UNCATEGORISED'
+  );
+});
+
+const authorName = computed(() => {
+  return props.author?.name || props.author?.availableName || '-';
+});
+
+const authorThumbnailSrc = computed(() => {
+  return props.author?.thumbnail;
+});
+
+const lastUpdatedAt = computed(() => {
+  return dynamicTime(props.updatedAt);
+});
+
+const handleArticleAction = ({ action, value }) => {
   isOpen.value = false;
+  emit('articleAction', { action, value, id: props.id });
+};
+
+const handleClick = id => {
+  emit('openArticle', id);
 };
 </script>
 
-<!-- TODO: Add i18n -->
-<!-- eslint-disable vue/no-bare-strings-in-template -->
 <template>
   <CardLayout>
     <template #header>
       <div class="flex justify-between gap-1">
-        <span class="text-base text-slate-900 dark:text-slate-50 line-clamp-1">
+        <span
+          class="text-base cursor-pointer hover:underline text-n-slate-12 line-clamp-1"
+          @click="handleClick(id)"
+        >
           {{ title }}
         </span>
-        <div class="relative group">
-          <Button
-            variant="ghost"
-            size="sm"
-            class="text-xs bg-slate-50 !font-normal group-hover:bg-slate-100/50 dark:group-hover:bg-slate-700/50 !h-6 dark:bg-slate-800 rounded-md border-0 !px-2 !py-0.5"
-            :label="statusText"
-            :class="statusTextColor"
-            @click="isOpen = !isOpen"
-          />
+        <div class="relative group" @click.stop>
           <OnClickOutside @trigger="isOpen = false">
+            <Button
+              variant="ghost"
+              size="sm"
+              class="text-xs font-medium bg-n-alpha-2 hover:bg-n-alpha-1 !h-6 rounded-md border-0 !px-2 !py-0.5"
+              :label="statusText"
+              :class="statusTextColor"
+              @click="isOpen = !isOpen"
+            />
             <DropdownMenu
               v-if="isOpen"
-              :menu-items="menuItems"
-              class="right-0 mt-2 xl:left-0 top-full"
-              @action="handleAction"
+              :menu-items="articleMenuItems"
+              class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full"
+              @action="handleArticleAction($event)"
             />
           </OnClickOutside>
         </div>
@@ -116,25 +156,34 @@ const handleAction = () => {
       <div class="flex items-center justify-between gap-4">
         <div class="flex items-center gap-4">
           <div class="flex items-center gap-1">
-            <div class="w-4 h-4 rounded-full bg-slate-100 dark:bg-slate-700" />
-            <span class="text-sm text-slate-500 dark:text-slate-400">
-              {{ author }}
+            <Thumbnail
+              v-if="author"
+              :author="author"
+              :name="authorName"
+              :src="authorThumbnailSrc"
+            />
+            <span class="text-sm text-n-slate-11">
+              {{ authorName }}
             </span>
           </div>
-          <span
-            class="block text-sm whitespace-nowrap text-slate-500 dark:text-slate-400"
-          >
-            {{ category }}
+          <span class="block text-sm whitespace-nowrap text-n-slate-11">
+            {{ categoryName }}
           </span>
           <div
-            class="inline-flex items-center gap-1 text-slate-500 dark:text-slate-400 whitespace-nowrap"
+            class="inline-flex items-center gap-1 text-n-slate-11 whitespace-nowrap"
           >
             <FluentIcon icon="eye-show" size="18" />
-            <span class="text-sm"> {{ views }} views </span>
+            <span class="text-sm">
+              {{
+                t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.VIEWS', {
+                  count: views,
+                })
+              }}
+            </span>
           </div>
         </div>
-        <span class="text-sm text-slate-600 dark:text-slate-400 line-clamp-1">
-          {{ updatedAt }}
+        <span class="text-sm text-n-slate-11 line-clamp-1">
+          {{ lastUpdatedAt }}
         </span>
       </div>
     </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.story.vue b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.story.vue
index 2a59683fa..e279c8dfc 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.story.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.story.vue
@@ -2,17 +2,21 @@
 import CategoryCard from './CategoryCard.vue';
 const categories = [
   {
-    id: 'getting-started',
-    title: '🚀 Getting started',
+    id: 1,
+    title: 'Getting started',
     description:
       'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
-    articlesCount: '5',
+    articlesCount: 5,
+    slug: 'getting-started',
+    icon: '🚀',
   },
   {
-    id: 'marketing',
-    title: '📈 Marketing',
+    id: 2,
+    title: 'Marketing',
     description: '',
-    articlesCount: '4',
+    articlesCount: 4,
+    slug: 'marketing',
+    icon: '📈',
   },
 ];
 </script>
@@ -31,9 +35,12 @@ const categories = [
         class="px-20 py-4 bg-white dark:bg-slate-900"
       >
         <CategoryCard
+          :id="category.id"
+          :slug="category.slug"
           :title="category.title"
           :description="category.description"
           :articles-count="category.articlesCount"
+          :icon="category.icon"
         />
       </div>
     </Variant>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
index 9cf958d1d..c7e9dfb32 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { OnClickOutside } from '@vueuse/components';
+import { useI18n } from 'vue-i18n';
 
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -8,14 +9,14 @@ import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.v
 
 const props = defineProps({
   id: {
-    type: String,
+    type: Number,
     required: true,
   },
   title: {
     type: String,
     required: true,
   },
-  articlesCount: {
+  icon: {
     type: String,
     required: true,
   },
@@ -23,25 +24,41 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  articlesCount: {
+    type: Number,
+    required: true,
+  },
+  slug: {
+    type: String,
+    required: true,
+  },
 });
 
-const emit = defineEmits(['click']);
+const emit = defineEmits(['click', 'action']);
+
+const { t } = useI18n();
 
 const isOpen = ref(false);
 
-const menuItems = [
+const categoryMenuItems = [
   {
     label: 'Edit',
     action: 'edit',
+    value: 'edit',
     icon: 'edit',
   },
   {
     label: 'Delete',
     action: 'delete',
+    value: 'delete',
     icon: 'delete',
   },
 ];
 
+const categoryTitleWithIcon = computed(() => {
+  return `${props.icon} ${props.title}`;
+});
+
 const description = computed(() => {
   return props.description ? props.description : 'No description added';
 });
@@ -50,48 +67,51 @@ const hasDescription = computed(() => {
   return props.description.length > 0;
 });
 
-const handleClick = id => {
-  emit('click', id);
+const handleClick = slug => {
+  emit('click', slug);
 };
 
-// eslint-disable-next-line no-unused-vars
-const handleAction = action => {
-  // TODO: Implement action
+const handleAction = ({ action, value }) => {
+  emit('action', { action, value, id: props.id });
+  isOpen.value = false;
 };
 </script>
 
-<!-- TODO: Add i18n -->
-<!-- eslint-disable vue/no-bare-strings-in-template -->
 <template>
-  <CardLayout @click="handleClick(id)">
+  <CardLayout>
     <template #header>
       <div class="flex gap-2">
-        <div class="flex justify-between w-full">
+        <div class="flex justify-between w-full gap-1">
           <div class="flex items-center justify-start gap-2">
             <span
-              class="text-base cursor-pointer group-hover/cardLayout:underline text-slate-900 dark:text-slate-50 line-clamp-1"
+              class="text-base cursor-pointer hover:underline text-slate-900 dark:text-slate-50 line-clamp-1"
+              @click="handleClick(slug)"
             >
-              {{ title }}
+              {{ categoryTitleWithIcon }}
             </span>
             <span
-              class="inline-flex items-center justify-center h-6 px-2 py-1 text-xs text-center border rounded-lg text-slate-500 w-fit border-slate-200 dark:border-slate-800 dark:text-slate-400"
+              class="inline-flex items-center justify-center h-6 px-2 py-1 text-xs text-center truncate border rounded-lg min-w-fit text-slate-500 w-fit border-slate-200 dark:border-slate-800 dark:text-slate-400"
             >
-              {{ articlesCount }} articles
+              {{
+                t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_CARD.ARTICLES_COUNT', {
+                  count: articlesCount,
+                })
+              }}
             </span>
           </div>
           <div class="relative group" @click.stop>
-            <Button
-              variant="ghost"
-              size="icon"
-              icon="more-vertical"
-              class="w-8 z-60 group-hover:bg-slate-100 dark:group-hover:bg-slate-800"
-              @click="isOpen = !isOpen"
-            />
             <OnClickOutside @trigger="isOpen = false">
+              <Button
+                variant="ghost"
+                size="sm"
+                icon="more-vertical"
+                class="w-8 z-60 group-hover:bg-slate-100 dark:group-hover:bg-slate-800"
+                @click="isOpen = !isOpen"
+              />
               <DropdownMenu
                 v-if="isOpen"
-                :menu-items="menuItems"
-                class="right-0 mt-1 xl:left-0 top-full z-60"
+                :menu-items="categoryMenuItems"
+                class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full z-60"
                 @action="handleAction"
               />
             </OnClickOutside>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue
index fbc75a08a..68fd7b0bb 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue
@@ -1,66 +1,42 @@
 <script setup>
-// import { ref } from 'vue';
 import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
-// import AddLocaleDialog from 'dashboard/playground/HelpCenter/components/AddLocaleDialog.vue';
+import articleContent from 'dashboard/components-next/HelpCenter/EmptyState/Portal/portalEmptyStateContent.js';
 
-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,
+defineProps({
+  title: {
+    type: String,
+    default: '',
   },
-  {
-    title: 'Setting up your first Help Center portal',
-    status: '',
-    updatedAt: '1 week ago',
-    author: 'John',
-    category: '🛠️ Development',
-    views: 400,
+  subtitle: {
+    type: String,
+    default: '',
   },
-  {
-    title: 'Best practices for organizing your Help Center content',
-    status: 'archived',
-    updatedAt: '3 days ago',
-    author: 'Fernando',
-    category: '💰 Finance',
-    views: 400,
+  showButton: {
+    type: Boolean,
+    default: true,
   },
-  {
-    title: 'Customizing the appearance of your Help Center',
-    status: '',
-    updatedAt: '5 days ago',
-    author: 'Jane',
-    category: '💰 Finance',
-    views: 400,
+  buttonLabel: {
+    type: String,
+    default: '',
   },
-];
+});
 
-// const addLocaleDialogRef = ref(null);
-// const openDialog = () => {
-//   addLocaleDialogRef.value.dialogRef.open();
-// };
-// const handleDialogConfirm = () => {
-//   // Add logic to create a new portal
-// };
+const emit = defineEmits(['click']);
+
+const onClick = () => {
+  emit('click');
+};
 </script>
 
-<!-- TODO: Add i18n -->
-<!-- eslint-disable vue/no-bare-strings-in-template -->
-
 <template>
-  <EmptyStateLayout
-    title="Write an article"
-    subtitle="Write a rich article, let's get started!"
-  >
+  <EmptyStateLayout :title="title" :subtitle="subtitle">
     <template #empty-state-item>
-      <div class="grid grid-cols-1 gap-4">
+      <div class="grid grid-cols-1 gap-4 overflow-hidden">
         <ArticleCard
-          v-for="(article, index) in articles"
+          v-for="(article, index) in articleContent.slice(0, 5)"
+          :id="article.id"
           :key="`article-${index}`"
           :title="article.title"
           :status="article.status"
@@ -72,16 +48,14 @@ const articles = [
       </div>
     </template>
     <template #actions>
-      <Button
-        variant="default"
-        label="New article"
-        icon="add"
-        @click="openDialog"
-      />
-      <!-- <AddLocaleDialog
-          ref="addLocaleDialogRef"
-          @confirm="handleDialogConfirm"
-        /> -->
+      <div v-if="showButton">
+        <Button
+          variant="default"
+          :label="buttonLabel"
+          icon="add"
+          @click="onClick"
+        />
+      </div>
     </template>
   </EmptyStateLayout>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Category/CategoryEmptyState.vue b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Category/CategoryEmptyState.vue
new file mode 100644
index 000000000..0d1038579
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Category/CategoryEmptyState.vue
@@ -0,0 +1,49 @@
+<script setup>
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import CategoryCard from 'dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue';
+import categoryContent from 'dashboard/components-next/HelpCenter/EmptyState/Category/categoryEmptyStateContent.js';
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <EmptyStateLayout :title="title" :subtitle="subtitle">
+    <template #empty-state-item>
+      <div class="grid grid-cols-2 gap-4">
+        <div class="space-y-4">
+          <CategoryCard
+            v-for="category in categoryContent"
+            :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"
+          />
+        </div>
+        <div class="space-y-4">
+          <CategoryCard
+            v-for="category in categoryContent.reverse()"
+            :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"
+          />
+        </div>
+      </div>
+    </template>
+  </EmptyStateLayout>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Category/categoryEmptyStateContent.js b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Category/categoryEmptyStateContent.js
new file mode 100644
index 000000000..fd772f340
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Category/categoryEmptyStateContent.js
@@ -0,0 +1,142 @@
+export default [
+  {
+    id: 1,
+    name: 'Getting Started',
+    icon: '🚀',
+    description: 'Quick guides to help new users onboard.',
+    slug: 'getting-started',
+    meta: {
+      articles_count: 5,
+    },
+  },
+  {
+    id: 2,
+    name: 'Advanced Features',
+    icon: '💡',
+    description: 'Explore advanced features for power users.',
+    slug: 'advanced-features',
+    meta: {
+      articles_count: 8,
+    },
+  },
+  {
+    id: 3,
+    name: 'FAQs',
+    icon: '❓',
+    description: 'Commonly asked questions and helpful answers.',
+    slug: 'faqs',
+    meta: {
+      articles_count: 3,
+    },
+  },
+  {
+    id: 4,
+    name: 'Troubleshooting',
+    icon: '🛠️',
+    description: 'Resolve common issues with step-by-step guidance.',
+    slug: 'troubleshooting',
+    meta: {
+      articles_count: 6,
+    },
+  },
+  {
+    id: 5,
+    name: 'Community Guidelines',
+    icon: '👥',
+    description: 'Rules and practices for community engagement.',
+    slug: 'community-guidelines',
+    meta: {
+      articles_count: 2,
+    },
+  },
+  {
+    id: 6,
+    name: 'Account Management',
+    icon: '🔑',
+    description: 'Manage your account and settings efficiently.',
+    slug: 'account-management',
+    meta: {
+      articles_count: 7,
+    },
+  },
+  {
+    id: 7,
+    name: 'Security Tips',
+    icon: '🔒',
+    description: 'Best practices for securing your account.',
+    slug: 'security-tips',
+    meta: {
+      articles_count: 4,
+    },
+  },
+  {
+    id: 8,
+    name: 'Integrations',
+    icon: '🔗',
+    description: 'Connect to third-party services and tools easily.',
+    slug: 'integrations',
+    meta: {
+      articles_count: 9,
+    },
+  },
+  {
+    id: 9,
+    name: 'Billing & Payments',
+    icon: '💳',
+    description: 'Manage your billing and payment details seamlessly.',
+    slug: 'billing-payments',
+    meta: {
+      articles_count: 5,
+    },
+  },
+  {
+    id: 10,
+    name: 'Customization',
+    icon: '🎨',
+    description: 'Personalize and customize your user experience.',
+    slug: 'customization',
+    meta: {
+      articles_count: 7,
+    },
+  },
+  {
+    id: 11,
+    name: 'Notifications',
+    icon: '🔔',
+    description: 'Adjust your notification settings and preferences.',
+    slug: 'notifications',
+    meta: {
+      articles_count: 3,
+    },
+  },
+  {
+    id: 12,
+    name: 'Privacy',
+    icon: '🛡️',
+    description: 'Understand how your data is collected and used.',
+    slug: 'privacy',
+    meta: {
+      articles_count: 2,
+    },
+  },
+  {
+    id: 13,
+    name: 'Mobile App',
+    icon: '📱',
+    description: 'Guides for using the mobile app effectively.',
+    slug: 'mobile-app',
+    meta: {
+      articles_count: 6,
+    },
+  },
+  {
+    id: 14,
+    name: 'Beta Features',
+    icon: '🧪',
+    description: 'Learn about new experimental features in beta.',
+    slug: 'beta-features',
+    meta: {
+      articles_count: 4,
+    },
+  },
+];
diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue
index 86366375b..edd43284a 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue
@@ -1,86 +1,38 @@
 <script setup>
-// import { ref } from 'vue';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
-import CategoryCard from 'dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue';
-import LocaleCard from 'dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue';
-// import CreatePortalDialog from 'dashboard/playground/HelpCenter/components/CreatePortalDialog.vue';
+import articleContent from './portalEmptyStateContent';
+import CreatePortalDialog from 'dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.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,
-  },
-];
-const categories = [
-  {
-    title: 'Getting Started',
-    description: 'Essential guides for new users',
-    articlesCount: '5',
-  },
-  {
-    title: 'Advanced Features',
-    description: 'In-depth tutorials for power users',
-    articlesCount: '8',
-  },
-];
+const createPortalDialogRef = ref(null);
+const openDialog = () => {
+  createPortalDialogRef.value.dialogRef.open();
+};
 
-const locales = [
-  { name: 'English', isDefault: true },
-  { name: 'Spanish', isDefault: false },
-  { name: 'Malayalam', isDefault: false },
-];
+const router = useRouter();
 
-// const createPortalDialogRef = ref(null);
-// const openDialog = () => {
-//   createPortalDialogRef.value.dialogRef.open();
-// };
-// const handleDialogConfirm = () => {
-//   // Add logic to create a new portal
-// };
+const onPortalCreate = ({ slug: portalSlug, locale }) => {
+  router.push({
+    name: 'portals_articles_index',
+    params: { portalSlug, locale },
+  });
+};
 </script>
 
-<!-- TODO: Add i18n -->
-<!-- eslint-disable vue/no-bare-strings-in-template -->
 <template>
   <EmptyStateLayout
-    title="Help Center"
-    subtitle="Create self-service portals to access articles and information. Streamline queries, enhance agent efficiency, and elevate customer support."
+    :title="$t('HELP_CENTER.TITLE')"
+    :subtitle="$t('HELP_CENTER.NEW_PAGE.DESCRIPTION')"
   >
     <template #empty-state-item>
       <div class="grid grid-cols-2 gap-4">
         <div class="space-y-4">
           <ArticleCard
-            v-for="(article, index) in articles"
+            v-for="(article, index) in articleContent"
+            :id="article.id"
             :key="`article-${index}`"
             :title="article.title"
             :status="article.status"
@@ -91,18 +43,16 @@ const locales = [
           />
         </div>
         <div class="space-y-4">
-          <CategoryCard
-            v-for="(category, index) in categories"
-            :key="`category-${index}`"
-            :title="category.title"
-            :description="category.description"
-            :articles-count="category.articlesCount"
-          />
-          <LocaleCard
-            v-for="(locale, index) in locales"
-            :key="`locale-${index}`"
-            :locale="locale.name"
-            :is-default="locale.isDefault"
+          <ArticleCard
+            v-for="(article, index) in articleContent.reverse()"
+            :id="article.id"
+            :key="`article-${index}`"
+            :title="article.title"
+            :status="article.status"
+            :updated-at="article.updatedAt"
+            :author="article.author"
+            :category="article.category"
+            :views="article.views"
           />
         </div>
       </div>
@@ -110,14 +60,14 @@ const locales = [
     <template #actions>
       <Button
         variant="default"
-        label="Create Portal"
+        :label="$t('HELP_CENTER.NEW_PAGE.CREATE_PORTAL_BUTTON')"
         icon="add"
         @click="openDialog"
       />
-      <!-- <CreatePortalDialog
-          ref="createPortalDialogRef"
-          @confirm="handleDialogConfirm"
-        /> -->
+      <CreatePortalDialog
+        ref="createPortalDialogRef"
+        @create="onPortalCreate"
+      />
     </template>
   </EmptyStateLayout>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/portalEmptyStateContent.js b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/portalEmptyStateContent.js
new file mode 100644
index 000000000..bc8a49e12
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/portalEmptyStateContent.js
@@ -0,0 +1,172 @@
+export default [
+  {
+    id: 1,
+    title: "How to get an SSL certificate for your Help Center's custom domain",
+    status: 'draft',
+    updatedAt: 1729205669,
+    author: { availableName: 'Michael' },
+    category: {
+      slug: 'configuration',
+      icon: '📦',
+      name: 'Setup & Configuration',
+    },
+    views: 3400,
+  },
+  {
+    id: 2,
+    title: 'Setting up your first Help Center portal',
+    status: 'published',
+    updatedAt: 1729205669,
+    author: { availableName: 'John' },
+    category: { slug: 'onboarding', icon: '🧑‍🍳', name: 'Onboarding' },
+    views: 400,
+  },
+  {
+    id: 3,
+    title: 'Best practices for organizing your Help Center content',
+    status: 'archived',
+    updatedAt: 1729205669,
+    author: { availableName: 'Fernando' },
+    category: { slug: 'best-practices', icon: '⛺️', name: 'Best Practices' },
+    views: 400,
+  },
+  {
+    id: 4,
+    title: 'Customizing the appearance of your Help Center',
+    status: 'draft',
+    updatedAt: 1729205669,
+    author: { availableName: 'Jane' },
+    category: { slug: 'design', icon: '🎨', name: 'Design' },
+    views: 400,
+  },
+  {
+    id: 5,
+    title: 'Integrating your Help Center with third-party tools',
+    status: 'published',
+    updatedAt: 1729205669,
+    author: { availableName: 'Sarah' },
+    category: {
+      slug: 'integrations',
+      icon: '🔗',
+      name: 'Integrations',
+    },
+    views: 2800,
+  },
+  {
+    id: 6,
+    title: 'Managing user permissions in your Help Center',
+    status: 'draft',
+    updatedAt: 1729205669,
+    author: { availableName: 'Alex' },
+    category: {
+      slug: 'administration',
+      icon: '🔐',
+      name: 'Administration',
+    },
+    views: 1200,
+  },
+  {
+    id: 7,
+    title: 'Creating and managing FAQ sections',
+    status: 'published',
+    updatedAt: 1729205669,
+    author: { availableName: 'Emily' },
+    category: {
+      slug: 'content-management',
+      icon: '📝',
+      name: 'Content Management',
+    },
+    views: 5600,
+  },
+  {
+    id: 8,
+    title: 'Implementing search functionality in your Help Center',
+    status: 'archived',
+    updatedAt: 1729205669,
+    author: { availableName: 'David' },
+    category: {
+      slug: 'features',
+      icon: '🔍',
+      name: 'Features',
+    },
+    views: 1800,
+  },
+  {
+    id: 9,
+    title: 'Analyzing Help Center usage metrics',
+    status: 'published',
+    updatedAt: 1729205669,
+    author: { availableName: 'Rachel' },
+    category: {
+      slug: 'analytics',
+      icon: '📊',
+      name: 'Analytics',
+    },
+    views: 3200,
+  },
+  {
+    id: 10,
+    title: 'Setting up multilingual support in your Help Center',
+    status: 'draft',
+    updatedAt: 1729205669,
+    author: { availableName: 'Carlos' },
+    category: {
+      slug: 'localization',
+      icon: '🌍',
+      name: 'Localization',
+    },
+    views: 900,
+  },
+  {
+    id: 11,
+    title: 'Creating interactive tutorials for your products',
+    status: 'published',
+    updatedAt: 1729205669,
+    author: { availableName: 'Olivia' },
+    category: {
+      slug: 'education',
+      icon: '🎓',
+      name: 'Education',
+    },
+    views: 4100,
+  },
+  {
+    id: 12,
+    title: 'Implementing a feedback system in your Help Center',
+    status: 'draft',
+    updatedAt: 1729205669,
+    author: { availableName: 'Nathan' },
+    category: {
+      slug: 'user-engagement',
+      icon: '💬',
+      name: 'User Engagement',
+    },
+    views: 750,
+  },
+  {
+    id: 13,
+    title: 'Optimizing Help Center content for SEO',
+    status: 'published',
+    updatedAt: 1729205669,
+    author: { availableName: 'Sophia' },
+    category: {
+      slug: 'seo',
+      icon: '🚀',
+      name: 'SEO',
+    },
+    views: 2900,
+  },
+  {
+    id: 14,
+    title: 'Creating a knowledge base for internal teams',
+    status: 'archived',
+    updatedAt: 1729205669,
+    author: { availableName: 'Daniel' },
+    category: {
+      slug: 'internal-resources',
+      icon: '🏢',
+      name: 'Internal Resources',
+    },
+    views: 1500,
+  },
+];
diff --git a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
index fc20dbd1d..df8348629 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
@@ -1,16 +1,15 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { OnClickOutside } from '@vueuse/components';
+import { useRoute } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store.js';
 
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import PortalSwitcher from 'dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue';
+import CreatePortalDialog from 'dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue';
 
 defineProps({
-  header: {
-    type: String,
-    default: 'Chatwoot Help Center',
-  },
   currentPage: {
     type: Number,
     default: 1,
@@ -35,8 +34,21 @@ defineProps({
 
 const emit = defineEmits(['update:currentPage']);
 
+const route = useRoute();
+
+const createPortalDialogRef = ref(null);
+
 const showPortalSwitcher = ref(false);
 
+const portals = useMapGetter('portals/allPortals');
+
+const currentPortalSlug = computed(() => route.params.portalSlug);
+
+const activePortalName = computed(() => {
+  return portals.value?.find(portal => portal.slug === currentPortalSlug.value)
+    ?.name;
+});
+
 const updateCurrentPage = page => {
   emit('update:currentPage', page);
 };
@@ -46,34 +58,37 @@ const togglePortalSwitcher = () => {
 </script>
 
 <template>
-  <section
-    class="flex flex-col w-full h-full overflow-hidden bg-white dark:bg-slate-900"
-  >
-    <header
-      class="sticky top-0 z-10 px-6 pb-3 bg-white lg:px-0 dark:bg-slate-900"
-    >
+  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
+    <header class="sticky top-0 z-10 px-6 pb-3 lg:px-0">
       <div class="w-full max-w-[900px] mx-auto">
         <div
           v-if="showHeaderTitle"
           class="flex items-center justify-start h-20 gap-2"
         >
-          <span class="text-xl font-medium text-slate-900 dark:text-white">
-            {{ header }}
+          <span
+            v-if="activePortalName"
+            class="text-xl font-medium text-slate-900 dark:text-white"
+          >
+            {{ activePortalName }}
           </span>
-          <div class="relative group">
-            <Button
-              icon="more-vertical"
-              variant="ghost"
-              size="sm"
-              class="group-hover:bg-slate-100 dark:group-hover:bg-slate-800"
-              @click="togglePortalSwitcher"
-            />
+          <div v-if="activePortalName" class="relative group">
             <OnClickOutside @trigger="showPortalSwitcher = false">
+              <Button
+                icon="chevron-lucide-down"
+                variant="ghost"
+                icon-lib="lucide"
+                class="!w-6 !h-6 group-hover:bg-n-solid-2 !p-0.5 rounded-md"
+                @click="togglePortalSwitcher"
+              />
+
               <PortalSwitcher
                 v-if="showPortalSwitcher"
-                class="absolute left-0 top-9"
+                class="absolute ltr:left-0 rtl:right-0 top-9"
+                @close="showPortalSwitcher = false"
+                @create-portal="createPortalDialogRef.dialogRef.open()"
               />
             </OnClickOutside>
+            <CreatePortalDialog ref="createPortalDialogRef" />
           </div>
         </div>
         <slot name="header-actions" />
@@ -84,10 +99,7 @@ const togglePortalSwitcher = () => {
         <slot name="content" />
       </div>
     </main>
-    <footer
-      v-if="showPaginationFooter"
-      class="sticky bottom-0 z-10 px-4 pt-3 pb-4 bg-white dark:bg-slate-900"
-    >
+    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 px-4 pb-4">
       <PaginationFooter
         :current-page="currentPage"
         :total-items="totalItems"
@@ -95,5 +107,7 @@ const togglePortalSwitcher = () => {
         @update:current-page="updateCurrentPage"
       />
     </footer>
+    <!-- Do not remove this slot. It can be used to add dialogs. -->
+    <slot />
   </section>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue b/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
index 1eba0616f..1b0b5b435 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
@@ -1,12 +1,14 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { OnClickOutside } from '@vueuse/components';
+import { useI18n } from 'vue-i18n';
+import { LOCALE_MENU_ITEMS } from 'dashboard/helper/portalHelper';
 
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 
-defineProps({
+const props = defineProps({
   locale: {
     type: String,
     required: true,
@@ -15,6 +17,10 @@ defineProps({
     type: Boolean,
     required: true,
   },
+  localeCode: {
+    type: String,
+    required: true,
+  },
   articleCount: {
     type: Number,
     required: true,
@@ -25,29 +31,26 @@ defineProps({
   },
 });
 
-const isOpen = ref(false);
+const emit = defineEmits(['action']);
 
-const menuItems = [
-  {
-    label: 'Make default',
-    action: 'default',
-    icon: 'star-emphasis',
-  },
-  {
-    label: 'Delete',
-    action: 'delete',
-    icon: 'delete',
-  },
-];
+const { t } = useI18n();
 
-// eslint-disable-next-line no-unused-vars
-const handleAction = action => {
-  // TODO: Implement action
+const showDropdownMenu = ref(false);
+
+const localeMenuItems = computed(() =>
+  LOCALE_MENU_ITEMS.map(item => ({
+    ...item,
+    label: t(item.label),
+    disabled: props.isDefault,
+  }))
+);
+
+const handleAction = ({ action, value }) => {
+  emit('action', { action, value });
+  showDropdownMenu.value = false;
 };
 </script>
 
-<!-- TODO: Add i18n -->
-<!-- eslint-disable vue/no-bare-strings-in-template -->
 <template>
   <CardLayout class="ltr:pr-2 rtl:pl-2">
     <template #header>
@@ -56,42 +59,53 @@ const handleAction = action => {
           <span
             class="text-sm font-medium text-slate-900 dark:text-slate-50 line-clamp-1"
           >
-            {{ locale }}
+            {{ locale }} ({{ localeCode }})
           </span>
           <span
             v-if="isDefault"
             class="bg-slate-100 dark:bg-slate-800 h-6 inline-flex items-center justify-center rounded-md text-xs border-px border-transparent text-woot-500 dark:text-woot-400 px-2 py-0.5"
           >
-            Default
+            {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DEFAULT') }}
           </span>
         </div>
-        <div class="flex items-center justify-end gap-1">
+        <div class="flex items-center justify-end gap-2">
           <div class="flex items-center gap-4">
             <span
               class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
             >
-              {{ articleCount }} articles
+              {{
+                $t(
+                  'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.ARTICLES_COUNT',
+                  articleCount
+                )
+              }}
             </span>
             <div class="w-px h-3 bg-slate-75 dark:bg-slate-800" />
             <span
               class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
             >
-              {{ categoryCount }} categories
+              {{
+                $t(
+                  'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.CATEGORIES_COUNT',
+                  categoryCount
+                )
+              }}
             </span>
           </div>
           <div class="relative group">
-            <Button
-              variant="ghost"
-              size="icon"
-              icon="more-vertical"
-              class="w-8 group-hover:bg-slate-100 dark:group-hover:bg-slate-800"
-              @click="isOpen = !isOpen"
-            />
-            <OnClickOutside @trigger="isOpen = false">
+            <OnClickOutside @trigger="showDropdownMenu = false">
+              <Button
+                variant="ghost"
+                size="sm"
+                icon="more-vertical"
+                class="w-8 group-hover:bg-slate-100 dark:group-hover:bg-slate-800"
+                @click="showDropdownMenu = !showDropdownMenu"
+              />
+
               <DropdownMenu
-                v-if="isOpen"
-                :menu-items="menuItems"
-                class="right-0 mt-1 xl:left-0 top-full z-60 min-w-[147px]"
+                v-if="showDropdownMenu"
+                :menu-items="localeMenuItems"
+                class="ltr:right-0 rtl:left-0 mt-1 xl:ltr:left-0 xl:rtl:right-0 top-full z-60 min-w-[150px]"
                 @action="handleAction"
               />
             </OnClickOutside>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/EditArticlePage/EditArticlePage.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
similarity index 52%
rename from app/javascript/dashboard/components-next/HelpCenter/Pages/EditArticlePage/EditArticlePage.vue
rename to app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
index 2b1ea588e..8142db77b 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/EditArticlePage/EditArticlePage.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
@@ -1,105 +1,111 @@
 <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 Button from 'dashboard/components-next/button/Button.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 { article } = defineProps({
+const props = defineProps({
   article: {
     type: Object,
     default: () => ({}),
   },
+  isUpdating: {
+    type: Boolean,
+    default: false,
+  },
+  isSaved: {
+    type: Boolean,
+    default: false,
+  },
 });
-const emit = defineEmits(['saveArticle']);
+
+const emit = defineEmits([
+  'saveArticle',
+  'goBack',
+  'setAuthor',
+  'setCategory',
+  'previewArticle',
+]);
+
+const { t } = useI18n();
 
 const saveArticle = debounce(value => emit('saveArticle', value), 400, false);
 
 const articleTitle = computed({
-  get: () => article.title,
-  set: title => {
-    saveArticle({ title });
+  get: () => props.article.title,
+  set: value => {
+    saveArticle({ title: value });
   },
 });
 
 const articleContent = computed({
-  get: () => article.content,
+  get: () => props.article.content,
   set: content => {
     saveArticle({ content });
   },
 });
+
+const onClickGoBack = () => {
+  emit('goBack');
+};
+
+const setAuthorId = authorId => {
+  emit('setAuthor', authorId);
+};
+
+const setCategoryId = categoryId => {
+  emit('setCategory', categoryId);
+};
+
+const previewArticle = () => {
+  emit('previewArticle');
+};
 </script>
 
-<!-- eslint-disable vue/no-bare-strings-in-template -->
 <template>
   <HelpCenterLayout :show-header-title="false" :show-pagination-footer="false">
     <template #header-actions>
-      <div class="flex items-center justify-between h-20">
-        <Button
-          label="Back to articles"
-          icon="chevron-lucide-left"
-          icon-lib="lucide"
-          variant="link"
-          text-variant="info"
-          size="sm"
-        />
-        <div class="flex items-center gap-4">
-          <span class="text-xs font-medium text-slate-500 dark:text-slate-400">
-            Saved
-          </span>
-          <div class="flex items-center gap-2">
-            <Button label="Preview" variant="secondary" size="sm" />
-            <Button
-              label="Publish"
-              icon="chevron-lucide-down"
-              icon-position="right"
-              icon-lib="lucide"
-              size="sm"
-            />
-          </div>
-        </div>
-      </div>
+      <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"
-          class="h-12"
-          custom-text-area-class="border-0 !text-[32px] !bg-transparent !py-0 !px-0 !h-auto !leading-[48px] !font-medium !tracking-[0.2px]"
+          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="saveArticle"
+          @set-author="setAuthorId"
+          @set-category="setCategoryId"
         />
-        <div class="flex items-center gap-4">
-          <div class="flex items-center gap-2">
-            <div class="w-5 h-5 rounded-full bg-slate-100 dark:bg-slate-700" />
-            <span class="text-sm text-slate-500 dark:text-slate-400">
-              John Doe
-            </span>
-          </div>
-          <div class="w-px h-3 bg-slate-50 dark:bg-slate-800" />
-          <Button
-            label="Uncategorized"
-            icon="play-shape"
-            variant="ghost"
-            class="!px-2 font-normal"
-            text-variant="info"
-          />
-          <div class="w-px h-3 bg-slate-50 dark:bg-slate-800" />
-          <Button
-            label="More properties"
-            icon="add"
-            variant="ghost"
-            class="!px-2 font-normal"
-          />
-        </div>
       </div>
       <FullEditor
         v-model="articleContent"
         class="py-0 pb-10 pl-4 rtl:pr-4 rtl:pl-0 h-fit"
-        placeholder="Write something"
+        :placeholder="
+          t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.EDITOR_PLACEHOLDER')
+        "
         :enabled-menu-options="ARTICLE_EDITOR_MENU_OPTIONS"
+        :autofocus="false"
       />
     </template>
   </HelpCenterLayout>
@@ -132,8 +138,10 @@ const articleContent = computed({
 
       .ProseMirror-menuitem {
         @apply mr-0;
+
         .ProseMirror-icon {
           @apply p-0 mt-1 !mr-0;
+
           svg {
             width: 20px !important;
             height: 20px !important;
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
new file mode 100644
index 000000000..7b03893f2
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
@@ -0,0 +1,206 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { OnClickOutside } from '@vueuse/components';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.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 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 author = computed(() => {
+  if (isNewArticle.value) {
+    return selectedAuthorId.value
+      ? agents.value.find(agent => agent.id === selectedAuthorId.value)
+      : currentUser.value;
+  }
+  return props.article?.author || currentUser.value;
+});
+
+const authorName = computed(
+  () => author.value?.name || author.value?.available_name || '-'
+);
+const authorThumbnailSrc = computed(() => author.value?.thumbnail);
+
+const agentList = computed(() => {
+  return [...agents.value]
+    .sort((a, b) => a.name.localeCompare(b.name))
+    .map(agent => ({
+      label: agent.name,
+      value: agent.id,
+      thumbnail: { name: agent.name, src: agent.thumbnail },
+      isSelected: agent.id === props.article?.author?.id,
+      action: 'assignAuthor',
+    }))
+    .sort((a, b) => b.isSelected - a.isSelected);
+});
+
+const hasAgentList = computed(() => {
+  return agents.value?.length > 0;
+});
+
+const selectedCategory = computed(() => {
+  if (isNewArticle.value) {
+    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(category => ({
+      label: category.name,
+      value: category.id,
+      emoji: category.icon,
+      isSelected: category.id === props.article?.category?.id,
+      action: 'assignCategory',
+    }))
+    .sort((a, b) => b.isSelected - 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 });
+};
+</script>
+
+<template>
+  <div class="flex items-center gap-4">
+    <div class="relative flex items-center gap-2">
+      <OnClickOutside @trigger="openAgentsList = false">
+        <Button
+          :label="authorName"
+          variant="ghost"
+          class="!px-0 font-normal"
+          text-variant="info"
+          @click="openAgentsList = !openAgentsList"
+        >
+          <template #leftPrefix>
+            <Thumbnail
+              v-if="author"
+              :author="author"
+              :name="authorName"
+              :size="20"
+              :src="authorThumbnailSrc"
+            />
+          </template>
+        </Button>
+        <DropdownMenu
+          v-if="openAgentsList && hasAgentList"
+          :menu-items="agentList"
+          class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-52"
+          @action="handleArticleAction"
+        />
+      </OnClickOutside>
+    </div>
+    <div class="w-px h-3 bg-slate-50 dark:bg-slate-800" />
+    <div class="relative">
+      <OnClickOutside @trigger="openCategoryList = false">
+        <Button
+          :label="
+            selectedCategory?.name ||
+            t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')
+          "
+          :emoji="selectedCategory?.icon || ''"
+          :icon="!selectedCategory?.icon ? 'play-shape' : ''"
+          variant="ghost"
+          class="!px-2 font-normal"
+          text-variant="info"
+          @click="openCategoryList = !openCategoryList"
+        />
+        <DropdownMenu
+          v-if="openCategoryList && hasCategoryMenuItems"
+          :menu-items="categoryList"
+          class="w-48 mt-2 z-[100] overflow-y-auto left-0 top-full max-h-52"
+          @action="handleArticleAction"
+        />
+      </OnClickOutside>
+    </div>
+
+    <div class="w-px h-3 bg-slate-50 dark:bg-slate-800" />
+    <div class="relative">
+      <OnClickOutside @trigger="openProperties = false">
+        <Button
+          :label="
+            t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.MORE_PROPERTIES')
+          "
+          icon="add"
+          variant="ghost"
+          :disabled="isNewArticle"
+          text-variant="info"
+          class="!px-2 font-normal"
+          @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/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue
new file mode 100644
index 000000000..03af2558d
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue
@@ -0,0 +1,178 @@
+<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 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="chevron-lucide-left"
+      icon-lib="lucide"
+      variant="link"
+      text-variant="info"
+      size="sm"
+      @click="onClickGoBack"
+    />
+    <div class="flex items-center gap-4">
+      <span
+        v-if="isUpdating || isSaved"
+        class="text-xs font-medium transition-all duration-300 text-slate-500 dark:text-slate-400"
+      >
+        {{ statusText }}
+      </span>
+      <div class="flex items-center gap-2">
+        <Button
+          :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PREVIEW')"
+          variant="secondary"
+          size="sm"
+          :disabled="!articleId"
+          @click="previewArticle"
+        />
+        <div 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"
+            :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="chevron-lucide-down"
+                icon-lib="lucide"
+                size="sm"
+                :disabled="!articleId"
+                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>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
new file mode 100644
index 000000000..cc6bc0f4b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
@@ -0,0 +1,134 @@
+<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-[400px] bg-n-alpha-3 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="dismiss"
+        size="sm"
+        variant="ghost"
+        class="w-8 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-[100px] text-slate-900 dark:text-slate-50"
+          >
+            {{
+              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-[224px]"
+            custom-text-area-wrapper-class="!p-0 !border-0 !rounded-none !bg-transparent transition-none"
+            custom-text-area-class="max-h-[150px]"
+            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-[120px]"
+          />
+        </div>
+        <div class="flex justify-between w-full gap-2 py-2">
+          <label
+            class="text-sm font-medium whitespace-nowrap min-w-[120px] text-slate-900 dark:text-slate-50"
+          >
+            {{
+              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-[224px]"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue
new file mode 100644
index 000000000..59a5db020
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue
@@ -0,0 +1,197 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { OnClickOutside } from '@vueuse/components';
+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 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 hasMoreThanOneLocaleMenuItems = computed(() => {
+  return localeMenuItems.value?.length > 1;
+});
+
+const handleLocaleAction = ({ value }) => {
+  emit('localeChange', value);
+  isLocaleMenuOpen.value = false;
+};
+
+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
+      class="bg-n-solid-1"
+      :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 v-if="hasMoreThanOneLocaleMenuItems" class="relative group">
+          <OnClickOutside @trigger="isLocaleMenuOpen = false">
+            <Button
+              :label="activeLocaleName"
+              size="sm"
+              icon-position="right"
+              icon="chevron-lucide-down"
+              icon-lib="lucide"
+              variant="secondary"
+              @click="isLocaleMenuOpen = !isLocaleMenuOpen"
+            />
+
+            <DropdownMenu
+              v-if="isLocaleMenuOpen"
+              :menu-items="localeMenuItems"
+              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"
+              size="sm"
+              icon-position="right"
+              icon="chevron-lucide-down"
+              icon-lib="lucide"
+              variant="secondary"
+              class="max-w-48"
+              @click="isCategoryMenuOpen = !isCategoryMenuOpen"
+            />
+
+            <DropdownMenu
+              v-if="isCategoryMenuOpen"
+              :menu-items="categoryMenuItems"
+              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="add"
+        size="sm"
+        @click="handleNewArticle"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue
index 3a9984dbd..ca302c3a3 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue
@@ -1,25 +1,190 @@
 <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';
 
-defineProps({
+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 updateMeta = () => {
+  const { portalSlug, locale } = route.params;
+  return store.dispatch('portals/show', { 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 updateMeta();
+  } 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>
-  <ul role="list" class="w-full h-full space-y-4">
-    <ArticleCard
-      v-for="article in articles"
-      :key="article.title"
-      :title="article.title"
-      :status="article.status"
-      :author="article.author"
-      :category="article.category"
-      :views="article.views"
-      :updated-at="article.updatedAt"
-    />
-  </ul>
+  <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/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue
index 730727e81..bca348ba9 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue
@@ -1,74 +1,182 @@
 <script setup>
-import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
-import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import ArticleList from 'dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue';
+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';
 
-defineProps({
+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 tabs = [
-  { label: 'All articles', count: 24 },
-  { label: 'Mine', count: 13 },
-  { label: 'Draft', count: 5 },
-  { label: 'Archived', count: 11 },
-];
-// TODO: remove comments
-// eslint-disable-next-line no-unused-vars
-const handleTabChange = tab => {
-  // TODO: Implement tab change logic
+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,
+    },
+  });
 };
-// eslint-disable-next-line no-unused-vars
-const handlePageChange = page => {
-  // TODO: Implement page change logic
+
+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(
+  () =>
+    !hasNoArticlesInPortal.value &&
+    !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 = () =>
+  router.push({ name: 'portals_articles_new' });
 </script>
 
 <template>
   <HelpCenterLayout
-    :current-page="1"
-    :total-items="100"
-    :items-per-page="10"
+    :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">
-        <div class="flex flex-col items-start w-full gap-2 lg:flex-row">
-          <TabBar
-            :tabs="tabs"
-            :initial-active-tab="1"
-            @tab-changed="handleTabChange"
-          />
-          <div class="flex items-start justify-between w-full gap-2">
-            <div class="flex items-center gap-2">
-              <Button
-                label="English"
-                size="sm"
-                icon-position="right"
-                icon="chevron-lucide-down"
-                icon-lib="lucide"
-                variant="secondary"
-              />
-              <Button
-                label="All categories"
-                size="sm"
-                icon-position="right"
-                icon="chevron-lucide-down"
-                icon-lib="lucide"
-                variant="secondary"
-              />
-            </div>
-            <Button label="New article" icon="add" size="sm" />
-          </div>
-        </div>
+        <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>
-      <ArticleList :articles="articles" />
+      <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/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.vue
index 79d648abe..12acd1bd8 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.vue
@@ -1,101 +1,139 @@
 <script setup>
 import { ref, computed } from 'vue';
-// import { OnClickOutside } from '@vueuse/components';
+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 Button from 'dashboard/components-next/button/Button.vue';
-import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
 import CategoryList from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue';
-import ArticleList from 'dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue';
-// import EditCategory from 'dashboard/playground/HelpCenter/components/EditCategory.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 showEditCategory = ref(false);
 
-// const openEditCategory = () => {
-//   showEditCategory.value = true;
-// };
-// const closeEditCategory = () => {
-//   showEditCategory.value = false;
-// };
+const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
+const isLoading = computed(() => props.isFetching || isSwitchingPortal.value);
+const hasCategories = computed(() => props.categories?.length > 0);
 
-const breadcrumbItems = computed(() => {
-  const items = [{ label: 'Categories (en-US)', link: '#' }];
-  if (selectedCategory.value) {
-    items.push({
-      label: selectedCategory.value.title,
-      count: selectedCategory.value.articles.length,
+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);
   }
-  return items;
-});
-const openCategoryArticles = id => {
-  selectedCategory.value = props.categories.find(
-    category => category.id === id
-  );
 };
-const resetCategory = () => {
-  selectedCategory.value = null;
-};
-const displayedArticles = computed(() => {
-  return selectedCategory.value ? selectedCategory.value.articles : [];
-});
 </script>
 
-<!-- eslint-disable vue/no-bare-strings-in-template -->
 <template>
   <HelpCenterLayout :show-pagination-footer="false">
     <template #header-actions>
-      <div class="flex items-center justify-between">
-        <div v-if="!selectedCategory" class="flex items-center gap-4">
-          <Button
-            label="English"
-            size="sm"
-            icon-position="right"
-            icon="chevron-lucide-down"
-            icon-lib="lucide"
-            variant="secondary"
-          />
-          <div
-            class="w-px h-3.5 rounded my-auto bg-slate-75 dark:bg-slate-800"
-          />
-          <span class="text-sm font-medium text-slate-800 dark:text-slate-100">
-            {{ categories.length }} categories
-          </span>
-        </div>
-        <Breadcrumb v-else :items="breadcrumbItems" @click="resetCategory" />
-        <Button
-          v-if="!selectedCategory"
-          label="New category"
-          icon="add"
-          size="sm"
-        />
-        <div v-else class="relative">
-          <Button
-            label="Edit category"
-            variant="secondary"
-            size="sm"
-            @click="openEditCategory"
-          />
-          <!-- <OnClickOutside @trigger="closeEditCategory">
-            <EditCategory v-if="showEditCategory" @close="closeEditCategory" />
-          </OnClickOutside> -->
-        </div>
-      </div>
+      <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-if="!selectedCategory"
+        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')"
       />
-      <ArticleList v-else :articles="displayedArticles" />
     </template>
+    <EditCategoryDialog
+      ref="editCategoryDialog"
+      :allowed-locales="allowedLocales"
+      :selected-category="selectedCategory"
+    />
   </HelpCenterLayout>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue
new file mode 100644
index 000000000..78e0594e7
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue
@@ -0,0 +1,112 @@
+<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-[400px] absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
+  >
+    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
+      {{
+        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/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
new file mode 100644
index 000000000..35dddd3b1
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
@@ -0,0 +1,272 @@
+<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-slate-50 dark:border-slate-700/50"
+    >
+      <div class="flex flex-col items-start w-full gap-2 py-2">
+        <span class="text-sm font-medium text-slate-700 dark:text-slate-300">
+          {{ t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.PORTAL') }}
+        </span>
+        <span class="text-sm text-slate-800 dark:text-slate-100">
+          {{ portalName }}
+        </span>
+      </div>
+      <div class="justify-start w-px h-10 bg-slate-50 dark:bg-slate-700/50" />
+      <div class="flex flex-col w-full gap-2 py-2">
+        <span class="text-sm font-medium text-slate-700 dark:text-slate-300">
+          {{ t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.LOCALE') }}
+        </span>
+        <span
+          :title="`${activeLocaleName} (${activeLocaleCode})`"
+          class="text-sm line-clamp-1 text-slate-800 dark:text-slate-100"
+        >
+          {{ `${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 !bg-slate-25 dark:!bg-slate-900"
+        >
+          <template #prefix>
+            <OnClickOutside @trigger="isEmojiPickerOpen = false">
+              <Button
+                :label="state.icon"
+                variant="secondary"
+                size="sm"
+                :icon="!state.icon ? 'emoji-add' : ''"
+                class="!h-[38px] !w-[38px] absolute top-[31px] !rounded-[7px] 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 !bg-slate-25 dark:!bg-slate-900 "
+      />
+      <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
+        custom-text-area-wrapper-class="!bg-slate-25 dark:!bg-slate-900"
+      />
+      <div
+        v-if="showActionButtons"
+        class="flex items-center justify-between w-full gap-3"
+      >
+        <Button
+          variant="ghost"
+          :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.BUTTONS.CANCEL')"
+          text-variant="default"
+          class="w-full bg-n-alpha-2 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/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue
new file mode 100644
index 000000000..043aa1391
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue
@@ -0,0 +1,201 @@
+<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"
+            icon-position="right"
+            icon="chevron-lucide-down"
+            icon-lib="lucide"
+            variant="secondary"
+            @click="isLocaleMenuOpen = !isLocaleMenuOpen"
+          />
+          <DropdownMenu
+            v-if="isLocaleMenuOpen"
+            :menu-items="localeMenuItems"
+            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-slate-75 dark:bg-slate-800" />
+      <span class="text-sm font-medium text-slate-800 dark:text-slate-100">
+        {{
+          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="add"
+          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')"
+          variant="secondary"
+          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/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue
index 6ec7f5920..62cfd5c6c 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue
@@ -8,10 +8,14 @@ defineProps({
   },
 });
 
-const emit = defineEmits(['click']);
+const emit = defineEmits(['click', 'action']);
 
-const handleClick = id => {
-  emit('click', id);
+const handleClick = slug => {
+  emit('click', slug);
+};
+
+const handleAction = ({ action, value, id }, category) => {
+  emit('action', { action, value, id, category });
 };
 </script>
 
@@ -20,11 +24,14 @@ const handleClick = id => {
     <CategoryCard
       v-for="category in categories"
       :id="category.id"
-      :key="category.title"
-      :title="category.title"
+      :key="category.id"
+      :title="category.name"
+      :icon="category.icon"
       :description="category.description"
-      :articles-count="category.articlesCount"
-      @click="handleClick(category.id)"
+      :articles-count="category.meta.articles_count || 0"
+      :slug="category.slug"
+      @click="handleClick(category.slug)"
+      @action="handleAction($event, category)"
     />
   </ul>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue
new file mode 100644
index 000000000..1c01a9cdb
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue
@@ -0,0 +1,112 @@
+<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"
+  >
+    <template #form>
+      <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"
+      />
+    </template>
+  </Dialog>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue
new file mode 100644
index 000000000..6a08d3772
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue
@@ -0,0 +1,101 @@
+<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 },
+    });
+
+    useTrack(PORTALS_EVENTS.CREATE_LOCALE, {
+      localeAdded: selectedLocale.value,
+      totalLocales: updatedLocales.length,
+      from: route.name,
+    });
+
+    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"
+  >
+    <template #form>
+      <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]:!border-n-slate-5 [&>div>button]:dark:!border-n-slate-5"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue
index c6fd6868e..11e5ba401 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue
@@ -1,12 +1,94 @@
 <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 { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 
-defineProps({
+const props = defineProps({
   locales: {
     type: Array,
     required: true,
   },
+  portal: {
+    type: Object,
+    required: true,
+  },
 });
+
+const store = useStore();
+const { t } = useI18n();
+const route = useRoute();
+
+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 deletePortalLocale = ({ localeCode }) => {
+  const updatedLocales = props.locales
+    .filter(locale => locale.code !== localeCode)
+    .map(locale => locale.code);
+
+  const defaultLocale = props.portal.meta.default_locale;
+
+  updatePortalLocales({
+    newAllowedLocales: updatedLocales,
+    defaultLocale,
+    messageKey: 'DELETE_LOCALE',
+  });
+
+  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>
@@ -15,9 +97,11 @@ defineProps({
       v-for="(locale, index) in locales"
       :key="index"
       :locale="locale.name"
-      :is-default="locale.isDefault"
-      :article-count="locale.articleCount"
-      :category-count="locale.categoryCount"
+      :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/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue
index ccce16896..3b1506224 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue
@@ -1,27 +1,28 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
 import Button from 'dashboard/components-next/button/Button.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 localeCount = computed(() => props.locales?.length);
+const addLocaleDialogRef = ref(null);
 
-// TODO: remove comments
-// eslint-disable-next-line no-unused-vars
-const handleTabChange = tab => {
-  // TODO: Implement tab change logic
-};
-// eslint-disable-next-line no-unused-vars
-const handlePageChange = page => {
-  // TODO: Implement page change logic
+const openAddLocaleDialog = () => {
+  addLocaleDialogRef.value.dialogRef.open();
 };
+
+const localeCount = computed(() => props.locales?.length);
 </script>
 
 <template>
@@ -37,11 +38,13 @@ const handlePageChange = page => {
           :label="$t('HELP_CENTER.LOCALES_PAGE.NEW_LOCALE_BUTTON_TEXT')"
           icon="add"
           size="sm"
+          @click="openAddLocaleDialog"
         />
       </div>
     </template>
     <template #content>
-      <LocaleList :locales="locales" />
+      <LocaleList :locales="locales" :portal="portal" />
     </template>
+    <AddLocaleDialog ref="addLocaleDialogRef" :portal="portal" />
   </HelpCenterLayout>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue
new file mode 100644
index 000000000..44f0e9f5c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue
@@ -0,0 +1,74 @@
+<script setup>
+import { ref, reactive, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+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,
+});
+
+watch(
+  () => props.customDomain,
+  newVal => {
+    formState.customDomain = newVal;
+  }
+);
+
+const handleDialogConfirm = () => {
+  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"
+  >
+    <template #form>
+      <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'
+          )
+        "
+      />
+    </template>
+  </Dialog>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/ConfirmDeletePortalDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/ConfirmDeletePortalDialog.vue
new file mode 100644
index 000000000..6f9337c0f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/ConfirmDeletePortalDialog.vue
@@ -0,0 +1,51 @@
+<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/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue
new file mode 100644
index 000000000..744da4765
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue
@@ -0,0 +1,79 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { getHostNameFromURL } from 'dashboard/helper/URLHelper';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const props = defineProps({
+  customDomain: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['confirm']);
+
+const { t } = useI18n();
+
+const domain = computed(() => {
+  const { hostURL, helpCenterURL } = window?.chatwootConfig || {};
+  return getHostNameFromURL(helpCenterURL) || getHostNameFromURL(hostURL) || '';
+});
+
+const subdomainCNAME = computed(
+  () => `${props.customDomain} CNAME ${domain.value}`
+);
+
+const dialogRef = ref(null);
+
+const handleDialogConfirm = () => {
+  emit('confirm');
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    :title="
+      t(
+        'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.HEADER'
+      )
+    "
+    :confirm-button-label="
+      t(
+        'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.CONFIRM_BUTTON_LABEL'
+      )
+    "
+    :show-cancel-button="false"
+    @confirm="handleDialogConfirm"
+  >
+    <template #description>
+      <p class="mb-0 text-sm text-n-slate-12">
+        {{
+          t(
+            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.DESCRIPTION'
+          )
+        }}
+      </p>
+    </template>
+    <template #form>
+      <div class="flex flex-col gap-6">
+        <span
+          class="h-10 px-3 py-2.5 text-sm select-none bg-transparent border rounded-lg text-n-slate-11 border-n-strong"
+        >
+          {{ subdomainCNAME }}
+        </span>
+        <p class="text-sm text-n-slate-12">
+          {{
+            t(
+              'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.HELP_TEXT'
+            )
+          }}
+        </p>
+      </div>
+    </template>
+  </Dialog>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
new file mode 100644
index 000000000..12007deba
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
@@ -0,0 +1,320 @@
+<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 } from '@vuelidate/validators';
+import { shouldBeUrl } from 'shared/helpers/Validators';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import EditableAvatar from 'dashboard/components-next/avatar/EditableAvatar.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'];
+  return inboxes
+    .filter(inbox => inbox.channel_type === 'Channel::WebWidget')
+    .map(inbox => ({
+      value: inbox.id,
+      label: inbox.name,
+    }));
+});
+
+const rules = {
+  name: { required, minLength: minLength(2) },
+  slug: { required },
+  homePageLink: { shouldBeUrl },
+};
+
+const v$ = useVuelidate(rules, state);
+
+const nameError = computed(() =>
+  v$.value.name.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.ERROR') : ''
+);
+
+const slugError = computed(() =>
+  v$.value.slug.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.ERROR') : ''
+);
+
+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>
+      <EditableAvatar
+        label="Avatar"
+        :src="state.logoUrl"
+        :name="state.name"
+        @upload="handleAvatarUpload"
+        @delete="handleAvatarDelete"
+      />
+    </div>
+    <div class="flex flex-col w-full gap-4">
+      <div class="flex items-start justify-between w-full gap-2">
+        <label
+          class="text-sm font-medium whitespace-nowrap min-w-[100px] py-2.5 text-slate-900 dark:text-slate-50"
+        >
+          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.NAME.LABEL') }}
+        </label>
+        <Input
+          v-model="state.name"
+          :placeholder="t('HELP_CENTER.PORTAL_SETTINGS.FORM.NAME.PLACEHOLDER')"
+          class="w-[432px]"
+          :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="flex items-start justify-between w-full gap-2">
+        <label
+          class="text-sm font-medium whitespace-nowrap min-w-[100px] py-2.5 text-slate-900 dark:text-slate-50"
+        >
+          {{ 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')
+          "
+          class="w-[432px]"
+          custom-input-class="!bg-transparent dark:!bg-transparent"
+        />
+      </div>
+      <div class="flex items-start justify-between w-full gap-2">
+        <label
+          class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 py-2.5 dark:text-slate-50"
+        >
+          {{ 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')
+          "
+          class="w-[432px]"
+          custom-input-class="!bg-transparent dark:!bg-transparent"
+        />
+      </div>
+      <div class="flex items-start justify-between w-full gap-2">
+        <label
+          class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 py-2.5 dark:text-slate-50"
+        >
+          {{ 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')
+          "
+          class="w-[432px]"
+          :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="flex items-start justify-between w-full gap-2">
+        <label
+          class="text-sm font-medium whitespace-nowrap min-w-[100px] py-2.5 text-slate-900 dark:text-slate-50"
+        >
+          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.SLUG.LABEL') }}
+        </label>
+        <Input
+          v-model="state.slug"
+          :placeholder="t('HELP_CENTER.PORTAL_SETTINGS.FORM.SLUG.PLACEHOLDER')"
+          class="w-[432px]"
+          :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="flex items-start justify-between w-full gap-2">
+        <label
+          class="text-sm font-medium whitespace-nowrap min-w-[100px] py-2.5 text-slate-900 dark:text-slate-50"
+        >
+          {{ 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="[&>button]:w-[432px] !w-[432px]"
+        />
+      </div>
+      <div class="flex items-start justify-between w-full gap-2">
+        <label
+          class="text-sm font-medium whitespace-nowrap min-w-[100px] py-2.5 text-slate-900 dark:text-slate-50"
+        >
+          {{ 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/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalConfigurationSettings.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalConfigurationSettings.vue
new file mode 100644
index 000000000..8e048bc9b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalConfigurationSettings.vue
@@ -0,0 +1,118 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+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,
+  },
+});
+
+const emit = defineEmits(['updatePortalConfiguration']);
+
+const { t } = useI18n();
+
+const addCustomDomainDialogRef = ref(null);
+const dnsConfigurationDialogRef = ref(null);
+const updatedDomainAddress = ref('');
+
+const customDomainAddress = computed(
+  () => props.activePortal?.custom_domain || ''
+);
+
+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();
+};
+</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 justify-between w-full gap-2">
+        <div
+          v-if="customDomainAddress"
+          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>
+        <div class="flex items-center justify-end w-full">
+          <Button
+            v-if="customDomainAddress"
+            :label="
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.EDIT_BUTTON'
+              )
+            "
+            variant="secondary"
+            @click="addCustomDomainDialogRef.dialogRef.open()"
+          />
+          <Button
+            v-else
+            :label="
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.ADD_BUTTON'
+              )
+            "
+            variant="secondary"
+            @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"
+      @confirm="closeDNSConfigurationDialog"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
index 9b18cada6..b96a98661 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
@@ -1,113 +1,130 @@
 <script setup>
-import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
-import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store.js';
 
-const handleUploadAvatar = () => {};
+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',
+]);
+
+const { t } = useI18n();
+const route = useRoute();
+
+const confirmDeletePortalDialogRef = ref(null);
+
+const currentPortalSlug = computed(() => route.params.portalSlug);
+
+const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
+
+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 openConfirmDeletePortalDialog = () => {
+  confirmDeletePortalDialogRef.value.dialogRef.open();
+};
+
+const handleDeletePortal = () => {
+  emit('deletePortal', activePortal.value);
+  confirmDeletePortalDialogRef.value.dialogRef.close();
+};
 </script>
 
-<!-- TODO: Add i18n -->
-<!-- eslint-disable vue/no-bare-strings-in-template -->
 <template>
   <HelpCenterLayout :show-pagination-footer="false">
     <template #content>
-      <div class="flex flex-col w-full gap-10 max-w-[640px] pt-2 pb-8">
-        <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"
-            >
-              Avatar
-            </label>
-            <Avatar
-              label="Avatar"
-              src="https://api.dicebear.com/9.x/avataaars/svg?seed=Amaya"
-              class="bg-ruby-300 dark:bg-ruby-400"
-              @upload="handleUploadAvatar"
-            />
-          </div>
-          <div class="flex flex-col w-full gap-2">
-            <div class="flex justify-between w-full h-10 gap-2 py-1">
-              <label
-                class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 dark:text-slate-50"
-              >
-                Name
-              </label>
-              <Input placeholder="Name" class="w-[432px]" />
-            </div>
-            <div class="flex justify-between w-full h-10 gap-2 py-1">
-              <label
-                class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 dark:text-slate-50"
-              >
-                Header text
-              </label>
-              <Input placeholder="Header text" class="w-[432px]" />
-            </div>
-            <div class="flex justify-between w-full h-10 gap-2 py-1">
-              <label
-                class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 dark:text-slate-50"
-              >
-                Page title
-              </label>
-              <Input placeholder="Page title" class="w-[432px]" />
-            </div>
-            <div class="flex justify-between w-full h-10 gap-2 py-1">
-              <label
-                class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 dark:text-slate-50"
-              >
-                Widget color
-              </label>
-            </div>
-            <div class="flex justify-end w-full gap-2 py-2">
-              <Button label="Save changes" size="sm" />
-            </div>
-          </div>
-          <div class="w-full h-px bg-slate-50 dark:bg-slate-800/50" />
-        </div>
-        <div class="flex flex-col w-full gap-6">
-          <div class="flex flex-col w-full gap-6">
-            <h6 class="text-base font-medium text-slate-900 dark:text-slate-50">
-              Configuration
+      <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-[640px] pb-8"
+      >
+        <PortalBaseSettings
+          :active-portal="activePortal"
+          :is-fetching="isFetching"
+          @update-portal="handleUpdatePortal"
+        />
+        <div class="w-full h-px bg-slate-50 dark:bg-slate-800/50" />
+        <PortalConfigurationSettings
+          :active-portal="activePortal"
+          :is-fetching="isFetching"
+          @update-portal-configuration="handleUpdatePortalConfiguration"
+        />
+        <div class="w-full h-px bg-slate-50 dark:bg-slate-800/50" />
+        <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>
-            <div class="flex flex-col w-full gap-4">
-              <div class="flex justify-between w-full gap-2 py-1">
-                <InlineInput
-                  placeholder="Slug"
-                  label="Slug:"
-                  custom-label-class="min-w-[100px]"
-                  custom-input-class="!w-[430px]"
-                />
-              </div>
-              <div class="flex justify-between w-full gap-2 py-1">
-                <InlineInput
-                  placeholder="Custom domain"
-                  label="Custom domain:"
-                  custom-label-class="min-w-[100px]"
-                  custom-input-class="!w-[430px]"
-                />
-              </div>
-              <div class="flex justify-between w-full gap-2 py-1">
-                <InlineInput
-                  placeholder="Home page link"
-                  label="Home page link:"
-                  custom-label-class="min-w-[100px]"
-                  custom-input-class="!w-[430px]"
-                />
-              </div>
-            </div>
-          </div>
-          <div class="flex justify-end w-full gap-3 py-4">
-            <Button label="Edit configuration" size="sm" variant="secondary" />
-            <Button
-              label="Delete Test-Help Center"
-              size="sm"
-              variant="destructive"
-            />
+            <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,
+                }
+              )
+            "
+            variant="destructive"
+            class="w-56"
+            @click="openConfirmDeletePortalDialog"
+          />
         </div>
       </div>
     </template>
+    <ConfirmDeletePortalDialog
+      ref="confirmDeletePortalDialogRef"
+      :active-portal-name="activePortalName"
+      @delete-portal="handleDeletePortal"
+    />
   </HelpCenterLayout>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue
new file mode 100644
index 000000000..78cc59003
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue
@@ -0,0 +1,148 @@
+<script setup>
+import { ref, reactive, watch, computed } from 'vue';
+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 { convertToCategorySlug } from 'dashboard/helper/commons.js';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { buildPortalURL } from 'dashboard/helper/portalHelper';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+
+const emit = defineEmits(['create']);
+
+const { t } = useI18n();
+const store = useStore();
+
+const dialogRef = ref(null);
+
+const isCreatingPortal = useMapGetter('portals/isCreatingPortal');
+
+const state = reactive({
+  name: '',
+  slug: '',
+  domain: '',
+  logoUrl: '',
+  avatarBlobId: '',
+});
+
+const rules = {
+  name: { required, minLength: minLength(2) },
+  slug: { required },
+};
+
+const v$ = useVuelidate(rules, state);
+
+const nameError = computed(() =>
+  v$.value.name.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.ERROR') : ''
+);
+
+const slugError = computed(() =>
+  v$.value.slug.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.ERROR') : ''
+);
+
+const isSubmitDisabled = computed(() => v$.value.$invalid);
+
+watch(
+  () => state.name,
+  () => {
+    state.slug = convertToCategorySlug(state.name);
+  }
+);
+
+const redirectToPortal = portal => {
+  emit('create', { slug: portal.slug, locale: 'en' });
+};
+
+const resetForm = () => {
+  Object.keys(state).forEach(key => {
+    state[key] = '';
+  });
+  v$.value.$reset();
+};
+const createPortal = async portal => {
+  try {
+    await store.dispatch('portals/create', portal);
+    dialogRef.value.close();
+
+    const analyticsPayload = {
+      has_custom_domain: Boolean(portal.custom_domain),
+    };
+    useTrack(PORTALS_EVENTS.ONBOARD_BASIC_INFORMATION, analyticsPayload);
+    useTrack(PORTALS_EVENTS.CREATE_PORTAL, analyticsPayload);
+
+    useAlert(
+      t('HELP_CENTER.PORTAL_SETTINGS.API.CREATE_PORTAL.SUCCESS_MESSAGE')
+    );
+
+    resetForm();
+    redirectToPortal(portal);
+  } catch (error) {
+    dialogRef.value.close();
+
+    useAlert(
+      error?.message ||
+        t('HELP_CENTER.PORTAL_SETTINGS.API.CREATE_PORTAL.ERROR_MESSAGE')
+    );
+  }
+};
+
+const handleDialogConfirm = async () => {
+  const isFormCorrect = await v$.value.$validate();
+  if (!isFormCorrect) return;
+
+  const portal = {
+    name: state.name,
+    slug: state.slug,
+    custom_domain: state.domain,
+    blob_id: state.avatarBlobId || null,
+    color: '#2781F6', // The default color is set to Chatwoot brand color
+  };
+  await createPortal(portal);
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    :title="t('HELP_CENTER.CREATE_PORTAL_DIALOG.TITLE')"
+    :confirm-button-label="
+      t('HELP_CENTER.CREATE_PORTAL_DIALOG.CONFIRM_BUTTON_LABEL')
+    "
+    :description="t('HELP_CENTER.CREATE_PORTAL_DIALOG.DESCRIPTION')"
+    :disable-confirm-button="isSubmitDisabled || isCreatingPortal"
+    :is-loading="isCreatingPortal"
+    @confirm="handleDialogConfirm"
+  >
+    <template #form>
+      <div class="flex flex-col gap-6">
+        <Input
+          id="portal-name"
+          v-model="state.name"
+          type="text"
+          :placeholder="t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.PLACEHOLDER')"
+          :label="t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.LABEL')"
+          :message-type="nameError ? 'error' : 'info'"
+          :message="
+            nameError || t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.MESSAGE')
+          "
+        />
+        <Input
+          id="portal-slug"
+          v-model="state.slug"
+          type="text"
+          :placeholder="t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.PLACEHOLDER')"
+          :label="t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.LABEL')"
+          :message-type="slugError ? 'error' : 'info'"
+          :message="slugError || buildPortalURL(state.slug)"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
index 8700b1227..49552679d 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
@@ -1,111 +1,143 @@
 <script setup>
-import { ref } from 'vue';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { useMapGetter, useStore } from 'dashboard/composables/store.js';
+
 import Button from 'dashboard/components-next/button/Button.vue';
+import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
 
-defineProps({
-  portals: {
-    type: Array,
-    default: () => [
-      {
-        id: 1,
-        name: 'Chatwoot Help Center',
-        articles: 67,
-        domain: 'chatwoot.help',
-        slug: 'help-center',
-      },
-      {
-        id: 2,
-        name: 'Chatwoot Handbook',
-        articles: 42,
-        domain: 'chatwoot.help',
-        slug: 'handbook',
-      },
-    ],
-  },
-  header: {
-    type: String,
-    default: 'Portals',
-  },
-  description: {
-    type: String,
-    default: 'Create and manage multiple portals',
-  },
-});
+const emit = defineEmits(['close', 'createPortal']);
 
-const selectedPortal = ref(1);
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
 
-const handlePortalChange = id => {
-  selectedPortal.value = id;
+const DEFAULT_ROUTE = 'portals_articles_index';
+const CATEGORY_ROUTE = 'portals_categories_index';
+const CATEGORY_SUB_ROUTES = [
+  'portals_categories_articles_index',
+  'portals_categories_articles_edit',
+];
+
+const portals = useMapGetter('portals/allPortals');
+
+const currentPortalSlug = computed(() => route.params.portalSlug);
+
+const isPortalActive = portal => {
+  return portal.slug === currentPortalSlug.value;
+};
+
+const getPortalThumbnailSrc = portal => {
+  return portal?.logo?.file_url || '';
+};
+
+const fetchPortalAndItsCategories = async (slug, locale) => {
+  await store.dispatch('portals/switchPortal', true);
+  await store.dispatch('portals/index');
+  const selectedPortalParam = {
+    portalSlug: slug,
+    locale,
+  };
+  await store.dispatch('portals/show', selectedPortalParam);
+  await store.dispatch('categories/index', selectedPortalParam);
+  await store.dispatch('agents/get');
+  await store.dispatch('portals/switchPortal', false);
+};
+
+const handlePortalChange = async portal => {
+  if (isPortalActive(portal)) return;
+  const {
+    slug,
+    meta: { default_locale: defaultLocale },
+  } = portal;
+  emit('close');
+  await fetchPortalAndItsCategories(slug, defaultLocale);
+  const targetRouteName = CATEGORY_SUB_ROUTES.includes(route.name)
+    ? CATEGORY_ROUTE
+    : route.name || DEFAULT_ROUTE;
+  router.push({
+    name: targetRouteName,
+    params: {
+      portalSlug: slug,
+      locale: defaultLocale,
+    },
+  });
+};
+
+const openCreatePortalDialog = () => {
+  emit('createPortal');
+  emit('close');
+};
+
+const redirectToPortalHomePage = () => {
+  router.push({
+    name: 'portals_index',
+    params: {
+      navigationPath: DEFAULT_ROUTE,
+    },
+  });
 };
 </script>
 
-<!-- TODO: Add i18n -->
-<!-- eslint-disable vue/no-bare-strings-in-template -->
 <template>
   <div
-    class="pt-5 pb-3 bg-white z-50 dark:bg-slate-800 absolute w-[440px] rounded-xl shadow-md flex flex-col gap-4"
+    class="pt-5 pb-3 bg-n-alpha-3 backdrop-blur-[100px] z-50 absolute w-[440px] rounded-xl shadow-md flex flex-col gap-4"
   >
-    <div class="flex items-center justify-between gap-4 px-6 pb-2">
+    <div
+      class="flex items-center justify-between gap-4 px-6 pb-3 border-b border-n-alpha-2"
+    >
       <div class="flex flex-col gap-1">
-        <h2 class="text-base font-medium text-slate-900 dark:text-slate-50">
-          {{ header }}
+        <h2
+          class="text-base font-medium cursor-pointer text-slate-900 dark:text-slate-50 w-fit hover:underline"
+          @click="redirectToPortalHomePage"
+        >
+          {{ t('HELP_CENTER.PORTAL_SWITCHER.PORTALS') }}
         </h2>
         <p class="text-sm text-slate-600 dark:text-slate-300">
-          {{ description }}
+          {{ t('HELP_CENTER.PORTAL_SWITCHER.CREATE_PORTAL') }}
         </p>
       </div>
-      <Button label="New portal" variant="secondary" icon="add" size="sm" />
+      <Button
+        :label="t('HELP_CENTER.PORTAL_SWITCHER.NEW_PORTAL')"
+        variant="secondary"
+        icon="add"
+        size="sm"
+        class="!bg-n-alpha-2 hover:!bg-n-alpha-3"
+        @click="openCreatePortalDialog"
+      />
     </div>
-    <div v-if="portals.length > 0" class="flex flex-col gap-3">
-      <template v-for="(portal, index) in portals" :key="portal.id">
-        <div class="flex flex-col gap-2 px-6 py-2">
-          <div class="flex items-center justify-between">
-            <div class="flex items-center">
-              <input
-                :id="portal.id"
-                v-model="selectedPortal"
-                type="radio"
-                :value="portal.id"
-                class="mr-3"
-                @change="handlePortalChange(portal.id)"
-              />
-              <label
-                :for="portal.id"
-                class="text-sm font-medium text-slate-900 dark:text-slate-100"
-              >
-                {{ portal.name }}
-              </label>
-            </div>
-            <div class="w-4 h-4 rounded-full bg-slate-100 dark:bg-slate-700" />
-          </div>
-          <div class="inline-flex items-center gap-2 py-1 text-sm">
-            <span class="text-slate-600 dark:text-slate-400">
-              articles:
-              <span class="text-slate-800 dark:text-slate-200">
-                {{ portal.articles }}
-              </span>
-            </span>
-            <div class="w-px h-3 bg-slate-50 dark:bg-slate-700" />
-            <span class="text-slate-600 dark:text-slate-400">
-              domain:
-              <span class="text-slate-800 dark:text-slate-200">
-                {{ portal.domain }}
-              </span>
-            </span>
-            <div class="w-px h-3 bg-slate-50 dark:bg-slate-700" />
-            <span class="text-slate-600 dark:text-slate-400">
-              slug:
-              <span class="text-slate-800 dark:text-slate-200">
-                {{ portal.slug }}
-              </span>
-            </span>
-          </div>
-        </div>
-        <div
-          v-if="index < portals.length - 1 && portals.length > 1"
-          class="w-full h-px bg-slate-50 dark:bg-slate-700/50"
-        />
-      </template>
+    <div v-if="portals.length > 0" class="flex flex-col gap-2 px-4">
+      <Button
+        v-for="(portal, index) in portals"
+        :key="index"
+        :label="portal.name"
+        variant="ghost"
+        :icon="isPortalActive(portal) ? 'checkmark-lucide' : ''"
+        icon-lib="lucide"
+        icon-position="right"
+        class="!justify-start !px-2 !py-2 hover:!bg-n-alpha-2 [&>svg]:text-n-teal-10 [&>svg]:w-5 [&>svg]:h-5 h-9"
+        size="sm"
+        @click="handlePortalChange(portal)"
+      >
+        <template #leftPrefix>
+          <Thumbnail
+            v-if="portal"
+            :author="portal"
+            :name="portal.name"
+            :size="20"
+            :src="getPortalThumbnailSrc(portal)"
+            :show-author-name="false"
+            icon-name="building-lucide"
+          />
+        </template>
+        <template #rightPrefix>
+          <span class="text-sm truncate text-n-slate-11">
+            {{ portal.custom_domain || '' }}
+          </span>
+        </template>
+      </Button>
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/avatar/Avatar.story.vue b/app/javascript/dashboard/components-next/avatar/Avatar.story.vue
index d502291c9..3d906f0a9 100644
--- a/app/javascript/dashboard/components-next/avatar/Avatar.story.vue
+++ b/app/javascript/dashboard/components-next/avatar/Avatar.story.vue
@@ -24,14 +24,14 @@ import Avatar from './Avatar.vue';
     </Variant>
 
     <Variant title="Invalid or empty SRC">
-      <div class="p-4 bg-white dark:bg-slate-900 space-x-4">
+      <div class="p-4 space-x-4 bg-white dark:bg-slate-900">
         <Avatar src="https://example.com/ruby.png" name="Ruby" allow-upload />
         <Avatar name="Bruce Wayne" allow-upload />
       </div>
     </Variant>
 
     <Variant title="Rounded Full">
-      <div class="p-4 bg-white dark:bg-slate-900 space-x-4">
+      <div class="p-4 space-x-4 bg-white dark:bg-slate-900">
         <Avatar
           src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
           allow-upload
diff --git a/app/javascript/dashboard/components-next/avatar/EditableAvatar.story.vue b/app/javascript/dashboard/components-next/avatar/EditableAvatar.story.vue
new file mode 100644
index 000000000..ca0e38173
--- /dev/null
+++ b/app/javascript/dashboard/components-next/avatar/EditableAvatar.story.vue
@@ -0,0 +1,36 @@
+<script setup>
+import EditableAvatar from './EditableAvatar.vue';
+</script>
+
+<template>
+  <Story title="Components/Avatar" :layout="{ type: 'grid', width: '400' }">
+    <Variant title="Default">
+      <div class="p-4 bg-white dark:bg-slate-900">
+        <EditableAvatar
+          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Amaya"
+          class="bg-ruby-300 dark:bg-ruby-900"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Different Sizes">
+      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
+        <EditableAvatar
+          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Felix"
+          :size="48"
+          class="bg-green-300 dark:bg-green-900"
+        />
+        <EditableAvatar
+          :size="72"
+          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Jade"
+          class="bg-indigo-300 dark:bg-indigo-900"
+        />
+        <EditableAvatar
+          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Emery"
+          :size="96"
+          class="bg-woot-300 dark:bg-woot-900"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/avatar/EditableAvatar.vue b/app/javascript/dashboard/components-next/avatar/EditableAvatar.vue
new file mode 100644
index 000000000..2d70ac6ec
--- /dev/null
+++ b/app/javascript/dashboard/components-next/avatar/EditableAvatar.vue
@@ -0,0 +1,107 @@
+<script setup>
+import { computed, ref } from 'vue';
+
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+
+const props = defineProps({
+  src: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: Number,
+    default: 72,
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['upload', 'delete']);
+
+const avatarSize = computed(() => `${props.size}px`);
+const iconSize = computed(() => `${props.size / 2}px`);
+
+const fileInput = ref(null);
+const imgError = ref(false);
+
+const shouldShowImage = computed(() => props.src && !imgError.value);
+
+const handleUploadAvatar = () => {
+  fileInput.value.click();
+};
+
+const handleImageUpload = event => {
+  const [file] = event.target.files;
+  if (file) {
+    emit('upload', {
+      file,
+      url: file ? URL.createObjectURL(file) : null,
+    });
+  }
+};
+
+const handleDeleteAvatar = () => {
+  if (fileInput.value) {
+    fileInput.value.value = null;
+  }
+  emit('delete');
+};
+
+const handleDismiss = event => {
+  event.stopPropagation();
+  handleDeleteAvatar();
+};
+</script>
+
+<template>
+  <div
+    class="relative flex flex-col items-center gap-2 select-none rounded-xl group/avatar"
+    :style="{ width: avatarSize, height: avatarSize }"
+  >
+    <img
+      v-if="shouldShowImage"
+      :src="src"
+      :alt="name || 'avatar'"
+      class="object-cover w-full h-full shadow-sm rounded-xl"
+      @error="imgError = true"
+    />
+    <div
+      v-else
+      class="flex items-center justify-center w-full h-full rounded-xl bg-n-alpha-2"
+    >
+      <FluentIcon
+        icon="building-lucide"
+        icon-lib="lucide"
+        :size="iconSize"
+        class="dark:text-n-brand/50 text-n-brand/30"
+      />
+    </div>
+    <div
+      v-if="src"
+      class="absolute z-20 flex items-center cursor-pointer justify-center w-6 h-6 transition-all invisible opacity-0 duration-500 ease-in-out -top-2.5 -right-2.5 rounded-xl bg-n-solid-3 group-hover/avatar:visible group-hover/avatar:opacity-100"
+      @click="handleDismiss"
+    >
+      <FluentIcon icon="dismiss" :size="16" class="text-n-slate-11" />
+    </div>
+    <div
+      class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-500 ease-in-out opacity-0 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
+      @click="handleUploadAvatar"
+    >
+      <FluentIcon
+        icon="upload-lucide"
+        icon-lib="lucide"
+        :size="iconSize"
+        class="text-white dark:text-white"
+      />
+      <input
+        ref="fileInput"
+        type="file"
+        accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+        class="hidden"
+        @change="handleImageUpload"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.story.vue b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.story.vue
index c248bbd2b..0c2bdf115 100644
--- a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.story.vue
+++ b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.story.vue
@@ -10,14 +10,14 @@ const twoItems = ref([
 const threeItems = ref([
   { label: 'Home', link: '#' },
   { label: 'Categories', link: '#' },
-  { label: 'Marketing', count: 6 },
+  { label: 'Marketing', count: 6, emoji: '📊' },
 ]);
 const longBreadcrumb = ref([
   { label: 'Home', link: '#' },
-  { label: 'Categories', link: '#' },
+  { label: 'Categories', link: '#', emoji: '📁' },
   { label: 'Marketing', link: '#' },
-  { label: 'Digital', link: '#' },
-  { label: 'Social Media', count: 12 },
+  { label: 'Digital', link: '#', emoji: '💻' },
+  { label: 'Social Media', count: 12, emoji: '📱' },
 ]);
 </script>
 
diff --git a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
index 37c66735b..99f27cc9f 100644
--- a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
+++ b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { defineProps } from 'vue';
 import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 
 defineProps({
@@ -16,44 +18,43 @@ defineProps({
       );
     },
   },
-  countLabel: {
-    type: String,
-    default: '',
-  },
 });
 
+const emit = defineEmits(['click']);
+
 const { t } = useI18n();
+
+const onClick = event => {
+  emit('click', event);
+};
 </script>
 
 <template>
   <nav :aria-label="t('BREADCRUMB.ARIA_LABEL')" class="flex items-center h-8">
     <ol class="flex items-center mb-0">
-      <li
-        v-for="(item, index) in items"
-        :key="index"
-        class="flex items-center gap-3"
-      >
-        <template v-if="index === items.length - 1">
-          <span class="text-sm text-slate-900 dark:text-slate-50">
-            {{
-              `${item.label}${item.count ? ` (${item.count} ${countLabel})` : ''}`
-            }}
+      <li v-for="(item, index) in items" :key="index" class="flex items-center">
+        <Button
+          v-if="index === 0"
+          :label="item.label"
+          variant="link"
+          text-variant="info"
+          class="!p-0 text-sm !font-normal hover:!no-underline max-w-56 !text-slate-300 dark:!text-slate-500 hover:!text-slate-700 dark:hover:!text-slate-100"
+          size="sm"
+          @click="onClick"
+        />
+        <template v-else>
+          <FluentIcon
+            icon="chevron-lucide-right"
+            size="18"
+            icon-lib="lucide"
+            class="flex-shrink-0 mx-2 text-slate-300 dark:text-slate-500"
+          />
+          <span
+            class="text-sm truncate text-slate-900 dark:text-slate-50 max-w-56"
+          >
+            {{ item.emoji ? item.emoji : '' }} {{ item.label }}
           </span>
         </template>
-        <a
-          v-else
-          :href="item.link"
-          class="text-sm transition-colors duration-200 text-slate-300 dark:text-slate-500 hover:text-slate-700 dark:hover:text-slate-100"
-        >
-          {{ item.label }}
-        </a>
-        <FluentIcon
-          v-if="index < items.length - 1"
-          icon="chevron-lucide-right"
-          size="18"
-          icon-lib="lucide"
-          class="flex-shrink-0 text-slate-300 dark:text-slate-500 ltr:mr-3 rtl:mr-0 rtl:ml-3"
-        />
       </li>
     </ol>
   </nav>
diff --git a/app/javascript/dashboard/components-next/button/Button.story.vue b/app/javascript/dashboard/components-next/button/Button.story.vue
index f25ceda0a..e99bed962 100644
--- a/app/javascript/dashboard/components-next/button/Button.story.vue
+++ b/app/javascript/dashboard/components-next/button/Button.story.vue
@@ -100,7 +100,7 @@ import Button from './Button.vue';
           icon-position="left"
           size="sm"
         />
-        <Button icon="emoji-add" size="icon" />
+        <Button icon="emoji-add" size="sm" />
       </div>
     </Variant>
 
@@ -119,7 +119,7 @@ import Button from './Button.vue';
           icon-position="right"
           size="sm"
         />
-        <Button icon="emoji-add" size="icon" />
+        <Button icon="emoji-add" size="sm" />
       </div>
     </Variant>
   </Story>
diff --git a/app/javascript/dashboard/components-next/button/Button.vue b/app/javascript/dashboard/components-next/button/Button.vue
index d2487cabe..a9df7db3b 100644
--- a/app/javascript/dashboard/components-next/button/Button.vue
+++ b/app/javascript/dashboard/components-next/button/Button.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { computed } from 'vue';
+
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
 const props = defineProps({
   label: {
@@ -29,12 +31,21 @@ const props = defineProps({
   size: {
     type: String,
     default: 'default',
-    validator: value => ['default', 'sm', 'lg', 'icon'].includes(value),
+    validator: value => ['default', 'sm', 'lg'].includes(value),
+  },
+  type: {
+    type: String,
+    default: 'button',
+    validator: value => ['button', 'submit', 'reset'].includes(value),
   },
   icon: {
     type: String,
     default: '',
   },
+  emoji: {
+    type: String,
+    default: '',
+  },
   iconPosition: {
     type: String,
     default: 'left',
@@ -44,6 +55,10 @@ const props = defineProps({
     type: String,
     default: 'fluent',
   },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['click']);
@@ -51,33 +66,28 @@ const emit = defineEmits(['click']);
 const buttonVariants = {
   variant: {
     default:
-      'bg-woot-500 dark:bg-woot-500 text-white dark:text-white hover:bg-woot-600 dark:hover:bg-woot-600',
-    destructive:
-      'bg-ruby-700 dark:bg-ruby-700 text-white dark:text-white hover:bg-ruby-800 dark:hover:bg-ruby-800',
+      'bg-n-brand text-white dark:text-white hover:bg-woot-600 dark:hover:bg-woot-600',
+    destructive: 'bg-n-ruby-9 text-white dark:text-white hover:bg-n-ruby-10',
     outline:
-      'border border-slate-200 dark:border-slate-700/50 hover:border-slate-300 dark:hover:border-slate-600',
-    secondary:
-      'bg-slate-50 text-slate-900 dark:bg-slate-700/50 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-600',
-    ghost:
-      'text-slate-900 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800',
-    link: 'text-woot-500 underline-offset-4 hover:underline dark:hover:underline',
+      'border border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6',
+    secondary: 'bg-n-solid-3 text-n-slate-12 hover:bg-n-solid-2',
+    ghost: 'text-n-slate-12',
+    link: 'text-n-brand underline-offset-4 hover:underline dark:hover:underline',
   },
   size: {
     default: 'h-10 px-4 py-2',
-    sm: 'h-8 px-3',
-    lg: 'h-11 px-4',
-    icon: 'h-auto w-auto px-2',
+    sm: 'h-8 px-3 py-1',
+    lg: 'h-12 px-5 py-3',
   },
   text: {
     default:
-      '!text-woot-500 dark:!text-woot-500 hover:!text-woot-600 dark:hover:!text-woot-600',
+      '!text-n-brand dark:!text-n-brand hover:!text-woot-600 dark:hover:!text-woot-600',
     success:
       '!text-green-500 dark:!text-green-500 hover:!text-green-600 dark:hover:!text-green-600',
     warning:
       '!text-amber-600 dark:!text-amber-600 hover:!text-amber-600 dark:hover:!text-amber-600',
-    danger:
-      '!text-ruby-700 dark:!text-ruby-700 hover:!text-ruby-800 dark:hover:!text-ruby-800',
-    info: '!text-slate-500 dark:!text-slate-400 hover:!text-slate-600 dark:hover:!text-slate-500',
+    danger: '!text-n-ruby-11 hover:!text-n-ruby-10',
+    info: '!text-n-slate-12 hover:!text-n-slate-11',
   },
 };
 
@@ -100,35 +110,43 @@ const iconSize = computed(() => {
   return 18;
 });
 
-const handleClick = () => {
-  emit('click');
+const handleClick = e => {
+  emit('click', e);
 };
 </script>
 
 <template>
   <button
     :class="buttonClasses"
-    class="inline-flex items-center justify-center h-10 min-w-0 gap-2 text-sm font-medium transition-all duration-200 ease-in-out rounded-lg disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
+    :type="type"
+    class="inline-flex items-center justify-center min-w-0 gap-2 text-sm font-medium transition-all duration-200 ease-in-out rounded-lg disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
     @click="handleClick"
   >
     <FluentIcon
-      v-if="icon && iconPosition === 'left'"
+      v-if="icon && iconPosition === 'left' && !isLoading"
       :icon="icon"
       :size="iconSize"
       :icon-lib="iconLib"
       class="flex-shrink-0"
+      :class="{
+        'text-n-slate-11 dark:text-n-slate-11': variant === 'secondary',
+      }"
     />
-    <slot>
-      <span v-if="label" class="min-w-0 truncate">
-        {{ label }}
-      </span>
-    </slot>
+    <Spinner v-if="isLoading" class="!w-5 !h-5 flex-shrink-0" />
+    <slot name="leftPrefix" />
+    <span v-if="emoji">{{ emoji }}</span>
+    <span v-if="label" class="min-w-0 truncate">{{ label }}</span>
+    <slot />
+    <slot name="rightPrefix" />
     <FluentIcon
       v-if="icon && iconPosition === 'right'"
       :icon="icon"
       :size="iconSize"
       :icon-lib="iconLib"
       class="flex-shrink-0"
+      :class="{
+        'text-n-slate-11 dark:text-n-slate-11': variant === 'secondary',
+      }"
     />
   </button>
 </template>
diff --git a/app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue b/app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue
new file mode 100644
index 000000000..6ccd1bd72
--- /dev/null
+++ b/app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue
@@ -0,0 +1,102 @@
+<script setup>
+import { ref, defineProps, defineEmits } from 'vue';
+import { Chrome } from '@lk77/vue3-color';
+import { OnClickOutside } from '@vueuse/components';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const isPickerOpen = ref(false);
+
+const toggleColorPicker = () => {
+  isPickerOpen.value = !isPickerOpen.value;
+};
+
+const closeTogglePicker = () => {
+  if (isPickerOpen.value) {
+    toggleColorPicker();
+  }
+};
+
+const updateColor = e => {
+  emit('update:modelValue', e.hex);
+};
+
+const pickerRef = ref(null);
+</script>
+
+<template>
+  <div ref="pickerRef" class="relative w-fit">
+    <OnClickOutside @trigger="closeTogglePicker">
+      <Button
+        :label="modelValue"
+        variant="secondary"
+        icon-lib="lucide"
+        icon-position="right"
+        icon="pipette-lucide"
+        class="!px-3 !py-3 [&>svg]:w-4 [&>svg]:h-4"
+        @click="toggleColorPicker"
+      >
+        <template #leftPrefix>
+          <div
+            class="w-4 h-4 rounded-sm"
+            :style="{ backgroundColor: modelValue }"
+          />
+        </template>
+      </Button>
+      <Chrome
+        v-if="isPickerOpen"
+        disable-alpha
+        :model-value="modelValue"
+        class="colorpicker--chrome"
+        @update:model-value="updateColor"
+      />
+    </OnClickOutside>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.colorpicker--chrome.vc-chrome {
+  @apply shadow-lg absolute bg-n-background z-[9999] border border-n-weak dark:border-n-weak rounded-[8px];
+
+  :deep() {
+    .vc-chrome-saturation-wrap {
+      @apply rounded-t-[7px];
+
+      .vc-saturation {
+        @apply rounded-t-[8px];
+      }
+    }
+
+    .vc-chrome-body {
+      @apply rounded-b-[7px] bg-n-alpha-3;
+
+      .vc-chrome-toggle-btn {
+        .vc-chrome-toggle-icon svg {
+          @apply [&>path]:fill-n-slate-10 dark:[&>path]:fill-n-slate-10 left-3 relative;
+        }
+        .vc-chrome-toggle-icon-highlight {
+          @apply bg-n-background;
+        }
+      }
+    }
+
+    input,
+    .vc-input__input {
+      @apply bg-n-background text-slate-900 dark:text-slate-50 rounded-md shadow-none;
+    }
+
+    .vc-input__label {
+      @apply text-n-slate-11 dark:text-n-slate-11;
+    }
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/combobox/ComboBox.vue b/app/javascript/dashboard/components-next/combobox/ComboBox.vue
index 27d442c4f..05ea4e67c 100644
--- a/app/javascript/dashboard/components-next/combobox/ComboBox.vue
+++ b/app/javascript/dashboard/components-next/combobox/ComboBox.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { nextTick, ref, computed, watch } from 'vue';
-import { onClickOutside } from '@vueuse/core';
+import { ref, computed, watch, nextTick } from 'vue';
+import { OnClickOutside } from '@vueuse/components';
 import { useI18n } from 'vue-i18n';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -32,6 +32,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  message: {
+    type: String,
+    default: '',
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -80,10 +84,6 @@ watch(
     selectedValue.value = newValue;
   }
 );
-
-onClickOutside(comboboxRef, () => {
-  open.value = false;
-});
 </script>
 
 <template>
@@ -95,69 +95,77 @@ onClickOutside(comboboxRef, () => {
       'group/combobox': !disabled,
     }"
   >
-    <Button
-      variant="outline"
-      :label="selectedLabel"
-      icon-position="right"
-      size="sm"
-      :disabled="disabled"
-      class="justify-between w-full text-slate-900 dark:text-slate-100 group-hover/combobox:border-slate-300 dark:group-hover/combobox:border-slate-600"
-      :icon="open ? 'chevron-up' : 'chevron-down'"
-      @click="toggleDropdown"
-    />
-    <div
-      v-show="open"
-      class="absolute z-50 w-full mt-1 transition-opacity duration-200 bg-white border rounded-md shadow-lg border-slate-200 dark:bg-slate-900 dark:border-slate-700/50"
-    >
-      <div class="relative border-b border-slate-100 dark:border-slate-700/50">
-        <FluentIcon
-          icon="search"
-          :size="14"
-          class="absolute text-gray-400 dark:text-slate-500 top-3 left-3"
-          aria-hidden="true"
-        />
-        <input
-          ref="searchInput"
-          v-model="search"
-          type="search"
-          :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
-          class="w-full py-2 pl-10 pr-2 text-sm bg-white border-none rounded-t-md dark:bg-slate-900 text-slate-900 dark:text-slate-50"
-        />
-      </div>
-      <ul
-        class="py-1 overflow-auto max-h-60"
-        role="listbox"
-        :aria-activedescendant="selectedValue"
+    <OnClickOutside @trigger="open = false">
+      <Button
+        variant="outline"
+        :label="selectedLabel"
+        icon-position="right"
+        :disabled="disabled"
+        class="justify-between w-full !px-2 !py-2.5 text-n-slate-12 font-normal group-hover/combobox:border-n-slate-6"
+        :icon="open ? 'chevron-lucide-up' : 'chevron-lucide-down'"
+        icon-lib="lucide"
+        @click="toggleDropdown"
+      />
+      <div
+        v-show="open"
+        class="absolute z-50 w-full mt-1 transition-opacity duration-200 border rounded-md shadow-lg bg-n-solid-1 border-n-strong"
       >
-        <li
-          v-for="option in filteredOptions"
-          :key="option.value"
-          class="flex items-center justify-between w-full gap-2 px-3 py-2 text-sm transition-colors duration-150 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/50"
-          :class="{
-            'bg-slate-50 dark:bg-slate-800/50': option.value === selectedValue,
-          }"
-          role="option"
-          :aria-selected="option.value === selectedValue"
-          @click="selectOption(option)"
-        >
-          <span :class="{ 'font-medium': option.value === selectedValue }">
-            {{ option.label }}
-          </span>
+        <div class="relative border-b border-n-strong">
           <FluentIcon
-            v-if="option.value === selectedValue"
-            icon="checkmark"
-            :size="16"
-            class="flex-shrink-0"
+            icon="search"
+            :size="14"
+            class="absolute text-gray-400 dark:text-slate-500 top-3 left-3"
             aria-hidden="true"
           />
-        </li>
-        <li
-          v-if="filteredOptions.length === 0"
-          class="px-3 py-2 text-sm text-slate-600 dark:text-slate-300"
+          <input
+            ref="searchInput"
+            v-model="search"
+            type="search"
+            :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
+            class="w-full py-2 pl-10 pr-2 text-sm border-none rounded-t-md bg-n-solid-1 text-slate-900 dark:text-slate-50"
+          />
+        </div>
+        <ul
+          class="py-1 mb-0 overflow-auto max-h-60"
+          role="listbox"
+          :aria-activedescendant="selectedValue"
         >
-          {{ emptyState || t('COMBOBOX.EMPTY_STATE') }}
-        </li>
-      </ul>
-    </div>
+          <li
+            v-for="option in filteredOptions"
+            :key="option.value"
+            class="flex items-center justify-between !text-n-slate-12 w-full gap-2 px-2 py-2 text-sm transition-colors duration-150 cursor-pointer hover:bg-n-solid-2"
+            :class="{
+              'bg-n-solid-2': option.value === selectedValue,
+            }"
+            role="option"
+            :aria-selected="option.value === selectedValue"
+            @click="selectOption(option)"
+          >
+            <span :class="{ 'font-medium': option.value === selectedValue }">
+              {{ option.label }}
+            </span>
+            <FluentIcon
+              v-if="option.value === selectedValue"
+              icon="checkmark"
+              :size="16"
+              class="flex-shrink-0 text-n-slate-11 dark:text-n-slate-11"
+              aria-hidden="true"
+            />
+          </li>
+          <li
+            v-if="filteredOptions.length === 0"
+            class="px-3 py-2 text-sm text-slate-600 dark:text-slate-300"
+          >
+            {{ emptyState || t('COMBOBOX.EMPTY_STATE') }}
+          </li>
+        </ul>
+      </div>
+      <p
+        v-if="message"
+        class="mt-2 mb-0 text-xs truncate transition-all duration-500 ease-in-out text-n-slate-11 dark:text-n-slate-11"
+      >
+        {{ message }}
+      </p>
+    </OnClickOutside>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/dialog/Dialog.vue b/app/javascript/dashboard/components-next/dialog/Dialog.vue
index 8982d85b3..7ff0ada17 100644
--- a/app/javascript/dashboard/components-next/dialog/Dialog.vue
+++ b/app/javascript/dashboard/components-next/dialog/Dialog.vue
@@ -1,7 +1,9 @@
 <script setup>
 import { ref } from 'vue';
-import { onClickOutside } from '@vueuse/core';
+import { OnClickOutside } from '@vueuse/components';
 import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store.js';
+
 import Button from 'dashboard/components-next/button/Button.vue';
 
 defineProps({
@@ -26,12 +28,30 @@ defineProps({
     type: String,
     default: '',
   },
+  disableConfirmButton: {
+    type: Boolean,
+    default: false,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  showCancelButton: {
+    type: Boolean,
+    default: true,
+  },
+  showConfirmButton: {
+    type: Boolean,
+    default: true,
+  },
 });
 
-const emit = defineEmits(['confirm']);
+const emit = defineEmits(['confirm', 'close']);
 
 const { t } = useI18n();
 
+const isRTL = useMapGetter('accounts/isRTL');
+
 const dialogRef = ref(null);
 const dialogContentRef = ref(null);
 
@@ -39,71 +59,69 @@ const open = () => {
   dialogRef.value?.showModal();
 };
 const close = () => {
+  emit('close');
   dialogRef.value?.close();
 };
 const confirm = () => {
   emit('confirm');
 };
 
-defineExpose({ open });
-
-onClickOutside(dialogContentRef, event => {
-  if (
-    dialogRef.value &&
-    dialogRef.value.open &&
-    event.target === dialogRef.value
-  ) {
-    close();
-  }
-});
+defineExpose({ open, close });
 </script>
 
 <template>
   <Teleport to="body">
     <dialog
       ref="dialogRef"
-      class="w-full max-w-lg overflow-visible shadow-xl bg-modal-backdrop-light dark:bg-modal-backdrop-dark rounded-xl"
+      class="w-full max-w-lg overflow-visible transition-all duration-300 ease-in-out shadow-xl rounded-xl"
+      :dir="isRTL ? 'rtl' : 'ltr'"
       @close="close"
     >
-      <div
-        ref="dialogContentRef"
-        class="flex flex-col w-full h-auto gap-6 p-6 overflow-visible text-left align-middle transition-all duration-300 ease-in-out transform bg-white shadow-xl dark:bg-slate-800 rounded-xl"
-        @click.stop
-      >
-        <div class="flex flex-col gap-2">
-          <h3
-            class="text-base font-medium leading-6 text-gray-900 dark:text-white"
-          >
-            {{ title }}
-          </h3>
-          <p
-            v-if="description"
-            class="mb-0 text-sm text-slate-500 dark:text-slate-400"
-          >
-            {{ description }}
-          </p>
+      <OnClickOutside @trigger="close">
+        <div
+          ref="dialogContentRef"
+          class="flex flex-col w-full h-auto gap-6 p-6 overflow-visible text-left align-middle transition-all duration-300 ease-in-out transform bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
+          @click.stop
+        >
+          <div class="flex flex-col gap-2">
+            <h3 class="text-base font-medium leading-6 text-n-slate-12">
+              {{ title }}
+            </h3>
+            <slot name="description">
+              <p v-if="description" class="mb-0 text-sm text-n-slate-11">
+                {{ description }}
+              </p>
+            </slot>
+          </div>
+          <slot name="form">
+            <!-- Form content will be injected here -->
+          </slot>
+          <div class="flex items-center justify-between w-full gap-3">
+            <Button
+              v-if="showCancelButton"
+              variant="ghost"
+              :label="cancelButtonLabel || t('DIALOG.BUTTONS.CANCEL')"
+              class="w-full bg-n-alpha-2 hover:bg-n-alpha-3"
+              @click="close"
+            />
+            <Button
+              v-if="showConfirmButton"
+              :variant="type === 'edit' ? 'default' : 'destructive'"
+              :label="confirmButtonLabel || t('DIALOG.BUTTONS.CONFIRM')"
+              class="w-full"
+              :is-loading="isLoading"
+              :disabled="disableConfirmButton || isLoading"
+              @click="confirm"
+            />
+          </div>
         </div>
-        <slot name="form">
-          <!-- Form content will be injected here -->
-        </slot>
-        <div class="flex items-center justify-between w-full gap-3">
-          <Button
-            variant="secondary"
-            :label="cancelButtonLabel || t('DIALOG.BUTTONS.CANCEL')"
-            class="w-full"
-            size="sm"
-            @click="close"
-          />
-          <Button
-            v-if="type !== 'alert'"
-            :variant="type === 'edit' ? 'default' : 'destructive'"
-            :label="confirmButtonLabel || t('DIALOG.BUTTONS.CONFIRM')"
-            class="w-full"
-            size="sm"
-            @click="confirm"
-          />
-        </div>
-      </div>
+      </OnClickOutside>
     </dialog>
   </Teleport>
 </template>
+
+<style scoped>
+dialog::backdrop {
+  @apply dark:bg-n-alpha-white bg-n-alpha-black2;
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
index 74115a31e..eef87ef01 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
@@ -1,35 +1,57 @@
 <script setup>
 import { defineProps, defineEmits } from 'vue';
+
 import Button from 'dashboard/components-next/button/Button.vue';
+import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
 
 defineProps({
   menuItems: {
     type: Array,
     required: true,
+    validator: value => {
+      return value.every(item => item.action && item.value && item.label);
+    },
+  },
+  thumbnailSize: {
+    type: Number,
+    default: 20,
   },
 });
 
 const emit = defineEmits(['action']);
 
-const handleAction = action => {
-  emit('action', action);
+const handleAction = (action, value) => {
+  emit('action', { action, value });
 };
 </script>
 
 <template>
   <div
-    class="bg-white dark:bg-slate-800 absolute rounded-xl z-50 py-3 px-1 gap-2 flex flex-col min-w-[136px] shadow-lg"
+    class="bg-n-alpha-3 backdrop-blur-[100px] absolute rounded-xl z-50 py-2 px-2 gap-2 flex flex-col min-w-[136px] shadow-lg"
   >
     <Button
       v-for="item in menuItems"
       :key="item.action"
       :label="item.label"
       :icon="item.icon"
+      :emoji="item.emoji"
+      :disabled="item.disabled"
       variant="ghost"
       size="sm"
-      class="!justify-start w-full hover:bg-white dark:hover:bg-slate-800 z-60 font-normal"
+      class="!justify-start w-full hover:!bg-n-slate-3 dark:hover:!bg-n-slate-4 z-60 px-2 font-normal"
+      :class="item.isSelected ? '!bg-n-alpha-1 dark:!bg-n-solid-active' : ''"
       :text-variant="item.action === 'delete' ? 'danger' : ''"
-      @click="handleAction(item.action)"
-    />
+      @click="handleAction(item.action, item.value)"
+    >
+      <template #leftPrefix>
+        <Thumbnail
+          v-if="item.thumbnail"
+          :author="item.thumbnail"
+          :name="item.thumbnail.name"
+          :size="thumbnailSize"
+          :src="item.thumbnail.src"
+        />
+      </template>
+    </Button>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/inline-input/InlineInput.vue b/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
index 71dae0af0..7731e84bb 100644
--- a/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
+++ b/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
@@ -34,12 +34,16 @@ defineProps({
   },
 });
 
-defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'enterPress']);
+
+const onEnterPress = () => {
+  emit('enterPress');
+};
 </script>
 
 <template>
   <div
-    class="relative flex items-center justify-between w-full gap-2 whitespace-nowrap"
+    class="relative flex items-center justify-between w-full gap-3 whitespace-nowrap"
   >
     <label
       v-if="label"
@@ -60,6 +64,7 @@ defineEmits(['update:modelValue']);
       :class="customInputClass"
       class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-lg bg-transparent dark:bg-transparent placeholder:text-slate-200 dark:placeholder:text-slate-500 disabled:cursor-not-allowed disabled:opacity-50 text-slate-900 dark:text-white transition-all duration-500 ease-in-out"
       @input="$emit('update:modelValue', $event.target.value)"
+      @keydown.enter.prevent="onEnterPress"
     />
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/input/Input.vue b/app/javascript/dashboard/components-next/input/Input.vue
index ed0517257..d97ffd137 100644
--- a/app/javascript/dashboard/components-next/input/Input.vue
+++ b/app/javascript/dashboard/components-next/input/Input.vue
@@ -39,25 +39,33 @@ const props = defineProps({
     validator: value => ['info', 'error', 'success'].includes(value),
   },
 });
-defineEmits(['update:modelValue']);
+
+const emit = defineEmits(['update:modelValue', 'blur', 'input']);
+
 const messageClass = computed(() => {
   switch (props.messageType) {
     case 'error':
-      return 'text-red-500 dark:text-red-400';
+      return 'text-n-ruby-9 dark:text-n-ruby-9';
     case 'success':
       return 'text-green-500 dark:text-green-400';
     default:
-      return 'text-slate-500 dark:text-slate-400';
+      return 'text-n-slate-11 dark:text-n-slate-11';
   }
 });
+
 const inputBorderClass = computed(() => {
   switch (props.messageType) {
     case 'error':
-      return 'border-red-500 dark:border-red-400';
+      return 'border-n-ruby-8 dark:border-n-ruby-8 hover:border-n-ruby-9 dark:hover:border-n-ruby-9 disabled:border-n-ruby-8 dark:disabled:border-n-ruby-8';
     default:
-      return 'border-slate-100 dark:border-slate-700/50';
+      return 'border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 disabled:border-n-weak dark:disabled:border-n-weak';
   }
 });
+
+const handleInput = event => {
+  emit('update:modelValue', event.target.value);
+  emit('input', event);
+};
 </script>
 
 <template>
@@ -78,12 +86,13 @@ const inputBorderClass = computed(() => {
       :type="type"
       :placeholder="placeholder"
       :disabled="disabled"
-      class="flex w-full reset-base text-sm h-8 pl-3 pr-2 rtl:pr-3 rtl:pl-2 py-1.5 !mb-0 border rounded-lg focus:border-woot-500 dark:focus:border-woot-600 bg-white dark:bg-slate-900 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-200 dark:placeholder:text-slate-500 disabled:cursor-not-allowed disabled:opacity-50 text-slate-900 dark:text-white transition-all duration-500 ease-in-out"
-      @input="$emit('update:modelValue', $event.target.value)"
+      class="flex w-full reset-base text-sm h-10 !px-2 !py-2.5 !mb-0 border rounded-lg focus:border-n-brand dark:focus:border-n-brand bg-white dark:bg-slate-900 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-200 dark:placeholder:text-slate-500 disabled:cursor-not-allowed disabled:opacity-50 text-slate-900 dark:text-white transition-all duration-500 ease-in-out"
+      @input="handleInput"
+      @blur="emit('blur')"
     />
     <p
       v-if="message"
-      class="mt-1 mb-0 text-xs transition-all duration-500 ease-in-out"
+      class="mt-1 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
       :class="messageClass"
     >
       {{ message }}
diff --git a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
index b6d90bf45..578545d3d 100644
--- a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
+++ b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
@@ -56,12 +56,10 @@ const pageInfo = computed(() => {
 
 <template>
   <div
-    class="flex justify-between h-12 w-full max-w-[957px] mx-auto bg-slate-25 dark:bg-slate-800/50 rounded-xl py-2 px-3 items-center"
+    class="flex justify-between h-12 w-full max-w-[957px] mx-auto bg-n-solid-2 rounded-xl py-2 ltr:pl-4 rtl:pr-4 ltr:pr-3 rtl:pl-3 items-center"
   >
     <div class="flex items-center gap-3">
-      <span
-        class="min-w-0 text-sm font-normal line-clamp-1 text-slate-600 dark:text-slate-300"
-      >
+      <span class="min-w-0 text-sm font-normal line-clamp-1 text-n-slate-11">
         {{ currentPageInformation }}
       </span>
     </div>
@@ -82,12 +80,8 @@ const pageInfo = computed(() => {
         :disabled="isFirstPage"
         @click="changePage(currentPage - 1)"
       />
-      <div
-        class="inline-flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400"
-      >
-        <span
-          class="px-3 tabular-nums py-0.5 bg-white dark:bg-slate-900 rounded-md"
-        >
+      <div class="inline-flex items-center gap-2 text-sm text-n-slate-11">
+        <span class="px-3 tabular-nums py-0.5 bg-n-alpha-black2 rounded-md">
           {{ currentPage }}
         </span>
         <span>{{ pageInfo }}</span>
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index a84db8ae5..e20d1edd3 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -281,29 +281,62 @@ const menuItems = computed(() => {
       name: 'Portals',
       label: t('SIDEBAR.HELP_CENTER.TITLE'),
       icon: 'i-lucide-library-big',
-      to: accountScopedRoute('default_portal_articles'),
+      to: accountScopedRoute('portals_index', {
+        navigationPath: 'portals_articles_index',
+      }),
+      children: [
+        {
+          name: 'Articles',
+          label: t('SIDEBAR.HELP_CENTER.ARTICLES'),
+          activeOn: [
+            'portals_articles_index',
+            'portals_articles_new',
+            'portals_articles_edit',
+          ],
+          to: accountScopedRoute('portals_index', {
+            navigationPath: 'portals_articles_index',
+          }),
+        },
+        {
+          name: 'Categories',
+          label: t('SIDEBAR.HELP_CENTER.CATEGORIES'),
+          activeOn: [
+            'portals_categories_index',
+            'portals_categories_articles_index',
+            'portals_categories_articles_edit',
+          ],
+          to: accountScopedRoute('portals_index', {
+            navigationPath: 'portals_categories_index',
+          }),
+        },
+        {
+          name: 'Locales',
+          label: t('SIDEBAR.HELP_CENTER.LOCALES'),
+          activeOn: ['portals_locales_index'],
+          to: accountScopedRoute('portals_index', {
+            navigationPath: 'portals_locales_index',
+          }),
+        },
+        {
+          name: 'Settings',
+          label: t('SIDEBAR.HELP_CENTER.SETTINGS'),
+          activeOn: ['portals_settings_index'],
+          to: accountScopedRoute('portals_index', {
+            navigationPath: 'portals_settings_index',
+          }),
+        },
+      ],
       activeOn: [
-        'all_locale_categories',
-        'default_portal_articles',
-        'edit_article',
-        'edit_category',
-        'edit_portal_customization',
-        'edit_portal_information',
-        'edit_portal_locales',
-        'list_all_locale_articles',
-        'list_all_locale_categories',
-        'list_all_portals',
-        'list_archived_articles',
-        'list_draft_articles',
-        'list_mine_articles',
-        'new_article',
-        'new_category_in_locale',
-        'new_portal_information',
-        'portalSlug',
-        'portal_customization',
-        'portal_finish',
-        'show_category',
-        'show_category_articles',
+        'portals_new',
+        'portals_index',
+        'portals_articles_index',
+        'portals_articles_new',
+        'portals_articles_edit',
+        'portals_categories_index',
+        'portals_categories_articles_index',
+        'portals_categories_articles_edit',
+        'portals_locales_index',
+        'portals_settings_index',
       ],
     },
     {
@@ -412,43 +445,43 @@ const menuItems = computed(() => {
     class="w-[200px] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pt-2 pb-1"
   >
     <section class="grid gap-2 mt-2 mb-4">
-      <div class="flex gap-2 px-2 items-center min-w-0">
-        <div class="size-6 grid place-content-center flex-shrink-0">
+      <div class="flex items-center min-w-0 gap-2 px-2">
+        <div class="grid flex-shrink-0 size-6 place-content-center">
           <Logo />
         </div>
-        <div class="w-px h-3 bg-n-strong flex-shrink-0" />
+        <div class="flex-shrink-0 w-px h-3 bg-n-strong" />
         <SidebarAccountSwitcher
-          class="-mx-1 flex-grow min-w-0"
+          class="flex-grow min-w-0 -mx-1"
           @show-create-account-modal="emit('showCreateAccountModal')"
         />
       </div>
-      <div class="gap-2 flex px-2">
+      <div class="flex gap-2 px-2">
         <RouterLink
           :to="{ name: 'search' }"
-          class="rounded-lg py-1 flex items-center gap-2 px-2 border-n-weak border bg-n-solid-3 dark:bg-n-black/30 w-full"
+          class="flex items-center w-full gap-2 px-2 py-1 border rounded-lg border-n-weak bg-n-solid-3 dark:bg-n-black/30"
         >
-          <span class="i-lucide-search size-4 text-n-slate-11 flex-shrink-0" />
+          <span class="flex-shrink-0 i-lucide-search size-4 text-n-slate-11" />
           <span class="flex-grow text-left">
             {{ t('COMBOBOX.SEARCH_PLACEHOLDER') }}
           </span>
           <span
-            class="tracking-wide select-none pointer-events-none text-n-slate-10 hidden"
+            class="hidden tracking-wide pointer-events-none select-none text-n-slate-10"
           >
             {{ searchShortcut }}
           </span>
         </RouterLink>
         <button
           v-if="enableNewConversation"
-          class="rounded-lg py-1 flex items-center gap-2 px-2 border-n-weak border bg-n-solid-3 w-full"
+          class="flex items-center w-full gap-2 px-2 py-1 border rounded-lg border-n-weak bg-n-solid-3"
         >
           <span
-            class="i-lucide-square-pen size-4 text-n-slate-11 flex-shrink-0"
+            class="flex-shrink-0 i-lucide-square-pen size-4 text-n-slate-11"
           />
         </button>
       </div>
     </section>
-    <nav class="grid gap-2 overflow-y-scroll no-scrollbar px-2 flex-grow pb-5">
-      <ul class="flex flex-col gap-2 list-none m-0">
+    <nav class="grid flex-grow gap-2 px-2 pb-5 overflow-y-scroll no-scrollbar">
+      <ul class="flex flex-col gap-2 m-0 list-none">
         <SidebarGroup
           v-for="item in menuItems"
           :key="item.name"
@@ -463,7 +496,7 @@ const menuItems = computed(() => {
         @open-key-shortcut-modal="emit('openKeyShortcutModal')"
       />
       <div v-if="false" class="flex items-center">
-        <div class="w-px h-3 bg-n-strong flex-shrink-0" />
+        <div class="flex-shrink-0 w-px h-3 bg-n-strong" />
         <SidebarNotificationBell
           @open-notification-panel="emit('openNotificationPanel')"
         />
diff --git a/app/javascript/dashboard/components-next/tabbar/TabBar.vue b/app/javascript/dashboard/components-next/tabbar/TabBar.vue
index dc657215f..3779f7e6b 100644
--- a/app/javascript/dashboard/components-next/tabbar/TabBar.vue
+++ b/app/javascript/dashboard/components-next/tabbar/TabBar.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { computed } from 'vue';
 const props = defineProps({
   initialActiveTab: {
     type: Number,
@@ -10,17 +10,22 @@ const props = defineProps({
     required: true,
     validator: value => {
       return value.every(
-        tab => typeof tab.label === 'string' && typeof tab.count === 'number'
+        tab =>
+          typeof tab.label === 'string' &&
+          (tab.count ? typeof tab.count === 'number' : true)
       );
     },
   },
 });
+
 const emit = defineEmits(['tabChanged']);
-const activeTab = ref(props.initialActiveTab);
+
+const activeTab = computed(() => props.initialActiveTab);
+
 const selectTab = index => {
-  activeTab.value = index;
   emit('tabChanged', props.tabs[index]);
 };
+
 const showDivider = index => {
   return (
     // Show dividers after the active tab, but not after the last tab
@@ -32,14 +37,14 @@ const showDivider = index => {
 </script>
 
 <template>
-  <div class="flex h-8 rounded-lg bg-slate-25 dark:bg-slate-800/50 w-fit">
+  <div class="flex h-8 rounded-lg bg-n-solid-1 w-fit">
     <template v-for="(tab, index) in tabs" :key="index">
       <button
-        class="relative px-4 truncate py-1.5 text-sm border-0 rounded-lg transition-colors duration-300 ease-in-out"
+        class="relative px-4 truncate py-1.5 text-sm border-0 rounded-lg transition-colors duration-300 ease-in-out hover:text-n-brand"
         :class="[
           activeTab === index
-            ? 'text-woot-500 bg-woot-500/10 dark:bg-woot-500/10'
-            : 'text-slate-500 dark:text-slate-400 hover:text-woot-500 dark:hover:text-woot-400',
+            ? 'text-n-brand bg-n-solid-active font-medium'
+            : 'text-n-slate-10',
         ]"
         @click="selectTab(index)"
       >
diff --git a/app/javascript/dashboard/components-next/taginput/TagInput.vue b/app/javascript/dashboard/components-next/taginput/TagInput.vue
new file mode 100644
index 000000000..fc1ed2d0d
--- /dev/null
+++ b/app/javascript/dashboard/components-next/taginput/TagInput.vue
@@ -0,0 +1,90 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { OnClickOutside } from '@vueuse/components';
+
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const tags = ref(props.modelValue);
+const newTag = ref('');
+const isFocused = ref(false);
+
+const showInput = computed(() => isFocused.value || tags.value.length === 0);
+
+const addTag = () => {
+  if (newTag.value.trim()) {
+    tags.value.push(newTag.value.trim());
+    newTag.value = '';
+    emit('update:modelValue', tags.value);
+  }
+};
+
+const removeTag = index => {
+  tags.value.splice(index, 1);
+  emit('update:modelValue', tags.value);
+};
+
+const handleFocus = () => {
+  isFocused.value = true;
+};
+
+const handleClickOutside = () => {
+  if (tags.value.length > 0) {
+    isFocused.value = false;
+  }
+};
+
+watch(
+  () => props.modelValue,
+  newValue => {
+    tags.value = newValue;
+  }
+);
+</script>
+
+<template>
+  <OnClickOutside @trigger="handleClickOutside">
+    <div
+      class="flex flex-wrap w-full gap-2 border border-transparent focus:outline-none"
+      tabindex="0"
+      @focus="handleFocus"
+      @click="handleFocus"
+    >
+      <div
+        v-for="(tag, index) in tags"
+        :key="index"
+        class="flex items-center justify-center max-w-full gap-1 px-3 py-1 rounded-lg h-7 bg-n-alpha-2"
+      >
+        <span class="flex-grow min-w-0 text-sm truncate text-n-slate-12">
+          {{ tag }}
+        </span>
+        <FluentIcon
+          icon="dismiss"
+          size="20"
+          class="flex-shrink-0 p-1 cursor-pointer text-n-slate-11"
+          @click.stop="removeTag(index)"
+        />
+      </div>
+      <InlineInput
+        v-if="showInput"
+        v-model="newTag"
+        :placeholder="placeholder"
+        custom-input-class="flex-grow"
+        @enter-press="addTag"
+      />
+    </div>
+  </OnClickOutside>
+</template>
diff --git a/app/javascript/dashboard/components-next/textarea/TextArea.vue b/app/javascript/dashboard/components-next/textarea/TextArea.vue
index d7243bab8..7b4048fe6 100644
--- a/app/javascript/dashboard/components-next/textarea/TextArea.vue
+++ b/app/javascript/dashboard/components-next/textarea/TextArea.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref, onMounted, nextTick, watch } from 'vue';
+
 const props = defineProps({
   modelValue: {
     type: String,
@@ -29,13 +30,87 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  customTextAreaWrapperClass: {
+    type: String,
+    default: '',
+  },
   showCharacterCount: {
     type: Boolean,
     default: false,
   },
+  autoHeight: {
+    type: Boolean,
+    default: false,
+  },
+  resize: {
+    type: Boolean,
+    default: false,
+  },
+  minHeight: {
+    type: String,
+    default: '4rem',
+  },
+  maxHeight: {
+    type: String,
+    default: '12rem',
+  },
+  autofocus: {
+    type: Boolean,
+    default: false,
+  },
 });
-defineEmits(['update:modelValue']);
+
+const emit = defineEmits(['update:modelValue']);
+
+const textareaRef = ref(null);
+const isFocused = ref(false);
+
 const characterCount = computed(() => props.modelValue.length);
+
+// TODO - use "field-sizing: content" and "height: auto" in future for auto height, when available.
+const adjustHeight = () => {
+  if (!props.autoHeight || !textareaRef.value) return;
+
+  // Reset height to auto to get the correct scrollHeight
+  textareaRef.value.style.height = 'auto';
+  // Set the height to the scrollHeight
+  textareaRef.value.style.height = `${textareaRef.value.scrollHeight}px`;
+};
+
+const handleInput = event => {
+  emit('update:modelValue', event.target.value);
+  if (props.autoHeight) {
+    nextTick(adjustHeight);
+  }
+};
+
+const handleFocus = () => {
+  isFocused.value = true;
+};
+
+const handleBlur = () => {
+  isFocused.value = false;
+};
+
+// Watch for changes in modelValue to adjust height
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.autoHeight) {
+      nextTick(adjustHeight);
+    }
+  }
+);
+
+onMounted(() => {
+  if (props.autoHeight) {
+    nextTick(adjustHeight);
+  }
+
+  if (props.autofocus) {
+    textareaRef.value.focus();
+  }
+});
 </script>
 
 <template>
@@ -47,23 +122,49 @@ const characterCount = computed(() => props.modelValue.length);
     >
       {{ label }}
     </label>
-    <textarea
-      :id="id"
-      :value="modelValue"
-      :placeholder="placeholder"
-      :maxlength="maxLength"
-      class="flex w-full reset-base text-sm h-24 px-3 pt-3 !mb-0 border rounded-lg focus:border-woot-500 dark:focus:border-woot-600 bg-white dark:bg-slate-900 placeholder:text-slate-200 dark:placeholder:text-slate-500 text-slate-900 dark:text-white transition-all duration-500 ease-in-out resize-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-25 dark:disabled:bg-slate-900"
-      :class="[customTextAreaClass, showCharacterCount ? 'pb-9' : 'pb-3']"
-      :disabled="disabled"
-      @input="$emit('update:modelValue', $event.target.value)"
-    />
     <div
-      v-if="showCharacterCount"
-      class="absolute flex items-center justify-between mt-1 bottom-3 ltr:right-3 rtl:left-3"
+      class="flex flex-col gap-2 px-3 pt-3 pb-3 transition-all duration-500 ease-in-out bg-white border rounded-lg border-n-weak dark:border-n-weak dark:bg-slate-900"
+      :class="[
+        customTextAreaWrapperClass,
+        {
+          'cursor-not-allowed opacity-50 !bg-slate-25 dark:!bg-slate-800 disabled:border-n-weak dark:disabled:border-n-weak':
+            disabled,
+          'border-n-brand dark:border-n-brand': isFocused,
+          'hover:border-n-slate-6 dark:hover:border-n-slate-6': !isFocused,
+        },
+      ]"
     >
-      <span class="text-xs tabular-nums text-slate-300 dark:text-slate-600">
-        {{ characterCount }} / {{ maxLength }}
-      </span>
+      <textarea
+        :id="id"
+        ref="textareaRef"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :maxlength="showCharacterCount ? maxLength : undefined"
+        :class="[
+          customTextAreaClass,
+          {
+            'resize-none': !resize,
+          },
+        ]"
+        :style="{
+          minHeight: autoHeight ? minHeight : undefined,
+          maxHeight: autoHeight ? maxHeight : undefined,
+        }"
+        :disabled="disabled"
+        rows="1"
+        class="flex w-full reset-base text-sm p-0 !rounded-none !bg-transparent dark:!bg-transparent !border-0 !mb-0 placeholder:text-slate-200 dark:placeholder:text-slate-500 text-slate-900 dark:text-white disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-25 dark:disabled:bg-slate-900"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      />
+      <div
+        v-if="showCharacterCount"
+        class="flex items-center justify-end h-4 mt-1 bottom-3 ltr:right-3 rtl:left-3"
+      >
+        <span class="text-xs tabular-nums text-slate-300 dark:text-slate-600">
+          {{ characterCount }} / {{ maxLength }}
+        </span>
+      </div>
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue b/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue
new file mode 100644
index 000000000..72ba0c9ee
--- /dev/null
+++ b/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue
@@ -0,0 +1,121 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { removeEmoji } from 'shared/helpers/emoji';
+
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+
+const props = defineProps({
+  author: {
+    type: Object,
+    default: null,
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+  src: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: Number,
+    default: 16,
+  },
+  showAuthorName: {
+    type: Boolean,
+    default: true,
+  },
+  iconName: {
+    type: String,
+    default: '',
+  },
+});
+const hasImageLoaded = ref(false);
+const imgError = ref(false);
+
+const authorInitial = computed(() => {
+  if (!props.name) return '';
+  const name = removeEmoji(props.name);
+  const words = name.split(/\s+/);
+
+  if (words.length === 1) {
+    return name.substring(0, 2).toUpperCase();
+  }
+
+  return words
+    .slice(0, 2)
+    .map(word => word[0])
+    .join('')
+    .toUpperCase();
+});
+
+const fontSize = computed(() => {
+  return props.size / 2;
+});
+
+const iconSize = computed(() => {
+  return props.size / 2;
+});
+
+const shouldShowImage = computed(() => {
+  return props.src && !imgError.value;
+});
+
+const onImgError = () => {
+  imgError.value = true;
+};
+
+const onImgLoad = () => {
+  hasImageLoaded.value = true;
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-center rounded-full bg-slate-100 dark:bg-slate-700/50"
+    :style="{ width: `${size}px`, height: `${size}px` }"
+  >
+    <div v-if="author">
+      <img
+        v-if="shouldShowImage"
+        :src="src"
+        :alt="name"
+        class="w-full h-full rounded-full"
+        @load="onImgLoad"
+        @error="onImgError"
+      />
+      <template v-else>
+        <span
+          v-if="showAuthorName"
+          class="flex items-center justify-center font-medium text-slate-500 dark:text-slate-400"
+          :style="{ fontSize: `${fontSize}px` }"
+        >
+          {{ authorInitial }}
+        </span>
+        <div
+          v-else
+          class="flex items-center justify-center w-full h-full rounded-xl"
+        >
+          <FluentIcon
+            v-if="iconName"
+            :icon="iconName"
+            icon-lib="lucide"
+            :size="iconSize"
+            class="text-n-brand"
+          />
+        </div>
+      </template>
+    </div>
+    <div
+      v-else
+      class="flex items-center justify-center w-4 h-4 rounded-full bg-slate-100 dark:bg-slate-700/50"
+    >
+      <FluentIcon
+        icon="person"
+        type="filled"
+        size="10"
+        class="text-woot-500 dark:text-woot-400"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
index f019933e0..67d05c3d6 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
@@ -55,8 +55,8 @@ const primaryMenuItems = accountId => [
     label: 'HELP_CENTER.TITLE',
     featureFlag: FEATURE_FLAGS.HELP_CENTER,
     alwaysVisibleOnChatwootInstances: true,
-    toState: frontendURL(`accounts/${accountId}/portals`),
-    toStateName: 'default_portal_articles',
+    toState: frontendURL(`accounts/${accountId}/portals/portal_articles_index`),
+    toStateName: 'portals_index',
   },
   {
     icon: 'settings',
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
index 1ddde598e..1cbd6a56a 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
@@ -82,6 +82,7 @@ export default {
       />
       <PrimaryNavItem
         v-for="menuItem in menuItems"
+        :id="menuItem.key"
         :key="menuItem.toState"
         :icon="menuItem.icon"
         :name="menuItem.label"
@@ -94,7 +95,7 @@ export default {
         v-if="!isACustomBrandedInstance"
         v-tooltip.right="$t(`SIDEBAR.DOCS`)"
         :href="helpDocsURL"
-        class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+        class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
         rel="noopener noreferrer nofollow"
         target="_blank"
       >
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
index 8951f946c..2ad2a57b5 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
@@ -1,10 +1,23 @@
 <script>
+import { OnClickOutside } from '@vueuse/components';
+import { HELP_CENTER_MENU_ITEMS } from 'dashboard/helper/portalHelper';
+
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
 export default {
+  components: {
+    DropdownMenu,
+    OnClickOutside,
+  },
   props: {
     to: {
       type: String,
       default: '',
     },
+    id: {
+      type: String,
+      default: '',
+    },
     name: {
       type: String,
       default: '',
@@ -26,15 +39,89 @@ export default {
       default: false,
     },
   },
+
+  data() {
+    return {
+      helpCenterMenu: HELP_CENTER_MENU_ITEMS,
+      showHelpCenterMenu: false,
+    };
+  },
+  computed: {
+    helpCenterMenuItems() {
+      return this.helpCenterMenu.map(item => ({
+        ...item,
+        isSelected: this.isSelectedMenuItem(item),
+      }));
+    },
+    isHelpCenter() {
+      return this.id === 'helpcenter';
+    },
+    isHelpCenterSelected() {
+      const routes = [
+        'portals_new',
+        'portals_index',
+        'portals_articles_index',
+        'portals_articles_new',
+        'portals_articles_edit',
+        'portals_categories_index',
+        'portals_categories_articles_index',
+        'portals_categories_articles_edit',
+        'portals_locales_index',
+        'portals_settings_index',
+      ];
+      return routes.includes(this.$route.name);
+    },
+  },
+  methods: {
+    isSelectedMenuItem(menuItem) {
+      return menuItem.value.includes(this.$route.name);
+    },
+    toggleHelpCenterMenu() {
+      this.showHelpCenterMenu = !this.showHelpCenterMenu;
+    },
+    handleHelpCenterAction({ action }) {
+      this.$router.push({
+        name: 'portals_index',
+        params: {
+          navigationPath: action,
+        },
+      });
+    },
+  },
 };
 </script>
 
 <template>
-  <router-link v-slot="{ href, isActive, navigate }" :to="to" custom>
+  <OnClickOutside v-if="isHelpCenter" @trigger="showHelpCenterMenu = false">
+    <button
+      v-tooltip.top="$t(`SIDEBAR.${name}`)"
+      class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:!bg-slate-25 dark:hover:!bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
+      :class="{
+        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
+          isHelpCenterSelected,
+      }"
+      @click="toggleHelpCenterMenu"
+    >
+      <fluent-icon
+        :icon="icon"
+        :class="{
+          'text-woot-500': isHelpCenterSelected,
+        }"
+      />
+      <DropdownMenu
+        v-if="showHelpCenterMenu && isHelpCenter"
+        :menu-items="helpCenterMenuItems"
+        class="ltr:left-10 rtl:right-10 w-36 z-[100] top-0 overflow-y-auto max-h-52"
+        @action="handleHelpCenterAction"
+      />
+    </button>
+  </OnClickOutside>
+
+  <router-link v-else v-slot="{ href, isActive, navigate }" :to="to" custom>
     <a
       v-tooltip.right="$t(`SIDEBAR.${name}`)"
       :href="href"
-      class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
       :class="{
         'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
           isActive || isChildMenuActive,
@@ -52,7 +139,7 @@ export default {
       <span class="sr-only">{{ name }}</span>
       <span
         v-if="count"
-        class="text-black-900 bg-yellow-500 absolute -top-1 -right-1"
+        class="absolute bg-yellow-500 text-black-900 -top-1 -right-1"
       >
         {{ count }}
       </span>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue b/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
index 01187d08f..b3c970a84 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
@@ -46,6 +46,10 @@ export default {
     editorId: { type: String, default: '' },
     placeholder: { type: String, default: '' },
     enabledMenuOptions: { type: Array, default: () => [] },
+    autofocus: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ['blur', 'input', 'update:modelValue', 'keyup', 'focus', 'keydown'],
   setup() {
@@ -86,7 +90,9 @@ export default {
     this.createEditorView();
 
     editorView.updateState(state);
-    this.focusEditorInputField();
+    if (this.autofocus) {
+      this.focusEditorInputField();
+    }
   },
   methods: {
     contentFromEditor() {
diff --git a/app/javascript/dashboard/helper/URLHelper.js b/app/javascript/dashboard/helper/URLHelper.js
index fd33c334d..bc0322e50 100644
--- a/app/javascript/dashboard/helper/URLHelper.js
+++ b/app/javascript/dashboard/helper/URLHelper.js
@@ -117,3 +117,11 @@ export const timeStampAppendedURL = dataUrl => {
 
   return url.toString();
 };
+
+export const getHostNameFromURL = url => {
+  try {
+    return new URL(url).hostname;
+  } catch (error) {
+    return null;
+  }
+};
diff --git a/app/javascript/dashboard/helper/portalHelper.js b/app/javascript/dashboard/helper/portalHelper.js
index 648891a0e..78d5177e0 100644
--- a/app/javascript/dashboard/helper/portalHelper.js
+++ b/app/javascript/dashboard/helper/portalHelper.js
@@ -13,3 +13,140 @@ export const buildPortalArticleURL = (
   const portalURL = buildPortalURL(portalSlug);
   return `${portalURL}/articles/${articleSlug}`;
 };
+
+export const getArticleStatus = status => {
+  switch (status) {
+    case 'draft':
+      return 0;
+    case 'published':
+      return 1;
+    case 'archived':
+      return 2;
+    default:
+      return undefined;
+  }
+};
+
+// Constants
+export const HELP_CENTER_MENU_ITEMS = [
+  {
+    label: 'Articles',
+    icon: 'book',
+    action: 'portals_articles_index',
+    value: [
+      'portals_articles_index',
+      'portals_articles_new',
+      'portals_articles_edit',
+    ],
+  },
+  {
+    label: 'Categories',
+    icon: 'folder',
+    action: 'portals_categories_index',
+    value: [
+      'portals_categories_index',
+      'portals_categories_articles_index',
+      'portals_categories_articles_edit',
+    ],
+  },
+  {
+    label: 'Locales',
+    icon: 'translate',
+    action: 'portals_locales_index',
+    value: ['portals_locales_index'],
+  },
+  {
+    label: 'Settings',
+    icon: 'settings',
+    action: 'portals_settings_index',
+    value: ['portals_settings_index'],
+  },
+];
+
+export const ARTICLE_STATUSES = {
+  DRAFT: 'draft',
+  PUBLISHED: 'published',
+  ARCHIVED: 'archived',
+};
+
+export const ARTICLE_MENU_ITEMS = {
+  publish: {
+    label: 'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.DROPDOWN_MENU.PUBLISH',
+    value: ARTICLE_STATUSES.PUBLISHED,
+    action: 'publish',
+    icon: 'checkmark',
+  },
+  draft: {
+    label: 'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.DROPDOWN_MENU.DRAFT',
+    value: ARTICLE_STATUSES.DRAFT,
+    action: 'draft',
+    icon: 'draft',
+  },
+  archive: {
+    label: 'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.DROPDOWN_MENU.ARCHIVE',
+    value: ARTICLE_STATUSES.ARCHIVED,
+    action: 'archive',
+    icon: 'archive',
+  },
+  delete: {
+    label: 'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.DROPDOWN_MENU.DELETE',
+    value: 'delete',
+    action: 'delete',
+    icon: 'delete',
+  },
+};
+
+export const ARTICLE_MENU_OPTIONS = {
+  [ARTICLE_STATUSES.ARCHIVED]: ['publish', 'draft'],
+  [ARTICLE_STATUSES.DRAFT]: ['publish', 'archive'],
+  [ARTICLE_STATUSES.PUBLISHED]: ['draft', 'archive'],
+};
+
+export const ARTICLE_TABS = {
+  ALL: 'all',
+  MINE: 'mine',
+  DRAFT: 'draft',
+  ARCHIVED: 'archived',
+};
+
+export const CATEGORY_ALL = 'all';
+
+export const ARTICLE_TABS_OPTIONS = [
+  {
+    key: 'ALL',
+    value: 'all',
+  },
+  {
+    key: 'MINE',
+    value: 'mine',
+  },
+  {
+    key: 'DRAFT',
+    value: 'draft',
+  },
+  {
+    key: 'ARCHIVED',
+    value: 'archived',
+  },
+];
+
+export const LOCALE_MENU_ITEMS = [
+  {
+    label: 'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.MAKE_DEFAULT',
+    action: 'change-default',
+    value: 'default',
+    icon: 'star-emphasis',
+  },
+  {
+    label: 'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.DELETE',
+    action: 'delete',
+    value: 'delete',
+    icon: 'delete',
+  },
+];
+
+export const ARTICLE_EDITOR_STATUS_OPTIONS = {
+  published: ['archive', 'draft'],
+  archived: ['draft'],
+  draft: ['archive'],
+};
diff --git a/app/javascript/dashboard/helper/specs/URLHelper.spec.js b/app/javascript/dashboard/helper/specs/URLHelper.spec.js
index d0dda11e8..0f6d631b1 100644
--- a/app/javascript/dashboard/helper/specs/URLHelper.spec.js
+++ b/app/javascript/dashboard/helper/specs/URLHelper.spec.js
@@ -6,6 +6,7 @@ import {
   getArticleSearchURL,
   hasValidAvatarUrl,
   timeStampAppendedURL,
+  getHostNameFromURL,
 } from '../URLHelper';
 
 describe('#URL Helpers', () => {
@@ -238,4 +239,28 @@ describe('#URL Helpers', () => {
       expect(() => timeStampAppendedURL(input)).toThrow();
     });
   });
+
+  describe('getHostNameFromURL', () => {
+    it('should return the hostname from a valid URL', () => {
+      expect(getHostNameFromURL('https://example.com/path')).toBe(
+        'example.com'
+      );
+    });
+
+    it('should return null for an invalid URL', () => {
+      expect(getHostNameFromURL('not a valid url')).toBe(null);
+    });
+
+    it('should return null for an empty string', () => {
+      expect(getHostNameFromURL('')).toBe(null);
+    });
+
+    it('should return null for undefined input', () => {
+      expect(getHostNameFromURL(undefined)).toBe(null);
+    });
+
+    it('should correctly handle URLs with non-standard TLDs', () => {
+      expect(getHostNameFromURL('https://chatwoot.help')).toBe('chatwoot.help');
+    });
+  });
 });
diff --git a/app/javascript/dashboard/i18n/locale/en/helpCenter.json b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
index aaa062dae..ddfc0cfa0 100644
--- a/app/javascript/dashboard/i18n/locale/en/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
@@ -1,5 +1,10 @@
 {
   "HELP_CENTER": {
+    "TITLE": "Help Center",
+    "NEW_PAGE": {
+      "DESCRIPTION": "Create self-service help center portals for your customers. Help them find answers quickly, without waiting. Streamline inquiries, boost agent efficiency, and elevate customer support.",
+      "CREATE_PORTAL_BUTTON": "Create Portal"
+    },
     "HEADER": {
       "FILTER": "Filter by",
       "SORT": "Sort by",
@@ -343,6 +348,12 @@
         "SUCCESS": "Article archived successfully"
       }
     },
+    "DRAFT_ARTICLE": {
+      "API": {
+        "ERROR": "Error while drafting article",
+        "SUCCESS": "Article drafted successfully"
+      }
+    },
     "DELETE_ARTICLE": {
       "MODAL": {
         "CONFIRM": {
@@ -478,9 +489,304 @@
       }
     },
     "LOADING": "Loading...",
+    "ARTICLES_PAGE": {
+      "ARTICLE_CARD": {
+        "CARD": {
+          "VIEWS": "{count} view | {count} views",
+          "DROPDOWN_MENU": {
+            "PUBLISH": "Publish",
+            "DRAFT": "Draft",
+            "ARCHIVE": "Archive",
+            "DELETE": "Delete"
+          },
+          "STATUS": {
+            "DRAFT": "Draft",
+            "PUBLISHED": "Published",
+            "ARCHIVED": "Archived"
+          },
+          "CATEGORY": {
+            "UNCATEGORISED": "Uncategorised"
+          }
+        }
+      },
+      "ARTICLES_HEADER": {
+        "TABS": {
+          "ALL": "All articles",
+          "MINE": "Mine",
+          "DRAFT": "Draft",
+          "PUBLISHED": "Published",
+          "ARCHIVED": "Archived"
+        },
+        "CATEGORY": {
+          "ALL": "All categories"
+        },
+        "LOCALE": {
+          "ALL": "All locales"
+        },
+        "NEW_ARTICLE": "New article"
+      },
+      "EMPTY_STATE": {
+        "ALL": {
+          "TITLE": "Write an article",
+          "SUBTITLE": "Write a rich article, let’s get started!",
+          "BUTTON_LABEL": "New article"
+        },
+        "MINE": {
+          "TITLE": "There are no articles in mine",
+          "SUBTITLE": "Mine articles will appear here"
+        },
+        "DRAFT": {
+          "TITLE": "There are no articles in draft",
+          "SUBTITLE": "Draft articles will appear here"
+        },
+        "PUBLISHED": {
+          "TITLE": "There are no articles in published",
+          "SUBTITLE": "Published articles will appear here"
+        },
+        "ARCHIVED": {
+          "TITLE": "There are no articles in archived",
+          "SUBTITLE": "Archived articles will appear here"
+        },
+        "CATEGORY": {
+          "TITLE": "There are no articles in this category",
+          "SUBTITLE": "Articles in this category will appear here"
+        }
+      }
+    },
+    "CATEGORY_PAGE": {
+      "CATEGORY_HEADER": {
+        "NEW_CATEGORY": "New category",
+        "EDIT_CATEGORY": "Edit category",
+        "CATEGORIES_COUNT": "{n} category | {n} categories",
+        "BREADCRUMB": {
+          "CATEGORY_LOCALE": "Categories ({localeCode})",
+          "ACTIVE_CATEGORY": "{categoryName} ({categoryCount} articles) | {categoryName} ({categoryCount} article)"
+        }
+      },
+      "CATEGORY_EMPTY_STATE": {
+        "TITLE": "No categories found",
+        "SUBTITLE": "Categories will appear here. You can add a category by clicking the 'New Category' button."
+      },
+      "CATEGORY_CARD": {
+        "ARTICLES_COUNT": "{count} article | {count} articles"
+      },
+      "CATEGORY_DIALOG": {
+        "CREATE": {
+          "API": {
+            "SUCCESS_MESSAGE": "Category created successfully",
+            "ERROR_MESSAGE": "Unable to create category"
+          }
+        },
+        "EDIT": {
+          "API": {
+            "SUCCESS_MESSAGE": "Category updated successfully",
+            "ERROR_MESSAGE": "Unable to update category"
+          }
+        },
+        "DELETE": {
+          "API": {
+            "SUCCESS_MESSAGE": "Category deleted successfully",
+            "ERROR_MESSAGE": "Unable to delete category"
+          }
+        },
+        "HEADER": {
+          "CREATE": "Create category",
+          "EDIT": "Edit category",
+          "DESCRIPTION": "Editing a category will update the category in the public facing portal.",
+          "PORTAL": "Portal",
+          "LOCALE": "Locale"
+        },
+        "FORM": {
+          "NAME": {
+            "LABEL": "Name",
+            "PLACEHOLDER": "Category name",
+            "ERROR": "Name is required"
+          },
+          "SLUG": {
+            "LABEL": "Slug",
+            "PLACEHOLDER": "Category slug for urls",
+            "ERROR": "Slug is required",
+            "HELP_TEXT": "app.chatwoot.com/hc/{portalSlug}/{localeCode}/categories/{categorySlug}"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Description",
+            "PLACEHOLDER": "Give a short description about the category.",
+            "ERROR": "Description is required"
+          }
+        },
+        "BUTTONS": {
+          "CREATE": "Create",
+          "EDIT": "Update",
+          "CANCEL": "Cancel"
+        }
+      }
+    },
     "LOCALES_PAGE": {
       "LOCALES_COUNT": "No locales available | {n} locale | {n} locales",
-      "NEW_LOCALE_BUTTON_TEXT": "New locale"
+      "NEW_LOCALE_BUTTON_TEXT": "New locale",
+      "LOCALE_CARD": {
+        "ARTICLES_COUNT": "{count} article | {count} articles",
+        "CATEGORIES_COUNT": "{count} category | {count} categories",
+        "DEFAULT": "Default",
+        "DROPDOWN_MENU": {
+          "MAKE_DEFAULT": "Make default",
+          "DELETE": "Delete"
+        }
+      },
+      "ADD_LOCALE_DIALOG": {
+        "TITLE": "Add a new locale",
+        "DESCRIPTION": "Select the language in which this article will be written. This will be added to your list of translations, and you can add more later.",
+        "COMBOBOX": {
+          "PLACEHOLDER": "Select locale..."
+        },
+        "API": {
+          "SUCCESS_MESSAGE": "Locale added successfully",
+          "ERROR_MESSAGE": "Unable to add locale. Try again."
+        }
+      }
+    },
+    "EDIT_ARTICLE_PAGE": {
+      "HEADER": {
+        "STATUS": {
+          "SAVING": "Saving...",
+          "SAVED": "Saved"
+        },
+        "PREVIEW": "Preview",
+        "PUBLISH": "Publish",
+        "DRAFT": "Draft",
+        "ARCHIVE": "Archive",
+        "BACK_TO_ARTICLES": "Back to articles"
+      },
+      "EDIT_ARTICLE": {
+        "MORE_PROPERTIES": "More properties",
+        "UNCATEGORIZED": "Uncategorized",
+        "EDITOR_PLACEHOLDER": "Write something..."
+      },
+      "ARTICLE_PROPERTIES": {
+        "ARTICLE_PROPERTIES": "Article properties",
+        "META_DESCRIPTION": "Meta description",
+        "META_DESCRIPTION_PLACEHOLDER": "Add meta description",
+        "META_TITLE": "Meta title",
+        "META_TITLE_PLACEHOLDER": "Add meta title",
+        "META_TAGS": "Meta tags",
+        "META_TAGS_PLACEHOLDER": "Add meta tags"
+      },
+      "API": {
+        "ERROR": "Error while saving article"
+      }
+    },
+    "PORTAL_SWITCHER": {
+      "NEW_PORTAL": "New portal",
+      "PORTALS": "Portals",
+      "CREATE_PORTAL": "Create and manage multiple portals",
+      "ARTICLES": "articles",
+      "DOMAIN": "domain",
+      "PORTAL_NAME": "Portal name"
+    },
+    "CREATE_PORTAL_DIALOG": {
+      "TITLE": "Create new portal",
+      "DESCRIPTION": "Give your portal a name and create a user-friendly URL slug. You can modify both later in the settings.",
+      "CONFIRM_BUTTON_LABEL": "Create",
+      "NAME": {
+        "LABEL": "Name",
+        "PLACEHOLDER": "User Guide | Chatwoot",
+        "MESSAGE": "Choose an name for your portal.",
+        "ERROR": "Name is required"
+      },
+      "SLUG": {
+        "LABEL": "Slug",
+        "PLACEHOLDER": "user-guide",
+        "ERROR": "Slug is required"
+      }
+    },
+    "PORTAL_SETTINGS": {
+      "FORM": {
+        "AVATAR": {
+          "LABEL": "Logo",
+          "IMAGE_UPLOAD_ERROR": "Couldn't upload image! Try again",
+          "IMAGE_UPLOAD_SUCCESS": "Image added successfully. Please click on save changes to save the logo",
+          "IMAGE_DELETE_SUCCESS": "Logo deleted successfully",
+          "IMAGE_DELETE_ERROR": "Unable to delete logo",
+          "IMAGE_UPLOAD_SIZE_ERROR": "Image size should be less than {size}MB"
+        },
+        "NAME": {
+          "LABEL": "Name",
+          "PLACEHOLDER": "Portal name",
+          "ERROR": "Name is required"
+        },
+        "HEADER_TEXT": {
+          "LABEL": "Header text",
+          "PLACEHOLDER": "Portal header text"
+        },
+        "PAGE_TITLE": {
+          "LABEL": "Page title",
+          "PLACEHOLDER": "Portal page title"
+        },
+        "HOME_PAGE_LINK": {
+          "LABEL": "Home page link",
+          "PLACEHOLDER": "Portal home page link",
+          "ERROR": "Invalid URL. The Home page link must start with 'http://' or 'https://'."
+        },
+        "SLUG": {
+          "LABEL": "Slug",
+          "PLACEHOLDER": "Portal slug"
+        },
+        "LIVE_CHAT_WIDGET": {
+          "LABEL": "Live chat widget",
+          "PLACEHOLDER": "Select live chat widget",
+          "HELP_TEXT": "Select a live chat widget that will appear on your help center"
+        },
+        "BRAND_COLOR": {
+          "LABEL": "Brand color"
+        },
+        "SAVE_CHANGES": "Save changes"
+      },
+      "CONFIGURATION_FORM": {
+        "CUSTOM_DOMAIN": {
+          "HEADER": "Custom domain",
+          "LABEL": "Custom domain:",
+          "DESCRIPTION": "You can host your portal on a custom domain. For instance, if your website is yourdomain.com and you want your portal available at docs.yourdomain.com, simply enter that in this field.",
+          "PLACEHOLDER": "Portal custom domain",
+          "EDIT_BUTTON": "Edit custom domain",
+          "ADD_BUTTON": "Add custom domain",
+          "DIALOG": {
+            "ADD_HEADER": "Add custom domain",
+            "EDIT_HEADER": "Edit custom domain",
+            "ADD_CONFIRM_BUTTON_LABEL": "Add domain",
+            "EDIT_CONFIRM_BUTTON_LABEL": "Update domain",
+            "LABEL": "Custom domain",
+            "PLACEHOLDER": "Portal custom domain",
+            "ERROR": "Custom domain is required"
+          },
+          "DNS_CONFIGURATION_DIALOG": {
+            "HEADER": "DNS configuration",
+            "DESCRIPTION": "Log in to the account you have with your DNS provider, and add a CNAME record for subdomain pointing to chatwoot.help",
+            "HELP_TEXT": "Once this is done, you can reach out to our support to request for the auto-generated SSL certificate.",
+            "CONFIRM_BUTTON_LABEL": "Got it!"
+          }
+        },
+        "DELETE_PORTAL": {
+          "BUTTON": "Delete {portalName}",
+          "HEADER": "Delete portal",
+          "DESCRIPTION": "Permanently delete this portal. This action is irreversible",
+          "DIALOG": {
+            "HEADER": "Sure you want to delete {portalName}?",
+            "DESCRIPTION": "This is a permanent action that cannot be reversed.",
+            "CONFIRM_BUTTON_LABEL": "Delete"
+          }
+        },
+        "EDIT_CONFIGURATION": "Edit configuration"
+      },
+      "API": {
+        "CREATE_PORTAL": {
+          "SUCCESS_MESSAGE": "Portal created successfully",
+          "ERROR_MESSAGE": "Unable to create portal"
+        },
+        "UPDATE_PORTAL": {
+          "SUCCESS_MESSAGE": "Portal updated successfully",
+          "ERROR_MESSAGE": "Unable to update portal"
+        }
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 1cdf82357..d2c0b7c5e 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -284,13 +284,10 @@
     "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
-      "ALL_ARTICLES": "All Articles",
-      "MY_ARTICLES": "My Articles",
-      "DRAFT": "Draft",
-      "ARCHIVED": "Archived",
-      "CATEGORY": "Category",
-      "SETTINGS": "Settings",
-      "CATEGORY_EMPTY_MESSAGE": "No categories found"
+      "ARTICLES": "Articles",
+      "CATEGORIES": "Categories",
+      "LOCALES": "Locales",
+      "SETTINGS": "Settings"
     },
     "CHANNELS": "Channels",
     "SET_AUTO_OFFLINE": {
diff --git a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
index d75836aba..89d1dfb15 100644
--- a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
@@ -15,7 +15,6 @@ const Suspended = () => import('./suspended/Index.vue');
 
 export default {
   routes: [
-    ...helpcenterRoutes.routes,
     {
       path: frontendURL('accounts/:accountId'),
       component: AppContainer,
@@ -35,6 +34,7 @@ export default {
         ...contactRoutes,
         ...searchRoutes,
         ...notificationRoutes,
+        ...helpcenterRoutes.routes,
       ],
     },
     {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
deleted file mode 100644
index 7886b942c..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<script>
-import Modal from 'dashboard/components/Modal.vue';
-import { required } from '@vuelidate/validators';
-import { useVuelidate } from '@vuelidate/core';
-import { useAlert } from 'dashboard/composables';
-import allLocales from 'shared/constants/locales.js';
-import { PORTALS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-import { useTrack } from 'dashboard/composables';
-
-export default {
-  components: {
-    Modal,
-  },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-    portal: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  emits: ['cancel', 'update:show'],
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      selectedLocale: '',
-      isUpdating: false,
-    };
-  },
-  computed: {
-    localShow: {
-      get() {
-        return this.show;
-      },
-      set(value) {
-        this.$emit('update:show', value);
-      },
-    },
-    addedLocales() {
-      const { allowed_locales: allowedLocales } = this.portal.config;
-      return allowedLocales.map(locale => locale.code);
-    },
-    locales() {
-      const addedLocales = this.portal.config.allowed_locales.map(
-        locale => locale.code
-      );
-      return Object.keys(allLocales)
-        .map(key => {
-          return {
-            id: key,
-            name: allLocales[key],
-            code: key,
-          };
-        })
-        .filter(locale => {
-          return !addedLocales.includes(locale.code);
-        });
-    },
-  },
-  validations: {
-    selectedLocale: {
-      required,
-    },
-  },
-  methods: {
-    async onCreate() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-      const updatedLocales = this.addedLocales;
-      updatedLocales.push(this.selectedLocale);
-      this.isUpdating = true;
-      try {
-        await this.$store.dispatch('portals/update', {
-          portalSlug: this.portal.slug,
-          config: { allowed_locales: updatedLocales },
-        });
-        this.alertMessage = this.$t(
-          'HELP_CENTER.PORTAL.ADD_LOCALE.API.SUCCESS_MESSAGE'
-        );
-        this.onClose();
-        useTrack(PORTALS_EVENTS.CREATE_LOCALE, {
-          localeAdded: this.selectedLocale,
-          totalLocales: updatedLocales.length,
-          from: this.$route.name,
-        });
-      } catch (error) {
-        this.alertMessage =
-          error?.message ||
-          this.$t('HELP_CENTER.PORTAL.ADD_LOCALE.API.ERROR_MESSAGE');
-      } finally {
-        useAlert(this.alertMessage);
-        this.isUpdating = false;
-      }
-    },
-    onClose() {
-      this.$emit('cancel');
-    },
-  },
-};
-</script>
-
-<template>
-  <Modal v-model:show="localShow" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('HELP_CENTER.PORTAL.ADD_LOCALE.TITLE')"
-      :header-content="$t('HELP_CENTER.PORTAL.ADD_LOCALE.SUB_TITLE')"
-    />
-    <form class="w-full" @submit.prevent="onCreate">
-      <div class="w-full">
-        <label :class="{ error: v$.selectedLocale.$error }">
-          {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.LABEL') }}
-          <select v-model="selectedLocale">
-            <option
-              v-for="locale in locales"
-              :key="locale.name"
-              :value="locale.id"
-            >
-              {{ locale.name }}-{{ locale.code }}
-            </option>
-          </select>
-          <span v-if="v$.selectedLocale.$error" class="message">
-            {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.ERROR') }}
-          </span>
-        </label>
-
-        <div class="w-full">
-          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <woot-button class="button clear" @click.prevent="onClose">
-              {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.BUTTONS.CANCEL') }}
-            </woot-button>
-            <woot-button>
-              {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.BUTTONS.CREATE') }}
-            </woot-button>
-          </div>
-        </div>
-      </div>
-    </form>
-  </Modal>
-</template>
-
-<style scoped lang="scss">
-.input-container::v-deep {
-  margin: 0 0 var(--space-normal);
-
-  input {
-    margin-bottom: 0;
-  }
-
-  .message {
-    margin-top: 0;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
deleted file mode 100644
index 1ec5a3bd8..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<script setup>
-import { computed, defineEmits } from 'vue';
-import { debounce } from '@chatwoot/utils';
-import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
-import FullEditor from 'dashboard/components/widgets/WootWriter/FullEditor.vue';
-import { ARTICLE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
-
-const { article } = defineProps({
-  article: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-const emit = defineEmits(['saveArticle']);
-
-const saveArticle = debounce(value => emit('saveArticle', value), 400, false);
-
-const articleTitle = computed({
-  get: () => article.title,
-  set: title => {
-    saveArticle({ title });
-  },
-});
-
-const articleContent = computed({
-  get: () => article.content,
-  set: content => {
-    saveArticle({ content });
-  },
-});
-</script>
-
-<template>
-  <div class="edit-article--container">
-    <ResizableTextArea
-      v-model="articleTitle"
-      type="text"
-      :rows="1"
-      class="article-heading"
-      :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.TITLE_PLACEHOLDER')"
-    />
-    <FullEditor
-      v-model="articleContent"
-      class="article-content"
-      :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.CONTENT_PLACEHOLDER')"
-      :enabled-menu-options="ARTICLE_EDITOR_MENU_OPTIONS"
-    />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.edit-article--container {
-  @apply my-8 mx-auto py-0 max-w-[56rem] w-full;
-}
-
-.article-heading {
-  @apply text-[2.5rem] font-semibold leading-normal w-full text-slate-900 dark:text-slate-75 p-4 hover:bg-slate-25 dark:hover:bg-slate-800 hover:rounded-md resize-none min-h-[4rem] max-h-[40rem] h-auto mb-2 border-0 border-solid border-transparent dark:border-transparent;
-}
-
-.article-content {
-  @apply py-0 px-4 h-fit;
-}
-
-::v-deep {
-  .ProseMirror-menubar-wrapper {
-    .ProseMirror-woot-style {
-      @apply min-h-[15rem] max-h-full;
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
deleted file mode 100644
index 18281aec3..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<script>
-import { dynamicTime } from 'shared/helpers/timeHelper';
-import portalMixin from '../mixins/portalMixin';
-import { frontendURL } from 'dashboard/helper/URLHelper';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-
-export default {
-  components: {
-    Thumbnail,
-  },
-  mixins: [portalMixin],
-  props: {
-    showDragIcon: {
-      type: Boolean,
-      default: false,
-    },
-    id: {
-      type: Number,
-      required: true,
-    },
-    title: {
-      type: String,
-      required: true,
-    },
-    author: {
-      type: Object,
-      default: () => {},
-    },
-    category: {
-      type: Object,
-      default: () => {},
-    },
-    views: {
-      type: Number,
-      default: 0,
-    },
-    status: {
-      type: String,
-      default: 'draft',
-      values: ['archived', 'draft', 'published'],
-    },
-    updatedAt: {
-      type: Number,
-      default: 0,
-    },
-  },
-
-  computed: {
-    lastUpdatedAt() {
-      return dynamicTime(this.updatedAt);
-    },
-    formattedViewCount() {
-      return Number(this.views || 0).toLocaleString('en');
-    },
-    readableViewCount() {
-      return new Intl.NumberFormat('en-US', {
-        notation: 'compact',
-        compactDisplay: 'short',
-      }).format(this.views || 0);
-    },
-    articleAuthorName() {
-      return this.author?.name || '-';
-    },
-    labelColor() {
-      switch (this.status) {
-        case 'archived':
-          return 'secondary';
-        case 'draft':
-          return 'warning';
-        default:
-          return 'success';
-      }
-    },
-  },
-  methods: {
-    getCategoryRoute(categorySlug) {
-      const { portalSlug, locale } = this.$route.params;
-      return frontendURL(
-        `accounts/${this.accountId}/portals/${portalSlug}/${locale}/categories/${categorySlug}`
-      );
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="grid grid-cols-1 gap-4 px-6 py-3 my-0 -mx-4 bg-white border-b text-slate-700 dark:text-slate-100 last:border-b-0 dark:bg-slate-900 lg:grid-cols-12 border-slate-50 dark:border-slate-800"
-  >
-    <span class="flex items-start col-span-6 gap-2 text-left">
-      <fluent-icon
-        v-if="showDragIcon"
-        size="20"
-        class="flex-shrink-0 block w-4 h-4 mt-1 cursor-move text-slate-200 dark:text-slate-700 hover:text-slate-400 hover:dark:text-slate-200"
-        icon="grab-handle"
-      />
-      <div class="flex flex-col truncate">
-        <router-link :to="articleUrl(id)">
-          <h6
-            :title="title"
-            class="text-base ltr:text-left rtl:text-right text-slate-800 dark:text-slate-100 mb-0.5 leading-6 font-medium hover:underline overflow-hidden whitespace-nowrap text-ellipsis"
-          >
-            {{ title }}
-          </h6>
-        </router-link>
-        <div class="flex items-center gap-1">
-          <Thumbnail
-            v-if="author"
-            :src="author.thumbnail"
-            :username="author.name"
-            size="14px"
-          />
-          <div
-            v-else
-            v-tooltip.right="
-              $t('HELP_CENTER.TABLE.COLUMNS.AUTHOR_NOT_AVAILABLE')
-            "
-            class="flex items-center justify-center rounded w-3.5 h-3.5 bg-woot-100 dark:bg-woot-700"
-          >
-            <fluent-icon
-              icon="person"
-              type="filled"
-              size="10"
-              class="text-woot-300 dark:text-woot-300"
-            />
-          </div>
-          <span class="text-sm font-normal text-slate-700 dark:text-slate-200">
-            {{ articleAuthorName }}
-          </span>
-        </div>
-      </div>
-    </span>
-    <span class="flex items-center col-span-2">
-      <router-link
-        class="text-sm hover:underline p-0.5 truncate hover:bg-slate-25 hover:rounded-md"
-        :to="getCategoryRoute(category.slug)"
-      >
-        <span :title="category.name">
-          {{ category.name }}
-        </span>
-      </router-link>
-    </span>
-    <span
-      class="flex items-center text-xs lg:text-sm"
-      :title="formattedViewCount"
-    >
-      {{ readableViewCount }}
-      <span class="ml-1 lg:hidden">
-        {{ ` ${$t('HELP_CENTER.TABLE.HEADERS.READ_COUNT')}` }}
-      </span>
-    </span>
-    <span class="flex items-center capitalize">
-      <woot-label
-        class="!mb-0"
-        :title="status"
-        size="small"
-        variant="smooth"
-        :color-scheme="labelColor"
-      />
-    </span>
-    <span
-      class="flex items-center justify-end col-span-2 text-xs first-letter:uppercase text-slate-700 dark:text-slate-100"
-    >
-      {{ lastUpdatedAt }}
-    </span>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
index 4dcc97b22..809e58249 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
@@ -1,13 +1,13 @@
 <script>
 import { debounce } from '@chatwoot/utils';
 import { useAlert } from 'dashboard/composables';
+import allLocales from 'shared/constants/locales.js';
 
 import SearchHeader from './Header.vue';
 import SearchResults from './SearchResults.vue';
 import ArticleView from './ArticleView.vue';
 import ArticlesAPI from 'dashboard/api/helpCenter/articles';
 import { buildPortalArticleURL } from 'dashboard/helper/portalHelper';
-import portalMixin from '../../mixins/portalMixin';
 
 export default {
   name: 'ArticleSearchPopover',
@@ -16,7 +16,6 @@ export default {
     SearchResults,
     ArticleView,
   },
-  mixins: [portalMixin],
   props: {
     selectedPortalSlug: {
       type: String,
@@ -69,6 +68,9 @@ export default {
         article.slug
       );
     },
+    localeName(code) {
+      return allLocales[code];
+    },
     activeArticle(id) {
       return this.searchResultsWithUrl.find(article => article.id === id);
     },
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
deleted file mode 100644
index f19b13929..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<script>
-import ArticleItem from './ArticleItem.vue';
-import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
-import Draggable from 'vuedraggable';
-
-export default {
-  components: {
-    ArticleItem,
-    TableFooter,
-    Draggable,
-  },
-  props: {
-    articles: {
-      type: Array,
-      default: () => [],
-    },
-    totalCount: {
-      type: Number,
-      default: 0,
-    },
-    currentPage: {
-      type: Number,
-      default: 1,
-    },
-    pageSize: {
-      type: Number,
-      default: 25,
-    },
-  },
-  emits: ['reorder', 'pageChange'],
-  data() {
-    return {
-      localArticles: this.articles || [],
-    };
-  },
-  computed: {
-    dragEnabled() {
-      // dragging allowed only on category page
-      return this.articles.length > 1 && this.onCategoryPage;
-    },
-    onCategoryPage() {
-      return this.$route.name === 'show_category';
-    },
-    showArticleFooter() {
-      return this.currentPage === 1
-        ? this.totalCount > 25
-        : this.articles.length > 0;
-    },
-  },
-  watch: {
-    articles() {
-      this.localArticles = [...this.articles];
-    },
-  },
-  methods: {
-    onDragEnd() {
-      // why reuse the same positons array, instead of creating a new one?
-      // this ensures that the shuffling happens within the same group
-      // itself and does not create any new positions and avoid conflict with existing articles
-      // so if a user sorts on page number 2, and the positions are say [550, 560, 570, 580, 590]
-      // the new sorted items will be in the same position range as well
-      const sortedArticlePositions = this.localArticles
-        .map(article => article.position)
-        .sort((a, b) => {
-          // Why sort like this? Glad you asked!
-          // because JavaScript is the doom of my existence, and if a `compareFn` is not supplied,
-          // all non-undefined array elements are sorted by converting them to strings
-          // and comparing strings in UTF-16 code units order.
-          //
-          // so an array [20, 10000, 10, 30, 40] will be sorted as [10, 10000, 20, 30, 40]
-
-          return a - b;
-        });
-
-      const orderedArticles = this.localArticles.map(article => article.id);
-
-      const reorderedGroup = orderedArticles.reduce((obj, key, index) => {
-        obj[key] = sortedArticlePositions[index];
-        return obj;
-      }, {});
-
-      this.$emit('reorder', reorderedGroup);
-    },
-    onPageChange(page) {
-      this.$emit('pageChange', page);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex-1">
-    <div
-      class="sticky z-10 content-center hidden h-12 grid-cols-12 gap-4 px-6 py-0 bg-white border-b lg:grid border-slate-50 dark:border-slate-700 top-16 dark:bg-slate-900"
-      :class="{ draggable: onCategoryPage }"
-    >
-      <div
-        class="col-span-6 px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.TITLE') }}
-      </div>
-      <div
-        class="col-span-2 px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.CATEGORY') }}
-      </div>
-      <div
-        class="hidden px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right lg:block"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.READ_COUNT') }}
-      </div>
-      <div
-        class="px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.STATUS') }}
-      </div>
-      <div
-        class="hidden col-span-2 px-0 py-2 text-sm font-semibold text-right capitalize text-slate-700 dark:text-slate-100 rtl:text-left md:block"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.LAST_EDITED') }}
-      </div>
-    </div>
-    <Draggable
-      tag="div"
-      class="px-4 pb-4 border-t-0"
-      :disabled="!dragEnabled"
-      :list="localArticles"
-      ghost-class="article-ghost-class"
-      item-key="id"
-      @start="dragging = true"
-      @end="onDragEnd"
-    >
-      <template #item="{ element }">
-        <ArticleItem
-          :id="element.id"
-          :key="element.id"
-          :class="{ draggable: onCategoryPage }"
-          :title="element.title"
-          :author="element.author"
-          :show-drag-icon="dragEnabled"
-          :category="element.category"
-          :views="element.views"
-          :status="element.status"
-          :updated-at="element.updated_at"
-        />
-      </template>
-    </Draggable>
-
-    <TableFooter
-      v-if="showArticleFooter"
-      :current-page="currentPage"
-      :total-count="totalCount"
-      :page-size="pageSize"
-      class="bottom-0 border-t dark:bg-slate-900 border-slate-75 dark:border-slate-700/50"
-      @page-change="onPageChange"
-    />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/*
-The .article-ghost-class class is maintained as the vueDraggable doesn't allow multiple classes
-to be passed in the ghost-class prop.
- */
-.article-ghost-class {
-  @apply opacity-50 bg-slate-50 dark:bg-slate-800;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
deleted file mode 100644
index 681a09b8d..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
+++ /dev/null
@@ -1,237 +0,0 @@
-<script>
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
-
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
-export default {
-  components: {
-    FluentIcon,
-    WootDropdownItem,
-    WootDropdownMenu,
-    MultiselectDropdownItems,
-  },
-  props: {
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    count: {
-      type: Number,
-      default: 0,
-    },
-    selectedValue: {
-      type: String,
-      default: '',
-    },
-    selectedLocale: {
-      type: String,
-      default: '',
-    },
-    shouldShowSettings: {
-      type: Boolean,
-      default: false,
-    },
-    allLocales: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  emits: ['openModal', 'open', 'close', 'newArticlePage', 'changeLocale'],
-  data() {
-    return {
-      showSortByDropdown: false,
-      showLocaleDropdown: false,
-    };
-  },
-  computed: {
-    shouldShowLocaleDropdown() {
-      return this.allLocales.length > 1;
-    },
-    switchableLocales() {
-      return this.allLocales.filter(
-        locale => locale.name !== this.selectedLocale
-      );
-    },
-  },
-  methods: {
-    openFilterModal() {
-      this.$emit('openModal');
-    },
-    openDropdown() {
-      this.$emit('open');
-      this.showSortByDropdown = true;
-    },
-    closeDropdown() {
-      this.$emit('close');
-      this.showSortByDropdown = false;
-    },
-    openLocaleDropdown() {
-      this.showLocaleDropdown = true;
-    },
-    closeLocaleDropdown() {
-      this.showLocaleDropdown = false;
-    },
-    onClickNewArticlePage() {
-      this.$emit('newArticlePage');
-    },
-    onClickSelectItem(value) {
-      const { name, code } = value;
-      this.closeLocaleDropdown();
-      if (!name || name === this.selectedLocale) {
-        return;
-      }
-      this.$emit('changeLocale', code);
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="sticky top-0 z-50 flex items-center justify-between w-full h-16 p-6 bg-white dark:bg-slate-900"
-  >
-    <div class="flex items-center">
-      <woot-sidemenu-icon />
-      <div class="flex items-center mx-2 my-0">
-        <h3 class="mb-0 text-xl font-medium text-slate-800 dark:text-slate-100">
-          {{ headerTitle }}
-        </h3>
-        <span class="text-sm text-slate-600 dark:text-slate-300 mx-2 mt-0.5">{{
-          `(${count})`
-        }}</span>
-      </div>
-    </div>
-    <div class="flex items-center gap-1">
-      <woot-button
-        v-if="shouldShowSettings"
-        icon="filter"
-        color-scheme="secondary"
-        variant="hollow"
-        size="small"
-        @click="openFilterModal"
-      >
-        {{ $t('HELP_CENTER.HEADER.FILTER') }}
-      </woot-button>
-      <woot-button
-        v-if="shouldShowSettings"
-        icon="arrow-sort"
-        color-scheme="secondary"
-        size="small"
-        variant="hollow"
-        @click="openDropdown"
-      >
-        {{ $t('HELP_CENTER.HEADER.SORT') }}
-        <span
-          class="inline-flex items-center ml-1 rtl:ml-0 rtl:mr-1 text-slate-800 dark:text-slate-100"
-        >
-          {{ selectedValue }}
-          <FluentIcon class="dropdown-arrow" icon="chevron-down" size="14" />
-        </span>
-      </woot-button>
-      <div
-        v-if="showSortByDropdown"
-        v-on-clickaway="closeDropdown"
-        class="dropdown-pane dropdown-pane--open"
-      >
-        <WootDropdownMenu>
-          <WootDropdownItem>
-            <woot-button
-              variant="clear"
-              color-scheme="secondary"
-              size="small"
-              icon="send-clock"
-            >
-              {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.PUBLISHED') }}
-            </woot-button>
-          </WootDropdownItem>
-          <WootDropdownItem>
-            <woot-button
-              variant="clear"
-              color-scheme="secondary"
-              size="small"
-              icon="dual-screen-clock"
-            >
-              {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.DRAFT') }}
-            </woot-button>
-          </WootDropdownItem>
-          <WootDropdownItem>
-            <woot-button
-              variant="clear"
-              color-scheme="secondary"
-              size="small"
-              icon="calendar-clock"
-            >
-              {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.ARCHIVED') }}
-            </woot-button>
-          </WootDropdownItem>
-        </WootDropdownMenu>
-      </div>
-      <woot-button
-        v-if="shouldShowSettings"
-        v-tooltip.top-end="$t('HELP_CENTER.HEADER.SETTINGS_BUTTON')"
-        icon="settings"
-        variant="hollow"
-        size="small"
-        color-scheme="secondary"
-      />
-      <div class="relative">
-        <woot-button
-          v-if="shouldShowLocaleDropdown"
-          icon="globe"
-          color-scheme="secondary"
-          size="small"
-          variant="hollow"
-          @click="openLocaleDropdown"
-        >
-          <div class="flex items-center justify-between w-full min-w-0">
-            <span
-              class="inline-flex items-center ml-1 rtl:ml-0 rtl:mr-1 text-slate-800 dark:text-slate-100"
-            >
-              {{ selectedLocale }}
-              <FluentIcon
-                class="dropdown-arrow"
-                icon="chevron-down"
-                size="14"
-              />
-            </span>
-          </div>
-        </woot-button>
-        <div
-          v-if="showLocaleDropdown"
-          v-on-clickaway="closeLocaleDropdown"
-          class="dropdown-pane dropdown-pane--open"
-        >
-          <MultiselectDropdownItems
-            :options="switchableLocales"
-            :has-thumbnail="false"
-            :selected-items="[selectedLocale]"
-            :input-placeholder="
-              $t('HELP_CENTER.HEADER.LOCALE_SELECT.SEARCH_PLACEHOLDER')
-            "
-            :no-search-result="$t('HELP_CENTER.HEADER.LOCALE_SELECT.NO_RESULT')"
-            @select="onClickSelectItem"
-          />
-        </div>
-      </div>
-      <woot-button
-        size="small"
-        icon="add"
-        color-scheme="primary"
-        @click="onClickNewArticlePage"
-      >
-        {{ $t('HELP_CENTER.HEADER.NEW_BUTTON') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.dropdown-pane--open {
-  @apply absolute top-10 right-0 z-50 min-w-[8rem];
-}
-
-.dropdown-arrow {
-  @apply ml-1 rtl:ml-0 rtl:mr-1;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
deleted file mode 100644
index 83b746aa5..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
+++ /dev/null
@@ -1,252 +0,0 @@
-<script>
-import { useAlert } from 'dashboard/composables';
-import { useTrack } from 'dashboard/composables';
-import wootConstants from 'dashboard/constants/globals';
-import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
-
-const { ARTICLE_STATUS_TYPES } = wootConstants;
-
-export default {
-  props: {
-    isSidebarOpen: {
-      type: Boolean,
-      default: true,
-    },
-    backButtonLabel: {
-      type: String,
-      default: '',
-    },
-    isUpdating: {
-      type: Boolean,
-      default: false,
-    },
-    isSaved: {
-      type: Boolean,
-      default: false,
-    },
-    enableOpenSidebarButton: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['back', 'show', 'add', 'updateMeta', 'open', 'close'],
-  data() {
-    return {
-      showActionsDropdown: false,
-      alertMessage: '',
-      ARTICLE_STATUS_TYPES,
-    };
-  },
-  computed: {
-    statusText() {
-      return this.isUpdating
-        ? this.$t('HELP_CENTER.EDIT_HEADER.SAVING')
-        : this.$t('HELP_CENTER.EDIT_HEADER.SAVED');
-    },
-    articleSlug() {
-      return this.$route.params.articleSlug;
-    },
-    currentPortalSlug() {
-      return this.$route.params.portalSlug;
-    },
-    currentArticleStatus() {
-      return this.$store.getters['articles/articleStatus'](this.articleSlug);
-    },
-    isPublishedArticle() {
-      return this.currentArticleStatus === 'published';
-    },
-    isArchivedArticle() {
-      return this.currentArticleStatus === 'archived';
-    },
-  },
-  methods: {
-    onClickGoBack() {
-      this.$emit('back');
-    },
-    showPreview() {
-      this.$emit('show');
-    },
-    onClickAdd() {
-      this.$emit('add');
-    },
-    async updateArticleStatus(status) {
-      try {
-        await this.$store.dispatch('articles/update', {
-          portalSlug: this.currentPortalSlug,
-          articleId: this.articleSlug,
-          status: status,
-        });
-        this.$emit('updateMeta');
-        this.statusUpdateSuccessMessage(status);
-        this.closeActionsDropdown();
-        if (status === this.ARTICLE_STATUS_TYPES.ARCHIVE) {
-          useTrack(PORTALS_EVENTS.ARCHIVE_ARTICLE, { uiFrom: 'header' });
-        } else if (status === this.ARTICLE_STATUS_TYPES.PUBLISH) {
-          useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
-        }
-      } catch (error) {
-        this.alertMessage =
-          error?.message || this.statusUpdateErrorMessage(status);
-      } finally {
-        useAlert(this.alertMessage);
-      }
-    },
-    statusUpdateSuccessMessage(status) {
-      if (status === this.ARTICLE_STATUS_TYPES.PUBLISH) {
-        this.alertMessage = this.$t('HELP_CENTER.PUBLISH_ARTICLE.API.SUCCESS');
-      } else if (status === this.ARTICLE_STATUS_TYPES.ARCHIVE) {
-        this.alertMessage = this.$t('HELP_CENTER.ARCHIVE_ARTICLE.API.SUCCESS');
-      }
-    },
-    statusUpdateErrorMessage(status) {
-      if (status === this.ARTICLE_STATUS_TYPES.PUBLISH) {
-        this.alertMessage = this.$t('HELP_CENTER.PUBLISH_ARTICLE.API.ERROR');
-      } else if (status === this.ARTICLE_STATUS_TYPES.ARCHIVE) {
-        this.alertMessage = this.$t('HELP_CENTER.ARCHIVE_ARTICLE.API.ERROR');
-      }
-    },
-    openSidebar() {
-      this.$emit('open');
-    },
-    closeSidebar() {
-      this.$emit('close');
-    },
-    openActionsDropdown() {
-      this.showActionsDropdown = !this.showActionsDropdown;
-    },
-    closeActionsDropdown() {
-      this.showActionsDropdown = false;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex items-center justify-between w-full h-16">
-    <div class="flex items-center">
-      <woot-button
-        icon="chevron-left"
-        variant="clear"
-        size="small"
-        color-scheme="primary"
-        class="back-button"
-        @click="onClickGoBack"
-      >
-        {{ backButtonLabel }}
-      </woot-button>
-    </div>
-    <div class="flex items-center gap-1">
-      <span
-        v-if="isUpdating || isSaved"
-        class="items-center ml-4 mr-1 text-xs draft-status rtl:ml-2 rtl:mr-4 text-slate-400 dark:text-slate-300"
-      >
-        {{ statusText }}
-      </span>
-
-      <woot-button
-        class-names="article--buttons relative"
-        icon="globe"
-        color-scheme="secondary"
-        variant="hollow"
-        size="small"
-        @click="showPreview"
-      >
-        {{ $t('HELP_CENTER.EDIT_HEADER.PREVIEW') }}
-      </woot-button>
-      <!-- Hidden since this is in V2
-      <woot-button
-        v-if="shouldShowAddLocaleButton"
-        class-names="article--buttons relative"
-        icon="add"
-        color-scheme="secondary"
-        variant="hollow"
-        size="small"
-        @click="onClickAdd"
-      >
-        {{ $t('HELP_CENTER.EDIT_HEADER.ADD_TRANSLATION') }}
-      </woot-button> -->
-      <woot-button
-        v-if="!isSidebarOpen"
-        v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.OPEN_SIDEBAR')"
-        icon="pane-open"
-        class-names="article--buttons relative sidebar-button"
-        variant="hollow"
-        size="small"
-        color-scheme="secondary"
-        :is-disabled="enableOpenSidebarButton"
-        @click="openSidebar"
-      />
-      <woot-button
-        v-if="isSidebarOpen"
-        v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.CLOSE_SIDEBAR')"
-        icon="pane-close"
-        class-names="article--buttons relative"
-        variant="hollow"
-        size="small"
-        color-scheme="secondary"
-        @click="closeSidebar"
-      />
-      <div class="relative article--buttons">
-        <div class="button-group">
-          <woot-button
-            class-names="publish-button"
-            size="small"
-            icon="checkmark"
-            color-scheme="primary"
-            :is-disabled="!articleSlug || isPublishedArticle"
-            @click="updateArticleStatus(ARTICLE_STATUS_TYPES.PUBLISH)"
-          >
-            {{ $t('HELP_CENTER.EDIT_HEADER.PUBLISH_BUTTON') }}
-          </woot-button>
-          <woot-button
-            size="small"
-            icon="chevron-down"
-            :is-disabled="!articleSlug || isArchivedArticle"
-            @click="openActionsDropdown"
-          />
-        </div>
-        <div
-          v-if="showActionsDropdown"
-          v-on-clickaway="closeActionsDropdown"
-          class="dropdown-pane dropdown-pane--open"
-        >
-          <woot-dropdown-menu>
-            <woot-dropdown-item>
-              <woot-button
-                variant="clear"
-                color-scheme="secondary"
-                size="small"
-                icon="book-clock"
-                @click="updateArticleStatus(ARTICLE_STATUS_TYPES.ARCHIVE)"
-              >
-                {{ $t('HELP_CENTER.EDIT_HEADER.MOVE_TO_ARCHIVE_BUTTON') }}
-              </woot-button>
-            </woot-dropdown-item>
-          </woot-dropdown-menu>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.article--buttons {
-  .dropdown-pane {
-    @apply absolute right-0;
-  }
-}
-
-.draft-status {
-  animation: fadeIn 1s;
-
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
deleted file mode 100644
index 46e5c144b..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ /dev/null
@@ -1,364 +0,0 @@
-<script>
-import { defineAsyncComponent } from 'vue';
-import { mapGetters } from 'vuex';
-import UpgradePage from './UpgradePage.vue';
-import NextSidebar from 'next/sidebar/Sidebar.vue';
-import { frontendURL } from '../../../../helper/URLHelper';
-import Sidebar from 'dashboard/components/layout/Sidebar.vue';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
-import PortalPopover from '../components/PortalPopover.vue';
-import HelpCenterSidebar from '../components/Sidebar/Sidebar.vue';
-import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal.vue';
-import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector.vue';
-import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-import portalMixin from '../mixins/portalMixin';
-import AddCategory from '../pages/categories/AddCategory.vue';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-import { emitter } from 'shared/helpers/mitt';
-
-const CommandBar = defineAsyncComponent(
-  () => import('dashboard/routes/dashboard/commands/commandbar.vue')
-);
-
-export default {
-  components: {
-    NextSidebar,
-    AccountSelector,
-    AddCategory,
-    CommandBar,
-    HelpCenterSidebar,
-    NotificationPanel,
-    PortalPopover,
-    Sidebar,
-    UpgradePage,
-    WootKeyShortcutModal,
-  },
-  mixins: [portalMixin],
-  setup() {
-    const { uiSettings, updateUISettings } = useUISettings();
-
-    return {
-      uiSettings,
-      updateUISettings,
-    };
-  },
-  data() {
-    return {
-      isOnDesktop: true,
-      showShortcutModal: false,
-      showNotificationPanel: false,
-      showPortalPopover: false,
-      showAddCategoryModal: false,
-      lastActivePortalSlug: '',
-      showAccountModal: false,
-    };
-  },
-
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      portals: 'portals/allPortals',
-      categories: 'categories/allCategories',
-      meta: 'portals/getMeta',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-    }),
-
-    isHelpCenterEnabled() {
-      return this.isFeatureEnabledonAccount(
-        this.accountId,
-        FEATURE_FLAGS.HELP_CENTER
-      );
-    },
-    showNextSidebar() {
-      return this.isFeatureEnabledonAccount(
-        this.accountId,
-        FEATURE_FLAGS.CHATWOOT_V4
-      );
-    },
-    isSidebarOpen() {
-      const { show_help_center_secondary_sidebar: showSecondarySidebar } =
-        this.uiSettings;
-      return showSecondarySidebar;
-    },
-    showHelpCenterSidebar() {
-      if (!this.isHelpCenterEnabled) {
-        return false;
-      }
-
-      return this.portals.length === 0 ? false : this.isSidebarOpen;
-    },
-    selectedPortal() {
-      const slug = this.$route.params.portalSlug || this.lastActivePortalSlug;
-      if (slug) return this.$store.getters['portals/portalBySlug'](slug);
-
-      return this.$store.getters['portals/allPortals'][0];
-    },
-    selectedLocaleInPortal() {
-      return this.$route.params.locale || this.defaultPortalLocale;
-    },
-    selectedPortalName() {
-      return this.selectedPortal ? this.selectedPortal.name : '';
-    },
-    selectedPortalSlug() {
-      return this.selectedPortal ? this.selectedPortal?.slug : '';
-    },
-    defaultPortalLocale() {
-      return this.selectedPortal
-        ? this.selectedPortal?.meta?.default_locale
-        : '';
-    },
-    accessibleMenuItems() {
-      if (!this.selectedPortal) return [];
-
-      const {
-        allArticlesCount,
-        mineArticlesCount,
-        draftArticlesCount,
-        archivedArticlesCount,
-      } = this.meta;
-
-      return [
-        {
-          icon: 'book',
-          label: 'HELP_CENTER.ALL_ARTICLES',
-          key: 'list_all_locale_articles',
-          count: allArticlesCount,
-          toState: frontendURL(
-            `accounts/${this.accountId}/portals/${this.selectedPortalSlug}/${this.selectedLocaleInPortal}/articles`
-          ),
-          toolTip: 'All Articles',
-          toStateName: 'list_all_locale_articles',
-        },
-        {
-          icon: 'pen',
-          label: 'HELP_CENTER.MY_ARTICLES',
-          key: 'list_mine_articles',
-          count: mineArticlesCount,
-          toState: frontendURL(
-            `accounts/${this.accountId}/portals/${this.selectedPortalSlug}/${this.selectedLocaleInPortal}/articles/mine`
-          ),
-          toolTip: 'My articles',
-          toStateName: 'list_mine_articles',
-        },
-        {
-          icon: 'draft',
-          label: 'HELP_CENTER.DRAFT',
-          key: 'list_draft_articles',
-          count: draftArticlesCount,
-          toState: frontendURL(
-            `accounts/${this.accountId}/portals/${this.selectedPortalSlug}/${this.selectedLocaleInPortal}/articles/draft`
-          ),
-          toolTip: 'Draft',
-          toStateName: 'list_draft_articles',
-        },
-        {
-          icon: 'archive',
-          label: 'HELP_CENTER.ARCHIVED',
-          key: 'list_archived_articles',
-          count: archivedArticlesCount,
-          toState: frontendURL(
-            `accounts/${this.accountId}/portals/${this.selectedPortalSlug}/${this.selectedLocaleInPortal}/articles/archived`
-          ),
-          toolTip: 'Archived',
-          toStateName: 'list_archived_articles',
-        },
-        {
-          icon: 'settings',
-          label: 'HELP_CENTER.SETTINGS',
-          key: 'edit_portal_information',
-          toState: frontendURL(
-            `accounts/${this.accountId}/portals/${this.selectedPortalSlug}/edit`
-          ),
-          toStateName: 'edit_portal_information',
-        },
-      ];
-    },
-    additionalSecondaryMenuItems() {
-      if (!this.selectedPortal) return [];
-      return [
-        {
-          icon: 'folder',
-          label: 'HELP_CENTER.CATEGORY',
-          hasSubMenu: true,
-          showNewButton: true,
-          key: 'category',
-          children: this.categories.map(category => ({
-            id: category.id,
-            label: category.icon
-              ? `${category.icon} ${category.name}`
-              : category.name,
-            count: category.meta.articles_count,
-            truncateLabel: true,
-            toState: frontendURL(
-              `accounts/${this.accountId}/portals/${this.selectedPortalSlug}/${category.locale}/categories/${category.slug}`
-            ),
-          })),
-        },
-      ];
-    },
-    currentRoute() {
-      return '  ';
-    },
-    headerTitle() {
-      return this.selectedPortal ? this.selectedPortal.name : '';
-    },
-  },
-
-  watch: {
-    '$route.name'() {
-      const routeName = this.$route?.name;
-      const routeParams = this.$route?.params;
-      const updateMetaInAllPortals = routeName === 'list_all_portals';
-      const updateMetaInEditArticle =
-        routeName === 'edit_article' && routeParams?.recentlyCreated;
-      const updateMetaInLocaleArticles =
-        routeName === 'list_all_locale_articles' &&
-        routeParams?.recentlyDeleted;
-      if (
-        updateMetaInAllPortals ||
-        updateMetaInEditArticle ||
-        updateMetaInLocaleArticles
-      ) {
-        this.fetchPortalAndItsCategories();
-      }
-    },
-  },
-
-  mounted() {
-    emitter.on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
-
-    const slug = this.$route.params.portalSlug;
-    if (slug) this.lastActivePortalSlug = slug;
-
-    this.fetchPortalAndItsCategories();
-  },
-  unmounted() {
-    emitter.off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
-  },
-  updated() {
-    const slug = this.$route.params.portalSlug;
-    if (slug !== this.lastActivePortalSlug) {
-      this.lastActivePortalSlug = slug;
-      this.updateUISettings({
-        last_active_portal_slug: slug,
-        last_active_locale_code: this.selectedLocaleInPortal,
-      });
-    }
-  },
-  methods: {
-    toggleSidebar() {
-      if (this.portals.length > 0) {
-        this.updateUISettings({
-          show_help_center_secondary_sidebar: !this.isSidebarOpen,
-        });
-      }
-    },
-    async fetchPortalAndItsCategories() {
-      await this.$store.dispatch('portals/index');
-      const selectedPortalParam = {
-        portalSlug: this.selectedPortalSlug,
-        locale: this.selectedLocaleInPortal,
-      };
-      this.$store.dispatch('portals/show', selectedPortalParam);
-      this.$store.dispatch('categories/index', selectedPortalParam);
-      this.$store.dispatch('agents/get');
-    },
-    toggleKeyShortcutModal() {
-      this.showShortcutModal = true;
-    },
-    closeKeyShortcutModal() {
-      this.showShortcutModal = false;
-    },
-    openNotificationPanel() {
-      this.showNotificationPanel = true;
-    },
-    closeNotificationPanel() {
-      this.showNotificationPanel = false;
-    },
-    openPortalPopover() {
-      this.showPortalPopover = !this.showPortalPopover;
-    },
-    closePortalPopover() {
-      this.showPortalPopover = false;
-    },
-    onClickOpenAddCategoryModal() {
-      this.showAddCategoryModal = true;
-    },
-    onClickCloseAddCategoryModal() {
-      this.showAddCategoryModal = false;
-    },
-    toggleAccountModal() {
-      this.showAccountModal = !this.showAccountModal;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex flex-grow-0 w-full h-full min-h-0 app-wrapper">
-    <NextSidebar
-      v-if="showNextSidebar"
-      @toggle-account-modal="toggleAccountModal"
-      @open-notification-panel="openNotificationPanel"
-      @open-key-shortcut-modal="toggleKeyShortcutModal"
-      @close-key-shortcut-modal="closeKeyShortcutModal"
-    />
-    <Sidebar
-      v-else
-      :route="currentRoute"
-      @toggle-account-modal="toggleAccountModal"
-      @open-notification-panel="openNotificationPanel"
-      @open-key-shortcut-modal="toggleKeyShortcutModal"
-      @close-key-shortcut-modal="closeKeyShortcutModal"
-    />
-    <HelpCenterSidebar
-      v-if="showHelpCenterSidebar"
-      :header-title="headerTitle"
-      :portal-slug="selectedPortalSlug"
-      :locale-slug="selectedLocaleInPortal"
-      :sub-title="localeName(selectedLocaleInPortal)"
-      :accessible-menu-items="accessibleMenuItems"
-      :additional-secondary-menu-items="additionalSecondaryMenuItems"
-      @open-popover="openPortalPopover"
-      @open-modal="onClickOpenAddCategoryModal"
-    />
-    <section
-      v-if="isHelpCenterEnabled"
-      class="flex flex-1 h-full px-0 overflow-hidden bg-white dark:bg-slate-900"
-    >
-      <router-view @reload-locale="fetchPortalAndItsCategories" />
-      <CommandBar />
-      <AccountSelector
-        :show-account-modal="showAccountModal"
-        @close-account-modal="toggleAccountModal"
-      />
-      <WootKeyShortcutModal
-        v-if="showShortcutModal"
-        @close="closeKeyShortcutModal"
-        @clickaway="closeKeyShortcutModal"
-      />
-      <NotificationPanel
-        v-if="showNotificationPanel"
-        @close="closeNotificationPanel"
-      />
-      <PortalPopover
-        v-if="showPortalPopover"
-        :portals="portals"
-        :active-portal-slug="selectedPortalSlug"
-        :active-locale="selectedLocaleInPortal"
-        @fetch-portal="fetchPortalAndItsCategories"
-        @close-popover="closePortalPopover"
-      />
-      <AddCategory
-        v-if="showAddCategoryModal"
-        v-model:show="showAddCategoryModal"
-        :portal-name="selectedPortalName"
-        :locale="selectedLocaleInPortal"
-        :portal-slug="selectedPortalSlug"
-        @cancel="onClickCloseAddCategoryModal"
-      />
-    </section>
-    <UpgradePage v-else />
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Layout/SettingsLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Layout/SettingsLayout.vue
deleted file mode 100644
index bc3c51a39..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Layout/SettingsLayout.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    default: null,
-  },
-});
-</script>
-
-<template>
-  <div
-    class="flex-grow-0 flex-shrink-0 w-full h-full max-w-full bg-white border border-transparent border-solid dark:bg-slate-900 dark:border-transparent md:max-w-2xl"
-  >
-    <h3
-      v-if="$slots.title || title"
-      class="text-lg text-black-900 dark:text-slate-200"
-    >
-      <slot name="title">{{ title }}</slot>
-    </h3>
-    <div
-      class="mx-0 my-4 border-b border-solid border-slate-25 dark:border-slate-800"
-    >
-      <slot />
-    </div>
-    <div class="flex justify-between">
-      <div>
-        <slot name="footer-left" />
-      </div>
-      <div>
-        <slot name="footer-right" />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
deleted file mode 100644
index fa67ceaad..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
+++ /dev/null
@@ -1,379 +0,0 @@
-<script>
-import { useAlert } from 'dashboard/composables';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-import thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import LocaleItemTable from './PortalListItemTable.vue';
-import { PORTALS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-import { useTrack } from 'dashboard/composables';
-
-export default {
-  components: {
-    Thumbnail: thumbnail,
-    LocaleItemTable,
-  },
-  props: {
-    portal: {
-      type: Object,
-      default: () => {},
-    },
-    status: {
-      type: String,
-      default: '',
-      values: ['archived', 'draft', 'published'],
-    },
-  },
-  emits: ['addLocale', 'openSite'],
-  setup() {
-    const { updateUISettings } = useUISettings();
-
-    return {
-      updateUISettings,
-    };
-  },
-  data() {
-    return {
-      showDeleteConfirmationPopup: false,
-      alertMessage: '',
-      selectedPortalForDelete: {},
-    };
-  },
-  computed: {
-    labelColor() {
-      switch (this.status) {
-        case 'Archived':
-          return 'warning';
-        default:
-          return 'success';
-      }
-    },
-    deleteMessageValue() {
-      return ` ${this.selectedPortalForDelete.name}?`;
-    },
-    locales() {
-      return this.portal ? this.portal.config.allowed_locales : [];
-    },
-    allowedLocales() {
-      return Object.keys(this.locales).map(key => {
-        return this.locales[key].code;
-      });
-    },
-    articleCount() {
-      const { allowed_locales: allowedLocales } = this.portal.config;
-      return allowedLocales.reduce((acc, locale) => {
-        return acc + locale.articles_count;
-      }, 0);
-    },
-  },
-  methods: {
-    addLocale() {
-      this.$emit('addLocale', this.portal.id);
-    },
-    openSite() {
-      this.$emit('openSite', this.portal.slug);
-    },
-    openSettings() {
-      this.fetchPortalAndItsCategories();
-      this.navigateToPortalEdit();
-    },
-    onClickOpenDeleteModal(portal) {
-      this.selectedPortalForDelete = portal;
-      this.showDeleteConfirmationPopup = true;
-    },
-    closeDeletePopup() {
-      this.showDeleteConfirmationPopup = false;
-    },
-    async fetchPortalAndItsCategories() {
-      await this.$store.dispatch('portals/index');
-      const {
-        slug,
-        config: { allowed_locales: allowedLocales },
-      } = this.portal;
-      const selectedPortalParam = {
-        portalSlug: slug,
-        locale: allowedLocales[0].code,
-      };
-      this.$store.dispatch('portals/show', selectedPortalParam);
-      this.$store.dispatch('categories/index', selectedPortalParam);
-    },
-    async onClickDeletePortal() {
-      const { slug } = this.selectedPortalForDelete;
-      try {
-        await this.$store.dispatch('portals/delete', {
-          portalSlug: slug,
-        });
-        this.selectedPortalForDelete = {};
-        this.closeDeletePopup();
-        this.alertMessage = this.$t(
-          'HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.API.DELETE_SUCCESS'
-        );
-        this.updateUISettings({
-          last_active_portal_slug: undefined,
-          last_active_locale_code: undefined,
-        });
-      } catch (error) {
-        this.alertMessage =
-          error?.message ||
-          this.$t(
-            'HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.API.DELETE_ERROR'
-          );
-      } finally {
-        useAlert(this.alertMessage);
-      }
-    },
-    changeDefaultLocale({ localeCode }) {
-      this.updatePortalLocales({
-        allowedLocales: this.allowedLocales,
-        defaultLocale: localeCode,
-        successMessage: this.$t(
-          'HELP_CENTER.PORTAL.CHANGE_DEFAULT_LOCALE.API.SUCCESS_MESSAGE'
-        ),
-        errorMessage: this.$t(
-          'HELP_CENTER.PORTAL.CHANGE_DEFAULT_LOCALE.API.ERROR_MESSAGE'
-        ),
-      });
-      useTrack(PORTALS_EVENTS.SET_DEFAULT_LOCALE, {
-        newLocale: localeCode,
-        from: this.$route.name,
-      });
-    },
-    deletePortalLocale({ localeCode }) {
-      const updatedLocales = this.allowedLocales.filter(
-        code => code !== localeCode
-      );
-      const defaultLocale = this.portal.meta.default_locale;
-      this.updatePortalLocales({
-        allowedLocales: updatedLocales,
-        defaultLocale,
-        successMessage: this.$t(
-          'HELP_CENTER.PORTAL.DELETE_LOCALE.API.SUCCESS_MESSAGE'
-        ),
-        errorMessage: this.$t(
-          'HELP_CENTER.PORTAL.DELETE_LOCALE.API.ERROR_MESSAGE'
-        ),
-      });
-      useTrack(PORTALS_EVENTS.DELETE_LOCALE, {
-        deletedLocale: localeCode,
-        from: this.$route.name,
-      });
-    },
-    async updatePortalLocales({
-      allowedLocales,
-      defaultLocale,
-      successMessage,
-      errorMessage,
-    }) {
-      try {
-        await this.$store.dispatch('portals/update', {
-          portalSlug: this.portal.slug,
-          config: {
-            default_locale: defaultLocale,
-            allowed_locales: allowedLocales,
-          },
-        });
-        this.alertMessage = successMessage;
-      } catch (error) {
-        this.alertMessage = error?.message || errorMessage;
-      } finally {
-        useAlert(this.alertMessage);
-      }
-    },
-    navigateToPortalEdit() {
-      this.$router.push({
-        name: 'edit_portal_information',
-        params: { portalSlug: this.portal.slug },
-      });
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <div
-      class="relative flex p-4 mb-3 bg-white border border-solid rounded-md dark:bg-slate-900 border-slate-100 dark:border-slate-600"
-    >
-      <Thumbnail :username="portal.name" variant="square" />
-      <div class="flex-grow ml-2 rtl:ml-0 rtl:mr-2">
-        <header class="flex items-start justify-between mb-8">
-          <div>
-            <div class="flex items-center">
-              <h2 class="mb-0 text-lg text-slate-800 dark:text-slate-100">
-                {{ portal.name }}
-              </h2>
-              <woot-label
-                :title="status"
-                :color-scheme="labelColor"
-                size="small"
-                variant="smooth"
-                class="mx-2 my-0"
-              />
-            </div>
-            <p class="mb-0 text-sm text-slate-700 dark:text-slate-200">
-              {{ articleCount }}
-              {{
-                $t(
-                  'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.COUNT_LABEL'
-                )
-              }}
-            </p>
-          </div>
-          <div class="flex flex-row gap-1">
-            <woot-button
-              variant="smooth"
-              size="small"
-              color-scheme="primary"
-              @click="addLocale"
-            >
-              {{
-                $t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.ADD')
-              }}
-            </woot-button>
-            <woot-button
-              variant="hollow"
-              size="small"
-              color-scheme="secondary"
-              @click="openSite"
-            >
-              {{
-                $t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.VISIT')
-              }}
-            </woot-button>
-            <woot-button
-              v-tooltip.top-end="
-                $t(
-                  'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.SETTINGS'
-                )
-              "
-              variant="hollow"
-              size="small"
-              icon="settings"
-              color-scheme="secondary"
-              @click="openSettings"
-            />
-            <woot-button
-              v-tooltip.top-end="
-                $t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.DELETE')
-              "
-              variant="hollow"
-              color-scheme="alert"
-              size="small"
-              icon="delete"
-              @click="onClickOpenDeleteModal(portal)"
-            />
-          </div>
-        </header>
-        <div class="mb-12">
-          <h2
-            class="mb-2 text-base font-medium text-slate-800 dark:text-slate-100"
-          >
-            {{
-              $t(
-                'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.TITLE'
-              )
-            }}
-          </h2>
-          <div
-            class="flex justify-between mr-[6.25rem] rtl:mr-0 rtl:ml-[6.25rem] max-w-[80vw]"
-          >
-            <div class="flex flex-col">
-              <div class="flex flex-col items-start mb-4">
-                <label>{{
-                  $t(
-                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.NAME'
-                  )
-                }}</label>
-                <span class="text-sm text-slate-600 dark:text-slate-300">
-                  {{ portal.name }}
-                </span>
-              </div>
-              <div class="flex flex-col items-start mb-4">
-                <label>{{
-                  $t(
-                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.DOMAIN'
-                  )
-                }}</label>
-                <span class="text-sm text-slate-600 dark:text-slate-300">
-                  {{ portal.custom_domain }}
-                </span>
-              </div>
-            </div>
-            <div class="flex flex-col">
-              <div class="flex flex-col items-start mb-4">
-                <label>{{
-                  $t(
-                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SLUG'
-                  )
-                }}</label>
-                <span class="text-sm text-slate-600 dark:text-slate-300">
-                  {{ portal.slug }}
-                </span>
-              </div>
-              <div class="flex flex-col items-start mb-4">
-                <label>{{
-                  $t(
-                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.TITLE'
-                  )
-                }}</label>
-                <span class="text-sm text-slate-600 dark:text-slate-300">
-                  {{ portal.page_title }}
-                </span>
-              </div>
-            </div>
-            <div class="flex flex-col">
-              <div class="flex flex-col items-start mb-4">
-                <label>{{
-                  $t(
-                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.THEME'
-                  )
-                }}</label>
-                <div class="flex items-center">
-                  <div
-                    class="w-4 h-4 mr-1 border border-solid rounded-md rtl:mr-0 rtl:ml-1 border-slate-25 dark:border-slate-800"
-                    :style="{ background: portal.color }"
-                  />
-                </div>
-              </div>
-              <div class="flex flex-col items-start mb-4">
-                <label>{{
-                  $t(
-                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SUB_TEXT'
-                  )
-                }}</label>
-                <span class="text-sm text-slate-600 dark:text-slate-300">
-                  {{ portal.header_text }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="mb-12">
-          <h2
-            class="mb-2 text-base font-medium text-slate-800 dark:text-slate-100"
-          >
-            {{
-              $t(
-                'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TITLE'
-              )
-            }}
-          </h2>
-          <LocaleItemTable
-            :locales="locales"
-            :selected-locale-code="portal.meta.default_locale"
-            @change-default-locale="changeDefaultLocale"
-            @delete="deletePortalLocale"
-          />
-        </div>
-      </div>
-    </div>
-    <woot-delete-modal
-      v-model:show="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="onClickDeletePortal"
-      :title="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.TITLE')"
-      :message="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.MESSAGE')"
-      :message-value="deleteMessageValue"
-      :confirm-text="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.YES')"
-      :reject-text="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.NO')"
-    />
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
deleted file mode 100644
index e63186e3c..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<script>
-import portalMixin from '../mixins/portalMixin';
-export default {
-  mixins: [portalMixin],
-  props: {
-    locales: {
-      type: Array,
-      default: () => [],
-    },
-    selectedLocaleCode: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['changeDefaultLocale', 'delete'],
-
-  methods: {
-    changeDefaultLocale(localeCode) {
-      this.$emit('changeDefaultLocale', { localeCode });
-    },
-    deleteLocale(localeCode) {
-      this.$emit('delete', { localeCode });
-    },
-  },
-};
-</script>
-
-<template>
-  <table class="woot-table">
-    <thead>
-      <tr>
-        <th scope="col">
-          {{
-            $t(
-              'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.NAME'
-            )
-          }}
-        </th>
-        <th scope="col">
-          {{
-            $t(
-              'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.CODE'
-            )
-          }}
-        </th>
-        <th scope="col">
-          {{
-            $t(
-              'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.ARTICLE_COUNT'
-            )
-          }}
-        </th>
-        <th scope="col">
-          {{
-            $t(
-              'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.CATEGORIES'
-            )
-          }}
-        </th>
-        <th scope="col" />
-      </tr>
-    </thead>
-    <tr>
-      <td colspan="100%" class="horizontal-line" />
-    </tr>
-    <tbody>
-      <tr v-for="locale in locales" :key="locale.code">
-        <td>
-          <span>{{ localeName(locale.code) }}</span>
-          <woot-label
-            v-if="locale.code === selectedLocaleCode"
-            :title="
-              $t(
-                'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.DEFAULT_LOCALE'
-              )
-            "
-            color-scheme="warning"
-            small
-            variant="smooth"
-            class="default-status"
-          />
-        </td>
-        <td>
-          <span>{{ locale.code }}</span>
-        </td>
-        <td>
-          <span>{{ locale.articles_count }}</span>
-        </td>
-        <td>
-          <span>{{ locale.categories_count }}</span>
-        </td>
-        <td>
-          <woot-button
-            v-tooltip.top-end="
-              $t(
-                'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.SWAP'
-              )
-            "
-            size="tiny"
-            variant="smooth"
-            icon="arrow-swap"
-            color-scheme="primary"
-            :disabled="locale.code === selectedLocaleCode"
-            @click="changeDefaultLocale(locale.code)"
-          />
-          <woot-button
-            v-tooltip.top-end="
-              $t(
-                'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.DELETE'
-              )
-            "
-            size="tiny"
-            variant="smooth"
-            icon="delete"
-            color-scheme="alert"
-            :disabled="locale.code === selectedLocaleCode"
-            @click="deleteLocale(locale.code)"
-          />
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<style lang="scss" scoped>
-table {
-  thead tr th {
-    @apply text-sm font-medium normal-case text-slate-600 dark:text-slate-200 pl-0 rtl:pl-2.5 rtl:pr-0 pt-0;
-  }
-
-  tbody tr {
-    @apply border-b-0;
-    td {
-      @apply text-sm pl-0 rtl:pl-2.5 rtl:pr-0;
-      .default-status {
-        @apply py-0 pr-0 pl-1;
-      }
-      span {
-        @apply text-slate-700 dark:text-slate-200;
-      }
-    }
-  }
-}
-.horizontal-line {
-  @apply border-b border-solid border-slate-75 dark:border-slate-700;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
deleted file mode 100644
index 55235e902..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<script>
-import PortalSwitch from './PortalSwitch.vue';
-export default {
-  components: {
-    PortalSwitch,
-  },
-  props: {
-    portals: {
-      type: Array,
-      default: () => [],
-    },
-    activePortalSlug: {
-      type: String,
-      default: '',
-    },
-    activeLocale: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['closePopover', 'fetchPortal'],
-
-  methods: {
-    closePortalPopover() {
-      this.$emit('closePopover');
-    },
-    openPortalPage() {
-      this.closePortalPopover();
-      this.$router.push({
-        name: 'list_all_portals',
-      });
-    },
-    fetchPortalAndItsCategories() {
-      this.$emit('fetchPortal');
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    v-on-clickaway="closePortalPopover"
-    class="absolute overflow-y-scroll max-h-[96vh] p-4 bg-white dark:bg-slate-800 rounded-md shadow-lg max-w-[30rem] z-[1000]"
-  >
-    <header>
-      <div class="flex items-center justify-between mb-4">
-        <h2 class="text-lg text-slate-800 dark:text-slate-100">
-          {{ $t('HELP_CENTER.PORTAL.POPOVER.TITLE') }}
-        </h2>
-        <div>
-          <woot-button
-            variant="smooth"
-            color-scheme="secondary"
-            icon="settings"
-            size="small"
-            @click="openPortalPage"
-          >
-            {{ $t('HELP_CENTER.PORTAL.POPOVER.PORTAL_SETTINGS') }}
-          </woot-button>
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            icon="dismiss"
-            size="small"
-            @click="closePortalPopover"
-          />
-        </div>
-      </div>
-      <p class="mt-2 text-xs text-slate-600 dark:text-slate-300">
-        {{ $t('HELP_CENTER.PORTAL.POPOVER.SUBTITLE') }}
-      </p>
-    </header>
-    <div>
-      <PortalSwitch
-        v-for="portal in portals"
-        :key="portal.id"
-        :portal="portal"
-        :active-portal-slug="activePortalSlug"
-        :active-locale="activeLocale"
-        :active="portal.slug === activePortalSlug"
-        @open-portal-page="closePortalPopover"
-        @fetch-portal="fetchPortalAndItsCategories"
-      />
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
deleted file mode 100644
index 038023dde..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
+++ /dev/null
@@ -1,240 +0,0 @@
-<script setup>
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
-
-import { defineOptions, reactive, computed, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useAlert } from 'dashboard/composables';
-
-import { convertToCategorySlug } from 'dashboard/helper/commons.js';
-import { buildPortalURL } from 'dashboard/helper/portalHelper';
-import wootConstants from 'dashboard/constants/globals';
-import { hasValidAvatarUrl } from 'dashboard/helper/URLHelper';
-import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
-import { uploadFile } from 'dashboard/helper/uploadHelper';
-import { isDomain } from 'shared/helpers/Validators';
-import SettingsLayout from './Layout/SettingsLayout.vue';
-
-const props = defineProps({
-  portal: {
-    type: Object,
-    default: () => {},
-  },
-  isSubmitting: {
-    type: Boolean,
-    default: false,
-  },
-  submitButtonText: {
-    type: String,
-    default: '',
-  },
-});
-const emit = defineEmits(['submit', 'deleteLogo']);
-
-defineOptions({
-  name: 'PortalSettingsBasicForm',
-});
-
-const { EXAMPLE_URL } = wootConstants;
-const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
-
-const { t } = useI18n();
-
-const state = reactive({
-  name: '',
-  slug: '',
-  domain: '',
-  logoUrl: '',
-  avatarBlobId: '',
-});
-
-const rules = {
-  name: {
-    required,
-    minLength: minLength(2),
-  },
-  slug: {
-    required,
-  },
-  domain: {
-    isDomain,
-  },
-};
-
-const v$ = useVuelidate(rules, state);
-
-const nameError = computed(() => {
-  if (v$.value.name.$error) {
-    return t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR');
-  }
-  return '';
-});
-
-const slugError = computed(() => {
-  if (v$.value.slug.$error) {
-    return t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
-  }
-  return '';
-});
-
-const domainError = computed(() => {
-  if (v$.value.domain.$error) {
-    return t('HELP_CENTER.PORTAL.ADD.DOMAIN.ERROR');
-  }
-  return '';
-});
-
-const domainHelpText = computed(() => {
-  return buildPortalURL(state.slug);
-});
-
-const domainExampleHelpText = computed(() => {
-  return t('HELP_CENTER.PORTAL.ADD.DOMAIN.HELP_TEXT', {
-    exampleURL: EXAMPLE_URL,
-  });
-});
-
-const showDeleteButton = computed(() => {
-  return hasValidAvatarUrl(state.logoUrl);
-});
-
-onMounted(() => {
-  const portal = props.portal || {};
-  state.name = portal.name || '';
-  state.slug = portal.slug || '';
-  state.domain = portal.custom_domain || '';
-
-  if (portal.logo) {
-    const {
-      logo: { file_url: logoURL, blob_id: blobId },
-    } = portal;
-    state.logoUrl = logoURL;
-    state.avatarBlobId = blobId;
-  }
-});
-
-function onNameChange() {
-  state.slug = convertToCategorySlug(state.name);
-}
-
-function onSubmitClick() {
-  v$.value.$touch();
-  if (v$.value.$invalid) {
-    return;
-  }
-
-  const portal = {
-    name: state.name,
-    slug: state.slug,
-    custom_domain: state.domain,
-    blob_id: state.avatarBlobId || null,
-  };
-  emit('submit', portal);
-}
-async function deleteAvatar() {
-  state.logoUrl = '';
-  state.avatarBlobId = '';
-  emit('deleteLogo');
-}
-
-async function uploadLogoToStorage(file) {
-  try {
-    const { fileUrl, blobId } = await uploadFile(file);
-    if (fileUrl) {
-      state.logoUrl = fileUrl;
-      state.avatarBlobId = blobId;
-    }
-  } catch (error) {
-    useAlert(t('HELP_CENTER.PORTAL.ADD.LOGO.IMAGE_UPLOAD_ERROR'));
-  }
-}
-
-function onFileChange({ file }) {
-  if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
-    uploadLogoToStorage(file);
-  } else {
-    const errorKey =
-      'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.IMAGE_UPLOAD_SIZE_ERROR';
-    useAlert(t(errorKey, { size: MAXIMUM_FILE_UPLOAD_SIZE }));
-  }
-}
-</script>
-
-<template>
-  <SettingsLayout
-    :title="
-      $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.TITLE')
-    "
-  >
-    <div>
-      <div class="mb-4">
-        <div class="flex flex-row items-center">
-          <woot-avatar-uploader
-            :label="$t('HELP_CENTER.PORTAL.ADD.LOGO.LABEL')"
-            :src="state.logoUrl"
-            @on-avatar-select="onFileChange"
-          />
-          <div v-if="showDeleteButton" class="avatar-delete-btn">
-            <woot-button
-              type="button"
-              color-scheme="alert"
-              variant="hollow"
-              size="small"
-              @click="deleteAvatar"
-            >
-              {{ $t('PROFILE_SETTINGS.DELETE_AVATAR') }}
-            </woot-button>
-          </div>
-        </div>
-        <p
-          class="mt-1 mb-0 text-xs not-italic text-slate-600 dark:text-slate-400"
-        >
-          {{ $t('HELP_CENTER.PORTAL.ADD.LOGO.HELP_TEXT') }}
-        </p>
-      </div>
-      <div class="mb-4">
-        <woot-input
-          v-model="state.name"
-          :class="{ error: v$.name.$error }"
-          :error="nameError"
-          :label="$t('HELP_CENTER.PORTAL.ADD.NAME.LABEL')"
-          :placeholder="$t('HELP_CENTER.PORTAL.ADD.NAME.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.PORTAL.ADD.NAME.HELP_TEXT')"
-          @blur="v$.name.$touch"
-          @update:model-value="onNameChange"
-        />
-      </div>
-      <div class="mb-4">
-        <woot-input
-          v-model="state.slug"
-          :class="{ error: v$.slug.$error }"
-          :error="slugError"
-          :label="$t('HELP_CENTER.PORTAL.ADD.SLUG.LABEL')"
-          :placeholder="$t('HELP_CENTER.PORTAL.ADD.SLUG.PLACEHOLDER')"
-          :help-text="domainHelpText"
-          @blur="v$.slug.$touch"
-        />
-      </div>
-      <div class="mb-4">
-        <woot-input
-          v-model="state.domain"
-          :class="{ error: v$.domain.$error }"
-          :label="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.LABEL')"
-          :placeholder="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.PLACEHOLDER')"
-          :help-text="domainExampleHelpText"
-          :error="domainError"
-          @blur="v$.domain.$touch"
-        />
-      </div>
-    </div>
-    <template #footer-right>
-      <woot-button
-        :is-loading="isSubmitting"
-        :is-disabled="v$.$invalid"
-        @click="onSubmitClick"
-      >
-        {{ submitButtonText }}
-      </woot-button>
-    </template>
-  </SettingsLayout>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
deleted file mode 100644
index 01480ce77..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<script setup>
-import { getRandomColor } from 'dashboard/helper/labelColor';
-import SettingsLayout from './Layout/SettingsLayout.vue';
-import wootConstants from 'dashboard/constants/globals';
-import { useVuelidate } from '@vuelidate/core';
-import { url } from '@vuelidate/validators';
-
-import { defineOptions, reactive, computed, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-const props = defineProps({
-  portal: {
-    type: Object,
-    default: () => ({}),
-  },
-  isSubmitting: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['submit']);
-
-defineOptions({
-  name: 'PortalSettingsCustomizationForm',
-});
-
-const { t } = useI18n();
-
-const { EXAMPLE_URL } = wootConstants;
-
-const state = reactive({
-  color: getRandomColor(),
-  pageTitle: '',
-  headerText: '',
-  homePageLink: '',
-});
-
-const rules = {
-  homePageLink: { url },
-};
-
-const homepageExampleHelpText = computed(() => {
-  return t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.HELP_TEXT', {
-    exampleURL: EXAMPLE_URL,
-  });
-});
-
-const v$ = useVuelidate(rules, state);
-
-function updateDataFromStore() {
-  const { portal } = props;
-  if (portal) {
-    state.color = portal.color || getRandomColor();
-    state.pageTitle = portal.page_title || '';
-    state.headerText = portal.header_text || '';
-    state.homePageLink = portal.homepage_link || '';
-  }
-}
-
-function onSubmitClick() {
-  v$.value.$touch();
-  if (v$.value.$invalid) {
-    return;
-  }
-
-  const portal = {
-    id: props.portal.id,
-    slug: props.portal.slug,
-    color: state.color,
-    page_title: state.pageTitle,
-    header_text: state.headerText,
-    homepage_link: state.homePageLink,
-  };
-
-  emit('submit', portal);
-}
-
-onMounted(() => {
-  updateDataFromStore();
-});
-</script>
-
-<template>
-  <SettingsLayout
-    :title="
-      $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.CUSTOMIZATION_PAGE.TITLE')
-    "
-  >
-    <div class="flex-grow-0 flex-shrink-0">
-      <div class="mb-4">
-        <label>
-          {{ $t('HELP_CENTER.PORTAL.ADD.THEME_COLOR.LABEL') }}
-        </label>
-        <woot-color-picker v-model="state.color" />
-        <p
-          class="mt-1 mb-0 text-xs not-italic text-slate-600 dark:text-slate-400"
-        >
-          {{ $t('HELP_CENTER.PORTAL.ADD.THEME_COLOR.HELP_TEXT') }}
-        </p>
-      </div>
-      <div class="mb-4">
-        <woot-input
-          v-model="state.pageTitle"
-          :label="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.LABEL')"
-          :placeholder="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.HELP_TEXT')"
-        />
-      </div>
-      <div class="mb-4">
-        <woot-input
-          v-model="state.headerText"
-          :label="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.LABEL')"
-          :placeholder="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.HELP_TEXT')"
-        />
-      </div>
-      <div class="mb-4">
-        <woot-input
-          v-model="state.homePageLink"
-          :label="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.LABEL')"
-          :placeholder="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.PLACEHOLDER')"
-          :help-text="homepageExampleHelpText"
-          :error="
-            v$.homePageLink.$error
-              ? $t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.ERROR')
-              : ''
-          "
-          :class="{ error: v$.homePageLink.$error }"
-          @blur="v$.homePageLink.$touch"
-        />
-      </div>
-    </div>
-    <template #footer-right>
-      <woot-button
-        :is-loading="isSubmitting"
-        :is-disabled="v$.$invalid"
-        @click="onSubmitClick"
-      >
-        {{
-          $t(
-            'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.CUSTOMIZATION_PAGE.UPDATE_PORTAL_BUTTON'
-          )
-        }}
-      </woot-button>
-    </template>
-  </SettingsLayout>
-</template>
-
-<style lang="scss" scoped>
-::v-deep {
-  .colorpicker--selected {
-    @apply mb-0;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
deleted file mode 100644
index 5b1529d99..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import portalMixin from '../mixins/portalMixin';
-
-export default {
-  components: {
-    Thumbnail,
-  },
-  mixins: [portalMixin],
-  props: {
-    portal: {
-      type: Object,
-      default: () => ({}),
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-    activePortalSlug: {
-      type: String,
-      default: '',
-    },
-    activeLocale: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['fetchPortal', 'openPortalPage'],
-  data() {
-    return {
-      selectedLocale: null,
-    };
-  },
-  computed: {
-    locales() {
-      return this.portal?.config?.allowed_locales;
-    },
-    articlesCount() {
-      const { allowed_locales: allowedLocales } = this.portal.config;
-      return allowedLocales.reduce((acc, locale) => {
-        return acc + locale.articles_count;
-      }, 0);
-    },
-  },
-  mounted() {
-    this.selectedLocale = this.locale || this.portal?.meta?.default_locale;
-  },
-  methods: {
-    onClick(event, code, portal) {
-      event.preventDefault();
-      this.$router.push({
-        name: 'list_all_locale_articles',
-        params: {
-          portalSlug: portal.slug,
-          locale: code,
-        },
-      });
-      this.$emit('fetchPortal');
-      this.$emit('openPortalPage');
-    },
-    isLocaleActive(code, slug) {
-      const isPortalActive = this.portal.slug === slug;
-      const isLocaleActive = this.activeLocale === code;
-      return isPortalActive && isLocaleActive;
-    },
-    isLocaleDefault(code) {
-      return this.portal?.meta?.default_locale === code;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="portal" :class="{ active }">
-    <Thumbnail :username="portal.name" variant="square" />
-    <div class="actions-container">
-      <header class="flex items-center justify-between mb-2.5">
-        <div>
-          <h3 class="text-sm mb-0.5 text-slate-700 dark:text-slate-100">
-            {{ portal.name }}
-          </h3>
-          <p class="mb-0 text-xs text-slate-600 dark:text-slate-200">
-            {{ articlesCount }}
-            {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }}
-          </p>
-        </div>
-        <woot-label
-          v-if="active"
-          variant="smooth"
-          size="small"
-          color-scheme="success"
-          :title="$t('HELP_CENTER.PORTAL.ACTIVE_BADGE')"
-        />
-      </header>
-      <div class="portal-locales">
-        <h5 class="text-base text-slate-700 dark:text-slate-100">
-          {{ $t('HELP_CENTER.PORTAL.CHOOSE_LOCALE_LABEL') }}
-        </h5>
-        <ul>
-          <li v-for="locale in locales" :key="locale.code">
-            <woot-button
-              :variant="`locale-item ${
-                isLocaleActive(locale.code, activePortalSlug)
-                  ? 'smooth'
-                  : 'clear'
-              }`"
-              size="large"
-              color-scheme="secondary"
-              @click="event => onClick(event, locale.code, portal)"
-            >
-              <div class="flex items-center justify-between w-full">
-                <div class="meta">
-                  <h6 class="text-sm text-left mb-0.5">
-                    <span class="text-slate-700 dark:text-slate-100">
-                      {{ localeName(locale.code) }}
-                    </span>
-                    <span
-                      v-if="isLocaleDefault(locale.code)"
-                      class="text-sm text-slate-300 dark:text-slate-200"
-                    >
-                      {{ `(${$t('HELP_CENTER.PORTAL.DEFAULT')})` }}
-                    </span>
-                  </h6>
-
-                  <span
-                    class="flex w-full text-sm leading-4 text-left text-slate-600 dark:text-slate-200"
-                  >
-                    {{ locale.articles_count }}
-                    {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }} -
-                    {{ locale.code }}
-                  </span>
-                </div>
-                <div v-if="isLocaleActive(locale.code, activePortalSlug)">
-                  <fluent-icon icon="checkmark" class="locale__radio" />
-                </div>
-              </div>
-            </woot-button>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.portal {
-  @apply bg-white dark:bg-slate-800 rounded-md p-4 relative flex mb-4 border border-solid border-slate-100 dark:border-slate-600;
-
-  &.active {
-    @apply bg-white dark:bg-slate-800 border border-solid border-woot-400 dark:border-woot-500;
-  }
-
-  .actions-container {
-    @apply ml-2.5 rtl:ml-0 rtl:mr-2.5 flex-grow;
-
-    .portal-locales {
-      ul {
-        @apply list-none p-0 m-0;
-      }
-
-      .locale__radio {
-        @apply w-8 text-green-600 dark:text-green-600;
-      }
-    }
-  }
-
-  .locale-item {
-    @apply flex items-start py-1 px-4 rounded-md w-full mb-2;
-
-    p {
-      @apply mb-0 text-left;
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
deleted file mode 100644
index 243ef1b69..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<script>
-import SecondaryNavItem from 'dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue';
-import SidebarHeader from './SidebarHeader.vue';
-
-export default {
-  components: {
-    SecondaryNavItem,
-    SidebarHeader,
-  },
-  props: {
-    thumbnailSrc: {
-      type: String,
-      default: '',
-    },
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    subTitle: {
-      type: String,
-      default: '',
-    },
-    portalSlug: {
-      type: String,
-      default: '',
-    },
-    localeSlug: {
-      type: String,
-      default: '',
-    },
-    accessibleMenuItems: {
-      type: Array,
-      default: () => [],
-    },
-    additionalSecondaryMenuItems: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  emits: ['openPopover', 'openModal'],
-  computed: {
-    hasCategory() {
-      return (
-        this.additionalSecondaryMenuItems[0] &&
-        this.additionalSecondaryMenuItems[0].children.length > 0
-      );
-    },
-    portalLink() {
-      return `/hc/${this.portalSlug}/${this.localeSlug}`;
-    },
-  },
-  methods: {
-    openPortalPopover() {
-      this.$emit('openPopover');
-    },
-    onClickOpenAddCatogoryModal() {
-      this.$emit('openModal');
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="flex flex-col h-full overflow-auto text-sm bg-white border-r w-60 dark:bg-slate-900 dark:border-slate-700 rtl:border-r-0 rtl:border-l border-slate-50"
-  >
-    <SidebarHeader
-      :thumbnail-src="thumbnailSrc"
-      :header-title="headerTitle"
-      :sub-title="subTitle"
-      :portal-link="portalLink"
-      class="px-4"
-      @open-popover="openPortalPopover"
-    />
-    <transition-group name="menu-list" tag="ul" class="p-2 mb-0 ml-0 list-none">
-      <SecondaryNavItem
-        v-for="menuItem in accessibleMenuItems"
-        :key="menuItem.toState"
-        :menu-item="menuItem"
-      />
-      <SecondaryNavItem
-        v-for="menuItem in additionalSecondaryMenuItems"
-        :key="menuItem.key"
-        :menu-item="menuItem"
-        @open="onClickOpenAddCatogoryModal"
-      />
-      <p
-        v-if="!hasCategory"
-        key="empty-category-nessage"
-        class="p-1.5 px-4 text-slate-300"
-      >
-        {{ $t('SIDEBAR.HELP_CENTER.CATEGORY_EMPTY_MESSAGE') }}
-      </p>
-    </transition-group>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
deleted file mode 100644
index a17122a36..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-export default {
-  components: {
-    Thumbnail,
-  },
-  props: {
-    thumbnailSrc: {
-      type: String,
-      default: '',
-    },
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    subTitle: {
-      type: String,
-      default: '',
-    },
-    portalLink: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['openPopover'],
-  methods: {
-    popoutHelpCenter() {
-      window.open(this.portalLink, '_blank');
-    },
-    openPortalPopover() {
-      this.$emit('openPopover');
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="flex items-center justify-between h-16 px-0 py-4 border-b mb-1/4 border-slate-50 dark:border-slate-700"
-  >
-    <div class="flex items-center">
-      <Thumbnail
-        size="32px"
-        :src="thumbnailSrc"
-        :username="headerTitle"
-        variant="square"
-      />
-      <div class="flex flex-col items-start ml-2 rtl:ml-0 rtl:mr-2">
-        <h4
-          class="h-4 mb-0 overflow-hidden text-sm leading-4 w-28 whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
-        >
-          {{ headerTitle }}
-        </h4>
-        <span class="h-4 text-xs leading-4 text-slate-600 dark:text-slate-200">
-          {{ subTitle }}
-        </span>
-      </div>
-    </div>
-    <div class="flex items-end">
-      <woot-button
-        variant="clear"
-        color-scheme="secondary"
-        size="small"
-        icon="arrow-up-right"
-        @click="popoutHelpCenter"
-      />
-      <woot-button
-        variant="clear"
-        size="small"
-        color-scheme="secondary"
-        icon="arrow-swap"
-        @click="openPortalPopover"
-      />
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
index 95f678abc..6adc3cb2a 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
@@ -1,226 +1,113 @@
-import HelpCenterLayout from './components/HelpCenterLayout.vue';
 import { getPortalRoute } from './helpers/routeHelper';
 
-const ListAllPortals = () => import('./pages/portals/ListAllPortals.vue');
-const NewPortal = () => import('./pages/portals/NewPortal.vue');
+import HelpCenterPageRouteView from './pages/HelpCenterPageRouteView.vue';
 
-const EditPortal = () => import('./pages/portals/EditPortal.vue');
-const EditPortalBasic = () => import('./pages/portals/EditPortalBasic.vue');
-const EditPortalCustomization = () =>
-  import('./pages/portals/EditPortalCustomization.vue');
-const EditPortalLocales = () => import('./pages/portals/EditPortalLocales.vue');
-const ShowPortal = () => import('./pages/portals/ShowPortal.vue');
-const PortalDetails = () => import('./pages/portals/PortalDetails.vue');
-const PortalCustomization = () =>
-  import('./pages/portals/PortalCustomization.vue');
-const PortalSettingsFinish = () =>
-  import('./pages/portals/PortalSettingsFinish.vue');
+const PortalsIndex = () => import('./pages/PortalsIndexPage.vue');
+const PortalsNew = () => import('./pages/PortalsNewPage.vue');
 
-const ListAllCategories = () =>
-  import('./pages/categories/ListAllCategories.vue');
-const NewCategory = () => import('./pages/categories/NewCategory.vue');
-const EditCategory = () => import('./pages/categories/EditCategory.vue');
-const ListCategoryArticles = () =>
-  import('./pages/articles/ListCategoryArticles.vue');
-const ListAllArticles = () => import('./pages/articles/ListAllArticles.vue');
-const DefaultPortalArticles = () =>
-  import('./pages/articles/DefaultPortalArticles.vue');
-const NewArticle = () => import('./pages/articles/NewArticle.vue');
-const EditArticle = () => import('./pages/articles/EditArticle.vue');
+const PortalsArticlesIndexPage = () =>
+  import('./pages/PortalsArticlesIndexPage.vue');
+const PortalsArticlesNewPage = () =>
+  import('./pages/PortalsArticlesNewPage.vue');
+const PortalsArticlesEditPage = () =>
+  import('./pages/PortalsArticlesEditPage.vue');
+
+const PortalsCategoriesIndexPage = () =>
+  import('./pages/PortalsCategoriesIndexPage.vue');
+
+const PortalsLocalesIndexPage = () =>
+  import('./pages/PortalsLocalesIndexPage.vue');
+
+const PortalsSettingsIndexPage = () =>
+  import('./pages/PortalsSettingsIndexPage.vue');
 
 const portalRoutes = [
   {
-    path: getPortalRoute(''),
-    name: 'default_portal_articles',
-    meta: {
-      permissions: ['administrator', 'knowledge_base_manage'],
-    },
-    component: DefaultPortalArticles,
-  },
-  {
-    path: getPortalRoute('all'),
-    name: 'list_all_portals',
+    path: getPortalRoute(':portalSlug/:locale/:categorySlug?/articles/:tab?'),
+    name: 'portals_articles_index',
     meta: {
       permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
-    component: ListAllPortals,
-  },
-  {
-    path: getPortalRoute('new'),
-    component: NewPortal,
-    children: [
-      {
-        path: '',
-        name: 'new_portal_information',
-        component: PortalDetails,
-        meta: {
-          permissions: ['administrator', 'knowledge_base_manage'],
-        },
-      },
-      {
-        path: ':portalSlug/customization',
-        name: 'portal_customization',
-        component: PortalCustomization,
-        meta: {
-          permissions: ['administrator', 'knowledge_base_manage'],
-        },
-      },
-      {
-        path: ':portalSlug/finish',
-        name: 'portal_finish',
-        component: PortalSettingsFinish,
-        meta: {
-          permissions: ['administrator', 'knowledge_base_manage'],
-        },
-      },
-    ],
-  },
-  {
-    path: getPortalRoute(':portalSlug'),
-    name: 'portalSlug',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
-    component: ShowPortal,
-  },
-  {
-    path: getPortalRoute(':portalSlug/edit'),
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
-    component: EditPortal,
-    children: [
-      {
-        path: '',
-        name: 'edit_portal_information',
-        component: EditPortalBasic,
-        meta: {
-          permissions: ['administrator', 'knowledge_base_manage'],
-        },
-      },
-      {
-        path: 'customizations',
-        name: 'edit_portal_customization',
-        component: EditPortalCustomization,
-        meta: {
-          permissions: ['administrator', 'knowledge_base_manage'],
-        },
-      },
-      {
-        path: 'locales',
-        name: 'edit_portal_locales',
-        component: EditPortalLocales,
-        meta: {
-          permissions: ['administrator', 'knowledge_base_manage'],
-        },
-      },
-      {
-        path: 'categories',
-        name: 'list_all_locale_categories',
-        meta: {
-          permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-        },
-        component: ListAllCategories,
-      },
-    ],
-  },
-];
-
-const articleRoutes = [
-  {
-    path: getPortalRoute(':portalSlug/:locale/articles'),
-    name: 'list_all_locale_articles',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
-    component: ListAllArticles,
+    component: PortalsArticlesIndexPage,
   },
   {
     path: getPortalRoute(':portalSlug/:locale/articles/new'),
-    name: 'new_article',
+    name: 'portals_articles_new',
     meta: {
       permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
-    component: NewArticle,
+    component: PortalsArticlesNewPage,
   },
   {
-    path: getPortalRoute(':portalSlug/:locale/articles/mine'),
-    name: 'list_mine_articles',
+    path: getPortalRoute(
+      ':portalSlug/:locale/:categorySlug?/articles/:tab?/edit/:articleSlug'
+    ),
+    name: 'portals_articles_edit',
     meta: {
       permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
-    component: ListAllArticles,
-  },
-  {
-    path: getPortalRoute(':portalSlug/:locale/articles/archived'),
-    name: 'list_archived_articles',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
-    component: ListAllArticles,
+    component: PortalsArticlesEditPage,
   },
 
-  {
-    path: getPortalRoute(':portalSlug/:locale/articles/draft'),
-    name: 'list_draft_articles',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
-    component: ListAllArticles,
-  },
-
-  {
-    path: getPortalRoute(':portalSlug/:locale/articles/:articleSlug'),
-    name: 'edit_article',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
-    component: EditArticle,
-  },
-];
-
-const categoryRoutes = [
   {
     path: getPortalRoute(':portalSlug/:locale/categories'),
-    name: 'all_locale_categories',
+    name: 'portals_categories_index',
     meta: {
       permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
-    component: ListAllCategories,
-  },
-  {
-    path: getPortalRoute(':portalSlug/:locale/categories/new'),
-    name: 'new_category_in_locale',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
-    component: NewCategory,
-  },
-  {
-    path: getPortalRoute(':portalSlug/:locale/categories/:categorySlug'),
-    name: 'show_category',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
-    component: ListAllArticles,
+    component: PortalsCategoriesIndexPage,
   },
   {
     path: getPortalRoute(
       ':portalSlug/:locale/categories/:categorySlug/articles'
     ),
-    name: 'show_category_articles',
+    name: 'portals_categories_articles_index',
     meta: {
       permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
-    component: ListCategoryArticles,
+    component: PortalsArticlesIndexPage,
   },
   {
-    path: getPortalRoute(':portalSlug/:locale/categories/:categorySlug'),
-    name: 'edit_category',
+    path: getPortalRoute(
+      ':portalSlug/:locale/categories/:categorySlug/articles/:articleSlug'
+    ),
+    name: 'portals_categories_articles_edit',
     meta: {
       permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
-    component: EditCategory,
+    component: PortalsArticlesEditPage,
+  },
+  {
+    path: getPortalRoute(':portalSlug/locales'),
+    name: 'portals_locales_index',
+    meta: {
+      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
+    },
+    component: PortalsLocalesIndexPage,
+  },
+  {
+    path: getPortalRoute(':portalSlug/settings'),
+    name: 'portals_settings_index',
+    meta: {
+      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
+    },
+    component: PortalsSettingsIndexPage,
+  },
+  {
+    path: getPortalRoute('new'),
+    name: 'portals_new',
+    meta: {
+      permissions: ['administrator', 'knowledge_base_manage'],
+    },
+    component: PortalsNew,
+  },
+  {
+    path: getPortalRoute(':navigationPath'),
+    name: 'portals_index',
+    meta: {
+      permissions: ['administrator', 'knowledge_base_manage'],
+    },
+    component: PortalsIndex,
   },
 ];
 
@@ -228,8 +115,8 @@ export default {
   routes: [
     {
       path: getPortalRoute(),
-      component: HelpCenterLayout,
-      children: [...portalRoutes, ...articleRoutes, ...categoryRoutes],
+      component: HelpCenterPageRouteView,
+      children: [...portalRoutes],
     },
   ],
 };
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/helpers/routeHelper.js b/app/javascript/dashboard/routes/dashboard/helpcenter/helpers/routeHelper.js
index 6afd89d35..6be9e579f 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/helpers/routeHelper.js
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/helpers/routeHelper.js
@@ -1,4 +1,4 @@
-import { frontendURL } from '../../../../helper/URLHelper';
+import { frontendURL } from 'dashboard/helper/URLHelper';
 
 export const getPortalRoute = (path = '') => {
   const slugToBeAdded = path ? `/${path}` : '';
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/mixins/portalMixin.js b/app/javascript/dashboard/routes/dashboard/helpcenter/mixins/portalMixin.js
deleted file mode 100644
index 8668707c5..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/mixins/portalMixin.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { mapGetters } from 'vuex';
-import { frontendURL } from 'dashboard/helper/URLHelper';
-import allLocales from 'shared/constants/locales.js';
-export default {
-  computed: {
-    ...mapGetters({ accountId: 'getCurrentAccountId' }),
-    portalSlug() {
-      return this.$route.params.portalSlug;
-    },
-    locale() {
-      return this.$route.params.locale;
-    },
-  },
-  methods: {
-    articleUrl(id) {
-      return frontendURL(
-        `accounts/${this.accountId}/portals/${this.portalSlug}/${this.locale}/articles/${id}`
-      );
-    },
-    localeName(code) {
-      return allLocales[code];
-    },
-  },
-};
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/mixins/specs/portalMixin.spec.js b/app/javascript/dashboard/routes/dashboard/helpcenter/mixins/specs/portalMixin.spec.js
deleted file mode 100644
index 0cac4f28b..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/mixins/specs/portalMixin.spec.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { createStore } from 'vuex';
-import { createRouter, createWebHistory } from 'vue-router';
-import portalMixin from '../portalMixin';
-import ListAllArticles from '../../pages/portals/ListAllPortals.vue';
-
-// Create router instance
-const router = createRouter({
-  history: createWebHistory(),
-  routes: [
-    {
-      path: '/:portalSlug/:locale/articles', // Add leading "/"
-      name: 'list_all_locale_articles',
-      component: ListAllArticles,
-    },
-  ],
-});
-
-describe('portalMixin', () => {
-  let getters;
-  let store;
-  let wrapper;
-
-  beforeEach(() => {
-    getters = {
-      getCurrentAccountId: () => 1,
-    };
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [portalMixin],
-    };
-    store = createStore({ getters });
-    wrapper = shallowMount(Component, {
-      global: {
-        plugins: [store, router],
-      },
-    });
-  });
-
-  it('returns account id', () => {
-    expect(wrapper.vm.accountId).toBe(1);
-  });
-
-  it('returns article url', async () => {
-    await router.push({
-      name: 'list_all_locale_articles',
-      params: { portalSlug: 'fur-rent', locale: 'en' },
-    });
-    expect(wrapper.vm.articleUrl(1)).toBe(
-      '/app/accounts/1/portals/fur-rent/en/articles/1'
-    );
-  });
-
-  it('returns portal locale', async () => {
-    await router.push({
-      name: 'list_all_locale_articles',
-      params: { portalSlug: 'fur-rent', locale: 'es' },
-    });
-    expect(wrapper.vm.portalSlug).toBe('fur-rent');
-  });
-
-  it('returns portal slug', async () => {
-    await router.push({
-      name: 'list_all_locale_articles',
-      params: { portalSlug: 'campaign', locale: 'es' },
-    });
-    expect(wrapper.vm.portalSlug).toBe('campaign');
-  });
-
-  it('returns locale name', async () => {
-    await router.push({
-      name: 'list_all_locale_articles',
-      params: { portalSlug: 'fur-rent', locale: 'es' },
-    });
-    expect(wrapper.vm.localeName('es')).toBe('Spanish');
-  });
-});
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue
new file mode 100644
index 000000000..f43270857
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue
@@ -0,0 +1,76 @@
+<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 flex-grow-0 w-full h-full min-h-0 app-wrapper">
+    <section
+      v-if="isHelpCenterEnabled"
+      class="flex flex-1 h-full px-0 overflow-hidden bg-white dark:bg-slate-900"
+    >
+      <router-view />
+    </section>
+    <UpgradePage v-else />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue
new file mode 100644
index 000000000..736b34096
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue
@@ -0,0 +1,109 @@
+<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 isUpdating = ref(false);
+const isSaved = ref(false);
+
+const portalLink = computed(() => {
+  const { slug: categorySlug, locale: categoryLocale } = article.value.category;
+  const { slug: articleSlugValue } = article.value;
+  return buildPortalArticleURL(
+    portalSlug,
+    categorySlug,
+    categoryLocale,
+    articleSlugValue
+  );
+});
+
+const saveArticle = async ({ ...values }) => {
+  isUpdating.value = true;
+  try {
+    await store.dispatch('articles/update', {
+      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 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(portalLink.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"
+    @preview-article="previewArticle"
+    @go-back="goBackToArticles"
+  />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesIndexPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesIndexPage.vue
new file mode 100644
index 000000000..f7a109e58
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesIndexPage.vue
@@ -0,0 +1,116 @@
+<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/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesNewPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesNewPage.vue
new file mode 100644
index 000000000..3833573ad
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesNewPage.vue
@@ -0,0 +1,94 @@
+<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/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsCategoriesIndexPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsCategoriesIndexPage.vue
new file mode 100644
index 000000000..ca9514336
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsCategoriesIndexPage.vue
@@ -0,0 +1,66 @@
+<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/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsIndexPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsIndexPage.vue
new file mode 100644
index 000000000..d5f9d677b
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsIndexPage.vue
@@ -0,0 +1,76 @@
+<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-background text-slate-600 dark:text-slate-200"
+  >
+    <Spinner />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsLocalesIndexPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsLocalesIndexPage.vue
new file mode 100644
index 000000000..95a650e88
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsLocalesIndexPage.vue
@@ -0,0 +1,34 @@
+<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/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsNewPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsNewPage.vue
new file mode 100644
index 000000000..1c94fc682
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsNewPage.vue
@@ -0,0 +1,9 @@
+<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/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsSettingsIndexPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsSettingsIndexPage.vue
new file mode 100644
index 000000000..68a9ee953
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsSettingsIndexPage.vue
@@ -0,0 +1,122 @@
+<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 PortalSettings from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue';
+
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+const router = useRouter();
+
+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 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 handleUpdatePortal = updatePortalSettings;
+const handleUpdatePortalConfiguration = updatePortalSettings;
+const handleDeletePortal = deletePortal;
+</script>
+
+<template>
+  <PortalSettings
+    :portals="portals"
+    :is-fetching="isFetching"
+    @update-portal="handleUpdatePortal"
+    @update-portal-configuration="handleUpdatePortalConfiguration"
+    @delete-portal="handleDeletePortal"
+  />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
deleted file mode 100644
index 7a014f4dd..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
+++ /dev/null
@@ -1,277 +0,0 @@
-<script>
-import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
-import { mapGetters } from 'vuex';
-import { debounce } from '@chatwoot/utils';
-import { isEmptyObject } from 'dashboard/helper/commons.js';
-export default {
-  components: {
-    MultiselectDropdown,
-  },
-  props: {
-    article: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  emits: [
-    'saveArticle',
-    'archiveArticle',
-    'deleteArticle',
-    'updateMeta',
-    'saveArticle',
-  ],
-  data() {
-    return {
-      metaTitle: '',
-      metaDescription: '',
-      metaTags: [],
-      metaOptions: [],
-      tagInputValue: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      categories: 'categories/allCategories',
-      agents: 'agents/getAgents',
-    }),
-    assignedAuthor() {
-      return this.article?.author;
-    },
-    selectedCategory() {
-      return this.article?.category;
-    },
-    allTags() {
-      return this.metaTags.map(item => item.name);
-    },
-  },
-  watch: {
-    article: {
-      handler() {
-        if (!isEmptyObject(this.article.meta || {})) {
-          const {
-            meta: { title = '', description = '', tags = [] },
-          } = this.article;
-          this.metaTitle = title;
-          this.metaDescription = description;
-          this.metaTags = this.formattedTags({ tags });
-        }
-      },
-      deep: true,
-      immediate: true,
-    },
-  },
-  mounted() {
-    this.saveArticle = debounce(
-      () => {
-        this.$emit('saveArticle', {
-          meta: {
-            title: this.metaTitle,
-            description: this.metaDescription,
-            tags: this.allTags,
-          },
-        });
-      },
-      1000,
-      false
-    );
-  },
-  methods: {
-    formattedTags({ tags }) {
-      return tags.map(tag => ({
-        name: tag,
-      }));
-    },
-    addTagValue(tagValue) {
-      const tags = tagValue
-        .split(',')
-        .map(tag => tag.trim())
-        .filter(tag => tag && !this.allTags.includes(tag));
-
-      this.metaTags.push(...this.formattedTags({ tags: [...new Set(tags)] }));
-      this.saveArticle();
-    },
-    removeTag() {
-      this.saveArticle();
-    },
-    handleSearchChange(value) {
-      this.tagInputValue = value;
-    },
-    onBlur() {
-      if (this.tagInputValue) {
-        this.addTagValue(this.tagInputValue);
-      }
-    },
-    onClickSelectCategory({ id }) {
-      this.$emit('saveArticle', { category_id: id });
-    },
-    onClickAssignAuthor({ id }) {
-      this.$emit('saveArticle', { author_id: id });
-      this.updateMeta();
-    },
-    onChangeMetaInput() {
-      this.saveArticle();
-    },
-    onClickArchiveArticle() {
-      this.$emit('archiveArticle');
-      this.updateMeta();
-    },
-    onClickDeleteArticle() {
-      this.$emit('deleteArticle');
-      this.updateMeta();
-    },
-    updateMeta() {
-      this.$emit('updateMeta');
-    },
-  },
-};
-</script>
-
-<template>
-  <transition name="popover-animation">
-    <!-- eslint-disable-next-line vue/require-toggle-inside-transition -->
-    <div
-      class="min-w-[15rem] max-w-[22.5rem] p-6 overflow-y-auto border-l rtl:border-r rtl:border-l-0 border-solid border-slate-50 dark:border-slate-700"
-    >
-      <h3 class="text-base text-slate-800 dark:text-slate-100">
-        {{ $t('HELP_CENTER.ARTICLE_SETTINGS.TITLE') }}
-      </h3>
-      <div class="mt-4 mb-6">
-        <label>
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.LABEL') }}
-          <MultiselectDropdown
-            :options="categories"
-            :selected-item="selectedCategory"
-            :has-thumbnail="false"
-            :multiselector-title="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.TITLE')
-            "
-            :multiselector-placeholder="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.PLACEHOLDER')
-            "
-            :no-search-result="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.NO_RESULT')
-            "
-            :input-placeholder="
-              $t(
-                'HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.SEARCH_PLACEHOLDER'
-              )
-            "
-            @select="onClickSelectCategory"
-          />
-        </label>
-        <label>
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.LABEL') }}
-          <MultiselectDropdown
-            :options="agents"
-            :selected-item="assignedAuthor"
-            :multiselector-title="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.TITLE')
-            "
-            :multiselector-placeholder="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.PLACEHOLDER')
-            "
-            :no-search-result="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.NO_RESULT')
-            "
-            :input-placeholder="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.SEARCH_PLACEHOLDER')
-            "
-            @select="onClickAssignAuthor"
-          />
-        </label>
-        <label>
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TITLE.LABEL') }}
-          <textarea
-            v-model="metaTitle"
-            rows="3"
-            type="text"
-            :placeholder="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TITLE.PLACEHOLDER')
-            "
-            @input="onChangeMetaInput"
-          />
-        </label>
-        <label>
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_DESCRIPTION.LABEL') }}
-          <textarea
-            v-model="metaDescription"
-            class="text-sm"
-            rows="3"
-            type="text"
-            :placeholder="
-              $t(
-                'HELP_CENTER.ARTICLE_SETTINGS.FORM.META_DESCRIPTION.PLACEHOLDER'
-              )
-            "
-            @input="onChangeMetaInput"
-          />
-        </label>
-        <label>
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TAGS.LABEL') }}
-          <multiselect
-            v-model="metaTags"
-            :placeholder="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TAGS.PLACEHOLDER')
-            "
-            class="min-w-[300px]"
-            label="name"
-            :options="metaOptions"
-            track-by="name"
-            multiple
-            taggable
-            :close-on-select="false"
-            @search-change="handleSearchChange"
-            @close="onBlur"
-            @tag="addTagValue"
-            @remove="removeTag"
-          />
-        </label>
-      </div>
-      <div class="flex flex-col">
-        <woot-button
-          icon="archive"
-          size="small"
-          variant="clear"
-          color-scheme="secondary"
-          @click="onClickArchiveArticle"
-        >
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.BUTTONS.ARCHIVE') }}
-        </woot-button>
-        <woot-button
-          icon="delete"
-          size="small"
-          variant="clear"
-          color-scheme="alert"
-          @click="onClickDeleteArticle"
-        >
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.BUTTONS.DELETE') }}
-        </woot-button>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<style lang="scss" scoped>
-::v-deep {
-  .multiselect {
-    @apply mb-0;
-  }
-
-  .multiselect__content-wrapper {
-    @apply hidden;
-  }
-
-  .multiselect--active .multiselect__tags {
-    padding-right: var(--space-small) !important;
-    @apply rounded-md;
-  }
-
-  .multiselect__placeholder {
-    @apply text-slate-300 dark:text-slate-200 pt-2 mb-0;
-  }
-
-  .multiselect__select {
-    @apply hidden;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
deleted file mode 100644
index df95c34ee..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-
-export default {
-  setup() {
-    const { uiSettings } = useUISettings();
-
-    return {
-      uiSettings,
-    };
-  },
-  computed: {
-    ...mapGetters({ portals: 'portals/allPortals' }),
-  },
-  mounted() {
-    this.performRouting();
-  },
-  methods: {
-    isPortalPresent(portalSlug) {
-      return !!this.portals.find(portal => portal.slug === portalSlug);
-    },
-    async performRouting() {
-      await this.$store.dispatch('portals/index');
-      this.$nextTick(() => this.routeToLastActivePortal());
-    },
-    routeToView(name, params) {
-      this.$router.replace({ name, params, replace: true });
-    },
-    async routeToLastActivePortal() {
-      // TODO: This method should be written as a navigation guard rather than
-      // a method in the component.
-      const {
-        last_active_portal_slug: lastActivePortalSlug,
-        last_active_locale_code: lastActiveLocaleCode,
-      } = this.uiSettings || {};
-
-      if (this.isPortalPresent(lastActivePortalSlug)) {
-        // Check if the last active portal from the user preferences is available in the current
-        // list of portals. If it is, navigate there. The last active portal is saved in the user's
-        // UI settings, regardless of the account. Consequently, it's possible that the saved portal
-        // slug is not available in the current account.
-        this.routeToView('list_all_locale_articles', {
-          portalSlug: lastActivePortalSlug,
-          locale: lastActiveLocaleCode,
-        });
-      } else if (this.portals.length > 0) {
-        // If the last active portal is available, check for the exisiting list of portals and
-        // navigate to the first available portal.
-        const { slug: portalSlug, meta: { default_locale: locale } = {} } =
-          this.portals[0];
-        this.routeToView('list_all_locale_articles', { portalSlug, locale });
-      } else {
-        // If no portals are available, navigate to the portal list page to prompt creation.
-        this.$router.replace({ name: 'list_all_portals', replace: true });
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="flex items-center justify-center w-full text-slate-600 dark:text-slate-200"
-  >
-    {{ $t('HELP_CENTER.LOADING') }}
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
deleted file mode 100644
index 1329ea6fa..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
+++ /dev/null
@@ -1,216 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert, useTrack } from 'dashboard/composables';
-import EditArticleHeader from '../../components/Header/EditArticleHeader.vue';
-import ArticleEditor from '../../components/ArticleEditor.vue';
-import ArticleSettings from './ArticleSettings.vue';
-import Spinner from 'shared/components/Spinner.vue';
-import portalMixin from '../../mixins/portalMixin';
-import wootConstants from 'dashboard/constants/globals';
-import { buildPortalArticleURL } from 'dashboard/helper/portalHelper';
-import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
-
-const { ARTICLE_STATUS_TYPES } = wootConstants;
-export default {
-  components: {
-    EditArticleHeader,
-    ArticleEditor,
-    Spinner,
-    ArticleSettings,
-  },
-  mixins: [portalMixin],
-  data() {
-    return {
-      isUpdating: false,
-      isSaved: false,
-      showArticleSettings: true,
-      alertMessage: '',
-      showDeleteConfirmationPopup: false,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      isFetching: 'articles/isFetching',
-    }),
-    article() {
-      return this.$store.getters['articles/articleById'](this.articleId);
-    },
-    articleId() {
-      return this.$route.params.articleSlug;
-    },
-    selectedPortalSlug() {
-      return this.$route.params.portalSlug;
-    },
-    selectedLocale() {
-      return this.$route.params.locale;
-    },
-    portalLink() {
-      const slug = this.$route.params.portalSlug;
-      return buildPortalArticleURL(
-        slug,
-        this.article.category.slug,
-        this.article.category.locale,
-        this.article.slug
-      );
-    },
-  },
-  mounted() {
-    this.fetchArticleDetails();
-  },
-  methods: {
-    onClickGoBack() {
-      if (window.history.length > 2) {
-        this.$router.go(-1);
-      } else {
-        this.$router.push({ name: 'list_all_locale_articles' });
-      }
-    },
-    fetchArticleDetails() {
-      this.$store.dispatch('articles/show', {
-        id: this.articleId,
-        portalSlug: this.selectedPortalSlug,
-      });
-    },
-    openDeletePopup() {
-      this.showDeleteConfirmationPopup = true;
-    },
-    closeDeletePopup() {
-      this.showDeleteConfirmationPopup = false;
-    },
-    confirmDeletion() {
-      this.closeDeletePopup();
-      this.deleteArticle();
-      useTrack(PORTALS_EVENTS.DELETE_ARTICLE, {
-        status: this.article?.status,
-      });
-    },
-    async saveArticle({ ...values }) {
-      this.isUpdating = true;
-      try {
-        await this.$store.dispatch('articles/update', {
-          portalSlug: this.selectedPortalSlug,
-          articleId: this.articleId,
-          ...values,
-        });
-      } catch (error) {
-        this.alertMessage =
-          error?.message || this.$t('HELP_CENTER.EDIT_ARTICLE.API.ERROR');
-        useAlert(this.alertMessage);
-      } finally {
-        setTimeout(() => {
-          this.isUpdating = false;
-          this.isSaved = true;
-        }, 1500);
-      }
-    },
-    async deleteArticle() {
-      try {
-        await this.$store.dispatch('articles/delete', {
-          portalSlug: this.selectedPortalSlug,
-          articleId: this.articleId,
-        });
-        this.alertMessage = this.$t(
-          'HELP_CENTER.DELETE_ARTICLE.API.SUCCESS_MESSAGE'
-        );
-        this.$router.push({
-          name: 'list_all_locale_articles',
-          params: {
-            portalSlug: this.selectedPortalSlug,
-            locale: this.locale,
-            recentlyDeleted: true,
-          },
-        });
-      } catch (error) {
-        this.alertMessage =
-          error?.message ||
-          this.$t('HELP_CENTER.DELETE_ARTICLE.API.ERROR_MESSAGE');
-      } finally {
-        useAlert(this.alertMessage);
-      }
-    },
-    async archiveArticle() {
-      try {
-        await this.$store.dispatch('articles/update', {
-          portalSlug: this.selectedPortalSlug,
-          articleId: this.articleId,
-          status: ARTICLE_STATUS_TYPES.ARCHIVE,
-        });
-        this.alertMessage = this.$t('HELP_CENTER.ARCHIVE_ARTICLE.API.SUCCESS');
-        useTrack(PORTALS_EVENTS.ARCHIVE_ARTICLE, { uiFrom: 'sidebar' });
-      } catch (error) {
-        this.alertMessage =
-          error?.message || this.$t('HELP_CENTER.ARCHIVE_ARTICLE.API.ERROR');
-      } finally {
-        useAlert(this.alertMessage);
-      }
-    },
-    updateMeta() {
-      const selectedPortalParam = {
-        portalSlug: this.selectedPortalSlug,
-        locale: this.selectedLocale,
-      };
-      return this.$store.dispatch('portals/show', selectedPortalParam);
-    },
-    openArticleSettings() {
-      this.showArticleSettings = true;
-    },
-    closeArticleSettings() {
-      this.showArticleSettings = false;
-    },
-    showArticleInPortal() {
-      window.open(this.portalLink, '_blank');
-      useTrack(PORTALS_EVENTS.PREVIEW_ARTICLE, {
-        status: this.article?.status,
-      });
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex w-full overflow-auto article-container">
-    <div
-      class="flex-1 flex-shrink-0 px-6 overflow-auto"
-      :class="{ 'flex-grow-1 flex-shrink-0': showArticleSettings }"
-    >
-      <EditArticleHeader
-        :back-button-label="$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES')"
-        :is-updating="isUpdating"
-        :is-saved="isSaved"
-        :is-sidebar-open="showArticleSettings"
-        @back="onClickGoBack"
-        @open="openArticleSettings"
-        @close="closeArticleSettings"
-        @show="showArticleInPortal"
-        @update-meta="updateMeta"
-      />
-      <div v-if="isFetching" class="h-full p-4 text-base text-center">
-        <Spinner size="" />
-        <span>{{ $t('HELP_CENTER.EDIT_ARTICLE.LOADING') }}</span>
-      </div>
-      <ArticleEditor
-        v-else
-        :is-settings-sidebar-open="showArticleSettings"
-        :article="article"
-        @save-article="saveArticle"
-      />
-    </div>
-    <ArticleSettings
-      v-if="showArticleSettings"
-      :article="article"
-      @save-article="saveArticle"
-      @delete-article="openDeletePopup"
-      @archive-article="archiveArticle"
-      @update-meta="updateMeta"
-    />
-    <woot-delete-modal
-      v-model:show="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.TITLE')"
-      :message="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.MESSAGE')"
-      :confirm-text="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.YES')"
-      :reject-text="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.NO')"
-    />
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
deleted file mode 100644
index bc92d61e4..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import allLocales from 'shared/constants/locales.js';
-
-import Spinner from 'shared/components/Spinner.vue';
-import ArticleHeader from 'dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue';
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import ArticleTable from '../../components/ArticleTable.vue';
-
-export default {
-  components: {
-    ArticleHeader,
-    ArticleTable,
-    EmptyState,
-    Spinner,
-  },
-  emits: ['reloadLocale'],
-  data() {
-    return {
-      pageNumber: 1,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      articles: 'articles/allArticles',
-      categories: 'categories/allCategories',
-      meta: 'articles/getMeta',
-      isFetching: 'articles/isFetching',
-      currentUserId: 'getCurrentUserID',
-      getPortalBySlug: 'portals/portalBySlug',
-    }),
-    selectedCategory() {
-      return this.categories.find(
-        category => category.slug === this.selectedCategorySlug
-      );
-    },
-    shouldShowEmptyState() {
-      return !this.isFetching && !this.articles.length;
-    },
-    selectedPortalSlug() {
-      return this.$route.params.portalSlug;
-    },
-    selectedCategorySlug() {
-      const { categorySlug } = this.$route.params;
-      return categorySlug;
-    },
-    articleType() {
-      return this.$route.path.split('/').pop();
-    },
-    headerTitle() {
-      switch (this.articleType) {
-        case 'mine':
-          return this.$t('HELP_CENTER.HEADER.TITLES.MINE');
-        case 'draft':
-          return this.$t('HELP_CENTER.HEADER.TITLES.DRAFT');
-        case 'archived':
-          return this.$t('HELP_CENTER.HEADER.TITLES.ARCHIVED');
-        default:
-          if (this.$route.name === 'show_category') {
-            return this.headerTitleInCategoryView;
-          }
-          return this.$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES');
-      }
-    },
-    status() {
-      switch (this.articleType) {
-        case 'draft':
-          return 0;
-        case 'published':
-          return 1;
-        case 'archived':
-          return 2;
-        default:
-          return undefined;
-      }
-    },
-    author() {
-      if (this.articleType === 'mine') {
-        return this.currentUserId;
-      }
-      return null;
-    },
-    headerTitleInCategoryView() {
-      return this.categories && this.categories.length
-        ? this.selectedCategory.name
-        : '';
-    },
-    activeLocale() {
-      return this.$route.params.locale;
-    },
-    activeLocaleName() {
-      return allLocales[this.activeLocale];
-    },
-    portal() {
-      return this.getPortalBySlug(this.selectedPortalSlug);
-    },
-    allowedLocales() {
-      if (!this.portal) {
-        return [];
-      }
-      const { allowed_locales: allowedLocales } = this.portal.config;
-      return allowedLocales.map(locale => {
-        return {
-          id: locale.code,
-          name: allLocales[locale.code],
-          code: locale.code,
-        };
-      });
-    },
-  },
-  watch: {
-    $route() {
-      this.pageNumber = 1;
-      this.fetchArticles();
-    },
-  },
-  mounted() {
-    this.fetchArticles();
-  },
-
-  methods: {
-    newArticlePage() {
-      this.$router.push({ name: 'new_article' });
-    },
-    fetchArticles({ pageNumber } = {}) {
-      this.$store.dispatch('articles/index', {
-        pageNumber: pageNumber || this.pageNumber,
-        portalSlug: this.$route.params.portalSlug,
-        locale: this.activeLocale,
-        status: this.status,
-        authorId: this.author,
-        categorySlug: this.selectedCategorySlug,
-      });
-    },
-    onPageChange(pageNumber) {
-      this.fetchArticles({ pageNumber });
-    },
-    onReorder(reorderedGroup) {
-      this.$store.dispatch('articles/reorder', {
-        reorderedGroup,
-        portalSlug: this.$route.params.portalSlug,
-      });
-    },
-    onChangeLocale(locale) {
-      this.$router.push({
-        name: 'list_all_locale_articles',
-        params: {
-          portalSlug: this.$route.params.portalSlug,
-          locale,
-        },
-      });
-      this.$emit('reloadLocale');
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="flex flex-col w-full max-w-full px-0 py-0 overflow-auto bg-white dark:bg-slate-900"
-  >
-    <ArticleHeader
-      :header-title="headerTitle"
-      :count="meta.count"
-      :selected-locale="activeLocaleName"
-      :all-locales="allowedLocales"
-      selected-value="Published"
-      class="border-b border-slate-50 dark:border-slate-700"
-      @new-article-page="newArticlePage"
-      @change-locale="onChangeLocale"
-    />
-    <div
-      v-if="isFetching"
-      class="flex items-center justify-center px-4 py-6 text-base text-slate-600 dark:text-slate-200"
-    >
-      <Spinner />
-      <span class="text-slate-600 dark:text-slate-200">
-        {{ $t('HELP_CENTER.TABLE.LOADING_MESSAGE') }}
-      </span>
-    </div>
-    <EmptyState
-      v-else-if="shouldShowEmptyState"
-      :title="$t('HELP_CENTER.TABLE.NO_ARTICLES')"
-    />
-    <div v-else class="flex flex-1">
-      <ArticleTable
-        :articles="articles"
-        :current-page="Number(meta.currentPage)"
-        :total-count="Number(meta.count)"
-        @page-change="onPageChange"
-        @reorder="onReorder"
-      />
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListCategoryArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListCategoryArticles.vue
deleted file mode 100644
index c636f6101..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListCategoryArticles.vue
+++ /dev/null
@@ -1,4 +0,0 @@
-<!-- Unused file deprecated -->
-<template>
-  <div>{{ 'Component to list articles in a category in a portal' }}</div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
deleted file mode 100644
index 1b1d6e097..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert, useTrack } from 'dashboard/composables';
-import EditArticleHeader from 'dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue';
-import ArticleEditor from '../../components/ArticleEditor.vue';
-import portalMixin from '../../mixins/portalMixin';
-import ArticleSettings from './ArticleSettings.vue';
-import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
-export default {
-  components: {
-    EditArticleHeader,
-    ArticleEditor,
-    ArticleSettings,
-  },
-  mixins: [portalMixin],
-  data() {
-    return {
-      articleTitle: '',
-      articleContent: '',
-      showOpenSidebarButton: false,
-      showArticleSettings: true,
-      article: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      currentUserID: 'getCurrentUserID',
-      categories: 'categories/allCategories',
-    }),
-    articleId() {
-      return this.$route.params.articleSlug;
-    },
-    newArticle() {
-      return { title: this.articleTitle, content: this.articleContent };
-    },
-    selectedPortalSlug() {
-      return this.$route.params.portalSlug;
-    },
-    categoryId() {
-      return this.categories.length ? this.categories[0].id : null;
-    },
-  },
-  methods: {
-    onClickGoBack() {
-      this.$router.push({ name: 'list_all_locale_articles' });
-    },
-    async createNewArticle({ ...values }) {
-      const { title, content } = values;
-      if (title) this.articleTitle = title;
-      if (content) this.articleContent = content;
-      if (this.articleTitle && this.articleContent) {
-        try {
-          const articleId = await this.$store.dispatch('articles/create', {
-            portalSlug: this.selectedPortalSlug,
-            content: this.articleContent,
-            title: this.articleTitle,
-            author_id: this.currentUserID,
-            // TODO: Change to un categorized later when API supports
-            category_id: this.categoryId,
-          });
-          this.$router.push({
-            name: 'edit_article',
-            params: {
-              articleSlug: articleId,
-              portalSlug: this.selectedPortalSlug,
-              locale: this.locale,
-              recentlyCreated: true,
-            },
-          });
-          useTrack(PORTALS_EVENTS.CREATE_ARTICLE, {
-            locale: this.locale,
-          });
-        } catch (error) {
-          this.alertMessage =
-            error?.message ||
-            this.$t('HELP_CENTER.CREATE_ARTICLE.API.ERROR_MESSAGE');
-          useAlert(this.alertMessage);
-        }
-      }
-    },
-    openArticleSettings() {
-      this.showArticleSettings = true;
-    },
-    closeArticleSettings() {
-      this.showArticleSettings = false;
-    },
-    saveArticle() {
-      this.alertMessage = this.$t('HELP_CENTER.CREATE_ARTICLE.ERROR_MESSAGE');
-      useAlert(this.alertMessage);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex flex-1 overflow-auto">
-    <div
-      class="flex-1 flex-shrink-0 px-6 overflow-y-auto"
-      :class="{ 'flex-grow-1': showArticleSettings }"
-    >
-      <EditArticleHeader
-        :back-button-label="$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES')"
-        draft-state="saved"
-        :is-sidebar-open="showArticleSettings"
-        @back="onClickGoBack"
-        @open="openArticleSettings"
-        @close="closeArticleSettings"
-        @save-article="createNewArticle"
-      />
-      <ArticleEditor :article="newArticle" @save-article="createNewArticle" />
-    </div>
-    <ArticleSettings
-      v-if="showArticleSettings"
-      :article="article"
-      @save-article="saveArticle"
-    />
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
deleted file mode 100644
index 91d3be0b0..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
+++ /dev/null
@@ -1,199 +0,0 @@
-<script>
-import { required, minLength } from '@vuelidate/validators';
-import { useVuelidate } from '@vuelidate/core';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { convertToCategorySlug } from 'dashboard/helper/commons.js';
-import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
-import NameEmojiInput from './NameEmojiInput.vue';
-
-export default {
-  components: { NameEmojiInput },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-    portalName: {
-      type: String,
-      default: '',
-    },
-    locale: {
-      type: String,
-      default: '',
-    },
-    portalSlug: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['create', 'cancel', 'update:show'],
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      name: '',
-      icon: '',
-      slug: '',
-      description: '',
-    };
-  },
-  validations: {
-    name: {
-      required,
-      minLength: minLength(2),
-    },
-    slug: {
-      required,
-    },
-  },
-  computed: {
-    localShow: {
-      get() {
-        return this.show;
-      },
-      set(value) {
-        this.$emit('update:show', value);
-      },
-    },
-    selectedPortalSlug() {
-      return this.$route.params.portalSlug
-        ? this.$route.params.portalSlug
-        : this.portalSlug;
-    },
-    slugError() {
-      if (this.v$.slug.$error) {
-        return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
-      }
-      return '';
-    },
-  },
-  methods: {
-    onNameChange(name) {
-      this.name = name;
-      this.slug = convertToCategorySlug(this.name);
-    },
-    onCreate() {
-      this.$emit('create');
-    },
-    onClose() {
-      this.$emit('cancel');
-    },
-    onClickInsertEmoji(emoji) {
-      this.icon = emoji;
-    },
-
-    async addCategory() {
-      const { name, slug, description, locale, icon } = this;
-      const data = {
-        name,
-        icon,
-        slug,
-        description,
-        locale,
-      };
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-      try {
-        await this.$store.dispatch('categories/create', {
-          portalSlug: this.selectedPortalSlug,
-          categoryObj: data,
-        });
-        this.alertMessage = this.$t(
-          'HELP_CENTER.CATEGORY.ADD.API.SUCCESS_MESSAGE'
-        );
-        this.onClose();
-        useTrack(PORTALS_EVENTS.CREATE_CATEGORY, {
-          hasDescription: Boolean(description),
-        });
-      } catch (error) {
-        const errorMessage = error?.message;
-        this.alertMessage =
-          errorMessage || this.$t('HELP_CENTER.CATEGORY.ADD.API.ERROR_MESSAGE');
-      } finally {
-        useAlert(this.alertMessage);
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <woot-modal v-model:show="localShow" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('HELP_CENTER.CATEGORY.ADD.TITLE')"
-      :header-content="$t('HELP_CENTER.CATEGORY.ADD.SUB_TITLE')"
-    />
-    <form class="w-full" @submit.prevent="onCreate">
-      <div class="w-full">
-        <div class="flex flex-row w-full mx-0 mt-0 mb-4">
-          <div class="w-[50%]">
-            <label>
-              <span>{{ $t('HELP_CENTER.CATEGORY.ADD.PORTAL') }}</span>
-              <p class="text-slate-600 dark:text-slate-400">{{ portalName }}</p>
-            </label>
-          </div>
-          <div class="w-[50%]">
-            <label>
-              <span>{{ $t('HELP_CENTER.CATEGORY.ADD.LOCALE') }}</span>
-              <p class="text-slate-600 dark:text-slate-400">{{ locale }}</p>
-            </label>
-          </div>
-        </div>
-        <NameEmojiInput
-          :label="$t('HELP_CENTER.CATEGORY.ADD.NAME.LABEL')"
-          :placeholder="$t('HELP_CENTER.CATEGORY.ADD.NAME.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.CATEGORY.ADD.NAME.HELP_TEXT')"
-          :has-error="v$.name.$error"
-          :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
-          @name-change="onNameChange"
-          @icon-change="onClickInsertEmoji"
-        />
-        <woot-input
-          v-model="slug"
-          :class="{ error: v$.slug.$error }"
-          class="w-full"
-          :error="slugError"
-          :label="$t('HELP_CENTER.CATEGORY.ADD.SLUG.LABEL')"
-          :placeholder="$t('HELP_CENTER.CATEGORY.ADD.SLUG.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.CATEGORY.ADD.SLUG.HELP_TEXT')"
-          @input="v$.slug.$touch"
-          @blur="v$.slug.$touch"
-        />
-        <label>
-          {{ $t('HELP_CENTER.CATEGORY.ADD.DESCRIPTION.LABEL') }}
-          <textarea
-            v-model="description"
-            rows="3"
-            type="text"
-            :placeholder="
-              $t('HELP_CENTER.CATEGORY.ADD.DESCRIPTION.PLACEHOLDER')
-            "
-          />
-        </label>
-        <div class="w-full">
-          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <woot-button class="button clear" @click.prevent="onClose">
-              {{ $t('HELP_CENTER.CATEGORY.ADD.BUTTONS.CANCEL') }}
-            </woot-button>
-            <woot-button @click="addCategory">
-              {{ $t('HELP_CENTER.CATEGORY.ADD.BUTTONS.CREATE') }}
-            </woot-button>
-          </div>
-        </div>
-      </div>
-    </form>
-  </woot-modal>
-</template>
-
-<style scoped lang="scss">
-.input-container::v-deep {
-  @apply mt-0 mb-4 mx-0;
-
-  input {
-    @apply mb-0;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
deleted file mode 100644
index 80818dad7..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<script>
-export default {
-  props: {
-    categories: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  emits: ['edit', 'delete'],
-
-  methods: {
-    editCategory(category) {
-      this.$emit('edit', category);
-    },
-    deleteCategory(category) {
-      this.$emit('delete', category);
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <table class="woot-table">
-      <thead>
-        <tr>
-          <th scope="col">
-            {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.NAME') }}
-          </th>
-          <th scope="col">
-            {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.DESCRIPTION') }}
-          </th>
-          <th scope="col">
-            {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.LOCALE') }}
-          </th>
-          <th scope="col">
-            {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ARTICLE_COUNT') }}
-          </th>
-          <th scope="col" />
-        </tr>
-      </thead>
-      <tr>
-        <td colspan="100%" class="horizontal-line" />
-      </tr>
-      <tbody>
-        <tr v-for="category in categories" :key="category.id">
-          <td>
-            <span>{{ category.icon }} {{ category.name }}</span>
-          </td>
-          <td>
-            <span>{{ category.description }}</span>
-          </td>
-          <td>
-            <span>{{ category.locale }}</span>
-          </td>
-          <td>
-            <span>{{ category.meta.articles_count }}</span>
-          </td>
-          <td class="inline-flex gap-1">
-            <woot-button
-              v-tooltip.top-end="
-                $t(
-                  'HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ACTION_BUTTON.EDIT'
-                )
-              "
-              size="tiny"
-              variant="smooth"
-              icon="edit"
-              color-scheme="secondary"
-              @click="editCategory(category)"
-            />
-            <woot-button
-              v-tooltip.top-end="
-                $t(
-                  'HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ACTION_BUTTON.DELETE'
-                )
-              "
-              size="tiny"
-              variant="smooth"
-              icon="delete"
-              color-scheme="alert"
-              @click="deleteCategory(category)"
-            />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <p
-      v-if="categories.length === 0"
-      class="flex justify-center mt-8 text-base text-slate-500 dark:text-slate-300"
-    >
-      {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.EMPTY_TEXT') }}
-    </p>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-table {
-  thead tr th {
-    @apply text-sm font-medium normal-case text-slate-800 dark:text-slate-100 pl-0 rtl:pl-2.5 rtl:pr-0 pt-0;
-  }
-
-  tbody tr {
-    @apply border-b-0;
-    td {
-      @apply text-sm pl-0 rtl:pl-2.5 rtl:pr-0 text-slate-700 dark:text-slate-100;
-    }
-  }
-}
-.horizontal-line {
-  @apply border-b border-solid border-slate-75 dark:border-slate-700;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
deleted file mode 100644
index 4a3620bca..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<script>
-import { required, minLength } from '@vuelidate/validators';
-import { useVuelidate } from '@vuelidate/core';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { convertToCategorySlug } from 'dashboard/helper/commons.js';
-import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
-import CategoryNameIconInput from './NameEmojiInput.vue';
-
-export default {
-  components: { CategoryNameIconInput },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-    portalName: {
-      type: String,
-      default: '',
-    },
-    locale: {
-      type: String,
-      default: '',
-    },
-    category: {
-      type: Object,
-      default: () => {},
-    },
-    selectedPortalSlug: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['update', 'cancel', 'update:show'],
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      id: this.category.id,
-      name: '',
-      icon: '',
-      slug: '',
-      description: '',
-    };
-  },
-  validations: {
-    name: {
-      required,
-      minLength: minLength(2),
-    },
-    slug: {
-      required,
-    },
-  },
-  computed: {
-    localShow: {
-      get() {
-        return this.show;
-      },
-      set(value) {
-        this.$emit('update:show', value);
-      },
-    },
-    slugError() {
-      if (this.v$.slug.$error) {
-        return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
-      }
-      return '';
-    },
-  },
-  mounted() {
-    this.updateDataFromStore();
-  },
-  methods: {
-    updateDataFromStore() {
-      const { category } = this;
-      this.name = category.name;
-      this.icon = category.icon;
-      this.slug = category.slug;
-      this.description = category.description;
-    },
-    changeName(name) {
-      this.name = name;
-      this.slug = convertToCategorySlug(this.name);
-    },
-    onClickInsertEmoji(emoji) {
-      this.icon = emoji;
-    },
-    onUpdate() {
-      this.$emit('update');
-    },
-    onClose() {
-      this.$emit('cancel');
-    },
-    async editCategory() {
-      const { id, name, slug, icon, description } = this;
-      const data = {
-        id,
-        name,
-        icon,
-        slug,
-        description,
-      };
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-      try {
-        await this.$store.dispatch('categories/update', {
-          portalSlug: this.selectedPortalSlug,
-          categoryId: id,
-          categoryObj: data,
-        });
-        this.alertMessage = this.$t(
-          'HELP_CENTER.CATEGORY.EDIT.API.SUCCESS_MESSAGE'
-        );
-        useTrack(PORTALS_EVENTS.EDIT_CATEGORY);
-        this.onClose();
-      } catch (error) {
-        const errorMessage = error?.message;
-        this.alertMessage =
-          errorMessage ||
-          this.$t('HELP_CENTER.CATEGORY.EDIT.API.ERROR_MESSAGE');
-      } finally {
-        useAlert(this.alertMessage);
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <woot-modal v-model:show="localShow" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('HELP_CENTER.CATEGORY.EDIT.TITLE')"
-      :header-content="$t('HELP_CENTER.CATEGORY.EDIT.SUB_TITLE')"
-    />
-    <form class="w-full" @submit.prevent="onUpdate">
-      <div class="w-full">
-        <div class="flex flex-row w-full mx-0 mt-0 mb-4">
-          <div class="w-[50%]">
-            <label>
-              <span>{{ $t('HELP_CENTER.CATEGORY.EDIT.PORTAL') }}</span>
-              <p class="text-slate-600 dark:text-slate-400">{{ portalName }}</p>
-            </label>
-          </div>
-          <div class="w-[50%]">
-            <label>
-              <span>{{ $t('HELP_CENTER.CATEGORY.EDIT.LOCALE') }}</span>
-              <p class="text-slate-600 dark:text-slate-400">{{ locale }}</p>
-            </label>
-          </div>
-        </div>
-        <CategoryNameIconInput
-          :label="$t('HELP_CENTER.CATEGORY.EDIT.NAME.LABEL')"
-          :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.NAME.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.CATEGORY.EDIT.NAME.HELP_TEXT')"
-          :has-error="v$.name.$error"
-          :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
-          :existing-name="category.name"
-          :saved-icon="category.icon"
-          @name-change="changeName"
-          @icon-change="onClickInsertEmoji"
-        />
-        <woot-input
-          v-model="slug"
-          :class="{ error: v$.slug.$error }"
-          class="w-full"
-          :error="slugError"
-          :label="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.LABEL')"
-          :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.HELP_TEXT')"
-          @input="v$.slug.$touch"
-          @blur="v$.slug.$touch"
-        />
-        <label>
-          {{ $t('HELP_CENTER.CATEGORY.EDIT.DESCRIPTION.LABEL') }}
-          <textarea
-            v-model="description"
-            rows="3"
-            type="text"
-            :placeholder="
-              $t('HELP_CENTER.CATEGORY.EDIT.DESCRIPTION.PLACEHOLDER')
-            "
-          />
-        </label>
-        <div class="w-full">
-          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <woot-button class="button clear" @click.prevent="onClose">
-              {{ $t('HELP_CENTER.CATEGORY.EDIT.BUTTONS.CANCEL') }}
-            </woot-button>
-            <woot-button @click="editCategory">
-              {{ $t('HELP_CENTER.CATEGORY.EDIT.BUTTONS.CREATE') }}
-            </woot-button>
-          </div>
-        </div>
-      </div>
-    </form>
-  </woot-modal>
-</template>
-
-<style scoped lang="scss">
-.article-info {
-  width: 100%;
-  margin: 0 0 var(--space-normal);
-
-  .value {
-    color: var(--s-600);
-  }
-}
-
-.input-container::v-deep {
-  margin: 0 0 var(--space-normal);
-
-  input {
-    margin-bottom: 0;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
deleted file mode 100644
index 92b6b7bbd..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<script setup>
-import { useRoute } from 'vue-router';
-import { useStoreGetters, useStore } from 'dashboard/composables/store';
-import { useI18n } from 'vue-i18n';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-
-import { defineOptions, ref, computed } from 'vue';
-
-import CategoryListItem from './CategoryListItem.vue';
-import AddCategory from './AddCategory.vue';
-import EditCategory from './EditCategory.vue';
-
-defineOptions({
-  name: 'ListAllCategories',
-});
-
-const selectedCategory = ref({});
-const currentLocaleCode = ref('en');
-const showEditCategoryModal = ref(false);
-const showAddCategoryModal = ref(false);
-
-const getters = useStoreGetters();
-const store = useStore();
-const route = useRoute();
-const { t } = useI18n();
-const currentPortalSlug = computed(() => {
-  return route.params.portalSlug;
-});
-
-const categoriesByLocaleCode = computed(() => {
-  return getters['categories/categoriesByLocaleCode'].value(
-    currentLocaleCode.value
-  );
-});
-
-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 ? currentPortal.value.name : '';
-});
-const allLocales = computed(() => {
-  return currentPortal.value ? currentPortal.value.config.allowed_locales : [];
-});
-
-const allowedLocaleCodes = computed(() => {
-  return allLocales.value.map(locale => locale.code);
-});
-
-function openAddCategoryModal() {
-  showAddCategoryModal.value = true;
-}
-function openEditCategoryModal(category) {
-  selectedCategory.value = category;
-  showEditCategoryModal.value = true;
-}
-function closeAddCategoryModal() {
-  showAddCategoryModal.value = false;
-}
-function closeEditCategoryModal() {
-  showEditCategoryModal.value = false;
-}
-async function fetchCategoriesByPortalSlugAndLocale(localeCode) {
-  await store.dispatch('categories/index', {
-    portalSlug: currentPortalSlug.value,
-    locale: localeCode,
-  });
-}
-
-async function deleteCategory(category) {
-  let alertMessage = '';
-  try {
-    await store.dispatch('categories/delete', {
-      portalSlug: currentPortalSlug.value,
-      categoryId: category.id,
-    });
-    alertMessage = t('HELP_CENTER.CATEGORY.DELETE.API.SUCCESS_MESSAGE');
-    useTrack(PORTALS_EVENTS.DELETE_CATEGORY, {
-      hasArticles: category?.meta?.articles_count !== 0,
-    });
-  } catch (error) {
-    const errorMessage = error?.message;
-    alertMessage =
-      errorMessage || t('HELP_CENTER.CATEGORY.DELETE.API.ERROR_MESSAGE');
-  } finally {
-    useAlert(alertMessage);
-  }
-}
-function changeCurrentCategory(event) {
-  const localeCode = event.target.value;
-  currentLocaleCode.value = localeCode;
-  fetchCategoriesByPortalSlugAndLocale(localeCode);
-}
-</script>
-
-<template>
-  <div class="w-full max-w-6xl">
-    <header class="flex items-center justify-between mb-4">
-      <div class="flex items-center w-full gap-3">
-        <label
-          class="mb-0 text-base font-normal text-slate-800 dark:text-slate-100"
-        >
-          {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TITLE') }}
-        </label>
-        <select
-          :value="currentLocaleCode"
-          class="w-[15%] h-8 mb-0 py-0.5"
-          @change="changeCurrentCategory"
-        >
-          <option
-            v-for="allowedLocaleCode in allowedLocaleCodes"
-            :key="allowedLocaleCode"
-            :value="allowedLocaleCode"
-          >
-            {{ allowedLocaleCode }}
-          </option>
-        </select>
-      </div>
-      <div class="items-center flex-none">
-        <woot-button
-          size="small"
-          variant="smooth"
-          color-scheme="primary"
-          icon="add"
-          @click="openAddCategoryModal"
-        >
-          {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.NEW_CATEGORY') }}
-        </woot-button>
-      </div>
-    </header>
-    <div class="category-list">
-      <CategoryListItem
-        :categories="categoriesByLocaleCode"
-        @delete="deleteCategory"
-        @edit="openEditCategoryModal"
-      />
-    </div>
-    <EditCategory
-      v-if="showEditCategoryModal"
-      v-model:show="showEditCategoryModal"
-      :portal-name="currentPortalName"
-      :locale="selectedCategory.locale"
-      :category="selectedCategory"
-      :selected-portal-slug="currentPortalSlug"
-      @cancel="closeEditCategoryModal"
-    />
-    <AddCategory
-      v-if="showAddCategoryModal"
-      v-model:show="showAddCategoryModal"
-      :portal-name="currentPortalName"
-      :locale="currentLocaleCode"
-      @cancel="closeAddCategoryModal"
-    />
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
deleted file mode 100644
index 3985a4b60..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<script>
-import { defineAsyncComponent } from 'vue';
-
-const EmojiInput = defineAsyncComponent(
-  () => import('shared/components/emoji/EmojiInput.vue')
-);
-
-export default {
-  components: { EmojiInput },
-  props: {
-    label: {
-      type: String,
-      default: '',
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    helpText: {
-      type: String,
-      default: '',
-    },
-    hasError: {
-      type: Boolean,
-      default: false,
-    },
-    errorMessage: {
-      type: String,
-      default: '',
-    },
-    existingName: {
-      type: String,
-      default: '',
-    },
-    savedIcon: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['iconChange', 'nameChange'],
-  data() {
-    return {
-      name: '',
-      icon: '',
-      showEmojiPicker: false,
-    };
-  },
-  computed: {
-    nameErrorMessage() {
-      if (this.hasError) {
-        return this.errorMessage;
-      }
-      return '';
-    },
-  },
-  mounted() {
-    this.updateDataFromStore();
-  },
-  methods: {
-    updateDataFromStore() {
-      this.name = this.existingName;
-      this.icon = this.savedIcon;
-    },
-    toggleEmojiPicker() {
-      this.showEmojiPicker = !this.showEmojiPicker;
-    },
-    onClickInsertEmoji(emoji = '') {
-      this.icon = emoji;
-      this.$emit('iconChange', emoji);
-      this.showEmojiPicker = false;
-    },
-    onNameChange() {
-      this.$emit('nameChange', this.name);
-    },
-    hideEmojiPicker() {
-      if (this.showEmojiPicker) {
-        this.showEmojiPicker = false;
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="relative flex items-center">
-    <woot-button
-      variant="hollow"
-      class="absolute [&>span]:flex [&>span]:items-center [&>span]:justify-center z-10 top-[28px] h-[2.5rem] w-[2.45rem] !text-slate-400 dark:!text-slate-600 dark:!bg-slate-900 !p-0"
-      color-scheme="secondary"
-      @click="toggleEmojiPicker"
-    >
-      <span v-if="icon" v-dompurify-html="icon" class="text-lg" />
-      <fluent-icon
-        v-else
-        size="18"
-        icon="emoji-add"
-        type="outline"
-        class="text-slate-400 dark:text-slate-600"
-      />
-    </woot-button>
-    <woot-input
-      v-model="name"
-      :class="{ error: hasError }"
-      class="!mt-0 !mb-4 !mx-0 [&>input]:!mb-0 ltr:[&>input]:!ml-12 rtl:[&>input]:!mr-12 relative w-[calc(100%-3rem)] [&>p]:w-max"
-      :error="nameErrorMessage"
-      :label="label"
-      :placeholder="placeholder"
-      :help-text="helpText"
-      @update:model-value="onNameChange"
-    />
-    <EmojiInput
-      v-if="showEmojiPicker"
-      v-on-clickaway="hideEmojiPicker"
-      class="left-0 top-16"
-      show-remove-button
-      :on-click="onClickInsertEmoji"
-    />
-  </div>
-</template>
-
-<style scoped lang="scss">
-.emoji-dialog::before {
-  @apply hidden;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NewCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NewCategory.vue
deleted file mode 100644
index 6832de1ba..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NewCategory.vue
+++ /dev/null
@@ -1,4 +0,0 @@
-<!-- Unused file deprecated -->
-<template>
-  <div>{{ 'Component to create a category' }}</div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ShowCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ShowCategory.vue
deleted file mode 100644
index 2fec281a7..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ShowCategory.vue
+++ /dev/null
@@ -1,4 +0,0 @@
-<!-- Unused file deprecated -->
-<template>
-  <div>{{ 'Component to show details of a category' }}</div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
deleted file mode 100644
index d32720911..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<script>
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import SettingsHeader from 'dashboard/routes/dashboard/settings/SettingsHeader.vue';
-import SettingIntroBanner from 'dashboard/components/widgets/SettingIntroBanner.vue';
-
-export default {
-  components: {
-    SettingsHeader,
-    SettingIntroBanner,
-  },
-  mixins: [globalConfigMixin],
-  computed: {
-    currentPortal() {
-      const slug = this.$route.params.portalSlug;
-      if (slug) return this.$store.getters['portals/portalBySlug'](slug);
-      return this.$store.getters['portals/allPortals'][0];
-    },
-    tabs() {
-      const tabs = [
-        {
-          key: 'edit_portal_information',
-          name: this.$t('HELP_CENTER.PORTAL.EDIT.TABS.BASIC_SETTINGS.TITLE'),
-        },
-        {
-          key: 'edit_portal_customization',
-          name: this.$t(
-            'HELP_CENTER.PORTAL.EDIT.TABS.CUSTOMIZATION_SETTINGS.TITLE'
-          ),
-        },
-        {
-          key: `list_all_locale_categories`,
-          name: this.$t('HELP_CENTER.PORTAL.EDIT.TABS.CATEGORY_SETTINGS.TITLE'),
-        },
-        {
-          key: 'edit_portal_locales',
-          name: this.$t('HELP_CENTER.PORTAL.EDIT.TABS.LOCALE_SETTINGS.TITLE'),
-        },
-      ];
-
-      return tabs;
-    },
-    activeTabIndex() {
-      return this.tabs.map(tab => tab.key).indexOf(this.$route.name);
-    },
-    portalName() {
-      return this.currentPortal ? this.currentPortal.name : '';
-    },
-    currentPortalLocale() {
-      return this.currentPortal ? this.currentPortal?.meta?.default_locale : '';
-    },
-  },
-  methods: {
-    onTabChange(index) {
-      const nextRoute = this.tabs.map(tab => tab.key)[index];
-      const slug = this.$route.params.portalSlug;
-
-      this.$router.push({
-        name: nextRoute,
-        params: { portalSlug: slug, locale: this.currentPortalLocale },
-      });
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="wrapper">
-    <SettingsHeader
-      button-route="new"
-      :header-title="$t('HELP_CENTER.PORTAL.EDIT.HEADER_TEXT')"
-      show-back-button
-      :back-button-label="
-        $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BACK_BUTTON')
-      "
-      :show-new-button="false"
-    />
-    <div class="overflow-auto max-h-[96%]">
-      <SettingIntroBanner :header-title="portalName">
-        <woot-tabs
-          :index="activeTabIndex"
-          :border="false"
-          @change="onTabChange"
-        >
-          <woot-tabs-item
-            v-for="(tab, index) in tabs"
-            :key="tab.key"
-            :index="index"
-            :name="tab.name"
-            :show-badge="false"
-          />
-        </woot-tabs>
-      </SettingIntroBanner>
-      <div class="flex flex-wrap max-w-full px-8 py-4 my-auto">
-        <router-view />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.wrapper {
-  flex: 1;
-}
-::v-deep .tabs {
-  padding-left: 0;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
deleted file mode 100644
index a607ee1c9..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<script setup>
-import PortalSettingsBasicForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue';
-
-import { useAlert } from 'dashboard/composables';
-import { useStoreGetters, useStore } from 'dashboard/composables/store';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { defineOptions, computed, ref, onMounted } from 'vue';
-
-defineOptions({ name: 'EditPortalBasic' });
-
-const getters = useStoreGetters();
-const route = useRoute();
-const router = useRouter();
-const store = useStore();
-const { t } = useI18n();
-
-const uiFlags = getters['portals/uiFlagsIn'];
-
-const lastPortalSlug = ref(null);
-
-const currentPortalSlug = computed(() => {
-  return route.params.portalSlug;
-});
-
-const currentPortal = computed(() => {
-  const slug = route.params.portalSlug;
-  return getters['portals/portalBySlug'].value(slug);
-});
-
-onMounted(() => {
-  lastPortalSlug.value = currentPortalSlug.value;
-});
-
-async function updatePortalSettings(portalObj) {
-  let alertMessage = '';
-
-  try {
-    const portalSlug = lastPortalSlug.value;
-    await store.dispatch('portals/update', { ...portalObj, portalSlug });
-
-    alertMessage = t('HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_UPDATE');
-
-    if (lastPortalSlug.value !== portalObj.slug) {
-      await store.dispatch('portals/index');
-      router.replace({
-        name: route.name,
-        params: { portalSlug: portalObj.slug },
-      });
-    }
-  } catch (error) {
-    alertMessage =
-      error?.message ||
-      t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_UPDATE');
-  } finally {
-    useAlert(alertMessage);
-  }
-}
-async function deleteLogo() {
-  try {
-    const portalSlug = lastPortalSlug.value;
-    await store.dispatch('portals/deleteLogo', {
-      portalSlug,
-    });
-  } catch (error) {
-    useAlert(
-      error?.message || t('HELP_CENTER.PORTAL.ADD.LOGO.IMAGE_DELETE_ERROR')
-    );
-  }
-}
-</script>
-
-<!-- eslint-disable-next-line vue/no-root-v-if -->
-<template>
-  <PortalSettingsBasicForm
-    v-if="currentPortal"
-    :portal="currentPortal"
-    :is-submitting="uiFlags.isUpdating"
-    :submit-button-text="
-      $t('HELP_CENTER.PORTAL.EDIT.EDIT_BASIC_INFO.BUTTON_TEXT')
-    "
-    @submit="updatePortalSettings"
-    @delete-logo="deleteLogo"
-  />
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
deleted file mode 100644
index fc653a047..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script setup>
-import PortalSettingsCustomizationForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue';
-
-import { useAlert } from 'dashboard/composables';
-import { useStoreGetters, useStore } from 'dashboard/composables/store';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { defineOptions, computed } from 'vue';
-
-defineOptions({
-  name: 'EditPortalCustomization',
-});
-
-const getters = useStoreGetters();
-const route = useRoute();
-const store = useStore();
-const { t } = useI18n();
-
-const uiFlags = getters['portals/uiFlagsIn'];
-
-const currentPortal = computed(() => {
-  const slug = route.params.portalSlug;
-  return getters['portals/portalBySlug'].value(slug);
-});
-
-async function updatePortalSettings(portalObj) {
-  const portalSlug = route.params.portalSlug;
-  let alertMessage = '';
-  try {
-    await store.dispatch('portals/update', {
-      ...portalObj,
-      portalSlug,
-    });
-
-    alertMessage = t('HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_UPDATE');
-  } catch (error) {
-    alertMessage =
-      error?.message ||
-      t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_UPDATE');
-  } finally {
-    useAlert(alertMessage);
-  }
-}
-</script>
-
-<!-- eslint-disable-next-line vue/no-root-v-if -->
-<template>
-  <PortalSettingsCustomizationForm
-    v-if="currentPortal"
-    :portal="currentPortal"
-    :is-submitting="uiFlags.isUpdating"
-    :submit-button-text="
-      $t('HELP_CENTER.PORTAL.EDIT.EDIT_BASIC_INFO.BUTTON_TEXT')
-    "
-    @submit="updatePortalSettings"
-  />
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
deleted file mode 100644
index ec487be65..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<script setup>
-import LocaleItemTable from 'dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue';
-import AddLocale from 'dashboard/routes/dashboard/helpcenter/components/AddLocale.vue';
-import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-
-import { useAlert, useTrack } from 'dashboard/composables';
-import { useStoreGetters, useStore } from 'dashboard/composables/store';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { defineOptions, ref, onBeforeMount, computed } from 'vue';
-
-defineOptions({
-  name: 'EditPortalLocales',
-});
-
-const isAddLocaleModalOpen = ref(false);
-
-const getters = useStoreGetters();
-const store = useStore();
-const route = useRoute();
-const { t } = useI18n();
-
-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 locales = computed(() => {
-  return currentPortal.value?.config.allowed_locales;
-});
-const allowedLocales = computed(() => {
-  return Object.keys(locales.value).map(key => {
-    return locales.value[key].code;
-  });
-});
-
-async function fetchPortals() {
-  await store.dispatch('portals/index');
-}
-
-onBeforeMount(() => {
-  fetchPortals();
-});
-
-async function updatePortalLocales({
-  newAllowedLocales,
-  defaultLocale,
-  messageKey,
-}) {
-  let alertMessage = '';
-  try {
-    await store.dispatch('portals/update', {
-      portalSlug: currentPortalSlug.value,
-      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);
-  }
-}
-
-function changeDefaultLocale({ localeCode }) {
-  updatePortalLocales({
-    newAllowedLocales: allowedLocales.value,
-    defaultLocale: localeCode,
-    messageKey: 'CHANGE_DEFAULT_LOCALE',
-  });
-
-  useTrack(PORTALS_EVENTS.SET_DEFAULT_LOCALE, {
-    newLocale: localeCode,
-    from: route.name,
-  });
-}
-function deletePortalLocale({ localeCode }) {
-  const updatedLocales = allowedLocales.value.filter(
-    code => code !== localeCode
-  );
-
-  const defaultLocale = currentPortal.value?.meta.default_locale;
-
-  updatePortalLocales({
-    newAllowedLocales: updatedLocales,
-    defaultLocale,
-    messageKey: 'DELETE_LOCALE',
-  });
-
-  useTrack(PORTALS_EVENTS.DELETE_LOCALE, {
-    deletedLocale: localeCode,
-    from: route.name,
-  });
-}
-
-function closeAddLocaleModal() {
-  isAddLocaleModalOpen.value = false;
-}
-function addLocale() {
-  isAddLocaleModalOpen.value = true;
-}
-</script>
-
-<template>
-  <div class="w-full h-full max-w-6xl space-y-4 bg-white dark:bg-slate-900">
-    <div class="flex justify-end">
-      <woot-button
-        variant="smooth"
-        size="small"
-        color-scheme="primary"
-        class="header-action-buttons"
-        @click="addLocale"
-      >
-        {{ $t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.ADD') }}
-      </woot-button>
-    </div>
-    <LocaleItemTable
-      v-if="currentPortal"
-      :locales="locales"
-      :selected-locale-code="currentPortal.meta.default_locale"
-      @change-default-locale="changeDefaultLocale"
-      @delete="deletePortalLocale"
-    />
-    <woot-modal
-      v-model:show="isAddLocaleModalOpen"
-      :on-close="closeAddLocaleModal"
-    >
-      <AddLocale
-        :show="isAddLocaleModalOpen"
-        :portal="currentPortal"
-        @cancel="closeAddLocaleModal"
-      />
-    </woot-modal>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
deleted file mode 100644
index 551cdd2a6..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import PortalListItem from '../../components/PortalListItem.vue';
-import Spinner from 'shared/components/Spinner.vue';
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import AddLocale from '../../components/AddLocale.vue';
-import { buildPortalURL } from 'dashboard/helper/portalHelper';
-
-export default {
-  components: {
-    PortalListItem,
-    EmptyState,
-    Spinner,
-    AddLocale,
-  },
-  data() {
-    return {
-      isAddLocaleModalOpen: false,
-      selectedPortal: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      portals: 'portals/allPortals',
-      isFetching: 'portals/isFetchingPortals',
-    }),
-    portalStatus() {
-      return this.archived ? 'Archived' : 'Live';
-    },
-    shouldShowEmptyState() {
-      return !this.isFetching && !this.portals.length;
-    },
-  },
-  methods: {
-    openPortal(portalSlug) {
-      window.open(buildPortalURL(portalSlug), '_blank');
-    },
-    addPortal() {
-      this.$router.push({ name: 'new_portal_information' });
-    },
-    closeAddLocaleModal() {
-      this.isAddLocaleModalOpen = false;
-      this.selectedPortal = {};
-    },
-    addLocale(portalId) {
-      this.isAddLocaleModalOpen = true;
-      this.selectedPortal = this.portals.find(portal => portal.id === portalId);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="w-full max-w-full px-4 py-2">
-    <div class="flex items-center justify-between h-12 mx-0 mt-0 mb-2">
-      <div class="flex items-center">
-        <woot-sidemenu-icon />
-        <h1
-          class="mx-2 my-0 text-2xl font-medium text-slate-800 dark:text-slate-100"
-        >
-          {{ $t('HELP_CENTER.PORTAL.HEADER') }}
-        </h1>
-      </div>
-      <woot-button
-        color-scheme="primary"
-        icon="add"
-        size="small"
-        @click="addPortal"
-      >
-        {{ $t('HELP_CENTER.PORTAL.NEW_BUTTON') }}
-      </woot-button>
-    </div>
-    <div class="h-[90vh] overflow-y-scroll">
-      <PortalListItem
-        v-for="portal in portals"
-        :key="portal.id"
-        :portal="portal"
-        :status="portalStatus"
-        @add-locale="addLocale"
-        @open-site="openPortal"
-      />
-      <div
-        v-if="isFetching"
-        class="flex items-center justify-center p-40 text-base"
-      >
-        <Spinner />
-        <span>{{ $t('HELP_CENTER.PORTAL.LOADING_MESSAGE') }}</span>
-      </div>
-      <EmptyState
-        v-else-if="shouldShowEmptyState"
-        :title="$t('HELP_CENTER.PORTAL.NO_PORTALS_MESSAGE')"
-      />
-    </div>
-    <woot-modal
-      v-model:show="isAddLocaleModalOpen"
-      :on-close="closeAddLocaleModal"
-    >
-      <AddLocale
-        :show="isAddLocaleModalOpen"
-        :portal="selectedPortal"
-        @cancel="closeAddLocaleModal"
-      />
-    </woot-modal>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
deleted file mode 100644
index cb88a3b3c..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import SettingsHeader from 'dashboard/routes/dashboard/settings/SettingsHeader.vue';
-export default {
-  components: {
-    SettingsHeader,
-  },
-  mixins: [globalConfigMixin],
-  computed: {
-    ...mapGetters({
-      globalConfig: 'globalConfig/get',
-    }),
-    items() {
-      const routes = {
-        BASIC: 'new_portal_information',
-        CUSTOMIZATION: 'portal_customization',
-        FINISH: 'portal_finish',
-      };
-
-      const steps = ['BASIC', 'CUSTOMIZATION', 'FINISH'];
-
-      return steps.map(step => ({
-        title: this.$t(`HELP_CENTER.PORTAL.ADD.CREATE_FLOW.${step}.TITLE`),
-        route: routes[step],
-        body: this.useInstallationName(
-          this.$t(`HELP_CENTER.PORTAL.ADD.CREATE_FLOW.${step}.BODY`),
-          this.globalConfig.installationName
-        ),
-      }));
-    },
-    portalHeaderText() {
-      if (this.$route.name === 'new_portal_information') {
-        return this.$t(
-          'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.HEADER'
-        );
-      }
-      if (this.$route.name === 'portal_customization') {
-        return this.$t(
-          'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.CUSTOMIZATION_PAGE.HEADER'
-        );
-      }
-      return '';
-    },
-  },
-};
-</script>
-
-<template>
-  <section class="flex-1">
-    <SettingsHeader
-      button-route="new"
-      :header-title="portalHeaderText"
-      show-back-button
-      :back-button-label="
-        $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BACK_BUTTON')
-      "
-      :show-new-button="false"
-    />
-    <div
-      class="grid grid-cols-[20rem_1fr] w-full h-full overflow-auto rtl:pl-0 rtl:pr-4 bg-slate-50 dark:bg-slate-800 p-5"
-    >
-      <woot-wizard
-        class="hidden md:block"
-        :global-config="globalConfig"
-        :items="items"
-      />
-      <div
-        class="w-full p-5 bg-white border border-transparent border-solid rounded-md shadow-sm dark:bg-slate-900 dark:border-transparent"
-      >
-        <router-view />
-      </div>
-    </div>
-  </section>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
deleted file mode 100644
index d9b73bab4..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<script setup>
-import PortalSettingsCustomizationForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue';
-import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-
-import { useAlert, useTrack } from 'dashboard/composables';
-import { useStoreGetters, useStore } from 'dashboard/composables/store';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { defineOptions, onMounted, computed } from 'vue';
-
-defineOptions({
-  name: 'PortalCustomization',
-});
-
-const getters = useStoreGetters();
-const route = useRoute();
-const router = useRouter();
-const store = useStore();
-const { t } = useI18n();
-
-const uiFlags = getters['portals/uiFlagsIn'];
-
-const currentPortal = computed(() => {
-  const slug = route.params.portalSlug;
-  if (slug) return getters['portals/portalBySlug'].value(slug);
-
-  return {};
-});
-
-onMounted(() => {
-  store.dispatch('portals/index');
-});
-
-async function updatePortalSettings(portalObj) {
-  const portalSlug = route.params.portalSlug;
-  let alertMessage = '';
-  try {
-    await store.dispatch('portals/update', {
-      portalSlug,
-      ...portalObj,
-    });
-    alertMessage = t('HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_UPDATE');
-
-    useTrack(PORTALS_EVENTS.ONBOARD_CUSTOMIZATION, {
-      hasHomePageLink: Boolean(portalObj.homepage_link),
-      hasPageTitle: Boolean(portalObj.page_title),
-      hasHeaderText: Boolean(portalObj.headerText),
-    });
-  } catch (error) {
-    alertMessage =
-      error?.message ||
-      t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_UPDATE');
-  } finally {
-    useAlert(alertMessage);
-    router.push({ name: 'portal_finish' });
-  }
-}
-</script>
-
-<!-- eslint-disable-next-line vue/no-root-v-if -->
-<template>
-  <PortalSettingsCustomizationForm
-    v-if="currentPortal"
-    :portal="currentPortal"
-    :is-submitting="uiFlags.isUpdating"
-    :submit-button-text="
-      $t('HELP_CENTER.PORTAL.EDIT.EDIT_BASIC_INFO.BUTTON_TEXT')
-    "
-    @submit="updatePortalSettings"
-  />
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
deleted file mode 100644
index 77f1c3d89..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert, useTrack } from 'dashboard/composables';
-
-import PortalSettingsBasicForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue';
-import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
-
-export default {
-  components: {
-    PortalSettingsBasicForm,
-  },
-  data() {
-    return {
-      name: '',
-      slug: '',
-      domain: '',
-      alertMessage: '',
-    };
-  },
-
-  computed: {
-    ...mapGetters({
-      uiFlags: 'portals/uiFlagsIn',
-    }),
-  },
-
-  methods: {
-    async createPortal(portal) {
-      try {
-        const { blob_id: blobId } = portal;
-        await this.$store.dispatch('portals/create', {
-          portal,
-          blob_id: blobId,
-        });
-
-        this.alertMessage = this.$t(
-          'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_BASIC'
-        );
-        this.$router.push({
-          name: 'portal_customization',
-          params: { portalSlug: portal.slug },
-        });
-        const analyticsPayload = {
-          has_custom_domain: portal.domain !== '',
-        };
-        useTrack(PORTALS_EVENTS.ONBOARD_BASIC_INFORMATION, analyticsPayload);
-        useTrack(PORTALS_EVENTS.CREATE_PORTAL, analyticsPayload);
-      } catch (error) {
-        this.alertMessage =
-          error?.message ||
-          this.$t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_BASIC');
-      } finally {
-        useAlert(this.alertMessage);
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <PortalSettingsBasicForm
-    :is-submitting="uiFlags.isCreating"
-    :submit-button-text="
-      $t(
-        'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.CREATE_BASIC_SETTING_BUTTON'
-      )
-    "
-    @submit="createPortal"
-  />
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
deleted file mode 100644
index d86fc22ab..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup>
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import { defineOptions } from 'vue';
-defineOptions({
-  name: 'PortalSettingsFinish',
-});
-</script>
-
-<template>
-  <div
-    class="flex-grow-0 flex-shrink-0 w-full h-full max-w-full px-6 pt-3 pb-6 bg-white border border-transparent border-solid dark:bg-slate-900 dark:border-transparent"
-  >
-    <EmptyState
-      :title="$t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.TITLE')"
-      :message="
-        $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.MESSAGE')
-      "
-    >
-      <div class="w-full text-center">
-        <router-link
-          class="rounded button success nice"
-          :to="{
-            name: 'list_all_portals',
-          }"
-        >
-          {{ $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.FINISH') }}
-        </router-link>
-      </div>
-    </EmptyState>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ShowPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ShowPortal.vue
deleted file mode 100644
index bdbf7ccd8..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ShowPortal.vue
+++ /dev/null
@@ -1,4 +0,0 @@
-<!-- Unused file deprecated -->
-<template>
-  <div>{{ 'Component to view details of portal' }}</div>
-</template>
diff --git a/app/javascript/dashboard/store/modules/helpCenterArticles/actions.js b/app/javascript/dashboard/store/modules/helpCenterArticles/actions.js
index de6147fa8..8052cb133 100644
--- a/app/javascript/dashboard/store/modules/helpCenterArticles/actions.js
+++ b/app/javascript/dashboard/store/modules/helpCenterArticles/actions.js
@@ -1,6 +1,7 @@
 import articlesAPI from 'dashboard/api/helpCenter/articles';
 import { uploadExternalImage, uploadFile } from 'dashboard/helper/uploadHelper';
 import { throwErrorMessage } from 'dashboard/store/utils/api';
+import camelcaseKeys from 'camelcase-keys';
 
 import types from '../../mutation-types';
 export const actions = {
@@ -10,9 +11,7 @@ export const actions = {
   ) => {
     try {
       commit(types.SET_UI_FLAG, { isFetching: true });
-      const {
-        data: { payload, meta },
-      } = await articlesAPI.getArticles({
+      const { data } = await articlesAPI.getArticles({
         pageNumber,
         portalSlug,
         locale,
@@ -20,6 +19,8 @@ export const actions = {
         authorId,
         categorySlug,
       });
+      const payload = camelcaseKeys(data.payload);
+      const meta = camelcaseKeys(data.meta);
       const articleIds = payload.map(article => article.id);
       commit(types.CLEAR_ARTICLES);
       commit(types.ADD_MANY_ARTICLES, payload);
@@ -36,12 +37,11 @@ export const actions = {
   create: async ({ commit, dispatch }, { portalSlug, ...articleObj }) => {
     commit(types.SET_UI_FLAG, { isCreating: true });
     try {
-      const {
-        data: { payload },
-      } = await articlesAPI.createArticle({
+      const { data } = await articlesAPI.createArticle({
         portalSlug,
         articleObj,
       });
+      const payload = camelcaseKeys(data.payload);
       const { id: articleId } = payload;
       commit(types.ADD_ARTICLE, payload);
       commit(types.ADD_ARTICLE_ID, articleId);
@@ -58,10 +58,8 @@ export const actions = {
   show: async ({ commit }, { id, portalSlug }) => {
     commit(types.SET_UI_FLAG, { isFetching: true });
     try {
-      const response = await articlesAPI.getArticle({ id, portalSlug });
-      const {
-        data: { payload },
-      } = response;
+      const { data } = await articlesAPI.getArticle({ id, portalSlug });
+      const payload = camelcaseKeys(data.payload);
       const { id: articleId } = payload;
       commit(types.ADD_ARTICLE, payload);
       commit(types.ADD_ARTICLE_ID, articleId);
@@ -80,14 +78,12 @@ export const actions = {
     });
 
     try {
-      const {
-        data: { payload },
-      } = await articlesAPI.updateArticle({
+      const { data } = await articlesAPI.updateArticle({
         portalSlug,
         articleId,
         articleObj,
       });
-
+      const payload = camelcaseKeys(data.payload);
       commit(types.UPDATE_ARTICLE, payload);
 
       return articleId;
diff --git a/app/javascript/dashboard/store/modules/helpCenterArticles/mutations.js b/app/javascript/dashboard/store/modules/helpCenterArticles/mutations.js
index 5330542da..a53ae4e49 100644
--- a/app/javascript/dashboard/store/modules/helpCenterArticles/mutations.js
+++ b/app/javascript/dashboard/store/modules/helpCenterArticles/mutations.js
@@ -30,10 +30,8 @@ export const mutations = {
     $state.articles.allIds.push(...articleIds);
   },
 
-  [types.SET_ARTICLES_META]: ($state, data) => {
-    const { articles_count: count, current_page: currentPage } = data;
-    $state.meta.count = count;
-    $state.meta.currentPage = currentPage;
+  [types.SET_ARTICLES_META]: ($state, meta) => {
+    $state.meta = meta;
   },
 
   [types.ADD_ARTICLE_ID]: ($state, articleId) => {
@@ -41,8 +39,7 @@ export const mutations = {
     $state.articles.allIds.push(articleId);
   },
   [types.UPDATE_ARTICLE_FLAG]: ($state, { articleId, uiFlags }) => {
-    const flags =
-      Object.keys($state.articles.uiFlags.byId).includes(articleId) || {};
+    const flags = $state.articles.uiFlags.byId[articleId] || {};
 
     $state.articles.uiFlags.byId[articleId] = {
       ...{
@@ -64,11 +61,19 @@ export const mutations = {
       ...uiFlags,
     };
   },
-  [types.UPDATE_ARTICLE]($state, article) {
-    const articleId = article.id;
-    if (!$state.articles.allIds.includes(articleId)) return;
+  [types.UPDATE_ARTICLE]: ($state, updatedArticle) => {
+    const articleId = updatedArticle.id;
+    if ($state.articles.byId[articleId]) {
+      // Preserve the original position
+      const originalPosition = $state.articles.byId[articleId].position;
 
-    $state.articles.byId[articleId] = { ...article };
+      // Update the article, keeping the original position
+      // This is not moved out of the original position when we update the article
+      $state.articles.byId[articleId] = {
+        ...updatedArticle,
+        position: originalPosition,
+      };
+    }
   },
   [types.REMOVE_ARTICLE]($state, articleId) {
     const { [articleId]: toBeRemoved, ...newById } = $state.articles.byId;
diff --git a/app/javascript/dashboard/store/modules/helpCenterArticles/specs/action.spec.js b/app/javascript/dashboard/store/modules/helpCenterArticles/specs/action.spec.js
index ffdb98e15..d6c91cdd9 100644
--- a/app/javascript/dashboard/store/modules/helpCenterArticles/specs/action.spec.js
+++ b/app/javascript/dashboard/store/modules/helpCenterArticles/specs/action.spec.js
@@ -12,6 +12,13 @@ const articleList = [
     title: 'Documents are required to complete KYC',
   },
 ];
+
+const camelCasedArticle = {
+  id: 1,
+  categoryId: 1,
+  title: 'Documents are required to complete KYC',
+};
+
 const commit = vi.fn();
 const dispatch = vi.fn();
 global.axios = axios;
@@ -41,14 +48,14 @@ describe('#actions', () => {
           [
             {
               id: 1,
-              category_id: 1,
+              categoryId: 1,
               title: 'Documents are required to complete KYC',
             },
           ],
         ],
         [
           types.default.SET_ARTICLES_META,
-          { current_page: '1', articles_count: 5 },
+          { currentPage: '1', articlesCount: 5 },
         ],
         [types.default.ADD_MANY_ARTICLES_ID, [1]],
         [types.default.SET_UI_FLAG, { isFetching: false }],
@@ -71,11 +78,11 @@ describe('#actions', () => {
 
   describe('#create', () => {
     it('sends correct actions if API is success', async () => {
-      axios.post.mockResolvedValue({ data: { payload: articleList[0] } });
-      await actions.create({ commit, dispatch }, articleList[0]);
+      axios.post.mockResolvedValue({ data: { payload: camelCasedArticle } });
+      await actions.create({ commit, dispatch }, camelCasedArticle);
       expect(commit.mock.calls).toEqual([
         [types.default.SET_UI_FLAG, { isCreating: true }],
-        [types.default.ADD_ARTICLE, articleList[0]],
+        [types.default.ADD_ARTICLE, camelCasedArticle],
         [types.default.ADD_ARTICLE_ID, 1],
         [types.default.ADD_ARTICLE_FLAG, 1],
         [types.default.SET_UI_FLAG, { isCreating: false }],
@@ -96,7 +103,7 @@ describe('#actions', () => {
 
   describe('#update', () => {
     it('sends correct actions if API is success', async () => {
-      axios.patch.mockResolvedValue({ data: { payload: articleList[0] } });
+      axios.patch.mockResolvedValue({ data: { payload: camelCasedArticle } });
       await actions.update(
         { commit },
         {
@@ -110,7 +117,7 @@ describe('#actions', () => {
           types.default.UPDATE_ARTICLE_FLAG,
           { uiFlags: { isUpdating: true }, articleId: 1 },
         ],
-        [types.default.UPDATE_ARTICLE, articleList[0]],
+        [types.default.UPDATE_ARTICLE, camelCasedArticle],
         [
           types.default.UPDATE_ARTICLE_FLAG,
           { uiFlags: { isUpdating: false }, articleId: 1 },
diff --git a/app/javascript/dashboard/store/modules/helpCenterArticles/specs/mutation.spec.js b/app/javascript/dashboard/store/modules/helpCenterArticles/specs/mutation.spec.js
index 4240ef9ae..ddb44d9be 100644
--- a/app/javascript/dashboard/store/modules/helpCenterArticles/specs/mutation.spec.js
+++ b/app/javascript/dashboard/store/modules/helpCenterArticles/specs/mutation.spec.js
@@ -53,8 +53,8 @@ describe('#mutations', () => {
         current_page: 1,
       });
       expect(state.meta).toEqual({
-        count: 3,
-        currentPage: 1,
+        articles_count: 3,
+        current_page: 1,
       });
     });
   });
@@ -71,22 +71,36 @@ describe('#mutations', () => {
   });
 
   describe('#UPDATE_ARTICLE', () => {
-    it('does not updates if empty object is passed', () => {
+    it('does not update if empty object is passed', () => {
       mutations[types.UPDATE_ARTICLE](state, {});
       expect(state).toEqual(article);
     });
-    it('does not updates if object id is not present ', () => {
+
+    it('does not update if object id is not present in the state', () => {
       mutations[types.UPDATE_ARTICLE](state, { id: 5 });
       expect(state).toEqual(article);
     });
-    it(' updates if object with id already present in the state', () => {
-      mutations[types.UPDATE_ARTICLE](state, {
+
+    it('updates if object with id is already present in the state', () => {
+      const updatedArticle = {
         id: 2,
-        title: 'How do I change my registered email address',
-      });
-      expect(state.articles.byId[2].title).toEqual(
-        'How do I change my registered email address'
-      );
+        title: 'Updated Title',
+        content: 'Updated Content',
+      };
+      mutations[types.UPDATE_ARTICLE](state, updatedArticle);
+      expect(state.articles.byId[2].title).toEqual('Updated Title');
+      expect(state.articles.byId[2].content).toEqual('Updated Content');
+    });
+
+    it('preserves the original position when updating an article', () => {
+      const originalPosition = state.articles.byId[2].position;
+      const updatedArticle = {
+        id: 2,
+        title: 'Updated Title',
+        content: 'Updated Content',
+      };
+      mutations[types.UPDATE_ARTICLE](state, updatedArticle);
+      expect(state.articles.byId[2].position).toEqual(originalPosition);
     });
   });
 
diff --git a/app/javascript/dashboard/store/modules/helpCenterCategories/getters.js b/app/javascript/dashboard/store/modules/helpCenterCategories/getters.js
index e00a97b8e..2561180a8 100644
--- a/app/javascript/dashboard/store/modules/helpCenterCategories/getters.js
+++ b/app/javascript/dashboard/store/modules/helpCenterCategories/getters.js
@@ -5,6 +5,7 @@ export const getters = {
     return { isFetching: false, isUpdating: false, isDeleting: false };
   },
   isFetching: state => state.uiFlags.isFetching,
+  isCreating: state => state.uiFlags.isCreating,
   categoryById:
     (...getterArguments) =>
     categoryId => {
diff --git a/app/javascript/dashboard/store/modules/helpCenterCategories/index.js b/app/javascript/dashboard/store/modules/helpCenterCategories/index.js
index 5ed17b661..6ba60dcfe 100644
--- a/app/javascript/dashboard/store/modules/helpCenterCategories/index.js
+++ b/app/javascript/dashboard/store/modules/helpCenterCategories/index.js
@@ -19,6 +19,7 @@ const state = {
   uiFlags: {
     allFetched: false,
     isFetching: false,
+    isCreating: false,
   },
 };
 
diff --git a/app/javascript/dashboard/store/modules/helpCenterCategories/specs/getters.spec.js b/app/javascript/dashboard/store/modules/helpCenterCategories/specs/getters.spec.js
index 2556a1dee..2d094a01c 100644
--- a/app/javascript/dashboard/store/modules/helpCenterCategories/specs/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/helpCenterCategories/specs/getters.spec.js
@@ -12,7 +12,6 @@ describe('#getters', () => {
       isDeleting: false,
     });
   });
-
   it('categoryById', () => {
     expect(getters.categoryById(state)(1)).toEqual(
       categoriesState.categories.byId[1]
diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js b/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js
index 60ccf9d25..05a28756c 100644
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js
@@ -110,4 +110,10 @@ export const actions = {
   updatePortal: async ({ commit }, portal) => {
     commit(types.UPDATE_PORTAL_ENTRY, portal);
   },
+
+  switchPortal: async ({ commit }, isSwitching) => {
+    commit(types.SET_PORTAL_SWITCHING_FLAG, {
+      isSwitching,
+    });
+  },
 };
diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/getters.js b/app/javascript/dashboard/store/modules/helpCenterPortals/getters.js
index 9e47ff8c0..7dd8b2b22 100644
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/getters.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/getters.js
@@ -6,6 +6,8 @@ export const getters = {
   },
 
   isFetchingPortals: state => state.uiFlags.isFetching,
+  isCreatingPortal: state => state.uiFlags.isCreating,
+  isSwitchingPortal: state => state.uiFlags.isSwitching,
   portalBySlug:
     (...getterArguments) =>
     portalId => {
@@ -23,4 +25,5 @@ export const getters = {
   },
   count: state => state.portals.allIds.length || 0,
   getMeta: state => state.meta,
+  isSwitching: state => state.isSwitching,
 };
diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/index.js b/app/javascript/dashboard/store/modules/helpCenterPortals/index.js
index 346eb9e33..621e180e5 100755
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/index.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/index.js
@@ -31,6 +31,7 @@ const state = {
   uiFlags: {
     allFetched: false,
     isFetching: false,
+    isSwitching: false,
   },
 };
 
diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js b/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js
index d9b1e3e4a..7e14bc63e 100644
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js
@@ -12,6 +12,7 @@ export const types = {
   REMOVE_PORTAL_ENTRY: 'removePortalEntry',
   REMOVE_PORTAL_ID: 'removePortalId',
   SET_HELP_PORTAL_UI_FLAG: 'setHelpCenterUIFlag',
+  SET_PORTAL_SWITCHING_FLAG: 'setPortalSwitchingFlag',
 };
 
 export const mutations = {
@@ -105,4 +106,8 @@ export const mutations = {
       },
     };
   },
+
+  [types.SET_PORTAL_SWITCHING_FLAG]($state, { isSwitching }) {
+    $state.uiFlags.isSwitching = isSwitching;
+  },
 };
diff --git a/app/javascript/histoire.setup.ts b/app/javascript/histoire.setup.ts
index b2e7ad525..9b1166711 100644
--- a/app/javascript/histoire.setup.ts
+++ b/app/javascript/histoire.setup.ts
@@ -2,6 +2,7 @@ import './design-system/histoire.scss';
 import { defineSetupVue3 } from '@histoire/plugin-vue';
 import i18nMessages from 'dashboard/i18n';
 import { createI18n } from 'vue-i18n';
+import store from 'dashboard/store';
 
 const i18n = createI18n({
   legacy: false, // https://github.com/intlify/vue-i18n/issues/1902
@@ -10,5 +11,6 @@ const i18n = createI18n({
 });
 
 export const setupVue3 = defineSetupVue3(({ app }) => {
+  app.use(store);
   app.use(i18n);
 });
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index f84b2723c..468fbb7a0 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -294,5 +294,11 @@
   "chevron-lucide-left-outline": "m15 18l-6-6l6-6",
   "chevron-lucide-right-outline": "m9 18l6-6l-6-6",
   "chevron-lucide-up-outline": "m18 15l-6-6l-6 6",
-  "chevron-lucide-down-outline": "m6 9l6 6l6-6"
+  "chevron-lucide-down-outline": "m6 9l6 6l6-6",
+  "checkmark-lucide-outline": "M20 6L9 17l-5-5",
+  "pipette-lucide-outline": [
+    "m2 22l1-1h3l9-9M3 21v-3l9-9",
+    "m15 6l3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3z"
+  ],
+  "building-lucide-outline": "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Zm0-10H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2M10 6h4m-4 4h4m-4 4h4m-4 4h4"
 }
diff --git a/app/models/article.rb b/app/models/article.rb
index b96333797..ace793016 100644
--- a/app/models/article.rb
+++ b/app/models/article.rb
@@ -48,6 +48,7 @@ class Article < ApplicationRecord
 
   before_validation :ensure_account_id
   before_validation :ensure_article_slug
+  before_validation :ensure_locale_in_article
 
   validates :account_id, presence: true
   validates :author_id, presence: true
@@ -56,7 +57,6 @@ class Article < ApplicationRecord
 
   # ensuring that the position is always set correctly
   before_create :add_position_to_article
-  before_create :add_locale_to_article
   after_save :category_id_changed_action, if: :saved_change_to_category_id?
 
   enum status: { draft: 0, published: 1, archived: 2 }
@@ -143,11 +143,11 @@ class Article < ApplicationRecord
     update_article_position_in_category
   end
 
-  def add_locale_to_article
+  def ensure_locale_in_article
     self.locale = if category.present?
                     category.locale
                   else
-                    portal.default_locale
+                    locale.presence || portal.default_locale
                   end
   end
 
diff --git a/app/views/api/v1/accounts/articles/index.json.jbuilder b/app/views/api/v1/accounts/articles/index.json.jbuilder
index afc8b14d9..62d61f758 100644
--- a/app/views/api/v1/accounts/articles/index.json.jbuilder
+++ b/app/views/api/v1/accounts/articles/index.json.jbuilder
@@ -4,10 +4,10 @@ end
 
 json.meta do
   json.all_articles_count @portal_articles.size
-  json.archived_articles_count @articles.archived.size
+  json.archived_articles_count @archived_articles_count
   json.articles_count @articles_count
   json.current_page @current_page
-  json.draft_articles_count @all_articles.draft.size
-  json.mine_articles_count @all_articles.search_by_author(current_user.id).size if current_user.present?
-  json.published_count @articles.published.size
+  json.draft_articles_count @draft_articles_count
+  json.mine_articles_count @mine_articles_count
+  json.published_count @published_articles_count
 end
diff --git a/app/views/api/v1/accounts/portals/_portal.json.jbuilder b/app/views/api/v1/accounts/portals/_portal.json.jbuilder
index b17c844d9..199ab352f 100644
--- a/app/views/api/v1/accounts/portals/_portal.json.jbuilder
+++ b/app/views/api/v1/accounts/portals/_portal.json.jbuilder
@@ -17,6 +17,12 @@ json.config do
   end
 end
 
+if portal.channel_web_widget
+  json.inbox do
+    json.partial! 'api/v1/models/inbox', formats: [:json], resource: portal.channel_web_widget.inbox
+  end
+end
+
 json.logo portal.file_base_data if portal.logo.present?
 
 json.portal_members do
diff --git a/package.json b/package.json
index 18e2b6ecf..bf0e465b2 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "test:coverage": "TZ=UTC vitest --no-watch --no-cache --coverage",
     "start:dev": "foreman start -f ./Procfile.dev",
     "start:test": "RAILS_ENV=test foreman start -f ./Procfile.test",
-    "start:dev-overmind": "overmind start -f ./Procfile.dev",
+    "dev": "overmind start -f ./Procfile.dev",
     "ruby:prettier": "bundle exec rubocop -a",
     "build:sdk": "BUILD_MODE=library vite build",
     "prepare": "husky install",
@@ -56,6 +56,7 @@
     "@vueuse/core": "^11.1.0",
     "activestorage": "^5.2.6",
     "axios": "^1.7.7",
+    "camelcase-keys": "^9.1.3",
     "chart.js": "~4.4.4",
     "color2k": "^2.0.2",
     "company-email-validator": "^1.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 786b1becb..5a095c4c2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -86,6 +86,9 @@ importers:
       axios:
         specifier: ^1.7.7
         version: 1.7.7
+      camelcase-keys:
+        specifier: ^9.1.3
+        version: 9.1.3
       chart.js:
         specifier: ~4.4.4
         version: 4.4.4
@@ -2032,6 +2035,10 @@ packages:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
 
+  camelcase-keys@9.1.3:
+    resolution: {integrity: sha512-Rircqi9ch8AnZscQcsA1C47NFdaO3wukpmIRzYcDOrmvgt78hM/sj5pZhZNec2NM12uk5vTwRHZ4anGcrC4ZTg==}
+    engines: {node: '>=16'}
+
   camelcase@8.0.0:
     resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==}
     engines: {node: '>=16'}
@@ -3352,6 +3359,10 @@ packages:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
 
+  map-obj@5.0.0:
+    resolution: {integrity: sha512-2L3MIgJynYrZ3TYMriLDLWocz15okFakV6J12HXvMXDHui2x/zgChzg1u9mFFGbbGWE+GsLpQByt4POb9Or+uA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   markdown-it-anchor@8.6.7:
     resolution: {integrity: sha512-FlCHFwNnutLgVTflOYHPW2pPcl2AACqVzExlkGQNsi4CJgqOHN7YTgDd4LuhgN1BFO3TS0vLAruV1Td6dwWPJA==}
     peerDependencies:
@@ -4043,6 +4054,10 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  quick-lru@6.1.2:
+    resolution: {integrity: sha512-AAFUA5O1d83pIHEhJwWCq/RQcRukCkn/NSm2QsTEMle5f2hP0ChI2+3Xb051PZCkLryI/Ir1MVKviT2FIloaTQ==}
+    engines: {node: '>=12'}
+
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
@@ -6903,6 +6918,13 @@ snapshots:
 
   camelcase-css@2.0.1: {}
 
+  camelcase-keys@9.1.3:
+    dependencies:
+      camelcase: 8.0.0
+      map-obj: 5.0.0
+      quick-lru: 6.1.2
+      type-fest: 4.26.1
+
   camelcase@8.0.0: {}
 
   caniuse-lite@1.0.30001651: {}
@@ -8473,6 +8495,8 @@ snapshots:
     dependencies:
       semver: 7.6.3
 
+  map-obj@5.0.0: {}
+
   markdown-it-anchor@8.6.7(@types/markdown-it@12.2.3)(markdown-it@12.3.2):
     dependencies:
       '@types/markdown-it': 12.2.3
@@ -9208,6 +9232,8 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
+  quick-lru@6.1.2: {}
+
   react-is@18.3.1: {}
 
   read-cache@1.0.0:
diff --git a/spec/controllers/public/api/v1/portals/articles_controller_spec.rb b/spec/controllers/public/api/v1/portals/articles_controller_spec.rb
index 7f0fca8a1..249d1e78a 100644
--- a/spec/controllers/public/api/v1/portals/articles_controller_spec.rb
+++ b/spec/controllers/public/api/v1/portals/articles_controller_spec.rb
@@ -68,6 +68,13 @@ RSpec.describe 'Public Articles API', type: :request do
       expect(article.reload.views).to eq 1
     end
 
+    it 'does not increment the view count if the article is not published' do
+      draft_article = create(:article, category: category, status: :draft, portal: portal, account_id: account.id, author_id: agent.id, views: 0)
+      get "/hc/#{portal.slug}/articles/#{draft_article.slug}"
+      expect(response).to have_http_status(:success)
+      expect(draft_article.reload.views).to eq 0
+    end
+
     it 'returns the article with the id with a different locale' do
       article_in_locale = create(:article, category: category_2, portal: portal, account_id: account.id, author_id: agent.id)
       get "/hc/#{portal.slug}/articles/#{article_in_locale.slug}"
diff --git a/spec/models/article_spec.rb b/spec/models/article_spec.rb
index 800f8fc9a..0dc17d472 100644
--- a/spec/models/article_spec.rb
+++ b/spec/models/article_spec.rb
@@ -54,7 +54,7 @@ RSpec.describe Article do
     it 'adds locale to article from portal' do
       article = create(:article, content: 'This is the content', description: 'this is the description',
                                  slug: 'this-is-title', title: 'this is title',
-                                 portal_id: portal.id, author_id: user.id)
+                                 portal_id: portal.id, author_id: user.id, locale: '')
       expect(article.locale).to eq(portal.default_locale)
     end
   end
diff --git a/theme/colors.js b/theme/colors.js
index ebc03b552..9cec648dc 100644
--- a/theme/colors.js
+++ b/theme/colors.js
@@ -361,9 +361,9 @@ export const colors = {
       1: 'rgba(var(--alpha-1))',
       2: 'rgba(var(--alpha-2))',
       3: 'rgba(var(--alpha-3))',
-      black1: 'rgba(var(--alpha-black1))',
-      black2: 'rgba(var(--alpha-black2))',
-      white: 'rgba(var(--alpha-white))',
+      black1: 'rgba(var(--black-alpha-1))',
+      black2: 'rgba(var(--black-alpha-2))',
+      white: 'rgba(var(--white-alpha))',
     },
     weak: 'rgb(var(--border-weak) / <alpha-value>)',
     strong: 'rgb(var(--border-strong) / <alpha-value>)',

From 73b6e2cf371d31ce46712272fa27595d799fd4d6 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 24 Oct 2024 11:51:40 +0530
Subject: [PATCH 10/39] fix: Agents list in bulk action is not loading (#10347)

# Pull Request Template

## Description

This PR fixes the issue where the bulk action inbox assignable agent
list was not showing.

The issue started after merging this [feat: Vite+Vue 3
PR](https://github.com/chatwoot/chatwoot/pull/10047 ).

**Cause of issue**
Previously, `selectedInboxes` was accessed from the `ChatList.vue`
component. However, after moving the bulk action logic from mixin to the
`useBulkActions.js` composable, we were still referencing
`selectedInboxes` from the `ChatList.vue` component, even though it was
being set in the composable. This caused the API failed to load the
assignable agent list.


Ref:https://github.com/chatwoot/chatwoot/blob/develop/app/javascript/dashboard/composables/chatlist/useBulkActions.js#L18

**Solution**
Removed the usage of `selectedInboxes` from the `ChatList.vue` component
ref and using `selectedInboxes` ref directly from the
`useBulkActions.js`

Fixes
https://linear.app/chatwoot/issue/CW-3696/bulk-action-agent-list-is-not-loading

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

**Loom video**

https://www.loom.com/share/21e3835b3db04e34b94531ec128b586b?sid=beda60f0-1c8e-457b-b617-379d4af91873


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 app/javascript/dashboard/components/ChatList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 3ebefebe6..c4c81cbfb 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -90,7 +90,6 @@ const chatsOnView = ref([]);
 const foldersQuery = ref({});
 const showAddFoldersModal = ref(false);
 const showDeleteFoldersModal = ref(false);
-const selectedInboxes = ref([]);
 const isContextMenuOpen = ref(false);
 const appliedFilter = ref([]);
 const advancedFilterTypes = ref(
@@ -122,6 +121,7 @@ const getTeamFn = useMapGetter('teams/getTeam');
 useChatListKeyboardEvents(conversationListRef);
 const {
   selectedConversations,
+  selectedInboxes,
   selectConversation,
   deSelectConversation,
   selectAllConversations,

From 80c94340698d7465bd27897616359d5eff3162f3 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Sat, 26 Oct 2024 01:31:29 +0530
Subject: [PATCH 11/39] feat(v4): Auto-navigate to first menu item on group
 menu open(#10350)

Ensures users are seamlessly directed to the first available menu item upon opening a group, improving UX by reducing unnecessary clicks. This change enhances navigation flow within groups.

Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../components-next/sidebar/SidebarGroup.vue  | 26 +++++++++++++------
 .../dashboard/modules/search/search.routes.js |  2 +-
 .../routes/dashboard/contacts/routes.js       |  4 +--
 .../conversation/conversation.routes.js       |  2 +-
 .../routes/dashboard/dashboard.routes.js      |  6 ++---
 .../dashboard/helpcenter/helpcenter.routes.js |  4 +--
 .../routes/dashboard/inbox/routes.js          |  6 ++---
 .../routes/dashboard/notifications/routes.js  |  4 +--
 .../settings/account/account.routes.js        |  4 +--
 .../settings/agentBots/agentBot.routes.js     |  8 +++---
 .../dashboard/settings/agents/agent.routes.js |  4 +--
 .../settings/attributes/attributes.routes.js  |  4 +--
 .../settings/auditlogs/audit.routes.js        |  4 +--
 .../settings/automation/automation.routes.js  |  4 +--
 .../settings/billing/billing.routes.js        |  4 +--
 .../settings/campaigns/campaigns.routes.js    |  4 +--
 .../settings/canned/canned.routes.js          |  4 +--
 .../settings/customRoles/customRole.routes.js |  4 +--
 .../dashboard/settings/inbox/inbox.routes.js  | 16 ++++++------
 .../integrations/integrations.routes.js       | 14 +++++-----
 .../settings/labels/labels.routes.js          |  4 +--
 .../settings/macros/macros.routes.js          |  8 +++---
 .../settings/profile/profile.routes.js        |  4 +--
 .../settings/reports/reports.routes.js        | 20 +++++++-------
 .../dashboard/settings/sla/sla.routes.js      |  4 +--
 .../dashboard/settings/teams/teams.routes.js  | 20 +++++++-------
 app/javascript/entrypoints/widget.js          |  6 -----
 app/javascript/v3/views/routes.js             | 10 +++----
 28 files changed, 104 insertions(+), 100 deletions(-)

diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
index ecc189bea..3736b9d70 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { computed, watch, ref } from 'vue';
 import { useSidebarContext } from './provider';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import Policy from 'dashboard/components/policy.vue';
 import SidebarGroupHeader from './SidebarGroupHeader.vue';
 import SidebarGroupLeaf from './SidebarGroupLeaf.vue';
@@ -41,7 +41,7 @@ const navigableChildren = computed(() => {
 });
 
 const route = useRoute();
-
+const router = useRouter();
 const isExpanded = computed(() => expandedItem.value === props.name);
 const isExpandable = computed(() => props.children);
 const hasChildren = computed(
@@ -53,10 +53,7 @@ const accessibleItems = computed(() => {
   return props.children.filter(child => isAllowed(child.to));
 });
 
-const hasAccessibleItems = computed(() => {
-  // default true so that rendering is not blocked
-  if (!hasChildren.value) return true;
-
+const hasAccessibleChildren = computed(() => {
   return accessibleItems.value.length > 0;
 });
 
@@ -93,6 +90,19 @@ const hasActiveChild = computed(() => {
   return activeChild.value !== undefined;
 });
 
+const toggleTrigger = () => {
+  if (
+    hasAccessibleChildren.value &&
+    !isExpanded.value &&
+    !hasActiveChild.value
+  ) {
+    // if not already expanded, navigate to the first child
+    const firstItem = accessibleItems.value[0];
+    router.push(firstItem.to);
+  }
+  setExpandedItem(props.name);
+};
+
 watch(expandedItem, locateLastChild, {
   immediate: true,
 });
@@ -101,7 +111,7 @@ watch(expandedItem, locateLastChild, {
 <!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <Policy
-    v-if="hasAccessibleItems"
+    v-if="!hasChildren || hasAccessibleChildren"
     :permissions="resolvePermissions(to)"
     :feature-flag="resolveFeatureFlag(to)"
     as="li"
@@ -116,7 +126,7 @@ watch(expandedItem, locateLastChild, {
       :has-active-child="hasActiveChild"
       :expandable="hasChildren"
       :is-expanded="isExpanded"
-      @toggle="setExpandedItem(name)"
+      @toggle="toggleTrigger"
     />
     <ul
       v-if="hasChildren"
diff --git a/app/javascript/dashboard/modules/search/search.routes.js b/app/javascript/dashboard/modules/search/search.routes.js
index d59df5e79..e9261dbd9 100644
--- a/app/javascript/dashboard/modules/search/search.routes.js
+++ b/app/javascript/dashboard/modules/search/search.routes.js
@@ -5,7 +5,7 @@ import {
   CONTACT_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
 
-const SearchView = () => import('./components/SearchView.vue');
+import SearchView from './components/SearchView.vue';
 
 export const routes = [
   {
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/routes.js b/app/javascript/dashboard/routes/dashboard/contacts/routes.js
index d28718c9e..d9abe796e 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/contacts/routes.js
@@ -1,7 +1,7 @@
 /* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../helper/URLHelper';
-const ContactsView = () => import('./components/ContactsView.vue');
-const ContactManageView = () => import('./pages/ContactManageView.vue');
+import ContactsView from './components/ContactsView.vue';
+import ContactManageView from './pages/ContactManageView.vue';
 
 export const routes = [
   {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js b/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
index 019d659ac..241c70f45 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
@@ -1,6 +1,6 @@
 /* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../helper/URLHelper';
-const ConversationView = () => import('./ConversationView.vue');
+import ConversationView from './ConversationView.vue';
 
 const CONVERSATION_PERMISSIONS = [
   'administrator',
diff --git a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
index 89d1dfb15..8bb11b9be 100644
--- a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
@@ -9,9 +9,9 @@ import helpcenterRoutes from './helpcenter/helpcenter.routes';
 
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
-const AppContainer = () => import('./Dashboard.vue');
-const Captain = () => import('./Captain.vue');
-const Suspended = () => import('./suspended/Index.vue');
+import AppContainer from './Dashboard.vue';
+import Captain from './Captain.vue';
+import Suspended from './suspended/Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
index 6adc3cb2a..b0758aa9c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
@@ -2,8 +2,8 @@ import { getPortalRoute } from './helpers/routeHelper';
 
 import HelpCenterPageRouteView from './pages/HelpCenterPageRouteView.vue';
 
-const PortalsIndex = () => import('./pages/PortalsIndexPage.vue');
-const PortalsNew = () => import('./pages/PortalsNewPage.vue');
+import PortalsIndex from './pages/PortalsIndexPage.vue';
+import PortalsNew from './pages/PortalsNewPage.vue';
 
 const PortalsArticlesIndexPage = () =>
   import('./pages/PortalsArticlesIndexPage.vue');
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/routes.js b/app/javascript/dashboard/routes/dashboard/inbox/routes.js
index 44b265c5c..b11c09ea6 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/inbox/routes.js
@@ -1,7 +1,7 @@
 import { frontendURL } from 'dashboard/helper/URLHelper';
-const InboxListView = () => import('./InboxList.vue');
-const InboxDetailView = () => import('./InboxView.vue');
-const InboxEmptyStateView = () => import('./InboxEmptyState.vue');
+import InboxListView from './InboxList.vue';
+import InboxDetailView from './InboxView.vue';
+import InboxEmptyStateView from './InboxEmptyState.vue';
 import {
   ROLES,
   CONVERSATION_PERMISSIONS,
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/routes.js b/app/javascript/dashboard/routes/dashboard/notifications/routes.js
index f3d32ba1e..e5125f2cf 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/notifications/routes.js
@@ -1,7 +1,7 @@
 /* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../helper/URLHelper';
-const SettingsWrapper = () => import('../settings/Wrapper.vue');
-const NotificationsView = () => import('./components/NotificationsView.vue');
+import SettingsWrapper from '../settings/Wrapper.vue';
+import NotificationsView from './components/NotificationsView.vue';
 
 export const routes = [
   {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js b/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
index 2742621e9..ea25fd6dc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
@@ -1,6 +1,6 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsContent = () => import('../Wrapper.vue');
-const Index = () => import('./Index.vue');
+import SettingsContent from '../Wrapper.vue';
+import Index from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/agentBot.routes.js b/app/javascript/dashboard/routes/dashboard/settings/agentBots/agentBot.routes.js
index 55210397f..5d93ea01d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/agentBot.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/agentBot.routes.js
@@ -1,8 +1,8 @@
-const Bot = () => import('./Index.vue');
-const CsmlEditBot = () => import('./csml/Edit.vue');
-const CsmlNewBot = () => import('./csml/New.vue');
+import Bot from './Index.vue';
+import CsmlEditBot from './csml/Edit.vue';
+import CsmlNewBot from './csml/New.vue';
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsContent = () => import('../Wrapper.vue');
+import SettingsContent from '../Wrapper.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js b/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js
index ed5322e9e..0e649fabe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js
@@ -1,6 +1,6 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const AgentHome = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import AgentHome from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js b/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js
index 2ea1b793d..f74727059 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js
@@ -1,6 +1,6 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const AttributesHome = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import AttributesHome from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/audit.routes.js b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/audit.routes.js
index b8a288517..4d9e5d9ce 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/audit.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/audit.routes.js
@@ -1,7 +1,7 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const AuditLogsHome = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import AuditLogsHome from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js b/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js
index aaa458e90..302e476bb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js
@@ -1,6 +1,6 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const Automation = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import Automation from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js b/app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js
index f1042e81a..9fc09a00a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js
@@ -1,6 +1,6 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsContent = () => import('../Wrapper.vue');
-const Index = () => import('./Index.vue');
+import SettingsContent from '../Wrapper.vue';
+import Index from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js b/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js
index b7f066224..22268d11a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js
@@ -1,6 +1,6 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsContent = () => import('../Wrapper.vue');
-const Index = () => import('./Index.vue');
+import SettingsContent from '../Wrapper.vue';
+import Index from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js b/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
index 63a2d72f8..600d2664b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
@@ -3,8 +3,8 @@ import {
   ROLES,
   CONVERSATION_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const CannedHome = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import CannedHome from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/customRole.routes.js b/app/javascript/dashboard/routes/dashboard/settings/customRoles/customRole.routes.js
index 623a0081a..af2fc43ae 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/customRole.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/customRole.routes.js
@@ -1,7 +1,7 @@
 import { frontendURL } from 'dashboard/helper/URLHelper';
 
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const CustomRolesHome = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import CustomRolesHome from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js b/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
index d0a932742..aa1115a06 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
@@ -1,14 +1,14 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 import ChannelFactory from './ChannelFactory.vue';
 
-const SettingsContent = () => import('../Wrapper.vue');
-const SettingWrapper = () => import('../SettingsWrapper.vue');
-const InboxHome = () => import('./Index.vue');
-const Settings = () => import('./Settings.vue');
-const InboxChannel = () => import('./InboxChannels.vue');
-const ChannelList = () => import('./ChannelList.vue');
-const AddAgents = () => import('./AddAgents.vue');
-const FinishSetup = () => import('./FinishSetup.vue');
+import SettingsContent from '../Wrapper.vue';
+import SettingWrapper from '../SettingsWrapper.vue';
+import InboxHome from './Index.vue';
+import Settings from './Settings.vue';
+import InboxChannel from './InboxChannels.vue';
+import ChannelList from './ChannelList.vue';
+import AddAgents from './AddAgents.vue';
+import FinishSetup from './FinishSetup.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
index 8a4937dd4..3bb3e4708 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
@@ -1,11 +1,11 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const IntegrationHooks = () => import('./IntegrationHooks.vue');
-const Index = () => import('./Index.vue');
-const Webhook = () => import('./Webhooks/Index.vue');
-const DashboardApps = () => import('./DashboardApps/Index.vue');
-const Slack = () => import('./Slack.vue');
-const SettingsContent = () => import('../Wrapper.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import IntegrationHooks from './IntegrationHooks.vue';
+import Index from './Index.vue';
+import Webhook from './Webhooks/Index.vue';
+import DashboardApps from './DashboardApps/Index.vue';
+import Slack from './Slack.vue';
+import SettingsContent from '../Wrapper.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js b/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js
index ff149960e..ed5a504ab 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js
@@ -1,7 +1,7 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const Index = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import Index from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js b/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js
index 24559dffd..e1d4729e6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js
@@ -4,10 +4,10 @@ import {
   ROLES,
   CONVERSATION_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
-const SettingsContent = () => import('../Wrapper.vue');
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const Macros = () => import('./Index.vue');
-const MacroEditor = () => import('./MacroEditor.vue');
+import SettingsContent from '../Wrapper.vue';
+import SettingsWrapper from '../SettingsWrapper.vue';
+import Macros from './Index.vue';
+import MacroEditor from './MacroEditor.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js b/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
index a6cc13997..b99031047 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
@@ -1,7 +1,7 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 
-const SettingsContent = () => import('./Wrapper.vue');
-const Index = () => import('./Index.vue');
+import SettingsContent from './Wrapper.vue';
+import Index from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
index 3949bf7a5..d19c081d1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
@@ -1,16 +1,16 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
-const SettingsContent = () => import('../Wrapper.vue');
-const Index = () => import('./Index.vue');
-const AgentReports = () => import('./AgentReports.vue');
-const LabelReports = () => import('./LabelReports.vue');
-const InboxReports = () => import('./InboxReports.vue');
-const TeamReports = () => import('./TeamReports.vue');
-const CsatResponses = () => import('./CsatResponses.vue');
-const BotReports = () => import('./BotReports.vue');
-const LiveReports = () => import('./LiveReports.vue');
-const SLAReports = () => import('./SLAReports.vue');
+import SettingsContent from '../Wrapper.vue';
+import Index from './Index.vue';
+import AgentReports from './AgentReports.vue';
+import LabelReports from './LabelReports.vue';
+import InboxReports from './InboxReports.vue';
+import TeamReports from './TeamReports.vue';
+import CsatResponses from './CsatResponses.vue';
+import BotReports from './BotReports.vue';
+import LiveReports from './LiveReports.vue';
+import SLAReports from './SLAReports.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js b/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js
index 857d69ad2..6955775b9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js
@@ -1,7 +1,7 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const Index = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import Index from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js b/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
index 943c491d2..25223a864 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
@@ -1,15 +1,15 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 
-const TeamsIndex = () => import('./Index.vue');
-const CreateStepWrap = () => import('./Create/Index.vue');
-const EditStepWrap = () => import('./Edit/Index.vue');
-const CreateTeam = () => import('./Create/CreateTeam.vue');
-const EditTeam = () => import('./Edit/EditTeam.vue');
-const AddAgents = () => import('./Create/AddAgents.vue');
-const EditAgents = () => import('./Edit/EditAgents.vue');
-const FinishSetup = () => import('./FinishSetup.vue');
-const SettingsContent = () => import('../Wrapper.vue');
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
+import TeamsIndex from './Index.vue';
+import CreateStepWrap from './Create/Index.vue';
+import EditStepWrap from './Edit/Index.vue';
+import CreateTeam from './Create/CreateTeam.vue';
+import EditTeam from './Edit/EditTeam.vue';
+import AddAgents from './Create/AddAgents.vue';
+import EditAgents from './Edit/EditAgents.vue';
+import FinishSetup from './FinishSetup.vue';
+import SettingsContent from '../Wrapper.vue';
+import SettingsWrapper from '../SettingsWrapper.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/entrypoints/widget.js b/app/javascript/entrypoints/widget.js
index d62ac1c1e..5c1fac7a9 100644
--- a/app/javascript/entrypoints/widget.js
+++ b/app/javascript/entrypoints/widget.js
@@ -11,16 +11,10 @@ import { directive as onClickaway } from 'vue3-click-away';
 import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
 import { plugin, defaultConfig } from '@formkit/vue';
 
-// import { emitter } from 'shared/helpers/mitt';
-
-// https://github.com/wearebraid/vue-formulate/issues/198
-// [VITE] [TODO] Re-enable this later
-// import VueFormulate from '@braid/vue-formulate';
 import {
   startsWithPlus,
   isPhoneNumberValidWithDialCode,
 } from 'shared/helpers/Validators';
-// const PhoneInput = () => import('../widget/components/Form/PhoneInput.vue');
 
 const i18n = createI18n({
   legacy: false, // https://github.com/intlify/vue-i18n/issues/1902
diff --git a/app/javascript/v3/views/routes.js b/app/javascript/v3/views/routes.js
index 6049530be..e1f14c78e 100644
--- a/app/javascript/v3/views/routes.js
+++ b/app/javascript/v3/views/routes.js
@@ -1,10 +1,10 @@
 import { frontendURL } from 'dashboard/helper/URLHelper';
 
-const Login = () => import('./login/Index.vue');
-const Signup = () => import('./auth/signup/Index.vue');
-const ResetPassword = () => import('./auth/reset/password/Index.vue');
-const Confirmation = () => import('./auth/confirmation/Index.vue');
-const PasswordEdit = () => import('./auth/password/Edit.vue');
+import Login from './login/Index.vue';
+import Signup from './auth/signup/Index.vue';
+import ResetPassword from './auth/reset/password/Index.vue';
+import Confirmation from './auth/confirmation/Index.vue';
+import PasswordEdit from './auth/password/Edit.vue';
 
 export default [
   {

From 6df2d76c1e47aa88f1f8e4bc201de12a650cbf03 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 28 Oct 2024 14:27:08 +0530
Subject: [PATCH 12/39] feat: new colors (#10352)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
---
 .../dashboard/assets/scss/_woot.scss          | 48 ++++++++++++-------
 .../dashboard/components-next/CardLayout.vue  |  2 +-
 .../ArticlePage/ArticleHeaderControls.vue     |  1 -
 .../PortalSwitcher/PortalSwitcher.vue         |  2 +-
 .../pagination/PaginationFooter.vue           |  2 +-
 .../components-next/sidebar/ChannelLeaf.vue   |  2 +-
 .../sidebar/SidebarGroupHeader.vue            |  2 +-
 .../sidebar/SidebarGroupLeaf.vue              |  2 +-
 .../components-next/tabbar/TabBar.vue         |  8 ++--
 theme/colors.js                               |  4 +-
 10 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index 75df32cfe..95bda096d 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -46,6 +46,14 @@
   @apply hidden;
 }
 
+.n-blue-border {
+  @apply border-n-blue-border;
+}
+
+.n-blue-text {
+  @apply text-n-blue-text;
+}
+
 // scss-lint:disable PropertySortOrder
 @layer base {
   /* NEXT COLORS START */
@@ -103,24 +111,26 @@
     --teal-11: 0 133 115;
     --teal-12: 13 61 56;
 
-    --background-color: 248 248 248;
+    --background-color: 253 253 253;
+    --border-blue: 39, 129, 246, 0.5;
+    --border-container: 236, 236, 236, 1;
+    --border-strong: 235 235 235;
+    --border-weak: 234 234 234;
     --solid-1: 255 255 255;
-    --solid-2: 252 252 252;
+    --solid-2: 255 255 255;
     --solid-3: 255 255 255;
-    --solid-active: 250 251 251;
+    --solid-active: 255 255 255;
     --solid-amber: 252 232 193;
     --solid-blue: 218 236 255;
-    --white-alpha: 255 255 255 0.1;
-    --border-weak: 231 231 231;
-    --border-strong: 235 235 235;
-    --blue: 39 129 246;
+    --text-blue: 8, 109, 224, 1;
 
     /* alpha is added by default */
-    --alpha-1: 36, 38, 48, 0.06;
-    --alpha-2: 130, 134, 150, 0.12;
-    --alpha-3: 255, 255, 255, 0.9;
+    --alpha-1: 67, 67, 67, 0.06;
+    --alpha-2: 201, 202, 207, 0.15;
+    --alpha-3: 255, 255, 255, 0.96;
     --black-alpha-1: 0, 0, 0, 0.12;
     --black-alpha-2: 0, 0, 0, 0.04;
+    --white-alpha: 255, 255, 255, 0.1;
   }
 
   body.dark {
@@ -178,20 +188,22 @@
     --teal-12: 173 240 221;
 
     --background-color: 18 18 19;
+    --border-blue: 39, 129, 246, 0.5;
+    --border-container: 236, 236, 236, 0;
+    --border-strong: 52 52 52;
+    --border-weak: 38 38 42;
     --solid-1: 23 23 26;
     --solid-2: 29 30 36;
-    --solid-3: 36 38 48;
+    --solid-3: 44 45 54;
+    --solid-active: 53 57 66;
     --solid-amber: 42 37 30;
     --solid-blue: 16 49 91;
-    --solid-active: 51 53 64;
-    --border-weak: 34 34 37;
-    --border-strong: 46 47 49;
-    --blue: 126 182 255;
+    --text-blue: 126, 182, 255, 1;
 
     /* alpha is added by default */
-    --alpha-1: 35, 37, 45, 0.8;
-    --alpha-2: 130, 134, 150, 0.15;
-    --alpha-3: 32, 33, 37, 0.9;
+    --alpha-1: 36, 36, 36, 0.8;
+    --alpha-2: 139, 147, 182, 0.15;
+    --alpha-3: 36, 38, 45, 0.9;
     --black-alpha-1: 0, 0, 0, 0.3;
     --black-alpha-2: 0, 0, 0, 0.2;
     --white-alpha: 255, 255, 255, 0.1;
diff --git a/app/javascript/dashboard/components-next/CardLayout.vue b/app/javascript/dashboard/components-next/CardLayout.vue
index 9949ec86b..c3dccde80 100644
--- a/app/javascript/dashboard/components-next/CardLayout.vue
+++ b/app/javascript/dashboard/components-next/CardLayout.vue
@@ -7,7 +7,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="relative flex flex-col w-full gap-3 px-6 py-5 shadow-sm group/cardLayout rounded-2xl bg-n-solid-1"
+    class="relative flex flex-col w-full gap-3 px-6 py-5 shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
     @click="handleClick"
   >
     <slot name="header" />
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue
index 59a5db020..49ea035b8 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue
@@ -137,7 +137,6 @@ const handleTabChange = value => {
 <template>
   <div class="flex flex-col items-start w-full gap-2 lg:flex-row">
     <TabBar
-      class="bg-n-solid-1"
       :tabs="tabs"
       :initial-active-tab="activeTabIndex"
       @tab-changed="handleTabChange"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
index 49552679d..eeb2f845e 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
@@ -83,7 +83,7 @@ const redirectToPortalHomePage = () => {
 
 <template>
   <div
-    class="pt-5 pb-3 bg-n-alpha-3 backdrop-blur-[100px] z-50 absolute w-[440px] rounded-xl shadow-md flex flex-col gap-4"
+    class="pt-5 pb-3 bg-n-alpha-3 backdrop-blur-[100px] outline outline-n-container outline-1 z-50 absolute w-[440px] rounded-xl shadow-md flex flex-col gap-4"
   >
     <div
       class="flex items-center justify-between gap-4 px-6 pb-3 border-b border-n-alpha-2"
diff --git a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
index 578545d3d..986b26f90 100644
--- a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
+++ b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
@@ -56,7 +56,7 @@ const pageInfo = computed(() => {
 
 <template>
   <div
-    class="flex justify-between h-12 w-full max-w-[957px] mx-auto bg-n-solid-2 rounded-xl py-2 ltr:pl-4 rtl:pr-4 ltr:pr-3 rtl:pl-3 items-center"
+    class="flex justify-between h-12 w-full max-w-[957px] outline outline-n-container outline-1 mx-auto bg-n-solid-2 rounded-xl py-2 ltr:pl-4 rtl:pr-4 ltr:pr-3 rtl:pl-3 items-center"
   >
     <div class="flex items-center gap-3">
       <span class="min-w-0 text-sm font-normal line-clamp-1 text-n-slate-11">
diff --git a/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue b/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
index 2ae5bd0c5..e3a2430a5 100644
--- a/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
+++ b/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
@@ -56,7 +56,7 @@ const reauthorizationRequired = computed(() => {
 <template>
   <span
     class="size-4 grid place-content-center rounded-full bg-n-alpha-2"
-    :class="{ 'bg-n-blue/20': active }"
+    :class="{ 'bg-n-solid-blue': active }"
   >
     <Icon :icon="channelIcon" class="size-3" />
   </span>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
index 289ec73a4..160483a6a 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
@@ -22,7 +22,7 @@ const emit = defineEmits(['toggle']);
     :to="to"
     :title="label"
     :class="{
-      'text-n-blue bg-n-alpha-2 font-medium': isActive && !hasActiveChild,
+      'n-blue-text bg-n-alpha-2 font-medium': isActive && !hasActiveChild,
       'text-n-slate-12 font-medium': hasActiveChild,
       'text-n-slate-11 hover:bg-n-alpha-2': !isActive && !hasActiveChild,
     }"
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
index 13c893fa5..ec630d2a5 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
@@ -32,7 +32,7 @@ const shouldRenderComponent = computed(() => {
       :title="label"
       class="flex h-8 items-center gap-2 px-2 py-1 rounded-lg max-w-[151px] hover:bg-gradient-to-r from-transparent via-n-slate-3/70 to-n-slate-3/70 group"
       :class="{
-        'text-n-blue bg-n-alpha-2 active': active,
+        'n-blue-text bg-n-alpha-2 active': active,
       }"
     >
       <component
diff --git a/app/javascript/dashboard/components-next/tabbar/TabBar.vue b/app/javascript/dashboard/components-next/tabbar/TabBar.vue
index 3779f7e6b..78defbba1 100644
--- a/app/javascript/dashboard/components-next/tabbar/TabBar.vue
+++ b/app/javascript/dashboard/components-next/tabbar/TabBar.vue
@@ -37,14 +37,14 @@ const showDivider = index => {
 </script>
 
 <template>
-  <div class="flex h-8 rounded-lg bg-n-solid-1 w-fit">
+  <div class="flex items-center h-8 rounded-lg bg-n-alpha-1 w-fit">
     <template v-for="(tab, index) in tabs" :key="index">
       <button
-        class="relative px-4 truncate py-1.5 text-sm border-0 rounded-lg transition-colors duration-300 ease-in-out hover:text-n-brand"
+        class="relative px-4 truncate py-1.5 text-sm border-0 outline-1 outline rounded-lg transition-colors duration-300 ease-in-out hover:text-n-brand"
         :class="[
           activeTab === index
-            ? 'text-n-brand bg-n-solid-active font-medium'
-            : 'text-n-slate-10',
+            ? 'text-n-brand bg-n-solid-active outline-n-container dark:outline-transparent'
+            : 'text-n-slate-10 outline-transparent h-8',
         ]"
         @click="selectTab(index)"
       >
diff --git a/theme/colors.js b/theme/colors.js
index 9cec648dc..150106c65 100644
--- a/theme/colors.js
+++ b/theme/colors.js
@@ -347,7 +347,6 @@ export const colors = {
 
     black: '#000000',
     brand: '#2781F6',
-    blue: 'rgb(var(--blue) / <alpha-value>)',
     background: 'rgb(var(--background-color) / <alpha-value>)',
     solid: {
       1: 'rgb(var(--solid-1) / <alpha-value>)',
@@ -366,6 +365,9 @@ export const colors = {
       white: 'rgba(var(--white-alpha))',
     },
     weak: 'rgb(var(--border-weak) / <alpha-value>)',
+    container: 'rgba(var(--border-container))',
     strong: 'rgb(var(--border-strong) / <alpha-value>)',
+    'blue-border': 'rgba(var(--border-blue))',
+    'blue-text': 'rgba(var(--text-blue))',
   },
 };

From 7ba6c1d87d87fc232911561fd4977b5670d8e713 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 29 Oct 2024 09:11:43 +0530
Subject: [PATCH 13/39] fix: Fix the issues with the new sidebar (#10348)

Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../sidebar/SidebarAccountSwitcher.vue        | 20 ++++++++++++-------
 .../components-next/sidebar/SidebarGroup.vue  | 13 ++++++------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue b/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
index 881034b4c..8e99977dd 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
@@ -56,10 +56,10 @@ const emitNewAccount = () => {
     </button>
     <div v-if="showDropdown" v-on-clickaway="close" class="absolute top-8 z-50">
       <div
-        class="w-72 text-sm block bg-n-solid-1 border border-n-weak rounded-xl shadow-sm"
+        class="min-w-72 max-w-96 text-sm bg-n-solid-1 border border-n-weak rounded-xl shadow-sm py-4 px-2 flex flex-col gap-2"
       >
         <div
-          class="px-4 pt-3 pb-2 leading-4 font-medium tracking-[0.2px] text-n-slate-10 text-xs"
+          class="px-4 leading-4 font-medium tracking-[0.2px] text-n-slate-10 text-xs"
         >
           {{ t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
         </div>
@@ -73,12 +73,19 @@ const emitNewAccount = () => {
           >
             <div
               :for="account.name"
-              class="text-left rtl:text-right flex gap-2"
+              class="text-left rtl:text-right flex gap-2 items-center"
             >
-              <span class="text-n-slate-12">
+              <span
+                class="text-n-slate-12 max-w-36 truncate min-w-0"
+                :title="account.name"
+              >
                 {{ account.name }}
               </span>
-              <span class="text-n-slate-11 capitalize">
+              <div class="flex-shrink-0 w-px h-3 bg-n-strong" />
+              <span
+                class="text-n-slate-11 max-w-24 truncate capitalize"
+                :title="account.name"
+              >
                 {{
                   account.custom_role_id
                     ? account.custom_role.name
@@ -93,9 +100,8 @@ const emitNewAccount = () => {
             />
           </button>
         </div>
-        <div class="px-2 mt-2 pb-2">
+        <div v-if="globalConfig.createNewAccountFromDashboard" class="px-2">
           <ButtonNext
-            v-if="globalConfig.createNewAccountFromDashboard"
             variant="secondary"
             class="w-full"
             size="sm"
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
index 3736b9d70..f4ffcd0cd 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
@@ -28,11 +28,12 @@ const {
 
 const parentEl = ref(null);
 
-const locateLastChild = () => {
-  parentEl.value?.querySelectorAll('.child-item').forEach((child, index) => {
-    if (index === parentEl.value.querySelectorAll('.child-item').length - 1) {
-      child.classList.add('last-child-item');
-    }
+const locateLastChild = async () => {
+  const children = parentEl.value?.querySelectorAll('.child-item');
+  if (!children) return;
+
+  children.forEach((child, index) => {
+    child.classList.toggle('last-child-item', index === children.length - 1);
   });
 };
 
@@ -103,7 +104,7 @@ const toggleTrigger = () => {
   setExpandedItem(props.name);
 };
 
-watch(expandedItem, locateLastChild, {
+watch([expandedItem, accessibleItems], locateLastChild, {
   immediate: true,
 });
 </script>

From c6c36b1b36b90e057008fc656c53ec75a271a123 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 28 Oct 2024 20:42:11 -0700
Subject: [PATCH 14/39] chore(deps): bump rexml from 3.3.6 to 3.3.9 (#10361)

---
 Gemfile.lock | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index fff84d3a8..41140bdda 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -633,8 +633,7 @@ GEM
     retriable (3.1.2)
     reverse_markdown (2.1.1)
       nokogiri
-    rexml (3.3.6)
-      strscan
+    rexml (3.3.9)
     rspec-core (3.13.0)
       rspec-support (~> 3.13.0)
     rspec-expectations (3.13.2)
@@ -764,7 +763,6 @@ GEM
     stackprof (0.2.25)
     statsd-ruby (1.5.0)
     stripe (8.5.0)
-    strscan (3.1.0)
     telephone_number (1.4.20)
     test-prof (1.2.1)
     thor (1.3.1)

From 035a03731388a9198938c59d4f4ac4bdb02e409c Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 29 Oct 2024 09:13:47 +0530
Subject: [PATCH 15/39] fix: Use addEventListener instead of onmessage to
 listen to chatwoot-dashboard-app:fetch-info (#10342)

---
 .../components/widgets/DashboardApp/Frame.vue | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue b/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
index 13caa41ff..f477a1dcc 100644
--- a/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
+++ b/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
@@ -1,5 +1,6 @@
 <script>
 import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
+
 export default {
   components: {
     LoadingState,
@@ -51,19 +52,19 @@ export default {
       }
     },
   },
-
   mounted() {
-    window.onmessage = e => {
-      if (
-        typeof e.data !== 'string' ||
-        e.data !== 'chatwoot-dashboard-app:fetch-info'
-      ) {
-        return;
-      }
-      this.onIframeLoad(0);
-    };
+    window.addEventListener('message', this.triggerEvent);
+  },
+  unmounted() {
+    window.removeEventListener('message', this.triggerEvent);
   },
   methods: {
+    triggerEvent(event) {
+      if (!this.isVisible) return;
+      if (event.data === 'chatwoot-dashboard-app:fetch-info') {
+        this.onIframeLoad(0);
+      }
+    },
     getFrameId(index) {
       return `dashboard-app--frame-${this.position}-${index}`;
     },

From f73798a1aab594211fbc2b7841b232a12b5a8598 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 29 Oct 2024 09:34:43 +0530
Subject: [PATCH 16/39] feat(v4): Help center portal redesign improvements
 (#10349)

---
 .../HelpCenter/ArticleCard/ArticleCard.vue    |  3 +-
 .../ArticleEditorControls.vue                 | 95 ++++++++++++++-----
 .../Pages/ArticlePage/ArticlesPage.vue        | 12 ++-
 .../Pages/LocalePage/LocalesPage.vue          | 13 ++-
 .../PortalSwitcher/PortalSwitcher.vue         | 31 ++++--
 .../components-next/thumbnail/Thumbnail.vue   |  5 +
 .../dashboard/i18n/locale/en/components.json  |  5 +
 .../dashboard/i18n/locale/en/helpCenter.json  | 12 +--
 .../dashboard/helpcenter/helpcenter.routes.js |  2 +-
 .../FluentIcon/dashboard-icons.json           |  3 +-
 10 files changed, 139 insertions(+), 42 deletions(-)

diff --git a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
index 4dbac9993..38bc854d7 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
@@ -30,7 +30,7 @@ const props = defineProps({
   },
   author: {
     type: Object,
-    required: true,
+    default: null,
   },
   category: {
     type: Object,
@@ -157,7 +157,6 @@ const handleClick = id => {
         <div class="flex items-center gap-4">
           <div class="flex items-center gap-1">
             <Thumbnail
-              v-if="author"
               :author="author"
               :name="authorName"
               :src="authorThumbnailSrc"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
index 7b03893f2..381283419 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
@@ -1,6 +1,7 @@
 <script setup>
-import { computed, ref } from 'vue';
+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';
 
@@ -19,6 +20,7 @@ const props = defineProps({
 const emit = defineEmits(['saveArticle', 'setAuthor', 'setCategory']);
 
 const { t } = useI18n();
+const route = useRoute();
 
 const openAgentsList = ref(false);
 const openCategoryList = ref(false);
@@ -36,13 +38,15 @@ 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 || currentUser.value;
+  return props.article?.author || null;
 });
 
 const authorName = computed(
@@ -51,24 +55,52 @@ const authorName = computed(
 const authorThumbnailSrc = computed(() => author.value?.thumbnail);
 
 const agentList = computed(() => {
-  return [...agents.value]
-    .sort((a, b) => a.name.localeCompare(b.name))
-    .map(agent => ({
-      label: agent.name,
-      value: agent.id,
-      thumbnail: { name: agent.name, src: agent.thumbnail },
-      isSelected: agent.id === props.article?.author?.id,
-      action: 'assignAuthor',
-    }))
-    .sort((a, b) => b.isSelected - a.isSelected);
+  return (
+    agents.value
+      ?.map(({ name, id, thumbnail }) => ({
+        label: name,
+        value: id,
+        thumbnail: { name, src: thumbnail },
+        isSelected:
+          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 > 0;
+  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
@@ -81,15 +113,20 @@ const selectedCategory = computed(() => {
 });
 
 const categoryList = computed(() => {
-  return categories.value
-    .map(category => ({
-      label: category.name,
-      value: category.id,
-      emoji: category.icon,
-      isSelected: category.id === props.article?.category?.id,
-      action: 'assignCategory',
-    }))
-    .sort((a, b) => b.isSelected - a.isSelected);
+  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(() => {
@@ -124,6 +161,19 @@ const handleArticleAction = ({ action, value }) => {
 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>
@@ -139,7 +189,6 @@ const updateMeta = meta => {
         >
           <template #leftPrefix>
             <Thumbnail
-              v-if="author"
               :author="author"
               :name="authorName"
               :size="20"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue
index bca348ba9..9f76cf41f 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue
@@ -114,15 +114,23 @@ 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 = () =>
-  router.push({ name: 'portals_articles_new' });
+
+const navigateToNewArticlePage = () => {
+  const { categorySlug, locale } = route.params;
+  router.push({
+    name: 'portals_articles_new',
+    params: { categorySlug, locale },
+  });
+};
 </script>
 
 <template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue
index 3b1506224..5492d2f46 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue
@@ -1,7 +1,10 @@
 <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';
 
@@ -18,6 +21,8 @@ const props = defineProps({
 
 const addLocaleDialogRef = ref(null);
 
+const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
+
 const openAddLocaleDialog = () => {
   addLocaleDialogRef.value.dialogRef.open();
 };
@@ -43,7 +48,13 @@ const localeCount = computed(() => props.locales?.length);
       </div>
     </template>
     <template #content>
-      <LocaleList :locales="locales" :portal="portal" />
+      <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>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
index eeb2f845e..eaf24f4c2 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { useMapGetter, useStore } from 'dashboard/composables/store.js';
+import { buildPortalURL } from 'dashboard/helper/portalHelper';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
@@ -25,6 +26,10 @@ const portals = useMapGetter('portals/allPortals');
 
 const currentPortalSlug = computed(() => route.params.portalSlug);
 
+const portalLink = computed(() => {
+  return buildPortalURL(currentPortalSlug.value);
+});
+
 const isPortalActive = portal => {
   return portal.slug === currentPortalSlug.value;
 };
@@ -71,6 +76,10 @@ const openCreatePortalDialog = () => {
   emit('close');
 };
 
+const onClickPreviewPortal = () => {
+  window.open(portalLink.value, '_blank');
+};
+
 const redirectToPortalHomePage = () => {
   router.push({
     name: 'portals_index',
@@ -89,12 +98,22 @@ const redirectToPortalHomePage = () => {
       class="flex items-center justify-between gap-4 px-6 pb-3 border-b border-n-alpha-2"
     >
       <div class="flex flex-col gap-1">
-        <h2
-          class="text-base font-medium cursor-pointer text-slate-900 dark:text-slate-50 w-fit hover:underline"
-          @click="redirectToPortalHomePage"
-        >
-          {{ t('HELP_CENTER.PORTAL_SWITCHER.PORTALS') }}
-        </h2>
+        <div class="flex items-center gap-2">
+          <h2
+            class="text-base font-medium cursor-pointer text-slate-900 dark:text-slate-50 w-fit hover:underline"
+            @click="redirectToPortalHomePage"
+          >
+            {{ t('HELP_CENTER.PORTAL_SWITCHER.PORTALS') }}
+          </h2>
+          <Button
+            icon="arrow-up-right-lucide"
+            variant="ghost"
+            icon-lib="lucide"
+            size="sm"
+            class="!w-6 !h-6 hover:bg-n-slate-2 text-n-slate-11 !p-0.5 rounded-md"
+            @click="onClickPreviewPortal"
+          />
+        </div>
         <p class="text-sm text-slate-600 dark:text-slate-300">
           {{ t('HELP_CENTER.PORTAL_SWITCHER.CREATE_PORTAL') }}
         </p>
diff --git a/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue b/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue
index 72ba0c9ee..ebab04e17 100644
--- a/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue
+++ b/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { removeEmoji } from 'shared/helpers/emoji';
 
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
@@ -30,6 +31,9 @@ const props = defineProps({
     default: '',
   },
 });
+
+const { t } = useI18n();
+
 const hasImageLoaded = ref(false);
 const imgError = ref(false);
 
@@ -108,6 +112,7 @@ const onImgLoad = () => {
     </div>
     <div
       v-else
+      v-tooltip.top-start="t('THUMBNAIL.AUTHOR.NOT_AVAILABLE')"
       class="flex items-center justify-center w-4 h-4 rounded-full bg-slate-100 dark:bg-slate-700/50"
     >
       <FluentIcon
diff --git a/app/javascript/dashboard/i18n/locale/en/components.json b/app/javascript/dashboard/i18n/locale/en/components.json
index 43f962735..1ff9e331d 100644
--- a/app/javascript/dashboard/i18n/locale/en/components.json
+++ b/app/javascript/dashboard/i18n/locale/en/components.json
@@ -14,6 +14,11 @@
       "CONFIRM": "Confirm"
     }
   },
+  "THUMBNAIL": {
+    "AUTHOR": {
+      "NOT_AVAILABLE": "Author is not available"
+    }
+  },
   "BREADCRUMB": {
     "ARIA_LABEL": "Breadcrumb"
   }
diff --git a/app/javascript/dashboard/i18n/locale/en/helpCenter.json b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
index ddfc0cfa0..8fa64108b 100644
--- a/app/javascript/dashboard/i18n/locale/en/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
@@ -532,20 +532,20 @@
           "BUTTON_LABEL": "New article"
         },
         "MINE": {
-          "TITLE": "There are no articles in mine",
-          "SUBTITLE": "Mine articles will appear here"
+          "TITLE": "You haven't written any articles here",
+          "SUBTITLE": "All articles written by you show up here for quick access."
         },
         "DRAFT": {
-          "TITLE": "There are no articles in draft",
+          "TITLE": "There are no articles in drafts",
           "SUBTITLE": "Draft articles will appear here"
         },
         "PUBLISHED": {
-          "TITLE": "There are no articles in published",
+          "TITLE": "There are no published articles",
           "SUBTITLE": "Published articles will appear here"
         },
         "ARCHIVED": {
-          "TITLE": "There are no articles in archived",
-          "SUBTITLE": "Archived articles will appear here"
+          "TITLE": "There are no articles in the archive",
+          "SUBTITLE": "Archived articles don't show up on the portal, you can use it to mark deprecated or outdated pages"
         },
         "CATEGORY": {
           "TITLE": "There are no articles in this category",
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
index b0758aa9c..d1c575fae 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
@@ -31,7 +31,7 @@ const portalRoutes = [
     component: PortalsArticlesIndexPage,
   },
   {
-    path: getPortalRoute(':portalSlug/:locale/articles/new'),
+    path: getPortalRoute(':portalSlug/:locale/:categorySlug?/articles/new'),
     name: 'portals_articles_new',
     meta: {
       permissions: ['administrator', 'agent', 'knowledge_base_manage'],
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index 468fbb7a0..fa0280412 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -300,5 +300,6 @@
     "m2 22l1-1h3l9-9M3 21v-3l9-9",
     "m15 6l3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3z"
   ],
-  "building-lucide-outline": "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Zm0-10H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2M10 6h4m-4 4h4m-4 4h4m-4 4h4"
+  "building-lucide-outline": "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Zm0-10H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2M10 6h4m-4 4h4m-4 4h4m-4 4h4",
+  "arrow-up-right-lucide-outline": "M7 7h10v10M7 17L17 7"
 }

From 0689f59a0519e635c6f7a19a6155233dfb845aa0 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 29 Oct 2024 14:00:24 +0530
Subject: [PATCH 17/39] feat: Update button component (#10362)

---
 .../HelpCenter/ArticleCard/ArticleCard.vue    |  38 +--
 .../HelpCenter/CategoryCard/CategoryCard.vue  |  10 +-
 .../EmptyState/Article/ArticleEmptyState.vue  |   7 +-
 .../EmptyState/Portal/PortalEmptyState.vue    |   3 +-
 .../HelpCenter/HelpCenterLayout.vue           |   6 +-
 .../HelpCenter/LocaleCard/LocaleCard.vue      |  14 +-
 .../ArticleEditorControls.vue                 |  51 ++--
 .../ArticleEditorPage/ArticleEditorHeader.vue |  11 +-
 .../ArticleEditorProperties.vue               |   6 +-
 .../ArticlePage/ArticleHeaderControls.vue     |  16 +-
 .../Pages/CategoryPage/CategoryForm.vue       |  12 +-
 .../CategoryPage/CategoryHeaderControls.vue   |  11 +-
 .../Pages/LocalePage/LocalesPage.vue          |   2 +-
 .../PortalSettingsPage/PortalBaseSettings.vue |  45 ++--
 .../PortalConfigurationSettings.vue           |   4 +-
 .../PortalSettingsPage/PortalSettings.vue     |   4 +-
 .../PortalSwitcher/PortalSwitcher.vue         |  39 ++--
 .../components-next/avatar/EditableAvatar.vue |  26 +--
 .../components-next/breadcrumb/Breadcrumb.vue |  23 +-
 .../components-next/button/Button.story.vue   | 190 ++++++++-------
 .../components-next/button/Button.vue         | 219 ++++++++++--------
 .../colorpicker/ColorPicker.vue               |  17 +-
 .../components-next/combobox/ComboBox.vue     |  28 +--
 .../components-next/dialog/Dialog.vue         |   7 +-
 .../dropdown-menu/DropdownMenu.vue            |  39 ++--
 .../dashboard/components-next/input/Input.vue |   4 +-
 .../pagination/PaginationFooter.vue           |  16 +-
 .../components-next/tabbar/TabBar.vue         |   4 +-
 .../components-next/taginput/TagInput.vue     |   7 +-
 .../components-next/thumbnail/Thumbnail.vue   |  25 +-
 .../dashboard/helper/portalHelper.js          |  20 +-
 package.json                                  |   9 +-
 pnpm-lock.yaml                                |  51 ++--
 tailwind.config.js                            |   1 +
 34 files changed, 477 insertions(+), 488 deletions(-)

diff --git a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
index 38bc854d7..bd29b5897 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { computed, ref } from 'vue';
-import { OnClickOutside } from '@vueuse/components';
 import { useI18n } from 'vue-i18n';
 import { dynamicTime } from 'shared/helpers/timeHelper';
 import {
@@ -9,11 +8,11 @@ import {
   ARTICLE_STATUSES,
 } from 'dashboard/helper/portalHelper';
 
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 
 const props = defineProps({
   id: {
@@ -72,11 +71,11 @@ const articleMenuItems = computed(() => {
 const statusTextColor = computed(() => {
   switch (props.status) {
     case 'archived':
-      return '!text-n-slate-12';
+      return 'text-n-slate-12';
     case 'draft':
-      return '!text-n-amber-11';
+      return 'text-n-amber-11';
     default:
-      return '!text-n-teal-11';
+      return 'text-n-teal-11';
   }
 });
 
@@ -127,19 +126,28 @@ const handleClick = id => {
     <template #header>
       <div class="flex justify-between gap-1">
         <span
-          class="text-base cursor-pointer hover:underline text-n-slate-12 line-clamp-1"
+          class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12 line-clamp-1"
           @click="handleClick(id)"
         >
           {{ title }}
         </span>
-        <div class="relative group" @click.stop>
-          <OnClickOutside @trigger="isOpen = false">
+        <div class="flex items-center gap-2">
+          <span
+            class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"
+            :class="statusTextColor"
+          >
+            {{ statusText }}
+          </span>
+          <div
+            v-on-clickaway="() => (isOpen = false)"
+            class="relative flex items-center group"
+            @click.stop
+          >
             <Button
-              variant="ghost"
-              size="sm"
-              class="text-xs font-medium bg-n-alpha-2 hover:bg-n-alpha-1 !h-6 rounded-md border-0 !px-2 !py-0.5"
-              :label="statusText"
-              :class="statusTextColor"
+              icon="i-lucide-ellipsis-vertical"
+              color="slate"
+              size="xs"
+              class="group-hover:bg-n-solid-2 !p-0.5 rounded-md"
               @click="isOpen = !isOpen"
             />
             <DropdownMenu
@@ -148,7 +156,7 @@ const handleClick = id => {
               class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full"
               @action="handleArticleAction($event)"
             />
-          </OnClickOutside>
+          </div>
         </div>
       </div>
     </template>
@@ -171,7 +179,7 @@ const handleClick = id => {
           <div
             class="inline-flex items-center gap-1 text-n-slate-11 whitespace-nowrap"
           >
-            <FluentIcon icon="eye-show" size="18" />
+            <Icon icon="i-lucide-eye" class="size-4" />
             <span class="text-sm">
               {{
                 t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.VIEWS', {
diff --git a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
index c7e9dfb32..9d800dbab 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
@@ -84,7 +84,7 @@ const handleAction = ({ action, value }) => {
         <div class="flex justify-between w-full gap-1">
           <div class="flex items-center justify-start gap-2">
             <span
-              class="text-base cursor-pointer hover:underline text-slate-900 dark:text-slate-50 line-clamp-1"
+              class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12 line-clamp-1"
               @click="handleClick(slug)"
             >
               {{ categoryTitleWithIcon }}
@@ -102,10 +102,10 @@ const handleAction = ({ action, value }) => {
           <div class="relative group" @click.stop>
             <OnClickOutside @trigger="isOpen = false">
               <Button
-                variant="ghost"
-                size="sm"
-                icon="more-vertical"
-                class="w-8 z-60 group-hover:bg-slate-100 dark:group-hover:bg-slate-800"
+                icon="i-lucide-ellipsis-vertical"
+                color="slate"
+                size="xs"
+                class="rounded-md group-hover:bg-n-solid-2"
                 @click="isOpen = !isOpen"
               />
               <DropdownMenu
diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue
index 68fd7b0bb..baa4d1691 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue
@@ -49,12 +49,7 @@ const onClick = () => {
     </template>
     <template #actions>
       <div v-if="showButton">
-        <Button
-          variant="default"
-          :label="buttonLabel"
-          icon="add"
-          @click="onClick"
-        />
+        <Button :label="buttonLabel" icon="i-lucide-plus" @click="onClick" />
       </div>
     </template>
   </EmptyStateLayout>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue
index edd43284a..eb266a5fc 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue
@@ -59,9 +59,8 @@ const onPortalCreate = ({ slug: portalSlug, locale }) => {
     </template>
     <template #actions>
       <Button
-        variant="default"
         :label="$t('HELP_CENTER.NEW_PAGE.CREATE_PORTAL_BUTTON')"
-        icon="add"
+        icon="i-lucide-plus"
         @click="openDialog"
       />
       <CreatePortalDialog
diff --git a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
index df8348629..3690bc571 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
@@ -74,10 +74,10 @@ const togglePortalSwitcher = () => {
           <div v-if="activePortalName" class="relative group">
             <OnClickOutside @trigger="showPortalSwitcher = false">
               <Button
-                icon="chevron-lucide-down"
+                icon="i-lucide-chevron-down"
                 variant="ghost"
-                icon-lib="lucide"
-                class="!w-6 !h-6 group-hover:bg-n-solid-2 !p-0.5 rounded-md"
+                size="xs"
+                class="rounded-md group-hover:bg-n-slate-3 hover:bg-n-slate-3"
                 @click="togglePortalSwitcher"
               />
 
diff --git a/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue b/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
index 1b0b5b435..7176304b1 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
@@ -52,7 +52,7 @@ const handleAction = ({ action, value }) => {
 </script>
 
 <template>
-  <CardLayout class="ltr:pr-2 rtl:pl-2">
+  <CardLayout>
     <template #header>
       <div class="flex justify-between gap-2">
         <div class="flex items-center justify-start gap-2">
@@ -63,12 +63,12 @@ const handleAction = ({ action, value }) => {
           </span>
           <span
             v-if="isDefault"
-            class="bg-slate-100 dark:bg-slate-800 h-6 inline-flex items-center justify-center rounded-md text-xs border-px border-transparent text-woot-500 dark:text-woot-400 px-2 py-0.5"
+            class="bg-n-alpha-2 h-6 inline-flex items-center justify-center rounded-md text-xs border-px border-transparent text-n-blue-text px-2 py-0.5"
           >
             {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DEFAULT') }}
           </span>
         </div>
-        <div class="flex items-center justify-end gap-2">
+        <div class="flex items-center justify-end gap-4">
           <div class="flex items-center gap-4">
             <span
               class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
@@ -95,10 +95,10 @@ const handleAction = ({ action, value }) => {
           <div class="relative group">
             <OnClickOutside @trigger="showDropdownMenu = false">
               <Button
-                variant="ghost"
-                size="sm"
-                icon="more-vertical"
-                class="w-8 group-hover:bg-slate-100 dark:group-hover:bg-slate-800"
+                icon="i-lucide-ellipsis-vertical"
+                color="slate"
+                size="xs"
+                class="rounded-md group-hover:bg-n-solid-2"
                 @click="showDropdownMenu = !showDropdownMenu"
               />
 
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
index 381283419..db45ee6b7 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
@@ -61,9 +61,9 @@ const agentList = computed(() => {
         label: name,
         value: id,
         thumbnail: { name, src: thumbnail },
-        isSelected:
-          id === props.article?.author?.id ||
-          id === (selectedAuthorId.value || currentUserId.value),
+        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)
@@ -181,20 +181,23 @@ onMounted(() => {
     <div class="relative flex items-center gap-2">
       <OnClickOutside @trigger="openAgentsList = false">
         <Button
-          :label="authorName"
           variant="ghost"
-          class="!px-0 font-normal"
+          class="!px-0 font-normal hover:!bg-transparent"
           text-variant="info"
           @click="openAgentsList = !openAgentsList"
         >
-          <template #leftPrefix>
-            <Thumbnail
-              :author="author"
-              :name="authorName"
-              :size="20"
-              :src="authorThumbnailSrc"
-            />
-          </template>
+          <Thumbnail
+            :author="author"
+            :name="authorName"
+            :size="20"
+            :src="authorThumbnailSrc"
+          />
+          <span
+            v-if="author"
+            class="text-sm text-n-slate-12 hover:text-n-slate-11"
+          >
+            {{ author.available_name }}
+          </span>
         </Button>
         <DropdownMenu
           v-if="openAgentsList && hasAgentList"
@@ -212,13 +215,20 @@ onMounted(() => {
             selectedCategory?.name ||
             t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')
           "
-          :emoji="selectedCategory?.icon || ''"
-          :icon="!selectedCategory?.icon ? 'play-shape' : ''"
+          :icon="!selectedCategory?.icon ? 'i-lucide-shapes' : ''"
           variant="ghost"
-          class="!px-2 font-normal"
-          text-variant="info"
+          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"
@@ -235,11 +245,10 @@ onMounted(() => {
           :label="
             t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.MORE_PROPERTIES')
           "
-          icon="add"
+          icon="i-lucide-plus"
           variant="ghost"
           :disabled="isNewArticle"
-          text-variant="info"
-          class="!px-2 font-normal"
+          class="!px-2 font-normal hover:!bg-transparent hover:!text-n-slate-11"
           @click="openProperties = !openProperties"
         />
         <ArticleEditorProperties
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue
index 03af2558d..cfaa4ce11 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue
@@ -118,11 +118,11 @@ const updateArticleStatus = async ({ value }) => {
   <div class="flex items-center justify-between h-20">
     <Button
       :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.BACK_TO_ARTICLES')"
-      icon="chevron-lucide-left"
-      icon-lib="lucide"
+      icon="i-lucide-chevron-left"
       variant="link"
-      text-variant="info"
+      color="slate"
       size="sm"
+      class="ltr:pl-3 rtl:pr-3"
       @click="onClickGoBack"
     />
     <div class="flex items-center gap-4">
@@ -135,7 +135,7 @@ const updateArticleStatus = async ({ value }) => {
       <div class="flex items-center gap-2">
         <Button
           :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PREVIEW')"
-          variant="secondary"
+          color="slate"
           size="sm"
           :disabled="!articleId"
           @click="previewArticle"
@@ -156,8 +156,7 @@ const updateArticleStatus = async ({ value }) => {
           <div class="relative">
             <OnClickOutside @trigger="showArticleActionMenu = false">
               <Button
-                icon="chevron-lucide-down"
-                icon-lib="lucide"
+                icon="i-lucide-chevron-down"
                 size="sm"
                 :disabled="!articleId"
                 class="ltr:rounded-l-none rtl:rounded-r-none"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
index cc6bc0f4b..123aa7874 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
@@ -63,10 +63,10 @@ onMounted(() => {
         }}
       </h3>
       <Button
-        icon="dismiss"
+        icon="i-lucide-x"
         size="sm"
         variant="ghost"
-        class="w-8 hover:text-n-slate-11"
+        class="hover:text-n-slate-11"
         @click="emit('close')"
       />
     </div>
@@ -89,7 +89,7 @@ onMounted(() => {
                 'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_DESCRIPTION_PLACEHOLDER'
               )
             "
-            class="w-[224px]"
+            class="w-[220px]"
             custom-text-area-wrapper-class="!p-0 !border-0 !rounded-none !bg-transparent transition-none"
             custom-text-area-class="max-h-[150px]"
             auto-height
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue
index 49ea035b8..5e7feb9fa 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue
@@ -148,10 +148,9 @@ const handleTabChange = value => {
             <Button
               :label="activeLocaleName"
               size="sm"
-              icon-position="right"
-              icon="chevron-lucide-down"
-              icon-lib="lucide"
-              variant="secondary"
+              icon="i-lucide-chevron-down"
+              color="slate"
+              trailing-icon
               @click="isLocaleMenuOpen = !isLocaleMenuOpen"
             />
 
@@ -167,11 +166,10 @@ const handleTabChange = value => {
           <OnClickOutside @trigger="isCategoryMenuOpen = false">
             <Button
               :label="activeCategoryName"
+              icon="i-lucide-chevron-down"
               size="sm"
-              icon-position="right"
-              icon="chevron-lucide-down"
-              icon-lib="lucide"
-              variant="secondary"
+              color="slate"
+              trailing-icon
               class="max-w-48"
               @click="isCategoryMenuOpen = !isCategoryMenuOpen"
             />
@@ -187,7 +185,7 @@ const handleTabChange = value => {
       </div>
       <Button
         :label="t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.NEW_ARTICLE')"
-        icon="add"
+        icon="i-lucide-plus"
         size="sm"
         @click="handleNewArticle"
       />
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
index 35dddd3b1..c07367bdc 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
@@ -198,10 +198,10 @@ defineExpose({ state, isSubmitDisabled });
             <OnClickOutside @trigger="isEmojiPickerOpen = false">
               <Button
                 :label="state.icon"
-                variant="secondary"
+                color="slate"
                 size="sm"
-                :icon="!state.icon ? 'emoji-add' : ''"
-                class="!h-[38px] !w-[38px] absolute top-[31px] !rounded-[7px] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
+                :icon="!state.icon ? 'i-lucide-smile-plus' : ''"
+                class="!h-[38px] !w-[38px] absolute top-[31px] !outline-none !rounded-[7px] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
                 @click="isEmojiPickerOpen = !isEmojiPickerOpen"
               />
               <EmojiInput
@@ -243,10 +243,10 @@ defineExpose({ state, isSubmitDisabled });
         class="flex items-center justify-between w-full gap-3"
       >
         <Button
-          variant="ghost"
+          variant="faded"
+          color="slate"
           :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.BUTTONS.CANCEL')"
-          text-variant="default"
-          class="w-full bg-n-alpha-2 hover:bg-n-alpha-3"
+          class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
           @click="handleCancel"
         />
         <Button
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue
index 043aa1391..51134faec 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue
@@ -133,10 +133,9 @@ const handleBreadcrumbClick = () => {
           <Button
             :label="activeLocaleName"
             size="sm"
-            icon-position="right"
-            icon="chevron-lucide-down"
-            icon-lib="lucide"
-            variant="secondary"
+            trailing-icon
+            icon="i-lucide-chevron-down"
+            color="slate"
             @click="isLocaleMenuOpen = !isLocaleMenuOpen"
           />
           <DropdownMenu
@@ -165,7 +164,7 @@ const handleBreadcrumbClick = () => {
       <OnClickOutside @trigger="isCreateCategoryDialogOpen = false">
         <Button
           :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.NEW_CATEGORY')"
-          icon="add"
+          icon="i-lucide-plus"
           size="sm"
           @click="isCreateCategoryDialogOpen = !isCreateCategoryDialogOpen"
         />
@@ -183,7 +182,7 @@ const handleBreadcrumbClick = () => {
       <OnClickOutside @trigger="isEditCategoryDialogOpen = false">
         <Button
           :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.EDIT_CATEGORY')"
-          variant="secondary"
+          color="slate"
           size="sm"
           @click="isEditCategoryDialogOpen = !isEditCategoryDialogOpen"
         />
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue
index 5492d2f46..5b25779c7 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue
@@ -41,7 +41,7 @@ const localeCount = computed(() => props.locales?.length);
         </div>
         <Button
           :label="$t('HELP_CENTER.LOCALES_PAGE.NEW_LOCALE_BUTTON_TEXT')"
-          icon="add"
+          icon="i-lucide-plus"
           size="sm"
           @click="openAddLocaleDialog"
         />
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
index 12007deba..2c9815b39 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
@@ -196,16 +196,17 @@ const handleAvatarDelete = () => {
       />
     </div>
     <div class="flex flex-col w-full gap-4">
-      <div class="flex items-start justify-between w-full gap-2">
+      <div
+        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
+      >
         <label
-          class="text-sm font-medium whitespace-nowrap min-w-[100px] py-2.5 text-slate-900 dark:text-slate-50"
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
         >
           {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.NAME.LABEL') }}
         </label>
         <Input
           v-model="state.name"
           :placeholder="t('HELP_CENTER.PORTAL_SETTINGS.FORM.NAME.PLACEHOLDER')"
-          class="w-[432px]"
           :message-type="nameError ? 'error' : 'info'"
           :message="nameError"
           custom-input-class="!bg-transparent dark:!bg-transparent"
@@ -213,9 +214,11 @@ const handleAvatarDelete = () => {
           @blur="v$.name.$touch()"
         />
       </div>
-      <div class="flex items-start justify-between w-full gap-2">
+      <div
+        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
+      >
         <label
-          class="text-sm font-medium whitespace-nowrap min-w-[100px] py-2.5 text-slate-900 dark:text-slate-50"
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
         >
           {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.HEADER_TEXT.LABEL') }}
         </label>
@@ -224,13 +227,14 @@ const handleAvatarDelete = () => {
           :placeholder="
             t('HELP_CENTER.PORTAL_SETTINGS.FORM.HEADER_TEXT.PLACEHOLDER')
           "
-          class="w-[432px]"
           custom-input-class="!bg-transparent dark:!bg-transparent"
         />
       </div>
-      <div class="flex items-start justify-between w-full gap-2">
+      <div
+        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
+      >
         <label
-          class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 py-2.5 dark:text-slate-50"
+          class="text-sm font-medium whitespace-nowrap text-slate-900 py-2.5 dark:text-slate-50"
         >
           {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.PAGE_TITLE.LABEL') }}
         </label>
@@ -239,13 +243,14 @@ const handleAvatarDelete = () => {
           :placeholder="
             t('HELP_CENTER.PORTAL_SETTINGS.FORM.PAGE_TITLE.PLACEHOLDER')
           "
-          class="w-[432px]"
           custom-input-class="!bg-transparent dark:!bg-transparent"
         />
       </div>
-      <div class="flex items-start justify-between w-full gap-2">
+      <div
+        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
+      >
         <label
-          class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 py-2.5 dark:text-slate-50"
+          class="text-sm font-medium whitespace-nowrap text-slate-900 py-2.5 dark:text-slate-50"
         >
           {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.HOME_PAGE_LINK.LABEL') }}
         </label>
@@ -254,7 +259,6 @@ const handleAvatarDelete = () => {
           :placeholder="
             t('HELP_CENTER.PORTAL_SETTINGS.FORM.HOME_PAGE_LINK.PLACEHOLDER')
           "
-          class="w-[432px]"
           :message-type="homePageLinkError ? 'error' : 'info'"
           :message="homePageLinkError"
           custom-input-class="!bg-transparent dark:!bg-transparent"
@@ -262,16 +266,17 @@ const handleAvatarDelete = () => {
           @blur="v$.homePageLink.$touch()"
         />
       </div>
-      <div class="flex items-start justify-between w-full gap-2">
+      <div
+        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
+      >
         <label
-          class="text-sm font-medium whitespace-nowrap min-w-[100px] py-2.5 text-slate-900 dark:text-slate-50"
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
         >
           {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.SLUG.LABEL') }}
         </label>
         <Input
           v-model="state.slug"
           :placeholder="t('HELP_CENTER.PORTAL_SETTINGS.FORM.SLUG.PLACEHOLDER')"
-          class="w-[432px]"
           :message-type="slugError ? 'error' : 'info'"
           :message="slugError || buildPortalURL(state.slug)"
           custom-input-class="!bg-transparent dark:!bg-transparent"
@@ -279,9 +284,11 @@ const handleAvatarDelete = () => {
           @blur="v$.slug.$touch()"
         />
       </div>
-      <div class="flex items-start justify-between w-full gap-2">
+      <div
+        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
+      >
         <label
-          class="text-sm font-medium whitespace-nowrap min-w-[100px] py-2.5 text-slate-900 dark:text-slate-50"
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
         >
           {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.LABEL') }}
         </label>
@@ -294,12 +301,12 @@ const handleAvatarDelete = () => {
           :message="
             t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.HELP_TEXT')
           "
-          class="[&>button]:w-[432px] !w-[432px]"
+          class="[&>div>button]:!outline-n-weak"
         />
       </div>
       <div class="flex items-start justify-between w-full gap-2">
         <label
-          class="text-sm font-medium whitespace-nowrap min-w-[100px] py-2.5 text-slate-900 dark:text-slate-50"
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
         >
           {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.BRAND_COLOR.LABEL') }}
         </label>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalConfigurationSettings.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalConfigurationSettings.vue
index 8e048bc9b..8d18f58a0 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalConfigurationSettings.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalConfigurationSettings.vue
@@ -82,12 +82,12 @@ const closeDNSConfigurationDialog = () => {
         <div class="flex items-center justify-end w-full">
           <Button
             v-if="customDomainAddress"
+            color="slate"
             :label="
               t(
                 'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.EDIT_BUTTON'
               )
             "
-            variant="secondary"
             @click="addCustomDomainDialogRef.dialogRef.open()"
           />
           <Button
@@ -97,7 +97,7 @@ const closeDNSConfigurationDialog = () => {
                 'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.ADD_BUTTON'
               )
             "
-            variant="secondary"
+            color="slate"
             @click="addCustomDomainDialogRef.dialogRef.open()"
           />
         </div>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
index b96a98661..ccf1ad997 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
@@ -114,8 +114,8 @@ const handleDeletePortal = () => {
                 }
               )
             "
-            variant="destructive"
-            class="w-56"
+            color="ruby"
+            class="max-w-56 !w-fit"
             @click="openConfirmDeletePortalDialog"
           />
         </div>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
index eaf24f4c2..c5b140530 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
@@ -120,8 +120,8 @@ const redirectToPortalHomePage = () => {
       </div>
       <Button
         :label="t('HELP_CENTER.PORTAL_SWITCHER.NEW_PORTAL')"
-        variant="secondary"
-        icon="add"
+        color="slate"
+        icon="i-lucide-plus"
         size="sm"
         class="!bg-n-alpha-2 hover:!bg-n-alpha-3"
         @click="openCreatePortalDialog"
@@ -133,29 +133,30 @@ const redirectToPortalHomePage = () => {
         :key="index"
         :label="portal.name"
         variant="ghost"
-        :icon="isPortalActive(portal) ? 'checkmark-lucide' : ''"
-        icon-lib="lucide"
-        icon-position="right"
-        class="!justify-start !px-2 !py-2 hover:!bg-n-alpha-2 [&>svg]:text-n-teal-10 [&>svg]:w-5 [&>svg]:h-5 h-9"
+        trailing-icon
+        :icon="isPortalActive(portal) ? 'i-lucide-check' : ''"
+        class="!justify-end !px-2 !py-2 hover:!bg-n-alpha-2 [&>.i-lucide-check]:text-n-teal-10 h-9"
         size="sm"
         @click="handlePortalChange(portal)"
       >
-        <template #leftPrefix>
-          <Thumbnail
-            v-if="portal"
-            :author="portal"
-            :name="portal.name"
-            :size="20"
-            :src="getPortalThumbnailSrc(portal)"
-            :show-author-name="false"
-            icon-name="building-lucide"
-          />
-        </template>
-        <template #rightPrefix>
+        <div v-if="portal.custom_domain" class="flex items-center gap-1">
+          <span class="i-lucide-link size-3" />
           <span class="text-sm truncate text-n-slate-11">
             {{ portal.custom_domain || '' }}
           </span>
-        </template>
+        </div>
+        <span class="text-sm font-medium truncate text-n-slate-12">
+          {{ portal.name || '' }}
+        </span>
+        <Thumbnail
+          v-if="portal"
+          :author="portal"
+          :name="portal.name"
+          :size="20"
+          :src="getPortalThumbnailSrc(portal)"
+          :show-author-name="false"
+          icon-name="i-lucide-building-2"
+        />
       </Button>
     </div>
   </div>
diff --git a/app/javascript/dashboard/components-next/avatar/EditableAvatar.vue b/app/javascript/dashboard/components-next/avatar/EditableAvatar.vue
index 2d70ac6ec..2c71963c1 100644
--- a/app/javascript/dashboard/components-next/avatar/EditableAvatar.vue
+++ b/app/javascript/dashboard/components-next/avatar/EditableAvatar.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue';
 
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 const props = defineProps({
   src: {
@@ -57,7 +57,7 @@ const handleDismiss = event => {
 
 <template>
   <div
-    class="relative flex flex-col items-center gap-2 select-none rounded-xl group/avatar"
+    class="relative flex flex-col items-center gap-2 select-none rounded-xl outline outline-1 outline-n-container group/avatar"
     :style="{ width: avatarSize, height: avatarSize }"
   >
     <img
@@ -71,29 +71,27 @@ const handleDismiss = event => {
       v-else
       class="flex items-center justify-center w-full h-full rounded-xl bg-n-alpha-2"
     >
-      <FluentIcon
-        icon="building-lucide"
-        icon-lib="lucide"
-        :size="iconSize"
-        class="dark:text-n-brand/50 text-n-brand/30"
+      <Icon
+        icon="i-lucide-building-2"
+        class="text-n-brand/50"
+        :style="{ width: `${iconSize}`, height: `${iconSize}` }"
       />
     </div>
     <div
       v-if="src"
-      class="absolute z-20 flex items-center cursor-pointer justify-center w-6 h-6 transition-all invisible opacity-0 duration-500 ease-in-out -top-2.5 -right-2.5 rounded-xl bg-n-solid-3 group-hover/avatar:visible group-hover/avatar:opacity-100"
+      class="absolute z-20 outline outline-1 outline-n-container flex items-center cursor-pointer justify-center w-6 h-6 transition-all invisible opacity-0 duration-500 ease-in-out -top-2.5 -right-2.5 rounded-xl bg-n-solid-3 group-hover/avatar:visible group-hover/avatar:opacity-100"
       @click="handleDismiss"
     >
-      <FluentIcon icon="dismiss" :size="16" class="text-n-slate-11" />
+      <Icon icon="i-lucide-x" class="text-n-slate-11 size-4" />
     </div>
     <div
       class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-500 ease-in-out opacity-0 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
       @click="handleUploadAvatar"
     >
-      <FluentIcon
-        icon="upload-lucide"
-        icon-lib="lucide"
-        :size="iconSize"
-        class="text-white dark:text-white"
+      <Icon
+        icon="i-lucide-upload"
+        class="text-white"
+        :style="{ width: `${iconSize}`, height: `${iconSize}` }"
       />
       <input
         ref="fileInput"
diff --git a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
index 99f27cc9f..e87728d1e 100644
--- a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
+++ b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
@@ -2,8 +2,7 @@
 import { defineProps } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import Button from 'dashboard/components-next/button/Button.vue';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 defineProps({
   items: {
@@ -33,21 +32,17 @@ const onClick = event => {
   <nav :aria-label="t('BREADCRUMB.ARIA_LABEL')" class="flex items-center h-8">
     <ol class="flex items-center mb-0">
       <li v-for="(item, index) in items" :key="index" class="flex items-center">
-        <Button
+        <button
           v-if="index === 0"
-          :label="item.label"
-          variant="link"
-          text-variant="info"
-          class="!p-0 text-sm !font-normal hover:!no-underline max-w-56 !text-slate-300 dark:!text-slate-500 hover:!text-slate-700 dark:hover:!text-slate-100"
-          size="sm"
+          class="inline-flex items-center justify-center min-w-0 gap-2 p-0 text-sm font-medium transition-all duration-200 ease-in-out border-0 rounded-lg text-n-slate-11 hover:text-n-slate-12 outline-transparent max-w-56"
           @click="onClick"
-        />
+        >
+          <span class="min-w-0 truncate">{{ item.label }}</span>
+        </button>
         <template v-else>
-          <FluentIcon
-            icon="chevron-lucide-right"
-            size="18"
-            icon-lib="lucide"
-            class="flex-shrink-0 mx-2 text-slate-300 dark:text-slate-500"
+          <Icon
+            icon="i-lucide-chevron-right"
+            class="flex-shrink-0 mx-2 size-4 text-n-slate-11 dark:text-n-slate-11"
           />
           <span
             class="text-sm truncate text-slate-900 dark:text-slate-50 max-w-56"
diff --git a/app/javascript/dashboard/components-next/button/Button.story.vue b/app/javascript/dashboard/components-next/button/Button.story.vue
index e99bed962..fc0904156 100644
--- a/app/javascript/dashboard/components-next/button/Button.story.vue
+++ b/app/javascript/dashboard/components-next/button/Button.story.vue
@@ -1,125 +1,123 @@
 <script setup>
 import Button from './Button.vue';
+
+// Constants for documentation
+const VARIANTS = ['solid', 'outline', 'faded', 'link', 'ghost'];
+const COLORS = ['blue', 'ruby', 'amber', 'slate', 'teal'];
+const SIZES = ['default', 'sm', 'lg'];
 </script>
 
 <template>
-  <Story title="Components/Button" :layout="{ type: 'grid', width: '400' }">
-    <Variant title="Default">
-      <div class="p-4 bg-white dark:bg-slate-900">
-        <Button label="Default Button" />
+  <Story title="Components/Button" :layout="{ type: 'grid', width: '800px' }">
+    <!-- Basic Variants -->
+    <Variant title="Basic Variants">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button
+          v-for="variant in VARIANTS"
+          :key="variant"
+          :label="variant"
+          :variant="variant"
+        />
       </div>
     </Variant>
 
-    <Variant title="Disabled">
+    <!-- Colors -->
+    <Variant title="Color Variants">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button
+          v-for="color in COLORS"
+          :key="color"
+          :label="color"
+          :color="color"
+        />
+      </div>
+    </Variant>
+
+    <!-- Sizes -->
+    <Variant title="Size Variants">
+      <div
+        class="flex flex-wrap items-center gap-2 p-4 bg-white dark:bg-slate-900"
+      >
+        <Button v-for="size in SIZES" :key="size" :label="size" :size="size" />
+      </div>
+    </Variant>
+
+    <!-- Icons -->
+    <Variant title="Icons">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button label="Leading Icon" icon="i-lucide-plus" />
+        <Button label="Trailing Icon" icon="i-lucide-plus" trailing-icon />
+        <Button icon="i-lucide-plus" />
+      </div>
+    </Variant>
+
+    <!-- Loading State -->
+    <Variant title="Loading State">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button label="Loading" is-loading />
+        <Button label="Loading" variant="outline" is-loading />
+        <Button is-loading icon="i-lucide-plus" />
+      </div>
+    </Variant>
+
+    <!-- Disabled State -->
+    <Variant title="Disabled State">
       <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
         <Button label="Disabled" disabled />
-        <Button label="Disabled" variant="outline" disabled />
-        <Button label="Disabled" disabled icon="delete" variant="outline" />
+        <Button label="Disabled Outline" variant="outline" disabled />
+        <Button label="Disabled Icon" icon="delete" disabled />
         <Button
-          label="Disabled"
+          label="Disabled Destructive"
+          color="ruby"
           disabled
           icon="delete"
-          variant="destructive"
-          size="sm"
-        />
-        <Button
-          label="Disabled"
-          disabled
-          icon="delete"
-          variant="ghost"
-          size="sm"
-        />
-        <Button
-          label="Disabled"
-          disabled
-          icon="delete"
-          variant="link"
           size="sm"
         />
       </div>
     </Variant>
 
-    <Variant title="Disabled with icon">
-      <div class="p-4 bg-white dark:bg-slate-900">
-        <Button label="Disabled Button" icon="emoji-add" disabled />
+    <!-- Color Combinations -->
+    <Variant title="Color & Variant Combinations">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <template v-for="color in COLORS" :key="color">
+          <Button
+            v-for="variant in VARIANTS"
+            :key="`${color}-${variant}`"
+            :label="`${color} ${variant}`"
+            :color="color"
+            :variant="variant"
+          />
+        </template>
       </div>
     </Variant>
 
-    <Variant title="Different variant">
+    <!-- Icon Positions -->
+    <Variant title="Icon Positions & Sizes">
       <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Default" variant="default" />
-        <Button label="Destructive" variant="destructive" />
-        <Button label="Outline" variant="outline" />
-        <Button label="Secondary" variant="secondary" />
-        <Button label="Ghost" variant="ghost" />
-        <Button label="Link" variant="link" />
+        <template v-for="size in SIZES" :key="size">
+          <Button
+            :label="`${size} Leading`"
+            icon="i-lucide-plus"
+            :size="size"
+          />
+          <Button
+            :label="`${size} Trailing`"
+            icon="i-lucide-plus"
+            trailing-icon
+            :size="size"
+          />
+          <Button icon="i-lucide-plus" :size="size" />
+        </template>
       </div>
     </Variant>
 
-    <Variant title="Different variant with icon only">
+    <!-- Ghost & Link Variants -->
+    <Variant title="Ghost & Link Variants">
       <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button icon="emoji-add" variant="default" />
-        <Button icon="emoji-add" variant="destructive" />
-        <Button icon="emoji-add" variant="outline" />
-        <Button icon="emoji-add" variant="secondary" />
-        <Button icon="emoji-add" variant="ghost" />
-        <Button icon="emoji-add" variant="link" />
-      </div>
-    </Variant>
-
-    <Variant title="Different size">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Default" />
-        <Button label="Large" size="lg" />
-        <Button label="Small" size="sm" />
-      </div>
-    </Variant>
-
-    <Variant title="Different text variant">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Default" text-variant="default" variant="outline" />
-        <Button label="Success" text-variant="success" variant="outline" />
-        <Button label="Warning" text-variant="warning" variant="outline" />
-        <Button label="Danger" text-variant="danger" variant="outline" />
-        <Button label="Info" text-variant="info" variant="outline" />
-      </div>
-    </Variant>
-
-    <Variant title="Button with left icon with different sizes and icon only">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Default" icon="emoji-add" icon-position="left" />
-        <Button
-          label="Default LG"
-          icon="emoji-add"
-          icon-position="left"
-          size="lg"
-        />
-        <Button
-          label="Default SM"
-          icon="emoji-add"
-          icon-position="left"
-          size="sm"
-        />
-        <Button icon="emoji-add" size="sm" />
-      </div>
-    </Variant>
-
-    <Variant title="Button with right icon with different sizes and icon only">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Default" icon="emoji-add" icon-position="right" />
-        <Button
-          label="Default LG"
-          icon="emoji-add"
-          icon-position="right"
-          size="lg"
-        />
-        <Button
-          label="Default SM"
-          icon="emoji-add"
-          icon-position="right"
-          size="sm"
-        />
-        <Button icon="emoji-add" size="sm" />
+        <Button label="Ghost Button" variant="ghost" />
+        <Button label="Ghost with Icon" variant="ghost" icon="i-lucide-plus" />
+        <Button label="Link Button" variant="link" />
+        <Button label="Link with Icon" variant="link" icon="i-lucide-plus" />
       </div>
     </Variant>
   </Story>
diff --git a/app/javascript/dashboard/components-next/button/Button.vue b/app/javascript/dashboard/components-next/button/Button.vue
index a9df7db3b..4eae31729 100644
--- a/app/javascript/dashboard/components-next/button/Button.vue
+++ b/app/javascript/dashboard/components-next/button/Button.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, useSlots } from 'vue';
 
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 const props = defineProps({
   label: {
@@ -11,49 +11,28 @@ const props = defineProps({
   },
   variant: {
     type: String,
-    default: 'default',
+    default: 'solid',
     validator: value =>
-      [
-        'default',
-        'destructive',
-        'outline',
-        'secondary',
-        'ghost',
-        'link',
-      ].includes(value),
+      ['solid', 'outline', 'faded', 'link', 'ghost'].includes(value),
   },
-  textVariant: {
+  color: {
     type: String,
-    default: '',
+    default: 'blue',
     validator: value =>
-      ['', 'default', 'success', 'warning', 'danger', 'info'].includes(value),
+      ['blue', 'ruby', 'amber', 'slate', 'teal'].includes(value),
   },
   size: {
     type: String,
-    default: 'default',
-    validator: value => ['default', 'sm', 'lg'].includes(value),
-  },
-  type: {
-    type: String,
-    default: 'button',
-    validator: value => ['button', 'submit', 'reset'].includes(value),
+    default: 'md',
+    validator: value => ['xs', 'sm', 'md', 'lg'].includes(value),
   },
   icon: {
     type: String,
     default: '',
   },
-  emoji: {
-    type: String,
-    default: '',
-  },
-  iconPosition: {
-    type: String,
-    default: 'left',
-    validator: value => ['left', 'right'].includes(value),
-  },
-  iconLib: {
-    type: String,
-    default: 'fluent',
+  trailingIcon: {
+    type: Boolean,
+    default: false,
   },
   isLoading: {
     type: Boolean,
@@ -61,92 +40,128 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['click']);
+const slots = useSlots();
 
-const buttonVariants = {
-  variant: {
-    default:
-      'bg-n-brand text-white dark:text-white hover:bg-woot-600 dark:hover:bg-woot-600',
-    destructive: 'bg-n-ruby-9 text-white dark:text-white hover:bg-n-ruby-10',
-    outline:
-      'border border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6',
-    secondary: 'bg-n-solid-3 text-n-slate-12 hover:bg-n-solid-2',
-    ghost: 'text-n-slate-12',
-    link: 'text-n-brand underline-offset-4 hover:underline dark:hover:underline',
+const STYLE_CONFIG = {
+  colors: {
+    blue: {
+      solid: 'bg-n-brand text-white hover:bg-n-blue-text outline-transparent',
+      faded:
+        'bg-n-brand/10 text-n-slate-12 hover:bg-n-brand/20 outline-transparent',
+      outline: 'text-n-blue-text hover:bg-n-brand/10 outline-n-blue-border',
+      link: 'text-n-brand hover:underline outline-transparent',
+    },
+    ruby: {
+      solid: 'bg-n-ruby-9 text-white hover:bg-n-ruby-10 outline-transparent',
+      faded:
+        'bg-n-ruby-9/10 text-n-slate-12 hover:bg-n-ruby-9/20 outline-transparent',
+      outline: 'text-n-ruby-11 hover:bg-n-ruby-9/10 outline-n-ruby-9',
+      link: 'text-n-ruby-9 hover:underline outline-transparent',
+    },
+    amber: {
+      solid: 'bg-n-amber-9 text-white hover:bg-n-amber-10 outline-transparent',
+      faded:
+        'bg-n-amber-9/10 text-n-slate-12 hover:bg-n-amber-9/20 outline-transparent',
+      outline: 'text-n-amber-11 hover:bg-n-amber-9/10 outline-n-amber-9',
+      link: 'text-n-amber-9 hover:underline outline-transparent',
+    },
+    slate: {
+      solid:
+        'bg-n-solid-3 hover:bg-n-solid-2 text-n-slate-12 outline-n-container',
+      faded:
+        'bg-n-slate-9/10 text-n-slate-12 hover:bg-n-slate-9/20 outline-transparent',
+      outline: 'text-n-slate-11 outline-n-strong hover:bg-n-slate-9/10',
+      link: 'text-n-slate-11 hover:text-n-slate-12 hover:underline outline-transparent',
+    },
+    teal: {
+      solid: 'bg-n-teal-9 text-white hover:bg-n-teal-10 outline-transparent',
+      faded:
+        'bg-n-teal-9/10 text-n-slate-12 hover:bg-n-teal-9/20 outline-transparent',
+      outline: 'text-n-teal-11 hover:bg-n-teal-9/10 outline-n-teal-9',
+      link: 'text-n-teal-9 hover:underline outline-transparent',
+    },
   },
-  size: {
-    default: 'h-10 px-4 py-2',
-    sm: 'h-8 px-3 py-1',
-    lg: 'h-12 px-5 py-3',
+  sizes: {
+    regular: {
+      xs: 'h-6 px-2',
+      sm: 'h-8 px-3',
+      md: 'h-10 px-4',
+      lg: 'h-12 px-5',
+    },
+    iconOnly: {
+      xs: 'h-6 w-6 p-0',
+      sm: 'h-8 w-8 p-0',
+      md: 'h-10 w-10 p-0',
+      lg: 'h-12 w-12 p-0',
+    },
+    link: {
+      xs: 'p-0',
+      sm: 'p-0',
+      md: 'p-0',
+      lg: 'p-0',
+    },
   },
-  text: {
-    default:
-      '!text-n-brand dark:!text-n-brand hover:!text-woot-600 dark:hover:!text-woot-600',
-    success:
-      '!text-green-500 dark:!text-green-500 hover:!text-green-600 dark:hover:!text-green-600',
-    warning:
-      '!text-amber-600 dark:!text-amber-600 hover:!text-amber-600 dark:hover:!text-amber-600',
-    danger: '!text-n-ruby-11 hover:!text-n-ruby-10',
-    info: '!text-n-slate-12 hover:!text-n-slate-11',
+  fontSize: {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-sm font-medium',
+    lg: 'text-base',
   },
+  base: 'inline-flex items-center justify-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50',
 };
 
-const buttonClasses = computed(() => {
-  const classes = [
-    buttonVariants.variant[props.variant],
-    buttonVariants.size[props.size],
-  ];
+const variantClasses = computed(() => {
+  const variantMap = {
+    ghost: 'text-n-slate-12 hover:bg-n-alpha-2 outline-transparent',
+    link: `${STYLE_CONFIG.colors[props.color].link} p-0 font-medium underline-offset-4`,
+    outline: STYLE_CONFIG.colors[props.color].outline,
+    faded: STYLE_CONFIG.colors[props.color].faded,
+    solid: STYLE_CONFIG.colors[props.color].solid,
+  };
 
-  if (props.textVariant && buttonVariants.text[props.textVariant]) {
-    classes.push(buttonVariants.text[props.textVariant]);
-  }
+  return variantMap[props.variant];
+});
+
+const isIconOnly = computed(() => !props.label && !slots.default);
+const isLink = computed(() => props.variant === 'link');
+
+const buttonClasses = computed(() => {
+  const sizeConfig = isIconOnly.value ? 'iconOnly' : 'regular';
+  const classes = [
+    variantClasses.value,
+    props.variant !== 'link' && STYLE_CONFIG.sizes[sizeConfig][props.size],
+  ].filter(Boolean);
 
   return classes.join(' ');
 });
 
-const iconSize = computed(() => {
-  if (props.size === 'sm') return 16;
-  if (props.size === 'lg') return 20;
-  return 18;
-});
+const linkButtonClasses = computed(() => {
+  const classes = [
+    variantClasses.value,
+    STYLE_CONFIG.sizes.link[props.size],
+  ].filter(Boolean);
 
-const handleClick = e => {
-  emit('click', e);
-};
+  return classes.join(' ');
+});
 </script>
 
 <template>
   <button
-    :class="buttonClasses"
-    :type="type"
-    class="inline-flex items-center justify-center min-w-0 gap-2 text-sm font-medium transition-all duration-200 ease-in-out rounded-lg disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
-    @click="handleClick"
+    :class="{
+      [STYLE_CONFIG.base]: true,
+      [isLink ? linkButtonClasses : buttonClasses]: true,
+      [STYLE_CONFIG.fontSize[size]]: true,
+      'flex-row-reverse': trailingIcon && !isIconOnly,
+    }"
   >
-    <FluentIcon
-      v-if="icon && iconPosition === 'left' && !isLoading"
-      :icon="icon"
-      :size="iconSize"
-      :icon-lib="iconLib"
-      class="flex-shrink-0"
-      :class="{
-        'text-n-slate-11 dark:text-n-slate-11': variant === 'secondary',
-      }"
-    />
+    <slot v-if="(icon || $slots.icon) && !isLoading" name="icon">
+      <Icon :icon="icon" class="flex-shrink-0" />
+    </slot>
+
     <Spinner v-if="isLoading" class="!w-5 !h-5 flex-shrink-0" />
-    <slot name="leftPrefix" />
-    <span v-if="emoji">{{ emoji }}</span>
-    <span v-if="label" class="min-w-0 truncate">{{ label }}</span>
-    <slot />
-    <slot name="rightPrefix" />
-    <FluentIcon
-      v-if="icon && iconPosition === 'right'"
-      :icon="icon"
-      :size="iconSize"
-      :icon-lib="iconLib"
-      class="flex-shrink-0"
-      :class="{
-        'text-n-slate-11 dark:text-n-slate-11': variant === 'secondary',
-      }"
-    />
+
+    <slot v-if="label || $slots.default" name="default">
+      <span class="min-w-0 truncate">{{ label }}</span>
+    </slot>
   </button>
 </template>
diff --git a/app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue b/app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue
index 6ccd1bd72..de04b115a 100644
--- a/app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue
+++ b/app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue
@@ -37,20 +37,19 @@ const pickerRef = ref(null);
   <div ref="pickerRef" class="relative w-fit">
     <OnClickOutside @trigger="closeTogglePicker">
       <Button
-        :label="modelValue"
-        variant="secondary"
-        icon-lib="lucide"
-        icon-position="right"
-        icon="pipette-lucide"
+        color="slate"
+        icon="i-lucide-pipette"
+        trailing-icon
         class="!px-3 !py-3 [&>svg]:w-4 [&>svg]:h-4"
         @click="toggleColorPicker"
       >
-        <template #leftPrefix>
-          <div
-            class="w-4 h-4 rounded-sm"
+        <div class="flex items-center flex-grow gap-2">
+          <span
+            class="rounded-md size-4"
             :style="{ backgroundColor: modelValue }"
           />
-        </template>
+          <span class="min-w-0 truncate">{{ modelValue }}</span>
+        </div>
       </Button>
       <Chrome
         v-if="isPickerOpen"
diff --git a/app/javascript/dashboard/components-next/combobox/ComboBox.vue b/app/javascript/dashboard/components-next/combobox/ComboBox.vue
index 05ea4e67c..f48ec100c 100644
--- a/app/javascript/dashboard/components-next/combobox/ComboBox.vue
+++ b/app/javascript/dashboard/components-next/combobox/ComboBox.vue
@@ -2,7 +2,7 @@
 import { ref, computed, watch, nextTick } from 'vue';
 import { OnClickOutside } from '@vueuse/components';
 import { useI18n } from 'vue-i18n';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+
 import Button from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
@@ -89,7 +89,7 @@ watch(
 <template>
   <div
     ref="comboboxRef"
-    class="relative w-full"
+    class="relative w-full min-w-0"
     :class="{
       'cursor-not-allowed': disabled,
       'group/combobox': !disabled,
@@ -98,12 +98,12 @@ watch(
     <OnClickOutside @trigger="open = false">
       <Button
         variant="outline"
+        color="slate"
         :label="selectedLabel"
-        icon-position="right"
+        trailing-icon
         :disabled="disabled"
-        class="justify-between w-full !px-2 !py-2.5 text-n-slate-12 font-normal group-hover/combobox:border-n-slate-6"
-        :icon="open ? 'chevron-lucide-up' : 'chevron-lucide-down'"
-        icon-lib="lucide"
+        class="justify-between w-full !px-3 !py-2.5 text-n-slate-12 font-normal group-hover/combobox:border-n-slate-6"
+        :icon="open ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
         @click="toggleDropdown"
       />
       <div
@@ -111,12 +111,7 @@ watch(
         class="absolute z-50 w-full mt-1 transition-opacity duration-200 border rounded-md shadow-lg bg-n-solid-1 border-n-strong"
       >
         <div class="relative border-b border-n-strong">
-          <FluentIcon
-            icon="search"
-            :size="14"
-            class="absolute text-gray-400 dark:text-slate-500 top-3 left-3"
-            aria-hidden="true"
-          />
+          <span class="absolute i-lucide-search top-2.5 size-4 left-3" />
           <input
             ref="searchInput"
             v-model="search"
@@ -133,7 +128,7 @@ watch(
           <li
             v-for="option in filteredOptions"
             :key="option.value"
-            class="flex items-center justify-between !text-n-slate-12 w-full gap-2 px-2 py-2 text-sm transition-colors duration-150 cursor-pointer hover:bg-n-solid-2"
+            class="flex items-center justify-between !text-n-slate-12 w-full gap-2 px-3 py-2 text-sm transition-colors duration-150 cursor-pointer hover:bg-n-solid-2"
             :class="{
               'bg-n-solid-2': option.value === selectedValue,
             }"
@@ -144,12 +139,9 @@ watch(
             <span :class="{ 'font-medium': option.value === selectedValue }">
               {{ option.label }}
             </span>
-            <FluentIcon
+            <span
               v-if="option.value === selectedValue"
-              icon="checkmark"
-              :size="16"
-              class="flex-shrink-0 text-n-slate-11 dark:text-n-slate-11"
-              aria-hidden="true"
+              class="flex-shrink-0 i-lucide-check size-4 text-n-slate-11"
             />
           </li>
           <li
diff --git a/app/javascript/dashboard/components-next/dialog/Dialog.vue b/app/javascript/dashboard/components-next/dialog/Dialog.vue
index 7ff0ada17..1fa2d4064 100644
--- a/app/javascript/dashboard/components-next/dialog/Dialog.vue
+++ b/app/javascript/dashboard/components-next/dialog/Dialog.vue
@@ -99,14 +99,15 @@ defineExpose({ open, close });
           <div class="flex items-center justify-between w-full gap-3">
             <Button
               v-if="showCancelButton"
-              variant="ghost"
+              variant="faded"
+              color="slate"
               :label="cancelButtonLabel || t('DIALOG.BUTTONS.CANCEL')"
-              class="w-full bg-n-alpha-2 hover:bg-n-alpha-3"
+              class="w-full"
               @click="close"
             />
             <Button
               v-if="showConfirmButton"
-              :variant="type === 'edit' ? 'default' : 'destructive'"
+              :color="type === 'edit' ? 'blue' : 'ruby'"
               :label="confirmButtonLabel || t('DIALOG.BUTTONS.CONFIRM')"
               class="w-full"
               :is-loading="isLoading"
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
index eef87ef01..b6d2a6827 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { defineProps, defineEmits } from 'vue';
 
-import Button from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
 
 defineProps({
@@ -29,29 +29,28 @@ const handleAction = (action, value) => {
   <div
     class="bg-n-alpha-3 backdrop-blur-[100px] absolute rounded-xl z-50 py-2 px-2 gap-2 flex flex-col min-w-[136px] shadow-lg"
   >
-    <Button
+    <button
       v-for="item in menuItems"
       :key="item.action"
-      :label="item.label"
-      :icon="item.icon"
-      :emoji="item.emoji"
+      class="inline-flex items-center justify-start w-full h-8 min-w-0 gap-2 px-2 py-1.5 transition-all duration-200 ease-in-out border-0 rounded-lg z-60 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
+      :class="{
+        'bg-n-alpha-1 dark:bg-n-solid-active': item.isSelected,
+        'text-n-ruby-11': item.action === 'delete',
+        'text-n-slate-12': item.action !== 'delete',
+      }"
       :disabled="item.disabled"
-      variant="ghost"
-      size="sm"
-      class="!justify-start w-full hover:!bg-n-slate-3 dark:hover:!bg-n-slate-4 z-60 px-2 font-normal"
-      :class="item.isSelected ? '!bg-n-alpha-1 dark:!bg-n-solid-active' : ''"
-      :text-variant="item.action === 'delete' ? 'danger' : ''"
       @click="handleAction(item.action, item.value)"
     >
-      <template #leftPrefix>
-        <Thumbnail
-          v-if="item.thumbnail"
-          :author="item.thumbnail"
-          :name="item.thumbnail.name"
-          :size="thumbnailSize"
-          :src="item.thumbnail.src"
-        />
-      </template>
-    </Button>
+      <Thumbnail
+        v-if="item.thumbnail"
+        :author="item.thumbnail"
+        :name="item.thumbnail.name"
+        :size="thumbnailSize"
+        :src="item.thumbnail.src"
+      />
+      <Icon v-if="item.icon" :icon="item.icon" />
+      <span v-if="item.emoji">{{ item.emoji }}</span>
+      <span v-if="item.label" class="text-sm">{{ item.label }}</span>
+    </button>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/input/Input.vue b/app/javascript/dashboard/components-next/input/Input.vue
index d97ffd137..63ac6693d 100644
--- a/app/javascript/dashboard/components-next/input/Input.vue
+++ b/app/javascript/dashboard/components-next/input/Input.vue
@@ -69,7 +69,7 @@ const handleInput = event => {
 </script>
 
 <template>
-  <div class="relative flex flex-col gap-1">
+  <div class="relative flex flex-col min-w-0 gap-1">
     <label
       v-if="label"
       :for="id"
@@ -92,7 +92,7 @@ const handleInput = event => {
     />
     <p
       v-if="message"
-      class="mt-1 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
+      class="min-w-0 mt-1 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
       :class="messageClass"
     >
       {{ message }}
diff --git a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
index 986b26f90..95a30c902 100644
--- a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
+++ b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
@@ -65,18 +65,18 @@ const pageInfo = computed(() => {
     </div>
     <div class="flex items-center gap-2">
       <Button
-        icon="chevrons-lucide-left"
-        icon-lib="lucide"
+        icon="i-lucide-chevrons-left"
         variant="ghost"
         size="sm"
+        class="!w-8 !h-6"
         :disabled="isFirstPage"
         @click="changePage(1)"
       />
       <Button
-        icon="chevron-lucide-left"
-        icon-lib="lucide"
+        icon="i-lucide-chevron-left"
         variant="ghost"
         size="sm"
+        class="!w-8 !h-6"
         :disabled="isFirstPage"
         @click="changePage(currentPage - 1)"
       />
@@ -87,18 +87,18 @@ const pageInfo = computed(() => {
         <span>{{ pageInfo }}</span>
       </div>
       <Button
-        icon="chevron-lucide-right"
-        icon-lib="lucide"
+        icon="i-lucide-chevron-right"
         variant="ghost"
         size="sm"
+        class="!w-8 !h-6"
         :disabled="isLastPage"
         @click="changePage(currentPage + 1)"
       />
       <Button
-        icon="chevrons-lucide-right"
-        icon-lib="lucide"
+        icon="i-lucide-chevrons-right"
         variant="ghost"
         size="sm"
+        class="!w-8 !h-6"
         :disabled="isLastPage"
         @click="changePage(totalPages)"
       />
diff --git a/app/javascript/dashboard/components-next/tabbar/TabBar.vue b/app/javascript/dashboard/components-next/tabbar/TabBar.vue
index 78defbba1..072b80907 100644
--- a/app/javascript/dashboard/components-next/tabbar/TabBar.vue
+++ b/app/javascript/dashboard/components-next/tabbar/TabBar.vue
@@ -43,7 +43,7 @@ const showDivider = index => {
         class="relative px-4 truncate py-1.5 text-sm border-0 outline-1 outline rounded-lg transition-colors duration-300 ease-in-out hover:text-n-brand"
         :class="[
           activeTab === index
-            ? 'text-n-brand bg-n-solid-active outline-n-container dark:outline-transparent'
+            ? 'text-n-blue-text bg-n-solid-active outline-n-container dark:outline-transparent'
             : 'text-n-slate-10 outline-transparent h-8',
         ]"
         @click="selectTab(index)"
@@ -54,7 +54,7 @@ const showDivider = index => {
         class="w-px h-3.5 rounded my-auto transition-colors duration-300 ease-in-out"
         :class="
           showDivider(index)
-            ? 'bg-slate-75 dark:bg-slate-800'
+            ? 'bg-n-strong'
             : 'bg-transparent dark:bg-transparent'
         "
       />
diff --git a/app/javascript/dashboard/components-next/taginput/TagInput.vue b/app/javascript/dashboard/components-next/taginput/TagInput.vue
index fc1ed2d0d..4ebd0f7c7 100644
--- a/app/javascript/dashboard/components-next/taginput/TagInput.vue
+++ b/app/javascript/dashboard/components-next/taginput/TagInput.vue
@@ -2,7 +2,6 @@
 import { ref, computed, watch } from 'vue';
 import { OnClickOutside } from '@vueuse/components';
 
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
 
 const props = defineProps({
@@ -71,10 +70,8 @@ watch(
         <span class="flex-grow min-w-0 text-sm truncate text-n-slate-12">
           {{ tag }}
         </span>
-        <FluentIcon
-          icon="dismiss"
-          size="20"
-          class="flex-shrink-0 p-1 cursor-pointer text-n-slate-11"
+        <span
+          class="flex-shrink-0 cursor-pointer i-lucide-x size-3.5 text-n-slate-11"
           @click.stop="removeTag(index)"
         />
       </div>
diff --git a/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue b/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue
index ebab04e17..abc445ffa 100644
--- a/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue
+++ b/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue
@@ -3,8 +3,6 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { removeEmoji } from 'shared/helpers/emoji';
 
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
-
 const props = defineProps({
   author: {
     type: Object,
@@ -58,7 +56,7 @@ const fontSize = computed(() => {
 });
 
 const iconSize = computed(() => {
-  return props.size / 2;
+  return Math.round(props.size / 1.8);
 });
 
 const shouldShowImage = computed(() => {
@@ -76,7 +74,7 @@ const onImgLoad = () => {
 
 <template>
   <div
-    class="flex items-center justify-center rounded-full bg-slate-100 dark:bg-slate-700/50"
+    class="flex items-center justify-center rounded-full bg-n-slate-3 dark:bg-n-slate-4"
     :style="{ width: `${size}px`, height: `${size}px` }"
   >
     <div v-if="author">
@@ -91,7 +89,7 @@ const onImgLoad = () => {
       <template v-else>
         <span
           v-if="showAuthorName"
-          class="flex items-center justify-center font-medium text-slate-500 dark:text-slate-400"
+          class="flex items-center justify-center font-medium text-n-slate-11"
           :style="{ fontSize: `${fontSize}px` }"
         >
           {{ authorInitial }}
@@ -100,12 +98,10 @@ const onImgLoad = () => {
           v-else
           class="flex items-center justify-center w-full h-full rounded-xl"
         >
-          <FluentIcon
+          <span
             v-if="iconName"
-            :icon="iconName"
-            icon-lib="lucide"
-            :size="iconSize"
-            class="text-n-brand"
+            :class="`${iconName} text-n-brand/70`"
+            :style="{ width: `${iconSize}px`, height: `${iconSize}px` }"
           />
         </div>
       </template>
@@ -113,14 +109,9 @@ const onImgLoad = () => {
     <div
       v-else
       v-tooltip.top-start="t('THUMBNAIL.AUTHOR.NOT_AVAILABLE')"
-      class="flex items-center justify-center w-4 h-4 rounded-full bg-slate-100 dark:bg-slate-700/50"
+      class="flex items-center justify-center w-4 h-4 rounded-full bg-n-slate-3 dark:bg-n-slate-4"
     >
-      <FluentIcon
-        icon="person"
-        type="filled"
-        size="10"
-        class="text-woot-500 dark:text-woot-400"
-      />
+      <span class="i-lucide-user size-2.5 text-n-brand" />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/helper/portalHelper.js b/app/javascript/dashboard/helper/portalHelper.js
index 78d5177e0..09b648330 100644
--- a/app/javascript/dashboard/helper/portalHelper.js
+++ b/app/javascript/dashboard/helper/portalHelper.js
@@ -31,7 +31,7 @@ export const getArticleStatus = status => {
 export const HELP_CENTER_MENU_ITEMS = [
   {
     label: 'Articles',
-    icon: 'book',
+    icon: 'i-lucide-book',
     action: 'portals_articles_index',
     value: [
       'portals_articles_index',
@@ -41,7 +41,7 @@ export const HELP_CENTER_MENU_ITEMS = [
   },
   {
     label: 'Categories',
-    icon: 'folder',
+    icon: 'i-lucide-folder',
     action: 'portals_categories_index',
     value: [
       'portals_categories_index',
@@ -51,13 +51,13 @@ export const HELP_CENTER_MENU_ITEMS = [
   },
   {
     label: 'Locales',
-    icon: 'translate',
+    icon: 'i-lucide-languages',
     action: 'portals_locales_index',
     value: ['portals_locales_index'],
   },
   {
     label: 'Settings',
-    icon: 'settings',
+    icon: 'i-lucide-settings',
     action: 'portals_settings_index',
     value: ['portals_settings_index'],
   },
@@ -74,25 +74,25 @@ export const ARTICLE_MENU_ITEMS = {
     label: 'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.DROPDOWN_MENU.PUBLISH',
     value: ARTICLE_STATUSES.PUBLISHED,
     action: 'publish',
-    icon: 'checkmark',
+    icon: 'i-lucide-check',
   },
   draft: {
     label: 'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.DROPDOWN_MENU.DRAFT',
     value: ARTICLE_STATUSES.DRAFT,
     action: 'draft',
-    icon: 'draft',
+    icon: 'i-lucide-pencil-line',
   },
   archive: {
     label: 'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.DROPDOWN_MENU.ARCHIVE',
     value: ARTICLE_STATUSES.ARCHIVED,
     action: 'archive',
-    icon: 'archive',
+    icon: 'i-lucide-archive-restore',
   },
   delete: {
     label: 'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.DROPDOWN_MENU.DELETE',
     value: 'delete',
     action: 'delete',
-    icon: 'delete',
+    icon: 'i-lucide-trash',
   },
 };
 
@@ -135,13 +135,13 @@ export const LOCALE_MENU_ITEMS = [
     label: 'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.MAKE_DEFAULT',
     action: 'change-default',
     value: 'default',
-    icon: 'star-emphasis',
+    icon: 'i-lucide-star',
   },
   {
     label: 'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.DELETE',
     action: 'delete',
     value: 'delete',
-    icon: 'delete',
+    icon: 'i-lucide-trash',
   },
 ];
 
diff --git a/package.json b/package.json
index bf0e465b2..e25396d65 100644
--- a/package.json
+++ b/package.json
@@ -104,7 +104,7 @@
     "@iconify-json/ri": "^1.2.1",
     "@histoire/plugin-vue": "0.17.15",
     "@iconify-json/logos": "^1.2.0",
-    "@iconify-json/lucide": "^1.2.5",
+    "@iconify-json/lucide": "^1.2.10",
     "@size-limit/file": "^8.2.4",
     "@vitest/coverage-v8": "2.0.1",
     "@vue/test-utils": "^2.4.6",
@@ -142,6 +142,13 @@
       "pre-push": "sh bin/validate_push"
     }
   },
+  "pnpm": {
+    "overrides": {
+      "vite-node": "2.0.1",
+      "vite": "5.4.8",
+      "vitest": "2.0.1"
+    }
+  },
   "lint-staged": {
     "app/**/*.{js,vue}": [
       "eslint --fix",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5a095c4c2..9b8e76280 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,11 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+overrides:
+  vite-node: 2.0.1
+  vite: 5.4.8
+  vitest: 2.0.1
+
 importers:
 
   .:
@@ -223,8 +228,8 @@ importers:
         specifier: ^1.2.0
         version: 1.2.0
       '@iconify-json/lucide':
-        specifier: ^1.2.5
-        version: 1.2.5
+        specifier: ^1.2.10
+        version: 1.2.10
       '@iconify-json/ri':
         specifier: ^1.2.1
         version: 1.2.1
@@ -301,7 +306,7 @@ importers:
         specifier: ^3.4.13
         version: 3.4.13
       vite:
-        specifier: ^5.4.8
+        specifier: 5.4.8
         version: 5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)
       vite-plugin-ruby:
         specifier: ^5.0.0
@@ -817,7 +822,7 @@ packages:
   '@histoire/shared@0.17.17':
     resolution: {integrity: sha512-ueGtURysonT0MujCObPCR57+mgZluMEXCrbc2FBgKAD/DoAt38tNwSGsmLldk2O6nTr7lr6ClbVSgWrLwgY6Xw==}
     peerDependencies:
-      vite: ^2.9.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
+      vite: 5.4.8
 
   '@histoire/vendors@0.17.17':
     resolution: {integrity: sha512-QZvmffdoJlLuYftPIkOU5Q2FPAdG2JjMuQ5jF7NmEl0n1XnmbMqtRkdYTZ4eF6CO1KLZ0Zyf6gBQvoT1uWNcjA==}
@@ -838,8 +843,8 @@ packages:
   '@iconify-json/logos@1.2.0':
     resolution: {integrity: sha512-VkU9QSqeZR2guWbecdqkcoZEAJfgJJTUm6QAsypuZQ7Cve6zy39wOXDjp2H31I8QyQy4O3Cz96+pNji6UQFg4w==}
 
-  '@iconify-json/lucide@1.2.5':
-    resolution: {integrity: sha512-ZRw1GRcN5CQ+9BW+yBEFjRNf4pQfsU8gvNVcCY81yVmwKLUegTncGHXjBuspK6HSmsJspOhGBgLqNbHb0dpxfw==}
+  '@iconify-json/lucide@1.2.10':
+    resolution: {integrity: sha512-cR1xpRJ4dnoXlC0ShDjzbrZyu+ICH4OUaYl7S51MhZUO1H040s7asVqv0LsDbofSLDuzWkHCLsBabTTRL0mCUg==}
 
   '@iconify-json/ri@1.2.1':
     resolution: {integrity: sha512-xI3+xZHBI+wlhQqd6jRRcLD5K8B8vQNyxcSB43myxNZ/SfXIn7Ny28h0jyPo9e0gT8fGhqx6R5PeLz/UBB8jwQ==}
@@ -1713,7 +1718,7 @@ packages:
     resolution: {integrity: sha512-N2XSI2n3sQqp5w7Y/AN/L2XDjBIRGqXko+eDp42sydYSBeJuSm5a1sLf8zakmo8u7tA8NmBgoDLA1HeOESjp9A==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
-      vite: ^5.0.0
+      vite: 5.4.8
       vue: ^3.2.25
 
   '@vitest/coverage-v8@2.0.1':
@@ -2907,7 +2912,7 @@ packages:
     resolution: {integrity: sha512-DiRMSIgj340z+zikqf0f3Pj0CTv2/xtdBMBIAO1EARat+QXxMwumbfK41Gi7f9IIBr+UVmomNcwFxVY2EM/vrw==}
     hasBin: true
     peerDependencies:
-      vite: ^2.9.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
+      vite: 5.4.8
 
   hotkeys-js@3.8.7:
     resolution: {integrity: sha512-ckAx3EkUr5XjDwjEHDorHxRO2Kb7z6Z2Sxul4MbBkN8Nho7XDslQsgMJT+CiJ5Z4TgRxxvKHEpuLE3imzqy4Lg==}
@@ -4632,11 +4637,6 @@ packages:
   videojs-wavesurfer@3.8.0:
     resolution: {integrity: sha512-qHucCBiEW+4dZ0Zp1k4R1elprUOV+QDw87UDA9QRXtO7GK/MrSdoe/TMFxP9SLnJCiX9xnYdf4OQgrmvJ9UVVw==}
 
-  vite-node@0.34.7:
-    resolution: {integrity: sha512-0Yzb96QzHmqIKIs/x2q/sqG750V/EF6yDkS2p1WjJc1W2bgRSuQjf5vB9HY8h2nVb5j4pO5paS5Npcv3s69YUg==}
-    engines: {node: '>=v14.18.0'}
-    hasBin: true
-
   vite-node@2.0.1:
     resolution: {integrity: sha512-nVd6kyhPAql0s+xIVJzuF+RSRH8ZimNrm6U8ZvTA4MXv8CHI17TFaQwRaFiK75YX6XeFqZD4IoAaAfi9OR1XvQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -4645,7 +4645,7 @@ packages:
   vite-plugin-ruby@5.0.0:
     resolution: {integrity: sha512-c8PjTp21Ah/ttgnNUyu0qvCXZI08Jr9I24oUKg3TRIRhF5GcOZ++6wtlTCrNFd9COEQbpXHxlRIXd/MEg0iZJw==}
     peerDependencies:
-      vite: '>=5.0.0'
+      vite: 5.4.8
 
   vite@5.4.8:
     resolution: {integrity: sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==}
@@ -5496,7 +5496,7 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify-json/lucide@1.2.5':
+  '@iconify-json/lucide@1.2.10':
     dependencies:
       '@iconify/types': 2.0.0
 
@@ -7977,7 +7977,7 @@ snapshots:
       shiki-es: 0.2.0
       sirv: 2.0.4
       vite: 5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)
-      vite-node: 0.34.7(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)
+      vite-node: 2.0.1(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)
     transitivePeerDependencies:
       - '@types/node'
       - bufferutil
@@ -9894,25 +9894,6 @@ snapshots:
       video.js: 7.18.1
       wavesurfer.js: 7.8.6
 
-  vite-node@0.34.7(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0):
-    dependencies:
-      cac: 6.7.14
-      debug: 4.3.7
-      mlly: 1.7.1
-      pathe: 1.1.2
-      picocolors: 1.1.0
-      vite: 5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)
-    transitivePeerDependencies:
-      - '@types/node'
-      - less
-      - lightningcss
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-
   vite-node@2.0.1(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0):
     dependencies:
       cac: 6.7.14
diff --git a/tailwind.config.js b/tailwind.config.js
index e973b49a1..7dff3bc4e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -28,6 +28,7 @@ const tailwindConfig = {
     './app/javascript/portal/**/*.vue',
     './app/javascript/shared/**/*.vue',
     './app/javascript/survey/**/*.vue',
+    './app/javascript/dashboard/helper/**/*.js',
     './app/views/**/*.html.erb',
   ],
   theme: {

From 55dfd7db50c166099bfc5a59cb83489f127159cc Mon Sep 17 00:00:00 2001
From: Vishnu Narayanan <iamwishnu@gmail.com>
Date: Tue, 29 Oct 2024 15:16:10 +0530
Subject: [PATCH 18/39] fix: pnpm in vite docker (#10344)

- Fix pnpm path in vite docker
- Remove webpack files
- fFx vite server port
---
 docker-compose.yaml                   |  4 ++--
 docker/Dockerfile                     |  6 +++---
 docker/dockerfiles/vite.Dockerfile    |  7 +++++--
 docker/dockerfiles/webpack.Dockerfile |  6 ------
 docker/entrypoints/vite.sh            | 14 +++-----------
 docker/entrypoints/webpack.sh         | 20 --------------------
 6 files changed, 13 insertions(+), 44 deletions(-)
 delete mode 100644 docker/dockerfiles/webpack.Dockerfile
 mode change 100644 => 100755 docker/entrypoints/vite.sh
 delete mode 100755 docker/entrypoints/webpack.sh

diff --git a/docker-compose.yaml b/docker-compose.yaml
index cbc25a59e..2a6921fbe 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -74,13 +74,13 @@ services:
       - cache:/app/tmp/cache
       - bundle:/usr/local/bundle
     ports:
-      - "5173:5173" # Vite dev server
+      - "3036:3036" # Vite dev server
     environment:
       - VITE_DEV_SERVER_HOST=0.0.0.0
       - NODE_ENV=development
       - RAILS_ENV=development
     entrypoint: docker/entrypoints/vite.sh
-    command: pnpm run dev
+    command: bin/vite dev
 
   postgres:
     image: postgres:12
diff --git a/docker/Dockerfile b/docker/Dockerfile
index faea49c2e..14618bf61 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -5,7 +5,7 @@ FROM ruby:3.3.3-alpine3.19 AS pre-builder
 # For development docker-compose file overrides ARGS
 ARG BUNDLE_WITHOUT="development:test"
 ENV BUNDLE_WITHOUT ${BUNDLE_WITHOUT}
-ENV BUNDLER_VERSION=2.1.2
+ENV BUNDLER_VERSION=2.5.11
 
 ARG RAILS_SERVE_STATIC_FILES=true
 ENV RAILS_SERVE_STATIC_FILES ${RAILS_SERVE_STATIC_FILES}
@@ -89,7 +89,7 @@ FROM ruby:3.3.3-alpine3.19
 
 ARG BUNDLE_WITHOUT="development:test"
 ENV BUNDLE_WITHOUT ${BUNDLE_WITHOUT}
-ENV BUNDLER_VERSION=2.1.2
+ENV BUNDLER_VERSION=2.5.11
 
 ARG EXECJS_RUNTIME="Disabled"
 ENV EXECJS_RUNTIME ${EXECJS_RUNTIME}
@@ -115,7 +115,7 @@ RUN apk update && apk add --no-cache \
   && gem install bundler
 
 RUN if [ "$RAILS_ENV" != "production" ]; then \
-  apk add --no-cache nodejs-current; \
+  apk add --no-cache nodejs=20.15.1-r0; \
   # Install pnpm and configure environment
   wget -qO- https://get.pnpm.io/install.sh | ENV="$HOME/.shrc" SHELL="$(which sh)" sh - \
   && source /root/.shrc \
diff --git a/docker/dockerfiles/vite.Dockerfile b/docker/dockerfiles/vite.Dockerfile
index 2117ff691..f3da365ec 100644
--- a/docker/dockerfiles/vite.Dockerfile
+++ b/docker/dockerfiles/vite.Dockerfile
@@ -1,6 +1,9 @@
 FROM chatwoot:development
 
+ENV PNPM_HOME="/root/.local/share/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+
 RUN chmod +x docker/entrypoints/vite.sh
 
-EXPOSE 5173
-CMD ["pnpm", "run", "dev"]
+EXPOSE 3036
+CMD ["bin/vite", "dev"]
diff --git a/docker/dockerfiles/webpack.Dockerfile b/docker/dockerfiles/webpack.Dockerfile
deleted file mode 100644
index ec5cdc100..000000000
--- a/docker/dockerfiles/webpack.Dockerfile
+++ /dev/null
@@ -1,6 +0,0 @@
-FROM chatwoot:development
-
-RUN chmod +x docker/entrypoints/webpack.sh
-
-EXPOSE 3035
-CMD ["bin/webpack-dev-server"]
\ No newline at end of file
diff --git a/docker/entrypoints/vite.sh b/docker/entrypoints/vite.sh
old mode 100644
new mode 100755
index 16e57e82c..4f4b88b12
--- a/docker/entrypoints/vite.sh
+++ b/docker/entrypoints/vite.sh
@@ -1,19 +1,11 @@
 #!/bin/sh
-set -e
+set -x
 
 rm -rf /app/tmp/pids/server.pid
 rm -rf /app/tmp/cache/*
 
-pnpm install --frozen-lockfile
-
-echo "Waiting for pnpm and bundle integrity to match lockfiles...."
-PNPM="pnpm list --json | grep -q 'Missing dependencies'"
-BUNDLE="bundle check"
-
-until ! $PNPM && $BUNDLE
-do
-  sleep 2;
-done
+pnpm store prune
+pnpm install
 
 echo "Ready to run Vite development server."
 
diff --git a/docker/entrypoints/webpack.sh b/docker/entrypoints/webpack.sh
deleted file mode 100755
index d50ff1b76..000000000
--- a/docker/entrypoints/webpack.sh
+++ /dev/null
@@ -1,20 +0,0 @@
-#!/bin/sh
-set -e
-
-rm -rf /app/tmp/pids/server.pid
-rm -rf /app/tmp/cache/*
-
-yarn install --check-files
-
-echo "Waiting for yarn and bundle integrity to match lockfiles...."
-YARN="yarn check --integrity"
-BUNDLE="bundle check"
-
-until $YARN && $BUNDLE
-do
-  sleep 2;
-done
-
-echo "Ready to run webpack development server."
-
-exec "$@"

From aa57431c48c179dce615546d814668956869c90b Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 29 Oct 2024 16:10:35 +0530
Subject: [PATCH 19/39] fix: Dropdown menu issues (#10364)

---
 .../HelpCenter/ArticleCard/ArticleCard.vue    | 16 +++---
 .../HelpCenter/CategoryCard/CategoryCard.vue  | 54 ++++++++++---------
 .../HelpCenter/LocaleCard/LocaleCard.vue      | 41 +++++++-------
 .../ArticleEditorProperties.vue               |  2 +-
 .../CategoryPage/CategoryHeaderControls.vue   |  4 +-
 .../PortalSwitcher/PortalSwitcher.vue         |  2 +-
 .../components-next/button/Button.vue         |  4 +-
 .../components-next/combobox/ComboBox.vue     |  4 +-
 .../dropdown-menu/DropdownMenu.vue            | 10 ++--
 .../FluentIcon/dashboard-icons.json           | 18 +------
 10 files changed, 73 insertions(+), 82 deletions(-)

diff --git a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
index bd29b5897..b9ee171f8 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
+import { useToggle } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import { dynamicTime } from 'shared/helpers/timeHelper';
 import {
@@ -49,7 +50,7 @@ const emit = defineEmits(['openArticle', 'articleAction']);
 
 const { t } = useI18n();
 
-const isOpen = ref(false);
+const [showActionsDropdown, toggleDropdown] = useToggle();
 
 const articleMenuItems = computed(() => {
   const commonItems = Object.entries(ARTICLE_MENU_ITEMS).reduce(
@@ -112,7 +113,7 @@ const lastUpdatedAt = computed(() => {
 });
 
 const handleArticleAction = ({ action, value }) => {
-  isOpen.value = false;
+  toggleDropdown(false);
   emit('articleAction', { action, value, id: props.id });
 };
 
@@ -139,19 +140,18 @@ const handleClick = id => {
             {{ statusText }}
           </span>
           <div
-            v-on-clickaway="() => (isOpen = false)"
+            v-on-clickaway="() => toggleDropdown(false)"
             class="relative flex items-center group"
-            @click.stop
           >
             <Button
               icon="i-lucide-ellipsis-vertical"
               color="slate"
               size="xs"
-              class="group-hover:bg-n-solid-2 !p-0.5 rounded-md"
-              @click="isOpen = !isOpen"
+              class="rounded-md group-hover:bg-n-alpha-2"
+              @click="toggleDropdown()"
             />
             <DropdownMenu
-              v-if="isOpen"
+              v-if="showActionsDropdown"
               :menu-items="articleMenuItems"
               class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full"
               @action="handleArticleAction($event)"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
index 9d800dbab..27cec17e9 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { ref, computed } from 'vue';
-import { OnClickOutside } from '@vueuse/components';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
 
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -38,20 +38,20 @@ const emit = defineEmits(['click', 'action']);
 
 const { t } = useI18n();
 
-const isOpen = ref(false);
+const [showActionsDropdown, toggleDropdown] = useToggle();
 
 const categoryMenuItems = [
   {
     label: 'Edit',
     action: 'edit',
     value: 'edit',
-    icon: 'edit',
+    icon: 'i-lucide-pencil',
   },
   {
     label: 'Delete',
     action: 'delete',
     value: 'delete',
-    icon: 'delete',
+    icon: 'i-lucide-trash',
   },
 ];
 
@@ -73,7 +73,7 @@ const handleClick = slug => {
 
 const handleAction = ({ action, value }) => {
   emit('action', { action, value, id: props.id });
-  isOpen.value = false;
+  toggleDropdown(false);
 };
 </script>
 
@@ -81,16 +81,16 @@ const handleAction = ({ action, value }) => {
   <CardLayout>
     <template #header>
       <div class="flex gap-2">
-        <div class="flex justify-between w-full gap-1">
-          <div class="flex items-center justify-start gap-2">
+        <div class="flex justify-between w-full gap-2">
+          <div class="flex items-center justify-start w-full min-w-0 gap-2">
             <span
-              class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12 line-clamp-1"
+              class="text-base truncate cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12"
               @click="handleClick(slug)"
             >
               {{ categoryTitleWithIcon }}
             </span>
             <span
-              class="inline-flex items-center justify-center h-6 px-2 py-1 text-xs text-center truncate border rounded-lg min-w-fit text-slate-500 w-fit border-slate-200 dark:border-slate-800 dark:text-slate-400"
+              class="inline-flex items-center justify-center h-6 px-2 py-1 text-xs text-center border rounded-lg bg-n-slate-1 whitespace-nowrap shrink-0 text-n-slate-11 border-n-slate-4"
             >
               {{
                 t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_CARD.ARTICLES_COUNT', {
@@ -99,22 +99,24 @@ const handleAction = ({ action, value }) => {
               }}
             </span>
           </div>
-          <div class="relative group" @click.stop>
-            <OnClickOutside @trigger="isOpen = false">
-              <Button
-                icon="i-lucide-ellipsis-vertical"
-                color="slate"
-                size="xs"
-                class="rounded-md group-hover:bg-n-solid-2"
-                @click="isOpen = !isOpen"
-              />
-              <DropdownMenu
-                v-if="isOpen"
-                :menu-items="categoryMenuItems"
-                class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full z-60"
-                @action="handleAction"
-              />
-            </OnClickOutside>
+          <div
+            v-on-clickaway="() => toggleDropdown(false)"
+            class="relative group"
+          >
+            <Button
+              icon="i-lucide-ellipsis-vertical"
+              color="slate"
+              size="xs"
+              variant="ghost"
+              class="rounded-md group-hover:bg-n-alpha-2"
+              @click="toggleDropdown()"
+            />
+            <DropdownMenu
+              v-if="showActionsDropdown"
+              :menu-items="categoryMenuItems"
+              class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full z-60"
+              @action="handleAction"
+            />
           </div>
         </div>
       </div>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue b/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
index 7176304b1..d0ec47d17 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { ref, computed } from 'vue';
-import { OnClickOutside } from '@vueuse/components';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
 import { LOCALE_MENU_ITEMS } from 'dashboard/helper/portalHelper';
 
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
@@ -35,7 +35,7 @@ const emit = defineEmits(['action']);
 
 const { t } = useI18n();
 
-const showDropdownMenu = ref(false);
+const [showDropdownMenu, toggleDropdown] = useToggle();
 
 const localeMenuItems = computed(() =>
   LOCALE_MENU_ITEMS.map(item => ({
@@ -47,7 +47,7 @@ const localeMenuItems = computed(() =>
 
 const handleAction = ({ action, value }) => {
   emit('action', { action, value });
-  showDropdownMenu.value = false;
+  toggleDropdown(false);
 };
 </script>
 
@@ -92,23 +92,24 @@ const handleAction = ({ action, value }) => {
               }}
             </span>
           </div>
-          <div class="relative group">
-            <OnClickOutside @trigger="showDropdownMenu = false">
-              <Button
-                icon="i-lucide-ellipsis-vertical"
-                color="slate"
-                size="xs"
-                class="rounded-md group-hover:bg-n-solid-2"
-                @click="showDropdownMenu = !showDropdownMenu"
-              />
+          <div
+            v-on-clickaway="() => toggleDropdown(false)"
+            class="relative group"
+          >
+            <Button
+              icon="i-lucide-ellipsis-vertical"
+              color="slate"
+              size="xs"
+              class="rounded-md group-hover:bg-n-alpha-2"
+              @click="toggleDropdown()"
+            />
 
-              <DropdownMenu
-                v-if="showDropdownMenu"
-                :menu-items="localeMenuItems"
-                class="ltr:right-0 rtl:left-0 mt-1 xl:ltr:left-0 xl:rtl:right-0 top-full z-60 min-w-[150px]"
-                @action="handleAction"
-              />
-            </OnClickOutside>
+            <DropdownMenu
+              v-if="showDropdownMenu"
+              :menu-items="localeMenuItems"
+              class="ltr:right-0 rtl:left-0 mt-1 xl:ltr:left-0 xl:rtl:right-0 top-full z-60 min-w-[150px]"
+              @action="handleAction"
+            />
           </div>
         </div>
       </div>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
index 123aa7874..0a49be942 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
@@ -52,7 +52,7 @@ onMounted(() => {
 
 <template>
   <div
-    class="flex flex-col absolute w-[400px] bg-n-alpha-3 backdrop-blur-[100px] shadow-lg gap-6 rounded-xl p-6"
+    class="flex flex-col absolute w-[400px] 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>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue
index 51134faec..a13e807b8 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue
@@ -147,7 +147,9 @@ const handleBreadcrumbClick = () => {
         </OnClickOutside>
       </div>
       <div class="w-px h-3.5 rounded my-auto bg-slate-75 dark:bg-slate-800" />
-      <span class="text-sm font-medium text-slate-800 dark:text-slate-100">
+      <span
+        class="min-w-0 text-sm font-medium truncate text-slate-800 dark:text-slate-100"
+      >
         {{
           t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.CATEGORIES_COUNT', {
             n: categoriesCount,
diff --git a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
index c5b140530..f88bd99e3 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
@@ -106,7 +106,7 @@ const redirectToPortalHomePage = () => {
             {{ t('HELP_CENTER.PORTAL_SWITCHER.PORTALS') }}
           </h2>
           <Button
-            icon="arrow-up-right-lucide"
+            icon="i-lucide-arrow-up-right"
             variant="ghost"
             icon-lib="lucide"
             size="sm"
diff --git a/app/javascript/dashboard/components-next/button/Button.vue b/app/javascript/dashboard/components-next/button/Button.vue
index 4eae31729..7c0bc1b44 100644
--- a/app/javascript/dashboard/components-next/button/Button.vue
+++ b/app/javascript/dashboard/components-next/button/Button.vue
@@ -45,7 +45,7 @@ const slots = useSlots();
 const STYLE_CONFIG = {
   colors: {
     blue: {
-      solid: 'bg-n-brand text-white hover:bg-n-blue-text outline-transparent',
+      solid: 'bg-n-brand text-white hover:brightness-110 outline-transparent',
       faded:
         'bg-n-brand/10 text-n-slate-12 hover:bg-n-brand/20 outline-transparent',
       outline: 'text-n-blue-text hover:bg-n-brand/10 outline-n-blue-border',
@@ -67,7 +67,7 @@ const STYLE_CONFIG = {
     },
     slate: {
       solid:
-        'bg-n-solid-3 hover:bg-n-solid-2 text-n-slate-12 outline-n-container',
+        'bg-n-solid-3 dark:hover:bg-n-solid-2 hover:bg-n-alpha-2 text-n-slate-12 outline-n-container',
       faded:
         'bg-n-slate-9/10 text-n-slate-12 hover:bg-n-slate-9/20 outline-transparent',
       outline: 'text-n-slate-11 outline-n-strong hover:bg-n-slate-9/10',
diff --git a/app/javascript/dashboard/components-next/combobox/ComboBox.vue b/app/javascript/dashboard/components-next/combobox/ComboBox.vue
index f48ec100c..30b779604 100644
--- a/app/javascript/dashboard/components-next/combobox/ComboBox.vue
+++ b/app/javascript/dashboard/components-next/combobox/ComboBox.vue
@@ -128,9 +128,9 @@ watch(
           <li
             v-for="option in filteredOptions"
             :key="option.value"
-            class="flex items-center justify-between !text-n-slate-12 w-full gap-2 px-3 py-2 text-sm transition-colors duration-150 cursor-pointer hover:bg-n-solid-2"
+            class="flex items-center justify-between !text-n-slate-12 w-full gap-2 px-3 py-2 text-sm transition-colors duration-150 cursor-pointer hover:bg-n-alpha-2"
             :class="{
-              'bg-n-solid-2': option.value === selectedValue,
+              'bg-n-alpha-2': option.value === selectedValue,
             }"
             role="option"
             :aria-selected="option.value === selectedValue"
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
index b6d2a6827..1a031c7c6 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
@@ -27,7 +27,7 @@ const handleAction = (action, value) => {
 
 <template>
   <div
-    class="bg-n-alpha-3 backdrop-blur-[100px] absolute rounded-xl z-50 py-2 px-2 gap-2 flex flex-col min-w-[136px] shadow-lg"
+    class="bg-n-alpha-3 backdrop-blur-[100px] border-0 outline outline-1 outline-n-container absolute rounded-xl z-50 py-2 px-2 gap-2 flex flex-col min-w-[136px] shadow-lg"
   >
     <button
       v-for="item in menuItems"
@@ -48,9 +48,11 @@ const handleAction = (action, value) => {
         :size="thumbnailSize"
         :src="item.thumbnail.src"
       />
-      <Icon v-if="item.icon" :icon="item.icon" />
-      <span v-if="item.emoji">{{ item.emoji }}</span>
-      <span v-if="item.label" class="text-sm">{{ item.label }}</span>
+      <Icon v-if="item.icon" :icon="item.icon" class="flex-shrink-0" />
+      <span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
+      <span v-if="item.label" class="min-w-0 text-sm truncate">{{
+        item.label
+      }}</span>
     </button>
   </div>
 </template>
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index fa0280412..918d012be 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -285,21 +285,5 @@
     "M9.60364 9.20645C9.60364 8.67008 10.0385 8.23523 10.5749 8.23523C11.1113 8.23523 11.5461 8.67008 11.5461 9.20645V11.4511C11.5461 11.9875 11.1113 12.4223 10.5749 12.4223C10.0385 12.4223 9.60364 11.9875 9.60364 11.4511V9.20645Z",
     "M17.1442 5.57049C13.5275 5.06019 10.5793 5.04007 6.88135 5.56825C5.9466 5.70176 5.32812 5.79197 4.85654 5.92976C4.41928 6.05757 4.17061 6.20994 3.96492 6.43984C3.539 6.91583 3.48286 7.45419 3.4248 9.33184C3.36775 11.1772 3.48076 12.831 3.69481 14.6918C3.80887 15.6834 3.88736 16.3526 4.01268 16.8613C4.13155 17.3439 4.27532 17.6034 4.47513 17.802C4.67654 18.0023 4.93467 18.1435 5.40841 18.2581C5.90952 18.3793 6.56702 18.4526 7.5442 18.5592C10.7045 18.904 13.0702 18.9022 16.2423 18.561C17.2313 18.4546 17.8995 18.3813 18.4081 18.2609C18.8913 18.1465 19.1511 18.0063 19.3497 17.8118C19.5442 17.6213 19.6928 17.3587 19.8217 16.852C19.9561 16.3234 20.0476 15.624 20.18 14.5966C20.4162 12.7633 20.5863 11.1533 20.5929 9.3896C20.5999 7.50391 20.5613 6.96737 20.1306 6.46971C19.9226 6.22932 19.6696 6.0713 19.2224 5.93968C18.7395 5.79754 18.1042 5.70594 17.1442 5.57049ZM6.65555 3.98715C10.5078 3.43695 13.6072 3.45849 17.3674 3.98902L17.4224 3.99678C18.3127 4.12235 19.0648 4.22844 19.6733 4.40753C20.33 4.60078 20.8792 4.89417 21.3382 5.4245C22.2041 6.42482 22.1984 7.6117 22.1909 9.18858C22.1905 9.25686 22.1902 9.32584 22.19 9.3956C22.183 11.2604 22.0026 12.949 21.764 14.8006L21.7577 14.8496C21.6332 15.8159 21.5307 16.6121 21.3695 17.2458C21.2 17.9121 20.9467 18.4833 20.4672 18.9529C19.9919 19.4183 19.4302 19.6602 18.776 19.8151C18.1582 19.9613 17.3895 20.044 16.4629 20.1436L16.4131 20.149C13.1283 20.5023 10.6472 20.5043 7.37097 20.1469L7.32043 20.1414C6.40679 20.0417 5.64604 19.9587 5.03292 19.8104C4.38112 19.6527 3.82317 19.406 3.34911 18.9347C2.87346 18.4618 2.62363 17.8999 2.46191 17.2433C2.30938 16.6241 2.22071 15.8531 2.11393 14.9246L2.10815 14.8743C1.88863 12.9659 1.76823 11.23 1.82845 9.28246C1.83063 9.2118 1.83272 9.14191 1.83479 9.07281C1.8816 7.50776 1.91671 6.33374 2.7747 5.37486C3.22992 4.86612 3.76798 4.58399 4.40853 4.39678C5.00257 4.22316 5.73505 4.11858 6.60207 3.99479C6.61981 3.99225 6.63764 3.9897 6.65555 3.98715Z"
   ],
-  "scan-person-outline": "M5.25 3.5A1.75 1.75 0 0 0 3.5 5.25v3a.75.75 0 0 1-1.5 0v-3A3.25 3.25 0 0 1 5.25 2h3a.75.75 0 0 1 0 1.5zm0 17a1.75 1.75 0 0 1-1.75-1.75v-3a.75.75 0 0 0-1.5 0v3A3.25 3.25 0 0 0 5.25 22h3a.75.75 0 0 0 .707-1l-.005-.015a.75.75 0 0 0-.702-.485zM20.5 5.25a1.75 1.75 0 0 0-1.75-1.75h-3a.75.75 0 0 1 0-1.5h3A3.25 3.25 0 0 1 22 5.25v3a.75.75 0 0 1-1.5 0zM18.75 20.5a1.75 1.75 0 0 0 1.75-1.75v-3a.75.75 0 0 1 1.5 0v3A3.25 3.25 0 0 1 18.75 22h-3a.75.75 0 0 1 0-1.5zM6.5 18.616q0 .465.258.884H5.25a1 1 0 0 1-.129-.011A3.1 3.1 0 0 1 5 18.616v-.366A2.25 2.25 0 0 1 7.25 16h9.5A2.25 2.25 0 0 1 19 18.25v.366c0 .31-.047.601-.132.875a1 1 0 0 1-.118.009h-1.543a1.56 1.56 0 0 0 .293-.884v-.366a.75.75 0 0 0-.75-.75h-9.5a.75.75 0 0 0-.75.75zm8.25-8.866a2.75 2.75 0 1 0-5.5 0a2.75 2.75 0 0 0 5.5 0m1.5 0a4.25 4.25 0 1 1-8.5 0a4.25 4.25 0 0 1 8.5 0",
-
-  "play-shape-outline": "M3.7 11q-.575 0-.862-.488t-.013-.987l3.3-5.95q.275-.5.875-.5t.875.5l3.3 5.95q.275.5-.012.988T10.3 11zM7 21q-1.65 0-2.825-1.175T3 17q0-1.675 1.175-2.838T7 13q1.65 0 2.825 1.175T11 17q0 1.65-1.175 2.825T7 21m0-2q.825 0 1.412-.587T9 17q0-.825-.587-1.412T7 15q-.825 0-1.412.588T5 17q0 .825.588 1.413T7 19M5.4 9h3.2L7 6.125zM14 21q-.425 0-.712-.288T13 20v-6q0-.425.288-.712T14 13h6q.425 0 .713.288T21 14v6q0 .425-.288.713T20 21zm1-2h4v-4h-4zm.6-12.5l-1.9-1.9q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275L17 5.1l1.9-1.9q.275-.275.7-.275t.7.275q.275.275.275.7t-.275.7l-1.9 1.9l1.9 1.9q.275.275.275.7t-.275.7q-.275.275-.7.275t-.7-.275L17 7.9l-1.9 1.9q-.275.275-.7.275t-.7-.275q-.275-.275-.275-.7t.275-.7z",
-  "upload-lucide-outline": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4m14-7l-5-5l-5 5m5-5v12",
-  "chevrons-lucide-left-outline": "m11 17l-5-5l5-5m7 10l-5-5l5-5",
-  "chevrons-lucide-right-outline": "m6 17l5-5l-5-5m7 10l5-5l-5-5",
-  "chevron-lucide-left-outline": "m15 18l-6-6l6-6",
-  "chevron-lucide-right-outline": "m9 18l6-6l-6-6",
-  "chevron-lucide-up-outline": "m18 15l-6-6l-6 6",
-  "chevron-lucide-down-outline": "m6 9l6 6l6-6",
-  "checkmark-lucide-outline": "M20 6L9 17l-5-5",
-  "pipette-lucide-outline": [
-    "m2 22l1-1h3l9-9M3 21v-3l9-9",
-    "m15 6l3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3z"
-  ],
-  "building-lucide-outline": "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Zm0-10H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2M10 6h4m-4 4h4m-4 4h4m-4 4h4",
-  "arrow-up-right-lucide-outline": "M7 7h10v10M7 17L17 7"
+  "scan-person-outline": "M5.25 3.5A1.75 1.75 0 0 0 3.5 5.25v3a.75.75 0 0 1-1.5 0v-3A3.25 3.25 0 0 1 5.25 2h3a.75.75 0 0 1 0 1.5zm0 17a1.75 1.75 0 0 1-1.75-1.75v-3a.75.75 0 0 0-1.5 0v3A3.25 3.25 0 0 0 5.25 22h3a.75.75 0 0 0 .707-1l-.005-.015a.75.75 0 0 0-.702-.485zM20.5 5.25a1.75 1.75 0 0 0-1.75-1.75h-3a.75.75 0 0 1 0-1.5h3A3.25 3.25 0 0 1 22 5.25v3a.75.75 0 0 1-1.5 0zM18.75 20.5a1.75 1.75 0 0 0 1.75-1.75v-3a.75.75 0 0 1 1.5 0v3A3.25 3.25 0 0 1 18.75 22h-3a.75.75 0 0 1 0-1.5zM6.5 18.616q0 .465.258.884H5.25a1 1 0 0 1-.129-.011A3.1 3.1 0 0 1 5 18.616v-.366A2.25 2.25 0 0 1 7.25 16h9.5A2.25 2.25 0 0 1 19 18.25v.366c0 .31-.047.601-.132.875a1 1 0 0 1-.118.009h-1.543a1.56 1.56 0 0 0 .293-.884v-.366a.75.75 0 0 0-.75-.75h-9.5a.75.75 0 0 0-.75.75zm8.25-8.866a2.75 2.75 0 1 0-5.5 0a2.75 2.75 0 0 0 5.5 0m1.5 0a4.25 4.25 0 1 1-8.5 0a4.25 4.25 0 0 1 8.5 0"
 }

From 87719a8fcd8e8bbc175ce307d2fe42decd11ba7d Mon Sep 17 00:00:00 2001
From: Vishnu Narayanan <iamwishnu@gmail.com>
Date: Tue, 29 Oct 2024 16:41:12 +0530
Subject: [PATCH 20/39] chore: fix pnpm path in rails and memory issue during
 vite build (#10366)

- Fix pnpm path in rails
- Fix memory issue during vite build


Fixes https://github.com/chatwoot/chatwoot/issues/10356
---
 docker/Dockerfile                   | 2 +-
 docker/dockerfiles/rails.Dockerfile | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/docker/Dockerfile b/docker/Dockerfile
index 14618bf61..d99aa6cf7 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -13,7 +13,7 @@ ENV RAILS_SERVE_STATIC_FILES ${RAILS_SERVE_STATIC_FILES}
 ARG RAILS_ENV=production
 ENV RAILS_ENV ${RAILS_ENV}
 
-ARG NODE_OPTIONS="--openssl-legacy-provider"
+ARG NODE_OPTIONS="--max-old-space-size=4096 --openssl-legacy-provider"
 ENV NODE_OPTIONS ${NODE_OPTIONS}
 
 ENV BUNDLE_PATH="/gems"
diff --git a/docker/dockerfiles/rails.Dockerfile b/docker/dockerfiles/rails.Dockerfile
index 5eafdb8be..8617ba8ce 100644
--- a/docker/dockerfiles/rails.Dockerfile
+++ b/docker/dockerfiles/rails.Dockerfile
@@ -1,5 +1,8 @@
 FROM chatwoot:development
 
+ENV PNPM_HOME="/root/.local/share/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+
 RUN chmod +x docker/entrypoints/rails.sh
 
 EXPOSE 3000

From 6da6a80ae7fe8f1324948e59668e8c112d2ef31c Mon Sep 17 00:00:00 2001
From: Vishnu Narayanan <iamwishnu@gmail.com>
Date: Tue, 29 Oct 2024 17:13:17 +0530
Subject: [PATCH 21/39] chore: force pnpm install in vite docker (#10367)

 - Force `pnpm install` during vite docker image
---
 docker/entrypoints/vite.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docker/entrypoints/vite.sh b/docker/entrypoints/vite.sh
index 4f4b88b12..8af968ff7 100755
--- a/docker/entrypoints/vite.sh
+++ b/docker/entrypoints/vite.sh
@@ -5,7 +5,7 @@ rm -rf /app/tmp/pids/server.pid
 rm -rf /app/tmp/cache/*
 
 pnpm store prune
-pnpm install
+pnpm install --force
 
 echo "Ready to run Vite development server."
 

From 2d35fa135b17fc68d594d2b7f0e693ec51fef924 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 30 Oct 2024 10:50:37 +0530
Subject: [PATCH 22/39] feat: Update colors (#10365)

---
 app/javascript/dashboard/assets/scss/_woot.scss | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index 95bda096d..e3474e616 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -112,8 +112,8 @@
     --teal-12: 13 61 56;
 
     --background-color: 253 253 253;
-    --border-blue: 39, 129, 246, 0.5;
-    --border-container: 236, 236, 236, 1;
+    --text-blue: 8 109 224;
+    --border-container: 236 236 236;
     --border-strong: 235 235 235;
     --border-weak: 234 234 234;
     --solid-1: 255 255 255;
@@ -122,14 +122,13 @@
     --solid-active: 255 255 255;
     --solid-amber: 252 232 193;
     --solid-blue: 218 236 255;
-    --text-blue: 8, 109, 224, 1;
 
-    /* alpha is added by default */
     --alpha-1: 67, 67, 67, 0.06;
     --alpha-2: 201, 202, 207, 0.15;
     --alpha-3: 255, 255, 255, 0.96;
     --black-alpha-1: 0, 0, 0, 0.12;
     --black-alpha-2: 0, 0, 0, 0.04;
+    --border-blue: 39, 129, 246, 0.5;
     --white-alpha: 255, 255, 255, 0.1;
   }
 
@@ -188,8 +187,6 @@
     --teal-12: 173 240 221;
 
     --background-color: 18 18 19;
-    --border-blue: 39, 129, 246, 0.5;
-    --border-container: 236, 236, 236, 0;
     --border-strong: 52 52 52;
     --border-weak: 38 38 42;
     --solid-1: 23 23 26;
@@ -198,14 +195,15 @@
     --solid-active: 53 57 66;
     --solid-amber: 42 37 30;
     --solid-blue: 16 49 91;
-    --text-blue: 126, 182, 255, 1;
+    --text-blue: 126 182 255;
 
-    /* alpha is added by default */
     --alpha-1: 36, 36, 36, 0.8;
     --alpha-2: 139, 147, 182, 0.15;
     --alpha-3: 36, 38, 45, 0.9;
     --black-alpha-1: 0, 0, 0, 0.3;
     --black-alpha-2: 0, 0, 0, 0.2;
+    --border-blue: 39, 129, 246, 0.5;
+    --border-container: 236, 236, 236, 0;
     --white-alpha: 255, 255, 255, 0.1;
   }
   /* NEXT COLORS END */

From 6e6c5a2f021df7fcf2f0d40e7aba8e83a0f146e9 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 31 Oct 2024 09:39:18 +0530
Subject: [PATCH 23/39] refactor: use css only last item detection (#10363)

The last item in the sidebar top level group has an indicator specified,
the problem in our case is that the structure can be nested and have sub
groups. So selecting the last item correctly can be tricky.

Previous implementation relied on the using DOM queries to find the last
item from a flat list of children, it would trigger on a `watch`. This
was error-prone as well as non idiomatic. The new approach is CSS-only
and reduces the unnecessary compute required.

Codepen for reference: https://codepen.io/scmmishra/pen/yLmKNLW

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
---
 .../components-next/sidebar/SidebarGroup.vue  | 74 ++++++++++++++-----
 .../sidebar/SidebarGroupLeaf.vue              | 41 ----------
 2 files changed, 57 insertions(+), 58 deletions(-)

diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
index f4ffcd0cd..89d99d402 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, watch, ref } from 'vue';
+import { computed } from 'vue';
 import { useSidebarContext } from './provider';
 import { useRoute, useRouter } from 'vue-router';
 import Policy from 'dashboard/components/policy.vue';
@@ -26,17 +26,6 @@ const {
   isAllowed,
 } = useSidebarContext();
 
-const parentEl = ref(null);
-
-const locateLastChild = async () => {
-  const children = parentEl.value?.querySelectorAll('.child-item');
-  if (!children) return;
-
-  children.forEach((child, index) => {
-    child.classList.toggle('last-child-item', index === children.length - 1);
-  });
-};
-
 const navigableChildren = computed(() => {
   return props.children?.flatMap(child => child.children || child) || [];
 });
@@ -103,10 +92,6 @@ const toggleTrigger = () => {
   }
   setExpandedItem(props.name);
 };
-
-watch([expandedItem, accessibleItems], locateLastChild, {
-  immediate: true,
-});
 </script>
 
 <!-- eslint-disable-next-line vue/no-root-v-if -->
@@ -132,7 +117,6 @@ watch([expandedItem, accessibleItems], locateLastChild, {
     <ul
       v-if="hasChildren"
       v-show="isExpanded || hasActiveChild"
-      ref="parentEl"
       class="list-none m-0 grid sidebar-group-children"
     >
       <template v-for="child in children" :key="child.name">
@@ -155,3 +139,59 @@ watch([expandedItem, accessibleItems], locateLastChild, {
     </ul>
   </Policy>
 </template>
+
+<style>
+.sidebar-group-children .child-item::before {
+  content: '';
+  position: absolute;
+  width: 0.125rem;
+  /* 0.5px */
+  height: 100%;
+}
+
+.sidebar-group-children .child-item:first-child::before {
+  border-radius: 4px 4px 0 0;
+}
+
+/* This selects the last child in a group */
+/* https://codepen.io/scmmishra/pen/yLmKNLW */
+.sidebar-group-children > .child-item:last-child::before,
+.sidebar-group-children
+  > *:last-child
+  > *:last-child
+  > .child-item:last-child::before {
+  height: 20%;
+}
+
+.sidebar-group-children > .child-item:last-child::after,
+.sidebar-group-children
+  > *:last-child
+  > *:last-child
+  > .child-item:last-child::after {
+  content: '';
+  position: absolute;
+  width: 10px;
+  height: 12px;
+  bottom: calc(50% - 2px);
+  border-bottom-width: 0.125rem;
+  border-left-width: 0.125rem;
+  border-right-width: 0px;
+  border-top-width: 0px;
+  border-radius: 0 0 0 4px;
+  left: 0;
+}
+
+.app-rtl--wrapper .sidebar-group-children > .child-item:last-child::after,
+.app-rtl--wrapper
+  .sidebar-group-children
+  > *:last-child
+  > *:last-child
+  > .child-item:last-child::after {
+  right: 0;
+  border-bottom-width: 0.125rem;
+  border-right-width: 0.125rem;
+  border-left-width: 0px;
+  border-top-width: 0px;
+  border-radius: 0 0 4px 0px;
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
index ec630d2a5..13bdb040d 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
@@ -49,44 +49,3 @@ const shouldRenderComponent = computed(() => {
     </component>
   </Policy>
 </template>
-
-<style scoped>
-.child-item::before {
-  content: '';
-  position: absolute;
-  width: 0.125rem;
-  /* 0.5px */
-  height: 100%;
-}
-
-.child-item:first-child::before {
-  border-radius: 4px 4px 0 0;
-}
-
-.last-child-item::before {
-  height: 20%;
-}
-
-.last-child-item::after {
-  content: '';
-  position: absolute;
-  width: 10px;
-  height: 12px;
-  bottom: calc(50% - 2px);
-  border-bottom-width: 0.125rem;
-  border-left-width: 0.125rem;
-  border-right-width: 0px;
-  border-top-width: 0px;
-  border-radius: 0 0 0 4px;
-  left: 0;
-}
-
-.app-rtl--wrapper .last-child-item::after {
-  right: 0;
-  border-bottom-width: 0.125rem;
-  border-right-width: 0.125rem;
-  border-left-width: 0px;
-  border-top-width: 0px;
-  border-radius: 0 0 4px 0px;
-}
-</style>

From 579efd933b80394d4d28ffe00e5c507f548fad2e Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 31 Oct 2024 11:57:13 +0530
Subject: [PATCH 24/39] feat(v4): Update the campaigns page design (#10371)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<img width="1439" alt="Screenshot 2024-10-30 at 8 58 12 PM"
src="https://github.com/user-attachments/assets/26231270-5e73-40fb-9efa-c661585ebe7c">


Fixes
https://linear.app/chatwoot/project/campaign-redesign-f82bede26ca7/overview

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
---
 .../Campaigns/CampaignCard/CampaignCard.vue   | 141 +++++++
 .../CampaignCard/LiveChatCampaignDetails.vue  |  54 +++
 .../CampaignCard/SMSCampaignDetails.vue       |  41 ++
 .../Campaigns/CampaignLayout.vue              |  52 +++
 .../EmptyState/CampaignEmptyStateContent.js   | 212 ++++++++++
 .../EmptyState/LiveChatCampaignEmptyState.vue |  39 ++
 .../EmptyState/SMSCampaignEmptyState.vue      |  38 ++
 .../Pages/CampaignPage/CampaignList.vue       |  39 ++
 .../ConfirmDeleteCampaignDialog.vue           |  49 +++
 .../EditLiveChatCampaignDialog.vue            |  76 ++++
 .../LiveChatCampaignDialog.vue                |  54 +++
 .../LiveChatCampaign/LiveChatCampaignForm.vue | 323 +++++++++++++++
 .../SMSCampaign/SMSCampaignDialog.vue         |  49 +++
 .../SMSCampaign/SMSCampaignForm.vue           | 189 +++++++++
 .../dashboard/components-next/CardLayout.vue  |   9 +-
 .../components-next/Editor/Editor.vue         | 173 ++++++++
 .../components-next/EmptyStateLayout.vue      |   2 +-
 .../EmptyState/Article/ArticleEmptyState.vue  |   2 +-
 .../Category/CategoryEmptyState.vue           |   2 +-
 .../EmptyState/Portal/PortalEmptyState.vue    |   2 +-
 .../HelpCenter/HelpCenterLayout.vue           |   2 +-
 .../Pages/CategoryPage/CategoryForm.vue       |  17 +-
 .../components-next/button/Button.vue         |   6 +-
 .../components-next/combobox/ComboBox.vue     |  80 ++--
 .../combobox/ComboBoxDropdown.vue             | 107 +++++
 .../combobox/TagMultiSelectComboBox.vue       | 183 ++++++++
 .../TagMultiSelectComboxBox.story.vue         |  55 +++
 .../components-next/dialog/Dialog.vue         |   7 +-
 .../dashboard/components-next/input/Input.vue |   9 +-
 .../components-next/sidebar/Sidebar.vue       |  19 +-
 .../components-next/textarea/TextArea.vue     |  50 ++-
 .../components-next/thumbnail/Thumbnail.vue   |   2 +-
 .../layout/config/sidebarItems/campaigns.js   |  14 +-
 .../layout/config/sidebarItems/primaryMenu.js |   2 +-
 .../components/widgets/WootWriter/Editor.vue  |  18 +-
 app/javascript/dashboard/helper/inbox.js      |  37 +-
 .../dashboard/helper/specs/inbox.spec.js      |  75 +++-
 .../dashboard/i18n/locale/en/campaign.json    | 250 ++++++-----
 .../dashboard/i18n/locale/en/settings.json    |   2 +
 .../dashboard/campaigns/campaigns.routes.js   |  60 +++
 .../pages/CampaignsPageRouteView.vue          |  28 ++
 .../campaigns/pages/LiveChatCampaignsPage.vue |  88 ++++
 .../campaigns/pages/SMSCampaignsPage.vue      |  75 ++++
 .../conversation/contact/ConversationForm.vue |   3 +-
 .../routes/dashboard/dashboard.routes.js      |   2 +
 .../settings/campaigns/AddCampaign.vue        | 389 ------------------
 .../dashboard/settings/campaigns/Campaign.vue | 106 -----
 .../settings/campaigns/CampaignCard.vue       | 115 ------
 .../settings/campaigns/CampaignsTable.vue     |  80 ----
 .../settings/campaigns/EditCampaign.vue       | 304 --------------
 .../dashboard/settings/campaigns/Index.vue    |  55 ---
 .../settings/campaigns/campaigns.routes.js    |  50 ---
 .../dashboard/settings/settings.routes.js     |   2 -
 .../dashboard/store/modules/campaigns.js      |   6 +-
 .../dashboard/store/modules/inboxes.js        |   2 +-
 .../modules/specs/campaigns/getters.spec.js   |  32 +-
 .../composables/specs/useCampaign.spec.js     |  47 ---
 .../shared/composables/useCampaign.js         |  43 --
 app/javascript/shared/mixins/inboxMixin.js    |  13 +-
 59 files changed, 2523 insertions(+), 1458 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue
 create mode 100644 app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue
 create mode 100644 app/javascript/dashboard/components-next/Campaigns/CampaignCard/SMSCampaignDetails.vue
 create mode 100644 app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
 create mode 100644 app/javascript/dashboard/components-next/Campaigns/EmptyState/CampaignEmptyStateContent.js
 create mode 100644 app/javascript/dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue
 create mode 100644 app/javascript/dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue
 create mode 100644 app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue
 create mode 100644 app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/ConfirmDeleteCampaignDialog.vue
 create mode 100644 app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue
 create mode 100644 app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue
 create mode 100644 app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue
 create mode 100644 app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue
 create mode 100644 app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue
 create mode 100644 app/javascript/dashboard/components-next/Editor/Editor.vue
 create mode 100644 app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
 create mode 100644 app/javascript/dashboard/components-next/combobox/TagMultiSelectComboBox.vue
 create mode 100644 app/javascript/dashboard/components-next/combobox/TagMultiSelectComboxBox.story.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/campaigns/campaigns.routes.js
 create mode 100644 app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/campaigns/pages/LiveChatCampaignsPage.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/campaigns/pages/SMSCampaignsPage.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js
 delete mode 100644 app/javascript/shared/composables/specs/useCampaign.spec.js
 delete mode 100644 app/javascript/shared/composables/useCampaign.js

diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue
new file mode 100644
index 000000000..dbdbb5b45
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue
@@ -0,0 +1,141 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import { getInboxIconByType } from 'dashboard/helper/inbox';
+
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import LiveChatCampaignDetails from './LiveChatCampaignDetails.vue';
+import SMSCampaignDetails from './SMSCampaignDetails.vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  message: {
+    type: String,
+    default: '',
+  },
+  isLiveChatType: {
+    type: Boolean,
+    default: false,
+  },
+  isEnabled: {
+    type: Boolean,
+    default: false,
+  },
+  status: {
+    type: String,
+    default: '',
+  },
+  sender: {
+    type: Object,
+    default: null,
+  },
+  inbox: {
+    type: Object,
+    default: null,
+  },
+  scheduledAt: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(['edit', 'delete']);
+
+const { t } = useI18n();
+
+const STATUS_COMPLETED = 'completed';
+
+const { formatMessage } = useMessageFormatter();
+
+const isActive = computed(() =>
+  props.isLiveChatType ? props.isEnabled : props.status !== STATUS_COMPLETED
+);
+
+const statusTextColor = computed(() => ({
+  'text-n-teal-11': isActive.value,
+  'text-n-slate-12': !isActive.value,
+}));
+
+const campaignStatus = computed(() => {
+  if (props.isLiveChatType) {
+    return props.isEnabled
+      ? t('CAMPAIGN.LIVE_CHAT.CARD.STATUS.ENABLED')
+      : t('CAMPAIGN.LIVE_CHAT.CARD.STATUS.DISABLED');
+  }
+
+  return props.status === STATUS_COMPLETED
+    ? t('CAMPAIGN.SMS.CARD.STATUS.COMPLETED')
+    : t('CAMPAIGN.SMS.CARD.STATUS.SCHEDULED');
+});
+
+const inboxName = computed(() => props.inbox?.name || '');
+
+const inboxIcon = computed(() => {
+  const { phone_number: phoneNumber, channel_type: type } = props.inbox;
+  return getInboxIconByType(type, phoneNumber);
+});
+</script>
+
+<template>
+  <CardLayout class="flex flex-row justify-between flex-1 gap-8" layout="row">
+    <template #header>
+      <div class="flex flex-col items-start gap-2">
+        <div class="flex justify-between gap-3 w-fit">
+          <span
+            class="text-base font-medium capitalize text-n-slate-12 line-clamp-1"
+          >
+            {{ title }}
+          </span>
+          <span
+            class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"
+            :class="statusTextColor"
+          >
+            {{ campaignStatus }}
+          </span>
+        </div>
+        <div
+          v-dompurify-html="formatMessage(message)"
+          class="text-sm text-n-slate-11 line-clamp-1 [&>p]:mb-0 h-6"
+        />
+        <div class="flex items-center w-full h-6 gap-2 overflow-hidden">
+          <LiveChatCampaignDetails
+            v-if="isLiveChatType"
+            :sender="sender"
+            :inbox-name="inboxName"
+            :inbox-icon="inboxIcon"
+          />
+          <SMSCampaignDetails
+            v-else
+            :inbox-name="inboxName"
+            :inbox-icon="inboxIcon"
+            :scheduled-at="scheduledAt"
+          />
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex items-center justify-end w-20 gap-2">
+        <Button
+          v-if="isLiveChatType"
+          variant="faded"
+          size="sm"
+          color="slate"
+          icon="i-lucide-sliders-vertical"
+          @click="emit('edit')"
+        />
+        <Button
+          variant="faded"
+          color="ruby"
+          size="sm"
+          icon="i-lucide-trash"
+          @click="emit('delete')"
+        />
+      </div>
+    </template>
+  </CardLayout>
+</template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue
new file mode 100644
index 000000000..6f8c548d4
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue
@@ -0,0 +1,54 @@
+<script setup>
+import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  sender: {
+    type: Object,
+    default: null,
+  },
+  inboxName: {
+    type: String,
+    default: '',
+  },
+  inboxIcon: {
+    type: String,
+    default: '',
+  },
+});
+
+const { t } = useI18n();
+
+const senderName = computed(
+  () => props.sender?.name || t('CAMPAIGN.LIVE_CHAT.CARD.CAMPAIGN_DETAILS.BOT')
+);
+
+const senderThumbnailSrc = computed(() => props.sender?.thumbnail);
+</script>
+
+<template>
+  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
+    {{ t('CAMPAIGN.LIVE_CHAT.CARD.CAMPAIGN_DETAILS.SENT_BY') }}
+  </span>
+  <div class="flex items-center gap-1.5 flex-shrink-0">
+    <Thumbnail
+      :author="sender || { name: senderName }"
+      :name="senderName"
+      :src="senderThumbnailSrc"
+    />
+    <span class="text-sm font-medium text-n-slate-12">
+      {{ senderName }}
+    </span>
+  </div>
+  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
+    {{ t('CAMPAIGN.LIVE_CHAT.CARD.CAMPAIGN_DETAILS.FROM') }}
+  </span>
+  <div class="flex items-center gap-1.5 flex-shrink-0">
+    <Icon :icon="inboxIcon" class="flex-shrink-0 text-n-slate-12 size-3" />
+    <span class="text-sm font-medium text-n-slate-12">
+      {{ inboxName }}
+    </span>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignCard/SMSCampaignDetails.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/SMSCampaignDetails.vue
new file mode 100644
index 000000000..0c54c43eb
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/SMSCampaignDetails.vue
@@ -0,0 +1,41 @@
+<script setup>
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import { messageStamp } from 'shared/helpers/timeHelper';
+
+import { useI18n } from 'vue-i18n';
+defineProps({
+  inboxName: {
+    type: String,
+    default: '',
+  },
+  inboxIcon: {
+    type: String,
+    default: '',
+  },
+  scheduledAt: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
+    {{ t('CAMPAIGN.SMS.CARD.CAMPAIGN_DETAILS.SENT_FROM') }}
+  </span>
+  <div class="flex items-center gap-1.5 flex-shrink-0">
+    <Icon :icon="inboxIcon" class="flex-shrink-0 text-n-slate-12 size-3" />
+    <span class="text-sm font-medium text-n-slate-12">
+      {{ inboxName }}
+    </span>
+  </div>
+
+  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
+    {{ t('CAMPAIGN.SMS.CARD.CAMPAIGN_DETAILS.ON') }}
+  </span>
+  <span class="flex-1 text-sm font-medium truncate text-n-slate-12">
+    {{ messageStamp(new Date(scheduledAt), 'LLL d, h:mm a') }}
+  </span>
+</template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
new file mode 100644
index 000000000..11006bfe3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
@@ -0,0 +1,52 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  headerTitle: {
+    type: String,
+    default: '',
+  },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['click', 'close']);
+
+const handleButtonClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
+    <header class="sticky top-0 z-10 px-6 lg:px-0">
+      <div class="w-full max-w-[900px] mx-auto">
+        <div class="flex items-center justify-between w-full h-20 gap-2">
+          <span class="text-xl font-medium text-n-slate-12">
+            {{ headerTitle }}
+          </span>
+          <div
+            v-on-clickaway="() => emit('close')"
+            class="relative group/campaign-button"
+          >
+            <Button
+              :label="buttonLabel"
+              icon="i-lucide-plus"
+              size="sm"
+              class="group-hover/campaign-button:brightness-110"
+              @click="handleButtonClick"
+            />
+            <slot name="action" />
+          </div>
+        </div>
+      </div>
+    </header>
+    <main class="flex-1 px-6 overflow-y-auto lg:px-0">
+      <div class="w-full max-w-[900px] mx-auto py-4">
+        <slot name="default" />
+      </div>
+    </main>
+  </section>
+</template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/EmptyState/CampaignEmptyStateContent.js b/app/javascript/dashboard/components-next/Campaigns/EmptyState/CampaignEmptyStateContent.js
new file mode 100644
index 000000000..4f409196f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/EmptyState/CampaignEmptyStateContent.js
@@ -0,0 +1,212 @@
+export const ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT = [
+  {
+    id: 1,
+    title: 'Chatbot Assistance',
+    inbox: {
+      id: 2,
+      name: 'PaperLayer Website',
+      channel_type: 'Channel::WebWidget',
+      phone_number: '',
+    },
+    sender: {
+      id: 1,
+      name: 'Alexa Rivera',
+    },
+    message: 'Hello! 👋 Need help with our chatbot features? Feel free to ask!',
+    campaign_status: 'active',
+    enabled: true,
+    campaign_type: 'ongoing',
+    trigger_rules: {
+      url: 'https://www.chatwoot.com/features/chatbot/',
+      time_on_page: 10,
+    },
+    trigger_only_during_business_hours: true,
+    created_at: '2024-10-24T13:10:26.636Z',
+    updated_at: '2024-10-24T13:10:26.636Z',
+  },
+  {
+    id: 2,
+    title: 'Pricing Information Support',
+    inbox: {
+      id: 2,
+      name: 'PaperLayer Website',
+      channel_type: 'Channel::WebWidget',
+      phone_number: '',
+    },
+    sender: {
+      id: 1,
+      name: 'Jamie Lee',
+    },
+    message: 'Hello! 👋 Any questions on pricing? I’m here to help!',
+    campaign_status: 'active',
+    enabled: false,
+    campaign_type: 'ongoing',
+    trigger_rules: {
+      url: 'https://www.chatwoot.com/pricings',
+      time_on_page: 10,
+    },
+    trigger_only_during_business_hours: false,
+    created_at: '2024-10-24T13:11:08.763Z',
+    updated_at: '2024-10-24T13:11:08.763Z',
+  },
+  {
+    id: 3,
+    title: 'Product Setup Assistance',
+    inbox: {
+      id: 2,
+      name: 'PaperLayer Website',
+      channel_type: 'Channel::WebWidget',
+      phone_number: '',
+    },
+    sender: {
+      id: 1,
+      name: 'Chatwoot',
+    },
+    message: 'Hi! Chatwoot here. Need help setting up? Let me know!',
+    campaign_status: 'active',
+    enabled: false,
+    campaign_type: 'ongoing',
+    trigger_rules: {
+      url: 'https://{*.}?chatwoot.com/apps/account/*/settings/inboxes/new/',
+      time_on_page: 10,
+    },
+    trigger_only_during_business_hours: false,
+    created_at: '2024-10-24T13:11:44.285Z',
+    updated_at: '2024-10-24T13:11:44.285Z',
+  },
+  {
+    id: 4,
+    title: 'General Assistance Campaign',
+    inbox: {
+      id: 2,
+      name: 'PaperLayer Website',
+      channel_type: 'Channel::WebWidget',
+      phone_number: '',
+    },
+    sender: {
+      id: 1,
+      name: 'Chris Barlow',
+    },
+    message:
+      'Hi there! 👋 I’m here for any questions you may have. Let’s chat!',
+    campaign_status: 'active',
+    enabled: true,
+    campaign_type: 'ongoing',
+    trigger_rules: {
+      url: 'https://siv.com',
+      time_on_page: 200,
+    },
+    trigger_only_during_business_hours: false,
+    created_at: '2024-10-29T19:54:33.741Z',
+    updated_at: '2024-10-29T19:56:26.296Z',
+  },
+];
+
+export const ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT = [
+  {
+    id: 1,
+    title: 'Customer Feedback Request',
+    inbox: {
+      id: 6,
+      name: 'PaperLayer Mobile',
+      channel_type: 'Channel::Sms',
+      phone_number: '+29818373149903',
+      provider: 'default',
+    },
+    message:
+      'Hello! Enjoying our product? Share your feedback on G2 and earn a $25 Amazon coupon: https://chwt.app/g2-review',
+    campaign_status: 'active',
+    enabled: true,
+    campaign_type: 'one_off',
+    scheduled_at: 1729775588,
+    audience: [
+      { id: 4, type: 'Label' },
+      { id: 5, type: 'Label' },
+      { id: 6, type: 'Label' },
+    ],
+    trigger_rules: {},
+    trigger_only_during_business_hours: false,
+    created_at: '2024-10-24T13:13:08.496Z',
+    updated_at: '2024-10-24T13:15:38.698Z',
+  },
+  {
+    id: 2,
+    title: 'Welcome New Customer',
+    inbox: {
+      id: 6,
+      name: 'PaperLayer Mobile',
+      channel_type: 'Channel::Sms',
+      phone_number: '+29818373149903',
+      provider: 'default',
+    },
+    message: 'Welcome aboard! 🎉 Let us know if you have any questions.',
+    campaign_status: 'completed',
+    enabled: true,
+    campaign_type: 'one_off',
+    scheduled_at: 1729732500,
+    audience: [
+      { id: 1, type: 'Label' },
+      { id: 6, type: 'Label' },
+      { id: 5, type: 'Label' },
+      { id: 2, type: 'Label' },
+      { id: 4, type: 'Label' },
+    ],
+    trigger_rules: {},
+    trigger_only_during_business_hours: false,
+    created_at: '2024-10-24T13:14:00.168Z',
+    updated_at: '2024-10-24T13:15:38.707Z',
+  },
+  {
+    id: 3,
+    title: 'New Business Welcome',
+    inbox: {
+      id: 6,
+      name: 'PaperLayer Mobile',
+      channel_type: 'Channel::Sms',
+      phone_number: '+29818373149903',
+      provider: 'default',
+    },
+    message: 'Hello! We’re excited to have your business with us!',
+    campaign_status: 'active',
+    enabled: true,
+    campaign_type: 'one_off',
+    scheduled_at: 1730368440,
+    audience: [
+      { id: 1, type: 'Label' },
+      { id: 3, type: 'Label' },
+      { id: 6, type: 'Label' },
+      { id: 4, type: 'Label' },
+      { id: 2, type: 'Label' },
+      { id: 5, type: 'Label' },
+    ],
+    trigger_rules: {},
+    trigger_only_during_business_hours: false,
+    created_at: '2024-10-30T07:54:49.915Z',
+    updated_at: '2024-10-30T07:54:49.915Z',
+  },
+  {
+    id: 4,
+    title: 'New Member Onboarding',
+    inbox: {
+      id: 6,
+      name: 'PaperLayer Mobile',
+      channel_type: 'Channel::Sms',
+      phone_number: '+29818373149903',
+      provider: 'default',
+    },
+    message: 'Welcome to the team! Reach out if you have questions.',
+    campaign_status: 'completed',
+    enabled: true,
+    campaign_type: 'one_off',
+    scheduled_at: 1730304840,
+    audience: [
+      { id: 1, type: 'Label' },
+      { id: 3, type: 'Label' },
+      { id: 6, type: 'Label' },
+    ],
+    trigger_rules: {},
+    trigger_only_during_business_hours: false,
+    created_at: '2024-10-29T16:14:10.374Z',
+    updated_at: '2024-10-30T16:15:03.157Z',
+  },
+];
diff --git a/app/javascript/dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue b/app/javascript/dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue
new file mode 100644
index 000000000..4461a7da7
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue
@@ -0,0 +1,39 @@
+<script setup>
+import { ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT } from './CampaignEmptyStateContent';
+
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <EmptyStateLayout :title="title" :subtitle="subtitle">
+    <template #empty-state-item>
+      <div class="flex flex-col gap-4 p-px">
+        <CampaignCard
+          v-for="campaign in ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT"
+          :key="campaign.id"
+          :title="campaign.title"
+          :message="campaign.message"
+          :is-enabled="campaign.enabled"
+          :status="campaign.campaign_status"
+          :trigger-rules="campaign.trigger_rules"
+          :sender="campaign.sender"
+          :inbox="campaign.inbox"
+          :scheduled-at="campaign.scheduled_at"
+          is-live-chat-type
+        />
+      </div>
+    </template>
+  </EmptyStateLayout>
+</template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue b/app/javascript/dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue
new file mode 100644
index 000000000..d0ed60abe
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue
@@ -0,0 +1,38 @@
+<script setup>
+import { ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT } from './CampaignEmptyStateContent';
+
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <EmptyStateLayout :title="title" :subtitle="subtitle">
+    <template #empty-state-item>
+      <div class="flex flex-col gap-4 p-px">
+        <CampaignCard
+          v-for="campaign in ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT"
+          :key="campaign.id"
+          :title="campaign.title"
+          :message="campaign.message"
+          :is-enabled="campaign.enabled"
+          :status="campaign.campaign_status"
+          :trigger-rules="campaign.trigger_rules"
+          :sender="campaign.sender"
+          :inbox="campaign.inbox"
+          :scheduled-at="campaign.scheduled_at"
+        />
+      </div>
+    </template>
+  </EmptyStateLayout>
+</template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue
new file mode 100644
index 000000000..80e7437a6
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue
@@ -0,0 +1,39 @@
+<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"
+      :trigger-rules="campaign.trigger_rules"
+      :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/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/ConfirmDeleteCampaignDialog.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/ConfirmDeleteCampaignDialog.vue
new file mode 100644
index 000000000..f55c88e46
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/ConfirmDeleteCampaignDialog.vue
@@ -0,0 +1,49 @@
+<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/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue
new file mode 100644
index 000000000..458ee1f1c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue
@@ -0,0 +1,76 @@
+<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"
+  >
+    <template #form>
+      <LiveChatCampaignForm
+        ref="liveChatCampaignFormRef"
+        mode="edit"
+        :selected-campaign="selectedCampaign"
+        :show-action-buttons="false"
+        @submit="handleSubmit"
+      />
+    </template>
+  </Dialog>
+</template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue
new file mode 100644
index 000000000..2c4b9848c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue
@@ -0,0 +1,54 @@
+<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.SMS.CREATE.FORM.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    const errorMessage =
+      error?.response?.message ||
+      t('CAMPAIGN.SMS.CREATE.FORM.API.ERROR_MESSAGE');
+    useAlert(errorMessage);
+  }
+};
+
+const handleClose = () => emit('close');
+
+const handleSubmit = campaignDetails => {
+  addCampaign(campaignDetails);
+  handleClose();
+};
+</script>
+
+<template>
+  <div
+    class="w-[400px] 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-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
+  >
+    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
+      {{ t(`CAMPAIGN.LIVE_CHAT.CREATE.TITLE`) }}
+    </h3>
+    <LiveChatCampaignForm
+      mode="create"
+      @submit="handleSubmit"
+      @cancel="handleClose"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue
new file mode 100644
index 000000000..1a9bc8cdf
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue
@@ -0,0 +1,323 @@
+<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 n-blue-text 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/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue
new file mode 100644
index 000000000..b190b031b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue
@@ -0,0 +1,49 @@
+<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-[400px] 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-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
+  >
+    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
+      {{ t(`CAMPAIGN.SMS.CREATE.TITLE`) }}
+    </h3>
+    <SMSCampaignForm @submit="handleSubmit" @cancel="handleClose" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue
new file mode 100644
index 000000000..653e58a9a
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue
@@ -0,0 +1,189 @@
+<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 n-blue-text 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/app/javascript/dashboard/components-next/CardLayout.vue b/app/javascript/dashboard/components-next/CardLayout.vue
index c3dccde80..a002d825c 100644
--- a/app/javascript/dashboard/components-next/CardLayout.vue
+++ b/app/javascript/dashboard/components-next/CardLayout.vue
@@ -1,4 +1,10 @@
 <script setup>
+const props = defineProps({
+  layout: {
+    type: String,
+    default: 'col',
+  },
+});
 const emit = defineEmits(['click']);
 const handleClick = () => {
   emit('click');
@@ -7,7 +13,8 @@ const handleClick = () => {
 
 <template>
   <div
-    class="relative flex flex-col w-full gap-3 px-6 py-5 shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
+    class="relative flex w-full gap-3 px-6 py-5 shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
+    :class="props.layout === 'col' ? 'flex-col' : 'flex-row'"
     @click="handleClick"
   >
     <slot name="header" />
diff --git a/app/javascript/dashboard/components-next/Editor/Editor.vue b/app/javascript/dashboard/components-next/Editor/Editor.vue
new file mode 100644
index 000000000..806534be7
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Editor/Editor.vue
@@ -0,0 +1,173 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+
+import WootEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  focusOnMount: {
+    type: Boolean,
+    default: false,
+  },
+  maxLength: {
+    type: Number,
+    default: 200,
+  },
+  showCharacterCount: {
+    type: Boolean,
+    default: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  message: {
+    type: String,
+    default: '',
+  },
+  messageType: {
+    type: String,
+    default: 'info',
+    validator: value => ['info', 'error', 'success'].includes(value),
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const isFocused = ref(false);
+
+const characterCount = computed(() => props.modelValue.length);
+
+const messageClass = computed(() => {
+  switch (props.messageType) {
+    case 'error':
+      return 'text-n-ruby-9 dark:text-n-ruby-9';
+    case 'success':
+      return 'text-green-500 dark:text-green-400';
+    default:
+      return 'text-n-slate-11 dark:text-n-slate-11';
+  }
+});
+
+const handleInput = value => {
+  if (!props.disabled) {
+    emit('update:modelValue', value);
+  }
+};
+
+const handleFocus = () => {
+  if (!props.disabled) {
+    isFocused.value = true;
+  }
+};
+
+const handleBlur = () => {
+  if (!props.disabled) {
+    isFocused.value = false;
+  }
+};
+
+watch(
+  () => props.modelValue,
+  newValue => {
+    if (props.maxLength && props.showCharacterCount) {
+      if (characterCount.value >= props.maxLength) {
+        emit('update:modelValue', newValue.slice(0, props.maxLength));
+      }
+    }
+  }
+);
+</script>
+
+<template>
+  <div class="flex flex-col min-w-0 gap-1">
+    <label v-if="label" class="mb-0.5 text-sm font-medium text-n-slate-12">
+      {{ label }}
+    </label>
+    <div
+      class="flex flex-col w-full gap-2 px-3 py-3 transition-all duration-500 ease-in-out border rounded-lg editor-wrapper bg-n-alpha-black2"
+      :class="[
+        {
+          'cursor-not-allowed opacity-50 pointer-events-none !bg-n-alpha-black2 disabled:border-n-weak dark:disabled:border-n-weak':
+            disabled,
+          'border-n-brand dark:border-n-brand': isFocused,
+          'hover:border-n-slate-6 dark:hover:border-n-slate-6 border-n-weak dark:border-n-weak':
+            !isFocused && messageType !== 'error',
+          'border-n-ruby-8 dark:border-n-ruby-8 hover:border-n-ruby-9 dark:hover:border-n-ruby-9':
+            messageType === 'error' && !isFocused,
+        },
+      ]"
+    >
+      <WootEditor
+        :model-value="modelValue"
+        :placeholder="placeholder"
+        :focus-on-mount="focusOnMount"
+        :disabled="disabled"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      />
+      <div
+        v-if="showCharacterCount"
+        class="flex items-center justify-end h-4 ltr:right-3 rtl:left-3"
+      >
+        <span class="text-xs tabular-nums text-n-slate-10">
+          {{ characterCount }} / {{ maxLength }}
+        </span>
+      </div>
+    </div>
+    <p
+      v-if="message"
+      class="min-w-0 mt-1 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
+      :class="messageClass"
+    >
+      {{ message }}
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.editor-wrapper {
+  ::v-deep {
+    .ProseMirror-menubar-wrapper {
+      @apply gap-2 !important;
+
+      .ProseMirror-menubar {
+        @apply bg-transparent dark:bg-transparent w-fit left-1 pt-0 h-5  !important;
+
+        .ProseMirror-menuitem {
+          @apply h-5 !important;
+        }
+
+        .ProseMirror-icon {
+          @apply p-1 w-3 h-3 text-n-slate-12 dark:text-n-slate-12 !important;
+        }
+      }
+      .ProseMirror.ProseMirror-woot-style {
+        p {
+          @apply first:mt-0 !important;
+        }
+
+        .empty-node {
+          @apply m-0 !important;
+
+          &::before {
+            @apply text-n-slate-11 dark:text-n-slate-11 !important;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/EmptyStateLayout.vue b/app/javascript/dashboard/components-next/EmptyStateLayout.vue
index e845ccaf6..04c478ba6 100644
--- a/app/javascript/dashboard/components-next/EmptyStateLayout.vue
+++ b/app/javascript/dashboard/components-next/EmptyStateLayout.vue
@@ -34,7 +34,7 @@ defineProps({
               {{ title }}
             </h2>
             <p
-              class="max-w-lg text-base text-center text-slate-600 dark:text-slate-300 font-interDisplay tracking-[0.3px]"
+              class="max-w-xl text-base text-center text-slate-600 dark:text-slate-300 font-interDisplay tracking-[0.3px]"
             >
               {{ subtitle }}
             </p>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue
index baa4d1691..7bdf424b2 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue
@@ -33,7 +33,7 @@ const onClick = () => {
 <template>
   <EmptyStateLayout :title="title" :subtitle="subtitle">
     <template #empty-state-item>
-      <div class="grid grid-cols-1 gap-4 overflow-hidden">
+      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
         <ArticleCard
           v-for="(article, index) in articleContent.slice(0, 5)"
           :id="article.id"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Category/CategoryEmptyState.vue b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Category/CategoryEmptyState.vue
index 0d1038579..3c6b2bc64 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Category/CategoryEmptyState.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Category/CategoryEmptyState.vue
@@ -18,7 +18,7 @@ defineProps({
 <template>
   <EmptyStateLayout :title="title" :subtitle="subtitle">
     <template #empty-state-item>
-      <div class="grid grid-cols-2 gap-4">
+      <div class="grid grid-cols-2 gap-4 p-px">
         <div class="space-y-4">
           <CategoryCard
             v-for="category in categoryContent"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue
index eb266a5fc..b7a986254 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue
@@ -28,7 +28,7 @@ const onPortalCreate = ({ slug: portalSlug, locale }) => {
     :subtitle="$t('HELP_CENTER.NEW_PAGE.DESCRIPTION')"
   >
     <template #empty-state-item>
-      <div class="grid grid-cols-2 gap-4">
+      <div class="grid grid-cols-2 gap-4 p-px">
         <div class="space-y-4">
           <ArticleCard
             v-for="(article, index) in articleContent"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
index 3690bc571..d884b3557 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
@@ -67,7 +67,7 @@ const togglePortalSwitcher = () => {
         >
           <span
             v-if="activePortalName"
-            class="text-xl font-medium text-slate-900 dark:text-white"
+            class="text-xl font-medium text-n-slate-12"
           >
             {{ activePortalName }}
           </span>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
index c07367bdc..b0adfa6e9 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
@@ -157,24 +157,24 @@ defineExpose({ state, isSubmitDisabled });
 <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-slate-50 dark:border-slate-700/50"
+      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-slate-700 dark:text-slate-300">
+        <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-slate-800 dark:text-slate-100">
+        <span class="text-sm text-n-slate-12">
           {{ portalName }}
         </span>
       </div>
-      <div class="justify-start w-px h-10 bg-slate-50 dark:bg-slate-700/50" />
+      <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-slate-700 dark:text-slate-300">
+        <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-slate-800 dark:text-slate-100"
+          class="text-sm line-clamp-1 text-n-slate-12"
         >
           {{ `${activeLocaleName} (${activeLocaleCode})` }}
         </span>
@@ -192,7 +192,7 @@ defineExpose({ state, isSubmitDisabled });
           "
           :message="nameError"
           :message-type="nameError ? 'error' : 'info'"
-          custom-input-class="!h-10 ltr:!pl-12 rtl:!pr-12 !bg-slate-25 dark:!bg-slate-900"
+          custom-input-class="!h-10 ltr:!pl-12 rtl:!pr-12"
         >
           <template #prefix>
             <OnClickOutside @trigger="isEmojiPickerOpen = false">
@@ -223,7 +223,7 @@ defineExpose({ state, isSubmitDisabled });
         :disabled="isEditMode"
         :message="slugError ? slugError : slugHelpText"
         :message-type="slugError ? 'error' : 'info'"
-        custom-input-class="!h-10 !bg-slate-25 dark:!bg-slate-900 "
+        custom-input-class="!h-10"
       />
       <TextArea
         v-model="state.description"
@@ -236,7 +236,6 @@ defineExpose({ state, isSubmitDisabled });
           )
         "
         show-character-count
-        custom-text-area-wrapper-class="!bg-slate-25 dark:!bg-slate-900"
       />
       <div
         v-if="showActionButtons"
diff --git a/app/javascript/dashboard/components-next/button/Button.vue b/app/javascript/dashboard/components-next/button/Button.vue
index 7c0bc1b44..67918be2e 100644
--- a/app/javascript/dashboard/components-next/button/Button.vue
+++ b/app/javascript/dashboard/components-next/button/Button.vue
@@ -48,14 +48,14 @@ const STYLE_CONFIG = {
       solid: 'bg-n-brand text-white hover:brightness-110 outline-transparent',
       faded:
         'bg-n-brand/10 text-n-slate-12 hover:bg-n-brand/20 outline-transparent',
-      outline: 'text-n-blue-text hover:bg-n-brand/10 outline-n-blue-border',
+      outline: 'text-n-blue-text outline-n-blue-border',
       link: 'text-n-brand hover:underline outline-transparent',
     },
     ruby: {
       solid: 'bg-n-ruby-9 text-white hover:bg-n-ruby-10 outline-transparent',
       faded:
-        'bg-n-ruby-9/10 text-n-slate-12 hover:bg-n-ruby-9/20 outline-transparent',
-      outline: 'text-n-ruby-11 hover:bg-n-ruby-9/10 outline-n-ruby-9',
+        'bg-n-ruby-9/10 text-n-ruby-11 hover:bg-n-ruby-9/20 outline-transparent',
+      outline: 'text-n-ruby-11 hover:bg-n-ruby-9/10 outline-n-ruby-8',
       link: 'text-n-ruby-9 hover:underline outline-transparent',
     },
     amber: {
diff --git a/app/javascript/dashboard/components-next/combobox/ComboBox.vue b/app/javascript/dashboard/components-next/combobox/ComboBox.vue
index 30b779604..7fce6f64c 100644
--- a/app/javascript/dashboard/components-next/combobox/ComboBox.vue
+++ b/app/javascript/dashboard/components-next/combobox/ComboBox.vue
@@ -4,6 +4,7 @@ import { OnClickOutside } from '@vueuse/components';
 import { useI18n } from 'vue-i18n';
 
 import Button from 'dashboard/components-next/button/Button.vue';
+import ComboBoxDropdown from 'dashboard/components-next/combobox/ComboBoxDropdown.vue';
 
 const props = defineProps({
   options: {
@@ -36,6 +37,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  hasError: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -45,7 +50,7 @@ const { t } = useI18n();
 const selectedValue = ref(props.modelValue);
 const open = ref(false);
 const search = ref('');
-const searchInput = ref(null);
+const dropdownRef = ref(null);
 const comboboxRef = ref(null);
 
 const filteredOptions = computed(() => {
@@ -70,11 +75,13 @@ const selectOption = option => {
   open.value = false;
   search.value = '';
 };
+
 const toggleDropdown = () => {
+  if (props.disabled) return;
   open.value = !open.value;
   if (open.value) {
     search.value = '';
-    nextTick(() => searchInput.value.focus());
+    nextTick(() => dropdownRef.value?.focus());
   }
 };
 
@@ -94,67 +101,40 @@ watch(
       'cursor-not-allowed': disabled,
       'group/combobox': !disabled,
     }"
+    @click.prevent
   >
     <OnClickOutside @trigger="open = false">
       <Button
         variant="outline"
-        color="slate"
+        :color="hasError && !open ? 'ruby' : open ? 'blue' : 'slate'"
         :label="selectedLabel"
         trailing-icon
         :disabled="disabled"
         class="justify-between w-full !px-3 !py-2.5 text-n-slate-12 font-normal group-hover/combobox:border-n-slate-6"
+        :class="{ focused: open }"
         :icon="open ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
         @click="toggleDropdown"
       />
-      <div
-        v-show="open"
-        class="absolute z-50 w-full mt-1 transition-opacity duration-200 border rounded-md shadow-lg bg-n-solid-1 border-n-strong"
-      >
-        <div class="relative border-b border-n-strong">
-          <span class="absolute i-lucide-search top-2.5 size-4 left-3" />
-          <input
-            ref="searchInput"
-            v-model="search"
-            type="search"
-            :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
-            class="w-full py-2 pl-10 pr-2 text-sm border-none rounded-t-md bg-n-solid-1 text-slate-900 dark:text-slate-50"
-          />
-        </div>
-        <ul
-          class="py-1 mb-0 overflow-auto max-h-60"
-          role="listbox"
-          :aria-activedescendant="selectedValue"
-        >
-          <li
-            v-for="option in filteredOptions"
-            :key="option.value"
-            class="flex items-center justify-between !text-n-slate-12 w-full gap-2 px-3 py-2 text-sm transition-colors duration-150 cursor-pointer hover:bg-n-alpha-2"
-            :class="{
-              'bg-n-alpha-2': option.value === selectedValue,
-            }"
-            role="option"
-            :aria-selected="option.value === selectedValue"
-            @click="selectOption(option)"
-          >
-            <span :class="{ 'font-medium': option.value === selectedValue }">
-              {{ option.label }}
-            </span>
-            <span
-              v-if="option.value === selectedValue"
-              class="flex-shrink-0 i-lucide-check size-4 text-n-slate-11"
-            />
-          </li>
-          <li
-            v-if="filteredOptions.length === 0"
-            class="px-3 py-2 text-sm text-slate-600 dark:text-slate-300"
-          >
-            {{ emptyState || t('COMBOBOX.EMPTY_STATE') }}
-          </li>
-        </ul>
-      </div>
+
+      <ComboBoxDropdown
+        ref="dropdownRef"
+        :open="open"
+        :options="filteredOptions"
+        :search-value="search"
+        :search-placeholder="searchPlaceholder"
+        :empty-state="emptyState"
+        :selected-values="selectedValue"
+        @update:search-value="search = $event"
+        @select="selectOption"
+      />
+
       <p
         v-if="message"
-        class="mt-2 mb-0 text-xs truncate transition-all duration-500 ease-in-out text-n-slate-11 dark:text-n-slate-11"
+        class="mt-2 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
+        :class="{
+          'text-n-ruby-9': hasError,
+          'text-n-slate-11': !hasError,
+        }"
       >
         {{ message }}
       </p>
diff --git a/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue b/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
new file mode 100644
index 000000000..4a0e3856c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
@@ -0,0 +1,107 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    required: true,
+  },
+  options: {
+    type: Array,
+    required: true,
+  },
+  searchValue: {
+    type: String,
+    required: true,
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '',
+  },
+  emptyState: {
+    type: String,
+    default: '',
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  selectedValues: {
+    type: [String, Number, Array],
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['update:searchValue', 'select']);
+
+const { t } = useI18n();
+
+const searchInput = ref(null);
+
+const isSelected = option => {
+  if (Array.isArray(props.selectedValues)) {
+    return props.selectedValues.includes(option.value);
+  }
+  return option.value === props.selectedValues;
+};
+
+defineExpose({
+  focus: () => searchInput.value?.focus(),
+});
+</script>
+
+<template>
+  <div
+    v-show="open"
+    class="absolute z-50 w-full mt-1 transition-opacity duration-200 border rounded-md shadow-lg bg-n-solid-1 border-n-strong"
+  >
+    <div class="relative border-b border-n-strong">
+      <span class="absolute i-lucide-search top-2.5 size-4 left-3" />
+      <input
+        ref="searchInput"
+        :value="searchValue"
+        type="search"
+        :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
+        class="w-full py-2 pl-10 pr-2 text-sm border-none rounded-t-md bg-n-solid-1 text-slate-900 dark:text-slate-50"
+        @input="emit('update:searchValue', $event.target.value)"
+      />
+    </div>
+    <ul
+      class="py-1 mb-0 overflow-auto max-h-60"
+      role="listbox"
+      :aria-multiselectable="multiple"
+    >
+      <li
+        v-for="option in options"
+        :key="option.value"
+        class="flex items-center justify-between w-full gap-2 px-3 py-2 text-sm transition-colors duration-150 cursor-pointer hover:bg-n-alpha-2"
+        :class="{
+          'bg-n-alpha-2': isSelected(option),
+        }"
+        role="option"
+        :aria-selected="isSelected(option)"
+        @click="emit('select', option)"
+      >
+        <span
+          :class="{
+            'font-medium': isSelected(option),
+          }"
+          class="text-n-slate-12"
+        >
+          {{ option.label }}
+        </span>
+        <span
+          v-if="isSelected(option)"
+          class="flex-shrink-0 i-lucide-check size-4 text-n-slate-11"
+        />
+      </li>
+      <li
+        v-if="options.length === 0"
+        class="px-3 py-2 text-sm text-slate-600 dark:text-slate-300"
+      >
+        {{ emptyState || t('COMBOBOX.EMPTY_STATE') }}
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/combobox/TagMultiSelectComboBox.vue b/app/javascript/dashboard/components-next/combobox/TagMultiSelectComboBox.vue
new file mode 100644
index 000000000..4ce05bcbb
--- /dev/null
+++ b/app/javascript/dashboard/components-next/combobox/TagMultiSelectComboBox.vue
@@ -0,0 +1,183 @@
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue';
+import { OnClickOutside } from '@vueuse/components';
+import { useI18n } from 'vue-i18n';
+
+import ComboBoxDropdown from 'dashboard/components-next/combobox/ComboBoxDropdown.vue';
+
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+    validator: value =>
+      value.every(option => 'value' in option && 'label' in option),
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '',
+  },
+  emptyState: {
+    type: String,
+    default: '',
+  },
+  message: {
+    type: String,
+    default: '',
+  },
+  hasError: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { t } = useI18n();
+
+const selectedValues = ref(props.modelValue);
+const open = ref(false);
+const search = ref('');
+const dropdownRef = ref(null);
+const comboboxRef = ref(null);
+
+const filteredOptions = computed(() => {
+  const searchTerm = search.value.toLowerCase();
+  return props.options.filter(option =>
+    option.label?.toLowerCase().includes(searchTerm)
+  );
+});
+
+const selectPlaceholder = computed(() => {
+  return props.placeholder || t('COMBOBOX.PLACEHOLDER');
+});
+
+const selectedTags = computed(() => {
+  return selectedValues.value.map(value => {
+    const option = props.options.find(opt => opt.value === value);
+    return option || { value, label: value };
+  });
+});
+
+const toggleOption = option => {
+  const index = selectedValues.value.indexOf(option.value);
+  if (index === -1) {
+    selectedValues.value.push(option.value);
+  } else {
+    selectedValues.value.splice(index, 1);
+  }
+  emit('update:modelValue', selectedValues.value);
+};
+
+const removeTag = value => {
+  const index = selectedValues.value.indexOf(value);
+  if (index !== -1) {
+    selectedValues.value.splice(index, 1);
+    emit('update:modelValue', selectedValues.value);
+  }
+};
+
+const toggleDropdown = () => {
+  if (props.disabled) return;
+  open.value = !open.value;
+  if (open.value) {
+    search.value = '';
+    nextTick(() => dropdownRef.value?.focus());
+  }
+};
+
+watch(
+  () => props.modelValue,
+  newValue => {
+    selectedValues.value = newValue;
+  }
+);
+
+defineExpose({
+  toggleDropdown,
+  open,
+  disabled: props.disabled,
+});
+</script>
+
+<template>
+  <div
+    ref="comboboxRef"
+    class="relative w-full min-w-0"
+    :class="{
+      'cursor-not-allowed': disabled,
+      'group/combobox': !disabled,
+    }"
+    @click.prevent
+  >
+    <OnClickOutside @trigger="open = false">
+      <div
+        class="flex flex-wrap w-full gap-2 px-3 py-2.5 border rounded-lg cursor-pointer bg-n-alpha-black2 min-h-[42px] transition-all duration-500 ease-in-out"
+        :class="{
+          'border-n-ruby-8': hasError,
+          'border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6':
+            !hasError && !open,
+          'border-n-brand': open,
+          'cursor-not-allowed pointer-events-none opacity-50': disabled,
+        }"
+        @click="toggleDropdown"
+      >
+        <div
+          v-for="tag in selectedTags"
+          :key="tag.value"
+          class="flex items-center justify-center max-w-full gap-1 px-2 py-0.5 rounded-lg bg-n-alpha-black1"
+          @click.stop
+        >
+          <span class="flex-grow min-w-0 text-sm truncate text-n-slate-12">
+            {{ tag.label }}
+          </span>
+          <span
+            class="flex-shrink-0 cursor-pointer i-lucide-x size-3 text-n-slate-11"
+            @click="removeTag(tag.value)"
+          />
+        </div>
+        <span
+          v-if="selectedTags.length === 0"
+          class="flex items-center text-sm text-n-slate-11"
+        >
+          {{ selectPlaceholder }}
+        </span>
+      </div>
+
+      <ComboBoxDropdown
+        ref="dropdownRef"
+        :open="open"
+        :options="filteredOptions"
+        :search-value="search"
+        :search-placeholder="searchPlaceholder"
+        :empty-state="emptyState"
+        multiple
+        :selected-values="selectedValues"
+        @update:search-value="search = $event"
+        @select="toggleOption"
+      />
+
+      <p
+        v-if="message"
+        class="mt-2 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
+        :class="{
+          'text-n-ruby-9': hasError,
+          'text-n-slate-11': !hasError,
+        }"
+      >
+        {{ message }}
+      </p>
+    </OnClickOutside>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/combobox/TagMultiSelectComboxBox.story.vue b/app/javascript/dashboard/components-next/combobox/TagMultiSelectComboxBox.story.vue
new file mode 100644
index 000000000..dc4b5b0f3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/combobox/TagMultiSelectComboxBox.story.vue
@@ -0,0 +1,55 @@
+<script setup>
+import { ref } from 'vue';
+import TagMultiSelectComboBox from './TagMultiSelectComboBox.vue';
+
+const options = [
+  { value: 1, label: 'Option 1' },
+  { value: 2, label: 'Option 2' },
+  { value: 3, label: 'Option 3' },
+  { value: 4, label: 'Option 4' },
+  { value: 5, label: 'Option 5' },
+];
+const selectedValues = ref([]);
+
+const preselectedValues = ref([1, 2]);
+</script>
+
+<template>
+  <Story
+    title="Components/TagMultiSelectComboBox"
+    :layout="{ type: 'grid', width: '300px' }"
+  >
+    <Variant title="Default">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+        <TagMultiSelectComboBox v-model="selectedValues" :options="options" />
+        <p class="mt-2">Selected values: {{ selectedValues }}</p>
+      </div>
+    </Variant>
+
+    <Variant title="With Preselected Values">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+        <TagMultiSelectComboBox
+          v-model="preselectedValues"
+          :options="options"
+          placeholder="Select multiple options"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+        <TagMultiSelectComboBox :options="options" disabled />
+      </div>
+    </Variant>
+
+    <Variant title="With Error">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+        <TagMultiSelectComboBox
+          :options="options"
+          has-error
+          message="This field is required"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/dialog/Dialog.vue b/app/javascript/dashboard/components-next/dialog/Dialog.vue
index 1fa2d4064..679442e54 100644
--- a/app/javascript/dashboard/components-next/dialog/Dialog.vue
+++ b/app/javascript/dashboard/components-next/dialog/Dialog.vue
@@ -44,6 +44,10 @@ defineProps({
     type: Boolean,
     default: true,
   },
+  overflowYAuto: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['confirm', 'close']);
@@ -73,7 +77,8 @@ defineExpose({ open, close });
   <Teleport to="body">
     <dialog
       ref="dialogRef"
-      class="w-full max-w-lg overflow-visible transition-all duration-300 ease-in-out shadow-xl rounded-xl"
+      class="w-full max-w-lg transition-all duration-300 ease-in-out shadow-xl rounded-xl"
+      :class="overflowYAuto ? 'overflow-y-auto' : 'overflow-visible'"
       :dir="isRTL ? 'rtl' : 'ltr'"
       @close="close"
     >
diff --git a/app/javascript/dashboard/components-next/input/Input.vue b/app/javascript/dashboard/components-next/input/Input.vue
index 63ac6693d..da52cde19 100644
--- a/app/javascript/dashboard/components-next/input/Input.vue
+++ b/app/javascript/dashboard/components-next/input/Input.vue
@@ -38,6 +38,10 @@ const props = defineProps({
     default: 'info',
     validator: value => ['info', 'error', 'success'].includes(value),
   },
+  min: {
+    type: String,
+    default: '',
+  },
 });
 
 const emit = defineEmits(['update:modelValue', 'blur', 'input']);
@@ -73,7 +77,7 @@ const handleInput = event => {
     <label
       v-if="label"
       :for="id"
-      class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50"
+      class="mb-0.5 text-sm font-medium text-n-slate-12"
     >
       {{ label }}
     </label>
@@ -86,7 +90,8 @@ const handleInput = event => {
       :type="type"
       :placeholder="placeholder"
       :disabled="disabled"
-      class="flex w-full reset-base text-sm h-10 !px-2 !py-2.5 !mb-0 border rounded-lg focus:border-n-brand dark:focus:border-n-brand bg-white dark:bg-slate-900 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-200 dark:placeholder:text-slate-500 disabled:cursor-not-allowed disabled:opacity-50 text-slate-900 dark:text-white transition-all duration-500 ease-in-out"
+      :min="['date', 'datetime-local', 'time'].includes(type) ? min : undefined"
+      class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 border rounded-lg focus:border-n-brand dark:focus:border-n-brand bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-11 dark:placeholder:text-n-slate-11 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out"
       @input="handleInput"
       @blur="emit('blur')"
     />
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index e20d1edd3..0d4421f89 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -266,14 +266,14 @@ const menuItems = computed(() => {
       icon: 'i-lucide-megaphone',
       children: [
         {
-          name: 'Ongoing',
-          label: t('SIDEBAR.ONGOING'),
-          to: accountScopedRoute('ongoing_campaigns'),
+          name: 'Live chat',
+          label: t('SIDEBAR.LIVE_CHAT'),
+          to: accountScopedRoute('campaigns_livechat_index'),
         },
         {
-          name: 'One-off',
-          label: t('SIDEBAR.ONE_OFF'),
-          to: accountScopedRoute('one_off'),
+          name: 'SMS',
+          label: t('SIDEBAR.SMS'),
+          to: accountScopedRoute('campaigns_sms_index'),
         },
       ],
     },
@@ -281,9 +281,6 @@ const menuItems = computed(() => {
       name: 'Portals',
       label: t('SIDEBAR.HELP_CENTER.TITLE'),
       icon: 'i-lucide-library-big',
-      to: accountScopedRoute('portals_index', {
-        navigationPath: 'portals_articles_index',
-      }),
       children: [
         {
           name: 'Articles',
@@ -442,7 +439,7 @@ const menuItems = computed(() => {
 
 <template>
   <aside
-    class="w-[200px] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pt-2 pb-1"
+    class="w-[200px] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pb-1"
   >
     <section class="grid gap-2 mt-2 mb-4">
       <div class="flex items-center min-w-0 gap-2 px-2">
@@ -490,7 +487,7 @@ const menuItems = computed(() => {
       </ul>
     </nav>
     <section
-      class="p-1 border-t border-n-strong shadow-[0px_-2px_4px_0px_rgba(27,28,29,0.02)] flex-shrink-0 flex justify-between gap-2 items-center"
+      class="p-1 border-t border-n-weak shadow-[0px_-2px_4px_0px_rgba(27,28,29,0.02)] flex-shrink-0 flex justify-between gap-2 items-center"
     >
       <SidebarProfileMenu
         @open-key-shortcut-modal="emit('openKeyShortcutModal')"
diff --git a/app/javascript/dashboard/components-next/textarea/TextArea.vue b/app/javascript/dashboard/components-next/textarea/TextArea.vue
index 7b4048fe6..5e5860fad 100644
--- a/app/javascript/dashboard/components-next/textarea/TextArea.vue
+++ b/app/javascript/dashboard/components-next/textarea/TextArea.vue
@@ -58,6 +58,15 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  message: {
+    type: String,
+    default: '',
+  },
+  messageType: {
+    type: String,
+    default: 'info',
+    validator: value => ['info', 'error', 'success'].includes(value),
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -67,6 +76,17 @@ const isFocused = ref(false);
 
 const characterCount = computed(() => props.modelValue.length);
 
+const messageClass = computed(() => {
+  switch (props.messageType) {
+    case 'error':
+      return 'text-n-ruby-9 dark:text-n-ruby-9';
+    case 'success':
+      return 'text-green-500 dark:text-green-400';
+    default:
+      return 'text-n-slate-11 dark:text-n-slate-11';
+  }
+});
+
 // TODO - use "field-sizing: content" and "height: auto" in future for auto height, when available.
 const adjustHeight = () => {
   if (!props.autoHeight || !textareaRef.value) return;
@@ -85,11 +105,15 @@ const handleInput = event => {
 };
 
 const handleFocus = () => {
-  isFocused.value = true;
+  if (!props.disabled) {
+    isFocused.value = true;
+  }
 };
 
 const handleBlur = () => {
-  isFocused.value = false;
+  if (!props.disabled) {
+    isFocused.value = false;
+  }
 };
 
 // Watch for changes in modelValue to adjust height
@@ -118,19 +142,22 @@ onMounted(() => {
     <label
       v-if="label"
       :for="id"
-      class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50"
+      class="mb-0.5 text-sm font-medium text-n-slate-12"
     >
       {{ label }}
     </label>
     <div
-      class="flex flex-col gap-2 px-3 pt-3 pb-3 transition-all duration-500 ease-in-out bg-white border rounded-lg border-n-weak dark:border-n-weak dark:bg-slate-900"
+      class="flex flex-col gap-2 px-3 pt-3 pb-3 transition-all duration-500 ease-in-out border rounded-lg bg-n-alpha-black2"
       :class="[
         customTextAreaWrapperClass,
         {
-          'cursor-not-allowed opacity-50 !bg-slate-25 dark:!bg-slate-800 disabled:border-n-weak dark:disabled:border-n-weak':
+          'cursor-not-allowed opacity-50 !bg-n-alpha-black2 disabled:border-n-weak dark:disabled:border-n-weak':
             disabled,
           'border-n-brand dark:border-n-brand': isFocused,
-          'hover:border-n-slate-6 dark:hover:border-n-slate-6': !isFocused,
+          'hover:border-n-slate-6 dark:hover:border-n-slate-6 border-n-weak dark:border-n-weak':
+            !isFocused && messageType !== 'error',
+          'border-n-ruby-8 dark:border-n-ruby-8 hover:border-n-ruby-9 dark:hover:border-n-ruby-9':
+            messageType === 'error' && !isFocused,
         },
       ]"
     >
@@ -152,7 +179,7 @@ onMounted(() => {
         }"
         :disabled="disabled"
         rows="1"
-        class="flex w-full reset-base text-sm p-0 !rounded-none !bg-transparent dark:!bg-transparent !border-0 !mb-0 placeholder:text-slate-200 dark:placeholder:text-slate-500 text-slate-900 dark:text-white disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-25 dark:disabled:bg-slate-900"
+        class="flex w-full reset-base text-sm p-0 !rounded-none !bg-transparent dark:!bg-transparent !border-0 !mb-0 placeholder:text-n-slate-11 dark:placeholder:text-n-slate-11 text-n-slate-12 dark:text-n-slate-12 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-25 dark:disabled:bg-slate-900"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"
@@ -161,10 +188,17 @@ onMounted(() => {
         v-if="showCharacterCount"
         class="flex items-center justify-end h-4 mt-1 bottom-3 ltr:right-3 rtl:left-3"
       >
-        <span class="text-xs tabular-nums text-slate-300 dark:text-slate-600">
+        <span class="text-xs tabular-nums text-n-slate-10">
           {{ characterCount }} / {{ maxLength }}
         </span>
       </div>
     </div>
+    <p
+      v-if="message"
+      class="min-w-0 mt-1 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
+      :class="messageClass"
+    >
+      {{ message }}
+    </p>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue b/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue
index abc445ffa..609cd865e 100644
--- a/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue
+++ b/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue
@@ -77,7 +77,7 @@ const onImgLoad = () => {
     class="flex items-center justify-center rounded-full bg-n-slate-3 dark:bg-n-slate-4"
     :style="{ width: `${size}px`, height: `${size}px` }"
   >
-    <div v-if="author">
+    <div v-if="author" class="flex items-center justify-center">
       <img
         v-if="shouldShowImage"
         :src="src"
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/campaigns.js b/app/javascript/dashboard/components/layout/config/sidebarItems/campaigns.js
index 62bdbd635..9c3196dd6 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/campaigns.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/campaigns.js
@@ -2,23 +2,23 @@ import { frontendURL } from '../../../../helper/URLHelper';
 
 const campaigns = accountId => ({
   parentNav: 'campaigns',
-  routes: ['ongoing_campaigns', 'one_off'],
+  routes: ['campaigns_sms_index', 'campaigns_livechat_index'],
   menuItems: [
     {
       icon: 'arrow-swap',
-      label: 'ONGOING',
+      label: 'LIVE_CHAT',
       key: 'ongoingCampaigns',
       hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/campaigns/ongoing`),
-      toStateName: 'ongoing_campaigns',
+      toState: frontendURL(`accounts/${accountId}/campaigns/live_chat`),
+      toStateName: 'campaigns_livechat_index',
     },
     {
       key: 'oneOffCampaigns',
       icon: 'sound-source',
-      label: 'ONE_OFF',
+      label: 'SMS',
       hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/campaigns/one_off`),
-      toStateName: 'one_off',
+      toState: frontendURL(`accounts/${accountId}/campaigns/sms`),
+      toStateName: 'campaigns_sms_index',
     },
   ],
 });
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
index 67d05c3d6..4bd42e987 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
@@ -47,7 +47,7 @@ const primaryMenuItems = accountId => [
     label: 'CAMPAIGNS',
     featureFlag: FEATURE_FLAGS.CAMPAIGNS,
     toState: frontendURL(`accounts/${accountId}/campaigns`),
-    toStateName: 'ongoing_campaigns',
+    toStateName: 'campaigns_ongoing_index',
   },
   {
     icon: 'library',
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index 28d597862..5987a3b76 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -65,6 +65,7 @@ const props = defineProps({
   modelValue: { type: String, default: '' },
   editorId: { type: String, default: '' },
   placeholder: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
   isPrivate: { type: Boolean, default: false },
   enableSuggestions: { type: Boolean, default: true },
   overrideLineBreaks: { type: Boolean, default: false },
@@ -299,6 +300,8 @@ function handleEmptyBodyWithSignature() {
 }
 
 function focusEditor(content) {
+  if (props.disabled) return;
+
   const unrefContent = unref(content);
   if (isBodyEmpty(unrefContent) && sendWithSignature.value) {
     // reload state can be called when switching between conversations, or when drafts is loaded
@@ -561,6 +564,7 @@ function onKeydown(event) {
 function createEditorView() {
   editorView = new EditorView(editor.value, {
     state: state,
+    editable: () => !props.disabled,
     dispatchTransaction: tx => {
       state = state.apply(tx);
       editorView.updateState(state);
@@ -570,17 +574,21 @@ function createEditorView() {
     },
     handleDOMEvents: {
       keyup: () => {
-        typingIndicator.start();
-        updateImgToolbarOnDelete();
+        if (!props.disabled) {
+          typingIndicator.start();
+          updateImgToolbarOnDelete();
+        }
       },
-      keydown: (view, event) => onKeydown(event),
-      focus: () => emit('focus'),
-      click: isEditorMouseFocusedOnAnImage,
+      keydown: (view, event) => !props.disabled && onKeydown(event),
+      focus: () => !props.disabled && emit('focus'),
+      click: () => !props.disabled && isEditorMouseFocusedOnAnImage(),
       blur: () => {
+        if (props.disabled) return;
         typingIndicator.stop();
         emit('blur');
       },
       paste: (_view, event) => {
+        if (props.disabled) return;
         const data = event.clipboardData.files;
         if (data.length > 0) {
           event.preventDefault();
diff --git a/app/javascript/dashboard/helper/inbox.js b/app/javascript/dashboard/helper/inbox.js
index 71c615c4b..6f318218b 100644
--- a/app/javascript/dashboard/helper/inbox.js
+++ b/app/javascript/dashboard/helper/inbox.js
@@ -1,4 +1,28 @@
-import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
+export const INBOX_TYPES = {
+  WEB: 'Channel::WebWidget',
+  FB: 'Channel::FacebookPage',
+  TWITTER: 'Channel::TwitterProfile',
+  TWILIO: 'Channel::TwilioSms',
+  WHATSAPP: 'Channel::Whatsapp',
+  API: 'Channel::Api',
+  EMAIL: 'Channel::Email',
+  TELEGRAM: 'Channel::Telegram',
+  LINE: 'Channel::Line',
+  SMS: 'Channel::Sms',
+};
+
+const INBOX_ICON_MAP = {
+  [INBOX_TYPES.WEB]: 'i-ri-global-fill',
+  [INBOX_TYPES.FB]: 'i-ri-messenger-fill',
+  [INBOX_TYPES.TWITTER]: 'i-ri-twitter-x-fill',
+  [INBOX_TYPES.WHATSAPP]: 'i-ri-whatsapp-fill',
+  [INBOX_TYPES.API]: 'i-ri-cloudy-fill',
+  [INBOX_TYPES.EMAIL]: 'i-ri-mail-fill',
+  [INBOX_TYPES.TELEGRAM]: 'i-ri-telegram-fill',
+  [INBOX_TYPES.LINE]: 'i-ri-line-fill',
+};
+
+const DEFAULT_ICON = 'i-ri-chat-1-fill';
 
 export const getInboxSource = (type, phoneNumber, inbox) => {
   switch (type) {
@@ -86,6 +110,17 @@ export const getInboxClassByType = (type, phoneNumber) => {
   }
 };
 
+export const getInboxIconByType = (type, phoneNumber) => {
+  // Special case for Twilio (whatsapp and sms)
+  if (type === INBOX_TYPES.TWILIO) {
+    return phoneNumber?.startsWith('whatsapp')
+      ? 'i-ri-whatsapp-fill'
+      : 'i-ri-chat-1-fill';
+  }
+
+  return INBOX_ICON_MAP[type] ?? DEFAULT_ICON;
+};
+
 export const getInboxWarningIconClass = (type, reauthorizationRequired) => {
   const allowedInboxTypes = [INBOX_TYPES.FB, INBOX_TYPES.EMAIL];
   if (allowedInboxTypes.includes(type) && reauthorizationRequired) {
diff --git a/app/javascript/dashboard/helper/specs/inbox.spec.js b/app/javascript/dashboard/helper/specs/inbox.spec.js
index 7a9d71e79..621c131f2 100644
--- a/app/javascript/dashboard/helper/specs/inbox.spec.js
+++ b/app/javascript/dashboard/helper/specs/inbox.spec.js
@@ -1,4 +1,9 @@
-import { getInboxClassByType, getInboxWarningIconClass } from '../inbox';
+import {
+  INBOX_TYPES,
+  getInboxClassByType,
+  getInboxIconByType,
+  getInboxWarningIconClass,
+} from '../inbox';
 
 describe('#Inbox Helpers', () => {
   describe('getInboxClassByType', () => {
@@ -35,6 +40,74 @@ describe('#Inbox Helpers', () => {
     });
   });
 
+  describe('getInboxIconByType', () => {
+    it('returns correct icon for web widget', () => {
+      expect(getInboxIconByType(INBOX_TYPES.WEB)).toBe('i-ri-global-fill');
+    });
+
+    it('returns correct icon for Facebook', () => {
+      expect(getInboxIconByType(INBOX_TYPES.FB)).toBe('i-ri-messenger-fill');
+    });
+
+    it('returns correct icon for Twitter', () => {
+      expect(getInboxIconByType(INBOX_TYPES.TWITTER)).toBe(
+        'i-ri-twitter-x-fill'
+      );
+    });
+
+    describe('Twilio cases', () => {
+      it('returns WhatsApp icon for Twilio WhatsApp number', () => {
+        expect(
+          getInboxIconByType(INBOX_TYPES.TWILIO, 'whatsapp:+1234567890')
+        ).toBe('i-ri-whatsapp-fill');
+      });
+
+      it('returns SMS icon for regular Twilio number', () => {
+        expect(getInboxIconByType(INBOX_TYPES.TWILIO, '+1234567890')).toBe(
+          'i-ri-chat-1-fill'
+        );
+      });
+
+      it('returns SMS icon when phone number is undefined', () => {
+        expect(getInboxIconByType(INBOX_TYPES.TWILIO, undefined)).toBe(
+          'i-ri-chat-1-fill'
+        );
+      });
+    });
+
+    it('returns correct icon for WhatsApp', () => {
+      expect(getInboxIconByType(INBOX_TYPES.WHATSAPP)).toBe(
+        'i-ri-whatsapp-fill'
+      );
+    });
+
+    it('returns correct icon for API', () => {
+      expect(getInboxIconByType(INBOX_TYPES.API)).toBe('i-ri-cloudy-fill');
+    });
+
+    it('returns correct icon for Email', () => {
+      expect(getInboxIconByType(INBOX_TYPES.EMAIL)).toBe('i-ri-mail-fill');
+    });
+
+    it('returns correct icon for Telegram', () => {
+      expect(getInboxIconByType(INBOX_TYPES.TELEGRAM)).toBe(
+        'i-ri-telegram-fill'
+      );
+    });
+
+    it('returns correct icon for Line', () => {
+      expect(getInboxIconByType(INBOX_TYPES.LINE)).toBe('i-ri-line-fill');
+    });
+
+    it('returns default icon for unknown type', () => {
+      expect(getInboxIconByType('UNKNOWN_TYPE')).toBe('i-ri-chat-1-fill');
+    });
+
+    it('returns default icon for undefined type', () => {
+      expect(getInboxIconByType(undefined)).toBe('i-ri-chat-1-fill');
+    });
+  });
+
   describe('getInboxWarningIconClass', () => {
     it('should return correct class for warning', () => {
       expect(getInboxWarningIconClass('Channel::FacebookPage', true)).toEqual(
diff --git a/app/javascript/dashboard/i18n/locale/en/campaign.json b/app/javascript/dashboard/i18n/locale/en/campaign.json
index bbcc463ee..e2418d52e 100644
--- a/app/javascript/dashboard/i18n/locale/en/campaign.json
+++ b/app/javascript/dashboard/i18n/locale/en/campaign.json
@@ -1,126 +1,150 @@
 {
   "CAMPAIGN": {
-    "HEADER": "Campaigns",
-    "SIDEBAR_TXT": "Proactive messages allow the customer to send outbound messages to their contacts which would trigger more conversations. Click on <b>Add Campaign</b> to create a new campaign. You can also edit or delete an existing campaign by clicking on the Edit or Delete button.",
-    "HEADER_BTN_TXT": {
-      "ONE_OFF": "Create a one off campaign",
-      "ONGOING": "Create a ongoing campaign"
-    },
-    "ADD": {
-      "TITLE": "Create a campaign",
-      "DESC": "Proactive messages allow the customer to send outbound messages to their contacts which would trigger more conversations.",
-      "CANCEL_BUTTON_TEXT": "Cancel",
-      "CREATE_BUTTON_TEXT": "Create",
-      "FORM": {
-        "TITLE": {
-          "LABEL": "Title",
-          "PLACEHOLDER": "Please enter the title of campaign",
-          "ERROR": "Title is required"
+    "LIVE_CHAT": {
+      "HEADER_TITLE": "Live chat campaigns",
+      "NEW_CAMPAIGN": "Create campaign",
+      "CARD": {
+        "STATUS": {
+          "ENABLED": "Enabled",
+          "DISABLED": "Disabled"
         },
-        "SCHEDULED_AT": {
-          "LABEL": "Scheduled time",
-          "PLACEHOLDER": "Please select the time",
-          "CONFIRM": "Confirm",
-          "ERROR": "Scheduled time is required"
-        },
-        "AUDIENCE": {
-          "LABEL": "Audience",
-          "PLACEHOLDER": "Select the customer labels",
-          "ERROR": "Audience is required"
-        },
-        "INBOX": {
-          "LABEL": "Select Inbox",
-          "PLACEHOLDER": "Select Inbox",
-          "ERROR": "Inbox is required"
-        },
-        "MESSAGE": {
-          "LABEL": "Message",
-          "PLACEHOLDER": "Please enter the message of campaign",
-          "ERROR": "Message is required"
-        },
-        "SENT_BY": {
-          "LABEL": "Sent by",
-          "PLACEHOLDER": "Please select the the content of campaign",
-          "ERROR": "Sender is required"
-        },
-        "END_POINT": {
-          "LABEL": "URL",
-          "PLACEHOLDER": "Please enter the URL",
-          "ERROR": "Please enter a valid URL"
-        },
-        "TIME_ON_PAGE": {
-          "LABEL": "Time on page(Seconds)",
-          "PLACEHOLDER": "Please enter the time",
-          "ERROR": "Time on page is required"
-        },
-        "ENABLED": "Enable campaign",
-        "TRIGGER_ONLY_BUSINESS_HOURS": "Trigger only during business hours",
-        "SUBMIT": "Add Campaign"
+        "CAMPAIGN_DETAILS": {
+          "SENT_BY": "Sent by",
+          "BOT": "Bot",
+          "FROM": "from",
+          "URL": "URL:"
+        }
       },
-      "API": {
-        "SUCCESS_MESSAGE": "Campaign created successfully",
-        "ERROR_MESSAGE": "There was an error. Please try again."
+      "EMPTY_STATE": {
+        "TITLE": "No live chat campaigns are available",
+        "SUBTITLE": "Connect with your customers using proactive messages.  Click 'Create campaign' to get started."
+      },
+      "CREATE": {
+        "TITLE": "Create a live chat campaign",
+        "CANCEL_BUTTON_TEXT": "Cancel",
+        "CREATE_BUTTON_TEXT": "Create",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Please enter the title of campaign",
+            "ERROR": "Title is required"
+          },
+          "MESSAGE": {
+            "LABEL": "Message",
+            "PLACEHOLDER": "Please enter the message of campaign",
+            "ERROR": "Message is required"
+          },
+          "INBOX": {
+            "LABEL": "Select Inbox",
+            "PLACEHOLDER": "Select Inbox",
+            "ERROR": "Inbox is required"
+          },
+          "SENT_BY": {
+            "LABEL": "Sent by",
+            "PLACEHOLDER": "Please select sender",
+            "ERROR": "Sender is required"
+          },
+          "END_POINT": {
+            "LABEL": "URL",
+            "PLACEHOLDER": "Please enter the URL",
+            "ERROR": "Please enter a valid URL"
+          },
+          "TIME_ON_PAGE": {
+            "LABEL": "Time on page(Seconds)",
+            "PLACEHOLDER": "Please enter the time",
+            "ERROR": "Time on page is required"
+          },
+          "OTHER_PREFERENCES": {
+            "TITLE": "Other preferences",
+            "ENABLED": "Enable campaign",
+            "TRIGGER_ONLY_BUSINESS_HOURS": "Trigger only during business hours"
+          },
+          "BUTTONS": {
+            "CREATE": "Create",
+            "CANCEL": "Cancel"
+          },
+          "API": {
+            "SUCCESS_MESSAGE": "Live chat campaign created successfully",
+            "ERROR_MESSAGE": "There was an error. Please try again."
+          }
+        }
+      },
+      "EDIT": {
+        "TITLE": "Edit live chat campaign",
+        "FORM": {
+          "API": {
+            "SUCCESS_MESSAGE": "Live chat campaign updated successfully",
+            "ERROR_MESSAGE": "There was an error. Please try again."
+          }
+        }
       }
     },
-    "DELETE": {
-      "BUTTON_TEXT": "Delete",
-      "CONFIRM": {
-        "TITLE": "Confirm Deletion",
-        "MESSAGE": "Are you sure to delete?",
-        "YES": "Yes, Delete ",
-        "NO": "No, Keep "
+    "SMS": {
+      "HEADER_TITLE": "SMS campaigns",
+      "NEW_CAMPAIGN": "Create campaign",
+      "EMPTY_STATE": {
+        "TITLE": "No SMS campaigns are available",
+        "SUBTITLE": "Launch an SMS campaign to reach your customers directly. Send offers or make announcements with ease. Click 'Create campaign' to get started."
       },
+      "CARD": {
+        "STATUS": {
+          "COMPLETED": "Completed",
+          "SCHEDULED": "Scheduled"
+        },
+        "CAMPAIGN_DETAILS": {
+          "SENT_FROM": "Sent from",
+          "ON": "on"
+        }
+      },
+      "CREATE": {
+        "TITLE": "Create SMS campaign",
+        "CANCEL_BUTTON_TEXT": "Cancel",
+        "CREATE_BUTTON_TEXT": "Create",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Please enter the title of campaign",
+            "ERROR": "Title is required"
+          },
+          "MESSAGE": {
+            "LABEL": "Message",
+            "PLACEHOLDER": "Please enter the message of campaign",
+            "ERROR": "Message is required"
+          },
+          "INBOX": {
+            "LABEL": "Select Inbox",
+            "PLACEHOLDER": "Select Inbox",
+            "ERROR": "Inbox is required"
+          },
+          "AUDIENCE": {
+            "LABEL": "Audience",
+            "PLACEHOLDER": "Select the customer labels",
+            "ERROR": "Audience is required"
+          },
+          "SCHEDULED_AT": {
+            "LABEL": "Scheduled time",
+            "PLACEHOLDER": "Please select the time",
+            "ERROR": "Scheduled time is required"
+          },
+          "BUTTONS": {
+            "CREATE": "Create",
+            "CANCEL": "Cancel"
+          },
+          "API": {
+            "SUCCESS_MESSAGE": "SMS campaign created successfully",
+            "ERROR_MESSAGE": "There was an error. Please try again."
+          }
+        }
+      }
+    },
+    "CONFIRM_DELETE": {
+      "TITLE": "Are you sure to delete?",
+      "DESCRIPTION": "The delete action is permanent and cannot be reversed.",
+      "CONFIRM": "Delete",
       "API": {
         "SUCCESS_MESSAGE": "Campaign deleted successfully",
-        "ERROR_MESSAGE": "Could not delete the campaign. Please try again later."
+        "ERROR_MESSAGE": "There was an error. Please try again."
       }
-    },
-    "EDIT": {
-      "TITLE": "Edit campaign",
-      "UPDATE_BUTTON_TEXT": "Update",
-      "API": {
-        "SUCCESS_MESSAGE": "Campaign updated successfully",
-        "ERROR_MESSAGE": "There was an error, please try again"
-      }
-    },
-    "LIST": {
-      "LOADING_MESSAGE": "Loading campaigns...",
-      "404": "There are no campaigns created for this inbox.",
-      "TABLE_HEADER": {
-        "TITLE": "Title",
-        "MESSAGE": "Message",
-        "INBOX": "Inbox",
-        "STATUS": "Status",
-        "SENDER": "Sender",
-        "URL": "URL",
-        "SCHEDULED_AT": "Scheduled time",
-        "TIME_ON_PAGE": "Time(Seconds)",
-        "CREATED_AT": "Created at"
-      },
-      "BUTTONS": {
-        "ADD": "Add",
-        "EDIT": "Edit",
-        "DELETE": "Delete"
-      },
-      "STATUS": {
-        "ENABLED": "Enabled",
-        "DISABLED": "Disabled",
-        "COMPLETED": "Completed",
-        "ACTIVE": "Active"
-      },
-      "SENDER": {
-        "BOT": "Bot"
-      }
-    },
-    "ONE_OFF": {
-      "HEADER": "One off campaigns",
-      "404": "There are no one off campaigns created",
-      "INBOXES_NOT_FOUND": "Please create an sms inbox and start adding campaigns"
-    },
-    "ONGOING": {
-      "HEADER": "Ongoing campaigns",
-      "404": "There are no ongoing campaigns created",
-      "INBOXES_NOT_FOUND": "Please create an website inbox and start adding campaigns"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index d2c0b7c5e..414291dfd 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -267,6 +267,8 @@
     "NEW_INBOX": "New inbox",
     "REPORTS_CONVERSATION": "Conversations",
     "CSAT": "CSAT",
+    "LIVE_CHAT": "Live Chat",
+    "SMS": "SMS",
     "CAMPAIGNS": "Campaigns",
     "ONGOING": "Ongoing",
     "ONE_OFF": "One off",
diff --git a/app/javascript/dashboard/routes/dashboard/campaigns/campaigns.routes.js b/app/javascript/dashboard/routes/dashboard/campaigns/campaigns.routes.js
new file mode 100644
index 000000000..a4f0a94f5
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/campaigns/campaigns.routes.js
@@ -0,0 +1,60 @@
+import { frontendURL } from 'dashboard/helper/URLHelper.js';
+
+import CampaignsPageRouteView from './pages/CampaignsPageRouteView.vue';
+import LiveChatCampaignsPage from './pages/LiveChatCampaignsPage.vue';
+import SMSCampaignsPage from './pages/SMSCampaignsPage.vue';
+
+const campaignsRoutes = {
+  routes: [
+    {
+      path: frontendURL('accounts/:accountId/campaigns'),
+      component: CampaignsPageRouteView,
+      children: [
+        {
+          path: '',
+          redirect: to => {
+            return { name: 'campaigns_ongoing_index', params: to.params };
+          },
+        },
+        {
+          path: 'ongoing',
+          name: 'campaigns_ongoing_index',
+          meta: {
+            permissions: ['administrator'],
+          },
+          redirect: to => {
+            return { name: 'campaigns_livechat_index', params: to.params };
+          },
+        },
+        {
+          path: 'one_off',
+          name: 'campaigns_one_off_index',
+          meta: {
+            permissions: ['administrator'],
+          },
+          redirect: to => {
+            return { name: 'campaigns_sms_index', params: to.params };
+          },
+        },
+        {
+          path: 'live_chat',
+          name: 'campaigns_livechat_index',
+          meta: {
+            permissions: ['administrator'],
+          },
+          component: LiveChatCampaignsPage,
+        },
+        {
+          path: 'sms',
+          name: 'campaigns_sms_index',
+          meta: {
+            permissions: ['administrator'],
+          },
+          component: SMSCampaignsPage,
+        },
+      ],
+    },
+  ],
+};
+
+export default campaignsRoutes;
diff --git a/app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue b/app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue
new file mode 100644
index 000000000..9bbe7b917
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue
@@ -0,0 +1,28 @@
+<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-background"
+  >
+    <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/app/javascript/dashboard/routes/dashboard/campaigns/pages/LiveChatCampaignsPage.vue b/app/javascript/dashboard/routes/dashboard/campaigns/pages/LiveChatCampaignsPage.vue
new file mode 100644
index 000000000..93d5d1ec6
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/campaigns/pages/LiveChatCampaignsPage.vue
@@ -0,0 +1,88 @@
+<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 { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';
+
+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/getCampaigns'].value(CAMPAIGN_TYPES.ONGOING)
+);
+
+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 items-center justify-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/app/javascript/dashboard/routes/dashboard/campaigns/pages/SMSCampaignsPage.vue b/app/javascript/dashboard/routes/dashboard/campaigns/pages/SMSCampaignsPage.vue
new file mode 100644
index 000000000..a38a818f0
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/campaigns/pages/SMSCampaignsPage.vue
@@ -0,0 +1,75 @@
+<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 { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';
+
+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/getCampaigns'].value(CAMPAIGN_TYPES.ONE_OFF)
+);
+
+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/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
index 5ec8ebf78..c6d60eb53 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
@@ -3,8 +3,7 @@ import { ref } from 'vue';
 // constants & helpers
 import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
 import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
-import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
-import { getInboxSource } from 'dashboard/helper/inbox';
+import { getInboxSource, INBOX_TYPES } from 'dashboard/helper/inbox';
 
 // store
 import { mapGetters } from 'vuex';
diff --git a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
index 8bb11b9be..f76c5e4e7 100644
--- a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
@@ -6,6 +6,7 @@ import { routes as notificationRoutes } from './notifications/routes';
 import { routes as inboxRoutes } from './inbox/routes';
 import { frontendURL } from '../../helper/URLHelper';
 import helpcenterRoutes from './helpcenter/helpcenter.routes';
+import campaignsRoutes from './campaigns/campaigns.routes';
 
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
@@ -35,6 +36,7 @@ export default {
         ...searchRoutes,
         ...notificationRoutes,
         ...helpcenterRoutes.routes,
+        ...campaignsRoutes.routes,
       ],
     },
     {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
deleted file mode 100644
index 15acbcd04..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
+++ /dev/null
@@ -1,389 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useVuelidate } from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
-import { useAlert, useTrack } from 'dashboard/composables';
-import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import { useCampaign } from 'shared/composables/useCampaign';
-import WootDateTimePicker from 'dashboard/components/ui/DateTimePicker.vue';
-import { URLPattern } from 'urlpattern-polyfill';
-import { CAMPAIGNS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-
-export default {
-  components: {
-    WootDateTimePicker,
-    WootMessageEditor,
-  },
-  emits: ['onClose'],
-  setup() {
-    const { campaignType, isOngoingType, isOneOffType } = useCampaign();
-    return { v$: useVuelidate(), campaignType, isOngoingType, isOneOffType };
-  },
-  data() {
-    return {
-      title: '',
-      message: '',
-      selectedSender: 0,
-      selectedInbox: null,
-      endPoint: '',
-      timeOnPage: 10,
-      show: true,
-      enabled: true,
-      triggerOnlyDuringBusinessHours: false,
-      scheduledAt: null,
-      selectedAudience: [],
-      senderList: [],
-    };
-  },
-
-  validations() {
-    const commonValidations = {
-      title: {
-        required,
-      },
-      message: {
-        required,
-      },
-      selectedInbox: {
-        required,
-      },
-    };
-    if (this.isOngoingType) {
-      return {
-        ...commonValidations,
-        selectedSender: {
-          required,
-        },
-        endPoint: {
-          required,
-          shouldBeAValidURLPattern(value) {
-            try {
-              // eslint-disable-next-line
-              new URLPattern(value);
-              return true;
-            } catch (error) {
-              return false;
-            }
-          },
-          shouldStartWithHTTP(value) {
-            if (value) {
-              return (
-                value.startsWith('https://') || value.startsWith('http://')
-              );
-            }
-            return false;
-          },
-        },
-        timeOnPage: {
-          required,
-        },
-      };
-    }
-    return {
-      ...commonValidations,
-      selectedAudience: {
-        isEmpty() {
-          return !!this.selectedAudience.length;
-        },
-      },
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'campaigns/getUIFlags',
-      audienceList: 'labels/getLabels',
-    }),
-    inboxes() {
-      if (this.isOngoingType) {
-        return this.$store.getters['inboxes/getWebsiteInboxes'];
-      }
-      return this.$store.getters['inboxes/getSMSInboxes'];
-    },
-    sendersAndBotList() {
-      return [
-        {
-          id: 0,
-          name: 'Bot',
-        },
-        ...this.senderList,
-      ];
-    },
-  },
-  mounted() {
-    useTrack(CAMPAIGNS_EVENTS.OPEN_NEW_CAMPAIGN_MODAL, {
-      type: this.campaignType,
-    });
-  },
-  methods: {
-    onClose() {
-      this.$emit('onClose');
-    },
-    onChange(value) {
-      this.scheduledAt = value;
-    },
-    async onChangeInbox() {
-      try {
-        const response = await this.$store.dispatch('inboxMembers/get', {
-          inboxId: this.selectedInbox,
-        });
-        const {
-          data: { payload: inboxMembers },
-        } = response;
-        this.senderList = inboxMembers;
-      } catch (error) {
-        const errorMessage =
-          error?.response?.message || this.$t('CAMPAIGN.ADD.API.ERROR_MESSAGE');
-        useAlert(errorMessage);
-      }
-    },
-    getCampaignDetails() {
-      let campaignDetails = null;
-      if (this.isOngoingType) {
-        campaignDetails = {
-          title: this.title,
-          message: this.message,
-          inbox_id: this.selectedInbox,
-          sender_id: this.selectedSender || null,
-          enabled: this.enabled,
-          trigger_only_during_business_hours:
-            // eslint-disable-next-line prettier/prettier
-            this.triggerOnlyDuringBusinessHours,
-          trigger_rules: {
-            url: this.endPoint,
-            time_on_page: this.timeOnPage,
-          },
-        };
-      } else {
-        const audience = this.selectedAudience.map(item => {
-          return {
-            id: item.id,
-            type: 'Label',
-          };
-        });
-        campaignDetails = {
-          title: this.title,
-          message: this.message,
-          inbox_id: this.selectedInbox,
-          scheduled_at: this.scheduledAt,
-          audience,
-        };
-      }
-      return campaignDetails;
-    },
-    async addCampaign() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-      try {
-        const campaignDetails = this.getCampaignDetails();
-        await this.$store.dispatch('campaigns/create', campaignDetails);
-
-        // tracking this here instead of the store to track the type of campaign
-        useTrack(CAMPAIGNS_EVENTS.CREATE_CAMPAIGN, {
-          type: this.campaignType,
-        });
-
-        useAlert(this.$t('CAMPAIGN.ADD.API.SUCCESS_MESSAGE'));
-        this.onClose();
-      } catch (error) {
-        const errorMessage =
-          error?.response?.message || this.$t('CAMPAIGN.ADD.API.ERROR_MESSAGE');
-        useAlert(errorMessage);
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <woot-modal-header
-      :header-title="$t('CAMPAIGN.ADD.TITLE')"
-      :header-content="$t('CAMPAIGN.ADD.DESC')"
-    />
-    <form class="flex flex-col w-full" @submit.prevent="addCampaign">
-      <div class="w-full">
-        <woot-input
-          v-model="title"
-          :label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
-          type="text"
-          :class="{ error: v$.title.$error }"
-          :error="v$.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
-          :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
-          @blur="v$.title.$touch"
-        />
-
-        <div v-if="isOngoingType" class="editor-wrap">
-          <label>
-            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
-          </label>
-          <div>
-            <WootMessageEditor
-              v-model="message"
-              class="message-editor"
-              :class="{ editor_warning: v$.message.$error }"
-              :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
-              @blur="v$.message.$touch"
-            />
-            <span v-if="v$.message.$error" class="editor-warning__message">
-              {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
-            </span>
-          </div>
-        </div>
-
-        <label v-else :class="{ error: v$.message.$error }">
-          {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
-          <textarea
-            v-model="message"
-            rows="5"
-            type="text"
-            :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
-            @blur="v$.message.$touch"
-          />
-          <span v-if="v$.message.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
-          </span>
-        </label>
-
-        <label :class="{ error: v$.selectedInbox.$error }">
-          {{ $t('CAMPAIGN.ADD.FORM.INBOX.LABEL') }}
-          <select v-model="selectedInbox" @change="onChangeInbox($event)">
-            <option v-for="item in inboxes" :key="item.name" :value="item.id">
-              {{ item.name }}
-            </option>
-          </select>
-          <span v-if="v$.selectedInbox.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.INBOX.ERROR') }}
-          </span>
-        </label>
-
-        <label
-          v-if="isOneOffType"
-          class="multiselect-wrap--small"
-          :class="{ error: v$.selectedAudience.$error }"
-        >
-          {{ $t('CAMPAIGN.ADD.FORM.AUDIENCE.LABEL') }}
-          <multiselect
-            v-model="selectedAudience"
-            :options="audienceList"
-            track-by="id"
-            label="title"
-            multiple
-            :close-on-select="false"
-            :clear-on-select="false"
-            hide-selected
-            :placeholder="$t('CAMPAIGN.ADD.FORM.AUDIENCE.PLACEHOLDER')"
-            selected-label
-            :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-            :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
-            @blur="v$.selectedAudience.$touch"
-            @select="v$.selectedAudience.$touch"
-          />
-          <span v-if="v$.selectedAudience.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.AUDIENCE.ERROR') }}
-          </span>
-        </label>
-
-        <label
-          v-if="isOngoingType"
-          :class="{ error: v$.selectedSender.$error }"
-        >
-          {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
-          <select v-model="selectedSender">
-            <option
-              v-for="sender in sendersAndBotList"
-              :key="sender.name"
-              :value="sender.id"
-            >
-              {{ sender.name }}
-            </option>
-          </select>
-          <span v-if="v$.selectedSender.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
-          </span>
-        </label>
-
-        <label v-if="isOneOffType">
-          {{ $t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.LABEL') }}
-          <WootDateTimePicker
-            :value="scheduledAt"
-            :confirm-text="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.CONFIRM')"
-            :placeholder="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.PLACEHOLDER')"
-            @change="onChange"
-          />
-        </label>
-
-        <woot-input
-          v-if="isOngoingType"
-          v-model="endPoint"
-          :label="$t('CAMPAIGN.ADD.FORM.END_POINT.LABEL')"
-          type="text"
-          :class="{ error: v$.endPoint.$error }"
-          :error="
-            v$.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
-          "
-          :placeholder="$t('CAMPAIGN.ADD.FORM.END_POINT.PLACEHOLDER')"
-          @blur="v$.endPoint.$touch"
-        />
-        <woot-input
-          v-if="isOngoingType"
-          v-model="timeOnPage"
-          :label="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL')"
-          type="text"
-          :class="{ error: v$.timeOnPage.$error }"
-          :error="
-            v$.timeOnPage.$error
-              ? $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR')
-              : ''
-          "
-          :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
-          @blur="v$.timeOnPage.$touch"
-        />
-        <label v-if="isOngoingType">
-          <input
-            v-model="enabled"
-            type="checkbox"
-            value="enabled"
-            name="enabled"
-          />
-          {{ $t('CAMPAIGN.ADD.FORM.ENABLED') }}
-        </label>
-        <label v-if="isOngoingType">
-          <input
-            v-model="triggerOnlyDuringBusinessHours"
-            type="checkbox"
-            value="triggerOnlyDuringBusinessHours"
-            name="triggerOnlyDuringBusinessHours"
-          />
-          {{ $t('CAMPAIGN.ADD.FORM.TRIGGER_ONLY_BUSINESS_HOURS') }}
-        </label>
-      </div>
-
-      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <woot-button :is-loading="uiFlags.isCreating">
-          {{ $t('CAMPAIGN.ADD.CREATE_BUTTON_TEXT') }}
-        </woot-button>
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CAMPAIGN.ADD.CANCEL_BUTTON_TEXT') }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-::v-deep .ProseMirror-woot-style {
-  height: 5rem;
-}
-
-.message-editor {
-  @apply px-3;
-
-  ::v-deep {
-    .ProseMirror-menubar {
-      @apply rounded-tl-[4px];
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
deleted file mode 100644
index 8bfcbad73..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import { useCampaign } from 'shared/composables/useCampaign';
-import CampaignsTable from './CampaignsTable.vue';
-import EditCampaign from './EditCampaign.vue';
-export default {
-  components: {
-    CampaignsTable,
-    EditCampaign,
-  },
-  props: {
-    type: {
-      type: String,
-      default: '',
-    },
-  },
-  setup() {
-    const { campaignType } = useCampaign();
-    return { campaignType };
-  },
-  data() {
-    return {
-      showEditPopup: false,
-      selectedCampaign: {},
-      showDeleteConfirmationPopup: false,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'campaigns/getUIFlags',
-    }),
-    campaigns() {
-      return this.$store.getters['campaigns/getCampaigns'](this.campaignType);
-    },
-    showEmptyResult() {
-      const hasEmptyResults =
-        !this.uiFlags.isFetching && this.campaigns.length === 0;
-      return hasEmptyResults;
-    },
-  },
-  methods: {
-    openEditPopup(campaign) {
-      this.selectedCampaign = campaign;
-      this.showEditPopup = true;
-    },
-    hideEditPopup() {
-      this.showEditPopup = false;
-    },
-    openDeletePopup(campaign) {
-      this.showDeleteConfirmationPopup = true;
-      this.selectedCampaign = campaign;
-    },
-    closeDeletePopup() {
-      this.showDeleteConfirmationPopup = false;
-    },
-    confirmDeletion() {
-      this.closeDeletePopup();
-      const { id } = this.selectedCampaign;
-      this.deleteCampaign(id);
-    },
-    async deleteCampaign(id) {
-      try {
-        await this.$store.dispatch('campaigns/delete', id);
-        useAlert(this.$t('CAMPAIGN.DELETE.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        useAlert(this.$t('CAMPAIGN.DELETE.API.ERROR_MESSAGE'));
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex-1 overflow-auto">
-    <CampaignsTable
-      :campaigns="campaigns"
-      :show-empty-result="showEmptyResult"
-      :is-loading="uiFlags.isFetching"
-      :campaign-type="type"
-      @edit="openEditPopup"
-      @delete="openDeletePopup"
-    />
-    <woot-modal v-model:show="showEditPopup" :on-close="hideEditPopup">
-      <EditCampaign
-        :selected-campaign="selectedCampaign"
-        @on-close="hideEditPopup"
-      />
-    </woot-modal>
-    <woot-delete-modal
-      v-model:show="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="$t('CAMPAIGN.DELETE.CONFIRM.TITLE')"
-      :message="$t('CAMPAIGN.DELETE.CONFIRM.MESSAGE')"
-      :confirm-text="$t('CAMPAIGN.DELETE.CONFIRM.YES')"
-      :reject-text="$t('CAMPAIGN.DELETE.CONFIRM.NO')"
-    />
-  </div>
-</template>
-
-<style scoped lang="scss">
-.button-wrapper {
-  @apply flex justify-end pb-2.5;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
deleted file mode 100644
index 48390c63a..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<script setup>
-import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
-import InboxName from 'dashboard/components/widgets/InboxName.vue';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-import { messageStamp } from 'shared/helpers/timeHelper';
-import { useI18n } from 'vue-i18n';
-import { computed } from 'vue';
-
-const props = defineProps({
-  campaign: {
-    type: Object,
-    required: true,
-  },
-  isOngoingType: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const emit = defineEmits(['edit', 'delete']);
-
-const { t } = useI18n();
-
-const { formatMessage } = useMessageFormatter();
-
-const campaignStatus = computed(() => {
-  if (props.isOngoingType) {
-    return props.campaign.enabled
-      ? t('CAMPAIGN.LIST.STATUS.ENABLED')
-      : t('CAMPAIGN.LIST.STATUS.DISABLED');
-  }
-
-  return props.campaign.campaign_status === 'completed'
-    ? t('CAMPAIGN.LIST.STATUS.COMPLETED')
-    : t('CAMPAIGN.LIST.STATUS.ACTIVE');
-});
-
-const colorScheme = computed(() => {
-  if (props.isOngoingType) {
-    return props.campaign.enabled ? 'success' : 'secondary';
-  }
-  return props.campaign.campaign_status === 'completed'
-    ? 'secondary'
-    : 'success';
-});
-</script>
-
-<template>
-  <div
-    class="px-5 py-4 mb-2 bg-white border rounded-md dark:bg-slate-800 border-slate-50 dark:border-slate-900"
-  >
-    <div class="flex flex-row items-start justify-between">
-      <div class="flex flex-col">
-        <div
-          class="mb-1 -mt-1 text-base font-medium text-slate-900 dark:text-slate-100"
-        >
-          {{ campaign.title }}
-        </div>
-        <div
-          v-dompurify-html="formatMessage(campaign.message)"
-          class="text-sm line-clamp-1 [&>p]:mb-0"
-        />
-      </div>
-      <div class="flex flex-row space-x-4">
-        <woot-button
-          v-if="isOngoingType"
-          variant="link"
-          icon="edit"
-          color-scheme="secondary"
-          size="small"
-          @click="emit('edit', campaign)"
-        >
-          {{ $t('CAMPAIGN.LIST.BUTTONS.EDIT') }}
-        </woot-button>
-        <woot-button
-          variant="link"
-          icon="dismiss-circle"
-          size="small"
-          color-scheme="secondary"
-          @click="emit('delete', campaign)"
-        >
-          {{ $t('CAMPAIGN.LIST.BUTTONS.DELETE') }}
-        </woot-button>
-      </div>
-    </div>
-
-    <div class="flex flex-row items-center mt-5 space-x-3">
-      <woot-label
-        small
-        :title="campaignStatus"
-        :color-scheme="colorScheme"
-        class="mr-3 text-xs"
-      />
-      <InboxName :inbox="campaign.inbox" class="mb-1 ltr:ml-0 rtl:mr-0" />
-      <UserAvatarWithName
-        v-if="campaign.sender"
-        :user="campaign.sender"
-        class="mb-1"
-      />
-      <div
-        v-if="campaign.trigger_rules.url"
-        :title="campaign.trigger_rules.url"
-        class="w-1/4 mb-1 text-xs text-woot-600 truncate"
-      >
-        {{ campaign.trigger_rules.url }}
-      </div>
-      <div
-        v-if="campaign.scheduled_at"
-        class="w-1/4 mb-1 text-xs text-slate-700 dark:text-slate-500"
-      >
-        {{ messageStamp(new Date(campaign.scheduled_at), 'LLL d, h:mm a') }}
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
deleted file mode 100644
index 5ef15a26b..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<script>
-import Spinner from 'shared/components/Spinner.vue';
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import { useCampaign } from 'shared/composables/useCampaign';
-import CampaignCard from './CampaignCard.vue';
-
-export default {
-  components: {
-    EmptyState,
-    Spinner,
-    CampaignCard,
-  },
-  props: {
-    campaigns: {
-      type: Array,
-      default: () => [],
-    },
-    showEmptyResult: {
-      type: Boolean,
-      default: false,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['edit', 'delete'],
-  setup() {
-    const { isOngoingType } = useCampaign();
-    return { isOngoingType };
-  },
-  computed: {
-    currentInboxId() {
-      return this.$route.params.inboxId;
-    },
-    inbox() {
-      return this.$store.getters['inboxes/getInbox'](this.currentInboxId);
-    },
-    inboxes() {
-      if (this.isOngoingType) {
-        return this.$store.getters['inboxes/getWebsiteInboxes'];
-      }
-      return this.$store.getters['inboxes/getTwilioInboxes'];
-    },
-    emptyMessage() {
-      if (this.isOngoingType) {
-        return this.inboxes.length
-          ? this.$t('CAMPAIGN.ONGOING.404')
-          : this.$t('CAMPAIGN.ONGOING.INBOXES_NOT_FOUND');
-      }
-
-      return this.inboxes.length
-        ? this.$t('CAMPAIGN.ONE_OFF.404')
-        : this.$t('CAMPAIGN.ONE_OFF.INBOXES_NOT_FOUND');
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex items-center flex-col">
-    <div v-if="isLoading" class="items-center flex text-base justify-center">
-      <Spinner color-scheme="primary" />
-      <span>{{ $t('CAMPAIGN.LIST.LOADING_MESSAGE') }}</span>
-    </div>
-    <div v-else class="w-full">
-      <EmptyState v-if="showEmptyResult" :title="emptyMessage" />
-      <div v-else class="w-full">
-        <CampaignCard
-          v-for="campaign in campaigns"
-          :key="campaign.id"
-          :campaign="campaign"
-          :is-ongoing-type="isOngoingType"
-          @edit="campaign => $emit('edit', campaign)"
-          @delete="campaign => $emit('delete', campaign)"
-        />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
deleted file mode 100644
index 6aaec07a8..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
+++ /dev/null
@@ -1,304 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useVuelidate } from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
-import { useAlert } from 'dashboard/composables';
-import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import { useCampaign } from 'shared/composables/useCampaign';
-import { URLPattern } from 'urlpattern-polyfill';
-
-export default {
-  components: {
-    WootMessageEditor,
-  },
-  props: {
-    selectedCampaign: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  emits: ['onClose'],
-  setup() {
-    const { isOngoingType } = useCampaign();
-    return { v$: useVuelidate(), isOngoingType };
-  },
-  data() {
-    return {
-      title: '',
-      message: '',
-      selectedSender: '',
-      selectedInbox: null,
-      endPoint: '',
-      timeOnPage: 10,
-      triggerOnlyDuringBusinessHours: false,
-      show: true,
-      enabled: true,
-      senderList: [],
-    };
-  },
-  validations: {
-    title: {
-      required,
-    },
-    message: {
-      required,
-    },
-    selectedSender: {
-      required,
-    },
-    endPoint: {
-      required,
-      shouldBeAValidURLPattern(value) {
-        try {
-          // eslint-disable-next-line
-          new URLPattern(value);
-          return true;
-        } catch (error) {
-          return false;
-        }
-      },
-      shouldStartWithHTTP(value) {
-        if (value) {
-          return value.startsWith('https://') || value.startsWith('http://');
-        }
-        return false;
-      },
-    },
-    timeOnPage: {
-      required,
-    },
-    selectedInbox: {
-      required,
-    },
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'campaigns/getUIFlags',
-      inboxes: 'inboxes/getTwilioInboxes',
-    }),
-    inboxes() {
-      if (this.isOngoingType) {
-        return this.$store.getters['inboxes/getWebsiteInboxes'];
-      }
-      return this.$store.getters['inboxes/getSMSInboxes'];
-    },
-    pageTitle() {
-      return `${this.$t('CAMPAIGN.EDIT.TITLE')} - ${
-        this.selectedCampaign.title
-      }`;
-    },
-    sendersAndBotList() {
-      return [
-        {
-          id: 0,
-          name: 'Bot',
-        },
-        ...this.senderList,
-      ];
-    },
-  },
-  mounted() {
-    this.setFormValues();
-  },
-  methods: {
-    onClose() {
-      this.$emit('onClose');
-    },
-
-    async loadInboxMembers() {
-      try {
-        const response = await this.$store.dispatch('inboxMembers/get', {
-          inboxId: this.selectedInbox,
-        });
-        const {
-          data: { payload: inboxMembers },
-        } = response;
-        this.senderList = inboxMembers;
-      } catch (error) {
-        const errorMessage =
-          error?.response?.message || this.$t('CAMPAIGN.ADD.API.ERROR_MESSAGE');
-        useAlert(errorMessage);
-      }
-    },
-    onChangeInbox() {
-      this.loadInboxMembers();
-    },
-    setFormValues() {
-      const {
-        title,
-        message,
-        enabled,
-        trigger_only_during_business_hours: triggerOnlyDuringBusinessHours,
-        inbox: { id: inboxId },
-        trigger_rules: { url: endPoint, time_on_page: timeOnPage },
-        sender,
-      } = this.selectedCampaign;
-      this.title = title;
-      this.message = message;
-      this.endPoint = endPoint;
-      this.timeOnPage = timeOnPage;
-      this.selectedInbox = inboxId;
-      this.triggerOnlyDuringBusinessHours = triggerOnlyDuringBusinessHours;
-      this.selectedSender = (sender && sender.id) || 0;
-      this.enabled = enabled;
-      this.loadInboxMembers();
-    },
-    async editCampaign() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-      try {
-        await this.$store.dispatch('campaigns/update', {
-          id: this.selectedCampaign.id,
-          title: this.title,
-          message: this.message,
-          inbox_id: this.selectedInbox,
-          trigger_only_during_business_hours:
-            // eslint-disable-next-line prettier/prettier
-            this.triggerOnlyDuringBusinessHours,
-          sender_id: this.selectedSender || null,
-          enabled: this.enabled,
-          trigger_rules: {
-            url: this.endPoint,
-            time_on_page: this.timeOnPage,
-          },
-        });
-        useAlert(this.$t('CAMPAIGN.EDIT.API.SUCCESS_MESSAGE'));
-        this.onClose();
-      } catch (error) {
-        useAlert(this.$t('CAMPAIGN.EDIT.API.ERROR_MESSAGE'));
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <woot-modal-header :header-title="pageTitle" />
-    <form class="flex flex-col w-full" @submit.prevent="editCampaign">
-      <div class="w-full">
-        <woot-input
-          v-model="title"
-          :label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
-          type="text"
-          :class="{ error: v$.title.$error }"
-          :error="v$.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
-          :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
-          @blur="v$.title.$touch"
-        />
-        <div class="editor-wrap">
-          <label>
-            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
-          </label>
-          <WootMessageEditor
-            v-model="message"
-            class="message-editor"
-            is-format-mode
-            :class="{ editor_warning: v$.message.$error }"
-            :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
-            @input="v$.message.$touch"
-          />
-          <span v-if="v$.message.$error" class="editor-warning__message">
-            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
-          </span>
-        </div>
-
-        <label :class="{ error: v$.selectedInbox.$error }">
-          {{ $t('CAMPAIGN.ADD.FORM.INBOX.LABEL') }}
-          <select v-model="selectedInbox" @change="onChangeInbox($event)">
-            <option v-for="item in inboxes" :key="item.id" :value="item.id">
-              {{ item.name }}
-            </option>
-          </select>
-          <span v-if="v$.selectedInbox.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.INBOX.ERROR') }}
-          </span>
-        </label>
-
-        <label :class="{ error: v$.selectedSender.$error }">
-          {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
-          <select v-model="selectedSender">
-            <option
-              v-for="sender in sendersAndBotList"
-              :key="sender.name"
-              :value="sender.id"
-            >
-              {{ sender.name }}
-            </option>
-          </select>
-          <span v-if="v$.selectedSender.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
-          </span>
-        </label>
-        <woot-input
-          v-model="endPoint"
-          :label="$t('CAMPAIGN.ADD.FORM.END_POINT.LABEL')"
-          type="text"
-          :class="{ error: v$.endPoint.$error }"
-          :error="
-            v$.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
-          "
-          :placeholder="$t('CAMPAIGN.ADD.FORM.END_POINT.PLACEHOLDER')"
-          @blur="v$.endPoint.$touch"
-        />
-        <woot-input
-          v-model="timeOnPage"
-          :label="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL')"
-          type="text"
-          :class="{ error: v$.timeOnPage.$error }"
-          :error="
-            v$.timeOnPage.$error
-              ? $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR')
-              : ''
-          "
-          :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
-          @blur="v$.timeOnPage.$touch"
-        />
-        <label>
-          <input
-            v-model="enabled"
-            type="checkbox"
-            value="enabled"
-            name="enabled"
-          />
-          {{ $t('CAMPAIGN.ADD.FORM.ENABLED') }}
-        </label>
-        <label v-if="isOngoingType">
-          <input
-            v-model="triggerOnlyDuringBusinessHours"
-            type="checkbox"
-            value="triggerOnlyDuringBusinessHours"
-            name="triggerOnlyDuringBusinessHours"
-          />
-          {{ $t('CAMPAIGN.ADD.FORM.TRIGGER_ONLY_BUSINESS_HOURS') }}
-        </label>
-      </div>
-      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <woot-button :is-loading="uiFlags.isCreating">
-          {{ $t('CAMPAIGN.EDIT.UPDATE_BUTTON_TEXT') }}
-        </woot-button>
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CAMPAIGN.ADD.CANCEL_BUTTON_TEXT') }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-::v-deep .ProseMirror-woot-style {
-  height: 5rem;
-}
-
-.message-editor {
-  @apply px-3;
-
-  ::v-deep {
-    .ProseMirror-menubar {
-      @apply rounded-tl-[4px];
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
deleted file mode 100644
index e326dace1..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script>
-import { useCampaign } from 'shared/composables/useCampaign';
-import Campaign from './Campaign.vue';
-import AddCampaign from './AddCampaign.vue';
-
-export default {
-  components: {
-    Campaign,
-    AddCampaign,
-  },
-  setup() {
-    const { isOngoingType } = useCampaign();
-    return { isOngoingType };
-  },
-  data() {
-    return { showAddPopup: false };
-  },
-  computed: {
-    buttonText() {
-      if (this.isOngoingType) {
-        return this.$t('CAMPAIGN.HEADER_BTN_TXT.ONGOING');
-      }
-      return this.$t('CAMPAIGN.HEADER_BTN_TXT.ONE_OFF');
-    },
-  },
-  mounted() {
-    this.$store.dispatch('campaigns/get');
-  },
-  methods: {
-    openAddPopup() {
-      this.showAddPopup = true;
-    },
-    hideAddPopup() {
-      this.showAddPopup = false;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex-1 p-4 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddPopup"
-    >
-      {{ buttonText }}
-    </woot-button>
-    <Campaign />
-    <woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
-      <AddCampaign @on-close="hideAddPopup" />
-    </woot-modal>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js b/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js
deleted file mode 100644
index 22268d11a..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { frontendURL } from '../../../../helper/URLHelper';
-import SettingsContent from '../Wrapper.vue';
-import Index from './Index.vue';
-
-export default {
-  routes: [
-    {
-      path: frontendURL('accounts/:accountId/campaigns'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'CAMPAIGN.ONGOING.HEADER',
-        icon: 'arrow-swap',
-      },
-      children: [
-        {
-          path: '',
-          redirect: to => {
-            return { name: 'ongoing_campaigns', params: to.params };
-          },
-        },
-        {
-          path: 'ongoing',
-          name: 'ongoing_campaigns',
-          meta: {
-            permissions: ['administrator'],
-          },
-          component: Index,
-        },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/campaigns'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'CAMPAIGN.ONE_OFF.HEADER',
-        icon: 'sound-source',
-      },
-      children: [
-        {
-          path: 'one_off',
-          name: 'one_off',
-          meta: {
-            permissions: ['administrator'],
-          },
-          component: Index,
-        },
-      ],
-    },
-  ],
-};
diff --git a/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js b/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
index 1b9f69d2a..ef39688a5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
@@ -11,7 +11,6 @@ import attributes from './attributes/attributes.routes';
 import automation from './automation/automation.routes';
 import auditlogs from './auditlogs/audit.routes';
 import billing from './billing/billing.routes';
-import campaigns from './campaigns/campaigns.routes';
 import canned from './canned/canned.routes';
 import inbox from './inbox/inbox.routes';
 import integrations from './integrations/integrations.routes';
@@ -50,7 +49,6 @@ export default {
     ...automation.routes,
     ...auditlogs.routes,
     ...billing.routes,
-    ...campaigns.routes,
     ...canned.routes,
     ...inbox.routes,
     ...integrations.routes,
diff --git a/app/javascript/dashboard/store/modules/campaigns.js b/app/javascript/dashboard/store/modules/campaigns.js
index a2ffc1363..c5a73d1d3 100644
--- a/app/javascript/dashboard/store/modules/campaigns.js
+++ b/app/javascript/dashboard/store/modules/campaigns.js
@@ -17,9 +17,9 @@ export const getters = {
     return _state.uiFlags;
   },
   getCampaigns: _state => campaignType => {
-    return _state.records.filter(
-      record => record.campaign_type === campaignType
-    );
+    return _state.records
+      .filter(record => record.campaign_type === campaignType)
+      .sort((a1, a2) => a1.id - a2.id);
   },
   getAllCampaigns: _state => {
     return _state.records;
diff --git a/app/javascript/dashboard/store/modules/inboxes.js b/app/javascript/dashboard/store/modules/inboxes.js
index 95d5f625a..8e1dbb301 100644
--- a/app/javascript/dashboard/store/modules/inboxes.js
+++ b/app/javascript/dashboard/store/modules/inboxes.js
@@ -1,6 +1,6 @@
 import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import * as types from '../mutation-types';
-import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
 import InboxesAPI from '../../api/inboxes';
 import WebChannel from '../../api/channel/webChannel';
 import FBChannel from '../../api/channel/fbChannel';
diff --git a/app/javascript/dashboard/store/modules/specs/campaigns/getters.spec.js b/app/javascript/dashboard/store/modules/specs/campaigns/getters.spec.js
index 88ee86a31..52f14c296 100644
--- a/app/javascript/dashboard/store/modules/specs/campaigns/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/campaigns/getters.spec.js
@@ -5,36 +5,8 @@ describe('#getters', () => {
   it('get ongoing campaigns', () => {
     const state = { records: campaigns };
     expect(getters.getCampaigns(state)('ongoing')).toEqual([
-      {
-        id: 1,
-        title: 'Welcome',
-        description: null,
-        account_id: 1,
-        campaign_type: 'ongoing',
-        message: 'Hey, What brings you today',
-        enabled: true,
-        trigger_rules: {
-          url: 'https://github.com',
-          time_on_page: 10,
-        },
-        created_at: '2021-05-03T04:53:36.354Z',
-        updated_at: '2021-05-03T04:53:36.354Z',
-      },
-      {
-        id: 3,
-        title: 'Thanks',
-        description: null,
-        account_id: 1,
-        campaign_type: 'ongoing',
-        message: 'Thanks for coming to the show. How may I help you?',
-        enabled: false,
-        trigger_rules: {
-          url: 'https://noshow.com',
-          time_on_page: 10,
-        },
-        created_at: '2021-05-03T10:22:51.025Z',
-        updated_at: '2021-05-03T10:22:51.025Z',
-      },
+      campaigns[0],
+      campaigns[2],
     ]);
   });
 
diff --git a/app/javascript/shared/composables/specs/useCampaign.spec.js b/app/javascript/shared/composables/specs/useCampaign.spec.js
deleted file mode 100644
index 6110fcded..000000000
--- a/app/javascript/shared/composables/specs/useCampaign.spec.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { useCampaign } from '../useCampaign';
-import { useRoute } from 'vue-router';
-import { CAMPAIGN_TYPES } from '../../constants/campaign';
-
-// Mock the useRoute composable
-vi.mock('vue-router', () => ({
-  useRoute: vi.fn(),
-}));
-
-describe('useCampaign', () => {
-  it('returns the correct campaign type for ongoing campaigns', () => {
-    useRoute.mockReturnValue({ name: 'ongoing_campaigns' });
-    const { campaignType } = useCampaign();
-    expect(campaignType.value).toBe(CAMPAIGN_TYPES.ONGOING);
-  });
-
-  it('returns the correct campaign type for one-off campaigns', () => {
-    useRoute.mockReturnValue({ name: 'one_off' });
-    const { campaignType } = useCampaign();
-    expect(campaignType.value).toBe(CAMPAIGN_TYPES.ONE_OFF);
-  });
-
-  it('isOngoingType returns true for ongoing campaigns', () => {
-    useRoute.mockReturnValue({ name: 'ongoing_campaigns' });
-    const { isOngoingType } = useCampaign();
-    expect(isOngoingType.value).toBe(true);
-  });
-
-  it('isOngoingType returns false for one-off campaigns', () => {
-    useRoute.mockReturnValue({ name: 'one_off' });
-    const { isOngoingType } = useCampaign();
-    expect(isOngoingType.value).toBe(false);
-  });
-
-  it('isOneOffType returns true for one-off campaigns', () => {
-    useRoute.mockReturnValue({ name: 'one_off' });
-    const { isOneOffType } = useCampaign();
-    expect(isOneOffType.value).toBe(true);
-  });
-
-  it('isOneOffType returns false for ongoing campaigns', () => {
-    useRoute.mockReturnValue({ name: 'ongoing_campaigns' });
-    const { isOneOffType } = useCampaign();
-    expect(isOneOffType.value).toBe(false);
-  });
-});
diff --git a/app/javascript/shared/composables/useCampaign.js b/app/javascript/shared/composables/useCampaign.js
deleted file mode 100644
index 825a65c0e..000000000
--- a/app/javascript/shared/composables/useCampaign.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { CAMPAIGN_TYPES } from '../constants/campaign';
-
-/**
- * Composable to manage campaign types.
- *
- * @returns {Object} - Computed properties for campaign type and its checks.
- */
-export const useCampaign = () => {
-  const route = useRoute();
-
-  /**
-   * Computed property to determine the current campaign type based on the route name.
-   */
-  const campaignType = computed(() => {
-    const campaignTypeMap = {
-      ongoing_campaigns: CAMPAIGN_TYPES.ONGOING,
-      one_off: CAMPAIGN_TYPES.ONE_OFF,
-    };
-    return campaignTypeMap[route.name];
-  });
-
-  /**
-   * Computed property to check if the current campaign type is 'ongoing'.
-   */
-  const isOngoingType = computed(() => {
-    return campaignType.value === CAMPAIGN_TYPES.ONGOING;
-  });
-
-  /**
-   * Computed property to check if the current campaign type is 'one-off'.
-   */
-  const isOneOffType = computed(() => {
-    return campaignType.value === CAMPAIGN_TYPES.ONE_OFF;
-  });
-
-  return {
-    campaignType,
-    isOngoingType,
-    isOneOffType,
-  };
-};
diff --git a/app/javascript/shared/mixins/inboxMixin.js b/app/javascript/shared/mixins/inboxMixin.js
index 3953cfb40..82ee9db9e 100644
--- a/app/javascript/shared/mixins/inboxMixin.js
+++ b/app/javascript/shared/mixins/inboxMixin.js
@@ -1,15 +1,4 @@
-export const INBOX_TYPES = {
-  WEB: 'Channel::WebWidget',
-  FB: 'Channel::FacebookPage',
-  TWITTER: 'Channel::TwitterProfile',
-  TWILIO: 'Channel::TwilioSms',
-  WHATSAPP: 'Channel::Whatsapp',
-  API: 'Channel::Api',
-  EMAIL: 'Channel::Email',
-  TELEGRAM: 'Channel::Telegram',
-  LINE: 'Channel::Line',
-  SMS: 'Channel::Sms',
-};
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
 
 export const INBOX_FEATURES = {
   REPLY_TO: 'replyTo',

From 8cdbdaaa07f937d8d8b3ac805edba35a3236b6e9 Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Mon, 4 Nov 2024 01:25:01 -0800
Subject: [PATCH 25/39] fix: Process attachments as regular attachments if the
 text/plain or text/html part is empty (#10379)

Some email clients automatically set Content-Disposition to inline for
specific content types, such as images. In cases where the email body is
empty, inline attachments may not display correctly due to our previous
implementation. Our assumption was that these attachments are referenced
within text/plain or text/html parts.

Customer-reported issues, especially with Apple Mail, show emails with
attachments marked as inline but without any corresponding text parts.
This leads to missing attachments even though would have processed the
attachment.

This update introduces a check for the presence of a text part. If none
exists, inline attachments are treated as regular attachments and added
to the external attachments array, ensuring that all attachments display
properly.

<details>
<summary><b>Script to update the existing emails that are already
available in the system</b></summary>

```rb
def update_content id
  message = Message.find id
  conversation = message.conversation
  message_id = message.source_id

  channel = message.inbox.channel

  authentication_type = 'XOAUTH2'
  imap_password = Google::RefreshOauthTokenService.new(channel: channel).access_token
  imap = Net::IMAP.new(channel.imap_address, port: channel.imap_port, ssl: true)
  imap.authenticate(authentication_type, channel.imap_login, imap_password)
  imap.select('INBOX')

  results = imap.search(['HEADER', 'MESSAGE-ID', message_id])
  message_content = imap.fetch(results.first, 'RFC822').first.attr['RFC822']
  mail = MailPresenter.new(Mail.read_from_string(message_content))

  mail_content = if mail.text_content.present?
                   mail.text_content[:reply]
                 elsif mail.html_content.present?
                   mail.html_content[:reply]
                 end

  attachments = mail.attachments.last(Message::NUMBER_OF_PERMITTED_ATTACHMENTS)
  inline_attachments = attachments.select { |attachment| attachment[:original].inline? && mail_content.present? }
  regular_attachments = attachments - inline_attachments

  regular_attachments.each do |mail_attachment|
    attachment = message.attachments.new(
      account_id: conversation.account_id,
      file_type: 'file'
    )
    attachment.file.attach(mail_attachment[:blob])
  end

  message.save!
end
```
</details>
---
 app/mailboxes/mailbox_helper.rb               | 20 +++---
 .../files/attachments_without_text.eml        | 65 +++++++++++++++++++
 spec/mailboxes/imap/imap_mailbox_spec.rb      | 13 ++++
 3 files changed, 90 insertions(+), 8 deletions(-)
 create mode 100644 spec/fixtures/files/attachments_without_text.eml

diff --git a/app/mailboxes/mailbox_helper.rb b/app/mailboxes/mailbox_helper.rb
index 0f310e4ec..35f075983 100644
--- a/app/mailboxes/mailbox_helper.rb
+++ b/app/mailboxes/mailbox_helper.rb
@@ -26,16 +26,22 @@ module MailboxHelper
 
     # ensure we don't add more than the permitted number of attachments
     all_attachments = processed_mail.attachments.last(Message::NUMBER_OF_PERMITTED_ATTACHMENTS)
+    grouped_attachments = group_attachments(all_attachments)
 
-    inline_attachments = all_attachments.select { |attachment| attachment[:original].inline? }
-    regular_attachments = all_attachments - inline_attachments
-
-    process_inline_attachments(inline_attachments) if inline_attachments.present?
-    process_regular_attachments(regular_attachments) if regular_attachments.present?
+    process_inline_attachments(grouped_attachments[:inline]) if grouped_attachments[:inline].present?
+    process_regular_attachments(grouped_attachments[:regular]) if grouped_attachments[:regular].present?
 
     @message.save!
   end
 
+  def group_attachments(attachments)
+    # If the email lacks a text body, treat inline attachments as standard attachments for processing.
+    inline_attachments = attachments.select { |attachment| attachment[:original].inline? && mail_content.present? }
+
+    regular_attachments = attachments - inline_attachments
+    { inline: inline_attachments, regular: regular_attachments }
+  end
+
   def process_regular_attachments(attachments)
     Rails.logger.info "[MailboxHelper] Processing regular attachments for message with ID: #{processed_mail.message_id}"
     attachments.each do |mail_attachment|
@@ -102,9 +108,7 @@ module MailboxHelper
       contact_attributes: {
         name: identify_contact_name,
         email: processed_mail.original_sender,
-        additional_attributes: {
-          source_id: "email:#{processed_mail.message_id}"
-        }
+        additional_attributes: { source_id: "email:#{processed_mail.message_id}" }
       }
     ).perform
 
diff --git a/spec/fixtures/files/attachments_without_text.eml b/spec/fixtures/files/attachments_without_text.eml
new file mode 100644
index 000000000..35c4d5f80
--- /dev/null
+++ b/spec/fixtures/files/attachments_without_text.eml
@@ -0,0 +1,65 @@
+From: hello@icloud.com
+Content-Type: multipart/mixed;
+	boundary="Apple-Mail=_F9915DAD-44A0-47DE-BB38-1168"
+Mime-Version: 1.0 (Mac OS X Mail 16.0 \(3818.100.11.1.3\))
+Subject: Hello there
+Message-Id: <7DDDD-F45F@icloud.com>
+Date: Thu, 31 Oct 2024 18:19:46 -0700
+To: Pranav Raj S <pranavrajs@gmail.com>
+
+
+--Apple-Mail=_F9915DAD-44A0-47DE-BB38-1168
+Content-Disposition: inline;
+	filename=1kb.png
+Content-Type: image/png;
+	x-unix-mode=0644;
+	name="1kb.png"
+Content-Transfer-Encoding: base64
+
+iVBORw0KGgoAAAANSUhEUgAAABEAAAAOCAMAAAD+MweGAAADAFBMVEUAAAAAAFUAAKoAAP8AJAAA
+JFUAJKoAJP8ASQAASVUASaoASf8AbQAAbVUAbaoAbf8AkgAAklUAkqoAkv8AtgAAtlUAtqoAtv8A
+2wAA21UA26oA2/8A/wAA/1UA/6oA//8kAAAkAFUkAKokAP8kJAAkJFUkJKokJP8kSQAkSVUkSaok
+Sf8kbQAkbVUkbaokbf8kkgAkklUkkqokkv8ktgAktlUktqoktv8k2wAk21Uk26ok2/8k/wAk/1Uk
+/6ok//9JAABJAFVJAKpJAP9JJABJJFVJJKpJJP9JSQBJSVVJSapJSf9JbQBJbVVJbapJbf9JkgBJ
+klVJkqpJkv9JtgBJtlVJtqpJtv9J2wBJ21VJ26pJ2/9J/wBJ/1VJ/6pJ//9tAABtAFVtAKptAP9t
+JABtJFVtJKptJP9tSQBtSVVtSaptSf9tbQBtbVVtbaptbf9tkgBtklVtkqptkv9ttgBttlVttqpt
+tv9t2wBt21Vt26pt2/9t/wBt/1Vt/6pt//+SAACSAFWSAKqSAP+SJACSJFWSJKqSJP+SSQCSSVWS
+SaqSSf+SbQCSbVWSbaqSbf+SkgCSklWSkqqSkv+StgCStlWStqqStv+S2wCS21WS26qS2/+S/wCS
+/1WS/6qS//+2AAC2AFW2AKq2AP+2JAC2JFW2JKq2JP+2SQC2SVW2Saq2Sf+2bQC2bVW2baq2bf+2
+kgC2klW2kqq2kv+2tgC2tlW2tqq2tv+22wC221W226q22/+2/wC2/1W2/6q2///bAADbAFXbAKrb
+AP/bJADbJFXbJKrbJP/bSQDbSVXbSarbSf/bbQDbbVXbbarbbf/bkgDbklXbkqrbkv/btgDbtlXb
+tqrbtv/b2wDb21Xb26rb2//b/wDb/1Xb/6rb////AAD/AFX/AKr/AP//JAD/JFX/JKr/JP//SQD/
+SVX/Sar/Sf//bQD/bVX/bar/bf//kgD/klX/kqr/kv//tgD/tlX/tqr/tv//2wD/21X/26r/2///
+/wD//1X//6r////qm24uAAAA1ElEQVR42h1PMW4CQQwc73mlFJGCQChFIp0Rh0RBGV5AFUXKC/KP
+fCFdqryEgoJ8IX0KEF64q0PPnow3jT2WxzNj+gAgAGfvvDdCQIHoSnGYcGDE2nH92DoRqTYJ2bTc
+sKgqhIi47VdgAWNmwFSFA1UAAT2sSFcnq8a3x/zkkJrhaHT3N+hD3aH7ZuabGHX7bsSMhxwTJLr3
+evf1e0nBVcwmqcTZuatKoJaB7dSHjTZdM0G1HBTWefly//q2EB7/BEvk5vmzeQaJ7/xKPImpzv8/
+s4grhAxHl0DsqGUAAAAASUVORK5CYII=
+--Apple-Mail=_F9915DAD-44A0-47DE-BB38-1168
+Content-Disposition: inline;
+	filename=1kb.png
+Content-Type: image/png;
+	x-unix-mode=0644;
+	name="1kb.png"
+Content-Transfer-Encoding: base64
+
+iVBORw0KGgoAAAANSUhEUgAAABEAAAAOCAMAAAD+MweGAAADAFBMVEUAAAAAAFUAAKoAAP8AJAAA
+JFUAJKoAJP8ASQAASVUASaoASf8AbQAAbVUAbaoAbf8AkgAAklUAkqoAkv8AtgAAtlUAtqoAtv8A
+2wAA21UA26oA2/8A/wAA/1UA/6oA//8kAAAkAFUkAKokAP8kJAAkJFUkJKokJP8kSQAkSVUkSaok
+Sf8kbQAkbVUkbaokbf8kkgAkklUkkqokkv8ktgAktlUktqoktv8k2wAk21Uk26ok2/8k/wAk/1Uk
+/6ok//9JAABJAFVJAKpJAP9JJABJJFVJJKpJJP9JSQBJSVVJSapJSf9JbQBJbVVJbapJbf9JkgBJ
+klVJkqpJkv9JtgBJtlVJtqpJtv9J2wBJ21VJ26pJ2/9J/wBJ/1VJ/6pJ//9tAABtAFVtAKptAP9t
+JABtJFVtJKptJP9tSQBtSVVtSaptSf9tbQBtbVVtbaptbf9tkgBtklVtkqptkv9ttgBttlVttqpt
+tv9t2wBt21Vt26pt2/9t/wBt/1Vt/6pt//+SAACSAFWSAKqSAP+SJACSJFWSJKqSJP+SSQCSSVWS
+SaqSSf+SbQCSbVWSbaqSbf+SkgCSklWSkqqSkv+StgCStlWStqqStv+S2wCS21WS26qS2/+S/wCS
+/1WS/6qS//+2AAC2AFW2AKq2AP+2JAC2JFW2JKq2JP+2SQC2SVW2Saq2Sf+2bQC2bVW2baq2bf+2
+kgC2klW2kqq2kv+2tgC2tlW2tqq2tv+22wC221W226q22/+2/wC2/1W2/6q2///bAADbAFXbAKrb
+AP/bJADbJFXbJKrbJP/bSQDbSVXbSarbSf/bbQDbbVXbbarbbf/bkgDbklXbkqrbkv/btgDbtlXb
+tqrbtv/b2wDb21Xb26rb2//b/wDb/1Xb/6rb////AAD/AFX/AKr/AP//JAD/JFX/JKr/JP//SQD/
+SVX/Sar/Sf//bQD/bVX/bar/bf//kgD/klX/kqr/kv//tgD/tlX/tqr/tv//2wD/21X/26r/2///
+/wD//1X//6r////qm24uAAAA1ElEQVR42h1PMW4CQQwc73mlFJGCQChFIp0Rh0RBGV5AFUXKC/KP
+fCFdqryEgoJ8IX0KEF64q0PPnow3jT2WxzNj+gAgAGfvvDdCQIHoSnGYcGDE2nH92DoRqTYJ2bTc
+sKgqhIi47VdgAWNmwFSFA1UAAT2sSFcnq8a3x/zkkJrhaHT3N+hD3aH7ZuabGHX7bsSMhxwTJLr3
+evf1e0nBVcwmqcTZuatKoJaB7dSHjTZdM0G1HBTWefly//q2EB7/BEvk5vmzeQaJ7/xKPImpzv8/
+s4grhAxHl0DsqGUAAAAASUVORK5CYII=
+--Apple-Mail=_F9915DAD-44A0-47DE-BB38-1168--
diff --git a/spec/mailboxes/imap/imap_mailbox_spec.rb b/spec/mailboxes/imap/imap_mailbox_spec.rb
index d91b8c8c4..bbf3629e8 100644
--- a/spec/mailboxes/imap/imap_mailbox_spec.rb
+++ b/spec/mailboxes/imap/imap_mailbox_spec.rb
@@ -30,6 +30,19 @@ RSpec.describe Imap::ImapMailbox do
       end
     end
 
+    context 'when the email with has empty text content' do
+      let(:inbound_mail) { create_inbound_email_from_fixture('attachments_without_text.eml') }
+
+      it 'creates a converstation and a message properly' do
+        expect do
+          class_instance.process(inbound_mail.mail, channel)
+        end.to change(Conversation, :count).by(1)
+
+        expect(conversation.contact.email).to eq(inbound_mail.mail.from.first)
+        expect(conversation.messages.last.attachments.count).to be 2
+      end
+    end
+
     context 'when the email has 15 or more attachments' do
       let(:inbound_mail) { create_inbound_email_from_fixture('multiple_attachments.eml') }
 

From 54740e3bb91fa26f61ea57d6477aa19d751a43b9 Mon Sep 17 00:00:00 2001
From: Willian Coqueiro <wil_kokero@hotmail.com>
Date: Tue, 5 Nov 2024 01:04:08 -0300
Subject: [PATCH 26/39] fix: Update the translation for the text used in
 `isTyping` method (#10384)

This fix consists of translating the message when another user is typing on the other side.
---
Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
---
 .../widgets/conversation/MessagesView.vue         |  5 ++---
 app/javascript/dashboard/helper/commons.js        | 15 ++++++++-------
 .../dashboard/helper/specs/commons.spec.js        | 11 ++++++-----
 .../dashboard/i18n/locale/en/conversation.json    |  5 +++++
 .../dashboard/i18n/locale/pt_BR/conversation.json |  5 +++++
 5 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index 0b19ea2bf..ba4d9393f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -138,10 +138,9 @@ export default {
     },
     typingUserNames() {
       const userList = this.typingUsersList;
-
       if (this.isAnyoneTyping) {
-        const userListAsName = getTypingUsersText(userList);
-        return userListAsName;
+        const [i18nKey, params] = getTypingUsersText(userList);
+        return this.$t(i18nKey, params);
       }
 
       return '';
diff --git a/app/javascript/dashboard/helper/commons.js b/app/javascript/dashboard/helper/commons.js
index d50080e82..3539bc822 100644
--- a/app/javascript/dashboard/helper/commons.js
+++ b/app/javascript/dashboard/helper/commons.js
@@ -27,19 +27,20 @@ export const isJSONValid = value => {
 
 export const getTypingUsersText = (users = []) => {
   const count = users.length;
+  const [firstUser, secondUser] = users;
+
   if (count === 1) {
-    const [user] = users;
-    return `${user.name} is typing`;
+    return ['TYPING.ONE', { user: firstUser.name }];
   }
 
   if (count === 2) {
-    const [first, second] = users;
-    return `${first.name} and ${second.name} are typing`;
+    return [
+      'TYPING.TWO',
+      { user: firstUser.name, secondUser: secondUser.name },
+    ];
   }
 
-  const [user] = users;
-  const rest = users.length - 1;
-  return `${user.name} and ${rest} others are typing`;
+  return ['TYPING.MULTIPLE', { user: firstUser.name, count: count - 1 }];
 };
 
 export const createPendingMessage = data => {
diff --git a/app/javascript/dashboard/helper/specs/commons.spec.js b/app/javascript/dashboard/helper/specs/commons.spec.js
index 96ded9d43..46065660f 100644
--- a/app/javascript/dashboard/helper/specs/commons.spec.js
+++ b/app/javascript/dashboard/helper/specs/commons.spec.js
@@ -8,15 +8,16 @@ import {
 
 describe('#getTypingUsersText', () => {
   it('returns the correct text is there is only one typing user', () => {
-    expect(getTypingUsersText([{ name: 'Pranav' }])).toEqual(
-      'Pranav is typing'
-    );
+    expect(getTypingUsersText([{ name: 'Pranav' }])).toEqual([
+      'TYPING.ONE',
+      { user: 'Pranav' },
+    ]);
   });
 
   it('returns the correct text is there are two typing users', () => {
     expect(
       getTypingUsersText([{ name: 'Pranav' }, { name: 'Nithin' }])
-    ).toEqual('Pranav and Nithin are typing');
+    ).toEqual(['TYPING.TWO', { user: 'Pranav', secondUser: 'Nithin' }]);
   });
 
   it('returns the correct text is there are more than two users are typing', () => {
@@ -27,7 +28,7 @@ describe('#getTypingUsersText', () => {
         { name: 'Subin' },
         { name: 'Sojan' },
       ])
-    ).toEqual('Pranav and 3 others are typing');
+    ).toEqual(['TYPING.MULTIPLE', { user: 'Pranav', count: 3 }]);
   });
 });
 
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index 6aa4e57b1..9a6a64d6d 100644
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -335,5 +335,10 @@
     "ORIGINAL_CONTENT": "Original Content",
     "TRANSLATED_CONTENT": "Translated Content",
     "NO_TRANSLATIONS_AVAILABLE": "No translations are available for this content"
+  },
+  "TYPING": {
+    "ONE": "{user} is typing",
+    "TWO": "{user} and {secondUser} are typing",
+    "MULTIPLE": "{user} and {count} others are typing"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json b/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json
index 1564c0eef..459677644 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json
@@ -335,5 +335,10 @@
     "ORIGINAL_CONTENT": "Conteúdo original",
     "TRANSLATED_CONTENT": "Conteúdo traduzido",
     "NO_TRANSLATIONS_AVAILABLE": "Nenhuma tradução está disponível para este conteúdo"
+  },
+  "TYPING": {
+    "ONE": "{user} está digitando",
+    "TWO": "{user} e {secondUser} estão digitando",
+    "MULTIPLE": "{user} e {count} outros estão digitando"
   }
 }

From db327378fac990d61f1420b4085e92793b26d8d6 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 8 Nov 2024 10:00:56 +0530
Subject: [PATCH 27/39] feat(v4): Add new conversation card component (#10392)

---
 .../ConversationCard/CardLabels.vue           |  95 ++++
 .../ConversationCard/CardMessagePreview.vue   |  59 +++
 .../CardMessagePreviewWithMeta.vue            |  86 ++++
 .../ConversationCard/CardPriorityIcon.vue     | 207 ++++++++
 .../ConversationCard.story.vue                | 477 ++++++++++++++++++
 .../ConversationCard/ConversationCard.vue     | 102 ++++
 .../ConversationCard/SLACardLabel.vue         |  90 ++++
 .../components-next/avatar/Avatar.vue         | 195 +++++--
 app/javascript/histoire.setup.ts              |   2 +
 9 files changed, 1264 insertions(+), 49 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/Conversation/ConversationCard/CardLabels.vue
 create mode 100644 app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreview.vue
 create mode 100644 app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue
 create mode 100644 app/javascript/dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue
 create mode 100644 app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.story.vue
 create mode 100644 app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue
 create mode 100644 app/javascript/dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue

diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardLabels.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardLabels.vue
new file mode 100644
index 000000000..dfd4115e8
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardLabels.vue
@@ -0,0 +1,95 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+  conversationLabels: {
+    type: Array,
+    required: true,
+  },
+  accountLabels: {
+    type: Array,
+    required: true,
+  },
+});
+
+const WIDTH_CONFIG = Object.freeze({
+  DEFAULT_WIDTH: 80,
+  CHAR_WIDTH: {
+    SHORT: 8, // For labels <= 5 chars
+    LONG: 6, // For labels > 5 chars
+  },
+  BASE_WIDTH: 12, // dot + gap
+  THRESHOLD: 5, // character length threshold
+});
+
+const containerRef = ref(null);
+const maxLabels = ref(1);
+
+const activeLabels = computed(() => {
+  const labelSet = new Set(props.conversationLabels);
+  return props.accountLabels?.filter(({ title }) => labelSet.has(title));
+});
+
+const calculateLabelWidth = ({ title = '' }) => {
+  const charWidth =
+    title.length > WIDTH_CONFIG.THRESHOLD
+      ? WIDTH_CONFIG.CHAR_WIDTH.LONG
+      : WIDTH_CONFIG.CHAR_WIDTH.SHORT;
+
+  return title.length * charWidth + WIDTH_CONFIG.BASE_WIDTH;
+};
+
+const getAverageWidth = labels => {
+  if (!labels.length) return WIDTH_CONFIG.DEFAULT_WIDTH;
+
+  const totalWidth = labels.reduce(
+    (sum, label) => sum + calculateLabelWidth(label),
+    0
+  );
+
+  return totalWidth / labels.length;
+};
+
+const visibleLabels = computed(() =>
+  activeLabels.value?.slice(0, maxLabels.value)
+);
+
+const updateVisibleLabels = () => {
+  if (!containerRef.value) return;
+
+  const containerWidth = containerRef.value.offsetWidth;
+  const avgWidth = getAverageWidth(activeLabels.value);
+
+  maxLabels.value = Math.max(1, Math.floor(containerWidth / avgWidth));
+};
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    v-resize="updateVisibleLabels"
+    class="flex items-center gap-2.5 w-full min-w-0 h-6 overflow-hidden"
+  >
+    <template v-for="(label, index) in visibleLabels" :key="label.id">
+      <div
+        class="flex items-center gap-1.5 min-w-0"
+        :class="[
+          index !== visibleLabels.length - 1
+            ? 'flex-shrink-0 text-ellipsis'
+            : 'flex-shrink',
+        ]"
+      >
+        <div
+          :style="{ backgroundColor: label.color }"
+          class="size-1.5 rounded-full flex-shrink-0"
+        />
+        <span
+          class="text-sm text-n-slate-10 whitespace-nowrap"
+          :class="{ truncate: index === visibleLabels.length - 1 }"
+        >
+          {{ label.title }}
+        </span>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreview.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreview.vue
new file mode 100644
index 000000000..dfa31e100
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreview.vue
@@ -0,0 +1,59 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+
+const props = defineProps({
+  conversation: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+
+const lastNonActivityMessageContent = computed(() => {
+  const { lastNonActivityMessage = {} } = props.conversation;
+  return lastNonActivityMessage?.content || t('CHAT_LIST.NO_CONTENT');
+});
+
+const assignee = computed(() => {
+  const { meta: { assignee: agent = {} } = {} } = props.conversation;
+  return {
+    name: agent.name ?? agent.availableName,
+    thumbnail: agent.thumbnail,
+    status: agent.availabilityStatus,
+  };
+});
+
+const unreadMessagesCount = computed(() => {
+  const { unreadCount } = props.conversation;
+  return unreadCount;
+});
+</script>
+
+<template>
+  <div class="flex items-end w-full gap-2 pb-1">
+    <p class="w-full mb-0 text-sm leading-7 text-n-slate-12 line-clamp-2">
+      {{ lastNonActivityMessageContent }}
+    </p>
+    <div class="flex items-center flex-shrink-0 gap-2 pb-2">
+      <Avatar
+        :name="assignee.name"
+        :src="assignee.thumbnail"
+        :size="20"
+        :status="assignee.status"
+        rounded-full
+      />
+      <div
+        v-if="unreadMessagesCount > 0"
+        class="inline-flex items-center justify-center rounded-full size-5 bg-n-brand"
+      >
+        <span class="text-xs font-semibold text-white">
+          {{ unreadMessagesCount }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue
new file mode 100644
index 000000000..374da1f88
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue
@@ -0,0 +1,86 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import CardLabels from 'dashboard/components-next/Conversation/ConversationCard/CardLabels.vue';
+import SLACardLabel from 'dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue';
+
+const props = defineProps({
+  conversation: {
+    type: Object,
+    required: true,
+  },
+  accountLabels: {
+    type: Array,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+
+const lastNonActivityMessageContent = computed(() => {
+  const { lastNonActivityMessage = {} } = props.conversation;
+  return lastNonActivityMessage?.content || t('CHAT_LIST.NO_CONTENT');
+});
+
+const assignee = computed(() => {
+  const { meta: { assignee: agent = {} } = {} } = props.conversation;
+  return {
+    name: agent.name ?? agent.availableName,
+    thumbnail: agent.thumbnail,
+    status: agent.availabilityStatus,
+  };
+});
+
+const unreadMessagesCount = computed(() => {
+  const { unreadCount } = props.conversation;
+  return unreadCount;
+});
+
+const hasSlaThreshold = computed(() => props.conversation?.slaPolicyId);
+</script>
+
+<template>
+  <div class="flex flex-col w-full gap-1">
+    <div class="flex items-center justify-between w-full gap-2 py-1 h-7">
+      <p class="mb-0 text-sm leading-7 text-n-slate-12 line-clamp-1">
+        {{ lastNonActivityMessageContent }}
+      </p>
+
+      <div
+        v-if="unreadMessagesCount > 0"
+        class="inline-flex items-center justify-center flex-shrink-0 rounded-full size-5 bg-n-brand"
+      >
+        <span class="text-xs font-semibold text-white">
+          {{ unreadMessagesCount }}
+        </span>
+      </div>
+    </div>
+
+    <div
+      class="grid items-center gap-2.5 h-7"
+      :class="
+        hasSlaThreshold
+          ? 'grid-cols-[auto_auto_1fr_20px]'
+          : 'grid-cols-[1fr_20px]'
+      "
+    >
+      <SLACardLabel v-if="hasSlaThreshold" :conversation="conversation" />
+      <div v-if="hasSlaThreshold" class="w-px h-3 bg-n-slate-4" />
+      <div class="overflow-hidden">
+        <CardLabels
+          :conversation-labels="conversation.labels"
+          :account-labels="accountLabels"
+        />
+      </div>
+      <Avatar
+        :name="assignee.name"
+        :src="assignee.thumbnail"
+        :size="20"
+        :status="assignee.status"
+        rounded-full
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue
new file mode 100644
index 000000000..d51764ef5
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue
@@ -0,0 +1,207 @@
+<script setup>
+import { CONVERSATION_PRIORITY } from 'shared/constants/messages';
+
+defineProps({
+  priority: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<!-- eslint-disable vue/no-static-inline-styles -->
+<template>
+  <div class="inline-flex items-center justify-center rounded-md">
+    <!-- Low Priority -->
+    <svg
+      v-if="priority === CONVERSATION_PRIORITY.LOW"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask
+        id="mask0_2030_12879"
+        style="mask-type: alpha"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
+        <rect width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_2030_12879)">
+        <rect
+          x="3.33301"
+          y="10"
+          width="3.33333"
+          height="6.66667"
+          rx="1.66667"
+          class="fill-n-amber-9"
+        />
+        <rect
+          x="8.33301"
+          y="6.6665"
+          width="3.33333"
+          height="10"
+          rx="1.66667"
+          class="fill-n-slate-6"
+        />
+        <rect
+          x="13.333"
+          y="3.3335"
+          width="3.33333"
+          height="13.3333"
+          rx="1.66667"
+          class="fill-n-slate-6"
+        />
+      </g>
+    </svg>
+
+    <!-- Medium Priority  -->
+    <svg
+      v-if="priority === CONVERSATION_PRIORITY.MEDIUM"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask
+        id="mask0_2030_12879"
+        style="mask-type: alpha"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
+        <rect width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_2030_12879)">
+        <rect
+          x="3.33301"
+          y="10"
+          width="3.33333"
+          height="6.66667"
+          rx="1.66667"
+          class="fill-n-amber-9"
+        />
+        <rect
+          x="8.33301"
+          y="6.6665"
+          width="3.33333"
+          height="10"
+          rx="1.66667"
+          class="fill-n-amber-9"
+        />
+        <rect
+          x="13.333"
+          y="3.3335"
+          width="3.33333"
+          height="13.3333"
+          rx="1.66667"
+          class="fill-n-slate-6"
+        />
+      </g>
+    </svg>
+
+    <!-- High Priority -->
+    <svg
+      v-if="priority === CONVERSATION_PRIORITY.HIGH"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask
+        id="mask0_2030_12879"
+        style="mask-type: alpha"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
+        <rect width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_2030_12879)">
+        <rect
+          x="3.33301"
+          y="10"
+          width="3.33333"
+          height="6.66667"
+          rx="1.66667"
+          class="fill-n-amber-9"
+        />
+        <rect
+          x="8.33301"
+          y="6.6665"
+          width="3.33333"
+          height="10"
+          rx="1.66667"
+          class="fill-n-amber-9"
+        />
+        <rect
+          x="13.333"
+          y="3.3335"
+          width="3.33333"
+          height="13.3333"
+          rx="1.66667"
+          class="fill-n-amber-9"
+        />
+      </g>
+    </svg>
+
+    <!-- Urgent Priority -->
+    <svg
+      v-if="priority === CONVERSATION_PRIORITY.URGENT"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask
+        id="mask0_2030_12879"
+        style="mask-type: alpha"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
+        <rect width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_2030_12879)">
+        <rect
+          x="3.33301"
+          y="10"
+          width="3.33333"
+          height="6.66667"
+          rx="1.66667"
+          class="fill-n-ruby-9"
+        />
+        <rect
+          x="8.33301"
+          y="6.6665"
+          width="3.33333"
+          height="10"
+          rx="1.66667"
+          class="fill-n-ruby-9"
+        />
+        <rect
+          x="13.333"
+          y="3.3335"
+          width="3.33333"
+          height="13.3333"
+          rx="1.66667"
+          class="fill-n-ruby-9"
+        />
+      </g>
+    </svg>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.story.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.story.vue
new file mode 100644
index 000000000..a71ab24d7
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.story.vue
@@ -0,0 +1,477 @@
+<script setup>
+import { computed } from 'vue';
+import ConversationCard from './ConversationCard.vue';
+
+// Base conversation object
+const conversationWithoutMeta = {
+  meta: {
+    sender: {
+      additionalAttributes: {},
+      availabilityStatus: 'offline',
+      email: 'candice@chatwoot.com',
+      id: 29,
+      name: 'Candice Matherson',
+      phone_number: '+918585858585',
+      identifier: null,
+      thumbnail: '',
+      customAttributes: {
+        linkContact: 'https://apple.com',
+        listContact: 'Not spam',
+        textContact: 'hey',
+        checkboxContact: true,
+      },
+      last_activity_at: 1712127410,
+      created_at: 1712127389,
+    },
+    channel: 'Channel::Email',
+    assignee: {
+      id: 1,
+      accountId: 2,
+      availabilityStatus: 'online',
+      autoOffline: false,
+      confirmed: true,
+      email: 'sivin@chatwoot.com',
+      availableName: 'Sivin',
+      name: 'Sivin',
+      role: 'administrator',
+      thumbnail: '',
+      customRoleId: null,
+    },
+    hmacVerified: false,
+  },
+  id: 38,
+  messages: [
+    {
+      id: 3597,
+      content: 'Sivin set the priority to low',
+      accountId: 2,
+      inboxId: 7,
+      conversationId: 38,
+      messageType: 2,
+      createdAt: 1730885168,
+      updatedAt: '2024-11-06T09:26:08.565Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      contentType: 'text',
+      contentAttributes: {},
+      senderType: null,
+      senderId: null,
+      externalSourceIds: {},
+      additionalAttributes: {},
+      processedMessageContent: 'Sivin set the priority to low',
+      sentiment: {},
+      conversation: {
+        assigneeId: 1,
+        unreadCount: 0,
+        lastActivityAt: 1730885168,
+        contactInbox: {
+          sourceId: 'candice@chatwoot.com',
+        },
+      },
+    },
+  ],
+  accountId: 2,
+  uuid: '21bd8638-a711-4080-b4ac-7fda1bc71837',
+  additionalAttributes: {
+    mail_subject: 'Test email',
+  },
+  agentLastSeenAt: 0,
+  assigneeLastSeenAt: 0,
+  canReply: true,
+  contactLastSeenAt: 0,
+  customAttributes: {},
+  inboxId: 7,
+  labels: [],
+  status: 'open',
+  createdAt: 1730836533,
+  timestamp: 1730885168,
+  firstReplyCreatedAt: 1730836533,
+  unreadCount: 0,
+  lastNonActivityMessage: {
+    id: 3591,
+    content:
+      'Hello, I bought some paper but they did not come with the indices as we had assumed. Was there a change in the product line?',
+    account_id: 2,
+    inbox_id: 7,
+    conversation_id: 38,
+    message_type: 1,
+    created_at: 1730836533,
+    updated_at: '2024-11-05T19:55:37.158Z',
+    private: false,
+    status: 'sent',
+    source_id:
+      'conversation/21bd8638-a711-4080-b4ac-7fda1bc71837/messages/3591@paperlayer.test',
+    content_type: 'text',
+    content_attributes: {
+      cc_emails: ['test@gmail.com'],
+      bcc_emails: [],
+      to_emails: [],
+    },
+    sender_type: 'User',
+    sender_id: 1,
+    external_source_ids: {},
+    additional_attributes: {},
+    processed_message_content:
+      'Hello, I bought some paper but they did not come with the indices as we had assumed. Was there a change in the product line?',
+    sentiment: {},
+    conversation: {
+      assignee_id: 1,
+      unread_count: 0,
+      last_activity_at: 1730885168,
+      contact_inbox: {
+        source_id: 'candice@chatwoot.com',
+      },
+    },
+    sender: {
+      id: 1,
+      name: 'Sivin',
+      available_name: 'Sivin',
+      avatar_url: '',
+      type: 'user',
+      availability_status: 'online',
+      thumbnail: '',
+    },
+  },
+  lastActivityAt: 1730885168,
+  priority: 'low',
+  waitingSince: 0,
+  slaPolicyId: null,
+  slaEvents: [],
+};
+
+const conversationWithMeta = {
+  meta: {
+    sender: {
+      additionalAttributes: {},
+      availabilityStatus: 'offline',
+      email: 'willy@chatwoot.com',
+      id: 29,
+      name: 'Willy Castelot',
+      phoneNumber: '+918585858585',
+      identifier: null,
+      thumbnail: '',
+      customAttributes: {
+        linkContact: 'https://apple.com',
+        listContact: 'Not spam',
+        textContact: 'hey',
+        checkboxContact: true,
+      },
+      lastActivityAt: 1712127410,
+      createdAt: 1712127389,
+    },
+    channel: 'Channel::Email',
+    assignee: {
+      id: 1,
+      accountId: 2,
+      availabilityStatus: 'online',
+      autoOffline: false,
+      confirmed: true,
+      email: 'sivin@chatwoot.com',
+      availableName: 'Sivin',
+      name: 'Sivin',
+      role: 'administrator',
+      thumbnail: '',
+      customRoleId: null,
+    },
+    hmacVerified: false,
+  },
+  id: 37,
+  messages: [
+    {
+      id: 3599,
+      content:
+        'If you want to buy our premium supplies,we can offer you a 20% discount! They come with indices and lazer beams!',
+      accountId: 2,
+      inboxId: 7,
+      conversationId: 37,
+      messageType: 1,
+      createdAt: 1730885428,
+      updatedAt: '2024-11-06T09:30:30.619Z',
+      private: false,
+      status: 'sent',
+      sourceId:
+        'conversation/53df668d-329d-420e-8fe9-980cb0e4d63c/messages/3599@paperlayer.test',
+      contentType: 'text',
+      contentAttributes: {
+        ccEmails: [],
+        bccEmails: [],
+        toEmails: [],
+      },
+      sender_type: 'User',
+      senderId: 1,
+      externalSourceIds: {},
+      additionalAttributes: {},
+      processedMessageContent:
+        'If you want to buy our premium supplies,we can offer you a 20% discount! They come with indices and lazer beams!',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1730885428,
+        contact_inbox: {
+          source_id: 'candice@chatwoot.com',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'Sivin',
+        availableName: 'Sivin',
+        avatarUrl: '',
+        type: 'user',
+        availabilityStatus: 'online',
+        thumbnail: '',
+      },
+    },
+  ],
+  accountId: 2,
+  uuid: '53df668d-329d-420e-8fe9-980cb0e4d63c',
+  additionalAttributes: {
+    mail_subject: 'we',
+  },
+  agentLastSeenAt: 1730885428,
+  assigneeLastSeenAt: 1730885428,
+  canReply: true,
+  contactLastSeenAt: 0,
+  customAttributes: {},
+  inboxId: 7,
+  labels: [
+    'billing',
+    'delivery',
+    'lead',
+    'premium-customer',
+    'software',
+    'ops-handover',
+  ],
+  muted: false,
+  snoozedUntil: null,
+  status: 'open',
+  createdAt: 1722487645,
+  timestamp: 1730885428,
+  firstReplyCreatedAt: 1722487645,
+  unreadCount: 0,
+  lastNonActivityMessage: {
+    id: 3599,
+    content:
+      'If you want to buy our premium supplies,we can offer you a 20% discount! They come with indices and lazer beams!',
+    account_id: 2,
+    inbox_id: 7,
+    conversation_id: 37,
+    message_type: 1,
+    created_at: 1730885428,
+    updated_at: '2024-11-06T09:30:30.619Z',
+    private: false,
+    status: 'sent',
+    source_id:
+      'conversation/53df668d-329d-420e-8fe9-980cb0e4d63c/messages/3599@paperlayer.test',
+    content_type: 'text',
+    content_attributes: {
+      cc_emails: [],
+      bcc_emails: [],
+      to_emails: [],
+    },
+    sender_type: 'User',
+    sender_id: 1,
+    external_source_ids: {},
+    additional_attributes: {},
+    processed_message_content:
+      'If you want to buy our premium supplies,we can offer you a 20% discount! They come with indices and lazer beams!',
+    sentiment: {},
+    conversation: {
+      assignee_id: 1,
+      unread_count: 2,
+      last_activity_at: 1730885428,
+      contact_inbox: {
+        source_id: 'willy@chatwoot.com',
+      },
+    },
+    sender: {
+      id: 1,
+      name: 'Sivin',
+      available_name: 'Sivin',
+      avatar_url: '',
+      type: 'user',
+      availability_status: 'online',
+      thumbnail: '',
+    },
+  },
+  lastActivityAt: 1730885428,
+  priority: 'urgent',
+  waitingSince: 1730885428,
+  slaPolicyId: 3,
+  appliedSla: {
+    id: 4,
+    sla_id: 3,
+    sla_status: 'active_with_misses',
+    created_at: 1712127410,
+    updated_at: 1712127545,
+    sla_description:
+      'Premium Service Level Agreements (SLAs) are contracts that define clear expectations ',
+    sla_name: 'Premium SLA',
+    sla_first_response_time_threshold: 120,
+    sla_next_response_time_threshold: 180,
+    sla_only_during_business_hours: false,
+    sla_resolution_time_threshold: 360,
+  },
+  slaEvents: [
+    {
+      id: 8,
+      event_type: 'frt',
+      meta: {},
+      updated_at: 1712127545,
+      created_at: 1712127545,
+    },
+    {
+      id: 9,
+      event_type: 'rt',
+      meta: {},
+      updated_at: 1712127790,
+      created_at: 1712127790,
+    },
+  ],
+};
+
+const contactForConversationWithoutMeta = computed(() => ({
+  availabilityStatus: null,
+  email: 'candice@chatwoot.com',
+  id: 29,
+  name: 'Candice Matherson',
+  phoneNumber: '+918585858585',
+  identifier: null,
+  thumbnail: 'https://api.dicebear.com/9.x/dylan/svg?seed=George',
+  customAttributes: {},
+  last_activity_at: 1712127410,
+  createdAt: 1712127389,
+  contactInboxes: [],
+}));
+
+const contactForConversationWithMeta = computed(() => ({
+  availabilityStatus: null,
+  email: 'willy@chatwoot.com',
+  id: 29,
+  name: 'Willy Castelot',
+  phoneNumber: '+918585858585',
+  identifier: null,
+  thumbnail: 'https://api.dicebear.com/9.x/dylan/svg?seed=Liam',
+  customAttributes: {},
+  lastActivityAt: 1712127410,
+  createdAt: 1712127389,
+  contactInboxes: [],
+}));
+
+const webWidgetInbox = computed(() => ({
+  phone_number: '+918585858585',
+  channel_type: 'Channel::WebWidget',
+}));
+
+const accountLabels = computed(() => [
+  {
+    id: 1,
+    title: 'billing',
+    description: 'Label is used for tagging billing related conversations',
+    color: '#28AD21',
+    show_on_sidebar: true,
+  },
+  {
+    id: 3,
+    title: 'delivery',
+    description: null,
+    color: '#A2FDD5',
+    show_on_sidebar: true,
+  },
+  {
+    id: 6,
+    title: 'lead',
+    description: null,
+    color: '#F161C8',
+    show_on_sidebar: true,
+  },
+  {
+    id: 4,
+    title: 'ops-handover',
+    description: null,
+    color: '#A53326',
+    show_on_sidebar: true,
+  },
+  {
+    id: 5,
+    title: 'premium-customer',
+    description: null,
+    color: '#6FD4EF',
+    show_on_sidebar: true,
+  },
+  {
+    id: 2,
+    title: 'software',
+    description: null,
+    color: '#8F6EF2',
+    show_on_sidebar: true,
+  },
+]);
+</script>
+
+<template>
+  <Story
+    title="Components/ConversationCard"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Conversation without meta">
+      <div class="flex flex-col">
+        <ConversationCard
+          :key="conversationWithoutMeta.id"
+          :conversation="conversationWithoutMeta"
+          :contact="contactForConversationWithoutMeta"
+          :state-inbox="webWidgetInbox"
+          :account-labels="accountLabels"
+          class="hover:bg-n-alpha-1"
+        />
+      </div>
+    </Variant>
+    <Variant title="Conversation with meta (SLA, Labels)">
+      <div class="flex flex-col">
+        <ConversationCard
+          :key="conversationWithMeta.id"
+          :conversation="{
+            ...conversationWithMeta,
+            priority: 'medium',
+          }"
+          :contact="contactForConversationWithMeta"
+          :state-inbox="webWidgetInbox"
+          :account-labels="accountLabels"
+          class="hover:bg-n-alpha-1"
+        />
+      </div>
+    </Variant>
+    <Variant title="Conversation without meta (Unread count)">
+      <div class="flex flex-col">
+        <ConversationCard
+          :key="conversationWithoutMeta.id"
+          :conversation="{
+            ...conversationWithoutMeta,
+            unreadCount: 2,
+            priority: 'high',
+          }"
+          :contact="contactForConversationWithoutMeta"
+          :state-inbox="webWidgetInbox"
+          :account-labels="accountLabels"
+          class="hover:bg-n-alpha-1"
+        />
+      </div>
+    </Variant>
+    <Variant title="Conversation with meta (SLA, Labels, Unread count)">
+      <div class="flex flex-col">
+        <ConversationCard
+          :key="conversationWithMeta.id"
+          :conversation="{
+            ...conversationWithMeta,
+            unreadCount: 2,
+          }"
+          :contact="contactForConversationWithMeta"
+          :state-inbox="webWidgetInbox"
+          :account-labels="accountLabels"
+          class="hover:bg-n-alpha-1"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue
new file mode 100644
index 000000000..d99234a27
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue
@@ -0,0 +1,102 @@
+<script setup>
+import { computed } from 'vue';
+import { getInboxIconByType } from 'dashboard/helper/inbox';
+import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import CardMessagePreview from './CardMessagePreview.vue';
+import CardMessagePreviewWithMeta from './CardMessagePreviewWithMeta.vue';
+import CardPriorityIcon from './CardPriorityIcon.vue';
+
+const props = defineProps({
+  conversation: {
+    type: Object,
+    required: true,
+  },
+  contact: {
+    type: Object,
+    required: true,
+  },
+  stateInbox: {
+    type: Object,
+    required: true,
+  },
+  accountLabels: {
+    type: Array,
+    required: true,
+  },
+});
+
+const currentContact = computed(() => props.contact);
+
+const currentContactName = computed(() => currentContact.value?.name);
+const currentContactThumbnail = computed(() => currentContact.value?.thumbnail);
+const currentContactStatus = computed(
+  () => currentContact.value?.availabilityStatus
+);
+
+const inbox = computed(() => props.stateInbox);
+
+const inboxName = computed(() => inbox.value?.name);
+
+const inboxIcon = computed(() => {
+  const { phoneNumber, channelType } = inbox.value;
+  return getInboxIconByType(channelType, phoneNumber);
+});
+
+const lastActivityAt = computed(() => {
+  const timestamp = props.conversation?.timestamp;
+  return timestamp ? shortTimestamp(dynamicTime(timestamp)) : '';
+});
+
+const showMessagePreviewWithoutMeta = computed(() => {
+  const { slaPolicyId, labels = [] } = props.conversation;
+  return !slaPolicyId && labels.length === 0;
+});
+</script>
+
+<template>
+  <div
+    class="flex w-full gap-3 px-3 py-4 transition-colors duration-300 ease-in-out rounded-xl"
+  >
+    <Avatar
+      :name="currentContactName"
+      :src="currentContactThumbnail"
+      :size="24"
+      :status="currentContactStatus"
+      rounded-full
+    />
+    <div class="flex flex-col w-full gap-1">
+      <div class="flex items-center justify-between h-6 gap-2">
+        <h4 class="text-base font-medium truncate text-n-slate-12">
+          {{ currentContactName }}
+        </h4>
+        <div class="flex items-center gap-2">
+          <CardPriorityIcon :priority="conversation.priority || null" />
+          <div
+            v-tooltip.top-start="inboxName"
+            class="flex items-center justify-center flex-shrink-0 rounded-full bg-n-alpha-2 size-5"
+          >
+            <Icon
+              :icon="inboxIcon"
+              class="flex-shrink-0 text-n-slate-11 size-3"
+            />
+          </div>
+          <span class="text-sm text-n-slate-10">
+            {{ lastActivityAt }}
+          </span>
+        </div>
+      </div>
+      <CardMessagePreview
+        v-if="showMessagePreviewWithoutMeta"
+        :conversation="conversation"
+      />
+      <CardMessagePreviewWithMeta
+        v-else
+        :conversation="conversation"
+        :account-labels="accountLabels"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue
new file mode 100644
index 000000000..a9db5d99b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue
@@ -0,0 +1,90 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { evaluateSLAStatus } from '@chatwoot/utils';
+
+const props = defineProps({
+  conversation: {
+    type: Object,
+    required: true,
+  },
+});
+
+const REFRESH_INTERVAL = 60000;
+
+const timer = ref(null);
+const slaStatus = ref({
+  threshold: null,
+  isSlaMissed: false,
+  type: null,
+  icon: null,
+});
+
+// TODO: Remove this once we update the helper from utils
+// https://github.com/chatwoot/utils/blob/main/src/sla.ts#L73
+const convertObjectCamelCaseToSnakeCase = object => {
+  return Object.keys(object).reduce((acc, key) => {
+    acc[key.replace(/([A-Z])/g, '_$1').toLowerCase()] = object[key];
+    return acc;
+  }, {});
+};
+
+const appliedSLA = computed(() => props.conversation?.appliedSla);
+const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);
+
+const slaStatusText = computed(() => {
+  return slaStatus.value?.type?.toUpperCase();
+});
+
+const updateSlaStatus = () => {
+  slaStatus.value = evaluateSLAStatus({
+    appliedSla: convertObjectCamelCaseToSnakeCase(appliedSLA.value),
+    chat: props.conversation,
+  });
+};
+
+const createTimer = () => {
+  timer.value = setTimeout(() => {
+    updateSlaStatus();
+    createTimer();
+  }, REFRESH_INTERVAL);
+};
+
+onMounted(() => {
+  updateSlaStatus();
+  createTimer();
+});
+
+onUnmounted(() => {
+  if (timer.value) {
+    clearTimeout(timer.value);
+  }
+});
+
+watch(() => props.conversation, updateSlaStatus);
+</script>
+
+<template>
+  <div class="flex items-center min-w-fit gap-0.5 h-6">
+    <div class="flex items-center justify-center size-4">
+      <svg
+        width="10"
+        height="13"
+        viewBox="0 0 10 13"
+        fill="none"
+        :class="isSlaMissed ? 'fill-n-ruby-10' : 'fill-n-slate-9'"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4.55091 12.412C7.44524 12.412 9.37939 10.4571 9.37939 7.51446C9.37939 2.63072 5.21405 0.599854 2.36808 0.599854C1.81546 0.599854 1.45626 0.800176 1.45626 1.1801C1.45626 1.32516 1.52534 1.48404 1.64277 1.62219C2.27828 2.38204 2.92069 3.27314 2.93451 4.36455C2.93451 4.5925 2.9276 4.78592 2.76181 5.08295L3.05194 5.03459C2.81017 4.21949 2.18848 3.63234 1.5806 3.63234C1.32501 3.63234 1.15232 3.81884 1.15232 4.09514C1.15232 4.23331 1.19377 4.56488 1.19377 4.79974C1.19377 5.95332 0.26123 6.69935 0.26123 8.67495C0.26123 10.92 1.97434 12.412 4.55091 12.412ZM4.68906 10.8923C3.65982 10.8923 2.96905 10.2637 2.96905 9.33119C2.96905 8.3572 3.66672 8.01181 3.75652 7.38322C3.76344 7.32796 3.79107 7.31414 3.83251 7.34867C4.08809 7.57663 4.24697 7.85293 4.37822 8.1776C4.67525 7.77696 4.81341 6.9204 4.73051 6.0293C4.72361 5.97404 4.75814 5.94642 4.80649 5.96713C6.02916 6.53357 6.65085 7.74241 6.65085 8.82693C6.65085 9.92527 6.00844 10.8923 4.68906 10.8923Z"
+        />
+      </svg>
+    </div>
+
+    <span
+      class="text-sm truncate"
+      :class="isSlaMissed ? 'text-n-ruby-11' : 'text-n-slate-11'"
+    >
+      {{ `${slaStatusText}: ${slaStatus.threshold}` }}
+    </span>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/avatar/Avatar.vue b/app/javascript/dashboard/components-next/avatar/Avatar.vue
index d558f030a..39614f6b3 100644
--- a/app/javascript/dashboard/components-next/avatar/Avatar.vue
+++ b/app/javascript/dashboard/components-next/avatar/Avatar.vue
@@ -1,6 +1,9 @@
 <script setup>
-import Icon from 'dashboard/components-next/icon/Icon.vue';
 import { computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { removeEmoji } from 'shared/helpers/emoji';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 import wootConstants from 'dashboard/constants/globals';
 
 const props = defineProps({
@@ -27,34 +30,114 @@ const props = defineProps({
   status: {
     type: String,
     default: null,
-    validator: value => {
-      if (!value) return true;
-      return wootConstants.AVAILABILITY_STATUS_KEYS.includes(value);
-    },
+    validator: value =>
+      !value || wootConstants.AVAILABILITY_STATUS_KEYS.includes(value),
+  },
+  iconName: {
+    type: String,
+    default: null,
   },
 });
+
 const emit = defineEmits(['upload']);
 
+const { t } = useI18n();
+
 const isImageValid = ref(true);
 
-function invalidateCurrentImage() {
-  isImageValid.value = false;
-}
+const AVATAR_COLORS = {
+  dark: [
+    ['#4B143D', '#FF8DCC'],
+    ['#3F220D', '#FFA366'],
+    ['#2A2A2A', '#ADB1B8'],
+    ['#023B37', '#0BD8B6'],
+    ['#27264D', '#A19EFF'],
+    ['#1D2E62', '#9EB1FF'],
+  ],
+  light: [
+    ['#FBDCEF', '#C2298A'],
+    ['#FFE0BB', '#99543A'],
+    ['#E8E8E8', '#60646C'],
+    ['#CCF3EA', '#008573'],
+    ['#EBEBFE', '#4747C2'],
+    ['#E1E9FF', '#3A5BC7'],
+  ],
+  default: { bg: '#E8E8E8', text: '#60646C' },
+};
+
+const STATUS_CLASSES = {
+  online: 'bg-n-teal-10',
+  busy: 'bg-n-amber-10',
+  offline: 'bg-n-slate-10',
+};
+
+const showDefaultAvatar = computed(() => !props.src && !props.name);
 
 const initials = computed(() => {
-  const splitNames = props.name.split(' ');
-
-  if (splitNames.length > 1) {
-    const firstName = splitNames[0];
-    const lastName = splitNames[splitNames.length - 1];
-
-    return firstName[0] + lastName[0];
-  }
-
-  const firstName = splitNames[0];
-  return firstName[0];
+  if (!props.name) return '';
+  const words = removeEmoji(props.name).split(/\s+/);
+  return words.length === 1
+    ? words[0].charAt(0).toUpperCase()
+    : words
+        .slice(0, 2)
+        .map(word => word.charAt(0))
+        .join('')
+        .toUpperCase();
 });
 
+const getColorsByNameLength = computed(() => {
+  if (!props.name) return AVATAR_COLORS.default;
+
+  const index = props.name.length % AVATAR_COLORS.light.length;
+  return {
+    bg: AVATAR_COLORS.light[index][0],
+    darkBg: AVATAR_COLORS.dark[index][0],
+    text: AVATAR_COLORS.light[index][1],
+    darkText: AVATAR_COLORS.dark[index][1],
+  };
+});
+
+const containerStyles = computed(() => ({
+  width: `${props.size}px`,
+  height: `${props.size}px`,
+}));
+
+const avatarStyles = computed(() => ({
+  ...containerStyles.value,
+  backgroundColor:
+    !showDefaultAvatar.value && (!props.src || !isImageValid.value)
+      ? getColorsByNameLength.value.bg
+      : undefined,
+  color:
+    !showDefaultAvatar.value && (!props.src || !isImageValid.value)
+      ? getColorsByNameLength.value.text
+      : undefined,
+  '--dark-bg': getColorsByNameLength.value.darkBg,
+  '--dark-text': getColorsByNameLength.value.darkText,
+}));
+
+const badgeStyles = computed(() => {
+  const badgeSize = Math.max(props.size * 0.35, 8); // 35% of avatar size, minimum 8px
+  return {
+    width: `${badgeSize}px`,
+    height: `${badgeSize}px`,
+    top: `${props.size - badgeSize / 1.1}px`,
+    left: `${props.size - badgeSize / 1.1}px`,
+  };
+});
+
+const iconStyles = computed(() => ({
+  fontSize: `${props.size / 1.6}px`,
+}));
+
+const initialsStyles = computed(() => ({
+  fontSize: `${props.size / 1.8}px`,
+}));
+
+const invalidateCurrentImage = () => {
+  isImageValid.value = false;
+};
+
 watch(
   () => props.src,
   () => {
@@ -64,48 +147,62 @@ watch(
 </script>
 
 <template>
-  <span
-    class="relative inline"
-    :style="{
-      width: `${size}px`,
-      height: `${size}px`,
-    }"
-  >
-    <slot name="badge" :size>
+  <span class="relative inline-flex" :style="containerStyles">
+    <!-- Status Badge -->
+    <slot name="badge" :size="size">
       <div
-        class="rounded-full w-2.5 h-2.5 absolute z-20"
-        :style="{
-          top: `${size - 10}px`,
-          left: `${size - 10}px`,
-        }"
-        :class="{
-          'bg-n-teal-10': status === 'online',
-          'bg-n-amber-10': status === 'busy',
-          'bg-n-slate-10': status === 'offline',
-        }"
+        v-if="status"
+        class="absolute z-20 border rounded-full border-n-slate-3"
+        :style="badgeStyles"
+        :class="STATUS_CLASSES[status]"
       />
     </slot>
+
+    <!-- Avatar Container -->
     <span
       role="img"
-      class="inline-flex relative items-center justify-center object-cover overflow-hidden font-medium bg-woot-50 text-woot-500 group/avatar"
-      :class="{
-        'rounded-full': roundedFull,
-        'rounded-xl': !roundedFull,
-      }"
-      :style="{
-        width: `${size}px`,
-        height: `${size}px`,
-      }"
+      class="relative inline-flex items-center justify-center object-cover overflow-hidden font-medium"
+      :class="[
+        roundedFull ? 'rounded-full' : 'rounded-xl',
+        {
+          'dark:!bg-[var(--dark-bg)] dark:!text-[var(--dark-text)]':
+            !showDefaultAvatar && (!src || !isImageValid),
+          'bg-n-slate-3 dark:bg-n-slate-4': showDefaultAvatar,
+        },
+      ]"
+      :style="avatarStyles"
     >
+      <!-- Avatar Content -->
       <img
         v-if="src && isImageValid"
         :src="src"
         :alt="name"
         @error="invalidateCurrentImage"
       />
-      <span v-else>
-        {{ initials }}
-      </span>
+
+      <template v-else>
+        <!-- Custom Icon -->
+        <Icon v-if="iconName" :icon="iconName" :style="iconStyles" />
+
+        <!-- Initials -->
+        <span
+          v-else-if="!showDefaultAvatar"
+          :style="initialsStyles"
+          class="select-none"
+        >
+          {{ initials }}
+        </span>
+
+        <!-- Fallback Icon if no name or image -->
+        <Icon
+          v-else
+          v-tooltip.top-start="t('THUMBNAIL.AUTHOR.NOT_AVAILABLE')"
+          icon="i-lucide-user"
+          :style="iconStyles"
+        />
+      </template>
+
+      <!-- Upload Overlay -->
       <div
         v-if="allowUpload"
         role="button"
diff --git a/app/javascript/histoire.setup.ts b/app/javascript/histoire.setup.ts
index 9b1166711..13a81608a 100644
--- a/app/javascript/histoire.setup.ts
+++ b/app/javascript/histoire.setup.ts
@@ -2,6 +2,7 @@ import './design-system/histoire.scss';
 import { defineSetupVue3 } from '@histoire/plugin-vue';
 import i18nMessages from 'dashboard/i18n';
 import { createI18n } from 'vue-i18n';
+import { vResizeObserver } from '@vueuse/components';
 import store from 'dashboard/store';
 
 const i18n = createI18n({
@@ -13,4 +14,5 @@ const i18n = createI18n({
 export const setupVue3 = defineSetupVue3(({ app }) => {
   app.use(store);
   app.use(i18n);
+  app.directive('resize', vResizeObserver);
 });

From 7a4514452698ef30c5fd2b11977e6ae40a427b60 Mon Sep 17 00:00:00 2001
From: Vishnu Narayanan <iamwishnu@gmail.com>
Date: Tue, 12 Nov 2024 02:05:05 +0530
Subject: [PATCH 28/39] chore: Set rack-timeout to log at ERROR level (#10400)

40 % of Chatwoot's current log volume is from state transition logs generated by `rack-timeout`, which are logged at the `INFO` level. This PR reduce the noise in logs and set RACK::TIMEOUT to log at `error` level
---
 config/initializers/rack_timeout.rb | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 config/initializers/rack_timeout.rb

diff --git a/config/initializers/rack_timeout.rb b/config/initializers/rack_timeout.rb
new file mode 100644
index 000000000..405ef8914
--- /dev/null
+++ b/config/initializers/rack_timeout.rb
@@ -0,0 +1,6 @@
+require 'rack-timeout'
+
+# Reduce noise by filtering state=ready and state=completed which are logged at INFO level
+Rails.application.config.after_initialize do
+  Rack::Timeout::Logger.level = Logger::ERROR
+end

From 97d7b9d754ab80ae12ebbdf22978ee62c49e9199 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 12 Nov 2024 07:09:09 +0530
Subject: [PATCH 29/39] feat(ee): Setup @chatwoot/captain NPM library (#10389)

---
Co-authored-by: Sojan <sojan@pepalo.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../integrations/captain_controller.rb        |  53 +-
 app/javascript/dashboard/api/integrations.js  |   4 +-
 .../components-next/sidebar/Sidebar.vue       |  20 +-
 .../components-next/sidebar/SidebarGroup.vue  |   4 +-
 .../layout/config/sidebarItems/primaryMenu.js |   2 +-
 .../dashboard/routes/dashboard/Captain.vue    | 152 +++--
 .../routes/dashboard/dashboard.routes.js      |   3 +-
 config/routes.rb                              |   2 +-
 package.json                                  |   9 +-
 pnpm-lock.yaml                                | 618 ++++++++++++++----
 .../integrations/captain_controller_spec.rb   |  98 +--
 tailwind.config.js                            |   7 +
 12 files changed, 710 insertions(+), 262 deletions(-)

diff --git a/app/controllers/api/v1/accounts/integrations/captain_controller.rb b/app/controllers/api/v1/accounts/integrations/captain_controller.rb
index 7df0e61df..840fe5428 100644
--- a/app/controllers/api/v1/accounts/integrations/captain_controller.rb
+++ b/app/controllers/api/v1/accounts/integrations/captain_controller.rb
@@ -1,22 +1,47 @@
 class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::BaseController
-  before_action :check_admin_authorization?
-  before_action :fetch_hook
+  before_action :hook
 
-  def sso_url
-    params_string =
-      "token=#{URI.encode_www_form_component(@hook['settings']['access_token'])}" \
-      "&email=#{URI.encode_www_form_component(@hook['settings']['account_email'])}" \
-      "&account_id=#{URI.encode_www_form_component(@hook['settings']['account_id'])}"
-
-    installation_config = InstallationConfig.find_by(name: 'CAPTAIN_APP_URL')
-
-    sso_url = "#{installation_config.value}/sso?#{params_string}"
-    render json: { sso_url: sso_url }, status: :ok
+  def proxy
+    response = HTTParty.send(request_method, request_url, body: permitted_params[:body].to_json, headers: headers)
+    render plain: response.body, status: response.code
   end
 
   private
 
-  def fetch_hook
-    @hook = Current.account.hooks.find_by!(app_id: 'captain')
+  def headers
+    {
+      'X-User-Email' => hook.settings['account_email'],
+      'X-User-Token' => hook.settings['access_token'],
+      'Content-Type' => 'application/json',
+      'Accept' => '*/*'
+    }
+  end
+
+  def request_path
+    if params[:route] == '/sessions/profile'
+      'api/sessions/profile'
+    else
+      "api/accounts/#{hook.settings['account_id']}/#{params[:route]}"
+    end
+  end
+
+  def request_url
+    base_url = InstallationConfig.find_by(name: 'CAPTAIN_API_URL').value
+    URI.join(base_url, request_path).to_s
+  end
+
+  def hook
+    @hook ||= Current.account.hooks.find_by!(app_id: 'captain')
+  end
+
+  def request_method
+    method = permitted_params[:method].downcase
+    raise 'Invalid or missing HTTP method' unless %w[get post put patch delete options head].include?(method)
+
+    method
+  end
+
+  def permitted_params
+    params.permit(:method, :route, body: {})
   end
 end
diff --git a/app/javascript/dashboard/api/integrations.js b/app/javascript/dashboard/api/integrations.js
index 975857ce1..59a3e244a 100644
--- a/app/javascript/dashboard/api/integrations.js
+++ b/app/javascript/dashboard/api/integrations.js
@@ -33,8 +33,8 @@ class IntegrationsAPI extends ApiClient {
     return axios.delete(`${this.baseUrl()}/integrations/hooks/${hookId}`);
   }
 
-  fetchCaptainURL() {
-    return axios.get(`${this.baseUrl()}/integrations/captain/sso_url`);
+  requestCaptain(body) {
+    return axios.post(`${this.baseUrl()}/integrations/captain/proxy`, body);
   }
 }
 
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index 0d4421f89..a7d3a1cee 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -164,9 +164,25 @@ const menuItems = computed(() => {
     },
     {
       name: 'Captain',
-      icon: 'i-lucide-bot',
+      icon: 'i-woot-captain',
       label: t('SIDEBAR.CAPTAIN'),
-      to: accountScopedRoute('captain'),
+      children: [
+        {
+          name: 'Documents',
+          label: 'Documents',
+          to: accountScopedRoute('captain', { page: 'documents' }),
+        },
+        {
+          name: 'Responses',
+          label: 'Responses',
+          to: accountScopedRoute('captain', { page: 'responses' }),
+        },
+        {
+          name: 'Playground',
+          label: 'Playground',
+          to: accountScopedRoute('captain', { page: 'playground' }),
+        },
+      ],
     },
     {
       name: 'Contacts',
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
index 89d99d402..f7bc2362d 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
@@ -122,7 +122,9 @@ const toggleTrigger = () => {
       <template v-for="child in children" :key="child.name">
         <SidebarSubGroup
           v-if="child.children"
-          v-bind="child"
+          :label="child.label"
+          :icon="child.icon"
+          :children="child.children"
           :is-expanded="isExpanded"
           :active-child="activeChild"
         />
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
index 4bd42e987..5a50bd440 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
@@ -22,7 +22,7 @@ const primaryMenuItems = accountId => [
     key: 'captain',
     label: 'CAPTAIN',
     featureFlag: FEATURE_FLAGS.CAPTAIN,
-    toState: frontendURL(`accounts/${accountId}/captain`),
+    toState: frontendURL(`accounts/${accountId}/captain/documents`),
     toStateName: 'captain',
   },
   {
diff --git a/app/javascript/dashboard/routes/dashboard/Captain.vue b/app/javascript/dashboard/routes/dashboard/Captain.vue
index 24ba89272..5241347ed 100644
--- a/app/javascript/dashboard/routes/dashboard/Captain.vue
+++ b/app/javascript/dashboard/routes/dashboard/Captain.vue
@@ -1,75 +1,107 @@
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue';
+import { nextTick, watch, computed } from 'vue';
+import IntegrationsAPI from 'dashboard/api/integrations';
 import { useStoreGetters } from 'dashboard/composables/store';
+import { makeRouter, setupApp } from '@chatwoot/captain';
 
-import integrations from '../../api/integrations';
-import Spinner from 'shared/components/Spinner.vue';
-
-const isLoading = ref(true);
-const captainURL = ref('');
-const hasError = ref(false);
-
-const loadCaptainFrame = async integration => {
-  if (!integration || !integration.enabled) {
-    return;
-  }
-  try {
-    isLoading.value = true;
-    const { data } = await integrations.fetchCaptainURL();
-    captainURL.value = data.sso_url;
-  } catch (error) {
-    hasError.value = true;
-  } finally {
-    isLoading.value = false;
-  }
-};
+const props = defineProps({
+  page: {
+    type: String,
+    required: true,
+  },
+});
 
 const getters = useStoreGetters();
+
+const routeMap = {
+  documents: '/app/accounts/[account_id]/documents/',
+  playground: '/app/accounts/[account_id]/playground/',
+  responses: '/app/accounts/[account_id]/responses/',
+};
+
+const resolvedRoute = computed(() => routeMap[props.page]);
+
+let router = null;
+
+watch(
+  () => props.page,
+  () => {
+    if (router) {
+      router.push({ name: resolvedRoute.value });
+    }
+  },
+  { immediate: true }
+);
+
+const buildApp = () => {
+  router = makeRouter();
+  setupApp('#captain', {
+    router,
+    fetchFn: async (source, options) => {
+      const parsedSource = new URL(source);
+      let path = parsedSource.pathname;
+      if (path === `/api/sessions/profile`) {
+        path = '/sessions/profile';
+      } else {
+        path = path.replace(/^\/api\/accounts\/\d+/, '');
+      }
+
+      // include search params
+      path = `${path}${parsedSource.search}`;
+
+      const response = await IntegrationsAPI.requestCaptain({
+        method: options.method ?? 'GET',
+        route: path,
+        body: options.body ? JSON.parse(options.body) : null,
+      });
+
+      return {
+        json: () => {
+          return response.data;
+        },
+        ok: response.status >= 200 && response.status < 300,
+        status: response.status,
+        headers: response.headers,
+      };
+    },
+  });
+
+  router.push({ name: resolvedRoute.value });
+};
+
 const captainIntegration = computed(() =>
   getters['integrations/getIntegration'].value('captain', null)
 );
 
-onMounted(() => loadCaptainFrame(captainIntegration.value));
-
-watch(captainIntegration, updatedIntegration =>
-  loadCaptainFrame(updatedIntegration)
+watch(
+  () => captainIntegration.value,
+  (newValue, prevValue) => {
+    if (!prevValue && newValue) {
+      nextTick(() => buildApp());
+    }
+  },
+  { immediate: true }
 );
 </script>
 
 <template>
-  <div
-    class="flex-1 overflow-auto flex gap-8 flex-col font-inter text-slate-900 dark:text-slate-500"
-  >
-    <div class="flex-1 flex items-center justify-center">
-      <div v-if="!captainIntegration">
-        {{ $t('INTEGRATION_SETTINGS.CAPTAIN.DISABLED') }}
-      </div>
-      <div
-        v-else-if="!captainIntegration.enabled"
-        class="flex-1 flex flex-col gap-2 items-center justify-center"
-      >
-        <div>{{ $t('INTEGRATION_SETTINGS.CAPTAIN.DISABLED') }}</div>
-        <router-link :to="{ name: 'settings_applications' }">
-          <woot-button class="clear link">
-            {{ $t('INTEGRATION_SETTINGS.CAPTAIN.CLICK_HERE_TO_CONFIGURE') }}
-          </woot-button>
-        </router-link>
-      </div>
-      <div
-        v-else-if="isLoading"
-        class="flex-1 flex items-center justify-center"
-      >
-        <Spinner color-scheme="primary" />
-        <span>{{ $t('INTEGRATION_SETTINGS.CAPTAIN.LOADING_CONSOLE') }}</span>
-      </div>
-      <div v-else-if="!isLoading && hasError">
-        {{ $t('INTEGRATION_SETTINGS.CAPTAIN.FAILED_TO_LOAD_CONSOLE') }}
-      </div>
-      <iframe
-        v-else-if="!isLoading && captainURL"
-        :src="captainURL"
-        class="w-full min-h-[800px] h-full"
-      />
-    </div>
+  <div v-if="!captainIntegration">
+    {{ $t('INTEGRATION_SETTINGS.CAPTAIN.DISABLED') }}
   </div>
+  <div
+    v-else-if="!captainIntegration.enabled"
+    class="flex-1 flex flex-col gap-2 items-center justify-center"
+  >
+    <div>{{ $t('INTEGRATION_SETTINGS.CAPTAIN.DISABLED') }}</div>
+    <router-link :to="{ name: 'settings_applications' }">
+      <woot-button class="clear link">
+        {{ $t('INTEGRATION_SETTINGS.CAPTAIN.CLICK_HERE_TO_CONFIGURE') }}
+      </woot-button>
+    </router-link>
+  </div>
+  <div v-else id="captain" class="w-full" />
 </template>
+
+<style>
+@import '@chatwoot/captain/dist/style.css';
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
index f76c5e4e7..caa078eed 100644
--- a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
@@ -21,13 +21,14 @@ export default {
       component: AppContainer,
       children: [
         {
-          path: frontendURL('accounts/:accountId/captain'),
+          path: frontendURL('accounts/:accountId/captain/:page'),
           name: 'captain',
           component: Captain,
           meta: {
             permissions: ['administrator', 'agent'],
             featureFlag: FEATURE_FLAGS.CAPTAIN,
           },
+          props: true,
         },
         ...inboxRoutes,
         ...conversation.routes,
diff --git a/config/routes.rb b/config/routes.rb
index 7006e8f4b..1c913155b 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -219,7 +219,7 @@ Rails.application.routes.draw do
             resources :apps, only: [:index, :show]
             resource :captain, controller: 'captain', only: [] do
               collection do
-                get :sso_url
+                post :proxy
               end
             end
             resources :hooks, only: [:show, :create, :update, :destroy] do
diff --git a/package.json b/package.json
index e25396d65..3742a1b50 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
   ],
   "dependencies": {
     "@breezystack/lamejs": "^1.2.7",
+    "@chatwoot/captain": "0.0.3-alpha.4",
     "@chatwoot/ninja-keys": "1.2.3",
     "@chatwoot/prosemirror-schema": "1.1.1-next",
     "@chatwoot/utils": "^0.0.25",
@@ -83,7 +84,7 @@
     "video.js": "7.18.1",
     "videojs-record": "4.5.0",
     "videojs-wavesurfer": "3.8.0",
-    "vue": "^3.5.8",
+    "vue": "^3.5.12",
     "vue-chartjs": "5.3.1",
     "vue-datepicker-next": "^1.0.3",
     "vue-dompurify-html": "^5.1.0",
@@ -101,10 +102,10 @@
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.8.1",
-    "@iconify-json/ri": "^1.2.1",
     "@histoire/plugin-vue": "0.17.15",
-    "@iconify-json/logos": "^1.2.0",
-    "@iconify-json/lucide": "^1.2.10",
+    "@iconify-json/logos": "^1.2.3",
+    "@iconify-json/lucide": "^1.2.11",
+    "@iconify-json/ri": "^1.2.3",
     "@size-limit/file": "^8.2.4",
     "@vitest/coverage-v8": "2.0.1",
     "@vue/test-utils": "^2.4.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9b8e76280..17d70809b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,6 +16,9 @@ importers:
       '@breezystack/lamejs':
         specifier: ^1.2.7
         version: 1.2.7
+      '@chatwoot/captain':
+        specifier: 0.0.3-alpha.4
+        version: 0.0.3-alpha.4(tailwindcss@3.4.13)(typescript@5.6.2)
       '@chatwoot/ninja-keys':
         specifier: 1.2.3
         version: 1.2.3
@@ -30,13 +33,13 @@ importers:
         version: 1.6.7
       '@formkit/vue':
         specifier: ^1.6.7
-        version: 1.6.7(tailwindcss@3.4.13)(vue@3.5.8(typescript@5.6.2))
+        version: 1.6.7(tailwindcss@3.4.13)(vue@3.5.12(typescript@5.6.2))
       '@hcaptcha/vue3-hcaptcha':
         specifier: ^1.3.0
-        version: 1.3.0(vue@3.5.8(typescript@5.6.2))
+        version: 1.3.0(vue@3.5.12(typescript@5.6.2))
       '@highlightjs/vue-plugin':
         specifier: ^2.1.0
-        version: 2.1.0(highlight.js@11.10.0)(vue@3.5.8(typescript@5.6.2))
+        version: 2.1.0(highlight.js@11.10.0)(vue@3.5.12(typescript@5.6.2))
       '@june-so/analytics-next':
         specifier: ^2.0.0
         version: 2.0.0
@@ -57,7 +60,7 @@ importers:
         version: 0.5.4
       '@sentry/vue':
         specifier: ^8.31.0
-        version: 8.31.0(vue@3.5.8(typescript@5.6.2))
+        version: 8.31.0(vue@3.5.12(typescript@5.6.2))
       '@sindresorhus/slugify':
         specifier: 2.2.1
         version: 2.2.1
@@ -66,25 +69,25 @@ importers:
         version: 0.5.15(tailwindcss@3.4.13)
       '@tanstack/vue-table':
         specifier: ^8.20.5
-        version: 8.20.5(vue@3.5.8(typescript@5.6.2))
+        version: 8.20.5(vue@3.5.12(typescript@5.6.2))
       '@vitejs/plugin-vue':
         specifier: ^5.1.4
-        version: 5.1.4(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))(vue@3.5.8(typescript@5.6.2))
+        version: 5.1.4(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))(vue@3.5.12(typescript@5.6.2))
       '@vue/compiler-sfc':
         specifier: ^3.5.8
         version: 3.5.8
       '@vuelidate/core':
         specifier: ^2.0.3
-        version: 2.0.3(vue@3.5.8(typescript@5.6.2))
+        version: 2.0.3(vue@3.5.12(typescript@5.6.2))
       '@vuelidate/validators':
         specifier: ^2.0.4
-        version: 2.0.4(vue@3.5.8(typescript@5.6.2))
+        version: 2.0.4(vue@3.5.12(typescript@5.6.2))
       '@vueuse/components':
         specifier: ^11.1.0
-        version: 11.1.0(vue@3.5.8(typescript@5.6.2))
+        version: 11.1.0(vue@3.5.12(typescript@5.6.2))
       '@vueuse/core':
         specifier: ^11.1.0
-        version: 11.1.0(vue@3.5.8(typescript@5.6.2))
+        version: 11.1.0(vue@3.5.12(typescript@5.6.2))
       activestorage:
         specifier: ^5.2.6
         version: 5.2.8
@@ -120,7 +123,7 @@ importers:
         version: 3.1.6
       floating-vue:
         specifier: ^5.2.2
-        version: 5.2.2(vue@3.5.8(typescript@5.6.2))
+        version: 5.2.2(vue@3.5.12(typescript@5.6.2))
       highlight.js:
         specifier: ^11.10.0
         version: 11.10.0
@@ -173,20 +176,20 @@ importers:
         specifier: 3.8.0
         version: 3.8.0
       vue:
-        specifier: ^3.5.8
-        version: 3.5.8(typescript@5.6.2)
+        specifier: ^3.5.12
+        version: 3.5.12(typescript@5.6.2)
       vue-chartjs:
         specifier: 5.3.1
-        version: 5.3.1(chart.js@4.4.4)(vue@3.5.8(typescript@5.6.2))
+        version: 5.3.1(chart.js@4.4.4)(vue@3.5.12(typescript@5.6.2))
       vue-datepicker-next:
         specifier: ^1.0.3
-        version: 1.0.3(vue@3.5.8(typescript@5.6.2))
+        version: 1.0.3(vue@3.5.12(typescript@5.6.2))
       vue-dompurify-html:
         specifier: ^5.1.0
-        version: 5.1.0(vue@3.5.8(typescript@5.6.2))
+        version: 5.1.0(vue@3.5.12(typescript@5.6.2))
       vue-i18n:
         specifier: 9.14.0
-        version: 9.14.0(vue@3.5.8(typescript@5.6.2))
+        version: 9.14.0(vue@3.5.12(typescript@5.6.2))
       vue-letter:
         specifier: ^0.2.0
         version: 0.2.0
@@ -195,25 +198,25 @@ importers:
         version: 3.1.0
       vue-router:
         specifier: ~4.4.5
-        version: 4.4.5(vue@3.5.8(typescript@5.6.2))
+        version: 4.4.5(vue@3.5.12(typescript@5.6.2))
       vue-upload-component:
         specifier: ^3.1.17
         version: 3.1.17
       vue-virtual-scroller:
         specifier: ^2.0.0-beta.8
-        version: 2.0.0-beta.8(vue@3.5.8(typescript@5.6.2))
+        version: 2.0.0-beta.8(vue@3.5.12(typescript@5.6.2))
       vue3-click-away:
         specifier: ^1.2.4
         version: 1.2.4
       vuedraggable:
         specifier: ^4.1.0
-        version: 4.1.0(vue@3.5.8(typescript@5.6.2))
+        version: 4.1.0(vue@3.5.12(typescript@5.6.2))
       vuex:
         specifier: ~4.1.0
-        version: 4.1.0(vue@3.5.8(typescript@5.6.2))
+        version: 4.1.0(vue@3.5.12(typescript@5.6.2))
       vuex-router-sync:
         specifier: 6.0.0-rc.1
-        version: 6.0.0-rc.1(vue-router@4.4.5(vue@3.5.8(typescript@5.6.2)))(vuex@4.1.0(vue@3.5.8(typescript@5.6.2)))
+        version: 6.0.0-rc.1(vue-router@4.4.5(vue@3.5.12(typescript@5.6.2)))(vuex@4.1.0(vue@3.5.12(typescript@5.6.2)))
       wavesurfer.js:
         specifier: 7.8.6
         version: 7.8.6
@@ -223,16 +226,16 @@ importers:
         version: 1.8.1(tailwindcss@3.4.13)
       '@histoire/plugin-vue':
         specifier: 0.17.15
-        version: 0.17.15(histoire@0.17.15(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)))(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))(vue@3.5.8(typescript@5.6.2))
+        version: 0.17.15(histoire@0.17.15(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)))(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))(vue@3.5.12(typescript@5.6.2))
       '@iconify-json/logos':
-        specifier: ^1.2.0
-        version: 1.2.0
+        specifier: ^1.2.3
+        version: 1.2.3
       '@iconify-json/lucide':
-        specifier: ^1.2.10
-        version: 1.2.10
+        specifier: ^1.2.11
+        version: 1.2.11
       '@iconify-json/ri':
-        specifier: ^1.2.1
-        version: 1.2.1
+        specifier: ^1.2.3
+        version: 1.2.3
       '@size-limit/file':
         specifier: ^8.2.4
         version: 8.2.6(size-limit@8.2.6)
@@ -343,15 +346,28 @@ packages:
     resolution: {integrity: sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-string-parser@7.25.9':
+    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-identifier@7.24.7':
     resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-identifier@7.25.9':
+    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/parser@7.25.6':
     resolution: {integrity: sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@7.26.2':
+    resolution: {integrity: sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   '@babel/runtime@7.25.6':
     resolution: {integrity: sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==}
     engines: {node: '>=6.9.0'}
@@ -360,12 +376,19 @@ packages:
     resolution: {integrity: sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@7.26.0':
+    resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
+    engines: {node: '>=6.9.0'}
+
   '@bcoe/v8-coverage@0.2.3':
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
 
   '@breezystack/lamejs@1.2.7':
     resolution: {integrity: sha512-6wc7ck65ctA75Hq7FYHTtTvGnYs6msgdxiSUICQ+A01nVOWg6rqouZB8IdyteRlfpYYiFovkf67dIeOgWIUzTA==}
 
+  '@chatwoot/captain@0.0.3-alpha.4':
+    resolution: {integrity: sha512-moUPBbwKGaS5Yxvxzb60vaM0bLkUiqxG8SI9Tyh1ELnKKg7ZMdvIpQDKYBabucoIq8Oje0gH6B/tuWGVaaEYJQ==}
+
   '@chatwoot/ninja-keys@1.2.3':
     resolution: {integrity: sha512-xM8d9P5ikDMZm2WbaCTk/TW5HFauylrU3cJ75fq5je6ixKwyhl/0kZbVN/vbbZN4+AUX/OaSIn6IJbtCgIF67g==}
 
@@ -750,9 +773,18 @@ packages:
   '@floating-ui/dom@1.1.1':
     resolution: {integrity: sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==}
 
+  '@floating-ui/dom@1.6.12':
+    resolution: {integrity: sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==}
+
   '@floating-ui/utils@0.2.7':
     resolution: {integrity: sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==}
 
+  '@floating-ui/utils@0.2.8':
+    resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
+
+  '@floating-ui/vue@1.1.5':
+    resolution: {integrity: sha512-ynL1p5Z+woPVSwgMGqeDrx6HrJfGIDzFyESFkyqJKilGW1+h/8yVY29Khn0LaU6wHBRwZ13ntG6reiHWK6jyzw==}
+
   '@formkit/core@1.6.7':
     resolution: {integrity: sha512-wEoWK7crcCPRV5KJfEGLjjIS+qwbuD8I5Ur0zTtKRQrdO4oRL6kVoubxQOpgnq1l8sWfcRY8Wpf22Wna2LD20Q==}
 
@@ -840,14 +872,14 @@ packages:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     deprecated: Use @eslint/object-schema instead
 
-  '@iconify-json/logos@1.2.0':
-    resolution: {integrity: sha512-VkU9QSqeZR2guWbecdqkcoZEAJfgJJTUm6QAsypuZQ7Cve6zy39wOXDjp2H31I8QyQy4O3Cz96+pNji6UQFg4w==}
+  '@iconify-json/logos@1.2.3':
+    resolution: {integrity: sha512-JLHS5hgZP1b55EONAWNeqBUuriRfRNKWXK4cqYx0PpVaJfIIMiiMxFfvoQiX/bkE9XgkLhcKmDUqL3LXPdXPwQ==}
 
-  '@iconify-json/lucide@1.2.10':
-    resolution: {integrity: sha512-cR1xpRJ4dnoXlC0ShDjzbrZyu+ICH4OUaYl7S51MhZUO1H040s7asVqv0LsDbofSLDuzWkHCLsBabTTRL0mCUg==}
+  '@iconify-json/lucide@1.2.11':
+    resolution: {integrity: sha512-dqpbV7+g1qqxtZOHCZKwdKhtYYqEUjFhYiOg/+PcADbjtapoL+bwa1Brn12gAHq5r2K7Mf29xRHOTmZ3UHHOrw==}
 
-  '@iconify-json/ri@1.2.1':
-    resolution: {integrity: sha512-xI3+xZHBI+wlhQqd6jRRcLD5K8B8vQNyxcSB43myxNZ/SfXIn7Ny28h0jyPo9e0gT8fGhqx6R5PeLz/UBB8jwQ==}
+  '@iconify-json/ri@1.2.3':
+    resolution: {integrity: sha512-UVKofd5xkSevGd5K01pvO4NWsu+2C9spu+GxnMZUYymUiaWmpCAxtd22MFSpm6MGf0MP4GCwhDCo1Q8L8oZ9wg==}
 
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
@@ -855,6 +887,12 @@ packages:
   '@iconify/utils@2.1.32':
     resolution: {integrity: sha512-LeifFZPPKu28O3AEDpYJNdEbvS4/ojAPyIW+pF/vUpJTYnbTiXUHkCh0bwgFRzKvdpb8H4Fbfd/742++MF4fPQ==}
 
+  '@internationalized/date@3.5.6':
+    resolution: {integrity: sha512-jLxQjefH9VI5P9UQuqB6qNKnvFt1Ky1TPIzHGsIlCi7sZZoMR8SdYbBGRvM0y+Jtb+ez4ieBzmiAUcpmPYpyOw==}
+
+  '@internationalized/number@3.5.4':
+    resolution: {integrity: sha512-h9huwWjNqYyE2FXZZewWqmCdkw1HeFds5q4Siuoms3hUQC5iPJK3aBmkFZoDSLN4UD0Bl8G22L/NdHpeOr+/7A==}
+
   '@intlify/core-base@9.14.0':
     resolution: {integrity: sha512-zJn0imh9HIsZZUtt9v8T16PeVstPv6bP2YzlrYJwoF8F30gs4brZBwW2KK6EI5WYKFi3NeqX6+UU4gniz5TkGg==}
     engines: {node: '>= 16'}
@@ -1645,6 +1683,9 @@ packages:
     engines: {node: '>=0.10.0', npm: '>2.7.0'}
     os: [aix, darwin, freebsd, linux, macos, openbsd, sunos, win32, windows]
 
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+
   '@tailwindcss/typography@0.5.15':
     resolution: {integrity: sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==}
     peerDependencies:
@@ -1654,12 +1695,20 @@ packages:
     resolution: {integrity: sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==}
     engines: {node: '>=12'}
 
+  '@tanstack/virtual-core@3.10.9':
+    resolution: {integrity: sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==}
+
   '@tanstack/vue-table@8.20.5':
     resolution: {integrity: sha512-2xixT3BEgSDw+jOSqPt6ylO/eutDI107t2WdFMVYIZZ45UmTHLySqNriNs0+dMaKR56K5z3t+97P6VuVnI2L+Q==}
     engines: {node: '>=12'}
     peerDependencies:
       vue: '>=3.2'
 
+  '@tanstack/vue-virtual@3.10.9':
+    resolution: {integrity: sha512-KU2quiwJQpA0sdflpXw24bhW+x8PG+FlrSJK3Ilobim671HNn4ztLVWUCEz3Inei4dLYq+GW1MK9X6i6ZeirkQ==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+
   '@tootallnate/once@2.0.0':
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
     engines: {node: '>= 10'}
@@ -1741,15 +1790,27 @@ packages:
   '@vitest/utils@2.0.1':
     resolution: {integrity: sha512-STH+2fHZxlveh1mpU4tKzNgRk7RZJyr6kFGJYCI5vocdfqfPsQrgVC6k7dBWHfin5QNB4TLvRS0Ckly3Dt1uWw==}
 
+  '@vue/compiler-core@3.5.12':
+    resolution: {integrity: sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==}
+
   '@vue/compiler-core@3.5.8':
     resolution: {integrity: sha512-Uzlxp91EPjfbpeO5KtC0KnXPkuTfGsNDeaKQJxQN718uz+RqDYarEf7UhQJGK+ZYloD2taUbHTI2J4WrUaZQNA==}
 
+  '@vue/compiler-dom@3.5.12':
+    resolution: {integrity: sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==}
+
   '@vue/compiler-dom@3.5.8':
     resolution: {integrity: sha512-GUNHWvoDSbSa5ZSHT9SnV5WkStWfzJwwTd6NMGzilOE/HM5j+9EB9zGXdtu/fCNEmctBqMs6C9SvVPpVPuk1Eg==}
 
+  '@vue/compiler-sfc@3.5.12':
+    resolution: {integrity: sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==}
+
   '@vue/compiler-sfc@3.5.8':
     resolution: {integrity: sha512-taYpngQtSysrvO9GULaOSwcG5q821zCoIQBtQQSx7Uf7DxpR6CIHR90toPr9QfDD2mqHQPCSgoWBvJu0yV9zjg==}
 
+  '@vue/compiler-ssr@3.5.12':
+    resolution: {integrity: sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==}
+
   '@vue/compiler-ssr@3.5.8':
     resolution: {integrity: sha512-W96PtryNsNG9u0ZnN5Q5j27Z/feGrFV6zy9q5tzJVyJaLiwYxvC0ek4IXClZygyhjm+XKM7WD9pdKi/wIRVC/Q==}
 
@@ -1759,19 +1820,22 @@ packages:
   '@vue/devtools-api@6.6.4':
     resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
 
-  '@vue/reactivity@3.5.8':
-    resolution: {integrity: sha512-mlgUyFHLCUZcAYkqvzYnlBRCh0t5ZQfLYit7nukn1GR96gc48Bp4B7OIcSfVSvlG1k3BPfD+p22gi1t2n9tsXg==}
+  '@vue/reactivity@3.5.12':
+    resolution: {integrity: sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==}
 
-  '@vue/runtime-core@3.5.8':
-    resolution: {integrity: sha512-fJuPelh64agZ8vKkZgp5iCkPaEqFJsYzxLk9vSC0X3G8ppknclNDr61gDc45yBGTaN5Xqc1qZWU3/NoaBMHcjQ==}
+  '@vue/runtime-core@3.5.12':
+    resolution: {integrity: sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==}
 
-  '@vue/runtime-dom@3.5.8':
-    resolution: {integrity: sha512-DpAUz+PKjTZPUOB6zJgkxVI3GuYc2iWZiNeeHQUw53kdrparSTG6HeXUrYDjaam8dVsCdvQxDz6ZWxnyjccUjQ==}
+  '@vue/runtime-dom@3.5.12':
+    resolution: {integrity: sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==}
 
-  '@vue/server-renderer@3.5.8':
-    resolution: {integrity: sha512-7AmC9/mEeV9mmXNVyUIm1a1AjUhyeeGNbkLh39J00E7iPeGks8OGRB5blJiMmvqSh8SkaS7jkLWSpXtxUCeagA==}
+  '@vue/server-renderer@3.5.12':
+    resolution: {integrity: sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==}
     peerDependencies:
-      vue: 3.5.8
+      vue: 3.5.12
+
+  '@vue/shared@3.5.12':
+    resolution: {integrity: sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==}
 
   '@vue/shared@3.5.8':
     resolution: {integrity: sha512-mJleSWbAGySd2RJdX1RBtcrUBX6snyOc0qHpgk3lGi4l9/P/3ny3ELqFWqYdkXIwwNN/kdm8nD9ky8o6l/Lx2A==}
@@ -1800,12 +1864,21 @@ packages:
   '@vueuse/components@11.1.0':
     resolution: {integrity: sha512-8CTbvH1rHfAlqsMdMg6G2OiIvHiHn8HRx0yyJ+Ri/C8J6cLylXAd7VESawoCAkRdAXT4ucPnj/uYHZqEb0JbBQ==}
 
+  '@vueuse/core@10.11.1':
+    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
+
   '@vueuse/core@11.1.0':
     resolution: {integrity: sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==}
 
+  '@vueuse/metadata@10.11.1':
+    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
+
   '@vueuse/metadata@11.1.0':
     resolution: {integrity: sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==}
 
+  '@vueuse/shared@10.11.1':
+    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+
   '@vueuse/shared@11.1.0':
     resolution: {integrity: sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==}
 
@@ -1843,6 +1916,11 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  acorn@8.14.0:
+    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
   activestorage@5.2.8:
     resolution: {integrity: sha512-bueFOxBGIAUdrjbLyBZ8Xlkcecy8vr05sCk5VV37BbFi+RehPoEjfvKX3iYYPY7RFVhl+L43W9/ZbN3xNNLPtQ==}
 
@@ -1910,6 +1988,10 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-hidden@1.2.4:
+    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
+    engines: {node: '>=10'}
+
   array-buffer-byte-length@1.0.0:
     resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
 
@@ -2069,6 +2151,9 @@ packages:
   change-case@4.1.2:
     resolution: {integrity: sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==}
 
+  change-case@5.4.4:
+    resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==}
+
   charenc@0.0.2:
     resolution: {integrity: sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==}
 
@@ -2092,6 +2177,9 @@ packages:
     resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==}
     engines: {node: '>= 14.16.0'}
 
+  class-variance-authority@0.7.0:
+    resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==}
+
   cli-boxes@3.0.0:
     resolution: {integrity: sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==}
     engines: {node: '>=10'}
@@ -2116,6 +2204,14 @@ packages:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
 
+  clsx@2.0.0:
+    resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==}
+    engines: {node: '>=6'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -2194,6 +2290,9 @@ packages:
   crypt@0.0.2:
     resolution: {integrity: sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==}
 
+  crypto-js@4.2.0:
+    resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
+
   css-blank-pseudo@5.0.2:
     resolution: {integrity: sha512-aCU4AZ7uEcVSUzagTlA9pHciz7aWPKA/YzrEkpdSopJ2pvhIxiQ5sYeMz1/KByxlIo4XBdvMNJAVKMg/GRnhfw==}
     engines: {node: ^14 || ^16 || >=18}
@@ -2270,6 +2369,9 @@ packages:
     resolution: {integrity: sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==}
     engines: {node: '>=0.11'}
 
+  date-fns@3.6.0:
+    resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
+
   date-format-parse@0.2.7:
     resolution: {integrity: sha512-/+lyMUKoRogMuTeOVii6lUwjbVlesN9YRYLzZT/g3TEZ3uD9QnpjResujeEqUW+OSNbT7T1+SYdyEkTcRv+KDQ==}
 
@@ -3351,12 +3453,24 @@ packages:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
 
+  lucide-vue-next@0.394.0:
+    resolution: {integrity: sha512-pTPwSeCyR8d0P6O5B9wiOj4Foauq5UbcZYCKxQzoEirbYJ6fX58x4NE/r6YRlPsC59J9pPTC5I0gAEgdH2fMHQ==}
+    peerDependencies:
+      vue: '>=3.0.1'
+
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
   m3u8-parser@4.7.0:
     resolution: {integrity: sha512-48l/OwRyjBm+QhNNigEEcRcgbRvnUjL7rxs597HmW9QSNbyNvt+RcZ9T/d9vxi9A9z7EZrB1POtZYhdRlwYQkQ==}
 
   magic-string@0.30.11:
     resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==}
 
+  magic-string@0.30.12:
+    resolution: {integrity: sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==}
+
   magicast@0.3.4:
     resolution: {integrity: sha512-TyDF/Pn36bBji9rWKHlZe+PZb6Mx5V8IHCSxk7X4aljM4e/vyDvZZYwHewdVaqiA0nb3ghfHU/6AUpDxWoER2Q==}
 
@@ -3513,6 +3627,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanoid@5.0.8:
+    resolution: {integrity: sha512-TcJPw+9RV9dibz1hHUzlLVy8N4X9TnwirAjrU08Juo6BNKggzVfP2ZJ/3ZUSq15Xl5i85i+Z89XBO90pB2PghQ==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+
   nanospinner@1.1.0:
     resolution: {integrity: sha512-yFvNYMig4AthKYfHFl1sLj7B2nkHL4lzdig4osvl9/LdGbXwrdFRoqBS98gsEsOakr0yH+r5NZ/1Y9gdVB8trA==}
 
@@ -3741,6 +3860,18 @@ packages:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
 
+  pinia@2.2.6:
+    resolution: {integrity: sha512-vIsR8JkDN5Ga2vAxqOE2cJj4VtsHnzpR1Fz30kClxlh0yCHfec6uoMeM3e/ddqmwFUejK3NlrcQa/shnpyT4hA==}
+    peerDependencies:
+      '@vue/composition-api': ^1.4.0
+      typescript: '>=4.4.4'
+      vue: ^2.6.14 || ^3.5.11
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      typescript:
+        optional: true
+
   pirates@4.0.6:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
@@ -4063,6 +4194,11 @@ packages:
     resolution: {integrity: sha512-AAFUA5O1d83pIHEhJwWCq/RQcRukCkn/NSm2QsTEMle5f2hP0ChI2+3Xb051PZCkLryI/Ir1MVKviT2FIloaTQ==}
     engines: {node: '>=12'}
 
+  radix-vue@1.9.9:
+    resolution: {integrity: sha512-DuL2o7jxNjzlSP5Ko+kJgrW5db+jC3RlnYQIs3WITTqgzfdeP7hXjcqIUveY1f0uXRpOAN3OAd5MZ/SpRyQzQQ==}
+    peerDependencies:
+      vue: '>= 3.2.0'
+
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
@@ -4073,8 +4209,8 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
-  readdirp@4.0.1:
-    resolution: {integrity: sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==}
+  readdirp@4.0.2:
+    resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==}
     engines: {node: '>= 14.16.0'}
 
   recordrtc@5.6.2:
@@ -4191,6 +4327,10 @@ packages:
     resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
     engines: {node: '>=4'}
 
+  secure-ls@2.0.0:
+    resolution: {integrity: sha512-Wgtnw0QSm0v7gVKv11nOoeyGS65EThGXnBB7jfd4IhZd2eq3B4AMPcXAL5qJ1h55+Qolun7TONTwX7H5m6e2pQ==}
+    engines: {node: '>=8.0'}
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -4402,6 +4542,14 @@ packages:
     resolution: {integrity: sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==}
     engines: {node: '>=10.0.0'}
 
+  tailwind-merge@2.5.4:
+    resolution: {integrity: sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==}
+
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
   tailwindcss@3.4.13:
     resolution: {integrity: sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==}
     engines: {node: '>=14.0.0'}
@@ -4492,6 +4640,9 @@ packages:
   tslib@2.7.0:
     resolution: {integrity: sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==}
 
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
   turbolinks@5.2.0:
     resolution: {integrity: sha512-pMiez3tyBo6uRHFNNZoYMmrES/IaGgMhQQM+VFF36keryjb5ms0XkVpmKHkfW/4Vy96qiGW3K9bz0tF5sK9bBw==}
 
@@ -4778,6 +4929,9 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  vue-sonner@1.2.5:
+    resolution: {integrity: sha512-dAFCdq2cYxEwvW4gHuJhySCXklmxOWzjl5QwkNL9IIdkqyvSkdu+YnAbnJBdIAH/zo1bhXTuGG+m0Two4AX/KA==}
+
   vue-upload-component@3.1.17:
     resolution: {integrity: sha512-1orTC5apoFzBz4ku2HAydpviaAOck+ABc83rGypIK/Bgl+TqhtoWsQOhXqbb7vDv7pKlvRVWwml9PM224HyhkA==}
 
@@ -4789,8 +4943,8 @@ packages:
   vue3-click-away@1.2.4:
     resolution: {integrity: sha512-O9Z2KlvIhJT8OxaFy04eiZE9rc1Mk/bp+70dLok68ko3Kr8AW5dU+j8avSk4GDQu94FllSr4m5ul4BpzlKOw1A==}
 
-  vue@3.5.8:
-    resolution: {integrity: sha512-hvuvuCy51nP/1fSRvrrIqTLSvrSyz2Pq+KQ8S8SXCxTWVE0nMaOnSDnSOxV1eYmGfvK7mqiwvd1C59CEEz7dAQ==}
+  vue@3.5.12:
+    resolution: {integrity: sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
@@ -4982,12 +5136,20 @@ snapshots:
 
   '@babel/helper-string-parser@7.24.8': {}
 
+  '@babel/helper-string-parser@7.25.9': {}
+
   '@babel/helper-validator-identifier@7.24.7': {}
 
+  '@babel/helper-validator-identifier@7.25.9': {}
+
   '@babel/parser@7.25.6':
     dependencies:
       '@babel/types': 7.25.6
 
+  '@babel/parser@7.26.2':
+    dependencies:
+      '@babel/types': 7.26.0
+
   '@babel/runtime@7.25.6':
     dependencies:
       regenerator-runtime: 0.14.1
@@ -4998,10 +5160,39 @@ snapshots:
       '@babel/helper-validator-identifier': 7.24.7
       to-fast-properties: 2.0.0
 
+  '@babel/types@7.26.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+
   '@bcoe/v8-coverage@0.2.3': {}
 
   '@breezystack/lamejs@1.2.7': {}
 
+  '@chatwoot/captain@0.0.3-alpha.4(tailwindcss@3.4.13)(typescript@5.6.2)':
+    dependencies:
+      '@sentry/vue': 8.31.0(vue@3.5.12(typescript@5.6.2))
+      '@tanstack/vue-table': 8.20.5(vue@3.5.12(typescript@5.6.2))
+      '@vueuse/core': 10.11.1(vue@3.5.12(typescript@5.6.2))
+      change-case: 5.4.4
+      class-variance-authority: 0.7.0
+      clsx: 2.1.1
+      date-fns: 3.6.0
+      lucide-vue-next: 0.394.0(vue@3.5.12(typescript@5.6.2))
+      pinia: 2.2.6(typescript@5.6.2)(vue@3.5.12(typescript@5.6.2))
+      radix-vue: 1.9.9(vue@3.5.12(typescript@5.6.2))
+      secure-ls: 2.0.0
+      tailwind-merge: 2.5.4
+      tailwindcss-animate: 1.0.7(tailwindcss@3.4.13)
+      vue: 3.5.12(typescript@5.6.2)
+      vue-router: 4.4.5(vue@3.5.12(typescript@5.6.2))
+      vue-sonner: 1.2.5
+      wavesurfer.js: 7.8.6
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - tailwindcss
+      - typescript
+
   '@chatwoot/ninja-keys@1.2.3':
     dependencies:
       '@material/mwc-icon': 0.25.3
@@ -5356,8 +5547,24 @@ snapshots:
     dependencies:
       '@floating-ui/core': 1.6.7
 
+  '@floating-ui/dom@1.6.12':
+    dependencies:
+      '@floating-ui/core': 1.6.7
+      '@floating-ui/utils': 0.2.8
+
   '@floating-ui/utils@0.2.7': {}
 
+  '@floating-ui/utils@0.2.8': {}
+
+  '@floating-ui/vue@1.1.5(vue@3.5.12(typescript@5.6.2))':
+    dependencies:
+      '@floating-ui/dom': 1.6.12
+      '@floating-ui/utils': 0.2.8
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@formkit/core@1.6.7':
     dependencies:
       '@formkit/utils': 1.6.7
@@ -5403,7 +5610,7 @@ snapshots:
       '@formkit/observer': 1.6.7
       '@formkit/utils': 1.6.7
 
-  '@formkit/vue@1.6.7(tailwindcss@3.4.13)(vue@3.5.8(typescript@5.6.2))':
+  '@formkit/vue@1.6.7(tailwindcss@3.4.13)(vue@3.5.12(typescript@5.6.2))':
     dependencies:
       '@formkit/core': 1.6.7
       '@formkit/dev': 1.6.7
@@ -5414,20 +5621,20 @@ snapshots:
       '@formkit/themes': 1.6.7(tailwindcss@3.4.13)
       '@formkit/utils': 1.6.7
       '@formkit/validation': 1.6.7
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
     transitivePeerDependencies:
       - tailwindcss
       - unocss
       - windicss
 
-  '@hcaptcha/vue3-hcaptcha@1.3.0(vue@3.5.8(typescript@5.6.2))':
+  '@hcaptcha/vue3-hcaptcha@1.3.0(vue@3.5.12(typescript@5.6.2))':
     dependencies:
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
-  '@highlightjs/vue-plugin@2.1.0(highlight.js@11.10.0)(vue@3.5.8(typescript@5.6.2))':
+  '@highlightjs/vue-plugin@2.1.0(highlight.js@11.10.0)(vue@3.5.12(typescript@5.6.2))':
     dependencies:
       highlight.js: 11.10.0
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
   '@histoire/app@0.17.17(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))':
     dependencies:
@@ -5454,7 +5661,7 @@ snapshots:
     transitivePeerDependencies:
       - vite
 
-  '@histoire/plugin-vue@0.17.15(histoire@0.17.15(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)))(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))(vue@3.5.8(typescript@5.6.2))':
+  '@histoire/plugin-vue@0.17.15(histoire@0.17.15(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)))(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))(vue@3.5.12(typescript@5.6.2))':
     dependencies:
       '@histoire/controls': 0.17.17(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))
       '@histoire/shared': 0.17.17(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))
@@ -5464,7 +5671,7 @@ snapshots:
       histoire: 0.17.15(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))
       launch-editor: 2.9.1
       pathe: 1.1.2
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
     transitivePeerDependencies:
       - vite
 
@@ -5492,15 +5699,15 @@ snapshots:
 
   '@humanwhocodes/object-schema@2.0.3': {}
 
-  '@iconify-json/logos@1.2.0':
+  '@iconify-json/logos@1.2.3':
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify-json/lucide@1.2.10':
+  '@iconify-json/lucide@1.2.11':
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify-json/ri@1.2.1':
+  '@iconify-json/ri@1.2.3':
     dependencies:
       '@iconify/types': 2.0.0
 
@@ -5518,6 +5725,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@internationalized/date@3.5.6':
+    dependencies:
+      '@swc/helpers': 0.5.15
+
+  '@internationalized/number@3.5.4':
+    dependencies:
+      '@swc/helpers': 0.5.15
+
   '@intlify/core-base@9.14.0':
     dependencies:
       '@intlify/message-compiler': 9.14.0
@@ -5781,13 +5996,13 @@ snapshots:
     dependencies:
       '@sentry/types': 8.31.0
 
-  '@sentry/vue@8.31.0(vue@3.5.8(typescript@5.6.2))':
+  '@sentry/vue@8.31.0(vue@3.5.12(typescript@5.6.2))':
     dependencies:
       '@sentry/browser': 8.31.0
       '@sentry/core': 8.31.0
       '@sentry/types': 8.31.0
       '@sentry/utils': 8.31.0
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
   '@sinclair/typebox@0.27.8': {}
 
@@ -6423,6 +6638,10 @@ snapshots:
       '@stdlib/utils-constructor-name': 0.0.8
       '@stdlib/utils-global': 0.0.7
 
+  '@swc/helpers@0.5.15':
+    dependencies:
+      tslib: 2.8.1
+
   '@tailwindcss/typography@0.5.15(tailwindcss@3.4.13)':
     dependencies:
       lodash.castarray: 4.4.0
@@ -6433,10 +6652,17 @@ snapshots:
 
   '@tanstack/table-core@8.20.5': {}
 
-  '@tanstack/vue-table@8.20.5(vue@3.5.8(typescript@5.6.2))':
+  '@tanstack/virtual-core@3.10.9': {}
+
+  '@tanstack/vue-table@8.20.5(vue@3.5.12(typescript@5.6.2))':
     dependencies:
       '@tanstack/table-core': 8.20.5
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
+
+  '@tanstack/vue-virtual@3.10.9(vue@3.5.12(typescript@5.6.2))':
+    dependencies:
+      '@tanstack/virtual-core': 3.10.9
+      vue: 3.5.12(typescript@5.6.2)
 
   '@tootallnate/once@2.0.0': {}
 
@@ -6498,10 +6724,10 @@ snapshots:
       global: 4.4.0
       is-function: 1.0.2
 
-  '@vitejs/plugin-vue@5.1.4(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))(vue@3.5.8(typescript@5.6.2))':
+  '@vitejs/plugin-vue@5.1.4(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))(vue@3.5.12(typescript@5.6.2))':
     dependencies:
       vite: 5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
   '@vitest/coverage-v8@2.0.1(vitest@2.0.1(@types/node@22.7.0)(jsdom@24.1.3)(sass@1.79.3)(terser@5.33.0))':
     dependencies:
@@ -6550,6 +6776,14 @@ snapshots:
       loupe: 3.1.1
       pretty-format: 29.7.0
 
+  '@vue/compiler-core@3.5.12':
+    dependencies:
+      '@babel/parser': 7.26.2
+      '@vue/shared': 3.5.12
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
   '@vue/compiler-core@3.5.8':
     dependencies:
       '@babel/parser': 7.25.6
@@ -6558,11 +6792,28 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
+  '@vue/compiler-dom@3.5.12':
+    dependencies:
+      '@vue/compiler-core': 3.5.12
+      '@vue/shared': 3.5.12
+
   '@vue/compiler-dom@3.5.8':
     dependencies:
       '@vue/compiler-core': 3.5.8
       '@vue/shared': 3.5.8
 
+  '@vue/compiler-sfc@3.5.12':
+    dependencies:
+      '@babel/parser': 7.26.2
+      '@vue/compiler-core': 3.5.12
+      '@vue/compiler-dom': 3.5.12
+      '@vue/compiler-ssr': 3.5.12
+      '@vue/shared': 3.5.12
+      estree-walker: 2.0.2
+      magic-string: 0.30.12
+      postcss: 8.4.47
+      source-map-js: 1.2.1
+
   '@vue/compiler-sfc@3.5.8':
     dependencies:
       '@babel/parser': 7.25.6
@@ -6575,6 +6826,11 @@ snapshots:
       postcss: 8.4.47
       source-map-js: 1.2.1
 
+  '@vue/compiler-ssr@3.5.12':
+    dependencies:
+      '@vue/compiler-dom': 3.5.12
+      '@vue/shared': 3.5.12
+
   '@vue/compiler-ssr@3.5.8':
     dependencies:
       '@vue/compiler-dom': 3.5.8
@@ -6584,27 +6840,29 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
-  '@vue/reactivity@3.5.8':
+  '@vue/reactivity@3.5.12':
     dependencies:
-      '@vue/shared': 3.5.8
+      '@vue/shared': 3.5.12
 
-  '@vue/runtime-core@3.5.8':
+  '@vue/runtime-core@3.5.12':
     dependencies:
-      '@vue/reactivity': 3.5.8
-      '@vue/shared': 3.5.8
+      '@vue/reactivity': 3.5.12
+      '@vue/shared': 3.5.12
 
-  '@vue/runtime-dom@3.5.8':
+  '@vue/runtime-dom@3.5.12':
     dependencies:
-      '@vue/reactivity': 3.5.8
-      '@vue/runtime-core': 3.5.8
-      '@vue/shared': 3.5.8
+      '@vue/reactivity': 3.5.12
+      '@vue/runtime-core': 3.5.12
+      '@vue/shared': 3.5.12
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.5.8(vue@3.5.8(typescript@5.6.2))':
+  '@vue/server-renderer@3.5.12(vue@3.5.12(typescript@5.6.2))':
     dependencies:
-      '@vue/compiler-ssr': 3.5.8
-      '@vue/shared': 3.5.8
-      vue: 3.5.8(typescript@5.6.2)
+      '@vue/compiler-ssr': 3.5.12
+      '@vue/shared': 3.5.12
+      vue: 3.5.12(typescript@5.6.2)
+
+  '@vue/shared@3.5.12': {}
 
   '@vue/shared@3.5.8': {}
 
@@ -6613,40 +6871,59 @@ snapshots:
       js-beautify: 1.15.1
       vue-component-type-helpers: 2.1.2
 
-  '@vuelidate/core@2.0.3(vue@3.5.8(typescript@5.6.2))':
+  '@vuelidate/core@2.0.3(vue@3.5.12(typescript@5.6.2))':
     dependencies:
-      vue: 3.5.8(typescript@5.6.2)
-      vue-demi: 0.13.11(vue@3.5.8(typescript@5.6.2))
+      vue: 3.5.12(typescript@5.6.2)
+      vue-demi: 0.13.11(vue@3.5.12(typescript@5.6.2))
 
-  '@vuelidate/validators@2.0.4(vue@3.5.8(typescript@5.6.2))':
+  '@vuelidate/validators@2.0.4(vue@3.5.12(typescript@5.6.2))':
     dependencies:
-      vue: 3.5.8(typescript@5.6.2)
-      vue-demi: 0.13.11(vue@3.5.8(typescript@5.6.2))
+      vue: 3.5.12(typescript@5.6.2)
+      vue-demi: 0.13.11(vue@3.5.12(typescript@5.6.2))
 
-  '@vueuse/components@11.1.0(vue@3.5.8(typescript@5.6.2))':
+  '@vueuse/components@11.1.0(vue@3.5.12(typescript@5.6.2))':
     dependencies:
-      '@vueuse/core': 11.1.0(vue@3.5.8(typescript@5.6.2))
-      '@vueuse/shared': 11.1.0(vue@3.5.8(typescript@5.6.2))
-      vue-demi: 0.14.10(vue@3.5.8(typescript@5.6.2))
+      '@vueuse/core': 11.1.0(vue@3.5.12(typescript@5.6.2))
+      '@vueuse/shared': 11.1.0(vue@3.5.12(typescript@5.6.2))
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/core@11.1.0(vue@3.5.8(typescript@5.6.2))':
+  '@vueuse/core@10.11.1(vue@3.5.12(typescript@5.6.2))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.1
+      '@vueuse/shared': 10.11.1(vue@3.5.12(typescript@5.6.2))
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/core@11.1.0(vue@3.5.12(typescript@5.6.2))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 11.1.0
-      '@vueuse/shared': 11.1.0(vue@3.5.8(typescript@5.6.2))
-      vue-demi: 0.14.10(vue@3.5.8(typescript@5.6.2))
+      '@vueuse/shared': 11.1.0(vue@3.5.12(typescript@5.6.2))
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/metadata@10.11.1': {}
+
   '@vueuse/metadata@11.1.0': {}
 
-  '@vueuse/shared@11.1.0(vue@3.5.8(typescript@5.6.2))':
+  '@vueuse/shared@10.11.1(vue@3.5.12(typescript@5.6.2))':
     dependencies:
-      vue-demi: 0.14.10(vue@3.5.8(typescript@5.6.2))
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/shared@11.1.0(vue@3.5.12(typescript@5.6.2))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -6674,6 +6951,9 @@ snapshots:
 
   acorn@8.12.1: {}
 
+  acorn@8.14.0:
+    optional: true
+
   activestorage@5.2.8:
     dependencies:
       spark-md5: 3.0.2
@@ -6748,6 +7028,10 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-hidden@1.2.4:
+    dependencies:
+      tslib: 2.7.0
+
   array-buffer-byte-length@1.0.0:
     dependencies:
       call-bind: 1.0.2
@@ -6965,6 +7249,8 @@ snapshots:
       snake-case: 3.0.4
       tslib: 2.7.0
 
+  change-case@5.4.4: {}
+
   charenc@0.0.2: {}
 
   chart.js@4.4.4:
@@ -6999,9 +7285,13 @@ snapshots:
 
   chokidar@4.0.1:
     dependencies:
-      readdirp: 4.0.1
+      readdirp: 4.0.2
     optional: true
 
+  class-variance-authority@0.7.0:
+    dependencies:
+      clsx: 2.0.0
+
   cli-boxes@3.0.0: {}
 
   cli-cursor@4.0.0:
@@ -7025,6 +7315,10 @@ snapshots:
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
 
+  clsx@2.0.0: {}
+
+  clsx@2.1.1: {}
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -7096,6 +7390,8 @@ snapshots:
 
   crypt@0.0.2: {}
 
+  crypto-js@4.2.0: {}
+
   css-blank-pseudo@5.0.2(postcss@8.4.47):
     dependencies:
       postcss: 8.4.47
@@ -7167,6 +7463,8 @@ snapshots:
 
   date-fns@2.29.3: {}
 
+  date-fns@3.6.0: {}
+
   date-format-parse@0.2.7: {}
 
   debug@2.6.9:
@@ -7751,11 +8049,11 @@ snapshots:
 
   flexsearch@0.7.21: {}
 
-  floating-vue@5.2.2(vue@3.5.8(typescript@5.6.2)):
+  floating-vue@5.2.2(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       '@floating-ui/dom': 1.1.1
-      vue: 3.5.8(typescript@5.6.2)
-      vue-resize: 2.0.0-alpha.1(vue@3.5.8(typescript@5.6.2))
+      vue: 3.5.12(typescript@5.6.2)
+      vue-resize: 2.0.0-alpha.1(vue@3.5.12(typescript@5.6.2))
 
   follow-redirects@1.15.6: {}
 
@@ -8475,6 +8773,12 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
+  lucide-vue-next@0.394.0(vue@3.5.12(typescript@5.6.2)):
+    dependencies:
+      vue: 3.5.12(typescript@5.6.2)
+
+  lz-string@1.5.0: {}
+
   m3u8-parser@4.7.0:
     dependencies:
       '@babel/runtime': 7.25.6
@@ -8485,6 +8789,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  magic-string@0.30.12:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   magicast@0.3.4:
     dependencies:
       '@babel/parser': 7.25.6
@@ -8636,6 +8944,8 @@ snapshots:
 
   nanoid@3.3.7: {}
 
+  nanoid@5.0.8: {}
+
   nanospinner@1.1.0:
     dependencies:
       picocolors: 1.0.1
@@ -8851,6 +9161,14 @@ snapshots:
 
   pify@2.3.0: {}
 
+  pinia@2.2.6(typescript@5.6.2)(vue@3.5.12(typescript@5.6.2)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.12(typescript@5.6.2)
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2))
+    optionalDependencies:
+      typescript: 5.6.2
+
   pirates@4.0.6: {}
 
   pkcs7@1.0.4:
@@ -9234,6 +9552,23 @@ snapshots:
 
   quick-lru@6.1.2: {}
 
+  radix-vue@1.9.9(vue@3.5.12(typescript@5.6.2)):
+    dependencies:
+      '@floating-ui/dom': 1.6.12
+      '@floating-ui/vue': 1.1.5(vue@3.5.12(typescript@5.6.2))
+      '@internationalized/date': 3.5.6
+      '@internationalized/number': 3.5.4
+      '@tanstack/vue-virtual': 3.10.9(vue@3.5.12(typescript@5.6.2))
+      '@vueuse/core': 10.11.1(vue@3.5.12(typescript@5.6.2))
+      '@vueuse/shared': 10.11.1(vue@3.5.12(typescript@5.6.2))
+      aria-hidden: 1.2.4
+      defu: 6.1.4
+      fast-deep-equal: 3.1.3
+      nanoid: 5.0.8
+      vue: 3.5.12(typescript@5.6.2)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   react-is@18.3.1: {}
 
   read-cache@1.0.0:
@@ -9244,7 +9579,7 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
-  readdirp@4.0.1:
+  readdirp@4.0.2:
     optional: true
 
   recordrtc@5.6.2: {}
@@ -9386,6 +9721,11 @@ snapshots:
       extend-shallow: 2.0.1
       kind-of: 6.0.3
 
+  secure-ls@2.0.0:
+    dependencies:
+      crypto-js: 4.2.0
+      lz-string: 1.5.0
+
   semver@6.3.1: {}
 
   semver@7.5.3:
@@ -9614,6 +9954,12 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
+  tailwind-merge@2.5.4: {}
+
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.13):
+    dependencies:
+      tailwindcss: 3.4.13
+
   tailwindcss@3.4.13:
     dependencies:
       '@alloc/quick-lru': 5.2.0
@@ -9649,7 +9995,7 @@ snapshots:
   terser@5.33.0:
     dependencies:
       '@jridgewell/source-map': 0.3.6
-      acorn: 8.12.1
+      acorn: 8.14.0
       commander: 2.20.3
       source-map-support: 0.5.21
     optional: true
@@ -9722,6 +10068,8 @@ snapshots:
 
   tslib@2.7.0: {}
 
+  tslib@2.8.1: {}
+
   turbolinks@5.2.0: {}
 
   type-check@0.4.0:
@@ -9964,30 +10312,30 @@ snapshots:
       - supports-color
       - terser
 
-  vue-chartjs@5.3.1(chart.js@4.4.4)(vue@3.5.8(typescript@5.6.2)):
+  vue-chartjs@5.3.1(chart.js@4.4.4)(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       chart.js: 4.4.4
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
   vue-component-type-helpers@2.1.2: {}
 
-  vue-datepicker-next@1.0.3(vue@3.5.8(typescript@5.6.2)):
+  vue-datepicker-next@1.0.3(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       date-format-parse: 0.2.7
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
-  vue-demi@0.13.11(vue@3.5.8(typescript@5.6.2)):
+  vue-demi@0.13.11(vue@3.5.12(typescript@5.6.2)):
     dependencies:
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
-  vue-demi@0.14.10(vue@3.5.8(typescript@5.6.2)):
+  vue-demi@0.14.10(vue@3.5.12(typescript@5.6.2)):
     dependencies:
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
-  vue-dompurify-html@5.1.0(vue@3.5.8(typescript@5.6.2)):
+  vue-dompurify-html@5.1.0(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       dompurify: 3.1.6
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
   vue-eslint-parser@9.4.3(eslint@8.57.0):
     dependencies:
@@ -10002,12 +10350,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-i18n@9.14.0(vue@3.5.8(typescript@5.6.2)):
+  vue-i18n@9.14.0(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       '@intlify/core-base': 9.14.0
       '@intlify/shared': 9.14.0
       '@vue/devtools-api': 6.6.3
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
   vue-letter@0.2.0:
     dependencies:
@@ -10015,54 +10363,56 @@ snapshots:
 
   vue-multiselect@3.1.0: {}
 
-  vue-observe-visibility@2.0.0-alpha.1(vue@3.5.8(typescript@5.6.2)):
+  vue-observe-visibility@2.0.0-alpha.1(vue@3.5.12(typescript@5.6.2)):
     dependencies:
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
-  vue-resize@2.0.0-alpha.1(vue@3.5.8(typescript@5.6.2)):
+  vue-resize@2.0.0-alpha.1(vue@3.5.12(typescript@5.6.2)):
     dependencies:
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
-  vue-router@4.4.5(vue@3.5.8(typescript@5.6.2)):
+  vue-router@4.4.5(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       '@vue/devtools-api': 6.6.4
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
+
+  vue-sonner@1.2.5: {}
 
   vue-upload-component@3.1.17: {}
 
-  vue-virtual-scroller@2.0.0-beta.8(vue@3.5.8(typescript@5.6.2)):
+  vue-virtual-scroller@2.0.0-beta.8(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       mitt: 2.1.0
-      vue: 3.5.8(typescript@5.6.2)
-      vue-observe-visibility: 2.0.0-alpha.1(vue@3.5.8(typescript@5.6.2))
-      vue-resize: 2.0.0-alpha.1(vue@3.5.8(typescript@5.6.2))
+      vue: 3.5.12(typescript@5.6.2)
+      vue-observe-visibility: 2.0.0-alpha.1(vue@3.5.12(typescript@5.6.2))
+      vue-resize: 2.0.0-alpha.1(vue@3.5.12(typescript@5.6.2))
 
   vue3-click-away@1.2.4: {}
 
-  vue@3.5.8(typescript@5.6.2):
+  vue@3.5.12(typescript@5.6.2):
     dependencies:
-      '@vue/compiler-dom': 3.5.8
-      '@vue/compiler-sfc': 3.5.8
-      '@vue/runtime-dom': 3.5.8
-      '@vue/server-renderer': 3.5.8(vue@3.5.8(typescript@5.6.2))
-      '@vue/shared': 3.5.8
+      '@vue/compiler-dom': 3.5.12
+      '@vue/compiler-sfc': 3.5.12
+      '@vue/runtime-dom': 3.5.12
+      '@vue/server-renderer': 3.5.12(vue@3.5.12(typescript@5.6.2))
+      '@vue/shared': 3.5.12
     optionalDependencies:
       typescript: 5.6.2
 
-  vuedraggable@4.1.0(vue@3.5.8(typescript@5.6.2)):
+  vuedraggable@4.1.0(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       sortablejs: 1.14.0
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
-  vuex-router-sync@6.0.0-rc.1(vue-router@4.4.5(vue@3.5.8(typescript@5.6.2)))(vuex@4.1.0(vue@3.5.8(typescript@5.6.2))):
+  vuex-router-sync@6.0.0-rc.1(vue-router@4.4.5(vue@3.5.12(typescript@5.6.2)))(vuex@4.1.0(vue@3.5.12(typescript@5.6.2))):
     dependencies:
-      vue-router: 4.4.5(vue@3.5.8(typescript@5.6.2))
-      vuex: 4.1.0(vue@3.5.8(typescript@5.6.2))
+      vue-router: 4.4.5(vue@3.5.12(typescript@5.6.2))
+      vuex: 4.1.0(vue@3.5.12(typescript@5.6.2))
 
-  vuex@4.1.0(vue@3.5.8(typescript@5.6.2)):
+  vuex@4.1.0(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       '@vue/devtools-api': 6.6.3
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
   w3c-keyname@2.2.4: {}
 
diff --git a/spec/controllers/api/v1/accounts/integrations/captain_controller_spec.rb b/spec/controllers/api/v1/accounts/integrations/captain_controller_spec.rb
index ce4976d96..3dfb49294 100644
--- a/spec/controllers/api/v1/accounts/integrations/captain_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/integrations/captain_controller_spec.rb
@@ -1,65 +1,79 @@
 require 'rails_helper'
 
 RSpec.describe 'Captain Integrations API', type: :request do
-  let(:account) { create(:account) }
-  let(:admin) { create(:user, account: account, role: :administrator) }
-  let(:agent) { create(:user, account: account, role: :agent) }
-  let(:inbox) { create(:inbox, account: account) }
+  let!(:account) { create(:account) }
+  let!(:agent) { create(:user, account: account, role: :agent) }
+  let!(:hook) do
+    create(:integrations_hook, account: account, app_id: 'captain', settings: {
+             access_token: SecureRandom.hex,
+             account_email: Faker::Internet.email,
+             assistant_id: '1',
+             account_id: '1'
+           })
+  end
+  let(:captain_api_url) { 'https://captain.example.com/' }
 
-  describe 'GET /api/v1/accounts/{account.id}/integrations/captain/sso_url' do
+  before do
+    InstallationConfig.where(name: 'CAPTAIN_API_URL').first_or_create(value: captain_api_url)
+  end
+
+  describe 'POST /api/v1/accounts/{account.id}/integrations/captain/proxy' do
     context 'when it is an unauthenticated user' do
       it 'returns unauthorized' do
-        get sso_url_api_v1_account_integrations_captain_url(account_id: account.id),
-            params: {},
-            as: :json
+        post proxy_api_v1_account_integrations_captain_url(account_id: account.id),
+             params: { method: 'get', route: 'some_route' },
+             as: :json
 
         expect(response).to have_http_status(:unauthorized)
       end
     end
 
     context 'when it is an authenticated user' do
-      it 'return unauthorized if agent' do
-        get sso_url_api_v1_account_integrations_captain_url(account_id: account.id),
-            params: {},
-            headers: agent.create_new_auth_token,
-            as: :json
+      context 'when valid request method and route' do
+        let(:route) { 'some_route' }
+        let(:method) { 'get' }
 
-        expect(response).to have_http_status(:unauthorized)
+        it 'proxies the request to Captain API' do
+          stub_request(:get, "#{captain_api_url}api/accounts/#{hook.settings['account_id']}/#{route}")
+            .with(headers: {
+                    'X-User-Email' => hook.settings['account_email'],
+                    'X-User-Token' => hook.settings['access_token'],
+                    'Content-Type' => 'application/json'
+                  })
+            .to_return(status: 200, body: 'Success', headers: {})
+
+          post proxy_api_v1_account_integrations_captain_url(account_id: account.id),
+               params: { method: method, route: route },
+               headers: agent.create_new_auth_token,
+               as: :json
+
+          expect(response).to have_http_status(:success)
+          expect(response.body).to eq('Success')
+        end
       end
 
-      it 'returns 404 if hook is not available' do
-        get sso_url_api_v1_account_integrations_captain_url(account_id: account.id),
-            params: {},
-            headers: admin.create_new_auth_token,
-            as: :json
+      context 'when HTTP method is invalid' do
+        it 'returns unprocessable entity' do
+          post proxy_api_v1_account_integrations_captain_url(account_id: account.id),
+               params: { method: 'invalid', route: 'some_route', body: { some: 'data' } },
+               headers: agent.create_new_auth_token,
+               as: :json
 
-        expect(response).to have_http_status(:not_found)
+          expect(response).to have_http_status(:internal_server_error)
+        end
       end
 
-      it 'returns sso url if hook is available' do
-        InstallationConfig.where(name: 'CAPTAIN_APP_URL').first_or_create(value: 'https://app.chatwoot.com')
+      context 'when the hook is not found' do
+        before { hook.destroy }
 
-        hook = create(:integrations_hook, account: account, app_id: 'captain', settings: {
-                        access_token: SecureRandom.hex,
-                        account_email: Faker::Internet.email,
-                        account_id: '1',
-                        assistant_id: '1',
-                        inbox_ids: '1'
-                      })
+        it 'returns not found' do
+          post proxy_api_v1_account_integrations_captain_url(account_id: account.id),
+               params: { method: 'get', route: 'some_route' },
+               headers: agent.create_new_auth_token,
+               as: :json
 
-        get sso_url_api_v1_account_integrations_captain_url(account_id: account.id),
-            params: {},
-            headers: admin.create_new_auth_token,
-            as: :json
-
-        expect(response).to have_http_status(:success)
-        data = response.parsed_body
-        params_string = "token=#{URI.encode_www_form_component(hook['settings']['access_token'])}" \
-                        "&email=#{URI.encode_www_form_component(hook['settings']['account_email'])}" \
-                        "&account_id=#{URI.encode_www_form_component(hook['settings']['account_id'])}"
-
-        sso_url = "https://app.chatwoot.com/sso?#{params_string}"
-        expect(data['sso_url']).to eq(sso_url)
+          expect(response).to have_http_status(:not_found)
+        end
       end
     end
   end
diff --git a/tailwind.config.js b/tailwind.config.js
index 7dff3bc4e..578b963d6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -117,6 +117,13 @@ const tailwindConfig = {
               width: 2,
               height: 12,
             },
+            captain: {
+              body: `<path d="M150.485 213.282C150.485 200.856 160.559 190.782 172.985 190.782C185.411 190.782 195.485 200.856 195.485 213.282V265.282C195.485 277.709 185.411 287.782 172.985 287.782C160.559 287.782 150.485 277.709 150.485 265.282V213.282Z" fill="currentColor"/>
+              <path d="M222.485 213.282C222.485 200.856 232.559 190.782 244.985 190.782C257.411 190.782 267.485 200.856 267.485 213.282V265.282C267.485 277.709 257.411 287.782 244.985 287.782C232.559 287.782 222.485 277.709 222.485 265.282V213.282Z" fill="currentColor"/>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M412.222 109.961C317.808 96.6217 240.845 96.0953 144.309 109.902C119.908 113.392 103.762 115.751 91.4521 119.354C80.0374 122.694 73.5457 126.678 68.1762 132.687C57.0576 145.13 55.592 159.204 54.0765 208.287C52.587 256.526 55.5372 299.759 61.1249 348.403C64.1025 374.324 66.1515 391.817 69.4229 405.117C72.526 417.732 76.2792 424.515 81.4954 429.708C86.7533 434.942 93.4917 438.633 105.859 441.629C118.94 444.797 136.104 446.713 161.613 449.5C244.114 458.514 305.869 458.469 388.677 449.548C414.495 446.767 431.939 444.849 445.216 441.702C457.83 438.712 464.612 435.047 469.797 429.962C474.873 424.985 478.752 418.118 482.116 404.874C485.626 391.056 488.014 372.772 491.47 345.913C497.636 297.99 502.076 255.903 502.248 209.798C502.433 160.503 501.426 146.477 490.181 133.468C484.75 127.185 478.148 123.053 466.473 119.612C453.865 115.897 437.283 113.502 412.222 109.961ZM138.414 68.5711C238.977 54.1882 319.888 54.7514 418.047 68.6199L419.483 68.8227C442.724 72.1054 462.359 74.8786 478.244 79.5601C495.387 84.6124 509.724 92.2821 521.706 106.145C544.308 132.295 544.161 163.321 543.965 204.542C543.956 206.327 543.948 208.131 543.941 209.954C543.758 258.703 539.048 302.844 532.821 351.247L532.656 352.528C529.407 377.787 526.729 398.602 522.522 415.166C518.098 432.584 511.485 447.517 498.968 459.792C486.56 471.959 471.897 478.282 454.819 482.33C438.691 486.153 418.624 488.314 394.436 490.919L393.136 491.059C307.385 500.297 242.618 500.349 157.091 491.004L155.772 490.86C131.921 488.255 112.062 486.086 96.056 482.209C79.0408 478.087 64.4759 471.637 52.1005 459.316C39.6835 446.955 33.1618 432.265 28.94 415.102C24.9582 398.915 22.6435 378.759 19.8561 354.488L19.7052 353.174C13.9746 303.287 10.8315 257.908 12.4035 206.997C12.4606 205.15 12.5151 203.323 12.5691 201.516C13.7911 160.603 14.7077 129.914 37.1055 104.847C48.989 91.5477 63.035 84.1731 79.7563 79.2794C95.2643 74.7408 114.386 72.0068 137.018 68.7707C137.482 68.7044 137.948 68.6379 138.414 68.5711Z" fill="currentColor"/>`,
+              width: 556,
+              height: 556,
+            },
           },
         },
         ...getIconCollections(['lucide', 'logos', 'ri']),

From 7dc0eba48af04c4f325bee7c1ce6df41d76d68b7 Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Tue, 12 Nov 2024 10:38:29 -0800
Subject: [PATCH 30/39] fix: Remove duplicate `/` character on the proxy route
 (#10404)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The proxy method adds an extra slash even if the route param has the
character. It’s challenging to check the expected format on each route.
The simplest solution is to check if the route param begins with a
slash, and if not, append one.

NB: The existing tests are sufficient to cover this case. There’s no
need for an additional test to specifically test this.
---
 .../accounts/integrations/captain_controller.rb  | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/app/controllers/api/v1/accounts/integrations/captain_controller.rb b/app/controllers/api/v1/accounts/integrations/captain_controller.rb
index 840fe5428..15e81b726 100644
--- a/app/controllers/api/v1/accounts/integrations/captain_controller.rb
+++ b/app/controllers/api/v1/accounts/integrations/captain_controller.rb
@@ -18,11 +18,11 @@ class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::Ba
   end
 
   def request_path
-    if params[:route] == '/sessions/profile'
-      'api/sessions/profile'
-    else
-      "api/accounts/#{hook.settings['account_id']}/#{params[:route]}"
-    end
+    request_route = with_leading_hash_on_route(params[:route])
+
+    return 'api/sessions/profile' if request_route == '/sessions/profile'
+
+    "api/accounts/#{hook.settings['account_id']}#{request_route}"
   end
 
   def request_url
@@ -41,6 +41,12 @@ class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::Ba
     method
   end
 
+  def with_leading_hash_on_route(request_route)
+    return '' if request_route.blank?
+
+    request_route.start_with?('/') ? request_route : "/#{request_route}"
+  end
+
   def permitted_params
     params.permit(:method, :route, body: {})
   end

From ac729cf0cf389781731204f4e43be8ddde102101 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 13 Nov 2024 12:29:50 +0530
Subject: [PATCH 31/39] feat: update debounce duration for article editor
 (#10410)

Quick fix for CW-3721 until we work on a better solution
---
 .../HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
index 8142db77b..f15135737 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
@@ -35,7 +35,7 @@ const emit = defineEmits([
 
 const { t } = useI18n();
 
-const saveArticle = debounce(value => emit('saveArticle', value), 400, false);
+const saveArticle = debounce(value => emit('saveArticle', value), 600, false);
 
 const articleTitle = computed({
   get: () => props.article.title,

From 4cfa7e4c97d0f23871fc6c1b8e42d34f374f7588 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 14 Nov 2024 17:55:24 +0530
Subject: [PATCH 32/39] feat: Remove incoming messages metrics from the agent
 reports (#10415)

---
 .../reports/components/WootReports.vue        | 44 ++++++++++---------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
index ff4fb0637..06b8c76ee 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
@@ -6,16 +6,6 @@ import { GROUP_BY_FILTER } from '../constants';
 import { generateFileName } from '../../../../../helper/downloadHelper';
 import { REPORTS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
 
-const REPORTS_KEYS = {
-  CONVERSATIONS: 'conversations_count',
-  INCOMING_MESSAGES: 'incoming_messages_count',
-  OUTGOING_MESSAGES: 'outgoing_messages_count',
-  FIRST_RESPONSE_TIME: 'avg_first_response_time',
-  RESOLUTION_TIME: 'avg_resolution_time',
-  RESOLUTION_COUNT: 'resolutions_count',
-  REPLY_TIME: 'reply_time',
-};
-
 const GROUP_BY_OPTIONS = {
   DAY: [{ id: 1, groupByKey: 'REPORT.GROUPING_OPTIONS.DAY' }],
   WEEK: [
@@ -72,6 +62,22 @@ export default {
     filterItemsList() {
       return this.$store.getters[this.getterKey] || [];
     },
+    isAgentType() {
+      return this.type === 'agent';
+    },
+    reportKeys() {
+      return {
+        CONVERSATIONS: 'conversations_count',
+        ...(!this.isAgentType && {
+          INCOMING_MESSAGES: 'incoming_messages_count',
+        }),
+        OUTGOING_MESSAGES: 'outgoing_messages_count',
+        FIRST_RESPONSE_TIME: 'avg_first_response_time',
+        RESOLUTION_TIME: 'avg_resolution_time',
+        RESOLUTION_COUNT: 'resolutions_count',
+        REPLY_TIME: 'reply_time',
+      };
+    },
   },
   mounted() {
     this.$store.dispatch(this.actionKey);
@@ -92,19 +98,11 @@ export default {
       }
     },
     fetchChartData() {
-      [
-        'CONVERSATIONS',
-        'INCOMING_MESSAGES',
-        'OUTGOING_MESSAGES',
-        'FIRST_RESPONSE_TIME',
-        'RESOLUTION_TIME',
-        'RESOLUTION_COUNT',
-        'REPLY_TIME',
-      ].forEach(async key => {
+      Object.keys(this.reportKeys).forEach(async key => {
         try {
           const { from, to, groupBy, businessHours } = this;
           this.$store.dispatch('fetchAccountReport', {
-            metric: REPORTS_KEYS[key],
+            metric: this.reportKeys[key],
             from,
             to,
             type: this.type,
@@ -220,6 +218,10 @@ export default {
       @group-by-filter-change="onGroupByFilterChange"
       @business-hours-toggle="onBusinessHoursToggle"
     />
-    <ReportContainer v-if="filterItemsList.length" :group-by="groupBy" />
+    <ReportContainer
+      v-if="filterItemsList.length"
+      :group-by="groupBy"
+      :report-keys="reportKeys"
+    />
   </div>
 </template>

From 933ae8aa497cdb80538a69dad9c6d389e1997c90 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Fri, 15 Nov 2024 09:07:24 +0400
Subject: [PATCH 33/39] fix: Email attachments created with empty filename
 (#10420)

- We observed in prod for certain emails active storage blob objects
were getting created with empty file name. The conversations further
causes conversation and filter pages to break. This change will fix the
mentioned issue.

fixes:
https://linear.app/chatwoot/issue/CW-3331/missing-file-name-for-some-of-the-uploads-for-emails

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 app/presenters/mail_presenter.rb              |  2 +-
 .../files/attachments_without_filename.eml    | 43 +++++++++++++++++++
 spec/mailboxes/imap/imap_mailbox_spec.rb      | 16 +++++++
 3 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 spec/fixtures/files/attachments_without_filename.eml

diff --git a/app/presenters/mail_presenter.rb b/app/presenters/mail_presenter.rb
index 7cff55f6c..1c951cbe3 100644
--- a/app/presenters/mail_presenter.rb
+++ b/app/presenters/mail_presenter.rb
@@ -77,7 +77,7 @@ class MailPresenter < SimpleDelegator
     mail.attachments.map do |attachment|
       blob = ActiveStorage::Blob.create_and_upload!(
         io: StringIO.new(attachment.body.to_s),
-        filename: attachment.filename,
+        filename: attachment.filename.presence || "attachment_#{SecureRandom.hex(4)}",
         content_type: attachment.content_type
       )
       { original: attachment, blob: blob }
diff --git a/spec/fixtures/files/attachments_without_filename.eml b/spec/fixtures/files/attachments_without_filename.eml
new file mode 100644
index 000000000..58b1e722a
--- /dev/null
+++ b/spec/fixtures/files/attachments_without_filename.eml
@@ -0,0 +1,43 @@
+From: test@gmail.com
+Date: Thu, 4 May 2023 10:35:52 +0530
+Message-ID: <6215d536e0484_10bc6191402183@tejaswinis-MacBook-Pro.local.mail>
+Subject: multiple attachments
+To: test@outlook.com
+Content-Type: multipart/mixed; boundary="0000000000002488f405fad721cc"
+
+--0000000000002488f405fad721cc
+Content-Type: multipart/alternative; boundary="0000000000002488f205fad721ca"
+
+--0000000000002488f205fad721ca
+Content-Type: text/plain; charset="UTF-8"
+Content-Transfer-Encoding: quoted-printable
+Hi people!
+
+We are excited to inform you that we have recently released some new
+features and several updates to our platform. These features and updates
+are designed to enhance your experience and make your trading journey
+seamless and efficient.
+
+
+
+> Okay noted
+
+
+--0000000000002488f205fad721ca--
+--0000000000002488f405fad721cc
+Content-Type: image/png; name=""
+Content-Disposition: attachment; filename=""
+Content-Transfer-Encoding: base64
+Content-ID: <f_lh8nwk8l3>
+X-Attachment-Id: f_lh8nwk8l3
+
+
+--0000000000002488f405fad721cc
+Content-Type: image/png; name=""
+Content-Disposition: attachment; filename=""
+Content-Transfer-Encoding: base64
+Content-ID: <f_lh8nwk8l2>
+X-Attachment-Id: f_lh8nwk8l2
+
+
+--0000000000002488f405fad721cc--
diff --git a/spec/mailboxes/imap/imap_mailbox_spec.rb b/spec/mailboxes/imap/imap_mailbox_spec.rb
index bbf3629e8..fdea5b9d4 100644
--- a/spec/mailboxes/imap/imap_mailbox_spec.rb
+++ b/spec/mailboxes/imap/imap_mailbox_spec.rb
@@ -43,6 +43,22 @@ RSpec.describe Imap::ImapMailbox do
       end
     end
 
+    context 'when the email has attachments with no filename' do
+      let(:inbound_mail) { create_inbound_email_from_fixture('attachments_without_filename.eml') }
+
+      it 'creates a conversation and a message with properly named attachments' do
+        expect do
+          class_instance.process(inbound_mail.mail, channel)
+        end.to change(Conversation, :count).by(1)
+
+        last_message = conversation.messages.last
+        expect(last_message.attachments.count).to be 2
+
+        filenames = last_message.attachments.map(&:file).map { |file| file.blob.filename.to_s }
+        expect(filenames.all? { |filename| filename.present? && filename.start_with?('attachment_') }).to be true
+      end
+    end
+
     context 'when the email has 15 or more attachments' do
       let(:inbound_mail) { create_inbound_email_from_fixture('multiple_attachments.eml') }
 

From 8773929c0e6fc2cd9a2342ffe180a7033f1fecc4 Mon Sep 17 00:00:00 2001
From: caspar <a0956050976@gmail.com>
Date: Fri, 15 Nov 2024 21:27:58 +0800
Subject: [PATCH 34/39] =?UTF-8?q?fix:=20Fix=20line=20sticker=20URL=20to=20?=
 =?UTF-8?q?prevent=20certain=20images=20from=20failing=20to=20d=E2=80=A6?=
 =?UTF-8?q?=20(#10416)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit fixes the issue with Line stickers URLs to prevent certain
images from failing to display. The problem was due to the use of
incorrect URLs. The original URLs pointed to the `iphone` variant, which
failed to load properly in some cases. The fix updates the URLs to use
the `android` variant, ensuring all images are displayed correctly.

### Example:
- Original (failing URL):

`https://stickershop.line-scdn.net/stickershop/v1/sticker/17/iphone/sticker.png`
- Fixed (working URL):

`https://stickershop.line-scdn.net/stickershop/v1/sticker/17/android/sticker.png`


## How Has This Been Tested?

1. Verified the updated URLs by loading multiple Line sticker images to
ensure they display correctly.
2. Tested in both local and production-like environments to confirm the
fix resolves the issue.
3. Reviewed logs to ensure no additional errors are generated related to
Line sticker URLs.
---
 app/services/line/incoming_message_service.rb       | 2 +-
 spec/services/line/incoming_message_service_spec.rb | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/services/line/incoming_message_service.rb b/app/services/line/incoming_message_service.rb
index f36bce0f0..4761292d0 100644
--- a/app/services/line/incoming_message_service.rb
+++ b/app/services/line/incoming_message_service.rb
@@ -4,7 +4,7 @@
 class Line::IncomingMessageService
   include ::FileTypeHelper
   pattr_initialize [:inbox!, :params!]
-  LINE_STICKER_IMAGE_URL = 'https://stickershop.line-scdn.net/stickershop/v1/sticker/%s/iphone/sticker.png'.freeze
+  LINE_STICKER_IMAGE_URL = 'https://stickershop.line-scdn.net/stickershop/v1/sticker/%s/android/sticker.png'.freeze
 
   def perform
     # probably test events
diff --git a/spec/services/line/incoming_message_service_spec.rb b/spec/services/line/incoming_message_service_spec.rb
index 037aa18fa..3bcdf8b04 100644
--- a/spec/services/line/incoming_message_service_spec.rb
+++ b/spec/services/line/incoming_message_service_spec.rb
@@ -178,7 +178,7 @@ describe Line::IncomingMessageService do
         described_class.new(inbox: line_channel.inbox, params: sticker_params).perform
         expect(line_channel.inbox.conversations).not_to eq(0)
         expect(Contact.all.first.name).to eq('LINE Test')
-        expect(line_channel.inbox.messages.first.content).to eq('![sticker-52002738](https://stickershop.line-scdn.net/stickershop/v1/sticker/52002738/iphone/sticker.png)')
+        expect(line_channel.inbox.messages.first.content).to eq('![sticker-52002738](https://stickershop.line-scdn.net/stickershop/v1/sticker/52002738/android/sticker.png)')
       end
     end
 

From 54afed9fb46fcc5b7de47dc107280359a672da77 Mon Sep 17 00:00:00 2001
From: Vishnu Narayanan <iamwishnu@gmail.com>
Date: Mon, 18 Nov 2024 12:36:27 +0530
Subject: [PATCH 35/39] feat: add judoscaler gem for heroku autoscaling
 (#10419)

- add judoscaler gem to allow judoscale use in heroku environments
- This will allow auto scaling for both web and worker dynos across both
standard-1x/2x and performance dynos
- This will scaling in response to queue time rather than response
time(heroku default)
- This also allows you to scale multiple dynos in and out at once,
rather than scaling them one at a time, as is the default.

Ref
----
1. https://judoscale.com/
2. https://devcenter.heroku.com/articles/judoscale
---
 Gemfile               | 3 +++
 Gemfile.lock          | 9 +++++++++
 config/application.rb | 6 ++++++
 3 files changed, 18 insertions(+)

diff --git a/Gemfile b/Gemfile
index 2e1e3ec14..f18305970 100644
--- a/Gemfile
+++ b/Gemfile
@@ -181,6 +181,9 @@ gem 'reverse_markdown'
 group :production do
   # we dont want request timing out in development while using byebug
   gem 'rack-timeout'
+  # for heroku autoscaling
+  gem 'judoscale-rails', require: false
+  gem 'judoscale-sidekiq', require: false
 end
 
 group :development do
diff --git a/Gemfile.lock b/Gemfile.lock
index 41140bdda..e2f5c91be 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -397,6 +397,13 @@ GEM
       hana (~> 1.3)
       regexp_parser (~> 2.0)
       uri_template (~> 0.7)
+    judoscale-rails (1.8.2)
+      judoscale-ruby (= 1.8.2)
+      railties
+    judoscale-ruby (1.8.2)
+    judoscale-sidekiq (1.8.2)
+      judoscale-ruby (= 1.8.2)
+      sidekiq (>= 5.0)
     jwt (2.8.1)
       base64
     kaminari (1.2.2)
@@ -891,6 +898,8 @@ DEPENDENCIES
   jbuilder
   json_refs
   json_schemer
+  judoscale-rails
+  judoscale-sidekiq
   jwt
   kaminari
   koala
diff --git a/config/application.rb b/config/application.rb
index 1aedfc860..f3443ddb3 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -27,6 +27,12 @@ if ENV.fetch('SENTRY_DSN', false).present?
   require 'sentry-sidekiq'
 end
 
+# heroku autoscaling
+if ENV.fetch('JUDOSCALE_URL', false).present?
+  require 'judoscale-rails'
+  require 'judoscale-sidekiq'
+end
+
 module Chatwoot
   class Application < Rails::Application
     # Initialize configuration defaults for originally generated Rails version.

From aaa328be87e07c2405b33be0f16ecc49cd5d70b2 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 19 Nov 2024 06:59:27 +0530
Subject: [PATCH 36/39] feat: Add dropdown component  (#10358)

This PR adds dropdown primitives to help compose custom dropdowns across the app. The following the sample usage

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
---
 .../dashboard/assets/scss/widgets/_base.scss  |   8 +-
 .../assets/scss/widgets/_buttons.scss         |   2 +-
 .../DropdownPrimitives.story.vue              |  79 +++++++++++
 .../dropdown-menu/base/DropdownBody.vue       |   9 ++
 .../dropdown-menu/base/DropdownContainer.vue  |  29 ++++
 .../dropdown-menu/base/DropdownItem.vue       |  55 ++++++++
 .../dropdown-menu/base/DropdownSection.vue    |  22 +++
 .../dropdown-menu/base/DropdownSeparator.vue  |   3 +
 .../dropdown-menu/base/index.js               |  13 ++
 .../dropdown-menu/base/provider.js            |  19 +++
 .../sidebar/SidebarAccountSwitcher.vue        | 116 ++++++++-------
 .../components-next/sidebar/SidebarGroup.vue  |   4 +-
 .../sidebar/SidebarProfileMenu.vue            | 119 +++++++---------
 .../sidebar/SidebarProfileMenuStatus.vue      | 133 +++++++++---------
 .../sidebar/SidebarSubGroup.vue               |   2 +-
 .../layout/sidebarComponents/Secondary.vue    |   2 +-
 .../sidebarComponents/SecondaryNavItem.vue    |   2 +-
 .../specs/AccountSelector.spec.js             |   2 +-
 .../dashboard/i18n/locale/en/settings.json    |  17 ++-
 .../dashboard/store/modules/auth.js           |  35 ++++-
 .../store/modules/specs/auth/actions.spec.js  |  49 +++++--
 .../dashboard/store/mutation-types.js         |   1 +
 22 files changed, 497 insertions(+), 224 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue
 create mode 100644 app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue
 create mode 100644 app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue
 create mode 100644 app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue
 create mode 100644 app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSection.vue
 create mode 100644 app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSeparator.vue
 create mode 100644 app/javascript/dashboard/components-next/dropdown-menu/base/index.js
 create mode 100644 app/javascript/dashboard/components-next/dropdown-menu/base/provider.js

diff --git a/app/javascript/dashboard/assets/scss/widgets/_base.scss b/app/javascript/dashboard/assets/scss/widgets/_base.scss
index d5d2e227f..d35c1cfc9 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_base.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_base.scss
@@ -31,7 +31,13 @@ hr {
 ul,
 ol,
 dl {
-  @apply mb-2 list-disc list-outside leading-[1.65];
+  @apply list-disc list-outside leading-[1.65];
+}
+
+ul:not(.reset-base),
+ol:not(.reset-base),
+dl:not(.reset-base) {
+  @apply mb-0;
 }
 
 // Form elements
diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index 587b810ca..640e1395f 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -96,7 +96,7 @@ button {
   }
 
   // @TODDO - Remove after moving all buttons to woot-button
-  .icon+.button__content {
+  .icon + .button__content {
     @apply w-auto;
   }
 
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue
new file mode 100644
index 000000000..c0818283e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue
@@ -0,0 +1,79 @@
+<script setup>
+import { ref } from 'vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownContainer from './base/DropdownContainer.vue';
+import DropdownBody from './base/DropdownBody.vue';
+import DropdownSection from './base/DropdownSection.vue';
+import DropdownItem from './base/DropdownItem.vue';
+import DropdownSeparator from './base/DropdownSeparator.vue';
+import WootSwitch from 'components/ui/Switch.vue';
+
+const currentUserAutoOffline = ref(false);
+
+const menuItems = ref([
+  {
+    label: 'Contact Support',
+    icon: 'i-lucide-life-buoy',
+    click: () => window.alert('Contact Support'),
+  },
+  {
+    label: 'Keyboard Shortcuts',
+    icon: 'i-lucide-keyboard',
+    click: () => window.alert('Keyboard Shortcuts'),
+  },
+  {
+    label: 'Profile Settings',
+    icon: 'i-lucide-user-pen',
+    click: () => window.alert('Profile Settings'),
+  },
+  {
+    label: 'Change Appearance',
+    icon: 'i-lucide-swatch-book',
+    click: () => window.alert('Change Appearance'),
+  },
+  {
+    label: 'Open SuperAdmin',
+    icon: 'i-lucide-castle',
+    link: '/super_admin',
+    target: '_blank',
+  },
+  {
+    label: 'Log Out',
+    icon: 'i-lucide-log-out',
+    click: () => window.alert('Log Out'),
+  },
+]);
+</script>
+
+<template>
+  <Story
+    title="Components/DropdownPrimitives"
+    :layout="{ type: 'grid', width: 400, height: 800 }"
+  >
+    <Variant title="Profile Menu">
+      <div class="p-4 bg-white h-[500px] dark:bg-slate-900">
+        <DropdownContainer>
+          <template #trigger="{ toggle }">
+            <Button label="Open Menu" size="sm" @click="toggle" />
+          </template>
+          <DropdownBody class="w-80">
+            <DropdownSection title="Profile Options">
+              <DropdownItem label="Contact Support" class="justify-between">
+                <span>{{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}</span>
+                <div class="flex-shrink-0">
+                  <WootSwitch v-model="currentUserAutoOffline" />
+                </div>
+              </DropdownItem>
+            </DropdownSection>
+            <DropdownSeparator />
+            <DropdownItem
+              v-for="item in menuItems"
+              :key="item.label"
+              v-bind="item"
+            />
+          </DropdownBody>
+        </DropdownContainer>
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue
new file mode 100644
index 000000000..4fde89306
--- /dev/null
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="absolute">
+    <ul
+      class="text-sm bg-n-solid-1 border border-n-weak rounded-xl shadow-sm py-2 n-dropdown-body gap-2 grid list-none px-2 reset-base"
+    >
+      <slot />
+    </ul>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue
new file mode 100644
index 000000000..ee81e4b98
--- /dev/null
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue
@@ -0,0 +1,29 @@
+<script setup>
+import { useToggle } from '@vueuse/core';
+import { provideDropdownContext } from './provider.js';
+
+const emit = defineEmits(['close']);
+const [isOpen, toggle] = useToggle(false);
+
+const closeMenu = () => {
+  if (isOpen.value) {
+    emit('close');
+    toggle(false);
+  }
+};
+
+provideDropdownContext({
+  isOpen,
+  toggle,
+  closeMenu,
+});
+</script>
+
+<template>
+  <div class="relative z-20 space-y-2">
+    <slot name="trigger" :is-open :toggle="() => toggle()" />
+    <div v-if="isOpen" v-on-clickaway="closeMenu" class="absolute">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue
new file mode 100644
index 000000000..92be04fda
--- /dev/null
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue
@@ -0,0 +1,55 @@
+<script setup>
+import { computed } from 'vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import { useDropdownContext } from './provider.js';
+
+const props = defineProps({
+  label: { type: String, default: '' },
+  icon: { type: [String, Object, Function], default: '' },
+  link: { type: String, default: '' },
+  click: { type: Function, default: null },
+  preserveOpen: { type: Boolean, default: false },
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const { closeMenu } = useDropdownContext();
+
+const componentIs = computed(() => {
+  if (props.link) return 'router-link';
+  if (props.click) return 'button';
+
+  return 'div';
+});
+
+const triggerClick = () => {
+  if (props.click) {
+    props.click();
+    if (!props.preserveOpen) closeMenu();
+  }
+};
+</script>
+
+<template>
+  <li class="n-dropdown-item">
+    <component
+      :is="componentIs"
+      v-bind="$attrs"
+      class="flex text-left rtl:text-right items-center p-2 reset-base text-sm text-n-slate-12 w-full border-0"
+      :class="{
+        'hover:bg-n-alpha-1 rounded-lg w-full gap-3': !$slots.default,
+      }"
+      :href="props.link || null"
+      @click="triggerClick"
+    >
+      <slot>
+        <slot name="icon">
+          <Icon v-if="icon" class="size-4 text-n-slate-11" :icon="icon" />
+        </slot>
+        <slot name="label">{{ label }}</slot>
+      </slot>
+    </component>
+  </li>
+</template>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSection.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSection.vue
new file mode 100644
index 000000000..3879af0a7
--- /dev/null
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSection.vue
@@ -0,0 +1,22 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <div class="-mx-2 n-dropdown-section">
+    <div
+      v-if="title"
+      class="px-4 mb-3 mt-1 leading-4 font-medium tracking-[0.2px] text-n-slate-10 text-xs"
+    >
+      {{ title }}
+    </div>
+    <ul class="gap-2 grid reset-base list-none px-2">
+      <slot />
+    </ul>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSeparator.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSeparator.vue
new file mode 100644
index 000000000..373aa4479
--- /dev/null
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSeparator.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="h-0 border-b border-n-strong -mx-2" />
+</template>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/index.js b/app/javascript/dashboard/components-next/dropdown-menu/base/index.js
new file mode 100644
index 000000000..69a15a850
--- /dev/null
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/index.js
@@ -0,0 +1,13 @@
+import DropdownBody from './DropdownBody.vue';
+import DropdownContainer from './DropdownContainer.vue';
+import DropdownItem from './DropdownItem.vue';
+import DropdownSection from './DropdownSection.vue';
+import DropdownSeparator from './DropdownSeparator.vue';
+
+export {
+  DropdownBody,
+  DropdownContainer,
+  DropdownItem,
+  DropdownSection,
+  DropdownSeparator,
+};
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/provider.js b/app/javascript/dashboard/components-next/dropdown-menu/base/provider.js
new file mode 100644
index 000000000..67f2cbd0a
--- /dev/null
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/provider.js
@@ -0,0 +1,19 @@
+import { inject, provide } from 'vue';
+
+const DropdownControl = Symbol('DropdownControl');
+
+export function useDropdownContext() {
+  const context = inject(DropdownControl, null);
+
+  if (context === null) {
+    throw new Error(
+      `Component is missing a parent <DropdownContainer /> component.`
+    );
+  }
+
+  return context;
+}
+
+export function provideDropdownContext(context) {
+  provide(DropdownControl, context);
+}
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue b/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
index 8e99977dd..03e7a5e53 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
@@ -1,24 +1,23 @@
 <script setup>
 import { useAccount } from 'dashboard/composables/useAccount';
 import { useMapGetter } from 'dashboard/composables/store';
-import { useToggle } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import ButtonNext from 'next/button/Button.vue';
 import Icon from 'next/icon/Icon.vue';
 
+import {
+  DropdownContainer,
+  DropdownBody,
+  DropdownSection,
+  DropdownItem,
+} from 'next/dropdown-menu/base';
+
 const emit = defineEmits(['showCreateAccountModal']);
 
 const { t } = useI18n();
 const { accountId, currentAccount } = useAccount();
 const currentUser = useMapGetter('getCurrentUser');
 const globalConfig = useMapGetter('globalConfig/get');
-const [showDropdown, toggleDropdown] = useToggle(false);
-
-const close = () => {
-  if (showDropdown.value) {
-    toggleDropdown(false);
-  }
-};
 
 const onChangeAccount = newId => {
   const accountUrl = `/app/accounts/${newId}/dashboard`;
@@ -26,51 +25,45 @@ const onChangeAccount = newId => {
 };
 
 const emitNewAccount = () => {
-  close();
   emit('showCreateAccountModal');
 };
 </script>
 
 <template>
-  <div class="relative z-20">
-    <button
-      id="sidebar-account-switcher"
-      :data-account-id="accountId"
-      aria-haspopup="listbox"
-      aria-controls="account-options"
-      class="flex items-center gap-2 justify-between w-full rounded-lg hover:bg-n-alpha-1 px-2"
-      :class="{ 'bg-n-alpha-1': showDropdown }"
-      @click="toggleDropdown()"
-    >
-      <span
-        class="text-sm font-medium leading-5 text-n-slate-12 truncate"
-        aria-live="polite"
+  <DropdownContainer>
+    <template #trigger="{ toggle, isOpen }">
+      <button
+        id="sidebar-account-switcher"
+        :data-account-id="accountId"
+        aria-haspopup="listbox"
+        aria-controls="account-options"
+        class="flex items-center gap-2 justify-between w-full rounded-lg hover:bg-n-alpha-1 px-2"
+        :class="{ 'bg-n-alpha-1': isOpen }"
+        @click="toggle"
       >
-        {{ currentAccount.name }}
-      </span>
-
-      <span
-        aria-hidden="true"
-        class="i-lucide-chevron-down size-4 text-n-slate-10 flex-shrink-0"
-      />
-    </button>
-    <div v-if="showDropdown" v-on-clickaway="close" class="absolute top-8 z-50">
-      <div
-        class="min-w-72 max-w-96 text-sm bg-n-solid-1 border border-n-weak rounded-xl shadow-sm py-4 px-2 flex flex-col gap-2"
-      >
-        <div
-          class="px-4 leading-4 font-medium tracking-[0.2px] text-n-slate-10 text-xs"
+        <span
+          class="text-sm font-medium leading-5 text-n-slate-12 truncate"
+          aria-live="polite"
         >
-          {{ t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
-        </div>
-        <div class="px-1 gap-1 grid">
-          <button
-            v-for="account in currentUser.accounts"
-            :id="`account-${account.id}`"
-            :key="account.id"
-            class="flex w-full hover:bg-n-alpha-1 space-x-4"
-            @click="onChangeAccount(account.id)"
-          >
+          {{ currentAccount.name }}
+        </span>
+
+        <span
+          aria-hidden="true"
+          class="i-lucide-chevron-down size-4 text-n-slate-10 flex-shrink-0"
+        />
+      </button>
+    </template>
+    <DropdownBody class="min-w-80">
+      <DropdownSection :title="t('SIDEBAR_ITEMS.SWITCH_WORKSPACE')">
+        <DropdownItem
+          v-for="account in currentUser.accounts"
+          :id="`account-${account.id}`"
+          :key="account.id"
+          class="cursor-pointer"
+          @click="onChangeAccount(account.id)"
+        >
+          <template #label>
             <div
               :for="account.name"
               class="text-left rtl:text-right flex gap-2 items-center"
@@ -98,19 +91,20 @@ const emitNewAccount = () => {
               icon="i-lucide-check"
               class="text-n-teal-11 size-5"
             />
-          </button>
-        </div>
-        <div v-if="globalConfig.createNewAccountFromDashboard" class="px-2">
-          <ButtonNext
-            variant="secondary"
-            class="w-full"
-            size="sm"
-            @click="emitNewAccount"
-          >
-            {{ t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
-          </ButtonNext>
-        </div>
-      </div>
-    </div>
-  </div>
+          </template>
+        </DropdownItem>
+      </DropdownSection>
+      <DropdownItem v-if="globalConfig.createNewAccountFromDashboard">
+        <ButtonNext
+          color="slate"
+          variant="faded"
+          class="w-full"
+          size="sm"
+          @click="emitNewAccount"
+        >
+          {{ t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
+        </ButtonNext>
+      </DropdownItem>
+    </DropdownBody>
+  </DropdownContainer>
 </template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
index f7bc2362d..43856e574 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
@@ -101,7 +101,7 @@ const toggleTrigger = () => {
     :permissions="resolvePermissions(to)"
     :feature-flag="resolveFeatureFlag(to)"
     as="li"
-    class="text-sm cursor-pointer select-none gap-1 grid"
+    class="grid gap-1 text-sm cursor-pointer select-none"
   >
     <SidebarGroupHeader
       :icon
@@ -117,7 +117,7 @@ const toggleTrigger = () => {
     <ul
       v-if="hasChildren"
       v-show="isExpanded || hasActiveChild"
-      class="list-none m-0 grid sidebar-group-children"
+      class="grid m-0 list-none sidebar-group-children"
     >
       <template v-for="child in children" :key="child.name">
         <SidebarSubGroup
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
index ae88ebe69..347e2e25d 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
@@ -4,11 +4,16 @@ import Auth from 'dashboard/api/auth';
 import { useRouter } from 'vue-router';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
-import { useToggle } from '@vueuse/core';
 import Avatar from 'next/avatar/Avatar.vue';
-import Icon from 'next/icon/Icon.vue';
 import SidebarProfileMenuStatus from './SidebarProfileMenuStatus.vue';
 
+import {
+  DropdownContainer,
+  DropdownBody,
+  DropdownSeparator,
+  DropdownItem,
+} from 'next/dropdown-menu/base';
+
 const emit = defineEmits(['close', 'openKeyShortcutModal']);
 
 defineOptions({
@@ -21,14 +26,6 @@ const router = useRouter();
 const globalConfig = useMapGetter('globalConfig/get');
 const currentUser = useMapGetter('getCurrentUser');
 const currentUserAvailability = useMapGetter('getCurrentUserAvailability');
-const [showProfileMenu, toggleProfileMenu] = useToggle(false);
-
-const closeMenu = () => {
-  if (showProfileMenu.value) {
-    emit('close');
-    toggleProfileMenu(false);
-  }
-};
 
 const menuItems = computed(() => {
   return [
@@ -37,7 +34,6 @@ const menuItems = computed(() => {
       label: t('SIDEBAR_ITEMS.CONTACT_SUPPORT'),
       icon: 'i-lucide-life-buoy',
       click: () => {
-        closeMenu();
         window.$chatwoot.toggle();
       },
     },
@@ -46,7 +42,6 @@ const menuItems = computed(() => {
       label: t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS'),
       icon: 'i-lucide-keyboard',
       click: () => {
-        closeMenu();
         emit('openKeyShortcutModal');
       },
     },
@@ -55,20 +50,26 @@ const menuItems = computed(() => {
       label: t('SIDEBAR_ITEMS.PROFILE_SETTINGS'),
       icon: 'i-lucide-user-pen',
       click: () => {
-        closeMenu();
         router.push({ name: 'profile_settings_index' });
       },
     },
     {
       show: true,
       label: t('SIDEBAR_ITEMS.APPEARANCE'),
-      icon: 'i-lucide-swatch-book',
+      icon: 'i-lucide-palette',
       click: () => {
-        closeMenu();
         const ninja = document.querySelector('ninja-keys');
         ninja.open({ parent: 'appearance_settings' });
       },
     },
+    {
+      show: true,
+      label: t('SIDEBAR_ITEMS.DOCS'),
+      icon: 'i-lucide-book',
+      click: () => {
+        window.open('https://www.chatwoot.com/hc/user-guide/en', '_blank');
+      },
+    },
     {
       show: currentUser.value.type === 'SuperAdmin',
       label: t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE'),
@@ -79,7 +80,7 @@ const menuItems = computed(() => {
     {
       show: true,
       label: t('SIDEBAR_ITEMS.LOGOUT'),
-      icon: 'i-lucide-log-out',
+      icon: 'i-lucide-power',
       click: Auth.logout,
     },
   ];
@@ -91,56 +92,40 @@ const allowedMenuItems = computed(() => {
 </script>
 
 <template>
-  <div class="relative z-20 w-full min-w-0">
-    <button
-      class="flex gap-2 items-center rounded-lg cursor-pointer text-left w-full hover:bg-n-alpha-1 p-1"
-      v-bind="$attrs"
-      :class="{
-        'bg-n-alpha-1': showProfileMenu,
-      }"
-      @click="toggleProfileMenu"
-    >
-      <Avatar
-        :size="32"
-        :name="currentUser.available_name"
-        :src="currentUser.avatar_url"
-        :status="currentUserAvailability"
-        class="flex-shrink-0"
-        rounded-full
-      />
-      <div class="min-w-0">
-        <div class="text-n-slate-12 text-sm leading-4 font-medium truncate">
-          {{ currentUser.available_name }}
-        </div>
-        <div class="text-n-slate-11 text-xs truncate">
-          {{ currentUser.email }}
-        </div>
-      </div>
-    </button>
-    <div
-      v-if="showProfileMenu"
-      v-on-clickaway="closeMenu"
-      class="absolute left-0 bottom-12 z-50"
-    >
-      <div
-        class="w-72 min-h-32 bg-n-solid-1 border border-n-weak rounded-xl shadow-sm"
+  <DropdownContainer
+    class="relative z-20 w-full min-w-0"
+    @close="emit('close')"
+  >
+    <template #trigger="{ toggle, isOpen }">
+      <button
+        class="flex gap-2 items-center rounded-lg cursor-pointer text-left w-full hover:bg-n-alpha-1 p-1"
+        :class="{ 'bg-n-alpha-1': isOpen }"
+        @click="toggle"
       >
-        <SidebarProfileMenuStatus />
-        <div class="border-t border-n-strong mx-2 my-0" />
-        <ul class="list-none m-0 grid gap-1 p-1 text-n-slate-12">
-          <li v-for="item in allowedMenuItems" :key="item.label" class="m-0">
-            <component
-              :is="item.link ? 'a' : 'button'"
-              v-bind="item.link ? { target: item.target, href: item.link } : {}"
-              class="text-left hover:bg-n-alpha-1 px-2 py-1.5 w-full flex items-center gap-2"
-              @click="item.click"
-            >
-              <Icon :icon="item.icon" class="size-4" />
-              {{ item.label }}
-            </component>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
+        <Avatar
+          :size="32"
+          :name="currentUser.available_name"
+          :src="currentUser.avatar_url"
+          :status="currentUserAvailability"
+          class="flex-shrink-0"
+          rounded-full
+        />
+        <div class="min-w-0">
+          <div class="text-n-slate-12 text-sm leading-4 font-medium truncate">
+            {{ currentUser.available_name }}
+          </div>
+          <div class="text-n-slate-11 text-xs truncate">
+            {{ currentUser.email }}
+          </div>
+        </div>
+      </button>
+    </template>
+    <DropdownBody class="left-0 bottom-12 z-50 w-80 mb-1">
+      <SidebarProfileMenuStatus />
+      <DropdownSeparator />
+      <template v-for="item in allowedMenuItems" :key="item.label">
+        <DropdownItem v-if="item.show" v-bind="item" />
+      </template>
+    </DropdownBody>
+  </DropdownContainer>
 </template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
index 9642e4103..418319cc3 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
@@ -1,11 +1,18 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, h } from 'vue';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
 import wootConstants from 'dashboard/constants/globals';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 
+import {
+  DropdownContainer,
+  DropdownBody,
+  DropdownSection,
+  DropdownItem,
+} from 'next/dropdown-menu/base';
 import Icon from 'next/icon/Icon.vue';
+import Button from 'next/button/Button.vue';
 
 const { t } = useI18n();
 const store = useStore();
@@ -22,14 +29,22 @@ const statusList = computed(() => {
   ];
 });
 
+const statusColors = ['bg-n-teal-9', 'bg-n-amber-9', 'bg-n-slate-9'];
+
 const availabilityStatuses = computed(() => {
   return statusList.value.map((statusLabel, index) => ({
     label: statusLabel,
     value: AVAILABILITY_STATUS_KEYS[index],
+    color: statusColors[index],
+    icon: h('span', { class: [statusColors[index], 'size-[12px] rounded'] }),
     active: currentUserAvailability.value === AVAILABILITY_STATUS_KEYS[index],
   }));
 });
 
+const activeStatus = computed(() => {
+  return availabilityStatuses.value.find(status => status.active);
+});
+
 function changeAvailabilityStatus(availability) {
   try {
     store.dispatch('updateAvailability', {
@@ -50,70 +65,58 @@ function updateAutoOffline(autoOffline) {
 </script>
 
 <template>
-  <div class="pt-2 text-n-slate-12">
-    <span
-      class="px-3 leading-4 font-medium tracking-[0.2px] text-n-slate-10 text-xs"
-    >
-      {{ t('SIDEBAR.SET_AVAILABILITY_TITLE') }}
-    </span>
-    <ul class="list-none m-0 grid gap-1 p-1">
-      <li
-        v-for="status in availabilityStatuses"
-        :key="status.value"
-        class="flex items-baseline"
-      >
-        <button
-          class="text-left rtl:text-right hover:bg-n-alpha-1 px-2 py-1.5 w-full flex items-center gap-2"
-          :class="{
-            'pointer-events-none bg-n-amber-10/10': status.active,
-            'bg-n-teal-3': status.active && status.value === 'online',
-            'bg-n-amber-3': status.active && status.value === 'busy',
-            'bg-n-slate-3': status.active && status.value === 'offline',
-          }"
-          @click="changeAvailabilityStatus(status.value)"
-        >
-          <div
-            class="rounded-full w-2.5 h-2.5"
-            :class="{
-              'bg-n-teal-10': status.value === 'online',
-              'bg-n-amber-10': status.value === 'busy',
-              'bg-n-slate-10': status.value === 'offline',
-            }"
-          />
-          <span class="flex-grow">{{ status.label }}</span>
-          <Icon
-            v-if="status.active"
-            icon="i-lucide-check"
-            class="size-4 flex-shrink-0"
-            :class="{
-              'text-n-teal-11': status.value === 'online',
-              'text-n-amber-11': status.value === 'busy',
-              'text-n-slate-11': status.value === 'offline',
-            }"
-          />
-        </button>
-      </li>
-    </ul>
-  </div>
-  <div class="border-t border-n-strong mx-2 my-0" />
-  <ul class="list-none m-0 grid gap-1 p-1">
-    <li class="px-2 py-1.5 flex items-start w-full gap-2">
-      <div class="h-5 flex items-center flex-shrink-0">
-        <Icon icon="i-lucide-info" class="size-4" />
-      </div>
-      <div class="flex-grow">
-        <div class="h-5 leading-none flex place-items-center text-n-slate-12">
+  <DropdownSection>
+    <div class="grid gap-0">
+      <DropdownItem>
+        <div class="flex-grow flex items-center gap-1">
+          {{ $t('SIDEBAR.SET_YOUR_AVAILABILITY') }}
+        </div>
+        <DropdownContainer>
+          <template #trigger="{ toggle }">
+            <Button
+              size="sm"
+              color="slate"
+              variant="faded"
+              class="min-w-[96px]"
+              icon="i-lucide-chevron-down"
+              trailing-icon
+              @click="toggle"
+            >
+              <div class="flex gap-1 items-center flex-grow text-sm">
+                <div class="p-1 flex-shrink-0">
+                  <div class="size-2 rounded-sm" :class="activeStatus.color" />
+                </div>
+                <span>{{ activeStatus.label }}</span>
+              </div>
+            </Button>
+          </template>
+          <DropdownBody class="min-w-32">
+            <DropdownItem
+              v-for="status in availabilityStatuses"
+              :key="status.value"
+              :label="status.label"
+              :icon="status.icon"
+              class="cursor-pointer"
+              @click="changeAvailabilityStatus(status.value)"
+            />
+          </DropdownBody>
+        </DropdownContainer>
+      </DropdownItem>
+      <DropdownItem>
+        <div class="flex-grow flex items-center gap-1">
           {{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}
+          <Icon
+            v-tooltip.top="$t('SIDEBAR.SET_AUTO_OFFLINE.INFO_SHORT')"
+            icon="i-lucide-info"
+            class="size-4 text-n-slate-10"
+          />
         </div>
-        <div class="text-xs leading-tight text-n-slate-10 mt-1">
-          {{ t('SIDEBAR.SET_AUTO_OFFLINE.INFO_SHORT') }}
-        </div>
-      </div>
-      <woot-switch
-        class="flex-shrink-0"
-        :model-value="currentUserAutoOffline"
-        @input="updateAutoOffline"
-      />
-    </li>
-  </ul>
+        <woot-switch
+          class="flex-shrink-0"
+          :model-value="currentUserAutoOffline"
+          @input="updateAutoOffline"
+        />
+      </DropdownItem>
+    </div>
+  </DropdownSection>
 </template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue b/app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue
index 8c7f5c3a7..52886ebde 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue
@@ -52,7 +52,7 @@ useEventListener(scrollableContainer, 'scroll', () => {
     :icon
     class="my-1"
   />
-  <ul class="m-0 list-none relative group">
+  <ul class="m-0 list-none reset-base relative group">
     <!-- Each element has h-8, which is 32px, we will show 7 items with one hidden at the end,
     which is 14rem. Then we add 16px so that we have some text visible from the next item  -->
     <div
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
index 4b144c13d..efe89d4c6 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@@ -247,7 +247,7 @@ export default {
     <transition-group
       name="menu-list"
       tag="ul"
-      class="pt-2 mb-0 ml-0 list-none"
+      class="pt-2 reset-base list-none"
     >
       <SecondaryNavItem
         v-for="menuItem in accessibleMenuItems"
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
index 84cb91e08..952f212ee 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@@ -242,7 +242,7 @@ export default {
       </span>
     </router-link>
 
-    <ul v-if="hasSubMenu" class="mb-0 ml-0 list-none">
+    <ul v-if="hasSubMenu" class="reset-base list-none">
       <SecondaryChildNavItem
         v-for="child in menuItem.children"
         :key="child.id"
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js b/app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js
index 1af49195f..2d93d3952 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js
@@ -53,7 +53,7 @@ describe('AccountSelector', () => {
   it('title and sub title exist', () => {
     const headerComponent = accountSelector.findComponent(WootModalHeader);
     const title = headerComponent.find('[data-test-id="modal-header-title"]');
-    expect(title.text()).toBe('Switch Account');
+    expect(title.text()).toBe('Switch account');
     const content = headerComponent.find(
       '[data-test-id="modal-header-content"]'
     );
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 414291dfd..9b2c5fde6 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -177,14 +177,16 @@
   },
   "SIDEBAR_ITEMS": {
     "CHANGE_AVAILABILITY_STATUS": "Change",
-    "CHANGE_ACCOUNTS": "Switch Account",
-    "CONTACT_SUPPORT": "Contact Support",
+    "CHANGE_ACCOUNTS": "Switch account",
+    "SWITCH_WORKSPACE": "Switch workspace",
+    "CONTACT_SUPPORT": "Contact support",
     "SELECTOR_SUBTITLE": "Select an account from the following list",
-    "PROFILE_SETTINGS": "Profile Settings",
-    "KEYBOARD_SHORTCUTS": "Keyboard Shortcuts",
-    "APPEARANCE": "Change Appearance",
-    "SUPER_ADMIN_CONSOLE": "Super Admin Console",
-    "LOGOUT": "Logout"
+    "PROFILE_SETTINGS": "Profile settings",
+    "KEYBOARD_SHORTCUTS": "Keyboard shortcuts",
+    "APPEARANCE": "Change appearance",
+    "SUPER_ADMIN_CONSOLE": "SuperAdmin console",
+    "DOCS": "Read documentation",
+    "LOGOUT": "Log out"
   },
   "APP_GLOBAL": {
     "TRIAL_MESSAGE": "days trial remaining.",
@@ -279,6 +281,7 @@
     "REPORTS_INBOX": "Inbox",
     "REPORTS_TEAM": "Team",
     "SET_AVAILABILITY_TITLE": "Set yourself as",
+    "SET_YOUR_AVAILABILITY": "Set your availability",
     "SLA": "SLA",
     "CUSTOM_ROLES": "Custom Roles",
     "BETA": "Beta",
diff --git a/app/javascript/dashboard/store/modules/auth.js b/app/javascript/dashboard/store/modules/auth.js
index e2c1aac75..695edc3cb 100644
--- a/app/javascript/dashboard/store/modules/auth.js
+++ b/app/javascript/dashboard/store/modules/auth.js
@@ -151,8 +151,15 @@ export const actions = {
     }
   },
 
-  updateAvailability: async ({ commit, dispatch }, params) => {
+  updateAvailability: async (
+    { commit, dispatch, getters: _getters },
+    params
+  ) => {
+    const previousStatus = _getters.getCurrentUserAvailability;
+
     try {
+      // optimisticly update current status
+      commit(types.SET_CURRENT_USER_AVAILABILITY, params.availability);
       const response = await authAPI.updateAvailability(params);
       const userData = response.data;
       const { id } = userData;
@@ -162,16 +169,23 @@ export const actions = {
         availabilityStatus: params.availability,
       });
     } catch (error) {
-      // Ignore error
+      // revert back to previous status if update fails
+      commit(types.SET_CURRENT_USER_AVAILABILITY, previousStatus);
     }
   },
 
-  updateAutoOffline: async ({ commit }, { accountId, autoOffline }) => {
+  updateAutoOffline: async (
+    { commit, getters: _getters },
+    { accountId, autoOffline }
+  ) => {
+    const previousAutoOffline = _getters.getCurrentUserAutoOffline;
+
     try {
+      commit(types.SET_CURRENT_USER_AUTO_OFFLINE, autoOffline);
       const response = await authAPI.updateAutoOffline(accountId, autoOffline);
       commit(types.SET_CURRENT_USER, response.data);
     } catch (error) {
-      // Ignore error
+      commit(types.SET_CURRENT_USER_AUTO_OFFLINE, previousAutoOffline);
     }
   },
 
@@ -212,6 +226,19 @@ export const mutations = {
       accounts,
     };
   },
+  [types.SET_CURRENT_USER_AUTO_OFFLINE](_state, autoOffline) {
+    const accounts = _state.currentUser.accounts.map(account => {
+      if (account.id === _state.currentUser.account_id) {
+        return { ...account, autoOffline: autoOffline };
+      }
+      return account;
+    });
+
+    _state.currentUser = {
+      ..._state.currentUser,
+      accounts,
+    };
+  },
   [types.CLEAR_USER](_state) {
     _state.currentUser = initialState.currentUser;
   },
diff --git a/app/javascript/dashboard/store/modules/specs/auth/actions.spec.js b/app/javascript/dashboard/store/modules/specs/auth/actions.spec.js
index f5206a8a6..3de56b1fe 100644
--- a/app/javascript/dashboard/store/modules/specs/auth/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/auth/actions.spec.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import Cookies from 'js-cookie';
 import { actions } from '../../auth';
-import * as types from '../../../mutation-types';
+import types from '../../../mutation-types';
 import * as APIHelpers from '../../../utils/api';
 import '../../../../routes';
 
@@ -25,7 +25,7 @@ describe('#actions', () => {
       await actions.validityCheck({ commit });
       expect(APIHelpers.setUser).toHaveBeenCalledTimes(1);
       expect(commit.mock.calls).toEqual([
-        [types.default.SET_CURRENT_USER, { id: 1, name: 'John' }],
+        [types.SET_CURRENT_USER, { id: 1, name: 'John' }],
       ]);
     });
     it('sends correct actions if API is error', async () => {
@@ -45,7 +45,7 @@ describe('#actions', () => {
       });
       await actions.updateProfile({ commit }, { name: 'Pranav' });
       expect(commit.mock.calls).toEqual([
-        [types.default.SET_CURRENT_USER, { id: 1, name: 'John' }],
+        [types.SET_CURRENT_USER, { id: 1, name: 'John' }],
       ]);
     });
   });
@@ -61,12 +61,13 @@ describe('#actions', () => {
         headers: { expiry: 581842904 },
       });
       await actions.updateAvailability(
-        { commit, dispatch },
+        { commit, dispatch, getters: { getCurrentUserAvailability: 'online' } },
         { availability: 'offline', account_id: 1 }
       );
       expect(commit.mock.calls).toEqual([
+        [types.SET_CURRENT_USER_AVAILABILITY, 'offline'],
         [
-          types.default.SET_CURRENT_USER,
+          types.SET_CURRENT_USER,
           {
             id: 1,
             name: 'John',
@@ -81,6 +82,18 @@ describe('#actions', () => {
         ],
       ]);
     });
+
+    it('sends correct actions if API is a failure', async () => {
+      axios.post.mockRejectedValue({ error: 'Authentication Failure' });
+      await actions.updateAvailability(
+        { commit, dispatch, getters: { getCurrentUserAvailability: 'online' } },
+        { availability: 'offline', account_id: 1 }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CURRENT_USER_AVAILABILITY, 'offline'],
+        [types.SET_CURRENT_USER_AVAILABILITY, 'online'],
+      ]);
+    });
   });
 
   describe('#updateAutoOffline', () => {
@@ -99,12 +112,13 @@ describe('#actions', () => {
         headers: { expiry: 581842904 },
       });
       await actions.updateAutoOffline(
-        { commit, dispatch },
+        { commit, dispatch, getters: { getCurrentUserAutoOffline: true } },
         { autoOffline: false, accountId: 1 }
       );
       expect(commit.mock.calls).toEqual([
+        [types.SET_CURRENT_USER_AUTO_OFFLINE, false],
         [
-          types.default.SET_CURRENT_USER,
+          types.SET_CURRENT_USER,
           {
             id: 1,
             name: 'John',
@@ -113,6 +127,17 @@ describe('#actions', () => {
         ],
       ]);
     });
+    it('sends correct actions if API is failure', async () => {
+      axios.post.mockRejectedValue({ error: 'Authentication Failure' });
+      await actions.updateAutoOffline(
+        { commit, dispatch, getters: { getCurrentUserAutoOffline: true } },
+        { autoOffline: false, accountId: 1 }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CURRENT_USER_AUTO_OFFLINE, false],
+        [types.SET_CURRENT_USER_AUTO_OFFLINE, true],
+      ]);
+    });
   });
 
   describe('#updateUISettings', () => {
@@ -132,11 +157,11 @@ describe('#actions', () => {
       );
       expect(commit.mock.calls).toEqual([
         [
-          types.default.SET_CURRENT_USER_UI_SETTINGS,
+          types.SET_CURRENT_USER_UI_SETTINGS,
           { uiSettings: { is_contact_sidebar_open: false } },
         ],
         [
-          types.default.SET_CURRENT_USER,
+          types.SET_CURRENT_USER,
           {
             id: 1,
             name: 'John',
@@ -160,8 +185,8 @@ describe('#actions', () => {
       Cookies.get.mockImplementation(() => false);
       actions.setUser({ commit, dispatch });
       expect(commit.mock.calls).toEqual([
-        [types.default.CLEAR_USER],
-        [types.default.SET_CURRENT_USER_UI_FLAGS, { isFetching: false }],
+        [types.CLEAR_USER],
+        [types.SET_CURRENT_USER_UI_FLAGS, { isFetching: false }],
       ]);
       expect(dispatch).toHaveBeenCalledTimes(0);
     });
@@ -177,7 +202,7 @@ describe('#actions', () => {
         { 1: 'online' }
       );
       expect(commit.mock.calls).toEqual([
-        [types.default.SET_CURRENT_USER_AVAILABILITY, 'online'],
+        [types.SET_CURRENT_USER_AVAILABILITY, 'online'],
       ]);
     });
 
diff --git a/app/javascript/dashboard/store/mutation-types.js b/app/javascript/dashboard/store/mutation-types.js
index 2a6bcacb8..7cc5223a0 100644
--- a/app/javascript/dashboard/store/mutation-types.js
+++ b/app/javascript/dashboard/store/mutation-types.js
@@ -3,6 +3,7 @@ export default {
   CLEAR_USER: 'LOGOUT',
   SET_CURRENT_USER: 'SET_CURRENT_USER',
   SET_CURRENT_USER_AVAILABILITY: 'SET_CURRENT_USER_AVAILABILITY',
+  SET_CURRENT_USER_AUTO_OFFLINE: 'SET_CURRENT_USER_AUTO_OFFLINE',
   SET_CURRENT_USER_UI_SETTINGS: 'SET_CURRENT_USER_UI_SETTINGS',
   SET_CURRENT_USER_UI_FLAGS: 'SET_CURRENT_USER_UI_FLAGS',
 

From c2e2954dfa22723792c06cae1f277094c0db7280 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 19 Nov 2024 08:39:09 +0530
Subject: [PATCH 37/39] fix: Remove the warnings generated from the Sidebar
 component (#10437)

The following warning occurred since the `ChannelLeaf` component was passed extra props. This PR fixes it by passing only the required props
---
 .../dashboard/components-next/sidebar/Sidebar.vue          | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index a7d3a1cee..2d4fdf1dd 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -140,7 +140,12 @@ const menuItems = computed(() => {
             name: `${inbox.name}-${inbox.id}`,
             label: inbox.name,
             to: accountScopedRoute('inbox_dashboard', { inbox_id: inbox.id }),
-            component: leafProps => h(ChannelLeaf, { ...leafProps, inbox }),
+            component: leafProps =>
+              h(ChannelLeaf, {
+                label: leafProps.label,
+                active: leafProps.active,
+                inbox,
+              }),
           })),
         },
         {

From b680fa43ecdc177f22c7886dd2354ee20b32816b Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 19 Nov 2024 14:38:00 +0530
Subject: [PATCH 38/39] fix: Country code missing when typing in phone input.
 (#10439)

---
 .../widget/components/Form/PhoneInput.vue     | 27 +++----------------
 1 file changed, 3 insertions(+), 24 deletions(-)

diff --git a/app/javascript/widget/components/Form/PhoneInput.vue b/app/javascript/widget/components/Form/PhoneInput.vue
index adb3b452b..5713086d5 100644
--- a/app/javascript/widget/components/Form/PhoneInput.vue
+++ b/app/javascript/widget/components/Form/PhoneInput.vue
@@ -114,31 +114,10 @@ function setContextValue(code) {
   context.node.input(localValue.value);
 }
 
-function dynamicallySetCountryCode(value) {
-  const safeValue = unref(value);
-  // This function is used to set the country code dynamically.
-  // The country and dial code is used to set from the value of the phone number field in the pre-chat form.
-  if (!safeValue) return;
-
-  // check the number first four digit and check weather it is available in the countries array or not.
-  const country = countries.value.find(code =>
-    safeValue.startsWith(code.dial_code)
-  );
-
-  if (country) {
-    // if it is available then set the country code and dial code.
-    activeCountryCode.value = country.id;
-    activeDialCode.value = country.dial_code;
-    // set the phone number without dial code.
-    phoneNumber.value = safeValue.replace(country.dial_code, '');
-  }
-}
-
 function onChange(e) {
   phoneNumber.value = e.target.value;
-  dynamicallySetCountryCode(phoneNumber);
   // This function is used to set the context value when the user types in the phone number field.
-  setContextValue(activeDialCode);
+  setContextValue(activeDialCode.value);
 }
 
 function focusedOrActiveItem(className) {
@@ -157,8 +136,8 @@ function scrollToFocusedOrActiveItem(item) {
   if (focusedOrActiveItemLocal.length > 0) {
     const dropdown = dropdownRef.value;
     const dropdownHeight = dropdown.clientHeight;
-    const itemTop = focusedOrActiveItem[0].offsetTop;
-    const itemHeight = focusedOrActiveItem[0].offsetHeight;
+    const itemTop = focusedOrActiveItemLocal[0]?.offsetTop;
+    const itemHeight = focusedOrActiveItemLocal[0]?.offsetHeight;
     const scrollPosition = itemTop - dropdownHeight / 2 + itemHeight / 2;
     dropdown.scrollTo({
       top: scrollPosition,

From 7d9800d2f89bef6695e8179382d44eb0e51b3ca5 Mon Sep 17 00:00:00 2001
From: Sojan <sojan@pepalo.com>
Date: Tue, 19 Nov 2024 18:01:33 +0800
Subject: [PATCH 39/39] Bump version to 3.15.0

---
 config/app.yml | 2 +-
 package.json   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/config/app.yml b/config/app.yml
index ee9eb613f..2c8fa1e11 100644
--- a/config/app.yml
+++ b/config/app.yml
@@ -1,5 +1,5 @@
 shared: &shared
-  version: '3.14.1'
+  version: '3.15.0'
 
 development:
   <<: *shared
diff --git a/package.json b/package.json
index 3742a1b50..fc2de8c7d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/chatwoot",
-  "version": "3.14.1",
+  "version": "3.15.0",
   "license": "MIT",
   "scripts": {
     "eslint": "eslint app/**/*.{js,vue}",