diff --git a/ui/components/compliance/compliance-accordion/client-accordion-content.tsx b/ui/components/compliance/compliance-accordion/client-accordion-content.tsx
index 06bb394fa0..b79a1c1e8e 100644
--- a/ui/components/compliance/compliance-accordion/client-accordion-content.tsx
+++ b/ui/components/compliance/compliance-accordion/client-accordion-content.tsx
@@ -14,7 +14,8 @@ import { createDict } from "@/lib";
import { ComplianceId, Requirement } from "@/types/compliance";
import { FindingProps, FindingsResponse } from "@/types/components";
-import { ComplianceCustomDetails } from "../compliance-custom-details/ens-details";
+import { ENSCustomDetails } from "../compliance-custom-details/ens-details";
+import { ISOCustomDetails } from "../compliance-custom-details/iso-details";
interface ClientAccordionContentProps {
requirement: Requirement;
@@ -150,7 +151,14 @@ export const ClientAccordionContent = ({
case "ens_rd2022_aws":
return (
-
+
+
+ );
+ case "iso27001_2013_aws":
+ case "iso27001_2022_aws":
+ return (
+
+
);
default:
diff --git a/ui/components/compliance/compliance-accordion/compliance-accordion-requeriment-title.tsx b/ui/components/compliance/compliance-accordion/compliance-accordion-requeriment-title.tsx
index 92f79e032d..1c62e87d29 100644
--- a/ui/components/compliance/compliance-accordion/compliance-accordion-requeriment-title.tsx
+++ b/ui/components/compliance/compliance-accordion/compliance-accordion-requeriment-title.tsx
@@ -1,5 +1,4 @@
import { FindingStatus, StatusFindingBadge } from "@/components/ui/table";
-import { translateType } from "@/lib/compliance/ens";
interface ComplianceAccordionRequirementTitleProps {
type: string;
@@ -8,16 +7,12 @@ interface ComplianceAccordionRequirementTitleProps {
}
export const ComplianceAccordionRequirementTitle = ({
- type,
name,
status,
}: ComplianceAccordionRequirementTitleProps) => {
return (
-
- {translateType(type)}:
-
{name}
diff --git a/ui/components/compliance/compliance-accordion/compliance-accordion-title.tsx b/ui/components/compliance/compliance-accordion/compliance-accordion-title.tsx
index e458cef948..0f3f681b59 100644
--- a/ui/components/compliance/compliance-accordion/compliance-accordion-title.tsx
+++ b/ui/components/compliance/compliance-accordion/compliance-accordion-title.tsx
@@ -5,6 +5,7 @@ interface ComplianceAccordionTitleProps {
pass: number;
fail: number;
manual?: number;
+ isParentLevel?: boolean;
}
export const ComplianceAccordionTitle = ({
@@ -12,6 +13,7 @@ export const ComplianceAccordionTitle = ({
pass,
fail,
manual = 0,
+ isParentLevel = false,
}: ComplianceAccordionTitleProps) => {
const total = pass + fail + manual;
const passPercentage = (pass / total) * 100;
@@ -30,7 +32,7 @@ export const ComplianceAccordionTitle = ({
- {total > 0 && (
+ {total > 0 && isParentLevel && (
Requirements:
diff --git a/ui/components/compliance/compliance-card.tsx b/ui/components/compliance/compliance-card.tsx
index db7539401f..c7a745348e 100644
--- a/ui/components/compliance/compliance-card.tsx
+++ b/ui/components/compliance/compliance-card.tsx
@@ -73,7 +73,7 @@ export const ComplianceCard: React.FC = ({
const navigateToDetail = () => {
// We will unlock this while developing the rest of complainces.
- if (!id.includes("ens") && !id.includes("cis")) {
+ if (!id.includes("ens") && !id.includes("iso")) {
return;
}
diff --git a/ui/components/compliance/compliance-custom-details/ens-details.tsx b/ui/components/compliance/compliance-custom-details/ens-details.tsx
index db0652c770..2c133f7e11 100644
--- a/ui/components/compliance/compliance-custom-details/ens-details.tsx
+++ b/ui/components/compliance/compliance-custom-details/ens-details.tsx
@@ -1,6 +1,7 @@
+import { translateType } from "@/lib/compliance/ens";
import { Requirement } from "@/types/compliance";
-export const ComplianceCustomDetails = ({
+export const ENSCustomDetails = ({
requirement,
}: {
requirement: Requirement;
@@ -11,27 +12,35 @@ export const ComplianceCustomDetails = ({
{requirement.description}
+
+ Type:
+
+ {translateType(requirement.type as string)}
+
+
Level:
{requirement.nivel}
- {requirement.dimensiones && requirement.dimensiones.length > 0 && (
-
-
Dimensions:
-
- {requirement.dimensiones.map(
- (dimension: string, index: number) => (
-
- {dimension}
-
- ),
- )}
+ {requirement.dimensiones &&
+ Array.isArray(requirement.dimensiones) &&
+ requirement.dimensiones.length > 0 && (
+
+
Dimensions:
+
+ {requirement.dimensiones.map(
+ (dimension: string, index: number) => (
+
+ {dimension}
+
+ ),
+ )}
+
-
- )}
+ )}
);
diff --git a/ui/components/compliance/compliance-custom-details/iso-details.tsx b/ui/components/compliance/compliance-custom-details/iso-details.tsx
new file mode 100644
index 0000000000..1bcf687b08
--- /dev/null
+++ b/ui/components/compliance/compliance-custom-details/iso-details.tsx
@@ -0,0 +1,23 @@
+import { Requirement } from "@/types/compliance";
+
+export const ISOCustomDetails = ({
+ requirement,
+}: {
+ requirement: Requirement;
+}) => {
+ return (
+
+
+ {requirement.description}
+
+
+ {requirement.objetive_name && (
+
+ Objective:
+ {requirement.objetive_name}
+
+ )}
+
+
+ );
+};
diff --git a/ui/components/compliance/failed-sections-chart.tsx b/ui/components/compliance/failed-sections-chart.tsx
index 32076f1b66..d27e961737 100644
--- a/ui/components/compliance/failed-sections-chart.tsx
+++ b/ui/components/compliance/failed-sections-chart.tsx
@@ -12,17 +12,10 @@ import {
} from "recharts";
import { translateType } from "@/lib/compliance/ens";
-
-type FailedSectionItem = {
- name: string;
- total: number;
- types: {
- [key: string]: number;
- };
-};
+import { FailedSection } from "@/types/compliance";
interface FailedSectionsListProps {
- sections: FailedSectionItem[];
+ sections: FailedSection[];
}
const title = (
@@ -43,7 +36,7 @@ export const FailedSectionsChart = ({ sections }: FailedSectionsListProps) => {
case "refuerzo":
return "#7FB5FF"; // Increased contrast from #B5D7FF
default:
- return "#868994";
+ return "#ff5356";
}
};
@@ -56,9 +49,28 @@ export const FailedSectionsChart = ({ sections }: FailedSectionsListProps) => {
}));
const allTypes = Array.from(
- new Set(sections.flatMap((section) => Object.keys(section.types))),
+ new Set(sections.flatMap((section) => Object.keys(section.types || {}))),
);
+ // Add empty bars to complete up to 5 bars for better distribution
+ while (chartData.length < 5) {
+ const emptyBar: any = { name: "" };
+ allTypes.forEach((type) => {
+ emptyBar[type] = 0;
+ });
+ chartData.push(emptyBar);
+ }
+
+ // Calculate the maximum value to ensure proper scaling
+ const maxValue = Math.max(
+ ...chartData.map((item) =>
+ allTypes.reduce((sum, type) => sum + ((item as any)[type] || 0), 0),
+ ),
+ );
+
+ // Set minimum domain to ensure bars are always visible
+ const domainMax = Math.max(maxValue, 1);
+
// Check if there are no failed sections
if (!sections || sections.length === 0) {
return (
@@ -73,14 +85,14 @@ export const FailedSectionsChart = ({ sections }: FailedSectionsListProps) => {
return (
- {title}
+
{title}
{
fontSize={12}
axisLine={false}
tickLine={false}
+ allowDecimals={false}
+ hide={true}
+ domain={[0, domainMax]}
tick={{
fontSize: 12,
fill: theme === "dark" ? "#94a3b8" : "#374151",
@@ -105,34 +120,59 @@ export const FailedSectionsChart = ({ sections }: FailedSectionsListProps) => {
tickLine={false}
/>
{
+ if (!props.active || !props.payload || !props.payload.length) {
+ return null;
+ }
+
+ const data = props.payload[0].payload;
+ if (!data.name || data.name === "") {
+ return null;
+ }
+
+ const hasValues = allTypes.some((type) => data[type] > 0);
+ if (!hasValues) {
+ return null;
+ }
+
+ return (
+
+ {props.payload.map((entry: any, index: number) => (
+
+ {translateType(entry.dataKey)}: {entry.value}
+
+ ))}
+
+ );
}}
- formatter={(value: number, name: string) => [
- value,
- translateType(name),
- ]}
cursor={false}
/>
-