From 0cc27f9282ec96c1d69bee753e9fa516cf7fc664 Mon Sep 17 00:00:00 2001
From: Julian Kepka <julian.kepka@l3montree.com>
Date: Tue, 23 Jun 2026 16:14:08 +0200
Subject: [PATCH 1/2] feat: first approach advisory-tab

---
 .../refs/[assetVersionSlug]/advisory/page.tsx | 52 +++++++++++++++++++
 src/hooks/useAssetMenu.ts                     | 24 ++++++++-
 2 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/refs/[assetVersionSlug]/advisory/page.tsx

diff --git a/src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/refs/[assetVersionSlug]/advisory/page.tsx b/src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/refs/[assetVersionSlug]/advisory/page.tsx
new file mode 100644
index 000000000..0eed38c54
--- /dev/null
+++ b/src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/refs/[assetVersionSlug]/advisory/page.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import AssetTitle from "@/components/common/AssetTitle";
+import Page from "@/components/Page";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useState, type FunctionComponent } from "react";
+import { useAssetMenu } from "@/hooks/useAssetMenu";
+import useDecodedParams from "@/hooks/useDecodedParams";
+import { browserApiClient } from "@/services/devGuardApi";
+const Index: FunctionComponent = () => {
+  const assetMenu = useAssetMenu();
+  const { organizationSlug, projectSlug, assetSlug, assetVersionSlug } =
+    useDecodedParams() as {
+      organizationSlug: string;
+      projectSlug: string;
+      assetSlug: string;
+      assetVersionSlug: string;
+    };
+  const [data, setData] = useState<string>("");
+  const handleClick = async () => {
+    const resp = await browserApiClient(
+      "/organizations/" +
+        organizationSlug +
+        "/projects/" +
+        projectSlug +
+        "/assets/" +
+        assetSlug +
+        "/refs/" +
+        assetVersionSlug +
+        "/advisory/submit",
+      {
+        method: "POST",
+        body: JSON.stringify({
+          name: data,
+        }),
+      },
+    );
+  };
+  return (
+    <Page Menu={assetMenu} title={"Security Advisory"} Title={<AssetTitle />}>
+      <div className="flex flex-row items-center justify-between">
+        <Input value={data} onChange={(e) => setData(e.target.value)} />
+      </div>
+      <div className="my-2">
+        <Button onClick={handleClick}>Submit</Button>
+      </div>
+    </Page>
+  );
+};
+
+export default Index;
diff --git a/src/hooks/useAssetMenu.ts b/src/hooks/useAssetMenu.ts
index 3418a1314..7aeef63e6 100644
--- a/src/hooks/useAssetMenu.ts
+++ b/src/hooks/useAssetMenu.ts
@@ -20,7 +20,13 @@ import {
   ShareIcon,
   WrenchScrewdriverIcon,
 } from "@heroicons/react/24/outline";
-import { CodeIcon, BookCheckIcon, ScanText, TextSelect } from "lucide-react";
+import {
+  CodeIcon,
+  BookCheckIcon,
+  ScanText,
+  TextSelect,
+  ShieldEllipsis,
+} from "lucide-react";
 import type { ForwardRefExoticComponent, RefAttributes, SVGProps } from "react";
 import { useActiveAsset } from "./useActiveAsset";
 import { useActiveAssetVersion } from "./useActiveAssetVersion";
@@ -226,6 +232,22 @@ export const useAssetMenu = () => {
         isActive: pathname.includes("artifacts"),
         testId: "nav-asset-artifacts",
       },
+      {
+        title: "Security Advisory",
+        href:
+          "/" +
+          orgSlug +
+          "/projects/" +
+          projectSlug +
+          "/assets/" +
+          assetSlug +
+          "/refs/" +
+          assetVersionSlug +
+          "/advisory",
+        Icon: ShieldEllipsis,
+        isActive: pathname.includes("advisory"),
+        testId: "nav-asset-advisory",
+      },
     ]);
   } else {
     menu.unshift({

From 0b73e13b8b4a709ee5112977b82ea43a72de484b Mon Sep 17 00:00:00 2001
From: Julian Kepka <julian.kepka@l3montree.com>
Date: Fri, 26 Jun 2026 11:50:43 +0200
Subject: [PATCH 2/2] feat: first approach of SA top page and details page

---
 .../advisory/[advisoryId]/loading.tsx         |   7 +
 .../advisory/[advisoryId]/page.tsx            | 133 ++++++++++
 .../refs/[assetVersionSlug]/advisory/page.tsx | 234 +++++++++++++++++-
 src/types/api/api.ts                          |  18 ++
 4 files changed, 379 insertions(+), 13 deletions(-)
 create mode 100644 src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/refs/[assetVersionSlug]/advisory/[advisoryId]/loading.tsx
 create mode 100644 src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/refs/[assetVersionSlug]/advisory/[advisoryId]/page.tsx

diff --git a/src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/refs/[assetVersionSlug]/advisory/[advisoryId]/loading.tsx b/src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/refs/[assetVersionSlug]/advisory/[advisoryId]/loading.tsx
new file mode 100644
index 000000000..6de409e63
--- /dev/null
+++ b/src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/refs/[assetVersionSlug]/advisory/[advisoryId]/loading.tsx
@@ -0,0 +1,7 @@
+import PageSkeleton from "@/components/PageSkeleton";
+
+const loading = () => {
+  return <PageSkeleton />;
+};
+
+export default loading;
diff --git a/src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/refs/[assetVersionSlug]/advisory/[advisoryId]/page.tsx b/src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/refs/[assetVersionSlug]/advisory/[advisoryId]/page.tsx
new file mode 100644
index 000000000..b723d829c
--- /dev/null
+++ b/src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/refs/[assetVersionSlug]/advisory/[advisoryId]/page.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import useSWR from "swr";
+import Page from "@/components/Page";
+import { fetcher } from "@/data-fetcher/fetcher";
+import { useAssetMenu } from "@/hooks/useAssetMenu";
+import useDecodedParams from "@/hooks/useDecodedParams";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { SecurityAdvisory } from "@/types/api/api";
+import { getSeverityClassNames } from "@/components/common/Severity";
+import Markdown from "@/components/common/Markdown";
+import { classNames } from "@/utils/common";
+import { Button } from "@/components/ui/button";
+
+const Index = () => {
+  const params = useDecodedParams();
+  const {
+    organizationSlug,
+    projectSlug,
+    assetSlug,
+    assetVersionSlug,
+    advisoryId,
+  } = params;
+  const assetMenu = useAssetMenu();
+  const { data: advisory, isLoading } = useSWR<SecurityAdvisory>(
+    organizationSlug &&
+      projectSlug &&
+      assetSlug &&
+      assetVersionSlug &&
+      advisoryId
+      ? `/organizations/${organizationSlug}/projects/${projectSlug}/assets/${assetSlug}/refs/${assetVersionSlug}/advisory/${advisoryId}/`
+      : null,
+    fetcher,
+  );
+
+  if (isLoading || !advisory) {
+    return (
+      <Page title="Loading...">
+        <Skeleton className="w-64 h-8 mb-2" />
+        <Skeleton className="w-24 h-5 mb-6" />
+        <Skeleton className="w-full h-32 mb-4" />
+        <Skeleton className="w-full h-48" />
+      </Page>
+    );
+  }
+
+  const severityUpper = advisory.severity?.toUpperCase() ?? "";
+
+  return (
+    <Page
+      Menu={assetMenu}
+      Title={"Security Advisory"}
+      title={advisory.title ?? advisory.id}
+    >
+      <div className="flex flex-col gap-6 lg:flex-row lg:gap-8">
+        <div className="flex-1 min-w-0">
+          <div className="mb-6">
+            <h1 className="text-2xl font-semibold">{advisory.title}</h1>
+          </div>
+
+          {advisory.affectedPackages.length > 0 && (
+            <div className="mb-6 overflow-hidden rounded-lg border">
+              <table className="w-full text-sm">
+                <thead className="border-b bg-card">
+                  <tr>
+                    <th className="p-3 text-left font-medium">Package</th>
+                    <th className="p-3 text-left font-medium">
+                      Affected versions
+                    </th>
+                    <th className="p-3 text-left font-medium">
+                      Patched versions
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {advisory.affectedPackages.map((pkg) => (
+                    <tr key={pkg.id} className="border-b last:border-0">
+                      <td className="p-3 font-medium">{pkg.packagename}</td>
+                      <td className="p-3 text-muted-foreground">
+                        {pkg.semverStart ? `< ${pkg.semverStart}` : "—"}
+                      </td>
+                      <td className="p-3 text-muted-foreground">
+                        {pkg.semverEnd ?? "—"}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          {advisory.description && (
+            <div className="rounded-lg border p-4">
+              <h2 className="text-base font-semibold mb-3">Description</h2>
+              <Markdown>{advisory.description}</Markdown>
+            </div>
+          )}
+        </div>
+
+        <div className="w-full lg:w-72 shrink-0">
+          <div className="rounded-lg border p-4 flex flex-col gap-4">
+            <div>
+              <div className="text-xs font-semibold text-muted-foreground mb-2">
+                Severity
+              </div>
+              <span
+                className={classNames(
+                  "inline-flex px-2 py-0.5 text-xs font-medium rounded-full",
+                  getSeverityClassNames(severityUpper, false),
+                )}
+              >
+                {advisory.severity}
+              </span>
+            </div>
+
+            {advisory.vectorstring && (
+              <div>
+                <div className="text-xs font-semibold text-muted-foreground mb-2">
+                  Vector
+                </div>
+                <code className="text-xs break-all text-muted-foreground">
+                  {advisory.vectorstring}
+                </code>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </Page>
+  );
+};
+
+export default Index;
diff --git a/src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/refs/[assetVersionSlug]/advisory/page.tsx b/src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/refs/[assetVersionSlug]/advisory/page.tsx
index 0eed38c54..8b08e755e 100644
--- a/src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/refs/[assetVersionSlug]/advisory/page.tsx
+++ b/src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/refs/[assetVersionSlug]/advisory/page.tsx
@@ -2,14 +2,67 @@
 
 import AssetTitle from "@/components/common/AssetTitle";
 import Page from "@/components/Page";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { useState, type FunctionComponent } from "react";
 import { useAssetMenu } from "@/hooks/useAssetMenu";
 import useDecodedParams from "@/hooks/useDecodedParams";
+import Section from "@/components/common/Section";
+import { Button } from "@/components/ui/button";
+import AuthGuard from "@/components/AuthGuard";
+import { useRouter, usePathname } from "next/navigation";
+import EmptyParty from "@/components/common/EmptyParty";
+import { Loader2 } from "lucide-react";
+import CustomPagination from "@/components/common/CustomPagination";
+import {
+  createColumnHelper,
+  flexRender,
+  getSortedRowModel,
+} from "@tanstack/react-table";
+import type { ColumnDef } from "@tanstack/react-table";
+import type { SecurityAdvisory, Paged } from "@/types/api/api";
+import useSWR from "swr";
+import { fetcher } from "@/data-fetcher/fetcher";
+import useTable from "@/hooks/useTable";
+import SortingCaret from "@/components/common/SortingCaret";
+import { classNames } from "@/utils/common";
+import { Skeleton } from "../../../../../../../../../../components/ui/skeleton";
+import type { FunctionComponent } from "react";
 import { browserApiClient } from "@/services/devGuardApi";
+import { useActiveAsset } from "@/hooks/useActiveAsset";
+
+const columnHelper = createColumnHelper<SecurityAdvisory>();
+
+const columnsDef: ColumnDef<SecurityAdvisory, any>[] = [
+  columnHelper.accessor("title", {
+    header: "Title",
+    enableSorting: true,
+    cell: (info) => {
+      return (
+        info.getValue() && (
+          <div className="w-52 text-base text-muted-foreground">
+            {info.getValue()}
+          </div>
+        )
+      );
+    },
+  }),
+
+  columnHelper.accessor("severity", {
+    header: "Severity",
+    enableSorting: true,
+    cell: (info) => {
+      return (
+        <span className="text-base text-muted-foreground">
+          {info.getValue()}
+        </span>
+      );
+    },
+  }),
+];
+
 const Index: FunctionComponent = () => {
-  const assetMenu = useAssetMenu();
+  const asset = useActiveAsset();
+  const assetId = asset?.id;
+  const router = useRouter();
+  const pathname = usePathname();
   const { organizationSlug, projectSlug, assetSlug, assetVersionSlug } =
     useDecodedParams() as {
       organizationSlug: string;
@@ -17,8 +70,28 @@ const Index: FunctionComponent = () => {
       assetSlug: string;
       assetVersionSlug: string;
     };
-  const [data, setData] = useState<string>("");
-  const handleClick = async () => {
+  const {
+    data: advisories,
+    isLoading,
+    error,
+  } = useSWR<Paged<SecurityAdvisory>>(
+    `/organizations/${organizationSlug}/projects/${projectSlug}/assets/${assetSlug}/refs/${assetVersionSlug}/advisory`,
+    (url: string) =>
+      fetcher(url).then((res: SecurityAdvisory[] | Paged<SecurityAdvisory>) =>
+        Array.isArray(res)
+          ? { data: res, total: res.length, page: 0, pageSize: res.length }
+          : res,
+      ),
+    { keepPreviousData: true },
+  );
+  const assetMenu = useAssetMenu();
+  const { table } = useTable(
+    { columnsDef, data: advisories?.data || [] },
+    { getSortedRowModel: getSortedRowModel(), manualSorting: false },
+  );
+  if (error) return <div>Fehler beim Laden</div>;
+
+  const clickerPOST = async () => {
     const resp = await browserApiClient(
       "/organizations/" +
         organizationSlug +
@@ -28,23 +101,158 @@ const Index: FunctionComponent = () => {
         assetSlug +
         "/refs/" +
         assetVersionSlug +
-        "/advisory/submit",
+        "/advisory/",
       {
         method: "POST",
         body: JSON.stringify({
-          name: data,
+          title: "Das ist eine 67",
+          description:
+            "# Title This is a **bold** statement and *italic* text.- Item 1- Item 2> This is a blockquote.| Name | Age ||------|-----|| John | 30  |",
+          severity: "Critical",
+          vectorstring:
+            "CVSS:4.0/AV:N/AC:L/AT:N/PR:N/UI:N/VC:H/VI:H/VA:H/SC:N/SI:N/SA:N",
+          affectedPackages: [
+            {
+              ecosystem: "go",
+              packageName: "pkg:gogogo",
+              semverStart: "0.0.0",
+              semverEnd: "1.2.0",
+            },
+            {
+              ecosystem: "afgo",
+              packageName: "pkg:afafaafgogogo",
+              semverStart: "0.0.1",
+              semverEnd: "1.2.0",
+            },
+          ],
+          assetId: assetId,
         }),
       },
     );
   };
+
   return (
     <Page Menu={assetMenu} title={"Security Advisory"} Title={<AssetTitle />}>
-      <div className="flex flex-row items-center justify-between">
-        <Input value={data} onChange={(e) => setData(e.target.value)} />
-      </div>
-      <div className="my-2">
-        <Button onClick={handleClick}>Submit</Button>
+      <div className="flex flex-row items-center justify-end">
+        <div className="flex flex-row gap-2">
+          <AuthGuard require="member">
+            <Button onClick={clickerPOST} variant="default">
+              Create Security Advisory
+            </Button>
+          </AuthGuard>
+        </div>
       </div>
+      <Section
+        forceVertical
+        primaryHeadline
+        title="Security Advisories"
+        description="This table shows all the created security advisories of this repository."
+        className="mb-4 mt-4"
+      >
+        <div className="absolute right-2 top-1/2 -translate-y-1/2 ">
+          {isLoading && (
+            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+          )}
+        </div>
+      </Section>
+      {!advisories?.data?.length ? (
+        <div>
+          <EmptyParty
+            title="No matching results."
+            description="Security advisories are intended to enable you to create and publish your own vulnerability reports. This process is done by identifying, creating, and publishing advisories."
+          />
+        </div>
+      ) : (
+        <div>
+          <div>
+            <div className="overflow-hidden rounded-lg border shadow-sm">
+              <div className="overflow-auto">
+                <table className="w-full overflow-x-auto text-sm">
+                  <thead className="border-b bg-card text-foreground">
+                    {table.getHeaderGroups().map((headerGroup) => (
+                      <tr key={headerGroup.id}>
+                        {headerGroup.headers.map((header) => (
+                          <th
+                            className="cursor-pointer whitespace-nowrap break-normal p-4 text-left"
+                            onClick={
+                              header.column.columnDef.enableSorting
+                                ? header.column.getToggleSortingHandler()
+                                : undefined
+                            }
+                            key={header.id}
+                          >
+                            <div className="flex flex-row items-center gap-2">
+                              {header.isPlaceholder
+                                ? null
+                                : flexRender(
+                                    header.column.columnDef.header,
+                                    header.getContext(),
+                                  )}
+                              <SortingCaret
+                                sortDirection={header.column.getIsSorted()}
+                              />
+                            </div>
+                          </th>
+                        ))}
+                      </tr>
+                    ))}
+                  </thead>
+                  <tbody className="text-sm text-foreground">
+                    {!table.getRowModel().rows &&
+                      isLoading &&
+                      Array.from(Array(10).keys()).map((el, i, arr) => (
+                        <tr
+                          className={classNames(
+                            "relative cursor-pointer align-top transition-all",
+                            i === arr.length - 1 ? "" : "border-b",
+                            i % 2 !== 0 && "bg-card/50",
+                          )}
+                          key={el}
+                        >
+                          <td className="p-4">
+                            <Skeleton className="w-1/2 h-[20px]" />
+                          </td>
+                          <td className="p-4">
+                            <Skeleton className="w-full h-[20px]" />
+                          </td>
+                          <td className="p-4">
+                            <Skeleton className="w-1/2 h-[20px]" />
+                          </td>
+                        </tr>
+                      ))}
+                    {table.getRowModel().rows.map((row, i, arr) => (
+                      <tr
+                        onClick={() =>
+                          router?.push(pathname + "/" + row.original.id)
+                        }
+                        className={classNames(
+                          "relative cursor-pointer align-top transition-all",
+                          i === arr.length - 1 ? "" : "border-b",
+                          i % 2 != 0 && "bg-card/50",
+                          "hover:bg-muted",
+                        )}
+                        key={row.original.id}
+                      >
+                        {row.getVisibleCells().map((cell) => (
+                          <td className="p-4" key={cell.id}>
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext(),
+                            )}
+                          </td>
+                        ))}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <div className="mt-4">
+              {advisories && <CustomPagination {...advisories} />}
+            </div>
+          </div>
+        </div>
+      )}
     </Page>
   );
 };
diff --git a/src/types/api/api.ts b/src/types/api/api.ts
index 4a46cc032..8baa40838 100644
--- a/src/types/api/api.ts
+++ b/src/types/api/api.ts
@@ -1146,3 +1146,21 @@ export interface InstanceInfoDTO {
   runtime: InstanceRuntimeInfo;
   database: InstanceDatabaseInfo;
 }
+
+export interface SecurityAdvisory {
+  id: string;
+  title: string;
+  description: string;
+  severity: string;
+  vectorstring: string;
+  assetID: string;
+  affectedPackages: AdvisoryAffectedPackage[];
+}
+
+export interface AdvisoryAffectedPackage {
+  id: string;
+  ecosystem: string;
+  packagename: string;
+  semverStart: string | null;
+  semverEnd: string | null;
+}