feat: add Add Member and New Milestone buttons in ProjectDetail

src/pages/ProjectDetailPage.tsx

@@ -11,6 +11,13 @@ export default function ProjectDetailPage() {
   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 [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: '', description: '', sub_projects: [] as string[], related_projects: [] as string[] })
 
@@ -27,6 +34,8 @@ export default function ProjectDetailPage() {
     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))
+    api.get('/users').then(r => setUsers(r.data)).catch(() => {})
+    api.get('/roles').then(r => setRoles(r.data)).catch(() => {})
   }, [id])
 
   const handleMulti = (e: React.ChangeEvent<HTMLSelectElement>, field: 'sub_projects' | 'related_projects') => {
@@ -41,6 +50,21 @@ export default function ProjectDetailPage() {
     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))
+  }
+
+  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 () => {
     if (!confirm('Delete this project?')) return
     await api.delete(`/projects/${id}`)
@@ -91,7 +115,7 @@ export default function ProjectDetailPage() {
       </div>
 
       <div className="section">
-        <h3>Members ({members.length})</h3>
+        <h3>Members ({members.length}) <button className="btn-sm" onClick={() => setShowAddMember(true)}>+ Add</button></h3>
         {members.length > 0 ? (
           <div className="member-list">
             {members.map((m) => (
@@ -104,7 +128,7 @@ export default function ProjectDetailPage() {
       </div>
 
       <div className="section">
-        <h3>Milestones ({milestones.length})</h3>
+        <h3>Milestones ({milestones.length}) <button className="btn-sm" onClick={() => setShowAddMilestone(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 === 'active' ? 'open' : ms.status === 'closed' ? 'closed' : 'in_progress'}`}>{ms.status}</span>
@@ -114,6 +138,37 @@ export default function ProjectDetailPage() {
         ))}
         {milestones.length === 0 && <p className="empty">No milestones</p>}
       </div>
+
+      {showAddMember && (
+        <div className="modal-overlay" onClick={() => setShowAddMember(false)}>
+          <div className="modal" onClick={e => e.stopPropagation()}>
+            <h3>Add Member</h3>
+            <select value={newMemberUserId} onChange={e => setNewMemberUserId(Number(e.target.value))}>
+              {users.map(u => <option key={u.id} value={u.id}>{u.username} ({u.full_name})</option>)}
+            </select>
+            <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}}>
+              <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>
   )
 }