From 0c5c78a45d3b3652c7044c36d945953709fbcd14 Mon Sep 17 00:00:00 2001
From: zhi <zhi@dev.hangman-lab.top>
Date: Mon, 16 Mar 2026 13:22:19 +0000
Subject: [PATCH] fix: align task pages with backend task api

---
 src/pages/CreateTaskPage.tsx    | 56 +++++++++++++++++++++++----------
 src/pages/DashboardPage.tsx     |  8 ++---
 src/pages/MonitorPage.tsx       | 14 ++++-----
 src/pages/NotificationsPage.tsx |  2 +-
 src/pages/TaskDetailPage.tsx    | 14 ++++-----
 src/pages/TasksPage.tsx         |  6 ++--
 src/types/index.ts              | 16 +++++-----
 7 files changed, 70 insertions(+), 46 deletions(-)

diff --git a/src/pages/CreateTaskPage.tsx b/src/pages/CreateTaskPage.tsx
index 66bf9e6..c074dd4 100644
--- a/src/pages/CreateTaskPage.tsx
+++ b/src/pages/CreateTaskPage.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import api from '@/services/api'
-import type { Project } from '@/types'
+import type { Project, Milestone } from '@/types'
 
 const TASK_TYPES = [
   { value: 'story', label: 'Story', subtypes: ['feature', 'improvement', 'refactor'] },
@@ -11,38 +11,56 @@ const TASK_TYPES = [
   { value: 'maintenance', label: 'Maintenance', subtypes: ['deploy', 'release'] },
   { value: 'research', label: 'Research', subtypes: [] },
   { value: 'review', label: 'Review', subtypes: ['code_review', 'decision_review', 'function_review'] },
-  { value: 'support', label: 'Support', subtypes: ['access', 'information'] },
-  { value: 'meeting', label: 'Meeting', subtypes: ['conference', 'handover', 'recap'] },
   { value: 'resolution', label: 'Resolution', subtypes: [] },
 ]
 
 export default function CreateTaskPage() {
   const navigate = useNavigate()
   const [projects, setProjects] = useState<Project[]>([])
+  const [milestones, setMilestones] = useState<Milestone[]>([])
   const [form, setForm] = useState({
-    title: '', description: '', project_id: 0, issue_type: 'task',
-    issue_subtype: '', priority: 'medium', tags: '', reporter_id: 1,
+    title: '', description: '', project_id: 0, milestone_id: 0, task_type: 'task',
+    task_subtype: '', priority: 'medium', tags: '', reporter_id: 1,
   })
 
   useEffect(() => {
     api.get<Project[]>('/projects').then(({ data }) => {
       setProjects(data)
-      if (data.length) setForm((f) => ({ ...f, project_id: data[0].id }))
+      if (data.length) {
+        setForm((f) => ({ ...f, project_id: data[0].id }))
+        // Load milestones for the first project
+        api.get<Milestone[]>(`/milestones?project_id=${data[0].id}`).then(({ data: ms }) => {
+          setMilestones(ms)
+          if (ms.length) setForm((f) => ({ ...f, milestone_id: ms[0].id }))
+        })
+      }
     })
   }, [])
 
-  const currentType = TASK_TYPES.find(t => t.value === form.issue_type) || TASK_TYPES[2]
+  const handleProjectChange = (projectId: number) => {
+    setForm(f => ({ ...f, project_id: projectId, milestone_id: 0 }))
+    api.get<Milestone[]>(`/milestones?project_id=${projectId}`).then(({ data: ms }) => {
+      setMilestones(ms)
+      if (ms.length) setForm((f) => ({ ...f, milestone_id: ms[0].id }))
+    })
+  }
+
+  const currentType = TASK_TYPES.find(t => t.value === form.task_type) || TASK_TYPES[2]
   const subtypes = currentType.subtypes || []
 
   const handleTypeChange = (newType: string) => {
-    setForm(f => ({ ...f, issue_type: newType, issue_subtype: '' }))
+    setForm(f => ({ ...f, task_type: newType, task_subtype: '' }))
   }
 
   const submit = async (e: React.FormEvent) => {
     e.preventDefault()
+    if (!form.milestone_id) {
+      alert('Please select a milestone')
+      return
+    }
     const payload: any = { ...form, tags: form.tags || null }
-    if (!form.issue_subtype) delete payload.issue_subtype
-    await api.post('/issues', payload)
+    if (!form.task_subtype) delete payload.task_subtype
+    await api.post('/tasks', payload)
     navigate('/tasks')
   }
 
@@ -50,21 +68,27 @@ export default function CreateTaskPage() {
     <div className="create-task">
       <h2>Create Task</h2>
       <form onSubmit={submit}>
-        <label>Title <input required value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} /></label>
-        <label>Description <textarea value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} /></label>
+        <label>Title <input data-testid="task-title-input" required value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} /></label>
+        <label>Description <textarea data-testid="task-description-input" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} /></label>
         <label>Projects
-          <select value={form.project_id} onChange={(e) => setForm({ ...form, project_id: Number(e.target.value) })}>
+          <select data-testid="project-select" value={form.project_id} onChange={(e) => handleProjectChange(Number(e.target.value))}>
             {projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
           </select>
         </label>
+        <label>Milestone
+          <select data-testid="milestone-select" value={form.milestone_id} onChange={(e) => setForm({ ...form, milestone_id: Number(e.target.value) })}>
+            {milestones.length === 0 && <option value={0}>No milestones available</option>}
+            {milestones.map((m) => <option key={m.id} value={m.id}>{m.title}</option>)}
+          </select>
+        </label>
         <label>Type
-          <select value={form.issue_type} onChange={(e) => handleTypeChange(e.target.value)}>
+          <select data-testid="task-type-select" value={form.task_type} onChange={(e) => handleTypeChange(e.target.value)}>
             {TASK_TYPES.map((t) => <option key={t.value} value={t.value}>{t.label}</option>)}
           </select>
         </label>
         {subtypes.length > 0 && (
           <label>Subtype
-            <select value={form.issue_subtype} onChange={(e) => setForm({ ...form, issue_subtype: e.target.value })}>
+            <select value={form.task_subtype} onChange={(e) => setForm({ ...form, task_subtype: e.target.value })}>
               <option value="">Select subtype</option>
               {subtypes.map((s) => <option key={s} value={s}>{s.replace('_', ' ')}</option>)}
             </select>
@@ -79,7 +103,7 @@ export default function CreateTaskPage() {
           </select>
         </label>
         <label>Tags <input value={form.tags} onChange={(e) => setForm({ ...form, tags: e.target.value })} placeholder="Comma separated" /></label>
-        <button type="submit" className="btn-primary">Create</button>
+        <button data-testid="create-task-button" type="submit" className="btn-primary">Create</button>
       </form>
     </div>
   )
diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
index 81177d1..cbf9bab 100644
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -25,7 +25,7 @@ export default function DashboardPage() {
 
       <div className="stats-grid">
         <div className="stat-card total">
-          <span className="stat-number">{stats.total_issues}</span>
+          <span className="stat-number">{stats.total_tasks}</span>
           <span className="stat-label">Total Tasks</span>
         </div>
         {Object.entries(stats.by_status || {}).map(([k, v]) => (
@@ -43,7 +43,7 @@ export default function DashboardPage() {
             <div className="bar-row" key={k}>
               <span className="bar-label">{k}</span>
               <div className="bar" style={{
-                width: `${Math.max((v / stats.total_issues) * 100, 5)}%`,
+                width: `${Math.max((v / stats.total_tasks) * 100, 5)}%`,
                 backgroundColor: priorityColors[k] || '#ccc',
               }}>{v}</div>
             </div>
@@ -58,13 +58,13 @@ export default function DashboardPage() {
             <tr><th>ID</th><th>Title</th><th>Status</th><th>Priority</th><th>Type</th><th>Subtype</th></tr>
           </thead>
           <tbody>
-            {(stats.recent_issues || []).map((i) => (
+            {(stats.recent_tasks || []).map((i) => (
               <tr key={i.id}>
                 <td>#{i.id}</td>
                 <td><a href={`/tasks/${i.id}`}>{i.title}</a></td>
                 <td><span className={`badge status-${i.status}`}>{i.status}</span></td>
                 <td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td>
-                <td>{i.issue_type}</td><td>{i.issue_subtype || "-"}</td>
+                <td>{i.task_type}</td><td>{i.task_subtype || "-"}</td>
               </tr>
             ))}
           </tbody>
diff --git a/src/pages/MonitorPage.tsx b/src/pages/MonitorPage.tsx
index 89a7c9a..72bd1f9 100644
--- a/src/pages/MonitorPage.tsx
+++ b/src/pages/MonitorPage.tsx
@@ -16,10 +16,10 @@ interface ServerRow {
 }
 
 interface OverviewData {
-  issues: {
-    total_issues: number
-    new_issues_24h: number
-    processed_issues_24h: number
+  tasks: {
+    total_tasks: number
+    new_tasks_24h: number
+    processed_tasks_24h: number
     computed_at: string
   }
   servers: ServerRow[]
@@ -109,15 +109,15 @@ export default function MonitorPage() {
 
       <div className="stats-grid">
         <div className="stat-card total">
-          <span className="stat-number">{data.issues.total_issues}</span>
+          <span className="stat-number">{data.tasks.total_tasks}</span>
           <span className="stat-label">Total Tasks</span>
         </div>
         <div className="stat-card" style={{ borderLeftColor: 'var(--accent)' }}>
-          <span className="stat-number">{data.issues.new_issues_24h}</span>
+          <span className="stat-number">{data.tasks.new_tasks_24h}</span>
           <span className="stat-label">New (24h)</span>
         </div>
         <div className="stat-card" style={{ borderLeftColor: 'var(--success)' }}>
-          <span className="stat-number">{data.issues.processed_issues_24h}</span>
+          <span className="stat-number">{data.tasks.processed_tasks_24h}</span>
           <span className="stat-label">Processed (24h)</span>
         </div>
       </div>
diff --git a/src/pages/NotificationsPage.tsx b/src/pages/NotificationsPage.tsx
index 6723f13..e0ce901 100644
--- a/src/pages/NotificationsPage.tsx
+++ b/src/pages/NotificationsPage.tsx
@@ -52,7 +52,7 @@ export default function NotificationsPage() {
             className={`notification-item ${n.is_read ? 'read' : 'unread'}`}
             onClick={() => {
               if (!n.is_read) markRead(n.id)
-              if (n.issue_id) navigate(`/tasks/${n.issue_id}`)
+              if (n.task_id) navigate(`/tasks/${n.task_id}`)
             }}
           >
             <div className="notification-dot">{n.is_read ? '' : '●'}</div>
diff --git a/src/pages/TaskDetailPage.tsx b/src/pages/TaskDetailPage.tsx
index 77dd40d..d796ce1 100644
--- a/src/pages/TaskDetailPage.tsx
+++ b/src/pages/TaskDetailPage.tsx
@@ -12,21 +12,21 @@ export default function TaskDetailPage() {
   const [newComment, setNewComment] = useState('')
 
   useEffect(() => {
-    api.get<Task>(`/issues/${id}`).then(({ data }) => setTask(data))
-    api.get<Comment[]>(`/issues/${id}/comments`).then(({ data }) => setComments(data))
+    api.get<Task>(`/tasks/${id}`).then(({ data }) => setTask(data))
+    api.get<Comment[]>(`/tasks/${id}/comments`).then(({ data }) => setComments(data))
   }, [id])
 
   const addComment = async () => {
     if (!newComment.trim() || !task) return
-    await api.post('/comments', { content: newComment, issue_id: task.id, author_id: 1 })
+    await api.post('/comments', { content: newComment, task_id: task.id, author_id: 1 })
     setNewComment('')
-    const { data } = await api.get<Comment[]>(`/issues/${id}/comments`)
+    const { data } = await api.get<Comment[]>(`/tasks/${id}/comments`)
     setComments(data)
   }
 
   const transition = async (newStatus: string) => {
-    await api.post(`/issues/${id}/transition?new_status=${newStatus}`)
-    const { data } = await api.get<Task>(`/issues/${id}`)
+    await api.post(`/tasks/${id}/transition?new_status=${newStatus}`)
+    const { data } = await api.get<Task>(`/tasks/${id}`)
     setTask(data)
   }
 
@@ -49,7 +49,7 @@ export default function TaskDetailPage() {
         <div className="task-meta">
           <span className={`badge status-${task.status}`}>{task.status}</span>
           <span className={`badge priority-${task.priority}`}>{task.priority}</span>
-          <span className="badge">{task.issue_type}</span>{task.issue_subtype && <span className="badge">{task.issue_subtype}</span>}
+          <span className="badge">{task.task_type}</span>{task.task_subtype && <span className="badge">{task.task_subtype}</span>}
           {task.tags && <span className="tags">{task.tags}</span>}
         </div>
       </div>
diff --git a/src/pages/TasksPage.tsx b/src/pages/TasksPage.tsx
index 411f2a3..5348dac 100644
--- a/src/pages/TasksPage.tsx
+++ b/src/pages/TasksPage.tsx
@@ -14,8 +14,8 @@ export default function TasksPage() {
 
   const fetchTasks = () => {
     const params = new URLSearchParams({ page: String(page), page_size: '20' })
-    if (statusFilter) params.set('issue_status', statusFilter)
-    api.get<PaginatedResponse<Task>>(`/issues?${params}`).then(({ data }) => {
+    if (statusFilter) params.set('task_status', statusFilter)
+    api.get<PaginatedResponse<Task>>(`/tasks?${params}`).then(({ data }) => {
       setTasks(data.items)
       setTotal(data.total)
       setTotalPages(data.total_pages)
@@ -58,7 +58,7 @@ export default function TasksPage() {
               <td className="task-title">{t.title}</td>
               <td><span className="badge" style={{ backgroundColor: statusColors[t.status] || '#ccc' }}>{t.status}</span></td>
               <td><span className={`badge priority-${t.priority}`}>{t.priority}</span></td>
-              <td>{t.issue_type}</td><td>{t.issue_subtype || "-"}</td>
+              <td>{t.task_type}</td><td>{t.task_subtype || "-"}</td>
               <td>{t.tags || '-'}</td>
               <td>{new Date(t.created_at).toLocaleDateString()}</td>
             </tr>
diff --git a/src/types/index.ts b/src/types/index.ts
index 58b7466..d80a29a 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -33,8 +33,8 @@ export interface Task {
   id: number
   title: string
   description: string | null
-  issue_type: 'meeting' | 'support' | 'issue' | 'maintenance' | 'research' | 'review' | 'story' | 'test' | 'resolution' | 'task'
-  issue_subtype: string | null
+  task_type: 'issue' | 'maintenance' | 'research' | 'review' | 'story' | 'test' | 'resolution' | 'task'
+  task_subtype: string | null
   status: 'open' | 'in_progress' | 'resolved' | 'closed' | 'blocked'
   priority: 'low' | 'medium' | 'high' | 'critical'
   project_id: number
@@ -53,7 +53,7 @@ export interface Task {
 export interface Comment {
   id: number
   content: string
-  issue_id: number
+  task_id: number
   author_id: number
   created_at: string
   updated_at: string | null
@@ -76,7 +76,7 @@ export interface Milestone {
 export interface MilestoneProgress {
   milestone_id: number
   title: string
-  total_issues: number
+  total_tasks: number
   total: number
   completed: number
   progress_pct: number
@@ -95,13 +95,13 @@ export interface Notification {
   user_id: number
   message: string
   is_read: boolean
-  issue_id: number | null
+  task_id: number | null
   created_at: string
 }
 
 export interface PaginatedResponse<T> {
   items: T[]
-  total_issues: number
+  total_tasks: number
   total: number
   page: number
   page_size: number
@@ -109,12 +109,12 @@ export interface PaginatedResponse<T> {
 }
 
 export interface DashboardStats {
-  total_issues: number
+  total_tasks: number
   total: number
   by_status: Record<string, number>
   by_priority: Record<string, number>
   by_type: Record<string, number>
-  recent_issues: Task[]
+  recent_tasks: Task[]
 }
 
 export interface LoginResponse {