feat: security v2 UI

frontend/app/components/modules/project/components/shared/header/project-menu.vue

@@ -85,6 +85,7 @@ import { useProjectStore } from '~~/app/components/modules/project/store/project
 import LfxSkeletonState from '~/components/modules/project/components/shared/skeleton-state.vue';
 import { PROJECT_COMMUNITY_API_SERVICE } from '~/components/modules/project/services/community.api.service';
 import { useAuthStore } from '~/components/modules/auth/store/auth.store';
+import { VULNERABILITY_API_SERVICE } from '~/components/modules/project/services/vulnerability.api.service';
 
 const props = defineProps<{
   project?: Project;
@@ -93,9 +94,17 @@ const props = defineProps<{
 const route = useRoute();
 const repoName = computed(() => route.params.name as string);
 
-const { selectedRepositoryGroup } = storeToRefs(useProjectStore());
+const { selectedRepositoryGroup, selectedReposValues } = storeToRefs(useProjectStore());
 const { user } = storeToRefs(useAuthStore());
 
+const queryParams = computed(() => ({
+  projectSlug: props.project?.slug as string,
+  repos: selectedReposValues.value || undefined,
+}));
+const { data } = VULNERABILITY_API_SERVICE.fetchVulnerabilitySummary(queryParams);
+
+const hasVulnerabilitiesData = computed(() => (data.value ? data.value.lastScanStatus === 'success' : false));
+
 const activeLink = computed(() =>
   lfProjectLinks.find((link) => {
     if (selectedRepositoryGroup.value) {
@@ -116,7 +125,10 @@ const isAreaEnabled = (area: WidgetArea) => {
   }
 
   if (area === WidgetArea.SECURITY) {
-    return props.project?.connectedPlatforms?.some((platform) => platform.toLowerCase().includes('github'));
+    return (
+      props.project?.connectedPlatforms?.some((platform) => platform.toLowerCase().includes('github')) ||
+      hasVulnerabilitiesData.value
+    );
   }
 
   return widgets.length === 0 || widgets.some((widget) => props.project?.widgets?.includes(lfxWidgets[widget]?.key));

frontend/app/components/modules/project/components/vulnerabilities/auth-wall-vulnerabilities.vue

@@ -0,0 +1,95 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <lfx-card class="p-6 flex flex-col relative">
+    <img
+      src="/images/misc/vulnerabilities-preview.png"
+      alt="Auth wall vulnerabilities"
+    />
+
+    <div class="absolute h-full w-full flex items-center justify-center -mt-6 -ml-6">
+      <div
+        class="shadow-xl bg-gradient-to-b from-violet-50/50 to-white p-8 border border-neutral-200 rounded-xl flex flex-col gap-8 items-center w-[50rem]"
+      >
+        <!-- Icon and text section -->
+        <div class="flex flex-col gap-5 items-center">
+          <div class="bg-discovery-100 p-4 rounded-full flex items-center justify-center size-14">
+            <lfx-icon
+              name="lock-keyhole"
+              class="text-discovery-600"
+              :size="32"
+            />
+          </div>
+
+          <div class="flex flex-col gap-5 items-center">
+            <div class="flex flex-col gap-1 items-center">
+              <h4 class="text-xl font-secondary font-bold text-black">Unlock project vulnerabilities</h4>
+              <p class="text-sm text-neutral-600">Sign in to access detailed vulnerability insights including:</p>
+            </div>
+
+            <!-- Pills/Tags -->
+            <div class="flex flex-wrap gap-4 items-center justify-center max-w-[600px]">
+              <lfx-chip
+                v-for="feature in features"
+                :key="feature"
+                type="bordered"
+              >
+                {{ feature }}
+              </lfx-chip>
+            </div>
+          </div>
+        </div>
+
+        <!-- CTA section -->
+        <div class="flex flex-col gap-4 items-center">
+          <lfx-button
+            type="primary"
+            class="!rounded-full"
+            @click="handleLogin"
+          >
+            Sign in to your LFX account
+          </lfx-button>
+          <p class="text-xs text-neutral-600">
+            New to LFX?
+            <a
+              href="#"
+              class="text-accent-500 hover:underline"
+              @click.prevent="handleLogin"
+              >Create an account</a
+            >
+          </p>
+        </div>
+      </div>
+    </div>
+  </lfx-card>
+</template>
+
+<script setup lang="ts">
+import LfxCard from '~/components/uikit/card/card.vue';
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import LfxButton from '~/components/uikit/button/button.vue';
+import LfxChip from '~/components/uikit/chip/chip.vue';
+import { useAuth } from '~~/composables/useAuth';
+
+const { login } = useAuth();
+
+const features = [
+  'Open vulnerabilities',
+  'Median CVS of all vulnerabilities',
+  'Fix status',
+  'Vulnerability by severity',
+  'Vulnerabilities by ecosystem',
+];
+
+const handleLogin = () => {
+  login();
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxAuthWallVulnerabilities',
+};
+</script>

frontend/app/components/modules/project/components/vulnerabilities/recent-vulnerabilities.vue

@@ -0,0 +1,86 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="flex flex-col gap-6 items-center pt-6 w-full">
+    <div class="flex flex-col gap-2 items-start w-full">
+      <p class="text-base font-bold leading-6 text-neutral-900">Recent vulnerabilities</p>
+
+      <!-- Error state or empty state -->
+      <lfx-vulnerabilities-empty v-if="error || isEmpty" />
+
+      <!-- Data display -->
+      <template v-else>
+        <lfx-project-vulnerability-table-header />
+        <lfx-project-vulnerability-table
+          :vulnerabilities="data || []"
+          :is-loading="isLoading"
+          :is-fetching-next-page="false"
+          :load-count="5"
+        />
+      </template>
+
+      <!-- Empty state -->
+      <div
+        v-if="!isLoading && !data"
+        class="flex items-center justify-center py-10 w-full"
+      >
+        <p class="text-neutral-500 text-sm">No recent vulnerabilities</p>
+      </div>
+    </div>
+
+    <!-- View More Button -->
+    <lfx-button
+      v-if="props.showViewMore && data && data.length > 0 && !isLoading"
+      type="transparent"
+      button-style="pill"
+      label="View more"
+      @click="emit('viewMore')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import LfxProjectVulnerabilityTableHeader from './vulnerability-table-header.vue';
+import LfxProjectVulnerabilityTable from './vulnerability-table.vue';
+import LfxVulnerabilitiesEmpty from './vulnerabilities-empty.vue';
+import LfxButton from '~/components/uikit/button/button.vue';
+import {
+  VULNERABILITY_API_SERVICE,
+  type VulnerabilitiesQueryParams,
+} from '~/components/modules/project/services/vulnerability.api.service';
+
+const props = withDefaults(
+  defineProps<{
+    params: VulnerabilitiesQueryParams;
+    showViewMore?: boolean;
+  }>(),
+  {
+    showViewMore: true,
+  },
+);
+
+const queryParams = computed(() => props.params);
+
+const { data, error, isLoading } = VULNERABILITY_API_SERVICE.fetchRecentVulnerabilities(queryParams);
+
+const isEmpty = computed(() => {
+  if (isLoading.value) {
+    return false;
+  }
+
+  return data.value?.length === 0;
+});
+
+const emit = defineEmits<{
+  (e: 'viewMore'): void;
+}>();
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxProjectRecentVulnerabilities',
+};
+</script>

frontend/app/components/modules/project/components/vulnerabilities/vulnerabilities-empty.vue

@@ -0,0 +1,33 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="flex flex-col gap-6 items-center justify-center py-10 w-full border border-neutral-200 rounded-lg">
+    <div class="bg-accent-100 p-4 rounded-full flex items-center justify-center size-14">
+      <lfx-icon
+        name="ban-bug"
+        class="text-accent-600"
+        :size="32"
+      />
+    </div>
+    <div class="flex flex-col gap-3 items-center">
+      <p class="text-xl font-secondary font-bold text-black">No vulnerabilities found</p>
+      <slot>
+        <p class="text-sm text-neutral-600">
+          We didn’t detect any vulnerabilities across the selected repositories’ dependencies over the past 365 days
+        </p>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxVulnerabilitiesEmpty',
+};
+</script>

frontend/app/components/modules/project/components/vulnerabilities/vulnerabilities-section.vue

@@ -0,0 +1,107 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <lfx-card class="p-6 flex flex-col gap-6">
+    <!-- Header -->
+    <div class="flex flex-col gap-2">
+      <h2 class="font-secondary text-xl font-bold leading-7 text-neutral-900">Vulnerabilities</h2>
+      <p class="text-xs leading-4 text-neutral-500">
+        Overview of security vulnerabilities detected across project dependencies over the last 365 days.
+      </p>
+    </div>
+
+    <!-- Aggregated view disclaimer - hidden when repos are selected -->
+    <div
+      v-if="showAggregatedDisclaimer"
+      class="p-3 bg-neutral-50 border border-neutral-100 flex items-center gap-1.5 rounded-md"
+    >
+      <lfx-icon
+        name="info-circle"
+        :size="14"
+        class="text-neutral-500"
+      />
+      <p class="text-xs leading-4 font-semibold text-neutral-500">
+        You're viewing an aggregated snapshot of security vulnerabilities detected across all project dependencies over
+        the last 365 days. For a detailed analysis,
+        <span
+          class="underline cursor-pointer"
+          @click="emit('chooseRepository')"
+          >choose a specific repository</span
+        >.
+      </p>
+    </div>
+
+    <!-- Data display -->
+    <div class="flex flex-col gap-6">
+      <!-- Summary stats row -->
+      <lfx-project-vulnerability-summary :params="params" />
+
+      <!-- Charts row -->
+      <div class="flex gap-6">
+        <lfx-project-vulnerability-severity :params="params" />
+        <lfx-project-vulnerability-ecosystem :params="params" />
+      </div>
+    </div>
+
+    <!-- Recent vulnerabilities table -->
+    <lfx-project-recent-vulnerabilities
+      :params="params"
+      :show-view-more="true"
+      @view-more="handleViewMore"
+    />
+
+    <!-- Vulnerability Drawer -->
+    <lfx-project-vulnerability-drawer
+      v-model="isDrawerOpen"
+      :project-name="projectName"
+      :project-logo="projectLogo"
+    />
+  </lfx-card>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useRoute } from 'nuxt/app';
+import { storeToRefs } from 'pinia';
+import LfxProjectVulnerabilitySummary from './vulnerability-summary.vue';
+import LfxProjectVulnerabilitySeverity from './vulnerability-severity.vue';
+import LfxProjectVulnerabilityEcosystem from './vulnerability-ecosystem.vue';
+import LfxProjectRecentVulnerabilities from './recent-vulnerabilities.vue';
+import LfxProjectVulnerabilityDrawer from './vulnerability-drawer.vue';
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import LfxCard from '~/components/uikit/card/card.vue';
+import { useProjectStore } from '~/components/modules/project/store/project.store';
+
+const route = useRoute();
+
+const { selectedReposValues, project } = storeToRefs(useProjectStore());
+
+const isRepository = computed(() => !!route.params.name);
+const hasSelectedRepos = computed(() => selectedReposValues.value && selectedReposValues.value.length > 0);
+const showAggregatedDisclaimer = computed(() => !isRepository.value && !hasSelectedRepos.value);
+
+const isDrawerOpen = ref(false);
+const projectName = computed(() => project.value?.name || '');
+const projectLogo = computed(() => project.value?.logo || '');
+
+const params = computed(() => ({
+  projectSlug: route.params.slug as string,
+  repos: selectedReposValues.value || undefined,
+}));
+
+const emit = defineEmits<{
+  (e: 'chooseRepository'): void;
+}>();
+
+const handleViewMore = () => {
+  isDrawerOpen.value = true;
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxProjectVulnerabilitiesSection',
+};
+</script>