feat: generic compliance detailed view (#7990)

ui/components/compliance/compliance-card.tsx

@@ -71,13 +71,7 @@ export const ComplianceCard: React.FC<ComplianceCardProps> = ({
     return "success";
   };
 
-  const isPressable =
-    id.includes("ens") ||
-    id.includes("iso") ||
-    id.includes("cis_") ||
-    id.includes("kisa") ||
-    id.includes("threat") ||
-    id.includes("pillar");
+  const isPressable = !id.includes("mitre");
 
   const navigateToDetail = () => {
     // We will unlock this while developing the rest of complainces.

ui/components/compliance/compliance-custom-details/generic-details.tsx

@@ -0,0 +1,67 @@
+import { Requirement } from "@/types/compliance";
+
+import {
+  ComplianceBadge,
+  ComplianceBadgeContainer,
+  ComplianceDetailContainer,
+  ComplianceDetailSection,
+  ComplianceDetailText,
+} from "./shared-components";
+
+export const GenericCustomDetails = ({
+  requirement,
+}: {
+  requirement: Requirement;
+}) => {
+  return (
+    <ComplianceDetailContainer>
+      {requirement.description && (
+        <ComplianceDetailSection title="Description">
+          <ComplianceDetailText>{requirement.description}</ComplianceDetailText>
+        </ComplianceDetailSection>
+      )}
+
+      <ComplianceBadgeContainer>
+        {requirement.item_id && (
+          <ComplianceBadge
+            label="Item ID"
+            value={requirement.item_id as string}
+            color="indigo"
+          />
+        )}
+
+        {requirement.service && (
+          <ComplianceBadge
+            label="Service"
+            value={requirement.service as string}
+            color="blue"
+          />
+        )}
+
+        {requirement.type && (
+          <ComplianceBadge
+            label="Type"
+            value={requirement.type as string}
+            color="orange"
+          />
+        )}
+      </ComplianceBadgeContainer>
+
+      {requirement.subsection && (
+        <ComplianceDetailSection title="SubSection">
+          <ComplianceDetailText>
+            {requirement.subsection as string}
+          </ComplianceDetailText>
+        </ComplianceDetailSection>
+      )}
+
+      {requirement.subgroup && (
+        <ComplianceDetailSection title="SubGroup">
+          <ComplianceDetailText>
+            {requirement.subgroup as string}
+          </ComplianceDetailText>
+        </ComplianceDetailSection>
+      )}
+    </ComplianceDetailContainer>
+  );
+};