feat(ui): make overview metric cards clickable

Author: Tinitto

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project follows versions of format `{year}.{month}.{patch_number}`.
 
 ## [Unreleased]
 
+### Changed
+
+- `qpi-ui`: Made the metric cards on the Overview dashboard (Active QPUs, Queue Status, Next Booking) clickable so they quickly route to their respective tabs.
+
 ## [0.0.30] - 2026-06-26
 
 ### Added

README.md

@@ -333,10 +333,9 @@ make clean
 
 ## TODOs
 
-- [x] Implement a light mode in the dashboard and improve the overall dark mode UI.
 - [ ] Add a way of translating the configuration files (calib seed etc.) of tergite to the quantify.device.yml of this one
-- [ ] Share this library in quantum journals, Euro projects, etc.  
-- [ ] On the QPU Registry screen for admins, we probably need an option to delete any of the QPUs (with a confirmation modal first of course)
+- [ ] Fix "authentication required" on submitting job in the job console
+- [ ] On job console, clarify what load example button does
 
 ## License
 

qpi-ui/internal/dashboard/cypress/e2e/overview-header/metrics-row.cy.ts

@@ -96,4 +96,19 @@ describe("Overview & Header — Metrics Row", () => {
       });
     });
   });
+
+  it("navigates to the corresponding tab when clicking on a card", () => {
+    cy.contains("Active QPUs").parent().parent().click();
+    cy.hash().should("eq", "#qpus");
+
+    cy.get('nav button:contains("Overview")').click();
+
+    cy.contains("Queue Status").parent().parent().click();
+    cy.hash().should("eq", "#jobs");
+
+    cy.get('nav button:contains("Overview")').click();
+
+    cy.contains("Next Booking").parent().parent().click();
+    cy.hash().should("eq", "#bookings");
+  });
 });

qpi-ui/internal/dashboard/src/components/tabs/OverviewTab/elements/MetricsRow.tsx

@@ -33,7 +33,7 @@ export function MetricsRow({ qpus, jobs, qpuSeconds, bookings }: Props) {
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-      <div className="bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 p-6 rounded-lg flex flex-col justify-between">
+      <a href="#qpus" className="bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 p-6 rounded-lg flex flex-col justify-between hover:border-zinc-300 dark:hover:border-zinc-700 transition-colors block cursor-pointer">
         <div className="flex justify-between items-start mb-4">
           <span className="text-xs font-semibold text-gray-500 dark:text-zinc-400 uppercase tracking-wider">
             Active QPUs
@@ -49,9 +49,9 @@ export function MetricsRow({ qpus, jobs, qpuSeconds, bookings }: Props) {
             units
           </div>
         </div>
-      </div>
+      </a>
 
-      <div className="bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 p-6 rounded-lg flex flex-col justify-between">
+      <a href="#jobs" className="bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 p-6 rounded-lg flex flex-col justify-between hover:border-zinc-300 dark:hover:border-zinc-700 transition-colors block cursor-pointer">
         <div className="flex justify-between items-start mb-4">
           <span className="text-xs font-semibold text-gray-500 dark:text-zinc-400 uppercase tracking-wider">
             Queue Status
@@ -66,7 +66,7 @@ export function MetricsRow({ qpus, jobs, qpuSeconds, bookings }: Props) {
             {pendingJobs} pending, {runningJobs} running
           </div>
         </div>
-      </div>
+      </a>
 
       <div className="bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 p-6 rounded-lg flex flex-col justify-between">
         <div className="flex justify-between items-start mb-4">
@@ -83,7 +83,7 @@ export function MetricsRow({ qpus, jobs, qpuSeconds, bookings }: Props) {
         </div>
       </div>
 
-      <div className="bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 p-6 rounded-lg flex flex-col justify-between">
+      <a href="#bookings" className="bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 p-6 rounded-lg flex flex-col justify-between hover:border-zinc-300 dark:hover:border-zinc-700 transition-colors block cursor-pointer">
         <div className="flex justify-between items-start mb-4">
           <span className="text-xs font-semibold text-gray-500 dark:text-zinc-400 uppercase tracking-wider">
             Next Booking
@@ -100,7 +100,7 @@ export function MetricsRow({ qpus, jobs, qpuSeconds, bookings }: Props) {
             {nextBooking ? "Dedicated Window" : "No active reservations"}
           </div>
         </div>
-      </div>
+      </a>
     </div>
   );
 }