From da9f8799d8f687fed4367fb867d80e5c5675cc2a Mon Sep 17 00:00:00 2001
From: Zacheus <segunzacheusi@gmail.com>
Date: Tue, 2 Jun 2026 09:29:24 +0100
Subject: [PATCH 1/2] chore: implemented new UI changes across brifges reports
 and footer summary

---
 frontend/src/components/AssetStatusBadge.tsx  | 157 ++++++++
 frontend/src/components/BridgeNotesPanel.tsx  | 325 ++++++++++++++++
 frontend/src/components/BridgeStatusCard.tsx  |  18 +-
 .../src/components/ReportQuickActions.tsx     | 248 ++++++++++++
 .../src/components/TableFooterSummary.tsx     | 197 ++++++++++
 frontend/src/hooks/useBridgeNotes.ts          |  92 +++++
 frontend/src/pages/Bridges.tsx                |   9 +
 frontend/src/pages/Reports.tsx                | 366 ++++++++++++++----
 8 files changed, 1316 insertions(+), 96 deletions(-)
 create mode 100644 frontend/src/components/AssetStatusBadge.tsx
 create mode 100644 frontend/src/components/BridgeNotesPanel.tsx
 create mode 100644 frontend/src/components/ReportQuickActions.tsx
 create mode 100644 frontend/src/components/TableFooterSummary.tsx
 create mode 100644 frontend/src/hooks/useBridgeNotes.ts

diff --git a/frontend/src/components/AssetStatusBadge.tsx b/frontend/src/components/AssetStatusBadge.tsx
new file mode 100644
index 00000000..15104bf4
--- /dev/null
+++ b/frontend/src/components/AssetStatusBadge.tsx
@@ -0,0 +1,157 @@
+/**
+ * AssetStatusBadge (#495)
+ *
+ * Standardised status badge for assets across all views.
+ * Variants : healthy | warning | critical | unknown | paused | syncing
+ * Sizes    : sm | md | lg
+ * Dot mode : renders a coloured dot instead of a pill (dense tables)
+ */
+
+export type AssetStatus =
+  | "healthy"
+  | "warning"
+  | "critical"
+  | "unknown"
+  | "paused"
+  | "syncing";
+
+export type BadgeSize = "sm" | "md" | "lg";
+
+export interface AssetStatusBadgeProps {
+  status: AssetStatus;
+  /** Override the default human-readable label */
+  label?: string;
+  size?: BadgeSize;
+  /** Dot-only mode (useful in dense tables) */
+  dot?: boolean;
+  className?: string;
+}
+
+interface StatusConfig {
+  label: string;
+  colours: string;
+  dotColour: string;
+  ariaDescription: string;
+  animate?: boolean;
+}
+
+const STATUS_CONFIG: Record<AssetStatus, StatusConfig> = {
+  healthy: {
+    label: "Healthy",
+    colours: "bg-green-500/15 text-green-400 border-green-500/30",
+    dotColour: "bg-green-400",
+    ariaDescription: "Asset is healthy",
+  },
+  warning: {
+    label: "Warning",
+    colours: "bg-yellow-500/15 text-yellow-400 border-yellow-500/30",
+    dotColour: "bg-yellow-400",
+    ariaDescription: "Asset requires attention",
+  },
+  critical: {
+    label: "Critical",
+    colours: "bg-red-500/15 text-red-400 border-red-500/30",
+    dotColour: "bg-red-400",
+    ariaDescription: "Asset is in a critical state",
+    animate: true,
+  },
+  unknown: {
+    label: "Unknown",
+    colours: "bg-gray-500/15 text-gray-400 border-gray-500/30",
+    dotColour: "bg-gray-500",
+    ariaDescription: "Asset status is unknown",
+  },
+  paused: {
+    label: "Paused",
+    colours: "bg-blue-500/15 text-blue-400 border-blue-500/30",
+    dotColour: "bg-blue-400",
+    ariaDescription: "Asset monitoring is paused",
+  },
+  syncing: {
+    label: "Syncing",
+    colours: "bg-purple-500/15 text-purple-400 border-purple-500/30",
+    dotColour: "bg-purple-400",
+    ariaDescription: "Asset is currently syncing",
+    animate: true,
+  },
+};
+
+const SIZE_CLASSES: Record<BadgeSize, { badge: string; dot: string }> = {
+  sm: { badge: "gap-1 px-1.5 py-0.5 text-xs", dot: "h-1.5 w-1.5" },
+  md: { badge: "gap-1.5 px-2.5 py-1 text-xs", dot: "h-2 w-2" },
+  lg: { badge: "gap-2 px-3 py-1.5 text-sm", dot: "h-2.5 w-2.5" },
+};
+
+export function AssetStatusBadge({
+  status,
+  label,
+  size = "md",
+  dot = false,
+  className = "",
+}: AssetStatusBadgeProps) {
+  const config = STATUS_CONFIG[status] ?? STATUS_CONFIG.unknown;
+  const sizes = SIZE_CLASSES[size];
+  const displayLabel = label ?? config.label;
+
+  if (dot) {
+    return (
+      <span
+        role="status"
+        aria-label={config.ariaDescription}
+        title={displayLabel}
+        className={`relative inline-flex items-center justify-center ${className}`}
+      >
+        {config.animate && (
+          <span
+            className={`absolute inline-flex h-full w-full animate-ping rounded-full ${config.dotColour} opacity-60`}
+            aria-hidden="true"
+          />
+        )}
+        <span
+          className={`relative inline-block rounded-full ${sizes.dot} ${config.dotColour}`}
+          aria-hidden="true"
+        />
+        <span className="sr-only">{displayLabel}</span>
+      </span>
+    );
+  }
+
+  return (
+    <span
+      role="status"
+      aria-label={config.ariaDescription}
+      className={[
+        "inline-flex items-center rounded-full border font-medium",
+        sizes.badge,
+        config.colours,
+        className,
+      ].join(" ")}
+    >
+      {config.animate && (
+        <span className={`relative mr-0.5 flex h-2 w-2`} aria-hidden="true">
+          <span className={`animate-ping absolute inline-flex h-full w-full rounded-full ${config.dotColour} opacity-60`} />
+          <span className={`relative inline-flex h-2 w-2 rounded-full ${config.dotColour}`} />
+        </span>
+      )}
+      {displayLabel}
+    </span>
+  );
+}
+
+/** Map a health score (0-100) to an AssetStatus. */
+export function scoreToStatus(score: number | null | undefined): AssetStatus {
+  if (score === null || score === undefined) return "unknown";
+  if (score >= 80) return "healthy";
+  if (score >= 50) return "warning";
+  return "critical";
+}
+
+/** Map a bridge status string to an AssetStatus. */
+export function bridgeStatusToAssetStatus(
+  status: "healthy" | "degraded" | "down" | "unknown" | string
+): AssetStatus {
+  if (status === "healthy") return "healthy";
+  if (status === "degraded") return "warning";
+  if (status === "down") return "critical";
+  return "unknown";
+}
diff --git a/frontend/src/components/BridgeNotesPanel.tsx b/frontend/src/components/BridgeNotesPanel.tsx
new file mode 100644
index 00000000..6e5d9261
--- /dev/null
+++ b/frontend/src/components/BridgeNotesPanel.tsx
@@ -0,0 +1,325 @@
+/**
+ * BridgeNotesPanel (#494)
+ *
+ * Lets operators attach rich notes to a bridge for internal coordination.
+ * Features:
+ *  – Create / edit / delete notes
+ *  – Author + timestamp on each note
+ *  – Simple markdown-style **bold** and _italic_ rendering (no deps)
+ *  – Access control: only the note author can edit/delete their own note
+ *    (author is read from a static constant; replace with auth context as needed)
+ */
+
+import { useRef, useState } from "react";
+import { useBridgeNotes } from "../hooks/useBridgeNotes";
+import type { BridgeNote } from "../hooks/useBridgeNotes";
+
+// ─── constants ────────────────────────────────────────────────────────────────
+
+/** Replace with real auth context / user session when available. */
+const CURRENT_USER = "operator";
+
+// ─── helpers ──────────────────────────────────────────────────────────────────
+
+function formatTimestamp(iso: string): string {
+  return new Date(iso).toLocaleString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+/**
+ * Minimal inline formatter: **bold** → <strong>, _italic_ → <em>.
+ * Returns an array of React-compatible chunks (no dangerouslySetInnerHTML).
+ */
+function formatContent(text: string): React.ReactNode[] {
+  // Split on **…** and _…_
+  const parts = text.split(/(\*\*[^*]+\*\*|_[^_]+_)/g);
+  return parts.map((part, i) => {
+    if (part.startsWith("**") && part.endsWith("**")) {
+      return <strong key={i}>{part.slice(2, -2)}</strong>;
+    }
+    if (part.startsWith("_") && part.endsWith("_")) {
+      return <em key={i}>{part.slice(1, -1)}</em>;
+    }
+    return part;
+  });
+}
+
+// ─── sub-components ───────────────────────────────────────────────────────────
+
+function NoteCard({
+  note,
+  onUpdate,
+  onDelete,
+}: {
+  note: BridgeNote;
+  onUpdate: (id: string, content: string) => void;
+  onDelete: (id: string) => void;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(note.content);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const isOwner = note.author === CURRENT_USER;
+
+  function handleEdit() {
+    setDraft(note.content);
+    setEditing(true);
+    setTimeout(() => textareaRef.current?.focus(), 0);
+  }
+
+  function handleSave() {
+    if (draft.trim()) {
+      onUpdate(note.id, draft);
+    }
+    setEditing(false);
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      handleSave();
+    }
+    if (e.key === "Escape") {
+      setEditing(false);
+      setDraft(note.content);
+    }
+  }
+
+  return (
+    <article
+      className="group rounded-lg border border-stellar-border bg-stellar-dark/30 p-4 transition-colors hover:border-stellar-blue/40"
+      aria-label={`Note by ${note.author}`}
+    >
+      {/* header */}
+      <div className="mb-2 flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-stellar-blue/20 text-xs font-semibold text-stellar-blue uppercase">
+            {note.author[0]}
+          </span>
+          <span className="text-sm font-medium text-white truncate">{note.author}</span>
+        </div>
+        <div className="flex items-center gap-1 shrink-0">
+          <time
+            dateTime={note.updatedAt}
+            className="text-xs text-stellar-text-secondary"
+            title={note.updatedAt !== note.createdAt ? `Edited ${formatTimestamp(note.updatedAt)}` : undefined}
+          >
+            {formatTimestamp(note.createdAt)}
+            {note.updatedAt !== note.createdAt && (
+              <span className="ml-1 text-stellar-text-secondary/60">(edited)</span>
+            )}
+          </time>
+
+          {isOwner && !editing && (
+            <>
+              <button
+                type="button"
+                onClick={handleEdit}
+                aria-label="Edit note"
+                className="ml-1 rounded p-1 text-stellar-text-secondary opacity-0 transition-opacity hover:text-white group-hover:opacity-100 focus:opacity-100"
+              >
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                  <path d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.609zm1.414 1.06a.25.25 0 00-.354 0L3.64 10.92l-.534 1.866 1.866-.534 8.433-8.433a.25.25 0 000-.354l-1.378-1.379z" />
+                </svg>
+              </button>
+              <button
+                type="button"
+                onClick={() => onDelete(note.id)}
+                aria-label="Delete note"
+                className="rounded p-1 text-stellar-text-secondary opacity-0 transition-opacity hover:text-red-400 group-hover:opacity-100 focus:opacity-100"
+              >
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                  <path d="M11 1.75V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM6.5 1.75v1.25h3V1.75a.25.25 0 00-.25-.25h-2.5a.25.25 0 00-.25.25zM4.997 6.5a.75.75 0 00-1.5.056l.327 8.75a.75.75 0 001.498-.056L4.997 6.5zm5.006 0a.75.75 0 011.498.056l-.328 8.75a.75.75 0 01-1.498-.056L10.003 6.5z" />
+                </svg>
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* body */}
+      {editing ? (
+        <div className="space-y-2">
+          <textarea
+            ref={textareaRef}
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={handleKeyDown}
+            rows={4}
+            className="w-full rounded border border-stellar-border bg-stellar-card px-3 py-2 text-sm text-white placeholder-stellar-text-secondary focus:outline-none focus:ring-2 focus:ring-stellar-blue resize-none"
+            placeholder="Write your note… (**bold**, _italic_)"
+            aria-label="Edit note content"
+          />
+          <div className="flex items-center justify-between gap-2">
+            <p className="text-xs text-stellar-text-secondary">
+              Tip: <kbd className="rounded border border-stellar-border px-1">Ctrl+Enter</kbd> to save
+            </p>
+            <div className="flex gap-2">
+              <button
+                type="button"
+                onClick={() => { setEditing(false); setDraft(note.content); }}
+                className="rounded border border-stellar-border px-3 py-1 text-xs text-stellar-text-secondary hover:text-white transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={handleSave}
+                disabled={!draft.trim()}
+                className="rounded bg-stellar-blue px-3 py-1 text-xs font-medium text-white hover:bg-stellar-blue/80 disabled:opacity-40 transition-colors"
+              >
+                Save
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <p className="text-sm text-stellar-text-primary leading-relaxed whitespace-pre-wrap">
+          {formatContent(note.content)}
+        </p>
+      )}
+    </article>
+  );
+}
+
+function ComposeForm({
+  onAdd,
+}: {
+  onAdd: (content: string) => void;
+}) {
+  const [value, setValue] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!value.trim()) return;
+    onAdd(value);
+    setValue("");
+    textareaRef.current?.focus();
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      if (value.trim()) {
+        onAdd(value);
+        setValue("");
+      }
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-2">
+      <label htmlFor="bridge-note-input" className="sr-only">
+        New note
+      </label>
+      <textarea
+        id="bridge-note-input"
+        ref={textareaRef}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        rows={3}
+        placeholder="Add an operator note… (**bold**, _italic_)"
+        className="w-full rounded-lg border border-stellar-border bg-stellar-card px-3 py-2 text-sm text-white placeholder-stellar-text-secondary focus:outline-none focus:ring-2 focus:ring-stellar-blue resize-none"
+        aria-label="New bridge note"
+      />
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-xs text-stellar-text-secondary">
+          Posting as <span className="font-medium text-white">{CURRENT_USER}</span>
+        </p>
+        <button
+          type="submit"
+          disabled={!value.trim()}
+          className="inline-flex items-center gap-1.5 rounded-lg bg-stellar-blue px-4 py-1.5 text-sm font-medium text-white hover:bg-stellar-blue/80 disabled:opacity-40 transition-colors focus:outline-none focus:ring-2 focus:ring-stellar-blue"
+        >
+          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <path d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z" />
+          </svg>
+          Add note
+        </button>
+      </div>
+    </form>
+  );
+}
+
+// ─── main export ──────────────────────────────────────────────────────────────
+
+interface BridgeNotesPanelProps {
+  bridgeName: string;
+}
+
+export default function BridgeNotesPanel({ bridgeName }: BridgeNotesPanelProps) {
+  const { notes, addNote, updateNote, deleteNote } = useBridgeNotes(bridgeName);
+
+  return (
+    <section
+      aria-labelledby="bridge-notes-heading"
+      className="rounded-xl border border-stellar-border bg-stellar-card p-6 space-y-5"
+    >
+      <div className="flex items-center justify-between gap-2">
+        <div>
+          <h2
+            id="bridge-notes-heading"
+            className="text-lg font-semibold text-white"
+          >
+            Operator Notes
+          </h2>
+          <p className="mt-0.5 text-sm text-stellar-text-secondary">
+            Internal coordination notes for <span className="font-medium text-white">{bridgeName}</span>
+          </p>
+        </div>
+        {notes.length > 0 && (
+          <span className="rounded-full bg-stellar-blue/15 px-2.5 py-0.5 text-xs font-semibold text-stellar-blue">
+            {notes.length}
+          </span>
+        )}
+      </div>
+
+      {/* compose */}
+      <ComposeForm onAdd={(content) => addNote(content, CURRENT_USER)} />
+
+      {/* notes list */}
+      {notes.length > 0 ? (
+        <div className="space-y-3" role="list" aria-label="Bridge notes">
+          {[...notes].reverse().map((note) => (
+            <div key={note.id} role="listitem">
+              <NoteCard
+                note={note}
+                onUpdate={updateNote}
+                onDelete={deleteNote}
+              />
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="rounded-lg border border-dashed border-stellar-border py-8 text-center">
+          <svg
+            className="mx-auto mb-2 text-stellar-text-secondary"
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            aria-hidden="true"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
+            />
+          </svg>
+          <p className="text-sm text-stellar-text-secondary">No notes yet</p>
+          <p className="mt-1 text-xs text-stellar-text-secondary/60">
+            Add the first note above to share context with your team.
+          </p>
+        </div>
+      )}
+    </section>
+  );
+}
diff --git a/frontend/src/components/BridgeStatusCard.tsx b/frontend/src/components/BridgeStatusCard.tsx
index 5793ad06..c0d270c0 100644
--- a/frontend/src/components/BridgeStatusCard.tsx
+++ b/frontend/src/components/BridgeStatusCard.tsx
@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { Link } from "react-router-dom";
+import { AssetStatusBadge, bridgeStatusToAssetStatus } from "./AssetStatusBadge";
 
 interface BridgeStatusCardProps {
   name: string;
@@ -12,22 +13,7 @@ interface BridgeStatusCardProps {
   topRight?: ReactNode;
 }
 
-function getStatusBadge(status: string) {
-  const styles: Record<string, string> = {
-    healthy: "bg-green-500/20 text-green-400",
-    degraded: "bg-yellow-500/20 text-yellow-400",
-    down: "bg-red-500/20 text-red-400",
-    unknown: "bg-gray-500/20 text-gray-400",
-  };
 
-  return (
-    <span
-      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${styles[status] || styles.unknown}`}
-    >
-      {status.charAt(0).toUpperCase() + status.slice(1)}
-    </span>
-  );
-}
 
 function formatNumber(num: number): string {
   if (num >= 1_000_000_000) return `$${(num / 1_000_000_000).toFixed(2)}B`;
@@ -61,7 +47,7 @@ export default function BridgeStatusCard({
         className={`mb-4 flex items-center justify-between gap-2 ${topRight ? "pr-14" : ""}`}
       >
         <h3 className="text-lg font-semibold text-stellar-text-primary truncate">{name}</h3>
-        {getStatusBadge(status)}
+        <AssetStatusBadge status={bridgeStatusToAssetStatus(status)} size="sm" />
       </div>
 
       <div className="space-y-3">
diff --git a/frontend/src/components/ReportQuickActions.tsx b/frontend/src/components/ReportQuickActions.tsx
new file mode 100644
index 00000000..a46c6482
--- /dev/null
+++ b/frontend/src/components/ReportQuickActions.tsx
@@ -0,0 +1,248 @@
+/**
+ * ReportQuickActions (#496)
+ *
+ * Action bar for report views with:
+ *  – Refresh, Export (CSV/JSON), Share (clipboard link) actions
+ *  – Loading feedback per-action
+ *  – Grouped layout with keyboard access (focusable, aria-*)
+ *  – Mobile-responsive (collapses to icon-only on small screens)
+ */
+
+import { useCallback, useRef, useState } from "react";
+
+// ─── types ────────────────────────────────────────────────────────────────────
+
+interface QuickAction {
+  id: string;
+  label: string;
+  shortLabel?: string;
+  icon: React.ReactNode;
+  onClick: () => Promise<void> | void;
+  /** Disable when no data is available */
+  disabled?: boolean;
+  variant?: "default" | "primary" | "danger";
+}
+
+interface ReportQuickActionsProps {
+  /** Called when the user clicks Refresh */
+  onRefresh: () => Promise<void> | void;
+  /** Called when the user clicks Export CSV; should return the CSV string */
+  onExportCsv?: () => string | null;
+  /** Called when the user clicks Export JSON; should return the JSON string */
+  onExportJson?: () => string | null;
+  /** URL to share; defaults to window.location.href */
+  shareUrl?: string;
+  /** Disable export/share actions (e.g. while data is loading) */
+  disabled?: boolean;
+  /** Extra CSS classes on the root element */
+  className?: string;
+}
+
+// ─── helpers ──────────────────────────────────────────────────────────────────
+
+function downloadBlob(content: string, filename: string, mime: string) {
+  const blob = new Blob([content], { type: mime });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+// ─── icons (inline SVG, no extra deps) ────────────────────────────────────────
+
+const RefreshIcon = (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+    <path d="M8 2.5a5.487 5.487 0 00-4.131 1.869l1.204 1.204A.25.25 0 014.896 6H1.25A.25.25 0 011 5.75V2.104a.25.25 0 01.427-.177l1.38 1.38A7.001 7.001 0 0114.95 7.16a.75.75 0 11-1.49.178A5.501 5.501 0 008 2.5zM1.705 8.005a.75.75 0 01.834.656 5.501 5.501 0 009.592 2.97l-1.204-1.204a.25.25 0 01.177-.427h3.646a.25.25 0 01.25.25v3.646a.25.25 0 01-.427.177l-1.38-1.38A7.001 7.001 0 011.05 8.84a.75.75 0 01.656-.834z" />
+  </svg>
+);
+
+const CsvIcon = (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+    <path d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z" />
+    <path d="M5.5 8.75a.75.75 0 000 1.5h5a.75.75 0 000-1.5h-5zM5 11.25a.75.75 0 01.75-.75h5a.75.75 0 010 1.5h-5a.75.75 0 01-.75-.75zM5.75 6a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5z" />
+  </svg>
+);
+
+const JsonIcon = (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+    <path d="M4.553 3.232a.75.75 0 01-.035 1.06l-2.183 2.083 2.183 2.083a.75.75 0 11-1.024 1.097L.784 7.25a.75.75 0 010-1.097L3.494 3.94a.75.75 0 011.06.293zM11.447 3.232a.75.75 0 011.06-.292l2.71 2.61a.75.75 0 010 1.097l-2.71 2.605a.75.75 0 01-1.024-1.097l2.183-2.083-2.183-2.083a.75.75 0 01-.036-1.06zM8.535 1.5a.75.75 0 01.536.898l-3 11a.75.75 0 01-1.434-.434l3-11a.75.75 0 01.898-.464z" />
+  </svg>
+);
+
+const ShareIcon = (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+    <path d="M7.776 3.537a.75.75 0 01.748 0l3.25 1.875A.75.75 0 0112 6.125v3.75a.75.75 0 01-.373.648l-3.25 1.875a.75.75 0 01-.748 0l-3.25-1.875A.75.75 0 014 9.875v-3.75a.75.75 0 01.373-.648l3.403-1.965zM8 4.909L5.5 6.338v3.324L8 11.091l2.5-1.429V6.338L8 4.909z" />
+  </svg>
+);
+
+const CheckIcon = (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+    <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z" />
+  </svg>
+);
+
+// ─── action button ────────────────────────────────────────────────────────────
+
+function ActionButton({
+  action,
+  loading,
+  succeeded,
+}: {
+  action: QuickAction;
+  loading: boolean;
+  succeeded: boolean;
+}) {
+  const baseClass =
+    "group relative inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-stellar-blue disabled:cursor-not-allowed disabled:opacity-40";
+
+  const variantClass =
+    action.variant === "primary"
+      ? "border-stellar-blue bg-stellar-blue/15 text-stellar-blue hover:bg-stellar-blue hover:text-white"
+      : action.variant === "danger"
+        ? "border-red-500/40 bg-red-500/10 text-red-400 hover:bg-red-500/20"
+        : "border-stellar-border bg-stellar-card text-stellar-text-secondary hover:text-white";
+
+  return (
+    <button
+      id={`report-action-${action.id}`}
+      type="button"
+      onClick={() => void action.onClick()}
+      disabled={action.disabled || loading}
+      aria-label={action.label}
+      aria-busy={loading}
+      className={`${baseClass} ${variantClass}`}
+    >
+      {/* icon */}
+      <span className={`shrink-0 transition-transform ${loading ? "animate-spin" : ""}`}>
+        {succeeded ? CheckIcon : action.icon}
+      </span>
+
+      {/* labels */}
+      <span className="hidden sm:inline">{action.shortLabel ?? action.label}</span>
+
+      {/* loading overlay text */}
+      {loading && (
+        <span className="sr-only" aria-live="polite">
+          {action.label} in progress…
+        </span>
+      )}
+      {succeeded && (
+        <span className="sr-only" aria-live="polite">
+          {action.label} completed.
+        </span>
+      )}
+    </button>
+  );
+}
+
+// ─── main export ──────────────────────────────────────────────────────────────
+
+export default function ReportQuickActions({
+  onRefresh,
+  onExportCsv,
+  onExportJson,
+  shareUrl,
+  disabled = false,
+  className = "",
+}: ReportQuickActionsProps) {
+  // Per-action loading/success state
+  const [loading, setLoading] = useState<Record<string, boolean>>({});
+  const [succeeded, setSucceeded] = useState<Record<string, boolean>>({});
+  const successTimers = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
+
+  const withFeedback = useCallback(
+    async (id: string, fn: () => Promise<void> | void) => {
+      setLoading((p) => ({ ...p, [id]: true }));
+      try {
+        await fn();
+        setSucceeded((p) => ({ ...p, [id]: true }));
+        // Clear success tick after 2 s
+        successTimers.current[id] = setTimeout(() => {
+          setSucceeded((p) => ({ ...p, [id]: false }));
+        }, 2000);
+      } finally {
+        setLoading((p) => ({ ...p, [id]: false }));
+      }
+    },
+    []
+  );
+
+  const slug = () =>
+    new Date().toISOString().slice(0, 10);
+
+  const actions: QuickAction[] = [
+    {
+      id: "refresh",
+      label: "Refresh data",
+      shortLabel: "Refresh",
+      icon: RefreshIcon,
+      onClick: () => withFeedback("refresh", onRefresh),
+      variant: "primary",
+    },
+    ...(onExportCsv
+      ? [
+          {
+            id: "export-csv",
+            label: "Export as CSV",
+            shortLabel: "CSV",
+            icon: CsvIcon,
+            disabled,
+            onClick: () =>
+              withFeedback("export-csv", () => {
+                const csv = onExportCsv();
+                if (csv) downloadBlob(csv, `report-${slug()}.csv`, "text/csv");
+              }),
+          },
+        ]
+      : []),
+    ...(onExportJson
+      ? [
+          {
+            id: "export-json",
+            label: "Export as JSON",
+            shortLabel: "JSON",
+            icon: JsonIcon,
+            disabled,
+            onClick: () =>
+              withFeedback("export-json", () => {
+                const json = onExportJson();
+                if (json)
+                  downloadBlob(json, `report-${slug()}.json`, "application/json");
+              }),
+          },
+        ]
+      : []),
+    {
+      id: "share",
+      label: "Copy link to clipboard",
+      shortLabel: "Share",
+      icon: ShareIcon,
+      disabled,
+      onClick: () =>
+        withFeedback("share", async () => {
+          await navigator.clipboard.writeText(shareUrl ?? window.location.href);
+        }),
+    },
+  ];
+
+  return (
+    <div
+      role="toolbar"
+      aria-label="Report quick actions"
+      className={`flex flex-wrap items-center gap-2 ${className}`}
+    >
+      {actions.map((action) => (
+        <ActionButton
+          key={action.id}
+          action={action}
+          loading={loading[action.id] ?? false}
+          succeeded={succeeded[action.id] ?? false}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/src/components/TableFooterSummary.tsx b/frontend/src/components/TableFooterSummary.tsx
new file mode 100644
index 00000000..773f45e9
--- /dev/null
+++ b/frontend/src/components/TableFooterSummary.tsx
@@ -0,0 +1,197 @@
+/**
+ * TableFooterSummary (#500)
+ *
+ * Displays aggregate totals and summary notes below a data table.
+ *
+ * Features:
+ *  – Flexible column definitions (numeric totals, text labels, counts)
+ *  – Optional sticky footer (position: sticky bottom-0)
+ *  – Summary note slot (freeform text beneath the totals row)
+ *  – Responsive: collapses to a stacked list on small screens
+ *  – Accessible: uses <tfoot>, scope="col", and aria-label
+ */
+
+import type { ReactNode } from "react";
+
+// ─── types ────────────────────────────────────────────────────────────────────
+
+export type FooterCellAlign = "left" | "right" | "center";
+
+export interface FooterColumn {
+  /** Must match the data column it sits under */
+  id: string;
+  /** Formatted value to display (string or ReactNode) */
+  value: ReactNode;
+  /** Accessible label, e.g. "Total TVL" */
+  ariaLabel?: string;
+  align?: FooterCellAlign;
+  /** Extra Tailwind classes */
+  className?: string;
+}
+
+export interface TableFooterSummaryProps {
+  /**
+   * Ordered list of footer cells.
+   * Pass an empty cell (`{ id, value: "" }`) for columns that need no total.
+   */
+  columns: FooterColumn[];
+  /** Optional note rendered below the totals row */
+  summaryNote?: ReactNode;
+  /** Stick the footer to the bottom of a scrollable table container */
+  sticky?: boolean;
+  /** Label for the accessible <tfoot> region */
+  ariaLabel?: string;
+  /** Extra CSS on the <tfoot> element */
+  className?: string;
+}
+
+// ─── helpers ──────────────────────────────────────────────────────────────────
+
+const ALIGN_CLASSES: Record<FooterCellAlign, string> = {
+  left: "text-left",
+  right: "text-right",
+  center: "text-center",
+};
+
+// ─── component ────────────────────────────────────────────────────────────────
+
+/**
+ * Drop this inside any `<table>` as the last child (after `<tbody>`).
+ *
+ * ```tsx
+ * <table>
+ *   <thead>…</thead>
+ *   <tbody>…</tbody>
+ *   <TableFooterSummary columns={footerCols} summaryNote="Values in USD" sticky />
+ * </table>
+ * ```
+ */
+export function TableFooterSummary({
+  columns,
+  summaryNote,
+  sticky = false,
+  ariaLabel = "Table summary",
+  className = "",
+}: TableFooterSummaryProps) {
+  return (
+    <tfoot
+      aria-label={ariaLabel}
+      className={[
+        "border-t-2 border-stellar-blue/30 bg-stellar-dark/60",
+        sticky ? "sticky bottom-0" : "",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      {/* totals row */}
+      <tr>
+        {columns.map((col) => {
+          const align = col.align ?? "left";
+          return (
+            <td
+              key={col.id}
+              aria-label={col.ariaLabel}
+              className={[
+                "py-3 pr-4 text-sm font-semibold text-white",
+                ALIGN_CLASSES[align],
+                col.className ?? "",
+              ]
+                .filter(Boolean)
+                .join(" ")}
+            >
+              {col.value}
+            </td>
+          );
+        })}
+      </tr>
+
+      {/* summary note row */}
+      {summaryNote && (
+        <tr>
+          <td
+            colSpan={columns.length}
+            className="pb-3 pt-0 pr-4 text-xs text-stellar-text-secondary"
+          >
+            {summaryNote}
+          </td>
+        </tr>
+      )}
+    </tfoot>
+  );
+}
+
+// ─── standalone card variant ──────────────────────────────────────────────────
+
+/**
+ * A card-style summary for contexts where you can't embed a `<tfoot>`
+ * (e.g. grid layouts, responsive fallback below the table).
+ */
+export interface SummaryCardItem {
+  label: string;
+  value: ReactNode;
+  className?: string;
+}
+
+export interface TableSummaryCardProps {
+  items: SummaryCardItem[];
+  note?: ReactNode;
+  className?: string;
+}
+
+export function TableSummaryCard({ items, note, className = "" }: TableSummaryCardProps) {
+  return (
+    <div
+      role="region"
+      aria-label="Table summary"
+      className={[
+        "rounded-lg border border-stellar-border bg-stellar-card px-4 py-3",
+        className,
+      ].join(" ")}
+    >
+      <dl className="flex flex-wrap gap-x-6 gap-y-2">
+        {items.map((item) => (
+          <div key={item.label} className="flex items-baseline gap-2">
+            <dt className="text-xs text-stellar-text-secondary whitespace-nowrap">
+              {item.label}
+            </dt>
+            <dd className={`text-sm font-semibold text-white ${item.className ?? ""}`}>
+              {item.value}
+            </dd>
+          </div>
+        ))}
+      </dl>
+      {note && (
+        <p className="mt-2 text-xs text-stellar-text-secondary">{note}</p>
+      )}
+    </div>
+  );
+}
+
+// ─── aggregate helpers ────────────────────────────────────────────────────────
+
+/** Sum an array of numbers, returning null if the array is empty. */
+export function sumColumn(values: (number | null | undefined)[]): number | null {
+  const nums = values.filter((v): v is number => typeof v === "number");
+  if (nums.length === 0) return null;
+  return nums.reduce((a, b) => a + b, 0);
+}
+
+/** Average an array of numbers, returning null if the array is empty. */
+export function avgColumn(values: (number | null | undefined)[]): number | null {
+  const nums = values.filter((v): v is number => typeof v === "number");
+  if (nums.length === 0) return null;
+  return nums.reduce((a, b) => a + b, 0) / nums.length;
+}
+
+/** Format a number as a compact USD string (1.2M, 340K, etc.) */
+export function formatCompact(value: number | null): string {
+  if (value === null) return "—";
+  if (Math.abs(value) >= 1_000_000_000)
+    return `$${(value / 1_000_000_000).toFixed(2)}B`;
+  if (Math.abs(value) >= 1_000_000)
+    return `$${(value / 1_000_000).toFixed(2)}M`;
+  if (Math.abs(value) >= 1_000)
+    return `$${(value / 1_000).toFixed(2)}K`;
+  return `$${value.toFixed(2)}`;
+}
diff --git a/frontend/src/hooks/useBridgeNotes.ts b/frontend/src/hooks/useBridgeNotes.ts
new file mode 100644
index 00000000..4414c5ea
--- /dev/null
+++ b/frontend/src/hooks/useBridgeNotes.ts
@@ -0,0 +1,92 @@
+/**
+ * useBridgeNotes – local-storage-backed hook for per-bridge operator notes.
+ *
+ * Notes are keyed by bridge name and stored as a JSON array so they survive
+ * page refreshes without requiring a backend endpoint.
+ */
+
+import { useCallback, useEffect, useState } from "react";
+
+export interface BridgeNote {
+  id: string;
+  bridgeName: string;
+  content: string;
+  author: string;
+  createdAt: string;   // ISO-8601
+  updatedAt: string;   // ISO-8601
+}
+
+const STORAGE_KEY = "bridgewatch:bridge-notes";
+
+function readAll(): BridgeNote[] {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return [];
+    return JSON.parse(raw) as BridgeNote[];
+  } catch {
+    return [];
+  }
+}
+
+function writeAll(notes: BridgeNote[]) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(notes));
+}
+
+function generateId(): string {
+  return `note_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
+}
+
+export function useBridgeNotes(bridgeName: string) {
+  const [all, setAll] = useState<BridgeNote[]>(readAll);
+
+  // Re-sync if another tab writes
+  useEffect(() => {
+    function onStorage(e: StorageEvent) {
+      if (e.key === STORAGE_KEY) setAll(readAll());
+    }
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, []);
+
+  const notes = all.filter((n) => n.bridgeName === bridgeName);
+
+  const addNote = useCallback(
+    (content: string, author: string) => {
+      const now = new Date().toISOString();
+      const note: BridgeNote = {
+        id: generateId(),
+        bridgeName,
+        content: content.trim(),
+        author,
+        createdAt: now,
+        updatedAt: now,
+      };
+      setAll((prev) => {
+        const next = [...prev, note];
+        writeAll(next);
+        return next;
+      });
+    },
+    [bridgeName]
+  );
+
+  const updateNote = useCallback((id: string, content: string) => {
+    setAll((prev) => {
+      const next = prev.map((n) =>
+        n.id === id ? { ...n, content: content.trim(), updatedAt: new Date().toISOString() } : n
+      );
+      writeAll(next);
+      return next;
+    });
+  }, []);
+
+  const deleteNote = useCallback((id: string) => {
+    setAll((prev) => {
+      const next = prev.filter((n) => n.id !== id);
+      writeAll(next);
+      return next;
+    });
+  }, []);
+
+  return { notes, addNote, updateNote, deleteNote };
+}
diff --git a/frontend/src/pages/Bridges.tsx b/frontend/src/pages/Bridges.tsx
index a41f5226..61f36be2 100644
--- a/frontend/src/pages/Bridges.tsx
+++ b/frontend/src/pages/Bridges.tsx
@@ -1,15 +1,20 @@
 import { Suspense, useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
 import { useBridges } from "../hooks/useBridges";
 import { useFavorites } from "../hooks/useFavorites";
 import { useRefreshControls } from "../hooks/useRefreshControls";
 import { usePullToRefresh } from "../hooks/usePullToRefresh";
 import BridgeStatusCard from "../components/BridgeStatusCard";
+import BridgeNotesPanel from "../components/BridgeNotesPanel";
 import FavoriteTagChip from "../components/favorites/FavoriteTagChip";
 import RefreshControls from "../components/RefreshControls";
 import PullToRefresh from "../components/PullToRefresh";
 import { SkeletonCard, ErrorBoundary } from "../components/Skeleton";
 
 export default function Bridges() {
+  const [searchParams] = useSearchParams();
+  const selectedBridge = searchParams.get("selected") ?? null;
+
   const {
     favoritesFilterMode,
     setFavoritesFilterMode,
@@ -185,6 +190,10 @@ export default function Bridges() {
           </table>
         </div>
       </div>
+      {/* Bridge notes panel — shown when a bridge card is clicked */}
+      {selectedBridge && (
+        <BridgeNotesPanel bridgeName={selectedBridge} />
+      )}
     </div>
   );
 }
diff --git a/frontend/src/pages/Reports.tsx b/frontend/src/pages/Reports.tsx
index 54268fb7..9f94eceb 100644
--- a/frontend/src/pages/Reports.tsx
+++ b/frontend/src/pages/Reports.tsx
@@ -2,6 +2,18 @@ import { useState, useMemo } from "react";
 import { useAssetsWithHealth } from "../hooks/useAssets";
 import { useBridges } from "../hooks/useBridges";
 import PrintButton from "../components/PrintButton";
+import ReportQuickActions from "../components/ReportQuickActions";
+import {
+  TableFooterSummary,
+  sumColumn,
+  avgColumn,
+  formatCompact,
+} from "../components/TableFooterSummary";
+import {
+  AssetStatusBadge,
+  bridgeStatusToAssetStatus,
+  scoreToStatus,
+} from "../components/AssetStatusBadge";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -115,11 +127,16 @@ function OverviewReport({
   bridgesData: ReturnType<typeof useBridges>["data"];
 }) {
   const totalAssets = assetsData?.length ?? 0;
-  const healthy = assetsData?.filter((a) => (a.health?.overallScore ?? 0) >= 80).length ?? 0;
-  const warning = assetsData?.filter(
-    (a) => (a.health?.overallScore ?? 0) >= 50 && (a.health?.overallScore ?? 0) < 80
-  ).length ?? 0;
-  const critical = assetsData?.filter((a) => (a.health?.overallScore ?? 101) < 50).length ?? 0;
+  const healthy =
+    assetsData?.filter((a) => (a.health?.overallScore ?? 0) >= 80).length ?? 0;
+  const warning =
+    assetsData?.filter(
+      (a) =>
+        (a.health?.overallScore ?? 0) >= 50 &&
+        (a.health?.overallScore ?? 0) < 80,
+    ).length ?? 0;
+  const critical =
+    assetsData?.filter((a) => (a.health?.overallScore ?? 101) < 50).length ?? 0;
   const avgScore =
     totalAssets > 0
       ? (
@@ -142,7 +159,10 @@ function OverviewReport({
             { label: "Total Assets Tracked", value: totalAssets },
             { label: "Average Health Score", value: avgScore },
             { label: "Total Bridges", value: totalBridges },
-            { label: "Report Period", value: `${dateRange.from} — ${dateRange.to}` },
+            {
+              label: "Report Period",
+              value: `${dateRange.from} — ${dateRange.to}`,
+            },
           ].map((stat) => (
             <div
               key={stat.label}
@@ -159,19 +179,35 @@ function OverviewReport({
 
       {/* Status breakdown */}
       <section className="print-avoid-break">
-        <h2 className="text-lg font-semibold text-white mb-3">Asset Health Distribution</h2>
+        <h2 className="text-lg font-semibold text-white mb-3">
+          Asset Health Distribution
+        </h2>
         <div className="grid grid-cols-3 gap-4">
           {[
-            { label: "Healthy (≥ 80)", count: healthy, color: "text-green-400" },
-            { label: "Warning (50–79)", count: warning, color: "text-yellow-400" },
-            { label: "Critical (< 50)", count: critical, color: "text-red-400" },
+            {
+              label: "Healthy (≥ 80)",
+              count: healthy,
+              color: "text-green-400",
+            },
+            {
+              label: "Warning (50–79)",
+              count: warning,
+              color: "text-yellow-400",
+            },
+            {
+              label: "Critical (< 50)",
+              count: critical,
+              color: "text-red-400",
+            },
           ].map((row) => (
             <div
               key={row.label}
               className="bg-stellar-card border border-stellar-border rounded-lg p-4"
             >
               <p className="text-xs text-stellar-text-secondary">{row.label}</p>
-              <p className={`mt-1 text-3xl font-bold ${row.color}`}>{row.count}</p>
+              <p className={`mt-1 text-3xl font-bold ${row.color}`}>
+                {row.count}
+              </p>
             </div>
           ))}
         </div>
@@ -179,7 +215,9 @@ function OverviewReport({
 
       {/* All assets table */}
       <section className="print-avoid-break">
-        <h2 className="text-lg font-semibold text-white mb-3">Asset Health Table</h2>
+        <h2 className="text-lg font-semibold text-white mb-3">
+          Asset Health Table
+        </h2>
         <div className="overflow-x-auto">
           <table className="w-full text-sm border-collapse">
             <thead>
@@ -197,13 +235,20 @@ function OverviewReport({
                   key={asset.symbol}
                   className="border-b border-stellar-border/50 text-white print-avoid-break"
                 >
-                  <td className="py-2 pr-4 font-mono font-semibold">{asset.symbol}</td>
-                  <td className="py-2 pr-4 text-stellar-text-secondary">{asset.name}</td>
-                  <td className={`py-2 pr-4 font-bold ${scoreColor(asset.health?.overallScore ?? null)}`}>
+                  <td className="py-2 pr-4 font-mono font-semibold">
+                    {asset.symbol}
+                  </td>
+                  <td className="py-2 pr-4 text-stellar-text-secondary">
+                    {asset.name}
+                  </td>
+                  <td className="py-2 pr-4 font-bold text-white">
                     {asset.health?.overallScore ?? "—"}
                   </td>
-                  <td className={`py-2 pr-4 ${scoreColor(asset.health?.overallScore ?? null)}`}>
-                    {scoreLabel(asset.health?.overallScore ?? null)}
+                  <td className="py-2 pr-4">
+                    <AssetStatusBadge
+                      status={scoreToStatus(asset.health?.overallScore)}
+                      size="sm"
+                    />
                   </td>
                   <td className="py-2 capitalize text-stellar-text-secondary">
                     {asset.health?.trend ?? "—"}
@@ -212,12 +257,38 @@ function OverviewReport({
               ))}
               {(assetsData ?? []).length === 0 && (
                 <tr>
-                  <td colSpan={5} className="py-6 text-center text-stellar-text-secondary">
+                  <td
+                    colSpan={5}
+                    className="py-6 text-center text-stellar-text-secondary"
+                  >
                     No asset data available
                   </td>
                 </tr>
               )}
             </tbody>
+            <TableFooterSummary
+              ariaLabel="Asset health table summary"
+              columns={[
+                {
+                  id: "symbol",
+                  value: `${(assetsData ?? []).length} assets`,
+                  ariaLabel: "Total assets",
+                },
+                { id: "name", value: "" },
+                {
+                  id: "score",
+                  value: avgScore !== "—" ? `Avg ${avgScore}` : "—",
+                  ariaLabel: "Average health score",
+                },
+                {
+                  id: "status",
+                  value: `${healthy} healthy · ${warning} warning · ${critical} critical`,
+                  ariaLabel: "Status distribution",
+                },
+                { id: "trend", value: "" },
+              ]}
+              summaryNote="Health scores range 0–100. Healthy ≥ 80, Warning 50–79, Critical < 50."
+            />
           </table>
         </div>
       </section>
@@ -236,7 +307,10 @@ function AssetsReport({
 }) {
   return (
     <div className="space-y-6">
-      <ReportHeader title="Asset Health Detailed Report" dateRange={dateRange} />
+      <ReportHeader
+        title="Asset Health Detailed Report"
+        dateRange={dateRange}
+      />
 
       {(assetsData ?? []).map((asset, idx) => (
         <section
@@ -248,19 +322,21 @@ function AssetsReport({
           <div className="flex items-start justify-between">
             <div>
               <h2 className="text-xl font-bold text-white">{asset.symbol}</h2>
-              <p className="text-sm text-stellar-text-secondary">{asset.name}</p>
+              <p className="text-sm text-stellar-text-secondary">
+                {asset.name}
+              </p>
             </div>
             <div className="text-right">
               <p
                 className={`text-3xl font-bold ${scoreColor(
-                  asset.health?.overallScore ?? null
+                  asset.health?.overallScore ?? null,
                 )}`}
               >
                 {asset.health?.overallScore ?? "—"}
               </p>
               <p
                 className={`text-sm font-medium ${scoreColor(
-                  asset.health?.overallScore ?? null
+                  asset.health?.overallScore ?? null,
                 )}`}
               >
                 {scoreLabel(asset.health?.overallScore ?? null)}
@@ -271,20 +347,40 @@ function AssetsReport({
           {asset.health && (
             <dl className="mt-4 grid grid-cols-2 sm:grid-cols-3 gap-4 text-sm">
               {[
-                { label: "Liquidity Depth", value: asset.health.factors.liquidityDepth },
-                { label: "Price Stability", value: asset.health.factors.priceStability },
-                { label: "Bridge Uptime", value: asset.health.factors.bridgeUptime },
-                { label: "Reserve Backing", value: asset.health.factors.reserveBacking },
-                { label: "Volume Trend", value: asset.health.factors.volumeTrend },
+                {
+                  label: "Liquidity Depth",
+                  value: asset.health.factors.liquidityDepth,
+                },
+                {
+                  label: "Price Stability",
+                  value: asset.health.factors.priceStability,
+                },
+                {
+                  label: "Bridge Uptime",
+                  value: asset.health.factors.bridgeUptime,
+                },
+                {
+                  label: "Reserve Backing",
+                  value: asset.health.factors.reserveBacking,
+                },
+                {
+                  label: "Volume Trend",
+                  value: asset.health.factors.volumeTrend,
+                },
                 { label: "Trend", value: asset.health.trend, isText: true },
               ].map((item) => (
-                <div key={item.label} className="bg-stellar-dark rounded-lg p-3">
+                <div
+                  key={item.label}
+                  className="bg-stellar-dark rounded-lg p-3"
+                >
                   <dt className="text-stellar-text-secondary">{item.label}</dt>
                   <dd
                     className={`mt-1 font-semibold ${
                       item.isText
                         ? "text-white capitalize"
-                        : scoreColor(typeof item.value === "number" ? item.value : null)
+                        : scoreColor(
+                            typeof item.value === "number" ? item.value : null,
+                          )
                     }`}
                   >
                     {item.value ?? "—"}
@@ -296,7 +392,9 @@ function AssetsReport({
 
           <p className="mt-3 text-xs text-stellar-text-secondary">
             Last updated:{" "}
-            {asset.health?.lastUpdated ? formatDate(asset.health.lastUpdated) : "No data"}
+            {asset.health?.lastUpdated
+              ? formatDate(asset.health.lastUpdated)
+              : "No data"}
           </p>
         </section>
       ))}
@@ -326,7 +424,9 @@ function BridgesReport({
       <ReportHeader title="Bridge Status Report" dateRange={dateRange} />
 
       <section className="print-avoid-break">
-        <h2 className="text-lg font-semibold text-white mb-3">Bridge Summary</h2>
+        <h2 className="text-lg font-semibold text-white mb-3">
+          Bridge Summary
+        </h2>
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
           {[
             { label: "Total Bridges", value: bridges.length },
@@ -338,7 +438,10 @@ function BridgesReport({
               label: "Degraded",
               value: bridges.filter((b) => b.status === "degraded").length,
             },
-            { label: "Down", value: bridges.filter((b) => b.status === "down").length },
+            {
+              label: "Down",
+              value: bridges.filter((b) => b.status === "down").length,
+            },
           ].map((s) => (
             <div
               key={s.label}
@@ -369,23 +472,17 @@ function BridgesReport({
             </thead>
             <tbody>
               {bridges.map((bridge) => {
-                const statusColor =
-                  bridge.status === "healthy"
-                    ? "text-green-400"
-                    : bridge.status === "degraded"
-                    ? "text-yellow-400"
-                    : bridge.status === "down"
-                    ? "text-red-400"
-                    : "text-stellar-text-secondary";
-
                 return (
                   <tr
                     key={bridge.name}
                     className="border-b border-stellar-border/50 text-white print-avoid-break"
                   >
                     <td className="py-2 pr-4 font-semibold">{bridge.name}</td>
-                    <td className={`py-2 pr-4 capitalize font-medium ${statusColor}`}>
-                      {bridge.status}
+                    <td className="py-2 pr-4">
+                      <AssetStatusBadge
+                        status={bridgeStatusToAssetStatus(bridge.status)}
+                        size="sm"
+                      />
                     </td>
                     <td className="py-2 pr-4">
                       ${bridge.totalValueLocked.toLocaleString()}
@@ -401,8 +498,8 @@ function BridgesReport({
                         bridge.mismatchPercentage > 1
                           ? "text-red-400"
                           : bridge.mismatchPercentage > 0.1
-                          ? "text-yellow-400"
-                          : "text-green-400"
+                            ? "text-yellow-400"
+                            : "text-green-400"
                       }`}
                     >
                       {bridge.mismatchPercentage.toFixed(3)}%
@@ -412,12 +509,57 @@ function BridgesReport({
               })}
               {bridges.length === 0 && (
                 <tr>
-                  <td colSpan={6} className="py-6 text-center text-stellar-text-secondary">
+                  <td
+                    colSpan={6}
+                    className="py-6 text-center text-stellar-text-secondary"
+                  >
                     No bridge data available
                   </td>
                 </tr>
               )}
             </tbody>
+            <TableFooterSummary
+              ariaLabel="Bridge status table summary"
+              columns={[
+                {
+                  id: "name",
+                  value: `${bridges.length} bridges`,
+                  ariaLabel: "Total bridges",
+                },
+                { id: "status", value: "" },
+                {
+                  id: "tvl",
+                  value: formatCompact(
+                    sumColumn(bridges.map((b) => b.totalValueLocked)),
+                  ),
+                  ariaLabel: "Total value locked",
+                  align: "right",
+                },
+                {
+                  id: "stellar",
+                  value: (
+                    sumColumn(bridges.map((b) => b.supplyOnStellar)) ?? 0
+                  ).toLocaleString(),
+                  ariaLabel: "Total supply on Stellar",
+                  align: "right",
+                },
+                {
+                  id: "source",
+                  value: (
+                    sumColumn(bridges.map((b) => b.supplyOnSource)) ?? 0
+                  ).toLocaleString(),
+                  ariaLabel: "Total supply on source chain",
+                  align: "right",
+                },
+                {
+                  id: "mismatch",
+                  value: `${(avgColumn(bridges.map((b) => b.mismatchPercentage)) ?? 0).toFixed(3)}%`,
+                  ariaLabel: "Average mismatch percentage",
+                  align: "right",
+                },
+              ]}
+              summaryNote="TVL and supply figures are approximate. Mismatch % is the average across all bridges."
+            />
           </table>
         </div>
       </section>
@@ -431,34 +573,46 @@ function BridgesReport({
 // Main Reports page
 // ---------------------------------------------------------------------------
 
-const TEMPLATES: { id: ReportTemplate; label: string; description: string }[] = [
-  {
-    id: "overview",
-    label: "Network Overview",
-    description: "High-level summary of all assets and bridges with status distribution.",
-  },
-  {
-    id: "assets",
-    label: "Asset Health Detail",
-    description: "Per-asset score breakdown including all health factor components.",
-  },
-  {
-    id: "bridges",
-    label: "Bridge Status",
-    description: "Bridge TVL, supply consistency, and mismatch analysis.",
-  },
-  {
-    id: "custom",
-    label: "Custom Report",
-    description: "Combine overview and bridge data with a custom date range.",
-  },
-];
+const TEMPLATES: { id: ReportTemplate; label: string; description: string }[] =
+  [
+    {
+      id: "overview",
+      label: "Network Overview",
+      description:
+        "High-level summary of all assets and bridges with status distribution.",
+    },
+    {
+      id: "assets",
+      label: "Asset Health Detail",
+      description:
+        "Per-asset score breakdown including all health factor components.",
+    },
+    {
+      id: "bridges",
+      label: "Bridge Status",
+      description: "Bridge TVL, supply consistency, and mismatch analysis.",
+    },
+    {
+      id: "custom",
+      label: "Custom Report",
+      description: "Combine overview and bridge data with a custom date range.",
+    },
+  ];
 
 export default function Reports() {
-  const { data: assetsData, isLoading: assetsLoading } = useAssetsWithHealth();
-  const { data: bridgesData, isLoading: bridgesLoading } = useBridges();
-
-  const [activeTemplate, setActiveTemplate] = useState<ReportTemplate>("overview");
+  const {
+    data: assetsData,
+    isLoading: assetsLoading,
+    refetch: refetchAssets,
+  } = useAssetsWithHealth();
+  const {
+    data: bridgesData,
+    isLoading: bridgesLoading,
+    refetch: refetchBridges,
+  } = useBridges();
+
+  const [activeTemplate, setActiveTemplate] =
+    useState<ReportTemplate>("overview");
   const [dateRange, setDateRange] = useState<DateRange>({
     from: thirtyDaysAgo(),
     to: nowIso(),
@@ -468,24 +622,64 @@ export default function Reports() {
 
   const generatedAt = useMemo(
     () =>
-      new Date().toLocaleString("en-US", { dateStyle: "long", timeStyle: "short" }),
-    []
+      new Date().toLocaleString("en-US", {
+        dateStyle: "long",
+        timeStyle: "short",
+      }),
+    [],
   );
 
+  const handleRefresh = async () => {
+    await Promise.all([refetchAssets(), refetchBridges()]);
+  };
+
+  const handleExportCsv = (): string | null => {
+    if (activeTemplate === "assets" || activeTemplate === "overview") {
+      const rows = (assetsData ?? []).map(
+        (a) =>
+          `${a.symbol},${a.name},${a.health?.overallScore ?? ""},${a.health?.trend ?? ""}`,
+      );
+      return ["Symbol,Name,Health Score,Trend", ...rows].join("\n");
+    }
+    if (activeTemplate === "bridges" || activeTemplate === "custom") {
+      const rows = (bridgesData?.bridges ?? []).map(
+        (b) =>
+          `${b.name},${b.status},${b.totalValueLocked},${b.supplyOnStellar},${b.supplyOnSource},${b.mismatchPercentage}`,
+      );
+      return [
+        "Bridge,Status,TVL,Supply (Stellar),Supply (Source),Mismatch %",
+        ...rows,
+      ].join("\n");
+    }
+    return null;
+  };
+
+  const handleExportJson = (): string | null => {
+    if (activeTemplate === "assets" || activeTemplate === "overview") {
+      return JSON.stringify(assetsData ?? [], null, 2);
+    }
+    if (activeTemplate === "bridges" || activeTemplate === "custom") {
+      return JSON.stringify(bridgesData?.bridges ?? [], null, 2);
+    }
+    return null;
+  };
+
   return (
     <div className="space-y-8">
       {/* ── Screen-only controls (hidden in print) ── */}
       <header className="no-print">
         <h1 className="text-3xl font-bold text-white">Reports</h1>
         <p className="mt-2 text-stellar-text-secondary">
-          Generate print-ready reports and export them as PDF using your browser's
-          built-in Save as PDF option.
+          Generate print-ready reports and export them as PDF using your
+          browser's built-in Save as PDF option.
         </p>
       </header>
 
       {/* Template selector */}
       <section className="no-print">
-        <h2 className="text-lg font-semibold text-white mb-3">Report Template</h2>
+        <h2 className="text-lg font-semibold text-white mb-3">
+          Report Template
+        </h2>
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
           {TEMPLATES.map((tpl) => (
             <button
@@ -552,6 +746,15 @@ export default function Reports() {
 
           <PrintButton label="Print / Export PDF" />
         </div>
+
+        <div className="mt-4">
+          <ReportQuickActions
+            onRefresh={handleRefresh}
+            onExportCsv={handleExportCsv}
+            onExportJson={handleExportJson}
+            disabled={isLoading}
+          />
+        </div>
       </section>
 
       {/* ── Report content (visible on screen + printed) ── */}
@@ -570,15 +773,18 @@ export default function Reports() {
               {TEMPLATES.find((t) => t.id === activeTemplate)?.label}
             </h2>
             <p className="text-sm text-stellar-text-secondary mt-1">
-              Period: {formatDate(dateRange.from)} – {formatDate(dateRange.to)} · Generated:{" "}
-              {generatedAt}
+              Period: {formatDate(dateRange.from)} – {formatDate(dateRange.to)}{" "}
+              · Generated: {generatedAt}
             </p>
           </div>
           <PrintButton label="Print this report" />
         </div>
 
         {isLoading ? (
-          <div className="py-16 text-center text-stellar-text-secondary" role="status">
+          <div
+            className="py-16 text-center text-stellar-text-secondary"
+            role="status"
+          >
             Loading report data…
           </div>
         ) : (

From e95b4642ca07e6722ada5c59cdf378d75545da61 Mon Sep 17 00:00:00 2001
From: Zacheus <segunzacheusi@gmail.com>
Date: Tue, 2 Jun 2026 09:29:51 +0100
Subject: [PATCH 2/2] chore: implemented new UI changes across brifges reports
 and footer summary

---
 package-lock.json | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 8fb0566b..969ae0d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1132,6 +1132,7 @@
       "os": [
         "aix"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1149,6 +1150,7 @@
       "os": [
         "android"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1166,6 +1168,7 @@
       "os": [
         "android"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1183,6 +1186,7 @@
       "os": [
         "android"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1200,6 +1204,7 @@
       "os": [
         "darwin"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1217,6 +1222,7 @@
       "os": [
         "darwin"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1234,6 +1240,7 @@
       "os": [
         "freebsd"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1251,6 +1258,7 @@
       "os": [
         "freebsd"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1268,6 +1276,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1285,6 +1294,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1302,6 +1312,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1319,6 +1330,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1336,6 +1348,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1353,6 +1366,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1370,6 +1384,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1387,6 +1402,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1404,6 +1420,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1421,6 +1438,7 @@
       "os": [
         "netbsd"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1438,6 +1456,7 @@
       "os": [
         "netbsd"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1455,6 +1474,7 @@
       "os": [
         "openbsd"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1472,6 +1492,7 @@
       "os": [
         "openbsd"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1489,6 +1510,7 @@
       "os": [
         "openharmony"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1506,6 +1528,7 @@
       "os": [
         "sunos"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1523,6 +1546,7 @@
       "os": [
         "win32"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1540,6 +1564,7 @@
       "os": [
         "win32"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1557,6 +1582,7 @@
       "os": [
         "win32"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }