feat: unify project milestone and task editing with modals

src/pages/MilestoneDetailPage.tsx

@@ -1,9 +1,11 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import api from '@/services/api'
-import type { Milestone, MilestoneProgress, Task } from '@/types'
+import type { Milestone, MilestoneProgress, Task, Project, ProjectMember } from '@/types'
 import dayjs from 'dayjs'
 import CreateTaskModal from '@/components/CreateTaskModal'
+import MilestoneFormModal from '@/components/MilestoneFormModal'
+import { useAuth } from '@/hooks/useAuth'
 
 interface MilestoneTask {
   id: number
@@ -23,30 +25,39 @@ interface MilestoneTask {
 export default function MilestoneDetailPage() {
   const { id } = useParams()
   const navigate = useNavigate()
+  const { user } = useAuth()
   const [milestone, setMilestone] = useState<Milestone | null>(null)
+  const [project, setProject] = useState<Project | null>(null)
+  const [members, setMembers] = useState<ProjectMember[]>([])
   const [progress, setProgress] = useState<MilestoneProgress | null>(null)
   const [tasks, setTasks] = useState<MilestoneTask[]>([])
   const [supports, setSupports] = useState<Task[]>([])
   const [meetings, setMeetings] = useState<Task[]>([])
   const [activeTab, setActiveTab] = useState<'tasks' | 'supports' | 'meetings'>('tasks')
   const [showCreateTask, setShowCreateTask] = useState(false)
+  const [showEditMilestone, setShowEditMilestone] = useState(false)
   const [showCreateSupport, setShowCreateSupport] = useState(false)
   const [showCreateMeeting, setShowCreateMeeting] = useState(false)
   const [newTitle, setNewTitle] = useState('')
   const [newDesc, setNewDesc] = useState('')
   const [projectCode, setProjectCode] = useState('')
 
-  useEffect(() => {
+  const fetchMilestone = () => {
     api.get<Milestone>(`/milestones/${id}`).then(({ data }) => {
       setMilestone(data)
-      // Get project_code from project
       if (data.project_id) {
-        api.get(`/projects/${data.project_id}`).then(({ data: proj }) => {
+        api.get<Project>(`/projects/${data.project_id}`).then(({ data: proj }) => {
+          setProject(proj)
           setProjectCode(proj.project_code || '')
         })
+        api.get<ProjectMember[]>(`/projects/${data.project_id}/members`).then(({ data }) => setMembers(data)).catch(() => {})
       }
     })
     api.get<MilestoneProgress>(`/milestones/${id}/progress`).then(({ data }) => setProgress(data)).catch(() => {})
+  }
+
+  useEffect(() => {
+    fetchMilestone()
   }, [id])
 
   const refreshMilestoneItems = () => {
@@ -74,6 +85,17 @@ export default function MilestoneDetailPage() {
     refreshMilestoneItems()
   }
 
+  const currentMemberRole = useMemo(
+    () => members.find((m) => m.user_id === user?.id)?.role,
+    [members, user?.id]
+  )
+  const canEditMilestone = Boolean(milestone && project && user && (
+    user.is_admin ||
+    user.id === project.owner_id ||
+    user.id === milestone.created_by_id ||
+    currentMemberRole === 'admin'
+  ))
+
   const isProgressing = milestone?.status === 'progressing'
 
   if (!milestone) return <div className="loading">Loading...</div>
@@ -99,6 +121,7 @@ export default function MilestoneDetailPage() {
           {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>
+        {canEditMilestone && <button className="btn-transition" style={{ marginTop: 8 }} onClick={() => setShowEditMilestone(true)}>Edit Milestone</button>}
       </div>
 
       {milestone.description && (
@@ -131,7 +154,7 @@ export default function MilestoneDetailPage() {
 
       <div className="section">
         <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
-          {!isProgressing && (
+          {!isProgressing && canEditMilestone && (
             <>
               <button className="btn-primary" onClick={() => { setActiveTab('tasks'); setShowCreateTask(true) }}>+ Create Task</button>
               <button className="btn-primary" onClick={() => { setActiveTab('supports'); setShowCreateSupport(true) }}>+ Create Support</button>
@@ -141,6 +164,17 @@ export default function MilestoneDetailPage() {
           {isProgressing && <span className="text-dim">Milestone is in progress - cannot add new items</span>}
         </div>
 
+        <MilestoneFormModal
+          isOpen={showEditMilestone}
+          onClose={() => setShowEditMilestone(false)}
+          milestone={milestone}
+          lockProject
+          onSaved={(data) => {
+            setMilestone(data)
+            fetchMilestone()
+          }}
+        />
+
         <CreateTaskModal
           isOpen={showCreateTask}
           onClose={() => setShowCreateTask(false)}