Merge pull request 'feat/repo-edit' (#4) from feat/repo-edit into main

Reviewed-on: #4

src/index.css

@@ -201,3 +201,12 @@ dd { font-size: .9rem; }
 .btn-secondary { background: none; border: 1px solid var(--border); color: var(--text); padding: 6px 12px; border-radius: 6px; cursor: pointer; }
 .btn-danger { background: var(--danger); color: #fff; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; }
 .btn-danger:hover { opacity: .9; }
+
+
+/* Tabs */
+.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
+.tab { background: none; border: none; padding: 10px 16px; color: var(--text-dim); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
+.tab:hover { color: var(--text); }
+.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+.tab-content { margin-top: 16px; }
+

src/pages/MilestoneDetailPage.tsx

@@ -4,30 +4,105 @@ import api from '@/services/api'
 import type { Milestone, MilestoneProgress, Issue } from '@/types'
 import dayjs from 'dayjs'
 
+interface Task {
+  id: number
+  title: string
+  description?: string
+  status: string
+  task_code?: string
+  task_status?: string
+  estimated_effort?: number
+  estimated_working_time?: string
+  started_on?: string
+  finished_on?: string
+  assignee_id?: number
+  created_at: string
+}
+
 export default function MilestoneDetailPage() {
   const { id } = useParams()
   const navigate = useNavigate()
   const [milestone, setMilestone] = useState<Milestone | null>(null)
   const [progress, setProgress] = useState<MilestoneProgress | null>(null)
-  const [issues, setIssues] = useState<Issue[]>([])
+  const [tasks, setTasks] = useState<Task[]>([])
+  const [supports, setSupports] = useState<Issue[]>([])
+  const [meetings, setMeetings] = useState<Issue[]>([])
+  const [activeTab, setActiveTab] = useState<'tasks' | 'supports' | 'meetings'>('tasks')
+  const [showCreateTask, setShowCreateTask] = 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(() => {
-    api.get<Milestone>(`/milestones/${id}`).then(({ data }) => setMilestone(data))
+    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 }) => {
+          setProjectCode(proj.project_code || '')
+        })
+      }
+    })
     api.get<MilestoneProgress>(`/milestones/${id}/progress`).then(({ data }) => setProgress(data)).catch(() => {})
-    api.get<Issue[]>(`/milestones/${id}/issues`).then(({ data }) => setIssues(data)).catch(() => {})
   }, [id])
 
+  useEffect(() => {
+    if (!projectCode || !id) return
+    api.get<Task[]>(`/tasks/${projectCode}/${id}`).then(({ data }) => setTasks(data)).catch(() => {})
+    api.get<Issue[]>(`/supports/${projectCode}/${id}`).then(({ data }) => setSupports(data)).catch(() => {})
+    api.get<Issue[]>(`/meetings/${projectCode}/${id}`).then(({ data }) => setMeetings(data)).catch(() => {})
+  }, [projectCode, id])
+
+  const createItem = async (type: 'tasks' | 'supports' | 'meetings') => {
+    if (!newTitle.trim() || !projectCode) return
+    const payload: any = {
+      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
+    api.get<Task[]>(`/tasks/${projectCode}/${id}`).then(({ data }) => setTasks(data))
+    api.get<Issue[]>(`/supports/${projectCode}/${id}`).then(({ data }) => setSupports(data))
+    api.get<Issue[]>(`/meetings/${projectCode}/${id}`).then(({ data }) => setMeetings(data))
+  }
+
+  const isProgressing = milestone?.status === 'progressing'
+
   if (!milestone) return <div className="loading">Loading...</div>
 
+  const renderTaskRow = (t: Task) => (
+    <tr key={t.id} className="clickable" onClick={() => navigate(`/milestones/${id}`)}>
+      <td>{t.task_code || t.id}</td>
+      <td className="issue-title">{t.title}</td>
+      <td><span className={`badge status-${t.task_status || t.status}`}>{t.task_status || t.status}</span></td>
+      <td>{t.estimated_effort || '-'}</td>
+      <td>{t.estimated_working_time || '-'}</td>
+    </tr>
+  )
+
   return (
     <div className="milestone-detail">
-      <button className="btn-back" onClick={() => navigate('/milestones')}>← Back to milestones</button>
+      <button className="btn-back" onClick={() => navigate('/milestones')}>← Back to Milestones</button>
 
       <div className="issue-header">
         <h2>🏁 {milestone.title}</h2>
         <div className="issue-meta">
-          <span className={`badge status-${milestone.status === 'active' ? 'open' : 'closed'}`}>{milestone.status}</span>
+          <span className={`badge status-${milestone.status === 'progressing' ? 'in_progress' : milestone.status}`}>{milestone.status}</span>
           {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>
       </div>
 
@@ -40,36 +115,125 @@ export default function MilestoneDetailPage() {
 
       {progress && (
         <div className="section">
-          <h3>Progress</h3>
+          <h3>Progress (Tasks: {progress.completed}/{progress.total})</h3>
           <div className="progress-bar-container">
-            <div className="progress-bar" style={{ width: `${progress.progress_percent}%` }}>
-              {progress.progress_percent.toFixed(0)}%
+            <div className="progress-bar" style={{ width: `${progress.progress_pct}%` }}>
+              {progress.progress_pct.toFixed(0)}%
             </div>
           </div>
-          <p className="text-dim" style={{ marginTop: 8 }}>
-            {progress.completed_issues} / {progress.total_issues} issues completed
-          </p>
+          {progress.time_progress_pct !== null && (
+            <>
+              <p className="text-dim" style={{ marginTop: 8 }}>Time Progress</p>
+              <div className="progress-bar-container">
+                <div className="progress-bar" style={{ width: `${progress.time_progress_pct}%`, backgroundColor: 'var(--color-accent)' }}>
+                  {progress.time_progress_pct.toFixed(0)}%
+                </div>
+              </div>
+            </>
+          )}
         </div>
       )}
 
       <div className="section">
-        <h3>Issues ({issues.length})</h3>
-        <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>
-            ))}
-            {issues.length === 0 && <tr><td colSpan={4} className="empty">No linked issues</td></tr>}
-          </tbody>
-        </table>
+        <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
+          {!isProgressing && (
+            <>
+              <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("meetings"); setShowCreateMeeting(true) }}>+ Schedule Meeting</button>
+            </>
+          )}
+          {isProgressing && <span className="text-dim">Milestone is in progress - cannot add new items</span>}
+        </div>
+
+        {(showCreateTask || showCreateSupport || showCreateMeeting) && (
+          <div className="card" style={{ marginBottom: 16 }}>
+            <input 
+              placeholder="Title" 
+              value={newTitle} 
+              onChange={(e) => setNewTitle(e.target.value)}
+              style={{ marginBottom: 8 }}
+            />
+            <textarea 
+              placeholder="Description (optional)" 
+              value={newDesc} 
+              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-back" onClick={() => { setShowCreateTask(false); setShowCreateSupport(false); setShowCreateMeeting(false) }}>Cancel</button>
+            </div>
+          </div>
+        )}
+
+        <div className="tabs">
+          <button className={`tab ${activeTab === 'tasks' ? 'active' : ''}`} onClick={() => setActiveTab('tasks')}>
+            Tasks ({tasks.length})
+          </button>
+          <button className={`tab ${activeTab === 'supports' ? 'active' : ''}`} onClick={() => setActiveTab('supports')}>
+            Supports ({supports.length})
+          </button>
+          <button className={`tab ${activeTab === 'meetings' ? 'active' : ''}`} onClick={() => setActiveTab('meetings')}>
+            Meetings ({meetings.length})
+          </button>
+        </div>
+
+        <div className="tab-content">
+          {activeTab === 'tasks' && (
+            <table>
+              <thead><tr><th>Task Code</th><th>Title</th><th>Status</th><th>Effort</th><th>Est. Time</th></tr></thead>
+              <tbody>
+                {tasks.map(renderTaskRow)}
+                {tasks.length === 0 && <tr><td colSpan={5} className="empty">No tasks</td></tr>}
+              </tbody>
+            </table>
+          )}
+
+          {activeTab === 'supports' && (
+            <table>
+              <thead><tr><th>#</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead>
+              <tbody>
+                {supports.map((i) => (
+                  <tr key={i.id} className="clickable" onClick={() => navigate(`/supports/${projectCode}/${id}/${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>
+                ))}
+                {supports.length === 0 && <tr><td colSpan={4} className="empty">No support requests</td></tr>}
+              </tbody>
+            </table>
+          )}
+
+          {activeTab === 'meetings' && (
+            <table>
+              <thead><tr><th>#</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead>
+              <tbody>
+                {meetings.map((i) => (
+                  <tr key={i.id} className="clickable" onClick={() => navigate(`/meetings/${projectCode}/${id}/${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>
+                ))}
+                {meetings.length === 0 && <tr><td colSpan={4} className="empty">No meetings</td></tr>}
+              </tbody>
+            </table>
+          )}
+        </div>
       </div>
     </div>
   )

src/pages/MilestonesPage.tsx

@@ -9,7 +9,16 @@ export default function MilestonesPage() {
   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: '' })
+  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 = () => {
@@ -28,8 +37,16 @@ export default function MilestonesPage() {
 
   const createMilestone = async (e: React.FormEvent) => {
     e.preventDefault()
-    const payload: Record<string, unknown> = { ...form }
-    if (!form.due_date) delete payload.due_date
+    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()
@@ -39,7 +56,7 @@ export default function MilestonesPage() {
     <div className="milestones-page">
       <div className="page-header">
         <h2>🏁 Milestones ({milestones.length})</h2>
-        <button className="btn-primary" onClick={() => setShowCreate(!showCreate)}>
+        <button className="btn-primary" disabled={!projectFilter} onClick={() => setShowCreate(!showCreate)}>
           {showCreate ? 'Cancel' : '+ NewMilestones'}
         </button>
       </div>
@@ -60,8 +77,17 @@ export default function MilestonesPage() {
           <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>
       )}
@@ -70,12 +96,13 @@ export default function MilestonesPage() {
         {milestones.map((ms) => (
           <div key={ms.id} className="milestone-card" onClick={() => navigate(`/milestones/${ms.id}`)}>
             <div className="milestone-card-header">
-              <span className={`badge status-${ms.status === 'active' ? 'open' : 'closed'}`}>{ms.status}</span>
+              <span className={`badge status-${ms.status === 'progressing' ? 'in_progress' : ms.status}`}>{ms.status}</span>
               <h3>{ms.title}</h3>
             </div>
             <p className="project-desc">{ms.description || 'No description'}</p>
             <div className="project-meta">
-              {ms.due_date && <span>Due {dayjs(ms.due_date).format('YYYY-MM-DD')}</span>}
+              {ms.planned_release_date && <span>Release: {dayjs(ms.planned_release_date).format('YYYY-MM-DD')}</span>}
+              {ms.due_date && <span>Due: {dayjs(ms.due_date).format('YYYY-MM-DD')}</span>}
               <span>Created {dayjs(ms.created_at).format('YYYY-MM-DD')}</span>
             </div>
           </div>

src/pages/ProjectDetailPage.tsx

@@ -105,6 +105,7 @@ export default function ProjectDetailPage() {
               {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) => (
@@ -126,6 +127,7 @@ export default function ProjectDetailPage() {
           <>
             <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>
             <button className="btn-transition" style={{ marginTop: 8 }} onClick={() => setEditing(true)}>Edit</button>
             <button className="btn-danger" style={{ marginLeft: 8 }} onClick={deleteProject}>Delete</button>
@@ -153,7 +155,7 @@ export default function ProjectDetailPage() {
         <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>
+            <span className={`badge status-${ms.status === 'open' ? 'open' : ms.status === 'closed' ? 'closed' : 'in_progress'}`}>{ms.status}</span>
             <span className="milestone-title">{ms.title}</span>
             {ms.due_date && <span className="text-dim"> · Due {dayjs(ms.due_date).format('YYYY-MM-DD')}</span>}
           </div>

src/types/index.ts

@@ -63,18 +63,31 @@ export interface Milestone {
   id: number
   title: string
   description: string | null
-  status: string
+  status: 'open' | 'pending' | 'deferred' | 'progressing' | 'closed'
   project_id: number
   due_date: string | null
+  planned_release_date: string | null
+  depend_on_milestones: string[]
+  depend_on_tasks: number[]
   created_at: string
   updated_at: string | null
 }
 
 export interface MilestoneProgress {
   milestone_id: number
+  title: string
   total_issues: number
-  completed_issues: number
-  progress_percent: number
+  total: number
+  completed: number
+  progress_pct: number
+  time_progress_pct: number | null
+  planned_release_date: string | null
+}
+
+export interface MilestoneItems {
+  tasks: any[]
+  supports: any[]
+  meetings: any[]
 }
 
 export interface Notification {
@@ -88,6 +101,7 @@ export interface Notification {
 
 export interface PaginatedResponse<T> {
   items: T[]
+  total_issues: number
   total: number
   page: number
   page_size: number
@@ -96,6 +110,7 @@ export interface PaginatedResponse<T> {
 
 export interface DashboardStats {
   total_issues: number
+  total: number
   by_status: Record<string, number>
   by_priority: Record<string, number>
   by_type: Record<string, number>