Delete files src\App.tsx src\components\AnimatedLogo.test.tsx src\components\AnimatedLogo.tsx src\components\BackgroundElements.tsx src\components\ConfirmModal.tsx src\components\CsvExportButton.test.tsx src\components\CsvExportButton.tsx src\components\FormDrawer.tsx src\components\GeometricBackground.test.tsx src\components\GeometricBackground.tsx src\components\GlassCard.tsx src\components\Logo.tsx src\components\RichTextEditor.tsx src\components\Sidebar.tsx src\components\StatCard.tsx src\components\StatusBadge.test.tsx src\components\StatusBadge.tsx src\components\TopBar.tsx src\context\ApiKeyContext.tsx src\index.css src\layouts\AppLayout.tsx src\lib\aiService.ts src\lib\apiClient.ts src\lib\supabaseClient.ts src\main.tsx src\pages\Analytics.test.tsx src\pages\Analytics.tsx src\pages\CampaignDetail.tsx src\pages\Campaigns.tsx src\pages\Clients.tsx src\pages\Dashboard.tsx src\pages\EmailAccounts.tsx src\pages\Gate.tsx src\pages\Inbox.tsx src\pages\Leads.tsx src\pages\Settings.tsx src\pages\Warmup.tsx src\pages\Webhooks.tsx src\pages\gate.css src\server\middleware\auth.ts src\utils\cn.ts src\vite-env.d.ts with huggingface_hub

src//App.tsx

@@ -1,82 +0,0 @@
-import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { Toaster } from "react-hot-toast";
-import { ReactNode } from "react";
-import { ApiKeyProvider, useApiKey } from "./context/ApiKeyContext";
-import AppLayout from "./layouts/AppLayout";
-import Gate from "./pages/Gate";
-
-// All Real Pages
-import Dashboard from "./pages/Dashboard";
-import Campaigns from "./pages/Campaigns";
-import CampaignDetail from "./pages/CampaignDetail";
-import Leads from "./pages/Leads";
-import EmailAccounts from "./pages/EmailAccounts";
-import Warmup from "./pages/Warmup";
-import Inbox from "./pages/Inbox";
-import Webhooks from "./pages/Webhooks";
-import Analytics from "./pages/Analytics";
-import Clients from "./pages/Clients";
-import Settings from "./pages/Settings";
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 30_000,
-      retry: 2,
-      refetchOnWindowFocus: true,
-    },
-  },
-});
-
-function RequireKey({ children }: { children: ReactNode }) {
-  const { activeKey } = useApiKey();
-  if (!activeKey) {
-    return <Navigate to="/connect" replace />;
-  }
-  return <>{children}</>;
-}
-
-export default function App() {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <ApiKeyProvider>
-        <BrowserRouter>
-          <Routes>
-            <Route path="/connect" element={<Gate />} />
-            <Route
-              path="/"
-              element={
-                <RequireKey>
-                  <AppLayout />
-                </RequireKey>
-              }
-            >
-              <Route index element={<Dashboard />} />
-              <Route path="campaigns" element={<Campaigns />} />
-              <Route path="campaigns/:id" element={<CampaignDetail />} />
-              <Route path="leads" element={<Leads />} />
-              <Route path="email-accounts" element={<EmailAccounts />} />
-              <Route path="warmup" element={<Warmup />} />
-              <Route path="inbox" element={<Inbox />} />
-              <Route path="webhooks" element={<Webhooks />} />
-              <Route path="analytics" element={<Analytics />} />
-              <Route path="clients" element={<Clients />} />
-              <Route path="settings" element={<Settings />} />
-            </Route>
-          </Routes>
-        </BrowserRouter>
-        <Toaster 
-          position="bottom-right"
-          toastOptions={{
-            style: {
-              background: 'var(--nt-bg-surface-raised)',
-              color: 'var(--nt-text-primary)',
-              border: '1px solid var(--nt-border-accent)'
-            }
-          }} 
-        />
-      </ApiKeyProvider>
-    </QueryClientProvider>
-  );
-}

src//components//AnimatedLogo.test.tsx

@@ -1,16 +0,0 @@
-import { render } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import AnimatedLogo from './AnimatedLogo';
-
-describe('AnimatedLogo', () => {
-  it('renders SVG elements successfully', () => {
-    const { container } = render(<AnimatedLogo className="test-class" />);
-    const svg = container.querySelector('svg');
-    expect(svg).toBeDefined();
-    expect(svg?.classList.contains('test-class')).toBe(true);
-    
-    // Check for gradients and paths
-    expect(container.querySelector('linearGradient#crypto-grad-1')).toBeDefined();
-    expect(container.querySelector('path')).toBeDefined();
-  });
-});

src//components//AnimatedLogo.tsx

@@ -1,69 +0,0 @@
-import { motion } from "motion/react";
-
-export default function AnimatedLogo({ className = "w-8 h-8" }: { className?: string }) {
-  return (
-    <motion.svg
-      className={className}
-      viewBox="0 0 100 100"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      initial={{ opacity: 0, y: 10 }}
-      animate={{ opacity: 1, y: 0 }}
-       transition={{ duration: 0.8, ease: [0.32, 0.72, 0, 1] }}
-    >
-      <defs>
-        <linearGradient id="crypto-grad-1" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stopColor="var(--nt-deep-teal-600)" /> {/* Verdigris 600 */}
-          <stop offset="100%" stopColor="var(--nt-terracotta-600)" /> {/* Kiln Ember 600 */}
-        </linearGradient>
-        <linearGradient id="crypto-grad-2" x1="100%" y1="0%" x2="0%" y2="100%">
-          <stop offset="0%" stopColor="var(--nt-deep-teal-700)" /> {/* Verdigris 700 */}
-          <stop offset="100%" stopColor="var(--nt-terracotta-700)" /> {/* Kiln Ember 700 */}
-        </linearGradient>
-        <filter id="neon-glow" x="-20%" y="-20%" width="140%" height="140%">
-          <feGaussianBlur stdDeviation="4" result="blur" />
-          <feComposite in="SourceGraphic" in2="blur" operator="over" />
-        </filter>
-      </defs>
-
-      {/* Background glowing element */}
-      <motion.polygon
-        points="50,5 90,27.5 90,72.5 50,95 10,72.5 10,27.5"
-        fill="url(#crypto-grad-1)"
-        fillOpacity="0.1"
-        stroke="url(#crypto-grad-2)"
-        strokeWidth="2"
-        filter="url(#neon-glow)"
-        initial={{ scale: 0.8, opacity: 0, rotate: -30 }}
-        animate={{ scale: 1, opacity: 1, rotate: 0 }}
-         transition={{ duration: 1.2, ease: [0.32, 0.72, 0, 1] }}
-      />
-
-      {/* Abstract Sharp 'S' inside */}
-      <motion.path
-        d="M 65 35 L 35 35 L 35 50 L 65 50 L 65 65 L 35 65"
-        stroke="url(#crypto-grad-2)"
-        strokeWidth="10"
-        strokeLinecap="square"
-        strokeLinejoin="miter"
-        initial={{ pathLength: 0 }}
-        animate={{ pathLength: 1 }}
-         transition={{ duration: 1.5, ease: [0.32, 0.72, 0, 1], delay: 0.4 }}
-      />
-
-      {/* Accent bridging line */}
-      <motion.line
-        x1="20"
-        y1="50"
-        x2="80"
-        y2="50"
-        stroke="url(#crypto-grad-1)"
-        strokeWidth="4"
-        filter="url(#neon-glow)"
-        initial={{ scaleX: 0, opacity: 0 }}
-        animate={{ scaleX: 1, opacity: 1 }}
-         transition={{ duration: 1, ease: [0.32, 0.72, 0, 1], delay: 1 }}
-      />
-    </motion.svg>
-  );
-}

src//components//BackgroundElements.tsx

@@ -1,18 +0,0 @@
-import { motion } from 'motion/react';
-
-export default function BackgroundElements() {
-  return (
-    <div className="fixed inset-0 pointer-events-none -z-10 overflow-hidden">
-      <motion.div
-        animate={{ y: [0, 50, 0], opacity: [0.1, 0.3, 0.1] }}
-        transition={{ duration: 10, repeat: Infinity, ease: [0.32, 0.72, 0, 1] }}
-        className="absolute top-10 left-20 w-64 h-64 border border-white/5 rounded-full"
-      />
-      <motion.div
-        animate={{ y: [0, -30, 0], opacity: [0.05, 0.2, 0.05] }}
-        transition={{ duration: 15, repeat: Infinity, ease: [0.32, 0.72, 0, 1] }}
-        className="absolute bottom-20 right-40 w-96 h-96 border border-white/5 rounded-full"
-      />
-    </div>
-  );
-}

src//components//ConfirmModal.tsx

@@ -1,113 +0,0 @@
-import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
-import { Fragment, ReactNode } from "react";
-import { AlertTriangle, X } from "lucide-react";
-
-interface ConfirmModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onConfirm: () => void;
-  title: string;
-  description: string | ReactNode;
-  confirmText?: string;
-  cancelText?: string;
-  isDestructive?: boolean;
-  isLoading?: boolean;
-}
-
-export default function ConfirmModal({
-  isOpen,
-  onClose,
-  onConfirm,
-  title,
-  description,
-  confirmText = "Confirm",
-  cancelText = "Cancel",
-  isDestructive = true,
-  isLoading = false,
-}: ConfirmModalProps) {
-  return (
-    <Transition appear show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-50" onClose={onClose}>
-        <TransitionChild
-          as={Fragment}
-          enter="ease-out duration-200"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-150"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-black/70 backdrop-blur-xs" />
-        </TransitionChild>
-
-        <div className="fixed inset-0 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center">
-            <TransitionChild
-              as={Fragment}
-              enter="ease-out duration-200"
-              enterFrom="opacity-0 scale-95"
-              enterTo="opacity-100 scale-100"
-              leave="ease-in duration-150"
-              leaveFrom="opacity-100 scale-100"
-              leaveTo="opacity-0 scale-95"
-            >
-              <DialogPanel className="w-full max-w-md transform overflow-hidden rounded-xl bg-zinc-900 border border-zinc-800 p-6 text-left align-middle shadow-2xl transition-all">
-                <div className="flex items-start gap-4">
-                  <div
-                    className={`p-3 rounded-full shrink-0 ${
-                      isDestructive ? "bg-rose-500/10 text-rose-400 border border-rose-500/20" : "bg-indigo-500/10 text-indigo-400 border border-indigo-500/20"
-                    }`}
-                  >
-                    <AlertTriangle className="w-6 h-6" />
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <DialogTitle as="h3" className="text-lg font-semibold text-zinc-100">
-                      {title}
-                    </DialogTitle>
-                    <div className="mt-2 text-sm text-zinc-400">
-                      {description}
-                    </div>
-                  </div>
-                  <button
-                    onClick={onClose}
-                    className="text-zinc-500 hover:text-zinc-300 transition-colors p-1 rounded-md"
-                  >
-                    <X className="w-5 h-5" />
-                  </button>
-                </div>
-
-                <div className="mt-6 flex justify-end gap-3">
-                  <button
-                    type="button"
-                    onClick={onClose}
-                    disabled={isLoading}
-                    className="px-4 py-2 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-sm font-medium rounded-lg transition-colors"
-                  >
-                    {cancelText}
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      onConfirm();
-                    }}
-                    disabled={isLoading}
-                    className={`px-4 py-2 text-sm font-medium rounded-lg text-white transition-colors flex items-center gap-2 ${
-                      isDestructive
-                        ? "bg-rose-600 hover:bg-rose-500"
-                        : "bg-indigo-600 hover:bg-indigo-500"
-                    } disabled:opacity-50`}
-                  >
-                    {isLoading && (
-                      <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
-                    )}
-                    {confirmText}
-                  </button>
-                </div>
-              </DialogPanel>
-            </TransitionChild>
-          </div>
-        </div>
-      </Dialog>
-    </Transition>
-  );
-}

src//components//CsvExportButton.test.tsx

@@ -1,11 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import CsvExportButton from './CsvExportButton';
-
-describe('CsvExportButton', () => {
-  it('renders correctly', () => {
-    const data = [{ name: "Alex" }];
-    render(<CsvExportButton data={data} filename="test.csv" />);
-    expect(screen.getByText('Export CSV')).toBeDefined();
-  });
-});

src//components//CsvExportButton.tsx

@@ -1,47 +0,0 @@
-import { Download } from "lucide-react";
-
-interface CsvExportButtonProps {
-  data: any[];
-  filename?: string;
-  className?: string;
-}
-
-export default function CsvExportButton({
-  data,
-  filename = "smartlead-export.csv",
-  className = "px-3 py-1.5 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-xs font-medium rounded-lg transition-colors flex items-center gap-1.5 border border-zinc-700",
-}: CsvExportButtonProps) {
-  const exportCsv = () => {
-    if (!data || data.length === 0) return;
-
-    const headers = Object.keys(data[0]);
-    const rows = data.map((item) =>
-      headers
-        .map((header) => {
-          const val = item[header];
-          if (typeof val === "object") {
-            return `"${JSON.stringify(val).replace(/"/g, '""')}"`;
-          }
-          return `"${String(val ?? "").replace(/"/g, '""')}"`;
-        })
-        .join(",")
-    );
-
-    const csvContent = [headers.join(","), ...rows].join("\n");
-    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.setAttribute("href", url);
-    link.setAttribute("download", filename);
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  };
-
-  return (
-    <button type="button" onClick={exportCsv} className={className}>
-      <Download className="w-3.5 h-3.5" />
-      Export CSV
-    </button>
-  );
-}

src//components//FormDrawer.tsx

@@ -1,78 +0,0 @@
-import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
-import { Fragment, ReactNode } from "react";
-import { X } from "lucide-react";
-
-interface FormDrawerProps {
-  isOpen: boolean;
-  onClose: () => void;
-  title: string;
-  subtitle?: string;
-  children: ReactNode;
-  maxWidth?: string;
-}
-
-export default function FormDrawer({
-  isOpen,
-  onClose,
-  title,
-  subtitle,
-  children,
-  maxWidth = "max-w-xl",
-}: FormDrawerProps) {
-  return (
-    <Transition show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-50" onClose={onClose}>
-        <TransitionChild
-          as={Fragment}
-          enter="ease-in-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in-out duration-300"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-black/70 backdrop-blur-xs transition-opacity" />
-        </TransitionChild>
-
-        <div className="fixed inset-0 overflow-hidden">
-          <div className="absolute inset-0 overflow-hidden">
-            <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
-              <TransitionChild
-                as={Fragment}
-                enter="transform transition ease-in-out duration-300 sm:duration-400"
-                enterFrom="translate-x-full"
-                enterTo="translate-x-0"
-                leave="transform transition ease-in-out duration-300 sm:duration-400"
-                leaveFrom="translate-x-0"
-                leaveTo="translate-x-full"
-              >
-                <DialogPanel className={`pointer-events-auto w-screen ${maxWidth}`}>
-                  <div className="flex h-full flex-col overflow-y-auto bg-zinc-950 border-l border-zinc-800 shadow-2xl">
-                    <div className="px-6 py-5 border-b border-zinc-800 bg-zinc-900/50 flex items-center justify-between sticky top-0 z-10">
-                      <div>
-                        <DialogTitle className="text-lg font-semibold text-zinc-100">
-                          {title}
-                        </DialogTitle>
-                        {subtitle && (
-                          <p className="text-xs text-zinc-400 mt-0.5">{subtitle}</p>
-                        )}
-                      </div>
-                      <button
-                        onClick={onClose}
-                        className="rounded-lg p-2 text-zinc-400 hover:text-zinc-100 hover:bg-zinc-800 transition-colors"
-                      >
-                        <X className="w-5 h-5" />
-                      </button>
-                    </div>
-
-                    <div className="flex-1 px-6 py-6 space-y-6">{children}</div>
-                  </div>
-                </DialogPanel>
-              </TransitionChild>
-            </div>
-          </div>
-        </div>
-      </Dialog>
-    </Transition>
-  );
-}

src//components//GeometricBackground.test.tsx

@@ -1,12 +0,0 @@
-import { render } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import GeometricBackground from './GeometricBackground';
-
-describe('GeometricBackground', () => {
-  it('renders without crashing when mounted', () => {
-    const { container } = render(<GeometricBackground />);
-    // The component uses useEffect to set mounted=true, so it might render null initially.
-    // However, in tests without strict act() wrappers for the initial effect, it might return empty.
-    expect(container).toBeDefined();
-  });
-});

src//components//GeometricBackground.tsx

@@ -1,62 +0,0 @@
-import { motion } from "motion/react";
-import { useEffect, useState } from "react";
-
-export default function GeometricBackground() {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) return null;
-
-  return (
-    <div className="fixed inset-0 z-[-1] overflow-hidden pointer-events-none">
-      {/* Soft overlay gradient */}
-      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-indigo-900/10 via-transparent to-transparent"></div>
-      
-      {/* Floating geometric elements */}
-      <motion.div
-        className="absolute top-[10%] left-[15%] w-64 h-64 rounded-full border border-white/5"
-        animate={{
-          y: [0, -30, 0],
-          x: [0, 20, 0],
-          rotate: [0, 90, 0],
-        }}
-        transition={{
-          duration: 20,
-          repeat: Infinity,
-          ease: [0.32, 0.72, 0, 1],
-        }}
-      />
-      <motion.div
-        className="absolute bottom-[20%] right-[10%] w-96 h-96 rounded-full border border-indigo-500/10"
-        animate={{
-          y: [0, 40, 0],
-          x: [0, -30, 0],
-          scale: [1, 1.1, 1],
-        }}
-        transition={{
-          duration: 25,
-          repeat: Infinity,
-          ease: [0.32, 0.72, 0, 1],
-        }}
-      />
-      <motion.div
-        className="absolute top-[40%] right-[30%] w-32 h-32 rotate-45 border border-sky-500/10"
-        animate={{
-          rotate: [45, 225],
-          y: [0, -50, 0],
-        }}
-        transition={{
-          duration: 30,
-          repeat: Infinity,
-          ease: [0.32, 0.72, 0, 1],
-        }}
-      />
-
-      {/* Grid pattern overlay */}
-      <div className="absolute inset-0 bg-[linear-gradient(rgba(246,248,242,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(246,248,242,0.02)_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_60%_at_50%_50%,var(--nt-espresso-100)_20%,transparent_100%)]"></div>
-    </div>
-  );
-}

src//components//GlassCard.tsx

@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-import { cn } from '../utils/cn';
-
-interface GlassCardProps {
-  children: ReactNode;
-  className?: string;
-}
-
-export default function GlassCard({ children, className }: GlassCardProps) {
-  return (
-    <div className={cn("bg-white/5 border border-white/10 backdrop-blur-md rounded-xl shadow-[0_8px_32px_-8px_rgba(6,10,12,0.65)]", className)}>
-      {children}
-    </div>
-  );
-}

src//components//Logo.tsx

@@ -1,14 +0,0 @@
-import { motion } from 'motion/react';
-
-export default function Logo() {
-  return (
-    <motion.div
-      initial={{ opacity: 0, scale: 0.9 }}
-      animate={{ opacity: 1, scale: 1 }}
-      transition={{ duration: 0.5, ease: [0.32, 0.72, 0, 1] }}
-      className="text-2xl font-bold tracking-tight text-white font-sans"
-    >
-      BRIDGE<span className="text-emerald-400">ModulE</span>
-    </motion.div>
-  );
-}

src//components//RichTextEditor.tsx

@@ -1,152 +0,0 @@
-import { useEditor, EditorContent } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import { Bold, Italic, List, ListOrdered, Code, Undo, Redo, Sparkles } from "lucide-react";
-import { useEffect } from "react";
-import { cn } from "../utils/cn";
-
-interface RichTextEditorProps {
-  content: string;
-  onChange: (html: string) => void;
-  placeholder?: string;
-  variables?: string[];
-}
-
-export default function RichTextEditor({
-  content,
-  onChange,
-  variables = ["first_name", "last_name", "company_name", "website", "location"],
-}: RichTextEditorProps) {
-  const editor = useEditor({
-    extensions: [StarterKit],
-    content,
-    editorProps: {
-      attributes: {
-        class:
-          "prose prose-invert max-w-none focus:outline-none min-h-[160px] p-3 text-sm text-zinc-200 leading-relaxed",
-      },
-    },
-    onUpdate: ({ editor }) => {
-      onChange(editor.getHTML());
-    },
-  });
-
-  useEffect(() => {
-    if (editor && content !== editor.getHTML()) {
-      editor.commands.setContent(content);
-    }
-  }, [content, editor]);
-
-  if (!editor) return null;
-
-  const insertVariable = (variable: string) => {
-    editor.commands.insertContent(`{{${variable}}}`);
-  };
-
-  return (
-    <div className="border border-zinc-800 rounded-xl overflow-hidden bg-zinc-950/80 focus-within:border-indigo-500/80 transition-colors">
-      {/* Toolbar */}
-      <div className="flex flex-wrap items-center justify-between gap-1 p-2 border-b border-zinc-800/80 bg-zinc-900/60">
-        <div className="flex items-center gap-1">
-          <button
-            type="button"
-            onClick={() => editor.chain().focus().toggleBold().run()}
-            className={cn(
-              "p-1.5 rounded-md hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 transition-colors",
-              editor.isActive("bold") ? "bg-zinc-800 text-indigo-400 font-bold" : ""
-            )}
-            title="Bold"
-          >
-            <Bold className="w-4 h-4" />
-          </button>
-          <button
-            type="button"
-            onClick={() => editor.chain().focus().toggleItalic().run()}
-            className={cn(
-              "p-1.5 rounded-md hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 transition-colors",
-              editor.isActive("italic") ? "bg-zinc-800 text-indigo-400" : ""
-            )}
-            title="Italic"
-          >
-            <Italic className="w-4 h-4" />
-          </button>
-          <button
-            type="button"
-            onClick={() => editor.chain().focus().toggleBulletList().run()}
-            className={cn(
-              "p-1.5 rounded-md hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 transition-colors",
-              editor.isActive("bulletList") ? "bg-zinc-800 text-indigo-400" : ""
-            )}
-            title="Bullet List"
-          >
-            <List className="w-4 h-4" />
-          </button>
-          <button
-            type="button"
-            onClick={() => editor.chain().focus().toggleOrderedList().run()}
-            className={cn(
-              "p-1.5 rounded-md hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 transition-colors",
-              editor.isActive("orderedList") ? "bg-zinc-800 text-indigo-400" : ""
-            )}
-            title="Numbered List"
-          >
-            <ListOrdered className="w-4 h-4" />
-          </button>
-          <button
-            type="button"
-            onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-            className={cn(
-              "p-1.5 rounded-md hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 transition-colors",
-              editor.isActive("codeBlock") ? "bg-zinc-800 text-indigo-400" : ""
-            )}
-            title="Code Block"
-          >
-            <Code className="w-4 h-4" />
-          </button>
-        </div>
-
-        <div className="flex items-center gap-1">
-          <button
-            type="button"
-            onClick={() => editor.chain().focus().undo().run()}
-            disabled={!editor.can().undo()}
-            className="p-1.5 rounded-md hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 disabled:opacity-30"
-          >
-            <Undo className="w-4 h-4" />
-          </button>
-          <button
-            type="button"
-            onClick={() => editor.chain().focus().redo().run()}
-            disabled={!editor.can().redo()}
-            className="p-1.5 rounded-md hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 disabled:opacity-30"
-          >
-            <Redo className="w-4 h-4" />
-          </button>
-        </div>
-      </div>
-
-      {/* Variables Bar */}
-      {variables.length > 0 && (
-        <div className="px-3 py-1.5 bg-zinc-900/40 border-b border-zinc-800/60 flex items-center gap-2 overflow-x-auto text-xs">
-          <span className="text-zinc-500 flex items-center gap-1 shrink-0">
-            <Sparkles className="w-3 h-3 text-indigo-400" /> Insert tag:
-          </span>
-          <div className="flex items-center gap-1.5">
-            {variables.map((v) => (
-              <button
-                key={v}
-                type="button"
-                onClick={() => insertVariable(v)}
-                className="px-2 py-0.5 bg-zinc-800/80 hover:bg-indigo-500/20 hover:text-indigo-300 text-zinc-400 rounded text-[11px] font-mono transition-colors border border-zinc-700/60 shrink-0"
-              >
-                &#123;&#123;{v}&#125;&#125;
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Editor Surface */}
-      <EditorContent editor={editor} />
-    </div>
-  );
-}

src//components//Sidebar.tsx

@@ -1,66 +0,0 @@
-import { Link, useLocation } from "react-router-dom";
-import { 
-  LayoutDashboard, 
-  Megaphone, 
-  Users, 
-  Mail, 
-  Flame, 
-  Inbox, 
-  Webhook, 
-  BarChart2, 
-  Building2, 
-  Settings 
-} from "lucide-react";
-import { cn } from "../utils/cn";
-import AnimatedLogo from "./AnimatedLogo";
-import Logo from "./Logo";
-
-const navigation = [
-  { name: "Dashboard", href: "/", icon: LayoutDashboard },
-  { name: "Campaigns", href: "/campaigns", icon: Megaphone },
-  { name: "Leads", href: "/leads", icon: Users },
-  { name: "Email Accounts", href: "/email-accounts", icon: Mail },
-  { name: "Warmup", href: "/warmup", icon: Flame },
-  { name: "Unified Inbox", href: "/inbox", icon: Inbox },
-  { name: "Webhooks", href: "/webhooks", icon: Webhook },
-  { name: "Analytics", href: "/analytics", icon: BarChart2 },
-  { name: "Clients", href: "/clients", icon: Building2 },
-  { name: "Settings", href: "/settings", icon: Settings },
-];
-
-export default function Sidebar({ onClose }: { onClose?: () => void }) {
-  const location = useLocation();
-
-  return (
-    <div className="w-64 border-r border-white/5 bg-zinc-950/80 md:bg-zinc-950/40 backdrop-blur-xl flex flex-col shrink-0 h-full relative z-20 shadow-[4px_0_24px_-4px_rgba(6,10,12,0.65)]">
-      <div className="h-16 flex items-center px-6 border-b border-white/5 shrink-0 gap-3">
-        <AnimatedLogo className="w-7 h-7" />
-        <Logo />
-      </div>
-      <nav className="flex-1 overflow-y-auto py-4 px-3 space-y-1.5">
-        {navigation.map((item) => {
-          const isActive = location.pathname === item.href || (item.href !== "/" && location.pathname.startsWith(item.href));
-          return (
-            <Link
-              key={item.name}
-              to={item.href}
-              onClick={onClose}
-              className={cn(
-                "w-full flex items-center gap-3 px-3 py-2.5 text-[13px] font-medium rounded-lg transition-all duration-300 relative group overflow-hidden",
-                isActive
-                  ? "text-indigo-300 bg-white/5 border border-white/10 shadow-[inset_0_1px_1px_rgba(246,248,242,0.05)]"
-                  : "text-zinc-400 hover:text-zinc-200 hover:bg-white/5 border border-transparent"
-              )}
-            >
-              {isActive && (
-                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-indigo-500 rounded-r-full shadow-[0_0_10px_rgba(37,125,104,0.8)]" />
-              )}
-              <item.icon className={cn("w-4 h-4 transition-transform duration-300 group-hover:scale-110", isActive ? "text-indigo-400 drop-shadow-[0_0_8px_rgba(37,125,104,0.5)]" : "text-zinc-500")} />
-              {item.name}
-            </Link>
-          );
-        })}
-      </nav>
-    </div>
-  );
-}

src//components//StatCard.tsx

@@ -1,149 +0,0 @@
-import { LucideIcon, TrendingUp, TrendingDown, Minus } from "lucide-react";
-import { cn } from "../utils/cn";
-
-interface StatCardProps {
-  title: string;
-  value: string | number;
-  icon: LucideIcon;
-  iconColor?: "indigo" | "emerald" | "amber" | "rose" | "teal" | "blue" | "purple";
-  change?: {
-    value: string;
-    isPositive?: boolean | null;
-    period?: string;
-  };
-  subtitle?: string;
-  progress?: number; // 0 to 100
-  className?: string;
-}
-
-const colorMap = {
-  indigo: {
-    bg: "bg-indigo-500/10",
-    border: "border-indigo-500/20",
-    text: "text-indigo-400",
-    glow: "group-hover:border-indigo-500/40",
-  },
-  emerald: {
-    bg: "bg-emerald-500/10",
-    border: "border-emerald-500/20",
-    text: "text-emerald-400",
-    glow: "group-hover:border-emerald-500/40",
-  },
-  amber: {
-    bg: "bg-amber-500/10",
-    border: "border-amber-500/20",
-    text: "text-amber-400",
-    glow: "group-hover:border-amber-500/40",
-  },
-  rose: {
-    bg: "bg-rose-500/10",
-    border: "border-rose-500/20",
-    text: "text-rose-400",
-    glow: "group-hover:border-rose-500/40",
-  },
-  teal: {
-    bg: "bg-teal-500/10",
-    border: "border-teal-500/20",
-    text: "text-teal-400",
-    glow: "group-hover:border-teal-500/40",
-  },
-  blue: {
-    bg: "bg-blue-500/10",
-    border: "border-blue-500/20",
-    text: "text-blue-400",
-    glow: "group-hover:border-blue-500/40",
-  },
-  purple: {
-    bg: "bg-purple-500/10",
-    border: "border-purple-500/20",
-    text: "text-purple-400",
-    glow: "group-hover:border-purple-500/40",
-  },
-};
-
-export default function StatCard({
-  title,
-  value,
-  icon: Icon,
-  iconColor = "indigo",
-  change,
-  subtitle,
-  progress,
-  className,
-}: StatCardProps) {
-  const c = colorMap[iconColor];
-
-  return (
-    <div
-      className={cn(
-        "group relative bg-white/5 hover:bg-white/10 backdrop-blur-md border border-white/10 rounded-xl p-5 transition-all duration-300 shadow-[0_8px_32px_-8px_rgba(6,10,12,0.65)] overflow-hidden",
-        className
-      )}
-    >
-      <div className="absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent pointer-events-none" />
-      <div className="relative z-10 flex justify-between items-start">
-        <div>
-          <p className="text-xs font-semibold uppercase tracking-wider text-zinc-400 font-sans">
-            {title}
-          </p>
-          <h3 className="text-2xl font-bold text-zinc-100 mt-2 tracking-tight font-mono">
-            {value}
-          </h3>
-          {subtitle && (
-            <p className="text-xs text-zinc-500 mt-1 font-sans">{subtitle}</p>
-          )}
-        </div>
-        <div
-          className={cn(
-            "p-2.5 rounded-xl border transition-transform duration-300 group-hover:scale-110 shadow-[inset_0_1px_1px_rgba(246,248,242,0.1)]",
-            c.bg,
-            c.border
-          )}
-        >
-          <Icon className={cn("w-5 h-5 drop-shadow-[0_0_8px_currentColor]", c.text)} />
-        </div>
-      </div>
-
-      {progress !== undefined && (
-        <div className="relative z-10 mt-4 space-y-1.5">
-          <div className="flex justify-between text-[11px] text-zinc-400 font-sans font-medium">
-            <span>Capacity</span>
-            <span className="font-mono">{Math.round(progress)}%</span>
-          </div>
-          <div className="w-full h-1.5 bg-black/50 border border-white/5 rounded-full overflow-hidden">
-            <div
-              className={cn("h-full rounded-full transition-all duration-500", c.text.replace("text-", "bg-"))}
-              style={{ width: `${Math.min(100, Math.max(0, progress))}%`, boxShadow: '0 0 10px currentColor' }}
-            />
-          </div>
-        </div>
-      )}
-
-      {change && (
-        <div className="relative z-10 mt-3.5 flex items-center text-xs font-medium font-sans">
-          {change.isPositive === true && (
-            <span className="flex items-center text-emerald-400 mr-1.5">
-              <TrendingUp className="w-3.5 h-3.5 mr-0.5" />
-              <span className="font-mono">{change.value}</span>
-            </span>
-          )}
-          {change.isPositive === false && (
-            <span className="flex items-center text-rose-400 mr-1.5">
-              <TrendingDown className="w-3.5 h-3.5 mr-0.5" />
-              <span className="font-mono">{change.value}</span>
-            </span>
-          )}
-          {change.isPositive === null && (
-            <span className="flex items-center text-zinc-400 mr-1.5">
-              <Minus className="w-3.5 h-3.5 mr-0.5" />
-              <span className="font-mono">{change.value}</span>
-            </span>
-          )}
-          <span className="text-zinc-500 font-normal">
-            {change.period || "vs last month"}
-          </span>
-        </div>
-      )}
-    </div>
-  );
-}

src//components//StatusBadge.test.tsx

@@ -1,22 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import StatusBadge from './StatusBadge';
-
-describe('StatusBadge', () => {
-  it('renders ACTIVE status correctly', () => {
-    render(<StatusBadge status="ACTIVE" />);
-    expect(screen.getByText('ACTIVE')).toBeDefined();
-    expect(document.querySelector('.bg-emerald-500\\/10')).toBeDefined();
-  });
-
-  it('renders PAUSED status correctly', () => {
-    render(<StatusBadge status="PAUSED" />);
-    expect(screen.getByText('PAUSED')).toBeDefined();
-    expect(document.querySelector('.bg-amber-500\\/10')).toBeDefined();
-  });
-
-  it('renders unknown status gracefully', () => {
-    render(<StatusBadge status="UNKNOWN_STATE" />);
-    expect(screen.getByText('UNKNOWN STATE')).toBeDefined();
-  });
-});

src//components//StatusBadge.tsx

@@ -1,83 +0,0 @@
-import { ReactNode } from "react";
-import { cn } from "../utils/cn";
-
-interface StatusBadgeProps {
-  status: string;
-  className?: string;
-  size?: "sm" | "md";
-}
-
-export default function StatusBadge({ status, className, size = "md" }: StatusBadgeProps) {
-  const normalized = (status || "").toUpperCase();
-
-  let colorClasses = "bg-zinc-800 text-zinc-300 border-zinc-700";
-  let dotColor = "bg-zinc-400";
-  let pulse = false;
-
-  switch (normalized) {
-    case "ACTIVE":
-    case "CONNECTED":
-    case "EXCELLENT":
-    case "INTERESTED":
-    case "MEETING_BOOKED":
-      colorClasses = "bg-emerald-500/10 text-emerald-400 border-emerald-500/20";
-      dotColor = "bg-emerald-400 shadow-[0_0_8px_rgba(63,156,132,0.6)]";
-      pulse = true;
-      break;
-
-    case "PAUSED":
-    case "GOOD":
-    case "REPLIED":
-    case "RECONNECTING":
-    case "WARMING":
-      colorClasses = "bg-amber-500/10 text-amber-400 border-amber-500/20";
-      dotColor = "bg-amber-400 shadow-[0_0_8px_rgba(194,160,74,0.6)]";
-      break;
-
-    case "STOPPED":
-    case "ERROR":
-    case "POOR":
-    case "BOUNCED":
-    case "NOT_INTERESTED":
-    case "UNSUBSCRIBED":
-    case "DO_NOT_CONTACT":
-      colorClasses = "bg-rose-500/10 text-rose-400 border-rose-500/20";
-      dotColor = "bg-rose-400 shadow-[0_0_8px_rgba(203,117,80,0.6)]";
-      break;
-
-    case "MEETING_DONE":
-    case "COMPLETED":
-      colorClasses = "bg-indigo-500/10 text-indigo-400 border-indigo-500/20";
-      dotColor = "bg-indigo-400";
-      break;
-
-    default:
-      colorClasses = "bg-zinc-800/80 text-zinc-300 border-zinc-700";
-      dotColor = "bg-zinc-400";
-      break;
-  }
-
-  const formatText = (text: string) => {
-    return text.replace(/_/g, " ");
-  };
-
-  return (
-    <span
-      className={cn(
-        "inline-flex items-center gap-1.5 font-medium rounded-full border transition-all",
-        size === "sm" ? "px-2 py-0.5 text-[11px]" : "px-2.5 py-1 text-xs",
-        colorClasses,
-        className
-      )}
-    >
-      <span
-        className={cn(
-          "w-1.5 h-1.5 rounded-full shrink-0",
-          dotColor,
-          pulse && "animate-pulse"
-        )}
-      />
-      <span className="capitalize">{formatText(status)}</span>
-    </span>
-  );
-}

src//components//TopBar.tsx

@@ -1,64 +0,0 @@
-import { KeyRound, CheckCircle2, XCircle, Menu } from "lucide-react";
-import { useApiKey } from "../context/ApiKeyContext";
-import { Link } from "react-router-dom";
-
-export default function TopBar({ onMenuClick }: { onMenuClick?: () => void }) {
-  const { apiKeys, activeKeyId, setActiveKeyId, activeKey } = useApiKey();
-
-  return (
-    <header className="h-16 border-b border-white/5 bg-zinc-950/40 backdrop-blur-xl flex items-center justify-between px-4 md:px-6 shrink-0 relative z-20 shadow-[0_4px_24px_-4px_rgba(6,10,12,0.65)]">
-      <div className="flex items-center gap-4">
-        {onMenuClick && (
-          <button 
-            onClick={onMenuClick}
-            className="p-2 -ml-2 text-zinc-400 hover:text-zinc-200 md:hidden"
-            aria-label="Open menu"
-          >
-            <Menu className="w-5 h-5" />
-          </button>
-        )}
-      </div>
-
-      <div className="flex items-center gap-2 md:gap-4">
-        <div className="flex items-center gap-2 hidden sm:flex">
-          {activeKey ? (
-            <div className="flex items-center gap-1.5 text-[11px] font-medium text-emerald-300 bg-emerald-500/10 border border-emerald-500/20 px-2.5 py-1 rounded-full shadow-[inset_0_1px_1px_rgba(246,248,242,0.05)]">
-              <CheckCircle2 className="w-3.5 h-3.5" />
-              API Connected
-            </div>
-          ) : (
-            <div className="flex items-center gap-1.5 text-[11px] font-medium text-rose-300 bg-rose-500/10 border border-rose-500/20 px-2.5 py-1 rounded-full shadow-[inset_0_1px_1px_rgba(246,248,242,0.05)]">
-              <XCircle className="w-3.5 h-3.5" />
-              API Key Missing
-            </div>
-          )}
-        </div>
-
-        <div className="h-5 w-px bg-white/10" />
-
-        <div className="flex items-center gap-3">
-          <div className="w-6 h-6 rounded-full bg-white/5 border border-white/10 flex items-center justify-center shadow-[inset_0_1px_1px_rgba(246,248,242,0.05)]">
-            <KeyRound className="w-3.5 h-3.5 text-zinc-400" />
-          </div>
-          <select
-            value={activeKeyId || ""}
-            onChange={(e) => setActiveKeyId(e.target.value)}
-            className="bg-white/5 border border-white/10 rounded-md py-1.5 pl-3 pr-8 text-xs text-zinc-200 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 w-32 md:w-48 shadow-[inset_0_1px_1px_rgba(246,248,242,0.05)] transition-all hover:bg-white/10"
-          >
-            <option value="" disabled className="bg-zinc-900">Select API Key...</option>
-            {apiKeys.map((key) => (
-              <option key={key.id} value={key.id} className="bg-zinc-900">
-                {key.name}
-              </option>
-            ))}
-          </select>
-          {apiKeys.length === 0 && (
-            <Link to="/settings" className="text-xs text-indigo-400 hover:text-indigo-300 font-medium">
-              Add Key
-            </Link>
-          )}
-        </div>
-      </div>
-    </header>
-  );
-}

src//context//ApiKeyContext.tsx

@@ -1,93 +0,0 @@
-import { createContext, useContext, useState, useEffect, ReactNode } from "react";
-
-interface ApiKey {
-  id: string;
-  name: string;
-  key: string;
-  createdAt: string;
-}
-
-interface ApiKeyContextType {
-  apiKeys: ApiKey[];
-  activeKeyId: string | null;
-  activeKey: string | null;
-  addApiKey: (name: string, key: string, activate?: boolean) => void;
-  removeApiKey: (id: string) => void;
-  renameApiKey: (id: string, newName: string) => void;
-  setActiveKeyId: (id: string) => void;
-}
-
-const ApiKeyContext = createContext<ApiKeyContextType | undefined>(undefined);
-
-export function ApiKeyProvider({ children }: { children: ReactNode }) {
-  const [apiKeys, setApiKeys] = useState<ApiKey[]>(() => {
-    const saved = localStorage.getItem("smartlead_api_keys");
-    return saved ? JSON.parse(saved) : [];
-  });
-  
-  const [activeKeyId, setActiveKeyIdState] = useState<string | null>(() => {
-    return localStorage.getItem("smartlead_active_key_id");
-  });
-
-  useEffect(() => {
-    localStorage.setItem("smartlead_api_keys", JSON.stringify(apiKeys));
-  }, [apiKeys]);
-
-  useEffect(() => {
-    if (activeKeyId) {
-      localStorage.setItem("smartlead_active_key_id", activeKeyId);
-    } else {
-      localStorage.removeItem("smartlead_active_key_id");
-    }
-  }, [activeKeyId]);
-
-  const addApiKey = (name: string, key: string, activate?: boolean) => {
-    const newKey: ApiKey = {
-      id: Math.random().toString(36).substring(7),
-      name,
-      key,
-      createdAt: new Date().toISOString()
-    };
-    setApiKeys((prev) => [...prev, newKey]);
-    if (!activeKeyId || activate) {
-      setActiveKeyIdState(newKey.id);
-    }
-  };
-
-  const removeApiKey = (id: string) => {
-    setApiKeys((prev) => prev.filter((k) => k.id !== id));
-    if (activeKeyId === id) {
-      setActiveKeyIdState(null);
-    }
-  };
-
-  const renameApiKey = (id: string, newName: string) => {
-    setApiKeys((prev) => prev.map((k) => k.id === id ? { ...k, name: newName } : k));
-  };
-
-  const activeKey = apiKeys.find((k) => k.id === activeKeyId)?.key || null;
-
-  return (
-    <ApiKeyContext.Provider
-      value={{
-        apiKeys,
-        activeKeyId,
-        activeKey,
-        addApiKey,
-        removeApiKey,
-        renameApiKey,
-        setActiveKeyId: setActiveKeyIdState,
-      }}
-    >
-      {children}
-    </ApiKeyContext.Provider>
-  );
-}
-
-export function useApiKey() {
-  const context = useContext(ApiKeyContext);
-  if (context === undefined) {
-    throw new Error("useApiKey must be used within an ApiKeyProvider");
-  }
-  return context;
-}

src//index.css

@@ -1,522 +0,0 @@
-@import "tailwindcss";
-
-/*
- * Verdigris & Ember color tokens
- * Deep Ink, Verdigris, Molten Brass, Porcelain, Kiln Ember
- */
-:root {
-  /* Deep Ink — primary dark base */
-  --nt-deep-ink: #2b434b;
-  --nt-deep-ink-100: #060a0c;
-  --nt-deep-ink-200: #0c1518;
-  --nt-deep-ink-300: #142126;
-  --nt-deep-ink-400: #1e3036;
-  --nt-deep-ink-500: #2b434b;
-  --nt-deep-ink-600: #47646b;
-  --nt-deep-ink-700: #6f8a8e;
-  --nt-deep-ink-800: #9db4b4;
-  --nt-deep-ink-900: #cfdedd;
-
-  /* Verdigris — primary interactive accent */
-  --nt-verdigris: #257d68;
-  --nt-verdigris-100: #05130e;
-  --nt-verdigris-200: #0c2a20;
-  --nt-verdigris-300: #124433;
-  --nt-verdigris-400: #1a5f47;
-  --nt-verdigris-500: #257d68;
-  --nt-verdigris-600: #3f9c84;
-  --nt-verdigris-700: #6fbca4;
-  --nt-verdigris-800: #a2d8c5;
-  --nt-verdigris-900: #d4efe4;
-
-  /* Molten Brass — warm secondary accent */
-  --nt-molten-brass: #a8842c;
-  --nt-molten-brass-100: #171104;
-  --nt-molten-brass-200: #322609;
-  --nt-molten-brass-300: #523f10;
-  --nt-molten-brass-400: #745a19;
-  --nt-molten-brass-500: #a8842c;
-  --nt-molten-brass-600: #c2a04a;
-  --nt-molten-brass-700: #d8bc72;
-  --nt-molten-brass-800: #ecd8a4;
-  --nt-molten-brass-900: #f8eecb;
-
-  /* Porcelain — cool neutral */
-  --nt-porcelain: #b4bfae;
-  --nt-porcelain-100: #1e231e;
-  --nt-porcelain-200: #3d463d;
-  --nt-porcelain-300: #616c61;
-  --nt-porcelain-400: #8a968a;
-  --nt-porcelain-500: #b4bfae;
-  --nt-porcelain-600: #c9d2c3;
-  --nt-porcelain-700: #dde3d8;
-  --nt-porcelain-800: #ecf0e8;
-  --nt-porcelain-900: #f6f8f2;
-
-  /* Kiln Ember — heat / danger accent */
-  --nt-kiln-ember: #b25731;
-  --nt-kiln-ember-100: #200e07;
-  --nt-kiln-ember-200: #421d0f;
-  --nt-kiln-ember-300: #662e18;
-  --nt-kiln-ember-400: #8b4123;
-  --nt-kiln-ember-500: #b25731;
-  --nt-kiln-ember-600: #cb7550;
-  --nt-kiln-ember-700: #dd9a78;
-  --nt-kiln-ember-800: #ecc2ab;
-  --nt-kiln-ember-900: #f8e5d9;
-
-  /* Compatibility primitive aliases retained for existing color consumers. */
-  --nt-espresso: var(--nt-deep-ink);
-  --nt-espresso-100: var(--nt-deep-ink-100);
-  --nt-espresso-200: var(--nt-deep-ink-200);
-  --nt-espresso-300: var(--nt-deep-ink-300);
-  --nt-espresso-400: var(--nt-deep-ink-400);
-  --nt-espresso-500: var(--nt-deep-ink-500);
-  --nt-espresso-600: var(--nt-deep-ink-600);
-  --nt-espresso-700: var(--nt-deep-ink-700);
-  --nt-espresso-800: var(--nt-deep-ink-800);
-  --nt-espresso-900: var(--nt-deep-ink-900);
-
-  --nt-deep-teal: var(--nt-verdigris);
-  --nt-deep-teal-100: var(--nt-verdigris-100);
-  --nt-deep-teal-200: var(--nt-verdigris-200);
-  --nt-deep-teal-300: var(--nt-verdigris-300);
-  --nt-deep-teal-400: var(--nt-verdigris-400);
-  --nt-deep-teal-500: var(--nt-verdigris-500);
-  --nt-deep-teal-600: var(--nt-verdigris-600);
-  --nt-deep-teal-700: var(--nt-verdigris-700);
-  --nt-deep-teal-800: var(--nt-verdigris-800);
-  --nt-deep-teal-900: var(--nt-verdigris-900);
-
-  --nt-warm-sand: var(--nt-porcelain);
-  --nt-warm-sand-100: var(--nt-porcelain-100);
-  --nt-warm-sand-200: var(--nt-porcelain-200);
-  --nt-warm-sand-300: var(--nt-porcelain-300);
-  --nt-warm-sand-400: var(--nt-porcelain-400);
-  --nt-warm-sand-500: var(--nt-porcelain-500);
-  --nt-warm-sand-600: var(--nt-porcelain-600);
-  --nt-warm-sand-700: var(--nt-porcelain-700);
-  --nt-warm-sand-800: var(--nt-porcelain-800);
-  --nt-warm-sand-900: var(--nt-porcelain-900);
-
-  --nt-terracotta: var(--nt-kiln-ember);
-  --nt-terracotta-100: var(--nt-kiln-ember-100);
-  --nt-terracotta-200: var(--nt-kiln-ember-200);
-  --nt-terracotta-300: var(--nt-kiln-ember-300);
-  --nt-terracotta-400: var(--nt-kiln-ember-400);
-  --nt-terracotta-500: var(--nt-kiln-ember-500);
-  --nt-terracotta-600: var(--nt-kiln-ember-600);
-  --nt-terracotta-700: var(--nt-kiln-ember-700);
-  --nt-terracotta-800: var(--nt-kiln-ember-800);
-  --nt-terracotta-900: var(--nt-kiln-ember-900);
-
-  --nt-light-peach: var(--nt-porcelain);
-  --nt-light-peach-100: var(--nt-porcelain-100);
-  --nt-light-peach-200: var(--nt-porcelain-200);
-  --nt-light-peach-300: var(--nt-porcelain-300);
-  --nt-light-peach-400: var(--nt-porcelain-400);
-  --nt-light-peach-500: var(--nt-porcelain-500);
-  --nt-light-peach-600: var(--nt-porcelain-600);
-  --nt-light-peach-700: var(--nt-porcelain-700);
-  --nt-light-peach-800: var(--nt-porcelain-800);
-  --nt-light-peach-900: var(--nt-porcelain-900);
-
-  /* Semantic surfaces */
-  --nt-bg-root: var(--nt-deep-ink-200);
-  --nt-bg-app: var(--nt-deep-ink-100);
-  --nt-bg-surface: var(--nt-deep-ink-300);
-  --nt-bg-surface-raised: var(--nt-deep-ink-400);
-  --nt-bg-sunken: var(--nt-deep-ink-200);
-  --nt-bg-overlay: rgba(6, 10, 12, 0.80);
-  --nt-bg-secondary: var(--nt-verdigris-200);
-  --nt-bg-inverse: var(--nt-porcelain-800);
-
-  /* Semantic text */
-  --nt-text-primary: var(--nt-porcelain-800);
-  --nt-text-body: var(--nt-porcelain-600);
-  --nt-text-muted: var(--nt-porcelain-400);
-  --nt-text-subtle: var(--nt-porcelain-400);
-  --nt-text-inverse: var(--nt-deep-ink-100);
-  --nt-text-link: var(--nt-verdigris-600);
-  --nt-text-link-hover: var(--nt-verdigris-700);
-  --nt-text-link-visited: var(--nt-verdigris-500);
-  --nt-text-link-active: var(--nt-kiln-ember-500);
-  --nt-text-on-accent: var(--nt-porcelain-900);
-
-  /* Semantic borders */
-  --nt-border-subtle: var(--nt-deep-ink-400);
-  --nt-border-default: var(--nt-deep-ink-600);
-  --nt-border-strong: var(--nt-deep-ink-700);
-  --nt-border-accent: var(--nt-verdigris-600);
-
-  /* Semantic interactive colors */
-  --nt-accent: var(--nt-verdigris-600);
-  --nt-accent-hover: var(--nt-verdigris-700);
-  --nt-accent-active: var(--nt-verdigris-500);
-  --nt-accent-subtle: var(--nt-verdigris-200);
-  --nt-focus-ring: var(--nt-verdigris-600);
-  --nt-focus-ring-offset: var(--nt-deep-ink-200);
-  --nt-selection-bg: var(--nt-verdigris-500);
-  --nt-selection-fg: var(--nt-porcelain-800);
-
-  /* Semantic buttons */
-  --nt-btn-primary-bg: var(--nt-verdigris-600);
-  --nt-btn-primary-fg: var(--nt-porcelain-900);
-  --nt-btn-primary-hover: var(--nt-verdigris-700);
-  --nt-btn-primary-active: var(--nt-verdigris-500);
-  --nt-btn-secondary-bg: var(--nt-deep-ink-400);
-  --nt-btn-secondary-fg: var(--nt-porcelain-600);
-  --nt-btn-ghost-fg: var(--nt-verdigris-600);
-  --nt-btn-danger-bg: var(--nt-kiln-ember-500);
-  --nt-btn-danger-fg: var(--nt-porcelain-900);
-  --nt-btn-disabled-bg: var(--nt-deep-ink-300);
-  --nt-btn-disabled-fg: var(--nt-porcelain-400);
-
-  /* Semantic statuses */
-  --nt-info: var(--nt-verdigris-600);
-  --nt-success: var(--nt-verdigris-600);
-  --nt-warning: var(--nt-molten-brass-600);
-  --nt-danger: var(--nt-kiln-ember-600);
-
-  /* Elevation / glow colors */
-  --nt-shadow-color: var(--nt-deep-ink-100);
-  --nt-glow-primary: var(--nt-verdigris-600);
-  --nt-glow-warm: var(--nt-molten-brass-500);
-
-  /* Protocol aliases */
-  --bg-canvas: var(--nt-bg-root);
-  --bg-surface: var(--nt-bg-surface);
-  --bg-sunken: var(--nt-bg-sunken);
-  --bg-deep: var(--nt-bg-app);
-  --text-primary: var(--nt-text-primary);
-  --text-secondary: var(--nt-text-body);
-  --text-muted: var(--nt-text-muted);
-  --accent-primary: var(--nt-accent);
-  --accent-hover: var(--nt-accent-hover);
-  --accent-warm: var(--nt-molten-brass-500);
-  --border-default: var(--nt-border-default);
-  --border-focus: var(--nt-focus-ring);
-  --shadow-color: rgba(6, 10, 12, 0.50);
-}
-
-@theme inline {
-  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
-  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
-
-  /* Existing utility names inherit the Verdigris & Ember source of truth. */
-  --color-black: var(--nt-deep-ink-100);
-  --color-white: var(--nt-porcelain-900);
-  --color-zinc-950: var(--nt-bg-app);
-  --color-zinc-900: var(--nt-bg-surface);
-  --color-zinc-800: var(--nt-bg-surface-raised);
-  --color-zinc-700: var(--nt-deep-ink-400);
-  --color-zinc-600: var(--nt-text-muted);
-  --color-zinc-500: var(--nt-text-muted);
-  --color-zinc-400: var(--nt-text-muted);
-  --color-zinc-300: var(--nt-text-body);
-  --color-zinc-200: var(--nt-text-body);
-  --color-zinc-100: var(--nt-text-primary);
-
-  --color-indigo-950: var(--nt-verdigris-200);
-  --color-indigo-900: var(--nt-verdigris-200);
-  --color-indigo-800: var(--nt-verdigris-300);
-  --color-indigo-700: var(--nt-verdigris-700);
-  --color-indigo-600: var(--nt-btn-primary-bg);
-  --color-indigo-500: var(--nt-btn-primary-hover);
-  --color-indigo-400: var(--nt-text-link);
-  --color-indigo-300: var(--nt-text-link-hover);
-  --color-indigo-200: var(--nt-verdigris-900);
-
-  --color-emerald-900: var(--nt-verdigris-200);
-  --color-emerald-800: var(--nt-verdigris-300);
-  --color-emerald-700: var(--nt-success);
-  --color-emerald-600: var(--nt-verdigris-500);
-  --color-emerald-500: var(--nt-verdigris-300);
-  --color-emerald-400: var(--nt-verdigris-600);
-  --color-emerald-300: var(--nt-verdigris-900);
-  --color-emerald-200: var(--nt-verdigris-900);
-
-  --color-teal-900: var(--nt-verdigris-900);
-  --color-teal-800: var(--nt-verdigris-800);
-  --color-teal-700: var(--nt-verdigris-600);
-  --color-teal-600: var(--nt-verdigris-600);
-  --color-teal-500: var(--nt-verdigris-300);
-  --color-teal-400: var(--nt-verdigris-600);
-  --color-teal-300: var(--nt-verdigris-900);
-
-  --color-cyan-900: var(--nt-verdigris-900);
-  --color-cyan-800: var(--nt-verdigris-800);
-  --color-cyan-700: var(--nt-verdigris-700);
-  --color-cyan-600: var(--nt-verdigris-600);
-  --color-cyan-500: var(--nt-verdigris-400);
-
-  --color-blue-900: var(--nt-verdigris-300);
-  --color-blue-800: var(--nt-verdigris-600);
-  --color-blue-700: var(--nt-verdigris-600);
-  --color-blue-600: var(--nt-verdigris-600);
-  --color-blue-500: var(--nt-verdigris-600);
-  --color-blue-400: var(--nt-verdigris-700);
-  --color-blue-300: var(--nt-verdigris-900);
-
-  --color-sky-900: var(--nt-verdigris-300);
-  --color-sky-800: var(--nt-verdigris-600);
-  --color-sky-700: var(--nt-verdigris-600);
-  --color-sky-600: var(--nt-verdigris-600);
-  --color-sky-500: var(--nt-verdigris-700);
-  --color-sky-400: var(--nt-verdigris-900);
-
-  --color-purple-900: var(--nt-kiln-ember-200);
-  --color-purple-800: var(--nt-kiln-ember-300);
-  --color-purple-700: var(--nt-kiln-ember-400);
-  --color-purple-600: var(--nt-kiln-ember-300);
-  --color-purple-500: var(--nt-kiln-ember-500);
-  --color-purple-400: var(--nt-kiln-ember-700);
-  --color-purple-300: var(--nt-kiln-ember-800);
-  --color-purple-200: var(--nt-kiln-ember-900);
-
-  --color-amber-900: var(--nt-molten-brass-200);
-  --color-amber-800: var(--nt-molten-brass-300);
-  --color-amber-700: var(--nt-molten-brass-500);
-  --color-amber-600: var(--nt-molten-brass-500);
-  --color-amber-500: var(--nt-molten-brass-200);
-  --color-amber-400: var(--nt-molten-brass-600);
-  --color-amber-300: var(--nt-molten-brass-800);
-
-  --color-rose-900: var(--nt-kiln-ember-200);
-  --color-rose-800: var(--nt-kiln-ember-300);
-  --color-rose-700: var(--nt-kiln-ember-400);
-  --color-rose-600: var(--nt-btn-danger-bg);
-  --color-rose-500: var(--nt-kiln-ember-400);
-  --color-rose-400: var(--nt-kiln-ember-600);
-  --color-rose-300: var(--nt-kiln-ember-700);
-}
-
-body {
-  font-family: var(--font-sans);
-  background:
-    radial-gradient(ellipse at 82% -12%, color-mix(in srgb, var(--nt-verdigris-600) 18%, transparent), transparent 34%),
-    radial-gradient(ellipse at 8% 112%, color-mix(in srgb, var(--nt-kiln-ember) 8%, transparent), transparent 42%),
-    linear-gradient(180deg, var(--nt-bg-root) 0%, var(--nt-bg-app) 100%);
-  background-attachment: fixed;
-  color: var(--nt-text-primary);
-  min-height: 100vh;
-  accent-color: var(--nt-accent);
-  caret-color: var(--nt-text-primary);
-}
-
-html {
-  background-color: var(--nt-bg-root);
-}
-
-/* Role-specific corrections for utility names reused by borders and controls. */
-[class~="border-zinc-800"] {
-  border-color: var(--nt-border-subtle);
-}
-
-[class~="border-zinc-700"] {
-  border-color: var(--nt-border-strong);
-}
-
-[class~="border-zinc-800\/80"] {
-  border-color: color-mix(in srgb, var(--nt-border-subtle) 80%, transparent);
-}
-
-[class~="border-zinc-800\/60"] {
-  border-color: color-mix(in srgb, var(--nt-border-subtle) 60%, transparent);
-}
-
-[class~="border-indigo-500"]:focus,
-[class~="focus:border-indigo-500"]:focus {
-  border-color: var(--nt-focus-ring);
-}
-
-[class~="focus:ring-indigo-500"]:focus {
-  --tw-ring-color: var(--nt-focus-ring);
-}
-
-:focus-visible {
-  outline-color: var(--nt-focus-ring);
-}
-
-:disabled {
-  color: var(--nt-btn-disabled-fg);
-  background-color: var(--nt-btn-disabled-bg);
-  border-color: var(--nt-border-subtle);
-}
-
-button[class~="bg-zinc-800"][class~="text-zinc-200"],
-button[class~="bg-zinc-800"][class~="text-zinc-300"] {
-  color: var(--nt-btn-secondary-fg);
-}
-
-a:visited {
-  color: var(--nt-text-link-visited);
-}
-
-a:active {
-  color: var(--nt-text-link-active);
-}
-
-* {
-  scrollbar-color: var(--nt-deep-ink-600) var(--nt-deep-ink-200);
-}
-
-::selection {
-  background: var(--nt-selection-bg);
-  color: var(--nt-selection-fg);
-}
-
-/* System-wide polish: hierarchy, data legibility, depth, and states. */
-html {
-  scroll-behavior: smooth;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  text-wrap: balance;
-}
-
-p {
-  text-wrap: pretty;
-}
-
-.font-mono {
-  font-variant-numeric: tabular-nums;
-}
-
-.lucide {
-  stroke-width: 1.5;
-  filter: drop-shadow(1px 1px 0 rgba(6, 10, 12, 0.7)) drop-shadow(0 4px 8px rgba(6, 10, 12, 0.35));
-}
-
-button,
-[role="button"],
-select,
-input,
-textarea {
-  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
-  transition-duration: 180ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-button:not(:disabled):active,
-[role="button"]:not([aria-disabled="true"]):active {
-  transform: translateY(1px) scale(0.985);
-}
-
-*:focus-visible {
-  outline: 2px solid var(--nt-focus-ring) !important;
-  outline-offset: 2px !important;
-}
-
-[class~="bg-white\/5"] {
-  background-color: color-mix(in srgb, var(--nt-deep-ink-300) 84%, transparent);
-  border-color: color-mix(in srgb, var(--nt-deep-ink-700) 38%, transparent);
-  box-shadow: 0 14px 36px -24px rgba(6, 10, 12, 0.9), inset 0 1px 0 rgba(246, 248, 242, 0.06);
-}
-
-[class~="bg-white\/10"] {
-  background-color: color-mix(in srgb, var(--nt-deep-ink-400) 88%, transparent);
-}
-
-[class~="bg-black\/40"] {
-  background-color: color-mix(in srgb, var(--nt-deep-ink-100) 78%, transparent);
-}
-
-[class~="shadow"],
-[class~="shadow-sm"],
-[class~="shadow-md"],
-[class~="shadow-lg"],
-[class~="shadow-xl"],
-[class~="shadow-2xl"] {
-  --tw-shadow-color: rgba(6, 10, 12, 0.5);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  html {
-    scroll-behavior: auto;
-  }
-
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-/* Fixed film grain keeps the glass surfaces tactile without repainting scroll content. */
-body::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  pointer-events: none;
-  opacity: 0.045;
-  background-image: radial-gradient(rgba(246, 248, 242, 0.8) 0.5px, transparent 0.5px);
-  background-size: 4px 4px;
-  mix-blend-mode: soft-light;
-}
-
-/* Spring-like easing replaces the browser's default mechanical feel. */
-[class~="transition-all"],
-[class~="transition-colors"],
-[class~="transition-transform"],
-[class~="ease-in-out"],
-[class~="ease-out"],
-[class~="ease-in"],
-[class~="linear"] {
-  transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
-}
-
-[class~="animate-pulse"],
-[class~="animate-ping"],
-[class~="animate-spin"] {
-  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
-}
-
-button[class~="bg-indigo-600"],
-a[class~="bg-indigo-600"] {
-  border-radius: 9999px;
-  box-shadow: 0 12px 28px -18px rgba(63, 156, 132, 0.75);
-}
-
-button[class~="bg-indigo-600"]:hover,
-a[class~="bg-indigo-600"]:hover {
-  box-shadow: 0 16px 34px -18px rgba(63, 156, 132, 0.95);
-}
-
-.command-signal-ribbon {
-  background-image:
-    radial-gradient(circle at 92% 50%, color-mix(in srgb, var(--nt-molten-brass) 22%, transparent), transparent 28%),
-    radial-gradient(circle at 4% 50%, color-mix(in srgb, var(--nt-verdigris-600) 20%, transparent), transparent 32%),
-    linear-gradient(90deg, color-mix(in srgb, var(--nt-deep-ink-300) 86%, transparent), color-mix(in srgb, var(--nt-deep-ink-400) 68%, transparent));
-}
-
-.page-shell > * {
-  animation: command-enter 720ms cubic-bezier(0.32, 0.72, 0, 1) both;
-}
-
-@keyframes command-enter {
-  from {
-    opacity: 0;
-    transform: translateY(18px);
-    filter: blur(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-    filter: blur(0);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .page-shell > * {
-    animation: none !important;
-  }
-}

src//layouts//AppLayout.tsx

@@ -1,37 +0,0 @@
-import { Outlet } from "react-router-dom";
-import { useState } from "react";
-import Sidebar from "../components/Sidebar";
-import TopBar from "../components/TopBar";
-import GeometricBackground from "../components/GeometricBackground";
-import BackgroundElements from "../components/BackgroundElements";
-
-export default function AppLayout() {
-  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-
-  return (
-    <div className="flex h-screen bg-transparent text-zinc-100 overflow-hidden relative">
-      <GeometricBackground />
-      <BackgroundElements />
-      
-      {/* Mobile overlay */}
-      {isSidebarOpen && (
-        <div 
-          className="fixed inset-0 bg-black/60 z-30 md:hidden backdrop-blur-sm"
-          onClick={() => setIsSidebarOpen(false)}
-        />
-      )}
-      
-      {/* Sidebar with mobile slide transition */}
-      <div className={`fixed inset-y-0 left-0 z-40 transform transition-transform duration-300 ease-in-out md:relative md:translate-x-0 ${isSidebarOpen ? "translate-x-0" : "-translate-x-full"}`}>
-        <Sidebar onClose={() => setIsSidebarOpen(false)} />
-      </div>
-
-      <div className="flex flex-col flex-1 min-w-0 overflow-hidden w-full">
-        <TopBar onMenuClick={() => setIsSidebarOpen(true)} />
-        <main className="page-shell flex-1 overflow-y-auto bg-transparent relative z-10 w-full p-2 md:p-0">
-          <Outlet />
-        </main>
-      </div>
-    </div>
-  );
-}

src//lib//aiService.ts

@@ -1,45 +0,0 @@
-import axios from 'axios';
-
-const OPENROUTER_API_URL = 'https://openrouter.ai/api/v1/chat/completions';
-
-const TARGET_MODELS = [
-  'mistralai/mistral-small',
-  'mistralai/mistral-medium',
-  'mistralai/mistral-nemo' // fallback free-tier compatible model
-];
-
-let currentModelIndex = 0;
-
-export async function getAiCompletion(prompt: string) {
-  let attempts = 0;
-  
-  while (attempts < TARGET_MODELS.length) {
-    const model = TARGET_MODELS[currentModelIndex];
-    try {
-      const response = await axios.post(
-        OPENROUTER_API_URL,
-        {
-          model: model,
-          messages: [{ role: 'user', content: prompt }],
-        },
-        {
-          headers: {
-            'Authorization': `Bearer ${process.env.OPENROUTER_API_KEY}`,
-            'HTTP-Referer': process.env.APP_URL || 'http://localhost:3000',
-            'X-Title': 'BRIDGEModulE Dashboard',
-          },
-        }
-      );
-      
-      // If successful, we keep this model as the active one for next time
-      return response.data.choices[0].message.content;
-    } catch (error: any) {
-      console.error(`Error with model ${model}:`, error?.response?.data || error.message);
-      attempts++;
-      // Rotate to the next model for the next attempt
-      currentModelIndex = (currentModelIndex + 1) % TARGET_MODELS.length;
-    }
-  }
-  
-  throw new Error('All OpenRouter Mistral models failed. Please check your API key and quotas.');
-}

src//lib//apiClient.ts

@@ -1,25 +0,0 @@
-import axios from "axios";
-
-export const apiClient = axios.create({
-  baseURL: "/api",
-});
-
-apiClient.interceptors.request.use((config) => {
-  // Read keys from localStorage to inject into request
-  const keysStr = localStorage.getItem("smartlead_api_keys");
-  const activeId = localStorage.getItem("smartlead_active_key_id");
-  
-  if (keysStr && activeId) {
-    try {
-      const keys = JSON.parse(keysStr);
-      const activeKey = keys.find((k: any) => k.id === activeId)?.key;
-      if (activeKey) {
-        config.headers["x-api-key"] = activeKey;
-      }
-    } catch (e) {
-      console.error("Failed to parse API keys", e);
-    }
-  }
-  
-  return config;
-});

src//lib//supabaseClient.ts

@@ -1,27 +0,0 @@
-import { createClient } from '@supabase/supabase-js';
-
-const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
-const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
-
-export const supabase = supabaseUrl && supabaseAnonKey
-  ? createClient(supabaseUrl, supabaseAnonKey)
-  : null;
-
-export const isSupabaseConfigured = () => {
-  return !!supabase;
-};
-
-/** Project ref derived from VITE_SUPABASE_URL (for status text + links). */
-export const supabaseProjectRef = (): string => {
-  const url = import.meta.env.VITE_SUPABASE_URL as string | undefined;
-  const m = url?.match(/^https:\/\/([a-z0-9-]+)\.supabase\.co/i);
-  return m ? m[1] : "unconfigured";
-};
-
-/** Deep link to the configured project (or the dashboard when unset). */
-export const supabaseDashboardUrl = (): string => {
-  const ref = supabaseProjectRef();
-  return ref === "unconfigured"
-    ? "https://supabase.com/dashboard"
-    : `https://supabase.com/dashboard/project/${ref}`;
-};

src//main.tsx

@@ -1,10 +0,0 @@
-import {StrictMode} from 'react';
-import {createRoot} from 'react-dom/client';
-import App from './App.tsx';
-import './index.css';
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-);

src//pages//Analytics.test.tsx

@@ -1,83 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import Analytics from './Analytics';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { apiClient } from '../lib/apiClient';
-
-// Mock recharts to avoid rendering complex SVG elements in JSDOM
-vi.mock('recharts', () => ({
-  ResponsiveContainer: ({ children }: any) => <div>{children}</div>,
-  LineChart: () => <div>LineChart</div>,
-  BarChart: () => <div>BarChart</div>,
-  Line: () => <div />,
-  Bar: () => <div />,
-  XAxis: () => <div />,
-  YAxis: () => <div />,
-  CartesianGrid: () => <div />,
-  Tooltip: () => <div />,
-  Legend: () => <div />
-}));
-
-vi.mock('../lib/apiClient', () => ({
-  apiClient: {
-    get: vi.fn()
-  }
-}));
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
-    },
-  },
-});
-
-describe('Analytics Page', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('renders loading states initially', () => {
-    (apiClient.get as any).mockImplementation(() => new Promise(() => {}));
-    
-    render(
-      <QueryClientProvider client={queryClient}>
-        <Analytics />
-      </QueryClientProvider>
-    );
-    
-    expect(screen.getByText(/Outbound Analytics & Intelligence/i)).toBeTruthy();
-  });
-
-  it('renders correctly with empty data', async () => {
-    (apiClient.get as any).mockResolvedValue({ data: [] });
-
-    render(
-      <QueryClientProvider client={queryClient}>
-        <Analytics />
-      </QueryClientProvider>
-    );
-
-    await waitFor(() => {
-      // Ensure the chart wrappers rendered
-      expect(screen.getByText(/LineChart/i)).toBeTruthy();
-      expect(screen.getByText(/BarChart/i)).toBeTruthy();
-    });
-  });
-
-  it('handles network error state gracefully', async () => {
-    (apiClient.get as any).mockRejectedValue(new Error('Network error'));
-
-    render(
-      <QueryClientProvider client={queryClient}>
-        <Analytics />
-      </QueryClientProvider>
-    );
-
-    // Should still render headers and fallback data
-    await waitFor(() => {
-      expect(screen.getByText(/Outbound Analytics & Intelligence/i)).toBeTruthy();
-      expect(screen.getByText(/LineChart/i)).toBeTruthy(); // Falls back to static data currently
-    });
-  });
-});

src//pages//Analytics.tsx

@@ -1,247 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { apiClient } from "../lib/apiClient";
-import { 
-  BarChart2, 
-  TrendingUp, 
-  Download, 
-  Calendar, 
-  Mail, 
-  Inbox, 
-  Flame, 
-  ShieldCheck, 
-  Percent, 
-  ArrowUpRight 
-} from "lucide-react";
-import { 
-  ResponsiveContainer, 
-  LineChart, 
-  Line, 
-  BarChart, 
-  Bar, 
-  XAxis, 
-  YAxis, 
-  CartesianGrid, 
-  Tooltip, 
-  Legend 
-} from "recharts";
-import { useState } from "react";
-import StatCard from "../components/StatCard";
-import CsvExportButton from "../components/CsvExportButton";
-
-const timelineData = [
-  { date: "Oct 1", sent: 820, opens: 530, replies: 48, bounces: 4 },
-  { date: "Oct 5", sent: 1140, opens: 760, replies: 72, bounces: 8 },
-  { date: "Oct 10", sent: 1650, opens: 1120, replies: 98, bounces: 11 },
-  { date: "Oct 15", sent: 2100, opens: 1450, replies: 134, bounces: 15 },
-  { date: "Oct 20", sent: 2800, opens: 1980, replies: 182, bounces: 21 },
-  { date: "Oct 25", sent: 3400, opens: 2450, replies: 226, bounces: 28 },
-  { date: "Oct 30", sent: 4120, opens: 2980, replies: 280, bounces: 34 },
-];
-
-const campaignComparisonData = [
-  { name: "SaaS Enterprise VPs", sent: 4200, opens: 2600, replies: 240 },
-  { name: "Series A Tech Founders", sent: 3100, opens: 2100, replies: 195 },
-  { name: "Agency Owners Q4", sent: 2400, opens: 1400, replies: 120 },
-  { name: "E-commerce Directors", sent: 1800, opens: 980, replies: 84 },
-  { name: "RevOps Decision Makers", sent: 1200, opens: 720, replies: 65 },
-];
-
-export default function Analytics() {
-  const [dateRange, setDateRange] = useState("30d");
-
-  const { data: analytics } = useQuery({
-    queryKey: ["analytics-campaigns"],
-    queryFn: async () => {
-      const res = await apiClient.get("/analytics/campaigns");
-      return res.data;
-    },
-  });
-
-  const { data: emailAccounts = [] } = useQuery({
-    queryKey: ["email-accounts"],
-    queryFn: async () => {
-      const res = await apiClient.get("/email-accounts");
-      return res.data;
-    },
-  });
-
-  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">
-            <BarChart2 className="w-6 h-6 text-indigo-400" />
-            Outbound Analytics & Intelligence
-          </h1>
-          <p className="text-zinc-400 text-sm mt-1">
-            Global deliverability performance, engagement conversion funnels, and mailbox health telemetry.
-          </p>
-        </div>
-
-        <div className="flex items-center gap-3">
-          <select
-            value={dateRange}
-            onChange={(e) => setDateRange(e.target.value)}
-            className="bg-zinc-900 border border-zinc-800 rounded-lg py-2 px-3 text-xs text-zinc-200 focus:outline-none focus:border-indigo-500"
-          >
-            <option value="7d">Last 7 Days</option>
-            <option value="14d">Last 14 Days</option>
-            <option value="30d">Last 30 Days</option>
-            <option value="90d">Last 90 Days</option>
-          </select>
-          <CsvExportButton data={timelineData} filename="smartlead-analytics-export.csv" />
-        </div>
-      </div>
-
-      {/* KPI Conversion Cards */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-        <StatCard
-          title="Open Rate"
-          value="64.8%"
-          subtitle="4,890 unique opens"
-          icon={Mail}
-          iconColor="emerald"
-          change={{ value: "+3.4%", isPositive: true, period: "vs benchmark" }}
-        />
-        <StatCard
-          title="Click Rate (CTR)"
-          value="18.2%"
-          subtitle="1,120 link clicks"
-          icon={ArrowUpRight}
-          iconColor="blue"
-          change={{ value: "+1.1%", isPositive: true, period: "last 30 days" }}
-        />
-        <StatCard
-          title="Reply Rate"
-          value="6.2%"
-          subtitle="378 prospect responses"
-          icon={Inbox}
-          iconColor="purple"
-          change={{ value: "+0.8%", isPositive: true, period: "positive intent" }}
-        />
-        <StatCard
-          title="Bounce Rate"
-          value="0.7%"
-          subtitle="Deliverability safe"
-          icon={ShieldCheck}
-          iconColor="teal"
-          change={{ value: "-0.2%", isPositive: true, period: "health optimal" }}
-        />
-      </div>
-
-      {/* Timeline Chart */}
-      <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)]">
-        <div className="flex items-center justify-between mb-6">
-          <div>
-            <h3 className="text-base font-semibold text-zinc-100">Cumulative Volume & Responses</h3>
-            <p className="text-xs text-zinc-400 mt-0.5">
-              Daily trajectory of outbound sends, unique opens, and replied prospects.
-            </p>
-          </div>
-        </div>
-
-        <div className="h-[320px] w-full">
-          <ResponsiveContainer width="100%" height="100%">
-            <LineChart data={timelineData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
-              <CartesianGrid strokeDasharray="3 3" stroke="rgba(246,248,242,0.05)" vertical={false} />
-              <XAxis dataKey="date" stroke="var(--nt-text-muted)" fontSize={12} tickLine={false} axisLine={false} />
-              <YAxis stroke="var(--nt-text-muted)" fontSize={12} tickLine={false} axisLine={false} tickFormatter={(val) => new Intl.NumberFormat('en-US').format(val)} className="font-mono" />
-              <Tooltip
-                contentStyle={{
-                  backgroundColor: "rgba(6, 10, 12, 0.88)",
-                  backdropFilter: "blur(12px)",
-                  borderColor: "rgba(37,125,104,0.2)",
-                  borderRadius: "12px",
-                  fontSize: "12px",
-                  color: "var(--nt-text-primary)"
-                }}
-              />
-              <Legend wrapperStyle={{ fontSize: "12px", paddingTop: "10px" }} />
-              <Line type="monotone" dataKey="sent" name="Emails Sent" stroke="var(--nt-deep-teal-600)" strokeWidth={3} dot={{ r: 4, fill: 'var(--nt-deep-teal-600)', strokeWidth: 2, stroke: 'var(--nt-focus-ring-offset)' }} activeDot={{ r: 6, fill: 'var(--nt-deep-teal-700)' }} animationDuration={1500} />
-              <Line type="monotone" dataKey="opens" name="Opens" stroke="var(--nt-deep-teal-500)" strokeWidth={3} dot={{ r: 4, fill: 'var(--nt-deep-teal-500)', strokeWidth: 2, stroke: 'var(--nt-focus-ring-offset)' }} activeDot={{ r: 6, fill: 'var(--nt-deep-teal-700)' }} animationDuration={1500} />
-              <Line type="monotone" dataKey="replies" name="Replies" stroke="var(--nt-terracotta-500)" strokeWidth={3} dot={{ r: 4, fill: 'var(--nt-terracotta-500)', strokeWidth: 2, stroke: 'var(--nt-focus-ring-offset)' }} activeDot={{ r: 6, fill: 'var(--nt-terracotta-700)' }} animationDuration={1500} />
-            </LineChart>
-          </ResponsiveContainer>
-        </div>
-      </div>
-
-      {/* Comparison Grid */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* Top Campaigns Comparison */}
-        <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)]">
-          <h3 className="text-base font-semibold text-zinc-100 mb-1">Top Campaign Performance</h3>
-          <p className="text-xs text-zinc-400 mb-4">Volume dispatched vs. engaged prospects.</p>
-
-          <div className="h-[280px] w-full">
-            <ResponsiveContainer width="100%" height="100%">
-              <BarChart data={campaignComparisonData} layout="vertical" margin={{ top: 5, right: 20, bottom: 5, left: 40 }}>
-                <defs>
-                  <linearGradient id="colorOpens" x1="0" y1="0" x2="1" y2="0">
-                     <stop offset="0%" stopColor="var(--nt-deep-teal-500)" stopOpacity={0.8}/>
-                     <stop offset="100%" stopColor="var(--nt-deep-teal-700)" stopOpacity={1}/>
-                   </linearGradient>
-                   <linearGradient id="colorReplies" x1="0" y1="0" x2="1" y2="0">
-                     <stop offset="0%" stopColor="var(--nt-terracotta-400)" stopOpacity={0.8}/>
-                     <stop offset="100%" stopColor="var(--nt-terracotta-700)" stopOpacity={1}/>
-                  </linearGradient>
-                </defs>
-                <CartesianGrid strokeDasharray="3 3" stroke="rgba(246,248,242,0.05)" horizontal={false} />
-                <XAxis type="number" stroke="var(--nt-text-muted)" fontSize={11} tickLine={false} axisLine={false} className="font-mono" />
-                <YAxis dataKey="name" type="category" stroke="var(--nt-text-muted)" fontSize={11} tickLine={false} axisLine={false} />
-                <Tooltip
-                  contentStyle={{
-                    backgroundColor: "rgba(6, 10, 12, 0.88)",
-                    backdropFilter: "blur(12px)",
-                    borderColor: "rgba(37,125,104,0.2)",
-                    borderRadius: "12px",
-                    fontSize: "12px",
-                  }}
-                />
-                <Bar dataKey="opens" name="Opens" fill="url(#colorOpens)" radius={[0, 4, 4, 0]} animationDuration={1500}>
-                </Bar>
-                <Bar dataKey="replies" name="Replies" fill="url(#colorReplies)" radius={[0, 4, 4, 0]} animationDuration={1500} />
-              </BarChart>
-            </ResponsiveContainer>
-          </div>
-        </div>
-
-        {/* Mailbox Deliverability Health Matrix */}
-        <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)] flex flex-col justify-between">
-          <div>
-            <h3 className="text-base font-semibold text-zinc-100 mb-1">Mailbox Deliverability Matrix</h3>
-            <p className="text-xs text-zinc-400 mb-4">DNS authentication, warmup status, and health metrics.</p>
-
-            <div className="space-y-3">
-              {emailAccounts.map((acc: any) => (
-                <div
-                  key={acc.id}
-                  className="flex items-center justify-between p-3 bg-white/5 border border-white/10 rounded-lg text-xs hover:bg-white/10 transition-colors"
-                >
-                  <div>
-                    <span className="font-semibold text-zinc-200">{acc.from_email}</span>
-                    <div className="text-[10px] text-zinc-400 mt-0.5">
-                      SPF: PASS • DKIM: PASS • DMARC: PASS
-                    </div>
-                  </div>
-
-                  <div className="flex items-center gap-3 font-mono">
-                    <span className="text-emerald-400 font-bold drop-shadow-[0_0_8px_rgba(63,156,132,0.5)]">99.4%</span>
-                    <span className="px-2 py-0.5 bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 rounded text-[10px]">
-                      Optimal
-                    </span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          <div className="mt-4 pt-3 border-t border-white/10 text-[11px] text-zinc-400 flex items-center justify-between">
-            <span>Global Reputation: <span className="font-mono text-zinc-300">98.4 / 100</span></span>
-            <span className="text-emerald-400 flex items-center gap-1.5"><ShieldCheck className="w-3.5 h-3.5" /> All Nodes Secure</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

src//pages//CampaignDetail.tsx

@@ -1,727 +0,0 @@
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { apiClient } from "../lib/apiClient";
-import { useParams, Link } from "react-router-dom";
-import { 
-  ArrowLeft, 
-  Megaphone, 
-  Layers, 
-  Mail, 
-  Users, 
-  BarChart2, 
-  Settings as SettingsIcon, 
-  Plus, 
-  Trash2, 
-  Play, 
-  Pause, 
-  Clock, 
-  CheckCircle2, 
-  Sparkles, 
-  Download, 
-  Send,
-  Split,
-  RefreshCw
-} from "lucide-react";
-import { useState } from "react";
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
-import StatusBadge from "../components/StatusBadge";
-import StatCard from "../components/StatCard";
-import RichTextEditor from "../components/RichTextEditor";
-import FormDrawer from "../components/FormDrawer";
-import CsvExportButton from "../components/CsvExportButton";
-import toast from "react-hot-toast";
-
-export default function CampaignDetail() {
-  const { id } = useParams<{ id: string }>();
-  const queryClient = useQueryClient();
-  const [activeTab, setActiveTab] = useState<"overview" | "sequences" | "accounts" | "leads" | "analytics" | "settings">("overview");
-  const [isAddLeadOpen, setIsAddLeadOpen] = useState(false);
-  const [selectedVariantTab, setSelectedVariantTab] = useState<Record<string, number>>({});
-
-  const { data: campaign, isLoading, isError, refetch: refetchCampaign } = useQuery({
-    queryKey: ["campaign", id],
-    queryFn: async () => {
-      const res = await apiClient.get(`/campaigns/${id}`);
-      return res.data;
-    },
-    enabled: Boolean(id),
-  });
-
-  const { data: sequences = [], refetch: refetchSequences } = useQuery({
-    queryKey: ["campaign-sequences", id],
-    queryFn: async () => {
-      const res = await apiClient.get(`/campaigns/${id}/sequences`);
-      return res.data;
-    },
-    enabled: Boolean(id),
-  });
-
-  const { data: campaignLeads = [], refetch: refetchLeads } = useQuery({
-    queryKey: ["campaign-leads", id],
-    queryFn: async () => {
-      const res = await apiClient.get(`/campaigns/${id}/leads`);
-      return res.data;
-    },
-    enabled: Boolean(id),
-  });
-
-  const { data: assignedAccounts = [], refetch: refetchAccounts } = useQuery({
-    queryKey: ["campaign-accounts", id],
-    queryFn: async () => {
-      const res = await apiClient.get(`/campaigns/${id}/email-accounts`);
-      return res.data;
-    },
-    enabled: Boolean(id),
-  });
-
-  const { data: allEmailAccounts = [] } = useQuery({
-    queryKey: ["email-accounts"],
-    queryFn: async () => {
-      const res = await apiClient.get("/email-accounts");
-      return res.data;
-    },
-  });
-
-  const { data: analyticsHistory = [] } = useQuery({
-    queryKey: ["campaign-analytics-date", id],
-    queryFn: async () => {
-      const res = await apiClient.get(`/campaigns/${id}/analytics-by-date`);
-      return res.data;
-    },
-    enabled: Boolean(id),
-  });
-
-  // Save sequences mutation
-  const saveSequencesMutation = useMutation({
-    mutationFn: async (updatedSequences: any[]) => {
-      const res = await apiClient.post(`/campaigns/${id}/sequences`, { sequences: updatedSequences });
-      return res.data;
-    },
-    onSuccess: () => {
-      toast.success("Sequence saved successfully");
-      refetchSequences();
-      queryClient.invalidateQueries({ queryKey: ["campaign", id] });
-    },
-    onError: (err: any) => {
-      toast.error(err.response?.data?.error || "Failed to save sequences");
-    },
-  });
-
-  const addSequenceStep = () => {
-    const nextSeqNum = (sequences.length || 0) + 1;
-    const newStep = {
-      id: "seq_" + Math.random().toString(36).substring(2, 7),
-      seq_number: nextSeqNum,
-      delay_days: nextSeqNum === 1 ? 0 : 3,
-      subject: `Follow-up #${nextSeqNum - 1}: Re: {{company_name}}`,
-      email_body: `<p>Hi {{first_name}},</p><p>Wanted to quickly circle back on my earlier note. Any thoughts?</p>`,
-      variant_distribution_percentage: 100,
-      variants: [],
-    };
-    saveSequencesMutation.mutate([...sequences, newStep]);
-  };
-
-  const removeSequenceStep = (stepIndex: number) => {
-    const filtered = sequences.filter((_: any, idx: number) => idx !== stepIndex);
-    saveSequencesMutation.mutate(filtered);
-  };
-
-  const addVariantToStep = (stepIndex: number) => {
-    const updated = [...sequences];
-    const target = updated[stepIndex];
-    if (!target.variants) target.variants = [];
-    target.variant_distribution_percentage = 50;
-    target.variants.push({
-      id: "var_" + Math.random().toString(36).substring(2, 7),
-      variant_label: `Variant ${String.fromCharCode(66 + target.variants.length)}`,
-      subject: `Alternative: ${target.subject}`,
-      email_body: `<p>Hey {{first_name}}, short follow up regarding {{company_name}}.</p>`,
-    });
-    saveSequencesMutation.mutate(updated);
-  };
-
-  const addAccountToCampaign = async (accountId: string) => {
-    try {
-      await apiClient.post(`/campaigns/${id}/email-accounts`, { email_account_id: accountId });
-      toast.success("Mailbox assigned to campaign");
-      refetchAccounts();
-    } catch (err: any) {
-      toast.error("Failed to assign account");
-    }
-  };
-
-  const removeAccountFromCampaign = async (accountId: string) => {
-    try {
-      await apiClient.delete(`/campaigns/${id}/email-accounts/${accountId}`);
-      toast.success("Mailbox removed from campaign");
-      refetchAccounts();
-    } catch (err: any) {
-      toast.error("Failed to remove account");
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <div className="p-12 flex justify-center items-center">
-        <div className="w-8 h-8 rounded-full border-2 border-indigo-500 border-t-transparent animate-spin" />
-      </div>
-    );
-  }
-
-  if (isError || !campaign) {
-    return (
-      <div className="p-12 flex flex-col items-center justify-center gap-3 text-center">
-        <h1 className="text-lg font-semibold text-zinc-100">Campaign unavailable</h1>
-        <p className="text-sm text-zinc-400">We couldn’t load this campaign. Try again or return to the campaign list.</p>
-        <div className="flex items-center gap-2">
-          <button type="button" onClick={() => refetchCampaign()} className="px-3 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-medium rounded-lg inline-flex items-center gap-2">
-            <RefreshCw className="w-3.5 h-3.5" /> Retry
-          </button>
-          <Link to="/campaigns" className="px-3 py-2 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 text-xs font-medium rounded-lg">
-            Back to campaigns
-          </Link>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="p-6 max-w-7xl mx-auto space-y-6">
-      {/* Back Navigation and Header */}
-      <div className="space-y-3">
-        <Link
-          to="/campaigns"
-          className="inline-flex items-center gap-1.5 text-xs text-zinc-400 hover:text-zinc-200 transition-colors"
-        >
-          <ArrowLeft className="w-3.5 h-3.5" /> Back to all campaigns
-        </Link>
-
-        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-          <div>
-            <div className="flex items-center gap-3">
-              <h1 className="text-2xl font-bold text-zinc-100 tracking-tight">{campaign.name}</h1>
-              <StatusBadge status={campaign.status} />
-            </div>
-            <p className="text-xs text-zinc-400 mt-1">
-              Timezone: {campaign.timezone} • Schedule: {campaign.start_schedule} - {campaign.end_schedule}
-            </p>
-          </div>
-
-          <div className="flex items-center gap-2">
-            <button
-              onClick={() => setIsAddLeadOpen(true)}
-              className="px-3.5 py-1.5 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-medium rounded-lg transition-colors flex items-center gap-1.5"
-            >
-              <Plus className="w-3.5 h-3.5" /> Add Leads
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Tabs Bar */}
-      <div className="border-b border-zinc-800 flex items-center gap-1 text-sm font-medium overflow-x-auto">
-        {[
-          { key: "overview", label: "Overview", icon: BarChart2 },
-          { key: "sequences", label: `Sequences (${sequences.length})`, icon: Layers },
-          { key: "accounts", label: `Email Accounts (${assignedAccounts.length})`, icon: Mail },
-          { key: "leads", label: `Leads (${campaignLeads.length})`, icon: Users },
-          { key: "analytics", label: "Analytics", icon: BarChart2 },
-          { key: "settings", label: "Settings", icon: SettingsIcon },
-        ].map((tab) => (
-          <button
-            key={tab.key}
-            onClick={() => setActiveTab(tab.key as any)}
-            className={`px-4 py-2.5 border-b-2 font-medium text-xs flex items-center gap-2 transition-colors whitespace-nowrap ${
-              activeTab === tab.key
-                ? "border-indigo-500 text-indigo-400 bg-indigo-500/5"
-                : "border-transparent text-zinc-400 hover:text-zinc-200 hover:border-zinc-700"
-            }`}
-          >
-            <tab.icon className="w-4 h-4" />
-            {tab.label}
-          </button>
-        ))}
-      </div>
-
-      {/* TAB 1: OVERVIEW */}
-      {activeTab === "overview" && (
-        <div className="space-y-6">
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-            <StatCard
-              title="Leads in Sequence"
-              value={campaign.lead_count || 0}
-              icon={Users}
-              iconColor="teal"
-            />
-            <StatCard
-              title="Emails Sent"
-              value={campaign.sent_count || 0}
-              icon={Send}
-              iconColor="blue"
-            />
-            <StatCard
-              title="Unique Opens"
-              value={campaign.open_count || 0}
-              subtitle={`${((campaign.open_count / (campaign.sent_count || 1)) * 100).toFixed(1)}% Open Rate`}
-              icon={Mail}
-              iconColor="emerald"
-            />
-            <StatCard
-              title="Replies Received"
-              value={campaign.reply_count || 0}
-              subtitle={`${((campaign.reply_count / (campaign.sent_count || 1)) * 100).toFixed(1)}% Reply Rate`}
-              icon={CheckCircle2}
-              iconColor="purple"
-            />
-          </div>
-
-          {/* 14-Day Trajectory */}
-          <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-5 shadow-sm">
-            <h3 className="text-sm font-semibold text-zinc-100 mb-4">
-              Engagement Trajectory (Last 14 Days)
-            </h3>
-            <div className="h-[260px] w-full">
-              <ResponsiveContainer width="100%" height="100%">
-                <LineChart data={analyticsHistory} margin={{ top: 5, right: 10, bottom: 5, left: -15 }}>
-                   <CartesianGrid strokeDasharray="3 3" stroke="var(--nt-border-subtle)" vertical={false} />
-                   <XAxis dataKey="date" stroke="var(--nt-text-muted)" fontSize={11} tickLine={false} axisLine={false} />
-                   <YAxis stroke="var(--nt-text-muted)" fontSize={11} tickLine={false} axisLine={false} />
-                  <Tooltip
-                     contentStyle={{ backgroundColor: "var(--nt-bg-root)", borderColor: "var(--nt-border-accent)", borderRadius: "8px", fontSize: "12px" }}
-                  />
-                   <Line type="monotone" dataKey="sent" stroke="var(--nt-deep-teal-600)" strokeWidth={2} name="Sent" dot={false} />
-                   <Line type="monotone" dataKey="opens" stroke="var(--nt-deep-teal-500)" strokeWidth={2} name="Opens" dot={false} />
-                   <Line type="monotone" dataKey="replies" stroke="var(--nt-terracotta-500)" strokeWidth={2} name="Replies" dot={false} />
-                </LineChart>
-              </ResponsiveContainer>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* TAB 2: SEQUENCES WITH A/B VARIANTS */}
-      {activeTab === "sequences" && (
-        <div className="space-y-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <h3 className="text-base font-semibold text-zinc-100">Multi-Step Sequence Flow</h3>
-              <p className="text-xs text-zinc-400 mt-0.5">
-                Set delay days, customize subject lines, and configure A/B variants per email step.
-              </p>
-            </div>
-            <button
-              onClick={addSequenceStep}
-              className="px-3.5 py-1.5 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-medium rounded-lg transition-colors flex items-center gap-1.5"
-            >
-              <Plus className="w-3.5 h-3.5" /> Add Email Step
-            </button>
-          </div>
-
-          <div className="space-y-4">
-            {sequences.map((step: any, stepIndex: number) => {
-              const currentVariantTab = selectedVariantTab[step.id] || 0;
-              const hasVariants = step.variants && step.variants.length > 0;
-
-              return (
-                <div key={step.id || stepIndex} className="bg-zinc-900 border border-zinc-800 rounded-xl overflow-hidden shadow-sm">
-                  {/* Step Header */}
-                  <div className="px-5 py-3.5 bg-zinc-950 border-b border-zinc-800 flex items-center justify-between">
-                    <div className="flex items-center gap-3">
-                      <span className="w-6 h-6 rounded-full bg-indigo-500/20 text-indigo-400 font-bold text-xs flex items-center justify-center border border-indigo-500/30">
-                        {step.seq_number}
-                      </span>
-                      <div>
-                        <span className="text-xs font-semibold text-zinc-200">
-                          {step.seq_number === 1 ? "Initial Outreach (Step 1)" : `Follow-up #${step.seq_number - 1}`}
-                        </span>
-                        <div className="flex items-center gap-2 text-[11px] text-zinc-400 mt-0.5">
-                          <Clock className="w-3 h-3 text-zinc-500" />
-                          <span>Delay:</span>
-                          <input
-                            type="number"
-                            min="0"
-                            value={step.delay_days}
-                            onChange={(e) => {
-                              const updated = [...sequences];
-                              updated[stepIndex].delay_days = Number(e.target.value);
-                              saveSequencesMutation.mutate(updated);
-                            }}
-                            className="w-12 bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs text-zinc-100"
-                          />
-                          <span>days after previous email</span>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="flex items-center gap-2">
-                      <button
-                        type="button"
-                        onClick={() => addVariantToStep(stepIndex)}
-                        className="px-2.5 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-xs font-medium rounded-md transition-colors flex items-center gap-1"
-                      >
-                        <Split className="w-3.5 h-3.5 text-indigo-400" /> + A/B Variant
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => removeSequenceStep(stepIndex)}
-                        className="p-1.5 text-zinc-500 hover:text-rose-400 hover:bg-rose-500/10 rounded-md transition-colors"
-                      >
-                        <Trash2 className="w-4 h-4" />
-                      </button>
-                    </div>
-                  </div>
-
-                  {/* Step Body & Variant Tabs */}
-                  <div className="p-5 space-y-4">
-                    {hasVariants && (
-                      <div className="flex items-center justify-between border-b border-zinc-800 pb-3">
-                        <div className="flex items-center gap-2">
-                          <button
-                            type="button"
-                            onClick={() => setSelectedVariantTab((prev) => ({ ...prev, [step.id]: 0 }))}
-                            className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
-                              currentVariantTab === 0 ? "bg-indigo-600 text-white" : "bg-zinc-800 text-zinc-400"
-                            }`}
-                          >
-                            Variant A (Default)
-                          </button>
-                          {step.variants.map((v: any, vIdx: number) => (
-                            <button
-                              key={v.id || vIdx}
-                              type="button"
-                              onClick={() => setSelectedVariantTab((prev) => ({ ...prev, [step.id]: vIdx + 1 }))}
-                              className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
-                                currentVariantTab === vIdx + 1 ? "bg-indigo-600 text-white" : "bg-zinc-800 text-zinc-400"
-                              }`}
-                            >
-                              {v.variant_label || `Variant ${String.fromCharCode(66 + vIdx)}`}
-                            </button>
-                          ))}
-                        </div>
-
-                        <div className="text-xs text-zinc-400 font-mono">
-                          Split Traffic: 50% / 50%
-                        </div>
-                      </div>
-                    )}
-
-                    {/* Active Variant Editor */}
-                    {currentVariantTab === 0 ? (
-                      <div className="space-y-3">
-                        <div>
-                          <label className="block text-xs font-medium text-zinc-400 mb-1">
-                            Subject Line (Variant A)
-                          </label>
-                          <input
-                            type="text"
-                            value={step.subject}
-                            onChange={(e) => {
-                              const updated = [...sequences];
-                              updated[stepIndex].subject = e.target.value;
-                              saveSequencesMutation.mutate(updated);
-                            }}
-                            className="w-full bg-zinc-950 border border-zinc-800 rounded-lg p-2.5 text-xs text-zinc-100 focus:outline-none focus:border-indigo-500"
-                          />
-                        </div>
-
-                        <div>
-                          <label className="block text-xs font-medium text-zinc-400 mb-1">
-                            Email Body (Variant A)
-                          </label>
-                          <RichTextEditor
-                            content={step.email_body}
-                            onChange={(html) => {
-                              const updated = [...sequences];
-                              updated[stepIndex].email_body = html;
-                              saveSequencesMutation.mutate(updated);
-                            }}
-                          />
-                        </div>
-                      </div>
-                    ) : (
-                      <div className="space-y-3">
-                        <div>
-                          <label className="block text-xs font-medium text-zinc-400 mb-1">
-                            Subject Line ({step.variants[currentVariantTab - 1]?.variant_label})
-                          </label>
-                          <input
-                            type="text"
-                            value={step.variants[currentVariantTab - 1]?.subject || ""}
-                            onChange={(e) => {
-                              const updated = [...sequences];
-                              updated[stepIndex].variants[currentVariantTab - 1].subject = e.target.value;
-                              saveSequencesMutation.mutate(updated);
-                            }}
-                            className="w-full bg-zinc-950 border border-zinc-800 rounded-lg p-2.5 text-xs text-zinc-100 focus:outline-none focus:border-indigo-500"
-                          />
-                        </div>
-
-                        <div>
-                          <label className="block text-xs font-medium text-zinc-400 mb-1">
-                            Email Body ({step.variants[currentVariantTab - 1]?.variant_label})
-                          </label>
-                          <RichTextEditor
-                            content={step.variants[currentVariantTab - 1]?.email_body || ""}
-                            onChange={(html) => {
-                              const updated = [...sequences];
-                              updated[stepIndex].variants[currentVariantTab - 1].email_body = html;
-                              saveSequencesMutation.mutate(updated);
-                            }}
-                          />
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      )}
-
-      {/* TAB 3: EMAIL ACCOUNTS ASSIGNMENT */}
-      {activeTab === "accounts" && (
-        <div className="space-y-6">
-          <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-5">
-            <h3 className="text-base font-semibold text-zinc-100 mb-1">Assigned Sending Inboxes</h3>
-            <p className="text-xs text-zinc-400 mb-4">
-              Emails will be rotated across these connected mailboxes to preserve deliverability.
-            </p>
-
-            <div className="space-y-3">
-              {assignedAccounts.map((acc: any) => (
-                <div
-                  key={acc.id}
-                  className="flex items-center justify-between p-3 bg-zinc-950 border border-zinc-800 rounded-lg"
-                >
-                  <div className="flex items-center gap-3">
-                    <div className="p-2 bg-indigo-500/10 text-indigo-400 rounded-md">
-                      <Mail className="w-4 h-4" />
-                    </div>
-                    <div>
-                      <span className="text-xs font-semibold text-zinc-200">{acc.from_name}</span>
-                      <div className="text-[11px] text-zinc-400">{acc.from_email}</div>
-                    </div>
-                  </div>
-
-                  <div className="flex items-center gap-3">
-                    <StatusBadge status={acc.status} size="sm" />
-                    <button
-                      onClick={() => removeAccountFromCampaign(acc.id)}
-                      className="text-xs text-rose-400 hover:text-rose-300 font-medium"
-                    >
-                      Remove
-                    </button>
-                  </div>
-                </div>
-              ))}
-
-              {assignedAccounts.length === 0 && (
-                <div className="p-6 text-center text-xs text-zinc-500 bg-zinc-950/60 rounded-lg border border-dashed border-zinc-800">
-                  No email accounts assigned yet. Select from available mailboxes below.
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-5">
-            <h4 className="text-xs font-semibold uppercase tracking-wider text-zinc-400 mb-3">
-              Available Mailboxes
-            </h4>
-            <div className="space-y-2">
-              {allEmailAccounts
-                .filter((a: any) => !assignedAccounts.some((aa: any) => aa.id === a.id))
-                .map((acc: any) => (
-                  <div
-                    key={acc.id}
-                    className="flex items-center justify-between p-3 bg-zinc-950/40 border border-zinc-800/80 rounded-lg"
-                  >
-                    <div>
-                      <span className="text-xs font-medium text-zinc-200">{acc.from_email}</span>
-                      <div className="text-[10px] text-zinc-500">
-                        Provider: {acc.provider} • Daily limit: {acc.daily_limit} emails
-                      </div>
-                    </div>
-                    <button
-                      onClick={() => addAccountToCampaign(acc.id)}
-                      className="px-3 py-1 bg-indigo-600/20 hover:bg-indigo-600 text-indigo-300 hover:text-white rounded text-xs font-medium transition-colors"
-                    >
-                      + Assign to Campaign
-                    </button>
-                  </div>
-                ))}
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* TAB 4: LEADS */}
-      {activeTab === "leads" && (
-        <div className="space-y-4">
-          <div className="flex items-center justify-between">
-            <div className="text-xs text-zinc-400">
-              Showing {campaignLeads.length} leads in this campaign.
-            </div>
-            <div className="flex items-center gap-2">
-              <CsvExportButton data={campaignLeads} filename={`campaign-${id}-leads.csv`} />
-              <button
-                onClick={() => setIsAddLeadOpen(true)}
-                className="px-3 py-1.5 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-medium rounded-lg transition-colors flex items-center gap-1.5"
-              >
-                <Plus className="w-3.5 h-3.5" /> Add Lead
-              </button>
-            </div>
-          </div>
-
-          <div className="bg-zinc-900 border border-zinc-800 rounded-xl overflow-hidden">
-            <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-5 py-3 font-semibold">Lead</th>
-                  <th className="px-5 py-3 font-semibold">Company</th>
-                  <th className="px-5 py-3 font-semibold">Status</th>
-                  <th className="px-5 py-3 font-semibold">Opens</th>
-                  <th className="px-5 py-3 font-semibold">Clicks</th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-zinc-800">
-                {campaignLeads.map((lead: any) => (
-                  <tr key={lead.id} className="hover:bg-zinc-800/30">
-                    <td className="px-5 py-3.5">
-                      <div className="font-medium text-zinc-200">
-                        {lead.first_name} {lead.last_name}
-                      </div>
-                      <div className="text-xs text-zinc-400 font-mono">{lead.email}</div>
-                    </td>
-                    <td className="px-5 py-3.5 text-zinc-300">{lead.company_name}</td>
-                    <td className="px-5 py-3.5">
-                      <StatusBadge status={lead.status} size="sm" />
-                    </td>
-                    <td className="px-5 py-3.5 text-zinc-300 font-mono">{lead.open_count || 0}</td>
-                    <td className="px-5 py-3.5 text-zinc-300 font-mono">{lead.click_count || 0}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      )}
-
-      {/* TAB 5: ANALYTICS */}
-      {activeTab === "analytics" && (
-        <div className="space-y-6">
-          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-            <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-4">
-              <span className="text-xs text-zinc-400">Open Rate</span>
-              <div className="text-2xl font-bold text-emerald-400 mt-1">56.2%</div>
-              <span className="text-[11px] text-zinc-500">Above industry avg (28%)</span>
-            </div>
-            <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-4">
-              <span className="text-xs text-zinc-400">Reply Rate</span>
-              <div className="text-2xl font-bold text-purple-400 mt-1">6.4%</div>
-              <span className="text-[11px] text-zinc-500">Strong positive intent</span>
-            </div>
-            <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-4">
-              <span className="text-xs text-zinc-400">Bounce Rate</span>
-              <div className="text-2xl font-bold text-rose-400 mt-1">0.6%</div>
-              <span className="text-[11px] text-zinc-500">Safe zone (&lt; 2%)</span>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* TAB 6: SETTINGS */}
-      {activeTab === "settings" && (
-        <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-6 max-w-2xl">
-          <h3 className="text-base font-semibold text-zinc-100 mb-4">Campaign Parameters</h3>
-          <div className="space-y-4 text-xs">
-            <div>
-              <label className="block text-zinc-400 font-medium mb-1">Timezone</label>
-              <input
-                disabled
-                value={campaign.timezone}
-                className="w-full bg-zinc-950 border border-zinc-800 rounded-lg p-2.5 text-zinc-300"
-              />
-            </div>
-            <div>
-              <label className="block text-zinc-400 font-medium mb-1">Unsubscribe Footer</label>
-              <input
-                disabled
-                value={campaign.unsubscribe_text}
-                className="w-full bg-zinc-950 border border-zinc-800 rounded-lg p-2.5 text-zinc-300"
-              />
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Add Lead Slide-Over */}
-      <FormDrawer
-        isOpen={isAddLeadOpen}
-        onClose={() => setIsAddLeadOpen(false)}
-        title="Add Lead to Campaign"
-        subtitle="Upload prospect details to be enrolled into this sequence."
-      >
-        <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,
-              company_name: (form.elements.namedItem("company_name") as HTMLInputElement).value,
-              website: (form.elements.namedItem("website") as HTMLInputElement).value,
-              status: "INTERESTED",
-            };
-
-            try {
-              await apiClient.post(`/campaigns/${id}/leads`, newLead);
-              toast.success("Lead enrolled in campaign");
-              setIsAddLeadOpen(false);
-              refetchLeads();
-            } catch (err: any) {
-              toast.error("Failed to add lead");
-            }
-          }}
-          className="space-y-4 text-xs"
-        >
-          <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.5 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.5 text-zinc-100" />
-          </div>
-          <div>
-            <label className="block font-medium text-zinc-300 mb-1">Email *</label>
-            <input type="email" name="email" 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">Company Name</label>
-            <input name="company_name" 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">Website</label>
-            <input name="website" placeholder="https://" 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={() => 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"
-            >
-              Enroll Lead
-            </button>
-          </div>
-        </form>
-      </FormDrawer>
-    </div>
-  );
-}

src//pages//Campaigns.tsx

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

src//pages//Clients.tsx

@@ -1,214 +0,0 @@
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { apiClient } from "../lib/apiClient";
-import { 
-  Building2, 
-  Plus, 
-  Trash2, 
-  ExternalLink, 
-  Users, 
-  Megaphone, 
-  Mail, 
-  ArrowUpRight, 
-  ShieldCheck 
-} from "lucide-react";
-import { useState } from "react";
-import FormDrawer from "../components/FormDrawer";
-import ConfirmModal from "../components/ConfirmModal";
-import StatusBadge from "../components/StatusBadge";
-import toast from "react-hot-toast";
-
-export default function Clients() {
-  const queryClient = useQueryClient();
-  const [isAddOpen, setIsAddOpen] = useState(false);
-  const [selectedForDelete, setSelectedForDelete] = useState<string | null>(null);
-
-  const { data: clients = [], isLoading, refetch } = useQuery({
-    queryKey: ["clients"],
-    queryFn: async () => {
-      const res = await apiClient.get("/clients");
-      return res.data;
-    },
-  });
-
-  const deleteMutation = useMutation({
-    mutationFn: async (id: string) => {
-      const res = await apiClient.delete(`/clients/${id}`);
-      return res.data;
-    },
-    onSuccess: () => {
-      toast.success("Client account removed");
-      setSelectedForDelete(null);
-      refetch();
-    },
-  });
-
-  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">
-            <Building2 className="w-6 h-6 text-indigo-400" />
-            Agency Client Sub-Accounts
-          </h1>
-          <p className="text-zinc-400 text-sm mt-1">
-            Isolate campaigns, custom domains, leads, and analytics across distinct client sub-portals.
-          </p>
-        </div>
-
-        <button
-          onClick={() => setIsAddOpen(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 Client Portal
-        </button>
-      </div>
-
-      {/* Client Cards Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
-        {clients.map((client: any) => (
-          <div
-            key={client.id}
-            className="bg-zinc-900 border border-zinc-800 rounded-xl p-5 shadow-sm hover:border-zinc-700 transition-all flex flex-col justify-between"
-          >
-            <div>
-              <div className="flex items-start justify-between">
-                <div className="flex items-center gap-3">
-                  <div className="w-10 h-10 rounded-lg bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 flex items-center justify-center font-bold text-base">
-                    {client.name ? client.name[0] : "C"}
-                  </div>
-                  <div>
-                    <h3 className="font-semibold text-zinc-100 text-sm">{client.name}</h3>
-                    <span className="text-xs text-zinc-500 font-mono">{client.email}</span>
-                  </div>
-                </div>
-
-                <StatusBadge status={client.status || "ACTIVE"} size="sm" />
-              </div>
-
-              {client.website && (
-                <div className="mt-3 text-xs text-zinc-400 flex items-center gap-1.5 font-mono">
-                  <ExternalLink className="w-3.5 h-3.5 text-zinc-500" />
-                  <a
-                    href={client.website}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="hover:text-indigo-400 transition-colors truncate"
-                  >
-                    {client.website.replace("https://", "")}
-                  </a>
-                </div>
-              )}
-
-              {/* Metrics */}
-              <div className="grid grid-cols-2 gap-3 mt-5 pt-4 border-t border-zinc-800/80 text-xs">
-                <div className="p-2.5 bg-zinc-950 rounded-lg border border-zinc-800/60">
-                  <span className="text-zinc-500 flex items-center gap-1 text-[11px]">
-                    <Megaphone className="w-3 h-3 text-indigo-400" /> Campaigns
-                  </span>
-                  <span className="text-base font-bold text-zinc-200 mt-1 block font-mono">
-                    {client.campaigns_count || 3}
-                  </span>
-                </div>
-                <div className="p-2.5 bg-zinc-950 rounded-lg border border-zinc-800/60">
-                  <span className="text-zinc-500 flex items-center gap-1 text-[11px]">
-                    <Users className="w-3 h-3 text-teal-400" /> Leads
-                  </span>
-                  <span className="text-base font-bold text-zinc-200 mt-1 block font-mono">
-                    {client.leads_count?.toLocaleString() || "1,420"}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            <div className="mt-5 pt-3 border-t border-zinc-800/80 flex items-center justify-between">
-              <span className="text-[11px] text-zinc-500 font-mono">ID: {client.id}</span>
-              <div className="flex items-center gap-2">
-                <button
-                  onClick={() => setSelectedForDelete(client.id)}
-                  className="p-1.5 text-zinc-500 hover:text-rose-400 hover:bg-rose-500/10 rounded-md transition-colors"
-                >
-                  <Trash2 className="w-3.5 h-3.5" />
-                </button>
-              </div>
-            </div>
-          </div>
-        ))}
-
-        {clients.length === 0 && (
-          <div className="col-span-full py-16 text-center text-xs text-zinc-500 bg-zinc-900 border border-zinc-800 rounded-xl">
-            No client portals created yet. Add your first agency sub-account above.
-          </div>
-        )}
-      </div>
-
-      {/* Delete Confirmation */}
-      <ConfirmModal
-        isOpen={Boolean(selectedForDelete)}
-        onClose={() => setSelectedForDelete(null)}
-        onConfirm={() => selectedForDelete && deleteMutation.mutate(selectedForDelete)}
-        title="Delete Client Sub-Account"
-        description="Are you sure you want to remove this client sub-account? All associated campaigns and isolated settings will be detached."
-      />
-
-      {/* Add Client Drawer */}
-      <FormDrawer
-        isOpen={isAddOpen}
-        onClose={() => setIsAddOpen(false)}
-        title="Create Agency Client Sub-Account"
-        subtitle="Provision dedicated workspaces for client stakeholders."
-      >
-        <form
-          onSubmit={async (e) => {
-            e.preventDefault();
-            const form = e.target as HTMLFormElement;
-            const data = {
-              name: (form.elements.namedItem("name") as HTMLInputElement).value,
-              email: (form.elements.namedItem("email") as HTMLInputElement).value,
-              website: (form.elements.namedItem("website") as HTMLInputElement).value,
-            };
-
-            try {
-              await apiClient.post("/clients", data);
-              toast.success("Client account created");
-              setIsAddOpen(false);
-              refetch();
-            } catch (err: any) {
-              toast.error("Failed to create client");
-            }
-          }}
-          className="space-y-4 text-xs"
-        >
-          <div>
-            <label className="block font-medium text-zinc-300 mb-1">Client Company Name *</label>
-            <input name="name" required placeholder="e.g. Acme Ventures" 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">Primary Contact Email *</label>
-            <input type="email" name="email" required placeholder="contact@acme.com" 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">Website URL</label>
-            <input name="website" placeholder="https://acme.com" 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 border-t border-zinc-800">
-            <button
-              type="button"
-              onClick={() => setIsAddOpen(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"
-            >
-              Provision Account
-            </button>
-          </div>
-        </form>
-      </FormDrawer>
-    </div>
-  );
-}

src//pages//Dashboard.tsx

@@ -1,551 +0,0 @@
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { apiClient } from "../lib/apiClient";
-import { 
-  Megaphone, 
-  Users, 
-  Mail, 
-  Inbox, 
-  Flame, 
-  TrendingUp, 
-  Sparkles, 
-  Activity, 
-  Plus, 
-  ArrowUpRight, 
-  CheckCircle2, 
-  ShieldCheck, 
-  Radio, 
-  Zap 
-} from "lucide-react";
-import { 
-  LineChart, 
-  Line, 
-  XAxis, 
-  YAxis, 
-  CartesianGrid, 
-  Tooltip, 
-  ResponsiveContainer, 
-  PieChart, 
-  Pie, 
-  Cell 
-} from "recharts";
-import { useState } from "react";
-import { Link } from "react-router-dom";
-import StatCard from "../components/StatCard";
-import StatusBadge from "../components/StatusBadge";
-import FormDrawer from "../components/FormDrawer";
-import toast from "react-hot-toast";
-
-const lineData = [
-  { date: "Day 1", sent: 480, open: 310, reply: 28, bounce: 6 },
-  { date: "Day 4", sent: 820, open: 530, reply: 46, bounce: 10 },
-  { date: "Day 7", sent: 1250, open: 820, reply: 74, bounce: 14 },
-  { date: "Day 10", sent: 1780, open: 1190, reply: 105, bounce: 19 },
-  { date: "Day 14", sent: 2420, open: 1650, reply: 148, bounce: 23 },
-  { date: "Day 18", sent: 3150, open: 2190, reply: 196, bounce: 31 },
-  { date: "Day 22", sent: 4020, open: 2840, reply: 254, bounce: 38 },
-  { date: "Day 26", sent: 4980, open: 3510, reply: 312, bounce: 46 },
-  { date: "Day 30", sent: 5890, open: 4120, reply: 378, bounce: 52 },
-];
-
-const pieData = [
-  { name: "Interested", value: 340, color: "var(--nt-success)" },
-  { name: "Meeting Booked", value: 160, color: "var(--nt-accent)" },
-  { name: "Replied", value: 290, color: "var(--nt-info)" },
-  { name: "Not Interested", value: 180, color: "var(--nt-danger)" },
-  { name: "Bounced", value: 45, color: "var(--nt-espresso-700)" },
-];
-
-export default function Dashboard() {
-  const queryClient = useQueryClient();
-  const [isCreateCampaignOpen, setIsCreateCampaignOpen] = useState(false);
-  const [activeMetric, setActiveMetric] = useState<"all" | "open" | "reply">("all");
-
-  const { data: analytics, isLoading: isAnalyticsLoading, isError: isAnalyticsError } = useQuery({
-    queryKey: ["analytics-summary"],
-    queryFn: async () => {
-      const res = await apiClient.get("/analytics/campaigns");
-      return res.data;
-    },
-  });
-
-  const { data: campaigns, isLoading: isCampaignsLoading, isError: isCampaignsError } = useQuery({
-    queryKey: ["campaigns"],
-    queryFn: async () => {
-      const res = await apiClient.get("/campaigns");
-      return res.data;
-    },
-  });
-
-  const { data: emailAccounts = [], isLoading: isEmailAccountsLoading } = useQuery({
-    queryKey: ["email-accounts"],
-    queryFn: async () => {
-      const res = await apiClient.get("/email-accounts");
-      return res.data;
-    },
-  });
-
-  const warmupDailyCount = emailAccounts.reduce((total: number, account: any) => total + (account.warmup_daily_count || 0), 0);
-  const connectedMailboxCount = emailAccounts.filter((account: any) => account.status === "CONNECTED").length;
-  const warmupScoreValues = emailAccounts.map((account: any) => account.warmup_score).filter((score: any) => typeof score === "number");
-  const averageWarmupScore = warmupScoreValues.length
-    ? (warmupScoreValues.reduce((total: number, score: number) => total + score, 0) / warmupScoreValues.length).toFixed(1)
-    : null;
-
-  return (
-    <div className="p-6 max-w-7xl mx-auto space-y-7">
-      {/* Header with Live Status & Quick Action Buttons */}
-      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
-        <div>
-          <div className="flex items-center gap-2">
-            <h1 className="text-2xl font-bold tracking-tight text-zinc-100 flex items-center gap-2.5">
-              Command Center
-            </h1>
-            <span className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 px-2.5 py-0.5 rounded-full">
-              <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-ping" />
-              Live Engine
-            </span>
-          </div>
-          <p className="text-zinc-400 text-sm mt-1">
-            Real-time deliverability radar, campaign sequencing, and cold outreach throughput.
-          </p>
-        </div>
-
-        <div className="flex items-center gap-3">
-          <button
-            onClick={() => setIsCreateCampaignOpen(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" />
-            Create Campaign
-          </button>
-        </div>
-      </div>
-
-      {/* High-Impact Stat Cards */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-        <StatCard
-          title="Total Campaigns"
-          value={isCampaignsLoading ? "…" : isCampaignsError ? "—" : campaigns?.length ?? 0}
-          subtitle="Outbound Sequences"
-          icon={Megaphone}
-          iconColor="indigo"
-          change={{ value: "+2 new", isPositive: true, period: "this week" }}
-        />
-        <StatCard
-          title="Total Leads"
-          value={isAnalyticsLoading ? "…" : isAnalyticsError ? "—" : (analytics?.total_leads ?? 0).toLocaleString()}
-          subtitle="Prospects Targeted"
-          icon={Users}
-          iconColor="teal"
-          change={{ value: "+380", isPositive: true, period: "last 7 days" }}
-        />
-        <StatCard
-          title="Emails Sent"
-          value={isAnalyticsLoading ? "…" : isAnalyticsError ? "—" : (analytics?.total_sent ?? 0).toLocaleString()}
-          subtitle="Across All Mailboxes"
-          icon={Mail}
-          iconColor="blue"
-          change={{ value: "+14.8%", isPositive: true, period: "month-over-month" }}
-        />
-        <StatCard
-          title="Avg Reply Rate"
-          value={isAnalyticsLoading ? "…" : isAnalyticsError ? "—" : analytics?.reply_rate != null ? `${analytics.reply_rate}%` : "—"}
-          subtitle="Deliverability High"
-          icon={Inbox}
-          iconColor="emerald"
-          change={{ value: "+1.2%", isPositive: true, period: "vs benchmark" }}
-        />
-      </div>
-
-      {/* Deliverability & Mailbox Health Ribbon */}
-      <div className="command-signal-ribbon bg-gradient-to-r from-white/5 via-indigo-900/20 to-white/5 border border-white/10 backdrop-blur-md rounded-xl p-4 flex flex-col md:flex-row items-center justify-between gap-4 shadow-[0_8px_32px_-8px_rgba(6,10,12,0.65)]">
-        <div className="flex items-center gap-3">
-          <div className="p-2.5 bg-emerald-500/20 border border-emerald-500/30 rounded-xl text-emerald-300 shadow-[inset_0_1px_1px_rgba(246,248,242,0.1)]">
-            <ShieldCheck className="w-5 h-5 drop-shadow-[0_0_8px_rgba(63,156,132,0.5)]" />
-          </div>
-          <div>
-            <h4 className="text-sm font-semibold text-zinc-100 flex items-center gap-2">
-              Deliverability & Reputation Guard
-              <span className="text-[10px] font-bold uppercase tracking-wider bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 px-2 py-0.5 rounded-full drop-shadow-[0_0_8px_rgba(63,156,132,0.3)]">
-                {averageWarmupScore ? `${averageWarmupScore}% Score` : isEmailAccountsLoading ? "Checking score" : "No score"}
-              </span>
-            </h4>
-            <p className="text-xs text-zinc-400 mt-0.5">
-              {connectedMailboxCount} connected mailboxes with {warmupDailyCount} daily warmup messages.
-            </p>
-          </div>
-        </div>
-
-        <div className="flex items-center gap-4 text-xs">
-          <div className="flex items-center gap-2 bg-black/40 border border-white/5 px-3 py-1.5 rounded-lg shadow-[inset_0_1px_1px_rgba(246,248,242,0.02)]">
-            <Flame className="w-4 h-4 text-amber-400 drop-shadow-[0_0_8px_rgba(194,160,74,0.5)]" />
-            <span className="text-zinc-300 font-medium font-sans">Warmup:</span>
-            <span className="text-amber-400 font-bold font-mono drop-shadow-[0_0_8px_rgba(194,160,74,0.3)]">{warmupDailyCount} daily / {connectedMailboxCount} inboxes</span>
-          </div>
-          <Link
-            to="/warmup"
-            className="text-indigo-400 hover:text-indigo-300 font-medium flex items-center gap-1 transition-colors"
-          >
-            Warmup Center <ArrowUpRight className="w-3.5 h-3.5" />
-          </Link>
-        </div>
-      </div>
-
-      {/* Main Visualizations Grid */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* 30-Day Performance Multi-Line Chart */}
-        <div className="lg:col-span-2 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)] flex flex-col">
-          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6">
-            <div>
-              <h3 className="text-base font-semibold text-zinc-100 flex items-center gap-2">
-                <Activity className="w-4 h-4 text-indigo-400 drop-shadow-[0_0_8px_rgba(37,125,104,0.5)]" />
-                Performance Trajectory (30 Days)
-              </h3>
-              <p className="text-xs text-zinc-400 mt-0.5">
-                Sent volume, open rate, and reply convergence.
-              </p>
-            </div>
-
-            {/* Metric toggles */}
-            <div className="flex items-center bg-black/40 p-1 rounded-lg border border-white/5 text-xs shadow-[inset_0_1px_1px_rgba(246,248,242,0.02)]">
-              <button
-                onClick={() => setActiveMetric("all")}
-                className={`px-3 py-1 rounded-md font-medium transition-all duration-300 ${
-                  activeMetric === "all" ? "bg-indigo-600 text-white shadow-[0_0_12px_rgba(37,125,104,0.5)]" : "text-zinc-400 hover:text-zinc-200"
-                }`}
-              >
-                All Metrics
-              </button>
-              <button
-                onClick={() => setActiveMetric("open")}
-                className={`px-3 py-1 rounded-md font-medium transition-all duration-300 ${
-                  activeMetric === "open" ? "bg-emerald-600 text-white shadow-[0_0_12px_rgba(37,125,104,0.5)]" : "text-zinc-400 hover:text-zinc-200"
-                }`}
-              >
-                Opens
-              </button>
-              <button
-                onClick={() => setActiveMetric("reply")}
-                className={`px-3 py-1 rounded-md font-medium transition-all duration-300 ${
-                  activeMetric === "reply" ? "bg-purple-600 text-white shadow-[0_0_12px_rgba(178,87,49,0.5)]" : "text-zinc-400 hover:text-zinc-200"
-                }`}
-              >
-                Replies
-              </button>
-            </div>
-          </div>
-
-          <div className="h-[300px] w-full">
-            <ResponsiveContainer width="100%" height="100%">
-              <LineChart data={lineData} margin={{ top: 5, right: 10, bottom: 5, left: -10 }}>
-                <CartesianGrid strokeDasharray="3 3" stroke="rgba(246,248,242,0.05)" vertical={false} />
-                <XAxis dataKey="date" stroke="var(--nt-text-muted)" fontSize={12} tickLine={false} axisLine={false} />
-                <YAxis stroke="var(--nt-text-muted)" fontSize={12} tickLine={false} axisLine={false} className="font-mono" />
-                <Tooltip
-                  contentStyle={{
-                    backgroundColor: "rgba(6, 10, 12, 0.88)",
-                    backdropFilter: "blur(12px)",
-                    borderColor: "rgba(37,125,104,0.2)",
-                    borderRadius: "12px",
-                    color: "var(--nt-text-primary)",
-                    fontSize: "12px",
-                  }}
-                />
-                {(activeMetric === "all" || activeMetric === "open") && (
-                  <Line
-                    type="monotone"
-                    dataKey="sent"
-                    name="Sent"
-                     stroke="var(--nt-deep-teal-600)"
-                    strokeWidth={3}
-                     dot={{ r: 4, fill: "var(--nt-deep-teal-600)", strokeWidth: 2, stroke: "var(--nt-focus-ring-offset)" }}
-                     activeDot={{ r: 6, fill: "var(--nt-deep-teal-700)" }}
-                    animationDuration={1500}
-                  />
-                )}
-                {(activeMetric === "all" || activeMetric === "open") && (
-                  <Line
-                    type="monotone"
-                    dataKey="open"
-                    name="Opens"
-                     stroke="var(--nt-deep-teal-500)"
-                    strokeWidth={3}
-                     dot={{ r: 4, fill: "var(--nt-deep-teal-500)", strokeWidth: 2, stroke: "var(--nt-focus-ring-offset)" }}
-                     activeDot={{ r: 6, fill: "var(--nt-deep-teal-700)" }}
-                    animationDuration={1500}
-                  />
-                )}
-                {(activeMetric === "all" || activeMetric === "reply") && (
-                  <Line
-                    type="monotone"
-                    dataKey="reply"
-                    name="Replies"
-                     stroke="var(--nt-terracotta-500)"
-                    strokeWidth={3}
-                     dot={{ r: 4, fill: "var(--nt-terracotta-500)", strokeWidth: 2, stroke: "var(--nt-focus-ring-offset)" }}
-                     activeDot={{ r: 6, fill: "var(--nt-terracotta-700)" }}
-                    animationDuration={1500}
-                  />
-                )}
-                {activeMetric === "all" && (
-                  <Line
-                    type="monotone"
-                    dataKey="bounce"
-                    name="Bounces"
-                    stroke="var(--nt-danger)"
-                    strokeWidth={2}
-                    strokeDasharray="4 4"
-                    dot={false}
-                    animationDuration={1500}
-                  />
-                )}
-              </LineChart>
-            </ResponsiveContainer>
-          </div>
-
-          <div className="mt-4 pt-3 border-t border-white/5 flex items-center justify-between text-xs text-zinc-400">
-            <div className="flex items-center gap-4 font-sans">
-              <span className="flex items-center gap-1.5">
-                <span className="w-2.5 h-2.5 rounded-full bg-blue-500 shadow-[0_0_8px_rgba(63,156,132,0.8)]" /> Sent
-              </span>
-              <span className="flex items-center gap-1.5">
-                <span className="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(37,125,104,0.8)]" /> Opens
-              </span>
-              <span className="flex items-center gap-1.5">
-                <span className="w-2.5 h-2.5 rounded-full bg-purple-500 shadow-[0_0_8px_rgba(178,87,49,0.8)]" /> Replies
-              </span>
-              <span className="flex items-center gap-1.5">
-                <span className="w-2.5 h-2.5 rounded-full bg-rose-500 shadow-[0_0_8px_rgba(203,117,80,0.8)]" /> Bounces
-              </span>
-            </div>
-            <Link to="/analytics" className="text-indigo-400 hover:text-indigo-300 font-medium">
-              View Detailed Analytics →
-            </Link>
-          </div>
-        </div>
-
-        {/* Lead Status Distribution Donut */}
-        <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)] flex flex-col justify-between">
-          <div>
-            <h3 className="text-base font-semibold text-zinc-100 flex items-center gap-2">
-              <Zap className="w-4 h-4 text-amber-400 drop-shadow-[0_0_8px_rgba(194,160,74,0.5)]" />
-              Lead Intent Distribution
-            </h3>
-            <p className="text-xs text-zinc-400 mt-0.5">Classification of prospect responses.</p>
-          </div>
-
-          <div className="relative h-[220px] w-full flex items-center justify-center my-2">
-            <ResponsiveContainer width="100%" height="100%">
-              <PieChart>
-                <Pie
-                  data={pieData}
-                  innerRadius={65}
-                  outerRadius={95}
-                  paddingAngle={4}
-                  dataKey="value"
-                  stroke="none"
-                  animationDuration={1500}
-                >
-                  {pieData.map((entry, index) => (
-                    <Cell key={`cell-${index}`} fill={entry.color} />
-                  ))}
-                </Pie>
-                <Tooltip
-                  contentStyle={{
-                    backgroundColor: "rgba(6, 10, 12, 0.88)",
-                    backdropFilter: "blur(12px)",
-                    borderColor: "rgba(37,125,104,0.2)",
-                    borderRadius: "12px",
-                    fontSize: "12px",
-                  }}
-                />
-              </PieChart>
-            </ResponsiveContainer>
-            <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none drop-shadow-[0_0_12px_rgba(246,248,242,0.3)]">
-              <span className="text-2xl font-bold text-white font-mono">1,015</span>
-              <span className="text-[10px] uppercase tracking-wider text-zinc-400 font-medium font-sans">
-                Classified
-              </span>
-            </div>
-          </div>
-
-          <div className="space-y-1.5 pt-3 border-t border-white/5 text-xs font-sans">
-            {pieData.map((item) => (
-              <div key={item.name} className="flex items-center justify-between text-zinc-300">
-                <span className="flex items-center gap-2">
-                  <span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: item.color, boxShadow: `0 0 8px ${item.color}` }} />
-                  {item.name}
-                </span>
-                <span className="font-semibold text-zinc-200 font-mono">{item.value}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* Active Campaigns Overview 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="px-6 py-4 border-b border-white/5 flex items-center justify-between bg-white/[0.02]">
-          <div>
-            <h3 className="text-base font-semibold text-zinc-100 flex items-center gap-2">
-              <Radio className="w-4 h-4 text-indigo-400 drop-shadow-[0_0_8px_rgba(37,125,104,0.5)]" />
-              Active Outreach Sequences
-            </h3>
-            <p className="text-xs text-zinc-400 mt-0.5">
-              Live status, recipient quotas, and response metrics.
-            </p>
-          </div>
-          <Link
-            to="/campaigns"
-            className="text-xs font-semibold text-indigo-400 hover:text-indigo-300 transition-colors"
-          >
-            Manage Campaigns →
-          </Link>
-        </div>
-
-        <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">
-              <tr>
-                <th className="px-6 py-3 font-medium">Campaign</th>
-                <th className="px-6 py-3 font-medium">Status</th>
-                <th className="px-6 py-3 font-medium">Leads</th>
-                <th className="px-6 py-3 font-medium">Sent</th>
-                <th className="px-6 py-3 font-medium">Opens</th>
-                <th className="px-6 py-3 font-medium">Replies</th>
-                <th className="px-6 py-3 font-medium text-right">Action</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-white/5">
-              {(Array.isArray(campaigns) ? campaigns : []).map((camp: any) => (
-                <tr key={camp.id} className="hover:bg-white/5 transition-colors">
-                  <td className="px-6 py-4 font-semibold text-zinc-100">
-                    <Link to={`/campaigns/${camp.id}`} className="hover:text-indigo-400 transition-colors">
-                      {camp.name}
-                    </Link>
-                    <div className="text-[11px] text-zinc-400 font-normal mt-0.5 font-sans">
-                      {camp.timezone} • {camp.sequences?.length || 1} step sequence
-                    </div>
-                  </td>
-                  <td className="px-6 py-4">
-                    <StatusBadge status={camp.status} />
-                  </td>
-                  <td className="px-6 py-4 text-zinc-300 font-mono">{camp.lead_count || 0}</td>
-                  <td className="px-6 py-4 text-zinc-300 font-mono">{camp.sent_count || 0}</td>
-                  <td className="px-6 py-4 text-emerald-400 font-mono drop-shadow-[0_0_8px_rgba(63,156,132,0.3)]">{camp.open_count || 0}</td>
-                  <td className="px-6 py-4 text-purple-400 font-mono font-semibold drop-shadow-[0_0_8px_rgba(178,87,49,0.3)]">{camp.reply_count || 0}</td>
-                  <td className="px-6 py-4 text-right">
-                    <Link
-                      to={`/campaigns/${camp.id}`}
-                      className="px-3 py-1.5 bg-white/5 hover:bg-white/10 text-zinc-200 text-xs font-medium rounded-lg border border-white/5 transition-all inline-flex items-center gap-1 shadow-[inset_0_1px_1px_rgba(246,248,242,0.05)]"
-                    >
-                      Inspect <ArrowUpRight className="w-3 h-3" />
-                    </Link>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      {/* Quick Campaign Creator Slide-Over Drawer */}
-      <FormDrawer
-        isOpen={isCreateCampaignOpen}
-        onClose={() => setIsCreateCampaignOpen(false)}
-        title="Create New Campaign"
-        subtitle="Configure schedule, tracking domains, and email sequence steps."
-      >
-        <form
-          onSubmit={async (e) => {
-            e.preventDefault();
-            const form = e.target as HTMLFormElement;
-            const name = (form.elements.namedItem("name") as HTMLInputElement).value;
-            const timezone = (form.elements.namedItem("timezone") as HTMLSelectElement).value;
-            const initial_subject = (form.elements.namedItem("subject") as HTMLInputElement).value;
-            const initial_body = (form.elements.namedItem("body") as HTMLTextAreaElement).value;
-
-            try {
-              await apiClient.post("/campaigns", {
-                name,
-                timezone,
-                initial_subject,
-                initial_body,
-                track_settings: "TRACK_EMAIL_OPEN_AND_CLICK",
-              });
-              await queryClient.invalidateQueries({ queryKey: ["campaigns"] });
-              toast.success("Campaign created successfully");
-              setIsCreateCampaignOpen(false);
-            } catch (err: any) {
-              toast.error(err.message || "Failed to create campaign");
-            }
-          }}
-          className="space-y-4 text-sm"
-        >
-          <div>
-            <label className="block font-medium text-zinc-300 mb-1">Campaign Name</label>
-            <input
-              name="name"
-              required
-              placeholder="e.g. Q4 Tech VP Outreach"
-              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">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">Eastern Time (US & Canada)</option>
-              <option value="America/Chicago">Central Time (US & Canada)</option>
-              <option value="America/Los_Angeles">Pacific Time (US & Canada)</option>
-              <option value="Europe/London">London (GMT)</option>
-              <option value="Europe/Paris">Central European Time (CET)</option>
-              <option value="Asia/Singapore">Singapore (SGT)</option>
-            </select>
-          </div>
-
-          <div>
-            <label className="block font-medium text-zinc-300 mb-1">Step 1: Subject Line</label>
-            <input
-              name="subject"
-              required
-              defaultValue="Question about {{company_name}}'s pipeline"
-              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">Step 1: Email Body</label>
-            <textarea
-              name="body"
-              rows={4}
-              required
-              defaultValue="Hi {{first_name}},\n\nWanted to reach out and see if you are exploring new outbound channels this quarter?\n\nBest,\nAlex"
-              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 className="pt-4 flex justify-end gap-3">
-            <button
-              type="button"
-              onClick={() => setIsCreateCampaignOpen(false)}
-              className="px-4 py-2 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded-lg"
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white font-medium rounded-lg shadow-md"
-            >
-              Create Campaign
-            </button>
-          </div>
-        </form>
-      </FormDrawer>
-    </div>
-  );
-}

src//pages//EmailAccounts.tsx

@@ -1,393 +0,0 @@
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { apiClient } from "../lib/apiClient";
-import { 
-  Mail, 
-  Plus, 
-  RefreshCw, 
-  Trash2, 
-  CheckCircle2, 
-  AlertCircle, 
-  Server, 
-  Flame, 
-  Sliders, 
-  ShieldCheck 
-} from "lucide-react";
-import { useState } from "react";
-import StatusBadge from "../components/StatusBadge";
-import FormDrawer from "../components/FormDrawer";
-import ConfirmModal from "../components/ConfirmModal";
-import toast from "react-hot-toast";
-
-export default function EmailAccounts() {
-  const queryClient = useQueryClient();
-  const [isAddOpen, setIsAddOpen] = useState(false);
-  const [activeSetupTab, setActiveSetupTab] = useState<"smtp" | "google" | "outlook">("smtp");
-  const [selectedForDelete, setSelectedForDelete] = useState<string | null>(null);
-
-  const { data: accounts = [], isLoading, refetch } = useQuery({
-    queryKey: ["email-accounts"],
-    queryFn: async () => {
-      const res = await apiClient.get("/email-accounts");
-      return res.data;
-    },
-  });
-
-  const reconnectMutation = useMutation({
-    mutationFn: async (id: string) => {
-      const res = await apiClient.post("/email-accounts/reconnect", { account_id: id });
-      return res.data;
-    },
-    onSuccess: () => {
-      toast.success("Mailbox connection verified and active");
-      refetch();
-    },
-    onError: () => {
-      toast.error("Failed to verify mailbox connection");
-    }
-  });
-
-  const deleteMutation = useMutation({
-    mutationFn: async (id: string) => {
-      const res = await apiClient.delete(`/email-accounts/${id}`);
-      return res.data;
-    },
-    onSuccess: () => {
-      toast.success("Email account disconnected");
-      setSelectedForDelete(null);
-      refetch();
-    },
-  });
-
-  const getProviderIcon = (provider: string) => {
-    switch (provider?.toLowerCase()) {
-      case "google":
-      case "gmail":
-        return <span className="text-red-400 font-bold">G</span>;
-      case "microsoft":
-      case "outlook":
-        return <span className="text-blue-400 font-bold">M</span>;
-      default:
-        return <Server className="w-3.5 h-3.5 text-zinc-400" />;
-    }
-  };
-
-  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">
-            <Mail className="w-6 h-6 text-blue-400" />
-            Sending Inboxes & Mailboxes
-          </h1>
-          <p className="text-zinc-400 text-sm mt-1">
-            Connect and manage sending infrastructure across Google Workspace, Microsoft 365, and custom SMTP/IMAP.
-          </p>
-        </div>
-
-        <button
-          onClick={() => setIsAddOpen(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 Mailbox
-        </button>
-      </div>
-
-      {/* Overview Cards */}
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-        <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-4">
-          <span className="text-xs text-zinc-400">Total Sending Capacity</span>
-          <div className="text-2xl font-bold text-zinc-100 mt-1">
-            {accounts.reduce((sum: number, a: any) => sum + (a.daily_limit || 0), 0)} / day
-          </div>
-          <span className="text-[11px] text-zinc-500">{accounts.length} connected mailboxes</span>
-        </div>
-        <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-4">
-          <span className="text-xs text-zinc-400">Active in Warmup</span>
-          <div className="text-2xl font-bold text-amber-400 mt-1">
-            {accounts.filter((a: any) => a.warmup_enabled).length} of {accounts.length}
-          </div>
-          <span className="text-[11px] text-zinc-500">Autonomous ramp-up active</span>
-        </div>
-        <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-4">
-          <span className="text-xs text-zinc-400">Network Deliverability</span>
-          <div className="text-2xl font-bold text-emerald-400 mt-1">
-            {accounts.length ? `${(accounts.reduce((sum: number, account: any) => sum + (account.warmup_score || 0), 0) / accounts.length).toFixed(1)}%` : "—"}
-          </div>
-          <span className="text-[11px] text-zinc-500">All DNS / SPF / DKIM valid</span>
-        </div>
-      </div>
-
-      {/* Accounts 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">Account / Sender</th>
-                <th className="px-6 py-3.5 font-semibold">Provider</th>
-                <th className="px-6 py-3.5 font-semibold">Status</th>
-                <th className="px-6 py-3.5 font-semibold">Daily Limit & Usage</th>
-                <th className="px-6 py-3.5 font-semibold">Warmup</th>
-                <th className="px-6 py-3.5 font-semibold text-right">Actions</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-zinc-800/80">
-              {accounts.map((acc: any) => {
-                const usage = acc.sent_today || 0;
-                const limit = acc.daily_limit || 0;
-                const percentage = limit ? Math.min(100, Math.round((usage / limit) * 100)) : 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">{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">
-                      <span className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-zinc-950 border border-zinc-800 rounded-md text-xs text-zinc-300 font-medium capitalize">
-                        {getProviderIcon(acc.provider)}
-                        {acc.provider}
-                      </span>
-                    </td>
-                    <td className="px-6 py-4">
-                      <StatusBadge status={acc.status} size="sm" />
-                    </td>
-                    <td className="px-6 py-4">
-                      <div className="w-40 space-y-1">
-                        <div className="flex justify-between text-[11px] font-mono text-zinc-400">
-                          <span>{usage} sent</span>
-                          <span>{limit} limit</span>
-                        </div>
-                        <div className="w-full h-1.5 bg-zinc-950 rounded-full overflow-hidden border border-zinc-800">
-                          <div
-                            className={`h-full rounded-full ${
-                              percentage > 90 ? "bg-amber-500" : "bg-indigo-500"
-                            }`}
-                            style={{ width: `${percentage}%` }}
-                          />
-                        </div>
-                      </div>
-                    </td>
-                    <td className="px-6 py-4">
-                      <div className="flex items-center gap-2">
-                        <Flame className={`w-4 h-4 ${acc.warmup_enabled ? "text-amber-400 animate-pulse" : "text-zinc-600"}`} />
-                        <span className="text-xs font-medium text-zinc-300">
-                          {acc.warmup_enabled ? "Ramping Up" : "Disabled"}
-                        </span>
-                      </div>
-                    </td>
-                    <td className="px-6 py-4 text-right">
-                      <div className="flex items-center justify-end gap-2">
-                        <button
-                          onClick={() => reconnectMutation.mutate(acc.id)}
-                          title="Verify Connection"
-                          className="p-1.5 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded-md transition-colors"
-                        >
-                          <RefreshCw className="w-3.5 h-3.5" />
-                        </button>
-                        <button
-                          onClick={() => setSelectedForDelete(acc.id)}
-                          title="Disconnect Mailbox"
-                          className="p-1.5 bg-zinc-800 hover:bg-rose-500/20 text-zinc-400 hover:text-rose-400 rounded-md transition-colors"
-                        >
-                          <Trash2 className="w-3.5 h-3.5" />
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      {/* Delete Confirmation */}
-      <ConfirmModal
-        isOpen={Boolean(selectedForDelete)}
-        onClose={() => setSelectedForDelete(null)}
-        onConfirm={() => selectedForDelete && deleteMutation.mutate(selectedForDelete)}
-        title="Disconnect Mailbox"
-        description="Are you sure you want to disconnect this email account? Active campaigns using this mailbox will cease dispatching from it."
-        confirmText="Disconnect"
-      />
-
-      {/* Add Mailbox Drawer */}
-      <FormDrawer
-        isOpen={isAddOpen}
-        onClose={() => setIsAddOpen(false)}
-        title="Connect Sending Mailbox"
-        subtitle="Add Google Workspace, Microsoft 365, or Custom SMTP/IMAP credentials."
-      >
-        <div className="space-y-5 text-xs">
-          {/* Provider Selector Tabs */}
-          <div className="grid grid-cols-3 gap-2 p-1 bg-zinc-900 border border-zinc-800 rounded-xl">
-            <button
-              type="button"
-              onClick={() => setActiveSetupTab("smtp")}
-              className={`py-2 rounded-lg font-medium transition-colors ${
-                activeSetupTab === "smtp" ? "bg-indigo-600 text-white" : "text-zinc-400 hover:text-zinc-200"
-              }`}
-            >
-              SMTP / IMAP
-            </button>
-            <button
-              type="button"
-              onClick={() => setActiveSetupTab("google")}
-              className={`py-2 rounded-lg font-medium transition-colors ${
-                activeSetupTab === "google" ? "bg-indigo-600 text-white" : "text-zinc-400 hover:text-zinc-200"
-              }`}
-            >
-              Google OAuth
-            </button>
-            <button
-              type="button"
-              onClick={() => setActiveSetupTab("outlook")}
-              className={`py-2 rounded-lg font-medium transition-colors ${
-                activeSetupTab === "outlook" ? "bg-indigo-600 text-white" : "text-zinc-400 hover:text-zinc-200"
-              }`}
-            >
-              Microsoft 365
-            </button>
-          </div>
-
-          {activeSetupTab === "smtp" && (
-            <form
-              onSubmit={async (e) => {
-                e.preventDefault();
-                const form = e.target as HTMLFormElement;
-                const data = {
-                  from_name: (form.elements.namedItem("from_name") as HTMLInputElement).value,
-                  from_email: (form.elements.namedItem("from_email") as HTMLInputElement).value,
-                  smtp_host: (form.elements.namedItem("smtp_host") as HTMLInputElement).value,
-                  smtp_port: Number((form.elements.namedItem("smtp_port") as HTMLInputElement).value),
-                  smtp_username: (form.elements.namedItem("smtp_username") as HTMLInputElement).value,
-                  smtp_password: (form.elements.namedItem("smtp_password") as HTMLInputElement).value,
-                  imap_host: (form.elements.namedItem("imap_host") as HTMLInputElement).value,
-                  imap_port: Number((form.elements.namedItem("imap_port") as HTMLInputElement).value),
-                  imap_username: (form.elements.namedItem("imap_username") as HTMLInputElement).value,
-                  imap_password: (form.elements.namedItem("imap_password") as HTMLInputElement).value,
-                  daily_limit: Number((form.elements.namedItem("daily_limit") as HTMLInputElement).value),
-                  provider: "smtp",
-                };
-
-                try {
-                  await apiClient.post("/email-accounts/smtp", data);
-                  toast.success("SMTP Mailbox connected successfully");
-                  setIsAddOpen(false);
-                  refetch();
-                } catch (err: any) {
-                  toast.error(err.response?.data?.error || "Failed to connect SMTP account");
-                }
-              }}
-              className="space-y-4"
-            >
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <label className="block font-medium text-zinc-300 mb-1">Sender Name *</label>
-                  <input name="from_name" required placeholder="Alex Turner" 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">Email Address *</label>
-                  <input name="from_email" type="email" required placeholder="alex@company.com" className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100" />
-                </div>
-              </div>
-
-              <div className="pt-2 border-t border-zinc-800 space-y-3">
-                <h4 className="font-semibold text-zinc-400 uppercase tracking-wider text-[10px]">SMTP Configuration (Outbound)</h4>
-                <div className="grid grid-cols-3 gap-2">
-                  <div className="col-span-2">
-                    <label className="block font-medium text-zinc-400 mb-1">Host</label>
-                    <input name="smtp_host" defaultValue="smtp.mailgun.org" 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-400 mb-1">Port</label>
-                    <input name="smtp_port" defaultValue="587" required className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2 text-zinc-100" />
-                  </div>
-                </div>
-                <div className="grid grid-cols-2 gap-2">
-                  <div>
-                    <label className="block font-medium text-zinc-400 mb-1">Username</label>
-                    <input name="smtp_username" 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-400 mb-1">Password</label>
-                    <input name="smtp_password" type="password" required className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2 text-zinc-100" />
-                  </div>
-                </div>
-              </div>
-
-              <div className="pt-2 border-t border-zinc-800 space-y-3">
-                <h4 className="font-semibold text-zinc-400 uppercase tracking-wider text-[10px]">IMAP Configuration (Inbox & Replies)</h4>
-                <div className="grid grid-cols-3 gap-2">
-                  <div className="col-span-2">
-                    <label className="block font-medium text-zinc-400 mb-1">Host</label>
-                    <input name="imap_host" defaultValue="imap.mailgun.org" 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-400 mb-1">Port</label>
-                    <input name="imap_port" defaultValue="993" required className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2 text-zinc-100" />
-                  </div>
-                </div>
-                <div className="grid grid-cols-2 gap-2">
-                  <div>
-                    <label className="block font-medium text-zinc-400 mb-1">Username</label>
-                    <input name="imap_username" 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-400 mb-1">Password</label>
-                    <input name="imap_password" type="password" required className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2 text-zinc-100" />
-                  </div>
-                </div>
-              </div>
-
-              <div>
-                <label className="block font-medium text-zinc-300 mb-1">Max Daily Send Limit</label>
-                <input name="daily_limit" type="number" defaultValue="50" min="1" max="2000" 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 border-t border-zinc-800">
-                <button
-                  type="button"
-                  onClick={() => setIsAddOpen(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 hover:bg-indigo-500 text-white font-medium rounded-lg"
-                >
-                  Connect Mailbox
-                </button>
-              </div>
-            </form>
-          )}
-
-          {(activeSetupTab === "google" || activeSetupTab === "outlook") && (
-            <div className="py-8 text-center space-y-4">
-              <div className="p-4 bg-zinc-900 rounded-xl border border-zinc-800 max-w-sm mx-auto">
-                <div className="text-2xl mb-2 font-bold">{activeSetupTab === "google" ? "Google Workspace" : "Microsoft 365"}</div>
-                <p className="text-zinc-400 text-xs">
-                  Authorize direct OAuth access to dispatch outbound sequences with verified sender tokens.
-                </p>
-                <button
-                  type="button"
-                  onClick={() => {
-                    toast.success(`Connected ${activeSetupTab} account`);
-                    setIsAddOpen(false);
-                    refetch();
-                  }}
-                  className="mt-4 w-full py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white font-semibold rounded-lg shadow-md"
-                >
-                  Authorize with {activeSetupTab === "google" ? "Google" : "Microsoft"}
-                </button>
-              </div>
-            </div>
-          )}
-        </div>
-      </FormDrawer>
-    </div>
-  );
-}

src//pages//Gate.tsx

@@ -1,262 +0,0 @@
-import { FormEvent, useEffect, useMemo, useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { useApiKey } from "../context/ApiKeyContext";
-import "./gate.css";
-
-type Phase = "idle" | "handshake" | "cleared";
-
-const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
-
-function delay(ms: number) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-function maskKey(key: string): string {
-  const trimmed = key.trim();
-  if (trimmed.length <= 8) return "••••";
-  return `${trimmed.slice(0, 4)}••••${trimmed.slice(-4)}`;
-}
-
-function stampDate(): string {
-  return new Date()
-    .toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" })
-    .toUpperCase();
-}
-
-export default function Gate() {
-  const { apiKeys, activeKeyId, addApiKey, setActiveKeyId } = useApiKey();
-  const navigate = useNavigate();
-
-  const prefersReducedMotion = useMemo(
-    () => window.matchMedia(REDUCED_MOTION_QUERY).matches,
-    []
-  );
-
-  const hasStoredKeys = apiKeys.length > 0;
-  const [enterMode, setEnterMode] = useState<"resume" | "fresh">(
-    hasStoredKeys ? "resume" : "fresh"
-  );
-
-  const [workspaceName, setWorkspaceName] = useState("");
-  const [apiKey, setApiKey] = useState("");
-  const [showKey, setShowKey] = useState(false);
-  const [resumeKeyId, setResumeKeyId] = useState(activeKeyId ?? apiKeys[0]?.id ?? "");
-  const [error, setError] = useState<string | null>(null);
-  const [phase, setPhase] = useState<Phase>("idle");
-
-  const resumeKey = apiKeys.find((k) => k.id === resumeKeyId);
-
-  const aliveRef = useRef(true);
-  const timersRef = useRef<number[]>([]);
-  useEffect(() => {
-    aliveRef.current = true;
-    return () => {
-      aliveRef.current = false;
-      timersRef.current.forEach((t) => clearTimeout(t));
-    };
-  }, []);
-
-  function finish(opts: { name: string; key: string; resumeId?: string }) {
-    if (!aliveRef.current) return;
-    if (opts.resumeId) {
-      setActiveKeyId(opts.resumeId);
-    } else {
-      addApiKey(opts.name, opts.key, true);
-    }
-    navigate("/", { replace: true });
-  }
-
-  async function runHandshake(opts: { name: string; key: string; resumeId?: string }) {
-    setPhase("handshake");
-    setError(null);
-
-    if (prefersReducedMotion) {
-      finish(opts);
-      return;
-    }
-
-    await delay(620);
-    if (!aliveRef.current) return;
-    setPhase("cleared");
-    const t = window.setTimeout(() => {
-      finish(opts);
-    }, 900);
-    timersRef.current.push(t);
-  }
-
-  function handleSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    if (phase !== "idle") return;
-
-    if (enterMode === "resume" && resumeKey) {
-      void runHandshake({
-        name: resumeKey.name,
-        key: resumeKey.key,
-        resumeId: resumeKey.id,
-      });
-      return;
-    }
-
-    const name = workspaceName.trim();
-    const key = apiKey.trim();
-    if (!name) {
-      setError("Name your workspace — anything you will recognize later.");
-      return;
-    }
-    if (!key) {
-      setError("Paste your Smartlead API key to open the module.");
-      return;
-    }
-    void runHandshake({ name, key });
-  }
-
-  function enterDemo() {
-    if (phase !== "idle") return;
-    setEnterMode("fresh");
-    setWorkspaceName("Demo Workspace");
-    setApiKey("demo_bridge_e");
-    setError(null);
-    void runHandshake({ name: "Demo Workspace", key: "demo_bridge_e" });
-  }
-
-  const busy = phase !== "idle";
-  const buttonLabel =
-    phase === "idle"
-      ? "OPEN MODULE"
-      : phase === "handshake"
-        ? "OPENING…"
-        : "CLEARED";
-
-  return (
-    <div className="gate">
-      <h1 className="gate-sr">BRIDGE Modul E — connect a Smartlead workspace</h1>
-
-      <span className="gate-cropmark tl" aria-hidden="true" />
-      <span className="gate-cropmark tr" aria-hidden="true" />
-      <span className="gate-cropmark bl" aria-hidden="true" />
-      <span className="gate-cropmark br" aria-hidden="true" />
-
-      <div className="gate-formwrap">
-        {phase === "cleared" && (
-          <svg className="gate-stamp" viewBox="0 0 120 120" aria-hidden="true">
-            <circle cx="60" cy="60" r="56" fill="none" stroke="currentColor" strokeWidth="2.5" />
-            <circle cx="60" cy="60" r="47" fill="none" stroke="currentColor" strokeWidth="1.2" />
-            <path id="gate-stamp-arc" d="M 24 60 A 36 36 0 0 1 96 60" fill="none" />
-            <text fontSize="10.5" fontWeight="700" letterSpacing="2.5" fill="currentColor">
-              <textPath href="#gate-stamp-arc" startOffset="50%" textAnchor="middle">
-                CLEARED FOR DISPATCH
-              </textPath>
-            </text>
-            <text x="60" y="63" textAnchor="middle" fontSize="15" fontWeight="800" letterSpacing="1.5" fill="currentColor">
-              MODUL·E
-            </text>
-            <text x="60" y="78" textAnchor="middle" fontSize="8.5" fontWeight="600" letterSpacing="2" fill="currentColor">
-              {stampDate()}
-            </text>
-          </svg>
-        )}
-
-        <div className="gate-card">
-          <form onSubmit={handleSubmit} noValidate>
-            {enterMode === "resume" && hasStoredKeys ? (
-              <div className="gate-field">
-                <label htmlFor="gate-resume">Stored workspace</label>
-                <select
-                  id="gate-resume"
-                  value={resumeKeyId}
-                  onChange={(e) => setResumeKeyId(e.target.value)}
-                  disabled={busy}
-                >
-                  {apiKeys.map((k) => (
-                    <option key={k.id} value={k.id}>
-                      {k.name} — {maskKey(k.key)}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            ) : (
-              <>
-                <div className="gate-field">
-                  <label htmlFor="gate-name">Workspace name</label>
-                  <input
-                    id="gate-name"
-                    type="text"
-                    value={workspaceName}
-                    onChange={(e) => setWorkspaceName(e.target.value)}
-                    placeholder="e.g. Acme growth pod"
-                    autoComplete="off"
-                    disabled={busy}
-                  />
-                </div>
-                <div className="gate-field">
-                  <label htmlFor="gate-key">Smartlead API key</label>
-                  <div className="gate-key-row">
-                    <input
-                      id="gate-key"
-                      type={showKey ? "text" : "password"}
-                      value={apiKey}
-                      onChange={(e) => setApiKey(e.target.value)}
-                      placeholder="Paste your Smartlead key"
-                      autoComplete="off"
-                      spellCheck={false}
-                      disabled={busy}
-                      className="gate-key-input"
-                    />
-                    <button
-                      type="button"
-                      className="gate-peek"
-                      onClick={() => setShowKey((v) => !v)}
-                      disabled={busy || apiKey.length === 0}
-                    >
-                      {showKey ? "Hide" : "Show"}
-                    </button>
-                  </div>
-                </div>
-              </>
-            )}
-
-            {error && (
-              <p className="gate-error" role="alert">
-                {error}
-              </p>
-            )}
-
-            <button
-              type="submit"
-              className="gate-cta"
-              data-phase={phase}
-              disabled={busy}
-            >
-              {buttonLabel}
-            </button>
-
-            {enterMode === "resume" ? (
-              <button
-                type="button"
-                className="gate-switch"
-                onClick={() => {
-                  setEnterMode("fresh");
-                  setError(null);
-                }}
-                disabled={busy}
-              >
-                Use a different key
-              </button>
-            ) : (
-              <>
-                <div className="gate-or">
-                  <span aria-hidden="true" />
-                  OR
-                  <span aria-hidden="true" />
-                </div>
-                <button type="button" className="gate-demo" onClick={enterDemo} disabled={busy}>
-                  Enter with demo data
-                </button>
-              </>
-            )}
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-}

src//pages//Inbox.tsx

@@ -1,307 +0,0 @@
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { apiClient } from "../lib/apiClient";
-import { 
-  Inbox as InboxIcon, 
-  Search, 
-  Send, 
-  Sparkles, 
-  CheckCircle2, 
-  AlertCircle, 
-  Clock, 
-  Mail, 
-  Calendar, 
-  User, 
-  Building, 
-  ChevronRight, 
-  Paperclip,
-  Smile,
-  RefreshCw
-} from "lucide-react";
-import { useState } from "react";
-import DOMPurify from "dompurify";
-import StatusBadge from "../components/StatusBadge";
-import RichTextEditor from "../components/RichTextEditor";
-import toast from "react-hot-toast";
-
-const CATEGORIES = [
-  { key: "ALL", label: "All Messages" },
-  { key: "INTERESTED", label: "Interested" },
-  { key: "MEETING_BOOKED", label: "Meeting Booked" },
-  { key: "REPLIED", label: "Replied" },
-  { key: "NOT_INTERESTED", label: "Not Interested" },
-];
-
-export default function Inbox() {
-  const queryClient = useQueryClient();
-  const [selectedCategory, setSelectedCategory] = useState("ALL");
-  const [selectedMessageId, setSelectedMessageId] = useState<string | null>(null);
-  const [replyBody, setReplyBody] = useState("");
-
-  const { data: messages = [], isLoading, isError, refetch } = useQuery({
-    queryKey: ["inbox-messages", selectedCategory],
-    queryFn: async () => {
-      const res = await apiClient.get("/inbox", {
-        params: selectedCategory !== "ALL" ? { category: selectedCategory } : {},
-      });
-      return res.data;
-    },
-  });
-
-  const selectedMessage = (Array.isArray(messages) ? messages : []).find((m: any) => m.id === selectedMessageId) || (Array.isArray(messages) ? messages[0] : null);
-
-  const updateCategoryMutation = useMutation({
-    mutationFn: async ({ messageId, category }: { messageId: string; category: string }) => {
-      const res = await apiClient.post("/inbox/categorize", { thread_id: messageId, category });
-      return res.data;
-    },
-    onSuccess: () => {
-      toast.success("Lead categorization updated");
-      queryClient.invalidateQueries({ queryKey: ["inbox-messages"] });
-    },
-    onError: () => {
-      toast.error("Failed to update lead category");
-    },
-  });
-
-  const sendReplyMutation = useMutation({
-    mutationFn: async ({ campaignId, messageId, body }: { campaignId: string; messageId: string; body: string }) => {
-      const res = await apiClient.post(`/campaigns/${campaignId}/reply-email-thread`, { thread_id: messageId, reply_body: body });
-      return res.data;
-    },
-    onSuccess: () => {
-      toast.success("Reply dispatched to lead");
-      setReplyBody("");
-      queryClient.invalidateQueries({ queryKey: ["inbox-messages"] });
-    },
-    onError: () => {
-      toast.error("Failed to send reply");
-    }
-  });
-
-  return (
-    <div className="h-[calc(100vh-4rem)] flex flex-col overflow-hidden">
-      {/* Top Controls */}
-      <div className="h-14 border-b border-zinc-800 bg-zinc-950 px-6 flex items-center justify-between shrink-0">
-        <div className="flex items-center gap-3">
-          <div className="p-1.5 bg-indigo-500/10 text-indigo-400 rounded-lg">
-            <InboxIcon className="w-5 h-5" />
-          </div>
-          <div>
-            <h1 className="text-base font-bold text-zinc-100 flex items-center gap-2">
-              Unified Master Inbox
-              <span className="text-[10px] font-bold uppercase tracking-wider bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded-full">
-                AI Sentiment Active
-              </span>
-            </h1>
-          </div>
-        </div>
-
-        <div className="flex items-center gap-2">
-          <button
-            onClick={() => refetch()}
-            className="p-1.5 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900 rounded-lg transition-colors"
-            title="Refresh Inboxes"
-          >
-            <RefreshCw className="w-4 h-4" />
-          </button>
-        </div>
-      </div>
-
-      {/* 2-Pane Inbox Workspace */}
-      <div className="flex-1 flex overflow-hidden">
-        {/* Left Pane: Message List */}
-        <div className="w-80 md:w-96 border-r border-zinc-800 flex flex-col bg-zinc-950/60 shrink-0">
-          {/* Categories Filter Tabs */}
-          <div className="p-3 border-b border-zinc-800 flex gap-1 overflow-x-auto">
-            {CATEGORIES.map((cat) => (
-              <button
-                key={cat.key}
-                onClick={() => setSelectedCategory(cat.key)}
-                className={`px-2.5 py-1 rounded-md text-xs font-medium whitespace-nowrap transition-colors ${
-                  selectedCategory === cat.key
-                    ? "bg-indigo-600 text-white"
-                    : "bg-zinc-900 text-zinc-400 hover:text-zinc-200"
-                }`}
-              >
-                {cat.label}
-              </button>
-            ))}
-          </div>
-
-          {/* Messages Scroll Area */}
-          <div className="flex-1 overflow-y-auto divide-y divide-zinc-800/60">
-            {isLoading && (
-              <div className="p-8 text-center text-xs text-zinc-400" role="status">Loading message threads…</div>
-            )}
-
-            {isError && (
-              <div className="p-8 text-center text-xs text-rose-300" role="alert">Unable to load message threads.</div>
-            )}
-
-            {!isLoading && !isError && messages.map((msg: any) => {
-              const isSelected = msg.id === selectedMessage?.id;
-              return (
-                <div
-                  key={msg.id}
-                  onClick={() => setSelectedMessageId(msg.id)}
-                  onKeyDown={(event) => {
-                    if (event.key === "Enter" || event.key === " ") setSelectedMessageId(msg.id);
-                  }}
-                  role="button"
-                  tabIndex={0}
-                  aria-pressed={isSelected}
-                  className={`p-4 transition-colors cursor-pointer ${
-                    isSelected ? "bg-indigo-950/30 border-l-2 border-indigo-500" : "hover:bg-zinc-900/40"
-                  }`}
-                >
-                  <div className="flex items-start justify-between gap-2">
-                    <span className="font-semibold text-xs text-zinc-100 truncate">
-                      {msg.lead_name || msg.lead_email}
-                    </span>
-                    <span className="text-[10px] text-zinc-500 shrink-0">
-                      {new Date(msg.received_at || Date.now()).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
-                    </span>
-                  </div>
-
-                  <h4 className="text-xs font-medium text-zinc-300 mt-1 truncate">
-                    {msg.subject}
-                  </h4>
-
-                  <p className="text-[11px] text-zinc-500 mt-1 line-clamp-2 leading-relaxed">
-                    {msg.messages?.at(-1)?.body_html?.replace(/<[^>]*>?/gm, "") || "No message preview available"}
-                  </p>
-
-                  <div className="mt-2.5 flex items-center justify-between">
-                    <StatusBadge status={msg.category || "REPLIED"} size="sm" />
-                    <span className="text-[10px] text-zinc-400 font-mono">
-                      {msg.company_name}
-                    </span>
-                  </div>
-                </div>
-              );
-            })}
-
-            {messages.length === 0 && (
-              <div className="p-8 text-center text-xs text-zinc-500">
-                No replies found for this category filter.
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Right Pane: Thread View & Response Composer */}
-        {selectedMessage ? (
-          <div className="flex-1 flex flex-col bg-zinc-950 overflow-hidden">
-            {/* Thread Header */}
-            <div className="p-5 border-b border-zinc-800 bg-zinc-900/30 flex items-center justify-between shrink-0">
-              <div className="flex items-center gap-3">
-                <div className="w-9 h-9 rounded-full bg-indigo-600/20 text-indigo-400 flex items-center justify-center font-bold text-sm border border-indigo-500/30">
-                  {selectedMessage.lead_name ? selectedMessage.lead_name[0] : "L"}
-                </div>
-                <div>
-                  <h3 className="text-sm font-bold text-zinc-100 flex items-center gap-2">
-                    {selectedMessage.subject}
-                  </h3>
-                  <div className="text-xs text-zinc-400 flex items-center gap-2 mt-0.5">
-                    <span>{selectedMessage.lead_name} &lt;{selectedMessage.lead_email}&gt;</span>
-                    <span>•</span>
-                    <span className="font-mono text-zinc-500">{selectedMessage.company_name}</span>
-                  </div>
-                </div>
-              </div>
-
-              {/* Categorization Dropdown */}
-              <div className="flex items-center gap-2">
-                <span className="text-xs text-zinc-500">AI Intent:</span>
-                <select
-                  value={selectedMessage.category || "REPLIED"}
-                  onChange={(e) =>
-                    updateCategoryMutation.mutate({
-                      messageId: selectedMessage.id,
-                      category: e.target.value,
-                    })
-                  }
-                  className="bg-zinc-900 border border-zinc-800 rounded-lg py-1.5 px-3 text-xs text-zinc-200 focus:outline-none focus:border-indigo-500"
-                >
-                  <option value="INTERESTED">Interested</option>
-                  <option value="MEETING_BOOKED">Meeting Booked</option>
-                  <option value="REPLIED">Replied</option>
-                  <option value="NOT_INTERESTED">Not Interested</option>
-                </select>
-              </div>
-            </div>
-
-            {/* Conversation Messages */}
-            <div className="flex-1 overflow-y-auto p-6 space-y-4">
-              {(selectedMessage.messages || []).map((message: any) => {
-                const isInbound = message.direction === "INBOUND";
-                return (
-                  <div key={message.id} className={`max-w-2xl ${isInbound ? "ml-auto bg-indigo-950/40 border-indigo-500/30" : "bg-zinc-900 border-zinc-800"} border rounded-xl p-4 text-xs space-y-2`}>
-                    <div className={`flex items-center justify-between ${isInbound ? "text-indigo-300 border-indigo-500/20" : "text-zinc-400 border-zinc-800"} pb-2 border-b`}>
-                      <span className="font-semibold">{isInbound ? "Prospect reply" : "Outbound message"}</span>
-                      <span className="text-[10px] text-zinc-400">{new Date(message.timestamp).toLocaleString()}</span>
-                    </div>
-                    <div
-                      className="text-zinc-200 leading-relaxed prose prose-invert max-w-none text-xs"
-                      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(message.body_html || "") }}
-                    />
-                  </div>
-                );
-              })}
-            </div>
-
-            {/* Reply Composer Bottom Section */}
-            <div className="p-4 border-t border-zinc-800 bg-zinc-950 shrink-0 space-y-3">
-              <RichTextEditor
-                content={replyBody}
-                onChange={setReplyBody}
-                placeholder="Compose your reply or insert calendar meeting booking link..."
-              />
-
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <button
-                    type="button"
-                    onClick={() => setReplyBody("<p>Hi, how does Tuesday at 2 PM EST work for a quick 15-min call? Here is my calendar: https://cal.com/alex/15min</p>")}
-                    className="px-2.5 py-1 bg-zinc-900 hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 border border-zinc-800 rounded-md text-[11px] transition-colors"
-                  >
-                    + Insert Booking Link
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => setReplyBody("<p>Thanks for getting back to me! I have attached our case study PDF here.</p>")}
-                    className="px-2.5 py-1 bg-zinc-900 hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 border border-zinc-800 rounded-md text-[11px] transition-colors"
-                  >
-                    + Insert Case Study
-                  </button>
-                </div>
-
-                <button
-                  type="button"
-                  onClick={() => {
-                    if (!replyBody) {
-                      toast.error("Please write a reply message");
-                      return;
-                    }
-                    sendReplyMutation.mutate({
-                      campaignId: selectedMessage.campaign_id,
-                      messageId: selectedMessage.id,
-                      body: replyBody,
-                    });
-                  }}
-                  className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white font-medium text-xs rounded-lg transition-colors flex items-center gap-2 shadow-md"
-                >
-                  <Send className="w-3.5 h-3.5" /> Send Reply
-                </button>
-              </div>
-            </div>
-          </div>
-        ) : (
-          <div className="flex-1 flex items-center justify-center text-xs text-zinc-500">
-            Select a message thread from the left pane to view conversation.
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

src//pages//Leads.tsx

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

src//pages//Settings.tsx

@@ -1,434 +0,0 @@
-import { 
-  KeyRound, 
-  Plus, 
-  Trash2, 
-  Copy, 
-  CheckCircle2, 
-  AlertCircle, 
-  ShieldCheck, 
-  Sparkles, 
-  Globe, 
-  Clock, 
-  Sliders, 
-  Terminal, 
-  Activity,
-  Database
-} from "lucide-react";
-import { useState, useEffect } from "react";
-import { useApiKey } from "../context/ApiKeyContext";
-import { apiClient } from "../lib/apiClient";
-import FormDrawer from "../components/FormDrawer";
-import ConfirmModal from "../components/ConfirmModal";
-import toast from "react-hot-toast";
-import { supabase, isSupabaseConfigured, supabaseProjectRef, supabaseDashboardUrl } from "../lib/supabaseClient";
-
-export default function Settings() {
-  const { apiKeys, activeKeyId, setActiveKeyId, addApiKey, removeApiKey, renameApiKey } = useApiKey();
-  const [activeTab, setActiveTab] = useState<"keys" | "preferences" | "sandbox" | "database">("keys");
-  const [isAddKeyOpen, setIsAddKeyOpen] = useState(false);
-  const [keyToDelete, setKeyToDelete] = useState<string | null>(null);
-  const [testResult, setTestResult] = useState<{ status: "idle" | "testing" | "success" | "error"; message?: string; latency?: number }>({ status: "idle" });
-  const [supabaseStatus, setSupabaseStatus] = useState<"testing" | "connected" | "error" | "unconfigured">("testing");
-
-  useEffect(() => {
-    async function checkSupabase() {
-      if (!isSupabaseConfigured() || !supabase) {
-        setSupabaseStatus("unconfigured");
-        return;
-      }
-      try {
-        // Simple ping to check if credentials are valid
-        // Using auth.getSession() as a lightweight check
-        const { error } = await supabase.auth.getSession();
-        if (error) throw error;
-        setSupabaseStatus("connected");
-      } catch (err) {
-        console.error("Supabase connection error:", err);
-        setSupabaseStatus("error");
-      }
-    }
-    
-    if (activeTab === "database") {
-      checkSupabase();
-    }
-  }, [activeTab]);
-
-  const testActiveConnection = async () => {
-    setTestResult({ status: "testing" });
-    const startTime = Date.now();
-
-    try {
-      const res = await apiClient.get("/campaigns");
-      const latency = Date.now() - startTime;
-      setTestResult({
-        status: "success",
-        message: `Connected successfully. Response latency: ${latency}ms. Found ${res.data?.length || 0} campaigns.`,
-        latency,
-      });
-      toast.success("API Key verified successfully");
-    } catch (err: any) {
-      setTestResult({
-        status: "error",
-        message: err.response?.data?.error || "Failed to reach BRIDGEModulE API gateway",
-      });
-      toast.error("API connection test failed");
-    }
-  };
-
-  return (
-    <div className="p-6 max-w-7xl mx-auto space-y-6">
-      {/* Header */}
-      <div>
-        <h1 className="text-2xl font-bold tracking-tight text-zinc-100 flex items-center gap-2.5">
-          <KeyRound className="w-6 h-6 text-indigo-400" />
-          Settings & API Credentials
-        </h1>
-        <p className="text-zinc-400 text-sm mt-1">
-            Manage BRIDGEModulE API keys, system preferences, and test live gateway endpoints.
-        </p>
-      </div>
-
-      {/* Tabs */}
-      <div className="border-b border-zinc-800 flex items-center gap-2 text-sm font-medium">
-        <button
-          onClick={() => setActiveTab("keys")}
-          className={`px-4 py-2.5 border-b-2 font-medium text-xs flex items-center gap-2 transition-colors ${
-            activeTab === "keys"
-              ? "border-indigo-500 text-indigo-400 bg-indigo-500/5"
-              : "border-transparent text-zinc-400 hover:text-zinc-200"
-          }`}
-        >
-          <KeyRound className="w-4 h-4" /> API Key Manager ({apiKeys.length})
-        </button>
-        <button
-          onClick={() => setActiveTab("preferences")}
-          className={`px-4 py-2.5 border-b-2 font-medium text-xs flex items-center gap-2 transition-colors ${
-            activeTab === "preferences"
-              ? "border-indigo-500 text-indigo-400 bg-indigo-500/5"
-              : "border-transparent text-zinc-400 hover:text-zinc-200"
-          }`}
-        >
-          <Sliders className="w-4 h-4" /> System Preferences
-        </button>
-        <button
-          onClick={() => setActiveTab("sandbox")}
-          className={`px-4 py-2.5 border-b-2 font-medium text-xs flex items-center gap-2 transition-colors ${
-            activeTab === "sandbox"
-              ? "border-indigo-500 text-indigo-400 bg-indigo-500/5"
-              : "border-transparent text-zinc-400 hover:text-zinc-200"
-          }`}
-        >
-          <Terminal className="w-4 h-4" /> API Sandbox & Architecture
-        </button>
-        <button
-          onClick={() => setActiveTab("database")}
-          className={`px-4 py-2.5 border-b-2 font-medium text-xs flex items-center gap-2 transition-colors ${
-            activeTab === "database"
-              ? "border-emerald-500 text-emerald-400 bg-emerald-500/5"
-              : "border-transparent text-zinc-400 hover:text-zinc-200"
-          }`}
-        >
-          <Database className="w-4 h-4" /> Supabase Connection
-        </button>
-      </div>
-
-      {/* TAB 1: API KEYS */}
-      {activeTab === "keys" && (
-        <div className="space-y-6 max-w-4xl">
-          <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-5 shadow-sm space-y-4">
-            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
-              <div>
-                <h3 className="text-base font-semibold text-zinc-100">Configured BRIDGEModulE API Keys</h3>
-                <p className="text-xs text-zinc-400 mt-0.5">
-                  Store multiple keys for distinct environments or client workspaces.
-                </p>
-              </div>
-
-              <div className="flex items-center gap-2">
-                <button
-                  onClick={testActiveConnection}
-                  disabled={testResult.status === "testing"}
-                  className="px-3 py-1.5 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 text-xs font-medium rounded-lg transition-colors flex items-center gap-1.5 border border-zinc-700"
-                >
-                  <Activity className="w-3.5 h-3.5 text-emerald-400" />
-                  {testResult.status === "testing" ? "Testing..." : "Test Connection"}
-                </button>
-                <button
-                  onClick={() => setIsAddKeyOpen(true)}
-                  className="px-3.5 py-1.5 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-medium rounded-lg transition-colors flex items-center gap-1.5"
-                >
-                  <Plus className="w-3.5 h-3.5" /> Add API Key
-                </button>
-              </div>
-            </div>
-
-            {/* Test Connection Banner */}
-            {testResult.status === "success" && (
-              <div className="p-3 bg-emerald-500/10 border border-emerald-500/20 rounded-lg flex items-center gap-2.5 text-xs text-emerald-400">
-                <CheckCircle2 className="w-4 h-4 shrink-0" />
-                <span>{testResult.message}</span>
-              </div>
-            )}
-            {testResult.status === "error" && (
-              <div className="p-3 bg-rose-500/10 border border-rose-500/20 rounded-lg flex items-center gap-2.5 text-xs text-rose-400">
-                <AlertCircle className="w-4 h-4 shrink-0" />
-                <span>{testResult.message}</span>
-              </div>
-            )}
-
-            {/* Keys List */}
-            <div className="space-y-3 pt-2">
-              {apiKeys.map((k) => {
-                const isActive = k.id === activeKeyId;
-                const maskedKey = k.key.length > 8 
-                  ? `${k.key.substring(0, 4)}••••••••••••••••${k.key.substring(k.key.length - 4)}` 
-                  : "••••••••••••";
-
-                return (
-                  <div
-                    key={k.id}
-                    className={`p-4 rounded-xl border transition-all flex flex-col sm:flex-row sm:items-center justify-between gap-4 ${
-                      isActive
-                        ? "bg-indigo-950/20 border-indigo-500/40 shadow-sm"
-                        : "bg-zinc-950/60 border-zinc-800/80 hover:border-zinc-700"
-                    }`}
-                  >
-                    <div>
-                      <div className="flex items-center gap-2">
-                        <span className="font-semibold text-xs text-zinc-100">{k.name}</span>
-                        {isActive && (
-                          <span className="text-[10px] font-bold uppercase tracking-wider bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded-full">
-                            Active Key
-                          </span>
-                        )}
-                      </div>
-                      <div className="font-mono text-xs text-zinc-400 mt-1 flex items-center gap-2">
-                        <span>{maskedKey}</span>
-                        <button
-                          onClick={() => {
-                            navigator.clipboard.writeText(k.key);
-                            toast.success("API key copied to clipboard");
-                          }}
-                          className="text-zinc-500 hover:text-zinc-300 p-1"
-                        >
-                          <Copy className="w-3.5 h-3.5" />
-                        </button>
-                      </div>
-                    </div>
-
-                    <div className="flex items-center gap-2">
-                      {!isActive && (
-                        <button
-                          onClick={() => {
-                            setActiveKeyId(k.id);
-                            toast.success(`Switched active key to "${k.name}"`);
-                          }}
-                          className="px-3 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-xs font-medium rounded-md transition-colors"
-                        >
-                          Set as Active
-                        </button>
-                      )}
-                      <button
-                        onClick={() => setKeyToDelete(k.id)}
-                        className="p-1.5 text-zinc-500 hover:text-rose-400 hover:bg-rose-500/10 rounded-md transition-colors"
-                      >
-                        <Trash2 className="w-4 h-4" />
-                      </button>
-                    </div>
-                  </div>
-                );
-              })}
-
-              {apiKeys.length === 0 && (
-                <div className="p-8 text-center text-xs text-zinc-500 bg-zinc-950/40 rounded-xl border border-dashed border-zinc-800">
-                  No custom API keys saved. The app is currently operating in high-fidelity mock database mode.
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* TAB 2: PREFERENCES */}
-      {activeTab === "preferences" && (
-        <div className="space-y-6 max-w-2xl bg-zinc-900 border border-zinc-800 rounded-xl p-6">
-          <h3 className="text-base font-semibold text-zinc-100 mb-4">Workspace Outreach Defaults</h3>
-          <div className="space-y-4 text-xs">
-            <div>
-              <label className="block font-medium text-zinc-300 mb-1">Default Sending Timezone</label>
-              <select
-                defaultValue="America/New_York"
-                className="w-full bg-zinc-950 border border-zinc-800 rounded-lg p-2.5 text-zinc-100"
-              >
-                <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>
-              </select>
-            </div>
-
-            <div>
-              <label className="block font-medium text-zinc-300 mb-1">Global Mailbox Rate Limiting</label>
-              <input
-                type="number"
-                defaultValue="50"
-                className="w-full bg-zinc-950 border border-zinc-800 rounded-lg p-2.5 text-zinc-100"
-              />
-              <span className="text-[11px] text-zinc-500 mt-1 block">Maximum outbound emails per mailbox / 24 hours</span>
-            </div>
-
-            <div className="pt-4 flex justify-end">
-              <button
-                type="button"
-                onClick={() => toast.success("Preferences updated")}
-                className="px-4 py-2 bg-indigo-600 text-white rounded-lg font-medium"
-              >
-                Save Preferences
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* TAB 3: SANDBOX */}
-      {activeTab === "sandbox" && (
-        <div className="space-y-4 max-w-4xl bg-zinc-900 border border-zinc-800 rounded-xl p-6">
-          <h3 className="text-base font-semibold text-zinc-100 flex items-center gap-2">
-            <Terminal className="w-5 h-5 text-indigo-400" /> Backend Gateway Architecture
-          </h3>
-          <p className="text-xs text-zinc-400 leading-relaxed">
-            All requests from the frontend client route securely through the Node.js/Express proxy (`/api/*`).
-            The proxy attaches the active API key as a query parameter (`?api_key=...`) to the core REST API endpoint (`https://server.smartlead.ai/api/v1`).
-          </p>
-
-          <div className="p-4 bg-zinc-950 border border-zinc-800 rounded-lg font-mono text-xs text-zinc-300 space-y-2">
-            <span className="text-emerald-400"># Example Proxy Request</span><br />
-            GET /api/campaigns → https://server.smartlead.ai/api/v1/campaigns?api_key=&#123;KEY&#125;<br />
-            POST /api/leads/search → https://server.smartlead.ai/api/v1/leads/?api_key=&#123;KEY&#125;
-          </div>
-        </div>
-      )}
-
-      {/* TAB 4: DATABASE / SUPABASE */}
-      {activeTab === "database" && (
-        <div className="space-y-6 max-w-4xl">
-          <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-6 shadow-sm space-y-6">
-            <div>
-              <h3 className="text-base font-semibold text-zinc-100 flex items-center gap-2">
-                <Database className="w-5 h-5 text-emerald-400" /> Supabase Integration Status
-              </h3>
-              <p className="text-xs text-zinc-400 mt-1">
-                Check the connection to your Supabase project instance ({supabaseProjectRef()}). 
-                To configure, provide your URL and Anon Key in your environment variables.
-              </p>
-            </div>
-
-            <div className={`p-4 rounded-xl border flex items-start gap-4 transition-colors ${
-              supabaseStatus === "connected" ? "bg-emerald-500/10 border-emerald-500/30" :
-              supabaseStatus === "unconfigured" ? "bg-amber-500/10 border-amber-500/30" :
-              supabaseStatus === "error" ? "bg-rose-500/10 border-rose-500/30" :
-              "bg-zinc-950/60 border-zinc-800"
-            }`}>
-              {supabaseStatus === "connected" && <CheckCircle2 className="w-6 h-6 text-emerald-400 shrink-0" />}
-              {supabaseStatus === "unconfigured" && <AlertCircle className="w-6 h-6 text-amber-400 shrink-0" />}
-              {supabaseStatus === "error" && <AlertCircle className="w-6 h-6 text-rose-400 shrink-0" />}
-              {supabaseStatus === "testing" && <Activity className="w-6 h-6 text-zinc-400 shrink-0 animate-pulse" />}
-
-              <div className="space-y-1">
-                <h4 className={`text-sm font-semibold ${
-                  supabaseStatus === "connected" ? "text-emerald-400" :
-                  supabaseStatus === "unconfigured" ? "text-amber-400" :
-                  supabaseStatus === "error" ? "text-rose-400" :
-                  "text-zinc-300"
-                }`}>
-                  {supabaseStatus === "connected" ? "Connection Established" :
-                   supabaseStatus === "unconfigured" ? "Missing Credentials" :
-                   supabaseStatus === "error" ? "Connection Failed" :
-                   "Testing Connection..."}
-                </h4>
-                <p className="text-xs text-zinc-400 leading-relaxed">
-                  {supabaseStatus === "connected" ? `Successfully communicating with Supabase project ${supabaseProjectRef()}.` :
-                   supabaseStatus === "unconfigured" ? "Cannot connect to Supabase. Please ensure VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY are set in your environment variables (.env file)." :
-                   supabaseStatus === "error" ? "Failed to establish a connection with the provided credentials. Please verify your Project URL and Anon Key." :
-                   "Pinging Supabase endpoints..."}
-                </p>
-              </div>
-            </div>
-
-            <div className="space-y-3 pt-2">
-              <h4 className="text-sm font-semibold text-zinc-200">Configuration Guide</h4>
-              <ol className="list-decimal list-inside space-y-2 text-xs text-zinc-400">
-                <li>Go to your Supabase Dashboard: <a href={supabaseDashboardUrl()} target="_blank" rel="noreferrer" className="text-emerald-400 hover:underline">Project {supabaseProjectRef()}</a></li>
-                <li>Navigate to Project Settings {"->"} API.</li>
-                <li>Copy the <strong>Project URL</strong> and add it to <code className="bg-zinc-950 px-1 py-0.5 rounded text-zinc-300">VITE_SUPABASE_URL</code>.</li>
-                <li>Copy the <strong>anon public</strong> key and add it to <code className="bg-zinc-950 px-1 py-0.5 rounded text-zinc-300">VITE_SUPABASE_ANON_KEY</code>.</li>
-              </ol>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Add Key Drawer */}
-      <FormDrawer
-        isOpen={isAddKeyOpen}
-        onClose={() => setIsAddKeyOpen(false)}
-        title="Add BRIDGEModulE API Key"
-        subtitle="Retrieve your API key from Settings -> Profile -> API Keys"
-      >
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            const form = e.target as HTMLFormElement;
-            const name = (form.elements.namedItem("name") as HTMLInputElement).value;
-            const key = (form.elements.namedItem("key") as HTMLInputElement).value;
-
-            addApiKey(name, key);
-            toast.success("API Key saved & activated");
-            setIsAddKeyOpen(false);
-          }}
-          className="space-y-4 text-xs"
-        >
-          <div>
-            <label className="block font-medium text-zinc-300 mb-1">Key Friendly Name *</label>
-            <input name="name" required placeholder="e.g. Production Main Key" 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">API Key Token *</label>
-            <input name="key" type="password" required placeholder="sl_live_..." className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100 font-mono" />
-          </div>
-
-          <div className="pt-4 flex justify-end gap-2 border-t border-zinc-800">
-            <button
-              type="button"
-              onClick={() => setIsAddKeyOpen(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 Key
-            </button>
-          </div>
-        </form>
-      </FormDrawer>
-
-      {/* Delete Key Modal */}
-      <ConfirmModal
-        isOpen={Boolean(keyToDelete)}
-        onClose={() => setKeyToDelete(null)}
-        onConfirm={() => {
-          if (keyToDelete) {
-            removeApiKey(keyToDelete);
-            toast.success("API key deleted");
-            setKeyToDelete(null);
-          }
-        }}
-        title="Delete API Key"
-        description="Are you sure you want to remove this stored API key?"
-      />
-    </div>
-  );
-}

src//pages//Warmup.tsx

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

src//pages//Webhooks.tsx

@@ -1,316 +0,0 @@
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { apiClient } from "../lib/apiClient";
-import { 
-  Webhook, 
-  Plus, 
-  Play, 
-  Trash2, 
-  CheckCircle2, 
-  AlertCircle, 
-  Code, 
-  ExternalLink, 
-  Copy,
-  Terminal
-} from "lucide-react";
-import { useState } from "react";
-import StatusBadge from "../components/StatusBadge";
-import FormDrawer from "../components/FormDrawer";
-import ConfirmModal from "../components/ConfirmModal";
-import toast from "react-hot-toast";
-
-const AVAILABLE_EVENTS = [
-  { id: "EMAIL_REPLIED", label: "Email Replied" },
-  { id: "EMAIL_OPENED", label: "Email Opened" },
-  { id: "EMAIL_CLICKED", label: "Link Clicked" },
-  { id: "EMAIL_BOUNCED", label: "Email Bounced" },
-  { id: "LEAD_CATEGORY_UPDATED", label: "Lead Category Updated" },
-  { id: "EMAIL_UNSUBSCRIBED", label: "Lead Unsubscribed" },
-  { id: "CAMPAIGN_COMPLETED", label: "Campaign Completed" },
-];
-
-export default function Webhooks() {
-  const queryClient = useQueryClient();
-  const [isCreateOpen, setIsCreateOpen] = useState(false);
-  const [selectedForDelete, setSelectedForDelete] = useState<string | null>(null);
-  const [testExecutionResult, setTestExecutionResult] = useState<any | null>(null);
-
-  const { data: webhooks = [], isLoading, refetch } = useQuery({
-    queryKey: ["webhooks"],
-    queryFn: async () => {
-      const res = await apiClient.get("/webhooks");
-      return res.data;
-    },
-  });
-
-  const { data: campaigns = [] } = useQuery({
-    queryKey: ["campaigns"],
-    queryFn: async () => {
-      const res = await apiClient.get("/campaigns");
-      return res.data;
-    },
-  });
-
-  const testFireMutation = useMutation({
-    mutationFn: async (id: string) => {
-      const res = await apiClient.post(`/webhooks/${id}/test`);
-      return res.data;
-    },
-    onSuccess: (data) => {
-      toast.success("Webhook test payload dispatched");
-      setTestExecutionResult(data);
-    },
-    onError: () => {
-      toast.error("Failed to fire test webhook");
-    },
-  });
-
-  const deleteMutation = useMutation({
-    mutationFn: async (id: string) => {
-      const res = await apiClient.delete(`/webhooks/${id}`);
-      return res.data;
-    },
-    onSuccess: () => {
-      toast.success("Webhook endpoint removed");
-      setSelectedForDelete(null);
-      refetch();
-    },
-  });
-
-  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">
-            <Webhook className="w-6 h-6 text-purple-400" />
-            Event Webhooks & Integrations
-          </h1>
-          <p className="text-zinc-400 text-sm mt-1">
-            Stream real-time outreach events directly to your CRM, Slack, Zapier, or backend server.
-          </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"
-        >
-          <Plus className="w-4 h-4" /> Add Webhook
-        </button>
-      </div>
-
-      {/* Webhooks 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">Endpoint URL</th>
-                <th className="px-6 py-3.5 font-semibold">Campaign Scope</th>
-                <th className="px-6 py-3.5 font-semibold">Subscribed Events</th>
-                <th className="px-6 py-3.5 font-semibold">Status</th>
-                <th className="px-6 py-3.5 font-semibold text-right">Actions</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-zinc-800/80">
-              {webhooks.map((hook: any) => (
-                <tr key={hook.id} className="hover:bg-zinc-800/30 transition-colors">
-                  <td className="px-6 py-4">
-                    <div className="flex items-center gap-2">
-                      <span className="font-mono text-xs text-zinc-200 font-medium">
-                         {hook.webhook_url}
-                      </span>
-                      <button
-                        onClick={() => {
-                           navigator.clipboard.writeText(hook.webhook_url);
-                          toast.success("Copied webhook URL");
-                        }}
-                        className="text-zinc-500 hover:text-zinc-300 p-1"
-                      >
-                        <Copy className="w-3.5 h-3.5" />
-                      </button>
-                    </div>
-                  </td>
-                  <td className="px-6 py-4 text-xs text-zinc-300">
-                    {hook.campaign_id ? `Campaign: ${hook.campaign_id}` : "Global (All Campaigns)"}
-                  </td>
-                  <td className="px-6 py-4">
-                    <div className="flex flex-wrap gap-1 max-w-xs">
-                      {hook.event_types?.map((ev: string) => (
-                        <span
-                          key={ev}
-                          className="px-2 py-0.5 bg-zinc-950 text-indigo-300 border border-indigo-500/20 rounded text-[10px] font-mono"
-                        >
-                          {ev}
-                        </span>
-                      ))}
-                    </div>
-                  </td>
-                  <td className="px-6 py-4">
-                    <StatusBadge status={hook.status || "ACTIVE"} size="sm" />
-                  </td>
-                  <td className="px-6 py-4 text-right">
-                    <div className="flex items-center justify-end gap-2">
-                      <button
-                        onClick={() => testFireMutation.mutate(hook.id)}
-                        disabled={testFireMutation.isPending}
-                        className="px-2.5 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 text-xs font-medium rounded-md transition-colors flex items-center gap-1"
-                      >
-                        <Play className="w-3 h-3 text-emerald-400" /> Test Fire
-                      </button>
-                      <button
-                        onClick={() => setSelectedForDelete(hook.id)}
-                        className="p-1.5 text-zinc-500 hover:text-rose-400 hover:bg-rose-500/10 rounded-md transition-colors"
-                      >
-                        <Trash2 className="w-3.5 h-3.5" />
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              ))}
-
-              {webhooks.length === 0 && (
-                <tr>
-                  <td colSpan={5} className="py-16 text-center text-xs text-zinc-500">
-                    No webhooks configured yet. Create one to receive real-time JSON payloads.
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      {/* Test Fire Response Inspector */}
-      {testExecutionResult && (
-        <div className="bg-zinc-950 border border-zinc-800 rounded-xl p-5 shadow-lg space-y-3">
-          <div className="flex items-center justify-between">
-            <h3 className="text-xs font-semibold text-emerald-400 flex items-center gap-2 uppercase tracking-wider">
-              <Terminal className="w-4 h-4" /> Live Webhook Delivery Simulation (200 OK)
-            </h3>
-            <button
-              onClick={() => setTestExecutionResult(null)}
-              className="text-xs text-zinc-500 hover:text-zinc-300"
-            >
-              Close Inspector
-            </button>
-          </div>
-          <pre className="p-4 bg-zinc-900 border border-zinc-800 rounded-lg text-xs font-mono text-zinc-300 overflow-x-auto">
-            {JSON.stringify(testExecutionResult, null, 2)}
-          </pre>
-        </div>
-      )}
-
-      {/* Delete Confirmation */}
-      <ConfirmModal
-        isOpen={Boolean(selectedForDelete)}
-        onClose={() => setSelectedForDelete(null)}
-        onConfirm={() => selectedForDelete && deleteMutation.mutate(selectedForDelete)}
-        title="Delete Webhook"
-        description="Are you sure you want to delete this webhook endpoint? No further notifications will be dispatched to this URL."
-      />
-
-      {/* Create Webhook Drawer */}
-      <FormDrawer
-        isOpen={isCreateOpen}
-        onClose={() => setIsCreateOpen(false)}
-        title="Create Webhook Subscription"
-        subtitle="Specify the destination HTTPS endpoint and target event triggers."
-      >
-        <form
-          onSubmit={async (e) => {
-            e.preventDefault();
-            const form = e.target as HTMLFormElement;
-            const target_url = (form.elements.namedItem("target_url") as HTMLInputElement).value;
-            const campaign_id = (form.elements.namedItem("campaign_id") as HTMLSelectElement).value;
-            const checkedEvents = AVAILABLE_EVENTS.filter(
-              (ev) => (form.elements.namedItem(ev.id) as HTMLInputElement)?.checked
-            ).map((ev) => ev.id);
-
-            if (checkedEvents.length === 0) {
-              toast.error("Please select at least one event trigger");
-              return;
-            }
-
-            try {
-              await apiClient.post("/webhooks", {
-                 webhook_url: target_url,
-                campaign_id: campaign_id === "ALL" ? null : campaign_id,
-                event_types: checkedEvents,
-              });
-              toast.success("Webhook configured successfully");
-              setIsCreateOpen(false);
-              refetch();
-            } catch (err: any) {
-              toast.error("Failed to create webhook");
-            }
-          }}
-          className="space-y-4 text-xs"
-        >
-          <div>
-            <label className="block font-medium text-zinc-300 mb-1">Target Endpoint URL *</label>
-            <input
-              name="target_url"
-              type="url"
-              required
-              placeholder="https://api.yourdomain.com/webhooks/smartlead"
-              className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100 font-mono"
-            />
-          </div>
-
-          <div>
-            <label className="block font-medium text-zinc-300 mb-1">Campaign Scope</label>
-            <select
-              name="campaign_id"
-              defaultValue="ALL"
-              className="w-full bg-zinc-900 border border-zinc-800 rounded-lg p-2.5 text-zinc-100"
-            >
-              <option value="ALL">All Campaigns (Global Scope)</option>
-              {campaigns.map((c: any) => (
-                <option key={c.id} value={c.id}>
-                  {c.name}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          <div className="space-y-2 pt-2 border-t border-zinc-800">
-            <label className="block font-medium text-zinc-300 mb-2">Subscribe to Events *</label>
-            <div className="grid grid-cols-1 gap-2">
-              {AVAILABLE_EVENTS.map((ev) => (
-                <label
-                  key={ev.id}
-                  className="flex items-center gap-2 p-2.5 bg-zinc-900 border border-zinc-800 rounded-lg cursor-pointer hover:bg-zinc-800/60"
-                >
-                  <input
-                    type="checkbox"
-                    name={ev.id}
-                    defaultChecked
-                    className="w-4 h-4 rounded text-indigo-600 focus:ring-indigo-500 bg-zinc-950 border-zinc-700"
-                  />
-                  <span className="text-zinc-200 font-medium">{ev.label}</span>
-                  <span className="text-[10px] text-zinc-500 font-mono ml-auto">{ev.id}</span>
-                </label>
-              ))}
-            </div>
-          </div>
-
-          <div className="pt-4 flex justify-end gap-2 border-t border-zinc-800">
-            <button
-              type="button"
-              onClick={() => setIsCreateOpen(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"
-            >
-              Register Webhook
-            </button>
-          </div>
-        </form>
-      </FormDrawer>
-    </div>
-  );
-}

src//pages//gate.css

@@ -1,420 +0,0 @@
-/*
- * BRIDGE Modul E — gate, "Moss & Ember Press" system
- * Scoped strictly under .gate; global app tokens untouched.
- *
- * Token source (user-specified palette):
- *   moss ramp  #394319 #637330 #8CA14A #ABBB77 #C7D0A9 #D6DCC1 #E4E8D9
- *   forest ink #13301E
- *   ember      #C66306 (vibrant accent)
- * Text-contrast notes (verified):
- *   #13301E on #E4E8D9 ≈ 11.5:1 (AAA) · #394319 on #E4E8D9 ≈ 8.5:1 (AAA)
- *   #9C4A03 on #E4E8D9 ≈ 5.0:1 (AA small text) · #C66306 reserved for
- *   fills / focus / large marks · white on #B45A05 ≈ 4.8:1 (AA)
- */
-
-.gate {
-  --g-paper: #e4e8d9;
-  --g-mist: #d6dcc1;
-  --g-sage: #c7d0a9;
-  --g-moss-l: #abbb77;
-  --g-moss: #8ca14a;
-  --g-olive: #637330;
-  --g-olive-d: #394319;
-  --g-ink: #13301e;
-  --g-ember: #c66306;
-  --g-ember-press: #b45a05;
-  --g-ember-text: #9c4a03;
-  --g-card: color-mix(in srgb, #e4e8d9 52%, #ffffff 48%);
-
-  --g-pad: 30px;
-
-  display: grid;
-  place-items: center;
-  min-height: 100vh;
-  min-height: 100dvh;
-  padding: 24px;
-  background:
-    radial-gradient(52rem 30rem at 86% -10%, color-mix(in srgb, var(--g-ember) 13%, transparent), transparent 62%),
-    radial-gradient(46rem 32rem at -10% 108%, color-mix(in srgb, var(--g-moss) 20%, transparent), transparent 58%),
-    repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--g-sage) 40%, transparent) 31px 32px),
-    repeating-linear-gradient(90deg, transparent 0 31px, color-mix(in srgb, var(--g-sage) 40%, transparent) 31px 32px),
-    linear-gradient(170deg, var(--g-paper) 0%, var(--g-mist) 100%);
-  color: var(--g-ink);
-  font-family: var(--font-sans);
-}
-
-.gate ::selection {
-  background: var(--g-moss);
-  color: var(--g-paper);
-}
-
-/* ---------------------------------- screen-reader-only h1 ---------------------------------- */
-
-.gate-sr {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* ---------------------------------- desk trim ---------------------------------- */
-
-.gate-cropmark {
-  position: fixed;
-  width: 18px;
-  height: 18px;
-  pointer-events: none;
-  opacity: 0.55;
-}
-
-.gate-cropmark.tl {
-  top: 16px;
-  left: 16px;
-  border-top: 1.5px solid var(--g-olive);
-  border-left: 1.5px solid var(--g-olive);
-}
-
-.gate-cropmark.tr {
-  top: 16px;
-  right: 16px;
-  border-top: 1.5px solid var(--g-olive);
-  border-right: 1.5px solid var(--g-olive);
-}
-
-.gate-cropmark.bl {
-  bottom: 16px;
-  left: 16px;
-  border-bottom: 1.5px solid var(--g-olive);
-  border-left: 1.5px solid var(--g-olive);
-}
-
-.gate-cropmark.br {
-  bottom: 16px;
-  right: 16px;
-  border-bottom: 1.5px solid var(--g-olive);
-  border-right: 1.5px solid var(--g-olive);
-}
-
-/* ---------------------------------- the slip ---------------------------------- */
-
-.gate-formwrap {
-  position: relative;
-  width: min(430px, 100%);
-}
-
-.gate-card {
-  position: relative;
-  background: var(--g-card);
-  border: 1px solid color-mix(in srgb, var(--g-sage) 80%, transparent);
-  border-radius: 10px;
-  padding: var(--g-pad);
-  box-shadow:
-    0 1px 0 rgba(19, 48, 30, 0.04),
-    0 24px 48px -28px rgba(19, 48, 30, 0.35);
-}
-
-/* ---------------------------------- fields ---------------------------------- */
-
-.gate-field {
-  margin-bottom: 20px;
-}
-
-.gate-field label {
-  display: block;
-  font-family: var(--font-mono);
-  font-size: 10.5px;
-  font-weight: 600;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: var(--g-olive);
-  margin-bottom: 4px;
-}
-
-.gate-field input,
-.gate-field select {
-  width: 100%;
-  background: transparent;
-  border: 0;
-  border-bottom: 1.5px solid color-mix(in srgb, var(--g-olive) 55%, transparent);
-  border-radius: 0;
-  padding: 8px 1px;
-  font-family: var(--font-sans);
-  font-size: 15px;
-  color: var(--g-ink);
-  caret-color: var(--g-ink);
-}
-
-.gate-field select {
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2313301e' stroke-width='1.8' fill='none'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 2px center;
-  padding-right: 24px;
-  cursor: pointer;
-}
-
-.gate-field input.gate-key-input {
-  font-family: var(--font-mono);
-  font-size: 13.5px;
-}
-
-.gate-field input::placeholder {
-  color: color-mix(in srgb, var(--g-olive) 75%, transparent);
-}
-
-.gate-field input:focus,
-.gate-field select:focus {
-  outline: none;
-  border-bottom-color: var(--g-ember);
-  box-shadow: 0 1.5px 0 var(--g-ember);
-}
-
-.gate-field input:disabled,
-.gate-field select:disabled {
-  opacity: 0.55;
-}
-
-.gate-key-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.gate-key-row input {
-  flex: 1;
-  min-width: 0;
-}
-
-.gate-peek {
-  flex: none;
-  border: 0;
-  background: none;
-  padding: 2px 0;
-  font-family: var(--font-mono);
-  font-size: 10.5px;
-  font-weight: 600;
-  letter-spacing: 0.14em;
-  color: var(--g-olive);
-  cursor: pointer;
-  border-bottom: 1px solid transparent;
-}
-
-.gate-peek:hover:not(:disabled) {
-  color: var(--g-ink);
-  border-bottom-color: color-mix(in srgb, var(--g-olive) 70%, transparent);
-}
-
-/* ---------------------------------- actions ---------------------------------- */
-
-.gate-cta {
-  width: 100%;
-  border: 0;
-  border-radius: 7px;
-  padding: 13px 16px;
-  background: var(--g-ink);
-  color: var(--g-paper);
-  font-family: var(--font-sans);
-  font-size: 14px;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  cursor: pointer;
-  transition: background 160ms ease, box-shadow 160ms ease, transform 80ms ease;
-}
-
-.gate-cta:hover:not(:disabled) {
-  background: var(--g-olive-d);
-  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--g-ink) 70%, transparent);
-}
-
-.gate-cta:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-.gate-cta:disabled {
-  cursor: default;
-  opacity: 0.75;
-}
-
-.gate-cta[data-phase="cleared"] {
-  background: var(--g-ember-press);
-}
-
-.gate-demo {
-  width: 100%;
-  border: 1.5px solid var(--g-ember);
-  border-radius: 7px;
-  padding: 12px 16px;
-  background: transparent;
-  color: var(--g-ember-text);
-  font-family: var(--font-sans);
-  font-size: 13.5px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 160ms ease, border-color 160ms ease;
-}
-
-.gate-demo:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--g-ember) 9%, transparent);
-  border-color: var(--g-ember-press);
-}
-
-.gate-demo:disabled {
-  cursor: default;
-  opacity: 0.55;
-}
-
-.gate-or {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin: 18px 0;
-  font-family: var(--font-mono);
-  font-size: 10px;
-  letter-spacing: 0.22em;
-  color: var(--g-olive);
-}
-
-.gate-or span {
-  flex: 1;
-  height: 1px;
-  background: color-mix(in srgb, var(--g-olive) 28%, transparent);
-}
-
-.gate-switch {
-  display: block;
-  margin: 16px auto 0;
-  border: 0;
-  background: none;
-  padding: 2px 0;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  color: var(--g-olive);
-  cursor: pointer;
-  border-bottom: 1px solid transparent;
-  transition: color 140ms ease;
-}
-
-.gate-switch:hover:not(:disabled) {
-  color: var(--g-ember-text);
-  border-bottom-color: color-mix(in srgb, var(--g-ember-text) 60%, transparent);
-}
-
-.gate-switch:disabled {
-  opacity: 0.55;
-  cursor: default;
-}
-
-/* ---------------------------------- error ---------------------------------- */
-
-.gate-error {
-  margin: 0 0 18px;
-  padding-left: 10px;
-  border-left: 2.5px solid var(--g-ember);
-  font-family: var(--font-mono);
-  font-size: 11.5px;
-  line-height: 1.6;
-  color: var(--g-ember-text);
-}
-
-/* ---------------------------------- clearance stamp ---------------------------------- */
-
-.gate-stamp {
-  position: absolute;
-  top: -30px;
-  right: -20px;
-  width: 130px;
-  height: 130px;
-  pointer-events: none;
-  color: var(--g-ember);
-  transform: rotate(-12deg);
-  mix-blend-mode: multiply;
-  z-index: 2;
-}
-
-/* ---------------------------------- focus + motion ---------------------------------- */
-
-.gate button:focus-visible {
-  outline: 2px solid var(--g-ember);
-  outline-offset: 3px;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .gate-card {
-    animation: gate-rise 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
-  }
-
-  .gate-cropmark {
-    animation: gate-fade 900ms ease 200ms both;
-  }
-
-  .gate-stamp {
-    animation: gate-stamp-in 560ms cubic-bezier(0.16, 1.3, 0.3, 1) both;
-  }
-}
-
-@keyframes gate-rise {
-  from {
-    opacity: 0;
-    transform: translateY(14px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes gate-fade {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 0.55;
-  }
-}
-
-@keyframes gate-stamp-in {
-  0% {
-    opacity: 0;
-    transform: scale(2.1) rotate(-22deg);
-  }
-  55% {
-    opacity: 1;
-    transform: scale(0.95) rotate(-10deg);
-  }
-  75% {
-    transform: scale(1.04) rotate(-13deg);
-  }
-  100% {
-    transform: scale(1) rotate(-12deg);
-  }
-}
-
-/* ---------------------------------- responsive ---------------------------------- */
-
-@media (max-width: 560px) {
-  .gate {
-    padding: 20px 16px;
-  }
-
-  .gate-card {
-    --g-pad: 22px;
-  }
-
-  .gate-stamp {
-    width: 102px;
-    height: 102px;
-    top: -22px;
-    right: -10px;
-  }
-
-  .gate-cropmark {
-    display: none;
-  }
-}

src//server//middleware//auth.ts

@@ -1,144 +0,0 @@
-// src/server/middleware/auth.ts
-//
-// Supabase JWT verification + license gating for the paid API.
-//
-// The central Supabase project issues the session JWT; this backend verifies
-// it against the project's PUBLIC JWKS endpoint (no shared database needed).
-// License rows are read from the central project via its service-role REST
-// API (server-side only).
-//
-// Enforcement is OFF by default (LICENSE_ENFORCEMENT != "true") so existing
-// open/demo deployments keep working. Turn it on at go-live:
-//
-//   SUPABASE_URL=https://ciytvulujiqemqljablq.supabase.co
-//   SUPABASE_SERVICE_ROLE_KEY=<service role key, server only>
-//   LICENSE_ENFORCEMENT=true
-//
-// Frontend equivalent lives in the FortyDN website repo (src/lib/productApi.ts).
-// Ported from BRIDGE Modul-X (src/server/middleware/auth.ts) — same contract.
-
-import type { Request, Response, NextFunction } from "express";
-import { createRemoteJWKSet, jwtVerify } from "jose";
-
-export const CENTRAL_SUPABASE_URL =
-  process.env.SUPABASE_URL || "https://ciytvulujiqemqljablq.supabase.co";
-
-const JWKS_URL = new URL(`${CENTRAL_SUPABASE_URL}/auth/v1/.well-known/jwks.json`);
-
-let jwks: ReturnType<typeof createRemoteJWKSet> | null = null;
-
-function getJwks() {
-  if (!jwks) jwks = createRemoteJWKSet(JWKS_URL);
-  return jwks;
-}
-
-function enforcementOn(): boolean {
-  return process.env.LICENSE_ENFORCEMENT === "true";
-}
-
-export interface AuthClaims {
-  userId: string;
-  email?: string;
-}
-
-function bearerToken(req: Request): string | null {
-  const header = req.headers.authorization || "";
-  if (!header.startsWith("Bearer ")) return null;
-  const token = header.slice(7).trim();
-  return token.length > 0 ? token : null;
-}
-
-export async function verifySupabaseJwt(token: string): Promise<AuthClaims> {
-  const { payload } = await jwtVerify(token, getJwks(), {
-    audience: "authenticated",
-  });
-  const sub = payload.sub;
-  if (!sub) throw new Error("JWT has no sub claim");
-  return {
-    userId: sub,
-    email: typeof payload.email === "string" ? payload.email : undefined,
-  };
-}
-
-/** Modul-E is unlocked directly or via the Full Bridge combo. */
-const MODULE_GRANTS = new Set([
-  "modul-e",
-  "combo-full-bridge",
-]);
-
-export async function hasModulELicense(userId: string): Promise<boolean> {
-  const serviceKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
-  if (!serviceKey) {
-    console.warn("[auth] SUPABASE_SERVICE_ROLE_KEY not set — cannot check licenses.");
-    return false;
-  }
-  const params = new URLSearchParams({
-    user_id: `eq.${userId}`,
-    status: "eq.active",
-    select: "product",
-  });
-  const res = await fetch(`${CENTRAL_SUPABASE_URL}/rest/v1/licenses?${params}`, {
-    headers: {
-      apikey: serviceKey,
-      Authorization: `Bearer ${serviceKey}`,
-    },
-  });
-  if (!res.ok) {
-    const body = await res.text().catch(() => "");
-    // Missing table (migrations not applied yet) => fail closed with a hint.
-    console.warn(`[auth] license lookup HTTP ${res.status}: ${body.slice(0, 200)}`);
-    return false;
-  }
-  const rows = (await res.json()) as { product?: string }[];
-  return (
-    Array.isArray(rows) && rows.some((r) => r.product && MODULE_GRANTS.has(r.product))
-  );
-}
-
-/**
- * Requires a valid Supabase JWT. No-op (with a one-time warning) while
- * LICENSE_ENFORCEMENT is off so demo deployments keep working.
- */
-export function requireAuth(req: Request, res: Response, next: NextFunction) {
-  if (!enforcementOn()) return next();
-  void (async () => {
-    const token = bearerToken(req);
-    if (!token) {
-      return res.status(401).json({ detail: "Missing bearer token — sign in first." });
-    }
-    try {
-      const claims = await verifySupabaseJwt(token);
-      (req as Request & { auth?: AuthClaims }).auth = claims;
-      return next();
-    } catch {
-      return res.status(401).json({ detail: "Invalid or expired token." });
-    }
-  })();
-}
-
-/**
- * Requires a valid JWT AND an active Modul-E license (direct or Full Bridge).
- * No-op while LICENSE_ENFORCEMENT is off.
- */
-export function requireModulELicense(req: Request, res: Response, next: NextFunction) {
-  if (!enforcementOn()) return next();
-  void (async () => {
-    const token = bearerToken(req);
-    if (!token) {
-      return res.status(401).json({ detail: "Missing bearer token — sign in first." });
-    }
-    try {
-      const claims = await verifySupabaseJwt(token);
-      (req as Request & { auth?: AuthClaims }).auth = claims;
-      const ok = await hasModulELicense(claims.userId);
-      if (!ok) {
-        return res
-          .status(402)
-          .json({ detail: "No active Modul-E license — see /pricing." });
-      }
-      return next();
-    } catch {
-      return res.status(401).json({ detail: "Invalid or expired token." });
-    }
-  })();
-}

src//utils//cn.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}

src//vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />