From b3ccb584314d28829b69213a55de4d6e01437550 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 17:48:39 +0100
Subject: [PATCH] feat(settings): add session review to unified bot & spam tab

---
 .../settings/unified/tabs/SiteBotSpamTab.tsx  | 150 ++++++++++++++++--
 1 file changed, 141 insertions(+), 9 deletions(-)

diff --git a/components/settings/unified/tabs/SiteBotSpamTab.tsx b/components/settings/unified/tabs/SiteBotSpamTab.tsx
index 98a452d..7055e73 100644
--- a/components/settings/unified/tabs/SiteBotSpamTab.tsx
+++ b/components/settings/unified/tabs/SiteBotSpamTab.tsx
@@ -1,17 +1,26 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { Button, Toggle, toast, Spinner } from '@ciphera-net/ui'
+import { Button, Toggle, toast, Spinner, getDateRange } from '@ciphera-net/ui'
 import { ShieldCheck } from '@phosphor-icons/react'
-import { useSite, useBotFilterStats } from '@/lib/swr/dashboard'
+import { useSite, useBotFilterStats, useSessions } from '@/lib/swr/dashboard'
 import { updateSite } from '@/lib/api/sites'
+import { botFilterSessions, botUnfilterSessions } from '@/lib/api/bot-filter'
 
 export default function SiteBotSpamTab({ siteId }: { siteId: string }) {
   const { data: site, mutate } = useSite(siteId)
-  const { data: botStats } = useBotFilterStats(siteId)
+  const { data: botStats, mutate: mutateBotStats } = useBotFilterStats(siteId)
   const [filterBots, setFilterBots] = useState(false)
   const [saving, setSaving] = useState(false)
 
+  const [botView, setBotView] = useState<'review' | 'blocked'>('review')
+  const [suspiciousOnly, setSuspiciousOnly] = useState(true)
+  const [selectedSessions, setSelectedSessions] = useState<Set<string>>(new Set())
+  const [botDateRange] = useState(() => getDateRange(7))
+
+  const { data: sessionsData, mutate: mutateSessions } = useSessions(siteId, botDateRange.start, botDateRange.end, botView === 'review' ? suspiciousOnly : false)
+  const sessions = sessionsData?.sessions
+
   useEffect(() => {
     if (site) setFilterBots(site.filter_bots ?? false)
   }, [site])
@@ -29,6 +38,30 @@ export default function SiteBotSpamTab({ siteId }: { siteId: string }) {
     }
   }
 
+  const handleBotFilter = async (sessionIds: string[]) => {
+    try {
+      await botFilterSessions(siteId, sessionIds)
+      toast.success(`${sessionIds.length} session(s) flagged as bot`)
+      setSelectedSessions(new Set())
+      mutateSessions()
+      mutateBotStats()
+    } catch {
+      toast.error('Failed to flag sessions')
+    }
+  }
+
+  const handleBotUnfilter = async (sessionIds: string[]) => {
+    try {
+      await botUnfilterSessions(siteId, sessionIds)
+      toast.success(`${sessionIds.length} session(s) unblocked`)
+      setSelectedSessions(new Set())
+      mutateSessions()
+      mutateBotStats()
+    } catch {
+      toast.error('Failed to unblock sessions')
+    }
+  }
+
   if (!site) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
 
   return (
@@ -68,12 +101,111 @@ export default function SiteBotSpamTab({ siteId }: { siteId: string }) {
         </div>
       )}
 
-      <p className="text-sm text-neutral-400">
-        For detailed session review and manual blocking, use the full{' '}
-        <a href={`/sites/${siteId}/settings?tab=bot-spam`} className="text-brand-orange hover:underline">
-          site settings page
-        </a>.
-      </p>
+      {/* Session Review */}
+      <div className="space-y-3 pt-6 border-t border-neutral-800">
+        <div className="flex items-center justify-between">
+          <h4 className="text-sm font-medium text-neutral-300">Session Review</h4>
+          {/* Review/Blocked toggle */}
+          <div className="flex items-center rounded-lg border border-neutral-700 overflow-hidden text-sm">
+            <button
+              onClick={() => { setBotView('review'); setSelectedSessions(new Set()) }}
+              className={`px-3 py-1.5 text-xs font-medium transition-colors ${botView === 'review' ? 'bg-neutral-700 text-white' : 'text-neutral-400 hover:text-white'}`}
+            >
+              Review
+            </button>
+            <button
+              onClick={() => { setBotView('blocked'); setSelectedSessions(new Set()) }}
+              className={`px-3 py-1.5 text-xs font-medium transition-colors ${botView === 'blocked' ? 'bg-neutral-700 text-white' : 'text-neutral-400 hover:text-white'}`}
+            >
+              Blocked
+            </button>
+          </div>
+        </div>
+
+        {/* Suspicious only filter (review mode only) */}
+        {botView === 'review' && (
+          <label className="flex items-center gap-2 text-sm text-neutral-400">
+            <input
+              type="checkbox"
+              checked={suspiciousOnly}
+              onChange={e => setSuspiciousOnly(e.target.checked)}
+              className="w-4 h-4 rounded"
+              style={{ accentColor: '#FD5E0F' }}
+            />
+            Suspicious only
+          </label>
+        )}
+
+        {/* Bulk actions bar */}
+        {selectedSessions.size > 0 && (
+          <div className="flex items-center gap-3 p-2 bg-brand-orange/10 border border-brand-orange/20 rounded-lg text-sm">
+            <span className="text-neutral-300">{selectedSessions.size} selected</span>
+            {botView === 'review' ? (
+              <button onClick={() => handleBotFilter(Array.from(selectedSessions))} className="text-red-400 hover:text-red-300 font-medium">Flag as bot</button>
+            ) : (
+              <button onClick={() => handleBotUnfilter(Array.from(selectedSessions))} className="text-green-400 hover:text-green-300 font-medium">Unblock</button>
+            )}
+            <button onClick={() => setSelectedSessions(new Set())} className="text-neutral-500 hover:text-neutral-300 ml-auto">Clear</button>
+          </div>
+        )}
+
+        {/* Session cards */}
+        <div className="space-y-2 max-h-96 overflow-y-auto">
+          {(sessions || [])
+            .filter(s => botView === 'blocked' ? s.bot_filtered : !s.bot_filtered)
+            .map(session => (
+              <div key={session.session_id} className="flex items-center gap-3 p-3 rounded-xl border border-neutral-800 hover:border-neutral-700 transition-colors">
+                <input
+                  type="checkbox"
+                  checked={selectedSessions.has(session.session_id)}
+                  onChange={e => {
+                    const next = new Set(selectedSessions)
+                    e.target.checked ? next.add(session.session_id) : next.delete(session.session_id)
+                    setSelectedSessions(next)
+                  }}
+                  className="w-4 h-4 shrink-0 cursor-pointer"
+                  style={{ accentColor: '#FD5E0F' }}
+                />
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium text-white truncate">{session.first_page || '/'}</span>
+                    {session.suspicion_score != null && (
+                      <span className={`px-1.5 py-0.5 rounded text-[10px] font-medium ${
+                        session.suspicion_score >= 5 ? 'bg-red-900/30 text-red-400' :
+                        session.suspicion_score >= 3 ? 'bg-yellow-900/30 text-yellow-400' :
+                        'bg-neutral-800 text-neutral-400'
+                      }`}>
+                        {session.suspicion_score >= 5 ? 'High risk' : session.suspicion_score >= 3 ? 'Suspicious' : 'Low risk'}
+                      </span>
+                    )}
+                  </div>
+                  <div className="flex flex-wrap gap-x-3 gap-y-0.5 text-xs text-neutral-500 mt-0.5">
+                    <span>{session.pageviews} page(s)</span>
+                    <span>{session.duration ? `${Math.round(session.duration)}s` : 'No duration'}</span>
+                    <span>{[session.city, session.country].filter(Boolean).join(', ') || 'Unknown location'}</span>
+                    <span>{session.browser || 'Unknown browser'}</span>
+                    <span>{session.referrer || 'Direct'}</span>
+                  </div>
+                </div>
+                <button
+                  onClick={() => botView === 'review' ? handleBotFilter([session.session_id]) : handleBotUnfilter([session.session_id])}
+                  className={`shrink-0 px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${
+                    botView === 'review'
+                      ? 'text-red-400 border-red-500/20 hover:bg-red-900/20'
+                      : 'text-green-400 border-green-500/20 hover:bg-green-900/20'
+                  }`}
+                >
+                  {botView === 'review' ? 'Flag as bot' : 'Unblock'}
+                </button>
+              </div>
+            ))}
+          {(!sessions || sessions.filter(s => botView === 'blocked' ? s.bot_filtered : !s.bot_filtered).length === 0) && (
+            <p className="text-sm text-neutral-500 text-center py-4">
+              {botView === 'blocked' ? 'No blocked sessions' : 'No suspicious sessions found'}
+            </p>
+          )}
+        </div>
+      </div>
 
       <div className="flex justify-end pt-2">
         <Button onClick={handleSave} variant="primary" disabled={saving}>