zhi/HarborForge.Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: switch frontend indexing to code-first identifiers

Browse Source
This commit is contained in:
orion
2026-04-03 16:25:11 +00:00
parent e4804128f6
commit 8208b3b27b
17 changed files with 176 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.tsx
View File

@@ -112,19 +112,19 @@ export default function App() {
<Routes> <Routes>
<Route path="/" element={<DashboardPage />} /> <Route path="/" element={<DashboardPage />} />
<Route path="/tasks" element={<TasksPage />} /> <Route path="/tasks" element={<TasksPage />} />
<Route path="/tasks/:id" element={<TaskDetailPage />} /> <Route path="/tasks/:taskCode" element={<TaskDetailPage />} />
<Route path="/projects" element={<ProjectsPage />} /> <Route path="/projects" element={<ProjectsPage />} />
<Route path="/projects/:id" element={<ProjectDetailPage />} /> <Route path="/projects/:id" element={<ProjectDetailPage />} />
<Route path="/milestones" element={<MilestonesPage />} /> <Route path="/milestones" element={<MilestonesPage />} />
<Route path="/milestones/:id" element={<MilestoneDetailPage />} /> <Route path="/milestones/:milestoneCode" element={<MilestoneDetailPage />} />
<Route path="/proposals" element={<ProposalsPage />} /> <Route path="/proposals" element={<ProposalsPage />} />
<Route path="/proposals/:id" element={<ProposalDetailPage />} /> <Route path="/proposals/:proposalCode" element={<ProposalDetailPage />} />
<Route path="/calendar" element={<CalendarPage />} /> <Route path="/calendar" element={<CalendarPage />} />
{/* Legacy routes for backward compatibility */} {/* Legacy routes for backward compatibility */}
<Route path="/proposes" element={<ProposalsPage />} /> <Route path="/proposes" element={<ProposalsPage />} />
<Route path="/proposes/:id" element={<ProposalDetailPage />} /> <Route path="/proposes/:proposalCode" element={<ProposalDetailPage />} />
<Route path="/meetings/:meetingId" element={<MeetingDetailPage />} /> <Route path="/meetings/:meetingCode" element={<MeetingDetailPage />} />
<Route path="/supports/:supportId" element={<SupportDetailPage />} /> <Route path="/supports/:supportCode" element={<SupportDetailPage />} />
<Route path="/notifications" element={<NotificationsPage />} /> <Route path="/notifications" element={<NotificationsPage />} />
<Route path="/roles" element={<RoleEditorPage />} /> <Route path="/roles" element={<RoleEditorPage />} />
<Route path="/users" element={<UsersPage />} /> <Route path="/users" element={<UsersPage />} />

70
src/components/CreateTaskModal.tsx
View File

@@ -18,8 +18,8 @@ type Props = {
onClose: () => void onClose: () => void
onCreated?: (task: Task) => void | Promise<void> onCreated?: (task: Task) => void | Promise<void>
onSaved?: (task: Task) => void | Promise<void> onSaved?: (task: Task) => void | Promise<void>
initialProjectId?: number initialProjectCode?: string
initialMilestoneId?: number initialMilestoneCode?: string
lockProject?: boolean lockProject?: boolean
lockMilestone?: boolean lockMilestone?: boolean
task?: Task | null task?: Task | null
@@ -28,8 +28,8 @@ type Props = {
type FormState = { type FormState = {
title: string title: string
description: string description: string
project_id: number project_code: string
milestone_id: number milestone_code: string
task_type: string task_type: string
task_subtype: string task_subtype: string
priority: string priority: string
@@ -37,11 +37,11 @@ type FormState = {
reporter_id: number reporter_id: number
} }
const makeInitialForm = (projectId = 0, milestoneId = 0): FormState => ({ const makeInitialForm = (projectCode = '', milestoneCode = ''): FormState => ({
title: '', title: '',
description: '', description: '',
project_id: projectId, project_code: projectCode,
milestone_id: milestoneId, milestone_code: milestoneCode,
task_type: 'issue', // P7.1: default changed from 'task' to 'issue' task_type: 'issue', // P7.1: default changed from 'task' to 'issue'
task_subtype: '', task_subtype: '',
priority: 'medium', priority: 'medium',
@@ -54,8 +54,8 @@ export default function CreateTaskModal({
onClose, onClose,
onCreated, onCreated,
onSaved, onSaved,
initialProjectId, initialProjectCode,
initialMilestoneId, initialMilestoneCode,
lockProject = false, lockProject = false,
lockMilestone = false, lockMilestone = false,
task, task,
@@ -63,7 +63,7 @@ export default function CreateTaskModal({
const [projects, setProjects] = useState<Project[]>([]) const [projects, setProjects] = useState<Project[]>([])
const [milestones, setMilestones] = useState<Milestone[]>([]) const [milestones, setMilestones] = useState<Milestone[]>([])
const [saving, setSaving] = useState(false) const [saving, setSaving] = useState(false)
const [form, setForm] = useState<FormState>(makeInitialForm(initialProjectId, initialMilestoneId)) const [form, setForm] = useState<FormState>(makeInitialForm(initialProjectCode, initialMilestoneCode))
const isEdit = Boolean(task) const isEdit = Boolean(task)
const currentType = useMemo( const currentType = useMemo(
@@ -72,18 +72,18 @@ export default function CreateTaskModal({
) )
const subtypes = currentType.subtypes || [] const subtypes = currentType.subtypes || []
const loadMilestones = async (projectId: number, preferredMilestoneId?: number) => { const loadMilestones = async (projectCode: string, preferredMilestoneCode?: string) => {
if (!projectId) { if (!projectCode) {
setMilestones([]) setMilestones([])
setForm((f) => ({ ...f, milestone_id: 0 })) setForm((f) => ({ ...f, milestone_code: '' }))
return return
} }
const { data } = await api.get<Milestone[]>(`/milestones?project_id=${projectId}`) const { data } = await api.get<Milestone[]>(`/milestones?project_code=${projectCode}`)
setMilestones(data) setMilestones(data)
const hasPreferred = preferredMilestoneId && data.some((m) => m.id === preferredMilestoneId) const hasPreferred = preferredMilestoneCode && data.some((m) => m.milestone_code === preferredMilestoneCode)
const nextMilestoneId = hasPreferred ? preferredMilestoneId! : (data[0]?.id || 0) const nextMilestoneCode = hasPreferred ? preferredMilestoneCode! : (data[0]?.milestone_code || '')
setForm((f) => ({ ...f, milestone_id: nextMilestoneId })) setForm((f) => ({ ...f, milestone_code: nextMilestoneCode }))
} }
useEffect(() => { useEffect(() => {
@@ -93,30 +93,30 @@ export default function CreateTaskModal({
const { data } = await api.get<Project[]>('/projects') const { data } = await api.get<Project[]>('/projects')
setProjects(data) setProjects(data)
const chosenProjectId = task?.project_id || initialProjectId || data[0]?.id || 0 const chosenProjectCode = task?.project_code || initialProjectCode || data[0]?.project_code || ''
const chosenMilestoneId = task?.milestone_id || initialMilestoneId || 0 const chosenMilestoneCode = task?.milestone_code || initialMilestoneCode || ''
setForm(task ? { setForm(task ? {
title: task.title, title: task.title,
description: task.description || '', description: task.description || '',
project_id: task.project_id, project_code: task.project_code || '',
milestone_id: task.milestone_id || 0, milestone_code: task.milestone_code || '',
task_type: task.task_type, task_type: task.task_type,
task_subtype: task.task_subtype || '', task_subtype: task.task_subtype || '',
priority: task.priority, priority: task.priority,
tags: task.tags || '', tags: task.tags || '',
reporter_id: task.reporter_id, reporter_id: task.reporter_id,
} : makeInitialForm(chosenProjectId, chosenMilestoneId)) } : makeInitialForm(chosenProjectCode, chosenMilestoneCode))
await loadMilestones(chosenProjectId, chosenMilestoneId) await loadMilestones(chosenProjectCode, chosenMilestoneCode)
} }
init().catch(console.error) init().catch(console.error)
}, [isOpen, initialProjectId, initialMilestoneId, task]) }, [isOpen, initialProjectCode, initialMilestoneCode, task])
const handleProjectChange = async (projectId: number) => { const handleProjectChange = async (projectCode: string) => {
setForm((f) => ({ ...f, project_id: projectId, milestone_id: 0 })) setForm((f) => ({ ...f, project_code: projectCode, milestone_code: '' }))
await loadMilestones(projectId) await loadMilestones(projectCode)
} }
const handleTypeChange = (taskType: string) => { const handleTypeChange = (taskType: string) => {
@@ -125,7 +125,7 @@ export default function CreateTaskModal({
const submit = async (e: React.FormEvent) => { const submit = async (e: React.FormEvent) => {
e.preventDefault() e.preventDefault()
if (!form.milestone_id) { if (!form.milestone_code) {
alert('Please select a milestone') alert('Please select a milestone')
return return
} }
@@ -136,7 +136,7 @@ export default function CreateTaskModal({
setSaving(true) setSaving(true)
try { try {
const { data } = isEdit const { data } = isEdit
? await api.patch<Task>(`/tasks/${task!.id}`, payload) ? await api.patch<Task>(`/tasks/${task!.task_code}`, payload)
: await api.post<Task>('/tasks', payload) : await api.post<Task>('/tasks', payload)
await onCreated?.(data) await onCreated?.(data)
await onSaved?.(data) await onSaved?.(data)
@@ -181,12 +181,12 @@ export default function CreateTaskModal({
Project Project
<select <select
data-testid="project-select" data-testid="project-select"
value={form.project_id} value={form.project_code}
onChange={(e) => handleProjectChange(Number(e.target.value))} onChange={(e) => handleProjectChange(e.target.value)}
disabled={lockProject} disabled={lockProject}
> >
{projects.map((p) => ( {projects.map((p) => (
<option key={p.id} value={p.id}>{p.name}</option> <option key={p.id} value={p.project_code || ''}>{p.name}</option>
))} ))}
</select> </select>
</label> </label>
@@ -195,13 +195,13 @@ export default function CreateTaskModal({
Milestone Milestone
<select <select
data-testid="milestone-select" data-testid="milestone-select"
value={form.milestone_id} value={form.milestone_code}
onChange={(e) => setForm({ ...form, milestone_id: Number(e.target.value) })} onChange={(e) => setForm({ ...form, milestone_code: e.target.value })}
disabled={lockMilestone} disabled={lockMilestone}
> >
{milestones.length === 0 && <option value={0}>No milestones available</option>} {milestones.length === 0 && <option value={0}>No milestones available</option>}
{milestones.map((m) => ( {milestones.map((m) => (
<option key={m.id} value={m.id}>{m.title}</option> <option key={m.id} value={m.milestone_code || ''}>{m.title}</option>
))} ))}
</select> </select>
</label> </label>

22
src/components/MilestoneFormModal.tsx
View File

@@ -7,14 +7,14 @@ type Props = {
onClose: () => void onClose: () => void
onSaved?: (milestone: Milestone) => void | Promise<void> onSaved?: (milestone: Milestone) => void | Promise<void>
milestone?: Milestone | null milestone?: Milestone | null
initialProjectId?: number initialProjectCode?: string
lockProject?: boolean lockProject?: boolean
} }
type FormState = { type FormState = {
title: string title: string
description: string description: string
project_id: number project_code: string
status: string status: string
due_date: string due_date: string
planned_release_date: string planned_release_date: string
@@ -23,7 +23,7 @@ type FormState = {
const emptyForm: FormState = { const emptyForm: FormState = {
title: '', title: '',
description: '', description: '',
project_id: 0, project_code: '',
status: 'open', status: 'open',
due_date: '', due_date: '',
planned_release_date: '', planned_release_date: '',
@@ -31,7 +31,7 @@ const emptyForm: FormState = {
const toDateInput = (value?: string | null) => (value ? String(value).slice(0, 10) : '') const toDateInput = (value?: string | null) => (value ? String(value).slice(0, 10) : '')
export default function MilestoneFormModal({ isOpen, onClose, onSaved, milestone, initialProjectId, lockProject = false }: Props) { export default function MilestoneFormModal({ isOpen, onClose, onSaved, milestone, initialProjectCode, lockProject = false }: Props) {
const [projects, setProjects] = useState<Project[]>([]) const [projects, setProjects] = useState<Project[]>([])
const [saving, setSaving] = useState(false) const [saving, setSaving] = useState(false)
const [form, setForm] = useState<FormState>(emptyForm) const [form, setForm] = useState<FormState>(emptyForm)
@@ -42,11 +42,11 @@ export default function MilestoneFormModal({ isOpen, onClose, onSaved, milestone
const init = async () => { const init = async () => {
const { data } = await api.get<Project[]>('/projects') const { data } = await api.get<Project[]>('/projects')
setProjects(data) setProjects(data)
const defaultProjectId = milestone?.project_id || initialProjectId || data[0]?.id || 0 const defaultProjectCode = milestone?.project_code || initialProjectCode || data[0]?.project_code || ''
setForm({ setForm({
title: milestone?.title || '', title: milestone?.title || '',
description: milestone?.description || '', description: milestone?.description || '',
project_id: defaultProjectId, project_code: defaultProjectCode,
status: milestone?.status || 'open', status: milestone?.status || 'open',
due_date: toDateInput(milestone?.due_date), due_date: toDateInput(milestone?.due_date),
planned_release_date: toDateInput(milestone?.planned_release_date), planned_release_date: toDateInput(milestone?.planned_release_date),
@@ -54,7 +54,7 @@ export default function MilestoneFormModal({ isOpen, onClose, onSaved, milestone
} }
init().catch(console.error) init().catch(console.error)
}, [isOpen, milestone, initialProjectId]) }, [isOpen, milestone, initialProjectCode])
const submit = async (e: React.FormEvent) => { const submit = async (e: React.FormEvent) => {
e.preventDefault() e.preventDefault()
@@ -63,13 +63,13 @@ export default function MilestoneFormModal({ isOpen, onClose, onSaved, milestone
const payload = { const payload = {
title: form.title, title: form.title,
description: form.description || null, description: form.description || null,
project_id: form.project_id, project_code: form.project_code,
status: form.status, status: form.status,
due_date: form.due_date || null, due_date: form.due_date || null,
planned_release_date: form.planned_release_date || null, planned_release_date: form.planned_release_date || null,
} }
if (milestone) { if (milestone) {
const { data } = await api.patch<Milestone>(`/milestones/${milestone.id}`, payload) const { data } = await api.patch<Milestone>(`/milestones/${milestone.milestone_code}`, payload)
await onSaved?.(data) await onSaved?.(data)
} else { } else {
const { data } = await api.post<Milestone>('/milestones', payload) const { data } = await api.post<Milestone>('/milestones', payload)
@@ -116,8 +116,8 @@ export default function MilestoneFormModal({ isOpen, onClose, onSaved, milestone
<div className="task-create-grid"> <div className="task-create-grid">
<label> <label>
Project Project
<select value={form.project_id} onChange={(e) => setForm((f) => ({ ...f, project_id: Number(e.target.value) }))} disabled={lockProject}> <select value={form.project_code} onChange={(e) => setForm((f) => ({ ...f, project_code: e.target.value }))} disabled={lockProject}>
{projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)} {projects.map((p) => <option key={p.id} value={p.project_code || ''}>{p.name}</option>)}
</select> </select>
</label> </label>

28
src/pages/CreateTaskPage.tsx
View File

@@ -19,7 +19,7 @@ export default function CreateTaskPage() {
const [projects, setProjects] = useState<Project[]>([]) const [projects, setProjects] = useState<Project[]>([])
const [milestones, setMilestones] = useState<Milestone[]>([]) const [milestones, setMilestones] = useState<Milestone[]>([])
const [form, setForm] = useState({ const [form, setForm] = useState({
title: '', description: '', project_id: 0, milestone_id: 0, task_type: 'issue', // P7.1: default changed from 'task' to 'issue' title: '', description: '', project_code: '', milestone_code: '', task_type: 'issue', // P7.1: default changed from 'task' to 'issue'
task_subtype: '', priority: 'medium', tags: '', reporter_id: 1, task_subtype: '', priority: 'medium', tags: '', reporter_id: 1,
}) })
@@ -27,21 +27,21 @@ export default function CreateTaskPage() {
api.get<Project[]>('/projects').then(({ data }) => { api.get<Project[]>('/projects').then(({ data }) => {
setProjects(data) setProjects(data)
if (data.length) { if (data.length) {
setForm((f) => ({ ...f, project_id: data[0].id })) setForm((f) => ({ ...f, project_code: data[0].project_code || '' }))
// Load milestones for the first project // Load milestones for the first project
api.get<Milestone[]>(`/milestones?project_id=${data[0].id}`).then(({ data: ms }) => { api.get<Milestone[]>(`/milestones?project_code=${data[0].project_code}`).then(({ data: ms }) => {
setMilestones(ms) setMilestones(ms)
if (ms.length) setForm((f) => ({ ...f, milestone_id: ms[0].id })) if (ms.length) setForm((f) => ({ ...f, milestone_code: ms[0].milestone_code || '' }))
}) })
} }
}) })
}, []) }, [])
const handleProjectChange = (projectId: number) => { const handleProjectChange = (projectCode: string) => {
setForm(f => ({ ...f, project_id: projectId, milestone_id: 0 })) setForm(f => ({ ...f, project_code: projectCode, milestone_code: '' }))
api.get<Milestone[]>(`/milestones?project_id=${projectId}`).then(({ data: ms }) => { api.get<Milestone[]>(`/milestones?project_code=${projectCode}`).then(({ data: ms }) => {
setMilestones(ms) setMilestones(ms)
if (ms.length) setForm((f) => ({ ...f, milestone_id: ms[0].id })) if (ms.length) setForm((f) => ({ ...f, milestone_code: ms[0].milestone_code || '' }))
}) })
} }
@@ -54,7 +54,7 @@ export default function CreateTaskPage() {
const submit = async (e: React.FormEvent) => { const submit = async (e: React.FormEvent) => {
e.preventDefault() e.preventDefault()
if (!form.milestone_id) { if (!form.milestone_code) {
alert('Please select a milestone') alert('Please select a milestone')
return return
} }
@@ -71,14 +71,14 @@ export default function CreateTaskPage() {
<label>Title <input data-testid="task-title-input" required value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} /></label> <label>Title <input data-testid="task-title-input" required value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} /></label>
<label>Description <textarea data-testid="task-description-input" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} /></label> <label>Description <textarea data-testid="task-description-input" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} /></label>
<label>Projects <label>Projects
<select data-testid="project-select" value={form.project_id} onChange={(e) => handleProjectChange(Number(e.target.value))}> <select data-testid="project-select" value={form.project_code} onChange={(e) => handleProjectChange(e.target.value)}>
{projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)} {projects.map((p) => <option key={p.id} value={p.project_code || ''}>{p.name}</option>)}
</select> </select>
</label> </label>
<label>Milestone <label>Milestone
<select data-testid="milestone-select" value={form.milestone_id} onChange={(e) => setForm({ ...form, milestone_id: Number(e.target.value) })}> <select data-testid="milestone-select" value={form.milestone_code} onChange={(e) => setForm({ ...form, milestone_code: e.target.value })}>
{milestones.length === 0 && <option value={0}>No milestones available</option>} {milestones.length === 0 && <option value="">No milestones available</option>}
{milestones.map((m) => <option key={m.id} value={m.id}>{m.title}</option>)} {milestones.map((m) => <option key={m.id} value={m.milestone_code || ''}>{m.title}</option>)}
</select> </select>
</label> </label>
<label>Type <label>Type

5
src/pages/DashboardPage.tsx
View File

@@ -1,4 +1,5 @@
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import api from '@/services/api' import api from '@/services/api'
import type { DashboardStats, Task } from '@/types' import type { DashboardStats, Task } from '@/types'
@@ -60,8 +61,8 @@ export default function DashboardPage() {
<tbody> <tbody>
{(stats.recent_tasks || []).map((i) => ( {(stats.recent_tasks || []).map((i) => (
<tr key={i.id}> <tr key={i.id}>
<td>{i.task_code || `#${i.id}`}</td> <td>{i.task_code || '—'}</td>
<td><a href={`/tasks/${i.task_code || i.id}`}>{i.title}</a></td> <td>{i.task_code ? <Link to={`/tasks/${i.task_code}`}>{i.title}</Link> : i.title}</td>
<td><span className={`badge status-${i.status}`}>{i.status}</span></td> <td><span className={`badge status-${i.status}`}>{i.status}</span></td>
<td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td> <td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td>
<td>{i.task_type}</td><td>{i.task_subtype || "-"}</td> <td>{i.task_type}</td><td>{i.task_subtype || "-"}</td>

14
src/pages/MeetingDetailPage.tsx
View File

@@ -29,7 +29,7 @@ interface MeetingItem {
const STATUS_OPTIONS = ['scheduled', 'in_progress', 'completed', 'cancelled'] const STATUS_OPTIONS = ['scheduled', 'in_progress', 'completed', 'cancelled']
export default function MeetingDetailPage() { export default function MeetingDetailPage() {
const { meetingId } = useParams() const { meetingCode } = useParams()
const navigate = useNavigate() const navigate = useNavigate()
const { user } = useAuth() const { user } = useAuth()
const [meeting, setMeeting] = useState<MeetingItem | null>(null) const [meeting, setMeeting] = useState<MeetingItem | null>(null)
@@ -46,7 +46,7 @@ export default function MeetingDetailPage() {
const fetchMeeting = async () => { const fetchMeeting = async () => {
try { try {
const { data } = await api.get<MeetingItem>(`/meetings/${meetingId}`) const { data } = await api.get<MeetingItem>(`/meetings/${meetingCode}`)
setMeeting(data) setMeeting(data)
setEditForm({ setEditForm({
title: data.title, title: data.title,
@@ -63,14 +63,14 @@ export default function MeetingDetailPage() {
useEffect(() => { useEffect(() => {
fetchMeeting() fetchMeeting()
}, [meetingId]) }, [meetingCode])
const handleAttend = async () => { const handleAttend = async () => {
if (!meeting) return if (!meeting) return
setSaving(true) setSaving(true)
setMessage('') setMessage('')
try { try {
const { data } = await api.post<MeetingItem>(`/meetings/${meetingId}/attend`) const { data } = await api.post<MeetingItem>(`/meetings/${meetingCode}/attend`)
setMeeting(data) setMeeting(data)
setMessage('You have joined this meeting') setMessage('You have joined this meeting')
} catch (err: any) { } catch (err: any) {
@@ -85,7 +85,7 @@ export default function MeetingDetailPage() {
setSaving(true) setSaving(true)
setMessage('') setMessage('')
try { try {
const { data } = await api.patch<MeetingItem>(`/meetings/${meetingId}`, { const { data } = await api.patch<MeetingItem>(`/meetings/${meetingCode}`, {
status: newStatus, status: newStatus,
}) })
setMeeting(data) setMeeting(data)
@@ -117,7 +117,7 @@ export default function MeetingDetailPage() {
return return
} }
const { data } = await api.patch<MeetingItem>(`/meetings/${meetingId}`, payload) const { data } = await api.patch<MeetingItem>(`/meetings/${meetingCode}`, payload)
setMeeting(data) setMeeting(data)
setEditMode(false) setEditMode(false)
setMessage('Meeting updated') setMessage('Meeting updated')
@@ -133,7 +133,7 @@ export default function MeetingDetailPage() {
if (!confirm(`Delete meeting ${meeting.meeting_code || meeting.id}? This cannot be undone.`)) return if (!confirm(`Delete meeting ${meeting.meeting_code || meeting.id}? This cannot be undone.`)) return
setSaving(true) setSaving(true)
try { try {
await api.delete(`/meetings/${meetingId}`) await api.delete(`/meetings/${meetingCode}`)
navigate(-1) navigate(-1)
} catch (err: any) { } catch (err: any) {
setMessage(err.response?.data?.detail || 'Failed to delete meeting') setMessage(err.response?.data?.detail || 'Failed to delete meeting')

55
src/pages/MilestoneDetailPage.tsx
View File

@@ -24,7 +24,7 @@ interface MilestoneTask {
} }
export default function MilestoneDetailPage() { export default function MilestoneDetailPage() {
const { id } = useParams() const { milestoneCode } = useParams()
const navigate = useNavigate() const navigate = useNavigate()
const { user } = useAuth() const { user } = useAuth()
const [milestone, setMilestone] = useState<Milestone | null>(null) const [milestone, setMilestone] = useState<Milestone | null>(null)
@@ -49,7 +49,8 @@ export default function MilestoneDetailPage() {
const [preflight, setPreflight] = useState<{ freeze?: { allowed: boolean; reason: string | null }; start?: { allowed: boolean; reason: string | null } } | null>(null) const [preflight, setPreflight] = useState<{ freeze?: { allowed: boolean; reason: string | null }; start?: { allowed: boolean; reason: string | null } } | null>(null)
const fetchMilestone = () => { const fetchMilestone = () => {
api.get<Milestone>(`/milestones/${id}`).then(({ data }) => { if (!milestoneCode) return
api.get<Milestone>(`/milestones/${milestoneCode}`).then(({ data }) => {
setMilestone(data) setMilestone(data)
if (data.project_id) { if (data.project_id) {
api.get<Project>(`/projects/${data.project_id}`).then(({ data: proj }) => { api.get<Project>(`/projects/${data.project_id}`).then(({ data: proj }) => {
@@ -57,40 +58,44 @@ export default function MilestoneDetailPage() {
setProjectCode(proj.project_code || '') setProjectCode(proj.project_code || '')
}) })
api.get<ProjectMember[]>(`/projects/${data.project_id}/members`).then(({ data }) => setMembers(data)).catch(() => {}) api.get<ProjectMember[]>(`/projects/${data.project_id}/members`).then(({ data }) => setMembers(data)).catch(() => {})
fetchPreflight(data.project_id, data.id) if (data.project_code && data.milestone_code) {
fetchPreflight(data.project_code, data.milestone_code)
}
}
if (data.milestone_code) {
api.get<MilestoneProgress>(`/milestones/${data.milestone_code}/progress`).then(({ data: prog }) => setProgress(prog)).catch(() => {})
} }
api.get<MilestoneProgress>(`/milestones/${data.id}/progress`).then(({ data: prog }) => setProgress(prog)).catch(() => {})
}) })
} }
const fetchPreflight = (projectId: number, milestoneId: number) => { const fetchPreflight = (projectCode: string, milestoneCode: string) => {
api.get(`/projects/${projectId}/milestones/${milestoneId}/actions/preflight`) api.get(`/projects/${projectCode}/milestones/${milestoneCode}/actions/preflight`)
.then(({ data }) => setPreflight(data)) .then(({ data }) => setPreflight(data))
.catch(() => setPreflight(null)) .catch(() => setPreflight(null))
} }
useEffect(() => { useEffect(() => {
fetchMilestone() fetchMilestone()
}, [id]) }, [milestoneCode])
const refreshMilestoneItems = () => { const refreshMilestoneItems = () => {
if (!projectCode || !milestone) return if (!projectCode || !milestone?.milestone_code) return
api.get<MilestoneTask[]>(`/tasks/${projectCode}/${milestone.id}`).then(({ data }) => setTasks(data)).catch(() => {}) api.get<MilestoneTask[]>(`/tasks/${projectCode}/${milestone.milestone_code}`).then(({ data }) => setTasks(data)).catch(() => {})
api.get<any[]>(`/supports/${projectCode}/${milestone.id}`).then(({ data }) => setSupports(data)).catch(() => {}) api.get<any[]>(`/supports/${projectCode}/${milestone.milestone_code}`).then(({ data }) => setSupports(data)).catch(() => {})
api.get<any[]>(`/meetings/${projectCode}/${milestone.id}`).then(({ data }) => setMeetings(data)).catch(() => {}) api.get<any[]>(`/meetings/${projectCode}/${milestone.milestone_code}`).then(({ data }) => setMeetings(data)).catch(() => {})
} }
useEffect(() => { useEffect(() => {
refreshMilestoneItems() refreshMilestoneItems()
}, [projectCode, milestone?.id]) }, [projectCode, milestone?.milestone_code])
const createItem = async (type: 'supports' | 'meetings') => { const createItem = async (type: 'supports' | 'meetings') => {
if (!newTitle.trim() || !projectCode || !milestone) return if (!newTitle.trim() || !projectCode || !milestone?.milestone_code) return
const payload = { const payload = {
title: newTitle, title: newTitle,
description: newDesc || null, description: newDesc || null,
} }
await api.post(`/${type}/${projectCode}/${milestone.id}`, payload) await api.post(`/${type}/${projectCode}/${milestone.milestone_code}`, payload)
setNewTitle('') setNewTitle('')
setNewDesc('') setNewDesc('')
setShowCreateSupport(false) setShowCreateSupport(false)
@@ -119,10 +124,12 @@ export default function MilestoneDetailPage() {
setActionLoading(action) setActionLoading(action)
setActionError(null) setActionError(null)
try { try {
await api.post(`/projects/${project.id}/milestones/${milestone.id}/actions/${action}`, body ?? {}) await api.post(`/projects/${project.project_code}/milestones/${milestone.milestone_code}/actions/${action}`, body ?? {})
fetchMilestone() fetchMilestone()
refreshMilestoneItems() refreshMilestoneItems()
fetchPreflight(project.id, milestone.id) if (project.project_code && milestone.milestone_code) {
fetchPreflight(project.project_code, milestone.milestone_code)
}
} catch (err: any) { } catch (err: any) {
const detail = err?.response?.data?.detail const detail = err?.response?.data?.detail
setActionError(typeof detail === 'string' ? detail : `${action} failed`) setActionError(typeof detail === 'string' ? detail : `${action} failed`)
@@ -142,8 +149,8 @@ export default function MilestoneDetailPage() {
if (!milestone) return <div className="loading">Loading...</div> if (!milestone) return <div className="loading">Loading...</div>
const renderTaskRow = (t: MilestoneTask) => ( const renderTaskRow = (t: MilestoneTask) => (
<tr key={t.id} className="clickable" onClick={() => navigate(`/tasks/${t.task_code || t.id}`)}> <tr key={t.id} className={t.task_code ? 'clickable' : ''} onClick={() => t.task_code && navigate(`/tasks/${t.task_code}`)}>
<td>{t.task_code || t.id}</td> <td>{t.task_code || '—'}</td>
<td className="task-title">{t.title}</td> <td className="task-title">{t.title}</td>
<td><span className={`badge status-${t.task_status || t.status}`}>{t.task_status || t.status}</span></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_effort || '-'}</td>
@@ -297,8 +304,8 @@ export default function MilestoneDetailPage() {
<CreateTaskModal <CreateTaskModal
isOpen={showCreateTask} isOpen={showCreateTask}
onClose={() => setShowCreateTask(false)} onClose={() => setShowCreateTask(false)}
initialProjectId={milestone.project_id} initialProjectCode={milestone.project_code || ''}
initialMilestoneId={milestone.id} initialMilestoneCode={milestone.milestone_code || ''}
lockProject lockProject
lockMilestone lockMilestone
onCreated={() => { onCreated={() => {
@@ -356,8 +363,8 @@ export default function MilestoneDetailPage() {
<thead><tr><th>Code</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead> <thead><tr><th>Code</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead>
<tbody> <tbody>
{supports.map((i) => ( {supports.map((i) => (
<tr key={i.id} className="clickable" onClick={() => navigate(`/supports/${i.support_code || i.id}`)}> <tr key={i.id} className={i.support_code ? 'clickable' : ''} onClick={() => i.support_code && navigate(`/supports/${i.support_code}`)}>
<td>{i.support_code || i.id}</td> <td>{i.support_code || '—'}</td>
<td className="task-title">{i.title}</td> <td className="task-title">{i.title}</td>
<td><span className={`badge status-${i.status}`}>{i.status}</span></td> <td><span className={`badge status-${i.status}`}>{i.status}</span></td>
<td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td> <td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td>
@@ -373,8 +380,8 @@ export default function MilestoneDetailPage() {
<thead><tr><th>Code</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead> <thead><tr><th>Code</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead>
<tbody> <tbody>
{meetings.map((i) => ( {meetings.map((i) => (
<tr key={i.id} className="clickable" onClick={() => navigate(`/meetings/${i.meeting_code || i.id}`)}> <tr key={i.id} className={i.meeting_code ? 'clickable' : ''} onClick={() => i.meeting_code && navigate(`/meetings/${i.meeting_code}`)}>
<td>{i.meeting_code || i.id}</td> <td>{i.meeting_code || '—'}</td>
<td className="task-title">{i.title}</td> <td className="task-title">{i.title}</td>
<td><span className={`badge status-${i.status}`}>{i.status}</span></td> <td><span className={`badge status-${i.status}`}>{i.status}</span></td>
<td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td> <td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td>

8
src/pages/MilestonesPage.tsx
View File

@@ -13,7 +13,7 @@ export default function MilestonesPage() {
const navigate = useNavigate() const navigate = useNavigate()
const fetchMilestones = () => { const fetchMilestones = () => {
const params = projectFilter ? `?project_id=${projectFilter}` : '' const params = projectFilter ? `?project_code=${projectFilter}` : ''
api.get<Milestone[]>(`/milestones${params}`).then(({ data }) => setMilestones(data)) api.get<Milestone[]>(`/milestones${params}`).then(({ data }) => setMilestones(data))
} }
@@ -35,21 +35,21 @@ export default function MilestonesPage() {
<div className="filters"> <div className="filters">
<select value={projectFilter} onChange={(e) => setProjectFilter(e.target.value)}> <select value={projectFilter} onChange={(e) => setProjectFilter(e.target.value)}>
<option value="">All projects</option> <option value="">All projects</option>
{projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)} {projects.map((p) => <option key={p.id} value={p.project_code || ''}>{p.name}</option>)}
</select> </select>
</div> </div>
<MilestoneFormModal <MilestoneFormModal
isOpen={showCreate} isOpen={showCreate}
onClose={() => setShowCreate(false)} onClose={() => setShowCreate(false)}
initialProjectId={projectFilter ? Number(projectFilter) : undefined} initialProjectCode={projectFilter || undefined}
lockProject={Boolean(projectFilter)} lockProject={Boolean(projectFilter)}
onSaved={() => fetchMilestones()} onSaved={() => fetchMilestones()}
/> />
<div className="milestone-grid"> <div className="milestone-grid">
{milestones.map((ms) => ( {milestones.map((ms) => (
<div key={ms.id} className="milestone-card" onClick={() => navigate(`/milestones/${ms.milestone_code || ms.id}`)}> <div key={ms.id} className="milestone-card" onClick={() => ms.milestone_code && navigate(`/milestones/${ms.milestone_code}`)}>
<div className="milestone-card-header"> <div className="milestone-card-header">
<span className={`badge status-${ms.status}`}>{ms.status}</span> <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>} <h3>{ms.title}</h3>{ms.milestone_code && <span className="badge" style={{ marginLeft: 8, fontSize: '0.75em' }}>{ms.milestone_code}</span>}

2
src/pages/NotificationsPage.tsx
View File

@@ -52,7 +52,7 @@ export default function NotificationsPage() {
className={`notification-item ${n.is_read ? 'read' : 'unread'}`} className={`notification-item ${n.is_read ? 'read' : 'unread'}`}
onClick={() => { onClick={() => {
if (!n.is_read) markRead(n.id) if (!n.is_read) markRead(n.id)
if (n.task_id) navigate(`/tasks/${n.task_id}`) if (n.task_code) navigate(`/tasks/${n.task_code}`)
}} }}
> >
<div className="notification-dot">{n.is_read ? '' : '●'}</div> <div className="notification-dot">{n.is_read ? '' : '●'}</div>

4
src/pages/ProjectDetailPage.tsx
View File

@@ -114,7 +114,7 @@ export default function ProjectDetailPage() {
{canEditProject && <button className="btn-sm" onClick={() => setShowMilestoneModal(true)}>+ New</button>} {canEditProject && <button className="btn-sm" onClick={() => setShowMilestoneModal(true)}>+ New</button>}
</h3> </h3>
{milestones.map((ms) => ( {milestones.map((ms) => (
<div key={ms.id} className="milestone-item" onClick={() => navigate(`/milestones/${ms.milestone_code || ms.id}`)}> <div key={ms.id} className="milestone-item" onClick={() => ms.milestone_code && navigate(`/milestones/${ms.milestone_code}`)}>
<span className={`badge status-${ms.status === 'open' ? '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> <span className="milestone-title">{ms.title}</span>
{ms.due_date && <span className="text-dim"> · Due {dayjs(ms.due_date).format('YYYY-MM-DD')}</span>} {ms.due_date && <span className="text-dim"> · Due {dayjs(ms.due_date).format('YYYY-MM-DD')}</span>}
@@ -136,7 +136,7 @@ export default function ProjectDetailPage() {
<MilestoneFormModal <MilestoneFormModal
isOpen={showMilestoneModal} isOpen={showMilestoneModal}
onClose={() => setShowMilestoneModal(false)} onClose={() => setShowMilestoneModal(false)}
initialProjectId={project.id} initialProjectCode={project.project_code || ''}
lockProject lockProject
onSaved={() => fetchProject()} onSaved={() => fetchProject()}
/> />

58
src/pages/ProposalDetailPage.tsx
View File

@@ -6,15 +6,15 @@ import dayjs from 'dayjs'
import CopyableCode from '@/components/CopyableCode' import CopyableCode from '@/components/CopyableCode'
export default function ProposalDetailPage() { export default function ProposalDetailPage() {
const { id } = useParams() const { proposalCode } = useParams()
const [searchParams] = useSearchParams() const [searchParams] = useSearchParams()
const projectId = searchParams.get('project_id') const projectCode = searchParams.get('project_code')
const navigate = useNavigate() const navigate = useNavigate()
const [proposal, setProposal] = useState<Proposal | null>(null) const [proposal, setProposal] = useState<Proposal | null>(null)
const [milestones, setMilestones] = useState<Milestone[]>([]) const [milestones, setMilestones] = useState<Milestone[]>([])
const [showAccept, setShowAccept] = useState(false) const [showAccept, setShowAccept] = useState(false)
const [selectedMilestone, setSelectedMilestone] = useState<number | ''>('') const [selectedMilestone, setSelectedMilestone] = useState<string>('')
const [actionLoading, setActionLoading] = useState(false) const [actionLoading, setActionLoading] = useState(false)
const [error, setError] = useState('') const [error, setError] = useState('')
@@ -37,38 +37,38 @@ export default function ProposalDetailPage() {
const [essentialLoading, setEssentialLoading] = useState(false) const [essentialLoading, setEssentialLoading] = useState(false)
const fetchProposal = () => { const fetchProposal = () => {
if (!projectId) return if (!projectCode || !proposalCode) return
api.get<Proposal>(`/projects/${projectId}/proposals/${id}`).then(({ data }) => setProposal(data)) api.get<Proposal>(`/projects/${projectCode}/proposals/${proposalCode}`).then(({ data }) => setProposal(data))
} }
useEffect(() => { useEffect(() => {
fetchProposal() fetchProposal()
}, [id, projectId]) }, [proposalCode, projectCode])
const loadMilestones = () => { const loadMilestones = () => {
if (!projectId) return if (!projectCode) return
api.get<Milestone[]>(`/milestones?project_id=${projectId}`) api.get<Milestone[]>(`/milestones?project_code=${projectCode}`)
.then(({ data }) => setMilestones(data.filter((m) => m.status === 'open'))) .then(({ data }) => setMilestones(data.filter((m) => m.status === 'open')))
} }
const fetchEssentials = () => { const fetchEssentials = () => {
if (!projectId || !id) return if (!projectCode || !proposalCode) return
setLoadingEssentials(true) setLoadingEssentials(true)
api.get<Essential[]>(`/projects/${projectId}/proposals/${id}/essentials`) api.get<Essential[]>(`/projects/${projectCode}/proposals/${proposalCode}/essentials`)
.then(({ data }) => setEssentials(data)) .then(({ data }) => setEssentials(data))
.finally(() => setLoadingEssentials(false)) .finally(() => setLoadingEssentials(false))
} }
useEffect(() => { useEffect(() => {
fetchEssentials() fetchEssentials()
}, [id, projectId]) }, [proposalCode, projectCode])
const handleAccept = async () => { const handleAccept = async () => {
if (!selectedMilestone || !projectId) return if (!selectedMilestone || !projectCode || !proposalCode) return
setActionLoading(true) setActionLoading(true)
setError('') setError('')
try { try {
await api.post(`/projects/${projectId}/proposals/${id}/accept`, { milestone_id: selectedMilestone }) await api.post(`/projects/${projectCode}/proposals/${proposalCode}/accept`, { milestone_code: selectedMilestone })
setShowAccept(false) setShowAccept(false)
fetchProposal() fetchProposal()
} catch (err: any) { } catch (err: any) {
@@ -79,12 +79,12 @@ export default function ProposalDetailPage() {
} }
const handleReject = async () => { const handleReject = async () => {
if (!projectId) return if (!projectCode || !proposalCode) return
const reason = prompt('Reject reason (optional):') const reason = prompt('Reject reason (optional):')
setActionLoading(true) setActionLoading(true)
setError('') setError('')
try { try {
await api.post(`/projects/${projectId}/proposals/${id}/reject`, { reason: reason || undefined }) await api.post(`/projects/${projectCode}/proposals/${proposalCode}/reject`, { reason: reason || undefined })
fetchProposal() fetchProposal()
} catch (err: any) { } catch (err: any) {
setError(err.response?.data?.detail || 'Reject failed') setError(err.response?.data?.detail || 'Reject failed')
@@ -102,11 +102,11 @@ export default function ProposalDetailPage() {
} }
const handleEdit = async () => { const handleEdit = async () => {
if (!projectId) return if (!projectCode || !proposalCode) return
setEditLoading(true) setEditLoading(true)
setError('') setError('')
try { try {
await api.patch(`/projects/${projectId}/proposals/${id}`, { await api.patch(`/projects/${projectCode}/proposals/${proposalCode}`, {
title: editTitle, title: editTitle,
description: editDescription, description: editDescription,
}) })
@@ -120,11 +120,11 @@ export default function ProposalDetailPage() {
} }
const handleReopen = async () => { const handleReopen = async () => {
if (!projectId) return if (!projectCode || !proposalCode) return
setActionLoading(true) setActionLoading(true)
setError('') setError('')
try { try {
await api.post(`/projects/${projectId}/proposals/${id}/reopen`) await api.post(`/projects/${projectCode}/proposals/${proposalCode}/reopen`)
fetchProposal() fetchProposal()
} catch (err: any) { } catch (err: any) {
setError(err.response?.data?.detail || 'Reopen failed') setError(err.response?.data?.detail || 'Reopen failed')
@@ -151,18 +151,18 @@ export default function ProposalDetailPage() {
} }
const handleSaveEssential = async () => { const handleSaveEssential = async () => {
if (!projectId || !id) return if (!projectCode || !proposalCode) return
setEssentialLoading(true) setEssentialLoading(true)
setError('') setError('')
try { try {
if (editingEssential) { if (editingEssential) {
await api.patch(`/projects/${projectId}/proposals/${id}/essentials/${editingEssential.id}`, { await api.patch(`/projects/${projectCode}/proposals/${proposalCode}/essentials/${editingEssential.essential_code}`, {
title: essentialTitle, title: essentialTitle,
type: essentialType, type: essentialType,
description: essentialDesc || null, description: essentialDesc || null,
}) })
} else { } else {
await api.post(`/projects/${projectId}/proposals/${id}/essentials`, { await api.post(`/projects/${projectCode}/proposals/${proposalCode}/essentials`, {
title: essentialTitle, title: essentialTitle,
type: essentialType, type: essentialType,
description: essentialDesc || null, description: essentialDesc || null,
@@ -177,12 +177,12 @@ export default function ProposalDetailPage() {
} }
} }
const handleDeleteEssential = async (essentialId: number) => { const handleDeleteEssential = async (essentialCode: string) => {
if (!projectId || !id) return if (!projectCode || !proposalCode) return
if (!confirm('Are you sure you want to delete this Essential?')) return if (!confirm('Are you sure you want to delete this Essential?')) return
setEssentialLoading(true) setEssentialLoading(true)
try { try {
await api.delete(`/projects/${projectId}/proposals/${id}/essentials/${essentialId}`) await api.delete(`/projects/${projectCode}/proposals/${proposalCode}/essentials/${essentialCode}`)
fetchEssentials() fetchEssentials()
} catch (err: any) { } catch (err: any) {
setError(err.response?.data?.detail || 'Delete failed') setError(err.response?.data?.detail || 'Delete failed')
@@ -266,7 +266,7 @@ export default function ProposalDetailPage() {
<button <button
className="btn-danger" className="btn-danger"
style={{ padding: '4px 8px', fontSize: '0.8rem' }} style={{ padding: '4px 8px', fontSize: '0.8rem' }}
onClick={() => handleDeleteEssential(e.id)} onClick={() => handleDeleteEssential(e.essential_code)}
> >
Delete Delete
</button> </button>
@@ -291,7 +291,7 @@ export default function ProposalDetailPage() {
<div <div
key={gt.task_id} key={gt.task_id}
className="milestone-card" className="milestone-card"
onClick={() => navigate(`/tasks/${gt.task_code || gt.task_id}`)} onClick={() => gt.task_code && navigate(`/tasks/${gt.task_code}`)}
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
> >
<div className="milestone-card-header"> <div className="milestone-card-header">
@@ -387,11 +387,11 @@ export default function ProposalDetailPage() {
<p>Select an <strong>open</strong> milestone to generate story tasks in:</p> <p>Select an <strong>open</strong> milestone to generate story tasks in:</p>
<select <select
value={selectedMilestone} value={selectedMilestone}
onChange={(e) => setSelectedMilestone(Number(e.target.value))} onChange={(e) => setSelectedMilestone(e.target.value)}
> >
<option value="">— Select milestone —</option> <option value="">— Select milestone —</option>
{milestones.map((ms) => ( {milestones.map((ms) => (
<option key={ms.id} value={ms.id}>{ms.title}</option> <option key={ms.id} value={ms.milestone_code || ''}>{ms.title}</option>
))} ))}
</select> </select>
{milestones.length === 0 && ( {milestones.length === 0 && (

4
src/pages/ProposalsPage.tsx
View File

@@ -64,7 +64,7 @@ export default function ProposalsPage() {
<div className="filters"> <div className="filters">
<select value={projectFilter} onChange={(e) => setProjectFilter(e.target.value)}> <select value={projectFilter} onChange={(e) => setProjectFilter(e.target.value)}>
<option value="">Select a project</option> <option value="">Select a project</option>
{projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)} {projects.map((p) => <option key={p.id} value={p.project_code || ''}>{p.name}</option>)}
</select> </select>
</div> </div>
@@ -72,7 +72,7 @@ export default function ProposalsPage() {
<div className="milestone-grid"> <div className="milestone-grid">
{proposals.map((pr) => ( {proposals.map((pr) => (
<div key={pr.id} className="milestone-card" onClick={() => navigate(`/proposals/${pr.proposal_code || pr.id}?project_id=${pr.project_id}`)}> <div key={pr.id} className="milestone-card" onClick={() => pr.proposal_code && pr.project_code && navigate(`/proposals/${pr.proposal_code}?project_code=${pr.project_code}`)}>
<div className="milestone-card-header"> <div className="milestone-card-header">
<span className={`badge ${statusBadgeClass(pr.status)}`}>{pr.status}</span> <span className={`badge ${statusBadgeClass(pr.status)}`}>{pr.status}</span>
{pr.proposal_code && <span className="badge">{pr.proposal_code}</span>} {pr.proposal_code && <span className="badge">{pr.proposal_code}</span>}

14
src/pages/SupportDetailPage.tsx
View File

@@ -27,7 +27,7 @@ const STATUS_OPTIONS = ['open', 'in_progress', 'resolved', 'closed']
const PRIORITY_OPTIONS = ['low', 'medium', 'high', 'critical'] const PRIORITY_OPTIONS = ['low', 'medium', 'high', 'critical']
export default function SupportDetailPage() { export default function SupportDetailPage() {
const { supportId } = useParams() const { supportCode } = useParams()
const navigate = useNavigate() const navigate = useNavigate()
const { user } = useAuth() const { user } = useAuth()
const [support, setSupport] = useState<SupportItem | null>(null) const [support, setSupport] = useState<SupportItem | null>(null)
@@ -40,7 +40,7 @@ export default function SupportDetailPage() {
const fetchSupport = async () => { const fetchSupport = async () => {
try { try {
const { data } = await api.get<SupportItem>(`/supports/${supportId}`) const { data } = await api.get<SupportItem>(`/supports/${supportCode}`)
setSupport(data) setSupport(data)
setEditForm({ setEditForm({
title: data.title, title: data.title,
@@ -56,14 +56,14 @@ export default function SupportDetailPage() {
useEffect(() => { useEffect(() => {
fetchSupport() fetchSupport()
}, [supportId]) }, [supportCode])
const handleTake = async () => { const handleTake = async () => {
if (!support) return if (!support) return
setSaving(true) setSaving(true)
setMessage('') setMessage('')
try { try {
const { data } = await api.post<SupportItem>(`/supports/${supportId}/take`) const { data } = await api.post<SupportItem>(`/supports/${supportCode}/take`)
setSupport(data) setSupport(data)
setMessage('You have taken this support ticket') setMessage('You have taken this support ticket')
} catch (err: any) { } catch (err: any) {
@@ -78,7 +78,7 @@ export default function SupportDetailPage() {
setSaving(true) setSaving(true)
setMessage('') setMessage('')
try { try {
const { data } = await api.post<SupportItem>(`/supports/${supportId}/transition`, { const { data } = await api.post<SupportItem>(`/supports/${supportCode}/transition`, {
status: transitionStatus, status: transitionStatus,
}) })
setSupport(data) setSupport(data)
@@ -106,7 +106,7 @@ export default function SupportDetailPage() {
return return
} }
const { data } = await api.patch<SupportItem>(`/supports/${supportId}`, payload) const { data } = await api.patch<SupportItem>(`/supports/${supportCode}`, payload)
setSupport(data) setSupport(data)
setEditMode(false) setEditMode(false)
setMessage('Support ticket updated') setMessage('Support ticket updated')
@@ -122,7 +122,7 @@ export default function SupportDetailPage() {
if (!confirm(`Delete support ticket ${support.support_code || support.id}? This cannot be undone.`)) return if (!confirm(`Delete support ticket ${support.support_code || support.id}? This cannot be undone.`)) return
setSaving(true) setSaving(true)
try { try {
await api.delete(`/supports/${supportId}`) await api.delete(`/supports/${supportCode}`)
navigate(-1) navigate(-1)
} catch (err: any) { } catch (err: any) {
setMessage(err.response?.data?.detail || 'Failed to delete support ticket') setMessage(err.response?.data?.detail || 'Failed to delete support ticket')

21
src/pages/TaskDetailPage.tsx
View File

@@ -8,7 +8,7 @@ import CreateTaskModal from '@/components/CreateTaskModal'
import CopyableCode from '@/components/CopyableCode' import CopyableCode from '@/components/CopyableCode'
export default function TaskDetailPage() { export default function TaskDetailPage() {
const { id } = useParams() const { taskCode } = useParams()
const navigate = useNavigate() const navigate = useNavigate()
const { user } = useAuth() const { user } = useAuth()
const [task, setTask] = useState<Task | null>(null) const [task, setTask] = useState<Task | null>(null)
@@ -26,27 +26,30 @@ export default function TaskDetailPage() {
const [closeReason, setCloseReason] = useState('') const [closeReason, setCloseReason] = useState('')
const refreshTask = async () => { const refreshTask = async () => {
const { data } = await api.get<Task>(`/tasks/${id}`) if (!taskCode) return
const { data } = await api.get<Task>(`/tasks/${taskCode}`)
setTask(data) setTask(data)
if (data.project_id) { if (data.project_id) {
api.get<Project>(`/projects/${data.project_id}`).then(({ data }) => setProject(data)).catch(() => {}) api.get<Project>(`/projects/${data.project_id}`).then(({ data }) => setProject(data)).catch(() => {})
api.get<ProjectMember[]>(`/projects/${data.project_id}/members`).then(({ data }) => setMembers(data)).catch(() => {}) api.get<ProjectMember[]>(`/projects/${data.project_id}/members`).then(({ data }) => setMembers(data)).catch(() => {})
} }
if (data.milestone_id) { if (data.milestone_code) {
api.get<Milestone>(`/milestones/${data.milestone_id}`).then(({ data }) => setMilestone(data)).catch(() => {}) api.get<Milestone>(`/milestones/${data.milestone_code}`).then(({ data }) => setMilestone(data)).catch(() => {})
} }
} }
useEffect(() => { useEffect(() => {
refreshTask().catch(console.error) refreshTask().catch(console.error)
api.get<Comment[]>(`/tasks/${id}/comments`).then(({ data }) => setComments(data)) if (taskCode) {
}, [id]) api.get<Comment[]>(`/tasks/${taskCode}/comments`).then(({ data }) => setComments(data))
}
}, [taskCode])
const addComment = async () => { const addComment = async () => {
if (!newComment.trim() || !task) return if (!newComment.trim() || !task) return
await api.post('/comments', { content: newComment, task_id: task.id, author_id: 1 }) await api.post('/comments', { content: newComment, task_id: task.id, author_id: 1 })
setNewComment('') setNewComment('')
const { data } = await api.get<Comment[]>(`/tasks/${id}/comments`) const { data } = await api.get<Comment[]>(`/tasks/${taskCode}/comments`)
setComments(data) setComments(data)
} }
@@ -54,10 +57,10 @@ export default function TaskDetailPage() {
setActionLoading(actionName) setActionLoading(actionName)
setActionError(null) setActionError(null)
try { try {
await api.post(`/tasks/${id}/transition?new_status=${newStatus}`, body || {}) await api.post(`/tasks/${taskCode}/transition?new_status=${newStatus}`, body || {})
await refreshTask() await refreshTask()
// refresh comments too (finish adds one via backend) // refresh comments too (finish adds one via backend)
const { data } = await api.get<Comment[]>(`/tasks/${id}/comments`) const { data } = await api.get<Comment[]>(`/tasks/${taskCode}/comments`)
setComments(data) setComments(data)
} catch (err: any) { } catch (err: any) {
setActionError(err?.response?.data?.detail || err?.message || 'Action failed') setActionError(err?.response?.data?.detail || err?.message || 'Action failed')

4
src/pages/TasksPage.tsx
View File

@@ -64,8 +64,8 @@ export default function TasksPage() {
</thead> </thead>
<tbody> <tbody>
{tasks.map((t) => ( {tasks.map((t) => (
<tr key={t.id} onClick={() => navigate(`/tasks/${t.task_code || t.id}`)} className="clickable"> <tr key={t.id} onClick={() => t.task_code && navigate(`/tasks/${t.task_code}`)} className={t.task_code ? 'clickable' : ''}>
<td>{t.task_code || t.id}</td> <td>{t.task_code || '—'}</td>
<td className="task-title">{t.title}</td> <td className="task-title">{t.title}</td>
<td><span className="badge" style={{ backgroundColor: statusColors[t.status] || '#ccc' }}>{t.status}</span></td> <td><span className="badge" style={{ backgroundColor: statusColors[t.status] || '#ccc' }}>{t.status}</span></td>
<td><span className={`badge priority-${t.priority}`}>{t.priority}</span></td> <td><span className={`badge priority-${t.priority}`}>{t.priority}</span></td>

8
src/test/setup.ts
View File

@@ -15,13 +15,15 @@ const localStorageMock = {
vi.stubGlobal('localStorage', localStorageMock) vi.stubGlobal('localStorage', localStorageMock)
// Mock window.location // Mock window.location
delete window.location Object.defineProperty(window, 'location', {
window.location = Object.defineProperties({}, { configurable: true,
value: Object.defineProperties({}, {
pathname: { value: '/calendar', writable: true }, pathname: { value: '/calendar', writable: true },
href: { value: 'http://localhost/calendar', writable: true }, href: { value: 'http://localhost/calendar', writable: true },
assign: { value: vi.fn(), writable: true }, assign: { value: vi.fn(), writable: true },
replace: { value: vi.fn(), writable: true }, replace: { value: vi.fn(), writable: true },
}) as any }) as any,
})
// Mock matchMedia // Mock matchMedia
Object.defineProperty(window, 'matchMedia', { Object.defineProperty(window, 'matchMedia', {

5
src/types/index.ts
View File

@@ -36,6 +36,8 @@ export interface ProjectMember {
export interface Task { export interface Task {
id: number id: number
task_code: string | null task_code: string | null
project_code?: string | null
milestone_code?: string | null
title: string title: string
description: string | null description: string | null
task_type: 'issue' | 'maintenance' | 'research' | 'review' | 'story' | 'test' | 'resolution' // P7.1: 'task' removed task_type: 'issue' | 'maintenance' | 'research' | 'review' | 'story' | 'test' | 'resolution' // P7.1: 'task' removed
@@ -69,6 +71,7 @@ export interface Comment {
export interface Milestone { export interface Milestone {
id: number id: number
milestone_code: string | null milestone_code: string | null
project_code?: string | null
title: string title: string
description: string | null description: string | null
status: 'open' | 'freeze' | 'undergoing' | 'completed' | 'closed' status: 'open' | 'freeze' | 'undergoing' | 'completed' | 'closed'
@@ -106,6 +109,7 @@ export interface Notification {
message: string message: string
is_read: boolean is_read: boolean
task_id: number | null task_id: number | null
task_code?: string | null
created_at: string created_at: string
} }
@@ -134,6 +138,7 @@ export interface Proposal {
description: string | null description: string | null
status: 'open' | 'accepted' | 'rejected' status: 'open' | 'accepted' | 'rejected'
project_id: number project_id: number
project_code?: string | null
created_by_id: number | null created_by_id: number | null
created_by_username: string | null created_by_username: string | null
feat_task_id: string | null feat_task_id: string | null