6571b580dc
Split 876-LOC page.tsx into 146 LOC with 7 colocated components (RoadmapCard, CreateRoadmapModal, CreateItemModal, ImportWizard, RoadmapDetailView split into header + items table), plus _types.ts, _constants.ts, and _api.ts. Behavior preserved. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
63 lines
2.5 KiB
TypeScript
63 lines
2.5 KiB
TypeScript
import type { Roadmap, RoadmapStats } from '../_types'
|
|
import { statusColors, statusLabels } from '../_constants'
|
|
|
|
export function RoadmapDetailHeader({
|
|
roadmap,
|
|
stats,
|
|
onCreateItem,
|
|
}: {
|
|
roadmap: Roadmap
|
|
stats: RoadmapStats | null
|
|
onCreateItem: () => void
|
|
}) {
|
|
return (
|
|
<div className="bg-white rounded-xl border-2 border-gray-200 p-6 mb-6">
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div>
|
|
<h2 className="text-xl font-bold text-gray-900">{roadmap.title}</h2>
|
|
<p className="text-sm text-gray-500 mt-1">{roadmap.description}</p>
|
|
</div>
|
|
<span className={`px-3 py-1 text-sm rounded-full ${statusColors[roadmap.status]}`}>
|
|
{statusLabels[roadmap.status]}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<div className="flex justify-between text-sm text-gray-500 mb-1">
|
|
<span>{roadmap.completed_items}/{roadmap.total_items} Items abgeschlossen</span>
|
|
<span>{roadmap.progress}%</span>
|
|
</div>
|
|
<div className="w-full h-3 bg-gray-100 rounded-full overflow-hidden">
|
|
<div className="h-full bg-purple-500 rounded-full transition-all" style={{ width: `${roadmap.progress}%` }} />
|
|
</div>
|
|
</div>
|
|
|
|
{stats && (
|
|
<div className="grid grid-cols-4 gap-4 mb-4">
|
|
<div className="bg-gray-50 rounded-lg p-3 text-center">
|
|
<div className="text-2xl font-bold text-red-600">{stats.overdue_items}</div>
|
|
<div className="text-xs text-gray-500">Ueberfaellig</div>
|
|
</div>
|
|
<div className="bg-gray-50 rounded-lg p-3 text-center">
|
|
<div className="text-2xl font-bold text-yellow-600">{stats.upcoming_items}</div>
|
|
<div className="text-xs text-gray-500">Anstehend</div>
|
|
</div>
|
|
<div className="bg-gray-50 rounded-lg p-3 text-center">
|
|
<div className="text-2xl font-bold text-gray-900">{stats.total_effort_days}</div>
|
|
<div className="text-xs text-gray-500">Aufwand (Tage)</div>
|
|
</div>
|
|
<div className="bg-gray-50 rounded-lg p-3 text-center">
|
|
<div className="text-2xl font-bold text-purple-600">{stats.progress}%</div>
|
|
<div className="text-xs text-gray-500">Fortschritt</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<button onClick={onCreateItem}
|
|
className="px-3 py-1.5 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700">
|
|
Neues Item
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|