feat: unify project milestone and task editing with modals

src/components/CreateTaskModal.tsx

@@ -17,13 +17,27 @@ type Props = {
   isOpen: boolean
   onClose: () => void
   onCreated?: (task: Task) => void | Promise<void>
+  onSaved?: (task: Task) => void | Promise<void>
   initialProjectId?: number
   initialMilestoneId?: number
   lockProject?: boolean
   lockMilestone?: boolean
+  task?: Task | null
 }
 
-const makeInitialForm = (projectId = 0, milestoneId = 0) => ({
+type FormState = {
+  title: string
+  description: string
+  project_id: number
+  milestone_id: number
+  task_type: string
+  task_subtype: string
+  priority: string
+  tags: string
+  reporter_id: number
+}
+
+const makeInitialForm = (projectId = 0, milestoneId = 0): FormState => ({
   title: '',
   description: '',
   project_id: projectId,
@@ -39,16 +53,19 @@ export default function CreateTaskModal({
   isOpen,
   onClose,
   onCreated,
+  onSaved,
   initialProjectId,
   initialMilestoneId,
   lockProject = false,
   lockMilestone = false,
+  task,
 }: Props) {
   const [projects, setProjects] = useState<Project[]>([])
   const [milestones, setMilestones] = useState<Milestone[]>([])
   const [saving, setSaving] = useState(false)
-  const [form, setForm] = useState(makeInitialForm(initialProjectId, initialMilestoneId))
+  const [form, setForm] = useState<FormState>(makeInitialForm(initialProjectId, initialMilestoneId))
 
+  const isEdit = Boolean(task)
   const currentType = useMemo(
     () => TASK_TYPES.find((t) => t.value === form.task_type) || TASK_TYPES[2],
     [form.task_type]
@@ -76,13 +93,26 @@ export default function CreateTaskModal({
       const { data } = await api.get<Project[]>('/projects')
       setProjects(data)
 
-      const chosenProjectId = initialProjectId || data[0]?.id || 0
+      const chosenProjectId = task?.project_id || initialProjectId || data[0]?.id || 0
-      setForm(makeInitialForm(chosenProjectId, initialMilestoneId || 0))
+      const chosenMilestoneId = task?.milestone_id || initialMilestoneId || 0
-      await loadMilestones(chosenProjectId, initialMilestoneId)
+
+      setForm(task ? {
+        title: task.title,
+        description: task.description || '',
+        project_id: task.project_id,
+        milestone_id: task.milestone_id || 0,
+        task_type: task.task_type,
+        task_subtype: task.task_subtype || '',
+        priority: task.priority,
+        tags: task.tags || '',
+        reporter_id: task.reporter_id,
+      } : makeInitialForm(chosenProjectId, chosenMilestoneId))
+
+      await loadMilestones(chosenProjectId, chosenMilestoneId)
     }
 
     init().catch(console.error)
-  }, [isOpen, initialProjectId, initialMilestoneId])
+  }, [isOpen, initialProjectId, initialMilestoneId, task])
 
   const handleProjectChange = async (projectId: number) => {
     setForm((f) => ({ ...f, project_id: projectId, milestone_id: 0 }))
@@ -105,8 +135,11 @@ export default function CreateTaskModal({
 
     setSaving(true)
     try {
-      const { data } = await api.post<Task>('/tasks', payload)
+      const { data } = isEdit
+        ? await api.patch<Task>(`/tasks/${task!.id}`, payload)
+        : await api.post<Task>('/tasks', payload)
       await onCreated?.(data)
+      await onSaved?.(data)
       onClose()
     } finally {
       setSaving(false)
@@ -119,7 +152,7 @@ export default function CreateTaskModal({
     <div className="modal-overlay" onClick={onClose}>
       <div className="modal task-create-modal" onClick={(e) => e.stopPropagation()}>
         <div className="modal-header">
-          <h3>Create Task</h3>
+          <h3>{isEdit ? 'Edit Task' : 'Create Task'}</h3>
           <button type="button" className="btn-secondary" onClick={onClose}>✕</button>
         </div>
 
@@ -226,7 +259,7 @@ export default function CreateTaskModal({
 
           <div className="modal-actions">
             <button data-testid="create-task-button" type="submit" className="btn-primary" disabled={saving}>
-              {saving ? 'Creating...' : 'Create'}
+              {saving ? (isEdit ? 'Saving...' : 'Creating...') : (isEdit ? 'Save' : 'Create')}
             </button>
             <button type="button" className="btn-secondary" onClick={onClose} disabled={saving}>Cancel</button>
           </div>

src/components/MilestoneFormModal.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useState } from 'react'
+import api from '@/services/api'
+import type { Milestone, Project } from '@/types'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  onSaved?: (milestone: Milestone) => void | Promise<void>
+  milestone?: Milestone | null
+  initialProjectId?: number
+  lockProject?: boolean
+}
+
+type FormState = {
+  title: string
+  description: string
+  project_id: number
+  status: string
+  due_date: string
+  planned_release_date: string
+}
+
+const emptyForm: FormState = {
+  title: '',
+  description: '',
+  project_id: 0,
+  status: 'open',
+  due_date: '',
+  planned_release_date: '',
+}
+
+const toDateInput = (value?: string | null) => (value ? String(value).slice(0, 10) : '')
+
+export default function MilestoneFormModal({ isOpen, onClose, onSaved, milestone, initialProjectId, lockProject = false }: Props) {
+  const [projects, setProjects] = useState<Project[]>([])
+  const [saving, setSaving] = useState(false)
+  const [form, setForm] = useState<FormState>(emptyForm)
+
+  useEffect(() => {
+    if (!isOpen) return
+
+    const init = async () => {
+      const { data } = await api.get<Project[]>('/projects')
+      setProjects(data)
+      const defaultProjectId = milestone?.project_id || initialProjectId || data[0]?.id || 0
+      setForm({
+        title: milestone?.title || '',
+        description: milestone?.description || '',
+        project_id: defaultProjectId,
+        status: milestone?.status || 'open',
+        due_date: toDateInput(milestone?.due_date),
+        planned_release_date: toDateInput(milestone?.planned_release_date),
+      })
+    }
+
+    init().catch(console.error)
+  }, [isOpen, milestone, initialProjectId])
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setSaving(true)
+    try {
+      const payload = {
+        title: form.title,
+        description: form.description || null,
+        project_id: form.project_id,
+        status: form.status,
+        due_date: form.due_date || null,
+        planned_release_date: form.planned_release_date || null,
+      }
+      if (milestone) {
+        const { data } = await api.patch<Milestone>(`/milestones/${milestone.id}`, payload)
+        await onSaved?.(data)
+      } else {
+        const { data } = await api.post<Milestone>('/milestones', payload)
+        await onSaved?.(data)
+      }
+      onClose()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h3>{milestone ? 'Edit Milestone' : 'Create Milestone'}</h3>
+          <button type="button" className="btn-secondary" onClick={onClose}>✕</button>
+        </div>
+
+        <form className="task-create-form" onSubmit={submit}>
+          <label>
+            Title
+            <input
+              data-testid="milestone-title-input"
+              required
+              placeholder="Milestone title"
+              value={form.title}
+              onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
+            />
+          </label>
+
+          <label>
+            Description
+            <textarea
+              data-testid="milestone-description-input"
+              placeholder="Description (optional)"
+              value={form.description}
+              onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
+            />
+          </label>
+
+          <div className="task-create-grid">
+            <label>
+              Project
+              <select value={form.project_id} onChange={(e) => setForm((f) => ({ ...f, project_id: Number(e.target.value) }))} disabled={lockProject}>
+                {projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
+              </select>
+            </label>
+
+            <label>
+              Status
+              <select value={form.status} onChange={(e) => setForm((f) => ({ ...f, 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>
+            </label>
+
+            <label>
+              Due date
+              <input type="date" value={form.due_date} onChange={(e) => setForm((f) => ({ ...f, due_date: e.target.value }))} />
+            </label>
+
+            <label>
+              Planned release date
+              <input type="date" value={form.planned_release_date} onChange={(e) => setForm((f) => ({ ...f, planned_release_date: e.target.value }))} />
+            </label>
+          </div>
+
+          <div className="modal-actions">
+            <button type="submit" className="btn-primary" disabled={saving}>{saving ? 'Saving...' : (milestone ? 'Save' : 'Create')}</button>
+            <button type="button" className="btn-secondary" onClick={onClose} disabled={saving}>Cancel</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

src/components/ProjectFormModal.tsx

@@ -0,0 +1,204 @@
+import { useEffect, useMemo, useState } from 'react'
+import api from '@/services/api'
+import type { Project, User } from '@/types'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  onSaved?: (project: Project) => void | Promise<void>
+  project?: Project | null
+}
+
+type FormState = {
+  name: string
+  owner_id: number
+  owner_name: string
+  description: string
+  repo: string
+  sub_projects: string[]
+  related_projects: string[]
+}
+
+const emptyForm: FormState = {
+  name: '',
+  owner_id: 1,
+  owner_name: '',
+  description: '',
+  repo: '',
+  sub_projects: [],
+  related_projects: [],
+}
+
+export default function ProjectFormModal({ isOpen, onClose, onSaved, project }: Props) {
+  const [users, setUsers] = useState<User[]>([])
+  const [projects, setProjects] = useState<Project[]>([])
+  const [saving, setSaving] = useState(false)
+  const [form, setForm] = useState<FormState>(emptyForm)
+
+  useEffect(() => {
+    if (!isOpen) return
+
+    const init = async () => {
+      const [{ data: userData }, { data: projectData }] = await Promise.all([
+        api.get<User[]>('/users'),
+        api.get<Project[]>('/projects'),
+      ])
+      setUsers(userData)
+      setProjects(projectData)
+
+      if (project) {
+        setForm({
+          name: project.name,
+          owner_id: project.owner_id,
+          owner_name: project.owner_name || '',
+          description: project.description || '',
+          repo: project.repo || '',
+          sub_projects: project.sub_projects || [],
+          related_projects: project.related_projects || [],
+        })
+      } else {
+        const defaultOwner = userData[0]
+        setForm({
+          ...emptyForm,
+          owner_id: defaultOwner?.id || 1,
+          owner_name: defaultOwner?.username || '',
+        })
+      }
+    }
+
+    init().catch(console.error)
+  }, [isOpen, project])
+
+  const selectableProjects = useMemo(
+    () => projects.filter((p) => p.id !== project?.id && p.project_code),
+    [projects, project?.id]
+  )
+
+  const handleMulti = (e: React.ChangeEvent<HTMLSelectElement>, field: 'sub_projects' | 'related_projects') => {
+    const values = Array.from(e.target.selectedOptions).map((o) => o.value)
+    setForm((f) => ({ ...f, [field]: values }))
+  }
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setSaving(true)
+    try {
+      if (project) {
+        const { data } = await api.patch<Project>(`/projects/${project.id}`, {
+          owner_name: form.owner_name,
+          description: form.description || null,
+          repo: form.repo || null,
+          sub_projects: form.sub_projects,
+          related_projects: form.related_projects,
+        })
+        await onSaved?.(data)
+      } else {
+        const { data } = await api.post<Project>('/projects', {
+          name: form.name,
+          owner_id: form.owner_id,
+          owner_name: form.owner_name,
+          description: form.description || null,
+          repo: form.repo || null,
+          sub_projects: form.sub_projects,
+          related_projects: form.related_projects,
+        })
+        await onSaved?.(data)
+      }
+      onClose()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h3>{project ? 'Edit Project' : 'Create Project'}</h3>
+          <button type="button" className="btn-secondary" onClick={onClose}>✕</button>
+        </div>
+
+        <form className="task-create-form" onSubmit={submit}>
+          {!project && (
+            <label>
+              Name
+              <input
+                data-testid="project-name-input"
+                required
+                placeholder="Project name"
+                value={form.name}
+                onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
+              />
+            </label>
+          )}
+
+          <label>
+            Owner
+            <select
+              data-testid="project-owner-select"
+              value={project ? form.owner_name : String(form.owner_id)}
+              onChange={(e) => {
+                const value = e.target.value
+                const selectedUser = users.find((u) => String(u.id) === value) || users.find((u) => u.username === value)
+                setForm((f) => ({
+                  ...f,
+                  owner_id: selectedUser?.id || f.owner_id,
+                  owner_name: selectedUser?.username || value,
+                }))
+              }}
+            >
+              {users.map((u) => (
+                <option key={u.id} value={project ? u.username : u.id}>{u.username} ({u.full_name || 'No name'})</option>
+              ))}
+            </select>
+          </label>
+
+          <label>
+            Description
+            <textarea
+              data-testid="project-description-input"
+              placeholder="Description (optional)"
+              value={form.description}
+              onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
+            />
+          </label>
+
+          <label>
+            Repository URL
+            <input
+              data-testid="project-repo-input"
+              placeholder="Repository URL (optional)"
+              value={form.repo}
+              onChange={(e) => setForm((f) => ({ ...f, repo: e.target.value }))}
+            />
+          </label>
+
+          <label>
+            Sub-projects
+            <select multiple value={form.sub_projects} onChange={(e) => handleMulti(e, 'sub_projects')}>
+              {selectableProjects.map((p) => (
+                <option key={p.id} value={p.project_code || ''}>{p.project_code} - {p.name}</option>
+              ))}
+            </select>
+          </label>
+
+          <label>
+            Related projects
+            <select multiple value={form.related_projects} onChange={(e) => handleMulti(e, 'related_projects')}>
+              {selectableProjects.map((p) => (
+                <option key={p.id} value={p.project_code || ''}>{p.project_code} - {p.name}</option>
+              ))}
+            </select>
+          </label>
+
+          <div className="modal-actions">
+            <button type="submit" className="btn-primary" disabled={saving}>{saving ? 'Saving...' : (project ? 'Save' : 'Create')}</button>
+            <button type="button" className="btn-secondary" onClick={onClose} disabled={saving}>Cancel</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

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)}

src/pages/MilestonesPage.tsx

@@ -3,22 +3,13 @@ import { useNavigate } from 'react-router-dom'
 import api from '@/services/api'
 import type { Milestone, Project } from '@/types'
 import dayjs from 'dayjs'
+import MilestoneFormModal from '@/components/MilestoneFormModal'
 
 export default function MilestonesPage() {
   const [milestones, setMilestones] = useState<Milestone[]>([])
   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: '',
-    planned_release_date: '',
-    status: 'open',
-    depend_on_milestones: [] as string[],
-    depend_on_tasks: [] as number[]
-  })
   const navigate = useNavigate()
 
   const fetchMilestones = () => {
@@ -27,37 +18,17 @@ export default function MilestonesPage() {
   }
 
   useEffect(() => {
-    api.get<Project[]>('/projects').then(({ data }) => {
+    api.get<Project[]>('/projects').then(({ data }) => setProjects(data))
-      setProjects(data)
-      if (data.length) setForm((f) => ({ ...f, project_id: data[0].id }))
-    })
   }, [])
 
   useEffect(() => { fetchMilestones() }, [projectFilter])
 
-  const createMilestone = async (e: React.FormEvent) => {
-    e.preventDefault()
-    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()
-  }
-
   return (
     <div className="milestones-page">
       <div className="page-header">
         <h2>🏁 Milestones ({milestones.length})</h2>
-        <button className="btn-primary" disabled={!projectFilter} onClick={() => setShowCreate(!showCreate)}>
+        <button className="btn-primary" disabled={!projectFilter} onClick={() => setShowCreate(true)}>
-          {showCreate ? 'Cancel' : '+ NewMilestones'}
+          + New Milestone
         </button>
       </div>
 
@@ -68,29 +39,13 @@ export default function MilestonesPage() {
         </select>
       </div>
 
-      {showCreate && (
+      <MilestoneFormModal
-        <form className="inline-form" onSubmit={createMilestone}>
+        isOpen={showCreate}
-          <input required placeholder="MilestonesTitle" value={form.title}
+        onClose={() => setShowCreate(false)}
-            onChange={(e) => setForm({ ...form, title: e.target.value })} />
+        initialProjectId={projectFilter ? Number(projectFilter) : undefined}
-          <input placeholder="Description (optional)" value={form.description}
+        lockProject={Boolean(projectFilter)}
-            onChange={(e) => setForm({ ...form, description: e.target.value })} />
+        onSaved={() => fetchMilestones()}
-          <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>
-      )}
 
       <div className="milestone-grid">
         {milestones.map((ms) => (

src/pages/ProjectDetailPage.tsx

@@ -1,81 +1,60 @@
-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 { Project, ProjectMember, Milestone } from '@/types'
 import dayjs from 'dayjs'
+import { useAuth } from '@/hooks/useAuth'
+import ProjectFormModal from '@/components/ProjectFormModal'
+import MilestoneFormModal from '@/components/MilestoneFormModal'
 
 export default function ProjectDetailPage() {
   const { id } = useParams()
   const navigate = useNavigate()
+  const { user } = useAuth()
   const [project, setProject] = useState<Project | null>(null)
   const [members, setMembers] = useState<ProjectMember[]>([])
   const [milestones, setMilestones] = useState<Milestone[]>([])
-  const [allProjects, setAllProjects] = useState<Project[]>([])
   const [showAddMember, setShowAddMember] = useState(false)
-  const [showAddMilestone, setShowAddMilestone] = useState(false)
+  const [showMilestoneModal, setShowMilestoneModal] = useState(false)
+  const [showProjectEdit, setShowProjectEdit] = useState(false)
   const [newMemberUserId, setNewMemberUserId] = useState(1)
   const [newMemberRole, setNewMemberRole] = useState('developer')
-  const [newMilestoneTitle, setNewMilestoneTitle] = useState('')
   const [users, setUsers] = useState<any[]>([])
   const [roles, setRoles] = useState<any[]>([])
-  const [editing, setEditing] = useState(false)
-  const [editForm, setEditForm] = useState({ owner: '', repo: '', description: '', sub_projects: [] as string[], related_projects: [] as string[] })
 
-  useEffect(() => {
+  const fetchProject = () => {
-    api.get<Project>(`/projects/${id}`).then(({ data }) => {
+    api.get<Project>(`/projects/${id}`).then(({ data }) => setProject(data))
-      setProject(data)
-      setEditForm({
-        owner: data.owner_name || data.owner || '',
-        repo: data.repo || '',
-        description: data.description || '',
-        sub_projects: data.sub_projects || [],
-        related_projects: data.related_projects || [],
-      })
-    })
     api.get<ProjectMember[]>(`/projects/${id}/members`).then(({ data }) => setMembers(data))
     api.get<Milestone[]>(`/milestones?project_id=${id}`).then(({ data }) => setMilestones(data))
-    api.get<Project[]>('/projects').then(({ data }) => setAllProjects(data))
+  }
+
+  useEffect(() => {
+    fetchProject()
     api.get('/users').then(r => setUsers(r.data)).catch(() => {})
     api.get('/roles').then(r => setRoles(r.data)).catch(() => {})
-    api.get('/users').then(r => setUsers(r.data)).catch(() => {})
   }, [id])
 
-  const handleMulti = (e: React.ChangeEvent<HTMLSelectElement>, field: 'sub_projects' | 'related_projects') => {
+  const currentMemberRole = useMemo(
-    const values = Array.from(e.target.selectedOptions).map((o) => o.value)
+    () => members.find((m) => m.user_id === user?.id)?.role,
-    setEditForm({ ...editForm, [field]: values })
+    [members, user?.id]
-  }
+  )
-
+  const canEditProject = Boolean(project && user && (user.is_admin || user.id === project.owner_id || currentMemberRole === 'admin'))
-  const updateProject = async (e: React.FormEvent) => {
-    e.preventDefault()
-    const { data } = await api.patch<Project>(`/projects/${id}`, editForm)
-    setProject(data)
-    setEditing(false)
-  }
 
   const addMember = async () => {
     if (!newMemberUserId) return
     await api.post(`/projects/${id}/members`, { user_id: newMemberUserId, role: newMemberRole })
     setShowAddMember(false)
-    api.get<ProjectMember[]>(`/projects/${id}/members`).then(({ data }) => setMembers(data))
+    fetchProject()
   }
 
   const removeMember = async (userId: number, role: string) => {
-    // Prevent removing owner
     if (role === 'admin') {
       alert('Cannot remove project owner (admin)')
       return
     }
     if (!confirm('Remove this member?')) return
     await api.delete(`/projects/${id}/members/${userId}`)
-    api.get<ProjectMember[]>(`/projects/${id}/members`).then(({ data }) => setMembers(data))
+    fetchProject()
-  }
-
-  const addMilestone = async () => {
-    if (!newMilestoneTitle.trim()) return
-    await api.post(`/projects/${id}/milestones`, { title: newMilestoneTitle, status: 'open' })
-    setShowAddMilestone(false)
-    setNewMilestoneTitle('')
-    api.get<Milestone[]>(`/projects/${id}/milestones`).then(({ data }) => setMilestones(data)).catch(() => {})
   }
 
   const deleteProject = async () => {
@@ -90,59 +69,36 @@ export default function ProjectDetailPage() {
 
   if (!project) return <div className="loading">Loading...</div>
 
-  const selectableProjects = allProjects.filter((p) => p.id !== project.id && p.project_code)
-
   return (
     <div className="project-detail">
       <button className="btn-back" onClick={() => navigate('/projects')}>← Back to projects</button>
 
       <div className="task-header">
-        {editing ? (
+        <h2>📁 {project.name} {project.project_code && <span className="badge">{project.project_code}</span>}</h2>
-          <form className="inline-form" onSubmit={updateProject}>
+        <p style={{ color: 'var(--text-dim)', marginTop: 4 }}>{project.description || 'No description'}</p>
-            <div style={{ fontWeight: 600 }}>{project.name}</div>
+        {project.repo && <p style={{ color: 'var(--text-dim)', marginTop: 4 }}>📦 {project.repo}</p>}
-            {project.project_code && <span className="badge">{project.project_code}</span>}
+        <div className="text-dim">Owner: {project.owner_name || 'Unknown'}</div>
-            <select value={editForm.owner} onChange={(e) => setEditForm({ ...editForm, owner: e.target.value })}>
+        {canEditProject && (
-              {users.map((u: any) => <option key={u.id} value={u.username}>{u.username} ({u.full_name})</option>)}
+          <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
-            </select>
+            <button className="btn-transition" onClick={() => setShowProjectEdit(true)}>Edit</button>
-            <input value={editForm.description} onChange={(e) => setEditForm({ ...editForm, description: e.target.value })} placeholder="Description" />
+            <button className="btn-danger" onClick={deleteProject}>Delete</button>
-            <input value={editForm.repo} onChange={(e) => setEditForm({ ...editForm, repo: e.target.value })} placeholder="Repository URL" />
+          </div>
-            <label>Sub-projects
-              <select multiple value={editForm.sub_projects} onChange={(e) => handleMulti(e, 'sub_projects')}>
-                {selectableProjects.map((p) => (
-                  <option key={p.id} value={p.project_code || ''}>{p.project_code || p.name}</option>
-                ))}
-              </select>
-            </label>
-            <label>Related projects
-              <select multiple value={editForm.related_projects} onChange={(e) => handleMulti(e, 'related_projects')}>
-                {selectableProjects.map((p) => (
-                  <option key={p.id} value={p.project_code || ''}>{p.project_code || p.name}</option>
-                ))}
-              </select>
-            </label>
-            <button type="submit" className="btn-primary">Save</button>
-            <button type="button" className="btn-back" onClick={() => setEditing(false)}>Cancel</button>
-          </form>
-        ) : (
-          <>
-            <h2>📁 {project.name} {project.project_code && <span className="badge">{project.project_code}</span>}</h2>
-            <p style={{ color: 'var(--text-dim)', marginTop: 4 }}>{project.description || 'No description'}</p>
-            {project.repo && <p style={{ color: 'var(--text-dim)', marginTop: 4 }}>📦 {project.repo}</p>}
-            <div className="text-dim">Owner: {project.owner_name || project.owner || "Unknown"}</div>
-            <button className="btn-transition" style={{ marginTop: 8 }} onClick={() => setEditing(true)}>Edit</button>
-            <button className="btn-danger" style={{ marginLeft: 8 }} onClick={deleteProject}>Delete</button>
-          </>
         )}
       </div>
 
       <div className="section">
-        <h3>Members ({members.length}) <button className="btn-sm" onClick={() => setShowAddMember(true)}>+ Add</button></h3>
+        <h3>Members ({members.length}) {canEditProject && <button className="btn-sm" onClick={() => setShowAddMember(true)}>+ Add</button>}</h3>
         {members.length > 0 ? (
           <div className="member-list">
             {members.map((m) => (
-              <span key={m.id} className="badge" style={{marginRight: 8}}>
+              <span key={m.id} className="badge" style={{ marginRight: 8 }}>
                 {`User #${m.user_id} (${m.role})`}
-                <button onClick={(e) => { e.stopPropagation(); removeMember(m.user_id, m.role) }} style={{marginLeft: 8, background: 'none', border: 'none', color: 'red', cursor: 'pointer'}}>×</button>
+                {canEditProject && (
+                  <button
+                    onClick={(e) => { e.stopPropagation(); removeMember(m.user_id, m.role) }}
+                    style={{ marginLeft: 8, background: 'none', border: 'none', color: 'red', cursor: 'pointer' }}
+                  >×</button>
+                )}
               </span>
             ))}
           </div>
@@ -152,7 +108,10 @@ export default function ProjectDetailPage() {
       </div>
 
       <div className="section">
-        <h3>Milestones ({milestones.length}) <button className="btn-sm" onClick={() => setShowAddMilestone(true)}>+ New</button></h3>
+        <h3>
+          Milestones ({milestones.length})
+          {canEditProject && <button className="btn-sm" onClick={() => setShowMilestoneModal(true)}>+ New</button>}
+        </h3>
         {milestones.map((ms) => (
           <div key={ms.id} className="milestone-item" onClick={() => navigate(`/milestones/${ms.id}`)}>
             <span className={`badge status-${ms.status === 'open' ? 'open' : ms.status === 'closed' ? 'closed' : 'in_progress'}`}>{ms.status}</span>
@@ -163,6 +122,24 @@ export default function ProjectDetailPage() {
         {milestones.length === 0 && <p className="empty">No milestones</p>}
       </div>
 
+      <ProjectFormModal
+        isOpen={showProjectEdit}
+        onClose={() => setShowProjectEdit(false)}
+        project={project}
+        onSaved={(data) => {
+          setProject(data)
+          fetchProject()
+        }}
+      />
+
+      <MilestoneFormModal
+        isOpen={showMilestoneModal}
+        onClose={() => setShowMilestoneModal(false)}
+        initialProjectId={project.id}
+        lockProject
+        onSaved={() => fetchProject()}
+      />
+
       {showAddMember && (
         <div className="modal-overlay" onClick={() => setShowAddMember(false)}>
           <div className="modal" onClick={e => e.stopPropagation()}>
@@ -173,26 +150,13 @@ export default function ProjectDetailPage() {
             <select value={newMemberRole} onChange={e => setNewMemberRole(e.target.value)}>
               {roles.map(r => <option key={r.id} value={r.name}>{r.name}</option>)}
             </select>
-            <div style={{marginTop: 10}}>
+            <div style={{ marginTop: 10 }}>
               <button className="btn-primary" onClick={addMember}>Add</button>
               <button className="btn-back" onClick={() => setShowAddMember(false)}>Cancel</button>
             </div>
           </div>
         </div>
       )}
-
-      {showAddMilestone && (
-        <div className="modal-overlay" onClick={() => setShowAddMilestone(false)}>
-          <div className="modal" onClick={e => e.stopPropagation()}>
-            <h3>New Milestone</h3>
-            <input value={newMilestoneTitle} onChange={e => setNewMilestoneTitle(e.target.value)} placeholder="Milestone title" />
-            <div style={{marginTop: 10}}>
-              <button className="btn-primary" onClick={addMilestone}>Create</button>
-              <button className="btn-back" onClick={() => setShowAddMilestone(false)}>Cancel</button>
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   )
 }

src/pages/ProjectsPage.tsx

@@ -1,14 +1,13 @@
-import { useState, useEffect, useMemo } from 'react'
+import { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import api from '@/services/api'
 import type { Project } from '@/types'
 import dayjs from 'dayjs'
+import ProjectFormModal from '@/components/ProjectFormModal'
 
 export default function ProjectsPage() {
   const [projects, setProjects] = useState<Project[]>([])
-  const [users, setUsers] = useState<any[]>([])
   const [showCreate, setShowCreate] = useState(false)
-  const [form, setForm] = useState({ name: '', description: '', owner_id: 1, repo: '', sub_projects: [] as string[], related_projects: [] as string[] })
   const navigate = useNavigate()
 
   const fetchProjects = () => {
@@ -16,70 +15,19 @@ export default function ProjectsPage() {
   }
 
   useEffect(() => { fetchProjects() }, [])
-  useEffect(() => {
-    api.get('/users').then(({ data }) => setUsers(data)).catch(console.error)
-  }, [])
-
-  const projectOptions = useMemo(() => projects.filter(p => p.project_code), [projects])
-
-  const handleMulti = (e: React.ChangeEvent<HTMLSelectElement>, field: 'sub_projects' | 'related_projects') => {
-    const values = Array.from(e.target.selectedOptions).map((o) => o.value)
-    setForm({ ...form, [field]: values })
-  }
-
-  const createProject = async (e: React.FormEvent) => {
-    e.preventDefault()
-    await api.post('/projects', form)
-    setForm({ name: '', description: '', owner_id: 1, repo: '', sub_projects: [], related_projects: [] })
-    setShowCreate(false)
-    fetchProjects()
-  }
 
   return (
     <div className="projects-page">
       <div className="page-header">
         <h2>📁 Projects ({projects.length})</h2>
-        <button className="btn-primary" onClick={() => setShowCreate(!showCreate)}>
+        <button className="btn-primary" onClick={() => setShowCreate(true)}>+ New</button>
-          {showCreate ? 'Cancel' : '+ New'}
-        </button>
       </div>
 
-      {showCreate && (
+      <ProjectFormModal
-        <form className="inline-form" onSubmit={createProject}>
+        isOpen={showCreate}
-          <input
+        onClose={() => setShowCreate(false)}
-            required placeholder="Project name" value={form.name}
+        onSaved={() => fetchProjects()}
-            onChange={(e) => setForm({ ...form, name: e.target.value })}
+      />
-          />
-          <select
-            value={form.owner_id}
-            onChange={(e) => setForm({ ...form, owner_id: Number(e.target.value) })}
-            style={{width:'100%',padding:'8px',marginBottom:'8px'}}
-          >
-            {users.map(u => <option key={u.id} value={u.id}>{u.username} ({u.full_name})</option>)}
-          </select>
-          <input
-            placeholder="Description (optional)" value={form.description}
-            onChange={(e) => setForm({ ...form, description: e.target.value })}
-          />
-          <input
-            placeholder="Repository URL (optional)" value={form.repo}
-            onChange={(e) => setForm({ ...form, repo: e.target.value })}
-          />
-          <label>Sub-projects (Ctrl+Click to select multiple)</label>
-          <select multiple value={form.sub_projects} onChange={(e) => handleMulti(e, 'sub_projects')} style={{height:80}}>
-            {projectOptions.map((p) => (
-              <option key={p.id} value={p.project_code || ''}>{p.project_code} - {p.name}</option>
-            ))}
-          </select>
-          <label>Related Projects (Ctrl+Click to select multiple)</label>
-          <select multiple value={form.related_projects} onChange={(e) => handleMulti(e, 'related_projects')} style={{height:80}}>
-            {projectOptions.map((p) => (
-              <option key={p.id} value={p.project_code || ''}>{p.project_code} - {p.name}</option>
-            ))}
-          </select>
-          <button type="submit" className="btn-primary">Create</button>
-        </form>
-      )}
 
       <div className="project-grid">
         {projects.map((p) => (

src/pages/TaskDetailPage.tsx

@@ -1,18 +1,37 @@
-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 { Task, Comment } from '@/types'
+import type { Task, Comment, Project, ProjectMember, Milestone } from '@/types'
 import dayjs from 'dayjs'
+import { useAuth } from '@/hooks/useAuth'
+import CreateTaskModal from '@/components/CreateTaskModal'
 
 export default function TaskDetailPage() {
   const { id } = useParams()
   const navigate = useNavigate()
+  const { user } = useAuth()
   const [task, setTask] = useState<Task | null>(null)
+  const [milestone, setMilestone] = useState<Milestone | null>(null)
+  const [project, setProject] = useState<Project | null>(null)
+  const [members, setMembers] = useState<ProjectMember[]>([])
   const [comments, setComments] = useState<Comment[]>([])
   const [newComment, setNewComment] = useState('')
+  const [showEditTask, setShowEditTask] = useState(false)
+
+  const refreshTask = async () => {
+    const { data } = await api.get<Task>(`/tasks/${id}`)
+    setTask(data)
+    if (data.project_id) {
+      api.get<Project>(`/projects/${data.project_id}`).then(({ data }) => setProject(data)).catch(() => {})
+      api.get<ProjectMember[]>(`/projects/${data.project_id}/members`).then(({ data }) => setMembers(data)).catch(() => {})
+    }
+    if (data.milestone_id) {
+      api.get<Milestone>(`/milestones/${data.milestone_id}`).then(({ data }) => setMilestone(data)).catch(() => {})
+    }
+  }
 
   useEffect(() => {
-    api.get<Task>(`/tasks/${id}`).then(({ data }) => setTask(data))
+    refreshTask().catch(console.error)
     api.get<Comment[]>(`/tasks/${id}/comments`).then(({ data }) => setComments(data))
   }, [id])
 
@@ -26,17 +45,27 @@ export default function TaskDetailPage() {
 
   const transition = async (newStatus: string) => {
     await api.post(`/tasks/${id}/transition?new_status=${newStatus}`)
-    const { data } = await api.get<Task>(`/tasks/${id}`)
+    await refreshTask()
-    setTask(data)
   }
 
+  const currentMemberRole = useMemo(
+    () => members.find((m) => m.user_id === user?.id)?.role,
+    [members, user?.id]
+  )
+  const canEditTask = Boolean(task && project && user && (
+    user.is_admin ||
+    user.id === project.owner_id ||
+    user.id === task.created_by_id ||
+    user.id === milestone?.created_by_id ||
+    currentMemberRole === 'admin'
+  ))
+
   if (!task) return <div className="loading">Loading...</div>
 
   const statusActions: Record<string, string[]> = {
-    open: ['in_progress', 'blocked'],
+    open: ['progressing', 'closed'],
-    in_progress: ['resolved', 'blocked'],
+    pending: ['progressing', 'closed'],
-    blocked: ['open', 'in_progress'],
+    progressing: ['pending', 'closed'],
-    resolved: ['closed', 'open'],
     closed: ['open'],
   }
 
@@ -52,8 +81,16 @@ export default function TaskDetailPage() {
           <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>
+        {canEditTask && <button className="btn-transition" style={{ marginTop: 8 }} onClick={() => setShowEditTask(true)}>Edit Task</button>}
       </div>
 
+      <CreateTaskModal
+        isOpen={showEditTask}
+        onClose={() => setShowEditTask(false)}
+        task={task}
+        onSaved={(data) => setTask(data)}
+      />
+
       <div className="task-body">
         <div className="section">
           <h3>Description</h3>
@@ -64,8 +101,9 @@ export default function TaskDetailPage() {
           <h3>Details</h3>
           <dl>
             <dt>Created</dt><dd>{dayjs(task.created_at).format('YYYY-MM-DD HH:mm')}</dd>
-            {task.due_date && <><dt>Due date</dt><dd>{dayjs(task.due_date).format('YYYY-MM-DD')}</dd></>}
             {task.updated_at && <><dt>Updated</dt><dd>{dayjs(task.updated_at).format('YYYY-MM-DD HH:mm')}</dd></>}
+            {project && <><dt>Project</dt><dd>{project.name}</dd></>}
+            {milestone && <><dt>Milestone</dt><dd>{milestone.title}</dd></>}
           </dl>
         </div>
 

src/types/index.ts

@@ -35,14 +35,15 @@ export interface Task {
   description: string | null
   task_type: 'issue' | 'maintenance' | 'research' | 'review' | 'story' | 'test' | 'resolution' | 'task'
   task_subtype: string | null
-  status: 'open' | 'in_progress' | 'resolved' | 'closed' | 'blocked'
+  status: 'open' | 'pending' | 'progressing' | 'closed'
   priority: 'low' | 'medium' | 'high' | 'critical'
   project_id: number
+  milestone_id: number | null
   reporter_id: number
   assignee_id: number | null
+  created_by_id: number | null
   tags: string | null
   due_date: string | null
-  milestone_id: number | null
   resolution_summary: string | null
   positions: string | null
   pending_matters: string | null
@@ -65,6 +66,7 @@ export interface Milestone {
   description: string | null
   status: 'open' | 'pending' | 'deferred' | 'progressing' | 'closed'
   project_id: number
+  created_by_id: number | null
   due_date: string | null
   planned_release_date: string | null
   depend_on_milestones: string[]