[split-required] Split 58 monoliths across Python, Go, TypeScript (Phases 1-3)
Phase 1 — Python (klausur-service): 5 monoliths → 36 files - dsfa_corpus_ingestion.py (1,828 LOC → 5 files) - cv_ocr_engines.py (2,102 LOC → 7 files) - cv_layout.py (3,653 LOC → 10 files) - vocab_worksheet_api.py (2,783 LOC → 8 files) - grid_build_core.py (1,958 LOC → 6 files) Phase 2 — Go (edu-search-service, school-service): 8 monoliths → 19 files - staff_crawler.go (1,402 → 4), policy/store.go (1,168 → 3) - policy_handlers.go (700 → 2), repository.go (684 → 2) - search.go (592 → 2), ai_extraction_handlers.go (554 → 2) - seed_data.go (591 → 2), grade_service.go (646 → 2) Phase 3 — TypeScript (admin-lehrer): 45 monoliths → 220+ files - sdk/types.ts (2,108 → 16 domain files) - ai/rag/page.tsx (2,686 → 14 files) - 22 page.tsx files split into _components/ + _hooks/ - 11 component files split into sub-components - 10 SDK data catalogs added to loc-exceptions - Deleted dead backup index_original.ts (4,899 LOC) All original public APIs preserved via re-export facades. Zero new errors: Python imports verified, Go builds clean, TypeScript tsc --noEmit shows only pre-existing errors. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
@@ -0,0 +1,54 @@
|
||||
import type { CategoryType, CategoryItem } from '../types'
|
||||
|
||||
interface CategoryFilterProps {
|
||||
categories: CategoryItem[]
|
||||
activeCategory: CategoryType
|
||||
setActiveCategory: (cat: CategoryType) => void
|
||||
searchTerm: string
|
||||
setSearchTerm: (term: string) => void
|
||||
}
|
||||
|
||||
export function CategoryFilter({
|
||||
categories,
|
||||
activeCategory,
|
||||
setActiveCategory,
|
||||
searchTerm,
|
||||
setSearchTerm,
|
||||
}: CategoryFilterProps) {
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow p-4 mb-6">
|
||||
<div className="flex flex-col md:flex-row gap-4 items-center justify-between">
|
||||
{/* Category Tabs */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => setActiveCategory(cat.id as CategoryType)}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
activeCategory === cat.id
|
||||
? 'bg-orange-600 text-white'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
{cat.name} ({cat.count})
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div className="relative w-full md:w-64">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Suchen..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
|
||||
/>
|
||||
<svg className="absolute left-3 top-2.5 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
import type { Component } from '../types'
|
||||
import { getCategoryColor, getLicenseColor } from './utils'
|
||||
|
||||
interface ComponentsTableProps {
|
||||
components: Component[]
|
||||
loading: boolean
|
||||
}
|
||||
|
||||
export function ComponentsTable({ components, loading }: ComponentsTableProps) {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-orange-600"></div>
|
||||
<span className="ml-3 text-gray-600">Lade SBOM...</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow overflow-hidden">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Komponente</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Version</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kategorie</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[300px]">Verwendungszweck</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Port</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lizenz</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Source</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{components.map((component, idx) => {
|
||||
const licenseId = component.license || component.licenses?.[0]?.license?.id
|
||||
|
||||
return (
|
||||
<tr key={idx} className="hover:bg-gray-50">
|
||||
<td className="px-4 py-4">
|
||||
<div className="text-sm font-medium text-gray-900">{component.name}</div>
|
||||
</td>
|
||||
<td className="px-4 py-4 whitespace-nowrap">
|
||||
<span className="text-sm font-mono text-gray-900">{component.version}</span>
|
||||
</td>
|
||||
<td className="px-4 py-4 whitespace-nowrap">
|
||||
<span className={`px-2 py-1 text-xs font-medium rounded ${getCategoryColor(component.category)}`}>
|
||||
{component.category || component.type}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-4">
|
||||
{component.description ? (
|
||||
<div className="text-sm text-gray-600 leading-relaxed">{component.description}</div>
|
||||
) : (
|
||||
<span className="text-sm text-gray-400 italic">Keine Beschreibung</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-4 whitespace-nowrap">
|
||||
{component.port ? (
|
||||
<span className="text-sm font-mono text-gray-600">{component.port}</span>
|
||||
) : (
|
||||
<span className="text-sm text-gray-400">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-4 whitespace-nowrap">
|
||||
{licenseId ? (
|
||||
<span className={`px-2 py-1 text-xs font-medium rounded ${getLicenseColor(licenseId)}`}>
|
||||
{licenseId}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-sm text-gray-400">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-4 whitespace-nowrap">
|
||||
{component.sourceUrl && component.sourceUrl !== '-' ? (
|
||||
<a
|
||||
href={component.sourceUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-orange-600 hover:text-orange-800 text-sm flex items-center gap-1"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-sm text-gray-400">-</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{components.length === 0 && (
|
||||
<div className="p-8 text-center text-gray-500">
|
||||
Keine Komponenten gefunden.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
interface ExportButtonProps {
|
||||
onExport: () => void
|
||||
}
|
||||
|
||||
export function ExportButton({ onExport }: ExportButtonProps) {
|
||||
return (
|
||||
<div className="mt-6 flex justify-end">
|
||||
<button
|
||||
onClick={onExport}
|
||||
className="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
</svg>
|
||||
SBOM exportieren (JSON)
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,251 @@
|
||||
import type { InfoTabType } from '../types'
|
||||
|
||||
interface InfoTabsSectionProps {
|
||||
activeInfoTab: InfoTabType
|
||||
setActiveInfoTab: (tab: InfoTabType) => void
|
||||
showFullDocs: boolean
|
||||
setShowFullDocs: (show: boolean) => void
|
||||
}
|
||||
|
||||
export function InfoTabsSection({
|
||||
activeInfoTab,
|
||||
setActiveInfoTab,
|
||||
showFullDocs,
|
||||
setShowFullDocs,
|
||||
}: InfoTabsSectionProps) {
|
||||
return (
|
||||
<div className="mt-8">
|
||||
<div className="bg-white rounded-lg shadow">
|
||||
{/* Tab Headers */}
|
||||
<div className="border-b border-gray-200">
|
||||
<nav className="flex -mb-px">
|
||||
<button
|
||||
onClick={() => setActiveInfoTab('audit')}
|
||||
className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
|
||||
activeInfoTab === 'audit'
|
||||
? 'border-orange-500 text-orange-600'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Audit
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveInfoTab('documentation')}
|
||||
className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
|
||||
activeInfoTab === 'documentation'
|
||||
? 'border-orange-500 text-orange-600'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
Dokumentation
|
||||
</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Tab Content */}
|
||||
<div className="p-6">
|
||||
{activeInfoTab === 'audit' && <AuditTab />}
|
||||
{activeInfoTab === 'documentation' && (
|
||||
<DocumentationTab showFullDocs={showFullDocs} setShowFullDocs={setShowFullDocs} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function AuditTab() {
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* SBOM Status */}
|
||||
<div className="bg-slate-50 rounded-lg p-4">
|
||||
<h3 className="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
SBOM Status
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
{ label: 'Letzte Generierung', value: 'CI/CD' },
|
||||
{ label: 'Format', value: 'CycloneDX 1.5' },
|
||||
{ label: 'Komponenten', value: 'Alle erfasst' },
|
||||
{ label: 'Transitive Deps', value: 'Inkludiert' },
|
||||
].map((item) => (
|
||||
<div key={item.label} className="flex items-center justify-between">
|
||||
<span className="text-sm text-slate-600">{item.label}</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-green-500"></span>
|
||||
<span className="text-sm font-medium">{item.value}</span>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* License Compliance */}
|
||||
<div className="bg-slate-50 rounded-lg p-4">
|
||||
<h3 className="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
|
||||
</svg>
|
||||
License Compliance
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
{ label: 'Erlaubte Lizenzen', value: 'MIT, Apache, BSD', color: 'bg-green-500' },
|
||||
{ label: 'Copyleft (GPL)', value: '0', color: 'bg-green-500' },
|
||||
{ label: 'Unbekannte Lizenzen', value: '0', color: 'bg-green-500' },
|
||||
{ label: 'Kommerzielle', value: 'Review erforderlich', color: 'bg-yellow-500' },
|
||||
].map((item) => (
|
||||
<div key={item.label} className="flex items-center justify-between">
|
||||
<span className="text-sm text-slate-600">{item.label}</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<span className={`w-2 h-2 rounded-full ${item.color}`}></span>
|
||||
<span className="text-sm font-medium">{item.value}</span>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DocumentationTab({
|
||||
showFullDocs,
|
||||
setShowFullDocs,
|
||||
}: {
|
||||
showFullDocs: boolean
|
||||
setShowFullDocs: (show: boolean) => void
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-lg font-semibold text-slate-800">SBOM Dokumentation</h3>
|
||||
<button
|
||||
onClick={() => setShowFullDocs(!showFullDocs)}
|
||||
className="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<svg className={`w-4 h-4 transition-transform ${showFullDocs ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
{showFullDocs ? 'Weniger anzeigen' : 'Vollstaendige Dokumentation'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{!showFullDocs ? <DocsSummary /> : <DocsFullContent />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DocsSummary() {
|
||||
return (
|
||||
<div className="prose prose-slate max-w-none">
|
||||
<p className="text-slate-600">
|
||||
Das SBOM-Modul generiert und analysiert die vollstaendige Komponentenliste aller Software-Abhaengigkeiten.
|
||||
Es dient der Compliance, Sicherheit und Supply-Chain-Transparenz.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
|
||||
<div className="bg-blue-50 p-4 rounded-lg">
|
||||
<h4 className="font-medium text-blue-800 mb-2">Generator</h4>
|
||||
<p className="text-sm text-blue-600">Syft (Primary), Trivy (Validation)</p>
|
||||
</div>
|
||||
<div className="bg-purple-50 p-4 rounded-lg">
|
||||
<h4 className="font-medium text-purple-800 mb-2">Format</h4>
|
||||
<p className="text-sm text-purple-600">CycloneDX 1.5, SPDX</p>
|
||||
</div>
|
||||
<div className="bg-green-50 p-4 rounded-lg">
|
||||
<h4 className="font-medium text-green-800 mb-2">Retention</h4>
|
||||
<p className="text-sm text-green-600">5 Jahre (Compliance)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DocsFullContent() {
|
||||
return (
|
||||
<div className="prose prose-slate max-w-none bg-slate-50 p-6 rounded-lg overflow-auto max-h-[600px]">
|
||||
<h2>Software Bill of Materials (SBOM)</h2>
|
||||
|
||||
<h3>1. Uebersicht</h3>
|
||||
<p>Das SBOM-Modul generiert und analysiert die vollstaendige Komponentenliste aller Software-Abhaengigkeiten. Es dient der Compliance, Sicherheit und Supply-Chain-Transparenz.</p>
|
||||
|
||||
<h3>2. SBOM-Generierung</h3>
|
||||
<pre className="bg-slate-800 text-slate-100 p-4 rounded-lg overflow-x-auto text-sm">
|
||||
{`Source Code
|
||||
|
|
||||
v
|
||||
+---------------------------------------------------------------+
|
||||
| SBOM Generators |
|
||||
| +-------------+ +-------------+ +---------------------+ |
|
||||
| | Syft | | Trivy | | Native Tooling | |
|
||||
| | (Primary) | | (Validation)| | (npm, go mod, pip) | |
|
||||
| +------+------+ +------+------+ +----------+----------+ |
|
||||
+---------+----------------+--------------------+---------------+
|
||||
| | |
|
||||
+----------------+--------------------+
|
||||
|
|
||||
v
|
||||
+----------------+
|
||||
| CycloneDX |
|
||||
| Format |
|
||||
+----------------+`}
|
||||
</pre>
|
||||
|
||||
<h3>3. Erfasste Komponenten</h3>
|
||||
<table className="min-w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-left">Typ</th>
|
||||
<th className="text-left">Quelle</th>
|
||||
<th className="text-left">Beispiele</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>npm packages</td><td>package-lock.json</td><td>react, next, tailwindcss</td></tr>
|
||||
<tr><td>Go modules</td><td>go.sum</td><td>gin, gorm, jwt-go</td></tr>
|
||||
<tr><td>Python packages</td><td>requirements.txt</td><td>fastapi, pydantic, httpx</td></tr>
|
||||
<tr><td>Container Images</td><td>Dockerfile</td><td>node:20-alpine, postgres:16</td></tr>
|
||||
<tr><td>OS Packages</td><td>apk, apt</td><td>openssl, libpq</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>4. License Compliance</h3>
|
||||
<table className="min-w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-left">Kategorie</th>
|
||||
<th className="text-left">Lizenzen</th>
|
||||
<th className="text-left">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Permissive (erlaubt)</td><td>MIT, Apache 2.0, BSD, ISC</td><td className="text-green-600">OK</td></tr>
|
||||
<tr><td>Weak Copyleft</td><td>LGPL, MPL</td><td className="text-yellow-600">Review</td></tr>
|
||||
<tr><td>Strong Copyleft</td><td>GPL, AGPL</td><td className="text-red-600">Nicht erlaubt</td></tr>
|
||||
<tr><td>Proprietaer</td><td>Commercial</td><td className="text-yellow-600">Genehmigung</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>5. Aufbewahrung & Compliance</h3>
|
||||
<ul>
|
||||
<li><strong>Retention:</strong> 5 Jahre (Compliance)</li>
|
||||
<li><strong>Format:</strong> JSON + PDF Report</li>
|
||||
<li><strong>Signierung:</strong> Digital signiert</li>
|
||||
<li><strong>Audit:</strong> Jederzeit abrufbar</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import type { SBOMData } from '../types'
|
||||
|
||||
interface SbomMetadataProps {
|
||||
sbomData: SBOMData
|
||||
}
|
||||
|
||||
export function SbomMetadata({ sbomData }: SbomMetadataProps) {
|
||||
if (!sbomData.metadata) return null
|
||||
|
||||
return (
|
||||
<div className="bg-slate-50 rounded-lg p-4 mb-6 text-sm">
|
||||
<div className="flex flex-wrap gap-6">
|
||||
<div>
|
||||
<span className="text-slate-500">Format:</span>
|
||||
<span className="ml-2 font-medium">{sbomData.bomFormat} {sbomData.specVersion}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-slate-500">Generiert:</span>
|
||||
<span className="ml-2 font-medium">
|
||||
{sbomData.metadata.timestamp ? new Date(sbomData.metadata.timestamp).toLocaleString('de-DE') : '-'}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-slate-500">Anwendung:</span>
|
||||
<span className="ml-2 font-medium">
|
||||
{sbomData.metadata.component?.name} v{sbomData.metadata.component?.version}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import type { SbomStats } from '../types'
|
||||
|
||||
interface StatsCardsProps {
|
||||
stats: SbomStats
|
||||
}
|
||||
|
||||
export function StatsCards({ stats }: StatsCardsProps) {
|
||||
const items = [
|
||||
{ value: stats.totalAll, label: 'Komponenten Total', color: 'text-slate-800' },
|
||||
{ value: stats.totalInfra, label: 'Docker Services', color: 'text-purple-600' },
|
||||
{ value: stats.totalSecurityTools, label: 'Security Tools', color: 'text-red-600' },
|
||||
{ value: stats.totalPython, label: 'Python', color: 'text-emerald-600' },
|
||||
{ value: stats.totalGo, label: 'Go', color: 'text-sky-600' },
|
||||
{ value: stats.totalNode, label: 'Node.js', color: 'text-lime-600' },
|
||||
{ value: stats.totalUnity, label: 'Unity', color: 'text-amber-600' },
|
||||
{ value: stats.totalCsharp, label: 'C#', color: 'text-fuchsia-600' },
|
||||
{ value: stats.databases, label: 'Datenbanken', color: 'text-blue-600' },
|
||||
{ value: stats.game, label: 'Game', color: 'text-rose-600' },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 lg:grid-cols-10 gap-4 mb-6">
|
||||
{items.map((item) => (
|
||||
<div key={item.label} className="bg-white rounded-lg shadow p-4">
|
||||
<div className={`text-3xl font-bold ${item.color}`}>{item.value}</div>
|
||||
<div className="text-sm text-slate-500">{item.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export { StatsCards } from './StatsCards'
|
||||
export { CategoryFilter } from './CategoryFilter'
|
||||
export { ComponentsTable } from './ComponentsTable'
|
||||
export { ExportButton } from './ExportButton'
|
||||
export { SbomMetadata } from './SbomMetadata'
|
||||
export { InfoTabsSection } from './InfoTabsSection'
|
||||
@@ -0,0 +1,32 @@
|
||||
export function getCategoryColor(category?: string): string {
|
||||
switch (category) {
|
||||
case 'database': return 'bg-blue-100 text-blue-800'
|
||||
case 'security': return 'bg-purple-100 text-purple-800'
|
||||
case 'security-tool': return 'bg-red-100 text-red-800'
|
||||
case 'application': return 'bg-green-100 text-green-800'
|
||||
case 'communication': return 'bg-yellow-100 text-yellow-800'
|
||||
case 'storage': return 'bg-orange-100 text-orange-800'
|
||||
case 'search': return 'bg-pink-100 text-pink-800'
|
||||
case 'cache': return 'bg-cyan-100 text-cyan-800'
|
||||
case 'development': return 'bg-gray-100 text-gray-800'
|
||||
case 'cicd': return 'bg-orange-100 text-orange-800'
|
||||
case 'python': return 'bg-emerald-100 text-emerald-800'
|
||||
case 'go': return 'bg-sky-100 text-sky-800'
|
||||
case 'nodejs': return 'bg-lime-100 text-lime-800'
|
||||
case 'unity': return 'bg-amber-100 text-amber-800'
|
||||
case 'csharp': return 'bg-fuchsia-100 text-fuchsia-800'
|
||||
case 'game': return 'bg-rose-100 text-rose-800'
|
||||
case 'voice': return 'bg-teal-100 text-teal-800'
|
||||
case 'qa': return 'bg-blue-100 text-blue-800'
|
||||
default: return 'bg-slate-100 text-slate-800'
|
||||
}
|
||||
}
|
||||
|
||||
export function getLicenseColor(license?: string): string {
|
||||
if (!license) return 'bg-gray-100 text-gray-600'
|
||||
if (license.includes('MIT')) return 'bg-green-100 text-green-700'
|
||||
if (license.includes('Apache')) return 'bg-blue-100 text-blue-700'
|
||||
if (license.includes('BSD')) return 'bg-cyan-100 text-cyan-700'
|
||||
if (license.includes('GPL') || license.includes('LGPL')) return 'bg-orange-100 text-orange-700'
|
||||
return 'bg-gray-100 text-gray-600'
|
||||
}
|
||||
Reference in New Issue
Block a user