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

src/pages/ProjectDetailPage.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import api from '@/services/api'
-import type { Project, ProjectMember, Issue, Milestone, PaginatedResponse } from '@/types'
+import type { Project, ProjectMember, Milestone } from '@/types'
 import dayjs from 'dayjs'
 
 export default function ProjectDetailPage() {
@@ -9,21 +9,31 @@ export default function ProjectDetailPage() {
   const navigate = useNavigate()
   const [project, setProject] = useState<Project | null>(null)
   const [members, setMembers] = useState<ProjectMember[]>([])
-  const [issues, setIssues] = useState<Issue[]>([])
   const [milestones, setMilestones] = useState<Milestone[]>([])
+  const [allProjects, setAllProjects] = useState<Project[]>([])
   const [editing, setEditing] = useState(false)
-  const [editForm, setEditForm] = useState({ name: '', description: '' })
+  const [editForm, setEditForm] = useState({ owner: '', description: '', sub_projects: [] as string[], related_projects: [] as string[] })
 
   useEffect(() => {
     api.get<Project>(`/projects/${id}`).then(({ data }) => {
       setProject(data)
-      setEditForm({ name: data.name, description: data.description || '' })
+      setEditForm({
+        owner: data.owner || '',
+        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<PaginatedResponse<Issue>>(`/issues?project_id=${id}&page_size=10`).then(({ data }) => setIssues(data.items))
     api.get<Milestone[]>(`/milestones?project_id=${id}`).then(({ data }) => setMilestones(data))
+    api.get<Project[]>('/projects').then(({ data }) => setAllProjects(data))
   }, [id])
 
+  const handleMulti = (e: React.ChangeEvent<HTMLSelectElement>, field: 'sub_projects' | 'related_projects') => {
+    const values = Array.from(e.target.selectedOptions).map((o) => o.value)
+    setEditForm({ ...editForm, [field]: values })
+  }
+
   const updateProject = async (e: React.FormEvent) => {
     e.preventDefault()
     const { data } = await api.patch<Project>(`/projects/${id}`, editForm)
@@ -31,8 +41,16 @@ export default function ProjectDetailPage() {
     setEditing(false)
   }
 
+  const deleteProject = async () => {
+    if (!confirm('Delete this project?')) return
+    await api.delete(`/projects/${id}`)
+    navigate('/projects')
+  }
+
   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>
@@ -40,16 +58,34 @@ export default function ProjectDetailPage() {
       <div className="issue-header">
         {editing ? (
           <form className="inline-form" onSubmit={updateProject}>
-            <input value={editForm.name} onChange={(e) => setEditForm({ ...editForm, name: e.target.value })} required />
+            <div style={{ fontWeight: 600 }}>{project.name}</div>
+            {project.project_code && <span className="badge">{project.project_code}</span>}
+            <input value={editForm.owner} onChange={(e) => setEditForm({ ...editForm, owner: e.target.value })} placeholder="Owner" required />
             <input value={editForm.description} onChange={(e) => setEditForm({ ...editForm, description: e.target.value })} placeholder="Description" />
+            <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}</h2>
+            <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>
+            <div className="text-dim">Owner: {project.owner}</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>
@@ -78,28 +114,6 @@ export default function ProjectDetailPage() {
         ))}
         {milestones.length === 0 && <p className="empty">No milestones</p>}
       </div>
-
-      <div className="section">
-        <div className="page-header">
-          <h3>Recent Issues</h3>
-          <button className="btn-primary" onClick={() => navigate('/issues/new')}>+ New</button>
-        </div>
-        <table>
-          <thead>
-            <tr><th>#</th><th>Title</th><th>Status</th><th>Priority</th></tr>
-          </thead>
-          <tbody>
-            {issues.map((i) => (
-              <tr key={i.id} className="clickable" onClick={() => navigate(`/issues/${i.id}`)}>
-                <td>{i.id}</td>
-                <td className="issue-title">{i.title}</td>
-                <td><span className={`badge status-${i.status}`}>{i.status}</span></td>
-                <td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
     </div>
   )
 }