feat: Contact filtering by labels and segments

app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { useStore } from 'dashboard/composables/store';
 import { debounce } from '@chatwoot/utils';
 
@@ -22,6 +22,7 @@ const props = defineProps({
 const emit = defineEmits(['toggle']);
 
 const router = useRouter();
+const route = useRoute();
 
 const { t } = useI18n();
 const store = useStore();
@@ -37,14 +38,26 @@ const handleFormUpdate = debounce(
   false
 );
 
-const onClickViewDetails = () => {
-  store.dispatch('contacts/show', { id: props.id });
-  router.push({
-    name: 'contacts_dashboard_edit_index',
-    params: {
-      contactId: props.id,
-    },
-  });
+const ROUTE_MAPPINGS = {
+  contacts_dashboard_labels_index: 'contacts_dashboard_labels_edit_index',
+  contacts_dashboard_segments_index: 'contacts_dashboard_segments_edit_index',
+};
+
+const onClickViewDetails = async () => {
+  await store.dispatch('contacts/show', { id: props.id });
+
+  const dynamicRouteName =
+    ROUTE_MAPPINGS[route.name] || 'contacts_dashboard_edit_index';
+
+  const params = { contactId: props.id };
+
+  if (route.name.includes('segments')) {
+    params.segmentId = route.params.segmentId;
+  } else if (route.name.includes('labels')) {
+    params.label = route.params.label;
+  }
+
+  await router.push({ name: dynamicRouteName, params });
 };
 </script>
 

app/javascript/dashboard/components-next/selectmenu/SelectMenu.vue

@@ -1,8 +1,8 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 
-defineProps({
+const props = defineProps({
   options: {
     type: Array,
     required: true,
@@ -21,6 +21,8 @@ const emit = defineEmits(['update:modelValue']);
 
 const isOpen = ref(false);
 
+const labelValue = computed(() => props.label);
+
 const toggleMenu = () => {
   isOpen.value = !isOpen.value;
 };
@@ -44,7 +46,7 @@ const handleSelect = value => {
       variant="faded"
       class="!w-fit"
       :class="{ 'dark:!bg-n-alpha-2 !bg-n-slate-9/20': isOpen }"
-      :label="label"
+      :label="labelValue"
       @click="toggleMenu"
     />
     <div

app/javascript/dashboard/components-next/sidebar/Sidebar.vue

@@ -172,7 +172,59 @@ const menuItems = computed(() => {
       name: 'Contacts',
       label: t('SIDEBAR.CONTACTS'),
       icon: 'i-lucide-contact',
-      to: accountScopedRoute('contacts_dashboard_index'),
+      activeOn: ['contacts_dashboard_index', 'contacts_dashboard_edit_index'],
+      children: [
+        {
+          name: 'All Contacts',
+          label: t('SIDEBAR.ALL_CONTACTS'),
+          to: accountScopedRoute('contacts_dashboard_index'),
+          activeOn: [
+            'contacts_dashboard_index',
+            'contacts_dashboard_edit_index',
+          ],
+        },
+        {
+          name: 'Segments',
+          icon: 'i-lucide-group',
+          label: t('SIDEBAR.CUSTOM_VIEWS_SEGMENTS'),
+
+          children: contactCustomViews.value.map(view => ({
+            name: `${view.name}-${view.id}`,
+            label: view.name,
+            to: accountScopedRoute('contacts_dashboard_segments_index', {
+              segmentId: view.id,
+            }),
+            activeOn: [
+              'contacts_dashboard_segments_index',
+              'contacts_dashboard_segments_edit_index',
+            ],
+          })),
+        },
+        {
+          name: 'Tagged With',
+          icon: 'i-lucide-tag',
+          label: t('SIDEBAR.TAGGED_WITH'),
+          activeOn: [
+            'contacts_dashboard_labels_index',
+            'contacts_dashboard_labels_edit_index',
+          ],
+          children: labels.value.map(label => ({
+            name: `${label.title}-${label.id}`,
+            label: label.title,
+            icon: h('span', {
+              class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`,
+              style: { backgroundColor: label.color },
+            }),
+            to: accountScopedRoute('contacts_dashboard_labels_index', {
+              label: label.title,
+            }),
+            activeOn: [
+              'contacts_dashboard_labels_index',
+              'contacts_dashboard_labels_edit_index',
+            ],
+          })),
+        },
+      ],
     },
     {
       name: 'Contacts',