| import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; |
| import { apiClient } from "../lib/apiClient"; |
| import { |
| Flame, |
| ShieldCheck, |
| TrendingUp, |
| Sliders, |
| CheckCircle2, |
| AlertTriangle, |
| Zap, |
| Mail, |
| Play, |
| Pause, |
| ArrowUpRight |
| } from "lucide-react"; |
| import { useState } from "react"; |
| import StatusBadge from "../components/StatusBadge"; |
| import FormDrawer from "../components/FormDrawer"; |
| import toast from "react-hot-toast"; |
|
|
| export default function Warmup() { |
| const queryClient = useQueryClient(); |
| const [selectedWarmupAccount, setSelectedWarmupAccount] = useState<any | null>(null); |
| const [isSettingsOpen, setIsSettingsOpen] = useState(false); |
|
|
| const { data: accounts = [], isLoading, refetch } = useQuery({ |
| queryKey: ["email-accounts"], |
| queryFn: async () => { |
| const res = await apiClient.get("/email-accounts"); |
| return res.data; |
| }, |
| }); |
|
|
| const toggleWarmupMutation = useMutation({ |
| mutationFn: async ({ id, status }: { id: string; status: "ACTIVE" | "PAUSED" }) => { |
| const action = status === "ACTIVE" ? "enable" : "disable"; |
| const res = await apiClient.post(`/email-accounts/${id}/warmup/${action}`); |
| return res.data; |
| }, |
| onSuccess: (_, variables) => { |
| toast.success(`Warmup ${variables.status === "ACTIVE" ? "activated" : "paused"}`); |
| refetch(); |
| }, |
| onError: () => { |
| toast.error("Failed to update warmup status"); |
| } |
| }); |
|
|
| const activeWarmups = accounts.filter((a: any) => a.warmup_enabled).length; |
| const dailyWarmupVolume = accounts.reduce((total: number, account: any) => total + (account.warmup_daily_count || 0), 0); |
| const replyRates = accounts.map((account: any) => account.reply_rate_percentage).filter((rate: any) => typeof rate === "number"); |
| const averageReplyRate = replyRates.length ? (replyRates.reduce((total: number, rate: number) => total + rate, 0) / replyRates.length).toFixed(1) : "—"; |
| const scores = accounts.map((account: any) => account.warmup_score).filter((score: any) => typeof score === "number"); |
| const averageScore = scores.length ? (scores.reduce((total: number, score: number) => total + score, 0) / scores.length).toFixed(1) : "—"; |
|
|
| return ( |
| <div className="p-6 max-w-7xl mx-auto space-y-6"> |
| {/* Header */} |
| <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4"> |
| <div> |
| <h1 className="text-2xl font-bold tracking-tight text-zinc-100 flex items-center gap-2.5"> |
| <Flame className="w-6 h-6 text-amber-400" /> |
| Autonomous Warmup Engine |
| </h1> |
| <p className="text-zinc-400 text-sm mt-1"> |
| Gradually ramps mailbox sending volume, interacts with peer networks, and rescues emails from spam folders. |
| </p> |
| </div> |
| |
| <div className="flex items-center gap-3"> |
| <button |
| onClick={() => { |
| accounts.forEach((a: any) => { |
| toggleWarmupMutation.mutate({ id: a.id, status: "ACTIVE" }); |
| }); |
| toast.success("Warmup activated on all connected mailboxes"); |
| }} |
| className="px-3.5 py-2 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 text-xs font-medium rounded-lg transition-colors flex items-center gap-1.5" |
| > |
| <Play className="w-3.5 h-3.5 text-emerald-400" /> Bulk Enable All |
| </button> |
| <button |
| onClick={() => setIsSettingsOpen(true)} |
| className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-medium rounded-lg transition-all shadow-md shadow-indigo-600/20 flex items-center gap-1.5" |
| > |
| <Sliders className="w-4 h-4" /> Global Warmup Rules |
| </button> |
| </div> |
| </div> |
| |
| {/* KPI Overview */} |
| <div className="grid grid-cols-1 sm:grid-cols-4 gap-4"> |
| <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-4"> |
| <span className="text-xs text-zinc-400">Warmup Coverage</span> |
| <div className="text-2xl font-bold text-zinc-100 mt-1"> |
| {activeWarmups} / {accounts.length} |
| </div> |
| <span className="text-[11px] text-emerald-400 font-medium">Inboxes in active pool</span> |
| </div> |
| <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-4"> |
| <span className="text-xs text-zinc-400">Daily Warmup Volume</span> |
| <div className="text-2xl font-bold text-amber-400 mt-1">{dailyWarmupVolume} / day</div> |
| <span className="text-[11px] text-zinc-500">Auto-incrementing daily</span> |
| </div> |
| <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-4"> |
| <span className="text-xs text-zinc-400">Warmup Reply Rate</span> |
| <div className="text-2xl font-bold text-indigo-400 mt-1">{averageReplyRate}%</div> |
| <span className="text-[11px] text-zinc-500">Autonomous peer response</span> |
| </div> |
| <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-4"> |
| <span className="text-xs text-zinc-400">Inbox Health Score</span> |
| <div className="text-2xl font-bold text-emerald-400 mt-1">{averageScore} / 100</div> |
| <span className="text-[11px] text-emerald-400 font-medium">Excellent deliverability</span> |
| </div> |
| </div> |
| |
| {/* Warmup Mailboxes Table */} |
| <div className="bg-zinc-900 border border-zinc-800 rounded-xl overflow-hidden shadow-sm"> |
| <div className="overflow-x-auto"> |
| <table className="w-full text-sm text-left"> |
| <thead className="bg-zinc-950 border-b border-zinc-800 text-zinc-400 text-xs uppercase"> |
| <tr> |
| <th className="px-6 py-3.5 font-semibold">Mailbox</th> |
| <th className="px-6 py-3.5 font-semibold">Warmup Status</th> |
| <th className="px-6 py-3.5 font-semibold">Ramp Day</th> |
| <th className="px-6 py-3.5 font-semibold">Reputation Score</th> |
| <th className="px-6 py-3.5 font-semibold">Warmup Volume</th> |
| <th className="px-6 py-3.5 font-semibold text-right">Warmup Toggle</th> |
| </tr> |
| </thead> |
| <tbody className="divide-y divide-zinc-800/80"> |
| {accounts.map((acc: any) => { |
| const isWarmupActive = Boolean(acc.warmup_enabled); |
| const rampDay = acc.ramp_day || "—"; |
| const score = acc.warmup_score || 0; |
| |
| return ( |
| <tr key={acc.id} className="hover:bg-zinc-800/30 transition-colors"> |
| <td className="px-6 py-4"> |
| <div className="font-semibold text-zinc-100 flex items-center gap-2"> |
| {acc.from_name} |
| </div> |
| <div className="text-xs text-zinc-400 font-mono mt-0.5">{acc.from_email}</div> |
| </td> |
| <td className="px-6 py-4"> |
| <StatusBadge status={isWarmupActive ? "ACTIVE" : "PAUSED"} size="sm" /> |
| </td> |
| <td className="px-6 py-4 text-zinc-300 font-mono text-xs"> |
| Day {rampDay} |
| </td> |
| <td className="px-6 py-4"> |
| <div className="flex items-center gap-2"> |
| <span className="text-xs font-bold text-emerald-400">{score}%</span> |
| <div className="w-20 h-1.5 bg-zinc-950 rounded-full overflow-hidden border border-zinc-800"> |
| <div className="h-full bg-emerald-400 rounded-full" style={{ width: `${score}%` }} /> |
| </div> |
| </div> |
| </td> |
| <td className="px-6 py-4 text-xs font-mono text-zinc-300"> |
| <span className="text-amber-400 font-semibold">{acc.warmup_daily_count || 0}</span> warm emails sent today |
| </td> |
| <td className="px-6 py-4 text-right"> |
| <button |
| onClick={() => |
| toggleWarmupMutation.mutate({ |
| id: acc.id, |
| status: isWarmupActive ? "PAUSED" : "ACTIVE", |
| }) |
| } |
| className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors ${ |
| isWarmupActive |
| ? "bg-rose-500/10 text-rose-400 hover:bg-rose-500/20 border border-rose-500/30" |
| : "bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20 border border-emerald-500/30" |
| }`} |
| > |
| {isWarmupActive ? "Pause Warmup" : "Start Warmup"} |
| </button> |
| </td> |
| </tr> |
| ); |
| })} |
| </tbody> |
| </table> |
| </div> |
| </div> |
| |
| {/* Global Warmup Rules Drawer */} |
| <FormDrawer |
| isOpen={isSettingsOpen} |
| onClose={() => setIsSettingsOpen(false)} |
| title="Autonomous Warmup Settings" |
| subtitle="Fine-tune daily ramping schedules and simulated reply rates." |
| > |
| <div className="space-y-4 text-xs"> |
| <div> |
| <label className="block font-medium text-zinc-300 mb-1">Target Daily Warmup Max</label> |
| <input |
| type="number" |
| defaultValue="40" |
| className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100" |
| /> |
| <span className="text-[11px] text-zinc-500 mt-1 block">Maximum simulated emails per inbox daily</span> |
| </div> |
| |
| <div> |
| <label className="block font-medium text-zinc-300 mb-1">Daily Ramp Increment</label> |
| <input |
| type="number" |
| defaultValue="4" |
| className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100" |
| /> |
| <span className="text-[11px] text-zinc-500 mt-1 block">Additional emails added each consecutive day</span> |
| </div> |
| |
| <div> |
| <label className="block font-medium text-zinc-300 mb-1">Simulated Reply Rate</label> |
| <input |
| type="range" |
| min="10" |
| max="60" |
| defaultValue="35" |
| className="w-full accent-indigo-500" |
| /> |
| <div className="flex justify-between text-[11px] text-zinc-400"> |
| <span>Conservative (15%)</span> |
| <span className="text-indigo-400 font-semibold">Target: 35%</span> |
| <span>Aggressive (60%)</span> |
| </div> |
| </div> |
| |
| <div className="flex items-center justify-between p-3 bg-zinc-900 border border-zinc-800 rounded-lg"> |
| <div> |
| <span className="font-medium text-zinc-200 block text-xs">Spam Rescue Protocol</span> |
| <span className="text-[11px] text-zinc-500">Automatically moves warm emails out of spam folders</span> |
| </div> |
| <input |
| type="checkbox" |
| defaultChecked |
| className="w-4 h-4 rounded text-indigo-600 focus:ring-indigo-500 bg-zinc-950 border-zinc-700" |
| /> |
| </div> |
| |
| <div className="pt-4 flex justify-end gap-2 border-t border-zinc-800"> |
| <button |
| type="button" |
| onClick={() => setIsSettingsOpen(false)} |
| className="px-3 py-2 bg-zinc-800 text-zinc-300 rounded-lg" |
| > |
| Cancel |
| </button> |
| <button |
| type="button" |
| onClick={() => { |
| toast.success("Warmup parameters saved"); |
| setIsSettingsOpen(false); |
| }} |
| className="px-4 py-2 bg-indigo-600 text-white font-medium rounded-lg" |
| > |
| Save Configuration |
| </button> |
| </div> |
| </div> |
| </FormDrawer> |
| </div> |
| ); |
| } |
|
|
