src/pages/MilestonesPage.tsx

@@ -49,10 +49,10 @@ export default function MilestonesPage() {
 
       <div className="milestone-grid">
         {milestones.map((ms) => (
-          <div key={ms.id} className="milestone-card" onClick={() => navigate(`/milestones/${ms.id}`)}>
+          <div key={ms.id} className="milestone-card" onClick={() => navigate(`/milestones/${ms.milestone_code || ms.id}`)}>
             <div className="milestone-card-header">
               <span className={`badge status-${ms.status}`}>{ms.status}</span>
-              <h3>{ms.title}</h3>
+              <h3>{ms.title}</h3>{ms.milestone_code && <span className="badge" style={{ marginLeft: 8, fontSize: '0.75em' }}>{ms.milestone_code}</span>}
             </div>
             <p className="project-desc">{ms.description || 'No description'}</p>
             <div className="project-meta">

src/pages/ProjectsPage.tsx

@@ -31,7 +31,7 @@ export default function ProjectsPage() {
 
       <div className="project-grid">
         {projects.map((p) => (
-          <div key={p.id} className="project-card" onClick={() => navigate(`/projects/${p.id}`)}>
+          <div key={p.id} className="project-card" onClick={() => navigate(`/projects/${p.project_code || p.id}`)}>
             <h3>{p.name}</h3>{p.project_code && <span className="badge" style={{ marginLeft: 8 }}>{p.project_code}</span>}
             <p className="project-desc">{p.description || 'No description'}</p>
             <div className="project-meta">

src/pages/ProposesPage.tsx

@@ -72,7 +72,7 @@ export default function ProposesPage() {
 
       <div className="milestone-grid">
         {proposes.map((pr) => (
-          <div key={pr.id} className="milestone-card" onClick={() => navigate(`/proposes/${pr.id}?project_id=${pr.project_id}`)}>
+          <div key={pr.id} className="milestone-card" onClick={() => navigate(`/proposes/${pr.propose_code || pr.id}?project_id=${pr.project_id}`)}>
             <div className="milestone-card-header">
               <span className={`badge ${statusBadgeClass(pr.status)}`}>{pr.status}</span>
               {pr.propose_code && <span className="badge">{pr.propose_code}</span>}

src/pages/TasksPage.tsx

@@ -65,7 +65,7 @@ export default function TasksPage() {
         <tbody>
           {tasks.map((t) => (
             <tr key={t.id} onClick={() => navigate(`/tasks/${t.id}`)} className="clickable">
-              <td>{t.id}</td>
+              <td>{t.task_code || t.id}</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>

src/types/index.ts

@@ -33,6 +33,7 @@ export interface ProjectMember {
 
 export interface Task {
   id: number
+  task_code: string | null
   title: string
   description: string | null
   task_type: 'issue' | 'maintenance' | 'research' | 'review' | 'story' | 'test' | 'resolution'  // P7.1: 'task' removed
@@ -64,6 +65,7 @@ export interface Comment {
 
 export interface Milestone {
   id: number
+  milestone_code: string | null
   title: string
   description: string | null
   status: 'open' | 'freeze' | 'undergoing' | 'completed' | 'closed'