From 9b7a4ace399cbb357d6e8dddc968289690f0ef1e Mon Sep 17 00:00:00 2001
From: wind <reload.fast@gmail.com>
Date: Sat, 28 Feb 2026 19:22:49 +0100
Subject: [PATCH] feat: clickable dashboard cards and risks+remediations side
 by side (#38 #39)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#38 — Dashboard StatCards as navigation links:
- Added optional 'to' prop to StatCard; wraps content in <Link> when set
- Devices card → /devices
- Critical/High cards → /risks?severity=critical|high
- Medium/Low card → /risks
- Hover state: subtle border highlight + shadow on all cards

#39 — Device detail risks and remediations side by side:
- RiskRecPair component: risk card left, linked recommendation right (lg:grid-cols-2)
- Recommendations matched to risks via rec.risk_id === risk.id (O(1) Map lookup)
- Falls back gracefully: no rec shows placeholder; orphan recs render below
- Combined section heading 'Risks & Remediations' replaces two separate headings

Closes #38
Closes #39

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 frontend/src/pages/DashboardPage.tsx    |  16 +++-
 frontend/src/pages/DeviceDetailPage.tsx | 120 +++++++++++++++---------
 2 files changed, 91 insertions(+), 45 deletions(-)

diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index cfc9ac9..905abca 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -108,17 +108,22 @@ const StatCard = memo(function StatCard({
   sub,
   accentColor,
   icon,
+  to,
 }: {
   label: string;
   value: React.ReactNode;
   sub?: string;
   accentColor: string;
   icon: React.ReactNode;
+  to?: string;
 }) {
-  return (
+  const inner = (
     <div
-      className="relative overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-5"
-      style={{ borderLeft: `3px solid ${accentColor}` }}
+      className="relative overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-5 transition-all duration-150 hover:border-[var(--color-accent-primary)]/50 hover:shadow-md"
+      style={{
+        borderLeft: `3px solid ${accentColor}`,
+        cursor: to ? "pointer" : "default",
+      }}
     >
       <div className="flex items-start justify-between">
         <div>
@@ -140,6 +145,7 @@ const StatCard = memo(function StatCard({
       </div>
     </div>
   );
+  return to ? <Link to={to}>{inner}</Link> : inner;
 });
 
 export function DashboardPage() {
@@ -208,6 +214,7 @@ export function DashboardPage() {
               value={devices.length}
               accentColor={STRIPE.devices}
               icon={<DeviceIcon />}
+              to="/devices"
             />
             <StatCard
               label="Critical Risks"
@@ -218,6 +225,7 @@ export function DashboardPage() {
               }
               accentColor={STRIPE.critical}
               icon={<CriticalIcon />}
+              to="/risks?severity=critical"
             />
             <StatCard
               label="High Risks"
@@ -226,6 +234,7 @@ export function DashboardPage() {
               }
               accentColor={STRIPE.high}
               icon={<WarningIcon />}
+              to="/risks?severity=high"
             />
             <StatCard
               label="Medium / Low"
@@ -233,6 +242,7 @@ export function DashboardPage() {
               sub="risks"
               accentColor={STRIPE.other}
               icon={<ShieldIcon />}
+              to="/risks"
             />
           </div>
 
diff --git a/frontend/src/pages/DeviceDetailPage.tsx b/frontend/src/pages/DeviceDetailPage.tsx
index dd3496f..17d6e9e 100644
--- a/frontend/src/pages/DeviceDetailPage.tsx
+++ b/frontend/src/pages/DeviceDetailPage.tsx
@@ -2,7 +2,7 @@
  * DeviceDetailPage — ports/services table, risk list, timestamps.
  * Route: /devices/:id
  */
-import { memo } from "react";
+import { memo, useMemo } from "react";
 import { Link, useParams } from "react-router-dom";
 import { Card, Badge, SkeletonCard, PageHeader } from "../components";
 import { useDevice, useRisks, useDeviceRecommendations } from "../hooks";
@@ -49,6 +49,30 @@ const RecCard = memo(function RecCard({ rec }: { rec: Recommendation }) {
   );
 });
 
+/** A risk paired with its linked recommendation (if any). */
+const RiskRecPair = memo(function RiskRecPair({
+  risk,
+  rec,
+}: {
+  risk: Risk;
+  rec: Recommendation | undefined;
+}) {
+  return (
+    <div className="grid gap-3 lg:grid-cols-2">
+      <RiskCard risk={risk} />
+      {rec ? (
+        <RecCard rec={rec} />
+      ) : (
+        <Card>
+          <p className="py-2 text-sm italic text-[var(--color-text-secondary)]">
+            No remediation available for this risk.
+          </p>
+        </Card>
+      )}
+    </div>
+  );
+});
+
 export function DeviceDetailPage() {
   const { id } = useParams<{ id: string }>();
   const deviceId = Number(id);
@@ -57,6 +81,20 @@ export function DeviceDetailPage() {
   const { recommendations, loading: recsLoading } =
     useDeviceRecommendations(deviceId);
 
+  // Build a map of risk_id → recommendation for O(1) lookup
+  const recByRiskId = useMemo(() => {
+    const map = new Map<number, Recommendation>();
+    recommendations.forEach((r) => map.set(r.risk_id, r));
+    return map;
+  }, [recommendations]);
+
+  // Recommendations not linked to any risk shown in the list
+  const linkedRiskIds = useMemo(() => new Set(risks.map((r) => r.id)), [risks]);
+  const orphanRecs = useMemo(
+    () => recommendations.filter((r) => !linkedRiskIds.has(r.risk_id)),
+    [recommendations, linkedRiskIds],
+  );
+
   if (loading) return <SkeletonCard height="48" />;
   if (error)
     return <p className="text-[var(--color-accent-danger)]">Error: {error}</p>;
@@ -169,61 +207,59 @@ export function DeviceDetailPage() {
         )}
       </Card>
 
-      {/* Risks */}
-      <h2 className="mb-3 text-lg font-semibold">
-        Risks{" "}
-        {!risksLoading && (
-          <span className="text-base font-normal text-[var(--color-text-secondary)]">
-            ({sortedRisks.length})
+      {/* Risks + Remediations paired side by side */}
+      <div className="mb-2 flex items-baseline gap-3">
+        <h2 className="text-lg font-semibold">Risks &amp; Remediations</h2>
+        {!risksLoading && !recsLoading && (
+          <span className="text-sm text-[var(--color-text-secondary)]">
+            {sortedRisks.length} risk{sortedRisks.length !== 1 ? "s" : ""}
           </span>
         )}
-      </h2>
-      {risksLoading ? (
-        <div className="flex flex-col gap-3">
-          {Array.from({ length: 2 }).map((_, i) => (
-            <SkeletonCard key={i} height="20" />
-          ))}
-        </div>
-      ) : sortedRisks.length === 0 ? (
-        <Card>
-          <p className="py-4 text-center text-sm text-[var(--color-text-secondary)]">
-            No risks detected for this device.
-          </p>
-        </Card>
-      ) : (
-        <div className="flex flex-col gap-3">
-          {sortedRisks.map((risk) => (
-            <RiskCard key={risk.id} risk={risk} />
-          ))}
-        </div>
-      )}
+      </div>
 
-      {/* Recommendations */}
-      <h2 className="mb-3 mt-6 text-lg font-semibold">
-        Recommendations{" "}
-        {!recsLoading && (
-          <span className="text-base font-normal text-[var(--color-text-secondary)]">
-            ({recommendations.length})
-          </span>
-        )}
-      </h2>
-      {recsLoading ? (
+      {risksLoading || recsLoading ? (
         <div className="flex flex-col gap-3">
           {Array.from({ length: 2 }).map((_, i) => (
             <SkeletonCard key={i} height="20" />
           ))}
         </div>
-      ) : recommendations.length === 0 ? (
+      ) : sortedRisks.length === 0 && orphanRecs.length === 0 ? (
         <Card>
           <p className="py-4 text-center text-sm text-[var(--color-text-secondary)]">
-            No recommendations for this device.
+            No risks or recommendations for this device.
           </p>
         </Card>
       ) : (
-        <div className="flex flex-col gap-3">
-          {recommendations.map((rec) => (
-            <RecCard key={rec.id} rec={rec} />
+        <div className="flex flex-col gap-4">
+          {/* Header row for desktop */}
+          {sortedRisks.length > 0 && (
+            <div className="hidden lg:grid lg:grid-cols-2 lg:gap-3">
+              <p className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-secondary)]">
+                Risk
+              </p>
+              <p className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-secondary)]">
+                Remediation
+              </p>
+            </div>
+          )}
+          {sortedRisks.map((risk) => (
+            <RiskRecPair
+              key={risk.id}
+              risk={risk}
+              rec={recByRiskId.get(risk.id)}
+            />
           ))}
+          {/* Orphan recommendations not linked to any discovered risk */}
+          {orphanRecs.length > 0 && (
+            <>
+              <h3 className="mt-2 text-sm font-semibold text-[var(--color-text-secondary)]">
+                Additional Recommendations
+              </h3>
+              {orphanRecs.map((rec) => (
+                <RecCard key={rec.id} rec={rec} />
+              ))}
+            </>
+          )}
         </div>
       )}
     </div>