feat(phase-20): navigation, error handling, integration tests, and V2 docs (T-132 to T-135)

frontend/src/components/ConfirmDialog.tsx

@@ -0,0 +1,78 @@
+import { AlertTriangle, Loader2 } from "lucide-react";
+
+interface ConfirmDialogProps {
+  open: boolean;
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  variant?: "danger" | "warning" | "default";
+  isLoading?: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+const variantStyles = {
+  danger: {
+    icon: "text-red-400 bg-red-500/10",
+    button: "bg-red-600 hover:bg-red-500",
+  },
+  warning: {
+    icon: "text-yellow-400 bg-yellow-500/10",
+    button: "bg-yellow-600 hover:bg-yellow-500",
+  },
+  default: {
+    icon: "text-cyan-400 bg-cyan-500/10",
+    button: "bg-cyan-600 hover:bg-cyan-500",
+  },
+};
+
+export default function ConfirmDialog({
+  open,
+  title,
+  message,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  variant = "default",
+  isLoading = false,
+  onConfirm,
+  onCancel,
+}: ConfirmDialogProps) {
+  if (!open) return null;
+
+  const styles = variantStyles[variant];
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+      <div className="w-full max-w-md rounded-xl border border-gray-800 bg-gray-900 p-6 shadow-2xl">
+        <div className="flex items-start gap-4">
+          <div className={`rounded-lg p-2 ${styles.icon}`}>
+            <AlertTriangle className="h-6 w-6" />
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold text-white">{title}</h3>
+            <p className="mt-1 text-sm text-gray-400">{message}</p>
+          </div>
+        </div>
+
+        <div className="mt-6 flex justify-end gap-3">
+          <button
+            onClick={onCancel}
+            disabled={isLoading}
+            className="rounded-lg border border-gray-700 px-4 py-2 text-sm font-medium text-gray-300 transition-colors hover:bg-gray-800 disabled:opacity-50"
+          >
+            {cancelLabel}
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={isLoading}
+            className={`flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors disabled:opacity-50 ${styles.button}`}
+          >
+            {isLoading && <Loader2 className="h-4 w-4 animate-spin" />}
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/Sidebar.tsx

@@ -1,34 +1,110 @@
 import { NavLink } from "react-router-dom";
+import { useState } from "react";
 import {
   LayoutDashboard,
   Shield,
   FlaskConical,
   BookOpen,
+  BarChart3,
   Settings,
   Users,
   FileText,
+  ChevronDown,
+  ListChecks,
+  ClipboardList,
 } from "lucide-react";
 import { useAuth } from "../context/AuthContext";
 
-const baseLinks = [
+interface NavItem {
+  to: string;
+  label: string;
+  icon: React.FC<{ className?: string }>;
+  children?: NavItem[];
+}
+
+const mainLinks: NavItem[] = [
   { to: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
-  { to: "/techniques", label: "Techniques", icon: Shield },
-  { to: "/tests", label: "Tests", icon: FlaskConical },
-  { to: "/test-catalog", label: "Test Catalog", icon: BookOpen },
+  { to: "/techniques", label: "ATT&CK Matrix", icon: Shield },
+  {
+    to: "/tests",
+    label: "Tests",
+    icon: FlaskConical,
+    children: [
+      { to: "/tests", label: "All Tests", icon: ListChecks },
+      { to: "/tests?view=pending", label: "My Pending Tasks", icon: ClipboardList },
+      { to: "/test-catalog", label: "Test Catalog", icon: BookOpen },
+    ],
+  },
+  { to: "/reports", label: "Reports", icon: BarChart3 },
 ];
 
-const adminLinks = [
+const adminLinks: NavItem[] = [
   { to: "/users", label: "Users", icon: Users },
   { to: "/audit", label: "Audit Log", icon: FileText },
   { to: "/system", label: "System", icon: Settings },
 ];
 
+function SidebarLink({ item }: { item: NavItem }) {
+  const [expanded, setExpanded] = useState(false);
+
+  if (item.children) {
+    return (
+      <div>
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-sm font-medium text-gray-400 transition-colors hover:bg-gray-800 hover:text-gray-200"
+        >
+          <span className="flex items-center gap-3">
+            <item.icon className="h-5 w-5" />
+            {item.label}
+          </span>
+          <ChevronDown className={`h-4 w-4 transition-transform ${expanded ? "rotate-180" : ""}`} />
+        </button>
+        {expanded && (
+          <div className="ml-4 mt-1 space-y-0.5 border-l border-gray-800 pl-3">
+            {item.children.map((child) => (
+              <NavLink
+                key={child.to + child.label}
+                to={child.to}
+                className={({ isActive }) =>
+                  `flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors ${
+                    isActive
+                      ? "bg-cyan-500/10 text-cyan-400"
+                      : "text-gray-500 hover:bg-gray-800 hover:text-gray-200"
+                  }`
+                }
+              >
+                <child.icon className="h-4 w-4" />
+                {child.label}
+              </NavLink>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <NavLink
+      to={item.to}
+      className={({ isActive }) =>
+        `flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
+          isActive
+            ? "bg-cyan-500/10 text-cyan-400"
+            : "text-gray-400 hover:bg-gray-800 hover:text-gray-200"
+        }`
+      }
+    >
+      <item.icon className="h-5 w-5" />
+      {item.label}
+    </NavLink>
+  );
+}
+
 export default function Sidebar() {
   const { user } = useAuth();
   const isAdmin = user?.role === "admin";
 
-  const links = isAdmin ? [...baseLinks, ...adminLinks] : baseLinks;
-
   return (
     <aside className="flex h-screen w-60 flex-col border-r border-gray-800 bg-gray-900">
       {/* Logo */}
@@ -39,24 +115,24 @@ export default function Sidebar() {
         </span>
       </div>
 
-      {/* Nav links */}
+      {/* Main nav */}
       <nav className="flex-1 space-y-1 px-3 py-4">
-        {links.map(({ to, label, icon: Icon }) => (
-          <NavLink
-            key={to}
-            to={to}
-            className={({ isActive }) =>
-              `flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
-                isActive
-                  ? "bg-cyan-500/10 text-cyan-400"
-                  : "text-gray-400 hover:bg-gray-800 hover:text-gray-200"
-              }`
-            }
-          >
-            <Icon className="h-5 w-5" />
-            {label}
-          </NavLink>
+        {mainLinks.map((item) => (
+          <SidebarLink key={item.to + item.label} item={item} />
         ))}
+
+        {/* Admin section */}
+        {isAdmin && (
+          <>
+            <div className="my-3 border-t border-gray-800" />
+            <p className="mb-2 px-3 text-[10px] font-semibold uppercase tracking-widest text-gray-600">
+              Administration
+            </p>
+            {adminLinks.map((item) => (
+              <SidebarLink key={item.to} item={item} />
+            ))}
+          </>
+        )}
       </nav>
 
       {/* Footer */}