Task Deletion Scraper Improvements: UI Consistency & Safety

app/actions/business.ts

@@ -0,0 +1,35 @@
+"use server";
+
+import { auth } from "@/auth";
+import { db } from "@/db";
+import { businesses } from "@/db/schema";
+import { eq, inArray, and } from "drizzle-orm";
+import { revalidatePath } from "next/cache";
+
+export async function deleteBusiness(id: string) {
+    const session = await auth();
+    if (!session?.user?.id) throw new Error("Unauthorized");
+
+    await db.delete(businesses).where(
+        and(
+            eq(businesses.id, id),
+            eq(businesses.userId, session.user.id)
+        )
+    );
+    revalidatePath("/dashboard");
+    revalidatePath("/dashboard/businesses");
+}
+
+export async function bulkDeleteBusinesses(ids: string[]) {
+    const session = await auth();
+    if (!session?.user?.id) throw new Error("Unauthorized");
+
+    await db.delete(businesses).where(
+        and(
+            inArray(businesses.id, ids),
+            eq(businesses.userId, session.user.id)
+        )
+    );
+    revalidatePath("/dashboard");
+    revalidatePath("/dashboard/businesses");
+}

app/admin/(dashboard)/businesses/page.tsx

@@ -0,0 +1,15 @@
+import { db } from "@/db";
+import { businesses } from "@/db/schema";
+import { desc } from "drizzle-orm";
+import { AdminBusinessView } from "@/components/admin/admin-business-view";
+
+export default async function AdminBusinessesPage() {
+    const items = await db.select().from(businesses).orderBy(desc(businesses.createdAt)).limit(100);
+
+    // Cast or map items if necessary to match Business type
+    // Assuming schema matches type, but dates might need string conversion if passed to client?
+    // Drizzle returns Date objects, Client Component expects serialized props? 
+    // Next.js Server Components -> Client Components auto-serialize Dates.
+
+    return <AdminBusinessView initialBusinesses={items} />;
+}

app/admin/{feedback → (dashboard)/feedback}/page.tsx

@@ -4,13 +4,14 @@ import { desc, eq } from "drizzle-orm";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { FeedbackActions } from "@/components/admin/feedback-actions";
 
 export default async function FeedbackPage() {
     // Fetch feedback with user details if possible
     // Drizzle relations would make this easier. 
     // Manual join or separate fetch.
     // For now, let's fetch feedback and map user info if needed or just show basic info.
-    
+
     // We can do a join:
     const feedbacks = await db
         .select({
@@ -29,7 +30,7 @@ export default async function FeedbackPage() {
 
     return (
         <div className="space-y-6">
-             <div>
+            <div>
                 <h2 className="text-3xl font-bold tracking-tight">Feedback</h2>
                 <p className="text-muted-foreground">User reports and suggestions</p>
             </div>
@@ -52,9 +53,8 @@ export default async function FeedbackPage() {
                                 <Badge variant={item.type === "bug" ? "destructive" : "default"}>
                                     {item.type}
                                 </Badge>
-                                <Badge variant="outline">
-                                    {item.status}
-                                </Badge>
+                                <Badge>{item.status}</Badge>
+                                <FeedbackActions id={item.id} status={item.status} />
                             </div>
                         </CardHeader>
                         <CardContent className="p-4 pt-2">
@@ -66,6 +66,6 @@ export default async function FeedbackPage() {
                     </Card>
                 ))}
             </div>
-        </div>
+        </div >
     )
 }

app/admin/(dashboard)/layout.tsx

@@ -0,0 +1,105 @@
+import { redirect } from "next/navigation";
+import { auth } from "@/auth";
+import Link from "next/link";
+import { LayoutDashboard, MessageSquare, Users, Settings, LogOut, Shield, Building2, Menu } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+
+const SidebarContent = () => (
+  <div className="flex flex-col h-full">
+    <div className="p-6 border-b flex items-center gap-2">
+      <Shield className="h-6 w-6 text-primary" />
+      <h1 className="font-bold text-xl tracking-tight">Admin</h1>
+    </div>
+
+    <nav className="flex-1 p-4 space-y-1">
+      <Link href="/admin" className="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
+        <LayoutDashboard className="h-4 w-4" />
+        Dashboard
+      </Link>
+      <Link href="/admin/feedback" className="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
+        <MessageSquare className="h-4 w-4" />
+        Feedback
+      </Link>
+      <Link href="/admin/businesses" className="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
+        <Building2 className="h-4 w-4" />
+        Businesses
+      </Link>
+      <Link href="/admin/users" className="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
+        <Users className="h-4 w-4" />
+        Users
+      </Link>
+      <Link href="/admin/settings" className="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
+        <Settings className="h-4 w-4" />
+        Settings
+      </Link>
+    </nav>
+
+    <div className="p-4 border-t">
+      <form action={async () => {
+        "use server"
+      }}>
+        <Button variant="ghost" className="w-full justify-start text-red-500 hover:text-red-600 hover:bg-red-50 disabled:opacity-50" asChild>
+          <Link href="/api/auth/signout">
+            <LogOut className="mr-2 h-4 w-4" />
+            Sign Out
+          </Link>
+        </Button>
+      </form>
+    </div>
+  </div>
+);
+
+export default async function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const session = await auth();
+
+  if (session?.user?.role !== "admin") {
+    redirect("/admin/login");
+  }
+
+  return (
+    <div className="flex h-screen bg-muted/40">
+      {/* Desktop Sidebar */}
+      <aside className="w-64 bg-background border-r shadow-sm hidden md:flex flex-col">
+        <SidebarContent />
+      </aside>
+
+      {/* Main Content */}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {/* Navbar */}
+        <header className="h-16 bg-background border-b flex items-center justify-between px-6 shadow-sm">
+          <div className="flex items-center gap-4">
+            {/* Mobile Sidebar Trigger */}
+            <div className="md:hidden">
+              <Sheet>
+                <SheetTrigger asChild>
+                  <Button variant="ghost" size="icon">
+                    <Menu className="h-5 w-5" />
+                  </Button>
+                </SheetTrigger>
+                <SheetContent side="left" className="p-0 w-64">
+                  <SidebarContent />
+                </SheetContent>
+              </Sheet>
+            </div>
+
+            <h2 className="text-sm font-medium text-muted-foreground hidden sm:block">Welcome, {session.user.name}</h2>
+          </div>
+          <div className="flex items-center gap-4">
+            <Button variant="outline" size="sm" asChild>
+              <Link href="/dashboard">Go to App</Link>
+            </Button>
+          </div>
+        </header>
+
+        <main className="flex-1 overflow-auto p-6">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}

app/admin/(dashboard)/page.tsx

@@ -0,0 +1,169 @@
+import { db } from "@/db";
+import { users, businesses, automationWorkflows, scrapingJobs } from "@/db/schema";
+import { count, eq } from "drizzle-orm";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Users, Building2, Workflow, Activity } from "lucide-react";
+import { AdminAnalytics } from "@/components/admin/admin-analytics";
+import { QuickActions } from "@/components/admin/quick-actions";
+import { AnimatedContainer } from "@/components/animated-container";
+
+// import dynamic from "next/dynamic";
+/*
+const AdminAnalytics = dynamic(() => import("@/components/admin/admin-analytics").then(mod => mod.AdminAnalytics), {
+  loading: () => <div className="h-[300px] bg-muted animate-pulse rounded" />,
+  ssr: false
+});
+*/
+
+import { PgTable } from "drizzle-orm/pg-core";
+
+async function getStats() {
+  // Helper to get count safely
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const getCount = async (table: PgTable<any>) => {
+    const res = await db.select({ value: count() }).from(table);
+    return res[0].value;
+  }
+
+  const [userCount, businessCount, workflowCount, jobCount] = await Promise.all([
+    getCount(users),
+    getCount(businesses),
+    getCount(automationWorkflows),
+    getCount(scrapingJobs)
+  ]);
+
+  // Active scrapers (status = running)
+  const activeJobsRes = await db.select({ value: count() }).from(scrapingJobs).where(eq(scrapingJobs.status, "running"));
+  const activeJobs = activeJobsRes[0].value;
+
+  return {
+    userCount,
+    businessCount,
+    workflowCount,
+    jobCount,
+    activeJobs
+  };
+}
+
+// Helper function to fetch analytic data
+async function getAnalyticsData() {
+  // 1. User Growth (Last 30 days)
+  const allUsers = await db.select({ createdAt: users.createdAt }).from(users);
+
+  const growthMap = new Map<string, number>();
+  allUsers.forEach(u => {
+    if (!u.createdAt) return;
+    const date = u.createdAt.toISOString().split('T')[0];
+    growthMap.set(date, (growthMap.get(date) || 0) + 1);
+  });
+
+  const userGrowth = Array.from(growthMap.entries())
+    .map(([date, count]) => ({ date, count }))
+    .sort((a, b) => a.date.localeCompare(b.date))
+    .slice(-30);
+
+  // 2. Business Categories & Email Status
+  const allBusinesses = await db.select({
+    category: businesses.category,
+    emailStatus: businesses.emailStatus
+  }).from(businesses);
+
+  const categoryMap = new Map<string, number>();
+  const statusMap = new Map<string, number>();
+
+  allBusinesses.forEach(b => {
+    if (b.category) categoryMap.set(b.category, (categoryMap.get(b.category) || 0) + 1);
+    const status = b.emailStatus || "Unknown";
+    statusMap.set(status, (statusMap.get(status) || 0) + 1);
+  });
+
+  const businessCategories = Array.from(categoryMap.entries()).map(([name, value]) => ({ name, value }));
+  const businessStatus = Array.from(statusMap.entries()).map(([name, value]) => ({ name, value }));
+
+  return { userGrowth, businessCategories, businessStatus };
+}
+
+export default async function AdminDashboardPage() {
+  const stats = await getStats();
+  const analyticsData = await getAnalyticsData();
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
+        <p className="text-muted-foreground">System overview and key metrics</p>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <AnimatedContainer delay={0.1}>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Total Users</CardTitle>
+              <Users className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{stats.userCount}</div>
+              <p className="text-xs text-muted-foreground">Registered accounts</p>
+            </CardContent>
+          </Card>
+        </AnimatedContainer>
+
+        <AnimatedContainer delay={0.2}>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Businesses Scraped</CardTitle>
+              <Building2 className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{stats.businessCount}</div>
+              <p className="text-xs text-muted-foreground">Total leads database</p>
+            </CardContent>
+          </Card>
+        </AnimatedContainer>
+
+        <AnimatedContainer delay={0.3}>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Active Workflows</CardTitle>
+              <Workflow className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{stats.workflowCount}</div>
+              <p className="text-xs text-muted-foreground">Automated sequences</p>
+            </CardContent>
+          </Card>
+        </AnimatedContainer>
+
+        <AnimatedContainer delay={0.4}>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Active Jobs</CardTitle>
+              <Activity className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{stats.activeJobs}</div>
+              <p className="text-xs text-muted-foreground">Currently running tasks</p>
+            </CardContent>
+          </Card>
+        </AnimatedContainer>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-7">
+        <div className="col-span-4">
+          <AnimatedContainer delay={0.5} direction="left">
+            <AdminAnalytics
+              userGrowth={analyticsData.userGrowth}
+              businessCategories={analyticsData.businessCategories}
+              businessStatus={analyticsData.businessStatus}
+            />
+          </AnimatedContainer>
+        </div>
+        <div className="col-span-3">
+          <AnimatedContainer delay={0.6} direction="right">
+            <QuickActions />
+          </AnimatedContainer>
+        </div>
+      </div>
+    </div>
+  );
+}

app/admin/(dashboard)/settings/page.tsx

@@ -0,0 +1,142 @@
+import { auth } from "@/auth";
+import { db } from "@/db";
+import { banners } from "@/db/schema";
+import { desc } from "drizzle-orm";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { sendGlobalNotification, createBanner, toggleBanner, deleteBanner } from "@/app/admin/actions";
+import { Switch } from "@/components/ui/switch";
+import { Trash2 } from "lucide-react";
+
+export default async function SettingsPage() {
+    const session = await auth();
+    if (session?.user?.role !== "admin") return <div>Unauthorized</div>;
+
+    const allBanners = await db.select().from(banners).orderBy(desc(banners.createdAt));
+
+    return (
+        <div className="space-y-6">
+            <div>
+                <h2 className="text-3xl font-bold tracking-tight">Settings</h2>
+                <p className="text-muted-foreground">Manage platform configurations</p>
+            </div>
+
+            <Tabs defaultValue="notifications" className="space-y-4">
+                <TabsList>
+                    <TabsTrigger value="notifications">Notifications</TabsTrigger>
+                    <TabsTrigger value="banners">Info Banners</TabsTrigger>
+                    <TabsTrigger value="changelog">Change Log</TabsTrigger>
+                </TabsList>
+
+                <TabsContent value="notifications">
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Global Push Notification</CardTitle>
+                            <CardDescription>Send a notification to all user dashboards.</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                            <form action={async (formData) => {
+                                "use server";
+                                await sendGlobalNotification(formData);
+                            }} className="space-y-4 max-w-lg">
+                                <div className="space-y-2">
+                                    <Label htmlFor="title">Title</Label>
+                                    <Input id="title" name="title" placeholder="e.g. System Update" required />
+                                </div>
+                                <div className="space-y-2">
+                                    <Label htmlFor="message">Message</Label>
+                                    <Textarea id="message" name="message" placeholder="Details..." required />
+                                </div>
+                                <div className="space-y-2">
+                                    <Label htmlFor="type">Type</Label>
+                                    <select name="type" className="w-full p-2 border rounded-md bg-background">
+                                        <option value="info">Info</option>
+                                        <option value="warning">Warning</option>
+                                        <option value="success">Success</option>
+                                    </select>
+                                </div>
+                                <Button type="submit">Send Broadcast</Button>
+                            </form>
+                        </CardContent>
+                    </Card>
+                </TabsContent>
+
+                <TabsContent value="banners">
+                    <div className="grid gap-6">
+                        <Card>
+                            <CardHeader>
+                                <CardTitle>Create Info Banner</CardTitle>
+                                <CardDescription>This will appear as a marquee on user dashboards.</CardDescription>
+                            </CardHeader>
+                            <CardContent>
+                                <form action={async (formData) => {
+                                    "use server";
+                                    await createBanner(formData);
+                                }} className="space-y-4 max-w-lg">
+                                    <div className="space-y-2">
+                                        <Label htmlFor="message">Banner Message</Label>
+                                        <Input id="message" name="message" placeholder="e.g. 50% Off Promo!" required />
+                                    </div>
+                                    <Button type="submit">Create Banner</Button>
+                                </form>
+                            </CardContent>
+                        </Card>
+
+                        <Card>
+                            <CardHeader>
+                                <CardTitle>Active Banners</CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                <div className="space-y-4">
+                                    {allBanners.map((banner) => (
+                                        <div key={banner.id} className="flex items-center justify-between p-4 border rounded-lg">
+                                            <div>
+                                                <p className="font-medium">{banner.message}</p>
+                                                <p className="text-xs text-muted-foreground">{banner.createdAt.toLocaleDateString()}</p>
+                                            </div>
+                                            <div className="flex items-center gap-4">
+                                                <form action={async () => {
+                                                    "use server"
+                                                    await toggleBanner(banner.id, !banner.isActive)
+                                                }}>
+                                                    <div className="flex items-center gap-2">
+                                                        <Switch checked={banner.isActive} type="submit" />
+                                                        <span className="text-sm">{banner.isActive ? "Active" : "Inactive"}</span>
+                                                    </div>
+                                                </form>
+                                                <form action={async () => {
+                                                    "use server"
+                                                    await deleteBanner(banner.id)
+                                                }}>
+                                                    <Button size="icon" variant="ghost" className="text-destructive">
+                                                        <Trash2 className="h-4 w-4" />
+                                                    </Button>
+                                                </form>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            </CardContent>
+                        </Card>
+                    </div>
+                </TabsContent>
+
+                <TabsContent value="changelog">
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Platform Change Log</CardTitle>
+                            <CardDescription>Track updates and version history (Coming Soon)</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                            <p className="text-sm text-muted-foreground">Change log management will be implemented in the next phase.</p>
+                        </CardContent>
+                    </Card>
+                </TabsContent>
+            </Tabs>
+        </div>
+    );
+}

app/admin/actions.ts

@@ -0,0 +1,73 @@
+"use server";
+
+import { auth } from "@/auth";
+import { db } from "@/db";
+import { notifications, banners } from "@/db/schema";
+import { eq } from "drizzle-orm";
+import { revalidatePath } from "next/cache";
+
+// --- Global Notifications ---
+
+export async function sendGlobalNotification(formData: FormData) {
+    const session = await auth();
+    if (session?.user?.role !== "admin") throw new Error("Unauthorized");
+
+    const title = formData.get("title") as string;
+    const message = formData.get("message") as string;
+    const type = formData.get("type") as "info" | "warning" | "success" || "info";
+
+    if (!title || !message) return { error: "Missing fields" };
+
+    await db.insert(notifications).values({
+        title,
+        message,
+        type,
+        // userId: null implies global notification
+        userId: null,
+    });
+
+    revalidatePath("/dashboard"); // Revalidate user dashboard to show new notif
+    return { success: true };
+}
+
+// --- Banners ---
+
+export async function createBanner(formData: FormData) {
+    const session = await auth();
+    if (session?.user?.role !== "admin") throw new Error("Unauthorized");
+
+    const message = formData.get("message") as string;
+    if (!message) return { error: "Message required" };
+
+    // Deactivate other banners if we want only one active? 
+    // User didn't specify, but usually marquee is one at a time or list.
+    // I'll leave others active unless requested.
+
+    await db.insert(banners).values({
+        message,
+        isActive: true,
+        createdBy: session.user.id,
+    });
+
+    revalidatePath("/dashboard");
+    return { success: true };
+}
+
+export async function toggleBanner(id: string, isActive: boolean) {
+    const session = await auth();
+    if (session?.user?.role !== "admin") throw new Error("Unauthorized");
+
+    await db.update(banners).set({ isActive }).where(eq(banners.id, id));
+    revalidatePath("/dashboard");
+    revalidatePath("/admin/settings");
+    return { success: true };
+}
+
+export async function deleteBanner(id: string) {
+    const session = await auth();
+    if (session?.user?.role !== "admin") throw new Error("Unauthorized");
+
+    await db.delete(banners).where(eq(banners.id, id));
+    revalidatePath("/admin/settings");
+    return { success: true };
+}

app/admin/actions/business.ts

@@ -0,0 +1,16 @@
+"use server";
+
+import { auth } from "@/auth";
+import { db } from "@/db";
+import { businesses } from "@/db/schema";
+import { inArray } from "drizzle-orm";
+import { revalidatePath } from "next/cache";
+
+// Admin Bulk Delete (Any user)
+export async function adminBulkDeleteBusinesses(ids: string[]) {
+    const session = await auth();
+    if (session?.user?.role !== "admin") throw new Error("Unauthorized");
+
+    await db.delete(businesses).where(inArray(businesses.id, ids));
+    revalidatePath("/admin/businesses");
+}

app/admin/businesses/page.tsx

@@ -1,61 +0,0 @@
-import { db } from "@/db";
-import { businesses } from "@/db/schema";
-import { desc } from "drizzle-orm";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-
-export default async function AdminBusinessesPage() {
-    const items = await db.select().from(businesses).orderBy(desc(businesses.createdAt)).limit(100);
-
-    return (
-        <div className="space-y-6">
-            <div>
-                <h2 className="text-3xl font-bold tracking-tight">Businesses</h2>
-                <p className="text-muted-foreground">Manage scraped leads and business data</p>
-            </div>
-
-            <Card>
-                <CardHeader>
-                    <CardTitle>Recent Leads ({items.length})</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <Table>
-                        <TableHeader>
-                            <TableRow>
-                                <TableHead>Name</TableHead>
-                                <TableHead>Category</TableHead>
-                                <TableHead>Contact</TableHead>
-                                <TableHead>Status</TableHead>
-                            </TableRow>
-                        </TableHeader>
-                        <TableBody>
-                            {items.map((item) => (
-                                <TableRow key={item.id}>
-                                    <TableCell className="font-medium">
-                                        {item.name}
-                                        {item.website && (
-                                            <a href={item.website} target="_blank" rel="noreferrer" className="block text-xs text-blue-500 hover:underline truncate max-w-[200px]">
-                                                {item.website}
-                                            </a>
-                                        )}
-                                    </TableCell>
-                                    <TableCell>{item.category}</TableCell>
-                                    <TableCell>
-                                        <div className="text-sm">{item.email || "-"}</div>
-                                        <div className="text-xs text-muted-foreground">{item.phone || "-"}</div>
-                                    </TableCell>
-                                    <TableCell>
-                                        <Badge variant={item.emailSent ? "secondary" : "default"}>
-                                            {item.emailSent ? "Contacted" : "New"}
-                                        </Badge>
-                                    </TableCell>
-                                </TableRow>
-                            ))}
-                        </TableBody>
-                    </Table>
-                </CardContent>
-            </Card>
-        </div>
-    );
-}

app/admin/layout.tsx

@@ -1,87 +0,0 @@
-import { redirect } from "next/navigation";
-import { auth } from "@/auth";
-import Link from "next/link";
-import { LayoutDashboard, MessageSquare, Users, Settings, LogOut, Shield, Building2 } from "lucide-react";
-import { Button } from "@/components/ui/button";
-
-export default async function AdminLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const session = await auth();
-
-  if (session?.user?.role !== "admin") {
-    redirect("/admin/login");
-  }
-
-  return (
-    <div className="flex h-screen bg-gray-100 dark:bg-gray-900">
-      {/* Admin Sidebar */}
-      <aside className="w-64 bg-card border-r shadow-sm hidden md:flex flex-col">
-        <div className="p-6 border-b flex items-center gap-2">
-          <Shield className="h-6 w-6 text-primary" />
-          <h1 className="font-bold text-xl tracking-tight">Admin</h1>
-        </div>
-
-        <nav className="flex-1 p-4 space-y-1">
-          <Link href="/admin" className="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
-            <LayoutDashboard className="h-4 w-4" />
-            Dashboard
-          </Link>
-          <Link href="/admin/feedback" className="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
-            <MessageSquare className="h-4 w-4" />
-            Feedback
-          </Link>
-          <Link href="/admin/businesses" className="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
-            <Building2 className="h-4 w-4" />
-            Businesses
-          </Link>
-          <Link href="/admin/users" className="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
-            <Users className="h-4 w-4" />
-            Users
-          </Link>
-          <Link href="/admin/settings" className="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
-            <Settings className="h-4 w-4" />
-            Settings
-          </Link>
-        </nav>
-
-        <div className="p-4 border-t">
-          <form action={async () => {
-            "use server"
-            // signOut handled by auth form usually, or client component.
-            // For server component layout we might need a client wrapper for signout button or redirect.
-            // Simplifying:
-          }}>
-            <Button variant="ghost" className="w-full justify-start text-red-500 hover:text-red-600 hover:bg-red-50 disabled:opacity-50" asChild>
-              <Link href="/api/auth/signout">
-                <LogOut className="mr-2 h-4 w-4" />
-                Sign Out
-              </Link>
-            </Button>
-          </form>
-        </div>
-      </aside>
-
-      {/* Main Content */}
-      <div className="flex-1 flex flex-col overflow-hidden">
-        {/* Navbar */}
-        <header className="h-16 bg-card border-b flex items-center justify-between px-6 shadow-sm">
-          <div className="flex items-center gap-4">
-            <h2 className="text-sm font-medium text-muted-foreground">Welcome, {session.user.name}</h2>
-          </div>
-          <div className="flex items-center gap-4">
-            <Button variant="outline" size="sm" asChild>
-              <Link href="/dashboard">Go to App</Link>
-            </Button>
-          </div>
-        </header>
-
-        <main className="flex-1 overflow-auto p-6">
-          {children}
-        </main>
-      </div>
-    </div>
-  );
-}

app/admin/login/page.tsx

@@ -25,7 +25,7 @@ export default function AdminLoginPage() {
 
     try {
       const result = await signIn("credentials", {
-        email,
+        email:email.toLowerCase(),
         password,
         redirect: false,
       });
@@ -39,6 +39,7 @@ export default function AdminLoginPage() {
       }
     } catch (error) {
       toast.error("An error occurred");
+      console.log(`error: ${error}`);
     } finally {
       setLoading(false);
     }

app/admin/page.tsx

@@ -1,103 +0,0 @@
-import { db } from "@/db";
-import { users, businesses, automationWorkflows, scrapingJobs } from "@/db/schema";
-import { count, eq } from "drizzle-orm";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Users, Building2, Workflow, Database, Activity } from "lucide-react";
-
-async function getStats() {
-    // Helper to get count safely
-    const getCount = async (table: any) => {
-        const res = await db.select({ value: count() }).from(table);
-        return res[0].value;
-    }
-
-    const [userCount, businessCount, workflowCount, jobCount] = await Promise.all([
-        getCount(users),
-        getCount(businesses),
-        getCount(automationWorkflows),
-        getCount(scrapingJobs)
-    ]);
-    
-    // Active scrapers (status = running)
-    const activeJobsRes = await db.select({ value: count() }).from(scrapingJobs).where(eq(scrapingJobs.status, "running"));
-    const activeJobs = activeJobsRes[0].value;
-
-    return {
-        userCount,
-        businessCount,
-        workflowCount,
-        jobCount,
-        activeJobs
-    };
-}
-
-export default async function AdminDashboardPage() {
-  const stats = await getStats();
-
-  return (
-    <div className="space-y-8">
-      <div>
-        <h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
-        <p className="text-muted-foreground">System overview and key metrics</p>
-      </div>
-
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Total Users</CardTitle>
-            <Users className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{stats.userCount}</div>
-            <p className="text-xs text-muted-foreground">Registered accounts</p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Businesses Scraped</CardTitle>
-            <Building2 className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{stats.businessCount}</div>
-            <p className="text-xs text-muted-foreground">Total leads database</p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Active Workflows</CardTitle>
-            <Workflow className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{stats.workflowCount}</div>
-            <p className="text-xs text-muted-foreground">Automated sequences</p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Active Jobs</CardTitle>
-            <Activity className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{stats.activeJobs}</div>
-            <p className="text-xs text-muted-foreground">Currently running tasks</p>
-          </CardContent>
-        </Card>
-      </div>
-      
-      {/* Activity Graph Placeholder - Could be implemented with Recharts if needed */}
-      <Card className="col-span-4">
-        <CardHeader>
-            <CardTitle>Recent Activity</CardTitle>
-        </CardHeader>
-        <CardContent className="pl-2">
-            <div className="h-[200px] flex items-center justify-center text-muted-foreground border-2 border-dashed rounded-md">
-                Activity Graph Component to be added with Recharts
-            </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

app/api/businesses/route.ts

@@ -2,7 +2,7 @@ import { NextResponse } from "next/server";
 import { auth } from "@/lib/auth";
 import { db } from "@/db";
 import { businesses } from "@/db/schema";
-import { eq, and } from "drizzle-orm";
+import { eq, and, sql } from "drizzle-orm";
 import { rateLimit } from "@/lib/rate-limit";
 
 interface SessionUser {
@@ -22,6 +22,9 @@ export async function GET(request: Request) {
     const { searchParams } = new URL(request.url);
     const category = searchParams.get("category");
     const status = searchParams.get("status");
+    const page = parseInt(searchParams.get("page") || "1");
+    const limit = parseInt(searchParams.get("limit") || "10");
+    const offset = (page - 1) * limit;
 
     // Build where conditions
     const conditions = [eq(businesses.userId, userId)];
@@ -34,14 +37,29 @@ export async function GET(request: Request) {
       conditions.push(eq(businesses.emailStatus, status));
     }
 
+    // Get total count
+    const [{ count }] = await db
+      .select({ count: sql<number>`count(*)` })
+      .from(businesses)
+      .where(and(...conditions));
+
+    const totalPages = Math.ceil(count / limit);
+
     const results = await db
       .select()
       .from(businesses)
       .where(and(...conditions))
       .orderBy(businesses.createdAt)
-      .limit(100);
-
-    return NextResponse.json({ businesses: results });
+      .limit(limit)
+      .offset(offset);
+
+    return NextResponse.json({
+      businesses: results,
+      page,
+      limit,
+      total: count,
+      totalPages
+    });
   } catch (error) {
     console.error("Error fetching businesses:", error);
     return NextResponse.json(

app/api/email/send/route.ts

@@ -0,0 +1,102 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { db } from "@/db";
+import { businesses, emailTemplates, emailLogs } from "@/db/schema";
+import { eq, and } from "drizzle-orm";
+import { sendColdEmail, interpolateTemplate } from "@/lib/email";
+import { SessionUser } from "@/types";
+
+export async function POST(request: Request) {
+    try {
+        const session = await auth();
+        if (!session?.user) {
+            return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+        }
+
+        const { businessId } = await request.json();
+
+        if (!businessId) {
+            return NextResponse.json(
+                { error: "Business ID required" },
+                { status: 400 }
+            );
+        }
+
+        const user = session.user as SessionUser;
+
+        // Check if user has connected Google Account (access token)
+        if (!user.accessToken) {
+            return NextResponse.json(
+                { error: "Google Account not connected. Please sign out and sign in with Google." },
+                { status: 403 }
+            );
+        }
+
+        // Fetch business
+        const business = await db.query.businesses.findFirst({
+            where: and(
+                eq(businesses.id, businessId),
+                eq(businesses.userId, user.id)
+            ),
+        });
+
+        if (!business) {
+            return NextResponse.json({ error: "Business not found" }, { status: 404 });
+        }
+
+        // Fetch default template
+        const template = await db.query.emailTemplates.findFirst({
+            where: and(
+                eq(emailTemplates.userId, user.id),
+                eq(emailTemplates.isDefault, true)
+            ),
+        });
+
+        if (!template) {
+            return NextResponse.json(
+                { error: "No default email template found. Please set one in Settings > Templates." },
+                { status: 400 }
+            );
+        }
+
+        // Send email
+        const success = await sendColdEmail(business, template, user.accessToken);
+
+        // Update business status
+        await db
+            .update(businesses)
+            .set({
+                emailSent: true,
+                emailSentAt: new Date(),
+                emailStatus: success ? "sent" : "failed",
+                updatedAt: new Date(),
+            })
+            .where(eq(businesses.id, businessId));
+
+        // Log email
+        await db.insert(emailLogs).values({
+            userId: user.id,
+            businessId: business.id,
+            templateId: template.id,
+            subject: interpolateTemplate(template.subject, business),
+            body: interpolateTemplate(template.body, business),
+            status: success ? "sent" : "failed",
+            sentAt: success ? new Date() : null,
+        });
+
+        if (!success) {
+            return NextResponse.json(
+                { error: "Failed to send email via Gmail API" },
+                { status: 500 }
+            );
+        }
+
+        return NextResponse.json({ success: true, emailStatus: "sent" });
+    } catch (error) {
+        console.error("Error sending email:", error);
+        return NextResponse.json(
+            { error: "Internal server error" },
+            { status: 500 }
+        );
+    }
+}

app/api/scraping/control/route.ts

@@ -13,7 +13,8 @@ export async function POST(request: Request) {
     }
 
     const userId = (session.user as SessionUser).id;
-    const { jobId, action } = await request.json();
+    const body = await request.json();
+    const { jobId, action } = body;
 
     if (!jobId || !action) {
       return NextResponse.json(
@@ -22,9 +23,10 @@ export async function POST(request: Request) {
       );
     }
 
-    if (!["pause", "resume", "stop"].includes(action)) {
+    const allowedActions = ["pause", "resume", "stop", "set-priority"];
+    if (!allowedActions.includes(action)) {
       return NextResponse.json(
-        { error: "Invalid action. Must be 'pause', 'resume', or 'stop'" },
+        { error: "Invalid action. Must be 'pause', 'resume', 'stop', or 'set-priority'" },
         { status: 400 }
       );
     }
@@ -61,7 +63,7 @@ export async function POST(request: Request) {
       }
     } else if (action === "set-priority") {
       // Handle priority update
-      const { priority } = await request.json();
+      const { priority } = body;
       if (!priority || !["low", "medium", "high"].includes(priority)) {
         return NextResponse.json({ error: "Invalid priority" }, { status: 400 });
       }

app/api/tasks/route.ts

@@ -2,7 +2,7 @@ import { NextResponse } from "next/server";
 import { auth } from "@/lib/auth";
 import { db } from "@/db";
 import { scrapingJobs, automationWorkflows } from "@/db/schema";
-import { eq, desc } from "drizzle-orm";
+import { eq, desc, and } from "drizzle-orm";
 
 export async function GET() {
     try {
@@ -83,3 +83,39 @@ export async function GET() {
         );
     }
 }
+
+export async function DELETE(request: Request) {
+    try {
+        const session = await auth();
+        if (!session?.user) {
+            return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+        }
+
+        const { searchParams } = new URL(request.url);
+        const id = searchParams.get("id");
+        const type = searchParams.get("type");
+        const userId = session.user.id;
+
+        if (!id || !type) {
+            return NextResponse.json({ error: "ID and type required" }, { status: 400 });
+        }
+
+        if (type === "workflow") {
+            await db
+                .delete(automationWorkflows)
+                .where(and(eq(automationWorkflows.id, id), eq(automationWorkflows.userId, userId)));
+        } else {
+            await db
+                .delete(scrapingJobs)
+                .where(and(eq(scrapingJobs.id, id), eq(scrapingJobs.userId, userId)));
+        }
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        console.error("Error deleting task:", error);
+        return NextResponse.json(
+            { error: "Failed to delete task" },
+            { status: 500 }
+        );
+    }
+}

app/dashboard/businesses/page.tsx

@@ -1,450 +1,167 @@
-"use client"; // Force rebuild
+"use client";
 
-import { useState } from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
+import { useEffect, useState } from "react";
+import { Business } from "@/types";
+import { useApi } from "@/hooks/use-api";
+import { BusinessTable } from "@/components/dashboard/business-table";
+import { BusinessDetailModal } from "@/components/dashboard/business-detail-modal";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { bulkDeleteBusinesses } from "@/app/actions/business";
+import { Trash2 } from "lucide-react";
+import { toast } from "sonner";
 import {
-    Search,
-    Download,
-    MoreVertical,
-    Mail,
-    Phone,
-    Globe,
-    MapPin,
-    Star,
-    Trash2,
-    Eye,
-    Loader2
-} from "lucide-react";
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from "@/components/ui/table";
-import { useBusinesses, BusinessResponse } from "@/hooks/use-businesses";
-
-
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 
 export default function BusinessesPage() {
-    const {
-        businesses,
-        loading,
-        filterCategory,
-        setFilterCategory,
-        filterStatus,
-        setFilterStatus,
-        deleteBusiness,
-        updateBusiness
-    } = useBusinesses();
+    const [businesses, setBusinesses] = useState<Business[]>([]);
+    const [selectedBusiness, setSelectedBusiness] = useState<Business | null>(null);
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
-    const [searchQuery, setSearchQuery] = useState("");
+    // Pagination state
     const [currentPage, setCurrentPage] = useState(1);
-    const [editingBusiness, setEditingBusiness] = useState<BusinessResponse | null>(null);
-    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-    const [isSaving, setIsSaving] = useState(false);
-    const itemsPerPage = 20;
-
-    const handleDelete = async (id: string) => {
-        await deleteBusiness(id);
-    };
-
-    const handleEdit = (business: BusinessResponse) => {
-        setEditingBusiness(business);
-        setIsEditModalOpen(true);
-    };
-
-    const handleSaveEdit = async (updatedBusiness: Partial<BusinessResponse>) => {
-        if (!editingBusiness) return;
-
-        setIsSaving(true);
-        const success = await updateBusiness(editingBusiness.id, updatedBusiness);
-        setIsSaving(false);
-
-        if (success) {
-            setIsEditModalOpen(false);
-            setEditingBusiness(null);
+    const [totalPages, setTotalPages] = useState(1);
+    const [limit] = useState(10); // Or make this adjustable
+
+    const { get: getBusinessesApi } = useApi<{ businesses: Business[], totalPages: number, page: number }>();
+
+    useEffect(() => {
+        let mounted = true;
+        const load = async () => {
+            // Append query params manually or via options if useApi supported it, but template literal is fine here
+            const data = await getBusinessesApi(`/api/businesses?page=${currentPage}&limit=${limit}`);
+            if (mounted && data) {
+                setBusinesses(data.businesses);
+                setTotalPages(data.totalPages || 1);
+            }
+        };
+        load();
+        return () => { mounted = false; };
+    }, [getBusinessesApi, currentPage, limit]);
+
+    const handleConfirmDelete = async () => {
+        try {
+            await bulkDeleteBusinesses(selectedIds);
+            setBusinesses(prev => prev.filter(b => !selectedIds.includes(b.id)));
+            setSelectedIds([]);
+            toast.success("Deleted successfully");
+        } catch {
+            toast.error("Failed to delete");
         }
+        setDeleteDialogOpen(false);
     };
 
-    const exportToCSV = () => {
-        const headers = ["Name", "Email", "Phone", "Website", "Address", "Category", "Rating", "Status"];
-        const rows = filteredBusinesses.map((b) => [
-            b.name,
-            b.email || "",
-            b.phone || "",
-            b.website || "",
-            b.address || "",
-            b.category,
-            b.rating || "",
-            b.emailStatus || "pending",
-        ]);
-
-        const csv = [headers, ...rows].map((row) => row.join(",")).join("\n");
-        const blob = new Blob([csv], { type: "text/csv" });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement("a");
-        a.href = url;
-        a.download = `businesses-${new Date().toISOString().split("T")[0]}.csv`;
-        a.click();
+    const handleViewDetails = (business: Business) => {
+        setSelectedBusiness(business);
+        setIsModalOpen(true);
     };
 
-    const filteredBusinesses = businesses.filter((business) =>
-        business.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        business.email?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        business.category.toLowerCase().includes(searchQuery.toLowerCase())
-    );
-
-    // Pagination
-    const totalPages = Math.ceil(filteredBusinesses.length / itemsPerPage);
-
-    const paginatedBusinesses = filteredBusinesses.slice(
-        (currentPage - 1) * itemsPerPage,
-        currentPage * itemsPerPage
-    );
-
-    const getStatusColor = (status: string | null) => {
-        switch (status) {
-            case "sent":
-                return "default";
-            case "opened":
-                return "default";
-            case "clicked":
-                return "default";
-            case "bounced":
-                return "destructive";
-            case "failed":
-                return "destructive";
-            default:
-                return "secondary";
+    const { post: sendEmailApi } = useApi();
+
+    const handleSendEmail = async (business: Business) => {
+        const toastId = toast.loading(`Sending email to ${business.name}...`);
+        try {
+            await sendEmailApi("/api/email/send", { businessId: business.id });
+            toast.success(`Email sent to ${business.email}`, { id: toastId });
+
+            // Update local state
+            setBusinesses(prev => prev.map(b =>
+                b.id === business.id
+                    ? { ...b, emailStatus: "sent", emailSent: true }
+                    : b
+            ));
+        } catch (error) {
+            toast.error("Failed to send email", { id: toastId });
+            console.error(error);
         }
     };
 
     return (
-        <div className="space-y-6">
-            {/* Header */}
-            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="space-y-6 pt-6">
+            <div className="flex justify-between items-center">
                 <div>
-                    <h1 className="text-3xl font-bold">Businesses</h1>
-                    <p className="text-muted-foreground">
-                        Manage your scraped business leads
-                    </p>
+                    <h2 className="text-3xl font-bold tracking-tight">Your Businesses</h2>
+                    <p className="text-muted-foreground">Manage all your collected leads</p>
                 </div>
-                <Button onClick={exportToCSV} variant="outline" className="cursor-pointer w-full sm:w-auto">
-                    <Download className="mr-2 h-4 w-4" />
-                    Export CSV
-                </Button>
+                {selectedIds.length > 0 && (
+                    <Button variant="destructive" onClick={() => setDeleteDialogOpen(true)}>
+                        <Trash2 className="mr-2 h-4 w-4" />
+                        Delete ({selectedIds.length})
+                    </Button>
+                )}
             </div>
 
-            {/* Stats */}
-            <div className="grid gap-4 md:grid-cols-4">
-                <Card>
-                    <CardHeader className="pb-2">
-                        <CardDescription>Total Businesses</CardDescription>
-                        <CardTitle className="text-2xl">{businesses.length}</CardTitle>
-                    </CardHeader>
-                </Card>
-                <Card>
-                    <CardHeader className="pb-2">
-                        <CardDescription>With Email</CardDescription>
-                        <CardTitle className="text-2xl">
-                            {businesses.filter((b) => b.email).length}
-                        </CardTitle>
-                    </CardHeader>
-                </Card>
-                <Card>
-                    <CardHeader className="pb-2">
-                        <CardDescription>Contacted</CardDescription>
-                        <CardTitle className="text-2xl">
-                            {businesses.filter((b) => b.emailStatus).length}
-                        </CardTitle>
-                    </CardHeader>
-                </Card>
-                <Card>
-                    <CardHeader className="pb-2">
-                        <CardDescription>Opened</CardDescription>
-                        <CardTitle className="text-2xl">
-                            {businesses.filter((b) => b.emailStatus === "opened" || b.emailStatus === "clicked").length}
-                        </CardTitle>
-                    </CardHeader>
-                </Card>
-            </div>
-
-            {/* Filters */}
             <Card>
                 <CardHeader>
-                    <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-                        <div className="flex-1">
-                            <div className="relative">
-                                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                                <Input
-                                    placeholder="Search businesses..."
-                                    value={searchQuery}
-                                    onChange={(e) => setSearchQuery(e.target.value)}
-                                    className="pl-10"
-                                />
-                            </div>
-                        </div>
-                        <div className="flex gap-2">
-                            <select
-                                value={filterCategory}
-                                onChange={(e) => setFilterCategory(e.target.value)}
-                                className="flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm cursor-pointer"
-                            >
-                                <option value="all">All Categories</option>
-                                <option value="Restaurant">Restaurant</option>
-                                <option value="Retail">Retail</option>
-                                <option value="Service">Service</option>
-                            </select>
-                            <select
-                                value={filterStatus}
-                                onChange={(e) => setFilterStatus(e.target.value)}
-                                className="flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm cursor-pointer"
-                            >
-                                <option value="all">All Status</option>
-                                <option value="pending">Pending</option>
-                                <option value="sent">Sent</option>
-                                <option value="opened">Opened</option>
-                                <option value="clicked">Clicked</option>
-                            </select>
-                        </div>
-                    </div>
+                    <CardTitle>All Leads ({businesses.length})</CardTitle>
                 </CardHeader>
                 <CardContent>
-                    {loading ? (
-                        <div className="text-center py-8 text-muted-foreground">
-                            Loading businesses...
-                        </div>
-                    ) : filteredBusinesses.length === 0 ? (
-                        <div className="text-center py-8 text-muted-foreground">
-                            No businesses found
-                        </div>
-                    ) : (
-                        <>
-                            <Table>
-                                <TableHeader>
-                                    <TableRow>
-                                        <TableHead>Business</TableHead>
-                                        <TableHead>Contact</TableHead>
-                                        <TableHead>Category</TableHead>
-                                        <TableHead>Rating</TableHead>
-                                        <TableHead>Status</TableHead>
-                                        <TableHead className="text-right">Actions</TableHead>
-                                    </TableRow>
-                                </TableHeader>
-                                <TableBody>
-                                    {paginatedBusinesses.map((business) => (
-                                        <TableRow key={business.id}>
-                                            <TableCell>
-                                                <div className="space-y-1">
-                                                    <div className="font-medium">{business.name}</div>
-                                                    {business.address && (
-                                                        <div className="flex items-center gap-1 text-xs text-muted-foreground">
-                                                            <MapPin className="h-3 w-3" />
-                                                            {business.address}
-                                                        </div>
-                                                    )}
-                                                </div>
-                                            </TableCell>
-                                            <TableCell>
-                                                <div className="space-y-1 text-sm">
-                                                    {business.email && (
-                                                        <div className="flex items-center gap-1">
-                                                            <Mail className="h-3 w-3" />
-                                                            {business.email}
-                                                        </div>
-                                                    )}
-                                                    {business.phone && (
-                                                        <div className="flex items-center gap-1">
-                                                            <Phone className="h-3 w-3" />
-                                                            {business.phone}
-                                                        </div>
-                                                    )}
-                                                    {business.website && (
-                                                        <div className="flex items-center gap-1">
-                                                            <Globe className="h-3 w-3" />
-                                                            <a
-                                                                href={business.website}
-                                                                target="_blank"
-                                                                rel="noopener noreferrer"
-                                                                className="text-blue-600 hover:underline cursor-pointer"
-                                                            >
-                                                                Website
-                                                            </a>
-                                                        </div>
-                                                    )}
-                                                </div>
-                                            </TableCell>
-                                            <TableCell>
-                                                <Badge variant="outline">{business.category}</Badge>
-                                            </TableCell>
-                                            <TableCell>
-                                                {business.rating && (
-                                                    <div className="flex items-center gap-1">
-                                                        <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
-                                                        <span className="font-medium">{business.rating}</span>
-                                                        <span className="text-xs text-muted-foreground">
-                                                            ({business.reviewCount})
-                                                        </span>
-                                                    </div>
-                                                )}
-                                            </TableCell>
-                                            <TableCell>
-                                                <Badge variant={getStatusColor(business.emailStatus)}>
-                                                    {business.emailStatus || "pending"}
-                                                </Badge>
-                                            </TableCell>
-                                            <TableCell className="text-right">
-                                                <DropdownMenu>
-                                                    <DropdownMenuTrigger asChild>
-                                                        <Button variant="ghost" size="icon" className="cursor-pointer">
-                                                            <MoreVertical className="h-4 w-4" />
-                                                        </Button>
-                                                    </DropdownMenuTrigger>
-                                                    <DropdownMenuContent align="end">
-                                                        <DropdownMenuItem
-                                                            className="cursor-pointer"
-                                                            onClick={() => handleEdit(business)}
-                                                        >
-                                                            <Eye className="mr-2 h-4 w-4" />
-                                                            Edit Details
-                                                        </DropdownMenuItem>
-                                                        <DropdownMenuItem className="cursor-pointer">
-                                                            <Mail className="mr-2 h-4 w-4" />
-                                                            Send Email
-                                                        </DropdownMenuItem>
-                                                        <DropdownMenuItem
-                                                            className="text-destructive cursor-pointer"
-                                                            onClick={() => handleDelete(business.id)}
-                                                        >
-                                                            <Trash2 className="mr-2 h-4 w-4" />
-                                                            Delete
-                                                        </DropdownMenuItem>
-                                                    </DropdownMenuContent>
-                                                </DropdownMenu>
-                                            </TableCell>
-                                        </TableRow>
-                                    ))}
-                                </TableBody>
-                            </Table>
-
-                            {/* Pagination Controls */}
-                            {totalPages > 1 && (
-                                <div className="flex items-center justify-between px-4 py-4 border-t">
-                                    <div className="text-sm text-muted-foreground">
-                                        Showing {(currentPage - 1) * itemsPerPage + 1} to {Math.min(currentPage * itemsPerPage, filteredBusinesses.length)} of {filteredBusinesses.length} businesses
-                                    </div>
-                                    <div className="flex gap-2">
-                                        <Button
-                                            variant="outline"
-                                            size="sm"
-                                            onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
-                                            disabled={currentPage === 1}
-                                            className="cursor-pointer"
-                                        >
-                                            Previous
-                                        </Button>
-                                        <div className="flex items-center gap-1">
-                                            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
-                                                <Button
-                                                    key={page}
-                                                    variant={currentPage === page ? "default" : "outline"}
-                                                    size="sm"
-                                                    onClick={() => setCurrentPage(page)}
-                                                    className="cursor-pointer min-w-[40px]"
-                                                >
-                                                    {page}
-                                                </Button>
-                                            ))}
-                                        </div>
-                                        <Button
-                                            variant="outline"
-                                            size="sm"
-                                            onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
-                                            disabled={currentPage === totalPages}
-                                            className="cursor-pointer"
-                                        >
-                                            Next
-                                        </Button>
-                                    </div>
-                                </div>
-                            )}
-                        </>
-                    )}
+                    <BusinessTable
+                        businesses={businesses}
+                        onViewDetails={handleViewDetails}
+                        onSendEmail={handleSendEmail}
+                        selectedIds={selectedIds}
+                        onSelectionChange={setSelectedIds}
+                    />
+
+                    {/* Pagination Controls */}
+                    <div className="flex items-center justify-end space-x-2 py-4">
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
+                            disabled={currentPage === 1}
+                        >
+                            Previous
+                        </Button>
+                        <span className="text-sm text-muted-foreground">
+                            Page {currentPage} of {totalPages}
+                        </span>
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
+                            disabled={currentPage === totalPages}
+                        >
+                            Next
+                        </Button>
+                    </div>
                 </CardContent>
             </Card>
 
-            {/* Edit Modal */}
-            {isEditModalOpen && editingBusiness && (
-                <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-                    <Card className="w-full max-w-md">
-                        <CardHeader>
-                            <CardTitle>Edit Business</CardTitle>
-                            <CardDescription>Update business information</CardDescription>
-                        </CardHeader>
-                        <CardContent className="space-y-4">
-                            <div>
-                                <Label>Business Name</Label>
-                                <Input
-                                    defaultValue={editingBusiness.name}
-                                    onChange={(e) => setEditingBusiness({ ...editingBusiness, name: e.target.value })}
-                                />
-                            </div>
-                            <div>
-                                <Label>Email</Label>
-                                <Input
-                                    defaultValue={editingBusiness.email || ""}
-                                    onChange={(e) => setEditingBusiness({ ...editingBusiness, email: e.target.value })}
-                                />
-                            </div>
-                            <div>
-                                <Label>Phone</Label>
-                                <Input
-                                    defaultValue={editingBusiness.phone || ""}
-                                    onChange={(e) => setEditingBusiness({ ...editingBusiness, phone: e.target.value })}
-                                />
-                            </div>
-                            <div className="flex gap-2 pt-4">
-                                <Button
-                                    onClick={() => handleSaveEdit(editingBusiness)}
-                                    className="cursor-pointer flex-1"
-                                    disabled={isSaving}
-                                >
-                                    {isSaving ? (
-                                        <>
-                                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                                            Saving...
-                                        </>
-                                    ) : (
-                                        "Save Changes"
-                                    )}
-                                </Button>
-                                <Button
-                                    variant="outline"
-                                    onClick={() => {
-                                        setIsEditModalOpen(false);
-                                        setEditingBusiness(null);
-                                    }}
-                                    className="cursor-pointer flex-1"
-                                >
-                                    Cancel
-                                </Button>
-                            </div>
-                        </CardContent>
-                    </Card>
-                </div>
-            )}
+            <BusinessDetailModal
+                business={selectedBusiness}
+                isOpen={isModalOpen}
+                onClose={() => setIsModalOpen(false)}
+                onSendEmail={handleSendEmail}
+            />
+
+            <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            This action cannot be undone. This will permanently delete {selectedIds.length} businesses from your list.
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+                        <AlertDialogAction onClick={handleConfirmDelete} className="bg-red-600 hover:bg-red-700">
+                            Delete
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
         </div>
     );
 }

app/dashboard/layout.tsx

@@ -1,12 +1,12 @@
 import { auth } from "@/lib/auth";
 import { redirect } from "next/navigation";
 import { Sidebar } from "@/components/dashboard/sidebar";
-import { NotificationToast } from "@/components/notification-toast";
 import { SupportPopup } from "@/components/support-popup";
 import { DemoNotifications } from "@/components/demo-notifications";
 import { SidebarProvider } from "@/components/dashboard/sidebar-provider";
 import { DashboardContent } from "@/components/dashboard/dashboard-content";
 import { FeedbackButton } from "@/components/feedback-button";
+import { InfoBanner } from "@/components/info-banner";
 
 export default async function DashboardLayout({
   children,
@@ -19,15 +19,26 @@ export default async function DashboardLayout({
     redirect("/auth/signin");
   }
 
+  // Fetch active banner
+  const { db } = await import("@/db");
+  const { banners } = await import("@/db/schema");
+  const { eq } = await import("drizzle-orm");
+  const activeBanner = await db.query.banners.findFirst({
+    where: eq(banners.isActive, true),
+    orderBy: (banners, { desc }) => [desc(banners.createdAt)],
+  });
+
   return (
     <SidebarProvider>
-      <div className="flex h-screen overflow-hidden">
-        <Sidebar />
-        <DashboardContent>{children}</DashboardContent>
-        <NotificationToast />
-        <SupportPopup />
-        <DemoNotifications />
-        <FeedbackButton />
+      <div className="flex h-screen overflow-hidden flex-col">
+        {activeBanner && <InfoBanner message={activeBanner.message} id={activeBanner.id} />}
+        <div className="flex flex-1 overflow-hidden">
+          <Sidebar />
+          <DashboardContent>{children}</DashboardContent>
+          <SupportPopup />
+          <DemoNotifications />
+          <FeedbackButton />
+        </div>
       </div>
     </SidebarProvider>
   );

app/dashboard/page.tsx

@@ -21,18 +21,18 @@ import {
 import { BusinessTypeSelect } from "@/components/business-type-select";
 import { KeywordInput } from "@/components/keyword-input";
 import { ActiveTaskCard } from "@/components/active-task-card";
-import {
-  LineChart,
-  Line,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-} from "recharts";
+// Recharts moved to separate component
+import dynamic from "next/dynamic";
+import { AnimatedContainer } from "@/components/animated-container";
+
+const EmailChart = dynamic(() => import("@/components/dashboard/email-chart"), {
+  loading: () => <div className="h-[300px] flex items-center justify-center"><Loader2 className="animate-spin h-6 w-6" /></div>,
+  ssr: false
+});
 import { useApi } from "@/hooks/use-api";
 import { toast } from "sonner";
 import { allLocations } from "@/lib/locations";
+import { sendNotification } from "@/components/notification-bell";
 
 interface DashboardStats {
   totalBusinesses: number;
@@ -146,9 +146,22 @@ export default function DashboardPage() {
     };
   }, [getBusinessesApi, fetchDashboardStats, fetchActiveTask]);
 
+  const { post: sendEmailApi } = useApi();
+
   const handleSendEmail = async (business: Business) => {
-    // Send email API call
-    console.log("Sending email to:", business);
+    const toastId = toast.loading(`Sending email to ${business.name}...`);
+    try {
+      await sendEmailApi("/api/email/send", { businessId: business.id });
+      toast.success(`Email sent to ${business.email}`, { id: toastId });
+
+      setBusinesses(prev => prev.map(b =>
+        b.id === business.id
+          ? { ...b, emailStatus: "sent", emailSent: true }
+          : b
+      ));
+    } catch {
+      toast.error("Failed to send email", { id: toastId });
+    }
   };
 
   const handleStartScraping = async () => {
@@ -164,8 +177,12 @@ export default function DashboardPage() {
       });
 
       if (result) {
-        toast.success("Scraping job started!", {
-          description: "Check the Tasks page to monitor progress.",
+        sendNotification({
+          title: "Scraping job started!",
+          message: "Check the Tasks page to monitor progress.",
+          type: "success",
+          link: "/dashboard/tasks",
+          actionLabel: "View Tasks"
         });
 
         // Refresh businesses list after a short delay
@@ -204,7 +221,11 @@ export default function DashboardPage() {
           (kw: string) => !keywords.includes(kw)
         );
         setKeywords([...keywords, ...newKeywords]);
-        toast.success(`Generated ${newKeywords.length} keywords!`);
+        sendNotification({
+          title: "Keywords Generated",
+          message: `Successfully generated ${newKeywords.length} new keywords.`,
+          type: "success"
+        });
       }
     } catch (error) {
       toast.error("Failed to generate keywords");
@@ -291,11 +312,8 @@ export default function DashboardPage() {
                   type="checkbox"
                   checked={scrapingSources.includes("google-maps")}
                   onChange={(e) => {
-                    if (e.target.checked) {
-                      setScrapingSources([...scrapingSources, "google-maps"]);
-                    } else {
-                      setScrapingSources(scrapingSources.filter((s: string) => s !== "google-maps"));
-                    }
+                    if (e.target.checked) setScrapingSources([...scrapingSources, "google-maps"]);
+                    else setScrapingSources(scrapingSources.filter(s => s !== "google-maps"));
                   }}
                   className="w-4 h-4 rounded border-gray-300"
                 />
@@ -306,16 +324,49 @@ export default function DashboardPage() {
                   type="checkbox"
                   checked={scrapingSources.includes("google-search")}
                   onChange={(e) => {
-                    if (e.target.checked) {
-                      setScrapingSources([...scrapingSources, "google-search"]);
-                    } else {
-                      setScrapingSources(scrapingSources.filter((s: string) => s !== "google-search"));
-                    }
+                    if (e.target.checked) setScrapingSources([...scrapingSources, "google-search"]);
+                    else setScrapingSources(scrapingSources.filter(s => s !== "google-search"));
                   }}
                   className="w-4 h-4 rounded border-gray-300"
                 />
                 <span className="text-sm">🔍 Google Search</span>
               </label>
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={scrapingSources.includes("linkedin")}
+                  onChange={(e) => {
+                    if (e.target.checked) setScrapingSources([...scrapingSources, "linkedin"]);
+                    else setScrapingSources(scrapingSources.filter(s => s !== "linkedin"));
+                  }}
+                  className="w-4 h-4 rounded border-gray-300"
+                />
+                <span className="text-sm">💼 LinkedIn</span>
+              </label>
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={scrapingSources.includes("facebook")}
+                  onChange={(e) => {
+                    if (e.target.checked) setScrapingSources([...scrapingSources, "facebook"]);
+                    else setScrapingSources(scrapingSources.filter(s => s !== "facebook"));
+                  }}
+                  className="w-4 h-4 rounded border-gray-300"
+                />
+                <span className="text-sm">👥 Facebook</span>
+              </label>
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={scrapingSources.includes("instagram")}
+                  onChange={(e) => {
+                    if (e.target.checked) setScrapingSources([...scrapingSources, "instagram"]);
+                    else setScrapingSources(scrapingSources.filter(s => s !== "instagram"));
+                  }}
+                  className="w-4 h-4 rounded border-gray-300"
+                />
+                <span className="text-sm">📸 Instagram</span>
+              </label>
             </div>
             <p className="text-xs text-muted-foreground">
               Select sources to scrape from. More sources = more comprehensive results.
@@ -357,7 +408,8 @@ export default function DashboardPage() {
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         {loadingStats || !stats ? (
           Array.from({ length: 4 }).map((_, i) => (
-            <Card key={i}>
+            <AnimatedContainer key={i} delay={0.1 + (i * 0.1)}>
+              <Card>
               <CardHeader>
                 <div className="h-4 w-24 bg-muted animate-pulse rounded"></div>
               </CardHeader>
@@ -365,76 +417,65 @@ export default function DashboardPage() {
                 <div className="h-8 w-16 bg-muted animate-pulse rounded"></div>
               </CardContent>
             </Card>
+            </AnimatedContainer>
           ))
         ) : (
                 <>
+              <AnimatedContainer delay={0.2}>
                   <StatCard
                     title="Total Businesses"
                     value={stats.totalBusinesses}
                     icon={Users}
                   />
+              </AnimatedContainer>
+              <AnimatedContainer delay={0.3}>
                   <StatCard
                     title="Emails Sent"
                     value={stats.emailsSent}
                     icon={Mail}
                   />
+              </AnimatedContainer>
+              <AnimatedContainer delay={0.4}>
                   <StatCard
                     title="Emails Opened"
                     value={stats.emailsOpened}
                     icon={CheckCircle2}
                   />
+              </AnimatedContainer>
+              <AnimatedContainer delay={0.5}>
                   <StatCard
                     title="Open Rate"
                     value={`${stats.openRate}% `}
                     icon={TrendingUp}
                   />
+              </AnimatedContainer>
                 </>
               )}
             </div>
 
             {/* Chart */}
+      <AnimatedContainer delay={0.6}>
             <Card>
               <CardHeader>
                 <CardTitle>Email Performance (Last 7 Days)</CardTitle>
               </CardHeader>
-        <CardContent>
-          {loadingStats || chartData.length === 0 ? (
-                  <div className="h-[300px] flex items-center justify-center text-muted-foreground">
-              {loadingStats ? <Loader2 className="animate-spin h-6 w-6" /> : "No data available"}
-                  </div>
-                ) : (
-                  <ResponsiveContainer width="100%" height={300}>
-                    <LineChart data={chartData}>
-                      <CartesianGrid strokeDasharray="3 3" />
-                      <XAxis dataKey="name" />
-                      <YAxis />
-                      <Tooltip />
-                      <Line
-                        type="monotone"
-                        dataKey="sent"
-                        stroke="#3b82f6"
-                        strokeWidth={2}
-                      />
-                      <Line
-                        type="monotone"
-                        dataKey="opened"
-                        stroke="#10b981"
-                        strokeWidth={2}
-                      />
-                    </LineChart>
-                  </ResponsiveContainer>
-                )}
+          <CardContent>
+            <EmailChart data={chartData} loading={loadingStats} />
               </CardContent>
             </Card>
+      </AnimatedContainer>
 
             {/* Business Table */}
             <Card>
-              <CardHeader>
-                <CardTitle>Businesses ({businesses.length})</CardTitle>
+        <CardHeader className="flex flex-row items-center justify-between">
+          <CardTitle>Recent Leads ({businesses.length})</CardTitle>
+          <Button variant="outline" asChild>
+            <a href="/dashboard/businesses">View All</a>
+          </Button>
               </CardHeader>
               <CardContent>
                 <BusinessTable
-                  businesses={businesses}
+            businesses={businesses.slice(0, 10)}
                   onViewDetails={handleViewDetails}
                   onSendEmail={handleSendEmail}
                 />

app/dashboard/tasks/page.tsx

@@ -2,18 +2,10 @@
 
 import { useState, useEffect, useCallback } from "react";
 import { useRouter } from "next/navigation";
-import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Plus, Check, Clock, AlertCircle, Pause, Play, StopCircle, RefreshCw } from "lucide-react";
+import { Plus, Clock, AlertCircle, Check, RefreshCw } from "lucide-react";
 import { useApi } from "@/hooks/use-api";
 import { toast } from "sonner";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 import {
   DndContext,
   DragOverlay,
@@ -26,34 +18,30 @@ import {
   DragEndEvent
 } from "@dnd-kit/core";
 import {
-  SortableContext,
   sortableKeyboardCoordinates,
-  verticalListSortingStrategy,
-  useSortable
 } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-
-interface Task {
-  id: string;
-  title: string;
-  description: string;
-  status: "pending" | "in-progress" | "completed" | "processing" | "paused" | "failed" | "running";
-  priority: "low" | "medium" | "high";
-  type?: "scraping" | "workflow";
-  businessesFound?: number;
-  workflowName?: string;
-  createdAt: Date;
-}
+
+import { ConfirmDialog } from "@/components/common/confirm-dialog";
+import { TaskColumn } from "@/components/dashboard/tasks/task-column";
+import { TaskCard } from "@/components/dashboard/tasks/task-card";
+import { Task } from "@/types";
 
 export default function TasksPage() {
   const [tasks, setTasks] = useState<Task[]>([]);
   const [controllingTaskId, setControllingTaskId] = useState<string | null>(null);
   const [refreshing, setRefreshing] = useState(false);
+  const [confirmStopId, setConfirmStopId] = useState<string | null>(null);
+  const [confirmDeleteId, setConfirmDeleteId] = useState<{ id: string, type: "scraping" | "workflow" } | null>(null);
+
+  // Drag state
+  const [activeTask, setActiveTask] = useState<Task | null>(null);
+
   const router = useRouter();
 
   const { get: getTasks, loading } = useApi<Task[]>();
   const { post: controlScraping } = useApi();
   const { patch: updateWorkflow } = useApi();
+  const { del: deleteTask } = useApi();
 
   // Fetch tasks function
   const fetchTasks = useCallback(async () => {
@@ -104,10 +92,21 @@ export default function TasksPage() {
     }
   };
 
+  const handleControlRequest = (taskId: string, action: "pause" | "resume" | "stop") => {
+    if (action === "stop") {
+      setConfirmStopId(taskId);
+    } else {
+      handleControl(taskId, action);
+    }
+  };
+
   const handlePriorityChange = async (taskId: string, priority: "low" | "medium" | "high") => {
     const task = tasks.find(t => t.id === taskId);
     if (!task) return;
 
+    // Optimistic UI update
+    setTasks(prev => prev.map(t => t.id === taskId ? { ...t, priority } : t));
+
     try {
       let result;
 
@@ -125,40 +124,53 @@ export default function TasksPage() {
 
       if (result) {
         toast.success(`Priority updated to ${priority}`);
-        await fetchTasks();
+        // No need to fetch if optimistic update matches, but safe to fetch
+        // await fetchTasks(); 
       }
     } catch (error) {
       toast.error("Failed to update priority");
       console.error("Error updating priority:", error);
+      // Revert optimistic update
+      await fetchTasks();
     }
   };
 
-  // Removed local storage logic and manual task creation
+  const handleDeleteRequest = (taskId: string, type: "scraping" | "workflow" = "scraping") => {
+    setConfirmDeleteId({ id: taskId, type });
+  };
+
+  const handleDelete = async () => {
+    if (!confirmDeleteId) return;
+
+    try {
+      await deleteTask(`/api/tasks?id=${confirmDeleteId.id}&type=${confirmDeleteId.type}`);
+      toast.success("Task deleted successfully");
+      await fetchTasks();
+    } catch (error) {
+      toast.error("Failed to delete task");
+      console.error("Error deleting task:", error);
+    } finally {
+      setConfirmDeleteId(null);
+    }
+  };
 
   const pendingTasks = tasks.filter((t) => t.status === "pending");
   const inProgressTasks = tasks.filter((t) =>
     t.status === "in-progress" ||
     t.status === "processing" ||
-    t.status === "paused"
+    t.status === "paused" ||
+    t.status === "running"
   );
   const completedTasks = tasks.filter((t) =>
     t.status === "completed" ||
     t.status === "failed"
   );
 
-  const priorityColors = {
-    low: "bg-blue-500",
-    medium: "bg-yellow-500",
-    high: "bg-red-500",
-  };
-
   /* Drag and Drop State */
-  const [activeTask, setActiveTask] = useState<Task | null>(null);
-
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
-        distance: 8, // Requires 8px movement to start drag, allowing button clicks
+        distance: 8,
       },
     }),
     useSensor(KeyboardSensor, {
@@ -184,7 +196,7 @@ export default function TasksPage() {
     const overId = over.id as string;
     const activeTask = tasks.find((t) => t.id === activeId);
 
-    // Determine target column based on overId (which could be a task ID or column ID)
+    // Determine target column based on overId
     let targetStatus: Task["status"] | null = null;
 
     if (overId === "pending-column" || overId === "in-progress-column" || overId === "completed-column") {
@@ -195,9 +207,8 @@ export default function TasksPage() {
       // Dropped over another task
       const overTask = tasks.find((t) => t.id === overId);
       if (overTask) {
-        // Map task status to column group
         if (overTask.status === "processing" || overTask.status === "paused" || overTask.status === "running") {
-          targetStatus = "in-progress"; // Group these under in-progress
+          targetStatus = "in-progress"; 
         } else {
           targetStatus = overTask.status;
         }
@@ -228,33 +239,35 @@ export default function TasksPage() {
   };
 
   return (
-    <div className="p-6 space-y-6">
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+    <div className="p-6 space-y-8 max-w-[1600px] mx-auto">
+      <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
         <div>
-          <h1 className="text-3xl font-bold tracking-tight">Task Management</h1>
-          <p className="text-muted-foreground">
-            Track your automated scraping and outreach jobs
+          <h1 className="text-3xl font-bold tracking-tight bg-linear-to-r from-primary to-primary/60 bg-clip-text text-transparent">Task Management</h1>
+          <p className="text-muted-foreground mt-1">
+            Track and manage your automated scraping and outreach jobs
           </p>
         </div>
-        <div className="flex gap-2">
+        <div className="flex gap-3">
           <Button
             onClick={fetchTasks}
             variant="outline"
             disabled={refreshing || loading}
-            className="w-full sm:w-auto"
+            className="w-full sm:w-auto shadow-sm"
           >
             <RefreshCw className={`mr-2 h-4 w-4 ${refreshing ? 'animate-spin' : ''}`} />
             Refresh
           </Button>
-          <Button onClick={() => router.push("/dashboard/workflows?create=true")} className="w-full sm:w-auto">
+          <Button onClick={() => router.push("/dashboard/workflows?create=true")} className="w-full sm:w-auto shadow-md hover:shadow-lg transition-all">
             <Plus className="mr-2 h-4 w-4" />
             New Automation
           </Button>
         </div>
       </div>
 
-      {loading ? (
-        <div className="flex justify-center p-12">Loading tasks...</div>
+      {loading && tasks.length === 0 ? (
+        <div className="flex justify-center p-12">
+          <RefreshCw className="h-8 w-8 animate-spin text-primary" />
+        </div>
       ) : (
           <DndContext
             sensors={sensors}
@@ -262,63 +275,52 @@ export default function TasksPage() {
             onDragStart={handleDragStart}
             onDragEnd={handleDragEnd}
           >
-            <div className="grid gap-6 md:grid-cols-3">
+            <div className="grid gap-6 md:grid-cols-3 h-full">
               {/* Pending Column */}
-              <SortableContext
+              <TaskColumn
                 id="pending-column"
-                items={pendingTasks.map(t => t.id)}
-                strategy={verticalListSortingStrategy}
-              >
-                <TaskColumn
-                  id="pending-column"
-                  title="Pending"
-                  icon={<Clock className="h-5 w-5" />}
-                  tasks={pendingTasks}
-                  count={pendingTasks.length}
-                  priorityColors={priorityColors}
-                />
-              </SortableContext>
+                title="Pending"
+                icon={<Clock className="h-5 w-5 text-pending-foreground" />}
+                tasks={pendingTasks}
+                count={pendingTasks.length}
+                onControl={handleControlRequest}
+                onPriorityChange={handlePriorityChange}
+                onDelete={handleDeleteRequest}
+                controllingTaskId={controllingTaskId}
+              />
 
               {/* In Progress Column */}
-              <SortableContext
+              <TaskColumn
                 id="in-progress-column"
-                items={inProgressTasks.map(t => t.id)}
-                strategy={verticalListSortingStrategy}
-              >
-                <TaskColumn
-                  id="in-progress-column"
-                  title="In Progress"
-                  icon={<AlertCircle className="h-5 w-5" />}
-                  tasks={inProgressTasks}
-                  count={inProgressTasks.length}
-                  priorityColors={priorityColors}
-                  onControl={handleControl}
-                  controllingTaskId={controllingTaskId}
-                />
-              </SortableContext>
+                title="In Progress"
+                icon={<AlertCircle className="h-5 w-5 text-blue-500" />}
+                tasks={inProgressTasks}
+                count={inProgressTasks.length}
+                onControl={handleControlRequest}
+                onPriorityChange={handlePriorityChange}
+                onDelete={handleDeleteRequest}
+                controllingTaskId={controllingTaskId}
+                contentClassName="max-h-[400px] overflow-y-auto pr-2 custom-scrollbar"
+              />
 
               {/* Completed Column */}
-              <SortableContext
+              <TaskColumn
                 id="completed-column"
-                items={completedTasks.map(t => t.id)}
-                strategy={verticalListSortingStrategy}
-              >
-                <TaskColumn
-                  id="completed-column"
-                  title="Completed"
-                  icon={<Check className="h-5 w-5" />}
-                  tasks={completedTasks}
-                  count={completedTasks.length}
-                  priorityColors={priorityColors}
-                />
-              </SortableContext>
+                title="Completed"
+                icon={<Check className="h-5 w-5 text-green-500" />}
+                tasks={completedTasks}
+                count={completedTasks.length}
+                onControl={handleControlRequest}
+                onPriorityChange={handlePriorityChange}
+                onDelete={handleDeleteRequest}
+                controllingTaskId={controllingTaskId}
+              />
             </div>
+
             <DragOverlay>
               {activeTask ? (
                 <TaskCard
                   task={activeTask}
-                  priorityColors={priorityColors}
-                  // Hide controls during drag for cleaner look, or keep them
                   onControl={handleControl}
                   onPriorityChange={handlePriorityChange}
                   controllingTaskId={controllingTaskId}
@@ -327,187 +329,29 @@ export default function TasksPage() {
           </DragOverlay>
         </DndContext>
       )}
-    </div>
-  );
-}
-
-// Separate Column Component to handle dropping
-interface TaskColumnProps {
-  id: string;
-  title: string;
-  icon: React.ReactNode;
-  tasks: Task[];
-  count: number;
-  priorityColors: Record<string, string>;
-  onControl?: (jobId: string, action: "pause" | "resume" | "stop") => void;
-  onPriorityChange?: (taskId: string, priority: "low" | "medium" | "high") => void;
-  controllingTaskId?: string | null;
-}
-
-function TaskColumn({ id, title, icon, tasks, count, priorityColors, onControl, onPriorityChange, controllingTaskId }: TaskColumnProps) {
-  const { setNodeRef } = useSortable({ id });
 
-  return (
-    <div ref={setNodeRef} className="space-y-4 bg-muted/50 p-4 rounded-lg min-h-[500px]">
-      <h3 className="font-semibold text-lg flex items-center gap-2">
-        {icon}
-        {title} ({count})
-      </h3>
-      <div className="space-y-3">
-        {tasks.map((task: Task) => (
-          <SortableTaskCard
-            key={task.id}
-            task={task}
-            priorityColors={priorityColors}
-            onControl={onControl}
-            onPriorityChange={onPriorityChange}
-            controllingTaskId={controllingTaskId}
-          />
-        ))}
-        {tasks.length === 0 && (
-          <p className="text-sm text-muted-foreground text-center py-8">
-            No tasks
-          </p>
-        )}
-      </div>
+      <ConfirmDialog
+        open={!!confirmStopId}
+        onOpenChange={(open) => !open && setConfirmStopId(null)}
+        title="Stop Task?"
+        description="Are you sure you want to stop this task? This action cannot be undone and the task will be marked as failed/stopped."
+        confirmText="Stop Task"
+        onConfirm={() => {
+          if (confirmStopId) handleControl(confirmStopId, "stop");
+          setConfirmStopId(null);
+        }}
+        variant="destructive"
+      />
+
+      <ConfirmDialog
+        open={!!confirmDeleteId}
+        onOpenChange={(open) => !open && setConfirmDeleteId(null)}
+        title="Delete Task?"
+        description="Are you sure you want to delete this task? This action cannot be undone."
+        confirmText="Delete"
+        onConfirm={handleDelete}
+        variant="destructive"
+      />
     </div>
   );
 }
-
-interface SortableTaskCardProps {
-  task: Task;
-  priorityColors: Record<string, string>;
-  onControl?: (jobId: string, action: "pause" | "resume" | "stop") => void;
-  onPriorityChange?: (taskId: string, priority: "low" | "medium" | "high") => void;
-  controllingTaskId?: string | null;
-}
-
-function SortableTaskCard(props: SortableTaskCardProps) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-  } = useSortable({ id: props.task.id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-  };
-
-  return (
-    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
-      <TaskCard {...props} />
-    </div>
-  );
-}
-
-function TaskCard({
-  task,
-  priorityColors,
-  onControl,
-  onPriorityChange,
-  controllingTaskId,
-}: {
-  task: Task;
-  priorityColors: Record<string, string>;
-    onControl?: (jobId: string, action: "pause" | "resume" | "stop") => void;
-    onPriorityChange?: (taskId: string, priority: "low" | "medium" | "high") => void;
-    controllingTaskId?: string | null;
-}) {
-  const showControls = ["running", "processing", "paused", "pending", "in-progress"].includes(task.status);
-  const isControlling = controllingTaskId === task.id;
-
-  return (
-    <Card className="hover:shadow-md transition-shadow">
-      <CardContent className="p-4 space-y-3">
-        <div className="flex items-start justify-between">
-          <div className="flex-1">
-            <h4 className="font-medium flex items-center gap-2">
-              {task.title}
-              {task.type === "workflow" && (
-                <Badge variant="secondary" className="text-[10px] h-5">Workflow</Badge>
-              )}
-            </h4>
-            {task.description && (
-              <p className="text-sm text-muted-foreground mt-1">
-                {task.description}
-              </p>
-            )}
-          </div>
-        </div>
-
-        <div className="flex items-center gap-2 flex-wrap">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Badge variant="outline" className="text-xs cursor-pointer hover:bg-accent transition-colors">
-                <div className={`h-2 w-2 rounded-full ${priorityColors[task.priority]} mr-1`} />
-                {task.priority || "medium"}
-              </Badge>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start">
-              <DropdownMenuItem onClick={() => onPriorityChange?.(task.id, "low")}>
-                <div className={`h-2 w-2 rounded-full ${priorityColors.low} mr-2`} />
-                Low
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => onPriorityChange?.(task.id, "medium")}>
-                <div className={`h-2 w-2 rounded-full ${priorityColors.medium} mr-2`} />
-                Medium
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => onPriorityChange?.(task.id, "high")}>
-                <div className={`h-2 w-2 rounded-full ${priorityColors.high} mr-2`} />
-                High
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-
-          <div className="text-xs text-muted-foreground">
-            {new Date(task.createdAt).toLocaleDateString()}
-          </div>
-
-          {showControls && onControl && (
-            <div className="ml-auto flex gap-2">
-              {(task.status === "in-progress" || task.status === "processing" || task.status === "running") && (
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={() => onControl(task.id, "pause")}
-                  disabled={isControlling}
-                  className="h-7 w-7 p-0"
-                >
-                  <Pause className="h-4 w-4" />
-                </Button>
-              )}
-
-              {task.status === "paused" && (
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={() => onControl(task.id, "resume")}
-                  disabled={isControlling}
-                  className="h-7 w-7 p-0"
-                >
-                  <Play className="h-4 w-4" />
-                </Button>
-              )}
-
-              {/* Stop Button */}
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => onControl(task.id, "stop")}
-                disabled={isControlling}
-                className="text-red-500 hover:text-red-600 h-7 w-7 p-0"
-              >
-                <StopCircle className="h-4 w-4" />
-              </Button>
-                 
-            
-            </div>
-          )}
-        </div>
-      </CardContent>
-    </Card>
-  );
-}

app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import "./cursor-styles.css";
 import { Providers } from "./providers";
+import { Toaster } from "@/components/ui/sonner";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -60,7 +61,10 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={inter.variable}>
-        <Providers>{children}</Providers>
+        <Providers>
+          {children}
+          <Toaster />
+        </Providers>
       </body>
     </html>
   );

app/providers.tsx

@@ -2,14 +2,13 @@
 
 import { SessionProvider } from "next-auth/react";
 import { ThemeProvider } from "@/components/theme-provider";
-import { Toaster } from "sonner";
+
 
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <SessionProvider>
       <ThemeProvider>
         {children}
-        <Toaster richColors position="bottom-right" closeButton theme="system" />
       </ThemeProvider>
     </SessionProvider>
   );

components/admin/admin-analytics.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
+    PieChart, Pie, Cell, BarChart, Bar, Legend
+} from "recharts";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { RefreshCcw } from "lucide-react";
+
+interface AdminAnalyticsProps {
+    userGrowth: { date: string; count: number }[];
+    businessCategories: { name: string; value: number }[];
+    businessStatus: { name: string; value: number }[];
+}
+
+const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8'];
+
+export function AdminAnalytics({ userGrowth, businessCategories, businessStatus }: AdminAnalyticsProps) {
+    const router = useRouter();
+    const [isRefreshing, setIsRefreshing] = useState(false);
+
+    const handleRefresh = () => {
+        setIsRefreshing(true);
+        router.refresh();
+        setTimeout(() => setIsRefreshing(false), 1000);
+    };
+
+    return (
+        <div className="space-y-4">
+            <div className="flex items-center justify-between">
+                <h2 className="text-xl font-semibold">Analytics & Activity</h2>
+                <div className="flex gap-2">
+                    <Button variant="outline" size="sm" onClick={handleRefresh} disabled={isRefreshing}>
+                        <RefreshCcw className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
+                        Refresh Data
+                    </Button>
+                </div>
+            </div>
+
+            <Tabs defaultValue="growth" className="space-y-4">
+                <TabsList>
+                    <TabsTrigger value="growth">User Growth</TabsTrigger>
+                    <TabsTrigger value="demographics">Demographics</TabsTrigger>
+                    <TabsTrigger value="status">Lead Status</TabsTrigger>
+                </TabsList>
+
+                <TabsContent value="growth">
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Active Graph (User Signups)</CardTitle>
+                            <CardDescription>New user registrations over time</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="h-[300px] w-full">
+                                <ResponsiveContainer width="100%" height="100%">
+                                    <LineChart data={userGrowth}>
+                                        <CartesianGrid strokeDasharray="3 3" />
+                                        <XAxis dataKey="date" />
+                                        <YAxis allowDecimals={false} />
+                                        <Tooltip />
+                                        <Line type="monotone" dataKey="count" stroke="#8884d8" strokeWidth={2} activeDot={{ r: 8 }} />
+                                    </LineChart>
+                                </ResponsiveContainer>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </TabsContent>
+
+                <TabsContent value="demographics">
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Business Categories</CardTitle>
+                            <CardDescription>Distribution of scraped businesses by category</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="h-[300px] w-full">
+                                <ResponsiveContainer width="100%" height="100%">
+                                    <PieChart>
+                                        <Pie
+                                            data={businessCategories}
+                                            cx="50%"
+                                            cy="50%"
+                                            labelLine={false}
+                                            label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
+                                            outerRadius={100}
+                                            fill="#8884d8"
+                                            dataKey="value"
+                                        >
+                                            {businessCategories.map((entry, index) => (
+                                                <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                                            ))}
+                                        </Pie>
+                                        <Tooltip />
+                                    </PieChart>
+                                </ResponsiveContainer>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </TabsContent>
+
+                <TabsContent value="status">
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Business Status</CardTitle>
+                            <CardDescription>Status breakdown of current leads</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="h-[300px] w-full">
+                                <ResponsiveContainer width="100%" height="100%">
+                                    <BarChart data={businessStatus}>
+                                        <CartesianGrid strokeDasharray="3 3" />
+                                        <XAxis dataKey="name" />
+                                        <YAxis />
+                                        <Tooltip />
+                                        <Legend />
+                                        <Bar dataKey="value" fill="#82ca9d" name="Count" />
+                                    </BarChart>
+                                </ResponsiveContainer>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </TabsContent>
+            </Tabs>
+        </div>
+    );
+}

components/admin/admin-business-view.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useState } from "react";
+import { Business } from "@/types"; // Ensure Business type is compatible or inferred
+import { BusinessTable } from "@/components/dashboard/business-table";
+import { BusinessDetailModal } from "@/components/dashboard/business-detail-modal";
+import { Button } from "@/components/ui/button";
+import { adminBulkDeleteBusinesses } from "@/app/admin/actions/business";
+import { Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+interface AdminBusinessViewProps {
+    initialBusinesses: Business[];
+}
+
+export function AdminBusinessView({ initialBusinesses }: AdminBusinessViewProps) {
+    const [businesses, setBusinesses] = useState<Business[]>(initialBusinesses);
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    const [selectedBusiness, setSelectedBusiness] = useState<Business | null>(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const handleDeleteSelected = async () => {
+        if (!confirm(`Delete ${selectedIds.length} businesses?`)) return;
+
+        try {
+            await adminBulkDeleteBusinesses(selectedIds);
+            setBusinesses(prev => prev.filter(b => !selectedIds.includes(b.id)));
+            setSelectedIds([]);
+            toast.success("Deleted successfully");
+        } catch (error) {
+            toast.error("Failed to delete");
+        }
+    };
+
+    const handleViewDetails = (business: Business) => {
+        setSelectedBusiness(business);
+        setIsModalOpen(true);
+    };
+
+    return (
+        <div className="space-y-6">
+            <div className="flex justify-between items-center">
+                <div>
+                    <h2 className="text-3xl font-bold tracking-tight">Businesses</h2>
+                    <p className="text-muted-foreground">Manage scraped leads and business data</p>
+                </div>
+                {selectedIds.length > 0 && (
+                     <Button variant="destructive" onClick={handleDeleteSelected}>
+                        <Trash2 className="mr-2 h-4 w-4" />
+                        Delete ({selectedIds.length})
+                     </Button>
+                )}
+            </div>
+
+            <Card>
+                <CardHeader>
+                    <CardTitle>All Leads ({businesses.length})</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <BusinessTable 
+                        businesses={businesses} 
+                        onViewDetails={handleViewDetails}
+                        onSendEmail={() => {}} // Admin doesn't send emails from here typically
+                        selectedIds={selectedIds}
+                        onSelectionChange={setSelectedIds}
+                    />
+                </CardContent>
+            </Card>
+
+            <BusinessDetailModal
+              business={selectedBusiness}
+              isOpen={isModalOpen}
+              onClose={() => setIsModalOpen(false)}
+            />
+        </div>
+    );
+}

components/admin/feedback-actions.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Check, Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { useRouter } from "next/navigation";
+
+interface FeedbackActionsProps {
+    id: string;
+    status: string;
+}
+
+export function FeedbackActions({ id, status }: FeedbackActionsProps) {
+    const [loading, setLoading] = useState(false);
+    const router = useRouter();
+
+    if (status === "resolved") return null;
+
+    const handleResolve = async () => {
+        setLoading(true);
+        try {
+            const res = await fetch("/api/feedback", {
+                method: "PATCH",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ id, status: "resolved" }),
+            });
+
+            if (!res.ok) throw new Error("Failed");
+
+            toast.success("Marked as resolved");
+            router.refresh();
+        } catch {
+            toast.error("Failed to update status");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <Button
+            size="sm"
+            variant="outline"
+            onClick={handleResolve}
+            disabled={loading}
+            className="h-8"
+        >
+            {loading ? (
+                <Loader2 className="h-3.5 w-3.5 animate-spin mr-1" />
+            ) : (
+                <Check className="h-3.5 w-3.5 mr-1" />
+            )}
+            Resolve
+        </Button>
+    );
+}

components/admin/quick-actions.tsx

@@ -0,0 +1,32 @@
+import Link from "next/link";
+import { Bell, Megaphone } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+export function QuickActions() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Quick Actions</CardTitle>
+        <CardDescription>Common administrative tasks</CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-4 md:grid-cols-2">
+        <Button variant="outline" className="h-auto py-4 flex flex-col gap-2 items-center justify-center hover:bg-muted/50" asChild>
+          <Link href="/admin/settings?tab=notifications">
+            <Bell className="h-6 w-6 text-primary" />
+            <span className="font-semibold">Send Notification</span>
+            <span className="text-xs text-muted-foreground font-normal">Broadcast to all users</span>
+          </Link>
+        </Button>
+
+        <Button variant="outline" className="h-auto py-4 flex flex-col gap-2 items-center justify-center hover:bg-muted/50" asChild>
+          <Link href="/admin/settings?tab=banners">
+            <Megaphone className="h-6 w-6 text-blue-500" />
+            <span className="font-semibold">Create Banner</span>
+            <span className="text-xs text-muted-foreground font-normal">Set info marquee</span>
+          </Link>
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

components/animated-container.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { motion } from "framer-motion";
+import React from "react";
+
+interface AnimatedContainerProps {
+  children: React.ReactNode;
+  delay?: number;
+  className?: string;
+  direction?: "up" | "down" | "left" | "right";
+}
+
+export function AnimatedContainer({ 
+  children, 
+  delay = 0, 
+  className = "",
+  direction = "up" 
+}: AnimatedContainerProps) {
+  
+  const getInitial = () => {
+    switch (direction) {
+      case "up": return { opacity: 0, y: 20 };
+      case "down": return { opacity: 0, y: -20 };
+      case "left": return { opacity: 0, x: 20 };
+      case "right": return { opacity: 0, x: -20 };
+    }
+  };
+
+  return (
+    <motion.div
+      initial={getInitial()}
+      animate={{ opacity: 1, x: 0, y: 0 }}
+      transition={{ duration: 0.5, delay, ease: "easeOut" }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+}

components/common/confirm-dialog.tsx

@@ -0,0 +1,58 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+interface ConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: string;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm: () => void;
+  variant?: "default" | "destructive";
+  loading?: boolean;
+}
+
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  onConfirm,
+  variant = "default",
+  loading = false,
+}: ConfirmDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={loading}>{cancelText}</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={(e) => {
+              e.preventDefault();
+              onConfirm();
+            }}
+            className={variant === "destructive" ? "bg-red-600 hover:bg-red-700 focus:ring-red-600" : ""}
+            disabled={loading}
+          >
+            {loading ? "Processing..." : confirmText}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

components/dashboard/business-table.tsx

@@ -23,7 +23,12 @@ export function BusinessTable({
   businesses,
   onViewDetails,
   onSendEmail,
-}: BusinessTableProps) {
+  selectedIds = [],
+  onSelectionChange,
+}: BusinessTableProps & {
+  selectedIds?: string[];
+  onSelectionChange?: (ids: string[]) => void;
+}) {
   const getStatusBadge = (status: Business["emailStatus"]) => {
     if (!status || status === "pending")
       return <Badge variant="default">Pending</Badge>;
@@ -35,11 +40,42 @@ export function BusinessTable({
     return <Badge variant="default">Unknown</Badge>;
   };
 
+  const handleSelectAll = (checked: boolean) => {
+    if (onSelectionChange) {
+      if (checked) {
+        onSelectionChange(businesses.map((b) => b.id));
+      } else {
+        onSelectionChange([]);
+      }
+    }
+  };
+
+  const handleSelectOne = (id: string, checked: boolean) => {
+    if (onSelectionChange) {
+      if (checked) {
+        onSelectionChange([...selectedIds, id]);
+      } else {
+        onSelectionChange(selectedIds.filter((sid) => sid !== id));
+      }
+    }
+  };
+
   return (
     <Table>
       <TableHeader>
         <TableRow>
+          {onSelectionChange && (
+            <TableHead className="w-[50px]">
+              <input
+                type="checkbox"
+                className="w-4 h-4 rounded border-gray-300"
+                checked={businesses.length > 0 && selectedIds.length === businesses.length}
+                onChange={(e) => handleSelectAll(e.target.checked)}
+              />
+            </TableHead>
+          )}
           <TableHead>Business Name</TableHead>
+          <TableHead>Website</TableHead>
           <TableHead>Email</TableHead>
           <TableHead>Phone</TableHead>
           <TableHead>Category</TableHead>
@@ -50,7 +86,31 @@ export function BusinessTable({
       <TableBody>
         {businesses.map((business) => (
           <TableRow key={business.id}>
+            {onSelectionChange && (
+              <TableCell>
+                <input
+                  type="checkbox"
+                  className="w-4 h-4 rounded border-gray-300"
+                  checked={selectedIds.includes(business.id)}
+                  onChange={(e) => handleSelectOne(business.id, e.target.checked)}
+                />
+              </TableCell>
+            )}
             <TableCell className="font-medium">{business.name}</TableCell>
+            <TableCell>
+              {business.website ? (
+                <a
+                  href={business.website}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1 text-sm"
+                >
+                  Visit <ExternalLink className="h-3 w-3" />
+                </a>
+              ) : (
+                <span className="text-muted-foreground text-sm">-</span>
+              )}
+            </TableCell>
             <TableCell>
               {business.email || (
                 <span className="text-muted-foreground">No email</span>

components/dashboard/email-chart.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+import { Loader2 } from "lucide-react";
+
+interface ChartDataPoint {
+  name: string;
+  sent: number;
+  opened: number;
+}
+
+interface EmailChartProps {
+  data: ChartDataPoint[];
+  loading: boolean;
+}
+
+export default function EmailChart({ data, loading }: EmailChartProps) {
+  if (loading || data.length === 0) {
+    return (
+      <div className="h-[300px] flex items-center justify-center text-muted-foreground">
+        {loading ? <Loader2 className="animate-spin h-6 w-6" /> : "No data available"}
+      </div>
+    );
+  }
+
+  return (
+    <ResponsiveContainer width="100%" height={300}>
+      <LineChart data={data}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip />
+        <Line
+          type="monotone"
+          dataKey="sent"
+          stroke="#3b82f6"
+          strokeWidth={2}
+        />
+        <Line
+          type="monotone"
+          dataKey="opened"
+          stroke="#10b981"
+          strokeWidth={2}
+        />
+      </LineChart>
+    </ResponsiveContainer>
+  );
+}

components/dashboard/tasks/task-card.tsx

@@ -0,0 +1,173 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Pause, Play, StopCircle, Trash2 } from "lucide-react";
+import { Task } from "@/types";
+
+export const priorityColors: Record<string, string> = {
+  low: "bg-blue-500",
+  medium: "bg-yellow-500",
+  high: "bg-red-500",
+};
+
+interface TaskCardProps {
+  task: Task;
+  onControl?: (jobId: string, action: "pause" | "resume" | "stop") => void;
+  onPriorityChange?: (taskId: string, priority: "low" | "medium" | "high") => void;
+  onDelete?: (taskId: string, type: "scraping" | "workflow") => void;
+  controllingTaskId?: string | null;
+}
+
+export function TaskCard({
+  task,
+  onControl,
+  onPriorityChange,
+  onDelete,
+  controllingTaskId,
+}: TaskCardProps) {
+  const showControls = ["running", "processing", "paused", "pending", "in-progress"].includes(task.status);
+  const isControlling = controllingTaskId === task.id;
+
+  return (
+    <Card className="group hover:shadow-lg transition-all duration-200 border-l-4" style={{ borderLeftColor: priorityColors[task.priority]?.replace("bg-", "") /* This is a hack, better to use proper colors */ }}>
+       {/* Actually, let's just keep the original card style but enhance hover */}
+       <div className={`absolute left-0 top-0 bottom-0 w-1 rounded-l-md ${priorityColors[task.priority]}`} />
+       
+      <CardContent className="p-4 space-y-3 relative pl-5"> 
+      {/* Added pl-5 for the colored bar */}
+      
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <h4 className="font-medium flex items-center gap-2 text-foreground">
+              {task.title}
+              {task.type === "workflow" && (
+                <Badge variant="secondary" className="text-[10px] h-5 px-1.5">Workflow</Badge>
+              )}
+            </h4>
+            {task.description && (
+              <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
+                {task.description}
+              </p>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 flex-wrap pt-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Badge variant="outline" className="text-xs cursor-pointer hover:bg-muted transition-colors px-2 py-0.5 h-6">
+                <div className={`h-2 w-2 rounded-full ${priorityColors[task.priority]} mr-1.5`} />
+                <span className="capitalize">{task.priority || "medium"}</span>
+              </Badge>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem onClick={() => onPriorityChange?.(task.id, "low")}>
+                <div className={`h-2 w-2 rounded-full ${priorityColors.low} mr-2`} />
+                Low
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => onPriorityChange?.(task.id, "medium")}>
+                <div className={`h-2 w-2 rounded-full ${priorityColors.medium} mr-2`} />
+                Medium
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => onPriorityChange?.(task.id, "high")}>
+                <div className={`h-2 w-2 rounded-full ${priorityColors.high} mr-2`} />
+                High
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <div className="text-xs text-muted-foreground ml-auto">
+            {new Date(task.createdAt).toLocaleDateString()}
+          </div>
+        </div>
+
+        {/* Action Bar - Reveals on Group Hover or if Controls Active? No, always visible for usability */}
+        <div className="flex items-center justify-end gap-1 pt-2 border-t mt-2">
+             {showControls && onControl && (
+            <div className="flex gap-1">
+              {(task.status === "in-progress" || task.status === "processing" || task.status === "running") && (
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => onControl(task.id, "pause")}
+                  disabled={isControlling}
+                  className="h-8 w-8 p-0 hover:bg-blue-50 hover:text-blue-600"
+                  title="Pause"
+                >
+                  <Pause className="h-4 w-4" />
+                </Button>
+              )}
+
+              {task.status === "paused" && (
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => onControl(task.id, "resume")}
+                  disabled={isControlling}
+                  className="h-8 w-8 p-0 hover:bg-green-50 hover:text-green-600"
+                  title="Resume"
+                >
+                  <Play className="h-4 w-4" />
+                </Button>
+              )}
+
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={() => onControl(task.id, "stop")}
+                disabled={isControlling}
+                className="h-8 w-8 p-0 hover:bg-red-50 hover:text-red-600"
+                title="Stop"
+              >
+                <StopCircle className="h-4 w-4" />
+              </Button>
+            </div>
+            )}
+            
+            <Button
+                size="sm"
+                variant="ghost"
+                onClick={() => onDelete?.(task.id, task.type || "scraping")}
+                className="h-8 w-8 p-0 text-muted-foreground hover:bg-red-50 hover:text-red-600 ml-1"
+                title="Delete"
+              >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function SortableTaskCard(props: TaskCardProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: props.task.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    zIndex: isDragging ? 50 : "auto",
+    position: "relative" as const,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners} className="touch-none">
+      <TaskCard {...props} />
+    </div>
+  );
+}

components/dashboard/tasks/task-column.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { SortableTaskCard } from "./task-card";
+import { Task } from "@/types";
+
+interface TaskColumnProps {
+  id: string;
+  title: string;
+  icon: React.ReactNode;
+  tasks: Task[];
+  count: number;
+  onControl?: (jobId: string, action: "pause" | "resume" | "stop") => void;
+  onPriorityChange?: (taskId: string, priority: "low" | "medium" | "high") => void;
+  onDelete?: (taskId: string, type: "scraping" | "workflow") => void;
+  controllingTaskId?: string | null;
+  contentClassName?: string;
+}
+
+export function TaskColumn({
+  id,
+  title,
+  icon,
+  tasks,
+  count,
+  onControl,
+  onPriorityChange,
+  onDelete,
+  controllingTaskId,
+  contentClassName,
+}: TaskColumnProps) {
+  const { setNodeRef } = useSortable({ id });
+
+  return (
+    <div
+      ref={setNodeRef}
+      className="space-y-4 bg-muted/40 p-4 rounded-xl min-h-[500px] border border-border/50 shadow-sm"
+    >
+      <div className="flex items-center justify-between mb-2">
+        <h3 className="font-semibold text-lg flex items-center gap-2 text-foreground/90">
+          <span className="bg-background p-2 rounded-md shadow-sm text-primary">
+            {icon}
+          </span>
+          {title}
+        </h3>
+        <span className="bg-primary/10 text-primary text-xs font-bold px-2.5 py-1 rounded-full">
+          {count}
+        </span>
+      </div>
+
+      <SortableContext
+        items={tasks.map((t) => t.id)}
+        strategy={verticalListSortingStrategy}
+      >
+        <div className={`space-y-3 min-h-[100px] ${contentClassName || ""}`}>
+          {tasks.map((task: Task) => (
+            <SortableTaskCard
+              key={task.id}
+              task={task}
+              onControl={onControl}
+              onPriorityChange={onPriorityChange}
+              onDelete={onDelete}
+              controllingTaskId={controllingTaskId}
+            />
+          ))}
+          {tasks.length === 0 && (
+            <div className="flex flex-col items-center justify-center py-12 text-muted-foreground bg-background/50 rounded-lg border border-dashed border-border/60">
+              <p className="text-sm font-medium">No tasks</p>
+              <p className="text-xs opacity-70">Drag items here</p>
+            </div>
+          )}
+        </div>
+      </SortableContext>
+    </div>
+  );
+}

components/demo-notifications.tsx

@@ -15,6 +15,8 @@ export function DemoNotifications() {
         message: "Your dashboard is ready. Start by creating your first campaign.",
         autoClose: true,
         duration: 6000,
+        link: "/dashboard/tasks",
+        actionLabel: "Get Started"
       });
     }, 2000);
 

components/info-banner.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface InfoBannerProps {
+    message: string;
+    id: string;
+}
+
+export function InfoBanner({ message, id }: InfoBannerProps) {
+    const [isVisible, setIsVisible] = useState(false); // Default hidden to avoid flash
+    const [shouldRender, setShouldRender] = useState(false);
+
+    useEffect(() => {
+        // Delay check slightly to allow mount and avoid synchronous update warning
+        // This also ensures we are safely on the client
+        const timer = setTimeout(() => {
+            const dismissed = localStorage.getItem(`banner-dismissed-${id}`);
+            if (!dismissed) {
+                setIsVisible(true);
+            }
+            setShouldRender(true);
+        }, 0);
+        return () => clearTimeout(timer);
+    }, [id]);
+
+    const handleDismiss = () => {
+        setIsVisible(false);
+        localStorage.setItem(`banner-dismissed-${id}`, "true");
+    };
+
+    if (!shouldRender || !isVisible) return null;
+
+    return (
+        <div className="bg-primary/10 text-primary px-4 py-2 relative flex items-center overflow-hidden border-b border-primary/20">
+            <div className="flex-1 overflow-hidden whitespace-nowrap">
+                <div className="animate-marquee inline-block whitespace-nowrap">
+                    <span className="mr-8 font-medium">{message}</span>
+                    <span className="mr-8 font-medium">{message}</span>
+                    <span className="mr-8 font-medium">{message}</span>
+                    <span className="mr-8 font-medium">{message}</span>
+                </div>
+            </div>
+            <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6 ml-2 hover:bg-primary/20 absolute right-2 z-10"
+                onClick={handleDismiss}
+            >
+                <X className="h-4 w-4" />
+            </Button>
+        </div>
+    );
+}

components/notification-bell.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Bell } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
@@ -9,75 +9,34 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
+import { useNotificationStore } from "@/store/notifications";
+
 
-interface Notification {
-  id: string;
-  title: string;
-  message: string;
-  type: "info" | "success" | "warning" | "error";
-  timestamp: Date;
-  read: boolean;
-}
 
 export function NotificationBell() {
-  const [notifications, setNotifications] = useState<Notification[]>([]);
-  const [showBadge, setShowBadge] = useState(false);
+  const {
+    notifications,
+    unreadCount,
+    markAsRead,
+    markAllAsRead,
+    clearAll
+  } = useNotificationStore();
+
   const [animate, setAnimate] = useState(false);
+  const prevCount = useRef(unreadCount);
 
   useEffect(() => {
-    // Load notifications from localStorage
-    const saved = localStorage.getItem("autoloop-notifications");
-    if (saved) {
-      const parsed = JSON.parse(saved);
-      setNotifications(parsed.map((n: Notification) => ({
-        ...n,
-        timestamp: new Date(n.timestamp)
-      })));
+    // Only animate if unread count INCREASED
+    if (unreadCount > prevCount.current) {
+      // Defer animation trigger to avoid synchronous state update warning
+      const timer = setTimeout(() => {
+        setAnimate(true);
+        setTimeout(() => setAnimate(false), 1000);
+      }, 0);
+      return () => clearTimeout(timer);
     }
-
-    // Listen for new notifications
-    const handleNewNotification = (event: CustomEvent<Notification>) => {
-      const newNotification = event.detail;
-      setNotifications(prev => [newNotification, ...prev]);
-      
-      // Trigger badge animation
-      setShowBadge(true);
-      setAnimate(true);
-      setTimeout(() => setAnimate(false), 1000);
-
-      // Save to localStorage
-      const updated = [newNotification, ...notifications];
-      localStorage.setItem("autoloop-notifications", JSON.stringify(updated.slice(0, 50)));
-    };
-
-    window.addEventListener('new-notification' as any, handleNewNotification as any);
-    return () => {
-      window.removeEventListener('new-notification' as any, handleNewNotification as any);
-    };
-  }, [notifications]);
-
-  const unreadCount = notifications.filter(n => !n.read).length;
-
-  const markAsRead = (id: string) => {
-    const updated = notifications.map(n => 
-      n.id === id ? { ...n, read: true } : n
-    );
-    setNotifications(updated);
-    localStorage.setItem("autoloop-notifications", JSON.stringify(updated));
-  };
-
-  const markAllAsRead = () => {
-    const updated = notifications.map(n => ({ ...n, read: true }));
-    setNotifications(updated);
-    localStorage.setItem("autoloop-notifications", JSON.stringify(updated));
-    setShowBadge(false);
-  };
-
-  const clearAll = () => {
-    setNotifications([]);
-    localStorage.removeItem("autoloop-notifications");
-    setShowBadge(false);
-  };
+    prevCount.current = unreadCount;
+  }, [unreadCount]);
 
   return (
     <Popover>
@@ -132,15 +91,18 @@ export function NotificationBell() {
               <p className="text-sm">No notifications yet</p>
             </div>
           ) : (
-            <div className="divide-y">
+              <div className="divide-y relative">
               {notifications.map((notification) => (
                 <div
                   key={notification.id}
                   className={cn(
-                    "p-4 hover:bg-accent cursor-pointer transition-colors",
+                    "p-4 hover:bg-accent cursor-pointer transition-colors relative",
                     !notification.read && "bg-blue-50 dark:bg-blue-950/20"
                   )}
-                  onClick={() => markAsRead(notification.id)}
+                  onClick={() => {
+                    markAsRead(notification.id);
+                    if (notification.link) window.location.href = notification.link;
+                  }}
                 >
                   <div className="flex items-start gap-3">
                     <div className={cn(
@@ -183,14 +145,14 @@ function formatTimestamp(date: Date): string {
 }
 
 // Helper function to trigger notifications from anywhere in the app
-export function sendNotification(notification: Omit<Notification, "id" | "timestamp" | "read">) {
-  const event = new CustomEvent('new-notification', {
-    detail: {
-      ...notification,
-      id: Date.now().toString(),
-      timestamp: new Date(),
-      read: false,
-    }
-  });
-  window.dispatchEvent(event);
+export function sendNotification(notification: {
+  title: string;
+  message: string;
+  type: "info" | "success" | "warning" | "error";
+  autoClose?: boolean;
+  duration?: number;
+  link?: string;
+  actionLabel?: string;
+}) {
+  useNotificationStore.getState().addNotification(notification);
 }

components/ui/alert-dialog.tsx

@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

components/ui/button.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
@@ -37,9 +38,10 @@ export interface ButtonProps
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
     return (
-      <button
+      <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}

components/ui/sheet.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

components/ui/sonner.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "@/components/theme-provider"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

db/schema/index.ts

@@ -103,3 +103,21 @@ export const feedback = pgTable("feedback", {
   status: varchar("status", { length: 20 }).default("new").notNull(), 
   createdAt: timestamp("created_at").defaultNow().notNull(),
 });
+
+export const notifications = pgTable("notifications", {
+  id: text("id").primaryKey().$defaultFn(() => nanoid()),
+  userId: text("user_id").references(() => users.id, { onDelete: "cascade" }),
+  title: text("title").notNull(),
+  message: text("message").notNull(),
+  type: varchar("type", { length: 20 }).default("info").notNull(),
+  read: boolean("read").default(false).notNull(),
+  createdAt: timestamp("created_at").defaultNow().notNull(),
+});
+
+export const banners = pgTable("banners", {
+  id: text("id").primaryKey().$defaultFn(() => nanoid()),
+  message: text("message").notNull(),
+  isActive: boolean("is_active").default(true).notNull(),
+  createdAt: timestamp("created_at").defaultNow().notNull(),
+  createdBy: text("created_by").references(() => users.id),
+});

lib/scraper-real.ts

@@ -1,4 +1,4 @@
-import puppeteer from "puppeteer";
+import puppeteer, { ElementHandle } from "puppeteer";
 import { Business } from "@/types";
 import { db } from "@/db";
 import { businesses, scrapingJobs } from "@/db/schema";
@@ -85,9 +85,11 @@ export async function scrapeGoogleMapsReal(
           // Try to find email and website by clicking on the business
           try {
             const businessName = business.name;
-            const businessLink = await page.$(
-              `a:has-text("${businessName}")`
-            );
+            const handle = await page.evaluateHandle((name) => {
+              const links = Array.from(document.querySelectorAll("a"));
+              return links.find((el) => el.textContent?.includes(name)) || null;
+            }, businessName);
+            const businessLink = handle.asElement() as ElementHandle<Element> | null;
             
             if (businessLink) {
               await businessLink.click();
@@ -95,12 +97,15 @@ export async function scrapeGoogleMapsReal(
 
               // Extract additional details
               const details = await page.evaluate(() => {
-                const websiteEl = document.querySelector(
-                  'a[data-item-id="authority"]'
-                );
-                const phoneEl = document.querySelector(
-                  'button[data-item-id^="phone"]'
-                );
+                const websiteEl =
+                  document.querySelector('a[data-item-id="authority"]') ||
+                  document.querySelector('a[data-tooltip="Open website"]') ||
+                  document.querySelector('a[aria-label*="Website"]');
+
+                const phoneEl =
+                  document.querySelector('button[data-item-id^="phone"]') ||
+                  document.querySelector('button[data-tooltip="Copy phone number"]') ||
+                  document.querySelector('button[aria-label*="Phone"]');
 
                 return {
                   website: websiteEl?.getAttribute("href") || null,

lib/scrapers/facebook.ts

@@ -0,0 +1,78 @@
+import puppeteer from "puppeteer";
+import type { ScrapingOptions, BusinessData, ScraperSource } from "./types";
+
+export const facebookScraper: ScraperSource = {
+    name: "facebook",
+    displayName: "Facebook",
+    enabled: true,
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async scrape(options: ScrapingOptions, _userId: string): Promise<BusinessData[]> {
+        const { keywords, location, limit = 20 } = options;
+        const businesses: BusinessData[] = [];
+
+        console.log(`🔍 Facebook Scraper: Searching for "${keywords.join(", ")}" in ${location}`);
+
+        try {
+            const browser = await puppeteer.launch({
+                headless: true,
+                args: ["--no-sandbox", "--disable-setuid-sandbox"],
+            });
+
+            const page = await browser.newPage();
+            await page.setUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36");
+
+            for (const keyword of keywords) {
+                if (businesses.length >= limit) break;
+
+                const query = `site:facebook.com ${keyword} ${location}`;
+                const searchUrl = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
+
+                await page.goto(searchUrl, { waitUntil: "networkidle2" });
+
+                const results = await page.evaluate(() => {
+                    const items: BusinessData[] = [];
+                    const searchResults = document.querySelectorAll(".g, .tF2Cxc");
+
+                    searchResults.forEach((result) => {
+                        try {
+                            const titleEl = result.querySelector("h3");
+                            const linkEl = result.querySelector("a");
+                            const snippetEl = result.querySelector(".VwiC3b, .aCOpRe");
+
+                            if (!titleEl || !linkEl) return;
+
+                            let name = titleEl.textContent?.trim() || "";
+                            name = name.replace(/ \| Facebook$/, "").replace(/ - Home \| Facebook$/, "");
+
+                            const website = linkEl.getAttribute("href") || "";
+                            const description = snippetEl?.textContent?.trim() || "";
+
+                            if (name && website.includes("facebook.com")) {
+                                items.push({
+                                    name,
+                                    website,
+                                    description: description.substring(0, 200),
+                                    source: "facebook",
+                                    sourceUrl: website,
+                                    address: "Facebook Page",
+                                    category: "Social Page"
+                                });
+                            }
+                        } catch { }
+                    });
+                    return items;
+                });
+
+                businesses.push(...results);
+                await new Promise((resolve) => setTimeout(resolve, 1000 + Math.random() * 2000));
+            }
+
+            await browser.close();
+            return businesses.slice(0, limit);
+        } catch (error) {
+            console.error("❌ Facebook scraper failed:", error);
+            return businesses;
+        }
+    },
+};

lib/scrapers/index.ts

@@ -6,14 +6,17 @@ import { googleSearchScraper } from "./google-search";
  * Scraper Manager - orchestrates multiple scraping sources
  */
 
+import { linkedinScraper } from "./linkedin";
+import { facebookScraper } from "./facebook";
+import { instagramScraper } from "./instagram";
+
 // Registry of all available scrapers
 const scrapers = {
     "google-maps": googleMapsScraper,
     "google-search": googleSearchScraper,
-    // Future scrapers:
-    // "linkedin": linkedinScraper,
-    // "facebook": facebookScraper,
-    // "instagram": instagramScraper,
+    "linkedin": linkedinScraper,
+    "facebook": facebookScraper,
+    "instagram": instagramScraper,
 };
 
 export interface MultiSourceScrapingOptions extends ScrapingOptions {

lib/scrapers/instagram.ts

@@ -0,0 +1,83 @@
+import puppeteer from "puppeteer";
+import type { ScrapingOptions, BusinessData, ScraperSource } from "./types";
+
+export const instagramScraper: ScraperSource = {
+    name: "instagram",
+    displayName: "Instagram",
+    enabled: true,
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async scrape(options: ScrapingOptions, _userId: string): Promise<BusinessData[]> {
+        const { keywords, location, limit = 20 } = options;
+        const businesses: BusinessData[] = [];
+
+        console.log(`🔍 Instagram Scraper: Searching for "${keywords.join(", ")}" in ${location}`);
+
+        try {
+            const browser = await puppeteer.launch({
+                headless: true,
+                args: ["--no-sandbox", "--disable-setuid-sandbox"],
+            });
+
+            const page = await browser.newPage();
+            await page.setUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36");
+
+            for (const keyword of keywords) {
+                if (businesses.length >= limit) break;
+
+                const query = `site:instagram.com ${keyword} ${location}`;
+                const searchUrl = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
+
+                await page.goto(searchUrl, { waitUntil: "networkidle2" });
+
+                const results = await page.evaluate(() => {
+                    const items: BusinessData[] = [];
+                    const searchResults = document.querySelectorAll(".g, .tF2Cxc");
+
+                    searchResults.forEach((result) => {
+                        try {
+                            const titleEl = result.querySelector("h3");
+                            const linkEl = result.querySelector("a");
+                            const snippetEl = result.querySelector(".VwiC3b, .aCOpRe");
+
+                            if (!titleEl || !linkEl) return;
+
+                            let name = titleEl.textContent?.trim() || "";
+                            name = name.replace(/ • Instagram photos and videos$/, "").replace(/ \| Instagram$/, "");
+                            // Often Instagram titles are "Name (@username) ..."
+                            const handleMatch = name.match(/\(@([^)]+)\)/);
+                            if (handleMatch) {
+                                name = handleMatch[1]; // Use handle as name if found
+                            }
+
+                            const website = linkEl.getAttribute("href") || "";
+                            const description = snippetEl?.textContent?.trim() || "";
+
+                            if (name && website.includes("instagram.com")) {
+                                items.push({
+                                    name,
+                                    website,
+                                    description: description.substring(0, 200),
+                                    source: "instagram",
+                                    sourceUrl: website,
+                                    address: "Instagram Profile",
+                                    category: "Social Profile"
+                                });
+                            }
+                        } catch { }
+                    });
+                    return items;
+                });
+
+                businesses.push(...results);
+                await new Promise((resolve) => setTimeout(resolve, 1000 + Math.random() * 2000));
+            }
+
+            await browser.close();
+            return businesses.slice(0, limit);
+        } catch (error) {
+            console.error("❌ Instagram scraper failed:", error);
+            return businesses;
+        }
+    },
+};

lib/scrapers/linkedin.ts

@@ -0,0 +1,91 @@
+import puppeteer from "puppeteer";
+import type { ScrapingOptions, BusinessData, ScraperSource } from "./types";
+
+/**
+ * LinkedIn Scraper (via Google) - extracts company profiles from Google search results
+ */
+export const linkedinScraper: ScraperSource = {
+    name: "linkedin",
+    displayName: "LinkedIn",
+    enabled: true,
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async scrape(options: ScrapingOptions, _userId: string): Promise<BusinessData[]> {
+        const { keywords, location, limit = 20 } = options;
+        const businesses: BusinessData[] = [];
+
+        console.log(`🔍 LinkedIn Scraper: Searching for "${keywords.join(", ")}" in ${location}`);
+
+        try {
+            const browser = await puppeteer.launch({
+                headless: true,
+                args: ["--no-sandbox", "--disable-setuid-sandbox"],
+            });
+
+            const page = await browser.newPage();
+            await page.setUserAgent(
+                "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36"
+            );
+
+            for (const keyword of keywords) {
+                if (businesses.length >= limit) break;
+
+                // Targeted search for LinkedIn Company pages
+                const query = `site:linkedin.com/company ${keyword} ${location}`;
+                const searchUrl = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
+
+                console.log(`  Searching: ${query}`);
+                await page.goto(searchUrl, { waitUntil: "networkidle2" });
+
+                const results = await page.evaluate(() => {
+                    const items: BusinessData[] = [];
+                    const searchResults = document.querySelectorAll(".g, .tF2Cxc");
+
+                    searchResults.forEach((result) => {
+                        try {
+                            const titleEl = result.querySelector("h3");
+                            const linkEl = result.querySelector("a");
+                            const snippetEl = result.querySelector(".VwiC3b, .aCOpRe");
+
+                            if (!titleEl || !linkEl) return;
+
+                            let name = titleEl.textContent?.trim() || "";
+                            // Clean up LinkedIn title suffix
+                            name = name.replace(/ \| LinkedIn$/, "").replace(/ - LinkedIn$/, "").replace(/: LinkedIn$/, "");
+
+                            const website = linkEl.getAttribute("href") || "";
+                            const description = snippetEl?.textContent?.trim() || "";
+
+                            // Validation: Only accept actual LinkedIn Company URLs
+                            if (name && website.includes("linkedin.com/company")) {
+                                items.push({
+                                    name,
+                                    website,
+                                    description: description.substring(0, 200),
+                                    source: "linkedin",
+                                    sourceUrl: website,
+                                    address: "LinkedIn Profile", // Placeholder
+                                    category: "Company Profile"
+                                });
+                            }
+                        } catch {
+                            // Ignore errors
+                        }
+                    });
+                    return items;
+                });
+
+                businesses.push(...results);
+
+                // Rate limit delay
+                await new Promise((resolve) => setTimeout(resolve, 1000 + Math.random() * 2000));
+            }
+
+            await browser.close();
+            return businesses.slice(0, limit);
+        } catch (error) {
+            console.error("❌ LinkedIn scraper failed:", error);
+            return businesses;
+        }
+    },
+};

package.json

@@ -27,12 +27,14 @@
     "@hookform/resolvers": "^3.9.1",
     "@neondatabase/serverless": "^0.10.3",
     "@paralleldrive/cuid2": "^3.0.6",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@sendgrid/mail": "^8.1.6",
@@ -53,6 +55,7 @@
     "nanoid": "^5.0.9",
     "next": "16.1.3",
     "next-auth": "^5.0.0-beta.25",
+    "next-themes": "^0.4.6",
     "nodemailer": "^7.0.12",
     "puppeteer": "^24.35.0",
     "react": "19.2.3",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       '@paralleldrive/cuid2':
         specifier: ^3.0.6
         version: 3.0.6
+      '@radix-ui/react-alert-dialog':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-avatar':
         specifier: ^1.1.11
         version: 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -47,6 +50,9 @@ importers:
       '@radix-ui/react-select':
         specifier: ^2.2.6
         version: 2.2.6(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot':
+        specifier: ^1.2.4
+        version: 1.2.4(@types/react@19.2.8)(react@19.2.3)
       '@radix-ui/react-switch':
         specifier: ^1.2.6
         version: 1.2.6(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -107,6 +113,9 @@ importers:
       next-auth:
         specifier: ^5.0.0-beta.25
         version: 5.0.0-beta.30(next@16.1.3(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(nodemailer@7.0.12)(react@19.2.3)
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       nodemailer:
         specifier: ^7.0.12
         version: 7.0.12
@@ -1105,6 +1114,19 @@ packages:
   '@radix-ui/primitive@1.1.3':
     resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
 
+  '@radix-ui/react-alert-dialog@1.1.15':
+    resolution: {integrity: sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-arrow@1.1.7':
     resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
     peerDependencies:
@@ -3455,6 +3477,12 @@ packages:
       nodemailer:
         optional: true
 
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
   next@16.1.3:
     resolution: {integrity: sha512-gthG3TRD+E3/mA0uDQb9lqBmx1zVosq5kIwxNN6+MRNd085GzD+9VXMPUs+GGZCbZ+GDZdODUq4Pm7CTXK6ipw==}
     engines: {node: '>=20.9.0'}
@@ -4986,6 +5014,20 @@ snapshots:
 
   '@radix-ui/primitive@1.1.3': {}
 
+  '@radix-ui/react-alert-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
+
   '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -7561,6 +7603,11 @@ snapshots:
     optionalDependencies:
       nodemailer: 7.0.12
 
+  next-themes@0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
   next@16.1.3(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       '@next/env': 16.1.3

store/notifications.ts

@@ -1,4 +1,5 @@
 import { create } from 'zustand';
+import { ExternalToast, toast } from "sonner";
 
 export type NotificationType = 'success' | 'error' | 'warning' | 'info';
 
@@ -11,6 +12,8 @@ export interface Notification {
   read: boolean;
   autoClose?: boolean;
   duration?: number;
+  link?: string;
+  actionLabel?: string;
 }
 
 interface NotificationStore {
@@ -42,14 +45,24 @@ export const useNotificationStore = create<NotificationStore>((set) => ({
       unreadCount: state.unreadCount + 1,
     }));
 
-    // Auto-remove after duration if autoClose is true
-    if (newNotification.autoClose && newNotification.duration) {
-      setTimeout(() => {
-        set((state) => ({
-          notifications: state.notifications.filter((n) => n.id !== newNotification.id),
-        }));
-      }, newNotification.duration);
+    // Trigger Sonner toast
+    // Map internal types to Sonner equivalent if needed
+    const { type, title, message, link, actionLabel } = notification;
+    const toastOptions: ExternalToast = { description: message };
+
+    // Add action if link is provided
+    if (link) {
+      toastOptions.action = {
+        label: actionLabel || "View",
+        onClick: () => window.location.href = link
+      };
     }
+
+    if (type === 'success') toast.success(title, toastOptions);
+    else if (type === 'error') toast.error(title, toastOptions);
+    else if (type === 'warning') toast.warning(title, toastOptions);
+    else if (type === 'info') toast.info(title, toastOptions);
+    else toast(title, toastOptions);
   },
 
   removeNotification: (id) =>