feat(compliance): add compliance name, version and framework in detailed page

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,

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}

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>
+  );
+};

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";