Initial commit: LeadFlow lead generation platform

Full-stack Next.js 16 app with three scraping pipelines: - AirScale CSV → Anymailfinder Bulk Decision Maker search - LinkedIn Sales Navigator → Vayne → Anymailfinder email enrichment - Apify Google SERP → domain extraction → Anymailfinder bulk enrichment Includes Docker multi-stage build + docker-compose for Coolify deployment. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-17 11:21:11 +01:00
parent 5b84001c1e
commit facf8c9f69
59 changed files with 5800 additions and 233 deletions
--- a/components/layout/Sidebar.tsx
+++ b/components/layout/Sidebar.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { Building2, Linkedin, Search, BarChart3, Settings, Zap, ChevronLeft, ChevronRight } from "lucide-react";
+import { useAppStore } from "@/lib/store";
+import { useEffect, useState } from "react";
+
+const navItems = [
+  { href: "/airscale", icon: Building2, label: "AirScale → Email", color: "text-blue-400" },
+  { href: "/linkedin", icon: Linkedin, label: "LinkedIn → Email", color: "text-blue-500" },
+  { href: "/serp", icon: Search, label: "SERP → Email", color: "text-purple-400" },
+  { href: "/results", icon: BarChart3, label: "Results & History", color: "text-green-400" },
+  { href: "/settings", icon: Settings, label: "Settings", color: "text-gray-400" },
+];
+
+interface CredentialStatus {
+  anymailfinder: boolean;
+  apify: boolean;
+  vayne: boolean;
+}
+
+export function Sidebar() {
+  const pathname = usePathname();
+  const { sidebarCollapsed, setSidebarCollapsed } = useAppStore();
+  const [creds, setCreds] = useState<CredentialStatus>({ anymailfinder: false, apify: false, vayne: false });
+
+  useEffect(() => {
+    fetch("/api/credentials")
+      .then(r => r.json())
+      .then(d => setCreds(d))
+      .catch(() => {});
+  }, []);
+
+  return (
+    <aside
+      className={cn(
+        "relative flex flex-col border-r border-[#1e1e2e] bg-[#111118] transition-all duration-300",
+        sidebarCollapsed ? "w-16" : "w-60"
+      )}
+    >
+      {/* Logo */}
+      <div className="flex items-center gap-2 px-4 py-5 border-b border-[#1e1e2e]">
+        <div className="flex-shrink-0 w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
+          <Zap className="w-4 h-4 text-white" />
+        </div>
+        {!sidebarCollapsed && (
+          <span className="font-bold text-lg tracking-tight text-white">LeadFlow</span>
+        )}
+      </div>
+
+      {/* Nav */}
+      <nav className="flex-1 px-2 py-4 space-y-1">
+        {navItems.map(({ href, icon: Icon, label, color }) => {
+          const active = pathname === href || pathname.startsWith(href + "/");
+          return (
+            <Link
+              key={href}
+              href={href}
+              className={cn(
+                "flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all",
+                active
+                  ? "bg-[#1e1e2e] text-white"
+                  : "text-gray-400 hover:text-white hover:bg-[#1a1a28]"
+              )}
+            >
+              <Icon className={cn("w-5 h-5 flex-shrink-0", active ? color : "")} />
+              {!sidebarCollapsed && <span>{label}</span>}
+            </Link>
+          );
+        })}
+      </nav>
+
+      {/* Credential status */}
+      {!sidebarCollapsed && (
+        <div className="px-4 py-4 border-t border-[#1e1e2e] space-y-2">
+          <p className="text-xs text-gray-500 uppercase tracking-wider mb-3">API Status</p>
+          {[
+            { key: "anymailfinder", label: "Anymailfinder" },
+            { key: "apify", label: "Apify" },
+            { key: "vayne", label: "Vayne" },
+          ].map(({ key, label }) => (
+            <div key={key} className="flex items-center gap-2">
+              <span className={cn("w-2 h-2 rounded-full flex-shrink-0", creds[key as keyof CredentialStatus] ? "bg-green-500" : "bg-red-500")} />
+              <span className="text-xs text-gray-400">{label}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Collapse toggle */}
+      <button
+        onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+        className="absolute -right-3 top-6 w-6 h-6 rounded-full bg-[#1e1e2e] border border-[#2e2e3e] flex items-center justify-center hover:bg-[#2e2e3e] transition-colors z-10"
+      >
+        {sidebarCollapsed ? <ChevronRight className="w-3 h-3 text-gray-400" /> : <ChevronLeft className="w-3 h-3 text-gray-400" />}
+      </button>
+    </aside>
+  );
+}