Upload src\pages\Leads.tsx with huggingface_hub

src//pages//Leads.tsx

@@ -0,0 +1,622 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { apiClient } from "../lib/apiClient";
+import { 
+  Users, 
+  Search, 
+  Plus, 
+  ShieldAlert, 
+  Trash2, 
+  Mail, 
+  Building, 
+  Globe, 
+  MapPin, 
+  Linkedin, 
+  Phone, 
+  Filter, 
+  Clock, 
+  CheckCircle2, 
+  Ban,
+  ArrowUpRight
+} from "lucide-react";
+import { useState } from "react";
+import StatusBadge from "../components/StatusBadge";
+import FormDrawer from "../components/FormDrawer";
+import CsvExportButton from "../components/CsvExportButton";
+import ConfirmModal from "../components/ConfirmModal";
+import toast from "react-hot-toast";
+
+const STATUSES = [
+  "ALL",
+  "INTERESTED",
+  "MEETING_BOOKED",
+  "MEETING_DONE",
+  "REPLIED",
+  "NOT_INTERESTED",
+  "UNSUBSCRIBED",
+  "BOUNCED",
+  "DO_NOT_CONTACT"
+];
+
+export default function Leads() {
+  const queryClient = useQueryClient();
+  const [activeTab, setActiveTab] = useState<"leads" | "blocklist">("leads");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedStatus, setSelectedStatus] = useState("ALL");
+  const [selectedLead, setSelectedLead] = useState<any | null>(null);
+  const [isAddLeadOpen, setIsAddLeadOpen] = useState(false);
+  const [isAddBlocklistOpen, setIsAddBlocklistOpen] = useState(false);
+  const [blocklistType, setBlocklistType] = useState<"email" | "domain">("email");
+
+  const { data: leads = [], isLoading } = useQuery({
+    queryKey: ["leads-search", searchQuery, selectedStatus],
+    queryFn: async () => {
+      const res = await apiClient.get("/leads/search", {
+        params: { q: searchQuery, status: selectedStatus },
+      });
+      return res.data;
+    },
+  });
+
+  const { data: emailBlockList = [], refetch: refetchEmailBlockList } = useQuery({
+    queryKey: ["blocklist-emails"],
+    queryFn: async () => {
+      const res = await apiClient.get("/leads/block-list");
+      return res.data;
+    },
+  });
+
+  const { data: domainBlockList = [], refetch: refetchDomainBlockList } = useQuery({
+    queryKey: ["blocklist-domains"],
+    queryFn: async () => {
+      const res = await apiClient.get("/leads/domain-block-list");
+      return res.data;
+    },
+  });
+
+  const updateLeadStatusMutation = useMutation({
+    mutationFn: async ({ campaignId, leadId, status }: { campaignId: string; leadId: string; status: string }) => {
+      const res = await apiClient.post(`/campaigns/${campaignId}/leads/status`, { lead_id: leadId, status });
+      return res.data;
+    },
+    onSuccess: () => {
+      toast.success("Lead status updated");
+      queryClient.invalidateQueries({ queryKey: ["leads-search"] });
+    },
+  });
+
+  const deleteLeadMutation = useMutation({
+    mutationFn: async ({ campaignId, leadId }: { campaignId: string; leadId: string }) => {
+      const res = await apiClient.delete(`/campaigns/${campaignId}/leads/${leadId}`);
+      return res.data;
+    },
+    onSuccess: () => {
+      toast.success("Lead removed");
+      setSelectedLead(null);
+      queryClient.invalidateQueries({ queryKey: ["leads-search"] });
+    },
+  });
+
+  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">
+            <Users className="w-6 h-6 text-teal-400" />
+            Lead Intelligence Database
+          </h1>
+          <p className="text-zinc-400 text-sm mt-1">
+            Global repository of targeted prospects, responses, and suppression blocklists.
+          </p>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => setIsAddLeadOpen(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"
+          >
+            <Plus className="w-4 h-4" /> Add Prospect
+          </button>
+        </div>
+      </div>
+
+      {/* Main Tabs */}
+      <div className="border-b border-zinc-800 flex items-center gap-2 text-sm font-medium">
+        <button
+          onClick={() => setActiveTab("leads")}
+          className={`px-4 py-2.5 border-b-2 font-medium text-xs flex items-center gap-2 transition-colors ${
+            activeTab === "leads"
+              ? "border-indigo-500 text-indigo-400 bg-indigo-500/5"
+              : "border-transparent text-zinc-400 hover:text-zinc-200"
+          }`}
+        >
+          <Users className="w-4 h-4" /> Global Leads ({leads.length})
+        </button>
+        <button
+          onClick={() => setActiveTab("blocklist")}
+          className={`px-4 py-2.5 border-b-2 font-medium text-xs flex items-center gap-2 transition-colors ${
+            activeTab === "blocklist"
+              ? "border-indigo-500 text-indigo-400 bg-indigo-500/5"
+              : "border-transparent text-zinc-400 hover:text-zinc-200"
+          }`}
+        >
+          <ShieldAlert className="w-4 h-4" /> Suppression Blocklists
+        </button>
+      </div>
+
+      {activeTab === "leads" && (
+        <div className="space-y-4">
+          {/* Filter Bar */}
+          <div className="bg-white/5 border border-white/10 backdrop-blur-md rounded-xl p-4 flex flex-col md:flex-row items-stretch md: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 by name, email, or company..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full bg-black/40 border border-white/5 rounded-lg py-2 pl-9 pr-4 text-xs text-zinc-100 placeholder:text-zinc-500 focus:outline-none focus:border-indigo-500 shadow-[inset_0_1px_1px_rgba(246,248,242,0.02)] transition-all"
+              />
+            </div>
+
+            <div className="flex items-center gap-3">
+              <select
+                value={selectedStatus}
+                onChange={(e) => setSelectedStatus(e.target.value)}
+                className="bg-black/40 border border-white/5 rounded-lg py-2 px-3 text-xs text-zinc-300 focus:outline-none focus:border-indigo-500 shadow-[inset_0_1px_1px_rgba(246,248,242,0.02)] transition-all"
+              >
+                {STATUSES.map((st) => (
+                  <option key={st} value={st} className="bg-zinc-900">
+                    Status: {st.replace(/_/g, " ")}
+                  </option>
+                ))}
+              </select>
+              <CsvExportButton data={leads} filename="smartlead-global-leads.csv" />
+            </div>
+          </div>
+
+          {/* Leads 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)]">
+            <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">Prospect</th>
+                    <th className="px-6 py-3.5 font-semibold">Company</th>
+                    <th className="px-6 py-3.5 font-semibold">Status</th>
+                    <th className="px-6 py-3.5 font-semibold">Engagement</th>
+                    <th className="px-6 py-3.5 font-semibold">Location</th>
+                    <th className="px-6 py-3.5 font-semibold text-right">Actions</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-white/5">
+                  {leads.map((lead: any) => (
+                    <tr
+                      key={lead.id}
+                      onClick={() => setSelectedLead(lead)}
+                      className="hover:bg-white/5 transition-colors cursor-pointer"
+                    >
+                      <td className="px-6 py-4">
+                        <div className="font-semibold text-zinc-100 flex items-center gap-2">
+                          {lead.first_name} {lead.last_name}
+                        </div>
+                        <div className="text-xs text-zinc-400 font-mono flex items-center gap-1 mt-0.5">
+                          <Mail className="w-3 h-3 text-zinc-500" /> {lead.email}
+                        </div>
+                      </td>
+                      <td className="px-6 py-4 text-zinc-300">
+                        <div className="font-medium text-zinc-200">{lead.company_name}</div>
+                        {lead.website && (
+                          <div className="text-[11px] text-zinc-500 font-mono truncate max-w-[150px]">
+                            {lead.website.replace("https://", "")}
+                          </div>
+                        )}
+                      </td>
+                      <td className="px-6 py-4">
+                        <StatusBadge status={lead.status} size="sm" />
+                      </td>
+                      <td className="px-6 py-4">
+                        <div className="text-xs text-zinc-300 font-mono">
+                          <span className="text-emerald-400 drop-shadow-[0_0_8px_rgba(63,156,132,0.3)]">{lead.open_count || 0}</span> opens •{" "}
+                          <span className="text-indigo-400 drop-shadow-[0_0_8px_rgba(37,125,104,0.3)]">{lead.click_count || 0}</span> clicks
+                        </div>
+                      </td>
+                      <td className="px-6 py-4 text-xs text-zinc-400 font-sans">
+                        {lead.location || "United States"}
+                      </td>
+                      <td className="px-6 py-4 text-right">
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setSelectedLead(lead);
+                          }}
+                          className="px-3 py-1.5 bg-white/5 hover:bg-white/10 text-zinc-300 text-xs font-medium rounded-lg border border-white/5 transition-all shadow-[inset_0_1px_1px_rgba(246,248,242,0.05)]"
+                        >
+                          View Profile
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+
+                  {leads.length === 0 && !isLoading && (
+                    <tr>
+                      <td colSpan={6} className="py-16 text-center text-xs text-zinc-500">
+                        No prospect leads matching current filters.
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* SUB-TAB: BLOCKLIST MANAGER */}
+      {activeTab === "blocklist" && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {/* Email Blocklist */}
+          <div className="bg-white/5 border border-white/10 backdrop-blur-md rounded-xl p-5 shadow-[0_8px_32px_-8px_rgba(6,10,12,0.65)] space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <h3 className="text-sm font-semibold text-zinc-100 flex items-center gap-2">
+                  <Mail className="w-4 h-4 text-rose-400 drop-shadow-[0_0_8px_rgba(203,117,80,0.5)]" />
+                  Email Address Blocklist
+                </h3>
+                <p className="text-xs text-zinc-400 mt-0.5">Suppressed emails never receive outreach.</p>
+              </div>
+              <button
+                onClick={() => {
+                  setBlocklistType("email");
+                  setIsAddBlocklistOpen(true);
+                }}
+                className="px-2.5 py-1.5 bg-white/5 hover:bg-white/10 text-zinc-200 text-xs font-medium rounded-md border border-white/5 transition-all shadow-[inset_0_1px_1px_rgba(246,248,242,0.05)]"
+              >
+                + Add Email
+              </button>
+            </div>
+
+            <div className="space-y-2">
+              {emailBlockList.map((item: any) => (
+                <div
+                  key={item.id}
+                  className="flex items-center justify-between p-3 bg-black/40 border border-white/5 rounded-lg text-xs hover:bg-white/5 transition-colors"
+                >
+                  <div>
+                    <span className="font-mono text-zinc-200 font-medium">{item.email}</span>
+                    <div className="text-[10px] text-zinc-500 font-sans mt-0.5">{item.reason}</div>
+                  </div>
+                  <button
+                    onClick={async () => {
+                      await apiClient.delete(`/leads/block-list/${item.id}`);
+                      toast.success("Removed from blocklist");
+                      refetchEmailBlockList();
+                    }}
+                    className="text-zinc-500 hover:text-rose-400 p-1.5 rounded-md hover:bg-rose-500/10 transition-colors"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Domain Blocklist */}
+          <div className="bg-white/5 border border-white/10 backdrop-blur-md rounded-xl p-5 shadow-[0_8px_32px_-8px_rgba(6,10,12,0.65)] space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <h3 className="text-sm font-semibold text-zinc-100 flex items-center gap-2">
+                  <Globe className="w-4 h-4 text-amber-400 drop-shadow-[0_0_8px_rgba(194,160,74,0.5)]" />
+                  Domain Suppression List
+                </h3>
+                <p className="text-xs text-zinc-400 mt-0.5">Blocks all emails under specified root domains.</p>
+              </div>
+              <button
+                onClick={() => {
+                  setBlocklistType("domain");
+                  setIsAddBlocklistOpen(true);
+                }}
+                className="px-2.5 py-1.5 bg-white/5 hover:bg-white/10 text-zinc-200 text-xs font-medium rounded-md border border-white/5 transition-all shadow-[inset_0_1px_1px_rgba(246,248,242,0.05)]"
+              >
+                + Add Domain
+              </button>
+            </div>
+
+            <div className="space-y-2">
+              {domainBlockList.map((item: any) => (
+                <div
+                  key={item.id}
+                  className="flex items-center justify-between p-3 bg-black/40 border border-white/5 rounded-lg text-xs hover:bg-white/5 transition-colors"
+                >
+                  <div>
+                    <span className="font-mono text-zinc-200 font-medium">@{item.domain}</span>
+                    <div className="text-[10px] text-zinc-500 font-sans mt-0.5">{item.reason}</div>
+                  </div>
+                  <button
+                    onClick={async () => {
+                      await apiClient.delete(`/leads/domain-block-list/${item.id}`);
+                      toast.success("Domain removed from blocklist");
+                      refetchDomainBlockList();
+                    }}
+                    className="text-zinc-500 hover:text-rose-400 p-1.5 rounded-md hover:bg-rose-500/10 transition-colors"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Lead Detail Slide-Over Drawer */}
+      <FormDrawer
+        isOpen={Boolean(selectedLead)}
+        onClose={() => setSelectedLead(null)}
+        title="Prospect Dossier"
+        subtitle={selectedLead ? `${selectedLead.first_name} ${selectedLead.last_name} (${selectedLead.email})` : ""}
+      >
+        {selectedLead && (
+          <div className="space-y-6 text-xs">
+            {/* Status Change Card */}
+            <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-4">
+              <label className="block font-medium text-zinc-400 mb-2">Lead Outreach Status</label>
+              <select
+                value={selectedLead.status}
+                onChange={(e) => {
+                  updateLeadStatusMutation.mutate({
+                    campaignId: selectedLead.campaign_id,
+                    leadId: selectedLead.id,
+                    status: e.target.value,
+                  });
+                  setSelectedLead({ ...selectedLead, status: e.target.value });
+                }}
+                className="w-full bg-zinc-950 border border-zinc-800 rounded-lg p-2 text-zinc-100 font-medium"
+              >
+                {STATUSES.filter((s) => s !== "ALL").map((st) => (
+                  <option key={st} value={st}>
+                    {st.replace(/_/g, " ")}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Profile Fields */}
+            <div className="space-y-3 bg-zinc-900/60 border border-zinc-800 rounded-xl p-4">
+              <h4 className="font-semibold text-zinc-300 uppercase tracking-wider text-[10px]">Contact Info</h4>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <span className="text-zinc-500 block">Company</span>
+                  <span className="text-zinc-200 font-medium">{selectedLead.company_name}</span>
+                </div>
+                <div>
+                  <span className="text-zinc-500 block">Location</span>
+                  <span className="text-zinc-200 font-medium">{selectedLead.location || "N/A"}</span>
+                </div>
+                <div>
+                  <span className="text-zinc-500 block">Phone</span>
+                  <span className="text-zinc-200 font-medium">{selectedLead.phone_number || "N/A"}</span>
+                </div>
+                <div>
+                  <span className="text-zinc-500 block">LinkedIn</span>
+                  {selectedLead.linkedin_profile ? (
+                    <a
+                      href={selectedLead.linkedin_profile}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="text-indigo-400 hover:underline"
+                    >
+                      View LinkedIn Profile
+                    </a>
+                  ) : (
+                    <span className="text-zinc-500">Not provided</span>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Custom Fields */}
+            {selectedLead.custom_fields && Object.keys(selectedLead.custom_fields).length > 0 && (
+              <div className="space-y-2 bg-zinc-900/60 border border-zinc-800 rounded-xl p-4">
+                <h4 className="font-semibold text-zinc-300 uppercase tracking-wider text-[10px]">Custom Attributes</h4>
+                <div className="grid grid-cols-2 gap-2 font-mono text-[11px]">
+                  {Object.entries(selectedLead.custom_fields).map(([key, val]) => (
+                    <div key={key} className="bg-zinc-950 p-2 rounded border border-zinc-800">
+                      <span className="text-zinc-500 block text-[10px]">{key}</span>
+                      <span className="text-zinc-200 font-semibold">{String(val)}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Timeline */}
+            <div className="space-y-3 bg-zinc-900/60 border border-zinc-800 rounded-xl p-4">
+              <h4 className="font-semibold text-zinc-300 uppercase tracking-wider text-[10px]">Activity Timeline</h4>
+              <div className="space-y-3">
+                <div className="flex items-start gap-2.5">
+                  <div className="w-2 h-2 rounded-full bg-emerald-400 mt-1" />
+                  <div>
+                    <span className="text-zinc-300 font-medium">Email Delivered & Opened</span>
+                    <div className="text-[10px] text-zinc-500">2 hours ago</div>
+                  </div>
+                </div>
+                <div className="flex items-start gap-2.5">
+                  <div className="w-2 h-2 rounded-full bg-indigo-400 mt-1" />
+                  <div>
+                    <span className="text-zinc-300 font-medium">Enrolled in Enterprise SaaS Sequence</span>
+                    <div className="text-[10px] text-zinc-500">3 days ago</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Delete Lead Button */}
+            <div className="pt-2 flex justify-end">
+              <button
+                onClick={() => {
+                  deleteLeadMutation.mutate({
+                    campaignId: selectedLead.campaign_id,
+                    leadId: selectedLead.id,
+                  });
+                }}
+                className="px-3 py-1.5 bg-rose-600/20 hover:bg-rose-600 text-rose-300 hover:text-white rounded-lg text-xs font-medium transition-colors flex items-center gap-1.5"
+              >
+                <Trash2 className="w-3.5 h-3.5" /> Remove Lead
+              </button>
+            </div>
+          </div>
+        )}
+      </FormDrawer>
+
+      {/* Add Lead Slide-Over */}
+      <FormDrawer
+        isOpen={isAddLeadOpen}
+        onClose={() => setIsAddLeadOpen(false)}
+        title="Add Global Prospect Lead"
+        subtitle="Input contact info, company details, and custom variables for personalization."
+      >
+        <form
+          onSubmit={async (e) => {
+            e.preventDefault();
+            const form = e.target as HTMLFormElement;
+            const newLead = {
+              first_name: (form.elements.namedItem("first_name") as HTMLInputElement).value,
+              last_name: (form.elements.namedItem("last_name") as HTMLInputElement).value,
+              email: (form.elements.namedItem("email") as HTMLInputElement).value,
+              phone_number: (form.elements.namedItem("phone_number") as HTMLInputElement).value,
+              company_name: (form.elements.namedItem("company_name") as HTMLInputElement).value,
+              website: (form.elements.namedItem("website") as HTMLInputElement).value,
+              location: (form.elements.namedItem("location") as HTMLInputElement).value,
+              linkedin_profile: (form.elements.namedItem("linkedin_profile") as HTMLInputElement).value,
+              status: "INTERESTED",
+            };
+
+            try {
+              await apiClient.post("/campaigns/camp_9901/leads", newLead);
+              toast.success("Prospect added to database");
+              setIsAddLeadOpen(false);
+              queryClient.invalidateQueries({ queryKey: ["leads-search"] });
+            } catch (err: any) {
+              toast.error("Failed to add prospect");
+            }
+          }}
+          className="space-y-3.5 text-xs"
+        >
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="block font-medium text-zinc-300 mb-1">First Name *</label>
+              <input name="first_name" required className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2 text-zinc-100" />
+            </div>
+            <div>
+              <label className="block font-medium text-zinc-300 mb-1">Last Name</label>
+              <input name="last_name" className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2 text-zinc-100" />
+            </div>
+          </div>
+          <div>
+            <label className="block font-medium text-zinc-300 mb-1">Email Address *</label>
+            <input type="email" name="email" required className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2 text-zinc-100" />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="block font-medium text-zinc-300 mb-1">Company Name</label>
+              <input name="company_name" className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2 text-zinc-100" />
+            </div>
+            <div>
+              <label className="block font-medium text-zinc-300 mb-1">Phone Number</label>
+              <input name="phone_number" className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2 text-zinc-100" />
+            </div>
+          </div>
+          <div>
+            <label className="block font-medium text-zinc-300 mb-1">Website URL</label>
+            <input name="website" placeholder="https://" className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2 text-zinc-100" />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="block font-medium text-zinc-300 mb-1">Location</label>
+              <input name="location" placeholder="e.g. San Francisco, CA" className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2 text-zinc-100" />
+            </div>
+            <div>
+              <label className="block font-medium text-zinc-300 mb-1">LinkedIn URL</label>
+              <input name="linkedin_profile" placeholder="https://linkedin.com/in/..." className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2 text-zinc-100" />
+            </div>
+          </div>
+
+          <div className="pt-4 flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={() => setIsAddLeadOpen(false)}
+              className="px-3 py-2 bg-zinc-800 text-zinc-300 rounded-lg"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="px-4 py-2 bg-indigo-600 text-white rounded-lg font-medium shadow"
+            >
+              Save Prospect
+            </button>
+          </div>
+        </form>
+      </FormDrawer>
+
+      {/* Add Blocklist Modal */}
+      <FormDrawer
+        isOpen={isAddBlocklistOpen}
+        onClose={() => setIsAddBlocklistOpen(false)}
+        title={blocklistType === "email" ? "Add Email to Suppression Blocklist" : "Add Domain to Suppression Blocklist"}
+        subtitle="Blocked records will never receive any emails from any campaign."
+      >
+        <form
+          onSubmit={async (e) => {
+            e.preventDefault();
+            const form = e.target as HTMLFormElement;
+            const val = (form.elements.namedItem("val") as HTMLInputElement).value;
+            const reason = (form.elements.namedItem("reason") as HTMLInputElement).value;
+
+            try {
+              if (blocklistType === "email") {
+                await apiClient.post("/leads/block-list", { email: val, reason });
+                refetchEmailBlockList();
+              } else {
+                await apiClient.post("/leads/domain-block-list", { domain: val, reason });
+                refetchDomainBlockList();
+              }
+              toast.success("Suppression entry saved");
+              setIsAddBlocklistOpen(false);
+            } catch (err: any) {
+              toast.error("Failed to add entry");
+            }
+          }}
+          className="space-y-4 text-xs"
+        >
+          <div>
+            <label className="block font-medium text-zinc-300 mb-1">
+              {blocklistType === "email" ? "Email Address" : "Domain (e.g. competitor.com)"}
+            </label>
+            <input name="val" required className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100" />
+          </div>
+          <div>
+            <label className="block font-medium text-zinc-300 mb-1">Reason for Suppression</label>
+            <input name="reason" placeholder="e.g. Legal opt-out, Competitor" className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100" />
+          </div>
+          <div className="pt-4 flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={() => setIsAddBlocklistOpen(false)}
+              className="px-3 py-2 bg-zinc-800 text-zinc-300 rounded-lg"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="px-4 py-2 bg-rose-600 text-white rounded-lg font-medium"
+            >
+              Block Record
+            </button>
+          </div>
+        </form>
+      </FormDrawer>
+    </div>
+  );
+}