From e9cb1ea4e4c63e395222ce4ef239c0c9f2145e61 Mon Sep 17 00:00:00 2001
From: owain <owain@jarrett.eu>
Date: Thu, 11 Jun 2026 23:42:12 +0100
Subject: [PATCH] Dashboard Running PRs: show fixed 1k, 1 mile, 5k, 10k
 distances

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/pages/DashboardPage.jsx | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/DashboardPage.jsx b/frontend/src/pages/DashboardPage.jsx
index 451c52c..1ca497c 100644
--- a/frontend/src/pages/DashboardPage.jsx
+++ b/frontend/src/pages/DashboardPage.jsx
@@ -425,21 +425,23 @@ function RecentActivities({ activities }) {
   )
 }
 
+const DASH_PR_LABELS = ['1k', '1 mile', '5k', '10k']
+
 function RunningPRs({ records }) {
+  const byLabel = Object.fromEntries((records || []).map(r => [r.distance_label, r]))
   return (
     <Card title="Running PRs" viewHref="/records">
-      {records?.length > 0 ? (
-        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
-          {records.slice(0, 5).map(rec => (
-            <div key={rec.id} className="bg-gray-800/60 rounded-lg p-3 text-center">
-              <p className="text-xs text-gray-500 mb-1">{rec.distance_label}</p>
-              <p className="font-mono font-semibold text-yellow-400">{formatDuration(rec.duration_s)}</p>
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+        {DASH_PR_LABELS.map(label => {
+          const rec = byLabel[label]
+          return (
+            <div key={label} className="bg-gray-800/60 rounded-lg p-3 text-center">
+              <p className="text-xs text-gray-500 mb-1">{label}</p>
+              <p className="font-mono font-semibold text-yellow-400">{rec ? formatDuration(rec.duration_s) : '--'}</p>
             </div>
-          ))}
-        </div>
-      ) : (
-        <div className="flex items-center justify-center h-full text-gray-600 text-sm">No running records yet</div>
-      )}
+          )
+        })}
+      </div>
     </Card>
   )
 }