0b37c5e692
Website (14 monoliths split): - compliance/page.tsx (1,519 → 9), docs/audit (1,262 → 20) - quality (1,231 → 16), alerts (1,203 → 10), docs (1,202 → 11) - i18n.ts (1,173 → 8 language files) - unity-bridge (1,094 → 12), backlog (1,087 → 6) - training (1,066 → 8), rag (1,063 → 8) - Deleted index_original.ts (4,899 LOC dead backup) Studio-v2 (5 monoliths split): - meet/page.tsx (1,481 → 9), messages (1,166 → 9) - AlertsB2BContext.tsx (1,165 → 5 modules) - alerts-b2b/page.tsx (1,019 → 6), korrektur/archiv (1,001 → 6) All existing imports preserved. Zero new TypeScript errors. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
80 lines
3.1 KiB
TypeScript
80 lines
3.1 KiB
TypeScript
'use client'
|
|
|
|
import type { ServiceNode } from '../types'
|
|
import { ARCHITECTURE_SERVICES } from '../data'
|
|
import { getArchTypeColor, getArchTypeLabel } from '../helpers'
|
|
|
|
interface ServiceDetailPanelProps {
|
|
service: ServiceNode
|
|
onClose: () => void
|
|
onSelectService: (service: ServiceNode) => void
|
|
}
|
|
|
|
export default function ServiceDetailPanel({ service, onClose, onSelectService }: ServiceDetailPanelProps) {
|
|
return (
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div>
|
|
<h2 className="text-xl font-bold text-slate-800">{service.name}</h2>
|
|
<p className="text-slate-600">{service.description}</p>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-2 hover:bg-slate-100 rounded-lg"
|
|
>
|
|
<svg className="w-5 h-5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<div className="text-xs text-slate-500 uppercase">Typ</div>
|
|
<div className={`text-sm font-medium ${getArchTypeColor(service.type).text}`}>
|
|
{getArchTypeLabel(service.type)}
|
|
</div>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<div className="text-xs text-slate-500 uppercase">Technologie</div>
|
|
<div className="text-sm font-medium text-slate-800">{service.technology}</div>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<div className="text-xs text-slate-500 uppercase">Port</div>
|
|
<div className="text-sm font-mono font-medium text-slate-800">
|
|
{service.port || '-'}
|
|
</div>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<div className="text-xs text-slate-500 uppercase">Verbindungen</div>
|
|
<div className="text-sm font-medium text-slate-800">
|
|
{service.connections?.length || 0} Services
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{service.connections && service.connections.length > 0 && (
|
|
<div className="mt-4">
|
|
<h4 className="text-sm font-medium text-slate-700 mb-2">Verbunden mit:</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
{service.connections.map((connId) => {
|
|
const connService = ARCHITECTURE_SERVICES.find(s => s.id === connId)
|
|
if (!connService) return null
|
|
const colors = getArchTypeColor(connService.type)
|
|
return (
|
|
<button
|
|
key={connId}
|
|
onClick={() => onSelectService(connService)}
|
|
className={`px-3 py-1 rounded-full text-sm ${colors.light} ${colors.text} hover:opacity-80`}
|
|
>
|
|
{connService.name}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|