Merge pull request 'feat(admin): ETO / Onboarding-Advisor test page' (#52) from feat/onboarding-advisor-frontend into main
This commit is contained in:
pilotadmin
@@ -0,0 +1,195 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
// ETO / Onboarding-Advisor — thin operator surface over POST /api/compliance/onboarding/advisor-start.
|
||||||
|
// Certifications + target + scanner findings -> Silent Pass -> Advisor. NOT the regulation gap engine
|
||||||
|
// (/sdk/gap-analysis is a different flow: product -> applicable regulations). This tests the cert->delta
|
||||||
|
// case: "TISAX/ISO27001 -> CRA, what is auto-detected, what stays an open question?". No new backend.
|
||||||
|
|
||||||
|
import React, { useEffect, useState } from 'react'
|
||||||
|
|
||||||
|
const CERTS = ['ISO27001', 'TISAX', 'ISO9001', 'IEC62443', 'ISO13485', 'ISO14001', 'ASPICE', 'IATF16949']
|
||||||
|
|
||||||
|
// label -> {signal_id, source_type} — demonstrates all three signal KINDS (observation / partial / requirement)
|
||||||
|
const FINDINGS: Array<{ label: string; signal_id: string; source_type: string; kind: string }> = [
|
||||||
|
{ label: 'SBOM im Repo (CycloneDX/SPDX)', signal_id: 'cyclonedx_found', source_type: 'repository', kind: 'observation' },
|
||||||
|
{ label: 'security.txt / CVD-Policy veröffentlicht', signal_id: 'security_txt', source_type: 'website', kind: 'observation' },
|
||||||
|
{ label: 'Signierte Releases', signal_id: 'signed_releases', source_type: 'repository', kind: 'observation' },
|
||||||
|
{ label: 'Produkt-Risikobewertung (Dokument)', signal_id: 'risk_assessment_pdf', source_type: 'document', kind: 'observation' },
|
||||||
|
{ label: 'CI-Pipeline vorhanden (nur Indikation)', signal_id: 'github_actions_ci', source_type: 'repository', kind: 'partial' },
|
||||||
|
{ label: 'Cloud-/vernetztes Produkt', signal_id: 'cloud_hosted', source_type: 'product', kind: 'observation' },
|
||||||
|
{ label: 'Ausschreibung FORDERT SBOM (Requirement)', signal_id: 'requires_sbom', source_type: 'tender', kind: 'requirement' },
|
||||||
|
{ label: 'OEM FORDERT PSIRT (Requirement)', signal_id: 'supplier_requires_psirt', source_type: 'oem', kind: 'requirement' },
|
||||||
|
]
|
||||||
|
|
||||||
|
interface Question { capability_id: string; question_intent: string; why: string; information_value: number; priority: string }
|
||||||
|
interface Inferred { certification: string; capabilities: string[]; statement: string }
|
||||||
|
interface Rejected { certification?: string; statement: string; reason: string }
|
||||||
|
interface Measure { capability_id: string; leverage: number; closes: string[] }
|
||||||
|
interface AdvisorResponse {
|
||||||
|
silent_intake_summary: string; headline: string; auto_detected: string[]; indications: string[]
|
||||||
|
inferred_assumptions: Inferred[]; rejected_assumptions: Rejected[]; top_5_questions: Question[]
|
||||||
|
capability_delta: string[]; top_measures: Measure[]; evidence_requests: string[]
|
||||||
|
unsupported_domains: string[]; completeness_summary: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const PROXY = '/api/sdk/v1/compliance/onboarding'
|
||||||
|
|
||||||
|
function Chips({ items, tone }: { items: string[]; tone: string }) {
|
||||||
|
if (!items.length) return <span className="text-gray-400 text-sm">—</span>
|
||||||
|
return (
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{items.map(c => <span key={c} className={`px-2.5 py-1 rounded-full text-xs font-medium ${tone}`}>{c}</span>)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function Section({ title, hint, children }: { title: string; hint?: string; children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-xl border border-gray-200 p-5">
|
||||||
|
<h3 className="font-semibold text-gray-900">{title}</h3>
|
||||||
|
{hint && <p className="text-xs text-gray-500 mt-0.5 mb-2">{hint}</p>}
|
||||||
|
<div className="mt-2">{children}</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function OnboardingAdvisorPage() {
|
||||||
|
const [targets, setTargets] = useState<string[]>([])
|
||||||
|
const [company, setCompany] = useState('Beispiel Maschinenbau')
|
||||||
|
const [industry, setIndustry] = useState('machine_builder')
|
||||||
|
const [certs, setCerts] = useState<string[]>(['ISO27001', 'ISO9001'])
|
||||||
|
const [target, setTarget] = useState('CRA')
|
||||||
|
const [findings, setFindings] = useState<string[]>(['cyclonedx_found', 'github_actions_ci', 'requires_sbom'])
|
||||||
|
const [knownEvidence, setKnownEvidence] = useState('CE-Prozess')
|
||||||
|
const [result, setResult] = useState<AdvisorResponse | null>(null)
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [error, setError] = useState('')
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetch(`${PROXY}/targets`).then(r => r.json()).then(d => {
|
||||||
|
if (Array.isArray(d.targets)) { setTargets(d.targets); if (!d.targets.includes('CRA') && d.targets[0]) setTarget(d.targets[0]) }
|
||||||
|
}).catch(() => {})
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const toggle = (list: string[], set: (v: string[]) => void, v: string) =>
|
||||||
|
set(list.includes(v) ? list.filter(x => x !== v) : [...list, v])
|
||||||
|
|
||||||
|
const run = async () => {
|
||||||
|
setLoading(true); setError(''); setResult(null)
|
||||||
|
try {
|
||||||
|
const scanner_findings = FINDINGS.filter(f => findings.includes(f.signal_id))
|
||||||
|
.map(f => ({ signal_id: f.signal_id, source_type: f.source_type }))
|
||||||
|
const res = await fetch(`${PROXY}/advisor-start`, {
|
||||||
|
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
company, industry, products: [], markets: ['EU'], certifications: certs,
|
||||||
|
known_evidence: knownEvidence ? knownEvidence.split(',').map(s => s.trim()).filter(Boolean) : [],
|
||||||
|
target, scanner_findings,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
if (!res.ok) throw new Error(await res.text())
|
||||||
|
setResult(await res.json())
|
||||||
|
} catch (e) {
|
||||||
|
setError(e instanceof Error ? e.message : 'Advisor fehlgeschlagen')
|
||||||
|
} finally { setLoading(false) }
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 py-8">
|
||||||
|
<div className="max-w-5xl mx-auto px-4">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900">ETO / Onboarding-Advisor</h1>
|
||||||
|
<p className="text-gray-600 mt-2 mb-6">
|
||||||
|
Zertifikate + Ziel + Scanner-Signale → Silent Pass → Capability-Delta + nächste beste Fragen.
|
||||||
|
Welt-1: ein Zertifikat <em>legt nahe</em>, beweist nichts (Verifikation erforderlich).
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-4 mb-6">
|
||||||
|
<Section title="Unternehmen & Ziel">
|
||||||
|
<label className="block text-sm text-gray-600">Unternehmen
|
||||||
|
<input value={company} onChange={e => setCompany(e.target.value)} className="mt-1 w-full border rounded-lg px-3 py-2" /></label>
|
||||||
|
<label className="block text-sm text-gray-600 mt-3">Branche
|
||||||
|
<input value={industry} onChange={e => setIndustry(e.target.value)} className="mt-1 w-full border rounded-lg px-3 py-2" /></label>
|
||||||
|
<label className="block text-sm text-gray-600 mt-3">Ziel
|
||||||
|
<select value={target} onChange={e => setTarget(e.target.value)} className="mt-1 w-full border rounded-lg px-3 py-2">
|
||||||
|
{(targets.length ? targets : ['CRA']).map(t => <option key={t} value={t}>{t}</option>)}
|
||||||
|
</select></label>
|
||||||
|
<label className="block text-sm text-gray-600 mt-3">Vorhandene Nachweise (kommagetrennt)
|
||||||
|
<input value={knownEvidence} onChange={e => setKnownEvidence(e.target.value)} className="mt-1 w-full border rounded-lg px-3 py-2" /></label>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="Zertifizierungen">
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{CERTS.map(c => (
|
||||||
|
<button key={c} onClick={() => toggle(certs, setCerts, c)}
|
||||||
|
className={`px-3 py-1.5 rounded-lg text-sm border ${certs.includes(c) ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-700 border-gray-300'}`}>{c}</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Section title="Scanner-Signale (Silent Pass)" hint="observation = gesehen · partial = Indikation · requirement = gefordert (≠ vorhanden)">
|
||||||
|
<div className="grid sm:grid-cols-2 gap-2">
|
||||||
|
{FINDINGS.map(f => (
|
||||||
|
<label key={f.signal_id} className="flex items-center gap-2 text-sm text-gray-700">
|
||||||
|
<input type="checkbox" checked={findings.includes(f.signal_id)} onChange={() => toggle(findings, setFindings, f.signal_id)} />
|
||||||
|
<span>{f.label}</span>
|
||||||
|
<span className={`ml-auto text-[10px] px-1.5 py-0.5 rounded ${f.kind === 'requirement' ? 'bg-purple-100 text-purple-700' : f.kind === 'partial' ? 'bg-amber-100 text-amber-700' : 'bg-emerald-100 text-emerald-700'}`}>{f.kind}</span>
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<button onClick={run} disabled={loading || !certs.length}
|
||||||
|
className="mt-6 w-full py-3 bg-blue-600 text-white rounded-xl font-medium hover:bg-blue-700 disabled:opacity-50">
|
||||||
|
{loading ? 'Analysiere…' : 'Advisor starten'}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{error && <div className="mt-6 bg-red-50 border border-red-200 rounded-lg p-4 text-red-700 text-sm whitespace-pre-wrap">{error}</div>}
|
||||||
|
|
||||||
|
{result && (
|
||||||
|
<div className="mt-8 space-y-4">
|
||||||
|
<div className="bg-blue-600 text-white rounded-xl p-5">
|
||||||
|
<div className="text-lg font-semibold">{result.headline}</div>
|
||||||
|
<div className="text-blue-100 text-sm mt-1">{result.silent_intake_summary}</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid md:grid-cols-2 gap-4">
|
||||||
|
<Section title="Automatisch erkannt" hint="konkrete Artefakte – nicht mehr gefragt"><Chips items={result.auto_detected} tone="bg-emerald-100 text-emerald-800" /></Section>
|
||||||
|
<Section title="Indikationen" hint="erhöht Annahmestärke – trotzdem gefragt"><Chips items={result.indications} tone="bg-amber-100 text-amber-800" /></Section>
|
||||||
|
</div>
|
||||||
|
<Section title="Nächste beste Fragen" hint="max 5, jede erklärt sich selbst">
|
||||||
|
{result.top_5_questions.length ? (
|
||||||
|
<ol className="space-y-3">
|
||||||
|
{result.top_5_questions.map((q, i) => (
|
||||||
|
<li key={q.capability_id} className="border-l-2 border-blue-300 pl-3">
|
||||||
|
<div className="font-medium text-gray-900">{i + 1}. {q.capability_id} <span className="text-xs text-gray-500">({q.question_intent})</span></div>
|
||||||
|
<div className="text-sm text-gray-600">{q.why}</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
) : <span className="text-gray-400 text-sm">—</span>}
|
||||||
|
</Section>
|
||||||
|
<div className="grid md:grid-cols-2 gap-4">
|
||||||
|
<Section title="Wahrscheinlich abgedeckt (Welt-1)" hint="Zertifikat legt nahe – Verifikation erforderlich">
|
||||||
|
{result.inferred_assumptions.length ? result.inferred_assumptions.map(a => (
|
||||||
|
<div key={a.certification} className="mb-2"><span className="font-medium">{a.certification}</span>: {a.capabilities.join(', ')}</div>
|
||||||
|
)) : <span className="text-gray-400 text-sm">—</span>}
|
||||||
|
</Section>
|
||||||
|
<Section title="Nicht relevant" hint="relevance(evidence, target) = 0">
|
||||||
|
{result.rejected_assumptions.length ? result.rejected_assumptions.map((a, i) => (
|
||||||
|
<div key={i} className="mb-1 text-sm text-gray-700">{a.statement}</div>
|
||||||
|
)) : <span className="text-gray-400 text-sm">—</span>}
|
||||||
|
</Section>
|
||||||
|
</div>
|
||||||
|
<div className="grid md:grid-cols-2 gap-4">
|
||||||
|
<Section title="Offene Lücken (Delta)"><Chips items={result.capability_delta} tone="bg-gray-100 text-gray-700" /></Section>
|
||||||
|
<Section title="Geforderte Nachweise"><Chips items={result.evidence_requests} tone="bg-gray-100 text-gray-700" /></Section>
|
||||||
|
</div>
|
||||||
|
<Section title="Vollständigkeit" hint={result.unsupported_domains.length ? `nicht abgedeckt: ${result.unsupported_domains.join(', ')}` : undefined}>
|
||||||
|
<span className="text-sm text-gray-700">{result.completeness_summary || '—'}</span>
|
||||||
|
</Section>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user