feat: implement Compliance Analysis three-column workspace with findings and stages
This commit is contained in:
@@ -1,3 +1,126 @@
|
|||||||
|
import { Topbar } from '../../components/layout/Topbar';
|
||||||
|
import { Search, Plus } from 'lucide-react';
|
||||||
|
|
||||||
|
const SOURCES = [
|
||||||
|
{ standard: 'EU AI Act', helper: 'Art. 9 — Risk management', scores: ['Art. 9.1', 'Art. 9.2'], status: 'risk' },
|
||||||
|
{ standard: 'MIIT Draft 2025-08', helper: '§3 — Training data provenance', scores: ['§3.1', '§3.4'], status: 'warn' },
|
||||||
|
{ standard: 'ISO/SAE 21434:2021', helper: 'Clause 9 — CSMS', scores: ['9.3', '9.4'], status: 'ok' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const STAGES = [
|
||||||
|
{ label: 'Clause retrieval', pct: 100, status: 'ok' },
|
||||||
|
{ label: 'Requirement extraction', pct: 100, status: 'ok' },
|
||||||
|
{ label: 'Gap analysis', pct: 78, status: 'warn' },
|
||||||
|
{ label: 'Recommendation synthesis', pct: 30, status: 'info' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const FINDINGS = [
|
||||||
|
{ title: 'Missing risk management documentation', desc: 'No formal risk management system found for the described AI system scope under Art. 9.', status: 'risk' },
|
||||||
|
{ title: 'Training data lineage incomplete', desc: 'MIIT §3.1 requires traceable provenance for training datasets. Current documentation lacks data source registry.', status: 'warn' },
|
||||||
|
{ title: 'CSMS audit trail present', desc: 'ISO 21434 audit log requirements are met. Retention policy documented in Annex B.', status: 'ok' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const PARA = `The AI system described in Section 4.2.1 of the Vehicle AI Safety Manual performs real-time classification of driving scenarios to support Level 3 automated driving decisions. The system ingests sensor fusion data from cameras, LIDAR, and radar arrays, processes it through a deep neural network trained on 2.4M annotated driving scenarios, and outputs driving mode recommendations with associated confidence scores. The model was trained using data collected between 2022 and 2024 across European and Chinese road environments.`;
|
||||||
|
|
||||||
|
const STATUS_LABEL: Record<string, string> = { ok: 'Covered', warn: 'Gap', risk: 'Critical' };
|
||||||
|
|
||||||
export function CompliancePage() {
|
export function CompliancePage() {
|
||||||
return <div className="page-content"><p>Compliance</p></div>;
|
return (
|
||||||
|
<div className="compliance-page">
|
||||||
|
<Topbar
|
||||||
|
title="Compliance Analysis"
|
||||||
|
actions={
|
||||||
|
<>
|
||||||
|
<div className="search-box">
|
||||||
|
<Search size={13} />
|
||||||
|
<input placeholder="Search analyses..." />
|
||||||
|
</div>
|
||||||
|
<button className="btn sm primary"><Plus size={13} />New analysis</button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="compliance-hero">
|
||||||
|
<p className="hero-eyebrow">Compliance Workspace</p>
|
||||||
|
<h2 className="compliance-title">Document Paragraph Review</h2>
|
||||||
|
<p className="compliance-desc">
|
||||||
|
Three-column AI-assisted compliance gap analysis with regulation retrieval, paragraph review, and findings synthesis.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="compliance-workspace">
|
||||||
|
<div className="comp-col source-col">
|
||||||
|
<div className="col-header">Retrieved Regulations</div>
|
||||||
|
{SOURCES.map(s => (
|
||||||
|
<div key={s.standard} className="source-item card">
|
||||||
|
<div className="source-top">
|
||||||
|
<span className="source-std">{s.standard}</span>
|
||||||
|
<span className={`status ${s.status}`}>{STATUS_LABEL[s.status]}</span>
|
||||||
|
</div>
|
||||||
|
<div className="source-helper">{s.helper}</div>
|
||||||
|
<div className="source-scores">
|
||||||
|
{s.scores.map(sc => <span key={sc} className="score-pill">{sc}</span>)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="comp-col review-col">
|
||||||
|
<div className="col-header">Paragraph Under Review</div>
|
||||||
|
<div className="card para-card">
|
||||||
|
<p className="para-text">
|
||||||
|
{PARA.split(/(AI system)/g).map((part, i) =>
|
||||||
|
part === 'AI system'
|
||||||
|
? <mark key={i}>{part}</mark>
|
||||||
|
: <span key={i}>{part}</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="card stages-card">
|
||||||
|
<div className="card-header">Analysis stages</div>
|
||||||
|
{STAGES.map(st => (
|
||||||
|
<div key={st.label} className="stage-row">
|
||||||
|
<div className="stage-label-row">
|
||||||
|
<span className="stage-label">{st.label}</span>
|
||||||
|
<span className="stage-pct">{st.pct}%</span>
|
||||||
|
</div>
|
||||||
|
<div className="stage-bar">
|
||||||
|
<div className={`stage-fill stage-${st.status}`} style={{ width: `${st.pct}%` }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="comp-col findings-col">
|
||||||
|
<div className="col-header">Findings</div>
|
||||||
|
{FINDINGS.map(f => (
|
||||||
|
<div key={f.title} className="finding-item card">
|
||||||
|
<div className="finding-top">
|
||||||
|
<span className="finding-title">{f.title}</span>
|
||||||
|
<span className={`status ${f.status}`}>{STATUS_LABEL[f.status] ?? f.status}</span>
|
||||||
|
</div>
|
||||||
|
<p className="finding-desc">{f.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className="card conclusion-box">
|
||||||
|
<div className="card-header">Conclusion</div>
|
||||||
|
<p className="conclusion-text">
|
||||||
|
The document requires a formal risk management section documenting the AI system classification, risk identification methodology, and mitigation measures per EU AI Act Art. 9 before compliance can be certified.
|
||||||
|
</p>
|
||||||
|
<div className="action-items">
|
||||||
|
<div className="action-item">
|
||||||
|
<span className="action-label">Next action</span>
|
||||||
|
<span className="action-value">Draft risk management annex</span>
|
||||||
|
</div>
|
||||||
|
<div className="action-item">
|
||||||
|
<span className="action-label">Escalation</span>
|
||||||
|
<span className="action-value risk-text">Legal review required</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user