From 0f084704eed3818a7f3c83c6807d8cada23e3dd3 Mon Sep 17 00:00:00 2001
From: Hammer <hammer7839283@gmail.com>
Date: Thu, 29 Jan 2026 08:06:37 +0000
Subject: [PATCH] feat: clickable links on dashboard, priority badges on
 up-next

- Up Next items link to task detail pages
- Recently Completed items are now clickable links
- High/critical priority badges shown on Up Next items
- Hover states on dashboard items
---
 frontend/src/pages/DashboardPage.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index cd818ed..d6b9666 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -202,11 +202,16 @@ export function DashboardPage() {
                   <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Up Next</h3>
                   <div className="space-y-2">
                     {upNext.map((task, i) => (
-                      <div key={task.id} className="flex items-center gap-2 text-sm">
+                      <Link to={`/task/HQ-${task.taskNumber}`} key={task.id} className="flex items-center gap-2 text-sm group hover:bg-gray-50 rounded-lg px-1 -mx-1 py-0.5 transition">
                         <span className="text-gray-300 text-xs w-4 text-right">{i + 1}.</span>
                         <span className="text-xs font-mono text-gray-400">HQ-{task.taskNumber}</span>
-                        <span className="text-gray-700 truncate">{task.title}</span>
-                      </div>
+                        <span className="text-gray-700 truncate group-hover:text-amber-700 transition">{task.title}</span>
+                        {task.priority === "high" || task.priority === "critical" ? (
+                          <span className={`text-[10px] px-1.5 py-0.5 rounded-full font-medium shrink-0 ${task.priority === "critical" ? "bg-red-100 text-red-600" : "bg-orange-100 text-orange-600"}`}>
+                            {task.priority}
+                          </span>
+                        ) : null}
+                      </Link>
                     ))}
                   </div>
                 </div>
@@ -234,7 +239,7 @@ export function DashboardPage() {
             <div className="p-5">
               <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                 {recentlyCompleted.map((task) => (
-                  <div key={task.id} className="rounded-lg border border-green-200 bg-green-50 p-3">
+                  <Link to={`/task/HQ-${task.taskNumber}`} key={task.id} className="rounded-lg border border-green-200 bg-green-50 p-3 hover:bg-green-100 transition block">
                     <div className="flex items-center gap-2 mb-1">
                       <span className="text-xs font-bold text-green-700 font-mono">HQ-{task.taskNumber}</span>
                       {task.completedAt && (
@@ -242,7 +247,7 @@ export function DashboardPage() {
                       )}
                     </div>
                     <h3 className="font-medium text-sm text-green-900">{task.title}</h3>
-                  </div>
+                  </Link>
                 ))}
               </div>
             </div>