feat(dashboard): time range filter for operational metrics (30d/90d/6m/1y/all)

frontend/src/api/operational-metrics.ts

@@ -85,8 +85,10 @@ export interface TeamMetrics {
 
 // ── API Functions ────────────────────────────────────────────────────
 
-export async function getOperationalMetrics(): Promise<OperationalMetrics> {
-  const { data } = await client.get<OperationalMetrics>("/metrics/operational");
+export async function getOperationalMetrics(since?: string): Promise<OperationalMetrics> {
+  const { data } = await client.get<OperationalMetrics>("/metrics/operational", {
+    params: since ? { since } : undefined,
+  });
   return data;
 }
 
@@ -99,7 +101,9 @@ export async function getOperationalTrend(
   return data;
 }
 
-export async function getMetricsByTeam(): Promise<TeamMetrics> {
-  const { data } = await client.get<TeamMetrics>("/metrics/operational/by-team");
+export async function getMetricsByTeam(since?: string): Promise<TeamMetrics> {
+  const { data } = await client.get<TeamMetrics>("/metrics/operational/by-team", {
+    params: since ? { since } : undefined,
+  });
   return data;
 }

frontend/src/pages/ExecutiveDashboardPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState, useMemo } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "react-router-dom";
 import {
@@ -141,9 +141,29 @@ function KPICard({
 
 // ── Main Component ──────────────────────────────────────────────────
 
+type TimeRange = "30d" | "90d" | "6m" | "1y" | "all";
+
+const TIME_RANGE_OPTIONS: { value: TimeRange; label: string; days: number | null }[] = [
+  { value: "30d",  label: "Last 30 days",  days: 30  },
+  { value: "90d",  label: "Last 90 days",  days: 90  },
+  { value: "6m",   label: "Last 6 months", days: 182 },
+  { value: "1y",   label: "Last 12 months",days: 365 },
+  { value: "all",  label: "All time",      days: null },
+];
+
+function sinceDate(days: number | null): string | undefined {
+  if (!days) return undefined;
+  const d = new Date(Date.now() - days * 86400_000);
+  return d.toISOString().split("T")[0];
+}
+
 export default function ExecutiveDashboardPage() {
   const navigate = useNavigate();
 
+  const [timeRange, setTimeRange] = useState<TimeRange>("all");
+  const rangeOption = TIME_RANGE_OPTIONS.find((o) => o.value === timeRange)!;
+  const since = useMemo(() => sinceDate(rangeOption.days), [rangeOption]);
+
   const { data: orgScore, isLoading: loadingScore } = useQuery({
     queryKey: ["org-score"],
     queryFn: getOrganizationScore,
@@ -155,13 +175,13 @@ export default function ExecutiveDashboardPage() {
   });
 
   const { data: opMetrics, isLoading: loadingMetrics } = useQuery({
-    queryKey: ["operational-metrics"],
-    queryFn: getOperationalMetrics,
+    queryKey: ["operational-metrics", since],
+    queryFn: () => getOperationalMetrics(since),
   });
 
   const { data: teamMetrics } = useQuery({
-    queryKey: ["team-metrics"],
-    queryFn: getMetricsByTeam,
+    queryKey: ["team-metrics", since],
+    queryFn: () => getMetricsByTeam(since),
   });
 
   const { data: tacticCoverage } = useQuery({
@@ -276,11 +296,30 @@ export default function ExecutiveDashboardPage() {
   return (
     <div className="space-y-6">
       {/* Header */}
-      <div>
-        <h1 className="text-2xl font-bold text-white">Executive Dashboard</h1>
-        <p className="mt-1 text-sm text-gray-400">
-          Red/Blue Team programme coverage and maturity overview
-        </p>
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-white">Executive Dashboard</h1>
+          <p className="mt-1 text-sm text-gray-400">
+            Red/Blue Team programme coverage and maturity overview
+          </p>
+        </div>
+
+        {/* Time range filter */}
+        <div className="flex items-center gap-1.5 rounded-xl border border-gray-800 bg-gray-900 p-1">
+          {TIME_RANGE_OPTIONS.map((opt) => (
+            <button
+              key={opt.value}
+              onClick={() => setTimeRange(opt.value)}
+              className={`rounded-lg px-3 py-1.5 text-xs font-medium transition-colors ${
+                timeRange === opt.value
+                  ? "bg-cyan-600 text-white"
+                  : "text-gray-400 hover:text-white"
+              }`}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
       </div>
 
       {/* Section 1: Score Card + Sub-scores */}
@@ -363,6 +402,12 @@ export default function ExecutiveDashboardPage() {
 
       {/* Section 3: Team Performance */}
       {teamMetrics && (
+        <div>
+        {timeRange !== "all" && (
+          <p className="mb-2 text-xs text-cyan-400/70">
+            Operational metrics filtered to: <span className="font-medium text-cyan-400">{rangeOption.label}</span>
+          </p>
+        )}
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
           {/* Red Team */}
           <div className="rounded-xl border border-gray-800 bg-gray-900 p-4">
@@ -426,6 +471,7 @@ export default function ExecutiveDashboardPage() {
             </div>
           </div>
         </div>
+        </div>
       )}
 
       {/* Section 4: Threat Actor Exposure vs Detection Strength */}
@@ -570,6 +616,15 @@ export default function ExecutiveDashboardPage() {
       })()}
 
       {/* Section 4: Operational KPIs */}
+      <div>
+      <div className="mb-2 flex items-center justify-between">
+        <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider">Operational KPIs</h2>
+        {timeRange !== "all" && (
+          <span className="rounded-full border border-cyan-500/30 bg-cyan-500/10 px-2.5 py-0.5 text-xs text-cyan-400">
+            {rangeOption.label}
+          </span>
+        )}
+      </div>
       <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
         <KPICard
           label="MTTD"
@@ -597,6 +652,7 @@ export default function ExecutiveDashboardPage() {
           tooltip={{ description: "Percentage of tests that have entered the validation phase and been successfully approved. Formula: Validated ÷ (Validated + Rejected + In Review) × 100.", context: "100% = all reviewed tests approved. < 60% = quality or process issues. High backlog (many In Review) lowers this score." }}
         />
       </div>
+      </div>
 
       {/* Section 5: Coverage by Tactic */}
       <div className="rounded-xl border border-gray-800 bg-gray-900 p-4">