From 0f525effb8f860469970c0e0d02e5205b95392d8 Mon Sep 17 00:00:00 2001
From: Zhi <zhi@dev.hangman-lab.top>
Date: Thu, 12 Mar 2026 21:54:23 +0000
Subject: [PATCH] feat: add task fields UI support

---
 src/pages/MilestoneDetailPage.tsx | 51 +++++++++++++++++++++----------
 1 file changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/pages/MilestoneDetailPage.tsx b/src/pages/MilestoneDetailPage.tsx
index 301fd04..fe49c47 100644
--- a/src/pages/MilestoneDetailPage.tsx
+++ b/src/pages/MilestoneDetailPage.tsx
@@ -16,6 +16,8 @@ export default function MilestoneDetailPage() {
   const [showCreateMeeting, setShowCreateMeeting] = useState(false)
   const [newTitle, setNewTitle] = useState('')
   const [newDesc, setNewDesc] = useState('')
+  const [newEffort, setNewEffort] = useState(5)
+  const [newTime, setNewTime] = useState('09:00')
 
   useEffect(() => {
     api.get<Milestone>(`/milestones/${id}`).then(({ data }) => setMilestone(data))
@@ -25,18 +27,22 @@ export default function MilestoneDetailPage() {
 
   const createItem = async (type: 'tasks' | 'supports' | 'meetings') => {
     if (!newTitle.trim()) return
-    await api.post(`/milestones/${id}/${type}`, {
+    const payload: any = {
       title: newTitle,
       description: newDesc || null,
       status: 'open',
       priority: 'medium'
-    })
+    }
+    if (type === 'tasks') {
+      payload.estimated_effort = newEffort
+      payload.estimated_working_time = newTime
+    }
+    await api.post(`/milestones/${id}/${type}`, payload)
     setNewTitle('')
     setNewDesc('')
     setShowCreateTask(false)
     setShowCreateSupport(false)
     setShowCreateMeeting(false)
-    // Refresh items
     api.get<MilestoneItems>(`/milestones/${id}/items`).then(({ data }) => setItems(data))
   }
 
@@ -48,6 +54,16 @@ export default function MilestoneDetailPage() {
   const supports = items?.supports || []
   const meetings = items?.meetings || []
 
+  const renderTaskRow = (t: any) => (
+    <tr key={t.id} className="clickable" onClick={() => navigate(`/issues/${t.id}`)}>
+      <td>{t.task_code || t.id}</td>
+      <td className="issue-title">{t.title}</td>
+      <td><span className={`badge status-${t.task_status || t.status}`}>{t.task_status || t.status}</span></td>
+      <td>{t.estimated_effort || '-'}</td>
+      <td>{t.estimated_working_time || '-'}</td>
+    </tr>
+  )
+
   return (
     <div className="milestone-detail">
       <button className="btn-back" onClick={() => navigate('/milestones')}>← Back to Milestones</button>
@@ -55,7 +71,7 @@ export default function MilestoneDetailPage() {
       <div className="issue-header">
         <h2>🏁 {milestone.title}</h2>
         <div className="issue-meta">
-          <span className={`badge status-${milestone.status === 'open' ? 'open' : milestone.status === 'progressing' ? 'in_progress' : 'closed'}`}>{milestone.status}</span>
+          <span className={`badge status-${milestone.status === 'progressing' ? 'in_progress' : milestone.status}`}>{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>
@@ -115,6 +131,16 @@ export default function MilestoneDetailPage() {
               onChange={(e) => setNewDesc(e.target.value)}
               style={{ marginBottom: 8, width: '100%' }}
             />
+            {showCreateTask && (
+              <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
+                <label>Effort (1-10):
+                  <input type="number" min="1" max="10" value={newEffort} onChange={(e) => setNewEffort(Number(e.target.value))} style={{ width: 60 }} />
+                </label>
+                <label>Est. Time:
+                  <input type="time" value={newTime} onChange={(e) => setNewTime(e.target.value)} />
+                </label>
+              </div>
+            )}
             <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>
@@ -137,17 +163,10 @@ export default function MilestoneDetailPage() {
         <div className="tab-content">
           {activeTab === 'tasks' && (
             <table>
-              <thead><tr><th>#</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead>
+              <thead><tr><th>Task Code</th><th>Title</th><th>Status</th><th>Effort</th><th>Est. Time</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>}
+                {tasks.map(renderTaskRow)}
+                {tasks.length === 0 && <tr><td colSpan={5} className="empty">No tasks</td></tr>}
               </tbody>
             </table>
           )}
@@ -156,7 +175,7 @@ export default function MilestoneDetailPage() {
             <table>
               <thead><tr><th>#</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead>
               <tbody>
-                {supports.map((i) => (
+                {supports.map((i: any) => (
                   <tr key={i.id} className="clickable" onClick={() => navigate(`/issues/${i.id}`)}>
                     <td>{i.id}</td>
                     <td className="issue-title">{i.title}</td>
@@ -173,7 +192,7 @@ export default function MilestoneDetailPage() {
             <table>
               <thead><tr><th>#</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead>
               <tbody>
-                {meetings.map((i) => (
+                {meetings.map((i: any) => (
                   <tr key={i.id} className="clickable" onClick={() => navigate(`/issues/${i.id}`)}>
                     <td>{i.id}</td>
                     <td className="issue-title">{i.title}</td>