Benjamin_Boenisch/breakpilot-compliance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(admin): split advisory-board page.tsx into colocated components

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Sharang Parnerkar
2026-04-14 23:02:35 +02:00
parent eeb9931d87
commit 554320770a
16 changed files with 1048 additions and 898 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
admin-compliance/app/sdk/advisory-board/_components/Step5Hosting.tsx Normal file
View File

@@ -0,0 +1,105 @@
'use client'
import React from 'react'
import type { StepProps } from '../_types'
import { HOSTING_PROVIDER_TILES, HOSTING_REGION_TILES, MODEL_USAGE_TILES } from '../_tiles'
import { toggleInArray } from '../_data'
export function Step5Hosting({ form, updateForm }: StepProps) {
return (
<div className="space-y-6">
<h2 className="text-lg font-semibold text-gray-900">Technische Details</h2>
{/* Hosting Provider */}
<div>
<h3 className="text-sm font-medium text-gray-700 mb-2">Hosting-Anbieter</h3>
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
{HOSTING_PROVIDER_TILES.map(item => (
<button
key={item.value}
type="button"
onClick={() => updateForm({ hosting_provider: item.value })}
className={`p-3 rounded-xl border-2 text-left transition-all ${
form.hosting_provider === item.value
? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
: 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
}`}
>
<div className="flex items-center gap-2 mb-1">
<span className="text-lg">{item.icon}</span>
<span className="text-sm font-medium text-gray-900">{item.label}</span>
</div>
<p className="text-xs text-gray-500 leading-tight">{item.desc}</p>
</button>
))}
</div>
</div>
{/* Hosting Region */}
<div>
<h3 className="text-sm font-medium text-gray-700 mb-2">Hosting-Region</h3>
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
{HOSTING_REGION_TILES.map(item => (
<button
key={item.value}
type="button"
onClick={() => updateForm({ hosting_region: item.value })}
className={`p-3 rounded-xl border-2 text-left transition-all ${
form.hosting_region === item.value
? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
: 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
}`}
>
<div className="flex items-center gap-2 mb-1">
<span className="text-lg">{item.icon}</span>
<span className="text-sm font-medium text-gray-900">{item.label}</span>
</div>
<p className="text-xs text-gray-500 leading-tight">{item.desc}</p>
</button>
))}
</div>
</div>
{/* Model Usage */}
<div>
<h3 className="text-sm font-medium text-gray-700 mb-1">Wie wird das KI-Modell genutzt?</h3>
<p className="text-sm text-gray-500 mb-3">Waehlen Sie alle zutreffenden Optionen.</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
{MODEL_USAGE_TILES.map(item => (
<button
key={item.value}
type="button"
onClick={() => updateForm({ model_usage: toggleInArray(form.model_usage, item.value) })}
className={`p-3 rounded-xl border-2 text-left transition-all ${
form.model_usage.includes(item.value)
? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
: 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
}`}
>
<div className="flex items-center gap-2 mb-1">
<span className="text-lg">{item.icon}</span>
<span className="text-sm font-medium text-gray-900">{item.label}</span>
</div>
<p className="text-xs text-gray-500 leading-tight">{item.desc}</p>
</button>
))}
</div>
</div>
{/* Info-Box: Begriffe erklaert */}
<details className="bg-amber-50 border border-amber-200 rounded-lg overflow-hidden">
<summary className="px-4 py-3 text-sm font-medium text-amber-800 cursor-pointer hover:bg-amber-100">
Begriffe erklaert: ML, DL, NLP, LLM &mdash; Was bedeutet das?
</summary>
<div className="px-4 pb-4 space-y-3 text-sm text-amber-900">
<div><span className="font-semibold">ML (Machine Learning)</span> &mdash; Computer lernt Muster aus Daten. Beispiel: Spam-Filter.</div>
<div><span className="font-semibold">DL (Deep Learning)</span> &mdash; ML mit neuronalen Netzen. Beispiel: Bilderkennung, Spracherkennung.</div>
<div><span className="font-semibold">NLP (Natural Language Processing)</span> &mdash; KI versteht Sprache. Beispiel: ChatGPT, DeepL.</div>
<div><span className="font-semibold">LLM (Large Language Model)</span> &mdash; Grosses Sprachmodell. Beispiel: GPT-4, Claude, Llama.</div>
<div><span className="font-semibold">RAG</span> &mdash; LLM erhaelt Kontext aus eigener Datenbank. Vorteil: Aktuelle, firmenspezifische Antworten.</div>
<div><span className="font-semibold">Fine-Tuning</span> &mdash; Bestehendes Modell mit eigenen Daten weitertrainieren. Achtung: Daten werden Teil des Modells.</div>
</div>
</details>
</div>
)
}