feat: milestone enhancements - tabs, task/support/meeting types, progress, status

src/pages/MilestonesPage.tsx

@@ -9,7 +9,16 @@ export default function MilestonesPage() {
   const [projects, setProjects] = useState<Project[]>([])
   const [projectFilter, setProjectFilter] = useState('')
   const [showCreate, setShowCreate] = useState(false)
-  const [form, setForm] = useState({ title: '', description: '', project_id: 0, due_date: '' })
+  const [form, setForm] = useState({ 
+    title: '', 
+    description: '', 
+    project_id: 0, 
+    due_date: '',
+    planned_release_date: '',
+    status: 'open',
+    depend_on_milestones: [] as string[],
+    depend_on_tasks: [] as number[]
+  })
   const navigate = useNavigate()
 
   const fetchMilestones = () => {
@@ -28,8 +37,16 @@ export default function MilestonesPage() {
 
   const createMilestone = async (e: React.FormEvent) => {
     e.preventDefault()
-    const payload: Record<string, unknown> = { ...form }
-    if (!form.due_date) delete payload.due_date
+    const payload: Record<string, unknown> = { 
+      title: form.title,
+      description: form.description,
+      project_id: form.project_id,
+      status: form.status,
+      due_date: form.due_date || null,
+      planned_release_date: form.planned_release_date || null,
+      depend_on_milestones: form.depend_on_milestones,
+      depend_on_tasks: form.depend_on_tasks
+    }
     await api.post('/milestones', payload)
     setShowCreate(false)
     fetchMilestones()
@@ -60,8 +77,17 @@ export default function MilestonesPage() {
           <select value={form.project_id} onChange={(e) => setForm({ ...form, project_id: Number(e.target.value) })}>
             {projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
           </select>
+          <select value={form.status} onChange={(e) => setForm({ ...form, status: e.target.value })}>
+            <option value="open">Open</option>
+            <option value="pending">Pending</option>
+            <option value="deferred">Deferred</option>
+            <option value="progressing">Progressing</option>
+            <option value="closed">Closed</option>
+          </select>
           <input type="date" value={form.due_date}
             onChange={(e) => setForm({ ...form, due_date: e.target.value })} />
+          <input type="date" placeholder="Planned Release" value={form.planned_release_date}
+            onChange={(e) => setForm({ ...form, planned_release_date: e.target.value })} />
           <button type="submit" className="btn-primary">Create</button>
         </form>
       )}
@@ -70,12 +96,13 @@ export default function MilestonesPage() {
         {milestones.map((ms) => (
           <div key={ms.id} className="milestone-card" onClick={() => navigate(`/milestones/${ms.id}`)}>
             <div className="milestone-card-header">
-              <span className={`badge status-${ms.status === 'active' ? 'open' : 'closed'}`}>{ms.status}</span>
+              <span className={`badge status-${ms.status === 'progressing' ? 'in_progress' : ms.status}`}>{ms.status}</span>
               <h3>{ms.title}</h3>
             </div>
             <p className="project-desc">{ms.description || 'No description'}</p>
             <div className="project-meta">
-              {ms.due_date && <span>Due {dayjs(ms.due_date).format('YYYY-MM-DD')}</span>}
+              {ms.planned_release_date && <span>Release: {dayjs(ms.planned_release_date).format('YYYY-MM-DD')}</span>}
+              {ms.due_date && <span>Due: {dayjs(ms.due_date).format('YYYY-MM-DD')}</span>}
               <span>Created {dayjs(ms.created_at).format('YYYY-MM-DD')}</span>
             </div>
           </div>