From e6dc50a2221d73d1257a96de11ad2e3fe134df56 Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Tue, 6 Jun 2023 15:44:29 +0200
Subject: [PATCH 1/5] Activity & Conversation filters

---
 frontend/components.d.ts                      |   2 +-
 .../src/modules/activity/activity-service.js  |  19 +++
 .../activity/components/activity-list.vue     | 101 ++++++-------
 .../activityType/ActivityTypeFilter.vue       |  40 ++++-
 .../config/filters/activityType/config.ts     |  21 ++-
 .../config/filters/channel/ChannelFilter.vue  |  42 +++++-
 .../activity/config/filters/channel/config.ts |  19 ++-
 .../activity/config/filters/date/config.ts    |  21 ++-
 .../modules/activity/config/filters/main.ts   |  14 ++
 .../activity/config/filters/member/config.ts  |  10 +-
 .../config/filters/platform/config.ts         |  23 ++-
 .../config/filters/sentiment/config.ts        |  25 +++-
 .../activity/pages/activity-list-page.vue     | 106 ++++++--------
 .../modules/activity/store/pinia/actions.ts   |  21 +++
 .../modules/activity/store/pinia/getters.ts   |   2 +
 .../src/modules/activity/store/pinia/index.ts |  13 ++
 .../src/modules/activity/store/pinia/state.ts |  26 ++++
 .../components/layout/auth-layout-side.vue    |   2 +-
 .../components/conversation-list.vue          | 137 +++++++-----------
 .../config/filters/channel/ChannelFilter.vue  |  49 +++++++
 .../config/filters/channel/config.ts          |  30 ++++
 .../config/filters/dateStarted/config.ts      |  31 ++++
 .../config/filters/dateStarted/options.ts     |  31 ++++
 .../config/filters/lastActivityDate/config.ts |  24 +++
 .../conversation/config/filters/main.ts       |  27 ++++
 .../config/filters/noOfActivities/config.ts   |  24 +++
 .../config/filters/platform/config.ts         |  44 ++++++
 .../conversation/conversation-service.js      |  17 +++
 .../src/modules/conversation/store/actions.ts |  21 +++
 .../src/modules/conversation/store/getters.ts |   2 +
 .../src/modules/conversation/store/index.ts   |  13 ++
 .../src/modules/conversation/store/state.ts   |  31 ++++
 .../modules/filters/components/Filter.vue     |   5 +-
 .../multiselect/MultiSelectTagsFilter.vue     |  70 +++++----
 .../modules/filters/types/FilterConfig.ts     |   2 +-
 35 files changed, 772 insertions(+), 293 deletions(-)
 create mode 100644 frontend/src/modules/activity/store/pinia/actions.ts
 create mode 100644 frontend/src/modules/activity/store/pinia/getters.ts
 create mode 100644 frontend/src/modules/activity/store/pinia/index.ts
 create mode 100644 frontend/src/modules/activity/store/pinia/state.ts
 create mode 100644 frontend/src/modules/conversation/config/filters/channel/ChannelFilter.vue
 create mode 100644 frontend/src/modules/conversation/config/filters/channel/config.ts
 create mode 100644 frontend/src/modules/conversation/config/filters/dateStarted/config.ts
 create mode 100644 frontend/src/modules/conversation/config/filters/dateStarted/options.ts
 create mode 100644 frontend/src/modules/conversation/config/filters/lastActivityDate/config.ts
 create mode 100644 frontend/src/modules/conversation/config/filters/main.ts
 create mode 100644 frontend/src/modules/conversation/config/filters/noOfActivities/config.ts
 create mode 100644 frontend/src/modules/conversation/config/filters/platform/config.ts
 create mode 100644 frontend/src/modules/conversation/store/actions.ts
 create mode 100644 frontend/src/modules/conversation/store/getters.ts
 create mode 100644 frontend/src/modules/conversation/store/index.ts
 create mode 100644 frontend/src/modules/conversation/store/state.ts

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index adcc186b5e..a4a0d738ae 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -13,13 +13,13 @@ declare module '@vue/runtime-core' {
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCarousel: typeof import('element-plus/es')['ElCarousel']
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
-    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
diff --git a/frontend/src/modules/activity/activity-service.js b/frontend/src/modules/activity/activity-service.js
index 53f38321ae..607761656d 100644
--- a/frontend/src/modules/activity/activity-service.js
+++ b/frontend/src/modules/activity/activity-service.js
@@ -121,6 +121,25 @@ export class ActivityService {
     return response.data;
   }
 
+  static async listActivities(
+    body,
+  ) {
+    const sampleTenant = AuthCurrentTenant.getSampleTenantData();
+    const tenantId = sampleTenant?.id || AuthCurrentTenant.get();
+
+    const response = await authAxios.post(
+      `/tenant/${tenantId}/activity/query`,
+      body,
+      {
+        headers: {
+          Authorization: sampleTenant?.token,
+        },
+      },
+    );
+
+    return response.data;
+  }
+
   static async listAutocomplete(query, limit) {
     const params = {
       query,
diff --git a/frontend/src/modules/activity/components/activity-list.vue b/frontend/src/modules/activity/components/activity-list.vue
index e0d2dce792..8598a9ce9c 100644
--- a/frontend/src/modules/activity/components/activity-list.vue
+++ b/frontend/src/modules/activity/components/activity-list.vue
@@ -1,5 +1,12 @@
 <template>
   <div class="pt-3">
+    <cr-filter
+      v-model="filters"
+      :config="activityFilters"
+      :search-config="activitySearchFilter"
+      hash="activity"
+      @fetch="fetch($event)"
+    />
     <div
       v-if="loading && !activities.length"
       v-loading="loading"
@@ -19,9 +26,9 @@
         <div class="mb-4">
           <app-pagination-sorter
             v-model="sorterFilter"
-            :page-size="Number(pagination.pageSize)"
-            :total="count"
-            :current-page="pagination.currentPage"
+            :page-size="Number(pagination.perPage)"
+            :total="totalActivities"
+            :current-page="pagination.page"
             :has-page-counter="false"
             :sorter="false"
             module="activity"
@@ -32,7 +39,7 @@
         <!-- Activity item list -->
         <app-activity-item
           v-for="activity of activities"
-          :key="activity?.id"
+          :key="activity.id"
           :activity="activity"
           class="mb-6"
           v-bind="cardOptions"
@@ -75,24 +82,18 @@ import {
   computed,
   ref,
 } from 'vue';
-import { useStore } from 'vuex';
 import AppActivityItem from '@/modules/activity/components/activity-item.vue';
 import AppConversationDrawer from '@/modules/conversation/components/conversation-drawer.vue';
 import AppPaginationSorter from '@/shared/pagination/pagination-sorter.vue';
+import CrFilter from '@/shared/modules/filters/components/Filter.vue';
+import { useActivityStore } from '@/modules/activity/store/pinia';
+import { storeToRefs } from 'pinia';
+import { activityFilters, activitySearchFilter } from '@/modules/activity/config/filters/main';
 
-const store = useStore();
 const sorterFilter = ref('trending');
 const conversationId = ref(null);
 
 defineProps({
-  activities: {
-    type: Array,
-    default: () => {},
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
   cardOptions: {
     type: Object,
     required: false,
@@ -102,52 +103,52 @@ defineProps({
 
 const emit = defineEmits(['edit']);
 
-const activeView = computed(
-  () => store.getters['activity/activeView'],
-);
-const hasFilter = computed(() => {
-  const parsedFilters = {
-    ...activeView.value.filter.attributes,
-  };
+const activityStore = useActivityStore();
+const { filters, activities, totalActivities } = storeToRefs(activityStore);
+const { fetchActivities } = activityStore;
 
-  // Remove search filter if value is empty
-  if (!parsedFilters.search?.value) {
-    delete parsedFilters.search;
-  }
+const loading = ref(false);
 
-  return !!Object.keys(parsedFilters).length;
-});
-const emptyState = computed(() => {
-  if (hasFilter.value) {
-    return {
-      title: 'No activities found',
-      description:
+const emptyState = computed(() => ({
+  title: 'No activities found',
+  description:
         "We couldn't find any results that match your search criteria, please try a different query",
-    };
-  }
+}));
 
-  return {
-    title: 'No activities yet',
-    description:
-      "We couldn't track any community member activities",
-  };
-});
-
-const count = computed(() => store.state.activity.count);
 const pagination = computed(
-  () => store.getters['activity/pagination'],
+  () => filters.value.pagination,
 );
+
 const isLoadMoreVisible = computed(() => (
-  pagination.value.currentPage
-      * pagination.value.pageSize
-    < count.value
+  pagination.value.page
+      * pagination.value.perPage
+    < totalActivities
 ));
 
 const onLoadMore = () => {
-  store.dispatch(
-    'activity/doChangePaginationCurrentPage',
-    pagination.value.currentPage + 1,
-  );
+  filters.value.pagination.page += 1;
+};
+
+const fetch = ({
+  filter, offset, limit, orderBy, body,
+}) => {
+  loading.value = true;
+  fetchActivities({
+    ...body,
+    filter: {
+      ...filter,
+      member: {
+        isTeamMember: { not: true },
+        isBot: { not: true },
+      },
+    },
+    offset,
+    limit,
+    orderBy,
+  })
+    .finally(() => {
+      loading.value = false;
+    });
 };
 </script>
 
diff --git a/frontend/src/modules/activity/config/filters/activityType/ActivityTypeFilter.vue b/frontend/src/modules/activity/config/filters/activityType/ActivityTypeFilter.vue
index fedf536b97..f029625db6 100644
--- a/frontend/src/modules/activity/config/filters/activityType/ActivityTypeFilter.vue
+++ b/frontend/src/modules/activity/config/filters/activityType/ActivityTypeFilter.vue
@@ -1,23 +1,49 @@
 <template>
-  <cr-select-filter v-model="form" :options="options" />
+  <cr-select-filter v-model="form" :config="props.config as SelectFilterConfig" :options="data.options || []" />
 </template>
 
 <script setup lang="ts">
-import { defineProps, defineEmits, computed } from 'vue';
+import {
+  defineProps, defineEmits, computed, watch,
+} from 'vue';
 import CrSelectFilter from '@/shared/modules/filters/components/filterTypes/SelectFilter.vue';
-import { SelectFilterOptionGroup } from '@/shared/modules/filters/types/filterTypes/SelectFilterConfig';
+import {
+  SelectFilterConfig,
+} from '@/shared/modules/filters/types/filterTypes/SelectFilterConfig';
+import { CustomFilterConfig } from '@/shared/modules/filters/types/filterTypes/CustomFilterConfig';
+import { useActivityTypeStore } from '@/modules/activity/store/type';
+import { storeToRefs } from 'pinia';
 
 const props = defineProps<{
-  modelValue: string
+  modelValue: string,
+  config: CustomFilterConfig,
+  data: any,
 }>();
 
-const emit = defineEmits<{(e: 'update:modelValue', value: string)}>();
+const emit = defineEmits<{(e: 'update:modelValue', value: string), (e: 'update:data', value: any),}>();
+const activityTypeStore = useActivityTypeStore();
+const { types } = storeToRefs(activityTypeStore);
 
 const form = computed({
   get: () => props.modelValue,
   set: (value: string) => emit('update:modelValue', value),
 });
 
-// TODO: fetch activity types
-const options: SelectFilterOptionGroup[] = [];
+const data = computed({
+  get: () => props.data,
+  set: (value: any) => emit('update:data', value),
+});
+watch(() => types, (typesValue: any) => {
+  const platforms = {
+    ...typesValue.value.default,
+    ...typesValue.value.custom,
+  };
+  data.value.options = Object.entries(platforms).map(([platform, activityTypes]: [string, any]) => ({
+    label: platform.replaceAll(/[A-Z]/g, (letter) => ` ${letter.toLowerCase()}`),
+    options: Object.entries(activityTypes).map(([activityType, activityTypeData]) => ({
+      label: activityTypeData.display.short,
+      value: `${platform}:${activityType}`,
+    })),
+  }));
+}, { immediate: true });
 </script>
diff --git a/frontend/src/modules/activity/config/filters/activityType/config.ts b/frontend/src/modules/activity/config/filters/activityType/config.ts
index 34a6b2b065..227c7cd535 100644
--- a/frontend/src/modules/activity/config/filters/activityType/config.ts
+++ b/frontend/src/modules/activity/config/filters/activityType/config.ts
@@ -1,8 +1,9 @@
 import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
 import { CustomFilterConfig } from '@/shared/modules/filters/types/filterTypes/CustomFilterConfig';
 import ActivityTypeFilter from '@/modules/activity/config/filters/activityType/ActivityTypeFilter.vue';
-import { SelectFilterValue } from '@/shared/modules/filters/types/filterTypes/SelectFilterConfig';
+import { SelectFilterOptions, SelectFilterValue } from '@/shared/modules/filters/types/filterTypes/SelectFilterConfig';
 import { queryUrlParserByType } from '@/shared/modules/filters/config/queryUrlParserByType';
+import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
 
 const activityType: CustomFilterConfig = {
   id: 'activityType',
@@ -13,12 +14,20 @@ const activityType: CustomFilterConfig = {
   options: {
   },
   queryUrlParser: queryUrlParserByType[FilterConfigType.SELECT],
-  itemLabelRenderer(value: SelectFilterValue): string {
-    return `<b>Activity type</b> ${value || '...'}`;
+  itemLabelRenderer(value: SelectFilterValue, options: SelectFilterOptions, data: any): string {
+    return itemLabelRendererByType[FilterConfigType.SELECT]('Activity type', value, data);
   },
-  apiFilterRenderer(value): any[] {
-    console.log(value);
-    return [];
+  apiFilterRenderer({ value, include }:SelectFilterValue): any[] {
+    const [platform, activityType] = value.split(':');
+    const filter = {
+      and: [
+        { platform },
+        { type: activityType },
+      ],
+    };
+    return [
+      (include ? filter : { not: filter }),
+    ];
   },
 };
 
diff --git a/frontend/src/modules/activity/config/filters/channel/ChannelFilter.vue b/frontend/src/modules/activity/config/filters/channel/ChannelFilter.vue
index b7e7f3851c..ee6a824230 100644
--- a/frontend/src/modules/activity/config/filters/channel/ChannelFilter.vue
+++ b/frontend/src/modules/activity/config/filters/channel/ChannelFilter.vue
@@ -1,23 +1,49 @@
 <template>
-  <cr-multi-select-filter v-model="form" :options="options" />
+  <cr-select-filter v-model="form" :config="props.config as SelectFilterConfig" :options="data.options || []" />
 </template>
 
 <script setup lang="ts">
-import { defineProps, defineEmits, computed } from 'vue';
-import CrMultiSelectFilter from '@/shared/modules/filters/components/filterTypes/MultiSelectFilter.vue';
-import { MultiSelectFilterOptionGroup } from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig';
+import {
+  defineProps, defineEmits, computed, watch,
+} from 'vue';
+import CrSelectFilter from '@/shared/modules/filters/components/filterTypes/SelectFilter.vue';
+import {
+  SelectFilterConfig, SelectFilterOptionGroup,
+} from '@/shared/modules/filters/types/filterTypes/SelectFilterConfig';
+import { CustomFilterConfig } from '@/shared/modules/filters/types/filterTypes/CustomFilterConfig';
+import { mapGetters } from '@/shared/vuex/vuex.helpers';
+import { CrowdIntegrations } from '@/integrations/integrations-config';
+import { extractRepoNameFromUrl } from '@/utils/string';
 
 const props = defineProps<{
-  modelValue: string
+  modelValue: string,
+  config: CustomFilterConfig,
+  data: any,
 }>();
 
-const emit = defineEmits<{(e: 'update:modelValue', value: string)}>();
+const emit = defineEmits<{(e: 'update:modelValue', value: string), (e: 'update:data', value: any),}>();
+
+const { currentTenant } = mapGetters('auth');
 
 const form = computed({
   get: () => props.modelValue,
   set: (value: string) => emit('update:modelValue', value),
 });
 
-// TODO: fetch activity types
-const options: MultiSelectFilterOptionGroup[] = [];
+const data = computed({
+  get: () => props.data,
+  set: (value: any) => emit('update:data', value),
+});
+
+watch(() => currentTenant.value, (tenant: any) => {
+  const activityChannels = tenant?.settings[0].activityChannels || {};
+
+  data.value.options = Object.entries(activityChannels).map(([platform, channels]): SelectFilterOptionGroup => ({
+    label: CrowdIntegrations.getConfig(platform).name,
+    options: channels.map((channel) => ({
+      value: channel,
+      label: platform === 'github' ? extractRepoNameFromUrl(channel) : channel,
+    })),
+  }));
+}, { immediate: true });
 </script>
diff --git a/frontend/src/modules/activity/config/filters/channel/config.ts b/frontend/src/modules/activity/config/filters/channel/config.ts
index e6019685bb..ce60de6d59 100644
--- a/frontend/src/modules/activity/config/filters/channel/config.ts
+++ b/frontend/src/modules/activity/config/filters/channel/config.ts
@@ -1,8 +1,9 @@
 import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
 import { CustomFilterConfig } from '@/shared/modules/filters/types/filterTypes/CustomFilterConfig';
-import { MultiSelectFilterValue } from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig';
 import ChannelFilter from '@/modules/activity/config/filters/channel/ChannelFilter.vue';
 import { queryUrlParserByType } from '@/shared/modules/filters/config/queryUrlParserByType';
+import { SelectFilterOptions, SelectFilterValue } from '@/shared/modules/filters/types/filterTypes/SelectFilterConfig';
+import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
 
 const channel: CustomFilterConfig = {
   id: 'channel',
@@ -12,13 +13,17 @@ const channel: CustomFilterConfig = {
   component: ChannelFilter,
   options: {
   },
-  queryUrlParser: queryUrlParserByType[FilterConfigType.MULTISELECT],
-  itemLabelRenderer(value: MultiSelectFilterValue): string {
-    return `<b>Channel</b> ${value || '...'}`;
+  queryUrlParser: queryUrlParserByType[FilterConfigType.SELECT],
+  itemLabelRenderer(value: SelectFilterValue, options: SelectFilterOptions, data: any): string {
+    return itemLabelRendererByType[FilterConfigType.SELECT]('Channel', value, data);
   },
-  apiFilterRenderer(value): any[] {
-    console.log(value);
-    return [];
+  apiFilterRenderer({ value, include }:SelectFilterValue): any[] {
+    const filter = {
+      channel: value,
+    };
+    return [
+      (include ? filter : { not: filter }),
+    ];
   },
 };
 
diff --git a/frontend/src/modules/activity/config/filters/date/config.ts b/frontend/src/modules/activity/config/filters/date/config.ts
index 44b43007b1..b6fb3b9545 100644
--- a/frontend/src/modules/activity/config/filters/date/config.ts
+++ b/frontend/src/modules/activity/config/filters/date/config.ts
@@ -1,5 +1,10 @@
 import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
-import { SelectFilterConfig, SelectFilterValue } from '@/shared/modules/filters/types/filterTypes/SelectFilterConfig';
+import {
+  SelectFilterConfig,
+  SelectFilterOptions,
+  SelectFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/SelectFilterConfig';
+import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
 import options from './options';
 
 const date: SelectFilterConfig = {
@@ -10,12 +15,16 @@ const date: SelectFilterConfig = {
   options: {
     options,
   },
-  itemLabelRenderer(value: SelectFilterValue): string {
-    return `<b>Date</b> ${value || '...'}`;
+  itemLabelRenderer(value: SelectFilterValue, options: SelectFilterOptions, data: any): string {
+    return itemLabelRendererByType[FilterConfigType.SELECT]('Date', value, options, data);
   },
-  apiFilterRenderer(value): any[] {
-    console.log(value);
-    return [];
+  apiFilterRenderer({ value, include }: SelectFilterValue): any[] {
+    const filter = {
+      timestamp: { gte: value },
+    };
+    return [
+      (include ? filter : { not: filter }),
+    ];
   },
 };
 
diff --git a/frontend/src/modules/activity/config/filters/main.ts b/frontend/src/modules/activity/config/filters/main.ts
index 2de38639be..584aab0d7a 100644
--- a/frontend/src/modules/activity/config/filters/main.ts
+++ b/frontend/src/modules/activity/config/filters/main.ts
@@ -1,4 +1,5 @@
 import { FilterConfig } from '@/shared/modules/filters/types/FilterConfig';
+import { SearchFilterConfig } from '@/shared/modules/filters/types/filterTypes/SearchFilterConfig';
 import activityType from './activityType/config';
 import channel from './channel/config';
 import date from './date/config';
@@ -14,3 +15,16 @@ export const activityFilters: Record<string, FilterConfig> = {
   platform,
   sentiment,
 };
+export const activitySearchFilter: SearchFilterConfig = {
+  placeholder: 'Search activities',
+  apiFilterRenderer(value: string): any[] {
+    return [
+      {
+        or: [
+          { title: { textContains: value } },
+          { body: { contains: [value] } },
+        ],
+      },
+    ];
+  },
+};
diff --git a/frontend/src/modules/activity/config/filters/member/config.ts b/frontend/src/modules/activity/config/filters/member/config.ts
index d5a606b62f..50fb6d938b 100644
--- a/frontend/src/modules/activity/config/filters/member/config.ts
+++ b/frontend/src/modules/activity/config/filters/member/config.ts
@@ -1,6 +1,5 @@
 import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
 import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
-import { apiFilterRendererByType } from '@/shared/modules/filters/config/apiFilterRendererByType';
 import {
   MultiSelectAsyncFilterConfig,
   MultiSelectAsyncFilterOptions, MultiSelectAsyncFilterValue,
@@ -29,8 +28,13 @@ const member: MultiSelectAsyncFilterConfig = {
   itemLabelRenderer(value: MultiSelectAsyncFilterValue, options: MultiSelectAsyncFilterOptions, data: any): string {
     return itemLabelRendererByType[FilterConfigType.MULTISELECT_ASYNC]('Member', value, options, data);
   },
-  apiFilterRenderer(value: MultiSelectAsyncFilterValue): any[] {
-    return apiFilterRendererByType[FilterConfigType.MULTISELECT_ASYNC]('member', value);
+  apiFilterRenderer({ value, include }: MultiSelectAsyncFilterValue): any[] {
+    const filter = {
+      memberId: value,
+    };
+    return [
+      (include ? filter : { not: filter }),
+    ];
   },
 };
 
diff --git a/frontend/src/modules/activity/config/filters/platform/config.ts b/frontend/src/modules/activity/config/filters/platform/config.ts
index 3f057c8f19..0adc045848 100644
--- a/frontend/src/modules/activity/config/filters/platform/config.ts
+++ b/frontend/src/modules/activity/config/filters/platform/config.ts
@@ -1,6 +1,11 @@
 import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
-import { MultiSelectFilterConfig, MultiSelectFilterValue } from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig';
+import {
+  MultiSelectFilterConfig,
+  MultiSelectFilterOptions,
+  MultiSelectFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
+import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
 
 const platform: MultiSelectFilterConfig = {
   id: 'platform',
@@ -11,7 +16,7 @@ const platform: MultiSelectFilterConfig = {
     options: [
       {
         options: [
-          ...(CrowdIntegrations.configs.map((platform) => ({
+          ...(CrowdIntegrations.enabledConfigs.map((platform) => ({
             label: (platform as any).name,
             value: platform.platform,
           }))),
@@ -23,12 +28,16 @@ const platform: MultiSelectFilterConfig = {
       },
     ],
   },
-  itemLabelRenderer(value: MultiSelectFilterValue): string {
-    return `<b>Platform</b> ${value?.value.join(',') || '...'}`;
+  itemLabelRenderer(value: MultiSelectFilterValue, options: MultiSelectFilterOptions, data: any): string {
+    return itemLabelRendererByType[FilterConfigType.SELECT]('Platform', value, options, data);
   },
-  apiFilterRenderer(value): any[] {
-    console.log(value);
-    return [];
+  apiFilterRenderer({ value, include }: MultiSelectFilterValue): any[] {
+    const filter = {
+      or: value.map((p) => ({ platform: p })),
+    };
+    return [
+      (include ? filter : { not: filter }),
+    ];
   },
 };
 
diff --git a/frontend/src/modules/activity/config/filters/sentiment/config.ts b/frontend/src/modules/activity/config/filters/sentiment/config.ts
index 3aaef21196..d7f284f23a 100644
--- a/frontend/src/modules/activity/config/filters/sentiment/config.ts
+++ b/frontend/src/modules/activity/config/filters/sentiment/config.ts
@@ -1,5 +1,10 @@
 import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
-import { MultiSelectFilterConfig, MultiSelectFilterValue } from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig';
+import {
+  MultiSelectFilterConfig,
+  MultiSelectFilterOptions,
+  MultiSelectFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig';
+import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
 import options from './options';
 
 const sentiment: MultiSelectFilterConfig = {
@@ -10,12 +15,20 @@ const sentiment: MultiSelectFilterConfig = {
   options: {
     options,
   },
-  itemLabelRenderer(value: MultiSelectFilterValue): string {
-    return `<b>Sentiment</b> ${value?.value.join(',') || '...'}`;
+  itemLabelRenderer(value: MultiSelectFilterValue, options: MultiSelectFilterOptions): string {
+    return itemLabelRendererByType[FilterConfigType.MULTISELECT]('Avg. sentiment', value, options);
   },
-  apiFilterRenderer(value): any[] {
-    console.log(value);
-    return [];
+  apiFilterRenderer({ value, include }: MultiSelectFilterValue): any[] {
+    const filter = {
+      or: [
+        ...(value.includes('positive') ? [{ sentiment: { gte: 67 } }] : []),
+        ...(value.includes('negative') ? [{ sentiment: { lt: 33 } }] : []),
+        ...(value.includes('neutral') ? [{ sentiment: { between: [33, 67] } }] : []),
+      ],
+    };
+    return [
+      (include ? filter : { not: filter }),
+    ];
   },
 };
 
diff --git a/frontend/src/modules/activity/pages/activity-list-page.vue b/frontend/src/modules/activity/pages/activity-list-page.vue
index 7c6f7e8088..3c7d613387 100644
--- a/frontend/src/modules/activity/pages/activity-list-page.vue
+++ b/frontend/src/modules/activity/pages/activity-list-page.vue
@@ -28,19 +28,24 @@
         </div>
       </div>
 
-      <app-activity-list-tabs />
-      <cr-filter :config="activityFilters" />
+      <div class="relative">
+        <el-tabs :model-value="activeView" class="mb-6" @update:model-value="changeView">
+          <el-tab-pane
+            label="Activities"
+            name="activity"
+          />
+          <el-tab-pane
+            label="Conversations"
+            name="conversation"
+          />
+        </el-tabs>
+      </div>
       <app-activity-list
-        v-if="activeView.type === 'activities'"
-        :activities="recordsArray"
-        :loading="loading"
-        :items-as-cards="true"
+        v-if="activeView === 'activity'"
         @edit="edit($event)"
       />
       <app-conversation-list
-        v-else-if="activeView.type === 'conversations'"
-        :conversations="recordsArray"
-        :loading="loading"
+        v-else-if="activeView === 'conversation'"
         :items-as-cards="true"
       />
     </div>
@@ -59,70 +64,43 @@
   />
 </template>
 
-<script>
-import { mapState, mapGetters } from 'vuex';
-import { ActivityPermissions } from '@/modules/activity/activity-permissions';
-// import AppActivityListFilter from '@/modules/activity/components/list/activity-list-filter.vue';
+<script setup lang="ts">
+
+import { ref, watch } from 'vue';
 import AppActivityTypeListDrawer from '@/modules/activity/components/type/activity-type-list-drawer.vue';
 import AppActivityFormDrawer from '@/modules/activity/components/activity-form-drawer.vue';
 import AppActivityTypeFormModal from '@/modules/activity/components/type/activity-type-form-modal.vue';
 import AppActivityList from '@/modules/activity/components/activity-list.vue';
 import AppConversationList from '@/modules/conversation/components/conversation-list.vue';
-import AppActivityListTabs from '@/modules/activity/components/activity-list-tabs.vue';
-import CrFilter from '@/shared/modules/filters/components/Filter.vue';
-import { activityFilters } from '../config/filters/main';
+import { useRoute, useRouter } from 'vue-router';
 
-export default {
-  name: 'AppActivityListPage',
+const route = useRoute();
+const router = useRouter();
 
-  components: {
-    CrFilter,
-    AppActivityTypeFormModal,
-    AppActivityFormDrawer,
-    AppActivityTypeListDrawer,
-    AppActivityList,
-    AppConversationList,
-    AppActivityListTabs,
-    // AppActivityListFilter,
-  },
+const isActivityTypeDrawerOpen = ref(false);
+const isActivityDrawerOpen = ref(false);
+const isActivityTypeFormVisible = ref(false);
+const editableActivity = ref(null);
+
+const activeView = ref('activity');
+
+const changeView = (view) => {
+  router.push({
+    hash: `#${view}`,
+    query: {},
+  });
+};
 
-  data() {
-    return {
-      creating: false,
-      isActivityTypeDrawerOpen: false,
-      isActivityDrawerOpen: false,
-      isActivityTypeFormVisible: false,
-      editableActivity: null,
-      activityFilters,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      currentTenant: 'auth/currentTenant',
-      currentUser: 'auth/currentUser',
-      activeView: 'activity/activeView',
-      recordsArray: 'activity/rows',
-    }),
-    ...mapState({
-      loading: (state) => state.activity.list.loading,
-    }),
-    hasPermissionToCreate() {
-      return new ActivityPermissions(
-        this.currentTenant,
-        this.currentUser,
-      ).create;
-    },
-  },
+watch(() => route.hash, (hash: string) => {
+  const view = hash.substring(1);
+  if (view.length > 0 && view !== activeView.value) {
+    activeView.value = view;
+  }
+}, { immediate: true });
 
-  async mounted() {
-    window.analytics.page('Activities');
-  },
-  methods: {
-    edit(activity) {
-      this.isActivityDrawerOpen = true;
-      this.editableActivity = activity;
-    },
-  },
+const edit = (activity) => {
+  editableActivity.value = activity;
+  isActivityDrawerOpen.value = true;
 };
 </script>
 
diff --git a/frontend/src/modules/activity/store/pinia/actions.ts b/frontend/src/modules/activity/store/pinia/actions.ts
new file mode 100644
index 0000000000..b8e67eb6ea
--- /dev/null
+++ b/frontend/src/modules/activity/store/pinia/actions.ts
@@ -0,0 +1,21 @@
+import { ActivityState } from '@/modules/activity/store/pinia/state';
+import { ActivityService } from '@/modules/activity/activity-service';
+
+export default {
+  fetchActivities(this: ActivityState, body: any, reload = false): Promise<any> {
+    const mappedBody = reload ? this.savedFilterBody : body;
+    this.activities = [];
+    return ActivityService.listActivities(mappedBody)
+      .then((data: any) => {
+        this.activities = data.rows;
+        this.totalActivities = data.count;
+        this.savedFilterBody = mappedBody;
+        return Promise.resolve(data);
+      })
+      .catch((err) => {
+        this.activities = [];
+        this.totalActivities = 0;
+        return Promise.reject(err);
+      });
+  },
+};
diff --git a/frontend/src/modules/activity/store/pinia/getters.ts b/frontend/src/modules/activity/store/pinia/getters.ts
new file mode 100644
index 0000000000..02a61bed5e
--- /dev/null
+++ b/frontend/src/modules/activity/store/pinia/getters.ts
@@ -0,0 +1,2 @@
+export default {
+};
diff --git a/frontend/src/modules/activity/store/pinia/index.ts b/frontend/src/modules/activity/store/pinia/index.ts
new file mode 100644
index 0000000000..5b4989cd13
--- /dev/null
+++ b/frontend/src/modules/activity/store/pinia/index.ts
@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia';
+import state from './state';
+import getters from './getters';
+import actions from './actions';
+
+export const useActivityStore = defineStore(
+  'activity',
+  {
+    state,
+    getters,
+    actions,
+  },
+);
diff --git a/frontend/src/modules/activity/store/pinia/state.ts b/frontend/src/modules/activity/store/pinia/state.ts
new file mode 100644
index 0000000000..3aea281541
--- /dev/null
+++ b/frontend/src/modules/activity/store/pinia/state.ts
@@ -0,0 +1,26 @@
+import { Filter } from '@/shared/modules/filters/types/FilterConfig';
+
+export interface ActivityState {
+  filters: Filter,
+  savedFilterBody: any,
+  activities: [],
+  totalActivities: number
+}
+
+export default () => ({
+  filters: {
+    search: '',
+    relation: 'and',
+    pagination: {
+      page: 1,
+      perPage: 20,
+    },
+    order: {
+      prop: 'timestamp',
+      order: 'descending',
+    },
+  } as Filter,
+  savedFilterBody: {},
+  activities: [],
+  totalActivities: 0,
+} as ActivityState);
diff --git a/frontend/src/modules/auth/components/layout/auth-layout-side.vue b/frontend/src/modules/auth/components/layout/auth-layout-side.vue
index 44536a9f5a..e46481dbe5 100644
--- a/frontend/src/modules/auth/components/layout/auth-layout-side.vue
+++ b/frontend/src/modules/auth/components/layout/auth-layout-side.vue
@@ -13,7 +13,7 @@
           Find revenue opportunities in your open source data
         </h4>
         <p class="text-sm leading-6">
-           Centralize community, product, and customer data to understand which companies are engaging with your open source project.
+          Centralize community, product, and customer data to understand which companies are engaging with your open source project.
         </p>
       </div>
       <div class="grid grid-rows-2 gap-8">
diff --git a/frontend/src/modules/conversation/components/conversation-list.vue b/frontend/src/modules/conversation/components/conversation-list.vue
index 9cabbfe809..ce8b2e380d 100644
--- a/frontend/src/modules/conversation/components/conversation-list.vue
+++ b/frontend/src/modules/conversation/components/conversation-list.vue
@@ -1,5 +1,12 @@
 <template>
   <div class="pt-3">
+    <cr-filter
+      v-model="filters"
+      :config="conversationFilters"
+      :search-config="conversationSearchFilter"
+      hash="conversation"
+      @fetch="fetch($event)"
+    />
     <div
       v-if="loading && !conversations.length"
       v-loading="loading"
@@ -16,16 +23,16 @@
 
       <div v-else>
         <div class="mb-4">
-          <app-pagination-sorter
-            v-model="sorterFilter"
-            :page-size="Number(pagination.pageSize)"
-            :total="count"
-            :current-page="pagination.currentPage"
-            :has-page-counter="false"
-            module="conversation"
-            position="top"
-            @change-sorter="doChangeFilter"
-          />
+          <!--          <app-pagination-sorter-->
+          <!--            v-model="sorterFilter"-->
+          <!--            :page-size="Number(pagination.pageSize)"-->
+          <!--            :total="count"-->
+          <!--            :current-page="pagination.currentPage"-->
+          <!--            :has-page-counter="false"-->
+          <!--            module="conversation"-->
+          <!--            position="top"-->
+          <!--            @change-sorter="doChangeFilter"-->
+          <!--          />-->
         </div>
 
         <!-- Conversation item list -->
@@ -66,107 +73,61 @@
 
 <script setup>
 import { defineProps, computed, ref } from 'vue';
-import { useStore } from 'vuex';
-import { TRENDING_CONVERSATIONS_FILTER } from '@/modules/activity/store/constants';
 import AppConversationItem from '@/modules/conversation/components/conversation-item.vue';
 import AppConversationDrawer from '@/modules/conversation/components/conversation-drawer.vue';
-import AppPaginationSorter from '@/shared/pagination/pagination-sorter.vue';
+import CrFilter from '@/shared/modules/filters/components/Filter.vue';
+import { useConversationStore } from '@/modules/conversation/store';
+import { storeToRefs } from 'pinia';
+import { conversationFilters, conversationSearchFilter } from '@/modules/conversation/config/filters/main';
 
-const store = useStore();
 const conversationId = ref(null);
 
 defineProps({
-  conversations: {
-    type: Array,
-    default: () => [],
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
   itemsAsCards: {
     type: Boolean,
     default: false,
   },
 });
 
-const activeView = computed(
-  () => store.getters['activity/activeView'],
-);
-const sorterFilter = computed(() => (activeView.value?.sorter.prop === 'activityCount'
-  ? 'trending'
-  : 'recentActivity'));
-const hasFilter = computed(() => {
-  const parsedFilters = {
-    ...activeView.value.filter.attributes,
-  };
+const conversationStore = useConversationStore();
+const { filters, conversations, totalConversations } = storeToRefs(conversationStore);
+const { fetchConversation } = conversationStore;
 
-  // Remove search filter if value is empty
-  if (!parsedFilters.search?.value) {
-    delete parsedFilters.search;
-  }
+const loading = ref(false);
 
-  return !!Object.keys(parsedFilters).length;
-});
-const emptyState = computed(() => {
-  if (hasFilter.value) {
-    return {
-      title: 'No conversations found',
-      description:
+const emptyState = computed(() => ({
+  title: 'No conversations found',
+  description:
         "We couldn't find any results that match your search criteria, please try a different query",
-    };
-  }
+}));
 
-  return {
-    title: 'No conversations yet',
-    description:
-      "We couldn't track any conversations among your community members",
-  };
-});
-
-const count = computed(() => store.state.activity.count);
 const pagination = computed(
-  () => store.getters['activity/pagination'],
+  () => filters.value.pagination,
 );
 const isLoadMoreVisible = computed(() => (
-  pagination.value.currentPage
-      * pagination.value.pageSize
-    < count.value
+  pagination.value.page
+      * pagination.value.perPage
+    < totalConversations
 ));
 
-const doChangeFilter = (filter) => {
-  let sorter = 'lastActive';
-  const payload = {
-    activeView: activeView.value,
-    attribute:
-      TRENDING_CONVERSATIONS_FILTER.attributes.lastActive,
-  };
-
-  if (filter === 'trending') {
-    // Add lastActive filter for 'Trending' sorter
-    store.commit('activity/FILTER_ATTRIBUTE_ADDED', payload);
-    sorter = 'activityCount';
-  } else {
-    // Remove lastActive filter for 'Most recent activity' sorter
-    store.commit(
-      'activity/FILTER_ATTRIBUTE_DESTROYED',
-      payload,
-    );
-  }
-
-  store.dispatch('activity/doChangeSort', {
-    prop: sorter,
-    order: 'descending',
-  });
-};
-
 const onLoadMore = () => {
-  const newPageSize = pagination.value.pageSize + 10;
+  filters.value.pagination.page += 1;
+};
 
-  store.dispatch(
-    'activity/doChangePaginationPageSize',
-    newPageSize,
-  );
+const fetch = ({
+  filter, offset, limit, orderBy, body,
+}) => {
+  loading.value = true;
+  fetchConversation({
+    ...body,
+    filter,
+    offset,
+    limit,
+    orderBy,
+  })
+    .finally(() => {
+      loading.value = false;
+    });
 };
 </script>
 
diff --git a/frontend/src/modules/conversation/config/filters/channel/ChannelFilter.vue b/frontend/src/modules/conversation/config/filters/channel/ChannelFilter.vue
new file mode 100644
index 0000000000..af9d366e9b
--- /dev/null
+++ b/frontend/src/modules/conversation/config/filters/channel/ChannelFilter.vue
@@ -0,0 +1,49 @@
+<template>
+  <cr-select-filter v-model="form" :config="props.config as SelectFilterConfig" :options="data.options || []" />
+</template>
+
+<script setup lang="ts">
+import {
+  defineProps, defineEmits, computed, watch,
+} from 'vue';
+import CrSelectFilter from '@/shared/modules/filters/components/filterTypes/SelectFilter.vue';
+import {
+  SelectFilterConfig, SelectFilterOptionGroup,
+} from '@/shared/modules/filters/types/filterTypes/SelectFilterConfig';
+import { CustomFilterConfig } from '@/shared/modules/filters/types/filterTypes/CustomFilterConfig';
+import { mapGetters } from '@/shared/vuex/vuex.helpers';
+import { CrowdIntegrations } from '@/integrations/integrations-config';
+import { extractRepoNameFromUrl } from '@/utils/string';
+
+const props = defineProps<{
+  modelValue: string,
+  config: CustomFilterConfig,
+  data: any,
+}>();
+
+const emit = defineEmits<{(e: 'update:modelValue', value: string), (e: 'update:data', value: any),}>();
+
+const { currentTenant } = mapGetters('auth');
+
+const form = computed({
+  get: () => props.modelValue,
+  set: (value: string) => emit('update:modelValue', value),
+});
+
+const data = computed({
+  get: () => props.data,
+  set: (value: any) => emit('update:data', value),
+});
+
+watch(() => currentTenant.value, (tenant: any) => {
+  const conversationChannels = tenant?.settings[0].activityChannels || {};
+
+  data.value.options = Object.entries(conversationChannels).map(([platform, channels]): SelectFilterOptionGroup => ({
+    label: CrowdIntegrations.getConfig(platform).name,
+    options: channels.map((channel) => ({
+      value: channel,
+      label: platform === 'github' ? extractRepoNameFromUrl(channel) : channel,
+    })),
+  }));
+}, { immediate: true });
+</script>
diff --git a/frontend/src/modules/conversation/config/filters/channel/config.ts b/frontend/src/modules/conversation/config/filters/channel/config.ts
new file mode 100644
index 0000000000..bdade318c6
--- /dev/null
+++ b/frontend/src/modules/conversation/config/filters/channel/config.ts
@@ -0,0 +1,30 @@
+import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
+import { CustomFilterConfig } from '@/shared/modules/filters/types/filterTypes/CustomFilterConfig';
+import ChannelFilter from '@/modules/conversation/config/filters/channel/ChannelFilter.vue';
+import { queryUrlParserByType } from '@/shared/modules/filters/config/queryUrlParserByType';
+import { SelectFilterOptions, SelectFilterValue } from '@/shared/modules/filters/types/filterTypes/SelectFilterConfig';
+import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
+
+const channel: CustomFilterConfig = {
+  id: 'channel',
+  label: 'Channel',
+  iconClass: 'ri-discuss-line',
+  type: FilterConfigType.CUSTOM,
+  component: ChannelFilter,
+  options: {
+  },
+  queryUrlParser: queryUrlParserByType[FilterConfigType.SELECT],
+  itemLabelRenderer(value: SelectFilterValue, options: SelectFilterOptions, data: any): string {
+    return itemLabelRendererByType[FilterConfigType.SELECT]('Channel', value, data);
+  },
+  apiFilterRenderer({ value, include }:SelectFilterValue): any[] {
+    const filter = {
+      channel: value,
+    };
+    return [
+      (include ? filter : { not: filter }),
+    ];
+  },
+};
+
+export default channel;
diff --git a/frontend/src/modules/conversation/config/filters/dateStarted/config.ts b/frontend/src/modules/conversation/config/filters/dateStarted/config.ts
new file mode 100644
index 0000000000..a0bfc2908e
--- /dev/null
+++ b/frontend/src/modules/conversation/config/filters/dateStarted/config.ts
@@ -0,0 +1,31 @@
+import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
+import {
+  SelectFilterConfig,
+  SelectFilterOptions,
+  SelectFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/SelectFilterConfig';
+import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
+import options from './options';
+
+const date: SelectFilterConfig = {
+  id: 'date',
+  label: 'Date started',
+  iconClass: 'ri-calendar-event-line',
+  type: FilterConfigType.SELECT,
+  options: {
+    options,
+  },
+  itemLabelRenderer(value: SelectFilterValue, options: SelectFilterOptions, data: any): string {
+    return itemLabelRendererByType[FilterConfigType.SELECT]('Date started', value, options, data);
+  },
+  apiFilterRenderer({ value, include }: SelectFilterValue): any[] {
+    const filter = {
+      createdAt: { gte: value },
+    };
+    return [
+      (include ? filter : { not: filter }),
+    ];
+  },
+};
+
+export default date;
diff --git a/frontend/src/modules/conversation/config/filters/dateStarted/options.ts b/frontend/src/modules/conversation/config/filters/dateStarted/options.ts
new file mode 100644
index 0000000000..763f1e6224
--- /dev/null
+++ b/frontend/src/modules/conversation/config/filters/dateStarted/options.ts
@@ -0,0 +1,31 @@
+import { SelectFilterOptionGroup } from '@/shared/modules/filters/types/filterTypes/SelectFilterConfig';
+import moment from 'moment';
+
+const options: SelectFilterOptionGroup[] = [
+  {
+    options: [
+      {
+        label: 'Last 24 hours',
+        value: moment().subtract(24, 'hour').format('YYYY-MM-DD'),
+      },
+      {
+        label: 'Last 7 days',
+        value: moment().subtract(7, 'day').format('YYYY-MM-DD'),
+      },
+      {
+        label: 'Last 14 days',
+        value: moment().subtract(14, 'day').format('YYYY-MM-DD'),
+      },
+      {
+        label: 'Last 30 days',
+        value: moment().subtract(30, 'day').format('YYYY-MM-DD'),
+      },
+      {
+        label: 'Last 90 days',
+        value: moment().subtract(90, 'day').format('YYYY-MM-DD'),
+      },
+    ],
+  },
+];
+
+export default options;
diff --git a/frontend/src/modules/conversation/config/filters/lastActivityDate/config.ts b/frontend/src/modules/conversation/config/filters/lastActivityDate/config.ts
new file mode 100644
index 0000000000..6857fd3d4b
--- /dev/null
+++ b/frontend/src/modules/conversation/config/filters/lastActivityDate/config.ts
@@ -0,0 +1,24 @@
+import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
+import {
+  DateFilterConfig,
+  DateFilterOptions,
+  DateFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/DateFilterConfig';
+import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
+import { apiFilterRendererByType } from '@/shared/modules/filters/config/apiFilterRendererByType';
+
+const lastActivityDate: DateFilterConfig = {
+  id: 'lastActivityDate',
+  label: 'Last activity',
+  iconClass: 'ri-calendar-event-line',
+  type: FilterConfigType.DATE,
+  options: {},
+  itemLabelRenderer(value: DateFilterValue, options: DateFilterOptions): string {
+    return itemLabelRendererByType[FilterConfigType.DATE]('Last activity', value, options);
+  },
+  apiFilterRenderer(value: DateFilterValue): any[] {
+    return apiFilterRendererByType[FilterConfigType.DATE]('lastActive', value);
+  },
+};
+
+export default lastActivityDate;
diff --git a/frontend/src/modules/conversation/config/filters/main.ts b/frontend/src/modules/conversation/config/filters/main.ts
new file mode 100644
index 0000000000..b7709dbf16
--- /dev/null
+++ b/frontend/src/modules/conversation/config/filters/main.ts
@@ -0,0 +1,27 @@
+import { FilterConfig } from '@/shared/modules/filters/types/FilterConfig';
+import { SearchFilterConfig } from '@/shared/modules/filters/types/filterTypes/SearchFilterConfig';
+import noOfActivities from './noOfActivities/config';
+import channel from './channel/config';
+import dateStarted from './dateStarted/config';
+import lastActivityDate from './lastActivityDate/config';
+import platform from './platform/config';
+
+export const conversationFilters: Record<string, FilterConfig> = {
+  noOfActivities,
+  channel,
+  dateStarted,
+  lastActivityDate,
+  platform,
+};
+export const conversationSearchFilter: SearchFilterConfig = {
+  placeholder: 'Search conversations',
+  apiFilterRenderer(value: string): any[] {
+    return [
+      {
+        or: [
+          { title: { textContains: value } },
+        ],
+      },
+    ];
+  },
+};
diff --git a/frontend/src/modules/conversation/config/filters/noOfActivities/config.ts b/frontend/src/modules/conversation/config/filters/noOfActivities/config.ts
new file mode 100644
index 0000000000..7ab53a370e
--- /dev/null
+++ b/frontend/src/modules/conversation/config/filters/noOfActivities/config.ts
@@ -0,0 +1,24 @@
+import {
+  NumberFilterConfig,
+  NumberFilterOptions,
+  NumberFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/NumberFilterConfig';
+import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
+import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
+import { apiFilterRendererByType } from '@/shared/modules/filters/config/apiFilterRendererByType';
+
+const noOfActivities: NumberFilterConfig = {
+  id: 'noOfActivities',
+  label: '# of activities',
+  iconClass: 'ri-radar-line',
+  type: FilterConfigType.NUMBER,
+  options: {},
+  itemLabelRenderer(value: NumberFilterValue, options: NumberFilterOptions): string {
+    return itemLabelRendererByType[FilterConfigType.NUMBER]('# of activities', value, options);
+  },
+  apiFilterRenderer(value: NumberFilterValue): any[] {
+    return apiFilterRendererByType[FilterConfigType.NUMBER]('activityCount', value);
+  },
+};
+
+export default noOfActivities;
diff --git a/frontend/src/modules/conversation/config/filters/platform/config.ts b/frontend/src/modules/conversation/config/filters/platform/config.ts
new file mode 100644
index 0000000000..0adc045848
--- /dev/null
+++ b/frontend/src/modules/conversation/config/filters/platform/config.ts
@@ -0,0 +1,44 @@
+import { FilterConfigType } from '@/shared/modules/filters/types/FilterConfig';
+import {
+  MultiSelectFilterConfig,
+  MultiSelectFilterOptions,
+  MultiSelectFilterValue,
+} from '@/shared/modules/filters/types/filterTypes/MultiSelectFilterConfig';
+import { CrowdIntegrations } from '@/integrations/integrations-config';
+import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLabelRendererByType';
+
+const platform: MultiSelectFilterConfig = {
+  id: 'platform',
+  label: 'Platform',
+  iconClass: 'ri-apps-2-line',
+  type: FilterConfigType.MULTISELECT,
+  options: {
+    options: [
+      {
+        options: [
+          ...(CrowdIntegrations.enabledConfigs.map((platform) => ({
+            label: (platform as any).name,
+            value: platform.platform,
+          }))),
+          {
+            label: 'Other',
+            value: 'other',
+          },
+        ],
+      },
+    ],
+  },
+  itemLabelRenderer(value: MultiSelectFilterValue, options: MultiSelectFilterOptions, data: any): string {
+    return itemLabelRendererByType[FilterConfigType.SELECT]('Platform', value, options, data);
+  },
+  apiFilterRenderer({ value, include }: MultiSelectFilterValue): any[] {
+    const filter = {
+      or: value.map((p) => ({ platform: p })),
+    };
+    return [
+      (include ? filter : { not: filter }),
+    ];
+  },
+};
+
+export default platform;
diff --git a/frontend/src/modules/conversation/conversation-service.js b/frontend/src/modules/conversation/conversation-service.js
index c257bbe109..38cbde1bd5 100644
--- a/frontend/src/modules/conversation/conversation-service.js
+++ b/frontend/src/modules/conversation/conversation-service.js
@@ -112,6 +112,23 @@ export class ConversationService {
     return response.data;
   }
 
+  static async listConversations(body) {
+    const sampleTenant = AuthCurrentTenant.getSampleTenantData();
+    const tenantId = sampleTenant?.id || AuthCurrentTenant.get();
+
+    const response = await authAxios.post(
+      `/tenant/${tenantId}/conversation/query`,
+      body,
+      {
+        headers: {
+          Authorization: sampleTenant?.token,
+        },
+      },
+    );
+
+    return response.data;
+  }
+
   static async query(filter, orderBy, limit, offset) {
     const body = {
       filter,
diff --git a/frontend/src/modules/conversation/store/actions.ts b/frontend/src/modules/conversation/store/actions.ts
new file mode 100644
index 0000000000..ca52e5ff93
--- /dev/null
+++ b/frontend/src/modules/conversation/store/actions.ts
@@ -0,0 +1,21 @@
+import { ConversationState } from '@/modules/conversation/store/state';
+import { ConversationService } from '@/modules/conversation/conversation-service';
+
+export default {
+  fetchConversation(this: ConversationState, body: any, reload = false): Promise<any> {
+    const mappedBody = reload ? this.savedFilterBody : body;
+    this.conversations = [];
+    return ConversationService.listConversations(mappedBody)
+      .then((data: any) => {
+        this.conversations = data.rows;
+        this.totalConversations = data.count;
+        this.savedFilterBody = mappedBody;
+        return Promise.resolve(data);
+      })
+      .catch((err: Error) => {
+        this.conversations = [];
+        this.totalConversations = 0;
+        return Promise.reject(err);
+      });
+  },
+};
diff --git a/frontend/src/modules/conversation/store/getters.ts b/frontend/src/modules/conversation/store/getters.ts
new file mode 100644
index 0000000000..02a61bed5e
--- /dev/null
+++ b/frontend/src/modules/conversation/store/getters.ts
@@ -0,0 +1,2 @@
+export default {
+};
diff --git a/frontend/src/modules/conversation/store/index.ts b/frontend/src/modules/conversation/store/index.ts
new file mode 100644
index 0000000000..f3eb229c7e
--- /dev/null
+++ b/frontend/src/modules/conversation/store/index.ts
@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia';
+import state from './state';
+import getters from './getters';
+import actions from './actions';
+
+export const useConversationStore = defineStore(
+  'conversation',
+  {
+    state,
+    getters,
+    actions,
+  },
+);
diff --git a/frontend/src/modules/conversation/store/state.ts b/frontend/src/modules/conversation/store/state.ts
new file mode 100644
index 0000000000..7e5d6fa16d
--- /dev/null
+++ b/frontend/src/modules/conversation/store/state.ts
@@ -0,0 +1,31 @@
+import { Filter } from '@/shared/modules/filters/types/FilterConfig';
+import moment from 'moment';
+
+export interface ConversationState {
+  filters: Filter,
+  savedFilterBody: any,
+  conversations: [],
+  totalConversations: number
+}
+
+export default () => ({
+  filters: {
+    search: '',
+    relation: 'and',
+    pagination: {
+      page: 1,
+      perPage: 20,
+    },
+    order: {
+      prop: 'timestamp',
+      order: 'descending',
+    },
+    lastActivity: {
+      operator: 'lt',
+      value: moment().subtract(7, 'day').format('YYYY-MM-DD'),
+    },
+  } as Filter,
+  savedFilterBody: {},
+  conversations: [],
+  totalConversations: 0,
+} as ConversationState);
diff --git a/frontend/src/shared/modules/filters/components/Filter.vue b/frontend/src/shared/modules/filters/components/Filter.vue
index 7cf5a8a61d..93c741982c 100644
--- a/frontend/src/shared/modules/filters/components/Filter.vue
+++ b/frontend/src/shared/modules/filters/components/Filter.vue
@@ -60,6 +60,7 @@ const props = defineProps<{
   customConfig?: Record<string, FilterConfig>,
   searchConfig: SearchFilterConfig,
   savedViewsConfig?: SavedViewsConfig,
+  hash?: string,
 }>();
 
 const emit = defineEmits<{(e: 'update:modelValue', value: Filter), (e: 'fetch', value: FilterQuery),}>();
@@ -120,7 +121,7 @@ watch(() => filters.value, (value: Filter) => {
   fetch(value);
   alignFilterList(value);
   const query = setQuery(value);
-  router.push({ query });
+  router.push({ query, hash: props.hash ? `#${props.hash}` : undefined });
 }, { deep: true });
 
 // Watch for query change
@@ -131,7 +132,7 @@ watch(() => route.query, (query) => {
   }, props.savedViewsConfig);
   if (!parsed || Object.keys(parsed).length === 0) {
     const query = setQuery(props.modelValue);
-    router.push({ query });
+    router.push({ query, hash: props.hash ? `#${props.hash}` : undefined });
     return;
   }
   if (JSON.stringify(parsed) !== JSON.stringify(filters.value)) {
diff --git a/frontend/src/shared/modules/filters/components/filterTypes/multiselect/MultiSelectTagsFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/multiselect/MultiSelectTagsFilter.vue
index 2c13301613..9510ef0853 100644
--- a/frontend/src/shared/modules/filters/components/filterTypes/multiselect/MultiSelectTagsFilter.vue
+++ b/frontend/src/shared/modules/filters/components/filterTypes/multiselect/MultiSelectTagsFilter.vue
@@ -1,40 +1,38 @@
 <template>
-  <div>
-    <div class="px-4 pt-3">
-      <el-select
-        v-model="form"
-        multiple
-        filterable
-        remote
-        :reserve-keyword="false"
-        placeholder="Select options"
-        :remote-method="searchOptions"
-        :teleported="false"
-        class="filter-multiselect"
-        popper-class="filter-multiselect-popper"
-      >
-        <template v-for="(group, gi) of filteredOptions" :key="gi">
-          <div
-            v-if="group.label && group.options.length > 0"
-            class="text-2xs text-gray-400 font-semibold tracking-wide leading-6 uppercase px-3 my-1"
-          >
-            {{ group.label }}
-          </div>
-          <el-option
-            v-for="option of group.options"
-            :key="option.value"
-            :label="option.label"
-            :value="option.value"
-          >
-            <el-checkbox
-              :model-value="form.includes(option.value)"
-              class="filter-checkbox h-4"
-            />
-            {{ option.label }}
-          </el-option>
-        </template>
-      </el-select>
-    </div>
+  <div v-if="form" class="px-4 pt-3">
+    <el-select
+      v-model="form"
+      multiple
+      filterable
+      remote
+      :reserve-keyword="false"
+      placeholder="Select options"
+      :remote-method="searchOptions"
+      :teleported="false"
+      class="filter-multiselect"
+      popper-class="filter-multiselect-popper"
+    >
+      <template v-for="(group, gi) of filteredOptions" :key="gi">
+        <div
+          v-if="group.label && group.options.length > 0"
+          class="text-2xs text-gray-400 font-semibold tracking-wide leading-6 uppercase px-3 my-1"
+        >
+          {{ group.label }}
+        </div>
+        <el-option
+          v-for="option of group.options"
+          :key="option.value"
+          :label="option.label"
+          :value="option.value"
+        >
+          <el-checkbox
+            :model-value="form.includes(option.value)"
+            class="filter-checkbox h-4"
+          />
+          {{ option.label }}
+        </el-option>
+      </template>
+    </el-select>
   </div>
 </template>
 
diff --git a/frontend/src/shared/modules/filters/types/FilterConfig.ts b/frontend/src/shared/modules/filters/types/FilterConfig.ts
index 24981aedf3..2f36171f1d 100644
--- a/frontend/src/shared/modules/filters/types/FilterConfig.ts
+++ b/frontend/src/shared/modules/filters/types/FilterConfig.ts
@@ -42,7 +42,7 @@ export interface FilterStatic {
     prop: string,
     order: 'descending' | 'ascending'
   },
-  settings: Record<string, any>
+  settings?: Record<string, any>
 }
 
 export type FilterObject = FilterStatic & Record<string, any>

From 7469c55b35e973f748c7a3c72793162381decde3 Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Tue, 6 Jun 2023 16:28:11 +0200
Subject: [PATCH 2/5] Fix filter loading

---
 .../src/modules/conversation/store/state.ts     |  5 +++--
 .../modules/filters/components/Filter.vue       |  9 ++++++++-
 .../filters/services/filter-api.service.ts      | 17 ++++++++++-------
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/frontend/src/modules/conversation/store/state.ts b/frontend/src/modules/conversation/store/state.ts
index 7e5d6fa16d..f8a9a504d3 100644
--- a/frontend/src/modules/conversation/store/state.ts
+++ b/frontend/src/modules/conversation/store/state.ts
@@ -20,9 +20,10 @@ export default () => ({
       prop: 'timestamp',
       order: 'descending',
     },
-    lastActivity: {
-      operator: 'lt',
+    lastActivityDate: {
+      operator: 'gt',
       value: moment().subtract(7, 'day').format('YYYY-MM-DD'),
+      include: true,
     },
   } as Filter,
   savedFilterBody: {},
diff --git a/frontend/src/shared/modules/filters/components/Filter.vue b/frontend/src/shared/modules/filters/components/Filter.vue
index 93c741982c..0098df071d 100644
--- a/frontend/src/shared/modules/filters/components/Filter.vue
+++ b/frontend/src/shared/modules/filters/components/Filter.vue
@@ -41,7 +41,7 @@
 <script setup lang="ts">
 import {
   computed,
-  defineProps, ref, watch,
+  defineProps, onMounted, ref, watch,
 } from 'vue';
 import { Filter, FilterConfig } from '@/shared/modules/filters/types/FilterConfig';
 import CrFilterDropdown from '@/shared/modules/filters/components/FilterDropdown.vue';
@@ -139,6 +139,13 @@ watch(() => route.query, (query) => {
     filters.value = parsed as Filter;
   }
 }, { immediate: true });
+
+onMounted(() => {
+  if (!!filters.value && Object.keys(filters.value).length > 0) {
+    alignFilterList(filters.value);
+    fetch(filters.value);
+  }
+});
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/shared/modules/filters/services/filter-api.service.ts b/frontend/src/shared/modules/filters/services/filter-api.service.ts
index 954003f4bc..a4d20d53e9 100644
--- a/frontend/src/shared/modules/filters/services/filter-api.service.ts
+++ b/frontend/src/shared/modules/filters/services/filter-api.service.ts
@@ -75,14 +75,17 @@ export const filterApiService = () => {
     });
 
     // build object
-    const filter = {
-      and: [
-        ...baseFilters,
-        {
-          [relation]: filters.length > 0 ? filters : undefined,
-        },
-      ],
+    let filter = {
+      [relation]: filters.length > 0 ? filters : undefined,
     };
+    if (baseFilters.length > 0) {
+      filter = {
+        and: [
+          ...baseFilters,
+          filter,
+        ],
+      };
+    }
 
     const orderBy = `${order.prop}_${order.order === 'descending' ? 'DESC' : 'ASC'}`;
 

From 3f1ad74eca9488dbe2e4c828802f4acd4a7162a0 Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Wed, 7 Jun 2023 11:16:06 +0200
Subject: [PATCH 3/5] Align activity and conversation filters

---
 .../config/filters/activityType/ActivityTypeFilter.vue   | 3 ++-
 .../activity/config/filters/activityType/config.ts       | 4 +++-
 .../modules/activity/config/filters/platform/config.ts   | 2 +-
 .../modules/activity/config/filters/sentiment/config.ts  | 2 +-
 .../conversation/config/filters/dateStarted/config.ts    | 2 +-
 .../conversation/config/filters/platform/config.ts       | 2 +-
 .../config/filters/activityType/ActivityTypeFilter.vue   | 3 ++-
 .../modules/member/config/filters/activityType/config.ts | 4 +++-
 frontend/src/modules/member/store/pinia/actions.ts       | 1 -
 .../filters/components/filterTypes/BooleanFilter.vue     | 7 ++++---
 .../filters/components/filterTypes/DateFilter.vue        | 7 ++++---
 .../components/filterTypes/MultiSelectAsyncFilter.vue    | 9 ++++-----
 .../filters/components/filterTypes/MultiSelectFilter.vue | 7 ++++---
 .../filters/components/filterTypes/NumberFilter.vue      | 8 ++++----
 .../filters/components/filterTypes/SelectFilter.vue      | 7 ++++---
 .../filters/components/filterTypes/StringFilter.vue      | 7 ++++---
 .../config/itemLabelRenderer/select.label.renderer.ts    | 7 +++++--
 .../modules/filters/config/itemLabelRendererByType.ts    | 8 +++++++-
 18 files changed, 54 insertions(+), 36 deletions(-)

diff --git a/frontend/src/modules/activity/config/filters/activityType/ActivityTypeFilter.vue b/frontend/src/modules/activity/config/filters/activityType/ActivityTypeFilter.vue
index f029625db6..a9fa60105f 100644
--- a/frontend/src/modules/activity/config/filters/activityType/ActivityTypeFilter.vue
+++ b/frontend/src/modules/activity/config/filters/activityType/ActivityTypeFilter.vue
@@ -13,6 +13,7 @@ import {
 import { CustomFilterConfig } from '@/shared/modules/filters/types/filterTypes/CustomFilterConfig';
 import { useActivityTypeStore } from '@/modules/activity/store/type';
 import { storeToRefs } from 'pinia';
+import { CrowdIntegrations } from '@/integrations/integrations-config';
 
 const props = defineProps<{
   modelValue: string,
@@ -39,7 +40,7 @@ watch(() => types, (typesValue: any) => {
     ...typesValue.value.custom,
   };
   data.value.options = Object.entries(platforms).map(([platform, activityTypes]: [string, any]) => ({
-    label: platform.replaceAll(/[A-Z]/g, (letter) => ` ${letter.toLowerCase()}`),
+    label: CrowdIntegrations.getConfig(platform)?.name ?? platform,
     options: Object.entries(activityTypes).map(([activityType, activityTypeData]) => ({
       label: activityTypeData.display.short,
       value: `${platform}:${activityType}`,
diff --git a/frontend/src/modules/activity/config/filters/activityType/config.ts b/frontend/src/modules/activity/config/filters/activityType/config.ts
index 227c7cd535..148426e736 100644
--- a/frontend/src/modules/activity/config/filters/activityType/config.ts
+++ b/frontend/src/modules/activity/config/filters/activityType/config.ts
@@ -15,7 +15,9 @@ const activityType: CustomFilterConfig = {
   },
   queryUrlParser: queryUrlParserByType[FilterConfigType.SELECT],
   itemLabelRenderer(value: SelectFilterValue, options: SelectFilterOptions, data: any): string {
-    return itemLabelRendererByType[FilterConfigType.SELECT]('Activity type', value, data);
+    return itemLabelRendererByType[FilterConfigType.SELECT]('Activity type', value, data, null, {
+      addGroupLabel: true,
+    });
   },
   apiFilterRenderer({ value, include }:SelectFilterValue): any[] {
     const [platform, activityType] = value.split(':');
diff --git a/frontend/src/modules/activity/config/filters/platform/config.ts b/frontend/src/modules/activity/config/filters/platform/config.ts
index 0adc045848..5273a936bd 100644
--- a/frontend/src/modules/activity/config/filters/platform/config.ts
+++ b/frontend/src/modules/activity/config/filters/platform/config.ts
@@ -29,7 +29,7 @@ const platform: MultiSelectFilterConfig = {
     ],
   },
   itemLabelRenderer(value: MultiSelectFilterValue, options: MultiSelectFilterOptions, data: any): string {
-    return itemLabelRendererByType[FilterConfigType.SELECT]('Platform', value, options, data);
+    return itemLabelRendererByType[FilterConfigType.MULTISELECT]('Platform', value, options, data);
   },
   apiFilterRenderer({ value, include }: MultiSelectFilterValue): any[] {
     const filter = {
diff --git a/frontend/src/modules/activity/config/filters/sentiment/config.ts b/frontend/src/modules/activity/config/filters/sentiment/config.ts
index d7f284f23a..93379a7a1d 100644
--- a/frontend/src/modules/activity/config/filters/sentiment/config.ts
+++ b/frontend/src/modules/activity/config/filters/sentiment/config.ts
@@ -16,7 +16,7 @@ const sentiment: MultiSelectFilterConfig = {
     options,
   },
   itemLabelRenderer(value: MultiSelectFilterValue, options: MultiSelectFilterOptions): string {
-    return itemLabelRendererByType[FilterConfigType.MULTISELECT]('Avg. sentiment', value, options);
+    return itemLabelRendererByType[FilterConfigType.MULTISELECT]('Sentiment', value, options);
   },
   apiFilterRenderer({ value, include }: MultiSelectFilterValue): any[] {
     const filter = {
diff --git a/frontend/src/modules/conversation/config/filters/dateStarted/config.ts b/frontend/src/modules/conversation/config/filters/dateStarted/config.ts
index a0bfc2908e..90e380cebc 100644
--- a/frontend/src/modules/conversation/config/filters/dateStarted/config.ts
+++ b/frontend/src/modules/conversation/config/filters/dateStarted/config.ts
@@ -8,7 +8,7 @@ import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLab
 import options from './options';
 
 const date: SelectFilterConfig = {
-  id: 'date',
+  id: 'dateStarted',
   label: 'Date started',
   iconClass: 'ri-calendar-event-line',
   type: FilterConfigType.SELECT,
diff --git a/frontend/src/modules/conversation/config/filters/platform/config.ts b/frontend/src/modules/conversation/config/filters/platform/config.ts
index 0adc045848..5273a936bd 100644
--- a/frontend/src/modules/conversation/config/filters/platform/config.ts
+++ b/frontend/src/modules/conversation/config/filters/platform/config.ts
@@ -29,7 +29,7 @@ const platform: MultiSelectFilterConfig = {
     ],
   },
   itemLabelRenderer(value: MultiSelectFilterValue, options: MultiSelectFilterOptions, data: any): string {
-    return itemLabelRendererByType[FilterConfigType.SELECT]('Platform', value, options, data);
+    return itemLabelRendererByType[FilterConfigType.MULTISELECT]('Platform', value, options, data);
   },
   apiFilterRenderer({ value, include }: MultiSelectFilterValue): any[] {
     const filter = {
diff --git a/frontend/src/modules/member/config/filters/activityType/ActivityTypeFilter.vue b/frontend/src/modules/member/config/filters/activityType/ActivityTypeFilter.vue
index 38b4399ad8..23142a83ce 100644
--- a/frontend/src/modules/member/config/filters/activityType/ActivityTypeFilter.vue
+++ b/frontend/src/modules/member/config/filters/activityType/ActivityTypeFilter.vue
@@ -13,6 +13,7 @@ import {
 import { CustomFilterConfig } from '@/shared/modules/filters/types/filterTypes/CustomFilterConfig';
 import { useActivityTypeStore } from '@/modules/activity/store/type';
 import { storeToRefs } from 'pinia';
+import { CrowdIntegrations } from '@/integrations/integrations-config';
 
 const props = defineProps<{
   modelValue: string
@@ -42,7 +43,7 @@ watch(() => types, (typesValue: any) => {
   };
 
   data.value.options = Object.entries(platforms).map(([platform, activityTypes]: [string, any]) => ({
-    label: platform.replaceAll(/[A-Z]/g, (letter) => ` ${letter.toLowerCase()}`),
+    label: CrowdIntegrations.getConfig(platform)?.name ?? platform,
     options: Object.entries(activityTypes).map(([activityType, activityTypeData]) => ({
       label: activityTypeData.display.short,
       value: `${platform}:${activityType}`,
diff --git a/frontend/src/modules/member/config/filters/activityType/config.ts b/frontend/src/modules/member/config/filters/activityType/config.ts
index 3b9bd492ff..fc872b23a6 100644
--- a/frontend/src/modules/member/config/filters/activityType/config.ts
+++ b/frontend/src/modules/member/config/filters/activityType/config.ts
@@ -16,7 +16,9 @@ const activityType: CustomFilterConfig = {
   },
   queryUrlParser: queryUrlParserByType[FilterConfigType.SELECT],
   itemLabelRenderer(value: SelectFilterValue, options: SelectFilterOptions, data: any): string {
-    return itemLabelRendererByType[FilterConfigType.SELECT]('Activity type', value, data);
+    return itemLabelRendererByType[FilterConfigType.SELECT]('Activity type', value, data, null, {
+      addGroupLabel: true,
+    });
   },
   apiFilterRenderer(value: SelectFilterValue): any[] {
     return apiFilterRendererByType[FilterConfigType.SELECT]('activityTypes', value);
diff --git a/frontend/src/modules/member/store/pinia/actions.ts b/frontend/src/modules/member/store/pinia/actions.ts
index fabd5ffbb7..06bfe64935 100644
--- a/frontend/src/modules/member/store/pinia/actions.ts
+++ b/frontend/src/modules/member/store/pinia/actions.ts
@@ -12,7 +12,6 @@ export default {
   fetchMembers(this: MemberState, { body = {}, reload = false } :{ body?: any, reload?: boolean }): Promise<Pagination<Member>> {
     const mappedBody = reload ? this.savedFilterBody : body;
     this.selectedMembers = [];
-    this.members = [];
     return MemberService.listMembers(mappedBody)
       .then((data: Pagination<Member>) => {
         this.members = data.rows;
diff --git a/frontend/src/shared/modules/filters/components/filterTypes/BooleanFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/BooleanFilter.vue
index 39e0396dcb..a46d96c1d5 100644
--- a/frontend/src/shared/modules/filters/components/filterTypes/BooleanFilter.vue
+++ b/frontend/src/shared/modules/filters/components/filterTypes/BooleanFilter.vue
@@ -54,9 +54,10 @@ const rules: any = {
 useVuelidate(rules, form);
 
 onMounted(() => {
-  if (!form.value || Object.keys(form.value).length < 2) {
-    form.value = defaultForm;
-  }
+  form.value = {
+    ...defaultForm,
+    ...form.value,
+  };
 });
 </script>
 
diff --git a/frontend/src/shared/modules/filters/components/filterTypes/DateFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/DateFilter.vue
index 0a372861ef..51cab0aeb6 100644
--- a/frontend/src/shared/modules/filters/components/filterTypes/DateFilter.vue
+++ b/frontend/src/shared/modules/filters/components/filterTypes/DateFilter.vue
@@ -83,9 +83,10 @@ watch(() => form.value.operator, (operator, previousOperator) => {
 });
 
 onMounted(() => {
-  if (!form.value || Object.keys(form.value).length < 3) {
-    form.value = defaultForm;
-  }
+  form.value = {
+    ...defaultForm,
+    ...form.value,
+  };
 });
 </script>
 
diff --git a/frontend/src/shared/modules/filters/components/filterTypes/MultiSelectAsyncFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/MultiSelectAsyncFilter.vue
index 170be79d44..27c066ab12 100644
--- a/frontend/src/shared/modules/filters/components/filterTypes/MultiSelectAsyncFilter.vue
+++ b/frontend/src/shared/modules/filters/components/filterTypes/MultiSelectAsyncFilter.vue
@@ -113,8 +113,6 @@ watch(() => data.value.selected, (value) => {
 const loading = ref<boolean>(false);
 const filteredOptions = ref<MultiSelectAsyncFilterOption[]>([]);
 
-const unselectedOptions = computed(() => filteredOptions.value.filter((o) => !props.modelValue.value.includes(o.value)));
-
 const searchOptions = (query: string) => {
   loading.value = true;
   props.remoteMethod(query)
@@ -128,9 +126,10 @@ const searchOptions = (query: string) => {
 
 onMounted(() => {
   searchOptions('');
-  if (!props.modelValue.value || Object.keys(props.modelValue.value).length < 2) {
-    emit('update:modelValue', defaultForm);
-  }
+  emit('update:modelValue', {
+    ...defaultForm,
+    ...form.value,
+  });
   if (!data.value.selected) {
     data.value.selected = [];
   }
diff --git a/frontend/src/shared/modules/filters/components/filterTypes/MultiSelectFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/MultiSelectFilter.vue
index 2f3728864b..1fcced10f5 100644
--- a/frontend/src/shared/modules/filters/components/filterTypes/MultiSelectFilter.vue
+++ b/frontend/src/shared/modules/filters/components/filterTypes/MultiSelectFilter.vue
@@ -61,9 +61,10 @@ const rules: any = {
 useVuelidate(rules, form);
 
 onMounted(() => {
-  if (!form.value || Object.keys(form.value).length < 2) {
-    form.value = defaultForm;
-  }
+  form.value = {
+    ...defaultForm,
+    ...form.value,
+  };
 });
 </script>
 
diff --git a/frontend/src/shared/modules/filters/components/filterTypes/NumberFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/NumberFilter.vue
index 5414fb5a0f..b71eca8477 100644
--- a/frontend/src/shared/modules/filters/components/filterTypes/NumberFilter.vue
+++ b/frontend/src/shared/modules/filters/components/filterTypes/NumberFilter.vue
@@ -119,7 +119,6 @@ const rules: any = computed(() => ({
 const $v = useVuelidate(rules, form);
 
 watch(() => form.value.operator, (operator) => {
-  console.log(operator);
   if (operator !== FilterNumberOperator.BETWEEN) {
     form.value.valueTo = undefined;
   } else {
@@ -128,9 +127,10 @@ watch(() => form.value.operator, (operator) => {
 });
 
 onMounted(() => {
-  if (!form.value || Object.keys(form.value).length < 3>) {
-    form.value = defaultForm;
-  }
+  form.value = {
+    ...defaultForm,
+    ...form.value,
+  };
 });
 </script>
 
diff --git a/frontend/src/shared/modules/filters/components/filterTypes/SelectFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/SelectFilter.vue
index 1cc955d80b..8ec336d7cb 100644
--- a/frontend/src/shared/modules/filters/components/filterTypes/SelectFilter.vue
+++ b/frontend/src/shared/modules/filters/components/filterTypes/SelectFilter.vue
@@ -79,9 +79,10 @@ const rules: any = {
 useVuelidate(rules, form);
 
 onMounted(() => {
-  if (!form.value || Object.keys(form.value).length < 2) {
-    form.value = defaultForm;
-  }
+  form.value = {
+    ...defaultForm,
+    ...form.value,
+  };
 });
 </script>
 
diff --git a/frontend/src/shared/modules/filters/components/filterTypes/StringFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/StringFilter.vue
index a5c4127bb8..8bdf137438 100644
--- a/frontend/src/shared/modules/filters/components/filterTypes/StringFilter.vue
+++ b/frontend/src/shared/modules/filters/components/filterTypes/StringFilter.vue
@@ -62,9 +62,10 @@ const rules: any = {
 useVuelidate(rules, form);
 
 onMounted(() => {
-  if (!form.value || Object.keys(form.value).length < 3) {
-    form.value = defaultForm;
-  }
+  form.value = {
+    ...defaultForm,
+    ...form.value,
+  };
 });
 </script>
 
diff --git a/frontend/src/shared/modules/filters/config/itemLabelRenderer/select.label.renderer.ts b/frontend/src/shared/modules/filters/config/itemLabelRenderer/select.label.renderer.ts
index 3e380e7336..cd08a8260d 100644
--- a/frontend/src/shared/modules/filters/config/itemLabelRenderer/select.label.renderer.ts
+++ b/frontend/src/shared/modules/filters/config/itemLabelRenderer/select.label.renderer.ts
@@ -3,8 +3,11 @@ import {
   SelectFilterValue,
 } from '@/shared/modules/filters/types/filterTypes/SelectFilterConfig';
 
-export const selectItemLabelRenderer = (property: string, { value, include }: SelectFilterValue, options: SelectFilterOptions): string => {
+export const selectItemLabelRenderer = (property: string, { value, include }: SelectFilterValue, options: SelectFilterOptions, data: any, {
+  addGroupLabel,
+} = { addGroupLabel: false }): string => {
   const excludeText = !include ? ' (exclude)' : '';
   const option = options.options.map((g) => g.options).flat().find((o) => o.value === value);
-  return `<b>${property}${excludeText}:</b>${option?.label || value || '...'}`;
+  const group = options.options.find((g) => g.options.find((o) => o.value === value));
+  return `<b>${property}${excludeText}:</b>${addGroupLabel ? `${group?.label} - ` : ''}${option?.label || value || '...'}`;
 };
diff --git a/frontend/src/shared/modules/filters/config/itemLabelRendererByType.ts b/frontend/src/shared/modules/filters/config/itemLabelRendererByType.ts
index 1d6403c199..5cc49a3d19 100644
--- a/frontend/src/shared/modules/filters/config/itemLabelRendererByType.ts
+++ b/frontend/src/shared/modules/filters/config/itemLabelRendererByType.ts
@@ -11,7 +11,13 @@ import {
   multiSelectItemLabelRenderer,
 } from './itemLabelRenderer/multiselect.label.renderer';
 
-export const itemLabelRendererByType: Record<FilterConfigType, (property: string, value: any, options: any, data?: any) => string> = {
+export const itemLabelRendererByType: Record<FilterConfigType, (
+  property: string,
+  value: any,
+  options: any,
+  data?: any,
+  renderOptions?: any
+) => string> = {
   [FilterConfigType.BOOLEAN]: booleanItemLabelRenderer,
   [FilterConfigType.NUMBER]: numberItemLabelRenderer,
   [FilterConfigType.DATE]: dateItemLabelRenderer,

From 3c5ac2b19a6257f09e9b4d1c9c3a579e2995acfa Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Thu, 8 Jun 2023 08:32:20 +0200
Subject: [PATCH 4/5] Fix conversation sorting issues

---
 .../modules/activity/config/filters/main.ts   |  2 +-
 .../components/conversation-list.vue          | 31 +++++++++++++------
 .../src/modules/conversation/store/state.ts   |  2 +-
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/frontend/src/modules/activity/config/filters/main.ts b/frontend/src/modules/activity/config/filters/main.ts
index 584aab0d7a..67dd7321fe 100644
--- a/frontend/src/modules/activity/config/filters/main.ts
+++ b/frontend/src/modules/activity/config/filters/main.ts
@@ -22,7 +22,7 @@ export const activitySearchFilter: SearchFilterConfig = {
       {
         or: [
           { title: { textContains: value } },
-          { body: { contains: [value] } },
+          { body: { textContains: value } },
         ],
       },
     ];
diff --git a/frontend/src/modules/conversation/components/conversation-list.vue b/frontend/src/modules/conversation/components/conversation-list.vue
index ce8b2e380d..27b73a54a2 100644
--- a/frontend/src/modules/conversation/components/conversation-list.vue
+++ b/frontend/src/modules/conversation/components/conversation-list.vue
@@ -23,16 +23,16 @@
 
       <div v-else>
         <div class="mb-4">
-          <!--          <app-pagination-sorter-->
-          <!--            v-model="sorterFilter"-->
-          <!--            :page-size="Number(pagination.pageSize)"-->
-          <!--            :total="count"-->
-          <!--            :current-page="pagination.currentPage"-->
-          <!--            :has-page-counter="false"-->
-          <!--            module="conversation"-->
-          <!--            position="top"-->
-          <!--            @change-sorter="doChangeFilter"-->
-          <!--          />-->
+          <app-pagination-sorter
+            v-model="sorterFilter"
+            :page-size="Number(pagination.perPage)"
+            :total="totalConversations"
+            :current-page="pagination.page"
+            :has-page-counter="false"
+            module="conversation"
+            position="top"
+            @change-sorter="doChangeFilter"
+          />
         </div>
 
         <!-- Conversation item list -->
@@ -95,12 +95,23 @@ const { fetchConversation } = conversationStore;
 
 const loading = ref(false);
 
+const sorterFilter = computed(() => (filters.value.order.prop === 'activityCount'
+  ? 'trending'
+  : 'recentActivity'));
+
 const emptyState = computed(() => ({
   title: 'No conversations found',
   description:
         "We couldn't find any results that match your search criteria, please try a different query",
 }));
 
+const doChangeFilter = (filter) => {
+  filters.value.order = {
+    prop: filter === 'recentActivity' ? 'lastActive' : 'activityCount',
+    order: 'descending',
+  };
+};
+
 const pagination = computed(
   () => filters.value.pagination,
 );
diff --git a/frontend/src/modules/conversation/store/state.ts b/frontend/src/modules/conversation/store/state.ts
index f8a9a504d3..ae0ce98217 100644
--- a/frontend/src/modules/conversation/store/state.ts
+++ b/frontend/src/modules/conversation/store/state.ts
@@ -17,7 +17,7 @@ export default () => ({
       perPage: 20,
     },
     order: {
-      prop: 'timestamp',
+      prop: 'activityCount',
       order: 'descending',
     },
     lastActivityDate: {

From a61c2e7fc126e98ba4caec211d5f727ecb5029dc Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Thu, 8 Jun 2023 08:50:54 +0200
Subject: [PATCH 5/5] Fix spacing

---
 frontend/src/shared/modules/filters/components/Filter.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/shared/modules/filters/components/Filter.vue b/frontend/src/shared/modules/filters/components/Filter.vue
index 0098df071d..c32570b770 100644
--- a/frontend/src/shared/modules/filters/components/Filter.vue
+++ b/frontend/src/shared/modules/filters/components/Filter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-8">
+  <div class="mb-4">
     <div class="flex justify-end pb-4">
       <cr-filter-search v-model="filters.search" :placeholder="props.searchConfig.placeholder">
         <template #append>