From ece638bbf5406d2d780d6d60e943a4bc9cf0f9d1 Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Fri, 29 Sep 2023 16:01:56 +0200
Subject: [PATCH 01/22] Custom views creation

---
 frontend/src/i18n/en.js                       |   4 +-
 .../devto/components/devto-connect-drawer.vue |  10 +-
 .../github/components/github-connect.vue      |   6 +-
 .../components/hackerNews-connect-drawer.vue  |   6 +-
 .../linkedin/components/linkedin-connect.vue  |   2 +-
 .../components/linkedin-settings-drawer.vue   |   6 +-
 frontend/src/integrations/linkedin/config.js  |   2 +-
 .../activity/components/activity-header.vue   |   2 +-
 .../components/dashboard-organizations.vue    |   4 +-
 .../dashboard-organization-item.vue           |   6 +-
 .../components/integration-list-page.vue      |  10 +-
 .../modules/integration/integration-store.js  |   2 +-
 .../src/modules/layout/layout-page-content.js |   6 +-
 .../bulk/bulk-edit-attribute-popover.vue      |   4 +-
 .../form/member-form-organizations-create.vue |  14 +-
 .../form/member-form-organizations-drawer.vue |  22 +-
 .../form/member-form-organizations.vue        |  22 +-
 .../member/components/member-dropdown.vue     |   4 +-
 .../components/member-organizations.vue       |   8 +-
 .../modules/member/config/saved-views/main.ts |   8 +-
 .../settings/bot/MemberBotSetting.vue         |  51 +++++
 .../settings/{bot.ts => bot/config.ts}        |   9 +-
 .../settings/common/includeFilterRenderer.ts  |   2 +-
 .../{ => common}/types/IncludeEnum.ts         |   0
 .../config.ts}                                |   7 +-
 .../teamMember/MemberTeamMemberSetting.vue    |  54 +++++
 .../{teamMember.ts => teamMember/config.ts}   |   9 +-
 .../modules/member/pages/member-list-page.vue |   1 +
 .../form/organization-form-attributes.vue     |   2 +-
 .../form/organization-form-identities.vue     |   2 +-
 .../list/organization-list-table.vue          |   6 +-
 .../list/organization-list-toolbar.vue        |   2 +-
 .../components/organization-badge.vue         |   2 +-
 .../components/organization-dropdown.vue      |  18 +-
 .../components/organization-merge-dialog.vue  |   4 +-
 .../components/organization-name.vue          |   2 +-
 .../organization-selection-dropdown.vue       |   6 +-
 ...organization-merge-suggestions-details.vue |  24 +--
 .../view/_aside/_aside-enriched.vue           |   2 +-
 .../view/organization-view-aside.vue          |   2 +-
 .../view/organization-view-header.vue         |  18 +-
 .../view/organization-view-members.vue        |   2 +-
 .../organization/config/enrichment/index.ts   |   2 +-
 .../filters/enrichedOrganization/config.ts    |   4 +-
 .../settings/common/includeFilterRenderer.ts  |   2 +-
 .../organization/organization-field.js        |   2 +-
 .../organization/organization-model.js        |   2 +-
 .../pages/organization-form-page.vue          |  16 +-
 .../pages/organization-list-page.vue          |   2 +-
 .../pages/organization-view-page.vue          |   4 +-
 .../settings/settings-pricing-plans.js        |   4 +-
 .../cube/_query_builder/DimensionSelect.vue   |  12 +-
 .../cube/_query_builder/FilterComponent.vue   |  12 +-
 frontend/src/shared/form/form-item.vue        |   2 +-
 .../saved-views/components/SavedViews.vue     |  51 ++++-
 .../components/forms/SavedViewForm.vue        | 202 ++++++++++++++++++
 .../saved-views/types/SavedViewsConfig.ts     |   3 +-
 57 files changed, 523 insertions(+), 170 deletions(-)
 create mode 100644 frontend/src/modules/member/config/saved-views/settings/bot/MemberBotSetting.vue
 rename frontend/src/modules/member/config/saved-views/settings/{bot.ts => bot/config.ts} (69%)
 rename frontend/src/modules/member/config/saved-views/settings/{ => common}/types/IncludeEnum.ts (100%)
 rename frontend/src/modules/member/config/saved-views/settings/{organization.ts => organization/config.ts} (79%)
 create mode 100644 frontend/src/modules/member/config/saved-views/settings/teamMember/MemberTeamMemberSetting.vue
 rename frontend/src/modules/member/config/saved-views/settings/{teamMember.ts => teamMember/config.ts} (67%)
 create mode 100644 frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue

diff --git a/frontend/src/i18n/en.js b/frontend/src/i18n/en.js
index 21fc3160dc..06125e9728 100644
--- a/frontend/src/i18n/en.js
+++ b/frontend/src/i18n/en.js
@@ -237,12 +237,12 @@ const en = {
       create: {
         success: 'Organization successfully saved',
         error:
-          'There was an error creating the organization',
+          'There was an error creating the config',
       },
       update: {
         success: 'Organization successfully saved',
         error:
-          'There was an error updating the organization',
+          'There was an error updating the config',
       },
       destroy: {
         success: 'Organization successfully deleted',
diff --git a/frontend/src/integrations/devto/components/devto-connect-drawer.vue b/frontend/src/integrations/devto/components/devto-connect-drawer.vue
index fd95563491..663531cf9e 100644
--- a/frontend/src/integrations/devto/components/devto-connect-drawer.vue
+++ b/frontend/src/integrations/devto/components/devto-connect-drawer.vue
@@ -17,11 +17,11 @@
     <template #content>
       <el-form class="form integration-devto-form">
         <div class="flex flex-col gap-2 items-start">
-          <span class="text-sm font-medium">Track organization articles</span>
+          <span class="text-sm font-medium">Track config articles</span>
           <span
             class="text-2xs font-light mb-2 text-gray-600"
           >
-            Monitor all articles from organization accounts
+            Monitor all articles from config accounts
           </span>
           <el-form-item
             v-for="org in organizations"
@@ -40,7 +40,7 @@
                 v-model="org.username"
                 class="text-green-500"
                 spellcheck="false"
-                placeholder="Enter organization slug"
+                placeholder="Enter config slug"
                 @blur="handleOrganizationValidation(org.id)"
               >
                 <template #prepend>
@@ -73,7 +73,7 @@
             class="btn btn-link btn-link--primary"
             @click="addNewOrganization"
           >
-            + Add organization link
+            + Add config link
           </el-button>
           <span class="text-sm font-medium mt-8">Track user articles</span>
           <span
@@ -389,7 +389,7 @@ export default {
     },
 
     async handleOrganizationValidation(id) {
-      const organization = this.organizations.find(
+      const config = this.organizations.find(
         (o) => o.id === id,
       );
 
diff --git a/frontend/src/integrations/github/components/github-connect.vue b/frontend/src/integrations/github/components/github-connect.vue
index 2a32e7a549..45e401e47a 100644
--- a/frontend/src/integrations/github/components/github-connect.vue
+++ b/frontend/src/integrations/github/components/github-connect.vue
@@ -24,14 +24,14 @@ const connect = () => {
   ConfirmDialog({
     type: 'notification',
     title:
-      'Are you the admin of your GitHub organization?',
+      'Are you the admin of your GitHub config?',
     titleClass: 'text-lg pt-2',
     message:
       `Only GitHub users with admin permissions are able to connect crowd.dev's GitHub integration.
       If you are an organization member, you will need an approval from the GitHub workspace admin. <a href="https://docs.crowd.dev/docs/github-integration" target="_blank">Read more</a>`,
     icon: 'ri-information-line',
-    confirmButtonText: 'I\'m the GitHub organization admin',
-    cancelButtonText: 'Invite organization admin to this workspace',
+    confirmButtonText: 'I\'m the GitHub config admin',
+    cancelButtonText: 'Invite config admin to this workspace',
     verticalCancelButtonClass: 'btn btn--md btn--primary w-full',
     verticalConfirmButtonClass: 'btn btn--md btn--bordered w-full !mb-2',
     vertical: true,
diff --git a/frontend/src/integrations/hackernews/components/hackerNews-connect-drawer.vue b/frontend/src/integrations/hackernews/components/hackerNews-connect-drawer.vue
index b380aaace3..8c434045bd 100644
--- a/frontend/src/integrations/hackernews/components/hackerNews-connect-drawer.vue
+++ b/frontend/src/integrations/hackernews/components/hackerNews-connect-drawer.vue
@@ -17,7 +17,7 @@
     <template #content>
       <div class="flex flex-col gap-2 items-start mb-2">
         <span class="text-xs font-light mb-2 text-gray-900">
-          Monitor mentions of your community/organization on
+          Monitor mentions of your community/config on
           Hacker News. <br />Historical data is available
           after the 1st of December 2022.
           <a
@@ -27,11 +27,11 @@
             Read more</a>.
         </span>
         <span class="text-sm font-medium">Track posts mentioning your
-          community/organization</span>
+          community/config</span>
         <span
           class="text-2xs font-light mb-2 text-gray-600"
         >
-          Monitor your community/organization being
+          Monitor your community/config being
           mentioned in the top 500 of Hacker News. <br />
         </span>
         <app-keywords-input
diff --git a/frontend/src/integrations/linkedin/components/linkedin-connect.vue b/frontend/src/integrations/linkedin/components/linkedin-connect.vue
index 3074c62c72..65f5e34306 100644
--- a/frontend/src/integrations/linkedin/components/linkedin-connect.vue
+++ b/frontend/src/integrations/linkedin/components/linkedin-connect.vue
@@ -65,7 +65,7 @@ const upgradePlan = () => {
 const drawerVisible = ref(false);
 const isLinkedinEnabled = ref(false);
 
-// Only render linkedin drawer and settings button, if integration has settings and more than 1 organization
+// Only render linkedin drawer and settings button, if integration has settings and more than 1 config
 const hasSettings = computed(
   () => !!props.integration.settings
     && props.integration.settings.organizations.length > 1,
diff --git a/frontend/src/integrations/linkedin/components/linkedin-settings-drawer.vue b/frontend/src/integrations/linkedin/components/linkedin-settings-drawer.vue
index cf034505ae..0b9aabff2b 100644
--- a/frontend/src/integrations/linkedin/components/linkedin-settings-drawer.vue
+++ b/frontend/src/integrations/linkedin/components/linkedin-settings-drawer.vue
@@ -31,7 +31,7 @@
             class="text-2xs font-light mb-2 text-gray-600"
           >
             Monitor all comments and reactions to posts or
-            shares from one of your associated organization
+            shares from one of your associated config
             profiles. <br />
           </span>
           <el-select
@@ -39,7 +39,7 @@
             placeholder="Select option"
           >
             <el-option
-              v-for="organization of organizations"
+              v-for="config of organizations"
               :key="organization.id"
               :label="organization.vanityName"
               :value="organization.id"
@@ -55,7 +55,7 @@
             <i class="ri-alert-line mr-2" />
             <div class="text-sm pt-0.5">
               <span class="font-medium">Action required.</span>
-              Select one of your associated organization
+              Select one of your associated config
               profiles to start tracking LinkedIn activities
             </div>
           </div>
diff --git a/frontend/src/integrations/linkedin/config.js b/frontend/src/integrations/linkedin/config.js
index c9ae4b962c..7f859ea0b3 100644
--- a/frontend/src/integrations/linkedin/config.js
+++ b/frontend/src/integrations/linkedin/config.js
@@ -6,7 +6,7 @@ export default {
   backgroundColor: '#D4E1F0',
   borderColor: '#D4E1F0',
   description:
-    "Connect LinkedIn to sync comments and reactions from your organization's posts.",
+    "Connect LinkedIn to sync comments and reactions from your config's posts.",
   image: '/images/integrations/linkedin.png',
   connectComponent: LinkedInConnect,
   reactions: {
diff --git a/frontend/src/modules/activity/components/activity-header.vue b/frontend/src/modules/activity/components/activity-header.vue
index 0f0d629a59..884046b025 100644
--- a/frontend/src/modules/activity/components/activity-header.vue
+++ b/frontend/src/modules/activity/components/activity-header.vue
@@ -24,7 +24,7 @@
               :src="activity.organization.logo"
               :alt="`${activity.organization.displayName} logo`"
             />
-            <span class="text-gray-900 group-hover:text-brand-500 transition">{{ activity.organization.displayName }}</span>
+            <span class="text-gray-900 group-hover:text-brand-500 transition">{{ activity.config.displayName }}</span>
           </div>
         </router-link>
       </div>
diff --git a/frontend/src/modules/dashboard/components/dashboard-organizations.vue b/frontend/src/modules/dashboard/components/dashboard-organizations.vue
index 2394325575..5ca90a6ab6 100644
--- a/frontend/src/modules/dashboard/components/dashboard-organizations.vue
+++ b/frontend/src/modules/dashboard/components/dashboard-organizations.vue
@@ -58,7 +58,7 @@
           </div>
           <div v-else>
             <app-dashboard-organization-item
-              v-for="organization of recentOrganizations"
+              v-for="config of recentOrganizations"
               :key="organization.id"
               :show-badge="false"
               class="mb-4"
@@ -139,7 +139,7 @@
           </div>
           <div v-else>
             <app-dashboard-organization-item
-              v-for="organization of activeOrganizations"
+              v-for="config of activeOrganizations"
               :key="organization.id"
               class="mb-4"
               :organization="organization"
diff --git a/frontend/src/modules/dashboard/components/organization/dashboard-organization-item.vue b/frontend/src/modules/dashboard/components/organization/dashboard-organization-item.vue
index 3f35a13b27..5619bbb4db 100644
--- a/frontend/src/modules/dashboard/components/organization/dashboard-organization-item.vue
+++ b/frontend/src/modules/dashboard/components/organization/dashboard-organization-item.vue
@@ -28,13 +28,13 @@
         <h6
           class="text-xs leading-5 font-medium text-gray-900 hover:text-brand-500 transition"
         >
-          {{ organization.displayName || organization.name }}
+          {{ config.displayName || config.name }}
         </h6>
       </div>
       <div>
         <p class="text-2xs leading-4.5 !text-gray-400">
-          {{ organization.memberCount }} member{{
-            organization.memberCount > 1 ? 's' : ''
+          {{ config.memberCount }} member{{
+            config.memberCount > 1 ? 's' : ''
           }}
         </p>
       </div>
diff --git a/frontend/src/modules/integration/components/integration-list-page.vue b/frontend/src/modules/integration/components/integration-list-page.vue
index 8c6a01737f..00ca6bf44e 100644
--- a/frontend/src/modules/integration/components/integration-list-page.vue
+++ b/frontend/src/modules/integration/components/integration-list-page.vue
@@ -125,14 +125,14 @@ export default {
             vertical: true,
             type: 'custom',
             icon: '<img src="https://cdn-icons-png.flaticon.com/512/3800/3800024.png" class="h-8 w-8" alt="slack logo" />',
-            title: `<span class="flex items-start gap-1">Connect Slack bot 
+            title: `<span class="flex items-start gap-1">Connect Slack config
               <span class="text-brand-500 text-3xs leading-3 pt-1 font-normal">Required</span></span>`,
             titleClass: 'text-lg',
             message: `
-            <img src="/images/integrations/slack-bot.png" class="mb-6" alt="slack bot installation" />
-            To fetch data from Slack, you need to install the crowd.dev Slack bot and add it to all channels you want to track. <br><br>
-            You can either add the Slack bot directly from a channel, or add the app via channel Integrations.`,
-            confirmButtonText: 'How to connect Slack bot',
+            <img src="/images/integrations/slack-config.png" class="mb-6" alt="slack config installation" />
+            To fetch data from Slack, you need to install the crowd.dev Slack config and add it to all channels you want to track. <br><br>
+            You can either add the Slack config directly from a channel, or add the app via channel Integrations.`,
+            confirmButtonText: 'How to connect Slack config',
             showCancelButton: false,
             messageClass: 'text-xs !leading-5 !mt-1 text-gray-600',
             verticalCustomClass: 'custom-slack-message-box',
diff --git a/frontend/src/modules/integration/integration-store.js b/frontend/src/modules/integration/integration-store.js
index e281742b62..909c1b00b8 100644
--- a/frontend/src/modules/integration/integration-store.js
+++ b/frontend/src/modules/integration/integration-store.js
@@ -358,7 +358,7 @@ export default {
 
     async doDiscordConnect({ commit }, { guildId }) {
       // Function to connect to Discord. We just need to store the
-      // guildId to be able to match bot events to users.
+      // guildId to be able to match config events to users.
       try {
         commit('CREATE_STARTED');
 
diff --git a/frontend/src/modules/layout/layout-page-content.js b/frontend/src/modules/layout/layout-page-content.js
index af76dff7ac..09449e974c 100644
--- a/frontend/src/modules/layout/layout-page-content.js
+++ b/frontend/src/modules/layout/layout-page-content.js
@@ -5,15 +5,15 @@ export const pageContent = {
     title:
       'Get a pulse of the organizations represented in your community',
     mainContent:
-      'Get a complete organization directory that you can search, filter, and sort instantly. Each organization also '
-      + 'has its own profile page, which highlights key information about that organization and all the community '
+      'Get a complete config directory that you can search, filter, and sort instantly. Each config also '
+      + 'has its own profile page, which highlights key information about that config and all the community '
       + 'members that belong to it. Keeping a pulse of which organizations your members are representing is extremely '
       + 'important for a successful bottom-up growth strategy.',
     imageSrc: '/images/paywall/organizations.png',
     imageClass: 'mt-8',
     secondaryContent:
       'Organizations are companies or entities within your community. If a member that works at a certain company '
-      + 'joins your community, that company will be added as an organization.',
+      + 'joins your community, that company will be added as an config.',
     featuresList: [],
   },
   eagleEye: {
diff --git a/frontend/src/modules/member/components/bulk/bulk-edit-attribute-popover.vue b/frontend/src/modules/member/components/bulk/bulk-edit-attribute-popover.vue
index b8d7ba9f17..e4c01b2b67 100644
--- a/frontend/src/modules/member/components/bulk/bulk-edit-attribute-popover.vue
+++ b/frontend/src/modules/member/components/bulk/bulk-edit-attribute-popover.vue
@@ -211,14 +211,14 @@ const multiSelectCreateFn = computed(() => {
 
 const multiSelectPlaceholder = computed(() => {
   if (selectedAttribute.value.name === 'organizations') {
-    return 'Select or create an organization';
+    return 'Select or create an config';
   }
   return 'Enter option(s) or create one';
 });
 
 const multiSelectClassName = computed(() => {
   if (selectedAttribute.value.name === 'organizations') {
-    return 'organization-input w-full';
+    return 'config-input w-full';
   }
   return 'w-full multi-select-field';
 });
diff --git a/frontend/src/modules/member/components/form/member-form-organizations-create.vue b/frontend/src/modules/member/components/form/member-form-organizations-create.vue
index 7bd28fb93f..11cd62cc6d 100644
--- a/frontend/src/modules/member/components/form/member-form-organizations-create.vue
+++ b/frontend/src/modules/member/components/form/member-form-organizations-create.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-dialog v-model="isOpened" :title="isEdit ? 'Edit organization' : 'Add organization'">
+  <app-dialog v-model="isOpened" :title="isEdit ? 'Edit config' : 'Add config'">
     <template #content>
       <div class="px-6">
         <app-form-item
@@ -15,8 +15,8 @@
             v-model="form.organization"
             :fetch-fn="fetchOrganizationsFn"
             :create-fn="createOrganizationFn"
-            placeholder="Select or create an organization"
-            input-class="organization-input"
+            placeholder="Select or create an config"
+            input-class="config-input"
             store-key="memberOrganizations"
             :create-if-not-found="true"
             :in-memory-filter="false"
@@ -113,7 +113,7 @@
           @click="submit()"
         >
           <span v-if="isEdit">Update</span>
-          <span v-else>Add organization</span>
+          <span v-else>Add config</span>
         </el-button>
       </footer>
     </template>
@@ -135,7 +135,7 @@ import moment from 'moment';
 type SelectOrganization = Organization & { label: string };
 
 interface MemberOrganizationForm {
-  organization: Organization | '',
+  config: Organization | '',
   jobTitle: string;
   dateStart: string;
   dateEnd: string;
@@ -143,7 +143,7 @@ interface MemberOrganizationForm {
 
 const props = defineProps<{
   modelValue: boolean,
-  organization?: Organization | null,
+  config?: Organization | null,
 }>();
 
 const emit = defineEmits<{(e: 'update:modelValue', value: boolean), (e: 'add', value: Organization), (e: 'edit', value: Organization),}>();
@@ -218,7 +218,7 @@ const createOrganizationFn = (value: string) => OrganizationService.create({
   }))
   .catch(() => null);
 
-const fillForm = (organization: Organization) => {
+const fillForm = (config: Organization) => {
   form.organization = {
     ...organization,
     label: organization.displayName || organization.name,
diff --git a/frontend/src/modules/member/components/form/member-form-organizations-drawer.vue b/frontend/src/modules/member/components/form/member-form-organizations-drawer.vue
index 30524ac81e..1a1082e53f 100644
--- a/frontend/src/modules/member/components/form/member-form-organizations-drawer.vue
+++ b/frontend/src/modules/member/components/form/member-form-organizations-drawer.vue
@@ -6,7 +6,7 @@
   >
     <template #content>
       <div class="border-t border-gray-200 p-6 -mx-6 -mt-5">
-        <article v-for="(organization, oi) in organizations" :key="organization.id" class="flex items-center justify-between w-full pb-5">
+        <article v-for="(config, oi) in organizations" :key="organization.id" class="flex items-center justify-between w-full pb-5">
           <div class="flex">
             <div class="h-6 w-6 border border-gray-200 rounded flex items-center justify-center mr-2.5">
               <app-avatar
@@ -19,21 +19,21 @@
             </div>
             <div>
               <h6 class="text-xs leading-5 font-medium">
-                {{ organization.displayName || organization.name }}
+                {{ config.displayName || config.name }}
               </h6>
               <p class="text-2xs leading-5 text-gray-500">
-                <span v-if="organization.memberOrganizations.title">{{ organization.memberOrganizations.title }}</span>
+                <span v-if="organization.memberOrganizations.title">{{ config.memberOrganizations.title }}</span>
                 <span v-if="organization.memberOrganizations.title" class="mx-1">•</span>
                 <span>
-                  {{ organization.memberOrganizations.dateStart
-                    ? moment(organization.memberOrganizations.dateStart).utc().format('MMMM YYYY')
+                  {{ config.memberOrganizations.dateStart
+                    ? moment(config.memberOrganizations.dateStart).utc().format('MMMM YYYY')
                     : 'Unknown' }}
                 </span>
                 <span class="mx-1 whitespace-nowrap">-></span>
                 <span>
-                  {{ organization.memberOrganizations.dateEnd
-                    ? moment(organization.memberOrganizations.dateEnd).utc().format('MMMM YYYY')
-                    : organization.memberOrganizations.dateStart ? 'Present' : 'Unknown' }}
+                  {{ config.memberOrganizations.dateEnd
+                    ? moment(config.memberOrganizations.dateEnd).utc().format('MMMM YYYY')
+                    : config.memberOrganizations.dateStart ? 'Present' : 'Unknown' }}
                 </span>
               </p>
             </div>
@@ -50,7 +50,7 @@
         </article>
         <div class="flex justify-start pt-5">
           <el-button class="btn btn-link btn-link--primary" @click="isOrganizationFormModalOpen = true">
-            + Add organization
+            + Add config
           </el-button>
         </div>
       </div>
@@ -130,13 +130,13 @@ const edit = (organizationIndex: number) => {
   isOrganizationFormModalOpen.value = true;
 };
 
-const update = (organization: Organization) => {
+const update = (config: Organization) => {
   organizations.value[editOrganization.value] = organization;
   editOrganization.value = null;
   save();
 };
 
-const add = (organization: Organization) => {
+const add = (config: Organization) => {
   organizations.value.push(organization);
   save();
 };
diff --git a/frontend/src/modules/member/components/form/member-form-organizations.vue b/frontend/src/modules/member/components/form/member-form-organizations.vue
index dd3206b8f3..b4f1752ce3 100644
--- a/frontend/src/modules/member/components/form/member-form-organizations.vue
+++ b/frontend/src/modules/member/components/form/member-form-organizations.vue
@@ -5,7 +5,7 @@
       <p class="text-gray-500 text-2xs leading-normal mt-1">
         Organizations’ data is automatically obtained via enrichement (work experience).<br>
         <br>
-        The organization period will define each activity affiliation.
+        The config period will define each activity affiliation.
       </p>
     </div>
     <div
@@ -26,7 +26,7 @@
         <div class="w-18" />
       </div>
 
-      <div v-for="(organization, oi) in organizations" :key="organization.id" class="flex gap-3 border-b h-8 items-center min-h-17">
+      <div v-for="(config, oi) in organizations" :key="organization.id" class="flex gap-3 border-b h-8 items-center min-h-17">
         <div class="flex items-center w-full">
           <div class="w-1/3 flex items-center">
             <app-avatar
@@ -38,26 +38,26 @@
               class="mr-2"
             />
             <p class="text-xs leading-5 pl-2">
-              {{ organization.displayName || organization.name }}
+              {{ config.displayName || config.name }}
             </p>
           </div>
           <div class="w-1/3">
             <p class="text-xs leading-5 pl-2">
-              {{ organization.memberOrganizations.title }}
+              {{ config.memberOrganizations.title }}
             </p>
           </div>
           <div class="w-1/3">
             <p class="text-xs leading-5 pl-2">
               <span>
-                {{ organization.memberOrganizations.dateStart
-                  ? moment(organization.memberOrganizations.dateStart).utc().format('MMMM YYYY')
+                {{ config.memberOrganizations.dateStart
+                  ? moment(config.memberOrganizations.dateStart).utc().format('MMMM YYYY')
                   : 'Unknown' }}
               </span>
               <span class="mx-1 whitespace-nowrap">-></span>
               <span>
-                {{ organization.memberOrganizations.dateEnd
-                  ? moment(organization.memberOrganizations.dateEnd).utc().format('MMMM YYYY')
-                  : organization.memberOrganizations.dateStart ? 'Present' : 'Unknown' }}
+                {{ config.memberOrganizations.dateEnd
+                  ? moment(config.memberOrganizations.dateEnd).utc().format('MMMM YYYY')
+                  : config.memberOrganizations.dateStart ? 'Present' : 'Unknown' }}
               </span>
             </p>
           </div>
@@ -74,7 +74,7 @@
 
       <div class="flex justify-start">
         <el-button class="btn btn-link btn-link--primary mt-5" @click="isOrganizationFormModalOpen = true">
-          + Add organization
+          + Add config
         </el-button>
       </div>
     </div>
@@ -124,7 +124,7 @@ const edit = (organizationIndex: number) => {
   isOrganizationFormModalOpen.value = true;
 };
 
-const update = (organization: Organization) => {
+const update = (config: Organization) => {
   organizations.value[editOrganization.value] = organization;
   editOrganization.value = null;
 };
diff --git a/frontend/src/modules/member/components/member-dropdown.vue b/frontend/src/modules/member/components/member-dropdown.vue
index ab62f7054c..f9d56f51ef 100644
--- a/frontend/src/modules/member/components/member-dropdown.vue
+++ b/frontend/src/modules/member/components/member-dropdown.vue
@@ -153,7 +153,7 @@
         >
           <i class="ri-robot-line text-base mr-2" /><span
             class="text-xs"
-          >Mark as bot</span>
+          >Mark as config</span>
         </el-dropdown-item>
         <el-dropdown-item
           v-if="member.attributes.isBot?.default"
@@ -166,7 +166,7 @@
         >
           <i class="ri-robot-line text-base mr-2" /><span
             class="text-xs"
-          >Unmark as bot</span>
+          >Unmark as config</span>
         </el-dropdown-item>
         <el-divider class="border-gray-200" />
         <el-dropdown-item
diff --git a/frontend/src/modules/member/components/member-organizations.vue b/frontend/src/modules/member/components/member-organizations.vue
index 38fc1cfb03..2318c7e454 100644
--- a/frontend/src/modules/member/components/member-organizations.vue
+++ b/frontend/src/modules/member/components/member-organizations.vue
@@ -116,13 +116,13 @@ const props = defineProps({
 const activeOrganization = computed(() => {
   const { organizations } = props.member;
 
-  // No active organization
+  // No active config
   if (!organizations?.length) {
     return null;
   }
 
-  // Only one organization that doesn't have either start or end date
-  // We assume it's the active organization
+  // Only one config that doesn't have either start or end date
+  // We assume it's the active config
   if (organizations.length === 1
     && !organizations[0].memberOrganizations?.dateStart
     && !organizations[0].memberOrganizations?.dateEnd) {
@@ -133,7 +133,7 @@ const activeOrganization = computed(() => {
   const completeOrganizations = organizations
     .filter((organization) => !!organization.memberOrganizations?.dateStart && !organization.memberOrganizations?.dateEnd);
 
-  // Return the most recent organization, comparing the startDate
+  // Return the most recent config, comparing the startDate
   return completeOrganizations.reduce((mostRecent, organization) => {
     const mostRecentStartDate = new Date(mostRecent.memberOrganizations?.dateStart);
     const organizationStartDate = new Date(organization.memberOrganizations?.dateStart);
diff --git a/frontend/src/modules/member/config/saved-views/main.ts b/frontend/src/modules/member/config/saved-views/main.ts
index 609acc63c3..701575479a 100644
--- a/frontend/src/modules/member/config/saved-views/main.ts
+++ b/frontend/src/modules/member/config/saved-views/main.ts
@@ -6,15 +6,15 @@ import mostEngaged from './views/most-engaged';
 import influential from './views/influential';
 import teamMembers from './views/team-members';
 
-import bot from './settings/bot';
-import teamMember from './settings/teamMember';
-import organization from './settings/organization';
+import bot from './settings/bot/config';
+import teamMember from './settings/teamMember/config';
+import organization from './settings/organization/config';
 
 export const memberSavedViews: SavedViewsConfig = {
   defaultView: allMembers,
   settings: {
-    bot,
     teamMember,
+    bot,
     organization,
   },
 };
diff --git a/frontend/src/modules/member/config/saved-views/settings/bot/MemberBotSetting.vue b/frontend/src/modules/member/config/saved-views/settings/bot/MemberBotSetting.vue
new file mode 100644
index 0000000000..960a163e41
--- /dev/null
+++ b/frontend/src/modules/member/config/saved-views/settings/bot/MemberBotSetting.vue
@@ -0,0 +1,51 @@
+<template>
+  <article>
+    <p class="text-xs font-semibold leading-5 mb-3">
+      Bot members visibility
+    </p>
+    <el-radio-group v-model="value">
+      <el-radio :label="IncludeEnum.EXCLUDE" class="!h-5">
+        <span class="text-xs">Exclude bot members</span>
+      </el-radio>
+      <el-radio :label="IncludeEnum.INCLUDE" class="!h-5">
+        <span class="text-xs">Include bot members</span>
+      </el-radio>
+    </el-radio-group>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { IncludeEnum } from '@/modules/member/config/saved-views/settings/common/types/IncludeEnum';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  modelValue: IncludeEnum,
+}>();
+
+const emit = defineEmits<{(e: 'update:modelValue', value: IncludeEnum): any }>();
+
+const value = computed<IncludeEnum>({
+  get() {
+    return props.modelValue;
+  },
+  set(val: IncludeEnum) {
+    emit('update:modelValue', val);
+  },
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'CrMemberTeamMemberSetting',
+};
+</script>
+
+<style lang="scss" scoped>
+.tabs {
+  width: calc(100% - 72px);
+
+  &.is-shrink{
+    width: calc(100% - 262px);
+  }
+}
+</style>
diff --git a/frontend/src/modules/member/config/saved-views/settings/bot.ts b/frontend/src/modules/member/config/saved-views/settings/bot/config.ts
similarity index 69%
rename from frontend/src/modules/member/config/saved-views/settings/bot.ts
rename to frontend/src/modules/member/config/saved-views/settings/bot/config.ts
index 0e735a1eba..91b9f18681 100644
--- a/frontend/src/modules/member/config/saved-views/settings/bot.ts
+++ b/frontend/src/modules/member/config/saved-views/settings/bot/config.ts
@@ -1,8 +1,11 @@
 import { SavedViewsSetting } from '@/shared/modules/saved-views/types/SavedViewsConfig';
-import { IncludeEnum } from '@/modules/member/config/saved-views/settings/types/IncludeEnum';
+import { IncludeEnum } from '@/modules/member/config/saved-views/settings/common/types/IncludeEnum';
 import { includeFilterRenderer } from '@/modules/member/config/saved-views/settings/common/includeFilterRenderer';
+import MemberBotSetting from './MemberBotSetting.vue'
 
-const bot: SavedViewsSetting<IncludeEnum> = {
+const config: SavedViewsSetting<IncludeEnum> = {
+  inSettings: true,
+  settingsComponent: MemberBotSetting,
   defaultValue: IncludeEnum.EXCLUDE,
   queryUrlParser(value: string): IncludeEnum {
     return value as IncludeEnum;
@@ -12,4 +15,4 @@ const bot: SavedViewsSetting<IncludeEnum> = {
   },
 };
 
-export default bot;
+export default config;
diff --git a/frontend/src/modules/member/config/saved-views/settings/common/includeFilterRenderer.ts b/frontend/src/modules/member/config/saved-views/settings/common/includeFilterRenderer.ts
index ab54350309..55eb2aafd8 100644
--- a/frontend/src/modules/member/config/saved-views/settings/common/includeFilterRenderer.ts
+++ b/frontend/src/modules/member/config/saved-views/settings/common/includeFilterRenderer.ts
@@ -1,4 +1,4 @@
-import { IncludeEnum } from '@/modules/member/config/saved-views/settings/types/IncludeEnum';
+import { IncludeEnum } from '@/modules/member/config/saved-views/settings/common/types/IncludeEnum';
 
 export const includeFilterRenderer = (property: string, value: IncludeEnum) => {
   if (value === IncludeEnum.FILTER) {
diff --git a/frontend/src/modules/member/config/saved-views/settings/types/IncludeEnum.ts b/frontend/src/modules/member/config/saved-views/settings/common/types/IncludeEnum.ts
similarity index 100%
rename from frontend/src/modules/member/config/saved-views/settings/types/IncludeEnum.ts
rename to frontend/src/modules/member/config/saved-views/settings/common/types/IncludeEnum.ts
diff --git a/frontend/src/modules/member/config/saved-views/settings/organization.ts b/frontend/src/modules/member/config/saved-views/settings/organization/config.ts
similarity index 79%
rename from frontend/src/modules/member/config/saved-views/settings/organization.ts
rename to frontend/src/modules/member/config/saved-views/settings/organization/config.ts
index 005a7e2517..7997969efd 100644
--- a/frontend/src/modules/member/config/saved-views/settings/organization.ts
+++ b/frontend/src/modules/member/config/saved-views/settings/organization/config.ts
@@ -1,8 +1,9 @@
 import { SavedViewsSetting } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 import { includeFilterRenderer } from '@/modules/member/config/saved-views/settings/common/includeFilterRenderer';
-import { IncludeEnum } from '@/modules/member/config/saved-views/settings/types/IncludeEnum';
+import { IncludeEnum } from '@/modules/member/config/saved-views/settings/common/types/IncludeEnum';
 
-const organization: SavedViewsSetting<IncludeEnum> = {
+const config: SavedViewsSetting<IncludeEnum> = {
+  inSettings: false,
   defaultValue: IncludeEnum.EXCLUDE,
   queryUrlParser(value: string): IncludeEnum {
     return value as IncludeEnum;
@@ -12,4 +13,4 @@ const organization: SavedViewsSetting<IncludeEnum> = {
   },
 };
 
-export default organization;
+export default config;
diff --git a/frontend/src/modules/member/config/saved-views/settings/teamMember/MemberTeamMemberSetting.vue b/frontend/src/modules/member/config/saved-views/settings/teamMember/MemberTeamMemberSetting.vue
new file mode 100644
index 0000000000..e5da34ee22
--- /dev/null
+++ b/frontend/src/modules/member/config/saved-views/settings/teamMember/MemberTeamMemberSetting.vue
@@ -0,0 +1,54 @@
+<template>
+  <article>
+    <p class="text-xs font-semibold leading-5 mb-3">
+      Team members visibility
+    </p>
+    <el-radio-group v-model="value">
+      <el-radio :label="IncludeEnum.EXCLUDE" class="!h-5">
+        <span class="text-xs">Exclude team members</span>
+      </el-radio>
+      <el-radio :label="IncludeEnum.INCLUDE" class="!h-5">
+        <span class="text-xs">Include team members</span>
+      </el-radio>
+      <el-radio :label="IncludeEnum.FILTER" class="!h-5">
+        <span class="text-xs">Team members only</span>
+      </el-radio>
+    </el-radio-group>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { IncludeEnum } from '@/modules/member/config/saved-views/settings/common/types/IncludeEnum';
+
+const props = defineProps<{
+  modelValue: IncludeEnum,
+}>();
+
+const emit = defineEmits<{(e: 'update:modelValue', value: IncludeEnum): any }>();
+
+const value = computed<IncludeEnum>({
+  get() {
+    return props.modelValue;
+  },
+  set(val: IncludeEnum) {
+    emit('update:modelValue', val);
+  },
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'CrMemberTeamMemberSetting',
+};
+</script>
+
+<style lang="scss" scoped>
+.tabs {
+  width: calc(100% - 72px);
+
+  &.is-shrink{
+    width: calc(100% - 262px);
+  }
+}
+</style>
diff --git a/frontend/src/modules/member/config/saved-views/settings/teamMember.ts b/frontend/src/modules/member/config/saved-views/settings/teamMember/config.ts
similarity index 67%
rename from frontend/src/modules/member/config/saved-views/settings/teamMember.ts
rename to frontend/src/modules/member/config/saved-views/settings/teamMember/config.ts
index 217fda7a05..84ab51674c 100644
--- a/frontend/src/modules/member/config/saved-views/settings/teamMember.ts
+++ b/frontend/src/modules/member/config/saved-views/settings/teamMember/config.ts
@@ -1,8 +1,11 @@
 import { SavedViewsSetting } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 import { includeFilterRenderer } from '@/modules/member/config/saved-views/settings/common/includeFilterRenderer';
-import { IncludeEnum } from '@/modules/member/config/saved-views/settings/types/IncludeEnum';
+import { IncludeEnum } from '@/modules/member/config/saved-views/settings/common/types/IncludeEnum';
+import MemberTeamMemberSetting from './MemberTeamMemberSetting.vue'
 
-const teamMember: SavedViewsSetting<IncludeEnum> = {
+const config: SavedViewsSetting<IncludeEnum> = {
+  inSettings: true,
+  settingsComponent: MemberTeamMemberSetting,
   defaultValue: IncludeEnum.EXCLUDE,
   queryUrlParser(value: string): IncludeEnum {
     return value as IncludeEnum;
@@ -12,4 +15,4 @@ const teamMember: SavedViewsSetting<IncludeEnum> = {
   },
 };
 
-export default teamMember;
+export default config;
diff --git a/frontend/src/modules/member/pages/member-list-page.vue b/frontend/src/modules/member/pages/member-list-page.vue
index b4deb95d7d..318d7ce52a 100644
--- a/frontend/src/modules/member/pages/member-list-page.vue
+++ b/frontend/src/modules/member/pages/member-list-page.vue
@@ -55,6 +55,7 @@
         v-model="filters"
         :config="memberSavedViews"
         :views="memberViews"
+        :filters="memberFilters"
         @update:model-value="memberFilter.alignFilterList($event)"
       />
       <cr-filter
diff --git a/frontend/src/modules/organization/components/form/organization-form-attributes.vue b/frontend/src/modules/organization/components/form/organization-form-attributes.vue
index b22475dc43..99121eb0ba 100644
--- a/frontend/src/modules/organization/components/form/organization-form-attributes.vue
+++ b/frontend/src/modules/organization/components/form/organization-form-attributes.vue
@@ -3,7 +3,7 @@
     <div v-if="showHeader">
       <h6>Attributes</h6>
       <p class="text-gray-500 text-2xs leading-normal mt-1">
-        Data points to enhance the organization profile
+        Data points to enhance the config profile
       </p>
     </div>
     <div :class="showHeader ? 'col-span-2' : 'col-span-3'">
diff --git a/frontend/src/modules/organization/components/form/organization-form-identities.vue b/frontend/src/modules/organization/components/form/organization-form-identities.vue
index 5bc10937bf..fb06b64ae1 100644
--- a/frontend/src/modules/organization/components/form/organization-form-identities.vue
+++ b/frontend/src/modules/organization/components/form/organization-form-identities.vue
@@ -159,7 +159,7 @@ const identitiesForm = reactive({
     enabled:
       props.modelValue.identities?.some((el) => el.platform === 'crunchbase')
       || false,
-    urlPrefix: 'crunchbase.com/organization/',
+    urlPrefix: 'crunchbase.com/config/',
     imgContainerClass:
       'h-8 w-8 rounded flex items-center justify-center text-base platform-logo--crunchbase',
   },
diff --git a/frontend/src/modules/organization/components/list/organization-list-table.vue b/frontend/src/modules/organization/components/list/organization-list-table.vue
index 925e99cf8f..8b50bbc4fe 100644
--- a/frontend/src/modules/organization/components/list/organization-list-table.vue
+++ b/frontend/src/modules/organization/components/list/organization-list-table.vue
@@ -13,7 +13,7 @@
           icon="ri-community-line"
           title="No organizations yet"
           description="We couldn't track any organizations related to your community members."
-          cta-btn="Add organization"
+          cta-btn="Add config"
           @cta-click="onCtaClick"
         />
 
@@ -32,7 +32,7 @@
               :total="totalOrganizations"
               :current-page="pagination.page"
               :has-page-counter="false"
-              module="organization"
+              module="config"
               position="top"
               @change-sorter="doChangePaginationPageSize"
             />
@@ -512,7 +512,7 @@
                   :total="totalOrganizations"
                   :page-size="Number(pagination.perPage)"
                   :current-page="pagination.page || 1"
-                  module="organization"
+                  module="config"
                   @change-current-page="
                     doChangePaginationCurrentPage
                   "
diff --git a/frontend/src/modules/organization/components/list/organization-list-toolbar.vue b/frontend/src/modules/organization/components/list/organization-list-toolbar.vue
index 1bc05458a3..f6cc505c01 100644
--- a/frontend/src/modules/organization/components/list/organization-list-toolbar.vue
+++ b/frontend/src/modules/organization/components/list/organization-list-toolbar.vue
@@ -5,7 +5,7 @@
   >
     <span class="block text-sm font-semibold mr-4">
       {{
-        pluralize('organization', selectedOrganizations.length, true)
+        pluralize('config', selectedOrganizations.length, true)
       }}
       selected
     </span>
diff --git a/frontend/src/modules/organization/components/organization-badge.vue b/frontend/src/modules/organization/components/organization-badge.vue
index 528254a9b2..ccce1ab642 100644
--- a/frontend/src/modules/organization/components/organization-badge.vue
+++ b/frontend/src/modules/organization/components/organization-badge.vue
@@ -65,7 +65,7 @@ const computedTooltipContent = (tooltip) => {
       props.organization.joinedAt,
     ).format('MMM DD, YYYY')}`;
   } if (tooltip === 'team') {
-    return 'Team organization';
+    return 'Team config';
   }
   return '';
 };
diff --git a/frontend/src/modules/organization/components/organization-dropdown.vue b/frontend/src/modules/organization/components/organization-dropdown.vue
index fbe6321484..9c72dee943 100644
--- a/frontend/src/modules/organization/components/organization-dropdown.vue
+++ b/frontend/src/modules/organization/components/organization-dropdown.vue
@@ -25,10 +25,10 @@
         >
           <i class="ri-pencil-line text-base mr-2" /><span
             class="text-xs"
-          >Edit organization</span>
+          >Edit config</span>
         </el-dropdown-item>
 
-        <!-- Merge organization -->
+        <!-- Merge config -->
         <el-dropdown-item
           class="h-10"
           :command="{
@@ -39,7 +39,7 @@
         >
           <i class="ri-shuffle-line text-base mr-2" /><span
             class="text-xs"
-          >Merge organization</span>
+          >Merge config</span>
         </el-dropdown-item>
 
         <!-- Hubspot -->
@@ -85,7 +85,7 @@
         >
           <i
             class="ri-bookmark-line text-base mr-2"
-          /><span class="text-xs">Mark as team organization</span>
+          /><span class="text-xs">Mark as team config</span>
         </el-dropdown-item>
 
         <!-- Unmark as Team Organization -->
@@ -101,7 +101,7 @@
         >
           <i
             class="ri-bookmark-2-line text-base mr-2"
-          /><span class="text-xs">Unmark as team organization</span>
+          /><span class="text-xs">Unmark as team config</span>
         </el-dropdown-item>
 
         <el-divider class="border-gray-200 my-2" />
@@ -125,7 +125,7 @@
             :class="{
               'text-red-500': !isDeleteLockedForSampleData,
             }"
-          >Delete organization</span>
+          >Delete config</span>
         </el-dropdown-item>
       </template>
     </el-dropdown>
@@ -190,7 +190,7 @@ const isDeleteLockedForSampleData = computed(
   ).destroyLockedForSampleData,
 );
 
-const isSyncingWithHubspot = (organization) => organization.attributes?.syncRemote?.hubspot || false;
+const isSyncingWithHubspot = (config) => organization.attributes?.syncRemote?.hubspot || false;
 
 const isHubspotConnected = computed(() => {
   const hubspot = CrowdIntegrations.getMappedConfig('hubspot', store);
@@ -202,7 +202,7 @@ const doDestroyWithConfirm = async (id) => {
   try {
     await ConfirmDialog({
       type: 'danger',
-      title: 'Delete organization',
+      title: 'Delete config',
       message:
         "Are you sure you want to proceed? You can't undo this action",
       confirmButtonText: 'Confirm',
@@ -213,7 +213,7 @@ const doDestroyWithConfirm = async (id) => {
     await OrganizationService.destroyAll([id]);
 
     Message.success(
-      i18n('entities.organization.destroy.success'),
+      i18n('entities.config.destroy.success'),
     );
     await fetchOrganizations({
       reload: true,
diff --git a/frontend/src/modules/organization/components/organization-merge-dialog.vue b/frontend/src/modules/organization/components/organization-merge-dialog.vue
index 63e1732808..dd4d7f063b 100644
--- a/frontend/src/modules/organization/components/organization-merge-dialog.vue
+++ b/frontend/src/modules/organization/components/organization-merge-dialog.vue
@@ -2,7 +2,7 @@
   <app-dialog
     v-if="isModalOpen"
     v-model="isModalOpen"
-    title="Merge organization"
+    title="Merge config"
     size="2extra-large"
   >
     <template #content>
@@ -38,7 +38,7 @@
                   @click="changeOrganization()"
                 >
                   <span class="ri-refresh-line text-base text-brand-500 mr-2" />
-                  <span class="text-brand-500">Change organization</span>
+                  <span class="text-brand-500">Change config</span>
                 </button>
               </template>
             </app-organization-merge-suggestions-details>
diff --git a/frontend/src/modules/organization/components/organization-name.vue b/frontend/src/modules/organization/components/organization-name.vue
index 516759a6a8..31989bc91e 100644
--- a/frontend/src/modules/organization/components/organization-name.vue
+++ b/frontend/src/modules/organization/components/organization-name.vue
@@ -29,7 +29,7 @@
           @mouseover="handleOnMouseOver"
           @mouseleave="handleOnMouseLeave"
         >
-          {{ organization.displayName || organization.name }}
+          {{ config.displayName || config.name }}
         </div>
       </el-tooltip>
       <app-organization-badge
diff --git a/frontend/src/modules/organization/components/organization-selection-dropdown.vue b/frontend/src/modules/organization/components/organization-selection-dropdown.vue
index 92f2c86627..a25c660497 100644
--- a/frontend/src/modules/organization/components/organization-selection-dropdown.vue
+++ b/frontend/src/modules/organization/components/organization-selection-dropdown.vue
@@ -6,7 +6,7 @@
       />
     </div>
     <div class="text-gray-600 text-sm text-center py-4">
-      Select the organization you want to merge with
+      Select the config you want to merge with
     </div>
     <div class="flex justify-center">
       <div class="flex w-4/5">
@@ -81,10 +81,10 @@ const fetchFn = async (query, limit) => {
     limit,
   );
 
-  // Remove primary organization from organizations that can be merged with
+  // Remove primary config from organizations that can be merged with
   const filteredOptions = options.filter((m) => m.id !== props.id);
 
-  // If the primary organization was removed, add an empty object in replacement
+  // If the primary config was removed, add an empty object in replacement
   if (options.length !== filteredOptions.length) {
     filteredOptions.push({});
   }
diff --git a/frontend/src/modules/organization/components/suggestions/organization-merge-suggestions-details.vue b/frontend/src/modules/organization/components/suggestions/organization-merge-suggestions-details.vue
index 6831bd8f61..4d9db70bef 100644
--- a/frontend/src/modules/organization/components/suggestions/organization-merge-suggestions-details.vue
+++ b/frontend/src/modules/organization/components/suggestions/organization-merge-suggestions-details.vue
@@ -29,7 +29,7 @@
           v-if="props.isPrimary"
           class="bg-brand-500 rounded-full py-0.5 px-2 text-white inline-block text-xs leading-5 font-medium"
         >
-          Primary organization
+          Primary config
         </div>
         <button
           v-else
@@ -97,7 +97,7 @@
             target="_blank"
             rel="noopener noreferrer"
             class="text-xs text-gray-900 text-right"
-          >{{ props.organization.website || '-' }}</a>
+          >{{ props.config.website || '-' }}</a>
         </article>
         <article
           v-if="
@@ -110,7 +110,7 @@
             Location
           </p>
           <p class="text-xs text-gray-900 text-right">
-            {{ props.organization.location || '-' }}
+            {{ props.config.location || '-' }}
           </p>
         </article>
         <article
@@ -124,7 +124,7 @@
             Number of employees
           </p>
           <p class="text-xs text-gray-900 text-right">
-            {{ props.organization.employees || '-' }}
+            {{ props.config.employees || '-' }}
           </p>
         </article>
         <article
@@ -139,7 +139,7 @@
           </p>
           <p class="text-xs text-gray-900 text-right">
             {{ revenueRange.displayValue(
-              props.organization.revenueRange,
+              props.config.revenueRange,
             ) || '-' }}
           </p>
         </article>
@@ -154,7 +154,7 @@
             Industry
           </p>
           <p class="text-xs text-gray-900 text-right first-letter:uppercase">
-            {{ props.organization.industry || '-' }}
+            {{ props.config.industry || '-' }}
           </p>
         </article>
         <article
@@ -168,7 +168,7 @@
             Industry
           </p>
           <p class="text-xs text-gray-900 text-right first-letter:uppercase">
-            {{ props.organization.type || '-' }}
+            {{ props.config.type || '-' }}
           </p>
         </article>
         <article
@@ -182,7 +182,7 @@
             Industry
           </p>
           <p class="text-xs text-gray-900 text-right">
-            {{ props.organization.founded || '-' }}
+            {{ props.config.founded || '-' }}
           </p>
         </article>
         <article
@@ -196,7 +196,7 @@
             Joined date
           </p>
           <p class="text-xs text-gray-900 text-right">
-            {{ formatDateToTimeAgo(props.organization.joinedAt) || '-' }}
+            {{ formatDateToTimeAgo(props.config.joinedAt) || '-' }}
           </p>
         </article>
         <article
@@ -210,7 +210,7 @@
             # of members
           </p>
           <p class="text-xs text-gray-900 text-right">
-            {{ props.organization.memberCount || '-' }}
+            {{ props.config.memberCount || '-' }}
           </p>
         </article>
         <article
@@ -224,7 +224,7 @@
             # of Activities
           </p>
           <p class="text-xs text-gray-900 text-right">
-            {{ props.organization.activityCount || '-' }}
+            {{ props.config.activityCount || '-' }}
           </p>
         </article>
       </div>
@@ -242,7 +242,7 @@
             <div class="flex gap-3 items-center">
               <app-platform :platform="identity.platform" />
               <span class="text-xs">
-                {{ getPlatformDetails(identity.platform)?.organization.handle(identity)
+                {{ getPlatformDetails(identity.platform)?.config.handle(identity)
                   ?? getPlatformDetails(identity.platform)?.name
                   ?? identity.platform }}</span>
             </div>
diff --git a/frontend/src/modules/organization/components/view/_aside/_aside-enriched.vue b/frontend/src/modules/organization/components/view/_aside/_aside-enriched.vue
index d3f702efdf..efdf54c941 100644
--- a/frontend/src/modules/organization/components/view/_aside/_aside-enriched.vue
+++ b/frontend/src/modules/organization/components/view/_aside/_aside-enriched.vue
@@ -39,7 +39,7 @@
           :filter-value="attribute.filterValue"
         />
         <div v-else class="mt-1 text-gray-900 text-xs">
-          {{ attribute.displayValue(organization[attribute.name]) }}
+          {{ attribute.displayValue(config[attribute.name]) }}
         </div>
       </div>
     </div>
diff --git a/frontend/src/modules/organization/components/view/organization-view-aside.vue b/frontend/src/modules/organization/components/view/organization-view-aside.vue
index 49d62bd40c..ddb20e7d7b 100644
--- a/frontend/src/modules/organization/components/view/organization-view-aside.vue
+++ b/frontend/src/modules/organization/components/view/organization-view-aside.vue
@@ -20,7 +20,7 @@
             <div class="flex gap-3 items-center">
               <app-platform :platform="identity.platform" custom-platform-icon-class="ri-community-fill" />
               <span class="text-gray-900 text-xs">
-                {{ getPlatformDetails(identity.platform)?.organization.handle(identity)
+                {{ getPlatformDetails(identity.platform)?.config.handle(identity)
                   ?? getPlatformDetails(identity.platform)?.name
                   ?? identity.platform }}</span>
             </div>
diff --git a/frontend/src/modules/organization/components/view/organization-view-header.vue b/frontend/src/modules/organization/components/view/organization-view-header.vue
index 1f91a47184..31441004fe 100644
--- a/frontend/src/modules/organization/components/view/organization-view-header.vue
+++ b/frontend/src/modules/organization/components/view/organization-view-header.vue
@@ -12,7 +12,7 @@
         />
         <div>
           <div class="flex">
-            <h5>{{ organization.displayName || organization.name }}</h5>
+            <h5>{{ config.displayName || config.name }}</h5>
             <app-organization-badge
               class="ml-2"
               :organization="organization"
@@ -31,7 +31,7 @@
                 target="_blank"
                 rel="noopener noreferrer"
                 class="text-gray-600"
-              >{{ organization.website }}</a>
+              >{{ config.website }}</a>
             </div>
             <span
               v-if="
@@ -45,7 +45,7 @@
               class="flex items-center"
             >
               <i class="ri-map-pin-2-line mr-1" />
-              <span>{{ organization.location }}</span>
+              <span>{{ config.location }}</span>
             </div>
           </div>
         </div>
@@ -86,7 +86,7 @@
         <p class="mt-1 text-gray-900 text-xs">
           {{
             formattedInformation(
-              organization.memberCount,
+              config.memberCount,
               'number',
             )
           }}
@@ -99,7 +99,7 @@
         <p class="mt-1 text-gray-900 text-xs">
           {{
             formattedInformation(
-              organization.activityCount,
+              config.activityCount,
               'number',
             )
           }}
@@ -112,7 +112,7 @@
         <p class="mt-1 text-gray-900 text-xs">
           {{
             formattedInformation(
-              organization.size,
+              config.size,
               'string',
             )
           }}
@@ -125,7 +125,7 @@
         <p class="mt-1 text-gray-900 text-xs">
           {{
             formattedInformation(
-              organization.joinedAt,
+              config.joinedAt,
               'relative',
             )
           }}
@@ -138,7 +138,7 @@
         <p class="mt-1 text-gray-900 text-xs">
           {{
             revenueRange.displayValue(
-              organization.revenueRange,
+              config.revenueRange,
             )
           }}
         </p>
@@ -150,7 +150,7 @@
         <p class="mt-1 text-gray-900 text-xs">
           {{
             formattedInformation(
-              organization.lastActive,
+              config.lastActive,
               'relative',
             )
           }}
diff --git a/frontend/src/modules/organization/components/view/organization-view-members.vue b/frontend/src/modules/organization/components/view/organization-view-members.vue
index eb4ae845a0..69f795b084 100644
--- a/frontend/src/modules/organization/components/view/organization-view-members.vue
+++ b/frontend/src/modules/organization/components/view/organization-view-members.vue
@@ -10,7 +10,7 @@
       <p
         class="text-sm leading-5 text-center italic text-gray-400 pl-6"
       >
-        No members are currently working in this organization.
+        No members are currently working in this config.
       </p>
     </div>
     <div v-else>
diff --git a/frontend/src/modules/organization/config/enrichment/index.ts b/frontend/src/modules/organization/config/enrichment/index.ts
index be344d5ac3..b61a6f0f82 100644
--- a/frontend/src/modules/organization/config/enrichment/index.ts
+++ b/frontend/src/modules/organization/config/enrichment/index.ts
@@ -32,7 +32,7 @@ export interface OrganizationEnrichmentConfig {
   showInForm: boolean; // Display in Organization Form
   showInAttributes: boolean; // Display in Organization Profile
   isLink?: boolean; // If attribute is a url
-  component?: any; // Component that will render attribute in organization profile
+  component?: any; // Component that will render attribute in config profile
   displayValue?: (value: any) => string; // Formatter for displaying attribute value
   keyParser?: (key: string) => string; // Formatter for keys of jsons if attribute is json
   valueParser?: (value: any) => string; // Formatter for values of jsons if attribute is json
diff --git a/frontend/src/modules/organization/config/filters/enrichedOrganization/config.ts b/frontend/src/modules/organization/config/filters/enrichedOrganization/config.ts
index a36b340305..fcaa871645 100644
--- a/frontend/src/modules/organization/config/filters/enrichedOrganization/config.ts
+++ b/frontend/src/modules/organization/config/filters/enrichedOrganization/config.ts
@@ -7,12 +7,12 @@ import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLab
 
 const enrichedOrganization: BooleanFilterConfig = {
   id: 'enrichedOrganization',
-  label: 'Enriched organization',
+  label: 'Enriched config',
   iconClass: 'ri-sparkling-line',
   type: FilterConfigType.BOOLEAN,
   options: {},
   itemLabelRenderer(value: BooleanFilterValue, options: BooleanFilterOptions): string {
-    return itemLabelRendererByType[FilterConfigType.BOOLEAN]('Enriched organization', value, options);
+    return itemLabelRendererByType[FilterConfigType.BOOLEAN]('Enriched config', value, options);
   },
   apiFilterRenderer({ value, include }: BooleanFilterValue): any[] {
     const filter = {
diff --git a/frontend/src/modules/organization/config/saved-views/settings/common/includeFilterRenderer.ts b/frontend/src/modules/organization/config/saved-views/settings/common/includeFilterRenderer.ts
index ab54350309..55eb2aafd8 100644
--- a/frontend/src/modules/organization/config/saved-views/settings/common/includeFilterRenderer.ts
+++ b/frontend/src/modules/organization/config/saved-views/settings/common/includeFilterRenderer.ts
@@ -1,4 +1,4 @@
-import { IncludeEnum } from '@/modules/member/config/saved-views/settings/types/IncludeEnum';
+import { IncludeEnum } from '@/modules/member/config/saved-views/settings/common/types/IncludeEnum';
 
 export const includeFilterRenderer = (property: string, value: IncludeEnum) => {
   if (value === IncludeEnum.FILTER) {
diff --git a/frontend/src/modules/organization/organization-field.js b/frontend/src/modules/organization/organization-field.js
index 71b4edaff2..bcc476d54b 100644
--- a/frontend/src/modules/organization/organization-field.js
+++ b/frontend/src/modules/organization/organization-field.js
@@ -7,7 +7,7 @@ export class OrganizationField {
     return new RelationToManyField(
       name,
       label,
-      '/organization',
+      '/config',
       Permissions.values.organizationRead,
       OrganizationService.listAutocomplete,
       (record) => {
diff --git a/frontend/src/modules/organization/organization-model.js b/frontend/src/modules/organization/organization-model.js
index 59d9b35504..91b474797d 100644
--- a/frontend/src/modules/organization/organization-model.js
+++ b/frontend/src/modules/organization/organization-model.js
@@ -100,7 +100,7 @@ const fields = {
   founded: new IntegerField('founded', 'Founded', { filterable: true }),
   type: new OrganizationTypeField('organizationType', 'Type', { filterable: true }),
   profiles: new StringArrayField('profiles', 'Profiles'),
-  lastEnrichedAt: new BooleanField('lastEnrichedAt', 'Enriched organization', {
+  lastEnrichedAt: new BooleanField('lastEnrichedAt', 'Enriched config', {
     filterable: true,
   }),
   affiliatedProfiles: new StringArrayField('affiliatedProfiles', 'Affiliated Profiles'),
diff --git a/frontend/src/modules/organization/pages/organization-form-page.vue b/frontend/src/modules/organization/pages/organization-form-page.vue
index dbef85717b..78ff31b8ba 100644
--- a/frontend/src/modules/organization/pages/organization-form-page.vue
+++ b/frontend/src/modules/organization/pages/organization-form-page.vue
@@ -15,8 +15,8 @@
       <h4 class="mt-4 mb-6">
         {{
           isEditPage
-            ? 'Edit organization'
-            : 'New organization'
+            ? 'Edit config'
+            : 'New config'
         }}
       </h4>
       <el-container
@@ -87,8 +87,8 @@
             >
               {{
                 isEditPage
-                  ? 'Update organization'
-                  : 'Add organization'
+                  ? 'Update config'
+                  : 'Add config'
               }}
             </el-button>
           </div>
@@ -415,9 +415,9 @@ async function onSubmit() {
         payload.id,
         payload.values,
       );
-      Message.success(i18n('entities.organization.update.success'));
+      Message.success(i18n('entities.config.update.success'));
     } catch (error) {
-      Message.error(i18n('entities.organization.update.error'));
+      Message.error(i18n('entities.config.update.error'));
 
       Errors.handle(error);
     }
@@ -426,9 +426,9 @@ async function onSubmit() {
     try {
       await OrganizationService.create(payload);
 
-      Message.success(i18n('entities.organization.create.success'));
+      Message.success(i18n('entities.config.create.success'));
     } catch (error) {
-      Message.error(i18n('entities.organization.create.error'));
+      Message.error(i18n('entities.config.create.error'));
       Errors.handle(error);
     }
   }
diff --git a/frontend/src/modules/organization/pages/organization-list-page.vue b/frontend/src/modules/organization/pages/organization-list-page.vue
index 8eda38d951..36b60a369a 100644
--- a/frontend/src/modules/organization/pages/organization-list-page.vue
+++ b/frontend/src/modules/organization/pages/organization-list-page.vue
@@ -21,7 +21,7 @@
                 class="btn btn--primary btn--md"
                 :disabled="isCreateLockedForSampleData"
               >
-                Add organization
+                Add config
               </el-button>
             </router-link>
           </div>
diff --git a/frontend/src/modules/organization/pages/organization-view-page.vue b/frontend/src/modules/organization/pages/organization-view-page.vue
index 8bf3aac439..01e48481ce 100644
--- a/frontend/src/modules/organization/pages/organization-view-page.vue
+++ b/frontend/src/modules/organization/pages/organization-view-page.vue
@@ -32,7 +32,7 @@
                 <span class="flex gap-2">
                   <span>Current members</span>
                   <el-tooltip
-                    content="Members that are currently a part of this organization."
+                    content="Members that are currently a part of this config."
                     placement="top"
                   >
                     <i class="ri-information-line" />
@@ -51,7 +51,7 @@
             >
               <app-activity-timeline
                 :entity-id="props.id"
-                entity-type="organization"
+                entity-type="config"
               />
             </el-tab-pane>
           </el-tabs>
diff --git a/frontend/src/modules/settings/settings-pricing-plans.js b/frontend/src/modules/settings/settings-pricing-plans.js
index 11fab696f9..f1c1d0a9c9 100644
--- a/frontend/src/modules/settings/settings-pricing-plans.js
+++ b/frontend/src/modules/settings/settings-pricing-plans.js
@@ -30,7 +30,7 @@ export const plans = {
       features: [
         'Eagle Eye',
         '1,000 member enrichments per month (manual)',
-        '200 organization enrichments per month (automated)',
+        '200 config enrichments per month (automated)',
         '10 active workflows & CSV exports per month',
         'Slack connect support',
         'LinkedIn integration',
@@ -47,7 +47,7 @@ export const plans = {
       features: [
         'Activity categorization & topic analysis',
         'Integrations with CRMs & CDPs',
-        'Unlimited member & organization enrichment (automated)',
+        'Unlimited member & config enrichment (automated)',
         'Unlimited active workflows & CSV exports per month',
         'Dedicated community expert',
       ],
diff --git a/frontend/src/modules/widget/components/cube/_query_builder/DimensionSelect.vue b/frontend/src/modules/widget/components/cube/_query_builder/DimensionSelect.vue
index f99ab1a0d2..961bb9176e 100644
--- a/frontend/src/modules/widget/components/cube/_query_builder/DimensionSelect.vue
+++ b/frontend/src/modules/widget/components/cube/_query_builder/DimensionSelect.vue
@@ -69,7 +69,7 @@ export default {
           'Members.score',
           'Members.location',
           'Members.joinedAt',
-          'Members.organization',
+          'Members.config',
           'Segments.name',
           'Tags.name',
         ],
@@ -81,7 +81,7 @@ export default {
           'Members.score',
           'Members.location',
           'Members.joinedAt',
-          'Members.organization',
+          'Members.config',
           'Tags.name',
         ],
         'Members.count': [
@@ -92,7 +92,7 @@ export default {
           'Members.score',
           'Members.location',
           'Members.joinedAt',
-          'Members.organization',
+          'Members.config',
           'Tags.name',
         ],
         'Members.cumulativeCount': [
@@ -103,7 +103,7 @@ export default {
           'Members.score',
           'Members.location',
           'Members.joinedAt',
-          'Members.organization',
+          'Members.config',
           'Tags.name',
         ],
         'Conversations.count': [
@@ -119,7 +119,7 @@ export default {
           'Members.score',
           'Members.location',
           'Members.joinedAt',
-          'Members.organization',
+          'Members.config',
           'Tags.name',
         ],
         'Sentiment.averageSentiment': ['Sentiment.platform'],
@@ -131,7 +131,7 @@ export default {
           'Members.score',
           'Members.location',
           'Members.joinedAt',
-          'Members.organization',
+          'Members.config',
           'Organizations.createdat',
           'Tags.name',
         ],
diff --git a/frontend/src/modules/widget/components/cube/_query_builder/FilterComponent.vue b/frontend/src/modules/widget/components/cube/_query_builder/FilterComponent.vue
index 90b1ec1838..5452f02858 100644
--- a/frontend/src/modules/widget/components/cube/_query_builder/FilterComponent.vue
+++ b/frontend/src/modules/widget/components/cube/_query_builder/FilterComponent.vue
@@ -274,7 +274,7 @@ export default {
             'Members.score',
             'Members.joinedAt',
             'Members.location',
-            'Members.organization',
+            'Members.config',
           ],
           Tags: ['Tags.name'],
         },
@@ -292,7 +292,7 @@ export default {
             'Members.score',
             'Members.joinedAt',
             'Members.location',
-            'Members.organization',
+            'Members.config',
           ],
           Tags: ['Tags.name'],
         },
@@ -301,7 +301,7 @@ export default {
             'Members.score',
             'Members.joinedAt',
             'Members.location',
-            'Members.organization',
+            'Members.config',
           ],
           Activities: [
             'Activities.platform',
@@ -311,7 +311,7 @@ export default {
           Members: [
             'Members.score',
             'Members.location',
-            'Members.organization',
+            'Members.config',
           ],
           Tags: ['Tags.name'],
         },
@@ -320,7 +320,7 @@ export default {
             'Members.score',
             'Members.joinedAt',
             'Members.location',
-            'Members.organization',
+            'Members.config',
           ],
           Activities: [
             'Activities.platform',
@@ -330,7 +330,7 @@ export default {
           Members: [
             'Members.score',
             'Members.location',
-            'Members.organization',
+            'Members.config',
           ],
           Tags: ['Tags.name'],
         },
diff --git a/frontend/src/shared/form/form-item.vue b/frontend/src/shared/form/form-item.vue
index 10afa2eaa8..db17073433 100644
--- a/frontend/src/shared/form/form-item.vue
+++ b/frontend/src/shared/form/form-item.vue
@@ -10,7 +10,7 @@
       <label
         v-if="label"
         :for="formId"
-        class="text-xs mb-1 font-medium leading-5 block text-gray-900"
+        class="text-xs mb-1 font-semibold leading-5 block text-gray-900"
       >{{ label }}
         <span
           v-if="required"
diff --git a/frontend/src/shared/modules/saved-views/components/SavedViews.vue b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
index de6699f806..89100eb516 100644
--- a/frontend/src/shared/modules/saved-views/components/SavedViews.vue
+++ b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-end justify-between mb-6 h-8">
-    <div class="tabs flex-grow">
+    <div class="tabs flex-grow " :class="{ 'is-shrink': hasChanged }">
       <el-tabs v-model="selectedTab" @tab-change="onTabChange($event)">
         <el-tab-pane
           :label="props.config.defaultView.label"
@@ -14,12 +14,41 @@
         />
       </el-tabs>
     </div>
-    <div v-if="hasChanged" class="border-b-2 border-[#e4e7ed] flex-grow flex justify-end -mb-px">
-      <el-button class="btn btn-brand btn-brand--transparent btn--md inset-y-0" @click="reset()">
+    <div class="border-b-2 border-[#e4e7ed] flex-grow flex justify-end -mb-px pb-1">
+      <el-button v-if="hasChanged" class="btn btn-brand btn-brand--transparent btn--sm !leading-5 !h-8 mr-2" @click="reset()">
         Reset view
       </el-button>
+      <el-dropdown placement="bottom-end">
+        <el-button v-if="hasChanged" class="btn btn-brand btn-brand--transparent btn--sm !h-8 !leading-5 mr-2">
+          Save as...
+        </el-button>
+        <template #dropdown>
+          <el-dropdown-item>
+            <div class="w-40">
+              <i class="ri-loop-left-line text-gray-400 text-base mr-2" />Update view
+            </div>
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <div class="w-40">
+              <i class="ri-add-line text-gray-400 text-base mr-2" />Create new view
+            </div>
+          </el-dropdown-item>
+        </template>
+      </el-dropdown>
+
+      <el-tooltip content="Add view" placement="top">
+        <el-button class="btn btn-brand btn--transparent btn--icon--sm inset-y-0 !border-0 mr-2" @click="isFormOpen = true">
+          <i class="ri-add-line text-lg text-gray-400 h-5 flex items-center" />
+        </el-button>
+      </el-tooltip>
+      <el-tooltip content="Manage views" placement="top">
+        <el-button class="btn btn-brand btn--transparent btn--icon--sm inset-y-0 !border-0">
+          <i class="ri-list-settings-line text-lg text-gray-400 h-5 flex items-center" />
+        </el-button>
+      </el-tooltip>
     </div>
   </div>
+  <cr-saved-views-form v-model="isFormOpen" :config="props.config" :filters="props.filters" />
 </template>
 
 <script setup lang="ts">
@@ -27,17 +56,21 @@ import {
   computed,
   defineProps, ref, watch,
 } from 'vue';
-import { Filter } from '@/shared/modules/filters/types/FilterConfig';
+import { Filter, FilterConfig } from '@/shared/modules/filters/types/FilterConfig';
 import { SavedView, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 import { isEqual } from 'lodash';
+import CrSavedViewsForm from '@/shared/modules/saved-views/components/forms/SavedViewForm.vue';
 
 const props = defineProps<{
   modelValue: Filter,
   config: SavedViewsConfig,
-  views: SavedView[]
+  views: SavedView[],
+  filters: Record<string, FilterConfig>
 }>();
 
-const emit = defineEmits<{(e: 'update:modelValue', value: Filter)}>();
+const emit = defineEmits<{(e: 'update:modelValue', value: Filter): any}>();
+
+const isFormOpen = ref<boolean>(false);
 
 const filters = computed<Filter>({
   get() {
@@ -115,6 +148,10 @@ export default {
 
 <style lang="scss" scoped>
 .tabs {
-  width: calc(100% - 100px)
+  width: calc(100% - 72px);
+
+  &.is-shrink{
+    width: calc(100% - 262px);
+  }
 }
 </style>
diff --git a/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue b/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
new file mode 100644
index 0000000000..0c8cee056c
--- /dev/null
+++ b/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
@@ -0,0 +1,202 @@
+<template>
+  <app-drawer v-model="isDrawerOpen" title="New view" size="600px">
+    <template #content>
+      <div class="-mx-6 -mt-4">
+        <!-- Share with workspace -->
+        <section class="border-y border-gray-200 bg-gray-50 py-4 px-6">
+          <div class="flex justify-between items-center">
+            <div>
+              <h6 class="text-sm font-medium leading-5">
+                Shared with workspace
+              </h6>
+              <p class="text-2xs leading-4.5 text-gray-500">
+                If enabled, the view will be shared with all users from this workspace.
+              </p>
+            </div>
+            <div>
+              <el-switch />
+            </div>
+          </div>
+        </section>
+
+        <!-- Name and setting -->
+        <section class="p-6">
+          <app-form-item
+            :validation="$v.name"
+            :error-messages="{
+              required: 'This field is required',
+            }"
+            label="View name"
+            :required="true"
+            class="mb-0"
+          >
+            <el-input
+              v-model="form.name"
+              @blur="$v.name.$touch"
+              @change="$v.name.$touch"
+            />
+          </app-form-item>
+        </section>
+
+        <!-- Settings -->
+        <section v-if="Object.keys(settings).length > 0" class="px-6">
+          <div class="border-b border-gray-200 pb-1">
+            <div v-for="(setting, settingsKey) in settings" :key="settingsKey" class="pb-3">
+              <component :is="setting.settingsComponent" v-model="form.settings[settingsKey]" />
+            </div>
+          </div>
+        </section>
+
+        <!-- Filters -->
+        <section class="px-6">
+          <div class="py-6">
+            <h6 class="text-base font-semibold">
+              Filters
+            </h6>
+          </div>
+          <div>
+            <div v-for="filter of filterList" :key="filter" class="flex items-center mb-3">
+              <cr-filter-item
+                v-model="form.filters[filter]"
+                v-model:open="openedFilter"
+                :config="props.filters[filter]"
+                :hide-remove="true"
+                class="flex-grow"
+                chip-classes="w-full !h-10"
+              />
+              <div
+                class="ml-2 h-10 w-10 flex items-center justify-center cursor-pointer"
+                @click="removeFilter(filter)"
+              >
+                <i class="ri-delete-bin-line text-lg h-5 flex items-center" />
+              </div>
+            </div>
+          </div>
+          <div
+            class="flex pb-10 border-b border-gray-200 pt-1"
+          >
+            <el-dropdown placement="bottom-start" trigger="click">
+              <p class="text-xs font-medium leading-5 text-brand-500">
+                + Add filter
+              </p>
+              <template #dropdown>
+                <el-dropdown-item
+                  v-for="(filterConfig, key) in props.filters"
+                  :key="key"
+                  :disabled="filterList.includes(key)"
+                  @click="addFilter(key)"
+                >
+                  {{ filterConfig.label }}
+                </el-dropdown-item>
+              </template>
+            </el-dropdown>
+          </div>
+        </section>
+
+        <!-- Filters -->
+        <section class="px-6">
+          <div class="py-6">
+            <h6 class="text-base font-semibold">
+              Sorting
+            </h6>
+          </div>
+          <div />
+        </section>
+      </div>
+    </template>
+  </app-drawer>
+</template>
+
+<script setup lang="ts">
+import {
+  computed, reactive, ref,
+} from 'vue';
+import AppDrawer from '@/shared/drawer/drawer.vue';
+import AppFormItem from '@/shared/form/form-item.vue';
+import { required } from '@vuelidate/validators';
+import useVuelidate from '@vuelidate/core';
+import { SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
+import { FilterConfig } from '@/shared/modules/filters/types/FilterConfig';
+import CrFilterItem from '@/shared/modules/filters/components/FilterItem.vue';
+
+const props = defineProps<{
+  modelValue: boolean,
+  config: SavedViewsConfig,
+  filters: Record<string, FilterConfig>
+}>();
+
+const emit = defineEmits<{(e: 'update:modelValue', value: boolean): any}>();
+
+const isDrawerOpen = computed<boolean>({
+  get() {
+    return props.modelValue;
+  },
+  set(value: boolean) {
+    emit('update:modelValue', value);
+  },
+});
+
+const settingsDefaultValue = computed<Record<string, any>>(() => {
+  const settingsObject = { ...props.config.settings };
+  Object.entries(settingsObject).forEach(([key, setting]) => {
+    if (setting.inSettings && setting.settingsComponent) {
+      settingsObject[key] = settingsObject[key].defaultValue;
+    } else {
+      delete settingsObject[key];
+    }
+  });
+  return settingsObject;
+});
+
+const form = reactive({
+  shared: false,
+  name: '',
+  filters: {},
+  settings: { ...settingsDefaultValue.value },
+  sorting: {
+    property: '',
+    direction: 'asc',
+  },
+});
+
+const rules = {
+  name: {
+    required,
+  },
+};
+
+const $v = useVuelidate(rules, form);
+
+const settings = computed<Record<string, any>>(() => {
+  const settingsObject = { ...props.config.settings };
+  Object.entries(settingsObject).forEach(([key, setting]) => {
+    if (!setting.inSettings || !setting.settingsComponent) {
+      delete settingsObject[key];
+    }
+  });
+  return settingsObject;
+});
+
+const filterList = ref<string[]>([]);
+const openedFilter = ref<string>('');
+
+const addFilter = (key: string) => {
+  if (filterList.value.includes(key)) {
+    return;
+  }
+  filterList.value.push(key);
+  openedFilter.value = key;
+};
+
+const removeFilter = (key: any) => {
+  openedFilter.value = '';
+  filterList.value = filterList.value.filter((el) => el !== key);
+  delete form.filters[key];
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'CrSavedViewsForm',
+};
+</script>
diff --git a/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts b/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
index 36913335f5..6a129b95f0 100644
--- a/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
+++ b/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
@@ -7,10 +7,11 @@ export interface SavedView {
 }
 
 export interface SavedViewsSetting<T> {
-  component?: any;
   defaultValue: T,
   queryUrlParser: (value: string) => T;
   apiFilterRenderer: (value: T) => any[];
+  inSettings: boolean;
+  settingsComponent?: any;
 }
 
 export interface SavedViewsConfig {

From ab1d3697a4b4d043835835aa4421ba235cbcef73 Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Mon, 2 Oct 2023 13:29:10 +0200
Subject: [PATCH 02/22] Form and sort view

---
 .../modules/member/config/saved-views/main.ts | 24 ++++-----
 .../config/saved-views/views/influential.ts   | 26 ----------
 .../config/saved-views/views/most-engaged.ts  | 26 ----------
 .../saved-views/views/new-and-active.ts       | 32 ------------
 .../config/saved-views/views/slipping-away.ts | 32 ------------
 .../config/saved-views/views/team-members.ts  | 21 --------
 .../modules/member/pages/member-list-page.vue |  3 +-
 .../components/SavedViewManagement.vue        | 35 +++++++++++++
 .../saved-views/components/SavedViews.vue     | 45 ++++++++++++----
 .../components/forms/SavedViewForm.vue        | 51 +++++++++++++++++--
 .../saved-views/types/SavedViewsConfig.ts     |  3 +-
 11 files changed, 129 insertions(+), 169 deletions(-)
 delete mode 100644 frontend/src/modules/member/config/saved-views/views/influential.ts
 delete mode 100644 frontend/src/modules/member/config/saved-views/views/most-engaged.ts
 delete mode 100644 frontend/src/modules/member/config/saved-views/views/new-and-active.ts
 delete mode 100644 frontend/src/modules/member/config/saved-views/views/slipping-away.ts
 delete mode 100644 frontend/src/modules/member/config/saved-views/views/team-members.ts
 create mode 100644 frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue

diff --git a/frontend/src/modules/member/config/saved-views/main.ts b/frontend/src/modules/member/config/saved-views/main.ts
index 701575479a..869487e748 100644
--- a/frontend/src/modules/member/config/saved-views/main.ts
+++ b/frontend/src/modules/member/config/saved-views/main.ts
@@ -1,10 +1,5 @@
-import { SavedView, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
+import { SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 import allMembers from './views/all-members';
-import newAndActive from './views/new-and-active';
-import slippingAway from './views/slipping-away';
-import mostEngaged from './views/most-engaged';
-import influential from './views/influential';
-import teamMembers from './views/team-members';
 
 import bot from './settings/bot/config';
 import teamMember from './settings/teamMember/config';
@@ -17,13 +12,12 @@ export const memberSavedViews: SavedViewsConfig = {
     bot,
     organization,
   },
+  sorting: {
+    displayName: 'Member',
+    activityCount: '# of activities',
+    score: 'Engagement level',
+    lastActive: 'Last activity',
+    joinedAt: 'Joined date',
+    numberOfOpenSourceContributions: '# of OSS contributions',
+  },
 };
-
-// Hardcoded views until we have backend done for it
-export const memberViews: SavedView[] = [
-  newAndActive,
-  slippingAway,
-  mostEngaged,
-  influential,
-  teamMembers,
-];
diff --git a/frontend/src/modules/member/config/saved-views/views/influential.ts b/frontend/src/modules/member/config/saved-views/views/influential.ts
deleted file mode 100644
index c6d771c381..0000000000
--- a/frontend/src/modules/member/config/saved-views/views/influential.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { SavedView } from '@/shared/modules/saved-views/types/SavedViewsConfig';
-
-const influential: SavedView = {
-  id: 'influential',
-  label: 'Influential',
-  filter: {
-    search: '',
-    relation: 'and',
-    order: {
-      prop: 'lastActive',
-      order: 'descending',
-    },
-    settings: {
-      bot: 'exclude',
-      teamMember: 'exclude',
-      organization: 'exclude',
-    },
-
-    reach: {
-      operator: 'gte',
-      value: 500,
-    },
-  },
-};
-
-export default influential;
diff --git a/frontend/src/modules/member/config/saved-views/views/most-engaged.ts b/frontend/src/modules/member/config/saved-views/views/most-engaged.ts
deleted file mode 100644
index b8e4157b0d..0000000000
--- a/frontend/src/modules/member/config/saved-views/views/most-engaged.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { SavedView } from '@/shared/modules/saved-views/types/SavedViewsConfig';
-
-const mostEngaged: SavedView = {
-  id: 'most-engaged',
-  label: 'Most engaged',
-  filter: {
-    search: '',
-    relation: 'and',
-    order: {
-      prop: 'lastActive',
-      order: 'descending',
-    },
-    settings: {
-      bot: 'exclude',
-      teamMember: 'exclude',
-      organization: 'exclude',
-    },
-
-    engagementLevel: {
-      value: ['fan', 'ultra'],
-      include: true,
-    },
-  },
-};
-
-export default mostEngaged;
diff --git a/frontend/src/modules/member/config/saved-views/views/new-and-active.ts b/frontend/src/modules/member/config/saved-views/views/new-and-active.ts
deleted file mode 100644
index e81152a2f1..0000000000
--- a/frontend/src/modules/member/config/saved-views/views/new-and-active.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { SavedView } from '@/shared/modules/saved-views/types/SavedViewsConfig';
-import moment from 'moment';
-
-const newAndActive: SavedView = {
-  id: 'new-and-active',
-  label: 'New and active',
-  filter: {
-    search: '',
-    relation: 'and',
-    order: {
-      prop: 'lastActive',
-      order: 'descending',
-    },
-    settings: {
-      bot: 'exclude',
-      teamMember: 'exclude',
-      organization: 'exclude',
-    },
-
-    joinedDate: {
-      operator: 'gt',
-      value: moment().subtract(1, 'month').format('YYYY-MM-DD'),
-    },
-
-    lastActivityDate: {
-      operator: 'gt',
-      value: moment().subtract(1, 'month').format('YYYY-MM-DD'),
-    },
-  },
-};
-
-export default newAndActive;
diff --git a/frontend/src/modules/member/config/saved-views/views/slipping-away.ts b/frontend/src/modules/member/config/saved-views/views/slipping-away.ts
deleted file mode 100644
index e0702bf8f6..0000000000
--- a/frontend/src/modules/member/config/saved-views/views/slipping-away.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { SavedView } from '@/shared/modules/saved-views/types/SavedViewsConfig';
-import moment from 'moment';
-
-const slippingAway: SavedView = {
-  id: 'slipping-away',
-  label: 'Slipping away',
-  filter: {
-    search: '',
-    relation: 'and',
-    order: {
-      prop: 'lastActive',
-      order: 'descending',
-    },
-    settings: {
-      bot: 'exclude',
-      teamMember: 'exclude',
-      organization: 'exclude',
-    },
-
-    engagementLevel: {
-      value: ['fan', 'ultra'],
-      include: true,
-    },
-
-    lastActivityDate: {
-      operator: 'lt',
-      value: moment().subtract(1, 'month').format('YYYY-MM-DD'),
-    },
-  },
-};
-
-export default slippingAway;
diff --git a/frontend/src/modules/member/config/saved-views/views/team-members.ts b/frontend/src/modules/member/config/saved-views/views/team-members.ts
deleted file mode 100644
index a55c633067..0000000000
--- a/frontend/src/modules/member/config/saved-views/views/team-members.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { SavedView } from '@/shared/modules/saved-views/types/SavedViewsConfig';
-
-const teamMembers: SavedView = {
-  id: 'team-members',
-  label: 'Team members',
-  filter: {
-    search: '',
-    relation: 'and',
-    order: {
-      prop: 'lastActive',
-      order: 'descending',
-    },
-    settings: {
-      bot: 'exclude',
-      teamMember: 'filter',
-      organization: 'exclude',
-    },
-  },
-};
-
-export default teamMembers;
diff --git a/frontend/src/modules/member/pages/member-list-page.vue b/frontend/src/modules/member/pages/member-list-page.vue
index 318d7ce52a..06f2d6769e 100644
--- a/frontend/src/modules/member/pages/member-list-page.vue
+++ b/frontend/src/modules/member/pages/member-list-page.vue
@@ -54,7 +54,6 @@
       <cr-saved-views
         v-model="filters"
         :config="memberSavedViews"
-        :views="memberViews"
         :filters="memberFilters"
         @update:model-value="memberFilter.alignFilterList($event)"
       />
@@ -94,7 +93,7 @@ import { FilterQuery } from '@/shared/modules/filters/types/FilterQuery';
 import CrSavedViews from '@/shared/modules/saved-views/components/SavedViews.vue';
 import AppMemberListTable from '@/modules/member/components/list/member-list-table.vue';
 import { memberFilters, memberSearchFilter } from '../config/filters/main';
-import { memberSavedViews, memberViews } from '../config/saved-views/main';
+import { memberSavedViews } from '../config/saved-views/main';
 
 const memberStore = useMemberStore();
 const { getMemberCustomAttributes, fetchMembers } = memberStore;
diff --git a/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue b/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue
new file mode 100644
index 0000000000..8dc7826f93
--- /dev/null
+++ b/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="p-8">
+    <article class="py-2.5 px-3 flex justify-between">
+      <p class="text-xs text-gray-900">
+        {{ props.config.defaultView.label }}
+      </p>
+      <p class="text-xs text-gray-400 italic">
+        default view
+      </p>
+    </article>
+  </div>
+  <div class="border-b border-gray-100" />
+  <div class="py-2">
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SavedView, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
+
+const props = defineProps<{
+  config: SavedViewsConfig,
+  views: SavedView[]
+}>();
+</script>
+
+<script lang="ts">
+export default {
+  name: 'CrSavedViewsManagement',
+};
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/frontend/src/shared/modules/saved-views/components/SavedViews.vue b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
index 89100eb516..3405f8dc3d 100644
--- a/frontend/src/shared/modules/saved-views/components/SavedViews.vue
+++ b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
@@ -7,7 +7,7 @@
           name=""
         />
         <el-tab-pane
-          v-for="view of props.views"
+          v-for="view of views"
           :key="view.id"
           :label="view.label"
           :name="view.id"
@@ -23,8 +23,8 @@
           Save as...
         </el-button>
         <template #dropdown>
-          <el-dropdown-item>
-            <div class="w-40">
+          <el-dropdown-item v-if="selectedTab.length > 0 && selectedTab !== props.config.defaultView.id">
+            <div class="w-40" @click="update()">
               <i class="ri-loop-left-line text-gray-400 text-base mr-2" />Update view
             </div>
           </el-dropdown-item>
@@ -41,11 +41,14 @@
           <i class="ri-add-line text-lg text-gray-400 h-5 flex items-center" />
         </el-button>
       </el-tooltip>
-      <el-tooltip content="Manage views" placement="top">
-        <el-button class="btn btn-brand btn--transparent btn--icon--sm inset-y-0 !border-0">
-          <i class="ri-list-settings-line text-lg text-gray-400 h-5 flex items-center" />
-        </el-button>
-      </el-tooltip>
+      <el-popover trigger="click" placement="bottom-end" popper-class="!p-0" width="320px">
+        <template #reference>
+          <el-button class="btn btn-brand btn--transparent btn--icon--sm inset-y-0 !border-0">
+            <i class="ri-list-settings-line text-lg text-gray-400 h-5 flex items-center" />
+          </el-button>
+        </template>
+        <cr-saved-views-management :config="props.config" :views="[]" />
+      </el-popover>
     </div>
   </div>
   <cr-saved-views-form v-model="isFormOpen" :config="props.config" :filters="props.filters" />
@@ -60,16 +63,21 @@ import { Filter, FilterConfig } from '@/shared/modules/filters/types/FilterConfi
 import { SavedView, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 import { isEqual } from 'lodash';
 import CrSavedViewsForm from '@/shared/modules/saved-views/components/forms/SavedViewForm.vue';
+import ConfirmDialog from '@/shared/dialog/confirm-dialog';
+import { formatNumber } from '@/utils/number';
+import { router } from '@/router';
+import CrSavedViewsManagement from '@/shared/modules/saved-views/components/SavedViewManagement.vue';
 
 const props = defineProps<{
   modelValue: Filter,
   config: SavedViewsConfig,
-  views: SavedView[],
   filters: Record<string, FilterConfig>
 }>();
 
 const emit = defineEmits<{(e: 'update:modelValue', value: Filter): any}>();
 
+const views = ref<SavedView[]>([]);
+
 const isFormOpen = ref<boolean>(false);
 
 const filters = computed<Filter>({
@@ -85,7 +93,7 @@ const selectedTab = ref<string>('');
 
 const getView = (id: string): SavedView => {
   if (id.length > 0) {
-    const view = props.views.find((v) => v.id === id);
+    const view = views.value.find((v) => v.id === id);
     if (view) {
       return view;
     }
@@ -127,13 +135,28 @@ const reset = () => {
   };
 };
 
+// Update current view
+const update = () => {
+  ConfirmDialog({
+    type: 'danger',
+    title: 'Update shared view',
+    message:
+        'This view is shared with all workspace users, any changes will reflected in each user account.',
+    icon: 'ri-loop-left-line',
+    confirmButtonText: 'Update shared view',
+    showCancelButton: true,
+    cancelButtonText: 'Cancel',
+  } as any).then(() => {
+  });
+};
+
 // Change tab if filters match
 watch(() => props.modelValue, (filter: Filter) => {
   if (compareFilterToCurrentValues(props.config.defaultView.filter)) {
     selectedTab.value = '';
     return;
   }
-  const matchingView = props.views.find((view) => compareFilterToCurrentValues(view.filter));
+  const matchingView = views.value.find((view) => compareFilterToCurrentValues(view.filter));
   if (matchingView) {
     selectedTab.value = matchingView.id;
   }
diff --git a/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue b/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
index 0c8cee056c..d9cf7998b1 100644
--- a/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
+++ b/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
@@ -100,10 +100,42 @@
               Sorting
             </h6>
           </div>
-          <div />
+          <div class="flex items-center">
+            <div class="w-2/3">
+              <el-select v-model="form.sorting.prop" class="w-full sort-property-select">
+                <el-option
+                  v-for="(label, key) in props.config.sorting"
+                  :key="key"
+                  :value="key"
+                  :label="label"
+                />
+              </el-select>
+            </div>
+            <div class="w-1/3 -ml-px">
+              <el-select v-model="form.sorting.order" class="w-full sort-order-select">
+                <el-option value="ascending" label="Ascending" />
+                <el-option value="descending" label="Descending" />
+              </el-select>
+            </div>
+          </div>
         </section>
       </div>
     </template>
+    <template #footer>
+      <div style="flex: auto">
+        <el-button
+          class="btn btn--md btn--bordered mr-3"
+        >
+          Cancel
+        </el-button>
+        <el-button
+          type="primary"
+          class="btn btn--md btn--primary"
+        >
+          Add view
+        </el-button>
+      </div>
+    </template>
   </app-drawer>
 </template>
 
@@ -154,8 +186,8 @@ const form = reactive({
   filters: {},
   settings: { ...settingsDefaultValue.value },
   sorting: {
-    property: '',
-    direction: 'asc',
+    prop: props.config.defaultView.filter.order.prop,
+    order: props.config.defaultView.filter.order.order,
   },
 });
 
@@ -200,3 +232,16 @@ export default {
   name: 'CrSavedViewsForm',
 };
 </script>
+
+<style lang="scss">
+.sort-property-select{
+  .el-input .el-input__wrapper, .el-input .el-textarea__inner{
+    @apply rounded-r-none;
+  }
+}
+.sort-order-select{
+  .el-input .el-input__wrapper, .el-input .el-textarea__inner{
+    @apply rounded-l-none;
+  }
+}
+</style>
diff --git a/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts b/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
index 6a129b95f0..50cc1558e6 100644
--- a/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
+++ b/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
@@ -16,5 +16,6 @@ export interface SavedViewsSetting<T> {
 
 export interface SavedViewsConfig {
   defaultView: SavedView;
-  settings: Record<string, SavedViewsSetting<any>>
+  settings: Record<string, SavedViewsSetting<any>>,
+  sorting: Record<string, string> // Object with property and label for sorting
 }

From 817b1b1aa7bf604da00323c0889760cf9b362d48 Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Fri, 6 Oct 2023 15:10:11 +0700
Subject: [PATCH 03/22] View ordering and filter search

---
 frontend/index.html                           | 10 +--
 frontend/package-lock.json                    | 16 ++++
 frontend/package.json                         |  1 +
 .../devto/components/devto-connect-drawer.vue |  2 +-
 .../components/linkedin-settings-drawer.vue   |  2 +-
 .../components/dashboard-members.vue          |  2 -
 .../components/dashboard-organizations.vue    |  4 +-
 .../form/member-form-organizations-drawer.vue | 20 ++---
 .../form/member-form-organizations.vue        |  4 +-
 .../config/saved-views/settings/bot/config.ts |  2 +-
 .../saved-views/settings/teamMember/config.ts |  2 +-
 .../components/SavedViewManagement.vue        | 86 ++++++++++++++++---
 .../saved-views/components/SavedViews.vue     |  2 -
 .../components/forms/SavedViewForm.vue        | 57 +++++++++---
 14 files changed, 160 insertions(+), 50 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 9f7606b3ce..733bf61b25 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -43,12 +43,12 @@
     <link
       rel="preload"
       as="style"
-      href="https://cdn.jsdelivr.net/npm/remixicon@3.1.1/fonts/remixicon.css"
+      href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css"
     />
 
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/remixicon@3.1.1/fonts/remixicon.css"
+      href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css"
       media="print"
       onload="this.media='all'"
     />
@@ -60,7 +60,7 @@
       />
       <link
         as="style"
-        href="https://cdn.jsdelivr.net/npm/remixicon@3.1.1/fonts/remixicon.css"
+        href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css"
       />
     </noscript>
     <script type="text/javascript">
@@ -70,7 +70,7 @@
       if (!segmentKey || segmentKey.startsWith('%VUE_APP_SEGMENT_KEY')) {
         segmentKey = 'CROWD_VUE_APP_SEGMENT_KEY'
       }
-      
+
       !(function() {
         var analytics = (window.analytics =
                 window.analytics || [])
@@ -136,7 +136,7 @@
             analytics.load(segmentKey)
           }
       })()
-      
+
 
       let pendoKey = '%VUE_APP_PENDO_KEY%'
 
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 945d9fd655..9d6ec2b1c7 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -50,6 +50,7 @@
         "vite": "^4.4.7",
         "vue": "^3.3.1",
         "vue-3-sanitize": "^0.1.4",
+        "vue-draggable-next": "^2.2.1",
         "vue-grid-layout": "3.0.0-beta1",
         "vue-json-pretty": "^2.2.4",
         "vue-router": "^4.1.6",
@@ -11564,6 +11565,15 @@
         "sanitize-html": "^2.0.0"
       }
     },
+    "node_modules/vue-draggable-next": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/vue-draggable-next/-/vue-draggable-next-2.2.1.tgz",
+      "integrity": "sha512-EAMS1IRHF0kZO0o5PMOinsQsXIqsrKT1hKmbICxG3UEtn7zLFkLxlAtajcCcUTisNvQ6TtCB5COjD9a1raNADw==",
+      "peerDependencies": {
+        "sortablejs": "^1.14.0",
+        "vue": "^3.2.2"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "9.2.1",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.2.1.tgz",
@@ -20452,6 +20462,12 @@
         "sanitize-html": "^2.0.0"
       }
     },
+    "vue-draggable-next": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/vue-draggable-next/-/vue-draggable-next-2.2.1.tgz",
+      "integrity": "sha512-EAMS1IRHF0kZO0o5PMOinsQsXIqsrKT1hKmbICxG3UEtn7zLFkLxlAtajcCcUTisNvQ6TtCB5COjD9a1raNADw==",
+      "requires": {}
+    },
     "vue-eslint-parser": {
       "version": "9.2.1",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.2.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 71d90ed2da..4b142d6f35 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -61,6 +61,7 @@
     "vite": "^4.4.7",
     "vue": "^3.3.1",
     "vue-3-sanitize": "^0.1.4",
+    "vue-draggable-next": "^2.2.1",
     "vue-grid-layout": "3.0.0-beta1",
     "vue-json-pretty": "^2.2.4",
     "vue-router": "^4.1.6",
diff --git a/frontend/src/integrations/devto/components/devto-connect-drawer.vue b/frontend/src/integrations/devto/components/devto-connect-drawer.vue
index 663531cf9e..befeed64aa 100644
--- a/frontend/src/integrations/devto/components/devto-connect-drawer.vue
+++ b/frontend/src/integrations/devto/components/devto-connect-drawer.vue
@@ -389,7 +389,7 @@ export default {
     },
 
     async handleOrganizationValidation(id) {
-      const config = this.organizations.find(
+      const organization = this.organizations.find(
         (o) => o.id === id,
       );
 
diff --git a/frontend/src/integrations/linkedin/components/linkedin-settings-drawer.vue b/frontend/src/integrations/linkedin/components/linkedin-settings-drawer.vue
index 0b9aabff2b..aebb8054af 100644
--- a/frontend/src/integrations/linkedin/components/linkedin-settings-drawer.vue
+++ b/frontend/src/integrations/linkedin/components/linkedin-settings-drawer.vue
@@ -39,7 +39,7 @@
             placeholder="Select option"
           >
             <el-option
-              v-for="config of organizations"
+              v-for="organization of organizations"
               :key="organization.id"
               :label="organization.vanityName"
               :value="organization.id"
diff --git a/frontend/src/modules/dashboard/components/dashboard-members.vue b/frontend/src/modules/dashboard/components/dashboard-members.vue
index cc7e381a6d..7a77e88627 100644
--- a/frontend/src/modules/dashboard/components/dashboard-members.vue
+++ b/frontend/src/modules/dashboard/components/dashboard-members.vue
@@ -221,7 +221,6 @@ import { DAILY_GRANULARITY_FILTER } from '@/modules/widget/widget-constants';
 import AppDashboardMemberItem from '@/modules/dashboard/components/member/dashboard-member-item.vue';
 import AppDashboardCount from '@/modules/dashboard/components/dashboard-count.vue';
 import { filterQueryService } from '@/shared/modules/filters/services/filter-query.service';
-import newAndActive from '@/modules/member/config/saved-views/views/new-and-active';
 import allMembers from '@/modules/member/config/saved-views/views/all-members';
 
 export default {
@@ -241,7 +240,6 @@ export default {
       activeMembersCount,
       formatDateToTimeAgo,
       filterQueryService,
-      newAndActive,
       allMembers,
     };
   },
diff --git a/frontend/src/modules/dashboard/components/dashboard-organizations.vue b/frontend/src/modules/dashboard/components/dashboard-organizations.vue
index 5ca90a6ab6..2394325575 100644
--- a/frontend/src/modules/dashboard/components/dashboard-organizations.vue
+++ b/frontend/src/modules/dashboard/components/dashboard-organizations.vue
@@ -58,7 +58,7 @@
           </div>
           <div v-else>
             <app-dashboard-organization-item
-              v-for="config of recentOrganizations"
+              v-for="organization of recentOrganizations"
               :key="organization.id"
               :show-badge="false"
               class="mb-4"
@@ -139,7 +139,7 @@
           </div>
           <div v-else>
             <app-dashboard-organization-item
-              v-for="config of activeOrganizations"
+              v-for="organization of activeOrganizations"
               :key="organization.id"
               class="mb-4"
               :organization="organization"
diff --git a/frontend/src/modules/member/components/form/member-form-organizations-drawer.vue b/frontend/src/modules/member/components/form/member-form-organizations-drawer.vue
index 1a1082e53f..66e053dc91 100644
--- a/frontend/src/modules/member/components/form/member-form-organizations-drawer.vue
+++ b/frontend/src/modules/member/components/form/member-form-organizations-drawer.vue
@@ -6,7 +6,7 @@
   >
     <template #content>
       <div class="border-t border-gray-200 p-6 -mx-6 -mt-5">
-        <article v-for="(config, oi) in organizations" :key="organization.id" class="flex items-center justify-between w-full pb-5">
+        <article v-for="(organization, oi) in organizations" :key="organization.id" class="flex items-center justify-between w-full pb-5">
           <div class="flex">
             <div class="h-6 w-6 border border-gray-200 rounded flex items-center justify-center mr-2.5">
               <app-avatar
@@ -19,21 +19,21 @@
             </div>
             <div>
               <h6 class="text-xs leading-5 font-medium">
-                {{ config.displayName || config.name }}
+                {{ organization.displayName || organization.name }}
               </h6>
               <p class="text-2xs leading-5 text-gray-500">
-                <span v-if="organization.memberOrganizations.title">{{ config.memberOrganizations.title }}</span>
+                <span v-if="organization.memberOrganizations.title">{{ organization.memberOrganizations.title }}</span>
                 <span v-if="organization.memberOrganizations.title" class="mx-1">•</span>
                 <span>
-                  {{ config.memberOrganizations.dateStart
-                    ? moment(config.memberOrganizations.dateStart).utc().format('MMMM YYYY')
+                  {{ organization.memberOrganizations.dateStart
+                    ? moment(organization.memberOrganizations.dateStart).utc().format('MMMM YYYY')
                     : 'Unknown' }}
                 </span>
                 <span class="mx-1 whitespace-nowrap">-></span>
                 <span>
-                  {{ config.memberOrganizations.dateEnd
-                    ? moment(config.memberOrganizations.dateEnd).utc().format('MMMM YYYY')
-                    : config.memberOrganizations.dateStart ? 'Present' : 'Unknown' }}
+                  {{ organization.memberOrganizations.dateEnd
+                    ? moment(organization.memberOrganizations.dateEnd).utc().format('MMMM YYYY')
+                    : organization.memberOrganizations.dateStart ? 'Present' : 'Unknown' }}
                 </span>
               </p>
             </div>
@@ -130,13 +130,13 @@ const edit = (organizationIndex: number) => {
   isOrganizationFormModalOpen.value = true;
 };
 
-const update = (config: Organization) => {
+const update = (organization: Organization) => {
   organizations.value[editOrganization.value] = organization;
   editOrganization.value = null;
   save();
 };
 
-const add = (config: Organization) => {
+const add = (organization: Organization) => {
   organizations.value.push(organization);
   save();
 };
diff --git a/frontend/src/modules/member/components/form/member-form-organizations.vue b/frontend/src/modules/member/components/form/member-form-organizations.vue
index b4f1752ce3..52ee093ff5 100644
--- a/frontend/src/modules/member/components/form/member-form-organizations.vue
+++ b/frontend/src/modules/member/components/form/member-form-organizations.vue
@@ -26,7 +26,7 @@
         <div class="w-18" />
       </div>
 
-      <div v-for="(config, oi) in organizations" :key="organization.id" class="flex gap-3 border-b h-8 items-center min-h-17">
+      <div v-for="(organization, oi) in organizations" :key="organization.id" class="flex gap-3 border-b h-8 items-center min-h-17">
         <div class="flex items-center w-full">
           <div class="w-1/3 flex items-center">
             <app-avatar
@@ -124,7 +124,7 @@ const edit = (organizationIndex: number) => {
   isOrganizationFormModalOpen.value = true;
 };
 
-const update = (config: Organization) => {
+const update = (organization: Organization) => {
   organizations.value[editOrganization.value] = organization;
   editOrganization.value = null;
 };
diff --git a/frontend/src/modules/member/config/saved-views/settings/bot/config.ts b/frontend/src/modules/member/config/saved-views/settings/bot/config.ts
index 91b9f18681..bd1100e7cf 100644
--- a/frontend/src/modules/member/config/saved-views/settings/bot/config.ts
+++ b/frontend/src/modules/member/config/saved-views/settings/bot/config.ts
@@ -1,7 +1,7 @@
 import { SavedViewsSetting } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 import { IncludeEnum } from '@/modules/member/config/saved-views/settings/common/types/IncludeEnum';
 import { includeFilterRenderer } from '@/modules/member/config/saved-views/settings/common/includeFilterRenderer';
-import MemberBotSetting from './MemberBotSetting.vue'
+import MemberBotSetting from './MemberBotSetting.vue';
 
 const config: SavedViewsSetting<IncludeEnum> = {
   inSettings: true,
diff --git a/frontend/src/modules/member/config/saved-views/settings/teamMember/config.ts b/frontend/src/modules/member/config/saved-views/settings/teamMember/config.ts
index 84ab51674c..1d9d0d66cc 100644
--- a/frontend/src/modules/member/config/saved-views/settings/teamMember/config.ts
+++ b/frontend/src/modules/member/config/saved-views/settings/teamMember/config.ts
@@ -1,7 +1,7 @@
 import { SavedViewsSetting } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 import { includeFilterRenderer } from '@/modules/member/config/saved-views/settings/common/includeFilterRenderer';
 import { IncludeEnum } from '@/modules/member/config/saved-views/settings/common/types/IncludeEnum';
-import MemberTeamMemberSetting from './MemberTeamMemberSetting.vue'
+import MemberTeamMemberSetting from './MemberTeamMemberSetting.vue';
 
 const config: SavedViewsSetting<IncludeEnum> = {
   inSettings: true,
diff --git a/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue b/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue
index 8dc7826f93..d788289a9a 100644
--- a/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue
+++ b/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue
@@ -1,27 +1,87 @@
 <template>
-  <div class="p-8">
-    <article class="py-2.5 px-3 flex justify-between">
-      <p class="text-xs text-gray-900">
-        {{ props.config.defaultView.label }}
-      </p>
-      <p class="text-xs text-gray-400 italic">
-        default view
-      </p>
-    </article>
-  </div>
-  <div class="border-b border-gray-100" />
-  <div class="py-2">
-
+  <div class="px-2">
+    <div class="py-2">
+      <article class="py-2.5 px-3 flex justify-between">
+        <p class="text-xs text-gray-900">
+          {{ props.config.defaultView.label }}
+        </p>
+        <p class="text-xs text-gray-400 italic">
+          default view
+        </p>
+      </article>
+    </div>
+    <div class="border-b border-gray-100" />
+    <div class="py-2">
+      <vue-draggable-next :list="list">
+        <article
+          v-for="view of list"
+          :key="view.id"
+          class="p-2 rounded flex items-center justify-between flex-grow transition hover:bg-gray-50 cursor-grab"
+        >
+          <div class="flex items-center">
+            <i class="ri-draggable text-base text-gray-400 mr-2" />
+            <span class="text-sm leading-5 text-black">{{ view.label }}</span>
+          </div>
+          <div class="flex items-center">
+            <div
+              class="h-6 w-6 flex items-center justify-center ml-1 group cursor-pointer"
+              @click="edit(view.id)"
+            >
+              <i class="ri-pencil-line text-sm text-gray-400 group-hover:text-gray-600" />
+            </div>
+            <div
+              class="h-6 w-6 flex items-center justify-center ml-1 group cursor-pointer"
+              @click="duplicate(view.id)"
+            >
+              <i class="ri-file-copy-line text-sm text-gray-400 group-hover:text-gray-600" />
+            </div>
+            <div
+              class="h-6 w-6 flex items-center justify-center ml-1 group cursor-pointer"
+              @click="remove(view.id)"
+            >
+              <i class="ri-delete-bin-line text-sm text-gray-400 group-hover:text-gray-600" />
+            </div>
+          </div>
+        </article>
+      </vue-draggable-next>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { SavedView, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
+import { VueDraggableNext } from 'vue-draggable-next';
+import { ref } from 'vue';
 
 const props = defineProps<{
   config: SavedViewsConfig,
   views: SavedView[]
 }>();
+
+const list = ref([
+  {
+    id: 1,
+    label: 'New and active',
+  },
+  {
+    id: 2,
+    label: 'Slipping away',
+  },
+  {
+    id: 3,
+    label: 'Most engaged',
+  },
+]);
+
+const edit = (id: string) => {
+  console.log('edit', id);
+};
+const remove = (id: string) => {
+  console.log('delete', id);
+};
+const duplicate = (id: string) => {
+  console.log('duplicate', id);
+};
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/shared/modules/saved-views/components/SavedViews.vue b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
index 3405f8dc3d..28a9de8c68 100644
--- a/frontend/src/shared/modules/saved-views/components/SavedViews.vue
+++ b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
@@ -64,8 +64,6 @@ import { SavedView, SavedViewsConfig } from '@/shared/modules/saved-views/types/
 import { isEqual } from 'lodash';
 import CrSavedViewsForm from '@/shared/modules/saved-views/components/forms/SavedViewForm.vue';
 import ConfirmDialog from '@/shared/dialog/confirm-dialog';
-import { formatNumber } from '@/utils/number';
-import { router } from '@/router';
 import CrSavedViewsManagement from '@/shared/modules/saved-views/components/SavedViewManagement.vue';
 
 const props = defineProps<{
diff --git a/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue b/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
index d9cf7998b1..ee77bbf96f 100644
--- a/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
+++ b/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
@@ -75,19 +75,36 @@
           <div
             class="flex pb-10 border-b border-gray-200 pt-1"
           >
-            <el-dropdown placement="bottom-start" trigger="click">
+            <el-dropdown placement="bottom-start" trigger="click" popper-class="!p-0">
               <p class="text-xs font-medium leading-5 text-brand-500">
                 + Add filter
               </p>
               <template #dropdown>
-                <el-dropdown-item
-                  v-for="(filterConfig, key) in props.filters"
-                  :key="key"
-                  :disabled="filterList.includes(key)"
-                  @click="addFilter(key)"
-                >
-                  {{ filterConfig.label }}
-                </el-dropdown-item>
+                <div class="-m-2">
+                  <div class="border-b border-gray-100 p-2">
+                    <el-input
+                      ref="queryInput"
+                      v-model="dropdownSearch"
+                      placeholder="Search..."
+                      class="filter-dropdown-search"
+                      data-qa="filter-list-search"
+                    >
+                      <template #prefix>
+                        <i class="ri-search-line" />
+                      </template>
+                    </el-input>
+                  </div>
+                  <div class="m-2">
+                    <el-dropdown-item
+                      v-for="[key, filterConfig] of filteredFilters"
+                      :key="key"
+                      :disabled="filterList.includes(key)"
+                      @click="addFilter(key)"
+                    >
+                      {{ filterConfig.label }}
+                    </el-dropdown-item>
+                  </div>
+                </div>
               </template>
             </el-dropdown>
           </div>
@@ -180,7 +197,18 @@ const settingsDefaultValue = computed<Record<string, any>>(() => {
   return settingsObject;
 });
 
-const form = reactive({
+interface SavedViewForm {
+  shared: boolean;
+  name: string;
+  filters: Record<string, any>;
+  settings: Record<string, any>;
+  sorting: {
+    prop: string;
+    order: string;
+  }
+}
+
+const form = reactive<SavedViewForm>({
   shared: false,
   name: '',
   filters: {},
@@ -209,6 +237,13 @@ const settings = computed<Record<string, any>>(() => {
   return settingsObject;
 });
 
+// Filter dropdown
+const dropdownSearch = ref<string>('');
+
+const filteredFilters = computed(() => Object.entries(props.filters)
+  .filter(([_, config]: [string, FilterConfig]) => config.label.toLowerCase().includes(dropdownSearch.value.toLowerCase())));
+
+// Filter list management
 const filterList = ref<string[]>([]);
 const openedFilter = ref<string>('');
 
@@ -218,12 +253,14 @@ const addFilter = (key: string) => {
   }
   filterList.value.push(key);
   openedFilter.value = key;
+  dropdownSearch.value = '';
 };
 
 const removeFilter = (key: any) => {
   openedFilter.value = '';
   filterList.value = filterList.value.filter((el) => el !== key);
   delete form.filters[key];
+  dropdownSearch.value = '';
 };
 </script>
 

From 2399e8d305d17b55031f01e8cf4f7db78f29f776 Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Fri, 6 Oct 2023 15:36:21 +0700
Subject: [PATCH 04/22] View fetching

---
 .../modules/member/pages/member-list-page.vue |  1 +
 .../saved-views/components/SavedViews.vue     | 20 +++++++++++++++++--
 .../services/savec-views.service.ts           | 16 +++++++++++++++
 3 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/shared/modules/saved-views/services/savec-views.service.ts

diff --git a/frontend/src/modules/member/pages/member-list-page.vue b/frontend/src/modules/member/pages/member-list-page.vue
index 06f2d6769e..120fe116e0 100644
--- a/frontend/src/modules/member/pages/member-list-page.vue
+++ b/frontend/src/modules/member/pages/member-list-page.vue
@@ -55,6 +55,7 @@
         v-model="filters"
         :config="memberSavedViews"
         :filters="memberFilters"
+        placement="member"
         @update:model-value="memberFilter.alignFilterList($event)"
       />
       <cr-filter
diff --git a/frontend/src/shared/modules/saved-views/components/SavedViews.vue b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
index 28a9de8c68..93e52cba69 100644
--- a/frontend/src/shared/modules/saved-views/components/SavedViews.vue
+++ b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
@@ -57,7 +57,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 { SavedView, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
@@ -65,11 +65,13 @@ import { isEqual } from 'lodash';
 import CrSavedViewsForm from '@/shared/modules/saved-views/components/forms/SavedViewForm.vue';
 import ConfirmDialog from '@/shared/dialog/confirm-dialog';
 import CrSavedViewsManagement from '@/shared/modules/saved-views/components/SavedViewManagement.vue';
+import { SavecViewsService } from '@/shared/modules/saved-views/services/savec-views.service';
 
 const props = defineProps<{
   modelValue: Filter,
   config: SavedViewsConfig,
-  filters: Record<string, FilterConfig>
+  filters: Record<string, FilterConfig>,
+  placement: string,
 }>();
 
 const emit = defineEmits<{(e: 'update:modelValue', value: Filter): any}>();
@@ -159,6 +161,20 @@ watch(() => props.modelValue, (filter: Filter) => {
     selectedTab.value = matchingView.id;
   }
 }, { deep: true });
+
+// View management
+const getViews = () => {
+  SavecViewsService.query({
+    placement: props.placement,
+  })
+    .then((res) => {
+      console.log(res);
+    });
+};
+
+onMounted(() => {
+  getViews();
+});
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/shared/modules/saved-views/services/savec-views.service.ts b/frontend/src/shared/modules/saved-views/services/savec-views.service.ts
new file mode 100644
index 0000000000..f8b91bc4ba
--- /dev/null
+++ b/frontend/src/shared/modules/saved-views/services/savec-views.service.ts
@@ -0,0 +1,16 @@
+import authAxios from '@/shared/axios/auth-axios';
+import AuthCurrentTenant from '@/modules/auth/auth-current-tenant';
+
+export class SavecViewsService {
+  static query(params: any) {
+    const tenantId = AuthCurrentTenant.get();
+
+    return authAxios.get(
+      `/tenant/${tenantId}/customview`,
+      {
+        params,
+      },
+    )
+      .then((res) => res.data);
+  }
+}

From ebb78a37ef3963c6682bca9734675210d2a5078b Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Fri, 6 Oct 2023 16:50:35 +0700
Subject: [PATCH 05/22] View list

---
 .../components/SavedViewManagement.vue        |  2 +-
 .../saved-views/components/SavedViews.vue     | 21 +++++----
 .../services/savec-views.service.ts           | 16 -------
 .../services/saved-views.service.ts           | 46 +++++++++++++++++++
 .../saved-views/types/SavedViewsConfig.ts     |  8 ++++
 5 files changed, 67 insertions(+), 26 deletions(-)
 delete mode 100644 frontend/src/shared/modules/saved-views/services/savec-views.service.ts
 create mode 100644 frontend/src/shared/modules/saved-views/services/saved-views.service.ts

diff --git a/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue b/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue
index d788289a9a..3a0e028300 100644
--- a/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue
+++ b/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue
@@ -14,7 +14,7 @@
     <div class="py-2">
       <vue-draggable-next :list="list">
         <article
-          v-for="view of list"
+          v-for="view of props.views"
           :key="view.id"
           class="p-2 rounded flex items-center justify-between flex-grow transition hover:bg-gray-50 cursor-grab"
         >
diff --git a/frontend/src/shared/modules/saved-views/components/SavedViews.vue b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
index 93e52cba69..8a90e544b2 100644
--- a/frontend/src/shared/modules/saved-views/components/SavedViews.vue
+++ b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
@@ -41,13 +41,13 @@
           <i class="ri-add-line text-lg text-gray-400 h-5 flex items-center" />
         </el-button>
       </el-tooltip>
-      <el-popover trigger="click" placement="bottom-end" popper-class="!p-0" width="320px">
+      <el-popover v-if="views.length > 0" trigger="click" placement="bottom-end" popper-class="!p-0" width="320px">
         <template #reference>
           <el-button class="btn btn-brand btn--transparent btn--icon--sm inset-y-0 !border-0">
             <i class="ri-list-settings-line text-lg text-gray-400 h-5 flex items-center" />
           </el-button>
         </template>
-        <cr-saved-views-management :config="props.config" :views="[]" />
+        <cr-saved-views-management :config="props.config" :views="views" />
       </el-popover>
     </div>
   </div>
@@ -57,7 +57,7 @@
 <script setup lang="ts">
 import {
   computed,
-  defineProps, onMounted, ref, watch,
+  onMounted, ref, watch,
 } from 'vue';
 import { Filter, FilterConfig } from '@/shared/modules/filters/types/FilterConfig';
 import { SavedView, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
@@ -65,7 +65,7 @@ import { isEqual } from 'lodash';
 import CrSavedViewsForm from '@/shared/modules/saved-views/components/forms/SavedViewForm.vue';
 import ConfirmDialog from '@/shared/dialog/confirm-dialog';
 import CrSavedViewsManagement from '@/shared/modules/saved-views/components/SavedViewManagement.vue';
-import { SavecViewsService } from '@/shared/modules/saved-views/services/savec-views.service';
+import { SavedViewsService } from '@/shared/modules/saved-views/services/saved-views.service';
 
 const props = defineProps<{
   modelValue: Filter,
@@ -76,8 +76,6 @@ const props = defineProps<{
 
 const emit = defineEmits<{(e: 'update:modelValue', value: Filter): any}>();
 
-const views = ref<SavedView[]>([]);
-
 const isFormOpen = ref<boolean>(false);
 
 const filters = computed<Filter>({
@@ -163,12 +161,17 @@ watch(() => props.modelValue, (filter: Filter) => {
 }, { deep: true });
 
 // View management
+const views = ref<SavedView[]>([]);
+
 const getViews = () => {
-  SavecViewsService.query({
+  SavedViewsService.query({
     placement: props.placement,
   })
-    .then((res) => {
-      console.log(res);
+    .then((res: SavedView[]) => {
+      views.value = res;
+    })
+    .catch(() => {
+      views.value = [];
     });
 };
 
diff --git a/frontend/src/shared/modules/saved-views/services/savec-views.service.ts b/frontend/src/shared/modules/saved-views/services/savec-views.service.ts
deleted file mode 100644
index f8b91bc4ba..0000000000
--- a/frontend/src/shared/modules/saved-views/services/savec-views.service.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import authAxios from '@/shared/axios/auth-axios';
-import AuthCurrentTenant from '@/modules/auth/auth-current-tenant';
-
-export class SavecViewsService {
-  static query(params: any) {
-    const tenantId = AuthCurrentTenant.get();
-
-    return authAxios.get(
-      `/tenant/${tenantId}/customview`,
-      {
-        params,
-      },
-    )
-      .then((res) => res.data);
-  }
-}
diff --git a/frontend/src/shared/modules/saved-views/services/saved-views.service.ts b/frontend/src/shared/modules/saved-views/services/saved-views.service.ts
new file mode 100644
index 0000000000..63bd997ab5
--- /dev/null
+++ b/frontend/src/shared/modules/saved-views/services/saved-views.service.ts
@@ -0,0 +1,46 @@
+import authAxios from '@/shared/axios/auth-axios';
+import AuthCurrentTenant from '@/modules/auth/auth-current-tenant';
+import { SavedViewCreate } from '@/shared/modules/saved-views/types/SavedViewsConfig';
+
+export class SavedViewsService {
+  static query(params: any) {
+    const tenantId = AuthCurrentTenant.get();
+
+    return authAxios.get(
+      `/tenant/${tenantId}/customview`,
+      {
+        params,
+      },
+    )
+      .then((res) => res.data);
+  }
+
+  static create(view: SavedViewCreate) {
+    const tenantId = AuthCurrentTenant.get();
+
+    return authAxios.post(
+      `/tenant/${tenantId}/customview`,
+      view,
+    )
+      .then((res) => res.data);
+  }
+
+  static update(id: string, view: SavedViewCreate) {
+    const tenantId = AuthCurrentTenant.get();
+
+    return authAxios.put(
+      `/tenant/${tenantId}/customview/${id}`,
+      view,
+    )
+      .then((res) => res.data);
+  }
+
+  static delete(id: string) {
+    const tenantId = AuthCurrentTenant.get();
+
+    return authAxios.delete(
+      `/tenant/${tenantId}/customview/${id}`,
+    )
+      .then((res) => res.data);
+  }
+}
diff --git a/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts b/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
index 50cc1558e6..610afd52c4 100644
--- a/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
+++ b/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
@@ -19,3 +19,11 @@ export interface SavedViewsConfig {
   settings: Record<string, SavedViewsSetting<any>>,
   sorting: Record<string, string> // Object with property and label for sorting
 }
+
+
+export interface SavedViewCreate {
+  label: string;
+  visibility: string;
+  placement: string;
+  filter: Filter & Record<string, any>
+}

From 775db1ded94d824d9fad2ddf3ad0a1fd070729ce Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Tue, 10 Oct 2023 19:07:53 +0700
Subject: [PATCH 06/22] View creation

---
 .../saved-views/components/SavedViews.vue     |  2 +-
 .../components/forms/SavedViewForm.vue        | 28 +++++++++++++++++--
 .../saved-views/types/SavedViewsConfig.ts     |  6 ++--
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/frontend/src/shared/modules/saved-views/components/SavedViews.vue b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
index 8a90e544b2..0396430990 100644
--- a/frontend/src/shared/modules/saved-views/components/SavedViews.vue
+++ b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
@@ -51,7 +51,7 @@
       </el-popover>
     </div>
   </div>
-  <cr-saved-views-form v-model="isFormOpen" :config="props.config" :filters="props.filters" />
+  <cr-saved-views-form v-model="isFormOpen" :config="props.config" :filters="props.filters" :placement="props.placement" />
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue b/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
index ee77bbf96f..b8ae8c3814 100644
--- a/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
+++ b/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
@@ -148,6 +148,7 @@
         <el-button
           type="primary"
           class="btn btn--md btn--primary"
+          @click="submit()"
         >
           Add view
         </el-button>
@@ -167,11 +168,13 @@ import useVuelidate from '@vuelidate/core';
 import { SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 import { FilterConfig } from '@/shared/modules/filters/types/FilterConfig';
 import CrFilterItem from '@/shared/modules/filters/components/FilterItem.vue';
+import { SavedViewsService } from '@/shared/modules/saved-views/services/saved-views.service';
 
 const props = defineProps<{
   modelValue: boolean,
   config: SavedViewsConfig,
-  filters: Record<string, FilterConfig>
+  filters: Record<string, FilterConfig>,
+  placement: string,
 }>();
 
 const emit = defineEmits<{(e: 'update:modelValue', value: boolean): any}>();
@@ -204,7 +207,7 @@ interface SavedViewForm {
   settings: Record<string, any>;
   sorting: {
     prop: string;
-    order: string;
+    order: 'descending' | 'ascending';
   }
 }
 
@@ -262,6 +265,27 @@ const removeFilter = (key: any) => {
   delete form.filters[key];
   dropdownSearch.value = '';
 };
+
+const submit = (): void => {
+  if ($v.value.$invalid) {
+return;
+  }
+  SavedViewsService.create({
+    name: form.name,
+    config: {
+      search: '',
+      relation: 'and',
+      order: {
+        prop: form.sorting.prop,
+        order: form.sorting.order
+      },
+      settings: form.settings,
+      ...form.filters,
+    },
+    placement: [props.placement],
+    visibility: form.shared ? 'tenant' : 'user',
+  })
+};
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts b/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
index 610afd52c4..b094ff33a0 100644
--- a/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
+++ b/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
@@ -22,8 +22,8 @@ export interface SavedViewsConfig {
 
 
 export interface SavedViewCreate {
-  label: string;
+  name: string;
   visibility: string;
-  placement: string;
-  filter: Filter & Record<string, any>
+  placement: [string];
+  config: Filter & Record<string, any>
 }

From 46aa8736c3142f29045edcd3a741495677579ae4 Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Thu, 12 Oct 2023 14:17:22 +0700
Subject: [PATCH 07/22] Custom views edit/duplication

---
 .../config/saved-views/views/all-members.ts   |   6 +-
 .../components/SavedViewManagement.vue        |  51 ++++----
 .../saved-views/components/SavedViews.vue     |  51 ++++++--
 .../components/forms/SavedViewForm.vue        | 113 ++++++++++++++++--
 .../saved-views/types/SavedViewsConfig.ts     |   8 +-
 5 files changed, 173 insertions(+), 56 deletions(-)

diff --git a/frontend/src/modules/member/config/saved-views/views/all-members.ts b/frontend/src/modules/member/config/saved-views/views/all-members.ts
index 360981b023..5791556912 100644
--- a/frontend/src/modules/member/config/saved-views/views/all-members.ts
+++ b/frontend/src/modules/member/config/saved-views/views/all-members.ts
@@ -2,8 +2,10 @@ import { SavedView } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 
 const allMembers: SavedView = {
   id: 'all-members',
-  label: 'All members',
-  filter: {
+  name: 'All members',
+  placement: 'member',
+  visibility: 'tenant',
+  config: {
     search: '',
     relation: 'and',
     order: {
diff --git a/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue b/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue
index 3a0e028300..6c8b136f01 100644
--- a/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue
+++ b/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue
@@ -3,7 +3,7 @@
     <div class="py-2">
       <article class="py-2.5 px-3 flex justify-between">
         <p class="text-xs text-gray-900">
-          {{ props.config.defaultView.label }}
+          {{ props.config.defaultView.name }}
         </p>
         <p class="text-xs text-gray-400 italic">
           default view
@@ -12,32 +12,32 @@
     </div>
     <div class="border-b border-gray-100" />
     <div class="py-2">
-      <vue-draggable-next :list="list">
+      <vue-draggable-next :list="views">
         <article
-          v-for="view of props.views"
+          v-for="view of views"
           :key="view.id"
           class="p-2 rounded flex items-center justify-between flex-grow transition hover:bg-gray-50 cursor-grab"
         >
           <div class="flex items-center">
             <i class="ri-draggable text-base text-gray-400 mr-2" />
-            <span class="text-sm leading-5 text-black">{{ view.label }}</span>
+            <span class="text-sm leading-5 text-black">{{ view.name }}</span>
           </div>
           <div class="flex items-center">
             <div
               class="h-6 w-6 flex items-center justify-center ml-1 group cursor-pointer"
-              @click="edit(view.id)"
+              @click="edit(view)"
             >
               <i class="ri-pencil-line text-sm text-gray-400 group-hover:text-gray-600" />
             </div>
             <div
               class="h-6 w-6 flex items-center justify-center ml-1 group cursor-pointer"
-              @click="duplicate(view.id)"
+              @click="duplicate(view)"
             >
               <i class="ri-file-copy-line text-sm text-gray-400 group-hover:text-gray-600" />
             </div>
             <div
               class="h-6 w-6 flex items-center justify-center ml-1 group cursor-pointer"
-              @click="remove(view.id)"
+              @click="remove(view)"
             >
               <i class="ri-delete-bin-line text-sm text-gray-400 group-hover:text-gray-600" />
             </div>
@@ -51,36 +51,35 @@
 <script setup lang="ts">
 import { SavedView, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 import { VueDraggableNext } from 'vue-draggable-next';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 const props = defineProps<{
   config: SavedViewsConfig,
   views: SavedView[]
 }>();
 
-const list = ref([
-  {
-    id: 1,
-    label: 'New and active',
-  },
-  {
-    id: 2,
-    label: 'Slipping away',
+const emit = defineEmits<{(e: 'update:views', value: SavedView[]): any,
+  (e: 'edit', value: SavedView): any,
+  (e: 'duplicate', value: SavedView): any,
+}>();
+
+const views = computed<SavedView[]>({
+  get() {
+    return props.views;
   },
-  {
-    id: 3,
-    label: 'Most engaged',
+  set(value: SavedView[]) {
+    emit('update:views', value);
   },
-]);
+});
 
-const edit = (id: string) => {
-  console.log('edit', id);
+const edit = (view: SavedView) => {
+  emit('edit', view);
 };
-const remove = (id: string) => {
-  console.log('delete', id);
+const duplicate = (view: SavedView) => {
+  emit('duplicate', view);
 };
-const duplicate = (id: string) => {
-  console.log('duplicate', id);
+const remove = (view: SavedView) => {
+  console.log('delete', view);
 };
 </script>
 
diff --git a/frontend/src/shared/modules/saved-views/components/SavedViews.vue b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
index 0396430990..45b3db3151 100644
--- a/frontend/src/shared/modules/saved-views/components/SavedViews.vue
+++ b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
@@ -3,13 +3,13 @@
     <div class="tabs flex-grow " :class="{ 'is-shrink': hasChanged }">
       <el-tabs v-model="selectedTab" @tab-change="onTabChange($event)">
         <el-tab-pane
-          :label="props.config.defaultView.label"
+          :label="props.config.defaultView.name"
           name=""
         />
         <el-tab-pane
           v-for="view of views"
           :key="view.id"
-          :label="view.label"
+          :label="view.name"
           :name="view.id"
         />
       </el-tabs>
@@ -47,11 +47,24 @@
             <i class="ri-list-settings-line text-lg text-gray-400 h-5 flex items-center" />
           </el-button>
         </template>
-        <cr-saved-views-management :config="props.config" :views="views" />
+        <cr-saved-views-management
+          v-model:views="views"
+          :config="props.config"
+          @edit="edit($event)"
+          @duplicate="duplicate($event)"
+        />
       </el-popover>
     </div>
   </div>
-  <cr-saved-views-form v-model="isFormOpen" :config="props.config" :filters="props.filters" :placement="props.placement" />
+  <cr-saved-views-form
+    v-model="isFormOpen"
+    :config="props.config"
+    :filters="props.filters"
+    :placement="props.placement"
+    :view="editView"
+    @update:model-value="editView = null"
+    @reload="getViews()"
+  />
 </template>
 
 <script setup lang="ts">
@@ -60,7 +73,7 @@ import {
   onMounted, ref, watch,
 } from 'vue';
 import { Filter, FilterConfig } from '@/shared/modules/filters/types/FilterConfig';
-import { SavedView, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
+import { SavedView, SavedViewCreate, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 import { isEqual } from 'lodash';
 import CrSavedViewsForm from '@/shared/modules/saved-views/components/forms/SavedViewForm.vue';
 import ConfirmDialog from '@/shared/dialog/confirm-dialog';
@@ -113,15 +126,15 @@ const compareFilterToCurrentValues = (filter: Filter): boolean => {
 };
 
 const hasChanged = computed<boolean>(() => {
-  const viewFilter = currentView.value.filter;
+  const viewFilter = currentView.value.config;
   return !compareFilterToCurrentValues(viewFilter);
 });
 
 const onTabChange = (id: string) => {
-  const { filter } = getView(id);
-  if (filter) {
+  const { config } = getView(id);
+  if (config) {
     filters.value = {
-      ...filter,
+      ...config,
     };
   }
 };
@@ -129,7 +142,7 @@ const onTabChange = (id: string) => {
 // Reset to current view
 const reset = () => {
   filters.value = {
-    ...currentView.value.filter,
+    ...currentView.value.config,
   };
 };
 
@@ -150,11 +163,11 @@ const update = () => {
 
 // Change tab if filters match
 watch(() => props.modelValue, (filter: Filter) => {
-  if (compareFilterToCurrentValues(props.config.defaultView.filter)) {
+  if (compareFilterToCurrentValues(props.config.defaultView.config)) {
     selectedTab.value = '';
     return;
   }
-  const matchingView = views.value.find((view) => compareFilterToCurrentValues(view.filter));
+  const matchingView = views.value.find((view) => compareFilterToCurrentValues(view.config));
   if (matchingView) {
     selectedTab.value = matchingView.id;
   }
@@ -175,6 +188,20 @@ const getViews = () => {
     });
 };
 
+const editView = ref<SavedView | SavedViewCreate | null>(null);
+const edit = (view: SavedView) => {
+  editView.value = view;
+  isFormOpen.value = true;
+};
+const duplicate = (view: SavedView) => {
+  editView.value = {
+    ...view,
+    id: undefined,
+    name: `${view.name} (1)`,
+  };
+  isFormOpen.value = true;
+};
+
 onMounted(() => {
   getViews();
 });
diff --git a/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue b/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
index b8ae8c3814..3a1059f09f 100644
--- a/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
+++ b/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-drawer v-model="isDrawerOpen" title="New view" size="600px">
+  <app-drawer v-model="isDrawerOpen" :title="title" size="600px">
     <template #content>
       <div class="-mx-6 -mt-4">
         <!-- Share with workspace -->
@@ -14,7 +14,7 @@
               </p>
             </div>
             <div>
-              <el-switch />
+              <el-switch v-model="form.shared" :disabled="isEdit" />
             </div>
           </div>
         </section>
@@ -142,15 +142,18 @@
       <div style="flex: auto">
         <el-button
           class="btn btn--md btn--bordered mr-3"
+          @click="isDrawerOpen = false"
         >
           Cancel
         </el-button>
         <el-button
           type="primary"
           class="btn btn--md btn--primary"
+          :loading="sending"
+          :disabled="$v.$invalid"
           @click="submit()"
         >
-          Add view
+          {{ isEdit ? 'Update' : 'Add view' }}
         </el-button>
       </div>
     </template>
@@ -159,25 +162,42 @@
 
 <script setup lang="ts">
 import {
-  computed, reactive, ref,
+  computed, reactive, ref, watch,
 } from 'vue';
 import AppDrawer from '@/shared/drawer/drawer.vue';
 import AppFormItem from '@/shared/form/form-item.vue';
 import { required } from '@vuelidate/validators';
 import useVuelidate from '@vuelidate/core';
-import { SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
+import { SavedView, SavedViewCreate, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 import { FilterConfig } from '@/shared/modules/filters/types/FilterConfig';
 import CrFilterItem from '@/shared/modules/filters/components/FilterItem.vue';
 import { SavedViewsService } from '@/shared/modules/saved-views/services/saved-views.service';
+import Message from '@/shared/message/message';
 
 const props = defineProps<{
   modelValue: boolean,
   config: SavedViewsConfig,
   filters: Record<string, FilterConfig>,
   placement: string,
+  view: SavedView | SavedViewCreate | null,
 }>();
 
-const emit = defineEmits<{(e: 'update:modelValue', value: boolean): any}>();
+const emit = defineEmits<{(e: 'update:modelValue', value: boolean): any,
+  (e: 'reload'): any
+}>();
+
+const isEdit = computed(() => props.view && (props.view as SavedView).id);
+const isDuplicate = computed(() => props.view && !(props.view as SavedView).id);
+
+const title = computed<string>(() => {
+  if (isEdit.value) {
+    return 'Edit view';
+  }
+  if (isDuplicate.value) {
+    return 'Duplicate view';
+  }
+  return 'New view';
+});
 
 const isDrawerOpen = computed<boolean>({
   get() {
@@ -203,6 +223,7 @@ const settingsDefaultValue = computed<Record<string, any>>(() => {
 interface SavedViewForm {
   shared: boolean;
   name: string;
+  relation: 'and' | 'or';
   filters: Record<string, any>;
   settings: Record<string, any>;
   sorting: {
@@ -214,11 +235,12 @@ interface SavedViewForm {
 const form = reactive<SavedViewForm>({
   shared: false,
   name: '',
+  relation: 'and',
   filters: {},
   settings: { ...settingsDefaultValue.value },
   sorting: {
-    prop: props.config.defaultView.filter.order.prop,
-    order: props.config.defaultView.filter.order.order,
+    prop: props.config.defaultView.config.order.prop,
+    order: props.config.defaultView.config.order.order,
   },
 });
 
@@ -266,25 +288,90 @@ const removeFilter = (key: any) => {
   dropdownSearch.value = '';
 };
 
+const fillForm = () => {
+  if (props.view) {
+    form.shared = props.view.visibility === 'tenant';
+    form.name = props.view.name;
+    const {
+      relation, order, settings, search, ...restFilters
+    } = props.view.config;
+    form.relation = relation;
+    form.sorting.prop = order.prop;
+    form.sorting.order = order.order;
+    form.filters = restFilters;
+    filterList.value = Object.keys(restFilters);
+    console.log(restFilters);
+  }
+};
+
+const reset = () => {
+  form.shared = false;
+  form.name = '';
+  form.relation = 'and';
+  form.filters = {};
+  form.settings = { ...settingsDefaultValue.value };
+  form.sorting = {
+    prop: props.config.defaultView.config.order.prop,
+    order: props.config.defaultView.config.order.order,
+  };
+  $v.value.$reset();
+};
+
+watch(() => props.view, () => {
+  reset();
+  if (props.view) {
+    fillForm();
+  }
+}, {deep: true, immediate: true});
+
+// Form submission
+const sending = ref<boolean>(false);
+
 const submit = (): void => {
   if ($v.value.$invalid) {
-return;
+    return;
   }
-  SavedViewsService.create({
+  sending.value = true;
+  const data: SavedViewCreate = {
     name: form.name,
     config: {
       search: '',
       relation: 'and',
       order: {
         prop: form.sorting.prop,
-        order: form.sorting.order
+        order: form.sorting.order,
       },
       settings: form.settings,
       ...form.filters,
     },
-    placement: [props.placement],
+    placement: props.placement,
     visibility: form.shared ? 'tenant' : 'user',
-  })
+  };
+  (isEdit.value ? SavedViewsService.update((props.view as SavedView).id, data) : SavedViewsService.create(data))
+    .then(() => {
+      isDrawerOpen.value = false;
+      reset();
+      if (isEdit.value) {
+        Message.success('View updated successfully!');
+      } else if (isDuplicate.value) {
+        Message.success('View duplicated successfully!');
+      } else {
+        Message.success('View successfully created!');
+      }
+      emit('reload');
+    })
+    .catch(() => {
+      if (isEdit.value) {
+        Message.error('There was an error updating a view');
+      } else if (isDuplicate.value) {
+        Message.error('There was an error duplicating a view');
+      } else {
+        Message.error('There was an error creating a view');
+      }
+    })
+    .finally(() => {
+      sending.value = false;
+    });
 };
 </script>
 
diff --git a/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts b/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
index b094ff33a0..11b5b6a851 100644
--- a/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
+++ b/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
@@ -2,8 +2,10 @@ import { Filter } from '@/shared/modules/filters/types/FilterConfig';
 
 export interface SavedView {
   id: string;
-  label: string;
-  filter: Filter & Record<string, any>
+  name: string;
+  visibility: string;
+  placement: string;
+  config: Filter & Record<string, any>
 }
 
 export interface SavedViewsSetting<T> {
@@ -24,6 +26,6 @@ export interface SavedViewsConfig {
 export interface SavedViewCreate {
   name: string;
   visibility: string;
-  placement: [string];
+  placement: string;
   config: Filter & Record<string, any>
 }

From 0536bde789f9b794bb2230558228f16c9d653279 Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Fri, 13 Oct 2023 21:31:51 +0700
Subject: [PATCH 08/22] Deletion, editing & order management

---
 .../components/dashboard-members.vue          |  2 +-
 .../modules/member/config/saved-views/main.ts |  4 +-
 .../views/{all-members.ts => all-contacts.ts} |  4 +-
 .../config/saved-views/views/team-members.ts  |  0
 .../src/modules/member/store/pinia/state.ts   |  4 +-
 .../components/SavedViewManagement.vue        | 44 ++++++++++-
 .../saved-views/components/SavedViews.vue     | 16 ++--
 .../components/forms/SavedViewForm.vue        | 79 ++++++++++++-------
 .../services/saved-views.service.ts           | 19 ++++-
 .../saved-views/types/SavedViewsConfig.ts     |  3 +-
 10 files changed, 130 insertions(+), 45 deletions(-)
 rename frontend/src/modules/member/config/saved-views/views/{all-members.ts => all-contacts.ts} (87%)
 delete mode 100644 frontend/src/modules/member/config/saved-views/views/team-members.ts

diff --git a/frontend/src/modules/dashboard/components/dashboard-members.vue b/frontend/src/modules/dashboard/components/dashboard-members.vue
index a16525496f..2b06a527c2 100644
--- a/frontend/src/modules/dashboard/components/dashboard-members.vue
+++ b/frontend/src/modules/dashboard/components/dashboard-members.vue
@@ -221,7 +221,7 @@ import { DAILY_GRANULARITY_FILTER } from '@/modules/widget/widget-constants';
 import AppDashboardMemberItem from '@/modules/dashboard/components/member/dashboard-member-item.vue';
 import AppDashboardCount from '@/modules/dashboard/components/dashboard-count.vue';
 import { filterQueryService } from '@/shared/modules/filters/services/filter-query.service';
-import allMembers from '@/modules/member/config/saved-views/views/all-members';
+import allContacts from '@/modules/member/config/saved-views/views/all-contacts';
 
 export default {
   name: 'AppDashboardMember',
diff --git a/frontend/src/modules/member/config/saved-views/main.ts b/frontend/src/modules/member/config/saved-views/main.ts
index 869487e748..f1ad3d19c1 100644
--- a/frontend/src/modules/member/config/saved-views/main.ts
+++ b/frontend/src/modules/member/config/saved-views/main.ts
@@ -1,12 +1,12 @@
 import { SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
-import allMembers from './views/all-members';
+import allContacts from './views/all-contacts';
 
 import bot from './settings/bot/config';
 import teamMember from './settings/teamMember/config';
 import organization from './settings/organization/config';
 
 export const memberSavedViews: SavedViewsConfig = {
-  defaultView: allMembers,
+  defaultView: allContacts,
   settings: {
     teamMember,
     bot,
diff --git a/frontend/src/modules/member/config/saved-views/views/all-members.ts b/frontend/src/modules/member/config/saved-views/views/all-contacts.ts
similarity index 87%
rename from frontend/src/modules/member/config/saved-views/views/all-members.ts
rename to frontend/src/modules/member/config/saved-views/views/all-contacts.ts
index ed53838edf..3708e865ff 100644
--- a/frontend/src/modules/member/config/saved-views/views/all-members.ts
+++ b/frontend/src/modules/member/config/saved-views/views/all-contacts.ts
@@ -1,6 +1,6 @@
 import { SavedView } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 
-const allMembers: SavedView = {
+const allContacts: SavedView = {
   id: 'all-contacts',
   name: 'All contacts',
   placement: 'member',
@@ -20,4 +20,4 @@ const allMembers: SavedView = {
   },
 };
 
-export default allMembers;
+export default allContacts;
diff --git a/frontend/src/modules/member/config/saved-views/views/team-members.ts b/frontend/src/modules/member/config/saved-views/views/team-members.ts
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/frontend/src/modules/member/store/pinia/state.ts b/frontend/src/modules/member/store/pinia/state.ts
index c626aa064f..d7c1ad2089 100644
--- a/frontend/src/modules/member/store/pinia/state.ts
+++ b/frontend/src/modules/member/store/pinia/state.ts
@@ -1,6 +1,6 @@
 import { Filter, FilterConfig } from '@/shared/modules/filters/types/FilterConfig';
 import { Member } from '@/modules/member/types/Member';
-import allMembers from '@/modules/member/config/saved-views/views/all-members';
+import allContacts from '@/modules/member/config/saved-views/views/all-contacts';
 import { FilterCustomAttribute } from '@/shared/modules/filters/types/FilterCustomAttribute';
 
 export interface MemberState {
@@ -15,7 +15,7 @@ export interface MemberState {
 
 const state: MemberState = {
   filters: {
-    ...allMembers.filter,
+    ...allContacts.filter,
   },
   savedFilterBody: {},
   customAttributes: [],
diff --git a/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue b/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue
index 6c8b136f01..fb0ac1d897 100644
--- a/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue
+++ b/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue
@@ -12,7 +12,7 @@
     </div>
     <div class="border-b border-gray-100" />
     <div class="py-2">
-      <vue-draggable-next :list="views">
+      <vue-draggable-next :list="views" @change="onListChange">
         <article
           v-for="view of views"
           :key="view.id"
@@ -49,9 +49,12 @@
 </template>
 
 <script setup lang="ts">
-import { SavedView, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
+import { SavedView, SavedViewCreate, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 import { VueDraggableNext } from 'vue-draggable-next';
 import { computed, ref } from 'vue';
+import ConfirmDialog from '@/shared/dialog/confirm-dialog';
+import { SavedViewsService } from '@/shared/modules/saved-views/services/saved-views.service';
+import Message from '@/shared/message/message';
 
 const props = defineProps<{
   config: SavedViewsConfig,
@@ -61,6 +64,7 @@ const props = defineProps<{
 const emit = defineEmits<{(e: 'update:views', value: SavedView[]): any,
   (e: 'edit', value: SavedView): any,
   (e: 'duplicate', value: SavedView): any,
+  (e: 'reload'): any,
 }>();
 
 const views = computed<SavedView[]>({
@@ -72,6 +76,20 @@ const views = computed<SavedView[]>({
   },
 });
 
+const onListChange = () => {
+  SavedViewsService.updateBulk(
+    views.value.map(
+      (view, viewIndex) => ({
+        id: view.id,
+        name: view.name,
+        order: viewIndex + 1,
+      }),
+    ),
+  ).then(() => {
+    emit('reload');
+  })
+};
+
 const edit = (view: SavedView) => {
   emit('edit', view);
 };
@@ -79,7 +97,27 @@ const duplicate = (view: SavedView) => {
   emit('duplicate', view);
 };
 const remove = (view: SavedView) => {
-  console.log('delete', view);
+  const isShared = view.visibility === 'tenant';
+  ConfirmDialog({
+    type: 'danger',
+    title: isShared ? 'Delete shared view' : 'Delete view',
+    message: isShared
+      ? 'This view will be deleted on all user accounts from this workspace. Are you sure you want to proceed? You can’t undo this action.'
+      : 'Are you sure you want to proceed? You can’t undo this action.',
+    icon: 'ri-delete-bin-line',
+    cancelButtonText: 'Cancel',
+    confirmButtonText: isShared ? 'Delete shared view' : 'Delete view',
+  } as any)
+    .then(() => {
+      SavedViewsService.delete(view.id)
+        .then(() => {
+          emit('reload');
+          Message.success('View successfully deleted');
+        })
+        .catch(() => {
+          Message.error('There was an error deleting view');
+        });
+    });
 };
 </script>
 
diff --git a/frontend/src/shared/modules/saved-views/components/SavedViews.vue b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
index 45b3db3151..94ae889eee 100644
--- a/frontend/src/shared/modules/saved-views/components/SavedViews.vue
+++ b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="flex items-end justify-between mb-6 h-8">
     <div class="tabs flex-grow " :class="{ 'is-shrink': hasChanged }">
-      <el-tabs v-model="selectedTab" @tab-change="onTabChange($event)">
+      <el-tabs v-if="views.length > 0" v-model="selectedTab" @tab-change="onTabChange($event)">
         <el-tab-pane
           :label="props.config.defaultView.name"
           name=""
         />
         <el-tab-pane
           v-for="view of views"
-          :key="view.id"
+          :key="view.name"
           :label="view.name"
           :name="view.id"
         />
@@ -52,6 +52,7 @@
           :config="props.config"
           @edit="edit($event)"
           @duplicate="duplicate($event)"
+          @reload="getViews()"
         />
       </el-popover>
     </div>
@@ -69,7 +70,7 @@
 
 <script setup lang="ts">
 import {
-  computed,
+  computed, getCurrentInstance,
   onMounted, ref, watch,
 } from 'vue';
 import { Filter, FilterConfig } from '@/shared/modules/filters/types/FilterConfig';
@@ -178,10 +179,15 @@ const views = ref<SavedView[]>([]);
 
 const getViews = () => {
   SavedViewsService.query({
-    placement: props.placement,
+    filter: {
+      placement: [props.placement],
+    },
   })
     .then((res: SavedView[]) => {
-      views.value = res;
+      views.value = [];
+      setTimeout(() => {
+        views.value = [...res];
+      }, 0);
     })
     .catch(() => {
       views.value = [];
diff --git a/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue b/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
index 3a1059f09f..1595b61a71 100644
--- a/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
+++ b/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
@@ -173,6 +173,7 @@ import { FilterConfig } from '@/shared/modules/filters/types/FilterConfig';
 import CrFilterItem from '@/shared/modules/filters/components/FilterItem.vue';
 import { SavedViewsService } from '@/shared/modules/saved-views/services/saved-views.service';
 import Message from '@/shared/message/message';
+import ConfirmDialog from '@/shared/dialog/confirm-dialog';
 
 const props = defineProps<{
   modelValue: boolean,
@@ -298,7 +299,8 @@ const fillForm = () => {
     form.relation = relation;
     form.sorting.prop = order.prop;
     form.sorting.order = order.order;
-    form.filters = restFilters;
+    form.filters = restFilters || {};
+    form.settings = settings || {};
     filterList.value = Object.keys(restFilters);
     console.log(restFilters);
   }
@@ -322,7 +324,7 @@ watch(() => props.view, () => {
   if (props.view) {
     fillForm();
   }
-}, {deep: true, immediate: true});
+}, { deep: true, immediate: true });
 
 // Form submission
 const sending = ref<boolean>(false);
@@ -347,31 +349,54 @@ const submit = (): void => {
     placement: props.placement,
     visibility: form.shared ? 'tenant' : 'user',
   };
-  (isEdit.value ? SavedViewsService.update((props.view as SavedView).id, data) : SavedViewsService.create(data))
-    .then(() => {
-      isDrawerOpen.value = false;
-      reset();
-      if (isEdit.value) {
-        Message.success('View updated successfully!');
-      } else if (isDuplicate.value) {
-        Message.success('View duplicated successfully!');
-      } else {
-        Message.success('View successfully created!');
-      }
-      emit('reload');
-    })
-    .catch(() => {
-      if (isEdit.value) {
-        Message.error('There was an error updating a view');
-      } else if (isDuplicate.value) {
-        Message.error('There was an error duplicating a view');
-      } else {
-        Message.error('There was an error creating a view');
-      }
-    })
-    .finally(() => {
-      sending.value = false;
-    });
+  if (isEdit.value) {
+    (form.shared ? ConfirmDialog({
+      type: 'danger',
+      title: 'Update shared view',
+      message:
+          'This view is shared with all workspace users, any changes will reflected in each user account.',
+      icon: 'ri-loop-left-line',
+      cancelButtonText: 'Cancel',
+      confirmButtonText: 'Update shared view',
+    } as any) : Promise.resolve())
+      .then(() => {
+        SavedViewsService.update((props.view as SavedView).id, data)
+          .then(() => {
+            isDrawerOpen.value = false;
+            reset();
+            Message.success('View updated successfully!');
+            emit('reload');
+          })
+          .catch(() => {
+            Message.error('There was an error updating a view');
+          })
+          .finally(() => {
+            sending.value = false;
+          });
+      });
+  } else {
+    SavedViewsService.create(data)
+      .then(() => {
+        isDrawerOpen.value = false;
+        reset();
+        if (isDuplicate.value) {
+          Message.success('View duplicated successfully!');
+        } else {
+          Message.success('View successfully created!');
+        }
+        emit('reload');
+      })
+      .catch(() => {
+        if (isDuplicate.value) {
+          Message.error('There was an error duplicating a view');
+        } else {
+          Message.error('There was an error creating a view');
+        }
+      })
+      .finally(() => {
+        sending.value = false;
+      });
+  }
 };
 </script>
 
diff --git a/frontend/src/shared/modules/saved-views/services/saved-views.service.ts b/frontend/src/shared/modules/saved-views/services/saved-views.service.ts
index 63bd997ab5..c0f89dc396 100644
--- a/frontend/src/shared/modules/saved-views/services/saved-views.service.ts
+++ b/frontend/src/shared/modules/saved-views/services/saved-views.service.ts
@@ -25,7 +25,7 @@ export class SavedViewsService {
       .then((res) => res.data);
   }
 
-  static update(id: string, view: SavedViewCreate) {
+  static update(id: string, view: Partial<SavedViewCreate>) {
     const tenantId = AuthCurrentTenant.get();
 
     return authAxios.put(
@@ -35,11 +35,26 @@ export class SavedViewsService {
       .then((res) => res.data);
   }
 
+  static updateBulk(views: Partial<SavedViewCreate>[]) {
+    const tenantId = AuthCurrentTenant.get();
+
+    return authAxios.patch(
+      `/tenant/${tenantId}/customview`,
+      views,
+    )
+      .then((res) => res.data);
+  }
+
   static delete(id: string) {
     const tenantId = AuthCurrentTenant.get();
 
     return authAxios.delete(
-      `/tenant/${tenantId}/customview/${id}`,
+      `/tenant/${tenantId}/customview`,
+      {
+        params: {
+          ids: [id],
+        },
+      },
     )
       .then((res) => res.data);
   }
diff --git a/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts b/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
index 11b5b6a851..6040a7c374 100644
--- a/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
+++ b/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
@@ -6,6 +6,7 @@ export interface SavedView {
   visibility: string;
   placement: string;
   config: Filter & Record<string, any>
+  order?: number;
 }
 
 export interface SavedViewsSetting<T> {
@@ -22,10 +23,10 @@ export interface SavedViewsConfig {
   sorting: Record<string, string> // Object with property and label for sorting
 }
 
-
 export interface SavedViewCreate {
   name: string;
   visibility: string;
   placement: string;
   config: Filter & Record<string, any>
+  order: number;
 }

From 0bf69ee383bc0019470b755defbd53a9fc7d8bda Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Tue, 17 Oct 2023 11:23:50 +0700
Subject: [PATCH 09/22] Custom view finish flows

---
 frontend/components.d.ts                      |   5 -
 .../components/dashboard-members.vue          |   8 +-
 .../components/dashboard-organizations.vue    |   6 +-
 .../modules/member/config/saved-views/main.ts |  15 ++-
 .../config/saved-views/views/influential.ts   |  27 ++++
 .../config/saved-views/views/most-engaged.ts  |  27 ++++
 .../saved-views/views/new-and-active.ts       |  34 +++++
 .../config/saved-views/views/slipping-away.ts |  34 +++++
 .../config/saved-views/views/team-members.ts  |  23 ++++
 .../modules/member/pages/member-list-page.vue |   3 +-
 .../organization/config/saved-views/main.ts   |   9 +-
 .../saved-views/settings/teamOrganization.ts  |  15 ---
 .../OrganizationTeamOrganizationSetting.vue   |  54 ++++++++
 .../settings/teamOrganization/config.ts       |  18 +++
 .../saved-views/views/all-organizations.ts    |   6 +-
 .../config/saved-views/views/most-members.ts  |   6 +-
 .../saved-views/views/new-and-active.ts       |   6 +-
 .../saved-views/views/team-organizations.ts   |   6 +-
 .../pages/organization-list-page.vue          |   4 +-
 .../components/SavedViewManagement.vue        |   6 +-
 .../saved-views/components/SavedViews.vue     | 117 ++++++++++++++----
 .../components/forms/SavedViewForm.vue        |  41 ++++--
 .../saved-views/types/SavedViewsConfig.ts     |   2 +-
 frontend/src/utils/featureFlag/index.js       |   1 +
 24 files changed, 399 insertions(+), 74 deletions(-)
 create mode 100644 frontend/src/modules/member/config/saved-views/views/influential.ts
 create mode 100644 frontend/src/modules/member/config/saved-views/views/most-engaged.ts
 create mode 100644 frontend/src/modules/member/config/saved-views/views/new-and-active.ts
 create mode 100644 frontend/src/modules/member/config/saved-views/views/slipping-away.ts
 create mode 100644 frontend/src/modules/member/config/saved-views/views/team-members.ts
 delete mode 100644 frontend/src/modules/organization/config/saved-views/settings/teamOrganization.ts
 create mode 100644 frontend/src/modules/organization/config/saved-views/settings/teamOrganization/OrganizationTeamOrganizationSetting.vue
 create mode 100644 frontend/src/modules/organization/config/saved-views/settings/teamOrganization/config.ts

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index dfee9053dd..94eb75bf47 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -14,10 +14,7 @@ declare module '@vue/runtime-core' {
     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']
     ElContainer: typeof import('element-plus/es')['ElContainer']
@@ -49,12 +46,10 @@ declare module '@vue/runtime-core' {
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
-    ElTextarea: typeof import('element-plus/es')['ElTextarea']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTimeSelect: typeof import('element-plus/es')['ElTimeSelect']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElUpload: typeof import('element-plus/es')['ElUpload']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/frontend/src/modules/dashboard/components/dashboard-members.vue b/frontend/src/modules/dashboard/components/dashboard-members.vue
index 2b06a527c2..4d975e4147 100644
--- a/frontend/src/modules/dashboard/components/dashboard-members.vue
+++ b/frontend/src/modules/dashboard/components/dashboard-members.vue
@@ -7,7 +7,7 @@
       :total="members.total"
       :route="{
         name: 'member',
-        query: filterQueryService().setQuery(allMembers.filter),
+        query: filterQueryService().setQuery(allContacts.config),
       }"
       button-title="All contacts"
       report-name="Members report"
@@ -96,7 +96,7 @@
                 :to="{
                   name: 'member',
                   query: filterQueryService().setQuery({
-                    ...allMembers.filter,
+                    ...allContacts.config,
                     joinedDate: {
                       value: periodRange,
                       operator: 'between',
@@ -184,7 +184,7 @@
                 :to="{
                   name: 'member',
                   query: filterQueryService().setQuery({
-                    ...allMembers.filter,
+                    ...allContacts.config,
                     lastActivityDate: {
                       value: periodRange,
                       operator: 'between',
@@ -240,7 +240,7 @@ export default {
       activeMembersCount,
       formatDateToTimeAgo,
       filterQueryService,
-      allMembers,
+      allContacts,
     };
   },
   computed: {
diff --git a/frontend/src/modules/dashboard/components/dashboard-organizations.vue b/frontend/src/modules/dashboard/components/dashboard-organizations.vue
index 2394325575..89914602a4 100644
--- a/frontend/src/modules/dashboard/components/dashboard-organizations.vue
+++ b/frontend/src/modules/dashboard/components/dashboard-organizations.vue
@@ -7,7 +7,7 @@
       :total="organizations.total"
       :route="{
         name: 'organization',
-        query: filterQueryService().setQuery(allOrganizations.filter),
+        query: filterQueryService().setQuery(allOrganizations.config),
       }"
       button-title="All organizations"
       report-name="Organizations report"
@@ -79,7 +79,7 @@
                 :to="{
                   name: 'organization',
                   query: filterQueryService().setQuery({
-                    ...allOrganizations.filter,
+                    ...allOrganizations.config,
                     joinedDate: {
                       value: periodRange,
                       operator: 'between',
@@ -159,7 +159,7 @@
                 :to="{
                   name: 'organization',
                   query: filterQueryService().setQuery({
-                    ...allOrganizations.filter,
+                    ...allOrganizations.config,
                     lastActivityDate: {
                       value: periodRange,
                       operator: 'between',
diff --git a/frontend/src/modules/member/config/saved-views/main.ts b/frontend/src/modules/member/config/saved-views/main.ts
index f1ad3d19c1..169be4d7ec 100644
--- a/frontend/src/modules/member/config/saved-views/main.ts
+++ b/frontend/src/modules/member/config/saved-views/main.ts
@@ -1,5 +1,10 @@
-import { SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
+import { SavedView, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 import allContacts from './views/all-contacts';
+import newAndActive from './views/new-and-active';
+import slippingAway from './views/slipping-away';
+import mostEngaged from './views/most-engaged';
+import influential from './views/influential';
+import teamMembers from './views/team-members';
 
 import bot from './settings/bot/config';
 import teamMember from './settings/teamMember/config';
@@ -21,3 +26,11 @@ export const memberSavedViews: SavedViewsConfig = {
     numberOfOpenSourceContributions: '# of OSS contributions',
   },
 };
+
+export const memberViews: SavedView[] = [
+  newAndActive,
+  slippingAway,
+  mostEngaged,
+  influential,
+  teamMembers,
+];
diff --git a/frontend/src/modules/member/config/saved-views/views/influential.ts b/frontend/src/modules/member/config/saved-views/views/influential.ts
new file mode 100644
index 0000000000..35cc05e782
--- /dev/null
+++ b/frontend/src/modules/member/config/saved-views/views/influential.ts
@@ -0,0 +1,27 @@
+import { SavedView } from '@/shared/modules/saved-views/types/SavedViewsConfig';
+
+const influential: SavedView = {
+  id: 'influential',
+  name: 'Influential',
+  placement: 'member',
+  visibility: 'tenant',
+  config: {
+    search: '',
+    relation: 'and',
+    order: {
+      prop: 'lastActive',
+      order: 'descending',
+    },
+    settings: {
+      bot: 'exclude',
+      teamMember: 'exclude',
+      organization: 'exclude',
+    },
+    reach: {
+      operator: 'gte',
+      value: 500,
+    },
+  },
+};
+
+export default influential;
diff --git a/frontend/src/modules/member/config/saved-views/views/most-engaged.ts b/frontend/src/modules/member/config/saved-views/views/most-engaged.ts
new file mode 100644
index 0000000000..c321b84299
--- /dev/null
+++ b/frontend/src/modules/member/config/saved-views/views/most-engaged.ts
@@ -0,0 +1,27 @@
+import { SavedView } from '@/shared/modules/saved-views/types/SavedViewsConfig';
+
+const mostEngaged: SavedView = {
+  id: 'most-engaged',
+  name: 'Most engaged',
+  placement: 'member',
+  visibility: 'tenant',
+  config: {
+    search: '',
+    relation: 'and',
+    order: {
+      prop: 'lastActive',
+      order: 'descending',
+    },
+    settings: {
+      bot: 'exclude',
+      teamMember: 'exclude',
+      organization: 'exclude',
+    },
+    engagementLevel: {
+      value: ['fan', 'ultra'],
+      include: true,
+    },
+  },
+};
+
+export default mostEngaged;
diff --git a/frontend/src/modules/member/config/saved-views/views/new-and-active.ts b/frontend/src/modules/member/config/saved-views/views/new-and-active.ts
new file mode 100644
index 0000000000..f19029cfa6
--- /dev/null
+++ b/frontend/src/modules/member/config/saved-views/views/new-and-active.ts
@@ -0,0 +1,34 @@
+import { SavedView } from '@/shared/modules/saved-views/types/SavedViewsConfig';
+import moment from 'moment';
+
+const newAndActive: SavedView = {
+  id: 'new-and-active',
+  name: 'New and active',
+  placement: 'member',
+  visibility: 'tenant',
+  config: {
+    search: '',
+    relation: 'and',
+    order: {
+      prop: 'lastActive',
+      order: 'descending',
+    },
+    settings: {
+      bot: 'exclude',
+      teamMember: 'exclude',
+      organization: 'exclude',
+    },
+
+    joinedDate: {
+      operator: 'gt',
+      value: moment().subtract(1, 'month').format('YYYY-MM-DD'),
+    },
+
+    lastActivityDate: {
+      operator: 'gt',
+      value: moment().subtract(1, 'month').format('YYYY-MM-DD'),
+    },
+  },
+};
+
+export default newAndActive;
diff --git a/frontend/src/modules/member/config/saved-views/views/slipping-away.ts b/frontend/src/modules/member/config/saved-views/views/slipping-away.ts
new file mode 100644
index 0000000000..b077f773f2
--- /dev/null
+++ b/frontend/src/modules/member/config/saved-views/views/slipping-away.ts
@@ -0,0 +1,34 @@
+import { SavedView } from '@/shared/modules/saved-views/types/SavedViewsConfig';
+import moment from 'moment';
+
+const slippingAway: SavedView = {
+  id: 'slipping-away',
+  name: 'Slipping away',
+  placement: 'member',
+  visibility: 'tenant',
+  config: {
+    search: '',
+    relation: 'and',
+    order: {
+      prop: 'lastActive',
+      order: 'descending',
+    },
+    settings: {
+      bot: 'exclude',
+      teamMember: 'exclude',
+      organization: 'exclude',
+    },
+
+    engagementLevel: {
+      value: ['fan', 'ultra'],
+      include: true,
+    },
+
+    lastActivityDate: {
+      operator: 'lt',
+      value: moment().subtract(1, 'month').format('YYYY-MM-DD'),
+    },
+  },
+};
+
+export default slippingAway;
diff --git a/frontend/src/modules/member/config/saved-views/views/team-members.ts b/frontend/src/modules/member/config/saved-views/views/team-members.ts
new file mode 100644
index 0000000000..a9df923f15
--- /dev/null
+++ b/frontend/src/modules/member/config/saved-views/views/team-members.ts
@@ -0,0 +1,23 @@
+import { SavedView } from '@/shared/modules/saved-views/types/SavedViewsConfig';
+
+const teamMembers: SavedView = {
+  id: 'team-contacts',
+  name: 'Team contacts',
+  placement: 'member',
+  visibility: 'tenant',
+  config: {
+    search: '',
+    relation: 'and',
+    order: {
+      prop: 'lastActive',
+      order: 'descending',
+    },
+    settings: {
+      bot: 'exclude',
+      teamMember: 'filter',
+      organization: 'exclude',
+    },
+  },
+};
+
+export default teamMembers;
diff --git a/frontend/src/modules/member/pages/member-list-page.vue b/frontend/src/modules/member/pages/member-list-page.vue
index 0d636eac28..4f1603c911 100644
--- a/frontend/src/modules/member/pages/member-list-page.vue
+++ b/frontend/src/modules/member/pages/member-list-page.vue
@@ -55,6 +55,7 @@
         v-model="filters"
         :config="memberSavedViews"
         :filters="memberFilters"
+        :static-views="memberViews"
         placement="member"
         @update:model-value="memberFilter.alignFilterList($event)"
       />
@@ -94,7 +95,7 @@ import { FilterQuery } from '@/shared/modules/filters/types/FilterQuery';
 import CrSavedViews from '@/shared/modules/saved-views/components/SavedViews.vue';
 import AppMemberListTable from '@/modules/member/components/list/member-list-table.vue';
 import { memberFilters, memberSearchFilter } from '../config/filters/main';
-import { memberSavedViews } from '../config/saved-views/main';
+import { memberSavedViews, memberViews } from '../config/saved-views/main';
 
 const memberStore = useMemberStore();
 const { getMemberCustomAttributes, fetchMembers } = memberStore;
diff --git a/frontend/src/modules/organization/config/saved-views/main.ts b/frontend/src/modules/organization/config/saved-views/main.ts
index e7ad4086a0..ac71d30562 100644
--- a/frontend/src/modules/organization/config/saved-views/main.ts
+++ b/frontend/src/modules/organization/config/saved-views/main.ts
@@ -4,13 +4,20 @@ import newAndActive from './views/new-and-active';
 import mostMembers from './views/most-members';
 import teamOrganizations from './views/team-organizations';
 
-import teamOrganization from './settings/teamOrganization';
+import teamOrganization from './settings/teamOrganization/config';
 
 export const organizationSavedViews: SavedViewsConfig = {
   defaultView: allOrganizations,
   settings: {
     teamOrganization,
   },
+  sorting: {
+    displayName: 'Organization',
+    memberCount: '# contacts',
+    activityCount: '# activities',
+    joinedAt: 'Joined date',
+    founded: 'Founded',
+  },
 };
 
 // Hardcoded views until we have backend done for it
diff --git a/frontend/src/modules/organization/config/saved-views/settings/teamOrganization.ts b/frontend/src/modules/organization/config/saved-views/settings/teamOrganization.ts
deleted file mode 100644
index e83114c04a..0000000000
--- a/frontend/src/modules/organization/config/saved-views/settings/teamOrganization.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { SavedViewsSetting } from '@/shared/modules/saved-views/types/SavedViewsConfig';
-import { includeFilterRenderer } from '@/modules/organization/config/saved-views/settings/common/includeFilterRenderer';
-import { IncludeEnum } from '@/modules/organization/config/saved-views/settings/types/IncludeEnum';
-
-const teamOrganization: SavedViewsSetting<IncludeEnum> = {
-  defaultValue: IncludeEnum.EXCLUDE,
-  queryUrlParser(value: string): IncludeEnum {
-    return value as IncludeEnum;
-  },
-  apiFilterRenderer(value: IncludeEnum): any[] {
-    return includeFilterRenderer('isTeamOrganization', value);
-  },
-};
-
-export default teamOrganization;
diff --git a/frontend/src/modules/organization/config/saved-views/settings/teamOrganization/OrganizationTeamOrganizationSetting.vue b/frontend/src/modules/organization/config/saved-views/settings/teamOrganization/OrganizationTeamOrganizationSetting.vue
new file mode 100644
index 0000000000..7531885f64
--- /dev/null
+++ b/frontend/src/modules/organization/config/saved-views/settings/teamOrganization/OrganizationTeamOrganizationSetting.vue
@@ -0,0 +1,54 @@
+<template>
+  <article>
+    <p class="text-xs font-semibold leading-5 mb-3">
+      Team organizations visibility
+    </p>
+    <el-radio-group v-model="value">
+      <el-radio :label="IncludeEnum.EXCLUDE" class="!h-5">
+        <span class="text-xs">Exclude team organizations</span>
+      </el-radio>
+      <el-radio :label="IncludeEnum.INCLUDE" class="!h-5">
+        <span class="text-xs">Include team organizations</span>
+      </el-radio>
+      <el-radio :label="IncludeEnum.FILTER" class="!h-5">
+        <span class="text-xs">Team organizations only</span>
+      </el-radio>
+    </el-radio-group>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { IncludeEnum } from '@/modules/member/config/saved-views/settings/common/types/IncludeEnum';
+
+const props = defineProps<{
+  modelValue: IncludeEnum,
+}>();
+
+const emit = defineEmits<{(e: 'update:modelValue', value: IncludeEnum): any }>();
+
+const value = computed<IncludeEnum>({
+  get() {
+    return props.modelValue;
+  },
+  set(val: IncludeEnum) {
+    emit('update:modelValue', val);
+  },
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'CrMemberTeamMemberSetting',
+};
+</script>
+
+<style lang="scss" scoped>
+.tabs {
+  width: calc(100% - 72px);
+
+  &.is-shrink{
+    width: calc(100% - 262px);
+  }
+}
+</style>
diff --git a/frontend/src/modules/organization/config/saved-views/settings/teamOrganization/config.ts b/frontend/src/modules/organization/config/saved-views/settings/teamOrganization/config.ts
new file mode 100644
index 0000000000..19ddbf4f69
--- /dev/null
+++ b/frontend/src/modules/organization/config/saved-views/settings/teamOrganization/config.ts
@@ -0,0 +1,18 @@
+import { SavedViewsSetting } from '@/shared/modules/saved-views/types/SavedViewsConfig';
+import { includeFilterRenderer } from '@/modules/member/config/saved-views/settings/common/includeFilterRenderer';
+import { IncludeEnum } from '@/modules/member/config/saved-views/settings/common/types/IncludeEnum';
+import OrganizationTeamOrganizationSetting from './OrganizationTeamOrganizationSetting.vue';
+
+const config: SavedViewsSetting<IncludeEnum> = {
+  inSettings: true,
+  settingsComponent: OrganizationTeamOrganizationSetting,
+  defaultValue: IncludeEnum.EXCLUDE,
+  queryUrlParser(value: string): IncludeEnum {
+    return value as IncludeEnum;
+  },
+  apiFilterRenderer(value: IncludeEnum): any[] {
+    return includeFilterRenderer('isTeamOrganization', value);
+  },
+};
+
+export default config;
diff --git a/frontend/src/modules/organization/config/saved-views/views/all-organizations.ts b/frontend/src/modules/organization/config/saved-views/views/all-organizations.ts
index f93dc6b9b4..b9b87a403e 100644
--- a/frontend/src/modules/organization/config/saved-views/views/all-organizations.ts
+++ b/frontend/src/modules/organization/config/saved-views/views/all-organizations.ts
@@ -2,8 +2,10 @@ import { SavedView } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 
 const allOrganizations: SavedView = {
   id: 'all-organizations',
-  label: 'All organizations',
-  filter: {
+  name: 'All organizations',
+  visibility: 'tenant',
+  placement: 'organization',
+  config: {
     search: '',
     relation: 'and',
     order: {
diff --git a/frontend/src/modules/organization/config/saved-views/views/most-members.ts b/frontend/src/modules/organization/config/saved-views/views/most-members.ts
index fc936fe619..7ceda63c79 100644
--- a/frontend/src/modules/organization/config/saved-views/views/most-members.ts
+++ b/frontend/src/modules/organization/config/saved-views/views/most-members.ts
@@ -2,8 +2,10 @@ import { SavedView } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 
 const mostMembers: SavedView = {
   id: 'most-contacts',
-  label: 'Most contacts',
-  filter: {
+  name: 'Most contacts',
+  visibility: 'tenant',
+  placement: 'organization',
+  config: {
     search: '',
     relation: 'and',
     order: {
diff --git a/frontend/src/modules/organization/config/saved-views/views/new-and-active.ts b/frontend/src/modules/organization/config/saved-views/views/new-and-active.ts
index cd76b1322d..d7d5a7043e 100644
--- a/frontend/src/modules/organization/config/saved-views/views/new-and-active.ts
+++ b/frontend/src/modules/organization/config/saved-views/views/new-and-active.ts
@@ -3,8 +3,10 @@ import moment from 'moment';
 
 const newAndActive: SavedView = {
   id: 'new-and-active',
-  label: 'New and active',
-  filter: {
+  name: 'New and active',
+  visibility: 'tenant',
+  placement: 'organization',
+  config: {
     search: '',
     relation: 'and',
     order: {
diff --git a/frontend/src/modules/organization/config/saved-views/views/team-organizations.ts b/frontend/src/modules/organization/config/saved-views/views/team-organizations.ts
index b20c3ad48d..d39b5d2fdd 100644
--- a/frontend/src/modules/organization/config/saved-views/views/team-organizations.ts
+++ b/frontend/src/modules/organization/config/saved-views/views/team-organizations.ts
@@ -2,8 +2,10 @@ import { SavedView } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 
 const teamOrganizations: SavedView = {
   id: 'team-organizations',
-  label: 'Team organizations',
-  filter: {
+  name: 'Team organizations',
+  visibility: 'tenant',
+  placement: 'organization',
+  config: {
     search: '',
     relation: 'and',
     order: {
diff --git a/frontend/src/modules/organization/pages/organization-list-page.vue b/frontend/src/modules/organization/pages/organization-list-page.vue
index a96799876d..6132300e4c 100644
--- a/frontend/src/modules/organization/pages/organization-list-page.vue
+++ b/frontend/src/modules/organization/pages/organization-list-page.vue
@@ -51,7 +51,9 @@
       <cr-saved-views
         v-model="filters"
         :config="organizationSavedViews"
-        :views="organizationViews"
+        :static-views="organizationViews"
+        :filters="organizationFilters"
+        placement="organization"
         @update:model-value="organizationFilter.alignFilterList($event)"
       />
       <cr-filter
diff --git a/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue b/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue
index fb0ac1d897..3de5f020cd 100644
--- a/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue
+++ b/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue
@@ -49,9 +49,9 @@
 </template>
 
 <script setup lang="ts">
-import { SavedView, SavedViewCreate, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
+import { SavedView, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 import { VueDraggableNext } from 'vue-draggable-next';
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import ConfirmDialog from '@/shared/dialog/confirm-dialog';
 import { SavedViewsService } from '@/shared/modules/saved-views/services/saved-views.service';
 import Message from '@/shared/message/message';
@@ -87,7 +87,7 @@ const onListChange = () => {
     ),
   ).then(() => {
     emit('reload');
-  })
+  });
 };
 
 const edit = (view: SavedView) => {
diff --git a/frontend/src/shared/modules/saved-views/components/SavedViews.vue b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
index 94ae889eee..6f561db5dd 100644
--- a/frontend/src/shared/modules/saved-views/components/SavedViews.vue
+++ b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
@@ -1,6 +1,29 @@
 <template>
   <div class="flex items-end justify-between mb-6 h-8">
-    <div class="tabs flex-grow " :class="{ 'is-shrink': hasChanged }">
+    <div v-if="isEnabled && scrollableTabs" class="border-b-2 border-r border-[#e4e7ed] flex-grow flex justify-end -mb-px pb-1">
+      <el-dropdown placement="bottom-start">
+        <el-button class="btn btn-brand btn--transparent btn--icon--sm inset-y-0 !border-0 mr-2">
+          <i class="ri-list-unordered text-lg text-gray-400 h-5 flex items-center" />
+        </el-button>
+        <template #dropdown>
+          <el-dropdown-item
+            :class="selectedTab === '' ? 'bg-brand-50' : ''"
+            @click="selectedTab = ''"
+          >
+            {{ props.config.defaultView.name }}
+          </el-dropdown-item>
+          <el-dropdown-item
+            v-for="view of views"
+            :key="view.name"
+            :class="selectedTab === view.id ? 'bg-brand-50' : ''"
+            @click="selectedTab = view.id"
+          >
+            {{ view.name }}
+          </el-dropdown-item>
+        </template>
+      </el-dropdown>
+    </div>
+    <div id="tabs" class="tabs flex-grow" :class="{ 'is-shrink': hasChanged }">
       <el-tabs v-if="views.length > 0" v-model="selectedTab" @tab-change="onTabChange($event)">
         <el-tab-pane
           :label="props.config.defaultView.name"
@@ -14,7 +37,7 @@
         />
       </el-tabs>
     </div>
-    <div class="border-b-2 border-[#e4e7ed] flex-grow flex justify-end -mb-px pb-1">
+    <div v-if="isEnabled" class="border-b-2 border-[#e4e7ed] flex-grow flex justify-end -mb-px pb-1">
       <el-button v-if="hasChanged" class="btn btn-brand btn-brand--transparent btn--sm !leading-5 !h-8 mr-2" @click="reset()">
         Reset view
       </el-button>
@@ -23,12 +46,12 @@
           Save as...
         </el-button>
         <template #dropdown>
-          <el-dropdown-item v-if="selectedTab.length > 0 && selectedTab !== props.config.defaultView.id">
-            <div class="w-40" @click="update()">
+          <el-dropdown-item v-if="selectedTab.length > 0 && selectedTab !== props.config.defaultView.id" @click="update()">
+            <div class="w-40">
               <i class="ri-loop-left-line text-gray-400 text-base mr-2" />Update view
             </div>
           </el-dropdown-item>
-          <el-dropdown-item>
+          <el-dropdown-item @click="createNewView()">
             <div class="w-40">
               <i class="ri-add-line text-gray-400 text-base mr-2" />Create new view
             </div>
@@ -70,26 +93,35 @@
 
 <script setup lang="ts">
 import {
-  computed, getCurrentInstance,
+  computed,
   onMounted, ref, watch,
 } from 'vue';
 import { Filter, FilterConfig } from '@/shared/modules/filters/types/FilterConfig';
-import { SavedView, SavedViewCreate, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
+import { SavedView, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 import { isEqual } from 'lodash';
 import CrSavedViewsForm from '@/shared/modules/saved-views/components/forms/SavedViewForm.vue';
 import ConfirmDialog from '@/shared/dialog/confirm-dialog';
 import CrSavedViewsManagement from '@/shared/modules/saved-views/components/SavedViewManagement.vue';
 import { SavedViewsService } from '@/shared/modules/saved-views/services/saved-views.service';
+import { FeatureFlag } from '@/utils/featureFlag';
+import Message from '@/shared/message/message';
 
 const props = defineProps<{
   modelValue: Filter,
   config: SavedViewsConfig,
   filters: Record<string, FilterConfig>,
   placement: string,
+  staticViews: SavedView[],
 }>();
 
 const emit = defineEmits<{(e: 'update:modelValue', value: Filter): any}>();
 
+// Feature flag
+const isEnabled = computed(() => FeatureFlag.isFlagEnabled(
+  FeatureFlag.flags.customViews,
+));
+
+// Drawer
 const isFormOpen = ref<boolean>(false);
 
 const filters = computed<Filter>({
@@ -126,7 +158,21 @@ const compareFilterToCurrentValues = (filter: Filter): boolean => {
   return isEqual(compareFilter, currentFilter);
 };
 
+// Check if scrollable tabs
+const scrollableTabs = ref<boolean>(false);
+const checkIfScrollableTabs = () => {
+  setTimeout(() => {
+    const tabs = document.getElementById('tabs');
+    if (tabs) {
+      const tabsContainer = tabs.querySelector('.el-tabs__nav-scroll');
+      const tabsWrapper = tabs.querySelector('.el-tabs__nav');
+      scrollableTabs.value = (tabsContainer?.clientWidth || 0) < (tabsWrapper?.clientWidth || 0);
+    }
+  }, 0);
+};
+
 const hasChanged = computed<boolean>(() => {
+  checkIfScrollableTabs();
   const viewFilter = currentView.value.config;
   return !compareFilterToCurrentValues(viewFilter);
 });
@@ -147,21 +193,6 @@ const reset = () => {
   };
 };
 
-// Update current view
-const update = () => {
-  ConfirmDialog({
-    type: 'danger',
-    title: 'Update shared view',
-    message:
-        'This view is shared with all workspace users, any changes will reflected in each user account.',
-    icon: 'ri-loop-left-line',
-    confirmButtonText: 'Update shared view',
-    showCancelButton: true,
-    cancelButtonText: 'Cancel',
-  } as any).then(() => {
-  });
-};
-
 // Change tab if filters match
 watch(() => props.modelValue, (filter: Filter) => {
   if (compareFilterToCurrentValues(props.config.defaultView.config)) {
@@ -178,6 +209,10 @@ watch(() => props.modelValue, (filter: Filter) => {
 const views = ref<SavedView[]>([]);
 
 const getViews = () => {
+  if (!isEnabled.value) {
+    views.value = props.staticViews;
+    return;
+  }
   SavedViewsService.query({
     filter: {
       placement: [props.placement],
@@ -187,6 +222,7 @@ const getViews = () => {
       views.value = [];
       setTimeout(() => {
         views.value = [...res];
+        checkIfScrollableTabs();
       }, 0);
     })
     .catch(() => {
@@ -194,7 +230,7 @@ const getViews = () => {
     });
 };
 
-const editView = ref<SavedView | SavedViewCreate | null>(null);
+const editView = ref<Partial<SavedView> | null>(null);
 const edit = (view: SavedView) => {
   editView.value = view;
   isFormOpen.value = true;
@@ -208,6 +244,41 @@ const duplicate = (view: SavedView) => {
   isFormOpen.value = true;
 };
 
+// Update current view
+const update = () => {
+  const view = currentView.value;
+  (currentView.value.visibility === 'tenant' ? ConfirmDialog({
+    type: 'danger',
+    title: 'Update shared view',
+    message:
+        'This view is shared with all workspace users, any changes will reflected in each user account.',
+    icon: 'ri-loop-left-line',
+    confirmButtonText: 'Update shared view',
+    showCancelButton: true,
+    cancelButtonText: 'Cancel',
+  } as any) : Promise.resolve())
+    .then(() => {
+      SavedViewsService.update(view.id, {
+        name: view.name,
+        placement: view.placement,
+        visibility: view.visibility,
+        order: view.order,
+        config: props.modelValue,
+      })
+        .then(() => {
+          Message.success('View updated successfully!');
+          getViews();
+        });
+    });
+};
+
+const createNewView = () => {
+  editView.value = {
+    config: props.modelValue,
+  };
+  isFormOpen.value = true;
+};
+
 onMounted(() => {
   getViews();
 });
diff --git a/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue b/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
index 1595b61a71..d5cd9702e1 100644
--- a/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
+++ b/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
@@ -49,10 +49,39 @@
 
         <!-- Filters -->
         <section class="px-6">
-          <div class="py-6">
+          <div class="py-6 flex items-center justify-between">
             <h6 class="text-base font-semibold">
               Filters
             </h6>
+            <el-dropdown v-if="filterList.length > 0" placement="bottom-end">
+              <p class="text-xs leading-5 font-medium text-gray-900">
+                Matching {{ form.relation === 'and' ? 'all' : 'any' }} <i class="ri-arrow-down-s-line" />
+              </p>
+              <template #dropdown>
+                <el-dropdown-item
+                  class="flex items-center justify-between"
+                  :class="{ 'bg-brand-50': form.relation === 'and' }"
+                  @click="form.relation = 'and'"
+                >
+                  Matching all
+                  <i
+                    :class="form.relation === 'and' ? 'opacity-100' : 'opacity-0'"
+                    class="ri-check-line !text-brand-500 !mr-0 ml-1"
+                  />
+                </el-dropdown-item>
+                <el-dropdown-item
+                  class="flex items-center justify-between"
+                  :class="{ 'bg-brand-50': form.relation === 'or' }"
+                  @click="form.relation = 'or'"
+                >
+                  Matching any
+                  <i
+                    :class="form.relation === 'or' ? 'opacity-100' : 'opacity-0'"
+                    class="ri-check-line !text-brand-500 !mr-0 ml-1"
+                  />
+                </el-dropdown-item>
+              </template>
+            </el-dropdown>
           </div>
           <div>
             <div v-for="filter of filterList" :key="filter" class="flex items-center mb-3">
@@ -94,7 +123,7 @@
                       </template>
                     </el-input>
                   </div>
-                  <div class="m-2">
+                  <div class="m-2 max-h-56 overflow-auto">
                     <el-dropdown-item
                       v-for="[key, filterConfig] of filteredFilters"
                       :key="key"
@@ -212,11 +241,7 @@ const isDrawerOpen = computed<boolean>({
 const settingsDefaultValue = computed<Record<string, any>>(() => {
   const settingsObject = { ...props.config.settings };
   Object.entries(settingsObject).forEach(([key, setting]) => {
-    if (setting.inSettings && setting.settingsComponent) {
-      settingsObject[key] = settingsObject[key].defaultValue;
-    } else {
-      delete settingsObject[key];
-    }
+    settingsObject[key] = settingsObject[key].defaultValue;
   });
   return settingsObject;
 });
@@ -338,7 +363,7 @@ const submit = (): void => {
     name: form.name,
     config: {
       search: '',
-      relation: 'and',
+      relation: form.relation,
       order: {
         prop: form.sorting.prop,
         order: form.sorting.order,
diff --git a/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts b/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
index 6040a7c374..b109da8637 100644
--- a/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
+++ b/frontend/src/shared/modules/saved-views/types/SavedViewsConfig.ts
@@ -28,5 +28,5 @@ export interface SavedViewCreate {
   visibility: string;
   placement: string;
   config: Filter & Record<string, any>
-  order: number;
+  order?: number;
 }
diff --git a/frontend/src/utils/featureFlag/index.js b/frontend/src/utils/featureFlag/index.js
index b0699ff118..5cdb9fc6b6 100644
--- a/frontend/src/utils/featureFlag/index.js
+++ b/frontend/src/utils/featureFlag/index.js
@@ -12,6 +12,7 @@ export const FEATURE_FLAGS = {
   csvExport: 'csv-export',
   hubspot: 'hubspot',
   logRocket: 'log-rocket',
+  customViews: 'custom-views',
 };
 
 class FeatureFlagService {

From c3b40178250ac5f6830853c85ae4164256ed922e Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Tue, 17 Oct 2023 12:29:04 +0700
Subject: [PATCH 10/22] Fix refactor issue

---
 frontend/src/i18n/en.js                        |  4 ++--
 .../github/components/github-connect.vue       |  6 +++---
 .../components/hackerNews-connect-drawer.vue   |  6 +++---
 .../linkedin/components/linkedin-connect.vue   |  2 +-
 .../components/linkedin-settings-drawer.vue    |  4 ++--
 frontend/src/integrations/linkedin/config.js   |  2 +-
 .../activity/components/activity-header.vue    |  2 +-
 .../components/integration-list-page.vue       | 10 +++++-----
 .../modules/integration/integration-store.js   |  2 +-
 .../bulk/bulk-edit-attribute-popover.vue       |  4 ++--
 .../form/member-form-organizations-create.vue  | 14 +++++++-------
 .../form/member-form-organizations-drawer.vue  |  2 +-
 .../form/member-form-organizations.vue         | 18 +++++++++---------
 .../member/components/member-dropdown.vue      |  4 ++--
 .../member/components/member-organizations.vue |  8 ++++----
 15 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/frontend/src/i18n/en.js b/frontend/src/i18n/en.js
index 90cd81393d..e7811984ff 100644
--- a/frontend/src/i18n/en.js
+++ b/frontend/src/i18n/en.js
@@ -237,12 +237,12 @@ const en = {
       create: {
         success: 'Organization successfully saved',
         error:
-          'There was an error creating the config',
+          'There was an error creating the organization',
       },
       update: {
         success: 'Organization successfully saved',
         error:
-          'There was an error updating the config',
+          'There was an error updating the organization',
       },
       destroy: {
         success: 'Organization successfully deleted',
diff --git a/frontend/src/integrations/github/components/github-connect.vue b/frontend/src/integrations/github/components/github-connect.vue
index 41aa79bf3b..ce175bbd0a 100644
--- a/frontend/src/integrations/github/components/github-connect.vue
+++ b/frontend/src/integrations/github/components/github-connect.vue
@@ -26,14 +26,14 @@ const connect = () => {
   ConfirmDialog({
     type: 'notification',
     title:
-      'Are you the admin of your GitHub config?',
+      'Are you the admin of your GitHub organization?',
     titleClass: 'text-lg pt-2',
     message:
       `Only GitHub users with admin permissions are able to connect crowd.dev's GitHub integration.
       If you are an organization contact, you will need an approval from the GitHub workspace admin. <a href="https://docs.crowd.dev/docs/github-integration" target="_blank">Read more</a>`,
     icon: 'ri-information-line',
-    confirmButtonText: 'I\'m the GitHub config admin',
-    cancelButtonText: 'Invite config admin to this workspace',
+    confirmButtonText: 'I\'m the GitHub organization admin',
+    cancelButtonText: 'Invite organization admin to this workspace',
     verticalCancelButtonClass: 'btn btn--md btn--primary w-full',
     verticalConfirmButtonClass: 'btn btn--md btn--bordered w-full !mb-2',
     vertical: true,
diff --git a/frontend/src/integrations/hackernews/components/hackerNews-connect-drawer.vue b/frontend/src/integrations/hackernews/components/hackerNews-connect-drawer.vue
index 8c434045bd..b380aaace3 100644
--- a/frontend/src/integrations/hackernews/components/hackerNews-connect-drawer.vue
+++ b/frontend/src/integrations/hackernews/components/hackerNews-connect-drawer.vue
@@ -17,7 +17,7 @@
     <template #content>
       <div class="flex flex-col gap-2 items-start mb-2">
         <span class="text-xs font-light mb-2 text-gray-900">
-          Monitor mentions of your community/config on
+          Monitor mentions of your community/organization on
           Hacker News. <br />Historical data is available
           after the 1st of December 2022.
           <a
@@ -27,11 +27,11 @@
             Read more</a>.
         </span>
         <span class="text-sm font-medium">Track posts mentioning your
-          community/config</span>
+          community/organization</span>
         <span
           class="text-2xs font-light mb-2 text-gray-600"
         >
-          Monitor your community/config being
+          Monitor your community/organization being
           mentioned in the top 500 of Hacker News. <br />
         </span>
         <app-keywords-input
diff --git a/frontend/src/integrations/linkedin/components/linkedin-connect.vue b/frontend/src/integrations/linkedin/components/linkedin-connect.vue
index 65f5e34306..3074c62c72 100644
--- a/frontend/src/integrations/linkedin/components/linkedin-connect.vue
+++ b/frontend/src/integrations/linkedin/components/linkedin-connect.vue
@@ -65,7 +65,7 @@ const upgradePlan = () => {
 const drawerVisible = ref(false);
 const isLinkedinEnabled = ref(false);
 
-// Only render linkedin drawer and settings button, if integration has settings and more than 1 config
+// Only render linkedin drawer and settings button, if integration has settings and more than 1 organization
 const hasSettings = computed(
   () => !!props.integration.settings
     && props.integration.settings.organizations.length > 1,
diff --git a/frontend/src/integrations/linkedin/components/linkedin-settings-drawer.vue b/frontend/src/integrations/linkedin/components/linkedin-settings-drawer.vue
index aebb8054af..cf034505ae 100644
--- a/frontend/src/integrations/linkedin/components/linkedin-settings-drawer.vue
+++ b/frontend/src/integrations/linkedin/components/linkedin-settings-drawer.vue
@@ -31,7 +31,7 @@
             class="text-2xs font-light mb-2 text-gray-600"
           >
             Monitor all comments and reactions to posts or
-            shares from one of your associated config
+            shares from one of your associated organization
             profiles. <br />
           </span>
           <el-select
@@ -55,7 +55,7 @@
             <i class="ri-alert-line mr-2" />
             <div class="text-sm pt-0.5">
               <span class="font-medium">Action required.</span>
-              Select one of your associated config
+              Select one of your associated organization
               profiles to start tracking LinkedIn activities
             </div>
           </div>
diff --git a/frontend/src/integrations/linkedin/config.js b/frontend/src/integrations/linkedin/config.js
index 7f859ea0b3..c9ae4b962c 100644
--- a/frontend/src/integrations/linkedin/config.js
+++ b/frontend/src/integrations/linkedin/config.js
@@ -6,7 +6,7 @@ export default {
   backgroundColor: '#D4E1F0',
   borderColor: '#D4E1F0',
   description:
-    "Connect LinkedIn to sync comments and reactions from your config's posts.",
+    "Connect LinkedIn to sync comments and reactions from your organization's posts.",
   image: '/images/integrations/linkedin.png',
   connectComponent: LinkedInConnect,
   reactions: {
diff --git a/frontend/src/modules/activity/components/activity-header.vue b/frontend/src/modules/activity/components/activity-header.vue
index 884046b025..0f0d629a59 100644
--- a/frontend/src/modules/activity/components/activity-header.vue
+++ b/frontend/src/modules/activity/components/activity-header.vue
@@ -24,7 +24,7 @@
               :src="activity.organization.logo"
               :alt="`${activity.organization.displayName} logo`"
             />
-            <span class="text-gray-900 group-hover:text-brand-500 transition">{{ activity.config.displayName }}</span>
+            <span class="text-gray-900 group-hover:text-brand-500 transition">{{ activity.organization.displayName }}</span>
           </div>
         </router-link>
       </div>
diff --git a/frontend/src/modules/integration/components/integration-list-page.vue b/frontend/src/modules/integration/components/integration-list-page.vue
index 00ca6bf44e..8c6a01737f 100644
--- a/frontend/src/modules/integration/components/integration-list-page.vue
+++ b/frontend/src/modules/integration/components/integration-list-page.vue
@@ -125,14 +125,14 @@ export default {
             vertical: true,
             type: 'custom',
             icon: '<img src="https://cdn-icons-png.flaticon.com/512/3800/3800024.png" class="h-8 w-8" alt="slack logo" />',
-            title: `<span class="flex items-start gap-1">Connect Slack config
+            title: `<span class="flex items-start gap-1">Connect Slack bot 
               <span class="text-brand-500 text-3xs leading-3 pt-1 font-normal">Required</span></span>`,
             titleClass: 'text-lg',
             message: `
-            <img src="/images/integrations/slack-config.png" class="mb-6" alt="slack config installation" />
-            To fetch data from Slack, you need to install the crowd.dev Slack config and add it to all channels you want to track. <br><br>
-            You can either add the Slack config directly from a channel, or add the app via channel Integrations.`,
-            confirmButtonText: 'How to connect Slack config',
+            <img src="/images/integrations/slack-bot.png" class="mb-6" alt="slack bot installation" />
+            To fetch data from Slack, you need to install the crowd.dev Slack bot and add it to all channels you want to track. <br><br>
+            You can either add the Slack bot directly from a channel, or add the app via channel Integrations.`,
+            confirmButtonText: 'How to connect Slack bot',
             showCancelButton: false,
             messageClass: 'text-xs !leading-5 !mt-1 text-gray-600',
             verticalCustomClass: 'custom-slack-message-box',
diff --git a/frontend/src/modules/integration/integration-store.js b/frontend/src/modules/integration/integration-store.js
index 170e96f903..7e85763fd9 100644
--- a/frontend/src/modules/integration/integration-store.js
+++ b/frontend/src/modules/integration/integration-store.js
@@ -358,7 +358,7 @@ export default {
 
     async doDiscordConnect({ commit }, { guildId }) {
       // Function to connect to Discord. We just need to store the
-      // guildId to be able to match config events to users.
+      // guildId to be able to match bot events to users.
       try {
         commit('CREATE_STARTED');
 
diff --git a/frontend/src/modules/member/components/bulk/bulk-edit-attribute-popover.vue b/frontend/src/modules/member/components/bulk/bulk-edit-attribute-popover.vue
index bba43eb7e7..680594ce14 100644
--- a/frontend/src/modules/member/components/bulk/bulk-edit-attribute-popover.vue
+++ b/frontend/src/modules/member/components/bulk/bulk-edit-attribute-popover.vue
@@ -211,14 +211,14 @@ const multiSelectCreateFn = computed(() => {
 
 const multiSelectPlaceholder = computed(() => {
   if (selectedAttribute.value.name === 'organizations') {
-    return 'Select or create an config';
+    return 'Select or create an organization';
   }
   return 'Enter option(s) or create one';
 });
 
 const multiSelectClassName = computed(() => {
   if (selectedAttribute.value.name === 'organizations') {
-    return 'config-input w-full';
+    return 'organization-input w-full';
   }
   return 'w-full multi-select-field';
 });
diff --git a/frontend/src/modules/member/components/form/member-form-organizations-create.vue b/frontend/src/modules/member/components/form/member-form-organizations-create.vue
index 11cd62cc6d..7bd28fb93f 100644
--- a/frontend/src/modules/member/components/form/member-form-organizations-create.vue
+++ b/frontend/src/modules/member/components/form/member-form-organizations-create.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-dialog v-model="isOpened" :title="isEdit ? 'Edit config' : 'Add config'">
+  <app-dialog v-model="isOpened" :title="isEdit ? 'Edit organization' : 'Add organization'">
     <template #content>
       <div class="px-6">
         <app-form-item
@@ -15,8 +15,8 @@
             v-model="form.organization"
             :fetch-fn="fetchOrganizationsFn"
             :create-fn="createOrganizationFn"
-            placeholder="Select or create an config"
-            input-class="config-input"
+            placeholder="Select or create an organization"
+            input-class="organization-input"
             store-key="memberOrganizations"
             :create-if-not-found="true"
             :in-memory-filter="false"
@@ -113,7 +113,7 @@
           @click="submit()"
         >
           <span v-if="isEdit">Update</span>
-          <span v-else>Add config</span>
+          <span v-else>Add organization</span>
         </el-button>
       </footer>
     </template>
@@ -135,7 +135,7 @@ import moment from 'moment';
 type SelectOrganization = Organization & { label: string };
 
 interface MemberOrganizationForm {
-  config: Organization | '',
+  organization: Organization | '',
   jobTitle: string;
   dateStart: string;
   dateEnd: string;
@@ -143,7 +143,7 @@ interface MemberOrganizationForm {
 
 const props = defineProps<{
   modelValue: boolean,
-  config?: Organization | null,
+  organization?: Organization | null,
 }>();
 
 const emit = defineEmits<{(e: 'update:modelValue', value: boolean), (e: 'add', value: Organization), (e: 'edit', value: Organization),}>();
@@ -218,7 +218,7 @@ const createOrganizationFn = (value: string) => OrganizationService.create({
   }))
   .catch(() => null);
 
-const fillForm = (config: Organization) => {
+const fillForm = (organization: Organization) => {
   form.organization = {
     ...organization,
     label: organization.displayName || organization.name,
diff --git a/frontend/src/modules/member/components/form/member-form-organizations-drawer.vue b/frontend/src/modules/member/components/form/member-form-organizations-drawer.vue
index 66e053dc91..30524ac81e 100644
--- a/frontend/src/modules/member/components/form/member-form-organizations-drawer.vue
+++ b/frontend/src/modules/member/components/form/member-form-organizations-drawer.vue
@@ -50,7 +50,7 @@
         </article>
         <div class="flex justify-start pt-5">
           <el-button class="btn btn-link btn-link--primary" @click="isOrganizationFormModalOpen = true">
-            + Add config
+            + Add organization
           </el-button>
         </div>
       </div>
diff --git a/frontend/src/modules/member/components/form/member-form-organizations.vue b/frontend/src/modules/member/components/form/member-form-organizations.vue
index 52ee093ff5..dd3206b8f3 100644
--- a/frontend/src/modules/member/components/form/member-form-organizations.vue
+++ b/frontend/src/modules/member/components/form/member-form-organizations.vue
@@ -5,7 +5,7 @@
       <p class="text-gray-500 text-2xs leading-normal mt-1">
         Organizations’ data is automatically obtained via enrichement (work experience).<br>
         <br>
-        The config period will define each activity affiliation.
+        The organization period will define each activity affiliation.
       </p>
     </div>
     <div
@@ -38,26 +38,26 @@
               class="mr-2"
             />
             <p class="text-xs leading-5 pl-2">
-              {{ config.displayName || config.name }}
+              {{ organization.displayName || organization.name }}
             </p>
           </div>
           <div class="w-1/3">
             <p class="text-xs leading-5 pl-2">
-              {{ config.memberOrganizations.title }}
+              {{ organization.memberOrganizations.title }}
             </p>
           </div>
           <div class="w-1/3">
             <p class="text-xs leading-5 pl-2">
               <span>
-                {{ config.memberOrganizations.dateStart
-                  ? moment(config.memberOrganizations.dateStart).utc().format('MMMM YYYY')
+                {{ organization.memberOrganizations.dateStart
+                  ? moment(organization.memberOrganizations.dateStart).utc().format('MMMM YYYY')
                   : 'Unknown' }}
               </span>
               <span class="mx-1 whitespace-nowrap">-></span>
               <span>
-                {{ config.memberOrganizations.dateEnd
-                  ? moment(config.memberOrganizations.dateEnd).utc().format('MMMM YYYY')
-                  : config.memberOrganizations.dateStart ? 'Present' : 'Unknown' }}
+                {{ organization.memberOrganizations.dateEnd
+                  ? moment(organization.memberOrganizations.dateEnd).utc().format('MMMM YYYY')
+                  : organization.memberOrganizations.dateStart ? 'Present' : 'Unknown' }}
               </span>
             </p>
           </div>
@@ -74,7 +74,7 @@
 
       <div class="flex justify-start">
         <el-button class="btn btn-link btn-link--primary mt-5" @click="isOrganizationFormModalOpen = true">
-          + Add config
+          + Add organization
         </el-button>
       </div>
     </div>
diff --git a/frontend/src/modules/member/components/member-dropdown.vue b/frontend/src/modules/member/components/member-dropdown.vue
index 7322020b07..fb98c7ea72 100644
--- a/frontend/src/modules/member/components/member-dropdown.vue
+++ b/frontend/src/modules/member/components/member-dropdown.vue
@@ -161,7 +161,7 @@
         >
           <i class="ri-robot-line text-base mr-2" /><span
             class="text-xs"
-          >Mark as config</span>
+          >Mark as bot</span>
         </el-dropdown-item>
         <el-dropdown-item
           v-if="member.attributes.isBot?.default"
@@ -174,7 +174,7 @@
         >
           <i class="ri-robot-line text-base mr-2" /><span
             class="text-xs"
-          >Unmark as config</span>
+          >Unmark as bot</span>
         </el-dropdown-item>
         <el-divider class="border-gray-200" />
         <el-dropdown-item
diff --git a/frontend/src/modules/member/components/member-organizations.vue b/frontend/src/modules/member/components/member-organizations.vue
index 2318c7e454..38fc1cfb03 100644
--- a/frontend/src/modules/member/components/member-organizations.vue
+++ b/frontend/src/modules/member/components/member-organizations.vue
@@ -116,13 +116,13 @@ const props = defineProps({
 const activeOrganization = computed(() => {
   const { organizations } = props.member;
 
-  // No active config
+  // No active organization
   if (!organizations?.length) {
     return null;
   }
 
-  // Only one config that doesn't have either start or end date
-  // We assume it's the active config
+  // Only one organization that doesn't have either start or end date
+  // We assume it's the active organization
   if (organizations.length === 1
     && !organizations[0].memberOrganizations?.dateStart
     && !organizations[0].memberOrganizations?.dateEnd) {
@@ -133,7 +133,7 @@ const activeOrganization = computed(() => {
   const completeOrganizations = organizations
     .filter((organization) => !!organization.memberOrganizations?.dateStart && !organization.memberOrganizations?.dateEnd);
 
-  // Return the most recent config, comparing the startDate
+  // Return the most recent organization, comparing the startDate
   return completeOrganizations.reduce((mostRecent, organization) => {
     const mostRecentStartDate = new Date(mostRecent.memberOrganizations?.dateStart);
     const organizationStartDate = new Date(organization.memberOrganizations?.dateStart);

From 69640835a6de9f982a66454f208d0d764076ad15 Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Tue, 17 Oct 2023 12:34:41 +0700
Subject: [PATCH 11/22] Fix refactor issue

---
 .../form/organization-form-attributes.vue     |  2 +-
 .../form/organization-form-identities.vue     |  2 +-
 .../list/organization-list-toolbar.vue        |  2 +-
 .../components/organization-badge.vue         |  2 +-
 .../components/organization-merge-dialog.vue  |  4 ++--
 .../components/organization-name.vue          |  2 +-
 .../organization-selection-dropdown.vue       |  6 ++---
 ...organization-merge-suggestions-details.vue | 24 +++++++++----------
 .../view/_aside/_aside-enriched.vue           |  2 +-
 .../view/organization-view-header.vue         | 18 +++++++-------
 .../organization/config/enrichment/index.ts   |  2 +-
 .../filters/enrichedOrganization/config.ts    |  4 ++--
 .../organization/organization-field.js        |  2 +-
 .../organization/organization-model.js        |  2 +-
 .../pages/organization-form-page.vue          | 16 ++++++-------
 .../pages/organization-list-page.vue          |  2 +-
 .../cube/_query_builder/DimensionSelect.vue   | 12 +++++-----
 .../cube/_query_builder/FilterComponent.vue   | 12 +++++-----
 18 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/frontend/src/modules/organization/components/form/organization-form-attributes.vue b/frontend/src/modules/organization/components/form/organization-form-attributes.vue
index 99121eb0ba..b22475dc43 100644
--- a/frontend/src/modules/organization/components/form/organization-form-attributes.vue
+++ b/frontend/src/modules/organization/components/form/organization-form-attributes.vue
@@ -3,7 +3,7 @@
     <div v-if="showHeader">
       <h6>Attributes</h6>
       <p class="text-gray-500 text-2xs leading-normal mt-1">
-        Data points to enhance the config profile
+        Data points to enhance the organization profile
       </p>
     </div>
     <div :class="showHeader ? 'col-span-2' : 'col-span-3'">
diff --git a/frontend/src/modules/organization/components/form/organization-form-identities.vue b/frontend/src/modules/organization/components/form/organization-form-identities.vue
index cc71fc785b..f3b562a69d 100644
--- a/frontend/src/modules/organization/components/form/organization-form-identities.vue
+++ b/frontend/src/modules/organization/components/form/organization-form-identities.vue
@@ -159,7 +159,7 @@ const identitiesForm = reactive({
     enabled:
       props.modelValue.identities?.some((el) => el.platform === 'crunchbase')
       || false,
-    urlPrefix: 'crunchbase.com/config/',
+    urlPrefix: 'crunchbase.com/organization/',
     imgContainerClass:
       'h-8 w-8 rounded flex items-center justify-center text-base platform-logo--crunchbase',
   },
diff --git a/frontend/src/modules/organization/components/list/organization-list-toolbar.vue b/frontend/src/modules/organization/components/list/organization-list-toolbar.vue
index 3a56839add..f9d931a655 100644
--- a/frontend/src/modules/organization/components/list/organization-list-toolbar.vue
+++ b/frontend/src/modules/organization/components/list/organization-list-toolbar.vue
@@ -5,7 +5,7 @@
   >
     <span class="block text-sm font-semibold mr-4">
       {{
-        pluralize('config', selectedOrganizations.length, true)
+        pluralize('organization', selectedOrganizations.length, true)
       }}
       selected
     </span>
diff --git a/frontend/src/modules/organization/components/organization-badge.vue b/frontend/src/modules/organization/components/organization-badge.vue
index ccce1ab642..528254a9b2 100644
--- a/frontend/src/modules/organization/components/organization-badge.vue
+++ b/frontend/src/modules/organization/components/organization-badge.vue
@@ -65,7 +65,7 @@ const computedTooltipContent = (tooltip) => {
       props.organization.joinedAt,
     ).format('MMM DD, YYYY')}`;
   } if (tooltip === 'team') {
-    return 'Team config';
+    return 'Team organization';
   }
   return '';
 };
diff --git a/frontend/src/modules/organization/components/organization-merge-dialog.vue b/frontend/src/modules/organization/components/organization-merge-dialog.vue
index dd4d7f063b..63e1732808 100644
--- a/frontend/src/modules/organization/components/organization-merge-dialog.vue
+++ b/frontend/src/modules/organization/components/organization-merge-dialog.vue
@@ -2,7 +2,7 @@
   <app-dialog
     v-if="isModalOpen"
     v-model="isModalOpen"
-    title="Merge config"
+    title="Merge organization"
     size="2extra-large"
   >
     <template #content>
@@ -38,7 +38,7 @@
                   @click="changeOrganization()"
                 >
                   <span class="ri-refresh-line text-base text-brand-500 mr-2" />
-                  <span class="text-brand-500">Change config</span>
+                  <span class="text-brand-500">Change organization</span>
                 </button>
               </template>
             </app-organization-merge-suggestions-details>
diff --git a/frontend/src/modules/organization/components/organization-name.vue b/frontend/src/modules/organization/components/organization-name.vue
index 31989bc91e..516759a6a8 100644
--- a/frontend/src/modules/organization/components/organization-name.vue
+++ b/frontend/src/modules/organization/components/organization-name.vue
@@ -29,7 +29,7 @@
           @mouseover="handleOnMouseOver"
           @mouseleave="handleOnMouseLeave"
         >
-          {{ config.displayName || config.name }}
+          {{ organization.displayName || organization.name }}
         </div>
       </el-tooltip>
       <app-organization-badge
diff --git a/frontend/src/modules/organization/components/organization-selection-dropdown.vue b/frontend/src/modules/organization/components/organization-selection-dropdown.vue
index a25c660497..92f2c86627 100644
--- a/frontend/src/modules/organization/components/organization-selection-dropdown.vue
+++ b/frontend/src/modules/organization/components/organization-selection-dropdown.vue
@@ -6,7 +6,7 @@
       />
     </div>
     <div class="text-gray-600 text-sm text-center py-4">
-      Select the config you want to merge with
+      Select the organization you want to merge with
     </div>
     <div class="flex justify-center">
       <div class="flex w-4/5">
@@ -81,10 +81,10 @@ const fetchFn = async (query, limit) => {
     limit,
   );
 
-  // Remove primary config from organizations that can be merged with
+  // Remove primary organization from organizations that can be merged with
   const filteredOptions = options.filter((m) => m.id !== props.id);
 
-  // If the primary config was removed, add an empty object in replacement
+  // If the primary organization was removed, add an empty object in replacement
   if (options.length !== filteredOptions.length) {
     filteredOptions.push({});
   }
diff --git a/frontend/src/modules/organization/components/suggestions/organization-merge-suggestions-details.vue b/frontend/src/modules/organization/components/suggestions/organization-merge-suggestions-details.vue
index 9d7282c25a..40e4b86fdd 100644
--- a/frontend/src/modules/organization/components/suggestions/organization-merge-suggestions-details.vue
+++ b/frontend/src/modules/organization/components/suggestions/organization-merge-suggestions-details.vue
@@ -29,7 +29,7 @@
           v-if="props.isPrimary"
           class="bg-brand-500 rounded-full py-0.5 px-2 text-white inline-block text-xs leading-5 font-medium"
         >
-          Primary config
+          Primary organization
         </div>
         <button
           v-else
@@ -97,7 +97,7 @@
             target="_blank"
             rel="noopener noreferrer"
             class="text-xs text-gray-900 text-right"
-          >{{ props.config.website || '-' }}</a>
+          >{{ props.organization.website || '-' }}</a>
         </article>
         <article
           v-if="
@@ -110,7 +110,7 @@
             Location
           </p>
           <p class="text-xs text-gray-900 text-right">
-            {{ props.config.location || '-' }}
+            {{ props.organization.location || '-' }}
           </p>
         </article>
         <article
@@ -124,7 +124,7 @@
             Number of employees
           </p>
           <p class="text-xs text-gray-900 text-right">
-            {{ props.config.employees || '-' }}
+            {{ props.organization.employees || '-' }}
           </p>
         </article>
         <article
@@ -139,7 +139,7 @@
           </p>
           <p class="text-xs text-gray-900 text-right">
             {{ revenueRange.displayValue(
-              props.config.revenueRange,
+              props.organization.revenueRange,
             ) || '-' }}
           </p>
         </article>
@@ -154,7 +154,7 @@
             Industry
           </p>
           <p class="text-xs text-gray-900 text-right first-letter:uppercase">
-            {{ props.config.industry || '-' }}
+            {{ props.organization.industry || '-' }}
           </p>
         </article>
         <article
@@ -168,7 +168,7 @@
             Industry
           </p>
           <p class="text-xs text-gray-900 text-right first-letter:uppercase">
-            {{ props.config.type || '-' }}
+            {{ props.organization.type || '-' }}
           </p>
         </article>
         <article
@@ -182,7 +182,7 @@
             Industry
           </p>
           <p class="text-xs text-gray-900 text-right">
-            {{ props.config.founded || '-' }}
+            {{ props.organization.founded || '-' }}
           </p>
         </article>
         <article
@@ -196,7 +196,7 @@
             Joined date
           </p>
           <p class="text-xs text-gray-900 text-right">
-            {{ formatDateToTimeAgo(props.config.joinedAt) || '-' }}
+            {{ formatDateToTimeAgo(props.organization.joinedAt) || '-' }}
           </p>
         </article>
         <article
@@ -210,7 +210,7 @@
             # of contacts
           </p>
           <p class="text-xs text-gray-900 text-right">
-            {{ props.config.memberCount || '-' }}
+            {{ props.organization.memberCount || '-' }}
           </p>
         </article>
         <article
@@ -224,7 +224,7 @@
             # of Activities
           </p>
           <p class="text-xs text-gray-900 text-right">
-            {{ props.config.activityCount || '-' }}
+            {{ props.organization.activityCount || '-' }}
           </p>
         </article>
       </div>
@@ -242,7 +242,7 @@
             <div class="flex gap-3 items-center">
               <app-platform :platform="identity.platform" />
               <span class="text-xs">
-                {{ getPlatformDetails(identity.platform)?.config.handle(identity)
+                {{ getPlatformDetails(identity.platform)?.organization.handle(identity)
                   ?? getPlatformDetails(identity.platform)?.name
                   ?? identity.platform }}</span>
             </div>
diff --git a/frontend/src/modules/organization/components/view/_aside/_aside-enriched.vue b/frontend/src/modules/organization/components/view/_aside/_aside-enriched.vue
index 012a4e2982..3203870478 100644
--- a/frontend/src/modules/organization/components/view/_aside/_aside-enriched.vue
+++ b/frontend/src/modules/organization/components/view/_aside/_aside-enriched.vue
@@ -38,7 +38,7 @@
           :filter-value="attribute.filterValue"
         />
         <div v-else class="mt-1 text-gray-900 text-xs">
-          {{ attribute.displayValue(config[attribute.name]) }}
+          {{ attribute.displayValue(organization[attribute.name]) }}
         </div>
       </div>
     </div>
diff --git a/frontend/src/modules/organization/components/view/organization-view-header.vue b/frontend/src/modules/organization/components/view/organization-view-header.vue
index bc355c2841..219d321953 100644
--- a/frontend/src/modules/organization/components/view/organization-view-header.vue
+++ b/frontend/src/modules/organization/components/view/organization-view-header.vue
@@ -12,7 +12,7 @@
         />
         <div>
           <div class="flex">
-            <h5>{{ config.displayName || config.name }}</h5>
+            <h5>{{ organization.displayName || organization.name }}</h5>
             <app-organization-badge
               class="ml-2"
               :organization="organization"
@@ -31,7 +31,7 @@
                 target="_blank"
                 rel="noopener noreferrer"
                 class="text-gray-600"
-              >{{ config.website }}</a>
+              >{{ organization.website }}</a>
             </div>
             <span
               v-if="
@@ -45,7 +45,7 @@
               class="flex items-center"
             >
               <i class="ri-map-pin-2-line mr-1" />
-              <span>{{ config.location }}</span>
+              <span>{{ organization.location }}</span>
             </div>
           </div>
         </div>
@@ -86,7 +86,7 @@
         <p class="mt-1 text-gray-900 text-xs">
           {{
             formattedInformation(
-              config.memberCount,
+              organization.memberCount,
               'number',
             )
           }}
@@ -99,7 +99,7 @@
         <p class="mt-1 text-gray-900 text-xs">
           {{
             formattedInformation(
-              config.activityCount,
+              organization.activityCount,
               'number',
             )
           }}
@@ -112,7 +112,7 @@
         <p class="mt-1 text-gray-900 text-xs">
           {{
             formattedInformation(
-              config.size,
+              organization.size,
               'string',
             )
           }}
@@ -125,7 +125,7 @@
         <p class="mt-1 text-gray-900 text-xs">
           {{
             formattedInformation(
-              config.joinedAt,
+              organization.joinedAt,
               'relative',
             )
           }}
@@ -138,7 +138,7 @@
         <p class="mt-1 text-gray-900 text-xs">
           {{
             revenueRange.displayValue(
-              config.revenueRange,
+              organization.revenueRange,
             )
           }}
         </p>
@@ -150,7 +150,7 @@
         <p class="mt-1 text-gray-900 text-xs">
           {{
             formattedInformation(
-              config.lastActive,
+              organization.lastActive,
               'relative',
             )
           }}
diff --git a/frontend/src/modules/organization/config/enrichment/index.ts b/frontend/src/modules/organization/config/enrichment/index.ts
index b61a6f0f82..be344d5ac3 100644
--- a/frontend/src/modules/organization/config/enrichment/index.ts
+++ b/frontend/src/modules/organization/config/enrichment/index.ts
@@ -32,7 +32,7 @@ export interface OrganizationEnrichmentConfig {
   showInForm: boolean; // Display in Organization Form
   showInAttributes: boolean; // Display in Organization Profile
   isLink?: boolean; // If attribute is a url
-  component?: any; // Component that will render attribute in config profile
+  component?: any; // Component that will render attribute in organization profile
   displayValue?: (value: any) => string; // Formatter for displaying attribute value
   keyParser?: (key: string) => string; // Formatter for keys of jsons if attribute is json
   valueParser?: (value: any) => string; // Formatter for values of jsons if attribute is json
diff --git a/frontend/src/modules/organization/config/filters/enrichedOrganization/config.ts b/frontend/src/modules/organization/config/filters/enrichedOrganization/config.ts
index fcaa871645..a36b340305 100644
--- a/frontend/src/modules/organization/config/filters/enrichedOrganization/config.ts
+++ b/frontend/src/modules/organization/config/filters/enrichedOrganization/config.ts
@@ -7,12 +7,12 @@ import { itemLabelRendererByType } from '@/shared/modules/filters/config/itemLab
 
 const enrichedOrganization: BooleanFilterConfig = {
   id: 'enrichedOrganization',
-  label: 'Enriched config',
+  label: 'Enriched organization',
   iconClass: 'ri-sparkling-line',
   type: FilterConfigType.BOOLEAN,
   options: {},
   itemLabelRenderer(value: BooleanFilterValue, options: BooleanFilterOptions): string {
-    return itemLabelRendererByType[FilterConfigType.BOOLEAN]('Enriched config', value, options);
+    return itemLabelRendererByType[FilterConfigType.BOOLEAN]('Enriched organization', value, options);
   },
   apiFilterRenderer({ value, include }: BooleanFilterValue): any[] {
     const filter = {
diff --git a/frontend/src/modules/organization/organization-field.js b/frontend/src/modules/organization/organization-field.js
index bcc476d54b..71b4edaff2 100644
--- a/frontend/src/modules/organization/organization-field.js
+++ b/frontend/src/modules/organization/organization-field.js
@@ -7,7 +7,7 @@ export class OrganizationField {
     return new RelationToManyField(
       name,
       label,
-      '/config',
+      '/organization',
       Permissions.values.organizationRead,
       OrganizationService.listAutocomplete,
       (record) => {
diff --git a/frontend/src/modules/organization/organization-model.js b/frontend/src/modules/organization/organization-model.js
index 38f049471e..fb793689b0 100644
--- a/frontend/src/modules/organization/organization-model.js
+++ b/frontend/src/modules/organization/organization-model.js
@@ -100,7 +100,7 @@ const fields = {
   founded: new IntegerField('founded', 'Founded', { filterable: true }),
   type: new OrganizationTypeField('organizationType', 'Type', { filterable: true }),
   profiles: new StringArrayField('profiles', 'Profiles'),
-  lastEnrichedAt: new BooleanField('lastEnrichedAt', 'Enriched config', {
+  lastEnrichedAt: new BooleanField('lastEnrichedAt', 'Enriched organization', {
     filterable: true,
   }),
   affiliatedProfiles: new StringArrayField('affiliatedProfiles', 'Affiliated Profiles'),
diff --git a/frontend/src/modules/organization/pages/organization-form-page.vue b/frontend/src/modules/organization/pages/organization-form-page.vue
index 45a0d40314..29632ffd20 100644
--- a/frontend/src/modules/organization/pages/organization-form-page.vue
+++ b/frontend/src/modules/organization/pages/organization-form-page.vue
@@ -15,8 +15,8 @@
       <h4 class="mt-4 mb-6">
         {{
           isEditPage
-            ? 'Edit config'
-            : 'New config'
+            ? 'Edit organization'
+            : 'New organization'
         }}
       </h4>
       <el-container
@@ -87,8 +87,8 @@
             >
               {{
                 isEditPage
-                  ? 'Update config'
-                  : 'Add config'
+                  ? 'Update organization'
+                  : 'Add organization'
               }}
             </el-button>
           </div>
@@ -393,9 +393,9 @@ async function onSubmit() {
         payload.id,
         payload.values,
       );
-      Message.success(i18n('entities.config.update.success'));
+      Message.success(i18n('entities.organization.update.success'));
     } catch (error) {
-      Message.error(i18n('entities.config.update.error'));
+      Message.error(i18n('entities.organization.update.error'));
 
       Errors.handle(error);
     }
@@ -404,9 +404,9 @@ async function onSubmit() {
     try {
       await OrganizationService.create(payload);
 
-      Message.success(i18n('entities.config.create.success'));
+      Message.success(i18n('entities.organization.create.success'));
     } catch (error) {
-      Message.error(i18n('entities.config.create.error'));
+      Message.error(i18n('entities.organization.create.error'));
       Errors.handle(error);
     }
   }
diff --git a/frontend/src/modules/organization/pages/organization-list-page.vue b/frontend/src/modules/organization/pages/organization-list-page.vue
index 6132300e4c..288f1eadfd 100644
--- a/frontend/src/modules/organization/pages/organization-list-page.vue
+++ b/frontend/src/modules/organization/pages/organization-list-page.vue
@@ -37,7 +37,7 @@
                 class="btn btn--primary btn--md"
                 :disabled="isCreateLockedForSampleData"
               >
-                Add config
+                Add organization
               </el-button>
             </router-link>
           </div>
diff --git a/frontend/src/modules/widget/components/cube/_query_builder/DimensionSelect.vue b/frontend/src/modules/widget/components/cube/_query_builder/DimensionSelect.vue
index 961bb9176e..f99ab1a0d2 100644
--- a/frontend/src/modules/widget/components/cube/_query_builder/DimensionSelect.vue
+++ b/frontend/src/modules/widget/components/cube/_query_builder/DimensionSelect.vue
@@ -69,7 +69,7 @@ export default {
           'Members.score',
           'Members.location',
           'Members.joinedAt',
-          'Members.config',
+          'Members.organization',
           'Segments.name',
           'Tags.name',
         ],
@@ -81,7 +81,7 @@ export default {
           'Members.score',
           'Members.location',
           'Members.joinedAt',
-          'Members.config',
+          'Members.organization',
           'Tags.name',
         ],
         'Members.count': [
@@ -92,7 +92,7 @@ export default {
           'Members.score',
           'Members.location',
           'Members.joinedAt',
-          'Members.config',
+          'Members.organization',
           'Tags.name',
         ],
         'Members.cumulativeCount': [
@@ -103,7 +103,7 @@ export default {
           'Members.score',
           'Members.location',
           'Members.joinedAt',
-          'Members.config',
+          'Members.organization',
           'Tags.name',
         ],
         'Conversations.count': [
@@ -119,7 +119,7 @@ export default {
           'Members.score',
           'Members.location',
           'Members.joinedAt',
-          'Members.config',
+          'Members.organization',
           'Tags.name',
         ],
         'Sentiment.averageSentiment': ['Sentiment.platform'],
@@ -131,7 +131,7 @@ export default {
           'Members.score',
           'Members.location',
           'Members.joinedAt',
-          'Members.config',
+          'Members.organization',
           'Organizations.createdat',
           'Tags.name',
         ],
diff --git a/frontend/src/modules/widget/components/cube/_query_builder/FilterComponent.vue b/frontend/src/modules/widget/components/cube/_query_builder/FilterComponent.vue
index 5452f02858..90b1ec1838 100644
--- a/frontend/src/modules/widget/components/cube/_query_builder/FilterComponent.vue
+++ b/frontend/src/modules/widget/components/cube/_query_builder/FilterComponent.vue
@@ -274,7 +274,7 @@ export default {
             'Members.score',
             'Members.joinedAt',
             'Members.location',
-            'Members.config',
+            'Members.organization',
           ],
           Tags: ['Tags.name'],
         },
@@ -292,7 +292,7 @@ export default {
             'Members.score',
             'Members.joinedAt',
             'Members.location',
-            'Members.config',
+            'Members.organization',
           ],
           Tags: ['Tags.name'],
         },
@@ -301,7 +301,7 @@ export default {
             'Members.score',
             'Members.joinedAt',
             'Members.location',
-            'Members.config',
+            'Members.organization',
           ],
           Activities: [
             'Activities.platform',
@@ -311,7 +311,7 @@ export default {
           Members: [
             'Members.score',
             'Members.location',
-            'Members.config',
+            'Members.organization',
           ],
           Tags: ['Tags.name'],
         },
@@ -320,7 +320,7 @@ export default {
             'Members.score',
             'Members.joinedAt',
             'Members.location',
-            'Members.config',
+            'Members.organization',
           ],
           Activities: [
             'Activities.platform',
@@ -330,7 +330,7 @@ export default {
           Members: [
             'Members.score',
             'Members.location',
-            'Members.config',
+            'Members.organization',
           ],
           Tags: ['Tags.name'],
         },

From 522a93445f1967c33c318c880ed1a649ff7869f5 Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Tue, 17 Oct 2023 12:38:38 +0700
Subject: [PATCH 12/22] Fix refactor issue

---
 .../modules/member/config/saved-views/settings/bot/config.ts  | 4 ++--
 .../member/config/saved-views/settings/organization/config.ts | 4 ++--
 .../member/config/saved-views/settings/teamMember/config.ts   | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/modules/member/config/saved-views/settings/bot/config.ts b/frontend/src/modules/member/config/saved-views/settings/bot/config.ts
index bd1100e7cf..955c728568 100644
--- a/frontend/src/modules/member/config/saved-views/settings/bot/config.ts
+++ b/frontend/src/modules/member/config/saved-views/settings/bot/config.ts
@@ -3,7 +3,7 @@ import { IncludeEnum } from '@/modules/member/config/saved-views/settings/common
 import { includeFilterRenderer } from '@/modules/member/config/saved-views/settings/common/includeFilterRenderer';
 import MemberBotSetting from './MemberBotSetting.vue';
 
-const config: SavedViewsSetting<IncludeEnum> = {
+const bot: SavedViewsSetting<IncludeEnum> = {
   inSettings: true,
   settingsComponent: MemberBotSetting,
   defaultValue: IncludeEnum.EXCLUDE,
@@ -15,4 +15,4 @@ const config: SavedViewsSetting<IncludeEnum> = {
   },
 };
 
-export default config;
+export default bot;
diff --git a/frontend/src/modules/member/config/saved-views/settings/organization/config.ts b/frontend/src/modules/member/config/saved-views/settings/organization/config.ts
index 7997969efd..34460de9ce 100644
--- a/frontend/src/modules/member/config/saved-views/settings/organization/config.ts
+++ b/frontend/src/modules/member/config/saved-views/settings/organization/config.ts
@@ -2,7 +2,7 @@ import { SavedViewsSetting } from '@/shared/modules/saved-views/types/SavedViews
 import { includeFilterRenderer } from '@/modules/member/config/saved-views/settings/common/includeFilterRenderer';
 import { IncludeEnum } from '@/modules/member/config/saved-views/settings/common/types/IncludeEnum';
 
-const config: SavedViewsSetting<IncludeEnum> = {
+const organization: SavedViewsSetting<IncludeEnum> = {
   inSettings: false,
   defaultValue: IncludeEnum.EXCLUDE,
   queryUrlParser(value: string): IncludeEnum {
@@ -13,4 +13,4 @@ const config: SavedViewsSetting<IncludeEnum> = {
   },
 };
 
-export default config;
+export default organization;
diff --git a/frontend/src/modules/member/config/saved-views/settings/teamMember/config.ts b/frontend/src/modules/member/config/saved-views/settings/teamMember/config.ts
index 1d9d0d66cc..c408492226 100644
--- a/frontend/src/modules/member/config/saved-views/settings/teamMember/config.ts
+++ b/frontend/src/modules/member/config/saved-views/settings/teamMember/config.ts
@@ -3,7 +3,7 @@ import { includeFilterRenderer } from '@/modules/member/config/saved-views/setti
 import { IncludeEnum } from '@/modules/member/config/saved-views/settings/common/types/IncludeEnum';
 import MemberTeamMemberSetting from './MemberTeamMemberSetting.vue';
 
-const config: SavedViewsSetting<IncludeEnum> = {
+const teamMember: SavedViewsSetting<IncludeEnum> = {
   inSettings: true,
   settingsComponent: MemberTeamMemberSetting,
   defaultValue: IncludeEnum.EXCLUDE,
@@ -15,4 +15,4 @@ const config: SavedViewsSetting<IncludeEnum> = {
   },
 };
 
-export default config;
+export default teamMember;

From a1fa151e051e7a121d066278b3aa0d73be5d8f7a Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Tue, 17 Oct 2023 14:02:54 +0700
Subject: [PATCH 13/22] Align with backend

---
 .../src/shared/modules/saved-views/components/SavedViews.vue  | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/shared/modules/saved-views/components/SavedViews.vue b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
index 6f561db5dd..84d742b923 100644
--- a/frontend/src/shared/modules/saved-views/components/SavedViews.vue
+++ b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
@@ -214,9 +214,7 @@ const getViews = () => {
     return;
   }
   SavedViewsService.query({
-    filter: {
-      placement: [props.placement],
-    },
+    placement: [props.placement],
   })
     .then((res: SavedView[]) => {
       views.value = [];

From 020356279d106d0bbcb446de97e56a7d8c5af2ac Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Wed, 18 Oct 2023 10:55:28 +0700
Subject: [PATCH 14/22] Fix yearly date pickers

---
 .../modules/filters/components/FilterItem.vue |   2 +-
 .../components/filterTypes/DateFilter.vue     | 114 ++++++++++++------
 .../apiFilterRenderer/date.filter.renderer.ts |  21 ++--
 .../config/constants/date.constants.ts        |  23 ++++
 .../itemLabelRenderer/date.label.renderer.ts  |  24 +++-
 .../filters/types/FilterTimeOptions.ts        |   5 +
 6 files changed, 141 insertions(+), 48 deletions(-)
 create mode 100644 frontend/src/shared/modules/filters/types/FilterTimeOptions.ts

diff --git a/frontend/src/shared/modules/filters/components/FilterItem.vue b/frontend/src/shared/modules/filters/components/FilterItem.vue
index 9495aa39ad..9c813aa851 100644
--- a/frontend/src/shared/modules/filters/components/FilterItem.vue
+++ b/frontend/src/shared/modules/filters/components/FilterItem.vue
@@ -5,7 +5,7 @@
       v-model:visible="isOpen"
       teleported
       placement="bottom-start"
-      width="320"
+      width="420"
       trigger="click"
       :popper-class="`!p-0 filter-list-item-popper filter-${props.config.type} filter-${props.config.id}`"
     >
diff --git a/frontend/src/shared/modules/filters/components/filterTypes/DateFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/DateFilter.vue
index 59be40f215..6746bafb13 100644
--- a/frontend/src/shared/modules/filters/components/filterTypes/DateFilter.vue
+++ b/frontend/src/shared/modules/filters/components/filterTypes/DateFilter.vue
@@ -1,25 +1,57 @@
 <template>
   <div v-if="form">
-    <div class="p-4 pb-5">
-      <cr-filter-inline-select
-        v-model="form.operator"
-        :prefix="`${props.config.label}:`"
-        class="mb-3"
-        :options="operators"
-      />
-      <div class="filter-date-field" data-qa="filter-date-input">
+    <div class="p-4">
+      <div v-if="!props.datepickerType || props.datepickerType === 'date'">
+        <el-select
+          v-model="timePicker"
+          placeholder="Select property"
+          class="w-full"
+          placement="bottom-end"
+          :teleported="false"
+        >
+          <template #prefix>
+            <span class="!text-sm !text-gray-400">When:</span>
+          </template>
+          <el-option
+            v-for="time of dateFilterTimePickerOptions"
+            :key="time.value"
+            :value="time.value"
+            :label="time.label"
+          />
+          <el-option
+            value="custom"
+            label="Custom"
+          />
+        </el-select>
+      </div>
+      <div v-if="isCustom" class="flex items-start" :class="!props.datepickerType || props.datepickerType === 'date' ? 'pt-4' : ''">
+        <el-select
+          v-model="form.operator"
+          class="min-w-[7rem] w-28 operator-select"
+          placement="bottom-start"
+          :teleported="false"
+        >
+          <el-option
+            v-for="operator of operators"
+            :key="operator.value"
+            :value="operator.value"
+            :label="operator.label"
+          />
+        </el-select>
         <el-date-picker
           v-model="form.value"
           :placeholder="isBetween ? 'Select date range' : 'Select date'"
           :value-format="props.dateFormat ?? 'YYYY-MM-DD'"
           :format="props.dateFormat ?? 'YYYY-MM-DD'"
           popper-class="date-picker-popper"
+          class="datepicker-input !w-full"
           v-bind="betweenProps"
           :teleported="false"
           @blur="$v.value.$touch"
           @change="$v.value.$touch"
         />
       </div>
+      <div class="filter-date-field" data-qa="filter-date-input" />
     </div>
   </div>
 </template>
@@ -33,8 +65,11 @@ import {
 } from '@/shared/modules/filters/types/filterTypes/DateFilterConfig';
 import { required } from '@vuelidate/validators';
 import useVuelidate from '@vuelidate/core';
-import { dateFilterOperators, FilterDateOperator } from '@/shared/modules/filters/config/constants/date.constants';
-import CrFilterInlineSelect from '@/shared/modules/filters/components/partials/FilterInlineSelect.vue';
+import {
+  dateFilterOperators,
+  dateFilterTimePickerOptions,
+  FilterDateOperator,
+} from '@/shared/modules/filters/config/constants/date.constants';
 
 const props = defineProps<{
   modelValue: DateFilterValue,
@@ -62,7 +97,35 @@ const rules: any = {
   },
 };
 
-const checkIfBetween = (operator) => [FilterDateOperator.BETWEEN, FilterDateOperator.NOT_BETWEEN].includes(operator);
+const $v = useVuelidate(rules, form);
+
+const timePickerOptionValues = dateFilterTimePickerOptions.map((v) => v.value);
+
+const timePicker = computed({
+  get() {
+    if (typeof form.value.value === 'string' && timePickerOptionValues.includes(form.value.value)) {
+      return form.value.value;
+    }
+    return 'custom';
+  },
+  set(value: string) {
+    if (timePickerOptionValues.includes(value)) {
+      form.value = {
+        value,
+        operator: FilterDateOperator.GT,
+      };
+    } else {
+      form.value = {
+        value: '',
+        operator: FilterDateOperator.EQ,
+      };
+    }
+  },
+});
+
+const isCustom = computed(() => !(typeof form.value.value === 'string' && timePickerOptionValues.includes(form.value.value)));
+
+const checkIfBetween = (operator: string) => [FilterDateOperator.BETWEEN, FilterDateOperator.NOT_BETWEEN].includes(operator);
 
 const isBetween = computed(() => checkIfBetween(form.value.operator));
 
@@ -73,8 +136,6 @@ const operators = computed(() => {
   return dateFilterOperators;
 });
 
-const $v = useVuelidate(rules, form);
-
 const betweenProps = computed(() => (!isBetween.value
   ? {
     type: props.datepickerType ?? 'date',
@@ -109,30 +170,15 @@ export default {
 </script>
 
 <style lang="scss">
-.filter-date-field {
-  .el-input__wrapper,
-  .el-input__wrapper.is-focus,
-  .el-input__wrapper:hover {
-    @apply bg-gray-50 shadow-none rounded-md border border-gray-50 transition w-full #{!important};
-
-    input {
-      &,
-      &:hover,
-      &:focus {
-        border: none !important;
-        @apply bg-gray-50 shadow-none outline-none h-full min-h-8;
-      }
-    }
+.operator-select{
+  .el-input__wrapper{
+    @apply rounded-r-none border-r-0 #{!important};
   }
 }
 
-.el-form-item.is-error {
-  .filter-date-field {
-    .el-input__wrapper,
-    .el-input__wrapper.is-focus,
-    .el-input__wrapper:hover{
-      border-color: var(--el-color-danger) !important;
-    }
+.datepicker-input {
+  &, .el-input__wrapper{
+    @apply w-full h-10 rounded-l-none #{!important};
   }
 }
 </style>
diff --git a/frontend/src/shared/modules/filters/config/apiFilterRenderer/date.filter.renderer.ts b/frontend/src/shared/modules/filters/config/apiFilterRenderer/date.filter.renderer.ts
index 3c05d3b821..d38b8ffca6 100644
--- a/frontend/src/shared/modules/filters/config/apiFilterRenderer/date.filter.renderer.ts
+++ b/frontend/src/shared/modules/filters/config/apiFilterRenderer/date.filter.renderer.ts
@@ -1,8 +1,15 @@
 import { DateFilterValue } from '@/shared/modules/filters/types/filterTypes/DateFilterConfig';
-import { FilterDateOperator } from '@/shared/modules/filters/config/constants/date.constants';
+import {
+  dateFilterTimePickerOptions,
+  FilterDateOperator,
+} from '@/shared/modules/filters/config/constants/date.constants';
 import moment from 'moment';
 
 export const dateApiFilterRenderer = (property: string, { value, operator }: DateFilterValue): any[] => {
+  const dateOption = dateFilterTimePickerOptions.find((option) => option.value === value);
+
+  const mappedValue = dateOption ? dateOption.getDate() : value;
+
   const includeFilter = ![FilterDateOperator.NE, FilterDateOperator.NOT_BETWEEN].includes(operator);
   let filterOperator = operator;
 
@@ -18,8 +25,8 @@ export const dateApiFilterRenderer = (property: string, { value, operator }: Dat
     filter = {
       [property]: {
         [filterOperator]: [
-          moment.utc(value[0]).startOf('day').toISOString(),
-          moment.utc(value[1]).endOf('day').toISOString(),
+          moment.utc(mappedValue[0]).startOf('day').toISOString(),
+          moment.utc(mappedValue[1]).endOf('day').toISOString(),
         ],
       },
     };
@@ -27,16 +34,16 @@ export const dateApiFilterRenderer = (property: string, { value, operator }: Dat
     filter = {
       [property]: {
         between: [
-          moment.utc(value).startOf('day').toISOString(),
-          moment.utc(value).endOf('day').toISOString(),
+          moment.utc(mappedValue).startOf('day').toISOString(),
+          moment.utc(mappedValue).endOf('day').toISOString(),
         ],
       },
     };
   } else {
-    let parsedValue = moment.utc(value).startOf('day').toISOString();
+    let parsedValue = moment.utc(mappedValue).startOf('day').toISOString();
 
     if ([FilterDateOperator.GT].includes(operator)) {
-      parsedValue = moment.utc(value).endOf('day').toISOString();
+      parsedValue = moment.utc(mappedValue).endOf('day').toISOString();
     }
 
     filter = {
diff --git a/frontend/src/shared/modules/filters/config/constants/date.constants.ts b/frontend/src/shared/modules/filters/config/constants/date.constants.ts
index 794a2e1569..1b4ee710eb 100644
--- a/frontend/src/shared/modules/filters/config/constants/date.constants.ts
+++ b/frontend/src/shared/modules/filters/config/constants/date.constants.ts
@@ -1,4 +1,6 @@
 import { FilterOperator } from '@/shared/modules/filters/types/FilterOperator';
+import { FilterTimeOptions } from '@/shared/modules/filters/types/FilterTimeOptions';
+import moment from 'moment/moment';
 
 export enum FilterDateOperator {
   EQ = 'eq',
@@ -35,3 +37,24 @@ export const dateFilterOperators: FilterOperator[] = [
     value: FilterDateOperator.NOT_BETWEEN,
   },
 ];
+
+export const dateFilterTimePickerOptions: FilterTimeOptions[] = [
+  {
+    value: 'lastweek',
+    label: 'Last week',
+    getDate: () => moment().subtract(1, 'week').format('YYYY-MM-DD'),
+
+  },
+  {
+    value: 'lastmonth',
+    label: 'Last month',
+    getDate: () => moment().subtract(1, 'month').format('YYYY-MM-DD'),
+
+  },
+  {
+    value: 'lastyear',
+    label: 'Last year',
+    getDate: () => moment().subtract(1, 'year').format('YYYY-MM-DD'),
+
+  },
+];
diff --git a/frontend/src/shared/modules/filters/config/itemLabelRenderer/date.label.renderer.ts b/frontend/src/shared/modules/filters/config/itemLabelRenderer/date.label.renderer.ts
index 98b0721280..1436eb2108 100644
--- a/frontend/src/shared/modules/filters/config/itemLabelRenderer/date.label.renderer.ts
+++ b/frontend/src/shared/modules/filters/config/itemLabelRenderer/date.label.renderer.ts
@@ -1,5 +1,8 @@
 import { DateFilterValue } from '@/shared/modules/filters/types/filterTypes/DateFilterConfig';
-import { FilterDateOperator } from '@/shared/modules/filters/config/constants/date.constants';
+import {
+  dateFilterTimePickerOptions,
+  FilterDateOperator,
+} from '@/shared/modules/filters/config/constants/date.constants';
 
 const operatorText: Record<FilterDateOperator, string> = {
   [FilterDateOperator.EQ]: '',
@@ -11,11 +14,20 @@ const operatorText: Record<FilterDateOperator, string> = {
 };
 
 export const dateItemLabelRenderer = (property: string, { value, operator }: DateFilterValue): string => {
+  const dateOption = dateFilterTimePickerOptions.find((option) => option.value === value);
   let valueText = `${value}`;
-  const isBetween = [FilterDateOperator.BETWEEN, FilterDateOperator.NOT_BETWEEN].includes(operator);
-  if (isBetween) {
-    const [from, to] = value;
-    valueText = `${from}<span class="ri-arrow-right-line text-base ml-1">&nbsp;</span>${to}`;
+  let operatorTextDisplay = operatorText[operator].length > 0 ? `${operatorText[operator]} ` : '';
+
+  if (dateOption) {
+    valueText = dateOption.label.toLowerCase();
+    operatorTextDisplay = 'in ';
+  } else {
+    const isBetween = [FilterDateOperator.BETWEEN, FilterDateOperator.NOT_BETWEEN].includes(operator);
+    if (isBetween) {
+      const [from, to] = value;
+      valueText = `${from}<span class="ri-arrow-right-line text-base ml-1">&nbsp;</span>${to}`;
+    }
   }
-  return `<b>${property}:</b>${operatorText[operator].length > 0 ? `${operatorText[operator]} ` : ''}${valueText || '...'}`;
+
+  return `<b>${property}:</b>${operatorTextDisplay}${valueText || '...'}`;
 };
diff --git a/frontend/src/shared/modules/filters/types/FilterTimeOptions.ts b/frontend/src/shared/modules/filters/types/FilterTimeOptions.ts
new file mode 100644
index 0000000000..843dde30b2
--- /dev/null
+++ b/frontend/src/shared/modules/filters/types/FilterTimeOptions.ts
@@ -0,0 +1,5 @@
+export interface FilterTimeOptions {
+  value: string;
+  label: string;
+  getDate: () => string;
+}

From 4c969bae4120e716aefc7919b0d4f4e3294d6b13 Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Wed, 18 Oct 2023 15:43:46 +0700
Subject: [PATCH 15/22] Fix values of time options

---
 .../modules/filters/config/constants/date.constants.ts      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/shared/modules/filters/config/constants/date.constants.ts b/frontend/src/shared/modules/filters/config/constants/date.constants.ts
index 1b4ee710eb..1d8cc241c3 100644
--- a/frontend/src/shared/modules/filters/config/constants/date.constants.ts
+++ b/frontend/src/shared/modules/filters/config/constants/date.constants.ts
@@ -40,19 +40,19 @@ export const dateFilterOperators: FilterOperator[] = [
 
 export const dateFilterTimePickerOptions: FilterTimeOptions[] = [
   {
-    value: 'lastweek',
+    value: 'lastWeek',
     label: 'Last week',
     getDate: () => moment().subtract(1, 'week').format('YYYY-MM-DD'),
 
   },
   {
-    value: 'lastmonth',
+    value: 'lastMonth',
     label: 'Last month',
     getDate: () => moment().subtract(1, 'month').format('YYYY-MM-DD'),
 
   },
   {
-    value: 'lastyear',
+    value: 'lastYear',
     label: 'Last year',
     getDate: () => moment().subtract(1, 'year').format('YYYY-MM-DD'),
 

From bfd92831a82ba71e229ff31ed41f7384fb6574f4 Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Thu, 19 Oct 2023 11:31:39 +0700
Subject: [PATCH 16/22] Bug fixing and improvements

---
 .../modules/member/config/saved-views/main.ts |  2 +-
 .../settings/bot/MemberBotSetting.vue         | 16 ++-----
 .../teamMember/MemberTeamMemberSetting.vue    | 18 ++------
 .../src/modules/member/store/pinia/state.ts   |  2 +-
 .../OrganizationTeamOrganizationSetting.vue   | 10 -----
 .../modules/organization/store/pinia/state.ts |  2 +-
 .../components/filterTypes/DateFilter.vue     |  8 ++--
 .../config/constants/date.constants.ts        | 22 +++++-----
 .../components/SavedViewManagement.vue        | 42 +++++++++++--------
 .../saved-views/components/SavedViews.vue     | 13 ++++--
 .../components/forms/SavedViewForm.vue        | 21 ++++++----
 11 files changed, 72 insertions(+), 84 deletions(-)

diff --git a/frontend/src/modules/member/config/saved-views/main.ts b/frontend/src/modules/member/config/saved-views/main.ts
index 169be4d7ec..9f9b029317 100644
--- a/frontend/src/modules/member/config/saved-views/main.ts
+++ b/frontend/src/modules/member/config/saved-views/main.ts
@@ -18,7 +18,7 @@ export const memberSavedViews: SavedViewsConfig = {
     organization,
   },
   sorting: {
-    displayName: 'Member',
+    displayName: 'Contact',
     activityCount: '# of activities',
     score: 'Engagement level',
     lastActive: 'Last activity',
diff --git a/frontend/src/modules/member/config/saved-views/settings/bot/MemberBotSetting.vue b/frontend/src/modules/member/config/saved-views/settings/bot/MemberBotSetting.vue
index 960a163e41..23d2b54d1e 100644
--- a/frontend/src/modules/member/config/saved-views/settings/bot/MemberBotSetting.vue
+++ b/frontend/src/modules/member/config/saved-views/settings/bot/MemberBotSetting.vue
@@ -1,14 +1,14 @@
 <template>
   <article>
     <p class="text-xs font-semibold leading-5 mb-3">
-      Bot members visibility
+      Bot contacts visibility
     </p>
     <el-radio-group v-model="value">
       <el-radio :label="IncludeEnum.EXCLUDE" class="!h-5">
-        <span class="text-xs">Exclude bot members</span>
+        <span class="text-xs">Exclude bot contacts</span>
       </el-radio>
       <el-radio :label="IncludeEnum.INCLUDE" class="!h-5">
-        <span class="text-xs">Include bot members</span>
+        <span class="text-xs">Include bot contacts</span>
       </el-radio>
     </el-radio-group>
   </article>
@@ -39,13 +39,3 @@ export default {
   name: 'CrMemberTeamMemberSetting',
 };
 </script>
-
-<style lang="scss" scoped>
-.tabs {
-  width: calc(100% - 72px);
-
-  &.is-shrink{
-    width: calc(100% - 262px);
-  }
-}
-</style>
diff --git a/frontend/src/modules/member/config/saved-views/settings/teamMember/MemberTeamMemberSetting.vue b/frontend/src/modules/member/config/saved-views/settings/teamMember/MemberTeamMemberSetting.vue
index e5da34ee22..de1fc8ce73 100644
--- a/frontend/src/modules/member/config/saved-views/settings/teamMember/MemberTeamMemberSetting.vue
+++ b/frontend/src/modules/member/config/saved-views/settings/teamMember/MemberTeamMemberSetting.vue
@@ -1,17 +1,17 @@
 <template>
   <article>
     <p class="text-xs font-semibold leading-5 mb-3">
-      Team members visibility
+      Team contacts visibility
     </p>
     <el-radio-group v-model="value">
       <el-radio :label="IncludeEnum.EXCLUDE" class="!h-5">
-        <span class="text-xs">Exclude team members</span>
+        <span class="text-xs">Exclude team contacts</span>
       </el-radio>
       <el-radio :label="IncludeEnum.INCLUDE" class="!h-5">
-        <span class="text-xs">Include team members</span>
+        <span class="text-xs">Include team contacts</span>
       </el-radio>
       <el-radio :label="IncludeEnum.FILTER" class="!h-5">
-        <span class="text-xs">Team members only</span>
+        <span class="text-xs">Team contacts only</span>
       </el-radio>
     </el-radio-group>
   </article>
@@ -42,13 +42,3 @@ export default {
   name: 'CrMemberTeamMemberSetting',
 };
 </script>
-
-<style lang="scss" scoped>
-.tabs {
-  width: calc(100% - 72px);
-
-  &.is-shrink{
-    width: calc(100% - 262px);
-  }
-}
-</style>
diff --git a/frontend/src/modules/member/store/pinia/state.ts b/frontend/src/modules/member/store/pinia/state.ts
index d7c1ad2089..677b17f001 100644
--- a/frontend/src/modules/member/store/pinia/state.ts
+++ b/frontend/src/modules/member/store/pinia/state.ts
@@ -15,7 +15,7 @@ export interface MemberState {
 
 const state: MemberState = {
   filters: {
-    ...allContacts.filter,
+    ...allContacts.config,
   },
   savedFilterBody: {},
   customAttributes: [],
diff --git a/frontend/src/modules/organization/config/saved-views/settings/teamOrganization/OrganizationTeamOrganizationSetting.vue b/frontend/src/modules/organization/config/saved-views/settings/teamOrganization/OrganizationTeamOrganizationSetting.vue
index 7531885f64..370f70b9aa 100644
--- a/frontend/src/modules/organization/config/saved-views/settings/teamOrganization/OrganizationTeamOrganizationSetting.vue
+++ b/frontend/src/modules/organization/config/saved-views/settings/teamOrganization/OrganizationTeamOrganizationSetting.vue
@@ -42,13 +42,3 @@ export default {
   name: 'CrMemberTeamMemberSetting',
 };
 </script>
-
-<style lang="scss" scoped>
-.tabs {
-  width: calc(100% - 72px);
-
-  &.is-shrink{
-    width: calc(100% - 262px);
-  }
-}
-</style>
diff --git a/frontend/src/modules/organization/store/pinia/state.ts b/frontend/src/modules/organization/store/pinia/state.ts
index f57b3d80f9..be327c0a7b 100644
--- a/frontend/src/modules/organization/store/pinia/state.ts
+++ b/frontend/src/modules/organization/store/pinia/state.ts
@@ -13,7 +13,7 @@ export interface OrganizationState {
 
 const state: OrganizationState = {
   filters: {
-    ...allOrganizations.filter,
+    ...allOrganizations.config,
   },
   savedFilterBody: {},
   organizations: [],
diff --git a/frontend/src/shared/modules/filters/components/filterTypes/DateFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/DateFilter.vue
index 6746bafb13..134130e316 100644
--- a/frontend/src/shared/modules/filters/components/filterTypes/DateFilter.vue
+++ b/frontend/src/shared/modules/filters/components/filterTypes/DateFilter.vue
@@ -10,7 +10,7 @@
           :teleported="false"
         >
           <template #prefix>
-            <span class="!text-sm !text-gray-400">When:</span>
+            <span class="!text-sm !text-gray-400 leading-5">When:</span>
           </template>
           <el-option
             v-for="time of dateFilterTimePickerOptions"
@@ -27,7 +27,7 @@
       <div v-if="isCustom" class="flex items-start" :class="!props.datepickerType || props.datepickerType === 'date' ? 'pt-4' : ''">
         <el-select
           v-model="form.operator"
-          class="min-w-[7rem] w-28 operator-select"
+          class="operator-select"
           placement="bottom-start"
           :teleported="false"
         >
@@ -172,13 +172,13 @@ export default {
 <style lang="scss">
 .operator-select{
   .el-input__wrapper{
-    @apply rounded-r-none border-r-0 #{!important};
+    @apply rounded-r-none border-r-0 h-10 #{!important};
   }
 }
 
 .datepicker-input {
   &, .el-input__wrapper{
-    @apply w-full h-10 rounded-l-none #{!important};
+    @apply w-full h-10 rounded-l-none h-10 #{!important};
   }
 }
 </style>
diff --git a/frontend/src/shared/modules/filters/config/constants/date.constants.ts b/frontend/src/shared/modules/filters/config/constants/date.constants.ts
index 1d8cc241c3..da2a16f519 100644
--- a/frontend/src/shared/modules/filters/config/constants/date.constants.ts
+++ b/frontend/src/shared/modules/filters/config/constants/date.constants.ts
@@ -40,21 +40,23 @@ export const dateFilterOperators: FilterOperator[] = [
 
 export const dateFilterTimePickerOptions: FilterTimeOptions[] = [
   {
-    value: 'lastWeek',
-    label: 'Last week',
+    value: 'last7days',
+    label: 'Last 7 days',
     getDate: () => moment().subtract(1, 'week').format('YYYY-MM-DD'),
-
+  },
+  {
+    value: 'last14days',
+    label: 'Last 14 days',
+    getDate: () => moment().subtract(14, 'day').format('YYYY-MM-DD'),
   },
   {
     value: 'lastMonth',
-    label: 'Last month',
-    getDate: () => moment().subtract(1, 'month').format('YYYY-MM-DD'),
-
+    label: 'Last 30 days',
+    getDate: () => moment().subtract(30, 'day').format('YYYY-MM-DD'),
   },
   {
-    value: 'lastYear',
-    label: 'Last year',
-    getDate: () => moment().subtract(1, 'year').format('YYYY-MM-DD'),
-
+    value: 'last90days',
+    label: 'Last 90 days',
+    getDate: () => moment().subtract(90, 'day').format('YYYY-MM-DD'),
   },
 ];
diff --git a/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue b/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue
index 3de5f020cd..b4b88dda1d 100644
--- a/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue
+++ b/frontend/src/shared/modules/saved-views/components/SavedViewManagement.vue
@@ -23,24 +23,30 @@
             <span class="text-sm leading-5 text-black">{{ view.name }}</span>
           </div>
           <div class="flex items-center">
-            <div
-              class="h-6 w-6 flex items-center justify-center ml-1 group cursor-pointer"
-              @click="edit(view)"
-            >
-              <i class="ri-pencil-line text-sm text-gray-400 group-hover:text-gray-600" />
-            </div>
-            <div
-              class="h-6 w-6 flex items-center justify-center ml-1 group cursor-pointer"
-              @click="duplicate(view)"
-            >
-              <i class="ri-file-copy-line text-sm text-gray-400 group-hover:text-gray-600" />
-            </div>
-            <div
-              class="h-6 w-6 flex items-center justify-center ml-1 group cursor-pointer"
-              @click="remove(view)"
-            >
-              <i class="ri-delete-bin-line text-sm text-gray-400 group-hover:text-gray-600" />
-            </div>
+            <el-tooltip placement="top" content="Edit view">
+              <div
+                class="h-6 w-6 flex items-center justify-center ml-1 group cursor-pointer hover:bg-gray-100 rounded"
+                @click="edit(view)"
+              >
+                <i class="ri-pencil-line text-sm text-gray-400 group-hover:text-gray-600" />
+              </div>
+            </el-tooltip>
+            <el-tooltip placement="top" content="Duplicate view">
+              <div
+                class="h-6 w-6 flex items-center justify-center ml-1 group cursor-pointer hover:bg-gray-100 rounded"
+                @click="duplicate(view)"
+              >
+                <i class="ri-file-copy-line text-sm text-gray-400 group-hover:text-gray-600" />
+              </div>
+            </el-tooltip>
+            <el-tooltip placement="top" content="Delete view">
+              <div
+                class="h-6 w-6 flex items-center justify-center ml-1 group cursor-pointer hover:bg-gray-100 rounded"
+                @click="remove(view)"
+              >
+                <i class="ri-delete-bin-line text-sm text-gray-400 group-hover:text-gray-600" />
+              </div>
+            </el-tooltip>
           </div>
         </article>
       </vue-draggable-next>
diff --git a/frontend/src/shared/modules/saved-views/components/SavedViews.vue b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
index 84d742b923..b63ef89083 100644
--- a/frontend/src/shared/modules/saved-views/components/SavedViews.vue
+++ b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
@@ -24,7 +24,7 @@
       </el-dropdown>
     </div>
     <div id="tabs" class="tabs flex-grow" :class="{ 'is-shrink': hasChanged }">
-      <el-tabs v-if="views.length > 0" v-model="selectedTab" @tab-change="onTabChange($event)">
+      <el-tabs v-model="selectedTab" @tab-change="onTabChange($event)">
         <el-tab-pane
           :label="props.config.defaultView.name"
           name=""
@@ -64,7 +64,7 @@
           <i class="ri-add-line text-lg text-gray-400 h-5 flex items-center" />
         </el-button>
       </el-tooltip>
-      <el-popover v-if="views.length > 0" trigger="click" placement="bottom-end" popper-class="!p-0" width="320px">
+      <el-popover trigger="click" placement="bottom-end" popper-class="!p-0" width="320px">
         <template #reference>
           <el-button class="btn btn-brand btn--transparent btn--icon--sm inset-y-0 !border-0">
             <i class="ri-list-settings-line text-lg text-gray-400 h-5 flex items-center" />
@@ -194,7 +194,7 @@ const reset = () => {
 };
 
 // Change tab if filters match
-watch(() => props.modelValue, (filter: Filter) => {
+const checkIfTabConfigMatch = () => {
   if (compareFilterToCurrentValues(props.config.defaultView.config)) {
     selectedTab.value = '';
     return;
@@ -203,6 +203,10 @@ watch(() => props.modelValue, (filter: Filter) => {
   if (matchingView) {
     selectedTab.value = matchingView.id;
   }
+};
+
+watch(() => props.modelValue, () => {
+  checkIfTabConfigMatch();
 }, { deep: true });
 
 // View management
@@ -221,6 +225,7 @@ const getViews = () => {
       setTimeout(() => {
         views.value = [...res];
         checkIfScrollableTabs();
+        checkIfTabConfigMatch();
       }, 0);
     })
     .catch(() => {
@@ -293,7 +298,7 @@ export default {
   width: calc(100% - 72px);
 
   &.is-shrink{
-    width: calc(100% - 262px);
+    width: calc(100% - 303px);
   }
 }
 </style>
diff --git a/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue b/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
index d5cd9702e1..94876bb081 100644
--- a/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
+++ b/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
@@ -179,7 +179,8 @@
           type="primary"
           class="btn btn--md btn--primary"
           :loading="sending"
-          :disabled="$v.$invalid"
+          :disabled="$v.$invalid
+            || !hasFormChanged"
           @click="submit()"
         >
           {{ isEdit ? 'Update' : 'Add view' }}
@@ -203,6 +204,7 @@ import CrFilterItem from '@/shared/modules/filters/components/FilterItem.vue';
 import { SavedViewsService } from '@/shared/modules/saved-views/services/saved-views.service';
 import Message from '@/shared/message/message';
 import ConfirmDialog from '@/shared/dialog/confirm-dialog';
+import formChangeDetector from '@/shared/form/form-change';
 
 const props = defineProps<{
   modelValue: boolean,
@@ -265,8 +267,8 @@ const form = reactive<SavedViewForm>({
   filters: {},
   settings: { ...settingsDefaultValue.value },
   sorting: {
-    prop: props.config.defaultView.config.order.prop,
-    order: props.config.defaultView.config.order.order,
+    prop: Object.keys(props.config.sorting).length > 0 ? Object.keys(props.config.sorting)[0] : props.config.defaultView.config.order.prop,
+    order: 'descending',
   },
 });
 
@@ -277,6 +279,7 @@ const rules = {
 };
 
 const $v = useVuelidate(rules, form);
+const { hasFormChanged, formSnapshot } = formChangeDetector(form);
 
 const settings = computed<Record<string, any>>(() => {
   const settingsObject = { ...props.config.settings };
@@ -324,10 +327,10 @@ const fillForm = () => {
     form.relation = relation;
     form.sorting.prop = order.prop;
     form.sorting.order = order.order;
-    form.filters = restFilters || {};
-    form.settings = settings || {};
+    form.filters = { ...restFilters } || {};
+    form.settings = { ...settings } || {};
     filterList.value = Object.keys(restFilters);
-    console.log(restFilters);
+    formSnapshot();
   }
 };
 
@@ -338,10 +341,12 @@ const reset = () => {
   form.filters = {};
   form.settings = { ...settingsDefaultValue.value };
   form.sorting = {
-    prop: props.config.defaultView.config.order.prop,
-    order: props.config.defaultView.config.order.order,
+    prop: Object.keys(props.config.sorting).length > 0 ? Object.keys(props.config.sorting)[0] : props.config.defaultView.config.order.prop,
+    order: 'descending',
   };
+  filterList.value = [];
   $v.value.$reset();
+  formSnapshot();
 };
 
 watch(() => props.view, () => {

From aa5e4550a089edb119151701a33507ff4b35fc4e Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Thu, 19 Oct 2023 16:14:41 +0700
Subject: [PATCH 17/22] Fix duplicate error

---
 .../modules/saved-views/components/forms/SavedViewForm.vue      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue b/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
index 94876bb081..733adc7d4f 100644
--- a/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
+++ b/frontend/src/shared/modules/saved-views/components/forms/SavedViewForm.vue
@@ -180,7 +180,7 @@
           class="btn btn--md btn--primary"
           :loading="sending"
           :disabled="$v.$invalid
-            || !hasFormChanged"
+            || (isEdit && !hasFormChanged)"
           @click="submit()"
         >
           {{ isEdit ? 'Update' : 'Add view' }}

From 9baa1c2c1de482dd7367c848b2dacfbab29ca8fd Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Thu, 19 Oct 2023 17:33:28 +0700
Subject: [PATCH 18/22] Fix alignment of views

---
 .../filters/components/filterTypes/BooleanFilter.vue      | 1 -
 .../shared/modules/saved-views/components/SavedViews.vue  | 8 ++++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/frontend/src/shared/modules/filters/components/filterTypes/BooleanFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/BooleanFilter.vue
index 5731d13484..a4568fd175 100644
--- a/frontend/src/shared/modules/filters/components/filterTypes/BooleanFilter.vue
+++ b/frontend/src/shared/modules/filters/components/filterTypes/BooleanFilter.vue
@@ -40,7 +40,6 @@ const form = computed({
 
 const defaultForm: BooleanFilterValue = {
   value: true,
-  include: true,
 };
 
 const rules: any = {
diff --git a/frontend/src/shared/modules/saved-views/components/SavedViews.vue b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
index b63ef89083..becb0bac54 100644
--- a/frontend/src/shared/modules/saved-views/components/SavedViews.vue
+++ b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
@@ -94,7 +94,7 @@
 <script setup lang="ts">
 import {
   computed,
-  onMounted, ref, watch,
+  onMounted, ref,
 } from 'vue';
 import { Filter, FilterConfig } from '@/shared/modules/filters/types/FilterConfig';
 import { SavedView, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
@@ -205,9 +205,9 @@ const checkIfTabConfigMatch = () => {
   }
 };
 
-watch(() => props.modelValue, () => {
-  checkIfTabConfigMatch();
-}, { deep: true });
+// watch(() => props.modelValue, () => {
+//   checkIfTabConfigMatch();
+// }, { deep: true });
 
 // View management
 const views = ref<SavedView[]>([]);

From cfc61780627cd5551cd66c585c48f571cca933e2 Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Thu, 19 Oct 2023 17:53:00 +0700
Subject: [PATCH 19/22] add last 24h option to date filters

---
 .../config/apiFilterRenderer/date.filter.renderer.ts       | 4 +++-
 .../modules/filters/config/constants/date.constants.ts     | 7 ++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/shared/modules/filters/config/apiFilterRenderer/date.filter.renderer.ts b/frontend/src/shared/modules/filters/config/apiFilterRenderer/date.filter.renderer.ts
index d38b8ffca6..c7774d6129 100644
--- a/frontend/src/shared/modules/filters/config/apiFilterRenderer/date.filter.renderer.ts
+++ b/frontend/src/shared/modules/filters/config/apiFilterRenderer/date.filter.renderer.ts
@@ -42,7 +42,9 @@ export const dateApiFilterRenderer = (property: string, { value, operator }: Dat
   } else {
     let parsedValue = moment.utc(mappedValue).startOf('day').toISOString();
 
-    if ([FilterDateOperator.GT].includes(operator)) {
+    if (['last24h'].includes(value as string)) {
+      parsedValue = mappedValue as string;
+    } else if ([FilterDateOperator.GT].includes(operator)) {
       parsedValue = moment.utc(mappedValue).endOf('day').toISOString();
     }
 
diff --git a/frontend/src/shared/modules/filters/config/constants/date.constants.ts b/frontend/src/shared/modules/filters/config/constants/date.constants.ts
index da2a16f519..3eaffcdd22 100644
--- a/frontend/src/shared/modules/filters/config/constants/date.constants.ts
+++ b/frontend/src/shared/modules/filters/config/constants/date.constants.ts
@@ -39,10 +39,15 @@ export const dateFilterOperators: FilterOperator[] = [
 ];
 
 export const dateFilterTimePickerOptions: FilterTimeOptions[] = [
+  {
+    value: 'last24h',
+    label: 'Last 24 hours',
+    getDate: () => moment().subtract(24, 'hour').toISOString(),
+  },
   {
     value: 'last7days',
     label: 'Last 7 days',
-    getDate: () => moment().subtract(1, 'week').format('YYYY-MM-DD'),
+    getDate: () => moment().subtract(7, 'day').format('YYYY-MM-DD'),
   },
   {
     value: 'last14days',

From 4f0d05ad3df32c5df78d334d70c7ea59da1a43c6 Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Fri, 20 Oct 2023 14:09:13 +0700
Subject: [PATCH 20/22] Fix resizing

---
 frontend/src/assets/scss/tooltip.scss                 |  5 +++--
 .../modules/saved-views/components/SavedViews.vue     | 11 ++++++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/src/assets/scss/tooltip.scss b/frontend/src/assets/scss/tooltip.scss
index 62dd099d61..9ef4a523a2 100644
--- a/frontend/src/assets/scss/tooltip.scss
+++ b/frontend/src/assets/scss/tooltip.scss
@@ -12,10 +12,11 @@
     width: max-content;
     max-width: 20rem;
     display: block;
-    @apply bg-gray-900 text-white rounded-md text-xs leading-5 py-0.5 px-1.5 opacity-0 transition invisible;
+    padding: 5px 6px;
+    @apply bg-gray-900 text-white rounded-md text-2xs leading-5 opacity-0 transition invisible;
   }
 
   &:hover:before {
     @apply opacity-100 visible;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/shared/modules/saved-views/components/SavedViews.vue b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
index becb0bac54..6dadc67750 100644
--- a/frontend/src/shared/modules/saved-views/components/SavedViews.vue
+++ b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
@@ -66,7 +66,7 @@
       </el-tooltip>
       <el-popover trigger="click" placement="bottom-end" popper-class="!p-0" width="320px">
         <template #reference>
-          <el-button class="btn btn-brand btn--transparent btn--icon--sm inset-y-0 !border-0">
+          <el-button class="btn btn-brand btn--transparent btn--icon--sm inset-y-0 !border-0" data-tooltip="Manage views">
             <i class="ri-list-settings-line text-lg text-gray-400 h-5 flex items-center" />
           </el-button>
         </template>
@@ -94,7 +94,7 @@
 <script setup lang="ts">
 import {
   computed,
-  onMounted, ref,
+  onMounted, onUnmounted, ref,
 } from 'vue';
 import { Filter, FilterConfig } from '@/shared/modules/filters/types/FilterConfig';
 import { SavedView, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
@@ -284,6 +284,11 @@ const createNewView = () => {
 
 onMounted(() => {
   getViews();
+  window.addEventListener('resize', checkIfScrollableTabs);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkIfScrollableTabs);
 });
 </script>
 
@@ -295,7 +300,7 @@ export default {
 
 <style lang="scss" scoped>
 .tabs {
-  width: calc(100% - 72px);
+  width: calc(100% - 113px);
 
   &.is-shrink{
     width: calc(100% - 303px);

From 41cbff415aa5ce822ef990d9aab390d04587198b Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Fri, 20 Oct 2023 14:34:04 +0700
Subject: [PATCH 21/22] Fix date filters

---
 .../filters/config/itemLabelRenderer/date.label.renderer.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/shared/modules/filters/config/itemLabelRenderer/date.label.renderer.ts b/frontend/src/shared/modules/filters/config/itemLabelRenderer/date.label.renderer.ts
index 1436eb2108..b8e2b7c621 100644
--- a/frontend/src/shared/modules/filters/config/itemLabelRenderer/date.label.renderer.ts
+++ b/frontend/src/shared/modules/filters/config/itemLabelRenderer/date.label.renderer.ts
@@ -19,8 +19,8 @@ export const dateItemLabelRenderer = (property: string, { value, operator }: Dat
   let operatorTextDisplay = operatorText[operator].length > 0 ? `${operatorText[operator]} ` : '';
 
   if (dateOption) {
-    valueText = dateOption.label.toLowerCase();
-    operatorTextDisplay = 'in ';
+    valueText = dateOption.label;
+    operatorTextDisplay = '';
   } else {
     const isBetween = [FilterDateOperator.BETWEEN, FilterDateOperator.NOT_BETWEEN].includes(operator);
     if (isBetween) {

From 821601f4229a19e46e4768fb0ed068b1bf97cf2f Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Fri, 20 Oct 2023 15:45:56 +0700
Subject: [PATCH 22/22] Fix updating default view

---
 .../shared/modules/saved-views/components/SavedViews.vue    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/shared/modules/saved-views/components/SavedViews.vue b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
index 6dadc67750..8d79b0ae58 100644
--- a/frontend/src/shared/modules/saved-views/components/SavedViews.vue
+++ b/frontend/src/shared/modules/saved-views/components/SavedViews.vue
@@ -38,11 +38,11 @@
       </el-tabs>
     </div>
     <div v-if="isEnabled" class="border-b-2 border-[#e4e7ed] flex-grow flex justify-end -mb-px pb-1">
-      <el-button v-if="hasChanged" class="btn btn-brand btn-brand--transparent btn--sm !leading-5 !h-8 mr-2" @click="reset()">
+      <el-button v-if="hasChanged && selectedTab !== ''" class="btn btn-brand btn-brand--transparent btn--sm !leading-5 !h-8 mr-2" @click="reset()">
         Reset view
       </el-button>
-      <el-dropdown placement="bottom-end">
-        <el-button v-if="hasChanged" class="btn btn-brand btn-brand--transparent btn--sm !h-8 !leading-5 mr-2">
+      <el-dropdown v-if="hasChanged && selectedTab !== ''" placement="bottom-end">
+        <el-button class="btn btn-brand btn-brand--transparent btn--sm !h-8 !leading-5 mr-2">
           Save as...
         </el-button>
         <template #dropdown>