Merge pull request 'feat: unify project milestone and task create/edit modals' (#7) from feat/modal-edit-permissions-20260316 into main

Reviewed-on: #7

Dockerfile

@@ -6,10 +6,11 @@ RUN npm install
 COPY . .
 RUN npm run build
 
-# Production stage — lightweight static server, no nginx
+# Runtime stage
 FROM node:20-alpine
 RUN npm install -g serve@14
 WORKDIR /app
-COPY --from=build /app/dist ./dist
+COPY --from=build /app ./
+ENV FRONTEND_DEV_MODE=0
 EXPOSE 3000
-CMD ["serve", "-s", "dist", "-l", "3000"]
+CMD ["sh", "-c", "if [ \"$FRONTEND_DEV_MODE\" = \"1\" ]; then npm run dev -- --host 0.0.0.0 --port 3000 --strictPort; else serve -s dist -l 3000; fi"]

src/App.tsx

@@ -7,7 +7,6 @@ import SetupWizardPage from '@/pages/SetupWizardPage'
 import DashboardPage from '@/pages/DashboardPage'
 import TasksPage from '@/pages/TasksPage'
 import TaskDetailPage from '@/pages/TaskDetailPage'
-import CreateTaskPage from '@/pages/CreateTaskPage'
 import ProjectsPage from '@/pages/ProjectsPage'
 import ProjectDetailPage from '@/pages/ProjectDetailPage'
 import MilestonesPage from '@/pages/MilestonesPage'
@@ -86,7 +85,6 @@ export default function App() {
           <Routes>
             <Route path="/" element={<DashboardPage />} />
             <Route path="/tasks" element={<TasksPage />} />
-            <Route path="/tasks/new" element={<CreateTaskPage />} />
             <Route path="/tasks/:id" element={<TaskDetailPage />} />
             <Route path="/projects" element={<ProjectsPage />} />
             <Route path="/projects/:id" element={<ProjectDetailPage />} />

src/components/CreateTaskModal.tsx

@@ -0,0 +1,270 @@
+import { useEffect, useMemo, useState } from 'react'
+import api from '@/services/api'
+import type { Milestone, Project, Task } from '@/types'
+
+const TASK_TYPES = [
+  { value: 'story', label: 'Story', subtypes: ['feature', 'improvement', 'refactor'] },
+  { value: 'issue', label: 'Issue', subtypes: ['infrastructure', 'performance', 'regression', 'security', 'user_experience', 'defect'] },
+  { value: 'task', label: 'Task', subtypes: ['defect'] },
+  { value: 'test', label: 'Test', subtypes: ['regression', 'security', 'smoke', 'stress'] },
+  { value: 'maintenance', label: 'Maintenance', subtypes: ['deploy', 'release'] },
+  { value: 'research', label: 'Research', subtypes: [] },
+  { value: 'review', label: 'Review', subtypes: ['code_review', 'decision_review', 'function_review'] },
+  { value: 'resolution', label: 'Resolution', subtypes: [] },
+]
+
+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
+}
+
+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,
+  milestone_id: milestoneId,
+  task_type: 'task',
+  task_subtype: '',
+  priority: 'medium',
+  tags: '',
+  reporter_id: 1,
+})
+
+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<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]
+  )
+  const subtypes = currentType.subtypes || []
+
+  const loadMilestones = async (projectId: number, preferredMilestoneId?: number) => {
+    if (!projectId) {
+      setMilestones([])
+      setForm((f) => ({ ...f, milestone_id: 0 }))
+      return
+    }
+
+    const { data } = await api.get<Milestone[]>(`/milestones?project_id=${projectId}`)
+    setMilestones(data)
+    const hasPreferred = preferredMilestoneId && data.some((m) => m.id === preferredMilestoneId)
+    const nextMilestoneId = hasPreferred ? preferredMilestoneId! : (data[0]?.id || 0)
+    setForm((f) => ({ ...f, milestone_id: nextMilestoneId }))
+  }
+
+  useEffect(() => {
+    if (!isOpen) return
+
+    const init = async () => {
+      const { data } = await api.get<Project[]>('/projects')
+      setProjects(data)
+
+      const chosenProjectId = task?.project_id || initialProjectId || data[0]?.id || 0
+      const chosenMilestoneId = task?.milestone_id || initialMilestoneId || 0
+
+      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, task])
+
+  const handleProjectChange = async (projectId: number) => {
+    setForm((f) => ({ ...f, project_id: projectId, milestone_id: 0 }))
+    await loadMilestones(projectId)
+  }
+
+  const handleTypeChange = (taskType: string) => {
+    setForm((f) => ({ ...f, task_type: taskType, 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.task_subtype) delete payload.task_subtype
+
+    setSaving(true)
+    try {
+      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)
+    }
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal task-create-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h3>{isEdit ? 'Edit Task' : 'Create Task'}</h3>
+          <button type="button" className="btn-secondary" onClick={onClose}>✕</button>
+        </div>
+
+        <form className="task-create-form" onSubmit={submit}>
+          <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>
+
+          <div className="task-create-grid">
+            <label>
+              Project
+              <select
+                data-testid="project-select"
+                value={form.project_id}
+                onChange={(e) => handleProjectChange(Number(e.target.value))}
+                disabled={lockProject}
+              >
+                {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) })}
+                disabled={lockMilestone}
+              >
+                {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
+                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>
+
+            <label>
+              Priority
+              <select
+                value={form.priority}
+                onChange={(e) => setForm({ ...form, priority: e.target.value })}
+              >
+                <option value="low">Low</option>
+                <option value="medium">Medium</option>
+                <option value="high">High</option>
+                <option value="critical">Critical</option>
+              </select>
+            </label>
+          </div>
+
+          {subtypes.length > 0 && (
+            <label>
+              Subtype
+              <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(/_/g, ' ')}</option>
+                ))}
+              </select>
+            </label>
+          )}
+
+          <label>
+            Tags
+            <input
+              value={form.tags}
+              onChange={(e) => setForm({ ...form, tags: e.target.value })}
+              placeholder="Comma separated"
+            />
+          </label>
+
+          <div className="modal-actions">
+            <button data-testid="create-task-button" type="submit" className="btn-primary" disabled={saving}>
+              {saving ? (isEdit ? 'Saving...' : 'Creating...') : (isEdit ? 'Save' : 'Create')}
+            </button>
+            <button type="button" className="btn-secondary" onClick={onClose} disabled={saving}>Cancel</button>
+          </div>
+        </form>
+      </div>
+    </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/index.css

@@ -113,11 +113,23 @@ dd { font-size: .9rem; }
 .comment-form textarea { width: 100%; min-height: 80px; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); resize: vertical; margin-bottom: 8px; }
 .comment-form button { padding: 8px 16px; background: var(--accent); color: #fff; border: none; border-radius: 6px; cursor: pointer; }
 
-/* Create Task form */
+/* Create Task form / modal */
-.create-task form { max-width: 600px; display: flex; flex-direction: column; gap: 14px; }
+.create-task form, .task-create-form { max-width: 600px; display: flex; flex-direction: column; gap: 14px; }
-.create-task label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--text-dim); }
+.create-task label, .task-create-form label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--text-dim); }
-.create-task input, .create-task textarea, .create-task select { padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: .95rem; }
+.create-task input, .create-task textarea, .create-task select,
-.create-task textarea { min-height: 100px; resize: vertical; }
+.task-create-form input, .task-create-form textarea, .task-create-form select {
+  padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: .95rem;
+}
+.create-task textarea, .task-create-form textarea { min-height: 100px; resize: vertical; }
+.task-create-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+.modal-overlay {
+  position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px;
+}
+.modal {
+  width: min(720px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px;
+}
+.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
+.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
 
 /* Project grid */
 .project-grid, .milestone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }

src/pages/MilestoneDetailPage.tsx

@@ -1,8 +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
@@ -22,69 +25,83 @@ 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 [newEffort, setNewEffort] = useState(5)
-  const [newTime, setNewTime] = useState('09:00')
   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(() => {})
-  }, [id])
+  }
 
   useEffect(() => {
+    fetchMilestone()
+  }, [id])
+
+  const refreshMilestoneItems = () => {
     if (!projectCode || !id) return
     api.get<MilestoneTask[]>(`/tasks/${projectCode}/${id}`).then(({ data }) => setTasks(data)).catch(() => {})
     api.get<Task[]>(`/supports/${projectCode}/${id}`).then(({ data }) => setSupports(data)).catch(() => {})
     api.get<Task[]>(`/meetings/${projectCode}/${id}`).then(({ data }) => setMeetings(data)).catch(() => {})
+  }
+
+  useEffect(() => {
+    refreshMilestoneItems()
   }, [projectCode, id])
 
-  const createItem = async (type: 'tasks' | 'supports' | 'meetings') => {
+  const createItem = async (type: 'supports' | 'meetings') => {
     if (!newTitle.trim() || !projectCode) return
-    const payload: any = {
+    const payload = {
       title: newTitle,
       description: newDesc || null,
     }
-    if (type === 'tasks') {
-      payload.estimated_effort = newEffort
-      payload.estimated_working_time = newTime
-    }
     await api.post(`/${type}/${projectCode}/${id}`, payload)
     setNewTitle('')
     setNewDesc('')
-    setShowCreateTask(false)
     setShowCreateSupport(false)
     setShowCreateMeeting(false)
-    // Refresh
+    refreshMilestoneItems()
-    api.get<MilestoneTask[]>(`/tasks/${projectCode}/${id}`).then(({ data }) => setTasks(data))
-    api.get<Task[]>(`/supports/${projectCode}/${id}`).then(({ data }) => setSupports(data))
-    api.get<Task[]>(`/meetings/${projectCode}/${id}`).then(({ data }) => setMeetings(data))
   }
 
+  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>
 
   const renderTaskRow = (t: MilestoneTask) => (
-    <tr key={t.id} className="clickable" onClick={() => navigate(`/milestones/${id}`)}>
+    <tr key={t.id} className="clickable" onClick={() => navigate(`/tasks/${t.id}`)}>
       <td>{t.task_code || t.id}</td>
       <td className="task-title">{t.title}</td>
       <td><span className={`badge status-${t.task_status || t.status}`}>{t.task_status || t.status}</span></td>
@@ -104,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 && (
@@ -136,17 +154,41 @@ 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('tasks'); setShowCreateTask(true) }}>+ Create Task</button>
-              <button className="btn-primary" onClick={() => { setActiveTab("supports"); setShowCreateSupport(true) }}>+ Create Support</button>
+              <button className="btn-primary" onClick={() => { setActiveTab('supports'); setShowCreateSupport(true) }}>+ Create Support</button>
-              <button className="btn-primary" onClick={() => { setActiveTab("meetings"); setShowCreateMeeting(true) }}>+ Schedule Meeting</button>
+              <button className="btn-primary" onClick={() => { setActiveTab('meetings'); setShowCreateMeeting(true) }}>+ Schedule Meeting</button>
             </>
           )}
           {isProgressing && <span className="text-dim">Milestone is in progress - cannot add new items</span>}
         </div>
 
-        {(showCreateTask || showCreateSupport || showCreateMeeting) && (
+        <MilestoneFormModal
+          isOpen={showEditMilestone}
+          onClose={() => setShowEditMilestone(false)}
+          milestone={milestone}
+          lockProject
+          onSaved={(data) => {
+            setMilestone(data)
+            fetchMilestone()
+          }}
+        />
+
+        <CreateTaskModal
+          isOpen={showCreateTask}
+          onClose={() => setShowCreateTask(false)}
+          initialProjectId={milestone.project_id}
+          initialMilestoneId={milestone.id}
+          lockProject
+          lockMilestone
+          onCreated={() => {
+            setActiveTab('tasks')
+            refreshMilestoneItems()
+          }}
+        />
+
+        {(showCreateSupport || showCreateMeeting) && (
           <div className="card" style={{ marginBottom: 16 }}>
             <input 
               placeholder="Title" 
@@ -160,19 +202,9 @@ 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-primary" onClick={() => createItem(activeTab as 'supports' | 'meetings')}>Create</button>
-              <button className="btn-back" onClick={() => { setShowCreateTask(false); setShowCreateSupport(false); setShowCreateMeeting(false) }}>Cancel</button>
+              <button className="btn-back" onClick={() => { setShowCreateSupport(false); setShowCreateMeeting(false) }}>Cancel</button>
             </div>
           </div>
         )}

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 ? (
-          <form className="inline-form" onSubmit={updateProject}>
-            <div style={{ fontWeight: 600 }}>{project.name}</div>
-            {project.project_code && <span className="badge">{project.project_code}</span>}
-            <select value={editForm.owner} onChange={(e) => setEditForm({ ...editForm, owner: e.target.value })}>
-              {users.map((u: any) => <option key={u.id} value={u.username}>{u.username} ({u.full_name})</option>)}
-            </select>
-            <input value={editForm.description} onChange={(e) => setEditForm({ ...editForm, description: e.target.value })} placeholder="Description" />
-            <input value={editForm.repo} onChange={(e) => setEditForm({ ...editForm, repo: e.target.value })} placeholder="Repository URL" />
-            <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>
+        <div className="text-dim">Owner: {project.owner_name || 'Unknown'}</div>
-            <button className="btn-transition" style={{ marginTop: 8 }} onClick={() => setEditing(true)}>Edit</button>
+        {canEditProject && (
-            <button className="btn-danger" style={{ marginLeft: 8 }} onClick={deleteProject}>Delete</button>
+          <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
-          </>
+            <button className="btn-transition" onClick={() => setShowProjectEdit(true)}>Edit</button>
+            <button className="btn-danger" onClick={deleteProject}>Delete</button>
+          </div>
         )}
       </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 }}>
                 {`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()}>
@@ -180,19 +157,6 @@ export default function ProjectDetailPage() {
           </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/pages/TasksPage.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import api from '@/services/api'
 import type { Task, PaginatedResponse } from '@/types'
+import CreateTaskModal from '@/components/CreateTaskModal'
 
 export default function TasksPage() {
   const [tasks, setTasks] = useState<Task[]>([])
@@ -10,6 +11,7 @@ export default function TasksPage() {
   const [totalPages, setTotalPages] = useState(1)
   const [statusFilter, setStatusFilter] = useState('')
   const [priorityFilter, setPriorityFilter] = useState('')
+  const [showCreateTask, setShowCreateTask] = useState(false)
   const navigate = useNavigate()
 
   const fetchTasks = () => {
@@ -33,9 +35,18 @@ export default function TasksPage() {
     <div className="tasks-page">
       <div className="page-header">
         <h2>📋 Tasks ({total})</h2>
-        <button className="btn-primary" onClick={() => navigate('/tasks/new')}>+ Create Task</button>
+        <button className="btn-primary" onClick={() => setShowCreateTask(true)}>+ Create Task</button>
       </div>
 
+      <CreateTaskModal
+        isOpen={showCreateTask}
+        onClose={() => setShowCreateTask(false)}
+        onCreated={() => {
+          setPage(1)
+          fetchTasks()
+        }}
+      />
+
       <div className="filters">
         <select value={statusFilter} onChange={(e) => { setStatusFilter(e.target.value); setPage(1) }}>
           <option value="">All statuses</option>

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[]

vite.config.ts

@@ -10,6 +10,7 @@ export default defineConfig({
   server: {
     host: '0.0.0.0',
     port: 3000,
+    allowedHosts: ['frontend', '127.0.0.1', 'localhost'],
     proxy: {
       '/api': {
         target: 'http://backend:8000',