From 41ebd3621829280b85c5702bce891a3a5fd7b8e1 Mon Sep 17 00:00:00 2001
From: zhi <zhi@dev.hangman-lab.top>
Date: Sat, 21 Mar 2026 21:38:14 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20code-first=20navigation=20=E2=80=94=20u?=
 =?UTF-8?q?se=20resource=20codes=20in=20links=20and=20displays?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- DashboardPage: show task_code instead of #id, link via code
- TasksPage: navigate to tasks via task_code
- MilestoneDetailPage: navigate to tasks/supports/meetings via codes
- MilestoneDetailPage: display codes in support/meeting tables
- Fix support/meeting state types to any[] for code property access
---
 src/pages/DashboardPage.tsx       |  6 +++---
 src/pages/MilestoneDetailPage.tsx | 18 +++++++++---------
 src/pages/TasksPage.tsx           |  2 +-
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
index cbf9bab..0727349 100644
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -55,13 +55,13 @@ export default function DashboardPage() {
         <h3>Recent Tasks</h3>
         <table>
           <thead>
-            <tr><th>ID</th><th>Title</th><th>Status</th><th>Priority</th><th>Type</th><th>Subtype</th></tr>
+            <tr><th>Code</th><th>Title</th><th>Status</th><th>Priority</th><th>Type</th><th>Subtype</th></tr>
           </thead>
           <tbody>
             {(stats.recent_tasks || []).map((i) => (
               <tr key={i.id}>
-                <td>#{i.id}</td>
-                <td><a href={`/tasks/${i.id}`}>{i.title}</a></td>
+                <td>{i.task_code || `#${i.id}`}</td>
+                <td><a href={`/tasks/${i.task_code || i.id}`}>{i.title}</a></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>
diff --git a/src/pages/MilestoneDetailPage.tsx b/src/pages/MilestoneDetailPage.tsx
index f5e27c5..87c3a94 100644
--- a/src/pages/MilestoneDetailPage.tsx
+++ b/src/pages/MilestoneDetailPage.tsx
@@ -31,8 +31,8 @@ export default function MilestoneDetailPage() {
   const [members, setMembers] = useState<ProjectMember[]>([])
   const [progress, setProgress] = useState<MilestoneProgress | null>(null)
   const [tasks, setTasks] = useState<MilestoneTask[]>([])
-  const [supports, setSupports] = useState<Task[]>([])
-  const [meetings, setMeetings] = useState<Task[]>([])
+  const [supports, setSupports] = useState<any[]>([])
+  const [meetings, setMeetings] = useState<any[]>([])
   const [activeTab, setActiveTab] = useState<'tasks' | 'supports' | 'meetings'>('tasks')
   const [showCreateTask, setShowCreateTask] = useState(false)
   const [showEditMilestone, setShowEditMilestone] = useState(false)
@@ -141,7 +141,7 @@ 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.id}`)}>
+    <tr key={t.id} className="clickable" onClick={() => navigate(`/tasks/${t.task_code || t.id}`)}>
       <td>{t.task_code || t.id}</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>
@@ -352,11 +352,11 @@ export default function MilestoneDetailPage() {
 
           {activeTab === 'supports' && (
             <table>
-              <thead><tr><th>#</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>
                 {supports.map((i) => (
-                  <tr key={i.id} className="clickable" onClick={() => navigate(`/supports/${projectCode}/${id}/${i.id}`)}>
-                    <td>{i.id}</td>
+                  <tr key={i.id} className="clickable" onClick={() => navigate(`/supports/${projectCode}/${id}/${i.support_code || i.id}`)}>
+                    <td>{i.support_code || i.id}</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>
@@ -369,11 +369,11 @@ export default function MilestoneDetailPage() {
 
           {activeTab === 'meetings' && (
             <table>
-              <thead><tr><th>#</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>
                 {meetings.map((i) => (
-                  <tr key={i.id} className="clickable" onClick={() => navigate(`/meetings/${projectCode}/${id}/${i.id}`)}>
-                    <td>{i.id}</td>
+                  <tr key={i.id} className="clickable" onClick={() => navigate(`/meetings/${projectCode}/${id}/${i.meeting_code || i.id}`)}>
+                    <td>{i.meeting_code || i.id}</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>
diff --git a/src/pages/TasksPage.tsx b/src/pages/TasksPage.tsx
index 737e04c..165ff6e 100644
--- a/src/pages/TasksPage.tsx
+++ b/src/pages/TasksPage.tsx
@@ -64,7 +64,7 @@ export default function TasksPage() {
         </thead>
         <tbody>
           {tasks.map((t) => (
-            <tr key={t.id} onClick={() => navigate(`/tasks/${t.id}`)} className="clickable">
+            <tr key={t.id} onClick={() => navigate(`/tasks/${t.task_code || t.id}`)} className="clickable">
               <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>