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>
76 lines
3.2 KiB
TypeScript
76 lines
3.2 KiB
TypeScript
import { useState } from 'react'
|
|
import { api } from '../_api'
|
|
|
|
export function CreateRoadmapModal({ onClose, onCreated }: {
|
|
onClose: () => void
|
|
onCreated: () => void
|
|
}) {
|
|
const [title, setTitle] = useState('')
|
|
const [description, setDescription] = useState('')
|
|
const [startDate, setStartDate] = useState('')
|
|
const [targetDate, setTargetDate] = useState('')
|
|
const [saving, setSaving] = useState(false)
|
|
|
|
const handleCreate = async () => {
|
|
if (!title.trim()) return
|
|
setSaving(true)
|
|
try {
|
|
await api('', {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
title: title.trim(),
|
|
description: description.trim(),
|
|
start_date: startDate || null,
|
|
target_date: targetDate || null,
|
|
}),
|
|
})
|
|
onCreated()
|
|
} catch (err) {
|
|
console.error('Create roadmap error:', err)
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={onClose}>
|
|
<div className="bg-white rounded-2xl p-6 w-full max-w-lg" onClick={e => e.stopPropagation()}>
|
|
<h3 className="text-lg font-bold text-gray-900 mb-4">Neue Roadmap</h3>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
|
|
<input type="text" value={title} onChange={e => setTitle(e.target.value)}
|
|
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
placeholder="z.B. AI Act Compliance Roadmap" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
|
|
<textarea value={description} onChange={e => setDescription(e.target.value)}
|
|
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
rows={3} />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Startdatum</label>
|
|
<input type="date" value={startDate} onChange={e => setStartDate(e.target.value)}
|
|
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Zieldatum</label>
|
|
<input type="date" value={targetDate} onChange={e => setTargetDate(e.target.value)}
|
|
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-3 mt-6">
|
|
<button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">Abbrechen</button>
|
|
<button onClick={handleCreate} disabled={!title.trim() || saving}
|
|
className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50">
|
|
{saving ? 'Erstelle...' : 'Erstellen'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|