feat: Phase 8 - Frontend main views (T-026 to T-031)

Implement all main frontend views for the MITRE ATT&CK coverage platform:

- T-026: Dashboard with coverage summary cards and tactic breakdown table

- T-027: Interactive ATT&CK matrix with filtering by status, tactic, platform

- T-028: Technique detail page with tests, intel items, and review actions

- T-029: Test creation form with technique selector and validation

- T-030: Test detail page with drag and drop evidence upload and download

- T-031: System admin panel with MITRE sync and intel scan controls

New components: CoverageSummaryCard, TacticCoverageChart, AttackMatrix, TechniqueCell, TestForm, EvidenceUpload, EvidenceList

New API modules: metrics.ts, techniques.ts, tests.ts, evidence.ts, system.ts

All views use TanStack Query for data fetching with proper loading and error states. Role-based UI controls for admin/lead actions.

frontend/src/pages/TechniqueDetailPage.tsx

@@ -0,0 +1,363 @@
+import { useParams, useNavigate } from "react-router-dom";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  Loader2,
+  AlertCircle,
+  ArrowLeft,
+  CheckCircle,
+  Clock,
+  Shield,
+  FileText,
+  ExternalLink,
+  Plus,
+  Check,
+  X,
+  AlertTriangle,
+} from "lucide-react";
+import { getTechniqueByMitreId, markTechniqueReviewed } from "../api/techniques";
+import { useAuth } from "../context/AuthContext";
+import type { TechniqueStatus, TestState, TestResult } from "../types/models";
+
+const statusBadgeColors: Record<TechniqueStatus, string> = {
+  validated: "bg-green-900/50 text-green-400 border-green-500/30",
+  partial: "bg-yellow-900/50 text-yellow-400 border-yellow-500/30",
+  in_progress: "bg-blue-900/50 text-blue-400 border-blue-500/30",
+  not_covered: "bg-red-900/50 text-red-400 border-red-500/30",
+  not_evaluated: "bg-gray-800/50 text-gray-400 border-gray-600/30",
+  review_required: "bg-orange-900/50 text-orange-400 border-orange-500/30",
+};
+
+const testStateBadgeColors: Record<TestState, string> = {
+  draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
+  in_review: "bg-blue-900/50 text-blue-400 border-blue-500/30",
+  validated: "bg-green-900/50 text-green-400 border-green-500/30",
+  rejected: "bg-red-900/50 text-red-400 border-red-500/30",
+};
+
+const testResultBadgeColors: Record<TestResult, string> = {
+  detected: "bg-green-900/50 text-green-400 border-green-500/30",
+  not_detected: "bg-red-900/50 text-red-400 border-red-500/30",
+  partially_detected: "bg-yellow-900/50 text-yellow-400 border-yellow-500/30",
+};
+
+export default function TechniqueDetailPage() {
+  const { mitreId } = useParams<{ mitreId: string }>();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { user } = useAuth();
+
+  const canReview =
+    user?.role === "admin" || user?.role === "red_lead" || user?.role === "blue_lead";
+
+  const {
+    data: technique,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["technique", mitreId],
+    queryFn: () => getTechniqueByMitreId(mitreId!),
+    enabled: !!mitreId,
+  });
+
+  const reviewMutation = useMutation({
+    mutationFn: () => markTechniqueReviewed(mitreId!),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["technique", mitreId] });
+      queryClient.invalidateQueries({ queryKey: ["techniques"] });
+    },
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
+      </div>
+    );
+  }
+
+  if (error || !technique) {
+    return (
+      <div className="flex h-64 flex-col items-center justify-center gap-2">
+        <AlertCircle className="h-10 w-10 text-red-400" />
+        <p className="text-red-400">Failed to load technique</p>
+        <button
+          onClick={() => navigate("/techniques")}
+          className="mt-2 flex items-center gap-1 text-sm text-cyan-400 hover:underline"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back to techniques
+        </button>
+      </div>
+    );
+  }
+
+  const formatDate = (dateStr: string | null) => {
+    if (!dateStr) return "—";
+    return new Date(dateStr).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Back button */}
+      <button
+        onClick={() => navigate("/techniques")}
+        className="flex items-center gap-1 text-sm text-gray-400 hover:text-cyan-400 transition-colors"
+      >
+        <ArrowLeft className="h-4 w-4" />
+        Back to techniques
+      </button>
+
+      {/* Header */}
+      <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+        <div className="flex items-start justify-between">
+          <div className="flex items-start gap-4">
+            <div className="rounded-lg bg-cyan-500/10 p-3">
+              <Shield className="h-8 w-8 text-cyan-400" />
+            </div>
+            <div>
+              <div className="flex items-center gap-3">
+                <h1 className="text-2xl font-bold text-white">{technique.mitre_id}</h1>
+                <span
+                  className={`inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium ${
+                    statusBadgeColors[technique.status_global]
+                  }`}
+                >
+                  {technique.status_global.replace(/_/g, " ")}
+                </span>
+                {technique.review_required && (
+                  <span className="inline-flex items-center gap-1 rounded-full border border-orange-500/30 bg-orange-900/50 px-2.5 py-0.5 text-xs font-medium text-orange-400">
+                    <AlertTriangle className="h-3 w-3" />
+                    Review Required
+                  </span>
+                )}
+              </div>
+              <p className="mt-1 text-lg text-gray-300">{technique.name}</p>
+            </div>
+          </div>
+
+          {canReview && technique.review_required && (
+            <button
+              onClick={() => reviewMutation.mutate()}
+              disabled={reviewMutation.isPending}
+              className="flex items-center gap-2 rounded-lg bg-cyan-600 px-4 py-2 text-sm font-medium text-white hover:bg-cyan-500 disabled:opacity-50 transition-colors"
+            >
+              {reviewMutation.isPending ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <CheckCircle className="h-4 w-4" />
+              )}
+              Mark as Reviewed
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Info Section */}
+      <div className="grid gap-6 lg:grid-cols-3">
+        {/* Description */}
+        <div className="lg:col-span-2 rounded-xl border border-gray-800 bg-gray-900 p-6">
+          <h2 className="mb-3 text-lg font-semibold text-white">Description</h2>
+          <p className="text-sm text-gray-400 leading-relaxed whitespace-pre-wrap">
+            {technique.description || "No description available."}
+          </p>
+        </div>
+
+        {/* Metadata */}
+        <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+          <h2 className="mb-4 text-lg font-semibold text-white">Details</h2>
+          <dl className="space-y-4">
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Tactic</dt>
+              <dd className="mt-1 text-sm text-gray-300 capitalize">
+                {technique.tactic?.replace(/-/g, " ") || "—"}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Platforms</dt>
+              <dd className="mt-1 flex flex-wrap gap-1">
+                {technique.platforms && technique.platforms.length > 0 ? (
+                  technique.platforms.map((p) => (
+                    <span
+                      key={p}
+                      className="rounded-full bg-gray-800 px-2 py-0.5 text-xs text-gray-300"
+                    >
+                      {p}
+                    </span>
+                  ))
+                ) : (
+                  <span className="text-sm text-gray-500">—</span>
+                )}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Subtechnique</dt>
+              <dd className="mt-1 text-sm text-gray-300">
+                {technique.is_subtechnique ? `Yes (${technique.parent_mitre_id})` : "No"}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Last Review</dt>
+              <dd className="mt-1 text-sm text-gray-300">
+                {formatDate(technique.last_review_date)}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">MITRE Version</dt>
+              <dd className="mt-1 text-sm text-gray-300">{technique.mitre_version || "—"}</dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+
+      {/* Tests Section */}
+      <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-white">Associated Tests</h2>
+          <button
+            onClick={() => navigate(`/tests/new?technique=${technique.id}`)}
+            className="flex items-center gap-1.5 rounded-lg border border-cyan-500/30 bg-cyan-500/10 px-3 py-1.5 text-sm font-medium text-cyan-400 hover:bg-cyan-500/20 transition-colors"
+          >
+            <Plus className="h-4 w-4" />
+            New Test
+          </button>
+        </div>
+
+        {technique.tests && technique.tests.length > 0 ? (
+          <div className="overflow-x-auto">
+            <table className="w-full text-left text-sm">
+              <thead>
+                <tr className="border-b border-gray-800">
+                  <th className="pb-3 pr-4 font-medium text-gray-400">Name</th>
+                  <th className="pb-3 px-4 font-medium text-gray-400">State</th>
+                  <th className="pb-3 px-4 font-medium text-gray-400">Result</th>
+                  <th className="pb-3 px-4 font-medium text-gray-400">Platform</th>
+                  <th className="pb-3 px-4 font-medium text-gray-400">Created</th>
+                  <th className="pb-3 pl-4 font-medium text-gray-400">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {technique.tests.map((test) => (
+                  <tr
+                    key={test.id}
+                    className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors"
+                  >
+                    <td className="py-3 pr-4">
+                      <span className="font-medium text-gray-200">{test.name}</span>
+                    </td>
+                    <td className="py-3 px-4">
+                      <span
+                        className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${
+                          testStateBadgeColors[test.state]
+                        }`}
+                      >
+                        {test.state.replace(/_/g, " ")}
+                      </span>
+                    </td>
+                    <td className="py-3 px-4">
+                      {test.result ? (
+                        <span
+                          className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${
+                            testResultBadgeColors[test.result]
+                          }`}
+                        >
+                          {test.result.replace(/_/g, " ")}
+                        </span>
+                      ) : (
+                        <span className="text-gray-600">—</span>
+                      )}
+                    </td>
+                    <td className="py-3 px-4">
+                      <span className="text-gray-400 capitalize">{test.platform || "—"}</span>
+                    </td>
+                    <td className="py-3 px-4">
+                      <span className="text-gray-400">{formatDate(test.created_at)}</span>
+                    </td>
+                    <td className="py-3 pl-4">
+                      <div className="flex items-center gap-2">
+                        <button
+                          onClick={() => navigate(`/tests/${test.id}`)}
+                          className="rounded p-1 text-gray-400 hover:bg-gray-800 hover:text-cyan-400"
+                          title="View Details"
+                        >
+                          <FileText className="h-4 w-4" />
+                        </button>
+                        {canReview && test.state === "draft" && (
+                          <>
+                            <button
+                              onClick={() => navigate(`/tests/${test.id}/validate`)}
+                              className="rounded p-1 text-gray-400 hover:bg-green-900/50 hover:text-green-400"
+                              title="Validate"
+                            >
+                              <Check className="h-4 w-4" />
+                            </button>
+                            <button
+                              onClick={() => navigate(`/tests/${test.id}/reject`)}
+                              className="rounded p-1 text-gray-400 hover:bg-red-900/50 hover:text-red-400"
+                              title="Reject"
+                            >
+                              <X className="h-4 w-4" />
+                            </button>
+                          </>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center justify-center py-8 text-gray-400">
+            <Clock className="mb-2 h-8 w-8" />
+            <p>No tests have been created for this technique yet.</p>
+            <button
+              onClick={() => navigate(`/tests/new?technique=${technique.id}`)}
+              className="mt-3 flex items-center gap-1 text-sm text-cyan-400 hover:underline"
+            >
+              <Plus className="h-4 w-4" />
+              Create the first test
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Intel Items Section */}
+      {technique.intel_items && technique.intel_items.length > 0 && (
+        <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+          <h2 className="mb-4 text-lg font-semibold text-white">Threat Intelligence</h2>
+          <div className="space-y-3">
+            {technique.intel_items.map((intel) => (
+              <div
+                key={intel.id}
+                className="flex items-center justify-between rounded-lg border border-gray-800 bg-gray-800/30 p-4"
+              >
+                <div>
+                  <p className="font-medium text-gray-200">{intel.title || intel.url}</p>
+                  <p className="mt-0.5 text-xs text-gray-500">
+                    {intel.source && <span>{intel.source} • </span>}
+                    Detected {formatDate(intel.detected_at)}
+                  </p>
+                </div>
+                <a
+                  href={intel.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-1 text-sm text-cyan-400 hover:underline"
+                >
+                  View
+                  <ExternalLink className="h-3.5 w-3.5" />
+                </a>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}