feat: unify project milestone and task editing with modals

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)}>
-          {showCreate ? 'Cancel' : '+ New'}
-        </button>
+        <button className="btn-primary" onClick={() => setShowCreate(true)}>+ New</button>
       </div>
 
-      {showCreate && (
-        <form className="inline-form" onSubmit={createProject}>
-          <input
-            required placeholder="Project name" value={form.name}
-            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>
-      )}
+      <ProjectFormModal
+        isOpen={showCreate}
+        onClose={() => setShowCreate(false)}
+        onSaved={() => fetchProjects()}
+      />
 
       <div className="project-grid">
         {projects.map((p) => (