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

src/pages/MilestoneDetailPage.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import api from '@/services/api'
-import type { Milestone, MilestoneProgress, Issue } from '@/types'
+import type { Milestone, MilestoneProgress, MilestoneItems, Issue } from '@/types'
 import dayjs from 'dayjs'
 
 export default function MilestoneDetailPage() {
@@ -9,25 +9,55 @@ export default function MilestoneDetailPage() {
   const navigate = useNavigate()
   const [milestone, setMilestone] = useState<Milestone | null>(null)
   const [progress, setProgress] = useState<MilestoneProgress | null>(null)
-  const [issues, setIssues] = useState<Issue[]>([])
+  const [items, setItems] = useState<MilestoneItems | null>(null)
+  const [activeTab, setActiveTab] = useState<'tasks' | 'supports' | 'meetings'>('tasks')
+  const [showCreateTask, setShowCreateTask] = useState(false)
+  const [showCreateSupport, setShowCreateSupport] = useState(false)
+  const [showCreateMeeting, setShowCreateMeeting] = useState(false)
+  const [newTitle, setNewTitle] = useState('')
+  const [newDesc, setNewDesc] = useState('')
 
   useEffect(() => {
     api.get<Milestone>(`/milestones/${id}`).then(({ data }) => setMilestone(data))
     api.get<MilestoneProgress>(`/milestones/${id}/progress`).then(({ data }) => setProgress(data)).catch(() => {})
-    api.get<Issue[]>(`/milestones/${id}/issues`).then(({ data }) => setIssues(data)).catch(() => {})
+    api.get<MilestoneItems>(`/milestones/${id}/items`).then(({ data }) => setItems(data)).catch(() => {})
   }, [id])
 
+  const createItem = async (type: 'tasks' | 'supports' | 'meetings') => {
+    if (!newTitle.trim()) return
+    await api.post(`/milestones/${id}/${type}`, {
+      title: newTitle,
+      description: newDesc || null,
+      status: 'open',
+      priority: 'medium'
+    })
+    setNewTitle('')
+    setNewDesc('')
+    setShowCreateTask(false)
+    setShowCreateSupport(false)
+    setShowCreateMeeting(false)
+    // Refresh items
+    api.get<MilestoneItems>(`/milestones/${id}/items`).then(({ data }) => setItems(data))
+  }
+
+  const isProgressing = milestone?.status === 'progressing'
+
   if (!milestone) return <div className="loading">Loading...</div>
 
+  const tasks = items?.tasks || []
+  const supports = items?.supports || []
+  const meetings = items?.meetings || []
+
   return (
     <div className="milestone-detail">
-      <button className="btn-back" onClick={() => navigate('/milestones')}>← Back to milestones</button>
+      <button className="btn-back" onClick={() => navigate('/milestones')}>← Back to Milestones</button>
 
       <div className="issue-header">
         <h2>🏁 {milestone.title}</h2>
         <div className="issue-meta">
-          <span className={`badge status-${milestone.status === 'active' ? 'open' : 'closed'}`}>{milestone.status}</span>
+          <span className={`badge status-${milestone.status === 'open' ? 'open' : milestone.status === 'progressing' ? 'in_progress' : 'closed'}`}>{milestone.status}</span>
           {milestone.due_date && <span className="text-dim">Due {dayjs(milestone.due_date).format('YYYY-MM-DD')}</span>}
+          {milestone.planned_release_date && <span className="text-dim">Planned Release: {dayjs(milestone.planned_release_date).format('YYYY-MM-DD')}</span>}
         </div>
       </div>
 
@@ -40,36 +70,122 @@ export default function MilestoneDetailPage() {
 
       {progress && (
         <div className="section">
-          <h3>Progress</h3>
+          <h3>Progress (Tasks: {progress.completed}/{progress.total})</h3>
           <div className="progress-bar-container">
-            <div className="progress-bar" style={{ width: `${progress.progress_percent}%` }}>
-              {progress.progress_percent.toFixed(0)}%
+            <div className="progress-bar" style={{ width: `${progress.progress_pct}%` }}>
+              {progress.progress_pct.toFixed(0)}%
             </div>
           </div>
-          <p className="text-dim" style={{ marginTop: 8 }}>
-            {progress.completed_issues} / {progress.total_issues} issues completed
-          </p>
+          {progress.time_progress_pct !== null && (
+            <>
+              <p className="text-dim" style={{ marginTop: 8 }}>Time Progress</p>
+              <div className="progress-bar-container">
+                <div className="progress-bar" style={{ width: `${progress.time_progress_pct}%`, backgroundColor: 'var(--color-accent)' }}>
+                  {progress.time_progress_pct.toFixed(0)}%
+                </div>
+              </div>
+            </>
+          )}
         </div>
       )}
 
       <div className="section">
-        <h3>Issues ({issues.length})</h3>
-        <table>
-          <thead>
-            <tr><th>#</th><th>Title</th><th>Status</th><th>Priority</th></tr>
-          </thead>
-          <tbody>
-            {issues.map((i) => (
-              <tr key={i.id} className="clickable" onClick={() => navigate(`/issues/${i.id}`)}>
-                <td>{i.id}</td>
-                <td className="issue-title">{i.title}</td>
-                <td><span className={`badge status-${i.status}`}>{i.status}</span></td>
-                <td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td>
-              </tr>
-            ))}
-            {issues.length === 0 && <tr><td colSpan={4} className="empty">No linked issues</td></tr>}
-          </tbody>
-        </table>
+        <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
+          {!isProgressing && (
+            <>
+              <button className="btn-primary" onClick={() => setShowCreateTask(true)}>+ Create Task</button>
+              <button className="btn-primary" onClick={() => setShowCreateSupport(true)}>+ Create Support</button>
+              <button className="btn-primary" onClick={() => setShowCreateMeeting(true)}>+ Schedule Meeting</button>
+            </>
+          )}
+          {isProgressing && <span className="text-dim">Milestone is in progress - cannot add new items</span>}
+        </div>
+
+        {(showCreateTask || showCreateSupport || showCreateMeeting) && (
+          <div className="card" style={{ marginBottom: 16 }}>
+            <input 
+              placeholder="Title" 
+              value={newTitle} 
+              onChange={(e) => setNewTitle(e.target.value)}
+              style={{ marginBottom: 8 }}
+            />
+            <textarea 
+              placeholder="Description (optional)" 
+              value={newDesc} 
+              onChange={(e) => setNewDesc(e.target.value)}
+              style={{ marginBottom: 8, width: '100%' }}
+            />
+            <div style={{ display: 'flex', gap: 8 }}>
+              <button className="btn-primary" onClick={() => createItem(activeTab)}>Create</button>
+              <button className="btn-back" onClick={() => { setShowCreateTask(false); setShowCreateSupport(false); setShowCreateMeeting(false) }}>Cancel</button>
+            </div>
+          </div>
+        )}
+
+        <div className="tabs">
+          <button className={`tab ${activeTab === 'tasks' ? 'active' : ''}`} onClick={() => setActiveTab('tasks')}>
+            Tasks ({tasks.length})
+          </button>
+          <button className={`tab ${activeTab === 'supports' ? 'active' : ''}`} onClick={() => setActiveTab('supports')}>
+            Supports ({supports.length})
+          </button>
+          <button className={`tab ${activeTab === 'meetings' ? 'active' : ''}`} onClick={() => setActiveTab('meetings')}>
+            Meetings ({meetings.length})
+          </button>
+        </div>
+
+        <div className="tab-content">
+          {activeTab === 'tasks' && (
+            <table>
+              <thead><tr><th>#</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead>
+              <tbody>
+                {tasks.map((i) => (
+                  <tr key={i.id} className="clickable" onClick={() => navigate(`/issues/${i.id}`)}>
+                    <td>{i.id}</td>
+                    <td className="issue-title">{i.title}</td>
+                    <td><span className={`badge status-${i.status}`}>{i.status}</span></td>
+                    <td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td>
+                  </tr>
+                ))}
+                {tasks.length === 0 && <tr><td colSpan={4} className="empty">No tasks</td></tr>}
+              </tbody>
+            </table>
+          )}
+
+          {activeTab === 'supports' && (
+            <table>
+              <thead><tr><th>#</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead>
+              <tbody>
+                {supports.map((i) => (
+                  <tr key={i.id} className="clickable" onClick={() => navigate(`/issues/${i.id}`)}>
+                    <td>{i.id}</td>
+                    <td className="issue-title">{i.title}</td>
+                    <td><span className={`badge status-${i.status}`}>{i.status}</span></td>
+                    <td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td>
+                  </tr>
+                ))}
+                {supports.length === 0 && <tr><td colSpan={4} className="empty">No support requests</td></tr>}
+              </tbody>
+            </table>
+          )}
+
+          {activeTab === 'meetings' && (
+            <table>
+              <thead><tr><th>#</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead>
+              <tbody>
+                {meetings.map((i) => (
+                  <tr key={i.id} className="clickable" onClick={() => navigate(`/issues/${i.id}`)}>
+                    <td>{i.id}</td>
+                    <td className="issue-title">{i.title}</td>
+                    <td><span className={`badge status-${i.status}`}>{i.status}</span></td>
+                    <td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td>
+                  </tr>
+                ))}
+                {meetings.length === 0 && <tr><td colSpan={4} className="empty">No meetings</td></tr>}
+              </tbody>
+            </table>
+          )}
+        </div>
       </div>
     </div>
   )