onControlClick(c) : undefined}
+ className={cn(
+ 'flex items-start gap-3 border-b border-border px-4 py-2.5 last:border-0',
+ onControlClick && 'cursor-pointer transition-colors hover:bg-muted/50',
+ )}
+ >
+
{t('compliance.coverage', { n: c.coverage })}
{t('compliance.activity', { n: c.activity })}
diff --git a/frontend/src/features/compliance/pages/CompliancePage.tsx b/frontend/src/features/compliance/pages/CompliancePage.tsx
index 59b83789e..56422700f 100644
--- a/frontend/src/features/compliance/pages/CompliancePage.tsx
+++ b/frontend/src/features/compliance/pages/CompliancePage.tsx
@@ -1,4 +1,5 @@
import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import {
AlertTriangle,
@@ -18,10 +19,9 @@ import { toast } from 'sonner'
import { cn } from '@/shared/lib/utils'
import { Button } from '@/shared/components/ui/button'
import { Input } from '@/shared/components/ui/input'
-import { complianceService, ComplianceHttpError } from '../services/compliance-http.service'
-import type { Framework, Report } from '../types/compliance.types'
+import { complianceService } from '../services/compliance-http.service'
+import type { Framework } from '../types/compliance.types'
import { scoreTone } from '../components/ReportView'
-import { ReportDocument } from '../components/ReportDocument'
import { ReportsTab } from '../components/ReportsTab'
import { ScheduleTab } from '../components/ScheduleTab'
import { ControlsTab } from '../components/ControlsTab'
@@ -72,12 +72,12 @@ function controlCount(f: Framework): number {
function FrameworksTab() {
const { t } = useTranslation()
+ const navigate = useNavigate()
const [frameworks, setFrameworks] = useState
([])
const [scores, setScores] = useState>({})
const [search, setSearch] = useState('')
const [loading, setLoading] = useState(true)
const [error, setError] = useState(false)
- const [open, setOpen] = useState(null)
const [editing, setEditing] = useState<{ framework?: Framework; creating: boolean } | null>(null)
const load = useCallback(() => {
@@ -152,13 +152,12 @@ function FrameworksTab() {
) : (
{shown.map((f) => (
- setOpen(f)} onEdit={() => setEditing({ framework: f, creating: false })} onToggle={() => toggle(f)} t={t} />
+ navigate(`/compliance/frameworks/${encodeURIComponent(f.key)}`)} onEdit={() => setEditing({ framework: f, creating: false })} onToggle={() => toggle(f)} t={t} />
))}
)}