Upload src/pages/Campaigns.tsx with huggingface_hub

src/pages/Campaigns.tsx

@@ -0,0 +1,441 @@
+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>
+  );
+}