From 0435f90ca04f2a801e62f03a2cf61a1e0fbfcc84 Mon Sep 17 00:00:00 2001
From: pedrooot <pedromarting3@gmail.com>
Date: Mon, 22 Sep 2025 17:15:36 +0200
Subject: [PATCH] feat(compliance): add compliance name, version and framework
 in detailed page

---
 api/src/backend/api/compliance.py             |  2 --
 .../compliance/[compliancetitle]/page.tsx     |  4 +++
 ui/components/compliance/ComplianceInfo.tsx   | 31 +++++++++++++++++++
 ui/components/compliance/index.ts             |  1 +
 4 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 ui/components/compliance/ComplianceInfo.tsx

diff --git a/api/src/backend/api/compliance.py b/api/src/backend/api/compliance.py
index a59d0b737d..d09fca9465 100644
--- a/api/src/backend/api/compliance.py
+++ b/api/src/backend/api/compliance.py
@@ -221,8 +221,6 @@ def generate_compliance_overview_template(prowler_compliance: dict):
 
                 # Add requirement to compliance requirements
                 compliance_requirements[requirement.Id] = requirement_dict
-            print("--------")
-            print(compliance_data.Framework)
             # Build compliance dictionary
             compliance_dict = {
                 "framework": compliance_data.Framework,
diff --git a/ui/app/(prowler)/compliance/[compliancetitle]/page.tsx b/ui/app/(prowler)/compliance/[compliancetitle]/page.tsx
index f9e67ae89c..a743229435 100644
--- a/ui/app/(prowler)/compliance/[compliancetitle]/page.tsx
+++ b/ui/app/(prowler)/compliance/[compliancetitle]/page.tsx
@@ -12,6 +12,7 @@ import {
   BarChartSkeleton,
   ClientAccordionWrapper,
   ComplianceHeader,
+  ComplianceInfo,
   ComplianceScanInfo,
   HeatmapChart,
   HeatmapChartSkeleton,
@@ -198,6 +199,8 @@ const SSRComplianceContent = async ({
   }
 
   const framework = attributesData?.data?.[0]?.attributes?.framework;
+  const name = attributesData?.data?.[0]?.attributes?.compliance_name || "";
+  const version = attributesData?.data?.[0]?.attributes?.version || "";
   const mapper = getComplianceMapper(framework);
   const data = mapper.mapComplianceData(
     attributesData,
@@ -218,6 +221,7 @@ const SSRComplianceContent = async ({
 
   return (
     <div className="space-y-8">
+      <ComplianceInfo name={name} framework={framework} version={version} />
       <ChartsWrapper logoPath={logoPath}>
         <PieChart
           pass={totalRequirements.pass}
diff --git a/ui/components/compliance/ComplianceInfo.tsx b/ui/components/compliance/ComplianceInfo.tsx
new file mode 100644
index 0000000000..8b080a3676
--- /dev/null
+++ b/ui/components/compliance/ComplianceInfo.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+interface ComplianceInfoProps {
+  name?: string;
+  framework?: string;
+  version?: string;
+}
+
+export const ComplianceInfo = ({ name, framework, version }: ComplianceInfoProps) => {
+  return (
+    <div className="space-y-4">
+      {name && (
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">{name}</h1>
+      )}
+
+      <div className="flex flex-wrap gap-2">
+        {framework && (
+          <span className="rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+            {framework}
+          </span>
+        )}
+
+        {version && (
+          <span className="rounded-full bg-green-100 px-3 py-1 text-sm font-medium text-green-800 dark:bg-green-900 dark:text-green-200">
+            {version}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/ui/components/compliance/index.ts b/ui/components/compliance/index.ts
index 096951a261..363f401624 100644
--- a/ui/components/compliance/index.ts
+++ b/ui/components/compliance/index.ts
@@ -13,6 +13,7 @@ export * from "./compliance-header/compliance-header";
 export * from "./compliance-header/compliance-scan-info";
 export * from "./compliance-header/data-compliance";
 export * from "./compliance-header/scan-selector";
+export * from "./ComplianceInfo";
 export * from "./no-scans-available";
 export * from "./skeletons/bar-chart-skeleton";
 export * from "./skeletons/compliance-accordion-skeleton";