fix: project form - owner dropdown, sub/related projects multi-select

src/pages/ProjectsPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import api from '@/services/api'
 import type { Project } from '@/types'
@@ -6,8 +6,9 @@ import dayjs from 'dayjs'
 
 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 })
+  const [form, setForm] = useState({ name: '', description: '', owner_id: 1, sub_projects: [] as string[], related_projects: [] as string[] })
   const navigate = useNavigate()
 
   const fetchProjects = () => {
@@ -15,11 +16,21 @@ 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 })
+    setForm({ name: '', description: '', owner_id: 1, sub_projects: [], related_projects: [] })
     setShowCreate(false)
     fetchProjects()
   }
@@ -29,7 +40,7 @@ export default function ProjectsPage() {
       <div className="page-header">
         <h2>📁 Projects ({projects.length})</h2>
         <button className="btn-primary" onClick={() => setShowCreate(!showCreate)}>
-          {showCreate ? 'Cancel' : '+ NewProjects'}
+          {showCreate ? 'Cancel' : '+ New'}
         </button>
       </div>
 
@@ -39,10 +50,29 @@ export default function ProjectsPage() {
             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="ProjectsDescription (optional)" value={form.description}
+            placeholder="Description (optional)" value={form.description}
             onChange={(e) => setForm({ ...form, description: 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>
       )}
@@ -50,7 +80,7 @@ export default function ProjectsPage() {
       <div className="project-grid">
         {projects.map((p) => (
           <div key={p.id} className="project-card" onClick={() => navigate(`/projects/${p.id}`)}>
-            <h3>{p.name}</h3>{p.project_code && <span className=badge style={{ marginLeft: 8 }}>{p.project_code}</span>}
+            <h3>{p.name}</h3>{p.project_code && <span className="badge" style={{ marginLeft: 8 }}>{p.project_code}</span>}
             <p className="project-desc">{p.description || 'No description'}</p>
             <div className="project-meta">
               <span>Created {dayjs(p.created_at).format('YYYY-MM-DD')}</span>