From ccd61b6b4dac2e7f2a2c7acc488e9b78edd940a5 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Wed, 3 Dec 2025 17:17:57 +0800
Subject: [PATCH 01/51] chore: initial commit

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 frontend/src/modules/admin/admin.routes.ts    |  53 +--
 .../components/fragments/overview-filter.vue  | 359 ++++++++++++++++++
 .../components/fragments/trend-display.vue    |  91 +++++
 .../sections/integration-details.vue          |  14 +
 .../sections/integration-status.vue           |  14 +
 .../overview/components/sections/summary.vue  |  84 ++++
 .../admin/modules/overview/pages/overview.vue |  28 ++
 .../modules/overview/store/overview.store.ts  |  13 +
 .../modules/overview/types/overview.types.ts  |   5 +
 frontend/src/router/index.js                  | 136 ++++---
 .../shared/modules/monitoring/types/event.ts  |   2 +-
 frontend/src/ui-kit/index.scss                |   2 +
 .../lfx/dropdown/dropdown-group-title.vue     |  15 +
 .../src/ui-kit/lfx/dropdown/dropdown-item.vue |  63 +++
 .../ui-kit/lfx/dropdown/dropdown-search.vue   |  62 +++
 .../ui-kit/lfx/dropdown/dropdown-select.vue   | 101 +++++
 .../ui-kit/lfx/dropdown/dropdown-selector.vue |  40 ++
 .../lfx/dropdown/dropdown-separator.vue       |  13 +
 .../src/ui-kit/lfx/dropdown/dropdown.scss     |  74 ++++
 frontend/src/ui-kit/lfx/dropdown/dropdown.vue |  79 ++++
 .../lfx/dropdown/types/dropdown.types.ts      |  37 ++
 frontend/src/ui-kit/lfx/popover/popover.scss  |  26 ++
 frontend/src/ui-kit/lfx/popover/popover.vue   | 217 +++++++++++
 .../lfx/popover/types/PopoverPlacement.ts     |  18 +
 .../lfx/popover/types/PopoverTrigger.ts       |   5 +
 frontend/src/utils/responsive.ts              |  29 ++
 frontend/tailwind.config.js                   |  73 +---
 27 files changed, 1504 insertions(+), 149 deletions(-)
 create mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/overview-filter.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/trend-display.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/components/sections/summary.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/pages/overview.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/store/overview.store.ts
 create mode 100644 frontend/src/modules/admin/modules/overview/types/overview.types.ts
 create mode 100644 frontend/src/ui-kit/lfx/dropdown/dropdown-group-title.vue
 create mode 100644 frontend/src/ui-kit/lfx/dropdown/dropdown-item.vue
 create mode 100644 frontend/src/ui-kit/lfx/dropdown/dropdown-search.vue
 create mode 100644 frontend/src/ui-kit/lfx/dropdown/dropdown-select.vue
 create mode 100644 frontend/src/ui-kit/lfx/dropdown/dropdown-selector.vue
 create mode 100644 frontend/src/ui-kit/lfx/dropdown/dropdown-separator.vue
 create mode 100644 frontend/src/ui-kit/lfx/dropdown/dropdown.scss
 create mode 100644 frontend/src/ui-kit/lfx/dropdown/dropdown.vue
 create mode 100644 frontend/src/ui-kit/lfx/dropdown/types/dropdown.types.ts
 create mode 100644 frontend/src/ui-kit/lfx/popover/popover.scss
 create mode 100644 frontend/src/ui-kit/lfx/popover/popover.vue
 create mode 100644 frontend/src/ui-kit/lfx/popover/types/PopoverPlacement.ts
 create mode 100644 frontend/src/ui-kit/lfx/popover/types/PopoverTrigger.ts
 create mode 100644 frontend/src/utils/responsive.ts

diff --git a/frontend/src/modules/admin/admin.routes.ts b/frontend/src/modules/admin/admin.routes.ts
index 41e01f1c5a..a008ac88fe 100644
--- a/frontend/src/modules/admin/admin.routes.ts
+++ b/frontend/src/modules/admin/admin.routes.ts
@@ -1,19 +1,16 @@
-import Layout from '@/modules/layout/components/layout.vue';
-import { PageEventKey } from '@/shared/modules/monitoring/types/event';
-import { PermissionGuard } from '@/shared/modules/permissions/router/PermissionGuard';
-import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
+import Layout from '@/modules/layout/components/layout.vue'
+import { PageEventKey } from '@/shared/modules/monitoring/types/event'
+import { PermissionGuard } from '@/shared/modules/permissions/router/PermissionGuard'
+import { LfPermission } from '@/shared/modules/permissions/types/Permissions'
 
-const ProjectGroupsListPage = () => import(
-  '@/modules/admin/modules/projects/pages/project-groups-list.page.vue'
-);
+const OverviewPage = () => import('@/modules/admin/modules/overview/pages/overview.vue')
 
-const ProjectsPage = () => import(
-  '@/modules/admin/modules/projects/pages/projects.page.vue'
-);
+// const ProjectGroupsListPage = () =>
+//   import('@/modules/admin/modules/projects/pages/project-groups-list.page.vue')
 
-const AdminPanelPage = () => import(
-  '@/modules/admin/pages/admin-panel.page.vue'
-);
+const ProjectsPage = () => import('@/modules/admin/modules/projects/pages/projects.page.vue')
+
+const AdminPanelPage = () => import('@/modules/admin/pages/admin-panel.page.vue')
 
 export default [
   {
@@ -26,15 +23,25 @@ export default [
     },
     children: [
       {
-        name: 'projectGroupsList',
-        path: '/project-groups',
-        component: ProjectGroupsListPage,
+        name: 'overview',
+        path: '/overview',
+        component: OverviewPage,
         meta: {
           auth: true,
-          title: 'Project Groups',
-          eventKey: PageEventKey.PROJECT_GROUPS,
+          title: 'Overview',
+          eventKey: PageEventKey.OVERVIEW,
         },
       },
+      // {
+      //   name: 'projectGroupsList',
+      //   path: '/project-groups',
+      //   component: ProjectGroupsListPage,
+      //   meta: {
+      //     auth: true,
+      //     title: 'Project Groups',
+      //     eventKey: PageEventKey.PROJECT_GROUPS,
+      //   },
+      // },
       {
         name: 'adminPanel',
         path: '/admin',
@@ -43,9 +50,7 @@ export default [
           title: 'Admin Panel',
           eventKey: PageEventKey.ADMIN_PANEL,
         },
-        beforeEnter: [
-          PermissionGuard(LfPermission.projectGroupEdit),
-        ],
+        beforeEnter: [PermissionGuard(LfPermission.projectGroupEdit)],
       },
       {
         name: 'adminProjects',
@@ -60,10 +65,8 @@ export default [
             parameter: 'id',
           },
         },
-        beforeEnter: [
-          PermissionGuard(LfPermission.projectEdit),
-        ],
+        beforeEnter: [PermissionGuard(LfPermission.projectEdit)],
       },
     ],
   },
-];
+]
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/overview-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/overview-filter.vue
new file mode 100644
index 0000000000..60a435389a
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/overview-filter.vue
@@ -0,0 +1,359 @@
+<template>
+  <!-- <el-popover
+    v-model:visible="isPopoverVisible"
+    placement="bottom-start"
+    trigger="click"
+    popper-class="project-groups-select-popper"
+    :teleported="false"
+    width="255px"
+  >
+    <template #reference>
+      <el-input
+        v-model="model"
+        class="project-groups-select-input"
+        placeholder="Select project group..."
+        readonly
+        :suffix-icon="isPopoverVisible ? ArrowUpIcon : ArrowDownIcon"
+      />
+    </template>
+
+    <div
+      v-if="isSearchVisible"
+      class="border-b border-gray-100 px-1 w-full sticky top-0 bg-white"
+    >
+      <el-input
+        id="filterSearch"
+        v-model="searchQuery"
+        placeholder="Search..."
+        class="filter-dropdown-search"
+        :prefix-icon="SearchIcon"
+        clearable
+      />
+    </div>
+
+    <div>
+      <div
+        v-if="isPending"
+        class="text-gray-400 px-3 h-20 flex items-center justify-center"
+      >
+        <lf-icon
+          name="circle-notch"
+          class="animate-spin text-gray-400"
+          :size="16"
+        />
+        <span class="text-tiny ml-1 text-gray-400">
+          Loading project groups...
+        </span>
+      </div>
+      <div
+        v-else-if="projectGroupsList.length"
+        class="flex flex-col gap-1 overflow-auto p-2"
+      >
+        <div
+          v-for="projectGroup of projectGroupsList"
+          :key="projectGroup.id"
+          class="py-1.5 px-2 hover:bg-gray-50 rounded cursor-pointer"
+          :class="{
+            'bg-primary-50': projectGroup.id === selectedProjectGroup?.id,
+          }"
+          @click="onOptionClick(projectGroup)"
+        >
+          <div class="flex gap-0.5 items-start truncate">
+            <div class="block truncate mr-2">
+              <div class="text-small leading-5 text-gray-900 truncate">
+                {{ projectGroup.name }}
+              </div>
+              <div class="text-tiny text-gray-400">
+                {{ pluralize("project", projectGroup.projects.length, true) }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="isFetchingNextPage"
+          class="text-gray-400 px-3 h-20 flex items-center justify-center"
+        >
+          <lf-icon
+            name="circle-notch"
+            class="animate-spin text-gray-400"
+            :size="16"
+          />
+          <span class="text-tiny ml-1 text-gray-400">
+            Loading project groups...
+          </span>
+        </div>
+      </div>
+      <div
+        v-else
+        class="text-gray-400 px-3 h-20 flex items-center justify-center"
+      >
+        <span class="text-tiny text-gray-400"> No project groups found </span>
+      </div>
+    </div>
+  </el-popover> -->
+
+  <lfx-dropdown-select
+    v-model="selectedProjectGroup"
+    width="255px"
+    match-width="false"
+    dropdown-class="max-h-80"
+    placement="bottom-end"
+  >
+    <template #trigger="{ selectedOption }">
+      <lfx-dropdown-selector
+        size="medium"
+        type="transparent"
+        class="!rounded-full flex items-center justify-center w-full"
+      >
+        <div class="flex items-center gap-2">
+          <lf-icon
+            name="rectangle-history"
+            :size="16"
+          />
+          <span class="text-sm text-neutral-900 truncate">
+            {{ selectedOption.label || 'All collections' }}
+          </span>
+        </div>
+      </lfx-dropdown-selector>
+    </template>
+
+    <template #default>
+      <div class="sticky -top-1 z-10 bg-white w-full -mt-1 pt-1 flex flex-col gap-1">
+        <!-- All collections option -->
+        <lfx-dropdown-item
+          value="all"
+          label="All collections"
+        />
+
+        <lfx-dropdown-separator />
+
+        <!-- Search input -->
+        <lfx-dropdown-search
+          v-model="searchQuery"
+          placeholder="Search collections..."
+          lazy
+          class=""
+        />
+
+        <lfx-dropdown-separator />
+      </div>
+
+      <!-- Collections list -->
+      <div
+        v-if="isPending"
+        class="py-8 flex justify-center"
+      >
+        <lf-spinner />
+      </div>
+
+      <!-- <div
+        v-else-if="!collections.length && searchQuery"
+        class="py-4 px-3 text-sm text-neutral-500 text-center"
+      >
+        No collections found
+      </div> -->
+
+      <template v-else>
+        <lfx-dropdown-item
+          v-for="projectGroup in projectGroupsList"
+          :key="projectGroup.id"
+          :value="projectGroup.id"
+          :label="projectGroup.name"
+        />
+      </template>
+    </template>
+  </lfx-dropdown-select>
+</template>
+
+<script setup lang="ts">
+import {
+  h, ref, onMounted, computed, nextTick, watch,
+  onBeforeUnmount,
+} from 'vue';
+import { storeToRefs } from 'pinia';
+import { useLfSegmentsStore } from '@/modules/lf/segments/store';
+import pluralize from 'pluralize';
+import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
+import {
+  EventType,
+  FeatureEventKey,
+} from '@/shared/modules/monitoring/types/event';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { QueryFunction, useInfiniteQuery } from '@tanstack/vue-query';
+import { Pagination } from '@/shared/types/Pagination';
+import { TanstackKey } from '@/shared/types/tanstack';
+import { useDebounce } from '@vueuse/core';
+
+import { ToastStore } from '@/shared/message/notification';
+import { segmentService } from '@/modules/lf/segments/segments.service';
+import { ProjectGroup } from '@/modules/lf/segments/types/Segments';
+import LfxDropdownSelect from '@/ui-kit/lfx/dropdown/dropdown-select.vue';
+import LfxDropdownSelector from '@/ui-kit/lfx/dropdown/dropdown-selector.vue';
+import LfxDropdownItem from '@/ui-kit/lfx/dropdown/dropdown-item.vue';
+import LfxDropdownSeparator from '@/ui-kit/lfx/dropdown/dropdown-separator.vue';
+import LfxDropdownSearch from '@/ui-kit/lfx/dropdown/dropdown-search.vue';
+import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
+
+const SearchIcon = h(
+  'i', // type
+  { class: 'fa-light fa-magnifying-glass c-icon' }, // props
+  [],
+);
+
+const ArrowDownIcon = h(
+  'i', // type
+  { class: 'fa-light fa-chevron-down c-icon' }, // props
+  [],
+);
+
+const ArrowUpIcon = h(
+  'i', // type
+  { class: 'fa-light fa-chevron-up c-icon' }, // props
+  [],
+);
+
+const lsSegmentsStore = useLfSegmentsStore();
+const { selectedProjectGroup } = storeToRefs(lsSegmentsStore);
+const { updateSelectedProjectGroup } = lsSegmentsStore;
+
+const searchQuery = ref('');
+const isPopoverVisible = ref(false);
+const searchValue = useDebounce(searchQuery, 300);
+const isSearchVisible = computed(() => projectGroupsList.value.length > 5 || searchQuery.value.length > 0);
+
+let scrollContainer: HTMLElement | null = null;
+
+const { trackEvent } = useProductTracking();
+
+const model = computed({
+  get() {
+    return selectedProjectGroup.value?.name;
+  },
+  set(id) {
+    updateSelectedProjectGroup(id);
+  },
+});
+
+const queryKey = computed(() => [
+  TanstackKey.ADMIN_PROJECT_GROUPS,
+  searchValue.value,
+]);
+
+const projectGroupsQueryFn = segmentService.queryProjectGroups(() => ({
+  limit: 20,
+  offset: 0,
+  filter: {
+    name: searchQuery.value,
+  },
+})) as QueryFunction<Pagination<ProjectGroup>, readonly unknown[], unknown>;
+
+const {
+  data,
+  isPending,
+  isFetchingNextPage,
+  fetchNextPage,
+  hasNextPage,
+  isSuccess,
+  error,
+} = useInfiniteQuery<Pagination<ProjectGroup>, Error>({
+  queryKey,
+  queryFn: projectGroupsQueryFn,
+  getNextPageParam: (lastPage) => {
+    const nextPage = lastPage.offset + lastPage.limit;
+    const totalRows = lastPage.count;
+    return nextPage < totalRows ? nextPage : undefined;
+  },
+  initialPageParam: 0,
+});
+
+const projectGroupsList = computed((): ProjectGroup[] => {
+  if (isSuccess.value && data.value) {
+    return data.value.pages.reduce(
+      (acc, page) => acc.concat(page.rows),
+      [] as ProjectGroup[],
+    );
+  }
+  return [];
+});
+
+// Infinite scroll handler
+function onScroll(e: Event) {
+  if (!scrollContainer) return;
+  const threshold = 40;
+
+  const target = e.target as HTMLElement;
+  if (
+    !isFetchingNextPage.value
+    && hasNextPage.value
+    && target.scrollHeight - target.scrollTop - target.clientHeight < threshold
+  ) {
+    fetchNextPage();
+  }
+}
+
+watch(error, (err) => {
+  if (err) {
+    ToastStore.error('Something went wrong while fetching project groups');
+  }
+});
+
+onMounted(() => {
+  nextTick(() => {
+    scrollContainer = document.querySelector(
+      '.project-groups-select-popper',
+    );
+    if (scrollContainer) {
+      scrollContainer.addEventListener('scroll', onScroll);
+    }
+  });
+});
+
+const onOptionClick = ({ id, name }: ProjectGroup) => {
+  // trackEvent({
+  //   key: FeatureEventKey.SELECT_PROJECT_GROUP,
+  //   type: EventType.FEATURE,
+  //   properties: {
+  //     projectGroupId: id,
+  //     projectName: name,
+  //   },
+  // });
+
+  isPopoverVisible.value = false;
+  // updateSelectedProjectGroup(id);
+};
+
+onBeforeUnmount(() => {
+  if (scrollContainer) {
+    scrollContainer.removeEventListener('scroll', onScroll);
+  }
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfOverviewFilter',
+};
+</script>
+
+<style lang="scss">
+.project-groups-select-popper.el-popper {
+  max-width: 236px;
+  max-height: 480px;
+  overflow: auto;
+  @apply p-0;
+}
+
+.project-groups-select-input {
+  @apply cursor-pointer relative w-full;
+  height: 32px !important;
+
+  .el-input__wrapper {
+    @apply rounded;
+    @apply h-8 px-3;
+  }
+
+  .el-input__inner {
+    @apply cursor-pointer text-xs truncate pr-6;
+  }
+}
+</style>
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/trend-display.vue b/frontend/src/modules/admin/modules/overview/components/fragments/trend-display.vue
new file mode 100644
index 0000000000..9dfd2f3449
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/trend-display.vue
@@ -0,0 +1,91 @@
+<template>
+  <lfx-tooltip content="vs. previous 12M period">
+    <div class="flex gap-1 items-center">
+      <lf-icon
+        :name="getTrendIcon"
+        type="solid"
+        :size="15"
+        :class="getTrendColor"
+      />
+      <span
+        v-if="trendDirection !== 'neutral'"
+        class="text-xs font-medium text-nowrap"
+        :class="getTrendColor"
+      >
+        {{ trendPercentage }}%
+        <span class="hidden sm:inline"> ({{ formatTrendValue }}) </span>
+      </span>
+      <span
+        v-else
+        class="text-xs font-medium text-neutral-400"
+      >
+        0%
+      </span>
+      <slot name="period">
+        <span class="text-xs text-neutral-400">
+          {{ data.period }}
+        </span>
+      </slot>
+    </div>
+  </lfx-tooltip>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import type { OverviewTrends } from '@/modules/admin/modules/overview/types/overview.types';
+import { formatNumber } from '@/utils/number';
+
+const props = withDefaults(
+  defineProps<{
+    data: OverviewTrends;
+    decimalPlaces?: number;
+  }>(),
+  {
+    decimalPlaces: 0,
+  },
+);
+
+const trend = computed(() => {
+  return props.data.current - props.data.previous;
+});
+
+const trendPercentage = computed(() => {
+  if (!props.data.previous) {
+    // For division by zero, show as 100% increase
+    return '100.0';
+  }
+  const value = (Math.abs(trend.value) / props.data.previous) * 100;
+  return value.toFixed(1);
+});
+
+const formatTrendValue = computed(() => {
+  const sign = trend.value >= 0 ? '+' : '-';
+
+  return `${sign}${formatNumber(Math.abs(trend.value))}`;
+});
+
+const trendDirection = computed(() => {
+  if (trend.value === 0) return 'neutral';
+
+  return trend.value > 0 ? 'up' : 'down';
+});
+
+const getTrendIcon = computed(() => {
+  if (trendDirection.value === 'neutral') return 'equals';
+
+  return trendDirection.value === 'up' ? 'circle-arrow-up' : 'circle-arrow-down';
+});
+
+const getTrendColor = computed(() => {
+  if (trendDirection.value === 'neutral') return 'text-neutral-400';
+
+  return trendDirection.value === 'up' ? 'text-green-600' : 'text-red-600';
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfOverviewTrendDisplay',
+};
+</script>
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
new file mode 100644
index 0000000000..9e36fd84fd
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    show integration details here
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfOverviewIntegrationDetails',
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
new file mode 100644
index 0000000000..714ace7613
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    show integration status cards here
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfOverviewIntegrationStatus',
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
new file mode 100644
index 0000000000..6f541fe008
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="flex gap-4">
+    <!-- TODO: revisit this implementation when the backend is ready -->
+    <!-- we may use loop to render the cards -->
+    <lf-card class="flex-1 p-4 flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-semibold">Projects</span>
+        <lf-icon name="folders" type="light" class="text-gray-400" />
+      </div>
+      <div class="text-xl font-light">
+        640
+      </div>
+      <app-lf-overview-trend-display :data="projectsTrends" />
+    </lf-card>
+    <lf-card class="flex-1 p-4 flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-semibold">People</span>
+        <lf-icon name="people-group" type="light" class="text-gray-400" />
+      </div>
+      <div class="text-xl font-light">
+        640
+      </div>
+      <app-lf-overview-trend-display :data="peopleTrends" />
+    </lf-card>
+    <lf-card class="flex-1 p-4 flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-semibold">Organizations</span>
+        <lf-icon name="building" type="light" class="text-gray-400" />
+      </div>
+      <div class="text-xl font-light">
+        640
+      </div>
+      <app-lf-overview-trend-display :data="organizationsTrends" />
+    </lf-card>
+    <lf-card class="flex-1 p-4 flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-semibold">Activities</span>
+        <lf-icon name="monitor-waveform" type="light" class="text-gray-400" />
+      </div>
+      <div class="text-xl font-light">
+        640
+      </div>
+      <app-lf-overview-trend-display :data="activitiesTrends" />
+    </lf-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import LfCard from '@/ui-kit/card/Card.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import AppLfOverviewTrendDisplay from '@/modules/admin/modules/overview/components/fragments/trend-display.vue';
+import type { OverviewTrends } from '@/modules/admin/modules/overview/types/overview.types';
+
+const projectsTrends = ref<OverviewTrends>({
+  current: 640,
+  previous: 500,
+  period: 'vs. last 30d',
+});
+
+const peopleTrends = ref<OverviewTrends>({
+  current: 640,
+  previous: 600,
+  period: 'vs. previous 30d',
+});
+
+const organizationsTrends = ref<OverviewTrends>({
+  current: 640,
+  previous: 700,
+  period: 'vs. previous 12M period',
+});
+
+const activitiesTrends = ref<OverviewTrends>({
+  current: 640,
+  previous: 400,
+  period: 'vs. previous 30d',
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfOverviewSummary',
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/modules/admin/modules/overview/pages/overview.vue b/frontend/src/modules/admin/modules/overview/pages/overview.vue
new file mode 100644
index 0000000000..73de99f8b8
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/pages/overview.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="flex flex-col gap-10 lg:px-8 px-6">
+    <div class="flex items-center justify-between pt-1 pb-5 border-b border-gray-200">
+      <h4>
+        Overview
+      </h4>
+      <div>
+        <app-lf-overview-filter />
+      </div>
+    </div>
+    <app-lf-overview-summary />
+    <app-lf-overview-integration-status />
+    <app-lf-overview-integration-details />
+  </div>
+</template>
+
+<script setup lang="ts">
+import AppLfOverviewSummary from '@/modules/admin/modules/overview/components/sections/summary.vue';
+import AppLfOverviewIntegrationStatus from '@/modules/admin/modules/overview/components/sections/integration-status.vue';
+import AppLfOverviewIntegrationDetails from '@/modules/admin/modules/overview/components/sections/integration-details.vue';
+import AppLfOverviewFilter from '@/modules/admin/modules/overview/components/fragments/overview-filter.vue';
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfOverviewPage',
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/modules/admin/modules/overview/store/overview.store.ts b/frontend/src/modules/admin/modules/overview/store/overview.store.ts
new file mode 100644
index 0000000000..e3270bc786
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/store/overview.store.ts
@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { Project, ProjectGroup } from '@/modules/lf/segments/types/Segments'
+
+export const useOverviewStore = defineStore('overview', () => {
+  const selectedProjectGroup = ref<ProjectGroup | null>(null)
+  const selectedProject = ref<Project | null>(null)
+
+  return {
+    selectedProjectGroup,
+    selectedProject,
+  }
+})
diff --git a/frontend/src/modules/admin/modules/overview/types/overview.types.ts b/frontend/src/modules/admin/modules/overview/types/overview.types.ts
new file mode 100644
index 0000000000..42196fdf61
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/types/overview.types.ts
@@ -0,0 +1,5 @@
+export interface OverviewTrends {
+  current: number
+  previous: number
+  period: string
+}
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 446e5a2029..1707c6bab6 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,16 +1,13 @@
-import {
-  createRouter as createVueRouter,
-  createWebHistory,
-} from 'vue-router';
-import { storeToRefs } from 'pinia';
-
-import { store } from '@/store';
-import authGuards from '@/middleware/auth';
-import modules from '@/modules';
-import ProgressBar from '@/shared/progress-bar/progress-bar';
-import { useLfSegmentsStore } from '@/modules/lf/segments/store';
-import auth from '@/modules/auth';
-import navigationGuard from '@/middleware/navigation/navigation-guard';
+import { createRouter as createVueRouter, createWebHistory } from 'vue-router'
+import { storeToRefs } from 'pinia'
+
+import { store } from '@/store'
+import authGuards from '@/middleware/auth'
+import modules from '@/modules'
+import ProgressBar from '@/shared/progress-bar/progress-bar'
+import { useLfSegmentsStore } from '@/modules/lf/segments/store'
+import auth from '@/modules/auth'
+import navigationGuard from '@/middleware/navigation/navigation-guard'
 
 /**
  * Loads all the routes from src/modules/ folders, and adds the catch-all rule to handle 404s
@@ -20,25 +17,27 @@ import navigationGuard from '@/middleware/navigation/navigation-guard';
 const routes = [
   {
     path: '',
-    redirect: '/project-groups',
+    redirect: '/overview',
   },
   ...auth.routes,
   ...Object.keys(modules)
     .filter((key) => Boolean(modules[key].routes))
-    .map((key) => modules[key].routes.map((r) => {
-      // eslint-disable-next-line no-param-reassign
-      r.meta = {
-        ...r.meta,
-        middleware: [...authGuards],
-      };
-      return r;
-    }))
+    .map((key) =>
+      modules[key].routes.map((r) => {
+        // eslint-disable-next-line no-param-reassign
+        r.meta = {
+          ...r.meta,
+          middleware: [...authGuards],
+        }
+        return r
+      }),
+    )
     .reduce((a, b) => a.concat(b), []),
   { path: '/:catchAll(.*)', redirect: '/404' },
-];
+]
 
 // eslint-disable-next-line import/no-mutable-exports
-let router;
+let router
 
 /**
  * Creates/Sets Router
@@ -50,65 +49,66 @@ export const createRouter = () => {
       history: createWebHistory(),
       routes,
       scrollBehavior() {
-        return { x: 0, y: 0 };
+        return { x: 0, y: 0 }
       },
-    });
+    })
 
-    const originalPush = router.push;
+    const originalPush = router.push
     router.push = function push(location) {
-      return originalPush
-        .call(this, location)
-        .catch((error) => {
-          console.error(error);
-          ProgressBar.done();
-        });
-    };
+      return originalPush.call(this, location).catch((error) => {
+        console.error(error)
+        ProgressBar.done()
+      })
+    }
 
     router.beforeEach(async (to, from, next) => {
-      const lsSegmentsStore = useLfSegmentsStore();
-      const { selectedProjectGroup } = storeToRefs(lsSegmentsStore);
-      const { listProjectGroups, updateSelectedProjectGroup } = lsSegmentsStore;
+      const lsSegmentsStore = useLfSegmentsStore()
+      const { selectedProjectGroup } = storeToRefs(lsSegmentsStore)
+      const { listProjectGroups, updateSelectedProjectGroup } = lsSegmentsStore
 
       // Set title to pages
-      document.title = `LFX Community Data Platform${to.meta.title ? ` | ${to.meta.title}` : ''}`;
+      document.title = `LFX Community Data Platform${to.meta.title ? ` | ${to.meta.title}` : ''}`
 
       if (to.name && to.query.menu === from.query.menu && to.name !== from.name) {
-        ProgressBar.start();
+        ProgressBar.start()
       }
 
-      const matchedRoute = to.matched.find(
-        (m) => m.meta.middleware,
-      );
+      const matchedRoute = to.matched.find((m) => m.meta.middleware)
 
       if (matchedRoute !== undefined) {
-        const middlewareArray = Array.isArray(
-          matchedRoute.meta.middleware,
-        )
+        const middlewareArray = Array.isArray(matchedRoute.meta.middleware)
           ? matchedRoute.meta.middleware
-          : [matchedRoute.meta.middleware];
+          : [matchedRoute.meta.middleware]
 
         const context = {
           from,
           router,
           to,
           store,
-        };
+        }
 
         await middlewareArray.forEach(async (middleware) => {
-          await middleware(context);
-        });
+          await middleware(context)
+        })
 
         // Redirect to project group landing pages if routes that require a selected project group
         // And no project group is selected
-        if (to.meta.segments?.requireSelectedProjectGroup || to.meta.segments?.optionalSelectedProjectGroup) {
-          if (!selectedProjectGroup.value && !to.query.projectGroup && !to.meta.segments?.optionalSelectedProjectGroup) {
-            next('/project-groups');
-            return;
+        if (
+          to.meta.segments?.requireSelectedProjectGroup ||
+          to.meta.segments?.optionalSelectedProjectGroup
+        ) {
+          if (
+            !selectedProjectGroup.value &&
+            !to.query.projectGroup &&
+            !to.meta.segments?.optionalSelectedProjectGroup
+          ) {
+            next('/project-groups')
+            return
           }
 
           if (!to.query.projectGroup && selectedProjectGroup.value?.id) {
-            next({ ...to, query: { ...to.query, projectGroup: selectedProjectGroup.value?.id } });
-            return;
+            next({ ...to, query: { ...to.query, projectGroup: selectedProjectGroup.value?.id } })
+            return
           }
 
           if (!selectedProjectGroup.value) {
@@ -116,29 +116,27 @@ export const createRouter = () => {
               await listProjectGroups({
                 limit: null,
                 reset: true,
-              });
+              })
 
-              updateSelectedProjectGroup(to.query.projectGroup, false);
+              updateSelectedProjectGroup(to.query.projectGroup, false)
             } catch (e) {
-              next('/project-groups');
-              return;
+              next('/project-groups')
+              return
             }
           }
         }
       }
 
-      next();
-    });
+      next()
+    })
 
     router.afterEach(async (to) => {
-      ProgressBar.done();
-      await navigationGuard({ to });
-    });
+      ProgressBar.done()
+      await navigationGuard({ to })
+    })
   }
 
-  return router;
-};
+  return router
+}
 
-export {
-  router,
-};
+export { router }
diff --git a/frontend/src/shared/modules/monitoring/types/event.ts b/frontend/src/shared/modules/monitoring/types/event.ts
index b54b34a471..89cbed85e0 100644
--- a/frontend/src/shared/modules/monitoring/types/event.ts
+++ b/frontend/src/shared/modules/monitoring/types/event.ts
@@ -13,8 +13,8 @@ export enum EventType {
 }
 
 export enum PageEventKey {
-  PROJECT_GROUPS = 'Project groups',
   OVERVIEW = 'Overview',
+  PROJECT_GROUPS = 'Project groups',
   MEMBERS = 'Contributors',
   ORGANIZATIONS = 'Organizations',
   ACTIVITIES = 'Activities',
diff --git a/frontend/src/ui-kit/index.scss b/frontend/src/ui-kit/index.scss
index ac1b2a8bba..400823aa34 100644
--- a/frontend/src/ui-kit/index.scss
+++ b/frontend/src/ui-kit/index.scss
@@ -22,4 +22,6 @@
 @import 'timeline/timeline';
 @import 'tooltip/tooltip';
 @import 'tag/tag';
+@import 'lfx/dropdown/dropdown';
+@import 'lfx/popover/popover';
 
diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown-group-title.vue b/frontend/src/ui-kit/lfx/dropdown/dropdown-group-title.vue
new file mode 100644
index 0000000000..cdccb3cb46
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown-group-title.vue
@@ -0,0 +1,15 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="lfx-c-dropdown__group-title">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'LfxDropdownGroupTitle',
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown-item.vue b/frontend/src/ui-kit/lfx/dropdown/dropdown-item.vue
new file mode 100644
index 0000000000..f8b77de572
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown-item.vue
@@ -0,0 +1,63 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div
+    class="lfx-c-dropdown__item"
+    :class="{ 'is-selected': isSelected }"
+    @click="handleClick"
+  >
+    <slot>
+      {{ props.label }}
+    </slot>
+    <div
+      v-if="isSelected || props.checkmarkBefore"
+      class="flex justify-end"
+      :class="props.checkmarkBefore ? 'order-first min-w-4 w-4' : 'flex-grow'"
+    >
+      <lf-icon
+        v-if="isSelected"
+        name="check"
+        :size="16"
+        class="!text-brand-500"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAttrs, computed } from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+
+const props = defineProps<{
+  value?: string;
+  label?: string;
+  checkmarkBefore?: boolean;
+  selected?: boolean;
+}>();
+
+const attrs = useAttrs();
+
+const emit = defineEmits<{
+  (e: 'click', value: { value?: string; label?: string; [key: string]: any }): void;
+}>();
+
+// Determine if the item is currently selected
+const isSelected = computed(() => props.selected);
+
+// Emit selection event upward
+const handleClick = () => {
+  emit('click', {
+    value: props.value,
+    label: props.label,
+    ...attrs,
+  });
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxDropdownItem',
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown-search.vue b/frontend/src/ui-kit/lfx/dropdown/dropdown-search.vue
new file mode 100644
index 0000000000..70f0cb6169
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown-search.vue
@@ -0,0 +1,62 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <label
+    class="flex items-center justify-between px-3 py-2 gap-2"
+    @click.stop
+  >
+    <lf-icon
+      name="search"
+      :size="16"
+      class="text-neutral-400"
+    />
+    <input
+      v-model="model"
+      type="text"
+      class="!outline-none !shadow-none flex-grow text-sm text-neutral-900 leading-5"
+      :placeholder="props.placeholder || 'Search...'"
+      @input="changedValue"
+    />
+    <lf-icon
+      v-if="model.length > 0"
+      name="circle-xmark"
+      :size="16"
+      type="solid"
+      class="text-neutral-300 cursor-pointer"
+      @click="
+        model = '';
+        changedValue();
+      "
+    />
+  </label>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { debounce } from 'lodash-es';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+
+const props = defineProps<{
+  modelValue: string;
+  placeholder?: string;
+  lazy?: boolean;
+}>();
+
+const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>();
+
+const model = ref(props.modelValue);
+
+const debouncedEmit = debounce((value: string) => {
+  emit('update:modelValue', value);
+}, 300);
+
+const changedValue = () => {
+  if (props.lazy) {
+    debouncedEmit(model.value);
+  } else {
+    emit('update:modelValue', model.value);
+  }
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown-select.vue b/frontend/src/ui-kit/lfx/dropdown/dropdown-select.vue
new file mode 100644
index 0000000000..87b01a3b82
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown-select.vue
@@ -0,0 +1,101 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <lfx-dropdown
+    v-model:visibility="isVisible"
+    :placement="props.placement"
+    :width="props.width"
+    :match-width="props.matchWidth"
+    v-bind="$attrs"
+  >
+    <template #trigger>
+      <slot
+        name="trigger"
+        :selected-option="selectedOption"
+      />
+    </template>
+
+    <slot :selected-option="selectedOption" />
+  </lfx-dropdown>
+</template>
+
+<script setup lang="ts">
+import type { Placement } from '@popperjs/core';
+import { computed, type VNode, provide, ref, useSlots } from 'vue';
+import LfxDropdown from '@/ui-kit/lfx/dropdown/dropdown.vue';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    placement?: Placement;
+    width?: string;
+    visibility?: boolean;
+    matchWidth?: boolean;
+  }>(),
+  {
+    placement: 'bottom-end',
+    width: 'auto',
+    visibility: false,
+    matchWidth: false,
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+  (e: 'update:visibility', value: boolean): void;
+}>();
+
+const slots = useSlots();
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (value: string) => emit('update:modelValue', value),
+});
+
+const isVisible = computed({
+  get: () => props.visibility,
+  set: (value: boolean) => emit('update:visibility', value),
+});
+
+// Recursive function to find components named 'LfxDropdownItem'
+const findDropdownItems = (nodes: VNode[], result: VNode[] = []) => {
+  nodes.forEach((node: VNode) => {
+    if (!node) return;
+    if (node.type && ['LfxDropdownItem', 'LfxOption'].includes((node.type as any).name)) {
+      result.push(node);
+    }
+    if (node.children && Array.isArray(node.children)) {
+      findDropdownItems(node.children as VNode[], result);
+    } else if (typeof node.children === 'object' && node.children?.default) {
+      findDropdownItems((node.children?.default as () => VNode[])() as VNode[], result);
+    }
+  });
+  return result;
+};
+
+const dropdownItems = computed<VNode[]>(() => {
+  const slotNodes = slots.default ? slots.default() : [];
+  return findDropdownItems(slotNodes as VNode[]);
+});
+
+const selectedOptionProps = ref<Record<string, string>>({});
+
+const selectedOption = computed(() => {
+  if (value.value === selectedOptionProps.value.value) {
+    return selectedOptionProps.value;
+  }
+  const selected = dropdownItems.value.find((item) => item.props?.value === value.value);
+  return selected?.props || { value: value.value, label: value.value };
+});
+
+provide('selectedValue', value);
+provide('selectedOptionProps', selectedOptionProps);
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxDropdownSelect',
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown-selector.vue b/frontend/src/ui-kit/lfx/dropdown/dropdown-selector.vue
new file mode 100644
index 0000000000..efc117e626
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown-selector.vue
@@ -0,0 +1,40 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div
+    class="lfx-c-dropdown__selector"
+    :class="[`lfx-c-dropdown__selector--${props.size}`, `lfx-c-dropdown__selector--${props.type}`]"
+  >
+    <slot />
+    <slot name="append">
+      <lf-icon
+        name="angle-down"
+        :size="12"
+        class="text-neutral-500"
+      />
+    </slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+
+const props = withDefaults(
+  defineProps<{
+    size?: 'medium' | 'small';
+    type?: 'transparent' | 'filled';
+  }>(),
+  {
+    size: 'medium',
+    type: 'transparent',
+  },
+);
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxDropdownSelector',
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown-separator.vue b/frontend/src/ui-kit/lfx/dropdown/dropdown-separator.vue
new file mode 100644
index 0000000000..92421509ee
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown-separator.vue
@@ -0,0 +1,13 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="lfx-c-dropdown__separator" />
+</template>
+
+<script lang="ts">
+export default {
+  name: 'LfxDropdownSeparator',
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown.scss b/frontend/src/ui-kit/lfx/dropdown/dropdown.scss
new file mode 100644
index 0000000000..0314cce6e1
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown.scss
@@ -0,0 +1,74 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+.lfx-c-dropdown {
+  @apply bg-white border border-neutral-200 rounded-lg p-1 flex flex-col gap-1 max-h-96 shadow-lg;
+
+  //@screen sm{
+  //  @apply ;
+  //}
+
+  &__item {
+    @apply bg-white py-2 px-3 flex items-center gap-2 text-sm leading-5 cursor-pointer transition-all rounded-md;
+
+    &:hover {
+      @apply bg-neutral-50;
+    }
+
+    .c-icon {
+      @apply text-neutral-500;
+    }
+
+    &.is-selected {
+      @apply font-semibold;
+
+      .c-icon {
+        @apply text-neutral-900;
+      }
+    }
+  }
+
+  &__separator {
+    @apply w-full border-b border-neutral-100 h-0;
+  }
+
+  &__group-title {
+    @apply px-3 pt-1 text-xs font-semibold leading-5 text-neutral-400;
+  }
+
+  &__selector {
+    @apply flex items-center gap-2 text-sm leading-5 font-medium transition-all;
+    @apply px-3 py-2 cursor-pointer transition-all rounded-lg select-none;
+
+    &:hover {
+      @apply bg-neutral-50;
+    }
+
+    &--small {
+      @apply px-2 py-1 text-xs gap-1.5 rounded-md;
+    }
+
+    &--filled {
+      @apply bg-white outline outline-1 outline-neutral-200 shadow-xs;
+    }
+  }
+
+  &__sub {
+    @apply relative;
+
+    &-menu {
+      @apply absolute left-full top-0 z-10 ml-3 overflow-auto;
+    }
+  }
+}
+
+.dropdown-popover.c-popover__content {
+  z-index: 9;
+}
+
+.is-open {
+  .lfx-c-dropdown {
+    &__selector {
+      @apply bg-neutral-50;
+    }
+  }
+}
diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown.vue b/frontend/src/ui-kit/lfx/dropdown/dropdown.vue
new file mode 100644
index 0000000000..e1ca4c1394
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown.vue
@@ -0,0 +1,79 @@
+<!--
+Note: This is a copy of the LFX Insights implementation of the Dropdown component.
+This will replace the old Popover component in the future.
+-->
+<template>
+  <lfx-popover
+    ref="popover"
+    v-model:visibility="isVisible"
+    :placement="props.placement"
+    v-bind="$attrs"
+    :is-modal="pageWidth < 640"
+    :match-width="props.matchWidth"
+    :popover-class="props.popoverClass"
+  >
+    <slot name="trigger" />
+
+    <template #content>
+      <div
+        class="lfx-c-dropdown overflow-y-auto"
+        :style="{ width: props.width }"
+        :class="props.dropdownClass"
+        @click="popover?.closePopover()"
+      >
+        <slot />
+      </div>
+    </template>
+  </lfx-popover>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { Placement } from '@popperjs/core';
+import { computed, provide } from 'vue';
+import LfxPopover from '@/ui-kit/lfx/popover/popover.vue';
+import useResponsive from '@/utils/responsive';
+
+const props = withDefaults(
+  defineProps<{
+    placement?: Placement;
+    width?: string;
+    visibility?: boolean;
+    matchWidth?: boolean;
+    dropdownClass?: string;
+    popoverClass?: string;
+  }>(),
+  {
+    placement: 'bottom-end',
+    width: 'auto',
+    visibility: false,
+    matchWidth: false,
+    dropdownClass: '',
+    popoverClass: '',
+  },
+);
+
+const emit = defineEmits<{ (e: 'update:visibility', value: boolean): void }>();
+
+const submenuOpen = ref('');
+
+provide('submenuOpen', submenuOpen);
+
+const isVisible = computed({
+  get: () => props.visibility,
+  set: (value: boolean) => {
+    emit('update:visibility', value);
+    submenuOpen.value = '';
+  },
+});
+
+const popover = ref<typeof LfxPopover | null>(null);
+
+const { pageWidth } = useResponsive();
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxDropdown',
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/dropdown/types/dropdown.types.ts b/frontend/src/ui-kit/lfx/dropdown/types/dropdown.types.ts
new file mode 100644
index 0000000000..299a6b6497
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/dropdown/types/dropdown.types.ts
@@ -0,0 +1,37 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+export interface DropdownOption {
+  label: string;
+  value: string;
+  description?: string;
+}
+
+export interface DropdownGroupOptions {
+  label: string;
+  items: DropdownOption[];
+}
+
+export const dropdownSizes = ['default', 'small'] as const;
+export const dropdownTypes = ['filled', 'transparent'] as const;
+
+export type DropdownSize = (typeof dropdownSizes)[number];
+export type DropdownType = (typeof dropdownTypes)[number];
+
+export interface DropdownProps {
+  modelValue?: string;
+  options: DropdownOption[] | DropdownGroupOptions[];
+  dropdownIcon?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  type?: DropdownType;
+  size?: DropdownSize;
+  showFilter?: boolean;
+  showGroupBreaks?: boolean;
+  icon?: string;
+  fullWidth?: boolean;
+  center?: boolean;
+  prefix?: string;
+  dropdownPosition?: 'left' | 'right';
+  iconOnlyMobile?: boolean;
+  splitLines?: number[]; // index of the lines to split the dropdown
+}
diff --git a/frontend/src/ui-kit/lfx/popover/popover.scss b/frontend/src/ui-kit/lfx/popover/popover.scss
new file mode 100644
index 0000000000..fe9b5feef4
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/popover/popover.scss
@@ -0,0 +1,26 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+.lfx-c-popover {
+  &__trigger {
+    @apply w-fit;
+  }
+
+  &__content {
+    @apply z-50 w-max overflow-visible;
+    width: auto !important;
+
+    &.is-hidden {
+      @apply invisible opacity-0 pointer-events-none;
+    }
+
+    &.is-modal {
+      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25));
+      @apply fixed top-0 left-0 h-full w-full transform translate-x-0 translate-y-0  p-12 pt-16 px-5 #{!important};
+      @apply flex flex-wrap justify-center items-start;
+
+      & > div {
+        @apply w-full max-h-full #{!important};
+      }
+    }
+  }
+}
diff --git a/frontend/src/ui-kit/lfx/popover/popover.vue b/frontend/src/ui-kit/lfx/popover/popover.vue
new file mode 100644
index 0000000000..f25041c78b
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/popover/popover.vue
@@ -0,0 +1,217 @@
+<!--
+Note: This is a copy of the LFX Insights implementation of the Popover component.
+This will replace the old Popover component in the future.
+-->
+<template>
+  <div
+    ref="trigger"
+    class="lfx-c-popover__trigger"
+    :class="{ 'is-open': isVisible }"
+    v-bind="$attrs"
+    @click="handleClick"
+  >
+    <slot />
+  </div>
+  <ClientOnly>
+    <teleport
+      v-if="isVisible && !props.disabled"
+      to="body"
+    >
+      <div
+        ref="popover"
+        class="lfx-c-popover__content"
+        :class="{ 'is-modal': props.isModal, [props.popoverClass || '']: props.popoverClass }"
+        @click="props.isModal ? closePopover() : null"
+      >
+        <slot
+          name="content"
+          :close="closePopover"
+        />
+      </div>
+    </teleport>
+  </ClientOnly>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import type { Instance, Placement, ModifierPhases } from '@popperjs/core';
+import { createPopper } from '@popperjs/core';
+
+const props = withDefaults(
+  defineProps<{
+    placement?: Placement;
+    triggerEvent?: 'click' | 'hover';
+    visibility?: boolean;
+    spacing?: number;
+    disabled?: boolean;
+    matchWidth?: boolean;
+    isModal?: boolean;
+    popoverClass?: string;
+  }>(),
+  {
+    placement: 'bottom-end',
+    triggerEvent: 'click',
+    visibility: false,
+    spacing: 4,
+    disabled: false,
+    matchWidth: false,
+    isModal: false,
+    popoverClass: '',
+  },
+);
+
+const emit = defineEmits<{ (e: 'update:visibility', value: boolean): void }>();
+
+const trigger = ref<HTMLElement | null>(null);
+const popover = ref<HTMLElement | null>(null);
+const popperInstance = ref<Instance | null>(null);
+const isVisible = ref(props.visibility);
+const closeTimeout = ref<number | null>(null);
+
+watch(
+  () => props.visibility,
+  (val) => {
+    isVisible.value = val;
+  },
+);
+watch(isVisible, (val) => emit('update:visibility', val));
+
+const createPopperInstance = () => {
+  if (trigger.value && popover.value) {
+    popperInstance.value = createPopper(trigger.value, popover.value, {
+      strategy: 'fixed',
+      placement: 'bottom-end',
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, props.spacing],
+          },
+        },
+        ...(props.matchWidth
+          ? [
+              {
+                name: 'sameWidth',
+                enabled: true,
+                phase: 'beforeWrite' as ModifierPhases,
+                requires: ['computeStyles'] as unknown as ModifierPhases[],
+                fn: ({ state }: { state: any }) => {
+                  Object.assign(state.styles.popper, {
+                    width: `${state.rects.reference.width}px`,
+                  });
+                },
+              },
+            ]
+          : []),
+      ],
+    });
+  }
+};
+
+const destroyPopperInstance = () => {
+  popperInstance.value?.destroy();
+  popperInstance.value = null;
+};
+
+const openPopover = async () => {
+  isVisible.value = true;
+  if (props.triggerEvent === 'click') {
+    document.addEventListener('click', handleClickOutside);
+  }
+};
+
+const closePopover = () => {
+  isVisible.value = false;
+  if (props.triggerEvent === 'click') {
+    document.removeEventListener('click', handleClickOutside);
+  }
+};
+
+const handleClick = (e: Event) => {
+  e.stopPropagation();
+  if (props.triggerEvent === 'click') {
+    if (isVisible.value) {
+      closePopover();
+    } else {
+      openPopover();
+    }
+  }
+};
+
+const handleClickOutside = (e: Event) => {
+  if (popover.value && !popover.value.contains(e.target as Node) && !trigger.value?.contains(e.target as Node)) {
+    closePopover();
+  }
+};
+
+const cancelClose = () => {
+  if (closeTimeout.value !== null) {
+    clearTimeout(closeTimeout.value);
+    closeTimeout.value = null;
+  }
+};
+
+const scheduleClose = () => {
+  closeTimeout.value = window.setTimeout(() => {
+    closePopover();
+  }, 150);
+};
+
+onMounted(() => {
+  if (import.meta.client) {
+    createPopperInstance();
+    if (props.triggerEvent === 'hover') {
+      trigger.value?.addEventListener('mouseenter', openPopover);
+      trigger.value?.addEventListener('mouseleave', scheduleClose);
+      popover.value?.addEventListener('mouseenter', cancelClose);
+      popover.value?.addEventListener('mouseleave', scheduleClose);
+    }
+  }
+});
+
+watch(isVisible, async (visible) => {
+  if (visible) {
+    await nextTick();
+    createPopperInstance();
+
+    if (props.triggerEvent === 'hover') {
+      // Safely add listeners now that popover is in DOM
+      popover.value?.addEventListener('mouseenter', cancelClose);
+      popover.value?.addEventListener('mouseleave', scheduleClose);
+    }
+  } else {
+    destroyPopperInstance();
+
+    if (props.triggerEvent === 'hover') {
+      // Clean up listeners when hiding
+      popover.value?.removeEventListener('mouseenter', cancelClose);
+      popover.value?.removeEventListener('mouseleave', scheduleClose);
+    }
+  }
+});
+
+onBeforeUnmount(() => {
+  destroyPopperInstance();
+  if (props.triggerEvent === 'hover') {
+    trigger.value?.removeEventListener('mouseenter', openPopover);
+    trigger.value?.removeEventListener('mouseleave', scheduleClose);
+    popover.value?.removeEventListener('mouseenter', cancelClose);
+    popover.value?.removeEventListener('mouseleave', scheduleClose);
+  }
+
+  if (closeTimeout.value !== null) {
+    clearTimeout(closeTimeout.value);
+  }
+});
+
+defineExpose({
+  closePopover,
+  openPopover,
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxPopover',
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/popover/types/PopoverPlacement.ts b/frontend/src/ui-kit/lfx/popover/types/PopoverPlacement.ts
new file mode 100644
index 0000000000..d07ed35dd7
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/popover/types/PopoverPlacement.ts
@@ -0,0 +1,18 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+export const popoverPlacements = [
+  'bottom-start',
+  'bottom',
+  'bottom-end',
+  'top',
+  'top-start',
+  'top-end',
+  'left',
+  'left-start',
+  'left-end',
+  'right',
+  'right-start',
+  'right-end',
+] as const;
+
+export type PopoverPlacement = (typeof popoverPlacements)[number];
diff --git a/frontend/src/ui-kit/lfx/popover/types/PopoverTrigger.ts b/frontend/src/ui-kit/lfx/popover/types/PopoverTrigger.ts
new file mode 100644
index 0000000000..f395b93ecf
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/popover/types/PopoverTrigger.ts
@@ -0,0 +1,5 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+export const popoverTrigger = ['click', 'hover'] as const;
+
+export type PopoverTrigger = (typeof popoverTrigger)[number];
diff --git a/frontend/src/utils/responsive.ts b/frontend/src/utils/responsive.ts
new file mode 100644
index 0000000000..78ecab918b
--- /dev/null
+++ b/frontend/src/utils/responsive.ts
@@ -0,0 +1,29 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+import { onMounted, onUnmounted, ref } from 'vue';
+
+const useResponsive = () => {
+  const pageWidth = ref(0);
+
+  const updatePageWidth = () => {
+    pageWidth.value = window.innerWidth;
+  };
+
+  const isMobileOrTablet = () => /Mobi|Android|iPhone|iPad|iPod/i.test(navigator?.userAgent);
+
+  onMounted(() => {
+    updatePageWidth();
+    window.addEventListener('resize', updatePageWidth);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', updatePageWidth);
+  });
+
+  return {
+    isMobileOrTablet,
+    pageWidth,
+  };
+};
+
+export default useResponsive;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 9483bb6125..4787e63d16 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,10 +1,9 @@
 /* eslint-disable */
-const { getThemeReplacementsValues } = require('./.tailwind/colorConverter.js');
+const { getThemeReplacementsValues } = require('./.tailwind/colorConverter.js')
 // tailwind.config.js
 const plugin = require('tailwindcss/plugin')
 
-
-const themeReplacements = getThemeReplacementsValues();
+const themeReplacements = getThemeReplacementsValues()
 
 const spacing = {
   0.5: '0.125rem',
@@ -63,7 +62,7 @@ const spacing = {
   120: '30rem',
   148: '37rem',
   254: '63.5rem',
-};
+}
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -189,12 +188,12 @@ module.exports = {
         3: '3px',
       },
       boxShadow: {
-        DEFAULT:
-          '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+        DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
         md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
         lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
         xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
         '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+        xs: '0 1px 2px -1px rgba(0, 0, 0, 0.10), 0 1px 3px 0 rgba(0, 0, 0, 0.10)',
       },
       fontSize: {
         '4xs': ['0.5rem'],
@@ -209,50 +208,17 @@ module.exports = {
         '5xl': ['4rem'],
         '8xl': ['8rem'],
         '10xl': ['10rem'],
-        h1: [
-          'var(--lf-heading-1-font-size)',
-          'var(--lf-heading-1-line-height)',
-        ],
-        h2: [
-          'var(--lf-heading-2-font-size)',
-          'var(--lf-heading-2-line-height)',
-        ],
-        h3: [
-          'var(--lf-heading-3-font-size)',
-          'var(--lf-heading-3-line-height)',
-        ],
-        h4: [
-          'var(--lf-heading-4-font-size)',
-          'var(--lf-heading-4-line-height)',
-        ],
-        h5: [
-          'var(--lf-heading-5-font-size)',
-          'var(--lf-heading-5-line-height)',
-        ],
-        h6: [
-          'var(--lf-heading-6-font-size)',
-          'var(--lf-heading-6-line-height)',
-        ],
-        xtiny: [
-          'var(--lf-text-xtiny-font-size)',
-          'var(--lf-text-xtiny-line-height)',
-        ],
-        tiny: [
-          'var(--lf-text-tiny-font-size)',
-          'var(--lf-text-tiny-line-height)',
-        ],
-        small: [
-          'var(--lf-text-small-font-size)',
-          'var(--lf-text-small-line-height)',
-        ],
-        medium: [
-          'var(--lf-text-medium-font-size)',
-          'var(--lf-text-medium-line-height)',
-        ],
-        large: [
-          'var(--lf-text-large-font-size)',
-          'var(--lf-text-large-line-height)',
-        ],
+        h1: ['var(--lf-heading-1-font-size)', 'var(--lf-heading-1-line-height)'],
+        h2: ['var(--lf-heading-2-font-size)', 'var(--lf-heading-2-line-height)'],
+        h3: ['var(--lf-heading-3-font-size)', 'var(--lf-heading-3-line-height)'],
+        h4: ['var(--lf-heading-4-font-size)', 'var(--lf-heading-4-line-height)'],
+        h5: ['var(--lf-heading-5-font-size)', 'var(--lf-heading-5-line-height)'],
+        h6: ['var(--lf-heading-6-font-size)', 'var(--lf-heading-6-line-height)'],
+        xtiny: ['var(--lf-text-xtiny-font-size)', 'var(--lf-text-xtiny-line-height)'],
+        tiny: ['var(--lf-text-tiny-font-size)', 'var(--lf-text-tiny-line-height)'],
+        small: ['var(--lf-text-small-font-size)', 'var(--lf-text-small-line-height)'],
+        medium: ['var(--lf-text-medium-font-size)', 'var(--lf-text-medium-line-height)'],
+        large: ['var(--lf-text-large-font-size)', 'var(--lf-text-large-line-height)'],
       },
       letterSpacing: {
         1: '0.0625rem',
@@ -288,8 +254,7 @@ module.exports = {
       transitionProperty: {
         DEFAULT:
           'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
-        colors:
-          'color, background-color, border-color, text-decoration-color, fill, stroke',
+        colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
       },
       width: {
         fit: 'fit-content',
@@ -315,7 +280,7 @@ module.exports = {
         '.overflow-y-unset': {
           'overflow-y': 'unset',
         },
-      });
+      })
     }),
   ],
-};
+}

From 0add8b7f4bbb1c79cf37e772db4d855f85cfc6df Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Thu, 4 Dec 2025 13:53:55 +0800
Subject: [PATCH 02/51] chore: added project filter

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../components/fragments/load-more.vue        |  87 +++++
 .../components/fragments/overview-filter.vue  | 359 ------------------
 .../components/fragments/project-filter.vue   | 134 +++++++
 .../fragments/project-group-filter.vue        | 188 +++++++++
 .../components/sections/overview-filter.vue   |  27 ++
 .../admin/modules/overview/pages/overview.vue |   2 +-
 .../modules/layout/components/menu/menu.vue   |   6 +-
 7 files changed, 440 insertions(+), 363 deletions(-)
 create mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/load-more.vue
 delete mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/overview-filter.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/components/sections/overview-filter.vue

diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/load-more.vue b/frontend/src/modules/admin/modules/overview/components/fragments/load-more.vue
new file mode 100644
index 0000000000..dc67e31c58
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/load-more.vue
@@ -0,0 +1,87 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div
+    ref="loadMore"
+    class="flex flex-row gap-2 items-center justify-center w-full"
+  >
+    <span>
+      <lf-spinner
+        size="16px"
+        class="text-brand-300"
+      />
+    </span>
+    <span class="text-sm text-brand-300 text-sm font-semibold">
+      {{ text }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
+
+const emit = defineEmits<{ (e: 'loadMore'): void }>();
+
+const props = defineProps<{
+  text: string;
+  isFetchingNextPage: boolean;
+}>();
+
+const loadMore = ref(null);
+
+const options = {
+  root: null,
+  rootMargin: '0px',
+  threshold: 0,
+};
+
+const handleIntersectCallback = (entries: IntersectionObserverEntry[]) => {
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      emit('loadMore');
+    }
+  });
+};
+
+const isLoadMoreVisible = () => {
+  if (!loadMore.value) {
+    return false;
+  }
+
+  return isElementVisible(loadMore.value as HTMLElement);
+};
+
+const isElementVisible = (element: HTMLElement) => {
+  const rect = element.getBoundingClientRect();
+  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+  return rect.top >= 0 && rect.bottom <= windowHeight;
+};
+
+onMounted(() => {
+  if (loadMore.value) {
+    const observer = new IntersectionObserver(handleIntersectCallback, options);
+    observer.observe(loadMore.value);
+  }
+});
+
+watch(
+  () => props.isFetchingNextPage,
+  (newVal: boolean) => {
+    if (!newVal) {
+      // check if the load more is visible
+      if (isLoadMoreVisible()) {
+        emit('loadMore');
+      }
+    }
+  },
+);
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfLoadMore',
+};
+</script>
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/overview-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/overview-filter.vue
deleted file mode 100644
index 60a435389a..0000000000
--- a/frontend/src/modules/admin/modules/overview/components/fragments/overview-filter.vue
+++ /dev/null
@@ -1,359 +0,0 @@
-<template>
-  <!-- <el-popover
-    v-model:visible="isPopoverVisible"
-    placement="bottom-start"
-    trigger="click"
-    popper-class="project-groups-select-popper"
-    :teleported="false"
-    width="255px"
-  >
-    <template #reference>
-      <el-input
-        v-model="model"
-        class="project-groups-select-input"
-        placeholder="Select project group..."
-        readonly
-        :suffix-icon="isPopoverVisible ? ArrowUpIcon : ArrowDownIcon"
-      />
-    </template>
-
-    <div
-      v-if="isSearchVisible"
-      class="border-b border-gray-100 px-1 w-full sticky top-0 bg-white"
-    >
-      <el-input
-        id="filterSearch"
-        v-model="searchQuery"
-        placeholder="Search..."
-        class="filter-dropdown-search"
-        :prefix-icon="SearchIcon"
-        clearable
-      />
-    </div>
-
-    <div>
-      <div
-        v-if="isPending"
-        class="text-gray-400 px-3 h-20 flex items-center justify-center"
-      >
-        <lf-icon
-          name="circle-notch"
-          class="animate-spin text-gray-400"
-          :size="16"
-        />
-        <span class="text-tiny ml-1 text-gray-400">
-          Loading project groups...
-        </span>
-      </div>
-      <div
-        v-else-if="projectGroupsList.length"
-        class="flex flex-col gap-1 overflow-auto p-2"
-      >
-        <div
-          v-for="projectGroup of projectGroupsList"
-          :key="projectGroup.id"
-          class="py-1.5 px-2 hover:bg-gray-50 rounded cursor-pointer"
-          :class="{
-            'bg-primary-50': projectGroup.id === selectedProjectGroup?.id,
-          }"
-          @click="onOptionClick(projectGroup)"
-        >
-          <div class="flex gap-0.5 items-start truncate">
-            <div class="block truncate mr-2">
-              <div class="text-small leading-5 text-gray-900 truncate">
-                {{ projectGroup.name }}
-              </div>
-              <div class="text-tiny text-gray-400">
-                {{ pluralize("project", projectGroup.projects.length, true) }}
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          v-if="isFetchingNextPage"
-          class="text-gray-400 px-3 h-20 flex items-center justify-center"
-        >
-          <lf-icon
-            name="circle-notch"
-            class="animate-spin text-gray-400"
-            :size="16"
-          />
-          <span class="text-tiny ml-1 text-gray-400">
-            Loading project groups...
-          </span>
-        </div>
-      </div>
-      <div
-        v-else
-        class="text-gray-400 px-3 h-20 flex items-center justify-center"
-      >
-        <span class="text-tiny text-gray-400"> No project groups found </span>
-      </div>
-    </div>
-  </el-popover> -->
-
-  <lfx-dropdown-select
-    v-model="selectedProjectGroup"
-    width="255px"
-    match-width="false"
-    dropdown-class="max-h-80"
-    placement="bottom-end"
-  >
-    <template #trigger="{ selectedOption }">
-      <lfx-dropdown-selector
-        size="medium"
-        type="transparent"
-        class="!rounded-full flex items-center justify-center w-full"
-      >
-        <div class="flex items-center gap-2">
-          <lf-icon
-            name="rectangle-history"
-            :size="16"
-          />
-          <span class="text-sm text-neutral-900 truncate">
-            {{ selectedOption.label || 'All collections' }}
-          </span>
-        </div>
-      </lfx-dropdown-selector>
-    </template>
-
-    <template #default>
-      <div class="sticky -top-1 z-10 bg-white w-full -mt-1 pt-1 flex flex-col gap-1">
-        <!-- All collections option -->
-        <lfx-dropdown-item
-          value="all"
-          label="All collections"
-        />
-
-        <lfx-dropdown-separator />
-
-        <!-- Search input -->
-        <lfx-dropdown-search
-          v-model="searchQuery"
-          placeholder="Search collections..."
-          lazy
-          class=""
-        />
-
-        <lfx-dropdown-separator />
-      </div>
-
-      <!-- Collections list -->
-      <div
-        v-if="isPending"
-        class="py-8 flex justify-center"
-      >
-        <lf-spinner />
-      </div>
-
-      <!-- <div
-        v-else-if="!collections.length && searchQuery"
-        class="py-4 px-3 text-sm text-neutral-500 text-center"
-      >
-        No collections found
-      </div> -->
-
-      <template v-else>
-        <lfx-dropdown-item
-          v-for="projectGroup in projectGroupsList"
-          :key="projectGroup.id"
-          :value="projectGroup.id"
-          :label="projectGroup.name"
-        />
-      </template>
-    </template>
-  </lfx-dropdown-select>
-</template>
-
-<script setup lang="ts">
-import {
-  h, ref, onMounted, computed, nextTick, watch,
-  onBeforeUnmount,
-} from 'vue';
-import { storeToRefs } from 'pinia';
-import { useLfSegmentsStore } from '@/modules/lf/segments/store';
-import pluralize from 'pluralize';
-import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
-import {
-  EventType,
-  FeatureEventKey,
-} from '@/shared/modules/monitoring/types/event';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
-import { QueryFunction, useInfiniteQuery } from '@tanstack/vue-query';
-import { Pagination } from '@/shared/types/Pagination';
-import { TanstackKey } from '@/shared/types/tanstack';
-import { useDebounce } from '@vueuse/core';
-
-import { ToastStore } from '@/shared/message/notification';
-import { segmentService } from '@/modules/lf/segments/segments.service';
-import { ProjectGroup } from '@/modules/lf/segments/types/Segments';
-import LfxDropdownSelect from '@/ui-kit/lfx/dropdown/dropdown-select.vue';
-import LfxDropdownSelector from '@/ui-kit/lfx/dropdown/dropdown-selector.vue';
-import LfxDropdownItem from '@/ui-kit/lfx/dropdown/dropdown-item.vue';
-import LfxDropdownSeparator from '@/ui-kit/lfx/dropdown/dropdown-separator.vue';
-import LfxDropdownSearch from '@/ui-kit/lfx/dropdown/dropdown-search.vue';
-import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
-
-const SearchIcon = h(
-  'i', // type
-  { class: 'fa-light fa-magnifying-glass c-icon' }, // props
-  [],
-);
-
-const ArrowDownIcon = h(
-  'i', // type
-  { class: 'fa-light fa-chevron-down c-icon' }, // props
-  [],
-);
-
-const ArrowUpIcon = h(
-  'i', // type
-  { class: 'fa-light fa-chevron-up c-icon' }, // props
-  [],
-);
-
-const lsSegmentsStore = useLfSegmentsStore();
-const { selectedProjectGroup } = storeToRefs(lsSegmentsStore);
-const { updateSelectedProjectGroup } = lsSegmentsStore;
-
-const searchQuery = ref('');
-const isPopoverVisible = ref(false);
-const searchValue = useDebounce(searchQuery, 300);
-const isSearchVisible = computed(() => projectGroupsList.value.length > 5 || searchQuery.value.length > 0);
-
-let scrollContainer: HTMLElement | null = null;
-
-const { trackEvent } = useProductTracking();
-
-const model = computed({
-  get() {
-    return selectedProjectGroup.value?.name;
-  },
-  set(id) {
-    updateSelectedProjectGroup(id);
-  },
-});
-
-const queryKey = computed(() => [
-  TanstackKey.ADMIN_PROJECT_GROUPS,
-  searchValue.value,
-]);
-
-const projectGroupsQueryFn = segmentService.queryProjectGroups(() => ({
-  limit: 20,
-  offset: 0,
-  filter: {
-    name: searchQuery.value,
-  },
-})) as QueryFunction<Pagination<ProjectGroup>, readonly unknown[], unknown>;
-
-const {
-  data,
-  isPending,
-  isFetchingNextPage,
-  fetchNextPage,
-  hasNextPage,
-  isSuccess,
-  error,
-} = useInfiniteQuery<Pagination<ProjectGroup>, Error>({
-  queryKey,
-  queryFn: projectGroupsQueryFn,
-  getNextPageParam: (lastPage) => {
-    const nextPage = lastPage.offset + lastPage.limit;
-    const totalRows = lastPage.count;
-    return nextPage < totalRows ? nextPage : undefined;
-  },
-  initialPageParam: 0,
-});
-
-const projectGroupsList = computed((): ProjectGroup[] => {
-  if (isSuccess.value && data.value) {
-    return data.value.pages.reduce(
-      (acc, page) => acc.concat(page.rows),
-      [] as ProjectGroup[],
-    );
-  }
-  return [];
-});
-
-// Infinite scroll handler
-function onScroll(e: Event) {
-  if (!scrollContainer) return;
-  const threshold = 40;
-
-  const target = e.target as HTMLElement;
-  if (
-    !isFetchingNextPage.value
-    && hasNextPage.value
-    && target.scrollHeight - target.scrollTop - target.clientHeight < threshold
-  ) {
-    fetchNextPage();
-  }
-}
-
-watch(error, (err) => {
-  if (err) {
-    ToastStore.error('Something went wrong while fetching project groups');
-  }
-});
-
-onMounted(() => {
-  nextTick(() => {
-    scrollContainer = document.querySelector(
-      '.project-groups-select-popper',
-    );
-    if (scrollContainer) {
-      scrollContainer.addEventListener('scroll', onScroll);
-    }
-  });
-});
-
-const onOptionClick = ({ id, name }: ProjectGroup) => {
-  // trackEvent({
-  //   key: FeatureEventKey.SELECT_PROJECT_GROUP,
-  //   type: EventType.FEATURE,
-  //   properties: {
-  //     projectGroupId: id,
-  //     projectName: name,
-  //   },
-  // });
-
-  isPopoverVisible.value = false;
-  // updateSelectedProjectGroup(id);
-};
-
-onBeforeUnmount(() => {
-  if (scrollContainer) {
-    scrollContainer.removeEventListener('scroll', onScroll);
-  }
-});
-</script>
-
-<script lang="ts">
-export default {
-  name: 'AppLfOverviewFilter',
-};
-</script>
-
-<style lang="scss">
-.project-groups-select-popper.el-popper {
-  max-width: 236px;
-  max-height: 480px;
-  overflow: auto;
-  @apply p-0;
-}
-
-.project-groups-select-input {
-  @apply cursor-pointer relative w-full;
-  height: 32px !important;
-
-  .el-input__wrapper {
-    @apply rounded;
-    @apply h-8 px-3;
-  }
-
-  .el-input__inner {
-    @apply cursor-pointer text-xs truncate pr-6;
-  }
-}
-</style>
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
new file mode 100644
index 0000000000..ab835501f4
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
@@ -0,0 +1,134 @@
+<template>
+  <lfx-dropdown-select
+    v-model="selectedProject"
+    width="255px"
+    match-width="false"
+    dropdown-class="max-h-80"
+    placement="bottom-end"
+  >
+    <template #trigger="{ selectedOption }">
+      <lfx-dropdown-selector
+        size="medium"
+        type="filled"
+        class="flex items-center justify-center w-full !rounded-l-none"
+        :class="{
+          '!rounded-r-none': selectedProject,
+        }"
+      >
+        <div class="flex items-center gap-2">
+          <lf-icon
+            name="folder-tree"
+            :size="16"
+          />
+          <span class="text-sm text-neutral-900 truncate">
+            {{ trimDisplay(selectedOption?.value?.name || '') || 'All projects' }}
+          </span>
+        </div>
+      </lfx-dropdown-selector>
+    </template>
+
+    <template #default>
+      <div class="sticky -top-1 z-10 bg-white w-full -mt-1 pt-1 flex flex-col gap-1">
+        <!-- All projects option -->
+        <lfx-dropdown-item
+          value="all"
+          label="All projects"
+          :selected="!selectedProject"
+          @click="selectedProject = null"
+          :class="{
+            '!bg-blue-50': !selectedProject,
+          }"
+        />
+
+        <lfx-dropdown-separator />
+
+        <!-- Search input -->
+        <lfx-dropdown-search
+          v-model="searchQuery"
+          placeholder="Search projects..."
+          lazy
+          class=""
+        />
+
+        <lfx-dropdown-separator />
+      </div>
+
+      <!-- Projects list -->
+      <div
+        v-if="!projectsList.length && searchQuery"
+        class="py-4 px-3 text-sm text-neutral-500 text-center"
+      >
+        No projects found
+      </div>
+
+      <template v-else>
+        <lfx-dropdown-item
+          v-for="project in projectsList"
+          :key="project.id"
+          :value="project.id"
+          :label="project.name"
+          :selected="selectedProject?.id === project.id"
+          @click="selectProject(project.id)"
+          :class="{
+            '!bg-blue-50': selectedProject?.id === project.id,
+          }"
+        />
+      </template>
+    </template>
+  </lfx-dropdown-select>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+} from 'vue';
+import { storeToRefs } from 'pinia';
+import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { useDebounce } from '@vueuse/core';
+
+import { Project } from '@/modules/lf/segments/types/Segments';
+import LfxDropdownSelect from '@/ui-kit/lfx/dropdown/dropdown-select.vue';
+import LfxDropdownSelector from '@/ui-kit/lfx/dropdown/dropdown-selector.vue';
+import LfxDropdownItem from '@/ui-kit/lfx/dropdown/dropdown-item.vue';
+import LfxDropdownSeparator from '@/ui-kit/lfx/dropdown/dropdown-separator.vue';
+import LfxDropdownSearch from '@/ui-kit/lfx/dropdown/dropdown-search.vue';
+
+const overviewStore = useOverviewStore();
+const { selectedProject } = storeToRefs(overviewStore);
+
+const searchQuery = ref('');
+const searchValue = useDebounce(searchQuery, 300);
+
+const props = defineProps<{
+  projects: Project[];
+}>();
+
+const trimDisplay = (name: string) => {
+  return name.length > 20 ? `${name.slice(0, 20)}...` : name;
+};
+
+const selectProject = (projectId: string) => {
+  const project = props.projects.find(p => p.id === projectId);
+  selectedProject.value = project || null;
+};
+
+const projectsList = computed(() => {
+  const filtered = props.projects.filter((project) => {
+    if (!searchValue.value) return true;
+    return project.name.toLowerCase().includes(searchValue.value.toLowerCase());
+  });
+  
+  return filtered.map((project) => ({
+    id: project.id,
+    name: project.name,
+  }));
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfProjectFilter',
+};
+</script>
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue
new file mode 100644
index 0000000000..9abcc37759
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue
@@ -0,0 +1,188 @@
+<template>
+  <lfx-dropdown-select
+    v-model="selectedProjectGroup"
+    width="255px"
+    match-width="false"
+    dropdown-class="max-h-80"
+    placement="bottom-end"
+  >
+    <template #trigger="{ selectedOption }">
+      <lfx-dropdown-selector
+        size="medium"
+        type="filled"
+        class="flex items-center justify-center w-full"
+        :class="{
+          '!rounded-r-none': selectedProjectGroup,
+        }"
+      >
+        <div class="flex items-center gap-2">
+          <lf-icon
+            name="folder-tree"
+            :size="16"
+          />
+          <span class="text-sm text-neutral-900 truncate">
+            {{ trimDisplay(selectedOption?.value?.name || '') || 'All project groups' }}
+          </span>
+        </div>
+      </lfx-dropdown-selector>
+    </template>
+
+    <template #default>
+      <div class="sticky -top-1 z-10 bg-white w-full -mt-1 pt-1 flex flex-col gap-1">
+        <!-- All project groups option -->
+        <lfx-dropdown-item
+          value="all"
+          label="All project groups"
+          :selected="!selectedProjectGroup"
+          @click="selectedProjectGroup = null"
+          :class="{
+            '!bg-blue-50': !selectedProjectGroup,
+          }"
+        />
+
+        <lfx-dropdown-separator />
+
+        <!-- Search input -->
+        <lfx-dropdown-search
+          v-model="searchQuery"
+          placeholder="Search project groups..."
+          lazy
+          class=""
+        />
+
+        <lfx-dropdown-separator />
+      </div>
+
+      <!-- Project groups list -->
+      <div
+        v-if="isPending"
+        class="py-8 flex justify-center"
+      >
+        <lf-spinner />
+      </div>
+
+      <div
+        v-else-if="!projectGroupsList.length && searchQuery"
+        class="py-4 px-3 text-sm text-neutral-500 text-center"
+      >
+        No project groups found
+      </div>
+
+      <template v-else>
+        <lfx-dropdown-item
+          v-for="projectGroup in projectGroupsList"
+          :key="projectGroup.id"
+          :value="projectGroup.id"
+          :label="projectGroup.name"
+          :selected="selectedProjectGroup?.id === projectGroup.id"
+          @click="selectedProjectGroup = projectGroup"
+          :class="{
+            '!bg-blue-50': selectedProjectGroup?.id === projectGroup.id,
+          }"
+        />
+      </template>
+
+      <div
+        v-if="isFetchingNextPage"
+        class="py-8 flex justify-center"
+      >
+        <lf-spinner />
+      </div>
+
+      <app-lf-load-more
+        v-if="!isFetchingNextPage && hasNextPage"
+        :is-fetching-next-page="isFetchingNextPage"
+        text="Loading more project groups..."
+        @load-more="fetchNextPage"
+      />
+    </template>
+  </lfx-dropdown-select>
+</template>
+
+<script setup lang="ts">
+import {
+  ref, computed, watch,
+} from 'vue';
+import { storeToRefs } from 'pinia';
+import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { QueryFunction, useInfiniteQuery } from '@tanstack/vue-query';
+import { Pagination } from '@/shared/types/Pagination';
+import { TanstackKey } from '@/shared/types/tanstack';
+import { useDebounce } from '@vueuse/core';
+
+import { ToastStore } from '@/shared/message/notification';
+import { segmentService } from '@/modules/lf/segments/segments.service';
+import { ProjectGroup } from '@/modules/lf/segments/types/Segments';
+import LfxDropdownSelect from '@/ui-kit/lfx/dropdown/dropdown-select.vue';
+import LfxDropdownSelector from '@/ui-kit/lfx/dropdown/dropdown-selector.vue';
+import LfxDropdownItem from '@/ui-kit/lfx/dropdown/dropdown-item.vue';
+import LfxDropdownSeparator from '@/ui-kit/lfx/dropdown/dropdown-separator.vue';
+import LfxDropdownSearch from '@/ui-kit/lfx/dropdown/dropdown-search.vue';
+import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
+import AppLfLoadMore from './load-more.vue';
+
+const overviewStore = useOverviewStore();
+const { selectedProjectGroup } = storeToRefs(overviewStore);
+
+const searchQuery = ref('');
+const searchValue = useDebounce(searchQuery, 300);
+
+const queryKey = computed(() => [
+  TanstackKey.ADMIN_PROJECT_GROUPS,
+  searchValue.value,
+]);
+
+const projectGroupsQueryFn = segmentService.queryProjectGroups(() => ({
+  limit: 20,
+  offset: 0,
+  filter: {
+    name: searchQuery.value,
+  },
+})) as QueryFunction<Pagination<ProjectGroup>, readonly unknown[], unknown>;
+
+const {
+  data,
+  isPending,
+  isFetchingNextPage,
+  fetchNextPage,
+  hasNextPage,
+  isSuccess,
+  error,
+} = useInfiniteQuery<Pagination<ProjectGroup>, Error>({
+  queryKey,
+  queryFn: projectGroupsQueryFn,
+  getNextPageParam: (lastPage) => {
+    const nextPage = lastPage.offset + lastPage.limit;
+    const totalRows = lastPage.count;
+    return nextPage < totalRows ? nextPage : undefined;
+  },
+  initialPageParam: 0,
+});
+
+const projectGroupsList = computed((): ProjectGroup[] => {
+  if (isSuccess.value && data.value) {
+    return data.value.pages.reduce(
+      (acc, page) => acc.concat(page.rows),
+      [] as ProjectGroup[],
+    );
+  }
+  return [];
+});
+
+const trimDisplay = (name: string) => {
+  return name.length > 20 ? `${name.slice(0, 20)}...` : name;
+};
+
+watch(error, (err) => {
+  if (err) {
+    ToastStore.error('Something went wrong while fetching project groups');
+  }
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfProjectGroupFilter',
+};
+</script>
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/overview-filter.vue b/frontend/src/modules/admin/modules/overview/components/sections/overview-filter.vue
new file mode 100644
index 0000000000..95df6f6bb5
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/sections/overview-filter.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="flex items-center">
+    <app-lf-project-group-filter />
+    <app-lf-project-filter :projects="projects" v-if="selectedProjectGroup && projects.length > 0" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import AppLfProjectGroupFilter from '../fragments/project-group-filter.vue';
+import AppLfProjectFilter from '../fragments/project-filter.vue';
+import { useOverviewStore } from '../../store/overview.store';
+import { storeToRefs } from 'pinia';
+
+const overviewStore = useOverviewStore();
+const { selectedProjectGroup } = storeToRefs(overviewStore);
+
+const projects = computed(() => {
+  return selectedProjectGroup.value?.projects || [];
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfOverviewFilter',
+};
+</script>
diff --git a/frontend/src/modules/admin/modules/overview/pages/overview.vue b/frontend/src/modules/admin/modules/overview/pages/overview.vue
index 73de99f8b8..d436144264 100644
--- a/frontend/src/modules/admin/modules/overview/pages/overview.vue
+++ b/frontend/src/modules/admin/modules/overview/pages/overview.vue
@@ -18,7 +18,7 @@
 import AppLfOverviewSummary from '@/modules/admin/modules/overview/components/sections/summary.vue';
 import AppLfOverviewIntegrationStatus from '@/modules/admin/modules/overview/components/sections/integration-status.vue';
 import AppLfOverviewIntegrationDetails from '@/modules/admin/modules/overview/components/sections/integration-details.vue';
-import AppLfOverviewFilter from '@/modules/admin/modules/overview/components/fragments/overview-filter.vue';
+import AppLfOverviewFilter from '@/modules/admin/modules/overview/components/sections/overview-filter.vue';
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/modules/layout/components/menu/menu.vue b/frontend/src/modules/layout/components/menu/menu.vue
index ac73f166a3..e1d01b47ae 100644
--- a/frontend/src/modules/layout/components/menu/menu.vue
+++ b/frontend/src/modules/layout/components/menu/menu.vue
@@ -4,10 +4,10 @@
     :class="isCollapsed ? 'w-16 min-w-16' : 'w-65 min-w-65'"
   >
     <lf-menu-link
-      title="All project groups"
-      icon="folders"
+      title="Overview"
+      icon="gauge-high"
       :is-collapsed="isCollapsed"
-      :to="{ path: '/project-groups' }"
+      :to="{ path: '/overview' }"
     />
     <div class="px-3 py-4">
       <app-lf-menu-project-group-selection

From 3891f9ff094ccfe62c542553300ac5f1188ace6e Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Thu, 4 Dec 2025 14:20:54 +0800
Subject: [PATCH 03/51] chore: added integration status section

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../fragments/integrations-filter.vue         | 108 +++++++++++++++++
 .../components/fragments/project-filter.vue   |   2 +-
 .../sections/integration-status.vue           | 112 +++++++++++++++++-
 .../modules/overview/store/overview.store.ts  |   2 +
 frontend/src/ui-kit/index.scss                |   2 +-
 frontend/src/ui-kit/lfx/chip/chip.scss        |  33 ++++++
 frontend/src/ui-kit/lfx/chip/chip.vue         |  50 ++++++++
 .../src/ui-kit/lfx/chip/types/chip.types.ts   |   6 +
 8 files changed, 311 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue
 create mode 100644 frontend/src/ui-kit/lfx/chip/chip.scss
 create mode 100644 frontend/src/ui-kit/lfx/chip/chip.vue
 create mode 100644 frontend/src/ui-kit/lfx/chip/types/chip.types.ts

diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue
new file mode 100644
index 0000000000..5958594850
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue
@@ -0,0 +1,108 @@
+<template>
+  <lfx-dropdown-select
+    v-model="selectedIntegrationId"
+    width="200px"
+    :match-width="false"
+    dropdown-class="max-h-80"
+    placement="bottom-end"
+  >
+    <template #trigger>
+      <lfx-dropdown-selector
+        size="medium"
+        type="filled"
+      >
+        <div class="flex items-center gap-1.5">
+          <lf-icon
+            name="grid-round-2"
+            :size="20"
+          />
+          <span class="text-sm text-neutral-900 font-semibold">
+            {{ selectedIntegration?.name || 'All integrations' }}
+          </span>
+          <lf-icon
+            name="angle-down"
+            :size="16"
+            class="text-neutral-400"
+          />
+        </div>
+      </lfx-dropdown-selector>
+    </template>
+
+    <template #default>
+      <div class="sticky -top-1 z-10 bg-white w-full -mt-1 pt-1 flex flex-col gap-1">
+        <!-- All integrations option -->
+        <lfx-dropdown-item
+          value="all"
+          label="All integrations"
+          @click="selectedIntegrationId = 'all'"
+          :selected="selectedIntegrationId === 'all'"
+          :class="{
+            '!bg-blue-50': selectedIntegrationId === 'all',
+          }"
+        />
+      </div>
+
+      <lfx-dropdown-item
+        v-for="integration in integrations"
+        :key="integration.id"
+        :value="integration.id"
+        :label="integration.name"
+        @click="selectIntegration(integration.id)"
+        :selected="selectedIntegrationId === integration.id"
+        :class="{
+          '!bg-blue-50': selectedIntegrationId === integration.id,
+        }"
+      />
+    </template>
+  </lfx-dropdown-select>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+} from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import LfxDropdownSelect from '@/ui-kit/lfx/dropdown/dropdown-select.vue';
+import LfxDropdownSelector from '@/ui-kit/lfx/dropdown/dropdown-selector.vue';
+import LfxDropdownItem from '@/ui-kit/lfx/dropdown/dropdown-item.vue';
+import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
+import { storeToRefs } from 'pinia';
+
+const overviewStore = useOverviewStore();
+const { selectedIntegrationId } = storeToRefs(overviewStore);
+
+interface Integration {
+  id: string;
+  name: string;
+}
+
+const props = defineProps<{
+  integrations: Integration[];
+}>();
+
+// Mock data for integrations (can be replaced with props.integrations)
+const mockIntegrations: Integration[] = [
+  { id: 'github', name: 'GitHub' },
+  { id: 'slack', name: 'Slack' },
+  { id: 'discord', name: 'Discord' },
+  { id: 'linkedin', name: 'LinkedIn' },
+  { id: 'twitter', name: 'Twitter' },
+];
+
+const selectIntegration = (integrationId: string) => {
+  selectedIntegrationId.value = integrationId;
+};
+
+const selectedIntegration = computed(() => {
+  if (selectedIntegrationId.value === 'all') return null;
+  const integrations = props.integrations || mockIntegrations;
+  return integrations.find(i => i.id === selectedIntegrationId.value) || null;
+});
+
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfIntegrationsFilter',
+};
+</script>
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
index ab835501f4..3a51c3585f 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
@@ -17,7 +17,7 @@
       >
         <div class="flex items-center gap-2">
           <lf-icon
-            name="folder-tree"
+            name="folders"
             :size="16"
           />
           <span class="text-sm text-neutral-900 truncate">
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
index 714ace7613..c3e677f062 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
@@ -1,10 +1,118 @@
 <template>
-  <div>
-    show integration status cards here
+  <div class="flex flex-col gap-8 w-full">
+    <!-- Header with title and dropdown -->
+    <div class="flex items-center justify-between w-full">
+      <div class="flex items-center">
+        <h2 class="text-xl font-semibold text-black font-primary">
+          Integration status
+        </h2>
+      </div>
+      <div class="flex items-center">
+        <integrations-filter
+          ref="integrationsFilterRef"
+          :integrations="mockIntegrations"
+        />
+      </div>
+    </div>
+
+    <!-- Status chips -->
+    <div class="flex gap-3 items-start">
+      <lfx-chip
+        v-for="status in statusChips"
+        :key="status.key"
+        type="bordered"
+        size="default"
+      >
+        <lf-icon
+          v-if="status.icon"
+          :name="status.icon"
+          :size="15"
+          :class="status.iconClass"
+        />
+        <span class="text-sm text-neutral-900 font-normal">
+          {{ status.label }}
+        </span>
+        <span class="text-sm text-neutral-900 font-semibold">
+          {{ status.count }}
+        </span>
+      </lfx-chip>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import {
+  ref,
+  computed,
+} from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import LfxChip from '@/ui-kit/lfx/chip/chip.vue';
+import IntegrationsFilter from '@/modules/admin/modules/overview/components/fragments/integrations-filter.vue';
+import { lfIntegrationStatusesTabs } from '@/modules/admin/modules/integration/config/status';
+
+interface Integration {
+  id: string;
+  name: string;
+}
+
+// Mock data for integrations
+const mockIntegrations: Integration[] = [
+  { id: 'github', name: 'GitHub' },
+  { id: 'slack', name: 'Slack' },
+  { id: 'discord', name: 'Discord' },
+  { id: 'linkedin', name: 'LinkedIn' },
+  { id: 'twitter', name: 'Twitter' },
+];
+
+// Mock data for status counts
+const mockStatusCounts = {
+  done: 240,
+  connecting: 4,
+  waitingForAction: 2,
+  error: 1,
+  notConnected: 126,
+};
+
+const integrationsFilterRef = ref();
+
+const statusChips = computed(() => {
+  return Object.entries(lfIntegrationStatusesTabs).map(([key, config]) => {
+    let iconClass = 'shrink-0';
+    let icon = '';
+
+    // Map status to icons and colors based on the design
+    switch (key) {
+      case 'done':
+        iconClass += ' text-green-500';
+        icon = 'check-circle';
+        break;
+      case 'connecting':
+        iconClass += ' text-blue-500';
+        icon = 'clock';
+        break;
+      case 'waitingForAction':
+        iconClass += ' text-orange-500';
+        icon = 'triangle-exclamation';
+        break;
+      case 'error':
+        iconClass += ' text-red-600';
+        icon = 'circle-exclamation';
+        break;
+      case 'notConnected':
+        iconClass += ' text-neutral-900';
+        icon = 'link-simple-slash';
+        break;
+    }
+
+    return {
+      key,
+      label: config.tabs.text,
+      count: mockStatusCounts[key as keyof typeof mockStatusCounts] || 0,
+      icon,
+      iconClass,
+    };
+  });
+});
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/modules/admin/modules/overview/store/overview.store.ts b/frontend/src/modules/admin/modules/overview/store/overview.store.ts
index e3270bc786..08dba74073 100644
--- a/frontend/src/modules/admin/modules/overview/store/overview.store.ts
+++ b/frontend/src/modules/admin/modules/overview/store/overview.store.ts
@@ -5,9 +5,11 @@ import { Project, ProjectGroup } from '@/modules/lf/segments/types/Segments'
 export const useOverviewStore = defineStore('overview', () => {
   const selectedProjectGroup = ref<ProjectGroup | null>(null)
   const selectedProject = ref<Project | null>(null)
+  const selectedIntegrationId = ref<string | null>(null)
 
   return {
     selectedProjectGroup,
     selectedProject,
+    selectedIntegrationId,
   }
 })
diff --git a/frontend/src/ui-kit/index.scss b/frontend/src/ui-kit/index.scss
index 400823aa34..db438da436 100644
--- a/frontend/src/ui-kit/index.scss
+++ b/frontend/src/ui-kit/index.scss
@@ -24,4 +24,4 @@
 @import 'tag/tag';
 @import 'lfx/dropdown/dropdown';
 @import 'lfx/popover/popover';
-
+@import 'lfx/chip/chip';
diff --git a/frontend/src/ui-kit/lfx/chip/chip.scss b/frontend/src/ui-kit/lfx/chip/chip.scss
new file mode 100644
index 0000000000..6b357aa1e4
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/chip/chip.scss
@@ -0,0 +1,33 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+.p-chip {
+  @apply inline-flex items-center gap-1.5 text-sm rounded-full px-2.5 text-neutral-900 h-7;
+
+  .c-icon {
+    @apply text-base;
+  }
+
+  .p-chip-remove-icon {
+    @apply text-base cursor-pointer text-neutral-300;
+  }
+
+  &-size-small {
+    @apply text-xs h-6;
+
+    .c-icon {
+      @apply text-sm;
+    }
+
+    .p-chip-remove-icon {
+      @apply text-sm;
+    }
+  }
+
+  &-type-bordered {
+    @apply bg-white border border-solid border-neutral-200;
+  }
+
+  &-type-default {
+    @apply bg-neutral-100 border-0;
+  }
+}
diff --git a/frontend/src/ui-kit/lfx/chip/chip.vue b/frontend/src/ui-kit/lfx/chip/chip.vue
new file mode 100644
index 0000000000..c0628fa3c5
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/chip/chip.vue
@@ -0,0 +1,50 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div
+    v-if="isVisible"
+    :class="`p-chip p-chip-size-${props.size} p-chip-type-${props.type}`"
+    role="alert"
+  >
+    <slot />
+    <i
+      v-if="props.removable"
+      class="p-chip-remove-icon fa-solid fa-circle-xmark"
+      @click="dismiss"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { ChipSize, ChipType } from './types/chip.types';
+
+const props = withDefaults(
+  defineProps<{
+    size?: ChipSize;
+    type?: ChipType;
+    removable?: boolean;
+  }>(),
+  {
+    type: 'default',
+    size: 'default',
+    removable: false,
+  },
+);
+const emit = defineEmits<{ (e: 'dismissed'): void }>();
+
+const isVisible = ref(true);
+
+const dismiss = () => {
+  isVisible.value = false;
+  emit('dismissed');
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxChip',
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/chip/types/chip.types.ts b/frontend/src/ui-kit/lfx/chip/types/chip.types.ts
new file mode 100644
index 0000000000..ab2fc6e994
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/chip/types/chip.types.ts
@@ -0,0 +1,6 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+export const chipSizes = ['small', 'default'] as const;
+export const chipTypes = ['bordered', 'default'] as const;
+export type ChipSize = (typeof chipSizes)[number];
+export type ChipType = (typeof chipTypes)[number];

From a4db2b8b3c1843c5d480ac052428ca7fbe669412 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Thu, 4 Dec 2025 14:42:47 +0800
Subject: [PATCH 04/51] chore: added integration details with mock data

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../sections/integration-details.vue          | 263 +++++++++++++++++-
 1 file changed, 260 insertions(+), 3 deletions(-)

diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
index 9e36fd84fd..4db28d8f3f 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
@@ -1,14 +1,271 @@
 <template>
-  <div>
-    show integration details here
+  <div class="bg-white border border-gray-200 rounded-lg shadow-sm">
+    <!-- Header -->
+    <div class="border-b border-gray-200 px-5 pt-5 pb-0">
+      <h3 class="text-base font-semibold text-gray-900 mb-6">
+        In progress & troubleshooting
+      </h3>
+      
+      <!-- Tabs -->
+      <el-tabs v-model="activeTab" class="integration-tabs">
+        <el-tab-pane label="In progress (4)" name="in-progress">
+          <template #label>
+            <div class="flex items-center gap-1.5">
+              <lf-icon name="clock" :size="16" class="text-gray-600" />
+              <span>In progress (4)</span>
+            </div>
+          </template>
+        </el-tab-pane>
+        <el-tab-pane label="Action required (2)" name="action-required">
+          <template #label>
+            <div class="flex items-center gap-1.5">
+              <lf-icon name="triangle-exclamation" :size="16" class="text-gray-600" />
+              <span>Action required (2)</span>
+            </div>
+          </template>
+        </el-tab-pane>
+        <el-tab-pane label="Connection failed (1)" name="connection-failed">
+          <template #label>
+            <div class="flex items-center gap-1.5">
+              <lf-icon name="circle-exclamation" :size="16" class="text-gray-600" />
+              <span>Connection failed (1)</span>
+            </div>
+          </template>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <!-- Table Headers -->
+    <div class="flex items-center gap-4 px-5 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wide">
+      <div class="w-40">Integration</div>
+      <div class="flex-1">Project</div>
+      <div class="w-32">Status</div>
+      <div class="w-10"></div>
+    </div>
+
+    <!-- Integration Rows -->
+    <div class="divide-y divide-gray-200">
+      <div 
+        v-for="integration in filteredIntegrations" 
+        :key="integration.id"
+        class="flex items-center gap-4 px-5 py-5"
+      >
+        <!-- Integration Column -->
+        <div class="w-40 flex items-center gap-1.5">
+          <div class="w-4 h-4 flex-shrink-0">
+            <img :src="integration.icon" :alt="integration.platform" class="w-full h-full" />
+          </div>
+          <span class="text-sm font-medium text-gray-900">{{ integration.platform }}</span>
+        </div>
+
+        <!-- Project Column -->
+        <div class="flex-1">
+          <div class="text-sm font-medium text-gray-900">{{ integration.projectName }}</div>
+          <div class="text-xs text-gray-500">{{ integration.projectPath }}</div>
+        </div>
+
+        <!-- Status Column -->
+        <div class="w-32">
+          <div class="flex items-center gap-1.5 mb-1">
+            <lf-icon 
+              :name="integration.status.icon" 
+              :size="16" 
+              :class="integration.status.iconClass"
+            />
+            <span class="text-sm font-medium text-gray-900">{{ integration.status.label }}</span>
+          </div>
+          <div class="text-xs text-gray-500">{{ integration.status.description }}</div>
+        </div>
+
+        <!-- Actions Column -->
+        <div class="w-10">
+          <button class="p-2.5 hover:bg-gray-50 rounded-md">
+            <lf-icon name="ellipsis" :size="16" class="text-gray-900" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="px-5 py-6 flex items-center justify-center gap-4">
+      <span class="text-xs text-gray-400">{{ paginationText }}</span>
+      <button class="text-xs text-primary-500 font-semibold hover:text-primary-600">
+        Load more
+      </button>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref, computed } from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+
+// Mock data for integrations
+const integrations = ref([
+  // In Progress integrations
+  {
+    id: 1,
+    platform: 'GitHub',
+    icon: 'https://www.figma.com/api/mcp/asset/0ab14917-e2ca-446a-8f6c-1dc7c520707e',
+    projectName: 'Academy Software Foundation',
+    projectPath: 'Academy Software Fou... > Academy Software Fou...',
+    status: {
+      label: 'In progress',
+      description: '100 out of 1,000 data streams processed...',
+      icon: 'loader-4-fill',
+      iconClass: 'text-primary-500',
+      type: 'in-progress'
+    }
+  },
+  {
+    id: 2,
+    platform: 'Stack Overflow',
+    icon: 'https://www.figma.com/api/mcp/asset/eca989d0-0cea-45f2-a0fa-463c6ae3ad5d',
+    projectName: 'Asset Repository Working Group',
+    projectPath: 'Academy Software Fou... > Asset Repository Wor...',
+    status: {
+      label: 'In progress',
+      description: '600 data streams being processed...',
+      icon: 'loader-4-fill',
+      iconClass: 'text-primary-500',
+      type: 'in-progress'
+    }
+  },
+  {
+    id: 3,
+    platform: 'Git',
+    icon: 'https://www.figma.com/api/mcp/asset/1efa7655-45c4-41b4-a3ce-3a913f22520d',
+    projectName: 'AcademyMaterialX Software Foundation',
+    projectPath: 'Academy Software Fou... > MaterialX',
+    status: {
+      label: 'In progress',
+      description: '600 data streams being processed...',
+      icon: 'loader-4-fill',
+      iconClass: 'text-primary-500',
+      type: 'in-progress'
+    }
+  },
+  {
+    id: 4,
+    platform: 'GitLab',
+    icon: 'https://www.figma.com/api/mcp/asset/fc824466-7e66-4681-a7fb-588ea1221ff9',
+    projectName: 'OpenAssetIO',
+    projectPath: 'Academy Software Fou... > OpenAssetIO',
+    status: {
+      label: 'In progress',
+      description: '600 data streams being processed...',
+      icon: 'loader-4-fill',
+      iconClass: 'text-primary-500',
+      type: 'in-progress'
+    }
+  },
+  // Action Required integrations
+  {
+    id: 5,
+    platform: 'Slack',
+    icon: 'https://www.figma.com/api/mcp/asset/0ab14917-e2ca-446a-8f6c-1dc7c520707e',
+    projectName: 'Community Management',
+    projectPath: 'Academy Software Fou... > Community',
+    status: {
+      label: 'Action required',
+      description: 'API key expired, please update credentials',
+      icon: 'triangle-exclamation',
+      iconClass: 'text-yellow-500',
+      type: 'action-required'
+    }
+  },
+  {
+    id: 6,
+    platform: 'Discord',
+    icon: 'https://www.figma.com/api/mcp/asset/eca989d0-0cea-45f2-a0fa-463c6ae3ad5d',
+    projectName: 'Developer Relations',
+    projectPath: 'Academy Software Fou... > DevRel',
+    status: {
+      label: 'Action required',
+      description: 'Permission denied, check bot permissions',
+      icon: 'triangle-exclamation',
+      iconClass: 'text-yellow-500',
+      type: 'action-required'
+    }
+  },
+  // Connection Failed integrations
+  {
+    id: 7,
+    platform: 'Jira',
+    icon: 'https://www.figma.com/api/mcp/asset/1efa7655-45c4-41b4-a3ce-3a913f22520d',
+    projectName: 'Project Management',
+    projectPath: 'Academy Software Fou... > PM',
+    status: {
+      label: 'Connection failed',
+      description: 'Unable to connect to server',
+      icon: 'circle-exclamation',
+      iconClass: 'text-red-500',
+      type: 'connection-failed'
+    }
+  }
+]);
+
+const activeTab = ref('in-progress');
+
+const filteredIntegrations = computed(() => {
+  return integrations.value.filter(integration => {
+    switch (activeTab.value) {
+      case 'in-progress':
+        return integration.status.type === 'in-progress';
+      case 'action-required':
+        return integration.status.type === 'action-required';
+      case 'connection-failed':
+        return integration.status.type === 'connection-failed';
+      default:
+        return true;
+    }
+  });
+});
+
+const paginationText = computed(() => {
+  const total = 120;
+  const showing = filteredIntegrations.value.length;
+  return `${showing} out of ${total} integrations`;
+});
 </script>
 
 <script lang="ts">
 export default {
   name: 'AppLfOverviewIntegrationDetails',
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.integration-tabs :deep(.el-tabs__header) {
+  margin: 0;
+  border: none;
+}
+
+.integration-tabs :deep(.el-tabs__nav-wrap::after) {
+  height: 1px;
+  background-color: #e5e7eb;
+}
+
+.integration-tabs :deep(.el-tabs__item) {
+  padding: 0 0 16px 0;
+  margin-right: 24px;
+  font-weight: 500;
+  font-size: 14px;
+  color: #6b7280;
+  border: none;
+}
+
+.integration-tabs :deep(.el-tabs__item.is-active) {
+  color: #0f172a;
+  font-weight: 500;
+}
+
+.integration-tabs :deep(.el-tabs__active-bar) {
+  background-color: #0094ff;
+  height: 2px;
+}
+
+.integration-tabs :deep(.el-tabs__item:hover) {
+  color: #0094ff;
+}
+</style>
\ No newline at end of file

From 428fde1508d17451d239ae56bd02ef6b23ae545e Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Fri, 5 Dec 2025 15:31:46 +0800
Subject: [PATCH 05/51] chore: changed integration row display to match
 integration page

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../pages/integration-status.page.vue         |   1 +
 .../components/fragments/integration-row.vue  | 103 ++++++++
 .../components/fragments/integration-tabs.vue |  52 ++++
 .../components/fragments/status-display.vue   |  29 +++
 .../sections/integration-details.vue          | 229 ++----------------
 .../overview/store/mock-overview-data.ts      | 118 +++++++++
 .../modules/overview/types/overview.types.ts  |  30 +++
 7 files changed, 351 insertions(+), 211 deletions(-)
 create mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/integration-tabs.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts

diff --git a/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue b/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue
index 5713743ebb..b8429a554d 100644
--- a/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue
+++ b/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue
@@ -213,6 +213,7 @@ const fetchGlobalIntegrations = () => {
     status: lfIntegrationStatusesTabs[status.value].statuses,
   })
     .then((res) => {
+      console.log(res);
       if (res.offset > 0) {
         integrations.value = [...integrations.value, ...res.rows];
       } else {
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
new file mode 100644
index 0000000000..5e15154cfd
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
@@ -0,0 +1,103 @@
+<template>
+  <div 
+    :key="integration.key"
+    class="flex items-center gap-4 px-5 py-5"
+  >
+    <!-- Integration Column -->
+    <div class="w-1/6 flex items-center gap-1.5">
+      <div class="w-4 h-4 flex-shrink-0">
+        <img :src="integration.image" :alt="integration.name" class="w-full h-full" />
+      </div>
+      <span class="text-sm font-medium text-gray-900">{{ integration.name }}</span>
+    </div>
+
+    <!-- Project Column -->
+    <div class="w-2/6">
+      <div class="text-sm font-medium text-gray-900">{{ integrationStatus.name }}</div>
+      <div class="text-xs text-gray-500 flex">
+        <span class="truncate">{{ integrationStatus.grandparentName }}</span>
+        <span class="text-gray-500">></span>
+        <span class="truncate">{{ integrationStatus.parentName }}</span>
+      </div>
+    </div>
+
+    <!-- Status Column -->
+    <div class="w-3/6 flex items-center justify-between">
+      <slot name="status-display">
+        <status-display :integrationStatus="integrationStatus" />
+      </slot>
+      <component
+        :is="integration.actionComponent"
+        v-if="status.key === 'waitingForAction' && integration.actionComponent"
+        :integration="integrationStatus"
+        :segment-id="integrationStatus.segmentId"
+        :grandparent-id="integrationStatus.grandparentId"
+      />
+      <!-- Actions Column -->
+      <div class="w-10">
+        <lf-dropdown placement="bottom-end" width="14.5rem" :persistent="true">
+          <template #trigger>
+            <lf-button type="secondary-ghost" icon-only>
+              <lf-icon name="ellipsis" />
+            </lf-button>
+          </template>
+          <component
+            :is="integration.dropdownComponent"
+            v-if="status.key === 'done' && integration.dropdownComponent.dropdownComponent"
+            :integration="integration"
+            :segment-id="integrationStatus.segmentId"
+            :grandparent-id="integrationStatus.grandparentId"
+          />
+          <lf-dropdown-item type="danger" @click="disconnectIntegration(integrationStatus)">
+            <lf-icon name="link-simple-slash" type="regular" />
+            Disconnect integration
+          </lf-dropdown-item>
+        </lf-dropdown>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { IntegrationStatus } from '../../types/overview.types';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import StatusDisplay from '@/modules/admin/modules/overview/components/fragments/status-display.vue';
+import { getIntegrationStatus } from '@/modules/admin/modules/integration/config/status';
+import { lfIntegrations } from '@/config/integrations';
+import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
+import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
+import { mapActions } from '@/shared/vuex/vuex.helpers';
+import LfDropdown from '@/ui-kit/dropdown/Dropdown.vue';
+import LfDropdownItem from '@/ui-kit/dropdown/DropdownItem.vue';
+import LfButton from '@/ui-kit/button/Button.vue';
+
+const { trackEvent } = useProductTracking();
+
+const { doDestroy } = mapActions('integration');
+const props = defineProps<{
+  integrationStatus: IntegrationStatus;
+}>();
+
+const status = computed(() => getIntegrationStatus(props.integrationStatus));
+const integration = computed(() => lfIntegrations()[props.integrationStatus.platform]);
+
+const disconnectIntegration = async (integration: any) => {
+  trackEvent({
+    key: FeatureEventKey.DISCONNECT_INTEGRATION,
+    type: EventType.FEATURE,
+    properties: {
+      platform: integration.platform,
+    },
+  });
+  await doDestroy(integration.id);
+
+  // TODO: Fetch integrations
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfOverviewIntegrationRow',
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integration-tabs.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integration-tabs.vue
new file mode 100644
index 0000000000..974ca1cee4
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integration-tabs.vue
@@ -0,0 +1,52 @@
+<template>
+  <el-tabs v-model="activeTab" class="integration-tabs">
+    <el-tab-pane v-for="tab in tabs" :key="tab.key" :label="tab.label + ` (${tab.count})`" :name="tab.key">
+      <template #label>
+        <div class="flex items-center gap-1.5">
+          <lf-icon :name="tab.icon" :size="16" class="text-gray-600" />
+          <span>{{ tab.label }} ({{ tab.count }})</span>
+        </div>
+      </template>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { IntegrationTabs } from '@/modules/admin/modules/overview/types/overview.types';
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const props = defineProps<{
+  tabs: IntegrationTabs[];
+  modelValue: string;
+}>();
+
+const activeTab = computed<string>({
+  get() {
+    return props.modelValue;
+  },
+  set(value: string) {
+    emit('update:modelValue', value);
+  },
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfOverviewIntegrationTabs',
+};
+</script>
+
+<style scoped>
+.integration-tabs :deep(.el-tabs__nav-wrap::after) {
+  height: 1px;
+}
+
+.integration-tabs :deep(.el-tabs__active-bar) {
+  height: 1px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue b/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
new file mode 100644
index 0000000000..a852a4b102
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <div class="flex items-center gap-1.5 mb-1">
+      <lf-icon 
+        :name="status.status.icon" 
+        :size="16" 
+        :class="statusIconClass"
+      />
+      <span class="text-sm font-medium text-gray-900">{{ status.status.text }}</span>
+    </div>
+    <div class="text-xs text-gray-500">{{ integrationStatus.statusDetails }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { IntegrationStatus } from '../../types/overview.types';
+import { getIntegrationStatus } from '@/modules/admin/modules/integration/config/status';
+
+const props = defineProps<{
+  integrationStatus: IntegrationStatus;
+}>();
+
+const status = computed(() => getIntegrationStatus(props.integrationStatus));
+const statusIconClass = computed(() => {
+  return status.value.status.color + (status.value.key === 'in-progress' ? ' animate-spin' : '');
+});
+</script>
\ No newline at end of file
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
index 4db28d8f3f..1523c569b0 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
@@ -7,83 +7,23 @@
       </h3>
       
       <!-- Tabs -->
-      <el-tabs v-model="activeTab" class="integration-tabs">
-        <el-tab-pane label="In progress (4)" name="in-progress">
-          <template #label>
-            <div class="flex items-center gap-1.5">
-              <lf-icon name="clock" :size="16" class="text-gray-600" />
-              <span>In progress (4)</span>
-            </div>
-          </template>
-        </el-tab-pane>
-        <el-tab-pane label="Action required (2)" name="action-required">
-          <template #label>
-            <div class="flex items-center gap-1.5">
-              <lf-icon name="triangle-exclamation" :size="16" class="text-gray-600" />
-              <span>Action required (2)</span>
-            </div>
-          </template>
-        </el-tab-pane>
-        <el-tab-pane label="Connection failed (1)" name="connection-failed">
-          <template #label>
-            <div class="flex items-center gap-1.5">
-              <lf-icon name="circle-exclamation" :size="16" class="text-gray-600" />
-              <span>Connection failed (1)</span>
-            </div>
-          </template>
-        </el-tab-pane>
-      </el-tabs>
+      <integration-tabs :tabs="mockOverviewTabs" :modelValue="activeTab" @update:modelValue="activeTab = $event" />
     </div>
 
     <!-- Table Headers -->
-    <div class="flex items-center gap-4 px-5 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wide">
-      <div class="w-40">Integration</div>
-      <div class="flex-1">Project</div>
-      <div class="w-32">Status</div>
-      <div class="w-10"></div>
+    <div class="flex items-center gap-4 pt-5 pb-3 px-5 text-xs font-semibold text-gray-400">
+      <div class="w-1/6">Integration</div>
+      <div class="w-2/6">Project</div>
+      <div class="w-3/6">Status</div>
     </div>
 
     <!-- Integration Rows -->
     <div class="divide-y divide-gray-200">
-      <div 
-        v-for="integration in filteredIntegrations" 
-        :key="integration.id"
-        class="flex items-center gap-4 px-5 py-5"
-      >
-        <!-- Integration Column -->
-        <div class="w-40 flex items-center gap-1.5">
-          <div class="w-4 h-4 flex-shrink-0">
-            <img :src="integration.icon" :alt="integration.platform" class="w-full h-full" />
-          </div>
-          <span class="text-sm font-medium text-gray-900">{{ integration.platform }}</span>
-        </div>
-
-        <!-- Project Column -->
-        <div class="flex-1">
-          <div class="text-sm font-medium text-gray-900">{{ integration.projectName }}</div>
-          <div class="text-xs text-gray-500">{{ integration.projectPath }}</div>
-        </div>
-
-        <!-- Status Column -->
-        <div class="w-32">
-          <div class="flex items-center gap-1.5 mb-1">
-            <lf-icon 
-              :name="integration.status.icon" 
-              :size="16" 
-              :class="integration.status.iconClass"
-            />
-            <span class="text-sm font-medium text-gray-900">{{ integration.status.label }}</span>
-          </div>
-          <div class="text-xs text-gray-500">{{ integration.status.description }}</div>
-        </div>
-
-        <!-- Actions Column -->
-        <div class="w-10">
-          <button class="p-2.5 hover:bg-gray-50 rounded-md">
-            <lf-icon name="ellipsis" :size="16" class="text-gray-900" />
-          </button>
-        </div>
-      </div>
+      <integration-row 
+        v-for="integrationStatus in filteredIntegrations" 
+        :key="integrationStatus.id"
+        :integrationStatus="integrationStatus"
+      />
     </div>
 
     <!-- Footer -->
@@ -98,112 +38,13 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { mockOverviewData } from '@/modules/admin/modules/overview/store/mock-overview-data';
+import IntegrationTabs from '@/modules/admin/modules/overview/components/fragments/integration-tabs.vue';
+import { mockOverviewTabs } from '@/modules/admin/modules/overview/store/mock-overview-data';
+import IntegrationRow from '@/modules/admin/modules/overview/components/fragments/integration-row.vue';
 
 // Mock data for integrations
-const integrations = ref([
-  // In Progress integrations
-  {
-    id: 1,
-    platform: 'GitHub',
-    icon: 'https://www.figma.com/api/mcp/asset/0ab14917-e2ca-446a-8f6c-1dc7c520707e',
-    projectName: 'Academy Software Foundation',
-    projectPath: 'Academy Software Fou... > Academy Software Fou...',
-    status: {
-      label: 'In progress',
-      description: '100 out of 1,000 data streams processed...',
-      icon: 'loader-4-fill',
-      iconClass: 'text-primary-500',
-      type: 'in-progress'
-    }
-  },
-  {
-    id: 2,
-    platform: 'Stack Overflow',
-    icon: 'https://www.figma.com/api/mcp/asset/eca989d0-0cea-45f2-a0fa-463c6ae3ad5d',
-    projectName: 'Asset Repository Working Group',
-    projectPath: 'Academy Software Fou... > Asset Repository Wor...',
-    status: {
-      label: 'In progress',
-      description: '600 data streams being processed...',
-      icon: 'loader-4-fill',
-      iconClass: 'text-primary-500',
-      type: 'in-progress'
-    }
-  },
-  {
-    id: 3,
-    platform: 'Git',
-    icon: 'https://www.figma.com/api/mcp/asset/1efa7655-45c4-41b4-a3ce-3a913f22520d',
-    projectName: 'AcademyMaterialX Software Foundation',
-    projectPath: 'Academy Software Fou... > MaterialX',
-    status: {
-      label: 'In progress',
-      description: '600 data streams being processed...',
-      icon: 'loader-4-fill',
-      iconClass: 'text-primary-500',
-      type: 'in-progress'
-    }
-  },
-  {
-    id: 4,
-    platform: 'GitLab',
-    icon: 'https://www.figma.com/api/mcp/asset/fc824466-7e66-4681-a7fb-588ea1221ff9',
-    projectName: 'OpenAssetIO',
-    projectPath: 'Academy Software Fou... > OpenAssetIO',
-    status: {
-      label: 'In progress',
-      description: '600 data streams being processed...',
-      icon: 'loader-4-fill',
-      iconClass: 'text-primary-500',
-      type: 'in-progress'
-    }
-  },
-  // Action Required integrations
-  {
-    id: 5,
-    platform: 'Slack',
-    icon: 'https://www.figma.com/api/mcp/asset/0ab14917-e2ca-446a-8f6c-1dc7c520707e',
-    projectName: 'Community Management',
-    projectPath: 'Academy Software Fou... > Community',
-    status: {
-      label: 'Action required',
-      description: 'API key expired, please update credentials',
-      icon: 'triangle-exclamation',
-      iconClass: 'text-yellow-500',
-      type: 'action-required'
-    }
-  },
-  {
-    id: 6,
-    platform: 'Discord',
-    icon: 'https://www.figma.com/api/mcp/asset/eca989d0-0cea-45f2-a0fa-463c6ae3ad5d',
-    projectName: 'Developer Relations',
-    projectPath: 'Academy Software Fou... > DevRel',
-    status: {
-      label: 'Action required',
-      description: 'Permission denied, check bot permissions',
-      icon: 'triangle-exclamation',
-      iconClass: 'text-yellow-500',
-      type: 'action-required'
-    }
-  },
-  // Connection Failed integrations
-  {
-    id: 7,
-    platform: 'Jira',
-    icon: 'https://www.figma.com/api/mcp/asset/1efa7655-45c4-41b4-a3ce-3a913f22520d',
-    projectName: 'Project Management',
-    projectPath: 'Academy Software Fou... > PM',
-    status: {
-      label: 'Connection failed',
-      description: 'Unable to connect to server',
-      icon: 'circle-exclamation',
-      iconClass: 'text-red-500',
-      type: 'connection-failed'
-    }
-  }
-]);
+const integrations = ref(mockOverviewData);
 
 const activeTab = ref('in-progress');
 
@@ -211,11 +52,11 @@ const filteredIntegrations = computed(() => {
   return integrations.value.filter(integration => {
     switch (activeTab.value) {
       case 'in-progress':
-        return integration.status.type === 'in-progress';
+        return integration.status === 'in-progress';
       case 'action-required':
-        return integration.status.type === 'action-required';
+        return integration.status === 'mapping' || integration.status === 'pending-action';
       case 'connection-failed':
-        return integration.status.type === 'connection-failed';
+        return integration.status === 'error';
       default:
         return true;
     }
@@ -235,37 +76,3 @@ export default {
 };
 </script>
 
-<style scoped>
-.integration-tabs :deep(.el-tabs__header) {
-  margin: 0;
-  border: none;
-}
-
-.integration-tabs :deep(.el-tabs__nav-wrap::after) {
-  height: 1px;
-  background-color: #e5e7eb;
-}
-
-.integration-tabs :deep(.el-tabs__item) {
-  padding: 0 0 16px 0;
-  margin-right: 24px;
-  font-weight: 500;
-  font-size: 14px;
-  color: #6b7280;
-  border: none;
-}
-
-.integration-tabs :deep(.el-tabs__item.is-active) {
-  color: #0f172a;
-  font-weight: 500;
-}
-
-.integration-tabs :deep(.el-tabs__active-bar) {
-  background-color: #0094ff;
-  height: 2px;
-}
-
-.integration-tabs :deep(.el-tabs__item:hover) {
-  color: #0094ff;
-}
-</style>
\ No newline at end of file
diff --git a/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts b/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts
new file mode 100644
index 0000000000..5dbbc8c213
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts
@@ -0,0 +1,118 @@
+import { IntegrationStatus } from '../types/overview.types'
+export const mockOverviewData: IntegrationStatus[] = [
+  // In Progress integrations
+  {
+    grandparentId: 'd004b040-95d2-449b-b5a3-8e789418cc88',
+    grandparentName: 'Academy Software Foundation (ASWF)',
+    id: 'a92494e5-268e-44f1-bffc-f55240be77ed',
+    name: 'Academy Software Foundation (ASWF)',
+    parentId: '9d8f1f72-4d12-4502-8f2e-c2b8348c8209',
+    parentName: 'Academy Software Foundation (ASWF)',
+    platform: 'git',
+    segmentId: '8eb1d4d5-2536-435b-980c-f11e30943025',
+    settings: { remotes: ['https://github.com/AcademySoftwareFoundation/tac'] },
+    status: 'in-progress',
+    statusDetails: '100 out of 1,000 data streams processed...',
+  },
+  {
+    grandparentId: 'e005c041-96d3-450c-c6a4-9e890519dd89',
+    grandparentName: 'Academy Software Foundation',
+    id: 'b93595f6-369f-45g2-cgd4-g66351cf88fe',
+    name: 'Asset Repository Working Group',
+    parentId: 'ae9g2g73-5e13-4603-9g3f-d3c9459d9310',
+    parentName: 'Academy Software Foundation',
+    platform: 'stackoverflow',
+    segmentId: '9fc2e5e6-3647-546c-a91d-g22f41a54136',
+    settings: { tags: ['academy-software-foundation', 'asset-repository'] },
+    status: 'in-progress',
+    statusDetails: '600 data streams being processed...',
+  },
+  {
+    grandparentId: 'f106d142-a7e4-561d-d7b5-af901620ee90',
+    grandparentName: 'Academy Software Foundation',
+    id: 'ca4696g7-470g-46h3-dhf5-h77462dg99gf',
+    name: 'MaterialX',
+    parentId: 'bg0h3h84-6f24-5714-ah4g-e4da570ea421',
+    parentName: 'Academy Software Foundation',
+    platform: 'git',
+    segmentId: 'a0d3f6f7-4758-657d-ba2e-h33g52b65247',
+    settings: { remotes: ['https://github.com/AcademySoftwareFoundation/MaterialX'] },
+    status: 'in-progress',
+    statusDetails: '600 data streams being processed...',
+  },
+  {
+    grandparentId: 'g207e253-b8f5-672e-e8c6-bg012731ff01',
+    grandparentName: 'Academy Software Foundation',
+    id: 'db5707h8-581h-57i4-eig6-i88573eh00hg',
+    name: 'OpenAssetIO',
+    parentId: 'ch1i4i95-7g35-6825-bi5h-f5eb681fb532',
+    parentName: 'Academy Software Foundation',
+    platform: 'gitlab',
+    segmentId: 'b1e4g7g8-5869-768e-cb3f-i44h63c76358',
+    settings: { remotes: ['https://gitlab.com/AcademySoftwareFoundation/OpenAssetIO'] },
+    status: 'in-progress',
+    statusDetails: '600 data streams being processed...',
+  },
+  // Action Required integrations
+  {
+    grandparentId: 'h308f364-c9g6-783f-f9d7-ch123842gg12',
+    grandparentName: 'Academy Software Foundation',
+    id: 'ec6818i9-692i-68j5-fjh7-j99684fi11ih',
+    name: 'Community Management',
+    parentId: 'di2j5ja6-8h46-7936-cj6i-g6fc792gc643',
+    parentName: 'Academy Software Foundation',
+    platform: 'slack',
+    segmentId: 'c2f5h8h9-6970-879f-dc4g-j55i74d87469',
+    settings: { workspaceId: 'T0123456789', channels: ['general', 'community'] },
+    status: 'mapping',
+    statusDetails: 'API key expired, please update credentials',
+  },
+  {
+    grandparentId: 'i409g475-da07-894g-ga08-di234953hh23',
+    grandparentName: 'Academy Software Foundation',
+    id: 'fd7929ja-7a3j-79k6-gki8-ka0795gj22ji',
+    name: 'Developer Relations',
+    parentId: 'ej3k6kb7-9i57-8a47-dk7j-h7gd8a3hd754',
+    parentName: 'Academy Software Foundation',
+    platform: 'github',
+    segmentId: 'd3g6i9ia-7a81-98ag-ed5h-k66j85e98570',
+    settings: { guildId: '123456789012345678', channels: ['dev-chat', 'announcements'] },
+    status: 'mapping',
+    statusDetails: 'Permission denied, check bot permissions',
+  },
+  // Connection Failed integrations
+  {
+    grandparentId: 'j50ah586-eb18-9a5h-hb19-ej345064ii34',
+    grandparentName: 'Academy Software Foundation',
+    id: 'ge8a3akb-8b4k-8al7-hkj9-lb1806hk33kj',
+    name: 'Project Management',
+    parentId: 'fk4l7lc8-aj68-9b58-el8k-i8he9b4ie865',
+    parentName: 'Academy Software Foundation',
+    platform: 'jira',
+    segmentId: 'e4h7jajb-8b92-a9bh-fe6i-l77k96f9a681',
+    settings: { baseUrl: 'https://academysoftware.atlassian.net', projectKeys: ['PM', 'ASWF'] },
+    status: 'error',
+    statusDetails: 'Unable to connect to server',
+  },
+]
+
+export const mockOverviewTabs = [
+  {
+    label: 'In progress',
+    key: 'in-progress',
+    count: 4,
+    icon: 'clock',
+  },
+  {
+    label: 'Action required',
+    key: 'action-required',
+    count: 2,
+    icon: 'triangle-exclamation',
+  },
+  {
+    label: 'Connection failed',
+    key: 'connection-failed',
+    count: 1,
+    icon: 'circle-exclamation',
+  },
+]
diff --git a/frontend/src/modules/admin/modules/overview/types/overview.types.ts b/frontend/src/modules/admin/modules/overview/types/overview.types.ts
index 42196fdf61..a67bbf3def 100644
--- a/frontend/src/modules/admin/modules/overview/types/overview.types.ts
+++ b/frontend/src/modules/admin/modules/overview/types/overview.types.ts
@@ -1,5 +1,35 @@
+// import { IntegrationConfig } from '@/config/integrations'
+// import { IntegrationStatusConfig } from '../../integration/config/status'
 export interface OverviewTrends {
   current: number
   previous: number
   period: string
 }
+
+export interface IntegrationTabs {
+  label: string
+  key: string
+  count: number
+  icon: string
+}
+
+// TODO: Check with backend team about the data structure
+export interface IntegrationStatus {
+  grandparentId: string
+  grandparentName: string
+  id: string
+  name: string
+  parentId: string
+  parentName: string
+  platform: string
+  segmentId: string
+  settings: any
+  status: string
+
+  // integration: IntegrationConfig
+  // projectGroupName: string
+  // projectName: string
+  // projectPath: string
+  // status: IntegrationStatusConfig
+  statusDetails: string
+}

From 3beb014c720026a195692859cc47d054df4acc10 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Fri, 5 Dec 2025 17:25:56 +0800
Subject: [PATCH 06/51] chore: wire integration tab to api

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../pages/integration-status.page.vue         |   1 -
 .../fragments/integrations-filter.vue         |  78 ++++------
 .../components/fragments/status-display.vue   |   6 +-
 .../sections/integration-details.vue          |  40 +++++-
 .../sections/integration-status.vue           | 136 ++++++++----------
 .../overview/services/overview.api.service.ts |  42 ++++++
 .../overview/store/mock-overview-data.ts      |  21 ---
 .../modules/overview/store/overview.store.ts  |   2 +
 .../modules/overview/types/overview.types.ts  |  11 +-
 frontend/src/shared/types/tanstack.ts         |  13 +-
 10 files changed, 176 insertions(+), 174 deletions(-)
 create mode 100644 frontend/src/modules/admin/modules/overview/services/overview.api.service.ts

diff --git a/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue b/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue
index b8429a554d..5713743ebb 100644
--- a/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue
+++ b/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue
@@ -213,7 +213,6 @@ const fetchGlobalIntegrations = () => {
     status: lfIntegrationStatusesTabs[status.value].statuses,
   })
     .then((res) => {
-      console.log(res);
       if (res.offset > 0) {
         integrations.value = [...integrations.value, ...res.rows];
       } else {
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue
index 5958594850..bb058b67dd 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue
@@ -1,6 +1,6 @@
 <template>
   <lfx-dropdown-select
-    v-model="selectedIntegrationId"
+    v-model="selectedIntegrationId as string"
     width="200px"
     :match-width="false"
     dropdown-class="max-h-80"
@@ -12,18 +12,14 @@
         type="filled"
       >
         <div class="flex items-center gap-1.5">
-          <lf-icon
-            name="grid-round-2"
-            :size="20"
-          />
-          <span class="text-sm text-neutral-900 font-semibold">
-            {{ selectedIntegration?.name || 'All integrations' }}
-          </span>
-          <lf-icon
-            name="angle-down"
-            :size="16"
-            class="text-neutral-400"
-          />
+          <template v-if="!selectedIntegrationId || selectedIntegrationId === 'all'">
+            <lf-icon name="grid-round-2" type="regular" :size="16" />
+            All integrations
+          </template>
+          <template v-else>
+            <img :src="selectedIntegration?.image" :alt="selectedIntegration?.name" class="min-w-4 h-4 object-contain">
+            {{ selectedIntegration?.name }}
+          </template>
         </div>
       </lfx-dropdown-selector>
     </template>
@@ -34,25 +30,26 @@
         <lfx-dropdown-item
           value="all"
           label="All integrations"
-          @click="selectedIntegrationId = 'all'"
-          :selected="selectedIntegrationId === 'all'"
+          @click="selectedIntegrationId = null"
+          :selected="selectedIntegrationId === null"
           :class="{
-            '!bg-blue-50': selectedIntegrationId === 'all',
+            '!bg-blue-50': selectedIntegrationId === null,
           }"
         />
       </div>
 
       <lfx-dropdown-item
-        v-for="integration in integrations"
-        :key="integration.id"
-        :value="integration.id"
-        :label="integration.name"
-        @click="selectIntegration(integration.id)"
-        :selected="selectedIntegrationId === integration.id"
-        :class="{
-          '!bg-blue-50': selectedIntegrationId === integration.id,
-        }"
-      />
+        v-for="(integration, key) in lfIntegrations()"
+        :key="key"
+        :selected="selectedIntegrationId === key"
+        @click="selectedIntegrationId = key"
+      >
+        <div class="flex items-center gap-2">
+          <img :src="integration.image" :alt="integration.name" class="min-w-4 h-4 object-contain">
+          {{ integration.name }}
+        </div>
+      </lfx-dropdown-item>
+
     </template>
   </lfx-dropdown-select>
 </template>
@@ -66,37 +63,18 @@ import LfxDropdownSelect from '@/ui-kit/lfx/dropdown/dropdown-select.vue';
 import LfxDropdownSelector from '@/ui-kit/lfx/dropdown/dropdown-selector.vue';
 import LfxDropdownItem from '@/ui-kit/lfx/dropdown/dropdown-item.vue';
 import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
+import { lfIntegrations } from '@/config/integrations';
 import { storeToRefs } from 'pinia';
 
+
 const overviewStore = useOverviewStore();
 const { selectedIntegrationId } = storeToRefs(overviewStore);
 
-interface Integration {
-  id: string;
-  name: string;
-}
-
-const props = defineProps<{
-  integrations: Integration[];
-}>();
-
-// Mock data for integrations (can be replaced with props.integrations)
-const mockIntegrations: Integration[] = [
-  { id: 'github', name: 'GitHub' },
-  { id: 'slack', name: 'Slack' },
-  { id: 'discord', name: 'Discord' },
-  { id: 'linkedin', name: 'LinkedIn' },
-  { id: 'twitter', name: 'Twitter' },
-];
-
-const selectIntegration = (integrationId: string) => {
-  selectedIntegrationId.value = integrationId;
-};
+const integrations = computed(() => lfIntegrations());
 
 const selectedIntegration = computed(() => {
-  if (selectedIntegrationId.value === 'all') return null;
-  const integrations = props.integrations || mockIntegrations;
-  return integrations.find(i => i.id === selectedIntegrationId.value) || null;
+  if (selectedIntegrationId.value === 'all' || !selectedIntegrationId.value) return null;
+  return integrations.value[selectedIntegrationId.value];
 });
 
 </script>
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue b/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
index a852a4b102..d594513929 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
@@ -4,7 +4,8 @@
       <lf-icon 
         :name="status.status.icon" 
         :size="16" 
-        :class="statusIconClass"
+        :type="status.status.iconType"
+        :class="status.status.color"
       />
       <span class="text-sm font-medium text-gray-900">{{ status.status.text }}</span>
     </div>
@@ -23,7 +24,4 @@ const props = defineProps<{
 }>();
 
 const status = computed(() => getIntegrationStatus(props.integrationStatus));
-const statusIconClass = computed(() => {
-  return status.value.status.color + (status.value.key === 'in-progress' ? ' animate-spin' : '');
-});
 </script>
\ No newline at end of file
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
index 1523c569b0..00af8e08c1 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
@@ -7,7 +7,7 @@
       </h3>
       
       <!-- Tabs -->
-      <integration-tabs :tabs="mockOverviewTabs" :modelValue="activeTab" @update:modelValue="activeTab = $event" />
+      <integration-tabs :tabs="overviewTabs" :modelValue="activeTab" @update:modelValue="activeTab = $event" />
     </div>
 
     <!-- Table Headers -->
@@ -40,22 +40,27 @@
 import { ref, computed } from 'vue';
 import { mockOverviewData } from '@/modules/admin/modules/overview/store/mock-overview-data';
 import IntegrationTabs from '@/modules/admin/modules/overview/components/fragments/integration-tabs.vue';
-import { mockOverviewTabs } from '@/modules/admin/modules/overview/store/mock-overview-data';
 import IntegrationRow from '@/modules/admin/modules/overview/components/fragments/integration-row.vue';
+import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
+import { storeToRefs } from 'pinia';
+import { lfIntegrationStatusesTabs } from '@/modules/admin/modules/integration/config/status';
+
+const { integrationStatusCount } = storeToRefs(useOverviewStore());
 
 // Mock data for integrations
 const integrations = ref(mockOverviewData);
 
-const activeTab = ref('in-progress');
+const activeTab = ref(lfIntegrationStatusesTabs.connecting.key);
 
+// TODO: remove mock data and use the API
 const filteredIntegrations = computed(() => {
   return integrations.value.filter(integration => {
     switch (activeTab.value) {
-      case 'in-progress':
+      case lfIntegrationStatusesTabs.connecting.key:
         return integration.status === 'in-progress';
-      case 'action-required':
+      case lfIntegrationStatusesTabs.waitingForAction.key:
         return integration.status === 'mapping' || integration.status === 'pending-action';
-      case 'connection-failed':
+      case lfIntegrationStatusesTabs.error.key:
         return integration.status === 'error';
       default:
         return true;
@@ -68,6 +73,29 @@ const paginationText = computed(() => {
   const showing = filteredIntegrations.value.length;
   return `${showing} out of ${total} integrations`;
 });
+
+const overviewTabs = computed(() => {
+  return [
+  {
+    label: 'In progress',
+    key: lfIntegrationStatusesTabs.connecting.key,
+    count: integrationStatusCount.value[lfIntegrationStatusesTabs.connecting.key] || 0,
+    icon: 'clock',
+  },
+  {
+    label: 'Action required',
+    key: lfIntegrationStatusesTabs.waitingForAction.key,
+    count: integrationStatusCount.value[lfIntegrationStatusesTabs.waitingForAction.key] || 0,
+    icon: 'triangle-exclamation',
+  },
+  {
+    label: 'Connection failed',
+    key: lfIntegrationStatusesTabs.error.key,
+    count: integrationStatusCount.value[lfIntegrationStatusesTabs.error.key] || 0,
+    icon: 'circle-exclamation',
+  },
+]
+});
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
index c3e677f062..9b15e31deb 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
@@ -10,108 +10,84 @@
       <div class="flex items-center">
         <integrations-filter
           ref="integrationsFilterRef"
-          :integrations="mockIntegrations"
         />
       </div>
     </div>
 
     <!-- Status chips -->
     <div class="flex gap-3 items-start">
-      <lfx-chip
-        v-for="status in statusChips"
-        :key="status.key"
-        type="bordered"
-        size="default"
-      >
-        <lf-icon
-          v-if="status.icon"
-          :name="status.icon"
-          :size="15"
-          :class="status.iconClass"
-        />
-        <span class="text-sm text-neutral-900 font-normal">
-          {{ status.label }}
-        </span>
-        <span class="text-sm text-neutral-900 font-semibold">
-          {{ status.count }}
-        </span>
-      </lfx-chip>
+      <div v-if="isPending" class="py-4 flex justify-center">
+        <lf-spinner size="1rem" />
+      </div>
+      <template v-else>
+        <lfx-chip
+          v-for="(config, key) in lfIntegrationStatusesTabs"
+          :key="key"
+          type="bordered"
+          size="default"
+          class="cursor-pointer hover:bg-neutral-50"
+          @click="navigateTo(`/admin#integrations`)"
+        >
+          <lf-icon
+            v-if="config.status.icon"
+            :name="config.status.icon"
+            :type="config.status.iconType"
+            :size="15"
+            :class="config.status.color"
+          />
+          <span class="text-sm text-neutral-900 font-normal">
+            {{ config.tabs.text }}
+          </span>
+          <span class="text-sm text-neutral-900 font-semibold">
+            {{ integrationStatusCount?.[key] || 0 }}
+          </span>
+        </lfx-chip>
+      </template>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {
-  ref,
-  computed,
-} from 'vue';
+import { watch, computed } from 'vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfxChip from '@/ui-kit/lfx/chip/chip.vue';
 import IntegrationsFilter from '@/modules/admin/modules/overview/components/fragments/integrations-filter.vue';
 import { lfIntegrationStatusesTabs } from '@/modules/admin/modules/integration/config/status';
+import { useRouter } from 'vue-router';
+import { OVERVIEW_API_SERVICE } from '../../services/overview.api.service';
+import { ToastStore } from '@/shared/message/notification';
+import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
+import { storeToRefs } from 'pinia';
+import { GlobalIntegrationStatusCount } from '../../types/overview.types';
+import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
 
-interface Integration {
-  id: string;
-  name: string;
-}
+const { selectedIntegrationId, integrationStatusCount } = storeToRefs(useOverviewStore());
 
-// Mock data for integrations
-const mockIntegrations: Integration[] = [
-  { id: 'github', name: 'GitHub' },
-  { id: 'slack', name: 'Slack' },
-  { id: 'discord', name: 'Discord' },
-  { id: 'linkedin', name: 'LinkedIn' },
-  { id: 'twitter', name: 'Twitter' },
-];
+const router = useRouter();
 
-// Mock data for status counts
-const mockStatusCounts = {
-  done: 240,
-  connecting: 4,
-  waitingForAction: 2,
-  error: 1,
-  notConnected: 126,
-};
+const params = computed(() => ({
+  platform: selectedIntegrationId.value || undefined,
+}));
 
-const integrationsFilterRef = ref();
+const { data, isPending, isError } = OVERVIEW_API_SERVICE.fetchGlobalIntegrationStatusCount(params);
 
-const statusChips = computed(() => {
-  return Object.entries(lfIntegrationStatusesTabs).map(([key, config]) => {
-    let iconClass = 'shrink-0';
-    let icon = '';
+const navigateTo = (path: string) => {
+  router.push(path);
+};
 
-    // Map status to icons and colors based on the design
-    switch (key) {
-      case 'done':
-        iconClass += ' text-green-500';
-        icon = 'check-circle';
-        break;
-      case 'connecting':
-        iconClass += ' text-blue-500';
-        icon = 'clock';
-        break;
-      case 'waitingForAction':
-        iconClass += ' text-orange-500';
-        icon = 'triangle-exclamation';
-        break;
-      case 'error':
-        iconClass += ' text-red-600';
-        icon = 'circle-exclamation';
-        break;
-      case 'notConnected':
-        iconClass += ' text-neutral-900';
-        icon = 'link-simple-slash';
-        break;
-    }
+watch(data, () => {
+  if (data.value) {
+  integrationStatusCount.value = data.value?.reduce((acc: Record<string, number>, item: GlobalIntegrationStatusCount) => {
+      acc[item.status] = +item.count;
+      return acc;
+    }, {});
+  }
+}, { immediate: true });
 
-    return {
-      key,
-      label: config.tabs.text,
-      count: mockStatusCounts[key as keyof typeof mockStatusCounts] || 0,
-      icon,
-      iconClass,
-    };
-  });
+watch(isError, () => {
+  if (isError.value) {
+    ToastStore.error('Failed to fetch global integration status count');
+  }
 });
 </script>
 
diff --git a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
new file mode 100644
index 0000000000..793932d1d3
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
@@ -0,0 +1,42 @@
+import type { QueryFunction } from '@tanstack/vue-query'
+import { type ComputedRef, computed } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
+import { TanstackKey } from '@/shared/types/tanstack'
+import authAxios from '@/shared/axios/auth-axios'
+import { GlobalIntegrationStatusCount } from '../types/overview.types'
+
+export interface GlobalIntegrationStatusCountQueryParams {
+  platform: string | undefined
+}
+
+class OverviewApiService {
+  fetchGlobalIntegrationStatusCount(params: ComputedRef<GlobalIntegrationStatusCountQueryParams>) {
+    const queryKey = computed(() => [
+      TanstackKey.GLOBAL_INTEGRATION_STATUS_COUNT,
+      params.value.platform,
+    ])
+    const queryFn = computed<QueryFunction<GlobalIntegrationStatusCount[]>>(() =>
+      this.fetchGlobalIntegrationStatusCountQueryFn(() => ({
+        platform: params.value.platform,
+      })),
+    )
+
+    return useQuery<GlobalIntegrationStatusCount[]>({
+      queryKey,
+      queryFn,
+    })
+  }
+
+  fetchGlobalIntegrationStatusCountQueryFn(
+    query: () => Record<string, string | number | boolean | undefined | string[] | null>,
+  ): QueryFunction<GlobalIntegrationStatusCount[]> {
+    return () =>
+      authAxios
+        .get('/integration/global/status', {
+          params: query(),
+        })
+        .then((res) => res.data)
+  }
+}
+
+export const OVERVIEW_API_SERVICE = new OverviewApiService()
diff --git a/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts b/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts
index 5dbbc8c213..f8e5e4c062 100644
--- a/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts
+++ b/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts
@@ -95,24 +95,3 @@ export const mockOverviewData: IntegrationStatus[] = [
     statusDetails: 'Unable to connect to server',
   },
 ]
-
-export const mockOverviewTabs = [
-  {
-    label: 'In progress',
-    key: 'in-progress',
-    count: 4,
-    icon: 'clock',
-  },
-  {
-    label: 'Action required',
-    key: 'action-required',
-    count: 2,
-    icon: 'triangle-exclamation',
-  },
-  {
-    label: 'Connection failed',
-    key: 'connection-failed',
-    count: 1,
-    icon: 'circle-exclamation',
-  },
-]
diff --git a/frontend/src/modules/admin/modules/overview/store/overview.store.ts b/frontend/src/modules/admin/modules/overview/store/overview.store.ts
index 08dba74073..5e969ed3a5 100644
--- a/frontend/src/modules/admin/modules/overview/store/overview.store.ts
+++ b/frontend/src/modules/admin/modules/overview/store/overview.store.ts
@@ -6,10 +6,12 @@ export const useOverviewStore = defineStore('overview', () => {
   const selectedProjectGroup = ref<ProjectGroup | null>(null)
   const selectedProject = ref<Project | null>(null)
   const selectedIntegrationId = ref<string | null>(null)
+  const integrationStatusCount = ref<Record<string, number>>({})
 
   return {
     selectedProjectGroup,
     selectedProject,
     selectedIntegrationId,
+    integrationStatusCount,
   }
 })
diff --git a/frontend/src/modules/admin/modules/overview/types/overview.types.ts b/frontend/src/modules/admin/modules/overview/types/overview.types.ts
index a67bbf3def..07015c68b2 100644
--- a/frontend/src/modules/admin/modules/overview/types/overview.types.ts
+++ b/frontend/src/modules/admin/modules/overview/types/overview.types.ts
@@ -25,11 +25,10 @@ export interface IntegrationStatus {
   segmentId: string
   settings: any
   status: string
-
-  // integration: IntegrationConfig
-  // projectGroupName: string
-  // projectName: string
-  // projectPath: string
-  // status: IntegrationStatusConfig
   statusDetails: string
 }
+
+export interface GlobalIntegrationStatusCount {
+  status: string
+  count: number
+}
diff --git a/frontend/src/shared/types/tanstack.ts b/frontend/src/shared/types/tanstack.ts
index 36942b9345..83be487772 100644
--- a/frontend/src/shared/types/tanstack.ts
+++ b/frontend/src/shared/types/tanstack.ts
@@ -1,8 +1,9 @@
 export enum TanstackKey {
-    ADMIN_PROJECT_GROUPS = 'admin-project-groups',
-    ADMIN_COLLECTIONS = 'admin-collections',
-    ADMIN_INSIGHTS_PROJECTS = 'admin-insights-projects',
-    ADMIN_SUB_PROJECTS = 'admin-sub-projects',
-    MEMBERS_LIST= 'members-list',
-    MEMBER_MERGE_SUGGESTIONS_COUNT = 'member-merge-suggestions-count',
+  ADMIN_PROJECT_GROUPS = 'admin-project-groups',
+  ADMIN_COLLECTIONS = 'admin-collections',
+  ADMIN_INSIGHTS_PROJECTS = 'admin-insights-projects',
+  ADMIN_SUB_PROJECTS = 'admin-sub-projects',
+  MEMBERS_LIST = 'members-list',
+  MEMBER_MERGE_SUGGESTIONS_COUNT = 'member-merge-suggestions-count',
+  GLOBAL_INTEGRATION_STATUS_COUNT = 'global-integration-status-count',
 }

From 82939a91540dc40857f972e3064c3cffadd5f5f8 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Tue, 9 Dec 2025 12:20:14 +0800
Subject: [PATCH 07/51] chore: wired integration details list to api

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../integration/config/status/connecting.ts   |  11 +-
 .../modules/integration/config/status/done.ts |  11 +-
 .../integration/config/status/error.ts        |  11 +-
 .../integration/config/status/index.ts        |  55 +--
 .../config/status/not-connected.ts            |  11 +-
 .../config/status/waiting-for-action.ts       |  11 +-
 .../components/fragments/integration-tabs.vue |   2 +-
 .../sections/integration-details.vue          |  64 ++-
 .../sections/integration-status.vue           |   8 +-
 .../overview/services/overview.api.service.ts |  57 ++-
 .../overview/store/mock-overview-data.ts      | 390 ++++++++++++++++++
 .../modules/overview/types/overview.types.ts  |   7 +
 frontend/src/shared/types/tanstack.ts         |   1 +
 13 files changed, 581 insertions(+), 58 deletions(-)

diff --git a/frontend/src/modules/admin/modules/integration/config/status/connecting.ts b/frontend/src/modules/admin/modules/integration/config/status/connecting.ts
index 929f43e3ce..7f6ba81646 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/connecting.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/connecting.ts
@@ -1,4 +1,4 @@
-import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index';
+import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index'
 
 const connecting: IntegrationStatusConfig = {
   key: 'connecting',
@@ -19,6 +19,11 @@ const connecting: IntegrationStatusConfig = {
     empty: 'No integrations with connection in progress',
     badge: 'bg-primary-50',
   },
-};
+  chipStatus: {
+    icon: 'clock',
+    iconType: 'solid',
+    color: 'text-primary-500',
+  },
+}
 
-export default connecting;
+export default connecting
diff --git a/frontend/src/modules/admin/modules/integration/config/status/done.ts b/frontend/src/modules/admin/modules/integration/config/status/done.ts
index bdb0c6ce8d..70df589997 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/done.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/done.ts
@@ -1,4 +1,4 @@
-import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index';
+import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index'
 
 const done: IntegrationStatusConfig = {
   key: 'done',
@@ -19,6 +19,11 @@ const done: IntegrationStatusConfig = {
     empty: 'No integrations connected',
     badge: 'bg-green-100',
   },
-};
+  chipStatus: {
+    icon: 'circle-check',
+    iconType: 'solid',
+    color: 'text-green-500',
+  },
+}
 
-export default done;
+export default done
diff --git a/frontend/src/modules/admin/modules/integration/config/status/error.ts b/frontend/src/modules/admin/modules/integration/config/status/error.ts
index 41f9705fb9..8feb99ace6 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/error.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/error.ts
@@ -1,4 +1,4 @@
-import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index';
+import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index'
 
 const error: IntegrationStatusConfig = {
   key: 'error',
@@ -19,6 +19,11 @@ const error: IntegrationStatusConfig = {
     empty: 'No integrations with a failed connection',
     badge: 'bg-red-100',
   },
-};
+  chipStatus: {
+    icon: 'circle-exclamation',
+    iconType: 'solid',
+    color: 'text-red-600',
+  },
+}
 
-export default error;
+export default error
diff --git a/frontend/src/modules/admin/modules/integration/config/status/index.ts b/frontend/src/modules/admin/modules/integration/config/status/index.ts
index 41ddd8a2be..52654e01e1 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/index.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/index.ts
@@ -1,28 +1,33 @@
-import done from './done';
-import error from './error';
-import waitingForAction from './waiting-for-action';
-import connecting from './connecting';
-import notConnected from './not-connected';
+import done from './done'
+import error from './error'
+import waitingForAction from './waiting-for-action'
+import connecting from './connecting'
+import notConnected from './not-connected'
 
 export interface IntegrationStatusConfig {
-  key: string;
-  show: (integration: any) => boolean;
-  statuses: string[],
+  key: string
+  show: (integration: any) => boolean
+  statuses: string[]
   status: {
-    text: string;
-    icon: string;
-    iconType?: string;
-    color: string;
-  },
+    text: string
+    icon: string
+    iconType?: string
+    color: string
+  }
   actionBar: {
-    background: string;
-    color: string;
-  },
+    background: string
+    color: string
+  }
   tabs: {
-    text: string;
-    empty: string;
-    badge: string;
-  },
+    text: string
+    empty: string
+    badge: string
+  }
+  chipStatus?: {
+    icon: string
+    iconType?: string
+    color: string
+  }
 }
 
 export const lfIntegrationStatuses: Record<string, IntegrationStatusConfig> = {
@@ -30,7 +35,7 @@ export const lfIntegrationStatuses: Record<string, IntegrationStatusConfig> = {
   error,
   waitingForAction,
   connecting,
-};
+}
 
 export const lfIntegrationStatusesTabs: Record<string, IntegrationStatusConfig> = {
   done,
@@ -38,14 +43,14 @@ export const lfIntegrationStatusesTabs: Record<string, IntegrationStatusConfig>
   waitingForAction,
   error,
   notConnected,
-};
+}
 
 export const getIntegrationStatus = (integration: any): IntegrationStatusConfig => {
   // eslint-disable-next-line no-restricted-syntax
   for (const key in lfIntegrationStatuses) {
     if (lfIntegrationStatuses[key].show(integration)) {
-      return lfIntegrationStatuses[key];
+      return lfIntegrationStatuses[key]
     }
   }
-  return connecting;
-};
+  return connecting
+}
diff --git a/frontend/src/modules/admin/modules/integration/config/status/not-connected.ts b/frontend/src/modules/admin/modules/integration/config/status/not-connected.ts
index 797f79c364..4bd316238c 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/not-connected.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/not-connected.ts
@@ -1,4 +1,4 @@
-import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index';
+import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index'
 
 const notConnected: IntegrationStatusConfig = {
   key: 'notConnected',
@@ -18,6 +18,11 @@ const notConnected: IntegrationStatusConfig = {
     empty: 'No integrations to be connected',
     badge: 'bg-gray-100',
   },
-};
+  chipStatus: {
+    icon: 'link-simple-slash',
+    iconType: 'light',
+    color: 'text-gray-600',
+  },
+}
 
-export default notConnected;
+export default notConnected
diff --git a/frontend/src/modules/admin/modules/integration/config/status/waiting-for-action.ts b/frontend/src/modules/admin/modules/integration/config/status/waiting-for-action.ts
index 53f8994d8a..7a514fd7d3 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/waiting-for-action.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/waiting-for-action.ts
@@ -1,4 +1,4 @@
-import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index';
+import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index'
 
 const waitingForAction: IntegrationStatusConfig = {
   key: 'waitingForAction',
@@ -19,6 +19,11 @@ const waitingForAction: IntegrationStatusConfig = {
     empty: 'No integrations with a pending action',
     badge: 'bg-yellow-100',
   },
-};
+  chipStatus: {
+    icon: 'triangle-exclamation',
+    iconType: 'solid',
+    color: 'text-yellow-500',
+  },
+}
 
-export default waitingForAction;
+export default waitingForAction
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integration-tabs.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integration-tabs.vue
index 974ca1cee4..0253f0ce7f 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/integration-tabs.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integration-tabs.vue
@@ -3,7 +3,7 @@
     <el-tab-pane v-for="tab in tabs" :key="tab.key" :label="tab.label + ` (${tab.count})`" :name="tab.key">
       <template #label>
         <div class="flex items-center gap-1.5">
-          <lf-icon :name="tab.icon" :size="16" class="text-gray-600" />
+          <lf-icon :name="tab.icon" :size="20" class="text-gray-600" />
           <span>{{ tab.label }} ({{ tab.count }})</span>
         </div>
       </template>
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
index 00af8e08c1..bfe6b15a2c 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
@@ -20,7 +20,7 @@
     <!-- Integration Rows -->
     <div class="divide-y divide-gray-200">
       <integration-row 
-        v-for="integrationStatus in filteredIntegrations" 
+        v-for="integrationStatus in paginatedIntegrations" 
         :key="integrationStatus.id"
         :integrationStatus="integrationStatus"
       />
@@ -29,28 +29,53 @@
     <!-- Footer -->
     <div class="px-5 py-6 flex items-center justify-center gap-4">
       <span class="text-xs text-gray-400">{{ paginationText }}</span>
-      <button class="text-xs text-primary-500 font-semibold hover:text-primary-600">
-        Load more
+      <button 
+        v-if="hasNextPage"
+        class="text-xs text-primary-500 font-semibold hover:text-primary-600 flex items-center gap-1" 
+        :disabled="isFetchingNextPage"
+        :class="{ 'cursor-not-allowed': isFetchingNextPage }"
+        @click="() => fetchNextPage()">
+        <lf-icon name="circle-notch animate-spin" :size="16" class="text-primary-200" v-if="isFetchingNextPage" />
+        <span v-if="isFetchingNextPage" class="text-primary-200">Loading integrations...</span>
+        <span v-else>Load more</span>
       </button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { mockOverviewData } from '@/modules/admin/modules/overview/store/mock-overview-data';
 import IntegrationTabs from '@/modules/admin/modules/overview/components/fragments/integration-tabs.vue';
 import IntegrationRow from '@/modules/admin/modules/overview/components/fragments/integration-row.vue';
 import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
 import { storeToRefs } from 'pinia';
 import { lfIntegrationStatusesTabs } from '@/modules/admin/modules/integration/config/status';
+import { OVERVIEW_API_SERVICE } from '@/modules/admin/modules/overview/services/overview.api.service';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
-const { integrationStatusCount } = storeToRefs(useOverviewStore());
+const { integrationStatusCount, selectedIntegrationId } = storeToRefs(useOverviewStore());
 
 // Mock data for integrations
 const integrations = ref(mockOverviewData);
 
 const activeTab = ref(lfIntegrationStatusesTabs.connecting.key);
+const limit = ref(3);
+
+const params = computed(() => {
+  return {
+    platform: selectedIntegrationId.value || undefined, //activeTab.value,
+    status: ['done'], //lfIntegrationStatusesTabs[activeTab.value].statuses,
+    query: '',
+    limit: limit.value
+  };
+});
+
+const { data, isPending, isError, isFetchingNextPage, fetchNextPage, hasNextPage } = OVERVIEW_API_SERVICE.fetchGlobalIntegrations(params);
+const totalCount = computed(() => {
+  // @ts-expect-error - TanStack Query type inference issue with Vue
+  return data.value?.pages[0].count || 0;
+});
 
 // TODO: remove mock data and use the API
 const filteredIntegrations = computed(() => {
@@ -68,10 +93,14 @@ const filteredIntegrations = computed(() => {
   });
 });
 
+const paginatedIntegrations = computed(() => {
+  // @ts-expect-error - TanStack Query type inference issue with Vue
+  return data.value?.pages.flatMap(page => page.rows) || [];
+});
+
 const paginationText = computed(() => {
-  const total = 120;
-  const showing = filteredIntegrations.value.length;
-  return `${showing} out of ${total} integrations`;
+  const showing = paginatedIntegrations.value.length;
+  return `${showing} out of ${totalCount.value} integrations`;
 });
 
 const overviewTabs = computed(() => {
@@ -80,22 +109,35 @@ const overviewTabs = computed(() => {
     label: 'In progress',
     key: lfIntegrationStatusesTabs.connecting.key,
     count: integrationStatusCount.value[lfIntegrationStatusesTabs.connecting.key] || 0,
-    icon: 'clock',
+    icon: lfIntegrationStatusesTabs.connecting.chipStatus?.icon || lfIntegrationStatusesTabs.connecting.status.icon,
   },
   {
     label: 'Action required',
     key: lfIntegrationStatusesTabs.waitingForAction.key,
     count: integrationStatusCount.value[lfIntegrationStatusesTabs.waitingForAction.key] || 0,
-    icon: 'triangle-exclamation',
+    icon: lfIntegrationStatusesTabs.waitingForAction.chipStatus?.icon || lfIntegrationStatusesTabs.waitingForAction.status.icon,
   },
   {
     label: 'Connection failed',
     key: lfIntegrationStatusesTabs.error.key,
     count: integrationStatusCount.value[lfIntegrationStatusesTabs.error.key] || 0,
-    icon: 'circle-exclamation',
+    icon: lfIntegrationStatusesTabs.error.chipStatus?.icon || lfIntegrationStatusesTabs.error.status.icon,
   },
 ]
 });
+
+watch(data, () => {
+  // if (data.value) {
+  //   integrations.value = data.value.rows;
+  // }
+  console.log(data.value);
+}, { immediate: true });
+
+// watch(isError, () => {
+//   if (isError.value) {
+//     ToastStore.error('Failed to fetch global integrations');
+//   }
+// });
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
index 9b15e31deb..700521aa89 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
@@ -29,11 +29,11 @@
           @click="navigateTo(`/admin#integrations`)"
         >
           <lf-icon
-            v-if="config.status.icon"
-            :name="config.status.icon"
-            :type="config.status.iconType"
+            v-if="config.chipStatus?.icon || config.status.icon"
+            :name="config.chipStatus?.icon || config.status.icon"
+            :type="config.chipStatus?.iconType || config.status.iconType"
             :size="15"
-            :class="config.status.color"
+            :class="config.chipStatus?.color || config.status.color"
           />
           <span class="text-sm text-neutral-900 font-normal">
             {{ config.tabs.text }}
diff --git a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
index 793932d1d3..84629105b1 100644
--- a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
+++ b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
@@ -1,14 +1,21 @@
 import type { QueryFunction } from '@tanstack/vue-query'
 import { type ComputedRef, computed } from 'vue'
-import { useQuery } from '@tanstack/vue-query'
+import { useInfiniteQuery, useQuery } from '@tanstack/vue-query'
 import { TanstackKey } from '@/shared/types/tanstack'
 import authAxios from '@/shared/axios/auth-axios'
-import { GlobalIntegrationStatusCount } from '../types/overview.types'
+import { GlobalIntegrationStatusCount, IntegrationStatusResponse } from '../types/overview.types'
 
 export interface GlobalIntegrationStatusCountQueryParams {
   platform: string | undefined
 }
 
+export interface GlobalIntegrationIntegrationsQueryParams {
+  platform: string | undefined
+  status: string[]
+  query: string
+  limit: number
+}
+
 class OverviewApiService {
   fetchGlobalIntegrationStatusCount(params: ComputedRef<GlobalIntegrationStatusCountQueryParams>) {
     const queryKey = computed(() => [
@@ -37,6 +44,52 @@ class OverviewApiService {
         })
         .then((res) => res.data)
   }
+
+  fetchGlobalIntegrations(params: ComputedRef<GlobalIntegrationIntegrationsQueryParams>) {
+    const queryKey = computed(() => [
+      TanstackKey.GLOBAL_INTEGRATIONS,
+      params.value.platform,
+      params.value.status,
+      params.value.query,
+      params.value.limit,
+    ])
+    const queryFn = computed<QueryFunction<IntegrationStatusResponse>>(() =>
+      this.fetchGlobalIntegrationsQueryFn(() => ({
+        ...params.value,
+      })),
+    )
+
+    return useInfiniteQuery<
+      IntegrationStatusResponse,
+      Error,
+      IntegrationStatusResponse,
+      readonly unknown[],
+      number
+    >({
+      queryKey,
+      //@ts-expect-error - TanStack Query type inference issue with Vue
+      queryFn,
+      getNextPageParam: this.getNextPageIntegrationsParam,
+      initialPageParam: 0,
+    })
+  }
+
+  fetchGlobalIntegrationsQueryFn(
+    query: () => Record<string, string | number | boolean | undefined | string[] | null>,
+  ): QueryFunction<IntegrationStatusResponse> {
+    return ({ pageParam = 0 }) =>
+      authAxios
+        .get('/integration/global', {
+          params: { offset: pageParam, ...query() },
+        })
+        .then((res) => res.data)
+  }
+
+  getNextPageIntegrationsParam(lastPage: IntegrationStatusResponse): number | undefined {
+    const nextPage = lastPage.offset + lastPage.limit
+    const totalRows = lastPage.count
+    return nextPage < totalRows ? nextPage : undefined
+  }
 }
 
 export const OVERVIEW_API_SERVICE = new OverviewApiService()
diff --git a/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts b/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts
index f8e5e4c062..14b1ef0492 100644
--- a/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts
+++ b/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts
@@ -53,6 +53,396 @@ export const mockOverviewData: IntegrationStatus[] = [
     status: 'in-progress',
     statusDetails: '600 data streams being processed...',
   },
+  {
+    grandparentId: 'k601i697-fc29-ab6i-ic20-fk456175jj45',
+    grandparentName: 'Apache Software Foundation',
+    id: 'hf9b4blc-9c5l-9bm8-ikl0-mc2917il44lk',
+    name: 'Apache Kafka',
+    parentId: 'gl5m8md9-bk79-ac69-fm9l-j9if0c5jf976',
+    parentName: 'Apache Software Foundation',
+    platform: 'git',
+    segmentId: 'f5i8kbkc-9ca3-ba9i-gf7j-m88l07ga9792',
+    settings: { remotes: ['https://github.com/apache/kafka'] },
+    status: 'in-progress',
+    statusDetails: '250 out of 2,500 data streams processed...',
+  },
+  {
+    grandparentId: 'l702j708-gd30-bc7j-jd31-gl567286kk56',
+    grandparentName: 'Linux Foundation',
+    id: 'ig0c5cmd-ad6m-acn9-jlm1-nd3028jm55ml',
+    name: 'Kubernetes',
+    parentId: 'hm6n9ne0-cl80-bd70-gn0m-k0jg1d6kg087',
+    parentName: 'Cloud Native Computing Foundation',
+    platform: 'github',
+    segmentId: 'g6j9lcld-odb4-cb0j-hg8k-n99m18hb0803',
+    settings: { repositories: ['kubernetes/kubernetes', 'kubernetes/community'] },
+    status: 'in-progress',
+    statusDetails: '1,200 out of 5,000 data streams processed...',
+  },
+  {
+    grandparentId: 'm803k819-he41-cd8k-ke42-hm678397ll67',
+    grandparentName: 'Eclipse Foundation',
+    id: 'jh1d6dne-be7n-bdo0-kmn2-oe4139kn66nm',
+    name: 'Eclipse IDE',
+    parentId: 'in7o0of1-dm91-ce81-ho1n-l1kh2e7lh198',
+    parentName: 'Eclipse Foundation',
+    platform: 'git',
+    segmentId: 'h7k0mdme-pec5-dc1k-ih9l-o00n29ic1914',
+    settings: { remotes: ['https://github.com/eclipse/eclipse.platform'] },
+    status: 'in-progress',
+    statusDetails: '800 out of 3,200 data streams processed...',
+  },
+  {
+    grandparentId: 'n904l920-if52-de9l-lf53-in789408mm78',
+    grandparentName: 'Mozilla Foundation',
+    id: 'ki2e7eof-cf8o-cep1-lno3-pf5240lo77on',
+    name: 'Firefox Browser',
+    parentId: 'jo8p1pg2-en02-df92-ip2o-m2li3f8mi209',
+    parentName: 'Mozilla Corporation',
+    platform: 'mercurial',
+    segmentId: 'i8l1nenf-qfd6-ed2l-ji0m-p11o30jd2025',
+    settings: { repositories: ['mozilla-central', 'mozilla-beta'] },
+    status: 'in-progress',
+    statusDetails: '450 out of 1,800 data streams processed...',
+  },
+  {
+    grandparentId: 'o005m031-jg63-ef0m-mg64-jo890519nn89',
+    grandparentName: 'Python Software Foundation',
+    id: 'lj3f8fpg-dg9p-dfq2-moq4-qg6351mp88po',
+    name: 'Python Core',
+    parentId: 'kp9q2qh3-fo13-eg03-jq3p-n3mj4g9nj320',
+    parentName: 'Python Software Foundation',
+    platform: 'git',
+    segmentId: 'j9m2ofog-rgd7-fe3m-kj1n-q22p41ke3136',
+    settings: { remotes: ['https://github.com/python/cpython'] },
+    status: 'in-progress',
+    statusDetails: '1,500 out of 6,000 data streams processed...',
+  },
+  {
+    grandparentId: 'p106n142-kh74-fg1n-nh75-kp901620oo90',
+    grandparentName: 'Node.js Foundation',
+    id: 'mk4g9gqh-eh0q-egr3-npq5-rh7462nq99qp',
+    name: 'Node.js Runtime',
+    parentId: 'lq0r3ri4-gp24-fh14-kr4q-o4nk5h0ok431',
+    parentName: 'OpenJS Foundation',
+    platform: 'git',
+    segmentId: 'k0n3pgph-she8-gf4n-lk2o-r33q52of4247',
+    settings: { remotes: ['https://github.com/nodejs/node'] },
+    status: 'in-progress',
+    statusDetails: '900 out of 3,600 data streams processed...',
+  },
+  {
+    grandparentId: 'q207o253-li85-gh2o-oi86-lq012731pp01',
+    grandparentName: 'React Community',
+    id: 'nl5h0hri-fi1r-fhs4-oqr6-si8573or00rq',
+    name: 'React Framework',
+    parentId: 'mr1s4sj5-hq35-gi25-ls5r-p5ol6i1pl542',
+    parentName: 'Meta Open Source',
+    platform: 'github',
+    segmentId: 'l1o4qhqi-tif9-hg5o-ml3p-s44r63pg5358',
+    settings: { repositories: ['facebook/react', 'reactjs/react.dev'] },
+    status: 'in-progress',
+    statusDetails: '2,100 out of 8,400 data streams processed...',
+  },
+  {
+    grandparentId: 'r308p364-mj96-hi3p-pj97-mr123842qq12',
+    grandparentName: 'Vue.js Community',
+    id: 'om6i1isj-gj2s-git5-prr7-tj9684ps11sr',
+    name: 'Vue.js Framework',
+    parentId: 'ns2t5tk6-ir46-hj36-mt6s-q6pm7j2qm653',
+    parentName: 'Vue.js Team',
+    platform: 'github',
+    segmentId: 'm2p5riir-ujg0-ih6p-nm4q-t55s74qh6469',
+    settings: { repositories: ['vuejs/core', 'vuejs/vue'] },
+    status: 'in-progress',
+    statusDetails: '750 out of 3,000 data streams processed...',
+  },
+  {
+    grandparentId: 's409q475-nk07-ij4q-qk08-ns234953rr23',
+    grandparentName: 'Angular Team',
+    id: 'pn7j2jtk-hk3t-hju6-qss8-uk0795qt22ts',
+    name: 'Angular Framework',
+    parentId: 'ot3u6ul7-js57-ik47-nu7t-r7qn8k3rn764',
+    parentName: 'Google Open Source',
+    platform: 'git',
+    segmentId: 'n3q6sjjs-vkh1-ji7q-on5r-u66t85ri7570',
+    settings: { remotes: ['https://github.com/angular/angular'] },
+    status: 'in-progress',
+    statusDetails: '1,800 out of 7,200 data streams processed...',
+  },
+  {
+    grandparentId: 't50ar586-ol18-jk5r-rl19-ot345064ss34',
+    grandparentName: 'Django Software Foundation',
+    id: 'qo8k3kul-il4u-ikv7-rtt9-vl1806ru33ut',
+    name: 'Django Framework',
+    parentId: 'pu4v7vm8-kt68-jl58-ov8u-s8rf9l4sf875',
+    parentName: 'Django Software Foundation',
+    platform: 'git',
+    segmentId: 'o4r7tkuk-wli2-kj8r-po6s-v77u96sj8681',
+    settings: { remotes: ['https://github.com/django/django'] },
+    status: 'in-progress',
+    statusDetails: '650 out of 2,600 data streams processed...',
+  },
+  {
+    grandparentId: 'u601s697-pm29-kl6s-sm20-pu456175tt45',
+    grandparentName: 'Ruby Community',
+    id: 'rp9l4lvn-jm5v-jlw8-suv0-wm2917sv44vl',
+    name: 'Ruby on Rails',
+    parentId: 'qv5w8wn9-lu79-km69-pw9v-t9sg0m5tg986',
+    parentName: 'Rails Core Team',
+    platform: 'git',
+    segmentId: 'p5s8ulvl-xmj3-lk9s-qp7t-w88v07tk9792',
+    settings: { remotes: ['https://github.com/rails/rails'] },
+    status: 'in-progress',
+    statusDetails: '1,100 out of 4,400 data streams processed...',
+  },
+  {
+    grandparentId: 'v702t708-qn30-lm7t-tn31-qv567286uu56',
+    grandparentName: 'Laravel Community',
+    id: 'sq0m5mwo-kn6w-kmx9-tvw1-xn3028tw55wm',
+    name: 'Laravel Framework',
+    parentId: 'rw6x9xo0-mv80-ln70-qw0w-u0th1n6uh087',
+    parentName: 'Laravel LLC',
+    platform: 'github',
+    segmentId: 'q6t9vmwm-ynk4-ml0t-rq8u-x99w18ul0803',
+    settings: { repositories: ['laravel/framework', 'laravel/laravel'] },
+    status: 'in-progress',
+    statusDetails: '850 out of 3,400 data streams processed...',
+  },
+  {
+    grandparentId: 'w803u819-ro41-mn8u-uo42-rw678397vv67',
+    grandparentName: 'Spring Community',
+    id: 'tr1n6nxp-lo7x-lny0-uwx2-yo4139ux66xn',
+    name: 'Spring Framework',
+    parentId: 'sx7y0yp1-nw91-mo81-rx1y-v1ui2o7vi198',
+    parentName: 'VMware Tanzu',
+    platform: 'git',
+    segmentId: 'r7u0wnxn-zol5-nm1u-sr9v-y00x29vm1914',
+    settings: { remotes: ['https://github.com/spring-projects/spring-framework'] },
+    status: 'in-progress',
+    statusDetails: '1,300 out of 5,200 data streams processed...',
+  },
+  {
+    grandparentId: 'x904v920-sp52-no9v-vp53-sx789408ww78',
+    grandparentName: 'Express.js Community',
+    id: 'us2o7oyq-mp8y-moz1-vxy3-zp5240vy77yo',
+    name: 'Express.js Framework',
+    parentId: 'ty8z1zq2-ox02-np92-sy2z-w2vj3p8wj209',
+    parentName: 'OpenJS Foundation',
+    platform: 'github',
+    segmentId: 's8v1xoyo-apm6-on2v-ts0w-z11y30wn2025',
+    settings: { repositories: ['expressjs/express'] },
+    status: 'in-progress',
+    statusDetails: '400 out of 1,600 data streams processed...',
+  },
+  {
+    grandparentId: 'y005w031-tq63-op0w-wq64-ty890519xx89',
+    grandparentName: 'Fastify Community',
+    id: 'vt3p8pzr-nq9z-npa2-wyz4-aq6351wz88zp',
+    name: 'Fastify Framework',
+    parentId: 'uz9a2ar3-py13-oq03-tz3a-x3wk4q9xk320',
+    parentName: 'Fastify Team',
+    platform: 'git',
+    segmentId: 't9w2ypzp-bqn7-po3w-ut1x-a22z41xo3136',
+    settings: { remotes: ['https://github.com/fastify/fastify'] },
+    status: 'in-progress',
+    statusDetails: '550 out of 2,200 data streams processed...',
+  },
+  {
+    grandparentId: 'z106x142-ur74-pq1x-xr75-uz901620yy90',
+    grandparentName: 'NestJS Community',
+    id: 'wu4q9qas-or0a-oqb3-xza5-br7462ya99aq',
+    name: 'NestJS Framework',
+    parentId: 'va0b3bs4-qz24-pr14-ua4b-y4xl5r0yl431',
+    parentName: 'NestJS Team',
+    platform: 'github',
+    segmentId: 'u0x3zqaq-cro8-qq4x-vu2y-b33a52zp4247',
+    settings: { repositories: ['nestjs/nest'] },
+    status: 'in-progress',
+    statusDetails: '700 out of 2,800 data streams processed...',
+  },
+  {
+    grandparentId: 'a207y253-vs85-qr2y-ys86-va012731zz01',
+    grandparentName: 'Next.js Community',
+    id: 'xv5r0rbt-ps1b-prc4-yab6-cs8573zb00br',
+    name: 'Next.js Framework',
+    parentId: 'wb1c4ct5-ra35-qs25-vb5c-z5ym6s1zm542',
+    parentName: 'Vercel Inc.',
+    platform: 'git',
+    segmentId: 'v1y4arbs-dsp9-rr5y-wv3z-c44b63aq5358',
+    settings: { remotes: ['https://github.com/vercel/next.js'] },
+    status: 'in-progress',
+    statusDetails: '1,600 out of 6,400 data streams processed...',
+  },
+  {
+    grandparentId: 'b308z364-wt96-rs3z-zt97-wb123842aa12',
+    grandparentName: 'Nuxt.js Community',
+    id: 'yw6s1scu-qt2c-qsd5-zbc7-dt9684ac11cs',
+    name: 'Nuxt.js Framework',
+    parentId: 'xc2d5du6-sb46-rt36-wc6d-a6zn7t2an653',
+    parentName: 'NuxtLabs',
+    platform: 'github',
+    segmentId: 'w2z5bsct-etq0-sr6z-xw4a-d55c74br6469',
+    settings: { repositories: ['nuxt/nuxt'] },
+    status: 'in-progress',
+    statusDetails: '950 out of 3,800 data streams processed...',
+  },
+  {
+    grandparentId: 'c409a475-xu07-st4a-au08-xc234953bb23',
+    grandparentName: 'Gatsby Community',
+    id: 'zx7t2tdv-ru3d-rte6-acd8-eu0795bd22dt',
+    name: 'Gatsby Framework',
+    parentId: 'yd3e6ev7-tc57-su47-xd7e-b7ao8u3bo764',
+    parentName: 'Gatsby Inc.',
+    platform: 'git',
+    segmentId: 'x3a6ctdu-fuq1-ts7a-yx5b-e66d85cs7570',
+    settings: { remotes: ['https://github.com/gatsbyjs/gatsby'] },
+    status: 'in-progress',
+    statusDetails: '1,050 out of 4,200 data streams processed...',
+  },
+  {
+    grandparentId: 'd50bb586-yv18-tu5b-bv19-yd345064cc34',
+    grandparentName: 'Svelte Community',
+    id: 'ay8u3uew-sv4e-suf7-bde9-fv1806ce33eu',
+    name: 'Svelte Framework',
+    parentId: 'ze4f7fw8-ud68-tv58-ye8f-c8bp9v4cp875',
+    parentName: 'Svelte Team',
+    platform: 'github',
+    segmentId: 'y4b7duev-gvr2-ut8b-zy6c-f77e96dt8681',
+    settings: { repositories: ['sveltejs/svelte'] },
+    status: 'in-progress',
+    statusDetails: '600 out of 2,400 data streams processed...',
+  },
+  {
+    grandparentId: 'e601c697-zw29-uv6c-cw20-ze456175dd45',
+    grandparentName: 'Solid.js Community',
+    id: 'bz9v4vfx-tw5f-tvg8-cef0-gw2917df44fv',
+    name: 'Solid.js Framework',
+    parentId: 'af5g8gx9-ve79-uw69-zf9g-d9cq0w5eq986',
+    parentName: 'Solid Team',
+    platform: 'git',
+    segmentId: 'z5c8evfw-hwt3-vu9c-az7d-g88f07eu9792',
+    settings: { remotes: ['https://github.com/solidjs/solid'] },
+    status: 'in-progress',
+    statusDetails: '350 out of 1,400 data streams processed...',
+  },
+  {
+    grandparentId: 'f702d708-ax30-vw7d-dx31-af567286ee56',
+    grandparentName: 'Qwik Community',
+    id: 'ca0w5wgy-ux6g-uwh9-dfw1-hx3028eg55gw',
+    name: 'Qwik Framework',
+    parentId: 'bg6h9hy0-wf80-vx70-ag0h-e0dr1x6fr087',
+    parentName: 'Builder.io',
+    platform: 'github',
+    segmentId: 'a6d9fwgw-ixt4-wv0d-ba8e-h99g18fv0803',
+    settings: { repositories: ['BuilderIO/qwik'] },
+    status: 'in-progress',
+    statusDetails: '300 out of 1,200 data streams processed...',
+  },
+  {
+    grandparentId: 'g803e819-by41-wx8e-ey42-bg678397ff67',
+    grandparentName: 'Remix Community',
+    id: 'db1x6xhz-vy7h-vxi0-egx2-iy4139fh66hx',
+    name: 'Remix Framework',
+    parentId: 'ch7i0iz1-xg91-wy81-bh1i-f1es2y7gs198',
+    parentName: 'Remix Software Inc.',
+    platform: 'git',
+    segmentId: 'b7e0gxhx-jyu5-xw1e-cb9f-i00h29gw1914',
+    settings: { remotes: ['https://github.com/remix-run/remix'] },
+    status: 'in-progress',
+    statusDetails: '800 out of 3,200 data streams processed...',
+  },
+  {
+    grandparentId: 'h904f920-cz52-xy9f-fz53-ch789408gg78',
+    grandparentName: 'Astro Community',
+    id: 'ec2y7yia-wz8i-wyj1-fhy3-jz5240gi77iy',
+    name: 'Astro Framework',
+    parentId: 'di8j1ja2-yh02-xz92-ci2j-g2ft3z8ht209',
+    parentName: 'The Astro Technology Company',
+    platform: 'github',
+    segmentId: 'c8f1hyhz-kzv6-xy2f-dc0g-j11i30hx2025',
+    settings: { repositories: ['withastro/astro'] },
+    status: 'in-progress',
+    statusDetails: '1,200 out of 4,800 data streams processed...',
+  },
+  {
+    grandparentId: 'i005g031-da63-yz0g-ga64-di890519hh89',
+    grandparentName: 'Vite Community',
+    id: 'fd3z8zjb-xa9j-xzk2-giz4-ka6351hj88jz',
+    name: 'Vite Build Tool',
+    parentId: 'ej9k2kb3-zi13-ya03-dj3k-h3gt4a9ik320',
+    parentName: 'Vite Team',
+    platform: 'git',
+    segmentId: 'd9g2izkz-lav7-yz3g-ed1h-k22j41iy3136',
+    settings: { remotes: ['https://github.com/vitejs/vite'] },
+    status: 'in-progress',
+    statusDetails: '1,400 out of 5,600 data streams processed...',
+  },
+  {
+    grandparentId: 'j106h142-eb74-za1h-hb75-ej901620ii90',
+    grandparentName: 'Webpack Community',
+    id: 'ge4a9akc-yb0k-yam3-hjk5-lb7462ik99ka',
+    name: 'Webpack Bundler',
+    parentId: 'fk0l3lc4-aj24-zb14-ek4l-i4hu5b0jl431',
+    parentName: 'JS Foundation',
+    platform: 'github',
+    segmentId: 'e0h3jakb-mbw8-za4h-fe2i-l33k52jz4247',
+    settings: { repositories: ['webpack/webpack'] },
+    status: 'in-progress',
+    statusDetails: '750 out of 3,000 data streams processed...',
+  },
+  {
+    grandparentId: 'k207i253-fc85-ab2i-ic86-fk012731jj01',
+    grandparentName: 'Rollup Community',
+    id: 'hf5b0bld-zc1l-zbn4-ikl6-mc8573jl00lb',
+    name: 'Rollup Bundler',
+    parentId: 'gl1m4md5-bk35-ac25-fl5m-j5iv6c1km542',
+    parentName: 'Rollup Team',
+    platform: 'git',
+    segmentId: 'f1i4kblc-ncx9-ab5i-gf3j-m44l63ka5358',
+    settings: { remotes: ['https://github.com/rollup/rollup'] },
+    status: 'in-progress',
+    statusDetails: '500 out of 2,000 data streams processed...',
+  },
+  {
+    grandparentId: 'l308j364-gd96-bc3j-jd97-gl123842kk12',
+    grandparentName: 'Parcel Community',
+    id: 'ig6c1cme-ad2m-acn5-jlm7-nd9684km11mc',
+    name: 'Parcel Bundler',
+    parentId: 'hm2n5ne6-cl46-bd36-gm6n-k6jw7d2ln653',
+    parentName: 'Parcel Team',
+    platform: 'github',
+    segmentId: 'g2j5lcmd-ody0-bc6j-hg4k-n55m74lb6469',
+    settings: { repositories: ['parcel-bundler/parcel'] },
+    status: 'in-progress',
+    statusDetails: '650 out of 2,600 data streams processed...',
+  },
+  {
+    grandparentId: 'm409k475-he07-cd4k-ke08-hm234953ll23',
+    grandparentName: 'ESBuild Community',
+    id: 'jh7d2dnf-be3n-bdo6-kmn8-oe0795ln22mn',
+    name: 'ESBuild Tool',
+    parentId: 'in3o6of7-dm57-ce47-hn7o-l7kx8e3mo764',
+    parentName: 'Evan Wallace',
+    platform: 'git',
+    segmentId: 'h3k6mdne-pey1-cd7k-ih5l-o66n85mc7570',
+    settings: { remotes: ['https://github.com/evanw/esbuild'] },
+    status: 'in-progress',
+    statusDetails: '900 out of 3,600 data streams processed...',
+  },
+  {
+    grandparentId: 'n50al586-if18-de5l-lf19-in345064mm34',
+    grandparentName: 'SWC Community',
+    id: 'ki8e3eog-cf4o-cep7-lno9-pf1806mo33no',
+    name: 'SWC Compiler',
+    parentId: 'jo4p7pg8-en68-df58-io8p-m8ly9f4np875',
+    parentName: 'SWC Team',
+    platform: 'github',
+    segmentId: 'i4l7neog-qfz2-de8l-ji6m-p77o96nd8681',
+    settings: { repositories: ['swc-project/swc'] },
+    status: 'in-progress',
+    statusDetails: '1,100 out of 4,400 data streams processed...',
+  },
   // Action Required integrations
   {
     grandparentId: 'h308f364-c9g6-783f-f9d7-ch123842gg12',
diff --git a/frontend/src/modules/admin/modules/overview/types/overview.types.ts b/frontend/src/modules/admin/modules/overview/types/overview.types.ts
index 07015c68b2..ab4d89624f 100644
--- a/frontend/src/modules/admin/modules/overview/types/overview.types.ts
+++ b/frontend/src/modules/admin/modules/overview/types/overview.types.ts
@@ -28,6 +28,13 @@ export interface IntegrationStatus {
   statusDetails: string
 }
 
+export interface IntegrationStatusResponse {
+  count: number
+  limit: number
+  offset: number
+  rows: IntegrationStatus[]
+}
+
 export interface GlobalIntegrationStatusCount {
   status: string
   count: number
diff --git a/frontend/src/shared/types/tanstack.ts b/frontend/src/shared/types/tanstack.ts
index 83be487772..b751a6a312 100644
--- a/frontend/src/shared/types/tanstack.ts
+++ b/frontend/src/shared/types/tanstack.ts
@@ -6,4 +6,5 @@ export enum TanstackKey {
   MEMBERS_LIST = 'members-list',
   MEMBER_MERGE_SUGGESTIONS_COUNT = 'member-merge-suggestions-count',
   GLOBAL_INTEGRATION_STATUS_COUNT = 'global-integration-status-count',
+  GLOBAL_INTEGRATIONS = 'global-integrations',
 }

From 287c88ad3ae5391cc59ebea7b23854b3bc84e52e Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Tue, 9 Dec 2025 15:10:46 +0800
Subject: [PATCH 08/51] chore: added sub project filter dropdown

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../components/fragments/integration-row.vue  |  12 +-
 .../components/fragments/project-filter.vue   |  24 ++-
 .../fragments/project-group-filter.vue        |  30 +++-
 .../fragments/sub-project-filter.vue          | 136 ++++++++++++++
 .../sections/integration-details.vue          | 167 +++++++++---------
 .../components/sections/overview-filter.vue   |   4 +-
 .../overview/components/sections/summary.vue  |   7 +-
 .../overview/services/overview.api.service.ts |  28 +++
 .../modules/overview/store/overview.store.ts  |  10 +-
 frontend/src/shared/types/tanstack.ts         |   1 +
 10 files changed, 314 insertions(+), 105 deletions(-)
 create mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/sub-project-filter.vue

diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
index 5e15154cfd..b2bdfc77c8 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
@@ -12,12 +12,12 @@
     </div>
 
     <!-- Project Column -->
-    <div class="w-2/6">
-      <div class="text-sm font-medium text-gray-900">{{ integrationStatus.name }}</div>
-      <div class="text-xs text-gray-500 flex">
-        <span class="truncate">{{ integrationStatus.grandparentName }}</span>
-        <span class="text-gray-500">></span>
-        <span class="truncate">{{ integrationStatus.parentName }}</span>
+    <div class="w-2/6 min-w-0">
+      <div class="text-sm font-medium text-gray-900 truncate">{{ integrationStatus.name }}</div>
+      <div class="text-xs text-gray-500 flex items-center min-w-0">
+        <span class="truncate flex-shrink min-w-0">{{ integrationStatus.grandparentName }}</span>
+        <span class="text-gray-500 flex-shrink-0 px-1">></span>
+        <span class="truncate flex-shrink min-w-0">{{ integrationStatus.parentName }}</span>
       </div>
     </div>
 
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
index 3a51c3585f..cdca412f40 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
@@ -1,12 +1,12 @@
 <template>
   <lfx-dropdown-select
-    v-model="selectedProject"
+    v-model="selectedProjectId"
     width="255px"
-    match-width="false"
+    :match-width="false"
     dropdown-class="max-h-80"
     placement="bottom-end"
   >
-    <template #trigger="{ selectedOption }">
+    <template #trigger>
       <lfx-dropdown-selector
         size="medium"
         type="filled"
@@ -21,7 +21,7 @@
             :size="16"
           />
           <span class="text-sm text-neutral-900 truncate">
-            {{ trimDisplay(selectedOption?.value?.name || '') || 'All projects' }}
+            {{ trimDisplay(selectedProject?.name || '') || 'All projects' }}
           </span>
         </div>
       </lfx-dropdown-selector>
@@ -34,7 +34,7 @@
           value="all"
           label="All projects"
           :selected="!selectedProject"
-          @click="selectedProject = null"
+          @click="selectedProjectId = ''"
           :class="{
             '!bg-blue-50': !selectedProject,
           }"
@@ -82,6 +82,7 @@
 import {
   ref,
   computed,
+  watch,
 } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
@@ -96,7 +97,7 @@ import LfxDropdownSeparator from '@/ui-kit/lfx/dropdown/dropdown-separator.vue';
 import LfxDropdownSearch from '@/ui-kit/lfx/dropdown/dropdown-search.vue';
 
 const overviewStore = useOverviewStore();
-const { selectedProject } = storeToRefs(overviewStore);
+const { selectedProject, selectedProjectId } = storeToRefs(overviewStore);
 
 const searchQuery = ref('');
 const searchValue = useDebounce(searchQuery, 300);
@@ -110,8 +111,7 @@ const trimDisplay = (name: string) => {
 };
 
 const selectProject = (projectId: string) => {
-  const project = props.projects.find(p => p.id === projectId);
-  selectedProject.value = project || null;
+  selectedProjectId.value = projectId;
 };
 
 const projectsList = computed(() => {
@@ -125,6 +125,14 @@ const projectsList = computed(() => {
     name: project.name,
   }));
 });
+
+watch(selectedProjectId, (newVal) => {
+  if (newVal && newVal !== '') {
+    selectedProject.value = props.projects.find(p => p.id === newVal) || null;
+  } else {
+    selectedProject.value = null;
+  }
+}, { immediate: true });
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue
index 9abcc37759..782c99d88e 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue
@@ -1,8 +1,8 @@
 <template>
   <lfx-dropdown-select
-    v-model="selectedProjectGroup"
+    v-model="selectedProjectGroupId"
     width="255px"
-    match-width="false"
+    :match-width="false"
     dropdown-class="max-h-80"
     placement="bottom-end"
   >
@@ -21,7 +21,7 @@
             :size="16"
           />
           <span class="text-sm text-neutral-900 truncate">
-            {{ trimDisplay(selectedOption?.value?.name || '') || 'All project groups' }}
+            {{ trimDisplay(selectedProjectGroup?.name || '') || 'All project groups' }}
           </span>
         </div>
       </lfx-dropdown-selector>
@@ -34,7 +34,7 @@
           value="all"
           label="All project groups"
           :selected="!selectedProjectGroup"
-          @click="selectedProjectGroup = null"
+          @click="selectedProjectGroupId = ''"
           :class="{
             '!bg-blue-50': !selectedProjectGroup,
           }"
@@ -75,7 +75,7 @@
           :value="projectGroup.id"
           :label="projectGroup.name"
           :selected="selectedProjectGroup?.id === projectGroup.id"
-          @click="selectedProjectGroup = projectGroup"
+          @click="selectedProjectGroupId = projectGroup.id"
           :class="{
             '!bg-blue-50': selectedProjectGroup?.id === projectGroup.id,
           }"
@@ -123,7 +123,13 @@ import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
 import AppLfLoadMore from './load-more.vue';
 
 const overviewStore = useOverviewStore();
-const { selectedProjectGroup } = storeToRefs(overviewStore);
+const { 
+  selectedProjectGroup, 
+  selectedProjectGroupId, 
+  selectedProjectId, 
+  selectedSubProjectId, 
+  selectedProject, 
+  selectedSubProject } = storeToRefs(overviewStore);
 
 const searchQuery = ref('');
 const searchValue = useDebounce(searchQuery, 300);
@@ -179,6 +185,18 @@ watch(error, (err) => {
     ToastStore.error('Something went wrong while fetching project groups');
   }
 });
+
+watch(selectedProjectGroupId, (newVal) => {
+  if (newVal && newVal !== '') {
+    selectedProjectGroup.value = projectGroupsList.value.find(pg => pg.id === newVal) || null;
+  } else {
+    selectedProjectGroup.value = null;
+    selectedProjectId.value = '';
+    selectedSubProjectId.value = '';
+    selectedProject.value = null;
+    selectedSubProject.value = null;
+  }
+}, { immediate: true });
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/sub-project-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/sub-project-filter.vue
new file mode 100644
index 0000000000..b1131df880
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/sub-project-filter.vue
@@ -0,0 +1,136 @@
+<template>
+  <lfx-dropdown-select
+    v-model="selectedProjectId"
+    width="255px"
+    :match-width="false"
+    dropdown-class="max-h-80"
+    placement="bottom-end"
+    :disabled="isPending"
+  >
+    <template #trigger>
+      <lfx-dropdown-selector
+        size="medium"
+        type="filled"
+        class="flex items-center justify-center w-full !rounded-l-none"
+      >
+        <div class="flex items-center gap-2">
+          <lf-icon
+            name="folders"
+            :size="16"
+          />
+          <span class="text-sm text-neutral-900 truncate">
+            {{ trimDisplay(selectedSubProject?.name || '') || 'All sub-projects' }}
+          </span>
+        </div>
+      </lfx-dropdown-selector>
+    </template>
+
+    <template #default>
+      <div class="sticky -top-1 z-10 bg-white w-full -mt-1 pt-1 flex flex-col gap-1">
+        <!-- All projects option -->
+        <lfx-dropdown-item
+          value="all"
+          label="All projects"
+          :selected="!selectedSubProject"
+          @click="selectedProjectId = ''"
+          :class="{
+            '!bg-blue-50': !selectedSubProject,
+          }"
+        />
+
+        <lfx-dropdown-separator />
+
+        <!-- Search input -->
+        <lfx-dropdown-search
+          v-model="searchQuery"
+          placeholder="Search projects..."
+          lazy
+          class=""
+        />
+
+        <lfx-dropdown-separator />
+      </div>
+
+      <!-- Projects list -->
+      <div
+        v-if="!subProjectsList.length && searchQuery"
+        class="py-4 px-3 text-sm text-neutral-500 text-center"
+      >
+        No projects found
+      </div>
+
+      <template v-else>
+        <lfx-dropdown-item
+          v-for="subProject in subProjectsList"
+          :key="subProject.id"
+          :value="subProject.id"
+          :label="subProject.name"
+          :selected="selectedSubProject?.id === subProject.id"
+          @click="selectedSubProjectId = subProject.id"
+          :class="{
+            '!bg-blue-50': selectedSubProject?.id === subProject.id,
+          }"
+        />
+      </template>
+    </template>
+  </lfx-dropdown-select>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  watch,
+} from 'vue';
+import { storeToRefs } from 'pinia';
+import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { useDebounce } from '@vueuse/core';
+
+import { Project, SubProject } from '@/modules/lf/segments/types/Segments';
+import LfxDropdownSelect from '@/ui-kit/lfx/dropdown/dropdown-select.vue';
+import LfxDropdownSelector from '@/ui-kit/lfx/dropdown/dropdown-selector.vue';
+import LfxDropdownItem from '@/ui-kit/lfx/dropdown/dropdown-item.vue';
+import LfxDropdownSeparator from '@/ui-kit/lfx/dropdown/dropdown-separator.vue';
+import LfxDropdownSearch from '@/ui-kit/lfx/dropdown/dropdown-search.vue';
+import { OVERVIEW_API_SERVICE } from '@/modules/admin/modules/overview/services/overview.api.service';
+
+const overviewStore = useOverviewStore();
+const { selectedProjectId, selectedSubProjectId, selectedSubProject } = storeToRefs(overviewStore);
+
+const searchQuery = ref('');
+const searchValue = useDebounce(searchQuery, 300);
+
+// const props = defineProps<{
+//   subProjects: Project[];
+// }>();
+
+const params = computed(() => selectedProjectId.value || '');
+
+const { data, isPending } = OVERVIEW_API_SERVICE.fetchProjectById(params);
+
+const trimDisplay = (name: string) => {
+  return name.length > 20 ? `${name.slice(0, 20)}...` : name;
+};
+
+const subProjectsList = computed<SubProject[]>(() => {
+  return (data.value?.subprojects || []).filter((subProject) => {
+    if (!searchValue.value) return true;
+    return subProject.name.toLowerCase().includes(searchValue.value.toLowerCase());
+  });
+});
+
+watch(selectedSubProjectId, (newVal) => {
+  if (newVal && newVal !== '') {
+    selectedSubProject.value = subProjectsList.value?.find(p => p.id === newVal) || null;
+  } else {
+    selectedSubProject.value = null;
+  }
+}, { immediate: true });
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfSubProjectFilter',
+};
+</script>
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
index bfe6b15a2c..8e4ed5b25d 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
@@ -7,39 +7,63 @@
       </h3>
       
       <!-- Tabs -->
-      <integration-tabs :tabs="overviewTabs" :modelValue="activeTab" @update:modelValue="activeTab = $event" />
+      <integration-tabs 
+        v-if="!isEmpty"
+        :tabs="overviewTabs" 
+        :modelValue="activeTab" 
+        @update:modelValue="activeTab = $event" />
     </div>
 
-    <!-- Table Headers -->
-    <div class="flex items-center gap-4 pt-5 pb-3 px-5 text-xs font-semibold text-gray-400">
-      <div class="w-1/6">Integration</div>
-      <div class="w-2/6">Project</div>
-      <div class="w-3/6">Status</div>
-    </div>
-
-    <!-- Integration Rows -->
-    <div class="divide-y divide-gray-200">
-      <integration-row 
-        v-for="integrationStatus in paginatedIntegrations" 
-        :key="integrationStatus.id"
-        :integrationStatus="integrationStatus"
-      />
-    </div>
-
-    <!-- Footer -->
-    <div class="px-5 py-6 flex items-center justify-center gap-4">
-      <span class="text-xs text-gray-400">{{ paginationText }}</span>
-      <button 
-        v-if="hasNextPage"
-        class="text-xs text-primary-500 font-semibold hover:text-primary-600 flex items-center gap-1" 
-        :disabled="isFetchingNextPage"
-        :class="{ 'cursor-not-allowed': isFetchingNextPage }"
-        @click="() => fetchNextPage()">
-        <lf-icon name="circle-notch animate-spin" :size="16" class="text-primary-200" v-if="isFetchingNextPage" />
-        <span v-if="isFetchingNextPage" class="text-primary-200">Loading integrations...</span>
-        <span v-else>Load more</span>
-      </button>
-    </div>
+    <template v-if="isPending">
+      <div class="flex items-center justify-center py-10 h-80">
+        <lf-spinner size="1rem" />
+      </div>
+    </template>
+    <template v-else>
+      <template v-if="isEmpty">
+        <div class="flex flex-col items-center justify-center py-15 h-80">
+          <lf-icon name="plug-circle-check" :size="64" class="text-gray-300 mb-6" />
+          <h5 class="text-center mb-3 text-base">
+            Everything looks good
+          </h5>
+          <p class="text-center text-gray-500 text-small">
+            No integrations are currently in progress, requiring action, or have failed connections according to your filter criteria.
+          </p>
+        </div>
+      </template>
+      <template v-else>
+        <!-- Table Headers -->
+        <div class="flex items-center gap-4 pt-5 pb-3 px-5 text-xs font-semibold text-gray-400">
+          <div class="w-1/6">Integration</div>
+          <div class="w-2/6">Project</div>
+          <div class="w-3/6">Status</div>
+        </div>
+
+        <!-- Integration Rows -->
+        <div class="divide-y divide-gray-200">
+          <integration-row 
+            v-for="integrationStatus in paginatedIntegrations" 
+            :key="integrationStatus.id"
+            :integrationStatus="integrationStatus"
+          />
+        </div>
+
+        <!-- Footer -->
+        <div class="px-5 py-6 flex items-center justify-center gap-4">
+          <span class="text-xs text-gray-400">{{ paginationText }}</span>
+          <button 
+            v-if="hasNextPage"
+            class="text-xs text-primary-500 font-semibold hover:text-primary-600 flex items-center gap-1" 
+            :disabled="isFetchingNextPage"
+            :class="{ 'cursor-not-allowed': isFetchingNextPage }"
+            @click="() => fetchNextPage()">
+            <lf-icon name="circle-notch animate-spin" :size="16" class="text-primary-200" v-if="isFetchingNextPage" />
+            <span v-if="isFetchingNextPage" class="text-primary-200">Loading integrations...</span>
+            <span v-else>Load more</span>
+          </button>
+        </div>
+      </template>
+    </template>
   </div>
 </template>
 
@@ -53,55 +77,12 @@ import { storeToRefs } from 'pinia';
 import { lfIntegrationStatusesTabs } from '@/modules/admin/modules/integration/config/status';
 import { OVERVIEW_API_SERVICE } from '@/modules/admin/modules/overview/services/overview.api.service';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
+import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
 
 const { integrationStatusCount, selectedIntegrationId } = storeToRefs(useOverviewStore());
 
-// Mock data for integrations
-const integrations = ref(mockOverviewData);
-
 const activeTab = ref(lfIntegrationStatusesTabs.connecting.key);
-const limit = ref(3);
-
-const params = computed(() => {
-  return {
-    platform: selectedIntegrationId.value || undefined, //activeTab.value,
-    status: ['done'], //lfIntegrationStatusesTabs[activeTab.value].statuses,
-    query: '',
-    limit: limit.value
-  };
-});
-
-const { data, isPending, isError, isFetchingNextPage, fetchNextPage, hasNextPage } = OVERVIEW_API_SERVICE.fetchGlobalIntegrations(params);
-const totalCount = computed(() => {
-  // @ts-expect-error - TanStack Query type inference issue with Vue
-  return data.value?.pages[0].count || 0;
-});
-
-// TODO: remove mock data and use the API
-const filteredIntegrations = computed(() => {
-  return integrations.value.filter(integration => {
-    switch (activeTab.value) {
-      case lfIntegrationStatusesTabs.connecting.key:
-        return integration.status === 'in-progress';
-      case lfIntegrationStatusesTabs.waitingForAction.key:
-        return integration.status === 'mapping' || integration.status === 'pending-action';
-      case lfIntegrationStatusesTabs.error.key:
-        return integration.status === 'error';
-      default:
-        return true;
-    }
-  });
-});
-
-const paginatedIntegrations = computed(() => {
-  // @ts-expect-error - TanStack Query type inference issue with Vue
-  return data.value?.pages.flatMap(page => page.rows) || [];
-});
-
-const paginationText = computed(() => {
-  const showing = paginatedIntegrations.value.length;
-  return `${showing} out of ${totalCount.value} integrations`;
-});
+const limit = ref(10);
 
 const overviewTabs = computed(() => {
   return [
@@ -126,12 +107,34 @@ const overviewTabs = computed(() => {
 ]
 });
 
-watch(data, () => {
-  // if (data.value) {
-  //   integrations.value = data.value.rows;
-  // }
-  console.log(data.value);
-}, { immediate: true });
+const params = computed(() => {
+  return {
+    platform: selectedIntegrationId.value || undefined, //activeTab.value,
+    status: ['done'], //lfIntegrationStatusesTabs[activeTab.value].statuses,
+    query: '',
+    limit: limit.value
+  };
+});
+
+const { data, isError, isPending, isFetchingNextPage, fetchNextPage, hasNextPage } = OVERVIEW_API_SERVICE.fetchGlobalIntegrations(params);
+const totalCount = computed(() => {
+  // @ts-expect-error - TanStack Query type inference issue with Vue
+  return data.value?.pages[0].count || 0;
+});
+
+const paginatedIntegrations = computed(() => {
+  // @ts-expect-error - TanStack Query type inference issue with Vue
+  return data.value?.pages.flatMap(page => page.rows) || [];
+});
+
+const isEmpty = computed(() => {
+  return overviewTabs.value.every(tab => tab.count === 0);
+});
+
+const paginationText = computed(() => {
+  const showing = paginatedIntegrations.value.length;
+  return `${showing} out of ${totalCount.value} integrations`;
+});
 
 // watch(isError, () => {
 //   if (isError.value) {
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/overview-filter.vue b/frontend/src/modules/admin/modules/overview/components/sections/overview-filter.vue
index 95df6f6bb5..009dda22db 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/overview-filter.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/overview-filter.vue
@@ -2,6 +2,7 @@
   <div class="flex items-center">
     <app-lf-project-group-filter />
     <app-lf-project-filter :projects="projects" v-if="selectedProjectGroup && projects.length > 0" />
+    <app-lf-sub-project-filter :project-id="selectedProjectId" v-if="selectedProject" />
   </div>
 </template>
 
@@ -9,11 +10,12 @@
 import { computed } from 'vue';
 import AppLfProjectGroupFilter from '../fragments/project-group-filter.vue';
 import AppLfProjectFilter from '../fragments/project-filter.vue';
+import AppLfSubProjectFilter from '../fragments/sub-project-filter.vue';
 import { useOverviewStore } from '../../store/overview.store';
 import { storeToRefs } from 'pinia';
 
 const overviewStore = useOverviewStore();
-const { selectedProjectGroup } = storeToRefs(overviewStore);
+const { selectedProjectGroup, selectedProject, selectedProjectId } = storeToRefs(overviewStore);
 
 const projects = computed(() => {
   return selectedProjectGroup.value?.projects || [];
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
index 6f541fe008..e9346776a6 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
@@ -32,7 +32,7 @@
       </div>
       <app-lf-overview-trend-display :data="organizationsTrends" />
     </lf-card>
-    <lf-card class="flex-1 p-4 flex flex-col gap-2">
+    <lf-card class="flex-1 p-4 flex flex-col gap-2" v-if="!selectedProject">
       <div class="flex items-center justify-between">
         <span class="text-xs font-semibold">Activities</span>
         <lf-icon name="monitor-waveform" type="light" class="text-gray-400" />
@@ -51,6 +51,11 @@ import LfCard from '@/ui-kit/card/Card.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import AppLfOverviewTrendDisplay from '@/modules/admin/modules/overview/components/fragments/trend-display.vue';
 import type { OverviewTrends } from '@/modules/admin/modules/overview/types/overview.types';
+import { useOverviewStore } from '../../store/overview.store';
+import { storeToRefs } from 'pinia';
+
+const overviewStore = useOverviewStore();
+const { selectedProject } = storeToRefs(overviewStore);
 
 const projectsTrends = ref<OverviewTrends>({
   current: 640,
diff --git a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
index 84629105b1..de85188ed4 100644
--- a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
+++ b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
@@ -4,6 +4,7 @@ import { useInfiniteQuery, useQuery } from '@tanstack/vue-query'
 import { TanstackKey } from '@/shared/types/tanstack'
 import authAxios from '@/shared/axios/auth-axios'
 import { GlobalIntegrationStatusCount, IntegrationStatusResponse } from '../types/overview.types'
+import { Project } from '@/modules/lf/segments/types/Segments'
 
 export interface GlobalIntegrationStatusCountQueryParams {
   platform: string | undefined
@@ -17,6 +18,33 @@ export interface GlobalIntegrationIntegrationsQueryParams {
 }
 
 class OverviewApiService {
+  fetchProjectById(params: ComputedRef<string>) {
+    const queryKey = computed(() => [TanstackKey.PROJECT_BY_ID, params.value])
+    const queryFn = computed<QueryFunction<Project>>(() =>
+      this.fetchProjectByIdQueryFn(() => ({
+        id: params.value,
+      })),
+    )
+
+    return useQuery<Project>({
+      queryKey,
+      queryFn,
+    })
+  }
+
+  fetchProjectByIdQueryFn(
+    query: () => Record<string, string | number | boolean | undefined | string[] | null>,
+  ): QueryFunction<Project> {
+    return () =>
+      authAxios
+        .get(`/segment/${query().id}`, {
+          params: {
+            segments: [query().id],
+          },
+        })
+        .then((res) => res.data)
+  }
+
   fetchGlobalIntegrationStatusCount(params: ComputedRef<GlobalIntegrationStatusCountQueryParams>) {
     const queryKey = computed(() => [
       TanstackKey.GLOBAL_INTEGRATION_STATUS_COUNT,
diff --git a/frontend/src/modules/admin/modules/overview/store/overview.store.ts b/frontend/src/modules/admin/modules/overview/store/overview.store.ts
index 5e969ed3a5..add648587a 100644
--- a/frontend/src/modules/admin/modules/overview/store/overview.store.ts
+++ b/frontend/src/modules/admin/modules/overview/store/overview.store.ts
@@ -1,16 +1,24 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
-import { Project, ProjectGroup } from '@/modules/lf/segments/types/Segments'
+import { Project, ProjectGroup, SubProject } from '@/modules/lf/segments/types/Segments'
 
 export const useOverviewStore = defineStore('overview', () => {
+  const selectedProjectGroupId = ref<string>('')
   const selectedProjectGroup = ref<ProjectGroup | null>(null)
+  const selectedProjectId = ref<string>('')
   const selectedProject = ref<Project | null>(null)
+  const selectedSubProjectId = ref<string>('')
+  const selectedSubProject = ref<SubProject | null>(null)
   const selectedIntegrationId = ref<string | null>(null)
   const integrationStatusCount = ref<Record<string, number>>({})
 
   return {
+    selectedProjectGroupId,
     selectedProjectGroup,
+    selectedProjectId,
     selectedProject,
+    selectedSubProjectId,
+    selectedSubProject,
     selectedIntegrationId,
     integrationStatusCount,
   }
diff --git a/frontend/src/shared/types/tanstack.ts b/frontend/src/shared/types/tanstack.ts
index b751a6a312..4f528405a6 100644
--- a/frontend/src/shared/types/tanstack.ts
+++ b/frontend/src/shared/types/tanstack.ts
@@ -7,4 +7,5 @@ export enum TanstackKey {
   MEMBER_MERGE_SUGGESTIONS_COUNT = 'member-merge-suggestions-count',
   GLOBAL_INTEGRATION_STATUS_COUNT = 'global-integration-status-count',
   GLOBAL_INTEGRATIONS = 'global-integrations',
+  PROJECT_BY_ID = 'project-by-id',
 }

From 26e94c9d7a778b4a415f731dd781590641447f53 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Thu, 11 Dec 2025 12:36:45 +0800
Subject: [PATCH 09/51] fix: hide project card when project is selected

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../admin/modules/overview/components/sections/summary.vue    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
index e9346776a6..78b4360414 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
@@ -2,7 +2,7 @@
   <div class="flex gap-4">
     <!-- TODO: revisit this implementation when the backend is ready -->
     <!-- we may use loop to render the cards -->
-    <lf-card class="flex-1 p-4 flex flex-col gap-2">
+    <lf-card class="flex-1 p-4 flex flex-col gap-2" v-if="!selectedProject">
       <div class="flex items-center justify-between">
         <span class="text-xs font-semibold">Projects</span>
         <lf-icon name="folders" type="light" class="text-gray-400" />
@@ -32,7 +32,7 @@
       </div>
       <app-lf-overview-trend-display :data="organizationsTrends" />
     </lf-card>
-    <lf-card class="flex-1 p-4 flex flex-col gap-2" v-if="!selectedProject">
+    <lf-card class="flex-1 p-4 flex flex-col gap-2">
       <div class="flex items-center justify-between">
         <span class="text-xs font-semibold">Activities</span>
         <lf-icon name="monitor-waveform" type="light" class="text-gray-400" />

From c155198f18d7f566589d775b1868c2c4b7ac6116 Mon Sep 17 00:00:00 2001
From: Umberto Sgueglia <ulemons92@gmail.com>
Date: Thu, 11 Dec 2025 15:51:04 +0100
Subject: [PATCH 10/51] feat: add metrics api

---
 .../src/api/dashboard/dashboardMetricsGet.ts  | 12 ++++
 backend/src/api/dashboard/index.ts            |  1 +
 backend/src/services/dashboardService.ts      | 24 +++++++
 .../data-access-layer/src/dashboards/base.ts  | 63 +++++++++++++++++++
 .../data-access-layer/src/dashboards/index.ts |  2 +
 .../data-access-layer/src/dashboards/types.ts | 10 +++
 services/libs/data-access-layer/src/index.ts  |  1 +
 7 files changed, 113 insertions(+)
 create mode 100644 backend/src/api/dashboard/dashboardMetricsGet.ts
 create mode 100644 services/libs/data-access-layer/src/dashboards/base.ts
 create mode 100644 services/libs/data-access-layer/src/dashboards/index.ts
 create mode 100644 services/libs/data-access-layer/src/dashboards/types.ts

diff --git a/backend/src/api/dashboard/dashboardMetricsGet.ts b/backend/src/api/dashboard/dashboardMetricsGet.ts
new file mode 100644
index 0000000000..ddf277da0a
--- /dev/null
+++ b/backend/src/api/dashboard/dashboardMetricsGet.ts
@@ -0,0 +1,12 @@
+import DashboardService from '@/services/dashboardService'
+
+import Permissions from '../../security/permissions'
+import PermissionChecker from '../../services/user/permissionChecker'
+
+export default async (req, res) => {
+  new PermissionChecker(req).validateHas(Permissions.values.memberRead)
+
+  const payload = await new DashboardService(req).getMetrics(req.query)
+
+  await req.responseHandler.success(req, res, payload)
+}
diff --git a/backend/src/api/dashboard/index.ts b/backend/src/api/dashboard/index.ts
index 0fd01a65c3..7d370cfe07 100644
--- a/backend/src/api/dashboard/index.ts
+++ b/backend/src/api/dashboard/index.ts
@@ -2,4 +2,5 @@ import { safeWrap } from '../../middlewares/errorMiddleware'
 
 export default (app) => {
   app.get(`/dashboard`, safeWrap(require('./dashboardGet').default))
+  app.get(`/dashboard/metrics`, safeWrap(require('./dashboardMetricsGet').default))
 }
diff --git a/backend/src/services/dashboardService.ts b/backend/src/services/dashboardService.ts
index 8569634fb3..8bf70a2864 100644
--- a/backend/src/services/dashboardService.ts
+++ b/backend/src/services/dashboardService.ts
@@ -1,6 +1,9 @@
+import { getMetrics } from '@crowd/data-access-layer/src/dashboards'
 import { RedisCache } from '@crowd/redis'
 import { DashboardTimeframe } from '@crowd/types'
 
+import SequelizeRepository from '../database/repositories/sequelizeRepository'
+
 import { IServiceOptions } from './IServiceOptions'
 
 interface IDashboardQueryParams {
@@ -9,6 +12,10 @@ interface IDashboardQueryParams {
   timeframe: DashboardTimeframe
 }
 
+interface IDashboardMetricsQueryParams {
+  segment?: string
+}
+
 export default class DashboardService {
   options: IServiceOptions
 
@@ -75,4 +82,21 @@ export default class DashboardService {
 
     return JSON.parse(data)
   }
+
+  async getMetrics(params: IDashboardMetricsQueryParams) {
+    try {
+      const segmentId = params.segment || this.options.currentSegments[0]?.id
+
+      if (!segmentId) {
+        this.options.log.warn('No segment ID provided for metrics query')
+      }
+
+      const qx = SequelizeRepository.getQueryExecutor(this.options)
+      const metrics = await getMetrics(qx, segmentId)
+      return metrics
+    } catch (error) {
+      this.options.log.error('Failed to fetch dashboard metrics', { error, params })
+      throw new Error('Unable to fetch dashboard metrics')
+    }
+  }
 }
diff --git a/services/libs/data-access-layer/src/dashboards/base.ts b/services/libs/data-access-layer/src/dashboards/base.ts
new file mode 100644
index 0000000000..60586320d1
--- /dev/null
+++ b/services/libs/data-access-layer/src/dashboards/base.ts
@@ -0,0 +1,63 @@
+import { QueryExecutor } from '../queryExecutor'
+
+import { IDashboardMetrics } from './types'
+
+export async function getMetrics(
+  qx: QueryExecutor,
+  segmentId?: string,
+): Promise<IDashboardMetrics> {
+  const tableName = segmentId
+    ? 'dashboardMetricsPerSegmentSnapshot'
+    : 'dashboardMetricsTotalSnapshot'
+
+  const query = segmentId
+    ? `
+      SELECT *
+      FROM "${tableName}"
+      WHERE "segmentId" = $(segmentId)
+      LIMIT 1
+    `
+    : `
+      SELECT *
+      FROM "${tableName}"
+      LIMIT 1
+    `
+
+  const params = segmentId ? { segmentId } : {}
+
+  try {
+    const [row] = (await qx.select(query, params)) as IDashboardMetrics[]
+
+    if (!row) {
+      // TODO: remove this mock once Tinybird sinks are available
+      return getMockMetrics()
+    }
+
+    return row
+  } catch (error: any) {
+    const msg = error?.message ?? ''
+
+    // Detect missing table
+    const isMissingTable = error?.code === '42P01' || /does not exist/i.test(msg)
+
+    if (isMissingTable) {
+      // TODO: remove this mock once Tinybird sinks are available
+      return getMockMetrics()
+    }
+
+    throw error
+  }
+}
+
+function getMockMetrics(): IDashboardMetrics {
+  return {
+    activitiesTotal: 9926553,
+    activitiesLast30Days: 64329,
+    organizationsTotal: 104300,
+    organizationsLast30Days: 36,
+    membersTotal: 798730,
+    membersLast30Days: 2694,
+    projectsTotal: 123,
+    projectsLast30Days: 12312,
+  }
+}
diff --git a/services/libs/data-access-layer/src/dashboards/index.ts b/services/libs/data-access-layer/src/dashboards/index.ts
new file mode 100644
index 0000000000..b097b26bf7
--- /dev/null
+++ b/services/libs/data-access-layer/src/dashboards/index.ts
@@ -0,0 +1,2 @@
+export * from './base'
+export * from './types'
diff --git a/services/libs/data-access-layer/src/dashboards/types.ts b/services/libs/data-access-layer/src/dashboards/types.ts
new file mode 100644
index 0000000000..a8b3eb1066
--- /dev/null
+++ b/services/libs/data-access-layer/src/dashboards/types.ts
@@ -0,0 +1,10 @@
+export interface IDashboardMetrics {
+  activitiesTotal: number
+  activitiesLast30Days: number
+  organizationsTotal: number
+  organizationsLast30Days: number
+  membersTotal: number
+  membersLast30Days: number
+  projectsTotal: number
+  projectsLast30Days: number
+}
diff --git a/services/libs/data-access-layer/src/index.ts b/services/libs/data-access-layer/src/index.ts
index c7963a6a40..05ac370cca 100644
--- a/services/libs/data-access-layer/src/index.ts
+++ b/services/libs/data-access-layer/src/index.ts
@@ -1,5 +1,6 @@
 export * from './activities'
 export * from './activityRelations'
+export * from './dashboards'
 export * from './members'
 export * from './organizations'
 export * from './prompt-history'

From 404a959d082bc732ac999e1f784ed9a56dad8a67 Mon Sep 17 00:00:00 2001
From: Umberto Sgueglia <ulemons92@gmail.com>
Date: Thu, 11 Dec 2025 15:54:37 +0100
Subject: [PATCH 11/51] fix: lint

---
 services/libs/data-access-layer/src/dashboards/base.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/services/libs/data-access-layer/src/dashboards/base.ts b/services/libs/data-access-layer/src/dashboards/base.ts
index 60586320d1..77422da998 100644
--- a/services/libs/data-access-layer/src/dashboards/base.ts
+++ b/services/libs/data-access-layer/src/dashboards/base.ts
@@ -34,11 +34,12 @@ export async function getMetrics(
     }
 
     return row
-  } catch (error: any) {
-    const msg = error?.message ?? ''
+  } catch (error: unknown) {
+    const msg = error instanceof Error ? error.message : ''
+    const code = error && typeof error === 'object' && 'code' in error ? error.code : null
 
     // Detect missing table
-    const isMissingTable = error?.code === '42P01' || /does not exist/i.test(msg)
+    const isMissingTable = code === '42P01' || /does not exist/i.test(msg)
 
     if (isMissingTable) {
       // TODO: remove this mock once Tinybird sinks are available

From 5cdf2e7ebe2bdb899b97e69b39f454b4abbe21f7 Mon Sep 17 00:00:00 2001
From: Umberto Sgueglia <ulemons92@gmail.com>
Date: Thu, 11 Dec 2025 16:11:02 +0100
Subject: [PATCH 12/51] fix: adjust return type from query

---
 backend/src/services/dashboardService.ts               | 6 ++----
 services/libs/data-access-layer/src/dashboards/base.ts | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/backend/src/services/dashboardService.ts b/backend/src/services/dashboardService.ts
index 8bf70a2864..42590e26cd 100644
--- a/backend/src/services/dashboardService.ts
+++ b/backend/src/services/dashboardService.ts
@@ -85,14 +85,12 @@ export default class DashboardService {
 
   async getMetrics(params: IDashboardMetricsQueryParams) {
     try {
-      const segmentId = params.segment || this.options.currentSegments[0]?.id
-
-      if (!segmentId) {
+      if (!params.segment) {
         this.options.log.warn('No segment ID provided for metrics query')
       }
 
       const qx = SequelizeRepository.getQueryExecutor(this.options)
-      const metrics = await getMetrics(qx, segmentId)
+      const metrics = await getMetrics(qx, params.segment)
       return metrics
     } catch (error) {
       this.options.log.error('Failed to fetch dashboard metrics', { error, params })
diff --git a/services/libs/data-access-layer/src/dashboards/base.ts b/services/libs/data-access-layer/src/dashboards/base.ts
index 77422da998..9653de35d6 100644
--- a/services/libs/data-access-layer/src/dashboards/base.ts
+++ b/services/libs/data-access-layer/src/dashboards/base.ts
@@ -26,7 +26,7 @@ export async function getMetrics(
   const params = segmentId ? { segmentId } : {}
 
   try {
-    const [row] = (await qx.select(query, params)) as IDashboardMetrics[]
+    const row = await qx.select(query, params)
 
     if (!row) {
       // TODO: remove this mock once Tinybird sinks are available

From bcd4407105479dd7138c2073606ea3a2f3069df1 Mon Sep 17 00:00:00 2001
From: Umberto Sgueglia <ulemons92@gmail.com>
Date: Thu, 11 Dec 2025 16:22:10 +0100
Subject: [PATCH 13/51] fix: return just first value

---
 .../libs/data-access-layer/src/dashboards/base.ts     | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/services/libs/data-access-layer/src/dashboards/base.ts b/services/libs/data-access-layer/src/dashboards/base.ts
index 9653de35d6..6367587dff 100644
--- a/services/libs/data-access-layer/src/dashboards/base.ts
+++ b/services/libs/data-access-layer/src/dashboards/base.ts
@@ -18,7 +18,14 @@ export async function getMetrics(
       LIMIT 1
     `
     : `
-      SELECT *
+      SELECT 
+        "activitiesLast30Days",
+        "activitiesTotal",
+        "membersLast30Days",
+        "membersTotal",
+        "organizationsLast30Days",
+        "organizationsTotal",
+        "updatedAt"
       FROM "${tableName}"
       LIMIT 1
     `
@@ -26,7 +33,7 @@ export async function getMetrics(
   const params = segmentId ? { segmentId } : {}
 
   try {
-    const row = await qx.select(query, params)
+    const [row] = await qx.select(query, params)
 
     if (!row) {
       // TODO: remove this mock once Tinybird sinks are available

From d81be1a29ebd94b54cb7e94e5887cefe6ad12049 Mon Sep 17 00:00:00 2001
From: Umberto Sgueglia <ulemons92@gmail.com>
Date: Thu, 11 Dec 2025 17:44:37 +0100
Subject: [PATCH 14/51] feat: add project metric

---
 .../data-access-layer/src/dashboards/base.ts  | 99 +++++++++++++++----
 1 file changed, 80 insertions(+), 19 deletions(-)

diff --git a/services/libs/data-access-layer/src/dashboards/base.ts b/services/libs/data-access-layer/src/dashboards/base.ts
index 6367587dff..2033f643d0 100644
--- a/services/libs/data-access-layer/src/dashboards/base.ts
+++ b/services/libs/data-access-layer/src/dashboards/base.ts
@@ -6,6 +6,53 @@ export async function getMetrics(
   qx: QueryExecutor,
   segmentId?: string,
 ): Promise<IDashboardMetrics> {
+  try {
+    const [snapshotData, projectsData] = await Promise.all([
+      getSnapshotMetrics(qx, segmentId),
+      getProjectsCount(qx, segmentId),
+    ])
+
+    if (!snapshotData) {
+      // TODO: remove this mock once Tinybird sinks are available
+      const mockMetrics = getMockMetrics()
+      return {
+        ...mockMetrics,
+        projectsTotal: projectsData.projectsTotal,
+        projectsLast30Days: projectsData.projectsLast30Days,
+      }
+    }
+
+    return {
+      ...snapshotData,
+      projectsTotal: projectsData.projectsTotal,
+      projectsLast30Days: projectsData.projectsLast30Days,
+    }
+  } catch (error: unknown) {
+    const msg = error instanceof Error ? error.message : ''
+    const code = error && typeof error === 'object' && 'code' in error ? error.code : null
+
+    // Detect missing table
+    const isMissingTable = code === '42P01' || /does not exist/i.test(msg)
+
+    if (isMissingTable) {
+      // TODO: remove this mock once Tinybird sinks are available
+      const mockMetrics = getMockMetrics()
+      const projectsData = await getProjectsCount(qx, segmentId)
+      return {
+        ...mockMetrics,
+        projectsTotal: projectsData.projectsTotal,
+        projectsLast30Days: projectsData.projectsLast30Days,
+      }
+    }
+
+    throw error
+  }
+}
+
+async function getSnapshotMetrics(
+  qx: QueryExecutor,
+  segmentId?: string,
+): Promise<Omit<IDashboardMetrics, 'projectsTotal' | 'projectsLast30Days'> | null> {
   const tableName = segmentId
     ? 'dashboardMetricsPerSegmentSnapshot'
     : 'dashboardMetricsTotalSnapshot'
@@ -31,29 +78,43 @@ export async function getMetrics(
     `
 
   const params = segmentId ? { segmentId } : {}
+  const [row] = await qx.select(query, params)
 
-  try {
-    const [row] = await qx.select(query, params)
-
-    if (!row) {
-      // TODO: remove this mock once Tinybird sinks are available
-      return getMockMetrics()
-    }
-
-    return row
-  } catch (error: unknown) {
-    const msg = error instanceof Error ? error.message : ''
-    const code = error && typeof error === 'object' && 'code' in error ? error.code : null
+  return row || null
+}
 
-    // Detect missing table
-    const isMissingTable = code === '42P01' || /does not exist/i.test(msg)
+async function getProjectsCount(
+  qx: QueryExecutor,
+  segmentId?: string,
+): Promise<{ projectsTotal: number; projectsLast30Days: number }> {
+  let query: string
+  let params: Record<string, any>
 
-    if (isMissingTable) {
-      // TODO: remove this mock once Tinybird sinks are available
-      return getMockMetrics()
-    }
+  if (!segmentId) {
+    // Count all segments
+    query = `
+      SELECT 
+        COUNT(*) as "projectsTotal",
+        COUNT(CASE WHEN "createdAt" >= NOW() - INTERVAL '30 days' THEN 1 END) as "projectsLast30Days"
+      FROM segments 
+    `
+    params = {}
+  } else {
+    // Count segments where the provided segmentId is current, parent, or grandparent
+    query = `
+      SELECT 
+        COUNT(*) as "projectsTotal",
+        COUNT(CASE WHEN s."createdAt" >= NOW() - INTERVAL '30 days' THEN 1 END) as "projectsLast30Days"
+      FROM segments s
+      WHERE (s.id = $(segmentId) OR s."parentId" = $(segmentId) OR s."grandparentId" = $(segmentId))
+    `
+    params = { segmentId }
+  }
 
-    throw error
+  const [result] = await qx.select(query, params)
+  return {
+    projectsTotal: parseInt(result.projectsTotal) || 0,
+    projectsLast30Days: parseInt(result.projectsLast30Days) || 0,
   }
 }
 

From fdf2ea0c2188a7b20a01e0d0eeceb8480947873f Mon Sep 17 00:00:00 2001
From: Umberto Sgueglia <ulemons92@gmail.com>
Date: Thu, 11 Dec 2025 17:48:50 +0100
Subject: [PATCH 15/51] fix: lint

---
 services/libs/data-access-layer/src/dashboards/base.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/libs/data-access-layer/src/dashboards/base.ts b/services/libs/data-access-layer/src/dashboards/base.ts
index 2033f643d0..ef1def2929 100644
--- a/services/libs/data-access-layer/src/dashboards/base.ts
+++ b/services/libs/data-access-layer/src/dashboards/base.ts
@@ -88,7 +88,7 @@ async function getProjectsCount(
   segmentId?: string,
 ): Promise<{ projectsTotal: number; projectsLast30Days: number }> {
   let query: string
-  let params: Record<string, any>
+  let params: Record<string, string>
 
   if (!segmentId) {
     // Count all segments

From 3bc2bda2473cbdd6557d48508f607f8dbb88e9f0 Mon Sep 17 00:00:00 2001
From: Umberto Sgueglia <ulemons92@gmail.com>
Date: Thu, 11 Dec 2025 18:27:28 +0100
Subject: [PATCH 16/51] refactor: using semgnets entity

---
 .../data-access-layer/src/dashboards/base.ts  | 36 +-----------------
 .../data-access-layer/src/segments/index.ts   | 37 +++++++++++++++++++
 2 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/services/libs/data-access-layer/src/dashboards/base.ts b/services/libs/data-access-layer/src/dashboards/base.ts
index ef1def2929..dbb724c93b 100644
--- a/services/libs/data-access-layer/src/dashboards/base.ts
+++ b/services/libs/data-access-layer/src/dashboards/base.ts
@@ -1,4 +1,5 @@
 import { QueryExecutor } from '../queryExecutor'
+import { getProjectsCount } from '../segments'
 
 import { IDashboardMetrics } from './types'
 
@@ -83,41 +84,6 @@ async function getSnapshotMetrics(
   return row || null
 }
 
-async function getProjectsCount(
-  qx: QueryExecutor,
-  segmentId?: string,
-): Promise<{ projectsTotal: number; projectsLast30Days: number }> {
-  let query: string
-  let params: Record<string, string>
-
-  if (!segmentId) {
-    // Count all segments
-    query = `
-      SELECT 
-        COUNT(*) as "projectsTotal",
-        COUNT(CASE WHEN "createdAt" >= NOW() - INTERVAL '30 days' THEN 1 END) as "projectsLast30Days"
-      FROM segments 
-    `
-    params = {}
-  } else {
-    // Count segments where the provided segmentId is current, parent, or grandparent
-    query = `
-      SELECT 
-        COUNT(*) as "projectsTotal",
-        COUNT(CASE WHEN s."createdAt" >= NOW() - INTERVAL '30 days' THEN 1 END) as "projectsLast30Days"
-      FROM segments s
-      WHERE (s.id = $(segmentId) OR s."parentId" = $(segmentId) OR s."grandparentId" = $(segmentId))
-    `
-    params = { segmentId }
-  }
-
-  const [result] = await qx.select(query, params)
-  return {
-    projectsTotal: parseInt(result.projectsTotal) || 0,
-    projectsLast30Days: parseInt(result.projectsLast30Days) || 0,
-  }
-}
-
 function getMockMetrics(): IDashboardMetrics {
   return {
     activitiesTotal: 9926553,
diff --git a/services/libs/data-access-layer/src/segments/index.ts b/services/libs/data-access-layer/src/segments/index.ts
index f0eed84a21..ea368ca4cb 100644
--- a/services/libs/data-access-layer/src/segments/index.ts
+++ b/services/libs/data-access-layer/src/segments/index.ts
@@ -260,3 +260,40 @@ export async function getGitlabRepoUrlsMappedToOtherSegments(
 
   return rows.map((r) => r.url)
 }
+
+export async function getProjectsCount(
+  qx: QueryExecutor,
+  segmentId?: string,
+): Promise<{ projectsTotal: number; projectsLast30Days: number }> {
+  let query: string
+  let params: Record<string, string>
+
+  if (!segmentId) {
+    // Count all segments not deleted
+    query = `
+      SELECT 
+        COUNT(*) as "projectsTotal",
+        COUNT(CASE WHEN "createdAt" >= NOW() - INTERVAL '30 days' THEN 1 END) as "projectsLast30Days"
+      FROM segments 
+      WHERE "deletedAt" IS NULL
+    `
+    params = {}
+  } else {
+    // Count segments where the provided segmentId is current, parent, or grandparent
+    query = `
+      SELECT 
+        COUNT(*) as "projectsTotal",
+        COUNT(CASE WHEN s."createdAt" >= NOW() - INTERVAL '30 days' THEN 1 END) as "projectsLast30Days"
+      FROM segments s
+      WHERE s."deletedAt" IS NULL 
+        AND (s.id = $(segmentId) OR s."parentId" = $(segmentId) OR s."grandparentId" = $(segmentId))
+    `
+    params = { segmentId }
+  }
+
+  const [result] = await qx.select(query, params)
+  return {
+    projectsTotal: parseInt(result.projectsTotal) || 0,
+    projectsLast30Days: parseInt(result.projectsLast30Days) || 0,
+  }
+}

From 220ea4bb1c6168dcc68ca4572aff1df1dbc9afb7 Mon Sep 17 00:00:00 2001
From: Umberto Sgueglia <ulemons92@gmail.com>
Date: Thu, 11 Dec 2025 19:05:30 +0100
Subject: [PATCH 17/51] fix: remove deleted at

---
 services/libs/data-access-layer/src/segments/index.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/services/libs/data-access-layer/src/segments/index.ts b/services/libs/data-access-layer/src/segments/index.ts
index ea368ca4cb..ee2bf592f8 100644
--- a/services/libs/data-access-layer/src/segments/index.ts
+++ b/services/libs/data-access-layer/src/segments/index.ts
@@ -275,7 +275,6 @@ export async function getProjectsCount(
         COUNT(*) as "projectsTotal",
         COUNT(CASE WHEN "createdAt" >= NOW() - INTERVAL '30 days' THEN 1 END) as "projectsLast30Days"
       FROM segments 
-      WHERE "deletedAt" IS NULL
     `
     params = {}
   } else {
@@ -285,8 +284,7 @@ export async function getProjectsCount(
         COUNT(*) as "projectsTotal",
         COUNT(CASE WHEN s."createdAt" >= NOW() - INTERVAL '30 days' THEN 1 END) as "projectsLast30Days"
       FROM segments s
-      WHERE s."deletedAt" IS NULL 
-        AND (s.id = $(segmentId) OR s."parentId" = $(segmentId) OR s."grandparentId" = $(segmentId))
+      WHERE (s.id = $(segmentId) OR s."parentId" = $(segmentId) OR s."grandparentId" = $(segmentId))
     `
     params = { segmentId }
   }

From dbb706ff995ef604459d51189acb89b16654fc4f Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Wed, 3 Dec 2025 17:17:57 +0800
Subject: [PATCH 18/51] chore: initial commit

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 frontend/src/modules/admin/admin.routes.ts    |  53 +--
 .../components/fragments/overview-filter.vue  | 359 ++++++++++++++++++
 .../components/fragments/trend-display.vue    |  91 +++++
 .../sections/integration-details.vue          |  14 +
 .../sections/integration-status.vue           |  14 +
 .../overview/components/sections/summary.vue  |  84 ++++
 .../admin/modules/overview/pages/overview.vue |  28 ++
 .../modules/overview/store/overview.store.ts  |  13 +
 .../modules/overview/types/overview.types.ts  |   5 +
 frontend/src/router/index.js                  | 136 ++++---
 .../shared/modules/monitoring/types/event.ts  |   2 +-
 frontend/src/ui-kit/index.scss                |   2 +
 .../lfx/dropdown/dropdown-group-title.vue     |  15 +
 .../src/ui-kit/lfx/dropdown/dropdown-item.vue |  63 +++
 .../ui-kit/lfx/dropdown/dropdown-search.vue   |  62 +++
 .../ui-kit/lfx/dropdown/dropdown-select.vue   | 101 +++++
 .../ui-kit/lfx/dropdown/dropdown-selector.vue |  40 ++
 .../lfx/dropdown/dropdown-separator.vue       |  13 +
 .../src/ui-kit/lfx/dropdown/dropdown.scss     |  74 ++++
 frontend/src/ui-kit/lfx/dropdown/dropdown.vue |  79 ++++
 .../lfx/dropdown/types/dropdown.types.ts      |  37 ++
 frontend/src/ui-kit/lfx/popover/popover.scss  |  26 ++
 frontend/src/ui-kit/lfx/popover/popover.vue   | 217 +++++++++++
 .../lfx/popover/types/PopoverPlacement.ts     |  18 +
 .../lfx/popover/types/PopoverTrigger.ts       |   5 +
 frontend/src/utils/responsive.ts              |  29 ++
 frontend/tailwind.config.js                   |  73 +---
 27 files changed, 1504 insertions(+), 149 deletions(-)
 create mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/overview-filter.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/trend-display.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/components/sections/summary.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/pages/overview.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/store/overview.store.ts
 create mode 100644 frontend/src/modules/admin/modules/overview/types/overview.types.ts
 create mode 100644 frontend/src/ui-kit/lfx/dropdown/dropdown-group-title.vue
 create mode 100644 frontend/src/ui-kit/lfx/dropdown/dropdown-item.vue
 create mode 100644 frontend/src/ui-kit/lfx/dropdown/dropdown-search.vue
 create mode 100644 frontend/src/ui-kit/lfx/dropdown/dropdown-select.vue
 create mode 100644 frontend/src/ui-kit/lfx/dropdown/dropdown-selector.vue
 create mode 100644 frontend/src/ui-kit/lfx/dropdown/dropdown-separator.vue
 create mode 100644 frontend/src/ui-kit/lfx/dropdown/dropdown.scss
 create mode 100644 frontend/src/ui-kit/lfx/dropdown/dropdown.vue
 create mode 100644 frontend/src/ui-kit/lfx/dropdown/types/dropdown.types.ts
 create mode 100644 frontend/src/ui-kit/lfx/popover/popover.scss
 create mode 100644 frontend/src/ui-kit/lfx/popover/popover.vue
 create mode 100644 frontend/src/ui-kit/lfx/popover/types/PopoverPlacement.ts
 create mode 100644 frontend/src/ui-kit/lfx/popover/types/PopoverTrigger.ts
 create mode 100644 frontend/src/utils/responsive.ts

diff --git a/frontend/src/modules/admin/admin.routes.ts b/frontend/src/modules/admin/admin.routes.ts
index 41e01f1c5a..a008ac88fe 100644
--- a/frontend/src/modules/admin/admin.routes.ts
+++ b/frontend/src/modules/admin/admin.routes.ts
@@ -1,19 +1,16 @@
-import Layout from '@/modules/layout/components/layout.vue';
-import { PageEventKey } from '@/shared/modules/monitoring/types/event';
-import { PermissionGuard } from '@/shared/modules/permissions/router/PermissionGuard';
-import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
+import Layout from '@/modules/layout/components/layout.vue'
+import { PageEventKey } from '@/shared/modules/monitoring/types/event'
+import { PermissionGuard } from '@/shared/modules/permissions/router/PermissionGuard'
+import { LfPermission } from '@/shared/modules/permissions/types/Permissions'
 
-const ProjectGroupsListPage = () => import(
-  '@/modules/admin/modules/projects/pages/project-groups-list.page.vue'
-);
+const OverviewPage = () => import('@/modules/admin/modules/overview/pages/overview.vue')
 
-const ProjectsPage = () => import(
-  '@/modules/admin/modules/projects/pages/projects.page.vue'
-);
+// const ProjectGroupsListPage = () =>
+//   import('@/modules/admin/modules/projects/pages/project-groups-list.page.vue')
 
-const AdminPanelPage = () => import(
-  '@/modules/admin/pages/admin-panel.page.vue'
-);
+const ProjectsPage = () => import('@/modules/admin/modules/projects/pages/projects.page.vue')
+
+const AdminPanelPage = () => import('@/modules/admin/pages/admin-panel.page.vue')
 
 export default [
   {
@@ -26,15 +23,25 @@ export default [
     },
     children: [
       {
-        name: 'projectGroupsList',
-        path: '/project-groups',
-        component: ProjectGroupsListPage,
+        name: 'overview',
+        path: '/overview',
+        component: OverviewPage,
         meta: {
           auth: true,
-          title: 'Project Groups',
-          eventKey: PageEventKey.PROJECT_GROUPS,
+          title: 'Overview',
+          eventKey: PageEventKey.OVERVIEW,
         },
       },
+      // {
+      //   name: 'projectGroupsList',
+      //   path: '/project-groups',
+      //   component: ProjectGroupsListPage,
+      //   meta: {
+      //     auth: true,
+      //     title: 'Project Groups',
+      //     eventKey: PageEventKey.PROJECT_GROUPS,
+      //   },
+      // },
       {
         name: 'adminPanel',
         path: '/admin',
@@ -43,9 +50,7 @@ export default [
           title: 'Admin Panel',
           eventKey: PageEventKey.ADMIN_PANEL,
         },
-        beforeEnter: [
-          PermissionGuard(LfPermission.projectGroupEdit),
-        ],
+        beforeEnter: [PermissionGuard(LfPermission.projectGroupEdit)],
       },
       {
         name: 'adminProjects',
@@ -60,10 +65,8 @@ export default [
             parameter: 'id',
           },
         },
-        beforeEnter: [
-          PermissionGuard(LfPermission.projectEdit),
-        ],
+        beforeEnter: [PermissionGuard(LfPermission.projectEdit)],
       },
     ],
   },
-];
+]
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/overview-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/overview-filter.vue
new file mode 100644
index 0000000000..60a435389a
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/overview-filter.vue
@@ -0,0 +1,359 @@
+<template>
+  <!-- <el-popover
+    v-model:visible="isPopoverVisible"
+    placement="bottom-start"
+    trigger="click"
+    popper-class="project-groups-select-popper"
+    :teleported="false"
+    width="255px"
+  >
+    <template #reference>
+      <el-input
+        v-model="model"
+        class="project-groups-select-input"
+        placeholder="Select project group..."
+        readonly
+        :suffix-icon="isPopoverVisible ? ArrowUpIcon : ArrowDownIcon"
+      />
+    </template>
+
+    <div
+      v-if="isSearchVisible"
+      class="border-b border-gray-100 px-1 w-full sticky top-0 bg-white"
+    >
+      <el-input
+        id="filterSearch"
+        v-model="searchQuery"
+        placeholder="Search..."
+        class="filter-dropdown-search"
+        :prefix-icon="SearchIcon"
+        clearable
+      />
+    </div>
+
+    <div>
+      <div
+        v-if="isPending"
+        class="text-gray-400 px-3 h-20 flex items-center justify-center"
+      >
+        <lf-icon
+          name="circle-notch"
+          class="animate-spin text-gray-400"
+          :size="16"
+        />
+        <span class="text-tiny ml-1 text-gray-400">
+          Loading project groups...
+        </span>
+      </div>
+      <div
+        v-else-if="projectGroupsList.length"
+        class="flex flex-col gap-1 overflow-auto p-2"
+      >
+        <div
+          v-for="projectGroup of projectGroupsList"
+          :key="projectGroup.id"
+          class="py-1.5 px-2 hover:bg-gray-50 rounded cursor-pointer"
+          :class="{
+            'bg-primary-50': projectGroup.id === selectedProjectGroup?.id,
+          }"
+          @click="onOptionClick(projectGroup)"
+        >
+          <div class="flex gap-0.5 items-start truncate">
+            <div class="block truncate mr-2">
+              <div class="text-small leading-5 text-gray-900 truncate">
+                {{ projectGroup.name }}
+              </div>
+              <div class="text-tiny text-gray-400">
+                {{ pluralize("project", projectGroup.projects.length, true) }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="isFetchingNextPage"
+          class="text-gray-400 px-3 h-20 flex items-center justify-center"
+        >
+          <lf-icon
+            name="circle-notch"
+            class="animate-spin text-gray-400"
+            :size="16"
+          />
+          <span class="text-tiny ml-1 text-gray-400">
+            Loading project groups...
+          </span>
+        </div>
+      </div>
+      <div
+        v-else
+        class="text-gray-400 px-3 h-20 flex items-center justify-center"
+      >
+        <span class="text-tiny text-gray-400"> No project groups found </span>
+      </div>
+    </div>
+  </el-popover> -->
+
+  <lfx-dropdown-select
+    v-model="selectedProjectGroup"
+    width="255px"
+    match-width="false"
+    dropdown-class="max-h-80"
+    placement="bottom-end"
+  >
+    <template #trigger="{ selectedOption }">
+      <lfx-dropdown-selector
+        size="medium"
+        type="transparent"
+        class="!rounded-full flex items-center justify-center w-full"
+      >
+        <div class="flex items-center gap-2">
+          <lf-icon
+            name="rectangle-history"
+            :size="16"
+          />
+          <span class="text-sm text-neutral-900 truncate">
+            {{ selectedOption.label || 'All collections' }}
+          </span>
+        </div>
+      </lfx-dropdown-selector>
+    </template>
+
+    <template #default>
+      <div class="sticky -top-1 z-10 bg-white w-full -mt-1 pt-1 flex flex-col gap-1">
+        <!-- All collections option -->
+        <lfx-dropdown-item
+          value="all"
+          label="All collections"
+        />
+
+        <lfx-dropdown-separator />
+
+        <!-- Search input -->
+        <lfx-dropdown-search
+          v-model="searchQuery"
+          placeholder="Search collections..."
+          lazy
+          class=""
+        />
+
+        <lfx-dropdown-separator />
+      </div>
+
+      <!-- Collections list -->
+      <div
+        v-if="isPending"
+        class="py-8 flex justify-center"
+      >
+        <lf-spinner />
+      </div>
+
+      <!-- <div
+        v-else-if="!collections.length && searchQuery"
+        class="py-4 px-3 text-sm text-neutral-500 text-center"
+      >
+        No collections found
+      </div> -->
+
+      <template v-else>
+        <lfx-dropdown-item
+          v-for="projectGroup in projectGroupsList"
+          :key="projectGroup.id"
+          :value="projectGroup.id"
+          :label="projectGroup.name"
+        />
+      </template>
+    </template>
+  </lfx-dropdown-select>
+</template>
+
+<script setup lang="ts">
+import {
+  h, ref, onMounted, computed, nextTick, watch,
+  onBeforeUnmount,
+} from 'vue';
+import { storeToRefs } from 'pinia';
+import { useLfSegmentsStore } from '@/modules/lf/segments/store';
+import pluralize from 'pluralize';
+import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
+import {
+  EventType,
+  FeatureEventKey,
+} from '@/shared/modules/monitoring/types/event';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { QueryFunction, useInfiniteQuery } from '@tanstack/vue-query';
+import { Pagination } from '@/shared/types/Pagination';
+import { TanstackKey } from '@/shared/types/tanstack';
+import { useDebounce } from '@vueuse/core';
+
+import { ToastStore } from '@/shared/message/notification';
+import { segmentService } from '@/modules/lf/segments/segments.service';
+import { ProjectGroup } from '@/modules/lf/segments/types/Segments';
+import LfxDropdownSelect from '@/ui-kit/lfx/dropdown/dropdown-select.vue';
+import LfxDropdownSelector from '@/ui-kit/lfx/dropdown/dropdown-selector.vue';
+import LfxDropdownItem from '@/ui-kit/lfx/dropdown/dropdown-item.vue';
+import LfxDropdownSeparator from '@/ui-kit/lfx/dropdown/dropdown-separator.vue';
+import LfxDropdownSearch from '@/ui-kit/lfx/dropdown/dropdown-search.vue';
+import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
+
+const SearchIcon = h(
+  'i', // type
+  { class: 'fa-light fa-magnifying-glass c-icon' }, // props
+  [],
+);
+
+const ArrowDownIcon = h(
+  'i', // type
+  { class: 'fa-light fa-chevron-down c-icon' }, // props
+  [],
+);
+
+const ArrowUpIcon = h(
+  'i', // type
+  { class: 'fa-light fa-chevron-up c-icon' }, // props
+  [],
+);
+
+const lsSegmentsStore = useLfSegmentsStore();
+const { selectedProjectGroup } = storeToRefs(lsSegmentsStore);
+const { updateSelectedProjectGroup } = lsSegmentsStore;
+
+const searchQuery = ref('');
+const isPopoverVisible = ref(false);
+const searchValue = useDebounce(searchQuery, 300);
+const isSearchVisible = computed(() => projectGroupsList.value.length > 5 || searchQuery.value.length > 0);
+
+let scrollContainer: HTMLElement | null = null;
+
+const { trackEvent } = useProductTracking();
+
+const model = computed({
+  get() {
+    return selectedProjectGroup.value?.name;
+  },
+  set(id) {
+    updateSelectedProjectGroup(id);
+  },
+});
+
+const queryKey = computed(() => [
+  TanstackKey.ADMIN_PROJECT_GROUPS,
+  searchValue.value,
+]);
+
+const projectGroupsQueryFn = segmentService.queryProjectGroups(() => ({
+  limit: 20,
+  offset: 0,
+  filter: {
+    name: searchQuery.value,
+  },
+})) as QueryFunction<Pagination<ProjectGroup>, readonly unknown[], unknown>;
+
+const {
+  data,
+  isPending,
+  isFetchingNextPage,
+  fetchNextPage,
+  hasNextPage,
+  isSuccess,
+  error,
+} = useInfiniteQuery<Pagination<ProjectGroup>, Error>({
+  queryKey,
+  queryFn: projectGroupsQueryFn,
+  getNextPageParam: (lastPage) => {
+    const nextPage = lastPage.offset + lastPage.limit;
+    const totalRows = lastPage.count;
+    return nextPage < totalRows ? nextPage : undefined;
+  },
+  initialPageParam: 0,
+});
+
+const projectGroupsList = computed((): ProjectGroup[] => {
+  if (isSuccess.value && data.value) {
+    return data.value.pages.reduce(
+      (acc, page) => acc.concat(page.rows),
+      [] as ProjectGroup[],
+    );
+  }
+  return [];
+});
+
+// Infinite scroll handler
+function onScroll(e: Event) {
+  if (!scrollContainer) return;
+  const threshold = 40;
+
+  const target = e.target as HTMLElement;
+  if (
+    !isFetchingNextPage.value
+    && hasNextPage.value
+    && target.scrollHeight - target.scrollTop - target.clientHeight < threshold
+  ) {
+    fetchNextPage();
+  }
+}
+
+watch(error, (err) => {
+  if (err) {
+    ToastStore.error('Something went wrong while fetching project groups');
+  }
+});
+
+onMounted(() => {
+  nextTick(() => {
+    scrollContainer = document.querySelector(
+      '.project-groups-select-popper',
+    );
+    if (scrollContainer) {
+      scrollContainer.addEventListener('scroll', onScroll);
+    }
+  });
+});
+
+const onOptionClick = ({ id, name }: ProjectGroup) => {
+  // trackEvent({
+  //   key: FeatureEventKey.SELECT_PROJECT_GROUP,
+  //   type: EventType.FEATURE,
+  //   properties: {
+  //     projectGroupId: id,
+  //     projectName: name,
+  //   },
+  // });
+
+  isPopoverVisible.value = false;
+  // updateSelectedProjectGroup(id);
+};
+
+onBeforeUnmount(() => {
+  if (scrollContainer) {
+    scrollContainer.removeEventListener('scroll', onScroll);
+  }
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfOverviewFilter',
+};
+</script>
+
+<style lang="scss">
+.project-groups-select-popper.el-popper {
+  max-width: 236px;
+  max-height: 480px;
+  overflow: auto;
+  @apply p-0;
+}
+
+.project-groups-select-input {
+  @apply cursor-pointer relative w-full;
+  height: 32px !important;
+
+  .el-input__wrapper {
+    @apply rounded;
+    @apply h-8 px-3;
+  }
+
+  .el-input__inner {
+    @apply cursor-pointer text-xs truncate pr-6;
+  }
+}
+</style>
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/trend-display.vue b/frontend/src/modules/admin/modules/overview/components/fragments/trend-display.vue
new file mode 100644
index 0000000000..9dfd2f3449
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/trend-display.vue
@@ -0,0 +1,91 @@
+<template>
+  <lfx-tooltip content="vs. previous 12M period">
+    <div class="flex gap-1 items-center">
+      <lf-icon
+        :name="getTrendIcon"
+        type="solid"
+        :size="15"
+        :class="getTrendColor"
+      />
+      <span
+        v-if="trendDirection !== 'neutral'"
+        class="text-xs font-medium text-nowrap"
+        :class="getTrendColor"
+      >
+        {{ trendPercentage }}%
+        <span class="hidden sm:inline"> ({{ formatTrendValue }}) </span>
+      </span>
+      <span
+        v-else
+        class="text-xs font-medium text-neutral-400"
+      >
+        0%
+      </span>
+      <slot name="period">
+        <span class="text-xs text-neutral-400">
+          {{ data.period }}
+        </span>
+      </slot>
+    </div>
+  </lfx-tooltip>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import type { OverviewTrends } from '@/modules/admin/modules/overview/types/overview.types';
+import { formatNumber } from '@/utils/number';
+
+const props = withDefaults(
+  defineProps<{
+    data: OverviewTrends;
+    decimalPlaces?: number;
+  }>(),
+  {
+    decimalPlaces: 0,
+  },
+);
+
+const trend = computed(() => {
+  return props.data.current - props.data.previous;
+});
+
+const trendPercentage = computed(() => {
+  if (!props.data.previous) {
+    // For division by zero, show as 100% increase
+    return '100.0';
+  }
+  const value = (Math.abs(trend.value) / props.data.previous) * 100;
+  return value.toFixed(1);
+});
+
+const formatTrendValue = computed(() => {
+  const sign = trend.value >= 0 ? '+' : '-';
+
+  return `${sign}${formatNumber(Math.abs(trend.value))}`;
+});
+
+const trendDirection = computed(() => {
+  if (trend.value === 0) return 'neutral';
+
+  return trend.value > 0 ? 'up' : 'down';
+});
+
+const getTrendIcon = computed(() => {
+  if (trendDirection.value === 'neutral') return 'equals';
+
+  return trendDirection.value === 'up' ? 'circle-arrow-up' : 'circle-arrow-down';
+});
+
+const getTrendColor = computed(() => {
+  if (trendDirection.value === 'neutral') return 'text-neutral-400';
+
+  return trendDirection.value === 'up' ? 'text-green-600' : 'text-red-600';
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfOverviewTrendDisplay',
+};
+</script>
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
new file mode 100644
index 0000000000..9e36fd84fd
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    show integration details here
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfOverviewIntegrationDetails',
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
new file mode 100644
index 0000000000..714ace7613
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    show integration status cards here
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfOverviewIntegrationStatus',
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
new file mode 100644
index 0000000000..6f541fe008
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="flex gap-4">
+    <!-- TODO: revisit this implementation when the backend is ready -->
+    <!-- we may use loop to render the cards -->
+    <lf-card class="flex-1 p-4 flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-semibold">Projects</span>
+        <lf-icon name="folders" type="light" class="text-gray-400" />
+      </div>
+      <div class="text-xl font-light">
+        640
+      </div>
+      <app-lf-overview-trend-display :data="projectsTrends" />
+    </lf-card>
+    <lf-card class="flex-1 p-4 flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-semibold">People</span>
+        <lf-icon name="people-group" type="light" class="text-gray-400" />
+      </div>
+      <div class="text-xl font-light">
+        640
+      </div>
+      <app-lf-overview-trend-display :data="peopleTrends" />
+    </lf-card>
+    <lf-card class="flex-1 p-4 flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-semibold">Organizations</span>
+        <lf-icon name="building" type="light" class="text-gray-400" />
+      </div>
+      <div class="text-xl font-light">
+        640
+      </div>
+      <app-lf-overview-trend-display :data="organizationsTrends" />
+    </lf-card>
+    <lf-card class="flex-1 p-4 flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-semibold">Activities</span>
+        <lf-icon name="monitor-waveform" type="light" class="text-gray-400" />
+      </div>
+      <div class="text-xl font-light">
+        640
+      </div>
+      <app-lf-overview-trend-display :data="activitiesTrends" />
+    </lf-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import LfCard from '@/ui-kit/card/Card.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import AppLfOverviewTrendDisplay from '@/modules/admin/modules/overview/components/fragments/trend-display.vue';
+import type { OverviewTrends } from '@/modules/admin/modules/overview/types/overview.types';
+
+const projectsTrends = ref<OverviewTrends>({
+  current: 640,
+  previous: 500,
+  period: 'vs. last 30d',
+});
+
+const peopleTrends = ref<OverviewTrends>({
+  current: 640,
+  previous: 600,
+  period: 'vs. previous 30d',
+});
+
+const organizationsTrends = ref<OverviewTrends>({
+  current: 640,
+  previous: 700,
+  period: 'vs. previous 12M period',
+});
+
+const activitiesTrends = ref<OverviewTrends>({
+  current: 640,
+  previous: 400,
+  period: 'vs. previous 30d',
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfOverviewSummary',
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/modules/admin/modules/overview/pages/overview.vue b/frontend/src/modules/admin/modules/overview/pages/overview.vue
new file mode 100644
index 0000000000..73de99f8b8
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/pages/overview.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="flex flex-col gap-10 lg:px-8 px-6">
+    <div class="flex items-center justify-between pt-1 pb-5 border-b border-gray-200">
+      <h4>
+        Overview
+      </h4>
+      <div>
+        <app-lf-overview-filter />
+      </div>
+    </div>
+    <app-lf-overview-summary />
+    <app-lf-overview-integration-status />
+    <app-lf-overview-integration-details />
+  </div>
+</template>
+
+<script setup lang="ts">
+import AppLfOverviewSummary from '@/modules/admin/modules/overview/components/sections/summary.vue';
+import AppLfOverviewIntegrationStatus from '@/modules/admin/modules/overview/components/sections/integration-status.vue';
+import AppLfOverviewIntegrationDetails from '@/modules/admin/modules/overview/components/sections/integration-details.vue';
+import AppLfOverviewFilter from '@/modules/admin/modules/overview/components/fragments/overview-filter.vue';
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfOverviewPage',
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/modules/admin/modules/overview/store/overview.store.ts b/frontend/src/modules/admin/modules/overview/store/overview.store.ts
new file mode 100644
index 0000000000..e3270bc786
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/store/overview.store.ts
@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { Project, ProjectGroup } from '@/modules/lf/segments/types/Segments'
+
+export const useOverviewStore = defineStore('overview', () => {
+  const selectedProjectGroup = ref<ProjectGroup | null>(null)
+  const selectedProject = ref<Project | null>(null)
+
+  return {
+    selectedProjectGroup,
+    selectedProject,
+  }
+})
diff --git a/frontend/src/modules/admin/modules/overview/types/overview.types.ts b/frontend/src/modules/admin/modules/overview/types/overview.types.ts
new file mode 100644
index 0000000000..42196fdf61
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/types/overview.types.ts
@@ -0,0 +1,5 @@
+export interface OverviewTrends {
+  current: number
+  previous: number
+  period: string
+}
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 446e5a2029..1707c6bab6 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,16 +1,13 @@
-import {
-  createRouter as createVueRouter,
-  createWebHistory,
-} from 'vue-router';
-import { storeToRefs } from 'pinia';
-
-import { store } from '@/store';
-import authGuards from '@/middleware/auth';
-import modules from '@/modules';
-import ProgressBar from '@/shared/progress-bar/progress-bar';
-import { useLfSegmentsStore } from '@/modules/lf/segments/store';
-import auth from '@/modules/auth';
-import navigationGuard from '@/middleware/navigation/navigation-guard';
+import { createRouter as createVueRouter, createWebHistory } from 'vue-router'
+import { storeToRefs } from 'pinia'
+
+import { store } from '@/store'
+import authGuards from '@/middleware/auth'
+import modules from '@/modules'
+import ProgressBar from '@/shared/progress-bar/progress-bar'
+import { useLfSegmentsStore } from '@/modules/lf/segments/store'
+import auth from '@/modules/auth'
+import navigationGuard from '@/middleware/navigation/navigation-guard'
 
 /**
  * Loads all the routes from src/modules/ folders, and adds the catch-all rule to handle 404s
@@ -20,25 +17,27 @@ import navigationGuard from '@/middleware/navigation/navigation-guard';
 const routes = [
   {
     path: '',
-    redirect: '/project-groups',
+    redirect: '/overview',
   },
   ...auth.routes,
   ...Object.keys(modules)
     .filter((key) => Boolean(modules[key].routes))
-    .map((key) => modules[key].routes.map((r) => {
-      // eslint-disable-next-line no-param-reassign
-      r.meta = {
-        ...r.meta,
-        middleware: [...authGuards],
-      };
-      return r;
-    }))
+    .map((key) =>
+      modules[key].routes.map((r) => {
+        // eslint-disable-next-line no-param-reassign
+        r.meta = {
+          ...r.meta,
+          middleware: [...authGuards],
+        }
+        return r
+      }),
+    )
     .reduce((a, b) => a.concat(b), []),
   { path: '/:catchAll(.*)', redirect: '/404' },
-];
+]
 
 // eslint-disable-next-line import/no-mutable-exports
-let router;
+let router
 
 /**
  * Creates/Sets Router
@@ -50,65 +49,66 @@ export const createRouter = () => {
       history: createWebHistory(),
       routes,
       scrollBehavior() {
-        return { x: 0, y: 0 };
+        return { x: 0, y: 0 }
       },
-    });
+    })
 
-    const originalPush = router.push;
+    const originalPush = router.push
     router.push = function push(location) {
-      return originalPush
-        .call(this, location)
-        .catch((error) => {
-          console.error(error);
-          ProgressBar.done();
-        });
-    };
+      return originalPush.call(this, location).catch((error) => {
+        console.error(error)
+        ProgressBar.done()
+      })
+    }
 
     router.beforeEach(async (to, from, next) => {
-      const lsSegmentsStore = useLfSegmentsStore();
-      const { selectedProjectGroup } = storeToRefs(lsSegmentsStore);
-      const { listProjectGroups, updateSelectedProjectGroup } = lsSegmentsStore;
+      const lsSegmentsStore = useLfSegmentsStore()
+      const { selectedProjectGroup } = storeToRefs(lsSegmentsStore)
+      const { listProjectGroups, updateSelectedProjectGroup } = lsSegmentsStore
 
       // Set title to pages
-      document.title = `LFX Community Data Platform${to.meta.title ? ` | ${to.meta.title}` : ''}`;
+      document.title = `LFX Community Data Platform${to.meta.title ? ` | ${to.meta.title}` : ''}`
 
       if (to.name && to.query.menu === from.query.menu && to.name !== from.name) {
-        ProgressBar.start();
+        ProgressBar.start()
       }
 
-      const matchedRoute = to.matched.find(
-        (m) => m.meta.middleware,
-      );
+      const matchedRoute = to.matched.find((m) => m.meta.middleware)
 
       if (matchedRoute !== undefined) {
-        const middlewareArray = Array.isArray(
-          matchedRoute.meta.middleware,
-        )
+        const middlewareArray = Array.isArray(matchedRoute.meta.middleware)
           ? matchedRoute.meta.middleware
-          : [matchedRoute.meta.middleware];
+          : [matchedRoute.meta.middleware]
 
         const context = {
           from,
           router,
           to,
           store,
-        };
+        }
 
         await middlewareArray.forEach(async (middleware) => {
-          await middleware(context);
-        });
+          await middleware(context)
+        })
 
         // Redirect to project group landing pages if routes that require a selected project group
         // And no project group is selected
-        if (to.meta.segments?.requireSelectedProjectGroup || to.meta.segments?.optionalSelectedProjectGroup) {
-          if (!selectedProjectGroup.value && !to.query.projectGroup && !to.meta.segments?.optionalSelectedProjectGroup) {
-            next('/project-groups');
-            return;
+        if (
+          to.meta.segments?.requireSelectedProjectGroup ||
+          to.meta.segments?.optionalSelectedProjectGroup
+        ) {
+          if (
+            !selectedProjectGroup.value &&
+            !to.query.projectGroup &&
+            !to.meta.segments?.optionalSelectedProjectGroup
+          ) {
+            next('/project-groups')
+            return
           }
 
           if (!to.query.projectGroup && selectedProjectGroup.value?.id) {
-            next({ ...to, query: { ...to.query, projectGroup: selectedProjectGroup.value?.id } });
-            return;
+            next({ ...to, query: { ...to.query, projectGroup: selectedProjectGroup.value?.id } })
+            return
           }
 
           if (!selectedProjectGroup.value) {
@@ -116,29 +116,27 @@ export const createRouter = () => {
               await listProjectGroups({
                 limit: null,
                 reset: true,
-              });
+              })
 
-              updateSelectedProjectGroup(to.query.projectGroup, false);
+              updateSelectedProjectGroup(to.query.projectGroup, false)
             } catch (e) {
-              next('/project-groups');
-              return;
+              next('/project-groups')
+              return
             }
           }
         }
       }
 
-      next();
-    });
+      next()
+    })
 
     router.afterEach(async (to) => {
-      ProgressBar.done();
-      await navigationGuard({ to });
-    });
+      ProgressBar.done()
+      await navigationGuard({ to })
+    })
   }
 
-  return router;
-};
+  return router
+}
 
-export {
-  router,
-};
+export { router }
diff --git a/frontend/src/shared/modules/monitoring/types/event.ts b/frontend/src/shared/modules/monitoring/types/event.ts
index b54b34a471..89cbed85e0 100644
--- a/frontend/src/shared/modules/monitoring/types/event.ts
+++ b/frontend/src/shared/modules/monitoring/types/event.ts
@@ -13,8 +13,8 @@ export enum EventType {
 }
 
 export enum PageEventKey {
-  PROJECT_GROUPS = 'Project groups',
   OVERVIEW = 'Overview',
+  PROJECT_GROUPS = 'Project groups',
   MEMBERS = 'Contributors',
   ORGANIZATIONS = 'Organizations',
   ACTIVITIES = 'Activities',
diff --git a/frontend/src/ui-kit/index.scss b/frontend/src/ui-kit/index.scss
index ac1b2a8bba..400823aa34 100644
--- a/frontend/src/ui-kit/index.scss
+++ b/frontend/src/ui-kit/index.scss
@@ -22,4 +22,6 @@
 @import 'timeline/timeline';
 @import 'tooltip/tooltip';
 @import 'tag/tag';
+@import 'lfx/dropdown/dropdown';
+@import 'lfx/popover/popover';
 
diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown-group-title.vue b/frontend/src/ui-kit/lfx/dropdown/dropdown-group-title.vue
new file mode 100644
index 0000000000..cdccb3cb46
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown-group-title.vue
@@ -0,0 +1,15 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="lfx-c-dropdown__group-title">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'LfxDropdownGroupTitle',
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown-item.vue b/frontend/src/ui-kit/lfx/dropdown/dropdown-item.vue
new file mode 100644
index 0000000000..f8b77de572
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown-item.vue
@@ -0,0 +1,63 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div
+    class="lfx-c-dropdown__item"
+    :class="{ 'is-selected': isSelected }"
+    @click="handleClick"
+  >
+    <slot>
+      {{ props.label }}
+    </slot>
+    <div
+      v-if="isSelected || props.checkmarkBefore"
+      class="flex justify-end"
+      :class="props.checkmarkBefore ? 'order-first min-w-4 w-4' : 'flex-grow'"
+    >
+      <lf-icon
+        v-if="isSelected"
+        name="check"
+        :size="16"
+        class="!text-brand-500"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAttrs, computed } from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+
+const props = defineProps<{
+  value?: string;
+  label?: string;
+  checkmarkBefore?: boolean;
+  selected?: boolean;
+}>();
+
+const attrs = useAttrs();
+
+const emit = defineEmits<{
+  (e: 'click', value: { value?: string; label?: string; [key: string]: any }): void;
+}>();
+
+// Determine if the item is currently selected
+const isSelected = computed(() => props.selected);
+
+// Emit selection event upward
+const handleClick = () => {
+  emit('click', {
+    value: props.value,
+    label: props.label,
+    ...attrs,
+  });
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxDropdownItem',
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown-search.vue b/frontend/src/ui-kit/lfx/dropdown/dropdown-search.vue
new file mode 100644
index 0000000000..70f0cb6169
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown-search.vue
@@ -0,0 +1,62 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <label
+    class="flex items-center justify-between px-3 py-2 gap-2"
+    @click.stop
+  >
+    <lf-icon
+      name="search"
+      :size="16"
+      class="text-neutral-400"
+    />
+    <input
+      v-model="model"
+      type="text"
+      class="!outline-none !shadow-none flex-grow text-sm text-neutral-900 leading-5"
+      :placeholder="props.placeholder || 'Search...'"
+      @input="changedValue"
+    />
+    <lf-icon
+      v-if="model.length > 0"
+      name="circle-xmark"
+      :size="16"
+      type="solid"
+      class="text-neutral-300 cursor-pointer"
+      @click="
+        model = '';
+        changedValue();
+      "
+    />
+  </label>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { debounce } from 'lodash-es';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+
+const props = defineProps<{
+  modelValue: string;
+  placeholder?: string;
+  lazy?: boolean;
+}>();
+
+const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>();
+
+const model = ref(props.modelValue);
+
+const debouncedEmit = debounce((value: string) => {
+  emit('update:modelValue', value);
+}, 300);
+
+const changedValue = () => {
+  if (props.lazy) {
+    debouncedEmit(model.value);
+  } else {
+    emit('update:modelValue', model.value);
+  }
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown-select.vue b/frontend/src/ui-kit/lfx/dropdown/dropdown-select.vue
new file mode 100644
index 0000000000..87b01a3b82
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown-select.vue
@@ -0,0 +1,101 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <lfx-dropdown
+    v-model:visibility="isVisible"
+    :placement="props.placement"
+    :width="props.width"
+    :match-width="props.matchWidth"
+    v-bind="$attrs"
+  >
+    <template #trigger>
+      <slot
+        name="trigger"
+        :selected-option="selectedOption"
+      />
+    </template>
+
+    <slot :selected-option="selectedOption" />
+  </lfx-dropdown>
+</template>
+
+<script setup lang="ts">
+import type { Placement } from '@popperjs/core';
+import { computed, type VNode, provide, ref, useSlots } from 'vue';
+import LfxDropdown from '@/ui-kit/lfx/dropdown/dropdown.vue';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    placement?: Placement;
+    width?: string;
+    visibility?: boolean;
+    matchWidth?: boolean;
+  }>(),
+  {
+    placement: 'bottom-end',
+    width: 'auto',
+    visibility: false,
+    matchWidth: false,
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+  (e: 'update:visibility', value: boolean): void;
+}>();
+
+const slots = useSlots();
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (value: string) => emit('update:modelValue', value),
+});
+
+const isVisible = computed({
+  get: () => props.visibility,
+  set: (value: boolean) => emit('update:visibility', value),
+});
+
+// Recursive function to find components named 'LfxDropdownItem'
+const findDropdownItems = (nodes: VNode[], result: VNode[] = []) => {
+  nodes.forEach((node: VNode) => {
+    if (!node) return;
+    if (node.type && ['LfxDropdownItem', 'LfxOption'].includes((node.type as any).name)) {
+      result.push(node);
+    }
+    if (node.children && Array.isArray(node.children)) {
+      findDropdownItems(node.children as VNode[], result);
+    } else if (typeof node.children === 'object' && node.children?.default) {
+      findDropdownItems((node.children?.default as () => VNode[])() as VNode[], result);
+    }
+  });
+  return result;
+};
+
+const dropdownItems = computed<VNode[]>(() => {
+  const slotNodes = slots.default ? slots.default() : [];
+  return findDropdownItems(slotNodes as VNode[]);
+});
+
+const selectedOptionProps = ref<Record<string, string>>({});
+
+const selectedOption = computed(() => {
+  if (value.value === selectedOptionProps.value.value) {
+    return selectedOptionProps.value;
+  }
+  const selected = dropdownItems.value.find((item) => item.props?.value === value.value);
+  return selected?.props || { value: value.value, label: value.value };
+});
+
+provide('selectedValue', value);
+provide('selectedOptionProps', selectedOptionProps);
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxDropdownSelect',
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown-selector.vue b/frontend/src/ui-kit/lfx/dropdown/dropdown-selector.vue
new file mode 100644
index 0000000000..efc117e626
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown-selector.vue
@@ -0,0 +1,40 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div
+    class="lfx-c-dropdown__selector"
+    :class="[`lfx-c-dropdown__selector--${props.size}`, `lfx-c-dropdown__selector--${props.type}`]"
+  >
+    <slot />
+    <slot name="append">
+      <lf-icon
+        name="angle-down"
+        :size="12"
+        class="text-neutral-500"
+      />
+    </slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+
+const props = withDefaults(
+  defineProps<{
+    size?: 'medium' | 'small';
+    type?: 'transparent' | 'filled';
+  }>(),
+  {
+    size: 'medium',
+    type: 'transparent',
+  },
+);
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxDropdownSelector',
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown-separator.vue b/frontend/src/ui-kit/lfx/dropdown/dropdown-separator.vue
new file mode 100644
index 0000000000..92421509ee
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown-separator.vue
@@ -0,0 +1,13 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="lfx-c-dropdown__separator" />
+</template>
+
+<script lang="ts">
+export default {
+  name: 'LfxDropdownSeparator',
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown.scss b/frontend/src/ui-kit/lfx/dropdown/dropdown.scss
new file mode 100644
index 0000000000..0314cce6e1
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown.scss
@@ -0,0 +1,74 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+.lfx-c-dropdown {
+  @apply bg-white border border-neutral-200 rounded-lg p-1 flex flex-col gap-1 max-h-96 shadow-lg;
+
+  //@screen sm{
+  //  @apply ;
+  //}
+
+  &__item {
+    @apply bg-white py-2 px-3 flex items-center gap-2 text-sm leading-5 cursor-pointer transition-all rounded-md;
+
+    &:hover {
+      @apply bg-neutral-50;
+    }
+
+    .c-icon {
+      @apply text-neutral-500;
+    }
+
+    &.is-selected {
+      @apply font-semibold;
+
+      .c-icon {
+        @apply text-neutral-900;
+      }
+    }
+  }
+
+  &__separator {
+    @apply w-full border-b border-neutral-100 h-0;
+  }
+
+  &__group-title {
+    @apply px-3 pt-1 text-xs font-semibold leading-5 text-neutral-400;
+  }
+
+  &__selector {
+    @apply flex items-center gap-2 text-sm leading-5 font-medium transition-all;
+    @apply px-3 py-2 cursor-pointer transition-all rounded-lg select-none;
+
+    &:hover {
+      @apply bg-neutral-50;
+    }
+
+    &--small {
+      @apply px-2 py-1 text-xs gap-1.5 rounded-md;
+    }
+
+    &--filled {
+      @apply bg-white outline outline-1 outline-neutral-200 shadow-xs;
+    }
+  }
+
+  &__sub {
+    @apply relative;
+
+    &-menu {
+      @apply absolute left-full top-0 z-10 ml-3 overflow-auto;
+    }
+  }
+}
+
+.dropdown-popover.c-popover__content {
+  z-index: 9;
+}
+
+.is-open {
+  .lfx-c-dropdown {
+    &__selector {
+      @apply bg-neutral-50;
+    }
+  }
+}
diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown.vue b/frontend/src/ui-kit/lfx/dropdown/dropdown.vue
new file mode 100644
index 0000000000..e1ca4c1394
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown.vue
@@ -0,0 +1,79 @@
+<!--
+Note: This is a copy of the LFX Insights implementation of the Dropdown component.
+This will replace the old Popover component in the future.
+-->
+<template>
+  <lfx-popover
+    ref="popover"
+    v-model:visibility="isVisible"
+    :placement="props.placement"
+    v-bind="$attrs"
+    :is-modal="pageWidth < 640"
+    :match-width="props.matchWidth"
+    :popover-class="props.popoverClass"
+  >
+    <slot name="trigger" />
+
+    <template #content>
+      <div
+        class="lfx-c-dropdown overflow-y-auto"
+        :style="{ width: props.width }"
+        :class="props.dropdownClass"
+        @click="popover?.closePopover()"
+      >
+        <slot />
+      </div>
+    </template>
+  </lfx-popover>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { Placement } from '@popperjs/core';
+import { computed, provide } from 'vue';
+import LfxPopover from '@/ui-kit/lfx/popover/popover.vue';
+import useResponsive from '@/utils/responsive';
+
+const props = withDefaults(
+  defineProps<{
+    placement?: Placement;
+    width?: string;
+    visibility?: boolean;
+    matchWidth?: boolean;
+    dropdownClass?: string;
+    popoverClass?: string;
+  }>(),
+  {
+    placement: 'bottom-end',
+    width: 'auto',
+    visibility: false,
+    matchWidth: false,
+    dropdownClass: '',
+    popoverClass: '',
+  },
+);
+
+const emit = defineEmits<{ (e: 'update:visibility', value: boolean): void }>();
+
+const submenuOpen = ref('');
+
+provide('submenuOpen', submenuOpen);
+
+const isVisible = computed({
+  get: () => props.visibility,
+  set: (value: boolean) => {
+    emit('update:visibility', value);
+    submenuOpen.value = '';
+  },
+});
+
+const popover = ref<typeof LfxPopover | null>(null);
+
+const { pageWidth } = useResponsive();
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxDropdown',
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/dropdown/types/dropdown.types.ts b/frontend/src/ui-kit/lfx/dropdown/types/dropdown.types.ts
new file mode 100644
index 0000000000..299a6b6497
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/dropdown/types/dropdown.types.ts
@@ -0,0 +1,37 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+export interface DropdownOption {
+  label: string;
+  value: string;
+  description?: string;
+}
+
+export interface DropdownGroupOptions {
+  label: string;
+  items: DropdownOption[];
+}
+
+export const dropdownSizes = ['default', 'small'] as const;
+export const dropdownTypes = ['filled', 'transparent'] as const;
+
+export type DropdownSize = (typeof dropdownSizes)[number];
+export type DropdownType = (typeof dropdownTypes)[number];
+
+export interface DropdownProps {
+  modelValue?: string;
+  options: DropdownOption[] | DropdownGroupOptions[];
+  dropdownIcon?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  type?: DropdownType;
+  size?: DropdownSize;
+  showFilter?: boolean;
+  showGroupBreaks?: boolean;
+  icon?: string;
+  fullWidth?: boolean;
+  center?: boolean;
+  prefix?: string;
+  dropdownPosition?: 'left' | 'right';
+  iconOnlyMobile?: boolean;
+  splitLines?: number[]; // index of the lines to split the dropdown
+}
diff --git a/frontend/src/ui-kit/lfx/popover/popover.scss b/frontend/src/ui-kit/lfx/popover/popover.scss
new file mode 100644
index 0000000000..fe9b5feef4
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/popover/popover.scss
@@ -0,0 +1,26 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+.lfx-c-popover {
+  &__trigger {
+    @apply w-fit;
+  }
+
+  &__content {
+    @apply z-50 w-max overflow-visible;
+    width: auto !important;
+
+    &.is-hidden {
+      @apply invisible opacity-0 pointer-events-none;
+    }
+
+    &.is-modal {
+      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25));
+      @apply fixed top-0 left-0 h-full w-full transform translate-x-0 translate-y-0  p-12 pt-16 px-5 #{!important};
+      @apply flex flex-wrap justify-center items-start;
+
+      & > div {
+        @apply w-full max-h-full #{!important};
+      }
+    }
+  }
+}
diff --git a/frontend/src/ui-kit/lfx/popover/popover.vue b/frontend/src/ui-kit/lfx/popover/popover.vue
new file mode 100644
index 0000000000..f25041c78b
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/popover/popover.vue
@@ -0,0 +1,217 @@
+<!--
+Note: This is a copy of the LFX Insights implementation of the Popover component.
+This will replace the old Popover component in the future.
+-->
+<template>
+  <div
+    ref="trigger"
+    class="lfx-c-popover__trigger"
+    :class="{ 'is-open': isVisible }"
+    v-bind="$attrs"
+    @click="handleClick"
+  >
+    <slot />
+  </div>
+  <ClientOnly>
+    <teleport
+      v-if="isVisible && !props.disabled"
+      to="body"
+    >
+      <div
+        ref="popover"
+        class="lfx-c-popover__content"
+        :class="{ 'is-modal': props.isModal, [props.popoverClass || '']: props.popoverClass }"
+        @click="props.isModal ? closePopover() : null"
+      >
+        <slot
+          name="content"
+          :close="closePopover"
+        />
+      </div>
+    </teleport>
+  </ClientOnly>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import type { Instance, Placement, ModifierPhases } from '@popperjs/core';
+import { createPopper } from '@popperjs/core';
+
+const props = withDefaults(
+  defineProps<{
+    placement?: Placement;
+    triggerEvent?: 'click' | 'hover';
+    visibility?: boolean;
+    spacing?: number;
+    disabled?: boolean;
+    matchWidth?: boolean;
+    isModal?: boolean;
+    popoverClass?: string;
+  }>(),
+  {
+    placement: 'bottom-end',
+    triggerEvent: 'click',
+    visibility: false,
+    spacing: 4,
+    disabled: false,
+    matchWidth: false,
+    isModal: false,
+    popoverClass: '',
+  },
+);
+
+const emit = defineEmits<{ (e: 'update:visibility', value: boolean): void }>();
+
+const trigger = ref<HTMLElement | null>(null);
+const popover = ref<HTMLElement | null>(null);
+const popperInstance = ref<Instance | null>(null);
+const isVisible = ref(props.visibility);
+const closeTimeout = ref<number | null>(null);
+
+watch(
+  () => props.visibility,
+  (val) => {
+    isVisible.value = val;
+  },
+);
+watch(isVisible, (val) => emit('update:visibility', val));
+
+const createPopperInstance = () => {
+  if (trigger.value && popover.value) {
+    popperInstance.value = createPopper(trigger.value, popover.value, {
+      strategy: 'fixed',
+      placement: 'bottom-end',
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, props.spacing],
+          },
+        },
+        ...(props.matchWidth
+          ? [
+              {
+                name: 'sameWidth',
+                enabled: true,
+                phase: 'beforeWrite' as ModifierPhases,
+                requires: ['computeStyles'] as unknown as ModifierPhases[],
+                fn: ({ state }: { state: any }) => {
+                  Object.assign(state.styles.popper, {
+                    width: `${state.rects.reference.width}px`,
+                  });
+                },
+              },
+            ]
+          : []),
+      ],
+    });
+  }
+};
+
+const destroyPopperInstance = () => {
+  popperInstance.value?.destroy();
+  popperInstance.value = null;
+};
+
+const openPopover = async () => {
+  isVisible.value = true;
+  if (props.triggerEvent === 'click') {
+    document.addEventListener('click', handleClickOutside);
+  }
+};
+
+const closePopover = () => {
+  isVisible.value = false;
+  if (props.triggerEvent === 'click') {
+    document.removeEventListener('click', handleClickOutside);
+  }
+};
+
+const handleClick = (e: Event) => {
+  e.stopPropagation();
+  if (props.triggerEvent === 'click') {
+    if (isVisible.value) {
+      closePopover();
+    } else {
+      openPopover();
+    }
+  }
+};
+
+const handleClickOutside = (e: Event) => {
+  if (popover.value && !popover.value.contains(e.target as Node) && !trigger.value?.contains(e.target as Node)) {
+    closePopover();
+  }
+};
+
+const cancelClose = () => {
+  if (closeTimeout.value !== null) {
+    clearTimeout(closeTimeout.value);
+    closeTimeout.value = null;
+  }
+};
+
+const scheduleClose = () => {
+  closeTimeout.value = window.setTimeout(() => {
+    closePopover();
+  }, 150);
+};
+
+onMounted(() => {
+  if (import.meta.client) {
+    createPopperInstance();
+    if (props.triggerEvent === 'hover') {
+      trigger.value?.addEventListener('mouseenter', openPopover);
+      trigger.value?.addEventListener('mouseleave', scheduleClose);
+      popover.value?.addEventListener('mouseenter', cancelClose);
+      popover.value?.addEventListener('mouseleave', scheduleClose);
+    }
+  }
+});
+
+watch(isVisible, async (visible) => {
+  if (visible) {
+    await nextTick();
+    createPopperInstance();
+
+    if (props.triggerEvent === 'hover') {
+      // Safely add listeners now that popover is in DOM
+      popover.value?.addEventListener('mouseenter', cancelClose);
+      popover.value?.addEventListener('mouseleave', scheduleClose);
+    }
+  } else {
+    destroyPopperInstance();
+
+    if (props.triggerEvent === 'hover') {
+      // Clean up listeners when hiding
+      popover.value?.removeEventListener('mouseenter', cancelClose);
+      popover.value?.removeEventListener('mouseleave', scheduleClose);
+    }
+  }
+});
+
+onBeforeUnmount(() => {
+  destroyPopperInstance();
+  if (props.triggerEvent === 'hover') {
+    trigger.value?.removeEventListener('mouseenter', openPopover);
+    trigger.value?.removeEventListener('mouseleave', scheduleClose);
+    popover.value?.removeEventListener('mouseenter', cancelClose);
+    popover.value?.removeEventListener('mouseleave', scheduleClose);
+  }
+
+  if (closeTimeout.value !== null) {
+    clearTimeout(closeTimeout.value);
+  }
+});
+
+defineExpose({
+  closePopover,
+  openPopover,
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxPopover',
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/popover/types/PopoverPlacement.ts b/frontend/src/ui-kit/lfx/popover/types/PopoverPlacement.ts
new file mode 100644
index 0000000000..d07ed35dd7
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/popover/types/PopoverPlacement.ts
@@ -0,0 +1,18 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+export const popoverPlacements = [
+  'bottom-start',
+  'bottom',
+  'bottom-end',
+  'top',
+  'top-start',
+  'top-end',
+  'left',
+  'left-start',
+  'left-end',
+  'right',
+  'right-start',
+  'right-end',
+] as const;
+
+export type PopoverPlacement = (typeof popoverPlacements)[number];
diff --git a/frontend/src/ui-kit/lfx/popover/types/PopoverTrigger.ts b/frontend/src/ui-kit/lfx/popover/types/PopoverTrigger.ts
new file mode 100644
index 0000000000..f395b93ecf
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/popover/types/PopoverTrigger.ts
@@ -0,0 +1,5 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+export const popoverTrigger = ['click', 'hover'] as const;
+
+export type PopoverTrigger = (typeof popoverTrigger)[number];
diff --git a/frontend/src/utils/responsive.ts b/frontend/src/utils/responsive.ts
new file mode 100644
index 0000000000..78ecab918b
--- /dev/null
+++ b/frontend/src/utils/responsive.ts
@@ -0,0 +1,29 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+import { onMounted, onUnmounted, ref } from 'vue';
+
+const useResponsive = () => {
+  const pageWidth = ref(0);
+
+  const updatePageWidth = () => {
+    pageWidth.value = window.innerWidth;
+  };
+
+  const isMobileOrTablet = () => /Mobi|Android|iPhone|iPad|iPod/i.test(navigator?.userAgent);
+
+  onMounted(() => {
+    updatePageWidth();
+    window.addEventListener('resize', updatePageWidth);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', updatePageWidth);
+  });
+
+  return {
+    isMobileOrTablet,
+    pageWidth,
+  };
+};
+
+export default useResponsive;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 9483bb6125..4787e63d16 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,10 +1,9 @@
 /* eslint-disable */
-const { getThemeReplacementsValues } = require('./.tailwind/colorConverter.js');
+const { getThemeReplacementsValues } = require('./.tailwind/colorConverter.js')
 // tailwind.config.js
 const plugin = require('tailwindcss/plugin')
 
-
-const themeReplacements = getThemeReplacementsValues();
+const themeReplacements = getThemeReplacementsValues()
 
 const spacing = {
   0.5: '0.125rem',
@@ -63,7 +62,7 @@ const spacing = {
   120: '30rem',
   148: '37rem',
   254: '63.5rem',
-};
+}
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -189,12 +188,12 @@ module.exports = {
         3: '3px',
       },
       boxShadow: {
-        DEFAULT:
-          '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+        DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
         md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
         lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
         xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
         '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+        xs: '0 1px 2px -1px rgba(0, 0, 0, 0.10), 0 1px 3px 0 rgba(0, 0, 0, 0.10)',
       },
       fontSize: {
         '4xs': ['0.5rem'],
@@ -209,50 +208,17 @@ module.exports = {
         '5xl': ['4rem'],
         '8xl': ['8rem'],
         '10xl': ['10rem'],
-        h1: [
-          'var(--lf-heading-1-font-size)',
-          'var(--lf-heading-1-line-height)',
-        ],
-        h2: [
-          'var(--lf-heading-2-font-size)',
-          'var(--lf-heading-2-line-height)',
-        ],
-        h3: [
-          'var(--lf-heading-3-font-size)',
-          'var(--lf-heading-3-line-height)',
-        ],
-        h4: [
-          'var(--lf-heading-4-font-size)',
-          'var(--lf-heading-4-line-height)',
-        ],
-        h5: [
-          'var(--lf-heading-5-font-size)',
-          'var(--lf-heading-5-line-height)',
-        ],
-        h6: [
-          'var(--lf-heading-6-font-size)',
-          'var(--lf-heading-6-line-height)',
-        ],
-        xtiny: [
-          'var(--lf-text-xtiny-font-size)',
-          'var(--lf-text-xtiny-line-height)',
-        ],
-        tiny: [
-          'var(--lf-text-tiny-font-size)',
-          'var(--lf-text-tiny-line-height)',
-        ],
-        small: [
-          'var(--lf-text-small-font-size)',
-          'var(--lf-text-small-line-height)',
-        ],
-        medium: [
-          'var(--lf-text-medium-font-size)',
-          'var(--lf-text-medium-line-height)',
-        ],
-        large: [
-          'var(--lf-text-large-font-size)',
-          'var(--lf-text-large-line-height)',
-        ],
+        h1: ['var(--lf-heading-1-font-size)', 'var(--lf-heading-1-line-height)'],
+        h2: ['var(--lf-heading-2-font-size)', 'var(--lf-heading-2-line-height)'],
+        h3: ['var(--lf-heading-3-font-size)', 'var(--lf-heading-3-line-height)'],
+        h4: ['var(--lf-heading-4-font-size)', 'var(--lf-heading-4-line-height)'],
+        h5: ['var(--lf-heading-5-font-size)', 'var(--lf-heading-5-line-height)'],
+        h6: ['var(--lf-heading-6-font-size)', 'var(--lf-heading-6-line-height)'],
+        xtiny: ['var(--lf-text-xtiny-font-size)', 'var(--lf-text-xtiny-line-height)'],
+        tiny: ['var(--lf-text-tiny-font-size)', 'var(--lf-text-tiny-line-height)'],
+        small: ['var(--lf-text-small-font-size)', 'var(--lf-text-small-line-height)'],
+        medium: ['var(--lf-text-medium-font-size)', 'var(--lf-text-medium-line-height)'],
+        large: ['var(--lf-text-large-font-size)', 'var(--lf-text-large-line-height)'],
       },
       letterSpacing: {
         1: '0.0625rem',
@@ -288,8 +254,7 @@ module.exports = {
       transitionProperty: {
         DEFAULT:
           'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
-        colors:
-          'color, background-color, border-color, text-decoration-color, fill, stroke',
+        colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
       },
       width: {
         fit: 'fit-content',
@@ -315,7 +280,7 @@ module.exports = {
         '.overflow-y-unset': {
           'overflow-y': 'unset',
         },
-      });
+      })
     }),
   ],
-};
+}

From dcd5758d3640e7092cef2477d02623738220f406 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Thu, 4 Dec 2025 13:53:55 +0800
Subject: [PATCH 19/51] chore: added project filter

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../components/fragments/load-more.vue        |  87 +++++
 .../components/fragments/overview-filter.vue  | 359 ------------------
 .../components/fragments/project-filter.vue   | 134 +++++++
 .../fragments/project-group-filter.vue        | 188 +++++++++
 .../components/sections/overview-filter.vue   |  27 ++
 .../admin/modules/overview/pages/overview.vue |   2 +-
 .../modules/layout/components/menu/menu.vue   |   6 +-
 7 files changed, 440 insertions(+), 363 deletions(-)
 create mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/load-more.vue
 delete mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/overview-filter.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/components/sections/overview-filter.vue

diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/load-more.vue b/frontend/src/modules/admin/modules/overview/components/fragments/load-more.vue
new file mode 100644
index 0000000000..dc67e31c58
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/load-more.vue
@@ -0,0 +1,87 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div
+    ref="loadMore"
+    class="flex flex-row gap-2 items-center justify-center w-full"
+  >
+    <span>
+      <lf-spinner
+        size="16px"
+        class="text-brand-300"
+      />
+    </span>
+    <span class="text-sm text-brand-300 text-sm font-semibold">
+      {{ text }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
+
+const emit = defineEmits<{ (e: 'loadMore'): void }>();
+
+const props = defineProps<{
+  text: string;
+  isFetchingNextPage: boolean;
+}>();
+
+const loadMore = ref(null);
+
+const options = {
+  root: null,
+  rootMargin: '0px',
+  threshold: 0,
+};
+
+const handleIntersectCallback = (entries: IntersectionObserverEntry[]) => {
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      emit('loadMore');
+    }
+  });
+};
+
+const isLoadMoreVisible = () => {
+  if (!loadMore.value) {
+    return false;
+  }
+
+  return isElementVisible(loadMore.value as HTMLElement);
+};
+
+const isElementVisible = (element: HTMLElement) => {
+  const rect = element.getBoundingClientRect();
+  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+  return rect.top >= 0 && rect.bottom <= windowHeight;
+};
+
+onMounted(() => {
+  if (loadMore.value) {
+    const observer = new IntersectionObserver(handleIntersectCallback, options);
+    observer.observe(loadMore.value);
+  }
+});
+
+watch(
+  () => props.isFetchingNextPage,
+  (newVal: boolean) => {
+    if (!newVal) {
+      // check if the load more is visible
+      if (isLoadMoreVisible()) {
+        emit('loadMore');
+      }
+    }
+  },
+);
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfLoadMore',
+};
+</script>
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/overview-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/overview-filter.vue
deleted file mode 100644
index 60a435389a..0000000000
--- a/frontend/src/modules/admin/modules/overview/components/fragments/overview-filter.vue
+++ /dev/null
@@ -1,359 +0,0 @@
-<template>
-  <!-- <el-popover
-    v-model:visible="isPopoverVisible"
-    placement="bottom-start"
-    trigger="click"
-    popper-class="project-groups-select-popper"
-    :teleported="false"
-    width="255px"
-  >
-    <template #reference>
-      <el-input
-        v-model="model"
-        class="project-groups-select-input"
-        placeholder="Select project group..."
-        readonly
-        :suffix-icon="isPopoverVisible ? ArrowUpIcon : ArrowDownIcon"
-      />
-    </template>
-
-    <div
-      v-if="isSearchVisible"
-      class="border-b border-gray-100 px-1 w-full sticky top-0 bg-white"
-    >
-      <el-input
-        id="filterSearch"
-        v-model="searchQuery"
-        placeholder="Search..."
-        class="filter-dropdown-search"
-        :prefix-icon="SearchIcon"
-        clearable
-      />
-    </div>
-
-    <div>
-      <div
-        v-if="isPending"
-        class="text-gray-400 px-3 h-20 flex items-center justify-center"
-      >
-        <lf-icon
-          name="circle-notch"
-          class="animate-spin text-gray-400"
-          :size="16"
-        />
-        <span class="text-tiny ml-1 text-gray-400">
-          Loading project groups...
-        </span>
-      </div>
-      <div
-        v-else-if="projectGroupsList.length"
-        class="flex flex-col gap-1 overflow-auto p-2"
-      >
-        <div
-          v-for="projectGroup of projectGroupsList"
-          :key="projectGroup.id"
-          class="py-1.5 px-2 hover:bg-gray-50 rounded cursor-pointer"
-          :class="{
-            'bg-primary-50': projectGroup.id === selectedProjectGroup?.id,
-          }"
-          @click="onOptionClick(projectGroup)"
-        >
-          <div class="flex gap-0.5 items-start truncate">
-            <div class="block truncate mr-2">
-              <div class="text-small leading-5 text-gray-900 truncate">
-                {{ projectGroup.name }}
-              </div>
-              <div class="text-tiny text-gray-400">
-                {{ pluralize("project", projectGroup.projects.length, true) }}
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          v-if="isFetchingNextPage"
-          class="text-gray-400 px-3 h-20 flex items-center justify-center"
-        >
-          <lf-icon
-            name="circle-notch"
-            class="animate-spin text-gray-400"
-            :size="16"
-          />
-          <span class="text-tiny ml-1 text-gray-400">
-            Loading project groups...
-          </span>
-        </div>
-      </div>
-      <div
-        v-else
-        class="text-gray-400 px-3 h-20 flex items-center justify-center"
-      >
-        <span class="text-tiny text-gray-400"> No project groups found </span>
-      </div>
-    </div>
-  </el-popover> -->
-
-  <lfx-dropdown-select
-    v-model="selectedProjectGroup"
-    width="255px"
-    match-width="false"
-    dropdown-class="max-h-80"
-    placement="bottom-end"
-  >
-    <template #trigger="{ selectedOption }">
-      <lfx-dropdown-selector
-        size="medium"
-        type="transparent"
-        class="!rounded-full flex items-center justify-center w-full"
-      >
-        <div class="flex items-center gap-2">
-          <lf-icon
-            name="rectangle-history"
-            :size="16"
-          />
-          <span class="text-sm text-neutral-900 truncate">
-            {{ selectedOption.label || 'All collections' }}
-          </span>
-        </div>
-      </lfx-dropdown-selector>
-    </template>
-
-    <template #default>
-      <div class="sticky -top-1 z-10 bg-white w-full -mt-1 pt-1 flex flex-col gap-1">
-        <!-- All collections option -->
-        <lfx-dropdown-item
-          value="all"
-          label="All collections"
-        />
-
-        <lfx-dropdown-separator />
-
-        <!-- Search input -->
-        <lfx-dropdown-search
-          v-model="searchQuery"
-          placeholder="Search collections..."
-          lazy
-          class=""
-        />
-
-        <lfx-dropdown-separator />
-      </div>
-
-      <!-- Collections list -->
-      <div
-        v-if="isPending"
-        class="py-8 flex justify-center"
-      >
-        <lf-spinner />
-      </div>
-
-      <!-- <div
-        v-else-if="!collections.length && searchQuery"
-        class="py-4 px-3 text-sm text-neutral-500 text-center"
-      >
-        No collections found
-      </div> -->
-
-      <template v-else>
-        <lfx-dropdown-item
-          v-for="projectGroup in projectGroupsList"
-          :key="projectGroup.id"
-          :value="projectGroup.id"
-          :label="projectGroup.name"
-        />
-      </template>
-    </template>
-  </lfx-dropdown-select>
-</template>
-
-<script setup lang="ts">
-import {
-  h, ref, onMounted, computed, nextTick, watch,
-  onBeforeUnmount,
-} from 'vue';
-import { storeToRefs } from 'pinia';
-import { useLfSegmentsStore } from '@/modules/lf/segments/store';
-import pluralize from 'pluralize';
-import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
-import {
-  EventType,
-  FeatureEventKey,
-} from '@/shared/modules/monitoring/types/event';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
-import { QueryFunction, useInfiniteQuery } from '@tanstack/vue-query';
-import { Pagination } from '@/shared/types/Pagination';
-import { TanstackKey } from '@/shared/types/tanstack';
-import { useDebounce } from '@vueuse/core';
-
-import { ToastStore } from '@/shared/message/notification';
-import { segmentService } from '@/modules/lf/segments/segments.service';
-import { ProjectGroup } from '@/modules/lf/segments/types/Segments';
-import LfxDropdownSelect from '@/ui-kit/lfx/dropdown/dropdown-select.vue';
-import LfxDropdownSelector from '@/ui-kit/lfx/dropdown/dropdown-selector.vue';
-import LfxDropdownItem from '@/ui-kit/lfx/dropdown/dropdown-item.vue';
-import LfxDropdownSeparator from '@/ui-kit/lfx/dropdown/dropdown-separator.vue';
-import LfxDropdownSearch from '@/ui-kit/lfx/dropdown/dropdown-search.vue';
-import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
-
-const SearchIcon = h(
-  'i', // type
-  { class: 'fa-light fa-magnifying-glass c-icon' }, // props
-  [],
-);
-
-const ArrowDownIcon = h(
-  'i', // type
-  { class: 'fa-light fa-chevron-down c-icon' }, // props
-  [],
-);
-
-const ArrowUpIcon = h(
-  'i', // type
-  { class: 'fa-light fa-chevron-up c-icon' }, // props
-  [],
-);
-
-const lsSegmentsStore = useLfSegmentsStore();
-const { selectedProjectGroup } = storeToRefs(lsSegmentsStore);
-const { updateSelectedProjectGroup } = lsSegmentsStore;
-
-const searchQuery = ref('');
-const isPopoverVisible = ref(false);
-const searchValue = useDebounce(searchQuery, 300);
-const isSearchVisible = computed(() => projectGroupsList.value.length > 5 || searchQuery.value.length > 0);
-
-let scrollContainer: HTMLElement | null = null;
-
-const { trackEvent } = useProductTracking();
-
-const model = computed({
-  get() {
-    return selectedProjectGroup.value?.name;
-  },
-  set(id) {
-    updateSelectedProjectGroup(id);
-  },
-});
-
-const queryKey = computed(() => [
-  TanstackKey.ADMIN_PROJECT_GROUPS,
-  searchValue.value,
-]);
-
-const projectGroupsQueryFn = segmentService.queryProjectGroups(() => ({
-  limit: 20,
-  offset: 0,
-  filter: {
-    name: searchQuery.value,
-  },
-})) as QueryFunction<Pagination<ProjectGroup>, readonly unknown[], unknown>;
-
-const {
-  data,
-  isPending,
-  isFetchingNextPage,
-  fetchNextPage,
-  hasNextPage,
-  isSuccess,
-  error,
-} = useInfiniteQuery<Pagination<ProjectGroup>, Error>({
-  queryKey,
-  queryFn: projectGroupsQueryFn,
-  getNextPageParam: (lastPage) => {
-    const nextPage = lastPage.offset + lastPage.limit;
-    const totalRows = lastPage.count;
-    return nextPage < totalRows ? nextPage : undefined;
-  },
-  initialPageParam: 0,
-});
-
-const projectGroupsList = computed((): ProjectGroup[] => {
-  if (isSuccess.value && data.value) {
-    return data.value.pages.reduce(
-      (acc, page) => acc.concat(page.rows),
-      [] as ProjectGroup[],
-    );
-  }
-  return [];
-});
-
-// Infinite scroll handler
-function onScroll(e: Event) {
-  if (!scrollContainer) return;
-  const threshold = 40;
-
-  const target = e.target as HTMLElement;
-  if (
-    !isFetchingNextPage.value
-    && hasNextPage.value
-    && target.scrollHeight - target.scrollTop - target.clientHeight < threshold
-  ) {
-    fetchNextPage();
-  }
-}
-
-watch(error, (err) => {
-  if (err) {
-    ToastStore.error('Something went wrong while fetching project groups');
-  }
-});
-
-onMounted(() => {
-  nextTick(() => {
-    scrollContainer = document.querySelector(
-      '.project-groups-select-popper',
-    );
-    if (scrollContainer) {
-      scrollContainer.addEventListener('scroll', onScroll);
-    }
-  });
-});
-
-const onOptionClick = ({ id, name }: ProjectGroup) => {
-  // trackEvent({
-  //   key: FeatureEventKey.SELECT_PROJECT_GROUP,
-  //   type: EventType.FEATURE,
-  //   properties: {
-  //     projectGroupId: id,
-  //     projectName: name,
-  //   },
-  // });
-
-  isPopoverVisible.value = false;
-  // updateSelectedProjectGroup(id);
-};
-
-onBeforeUnmount(() => {
-  if (scrollContainer) {
-    scrollContainer.removeEventListener('scroll', onScroll);
-  }
-});
-</script>
-
-<script lang="ts">
-export default {
-  name: 'AppLfOverviewFilter',
-};
-</script>
-
-<style lang="scss">
-.project-groups-select-popper.el-popper {
-  max-width: 236px;
-  max-height: 480px;
-  overflow: auto;
-  @apply p-0;
-}
-
-.project-groups-select-input {
-  @apply cursor-pointer relative w-full;
-  height: 32px !important;
-
-  .el-input__wrapper {
-    @apply rounded;
-    @apply h-8 px-3;
-  }
-
-  .el-input__inner {
-    @apply cursor-pointer text-xs truncate pr-6;
-  }
-}
-</style>
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
new file mode 100644
index 0000000000..ab835501f4
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
@@ -0,0 +1,134 @@
+<template>
+  <lfx-dropdown-select
+    v-model="selectedProject"
+    width="255px"
+    match-width="false"
+    dropdown-class="max-h-80"
+    placement="bottom-end"
+  >
+    <template #trigger="{ selectedOption }">
+      <lfx-dropdown-selector
+        size="medium"
+        type="filled"
+        class="flex items-center justify-center w-full !rounded-l-none"
+        :class="{
+          '!rounded-r-none': selectedProject,
+        }"
+      >
+        <div class="flex items-center gap-2">
+          <lf-icon
+            name="folder-tree"
+            :size="16"
+          />
+          <span class="text-sm text-neutral-900 truncate">
+            {{ trimDisplay(selectedOption?.value?.name || '') || 'All projects' }}
+          </span>
+        </div>
+      </lfx-dropdown-selector>
+    </template>
+
+    <template #default>
+      <div class="sticky -top-1 z-10 bg-white w-full -mt-1 pt-1 flex flex-col gap-1">
+        <!-- All projects option -->
+        <lfx-dropdown-item
+          value="all"
+          label="All projects"
+          :selected="!selectedProject"
+          @click="selectedProject = null"
+          :class="{
+            '!bg-blue-50': !selectedProject,
+          }"
+        />
+
+        <lfx-dropdown-separator />
+
+        <!-- Search input -->
+        <lfx-dropdown-search
+          v-model="searchQuery"
+          placeholder="Search projects..."
+          lazy
+          class=""
+        />
+
+        <lfx-dropdown-separator />
+      </div>
+
+      <!-- Projects list -->
+      <div
+        v-if="!projectsList.length && searchQuery"
+        class="py-4 px-3 text-sm text-neutral-500 text-center"
+      >
+        No projects found
+      </div>
+
+      <template v-else>
+        <lfx-dropdown-item
+          v-for="project in projectsList"
+          :key="project.id"
+          :value="project.id"
+          :label="project.name"
+          :selected="selectedProject?.id === project.id"
+          @click="selectProject(project.id)"
+          :class="{
+            '!bg-blue-50': selectedProject?.id === project.id,
+          }"
+        />
+      </template>
+    </template>
+  </lfx-dropdown-select>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+} from 'vue';
+import { storeToRefs } from 'pinia';
+import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { useDebounce } from '@vueuse/core';
+
+import { Project } from '@/modules/lf/segments/types/Segments';
+import LfxDropdownSelect from '@/ui-kit/lfx/dropdown/dropdown-select.vue';
+import LfxDropdownSelector from '@/ui-kit/lfx/dropdown/dropdown-selector.vue';
+import LfxDropdownItem from '@/ui-kit/lfx/dropdown/dropdown-item.vue';
+import LfxDropdownSeparator from '@/ui-kit/lfx/dropdown/dropdown-separator.vue';
+import LfxDropdownSearch from '@/ui-kit/lfx/dropdown/dropdown-search.vue';
+
+const overviewStore = useOverviewStore();
+const { selectedProject } = storeToRefs(overviewStore);
+
+const searchQuery = ref('');
+const searchValue = useDebounce(searchQuery, 300);
+
+const props = defineProps<{
+  projects: Project[];
+}>();
+
+const trimDisplay = (name: string) => {
+  return name.length > 20 ? `${name.slice(0, 20)}...` : name;
+};
+
+const selectProject = (projectId: string) => {
+  const project = props.projects.find(p => p.id === projectId);
+  selectedProject.value = project || null;
+};
+
+const projectsList = computed(() => {
+  const filtered = props.projects.filter((project) => {
+    if (!searchValue.value) return true;
+    return project.name.toLowerCase().includes(searchValue.value.toLowerCase());
+  });
+  
+  return filtered.map((project) => ({
+    id: project.id,
+    name: project.name,
+  }));
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfProjectFilter',
+};
+</script>
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue
new file mode 100644
index 0000000000..9abcc37759
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue
@@ -0,0 +1,188 @@
+<template>
+  <lfx-dropdown-select
+    v-model="selectedProjectGroup"
+    width="255px"
+    match-width="false"
+    dropdown-class="max-h-80"
+    placement="bottom-end"
+  >
+    <template #trigger="{ selectedOption }">
+      <lfx-dropdown-selector
+        size="medium"
+        type="filled"
+        class="flex items-center justify-center w-full"
+        :class="{
+          '!rounded-r-none': selectedProjectGroup,
+        }"
+      >
+        <div class="flex items-center gap-2">
+          <lf-icon
+            name="folder-tree"
+            :size="16"
+          />
+          <span class="text-sm text-neutral-900 truncate">
+            {{ trimDisplay(selectedOption?.value?.name || '') || 'All project groups' }}
+          </span>
+        </div>
+      </lfx-dropdown-selector>
+    </template>
+
+    <template #default>
+      <div class="sticky -top-1 z-10 bg-white w-full -mt-1 pt-1 flex flex-col gap-1">
+        <!-- All project groups option -->
+        <lfx-dropdown-item
+          value="all"
+          label="All project groups"
+          :selected="!selectedProjectGroup"
+          @click="selectedProjectGroup = null"
+          :class="{
+            '!bg-blue-50': !selectedProjectGroup,
+          }"
+        />
+
+        <lfx-dropdown-separator />
+
+        <!-- Search input -->
+        <lfx-dropdown-search
+          v-model="searchQuery"
+          placeholder="Search project groups..."
+          lazy
+          class=""
+        />
+
+        <lfx-dropdown-separator />
+      </div>
+
+      <!-- Project groups list -->
+      <div
+        v-if="isPending"
+        class="py-8 flex justify-center"
+      >
+        <lf-spinner />
+      </div>
+
+      <div
+        v-else-if="!projectGroupsList.length && searchQuery"
+        class="py-4 px-3 text-sm text-neutral-500 text-center"
+      >
+        No project groups found
+      </div>
+
+      <template v-else>
+        <lfx-dropdown-item
+          v-for="projectGroup in projectGroupsList"
+          :key="projectGroup.id"
+          :value="projectGroup.id"
+          :label="projectGroup.name"
+          :selected="selectedProjectGroup?.id === projectGroup.id"
+          @click="selectedProjectGroup = projectGroup"
+          :class="{
+            '!bg-blue-50': selectedProjectGroup?.id === projectGroup.id,
+          }"
+        />
+      </template>
+
+      <div
+        v-if="isFetchingNextPage"
+        class="py-8 flex justify-center"
+      >
+        <lf-spinner />
+      </div>
+
+      <app-lf-load-more
+        v-if="!isFetchingNextPage && hasNextPage"
+        :is-fetching-next-page="isFetchingNextPage"
+        text="Loading more project groups..."
+        @load-more="fetchNextPage"
+      />
+    </template>
+  </lfx-dropdown-select>
+</template>
+
+<script setup lang="ts">
+import {
+  ref, computed, watch,
+} from 'vue';
+import { storeToRefs } from 'pinia';
+import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { QueryFunction, useInfiniteQuery } from '@tanstack/vue-query';
+import { Pagination } from '@/shared/types/Pagination';
+import { TanstackKey } from '@/shared/types/tanstack';
+import { useDebounce } from '@vueuse/core';
+
+import { ToastStore } from '@/shared/message/notification';
+import { segmentService } from '@/modules/lf/segments/segments.service';
+import { ProjectGroup } from '@/modules/lf/segments/types/Segments';
+import LfxDropdownSelect from '@/ui-kit/lfx/dropdown/dropdown-select.vue';
+import LfxDropdownSelector from '@/ui-kit/lfx/dropdown/dropdown-selector.vue';
+import LfxDropdownItem from '@/ui-kit/lfx/dropdown/dropdown-item.vue';
+import LfxDropdownSeparator from '@/ui-kit/lfx/dropdown/dropdown-separator.vue';
+import LfxDropdownSearch from '@/ui-kit/lfx/dropdown/dropdown-search.vue';
+import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
+import AppLfLoadMore from './load-more.vue';
+
+const overviewStore = useOverviewStore();
+const { selectedProjectGroup } = storeToRefs(overviewStore);
+
+const searchQuery = ref('');
+const searchValue = useDebounce(searchQuery, 300);
+
+const queryKey = computed(() => [
+  TanstackKey.ADMIN_PROJECT_GROUPS,
+  searchValue.value,
+]);
+
+const projectGroupsQueryFn = segmentService.queryProjectGroups(() => ({
+  limit: 20,
+  offset: 0,
+  filter: {
+    name: searchQuery.value,
+  },
+})) as QueryFunction<Pagination<ProjectGroup>, readonly unknown[], unknown>;
+
+const {
+  data,
+  isPending,
+  isFetchingNextPage,
+  fetchNextPage,
+  hasNextPage,
+  isSuccess,
+  error,
+} = useInfiniteQuery<Pagination<ProjectGroup>, Error>({
+  queryKey,
+  queryFn: projectGroupsQueryFn,
+  getNextPageParam: (lastPage) => {
+    const nextPage = lastPage.offset + lastPage.limit;
+    const totalRows = lastPage.count;
+    return nextPage < totalRows ? nextPage : undefined;
+  },
+  initialPageParam: 0,
+});
+
+const projectGroupsList = computed((): ProjectGroup[] => {
+  if (isSuccess.value && data.value) {
+    return data.value.pages.reduce(
+      (acc, page) => acc.concat(page.rows),
+      [] as ProjectGroup[],
+    );
+  }
+  return [];
+});
+
+const trimDisplay = (name: string) => {
+  return name.length > 20 ? `${name.slice(0, 20)}...` : name;
+};
+
+watch(error, (err) => {
+  if (err) {
+    ToastStore.error('Something went wrong while fetching project groups');
+  }
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfProjectGroupFilter',
+};
+</script>
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/overview-filter.vue b/frontend/src/modules/admin/modules/overview/components/sections/overview-filter.vue
new file mode 100644
index 0000000000..95df6f6bb5
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/sections/overview-filter.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="flex items-center">
+    <app-lf-project-group-filter />
+    <app-lf-project-filter :projects="projects" v-if="selectedProjectGroup && projects.length > 0" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import AppLfProjectGroupFilter from '../fragments/project-group-filter.vue';
+import AppLfProjectFilter from '../fragments/project-filter.vue';
+import { useOverviewStore } from '../../store/overview.store';
+import { storeToRefs } from 'pinia';
+
+const overviewStore = useOverviewStore();
+const { selectedProjectGroup } = storeToRefs(overviewStore);
+
+const projects = computed(() => {
+  return selectedProjectGroup.value?.projects || [];
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfOverviewFilter',
+};
+</script>
diff --git a/frontend/src/modules/admin/modules/overview/pages/overview.vue b/frontend/src/modules/admin/modules/overview/pages/overview.vue
index 73de99f8b8..d436144264 100644
--- a/frontend/src/modules/admin/modules/overview/pages/overview.vue
+++ b/frontend/src/modules/admin/modules/overview/pages/overview.vue
@@ -18,7 +18,7 @@
 import AppLfOverviewSummary from '@/modules/admin/modules/overview/components/sections/summary.vue';
 import AppLfOverviewIntegrationStatus from '@/modules/admin/modules/overview/components/sections/integration-status.vue';
 import AppLfOverviewIntegrationDetails from '@/modules/admin/modules/overview/components/sections/integration-details.vue';
-import AppLfOverviewFilter from '@/modules/admin/modules/overview/components/fragments/overview-filter.vue';
+import AppLfOverviewFilter from '@/modules/admin/modules/overview/components/sections/overview-filter.vue';
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/modules/layout/components/menu/menu.vue b/frontend/src/modules/layout/components/menu/menu.vue
index ac73f166a3..e1d01b47ae 100644
--- a/frontend/src/modules/layout/components/menu/menu.vue
+++ b/frontend/src/modules/layout/components/menu/menu.vue
@@ -4,10 +4,10 @@
     :class="isCollapsed ? 'w-16 min-w-16' : 'w-65 min-w-65'"
   >
     <lf-menu-link
-      title="All project groups"
-      icon="folders"
+      title="Overview"
+      icon="gauge-high"
       :is-collapsed="isCollapsed"
-      :to="{ path: '/project-groups' }"
+      :to="{ path: '/overview' }"
     />
     <div class="px-3 py-4">
       <app-lf-menu-project-group-selection

From 2e54ebb5cfe4da2be8d0fc9427ed5d960c4bd03d Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Thu, 4 Dec 2025 14:20:54 +0800
Subject: [PATCH 20/51] chore: added integration status section

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../fragments/integrations-filter.vue         | 108 +++++++++++++++++
 .../components/fragments/project-filter.vue   |   2 +-
 .../sections/integration-status.vue           | 112 +++++++++++++++++-
 .../modules/overview/store/overview.store.ts  |   2 +
 frontend/src/ui-kit/index.scss                |   2 +-
 frontend/src/ui-kit/lfx/chip/chip.scss        |  33 ++++++
 frontend/src/ui-kit/lfx/chip/chip.vue         |  50 ++++++++
 .../src/ui-kit/lfx/chip/types/chip.types.ts   |   6 +
 8 files changed, 311 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue
 create mode 100644 frontend/src/ui-kit/lfx/chip/chip.scss
 create mode 100644 frontend/src/ui-kit/lfx/chip/chip.vue
 create mode 100644 frontend/src/ui-kit/lfx/chip/types/chip.types.ts

diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue
new file mode 100644
index 0000000000..5958594850
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue
@@ -0,0 +1,108 @@
+<template>
+  <lfx-dropdown-select
+    v-model="selectedIntegrationId"
+    width="200px"
+    :match-width="false"
+    dropdown-class="max-h-80"
+    placement="bottom-end"
+  >
+    <template #trigger>
+      <lfx-dropdown-selector
+        size="medium"
+        type="filled"
+      >
+        <div class="flex items-center gap-1.5">
+          <lf-icon
+            name="grid-round-2"
+            :size="20"
+          />
+          <span class="text-sm text-neutral-900 font-semibold">
+            {{ selectedIntegration?.name || 'All integrations' }}
+          </span>
+          <lf-icon
+            name="angle-down"
+            :size="16"
+            class="text-neutral-400"
+          />
+        </div>
+      </lfx-dropdown-selector>
+    </template>
+
+    <template #default>
+      <div class="sticky -top-1 z-10 bg-white w-full -mt-1 pt-1 flex flex-col gap-1">
+        <!-- All integrations option -->
+        <lfx-dropdown-item
+          value="all"
+          label="All integrations"
+          @click="selectedIntegrationId = 'all'"
+          :selected="selectedIntegrationId === 'all'"
+          :class="{
+            '!bg-blue-50': selectedIntegrationId === 'all',
+          }"
+        />
+      </div>
+
+      <lfx-dropdown-item
+        v-for="integration in integrations"
+        :key="integration.id"
+        :value="integration.id"
+        :label="integration.name"
+        @click="selectIntegration(integration.id)"
+        :selected="selectedIntegrationId === integration.id"
+        :class="{
+          '!bg-blue-50': selectedIntegrationId === integration.id,
+        }"
+      />
+    </template>
+  </lfx-dropdown-select>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+} from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import LfxDropdownSelect from '@/ui-kit/lfx/dropdown/dropdown-select.vue';
+import LfxDropdownSelector from '@/ui-kit/lfx/dropdown/dropdown-selector.vue';
+import LfxDropdownItem from '@/ui-kit/lfx/dropdown/dropdown-item.vue';
+import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
+import { storeToRefs } from 'pinia';
+
+const overviewStore = useOverviewStore();
+const { selectedIntegrationId } = storeToRefs(overviewStore);
+
+interface Integration {
+  id: string;
+  name: string;
+}
+
+const props = defineProps<{
+  integrations: Integration[];
+}>();
+
+// Mock data for integrations (can be replaced with props.integrations)
+const mockIntegrations: Integration[] = [
+  { id: 'github', name: 'GitHub' },
+  { id: 'slack', name: 'Slack' },
+  { id: 'discord', name: 'Discord' },
+  { id: 'linkedin', name: 'LinkedIn' },
+  { id: 'twitter', name: 'Twitter' },
+];
+
+const selectIntegration = (integrationId: string) => {
+  selectedIntegrationId.value = integrationId;
+};
+
+const selectedIntegration = computed(() => {
+  if (selectedIntegrationId.value === 'all') return null;
+  const integrations = props.integrations || mockIntegrations;
+  return integrations.find(i => i.id === selectedIntegrationId.value) || null;
+});
+
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfIntegrationsFilter',
+};
+</script>
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
index ab835501f4..3a51c3585f 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
@@ -17,7 +17,7 @@
       >
         <div class="flex items-center gap-2">
           <lf-icon
-            name="folder-tree"
+            name="folders"
             :size="16"
           />
           <span class="text-sm text-neutral-900 truncate">
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
index 714ace7613..c3e677f062 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
@@ -1,10 +1,118 @@
 <template>
-  <div>
-    show integration status cards here
+  <div class="flex flex-col gap-8 w-full">
+    <!-- Header with title and dropdown -->
+    <div class="flex items-center justify-between w-full">
+      <div class="flex items-center">
+        <h2 class="text-xl font-semibold text-black font-primary">
+          Integration status
+        </h2>
+      </div>
+      <div class="flex items-center">
+        <integrations-filter
+          ref="integrationsFilterRef"
+          :integrations="mockIntegrations"
+        />
+      </div>
+    </div>
+
+    <!-- Status chips -->
+    <div class="flex gap-3 items-start">
+      <lfx-chip
+        v-for="status in statusChips"
+        :key="status.key"
+        type="bordered"
+        size="default"
+      >
+        <lf-icon
+          v-if="status.icon"
+          :name="status.icon"
+          :size="15"
+          :class="status.iconClass"
+        />
+        <span class="text-sm text-neutral-900 font-normal">
+          {{ status.label }}
+        </span>
+        <span class="text-sm text-neutral-900 font-semibold">
+          {{ status.count }}
+        </span>
+      </lfx-chip>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import {
+  ref,
+  computed,
+} from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import LfxChip from '@/ui-kit/lfx/chip/chip.vue';
+import IntegrationsFilter from '@/modules/admin/modules/overview/components/fragments/integrations-filter.vue';
+import { lfIntegrationStatusesTabs } from '@/modules/admin/modules/integration/config/status';
+
+interface Integration {
+  id: string;
+  name: string;
+}
+
+// Mock data for integrations
+const mockIntegrations: Integration[] = [
+  { id: 'github', name: 'GitHub' },
+  { id: 'slack', name: 'Slack' },
+  { id: 'discord', name: 'Discord' },
+  { id: 'linkedin', name: 'LinkedIn' },
+  { id: 'twitter', name: 'Twitter' },
+];
+
+// Mock data for status counts
+const mockStatusCounts = {
+  done: 240,
+  connecting: 4,
+  waitingForAction: 2,
+  error: 1,
+  notConnected: 126,
+};
+
+const integrationsFilterRef = ref();
+
+const statusChips = computed(() => {
+  return Object.entries(lfIntegrationStatusesTabs).map(([key, config]) => {
+    let iconClass = 'shrink-0';
+    let icon = '';
+
+    // Map status to icons and colors based on the design
+    switch (key) {
+      case 'done':
+        iconClass += ' text-green-500';
+        icon = 'check-circle';
+        break;
+      case 'connecting':
+        iconClass += ' text-blue-500';
+        icon = 'clock';
+        break;
+      case 'waitingForAction':
+        iconClass += ' text-orange-500';
+        icon = 'triangle-exclamation';
+        break;
+      case 'error':
+        iconClass += ' text-red-600';
+        icon = 'circle-exclamation';
+        break;
+      case 'notConnected':
+        iconClass += ' text-neutral-900';
+        icon = 'link-simple-slash';
+        break;
+    }
+
+    return {
+      key,
+      label: config.tabs.text,
+      count: mockStatusCounts[key as keyof typeof mockStatusCounts] || 0,
+      icon,
+      iconClass,
+    };
+  });
+});
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/modules/admin/modules/overview/store/overview.store.ts b/frontend/src/modules/admin/modules/overview/store/overview.store.ts
index e3270bc786..08dba74073 100644
--- a/frontend/src/modules/admin/modules/overview/store/overview.store.ts
+++ b/frontend/src/modules/admin/modules/overview/store/overview.store.ts
@@ -5,9 +5,11 @@ import { Project, ProjectGroup } from '@/modules/lf/segments/types/Segments'
 export const useOverviewStore = defineStore('overview', () => {
   const selectedProjectGroup = ref<ProjectGroup | null>(null)
   const selectedProject = ref<Project | null>(null)
+  const selectedIntegrationId = ref<string | null>(null)
 
   return {
     selectedProjectGroup,
     selectedProject,
+    selectedIntegrationId,
   }
 })
diff --git a/frontend/src/ui-kit/index.scss b/frontend/src/ui-kit/index.scss
index 400823aa34..db438da436 100644
--- a/frontend/src/ui-kit/index.scss
+++ b/frontend/src/ui-kit/index.scss
@@ -24,4 +24,4 @@
 @import 'tag/tag';
 @import 'lfx/dropdown/dropdown';
 @import 'lfx/popover/popover';
-
+@import 'lfx/chip/chip';
diff --git a/frontend/src/ui-kit/lfx/chip/chip.scss b/frontend/src/ui-kit/lfx/chip/chip.scss
new file mode 100644
index 0000000000..6b357aa1e4
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/chip/chip.scss
@@ -0,0 +1,33 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+.p-chip {
+  @apply inline-flex items-center gap-1.5 text-sm rounded-full px-2.5 text-neutral-900 h-7;
+
+  .c-icon {
+    @apply text-base;
+  }
+
+  .p-chip-remove-icon {
+    @apply text-base cursor-pointer text-neutral-300;
+  }
+
+  &-size-small {
+    @apply text-xs h-6;
+
+    .c-icon {
+      @apply text-sm;
+    }
+
+    .p-chip-remove-icon {
+      @apply text-sm;
+    }
+  }
+
+  &-type-bordered {
+    @apply bg-white border border-solid border-neutral-200;
+  }
+
+  &-type-default {
+    @apply bg-neutral-100 border-0;
+  }
+}
diff --git a/frontend/src/ui-kit/lfx/chip/chip.vue b/frontend/src/ui-kit/lfx/chip/chip.vue
new file mode 100644
index 0000000000..c0628fa3c5
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/chip/chip.vue
@@ -0,0 +1,50 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div
+    v-if="isVisible"
+    :class="`p-chip p-chip-size-${props.size} p-chip-type-${props.type}`"
+    role="alert"
+  >
+    <slot />
+    <i
+      v-if="props.removable"
+      class="p-chip-remove-icon fa-solid fa-circle-xmark"
+      @click="dismiss"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { ChipSize, ChipType } from './types/chip.types';
+
+const props = withDefaults(
+  defineProps<{
+    size?: ChipSize;
+    type?: ChipType;
+    removable?: boolean;
+  }>(),
+  {
+    type: 'default',
+    size: 'default',
+    removable: false,
+  },
+);
+const emit = defineEmits<{ (e: 'dismissed'): void }>();
+
+const isVisible = ref(true);
+
+const dismiss = () => {
+  isVisible.value = false;
+  emit('dismissed');
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxChip',
+};
+</script>
diff --git a/frontend/src/ui-kit/lfx/chip/types/chip.types.ts b/frontend/src/ui-kit/lfx/chip/types/chip.types.ts
new file mode 100644
index 0000000000..ab2fc6e994
--- /dev/null
+++ b/frontend/src/ui-kit/lfx/chip/types/chip.types.ts
@@ -0,0 +1,6 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+export const chipSizes = ['small', 'default'] as const;
+export const chipTypes = ['bordered', 'default'] as const;
+export type ChipSize = (typeof chipSizes)[number];
+export type ChipType = (typeof chipTypes)[number];

From 4dc78d7fc298a6831d3006a604eb6aaca23e903b Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Thu, 4 Dec 2025 14:42:47 +0800
Subject: [PATCH 21/51] chore: added integration details with mock data

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../sections/integration-details.vue          | 263 +++++++++++++++++-
 1 file changed, 260 insertions(+), 3 deletions(-)

diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
index 9e36fd84fd..4db28d8f3f 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
@@ -1,14 +1,271 @@
 <template>
-  <div>
-    show integration details here
+  <div class="bg-white border border-gray-200 rounded-lg shadow-sm">
+    <!-- Header -->
+    <div class="border-b border-gray-200 px-5 pt-5 pb-0">
+      <h3 class="text-base font-semibold text-gray-900 mb-6">
+        In progress & troubleshooting
+      </h3>
+      
+      <!-- Tabs -->
+      <el-tabs v-model="activeTab" class="integration-tabs">
+        <el-tab-pane label="In progress (4)" name="in-progress">
+          <template #label>
+            <div class="flex items-center gap-1.5">
+              <lf-icon name="clock" :size="16" class="text-gray-600" />
+              <span>In progress (4)</span>
+            </div>
+          </template>
+        </el-tab-pane>
+        <el-tab-pane label="Action required (2)" name="action-required">
+          <template #label>
+            <div class="flex items-center gap-1.5">
+              <lf-icon name="triangle-exclamation" :size="16" class="text-gray-600" />
+              <span>Action required (2)</span>
+            </div>
+          </template>
+        </el-tab-pane>
+        <el-tab-pane label="Connection failed (1)" name="connection-failed">
+          <template #label>
+            <div class="flex items-center gap-1.5">
+              <lf-icon name="circle-exclamation" :size="16" class="text-gray-600" />
+              <span>Connection failed (1)</span>
+            </div>
+          </template>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <!-- Table Headers -->
+    <div class="flex items-center gap-4 px-5 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wide">
+      <div class="w-40">Integration</div>
+      <div class="flex-1">Project</div>
+      <div class="w-32">Status</div>
+      <div class="w-10"></div>
+    </div>
+
+    <!-- Integration Rows -->
+    <div class="divide-y divide-gray-200">
+      <div 
+        v-for="integration in filteredIntegrations" 
+        :key="integration.id"
+        class="flex items-center gap-4 px-5 py-5"
+      >
+        <!-- Integration Column -->
+        <div class="w-40 flex items-center gap-1.5">
+          <div class="w-4 h-4 flex-shrink-0">
+            <img :src="integration.icon" :alt="integration.platform" class="w-full h-full" />
+          </div>
+          <span class="text-sm font-medium text-gray-900">{{ integration.platform }}</span>
+        </div>
+
+        <!-- Project Column -->
+        <div class="flex-1">
+          <div class="text-sm font-medium text-gray-900">{{ integration.projectName }}</div>
+          <div class="text-xs text-gray-500">{{ integration.projectPath }}</div>
+        </div>
+
+        <!-- Status Column -->
+        <div class="w-32">
+          <div class="flex items-center gap-1.5 mb-1">
+            <lf-icon 
+              :name="integration.status.icon" 
+              :size="16" 
+              :class="integration.status.iconClass"
+            />
+            <span class="text-sm font-medium text-gray-900">{{ integration.status.label }}</span>
+          </div>
+          <div class="text-xs text-gray-500">{{ integration.status.description }}</div>
+        </div>
+
+        <!-- Actions Column -->
+        <div class="w-10">
+          <button class="p-2.5 hover:bg-gray-50 rounded-md">
+            <lf-icon name="ellipsis" :size="16" class="text-gray-900" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="px-5 py-6 flex items-center justify-center gap-4">
+      <span class="text-xs text-gray-400">{{ paginationText }}</span>
+      <button class="text-xs text-primary-500 font-semibold hover:text-primary-600">
+        Load more
+      </button>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref, computed } from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+
+// Mock data for integrations
+const integrations = ref([
+  // In Progress integrations
+  {
+    id: 1,
+    platform: 'GitHub',
+    icon: 'https://www.figma.com/api/mcp/asset/0ab14917-e2ca-446a-8f6c-1dc7c520707e',
+    projectName: 'Academy Software Foundation',
+    projectPath: 'Academy Software Fou... > Academy Software Fou...',
+    status: {
+      label: 'In progress',
+      description: '100 out of 1,000 data streams processed...',
+      icon: 'loader-4-fill',
+      iconClass: 'text-primary-500',
+      type: 'in-progress'
+    }
+  },
+  {
+    id: 2,
+    platform: 'Stack Overflow',
+    icon: 'https://www.figma.com/api/mcp/asset/eca989d0-0cea-45f2-a0fa-463c6ae3ad5d',
+    projectName: 'Asset Repository Working Group',
+    projectPath: 'Academy Software Fou... > Asset Repository Wor...',
+    status: {
+      label: 'In progress',
+      description: '600 data streams being processed...',
+      icon: 'loader-4-fill',
+      iconClass: 'text-primary-500',
+      type: 'in-progress'
+    }
+  },
+  {
+    id: 3,
+    platform: 'Git',
+    icon: 'https://www.figma.com/api/mcp/asset/1efa7655-45c4-41b4-a3ce-3a913f22520d',
+    projectName: 'AcademyMaterialX Software Foundation',
+    projectPath: 'Academy Software Fou... > MaterialX',
+    status: {
+      label: 'In progress',
+      description: '600 data streams being processed...',
+      icon: 'loader-4-fill',
+      iconClass: 'text-primary-500',
+      type: 'in-progress'
+    }
+  },
+  {
+    id: 4,
+    platform: 'GitLab',
+    icon: 'https://www.figma.com/api/mcp/asset/fc824466-7e66-4681-a7fb-588ea1221ff9',
+    projectName: 'OpenAssetIO',
+    projectPath: 'Academy Software Fou... > OpenAssetIO',
+    status: {
+      label: 'In progress',
+      description: '600 data streams being processed...',
+      icon: 'loader-4-fill',
+      iconClass: 'text-primary-500',
+      type: 'in-progress'
+    }
+  },
+  // Action Required integrations
+  {
+    id: 5,
+    platform: 'Slack',
+    icon: 'https://www.figma.com/api/mcp/asset/0ab14917-e2ca-446a-8f6c-1dc7c520707e',
+    projectName: 'Community Management',
+    projectPath: 'Academy Software Fou... > Community',
+    status: {
+      label: 'Action required',
+      description: 'API key expired, please update credentials',
+      icon: 'triangle-exclamation',
+      iconClass: 'text-yellow-500',
+      type: 'action-required'
+    }
+  },
+  {
+    id: 6,
+    platform: 'Discord',
+    icon: 'https://www.figma.com/api/mcp/asset/eca989d0-0cea-45f2-a0fa-463c6ae3ad5d',
+    projectName: 'Developer Relations',
+    projectPath: 'Academy Software Fou... > DevRel',
+    status: {
+      label: 'Action required',
+      description: 'Permission denied, check bot permissions',
+      icon: 'triangle-exclamation',
+      iconClass: 'text-yellow-500',
+      type: 'action-required'
+    }
+  },
+  // Connection Failed integrations
+  {
+    id: 7,
+    platform: 'Jira',
+    icon: 'https://www.figma.com/api/mcp/asset/1efa7655-45c4-41b4-a3ce-3a913f22520d',
+    projectName: 'Project Management',
+    projectPath: 'Academy Software Fou... > PM',
+    status: {
+      label: 'Connection failed',
+      description: 'Unable to connect to server',
+      icon: 'circle-exclamation',
+      iconClass: 'text-red-500',
+      type: 'connection-failed'
+    }
+  }
+]);
+
+const activeTab = ref('in-progress');
+
+const filteredIntegrations = computed(() => {
+  return integrations.value.filter(integration => {
+    switch (activeTab.value) {
+      case 'in-progress':
+        return integration.status.type === 'in-progress';
+      case 'action-required':
+        return integration.status.type === 'action-required';
+      case 'connection-failed':
+        return integration.status.type === 'connection-failed';
+      default:
+        return true;
+    }
+  });
+});
+
+const paginationText = computed(() => {
+  const total = 120;
+  const showing = filteredIntegrations.value.length;
+  return `${showing} out of ${total} integrations`;
+});
 </script>
 
 <script lang="ts">
 export default {
   name: 'AppLfOverviewIntegrationDetails',
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.integration-tabs :deep(.el-tabs__header) {
+  margin: 0;
+  border: none;
+}
+
+.integration-tabs :deep(.el-tabs__nav-wrap::after) {
+  height: 1px;
+  background-color: #e5e7eb;
+}
+
+.integration-tabs :deep(.el-tabs__item) {
+  padding: 0 0 16px 0;
+  margin-right: 24px;
+  font-weight: 500;
+  font-size: 14px;
+  color: #6b7280;
+  border: none;
+}
+
+.integration-tabs :deep(.el-tabs__item.is-active) {
+  color: #0f172a;
+  font-weight: 500;
+}
+
+.integration-tabs :deep(.el-tabs__active-bar) {
+  background-color: #0094ff;
+  height: 2px;
+}
+
+.integration-tabs :deep(.el-tabs__item:hover) {
+  color: #0094ff;
+}
+</style>
\ No newline at end of file

From df239fb8be245617f9e95346e13e281d14b56dfb Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Fri, 5 Dec 2025 15:31:46 +0800
Subject: [PATCH 22/51] chore: changed integration row display to match
 integration page

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../pages/integration-status.page.vue         |   1 +
 .../components/fragments/integration-row.vue  | 103 ++++++++
 .../components/fragments/integration-tabs.vue |  52 ++++
 .../components/fragments/status-display.vue   |  29 +++
 .../sections/integration-details.vue          | 229 ++----------------
 .../overview/store/mock-overview-data.ts      | 118 +++++++++
 .../modules/overview/types/overview.types.ts  |  30 +++
 7 files changed, 351 insertions(+), 211 deletions(-)
 create mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/integration-tabs.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
 create mode 100644 frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts

diff --git a/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue b/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue
index 5713743ebb..b8429a554d 100644
--- a/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue
+++ b/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue
@@ -213,6 +213,7 @@ const fetchGlobalIntegrations = () => {
     status: lfIntegrationStatusesTabs[status.value].statuses,
   })
     .then((res) => {
+      console.log(res);
       if (res.offset > 0) {
         integrations.value = [...integrations.value, ...res.rows];
       } else {
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
new file mode 100644
index 0000000000..5e15154cfd
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
@@ -0,0 +1,103 @@
+<template>
+  <div 
+    :key="integration.key"
+    class="flex items-center gap-4 px-5 py-5"
+  >
+    <!-- Integration Column -->
+    <div class="w-1/6 flex items-center gap-1.5">
+      <div class="w-4 h-4 flex-shrink-0">
+        <img :src="integration.image" :alt="integration.name" class="w-full h-full" />
+      </div>
+      <span class="text-sm font-medium text-gray-900">{{ integration.name }}</span>
+    </div>
+
+    <!-- Project Column -->
+    <div class="w-2/6">
+      <div class="text-sm font-medium text-gray-900">{{ integrationStatus.name }}</div>
+      <div class="text-xs text-gray-500 flex">
+        <span class="truncate">{{ integrationStatus.grandparentName }}</span>
+        <span class="text-gray-500">></span>
+        <span class="truncate">{{ integrationStatus.parentName }}</span>
+      </div>
+    </div>
+
+    <!-- Status Column -->
+    <div class="w-3/6 flex items-center justify-between">
+      <slot name="status-display">
+        <status-display :integrationStatus="integrationStatus" />
+      </slot>
+      <component
+        :is="integration.actionComponent"
+        v-if="status.key === 'waitingForAction' && integration.actionComponent"
+        :integration="integrationStatus"
+        :segment-id="integrationStatus.segmentId"
+        :grandparent-id="integrationStatus.grandparentId"
+      />
+      <!-- Actions Column -->
+      <div class="w-10">
+        <lf-dropdown placement="bottom-end" width="14.5rem" :persistent="true">
+          <template #trigger>
+            <lf-button type="secondary-ghost" icon-only>
+              <lf-icon name="ellipsis" />
+            </lf-button>
+          </template>
+          <component
+            :is="integration.dropdownComponent"
+            v-if="status.key === 'done' && integration.dropdownComponent.dropdownComponent"
+            :integration="integration"
+            :segment-id="integrationStatus.segmentId"
+            :grandparent-id="integrationStatus.grandparentId"
+          />
+          <lf-dropdown-item type="danger" @click="disconnectIntegration(integrationStatus)">
+            <lf-icon name="link-simple-slash" type="regular" />
+            Disconnect integration
+          </lf-dropdown-item>
+        </lf-dropdown>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { IntegrationStatus } from '../../types/overview.types';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import StatusDisplay from '@/modules/admin/modules/overview/components/fragments/status-display.vue';
+import { getIntegrationStatus } from '@/modules/admin/modules/integration/config/status';
+import { lfIntegrations } from '@/config/integrations';
+import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
+import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
+import { mapActions } from '@/shared/vuex/vuex.helpers';
+import LfDropdown from '@/ui-kit/dropdown/Dropdown.vue';
+import LfDropdownItem from '@/ui-kit/dropdown/DropdownItem.vue';
+import LfButton from '@/ui-kit/button/Button.vue';
+
+const { trackEvent } = useProductTracking();
+
+const { doDestroy } = mapActions('integration');
+const props = defineProps<{
+  integrationStatus: IntegrationStatus;
+}>();
+
+const status = computed(() => getIntegrationStatus(props.integrationStatus));
+const integration = computed(() => lfIntegrations()[props.integrationStatus.platform]);
+
+const disconnectIntegration = async (integration: any) => {
+  trackEvent({
+    key: FeatureEventKey.DISCONNECT_INTEGRATION,
+    type: EventType.FEATURE,
+    properties: {
+      platform: integration.platform,
+    },
+  });
+  await doDestroy(integration.id);
+
+  // TODO: Fetch integrations
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfOverviewIntegrationRow',
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integration-tabs.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integration-tabs.vue
new file mode 100644
index 0000000000..974ca1cee4
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integration-tabs.vue
@@ -0,0 +1,52 @@
+<template>
+  <el-tabs v-model="activeTab" class="integration-tabs">
+    <el-tab-pane v-for="tab in tabs" :key="tab.key" :label="tab.label + ` (${tab.count})`" :name="tab.key">
+      <template #label>
+        <div class="flex items-center gap-1.5">
+          <lf-icon :name="tab.icon" :size="16" class="text-gray-600" />
+          <span>{{ tab.label }} ({{ tab.count }})</span>
+        </div>
+      </template>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { IntegrationTabs } from '@/modules/admin/modules/overview/types/overview.types';
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const props = defineProps<{
+  tabs: IntegrationTabs[];
+  modelValue: string;
+}>();
+
+const activeTab = computed<string>({
+  get() {
+    return props.modelValue;
+  },
+  set(value: string) {
+    emit('update:modelValue', value);
+  },
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfOverviewIntegrationTabs',
+};
+</script>
+
+<style scoped>
+.integration-tabs :deep(.el-tabs__nav-wrap::after) {
+  height: 1px;
+}
+
+.integration-tabs :deep(.el-tabs__active-bar) {
+  height: 1px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue b/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
new file mode 100644
index 0000000000..a852a4b102
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <div class="flex items-center gap-1.5 mb-1">
+      <lf-icon 
+        :name="status.status.icon" 
+        :size="16" 
+        :class="statusIconClass"
+      />
+      <span class="text-sm font-medium text-gray-900">{{ status.status.text }}</span>
+    </div>
+    <div class="text-xs text-gray-500">{{ integrationStatus.statusDetails }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { IntegrationStatus } from '../../types/overview.types';
+import { getIntegrationStatus } from '@/modules/admin/modules/integration/config/status';
+
+const props = defineProps<{
+  integrationStatus: IntegrationStatus;
+}>();
+
+const status = computed(() => getIntegrationStatus(props.integrationStatus));
+const statusIconClass = computed(() => {
+  return status.value.status.color + (status.value.key === 'in-progress' ? ' animate-spin' : '');
+});
+</script>
\ No newline at end of file
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
index 4db28d8f3f..1523c569b0 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
@@ -7,83 +7,23 @@
       </h3>
       
       <!-- Tabs -->
-      <el-tabs v-model="activeTab" class="integration-tabs">
-        <el-tab-pane label="In progress (4)" name="in-progress">
-          <template #label>
-            <div class="flex items-center gap-1.5">
-              <lf-icon name="clock" :size="16" class="text-gray-600" />
-              <span>In progress (4)</span>
-            </div>
-          </template>
-        </el-tab-pane>
-        <el-tab-pane label="Action required (2)" name="action-required">
-          <template #label>
-            <div class="flex items-center gap-1.5">
-              <lf-icon name="triangle-exclamation" :size="16" class="text-gray-600" />
-              <span>Action required (2)</span>
-            </div>
-          </template>
-        </el-tab-pane>
-        <el-tab-pane label="Connection failed (1)" name="connection-failed">
-          <template #label>
-            <div class="flex items-center gap-1.5">
-              <lf-icon name="circle-exclamation" :size="16" class="text-gray-600" />
-              <span>Connection failed (1)</span>
-            </div>
-          </template>
-        </el-tab-pane>
-      </el-tabs>
+      <integration-tabs :tabs="mockOverviewTabs" :modelValue="activeTab" @update:modelValue="activeTab = $event" />
     </div>
 
     <!-- Table Headers -->
-    <div class="flex items-center gap-4 px-5 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wide">
-      <div class="w-40">Integration</div>
-      <div class="flex-1">Project</div>
-      <div class="w-32">Status</div>
-      <div class="w-10"></div>
+    <div class="flex items-center gap-4 pt-5 pb-3 px-5 text-xs font-semibold text-gray-400">
+      <div class="w-1/6">Integration</div>
+      <div class="w-2/6">Project</div>
+      <div class="w-3/6">Status</div>
     </div>
 
     <!-- Integration Rows -->
     <div class="divide-y divide-gray-200">
-      <div 
-        v-for="integration in filteredIntegrations" 
-        :key="integration.id"
-        class="flex items-center gap-4 px-5 py-5"
-      >
-        <!-- Integration Column -->
-        <div class="w-40 flex items-center gap-1.5">
-          <div class="w-4 h-4 flex-shrink-0">
-            <img :src="integration.icon" :alt="integration.platform" class="w-full h-full" />
-          </div>
-          <span class="text-sm font-medium text-gray-900">{{ integration.platform }}</span>
-        </div>
-
-        <!-- Project Column -->
-        <div class="flex-1">
-          <div class="text-sm font-medium text-gray-900">{{ integration.projectName }}</div>
-          <div class="text-xs text-gray-500">{{ integration.projectPath }}</div>
-        </div>
-
-        <!-- Status Column -->
-        <div class="w-32">
-          <div class="flex items-center gap-1.5 mb-1">
-            <lf-icon 
-              :name="integration.status.icon" 
-              :size="16" 
-              :class="integration.status.iconClass"
-            />
-            <span class="text-sm font-medium text-gray-900">{{ integration.status.label }}</span>
-          </div>
-          <div class="text-xs text-gray-500">{{ integration.status.description }}</div>
-        </div>
-
-        <!-- Actions Column -->
-        <div class="w-10">
-          <button class="p-2.5 hover:bg-gray-50 rounded-md">
-            <lf-icon name="ellipsis" :size="16" class="text-gray-900" />
-          </button>
-        </div>
-      </div>
+      <integration-row 
+        v-for="integrationStatus in filteredIntegrations" 
+        :key="integrationStatus.id"
+        :integrationStatus="integrationStatus"
+      />
     </div>
 
     <!-- Footer -->
@@ -98,112 +38,13 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { mockOverviewData } from '@/modules/admin/modules/overview/store/mock-overview-data';
+import IntegrationTabs from '@/modules/admin/modules/overview/components/fragments/integration-tabs.vue';
+import { mockOverviewTabs } from '@/modules/admin/modules/overview/store/mock-overview-data';
+import IntegrationRow from '@/modules/admin/modules/overview/components/fragments/integration-row.vue';
 
 // Mock data for integrations
-const integrations = ref([
-  // In Progress integrations
-  {
-    id: 1,
-    platform: 'GitHub',
-    icon: 'https://www.figma.com/api/mcp/asset/0ab14917-e2ca-446a-8f6c-1dc7c520707e',
-    projectName: 'Academy Software Foundation',
-    projectPath: 'Academy Software Fou... > Academy Software Fou...',
-    status: {
-      label: 'In progress',
-      description: '100 out of 1,000 data streams processed...',
-      icon: 'loader-4-fill',
-      iconClass: 'text-primary-500',
-      type: 'in-progress'
-    }
-  },
-  {
-    id: 2,
-    platform: 'Stack Overflow',
-    icon: 'https://www.figma.com/api/mcp/asset/eca989d0-0cea-45f2-a0fa-463c6ae3ad5d',
-    projectName: 'Asset Repository Working Group',
-    projectPath: 'Academy Software Fou... > Asset Repository Wor...',
-    status: {
-      label: 'In progress',
-      description: '600 data streams being processed...',
-      icon: 'loader-4-fill',
-      iconClass: 'text-primary-500',
-      type: 'in-progress'
-    }
-  },
-  {
-    id: 3,
-    platform: 'Git',
-    icon: 'https://www.figma.com/api/mcp/asset/1efa7655-45c4-41b4-a3ce-3a913f22520d',
-    projectName: 'AcademyMaterialX Software Foundation',
-    projectPath: 'Academy Software Fou... > MaterialX',
-    status: {
-      label: 'In progress',
-      description: '600 data streams being processed...',
-      icon: 'loader-4-fill',
-      iconClass: 'text-primary-500',
-      type: 'in-progress'
-    }
-  },
-  {
-    id: 4,
-    platform: 'GitLab',
-    icon: 'https://www.figma.com/api/mcp/asset/fc824466-7e66-4681-a7fb-588ea1221ff9',
-    projectName: 'OpenAssetIO',
-    projectPath: 'Academy Software Fou... > OpenAssetIO',
-    status: {
-      label: 'In progress',
-      description: '600 data streams being processed...',
-      icon: 'loader-4-fill',
-      iconClass: 'text-primary-500',
-      type: 'in-progress'
-    }
-  },
-  // Action Required integrations
-  {
-    id: 5,
-    platform: 'Slack',
-    icon: 'https://www.figma.com/api/mcp/asset/0ab14917-e2ca-446a-8f6c-1dc7c520707e',
-    projectName: 'Community Management',
-    projectPath: 'Academy Software Fou... > Community',
-    status: {
-      label: 'Action required',
-      description: 'API key expired, please update credentials',
-      icon: 'triangle-exclamation',
-      iconClass: 'text-yellow-500',
-      type: 'action-required'
-    }
-  },
-  {
-    id: 6,
-    platform: 'Discord',
-    icon: 'https://www.figma.com/api/mcp/asset/eca989d0-0cea-45f2-a0fa-463c6ae3ad5d',
-    projectName: 'Developer Relations',
-    projectPath: 'Academy Software Fou... > DevRel',
-    status: {
-      label: 'Action required',
-      description: 'Permission denied, check bot permissions',
-      icon: 'triangle-exclamation',
-      iconClass: 'text-yellow-500',
-      type: 'action-required'
-    }
-  },
-  // Connection Failed integrations
-  {
-    id: 7,
-    platform: 'Jira',
-    icon: 'https://www.figma.com/api/mcp/asset/1efa7655-45c4-41b4-a3ce-3a913f22520d',
-    projectName: 'Project Management',
-    projectPath: 'Academy Software Fou... > PM',
-    status: {
-      label: 'Connection failed',
-      description: 'Unable to connect to server',
-      icon: 'circle-exclamation',
-      iconClass: 'text-red-500',
-      type: 'connection-failed'
-    }
-  }
-]);
+const integrations = ref(mockOverviewData);
 
 const activeTab = ref('in-progress');
 
@@ -211,11 +52,11 @@ const filteredIntegrations = computed(() => {
   return integrations.value.filter(integration => {
     switch (activeTab.value) {
       case 'in-progress':
-        return integration.status.type === 'in-progress';
+        return integration.status === 'in-progress';
       case 'action-required':
-        return integration.status.type === 'action-required';
+        return integration.status === 'mapping' || integration.status === 'pending-action';
       case 'connection-failed':
-        return integration.status.type === 'connection-failed';
+        return integration.status === 'error';
       default:
         return true;
     }
@@ -235,37 +76,3 @@ export default {
 };
 </script>
 
-<style scoped>
-.integration-tabs :deep(.el-tabs__header) {
-  margin: 0;
-  border: none;
-}
-
-.integration-tabs :deep(.el-tabs__nav-wrap::after) {
-  height: 1px;
-  background-color: #e5e7eb;
-}
-
-.integration-tabs :deep(.el-tabs__item) {
-  padding: 0 0 16px 0;
-  margin-right: 24px;
-  font-weight: 500;
-  font-size: 14px;
-  color: #6b7280;
-  border: none;
-}
-
-.integration-tabs :deep(.el-tabs__item.is-active) {
-  color: #0f172a;
-  font-weight: 500;
-}
-
-.integration-tabs :deep(.el-tabs__active-bar) {
-  background-color: #0094ff;
-  height: 2px;
-}
-
-.integration-tabs :deep(.el-tabs__item:hover) {
-  color: #0094ff;
-}
-</style>
\ No newline at end of file
diff --git a/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts b/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts
new file mode 100644
index 0000000000..5dbbc8c213
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts
@@ -0,0 +1,118 @@
+import { IntegrationStatus } from '../types/overview.types'
+export const mockOverviewData: IntegrationStatus[] = [
+  // In Progress integrations
+  {
+    grandparentId: 'd004b040-95d2-449b-b5a3-8e789418cc88',
+    grandparentName: 'Academy Software Foundation (ASWF)',
+    id: 'a92494e5-268e-44f1-bffc-f55240be77ed',
+    name: 'Academy Software Foundation (ASWF)',
+    parentId: '9d8f1f72-4d12-4502-8f2e-c2b8348c8209',
+    parentName: 'Academy Software Foundation (ASWF)',
+    platform: 'git',
+    segmentId: '8eb1d4d5-2536-435b-980c-f11e30943025',
+    settings: { remotes: ['https://github.com/AcademySoftwareFoundation/tac'] },
+    status: 'in-progress',
+    statusDetails: '100 out of 1,000 data streams processed...',
+  },
+  {
+    grandparentId: 'e005c041-96d3-450c-c6a4-9e890519dd89',
+    grandparentName: 'Academy Software Foundation',
+    id: 'b93595f6-369f-45g2-cgd4-g66351cf88fe',
+    name: 'Asset Repository Working Group',
+    parentId: 'ae9g2g73-5e13-4603-9g3f-d3c9459d9310',
+    parentName: 'Academy Software Foundation',
+    platform: 'stackoverflow',
+    segmentId: '9fc2e5e6-3647-546c-a91d-g22f41a54136',
+    settings: { tags: ['academy-software-foundation', 'asset-repository'] },
+    status: 'in-progress',
+    statusDetails: '600 data streams being processed...',
+  },
+  {
+    grandparentId: 'f106d142-a7e4-561d-d7b5-af901620ee90',
+    grandparentName: 'Academy Software Foundation',
+    id: 'ca4696g7-470g-46h3-dhf5-h77462dg99gf',
+    name: 'MaterialX',
+    parentId: 'bg0h3h84-6f24-5714-ah4g-e4da570ea421',
+    parentName: 'Academy Software Foundation',
+    platform: 'git',
+    segmentId: 'a0d3f6f7-4758-657d-ba2e-h33g52b65247',
+    settings: { remotes: ['https://github.com/AcademySoftwareFoundation/MaterialX'] },
+    status: 'in-progress',
+    statusDetails: '600 data streams being processed...',
+  },
+  {
+    grandparentId: 'g207e253-b8f5-672e-e8c6-bg012731ff01',
+    grandparentName: 'Academy Software Foundation',
+    id: 'db5707h8-581h-57i4-eig6-i88573eh00hg',
+    name: 'OpenAssetIO',
+    parentId: 'ch1i4i95-7g35-6825-bi5h-f5eb681fb532',
+    parentName: 'Academy Software Foundation',
+    platform: 'gitlab',
+    segmentId: 'b1e4g7g8-5869-768e-cb3f-i44h63c76358',
+    settings: { remotes: ['https://gitlab.com/AcademySoftwareFoundation/OpenAssetIO'] },
+    status: 'in-progress',
+    statusDetails: '600 data streams being processed...',
+  },
+  // Action Required integrations
+  {
+    grandparentId: 'h308f364-c9g6-783f-f9d7-ch123842gg12',
+    grandparentName: 'Academy Software Foundation',
+    id: 'ec6818i9-692i-68j5-fjh7-j99684fi11ih',
+    name: 'Community Management',
+    parentId: 'di2j5ja6-8h46-7936-cj6i-g6fc792gc643',
+    parentName: 'Academy Software Foundation',
+    platform: 'slack',
+    segmentId: 'c2f5h8h9-6970-879f-dc4g-j55i74d87469',
+    settings: { workspaceId: 'T0123456789', channels: ['general', 'community'] },
+    status: 'mapping',
+    statusDetails: 'API key expired, please update credentials',
+  },
+  {
+    grandparentId: 'i409g475-da07-894g-ga08-di234953hh23',
+    grandparentName: 'Academy Software Foundation',
+    id: 'fd7929ja-7a3j-79k6-gki8-ka0795gj22ji',
+    name: 'Developer Relations',
+    parentId: 'ej3k6kb7-9i57-8a47-dk7j-h7gd8a3hd754',
+    parentName: 'Academy Software Foundation',
+    platform: 'github',
+    segmentId: 'd3g6i9ia-7a81-98ag-ed5h-k66j85e98570',
+    settings: { guildId: '123456789012345678', channels: ['dev-chat', 'announcements'] },
+    status: 'mapping',
+    statusDetails: 'Permission denied, check bot permissions',
+  },
+  // Connection Failed integrations
+  {
+    grandparentId: 'j50ah586-eb18-9a5h-hb19-ej345064ii34',
+    grandparentName: 'Academy Software Foundation',
+    id: 'ge8a3akb-8b4k-8al7-hkj9-lb1806hk33kj',
+    name: 'Project Management',
+    parentId: 'fk4l7lc8-aj68-9b58-el8k-i8he9b4ie865',
+    parentName: 'Academy Software Foundation',
+    platform: 'jira',
+    segmentId: 'e4h7jajb-8b92-a9bh-fe6i-l77k96f9a681',
+    settings: { baseUrl: 'https://academysoftware.atlassian.net', projectKeys: ['PM', 'ASWF'] },
+    status: 'error',
+    statusDetails: 'Unable to connect to server',
+  },
+]
+
+export const mockOverviewTabs = [
+  {
+    label: 'In progress',
+    key: 'in-progress',
+    count: 4,
+    icon: 'clock',
+  },
+  {
+    label: 'Action required',
+    key: 'action-required',
+    count: 2,
+    icon: 'triangle-exclamation',
+  },
+  {
+    label: 'Connection failed',
+    key: 'connection-failed',
+    count: 1,
+    icon: 'circle-exclamation',
+  },
+]
diff --git a/frontend/src/modules/admin/modules/overview/types/overview.types.ts b/frontend/src/modules/admin/modules/overview/types/overview.types.ts
index 42196fdf61..a67bbf3def 100644
--- a/frontend/src/modules/admin/modules/overview/types/overview.types.ts
+++ b/frontend/src/modules/admin/modules/overview/types/overview.types.ts
@@ -1,5 +1,35 @@
+// import { IntegrationConfig } from '@/config/integrations'
+// import { IntegrationStatusConfig } from '../../integration/config/status'
 export interface OverviewTrends {
   current: number
   previous: number
   period: string
 }
+
+export interface IntegrationTabs {
+  label: string
+  key: string
+  count: number
+  icon: string
+}
+
+// TODO: Check with backend team about the data structure
+export interface IntegrationStatus {
+  grandparentId: string
+  grandparentName: string
+  id: string
+  name: string
+  parentId: string
+  parentName: string
+  platform: string
+  segmentId: string
+  settings: any
+  status: string
+
+  // integration: IntegrationConfig
+  // projectGroupName: string
+  // projectName: string
+  // projectPath: string
+  // status: IntegrationStatusConfig
+  statusDetails: string
+}

From 20a17f6e969b480e704313d02af557df7752e175 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Fri, 5 Dec 2025 17:25:56 +0800
Subject: [PATCH 23/51] chore: wire integration tab to api

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../pages/integration-status.page.vue         |   1 -
 .../fragments/integrations-filter.vue         |  78 ++++------
 .../components/fragments/status-display.vue   |   6 +-
 .../sections/integration-details.vue          |  40 +++++-
 .../sections/integration-status.vue           | 136 ++++++++----------
 .../overview/services/overview.api.service.ts |  42 ++++++
 .../overview/store/mock-overview-data.ts      |  21 ---
 .../modules/overview/store/overview.store.ts  |   2 +
 .../modules/overview/types/overview.types.ts  |  11 +-
 frontend/src/shared/types/tanstack.ts         |  17 +--
 10 files changed, 178 insertions(+), 176 deletions(-)
 create mode 100644 frontend/src/modules/admin/modules/overview/services/overview.api.service.ts

diff --git a/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue b/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue
index b8429a554d..5713743ebb 100644
--- a/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue
+++ b/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue
@@ -213,7 +213,6 @@ const fetchGlobalIntegrations = () => {
     status: lfIntegrationStatusesTabs[status.value].statuses,
   })
     .then((res) => {
-      console.log(res);
       if (res.offset > 0) {
         integrations.value = [...integrations.value, ...res.rows];
       } else {
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue
index 5958594850..bb058b67dd 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue
@@ -1,6 +1,6 @@
 <template>
   <lfx-dropdown-select
-    v-model="selectedIntegrationId"
+    v-model="selectedIntegrationId as string"
     width="200px"
     :match-width="false"
     dropdown-class="max-h-80"
@@ -12,18 +12,14 @@
         type="filled"
       >
         <div class="flex items-center gap-1.5">
-          <lf-icon
-            name="grid-round-2"
-            :size="20"
-          />
-          <span class="text-sm text-neutral-900 font-semibold">
-            {{ selectedIntegration?.name || 'All integrations' }}
-          </span>
-          <lf-icon
-            name="angle-down"
-            :size="16"
-            class="text-neutral-400"
-          />
+          <template v-if="!selectedIntegrationId || selectedIntegrationId === 'all'">
+            <lf-icon name="grid-round-2" type="regular" :size="16" />
+            All integrations
+          </template>
+          <template v-else>
+            <img :src="selectedIntegration?.image" :alt="selectedIntegration?.name" class="min-w-4 h-4 object-contain">
+            {{ selectedIntegration?.name }}
+          </template>
         </div>
       </lfx-dropdown-selector>
     </template>
@@ -34,25 +30,26 @@
         <lfx-dropdown-item
           value="all"
           label="All integrations"
-          @click="selectedIntegrationId = 'all'"
-          :selected="selectedIntegrationId === 'all'"
+          @click="selectedIntegrationId = null"
+          :selected="selectedIntegrationId === null"
           :class="{
-            '!bg-blue-50': selectedIntegrationId === 'all',
+            '!bg-blue-50': selectedIntegrationId === null,
           }"
         />
       </div>
 
       <lfx-dropdown-item
-        v-for="integration in integrations"
-        :key="integration.id"
-        :value="integration.id"
-        :label="integration.name"
-        @click="selectIntegration(integration.id)"
-        :selected="selectedIntegrationId === integration.id"
-        :class="{
-          '!bg-blue-50': selectedIntegrationId === integration.id,
-        }"
-      />
+        v-for="(integration, key) in lfIntegrations()"
+        :key="key"
+        :selected="selectedIntegrationId === key"
+        @click="selectedIntegrationId = key"
+      >
+        <div class="flex items-center gap-2">
+          <img :src="integration.image" :alt="integration.name" class="min-w-4 h-4 object-contain">
+          {{ integration.name }}
+        </div>
+      </lfx-dropdown-item>
+
     </template>
   </lfx-dropdown-select>
 </template>
@@ -66,37 +63,18 @@ import LfxDropdownSelect from '@/ui-kit/lfx/dropdown/dropdown-select.vue';
 import LfxDropdownSelector from '@/ui-kit/lfx/dropdown/dropdown-selector.vue';
 import LfxDropdownItem from '@/ui-kit/lfx/dropdown/dropdown-item.vue';
 import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
+import { lfIntegrations } from '@/config/integrations';
 import { storeToRefs } from 'pinia';
 
+
 const overviewStore = useOverviewStore();
 const { selectedIntegrationId } = storeToRefs(overviewStore);
 
-interface Integration {
-  id: string;
-  name: string;
-}
-
-const props = defineProps<{
-  integrations: Integration[];
-}>();
-
-// Mock data for integrations (can be replaced with props.integrations)
-const mockIntegrations: Integration[] = [
-  { id: 'github', name: 'GitHub' },
-  { id: 'slack', name: 'Slack' },
-  { id: 'discord', name: 'Discord' },
-  { id: 'linkedin', name: 'LinkedIn' },
-  { id: 'twitter', name: 'Twitter' },
-];
-
-const selectIntegration = (integrationId: string) => {
-  selectedIntegrationId.value = integrationId;
-};
+const integrations = computed(() => lfIntegrations());
 
 const selectedIntegration = computed(() => {
-  if (selectedIntegrationId.value === 'all') return null;
-  const integrations = props.integrations || mockIntegrations;
-  return integrations.find(i => i.id === selectedIntegrationId.value) || null;
+  if (selectedIntegrationId.value === 'all' || !selectedIntegrationId.value) return null;
+  return integrations.value[selectedIntegrationId.value];
 });
 
 </script>
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue b/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
index a852a4b102..d594513929 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
@@ -4,7 +4,8 @@
       <lf-icon 
         :name="status.status.icon" 
         :size="16" 
-        :class="statusIconClass"
+        :type="status.status.iconType"
+        :class="status.status.color"
       />
       <span class="text-sm font-medium text-gray-900">{{ status.status.text }}</span>
     </div>
@@ -23,7 +24,4 @@ const props = defineProps<{
 }>();
 
 const status = computed(() => getIntegrationStatus(props.integrationStatus));
-const statusIconClass = computed(() => {
-  return status.value.status.color + (status.value.key === 'in-progress' ? ' animate-spin' : '');
-});
 </script>
\ No newline at end of file
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
index 1523c569b0..00af8e08c1 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
@@ -7,7 +7,7 @@
       </h3>
       
       <!-- Tabs -->
-      <integration-tabs :tabs="mockOverviewTabs" :modelValue="activeTab" @update:modelValue="activeTab = $event" />
+      <integration-tabs :tabs="overviewTabs" :modelValue="activeTab" @update:modelValue="activeTab = $event" />
     </div>
 
     <!-- Table Headers -->
@@ -40,22 +40,27 @@
 import { ref, computed } from 'vue';
 import { mockOverviewData } from '@/modules/admin/modules/overview/store/mock-overview-data';
 import IntegrationTabs from '@/modules/admin/modules/overview/components/fragments/integration-tabs.vue';
-import { mockOverviewTabs } from '@/modules/admin/modules/overview/store/mock-overview-data';
 import IntegrationRow from '@/modules/admin/modules/overview/components/fragments/integration-row.vue';
+import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
+import { storeToRefs } from 'pinia';
+import { lfIntegrationStatusesTabs } from '@/modules/admin/modules/integration/config/status';
+
+const { integrationStatusCount } = storeToRefs(useOverviewStore());
 
 // Mock data for integrations
 const integrations = ref(mockOverviewData);
 
-const activeTab = ref('in-progress');
+const activeTab = ref(lfIntegrationStatusesTabs.connecting.key);
 
+// TODO: remove mock data and use the API
 const filteredIntegrations = computed(() => {
   return integrations.value.filter(integration => {
     switch (activeTab.value) {
-      case 'in-progress':
+      case lfIntegrationStatusesTabs.connecting.key:
         return integration.status === 'in-progress';
-      case 'action-required':
+      case lfIntegrationStatusesTabs.waitingForAction.key:
         return integration.status === 'mapping' || integration.status === 'pending-action';
-      case 'connection-failed':
+      case lfIntegrationStatusesTabs.error.key:
         return integration.status === 'error';
       default:
         return true;
@@ -68,6 +73,29 @@ const paginationText = computed(() => {
   const showing = filteredIntegrations.value.length;
   return `${showing} out of ${total} integrations`;
 });
+
+const overviewTabs = computed(() => {
+  return [
+  {
+    label: 'In progress',
+    key: lfIntegrationStatusesTabs.connecting.key,
+    count: integrationStatusCount.value[lfIntegrationStatusesTabs.connecting.key] || 0,
+    icon: 'clock',
+  },
+  {
+    label: 'Action required',
+    key: lfIntegrationStatusesTabs.waitingForAction.key,
+    count: integrationStatusCount.value[lfIntegrationStatusesTabs.waitingForAction.key] || 0,
+    icon: 'triangle-exclamation',
+  },
+  {
+    label: 'Connection failed',
+    key: lfIntegrationStatusesTabs.error.key,
+    count: integrationStatusCount.value[lfIntegrationStatusesTabs.error.key] || 0,
+    icon: 'circle-exclamation',
+  },
+]
+});
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
index c3e677f062..9b15e31deb 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
@@ -10,108 +10,84 @@
       <div class="flex items-center">
         <integrations-filter
           ref="integrationsFilterRef"
-          :integrations="mockIntegrations"
         />
       </div>
     </div>
 
     <!-- Status chips -->
     <div class="flex gap-3 items-start">
-      <lfx-chip
-        v-for="status in statusChips"
-        :key="status.key"
-        type="bordered"
-        size="default"
-      >
-        <lf-icon
-          v-if="status.icon"
-          :name="status.icon"
-          :size="15"
-          :class="status.iconClass"
-        />
-        <span class="text-sm text-neutral-900 font-normal">
-          {{ status.label }}
-        </span>
-        <span class="text-sm text-neutral-900 font-semibold">
-          {{ status.count }}
-        </span>
-      </lfx-chip>
+      <div v-if="isPending" class="py-4 flex justify-center">
+        <lf-spinner size="1rem" />
+      </div>
+      <template v-else>
+        <lfx-chip
+          v-for="(config, key) in lfIntegrationStatusesTabs"
+          :key="key"
+          type="bordered"
+          size="default"
+          class="cursor-pointer hover:bg-neutral-50"
+          @click="navigateTo(`/admin#integrations`)"
+        >
+          <lf-icon
+            v-if="config.status.icon"
+            :name="config.status.icon"
+            :type="config.status.iconType"
+            :size="15"
+            :class="config.status.color"
+          />
+          <span class="text-sm text-neutral-900 font-normal">
+            {{ config.tabs.text }}
+          </span>
+          <span class="text-sm text-neutral-900 font-semibold">
+            {{ integrationStatusCount?.[key] || 0 }}
+          </span>
+        </lfx-chip>
+      </template>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {
-  ref,
-  computed,
-} from 'vue';
+import { watch, computed } from 'vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfxChip from '@/ui-kit/lfx/chip/chip.vue';
 import IntegrationsFilter from '@/modules/admin/modules/overview/components/fragments/integrations-filter.vue';
 import { lfIntegrationStatusesTabs } from '@/modules/admin/modules/integration/config/status';
+import { useRouter } from 'vue-router';
+import { OVERVIEW_API_SERVICE } from '../../services/overview.api.service';
+import { ToastStore } from '@/shared/message/notification';
+import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
+import { storeToRefs } from 'pinia';
+import { GlobalIntegrationStatusCount } from '../../types/overview.types';
+import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
 
-interface Integration {
-  id: string;
-  name: string;
-}
+const { selectedIntegrationId, integrationStatusCount } = storeToRefs(useOverviewStore());
 
-// Mock data for integrations
-const mockIntegrations: Integration[] = [
-  { id: 'github', name: 'GitHub' },
-  { id: 'slack', name: 'Slack' },
-  { id: 'discord', name: 'Discord' },
-  { id: 'linkedin', name: 'LinkedIn' },
-  { id: 'twitter', name: 'Twitter' },
-];
+const router = useRouter();
 
-// Mock data for status counts
-const mockStatusCounts = {
-  done: 240,
-  connecting: 4,
-  waitingForAction: 2,
-  error: 1,
-  notConnected: 126,
-};
+const params = computed(() => ({
+  platform: selectedIntegrationId.value || undefined,
+}));
 
-const integrationsFilterRef = ref();
+const { data, isPending, isError } = OVERVIEW_API_SERVICE.fetchGlobalIntegrationStatusCount(params);
 
-const statusChips = computed(() => {
-  return Object.entries(lfIntegrationStatusesTabs).map(([key, config]) => {
-    let iconClass = 'shrink-0';
-    let icon = '';
+const navigateTo = (path: string) => {
+  router.push(path);
+};
 
-    // Map status to icons and colors based on the design
-    switch (key) {
-      case 'done':
-        iconClass += ' text-green-500';
-        icon = 'check-circle';
-        break;
-      case 'connecting':
-        iconClass += ' text-blue-500';
-        icon = 'clock';
-        break;
-      case 'waitingForAction':
-        iconClass += ' text-orange-500';
-        icon = 'triangle-exclamation';
-        break;
-      case 'error':
-        iconClass += ' text-red-600';
-        icon = 'circle-exclamation';
-        break;
-      case 'notConnected':
-        iconClass += ' text-neutral-900';
-        icon = 'link-simple-slash';
-        break;
-    }
+watch(data, () => {
+  if (data.value) {
+  integrationStatusCount.value = data.value?.reduce((acc: Record<string, number>, item: GlobalIntegrationStatusCount) => {
+      acc[item.status] = +item.count;
+      return acc;
+    }, {});
+  }
+}, { immediate: true });
 
-    return {
-      key,
-      label: config.tabs.text,
-      count: mockStatusCounts[key as keyof typeof mockStatusCounts] || 0,
-      icon,
-      iconClass,
-    };
-  });
+watch(isError, () => {
+  if (isError.value) {
+    ToastStore.error('Failed to fetch global integration status count');
+  }
 });
 </script>
 
diff --git a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
new file mode 100644
index 0000000000..793932d1d3
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
@@ -0,0 +1,42 @@
+import type { QueryFunction } from '@tanstack/vue-query'
+import { type ComputedRef, computed } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
+import { TanstackKey } from '@/shared/types/tanstack'
+import authAxios from '@/shared/axios/auth-axios'
+import { GlobalIntegrationStatusCount } from '../types/overview.types'
+
+export interface GlobalIntegrationStatusCountQueryParams {
+  platform: string | undefined
+}
+
+class OverviewApiService {
+  fetchGlobalIntegrationStatusCount(params: ComputedRef<GlobalIntegrationStatusCountQueryParams>) {
+    const queryKey = computed(() => [
+      TanstackKey.GLOBAL_INTEGRATION_STATUS_COUNT,
+      params.value.platform,
+    ])
+    const queryFn = computed<QueryFunction<GlobalIntegrationStatusCount[]>>(() =>
+      this.fetchGlobalIntegrationStatusCountQueryFn(() => ({
+        platform: params.value.platform,
+      })),
+    )
+
+    return useQuery<GlobalIntegrationStatusCount[]>({
+      queryKey,
+      queryFn,
+    })
+  }
+
+  fetchGlobalIntegrationStatusCountQueryFn(
+    query: () => Record<string, string | number | boolean | undefined | string[] | null>,
+  ): QueryFunction<GlobalIntegrationStatusCount[]> {
+    return () =>
+      authAxios
+        .get('/integration/global/status', {
+          params: query(),
+        })
+        .then((res) => res.data)
+  }
+}
+
+export const OVERVIEW_API_SERVICE = new OverviewApiService()
diff --git a/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts b/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts
index 5dbbc8c213..f8e5e4c062 100644
--- a/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts
+++ b/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts
@@ -95,24 +95,3 @@ export const mockOverviewData: IntegrationStatus[] = [
     statusDetails: 'Unable to connect to server',
   },
 ]
-
-export const mockOverviewTabs = [
-  {
-    label: 'In progress',
-    key: 'in-progress',
-    count: 4,
-    icon: 'clock',
-  },
-  {
-    label: 'Action required',
-    key: 'action-required',
-    count: 2,
-    icon: 'triangle-exclamation',
-  },
-  {
-    label: 'Connection failed',
-    key: 'connection-failed',
-    count: 1,
-    icon: 'circle-exclamation',
-  },
-]
diff --git a/frontend/src/modules/admin/modules/overview/store/overview.store.ts b/frontend/src/modules/admin/modules/overview/store/overview.store.ts
index 08dba74073..5e969ed3a5 100644
--- a/frontend/src/modules/admin/modules/overview/store/overview.store.ts
+++ b/frontend/src/modules/admin/modules/overview/store/overview.store.ts
@@ -6,10 +6,12 @@ export const useOverviewStore = defineStore('overview', () => {
   const selectedProjectGroup = ref<ProjectGroup | null>(null)
   const selectedProject = ref<Project | null>(null)
   const selectedIntegrationId = ref<string | null>(null)
+  const integrationStatusCount = ref<Record<string, number>>({})
 
   return {
     selectedProjectGroup,
     selectedProject,
     selectedIntegrationId,
+    integrationStatusCount,
   }
 })
diff --git a/frontend/src/modules/admin/modules/overview/types/overview.types.ts b/frontend/src/modules/admin/modules/overview/types/overview.types.ts
index a67bbf3def..07015c68b2 100644
--- a/frontend/src/modules/admin/modules/overview/types/overview.types.ts
+++ b/frontend/src/modules/admin/modules/overview/types/overview.types.ts
@@ -25,11 +25,10 @@ export interface IntegrationStatus {
   segmentId: string
   settings: any
   status: string
-
-  // integration: IntegrationConfig
-  // projectGroupName: string
-  // projectName: string
-  // projectPath: string
-  // status: IntegrationStatusConfig
   statusDetails: string
 }
+
+export interface GlobalIntegrationStatusCount {
+  status: string
+  count: number
+}
diff --git a/frontend/src/shared/types/tanstack.ts b/frontend/src/shared/types/tanstack.ts
index c6683f7fba..7e2f55a2b5 100644
--- a/frontend/src/shared/types/tanstack.ts
+++ b/frontend/src/shared/types/tanstack.ts
@@ -1,10 +1,11 @@
 export enum TanstackKey {
-    ADMIN_COLLECTIONS = 'admin-collections',
-    ADMIN_INSIGHTS_PROJECTS = 'admin-insights-projects',
-    ADMIN_PROJECT_GROUPS = 'admin-project-groups',
-    ADMIN_SUB_PROJECTS = 'admin-sub-projects',
-    MEMBER_MERGE_SUGGESTIONS_COUNT = 'member-merge-suggestions-count',
-    MEMBERS_LIST= 'members-list',
-    ORGANIZATION_MERGE_SUGGESTIONS_COUNT = 'organization-merge-suggestions-count',
-    ORGANIZATIONS_LIST = 'organizations-list',
+  ADMIN_COLLECTIONS = 'admin-collections',
+  ADMIN_INSIGHTS_PROJECTS = 'admin-insights-projects',
+  ADMIN_PROJECT_GROUPS = 'admin-project-groups',
+  ADMIN_SUB_PROJECTS = 'admin-sub-projects',
+  MEMBER_MERGE_SUGGESTIONS_COUNT = 'member-merge-suggestions-count',
+  MEMBERS_LIST = 'members-list',
+  ORGANIZATION_MERGE_SUGGESTIONS_COUNT = 'organization-merge-suggestions-count',
+  ORGANIZATIONS_LIST = 'organizations-list',
+  GLOBAL_INTEGRATION_STATUS_COUNT = 'global-integration-status-count',
 }

From 4c231e5ade7970aa4f0bccf2a3d5918faaf5d1e0 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Tue, 9 Dec 2025 12:20:14 +0800
Subject: [PATCH 24/51] chore: wired integration details list to api

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../integration/config/status/connecting.ts   |  11 +-
 .../modules/integration/config/status/done.ts |  11 +-
 .../integration/config/status/error.ts        |  11 +-
 .../integration/config/status/index.ts        |  55 +--
 .../config/status/not-connected.ts            |  11 +-
 .../config/status/waiting-for-action.ts       |  11 +-
 .../components/fragments/integration-tabs.vue |   2 +-
 .../sections/integration-details.vue          |  64 ++-
 .../sections/integration-status.vue           |   8 +-
 .../overview/services/overview.api.service.ts |  57 ++-
 .../overview/store/mock-overview-data.ts      | 390 ++++++++++++++++++
 .../modules/overview/types/overview.types.ts  |   7 +
 frontend/src/shared/types/tanstack.ts         |   1 +
 13 files changed, 581 insertions(+), 58 deletions(-)

diff --git a/frontend/src/modules/admin/modules/integration/config/status/connecting.ts b/frontend/src/modules/admin/modules/integration/config/status/connecting.ts
index 929f43e3ce..7f6ba81646 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/connecting.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/connecting.ts
@@ -1,4 +1,4 @@
-import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index';
+import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index'
 
 const connecting: IntegrationStatusConfig = {
   key: 'connecting',
@@ -19,6 +19,11 @@ const connecting: IntegrationStatusConfig = {
     empty: 'No integrations with connection in progress',
     badge: 'bg-primary-50',
   },
-};
+  chipStatus: {
+    icon: 'clock',
+    iconType: 'solid',
+    color: 'text-primary-500',
+  },
+}
 
-export default connecting;
+export default connecting
diff --git a/frontend/src/modules/admin/modules/integration/config/status/done.ts b/frontend/src/modules/admin/modules/integration/config/status/done.ts
index bdb0c6ce8d..70df589997 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/done.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/done.ts
@@ -1,4 +1,4 @@
-import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index';
+import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index'
 
 const done: IntegrationStatusConfig = {
   key: 'done',
@@ -19,6 +19,11 @@ const done: IntegrationStatusConfig = {
     empty: 'No integrations connected',
     badge: 'bg-green-100',
   },
-};
+  chipStatus: {
+    icon: 'circle-check',
+    iconType: 'solid',
+    color: 'text-green-500',
+  },
+}
 
-export default done;
+export default done
diff --git a/frontend/src/modules/admin/modules/integration/config/status/error.ts b/frontend/src/modules/admin/modules/integration/config/status/error.ts
index 41f9705fb9..8feb99ace6 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/error.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/error.ts
@@ -1,4 +1,4 @@
-import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index';
+import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index'
 
 const error: IntegrationStatusConfig = {
   key: 'error',
@@ -19,6 +19,11 @@ const error: IntegrationStatusConfig = {
     empty: 'No integrations with a failed connection',
     badge: 'bg-red-100',
   },
-};
+  chipStatus: {
+    icon: 'circle-exclamation',
+    iconType: 'solid',
+    color: 'text-red-600',
+  },
+}
 
-export default error;
+export default error
diff --git a/frontend/src/modules/admin/modules/integration/config/status/index.ts b/frontend/src/modules/admin/modules/integration/config/status/index.ts
index 41ddd8a2be..52654e01e1 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/index.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/index.ts
@@ -1,28 +1,33 @@
-import done from './done';
-import error from './error';
-import waitingForAction from './waiting-for-action';
-import connecting from './connecting';
-import notConnected from './not-connected';
+import done from './done'
+import error from './error'
+import waitingForAction from './waiting-for-action'
+import connecting from './connecting'
+import notConnected from './not-connected'
 
 export interface IntegrationStatusConfig {
-  key: string;
-  show: (integration: any) => boolean;
-  statuses: string[],
+  key: string
+  show: (integration: any) => boolean
+  statuses: string[]
   status: {
-    text: string;
-    icon: string;
-    iconType?: string;
-    color: string;
-  },
+    text: string
+    icon: string
+    iconType?: string
+    color: string
+  }
   actionBar: {
-    background: string;
-    color: string;
-  },
+    background: string
+    color: string
+  }
   tabs: {
-    text: string;
-    empty: string;
-    badge: string;
-  },
+    text: string
+    empty: string
+    badge: string
+  }
+  chipStatus?: {
+    icon: string
+    iconType?: string
+    color: string
+  }
 }
 
 export const lfIntegrationStatuses: Record<string, IntegrationStatusConfig> = {
@@ -30,7 +35,7 @@ export const lfIntegrationStatuses: Record<string, IntegrationStatusConfig> = {
   error,
   waitingForAction,
   connecting,
-};
+}
 
 export const lfIntegrationStatusesTabs: Record<string, IntegrationStatusConfig> = {
   done,
@@ -38,14 +43,14 @@ export const lfIntegrationStatusesTabs: Record<string, IntegrationStatusConfig>
   waitingForAction,
   error,
   notConnected,
-};
+}
 
 export const getIntegrationStatus = (integration: any): IntegrationStatusConfig => {
   // eslint-disable-next-line no-restricted-syntax
   for (const key in lfIntegrationStatuses) {
     if (lfIntegrationStatuses[key].show(integration)) {
-      return lfIntegrationStatuses[key];
+      return lfIntegrationStatuses[key]
     }
   }
-  return connecting;
-};
+  return connecting
+}
diff --git a/frontend/src/modules/admin/modules/integration/config/status/not-connected.ts b/frontend/src/modules/admin/modules/integration/config/status/not-connected.ts
index 797f79c364..4bd316238c 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/not-connected.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/not-connected.ts
@@ -1,4 +1,4 @@
-import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index';
+import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index'
 
 const notConnected: IntegrationStatusConfig = {
   key: 'notConnected',
@@ -18,6 +18,11 @@ const notConnected: IntegrationStatusConfig = {
     empty: 'No integrations to be connected',
     badge: 'bg-gray-100',
   },
-};
+  chipStatus: {
+    icon: 'link-simple-slash',
+    iconType: 'light',
+    color: 'text-gray-600',
+  },
+}
 
-export default notConnected;
+export default notConnected
diff --git a/frontend/src/modules/admin/modules/integration/config/status/waiting-for-action.ts b/frontend/src/modules/admin/modules/integration/config/status/waiting-for-action.ts
index 53f8994d8a..7a514fd7d3 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/waiting-for-action.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/waiting-for-action.ts
@@ -1,4 +1,4 @@
-import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index';
+import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index'
 
 const waitingForAction: IntegrationStatusConfig = {
   key: 'waitingForAction',
@@ -19,6 +19,11 @@ const waitingForAction: IntegrationStatusConfig = {
     empty: 'No integrations with a pending action',
     badge: 'bg-yellow-100',
   },
-};
+  chipStatus: {
+    icon: 'triangle-exclamation',
+    iconType: 'solid',
+    color: 'text-yellow-500',
+  },
+}
 
-export default waitingForAction;
+export default waitingForAction
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integration-tabs.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integration-tabs.vue
index 974ca1cee4..0253f0ce7f 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/integration-tabs.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integration-tabs.vue
@@ -3,7 +3,7 @@
     <el-tab-pane v-for="tab in tabs" :key="tab.key" :label="tab.label + ` (${tab.count})`" :name="tab.key">
       <template #label>
         <div class="flex items-center gap-1.5">
-          <lf-icon :name="tab.icon" :size="16" class="text-gray-600" />
+          <lf-icon :name="tab.icon" :size="20" class="text-gray-600" />
           <span>{{ tab.label }} ({{ tab.count }})</span>
         </div>
       </template>
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
index 00af8e08c1..bfe6b15a2c 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
@@ -20,7 +20,7 @@
     <!-- Integration Rows -->
     <div class="divide-y divide-gray-200">
       <integration-row 
-        v-for="integrationStatus in filteredIntegrations" 
+        v-for="integrationStatus in paginatedIntegrations" 
         :key="integrationStatus.id"
         :integrationStatus="integrationStatus"
       />
@@ -29,28 +29,53 @@
     <!-- Footer -->
     <div class="px-5 py-6 flex items-center justify-center gap-4">
       <span class="text-xs text-gray-400">{{ paginationText }}</span>
-      <button class="text-xs text-primary-500 font-semibold hover:text-primary-600">
-        Load more
+      <button 
+        v-if="hasNextPage"
+        class="text-xs text-primary-500 font-semibold hover:text-primary-600 flex items-center gap-1" 
+        :disabled="isFetchingNextPage"
+        :class="{ 'cursor-not-allowed': isFetchingNextPage }"
+        @click="() => fetchNextPage()">
+        <lf-icon name="circle-notch animate-spin" :size="16" class="text-primary-200" v-if="isFetchingNextPage" />
+        <span v-if="isFetchingNextPage" class="text-primary-200">Loading integrations...</span>
+        <span v-else>Load more</span>
       </button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { mockOverviewData } from '@/modules/admin/modules/overview/store/mock-overview-data';
 import IntegrationTabs from '@/modules/admin/modules/overview/components/fragments/integration-tabs.vue';
 import IntegrationRow from '@/modules/admin/modules/overview/components/fragments/integration-row.vue';
 import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
 import { storeToRefs } from 'pinia';
 import { lfIntegrationStatusesTabs } from '@/modules/admin/modules/integration/config/status';
+import { OVERVIEW_API_SERVICE } from '@/modules/admin/modules/overview/services/overview.api.service';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
-const { integrationStatusCount } = storeToRefs(useOverviewStore());
+const { integrationStatusCount, selectedIntegrationId } = storeToRefs(useOverviewStore());
 
 // Mock data for integrations
 const integrations = ref(mockOverviewData);
 
 const activeTab = ref(lfIntegrationStatusesTabs.connecting.key);
+const limit = ref(3);
+
+const params = computed(() => {
+  return {
+    platform: selectedIntegrationId.value || undefined, //activeTab.value,
+    status: ['done'], //lfIntegrationStatusesTabs[activeTab.value].statuses,
+    query: '',
+    limit: limit.value
+  };
+});
+
+const { data, isPending, isError, isFetchingNextPage, fetchNextPage, hasNextPage } = OVERVIEW_API_SERVICE.fetchGlobalIntegrations(params);
+const totalCount = computed(() => {
+  // @ts-expect-error - TanStack Query type inference issue with Vue
+  return data.value?.pages[0].count || 0;
+});
 
 // TODO: remove mock data and use the API
 const filteredIntegrations = computed(() => {
@@ -68,10 +93,14 @@ const filteredIntegrations = computed(() => {
   });
 });
 
+const paginatedIntegrations = computed(() => {
+  // @ts-expect-error - TanStack Query type inference issue with Vue
+  return data.value?.pages.flatMap(page => page.rows) || [];
+});
+
 const paginationText = computed(() => {
-  const total = 120;
-  const showing = filteredIntegrations.value.length;
-  return `${showing} out of ${total} integrations`;
+  const showing = paginatedIntegrations.value.length;
+  return `${showing} out of ${totalCount.value} integrations`;
 });
 
 const overviewTabs = computed(() => {
@@ -80,22 +109,35 @@ const overviewTabs = computed(() => {
     label: 'In progress',
     key: lfIntegrationStatusesTabs.connecting.key,
     count: integrationStatusCount.value[lfIntegrationStatusesTabs.connecting.key] || 0,
-    icon: 'clock',
+    icon: lfIntegrationStatusesTabs.connecting.chipStatus?.icon || lfIntegrationStatusesTabs.connecting.status.icon,
   },
   {
     label: 'Action required',
     key: lfIntegrationStatusesTabs.waitingForAction.key,
     count: integrationStatusCount.value[lfIntegrationStatusesTabs.waitingForAction.key] || 0,
-    icon: 'triangle-exclamation',
+    icon: lfIntegrationStatusesTabs.waitingForAction.chipStatus?.icon || lfIntegrationStatusesTabs.waitingForAction.status.icon,
   },
   {
     label: 'Connection failed',
     key: lfIntegrationStatusesTabs.error.key,
     count: integrationStatusCount.value[lfIntegrationStatusesTabs.error.key] || 0,
-    icon: 'circle-exclamation',
+    icon: lfIntegrationStatusesTabs.error.chipStatus?.icon || lfIntegrationStatusesTabs.error.status.icon,
   },
 ]
 });
+
+watch(data, () => {
+  // if (data.value) {
+  //   integrations.value = data.value.rows;
+  // }
+  console.log(data.value);
+}, { immediate: true });
+
+// watch(isError, () => {
+//   if (isError.value) {
+//     ToastStore.error('Failed to fetch global integrations');
+//   }
+// });
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
index 9b15e31deb..700521aa89 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
@@ -29,11 +29,11 @@
           @click="navigateTo(`/admin#integrations`)"
         >
           <lf-icon
-            v-if="config.status.icon"
-            :name="config.status.icon"
-            :type="config.status.iconType"
+            v-if="config.chipStatus?.icon || config.status.icon"
+            :name="config.chipStatus?.icon || config.status.icon"
+            :type="config.chipStatus?.iconType || config.status.iconType"
             :size="15"
-            :class="config.status.color"
+            :class="config.chipStatus?.color || config.status.color"
           />
           <span class="text-sm text-neutral-900 font-normal">
             {{ config.tabs.text }}
diff --git a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
index 793932d1d3..84629105b1 100644
--- a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
+++ b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
@@ -1,14 +1,21 @@
 import type { QueryFunction } from '@tanstack/vue-query'
 import { type ComputedRef, computed } from 'vue'
-import { useQuery } from '@tanstack/vue-query'
+import { useInfiniteQuery, useQuery } from '@tanstack/vue-query'
 import { TanstackKey } from '@/shared/types/tanstack'
 import authAxios from '@/shared/axios/auth-axios'
-import { GlobalIntegrationStatusCount } from '../types/overview.types'
+import { GlobalIntegrationStatusCount, IntegrationStatusResponse } from '../types/overview.types'
 
 export interface GlobalIntegrationStatusCountQueryParams {
   platform: string | undefined
 }
 
+export interface GlobalIntegrationIntegrationsQueryParams {
+  platform: string | undefined
+  status: string[]
+  query: string
+  limit: number
+}
+
 class OverviewApiService {
   fetchGlobalIntegrationStatusCount(params: ComputedRef<GlobalIntegrationStatusCountQueryParams>) {
     const queryKey = computed(() => [
@@ -37,6 +44,52 @@ class OverviewApiService {
         })
         .then((res) => res.data)
   }
+
+  fetchGlobalIntegrations(params: ComputedRef<GlobalIntegrationIntegrationsQueryParams>) {
+    const queryKey = computed(() => [
+      TanstackKey.GLOBAL_INTEGRATIONS,
+      params.value.platform,
+      params.value.status,
+      params.value.query,
+      params.value.limit,
+    ])
+    const queryFn = computed<QueryFunction<IntegrationStatusResponse>>(() =>
+      this.fetchGlobalIntegrationsQueryFn(() => ({
+        ...params.value,
+      })),
+    )
+
+    return useInfiniteQuery<
+      IntegrationStatusResponse,
+      Error,
+      IntegrationStatusResponse,
+      readonly unknown[],
+      number
+    >({
+      queryKey,
+      //@ts-expect-error - TanStack Query type inference issue with Vue
+      queryFn,
+      getNextPageParam: this.getNextPageIntegrationsParam,
+      initialPageParam: 0,
+    })
+  }
+
+  fetchGlobalIntegrationsQueryFn(
+    query: () => Record<string, string | number | boolean | undefined | string[] | null>,
+  ): QueryFunction<IntegrationStatusResponse> {
+    return ({ pageParam = 0 }) =>
+      authAxios
+        .get('/integration/global', {
+          params: { offset: pageParam, ...query() },
+        })
+        .then((res) => res.data)
+  }
+
+  getNextPageIntegrationsParam(lastPage: IntegrationStatusResponse): number | undefined {
+    const nextPage = lastPage.offset + lastPage.limit
+    const totalRows = lastPage.count
+    return nextPage < totalRows ? nextPage : undefined
+  }
 }
 
 export const OVERVIEW_API_SERVICE = new OverviewApiService()
diff --git a/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts b/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts
index f8e5e4c062..14b1ef0492 100644
--- a/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts
+++ b/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts
@@ -53,6 +53,396 @@ export const mockOverviewData: IntegrationStatus[] = [
     status: 'in-progress',
     statusDetails: '600 data streams being processed...',
   },
+  {
+    grandparentId: 'k601i697-fc29-ab6i-ic20-fk456175jj45',
+    grandparentName: 'Apache Software Foundation',
+    id: 'hf9b4blc-9c5l-9bm8-ikl0-mc2917il44lk',
+    name: 'Apache Kafka',
+    parentId: 'gl5m8md9-bk79-ac69-fm9l-j9if0c5jf976',
+    parentName: 'Apache Software Foundation',
+    platform: 'git',
+    segmentId: 'f5i8kbkc-9ca3-ba9i-gf7j-m88l07ga9792',
+    settings: { remotes: ['https://github.com/apache/kafka'] },
+    status: 'in-progress',
+    statusDetails: '250 out of 2,500 data streams processed...',
+  },
+  {
+    grandparentId: 'l702j708-gd30-bc7j-jd31-gl567286kk56',
+    grandparentName: 'Linux Foundation',
+    id: 'ig0c5cmd-ad6m-acn9-jlm1-nd3028jm55ml',
+    name: 'Kubernetes',
+    parentId: 'hm6n9ne0-cl80-bd70-gn0m-k0jg1d6kg087',
+    parentName: 'Cloud Native Computing Foundation',
+    platform: 'github',
+    segmentId: 'g6j9lcld-odb4-cb0j-hg8k-n99m18hb0803',
+    settings: { repositories: ['kubernetes/kubernetes', 'kubernetes/community'] },
+    status: 'in-progress',
+    statusDetails: '1,200 out of 5,000 data streams processed...',
+  },
+  {
+    grandparentId: 'm803k819-he41-cd8k-ke42-hm678397ll67',
+    grandparentName: 'Eclipse Foundation',
+    id: 'jh1d6dne-be7n-bdo0-kmn2-oe4139kn66nm',
+    name: 'Eclipse IDE',
+    parentId: 'in7o0of1-dm91-ce81-ho1n-l1kh2e7lh198',
+    parentName: 'Eclipse Foundation',
+    platform: 'git',
+    segmentId: 'h7k0mdme-pec5-dc1k-ih9l-o00n29ic1914',
+    settings: { remotes: ['https://github.com/eclipse/eclipse.platform'] },
+    status: 'in-progress',
+    statusDetails: '800 out of 3,200 data streams processed...',
+  },
+  {
+    grandparentId: 'n904l920-if52-de9l-lf53-in789408mm78',
+    grandparentName: 'Mozilla Foundation',
+    id: 'ki2e7eof-cf8o-cep1-lno3-pf5240lo77on',
+    name: 'Firefox Browser',
+    parentId: 'jo8p1pg2-en02-df92-ip2o-m2li3f8mi209',
+    parentName: 'Mozilla Corporation',
+    platform: 'mercurial',
+    segmentId: 'i8l1nenf-qfd6-ed2l-ji0m-p11o30jd2025',
+    settings: { repositories: ['mozilla-central', 'mozilla-beta'] },
+    status: 'in-progress',
+    statusDetails: '450 out of 1,800 data streams processed...',
+  },
+  {
+    grandparentId: 'o005m031-jg63-ef0m-mg64-jo890519nn89',
+    grandparentName: 'Python Software Foundation',
+    id: 'lj3f8fpg-dg9p-dfq2-moq4-qg6351mp88po',
+    name: 'Python Core',
+    parentId: 'kp9q2qh3-fo13-eg03-jq3p-n3mj4g9nj320',
+    parentName: 'Python Software Foundation',
+    platform: 'git',
+    segmentId: 'j9m2ofog-rgd7-fe3m-kj1n-q22p41ke3136',
+    settings: { remotes: ['https://github.com/python/cpython'] },
+    status: 'in-progress',
+    statusDetails: '1,500 out of 6,000 data streams processed...',
+  },
+  {
+    grandparentId: 'p106n142-kh74-fg1n-nh75-kp901620oo90',
+    grandparentName: 'Node.js Foundation',
+    id: 'mk4g9gqh-eh0q-egr3-npq5-rh7462nq99qp',
+    name: 'Node.js Runtime',
+    parentId: 'lq0r3ri4-gp24-fh14-kr4q-o4nk5h0ok431',
+    parentName: 'OpenJS Foundation',
+    platform: 'git',
+    segmentId: 'k0n3pgph-she8-gf4n-lk2o-r33q52of4247',
+    settings: { remotes: ['https://github.com/nodejs/node'] },
+    status: 'in-progress',
+    statusDetails: '900 out of 3,600 data streams processed...',
+  },
+  {
+    grandparentId: 'q207o253-li85-gh2o-oi86-lq012731pp01',
+    grandparentName: 'React Community',
+    id: 'nl5h0hri-fi1r-fhs4-oqr6-si8573or00rq',
+    name: 'React Framework',
+    parentId: 'mr1s4sj5-hq35-gi25-ls5r-p5ol6i1pl542',
+    parentName: 'Meta Open Source',
+    platform: 'github',
+    segmentId: 'l1o4qhqi-tif9-hg5o-ml3p-s44r63pg5358',
+    settings: { repositories: ['facebook/react', 'reactjs/react.dev'] },
+    status: 'in-progress',
+    statusDetails: '2,100 out of 8,400 data streams processed...',
+  },
+  {
+    grandparentId: 'r308p364-mj96-hi3p-pj97-mr123842qq12',
+    grandparentName: 'Vue.js Community',
+    id: 'om6i1isj-gj2s-git5-prr7-tj9684ps11sr',
+    name: 'Vue.js Framework',
+    parentId: 'ns2t5tk6-ir46-hj36-mt6s-q6pm7j2qm653',
+    parentName: 'Vue.js Team',
+    platform: 'github',
+    segmentId: 'm2p5riir-ujg0-ih6p-nm4q-t55s74qh6469',
+    settings: { repositories: ['vuejs/core', 'vuejs/vue'] },
+    status: 'in-progress',
+    statusDetails: '750 out of 3,000 data streams processed...',
+  },
+  {
+    grandparentId: 's409q475-nk07-ij4q-qk08-ns234953rr23',
+    grandparentName: 'Angular Team',
+    id: 'pn7j2jtk-hk3t-hju6-qss8-uk0795qt22ts',
+    name: 'Angular Framework',
+    parentId: 'ot3u6ul7-js57-ik47-nu7t-r7qn8k3rn764',
+    parentName: 'Google Open Source',
+    platform: 'git',
+    segmentId: 'n3q6sjjs-vkh1-ji7q-on5r-u66t85ri7570',
+    settings: { remotes: ['https://github.com/angular/angular'] },
+    status: 'in-progress',
+    statusDetails: '1,800 out of 7,200 data streams processed...',
+  },
+  {
+    grandparentId: 't50ar586-ol18-jk5r-rl19-ot345064ss34',
+    grandparentName: 'Django Software Foundation',
+    id: 'qo8k3kul-il4u-ikv7-rtt9-vl1806ru33ut',
+    name: 'Django Framework',
+    parentId: 'pu4v7vm8-kt68-jl58-ov8u-s8rf9l4sf875',
+    parentName: 'Django Software Foundation',
+    platform: 'git',
+    segmentId: 'o4r7tkuk-wli2-kj8r-po6s-v77u96sj8681',
+    settings: { remotes: ['https://github.com/django/django'] },
+    status: 'in-progress',
+    statusDetails: '650 out of 2,600 data streams processed...',
+  },
+  {
+    grandparentId: 'u601s697-pm29-kl6s-sm20-pu456175tt45',
+    grandparentName: 'Ruby Community',
+    id: 'rp9l4lvn-jm5v-jlw8-suv0-wm2917sv44vl',
+    name: 'Ruby on Rails',
+    parentId: 'qv5w8wn9-lu79-km69-pw9v-t9sg0m5tg986',
+    parentName: 'Rails Core Team',
+    platform: 'git',
+    segmentId: 'p5s8ulvl-xmj3-lk9s-qp7t-w88v07tk9792',
+    settings: { remotes: ['https://github.com/rails/rails'] },
+    status: 'in-progress',
+    statusDetails: '1,100 out of 4,400 data streams processed...',
+  },
+  {
+    grandparentId: 'v702t708-qn30-lm7t-tn31-qv567286uu56',
+    grandparentName: 'Laravel Community',
+    id: 'sq0m5mwo-kn6w-kmx9-tvw1-xn3028tw55wm',
+    name: 'Laravel Framework',
+    parentId: 'rw6x9xo0-mv80-ln70-qw0w-u0th1n6uh087',
+    parentName: 'Laravel LLC',
+    platform: 'github',
+    segmentId: 'q6t9vmwm-ynk4-ml0t-rq8u-x99w18ul0803',
+    settings: { repositories: ['laravel/framework', 'laravel/laravel'] },
+    status: 'in-progress',
+    statusDetails: '850 out of 3,400 data streams processed...',
+  },
+  {
+    grandparentId: 'w803u819-ro41-mn8u-uo42-rw678397vv67',
+    grandparentName: 'Spring Community',
+    id: 'tr1n6nxp-lo7x-lny0-uwx2-yo4139ux66xn',
+    name: 'Spring Framework',
+    parentId: 'sx7y0yp1-nw91-mo81-rx1y-v1ui2o7vi198',
+    parentName: 'VMware Tanzu',
+    platform: 'git',
+    segmentId: 'r7u0wnxn-zol5-nm1u-sr9v-y00x29vm1914',
+    settings: { remotes: ['https://github.com/spring-projects/spring-framework'] },
+    status: 'in-progress',
+    statusDetails: '1,300 out of 5,200 data streams processed...',
+  },
+  {
+    grandparentId: 'x904v920-sp52-no9v-vp53-sx789408ww78',
+    grandparentName: 'Express.js Community',
+    id: 'us2o7oyq-mp8y-moz1-vxy3-zp5240vy77yo',
+    name: 'Express.js Framework',
+    parentId: 'ty8z1zq2-ox02-np92-sy2z-w2vj3p8wj209',
+    parentName: 'OpenJS Foundation',
+    platform: 'github',
+    segmentId: 's8v1xoyo-apm6-on2v-ts0w-z11y30wn2025',
+    settings: { repositories: ['expressjs/express'] },
+    status: 'in-progress',
+    statusDetails: '400 out of 1,600 data streams processed...',
+  },
+  {
+    grandparentId: 'y005w031-tq63-op0w-wq64-ty890519xx89',
+    grandparentName: 'Fastify Community',
+    id: 'vt3p8pzr-nq9z-npa2-wyz4-aq6351wz88zp',
+    name: 'Fastify Framework',
+    parentId: 'uz9a2ar3-py13-oq03-tz3a-x3wk4q9xk320',
+    parentName: 'Fastify Team',
+    platform: 'git',
+    segmentId: 't9w2ypzp-bqn7-po3w-ut1x-a22z41xo3136',
+    settings: { remotes: ['https://github.com/fastify/fastify'] },
+    status: 'in-progress',
+    statusDetails: '550 out of 2,200 data streams processed...',
+  },
+  {
+    grandparentId: 'z106x142-ur74-pq1x-xr75-uz901620yy90',
+    grandparentName: 'NestJS Community',
+    id: 'wu4q9qas-or0a-oqb3-xza5-br7462ya99aq',
+    name: 'NestJS Framework',
+    parentId: 'va0b3bs4-qz24-pr14-ua4b-y4xl5r0yl431',
+    parentName: 'NestJS Team',
+    platform: 'github',
+    segmentId: 'u0x3zqaq-cro8-qq4x-vu2y-b33a52zp4247',
+    settings: { repositories: ['nestjs/nest'] },
+    status: 'in-progress',
+    statusDetails: '700 out of 2,800 data streams processed...',
+  },
+  {
+    grandparentId: 'a207y253-vs85-qr2y-ys86-va012731zz01',
+    grandparentName: 'Next.js Community',
+    id: 'xv5r0rbt-ps1b-prc4-yab6-cs8573zb00br',
+    name: 'Next.js Framework',
+    parentId: 'wb1c4ct5-ra35-qs25-vb5c-z5ym6s1zm542',
+    parentName: 'Vercel Inc.',
+    platform: 'git',
+    segmentId: 'v1y4arbs-dsp9-rr5y-wv3z-c44b63aq5358',
+    settings: { remotes: ['https://github.com/vercel/next.js'] },
+    status: 'in-progress',
+    statusDetails: '1,600 out of 6,400 data streams processed...',
+  },
+  {
+    grandparentId: 'b308z364-wt96-rs3z-zt97-wb123842aa12',
+    grandparentName: 'Nuxt.js Community',
+    id: 'yw6s1scu-qt2c-qsd5-zbc7-dt9684ac11cs',
+    name: 'Nuxt.js Framework',
+    parentId: 'xc2d5du6-sb46-rt36-wc6d-a6zn7t2an653',
+    parentName: 'NuxtLabs',
+    platform: 'github',
+    segmentId: 'w2z5bsct-etq0-sr6z-xw4a-d55c74br6469',
+    settings: { repositories: ['nuxt/nuxt'] },
+    status: 'in-progress',
+    statusDetails: '950 out of 3,800 data streams processed...',
+  },
+  {
+    grandparentId: 'c409a475-xu07-st4a-au08-xc234953bb23',
+    grandparentName: 'Gatsby Community',
+    id: 'zx7t2tdv-ru3d-rte6-acd8-eu0795bd22dt',
+    name: 'Gatsby Framework',
+    parentId: 'yd3e6ev7-tc57-su47-xd7e-b7ao8u3bo764',
+    parentName: 'Gatsby Inc.',
+    platform: 'git',
+    segmentId: 'x3a6ctdu-fuq1-ts7a-yx5b-e66d85cs7570',
+    settings: { remotes: ['https://github.com/gatsbyjs/gatsby'] },
+    status: 'in-progress',
+    statusDetails: '1,050 out of 4,200 data streams processed...',
+  },
+  {
+    grandparentId: 'd50bb586-yv18-tu5b-bv19-yd345064cc34',
+    grandparentName: 'Svelte Community',
+    id: 'ay8u3uew-sv4e-suf7-bde9-fv1806ce33eu',
+    name: 'Svelte Framework',
+    parentId: 'ze4f7fw8-ud68-tv58-ye8f-c8bp9v4cp875',
+    parentName: 'Svelte Team',
+    platform: 'github',
+    segmentId: 'y4b7duev-gvr2-ut8b-zy6c-f77e96dt8681',
+    settings: { repositories: ['sveltejs/svelte'] },
+    status: 'in-progress',
+    statusDetails: '600 out of 2,400 data streams processed...',
+  },
+  {
+    grandparentId: 'e601c697-zw29-uv6c-cw20-ze456175dd45',
+    grandparentName: 'Solid.js Community',
+    id: 'bz9v4vfx-tw5f-tvg8-cef0-gw2917df44fv',
+    name: 'Solid.js Framework',
+    parentId: 'af5g8gx9-ve79-uw69-zf9g-d9cq0w5eq986',
+    parentName: 'Solid Team',
+    platform: 'git',
+    segmentId: 'z5c8evfw-hwt3-vu9c-az7d-g88f07eu9792',
+    settings: { remotes: ['https://github.com/solidjs/solid'] },
+    status: 'in-progress',
+    statusDetails: '350 out of 1,400 data streams processed...',
+  },
+  {
+    grandparentId: 'f702d708-ax30-vw7d-dx31-af567286ee56',
+    grandparentName: 'Qwik Community',
+    id: 'ca0w5wgy-ux6g-uwh9-dfw1-hx3028eg55gw',
+    name: 'Qwik Framework',
+    parentId: 'bg6h9hy0-wf80-vx70-ag0h-e0dr1x6fr087',
+    parentName: 'Builder.io',
+    platform: 'github',
+    segmentId: 'a6d9fwgw-ixt4-wv0d-ba8e-h99g18fv0803',
+    settings: { repositories: ['BuilderIO/qwik'] },
+    status: 'in-progress',
+    statusDetails: '300 out of 1,200 data streams processed...',
+  },
+  {
+    grandparentId: 'g803e819-by41-wx8e-ey42-bg678397ff67',
+    grandparentName: 'Remix Community',
+    id: 'db1x6xhz-vy7h-vxi0-egx2-iy4139fh66hx',
+    name: 'Remix Framework',
+    parentId: 'ch7i0iz1-xg91-wy81-bh1i-f1es2y7gs198',
+    parentName: 'Remix Software Inc.',
+    platform: 'git',
+    segmentId: 'b7e0gxhx-jyu5-xw1e-cb9f-i00h29gw1914',
+    settings: { remotes: ['https://github.com/remix-run/remix'] },
+    status: 'in-progress',
+    statusDetails: '800 out of 3,200 data streams processed...',
+  },
+  {
+    grandparentId: 'h904f920-cz52-xy9f-fz53-ch789408gg78',
+    grandparentName: 'Astro Community',
+    id: 'ec2y7yia-wz8i-wyj1-fhy3-jz5240gi77iy',
+    name: 'Astro Framework',
+    parentId: 'di8j1ja2-yh02-xz92-ci2j-g2ft3z8ht209',
+    parentName: 'The Astro Technology Company',
+    platform: 'github',
+    segmentId: 'c8f1hyhz-kzv6-xy2f-dc0g-j11i30hx2025',
+    settings: { repositories: ['withastro/astro'] },
+    status: 'in-progress',
+    statusDetails: '1,200 out of 4,800 data streams processed...',
+  },
+  {
+    grandparentId: 'i005g031-da63-yz0g-ga64-di890519hh89',
+    grandparentName: 'Vite Community',
+    id: 'fd3z8zjb-xa9j-xzk2-giz4-ka6351hj88jz',
+    name: 'Vite Build Tool',
+    parentId: 'ej9k2kb3-zi13-ya03-dj3k-h3gt4a9ik320',
+    parentName: 'Vite Team',
+    platform: 'git',
+    segmentId: 'd9g2izkz-lav7-yz3g-ed1h-k22j41iy3136',
+    settings: { remotes: ['https://github.com/vitejs/vite'] },
+    status: 'in-progress',
+    statusDetails: '1,400 out of 5,600 data streams processed...',
+  },
+  {
+    grandparentId: 'j106h142-eb74-za1h-hb75-ej901620ii90',
+    grandparentName: 'Webpack Community',
+    id: 'ge4a9akc-yb0k-yam3-hjk5-lb7462ik99ka',
+    name: 'Webpack Bundler',
+    parentId: 'fk0l3lc4-aj24-zb14-ek4l-i4hu5b0jl431',
+    parentName: 'JS Foundation',
+    platform: 'github',
+    segmentId: 'e0h3jakb-mbw8-za4h-fe2i-l33k52jz4247',
+    settings: { repositories: ['webpack/webpack'] },
+    status: 'in-progress',
+    statusDetails: '750 out of 3,000 data streams processed...',
+  },
+  {
+    grandparentId: 'k207i253-fc85-ab2i-ic86-fk012731jj01',
+    grandparentName: 'Rollup Community',
+    id: 'hf5b0bld-zc1l-zbn4-ikl6-mc8573jl00lb',
+    name: 'Rollup Bundler',
+    parentId: 'gl1m4md5-bk35-ac25-fl5m-j5iv6c1km542',
+    parentName: 'Rollup Team',
+    platform: 'git',
+    segmentId: 'f1i4kblc-ncx9-ab5i-gf3j-m44l63ka5358',
+    settings: { remotes: ['https://github.com/rollup/rollup'] },
+    status: 'in-progress',
+    statusDetails: '500 out of 2,000 data streams processed...',
+  },
+  {
+    grandparentId: 'l308j364-gd96-bc3j-jd97-gl123842kk12',
+    grandparentName: 'Parcel Community',
+    id: 'ig6c1cme-ad2m-acn5-jlm7-nd9684km11mc',
+    name: 'Parcel Bundler',
+    parentId: 'hm2n5ne6-cl46-bd36-gm6n-k6jw7d2ln653',
+    parentName: 'Parcel Team',
+    platform: 'github',
+    segmentId: 'g2j5lcmd-ody0-bc6j-hg4k-n55m74lb6469',
+    settings: { repositories: ['parcel-bundler/parcel'] },
+    status: 'in-progress',
+    statusDetails: '650 out of 2,600 data streams processed...',
+  },
+  {
+    grandparentId: 'm409k475-he07-cd4k-ke08-hm234953ll23',
+    grandparentName: 'ESBuild Community',
+    id: 'jh7d2dnf-be3n-bdo6-kmn8-oe0795ln22mn',
+    name: 'ESBuild Tool',
+    parentId: 'in3o6of7-dm57-ce47-hn7o-l7kx8e3mo764',
+    parentName: 'Evan Wallace',
+    platform: 'git',
+    segmentId: 'h3k6mdne-pey1-cd7k-ih5l-o66n85mc7570',
+    settings: { remotes: ['https://github.com/evanw/esbuild'] },
+    status: 'in-progress',
+    statusDetails: '900 out of 3,600 data streams processed...',
+  },
+  {
+    grandparentId: 'n50al586-if18-de5l-lf19-in345064mm34',
+    grandparentName: 'SWC Community',
+    id: 'ki8e3eog-cf4o-cep7-lno9-pf1806mo33no',
+    name: 'SWC Compiler',
+    parentId: 'jo4p7pg8-en68-df58-io8p-m8ly9f4np875',
+    parentName: 'SWC Team',
+    platform: 'github',
+    segmentId: 'i4l7neog-qfz2-de8l-ji6m-p77o96nd8681',
+    settings: { repositories: ['swc-project/swc'] },
+    status: 'in-progress',
+    statusDetails: '1,100 out of 4,400 data streams processed...',
+  },
   // Action Required integrations
   {
     grandparentId: 'h308f364-c9g6-783f-f9d7-ch123842gg12',
diff --git a/frontend/src/modules/admin/modules/overview/types/overview.types.ts b/frontend/src/modules/admin/modules/overview/types/overview.types.ts
index 07015c68b2..ab4d89624f 100644
--- a/frontend/src/modules/admin/modules/overview/types/overview.types.ts
+++ b/frontend/src/modules/admin/modules/overview/types/overview.types.ts
@@ -28,6 +28,13 @@ export interface IntegrationStatus {
   statusDetails: string
 }
 
+export interface IntegrationStatusResponse {
+  count: number
+  limit: number
+  offset: number
+  rows: IntegrationStatus[]
+}
+
 export interface GlobalIntegrationStatusCount {
   status: string
   count: number
diff --git a/frontend/src/shared/types/tanstack.ts b/frontend/src/shared/types/tanstack.ts
index 7e2f55a2b5..b63217f8e1 100644
--- a/frontend/src/shared/types/tanstack.ts
+++ b/frontend/src/shared/types/tanstack.ts
@@ -8,4 +8,5 @@ export enum TanstackKey {
   ORGANIZATION_MERGE_SUGGESTIONS_COUNT = 'organization-merge-suggestions-count',
   ORGANIZATIONS_LIST = 'organizations-list',
   GLOBAL_INTEGRATION_STATUS_COUNT = 'global-integration-status-count',
+  GLOBAL_INTEGRATIONS = 'global-integrations',
 }

From c0bce7469443b50e07a33d7f8aaa78f6f3ec5097 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Tue, 9 Dec 2025 15:10:46 +0800
Subject: [PATCH 25/51] chore: added sub project filter dropdown

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../components/fragments/integration-row.vue  |  12 +-
 .../components/fragments/project-filter.vue   |  24 ++-
 .../fragments/project-group-filter.vue        |  30 +++-
 .../fragments/sub-project-filter.vue          | 136 ++++++++++++++
 .../sections/integration-details.vue          | 167 +++++++++---------
 .../components/sections/overview-filter.vue   |   4 +-
 .../overview/components/sections/summary.vue  |   7 +-
 .../overview/services/overview.api.service.ts |  28 +++
 .../modules/overview/store/overview.store.ts  |  10 +-
 frontend/src/shared/types/tanstack.ts         |   1 +
 10 files changed, 314 insertions(+), 105 deletions(-)
 create mode 100644 frontend/src/modules/admin/modules/overview/components/fragments/sub-project-filter.vue

diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
index 5e15154cfd..b2bdfc77c8 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
@@ -12,12 +12,12 @@
     </div>
 
     <!-- Project Column -->
-    <div class="w-2/6">
-      <div class="text-sm font-medium text-gray-900">{{ integrationStatus.name }}</div>
-      <div class="text-xs text-gray-500 flex">
-        <span class="truncate">{{ integrationStatus.grandparentName }}</span>
-        <span class="text-gray-500">></span>
-        <span class="truncate">{{ integrationStatus.parentName }}</span>
+    <div class="w-2/6 min-w-0">
+      <div class="text-sm font-medium text-gray-900 truncate">{{ integrationStatus.name }}</div>
+      <div class="text-xs text-gray-500 flex items-center min-w-0">
+        <span class="truncate flex-shrink min-w-0">{{ integrationStatus.grandparentName }}</span>
+        <span class="text-gray-500 flex-shrink-0 px-1">></span>
+        <span class="truncate flex-shrink min-w-0">{{ integrationStatus.parentName }}</span>
       </div>
     </div>
 
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
index 3a51c3585f..cdca412f40 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
@@ -1,12 +1,12 @@
 <template>
   <lfx-dropdown-select
-    v-model="selectedProject"
+    v-model="selectedProjectId"
     width="255px"
-    match-width="false"
+    :match-width="false"
     dropdown-class="max-h-80"
     placement="bottom-end"
   >
-    <template #trigger="{ selectedOption }">
+    <template #trigger>
       <lfx-dropdown-selector
         size="medium"
         type="filled"
@@ -21,7 +21,7 @@
             :size="16"
           />
           <span class="text-sm text-neutral-900 truncate">
-            {{ trimDisplay(selectedOption?.value?.name || '') || 'All projects' }}
+            {{ trimDisplay(selectedProject?.name || '') || 'All projects' }}
           </span>
         </div>
       </lfx-dropdown-selector>
@@ -34,7 +34,7 @@
           value="all"
           label="All projects"
           :selected="!selectedProject"
-          @click="selectedProject = null"
+          @click="selectedProjectId = ''"
           :class="{
             '!bg-blue-50': !selectedProject,
           }"
@@ -82,6 +82,7 @@
 import {
   ref,
   computed,
+  watch,
 } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
@@ -96,7 +97,7 @@ import LfxDropdownSeparator from '@/ui-kit/lfx/dropdown/dropdown-separator.vue';
 import LfxDropdownSearch from '@/ui-kit/lfx/dropdown/dropdown-search.vue';
 
 const overviewStore = useOverviewStore();
-const { selectedProject } = storeToRefs(overviewStore);
+const { selectedProject, selectedProjectId } = storeToRefs(overviewStore);
 
 const searchQuery = ref('');
 const searchValue = useDebounce(searchQuery, 300);
@@ -110,8 +111,7 @@ const trimDisplay = (name: string) => {
 };
 
 const selectProject = (projectId: string) => {
-  const project = props.projects.find(p => p.id === projectId);
-  selectedProject.value = project || null;
+  selectedProjectId.value = projectId;
 };
 
 const projectsList = computed(() => {
@@ -125,6 +125,14 @@ const projectsList = computed(() => {
     name: project.name,
   }));
 });
+
+watch(selectedProjectId, (newVal) => {
+  if (newVal && newVal !== '') {
+    selectedProject.value = props.projects.find(p => p.id === newVal) || null;
+  } else {
+    selectedProject.value = null;
+  }
+}, { immediate: true });
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue
index 9abcc37759..782c99d88e 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue
@@ -1,8 +1,8 @@
 <template>
   <lfx-dropdown-select
-    v-model="selectedProjectGroup"
+    v-model="selectedProjectGroupId"
     width="255px"
-    match-width="false"
+    :match-width="false"
     dropdown-class="max-h-80"
     placement="bottom-end"
   >
@@ -21,7 +21,7 @@
             :size="16"
           />
           <span class="text-sm text-neutral-900 truncate">
-            {{ trimDisplay(selectedOption?.value?.name || '') || 'All project groups' }}
+            {{ trimDisplay(selectedProjectGroup?.name || '') || 'All project groups' }}
           </span>
         </div>
       </lfx-dropdown-selector>
@@ -34,7 +34,7 @@
           value="all"
           label="All project groups"
           :selected="!selectedProjectGroup"
-          @click="selectedProjectGroup = null"
+          @click="selectedProjectGroupId = ''"
           :class="{
             '!bg-blue-50': !selectedProjectGroup,
           }"
@@ -75,7 +75,7 @@
           :value="projectGroup.id"
           :label="projectGroup.name"
           :selected="selectedProjectGroup?.id === projectGroup.id"
-          @click="selectedProjectGroup = projectGroup"
+          @click="selectedProjectGroupId = projectGroup.id"
           :class="{
             '!bg-blue-50': selectedProjectGroup?.id === projectGroup.id,
           }"
@@ -123,7 +123,13 @@ import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
 import AppLfLoadMore from './load-more.vue';
 
 const overviewStore = useOverviewStore();
-const { selectedProjectGroup } = storeToRefs(overviewStore);
+const { 
+  selectedProjectGroup, 
+  selectedProjectGroupId, 
+  selectedProjectId, 
+  selectedSubProjectId, 
+  selectedProject, 
+  selectedSubProject } = storeToRefs(overviewStore);
 
 const searchQuery = ref('');
 const searchValue = useDebounce(searchQuery, 300);
@@ -179,6 +185,18 @@ watch(error, (err) => {
     ToastStore.error('Something went wrong while fetching project groups');
   }
 });
+
+watch(selectedProjectGroupId, (newVal) => {
+  if (newVal && newVal !== '') {
+    selectedProjectGroup.value = projectGroupsList.value.find(pg => pg.id === newVal) || null;
+  } else {
+    selectedProjectGroup.value = null;
+    selectedProjectId.value = '';
+    selectedSubProjectId.value = '';
+    selectedProject.value = null;
+    selectedSubProject.value = null;
+  }
+}, { immediate: true });
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/sub-project-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/sub-project-filter.vue
new file mode 100644
index 0000000000..b1131df880
--- /dev/null
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/sub-project-filter.vue
@@ -0,0 +1,136 @@
+<template>
+  <lfx-dropdown-select
+    v-model="selectedProjectId"
+    width="255px"
+    :match-width="false"
+    dropdown-class="max-h-80"
+    placement="bottom-end"
+    :disabled="isPending"
+  >
+    <template #trigger>
+      <lfx-dropdown-selector
+        size="medium"
+        type="filled"
+        class="flex items-center justify-center w-full !rounded-l-none"
+      >
+        <div class="flex items-center gap-2">
+          <lf-icon
+            name="folders"
+            :size="16"
+          />
+          <span class="text-sm text-neutral-900 truncate">
+            {{ trimDisplay(selectedSubProject?.name || '') || 'All sub-projects' }}
+          </span>
+        </div>
+      </lfx-dropdown-selector>
+    </template>
+
+    <template #default>
+      <div class="sticky -top-1 z-10 bg-white w-full -mt-1 pt-1 flex flex-col gap-1">
+        <!-- All projects option -->
+        <lfx-dropdown-item
+          value="all"
+          label="All projects"
+          :selected="!selectedSubProject"
+          @click="selectedProjectId = ''"
+          :class="{
+            '!bg-blue-50': !selectedSubProject,
+          }"
+        />
+
+        <lfx-dropdown-separator />
+
+        <!-- Search input -->
+        <lfx-dropdown-search
+          v-model="searchQuery"
+          placeholder="Search projects..."
+          lazy
+          class=""
+        />
+
+        <lfx-dropdown-separator />
+      </div>
+
+      <!-- Projects list -->
+      <div
+        v-if="!subProjectsList.length && searchQuery"
+        class="py-4 px-3 text-sm text-neutral-500 text-center"
+      >
+        No projects found
+      </div>
+
+      <template v-else>
+        <lfx-dropdown-item
+          v-for="subProject in subProjectsList"
+          :key="subProject.id"
+          :value="subProject.id"
+          :label="subProject.name"
+          :selected="selectedSubProject?.id === subProject.id"
+          @click="selectedSubProjectId = subProject.id"
+          :class="{
+            '!bg-blue-50': selectedSubProject?.id === subProject.id,
+          }"
+        />
+      </template>
+    </template>
+  </lfx-dropdown-select>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  watch,
+} from 'vue';
+import { storeToRefs } from 'pinia';
+import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { useDebounce } from '@vueuse/core';
+
+import { Project, SubProject } from '@/modules/lf/segments/types/Segments';
+import LfxDropdownSelect from '@/ui-kit/lfx/dropdown/dropdown-select.vue';
+import LfxDropdownSelector from '@/ui-kit/lfx/dropdown/dropdown-selector.vue';
+import LfxDropdownItem from '@/ui-kit/lfx/dropdown/dropdown-item.vue';
+import LfxDropdownSeparator from '@/ui-kit/lfx/dropdown/dropdown-separator.vue';
+import LfxDropdownSearch from '@/ui-kit/lfx/dropdown/dropdown-search.vue';
+import { OVERVIEW_API_SERVICE } from '@/modules/admin/modules/overview/services/overview.api.service';
+
+const overviewStore = useOverviewStore();
+const { selectedProjectId, selectedSubProjectId, selectedSubProject } = storeToRefs(overviewStore);
+
+const searchQuery = ref('');
+const searchValue = useDebounce(searchQuery, 300);
+
+// const props = defineProps<{
+//   subProjects: Project[];
+// }>();
+
+const params = computed(() => selectedProjectId.value || '');
+
+const { data, isPending } = OVERVIEW_API_SERVICE.fetchProjectById(params);
+
+const trimDisplay = (name: string) => {
+  return name.length > 20 ? `${name.slice(0, 20)}...` : name;
+};
+
+const subProjectsList = computed<SubProject[]>(() => {
+  return (data.value?.subprojects || []).filter((subProject) => {
+    if (!searchValue.value) return true;
+    return subProject.name.toLowerCase().includes(searchValue.value.toLowerCase());
+  });
+});
+
+watch(selectedSubProjectId, (newVal) => {
+  if (newVal && newVal !== '') {
+    selectedSubProject.value = subProjectsList.value?.find(p => p.id === newVal) || null;
+  } else {
+    selectedSubProject.value = null;
+  }
+}, { immediate: true });
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppLfSubProjectFilter',
+};
+</script>
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
index bfe6b15a2c..8e4ed5b25d 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
@@ -7,39 +7,63 @@
       </h3>
       
       <!-- Tabs -->
-      <integration-tabs :tabs="overviewTabs" :modelValue="activeTab" @update:modelValue="activeTab = $event" />
+      <integration-tabs 
+        v-if="!isEmpty"
+        :tabs="overviewTabs" 
+        :modelValue="activeTab" 
+        @update:modelValue="activeTab = $event" />
     </div>
 
-    <!-- Table Headers -->
-    <div class="flex items-center gap-4 pt-5 pb-3 px-5 text-xs font-semibold text-gray-400">
-      <div class="w-1/6">Integration</div>
-      <div class="w-2/6">Project</div>
-      <div class="w-3/6">Status</div>
-    </div>
-
-    <!-- Integration Rows -->
-    <div class="divide-y divide-gray-200">
-      <integration-row 
-        v-for="integrationStatus in paginatedIntegrations" 
-        :key="integrationStatus.id"
-        :integrationStatus="integrationStatus"
-      />
-    </div>
-
-    <!-- Footer -->
-    <div class="px-5 py-6 flex items-center justify-center gap-4">
-      <span class="text-xs text-gray-400">{{ paginationText }}</span>
-      <button 
-        v-if="hasNextPage"
-        class="text-xs text-primary-500 font-semibold hover:text-primary-600 flex items-center gap-1" 
-        :disabled="isFetchingNextPage"
-        :class="{ 'cursor-not-allowed': isFetchingNextPage }"
-        @click="() => fetchNextPage()">
-        <lf-icon name="circle-notch animate-spin" :size="16" class="text-primary-200" v-if="isFetchingNextPage" />
-        <span v-if="isFetchingNextPage" class="text-primary-200">Loading integrations...</span>
-        <span v-else>Load more</span>
-      </button>
-    </div>
+    <template v-if="isPending">
+      <div class="flex items-center justify-center py-10 h-80">
+        <lf-spinner size="1rem" />
+      </div>
+    </template>
+    <template v-else>
+      <template v-if="isEmpty">
+        <div class="flex flex-col items-center justify-center py-15 h-80">
+          <lf-icon name="plug-circle-check" :size="64" class="text-gray-300 mb-6" />
+          <h5 class="text-center mb-3 text-base">
+            Everything looks good
+          </h5>
+          <p class="text-center text-gray-500 text-small">
+            No integrations are currently in progress, requiring action, or have failed connections according to your filter criteria.
+          </p>
+        </div>
+      </template>
+      <template v-else>
+        <!-- Table Headers -->
+        <div class="flex items-center gap-4 pt-5 pb-3 px-5 text-xs font-semibold text-gray-400">
+          <div class="w-1/6">Integration</div>
+          <div class="w-2/6">Project</div>
+          <div class="w-3/6">Status</div>
+        </div>
+
+        <!-- Integration Rows -->
+        <div class="divide-y divide-gray-200">
+          <integration-row 
+            v-for="integrationStatus in paginatedIntegrations" 
+            :key="integrationStatus.id"
+            :integrationStatus="integrationStatus"
+          />
+        </div>
+
+        <!-- Footer -->
+        <div class="px-5 py-6 flex items-center justify-center gap-4">
+          <span class="text-xs text-gray-400">{{ paginationText }}</span>
+          <button 
+            v-if="hasNextPage"
+            class="text-xs text-primary-500 font-semibold hover:text-primary-600 flex items-center gap-1" 
+            :disabled="isFetchingNextPage"
+            :class="{ 'cursor-not-allowed': isFetchingNextPage }"
+            @click="() => fetchNextPage()">
+            <lf-icon name="circle-notch animate-spin" :size="16" class="text-primary-200" v-if="isFetchingNextPage" />
+            <span v-if="isFetchingNextPage" class="text-primary-200">Loading integrations...</span>
+            <span v-else>Load more</span>
+          </button>
+        </div>
+      </template>
+    </template>
   </div>
 </template>
 
@@ -53,55 +77,12 @@ import { storeToRefs } from 'pinia';
 import { lfIntegrationStatusesTabs } from '@/modules/admin/modules/integration/config/status';
 import { OVERVIEW_API_SERVICE } from '@/modules/admin/modules/overview/services/overview.api.service';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
+import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
 
 const { integrationStatusCount, selectedIntegrationId } = storeToRefs(useOverviewStore());
 
-// Mock data for integrations
-const integrations = ref(mockOverviewData);
-
 const activeTab = ref(lfIntegrationStatusesTabs.connecting.key);
-const limit = ref(3);
-
-const params = computed(() => {
-  return {
-    platform: selectedIntegrationId.value || undefined, //activeTab.value,
-    status: ['done'], //lfIntegrationStatusesTabs[activeTab.value].statuses,
-    query: '',
-    limit: limit.value
-  };
-});
-
-const { data, isPending, isError, isFetchingNextPage, fetchNextPage, hasNextPage } = OVERVIEW_API_SERVICE.fetchGlobalIntegrations(params);
-const totalCount = computed(() => {
-  // @ts-expect-error - TanStack Query type inference issue with Vue
-  return data.value?.pages[0].count || 0;
-});
-
-// TODO: remove mock data and use the API
-const filteredIntegrations = computed(() => {
-  return integrations.value.filter(integration => {
-    switch (activeTab.value) {
-      case lfIntegrationStatusesTabs.connecting.key:
-        return integration.status === 'in-progress';
-      case lfIntegrationStatusesTabs.waitingForAction.key:
-        return integration.status === 'mapping' || integration.status === 'pending-action';
-      case lfIntegrationStatusesTabs.error.key:
-        return integration.status === 'error';
-      default:
-        return true;
-    }
-  });
-});
-
-const paginatedIntegrations = computed(() => {
-  // @ts-expect-error - TanStack Query type inference issue with Vue
-  return data.value?.pages.flatMap(page => page.rows) || [];
-});
-
-const paginationText = computed(() => {
-  const showing = paginatedIntegrations.value.length;
-  return `${showing} out of ${totalCount.value} integrations`;
-});
+const limit = ref(10);
 
 const overviewTabs = computed(() => {
   return [
@@ -126,12 +107,34 @@ const overviewTabs = computed(() => {
 ]
 });
 
-watch(data, () => {
-  // if (data.value) {
-  //   integrations.value = data.value.rows;
-  // }
-  console.log(data.value);
-}, { immediate: true });
+const params = computed(() => {
+  return {
+    platform: selectedIntegrationId.value || undefined, //activeTab.value,
+    status: ['done'], //lfIntegrationStatusesTabs[activeTab.value].statuses,
+    query: '',
+    limit: limit.value
+  };
+});
+
+const { data, isError, isPending, isFetchingNextPage, fetchNextPage, hasNextPage } = OVERVIEW_API_SERVICE.fetchGlobalIntegrations(params);
+const totalCount = computed(() => {
+  // @ts-expect-error - TanStack Query type inference issue with Vue
+  return data.value?.pages[0].count || 0;
+});
+
+const paginatedIntegrations = computed(() => {
+  // @ts-expect-error - TanStack Query type inference issue with Vue
+  return data.value?.pages.flatMap(page => page.rows) || [];
+});
+
+const isEmpty = computed(() => {
+  return overviewTabs.value.every(tab => tab.count === 0);
+});
+
+const paginationText = computed(() => {
+  const showing = paginatedIntegrations.value.length;
+  return `${showing} out of ${totalCount.value} integrations`;
+});
 
 // watch(isError, () => {
 //   if (isError.value) {
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/overview-filter.vue b/frontend/src/modules/admin/modules/overview/components/sections/overview-filter.vue
index 95df6f6bb5..009dda22db 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/overview-filter.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/overview-filter.vue
@@ -2,6 +2,7 @@
   <div class="flex items-center">
     <app-lf-project-group-filter />
     <app-lf-project-filter :projects="projects" v-if="selectedProjectGroup && projects.length > 0" />
+    <app-lf-sub-project-filter :project-id="selectedProjectId" v-if="selectedProject" />
   </div>
 </template>
 
@@ -9,11 +10,12 @@
 import { computed } from 'vue';
 import AppLfProjectGroupFilter from '../fragments/project-group-filter.vue';
 import AppLfProjectFilter from '../fragments/project-filter.vue';
+import AppLfSubProjectFilter from '../fragments/sub-project-filter.vue';
 import { useOverviewStore } from '../../store/overview.store';
 import { storeToRefs } from 'pinia';
 
 const overviewStore = useOverviewStore();
-const { selectedProjectGroup } = storeToRefs(overviewStore);
+const { selectedProjectGroup, selectedProject, selectedProjectId } = storeToRefs(overviewStore);
 
 const projects = computed(() => {
   return selectedProjectGroup.value?.projects || [];
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
index 6f541fe008..e9346776a6 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
@@ -32,7 +32,7 @@
       </div>
       <app-lf-overview-trend-display :data="organizationsTrends" />
     </lf-card>
-    <lf-card class="flex-1 p-4 flex flex-col gap-2">
+    <lf-card class="flex-1 p-4 flex flex-col gap-2" v-if="!selectedProject">
       <div class="flex items-center justify-between">
         <span class="text-xs font-semibold">Activities</span>
         <lf-icon name="monitor-waveform" type="light" class="text-gray-400" />
@@ -51,6 +51,11 @@ import LfCard from '@/ui-kit/card/Card.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import AppLfOverviewTrendDisplay from '@/modules/admin/modules/overview/components/fragments/trend-display.vue';
 import type { OverviewTrends } from '@/modules/admin/modules/overview/types/overview.types';
+import { useOverviewStore } from '../../store/overview.store';
+import { storeToRefs } from 'pinia';
+
+const overviewStore = useOverviewStore();
+const { selectedProject } = storeToRefs(overviewStore);
 
 const projectsTrends = ref<OverviewTrends>({
   current: 640,
diff --git a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
index 84629105b1..de85188ed4 100644
--- a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
+++ b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
@@ -4,6 +4,7 @@ import { useInfiniteQuery, useQuery } from '@tanstack/vue-query'
 import { TanstackKey } from '@/shared/types/tanstack'
 import authAxios from '@/shared/axios/auth-axios'
 import { GlobalIntegrationStatusCount, IntegrationStatusResponse } from '../types/overview.types'
+import { Project } from '@/modules/lf/segments/types/Segments'
 
 export interface GlobalIntegrationStatusCountQueryParams {
   platform: string | undefined
@@ -17,6 +18,33 @@ export interface GlobalIntegrationIntegrationsQueryParams {
 }
 
 class OverviewApiService {
+  fetchProjectById(params: ComputedRef<string>) {
+    const queryKey = computed(() => [TanstackKey.PROJECT_BY_ID, params.value])
+    const queryFn = computed<QueryFunction<Project>>(() =>
+      this.fetchProjectByIdQueryFn(() => ({
+        id: params.value,
+      })),
+    )
+
+    return useQuery<Project>({
+      queryKey,
+      queryFn,
+    })
+  }
+
+  fetchProjectByIdQueryFn(
+    query: () => Record<string, string | number | boolean | undefined | string[] | null>,
+  ): QueryFunction<Project> {
+    return () =>
+      authAxios
+        .get(`/segment/${query().id}`, {
+          params: {
+            segments: [query().id],
+          },
+        })
+        .then((res) => res.data)
+  }
+
   fetchGlobalIntegrationStatusCount(params: ComputedRef<GlobalIntegrationStatusCountQueryParams>) {
     const queryKey = computed(() => [
       TanstackKey.GLOBAL_INTEGRATION_STATUS_COUNT,
diff --git a/frontend/src/modules/admin/modules/overview/store/overview.store.ts b/frontend/src/modules/admin/modules/overview/store/overview.store.ts
index 5e969ed3a5..add648587a 100644
--- a/frontend/src/modules/admin/modules/overview/store/overview.store.ts
+++ b/frontend/src/modules/admin/modules/overview/store/overview.store.ts
@@ -1,16 +1,24 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
-import { Project, ProjectGroup } from '@/modules/lf/segments/types/Segments'
+import { Project, ProjectGroup, SubProject } from '@/modules/lf/segments/types/Segments'
 
 export const useOverviewStore = defineStore('overview', () => {
+  const selectedProjectGroupId = ref<string>('')
   const selectedProjectGroup = ref<ProjectGroup | null>(null)
+  const selectedProjectId = ref<string>('')
   const selectedProject = ref<Project | null>(null)
+  const selectedSubProjectId = ref<string>('')
+  const selectedSubProject = ref<SubProject | null>(null)
   const selectedIntegrationId = ref<string | null>(null)
   const integrationStatusCount = ref<Record<string, number>>({})
 
   return {
+    selectedProjectGroupId,
     selectedProjectGroup,
+    selectedProjectId,
     selectedProject,
+    selectedSubProjectId,
+    selectedSubProject,
     selectedIntegrationId,
     integrationStatusCount,
   }
diff --git a/frontend/src/shared/types/tanstack.ts b/frontend/src/shared/types/tanstack.ts
index b63217f8e1..15c922e8fa 100644
--- a/frontend/src/shared/types/tanstack.ts
+++ b/frontend/src/shared/types/tanstack.ts
@@ -9,4 +9,5 @@ export enum TanstackKey {
   ORGANIZATIONS_LIST = 'organizations-list',
   GLOBAL_INTEGRATION_STATUS_COUNT = 'global-integration-status-count',
   GLOBAL_INTEGRATIONS = 'global-integrations',
+  PROJECT_BY_ID = 'project-by-id',
 }

From 9f24898c77a95fe6040fa418cd419d3796a06121 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Thu, 11 Dec 2025 12:36:45 +0800
Subject: [PATCH 26/51] fix: hide project card when project is selected

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../admin/modules/overview/components/sections/summary.vue    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
index e9346776a6..78b4360414 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
@@ -2,7 +2,7 @@
   <div class="flex gap-4">
     <!-- TODO: revisit this implementation when the backend is ready -->
     <!-- we may use loop to render the cards -->
-    <lf-card class="flex-1 p-4 flex flex-col gap-2">
+    <lf-card class="flex-1 p-4 flex flex-col gap-2" v-if="!selectedProject">
       <div class="flex items-center justify-between">
         <span class="text-xs font-semibold">Projects</span>
         <lf-icon name="folders" type="light" class="text-gray-400" />
@@ -32,7 +32,7 @@
       </div>
       <app-lf-overview-trend-display :data="organizationsTrends" />
     </lf-card>
-    <lf-card class="flex-1 p-4 flex flex-col gap-2" v-if="!selectedProject">
+    <lf-card class="flex-1 p-4 flex flex-col gap-2">
       <div class="flex items-center justify-between">
         <span class="text-xs font-semibold">Activities</span>
         <lf-icon name="monitor-waveform" type="light" class="text-gray-400" />

From 2d68eb033d16adda3c1e659a536ba16a7c526bd0 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Fri, 12 Dec 2025 16:42:56 +0800
Subject: [PATCH 27/51] chore: wired summary cards to backend

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../overview/components/sections/summary.vue  | 46 +++++++++++++------
 .../overview/services/overview.api.service.ts | 35 +++++++++++++-
 .../modules/overview/types/overview.types.ts  | 11 +++++
 frontend/src/shared/types/tanstack.ts         |  1 +
 4 files changed, 77 insertions(+), 16 deletions(-)

diff --git a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
index 78b4360414..d9dd4d533d 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="flex gap-4">
+  <div v-if="isPending" class="flex items-center justify-center h-20">
+    <lf-spinner />
+  </div>
+  <div v-else class="flex gap-4">
     <!-- TODO: revisit this implementation when the backend is ready -->
     <!-- we may use loop to render the cards -->
     <lf-card class="flex-1 p-4 flex flex-col gap-2" v-if="!selectedProject">
@@ -8,7 +11,7 @@
         <lf-icon name="folders" type="light" class="text-gray-400" />
       </div>
       <div class="text-xl font-light">
-        640
+        {{ formatNumber(projectsTrends.current) }}
       </div>
       <app-lf-overview-trend-display :data="projectsTrends" />
     </lf-card>
@@ -18,7 +21,7 @@
         <lf-icon name="people-group" type="light" class="text-gray-400" />
       </div>
       <div class="text-xl font-light">
-        640
+        {{ formatNumber(peopleTrends.current) }}
       </div>
       <app-lf-overview-trend-display :data="peopleTrends" />
     </lf-card>
@@ -28,7 +31,7 @@
         <lf-icon name="building" type="light" class="text-gray-400" />
       </div>
       <div class="text-xl font-light">
-        640
+        {{ formatNumber(organizationsTrends.current) }}
       </div>
       <app-lf-overview-trend-display :data="organizationsTrends" />
     </lf-card>
@@ -38,7 +41,7 @@
         <lf-icon name="monitor-waveform" type="light" class="text-gray-400" />
       </div>
       <div class="text-xl font-light">
-        640
+        {{ formatNumber(activitiesTrends.current) }}
       </div>
       <app-lf-overview-trend-display :data="activitiesTrends" />
     </lf-card>
@@ -46,40 +49,53 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import LfCard from '@/ui-kit/card/Card.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import AppLfOverviewTrendDisplay from '@/modules/admin/modules/overview/components/fragments/trend-display.vue';
 import type { OverviewTrends } from '@/modules/admin/modules/overview/types/overview.types';
 import { useOverviewStore } from '../../store/overview.store';
 import { storeToRefs } from 'pinia';
+import { OVERVIEW_API_SERVICE } from '../../services/overview.api.service';
+import { ToastStore } from '@/shared/message/notification';
+import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
+import { formatNumber } from '@/utils/number';
 
 const overviewStore = useOverviewStore();
-const { selectedProject } = storeToRefs(overviewStore);
+const { selectedProject, selectedProjectGroupId, selectedProjectId, selectedSubProjectId } = storeToRefs(overviewStore);
+
+const params = computed(() => ({
+  segment: selectedSubProjectId.value || selectedProjectId.value || selectedProjectGroupId.value || undefined,
+}));
 
+const { data, isPending, isError } = OVERVIEW_API_SERVICE.fetchDashboardMetrics(params);
 const projectsTrends = ref<OverviewTrends>({
-  current: 640,
-  previous: 500,
+  current: data.value?.projectsTotal || 0,
+  previous: data.value?.projectsLast30Days || 0,
   period: 'vs. last 30d',
 });
 
 const peopleTrends = ref<OverviewTrends>({
-  current: 640,
-  previous: 600,
+  current: data.value?.membersTotal || 0,
+  previous: data.value?.membersLast30Days || 0,
   period: 'vs. previous 30d',
 });
 
 const organizationsTrends = ref<OverviewTrends>({
-  current: 640,
-  previous: 700,
+  current: data.value?.organizationsTotal || 0,
+  previous: data.value?.organizationsLast30Days || 0,
   period: 'vs. previous 12M period',
 });
 
 const activitiesTrends = ref<OverviewTrends>({
-  current: 640,
-  previous: 400,
+  current: data.value?.activitiesTotal || 0,
+  previous: data.value?.activitiesLast30Days || 0,
   period: 'vs. previous 30d',
 });
+
+watch(isError, () => {
+  ToastStore.error('Failed to fetch dashboard metrics');
+}, { immediate: true });
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
index de85188ed4..3e66bf0a30 100644
--- a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
+++ b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
@@ -3,7 +3,11 @@ import { type ComputedRef, computed } from 'vue'
 import { useInfiniteQuery, useQuery } from '@tanstack/vue-query'
 import { TanstackKey } from '@/shared/types/tanstack'
 import authAxios from '@/shared/axios/auth-axios'
-import { GlobalIntegrationStatusCount, IntegrationStatusResponse } from '../types/overview.types'
+import {
+  DashboardMetrics,
+  GlobalIntegrationStatusCount,
+  IntegrationStatusResponse,
+} from '../types/overview.types'
 import { Project } from '@/modules/lf/segments/types/Segments'
 
 export interface GlobalIntegrationStatusCountQueryParams {
@@ -17,6 +21,10 @@ export interface GlobalIntegrationIntegrationsQueryParams {
   limit: number
 }
 
+export interface DashboardMetricsQueryParams {
+  segment?: string
+}
+
 class OverviewApiService {
   fetchProjectById(params: ComputedRef<string>) {
     const queryKey = computed(() => [TanstackKey.PROJECT_BY_ID, params.value])
@@ -118,6 +126,31 @@ class OverviewApiService {
     const totalRows = lastPage.count
     return nextPage < totalRows ? nextPage : undefined
   }
+
+  fetchDashboardMetrics(params: ComputedRef<DashboardMetricsQueryParams>) {
+    const queryKey = computed(() => [TanstackKey.DASHBOARD_METRICS, params.value.segment])
+    const queryFn = computed<QueryFunction<DashboardMetrics>>(() =>
+      this.fetchDashboardMetricsQueryFn(() => ({
+        ...params.value,
+      })),
+    )
+
+    return useQuery<DashboardMetrics>({
+      queryKey,
+      queryFn,
+    })
+  }
+
+  fetchDashboardMetricsQueryFn(
+    query: () => Record<string, string | number | boolean | undefined | string[] | null>,
+  ): QueryFunction<DashboardMetrics> {
+    return () =>
+      authAxios
+        .get('/dashboard/metrics', {
+          params: query(),
+        })
+        .then((res) => res.data)
+  }
 }
 
 export const OVERVIEW_API_SERVICE = new OverviewApiService()
diff --git a/frontend/src/modules/admin/modules/overview/types/overview.types.ts b/frontend/src/modules/admin/modules/overview/types/overview.types.ts
index ab4d89624f..8ec94f7a10 100644
--- a/frontend/src/modules/admin/modules/overview/types/overview.types.ts
+++ b/frontend/src/modules/admin/modules/overview/types/overview.types.ts
@@ -39,3 +39,14 @@ export interface GlobalIntegrationStatusCount {
   status: string
   count: number
 }
+
+export interface DashboardMetrics {
+  activitiesTotal: number
+  activitiesLast30Days: number
+  organizationsTotal: number
+  organizationsLast30Days: number
+  membersTotal: number
+  membersLast30Days: number
+  projectsTotal: number
+  projectsLast30Days: number
+}
diff --git a/frontend/src/shared/types/tanstack.ts b/frontend/src/shared/types/tanstack.ts
index 15c922e8fa..00f0ff634a 100644
--- a/frontend/src/shared/types/tanstack.ts
+++ b/frontend/src/shared/types/tanstack.ts
@@ -10,4 +10,5 @@ export enum TanstackKey {
   GLOBAL_INTEGRATION_STATUS_COUNT = 'global-integration-status-count',
   GLOBAL_INTEGRATIONS = 'global-integrations',
   PROJECT_BY_ID = 'project-by-id',
+  DASHBOARD_METRICS = 'dashboard-metrics',
 }

From cc3dc148a3996ba390cc2686018ea62b288ac7ad Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Fri, 12 Dec 2025 17:30:42 +0800
Subject: [PATCH 28/51] fix: previous value computation

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../modules/overview/components/sections/summary.vue      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
index d9dd4d533d..bcf9a57012 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
@@ -71,25 +71,25 @@ const params = computed(() => ({
 const { data, isPending, isError } = OVERVIEW_API_SERVICE.fetchDashboardMetrics(params);
 const projectsTrends = ref<OverviewTrends>({
   current: data.value?.projectsTotal || 0,
-  previous: data.value?.projectsLast30Days || 0,
+  previous: (data.value?.projectsTotal || 0) - (data.value?.projectsLast30Days || 0),
   period: 'vs. last 30d',
 });
 
 const peopleTrends = ref<OverviewTrends>({
   current: data.value?.membersTotal || 0,
-  previous: data.value?.membersLast30Days || 0,
+  previous: (data.value?.membersTotal || 0) - (data.value?.membersLast30Days || 0),
   period: 'vs. previous 30d',
 });
 
 const organizationsTrends = ref<OverviewTrends>({
   current: data.value?.organizationsTotal || 0,
-  previous: data.value?.organizationsLast30Days || 0,
+  previous: (data.value?.organizationsTotal || 0) - (data.value?.organizationsLast30Days || 0),
   period: 'vs. previous 12M period',
 });
 
 const activitiesTrends = ref<OverviewTrends>({
   current: data.value?.activitiesTotal || 0,
-  previous: data.value?.activitiesLast30Days || 0,
+  previous: (data.value?.activitiesTotal || 0) - (data.value?.activitiesLast30Days || 0),
   period: 'vs. previous 30d',
 });
 

From e93f5e9d4237d47a15617c482a413a9cff1439cb Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Fri, 12 Dec 2025 17:55:16 +0800
Subject: [PATCH 29/51] fix: trend label and added segment param

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../components/sections/integration-details.vue    | 14 ++++++++++----
 .../components/sections/integration-status.vue     |  9 ++++++++-
 .../overview/components/sections/summary.vue       | 12 +++++++-----
 .../overview/services/overview.api.service.ts      |  4 ++++
 4 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
index 8e4ed5b25d..fcefd18a5e 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
@@ -68,8 +68,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
-import { mockOverviewData } from '@/modules/admin/modules/overview/store/mock-overview-data';
+import { ref, computed } from 'vue';
 import IntegrationTabs from '@/modules/admin/modules/overview/components/fragments/integration-tabs.vue';
 import IntegrationRow from '@/modules/admin/modules/overview/components/fragments/integration-row.vue';
 import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
@@ -79,7 +78,13 @@ import { OVERVIEW_API_SERVICE } from '@/modules/admin/modules/overview/services/
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
 
-const { integrationStatusCount, selectedIntegrationId } = storeToRefs(useOverviewStore());
+const { 
+  integrationStatusCount, 
+  selectedIntegrationId,
+  selectedSubProjectId,
+  selectedProjectId,
+  selectedProjectGroupId,
+} = storeToRefs(useOverviewStore());
 
 const activeTab = ref(lfIntegrationStatusesTabs.connecting.key);
 const limit = ref(10);
@@ -112,7 +117,8 @@ const params = computed(() => {
     platform: selectedIntegrationId.value || undefined, //activeTab.value,
     status: ['done'], //lfIntegrationStatusesTabs[activeTab.value].statuses,
     query: '',
-    limit: limit.value
+    limit: limit.value,
+    segment: selectedSubProjectId.value || selectedProjectId.value || selectedProjectGroupId.value || undefined,
   };
 });
 
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
index 700521aa89..0ea38d3ae9 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
@@ -61,12 +61,19 @@ import { storeToRefs } from 'pinia';
 import { GlobalIntegrationStatusCount } from '../../types/overview.types';
 import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
 
-const { selectedIntegrationId, integrationStatusCount } = storeToRefs(useOverviewStore());
+const { 
+  selectedIntegrationId,
+  integrationStatusCount,
+  selectedSubProjectId,
+  selectedProjectId,
+  selectedProjectGroupId,
+} = storeToRefs(useOverviewStore());
 
 const router = useRouter();
 
 const params = computed(() => ({
   platform: selectedIntegrationId.value || undefined,
+  segment: selectedSubProjectId.value || selectedProjectId.value || selectedProjectGroupId.value || undefined,
 }));
 
 const { data, isPending, isError } = OVERVIEW_API_SERVICE.fetchGlobalIntegrationStatusCount(params);
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
index bcf9a57012..05ee8e0d3f 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
@@ -78,23 +78,25 @@ const projectsTrends = ref<OverviewTrends>({
 const peopleTrends = ref<OverviewTrends>({
   current: data.value?.membersTotal || 0,
   previous: (data.value?.membersTotal || 0) - (data.value?.membersLast30Days || 0),
-  period: 'vs. previous 30d',
+  period: 'vs. last 30d',
 });
 
 const organizationsTrends = ref<OverviewTrends>({
   current: data.value?.organizationsTotal || 0,
   previous: (data.value?.organizationsTotal || 0) - (data.value?.organizationsLast30Days || 0),
-  period: 'vs. previous 12M period',
+  period: 'vs. last 30d',
 });
 
 const activitiesTrends = ref<OverviewTrends>({
   current: data.value?.activitiesTotal || 0,
   previous: (data.value?.activitiesTotal || 0) - (data.value?.activitiesLast30Days || 0),
-  period: 'vs. previous 30d',
+  period: 'vs. last 30d',
 });
 
-watch(isError, () => {
-  ToastStore.error('Failed to fetch dashboard metrics');
+watch(isError, (newVal) => {
+  if (newVal) {
+    ToastStore.error('Failed to fetch dashboard metrics');
+  }
 }, { immediate: true });
 </script>
 
diff --git a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
index 3e66bf0a30..c036a4dae8 100644
--- a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
+++ b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
@@ -12,6 +12,7 @@ import { Project } from '@/modules/lf/segments/types/Segments'
 
 export interface GlobalIntegrationStatusCountQueryParams {
   platform: string | undefined
+  segment?: string
 }
 
 export interface GlobalIntegrationIntegrationsQueryParams {
@@ -19,6 +20,7 @@ export interface GlobalIntegrationIntegrationsQueryParams {
   status: string[]
   query: string
   limit: number
+  segment?: string
 }
 
 export interface DashboardMetricsQueryParams {
@@ -61,6 +63,7 @@ class OverviewApiService {
     const queryFn = computed<QueryFunction<GlobalIntegrationStatusCount[]>>(() =>
       this.fetchGlobalIntegrationStatusCountQueryFn(() => ({
         platform: params.value.platform,
+        segment: params.value.segment,
       })),
     )
 
@@ -88,6 +91,7 @@ class OverviewApiService {
       params.value.status,
       params.value.query,
       params.value.limit,
+      params.value.segment,
     ])
     const queryFn = computed<QueryFunction<IntegrationStatusResponse>>(() =>
       this.fetchGlobalIntegrationsQueryFn(() => ({

From 3742769342d1f11c26a87fbc64c6a3525fd445ca Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Fri, 12 Dec 2025 17:57:10 +0800
Subject: [PATCH 30/51] fix: summary data not showing

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../components/sections/integration-status.vue   |  2 +-
 .../overview/components/sections/summary.vue     | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
index 0ea38d3ae9..90c3530e34 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
@@ -16,7 +16,7 @@
 
     <!-- Status chips -->
     <div class="flex gap-3 items-start">
-      <div v-if="isPending" class="py-4 flex justify-center">
+      <div v-if="isPending" class="py-4 flex justify-center w-full">
         <lf-spinner size="1rem" />
       </div>
       <template v-else>
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
index 05ee8e0d3f..10b98b988c 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
@@ -69,29 +69,29 @@ const params = computed(() => ({
 }));
 
 const { data, isPending, isError } = OVERVIEW_API_SERVICE.fetchDashboardMetrics(params);
-const projectsTrends = ref<OverviewTrends>({
+const projectsTrends = computed<OverviewTrends>(() => ({
   current: data.value?.projectsTotal || 0,
   previous: (data.value?.projectsTotal || 0) - (data.value?.projectsLast30Days || 0),
   period: 'vs. last 30d',
-});
+}));
 
-const peopleTrends = ref<OverviewTrends>({
+const peopleTrends = computed<OverviewTrends>(() => ({
   current: data.value?.membersTotal || 0,
   previous: (data.value?.membersTotal || 0) - (data.value?.membersLast30Days || 0),
   period: 'vs. last 30d',
-});
+}));
 
-const organizationsTrends = ref<OverviewTrends>({
+const organizationsTrends = computed<OverviewTrends>(() => ({
   current: data.value?.organizationsTotal || 0,
   previous: (data.value?.organizationsTotal || 0) - (data.value?.organizationsLast30Days || 0),
   period: 'vs. last 30d',
-});
+}));
 
-const activitiesTrends = ref<OverviewTrends>({
+const activitiesTrends = computed<OverviewTrends>(() => ({
   current: data.value?.activitiesTotal || 0,
   previous: (data.value?.activitiesTotal || 0) - (data.value?.activitiesLast30Days || 0),
   period: 'vs. last 30d',
-});
+}));
 
 watch(isError, (newVal) => {
   if (newVal) {

From 4100e78c56e9540060fde991fa9b4ac1fb665ff5 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Fri, 12 Dec 2025 18:07:28 +0800
Subject: [PATCH 31/51] feat: redirect the integrations chip to correct
 integration tab

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../integration/pages/integration-status.page.vue        | 6 ++++++
 .../overview/components/sections/integration-status.vue  | 7 +++++--
 frontend/src/modules/admin/pages/admin-panel.page.vue    | 9 +++++++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue b/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue
index 5713743ebb..2606e902db 100644
--- a/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue
+++ b/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue
@@ -250,6 +250,12 @@ const loadMore = () => {
   fetchGlobalIntegrations();
 };
 
+onMounted(() => {
+  if (window && window.localStorage) {
+    status.value = window.localStorage.getItem('integrationStatusFilter') || Object.keys(lfIntegrationStatusesTabs)[0];
+  }
+});
+
 watch(() => status.value, () => {
   offset.value = 0;
   fetchGlobalIntegrations();
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
index 90c3530e34..e769f9dd0d 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
@@ -26,7 +26,7 @@
           type="bordered"
           size="default"
           class="cursor-pointer hover:bg-neutral-50"
-          @click="navigateTo(`/admin#integrations`)"
+          @click="navigateTo(`/admin#integrations`, key)"
         >
           <lf-icon
             v-if="config.chipStatus?.icon || config.status.icon"
@@ -78,7 +78,10 @@ const params = computed(() => ({
 
 const { data, isPending, isError } = OVERVIEW_API_SERVICE.fetchGlobalIntegrationStatusCount(params);
 
-const navigateTo = (path: string) => {
+const navigateTo = (path: string, key: string) => {
+  if (window && window.localStorage) {
+    window.localStorage.setItem('integrationStatusFilter', key);
+  }
   router.push(path);
 };
 
diff --git a/frontend/src/modules/admin/pages/admin-panel.page.vue b/frontend/src/modules/admin/pages/admin-panel.page.vue
index b76f279cb8..53b3042d6a 100644
--- a/frontend/src/modules/admin/pages/admin-panel.page.vue
+++ b/frontend/src/modules/admin/pages/admin-panel.page.vue
@@ -106,6 +106,7 @@ import LfCollectionsPage from '@/modules/admin/modules/collections/pages/collect
 import LfInsightsProjectsPage from '@/modules/admin/modules/insights-projects/pages/insights-projects.page.vue';
 import config from '@/config';
 import LfCategoriesPage from '@/modules/admin/modules/categories/pages/categories.page.vue';
+import { lfIntegrationStatusesTabs } from '@/modules/admin/modules/integration/config/status';
 
 const route = useRoute();
 const router = useRouter();
@@ -177,4 +178,12 @@ watch(
   },
   { immediate: true },
 );
+
+watch(activeTab, (newVal) => {
+  if (newVal === 'integrations') {
+    if (window && window.localStorage) {
+      window.localStorage.setItem('integrationStatusFilter', Object.keys(lfIntegrationStatusesTabs)[0]);
+    }
+  }
+});
 </script>

From a88f0714d001ca9fef0f98101a687fcc3fa86904 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Fri, 12 Dec 2025 18:34:04 +0800
Subject: [PATCH 32/51] fix: lint issues

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 frontend/package-lock.json                    |  47 +++----
 frontend/package.json                         |   2 +
 frontend/src/modules/admin/admin.routes.ts    |  16 +--
 .../integration/config/status/connecting.ts   |   6 +-
 .../modules/integration/config/status/done.ts |   6 +-
 .../integration/config/status/error.ts        |   6 +-
 .../integration/config/status/index.ts        |  20 +--
 .../config/status/not-connected.ts            |   6 +-
 .../config/status/waiting-for-action.ts       |   6 +-
 .../components/fragments/integration-row.vue  |  12 +-
 .../components/fragments/integration-tabs.vue |   5 +-
 .../fragments/integrations-filter.vue         |  12 +-
 .../components/fragments/load-more.vue        |   2 +-
 .../components/fragments/project-filter.vue   |  12 +-
 .../fragments/project-group-filter.vue        |  27 ++--
 .../components/fragments/status-display.vue   |  14 +-
 .../fragments/sub-project-filter.vue          |  22 ++--
 .../components/fragments/trend-display.vue    |   4 +-
 .../sections/integration-details.vue          | 104 +++++++--------
 .../sections/integration-status.vue           |  10 +-
 .../components/sections/overview-filter.vue   |  10 +-
 .../overview/components/sections/summary.vue  |  14 +-
 .../admin/modules/overview/pages/overview.vue |   2 +-
 .../overview/services/overview.api.service.ts | 122 ++++++++----------
 .../overview/store/mock-overview-data.ts      |   5 +-
 .../modules/overview/store/overview.store.ts  |  26 ++--
 frontend/src/router/index.js                  | 116 ++++++++---------
 frontend/src/ui-kit/lfx/chip/chip.vue         |   2 +-
 .../src/ui-kit/lfx/dropdown/dropdown-item.vue |   3 +-
 .../ui-kit/lfx/dropdown/dropdown-search.vue   |   2 +-
 .../ui-kit/lfx/dropdown/dropdown-select.vue   |   7 +-
 frontend/src/ui-kit/lfx/dropdown/dropdown.vue |   5 +-
 frontend/src/ui-kit/lfx/popover/popover.vue   |  28 ++--
 33 files changed, 333 insertions(+), 348 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a9dee9755a..c2de5061ec 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,6 +14,7 @@
         "@linuxfoundation/lfx-ui-core": "^0.0.20",
         "@nangohq/frontend": "^0.9.0",
         "@nangohq/frontend-v2": "npm:@nangohq/frontend@^0.52.4",
+        "@sxzz/popperjs-es": "^2.11.7",
         "@tailwindcss/line-clamp": "^0.4.2",
         "@tanstack/vue-query": "^5.75.1",
         "@tanstack/vue-query-devtools": "^5.75.1",
@@ -30,6 +31,7 @@
         "eslint-import-resolver-alias": "^1.1.2",
         "eslint-plugin-import": "^2.27.5",
         "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
         "logrocket": "^3.0.1",
         "logrocket-vuex": "^0.0.3",
         "marked": "^4.3.0",
@@ -2729,7 +2731,6 @@
       "version": "1.10.17",
       "resolved": "https://registry.npmjs.org/@interactjs/core/-/core-1.10.17.tgz",
       "integrity": "sha512-rL9w+83HDRuXub8Ezqs+97CYLl/ne7bLT/sAeduUWaxYhsW9iOqBoob9JnkkCZOaOsYizWI1EWy0+fNc5ibtLQ==",
-      "peer": true,
       "peerDependencies": {
         "@interactjs/utils": "1.10.17"
       }
@@ -2795,7 +2796,6 @@
       "version": "1.10.17",
       "resolved": "https://registry.npmjs.org/@interactjs/modifiers/-/modifiers-1.10.17.tgz",
       "integrity": "sha512-Dxw8kv9VBIxnhNvQncR6CKAGMzKXczLvuAUIdSPFYtyerX/XiDulJUqhR+jVKNp/WjF1DvdBxWo0kGGLbM84LQ==",
-      "peer": true,
       "dependencies": {
         "@interactjs/snappers": "1.10.17"
       },
@@ -2862,8 +2862,7 @@
     "node_modules/@interactjs/utils": {
       "version": "1.10.17",
       "resolved": "https://registry.npmjs.org/@interactjs/utils/-/utils-1.10.17.tgz",
-      "integrity": "sha512-sZAW08CkqgvqRjUIaLRjScjObcCzN9D75yekLA21EClYAZIhi4A+GEt2z/WqOCOksTaEPLYmQyhkpXcboc0LhQ==",
-      "peer": true
+      "integrity": "sha512-sZAW08CkqgvqRjUIaLRjScjObcCzN9D75yekLA21EClYAZIhi4A+GEt2z/WqOCOksTaEPLYmQyhkpXcboc0LhQ=="
     },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
@@ -3294,6 +3293,7 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
       "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.0",
         "@jridgewell/trace-mapping": "^0.3.9"
@@ -3304,6 +3304,7 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
       "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.0.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -6235,6 +6236,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@sxzz/popperjs-es": {
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@tailwindcss/line-clamp": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.2.tgz",
@@ -6535,7 +6545,6 @@
       "version": "4.17.7",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.7.tgz",
       "integrity": "sha512-z0ptr6UI10VlU6l5MYhGwS4mC8DZyYer2mCoyysZtSF7p26zOX8UpbrV0YpNYLGS8K4PUFIyEr62IMFFjveSiQ==",
-      "peer": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -6812,7 +6821,6 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.59.5.tgz",
       "integrity": "sha512-NJXQC4MRnF9N9yWqQE2/KLRSOLvrrlZb48NGVfBa+RuPMN6B7ZcK5jZOvhuygv4D64fRKnZI4L4p8+M+rfeQuw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "5.59.5",
         "@typescript-eslint/types": "5.59.5",
@@ -7493,7 +7501,6 @@
       "version": "8.8.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
       "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -8309,7 +8316,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001580",
         "electron-to-chromium": "^1.4.648",
@@ -8521,8 +8527,7 @@
     "node_modules/chart.js": {
       "version": "3.9.1",
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
-      "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==",
-      "peer": true
+      "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
     },
     "node_modules/chartjs-adapter-moment": {
       "version": "1.0.1",
@@ -9826,7 +9831,6 @@
       "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
       "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "ansi-colors": "^4.1.1"
       },
@@ -10009,7 +10013,6 @@
       "integrity": "sha512-1GJtYnUxsJreHYA0Y+iQz2UEykonY66HNWOb0yXYZi9/kNrORUEHVg87eQsCtqh59PEJ5YVZJO98JHznMJSWjg==",
       "dev": true,
       "hasInstallScript": true,
-      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -10443,7 +10446,6 @@
       "version": "8.36.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.36.0.tgz",
       "integrity": "sha512-Y956lmS7vDqomxlaaQAHVmeb4tNMp2FWIvU/RnU5BD3IKMD/MJPr76xdyr68P8tV1iNMvN2mRK0yy3c+UjL+bw==",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
@@ -10631,7 +10633,6 @@
       "version": "2.27.5",
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
       "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
-      "peer": true,
       "dependencies": {
         "array-includes": "^3.1.6",
         "array.prototype.flat": "^1.3.1",
@@ -10790,7 +10791,6 @@
       "version": "9.10.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.10.0.tgz",
       "integrity": "sha512-2MgP31OBf8YilUvtakdVMc8xVbcMp7z7/iQj8LHVpXrSXHPXSJRUIGSPFI6b6pyCx/buKaFJ45ycqfHvQRiW2g==",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.3.0",
         "natural-compare": "^1.4.0",
@@ -14439,14 +14439,12 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "peer": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash-es": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
-      "peer": true
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
     },
     "node_modules/lodash-unified": {
       "version": "1.0.3",
@@ -16032,7 +16030,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -17419,7 +17416,6 @@
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.92.1.tgz",
       "integrity": "sha512-ffmsdbwqb3XeyR8jJR6KelIXARM9bFQe8A6Q3W4Klmwy5Ckd5gz7jgUNHo4UOqutU5Sk1DtKLbpDP0nLCg1xqQ==",
       "devOptional": true,
-      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -17468,6 +17464,7 @@
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
       "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -18211,7 +18208,6 @@
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.7.tgz",
       "integrity": "sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==",
-      "peer": true,
       "dependencies": {
         "arg": "^5.0.2",
         "chokidar": "^3.5.3",
@@ -18410,6 +18406,7 @@
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.8.tgz",
       "integrity": "sha512-QI5g1E/ef7d+PsDifb+a6nnVgC4F22Bg6T0xrBrz6iloVB4PUkkunp6V8nzoOOZJIzjWVdAGqCdlKlhLq/TbIA==",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.2",
         "acorn": "^8.5.0",
@@ -18427,7 +18424,8 @@
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/test-exclude": {
       "version": "6.0.0",
@@ -18746,7 +18744,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
       "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
       "devOptional": true,
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -19241,7 +19238,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
       "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -19403,7 +19399,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.1.tgz",
       "integrity": "sha512-3Rwy4I5idbPVSDZu6I+fFh6tdDSZbauImCTqLxE7y0LpHtiDvPeY01OI7RkFPbva1nk4hoO0sv/NzosH2h60sg==",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.3.1",
         "@vue/compiler-sfc": "3.3.1",
diff --git a/frontend/package.json b/frontend/package.json
index 6413ecb071..3766300d6b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -33,6 +33,7 @@
     "@linuxfoundation/lfx-ui-core": "^0.0.20",
     "@nangohq/frontend": "^0.9.0",
     "@nangohq/frontend-v2": "npm:@nangohq/frontend@^0.52.4",
+    "@sxzz/popperjs-es": "^2.11.7",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tanstack/vue-query": "^5.75.1",
     "@tanstack/vue-query-devtools": "^5.75.1",
@@ -49,6 +50,7 @@
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.27.5",
     "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "logrocket": "^3.0.1",
     "logrocket-vuex": "^0.0.3",
     "marked": "^4.3.0",
diff --git a/frontend/src/modules/admin/admin.routes.ts b/frontend/src/modules/admin/admin.routes.ts
index a008ac88fe..5870bec741 100644
--- a/frontend/src/modules/admin/admin.routes.ts
+++ b/frontend/src/modules/admin/admin.routes.ts
@@ -1,16 +1,16 @@
-import Layout from '@/modules/layout/components/layout.vue'
-import { PageEventKey } from '@/shared/modules/monitoring/types/event'
-import { PermissionGuard } from '@/shared/modules/permissions/router/PermissionGuard'
-import { LfPermission } from '@/shared/modules/permissions/types/Permissions'
+import Layout from '@/modules/layout/components/layout.vue';
+import { PageEventKey } from '@/shared/modules/monitoring/types/event';
+import { PermissionGuard } from '@/shared/modules/permissions/router/PermissionGuard';
+import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
 
-const OverviewPage = () => import('@/modules/admin/modules/overview/pages/overview.vue')
+const OverviewPage = () => import('@/modules/admin/modules/overview/pages/overview.vue');
 
 // const ProjectGroupsListPage = () =>
 //   import('@/modules/admin/modules/projects/pages/project-groups-list.page.vue')
 
-const ProjectsPage = () => import('@/modules/admin/modules/projects/pages/projects.page.vue')
+const ProjectsPage = () => import('@/modules/admin/modules/projects/pages/projects.page.vue');
 
-const AdminPanelPage = () => import('@/modules/admin/pages/admin-panel.page.vue')
+const AdminPanelPage = () => import('@/modules/admin/pages/admin-panel.page.vue');
 
 export default [
   {
@@ -69,4 +69,4 @@ export default [
       },
     ],
   },
-]
+];
diff --git a/frontend/src/modules/admin/modules/integration/config/status/connecting.ts b/frontend/src/modules/admin/modules/integration/config/status/connecting.ts
index 7f6ba81646..5c5fd3d687 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/connecting.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/connecting.ts
@@ -1,4 +1,4 @@
-import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index'
+import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index';
 
 const connecting: IntegrationStatusConfig = {
   key: 'connecting',
@@ -24,6 +24,6 @@ const connecting: IntegrationStatusConfig = {
     iconType: 'solid',
     color: 'text-primary-500',
   },
-}
+};
 
-export default connecting
+export default connecting;
diff --git a/frontend/src/modules/admin/modules/integration/config/status/done.ts b/frontend/src/modules/admin/modules/integration/config/status/done.ts
index 70df589997..cd7bcb39f5 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/done.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/done.ts
@@ -1,4 +1,4 @@
-import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index'
+import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index';
 
 const done: IntegrationStatusConfig = {
   key: 'done',
@@ -24,6 +24,6 @@ const done: IntegrationStatusConfig = {
     iconType: 'solid',
     color: 'text-green-500',
   },
-}
+};
 
-export default done
+export default done;
diff --git a/frontend/src/modules/admin/modules/integration/config/status/error.ts b/frontend/src/modules/admin/modules/integration/config/status/error.ts
index 8feb99ace6..42eb0db2a2 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/error.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/error.ts
@@ -1,4 +1,4 @@
-import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index'
+import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index';
 
 const error: IntegrationStatusConfig = {
   key: 'error',
@@ -24,6 +24,6 @@ const error: IntegrationStatusConfig = {
     iconType: 'solid',
     color: 'text-red-600',
   },
-}
+};
 
-export default error
+export default error;
diff --git a/frontend/src/modules/admin/modules/integration/config/status/index.ts b/frontend/src/modules/admin/modules/integration/config/status/index.ts
index 52654e01e1..a7497ecdf5 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/index.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/index.ts
@@ -1,8 +1,8 @@
-import done from './done'
-import error from './error'
-import waitingForAction from './waiting-for-action'
-import connecting from './connecting'
-import notConnected from './not-connected'
+import done from './done';
+import error from './error';
+import waitingForAction from './waiting-for-action';
+import connecting from './connecting';
+import notConnected from './not-connected';
 
 export interface IntegrationStatusConfig {
   key: string
@@ -35,7 +35,7 @@ export const lfIntegrationStatuses: Record<string, IntegrationStatusConfig> = {
   error,
   waitingForAction,
   connecting,
-}
+};
 
 export const lfIntegrationStatusesTabs: Record<string, IntegrationStatusConfig> = {
   done,
@@ -43,14 +43,14 @@ export const lfIntegrationStatusesTabs: Record<string, IntegrationStatusConfig>
   waitingForAction,
   error,
   notConnected,
-}
+};
 
 export const getIntegrationStatus = (integration: any): IntegrationStatusConfig => {
   // eslint-disable-next-line no-restricted-syntax
   for (const key in lfIntegrationStatuses) {
     if (lfIntegrationStatuses[key].show(integration)) {
-      return lfIntegrationStatuses[key]
+      return lfIntegrationStatuses[key];
     }
   }
-  return connecting
-}
+  return connecting;
+};
diff --git a/frontend/src/modules/admin/modules/integration/config/status/not-connected.ts b/frontend/src/modules/admin/modules/integration/config/status/not-connected.ts
index 4bd316238c..9fd5466a4d 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/not-connected.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/not-connected.ts
@@ -1,4 +1,4 @@
-import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index'
+import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index';
 
 const notConnected: IntegrationStatusConfig = {
   key: 'notConnected',
@@ -23,6 +23,6 @@ const notConnected: IntegrationStatusConfig = {
     iconType: 'light',
     color: 'text-gray-600',
   },
-}
+};
 
-export default notConnected
+export default notConnected;
diff --git a/frontend/src/modules/admin/modules/integration/config/status/waiting-for-action.ts b/frontend/src/modules/admin/modules/integration/config/status/waiting-for-action.ts
index 7a514fd7d3..c7f778afc2 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/waiting-for-action.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/waiting-for-action.ts
@@ -1,4 +1,4 @@
-import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index'
+import { IntegrationStatusConfig } from '@/modules/admin/modules/integration/config/status/index';
 
 const waitingForAction: IntegrationStatusConfig = {
   key: 'waitingForAction',
@@ -24,6 +24,6 @@ const waitingForAction: IntegrationStatusConfig = {
     iconType: 'solid',
     color: 'text-yellow-500',
   },
-}
+};
 
-export default waitingForAction
+export default waitingForAction;
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
index b2bdfc77c8..8597d3ba86 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
@@ -1,5 +1,5 @@
 <template>
-  <div 
+  <div
     :key="integration.key"
     class="flex items-center gap-4 px-5 py-5"
   >
@@ -13,7 +13,9 @@
 
     <!-- Project Column -->
     <div class="w-2/6 min-w-0">
-      <div class="text-sm font-medium text-gray-900 truncate">{{ integrationStatus.name }}</div>
+      <div class="text-sm font-medium text-gray-900 truncate">
+        {{ integrationStatus.name }}
+      </div>
       <div class="text-xs text-gray-500 flex items-center min-w-0">
         <span class="truncate flex-shrink min-w-0">{{ integrationStatus.grandparentName }}</span>
         <span class="text-gray-500 flex-shrink-0 px-1">></span>
@@ -24,7 +26,7 @@
     <!-- Status Column -->
     <div class="w-3/6 flex items-center justify-between">
       <slot name="status-display">
-        <status-display :integrationStatus="integrationStatus" />
+        <status-display :integration-status="integrationStatus" />
       </slot>
       <component
         :is="integration.actionComponent"
@@ -60,7 +62,6 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { IntegrationStatus } from '../../types/overview.types';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import StatusDisplay from '@/modules/admin/modules/overview/components/fragments/status-display.vue';
 import { getIntegrationStatus } from '@/modules/admin/modules/integration/config/status';
@@ -71,6 +72,7 @@ import { mapActions } from '@/shared/vuex/vuex.helpers';
 import LfDropdown from '@/ui-kit/dropdown/Dropdown.vue';
 import LfDropdownItem from '@/ui-kit/dropdown/DropdownItem.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
+import { IntegrationStatus } from '../../types/overview.types';
 
 const { trackEvent } = useProductTracking();
 
@@ -100,4 +102,4 @@ const disconnectIntegration = async (integration: any) => {
 export default {
   name: 'AppLfOverviewIntegrationRow',
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integration-tabs.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integration-tabs.vue
index 0253f0ce7f..03d04ea5d2 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/integration-tabs.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integration-tabs.vue
@@ -16,8 +16,7 @@ import { computed } from 'vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { IntegrationTabs } from '@/modules/admin/modules/overview/types/overview.types';
 
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void;
+const emit = defineEmits<{(e: 'update:modelValue', value: string): void;
 }>();
 
 const props = defineProps<{
@@ -49,4 +48,4 @@ export default {
 .integration-tabs :deep(.el-tabs__active-bar) {
   height: 1px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue
index bb058b67dd..374d5ebca8 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue
@@ -1,6 +1,6 @@
 <template>
   <lfx-dropdown-select
-    v-model="selectedIntegrationId as string"
+    v-model="integrationId"
     width="200px"
     :match-width="false"
     dropdown-class="max-h-80"
@@ -30,11 +30,11 @@
         <lfx-dropdown-item
           value="all"
           label="All integrations"
-          @click="selectedIntegrationId = null"
           :selected="selectedIntegrationId === null"
           :class="{
             '!bg-blue-50': selectedIntegrationId === null,
           }"
+          @click="selectedIntegrationId = null"
         />
       </div>
 
@@ -49,7 +49,6 @@
           {{ integration.name }}
         </div>
       </lfx-dropdown-item>
-
     </template>
   </lfx-dropdown-select>
 </template>
@@ -66,11 +65,16 @@ import { useOverviewStore } from '@/modules/admin/modules/overview/store/overvie
 import { lfIntegrations } from '@/config/integrations';
 import { storeToRefs } from 'pinia';
 
-
 const overviewStore = useOverviewStore();
 const { selectedIntegrationId } = storeToRefs(overviewStore);
 
 const integrations = computed(() => lfIntegrations());
+const integrationId = computed<string>({
+  get: () => selectedIntegrationId.value || '',
+  set: (value: string) => {
+    selectedIntegrationId.value = value === 'all' || value === '' ? null : value;
+  },
+});
 
 const selectedIntegration = computed(() => {
   if (selectedIntegrationId.value === 'all' || !selectedIntegrationId.value) return null;
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/load-more.vue b/frontend/src/modules/admin/modules/overview/components/fragments/load-more.vue
index dc67e31c58..42317c98fa 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/load-more.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/load-more.vue
@@ -23,7 +23,7 @@ SPDX-License-Identifier: MIT
 import { ref, onMounted, watch } from 'vue';
 import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
 
-const emit = defineEmits<{ (e: 'loadMore'): void }>();
+const emit = defineEmits<{(e: 'loadMore'): void }>();
 
 const props = defineProps<{
   text: string;
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
index cdca412f40..21ebfef985 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
@@ -34,10 +34,10 @@
           value="all"
           label="All projects"
           :selected="!selectedProject"
-          @click="selectedProjectId = ''"
           :class="{
             '!bg-blue-50': !selectedProject,
           }"
+          @click="selectedProjectId = ''"
         />
 
         <lfx-dropdown-separator />
@@ -68,10 +68,10 @@
           :value="project.id"
           :label="project.name"
           :selected="selectedProject?.id === project.id"
-          @click="selectProject(project.id)"
           :class="{
             '!bg-blue-50': selectedProject?.id === project.id,
           }"
+          @click="selectProject(project.id)"
         />
       </template>
     </template>
@@ -106,9 +106,7 @@ const props = defineProps<{
   projects: Project[];
 }>();
 
-const trimDisplay = (name: string) => {
-  return name.length > 20 ? `${name.slice(0, 20)}...` : name;
-};
+const trimDisplay = (name: string) => (name.length > 20 ? `${name.slice(0, 20)}...` : name);
 
 const selectProject = (projectId: string) => {
   selectedProjectId.value = projectId;
@@ -119,7 +117,7 @@ const projectsList = computed(() => {
     if (!searchValue.value) return true;
     return project.name.toLowerCase().includes(searchValue.value.toLowerCase());
   });
-  
+
   return filtered.map((project) => ({
     id: project.id,
     name: project.name,
@@ -128,7 +126,7 @@ const projectsList = computed(() => {
 
 watch(selectedProjectId, (newVal) => {
   if (newVal && newVal !== '') {
-    selectedProject.value = props.projects.find(p => p.id === newVal) || null;
+    selectedProject.value = props.projects.find((p) => p.id === newVal) || null;
   } else {
     selectedProject.value = null;
   }
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue
index 782c99d88e..431d76e064 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue
@@ -6,7 +6,7 @@
     dropdown-class="max-h-80"
     placement="bottom-end"
   >
-    <template #trigger="{ selectedOption }">
+    <template #trigger>
       <lfx-dropdown-selector
         size="medium"
         type="filled"
@@ -34,10 +34,10 @@
           value="all"
           label="All project groups"
           :selected="!selectedProjectGroup"
-          @click="selectedProjectGroupId = ''"
           :class="{
             '!bg-blue-50': !selectedProjectGroup,
           }"
+          @click="selectedProjectGroupId = ''"
         />
 
         <lfx-dropdown-separator />
@@ -75,10 +75,10 @@
           :value="projectGroup.id"
           :label="projectGroup.name"
           :selected="selectedProjectGroup?.id === projectGroup.id"
-          @click="selectedProjectGroupId = projectGroup.id"
           :class="{
             '!bg-blue-50': selectedProjectGroup?.id === projectGroup.id,
           }"
+          @click="selectedProjectGroupId = projectGroup.id"
         />
       </template>
 
@@ -123,13 +123,14 @@ import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
 import AppLfLoadMore from './load-more.vue';
 
 const overviewStore = useOverviewStore();
-const { 
-  selectedProjectGroup, 
-  selectedProjectGroupId, 
-  selectedProjectId, 
-  selectedSubProjectId, 
-  selectedProject, 
-  selectedSubProject } = storeToRefs(overviewStore);
+const {
+  selectedProjectGroup,
+  selectedProjectGroupId,
+  selectedProjectId,
+  selectedSubProjectId,
+  selectedProject,
+  selectedSubProject,
+} = storeToRefs(overviewStore);
 
 const searchQuery = ref('');
 const searchValue = useDebounce(searchQuery, 300);
@@ -176,9 +177,7 @@ const projectGroupsList = computed((): ProjectGroup[] => {
   return [];
 });
 
-const trimDisplay = (name: string) => {
-  return name.length > 20 ? `${name.slice(0, 20)}...` : name;
-};
+const trimDisplay = (name: string) => (name.length > 20 ? `${name.slice(0, 20)}...` : name);
 
 watch(error, (err) => {
   if (err) {
@@ -188,7 +187,7 @@ watch(error, (err) => {
 
 watch(selectedProjectGroupId, (newVal) => {
   if (newVal && newVal !== '') {
-    selectedProjectGroup.value = projectGroupsList.value.find(pg => pg.id === newVal) || null;
+    selectedProjectGroup.value = projectGroupsList.value.find((pg) => pg.id === newVal) || null;
   } else {
     selectedProjectGroup.value = null;
     selectedProjectId.value = '';
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue b/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
index d594513929..91c39413ad 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
@@ -1,27 +1,29 @@
 <template>
   <div class="flex flex-col gap-1">
     <div class="flex items-center gap-1.5 mb-1">
-      <lf-icon 
-        :name="status.status.icon" 
-        :size="16" 
+      <lf-icon
+        :name="status.status.icon"
+        :size="16"
         :type="status.status.iconType"
         :class="status.status.color"
       />
       <span class="text-sm font-medium text-gray-900">{{ status.status.text }}</span>
     </div>
-    <div class="text-xs text-gray-500">{{ integrationStatus.statusDetails }}</div>
+    <div class="text-xs text-gray-500">
+      {{ integrationStatus.statusDetails }}
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
-import { IntegrationStatus } from '../../types/overview.types';
 import { getIntegrationStatus } from '@/modules/admin/modules/integration/config/status';
+import { IntegrationStatus } from '../../types/overview.types';
 
 const props = defineProps<{
   integrationStatus: IntegrationStatus;
 }>();
 
 const status = computed(() => getIntegrationStatus(props.integrationStatus));
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/sub-project-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/sub-project-filter.vue
index b1131df880..1f6623e5b2 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/sub-project-filter.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/sub-project-filter.vue
@@ -32,10 +32,10 @@
           value="all"
           label="All projects"
           :selected="!selectedSubProject"
-          @click="selectedProjectId = ''"
           :class="{
             '!bg-blue-50': !selectedSubProject,
           }"
+          @click="selectedProjectId = ''"
         />
 
         <lfx-dropdown-separator />
@@ -66,10 +66,10 @@
           :value="subProject.id"
           :label="subProject.name"
           :selected="selectedSubProject?.id === subProject.id"
-          @click="selectedSubProjectId = subProject.id"
           :class="{
             '!bg-blue-50': selectedSubProject?.id === subProject.id,
           }"
+          @click="selectedSubProjectId = subProject.id"
         />
       </template>
     </template>
@@ -87,7 +87,7 @@ import { useOverviewStore } from '@/modules/admin/modules/overview/store/overvie
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { useDebounce } from '@vueuse/core';
 
-import { Project, SubProject } from '@/modules/lf/segments/types/Segments';
+import { SubProject } from '@/modules/lf/segments/types/Segments';
 import LfxDropdownSelect from '@/ui-kit/lfx/dropdown/dropdown-select.vue';
 import LfxDropdownSelector from '@/ui-kit/lfx/dropdown/dropdown-selector.vue';
 import LfxDropdownItem from '@/ui-kit/lfx/dropdown/dropdown-item.vue';
@@ -109,20 +109,16 @@ const params = computed(() => selectedProjectId.value || '');
 
 const { data, isPending } = OVERVIEW_API_SERVICE.fetchProjectById(params);
 
-const trimDisplay = (name: string) => {
-  return name.length > 20 ? `${name.slice(0, 20)}...` : name;
-};
+const trimDisplay = (name: string) => (name.length > 20 ? `${name.slice(0, 20)}...` : name);
 
-const subProjectsList = computed<SubProject[]>(() => {
-  return (data.value?.subprojects || []).filter((subProject) => {
-    if (!searchValue.value) return true;
-    return subProject.name.toLowerCase().includes(searchValue.value.toLowerCase());
-  });
-});
+const subProjectsList = computed<SubProject[]>(() => (data.value?.subprojects || []).filter((subProject) => {
+  if (!searchValue.value) return true;
+  return subProject.name.toLowerCase().includes(searchValue.value.toLowerCase());
+}));
 
 watch(selectedSubProjectId, (newVal) => {
   if (newVal && newVal !== '') {
-    selectedSubProject.value = subProjectsList.value?.find(p => p.id === newVal) || null;
+    selectedSubProject.value = subProjectsList.value?.find((p) => p.id === newVal) || null;
   } else {
     selectedSubProject.value = null;
   }
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/trend-display.vue b/frontend/src/modules/admin/modules/overview/components/fragments/trend-display.vue
index 9dfd2f3449..d625b5006b 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/trend-display.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/trend-display.vue
@@ -46,9 +46,7 @@ const props = withDefaults(
   },
 );
 
-const trend = computed(() => {
-  return props.data.current - props.data.previous;
-});
+const trend = computed(() => props.data.current - props.data.previous);
 
 const trendPercentage = computed(() => {
   if (!props.data.previous) {
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
index fcefd18a5e..9ad17a6245 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
@@ -5,13 +5,14 @@
       <h3 class="text-base font-semibold text-gray-900 mb-6">
         In progress & troubleshooting
       </h3>
-      
+
       <!-- Tabs -->
-      <integration-tabs 
+      <integration-tabs
         v-if="!isEmpty"
-        :tabs="overviewTabs" 
-        :modelValue="activeTab" 
-        @update:modelValue="activeTab = $event" />
+        :tabs="overviewTabs"
+        :model-value="activeTab"
+        @update:model-value="activeTab = $event"
+      />
     </div>
 
     <template v-if="isPending">
@@ -34,33 +35,40 @@
       <template v-else>
         <!-- Table Headers -->
         <div class="flex items-center gap-4 pt-5 pb-3 px-5 text-xs font-semibold text-gray-400">
-          <div class="w-1/6">Integration</div>
-          <div class="w-2/6">Project</div>
-          <div class="w-3/6">Status</div>
+          <div class="w-1/6">
+            Integration
+          </div>
+          <div class="w-2/6">
+            Project
+          </div>
+          <div class="w-3/6">
+            Status
+          </div>
         </div>
 
         <!-- Integration Rows -->
         <div class="divide-y divide-gray-200">
-          <integration-row 
-            v-for="integrationStatus in paginatedIntegrations" 
+          <integration-row
+            v-for="integrationStatus in paginatedIntegrations"
             :key="integrationStatus.id"
-            :integrationStatus="integrationStatus"
+            :integration-status="integrationStatus"
           />
         </div>
 
         <!-- Footer -->
         <div class="px-5 py-6 flex items-center justify-center gap-4">
           <span class="text-xs text-gray-400">{{ paginationText }}</span>
-          <button 
+          <lf-button
             v-if="hasNextPage"
-            class="text-xs text-primary-500 font-semibold hover:text-primary-600 flex items-center gap-1" 
+            type="primary-ghost"
             :disabled="isFetchingNextPage"
             :class="{ 'cursor-not-allowed': isFetchingNextPage }"
-            @click="() => fetchNextPage()">
-            <lf-icon name="circle-notch animate-spin" :size="16" class="text-primary-200" v-if="isFetchingNextPage" />
+            @click="() => fetchNextPage()"
+          >
+            <lf-icon v-if="isFetchingNextPage" name="circle-notch animate-spin" :size="16" class="text-primary-200" />
             <span v-if="isFetchingNextPage" class="text-primary-200">Loading integrations...</span>
             <span v-else>Load more</span>
-          </button>
+          </lf-button>
         </div>
       </template>
     </template>
@@ -68,7 +76,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import IntegrationTabs from '@/modules/admin/modules/overview/components/fragments/integration-tabs.vue';
 import IntegrationRow from '@/modules/admin/modules/overview/components/fragments/integration-row.vue';
 import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
@@ -77,20 +85,21 @@ import { lfIntegrationStatusesTabs } from '@/modules/admin/modules/integration/c
 import { OVERVIEW_API_SERVICE } from '@/modules/admin/modules/overview/services/overview.api.service';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
+import { ToastStore } from '@/shared/message/notification';
+import LfButton from '@/ui-kit/button/Button.vue';
 
-const { 
-  integrationStatusCount, 
+const {
+  integrationStatusCount,
   selectedIntegrationId,
   selectedSubProjectId,
   selectedProjectId,
   selectedProjectGroupId,
 } = storeToRefs(useOverviewStore());
 
-const activeTab = ref(lfIntegrationStatusesTabs.connecting.key);
+const activeTab = ref(lfIntegrationStatusesTabs.done.key);
 const limit = ref(10);
 
-const overviewTabs = computed(() => {
-  return [
+const overviewTabs = computed(() => [
   {
     label: 'In progress',
     key: lfIntegrationStatusesTabs.connecting.key,
@@ -109,44 +118,38 @@ const overviewTabs = computed(() => {
     count: integrationStatusCount.value[lfIntegrationStatusesTabs.error.key] || 0,
     icon: lfIntegrationStatusesTabs.error.chipStatus?.icon || lfIntegrationStatusesTabs.error.status.icon,
   },
-]
-});
+]);
 
-const params = computed(() => {
-  return {
-    platform: selectedIntegrationId.value || undefined, //activeTab.value,
-    status: ['done'], //lfIntegrationStatusesTabs[activeTab.value].statuses,
-    query: '',
-    limit: limit.value,
-    segment: selectedSubProjectId.value || selectedProjectId.value || selectedProjectGroupId.value || undefined,
-  };
-});
+const params = computed(() => ({
+  platform: selectedIntegrationId.value || undefined, // activeTab.value,
+  status: lfIntegrationStatusesTabs[activeTab.value].statuses,
+  query: '',
+  limit: limit.value,
+  segment: selectedSubProjectId.value || selectedProjectId.value || selectedProjectGroupId.value || undefined,
+}));
 
-const { data, isError, isPending, isFetchingNextPage, fetchNextPage, hasNextPage } = OVERVIEW_API_SERVICE.fetchGlobalIntegrations(params);
-const totalCount = computed(() => {
-  // @ts-expect-error - TanStack Query type inference issue with Vue
-  return data.value?.pages[0].count || 0;
-});
+const {
+  data, isError, isPending, isFetchingNextPage, fetchNextPage, hasNextPage,
+} = OVERVIEW_API_SERVICE.fetchGlobalIntegrations(params);
 
-const paginatedIntegrations = computed(() => {
-  // @ts-expect-error - TanStack Query type inference issue with Vue
-  return data.value?.pages.flatMap(page => page.rows) || [];
-});
+// @ts-expect-error - TanStack Query type inference issue with Vue
+const totalCount = computed(() => data.value?.pages[0].count || 0);
 
-const isEmpty = computed(() => {
-  return overviewTabs.value.every(tab => tab.count === 0);
-});
+// @ts-expect-error - TanStack Query type inference issue with Vue
+const paginatedIntegrations = computed(() => data.value?.pages.flatMap((page) => page.rows) || []);
+
+const isEmpty = computed(() => overviewTabs.value.every((tab) => tab.count === 0));
 
 const paginationText = computed(() => {
   const showing = paginatedIntegrations.value.length;
   return `${showing} out of ${totalCount.value} integrations`;
 });
 
-// watch(isError, () => {
-//   if (isError.value) {
-//     ToastStore.error('Failed to fetch global integrations');
-//   }
-// });
+watch(isError, () => {
+  if (isError.value) {
+    ToastStore.error('Failed to fetch global integrations');
+  }
+});
 </script>
 
 <script lang="ts">
@@ -154,4 +157,3 @@ export default {
   name: 'AppLfOverviewIntegrationDetails',
 };
 </script>
-
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
index e769f9dd0d..129ca016d0 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
@@ -54,14 +54,14 @@ import LfxChip from '@/ui-kit/lfx/chip/chip.vue';
 import IntegrationsFilter from '@/modules/admin/modules/overview/components/fragments/integrations-filter.vue';
 import { lfIntegrationStatusesTabs } from '@/modules/admin/modules/integration/config/status';
 import { useRouter } from 'vue-router';
-import { OVERVIEW_API_SERVICE } from '../../services/overview.api.service';
 import { ToastStore } from '@/shared/message/notification';
 import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
 import { storeToRefs } from 'pinia';
-import { GlobalIntegrationStatusCount } from '../../types/overview.types';
 import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
+import { GlobalIntegrationStatusCount } from '../../types/overview.types';
+import { OVERVIEW_API_SERVICE } from '../../services/overview.api.service';
 
-const { 
+const {
   selectedIntegrationId,
   integrationStatusCount,
   selectedSubProjectId,
@@ -87,7 +87,7 @@ const navigateTo = (path: string, key: string) => {
 
 watch(data, () => {
   if (data.value) {
-  integrationStatusCount.value = data.value?.reduce((acc: Record<string, number>, item: GlobalIntegrationStatusCount) => {
+    integrationStatusCount.value = data.value?.reduce((acc: Record<string, number>, item: GlobalIntegrationStatusCount) => {
       acc[item.status] = +item.count;
       return acc;
     }, {});
@@ -105,4 +105,4 @@ watch(isError, () => {
 export default {
   name: 'AppLfOverviewIntegrationStatus',
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/overview-filter.vue b/frontend/src/modules/admin/modules/overview/components/sections/overview-filter.vue
index 009dda22db..bfd7a71009 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/overview-filter.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/overview-filter.vue
@@ -1,25 +1,23 @@
 <template>
   <div class="flex items-center">
     <app-lf-project-group-filter />
-    <app-lf-project-filter :projects="projects" v-if="selectedProjectGroup && projects.length > 0" />
-    <app-lf-sub-project-filter :project-id="selectedProjectId" v-if="selectedProject" />
+    <app-lf-project-filter v-if="selectedProjectGroup && projects.length > 0" :projects="projects" />
+    <app-lf-sub-project-filter v-if="selectedProject" :project-id="selectedProjectId" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
 import AppLfProjectGroupFilter from '../fragments/project-group-filter.vue';
 import AppLfProjectFilter from '../fragments/project-filter.vue';
 import AppLfSubProjectFilter from '../fragments/sub-project-filter.vue';
 import { useOverviewStore } from '../../store/overview.store';
-import { storeToRefs } from 'pinia';
 
 const overviewStore = useOverviewStore();
 const { selectedProjectGroup, selectedProject, selectedProjectId } = storeToRefs(overviewStore);
 
-const projects = computed(() => {
-  return selectedProjectGroup.value?.projects || [];
-});
+const projects = computed(() => selectedProjectGroup.value?.projects || []);
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
index 10b98b988c..ad6d73a7ed 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
@@ -5,7 +5,7 @@
   <div v-else class="flex gap-4">
     <!-- TODO: revisit this implementation when the backend is ready -->
     <!-- we may use loop to render the cards -->
-    <lf-card class="flex-1 p-4 flex flex-col gap-2" v-if="!selectedProject">
+    <lf-card v-if="!selectedProject" class="flex-1 p-4 flex flex-col gap-2">
       <div class="flex items-center justify-between">
         <span class="text-xs font-semibold">Projects</span>
         <lf-icon name="folders" type="light" class="text-gray-400" />
@@ -49,20 +49,22 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, watch } from 'vue';
 import LfCard from '@/ui-kit/card/Card.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import AppLfOverviewTrendDisplay from '@/modules/admin/modules/overview/components/fragments/trend-display.vue';
 import type { OverviewTrends } from '@/modules/admin/modules/overview/types/overview.types';
-import { useOverviewStore } from '../../store/overview.store';
 import { storeToRefs } from 'pinia';
-import { OVERVIEW_API_SERVICE } from '../../services/overview.api.service';
 import { ToastStore } from '@/shared/message/notification';
 import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
 import { formatNumber } from '@/utils/number';
+import { OVERVIEW_API_SERVICE } from '../../services/overview.api.service';
+import { useOverviewStore } from '../../store/overview.store';
 
 const overviewStore = useOverviewStore();
-const { selectedProject, selectedProjectGroupId, selectedProjectId, selectedSubProjectId } = storeToRefs(overviewStore);
+const {
+  selectedProject, selectedProjectGroupId, selectedProjectId, selectedSubProjectId,
+} = storeToRefs(overviewStore);
 
 const params = computed(() => ({
   segment: selectedSubProjectId.value || selectedProjectId.value || selectedProjectGroupId.value || undefined,
@@ -104,4 +106,4 @@ watch(isError, (newVal) => {
 export default {
   name: 'AppLfOverviewSummary',
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/modules/admin/modules/overview/pages/overview.vue b/frontend/src/modules/admin/modules/overview/pages/overview.vue
index d436144264..d2e894a3ca 100644
--- a/frontend/src/modules/admin/modules/overview/pages/overview.vue
+++ b/frontend/src/modules/admin/modules/overview/pages/overview.vue
@@ -25,4 +25,4 @@ import AppLfOverviewFilter from '@/modules/admin/modules/overview/components/sec
 export default {
   name: 'AppLfOverviewPage',
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
index c036a4dae8..8cb0f949d4 100644
--- a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
+++ b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
@@ -1,14 +1,14 @@
-import type { QueryFunction } from '@tanstack/vue-query'
-import { type ComputedRef, computed } from 'vue'
-import { useInfiniteQuery, useQuery } from '@tanstack/vue-query'
-import { TanstackKey } from '@/shared/types/tanstack'
-import authAxios from '@/shared/axios/auth-axios'
+import type { QueryFunction } from '@tanstack/vue-query';
+import { type ComputedRef, computed } from 'vue';
+import { useInfiniteQuery, useQuery } from '@tanstack/vue-query';
+import { TanstackKey } from '@/shared/types/tanstack';
+import authAxios from '@/shared/axios/auth-axios';
+import { Project } from '@/modules/lf/segments/types/Segments';
 import {
   DashboardMetrics,
   GlobalIntegrationStatusCount,
   IntegrationStatusResponse,
-} from '../types/overview.types'
-import { Project } from '@/modules/lf/segments/types/Segments'
+} from '../types/overview.types';
 
 export interface GlobalIntegrationStatusCountQueryParams {
   platform: string | undefined
@@ -29,59 +29,53 @@ export interface DashboardMetricsQueryParams {
 
 class OverviewApiService {
   fetchProjectById(params: ComputedRef<string>) {
-    const queryKey = computed(() => [TanstackKey.PROJECT_BY_ID, params.value])
-    const queryFn = computed<QueryFunction<Project>>(() =>
-      this.fetchProjectByIdQueryFn(() => ({
-        id: params.value,
-      })),
-    )
+    const queryKey = computed(() => [TanstackKey.PROJECT_BY_ID, params.value]);
+    const queryFn = computed<QueryFunction<Project>>(() => this.fetchProjectByIdQueryFn(() => ({
+      id: params.value,
+    })));
 
     return useQuery<Project>({
       queryKey,
       queryFn,
-    })
+    });
   }
 
   fetchProjectByIdQueryFn(
     query: () => Record<string, string | number | boolean | undefined | string[] | null>,
   ): QueryFunction<Project> {
-    return () =>
-      authAxios
-        .get(`/segment/${query().id}`, {
-          params: {
-            segments: [query().id],
-          },
-        })
-        .then((res) => res.data)
+    return () => authAxios
+      .get(`/segment/${query().id}`, {
+        params: {
+          segments: [query().id],
+        },
+      })
+      .then((res) => res.data);
   }
 
   fetchGlobalIntegrationStatusCount(params: ComputedRef<GlobalIntegrationStatusCountQueryParams>) {
     const queryKey = computed(() => [
       TanstackKey.GLOBAL_INTEGRATION_STATUS_COUNT,
       params.value.platform,
-    ])
-    const queryFn = computed<QueryFunction<GlobalIntegrationStatusCount[]>>(() =>
-      this.fetchGlobalIntegrationStatusCountQueryFn(() => ({
-        platform: params.value.platform,
-        segment: params.value.segment,
-      })),
-    )
+    ]);
+    const queryFn = computed<QueryFunction<GlobalIntegrationStatusCount[]>>(() => this.fetchGlobalIntegrationStatusCountQueryFn(() => ({
+      platform: params.value.platform,
+      segment: params.value.segment,
+    })));
 
     return useQuery<GlobalIntegrationStatusCount[]>({
       queryKey,
       queryFn,
-    })
+    });
   }
 
   fetchGlobalIntegrationStatusCountQueryFn(
     query: () => Record<string, string | number | boolean | undefined | string[] | null>,
   ): QueryFunction<GlobalIntegrationStatusCount[]> {
-    return () =>
-      authAxios
-        .get('/integration/global/status', {
-          params: query(),
-        })
-        .then((res) => res.data)
+    return () => authAxios
+      .get('/integration/global/status', {
+        params: query(),
+      })
+      .then((res) => res.data);
   }
 
   fetchGlobalIntegrations(params: ComputedRef<GlobalIntegrationIntegrationsQueryParams>) {
@@ -92,12 +86,10 @@ class OverviewApiService {
       params.value.query,
       params.value.limit,
       params.value.segment,
-    ])
-    const queryFn = computed<QueryFunction<IntegrationStatusResponse>>(() =>
-      this.fetchGlobalIntegrationsQueryFn(() => ({
-        ...params.value,
-      })),
-    )
+    ]);
+    const queryFn = computed<QueryFunction<IntegrationStatusResponse>>(() => this.fetchGlobalIntegrationsQueryFn(() => ({
+      ...params.value,
+    })));
 
     return useInfiniteQuery<
       IntegrationStatusResponse,
@@ -107,54 +99,50 @@ class OverviewApiService {
       number
     >({
       queryKey,
-      //@ts-expect-error - TanStack Query type inference issue with Vue
+      // @ts-expect-error - TanStack Query type inference issue with Vue
       queryFn,
       getNextPageParam: this.getNextPageIntegrationsParam,
       initialPageParam: 0,
-    })
+    });
   }
 
   fetchGlobalIntegrationsQueryFn(
     query: () => Record<string, string | number | boolean | undefined | string[] | null>,
   ): QueryFunction<IntegrationStatusResponse> {
-    return ({ pageParam = 0 }) =>
-      authAxios
-        .get('/integration/global', {
-          params: { offset: pageParam, ...query() },
-        })
-        .then((res) => res.data)
+    return ({ pageParam = 0 }) => authAxios
+      .get('/integration/global', {
+        params: { offset: pageParam, ...query() },
+      })
+      .then((res) => res.data);
   }
 
   getNextPageIntegrationsParam(lastPage: IntegrationStatusResponse): number | undefined {
-    const nextPage = lastPage.offset + lastPage.limit
-    const totalRows = lastPage.count
-    return nextPage < totalRows ? nextPage : undefined
+    const nextPage = lastPage.offset + lastPage.limit;
+    const totalRows = lastPage.count;
+    return nextPage < totalRows ? nextPage : undefined;
   }
 
   fetchDashboardMetrics(params: ComputedRef<DashboardMetricsQueryParams>) {
-    const queryKey = computed(() => [TanstackKey.DASHBOARD_METRICS, params.value.segment])
-    const queryFn = computed<QueryFunction<DashboardMetrics>>(() =>
-      this.fetchDashboardMetricsQueryFn(() => ({
-        ...params.value,
-      })),
-    )
+    const queryKey = computed(() => [TanstackKey.DASHBOARD_METRICS, params.value.segment]);
+    const queryFn = computed<QueryFunction<DashboardMetrics>>(() => this.fetchDashboardMetricsQueryFn(() => ({
+      ...params.value,
+    })));
 
     return useQuery<DashboardMetrics>({
       queryKey,
       queryFn,
-    })
+    });
   }
 
   fetchDashboardMetricsQueryFn(
     query: () => Record<string, string | number | boolean | undefined | string[] | null>,
   ): QueryFunction<DashboardMetrics> {
-    return () =>
-      authAxios
-        .get('/dashboard/metrics', {
-          params: query(),
-        })
-        .then((res) => res.data)
+    return () => authAxios
+      .get('/dashboard/metrics', {
+        params: query(),
+      })
+      .then((res) => res.data);
   }
 }
 
-export const OVERVIEW_API_SERVICE = new OverviewApiService()
+export const OVERVIEW_API_SERVICE = new OverviewApiService();
diff --git a/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts b/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts
index 14b1ef0492..2951607195 100644
--- a/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts
+++ b/frontend/src/modules/admin/modules/overview/store/mock-overview-data.ts
@@ -1,4 +1,5 @@
-import { IntegrationStatus } from '../types/overview.types'
+import { IntegrationStatus } from '../types/overview.types';
+
 export const mockOverviewData: IntegrationStatus[] = [
   // In Progress integrations
   {
@@ -484,4 +485,4 @@ export const mockOverviewData: IntegrationStatus[] = [
     status: 'error',
     statusDetails: 'Unable to connect to server',
   },
-]
+];
diff --git a/frontend/src/modules/admin/modules/overview/store/overview.store.ts b/frontend/src/modules/admin/modules/overview/store/overview.store.ts
index add648587a..2a8ba9f839 100644
--- a/frontend/src/modules/admin/modules/overview/store/overview.store.ts
+++ b/frontend/src/modules/admin/modules/overview/store/overview.store.ts
@@ -1,16 +1,16 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import { Project, ProjectGroup, SubProject } from '@/modules/lf/segments/types/Segments'
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { Project, ProjectGroup, SubProject } from '@/modules/lf/segments/types/Segments';
 
 export const useOverviewStore = defineStore('overview', () => {
-  const selectedProjectGroupId = ref<string>('')
-  const selectedProjectGroup = ref<ProjectGroup | null>(null)
-  const selectedProjectId = ref<string>('')
-  const selectedProject = ref<Project | null>(null)
-  const selectedSubProjectId = ref<string>('')
-  const selectedSubProject = ref<SubProject | null>(null)
-  const selectedIntegrationId = ref<string | null>(null)
-  const integrationStatusCount = ref<Record<string, number>>({})
+  const selectedProjectGroupId = ref<string>('');
+  const selectedProjectGroup = ref<ProjectGroup | null>(null);
+  const selectedProjectId = ref<string>('');
+  const selectedProject = ref<Project | null>(null);
+  const selectedSubProjectId = ref<string>('');
+  const selectedSubProject = ref<SubProject | null>(null);
+  const selectedIntegrationId = ref<string | null>(null);
+  const integrationStatusCount = ref<Record<string, number>>({});
 
   return {
     selectedProjectGroupId,
@@ -21,5 +21,5 @@ export const useOverviewStore = defineStore('overview', () => {
     selectedSubProject,
     selectedIntegrationId,
     integrationStatusCount,
-  }
-})
+  };
+});
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 1707c6bab6..5b2513f5ca 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,13 +1,13 @@
-import { createRouter as createVueRouter, createWebHistory } from 'vue-router'
-import { storeToRefs } from 'pinia'
+import { createRouter as createVueRouter, createWebHistory } from 'vue-router';
+import { storeToRefs } from 'pinia';
 
-import { store } from '@/store'
-import authGuards from '@/middleware/auth'
-import modules from '@/modules'
-import ProgressBar from '@/shared/progress-bar/progress-bar'
-import { useLfSegmentsStore } from '@/modules/lf/segments/store'
-import auth from '@/modules/auth'
-import navigationGuard from '@/middleware/navigation/navigation-guard'
+import { store } from '@/store';
+import authGuards from '@/middleware/auth';
+import modules from '@/modules';
+import ProgressBar from '@/shared/progress-bar/progress-bar';
+import { useLfSegmentsStore } from '@/modules/lf/segments/store';
+import auth from '@/modules/auth';
+import navigationGuard from '@/middleware/navigation/navigation-guard';
 
 /**
  * Loads all the routes from src/modules/ folders, and adds the catch-all rule to handle 404s
@@ -22,22 +22,20 @@ const routes = [
   ...auth.routes,
   ...Object.keys(modules)
     .filter((key) => Boolean(modules[key].routes))
-    .map((key) =>
-      modules[key].routes.map((r) => {
-        // eslint-disable-next-line no-param-reassign
-        r.meta = {
-          ...r.meta,
-          middleware: [...authGuards],
-        }
-        return r
-      }),
-    )
+    .map((key) => modules[key].routes.map((r) => {
+      // eslint-disable-next-line no-param-reassign
+      r.meta = {
+        ...r.meta,
+        middleware: [...authGuards],
+      };
+      return r;
+    }))
     .reduce((a, b) => a.concat(b), []),
   { path: '/:catchAll(.*)', redirect: '/404' },
-]
+];
 
 // eslint-disable-next-line import/no-mutable-exports
-let router
+let router;
 
 /**
  * Creates/Sets Router
@@ -49,66 +47,66 @@ export const createRouter = () => {
       history: createWebHistory(),
       routes,
       scrollBehavior() {
-        return { x: 0, y: 0 }
+        return { x: 0, y: 0 };
       },
-    })
+    });
 
-    const originalPush = router.push
+    const originalPush = router.push;
     router.push = function push(location) {
       return originalPush.call(this, location).catch((error) => {
-        console.error(error)
-        ProgressBar.done()
-      })
-    }
+        console.error(error);
+        ProgressBar.done();
+      });
+    };
 
     router.beforeEach(async (to, from, next) => {
-      const lsSegmentsStore = useLfSegmentsStore()
-      const { selectedProjectGroup } = storeToRefs(lsSegmentsStore)
-      const { listProjectGroups, updateSelectedProjectGroup } = lsSegmentsStore
+      const lsSegmentsStore = useLfSegmentsStore();
+      const { selectedProjectGroup } = storeToRefs(lsSegmentsStore);
+      const { listProjectGroups, updateSelectedProjectGroup } = lsSegmentsStore;
 
       // Set title to pages
-      document.title = `LFX Community Data Platform${to.meta.title ? ` | ${to.meta.title}` : ''}`
+      document.title = `LFX Community Data Platform${to.meta.title ? ` | ${to.meta.title}` : ''}`;
 
       if (to.name && to.query.menu === from.query.menu && to.name !== from.name) {
-        ProgressBar.start()
+        ProgressBar.start();
       }
 
-      const matchedRoute = to.matched.find((m) => m.meta.middleware)
+      const matchedRoute = to.matched.find((m) => m.meta.middleware);
 
       if (matchedRoute !== undefined) {
         const middlewareArray = Array.isArray(matchedRoute.meta.middleware)
           ? matchedRoute.meta.middleware
-          : [matchedRoute.meta.middleware]
+          : [matchedRoute.meta.middleware];
 
         const context = {
           from,
           router,
           to,
           store,
-        }
+        };
 
         await middlewareArray.forEach(async (middleware) => {
-          await middleware(context)
-        })
+          await middleware(context);
+        });
 
         // Redirect to project group landing pages if routes that require a selected project group
         // And no project group is selected
         if (
-          to.meta.segments?.requireSelectedProjectGroup ||
-          to.meta.segments?.optionalSelectedProjectGroup
+          to.meta.segments?.requireSelectedProjectGroup
+          || to.meta.segments?.optionalSelectedProjectGroup
         ) {
           if (
-            !selectedProjectGroup.value &&
-            !to.query.projectGroup &&
-            !to.meta.segments?.optionalSelectedProjectGroup
+            !selectedProjectGroup.value
+            && !to.query.projectGroup
+            && !to.meta.segments?.optionalSelectedProjectGroup
           ) {
-            next('/project-groups')
-            return
+            next('/project-groups');
+            return;
           }
 
           if (!to.query.projectGroup && selectedProjectGroup.value?.id) {
-            next({ ...to, query: { ...to.query, projectGroup: selectedProjectGroup.value?.id } })
-            return
+            next({ ...to, query: { ...to.query, projectGroup: selectedProjectGroup.value?.id } });
+            return;
           }
 
           if (!selectedProjectGroup.value) {
@@ -116,27 +114,27 @@ export const createRouter = () => {
               await listProjectGroups({
                 limit: null,
                 reset: true,
-              })
+              });
 
-              updateSelectedProjectGroup(to.query.projectGroup, false)
+              updateSelectedProjectGroup(to.query.projectGroup, false);
             } catch (e) {
-              next('/project-groups')
-              return
+              next('/project-groups');
+              return;
             }
           }
         }
       }
 
-      next()
-    })
+      next();
+    });
 
     router.afterEach(async (to) => {
-      ProgressBar.done()
-      await navigationGuard({ to })
-    })
+      ProgressBar.done();
+      await navigationGuard({ to });
+    });
   }
 
-  return router
-}
+  return router;
+};
 
-export { router }
+export { router };
diff --git a/frontend/src/ui-kit/lfx/chip/chip.vue b/frontend/src/ui-kit/lfx/chip/chip.vue
index c0628fa3c5..d5b3d9356b 100644
--- a/frontend/src/ui-kit/lfx/chip/chip.vue
+++ b/frontend/src/ui-kit/lfx/chip/chip.vue
@@ -33,7 +33,7 @@ const props = withDefaults(
     removable: false,
   },
 );
-const emit = defineEmits<{ (e: 'dismissed'): void }>();
+const emit = defineEmits<{(e: 'dismissed'): void }>();
 
 const isVisible = ref(true);
 
diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown-item.vue b/frontend/src/ui-kit/lfx/dropdown/dropdown-item.vue
index f8b77de572..d0e1c9e067 100644
--- a/frontend/src/ui-kit/lfx/dropdown/dropdown-item.vue
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown-item.vue
@@ -39,8 +39,7 @@ const props = defineProps<{
 
 const attrs = useAttrs();
 
-const emit = defineEmits<{
-  (e: 'click', value: { value?: string; label?: string; [key: string]: any }): void;
+const emit = defineEmits<{(e: 'click', value: { value?: string; label?: string; [key: string]: any }): void;
 }>();
 
 // Determine if the item is currently selected
diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown-search.vue b/frontend/src/ui-kit/lfx/dropdown/dropdown-search.vue
index 70f0cb6169..2aa38e2674 100644
--- a/frontend/src/ui-kit/lfx/dropdown/dropdown-search.vue
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown-search.vue
@@ -44,7 +44,7 @@ const props = defineProps<{
   lazy?: boolean;
 }>();
 
-const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>();
+const emit = defineEmits<{(e: 'update:modelValue', value: string): void }>();
 
 const model = ref(props.modelValue);
 
diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown-select.vue b/frontend/src/ui-kit/lfx/dropdown/dropdown-select.vue
index 87b01a3b82..310211047c 100644
--- a/frontend/src/ui-kit/lfx/dropdown/dropdown-select.vue
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown-select.vue
@@ -23,7 +23,9 @@ SPDX-License-Identifier: MIT
 
 <script setup lang="ts">
 import type { Placement } from '@popperjs/core';
-import { computed, type VNode, provide, ref, useSlots } from 'vue';
+import {
+  computed, type VNode, provide, ref, useSlots,
+} from 'vue';
 import LfxDropdown from '@/ui-kit/lfx/dropdown/dropdown.vue';
 
 const props = withDefaults(
@@ -42,8 +44,7 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void;
+const emit = defineEmits<{(e: 'update:modelValue', value: string): void;
   (e: 'update:visibility', value: boolean): void;
 }>();
 
diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown.vue b/frontend/src/ui-kit/lfx/dropdown/dropdown.vue
index e1ca4c1394..d4687a9544 100644
--- a/frontend/src/ui-kit/lfx/dropdown/dropdown.vue
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown.vue
@@ -28,9 +28,8 @@ This will replace the old Popover component in the future.
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed, provide } from 'vue';
 import type { Placement } from '@popperjs/core';
-import { computed, provide } from 'vue';
 import LfxPopover from '@/ui-kit/lfx/popover/popover.vue';
 import useResponsive from '@/utils/responsive';
 
@@ -53,7 +52,7 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits<{ (e: 'update:visibility', value: boolean): void }>();
+const emit = defineEmits<{(e: 'update:visibility', value: boolean): void }>();
 
 const submenuOpen = ref('');
 
diff --git a/frontend/src/ui-kit/lfx/popover/popover.vue b/frontend/src/ui-kit/lfx/popover/popover.vue
index f25041c78b..76cb5e3cbd 100644
--- a/frontend/src/ui-kit/lfx/popover/popover.vue
+++ b/frontend/src/ui-kit/lfx/popover/popover.vue
@@ -33,7 +33,9 @@ This will replace the old Popover component in the future.
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import {
+  ref, watch, onMounted, onBeforeUnmount, nextTick,
+} from 'vue';
 import type { Instance, Placement, ModifierPhases } from '@popperjs/core';
 import { createPopper } from '@popperjs/core';
 
@@ -60,7 +62,7 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits<{ (e: 'update:visibility', value: boolean): void }>();
+const emit = defineEmits<{(e: 'update:visibility', value: boolean): void }>();
 
 const trigger = ref<HTMLElement | null>(null);
 const popover = ref<HTMLElement | null>(null);
@@ -90,18 +92,18 @@ const createPopperInstance = () => {
         },
         ...(props.matchWidth
           ? [
-              {
-                name: 'sameWidth',
-                enabled: true,
-                phase: 'beforeWrite' as ModifierPhases,
-                requires: ['computeStyles'] as unknown as ModifierPhases[],
-                fn: ({ state }: { state: any }) => {
-                  Object.assign(state.styles.popper, {
-                    width: `${state.rects.reference.width}px`,
-                  });
-                },
+            {
+              name: 'sameWidth',
+              enabled: true,
+              phase: 'beforeWrite' as ModifierPhases,
+              requires: ['computeStyles'] as unknown as ModifierPhases[],
+              fn: ({ state }: { state: any }) => {
+                Object.assign(state.styles.popper, {
+                  width: `${state.rects.reference.width}px`,
+                });
               },
-            ]
+            },
+          ]
           : []),
       ],
     });

From fe0a152cdaeb6a95c48e62f69af953fd7b2f5bba Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Mon, 15 Dec 2025 16:30:53 +0800
Subject: [PATCH 33/51] fix: projects filter bugs

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../overview/components/fragments/project-filter.vue      | 2 +-
 .../components/fragments/project-group-filter.vue         | 2 +-
 .../overview/components/fragments/sub-project-filter.vue  | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
index 21ebfef985..3e744db60e 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/project-filter.vue
@@ -20,7 +20,7 @@
             name="folders"
             :size="16"
           />
-          <span class="text-sm text-neutral-900 truncate">
+          <span class="text-sm text-neutral-900 truncate" :class="{ 'font-semibold': selectedProject }">
             {{ trimDisplay(selectedProject?.name || '') || 'All projects' }}
           </span>
         </div>
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue
index 431d76e064..92338dd44b 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/project-group-filter.vue
@@ -20,7 +20,7 @@
             name="folder-tree"
             :size="16"
           />
-          <span class="text-sm text-neutral-900 truncate">
+          <span class="text-sm text-neutral-900 truncate" :class="{ 'font-semibold': selectedProjectGroup }">
             {{ trimDisplay(selectedProjectGroup?.name || '') || 'All project groups' }}
           </span>
         </div>
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/sub-project-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/sub-project-filter.vue
index 1f6623e5b2..a6ea4df442 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/sub-project-filter.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/sub-project-filter.vue
@@ -15,10 +15,10 @@
       >
         <div class="flex items-center gap-2">
           <lf-icon
-            name="folders"
+            name="layer-group"
             :size="16"
           />
-          <span class="text-sm text-neutral-900 truncate">
+          <span class="text-sm text-neutral-900 truncate" :class="{ 'font-semibold': selectedSubProject }">
             {{ trimDisplay(selectedSubProject?.name || '') || 'All sub-projects' }}
           </span>
         </div>
@@ -30,12 +30,12 @@
         <!-- All projects option -->
         <lfx-dropdown-item
           value="all"
-          label="All projects"
+          label="All-subprojects"
           :selected="!selectedSubProject"
           :class="{
             '!bg-blue-50': !selectedSubProject,
           }"
-          @click="selectedProjectId = ''"
+          @click="selectedSubProjectId = ''"
         />
 
         <lfx-dropdown-separator />

From 7520a11f8ad131575b242f2a35a6605d3efde281 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Mon, 15 Dec 2025 17:04:05 +0800
Subject: [PATCH 34/51] fix: integrations count

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../components/sections/integration-details.vue  | 16 +++++++++++++++-
 .../components/sections/integration-status.vue   | 12 ++++++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
index 9ad17a6245..1a3fd04a8b 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
@@ -96,7 +96,7 @@ const {
   selectedProjectGroupId,
 } = storeToRefs(useOverviewStore());
 
-const activeTab = ref(lfIntegrationStatusesTabs.done.key);
+const activeTab = ref(lfIntegrationStatusesTabs.connecting.key);
 const limit = ref(10);
 
 const overviewTabs = computed(() => [
@@ -150,6 +150,20 @@ watch(isError, () => {
     ToastStore.error('Failed to fetch global integrations');
   }
 });
+
+watch(overviewTabs, (newValue) => {
+  // Loop through the integrationStatusCount and if the count is 0, set the activeTab to the next tab
+  let activeTabKey = '';
+  newValue.forEach((tab) => {
+    if (tab.count > 0 && !activeTabKey) {
+      activeTabKey = tab.key;
+    }
+  });
+
+  if (activeTabKey) {
+    activeTab.value = activeTabKey;
+  }
+}, { immediate: true, deep: true });
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
index 129ca016d0..36e5236a09 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
@@ -87,10 +87,18 @@ const navigateTo = (path: string, key: string) => {
 
 watch(data, () => {
   if (data.value) {
-    integrationStatusCount.value = data.value?.reduce((acc: Record<string, number>, item: GlobalIntegrationStatusCount) => {
-      acc[item.status] = +item.count;
+    const statusCount: Record<string, number> = Object.keys(lfIntegrationStatusesTabs).reduce((acc: any, key) => {
+      acc[key] = 0;
       return acc;
     }, {});
+    data.value.forEach((status: GlobalIntegrationStatusCount) => {
+      const matchedStatus = Object.values(lfIntegrationStatusesTabs).find((config) => config.show({ status: status.status }));
+      if (!matchedStatus) {
+        return;
+      }
+      statusCount[matchedStatus.key] += +status.count;
+    });
+    integrationStatusCount.value = statusCount;
   }
 }, { immediate: true });
 

From 621c66d0abfb89a1781c5e5eab13193c2b63d4e2 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Mon, 15 Dec 2025 17:20:38 +0800
Subject: [PATCH 35/51] fix: integrations dropdown filter search

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../fragments/integrations-filter.vue         | 33 ++++++++++++++++---
 .../sections/integration-details.vue          |  2 +-
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue
index 374d5ebca8..56cde36531 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue
@@ -36,13 +36,25 @@
           }"
           @click="selectedIntegrationId = null"
         />
+
+        <lfx-dropdown-separator />
+
+        <!-- Search input -->
+        <lfx-dropdown-search
+          v-model="searchQuery"
+          placeholder="Search integrations..."
+          lazy
+          class=""
+        />
+
+        <lfx-dropdown-separator />
       </div>
 
       <lfx-dropdown-item
-        v-for="(integration, key) in lfIntegrations()"
-        :key="key"
-        :selected="selectedIntegrationId === key"
-        @click="selectedIntegrationId = key"
+        v-for="integration in integrationsFiltered"
+        :key="integration.key"
+        :selected="selectedIntegrationId === integration.key"
+        @click="selectedIntegrationId = integration.key"
       >
         <div class="flex items-center gap-2">
           <img :src="integration.image" :alt="integration.name" class="min-w-4 h-4 object-contain">
@@ -56,19 +68,32 @@
 <script setup lang="ts">
 import {
   computed,
+  ref,
 } from 'vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfxDropdownSelect from '@/ui-kit/lfx/dropdown/dropdown-select.vue';
 import LfxDropdownSelector from '@/ui-kit/lfx/dropdown/dropdown-selector.vue';
 import LfxDropdownItem from '@/ui-kit/lfx/dropdown/dropdown-item.vue';
+import LfxDropdownSeparator from '@/ui-kit/lfx/dropdown/dropdown-separator.vue';
+import LfxDropdownSearch from '@/ui-kit/lfx/dropdown/dropdown-search.vue';
 import { useOverviewStore } from '@/modules/admin/modules/overview/store/overview.store';
 import { lfIntegrations } from '@/config/integrations';
 import { storeToRefs } from 'pinia';
+import { useDebounce } from '@vueuse/core';
 
 const overviewStore = useOverviewStore();
 const { selectedIntegrationId } = storeToRefs(overviewStore);
 
+const searchQuery = ref('');
+const searchValue = useDebounce(searchQuery, 300);
+
 const integrations = computed(() => lfIntegrations());
+
+const integrationsFiltered = computed(() => Object.values(integrations.value).filter((integration) => {
+  if (!searchValue.value) return true;
+  return integration.name.toLowerCase().includes(searchValue.value.toLowerCase());
+}));
+
 const integrationId = computed<string>({
   get: () => selectedIntegrationId.value || '',
   set: (value: string) => {
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
index 1a3fd04a8b..0f7d804dac 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
@@ -97,7 +97,7 @@ const {
 } = storeToRefs(useOverviewStore());
 
 const activeTab = ref(lfIntegrationStatusesTabs.connecting.key);
-const limit = ref(10);
+const limit = ref(50);
 
 const overviewTabs = computed(() => [
   {

From 4ae9639ddc7dfa3a4139c45a6bd4853c573d7783 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Mon, 15 Dec 2025 17:47:35 +0800
Subject: [PATCH 36/51] fix: integration status not refreshing on project
 filter

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../overview/components/fragments/integration-row.vue      | 7 +++++--
 .../modules/overview/services/overview.api.service.ts      | 1 +
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
index 8597d3ba86..f0bf911ef9 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
@@ -1,6 +1,7 @@
 <template>
   <div
-    :key="integration.key"
+    v-if="integration"
+    :key="props.integrationStatus.platform"
     class="flex items-center gap-4 px-5 py-5"
   >
     <!-- Integration Column -->
@@ -82,7 +83,9 @@ const props = defineProps<{
 }>();
 
 const status = computed(() => getIntegrationStatus(props.integrationStatus));
-const integration = computed(() => lfIntegrations()[props.integrationStatus.platform]);
+// TODO: Check with Gasper what is the best way to handle this
+const integration = computed(() => props.integrationStatus.platform === 'github-nango' ? 
+lfIntegrations().github : lfIntegrations()[props.integrationStatus.platform]);
 
 const disconnectIntegration = async (integration: any) => {
   trackEvent({
diff --git a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
index 8cb0f949d4..0418d043ef 100644
--- a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
+++ b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
@@ -56,6 +56,7 @@ class OverviewApiService {
     const queryKey = computed(() => [
       TanstackKey.GLOBAL_INTEGRATION_STATUS_COUNT,
       params.value.platform,
+      params.value.segment,
     ]);
     const queryFn = computed<QueryFunction<GlobalIntegrationStatusCount[]>>(() => this.fetchGlobalIntegrationStatusCountQueryFn(() => ({
       platform: params.value.platform,

From 1149d8ec97e5837939c0a76ebd7e8b5516631903 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Mon, 15 Dec 2025 17:48:51 +0800
Subject: [PATCH 37/51] chore: lint fix

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../modules/overview/components/fragments/integration-row.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
index f0bf911ef9..4e322a94f3 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
@@ -84,8 +84,8 @@ const props = defineProps<{
 
 const status = computed(() => getIntegrationStatus(props.integrationStatus));
 // TODO: Check with Gasper what is the best way to handle this
-const integration = computed(() => props.integrationStatus.platform === 'github-nango' ? 
-lfIntegrations().github : lfIntegrations()[props.integrationStatus.platform]);
+const integration = computed(() => (props.integrationStatus.platform === 'github-nango'
+  ? lfIntegrations().github : lfIntegrations()[props.integrationStatus.platform]));
 
 const disconnectIntegration = async (integration: any) => {
   trackEvent({

From 0ecd94cf18cfe9c3ff1105c5ec4ab325b3c7023a Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Mon, 15 Dec 2025 19:03:19 +0800
Subject: [PATCH 38/51] fix: ellipsis menu placement

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../components/fragments/integration-row.vue     | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
index 4e322a94f3..932aca2d46 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
@@ -38,12 +38,16 @@
       />
       <!-- Actions Column -->
       <div class="w-10">
-        <lf-dropdown placement="bottom-end" width="14.5rem" :persistent="true">
+        <lfx-dropdown
+          placement="bottom-end"
+          width="14.5rem"
+        >
           <template #trigger>
             <lf-button type="secondary-ghost" icon-only>
               <lf-icon name="ellipsis" />
             </lf-button>
           </template>
+
           <component
             :is="integration.dropdownComponent"
             v-if="status.key === 'done' && integration.dropdownComponent.dropdownComponent"
@@ -51,11 +55,11 @@
             :segment-id="integrationStatus.segmentId"
             :grandparent-id="integrationStatus.grandparentId"
           />
-          <lf-dropdown-item type="danger" @click="disconnectIntegration(integrationStatus)">
+          <lfx-dropdown-item type="danger" @click="disconnectIntegration(integrationStatus)">
             <lf-icon name="link-simple-slash" type="regular" />
             Disconnect integration
-          </lf-dropdown-item>
-        </lf-dropdown>
+          </lfx-dropdown-item>
+        </lfx-dropdown>
       </div>
     </div>
   </div>
@@ -70,8 +74,8 @@ import { lfIntegrations } from '@/config/integrations';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { mapActions } from '@/shared/vuex/vuex.helpers';
-import LfDropdown from '@/ui-kit/dropdown/Dropdown.vue';
-import LfDropdownItem from '@/ui-kit/dropdown/DropdownItem.vue';
+import LfxDropdown from '@/ui-kit/lfx/dropdown/dropdown.vue';
+import LfxDropdownItem from '@/ui-kit/lfx/dropdown/dropdown-item.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import { IntegrationStatus } from '../../types/overview.types';
 

From d4001160286423c9c5330be574fb779fd3f51e1b Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Mon, 15 Dec 2025 19:12:23 +0800
Subject: [PATCH 39/51] fix: number format and page width

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../overview/components/sections/summary.vue     | 16 ++++++++--------
 .../admin/modules/overview/pages/overview.vue    |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
index ad6d73a7ed..9af2ce8eff 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
@@ -72,26 +72,26 @@ const params = computed(() => ({
 
 const { data, isPending, isError } = OVERVIEW_API_SERVICE.fetchDashboardMetrics(params);
 const projectsTrends = computed<OverviewTrends>(() => ({
-  current: data.value?.projectsTotal || 0,
-  previous: (data.value?.projectsTotal || 0) - (data.value?.projectsLast30Days || 0),
+  current: Number(data.value?.projectsTotal || 0),
+  previous: Number((data.value?.projectsTotal || 0) - Number(data.value?.projectsLast30Days || 0)),
   period: 'vs. last 30d',
 }));
 
 const peopleTrends = computed<OverviewTrends>(() => ({
-  current: data.value?.membersTotal || 0,
-  previous: (data.value?.membersTotal || 0) - (data.value?.membersLast30Days || 0),
+  current: Number(data.value?.membersTotal || 0),
+  previous: Number((data.value?.membersTotal || 0) - Number(data.value?.membersLast30Days || 0)),
   period: 'vs. last 30d',
 }));
 
 const organizationsTrends = computed<OverviewTrends>(() => ({
-  current: data.value?.organizationsTotal || 0,
-  previous: (data.value?.organizationsTotal || 0) - (data.value?.organizationsLast30Days || 0),
+  current: Number(data.value?.organizationsTotal || 0),
+  previous: Number((data.value?.organizationsTotal || 0) - Number(data.value?.organizationsLast30Days || 0)),
   period: 'vs. last 30d',
 }));
 
 const activitiesTrends = computed<OverviewTrends>(() => ({
-  current: data.value?.activitiesTotal || 0,
-  previous: (data.value?.activitiesTotal || 0) - (data.value?.activitiesLast30Days || 0),
+  current: Number(data.value?.activitiesTotal || 0),
+  previous: Number((data.value?.activitiesTotal || 0) - Number(data.value?.activitiesLast30Days || 0)),
   period: 'vs. last 30d',
 }));
 
diff --git a/frontend/src/modules/admin/modules/overview/pages/overview.vue b/frontend/src/modules/admin/modules/overview/pages/overview.vue
index d2e894a3ca..ae5f97cbf4 100644
--- a/frontend/src/modules/admin/modules/overview/pages/overview.vue
+++ b/frontend/src/modules/admin/modules/overview/pages/overview.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-10 lg:px-8 px-6">
+  <div class="flex flex-col gap-10 lg:px-8 px-6 max-w-5xl">
     <div class="flex items-center justify-between pt-1 pb-5 border-b border-gray-200">
       <h4>
         Overview

From 9509dc0874babdb134ef9fa8159a9e963e93430a Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Mon, 15 Dec 2025 19:24:03 +0800
Subject: [PATCH 40/51] fix: font sizing and text copy

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../modules/overview/components/sections/integration-status.vue | 2 +-
 .../admin/modules/overview/components/sections/summary.vue      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
index 36e5236a09..3e12fb2638 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-status.vue
@@ -3,7 +3,7 @@
     <!-- Header with title and dropdown -->
     <div class="flex items-center justify-between w-full">
       <div class="flex items-center">
-        <h2 class="text-xl font-semibold text-black font-primary">
+        <h2 class="text-lg font-semibold text-black font-primary font-secondary">
           Integration status
         </h2>
       </div>
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
index 9af2ce8eff..c7314e43cb 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/summary.vue
@@ -7,7 +7,7 @@
     <!-- we may use loop to render the cards -->
     <lf-card v-if="!selectedProject" class="flex-1 p-4 flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-semibold">Projects</span>
+        <span class="text-xs font-semibold">Sub-projects</span>
         <lf-icon name="folders" type="light" class="text-gray-400" />
       </div>
       <div class="text-xl font-light">

From a8f7268e6d9cf4a0171e61bc7debc7933786c900 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Mon, 15 Dec 2025 19:38:41 +0800
Subject: [PATCH 41/51] fix: dropdown item types

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../src/ui-kit/lfx/dropdown/dropdown-item.vue |  9 +++-
 .../src/ui-kit/lfx/dropdown/dropdown.scss     |  9 ++++
 .../lfx/dropdown/types/dropdown.types.ts      | 50 ++++++++++---------
 3 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown-item.vue b/frontend/src/ui-kit/lfx/dropdown/dropdown-item.vue
index d0e1c9e067..b383b6d183 100644
--- a/frontend/src/ui-kit/lfx/dropdown/dropdown-item.vue
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown-item.vue
@@ -5,7 +5,12 @@ SPDX-License-Identifier: MIT
 <template>
   <div
     class="lfx-c-dropdown__item"
-    :class="{ 'is-selected': isSelected }"
+    :class="[
+      props.type && `lfx-c-dropdown__item--${props.type}`,
+      {
+        'is-selected': isSelected,
+      },
+    ]"
     @click="handleClick"
   >
     <slot>
@@ -29,12 +34,14 @@ SPDX-License-Identifier: MIT
 <script setup lang="ts">
 import { useAttrs, computed } from 'vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { DropdownItemType } from '@/ui-kit/lfx/dropdown/types/dropdown.types';
 
 const props = defineProps<{
   value?: string;
   label?: string;
   checkmarkBefore?: boolean;
   selected?: boolean;
+  type?: DropdownItemType;
 }>();
 
 const attrs = useAttrs();
diff --git a/frontend/src/ui-kit/lfx/dropdown/dropdown.scss b/frontend/src/ui-kit/lfx/dropdown/dropdown.scss
index 0314cce6e1..6e1e5a30bc 100644
--- a/frontend/src/ui-kit/lfx/dropdown/dropdown.scss
+++ b/frontend/src/ui-kit/lfx/dropdown/dropdown.scss
@@ -18,6 +18,15 @@
       @apply text-neutral-500;
     }
 
+    // Danger type
+    &--danger{
+      @apply text-red-600;
+
+      [class^="fa-"], .c-icon{
+        @apply text-red-600;
+      }
+    }
+
     &.is-selected {
       @apply font-semibold;
 
diff --git a/frontend/src/ui-kit/lfx/dropdown/types/dropdown.types.ts b/frontend/src/ui-kit/lfx/dropdown/types/dropdown.types.ts
index 299a6b6497..73dab3f91a 100644
--- a/frontend/src/ui-kit/lfx/dropdown/types/dropdown.types.ts
+++ b/frontend/src/ui-kit/lfx/dropdown/types/dropdown.types.ts
@@ -1,37 +1,41 @@
 // Copyright (c) 2025 The Linux Foundation and each contributor.
 // SPDX-License-Identifier: MIT
 export interface DropdownOption {
-  label: string;
-  value: string;
-  description?: string;
+  label: string
+  value: string
+  description?: string
 }
 
 export interface DropdownGroupOptions {
-  label: string;
-  items: DropdownOption[];
+  label: string
+  items: DropdownOption[]
 }
 
 export const dropdownSizes = ['default', 'small'] as const;
 export const dropdownTypes = ['filled', 'transparent'] as const;
 
-export type DropdownSize = (typeof dropdownSizes)[number];
-export type DropdownType = (typeof dropdownTypes)[number];
+export type DropdownSize = (typeof dropdownSizes)[number]
+export type DropdownType = (typeof dropdownTypes)[number]
+
+export const dropdownItemTypes = ['regular', 'danger'] as const;
+
+export type DropdownItemType = (typeof dropdownItemTypes)[number]
 
 export interface DropdownProps {
-  modelValue?: string;
-  options: DropdownOption[] | DropdownGroupOptions[];
-  dropdownIcon?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  type?: DropdownType;
-  size?: DropdownSize;
-  showFilter?: boolean;
-  showGroupBreaks?: boolean;
-  icon?: string;
-  fullWidth?: boolean;
-  center?: boolean;
-  prefix?: string;
-  dropdownPosition?: 'left' | 'right';
-  iconOnlyMobile?: boolean;
-  splitLines?: number[]; // index of the lines to split the dropdown
+  modelValue?: string
+  options: DropdownOption[] | DropdownGroupOptions[]
+  dropdownIcon?: string
+  placeholder?: string
+  disabled?: boolean
+  type?: DropdownType
+  size?: DropdownSize
+  showFilter?: boolean
+  showGroupBreaks?: boolean
+  icon?: string
+  fullWidth?: boolean
+  center?: boolean
+  prefix?: string
+  dropdownPosition?: 'left' | 'right'
+  iconOnlyMobile?: boolean
+  splitLines?: number[] // index of the lines to split the dropdown
 }

From d2ff8b59f30363c5fea7850631d9f0cd99675fe0 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Tue, 16 Dec 2025 12:44:05 +0800
Subject: [PATCH 42/51] fix: multiple popups opened

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 frontend/src/ui-kit/lfx/popover/popover.scss | 4 ++++
 frontend/src/ui-kit/lfx/popover/popover.vue  | 1 +
 2 files changed, 5 insertions(+)

diff --git a/frontend/src/ui-kit/lfx/popover/popover.scss b/frontend/src/ui-kit/lfx/popover/popover.scss
index fe9b5feef4..5b09d2587e 100644
--- a/frontend/src/ui-kit/lfx/popover/popover.scss
+++ b/frontend/src/ui-kit/lfx/popover/popover.scss
@@ -5,6 +5,10 @@
     @apply w-fit;
   }
 
+  &__content-overlay {
+    @apply fixed top-0 left-0 w-full h-full z-40;
+  }
+
   &__content {
     @apply z-50 w-max overflow-visible;
     width: auto !important;
diff --git a/frontend/src/ui-kit/lfx/popover/popover.vue b/frontend/src/ui-kit/lfx/popover/popover.vue
index 76cb5e3cbd..00cfb8db7a 100644
--- a/frontend/src/ui-kit/lfx/popover/popover.vue
+++ b/frontend/src/ui-kit/lfx/popover/popover.vue
@@ -17,6 +17,7 @@ This will replace the old Popover component in the future.
       v-if="isVisible && !props.disabled"
       to="body"
     >
+      <div class="lfx-c-popover__content-overlay"></div>
       <div
         ref="popover"
         class="lfx-c-popover__content"

From 92c27cf7d6e2133a1bcc419201db6d3f78787340 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Tue, 16 Dec 2025 12:48:28 +0800
Subject: [PATCH 43/51] fix: integration filter width and overview page width

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../overview/components/fragments/integrations-filter.vue       | 2 +-
 frontend/src/modules/admin/modules/overview/pages/overview.vue  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue
index 56cde36531..c696303f75 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integrations-filter.vue
@@ -1,7 +1,7 @@
 <template>
   <lfx-dropdown-select
     v-model="integrationId"
-    width="200px"
+    width="240px"
     :match-width="false"
     dropdown-class="max-h-80"
     placement="bottom-end"
diff --git a/frontend/src/modules/admin/modules/overview/pages/overview.vue b/frontend/src/modules/admin/modules/overview/pages/overview.vue
index ae5f97cbf4..c36f4b0b3c 100644
--- a/frontend/src/modules/admin/modules/overview/pages/overview.vue
+++ b/frontend/src/modules/admin/modules/overview/pages/overview.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-10 lg:px-8 px-6 max-w-5xl">
+  <div class="flex flex-col gap-10 lg:px-8 px-6 max-w-[1200px] mx-auto">
     <div class="flex items-center justify-between pt-1 pb-5 border-b border-gray-200">
       <h4>
         Overview

From 91a122ee4584c9ab9abc48b2a3f3d9970d9c8880 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Tue, 16 Dec 2025 13:27:43 +0800
Subject: [PATCH 44/51] chore: testing progress list api

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../sections/integration-details.vue          | 11 +++++++
 .../overview/services/overview.api.service.ts | 30 +++++++++++++++++++
 frontend/src/shared/types/tanstack.ts         |  1 +
 3 files changed, 42 insertions(+)

diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
index 0f7d804dac..4381fb485f 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
@@ -138,6 +138,17 @@ const totalCount = computed(() => data.value?.pages[0].count || 0);
 // @ts-expect-error - TanStack Query type inference issue with Vue
 const paginatedIntegrations = computed(() => data.value?.pages.flatMap((page) => page.rows) || []);
 
+const statusParams = computed(() => ({
+  // @ts-expect-error - TanStack Query type inference issue with Vue
+  segments: data.value?.pages.flatMap((page) => page.rows.map((row) => row.segmentId)) || [],
+}));
+
+const { data: integrationProgressList } = OVERVIEW_API_SERVICE.fetchIntegrationProgressList(statusParams);
+
+watch(integrationProgressList, () => {
+  console.log('progress status list: ', integrationProgressList.value);
+}, {immediate: true});
+
 const isEmpty = computed(() => overviewTabs.value.every((tab) => tab.count === 0));
 
 const paginationText = computed(() => {
diff --git a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
index 0418d043ef..f282068031 100644
--- a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
+++ b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
@@ -9,6 +9,7 @@ import {
   GlobalIntegrationStatusCount,
   IntegrationStatusResponse,
 } from '../types/overview.types';
+import { IntegrationProgress } from '@/modules/integration/types/IntegrationProgress';
 
 export interface GlobalIntegrationStatusCountQueryParams {
   platform: string | undefined
@@ -23,6 +24,10 @@ export interface GlobalIntegrationIntegrationsQueryParams {
   segment?: string
 }
 
+export interface IntegrationProgressListQueryParams {
+  segments?: string[]
+}
+
 export interface DashboardMetricsQueryParams {
   segment?: string
 }
@@ -144,6 +149,31 @@ class OverviewApiService {
       })
       .then((res) => res.data);
   }
+
+  fetchIntegrationProgressList(params: ComputedRef<IntegrationProgressListQueryParams>) {
+    const queryKey = computed(() => [TanstackKey.INTEGRATION_PROGRESS_LIST, params.value.segments]);
+    const queryFn = computed<QueryFunction<IntegrationProgress[]>>(() => this.fetchIntegrationProgressListQueryFn(() => ({
+      segments: params.value.segments,
+    })));
+
+    return useQuery<IntegrationProgress[]>({
+      queryKey,
+      queryFn,
+      enabled: !!params.value.segments,
+    });
+  }
+
+  fetchIntegrationProgressListQueryFn(
+    query: () => Record<string, string | number | boolean | undefined | string[] | null>,
+  ): QueryFunction<IntegrationProgress[]> {
+    console.log(query());
+    return () => authAxios
+      .post('/integration/progress/list', 
+        {
+          segments: query().segments,
+        })
+      .then((res) => res.data);
+  }
 }
 
 export const OVERVIEW_API_SERVICE = new OverviewApiService();
diff --git a/frontend/src/shared/types/tanstack.ts b/frontend/src/shared/types/tanstack.ts
index 00f0ff634a..fb49d1ab67 100644
--- a/frontend/src/shared/types/tanstack.ts
+++ b/frontend/src/shared/types/tanstack.ts
@@ -11,4 +11,5 @@ export enum TanstackKey {
   GLOBAL_INTEGRATIONS = 'global-integrations',
   PROJECT_BY_ID = 'project-by-id',
   DASHBOARD_METRICS = 'dashboard-metrics',
+  INTEGRATION_PROGRESS_LIST = 'integration-progress-list',
 }

From e106559a0c98c98af0f61a1dfaf43125ce339fb3 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Tue, 16 Dec 2025 13:30:14 +0800
Subject: [PATCH 45/51] fix: page width

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 frontend/src/modules/admin/modules/overview/pages/overview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/modules/admin/modules/overview/pages/overview.vue b/frontend/src/modules/admin/modules/overview/pages/overview.vue
index c36f4b0b3c..04c1dda0c2 100644
--- a/frontend/src/modules/admin/modules/overview/pages/overview.vue
+++ b/frontend/src/modules/admin/modules/overview/pages/overview.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-10 lg:px-8 px-6 max-w-[1200px] mx-auto">
+  <div class="flex flex-col gap-10 lg:px-8 px-6 max-w-[1200px] w-full mx-auto">
     <div class="flex items-center justify-between pt-1 pb-5 border-b border-gray-200">
       <h4>
         Overview

From 60b932b170ab2cab93e17d29d75383f0b351fa75 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Tue, 16 Dec 2025 13:33:07 +0800
Subject: [PATCH 46/51] chore: lint issues

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../overview/components/sections/integration-details.vue  | 2 +-
 .../modules/overview/services/overview.api.service.ts     | 8 +++++---
 frontend/src/ui-kit/lfx/popover/popover.vue               | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
index 4381fb485f..26163631ab 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
@@ -147,7 +147,7 @@ const { data: integrationProgressList } = OVERVIEW_API_SERVICE.fetchIntegrationP
 
 watch(integrationProgressList, () => {
   console.log('progress status list: ', integrationProgressList.value);
-}, {immediate: true});
+}, { immediate: true });
 
 const isEmpty = computed(() => overviewTabs.value.every((tab) => tab.count === 0));
 
diff --git a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
index f282068031..b4aff548bd 100644
--- a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
+++ b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
@@ -4,12 +4,12 @@ import { useInfiniteQuery, useQuery } from '@tanstack/vue-query';
 import { TanstackKey } from '@/shared/types/tanstack';
 import authAxios from '@/shared/axios/auth-axios';
 import { Project } from '@/modules/lf/segments/types/Segments';
+import { IntegrationProgress } from '@/modules/integration/types/IntegrationProgress';
 import {
   DashboardMetrics,
   GlobalIntegrationStatusCount,
   IntegrationStatusResponse,
 } from '../types/overview.types';
-import { IntegrationProgress } from '@/modules/integration/types/IntegrationProgress';
 
 export interface GlobalIntegrationStatusCountQueryParams {
   platform: string | undefined
@@ -168,10 +168,12 @@ class OverviewApiService {
   ): QueryFunction<IntegrationProgress[]> {
     console.log(query());
     return () => authAxios
-      .post('/integration/progress/list', 
+      .post(
+        '/integration/progress/list',
         {
           segments: query().segments,
-        })
+        },
+      )
       .then((res) => res.data);
   }
 }
diff --git a/frontend/src/ui-kit/lfx/popover/popover.vue b/frontend/src/ui-kit/lfx/popover/popover.vue
index 00cfb8db7a..8d284a09a1 100644
--- a/frontend/src/ui-kit/lfx/popover/popover.vue
+++ b/frontend/src/ui-kit/lfx/popover/popover.vue
@@ -17,7 +17,7 @@ This will replace the old Popover component in the future.
       v-if="isVisible && !props.disabled"
       to="body"
     >
-      <div class="lfx-c-popover__content-overlay"></div>
+      <div class="lfx-c-popover__content-overlay" />
       <div
         ref="popover"
         class="lfx-c-popover__content"

From 2501fc5e6053aad7a6c9cc037e2d0944d187df84 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Tue, 16 Dec 2025 15:56:21 +0800
Subject: [PATCH 47/51] chore: added display for in progress

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../github/components/github-action.vue       |  9 ++--
 .../components/fragments/integration-row.vue  |  3 +-
 .../components/fragments/status-display.vue   | 45 ++++++++++++++-----
 .../sections/integration-details.vue          |  2 +-
 .../overview/services/overview.api.service.ts |  1 -
 5 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/frontend/src/config/integrations/github/components/github-action.vue b/frontend/src/config/integrations/github/components/github-action.vue
index a661f18b09..70c17d1a1f 100644
--- a/frontend/src/config/integrations/github/components/github-action.vue
+++ b/frontend/src/config/integrations/github/components/github-action.vue
@@ -14,13 +14,16 @@ import { computed, ref } from 'vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import AppGithubSettingsDrawer from '@/config/integrations/github/components/settings/github-settings-drawer.vue';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   integration: any;
-}>();
+  preventAutoOpen?: boolean;
+}>(), {
+  preventAutoOpen: false,
+});
 
 const isMapping = computed(() => props.integration.status === 'mapping');
 
-const isSettingsDrawerOpen = ref(props.integration.status === 'mapping');
+const isSettingsDrawerOpen = ref(props.integration.status === 'mapping' && !props.preventAutoOpen);
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
index 932aca2d46..12820e7229 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
@@ -35,6 +35,7 @@
         :integration="integrationStatus"
         :segment-id="integrationStatus.segmentId"
         :grandparent-id="integrationStatus.grandparentId"
+        :prevent-auto-open="true"
       />
       <!-- Actions Column -->
       <div class="w-10">
@@ -89,7 +90,7 @@ const props = defineProps<{
 const status = computed(() => getIntegrationStatus(props.integrationStatus));
 // TODO: Check with Gasper what is the best way to handle this
 const integration = computed(() => (props.integrationStatus.platform === 'github-nango'
-  ? lfIntegrations().github : lfIntegrations()[props.integrationStatus.platform]));
+  ? lfIntegrations(true)[props.integrationStatus.platform] : lfIntegrations()[props.integrationStatus.platform]));
 
 const disconnectIntegration = async (integration: any) => {
   trackEvent({
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue b/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
index 91c39413ad..37ada12faa 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
@@ -1,17 +1,36 @@
 <template>
   <div class="flex flex-col gap-1">
-    <div class="flex items-center gap-1.5 mb-1">
-      <lf-icon
-        :name="status.status.icon"
-        :size="16"
-        :type="status.status.iconType"
-        :class="status.status.color"
-      />
-      <span class="text-sm font-medium text-gray-900">{{ status.status.text }}</span>
-    </div>
-    <div class="text-xs text-gray-500">
-      {{ integrationStatus.statusDetails }}
-    </div>
+    <template v-if="integrationStatus.status === 'connecting'">
+      <app-integration-progress-wrapper :segments="[integrationStatus.segmentId]">
+        <template #default="{ progress }">
+          <div class="flex flex-col gap-1">
+            <div class="flex items-center justify-center gap-1.5">
+              <lf-icon name="circle-notch" type="solid" class="text-primary-500 animate-spin" :size="16" />
+              <span class="text-sm font-medium">In progress</span>
+            </div>
+            <app-integration-progress-bar
+              :progress="progress.find((p) => p.platform === integrationStatus.platform)"
+              :hide-bar="true"
+              text-class="!text-tiny"
+            />
+          </div>
+        </template>
+      </app-integration-progress-wrapper>
+    </template>
+    <template v-else>
+      <div class="flex items-center gap-1.5 mb-1">
+        <lf-icon
+          :name="status.status.icon"
+          :size="16"
+          :type="status.status.iconType"
+          :class="status.status.color"
+        />
+        <span class="text-sm font-medium text-gray-900">{{ status.status.text }}</span>
+      </div>
+      <div class="text-xs text-gray-500">
+        {{ integrationStatus.statusDetails }}
+      </div>
+    </template>
   </div>
 </template>
 
@@ -19,6 +38,8 @@
 import { computed } from 'vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { getIntegrationStatus } from '@/modules/admin/modules/integration/config/status';
+import AppIntegrationProgressWrapper from '@/modules/integration/components/integration-progress-wrapper.vue';
+import AppIntegrationProgressBar from '@/modules/integration/components/integration-progress-bar.vue';
 import { IntegrationStatus } from '../../types/overview.types';
 
 const props = defineProps<{
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
index 26163631ab..8795ade1c0 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
@@ -9,7 +9,7 @@
       <!-- Tabs -->
       <integration-tabs
         v-if="!isEmpty"
-        :tabs="overviewTabs"
+        :tabs="overviewTabs.filter((tab) => tab.count > 0)"
         :model-value="activeTab"
         @update:model-value="activeTab = $event"
       />
diff --git a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
index b4aff548bd..a255bc9bad 100644
--- a/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
+++ b/frontend/src/modules/admin/modules/overview/services/overview.api.service.ts
@@ -166,7 +166,6 @@ class OverviewApiService {
   fetchIntegrationProgressListQueryFn(
     query: () => Record<string, string | number | boolean | undefined | string[] | null>,
   ): QueryFunction<IntegrationProgress[]> {
-    console.log(query());
     return () => authAxios
       .post(
         '/integration/progress/list',

From 7a2086bd2ae7378c410e90093c369e4e3944a54b Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Tue, 16 Dec 2025 16:10:49 +0800
Subject: [PATCH 48/51] fix: github nango display

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../modules/overview/components/fragments/integration-row.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
index 12820e7229..d419139d4b 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
@@ -90,7 +90,7 @@ const props = defineProps<{
 const status = computed(() => getIntegrationStatus(props.integrationStatus));
 // TODO: Check with Gasper what is the best way to handle this
 const integration = computed(() => (props.integrationStatus.platform === 'github-nango'
-  ? lfIntegrations(true)[props.integrationStatus.platform] : lfIntegrations()[props.integrationStatus.platform]));
+  ? lfIntegrations(true).github : lfIntegrations()[props.integrationStatus.platform]));
 
 const disconnectIntegration = async (integration: any) => {
   trackEvent({

From 22f98f60323dccb24ea51d187af101179896cb31 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Tue, 16 Dec 2025 16:23:40 +0800
Subject: [PATCH 49/51] fix: inccorect tab key used

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../modules/overview/components/fragments/integration-row.vue  | 3 ++-
 .../modules/overview/components/fragments/status-display.vue   | 3 ++-
 .../overview/components/sections/integration-details.vue       | 1 +
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
index d419139d4b..b2844b4ea2 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
@@ -27,7 +27,7 @@
     <!-- Status Column -->
     <div class="w-3/6 flex items-center justify-between">
       <slot name="status-display">
-        <status-display :integration-status="integrationStatus" />
+        <status-display :integration-status="integrationStatus" :tab-key="tabKey" />
       </slot>
       <component
         :is="integration.actionComponent"
@@ -85,6 +85,7 @@ const { trackEvent } = useProductTracking();
 const { doDestroy } = mapActions('integration');
 const props = defineProps<{
   integrationStatus: IntegrationStatus;
+  tabKey: string
 }>();
 
 const status = computed(() => getIntegrationStatus(props.integrationStatus));
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue b/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
index 37ada12faa..6da6338de6 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-1">
-    <template v-if="integrationStatus.status === 'connecting'">
+    <template v-if="tabKey === 'connecting'">
       <app-integration-progress-wrapper :segments="[integrationStatus.segmentId]">
         <template #default="{ progress }">
           <div class="flex flex-col gap-1">
@@ -44,6 +44,7 @@ import { IntegrationStatus } from '../../types/overview.types';
 
 const props = defineProps<{
   integrationStatus: IntegrationStatus;
+  tabKey: string;
 }>();
 
 const status = computed(() => getIntegrationStatus(props.integrationStatus));
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
index 8795ade1c0..18b2fc50f0 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
@@ -52,6 +52,7 @@
             v-for="integrationStatus in paginatedIntegrations"
             :key="integrationStatus.id"
             :integration-status="integrationStatus"
+            :tab-key="activeTab"
           />
         </div>
 

From 743ce91fb6d0d57723c74d5b0b5cebfe4cb4bab2 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Tue, 16 Dec 2025 16:33:42 +0800
Subject: [PATCH 50/51] fix: status alignment

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../modules/overview/components/fragments/status-display.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue b/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
index 6da6338de6..3d5bf82b11 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
@@ -4,7 +4,7 @@
       <app-integration-progress-wrapper :segments="[integrationStatus.segmentId]">
         <template #default="{ progress }">
           <div class="flex flex-col gap-1">
-            <div class="flex items-center justify-center gap-1.5">
+            <div class="flex items-center gap-1.5">
               <lf-icon name="circle-notch" type="solid" class="text-primary-500 animate-spin" :size="16" />
               <span class="text-sm font-medium">In progress</span>
             </div>

From 0ce34c946929581c0ea4c13cda72dcc26c440371 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Wed, 17 Dec 2025 10:30:33 +0800
Subject: [PATCH 51/51] feat: added action required messages

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../config/integrations/confluence/config.ts  | 14 ++++----
 .../src/config/integrations/devto/config.ts   | 12 ++++---
 .../src/config/integrations/discord/config.ts | 14 ++++----
 .../config/integrations/discourse/config.ts   | 14 ++++----
 .../src/config/integrations/gerrit/config.ts  | 14 ++++----
 .../src/config/integrations/git/config.ts     |  9 +++--
 .../integrations/github-nango/config.ts       | 15 ++++++---
 .../src/config/integrations/github/config.ts  | 19 ++++++++---
 .../src/config/integrations/gitlab/config.ts  | 18 ++++++----
 .../config/integrations/groupsio/config.ts    | 11 ++++---
 .../config/integrations/hackernews/config.ts  | 11 ++++---
 frontend/src/config/integrations/index.ts     | 33 +++++++++++--------
 .../src/config/integrations/jira/config.ts    |  9 +++--
 .../config/integrations/linkedin/config.ts    | 18 ++++++----
 .../src/config/integrations/reddit/config.ts  | 14 ++++----
 .../src/config/integrations/slack/config.ts   |  9 +++--
 .../integrations/stackoverflow/config.ts      | 17 +++++-----
 .../src/config/integrations/twitter/config.ts | 14 ++++----
 .../components/fragments/integration-row.vue  |  2 +-
 .../components/fragments/status-display.vue   | 14 +++++++-
 .../sections/integration-details.vue          | 11 -------
 21 files changed, 184 insertions(+), 108 deletions(-)

diff --git a/frontend/src/config/integrations/confluence/config.ts b/frontend/src/config/integrations/confluence/config.ts
index 76fdb7ae98..5c100c9035 100644
--- a/frontend/src/config/integrations/confluence/config.ts
+++ b/frontend/src/config/integrations/confluence/config.ts
@@ -4,22 +4,24 @@ import ConfluenceParams from './components/confluence-params.vue';
 import ConfluenceDropdown from './components/confluence-dropdown.vue';
 import LfConfluenceSettingsDrawer from './components/confluence-settings-drawer.vue';
 
-const image = new URL(
-  '@/assets/images/integrations/confluence.svg',
-  import.meta.url,
-).href;
+const image = new URL('@/assets/images/integrations/confluence.svg', import.meta.url).href;
 
 const confluence: IntegrationConfig = {
   key: 'confluence',
   name: 'Confluence',
   image,
-  description:
-    'Connect Confluence to sync documentation activities from your repos.',
+  description: 'Connect Confluence to sync documentation activities from your repos.',
   connectComponent: ConfluenceConnect,
   connectedParamsComponent: ConfluenceParams,
   dropdownComponent: ConfluenceDropdown,
   settingComponent: LfConfluenceSettingsDrawer,
   showProgress: false,
+  actionRequiredMessage: [
+    {
+      key: 'needs-reconnect',
+      text: 'Reconnect your account to restore access.',
+    },
+  ],
 };
 
 export default confluence;
diff --git a/frontend/src/config/integrations/devto/config.ts b/frontend/src/config/integrations/devto/config.ts
index f2f7a776f6..2e1692da18 100644
--- a/frontend/src/config/integrations/devto/config.ts
+++ b/frontend/src/config/integrations/devto/config.ts
@@ -2,18 +2,22 @@ import { IntegrationConfig } from '@/config/integrations';
 import DevtoConnect from './components/devto-connect.vue';
 import DevtoParams from './components/devto-params.vue';
 
-const image = new URL('@/assets/images/integrations/devto.png', import.meta.url)
-  .href;
+const image = new URL('@/assets/images/integrations/devto.png', import.meta.url).href;
 
 const devto: IntegrationConfig = {
   key: 'devto',
   name: 'DEV',
   image,
-  description:
-    'Connect DEV to sync profile information and comments on articles.',
+  description: 'Connect DEV to sync profile information and comments on articles.',
   connectComponent: DevtoConnect,
   connectedParamsComponent: DevtoParams,
   showProgress: false,
+  actionRequiredMessage: [
+    {
+      key: 'needs-reconnect',
+      text: 'Reconnect your account to restore access.',
+    },
+  ],
 };
 
 export default devto;
diff --git a/frontend/src/config/integrations/discord/config.ts b/frontend/src/config/integrations/discord/config.ts
index f674283d86..173a7af1a5 100644
--- a/frontend/src/config/integrations/discord/config.ts
+++ b/frontend/src/config/integrations/discord/config.ts
@@ -2,20 +2,22 @@ import { IntegrationConfig } from '@/config/integrations';
 import DiscordConnect from './components/discord-connect.vue';
 import DiscordParams from './components/discord-params.vue';
 
-const image = new URL(
-  '@/assets/images/integrations/discord.png',
-  import.meta.url,
-).href;
+const image = new URL('@/assets/images/integrations/discord.png', import.meta.url).href;
 
 const discord: IntegrationConfig = {
   key: 'discord',
   name: 'Discord',
   image,
-  description:
-    'Connect Discord to sync messages, threads, forum channels, and new joiners.',
+  description: 'Connect Discord to sync messages, threads, forum channels, and new joiners.',
   connectComponent: DiscordConnect,
   connectedParamsComponent: DiscordParams,
   showProgress: false,
+  actionRequiredMessage: [
+    {
+      key: 'needs-reconnect',
+      text: 'Reconnect your account to restore access.',
+    },
+  ],
 };
 
 export default discord;
diff --git a/frontend/src/config/integrations/discourse/config.ts b/frontend/src/config/integrations/discourse/config.ts
index a05275d063..7f9f32e520 100644
--- a/frontend/src/config/integrations/discourse/config.ts
+++ b/frontend/src/config/integrations/discourse/config.ts
@@ -4,22 +4,24 @@ import DiscourseConnect from './components/discourse-connect.vue';
 import DiscourseParams from './components/discourse-params.vue';
 import DiscourseDropdown from './components/discourse-dropdown.vue';
 
-const image = new URL(
-  '@/assets/images/integrations/discourse.png',
-  import.meta.url,
-).href;
+const image = new URL('@/assets/images/integrations/discourse.png', import.meta.url).href;
 
 const discourse: IntegrationConfig = {
   key: 'discourse',
   name: 'Discourse',
   image,
-  description:
-    'Connect Discourse to sync topics, posts, and replies from your account forums.',
+  description: 'Connect Discourse to sync topics, posts, and replies from your account forums.',
   connectComponent: DiscourseConnect,
   connectedParamsComponent: DiscourseParams,
   dropdownComponent: DiscourseDropdown,
   settingComponent: LfDiscourseSettingsDrawer,
   showProgress: false,
+  actionRequiredMessage: [
+    {
+      key: 'needs-reconnect',
+      text: 'Reconnect your account to restore access.',
+    },
+  ],
 };
 
 export default discourse;
diff --git a/frontend/src/config/integrations/gerrit/config.ts b/frontend/src/config/integrations/gerrit/config.ts
index c4b09c6790..3783f1727b 100644
--- a/frontend/src/config/integrations/gerrit/config.ts
+++ b/frontend/src/config/integrations/gerrit/config.ts
@@ -4,22 +4,24 @@ import GerritConnect from './components/gerrit-connect.vue';
 import GerritParams from './components/gerrit-params.vue';
 import GerritDropdown from './components/gerrit-dropdown.vue';
 
-const image = new URL(
-  '@/assets/images/integrations/gerrit.png',
-  import.meta.url,
-).href;
+const image = new URL('@/assets/images/integrations/gerrit.png', import.meta.url).href;
 
 const gerrit: IntegrationConfig = {
   key: 'gerrit',
   name: 'Gerrit',
   image,
-  description:
-    'Connect Gerrit to sync documentation activities from your repos.',
+  description: 'Connect Gerrit to sync documentation activities from your repos.',
   connectComponent: GerritConnect,
   connectedParamsComponent: GerritParams,
   dropdownComponent: GerritDropdown,
   settingComponent: LfGerritSettingsDrawer,
   showProgress: false,
+  actionRequiredMessage: [
+    {
+      key: 'needs-reconnect',
+      text: 'Reconnect your account to restore access.',
+    },
+  ],
 };
 
 export default gerrit;
diff --git a/frontend/src/config/integrations/git/config.ts b/frontend/src/config/integrations/git/config.ts
index 18d1b8c34e..9e4de87ca4 100644
--- a/frontend/src/config/integrations/git/config.ts
+++ b/frontend/src/config/integrations/git/config.ts
@@ -4,8 +4,7 @@ import GitDropdown from './components/git-dropdown.vue';
 import GitParams from './components/git-params.vue';
 import LfGitSettingsDrawer from './components/git-settings-drawer.vue';
 
-const image = new URL('@/assets/images/integrations/git.png', import.meta.url)
-  .href;
+const image = new URL('@/assets/images/integrations/git.png', import.meta.url).href;
 
 const git: IntegrationConfig = {
   key: 'git',
@@ -17,6 +16,12 @@ const git: IntegrationConfig = {
   connectedParamsComponent: GitParams,
   settingComponent: LfGitSettingsDrawer,
   showProgress: false,
+  actionRequiredMessage: [
+    {
+      key: 'needs-reconnect',
+      text: 'Reconnect your account to restore access.',
+    },
+  ],
 };
 
 export default git;
diff --git a/frontend/src/config/integrations/github-nango/config.ts b/frontend/src/config/integrations/github-nango/config.ts
index 992031847e..d1e754bf81 100644
--- a/frontend/src/config/integrations/github-nango/config.ts
+++ b/frontend/src/config/integrations/github-nango/config.ts
@@ -5,10 +5,7 @@ import GithubParams from './components/github-params.vue';
 import GithubDropdown from './components/github-dropdown.vue';
 import GithubMappedRepos from './components/github-mapped-repos.vue';
 
-const image = new URL(
-  '@/assets/images/integrations/github.png',
-  import.meta.url,
-).href;
+const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href;
 
 const github: IntegrationConfig = {
   key: 'github',
@@ -23,6 +20,16 @@ const github: IntegrationConfig = {
   mappedReposComponent: GithubMappedRepos,
   settingComponent: LfGithubSettingsDrawer,
   showProgress: false,
+  actionRequiredMessage: [
+    {
+      key: 'needs-reconnect',
+      text: 'Reconnect your account to restore access.',
+    },
+    {
+      key: 'mapping',
+      text: 'Select repositories to track and map them to projects.',
+    },
+  ],
 };
 
 export default github;
diff --git a/frontend/src/config/integrations/github/config.ts b/frontend/src/config/integrations/github/config.ts
index 66a08c1398..4f77eecc2a 100644
--- a/frontend/src/config/integrations/github/config.ts
+++ b/frontend/src/config/integrations/github/config.ts
@@ -5,10 +5,7 @@ import GithubAction from './components/github-action.vue';
 import GithubParams from './components/github-params.vue';
 import GithubMappedRepos from './components/github-mapped-repos.vue';
 
-const image = new URL(
-  '@/assets/images/integrations/github.png',
-  import.meta.url,
-).href;
+const image = new URL('@/assets/images/integrations/github.png', import.meta.url).href;
 
 const github: IntegrationConfig = {
   key: 'github',
@@ -22,6 +19,20 @@ const github: IntegrationConfig = {
   connectedParamsComponent: GithubParams,
   mappedReposComponent: GithubMappedRepos,
   showProgress: true,
+  actionRequiredMessage: [
+    {
+      key: 'needs-reconnect',
+      text: 'Reconnect your account to restore access.',
+    },
+    {
+      key: 'mapping',
+      text: 'Select repositories to track and map them to projects.',
+    },
+    {
+      key: 'waiting-approval',
+      text: 'Waiting for organization admin to approve the installation.',
+    },
+  ],
 };
 
 export default github;
diff --git a/frontend/src/config/integrations/gitlab/config.ts b/frontend/src/config/integrations/gitlab/config.ts
index 7168b256c2..e970a9c01f 100644
--- a/frontend/src/config/integrations/gitlab/config.ts
+++ b/frontend/src/config/integrations/gitlab/config.ts
@@ -4,22 +4,28 @@ import GitlabParams from './components/gitlab-params.vue';
 import GitlabAction from './components/gitlab-action.vue';
 import GitlabStatus from './components/gitlab-status.vue';
 
-const image = new URL(
-  '@/assets/images/integrations/gitlab.png',
-  import.meta.url,
-).href;
+const image = new URL('@/assets/images/integrations/gitlab.png', import.meta.url).href;
 
 const gitlab: IntegrationConfig = {
   key: 'gitlab',
   name: 'GitLab',
   image,
-  description:
-    'Connect GitLab to sync profile information, merge requests, issues, and more.',
+  description: 'Connect GitLab to sync profile information, merge requests, issues, and more.',
   connectComponent: GitlabConnect,
   connectedParamsComponent: GitlabParams,
   actionComponent: GitlabAction,
   statusComponent: GitlabStatus,
   showProgress: false,
+  actionRequiredMessage: [
+    {
+      key: 'needs-reconnect',
+      text: 'Reconnect your account to restore access.',
+    },
+    {
+      key: 'mapping',
+      text: 'Select repositories to track and map them to projects.',
+    },
+  ],
 };
 
 export default gitlab;
diff --git a/frontend/src/config/integrations/groupsio/config.ts b/frontend/src/config/integrations/groupsio/config.ts
index 4ad97331b5..14767bcea9 100644
--- a/frontend/src/config/integrations/groupsio/config.ts
+++ b/frontend/src/config/integrations/groupsio/config.ts
@@ -4,10 +4,7 @@ import GroupsioParams from './components/groupsio-params.vue';
 import GroupsioDropdown from './components/groupsio-dropdown.vue';
 import LfGroupsioSettingsDrawer from './components/groupsio-settings-drawer.vue';
 
-const image = new URL(
-  '@/assets/images/integrations/groupsio.svg',
-  import.meta.url,
-).href;
+const image = new URL('@/assets/images/integrations/groupsio.svg', import.meta.url).href;
 
 const groupsio: IntegrationConfig = {
   key: 'groupsio',
@@ -19,6 +16,12 @@ const groupsio: IntegrationConfig = {
   dropdownComponent: GroupsioDropdown,
   settingComponent: LfGroupsioSettingsDrawer,
   showProgress: false,
+  actionRequiredMessage: [
+    {
+      key: 'needs-reconnect',
+      text: 'Reconnect your account to restore access.',
+    },
+  ],
 };
 
 export default groupsio;
diff --git a/frontend/src/config/integrations/hackernews/config.ts b/frontend/src/config/integrations/hackernews/config.ts
index 516c657baa..94d8b8e7bf 100644
--- a/frontend/src/config/integrations/hackernews/config.ts
+++ b/frontend/src/config/integrations/hackernews/config.ts
@@ -2,10 +2,7 @@ import { IntegrationConfig } from '@/config/integrations';
 import HackernewsConnect from './components/hackernews-connect.vue';
 import HackernewsParams from './components/hackernews-params.vue';
 
-const image = new URL(
-  '@/assets/images/integrations/hackernews.svg',
-  import.meta.url,
-).href;
+const image = new URL('@/assets/images/integrations/hackernews.svg', import.meta.url).href;
 
 const hackernews: IntegrationConfig = {
   key: 'hackernews',
@@ -16,6 +13,12 @@ const hackernews: IntegrationConfig = {
   connectComponent: HackernewsConnect,
   connectedParamsComponent: HackernewsParams,
   showProgress: false,
+  actionRequiredMessage: [
+    {
+      key: 'needs-reconnect',
+      text: 'Reconnect your account to restore access.',
+    },
+  ],
 };
 
 export default hackernews;
diff --git a/frontend/src/config/integrations/index.ts b/frontend/src/config/integrations/index.ts
index 8dc7d1d7a7..d7f2f0db7e 100644
--- a/frontend/src/config/integrations/index.ts
+++ b/frontend/src/config/integrations/index.ts
@@ -17,19 +17,24 @@ import gerrit from './gerrit/config';
 import discourse from './discourse/config';
 import devto from './devto/config';
 
+export interface ActionRequiredMessage {
+  key: string
+  text: string
+}
 export interface IntegrationConfig {
-  key: string; // Unique key for the integration
-  name: string; // Display name of the integration
-  image: string; // Image URL for the integration
-  description: string; // Description of the integration
-  connectComponent?: Vue.Component; // Component rendered for user to connect integration
-  actionComponent?: Vue.Component; // Component rendered when integration needs user action
-  statusComponent?: Vue.Component; // Component rendered to show integration status
-  connectedParamsComponent?: Vue.Component; // Component rendered to show connected integration params (repositories, channels)
-  dropdownComponent?: Vue.Component; // Component rendered inside dropdown for extra options
-  settingComponent?: Vue.Component; // Component rendered next to dropdown for extra options
-  mappedReposComponent?: Vue.Component; // Component rendered to show mapped repositories
-  showProgress: boolean; // Show progress bar when connecting
+  key: string // Unique key for the integration
+  name: string // Display name of the integration
+  image: string // Image URL for the integration
+  description: string // Description of the integration
+  connectComponent?: Vue.Component // Component rendered for user to connect integration
+  actionComponent?: Vue.Component // Component rendered when integration needs user action
+  statusComponent?: Vue.Component // Component rendered to show integration status
+  connectedParamsComponent?: Vue.Component // Component rendered to show connected integration params (repositories, channels)
+  dropdownComponent?: Vue.Component // Component rendered inside dropdown for extra options
+  settingComponent?: Vue.Component // Component rendered next to dropdown for extra options
+  mappedReposComponent?: Vue.Component // Component rendered to show mapped repositories
+  showProgress: boolean // Show progress bar when connecting
+  actionRequiredMessage?: ActionRequiredMessage[]
 }
 
 export const getGithubIntegration = () => {
@@ -42,7 +47,9 @@ export const getGithubIntegration = () => {
   return github;
 };
 
-export const lfIntegrations: (useGitHubNango?: boolean) => Record<string, IntegrationConfig> = (useGitHubNango?: boolean) => ({
+export const lfIntegrations: (useGitHubNango?: boolean) => Record<string, IntegrationConfig> = (
+  useGitHubNango?: boolean,
+) => ({
   github: useGitHubNango ? githubNango : getGithubIntegration(),
   git,
   groupsio,
diff --git a/frontend/src/config/integrations/jira/config.ts b/frontend/src/config/integrations/jira/config.ts
index e92f71f340..00143935a3 100644
--- a/frontend/src/config/integrations/jira/config.ts
+++ b/frontend/src/config/integrations/jira/config.ts
@@ -4,8 +4,7 @@ import JiraConnect from './components/jira-connect.vue';
 import JiraParams from './components/jira-params.vue';
 import JiraDropdown from './components/jira-dropdown.vue';
 
-const image = new URL('@/assets/images/integrations/jira.png', import.meta.url)
-  .href;
+const image = new URL('@/assets/images/integrations/jira.png', import.meta.url).href;
 
 const jira: IntegrationConfig = {
   key: 'jira',
@@ -17,6 +16,12 @@ const jira: IntegrationConfig = {
   dropdownComponent: JiraDropdown,
   settingComponent: LfJiraSettingsDrawer,
   showProgress: false,
+  actionRequiredMessage: [
+    {
+      key: 'needs-reconnect',
+      text: 'Reconnect your account to restore access.',
+    },
+  ],
 };
 
 export default jira;
diff --git a/frontend/src/config/integrations/linkedin/config.ts b/frontend/src/config/integrations/linkedin/config.ts
index ec595e9d37..263dde5771 100644
--- a/frontend/src/config/integrations/linkedin/config.ts
+++ b/frontend/src/config/integrations/linkedin/config.ts
@@ -5,23 +5,29 @@ import LinkedinParams from './components/linkedin-params.vue';
 import LinkedinAction from './components/linkedin-action.vue';
 import LinkedinDropdown from './components/linkedin-dropdown.vue';
 
-const image = new URL(
-  '@/assets/images/integrations/linkedin.png',
-  import.meta.url,
-).href;
+const image = new URL('@/assets/images/integrations/linkedin.png', import.meta.url).href;
 
 const linkedin: IntegrationConfig = {
   key: 'linkedin',
   name: 'LinkedIn',
   image,
-  description:
-    "Connect LinkedIn to sync comments and reactions from your organization's posts.",
+  description: "Connect LinkedIn to sync comments and reactions from your organization's posts.",
   connectComponent: LinkedinConnect,
   connectedParamsComponent: LinkedinParams,
   actionComponent: LinkedinAction,
   dropdownComponent: LinkedinDropdown,
   settingComponent: LfLinkedinSettingsDrawer,
   showProgress: false,
+  actionRequiredMessage: [
+    {
+      key: 'needs-reconnect',
+      text: 'Reconnect your account to restore access.',
+    },
+    {
+      key: 'pending-action',
+      text: 'Select the LinkedIn organization to connect.',
+    },
+  ],
 };
 
 export default linkedin;
diff --git a/frontend/src/config/integrations/reddit/config.ts b/frontend/src/config/integrations/reddit/config.ts
index 2d41b025af..81cf5b0e87 100644
--- a/frontend/src/config/integrations/reddit/config.ts
+++ b/frontend/src/config/integrations/reddit/config.ts
@@ -4,22 +4,24 @@ import RedditConnect from './components/reddit-connect.vue';
 import RedditParams from './components/reddit-params.vue';
 import RedditDropdown from './components/reddit-dropdown.vue';
 
-const image = new URL(
-  '@/assets/images/integrations/reddit.svg',
-  import.meta.url,
-).href;
+const image = new URL('@/assets/images/integrations/reddit.svg', import.meta.url).href;
 
 const reddit: IntegrationConfig = {
   key: 'reddit',
   name: 'Reddit',
   image,
-  description:
-    'Connect Reddit to sync posts and comments from selected subreddits.',
+  description: 'Connect Reddit to sync posts and comments from selected subreddits.',
   connectComponent: RedditConnect,
   connectedParamsComponent: RedditParams,
   dropdownComponent: RedditDropdown,
   settingComponent: LfRedditSettingsDrawer,
   showProgress: false,
+  actionRequiredMessage: [
+    {
+      key: 'needs-reconnect',
+      text: 'Reconnect your account to restore access.',
+    },
+  ],
 };
 
 export default reddit;
diff --git a/frontend/src/config/integrations/slack/config.ts b/frontend/src/config/integrations/slack/config.ts
index 772d302c0d..f17d48d3cc 100644
--- a/frontend/src/config/integrations/slack/config.ts
+++ b/frontend/src/config/integrations/slack/config.ts
@@ -2,8 +2,7 @@ import { IntegrationConfig } from '@/config/integrations';
 import SlackConnect from './components/slack-connect.vue';
 import SlackParams from './components/slack-params.vue';
 
-const image = new URL('@/assets/images/integrations/slack.png', import.meta.url)
-  .href;
+const image = new URL('@/assets/images/integrations/slack.png', import.meta.url).href;
 
 const slack: IntegrationConfig = {
   key: 'slack',
@@ -13,6 +12,12 @@ const slack: IntegrationConfig = {
   connectComponent: SlackConnect,
   connectedParamsComponent: SlackParams,
   showProgress: false,
+  actionRequiredMessage: [
+    {
+      key: 'needs-reconnect',
+      text: 'Reconnect your account to restore access.',
+    },
+  ],
 };
 
 export default slack;
diff --git a/frontend/src/config/integrations/stackoverflow/config.ts b/frontend/src/config/integrations/stackoverflow/config.ts
index aaddb14b51..4c377088c5 100644
--- a/frontend/src/config/integrations/stackoverflow/config.ts
+++ b/frontend/src/config/integrations/stackoverflow/config.ts
@@ -1,26 +1,27 @@
 import { IntegrationConfig } from '@/config/integrations';
-import LfStackoverflowSettingsDrawer
-  from '@/config/integrations/stackoverflow/components/stackoverflow-settings-drawer.vue';
+import LfStackoverflowSettingsDrawer from '@/config/integrations/stackoverflow/components/stackoverflow-settings-drawer.vue';
 import StackoverflowConnect from './components/stackoverflow-connect.vue';
 import StackoverflowDropdown from './components/stackoverflow-dropdown.vue';
 import StackoverflowParams from './components/stackoverflow-params.vue';
 
-const image = new URL(
-  '@/assets/images/integrations/stackoverflow.png',
-  import.meta.url,
-).href;
+const image = new URL('@/assets/images/integrations/stackoverflow.png', import.meta.url).href;
 
 const stackoverflow: IntegrationConfig = {
   key: 'stackoverflow',
   name: 'Stack Overflow',
   image,
-  description:
-    'Connect Stack Overflow to sync questions and answers based on selected tags.',
+  description: 'Connect Stack Overflow to sync questions and answers based on selected tags.',
   connectComponent: StackoverflowConnect,
   dropdownComponent: StackoverflowDropdown,
   connectedParamsComponent: StackoverflowParams,
   settingComponent: LfStackoverflowSettingsDrawer,
   showProgress: false,
+  actionRequiredMessage: [
+    {
+      key: 'needs-reconnect',
+      text: 'Reconnect your account to restore access.',
+    },
+  ],
 };
 
 export default stackoverflow;
diff --git a/frontend/src/config/integrations/twitter/config.ts b/frontend/src/config/integrations/twitter/config.ts
index 229df7dd1f..3b81c7a2be 100644
--- a/frontend/src/config/integrations/twitter/config.ts
+++ b/frontend/src/config/integrations/twitter/config.ts
@@ -4,22 +4,24 @@ import TwitterConnect from './components/twitter-connect.vue';
 import TwitterParams from './components/twitter-params.vue';
 import TwitterDropdown from './components/twitter-dropdown.vue';
 
-const image = new URL(
-  '@/assets/images/integrations/twitter-x-black.png',
-  import.meta.url,
-).href;
+const image = new URL('@/assets/images/integrations/twitter-x-black.png', import.meta.url).href;
 
 const twitter: IntegrationConfig = {
   key: 'twitter',
   name: 'X/Twitter',
   image,
-  description:
-    'Connect X/Twitter to sync profile information, followers, and relevant tweets.',
+  description: 'Connect X/Twitter to sync profile information, followers, and relevant tweets.',
   connectComponent: TwitterConnect,
   connectedParamsComponent: TwitterParams,
   dropdownComponent: TwitterDropdown,
   settingComponent: LfTwitterSettingsDrawer,
   showProgress: false,
+  actionRequiredMessage: [
+    {
+      key: 'needs-reconnect',
+      text: 'Reconnect your account to restore access.',
+    },
+  ],
 };
 
 export default twitter;
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
index b2844b4ea2..0c20c1452b 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/integration-row.vue
@@ -27,7 +27,7 @@
     <!-- Status Column -->
     <div class="w-3/6 flex items-center justify-between">
       <slot name="status-display">
-        <status-display :integration-status="integrationStatus" :tab-key="tabKey" />
+        <status-display :integration="integration" :integration-status="integrationStatus" :tab-key="tabKey" />
       </slot>
       <component
         :is="integration.actionComponent"
diff --git a/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue b/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
index 3d5bf82b11..a78efd799f 100644
--- a/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
+++ b/frontend/src/modules/admin/modules/overview/components/fragments/status-display.vue
@@ -27,7 +27,10 @@
         />
         <span class="text-sm font-medium text-gray-900">{{ status.status.text }}</span>
       </div>
-      <div class="text-xs text-gray-500">
+      <div v-if="tabKey === 'waitingForAction'" class="text-xs text-gray-500">
+        {{ actionRequiredMessage }}
+      </div>
+      <div v-else class="text-xs text-gray-500">
         {{ integrationStatus.statusDetails }}
       </div>
     </template>
@@ -40,12 +43,21 @@ import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { getIntegrationStatus } from '@/modules/admin/modules/integration/config/status';
 import AppIntegrationProgressWrapper from '@/modules/integration/components/integration-progress-wrapper.vue';
 import AppIntegrationProgressBar from '@/modules/integration/components/integration-progress-bar.vue';
+import { IntegrationConfig } from '@/config/integrations';
 import { IntegrationStatus } from '../../types/overview.types';
 
 const props = defineProps<{
+  integration:IntegrationConfig;
   integrationStatus: IntegrationStatus;
   tabKey: string;
 }>();
 
+// See https://linuxfoundation.atlassian.net/browse/CM-846 for more details on the action required messages
+
 const status = computed(() => getIntegrationStatus(props.integrationStatus));
+
+const actionRequiredMessage = computed(() => {
+  const message = props.integration.actionRequiredMessage?.find((message) => message.key === props.integrationStatus.status);
+  return message?.text || '';
+});
 </script>
diff --git a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
index 18b2fc50f0..1b134d5385 100644
--- a/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
+++ b/frontend/src/modules/admin/modules/overview/components/sections/integration-details.vue
@@ -139,17 +139,6 @@ const totalCount = computed(() => data.value?.pages[0].count || 0);
 // @ts-expect-error - TanStack Query type inference issue with Vue
 const paginatedIntegrations = computed(() => data.value?.pages.flatMap((page) => page.rows) || []);
 
-const statusParams = computed(() => ({
-  // @ts-expect-error - TanStack Query type inference issue with Vue
-  segments: data.value?.pages.flatMap((page) => page.rows.map((row) => row.segmentId)) || [],
-}));
-
-const { data: integrationProgressList } = OVERVIEW_API_SERVICE.fetchIntegrationProgressList(statusParams);
-
-watch(integrationProgressList, () => {
-  console.log('progress status list: ', integrationProgressList.value);
-}, { immediate: true });
-
 const isEmpty = computed(() => overviewTabs.value.every((tab) => tab.count === 0));
 
 const paginationText = computed(() => {