From 6f0054c87854352b2e102bd95cd332dbadd9ad6c Mon Sep 17 00:00:00 2001
From: NuklearRabbit <145918611+NuklearRabbit@users.noreply.github.com>
Date: Sun, 2 Aug 2026 03:27:05 +0200
Subject: [PATCH] feat(ui): redesign operations dashboard

---
 frontend/src/pages/Dashboard.tsx | 198 +++++++++++++++++--------------
 1 file changed, 111 insertions(+), 87 deletions(-)

diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index cef6170..a916817 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -1,110 +1,134 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 import { api } from "../api/client";
-import type { Dashboard as DashboardData } from "../api/types";
+import type { Dashboard as DashboardData, KnowledgeHealth } from "../api/types";
 import { SeverityBadge, StatusBadge } from "../components/Badge";
+import { Icon } from "../components/Icons";
+import { ErrorState, IntegrationMark, LoadingState, PageHeader, SectionHeading } from "../components/PageChrome";
 
-const METRIC_LABELS: Record<keyof DashboardData["metrics"], string> = {
-  available: "Available",
-  rented: "Rented",
-  cleaning: "Cleaning",
-  maintenance: "Maintenance",
-  blocked: "Blocked",
-  open_quality_issues: "Open quality issues",
-  pending_or_failed_workflows: "Pending/failed workflows",
-};
+const FLEET_METRICS: Array<{ key: keyof DashboardData["metrics"]; label: string; tone: string }> = [
+  { key: "available", label: "Available", tone: "ready" },
+  { key: "rented", label: "Rented", tone: "neutral" },
+  { key: "cleaning", label: "Cleaning", tone: "neutral" },
+  { key: "maintenance", label: "Maintenance", tone: "warning" },
+  { key: "blocked", label: "Blocked", tone: "critical" },
+];
+
+function localTime(value: string, withDate = false) {
+  return new Date(value).toLocaleString("en-GB", {
+    ...(withDate ? { day: "2-digit", month: "short" } : {}),
+    hour: "2-digit",
+    minute: "2-digit",
+    timeZone: "Europe/Brussels",
+  });
+}
 
 export function Dashboard() {
   const [data, setData] = useState<DashboardData | null>(null);
+  const [knowledge, setKnowledge] = useState<KnowledgeHealth | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [severity, setSeverity] = useState("all");
+  const [query, setQuery] = useState("");
 
   useEffect(() => {
-    api
-      .get<DashboardData>("/api/v1/dashboard")
-      .then(setData)
-      .catch(() => setError("Dashboard data is unavailable right now."));
+    api.get<DashboardData>("/api/v1/dashboard").then(setData).catch(() => setError("Dashboard data is unavailable right now."));
+    api.get<KnowledgeHealth>("/api/v1/knowledge/status").then(setKnowledge).catch(() => setKnowledge(null));
   }, []);
 
-  if (error) return <p className="error" role="alert">{error}</p>;
-  if (!data) return <p>Loading dashboard…</p>;
+  const attention = useMemo(() => data?.attention_items.filter((item) => {
+    const matchesSeverity = severity === "all" || item.severity === severity;
+    const haystack = `${item.title} ${item.detail} ${item.link_ref}`.toLowerCase();
+    return matchesSeverity && haystack.includes(query.toLowerCase());
+  }) ?? [], [data, query, severity]);
+
+  if (error) return <ErrorState message={error} />;
+  if (!data) return <LoadingState label="Loading operations overview…" />;
+
+  const latestRun = data.recent_automation[0];
+  const n8nState = !latestRun ? "No delivery yet" : latestRun.status === "failed" ? "Needs attention" : latestRun.status;
 
   return (
-    <div className="page">
-      <h1>Dashboard</h1>
+    <div className="page dashboard-page">
+      <PageHeader eyebrow="Operations / Live overview" title="Good morning. Here’s the fleet." description="Readiness, exceptions and hand-offs across today’s operation." actions={<Link className="button button-secondary" to="/vehicles"><Icon name="fleet" /> View fleet</Link>} />
 
-      <section aria-labelledby="metrics-heading">
-        <h2 id="metrics-heading">Operational metrics</h2>
-        <ul className="metric-grid">
-          {(Object.keys(METRIC_LABELS) as (keyof DashboardData["metrics"])[]).map((key) => (
-            <li key={key} className="metric-tile">
-              <span className="metric-value">{data.metrics[key]}</span>
-              <span className="metric-label">{METRIC_LABELS[key]}</span>
-            </li>
+      <section className="readiness-band" aria-labelledby="readiness-heading">
+        <div className="readiness-label">
+          <span className="live-indicator" />
+          <div><h2 id="readiness-heading">Fleet readiness</h2><p>Live from persisted vehicle state</p></div>
+        </div>
+        <dl className="readiness-metrics">
+          {FLEET_METRICS.map((metric) => (
+            <div key={metric.key} className={`metric-cell metric-${metric.tone}`}>
+              <dt>{metric.label}</dt><dd>{data.metrics[metric.key]}</dd>
+            </div>
           ))}
-        </ul>
+        </dl>
+        <Link className="inline-action" to="/vehicles">Open fleet <Icon name="chevron" /></Link>
       </section>
 
-      <section aria-labelledby="attention-heading" className="panel">
-        <h2 id="attention-heading">Attention required</h2>
-        {data.attention_items.length === 0 && <p>Nothing needs attention right now.</p>}
-        <ul className="attention-list">
-          {data.attention_items.map((item, index) => (
-            <li key={`${item.link_ref}-${index}`}>
-              <SeverityBadge severity={item.severity} />
-              <div>
-                <p className="attention-title">
-                  {item.issue_ref ? (
-                    <Link to={`/data-quality/${item.issue_ref}`}>{item.title}</Link>
-                  ) : item.link_type === "vehicle" ? (
-                    <Link to={`/vehicles/${item.link_ref}`}>{item.title}</Link>
-                  ) : (
-                    item.title
-                  )}
-                </p>
-                <p className="attention-detail">{item.detail}</p>
-              </div>
-            </li>
-          ))}
-        </ul>
-      </section>
+      <div className="operations-grid">
+        <section className="work-panel attention-panel" aria-labelledby="attention-heading">
+          <SectionHeading title="Attention queue" description={`${data.metrics.open_quality_issues} open quality issues · ${data.metrics.pending_or_failed_workflows} workflow exceptions`} action={<Link to="/data-quality">Review queue <Icon name="chevron" /></Link>} />
+          <div className="queue-controls">
+            <label className="compact-search"><Icon name="search" /><span className="visually-hidden">Search attention queue</span><input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Filter issues…" /></label>
+            <label><span className="visually-hidden">Severity</span><select value={severity} onChange={(event) => setSeverity(event.target.value)}><option value="all">All severity</option><option value="high">Critical</option><option value="medium">Warning</option><option value="low">Info</option></select></label>
+          </div>
+          {attention.length === 0 ? <p className="quiet-empty"><Icon name="check" /> No issues match this filter.</p> : (
+            <ul className="attention-list">
+              {attention.slice(0, 6).map((item, index) => (
+                <li key={`${item.link_ref}-${index}`}>
+                  <SeverityBadge severity={item.severity} />
+                  <div className="queue-copy">
+                    <p className="attention-title">
+                      {item.issue_ref ? <Link to={`/data-quality/${item.issue_ref}`}>{item.title}</Link> : item.link_type === "vehicle" ? <Link to={`/vehicles/${item.link_ref}`}>{item.title}</Link> : item.title}
+                    </p>
+                    <p className="attention-detail">{item.detail}</p>
+                  </div>
+                  <span className="queue-ref">{item.link_ref}</span>
+                  <Icon name="chevron" className="row-chevron" />
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
 
-      <section aria-labelledby="today-heading" className="panel">
-        <h2 id="today-heading">Today</h2>
-        {data.today.length === 0 && <p>No departures or returns scheduled today.</p>}
-        <ul className="today-list">
-          {data.today.map((item) => (
-            <li key={`${item.kind}-${item.booking_ref}`}>
-              <span className="today-kind">{item.kind === "departure" ? "Departure" : "Return"}</span>
-              <Link to={`/bookings/${item.booking_ref}`}>{item.booking_ref}</Link>
-              <span>{item.vehicle_ref}</span>
-              <time dateTime={item.scheduled_at}>
-                {new Date(item.scheduled_at).toLocaleTimeString("en-GB", {
-                  hour: "2-digit",
-                  minute: "2-digit",
-                  timeZone: "Europe/Brussels",
-                })}
-              </time>
-            </li>
-          ))}
-        </ul>
-      </section>
+        <section className="work-panel timeline-panel" aria-labelledby="today-heading">
+          <SectionHeading title="Today’s movements" description="Departures and returns in Europe/Brussels" action={<Link to="/bookings">All bookings <Icon name="chevron" /></Link>} />
+          {data.today.length === 0 ? <p className="quiet-empty"><Icon name="clock" /> No movements scheduled today.</p> : (
+            <ol className="movement-timeline">
+              {data.today.slice(0, 6).map((item) => (
+                <li key={`${item.kind}-${item.booking_ref}`}>
+                  <time dateTime={item.scheduled_at}>{localTime(item.scheduled_at)}</time>
+                  <span className={`timeline-node timeline-${item.kind}`}><Icon name={item.kind === "return" ? "arrow-left" : "chevron"} /></span>
+                  <div><span className="movement-kind">{item.kind}</span><Link to={`/bookings/${item.booking_ref}`}>{item.booking_ref}</Link><small>{item.vehicle_ref}</small></div>
+                </li>
+              ))}
+            </ol>
+          )}
+        </section>
+      </div>
 
-      <section aria-labelledby="automation-heading" className="panel">
-        <h2 id="automation-heading">Recent automation</h2>
-        {data.recent_automation.length === 0 && <p>No automation runs recorded yet.</p>}
-        <ul className="automation-list">
-          {data.recent_automation.map((run) => (
-            <li key={run.event_id}>
-              <StatusBadge status={run.status} />
-              <span>{run.event_type}</span>
-              <span>{run.aggregate_ref}</span>
-              <time dateTime={run.occurred_at}>
-                {new Date(run.occurred_at).toLocaleString("en-GB", { timeZone: "Europe/Brussels" })}
-              </time>
-            </li>
-          ))}
-        </ul>
-      </section>
+      <div className="secondary-grid">
+        <section className="work-panel integration-panel" aria-labelledby="integration-heading">
+          <SectionHeading title="Integration pulse" description="Current evidence from connected services" action={<Link to="/automation">System detail <Icon name="chevron" /></Link>} />
+          <ul className="integration-list">
+            <li><IntegrationMark kind="n8n" /><div><strong>n8n delivery</strong><span>{latestRun ? `Latest event ${latestRun.aggregate_ref}` : "No workflow evidence recorded"}</span></div><StatusBadge status={n8nState.toLowerCase().replace(/ /g, "_")} /></li>
+            <li><IntegrationMark kind="rag" /><div><strong>RAGcore knowledge</strong><span>{knowledge ? `${knowledge.document_count} procedures indexed` : "Health check unavailable"}</span></div><StatusBadge status={knowledge?.available ? "available" : "unavailable"} /></li>
+            <li><IntegrationMark kind="mcp" /><div><strong>MCP Hub</strong><span>No active adapter in this PoC</span></div><StatusBadge status="not_configured" /></li>
+          </ul>
+        </section>
+
+        <section className="work-panel recent-panel" aria-labelledby="recent-heading">
+          <SectionHeading title="Recent activity" description="Latest audited workflow changes" />
+          {data.recent_automation.length === 0 ? <p className="quiet-empty">No automation activity recorded.</p> : (
+            <ul className="recent-list">
+              {data.recent_automation.slice(0, 4).map((run) => (
+                <li key={run.event_id}><span className="activity-icon"><Icon name="activity" /></span><div><strong>{run.event_type.replace(/_/g, " ")}</strong><span>{run.aggregate_ref}</span></div><StatusBadge status={run.status} /><time dateTime={run.occurred_at}>{localTime(run.occurred_at, true)}</time></li>
+              ))}
+            </ul>
+          )}
+        </section>
+      </div>
     </div>
   );
 }