From 79daf56c311827b138a9f07e67a6269c52104486 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 22 Nov 2024 03:17:57 +0530
Subject: [PATCH 01/15] feat: Add contact note item component (#10479)

---
 .../components/ContactNoteItem.vue            | 63 +++++++++++++++++
 .../story/ContactNoteItem.story.vue           | 39 +++++++++++
 .../components/story/fixtures.js              | 69 +++++++++++++++++++
 .../dashboard/i18n/locale/en/contact.json     |  9 +++
 app/javascript/histoire.setup.ts              |  3 +
 5 files changed, 183 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/ContactNoteItem.story.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/fixtures.js

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue
new file mode 100644
index 000000000..81f7a147f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue
@@ -0,0 +1,63 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  note: {
+    type: Object,
+    required: true,
+  },
+  writtenBy: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['delete']);
+
+const { t } = useI18n();
+const { formatMessage } = useMessageFormatter();
+
+const handleDelete = () => {
+  emit('delete', props.note.id);
+};
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-2 px-6 py-2 border-b border-n-strong group/note"
+  >
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-1.5 py-2.5 min-w-0">
+        <Avatar
+          :name="note.user.name"
+          :src="note.user.thumbnail"
+          :size="16"
+          rounded-full
+        />
+        <div class="min-w-0 truncate">
+          <span class="inline-flex items-center gap-1 text-sm text-n-slate-11">
+            <span class="font-medium">{{ writtenBy }}</span>
+            {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.WROTE') }}
+            <span class="font-medium">{{ dynamicTime(note.createdAt) }}</span>
+          </span>
+        </div>
+      </div>
+      <Button
+        variant="faded"
+        color="ruby"
+        size="xs"
+        icon="i-lucide-trash"
+        class="opacity-0 group-hover/note:opacity-100"
+        @click="handleDelete"
+      />
+    </div>
+    <p
+      v-dompurify-html="formatMessage(note.content || '')"
+      class="mb-0 prose-sm prose-p:mb-1 prose-p:mt-0 prose-ul:mb-1 prose-ul:mt-0 text-n-slate-12"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/ContactNoteItem.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/ContactNoteItem.story.vue
new file mode 100644
index 000000000..0dbf8bf01
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/ContactNoteItem.story.vue
@@ -0,0 +1,39 @@
+<script setup>
+import ContactNoteItem from '../ContactNoteItem.vue';
+import notes from './fixtures';
+
+const controls = {
+  writtenBy: {
+    type: 'text',
+    default: 'You',
+  },
+};
+
+// Example delete handler
+const onDelete = noteId => {
+  console.log('Note deleted:', noteId);
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Contacts/ContactNoteItem"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Multiple Notes">
+      <div class="flex flex-col border rounded-lg border-n-strong">
+        <ContactNoteItem
+          v-for="note in notes"
+          :key="note.id"
+          :note="note"
+          :written-by="
+            note.id === notes[1].id
+              ? controls.writtenBy.default
+              : note.user.name
+          "
+          @delete="onDelete"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/fixtures.js b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/fixtures.js
new file mode 100644
index 000000000..440ad95df
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/fixtures.js
@@ -0,0 +1,69 @@
+export default [
+  {
+    id: 12,
+    content:
+      'This tutorial will show you how to use Chatwoot and, hence, ensure you practice effective customer communication. We will explain in detail the following:\n\n* Step-by-step setup of your account, with illustrative screenshots.\n\n* An in-depth explanation of all the core features of Chatwoot.\n\n* Get your account up and running by the end of this tutorial.\n\n* Basic concepts of customer communication.',
+    accountId: null,
+    contactId: null,
+    user: {
+      id: 30,
+      account_id: 2,
+      availability_status: 'offline',
+      auto_offline: true,
+      confirmed: true,
+      email: 'bruce@paperlayer.test',
+      available_name: 'Bruce',
+      name: 'Bruce',
+      role: 'administrator',
+      thumbnail:
+        'https://sivin-tunnel.chatwoot.dev/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBJZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--515dbb35e9ba3c36d14f4c4b77220a675513c1fb/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--df796c2af3c0153e55236c2f3cf3a199ac2cb6f7/2.jpg',
+      custom_role_id: null,
+    },
+    createdAt: 1730786556,
+    updatedAt: 1730786556,
+  },
+  {
+    id: 10,
+    content:
+      'We discussed a couple of things:\n\n* Product offering and how it can be useful to talk with people.\n\n* They’ll reach out to us after an internal review.',
+    accountId: null,
+    contactId: null,
+    user: {
+      id: 1,
+      account_id: 2,
+      availability_status: 'online',
+      auto_offline: false,
+      confirmed: true,
+      email: 'hillary@chatwoot.com',
+      available_name: 'Hillary',
+      name: 'Hillary',
+      role: 'administrator',
+      thumbnail: '',
+      custom_role_id: null,
+    },
+    createdAt: 1730782566,
+    updatedAt: 1730782566,
+  },
+  {
+    id: 9,
+    content:
+      'We discussed a couple of things:\n\n* Product offering and how it can be useful to talk with people.\n\n* They’ll reach out to us after an internal review.',
+    accountId: null,
+    contactId: null,
+    user: {
+      id: 1,
+      account_id: 2,
+      availability_status: 'online',
+      auto_offline: false,
+      confirmed: true,
+      email: 'john@chatwoot.com',
+      available_name: 'John',
+      name: 'John',
+      role: 'administrator',
+      thumbnail: '',
+      custom_role_id: null,
+    },
+    createdAt: 1730782564,
+    updatedAt: 1730782564,
+  },
+];
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index e0483d224..5ac4fea21 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -440,6 +440,15 @@
           }
         }
       }
+    },
+    "SIDEBAR": {
+      "NOTES": {
+        "PLACEHOLDER": "Add a note",
+        "WROTE": "wrote",
+        "YOU": "You",
+        "SAVE": "Save note",
+        "EMPTY_STATE": "There are no notes associated to this contact. You can add a note by typing in the box above."
+      }
     }
   }
 }
diff --git a/app/javascript/histoire.setup.ts b/app/javascript/histoire.setup.ts
index 13a81608a..6b7358d59 100644
--- a/app/javascript/histoire.setup.ts
+++ b/app/javascript/histoire.setup.ts
@@ -4,6 +4,8 @@ import i18nMessages from 'dashboard/i18n';
 import { createI18n } from 'vue-i18n';
 import { vResizeObserver } from '@vueuse/components';
 import store from 'dashboard/store';
+import VueDOMPurifyHTML from 'vue-dompurify-html';
+import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer.js';
 
 const i18n = createI18n({
   legacy: false, // https://github.com/intlify/vue-i18n/issues/1902
@@ -15,4 +17,5 @@ export const setupVue3 = defineSetupVue3(({ app }) => {
   app.use(store);
   app.use(i18n);
   app.directive('resize', vResizeObserver);
+  app.use(VueDOMPurifyHTML, domPurifyConfig);
 });

From 497bc055a2bf24cf3e19762cbeac99fdb2b6db52 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 22 Nov 2024 03:18:25 +0530
Subject: [PATCH 02/15] feat: Attributify button component (#10473)

This PR allows attributify for `variant`, `size` and `color` props. This allows using shorthands, instant of writing full props.

We also added a small computed method to ensure these does not show up
in the DOM and pollute it

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
---
 .../components-next/button/Button.vue         | 109 ++++++++++++------
 .../components-next/button/constants.js       |  15 +++
 2 files changed, 90 insertions(+), 34 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/button/constants.js

diff --git a/app/javascript/dashboard/components-next/button/Button.vue b/app/javascript/dashboard/components-next/button/Button.vue
index 02dcfad53..b174ca375 100644
--- a/app/javascript/dashboard/components-next/button/Button.vue
+++ b/app/javascript/dashboard/components-next/button/Button.vue
@@ -1,46 +1,85 @@
 <script setup>
-import { computed, useSlots } from 'vue';
+import { computed, useSlots, useAttrs } from 'vue';
 
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
+import {
+  VARIANT_OPTIONS,
+  COLOR_OPTIONS,
+  SIZE_OPTIONS,
+  EXCLUDED_ATTRS,
+} from './constants.js';
 
 const props = defineProps({
-  label: {
-    type: [String, Number],
-    default: '',
-  },
+  label: { type: [String, Number], default: '' },
   variant: {
     type: String,
-    default: 'solid',
-    validator: value =>
-      ['solid', 'outline', 'faded', 'link', 'ghost'].includes(value),
+    default: null,
+    validator: value => VARIANT_OPTIONS.includes(value) || value === null,
   },
   color: {
     type: String,
-    default: 'blue',
-    validator: value =>
-      ['blue', 'ruby', 'amber', 'slate', 'teal'].includes(value),
+    default: null,
+    validator: value => COLOR_OPTIONS.includes(value) || value === null,
   },
   size: {
     type: String,
-    default: 'md',
-    validator: value => ['xs', 'sm', 'md', 'lg'].includes(value),
-  },
-  icon: {
-    type: String,
-    default: '',
-  },
-  trailingIcon: {
-    type: Boolean,
-    default: false,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
+    default: null,
+    validator: value => SIZE_OPTIONS.includes(value) || value === null,
   },
+  icon: { type: [String, Object, Function], default: '' },
+  trailingIcon: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
 });
 
 const slots = useSlots();
+const attrs = useAttrs();
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const filteredAttrs = computed(() => {
+  const standardAttrs = {};
+
+  Object.entries(attrs)
+    .filter(([key]) => !EXCLUDED_ATTRS.includes(key))
+    .forEach(([key, value]) => {
+      standardAttrs[key] = value;
+    });
+
+  return standardAttrs;
+});
+
+const computedVariant = computed(() => {
+  if (props.variant) return props.variant;
+  // The useAttrs method returns attributes values an empty string (not boolean value as in props).
+  if (attrs.solid || attrs.solid === '') return 'solid';
+  if (attrs.outline || attrs.outline === '') return 'outline';
+  if (attrs.faded || attrs.faded === '') return 'faded';
+  if (attrs.link || attrs.link === '') return 'link';
+  if (attrs.ghost || attrs.ghost === '') return 'ghost';
+  return 'solid'; // Default variant
+});
+
+const computedColor = computed(() => {
+  if (props.color) return props.color;
+  if (attrs.blue || attrs.blue === '') return 'blue';
+  if (attrs.ruby || attrs.ruby === '') return 'ruby';
+  if (attrs.amber || attrs.amber === '') return 'amber';
+  if (attrs.slate || attrs.slate === '') return 'slate';
+  if (attrs.teal || attrs.teal === '') return 'teal';
+  return 'blue'; // Default color
+});
+
+const computedSize = computed(() => {
+  if (props.size) return props.size;
+  if (attrs.xs || attrs.xs === '') return 'xs';
+  if (attrs.sm || attrs.sm === '') return 'sm';
+  if (attrs.md || attrs.md === '') return 'md';
+  if (attrs.lg || attrs.lg === '') return 'lg';
+  return 'md';
+});
 
 const STYLE_CONFIG = {
   colors: {
@@ -113,23 +152,24 @@ const STYLE_CONFIG = {
 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,
+    link: `${STYLE_CONFIG.colors[computedColor.value].link} p-0 font-medium underline-offset-4`,
+    outline: STYLE_CONFIG.colors[computedColor.value].outline,
+    faded: STYLE_CONFIG.colors[computedColor.value].faded,
+    solid: STYLE_CONFIG.colors[computedColor.value].solid,
   };
 
-  return variantMap[props.variant];
+  return variantMap[computedVariant.value];
 });
 
 const isIconOnly = computed(() => !props.label && !slots.default);
-const isLink = computed(() => props.variant === 'link');
+const isLink = computed(() => computedVariant.value === 'link');
 
 const buttonClasses = computed(() => {
   const sizeConfig = isIconOnly.value ? 'iconOnly' : 'regular';
   const classes = [
     variantClasses.value,
-    props.variant !== 'link' && STYLE_CONFIG.sizes[sizeConfig][props.size],
+    computedVariant.value !== 'link' &&
+      STYLE_CONFIG.sizes[sizeConfig][computedSize.value],
   ].filter(Boolean);
 
   return classes.join(' ');
@@ -138,7 +178,7 @@ const buttonClasses = computed(() => {
 const linkButtonClasses = computed(() => {
   const classes = [
     variantClasses.value,
-    STYLE_CONFIG.sizes.link[props.size],
+    STYLE_CONFIG.sizes.link[computedSize.value],
   ].filter(Boolean);
 
   return classes.join(' ');
@@ -147,10 +187,11 @@ const linkButtonClasses = computed(() => {
 
 <template>
   <button
+    v-bind="filteredAttrs"
     :class="{
       [STYLE_CONFIG.base]: true,
       [isLink ? linkButtonClasses : buttonClasses]: true,
-      [STYLE_CONFIG.fontSize[size]]: true,
+      [STYLE_CONFIG.fontSize[computedSize]]: true,
       'flex-row-reverse': trailingIcon && !isIconOnly,
     }"
   >
diff --git a/app/javascript/dashboard/components-next/button/constants.js b/app/javascript/dashboard/components-next/button/constants.js
new file mode 100644
index 000000000..e65299420
--- /dev/null
+++ b/app/javascript/dashboard/components-next/button/constants.js
@@ -0,0 +1,15 @@
+export const VARIANT_OPTIONS = ['solid', 'outline', 'faded', 'link', 'ghost'];
+export const COLOR_OPTIONS = ['blue', 'ruby', 'amber', 'slate', 'teal'];
+export const SIZE_OPTIONS = ['xs', 'sm', 'md', 'lg'];
+
+export const EXCLUDED_ATTRS = [
+  'variant',
+  'color',
+  'size',
+  'icon',
+  'trailingIcon',
+  'isLoading',
+  ...VARIANT_OPTIONS,
+  ...COLOR_OPTIONS,
+  ...SIZE_OPTIONS,
+];

From cf6ef11b9fdb0d875972f35de2db0a1061fe4c74 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 22 Nov 2024 03:22:25 +0530
Subject: [PATCH 03/15] feat: Add contact merge form component (#10478)

Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../ContactsForm/ContactMergeForm.vue         | 112 ++++++++++++++++++
 .../story/ContactMergeForm.story.vue          |  73 ++++++++++++
 .../ContactsForm/story/ContactsForm.story.vue |   2 +-
 .../Contacts/ContactsForm/story/fixtures.js   |  29 ++++-
 .../dashboard/i18n/locale/en/contact.json     |  20 ++++
 5 files changed, 234 insertions(+), 2 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactMergeForm.story.vue

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue
new file mode 100644
index 000000000..dc38c4649
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue
@@ -0,0 +1,112 @@
+<script setup>
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import { useI18n } from 'vue-i18n';
+
+defineProps({
+  selectedContact: {
+    type: Object,
+    required: true,
+  },
+  primaryContactId: {
+    type: [Number, null],
+    default: null,
+  },
+  primaryContactList: {
+    type: Array,
+    default: () => [],
+  },
+  isSearching: {
+    type: Boolean,
+    default: false,
+  },
+  hasError: {
+    type: Boolean,
+    default: false,
+  },
+  errorMessage: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:primaryContactId', 'search']);
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between h-5 gap-2">
+        <label class="text-sm text-n-slate-12">
+          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PRIMARY') }}
+        </label>
+        <span
+          class="flex items-center justify-center w-24 h-5 text-xs rounded-md text-n-teal-11 bg-n-alpha-2"
+        >
+          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PRIMARY_HELP_LABEL') }}
+        </span>
+      </div>
+      <ComboBox
+        id="inbox"
+        :model-value="primaryContactId"
+        :options="primaryContactList"
+        :empty-state="
+          isSearching
+            ? t('CONTACTS_LAYOUT.SIDEBAR.MERGE.IS_SEARCHING')
+            : t('CONTACTS_LAYOUT.SIDEBAR.MERGE.EMPTY_STATE')
+        "
+        :search-placeholder="
+          t('CONTACTS_LAYOUT.SIDEBAR.MERGE.SEARCH_PLACEHOLDER')
+        "
+        :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PLACEHOLDER')"
+        :has-error="hasError"
+        :message="errorMessage"
+        class="[&>div>button]:bg-n-alpha-black2"
+        @update:model-value="value => emit('update:primaryContactId', value)"
+        @search="query => emit('search', query)"
+      />
+    </div>
+    <div class="relative flex justify-center gap-2 top-4">
+      <div v-for="i in 3" :key="i" class="relative w-4 h-8">
+        <div
+          class="absolute w-0 h-0 border-l-[4px] border-r-[4px] border-b-[6px] border-l-transparent border-r-transparent border-n-strong ltr:translate-x-[4px] rtl:-translate-x-[4px] -translate-y-[4px]"
+        />
+        <div
+          class="absolute w-[1px] h-full bg-n-strong left-1/2 transform -translate-x-1/2"
+        />
+      </div>
+    </div>
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between h-5 gap-2">
+        <label class="text-sm text-n-slate-12">
+          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PARENT') }}
+        </label>
+        <span
+          class="flex items-center justify-center w-24 h-5 text-xs rounded-md text-n-ruby-11 bg-n-alpha-2"
+        >
+          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PARENT_HELP_LABEL') }}
+        </span>
+      </div>
+      <div
+        class="border border-n-strong h-[60px] gap-2 flex items-center rounded-xl p-3"
+      >
+        <Avatar
+          :name="selectedContact.name || ''"
+          :src="selectedContact.thumbnail || ''"
+          :size="32"
+          rounded-full
+        />
+        <div class="flex flex-col gap-1">
+          <span class="text-sm leading-4 truncate text-n-slate-11">
+            {{ selectedContact.name }}
+          </span>
+          <span class="text-sm leading-4 truncate text-n-slate-11">
+            {{ selectedContact.email }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactMergeForm.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactMergeForm.story.vue
new file mode 100644
index 000000000..dbf22dadd
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactMergeForm.story.vue
@@ -0,0 +1,73 @@
+<script setup>
+import ContactMergeForm from '../ContactMergeForm.vue';
+import { contactData, primaryContactList } from './fixtures';
+
+const handleSearch = query => {
+  console.log('Searching for:', query);
+};
+
+const handleUpdate = value => {
+  console.log('Primary contact updated:', value);
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Contacts/ContactMergeForm"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Default">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactMergeForm
+          :selected-contact="contactData"
+          :primary-contact-list="primaryContactList"
+          :primary-contact-id="null"
+          :is-searching="false"
+          @update:primary-contact-id="handleUpdate"
+          @search="handleSearch"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Selected Primary Contact">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactMergeForm
+          :selected-contact="contactData"
+          :primary-contact-list="primaryContactList"
+          :primary-contact-id="1"
+          :is-searching="false"
+          @update:primary-contact-id="handleUpdate"
+          @search="handleSearch"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Error State">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactMergeForm
+          :selected-contact="contactData"
+          :primary-contact-list="primaryContactList"
+          :primary-contact-id="null"
+          :is-searching="false"
+          has-error
+          error-message="Please select a primary contact"
+          @update:primary-contact-id="handleUpdate"
+          @search="handleSearch"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty Primary Contact List">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactMergeForm
+          :selected-contact="contactData"
+          :primary-contact-list="[]"
+          :primary-contact-id="null"
+          :is-searching="false"
+          @update:primary-contact-id="handleUpdate"
+          @search="handleSearch"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue
index 4be69380c..306df1df0 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue
@@ -1,6 +1,6 @@
 <script setup>
 import ContactsForm from '../ContactsForm.vue';
-import contactData from './fixtures';
+import { contactData } from './fixtures';
 
 const handleUpdate = updatedData => {
   console.log('Form updated:', updatedData);
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js
index 30eb6ee22..9d9590d63 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js
@@ -1,4 +1,4 @@
-export default {
+export const contactData = {
   id: 370,
   name: 'John Doe',
   email: 'johndoe@chatwoot.com',
@@ -18,3 +18,30 @@ export default {
     },
   },
 };
+
+export const primaryContactList = [
+  {
+    id: 1,
+    name: 'Jane Smith',
+    email: 'jane@chatwoot.com',
+    thumbnail: '',
+    label: '(ID: 1) Jane Smith',
+    value: 1,
+  },
+  {
+    id: 2,
+    name: 'Mike Johnson',
+    email: 'mike@chatwoot.com',
+    thumbnail: '',
+    label: '(ID: 2) Mike Johnson',
+    value: 2,
+  },
+  {
+    id: 3,
+    name: 'Sarah Wilson',
+    email: 'sarah@chatwoot.com',
+    thumbnail: '',
+    label: '(ID: 3) Sarah Wilson',
+    value: 3,
+  },
+];
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 5ac4fea21..28335dcf8 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -442,6 +442,26 @@
       }
     },
     "SIDEBAR": {
+      "MERGE": {
+        "TITLE": "Merge contact",
+        "DESCRIPTION": "Combine two profiles into one, including all attributes and conversations. In case of conflict, the primary contact’s attributes will take precedence.",
+        "PRIMARY": "Primary contact",
+        "PRIMARY_HELP_LABEL": "To be saved",
+        "PRIMARY_REQUIRED_ERROR": "Please select a contact to merge with before proceeding",
+        "PARENT": "To be merged",
+        "PARENT_HELP_LABEL": "To be deleted",
+        "EMPTY_STATE": "No contacts found",
+        "PLACEHOLDER": "Search for primary contact",
+        "SEARCH_PLACEHOLDER": "Search for a contact",
+        "SEARCH_ERROR_MESSAGE": "Could not search for contacts. Please try again later.",
+        "SUCCESS_MESSAGE": "Contact merged successfully",
+        "ERROR_MESSAGE": "Could not merge contacts, try again!",
+        "IS_SEARCHING": "Searching...",
+        "BUTTONS": {
+          "CANCEL": "Cancel",
+          "CONFIRM": "Merge contact"
+        }
+      },
       "NOTES": {
         "PLACEHOLDER": "Add a note",
         "WROTE": "wrote",

From 2dae4b22a2dfcf778d1fff6614df6a8855b74c7c Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 22 Nov 2024 03:27:43 +0530
Subject: [PATCH 04/15] feat: Add Label Input components (#10480)

---
 .../components-next/Label/AddLabel.vue        | 49 +++++++++++++++
 .../components-next/Label/LabelItem.vue       | 22 +++++++
 .../Label/story/AddLabel.story.vue            | 27 ++++++++
 .../Label/story/Label.story.vue               | 21 +++++++
 .../components-next/Label/story/fixtures.js   | 62 +++++++++++++++++++
 .../dashboard/i18n/locale/en/components.json  |  3 +
 6 files changed, 184 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/Label/AddLabel.vue
 create mode 100644 app/javascript/dashboard/components-next/Label/LabelItem.vue
 create mode 100644 app/javascript/dashboard/components-next/Label/story/AddLabel.story.vue
 create mode 100644 app/javascript/dashboard/components-next/Label/story/Label.story.vue
 create mode 100644 app/javascript/dashboard/components-next/Label/story/fixtures.js

diff --git a/app/javascript/dashboard/components-next/Label/AddLabel.vue b/app/javascript/dashboard/components-next/Label/AddLabel.vue
new file mode 100644
index 000000000..c9571e771
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Label/AddLabel.vue
@@ -0,0 +1,49 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+defineProps({
+  labelMenuItems: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['updateLabel']);
+
+const { t } = useI18n();
+
+const showDropdown = ref(false);
+</script>
+
+<template>
+  <div class="relative">
+    <button
+      class="flex items-center gap-1 px-2 py-1 rounded-md outline-dashed h-[26px] outline-1 outline-n-slate-6 hover:bg-n-alpha-2"
+      :class="{ 'bg-n-alpha-2': showDropdown }"
+      @click="showDropdown = !showDropdown"
+    >
+      <span class="i-lucide-plus" />
+      <span class="text-sm text-n-slate-11">
+        {{ t('LABEL.TAG_BUTTON') }}
+      </span>
+    </button>
+    <DropdownMenu
+      v-if="showDropdown"
+      v-on-clickaway="() => (showDropdown = false)"
+      :menu-items="labelMenuItems"
+      show-search
+      class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-52"
+      @action="emit('updateLabel', $event)"
+    >
+      <template #thumbnail="{ item }">
+        <div
+          class="rounded-sm size-2"
+          :style="{ backgroundColor: item.thumbnail.color }"
+        />
+      </template>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Label/LabelItem.vue b/app/javascript/dashboard/components-next/Label/LabelItem.vue
new file mode 100644
index 000000000..b96b9b368
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Label/LabelItem.vue
@@ -0,0 +1,22 @@
+<script setup>
+defineProps({
+  label: {
+    type: Object,
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="bg-n-alpha-2 rounded-md flex items-center h-7 w-fit py-1 ltr:pl-1 rtl:pr-1 ltr:pr-1.5 rtl:pl-1.5"
+  >
+    <div
+      class="w-2 h-2 m-1 rounded-sm"
+      :style="{ backgroundColor: label.color }"
+    />
+    <span class="text-sm text-n-slate-12">
+      {{ label.title }}
+    </span>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Label/story/AddLabel.story.vue b/app/javascript/dashboard/components-next/Label/story/AddLabel.story.vue
new file mode 100644
index 000000000..ea6466feb
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Label/story/AddLabel.story.vue
@@ -0,0 +1,27 @@
+<script setup>
+import AddLabel from '../AddLabel.vue';
+import { labelMenuItems } from './fixtures';
+
+function onUpdateLabel(label) {
+  console.log('Label updated:', label);
+}
+</script>
+
+<template>
+  <Story title="Components/Label/Add Label">
+    <Variant title="Default (button with label menu items with active state)">
+      <div class="h-[300px] p-4">
+        <AddLabel
+          :label-menu-items="labelMenuItems"
+          @update-label="onUpdateLabel"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty List (button with empty label menu)">
+      <div class="h-[300px] p-4">
+        <AddLabel :label-menu-items="[]" @update-label="onUpdateLabel" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Label/story/Label.story.vue b/app/javascript/dashboard/components-next/Label/story/Label.story.vue
new file mode 100644
index 000000000..5319d56ae
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Label/story/Label.story.vue
@@ -0,0 +1,21 @@
+<script setup>
+import Label from '../LabelItem.vue';
+import { label } from './fixtures';
+</script>
+
+<template>
+  <Story title="Components/Label/Label item">
+    <Variant title="Default">
+      <Label :label="label" />
+    </Variant>
+
+    <Variant title="Custom Label">
+      <Label
+        :label="{
+          title: 'Custom Label',
+          color: '#FF5733',
+        }"
+      />
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Label/story/fixtures.js b/app/javascript/dashboard/components-next/Label/story/fixtures.js
new file mode 100644
index 000000000..980ba8c0d
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Label/story/fixtures.js
@@ -0,0 +1,62 @@
+export const label = {
+  id: 1,
+  title: 'delivery',
+  color: '#A2FDD5',
+};
+
+export const labelMenuItems = [
+  {
+    label: 'delivery',
+    value: 3,
+    thumbnail: {
+      color: '#A2FDD5',
+    },
+    isSelected: true,
+    action: 'addLabel',
+  },
+  {
+    label: 'lead',
+    value: 6,
+    thumbnail: {
+      color: '#F161C8',
+    },
+    isSelected: false,
+    action: 'addLabel',
+  },
+  {
+    label: 'ops-handover',
+    value: 4,
+    thumbnail: {
+      color: '#A53326',
+    },
+    isSelected: false,
+    action: 'addLabel',
+  },
+  {
+    label: 'billing',
+    value: 1,
+    thumbnail: {
+      color: '#28AD21',
+    },
+    isSelected: false,
+    action: 'addLabel',
+  },
+  {
+    label: 'premium-customer',
+    value: 5,
+    thumbnail: {
+      color: '#6FD4EF',
+    },
+    isSelected: false,
+    action: 'addLabel',
+  },
+  {
+    label: 'software',
+    value: 2,
+    thumbnail: {
+      color: '#8F6EF2',
+    },
+    isSelected: false,
+    action: 'addLabel',
+  },
+];
diff --git a/app/javascript/dashboard/i18n/locale/en/components.json b/app/javascript/dashboard/i18n/locale/en/components.json
index 7a0533cef..f5207fde9 100644
--- a/app/javascript/dashboard/i18n/locale/en/components.json
+++ b/app/javascript/dashboard/i18n/locale/en/components.json
@@ -30,5 +30,8 @@
   },
   "BREADCRUMB": {
     "ARIA_LABEL": "Breadcrumb"
+  },
+  "LABEL": {
+    "TAG_BUTTON": "tag"
   }
 }

From 0f659224a7418c7474a01b9280ac0915080fadda Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 22 Nov 2024 09:08:08 +0530
Subject: [PATCH 05/15] feat: async update of article [CW-3721] (#10435)

### The problem

Writing in the text editor can be very frustrating, the reason is that
the editor had a debounced save method which would push the article to
the backend and update the current state. This however is a bad idea,
since the can take anywhere between 100-300ms depending on network
conditions.

While this would be in progress, the article is still being edited by
the user. So at the end of the network request, the state returned from
the backend and the current state in the editor is diverged. But since
the update happens anyway, the editor would prepend older context.

```
Time   -->

User Action:      [Edit 1] ---> [Edit 2] ---> [Edit 3]
Backend Save:           Save Req (Edit 1) ----> Response (Edit 1)
Resulting Editor State: [Edit 3] + [Edit 1] (Outdated state prepended)
```

### The solution

The solution is to unbind the article from the backend state, ensuring
that the article editor is the source of truth and ignoring the
responses. This pull request does this by adding an asynchronous save
functionality. The changes include adding a new `saveArticleAsync` event
and ensuring that the local state is not updated unnecessarily during
asynchronous saves.

```
Time   -->

User Action:      [Edit 1] ---> [Edit 2] ---> [Edit 3]
Backend Save:           Save Req (Edit 1) ----> Response (ignored)
Resulting Editor State: [Edit 3] (Consistent and up-to-date)
```

Added the following two debounced methods

These complementary debounce methods prevent unnecessary re-renders
while ensuring backend is in sync. `saveArticleAsync` preserves the
editor as the source of truth, while `saveArticle` manages periodic
state updates from the backend with a delay large enough to safely
assume that the user has stopped typing
Method | Delay | Behavior
-- | -- | --
`saveArticleAsync` | 400ms | Sends data to backend and ignores the
response
`saveArticle` | 2.5s | Sends data and updates local state with the
backend response

### How to test

1. Remove the following line
https://github.com/chatwoot/chatwoot/blob/dc042f6ddcb4e108795ff83bb57f8d92c6a2b90a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue#L64
1. Update the latency here to 400 (P.S. the diff shows the latency to be
600, but that was added as a stop-gap solution)

https://github.com/chatwoot/chatwoot/blob/dc042f6ddcb4e108795ff83bb57f8d92c6a2b90a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue#L51
1. Set the browser network latency to Slow 3G or 3G
1. Start writing on the editor, try fixing typos with backspace or
moving around with the cursor

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
---
 .../Pages/ArticleEditorPage/ArticleEditor.vue | 27 ++++++++++++++++---
 .../pages/PortalsArticlesEditPage.vue         | 14 ++++++----
 .../modules/helpCenterArticles/actions.js     | 19 +++++++++++++
 3 files changed, 51 insertions(+), 9 deletions(-)

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 f15135737..f5b925fbe 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
@@ -27,6 +27,7 @@ const props = defineProps({
 
 const emit = defineEmits([
   'saveArticle',
+  'saveArticleAsync',
   'goBack',
   'setAuthor',
   'setCategory',
@@ -35,19 +36,37 @@ const emit = defineEmits([
 
 const { t } = useI18n();
 
-const saveArticle = debounce(value => emit('saveArticle', value), 600, false);
+const saveAndSync = value => {
+  emit('saveArticle', value);
+};
+
+// this will only send the data to the backend
+// but will not update the local state preventing unnecessary re-renders
+// since the data is already saved and we keep the editor text as the source of truth
+const quickSave = debounce(
+  value => emit('saveArticleAsync', value),
+  400,
+  false
+);
+
+// 2.5 seconds is enough to know that the user has stopped typing and is taking a pause
+// so we can save the data to the backend and retrieve the updated data
+// this will update the local state with response data
+const saveAndSyncDebounced = debounce(saveAndSync, 2500, false);
 
 const articleTitle = computed({
   get: () => props.article.title,
   set: value => {
-    saveArticle({ title: value });
+    quickSave({ title: value });
+    saveAndSyncDebounced({ title: value });
   },
 });
 
 const articleContent = computed({
   get: () => props.article.content,
   set: content => {
-    saveArticle({ content });
+    quickSave({ content });
+    saveAndSyncDebounced({ content });
   },
 });
 
@@ -93,7 +112,7 @@ const previewArticle = () => {
         />
         <ArticleEditorControls
           :article="article"
-          @save-article="saveArticle"
+          @save-article="saveAndSync"
           @set-author="setAuthorId"
           @set-category="setCategoryId"
         />
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue
index 736b34096..3bb868a58 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue
@@ -34,10 +34,11 @@ const portalLink = computed(() => {
   );
 });
 
-const saveArticle = async ({ ...values }) => {
+const saveArticle = async ({ ...values }, isAsync = false) => {
+  const actionToDispatch = isAsync ? 'articles/updateAsync' : 'articles/update';
   isUpdating.value = true;
   try {
-    await store.dispatch('articles/update', {
+    await store.dispatch(actionToDispatch, {
       portalSlug,
       articleId: articleSlug,
       ...values,
@@ -55,6 +56,10 @@ const saveArticle = async ({ ...values }) => {
   }
 };
 
+const saveArticleAsync = async ({ ...values }) => {
+  saveArticle({ ...values }, true);
+};
+
 const isCategoryArticles = computed(() => {
   return (
     route.name === 'portals_categories_articles_index' ||
@@ -92,9 +97,7 @@ const previewArticle = () => {
   });
 };
 
-onMounted(() => {
-  fetchArticleDetails();
-});
+onMounted(fetchArticleDetails);
 </script>
 
 <template>
@@ -103,6 +106,7 @@ onMounted(() => {
     :is-updating="isUpdating"
     :is-saved="isSaved"
     @save-article="saveArticle"
+    @save-article-async="saveArticleAsync"
     @preview-article="previewArticle"
     @go-back="goBackToArticles"
   />
diff --git a/app/javascript/dashboard/store/modules/helpCenterArticles/actions.js b/app/javascript/dashboard/store/modules/helpCenterArticles/actions.js
index 8052cb133..e481ac2b0 100644
--- a/app/javascript/dashboard/store/modules/helpCenterArticles/actions.js
+++ b/app/javascript/dashboard/store/modules/helpCenterArticles/actions.js
@@ -69,6 +69,25 @@ export const actions = {
     }
   },
 
+  updateAsync: async ({ commit }, { portalSlug, articleId, ...articleObj }) => {
+    commit(types.UPDATE_ARTICLE_FLAG, {
+      uiFlags: { isUpdating: true },
+      articleId,
+    });
+
+    try {
+      await articlesAPI.updateArticle({ portalSlug, articleId, articleObj });
+      return articleId;
+    } catch (error) {
+      return throwErrorMessage(error);
+    } finally {
+      commit(types.UPDATE_ARTICLE_FLAG, {
+        uiFlags: { isUpdating: false },
+        articleId,
+      });
+    }
+  },
+
   update: async ({ commit }, { portalSlug, articleId, ...articleObj }) => {
     commit(types.UPDATE_ARTICLE_FLAG, {
       uiFlags: {

From e9ba4200b296240c00051945762f23ed3743d95f Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 25 Nov 2024 06:16:00 +0530
Subject: [PATCH 06/15] feat: Add custom attributes components (#10467)

---
 .../CustomAttributes/CheckboxAttribute.vue    |  46 ++++
 .../CustomAttributes/DateAttribute.vue        | 148 +++++++++++++
 .../CustomAttributes/ListAttribute.vue        | 100 +++++++++
 .../CustomAttributes/OtherAttribute.vue       | 202 ++++++++++++++++++
 .../story/CustomAttributes.story.vue          |  83 +++++++
 .../CustomAttributes/story/fixtures.js        |  39 ++++
 .../components-next/switch/Switch.story.vue   |  56 +++++
 .../components-next/switch/Switch.vue         |  38 ++++
 .../dashboard/i18n/locale/en/components.json  |   3 +
 .../dashboard/i18n/locale/en/contact.json     |  25 +++
 10 files changed, 740 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/CustomAttributes/CheckboxAttribute.vue
 create mode 100644 app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue
 create mode 100644 app/javascript/dashboard/components-next/CustomAttributes/ListAttribute.vue
 create mode 100644 app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
 create mode 100644 app/javascript/dashboard/components-next/CustomAttributes/story/CustomAttributes.story.vue
 create mode 100644 app/javascript/dashboard/components-next/CustomAttributes/story/fixtures.js
 create mode 100644 app/javascript/dashboard/components-next/switch/Switch.story.vue
 create mode 100644 app/javascript/dashboard/components-next/switch/Switch.vue

diff --git a/app/javascript/dashboard/components-next/CustomAttributes/CheckboxAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/CheckboxAttribute.vue
new file mode 100644
index 000000000..d5ecc3aab
--- /dev/null
+++ b/app/javascript/dashboard/components-next/CustomAttributes/CheckboxAttribute.vue
@@ -0,0 +1,46 @@
+<script setup>
+import { ref } from 'vue';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Switch from 'dashboard/components-next/switch/Switch.vue';
+
+const props = defineProps({
+  attribute: {
+    type: Object,
+    required: true,
+  },
+  isEditingView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update', 'delete']);
+
+const attributeValue = ref(Boolean(props.attribute.value));
+
+const handleChange = value => {
+  emit('update', value);
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center w-full gap-2"
+    :class="{
+      'justify-start': isEditingView,
+      'justify-end': !isEditingView,
+    }"
+  >
+    <Switch v-model="attributeValue" @change="handleChange" />
+    <Button
+      v-if="isEditingView"
+      variant="faded"
+      color="ruby"
+      icon="i-lucide-trash"
+      size="xs"
+      class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+      @click="emit('delete')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue
new file mode 100644
index 000000000..f564f0d1c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue
@@ -0,0 +1,148 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { parseISO } from 'date-fns';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  attribute: {
+    type: Object,
+    required: true,
+  },
+  isEditingView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update', 'delete']);
+
+const { t } = useI18n();
+
+const isEditingValue = ref(false);
+const editedValue = ref(props.attribute.value || '');
+
+const rules = {
+  editedValue: {
+    required,
+    isDate: value => new Date(value).toISOString(),
+  },
+};
+
+const v$ = useVuelidate(rules, { editedValue });
+
+const formattedDate = computed(() => {
+  return props.attribute.value
+    ? new Date(props.attribute.value).toLocaleDateString()
+    : t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.TRIGGER.INPUT');
+});
+
+const hasError = computed(() => v$.value.$errors.length > 0);
+
+const defaultDateValue = computed({
+  get() {
+    const existingDate = editedValue.value ?? props.attribute.value;
+    if (existingDate) return new Date(existingDate).toISOString().slice(0, 10);
+    return isEditingValue.value && !hasError.value
+      ? new Date().toISOString().slice(0, 10)
+      : '';
+  },
+  set(value) {
+    editedValue.value = value ? new Date(value).toISOString() : value;
+  },
+});
+
+const toggleEditValue = value => {
+  isEditingValue.value =
+    typeof value === 'boolean' ? value : !isEditingValue.value;
+
+  if (isEditingValue.value && !editedValue.value) {
+    v$.value.$reset();
+    editedValue.value = new Date().toISOString();
+  }
+};
+
+const handleInputUpdate = async () => {
+  const isValid = await v$.value.$validate();
+  if (!isValid) return;
+
+  emit('update', parseISO(editedValue.value));
+  isEditingValue.value = false;
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center w-full min-w-0 gap-2"
+    :class="{
+      'justify-start': isEditingView,
+      'justify-end': !isEditingView,
+    }"
+  >
+    <span
+      v-if="!isEditingValue"
+      class="min-w-0 text-sm"
+      :class="{
+        'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
+          !isEditingView,
+        'text-n-slate-12 truncate flex-1': isEditingView,
+      }"
+      @click="toggleEditValue(!isEditingView)"
+    >
+      {{ formattedDate }}
+    </span>
+
+    <div
+      v-if="isEditingView && !isEditingValue"
+      class="flex items-center gap-1"
+    >
+      <Button
+        variant="faded"
+        color="slate"
+        icon="i-lucide-pencil"
+        size="xs"
+        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        @click="toggleEditValue(true)"
+      />
+      <Button
+        variant="faded"
+        color="ruby"
+        icon="i-lucide-trash"
+        size="xs"
+        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        @click="emit('delete')"
+      />
+    </div>
+
+    <div
+      v-if="isEditingValue"
+      v-on-clickaway="() => toggleEditValue(false)"
+      class="flex items-center w-full"
+    >
+      <Input
+        v-model="defaultDateValue"
+        type="date"
+        class="w-full [&>p]:absolute [&>p]:mt-0.5 [&>p]:top-8 ltr:[&>p]:left-0 rtl:[&>p]:right-0"
+        :message="
+          hasError
+            ? t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.VALIDATIONS.INVALID_DATE')
+            : ''
+        "
+        :message-type="hasError ? 'error' : 'info'"
+        autofocus
+        custom-input-class="h-8 ltr:rounded-r-none rtl:rounded-l-none"
+        @keyup.enter="handleInputUpdate"
+      />
+      <Button
+        icon="i-lucide-check"
+        :color="hasError ? 'ruby' : 'blue'"
+        size="sm"
+        class="flex-shrink-0 ltr:rounded-l-none rtl:rounded-r-none"
+        @click="handleInputUpdate"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/ListAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/ListAttribute.vue
new file mode 100644
index 000000000..a9831762f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/CustomAttributes/ListAttribute.vue
@@ -0,0 +1,100 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  attribute: {
+    type: Object,
+    required: true,
+  },
+  isEditingView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update', 'delete']);
+
+const { t } = useI18n();
+
+const [showAttributeListDropdown, toggleAttributeListDropdown] = useToggle();
+
+const attributeListMenuItems = computed(() => {
+  return (
+    props.attribute.attributeValues?.map(value => ({
+      label: value,
+      value,
+      action: 'select',
+      isSelected: value === props.attribute.value,
+    })) || []
+  );
+});
+
+const handleAttributeAction = async action => {
+  emit('update', action.value);
+  toggleAttributeListDropdown(false);
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center w-full min-w-0 gap-2"
+    :class="{
+      'justify-start': isEditingView,
+      'justify-end': !isEditingView,
+    }"
+  >
+    <div
+      v-on-clickaway="() => toggleAttributeListDropdown(false)"
+      class="relative flex items-center"
+    >
+      <span
+        class="min-w-0 text-sm"
+        :class="{
+          'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
+            !isEditingView,
+          'text-n-slate-12 truncate flex-1': isEditingView,
+        }"
+        @click="toggleAttributeListDropdown(!props.isEditingView)"
+      >
+        {{
+          attribute.value ||
+          t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.TRIGGER.SELECT')
+        }}
+      </span>
+      <DropdownMenu
+        v-if="showAttributeListDropdown"
+        :menu-items="attributeListMenuItems"
+        show-search
+        class="w-48 mt-2 top-full"
+        :class="{
+          'ltr:right-0 rtl:left-0': !isEditingView,
+          'ltr:left-0 rtl:right-0': isEditingView,
+        }"
+        @action="handleAttributeAction($event)"
+      />
+    </div>
+
+    <div v-if="isEditingView" class="flex items-center gap-1">
+      <Button
+        variant="faded"
+        color="slate"
+        icon="i-lucide-pencil"
+        size="xs"
+        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        @click="toggleAttributeListDropdown()"
+      />
+      <Button
+        variant="faded"
+        color="ruby"
+        icon="i-lucide-trash"
+        size="xs"
+        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        @click="emit('delete')"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
new file mode 100644
index 000000000..8b5b538c3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
@@ -0,0 +1,202 @@
+<!-- Attribute type "Text, URL, Number" -->
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { isValidURL } from 'dashboard/helper/URLHelper.js';
+import { getRegexp } from 'shared/helpers/Validators';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  attribute: {
+    type: Object,
+    required: true,
+  },
+  isEditingView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update', 'delete']);
+
+const { t } = useI18n();
+const isEditingValue = ref(false);
+const editedValue = ref(props.attribute.value || '');
+
+const isAttributeTypeLink = computed(
+  () => props.attribute.attributeDisplayType === 'link'
+);
+
+const isAttributeTypeText = computed(
+  () => props.attribute.attributeDisplayType === 'text'
+);
+
+const isAttributeTypeNumber = computed(
+  () => props.attribute.attributeDisplayType === 'number'
+);
+
+const rules = computed(() => ({
+  editedValue: {
+    required,
+    ...(isAttributeTypeLink.value && {
+      url: value => !value || isValidURL(value),
+    }),
+    ...(isAttributeTypeText.value &&
+      props.attribute.regexPattern && {
+        regexValidation: value => {
+          if (!value) return true;
+          return getRegexp(props.attribute.regexPattern).test(value);
+        },
+      }),
+  },
+}));
+
+const v$ = useVuelidate(rules, { editedValue });
+
+const hasError = computed(() => v$.value.$error);
+
+const attributeErrorMessage = computed(() => {
+  if (!hasError.value) return '';
+
+  if (isAttributeTypeLink.value && v$.value.editedValue.url?.$invalid) {
+    return t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.VALIDATIONS.INVALID_URL');
+  }
+
+  if (
+    isAttributeTypeText.value &&
+    props.attribute.regexPattern &&
+    v$.value.editedValue.regexValidation?.$invalid
+  ) {
+    return (
+      props.attribute.regexCue ||
+      t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.VALIDATIONS.INVALID_INPUT')
+    );
+  }
+
+  if (isAttributeTypeNumber.value && v$.value.editedValue.required?.$invalid) {
+    return t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.VALIDATIONS.INVALID_NUMBER');
+  }
+
+  return t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.VALIDATIONS.REQUIRED');
+});
+
+const getInputType = computed(() => {
+  switch (props.attribute.attributeDisplayType) {
+    case 'link':
+      return 'url';
+    case 'number':
+      return 'number';
+    default:
+      return 'text';
+  }
+});
+
+const toggleEditValue = value => {
+  isEditingValue.value =
+    typeof value === 'boolean' ? value : !isEditingValue.value;
+  if (isEditingValue.value) {
+    v$.value.$reset();
+    editedValue.value = props.attribute.value || '';
+  }
+};
+
+const handleInputUpdate = async () => {
+  const isValid = await v$.value.$validate();
+  if (!isValid) return;
+
+  emit('update', editedValue.value);
+  toggleEditValue(false);
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center w-full min-w-0 gap-2"
+    :class="{
+      'justify-start': isEditingView,
+      'justify-end': !isEditingView,
+    }"
+  >
+    <span
+      v-if="!isEditingValue"
+      class="min-w-0 text-sm"
+      :class="{
+        'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
+          !isEditingView,
+        'text-n-slate-12 truncate flex-1':
+          isEditingView && !isAttributeTypeLink,
+        'truncate flex-1 hover:text-n-brand text-n-blue-text':
+          isEditingView && isAttributeTypeLink,
+      }"
+      @click="toggleEditValue(!isEditingView)"
+    >
+      <a
+        v-if="isAttributeTypeLink && attribute.value && isEditingView"
+        :href="attribute.value"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="hover:underline"
+        @click.stop
+      >
+        {{ attribute.value }}
+      </a>
+      <template v-else>
+        {{
+          attribute.value ||
+          t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.TRIGGER.INPUT')
+        }}
+      </template>
+    </span>
+
+    <div
+      v-if="isEditingView && !isEditingValue"
+      class="flex items-center gap-1"
+    >
+      <Button
+        variant="faded"
+        color="slate"
+        icon="i-lucide-pencil"
+        size="xs"
+        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        @click="toggleEditValue(true)"
+      />
+      <Button
+        variant="faded"
+        color="ruby"
+        icon="i-lucide-trash"
+        size="xs"
+        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        @click="emit('delete')"
+      />
+    </div>
+
+    <div
+      v-if="isEditingValue"
+      v-on-clickaway="() => toggleEditValue(false)"
+      class="flex items-center w-full"
+    >
+      <Input
+        v-model="editedValue"
+        :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.TRIGGER.INPUT')"
+        :type="getInputType"
+        class="w-full [&>p]:absolute [&>p]:mt-0.5 [&>p]:top-8 ltr:[&>p]:left-0 rtl:[&>p]:right-0"
+        autofocus
+        :message="attributeErrorMessage"
+        :message-type="hasError ? 'error' : 'info'"
+        custom-input-class="h-8 ltr:rounded-r-none rtl:rounded-l-none"
+        @keyup.enter="handleInputUpdate"
+      />
+      <Button
+        icon="i-lucide-check"
+        :color="hasError ? 'ruby' : 'blue'"
+        size="sm"
+        class="flex-shrink-0 ltr:rounded-l-none rtl:rounded-r-none"
+        @click="handleInputUpdate"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/story/CustomAttributes.story.vue b/app/javascript/dashboard/components-next/CustomAttributes/story/CustomAttributes.story.vue
new file mode 100644
index 000000000..ea87a3f0c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/CustomAttributes/story/CustomAttributes.story.vue
@@ -0,0 +1,83 @@
+<script setup>
+import Attributes from './fixtures';
+
+import OtherAttribute from '../OtherAttribute.vue';
+import ListAttribute from '../ListAttribute.vue';
+import DateAttribute from '../DateAttribute.vue';
+import CheckboxAttribute from '../CheckboxAttribute.vue';
+
+const componentMap = {
+  list: ListAttribute,
+  checkbox: CheckboxAttribute,
+  date: DateAttribute,
+  default: OtherAttribute,
+};
+
+const getCurrentComponent = type => {
+  return componentMap[type] || componentMap.default;
+};
+
+const handleUpdate = (type, value) => {
+  console.log(`${type} updated:`, value);
+};
+
+const handleDelete = type => {
+  console.log(`${type} deleted`);
+};
+</script>
+
+<template>
+  <Story
+    title="Components/CustomAttributes"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Create View">
+      <div class="flex flex-col gap-4 p-4 border rounded-lg border-n-strong">
+        <div
+          v-for="attribute in Attributes"
+          :key="attribute.attributeKey"
+          class="grid grid-cols-[140px,1fr] group-hover/attribute items-center gap-1 min-h-10"
+        >
+          <div class="flex items-center justify-between truncate">
+            <span class="text-sm font-medium text-n-slate-12">
+              {{ attribute.attributeDisplayName }}
+            </span>
+          </div>
+          <component
+            :is="getCurrentComponent(attribute.attributeDisplayType)"
+            :attribute="attribute"
+            @update="
+              value => handleUpdate(attribute.attributeDisplayType, value)
+            "
+            @delete="() => handleDelete(attribute.attributeDisplayType)"
+          />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Saved View">
+      <div class="flex flex-col gap-4 p-4 border rounded-lg border-n-strong">
+        <div
+          v-for="attribute in Attributes"
+          :key="attribute.attributeKey"
+          class="grid grid-cols-[140px,1fr] group-hover/attribute items-center gap-1 min-h-10"
+        >
+          <div class="flex items-center justify-between truncate">
+            <span class="text-sm font-medium text-n-slate-12">
+              {{ attribute.attributeDisplayName }}
+            </span>
+          </div>
+          <component
+            :is="getCurrentComponent(attribute.attributeDisplayType)"
+            :attribute="attribute"
+            is-editing-view
+            @update="
+              value => handleUpdate(attribute.attributeDisplayType, value)
+            "
+            @delete="() => handleDelete(attribute.attributeDisplayType)"
+          />
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/story/fixtures.js b/app/javascript/dashboard/components-next/CustomAttributes/story/fixtures.js
new file mode 100644
index 000000000..7cd600dcf
--- /dev/null
+++ b/app/javascript/dashboard/components-next/CustomAttributes/story/fixtures.js
@@ -0,0 +1,39 @@
+export default [
+  {
+    attributeKey: 'textContact',
+    attributeDisplayName: 'Text Input',
+    attributeDisplayType: 'text',
+    value: 'Sample text value',
+  },
+  {
+    attributeKey: 'linkContact',
+    attributeDisplayName: 'URL Input',
+    attributeDisplayType: 'link',
+    value: 'https://www.chatwoot.com',
+  },
+  {
+    attributeKey: 'numberContact',
+    attributeDisplayName: 'Number Input',
+    attributeDisplayType: 'number',
+    value: '42',
+  },
+  {
+    attributeKey: 'listContact',
+    attributeDisplayName: 'List Input',
+    attributeDisplayType: 'list',
+    value: 'Option 2',
+    attributeValues: ['Option 1', 'Option 2', 'Option 3'],
+  },
+  {
+    attributeKey: 'dateContact',
+    attributeDisplayName: 'Date Input',
+    attributeDisplayType: 'date',
+    value: '2024-03-25T00:00:00.000Z',
+  },
+  {
+    attributeKey: 'checkboxContact',
+    attributeDisplayName: 'Checkbox Input',
+    attributeDisplayType: 'checkbox',
+    value: true,
+  },
+];
diff --git a/app/javascript/dashboard/components-next/switch/Switch.story.vue b/app/javascript/dashboard/components-next/switch/Switch.story.vue
new file mode 100644
index 000000000..9e4f7ae63
--- /dev/null
+++ b/app/javascript/dashboard/components-next/switch/Switch.story.vue
@@ -0,0 +1,56 @@
+<script setup>
+import Switch from './Switch.vue';
+import { ref } from 'vue';
+
+// Default varian
+const isEnabled = ref(false);
+
+// States variant
+const defaultValue = ref(false);
+const checkedValue = ref(true);
+
+// Events variant
+const eventValue = ref(false);
+const lastChange = ref('No changes yet');
+
+const onChange = value => {
+  lastChange.value = `Changed to: ${value} at ${new Date().toLocaleTimeString()}`;
+};
+</script>
+
+<template>
+  <Story title="Components/Switch" :layout="{ type: 'grid', width: '200px' }">
+    <Variant title="Default">
+      <div class="p-2">
+        <Switch v-model="isEnabled" />
+      </div>
+    </Variant>
+
+    <Variant title="States">
+      <div class="p-2 space-y-4">
+        <div class="flex items-center gap-4">
+          <span class="w-20">Default:</span>
+          <Switch v-model="defaultValue" />
+        </div>
+
+        <div class="flex items-center gap-4">
+          <span class="w-20">Checked:</span>
+          <Switch v-model="checkedValue" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Events">
+      <div class="p-2 space-y-4">
+        <Switch v-model="eventValue" @change="onChange" />
+        <div class="text-sm text-gray-600">Last change: {{ lastChange }}</div>
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div class="p-2">
+        <Switch v-model="isEnabled" disabled />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/switch/Switch.vue b/app/javascript/dashboard/components-next/switch/Switch.vue
new file mode 100644
index 000000000..e8f409c0e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/switch/Switch.vue
@@ -0,0 +1,38 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const emit = defineEmits(['change']);
+
+const { t } = useI18n();
+
+const modelValue = defineModel({
+  type: Boolean,
+  default: false,
+});
+
+const updateValue = () => {
+  modelValue.value = !modelValue.value;
+  emit('change', !modelValue.value);
+};
+</script>
+
+<template>
+  <button
+    type="button"
+    class="relative h-4 transition-colors duration-200 ease-in-out rounded-full w-7 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:ring-offset-n-slate-2 focus:ring-offset-2"
+    :class="modelValue ? 'bg-n-brand' : 'bg-n-alpha-1 dark:bg-n-alpha-2'"
+    role="switch"
+    :aria-checked="modelValue"
+    @click="updateValue"
+  >
+    <span class="sr-only">{{ t('SWITCH.TOGGLE') }}</span>
+    <span
+      class="absolute top-px left-0.5 h-3 w-3 transform rounded-full shadow-sm transition-transform duration-200 ease-in-out"
+      :class="
+        modelValue
+          ? 'translate-x-2.5 bg-white'
+          : 'translate-x-0 bg-white dark:bg-n-black'
+      "
+    />
+  </button>
+</template>
diff --git a/app/javascript/dashboard/i18n/locale/en/components.json b/app/javascript/dashboard/i18n/locale/en/components.json
index f5207fde9..69cd57fee 100644
--- a/app/javascript/dashboard/i18n/locale/en/components.json
+++ b/app/javascript/dashboard/i18n/locale/en/components.json
@@ -31,6 +31,9 @@
   "BREADCRUMB": {
     "ARIA_LABEL": "Breadcrumb"
   },
+  "SWITCH": {
+    "TOGGLE": "Toggle switch"
+  },
   "LABEL": {
     "TAG_BUTTON": "tag"
   }
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 28335dcf8..defc28e67 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -442,6 +442,31 @@
       }
     },
     "SIDEBAR": {
+      "ATTRIBUTES": {
+        "SEARCH_PLACEHOLDER": "Search for attributes",
+        "UNUSED_ATTRIBUTES": "{count} Used attribute | {count} Unused attributes",
+        "EMPTY_STATE": "There are no contact custom attributes available in this account. You can create a custom attribute in settings.",
+        "YES": "Yes",
+        "NO": "No",
+        "TRIGGER": {
+          "SELECT": "Select value",
+          "INPUT": "Enter value"
+        },
+        "VALIDATIONS": {
+          "INVALID_NUMBER": "Invalid number",
+          "REQUIRED": "Valid value is required",
+          "INVALID_INPUT": "Invalid input",
+          "INVALID_URL": "Invalid URL",
+          "INVALID_DATE": "Invalid date"
+        },
+        "NO_ATTRIBUTES": "No attributes found",
+        "API": {
+          "SUCCESS_MESSAGE": "Attribute updated successfully",
+          "DELETE_SUCCESS_MESSAGE": "Attribute deleted successfully",
+          "UPDATE_ERROR": "Unable to update attribute. Please try again later",
+          "DELETE_ERROR": "Unable to delete attribute. Please try again later"
+        }
+      },
       "MERGE": {
         "TITLE": "Merge contact",
         "DESCRIPTION": "Combine two profiles into one, including all attributes and conversations. In case of conflict, the primary contact’s attributes will take precedence.",

From c23cd094f9f11515306304529dc3c4b84695a6b5 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 26 Nov 2024 01:22:28 +0530
Subject: [PATCH 07/15] feat(v4): Add filter input components (#10493)

This PR adds three components along with stories

1. MultiSelect - This is used for filter values, allowing multiple values and folding of values where there are too many items
2. SingleSelect - This is used for filter values, allows selecting and toggling a single item
3. FilterSelect - This is used for operators and others, it allows icons and labels as well as toggling them using props. The v-model for this binds just the final value unlike the previous two components with bind the entire object.

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../dropdown-menu/base/DropdownContainer.vue  |   5 +-
 .../filter/inputs/FilterSelect.story.vue      |  66 ++++++++
 .../filter/inputs/FilterSelect.vue            |  76 +++++++++
 .../filter/inputs/MultiSelect.story.vue       |  26 ++++
 .../filter/inputs/MultiSelect.vue             | 146 ++++++++++++++++++
 .../filter/inputs/SingleSelect.story.vue      |  33 ++++
 .../filter/inputs/SingleSelect.vue            | 124 +++++++++++++++
 .../dashboard/i18n/locale/en/components.json  |   4 +-
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  10 ++
 tailwind.config.js                            |   2 +-
 11 files changed, 489 insertions(+), 4 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/filter/inputs/FilterSelect.story.vue
 create mode 100644 app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
 create mode 100644 app/javascript/dashboard/components-next/filter/inputs/MultiSelect.story.vue
 create mode 100644 app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
 create mode 100644 app/javascript/dashboard/components-next/filter/inputs/SingleSelect.story.vue
 create mode 100644 app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue

diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue
index ee81e4b98..a3b53f955 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { useToggle } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
 import { provideDropdownContext } from './provider.js';
 
 const emit = defineEmits(['close']);
@@ -20,9 +21,9 @@ provideDropdownContext({
 </script>
 
 <template>
-  <div class="relative z-20 space-y-2">
+  <div class="relative space-y-2">
     <slot name="trigger" :is-open :toggle="() => toggle()" />
-    <div v-if="isOpen" v-on-clickaway="closeMenu" class="absolute">
+    <div v-if="isOpen" v-on-click-outside="closeMenu" class="absolute">
       <slot />
     </div>
   </div>
diff --git a/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.story.vue b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.story.vue
new file mode 100644
index 000000000..23b76081e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.story.vue
@@ -0,0 +1,66 @@
+<script setup>
+import { ref } from 'vue';
+import FilterSelect from './FilterSelect.vue';
+
+const options = [
+  { value: 'EQUAL_TO', label: 'Equal To', icon: 'i-ph-equals-bold' },
+  {
+    value: 'NOT_EQUAL_TO',
+    label: 'Not Equal To',
+    icon: 'i-ph-not-equals-bold',
+  },
+  { value: 'IS_PRESENT', label: 'Is Present', icon: 'i-ph-member-of-bold' },
+  {
+    value: 'IS_NOT_PRESENT',
+    label: 'Is Not Present',
+    icon: 'i-ph-not-member-of-bold',
+  },
+  { value: 'CONTAINS', label: 'Contains', icon: 'i-ph-superset-of-bold' },
+  {
+    value: 'DOES_NOT_CONTAIN',
+    label: 'Does Not Contain',
+    icon: 'i-ph-not-superset-of-bold',
+  },
+  {
+    value: 'IS_GREATER_THAN',
+    label: 'Is Greater Than',
+    icon: 'i-ph-greater-than-bold',
+  },
+  { value: 'IS_LESS_THAN', label: 'Is Less Than', icon: 'i-ph-less-than-bold' },
+  {
+    value: 'DAYS_BEFORE',
+    label: 'Days Before',
+    icon: 'i-ph-calendar-minus-bold',
+  },
+  {
+    value: 'STARTS_WITH',
+    label: 'Starts With',
+    icon: 'i-ph-caret-line-right-bold',
+  },
+];
+
+const selected = ref(options[0].value);
+</script>
+
+<template>
+  <Story
+    title="Components/Filters/Filter Select"
+    :layout="{ type: 'grid', width: '250px' }"
+  >
+    <Variant title="With Icon & Label">
+      <div class="min-h-[400px]">
+        <FilterSelect v-model="selected" :options="options" />
+      </div>
+    </Variant>
+    <Variant title="Without Icon">
+      <div class="min-h-[400px]">
+        <FilterSelect v-model="selected" hide-icon :options="options" />
+      </div>
+    </Variant>
+    <Variant title="Without Label">
+      <div class="min-h-[400px]">
+        <FilterSelect v-model="selected" hide-label :options="options" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
new file mode 100644
index 000000000..d44316d4a
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
@@ -0,0 +1,76 @@
+<script setup>
+import { computed } from 'vue';
+import DropdownContainer from 'next/dropdown-menu/base/DropdownContainer.vue';
+import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
+import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
+import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
+
+import Button from 'next/button/Button.vue';
+
+// [{label, icon, value}]
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  hideLabel: {
+    type: Boolean,
+    default: false,
+  },
+  hideIcon: {
+    type: Boolean,
+    default: false,
+  },
+  variant: {
+    type: String,
+    default: 'faded',
+  },
+});
+
+const selected = defineModel({
+  type: [String, Number],
+  required: true,
+});
+
+const selectedOption = computed(() => {
+  return props.options.find(o => o.value === selected.value) || {};
+});
+
+const iconToRender = computed(() => {
+  if (props.hideIcon) return null;
+  return selectedOption.value.icon || 'i-lucide-chevron-down';
+});
+
+const updateSelected = newValue => {
+  selected.value = newValue;
+};
+</script>
+
+<template>
+  <DropdownContainer>
+    <template #trigger="{ toggle }">
+      <slot name="trigger" :toggle="toggle">
+        <Button
+          sm
+          slate
+          :variant
+          :icon="iconToRender"
+          :trailing-icon="selectedOption.icon ? false : true"
+          :label="hideLabel ? null : selectedOption.label"
+          @click="toggle"
+        />
+      </slot>
+    </template>
+    <DropdownBody class="top-0 min-w-48 z-[999]">
+      <DropdownSection class="max-h-80 overflow-scroll">
+        <DropdownItem
+          v-for="option in options"
+          :key="option.value"
+          :label="option.label"
+          :icon="option.icon"
+          @click="updateSelected(option.value)"
+        />
+      </DropdownSection>
+    </DropdownBody>
+  </DropdownContainer>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.story.vue b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.story.vue
new file mode 100644
index 000000000..6452945f3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.story.vue
@@ -0,0 +1,26 @@
+<script setup>
+import { ref } from 'vue';
+import MultiSelect from './MultiSelect.vue';
+
+const options = [
+  { name: 'Open', id: 'open' },
+  { name: 'Closed', id: 'closed' },
+  { name: 'Pending', id: 'pending' },
+  { name: 'Resolved', id: 'resolved' },
+  { name: 'Spam', id: 'spam' },
+  { name: 'All', id: 'all' },
+];
+
+const selected = ref([]);
+</script>
+
+<template>
+  <Story
+    title="Components/Filters/Multiselect Input"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <div class="min-h-[400px]">
+      <MultiSelect v-model="selected" :options="options" />
+    </div>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
new file mode 100644
index 000000000..23f3f6c28
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
@@ -0,0 +1,146 @@
+<script setup>
+import { defineModel, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Icon from 'next/icon/Icon.vue';
+import Button from 'next/button/Button.vue';
+import DropdownContainer from 'next/dropdown-menu/base/DropdownContainer.vue';
+import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
+import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
+import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
+
+const { options, maxChips } = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  maxChips: {
+    type: Number,
+    default: 3,
+  },
+});
+
+const { t } = useI18n();
+const selected = defineModel({
+  type: [Array, String],
+  required: true,
+});
+
+const hasItems = computed(() => {
+  if (!selected.value) return false;
+  if (!Array.isArray(selected.value)) return false;
+  if (selected.value.length === 0) return false;
+
+  return true;
+});
+
+const selectedIds = computed(() => {
+  if (!hasItems.value) return [];
+  return selected.value.map(value => value.id);
+});
+
+const selectedItems = computed(() => {
+  // Options has additional properties, so we need to use them directly
+  if (!hasItems.value) return [];
+  return options.filter(option => selectedIds.value.includes(option.id));
+});
+
+const selectedVisibleItems = computed(() => {
+  if (!hasItems.value) return [];
+  // avoid showing "+1 more" coz it takes up space anway, might as well show it
+  if (selectedItems.value.length === maxChips + 1) return selectedItems.value;
+  // if we have more than maxChips then show only maxChips
+  return selectedItems.value.slice(0, maxChips);
+});
+
+const remainingItems = computed(() => {
+  if (!hasItems.value) return [];
+  if (selectedItems.value.length === maxChips + 1) return [];
+  return selectedItems.value.slice(maxChips);
+});
+
+const remainingTooltip = computed(() => {
+  if (!hasItems.value) return '';
+  return remainingItems.value.map(item => item.name).join(', ');
+});
+
+const toggleOption = option => {
+  // Ensure that the `icon` prop is not included, icon is a VNode which has circular references
+  // This causes an error when creating a clone using JSON.parse(JSON.stringify())
+  const optionToToggle = {
+    id: option.id,
+    name: option.name,
+  };
+
+  const idToToggle = optionToToggle.id;
+
+  if (!hasItems.value) {
+    selected.value = [optionToToggle];
+    return;
+  }
+
+  if (selectedIds.value.includes(idToToggle)) {
+    selected.value = selected.value.filter(value => value.id !== idToToggle);
+  } else {
+    selected.value = [...selected.value, optionToToggle];
+  }
+};
+</script>
+
+<template>
+  <DropdownContainer>
+    <template #trigger="{ toggle }">
+      <button
+        v-if="hasItems"
+        class="bg-n-alpha-2 py-2 rounded-lg h-8 flex items-center px-0"
+        @click="toggle"
+      >
+        <div
+          v-for="item in selectedVisibleItems"
+          :key="item.name"
+          class="px-3 border-r rtl:border-l rtl:border-r-0 border-n-weak text-n-slate-12 text-sm flex gap-2 items-center max-w-[100px]"
+        >
+          <Icon v-if="item.icon" :icon="item.icon" class="flex-shrink-0" />
+          <span class="truncate">{{ item.name }}</span>
+        </div>
+        <div
+          v-if="remainingItems.length > 0"
+          v-tooltip.top="remainingTooltip"
+          class="px-3 border-r rtl:border-l rtl:border-r-0 border-n-weak text-n-slate-12 text-sm flex gap-2 items-center max-w-[100px]"
+        >
+          <span class="truncate">{{
+            t('COMBOBOX.MORE', { count: remainingItems.length })
+          }}</span>
+        </div>
+        <div class="flex items-center border-none px-3 gap-2">
+          <Icon icon="i-lucide-plus" />
+        </div>
+      </button>
+      <Button v-else sm slate faded @click="toggle">
+        <template #icon>
+          <Icon icon="i-lucide-plus" class="text-n-slate-11" />
+        </template>
+        <span class="text-n-slate-11">{{ t('COMBOBOX.PLACEHOLDER') }}</span>
+      </Button>
+    </template>
+    <DropdownBody class="top-0 min-w-48 z-[999]">
+      <DropdownSection class="max-h-80 overflow-scroll">
+        <DropdownItem
+          v-for="option in options"
+          :key="option.id"
+          :icon="option.icon"
+          preserve-open
+          @click="toggleOption(option)"
+        >
+          <template #label>
+            {{ option.name }}
+            <Icon
+              v-if="selectedIds.includes(option.id)"
+              icon="i-lucide-check"
+              class="bg-n-blue-text pointer-events-none"
+            />
+          </template>
+        </DropdownItem>
+      </DropdownSection>
+    </DropdownBody>
+  </DropdownContainer>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.story.vue b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.story.vue
new file mode 100644
index 000000000..233a958f2
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.story.vue
@@ -0,0 +1,33 @@
+<script setup>
+import { ref } from 'vue';
+import SingleSelect from './SingleSelect.vue';
+
+const options = [
+  { name: 'Open', id: 'open' },
+  { name: 'Closed', id: 'closed' },
+  { name: 'Pending', id: 'pending' },
+  { name: 'Resolved', id: 'resolved' },
+  { name: 'Spam', id: 'spam' },
+  { name: 'All', id: 'all' },
+];
+
+const selected = ref(options[0]);
+</script>
+
+<template>
+  <Story
+    title="Components/Filters/Single Select Input"
+    :layout="{ type: 'grid', width: '400px' }"
+  >
+    <Variant title="With Search">
+      <div class="min-h-[400px]">
+        <SingleSelect v-model="selected" :options="options" />
+      </div>
+    </Variant>
+    <Variant title="Without Search">
+      <div class="min-h-[400px]">
+        <SingleSelect v-model="selected" disable-search :options="options" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
new file mode 100644
index 000000000..6a79b3438
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
@@ -0,0 +1,124 @@
+<script setup>
+import { defineModel, computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { picoSearch } from '@scmmishra/pico-search';
+import Icon from 'next/icon/Icon.vue';
+import Button from 'next/button/Button.vue';
+import DropdownContainer from 'next/dropdown-menu/base/DropdownContainer.vue';
+import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
+import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
+import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
+
+const { options } = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  disableSearch: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { t } = useI18n();
+const selected = defineModel({
+  type: Object,
+  required: true,
+});
+
+const searchTerm = ref('');
+const searchResults = computed(() => {
+  if (!options) return [];
+  return picoSearch(options, searchTerm.value, ['name']);
+});
+
+const selectedItem = computed(() => {
+  if (!options) return null;
+  if (!selected.value) return null;
+
+  // there are cases where the selected value is an array
+  const optionToSearch = Array.isArray(selected.value)
+    ? selected.value[0]
+    : selected.value;
+  // extract the selected item from the options array
+  // this ensures that options like icon is also included
+  return options.find(option => option.id === optionToSearch.id);
+});
+
+const toggleSelected = option => {
+  // Ensure that the `icon` prop is not included, icon is a VNode which has circular references
+  // This causes an error when creating a clone using JSON.parse(JSON.stringify())
+  const optionToToggle = {
+    id: option.id,
+    name: option.name,
+  };
+
+  if (selected.value && selected.value.id === optionToToggle.id) {
+    selected.value = null;
+  } else {
+    selected.value = optionToToggle;
+  }
+};
+</script>
+
+<template>
+  <DropdownContainer>
+    <template #trigger="{ toggle }">
+      <Button
+        v-if="selectedItem"
+        sm
+        slate
+        faded
+        :icon="selectedItem.icon"
+        :label="selectedItem.name"
+        @click="toggle"
+      />
+      <Button v-else sm slate faded @click="toggle">
+        <template #icon>
+          <Icon icon="i-lucide-plus" class="text-n-slate-11" />
+        </template>
+        <span class="text-n-slate-11">{{ t('COMBOBOX.PLACEHOLDER') }}</span>
+      </Button>
+    </template>
+    <DropdownBody class="top-0 min-w-56 z-[999]">
+      <div v-if="!disableSearch" class="relative">
+        <Icon class="absolute size-4 left-2 top-2" icon="i-lucide-search" />
+        <input
+          v-model="searchTerm"
+          autofocus
+          class="p-1.5 pl-8 text-n-slate-11 bg-n-alpha-1 rounded-lg w-full"
+          :placeholder="t('COMBOBOX.SEARCH_PLACEHOLDER')"
+        />
+      </div>
+      <DropdownSection class="max-h-80 overflow-scroll">
+        <template v-if="searchResults.length">
+          <DropdownItem
+            v-for="option in searchResults"
+            :key="option.id"
+            :icon="option.icon"
+            @click="toggleSelected(option)"
+          >
+            <template #label>
+              {{ option.name }}
+              <Icon
+                v-if="selectedItem && selectedItem.id === option.id"
+                icon="i-lucide-check"
+                class="bg-n-blue-text pointer-events-none"
+              />
+            </template>
+          </DropdownItem>
+        </template>
+        <template v-else-if="searchTerm">
+          <DropdownItem disabled>
+            {{ t('COMBOBOX.EMPTY_SEARCH_RESULTS', { searchTerm: searchTerm }) }}
+          </DropdownItem>
+        </template>
+        <template v-else>
+          <DropdownItem disabled>
+            {{ t('COMBOBOX.EMPTY_STATE') }}
+          </DropdownItem>
+        </template>
+      </DropdownSection>
+    </DropdownBody>
+  </DropdownContainer>
+</template>
diff --git a/app/javascript/dashboard/i18n/locale/en/components.json b/app/javascript/dashboard/i18n/locale/en/components.json
index 69cd57fee..cafedd5fa 100644
--- a/app/javascript/dashboard/i18n/locale/en/components.json
+++ b/app/javascript/dashboard/i18n/locale/en/components.json
@@ -5,8 +5,10 @@
   },
   "COMBOBOX": {
     "PLACEHOLDER": "Select an option...",
+    "EMPTY_SEARCH_RESULTS": "No items found for the search term `{searchTerm}`",
     "EMPTY_STATE": "No results found.",
-    "SEARCH_PLACEHOLDER": "Search..."
+    "SEARCH_PLACEHOLDER": "Search...",
+    "MORE": "+{count} more"
   },
   "DROPDOWN_MENU": {
     "SEARCH_PLACEHOLDER": "Search...",
diff --git a/package.json b/package.json
index fc2de8c7d..a2dac35df 100644
--- a/package.json
+++ b/package.json
@@ -105,6 +105,7 @@
     "@histoire/plugin-vue": "0.17.15",
     "@iconify-json/logos": "^1.2.3",
     "@iconify-json/lucide": "^1.2.11",
+    "@iconify-json/ph": "^1.2.1",
     "@iconify-json/ri": "^1.2.3",
     "@size-limit/file": "^8.2.4",
     "@vitest/coverage-v8": "2.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ed87f5009..0ba6b2391 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -233,6 +233,9 @@ importers:
       '@iconify-json/lucide':
         specifier: ^1.2.11
         version: 1.2.11
+      '@iconify-json/ph':
+        specifier: ^1.2.1
+        version: 1.2.1
       '@iconify-json/ri':
         specifier: ^1.2.3
         version: 1.2.3
@@ -878,6 +881,9 @@ packages:
   '@iconify-json/lucide@1.2.11':
     resolution: {integrity: sha512-dqpbV7+g1qqxtZOHCZKwdKhtYYqEUjFhYiOg/+PcADbjtapoL+bwa1Brn12gAHq5r2K7Mf29xRHOTmZ3UHHOrw==}
 
+  '@iconify-json/ph@1.2.1':
+    resolution: {integrity: sha512-x0DNfwWrS18dbsBYOq3XGiZnGz4CgRyC+YSl/TZvMQiKhIUl1woWqUbMYqqfMNUBzjyk7ulvaRovpRsIlqIf8g==}
+
   '@iconify-json/ri@1.2.3':
     resolution: {integrity: sha512-UVKofd5xkSevGd5K01pvO4NWsu+2C9spu+GxnMZUYymUiaWmpCAxtd22MFSpm6MGf0MP4GCwhDCo1Q8L8oZ9wg==}
 
@@ -5708,6 +5714,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/ph@1.2.1':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/ri@1.2.3':
     dependencies:
       '@iconify/types': 2.0.0
diff --git a/tailwind.config.js b/tailwind.config.js
index 578b963d6..69c4c4bf3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -126,7 +126,7 @@ const tailwindConfig = {
             },
           },
         },
-        ...getIconCollections(['lucide', 'logos', 'ri']),
+        ...getIconCollections(['lucide', 'logos', 'ri', 'ph']),
       },
     }),
   ],

From b0287fe389a8a0dfa2912e790c3008ccb9876923 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 26 Nov 2024 06:03:12 +0530
Subject: [PATCH 08/15] feat: Add conditions row component (#10496)

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .codeclimate.yml                              |   2 +
 .../filter/ConditionRow.story.vue             |  58 ++
 .../components-next/filter/ConditionRow.vue   | 197 +++++++
 .../filter/fixtures/filterTypes.js            | 558 ++++++++++++++++++
 .../dashboard/helper/validations.js           |   2 +-
 tailwind.config.js                            |   6 +
 6 files changed, 822 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/dashboard/components-next/filter/ConditionRow.story.vue
 create mode 100644 app/javascript/dashboard/components-next/filter/ConditionRow.vue
 create mode 100644 app/javascript/dashboard/components-next/filter/fixtures/filterTypes.js

diff --git a/.codeclimate.yml b/.codeclimate.yml
index 5e16262da..213f7d172 100644
--- a/.codeclimate.yml
+++ b/.codeclimate.yml
@@ -57,3 +57,5 @@ exclude_patterns:
   - 'app/javascript/shared/constants/locales.js'
   - 'app/javascript/dashboard/helper/specs/macrosFixtures.js'
   - 'app/javascript/dashboard/routes/dashboard/settings/macros/constants.js'
+  - '**/fixtures/**'
+  - '**/*/fixtures.js'
diff --git a/app/javascript/dashboard/components-next/filter/ConditionRow.story.vue b/app/javascript/dashboard/components-next/filter/ConditionRow.story.vue
new file mode 100644
index 000000000..4c4c3c80b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/ConditionRow.story.vue
@@ -0,0 +1,58 @@
+<script setup>
+import { ref } from 'vue';
+import ConditionRow from './ConditionRow.vue';
+import Button from 'next/button/Button.vue';
+import { filterTypes } from './fixtures/filterTypes.js';
+
+const DEFAULT_FILTER = {
+  attributeKey: 'status',
+  filterOperator: 'equal_to',
+  values: [],
+  queryOperator: 'and',
+};
+
+const filters = ref([{ ...DEFAULT_FILTER }]);
+
+const removeFilter = index => {
+  filters.value.splice(index, 1);
+};
+
+const showQueryOperator = true;
+
+const addFilter = () => {
+  filters.value.push({ ...DEFAULT_FILTER });
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Filters/ConditionRow"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <div class="min-h-[400px] p-2 space-y-2">
+      <template v-for="(filter, index) in filters" :key="`filter-${index}`">
+        <ConditionRow
+          v-if="index === 0"
+          v-model:attribute-key="filter.attributeKey"
+          v-model:filter-operator="filter.filterOperator"
+          v-model:values="filter.values"
+          :show-query-operator="false"
+          :filter-types="filterTypes"
+          @remove="removeFilter(index)"
+        />
+
+        <ConditionRow
+          v-else
+          v-model:attribute-key="filter.attributeKey"
+          v-model:filter-operator="filter.filterOperator"
+          v-model:values="filter.values"
+          v-model:query-operator="filters[index - 1].queryOperator"
+          :show-query-operator
+          :filter-types="filterTypes"
+          @remove="removeFilter(index)"
+        />
+      </template>
+      <Button sm label="Add Filter" @click="addFilter" />
+    </div>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/ConditionRow.vue b/app/javascript/dashboard/components-next/filter/ConditionRow.vue
new file mode 100644
index 000000000..079313933
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/ConditionRow.vue
@@ -0,0 +1,197 @@
+<script setup>
+import { computed, defineModel, h, watch, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Button from 'next/button/Button.vue';
+import FilterSelect from './inputs/FilterSelect.vue';
+import MultiSelect from './inputs/MultiSelect.vue';
+import SingleSelect from './inputs/SingleSelect.vue';
+
+import { validateSingleFilter } from 'dashboard/helper/validations.js';
+
+// filterTypes: import('vue').ComputedRef<FilterType[]>
+const { filterTypes } = defineProps({
+  showQueryOperator: { type: Boolean, default: false },
+  filterTypes: { type: Array, required: true },
+});
+
+const emit = defineEmits(['remove']);
+const { t } = useI18n();
+const showErrors = ref(false);
+
+const attributeKey = defineModel('attributeKey', {
+  type: String,
+  required: true,
+});
+
+const values = defineModel('values', {
+  type: [String, Number, Array, Object],
+  required: true,
+});
+
+const filterOperator = defineModel('filterOperator', {
+  type: String,
+  required: true,
+});
+
+const queryOperator = defineModel('queryOperator', {
+  type: String,
+  required: false,
+  default: undefined,
+  validator: value => ['and', 'or'].includes(value),
+});
+
+const getFilterFromFilterTypes = key =>
+  filterTypes.find(filterObj => filterObj.attributeKey === key);
+
+const currentFilter = computed(() =>
+  getFilterFromFilterTypes(attributeKey.value)
+);
+
+const getOperator = (filter, selectedOperator) => {
+  const operatorFromOptions = filter.filterOperators.find(
+    operator => operator.value === selectedOperator
+  );
+
+  if (!operatorFromOptions) {
+    return filter.filterOperators[0];
+  }
+
+  return operatorFromOptions;
+};
+
+const currentOperator = computed(() =>
+  getOperator(currentFilter.value, filterOperator.value)
+);
+
+const getInputType = (operator, filter) =>
+  operator.inputOverride ?? filter.inputType;
+
+const inputType = computed(() =>
+  getInputType(currentOperator.value, currentFilter.value)
+);
+
+const queryOperatorOptions = computed(() => {
+  return [
+    {
+      label: t(`FILTER.QUERY_DROPDOWN_LABELS.AND`),
+      value: 'and',
+      icon: h('span', { class: 'i-lucide-ampersands !text-n-blue-text' }),
+    },
+    {
+      label: t(`FILTER.QUERY_DROPDOWN_LABELS.OR`),
+      value: 'or',
+      icon: h('span', { class: 'i-woot-logic-or !text-n-blue-text' }),
+    },
+  ];
+});
+
+const booleanOptions = computed(() => [
+  { id: true, name: t('FILTER.ATTRIBUTE_LABELS.TRUE') },
+  { id: false, name: t('FILTER.ATTRIBUTE_LABELS.FALSE') },
+]);
+
+const validationError = computed(() => {
+  return validateSingleFilter({
+    attributeKey: attributeKey.value,
+    filter_operator: filterOperator.value,
+    values: values.value,
+  });
+});
+
+const resetModelOnAttributeKeyChange = newAttributeKey => {
+  /**
+   * Resets the filter values and operator when the attribute key changes. This ensures that
+   * the values and operator remain compatible with the new attribute type. For example,
+   * switching from a text field to a multi-select should reset the value from '' (empty string)
+   * to an empty array.
+   */
+  const filter = getFilterFromFilterTypes(newAttributeKey);
+  const newOperator = getOperator(filter, filterOperator.value);
+  const newInputType = getInputType(newOperator, filter);
+  if (newInputType === 'multiSelect') {
+    values.value = [];
+  } else if (['searchSelect', 'booleanSelect'].includes(newInputType)) {
+    values.value = {};
+  } else {
+    values.value = '';
+  }
+  filterOperator.value = newOperator.value;
+};
+
+watch([attributeKey, values, filterOperator], () => {
+  showErrors.value = false;
+});
+
+const validate = () => {
+  showErrors.value = true;
+  return !validationError.value;
+};
+
+defineExpose({ validate });
+</script>
+
+<template>
+  <li class="list-none">
+    <div
+      class="flex items-center gap-2 rounded-md"
+      :class="{
+        'animate-wiggle': showErrors && validationError,
+      }"
+    >
+      <FilterSelect
+        v-if="showQueryOperator"
+        v-model="queryOperator"
+        variant="faded"
+        hide-icon
+        class="text-sm"
+        :options="queryOperatorOptions"
+      />
+      <FilterSelect
+        v-model="attributeKey"
+        variant="faded"
+        :options="filterTypes"
+        @update:model-value="resetModelOnAttributeKeyChange"
+      />
+      <FilterSelect
+        v-model="filterOperator"
+        variant="ghost"
+        :options="currentFilter.filterOperators"
+      />
+      <template v-if="currentOperator.hasInput">
+        <MultiSelect
+          v-if="inputType === 'multiSelect'"
+          v-model="values"
+          :options="currentFilter.options"
+        />
+        <SingleSelect
+          v-else-if="inputType === 'searchSelect'"
+          v-model="values"
+          :options="currentFilter.options"
+        />
+        <SingleSelect
+          v-else-if="inputType === 'booleanSelect'"
+          v-model="values"
+          disable-search
+          :options="booleanOptions"
+        />
+        <input
+          v-else
+          v-model="values"
+          :type="inputType === 'date' ? 'date' : 'text'"
+          class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base"
+          :placeholder="t('FILTER.INPUT_PLACEHOLDER')"
+        />
+      </template>
+      <Button
+        sm
+        solid
+        slate
+        icon="i-lucide-trash"
+        @click.stop="emit('remove')"
+      />
+    </div>
+    <span v-if="showErrors && validationError" class="text-sm text-n-ruby-11">
+      {{ t(`FILTER.ERRORS.${validationError}`) }}
+    </span>
+  </li>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/fixtures/filterTypes.js b/app/javascript/dashboard/components-next/filter/fixtures/filterTypes.js
new file mode 100644
index 000000000..fcec5eb08
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/fixtures/filterTypes.js
@@ -0,0 +1,558 @@
+export const filterTypes = [
+  {
+    attributeKey: 'status',
+    value: 'status',
+    attributeName: 'Status',
+    label: 'Status',
+    inputType: 'multiSelect',
+    options: [
+      { id: 'open', name: 'Open' },
+      { id: 'resolved', name: 'Resolved' },
+      { id: 'pending', name: 'Pending' },
+      { id: 'snoozed', name: 'Snoozed' },
+      { id: 'all', name: 'All' },
+    ],
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'assignee_id',
+    value: 'assignee_id',
+    attributeName: 'Assignee name',
+    label: 'Assignee name',
+    inputType: 'searchSelect',
+    options: [
+      { id: 14, name: 'Ben Nugent' },
+      { id: 30, name: 'Bruce' },
+      { id: 16, name: 'Cathy Simms' },
+      { id: 7, name: 'Charles Miner' },
+      { id: 10, name: 'Craig D' },
+      { id: 9, name: 'Dan Gore' },
+      { id: 13, name: 'Danny Cordray' },
+      { id: 3, name: 'David Wallace' },
+      { id: 4, name: 'Deangelo Vickers' },
+      { id: 33, name: 'Devon White' },
+      { id: 8, name: 'Ed Truck' },
+      { id: 31, name: 'Frank' },
+      { id: 29, name: 'Gideon' },
+      { id: 24, name: 'Glenn Max' },
+    ],
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+      {
+        value: 'is_present',
+        label: 'Is present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-member-of-bold',
+      },
+      {
+        value: 'is_not_present',
+        label: 'Is not present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-not-member-of',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'team_id',
+    value: 'team_id',
+    attributeName: 'Team name',
+    label: 'Team name',
+    inputType: 'searchSelect',
+    options: [
+      { id: 223, name: '💰 sales' },
+      { id: 224, name: '💼 management' },
+      { id: 225, name: '👩‍💼 administration' },
+      { id: 226, name: '🚛 warehouse' },
+    ],
+    dataType: 'number',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+      {
+        value: 'is_present',
+        label: 'Is present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-member-of-bold',
+      },
+      {
+        value: 'is_not_present',
+        label: 'Is not present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-not-member-of',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'display_id',
+    value: 'display_id',
+    attributeName: 'Conversation identifier',
+    label: 'Conversation identifier',
+    inputType: 'plainText',
+    datatype: 'number',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+      {
+        value: 'contains',
+        label: 'Contains',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-superset-of-bold',
+      },
+      {
+        value: 'does_not_contain',
+        label: 'Does not contain',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-superset-of',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'campaign_id',
+    value: 'campaign_id',
+    attributeName: 'Campaign name',
+    label: 'Campaign name',
+    inputType: 'searchSelect',
+    options: [],
+    datatype: 'number',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+      {
+        value: 'is_present',
+        label: 'Is present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-member-of-bold',
+      },
+      {
+        value: 'is_not_present',
+        label: 'Is not present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-not-member-of',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'labels',
+    value: 'labels',
+    attributeName: 'Labels',
+    label: 'Labels',
+    inputType: 'multiSelect',
+    options: [
+      { id: 'billing', name: 'billing' },
+      { id: 'delivery', name: 'delivery' },
+      { id: 'lead', name: 'lead' },
+      { id: 'ops-handover', name: 'ops-handover' },
+      { id: 'premium-customer', name: 'premium-customer' },
+      { id: 'software', name: 'software' },
+    ],
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+      {
+        value: 'is_present',
+        label: 'Is present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-member-of-bold',
+      },
+      {
+        value: 'is_not_present',
+        label: 'Is not present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-not-member-of',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'referer',
+    value: 'referer',
+    attributeName: 'Referer link',
+    label: 'Referer link',
+    inputType: 'plainText',
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+      {
+        value: 'contains',
+        label: 'Contains',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-superset-of-bold',
+      },
+      {
+        value: 'does_not_contain',
+        label: 'Does not contain',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-superset-of',
+      },
+    ],
+    attributeModel: 'additional',
+  },
+  {
+    attributeKey: 'created_at',
+    value: 'created_at',
+    attributeName: 'Created at',
+    label: 'Created at',
+    inputType: 'date',
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'is_greater_than',
+        label: 'Is greater than',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-greater-than-bold',
+      },
+      {
+        value: 'is_less_than',
+        label: 'Is lesser than',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-less-than-bold',
+      },
+      {
+        value: 'days_before',
+        label: 'Is x days before',
+        hasInput: true,
+        inputOverride: 'plainText',
+        icon: 'i-ph-calendar-minus-bold',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'last_activity_at',
+    value: 'last_activity_at',
+    attributeName: 'Last activity',
+    label: 'Last activity',
+    inputType: 'date',
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'is_greater_than',
+        label: 'Is greater than',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-greater-than-bold',
+      },
+      {
+        value: 'is_less_than',
+        label: 'Is lesser than',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-less-than-bold',
+      },
+      {
+        value: 'days_before',
+        label: 'Is x days before',
+        hasInput: true,
+        inputOverride: 'plainText',
+        icon: 'i-ph-calendar-minus-bold',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'are_you_a_paid_customer',
+    value: 'are_you_a_paid_customer',
+    attributeName: 'Are you a paid customer?',
+    label: 'Are you a paid customer?',
+    inputType: 'booleanSelect',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+    ],
+    options: [],
+    attributeModel: 'customAttributes',
+  },
+  {
+    attributeKey: 'date_of_purchase',
+    value: 'date_of_purchase',
+    attributeName: 'Date of Purchase',
+    label: 'Date of Purchase',
+    inputType: 'date',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+      {
+        value: 'is_present',
+        label: 'Is present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-member-of-bold',
+      },
+      {
+        value: 'is_not_present',
+        label: 'Is not present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-not-member-of',
+      },
+      {
+        value: 'is_greater_than',
+        label: 'Is greater than',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-greater-than-bold',
+      },
+      {
+        value: 'is_less_than',
+        label: 'Is lesser than',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-less-than-bold',
+      },
+    ],
+    options: [],
+    attributeModel: 'customAttributes',
+  },
+  {
+    attributeKey: 'your_website',
+    value: 'your_website',
+    attributeName: 'Your website',
+    label: 'Your website',
+    inputType: 'plainText',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+    ],
+    options: [],
+    attributeModel: 'customAttributes',
+  },
+  {
+    attributeKey: 'are_you_residing_in_india',
+    value: 'are_you_residing_in_india',
+    attributeName: 'Are you residing in India?',
+    label: 'Are you residing in India?',
+    inputType: 'booleanSelect',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+    ],
+    options: [],
+    attributeModel: 'customAttributes',
+  },
+  {
+    attributeKey: 'cloud',
+    value: 'cloud',
+    attributeName: 'Cloud',
+    label: 'Cloud',
+    inputType: 'booleanSelect',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+    ],
+    options: [],
+    attributeModel: 'customAttributes',
+  },
+  {
+    attributeKey: 'license_type',
+    value: 'license_type',
+    attributeName: 'License Type',
+    label: 'License Type',
+    inputType: 'searchSelect',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+    ],
+    options: [
+      {
+        id: 'Personal',
+        name: 'Personal',
+      },
+      {
+        id: 'Enterprise',
+        name: 'Enterprise',
+      },
+      {
+        id: 'Teams',
+        name: 'Teams',
+      },
+      {
+        id: 'Professional',
+        name: 'Professional',
+      },
+    ],
+    attributeModel: 'customAttributes',
+  },
+];
diff --git a/app/javascript/dashboard/helper/validations.js b/app/javascript/dashboard/helper/validations.js
index 352e5397e..155108c61 100644
--- a/app/javascript/dashboard/helper/validations.js
+++ b/app/javascript/dashboard/helper/validations.js
@@ -20,7 +20,7 @@ export const ATLEAST_ONE_ACTION_REQUIRED = 'ATLEAST_ONE_ACTION_REQUIRED';
  *
  * @returns {string|null} An error message if validation fails, or null if validation passes.
  */
-const validateSingleFilter = filter => {
+export const validateSingleFilter = filter => {
   if (!filter.attribute_key) {
     return ATTRIBUTE_KEY_REQUIRED;
   }
diff --git a/tailwind.config.js b/tailwind.config.js
index 69c4c4bf3..9af26b294 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -29,6 +29,7 @@ const tailwindConfig = {
     './app/javascript/shared/**/*.vue',
     './app/javascript/survey/**/*.vue',
     './app/javascript/dashboard/helper/**/*.js',
+    './app/javascript/dashboard/components-next/**/*.js',
     './app/views/**/*.html.erb',
   ],
   theme: {
@@ -112,6 +113,11 @@ const tailwindConfig = {
       collections: {
         woot: {
           icons: {
+            'logic-or': {
+              body: `<rect x="14" y="5" width="2" height="13" rx="1" fill="currentColor"/><rect x="8" y="5" width="2" height="13" rx="1" fill="currentColor"/>`,
+              width: 24,
+              height: 24,
+            },
             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,

From ba1b02e2747e7ce3259777dca22e590e4ab2f52d Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 26 Nov 2024 09:20:33 +0530
Subject: [PATCH 09/15] feat: Add contact empty state components (#10499)

---
 .../EmptyState/ContactEmptyState.story.vue    |  28 +++
 .../Contacts/EmptyState/ContactEmptyState.vue |  51 ++++
 .../EmptyState/contactEmptyStateContent.js    | 228 ++++++++++++++++++
 3 files changed, 307 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.story.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent.js

diff --git a/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.story.vue b/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.story.vue
new file mode 100644
index 000000000..0c1998a84
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.story.vue
@@ -0,0 +1,28 @@
+<script setup>
+import ContactEmptyState from './ContactEmptyState.vue';
+</script>
+
+<template>
+  <Story
+    title="Components/Contacts/EmptyState"
+    :layout="{ type: 'grid', width: '900px' }"
+  >
+    <!-- Default Story -->
+    <Variant title="Default">
+      <ContactEmptyState
+        title="No contacts found"
+        subtitle="Create your first contact to get started"
+        button-label="Add Contact"
+      />
+    </Variant>
+
+    <!-- Without Button -->
+    <Variant title="Without Button">
+      <ContactEmptyState
+        title="No contacts"
+        subtitle="These are your current contacts"
+        :show-button="false"
+      />
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.vue b/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.vue
new file mode 100644
index 000000000..ef555ff7a
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.vue
@@ -0,0 +1,51 @@
+<script setup>
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ContactsCard from 'dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue';
+import contactContent from 'dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent';
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+  showButton: {
+    type: Boolean,
+    default: true,
+  },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <EmptyStateLayout :title="title" :subtitle="subtitle">
+    <template #empty-state-item>
+      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
+        <ContactsCard
+          v-for="contact in contactContent.slice(0, 5)"
+          :id="contact.id"
+          :key="contact.id"
+          :name="contact.name"
+          :email="contact.email"
+          :thumbnail="contact.thumbnail"
+          :phone-number="contact.phoneNumber"
+          :additional-attributes="contact.additionalAttributes"
+          :is-expanded="0 === contact.id"
+          @toggle="toggleExpanded(contact.id)"
+        />
+      </div>
+    </template>
+    <template #actions>
+      <div v-if="showButton">
+        <Button :label="buttonLabel" icon="i-lucide-plus" @click="onClick" />
+      </div>
+    </template>
+  </EmptyStateLayout>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent.js b/app/javascript/dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent.js
new file mode 100644
index 000000000..6d80c9151
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent.js
@@ -0,0 +1,228 @@
+export default [
+  {
+    additionalAttributes: {
+      city: 'Los Angeles',
+      country: 'United States',
+      description:
+        "I'm Candice, a developer focusing on building web solutions. Currently, I’m working as a Product Developer at Chatwoot.",
+      companyName: 'Chatwoot',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'candice-dev',
+        twitter: 'candice_w_dev',
+        facebook: 'candice.dev',
+        linkedin: 'candice-matherson',
+        instagram: 'candice.codes',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'candice.matherson@chatwoot.com',
+    id: 22,
+    name: 'Candice Matherson',
+    phoneNumber: '+14155552671',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {
+      dateContact: '2024-11-11T11:53:09.299Z',
+      linkContact: 'https://example.com',
+      listContact: 'Follow-Up',
+      textContact: 'Hi there!',
+      numberContact: '42',
+      checkboxContact: false,
+    },
+    lastActivityAt: 1712123233,
+    createdAt: 1712123233,
+  },
+  {
+    additionalAttributes: {
+      city: 'San Francisco',
+      country: 'United States',
+      description: 'Passionate about design and user experience.',
+      companyName: 'Designify',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'ophelia-folkard',
+        twitter: 'oph_designs',
+        facebook: 'ophelia.folkard',
+        linkedin: 'ophelia-folkard',
+        instagram: 'ophelia.design',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'ophelia.folkard@designify.com',
+    id: 21,
+    name: 'Ophelia Folkard',
+    phoneNumber: '+14155552672',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {
+      dateContact: '2024-10-05T10:12:34.567Z',
+      linkContact: 'https://designify.com',
+      listContact: 'Prospects',
+      textContact: 'Looking forward to connecting!',
+    },
+    lastActivityAt: 1712123233,
+    createdAt: 1712123233,
+  },
+  {
+    additionalAttributes: {
+      city: 'Austin',
+      country: 'United States',
+      description: 'Avid coder and tech enthusiast.',
+      companyName: 'CodeHub',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'willy_castelot',
+        twitter: 'willy_code',
+        facebook: 'willy.castelot',
+        linkedin: 'willy-castelot',
+        instagram: 'willy.coder',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'willy.castelot@codehub.io',
+    id: 20,
+    name: 'Willy Castelot',
+    phoneNumber: '+14155552673',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {
+      textContact: 'Let’s collaborate!',
+      checkboxContact: true,
+    },
+    lastActivityAt: 1712123233,
+    createdAt: 1712123233,
+  },
+  {
+    additionalAttributes: {
+      city: 'Seattle',
+      country: 'United States',
+      description: 'Product manager with a love for innovation.',
+      companyName: 'InnovaTech',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'elisabeth-d',
+        twitter: 'elisabeth_innova',
+        facebook: 'elisabeth.derington',
+        linkedin: 'elisabeth-derington',
+        instagram: 'elisabeth.innovates',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'elisabeth.derington@innova.com',
+    id: 19,
+    name: 'Elisabeth Derington',
+    phoneNumber: '+14155552674',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {
+      textContact: 'Let’s schedule a call.',
+    },
+    lastActivityAt: 1712123232,
+    createdAt: 1712123232,
+  },
+  {
+    additionalAttributes: {
+      city: 'Chicago',
+      country: 'United States',
+      description: 'Marketing specialist and content creator.',
+      companyName: 'Contently',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'olia-olenchenko',
+        twitter: 'olia_content',
+        facebook: 'olia.olenchenko',
+        linkedin: 'olia-olenchenko',
+        instagram: 'olia.creates',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'olia.olenchenko@contently.com',
+    id: 18,
+    name: 'Olia Olenchenko',
+    phoneNumber: '+14155552675',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {},
+    lastActivityAt: 1712123232,
+    createdAt: 1712123232,
+  },
+  {
+    additionalAttributes: {
+      city: 'Boston',
+      country: 'United States',
+      description: 'SEO expert and analytics enthusiast.',
+      companyName: 'OptiSearch',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'nate-vannuchi',
+        twitter: 'nate_seo',
+        facebook: 'nathaniel.vannuchi',
+        linkedin: 'nathaniel-vannuchi',
+        instagram: 'nate.optimizes',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'nathaniel.vannuchi@optisearch.com',
+    id: 17,
+    name: 'Nathaniel Vannuchi',
+    phoneNumber: '+14155552676',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {},
+    lastActivityAt: 1712123232,
+    createdAt: 1712123232,
+  },
+  {
+    additionalAttributes: {
+      city: 'Denver',
+      country: 'United States',
+      description: 'UI/UX designer with a flair for minimalist designs.',
+      companyName: 'Minimal Designs',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'merrile-petruk',
+        twitter: 'merrile_ux',
+        facebook: 'merrile.petruk',
+        linkedin: 'merrile-petruk',
+        instagram: 'merrile.designs',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'merrile.petruk@minimal.com',
+    id: 16,
+    name: 'Merrile Petruk',
+    phoneNumber: '+14155552677',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {},
+    lastActivityAt: 1712123232,
+    createdAt: 1712123232,
+  },
+  {
+    additionalAttributes: {
+      city: 'Miami',
+      country: 'United States',
+      description: 'Entrepreneur with a background in e-commerce.',
+      companyName: 'Ecom Solutions',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'cordell-d',
+        twitter: 'cordell_entrepreneur',
+        facebook: 'cordell.dalinder',
+        linkedin: 'cordell-dalinder',
+        instagram: 'cordell.ecom',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'cordell.dalinder@ecomsolutions.com',
+    id: 15,
+    name: 'Cordell Dalinder',
+    phoneNumber: '+14155552678',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {},
+    lastActivityAt: 1712123232,
+    createdAt: 1712123232,
+  },
+];

From b9d888d8ab4a827f8a5d21280f26551916e28909 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 26 Nov 2024 09:29:04 +0530
Subject: [PATCH 10/15] feat: Add contact header components (#10498)

---
 .../Contacts/ContactsHeader/ContactHeader.vue |  97 ++++++++++++
 .../components/ContactMoreActions.vue         |  62 ++++++++
 .../components/ContactSortMenu.vue            | 138 ++++++++++++++++++
 .../story/ContactHeader.story.vue             | 106 ++++++++++++++
 .../dashboard/i18n/locale/en/contact.json     |  56 +++++++
 app/javascript/histoire.setup.ts              |   2 +
 6 files changed, 461 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactMoreActions.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsHeader/story/ContactHeader.story.vue

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
new file mode 100644
index 000000000..c9dad651b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
@@ -0,0 +1,97 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import ContactSortMenu from './components/ContactSortMenu.vue';
+import ContactMoreActions from './components/ContactMoreActions.vue';
+
+defineProps({
+  showSearch: {
+    type: Boolean,
+    default: true,
+  },
+  searchValue: {
+    type: String,
+    default: '',
+  },
+  headerTitle: {
+    type: String,
+    required: true,
+  },
+  buttonLabel: {
+    type: String,
+    required: true,
+  },
+  activeSort: {
+    type: String,
+    default: 'last_activity_at',
+  },
+  activeOrdering: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits([
+  'search',
+  'filter',
+  'update:sort',
+  'message',
+  'add',
+  'import',
+  'export',
+]);
+</script>
+
+<template>
+  <header class="sticky top-0 z-10 px-6 xl:px-0">
+    <div
+      class="flex items-center justify-between w-full h-20 gap-2 mx-auto max-w-[900px]"
+    >
+      <span class="text-xl font-medium truncate text-n-slate-12">
+        {{ headerTitle }}
+      </span>
+      <div class="flex items-center flex-shrink-0 gap-4">
+        <div v-if="showSearch" class="flex items-center gap-2">
+          <Input
+            :model-value="searchValue"
+            type="search"
+            :placeholder="$t('CONTACTS_LAYOUT.HEADER.SEARCH_PLACEHOLDER')"
+            :custom-input-class="[
+              'h-8 [&:not(.focus)]:!border-transparent bg-n-alpha-2 dark:bg-n-solid-1 ltr:!pl-8 !py-1 rtl:!pr-8',
+            ]"
+            @input="emit('search', $event.target.value)"
+          >
+            <template #prefix>
+              <Icon
+                icon="i-lucide-search"
+                class="absolute -translate-y-1/2 text-n-slate-11 size-4 top-1/2 ltr:left-2 rtl:right-2"
+              />
+            </template>
+          </Input>
+        </div>
+        <div class="flex items-center gap-2">
+          <Button
+            icon="i-lucide-list-filter"
+            color="slate"
+            size="sm"
+            variant="ghost"
+            @click="emit('filter')"
+          />
+          <ContactSortMenu
+            :active-sort="activeSort"
+            :active-ordering="activeOrdering"
+            @update:sort="emit('update:sort', $event)"
+          />
+          <ContactMoreActions
+            @add="emit('add')"
+            @import="emit('import')"
+            @export="emit('export')"
+          />
+        </div>
+        <div class="w-px h-4 bg-n-strong" />
+        <Button :label="buttonLabel" size="sm" @click="emit('message')" />
+      </div>
+    </div>
+  </header>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactMoreActions.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactMoreActions.vue
new file mode 100644
index 000000000..c37a7854c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactMoreActions.vue
@@ -0,0 +1,62 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const emit = defineEmits(['add', 'import', 'export']);
+
+const { t } = useI18n();
+
+const contactMenuItems = [
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.ADD_CONTACT'),
+    action: 'add',
+    value: 'add',
+    icon: 'i-lucide-plus',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.EXPORT_CONTACT'),
+    action: 'export',
+    value: 'export',
+    icon: 'i-lucide-upload',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.IMPORT_CONTACT'),
+    action: 'import',
+    value: 'import',
+    icon: 'i-lucide-download',
+  },
+];
+const showActionsDropdown = ref(false);
+
+const handleContactAction = ({ action }) => {
+  if (action === 'add') {
+    emit('add');
+  } else if (action === 'import') {
+    emit('import');
+  } else if (action === 'export') {
+    emit('export');
+  }
+};
+</script>
+
+<template>
+  <div v-on-clickaway="() => (showActionsDropdown = false)" class="relative">
+    <Button
+      icon="i-lucide-ellipsis-vertical"
+      color="slate"
+      variant="ghost"
+      size="sm"
+      :class="showActionsDropdown ? 'bg-n-alpha-2' : ''"
+      @click="showActionsDropdown = !showActionsDropdown"
+    />
+    <DropdownMenu
+      v-if="showActionsDropdown"
+      :menu-items="contactMenuItems"
+      class="right-0 mt-1 w-52 top-full"
+      @action="handleContactAction($event)"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue
new file mode 100644
index 000000000..edf4bd70f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue
@@ -0,0 +1,138 @@
+<script setup>
+import { ref, computed, toRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import SelectMenu from 'dashboard/components-next/selectmenu/SelectMenu.vue';
+
+const props = defineProps({
+  activeSort: {
+    type: String,
+    default: 'last_activity_at',
+  },
+  activeOrdering: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:sort']);
+
+const { t } = useI18n();
+
+const isMenuOpen = ref(false);
+
+const sortMenus = [
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.NAME'),
+    value: 'name',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.EMAIL'),
+    value: 'email',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.PHONE_NUMBER'),
+    value: 'phone_number',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.COMPANY'),
+    value: 'company_name',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.COUNTRY'),
+    value: 'country',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.CITY'),
+    value: 'city',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.LAST_ACTIVITY'),
+    value: 'last_activity_at',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.CREATED_AT'),
+    value: 'created_at',
+  },
+];
+
+const orderingMenus = [
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.ORDER.OPTIONS.ASCENDING'),
+    value: '',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.ORDER.OPTIONS.DESCENDING'),
+    value: '-',
+  },
+];
+
+// Converted the props to refs for better reactivity
+const activeSort = toRef(props, 'activeSort');
+
+const activeOrdering = toRef(props, 'activeOrdering');
+
+const activeSortLabel = computed(() => {
+  const selectedMenu = sortMenus.find(menu => menu.value === activeSort.value);
+  return (
+    selectedMenu?.label || t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.LABEL')
+  );
+});
+
+const activeOrderingLabel = computed(() => {
+  const selectedMenu = orderingMenus.find(
+    menu => menu.value === activeOrdering.value
+  );
+  return selectedMenu?.label || t('CONTACTS_LAYOUT.HEADER.ACTIONS.ORDER.LABEL');
+});
+
+const handleSortChange = value => {
+  emit('update:sort', { sort: value, order: props.activeOrdering });
+};
+
+const handleOrderChange = value => {
+  emit('update:sort', { sort: props.activeSort, order: value });
+};
+</script>
+
+<template>
+  <div class="relative">
+    <Button
+      icon="i-lucide-arrow-down-up"
+      color="slate"
+      size="sm"
+      variant="ghost"
+      :class="isMenuOpen ? 'bg-n-alpha-2' : ''"
+      @click="isMenuOpen = !isMenuOpen"
+    />
+    <div
+      v-if="isMenuOpen"
+      v-on-clickaway="() => (isMenuOpen = false)"
+      class="absolute top-full mt-1 right-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
+    >
+      <div class="flex items-center justify-between gap-2">
+        <span class="text-sm text-n-slate-12">
+          {{ t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.LABEL') }}
+        </span>
+        <SelectMenu
+          :model-value="activeSort"
+          :options="sortMenus"
+          :label="activeSortLabel"
+          @update:model-value="handleSortChange"
+        />
+      </div>
+      <div class="flex items-center justify-between gap-2">
+        <span class="text-sm text-n-slate-12">
+          {{ t('CONTACTS_LAYOUT.HEADER.ACTIONS.ORDER.LABEL') }}
+        </span>
+        <SelectMenu
+          :model-value="activeOrdering"
+          :options="orderingMenus"
+          :label="activeOrderingLabel"
+          @update:model-value="handleOrderChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/story/ContactHeader.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/story/ContactHeader.story.vue
new file mode 100644
index 000000000..a89aa724c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/story/ContactHeader.story.vue
@@ -0,0 +1,106 @@
+<script setup>
+import { ref } from 'vue';
+import ContactHeader from '../ContactHeader.vue';
+
+// Base state controls
+const searchValue = ref('');
+const activeSort = ref('last_activity_at');
+const activeOrdering = ref('');
+
+const onSearch = value => {
+  searchValue.value = value;
+  console.log('🔍 Search:', value);
+};
+
+const onSort = ({ sort, order }) => {
+  activeSort.value = sort;
+  activeOrdering.value = order;
+  console.log('🔄 Sort changed:', { sort, order });
+};
+
+const onFilter = () => {
+  console.log('🏷️ Filter clicked');
+};
+
+const onMessage = () => {
+  console.log('💬 Message clicked');
+};
+
+const onAdd = () => {
+  console.log('➕ Add contact clicked');
+};
+
+const onImport = () => {
+  console.log('📥 Import contacts clicked');
+};
+
+const onExport = () => {
+  console.log('📤 Export contacts clicked');
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Contacts/ContactHeader"
+    :layout="{ type: 'grid', width: '900px' }"
+  >
+    <Variant title="Default">
+      <div class="w-full h-[400px]">
+        <ContactHeader
+          header-title="Contacts"
+          button-label="Message"
+          :search-value="searchValue"
+          :active-sort="activeSort"
+          :active-ordering="activeOrdering"
+          @search="onSearch"
+          @filter="onFilter"
+          @update:sort="onSort"
+          @message="onMessage"
+          @add="onAdd"
+          @import="onImport"
+          @export="onExport"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty State">
+      <div class="w-full">
+        <ContactHeader
+          :show-search="false"
+          header-title="Contacts"
+          button-label="Message"
+          :search-value="searchValue"
+          :active-sort="activeSort"
+          :active-ordering="activeOrdering"
+          @search="onSearch"
+          @filter="onFilter"
+          @update:sort="onSort"
+          @message="onMessage"
+          @add="onAdd"
+          @import="onImport"
+          @export="onExport"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Segment View">
+      <div class="w-full">
+        <ContactHeader
+          :show-search="false"
+          header-title="Segment: VIP Customers"
+          button-label="Message"
+          :search-value="searchValue"
+          :active-sort="activeSort"
+          :active-ordering="activeOrdering"
+          @search="onSearch"
+          @filter="onFilter"
+          @update:sort="onSort"
+          @message="onMessage"
+          @add="onAdd"
+          @import="onImport"
+          @export="onExport"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index defc28e67..9a33b1f99 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -388,6 +388,62 @@
   },
 
   "CONTACTS_LAYOUT": {
+    "HEADER": {
+      "TITLE": "Contacts",
+      "SEARCH_TITLE": "Search contacts",
+      "SEARCH_PLACEHOLDER": "Search...",
+      "MESSAGE_BUTTON": "Message",
+      "BREADCRUMB": {
+        "CONTACTS": "Contacts"
+      },
+      "ACTIONS": {
+        "CONTACT_CREATION": {
+          "ADD_CONTACT": "Add contact",
+          "EXPORT_CONTACT": "Export contacts",
+          "IMPORT_CONTACT": "Import contacts",
+          "SAVE_CONTACT": "Save contact"
+        },
+        "IMPORT_CONTACT": {
+          "TITLE": "Import contacts",
+          "DESCRIPTION": "Import contacts through a CSV file.",
+          "DOWNLOAD_LABEL": "Download a sample csv.",
+          "LABEL": "CSV File:",
+          "CHOOSE_FILE": "Choose file",
+          "CHANGE": "Change",
+          "CANCEL": "Cancel",
+          "IMPORT": "Import",
+          "SUCCESS_MESSAGE": "You will be notified via email when the import is complete.",
+          "ERROR_MESSAGE": "There was an error, please try again"
+        },
+        "EXPORT_CONTACT": {
+          "TITLE": "Export contacts",
+          "DESCRIPTION": "Quickly export a csv file with comprehensive details of your contacts",
+          "CONFIRM": "Export",
+          "SUCCESS_MESSAGE": "Export is in progress. You will be notified on email when the export file is ready to download.",
+          "ERROR_MESSAGE": "There was an error, please try again"
+        },
+        "SORT_BY": {
+          "LABEL": "Sort by",
+          "OPTIONS": {
+            "NAME": "Name",
+            "EMAIL": "Email",
+            "PHONE_NUMBER": "Phone number",
+            "COMPANY": "Company",
+            "COUNTRY": "Country",
+            "CITY": "City",
+            "LAST_ACTIVITY": "Last activity",
+            "CREATED_AT": "Created at"
+          }
+        },
+        "ORDER": {
+          "LABEL": "Ordering",
+          "OPTIONS": {
+            "ASCENDING": "Ascending",
+            "DESCENDING": "Descending"
+          }
+        }
+      }
+    },
     "CARD": {
       "OF": "of",
       "VIEW_DETAILS": "View details",
diff --git a/app/javascript/histoire.setup.ts b/app/javascript/histoire.setup.ts
index 6b7358d59..8ea1a31c2 100644
--- a/app/javascript/histoire.setup.ts
+++ b/app/javascript/histoire.setup.ts
@@ -6,6 +6,7 @@ import { vResizeObserver } from '@vueuse/components';
 import store from 'dashboard/store';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer.js';
+import { directive as onClickaway } from 'vue3-click-away';
 
 const i18n = createI18n({
   legacy: false, // https://github.com/intlify/vue-i18n/issues/1902
@@ -18,4 +19,5 @@ export const setupVue3 = defineSetupVue3(({ app }) => {
   app.use(i18n);
   app.directive('resize', vResizeObserver);
   app.use(VueDOMPurifyHTML, domPurifyConfig);
+  app.directive('on-clickaway', onClickaway);
 });

From 12a82b6459f7ff229bc0c0428616bad7a00582ab Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Tue, 26 Nov 2024 12:56:40 +0800
Subject: [PATCH 11/15] fix: avoid Slack file upload API for fallback messages
 (#10461)

Skip calling the Slack file upload API for message types such as
fallback (e.g., Facebook and location messages) that lack actual file
data in attachments. This prevents unnecessary API calls and resolves a
Sentry error currently occurring in production.

fixes: https://github.com/chatwoot/chatwoot/issues/10460
---
 app/models/attachment.rb                      |  4 ++++
 .../slack/send_on_slack_service.rb            |  2 ++
 .../slack/send_on_slack_service_spec.rb       | 22 +++++++++++++++++++
 spec/models/attachment_spec.rb                | 17 ++++++++++++--
 4 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/app/models/attachment.rb b/app/models/attachment.rb
index b9ed804d3..65e56a21f 100644
--- a/app/models/attachment.rb
+++ b/app/models/attachment.rb
@@ -69,6 +69,10 @@ class Attachment < ApplicationRecord
     end
   end
 
+  def with_attached_file?
+    [:image, :audio, :video, :file].include?(file_type.to_sym)
+  end
+
   private
 
   def file_metadata
diff --git a/lib/integrations/slack/send_on_slack_service.rb b/lib/integrations/slack/send_on_slack_service.rb
index aa9d3ad5b..20a65905c 100644
--- a/lib/integrations/slack/send_on_slack_service.rb
+++ b/lib/integrations/slack/send_on_slack_service.rb
@@ -117,6 +117,8 @@ class Integrations::Slack::SendOnSlackService < Base::SendOnChannelService
   end
 
   def upload_file
+    return unless message.attachments.first.with_attached_file?
+
     result = slack_client.files_upload({
       channels: hook.reference_id,
       initial_comment: 'Attached File!',
diff --git a/spec/lib/integrations/slack/send_on_slack_service_spec.rb b/spec/lib/integrations/slack/send_on_slack_service_spec.rb
index 3474cbfcd..6524154b4 100644
--- a/spec/lib/integrations/slack/send_on_slack_service_spec.rb
+++ b/spec/lib/integrations/slack/send_on_slack_service_spec.rb
@@ -180,6 +180,28 @@ describe Integrations::Slack::SendOnSlackService do
         expect(message.attachments).to be_any
       end
 
+      it 'will not call file_upload if attachment does not have a file (e.g facebook - fallback type)' do
+        expect(slack_client).to receive(:chat_postMessage).with(
+          channel: hook.reference_id,
+          text: message.content,
+          username: "#{message.sender.name} (Contact)",
+          thread_ts: conversation.identifier,
+          icon_url: anything,
+          unfurl_links: true
+        ).and_return(slack_message)
+
+        message.attachments.new(account_id: message.account_id, file_type: :fallback)
+
+        expect(slack_client).not_to receive(:files_upload)
+
+        message.save!
+
+        builder.perform
+
+        expect(message.external_source_id_slack).to eq 'cw-origin-6789.12345'
+        expect(message.attachments).to be_any
+      end
+
       it 'sent a template message on slack' do
         builder = described_class.new(message: template_message, hook: hook)
         allow(builder).to receive(:slack_client).and_return(slack_client)
diff --git a/spec/models/attachment_spec.rb b/spec/models/attachment_spec.rb
index 6b05d26fb..b1d19bd0e 100644
--- a/spec/models/attachment_spec.rb
+++ b/spec/models/attachment_spec.rb
@@ -1,8 +1,9 @@
 require 'rails_helper'
 
 RSpec.describe Attachment do
+  let!(:message) { create(:message) }
+
   describe 'external url validations' do
-    let(:message) { create(:message) }
     let(:attachment) { message.attachments.new(account_id: message.account_id, file_type: :image) }
 
     before do
@@ -25,13 +26,25 @@ RSpec.describe Attachment do
 
   describe 'download_url' do
     it 'returns valid download url' do
-      message = create(:message)
       attachment = message.attachments.new(account_id: message.account_id, file_type: :image)
       attachment.file.attach(io: Rails.root.join('spec/assets/avatar.png').open, filename: 'avatar.png', content_type: 'image/png')
       expect(attachment.download_url).not_to be_nil
     end
   end
 
+  describe 'with_attached_file?' do
+    it 'returns true if its an attachment with file' do
+      attachment = message.attachments.new(account_id: message.account_id, file_type: :image)
+      attachment.file.attach(io: Rails.root.join('spec/assets/avatar.png').open, filename: 'avatar.png', content_type: 'image/png')
+      expect(attachment.with_attached_file?).to be true
+    end
+
+    it 'returns false if its an attachment with out a file' do
+      attachment = message.attachments.new(account_id: message.account_id, file_type: :fallback)
+      expect(attachment.with_attached_file?).to be false
+    end
+  end
+
   describe 'push_event_data for instagram story mentions' do
     let(:instagram_message) { create(:message, :instagram_story_mention) }
 

From d569713b66ce2eab5e46ba103fe88bf6a28c2a77 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 27 Nov 2024 09:29:16 +0530
Subject: [PATCH 12/15] fix: Fix z-index issue on account switcher (#10505)

Co-authored-by: Pranav <pranav@chatwoot.com>
---
 .../components-next/sidebar/SidebarAccountSwitcher.vue          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue b/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
index 03e7a5e53..f232faeab 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
@@ -54,7 +54,7 @@ const emitNewAccount = () => {
         />
       </button>
     </template>
-    <DropdownBody class="min-w-80">
+    <DropdownBody class="min-w-80 z-50">
       <DropdownSection :title="t('SIDEBAR_ITEMS.SWITCH_WORKSPACE')">
         <DropdownItem
           v-for="account in currentUser.accounts"

From 35702457ede5ec01d5e5cf21cca3962cd5d2a3dc Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Wed, 27 Nov 2024 02:10:15 -0800
Subject: [PATCH 13/15] feat: Update design for report pages (#10506)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<img width="1440" alt="Screenshot 2024-11-26 at 8 38 57 PM"
src="https://github.com/user-attachments/assets/f752157c-6134-42cb-8211-ce636ea9e4d6">
<img width="1439" alt="Screenshot 2024-11-26 at 8 40 47 PM"
src="https://github.com/user-attachments/assets/580b1f61-68bc-489b-9081-b0aeb402f31d">

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
---
 .../dashboard/assets/scss/_date-picker.scss   |  12 +-
 .../Campaigns/CampaignLayout.vue              |   4 +-
 .../Contacts/ContactsHeader/ContactHeader.vue |   2 +-
 .../HelpCenter/HelpCenterLayout.vue           |   4 +-
 .../DropdownPrimitives.story.vue              |  10 +-
 .../components-next/sidebar/Sidebar.vue       |  10 +-
 .../dashboard/components/table/Pagination.vue |  20 +--
 .../dashboard/components/table/Table.vue      |  37 +++--
 .../components/widgets/TableHeaderCell.vue    |   2 +-
 .../components/widgets/UserAvatarWithName.vue |  10 +-
 .../conversation/components/SLAEventItem.vue  |   4 +-
 .../components/SLAPopoverCard.vue             |   4 +-
 .../contacts/components/ContactsTable.vue     |   2 +-
 .../settings/reports/AgentReports.vue         |   9 +-
 .../dashboard/settings/reports/BotReports.vue |   5 +-
 .../settings/reports/CsatResponses.vue        |  24 ++--
 .../settings/reports/InboxReports.vue         |   9 +-
 .../dashboard/settings/reports/Index.vue      |  20 +--
 .../settings/reports/LabelReports.vue         |   9 +-
 .../settings/reports/LiveReports.vue          |  19 +--
 .../settings/reports/ReportContainer.vue      |   2 +-
 .../dashboard/settings/reports/SLAReports.vue |  50 +++----
 .../settings/reports/TeamReports.vue          |   9 +-
 .../reports/components/BotMetrics.vue         |   2 +-
 .../components/ChartElements/ChartStats.vue   |   4 +-
 .../reports/components/CsatMetrics.vue        |   6 +-
 .../settings/reports/components/CsatTable.vue |  25 +---
 .../reports/components/FilterSelector.vue     |   2 +-
 .../Filters/v3/ActiveFilterChip.vue           |   1 -
 .../settings/reports/components/Heatmap.vue   |   5 +-
 .../reports/components/ReportHeader.vue       |  17 +++
 .../reports/components/ReportMetricCard.vue   |   9 +-
 .../reports/components/ReportsWrapper.vue     |  85 ++++++++++++
 .../reports/components/SLA/SLAMetricCard.vue  |   8 +-
 .../reports/components/SLA/SLAMetrics.vue     |  10 +-
 .../reports/components/SLA/SLAReportItem.vue  |  13 +-
 .../reports/components/SLA/SLATable.vue       |  16 +--
 .../reports/components/SLA/SLAViewDetails.vue |  35 +++--
 .../reports/components/WootReports.vue        |  55 ++++----
 .../components/overview/AgentTable.vue        |   7 +-
 .../components/overview/MetricCard.vue        |  16 +--
 .../__snapshots__/CSATMetrics.spec.js.snap    |   2 +-
 .../settings/reports/reports.routes.js        | 129 +++---------------
 43 files changed, 361 insertions(+), 363 deletions(-)
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportHeader.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue

diff --git a/app/javascript/dashboard/assets/scss/_date-picker.scss b/app/javascript/dashboard/assets/scss/_date-picker.scss
index 92deab095..2fa577673 100644
--- a/app/javascript/dashboard/assets/scss/_date-picker.scss
+++ b/app/javascript/dashboard/assets/scss/_date-picker.scss
@@ -25,7 +25,7 @@
   }
 
   .mx-input {
-    @apply h-[2.5rem] flex border border-solid border-slate-200 dark:border-slate-600 rounded-md shadow-none;
+    @apply h-[2.5rem] flex border border-solid border-n-weak rounded-md shadow-none;
   }
 
   .mx-input:disabled,
@@ -39,7 +39,7 @@
 }
 
 .mx-datepicker-main {
-  @apply border-0 bg-white dark:bg-slate-800;
+  @apply border-0 bg-n-solid-2 rounded-xl;
 
   .cell {
     &.disabled {
@@ -53,6 +53,14 @@
     }
   }
 
+  .mx-calendar+.mx-calendar {
+    @apply border-l border-n-weak;
+  }
+
+  .mx-datepicker-footer {
+    @apply border border-n-weak;
+  }
+
   .mx-time {
     @apply border-0 bg-white dark:bg-slate-800;
 
diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
index 11006bfe3..3169dbc3e 100644
--- a/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
@@ -22,7 +22,7 @@ const handleButtonClick = () => {
 <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="w-full max-w-[960px] 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 }}
@@ -44,7 +44,7 @@ const handleButtonClick = () => {
       </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">
+      <div class="w-full max-w-[960px] mx-auto py-4">
         <slot name="default" />
       </div>
     </main>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
index c9dad651b..947310a56 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
@@ -46,7 +46,7 @@ const emit = defineEmits([
 <template>
   <header class="sticky top-0 z-10 px-6 xl:px-0">
     <div
-      class="flex items-center justify-between w-full h-20 gap-2 mx-auto max-w-[900px]"
+      class="flex items-center justify-between w-full h-20 gap-2 mx-auto max-w-[960px]"
     >
       <span class="text-xl font-medium truncate text-n-slate-12">
         {{ headerTitle }}
diff --git a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
index d884b3557..b05d5d3f2 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
@@ -60,7 +60,7 @@ const togglePortalSwitcher = () => {
 <template>
   <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 class="w-full max-w-[960px] mx-auto">
         <div
           v-if="showHeaderTitle"
           class="flex items-center justify-start h-20 gap-2"
@@ -95,7 +95,7 @@ const togglePortalSwitcher = () => {
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[900px] mx-auto py-3">
+      <div class="w-full max-w-[960px] mx-auto py-3">
         <slot name="content" />
       </div>
     </main>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue
index c0818283e..085aa0d28 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue
@@ -14,22 +14,22 @@ const menuItems = ref([
   {
     label: 'Contact Support',
     icon: 'i-lucide-life-buoy',
-    click: () => window.alert('Contact Support'),
+    click: () => console.log('Contact Support'),
   },
   {
     label: 'Keyboard Shortcuts',
     icon: 'i-lucide-keyboard',
-    click: () => window.alert('Keyboard Shortcuts'),
+    click: () => console.log('Keyboard Shortcuts'),
   },
   {
     label: 'Profile Settings',
     icon: 'i-lucide-user-pen',
-    click: () => window.alert('Profile Settings'),
+    click: () => console.log('Profile Settings'),
   },
   {
     label: 'Change Appearance',
     icon: 'i-lucide-swatch-book',
-    click: () => window.alert('Change Appearance'),
+    click: () => console.log('Change Appearance'),
   },
   {
     label: 'Open SuperAdmin',
@@ -40,7 +40,7 @@ const menuItems = ref([
   {
     label: 'Log Out',
     icon: 'i-lucide-log-out',
-    click: () => window.alert('Log Out'),
+    click: () => console.log('Log Out'),
   },
 ]);
 </script>
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index 2d4fdf1dd..3f8f15edf 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -249,11 +249,6 @@ const menuItems = computed(() => {
           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'),
@@ -279,6 +274,11 @@ const menuItems = computed(() => {
           label: t('SIDEBAR.REPORTS_SLA'),
           to: accountScopedRoute('sla_reports'),
         },
+        {
+          name: 'Reports Bot',
+          label: t('SIDEBAR.REPORTS_BOT'),
+          to: accountScopedRoute('bot_reports'),
+        },
       ],
     },
     {
diff --git a/app/javascript/dashboard/components/table/Pagination.vue b/app/javascript/dashboard/components/table/Pagination.vue
index 42fd99339..6de3d851c 100644
--- a/app/javascript/dashboard/components/table/Pagination.vue
+++ b/app/javascript/dashboard/components/table/Pagination.vue
@@ -54,7 +54,7 @@ const end = computed(() => {
   <div class="flex items-center justify-between">
     <div class="flex flex-1 items-center justify-between">
       <div>
-        <p class="text-sm text-gray-700">
+        <p class="text-sm text-n-slate-11 mb-0">
           {{ $t('REPORT.PAGINATION.RESULTS', { start, end, total }) }}
         </p>
       </div>
@@ -62,7 +62,7 @@ const end = computed(() => {
         <woot-button
           :disabled="!table.getCanPreviousPage()"
           variant="clear"
-          class="size-8 flex items-center border border-slate-50"
+          class="h-8 border-0 flex items-center"
           color-scheme="secondary"
           @click="table.setPageIndex(0)"
         >
@@ -70,7 +70,7 @@ const end = computed(() => {
         </woot-button>
         <woot-button
           variant="clear"
-          class="size-8 flex items-center border border-slate-50"
+          class="h-8 border-0 flex items-center"
           color-scheme="secondary"
           :disabled="!table.getCanPreviousPage()"
           @click="table.previousPage()"
@@ -81,22 +81,22 @@ const end = computed(() => {
           v-for="page in visiblePages"
           :key="page"
           variant="clear"
-          class="size-8 flex items-center justify-center border text-xs leading-none text-center"
-          :class="page == currentPage ? 'border-woot-500' : 'border-slate-50'"
+          class="h-8 flex items-center justify-center text-xs leading-none text-center"
+          :class="page == currentPage ? 'border-n-brand' : 'border-slate-50'"
           color-scheme="secondary"
           @click="table.setPageIndex(page - 1)"
         >
-          <div
+          <span
             class="text-center"
-            :class="{ 'text-woot-500': page == currentPage }"
+            :class="{ 'text-n-brand': page == currentPage }"
           >
             {{ page }}
-          </div>
+          </span>
         </woot-button>
         <woot-button
           :disabled="!table.getCanNextPage()"
           variant="clear"
-          class="size-8 flex items-center border border-slate-50"
+          class="h-8 border-0 flex items-center"
           color-scheme="secondary"
           @click="table.nextPage()"
         >
@@ -105,7 +105,7 @@ const end = computed(() => {
         <woot-button
           :disabled="!table.getCanNextPage()"
           variant="clear"
-          class="size-8 flex items-center border border-slate-50"
+          class="h-8 border-0 flex items-center"
           color-scheme="secondary"
           @click="table.setPageIndex(table.getPageCount() - 1)"
         >
diff --git a/app/javascript/dashboard/components/table/Table.vue b/app/javascript/dashboard/components/table/Table.vue
index 3b84735d1..5936fa314 100644
--- a/app/javascript/dashboard/components/table/Table.vue
+++ b/app/javascript/dashboard/components/table/Table.vue
@@ -1,8 +1,9 @@
 <script setup>
 import { FlexRender } from '@tanstack/vue-table';
 import SortButton from './SortButton.vue';
+import { computed } from 'vue';
 
-defineProps({
+const props = defineProps({
   table: {
     type: Object,
     required: true,
@@ -11,22 +12,36 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  type: {
+    type: String,
+    default: 'relaxed',
+  },
 });
+
+const isRelaxed = computed(() => props.type === 'relaxed');
+const headerClass = computed(() =>
+  isRelaxed.value
+    ? 'first:rounded-bl-lg first:rounded-tl-lg last:rounded-br-lg last:rounded-tr-lg'
+    : ''
+);
 </script>
 
 <template>
   <table :class="{ 'table-fixed': fixed }">
-    <thead
-      class="sticky top-0 z-10 border-b border-slate-50 dark:border-slate-800 bg-slate-25 dark:bg-slate-800"
-    >
-      <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+    <thead class="sticky top-0 z-10 bg-n-slate-1">
+      <tr
+        v-for="headerGroup in table.getHeaderGroups()"
+        :key="headerGroup.id"
+        class="rounded-xl"
+      >
         <th
           v-for="header in headerGroup.headers"
           :key="header.id"
           :style="{
             width: `${header.getSize()}px`,
           }"
-          class="text-left py-3 px-5 dark:bg-slate-800 text-slate-800 dark:text-slate-200 font-normal text-xs"
+          class="text-left py-3 px-5 font-normal text-sm"
+          :class="headerClass"
           @click="header.column.getCanSort() && header.column.toggleSorting()"
         >
           <div
@@ -43,16 +58,12 @@ defineProps({
       </tr>
     </thead>
 
-    <tbody class="divide-y divide-slate-25 dark:divide-slate-900">
-      <tr
-        v-for="row in table.getRowModel().rows"
-        :key="row.id"
-        class="hover:bg-slate-25 dark:hover:bg-slate-800"
-      >
+    <tbody class="divide-y divide-n-slate-2">
+      <tr v-for="row in table.getRowModel().rows" :key="row.id">
         <td
           v-for="cell in row.getVisibleCells()"
           :key="cell.id"
-          class="py-2 px-5"
+          :class="isRelaxed ? 'py-4 px-5' : 'py-2 px-5'"
         >
           <FlexRender
             :render="cell.column.columnDef.cell"
diff --git a/app/javascript/dashboard/components/widgets/TableHeaderCell.vue b/app/javascript/dashboard/components/widgets/TableHeaderCell.vue
index ce3cb21ac..e838b477d 100644
--- a/app/javascript/dashboard/components/widgets/TableHeaderCell.vue
+++ b/app/javascript/dashboard/components/widgets/TableHeaderCell.vue
@@ -29,7 +29,7 @@ const spanClass = computed(() => {
 
 <template>
   <div
-    class="flex items-center px-0 py-2 text-xs font-medium text-left uppercase text-slate-700 dark:text-slate-100 rtl:text-right"
+    class="flex items-center px-0 py-2 text-xs font-medium text-right uppercase text-n-slate-11 rtl:text-left"
     :class="spanClass"
   >
     <slot>
diff --git a/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue b/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
index 23553f4c2..1e78c334d 100644
--- a/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
+++ b/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
@@ -4,7 +4,7 @@ import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 defineProps({
   user: {
     type: Object,
-    default: () => {},
+    default: () => ({}),
   },
   size: {
     type: String,
@@ -12,7 +12,7 @@ defineProps({
   },
   textClass: {
     type: String,
-    default: 'text-xs text-slate-600',
+    default: 'text-sm text-n-slate-12',
   },
 });
 </script>
@@ -25,11 +25,11 @@ defineProps({
       :username="user.name"
       :status="user.availability_status"
     />
-    <h6
-      class="my-0 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis text-capitalize"
+    <span
+      class="my-0 overflow-hidden whitespace-nowrap text-ellipsis text-capitalize"
       :class="textClass"
     >
       {{ user.name }}
-    </h6>
+    </span>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/SLAEventItem.vue b/app/javascript/dashboard/components/widgets/conversation/components/SLAEventItem.vue
index 82774cbe0..1f513d78b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLAEventItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLAEventItem.vue
@@ -18,7 +18,7 @@ const formatDate = timestamp =>
 <template>
   <div class="flex justify-between w-full">
     <span
-      class="text-sm sticky top-0 h-fit font-normal tracking-[-0.6%] min-w-[140px] truncate text-slate-600 dark:text-slate-200"
+      class="text-sm sticky top-0 h-fit font-normal tracking-[-0.6%] min-w-[140px] truncate text-n-slate-11"
     >
       {{ label }}
     </span>
@@ -26,7 +26,7 @@ const formatDate = timestamp =>
       <span
         v-for="item in items"
         :key="item.id"
-        class="text-sm font-normal text-slate-900 dark:text-slate-25 text-right tabular-nums"
+        class="text-sm font-normal text-n-slate-12 text-right tabular-nums"
       >
         {{ formatDate(item.created_at) }}
       </span>
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue b/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
index 6b1c66d02..3355905c6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
@@ -40,9 +40,9 @@ const toggleShowAllNRT = () => {
 
 <template>
   <div
-    class="absolute flex flex-col items-start bg-white dark:bg-slate-800 z-50 p-4 border border-solid border-slate-75 dark:border-slate-700 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
+    class="absolute flex flex-col items-start border-n-strong bg-n-solid-3 w-96 backdrop-blur-[100px] px-6 py-5 z-50 shadow rounded-xl gap-4 max-h-96 overflow-auto"
   >
-    <span class="text-sm font-medium text-slate-900 dark:text-slate-25">
+    <span class="text-sm font-medium text-n-slate-12">
       {{ $t('SLA.EVENTS.TITLE') }}
     </span>
     <SLAEventItem
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
index d27c2763b..067682939 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -171,7 +171,7 @@ const table = useVueTable({
 <template>
   <section class="flex-1 h-full overflow-auto bg-white dark:bg-slate-900">
     <section class="overflow-x-auto">
-      <Table fixed :table="table" />
+      <Table fixed :table="table" type="compact" />
     </section>
 
     <EmptyState
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue
index 7a7374994..b7b4f6845 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue
@@ -1,11 +1,5 @@
-<script>
+<script setup>
 import WootReports from './components/WootReports.vue';
-
-export default {
-  components: {
-    WootReports,
-  },
-};
 </script>
 
 <template>
@@ -15,5 +9,6 @@ export default {
     getter-key="agents/getAgents"
     action-key="agents/get"
     :download-button-label="$t('REPORT.DOWNLOAD_AGENT_REPORTS')"
+    :report-title="$t('AGENT_REPORTS.HEADER')"
   />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
index e35f68f29..772a6810a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
@@ -5,11 +5,13 @@ import ReportFilterSelector from './components/FilterSelector.vue';
 import { GROUP_BY_FILTER } from './constants';
 import ReportContainer from './ReportContainer.vue';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
+import ReportHeader from './components/ReportHeader.vue';
 
 export default {
   name: 'BotReports',
   components: {
     BotMetrics,
+    ReportHeader,
     ReportFilterSelector,
     ReportContainer,
   },
@@ -84,7 +86,8 @@ export default {
 </script>
 
 <template>
-  <div class="flex-1 p-4 overflow-auto">
+  <ReportHeader :header-title="$t('BOT_REPORTS.HEADER')" />
+  <div class="flex flex-col gap-4">
     <ReportFilterSelector
       :show-agents-filter="false"
       show-group-by-filter
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
index 202e22fc9..58a014165 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
@@ -7,6 +7,8 @@ import ReportFilterSelector from './components/FilterSelector.vue';
 import { generateFileName } from '../../../../helper/downloadHelper';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
+import V4Button from 'dashboard/components-next/button/Button.vue';
+import ReportHeader from './components/ReportHeader.vue';
 
 export default {
   name: 'CsatResponses',
@@ -14,6 +16,8 @@ export default {
     CsatMetrics,
     CsatTable,
     ReportFilterSelector,
+    ReportHeader,
+    V4Button,
   },
   data() {
     return {
@@ -108,7 +112,16 @@ export default {
 </script>
 
 <template>
-  <div class="flex-1 p-4 overflow-auto">
+  <ReportHeader :header-title="$t('CSAT_REPORTS.HEADER')">
+    <V4Button
+      :label="$t('CSAT_REPORTS.DOWNLOAD')"
+      icon="i-ph-download-simple"
+      size="sm"
+      @click="downloadReports"
+    />
+  </ReportHeader>
+
+  <div class="flex flex-col gap-4">
     <ReportFilterSelector
       show-agents-filter
       show-inbox-filter
@@ -117,14 +130,7 @@ export default {
       :show-business-hours-switch="false"
       @filter-change="onFilterChange"
     />
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="arrow-download"
-      @click="downloadReports"
-    >
-      {{ $t('CSAT_REPORTS.DOWNLOAD') }}
-    </woot-button>
+
     <CsatMetrics :filters="requestPayload" />
     <CsatTable :page-index="pageIndex" @page-change="onPageNumberChange" />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue
index 96d573829..100094f65 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue
@@ -1,11 +1,5 @@
-<script>
+<script setup>
 import WootReports from './components/WootReports.vue';
-
-export default {
-  components: {
-    WootReports,
-  },
-};
 </script>
 
 <template>
@@ -15,5 +9,6 @@ export default {
     getter-key="inboxes/getInboxes"
     action-key="inboxes/get"
     :download-button-label="$t('INBOX_REPORTS.DOWNLOAD_INBOX_REPORTS')"
+    :report-title="$t('INBOX_REPORTS.HEADER')"
   />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
index 523266dd7..858ceb4ad 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
@@ -1,4 +1,5 @@
 <script>
+import V4Button from 'dashboard/components-next/button/Button.vue';
 import { useAlert, useTrack } from 'dashboard/composables';
 import fromUnixTime from 'date-fns/fromUnixTime';
 import format from 'date-fns/format';
@@ -6,6 +7,7 @@ import ReportFilterSelector from './components/FilterSelector.vue';
 import { GROUP_BY_FILTER } from './constants';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 import ReportContainer from './ReportContainer.vue';
+import ReportHeader from './components/ReportHeader.vue';
 
 const REPORTS_KEYS = {
   CONVERSATIONS: 'conversations_count',
@@ -20,8 +22,10 @@ const REPORTS_KEYS = {
 export default {
   name: 'ConversationReports',
   components: {
+    ReportHeader,
     ReportFilterSelector,
     ReportContainer,
+    V4Button,
   },
   data() {
     return {
@@ -98,15 +102,15 @@ export default {
 </script>
 
 <template>
-  <div class="flex-1 p-4 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="arrow-download"
+  <ReportHeader :header-title="$t('REPORT.HEADER')">
+    <V4Button
+      :label="$t('REPORT.DOWNLOAD_AGENT_REPORTS')"
+      icon="i-ph-download-simple"
+      size="sm"
       @click="downloadAgentReports"
-    >
-      {{ $t('REPORT.DOWNLOAD_AGENT_REPORTS') }}
-    </woot-button>
+    />
+  </ReportHeader>
+  <div class="flex flex-col gap-3">
     <ReportFilterSelector
       :show-agents-filter="false"
       show-group-by-filter
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue
index d3792bd79..04d7dc7ff 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue
@@ -1,11 +1,5 @@
-<script>
+<script setup>
 import WootReports from './components/WootReports.vue';
-
-export default {
-  components: {
-    WootReports,
-  },
-};
 </script>
 
 <template>
@@ -15,5 +9,6 @@ export default {
     getter-key="labels/getLabels"
     action-key="labels/get"
     :download-button-label="$t('LABEL_REPORTS.DOWNLOAD_LABEL_REPORTS')"
+    :report-title="$t('LABEL_REPORTS.HEADER')"
   />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
index 7c182a12e..2d39d00f4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
@@ -10,10 +10,12 @@ import getUnixTime from 'date-fns/getUnixTime';
 import startOfDay from 'date-fns/startOfDay';
 import subDays from 'date-fns/subDays';
 import { emitter } from 'shared/helpers/mitt';
+import ReportHeader from './components/ReportHeader.vue';
 
 export default {
   name: 'LiveReports',
   components: {
+    ReportHeader,
     AgentTable,
     MetricCard,
     ReportHeatmap,
@@ -123,8 +125,9 @@ export default {
 </script>
 
 <template>
-  <div class="flex-1 p-4 overflow-auto">
-    <div class="flex flex-col items-center md:flex-row">
+  <ReportHeader :header-title="$t('OVERVIEW_REPORTS.HEADER')" />
+  <div class="flex flex-col gap-4 pb-6">
+    <div class="flex flex-col items-center md:flex-row gap-4">
       <div
         class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
       >
@@ -140,10 +143,10 @@ export default {
             :key="index"
             class="flex-1 min-w-0 pb-2"
           >
-            <h3 class="text-base text-slate-700 dark:text-slate-100">
+            <h3 class="text-base text-n-slate-11">
               {{ name }}
             </h3>
-            <p class="text-woot-800 dark:text-woot-300 text-3xl mb-0 mt-1">
+            <p class="text-n-slate-12 text-3xl mb-0 mt-1">
               {{ metric }}
             </p>
           </div>
@@ -156,17 +159,17 @@ export default {
             :key="index"
             class="flex-1 min-w-0 pb-2"
           >
-            <h3 class="text-base text-slate-700 dark:text-slate-100">
+            <h3 class="text-base text-n-slate-11">
               {{ name }}
             </h3>
-            <p class="text-woot-800 dark:text-woot-300 text-3xl mb-0 mt-1">
+            <p class="text-n-slate-12 text-3xl mb-0 mt-1">
               {{ metric }}
             </p>
           </div>
         </MetricCard>
       </div>
     </div>
-    <div class="flex flex-row flex-wrap max-w-full ml-auto mr-auto">
+    <div class="flex flex-row flex-wrap max-w-full">
       <MetricCard :header="$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.HEADER')">
         <template #control>
           <woot-button
@@ -185,7 +188,7 @@ export default {
         />
       </MetricCard>
     </div>
-    <div class="flex flex-row flex-wrap max-w-full ml-auto mr-auto">
+    <div class="flex flex-row flex-wrap max-w-full">
       <MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.HEADER')">
         <AgentTable
           :agents="agents"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
index 0de1fb40d..f89d1ac4d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
@@ -135,7 +135,7 @@ export default {
 
 <template>
   <div
-    class="grid grid-cols-1 p-2 bg-white border rounded-md md:grid-cols-2 lg:grid-cols-3 dark:bg-slate-800 border-slate-100 dark:border-slate-700"
+    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 px-6 py-5 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2"
   >
     <div
       v-for="metric in metrics"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
index 07b283cf5..826b12fec 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
@@ -1,13 +1,17 @@
 <script>
+import V4Button from 'dashboard/components-next/button/Button.vue';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import SLAMetrics from './components/SLA/SLAMetrics.vue';
 import SLATable from './components/SLA/SLATable.vue';
 import SLAReportFilters from './components/SLA/SLAReportFilters.vue';
 import { generateFileName } from 'dashboard/helper/downloadHelper';
+import ReportHeader from './components/ReportHeader.vue';
 export default {
   name: 'SLAReports',
   components: {
+    V4Button,
+    ReportHeader,
     SLAMetrics,
     SLATable,
     SLAReportFilters,
@@ -77,30 +81,28 @@ export default {
 </script>
 
 <template>
-  <div class="flex flex-col flex-1 gap-6 px-4 pt-4 overflow-auto">
-    <SLAReportFilters @filter-change="onFilterChange" />
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="arrow-download"
+  <ReportHeader :header-title="$t('SLA_REPORTS.HEADER')">
+    <V4Button
+      :label="$t('SLA_REPORTS.DOWNLOAD_SLA_REPORTS')"
+      icon="i-ph-download-simple"
+      size="sm"
       @click="downloadReports"
-    >
-      {{ $t('SLA_REPORTS.DOWNLOAD_SLA_REPORTS') }}
-    </woot-button>
-    <div class="flex flex-col gap-6">
-      <SLAMetrics
-        :hit-rate="slaMetrics.hitRate"
-        :no-of-breaches="slaMetrics.numberOfSLAMisses"
-        :no-of-conversations="slaMetrics.numberOfConversations"
-        :is-loading="uiFlags.isFetchingMetrics"
-      />
-      <SLATable
-        :sla-reports="slaReports"
-        :is-loading="uiFlags.isFetching"
-        :current-page="Number(slaMeta.currentPage)"
-        :total-count="Number(slaMeta.count)"
-        @page-change="onPageChange"
-      />
-    </div>
+    />
+  </ReportHeader>
+  <div class="flex flex-col flex-1 gap-6">
+    <SLAReportFilters @filter-change="onFilterChange" />
+    <SLAMetrics
+      :hit-rate="slaMetrics.hitRate"
+      :no-of-breaches="slaMetrics.numberOfSLAMisses"
+      :no-of-conversations="slaMetrics.numberOfConversations"
+      :is-loading="uiFlags.isFetchingMetrics"
+    />
+    <SLATable
+      :sla-reports="slaReports"
+      :is-loading="uiFlags.isFetching"
+      :current-page="Number(slaMeta.currentPage)"
+      :total-count="Number(slaMeta.count)"
+      @page-change="onPageChange"
+    />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
index 523186b8d..d441c986b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
@@ -1,11 +1,5 @@
-<script>
+<script setup>
 import WootReports from './components/WootReports.vue';
-
-export default {
-  components: {
-    WootReports,
-  },
-};
 </script>
 
 <template>
@@ -15,5 +9,6 @@ export default {
     getter-key="teams/getTeams"
     action-key="teams/get"
     :download-button-label="$t('TEAM_REPORTS.DOWNLOAD_TEAM_REPORTS')"
+    :report-title="$t('TEAM_REPORTS.HEADER')"
   />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue
index fe8e30ba8..e8d8eccf9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue
@@ -38,7 +38,7 @@ onMounted(fetchMetrics);
 
 <template>
   <div
-    class="flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700"
+    class="flex flex-wrap mx-0 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-5"
   >
     <ReportMetricCard
       :label="$t('BOT_REPORTS.METRIC.TOTAL_CONVERSATIONS.LABEL')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue
index 2ebeeb28e..74258898e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue
@@ -29,11 +29,11 @@ const trendColor = (value, key) => {
 </script>
 
 <template>
-  <div class="text-slate-900 dark:text-slate-100">
+  <div class="text-n-slate-11">
     <span class="text-sm">
       {{ metric.NAME }}
     </span>
-    <div class="flex items-end">
+    <div class="flex items-end text-n-slate-12">
       <div class="text-xl font-medium">
         {{ displayMetric(metric.KEY) }}
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
index 22c738f4d..f33ba9f37 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
@@ -86,7 +86,7 @@ export default {
 <!-- Added ref for writing specs -->
 <template>
   <div
-    class="flex-col lg:flex-row flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700"
+    class="flex-col lg:flex-row flex flex-wrap mx-0 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-8 gap-4"
   >
     <CsatMetricCard
       :label="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL')"
@@ -111,10 +111,10 @@ export default {
     <div
       v-if="metrics.totalResponseCount && !ratingFilterEnabled"
       ref="csatBarChart"
-      class="w-full md:w-1/2 md:max-w-[50%] flex-1 rtl:[direction:initial] p-4"
+      class="w-full md:w-1/2 md:max-w-[50%] flex-1 rtl:[direction:initial]"
     >
       <h3
-        class="flex items-center m-0 text-xs font-medium md:text-sm text-slate-800 dark:text-slate-100"
+        class="flex items-center m-0 text-xs font-medium md:text-sm text-n-slate-12"
       >
         <div class="flex flex-row-reverse justify-end">
           <div
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
index d870f3808..b66ec20f6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
@@ -145,14 +145,13 @@ const table = useVueTable({
 </script>
 
 <template>
-  <div class="csat--table-container">
-    <Table
-      :table="table"
-      class="max-h-[calc(100vh-21.875rem)] border bg-white dark:bg-slate-900 border-slate-50 dark:border-slate-800"
-    />
+  <div
+    class="shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-5"
+  >
+    <Table :table="table" class="max-h-[calc(100vh-21.875rem)]" />
     <div
       v-show="!tableData.length"
-      class="csat--empty-records text-slate-600 dark:text-slate-200 bg-white dark:bg-slate-900 border border-t-0 border-solid border-slate-75 dark:border-slate-700"
+      class="h-48 flex items-center justify-center text-n-slate-12 text-sm"
     >
       {{ $t('CSAT_REPORTS.NO_RECORDS') }}
     </div>
@@ -161,17 +160,3 @@ const table = useVueTable({
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.csat--empty-records {
-  align-items: center;
-  // border: 1px solid var(--color-border);
-  border-top: 0;
-  display: flex;
-  font-size: var(--font-size-small);
-  height: 12.5rem;
-  justify-content: center;
-  margin-top: -1px;
-  width: 100%;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
index 6eae61836..4e66f6350 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
@@ -178,7 +178,7 @@ export default {
 </script>
 
 <template>
-  <div class="flex flex-col justify-between gap-3 mb-4 md:flex-row">
+  <div class="flex flex-col justify-between gap-3 md:flex-row">
     <div
       class="w-full grid gap-y-2 gap-x-1.5 grid-cols-[repeat(auto-fill,minmax(250px,1fr))]"
     >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
index 3a02deb73..2a21ab1be 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
@@ -53,7 +53,6 @@ const closeDropdown = () => emit('closeDropdown');
   <FilterButton
     right-icon="chevron-down"
     :button-text="name"
-    class="bg-slate-50 dark:bg-slate-800 hover:bg-slate-75 dark:hover:bg-slate-800"
     @click="toggleDropdown"
   >
     <template v-if="showMenu && activeFilterType === type" #dropdown>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
index 472eac272..a8c1229f4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
@@ -63,8 +63,7 @@ function getDayOfTheWeek(date) {
   return days[dayIndex];
 }
 function getHeatmapLevelClass(value) {
-  if (!value)
-    return 'outline-slate-100 dark:outline-slate-700 dark:bg-slate-700/40 bg-slate-50/50';
+  if (!value) return 'outline-n-container dark:bg-slate-700/40 bg-slate-50/50';
 
   let level = [...quantileRange.value, Infinity].findIndex(
     range => value <= range && value > 0
@@ -73,7 +72,7 @@ function getHeatmapLevelClass(value) {
   if (level > 6) level = 5;
 
   if (level === 0) {
-    return 'outline-slate-100 dark:outline-slate-700 dark:bg-slate-700/40 bg-slate-50/50';
+    return 'outline-n-container dark:bg-slate-700/40 bg-slate-50/50';
   }
 
   const classes = [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportHeader.vue
new file mode 100644
index 000000000..a42442a9d
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportHeader.vue
@@ -0,0 +1,17 @@
+<script setup>
+defineProps({
+  headerTitle: {
+    required: true,
+    type: String,
+  },
+});
+</script>
+
+<template>
+  <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>
+    <slot />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue
index dff88eae9..4c6aff970 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue
@@ -22,26 +22,23 @@ defineProps({
 <template>
   <div
     data-test-id="reportMetricContainer"
-    class="p-4 m-0"
     :class="{
       'grayscale pointer-events-none opacity-30': disabled,
     }"
   >
-    <h3
-      class="flex items-center m-0 text-sm font-medium text-slate-800 dark:text-slate-100"
-    >
+    <h3 class="flex items-center m-0 text-sm font-medium text-n-slate-11">
       <span data-test-id="reportMetricLabel">{{ label }}</span>
       <fluent-icon
         v-tooltip="infoText"
         data-test-id="reportMetricInfo"
         size="14"
         icon="info"
-        class="text-slate-500 dark:text-slate-200 my-0 mx-1 mt-0.5"
+        class="text-n-slate-11 my-0 mx-1 mt-0.5"
       />
     </h3>
     <h4
       data-test-id="reportMetricValue"
-      class="mt-1 mb-0 text-3xl font-thin text-slate-700 dark:text-slate-100"
+      class="mt-1 mb-0 text-2xl text-n-slate-12"
     >
       {{ value }}
     </h4>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
new file mode 100644
index 000000000..2be08487d
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
@@ -0,0 +1,85 @@
+<template>
+  <div
+    class="reports--wrapper overflow-auto bg-n-background w-full px-8 xl:px-0"
+  >
+    <div class="max-w-[960px] mx-auto pb-12">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.reports--wrapper {
+  ::v-deep {
+    .multiselect--disabled {
+      @apply opacity-50 border border-n-weak rounded-md cursor-not-allowed;
+    }
+
+    .multiselect__content-wrapper {
+      @apply bg-n-solid-2 border border-n-weak text-n-slate-12;
+    }
+
+    .multiselect__tags {
+      @apply bg-n-slate-1 border border-n-weak m-0 min-h-[2.875rem] pt-0;
+
+      input[type='text'] {
+        @apply bg-n-alpha-3 border-n-weak !min-h-[2.375rem] !h-[2.375rem] !ps-0.5 !py-0 !text-sm;
+      }
+    }
+
+    .multiselect__placeholder {
+      @apply text-n-slate-11;
+    }
+
+    .multiselect__select {
+      @apply min-h-0;
+    }
+
+    .multiselect__single {
+      @apply bg-n-alpha-3 text-n-slate-11;
+    }
+
+    .multiselect__input {
+      @apply text-sm !h-[2.375rem] mb-0 !py-0;
+    }
+
+    .multiselect__tags,
+    .multiselect__input,
+    .multiselect {
+      @apply bg-n-alpha-3 !border-n-weak text-n-slate-12 rounded-lg text-sm min-h-[2.5rem];
+    }
+
+    .mx-input-wrapper {
+      @apply bg-n-alpha-3 !border-n-weak text-n-slate-12 rounded-lg text-sm;
+
+      input {
+        @apply border-n-weak text-sm;
+      }
+    }
+
+    .multiselect__option {
+      @apply flex items-center;
+    }
+
+    .mx-datepicker {
+      .mx-input {
+        @apply bg-n-alpha-3;
+      }
+
+      .mx-input-wrapper input::placeholder {
+        @apply text-n-slate-11;
+      }
+
+      .mx-input-wrapper input {
+        @apply text-n-slate-11;
+      }
+    }
+
+    .multiselect--active:not(.multiselect--above) .multiselect__current,
+    .multiselect--active:not(.multiselect--above) .multiselect__input,
+    .multiselect--active:not(.multiselect--above) .multiselect__tags {
+      @apply rounded-b-none;
+    }
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
index 6a4bafc2e..2111b26e3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
@@ -24,7 +24,7 @@ export default {
 <template>
   <div class="flex flex-col gap-2 items-start justify-center min-w-[10rem]">
     <span
-      class="inline-flex items-center gap-1 text-sm font-medium text-slate-700 dark:text-slate-200"
+      class="inline-flex items-center gap-1 text-sm font-medium text-n-slate-11"
     >
       {{ label }}
       <fluent-icon
@@ -32,15 +32,15 @@ export default {
         size="14"
         icon="information"
         type="outline"
-        class="flex flex-shrink-0 text-sm font-normal sm:font-medium text-slate-500 dark:text-slate-500"
+        class="flex flex-shrink-0 text-sm font-normal sm:font-medium text-n-slate-10"
       />
     </span>
     <div
       v-if="isLoading"
-      class="w-12 h-6 mb-0.5 rounded-md bg-slate-50 dark:bg-slate-800 animate-pulse"
+      class="w-12 h-6 mb-0.5 rounded-md bg-n-slate-3 animate-pulse"
     />
 
-    <span v-else class="text-2xl font-medium text-slate-900 dark:text-slate-25">
+    <span v-else class="text-2xl font-medium text-n-slate-12">
       {{ value }}
     </span>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
index 9f638f3ac..433c30d49 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
@@ -22,7 +22,7 @@ defineProps({
 
 <template>
   <div
-    class="flex sm:flex-row flex-col w-full gap-4 sm:gap-14 bg-white dark:bg-slate-900 rounded-xl border border-slate-75 dark:border-slate-700/50 px-6 py-4"
+    class="flex sm:flex-row flex-col w-full gap-4 sm:gap-14 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-5"
   >
     <SLAMetricCard
       :label="$t('SLA_REPORTS.METRICS.HIT_RATE.LABEL')"
@@ -31,18 +31,14 @@ defineProps({
       :is-loading="isLoading"
     />
 
-    <div
-      class="w-full sm:w-px h-full border border-slate-75 dark:border-slate-700/50"
-    />
+    <div class="w-full sm:w-px bg-n-strong" />
     <SLAMetricCard
       :label="$t('SLA_REPORTS.METRICS.NO_OF_MISSES.LABEL')"
       :value="noOfBreaches"
       :tool-tip="$t('SLA_REPORTS.METRICS.NO_OF_MISSES.TOOLTIP')"
       :is-loading="isLoading"
     />
-    <div
-      class="w-full sm:w-px h-full border border-slate-75 dark:border-slate-700/50"
-    />
+    <div class="w-full sm:w-px bg-n-strong" />
     <SLAMetricCard
       :label="$t('SLA_REPORTS.METRICS.NO_OF_CONVERSATIONS.LABEL')"
       :value="noOfConversations"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
index a85dcffbf..1cd18226e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
@@ -31,22 +31,23 @@ const conversationLabels = computed(() => {
 
 <template>
   <div
-    class="grid items-center content-center w-full h-16 grid-cols-12 gap-4 px-6 py-0 bg-white border-b last:border-b-0 last:rounded-b-xl border-slate-75 dark:border-slate-800/50 dark:bg-slate-900"
+    class="grid items-center content-center w-full h-16 grid-cols-12 gap-4 px-6 py-0 border-b last:border-b-0 last:rounded-b-xl border-n-weak"
   >
     <div
       class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
     >
-      <span class="text-slate-700 dark:text-slate-200">
+      <span class="text-n-slate-12">
         {{ `#${conversationId} ` }}
       </span>
-      <span class="text-slate-600 dark:text-slate-300">
+      <span class="text-slate-11">
         {{ $t('SLA_REPORTS.WITH') }}
       </span>
-      <span class="capitalize truncate text-slate-700 dark:text-slate-200">{{
+      <span class="capitalize truncate text-n-slate-12">{{
         conversation.contact.name
       }}</span>
       <CardLabels
-        class="w-[80%]"
+        v-if="conversationLabels.length"
+        class="w-[60%]"
         :conversation-id="conversationId"
         :conversation-labels="conversationLabels"
       />
@@ -61,7 +62,7 @@ const conversationLabels = computed(() => {
         v-if="conversation.assignee"
         :user="conversation.assignee"
       />
-      <span v-else class="text-slate-600 dark:text-slate-200"> --- </span>
+      <span v-else class="text-n-slate-11"> --- </span>
     </div>
     <SLAViewDetails :sla-events="slaEvents" />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
index 8354a0f8d..503ccf442 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
@@ -57,10 +57,10 @@ export default {
 <template>
   <div>
     <div
-      class="min-w-full border rounded-xl border-slate-75 dark:border-slate-700/50"
+      class="min-w-full shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 p-6"
     >
       <div
-        class="grid content-center h-12 grid-cols-12 gap-4 px-6 py-0 border-b bg-slate-25 border-slate-75 dark:border-slate-800 rounded-t-xl dark:bg-slate-900"
+        class="grid content-center h-12 grid-cols-12 gap-4 px-6 py-0 bg-n-slate-2 rounded-md"
       >
         <TableHeaderCell
           :span="6"
@@ -74,13 +74,10 @@ export default {
           :span="2"
           :label="$t('SLA_REPORTS.TABLE.HEADER.AGENT')"
         />
-        <TableHeaderCell :span="2" label="" />
+        <TableHeaderCell :span="1" label="" />
       </div>
 
-      <div
-        v-if="isLoading"
-        class="flex items-center justify-center h-32 bg-white rounded-b-xl dark:bg-slate-900"
-      >
+      <div v-if="isLoading" class="flex items-center justify-center h-32">
         <Spinner />
         <span>{{ $t('SLA_REPORTS.LOADING') }}</span>
       </div>
@@ -94,10 +91,7 @@ export default {
           :sla-events="slaReport.sla_events"
         />
       </div>
-      <div
-        v-else
-        class="flex items-center justify-center h-32 bg-white rounded-b-xl dark:bg-slate-900"
-      >
+      <div v-else class="flex items-center justify-center h-32">
         {{ $t('SLA_REPORTS.NO_RECORDS') }}
       </div>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
index ff84c2f1c..eb7a60dd1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
@@ -29,24 +29,23 @@ export default {
 </script>
 
 <template>
-  <div v-on-clickaway="closeSlaEvents" class="label-wrap">
-    <div
-      class="flex items-center col-span-2 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-    >
-      <div class="relative">
-        <woot-button
-          color-scheme="secondary"
-          variant="link"
-          @click="openSlaEvents"
-        >
-          {{ $t('SLA_REPORTS.TABLE.VIEW_DETAILS') }}
-        </woot-button>
-        <SLAPopoverCard
-          v-if="showSlaPopoverCard"
-          :sla-missed-events="slaEvents"
-          class="right-0"
-        />
-      </div>
+  <div
+    v-on-clickaway="closeSlaEvents"
+    class="flex items-center col-span-2 text-slate-11 justify-end"
+  >
+    <div class="relative">
+      <woot-button
+        color-scheme="secondary"
+        variant="link"
+        @click="openSlaEvents"
+      >
+        {{ $t('SLA_REPORTS.TABLE.VIEW_DETAILS') }}
+      </woot-button>
+      <SLAPopoverCard
+        v-if="showSlaPopoverCard"
+        :sla-missed-events="slaEvents"
+        class="right-0"
+      />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
index 06b8c76ee..b0e6b84a0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
@@ -1,10 +1,12 @@
 <script>
+import V4Button from 'dashboard/components-next/button/Button.vue';
 import { useAlert, useTrack } from 'dashboard/composables';
 import ReportFilters from './ReportFilters.vue';
 import ReportContainer from '../ReportContainer.vue';
 import { GROUP_BY_FILTER } from '../constants';
 import { generateFileName } from '../../../../../helper/downloadHelper';
 import { REPORTS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
+import ReportHeader from './ReportHeader.vue';
 
 const GROUP_BY_OPTIONS = {
   DAY: [{ id: 1, groupByKey: 'REPORT.GROUPING_OPTIONS.DAY' }],
@@ -26,6 +28,8 @@ const GROUP_BY_OPTIONS = {
 
 export default {
   components: {
+    ReportHeader,
+    V4Button,
     ReportFilters,
     ReportContainer,
   },
@@ -46,6 +50,10 @@ export default {
       type: String,
       default: 'Download Reports',
     },
+    reportTitle: {
+      type: String,
+      default: 'Download Reports',
+    },
   },
   data() {
     return {
@@ -198,30 +206,29 @@ export default {
 </script>
 
 <template>
-  <div class="flex-1 p-4 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="arrow-download"
+  <ReportHeader :header-title="reportTitle">
+    <V4Button
+      :label="downloadButtonLabel"
+      icon="i-ph-download-simple"
+      size="sm"
       @click="downloadReports"
-    >
-      {{ downloadButtonLabel }}
-    </woot-button>
-    <ReportFilters
-      v-if="filterItemsList"
-      :type="type"
-      :filter-items-list="filterItemsList"
-      :group-by-filter-items-list="groupByfilterItemsList"
-      :selected-group-by-filter="selectedGroupByFilter"
-      @date-range-change="onDateRangeChange"
-      @filter-change="onFilterChange"
-      @group-by-filter-change="onGroupByFilterChange"
-      @business-hours-toggle="onBusinessHoursToggle"
     />
-    <ReportContainer
-      v-if="filterItemsList.length"
-      :group-by="groupBy"
-      :report-keys="reportKeys"
-    />
-  </div>
+  </ReportHeader>
+
+  <ReportFilters
+    v-if="filterItemsList"
+    :type="type"
+    :filter-items-list="filterItemsList"
+    :group-by-filter-items-list="groupByfilterItemsList"
+    :selected-group-by-filter="selectedGroupByFilter"
+    @date-range-change="onDateRangeChange"
+    @filter-change="onFilterChange"
+    @group-by-filter-change="onGroupByFilterChange"
+    @business-hours-toggle="onBusinessHoursToggle"
+  />
+  <ReportContainer
+    v-if="filterItemsList.length"
+    :group-by="groupBy"
+    :report-keys="reportKeys"
+  />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
index d176b6377..810db7029 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
@@ -144,10 +144,7 @@ const table = useVueTable({
 
 <template>
   <div class="agent-table-container">
-    <Table
-      :table="table"
-      class="max-h-[calc(100vh-21.875rem)] border border-slate-50 dark:border-slate-800"
-    />
+    <Table :table="table" class="max-h-[calc(100vh-21.875rem)]" />
     <Pagination class="mt-2" :table="table" />
     <div v-if="isLoading" class="agents-loader">
       <Spinner />
@@ -169,7 +166,7 @@ const table = useVueTable({
   .ve-table {
     &::v-deep {
       th.ve-table-header-th {
-        font-size: var(--font-size-mini) !important;
+        @apply text-sm rounded-xl;
         padding: var(--space-small) var(--space-two) !important;
       }
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
index 78ca70927..83b93d61f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
@@ -25,25 +25,23 @@ export default {
 
 <template>
   <div
-    class="metric-card mb-2 p flex flex-col m-2 p-4 border border-solid overflow-hidden rounded-md flex-grow shadow-sm text-slate-700 dark:text-slate-100 bg-white dark:bg-slate-800 border-slate-75 dark:border-slate-700 min-h-[10rem]"
+    class="flex flex-col m-0.5 px-6 py-5 overflow-hidden rounded-xl flex-grow text-n-slate-12 shadow outline-1 outline outline-n-container bg-n-solid-2 min-h-[10rem]"
   >
     <div
       class="card-header grid w-full mb-6 grid-cols-[repeat(auto-fit,minmax(max-content,50%))] gap-y-2"
     >
       <slot name="header">
-        <div class="flex items-center gap-0.5 flex-row">
-          <h5
-            class="mb-0 text-slate-800 dark:text-slate-100 font-medium text-xl"
-          >
+        <div class="flex items-center gap-2 flex-row">
+          <h5 class="mb-0 text-n-slate-12 font-medium text-lg">
             {{ header }}
           </h5>
           <span
-            class="flex flex-row items-center pr-2 pl-2 m-1 rounded-sm text-green-400 dark:text-green-400 text-xs bg-green-100/30 dark:bg-green-100/20"
+            class="flex flex-row items-center py-0.5 px-2 rounded bg-n-teal-3 text-xs"
           >
             <span
-              class="bg-green-500 dark:bg-green-500 h-1 w-1 rounded-full mr-1 rtl:mr-0 rtl:ml-0"
+              class="bg-n-teal-9 h-1 w-1 rounded-full mr-1 rtl:mr-0 rtl:ml-0"
             />
-            <span>
+            <span class="text-xs text-n-teal-11">
               {{ $t('OVERVIEW_REPORTS.LIVE') }}
             </span>
           </span>
@@ -66,7 +64,7 @@ export default {
       class="items-center flex text-base justify-center px-12 py-6"
     >
       <Spinner />
-      <span class="text-slate-300 dark:text-slate-200">
+      <span class="text-n-slate-11">
         {{ loadingMessage }}
       </span>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap
index 78462b3bf..1f1e80f83 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CsatMetrics.vue > computes response count correctly 1`] = `
-"<div class="flex-col lg:flex-row flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700">
+"<div class="flex-col lg:flex-row flex flex-wrap mx-0 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-8 gap-4">
   <csat-metric-card-stub label="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL" infotext="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP" disabled="false" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]" value="100"></csat-metric-card-stub>
   <csat-metric-card-stub label="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL" infotext="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP" disabled="true" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]" value="--"></csat-metric-card-stub>
   <csat-metric-card-stub label="CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL" infotext="CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP" disabled="false" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]" value="90%"></csat-metric-card-stub>
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 d19c081d1..0a3b4d8a5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
@@ -1,7 +1,7 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
-import SettingsContent from '../Wrapper.vue';
+import ReportsWrapper from './components/ReportsWrapper.vue';
 import Index from './Index.vue';
 import AgentReports from './AgentReports.vue';
 import LabelReports from './LabelReports.vue';
@@ -16,12 +16,7 @@ export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'OVERVIEW_REPORTS.HEADER',
-        icon: 'arrow-trending-lines',
-        keepAlive: false,
-      },
+      component: ReportsWrapper,
       children: [
         {
           path: '',
@@ -37,17 +32,6 @@ export default {
           },
           component: LiveReports,
         },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'REPORT.HEADER',
-        icon: 'chat',
-        keepAlive: false,
-      },
-      children: [
         {
           path: 'conversation',
           name: 'conversation_reports',
@@ -56,56 +40,6 @@ export default {
           },
           component: Index,
         },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'CSAT_REPORTS.HEADER',
-        icon: 'emoji',
-        keepAlive: false,
-      },
-      children: [
-        {
-          path: 'csat',
-          name: 'csat_reports',
-          meta: {
-            permissions: ['administrator', 'report_manage'],
-          },
-          component: CsatResponses,
-        },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'BOT_REPORTS.HEADER',
-        icon: 'bot',
-        keepAlive: false,
-      },
-      children: [
-        {
-          path: 'bot',
-          name: 'bot_reports',
-          meta: {
-            permissions: ['administrator', 'report_manage'],
-            featureFlag: FEATURE_FLAGS.RESPONSE_BOT,
-          },
-          component: BotReports,
-        },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'AGENT_REPORTS.HEADER',
-        icon: 'people',
-        keepAlive: false,
-      },
-      children: [
         {
           path: 'agent',
           name: 'agent_reports',
@@ -114,17 +48,6 @@ export default {
           },
           component: AgentReports,
         },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'LABEL_REPORTS.HEADER',
-        icon: 'tag',
-        keepAlive: false,
-      },
-      children: [
         {
           path: 'label',
           name: 'label_reports',
@@ -133,17 +56,6 @@ export default {
           },
           component: LabelReports,
         },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'INBOX_REPORTS.HEADER',
-        icon: 'mail-inbox-all',
-        keepAlive: false,
-      },
-      children: [
         {
           path: 'inboxes',
           name: 'inbox_reports',
@@ -152,16 +64,6 @@ export default {
           },
           component: InboxReports,
         },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'TEAM_REPORTS.HEADER',
-        icon: 'people-team',
-      },
-      children: [
         {
           path: 'teams',
           name: 'team_reports',
@@ -170,17 +72,6 @@ export default {
           },
           component: TeamReports,
         },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'SLA_REPORTS.HEADER',
-        icon: 'document-list-clock',
-        keepAlive: false,
-      },
-      children: [
         {
           path: 'sla',
           name: 'sla_reports',
@@ -190,6 +81,22 @@ export default {
           },
           component: SLAReports,
         },
+        {
+          path: 'csat',
+          name: 'csat_reports',
+          meta: {
+            permissions: ['administrator', 'report_manage'],
+          },
+          component: CsatResponses,
+        },
+        {
+          path: 'bot',
+          name: 'bot_reports',
+          meta: {
+            permissions: ['administrator', 'report_manage'],
+          },
+          component: BotReports,
+        },
       ],
     },
   ],

From ea616d6a931bc23fca724e3b5b7a427964bacf4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nguy=E1=BB=85n=20Tr=E1=BA=A7n=20Chung?=
 <nguyentranchung52th@gmail.com>
Date: Wed, 27 Nov 2024 20:38:54 +0900
Subject: [PATCH 14/15] chore: clear apt warning in cwctl (#10488)

---
 deployment/setup_20.04.sh | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/deployment/setup_20.04.sh b/deployment/setup_20.04.sh
index 830d03708..6c5d0843e 100644
--- a/deployment/setup_20.04.sh
+++ b/deployment/setup_20.04.sh
@@ -171,8 +171,8 @@ EOF
 #   None
 ##############################################################################
 function install_dependencies() {
-  apt update && apt upgrade -y
-  apt install -y curl
+  apt-get update && apt-get upgrade -y
+  apt-get install -y curl
   curl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpg
   echo "deb [signed-by=/usr/share/keyrings/redis-archive-keyring.gpg] https://packages.redis.io/deb $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/redis.list
   mkdir -p /etc/apt/keyrings
@@ -180,9 +180,9 @@ function install_dependencies() {
   NODE_MAJOR=20
   echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list
 
-  apt update
+  apt-get update
 
-  apt install -y \
+  apt-get install -y \
       git software-properties-common ca-certificates imagemagick libpq-dev \
       libxml2-dev libxslt1-dev file g++ gcc autoconf build-essential \
       libssl-dev libyaml-dev libreadline-dev gnupg2 \
@@ -203,7 +203,7 @@ function install_dependencies() {
 #   None
 ##############################################################################
 function install_databases() {
-  apt install -y postgresql postgresql-contrib redis-server
+  apt-get install -y postgresql postgresql-contrib redis-server
 }
 
 ##############################################################################
@@ -216,7 +216,7 @@ function install_databases() {
 #   None
 ##############################################################################
 function install_webserver() {
-  apt install -y nginx nginx-full certbot python3-certbot-nginx
+  apt-get install -y nginx nginx-full certbot python3-certbot-nginx
 }
 
 ##############################################################################
@@ -752,9 +752,9 @@ function upgrade_redis() {
 
   curl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpg
   echo "deb [signed-by=/usr/share/keyrings/redis-archive-keyring.gpg] https://packages.redis.io/deb $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/redis.list
-  apt update -y
-  apt upgrade redis-server -y
-  apt install libvips -y
+  apt-get update -y
+  apt-get upgrade redis-server -y
+  apt-get install libvips -y
 }
 
 
@@ -787,8 +787,8 @@ function upgrade_node() {
   NODE_MAJOR=20
   echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list
 
-  apt update
-  apt install nodejs -y
+  apt-get update
+  apt-get install nodejs -y
 
 }
 
@@ -989,7 +989,7 @@ function cwctl_upgrade_check() {
     #Check if pip is not installed, and install it if not
     if ! command -v pip3 &> /dev/null; then
         echo "Installing pip..."
-        apt install -y python3-pip
+        apt-get install -y python3-pip
     fi
 
     # Check if packaging library is installed, and install it if not
@@ -1025,7 +1025,7 @@ function install_packaging() {
   ubuntu_version=$(lsb_release -r | awk '{print $2}')
   if [[ "$ubuntu_version" == "24.04" ]]; then
     echo "Detected Ubuntu 24.04. Installing packaging library using apt."
-    apt install -y python3-packaging
+    apt-get install -y python3-packaging
   else
     echo "Installing packaging library using pip."
     python3 -m pip install packaging

From 94c918e468cbda54dfa207e3f52f9324c5a4b12e Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Wed, 27 Nov 2024 20:31:01 +0800
Subject: [PATCH 15/15] chore: [Snyk] Security upgrade google-cloud-storage
 from 1.44.0 to 1.48.0 (#10148)

- bump up gems based on snyk security alerts
---
 Gemfile      |  2 +-
 Gemfile.lock | 47 +++++++++++++++++++++++------------------------
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/Gemfile b/Gemfile
index f18305970..439b0f63e 100644
--- a/Gemfile
+++ b/Gemfile
@@ -49,7 +49,7 @@ gem 'aws-sdk-s3', require: false
 # original gem isn't maintained actively
 # we wanted updated version of faraday which is a dependency for slack-ruby-client
 gem 'azure-storage-blob', git: 'https://github.com/chatwoot/azure-storage-ruby', branch: 'chatwoot', require: false
-gem 'google-cloud-storage', require: false
+gem 'google-cloud-storage', '>= 1.48.0', require: false
 gem 'image_processing'
 
 ##-- gems for database --#
diff --git a/Gemfile.lock b/Gemfile.lock
index e2f5c91be..4ea52d1e1 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -209,7 +209,7 @@ GEM
       devise (> 3.5.2, < 5)
       rails (>= 4.2.0, < 7.2)
     diff-lcs (1.5.1)
-    digest-crc (0.6.4)
+    digest-crc (0.6.5)
       rake (>= 12.0.0, < 14.0.0)
     docile (1.4.0)
     domain_name (0.5.20190701)
@@ -284,39 +284,39 @@ GEM
       activesupport (>= 6.1)
     gmail_xoauth (0.4.3)
       oauth (>= 0.3.6)
-    google-apis-core (0.11.0)
+    google-apis-core (0.15.1)
       addressable (~> 2.5, >= 2.5.1)
-      googleauth (>= 0.16.2, < 2.a)
-      httpclient (>= 2.8.1, < 3.a)
+      googleauth (~> 1.9)
+      httpclient (>= 2.8.3, < 3.a)
       mini_mime (~> 1.0)
+      mutex_m
       representable (~> 3.0)
       retriable (>= 2.0, < 4.a)
-      rexml
-      webrick
-    google-apis-iamcredentials_v1 (0.17.0)
-      google-apis-core (>= 0.11.0, < 2.a)
-    google-apis-storage_v1 (0.19.0)
-      google-apis-core (>= 0.9.0, < 2.a)
-    google-cloud-core (1.6.0)
-      google-cloud-env (~> 1.0)
+    google-apis-iamcredentials_v1 (0.22.0)
+      google-apis-core (>= 0.15.0, < 2.a)
+    google-apis-storage_v1 (0.47.0)
+      google-apis-core (>= 0.15.0, < 2.a)
+    google-cloud-core (1.7.1)
+      google-cloud-env (>= 1.0, < 3.a)
       google-cloud-errors (~> 1.0)
     google-cloud-dialogflow-v2 (0.31.0)
       gapic-common (>= 0.20.0, < 2.a)
       google-cloud-errors (~> 1.0)
       google-cloud-location (>= 0.4, < 2.a)
-    google-cloud-env (1.6.0)
-      faraday (>= 0.17.3, < 3.0)
+    google-cloud-env (2.2.1)
+      faraday (>= 1.0, < 3.a)
     google-cloud-errors (1.3.1)
     google-cloud-location (0.6.0)
       gapic-common (>= 0.20.0, < 2.a)
       google-cloud-errors (~> 1.0)
-    google-cloud-storage (1.44.0)
+    google-cloud-storage (1.52.0)
       addressable (~> 2.8)
       digest-crc (~> 0.4)
-      google-apis-iamcredentials_v1 (~> 0.1)
-      google-apis-storage_v1 (~> 0.19.0)
+      google-apis-core (~> 0.13)
+      google-apis-iamcredentials_v1 (~> 0.18)
+      google-apis-storage_v1 (~> 0.38)
       google-cloud-core (~> 1.6)
-      googleauth (>= 0.16.2, < 2.a)
+      googleauth (~> 1.9)
       mini_mime (~> 1.0)
     google-cloud-translate-v3 (0.10.0)
       gapic-common (>= 0.20.0, < 2.a)
@@ -331,10 +331,10 @@ GEM
       grpc (~> 1.41)
     googleapis-common-protos-types (1.14.0)
       google-protobuf (~> 3.18)
-    googleauth (1.5.2)
-      faraday (>= 0.17.3, < 3.a)
+    googleauth (1.11.2)
+      faraday (>= 1.0, < 3.a)
+      google-cloud-env (~> 2.1)
       jwt (>= 1.4, < 3.0)
-      memoist (~> 0.16)
       multi_json (~> 1.11)
       os (>= 0.9, < 2.0)
       signet (>= 0.16, < 2.a)
@@ -462,7 +462,6 @@ GEM
       net-smtp
     marcel (1.0.4)
     maxminddb (0.1.22)
-    memoist (0.16.2)
     meta_request (0.8.3)
       rack-contrib (>= 1.1, < 3)
       railties (>= 3.0.0, < 8)
@@ -480,6 +479,7 @@ GEM
     multi_json (1.15.0)
     multi_xml (0.6.0)
     multipart-post (2.3.0)
+    mutex_m (0.3.0)
     neighbor (0.2.3)
       activerecord (>= 5.2)
     net-http (0.4.1)
@@ -824,7 +824,6 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webrick (1.8.2)
     websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -886,7 +885,7 @@ DEPENDENCIES
   geocoder
   gmail_xoauth
   google-cloud-dialogflow-v2 (>= 0.24.0)
-  google-cloud-storage
+  google-cloud-storage (>= 1.48.0)
   google-cloud-translate-v3 (>= 0.7.0)
   groupdate
   grpc