70 lines
2.8 KiB
TypeScript
70 lines
2.8 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import api from '@/services/api'
|
|
import type { Milestone, Project } from '@/types'
|
|
import dayjs from 'dayjs'
|
|
import MilestoneFormModal from '@/components/MilestoneFormModal'
|
|
|
|
export default function MilestonesPage() {
|
|
const [milestones, setMilestones] = useState<Milestone[]>([])
|
|
const [projects, setProjects] = useState<Project[]>([])
|
|
const [projectFilter, setProjectFilter] = useState('')
|
|
const [showCreate, setShowCreate] = useState(false)
|
|
const navigate = useNavigate()
|
|
|
|
const fetchMilestones = () => {
|
|
const params = projectFilter ? `?project_id=${projectFilter}` : ''
|
|
api.get<Milestone[]>(`/milestones${params}`).then(({ data }) => setMilestones(data))
|
|
}
|
|
|
|
useEffect(() => {
|
|
api.get<Project[]>('/projects').then(({ data }) => setProjects(data))
|
|
}, [])
|
|
|
|
useEffect(() => { fetchMilestones() }, [projectFilter])
|
|
|
|
return (
|
|
<div className="milestones-page">
|
|
<div className="page-header">
|
|
<h2>🏁 Milestones ({milestones.length})</h2>
|
|
<button className="btn-primary" disabled={!projectFilter} onClick={() => setShowCreate(true)}>
|
|
+ New Milestone
|
|
</button>
|
|
</div>
|
|
|
|
<div className="filters">
|
|
<select value={projectFilter} onChange={(e) => setProjectFilter(e.target.value)}>
|
|
<option value="">All projects</option>
|
|
{projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
|
|
</select>
|
|
</div>
|
|
|
|
<MilestoneFormModal
|
|
isOpen={showCreate}
|
|
onClose={() => setShowCreate(false)}
|
|
initialProjectId={projectFilter ? Number(projectFilter) : undefined}
|
|
lockProject={Boolean(projectFilter)}
|
|
onSaved={() => fetchMilestones()}
|
|
/>
|
|
|
|
<div className="milestone-grid">
|
|
{milestones.map((ms) => (
|
|
<div key={ms.id} className="milestone-card" onClick={() => navigate(`/milestones/${ms.milestone_code || ms.id}`)}>
|
|
<div className="milestone-card-header">
|
|
<span className={`badge status-${ms.status}`}>{ms.status}</span>
|
|
<h3>{ms.title}</h3>{ms.milestone_code && <span className="badge" style={{ marginLeft: 8, fontSize: '0.75em' }}>{ms.milestone_code}</span>}
|
|
</div>
|
|
<p className="project-desc">{ms.description || 'No description'}</p>
|
|
<div className="project-meta">
|
|
{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>
|
|
))}
|
|
{milestones.length === 0 && <p className="empty">No milestones</p>}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|