feat(campaigns): modification request UI on campaign detail page

frontend/src/components/RequestCampaignModificationModal.tsx

@@ -0,0 +1,136 @@
+import { useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { X, Loader2 } from "lucide-react";
+import { createModificationRequest, type CampaignTest } from "../api/campaigns";
+
+interface Props {
+  campaignId: string;
+  tests: CampaignTest[];
+  open: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+export default function RequestCampaignModificationModal({
+  campaignId,
+  tests,
+  open,
+  onClose,
+  onSuccess,
+}: Props) {
+  const queryClient = useQueryClient();
+  const [action, setAction] = useState<"add_test" | "remove_test">("remove_test");
+  const [testId, setTestId] = useState("");
+  const [justification, setJustification] = useState("");
+
+  const mutation = useMutation({
+    mutationFn: () =>
+      createModificationRequest(campaignId, {
+        action,
+        test_id: testId,
+        justification: justification.trim(),
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["campaign-modification-requests", campaignId] });
+      setTestId("");
+      setJustification("");
+      onSuccess();
+      onClose();
+    },
+  });
+
+  if (!open) return null;
+
+  const canSubmit = testId && justification.trim().length > 0 && !mutation.isPending;
+
+  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-lg 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">Request Campaign Modification</h2>
+          <button onClick={onClose} className="rounded-lg p-1.5 text-gray-400 hover:bg-gray-800 hover:text-white">
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-gray-300">Action</label>
+            <select
+              value={action}
+              onChange={(e) => setAction(e.target.value as "add_test" | "remove_test")}
+              className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 focus:border-cyan-500 focus:outline-none"
+            >
+              <option value="remove_test">Remove a test from this campaign</option>
+              <option value="add_test">Add an existing test to this campaign</option>
+            </select>
+          </div>
+
+          {action === "remove_test" ? (
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-gray-300">Test to remove</label>
+              <select
+                value={testId}
+                onChange={(e) => setTestId(e.target.value)}
+                className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 focus:border-cyan-500 focus:outline-none"
+              >
+                <option value="">Select a test…</option>
+                {tests.map((t) => (
+                  <option key={t.test_id} value={t.test_id}>
+                    {t.test_name || t.test_id}
+                  </option>
+                ))}
+              </select>
+            </div>
+          ) : (
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-gray-300">Test ID to add</label>
+              <input
+                value={testId}
+                onChange={(e) => setTestId(e.target.value)}
+                placeholder="Paste the existing test's ID"
+                className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-cyan-500 focus:outline-none"
+              />
+            </div>
+          )}
+
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-gray-300">
+              Justification <span className="text-red-400">*</span>
+            </label>
+            <textarea
+              value={justification}
+              onChange={(e) => setJustification(e.target.value)}
+              rows={3}
+              placeholder="Why does this campaign need to change?"
+              className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-cyan-500 focus:outline-none"
+            />
+          </div>
+
+          {mutation.isError && (
+            <div className="rounded-lg border border-red-500/30 bg-red-900/20 p-3 text-sm text-red-400">
+              {(mutation.error as Error)?.message || "Failed to submit request"}
+            </div>
+          )}
+        </div>
+
+        <div className="mt-6 flex justify-end gap-3">
+          <button
+            onClick={onClose}
+            className="rounded-lg border border-gray-700 px-4 py-2 text-sm text-gray-400 hover:bg-gray-800 transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={() => mutation.mutate()}
+            disabled={!canSubmit}
+            className="flex items-center gap-1.5 rounded-lg bg-cyan-600 px-4 py-2 text-sm font-medium text-white hover:bg-cyan-500 disabled:opacity-50 transition-colors"
+          >
+            {mutation.isPending && <Loader2 className="h-4 w-4 animate-spin" />}
+            Submit Request
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/CampaignDetailPage.tsx

@@ -27,6 +27,9 @@ import {
   submitCampaignForApproval,
   approveCampaign,
   rejectCampaign,
+  listCampaignModificationRequests,
+  approveModificationRequest,
+  rejectModificationRequest,
   type Campaign,
   type CampaignHistoryEntry,
 } from "../api/campaigns";
@@ -35,6 +38,7 @@ import CampaignTimeline from "../components/CampaignTimeline";
 import JiraLinkPanel from "../components/JiraLinkPanel";
 import CampaignTimingPanel from "../components/CampaignTimingPanel";
 import AddTestToCampaignModal from "../components/AddTestToCampaignModal";
+import RequestCampaignModificationModal from "../components/RequestCampaignModificationModal";
 
 const statusColors: Record<string, string> = {
   draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
@@ -68,6 +72,7 @@ export default function CampaignDetailPage() {
 
   const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null);
   const [showAddTestModal, setShowAddTestModal] = useState(false);
+  const [showModRequestModal, setShowModRequestModal] = useState(false);
   // 0 = hidden, 1 = first confirmation, 2 = ask about tests
   const [deleteStep, setDeleteStep] = useState<0 | 1 | 2>(0);
   const [approveModalOpen, setApproveModalOpen] = useState(false);
@@ -172,6 +177,32 @@ export default function CampaignDetailPage() {
     enabled: !!campaignId && !!campaign?.is_recurring,
   });
 
+  const { data: modRequests = [] } = useQuery({
+    queryKey: ["campaign-modification-requests", campaignId],
+    queryFn: () => listCampaignModificationRequests(campaignId!),
+    enabled: !!campaignId,
+  });
+
+  const approveModRequestMutation = useMutation({
+    mutationFn: (requestId: string) => approveModificationRequest(requestId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["campaign", campaignId] });
+      queryClient.invalidateQueries({ queryKey: ["campaign-modification-requests", campaignId] });
+      showToast("Modification approved and applied", "success");
+    },
+    onError: (err: Error) => showToast(err.message, "error"),
+  });
+
+  const rejectModRequestMutation = useMutation({
+    mutationFn: ({ requestId, notes }: { requestId: string; notes: string }) =>
+      rejectModificationRequest(requestId, notes),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["campaign-modification-requests", campaignId] });
+      showToast("Modification rejected", "success");
+    },
+    onError: (err: Error) => showToast(err.message, "error"),
+  });
+
   const [schedRecurring, setSchedRecurring] = useState(false);
   const [schedPattern, setSchedPattern] = useState("monthly");
   const [schedNextRun, setSchedNextRun] = useState("");
@@ -612,6 +643,14 @@ export default function CampaignDetailPage() {
               Add Test
             </button>
           )}
+          {canManage && campaign.status === "active" && (
+            <button
+              onClick={() => setShowModRequestModal(true)}
+              className="flex items-center gap-1.5 rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-1.5 text-sm font-medium text-amber-400 hover:bg-amber-500/20 transition-colors"
+            >
+              Request Modification
+            </button>
+          )}
         </div>
 
         {campaign.tests.length > 0 ? (
@@ -705,6 +744,64 @@ export default function CampaignDetailPage() {
         )}
       </div>
 
+      {/* Modification Requests */}
+      {modRequests.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">Modification Requests</h2>
+          <div className="space-y-3">
+            {modRequests.map((r) => (
+              <div key={r.id} className="rounded-lg border border-gray-800 p-4">
+                <div className="flex items-start justify-between gap-4">
+                  <div>
+                    <p className="text-sm text-gray-200">
+                      <span className="font-medium capitalize">{r.action.replace("_", " ")}</span>
+                      {" — "}
+                      {r.test_name || r.test_id || "deleted test"}
+                    </p>
+                    <p className="mt-1 text-xs text-gray-400">{r.justification}</p>
+                    {r.review_notes && (
+                      <p className="mt-1 text-xs text-amber-400">Manager notes: {r.review_notes}</p>
+                    )}
+                  </div>
+                  <span
+                    className={`shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-medium ${
+                      r.status === "pending"
+                        ? "border-amber-500/30 bg-amber-900/30 text-amber-400"
+                        : r.status === "approved"
+                          ? "border-green-500/30 bg-green-900/30 text-green-400"
+                          : "border-red-500/30 bg-red-900/30 text-red-400"
+                    }`}
+                  >
+                    {r.status}
+                  </span>
+                </div>
+                {isManager && r.status === "pending" && (
+                  <div className="mt-3 flex gap-2">
+                    <button
+                      onClick={() => approveModRequestMutation.mutate(r.id)}
+                      className="rounded-lg bg-green-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-green-500 transition-colors"
+                    >
+                      Approve
+                    </button>
+                    <button
+                      onClick={() => {
+                        const notes = window.prompt("Reason for rejecting this request:");
+                        if (notes && notes.trim()) {
+                          rejectModRequestMutation.mutate({ requestId: r.id, notes: notes.trim() });
+                        }
+                      }}
+                      className="rounded-lg border border-red-500/30 bg-red-900/20 px-3 py-1.5 text-xs font-medium text-red-400 hover:bg-red-900/40 transition-colors"
+                    >
+                      Reject
+                    </button>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
       {/* Jira */}
       <JiraLinkPanel entityType="campaign" entityId={campaignId!} readOnly label={campaign.name} />
 
@@ -717,6 +814,15 @@ export default function CampaignDetailPage() {
         onSuccess={() => showToast("Test added to campaign", "success")}
       />
 
+      {/* Request Modification Modal */}
+      <RequestCampaignModificationModal
+        campaignId={campaignId!}
+        tests={campaign.tests}
+        open={showModRequestModal}
+        onClose={() => setShowModRequestModal(false)}
+        onSuccess={() => showToast("Modification request submitted", "success")}
+      />
+
       {/* Approve modal */}
       {approveModalOpen && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">