Added job review toggle

frontend/src/components/JobsPanel.jsx

@@ -50,6 +50,7 @@ function JobDetail({ jobId, onClose, onReviewed, onDeleted, suggestions = {} })
   const [saveResult, setSaveResult] = useState(null)
   const [confirmDelete, setConfirmDelete] = useState(false)
   const [deleting, setDeleting] = useState(false)
+  const [togglingStatus, setTogglingStatus] = useState(false)
 
   useEffect(() => {
     let cancelled = false
@@ -112,6 +113,29 @@ function JobDetail({ jobId, onClose, onReviewed, onDeleted, suggestions = {} })
     }
   }
 
+  const handleToggleStatus = async () => {
+    const next = isReviewed ? 'unreviewed' : 'reviewed'
+    if (next === 'reviewed' && !reviewerName.trim()) {
+      setSaveResult({ success: false, error: 'Reviewer name is required to mark reviewed.' })
+      return
+    }
+    setTogglingStatus(true)
+    setSaveResult(null)
+    try {
+      const res = await axios.put(`${API_BASE}/jobs/${jobId}/status`, {
+        status: next,
+        reviewer_name: reviewerName.trim() || null,
+      })
+      setJob(res.data)
+      setReviewerName(res.data.reviewer_name || '')
+      onReviewed(res.data)
+    } catch (err) {
+      setSaveResult({ success: false, error: err.response?.data?.detail || err.message })
+    } finally {
+      setTogglingStatus(false)
+    }
+  }
+
   const handleDelete = async () => {
     setDeleting(true)
     try {
@@ -148,6 +172,27 @@ function JobDetail({ jobId, onClose, onReviewed, onDeleted, suggestions = {} })
         {job && (
           <>
             <StatusBadge status={job.status} />
+            <motion.button
+              onClick={handleToggleStatus}
+              disabled={togglingStatus}
+              title={isReviewed ? 'Revert to unreviewed' : 'Mark as reviewed'}
+              className={`flex items-center gap-1 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors disabled:opacity-50 ${
+                isReviewed
+                  ? 'glass glass-hover text-amber-400 hover:bg-amber-500/10'
+                  : 'glass glass-hover text-green-400 hover:bg-green-500/10'
+              }`}
+              whileHover={!togglingStatus ? { scale: 1.02 } : {}}
+              whileTap={!togglingStatus ? { scale: 0.98 } : {}}
+            >
+              {togglingStatus ? (
+                <Loader2 className="w-3.5 h-3.5 animate-spin" />
+              ) : isReviewed ? (
+                <Clock className="w-3.5 h-3.5" />
+              ) : (
+                <CheckCircle2 className="w-3.5 h-3.5" />
+              )}
+              {isReviewed ? 'Mark Unreviewed' : 'Mark Reviewed'}
+            </motion.button>
             <span className="text-xs text-gray-500 font-mono hidden sm:block">{job.id}</span>
           </>
         )}