feat(phase-14): redesign Test Detail page with Red/Blue tabs and dual validation (T-115, T-116, T-117, T-118)
T-115: TestDetailHeader with progress bar, contextual action buttons, and dual validation indicators T-116: TeamTabs component with Red Team, Blue Team, Summary, and Timeline tabs T-117: Redesigned TestDetailPage integrating new components with react-query mutations, toast notifications, and role/state-based permissions T-118: ValidationModal for dual Red Lead / Blue Lead approval with required notes on rejection
This commit is contained in:
@@ -1,43 +1,29 @@
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { Loader2, AlertCircle, ArrowLeft } from "lucide-react";
|
||||
|
||||
import {
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
ArrowLeft,
|
||||
FlaskConical,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Clock,
|
||||
FileText,
|
||||
} from "lucide-react";
|
||||
import { getTestById, validateTest, rejectTest } from "../api/tests";
|
||||
getTestById,
|
||||
updateTestRed,
|
||||
updateTestBlue,
|
||||
startExecution,
|
||||
submitRedEvidence,
|
||||
submitBlueEvidence,
|
||||
validateAsRedLead,
|
||||
validateAsBlueLead,
|
||||
reopenTest,
|
||||
getTestTimeline,
|
||||
} from "../api/tests";
|
||||
import { uploadEvidence, getEvidence } from "../api/evidence";
|
||||
import EvidenceUpload from "../components/EvidenceUpload";
|
||||
import EvidenceList from "../components/EvidenceList";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import type { TestState, TestResult } from "../types/models";
|
||||
import { useState } from "react";
|
||||
import type { TestResult, TeamSide, TestTimelineEntry } from "../types/models";
|
||||
|
||||
const testStateBadgeColors: Record<TestState, string> = {
|
||||
draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
|
||||
red_executing: "bg-orange-900/50 text-orange-400 border-orange-500/30",
|
||||
blue_evaluating: "bg-indigo-900/50 text-indigo-400 border-indigo-500/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",
|
||||
};
|
||||
import TestDetailHeader from "../components/test-detail/TestDetailHeader";
|
||||
import TeamTabs from "../components/test-detail/TeamTabs";
|
||||
import ValidationModal from "../components/test-detail/ValidationModal";
|
||||
|
||||
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",
|
||||
};
|
||||
|
||||
const RESULTS: { value: TestResult; label: string }[] = [
|
||||
{ value: "detected", label: "Detected" },
|
||||
{ value: "not_detected", label: "Not Detected" },
|
||||
{ value: "partially_detected", label: "Partially Detected" },
|
||||
];
|
||||
// ── Page Component ─────────────────────────────────────────────────
|
||||
|
||||
export default function TestDetailPage() {
|
||||
const { testId } = useParams<{ testId: string }>();
|
||||
@@ -45,11 +31,31 @@ export default function TestDetailPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const { user } = useAuth();
|
||||
|
||||
const [showValidateModal, setShowValidateModal] = useState(false);
|
||||
const [selectedResult, setSelectedResult] = useState<TestResult>("detected");
|
||||
// ── State ──────────────────────────────────────────────────────
|
||||
|
||||
const canValidate =
|
||||
user?.role === "admin" || user?.role === "red_lead" || user?.role === "blue_lead";
|
||||
const [validationModal, setValidationModal] = useState<{
|
||||
open: boolean;
|
||||
side: "red" | "blue";
|
||||
}>({ open: false, side: "red" });
|
||||
|
||||
const [redDraft, setRedDraft] = useState({
|
||||
procedure_text: "",
|
||||
tool_used: "",
|
||||
attack_success: false,
|
||||
red_summary: "",
|
||||
});
|
||||
|
||||
const [blueDraft, setBlueDraft] = useState<{
|
||||
detection_result: TestResult | "";
|
||||
blue_summary: string;
|
||||
}>({
|
||||
detection_result: "",
|
||||
blue_summary: "",
|
||||
});
|
||||
|
||||
const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null);
|
||||
|
||||
// ── Queries ────────────────────────────────────────────────────
|
||||
|
||||
const {
|
||||
data: test,
|
||||
@@ -61,40 +67,196 @@ export default function TestDetailPage() {
|
||||
enabled: !!testId,
|
||||
});
|
||||
|
||||
const {
|
||||
data: timeline = [],
|
||||
isLoading: isTimelineLoading,
|
||||
} = useQuery({
|
||||
queryKey: ["test-timeline", testId],
|
||||
queryFn: () => getTestTimeline(testId!),
|
||||
enabled: !!testId,
|
||||
});
|
||||
|
||||
// Hydrate drafts from test data
|
||||
useEffect(() => {
|
||||
if (test) {
|
||||
setRedDraft({
|
||||
procedure_text: test.procedure_text || "",
|
||||
tool_used: test.tool_used || "",
|
||||
attack_success: test.attack_success ?? false,
|
||||
red_summary: test.red_summary || "",
|
||||
});
|
||||
setBlueDraft({
|
||||
detection_result: test.detection_result || "",
|
||||
blue_summary: test.blue_summary || "",
|
||||
});
|
||||
}
|
||||
}, [test]);
|
||||
|
||||
// ── Toast helper ───────────────────────────────────────────────
|
||||
|
||||
const showToast = useCallback((message: string, type: "success" | "error") => {
|
||||
setToast({ message, type });
|
||||
setTimeout(() => setToast(null), 3500);
|
||||
}, []);
|
||||
|
||||
const invalidateAll = useCallback(() => {
|
||||
queryClient.invalidateQueries({ queryKey: ["test", testId] });
|
||||
queryClient.invalidateQueries({ queryKey: ["test-timeline", testId] });
|
||||
queryClient.invalidateQueries({ queryKey: ["techniques"] });
|
||||
}, [queryClient, testId]);
|
||||
|
||||
// ── Mutations ──────────────────────────────────────────────────
|
||||
|
||||
// Red field save (auto-save on blur would come later; for now Save button or transitions)
|
||||
const saveRedMutation = useMutation({
|
||||
mutationFn: () =>
|
||||
updateTestRed(testId!, {
|
||||
procedure_text: redDraft.procedure_text || undefined,
|
||||
tool_used: redDraft.tool_used || undefined,
|
||||
attack_success: redDraft.attack_success,
|
||||
red_summary: redDraft.red_summary || undefined,
|
||||
}),
|
||||
onSuccess: () => {
|
||||
invalidateAll();
|
||||
showToast("Red Team fields saved", "success");
|
||||
},
|
||||
onError: (err: Error) => showToast(err.message, "error"),
|
||||
});
|
||||
|
||||
const saveBlueMutation = useMutation({
|
||||
mutationFn: () =>
|
||||
updateTestBlue(testId!, {
|
||||
detection_result: (blueDraft.detection_result as TestResult) || undefined,
|
||||
blue_summary: blueDraft.blue_summary || undefined,
|
||||
}),
|
||||
onSuccess: () => {
|
||||
invalidateAll();
|
||||
showToast("Blue Team fields saved", "success");
|
||||
},
|
||||
onError: (err: Error) => showToast(err.message, "error"),
|
||||
});
|
||||
|
||||
// State transitions
|
||||
const startExecMutation = useMutation({
|
||||
mutationFn: () => startExecution(testId!),
|
||||
onSuccess: () => {
|
||||
invalidateAll();
|
||||
showToast("Test execution started", "success");
|
||||
},
|
||||
onError: (err: Error) => showToast(err.message, "error"),
|
||||
});
|
||||
|
||||
const submitRedMutation = useMutation({
|
||||
mutationFn: () => submitRedEvidence(testId!),
|
||||
onSuccess: () => {
|
||||
invalidateAll();
|
||||
showToast("Submitted to Blue Team", "success");
|
||||
},
|
||||
onError: (err: Error) => showToast(err.message, "error"),
|
||||
});
|
||||
|
||||
const submitBlueMutation = useMutation({
|
||||
mutationFn: () => submitBlueEvidence(testId!),
|
||||
onSuccess: () => {
|
||||
invalidateAll();
|
||||
showToast("Submitted for review", "success");
|
||||
},
|
||||
onError: (err: Error) => showToast(err.message, "error"),
|
||||
});
|
||||
|
||||
const validateRedLeadMutation = useMutation({
|
||||
mutationFn: (payload: { red_validation_status: "approved" | "rejected"; red_validation_notes?: string }) =>
|
||||
validateAsRedLead(testId!, payload),
|
||||
onSuccess: () => {
|
||||
invalidateAll();
|
||||
setValidationModal({ open: false, side: "red" });
|
||||
showToast("Red Lead validation submitted", "success");
|
||||
},
|
||||
onError: (err: Error) => showToast(err.message, "error"),
|
||||
});
|
||||
|
||||
const validateBlueLeadMutation = useMutation({
|
||||
mutationFn: (payload: { blue_validation_status: "approved" | "rejected"; blue_validation_notes?: string }) =>
|
||||
validateAsBlueLead(testId!, payload),
|
||||
onSuccess: () => {
|
||||
invalidateAll();
|
||||
setValidationModal({ open: false, side: "blue" });
|
||||
showToast("Blue Lead validation submitted", "success");
|
||||
},
|
||||
onError: (err: Error) => showToast(err.message, "error"),
|
||||
});
|
||||
|
||||
const reopenMutation = useMutation({
|
||||
mutationFn: () => reopenTest(testId!),
|
||||
onSuccess: () => {
|
||||
invalidateAll();
|
||||
showToast("Test reopened", "success");
|
||||
},
|
||||
onError: (err: Error) => showToast(err.message, "error"),
|
||||
});
|
||||
|
||||
// Evidence upload
|
||||
const uploadMutation = useMutation({
|
||||
mutationFn: (file: File) => uploadEvidence(testId!, file, "red"),
|
||||
mutationFn: ({ file, team }: { file: File; team: TeamSide }) =>
|
||||
uploadEvidence(testId!, file, team),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["test", testId] });
|
||||
invalidateAll();
|
||||
showToast("Evidence uploaded", "success");
|
||||
},
|
||||
onError: (err: Error) => showToast(err.message, "error"),
|
||||
});
|
||||
|
||||
const validateMutation = useMutation({
|
||||
mutationFn: () => validateTest(testId!, { result: selectedResult }),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["test", testId] });
|
||||
queryClient.invalidateQueries({ queryKey: ["techniques"] });
|
||||
setShowValidateModal(false);
|
||||
},
|
||||
});
|
||||
|
||||
const rejectMutation = useMutation({
|
||||
mutationFn: () => rejectTest(testId!),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["test", testId] });
|
||||
},
|
||||
});
|
||||
// ── Handlers ───────────────────────────────────────────────────
|
||||
|
||||
const handleDownload = async (evidenceId: string) => {
|
||||
try {
|
||||
const evidence = await getEvidence(evidenceId);
|
||||
if (evidence.download_url) {
|
||||
window.open(evidence.download_url, "_blank");
|
||||
const ev = await getEvidence(evidenceId);
|
||||
if (ev.download_url) {
|
||||
window.open(ev.download_url, "_blank");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to get download URL:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRedFieldChange = (field: string, value: string | boolean) => {
|
||||
setRedDraft((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const handleBlueFieldChange = (field: string, value: string) => {
|
||||
setBlueDraft((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const handleUploadEvidence = async (file: File, team: TeamSide) => {
|
||||
await uploadMutation.mutateAsync({ file, team });
|
||||
};
|
||||
|
||||
const handleValidationSubmit = (
|
||||
side: "red" | "blue",
|
||||
status: "approved" | "rejected",
|
||||
notes: string,
|
||||
) => {
|
||||
if (side === "red") {
|
||||
validateRedLeadMutation.mutate({
|
||||
red_validation_status: status,
|
||||
red_validation_notes: notes || undefined,
|
||||
});
|
||||
} else {
|
||||
validateBlueLeadMutation.mutate({
|
||||
blue_validation_status: status,
|
||||
blue_validation_notes: notes || undefined,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const isTransitioning =
|
||||
startExecMutation.isPending ||
|
||||
submitRedMutation.isPending ||
|
||||
submitBlueMutation.isPending ||
|
||||
reopenMutation.isPending;
|
||||
|
||||
// ── Loading / Error states ─────────────────────────────────────
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
@@ -120,7 +282,7 @@ export default function TestDetailPage() {
|
||||
}
|
||||
|
||||
const formatDate = (dateStr: string | null) => {
|
||||
if (!dateStr) return "—";
|
||||
if (!dateStr) return "\u2014";
|
||||
return new Date(dateStr).toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
@@ -130,7 +292,15 @@ export default function TestDetailPage() {
|
||||
});
|
||||
};
|
||||
|
||||
const canEdit = test.state === "draft" || test.state === "rejected";
|
||||
const role = user?.role ?? "";
|
||||
const canSaveRed =
|
||||
(test.state === "draft" || test.state === "red_executing") &&
|
||||
(role === "red_tech" || role === "admin");
|
||||
const canSaveBlue =
|
||||
test.state === "blue_evaluating" &&
|
||||
(role === "blue_tech" || role === "admin");
|
||||
|
||||
// ── Render ─────────────────────────────────────────────────────
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
@@ -143,135 +313,91 @@ export default function TestDetailPage() {
|
||||
Back
|
||||
</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">
|
||||
<FlaskConical 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">{test.name}</h1>
|
||||
<span
|
||||
className={`inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium ${
|
||||
testStateBadgeColors[test.state]
|
||||
}`}
|
||||
>
|
||||
{test.state.replace(/_/g, " ")}
|
||||
</span>
|
||||
{test.result && (
|
||||
<span
|
||||
className={`inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium ${
|
||||
testResultBadgeColors[test.result]
|
||||
}`}
|
||||
>
|
||||
{test.result.replace(/_/g, " ")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-1 text-sm text-gray-400">
|
||||
Created {formatDate(test.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Header with progress bar and actions */}
|
||||
<TestDetailHeader
|
||||
test={test}
|
||||
user={user}
|
||||
isTransitioning={isTransitioning}
|
||||
onStartExecution={() => startExecMutation.mutate()}
|
||||
onSubmitRed={() => submitRedMutation.mutate()}
|
||||
onSubmitBlue={() => submitBlueMutation.mutate()}
|
||||
onOpenValidateModal={(side) => setValidationModal({ open: true, side })}
|
||||
onReopen={() => reopenMutation.mutate()}
|
||||
/>
|
||||
|
||||
{/* Actions */}
|
||||
{canValidate && canEdit && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setShowValidateModal(true)}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-500 transition-colors"
|
||||
>
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
Validate
|
||||
</button>
|
||||
<button
|
||||
onClick={() => rejectMutation.mutate()}
|
||||
disabled={rejectMutation.isPending}
|
||||
className="flex items-center gap-1.5 rounded-lg border border-red-500/30 bg-red-900/20 px-4 py-2 text-sm font-medium text-red-400 hover:bg-red-900/40 transition-colors"
|
||||
>
|
||||
{rejectMutation.isPending ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<XCircle className="h-4 w-4" />
|
||||
)}
|
||||
Reject
|
||||
</button>
|
||||
{/* Content: Tabs + Sidebar */}
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
{/* Main: Team Tabs */}
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
<TeamTabs
|
||||
test={test}
|
||||
user={user}
|
||||
timeline={timeline}
|
||||
isTimelineLoading={isTimelineLoading}
|
||||
onRedFieldChange={handleRedFieldChange}
|
||||
redDraft={redDraft}
|
||||
onBlueFieldChange={handleBlueFieldChange}
|
||||
blueDraft={blueDraft}
|
||||
onUploadEvidence={handleUploadEvidence}
|
||||
isUploading={uploadMutation.isPending}
|
||||
onDownloadEvidence={handleDownload}
|
||||
/>
|
||||
|
||||
{/* Save buttons */}
|
||||
{(canSaveRed || canSaveBlue) && (
|
||||
<div className="flex justify-end gap-3">
|
||||
{canSaveRed && (
|
||||
<button
|
||||
onClick={() => saveRedMutation.mutate()}
|
||||
disabled={saveRedMutation.isPending}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-orange-600 px-4 py-2 text-sm font-medium text-white hover:bg-orange-500 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{saveRedMutation.isPending && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||
Save Red Team Fields
|
||||
</button>
|
||||
)}
|
||||
{canSaveBlue && (
|
||||
<button
|
||||
onClick={() => saveBlueMutation.mutate()}
|
||||
disabled={saveBlueMutation.isPending}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{saveBlueMutation.isPending && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||
Save Blue Team Fields
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Grid */}
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
{/* Main Content */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Description */}
|
||||
<div className="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">
|
||||
{test.description || "No description provided."}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Procedure */}
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<h2 className="mb-3 text-lg font-semibold text-white">Procedure</h2>
|
||||
{test.procedure_text ? (
|
||||
<pre className="whitespace-pre-wrap rounded-lg bg-gray-800 p-4 font-mono text-sm text-gray-300">
|
||||
{test.procedure_text}
|
||||
</pre>
|
||||
) : (
|
||||
<p className="text-sm text-gray-500">No procedure documented.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Evidence Section */}
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<h2 className="mb-4 text-lg font-semibold text-white">Evidence</h2>
|
||||
|
||||
{/* Upload */}
|
||||
<EvidenceUpload
|
||||
onUpload={async (file) => {
|
||||
await uploadMutation.mutateAsync(file);
|
||||
}}
|
||||
isUploading={uploadMutation.isPending}
|
||||
/>
|
||||
|
||||
{uploadMutation.isError && (
|
||||
<div className="mt-3 rounded-lg border border-red-500/30 bg-red-900/20 p-3">
|
||||
<p className="text-sm text-red-400">
|
||||
Upload failed: {(uploadMutation.error as Error)?.message}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Evidence List */}
|
||||
<div className="mt-6">
|
||||
<EvidenceList
|
||||
evidences={[...(test.red_evidences || []), ...(test.blue_evidences || [])]}
|
||||
onDownload={handleDownload}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
{/* Sidebar: Metadata */}
|
||||
<div className="space-y-6">
|
||||
{/* 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">Platform</dt>
|
||||
<dd className="mt-1 text-sm text-gray-300 capitalize">
|
||||
{test.platform || "—"}
|
||||
<dt className="text-xs font-medium uppercase text-gray-500">Description</dt>
|
||||
<dd className="mt-1 text-sm text-gray-300">
|
||||
{test.description || "\u2014"}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium uppercase text-gray-500">Tool Used</dt>
|
||||
<dd className="mt-1 text-sm text-gray-300">{test.tool_used || "—"}</dd>
|
||||
<dt className="text-xs font-medium uppercase text-gray-500">Platform</dt>
|
||||
<dd className="mt-1 text-sm text-gray-300 capitalize">
|
||||
{test.platform || "\u2014"}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium uppercase text-gray-500">Creator</dt>
|
||||
<dd className="mt-1 text-sm text-gray-300">
|
||||
{test.created_by || "\u2014"}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium uppercase text-gray-500">Created</dt>
|
||||
<dd className="mt-1 text-sm text-gray-300">
|
||||
{formatDate(test.created_at)}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium uppercase text-gray-500">Execution Date</dt>
|
||||
@@ -300,64 +426,33 @@ export default function TestDetailPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Validate Modal */}
|
||||
{showValidateModal && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||
<div className="w-full max-w-md rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<h3 className="text-lg font-semibold text-white">Validate Test</h3>
|
||||
<p className="mt-1 text-sm text-gray-400">
|
||||
Select the detection result for this test.
|
||||
</p>
|
||||
{/* Validation Modal */}
|
||||
{validationModal.open && (
|
||||
<ValidationModal
|
||||
side={validationModal.side}
|
||||
test={test}
|
||||
isSubmitting={
|
||||
validationModal.side === "red"
|
||||
? validateRedLeadMutation.isPending
|
||||
: validateBlueLeadMutation.isPending
|
||||
}
|
||||
onSubmit={(status, notes) =>
|
||||
handleValidationSubmit(validationModal.side, status, notes)
|
||||
}
|
||||
onClose={() => setValidationModal({ open: false, side: "red" })}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="mt-4 space-y-2">
|
||||
{RESULTS.map((r) => (
|
||||
<label
|
||||
key={r.value}
|
||||
className={`flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors ${
|
||||
selectedResult === r.value
|
||||
? "border-cyan-500 bg-cyan-500/10"
|
||||
: "border-gray-700 bg-gray-800 hover:border-gray-600"
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="result"
|
||||
value={r.value}
|
||||
checked={selectedResult === r.value}
|
||||
onChange={(e) => setSelectedResult(e.target.value as TestResult)}
|
||||
className="sr-only"
|
||||
/>
|
||||
<div
|
||||
className={`h-4 w-4 rounded-full border-2 ${
|
||||
selectedResult === r.value
|
||||
? "border-cyan-500 bg-cyan-500"
|
||||
: "border-gray-600"
|
||||
}`}
|
||||
/>
|
||||
<span className="text-sm text-gray-200">{r.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex justify-end gap-3">
|
||||
<button
|
||||
onClick={() => setShowValidateModal(false)}
|
||||
className="rounded-lg border border-gray-700 px-4 py-2 text-sm text-gray-400 hover:bg-gray-800"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => validateMutation.mutate()}
|
||||
disabled={validateMutation.isPending}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-500 disabled:opacity-50"
|
||||
>
|
||||
{validateMutation.isPending && (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
)}
|
||||
Confirm Validation
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Toast notification */}
|
||||
{toast && (
|
||||
<div
|
||||
className={`fixed bottom-6 right-6 z-50 rounded-lg border px-4 py-3 text-sm shadow-lg backdrop-blur transition-all ${
|
||||
toast.type === "success"
|
||||
? "border-green-500/30 bg-green-900/90 text-green-300"
|
||||
: "border-red-500/30 bg-red-900/90 text-red-300"
|
||||
}`}
|
||||
>
|
||||
{toast.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user