| import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; |
| import { apiClient } from "../lib/apiClient"; |
| import { |
| Plus, |
| Search, |
| Megaphone, |
| Play, |
| Pause, |
| Square, |
| Trash2, |
| ArrowUpRight, |
| Sliders, |
| Clock, |
| Globe, |
| CheckCircle2, |
| MailCheck |
| } from "lucide-react"; |
| import { useState } from "react"; |
| import { Link } from "react-router-dom"; |
| import StatusBadge from "../components/StatusBadge"; |
| import ConfirmModal from "../components/ConfirmModal"; |
| import FormDrawer from "../components/FormDrawer"; |
| import toast from "react-hot-toast"; |
|
|
| export default function Campaigns() { |
| const queryClient = useQueryClient(); |
| const [searchTerm, setSearchTerm] = useState(""); |
| const [statusFilter, setStatusFilter] = useState("ALL"); |
| const [isCreateOpen, setIsCreateOpen] = useState(false); |
| const [selectedForDelete, setSelectedForDelete] = useState<string | null>(null); |
|
|
| const { data: campaigns, isLoading } = useQuery({ |
| queryKey: ["campaigns"], |
| queryFn: async () => { |
| const res = await apiClient.get("/campaigns"); |
| return res.data; |
| }, |
| }); |
|
|
| const updateStatusMutation = useMutation({ |
| mutationFn: async ({ id, status }: { id: string; status: "START" | "PAUSE" | "STOP" }) => { |
| const res = await apiClient.post(`/campaigns/${id}/status`, { status }); |
| return res.data; |
| }, |
| onSuccess: (_, variables) => { |
| const statusLabel = variables.status === "START" ? "started" : variables.status === "PAUSE" ? "paused" : "stopped"; |
| toast.success(`Campaign ${statusLabel}`); |
| queryClient.invalidateQueries({ queryKey: ["campaigns"] }); |
| }, |
| onError: (err: any) => { |
| toast.error(err.response?.data?.error || "Failed to update campaign status"); |
| } |
| }); |
|
|
| const deleteMutation = useMutation({ |
| mutationFn: async (id: string) => { |
| const res = await apiClient.delete(`/campaigns/${id}`); |
| return res.data; |
| }, |
| onSuccess: () => { |
| toast.success("Campaign removed"); |
| setSelectedForDelete(null); |
| queryClient.invalidateQueries({ queryKey: ["campaigns"] }); |
| }, |
| onError: (err: any) => { |
| toast.error(err.response?.data?.error || "Failed to delete campaign"); |
| } |
| }); |
|
|
| const filteredCampaigns = (campaigns || []).filter((c: any) => { |
| const matchesSearch = c.name?.toLowerCase().includes(searchTerm.toLowerCase()); |
| const matchesStatus = statusFilter === "ALL" || c.status === statusFilter; |
| return matchesSearch && matchesStatus; |
| }); |
|
|
| 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"> |
| <Megaphone className="w-6 h-6 text-indigo-400" /> |
| Outreach Campaigns |
| </h1> |
| <p className="text-zinc-400 text-sm mt-1"> |
| Automated multi-step cold email sequences with A/B variant testing. |
| </p> |
| </div> |
| |
| <button |
| onClick={() => setIsCreateOpen(true)} |
| className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium rounded-lg transition-all shadow-md shadow-indigo-600/20 flex items-center gap-2 self-start sm:self-auto" |
| > |
| <Plus className="w-4 h-4" /> |
| Create Campaign |
| </button> |
| </div> |
| |
| {/* Filter and Search Bar */} |
| <div className="bg-white/5 border border-white/10 backdrop-blur-md rounded-xl p-4 flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 shadow-[0_8px_32px_-8px_rgba(6,10,12,0.65)]"> |
| <div className="relative flex-1 max-w-md"> |
| <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-400" /> |
| <input |
| type="text" |
| placeholder="Search campaigns by name..." |
| value={searchTerm} |
| onChange={(e) => setSearchTerm(e.target.value)} |
| className="w-full bg-black/40 border border-white/5 rounded-lg py-2 pl-9 pr-4 text-sm text-zinc-100 placeholder:text-zinc-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 shadow-[inset_0_1px_1px_rgba(246,248,242,0.02)] transition-all" |
| /> |
| </div> |
| |
| <div className="flex items-center gap-2"> |
| {["ALL", "ACTIVE", "PAUSED", "STOPPED"].map((status) => ( |
| <button |
| key={status} |
| onClick={() => setStatusFilter(status)} |
| className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-300 shadow-[inset_0_1px_1px_rgba(246,248,242,0.02)] ${ |
| statusFilter === status |
| ? "bg-indigo-600 text-white shadow-[0_0_12px_rgba(37,125,104,0.5)] border border-indigo-500/50" |
| : "bg-black/40 text-zinc-400 hover:text-zinc-200 border border-white/5" |
| }`} |
| > |
| {status} |
| </button> |
| ))} |
| </div> |
| </div> |
| |
| {/* Campaigns Table */} |
| <div className="bg-white/5 border border-white/10 backdrop-blur-md rounded-xl overflow-hidden shadow-[0_8px_32px_-8px_rgba(6,10,12,0.65)]"> |
| {isLoading ? ( |
| <div className="py-20 flex flex-col items-center justify-center gap-3"> |
| <div className="w-8 h-8 rounded-full border-2 border-indigo-500 border-t-transparent animate-spin drop-shadow-[0_0_8px_rgba(63,156,132,0.5)]" /> |
| <p className="text-sm text-zinc-400">Loading campaign records...</p> |
| </div> |
| ) : filteredCampaigns.length > 0 ? ( |
| <div className="overflow-x-auto"> |
| <table className="w-full text-sm text-left"> |
| <thead className="bg-black/20 border-b border-white/5 text-zinc-400 text-xs uppercase font-sans tracking-wider"> |
| <tr> |
| <th className="px-6 py-3.5 font-semibold">Campaign Name</th> |
| <th className="px-6 py-3.5 font-semibold">Status</th> |
| <th className="px-6 py-3.5 font-semibold">Leads</th> |
| <th className="px-6 py-3.5 font-semibold">Sent</th> |
| <th className="px-6 py-3.5 font-semibold">Opens</th> |
| <th className="px-6 py-3.5 font-semibold">Replies</th> |
| <th className="px-6 py-3.5 font-semibold">Bounces</th> |
| <th className="px-6 py-3.5 font-semibold text-right">Actions</th> |
| </tr> |
| </thead> |
| <tbody className="divide-y divide-white/5"> |
| {filteredCampaigns.map((camp: any) => ( |
| <tr key={camp.id} className="hover:bg-white/5 transition-colors"> |
| <td className="px-6 py-4"> |
| <Link |
| to={`/campaigns/${camp.id}`} |
| className="font-semibold text-zinc-100 hover:text-indigo-400 transition-colors flex items-center gap-1.5" |
| > |
| {camp.name} |
| <ArrowUpRight className="w-3.5 h-3.5 text-zinc-500" /> |
| </Link> |
| <div className="text-[11px] text-zinc-400 mt-0.5 font-sans"> |
| Schedule: <span className="font-mono">{camp.start_schedule || "09:00"} - {camp.end_schedule || "17:00"}</span> ({camp.timezone || "America/New_York"}) |
| </div> |
| </td> |
| <td className="px-6 py-4"> |
| <StatusBadge status={camp.status} /> |
| </td> |
| <td className="px-6 py-4 font-mono text-zinc-300"> |
| {camp.lead_count?.toLocaleString() || 0} |
| </td> |
| <td className="px-6 py-4 font-mono text-zinc-300"> |
| {camp.sent_count?.toLocaleString() || 0} |
| </td> |
| <td className="px-6 py-4 font-mono text-emerald-400 drop-shadow-[0_0_8px_rgba(63,156,132,0.3)]"> |
| {camp.open_count?.toLocaleString() || 0} |
| </td> |
| <td className="px-6 py-4 font-mono text-purple-400 font-semibold drop-shadow-[0_0_8px_rgba(178,87,49,0.3)]"> |
| {camp.reply_count?.toLocaleString() || 0} |
| </td> |
| <td className="px-6 py-4 font-mono text-rose-400 drop-shadow-[0_0_8px_rgba(203,117,80,0.3)]"> |
| {camp.bounce_count || 0} |
| </td> |
| <td className="px-6 py-4 text-right"> |
| <div className="flex items-center justify-end gap-1.5"> |
| {camp.status === "ACTIVE" ? ( |
| <button |
| onClick={() => updateStatusMutation.mutate({ id: camp.id, status: "PAUSE" })} |
| title="Pause Campaign" |
| className="p-1.5 bg-black/40 hover:bg-amber-500/20 text-zinc-400 hover:text-amber-400 rounded-md transition-colors border border-white/5 hover:border-amber-500/30" |
| > |
| <Pause className="w-3.5 h-3.5" /> |
| </button> |
| ) : ( |
| <button |
| onClick={() => updateStatusMutation.mutate({ id: camp.id, status: "START" })} |
| title="Start Campaign" |
| className="p-1.5 bg-black/40 hover:bg-emerald-500/20 text-zinc-400 hover:text-emerald-400 rounded-md transition-colors border border-white/5 hover:border-emerald-500/30" |
| > |
| <Play className="w-3.5 h-3.5" /> |
| </button> |
| )} |
| <button |
| onClick={() => updateStatusMutation.mutate({ id: camp.id, status: "STOP" })} |
| title="Stop Campaign" |
| className="p-1.5 bg-black/40 hover:bg-rose-500/20 text-zinc-400 hover:text-rose-400 rounded-md transition-colors border border-white/5 hover:border-rose-500/30" |
| > |
| <Square className="w-3.5 h-3.5" /> |
| </button> |
| <button |
| onClick={() => setSelectedForDelete(camp.id)} |
| title="Delete Campaign" |
| className="p-1.5 bg-black/40 hover:bg-rose-500/20 text-zinc-400 hover:text-rose-400 rounded-md transition-colors border border-white/5 hover:border-rose-500/30" |
| > |
| <Trash2 className="w-3.5 h-3.5" /> |
| </button> |
| </div> |
| </td> |
| </tr> |
| ))} |
| </tbody> |
| </table> |
| </div> |
| ) : ( |
| <div className="py-16 text-center"> |
| <Megaphone className="w-12 h-12 text-zinc-600 mx-auto mb-3" /> |
| <h3 className="text-base font-medium text-zinc-300">No campaigns found</h3> |
| <p className="text-xs text-zinc-500 mt-1 max-w-sm mx-auto font-sans"> |
| Create your first campaign to begin dispatching automated cold outreach sequences. |
| </p> |
| <button |
| onClick={() => setIsCreateOpen(true)} |
| className="mt-4 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-medium rounded-lg transition-colors shadow-[0_0_12px_rgba(37,125,104,0.5)] border border-indigo-500/50" |
| > |
| Create Campaign |
| </button> |
| </div> |
| )} |
| </div> |
| |
| {/* Delete Campaign Confirmation */} |
| <ConfirmModal |
| isOpen={Boolean(selectedForDelete)} |
| onClose={() => setSelectedForDelete(null)} |
| onConfirm={() => selectedForDelete && deleteMutation.mutate(selectedForDelete)} |
| title="Delete Campaign" |
| description="Are you sure you want to permanently delete this campaign and all associated sequences? This action cannot be undone." |
| confirmText="Delete Campaign" |
| isDestructive={true} |
| isLoading={deleteMutation.isPending} |
| /> |
| |
| {/* Full Multi-Step Create Campaign Drawer */} |
| <FormDrawer |
| isOpen={isCreateOpen} |
| onClose={() => setIsCreateOpen(false)} |
| title="Launch New Campaign" |
| subtitle="Configure schedule parameters, tracking domain, and initial sequence step." |
| > |
| <form |
| onSubmit={async (e) => { |
| e.preventDefault(); |
| const form = e.target as HTMLFormElement; |
| const data = { |
| name: (form.elements.namedItem("name") as HTMLInputElement).value, |
| timezone: (form.elements.namedItem("timezone") as HTMLSelectElement).value, |
| start_schedule: (form.elements.namedItem("start_schedule") as HTMLInputElement).value, |
| end_schedule: (form.elements.namedItem("end_schedule") as HTMLInputElement).value, |
| track_settings: (form.elements.namedItem("track_settings") as HTMLSelectElement).value, |
| send_as_plain_text: (form.elements.namedItem("send_as_plain_text") as HTMLInputElement).checked, |
| follow_up_percentage: Number((form.elements.namedItem("follow_up_percentage") as HTMLInputElement).value), |
| unsubscribe_text: (form.elements.namedItem("unsubscribe_text") as HTMLInputElement).value, |
| stop_lead_settings: (form.elements.namedItem("stop_lead_settings") as HTMLSelectElement).value, |
| initial_subject: (form.elements.namedItem("subject") as HTMLInputElement).value, |
| initial_body: (form.elements.namedItem("body") as HTMLTextAreaElement).value, |
| }; |
| |
| try { |
| await apiClient.post("/campaigns", data); |
| toast.success("Campaign launched successfully"); |
| setIsCreateOpen(false); |
| queryClient.invalidateQueries({ queryKey: ["campaigns"] }); |
| } catch (err: any) { |
| toast.error(err.response?.data?.error || "Failed to create campaign"); |
| } |
| }} |
| className="space-y-5 text-sm" |
| > |
| <div> |
| <label className="block font-medium text-zinc-300 mb-1">Campaign Name *</label> |
| <input |
| name="name" |
| required |
| placeholder="e.g. Enterprise Founders Outbound" |
| className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100 focus:outline-none focus:border-indigo-500" |
| /> |
| </div> |
| |
| <div className="grid grid-cols-2 gap-3"> |
| <div> |
| <label className="block font-medium text-zinc-300 mb-1">Start Time</label> |
| <input |
| type="time" |
| name="start_schedule" |
| defaultValue="09:00" |
| className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100 focus:outline-none focus:border-indigo-500" |
| /> |
| </div> |
| <div> |
| <label className="block font-medium text-zinc-300 mb-1">End Time</label> |
| <input |
| type="time" |
| name="end_schedule" |
| defaultValue="17:00" |
| className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100 focus:outline-none focus:border-indigo-500" |
| /> |
| </div> |
| </div> |
| |
| <div> |
| <label className="block font-medium text-zinc-300 mb-1">Timezone</label> |
| <select |
| name="timezone" |
| defaultValue="America/New_York" |
| className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100 focus:outline-none focus:border-indigo-500" |
| > |
| <option value="America/New_York">America/New_York (EST)</option> |
| <option value="America/Chicago">America/Chicago (CST)</option> |
| <option value="America/Los_Angeles">America/Los_Angeles (PST)</option> |
| <option value="Europe/London">Europe/London (GMT)</option> |
| <option value="Europe/Paris">Europe/Paris (CET)</option> |
| <option value="Asia/Singapore">Asia/Singapore (SGT)</option> |
| </select> |
| </div> |
| |
| <div> |
| <label className="block font-medium text-zinc-300 mb-1">Tracking Settings</label> |
| <select |
| name="track_settings" |
| defaultValue="TRACK_EMAIL_OPEN_AND_CLICK" |
| className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100 focus:outline-none focus:border-indigo-500" |
| > |
| <option value="TRACK_EMAIL_OPEN_AND_CLICK">Track Opens and Clicks</option> |
| <option value="TRACK_EMAIL_OPEN">Track Email Opens Only</option> |
| <option value="TRACK_EMAIL_CLICK">Track Email Clicks Only</option> |
| <option value="DONT_TRACK_EMAIL_OPEN">Do Not Track Opens or Clicks</option> |
| </select> |
| </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">Send as Plain Text</span> |
| <span className="text-[11px] text-zinc-500">Improves deliverability in strict enterprise inboxes</span> |
| </div> |
| <input |
| type="checkbox" |
| name="send_as_plain_text" |
| className="w-4 h-4 rounded text-indigo-600 focus:ring-indigo-500 bg-zinc-950 border-zinc-700" |
| /> |
| </div> |
| |
| <div> |
| <div className="flex justify-between text-xs font-medium text-zinc-300 mb-1"> |
| <span>Follow-up Distribution %</span> |
| <span>85%</span> |
| </div> |
| <input |
| type="range" |
| name="follow_up_percentage" |
| min="10" |
| max="100" |
| defaultValue="85" |
| className="w-full accent-indigo-500" |
| /> |
| </div> |
| |
| <div> |
| <label className="block font-medium text-zinc-300 mb-1">Unsubscribe Message</label> |
| <input |
| name="unsubscribe_text" |
| defaultValue="Reply unsubscribe if you prefer not to receive updates." |
| className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100 focus:outline-none focus:border-indigo-500 text-xs" |
| /> |
| </div> |
| |
| <div> |
| <label className="block font-medium text-zinc-300 mb-1">Stop Lead Condition</label> |
| <select |
| name="stop_lead_settings" |
| defaultValue="REPLIED" |
| className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100 focus:outline-none focus:border-indigo-500 text-xs" |
| > |
| <option value="REPLIED">Stop sequence once lead replies</option> |
| <option value="OPENED">Stop sequence once lead opens email</option> |
| <option value="CLICKED">Stop sequence once lead clicks a link</option> |
| </select> |
| </div> |
| |
| <div className="pt-2 border-t border-zinc-800 space-y-3"> |
| <h4 className="text-xs font-semibold uppercase text-zinc-400">Step 1 Sequence Setup</h4> |
| <div> |
| <label className="block font-medium text-zinc-300 mb-1">Subject Line</label> |
| <input |
| name="subject" |
| required |
| defaultValue="Quick sync for {{first_name}}" |
| className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100 focus:outline-none focus:border-indigo-500 text-xs" |
| /> |
| </div> |
| <div> |
| <label className="block font-medium text-zinc-300 mb-1">Email Body</label> |
| <textarea |
| name="body" |
| rows={3} |
| required |
| defaultValue="<p>Hi {{first_name}},</p><p>Wanted to see how {{company_name}} is optimizing outbound deliverability?</p>" |
| className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100 focus:outline-none focus:border-indigo-500 font-mono text-xs" |
| /> |
| </div> |
| </div> |
| |
| <div className="pt-4 flex justify-end gap-3 border-t border-zinc-800"> |
| <button |
| type="button" |
| onClick={() => setIsCreateOpen(false)} |
| className="px-4 py-2 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded-lg text-xs" |
| > |
| Cancel |
| </button> |
| <button |
| type="submit" |
| className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white font-medium rounded-lg text-xs shadow-md" |
| > |
| Launch Campaign |
| </button> |
| </div> |
| </form> |
| </FormDrawer> |
| </div> |
| ); |
| } |
|
|
