[CSM Portal] add product vulnerabilities list and detail view

apps/csm-portal/webapp/src/App.tsx

@@ -89,6 +89,9 @@ const CsmSecurityCenterPage = lazy(
 const CreateSecurityReportPage = lazy(
   () => import("@features/csm-security-center/pages/CreateSecurityReportPage"),
 );
+const ProductVulnerabilityDetailPage = lazy(
+  () => import("@features/csm-security-center/pages/ProductVulnerabilityDetailPage"),
+);
 const CsmEngagementsPage = lazy(
   () => import("@features/csm-engagements/pages/CsmEngagementsPage"),
 );
@@ -251,6 +254,10 @@ export default function App(): JSX.Element {
                   path="security-center/reports/new"
                   element={<CreateSecurityReportPage />}
                 />
+                <Route
+                  path="security-center/vulnerabilities/:id"
+                  element={<ProductVulnerabilityDetailPage />}
+                />
                 <Route
                   path="time-cards"
                   element={

apps/csm-portal/webapp/src/api/backend/types.ts

@@ -1062,3 +1062,58 @@ export interface BeChangeRequestSearchResponse {
   limit: number;
   offset: number;
 }
+
+// ---------------------------------------------------------------------------
+// Product vulnerabilities (managed-cloud; ServiceNow data source only)
+// ---------------------------------------------------------------------------
+
+/** Priority enum for product vulnerabilities. */
+export type BeVulnerabilityPriority =
+  | "info"
+  | "low"
+  | "medium"
+  | "high"
+  | "critical"
+  | "unknown";
+
+/**
+ * Single product vulnerability as returned by both the search list and the
+ * `GET /products/vulnerabilities/{id}` detail endpoint.
+ */
+export interface BeProductVulnerabilityView {
+  id: string;
+  cveId?: string;
+  vulnerabilityId?: string;
+  /** Priority label from the upstream (e.g. "High", "Critical"). */
+  priority?: string;
+  productName?: string | null;
+  productVersion?: string | null;
+  componentName?: string;
+  version?: string;
+  type?: string;
+  componentType?: string | null;
+  updateLevel?: string | null;
+  useCase?: string | null;
+  justification?: string | null;
+  resolution?: string | null;
+}
+
+export interface BeSearchProductVulnerabilitiesFilters {
+  searchQuery?: string;
+  priority?: BeVulnerabilityPriority;
+  productName?: string;
+  productVersion?: string;
+}
+
+export interface BeSearchProductVulnerabilitiesPayload {
+  filters?: BeSearchProductVulnerabilitiesFilters;
+  pagination?: BePagination;
+}
+
+/** Note: the vulnerabilities search response carries no `hasMore`. */
+export interface BeSearchProductVulnerabilitiesResponse {
+  productVulnerabilities: BeProductVulnerabilityView[];
+  total: number;
+  limit: number;
+  offset: number;
+}

apps/csm-portal/webapp/src/features/csm-security-center/api/useGetProductVulnerability.ts

@@ -0,0 +1,42 @@
+// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
+//
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { ApiQueryKeys } from "@constants/apiConstants";
+import { useBackendApi } from "@api/backend/client";
+import type { BeProductVulnerabilityView } from "@api/backend/types";
+
+/**
+ * Look up a single product vulnerability by id via
+ * `GET /products/vulnerabilities/{id}` (ServiceNow data source only). Returns
+ * `null` when the id is unknown so the detail page can render a not-found state
+ * rather than an error.
+ */
+export function useGetProductVulnerability(
+  id: string | undefined,
+): UseQueryResult<BeProductVulnerabilityView | null, Error> {
+  const api = useBackendApi();
+
+  return useQuery<BeProductVulnerabilityView | null, Error>({
+    queryKey: [ApiQueryKeys.PRODUCT_VULNERABILITY, id ?? ""],
+    queryFn: (): Promise<BeProductVulnerabilityView | null> =>
+      api.get<BeProductVulnerabilityView>(
+        `/products/vulnerabilities/${encodeURIComponent(id as string)}`,
+      ),
+    enabled: !!id,
+    staleTime: 30_000,
+  });
+}

apps/csm-portal/webapp/src/features/csm-security-center/api/useSearchProductVulnerabilities.ts

@@ -0,0 +1,46 @@
+// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
+//
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import { keepPreviousData, useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { ApiQueryKeys } from "@constants/apiConstants";
+import { useBackendApi } from "@api/backend/client";
+import type {
+  BeSearchProductVulnerabilitiesPayload,
+  BeSearchProductVulnerabilitiesResponse,
+} from "@api/backend/types";
+
+/**
+ * Search product vulnerabilities via `POST /products/vulnerabilities/search`
+ * (ServiceNow data source only). Returns the raw paged response so the listing
+ * can drive server-side pagination from `total`. `keepPreviousData` keeps the
+ * table populated while the next page/filter loads.
+ */
+export function useSearchProductVulnerabilities(
+  payload: BeSearchProductVulnerabilitiesPayload,
+): UseQueryResult<BeSearchProductVulnerabilitiesResponse, Error> {
+  const api = useBackendApi();
+
+  return useQuery<BeSearchProductVulnerabilitiesResponse, Error>({
+    queryKey: [ApiQueryKeys.PRODUCT_VULNERABILITIES_SEARCH, payload],
+    queryFn: (): Promise<BeSearchProductVulnerabilitiesResponse> =>
+      api.post<BeSearchProductVulnerabilitiesPayload, BeSearchProductVulnerabilitiesResponse>(
+        "/products/vulnerabilities/search",
+        payload,
+      ),
+    placeholderData: keepPreviousData,
+    staleTime: 30_000,
+  });
+}