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>
<Route path="/" element={<DashboardPage />} />
<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/:id" element={<ProjectDetailPage />} />
<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/:id" element={<ProposalDetailPage />} />
<Route path="/proposals/:proposalCode" element={<ProposalDetailPage />} />
<Route path="/calendar" element={<CalendarPage />} />
{/* Legacy routes for backward compatibility */}
<Route path="/proposes" element={<ProposalsPage />} />
<Route path="/proposes/:id" element={<ProposalDetailPage />} />
<Route path="/meetings/:meetingId" element={<MeetingDetailPage />} />
<Route path="/supports/:supportId" element={<SupportDetailPage />} />
<Route path="/proposes/:proposalCode" element={<ProposalDetailPage />} />
<Route path="/meetings/:meetingCode" element={<MeetingDetailPage />} />
<Route path="/supports/:supportCode" element={<SupportDetailPage />} />
<Route path="/notifications" element={<NotificationsPage />} />
<Route path="/roles" element={<RoleEditorPage />} />
<Route path="/users" element={<UsersPage />} />

70
src/components/CreateTaskModal.tsx
View File

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

22
src/components/MilestoneFormModal.tsx
View File

@@ -7,14 +7,14 @@ type Props = {
onClose: () => void
onSaved?: (milestone: Milestone) => void | Promise<void>
milestone?: Milestone | null
initialProjectId?: number
initialProjectCode?: string
lockProject?: boolean
}
type FormState = {
title: string
description: string
project_id: number
project_code: string
status: string
due_date: string
planned_release_date: string
@@ -23,7 +23,7 @@ type FormState = {
const emptyForm: FormState = {
title: '',
description: '',
project_id: 0,
project_code: '',
status: 'open',
due_date: '',
planned_release_date: '',
@@ -31,7 +31,7 @@ const emptyForm: FormState = {
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 [saving, setSaving] = useState(false)
const [form, setForm] = useState<FormState>(emptyForm)
@@ -42,11 +42,11 @@ export default function MilestoneFormModal({ isOpen, onClose, onSaved, milestone
const init = async () => {
const { data } = await api.get<Project[]>('/projects')
setProjects(data)
const defaultProjectId = milestone?.project_id || initialProjectId || data[0]?.id || 0
const defaultProjectCode = milestone?.project_code || initialProjectCode || data[0]?.project_code || ''
setForm({
title: milestone?.title || '',
description: milestone?.description || '',
project_id: defaultProjectId,
project_code: defaultProjectCode,
status: milestone?.status || 'open',
due_date: toDateInput(milestone?.due_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)
}, [isOpen, milestone, initialProjectId])
}, [isOpen, milestone, initialProjectCode])
const submit = async (e: React.FormEvent) => {
e.preventDefault()
@@ -63,13 +63,13 @@ export default function MilestoneFormModal({ isOpen, onClose, onSaved, milestone
const payload = {
title: form.title,
description: form.description || null,
project_id: form.project_id,
project_code: form.project_code,
status: form.status,
due_date: form.due_date || null,
planned_release_date: form.planned_release_date || null,
}
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)
} else {
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">
<label>
Project
<select value={form.project_id} onChange={(e) => setForm((f) => ({ ...f, project_id: Number(e.target.value) }))} disabled={lockProject}>
{projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
<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.project_code || ''}>{p.name}</option>)}
</select>
</label>

28
src/pages/CreateTaskPage.tsx
View File

@@ -19,7 +19,7 @@ export default function CreateTaskPage() {
const [projects, setProjects] = useState<Project[]>([])
const [milestones, setMilestones] = useState<Milestone[]>([])
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,
})
@@ -27,21 +27,21 @@ export default function CreateTaskPage() {
api.get<Project[]>('/projects').then(({ data }) => {
setProjects(data)
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
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)
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) => {
setForm(f => ({ ...f, project_id: projectId, milestone_id: 0 }))
api.get<Milestone[]>(`/milestones?project_id=${projectId}`).then(({ data: ms }) => {
const handleProjectChange = (projectCode: string) => {
setForm(f => ({ ...f, project_code: projectCode, milestone_code: '' }))
api.get<Milestone[]>(`/milestones?project_code=${projectCode}`).then(({ data: 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) => {
e.preventDefault()
if (!form.milestone_id) {
if (!form.milestone_code) {
alert('Please select a milestone')
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>Description <textarea data-testid="task-description-input" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} /></label>
<label>Projects
<select data-testid="project-select" value={form.project_id} onChange={(e) => handleProjectChange(Number(e.target.value))}>
{projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
<select data-testid="project-select" value={form.project_code} onChange={(e) => handleProjectChange(e.target.value)}>
{projects.map((p) => <option key={p.id} value={p.project_code || ''}>{p.name}</option>)}
</select>
</label>
<label>Milestone
<select data-testid="milestone-select" value={form.milestone_id} onChange={(e) => setForm({ ...form, milestone_id: Number(e.target.value) })}>
{milestones.length === 0 && <option value={0}>No milestones available</option>}
{milestones.map((m) => <option key={m.id} value={m.id}>{m.title}</option>)}
<select data-testid="milestone-select" value={form.milestone_code} onChange={(e) => setForm({ ...form, milestone_code: e.target.value })}>
{milestones.length === 0 && <option value="">No milestones available</option>}
{milestones.map((m) => <option key={m.id} value={m.milestone_code || ''}>{m.title}</option>)}
</select>
</label>
<label>Type

5
src/pages/DashboardPage.tsx
View File

@@ -1,4 +1,5 @@
import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import api from '@/services/api'
import type { DashboardStats, Task } from '@/types'
@@ -60,8 +61,8 @@ export default function DashboardPage() {
<tbody>
{(stats.recent_tasks || []).map((i) => (
<tr key={i.id}>
<td>{i.task_code || `#${i.id}`}</td>
<td><a href={`/tasks/${i.task_code || i.id}`}>{i.title}</a></td>
<td>{i.task_code || '—'}</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 priority-${i.priority}`}>{i.priority}</span></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']
export default function MeetingDetailPage() {
const { meetingId } = useParams()
const { meetingCode } = useParams()
const navigate = useNavigate()
const { user } = useAuth()
const [meeting, setMeeting] = useState<MeetingItem | null>(null)
@@ -46,7 +46,7 @@ export default function MeetingDetailPage() {
const fetchMeeting = async () => {
try {
const { data } = await api.get<MeetingItem>(`/meetings/${meetingId}`)
const { data } = await api.get<MeetingItem>(`/meetings/${meetingCode}`)
setMeeting(data)
setEditForm({
title: data.title,
@@ -63,14 +63,14 @@ export default function MeetingDetailPage() {
useEffect(() => {
fetchMeeting()
}, [meetingId])
}, [meetingCode])
const handleAttend = async () => {
if (!meeting) return
setSaving(true)
setMessage('')
try {
const { data } = await api.post<MeetingItem>(`/meetings/${meetingId}/attend`)
const { data } = await api.post<MeetingItem>(`/meetings/${meetingCode}/attend`)
setMeeting(data)
setMessage('You have joined this meeting')
} catch (err: any) {
@@ -85,7 +85,7 @@ export default function MeetingDetailPage() {
setSaving(true)
setMessage('')
try {
const { data } = await api.patch<MeetingItem>(`/meetings/${meetingId}`, {
const { data } = await api.patch<MeetingItem>(`/meetings/${meetingCode}`, {
status: newStatus,
})
setMeeting(data)
@@ -117,7 +117,7 @@ export default function MeetingDetailPage() {
return
}
const { data } = await api.patch<MeetingItem>(`/meetings/${meetingId}`, payload)
const { data } = await api.patch<MeetingItem>(`/meetings/${meetingCode}`, payload)
setMeeting(data)
setEditMode(false)
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
setSaving(true)
try {
await api.delete(`/meetings/${meetingId}`)
await api.delete(`/meetings/${meetingCode}`)
navigate(-1)
} catch (err: any) {
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() {
const { id } = useParams()
const { milestoneCode } = useParams()
const navigate = useNavigate()
const { user } = useAuth()
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 fetchMilestone = () => {
api.get<Milestone>(`/milestones/${id}`).then(({ data }) => {
if (!milestoneCode) return
api.get<Milestone>(`/milestones/${milestoneCode}`).then(({ data }) => {
setMilestone(data)
if (data.project_id) {
api.get<Project>(`/projects/${data.project_id}`).then(({ data: proj }) => {
@@ -57,40 +58,44 @@ export default function MilestoneDetailPage() {
setProjectCode(proj.project_code || '')
})
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) => {
api.get(`/projects/${projectId}/milestones/${milestoneId}/actions/preflight`)
const fetchPreflight = (projectCode: string, milestoneCode: string) => {
api.get(`/projects/${projectCode}/milestones/${milestoneCode}/actions/preflight`)
.then(({ data }) => setPreflight(data))
.catch(() => setPreflight(null))
}
useEffect(() => {
fetchMilestone()
}, [id])
}, [milestoneCode])
const refreshMilestoneItems = () => {
if (!projectCode || !milestone) return
api.get<MilestoneTask[]>(`/tasks/${projectCode}/${milestone.id}`).then(({ data }) => setTasks(data)).catch(() => {})
api.get<any[]>(`/supports/${projectCode}/${milestone.id}`).then(({ data }) => setSupports(data)).catch(() => {})
api.get<any[]>(`/meetings/${projectCode}/${milestone.id}`).then(({ data }) => setMeetings(data)).catch(() => {})
if (!projectCode || !milestone?.milestone_code) return
api.get<MilestoneTask[]>(`/tasks/${projectCode}/${milestone.milestone_code}`).then(({ data }) => setTasks(data)).catch(() => {})
api.get<any[]>(`/supports/${projectCode}/${milestone.milestone_code}`).then(({ data }) => setSupports(data)).catch(() => {})
api.get<any[]>(`/meetings/${projectCode}/${milestone.milestone_code}`).then(({ data }) => setMeetings(data)).catch(() => {})
}
useEffect(() => {
refreshMilestoneItems()
}, [projectCode, milestone?.id])
}, [projectCode, milestone?.milestone_code])
const createItem = async (type: 'supports' | 'meetings') => {
if (!newTitle.trim() || !projectCode || !milestone) return
if (!newTitle.trim() || !projectCode || !milestone?.milestone_code) return
const payload = {
title: newTitle,
description: newDesc || null,
}
await api.post(`/${type}/${projectCode}/${milestone.id}`, payload)
await api.post(`/${type}/${projectCode}/${milestone.milestone_code}`, payload)
setNewTitle('')
setNewDesc('')
setShowCreateSupport(false)
@@ -119,10 +124,12 @@ export default function MilestoneDetailPage() {
setActionLoading(action)
setActionError(null)
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()
refreshMilestoneItems()
fetchPreflight(project.id, milestone.id)
if (project.project_code && milestone.milestone_code) {
fetchPreflight(project.project_code, milestone.milestone_code)
}
} catch (err: any) {
const detail = err?.response?.data?.detail
setActionError(typeof detail === 'string' ? detail : `${action} failed`)
@@ -142,8 +149,8 @@ export default function MilestoneDetailPage() {
if (!milestone) return <div className="loading">Loading...</div>
const renderTaskRow = (t: MilestoneTask) => (
<tr key={t.id} className="clickable" onClick={() => navigate(`/tasks/${t.task_code || t.id}`)}>
<td>{t.task_code || t.id}</td>
<tr key={t.id} className={t.task_code ? 'clickable' : ''} onClick={() => t.task_code && navigate(`/tasks/${t.task_code}`)}>
<td>{t.task_code || '—'}</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>{t.estimated_effort || '-'}</td>
@@ -297,8 +304,8 @@ export default function MilestoneDetailPage() {
<CreateTaskModal
isOpen={showCreateTask}
onClose={() => setShowCreateTask(false)}
initialProjectId={milestone.project_id}
initialMilestoneId={milestone.id}
initialProjectCode={milestone.project_code || ''}
initialMilestoneCode={milestone.milestone_code || ''}
lockProject
lockMilestone
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>
<tbody>
{supports.map((i) => (
<tr key={i.id} className="clickable" onClick={() => navigate(`/supports/${i.support_code || i.id}`)}>
<td>{i.support_code || i.id}</td>
<tr key={i.id} className={i.support_code ? 'clickable' : ''} onClick={() => i.support_code && navigate(`/supports/${i.support_code}`)}>
<td>{i.support_code || '—'}</td>
<td className="task-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>
@@ -373,8 +380,8 @@ export default function MilestoneDetailPage() {
<thead><tr><th>Code</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/${i.meeting_code || i.id}`)}>
<td>{i.meeting_code || i.id}</td>
<tr key={i.id} className={i.meeting_code ? 'clickable' : ''} onClick={() => i.meeting_code && navigate(`/meetings/${i.meeting_code}`)}>
<td>{i.meeting_code || '—'}</td>
<td className="task-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>

8
src/pages/MilestonesPage.tsx
View File

@@ -13,7 +13,7 @@ export default function MilestonesPage() {
const navigate = useNavigate()
const fetchMilestones = () => {
const params = projectFilter ? `?project_id=${projectFilter}` : ''
const params = projectFilter ? `?project_code=${projectFilter}` : ''
api.get<Milestone[]>(`/milestones${params}`).then(({ data }) => setMilestones(data))
}
@@ -35,21 +35,21 @@ export default function MilestonesPage() {
<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>)}
{projects.map((p) => <option key={p.id} value={p.project_code || ''}>{p.name}</option>)}
</select>
</div>
<MilestoneFormModal
isOpen={showCreate}
onClose={() => setShowCreate(false)}
initialProjectId={projectFilter ? Number(projectFilter) : undefined}
initialProjectCode={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 key={ms.id} className="milestone-card" onClick={() => ms.milestone_code && navigate(`/milestones/${ms.milestone_code}`)}>
<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>}

2
src/pages/NotificationsPage.tsx
View File

@@ -52,7 +52,7 @@ export default function NotificationsPage() {
className={`notification-item ${n.is_read ? 'read' : 'unread'}`}
onClick={() => {
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>

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>}
</h3>
{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="milestone-title">{ms.title}</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
isOpen={showMilestoneModal}
onClose={() => setShowMilestoneModal(false)}
initialProjectId={project.id}
initialProjectCode={project.project_code || ''}
lockProject
onSaved={() => fetchProject()}
/>

58
src/pages/ProposalDetailPage.tsx
View File

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

4
src/pages/ProposalsPage.tsx
View File

@@ -64,7 +64,7 @@ export default function ProposalsPage() {
<div className="filters">
<select value={projectFilter} onChange={(e) => setProjectFilter(e.target.value)}>
<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>
</div>
@@ -72,7 +72,7 @@ export default function ProposalsPage() {
<div className="milestone-grid">
{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">
<span className={`badge ${statusBadgeClass(pr.status)}`}>{pr.status}</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']
export default function SupportDetailPage() {
const { supportId } = useParams()
const { supportCode } = useParams()
const navigate = useNavigate()
const { user } = useAuth()
const [support, setSupport] = useState<SupportItem | null>(null)
@@ -40,7 +40,7 @@ export default function SupportDetailPage() {
const fetchSupport = async () => {
try {
const { data } = await api.get<SupportItem>(`/supports/${supportId}`)
const { data } = await api.get<SupportItem>(`/supports/${supportCode}`)
setSupport(data)
setEditForm({
title: data.title,
@@ -56,14 +56,14 @@ export default function SupportDetailPage() {
useEffect(() => {
fetchSupport()
}, [supportId])
}, [supportCode])
const handleTake = async () => {
if (!support) return
setSaving(true)
setMessage('')
try {
const { data } = await api.post<SupportItem>(`/supports/${supportId}/take`)
const { data } = await api.post<SupportItem>(`/supports/${supportCode}/take`)
setSupport(data)
setMessage('You have taken this support ticket')
} catch (err: any) {
@@ -78,7 +78,7 @@ export default function SupportDetailPage() {
setSaving(true)
setMessage('')
try {
const { data } = await api.post<SupportItem>(`/supports/${supportId}/transition`, {
const { data } = await api.post<SupportItem>(`/supports/${supportCode}/transition`, {
status: transitionStatus,
})
setSupport(data)
@@ -106,7 +106,7 @@ export default function SupportDetailPage() {
return
}
const { data } = await api.patch<SupportItem>(`/supports/${supportId}`, payload)
const { data } = await api.patch<SupportItem>(`/supports/${supportCode}`, payload)
setSupport(data)
setEditMode(false)
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
setSaving(true)
try {
await api.delete(`/supports/${supportId}`)
await api.delete(`/supports/${supportCode}`)
navigate(-1)
} catch (err: any) {
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'
export default function TaskDetailPage() {
const { id } = useParams()
const { taskCode } = useParams()
const navigate = useNavigate()
const { user } = useAuth()
const [task, setTask] = useState<Task | null>(null)
@@ -26,27 +26,30 @@ export default function TaskDetailPage() {
const [closeReason, setCloseReason] = useState('')
const refreshTask = async () => {
const { data } = await api.get<Task>(`/tasks/${id}`)
if (!taskCode) return
const { data } = await api.get<Task>(`/tasks/${taskCode}`)
setTask(data)
if (data.project_id) {
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(() => {})
}
if (data.milestone_id) {
api.get<Milestone>(`/milestones/${data.milestone_id}`).then(({ data }) => setMilestone(data)).catch(() => {})
if (data.milestone_code) {
api.get<Milestone>(`/milestones/${data.milestone_code}`).then(({ data }) => setMilestone(data)).catch(() => {})
}
}
useEffect(() => {
refreshTask().catch(console.error)
api.get<Comment[]>(`/tasks/${id}/comments`).then(({ data }) => setComments(data))
}, [id])
if (taskCode) {
api.get<Comment[]>(`/tasks/${taskCode}/comments`).then(({ data }) => setComments(data))
}
}, [taskCode])
const addComment = async () => {
if (!newComment.trim() || !task) return
await api.post('/comments', { content: newComment, task_id: task.id, author_id: 1 })
setNewComment('')
const { data } = await api.get<Comment[]>(`/tasks/${id}/comments`)
const { data } = await api.get<Comment[]>(`/tasks/${taskCode}/comments`)
setComments(data)
}
@@ -54,10 +57,10 @@ export default function TaskDetailPage() {
setActionLoading(actionName)
setActionError(null)
try {
await api.post(`/tasks/${id}/transition?new_status=${newStatus}`, body || {})
await api.post(`/tasks/${taskCode}/transition?new_status=${newStatus}`, body || {})
await refreshTask()
// 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)
} catch (err: any) {
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>
<tbody>
{tasks.map((t) => (
<tr key={t.id} onClick={() => navigate(`/tasks/${t.task_code || t.id}`)} className="clickable">
<td>{t.task_code || t.id}</td>
<tr key={t.id} onClick={() => t.task_code && navigate(`/tasks/${t.task_code}`)} className={t.task_code ? 'clickable' : ''}>
<td>{t.task_code || '—'}</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 priority-${t.priority}`}>{t.priority}</span></td>

8
src/test/setup.ts
View File

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

5
src/types/index.ts
View File

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