From 5dabaad722f50bbfb04ea2bcf808c957d89959fb Mon Sep 17 00:00:00 2001 From: lorentz Date: Thu, 16 Jul 2026 19:46:16 -0400 Subject: [PATCH] feat(23-04): build /admin/phishing-automation page with per-stage toggles - Company table with search + type filter (cloned from client-scope pattern) - Three independent Switch toggles per row: auto-parse, auto-classify, auto-report - toggle() PATCHes /api/admin/phishing-automation/{companyId} with all three current flags - Helper caption clarifies stage dependency (informational, not enforced) --- app/admin/phishing-automation/page.tsx | 266 +++++++++++++++++++++++++ 1 file changed, 266 insertions(+) create mode 100644 app/admin/phishing-automation/page.tsx diff --git a/app/admin/phishing-automation/page.tsx b/app/admin/phishing-automation/page.tsx new file mode 100644 index 0000000..3ac3792 --- /dev/null +++ b/app/admin/phishing-automation/page.tsx @@ -0,0 +1,266 @@ +'use client'; + +import { useEffect, useState, useCallback } from 'react'; +import { toast } from 'sonner'; +import { PageHeader } from '@/components/navigation/page-header'; +import { Card, CardContent } from '@/components/ui/card'; +import { Badge } from '@/components/ui/badge'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Switch } from '@/components/ui/switch'; +import { Skeleton } from '@/components/ui/skeleton'; +import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from '@/components/ui/table'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; +import { Search, RefreshCw, ShieldCheck, Zap } from 'lucide-react'; + +interface Company { + id: string; + companyName: string; + companyType: number | null; + companyTypeLabel: string | null; + autoParse: boolean; + autoClassify: boolean; + autoReport: boolean; +} + +type Stage = 'autoParse' | 'autoClassify' | 'autoReport'; + +const STAGE_LABEL: Record = { + autoParse: 'Auto-parse', + autoClassify: 'Auto-classify', + autoReport: 'Auto-report', +}; + +export default function PhishingAutomationPage() { + const [companies, setCompanies] = useState([]); + const [total, setTotal] = useState(0); + const [enabled, setEnabled] = useState(0); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const [search, setSearch] = useState(''); + const [typeFilter, setTypeFilter] = useState('all'); + const [toggling, setToggling] = useState(null); + + const load = useCallback(async () => { + setLoading(true); + setError(null); + try { + const params = new URLSearchParams(); + if (search) params.set('search', search); + if (typeFilter !== 'all') params.set('type', typeFilter); + const qs = params.toString(); + const res = await fetch('/api/admin/phishing-automation' + (qs ? `?${qs}` : '')); + if (!res.ok) { + const d = await res.json().catch(() => ({})) as { error?: string }; + throw new Error(d.error ?? `Request failed: ${res.status}`); + } + const data = await res.json() as { companies: Company[]; total: number; enabled: number }; + setCompanies(data.companies); + setTotal(data.total); + setEnabled(data.enabled); + } catch (err) { + setError(err instanceof Error ? err.message : 'Failed to load'); + } finally { + setLoading(false); + } + }, [search, typeFilter]); + + useEffect(() => { + void load(); + }, [load]); + + async function toggle(company: Company, stage: Stage, next: boolean) { + setToggling(`${company.id}:${stage}`); + const nextFlags = { + autoParse: stage === 'autoParse' ? next : company.autoParse, + autoClassify: stage === 'autoClassify' ? next : company.autoClassify, + autoReport: stage === 'autoReport' ? next : company.autoReport, + }; + try { + const res = await fetch(`/api/admin/phishing-automation/${company.id}`, { + method: 'PATCH', + headers: { 'content-type': 'application/json' }, + body: JSON.stringify(nextFlags), + }); + if (!res.ok) { + const d = await res.json().catch(() => ({})) as { error?: string }; + throw new Error(d.error ?? `Failed: ${res.status}`); + } + setCompanies((prev) => + prev.map((c) => (c.id === company.id ? { ...c, ...nextFlags } : c)) + ); + setEnabled((n) => { + const wasEnabled = company.autoParse || company.autoClassify || company.autoReport; + const isEnabled = nextFlags.autoParse || nextFlags.autoClassify || nextFlags.autoReport; + if (wasEnabled === isEnabled) return n; + return isEnabled ? n + 1 : Math.max(0, n - 1); + }); + toast.success(`${STAGE_LABEL[stage]} ${next ? 'enabled' : 'disabled'} for ${company.companyName}`); + } catch (err) { + toast.error(err instanceof Error ? err.message : 'Toggle failed'); + } finally { + setToggling(null); + } + } + + const uniqueTypes = Array.from(new Set(companies.map((c) => c.companyType).filter(Boolean))).sort() as number[]; + + return ( + <> + void load()} disabled={loading}> + + Refresh + + } + /> + +
+ {/* Summary */} +
+
+ + Total companies: + {total} +
+
+ + With any stage enabled: + {enabled} +
+
+ +

+ Stages are independent toggles, but they build on each other in practice: auto-report is only + meaningful when auto-classify is also on, and auto-classify is only meaningful when auto-parse + is also on. This is informational — the UI does not enforce or auto-cascade these dependencies. +

+ + + {/* Filters */} +
+
+ + setSearch(e.target.value)} + className="pl-8" + /> +
+ + + {companies.length} shown + +
+ + {error && ( +
+ + Failed to load + {error} + +
+ )} + + + {loading ? ( +
+ {[1, 2, 3, 4, 5].map((i) => ( + + ))} +
+ ) : companies.length === 0 ? ( +
+ No companies match the current filters. +
+ ) : ( + + + + Company + Type + Auto-parse + Auto-classify + Auto-report + + + + {companies.map((company) => ( + + {company.companyName} + + {company.companyTypeLabel ? ( + + {company.companyTypeLabel} + + ) : ( + — + )} + + + void toggle(company, 'autoParse', next)} + aria-label={`Auto-parse for ${company.companyName}`} + /> + + + void toggle(company, 'autoClassify', next)} + aria-label={`Auto-classify for ${company.companyName}`} + /> + + + void toggle(company, 'autoReport', next)} + aria-label={`Auto-report for ${company.companyName}`} + /> + + + ))} + +
+ )} + + +
+ + ); +}