add social connect option

app/api/ai/generate-content/route.ts

@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from "next/server";
+import { generateAIContent } from "@/lib/gemini";
+
+export async function POST(req: NextRequest) {
+  try {
+    const { prompt, type, context } = await req.json();
+
+    let finalPrompt = "";
+    if (type === "caption") {
+      finalPrompt = `Write ONE verified, engaging social media caption for a post about: "${prompt}". 
+        Context: ${context || "None"}. 
+        Include relevant hashtags. Keep it under 280 characters. Do not provide multiple options.`;
+    } else if (type === "tags") {
+      finalPrompt = `Generate 15 relevant, high-traffic, trending hashtags for a social media post about: "${prompt}". 
+      Context: ${context || "None"}.
+      Return ONLY a comma-separated list of tags without the '#' symbol. Example: technology, coding, developer. Do not include numbered lists or extra text.`;
+    } else {
+      finalPrompt = `Generate content for a social media post about: "${prompt}". Context: ${context}.`;
+    }
+
+    const text = await generateAIContent(finalPrompt);
+
+    return NextResponse.json({ content: text });
+  } catch (error) {
+    console.error("AI Generation Error:", error);
+    return NextResponse.json({ error: "Failed to generate content" }, { status: 500 });
+  }
+}

app/api/settings/route.ts

@@ -2,7 +2,7 @@ import { NextResponse } from "next/server";
 import { auth } from "@/lib/auth";
 import { getEffectiveUserId } from "@/lib/auth-utils";
 import { db } from "@/db";
-import { users } from "@/db/schema";
+import { users, connectedAccounts } from "@/db/schema";
 import { eq } from "drizzle-orm";
 
 interface UpdateUserData {
@@ -48,6 +48,11 @@ export async function GET() {
       return NextResponse.json({ error: "User not found" }, { status: 404 });
     }
 
+    // Fetch connected accounts
+    const accounts = await db.query.connectedAccounts.findMany({
+      where: eq(connectedAccounts.userId, userId),
+    });
+
     // Mask sensitive keys for display
     const maskedGeminiKey = user.geminiApiKey
       ? `••••••••${user.geminiApiKey.slice(-4)}`
@@ -69,6 +74,7 @@ export async function GET() {
         website: user.website,
         customVariables: user.customVariables,
       },
+      connectedAccounts: accounts,
     });
   } catch (error) {
     console.error("Error fetching user settings:", error);

app/api/social/analytics/route.ts

@@ -0,0 +1,142 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/auth";
+import { db } from "@/db";
+import { connectedAccounts } from "@/db/schema";
+import { getEffectiveUserId } from "@/lib/auth-utils";
+import { eq } from "drizzle-orm";
+import { google } from "googleapis";
+
+export async function GET() {
+    const session = await auth();
+    if (!session?.user?.id) {
+        return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+    const userId = await getEffectiveUserId(session.user.id);
+
+    try {
+        const accounts = await db.query.connectedAccounts.findMany({
+            where: eq(connectedAccounts.userId, userId)
+        });
+
+        const analyticsPromises = accounts.map(async (account) => {
+            const stats = {
+                platform: account.provider,
+                followers: 0,
+                reach: 0,
+                engagement: 0,
+                name: account.name,
+                picture: account.picture
+            };
+
+            try {
+                if (account.provider === "facebook") {
+                    // Fetch Page Insights: followers_count, fan_count
+                    // Note: 'followers_count' is for User, 'fan_count' for Page
+                    const url = `https://graph.facebook.com/v21.0/${account.providerAccountId}?fields=fan_count,followers_count&access_token=${account.accessToken}`;
+                    const res = await fetch(url);
+                    const data = await res.json();
+
+                    if (data.fan_count !== undefined) stats.followers = data.fan_count;
+                    if (data.followers_count !== undefined) stats.followers = Math.max(stats.followers, data.followers_count);
+
+                    // Mock Reach/Engagement for now as it requires complex insights queries with date ranges
+                    // In a real app we'd query /insights/page_impressions_unique
+                }
+                else if (account.provider === "youtube") {
+                    const oauth2Client = new google.auth.OAuth2(
+                        process.env.GOOGLE_CLIENT_ID,
+                        process.env.GOOGLE_CLIENT_SECRET
+                    );
+
+                    oauth2Client.setCredentials({
+                        access_token: account.accessToken,
+                        refresh_token: account.refreshToken,
+                        expiry_date: account.expiresAt ? new Date(account.expiresAt).getTime() : undefined
+                    });
+
+                    // Auto-refresh handler
+                    oauth2Client.on('tokens', async (tokens) => {
+                        if (tokens.access_token) {
+                            await db.update(connectedAccounts).set({
+                                accessToken: tokens.access_token,
+                                refreshToken: tokens.refresh_token || account.refreshToken, // Keep old refresh token if new one not provided
+                                expiresAt: tokens.expiry_date ? new Date(tokens.expiry_date) : undefined,
+                                updatedAt: new Date()
+                            }).where(eq(connectedAccounts.id, account.id));
+                        }
+                    });
+
+                    const youtube = google.youtube({ version: 'v3', auth: oauth2Client });
+
+                    try {
+                        const res = await youtube.channels.list({
+                            part: ['statistics'],
+                            mine: true
+                        });
+
+                        if (res.data.items && res.data.items.length > 0) {
+                            const st = res.data.items[0].statistics;
+                            stats.followers = parseInt(st?.subscriberCount || "0");
+                            stats.reach = parseInt(st?.viewCount || "0");
+                            stats.engagement = parseInt(st?.videoCount || "0");
+                        }
+                    } catch (apiError: unknown) {
+                        // Attempt explicit refresh if 401
+                        // Need to cast to any or a specific error interface to access 'code'
+                        // Google API errors usually have 'code' or 'response.status'
+                        const fetchError = apiError as { code?: number; response?: { status?: number } };
+                        if (fetchError.code === 401 || fetchError.response?.status === 401) {
+                            console.log("YouTube Token expired, attempting refresh...");
+                            try {
+                                const { credentials } = await oauth2Client.refreshAccessToken();
+                                oauth2Client.setCredentials(credentials);
+
+                                // Retry request
+                                const res = await youtube.channels.list({
+                                    part: ['statistics'],
+                                    mine: true
+                                });
+
+                                if (res.data.items && res.data.items.length > 0) {
+                                    const st = res.data.items[0].statistics;
+                                    stats.followers = parseInt(st?.subscriberCount || "0");
+                                    stats.reach = parseInt(st?.viewCount || "0");
+                                    stats.engagement = parseInt(st?.videoCount || "0");
+                                }
+                            } catch (refreshError: unknown) {
+                                console.error("Failed to refresh YouTube token:", refreshError);
+                                // Optional: access token invalid, maybe disconnect?
+                            }
+                        } else {
+                            throw apiError;
+                        }
+                    }
+                }
+                else if (account.provider === "linkedin") {
+                    // LinkedIn Profile API - v2/me or organizationalEntityAcls
+                    // Getting follower count is restricted for personal profiles in v2 API without specific partner programs.
+                    // We will skip deep stats for personal profiles and just set 0 or mock.
+                }
+            } catch (e: unknown) {
+                console.error(`Failed to fetch stats for ${account.provider}`, e);
+            }
+
+            return stats;
+        });
+
+        const results = await Promise.all(analyticsPromises);
+
+        // Aggregate
+        const aggregated = {
+            totalFollowers: results.reduce((acc, curr) => acc + curr.followers, 0),
+            totalReach: results.reduce((acc, curr) => acc + curr.reach, 0),
+            platforms: results
+        };
+
+        return NextResponse.json(aggregated);
+
+    } catch (error: unknown) {
+        console.error("Analytics Error:", error);
+        return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
+    }
+}

app/api/social/callback/[provider]/route.ts

@@ -112,7 +112,144 @@ export async function GET(
                 });
             }
 
-            return NextResponse.redirect(new URL("/dashboard/social?success=connected", effectiveBaseUrl));
+            return NextResponse.redirect(new URL("/dashboard/settings?success=connected", effectiveBaseUrl));
+        }
+
+        if (provider === "linkedin") {
+            const clientId = process.env.LINKEDIN_CLIENT_ID;
+            const clientSecret = process.env.LINKEDIN_CLIENT_SECRET;
+            const redirectUri = `${effectiveBaseUrl}/api/social/callback/linkedin`;
+
+            const tokenUrl = "https://www.linkedin.com/oauth/v2/accessToken";
+            const params = new URLSearchParams();
+            params.append("grant_type", "authorization_code");
+            params.append("code", code);
+            params.append("redirect_uri", redirectUri);
+            params.append("client_id", clientId!);
+            params.append("client_secret", clientSecret!);
+
+            const tokenRes = await fetch(tokenUrl, {
+                method: "POST",
+                headers: { "Content-Type": "application/x-www-form-urlencoded" },
+                body: params
+            });
+            const tokenData = await tokenRes.json();
+
+            if (tokenData.error) {
+                throw new Error(tokenData.error_description || "LinkedIn Auth Failed");
+            }
+
+            const accessToken = tokenData.access_token;
+            const expiresSeconds = tokenData.expires_in;
+            const expiresAt = new Date(Date.now() + expiresSeconds * 1000);
+
+            // Fetch Profile (OpenID)
+            const meUrl = "https://api.linkedin.com/v2/userinfo";
+            const meRes = await fetch(meUrl, {
+                headers: { Authorization: `Bearer ${accessToken}` }
+            });
+            const meData = await meRes.json();
+            // meData: { sub: "id", name: "...", picture: "...", email: "..." }
+
+            // Save to DB
+            const existingAccount = await db.query.connectedAccounts.findFirst({
+                where: and(
+                    eq(connectedAccounts.userId, userId),
+                    eq(connectedAccounts.provider, "linkedin")
+                )
+            });
+
+            if (existingAccount) {
+                await db.update(connectedAccounts).set({
+                    accessToken: accessToken,
+                    expiresAt: expiresAt,
+                    updatedAt: new Date(),
+                    name: meData.name,
+                    picture: meData.picture,
+                    providerAccountId: meData.sub
+                }).where(eq(connectedAccounts.id, existingAccount.id));
+            } else {
+                await db.insert(connectedAccounts).values({
+                    userId: userId,
+                    provider: "linkedin",
+                    providerAccountId: meData.sub,
+                    accessToken: accessToken,
+                    expiresAt: expiresAt,
+                    name: meData.name,
+                    picture: meData.picture
+                });
+            }
+
+            return NextResponse.redirect(new URL("/dashboard/settings?success=connected", effectiveBaseUrl));
+        }
+
+        if (provider === "youtube") {
+            const clientId = process.env.GOOGLE_CLIENT_ID;
+            const clientSecret = process.env.GOOGLE_CLIENT_SECRET;
+            const redirectUri = `${effectiveBaseUrl}/api/social/callback/youtube`;
+
+            const tokenUrl = "https://oauth2.googleapis.com/token";
+            const params = new URLSearchParams();
+            params.append("grant_type", "authorization_code");
+            params.append("code", code);
+            params.append("redirect_uri", redirectUri);
+            params.append("client_id", clientId!);
+            params.append("client_secret", clientSecret!);
+
+            const tokenRes = await fetch(tokenUrl, {
+                method: "POST",
+                headers: { "Content-Type": "application/x-www-form-urlencoded" },
+                body: params
+            });
+            const tokenData = await tokenRes.json();
+
+            if (tokenData.error) {
+                throw new Error(tokenData.error_description || "YouTube Auth Failed");
+            }
+
+            const accessToken = tokenData.access_token;
+            // Google tokens expire in 1 hour usually
+            const expiresSeconds = tokenData.expires_in;
+            const expiresAt = new Date(Date.now() + expiresSeconds * 1000);
+
+            // Fetch Profile
+            const meUrl = "https://www.googleapis.com/oauth2/v2/userinfo";
+            const meRes = await fetch(meUrl, {
+                headers: { Authorization: `Bearer ${accessToken}` }
+            });
+            const meData = await meRes.json();
+            // meData: { id: "...", email: "...", name: "...", picture: "..." }
+
+            // Save to DB
+            const existingAccount = await db.query.connectedAccounts.findFirst({
+                where: and(
+                    eq(connectedAccounts.userId, userId),
+                    eq(connectedAccounts.provider, "youtube")
+                )
+            });
+
+            if (existingAccount) {
+                await db.update(connectedAccounts).set({
+                    accessToken: accessToken,
+                    expiresAt: expiresAt,
+                    updatedAt: new Date(),
+                    name: meData.name,
+                    picture: meData.picture,
+                    providerAccountId: meData.id
+                }).where(eq(connectedAccounts.id, existingAccount.id));
+            } else {
+                await db.insert(connectedAccounts).values({
+                    userId: userId,
+                    provider: "youtube",
+                    providerAccountId: meData.id,
+                    accessToken: accessToken,
+                    expiresAt: expiresAt,
+                    name: meData.name,
+                    picture: meData.picture
+                });
+            }
+
+            return NextResponse.redirect(new URL("/dashboard/settings?success=connected", effectiveBaseUrl));
         }
 
     } catch (err) {

app/api/social/connect/[provider]/route.ts

@@ -11,18 +11,17 @@ export async function GET(
   }
   const { provider } = await params;
 
-  if (provider === "facebook" || provider === "instagram") {
-    // Both use Facebook Login
-    // Dynamic Base URL Detection for Spaces/Docker
-    const host = req.headers.get("x-forwarded-host") || req.headers.get("host");
-    const protocol = req.headers.get("x-forwarded-proto") || "https"; // Default to https for safety in prod
-    const baseUrl = host ? `${protocol}://${host}` : process.env.NEXT_PUBLIC_APP_URL;
-
-    // Fallback if configured explicitly, otherwise dynamic
-    const effectiveBaseUrl = (process.env.NEXT_PUBLIC_APP_URL && !process.env.NEXT_PUBLIC_APP_URL.includes("0.0.0.0"))
-      ? process.env.NEXT_PUBLIC_APP_URL
+  // Dynamic Base URL Detection
+  const host = req.headers.get("x-forwarded-host") || req.headers.get("host");
+  const protocol = req.headers.get("x-forwarded-proto") || "https";
+  const baseUrl = host ? `${protocol}://${host}` : process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000";
+
+  const effectiveBaseUrl = (process.env.NEXT_PUBLIC_APP_URL && !process.env.NEXT_PUBLIC_APP_URL.includes("0.0.0.0"))
+    ? process.env.NEXT_PUBLIC_APP_URL 
       : baseUrl;
 
+  if (provider === "facebook" || provider === "instagram") {
+  // Both use Facebook Login
     const clientId = process.env.FACEBOOK_CLIENT_ID;
     const redirectUri = `${effectiveBaseUrl}/api/social/callback/facebook`;
     const state = JSON.stringify({ userId: session.user.id, provider }); // Pass provider to know intent if needed
@@ -42,5 +41,39 @@ export async function GET(
     return NextResponse.redirect(url);
   }
 
+  if (provider === "linkedin") {
+    const clientId = process.env.LINKEDIN_CLIENT_ID;
+    const redirectUri = `${effectiveBaseUrl}/api/social/callback/linkedin`;
+    const state = JSON.stringify({ userId: session.user.id, provider });
+
+    // LinkedIn Scopes (v2)
+    // w_member_social: Create posts
+    // openid, profile, email: Authentication
+    const scope = ["openid", "profile", "w_member_social", "email"].join(" "); // space separated
+
+    const url = `https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}&state=${encodeURIComponent(state)}&scope=${encodeURIComponent(scope)}`;
+
+    return NextResponse.redirect(url);
+  }
+
+  if (provider === "youtube") {
+    const clientId = process.env.GOOGLE_CLIENT_ID;
+    const redirectUri = `${effectiveBaseUrl}/api/social/callback/youtube`;
+    const state = JSON.stringify({ userId: session.user.id, provider });
+
+    // YouTube Scopes
+    const scope = [
+      "https://www.googleapis.com/auth/userinfo.email",
+      "https://www.googleapis.com/auth/userinfo.profile",
+      "https://www.googleapis.com/auth/youtube.readonly",
+      "https://www.googleapis.com/auth/youtube.upload",
+      "https://www.googleapis.com/auth/youtube" // Full access managed
+    ].join(" ");
+
+    const url = `https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}&state=${encodeURIComponent(state)}&scope=${encodeURIComponent(scope)}&access_type=offline&prompt=consent`;
+
+    return NextResponse.redirect(url);
+  }
+
   return NextResponse.json({ error: "Invalid provider" }, { status: 400 });
 }

app/api/social/posts/create/route.ts

@@ -3,7 +3,8 @@ import { auth } from "@/auth";
 import { db } from "@/db";
 import { socialPosts, connectedAccounts } from "@/db/schema";
 import { eq } from "drizzle-orm";
-import { publishToFacebook, publishToInstagram } from "@/lib/social/publisher";
+import { socialPublisher } from "@/lib/social/publisher";
+const { publishToFacebook, publishToInstagram } = socialPublisher;
 
 export async function POST(req: NextRequest) {
   const session = await auth();
@@ -37,7 +38,7 @@ export async function POST(req: NextRequest) {
         accessToken: account.accessToken,
         providerAccountId: account.providerAccountId,
         content,
-        mediaUrls
+        mediaUrl: mediaUrls && mediaUrls.length > 0 ? mediaUrls[0] : undefined
       });
     } else if (platform === "instagram") {
       // Find IG Account ID linked (for now assume providerAccountId IS the target or we query it)
@@ -47,7 +48,7 @@ export async function POST(req: NextRequest) {
         accessToken: account.accessToken,
         providerAccountId: account.providerAccountId,
         content,
-        mediaUrls
+        mediaUrl: mediaUrls && mediaUrls.length > 0 ? mediaUrls[0] : undefined
       });
     }
 

app/api/social/posts/route.ts

@@ -0,0 +1,169 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@/auth";
+import { db } from "@/db";
+import { socialPosts, connectedAccounts } from "@/db/schema";
+import { getEffectiveUserId } from "@/lib/auth-utils";
+import { eq, and } from "drizzle-orm";
+import { nanoid } from "nanoid";
+import { socialPublisher } from "@/lib/social/publisher";
+
+export async function GET() {
+    const session = await auth();
+    if (!session?.user?.id) {
+        return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+    const userId = await getEffectiveUserId(session.user.id);
+
+    const posts = await db.query.socialPosts.findMany({
+        where: eq(socialPosts.userId, userId),
+        orderBy: (posts, { desc }) => [desc(posts.createdAt)],
+        with: {
+            // We might want to join with connectedAccount to see which page it was posted to
+        }
+    });
+
+    return NextResponse.json({ posts });
+}
+
+export async function POST(req: NextRequest) {
+    const session = await auth();
+    if (!session?.user?.id) {
+        return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+    const userId = await getEffectiveUserId(session.user.id);
+    if (!userId) {
+        return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    try {
+        const body = await req.json();
+        const { content, mediaUrl, platforms, title, thumbnailUrl, tags, category, scheduledAt } = body;
+        // platforms: array of connectedAccount Ids
+
+        if (!content && !mediaUrl && !title) {
+            return NextResponse.json({ error: "Content, Title, or Media required" }, { status: 400 });
+        }
+        if (!platforms || !Array.isArray(platforms) || platforms.length === 0) {
+            return NextResponse.json({ error: "Select at least one platform" }, { status: 400 });
+        }
+
+        const results = [];
+
+        for (const accountId of platforms) {
+            // Fetch account details
+            const account = await db.query.connectedAccounts.findFirst({
+                where: eq(connectedAccounts.id, accountId)
+            });
+
+            if (!account) {
+                results.push({ accountId, status: "failed", error: "Account not found" });
+                continue;
+            }
+
+            // Create DB Entry
+            const postId = nanoid();
+            const isScheduled = !!scheduledAt;
+
+            await db.insert(socialPosts).values({
+                id: postId,
+                userId,
+                connectedAccountId: accountId,
+                content: content,
+                title: title,
+                thumbnailUrl: thumbnailUrl,
+                tags: tags,
+                category: category,
+                mediaUrls: mediaUrl ? [mediaUrl] : [],
+                scheduledAt: isScheduled ? new Date(scheduledAt) : null,
+                status: isScheduled ? "scheduled" : "publishing",
+                platform: account.provider,
+                createdAt: new Date(),
+                updatedAt: new Date()
+            });
+
+            // If scheduled, skip publishing
+            if (isScheduled) {
+                results.push({ accountId, status: "scheduled", postId });
+                continue;
+            }
+
+            // Trigger Publish
+            try {
+                let platformPostId = null;
+                const fullMediaUrl = mediaUrl ? (mediaUrl.startsWith("http") ? mediaUrl : `${process.env.NEXT_PUBLIC_APP_URL}${mediaUrl}`) : undefined;
+
+                const payload = {
+                    content,
+                    title, // Pass title
+                    mediaUrl: fullMediaUrl,
+                    accessToken: account.accessToken,
+                    providerAccountId: account.providerAccountId,
+                    refreshToken: account.refreshToken || undefined
+                };
+
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const provider = account.provider as any;
+
+                if (provider === "facebook") {
+                    platformPostId = await socialPublisher.publishToFacebook(payload);
+                } else if (provider === "instagram") {
+                    const metadata = account.metadata as Record<string, unknown> | null;
+                    if (provider === "facebook" && metadata?.type === "instagram") {
+                        platformPostId = await socialPublisher.publishToFacebook(payload);
+                    } else {
+                        platformPostId = await socialPublisher.publishToFacebook(payload);
+                    }
+                } else if (provider === "linkedin") {
+                    platformPostId = await socialPublisher.publishToLinkedin(payload);
+                } else if (provider === "youtube") {
+                    platformPostId = await socialPublisher.publishToYoutube(payload);
+                }
+
+                // Update DB Success
+                await db.update(socialPosts).set({
+                    status: "published",
+                    platformPostId: platformPostId,
+                    publishedAt: new Date()
+                }).where(eq(socialPosts.id, postId));
+
+                results.push({ accountId, status: "published", postId: platformPostId });
+
+            } catch (err: unknown) {
+                const errorMessage = err instanceof Error ? err.message : "Unknown error";
+                console.error(`Publish failed for ${account.provider}:`, err);
+                // Update DB Fail
+                await db.update(socialPosts).set({
+                    status: "failed",
+                    error: errorMessage
+                }).where(eq(socialPosts.id, postId));
+
+                results.push({ accountId, status: "failed", error: errorMessage });
+            }
+        }
+
+        return NextResponse.json({ success: true, results });
+
+    } catch (error) {
+        console.error("Create Post Error:", error);
+        return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
+    }
+}
+
+export async function DELETE(req: NextRequest) {
+    const session = await auth();
+    if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    const userId = await getEffectiveUserId(session.user.id);
+
+    const { searchParams } = new URL(req.url);
+    const id = searchParams.get("id");
+
+    if (!id) return NextResponse.json({ error: "ID required" }, { status: 400 });
+
+    try {
+        await db.delete(socialPosts).where(and(eq(socialPosts.id, id), eq(socialPosts.userId, userId)));
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        console.error("Delete Post Error:", error);
+        return NextResponse.json({ error: "Failed to delete post" }, { status: 500 });
+    }
+}

app/api/social/youtube/playlists/route.ts

@@ -0,0 +1,118 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@/auth";
+import { db } from "@/db";
+import { connectedAccounts } from "@/db/schema";
+import { getEffectiveUserId } from "@/lib/auth-utils";
+import { eq, and } from "drizzle-orm";
+import { google } from "googleapis";
+
+// Helper to get authenticated YouTube client
+async function getYouTubeClient(userId: string) {
+    const account = await db.query.connectedAccounts.findFirst({
+        where: and(
+            eq(connectedAccounts.userId, userId),
+            eq(connectedAccounts.provider, "youtube")
+        )
+    });
+
+    if (!account) {
+        throw new Error("YouTube account not connected");
+    }
+
+    const oauth2Client = new google.auth.OAuth2(
+        process.env.GOOGLE_CLIENT_ID,
+        process.env.GOOGLE_CLIENT_SECRET
+    );
+
+    oauth2Client.setCredentials({
+        access_token: account.accessToken,
+        refresh_token: account.refreshToken,
+        expiry_date: account.expiresAt ? new Date(account.expiresAt).getTime() : undefined
+    });
+
+    // Auto-refresh handler
+    oauth2Client.on('tokens', async (tokens) => {
+        if (tokens.access_token) {
+            await db.update(connectedAccounts).set({
+                accessToken: tokens.access_token,
+                refreshToken: tokens.refresh_token || account.refreshToken,
+                expiresAt: tokens.expiry_date ? new Date(tokens.expiry_date) : undefined,
+                updatedAt: new Date()
+            }).where(eq(connectedAccounts.id, account.id));
+        }
+    });
+
+    return google.youtube({ version: 'v3', auth: oauth2Client });
+}
+
+export async function GET() {
+    const session = await auth();
+    if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    const userId = await getEffectiveUserId(session.user.id);
+
+    try {
+        const youtube = await getYouTubeClient(userId);
+
+        // Handle 401/Refresh logic wrapper could be extracted, but for now relying on library + simple retry if needed
+        // The library handles auto-refresh if refresh_token is set (which we do).
+
+        const response = await youtube.playlists.list({
+            part: ['snippet', 'contentDetails'],
+            mine: true,
+            maxResults: 50
+        });
+
+        const playlists = response.data.items?.map(item => ({
+            id: item.id,
+            title: item.snippet?.title,
+            thumbnail: item.snippet?.thumbnails?.default?.url
+        })) || [];
+
+        return NextResponse.json({ playlists });
+
+    } catch (error: unknown) {
+        console.error("Fetch Playlists Error:", error);
+        const errorMessage = error instanceof Error ? error.message : "Failed to fetch playlists";
+        return NextResponse.json({ error: errorMessage }, { status: 500 });
+    }
+}
+
+export async function POST(req: NextRequest) {
+    const session = await auth();
+    if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    const userId = await getEffectiveUserId(session.user.id);
+
+    try {
+        const { title, description } = await req.json();
+
+        if (!title) return NextResponse.json({ error: "Title is required" }, { status: 400 });
+
+        const youtube = await getYouTubeClient(userId);
+
+        const response = await youtube.playlists.insert({
+            part: ['snippet', 'status'],
+            requestBody: {
+                snippet: {
+                    title: title,
+                    description: description || "Created via AutoLoop"
+                },
+                status: {
+                    privacyStatus: 'public' // Default to public or private? 'public' is usually desired for social tools
+                }
+            }
+        });
+
+        const newPlaylist = {
+            id: response.data.id,
+            title: response.data.snippet?.title,
+            thumbnail: response.data.snippet?.thumbnails?.default?.url
+        };
+
+        return NextResponse.json({ playlist: newPlaylist });
+
+    } catch (error: unknown) {
+        console.error("Create Playlist Error:", error);
+        const errorMessage = error instanceof Error ? error.message : "Failed to create playlist";
+        return NextResponse.json({ error: errorMessage }, { status: 500 });
+    }
+}

app/api/upload/route.ts

@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from "next/server";
+import { writeFile, mkdir } from "fs/promises";
+import path from "path";
+import { nanoid } from "nanoid";
+
+export async function POST(req: NextRequest) {
+  try {
+    const formData = await req.formData();
+    const file = formData.get("file") as File;
+
+    if (!file) {
+      return NextResponse.json({ error: "No file uploaded" }, { status: 400 });
+    }
+
+    const bytes = await file.arrayBuffer();
+    const buffer = Buffer.from(bytes);
+
+    // Create uploads directory if it doesn't exist
+    const uploadDir = path.join(process.cwd(), "public/uploads");
+    try {
+        await mkdir(uploadDir, { recursive: true });
+    } catch (e) {
+        // Ignore if exists
+    }
+
+    // Generate unique filename
+    const ext = path.extname(file.name);
+    const filename = `${nanoid()}${ext}`;
+    const filepath = path.join(uploadDir, filename);
+
+    await writeFile(filepath, buffer);
+
+    const publicUrl = `/uploads/${filename}`;
+
+    return NextResponse.json({ url: publicUrl, filename: file.name });
+  } catch (error) {
+    console.error("Upload error:", error);
+    return NextResponse.json({ error: "Upload failed" }, { status: 500 });
+  }
+}

app/dashboard/businesses/page.tsx

@@ -54,7 +54,7 @@ export default function BusinessesPage() {
 
     const [categories, setCategories] = useState<string[]>([]);
 
-    const { get: getBusinessesApi } = useApi<{ businesses: Business[], totalPages: number, page: number }>();
+    const { get: getBusinessesApi, loading: loadingBusinesses } = useApi<{ businesses: Business[], totalPages: number, page: number }>();
     const { get: getCategoriesApi } = useApi<{ categories: string[] }>();
 
     // Debounce effect
@@ -235,6 +235,7 @@ export default function BusinessesPage() {
                         onSendEmail={handleSendEmail}
                         selectedIds={selectedIds}
                         onSelectionChange={setSelectedIds}
+                        isLoading={loadingBusinesses}
                     />
 
                     {/* Pagination Controls */}

app/dashboard/page.tsx

@@ -1,48 +1,27 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect } from "react";
 import { StatCard } from "@/components/dashboard/stat-card";
 import { BusinessTable } from "@/components/dashboard/business-table";
-import { BusinessDetailModal } from "@/components/dashboard/business-detail-modal";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+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 { Checkbox } from "@/components/ui/checkbox";
 import { Business } from "@/types";
-import {
-  Users,
-  Mail,
-  TrendingUp,
-  Play,
-  Loader2,
-  Sparkles,
-} from "lucide-react";
-import { BusinessTypeSelect } from "@/components/business-type-select";
-import { KeywordInput } from "@/components/keyword-input";
-import { ActiveTaskCard } from "@/components/active-task-card";
-// Recharts moved to separate component
+import { Users, Mail, TrendingUp, ArrowRight } from "lucide-react";
 import dynamic from "next/dynamic";
 import { AnimatedContainer } from "@/components/animated-container";
+import { useApi } from "@/hooks/use-api";
+import Link from "next/link";
+import { Skeleton } from "@/components/ui/skeleton";
 
 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>,
+  loading: () => <Skeleton className="h-[300px] w-full" />,
   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;
-  totalTemplates: number;
-  totalWorkflows: number;
   emailsSent: number;
-  emailsOpened: number;
-  emailsClicked: number;
   openRate: number;
-  clickRate: number;
   quotaUsed: number;
   quotaLimit: number;
 }
@@ -53,386 +32,64 @@ interface ChartDataPoint {
   opened: number;
 }
 
-interface ActiveTask {
-  jobId: string;
-  workflowName: string;
-  status: string;
-  businessesFound: number;
-}
-
 export default function DashboardPage() {
   const [businesses, setBusinesses] = useState<Business[]>([]);
-  const [selectedBusiness, setSelectedBusiness] = useState<Business | null>(null);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [keywords, setKeywords] = useState<string[]>([]);
-  const [isScrapingStarted, setIsScrapingStarted] = useState(false);
-  const [isGeneratingKeywords, setIsGeneratingKeywords] = useState(false);
-  const [activeTask, setActiveTask] = useState<ActiveTask | null>(null);
   const [stats, setStats] = useState<DashboardStats | null>(null);
   const [chartData, setChartData] = useState<ChartDataPoint[]>([]);
-  const [businessType, setBusinessType] = useState<string>("");
-  const [location, setLocation] = useState<string>("");
-  const [scrapingSources, setScrapingSources] = useState<string[]>(["google-maps", "google-search"]);
-
-  const handleViewDetails = (business: Business) => {
-    setSelectedBusiness(business);
-    setIsModalOpen(true);
-  };
 
   // API Hooks
-  const { post: startScraping } = useApi();
-  const { get: getBusinessesApi } = useApi<{ businesses: Business[] }>();
-  // Use loadingStats from hook instead of local state
+  const { get: getBusinessesApi, loading: loadingBusinesses } = useApi<{ businesses: Business[] }>();
   const { get: getStatsApi, loading: loadingStats } = useApi<{ stats: DashboardStats; chartData: ChartDataPoint[] }>();
-  const { post: generateKeywords } = useApi<{ keywords: string[] }>();
-  const { get: getActiveTasks } = useApi<{ tasks: Array<{ id: string; type: string; status: string; workflowName?: string; businessesFound?: number }> }>();
-
-  const fetchDashboardStats = useCallback(async () => {
-    const data = await getStatsApi("/api/dashboard/stats");
-    if (data) {
-      setStats(data.stats);
-      setChartData(data.chartData || []);
-    }
-  }, [getStatsApi]);
-
-  const fetchActiveTask = useCallback(async () => {
-    const data = await getActiveTasks("/api/tasks");
-    if (data?.tasks) {
-      // Find first active scraping task
-      const activeJob = data.tasks.find(
-        (task: { type: string; status: string }) =>
-          task.type === "scraping" &&
-          (task.status === "processing" || task.status === "paused")
-      );
-
-      if (activeJob) {
-        setActiveTask({
-          jobId: activeJob.id,
-          workflowName: activeJob.workflowName || "Scraping Job",
-          status: activeJob.status,
-          businessesFound: activeJob.businessesFound || 0,
-        });
-      } else if (activeTask) {
-        // Clear if task completed
-        setActiveTask(null);
-      }
-    }
-  }, [getActiveTasks, activeTask]);
 
   useEffect(() => {
-    const initData = async () => {
-      // Fetch businesses
-      const businessData = await getBusinessesApi("/api/businesses");
-      if (businessData) {
-        setBusinesses(businessData.businesses || []);
+    const fetchData = async () => {
+      const [businessData, statsData] = await Promise.all([
+        getBusinessesApi("/api/businesses"),
+        getStatsApi("/api/dashboard/stats")
+      ]);
+
+      if (businessData?.businesses) setBusinesses(businessData.businesses);
+      if (statsData) {
+        setStats(statsData.stats);
+        setChartData(statsData.chartData || []);
       }
-
-      // Fetch stats
-      await fetchDashboardStats();
-
-      // Fetch active task
-      await fetchActiveTask();
-    };
-
-    initData();
-
-    // Auto-refresh stats every 30 seconds
-    const statsInterval = setInterval(fetchDashboardStats, 30000);
-
-    // Auto-refresh active task every 5 seconds
-    const taskInterval = setInterval(fetchActiveTask, 5000);
-
-    return () => {
-      clearInterval(statsInterval);
-      clearInterval(taskInterval);
     };
-  }, [getBusinessesApi, fetchDashboardStats, fetchActiveTask]);
-
-  const { post: sendEmailApi } = useApi();
-
-  const handleSendEmail = async (business: Business) => {
-    const toastId = toast.loading(`Sending email to ${business.name}...`);
-    try {
-      const result = await sendEmailApi("/api/email/send", { businessId: business.id });
-
-      if (!result) {
-        throw new Error("Failed to send email");
-      }
-
-      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 () => {
-    if (!businessType || !location) return;
-
-    setIsScrapingStarted(true);
-    try {
-      const result = await startScraping("/api/scraping/start", {
-        targetBusinessType: businessType,
-        keywords,
-        location,
-        sources: scrapingSources, // Pass selected sources
-      });
-
-      if (result) {
-        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
-        setTimeout(async () => {
-          const businessData = await getBusinessesApi("/api/businesses");
-          if (businessData) {
-            setBusinesses(businessData.businesses || []);
-          }
-        }, 2000);
-      }
-    } catch (error) {
-      toast.error("Failed to start scraping", {
-        description: "Please try again or check your connection.",
-      });
-      console.error("Error starting scraping:", error);
-    } finally {
-      setIsScrapingStarted(false);
-    }
-  };
-
-  const handleGenerateKeywords = async () => {
-    if (!businessType) {
-      toast.error("Please select a business type first");
-      return;
-    }
-
-    setIsGeneratingKeywords(true);
-    try {
-      const result = await generateKeywords("/api/keywords/generate", {
-        businessType,
-      });
-
-      if (result?.keywords) {
-        // Merge with existing keywords, avoiding duplicates
-        const newKeywords = result.keywords.filter(
-          (kw: string) => !keywords.includes(kw)
-        );
-        setKeywords([...keywords, ...newKeywords]);
-        sendNotification({
-          title: "Keywords Generated",
-          message: `Successfully generated ${newKeywords.length} new keywords.`,
-          type: "success"
-        });
-      }
-    } catch (error) {
-      toast.error("Failed to generate keywords");
-      console.error("Error generating keywords:", error);
-    } finally {
-      setIsGeneratingKeywords(false);
-    }
-  };
+    fetchData();
+  }, [getBusinessesApi, getStatsApi]);
 
   return (
     <div className="space-y-6">
-      {/* Scraping Form */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Start New Search</CardTitle>
-          <CardDescription>
-            Find local businesses and automatically reach out to them
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-2">
-              <Label htmlFor="businessType">Business Type</Label>
-              <BusinessTypeSelect
-                value={businessType}
-                onValueChange={setBusinessType}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="location">Location</Label>
-              <Input
-                id="location"
-                list="locations"
-                placeholder="e.g., New York, NY"
-                value={location}
-                onChange={(e) => setLocation(e.target.value)}
-              />
-              <datalist id="locations">
-                {allLocations.map((loc) => (
-                  <option key={loc} value={loc} />
-                ))}
-              </datalist>
-            </div>
-          </div>
-          <div className="space-y-2">
-            <div className="flex items-center justify-between">
-              <Label htmlFor="keywords">Keywords (Optional)</Label>
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                onClick={handleGenerateKeywords}
-                disabled={!businessType || isGeneratingKeywords}
-                className="gap-2"
-              >
-                {isGeneratingKeywords ? (
-                  <>
-                    <Loader2 className="h-4 w-4 animate-spin" />
-                  </>
-                ) : (
-                  <>
-                      <Sparkles className="h-4 w-4" />
-                  </>
-                )}
-              </Button>
-            </div>
-            <KeywordInput
-              businessTypeId={businessType}
-              value={keywords}
-              onChange={setKeywords}
-              placeholder="Add relevant keywords..."
-            />
-            <p className="text-sm text-muted-foreground">
-              Press Enter to add custom keywords, click suggestions, or use AI to generate
-            </p>
-          </div>
-
-          {/* Scraping Sources Selection */}
-          <div className="space-y-2">
-            <Label>Scraping Sources</Label>
-            <div className="flex flex-wrap gap-3">
-              <label className="flex items-center gap-2 cursor-pointer">
-                <Checkbox
-                  checked={scrapingSources.includes("google-maps")}
-                  onCheckedChange={(checked) => {
-                    if (checked) setScrapingSources([...scrapingSources, "google-maps"]);
-                    else setScrapingSources(scrapingSources.filter(s => s !== "google-maps"));
-                  }}
-                />
-                <span className="text-sm">📍 Google Maps</span>
-              </label>
-              <label className="flex items-center gap-2 cursor-pointer">
-                <Checkbox
-                  checked={scrapingSources.includes("google-search")}
-                  onCheckedChange={(checked) => {
-                    if (checked) setScrapingSources([...scrapingSources, "google-search"]);
-                    else setScrapingSources(scrapingSources.filter(s => s !== "google-search"));
-                  }}
-                />
-                <span className="text-sm">🔍 Google Search</span>
-              </label>
-              <label className="flex items-center gap-2 cursor-pointer">
-                <Checkbox
-                  checked={scrapingSources.includes("linkedin")}
-                  onCheckedChange={(checked) => {
-                    if (checked) setScrapingSources([...scrapingSources, "linkedin"]);
-                    else setScrapingSources(scrapingSources.filter(s => s !== "linkedin"));
-                  }}
-                />
-                <span className="text-sm">💼 LinkedIn</span>
-              </label>
-              <label className="flex items-center gap-2 cursor-pointer">
-                <Checkbox
-                  checked={scrapingSources.includes("facebook")}
-                  onCheckedChange={(checked) => {
-                    if (checked) setScrapingSources([...scrapingSources, "facebook"]);
-                    else setScrapingSources(scrapingSources.filter(s => s !== "facebook"));
-                  }}
-                />
-                <span className="text-sm">👥 Facebook</span>
-              </label>
-              <label className="flex items-center gap-2 cursor-pointer">
-                <Checkbox
-                  checked={scrapingSources.includes("instagram")}
-                  onCheckedChange={(checked) => {
-                    if (checked) setScrapingSources([...scrapingSources, "instagram"]);
-                    else setScrapingSources(scrapingSources.filter(s => s !== "instagram"));
-                  }}
-                />
-                <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.
-            </p>
-          </div>
-          <Button
-            onClick={handleStartScraping}
-            disabled={isScrapingStarted || !businessType || !location}
-            className="w-full cursor-pointer"
-          >
-            {isScrapingStarted ? (
-              <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                Scraping...
-              </>
-            ) : (
-              <>
-                <Play className="mr-2 h-4 w-4" />
-                Start Scraping
-              </>
-            )}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Overview</h1>
+          <p className="text-muted-foreground">
+            Your agency performance at a glance.
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button asChild>
+            <Link href="/dashboard/scraper">
+              Start New Search <ArrowRight className="ml-2 h-4 w-4" />
+            </Link>
           </Button>
+        </div>
+      </div>
 
-          {/* Active Task Card - Shown here when scraping */}
-          {activeTask && (
-            <ActiveTaskCard
-              jobId={activeTask.jobId}
-              workflowName={activeTask.workflowName}
-              status={activeTask.status}
-              businessesFound={activeTask.businessesFound}
-              onDismiss={() => setActiveTask(null)}
-              onStatusChange={fetchActiveTask}
-            />
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Stats */}
+      {/* Primary Stats */}
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         {loadingStats || !stats ? (
           Array.from({ length: 4 }).map((_, 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>
-              <CardContent>
-                <div className="h-8 w-16 bg-muted animate-pulse rounded"></div>
-              </CardContent>
-            </Card>
-            </AnimatedContainer>
+            <Skeleton key={i} className="h-32 w-full rounded-xl" />
           ))
         ) : (
-                <>
+            <>
+              <AnimatedContainer delay={0.1}>
+                <StatCard title="Total Leads" value={stats.totalBusinesses} icon={Users} />
+              </AnimatedContainer>
               <AnimatedContainer delay={0.2}>
-                  <StatCard
-                    title="Total Businesses"
-                    value={stats.totalBusinesses}
-                    icon={Users}
-                  />
+                <StatCard title="Emails Sent" value={stats.emailsSent} icon={Mail} />
               </AnimatedContainer>
               <AnimatedContainer delay={0.3}>
-                  <StatCard
-                    title="Emails Sent"
-                    value={stats.emailsSent}
-                    icon={Mail}
-                  />
-              </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">Daily Quota</CardTitle>
@@ -440,9 +97,6 @@ export default function DashboardPage() {
                   </CardHeader>
                   <CardContent>
                     <div className="text-2xl font-bold">{stats.quotaUsed} / {stats.quotaLimit}</div>
-                    <p className="text-xs text-muted-foreground">
-                      {Math.round((stats.quotaUsed / stats.quotaLimit) * 100)}% used
-                    </p>
                     <div className="mt-3 h-2 w-full bg-secondary rounded-full overflow-hidden">
                       <div
                         className={`h-full ${stats.quotaUsed >= stats.quotaLimit ? 'bg-red-500' : 'bg-blue-500'}`}
@@ -452,53 +106,56 @@ export default function DashboardPage() {
                   </CardContent>
                 </Card>
               </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>
+            <AnimatedContainer delay={0.4}>
+              <StatCard title="Open Rate" value={`${stats.openRate}%`} icon={TrendingUp} />
+            </AnimatedContainer>
+          </>
+        )}
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-7">
+        {/* Main Chart */}
+        <Card className="col-span-4">
+          <CardHeader>
+            <CardTitle>Email Performance</CardTitle>
+            <CardDescription>Sent vs Opened emails over the last 7 days</CardDescription>
+          </CardHeader>
+          <CardContent className="pl-2">
             <EmailChart data={chartData} loading={loadingStats} />
-              </CardContent>
-            </Card>
-      </AnimatedContainer>
+          </CardContent>
+        </Card>
+
+        {/* Recent Activity / Demographics Placeholder */}
+        <Card className="col-span-3">
+          <CardHeader>
+            <CardTitle>Lead Demographics</CardTitle>
+            <CardDescription>Business types distribution</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="h-[300px] flex items-center justify-center text-muted-foreground text-sm border-2 border-dashed rounded-lg">
+              Coming Soon: Business Type Chart
+            </div>
+          </CardContent>
+        </Card>
+      </div>
 
-            {/* Business Table */}
-            <Card>
+      {/* Recent Businesses */}
+      <Card>
         <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>
+          <CardTitle>Recent Leads</CardTitle>
+          <Button variant="ghost" size="sm" asChild>
+            <Link href="/dashboard/businesses">View All</Link>
           </Button>
-              </CardHeader>
-              <CardContent>
+        </CardHeader>
+        <CardContent>
                 <BusinessTable
-            businesses={businesses.slice(0, 10)}
-                  onViewDetails={handleViewDetails}
-                  onSendEmail={handleSendEmail}
+            businesses={businesses.slice(0, 5)}
+            onViewDetails={() => { }}
+            onSendEmail={() => { }}
+            isLoading={loadingBusinesses}
                 />
-              </CardContent>
-            </Card>
-
-            {/* Detail Modal */}
-            <BusinessDetailModal
-              business={selectedBusiness}
-              isOpen={isModalOpen}
-              onClose={() => setIsModalOpen(false)}
-              onSendEmail={handleSendEmail}
-            />
-          </div>
-          );
+        </CardContent>
+      </Card>
+    </div>
+  );
 }

app/dashboard/scraper/page.tsx

@@ -0,0 +1,226 @@
+"use client";
+
+import { useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Loader2, Play, Sparkles } from "lucide-react";
+import { BusinessTypeSelect } from "@/components/business-type-select";
+import { KeywordInput } from "@/components/keyword-input";
+import { ActiveTaskCard } from "@/components/active-task-card";
+import { useApi } from "@/hooks/use-api";
+import { toast } from "sonner";
+import { allLocations } from "@/lib/locations";
+import { sendNotification } from "@/components/notification-bell";
+
+interface ScraperTask {
+  id: string;
+  type?: string;
+  status: string;
+  workflowName?: string;
+  businessesFound?: number;
+}
+
+export default function ScraperPage() {
+  const [businessType, setBusinessType] = useState<string>("");
+  const [location, setLocation] = useState<string>("");
+  const [keywords, setKeywords] = useState<string[]>([]);
+  const [scrapingSources, setScrapingSources] = useState<string[]>(["google-maps", "google-search"]);
+  const [isScrapingStarted, setIsScrapingStarted] = useState(false);
+  const [isGeneratingKeywords, setIsGeneratingKeywords] = useState(false);
+  const [activeTask, setActiveTask] = useState<ScraperTask | null>(null);
+
+  const { post: startScraping } = useApi();
+  const { post: generateKeywords } = useApi<{ keywords: string[] }>();
+  const { get: getActiveTasks } = useApi<{ tasks: ScraperTask[] }>();
+
+  const handleStartScraping = async () => {
+    if (!businessType || !location) return;
+
+    setIsScrapingStarted(true);
+    try {
+      const result = await startScraping("/api/scraping/start", {
+        targetBusinessType: businessType,
+        keywords,
+        location,
+        sources: scrapingSources,
+      });
+
+      if (result) {
+        sendNotification({
+          title: "Scraping job started!",
+          message: "Check the Tasks page to monitor progress.",
+          type: "success",
+          link: "/dashboard/tasks",
+          actionLabel: "View Tasks"
+        });
+
+        // Fetch active task immediately to show updated status
+        const tasksData = await getActiveTasks("/api/tasks");
+        if (tasksData?.tasks) {
+          const activeJob = tasksData.tasks.find(t => t.type === 'scraping' && (t.status === 'processing' || t.status === 'paused'));
+          if (activeJob) {
+            setActiveTask(activeJob);
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Scraping error:", error);
+      toast.error("Failed to start scraping");
+    } finally {
+      setIsScrapingStarted(false);
+    }
+  };
+
+  const handleGenerateKeywords = async () => {
+    if (!businessType) {
+      toast.error("Please select a business type first");
+      return;
+    }
+
+    setIsGeneratingKeywords(true);
+    try {
+      const result = await generateKeywords("/api/keywords/generate", {
+        businessType,
+      });
+
+      if (result?.keywords) {
+        const newKeywords = result.keywords.filter(
+          (kw: string) => !keywords.includes(kw)
+        );
+        setKeywords([...keywords, ...newKeywords]);
+        sendNotification({
+          title: "Keywords Generated",
+          message: `Successfully generated ${newKeywords.length} new keywords.`,
+          type: "success"
+        });
+      }
+    } catch (error) {
+      console.error("Keyword generation error:", error);
+      toast.error("Failed to generate keywords");
+    } finally {
+      setIsGeneratingKeywords(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6 max-w-4xl mx-auto p-4">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Lead Scraper</h1>
+        <p className="text-muted-foreground">
+          Find local businesses and build your lead database.
+        </p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Start New Search</CardTitle>
+          <CardDescription>
+            Configure your scraping parameters below.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="businessType">Business Type</Label>
+              <BusinessTypeSelect
+                value={businessType}
+                onValueChange={setBusinessType}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="location">Location</Label>
+              <Input
+                id="location"
+                list="locations"
+                placeholder="e.g., New York, NY"
+                value={location}
+                onChange={(e) => setLocation(e.target.value)}
+              />
+              <datalist id="locations">
+                {allLocations.map((loc) => (
+                  <option key={loc} value={loc} />
+                ))}
+              </datalist>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="keywords">Keywords (Optional)</Label>
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                onClick={handleGenerateKeywords}
+                disabled={!businessType || isGeneratingKeywords}
+                className="gap-2"
+              >
+                {isGeneratingKeywords ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Sparkles className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+            <KeywordInput
+              businessTypeId={businessType}
+              value={keywords}
+              onChange={setKeywords}
+              placeholder="Add relevant keywords..."
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label>Scraping Sources</Label>
+            <div className="flex flex-wrap gap-3">
+              {["google-maps", "google-search", "linkedin", "facebook", "instagram"].map((source) => (
+                <label key={source} className="flex items-center gap-2 cursor-pointer border p-2 rounded hover:bg-muted">
+                  <Checkbox
+                    checked={scrapingSources.includes(source)}
+                    onCheckedChange={(checked) => {
+                      if (checked) setScrapingSources([...scrapingSources, source]);
+                      else setScrapingSources(scrapingSources.filter(s => s !== source));
+                    }}
+                  />
+                  <span className="text-sm capitalize">{source.replace('-', ' ')}</span>
+                </label>
+              ))}
+            </div>
+          </div>
+          <Button
+            onClick={handleStartScraping}
+            disabled={isScrapingStarted || !businessType || !location}
+            className="w-full cursor-pointer"
+            size="lg"
+          >
+            {isScrapingStarted ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Scraping...
+              </>
+            ) : (
+              <>
+                <Play className="mr-2 h-4 w-4" />
+                Start Scraping
+              </>
+            )}
+          </Button>
+
+          {activeTask && (
+            <div className="mt-4">
+              <ActiveTaskCard
+                jobId={activeTask.id}
+                workflowName={activeTask.workflowName || ""}
+                status={activeTask.status}
+                businessesFound={activeTask.businessesFound || 0}
+                onDismiss={() => setActiveTask(null)}
+              />
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/dashboard/settings/page.tsx

@@ -8,7 +8,7 @@ import { Label } from "@/components/ui/label";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Switch } from "@/components/ui/switch";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { User, Key, Bell, Copy, Check, Loader2 } from "lucide-react";
+import { User, Key, Bell, Copy, Check, Loader2, ExternalLink } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Plus } from "lucide-react";
@@ -16,7 +16,7 @@ import { useToast } from "@/hooks/use-toast";
 import { useTheme } from "@/components/theme-provider";
 import { signOut } from "next-auth/react";
 import { useApi } from "@/hooks/use-api";
-import { UserProfile } from "@/types";
+import { ConnectedAccount, UserProfile } from "@/types";
 
 import {
   Dialog,
@@ -28,6 +28,7 @@ import {
 } from "@/components/ui/dialog";
 import { Moon, Sun, LogOut, Trash2, AlertTriangle, Palette } from "lucide-react";
 import { MailSettings } from "@/components/mail/mail-settings";
+import { SocialSettings } from "@/components/settings/social-settings";
 
 interface StatusResponse {
   database: boolean;
@@ -43,7 +44,7 @@ export default function SettingsPage() {
   const [isSavingNotifications, setIsSavingNotifications] = useState(false);
 
   // API Hooks
-  const { get: getSettings, patch: patchSettings, loading: settingsLoading } = useApi<{ user: UserProfile & { isGeminiKeySet: boolean, isGmailConnected: boolean, isLinkedinCookieSet: boolean } }>();
+  const { get: getSettings, patch: patchSettings, loading: settingsLoading } = useApi<{ user: UserProfile & { isGeminiKeySet: boolean, isGmailConnected: boolean, isLinkedinCookieSet: boolean }, connectedAccounts: ConnectedAccount[] }>();
   const { get: getStatus, loading: statusLoading } = useApi<StatusResponse>();
   const { del: deleteUserFn, loading: deletingUser } = useApi<void>();
   const { del: deleteDataFn, loading: deletingData } = useApi<void>();
@@ -54,6 +55,7 @@ export default function SettingsPage() {
   const [geminiApiKey, setGeminiApiKey] = useState("");
   const [isGeminiKeySet, setIsGeminiKeySet] = useState(false);
   const [isGmailConnected, setIsGmailConnected] = useState(false);
+  const [connectedAccounts, setConnectedAccounts] = useState<ConnectedAccount[]>([]);
 
   // Connection Status State
   const [connectionStatus, setConnectionStatus] = useState({ database: false, redis: false });
@@ -94,7 +96,11 @@ export default function SettingsPage() {
         }
         setIsGeminiKeySet(settingsData.user.isGeminiKeySet);
         setIsGmailConnected(settingsData.user.isGmailConnected);
+
+        if (settingsData.connectedAccounts) {
+          setConnectedAccounts(settingsData.connectedAccounts);
         }
+      }
 
         // Fetch Connection Status
       const statusData = await getStatus("/api/settings/status");
@@ -550,8 +556,17 @@ export default function SettingsPage() {
               </CardDescription>
             </CardHeader>
             <CardContent className="space-y-6">
+              {/* Social Integrations */}
+              <div className="space-y-4 pt-4 border-t">
+                <div>
+                  <h3 className="text-lg font-medium">Social Connections</h3>
+                  <p className="text-sm text-muted-foreground">Manage your social media accounts for auto-posting.</p>
+                </div>
+                <SocialSettings connectedAccounts={connectedAccounts} />
+              </div>
+
               {/* Mail Settings (Gmail) */}
-              <div className="space-y-2">
+              <div className="space-y-2 pt-4 border-t">
                 <MailSettings isConnected={isGmailConnected} email={session?.user?.email} />
               </div>
 
@@ -592,7 +607,17 @@ export default function SettingsPage() {
               {/* Gemini API */}
               <div className="space-y-2">
                 <div className="flex items-center justify-between">
-                  <Label>Gemini API Key</Label>
+                  <div className="flex items-center gap-2">
+                    <Label>Gemini API Key</Label>
+                    <a
+                      href="https://aistudio.google.com/app/apikey"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-xs text-primary hover:underline flex items-center gap-1"
+                    >
+                      (Get Key <ExternalLink className="h-3 w-3" />)
+                    </a>
+                  </div>
                   <Badge variant={isGeminiKeySet ? "default" : "destructive"}>
                     {isGeminiKeySet ? "Configured" : "Not Set"}
                   </Badge>
@@ -622,10 +647,21 @@ export default function SettingsPage() {
                 </p>
               </div>
 
-              {/* LinkedIn Session Cookie */}
+              {/* LinkedIn Session Cookie (Legacy/Alternative) */}
               <div className="space-y-2">
                 <div className="flex items-center justify-between">
-                  <Label>LinkedIn Session Cookie (li_at)</Label>
+                  <div className="flex items-center gap-2">
+                    <Label>LinkedIn Session Cookie (Scraping)</Label>
+                    <a
+                      href="https://www.linkedin.com/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-xs text-primary hover:underline flex items-center gap-1"
+                      title="Login and find 'li_at' cookie in Developer Tools > Application"
+                    >
+                      (Open LinkedIn <ExternalLink className="h-3 w-3" />)
+                    </a>
+                  </div>
                   <Badge variant={isLinkedinCookieSet ? "default" : "secondary"}>
                     {isLinkedinCookieSet ? "Configured" : "Not Set"}
                   </Badge>
@@ -651,10 +687,8 @@ export default function SettingsPage() {
                   </Button>
                 </div>
                 <p className="text-xs text-muted-foreground">
-                  Required for real LinkedIn automation.
-                  <span className="text-yellow-600 dark:text-yellow-400 font-medium ml-1">
-                    Warning: Use with caution.
-                  </span>
+                  <strong>Required ONLY for the Scraper Tool.</strong> This is separate from the &quot;Social Connections&quot; above.
+                  Used for extracting data from LinkedIn profiles directly. Use F12 &gt; Application &gt; Cookies to find <code>li_at</code>.
                 </p>
               </div>
 

app/dashboard/social/automations/page.tsx

@@ -5,7 +5,7 @@ import { eq } from "drizzle-orm";
 import { redirect } from "next/navigation";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { Plus, Zap } from "lucide-react";
+import { Plus, Zap, ChevronLeft } from "lucide-react";
 import Link from "next/link";
 import { Badge } from "@/components/ui/badge";
 
@@ -25,6 +25,12 @@ export default async function AutomationsPage() {
         <div className="flex flex-col gap-6 p-6">
             <div className="flex items-center justify-between">
                 <div className="flex flex-col gap-2">
+                    <Button variant="ghost" className="w-fit pl-0 hover:bg-transparent hover:text-primary" asChild>
+                        <Link href="/dashboard/social">
+                            <ChevronLeft className="mr-2 h-4 w-4" />
+                            Back to Dashboard
+                        </Link>
+                    </Button>
                     <h1 className="text-3xl font-bold tracking-tight">Social Automations</h1>
                     <p className="text-muted-foreground">
                         Automatically reply to comments and DMs based on keywords.

app/dashboard/social/page.tsx

@@ -1,145 +1,265 @@
-import { auth } from "@/auth";
-import { db } from "@/db";
-import { connectedAccounts } from "@/db/schema";
-import { eq } from "drizzle-orm";
-import { redirect } from "next/navigation";
+"use client";
+
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Facebook, Share2, Plus, AlertCircle, CheckCircle2 } from "lucide-react";
+import { PenTool, MessageSquare, Settings, ExternalLink, Users, Eye, Trash2 } from "lucide-react";
+import { SiFacebook, SiYoutube } from "@icons-pack/react-simple-icons";
+import { Linkedin } from "lucide-react";
 import Link from "next/link";
+import { useApi } from "@/hooks/use-api";
+import { useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { toast } from "sonner";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import Image from "next/image";
+
+interface SocialPost {
+    id: string;
+    content: string;
+    mediaUrls: string[];
+    platform: string;
+    status: string;
+    createdAt: string;
+    platformPostId?: string;
+}
+
+interface AnalyticsPlatform {
+    platform: string;
+    name?: string;
+    followers: number;
+    reach: number;
+}
+
+interface AnalyticsData {
+    totalFollowers: number;
+    totalReach: number;
+    platforms: AnalyticsPlatform[];
+}
 
-export default async function SocialDashboardPage({
-    searchParams,
-}: {
-    searchParams: Promise<{ [key: string]: string | string[] | undefined }>
-}) {
-    const session = await auth();
-    if (!session?.user?.id) redirect("/auth/signin");
+export default function SocialDashboardPage() {
+    const { get, del } = useApi();
+    const [posts, setPosts] = useState<SocialPost[]>([]);
+    const [analytics, setAnalytics] = useState<AnalyticsData | null>(null);
+    const [analyticsLoading, setAnalyticsLoading] = useState(true);
 
-    const resolvedSearchParams = await searchParams;
-    const error = resolvedSearchParams?.error as string;
-    const success = resolvedSearchParams?.success as string;
+    useEffect(() => {
+        const fetchData = async () => {
+            // Fetch Posts
+            try {
+                const postsData = await get("/api/social/posts") as { posts: SocialPost[] };
+                if (postsData?.posts) {
+                    setPosts(postsData.posts);
+                }
+            } catch (error) {
+                console.error("Failed to fetch posts:", error);
+            }
 
-    const accounts = await db.query.connectedAccounts.findMany({
-        where: eq(connectedAccounts.userId, session.user.id),
-    });
+            // Fetch Analytics
+            setAnalyticsLoading(true);
+            try {
+                const analyticsData = await get("/api/social/analytics") as AnalyticsData;
+                setAnalytics(analyticsData);
+            } catch (error) {
+                console.error("Failed to fetch analytics:", error);
+            } finally {
+                setAnalyticsLoading(false);
+            }
+        };
 
-    const fbAccount = accounts.find((a) => a.provider === "facebook");
-    // const igAccount = accounts.find((a) => a.provider === "instagram"); // In this model, they might be same "Facebook" login entry, or separate. For now let's assume we store the Facebook User Token.
+        fetchData();
+    }, [get]);
 
-    // Note: We currently store "facebook" provider for the main connection.
-    // Instagram accounts are fetched VIA the Facebook connection.
-    // So we primarily check for the Facebook provider existence.
+    const handleDelete = async (id: string, e: React.MouseEvent) => {
+        e.preventDefault(); // Prevent navigating if wrapped
+        if (!confirm("Are you sure you want to delete this post history?")) return;
+
+        try {
+            await del(`/api/social/posts?id=${id}`);
+            setPosts(posts.filter(p => p.id !== id));
+            toast.success("Post deleted");
+        } catch (error) {
+            console.error("Delete failed", error);
+            toast.error("Failed to delete post");
+        }
+    };
 
     return (
         <div className="flex flex-col gap-6 p-6">
             <div className="flex flex-col gap-2">
-                <h1 className="text-3xl font-bold tracking-tight">Social Suite</h1>
-                <p className="text-muted-foreground">
-                    Manage your connected social accounts for auto-posting and engagement.
-                </p>
+                <div className="flex items-center justify-between">
+                    <div>
+                        <h1 className="text-3xl font-bold tracking-tight">Social Content</h1>
+                        <p className="text-muted-foreground">
+                            Create posts, manage automations, and view analytics.
+                        </p>
+                    </div>
+                    <div className="flex gap-2">
+                        <Button variant="outline" asChild>
+                            <Link href="/dashboard/settings?tab=api">
+                                <Settings className="mr-2 h-4 w-4" />
+                                Manage Connections
+                            </Link>
+                        </Button>
+                        <Button asChild>
+                            <Link href="/dashboard/social/posts/new">
+                                <PenTool className="mr-2 h-4 w-4" /> Create Post
+                            </Link>
+                        </Button>
+                    </div>
+                </div>
             </div>
 
-            {error && (
-                <Alert variant="destructive">
-                    <AlertCircle className="h-4 w-4" />
-                    <AlertTitle>Error</AlertTitle>
-                    <AlertDescription>
-                        {error === "access_denied" ? "You denied access. Please try again and accept permissions." : error}
-                    </AlertDescription>
-                </Alert>
-            )}
-
-            {success && (
-                <Alert className="border-green-500 text-green-600">
-                    <CheckCircle2 className="h-4 w-4" />
-                    <AlertTitle>Success</AlertTitle>
-                    <AlertDescription>Account connected successfully!</AlertDescription>
-                </Alert>
-            )}
-
-            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-                {/* Facebook Connection Card */}
-                <Card>
-                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                        <CardTitle className="text-xl font-medium">Facebook & Instagram</CardTitle>
-                        <Facebook className="h-6 w-6 text-blue-600" />
-                    </CardHeader>
-                    <CardContent>
-                        {fbAccount ? (
-                            <div className="flex flex-col gap-4 mt-4">
-                                <div className="flex items-center gap-3">
-                                    {fbAccount.picture ? (
-                                        // eslint-disable-next-line @next/next/no-img-element
-                                        <img src={fbAccount.picture} alt={fbAccount.name || "Profile"} className="w-10 h-10 rounded-full" />
-                                    ) : (
-                                        <div className="w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center">
-                                            <span className="text-lg font-bold text-slate-500">{fbAccount.name?.charAt(0)}</span>
-                                        </div>
-                                    )}
-                                    <div>
-                                        <p className="font-medium">{fbAccount.name}</p>
-                                        <p className="text-xs text-muted-foreground">Connected as {fbAccount.providerAccountId}</p>
-                                    </div>
-                                </div>
-                                <div className="flex items-center gap-2 text-sm text-green-600 bg-green-50 p-2 rounded border border-green-100">
-                                    <CheckCircle2 className="h-4 w-4" />
-                                    Long-Lived Token Active
+            <Tabs defaultValue="content" className="space-y-4">
+                <TabsList>
+                    <TabsTrigger value="content">Content</TabsTrigger>
+                    <TabsTrigger value="analytics">Analytics</TabsTrigger>
+                </TabsList>
+
+                <TabsContent value="content" className="space-y-6">
+                    <div className="grid gap-6 md:grid-cols-3">
+                        {/* Stats / Quick Actions */}
+                        <Card className="hover:bg-muted/50 transition-colors">
+                            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                                <CardTitle className="text-xl font-medium">Automations</CardTitle>
+                                <MessageSquare className="h-6 w-6 text-primary" />
+                            </CardHeader>
+                            <CardContent>
+                                <div className="flex flex-col gap-4 mt-4">
+                                    <p className="text-sm text-muted-foreground">
+                                        Configure auto-replies and engagement rules.
+                                    </p>
+                                    <Button variant="secondary" asChild>
+                                        <Link href="/dashboard/social/automations">Manage Rules</Link>
+                                    </Button>
                                 </div>
-                                <Button variant="outline" className="w-full" asChild>
-                                    <Link href="/api/social/connect/facebook">Reconnect / Refresh</Link>
-                                </Button>
-                            </div>
+                            </CardContent>
+                        </Card>
+                    </div>
+
+                    {/* Recent Posts Table */}
+                    <div className="space-y-4">
+                        <h2 className="text-xl font-semibold">Recent Posts</h2>
+                        {posts.length === 0 ? (
+                            <Card>
+                                <CardContent className="flex flex-col items-center justify-center p-10 text-muted-foreground">
+                                    <p>No posts yet. create your first post!</p>
+                                    <Button variant="link" asChild>
+                                        <Link href="/dashboard/social/posts/new">Create Post</Link>
+                                    </Button>
+                                </CardContent>
+                            </Card>
                         ) : (
-                            <div className="flex flex-col gap-4 mt-4">
-                                <p className="text-sm text-muted-foreground">
-                                    Connect your Facebook account to manage Pages and linked Instagram Business accounts.
-                                </p>
-                                <Button className="w-full bg-[#1877F2] hover:bg-[#1864D9]" asChild>
-                                    <Link href="/api/social/connect/facebook">
-                                        <Plus className="h-4 w-4 mr-2" /> Connect Facebook
-                                    </Link>
-                                </Button>
+                                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                                    {posts.map((post) => (
+                                        <Card key={post.id} className="overflow-hidden">
+                                            {post.mediaUrls && post.mediaUrls.length > 0 && (
+                                                <div className="aspect-video bg-muted relative">
+                                                    <Image
+                                                        src={post.mediaUrls[0]}
+                                                        alt="Post media"
+                                                        fill
+                                                        className="object-cover"
+                                                        unoptimized
+                                                    />
+                                                </div>
+                                            )}
+                                            <CardContent className="p-4 space-y-3">
+                                                <div className="flex items-center justify-between">
+                                                    <Badge variant={post.status === 'published' ? 'default' : post.status === 'failed' ? 'destructive' : 'secondary'}>
+                                                        {post.status}
+                                                    </Badge>
+                                                    <div className="flex gap-1 text-muted-foreground">
+                                                        {post.platform === 'facebook' && <SiFacebook className="h-4 w-4 fill-current" />}
+                                                        {post.platform === 'linkedin' && <Linkedin className="h-4 w-4 text-[#0077b5] fill-current" />}
+                                                        {post.platform === 'youtube' && <SiYoutube className="h-4 w-4 fill-current" />}
+                                                    </div>
+                                                </div>
+                                                <p className="text-sm line-clamp-3">{post.content || "No caption"}</p>
+                                                <div className="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t">
+                                                    <span>{new Date(post.createdAt).toLocaleDateString()}</span>
+                                                    <div className="flex gap-1">
+                                                        {post.platformPostId && (
+                                                            <Button variant="ghost" size="icon" className="h-6 w-6" title="View on Platform">
+                                                                <ExternalLink className="h-3 w-3" />
+                                                            </Button>
+                                                        )}
+                                                        <Button
+                                                            variant="ghost"
+                                                            size="icon"
+                                                            className="h-6 w-6 text-destructive hover:text-destructive/90 hover:bg-destructive/10"
+                                                            onClick={(e) => handleDelete(post.id, e)}
+                                                            title="Delete Post History"
+                                                        >
+                                                            <Trash2 className="h-3 w-3" />
+                                                        </Button>
+                                                    </div>
+                                                </div>
+                                            </CardContent>
+                                        </Card>
+                                    ))}
                             </div>
                         )}
-                    </CardContent>
-                </Card>
-
-                {/* Placeholder for future specific Instagram if needed separately (usually handled via FB Graph) */}
-                <Card className="opacity-75 relative overflow-hidden">
-                    <div className="absolute inset-0 bg-slate-50/50 z-10 flex items-center justify-center backdrop-blur-[1px]">
-                        <span className="bg-slate-900 text-white text-xs px-2 py-1 rounded">Coming Soon</span>
                     </div>
-                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                        <CardTitle className="text-xl font-medium">LinkedIn (Social)</CardTitle>
-                        <Share2 className="h-6 w-6 text-blue-500" />
-                    </CardHeader>
-                    <CardContent>
-                        <div className="flex flex-col gap-4 mt-4">
-                            <p className="text-sm text-muted-foreground">Manage Company Page posts and analytics.</p>
-                            <Button disabled variant="outline" className="w-full">Connect LinkedIn</Button>
-                        </div>
-                    </CardContent>
-                </Card>
-            </div>
+                </TabsContent>
 
-            {/* Future: Post Capability Preview */}
-            {fbAccount && (
-                <div className="mt-8 border-t pt-8">
-                    <h2 className="text-lg font-semibold mb-4">Quick Actions</h2>
-                    <div className="flex gap-4">
-                        <Button asChild>
-                            <Link href="/dashboard/social/posts/new">Create New Post</Link>
-                        </Button>
-                        <Button variant="secondary" asChild>
-                            <Link href="/dashboard/social/automations">Auto-Reply Rules</Link>
-                        </Button>
-                        <Button disabled variant="secondary">View Scheduled Posts</Button>
-                    </div>
-                </div>
-            )}
+                <TabsContent value="analytics" className="space-y-6">
+                    {analyticsLoading ? (
+                        <div className="flex items-center justify-center p-12">Checking Analytics...</div>
+                    ) : (
+                        <>
+                            {/* Overview Cards */}
+                            <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 Audience</CardTitle>
+                                        <Users className="h-4 w-4 text-muted-foreground" />
+                                    </CardHeader>
+                                    <CardContent>
+                                        <div className="text-2xl font-bold">{analytics?.totalFollowers?.toLocaleString() || 0}</div>
+                                        <p className="text-xs text-muted-foreground">Across all platforms</p>
+                                        </CardContent>
+                                    </Card>
+                                    <Card>
+                                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                                            <CardTitle className="text-sm font-medium">Total Reach</CardTitle>
+                                            <Eye className="h-4 w-4 text-muted-foreground" />
+                                        </CardHeader>
+                                        <CardContent>
+                                            <div className="text-2xl font-bold">{analytics?.totalReach?.toLocaleString() || 0}</div>
+                                            <p className="text-xs text-muted-foreground">Views & Impressions</p>
+                                        </CardContent>
+                                    </Card>
+                                </div>
 
+                                {/* Platform Breakdown */}
+                                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                                    {analytics?.platforms?.map((p) => (
+                                        <Card key={p.platform}>
+                                            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                                                <CardTitle className="text-base font-medium capitalize flex items-center gap-2">
+                                                    {p.platform === 'facebook' && <SiFacebook className="h-4 w-4 text-[#1877F2]" />}
+                                                    {p.platform === 'linkedin' && <Linkedin className="h-4 w-4 text-[#0A66C2] fill-current" />}
+                                                    {p.platform === 'youtube' && <SiYoutube className="h-4 w-4 text-[#FF0000]" />}
+                                                    {p.name || p.platform}
+                                                </CardTitle>
+                                            </CardHeader>
+                                            <CardContent className="space-y-4">
+                                                <div className="flex items-center justify-between">
+                                                    <span className="text-sm text-muted-foreground">Followers/Subs</span>
+                                                    <span className="font-bold">{p.followers?.toLocaleString()}</span>
+                                                </div>
+                                                <div className="flex items-center justify-between">
+                                                    <span className="text-sm text-muted-foreground">Reach/Views</span>
+                                                    <span className="font-bold">{p.reach?.toLocaleString()}</span>
+                                                </div>
+                                            </CardContent>
+                                        </Card>
+                                    ))}
+                                </div>
+                            </>
+                    )}
+                </TabsContent>
+            </Tabs>
         </div>
     );
 }

app/dashboard/social/posts/new/page.tsx

@@ -1,23 +1,678 @@
-import { auth } from "@/auth";
-import { db } from "@/db";
-import { connectedAccounts } from "@/db/schema";
-import { eq } from "drizzle-orm";
-import { redirect } from "next/navigation";
-import { PostCreatorForm } from "./post-creator-form";
-
-export default async function NewPostPage() {
-    const session = await auth();
-    if (!session?.user?.id) redirect("/auth/signin");
-
-    const accounts = await db.query.connectedAccounts.findMany({
-        where: eq(connectedAccounts.userId, session.user.id),
-        columns: {
-            id: true,
-            name: true,
-            provider: true,
-            providerAccountId: true
-        }
-    });
-
-    return <PostCreatorForm accounts={accounts} />;
+"use client";
+
+import { useState, useEffect } from "react";
+import { ConnectedAccount } from "@/types";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Textarea } from "@/components/ui/textarea";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Loader2, Wand2, Upload, X, AlertCircle, Linkedin, ChevronLeft, Calendar as CalendarIcon, Plus, Check, ChevronsUpDown } from "lucide-react";
+import { SiFacebook, SiYoutube } from "@icons-pack/react-simple-icons";
+import { useApi } from "@/hooks/use-api";
+import { toast } from "sonner";
+import { Skeleton } from "@/components/ui/skeleton";
+import Link from "next/link";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import Image from "next/image";
+
+export default function CreatePostPage() {
+    const router = useRouter();
+    const { get, post } = useApi();
+
+    // State
+    const [connectedAccounts, setConnectedAccounts] = useState<ConnectedAccount[]>([]);
+    const [loadingAccounts, setLoadingAccounts] = useState(true);
+    const [selectedPlatforms, setSelectedPlatforms] = useState<string[]>([]);
+
+    // Post Data
+    const [content, setContent] = useState("");
+    const [title, setTitle] = useState("");
+
+    // Dynamic Fields
+    const [tags, setTags] = useState<string[]>([]);
+    const [tagInput, setTagInput] = useState("");
+
+    interface Playlist {
+        id: string;
+        title: string;
+    }
+    const [playlists, setPlaylists] = useState<Playlist[]>([]);
+    const [playlist, setPlaylist] = useState(""); // Stores ID
+    const [playlistOpen, setPlaylistOpen] = useState(false);
+    const [loadingPlaylists, setLoadingPlaylists] = useState(false);
+    const [playlistSearch, setPlaylistSearch] = useState(""); // For create
+
+    // YouTube specific
+    const [category, setCategory] = useState("");
+
+    const [mediaFile, setMediaFile] = useState<File | null>(null);
+    const [mediaPreview, setMediaPreview] = useState<string | null>(null);
+
+    const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
+    const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(null);
+
+    const [scheduledDate, setScheduledDate] = useState<Date | undefined>(undefined);
+
+    const [captionLoading, setCaptionLoading] = useState(false);
+    const [tagsLoading, setTagsLoading] = useState(false);
+    const [uploading, setUploading] = useState(false);
+
+    // Fetch accounts
+    useEffect(() => {
+        setLoadingAccounts(true);
+        get("/api/settings").then((data: unknown) => {
+            const typedData = data as { connectedAccounts: ConnectedAccount[] } | null;
+            if (typedData?.connectedAccounts) {
+                setConnectedAccounts(typedData.connectedAccounts);
+                // If YouTube is connected, fetch playlists
+                if (typedData.connectedAccounts.some(acc => acc.provider === 'youtube')) {
+                    fetchPlaylists();
+                }
+            }
+        }).finally(() => {
+            setLoadingAccounts(false);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [get]);
+
+    const fetchPlaylists = async () => {
+        setLoadingPlaylists(true);
+        try {
+            const res = await get("/api/social/youtube/playlists");
+            const data = res as { playlists: Playlist[] };
+            if (data.playlists) {
+                setPlaylists(data.playlists);
+            }
+        } catch (error) {
+            console.error("Failed to fetch playlists", error);
+        } finally {
+            setLoadingPlaylists(false);
+        }
+    };
+
+    const handleCreatePlaylist = async (name: string) => {
+        setLoadingPlaylists(true);
+        try {
+            const res = await post("/api/social/youtube/playlists", { title: name });
+            const data = res as { playlist: Playlist };
+            if (data.playlist) {
+                const newPlaylist = data.playlist;
+                setPlaylists([...playlists, newPlaylist]);
+                setPlaylist(newPlaylist.id);
+                toast.success(`Created playlist: ${newPlaylist.title}`);
+                setPlaylistOpen(false);
+                setPlaylistSearch("");
+            }
+        } catch (error) {
+            console.error("Failed to create playlist", error);
+            toast.error("Failed to create playlist");
+        } finally {
+            setLoadingPlaylists(false);
+        }
+    };
+
+    // Handle File Selection
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>, type: 'media' | 'thumbnail') => {
+        if (e.target.files && e.target.files[0]) {
+            const file = e.target.files[0];
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                if (type === 'media') {
+                    setMediaFile(file);
+                    setMediaPreview(reader.result as string);
+                } else {
+                    setThumbnailFile(file);
+                    setThumbnailPreview(reader.result as string);
+                }
+            };
+            reader.readAsDataURL(file);
+        }
+    };
+
+    // Handle AI Generation
+    const handleGenerateAI = async () => {
+        if (!content && !mediaFile && !title) {
+            toast.error("Please provide some context or topic for AI generation");
+            return;
+        }
+
+        setCaptionLoading(true);
+        try {
+            const res = await fetch("/api/ai/generate-content", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    prompt: `${title ? `Title: ${title}. ` : ''}${content}` || "A generic engaging post",
+                    type: "caption",
+                    context: "Social Media Marketing"
+                })
+            });
+            const data = await res.json();
+            if (data.content) {
+                setContent(data.content.trim());
+                toast.success("AI Caption Generated!");
+            }
+        } catch (error) {
+            console.error(error);
+            toast.error("Failed to generate content");
+        } finally {
+            setCaptionLoading(false);
+        }
+    };
+
+    // Handle Tags
+    const handleAddTag = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ',') {
+            e.preventDefault();
+            const val = tagInput.trim();
+            if (val && !tags.includes(val)) {
+                setTags([...tags, val]);
+                setTagInput("");
+            }
+        }
+    };
+    const removeTag = (tag: string) => {
+        setTags(tags.filter(t => t !== tag));
+    };
+
+    // Submit Post
+    const handleSubmit = async () => {
+        if (selectedPlatforms.length === 0) {
+            toast.error("Please select at least one platform");
+            return;
+        }
+        if (!content && !mediaFile && !title) {
+            toast.error("Please add content, title or media");
+            return;
+        }
+
+        setUploading(true);
+        try {
+            let mediaUrl = null;
+            let thumbnailUrl = null;
+
+            // 1. Upload Media
+            if (mediaFile) {
+                const formData = new FormData();
+                formData.append("file", mediaFile);
+                const uploadRes = await fetch("/api/upload", { method: "POST", body: formData });
+                if (!uploadRes.ok) throw new Error("Upload failed");
+                const uploadData = await uploadRes.json();
+                mediaUrl = uploadData.url;
+            }
+
+            // 2. Upload Thumbnail
+            if (thumbnailFile) {
+                const formData = new FormData();
+                formData.append("file", thumbnailFile);
+                const uploadRes = await fetch("/api/upload", { method: "POST", body: formData });
+                if (!uploadRes.ok) throw new Error("Thumbnail upload failed");
+                const uploadData = await uploadRes.json();
+                thumbnailUrl = uploadData.url;
+            }
+
+            // 3. Create Post
+            const result = await post("/api/social/posts", {
+                content,
+                title,
+                mediaUrl,
+                thumbnailUrl,
+                tags,
+                category,
+                playlist,
+                scheduledAt: scheduledDate?.toISOString(),
+                platforms: selectedPlatforms
+            }) as { success?: boolean; error?: string };
+
+            if (result.success) {
+                toast.success(scheduledDate ? "Post scheduled successfully!" : "Post submitted successfully!");
+                router.push("/dashboard/social");
+            } else {
+                toast.error(result.error || "Post creation failed");
+            }
+
+        } catch (error) {
+            console.error(error);
+            toast.error("Something went wrong");
+        } finally {
+            setUploading(false);
+        }
+    };
+
+    const togglePlatform = (id: string) => {
+        setSelectedPlatforms(prev => prev.includes(id) ? prev.filter(p => p !== id) : [...prev, id]);
+    };
+
+    return (
+        <div className="flex flex-col gap-6 p-6 max-w-5xl mx-auto relative">
+            {/* Blocking Overlay */}
+            {uploading && (
+                <div className="absolute inset-0 z-50 bg-background/50 backdrop-blur-sm flex items-center justify-center rounded-lg">
+                    <div className="flex flex-col items-center gap-4 bg-background p-8 rounded-lg shadow-lg border animate-in fade-in zoom-in duration-300">
+                        <Loader2 className="h-12 w-12 animate-spin text-primary" />
+                        <div className="text-center space-y-1">
+                            <h3 className="font-semibold text-lg">{scheduledDate ? "Scheduling Post" : "Publishing Post"}</h3>
+                            <p className="text-muted-foreground text-sm">Uploading media and processing...</p>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            <div>
+                <Button variant="ghost" className="mb-4 pl-0 hover:bg-transparent hover:text-primary" asChild>
+                    <Link href="/dashboard/social">
+                        <ChevronLeft className="mr-2 h-4 w-4" />
+                        Back to Dashboard
+                    </Link>
+                </Button>
+                <div className="flex items-center justify-between">
+                    <div>
+                        <h1 className="text-3xl font-bold tracking-tight">Create New Post</h1>
+                        <p className="text-muted-foreground">Compose and publish content to your social networks.</p>
+                    </div>
+                    {/* Schedule Toggle/Indicator could go here */}
+                </div>
+            </div>
+
+            <div className="grid gap-6 md:grid-cols-[2fr_1fr]">
+                <div className="space-y-6">
+                    {/* Main Content Card */}
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Post Details</CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                            <div className="space-y-2">
+                                <Label>Title (Required for YouTube / Articles)</Label>
+                                <Input
+                                    placeholder="Enter a catchy title..."
+                                    value={title}
+                                    onChange={(e) => setTitle(e.target.value)}
+                                    disabled={uploading}
+                                />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label>Post Content</Label>
+                                <div className="relative">
+                                    <Textarea
+                                        placeholder="What's on your mind? (Use AI to help you write)"
+                                        className={`min-h-[150px] pr-24 resize-none transition-all ${captionLoading ? "opacity-50" : ""}`}
+                                        value={content}
+                                        onChange={(e) => setContent(e.target.value)}
+                                        disabled={captionLoading || uploading}
+                                    />
+                                    <Button
+                                        size="sm"
+                                        variant="ghost"
+                                        className="absolute bottom-2 right-2 text-purple-600 hover:text-purple-700 hover:bg-purple-50"
+                                        onClick={handleGenerateAI}
+                                        disabled={captionLoading || uploading}
+                                    >
+                                        <Wand2 className={`h-4 w-4 mr-1 ${captionLoading ? "animate-spin" : ""}`} />
+                                        {captionLoading ? "Generating..." : "Generate AI"}
+                                    </Button>
+                                </div>
+                            </div>
+
+                            {/* Tags Input */}
+                            <div className="space-y-2">
+                                <div className="flex items-center justify-between">
+                                    <Label>Tags</Label>
+                                    <Button
+                                        size="sm"
+                                        variant="ghost"
+                                        className="h-6 text-xs text-purple-600 hover:text-purple-700 hover:bg-purple-50 px-2"
+                                        onClick={async () => {
+                                            if (!content && !title) {
+                                                toast.error("Add content or title first to generate tags");
+                                                return;
+                                            }
+                                            setTagsLoading(true);
+                                            try {
+                                                const res = await fetch("/api/ai/generate-content", {
+                                                    method: "POST",
+                                                    headers: { "Content-Type": "application/json" },
+                                                    body: JSON.stringify({
+                                                        prompt: `${title} ${content}`,
+                                                        type: "tags",
+                                                        context: "Social Media Optimization"
+                                                    })
+                                                });
+                                                const data = await res.json();
+                                                if (data.content) {
+                                                    const newTags = data.content.split(',').map((t: string) => t.trim().replace(/^#/, '')).filter(Boolean);
+                                                    setTags(prev => [...new Set([...prev, ...newTags])]); // Merge unique
+                                                    toast.success(`Generated ${newTags.length} tags`);
+                                                }
+                                            } catch (e) {
+                                                console.error(e);
+                                                toast.error("Failed to generate tags");
+                                            } finally {
+                                                setTagsLoading(false);
+                                            }
+                                        }}
+                                        disabled={tagsLoading || uploading}
+                                    >
+                                        <Wand2 className={`h-3 w-3 mr-1 ${tagsLoading ? "animate-spin" : ""}`} />
+                                        {tagsLoading ? "Generating..." : "Auto Tags"}
+                                    </Button>
+                                </div>
+                                <div className="flex flex-wrap gap-2 border rounded-md p-2 bg-background focus-within:ring-1 focus-within:ring-ring">
+                                    {tags.map(tag => (
+                                        <span key={tag} className="flex items-center bg-secondary text-secondary-foreground text-xs px-2 py-1 rounded-full">
+                                            #{tag}
+                                            <button onClick={() => removeTag(tag)} className="ml-1 hover:text-destructive"><X className="h-3 w-3" /></button>
+                                        </span>
+                                    ))}
+                                    <input
+                                        className="flex-1 bg-transparent outline-none text-sm min-w-[100px]"
+                                        placeholder="Type and press Enter..."
+                                        value={tagInput}
+                                        onChange={(e) => setTagInput(e.target.value)}
+                                        onKeyDown={handleAddTag}
+                                        disabled={uploading}
+                                    />
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    {/* Media Card */}
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Media & Options</CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-6">
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                {/* Primary Media */}
+                                <div className="space-y-2">
+                                    <Label>Primary Media</Label>
+                                    {mediaPreview ? (
+                                        <div className="relative rounded-lg overflow-hidden border bg-muted aspect-video flex items-center justify-center group">
+                                            {mediaFile?.type.startsWith('video') ? (
+                                                <video src={mediaPreview} controls className="max-h-full max-w-full" />
+                                            ) : (
+                                                <Image
+                                                    src={mediaPreview}
+                                                    alt="Preview"
+                                                    fill
+                                                    className="object-contain"
+                                                    unoptimized
+                                                />
+                                            )}
+                                            <Button
+                                                variant="destructive"
+                                                size="icon"
+                                                className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity"
+                                                onClick={() => { setMediaFile(null); setMediaPreview(null); }}
+                                                disabled={uploading}
+                                            >
+                                                <X className="h-4 w-4" />
+                                            </Button>
+                                        </div>
+                                    ) : (
+                                        <div className={`border-2 border-dashed rounded-lg p-6 text-center relative ${uploading ? "opacity-50" : "hover:bg-muted/50 cursor-pointer"}`}>
+                                            <input
+                                                type="file"
+                                                className="absolute inset-0 opacity-0 cursor-pointer"
+                                                onChange={(e) => handleFileChange(e, 'media')}
+                                                accept="image/*,video/*,video/x-matroska,video/x-flv,video/webm"
+                                                disabled={uploading}
+                                            />
+                                            <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                                                <Upload className="h-6 w-6" />
+                                                <p className="text-xs font-medium">Upload Media</p>
+                                                <p className="text-[10px] text-muted-foreground">MP4, MOV, FLV, MKV, PNG, JPG</p>
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+
+                                {/* Thumbnail */}
+                                <div className="space-y-2">
+                                    <Label>Thumbnail (Video only)</Label>
+                                    {thumbnailPreview ? (
+                                        <div className="relative rounded-lg overflow-hidden border bg-muted aspect-video flex items-center justify-center group">
+                                            <Image
+                                                src={thumbnailPreview}
+                                                alt="Thumbnail Preview"
+                                                fill
+                                                className="object-cover"
+                                                unoptimized
+                                            />
+                                            <Button
+                                                variant="destructive"
+                                                size="icon"
+                                                className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity"
+                                                onClick={() => { setThumbnailFile(null); setThumbnailPreview(null); }}
+                                                disabled={uploading}
+                                            >
+                                                <X className="h-4 w-4" />
+                                            </Button>
+                                        </div>
+                                    ) : (
+                                        <div className={`border-2 border-dashed rounded-lg p-6 text-center relative ${uploading ? "opacity-50" : "hover:bg-muted/50 cursor-pointer"}`}>
+                                            <input
+                                                type="file"
+                                                className="absolute inset-0 opacity-0 cursor-pointer"
+                                                onChange={(e) => handleFileChange(e, 'thumbnail')}
+                                                accept="image/*"
+                                                disabled={uploading}
+                                            />
+                                            <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                                                <Upload className="h-6 w-6" />
+                                                <p className="text-xs font-medium">Upload Thumbnail</p>
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+
+                            {/* Additional Metadata */}
+                            <div className="grid grid-cols-2 gap-4">
+                                <div className="space-y-2">
+                                    <Label>Category (YouTube)</Label>
+                                    <Select value={category} onValueChange={setCategory} disabled={uploading}>
+                                        <SelectTrigger>
+                                            <SelectValue placeholder="Select Category" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="22">People & Blogs</SelectItem>
+                                            <SelectItem value="28">Science & Technology</SelectItem>
+                                            <SelectItem value="27">Education</SelectItem>
+                                            <SelectItem value="24">Entertainment</SelectItem>
+                                            <SelectItem value="10">Music</SelectItem>
+                                            <SelectItem value="17">Sports</SelectItem>
+                                            <SelectItem value="20">Gaming</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                <div className="space-y-2">
+                                    <Label>Playlist (YouTube)</Label>
+                                    <Popover open={playlistOpen} onOpenChange={setPlaylistOpen}>
+                                        <PopoverTrigger asChild>
+                                            <Button
+                                                variant="outline"
+                                                role="combobox"
+                                                aria-expanded={playlistOpen}
+                                                className="w-full justify-between"
+                                                disabled={uploading}
+                                            >
+                                                {playlist
+                                                    ? playlists.find((p) => p.id === playlist)?.title
+                                                    : "Select or Create Playlist..."}
+                                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                            </Button>
+                                        </PopoverTrigger>
+                                        <PopoverContent className="w-[300px] p-0">
+                                            <Command>
+                                                <CommandInput
+                                                    placeholder="Search or create playlist..."
+                                                    value={playlistSearch}
+                                                    onValueChange={setPlaylistSearch}
+                                                />
+                                                <CommandList>
+                                                    <CommandEmpty className="py-2 px-2">
+                                                        <div className="flex flex-col gap-2">
+                                                            <p className="text-sm text-muted-foreground">No playlist found.</p>
+                                                            {playlistSearch && (
+                                                                <Button
+                                                                    variant="secondary"
+                                                                    size="sm"
+                                                                    className="w-full h-8 justify-start"
+                                                                    onClick={() => handleCreatePlaylist(playlistSearch)}
+                                                                    disabled={loadingPlaylists}
+                                                                >
+                                                                    <Plus className="h-3 w-3 mr-2" />
+                                                                    Create &quot;{playlistSearch}&quot;
+                                                                </Button>
+                                                            )}
+                                                        </div>
+                                                    </CommandEmpty>
+                                                    <CommandGroup>
+                                                        {playlists.map((p) => (
+                                                            <CommandItem
+                                                                key={p.id}
+                                                                value={p.title}
+                                                                onSelect={() => {
+                                                                    setPlaylist(p.id === playlist ? "" : p.id);
+                                                                    setPlaylistOpen(false);
+                                                                }}
+                                                            >
+                                                                <Check
+                                                                    className={cn(
+                                                                        "mr-2 h-4 w-4",
+                                                                        playlist === p.id ? "opacity-100" : "opacity-0"
+                                                                    )}
+                                                                />
+                                                                {p.title}
+                                                            </CommandItem>
+                                                        ))}
+                                                    </CommandGroup>
+                                                </CommandList>
+                                            </Command>
+                                        </PopoverContent>
+                                    </Popover>
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+
+                <div className="space-y-6">
+                    {/* Platform Selector */}
+                    <Card>
+                        <CardHeader>
+                            <CardTitle className="text-lg">Select Platforms</CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-3">
+                            {loadingAccounts ? (
+                                <div className="space-y-3">
+                                    <Skeleton className="h-10 w-full rounded-lg" />
+                                    <Skeleton className="h-10 w-full rounded-lg" />
+                                </div>
+                            ) : connectedAccounts.length === 0 ? (
+                                <div className="text-sm text-yellow-600 bg-yellow-50 p-3 rounded flex items-start gap-2">
+                                    <AlertCircle className="h-4 w-4 mt-0.5" />
+                                    <div>No accounts connected. Go to Settings to connect.</div>
+                                </div>
+                            ) : (
+                                connectedAccounts.map(account => (
+                                    <div key={account.id} className="flex items-center space-x-2 border p-3 rounded-lg hover:bg-muted/50 transition-colors">
+                                        <Checkbox
+                                            id={account.id}
+                                            checked={selectedPlatforms.includes(account.id)}
+                                            onCheckedChange={() => togglePlatform(account.id)}
+                                            disabled={uploading}
+                                        />
+                                        <Label htmlFor={account.id} className="flex items-center gap-2 cursor-pointer flex-1">
+                                            {account.provider === 'facebook' && <SiFacebook className="h-4 w-4 text-[#1877F2]" />}
+                                            {account.provider === 'linkedin' && <Linkedin className="h-4 w-4 text-[#0A66C2] fill-current" />}
+                                            {account.provider === 'youtube' && <SiYoutube className="h-4 w-4 text-[#FF0000]" />}
+                                            <span className="truncate">{account.name || account.provider}</span>
+                                        </Label>
+                                    </div>
+                                ))
+                            )}
+                        </CardContent>
+                    </Card>
+
+                    {/* Scheduling Card */}
+                    <Card>
+                        <CardHeader>
+                            <CardTitle className="text-lg">Scheduling</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="flex flex-col gap-2">
+                                <Label>Publish Date & Time (Optional)</Label>
+                                <Popover>
+                                    <PopoverTrigger asChild>
+                                        <Button
+                                            variant={"outline"}
+                                            className={cn(
+                                                "w-full justify-start text-left font-normal",
+                                                !scheduledDate && "text-muted-foreground"
+                                            )}
+                                        >
+                                            <CalendarIcon className="mr-2 h-4 w-4" />
+                                            {scheduledDate ? format(scheduledDate, "PPP p") : <span>Pick a date</span>}
+                                        </Button>
+                                    </PopoverTrigger>
+                                    <PopoverContent className="w-auto p-0">
+                                        <Calendar
+                                            mode="single"
+                                            selected={scheduledDate}
+                                            onSelect={setScheduledDate}
+                                            initialFocus
+                                        />
+                                        <div className="p-3 border-t">
+                                            <Input
+                                                type="time"
+                                                onChange={(e) => {
+                                                    const date = scheduledDate || new Date();
+                                                    const [hours, minutes] = e.target.value.split(':');
+                                                    date.setHours(parseInt(hours), parseInt(minutes));
+                                                    setScheduledDate(new Date(date));
+                                                }}
+                                            />
+                                        </div>
+                                    </PopoverContent>
+                                </Popover>
+                                {scheduledDate && (
+                                    <Button variant="ghost" size="sm" onClick={() => setScheduledDate(undefined)} className="text-muted-foreground h-auto p-0">
+                                        Clear Schedule
+                                    </Button>
+                                )}
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    {/* Submit Button */}
+                    <div className="flex flex-col gap-2">
+                        <Button
+                            size="lg"
+                            className="w-full"
+                            onClick={handleSubmit}
+                            disabled={uploading || selectedPlatforms.length === 0}
+                        >
+                            {uploading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                            {uploading ? "Processing..." : (scheduledDate ? `Schedule Post` : "Post Now")}
+                        </Button>
+                        <p className="text-xs text-center text-muted-foreground">
+                            {scheduledDate ? "Post will be saved internally and published at the scheduled time." : "Post will be published immediately to selected platforms."}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
 }

app/dashboard/social/posts/new/post-creator-form.tsx

@@ -11,6 +11,7 @@ import { toast } from "sonner";
 import { useRouter } from "next/navigation";
 import { Loader2, ArrowLeft } from "lucide-react";
 import Link from "next/link";
+import Image from "next/image";
 // If DatePicker doesn't exist, we'll use input type="datetime-local" for MVP.
 
 interface ConnectedAccount {
@@ -131,8 +132,9 @@ export function PostCreatorForm({ accounts }: PostCreatorFormProps) {
                             onChange={(e) => setImageUrl(e.target.value)}
                         />
                         {imageUrl && (
-                            // eslint-disable-next-line @next/next/no-img-element
-                            <img src={imageUrl} alt="Preview" className="w-full h-48 object-cover rounded mt-2 border" />
+                            <div className="relative w-full h-48 mt-2 rounded border overflow-hidden">
+                                <Image src={imageUrl} alt="Preview" fill className="object-cover" unoptimized />
+                            </div>
                         )}
                         <p className="text-xs text-muted-foreground">Direct link to image (JPG/PNG)</p>
                     </div>

app/dashboard/workflows/builder/[id]/page.tsx

@@ -46,13 +46,8 @@ export default function WorkflowBuilderPage() {
         init();
     }, [params.id, get, router, toast]);
 
-    const [isManualSaving, setIsManualSaving] = useState(false);
-
-    const handleSave = async (nodes: Node<NodeData>[], edges: Edge[], options?: { isAutoSave?: boolean }) => {
+    const handleSave = async (nodes: Node<NodeData>[], edges: Edge[]) => {
         const isNew = params.id === "new";
-        const isAutoSave = options?.isAutoSave;
-
-        if (!isAutoSave) setIsManualSaving(true);
 
         const workflowData = {
             ...workflow,
@@ -60,36 +55,29 @@ export default function WorkflowBuilderPage() {
             edges,
         };
 
-        const apiOptions = isAutoSave ? { skipNotification: true } : undefined;
-
         let result;
         if (isNew) {
-            result = await post<{ workflow: AutomationWorkflow }>("/api/workflows", workflowData, apiOptions);
+            result = await post<{ workflow: AutomationWorkflow }>("/api/workflows", workflowData);
         } else {
-            result = await patch<{ workflow: AutomationWorkflow }>(`/api/workflows/${params.id}`, workflowData, apiOptions);
+            result = await patch<{ workflow: AutomationWorkflow }>(`/api/workflows/${params.id}`, workflowData);
         }
 
         if (result && result.workflow) {
-            if (!isAutoSave) {
-                toast({
-                    title: "Success",
-                    description: "Workflow saved successfully",
-                });
-            }
-
+            toast({
+                title: "Success",
+                description: "Workflow saved successfully",
+            });
             if (isNew && result.workflow.id) {
                 // Update URL without reloading so we stay in edit mode
                 router.replace(`/dashboard/workflows/builder/${result.workflow.id}`);
             }
-        } else if (!isAutoSave) {
+        } else {
             toast({
                 title: "Error",
                 description: "Failed to save workflow",
                 variant: "destructive",
             });
         }
-
-        if (!isAutoSave) setIsManualSaving(false);
     };
 
     const [isSettingsOpen, setIsSettingsOpen] = useState(false);
@@ -138,7 +126,7 @@ export default function WorkflowBuilderPage() {
                         disabled={loading}
                         className="w-full sm:w-auto"
                     >
-                        {isManualSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                        {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                         Save Workflow
                     </Button>
                 </div>

components/dashboard/business-table.tsx

@@ -15,10 +15,13 @@ import { Mail, ExternalLink, MoreHorizontal } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
 
 
+import { Skeleton } from "@/components/ui/skeleton";
+
 interface BusinessTableProps {
   businesses: Business[];
   onViewDetails: (business: Business) => void;
   onSendEmail: (business: Business) => void;
+  isLoading?: boolean;
 }
 
 export function BusinessTable({
@@ -27,6 +30,7 @@ export function BusinessTable({
   onSendEmail,
   selectedIds = [],
   onSelectionChange,
+  isLoading = false,
 }: BusinessTableProps & {
   selectedIds?: string[];
   onSelectionChange?: (ids: string[]) => void;
@@ -62,6 +66,46 @@ export function BusinessTable({
     }
   };
 
+  if (isLoading) {
+    return (
+      <div className="w-full">
+        <div className="flex items-center py-4">
+          {/* Optional header skeleton if needed, but table structure usually suffices */}
+        </div>
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[50px]"><Skeleton className="h-4 w-4" /></TableHead>
+                <TableHead>Business Name</TableHead>
+                <TableHead>Website</TableHead>
+                <TableHead>Email</TableHead>
+                <TableHead>Phone</TableHead>
+                <TableHead>Category</TableHead>
+                <TableHead>Email Status</TableHead>
+                <TableHead>Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {Array.from({ length: 5 }).map((_, i) => (
+                <TableRow key={i}>
+                  <TableCell><Skeleton className="h-4 w-4" /></TableCell>
+                  <TableCell><Skeleton className="h-4 w-[150px]" /></TableCell>
+                  <TableCell><Skeleton className="h-4 w-[100px]" /></TableCell>
+                  <TableCell><Skeleton className="h-4 w-[120px]" /></TableCell>
+                  <TableCell><Skeleton className="h-4 w-[100px]" /></TableCell>
+                  <TableCell><Skeleton className="h-4 w-[80px]" /></TableCell>
+                  <TableCell><Skeleton className="h-6 w-[70px] rounded-full" /></TableCell>
+                  <TableCell><Skeleton className="h-8 w-[80px]" /></TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <Table>
       <TableHeader>
@@ -85,7 +129,14 @@ export function BusinessTable({
         </TableRow>
       </TableHeader>
       <TableBody>
-        {businesses.map((business) => (
+        {businesses.length === 0 ? (
+          <TableRow>
+            <TableCell colSpan={8} className="h-24 text-center">
+              No businesses found.
+            </TableCell>
+          </TableRow>
+        ) : (
+          businesses.map((business) => (
           <TableRow key={business.id}>
             {onSelectionChange && (
               <TableCell>
@@ -154,7 +205,7 @@ export function BusinessTable({
               </div>
             </TableCell>
           </TableRow>
-        ))}
+        )))}
       </TableBody>
     </Table>
   );

components/dashboard/sidebar.tsx

@@ -15,6 +15,7 @@ import {
   FileText,
   CheckSquare,
   Share2,
+  Search,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useState } from "react";
@@ -27,6 +28,7 @@ import { toast } from "sonner";
 const navigation = [
   { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
   { name: "Businesses", href: "/dashboard/businesses", icon: Building2 },
+  { name: "Scraper", href: "/dashboard/scraper", icon: Search },
   { name: "Workflows", href: "/dashboard/workflows", icon: Workflow },
   { name: "Templates", href: "/dashboard/templates", icon: Mail },
   { name: "Analytics", href: "/dashboard/analytics", icon: FileText },

components/dashboard/user-nav.tsx

@@ -24,7 +24,7 @@ export function UserNav() {
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" className="relative h-8 w-8 hover:scale-110 rounded-full cursor-pointer">
           <Avatar className="h-8 w-8">
-            <AvatarImage src={user?.image || ""} alt={user?.name || ""} />
+            <AvatarImage src={user?.image || undefined} alt={user?.name || ""} />
             <AvatarFallback>{user?.name?.charAt(0) || "U"}</AvatarFallback>
           </Avatar>
         </Button>

components/mobile-nav.tsx

@@ -1,30 +1,24 @@
 "use client";
 
 import { useState } from "react";
-import { X, Menu, LogOut } from "lucide-react";
+import { Menu, LogOut, LayoutDashboard, Building2, Workflow, Mail, FileText, CheckSquare, Settings, Share2, Search } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import {
-  LayoutDashboard,
-  Building2,
-  Workflow,
-  Mail,
-  Settings,
-  FileText,
-  CheckSquare
-} from "lucide-react";
+import { Sheet, SheetContent, SheetTrigger, SheetHeader, SheetTitle } from "@/components/ui/sheet";
 import { BuyCoffeeWidget } from "@/components/buy-coffee-widget";
 import { SignOutModal } from "@/components/sign-out-modal";
 
 const navigation = [
   { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
   { name: "Businesses", href: "/dashboard/businesses", icon: Building2 },
+  { name: "Scraper", href: "/dashboard/scraper", icon: Search },
   { name: "Workflows", href: "/dashboard/workflows", icon: Workflow },
   { name: "Templates", href: "/dashboard/templates", icon: Mail },
   { name: "Analytics", href: "/dashboard/analytics", icon: FileText },
   { name: "Tasks", href: "/dashboard/tasks", icon: CheckSquare },
+  { name: "Social Suite", href: "/dashboard/social", icon: Share2 },
   { name: "Settings", href: "/dashboard/settings", icon: Settings },
 ];
 
@@ -35,85 +29,63 @@ export function MobileNav() {
 
   return (
     <>
-      <Button
-        variant="ghost"
-        size="icon"
-        className="md:hidden cursor-pointer"
-        onClick={() => setIsOpen(true)}
-      >
-        <Menu className="h-6 w-6" />
-      </Button>
-
-      {/* Overlay */}
-      {isOpen && (
-        <div
-          className="fixed inset-0 bg-black/50 z-50 md:hidden"
-          onClick={() => setIsOpen(false)}
-        />
-      )}
-
-      {/* Drawer */}
-      <div
-        className={cn(
-          "fixed top-0 left-0 bottom-0 w-72 bg-background border-r z-50 transform transition-transform duration-300 ease-in-out md:hidden flex flex-col h-dvh",
-          isOpen ? "translate-x-0" : "-translate-x-full"
-        )}
-      >
-        <div className="flex items-center justify-between p-4 border-b shrink-0">
-          <div className="flex items-center gap-2">
-            <div className="h-8 w-8 rounded-lg bg-linear-to-br from-blue-600 to-purple-600 flex items-center justify-center text-white font-bold text-lg">
-              A
-            </div>
-            <span className="text-xl font-bold bg-linear-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-              AutoLoop
-            </span>
-          </div>
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={() => setIsOpen(false)}
-            className="cursor-pointer"
-          >
-            <X className="h-5 w-5" />
+      <Sheet open={isOpen} onOpenChange={setIsOpen}>
+        <SheetTrigger asChild>
+          <Button variant="ghost" size="icon" className="md:hidden">
+            <Menu className="h-6 w-6" />
           </Button>
-        </div>
+        </SheetTrigger>
+        <SheetContent side="left" className="w-72 p-0 flex flex-col">
+          <SheetHeader className="p-4 border-b text-left">
+            <SheetTitle className="flex items-center gap-2">
+              <div className="h-8 w-8 rounded-lg bg-linear-to-br from-blue-600 to-purple-600 flex items-center justify-center text-white font-bold text-lg">
+                A
+              </div>
+              <span className="text-xl font-bold bg-linear-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+                AutoLoop
+              </span>
+            </SheetTitle>
+          </SheetHeader>
 
-        <nav className="flex-1 overflow-y-auto p-4 space-y-1">
-          {navigation.map((item) => {
-            const isActive = pathname === item.href;
-            const Icon = item.icon;
-            return (
-              <Link
-                key={item.name}
-                href={item.href}
-                onClick={() => setIsOpen(false)}
-                className={cn(
-                  "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors",
-                  isActive
-                    ? "bg-primary text-primary-foreground"
-                    : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-                )}
-              >
-                <Icon className="h-5 w-5 shrink-0" />
-                {item.name}
-              </Link>
-            );
-          })}
-        </nav>
+          <nav className="flex-1 overflow-y-auto p-4 space-y-1">
+            {navigation.map((item) => {
+              const isActive = pathname === item.href;
+              const Icon = item.icon;
+              return (
+                <Link
+                  key={item.name}
+                  href={item.href}
+                  onClick={() => setIsOpen(false)}
+                  className={cn(
+                    "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors",
+                    isActive
+                      ? "bg-primary text-primary-foreground"
+                      : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                  )}
+                >
+                  <Icon className="h-5 w-5 shrink-0" />
+                  {item.name}
+                </Link>
+              );
+            })}
+          </nav>
 
-        {/* Footer Section */}
-        <div className="p-4 border-t space-y-4 bg-background shrink-0">
-          <BuyCoffeeWidget />
-          <Button
-            variant="ghost"
-            className="w-full justify-start cursor-pointer text-muted-foreground hover:text-foreground hover:bg-accent"
-            onClick={() => setShowSignOutModal(true)}
-          >
-            <LogOut className="h-5 w-5 mr-3 shrink-0" />
-            Sign Out
-          </Button>
-        </div>
-      </div>
+          <div className="p-4 border-t space-y-4 bg-background">
+            <BuyCoffeeWidget />
+            <Button
+              variant="ghost"
+              className="w-full justify-start cursor-pointer text-muted-foreground hover:text-foreground hover:bg-accent"
+              onClick={() => {
+                setIsOpen(false);
+                setShowSignOutModal(true);
+              }}
+            >
+              <LogOut className="h-5 w-5 mr-3 shrink-0" />
+              Sign Out
+            </Button>
+          </div>
+        </SheetContent>
+      </Sheet>
 
       <SignOutModal
         isOpen={showSignOutModal}
@@ -122,3 +94,4 @@ export function MobileNav() {
     </>
   );
 }
+

components/node-editor/node-editor.tsx

@@ -86,7 +86,7 @@ export interface NodeData {
 interface NodeEditorProps {
   initialNodes?: Node<NodeData>[];
   initialEdges?: Edge[];
-  onSave?: (nodes: Node<NodeData>[], edges: Edge[], options?: { isAutoSave?: boolean }) => void;
+  onSave?: (nodes: Node<NodeData>[], edges: Edge[]) => void;
   isSaving?: boolean;
   workflowId?: string;
 }
@@ -188,29 +188,11 @@ export function NodeEditor({
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [handleUndo, handleRedo, onSave, nodes, edges, toast]);
 
-  // Auto-Save
-  const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const [isAutoSaving, setIsAutoSaving] = useState(false);
+  // Auto-Save Removed
+  // const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  // const [isAutoSaving, setIsAutoSaving] = useState(false);
 
-  useEffect(() => {
-    if (!onSave) return;
-
-    // Clear previous timeout
-    if (saveTimeoutRef.current) {
-      clearTimeout(saveTimeoutRef.current);
-    }
-
-    // Capture changes for auto-save
-    setIsAutoSaving(true);
-    saveTimeoutRef.current = setTimeout(() => {
-      onSave(nodes, edges, { isAutoSave: true });
-      setIsAutoSaving(false);
-    }, 2000); // 2 second debounce
-
-    return () => {
-      if (saveTimeoutRef.current) clearTimeout(saveTimeoutRef.current);
-    };
-  }, [nodes, edges, onSave]);
+  // useEffect(() => { ... }) code removed
 
   // Paste node handler - using ref to avoid hoisting issues
   const handlePasteNodeRef = useRef<(() => void) | null>(null);
@@ -690,7 +672,7 @@ export function NodeEditor({
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button onClick={handleSave} size="icon" variant="outline" disabled={isSaving}>
-                      {(isSaving || isAutoSaving) ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
+                      {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>Save Workflow</TooltipContent>

components/settings/social-settings.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Share2, AlertCircle, CheckCircle2, RefreshCw, Linkedin } from "lucide-react";
+import { SiFacebook, SiInstagram, SiYoutube } from "@icons-pack/react-simple-icons";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+
+interface ConnectedAccount {
+  id: string;
+  userId: string;
+  provider: string; // 'facebook', 'linkedin', etc.
+  providerAccountId: string;
+  name?: string | null;
+  picture?: string | null;
+  accessToken?: string | null;
+  expiresAt?: Date | null;
+}
+
+interface SocialSettingsProps {
+  connectedAccounts: ConnectedAccount[];
+}
+
+export function SocialSettings({ connectedAccounts }: SocialSettingsProps) {
+  const searchParams = useSearchParams();
+  const error = searchParams.get("error");
+  const success = searchParams.get("success");
+
+  const fbAccount = connectedAccounts.find((a) => a.provider === "facebook");
+  const linkedinAccount = connectedAccounts.find((a) => a.provider === "linkedin");
+  const youtubeAccount = connectedAccounts.find((a) => a.provider === "youtube");
+
+  return (
+    <div className="space-y-6">
+      {error && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>
+            {error === "access_denied"
+              ? "You denied access. Please try again and accept permissions."
+              : error}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {success && (
+        <Alert className="border-green-500 text-green-600 bg-green-50">
+          <CheckCircle2 className="h-4 w-4" />
+          <AlertTitle>Success</AlertTitle>
+          <AlertDescription>Account connected successfully!</AlertDescription>
+        </Alert>
+      )}
+
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* Facebook & Instagram */}
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-xl font-medium">Facebook & Instagram</CardTitle>
+            <div className="flex gap-1">
+              <SiFacebook className="h-6 w-6 text-[#1877F2]" />
+              <SiInstagram className="h-6 w-6 text-[#E4405F]" />
+            </div>
+          </CardHeader>
+          <CardContent>
+            {fbAccount ? (
+              <div className="flex flex-col gap-4 mt-4">
+                <div className="flex items-center gap-3">
+                  {fbAccount.picture ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={fbAccount.picture}
+                      alt={fbAccount.name || "Profile"}
+                      className="w-10 h-10 rounded-full"
+                    />
+                  ) : (
+                    <div className="w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center">
+                      <span className="text-lg font-bold text-slate-500">
+                        {fbAccount.name?.charAt(0)}
+                      </span>
+                    </div>
+                  )}
+                  <div>
+                    <p className="font-medium">{fbAccount.name}</p>
+                    <p className="text-xs text-muted-foreground">
+                      Connected as {fbAccount.providerAccountId}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2 text-sm text-green-600 bg-green-50 p-2 rounded border border-green-100">
+                  <CheckCircle2 className="h-4 w-4" />
+                  Connected & Active
+                </div>
+                <Button variant="outline" className="w-full gap-2" asChild>
+                  <Link href="/api/social/connect/facebook">
+                    <RefreshCw className="h-4 w-4" /> Reconnect / Refresh
+                  </Link>
+                </Button>
+              </div>
+            ) : (
+              <div className="flex flex-col gap-4 mt-4">
+                <p className="text-sm text-muted-foreground">
+                  Connect to manage Facebook Pages and Instagram Business accounts.
+                </p>
+                <Button className="w-full bg-[#1877F2] hover:bg-[#1864D9]" asChild>
+                  <Link href="/api/social/connect/facebook">
+                    Connect Facebook
+                  </Link>
+                </Button>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* LinkedIn */}
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-xl font-medium">LinkedIn</CardTitle>
+            <Linkedin className="h-6 w-6 text-[#0A66C2] fill-current" />
+          </CardHeader>
+          <CardContent>
+            {linkedinAccount ? (
+              <div className="flex flex-col gap-4 mt-4">
+                <div className="flex items-center gap-3">
+                  {linkedinAccount.picture ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={linkedinAccount.picture}
+                      alt={linkedinAccount.name || "Profile"}
+                      className="w-10 h-10 rounded-full"
+                    />
+                  ) : (
+                    <div className="w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center">
+                      <span className="text-lg font-bold text-slate-500">
+                        {linkedinAccount.name?.charAt(0)}
+                      </span>
+                    </div>
+                  )}
+                  <div>
+                    <p className="font-medium">{linkedinAccount.name}</p>
+                    <p className="text-xs text-muted-foreground">
+                      Connected as {linkedinAccount.providerAccountId}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2 text-sm text-green-600 bg-green-50 p-2 rounded border border-green-100">
+                  <CheckCircle2 className="h-4 w-4" />
+                  Connected & Active
+                </div>
+                <Button variant="outline" className="w-full gap-2" asChild>
+                  <Link href="/api/social/connect/linkedin">
+                    <RefreshCw className="h-4 w-4" /> Reconnect / Refresh
+                  </Link>
+                </Button>
+              </div>
+            ) : (
+              <div className="flex flex-col gap-4 mt-4">
+                <p className="text-sm text-muted-foreground">
+                  Connect LinkedIn to create posts and manage your profile.
+                </p>
+                <Button className="w-full bg-[#0A66C2] hover:bg-[#004182]" asChild>
+                  <Link href="/api/social/connect/linkedin">
+                    Connect LinkedIn
+                  </Link>
+                </Button>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* YouTube */}
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-xl font-medium">YouTube</CardTitle>
+            <SiYoutube className="h-6 w-6 text-[#FF0000]" />
+          </CardHeader>
+          <CardContent>
+            {youtubeAccount ? (
+              <div className="flex flex-col gap-4 mt-4">
+                <div className="flex items-center gap-3">
+                  {youtubeAccount.picture ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={youtubeAccount.picture}
+                      alt={youtubeAccount.name || "Profile"}
+                      className="w-10 h-10 rounded-full"
+                    />
+                  ) : (
+                    <div className="w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center">
+                      <span className="text-lg font-bold text-slate-500">
+                        {youtubeAccount.name?.charAt(0)}
+                      </span>
+                    </div>
+                  )}
+                  <div>
+                    <p className="font-medium">{youtubeAccount.name}</p>
+                    <p className="text-xs text-muted-foreground">
+                      Connected as {youtubeAccount.providerAccountId}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2 text-sm text-green-600 bg-green-50 p-2 rounded border border-green-100">
+                  <CheckCircle2 className="h-4 w-4" />
+                  Connected & Active
+                </div>
+                <Button variant="outline" className="w-full gap-2" asChild>
+                  <Link href="/api/social/connect/youtube">
+                    <RefreshCw className="h-4 w-4" /> Reconnect / Refresh
+                  </Link>
+                </Button>
+              </div>
+            ) : (
+              <div className="flex flex-col gap-4 mt-4">
+                <p className="text-sm text-muted-foreground">
+                  Connect YouTube to upload videos and view analytics.
+                </p>
+                <Button className="w-full bg-[#FF0000] hover:bg-[#CC0000]" asChild>
+                  <Link href="/api/social/connect/youtube">
+                    Connect YouTube
+                  </Link>
+                </Button>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

components/ui/calendar.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" {...props} />,
+        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" {...props} />,
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }

components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

db/schema/index.ts

@@ -237,6 +237,10 @@ export const socialPosts = pgTable("social_posts", {
   userId: text("user_id").notNull().references(() => users.id, { onDelete: "cascade" }),
   connectedAccountId: text("connected_account_id").references(() => connectedAccounts.id, { onDelete: "set null" }),
   content: text("content"),
+  title: text("title"),
+  thumbnailUrl: text("thumbnail_url"),
+  tags: jsonb("tags").$type<string[]>(),
+  category: text("category"),
   mediaUrls: jsonb("media_urls").$type<string[]>(),
   scheduledAt: timestamp("scheduled_at"),
   status: varchar("status", { length: 20 }).default("draft").notNull(), // 'draft', 'scheduled', 'published', 'failed'

lib/gemini.ts

@@ -6,10 +6,13 @@ import { db } from "@/db";
 import { users } from "@/db/schema";
 import { eq } from "drizzle-orm";
 
-async function getEffectiveApiKey(providedKey?: string): Promise<string | undefined> {
+// Standardize models across the app (newest to oldest/most stable)
+export const GEMINI_MODELS = ["gemini-3-flash-preview", "gemini-2.0-flash", "gemini-1.5-flash", "gemini-1.5-pro"];
+
+export async function getEffectiveApiKey(providedKey?: string): Promise<string | undefined> {
   if (providedKey) return providedKey;
-  if (process.env.GEMINI_API_KEY) return process.env.GEMINI_API_KEY;
 
+  // Try fetching from DB first (User preference overrides global env)
   try {
     const session = await auth();
     if (session?.user?.id) {
@@ -22,6 +25,10 @@ async function getEffectiveApiKey(providedKey?: string): Promise<string | undefi
   } catch (error) {
     console.warn("Failed to fetch Gemini API key from DB:", error);
   }
+
+  // Fallback to environment variable
+  if (process.env.GEMINI_API_KEY) return process.env.GEMINI_API_KEY;
+
   return undefined;
 }
 
@@ -31,16 +38,15 @@ export async function generateEmailTemplate(
   apiKey?: string
 ): Promise<{ subject: string; body: string }> {
   try {
-    const key = apiKey || process.env.GEMINI_API_KEY;
-    if (!key) throw new Error("No Gemini API key provided");
+    const key = await getEffectiveApiKey(apiKey);
+    if (!key) throw new Error("No Gemini API key provided. Please configure it in settings or .env");
 
     const client = new GoogleGenerativeAI(key);
 
     // Models to try in order of preference
-    const models = ["gemini-3-flash-preview", "gemini-2.0-flash"]; /* "gemini-2.0-flash-exp" is also common, but sticking to user request */
     let lastError;
 
-    for (const modelName of models) {
+    for (const modelName of GEMINI_MODELS) {
       try {
         const model = client.getGenerativeModel({ model: modelName });
 
@@ -112,16 +118,15 @@ export async function evaluateCondition(
  */
 export async function generateAIContent(prompt: string, apiKey?: string): Promise<string> {
   try {
-    const key = apiKey || process.env.GEMINI_API_KEY;
+    const key = await getEffectiveApiKey(apiKey);
     if (!key) {
       throw new Error("Gemini API key not configured");
     }
 
     const genAI = new GoogleGenerativeAI(key);
-    const models = ["gemini-3-flash-preview", "gemini-2.0-flash"];
     let lastError;
 
-    for (const modelName of models) {
+    for (const modelName of GEMINI_MODELS) {
       try {
         const model = genAI.getGenerativeModel({ model: modelName });
 
@@ -152,17 +157,16 @@ export async function generateWorkflowFromPrompt(
   apiKey?: string
 ): Promise<{ nodes: Node[]; edges: Edge[] }> {
   try {
-    const key = apiKey || process.env.GEMINI_API_KEY;
+    const key = await getEffectiveApiKey(apiKey);
     if (!key) {
       throw new Error("Gemini API key not configured");
     }
 
     const genAI = new GoogleGenerativeAI(key);
     // Models to try in order
-    const models = ["gemini-3-flash-preview", "gemini-2.0-flash", "gemini-1.5-flash", "gemini-1.5-pro"];
     let lastError;
 
-    for (const modelName of models) {
+    for (const modelName of GEMINI_MODELS) {
       try {
         const model = genAI.getGenerativeModel({ model: modelName });
 

lib/social/publisher.ts

@@ -1,113 +1,270 @@
+import fs from "fs";
+import path from "path";
+import { google } from "googleapis";
+import { Readable } from "stream";
 
-interface PublishParams {
-  accessToken: string;
-  providerAccountId: string; // Page ID for FB, IG Business User ID for IG
-  content?: string;
-  mediaUrls?: string[];
+export interface SocialPostPayload {
+    content: string;
+    mediaUrl?: string; // Relative path like "/uploads/xyz.jpg"
+    accessToken: string;
+    providerAccountId: string;
+    refreshToken?: string; // Needed for YouTube
 }
 
-export async function publishToFacebook({ accessToken, providerAccountId, content, mediaUrls }: PublishParams) {
-  // For now, let's support text-only or single image for MVP simplification
-  // Multi-photo posts on Graph API require a staged upload flow (unpublished media -> attached to post)
+// Helper to get file stream
+const getFileStream = (mediaUrl: string) => {
+    // Assume mediaUrl is relative to public (e.g. /uploads/file.jpg)
+    // Remove query params if any
+    const cleanPath = mediaUrl.split('?')[0]; 
+    const filePath = path.join(process.cwd(), "public", cleanPath);
+    if (!fs.existsSync(filePath)) {
+        throw new Error(`File not found at ${filePath}`);
+    }
+    return {
+        stream: fs.createReadStream(filePath),
+        size: fs.statSync(filePath).size,
+        path: filePath,
+        mimeType: cleanPath.endsWith(".mp4") ? "video/mp4" : cleanPath.endsWith(".png") ? "image/png" : "image/jpeg"
+    };
+};
 
-  const pageId = providerAccountId;
-  let endpoint = `https://graph.facebook.com/v19.0/${pageId}/feed`;
-  const params = new URLSearchParams({ access_token: accessToken });
+export const socialPublisher = {
+    publishToFacebook: async (payload: SocialPostPayload) => {
+        const { content, mediaUrl, accessToken, providerAccountId } = payload;
+        
+        const params: any = new FormData();
+        params.append("access_token", accessToken);
+        
+        let url = `https://graph.facebook.com/v21.0/${providerAccountId}/feed`;
+        
+        if (mediaUrl) {
+            const file = getFileStream(mediaUrl);
+            const isVideo = file.mimeType.startsWith("video");
+            
+            if (isVideo) {
+                 url = `https://graph.facebook.com/v21.0/${providerAccountId}/videos`;
+                 params.append("description", content);
+           
+                 params.append("source", new Blob([fs.readFileSync(file.path)]), path.basename(file.path));
+            } else {
+                 url = `https://graph.facebook.com/v21.0/${providerAccountId}/photos`;
+                 params.append("message", content);
+           
+                 params.append("source", new Blob([fs.readFileSync(file.path)]), path.basename(file.path));
+            }
+        } else {
+            params.append("message", content);
+        }
 
-  if (content) params.append("message", content);
+        const res = await fetch(url, {
+            method: "POST",
+            body: params, 
+        });
 
-  if (mediaUrls && mediaUrls.length > 0) {
-    // If photos, use /photos endpoint for single photo
-    // TODO: Support multi-photo
-    endpoint = `https://graph.facebook.com/v19.0/${pageId}/photos`;
-    params.append("url", mediaUrls[0]);
-    if (content) params.append("caption", content); // FB photos use 'caption' not 'message'
-  }
+        const data = await res.json();
+        if (data.error) throw new Error(data.error.message);
+        return data.id;
+    },
 
-  const res = await fetch(`${endpoint}?${params.toString()}`, { method: "POST" });
-  const data = await res.json();
+    publishToInstagram: async (payload: SocialPostPayload) => {
+        // IG still requires public URL for 'image_url' or 'video_url' in Content Publishing API usually.
+        // However, for strict binary upload, we might need to use the graph API slightly differently or rely on a public URL.
+        // Since we are running locally, "localhost" urls won't work for IG to download.
+        // BUT, we can use the "Upload API" if we were using the Instagram Graph API for Stories etc, but for Feed it primarily asks for URL.
+        
+        // CRITICAL LIMITATION: Instagram Graph API *requires* the image/video to be on a public URL. It does NOT support binary upload for feed posts easily like FB.
+        // Workaround: We must warn the user if on localhost.
+        // OR: If we really want "real business suite", we'd upload to a temporary Image hosting service or S3.
+        // For this task, we will try to use the binary upload endpoint valid for *Stories* or *Reels* if applicable, but for generic posts it's tricky.
+        // ACTUALLY: The "Container" endpoint only accepts 'image_url'.
+        
+        // Strategy: Throw error if URL is localhost, prompt to use ngrok or deploy.
+        const { content, mediaUrl, accessToken, providerAccountId } = payload;
+        
+        if (!mediaUrl) throw new Error("Instagram posts require media");
+        
+        // Check for localhost
+        // Use process.env.NEXT_PUBLIC_APP_URL
+        const appUrl = process.env.NEXT_PUBLIC_APP_URL || "";
+        if (appUrl.includes("localhost") || appUrl.includes("127.0.0.1")) {
+            throw new Error("Instagram Direct Publishing requires a publically accessible Media URL. Localhost is not supported by Meta. Please deploy the app or use ngrok.");
+        }
 
-  if (data.error) {
-    throw new Error(data.error.message);
-  }
+        // Logic remains same as URL based for IG because it enforces it.
+        // ... (previous logic) ...
+         const containerUrl = `https://graph.facebook.com/v21.0/${providerAccountId}/media`;
+         const fullUrl = mediaUrl.startsWith("http") ? mediaUrl : `${appUrl}${mediaUrl}`;
 
-  return { id: data.id || data.post_id };
-}
+         const containerParams: any = {
+            access_token: accessToken,
+            caption: content,
+        };
 
+        if (mediaUrl.match(/\.(jpg|jpeg|png)$/i)) {
+             containerParams.image_url = fullUrl;
+        } else if (mediaUrl.match(/\.(mp4|mov)$/i)) {
+             containerParams.media_type = "VIDEO";
+             containerParams.video_url = fullUrl;
+        }
 
-export async function publishToInstagram({ accessToken, providerAccountId, content, mediaUrls }: PublishParams) {
-  // Instagram requires: 1. Create Container, 2. Publish Container
-  const igUserId = providerAccountId;
+        const containerRes = await fetch(containerUrl, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(containerParams),
+        });
+        const containerData = await containerRes.json();
+        if (containerData.error) throw new Error(containerData.error.message);
+        
+        const creationId = containerData.id;
 
-  if (!mediaUrls || mediaUrls.length === 0) {
-    throw new Error("Instagram posts require at least one image/video.");
-  }
+        // Step 2: Publish
+        const publishUrl = `https://graph.facebook.com/v21.0/${providerAccountId}/media_publish`;
+        const publishRes = await fetch(publishUrl, {
+             method: "POST",
+             headers: { "Content-Type": "application/json" },
+             body: JSON.stringify({
+                 creation_id: creationId,
+                 access_token: accessToken
+             }),
+        });
+        const publishData = await publishRes.json();
+        if (publishData.error) throw new Error(publishData.error.message);
+        return publishData.id;
+    },
 
-  const imageUrl = mediaUrls[0]; // Single image for MVP
+    publishToLinkedin: async (payload: SocialPostPayload) => {
+        const { content, mediaUrl, accessToken, providerAccountId } = payload;
+        
+        let asset = null;
 
-  // Step 1: Create Container
-  // https://graph.facebook.com/v19.0/{ig-user-id}/media
-  const containerParams = new URLSearchParams({
-    access_token: accessToken,
-    image_url: imageUrl,
-  });
-  if (content) containerParams.append("caption", content);
+        if (mediaUrl) {
+            const file = getFileStream(mediaUrl);
+            
+            // 1. Register Upload
+            const registerUrl = "https://api.linkedin.com/v2/assets?action=registerUpload";
+            const registerBody = {
+                registerUploadRequest: {
+                    recipes: [
+                        "urn:li:digitalmediaRecipe:feedshare-image" // Simplified for image
+                    ],
+                    owner: `urn:li:person:${providerAccountId}`,
+                    serviceRelationships: [
+                        {
+                            relationshipType: "OWNER",
+                            identifier: "urn:li:userGeneratedContent"
+                        }
+                    ]
+                }
+            };
+            // Note: Video recipe is 'urn:li:digitalmediaRecipe:feedshare-video'
+            if (file.mimeType.startsWith("video")) {
+                registerBody.registerUploadRequest.recipes = ["urn:li:digitalmediaRecipe:feedshare-video"];
+            }
 
-  const containerRes = await fetch(`https://graph.facebook.com/v19.0/${igUserId}/media?${containerParams.toString()}`, { method: "POST" });
-  const containerData = await containerRes.json();
+            const regRes = await fetch(registerUrl, {
+                method: "POST",
+                headers: { "Authorization": `Bearer ${accessToken}`, "Content-Type": "application/json" },
+                body: JSON.stringify(registerBody)
+            });
+            const regData = await regRes.json();
+            if (regData.status && regData.status !== 200) throw new Error("LinkedIn Register Failed: " + JSON.stringify(regData));
 
-  if (containerData.error) {
-    throw new Error(`IG Container Error: ${containerData.error.message}`);
-  }
+            const uploadUrl = regData.value.uploadMechanism["com.linkedin.digitalmedia.uploading.MediaUploadHttpRequest"].uploadUrl;
+            asset = regData.value.asset;
 
-  const containerId = containerData.id;
+            // 2. Upload Binary
+            const uploadRes = await fetch(uploadUrl, {
+                method: "PUT",
+                headers: { "Authorization": `Bearer ${accessToken}`, "Content-Type": "application/octet-stream" },
+                body: fs.readFileSync(file.path) 
+            });
+            
+            if (uploadRes.status !== 201 && uploadRes.status !== 200) {
+                 throw new Error("LinkedIn Binary Upload Failed");
+            }
+        }
 
-  // Step 2: Publish Container
-  // https://graph.facebook.com/v19.0/{ig-user-id}/media_publish
-  const publishParams = new URLSearchParams({
-    access_token: accessToken,
-    creation_id: containerId
-  });
+        // 3. Create Post
+        const url = "https://api.linkedin.com/v2/ugcPosts";
+        const body: any = {
+            author: `urn:li:person:${providerAccountId}`,
+            lifecycleState: "PUBLISHED",
+            specificContent: {
+                "com.linkedin.ugc.ShareContent": {
+                    shareCommentary: {
+                        text: content
+                    },
+                    shareMediaCategory: asset ? (mediaUrl?.match(/\.mp4$/) ? "VIDEO" : "IMAGE") : "NONE",
+                }
+            },
+            visibility: {
+                "com.linkedin.ugc.MemberNetworkVisibility": "PUBLIC"
+            }
+        };
 
-  const publishRes = await fetch(`https://graph.facebook.com/v19.0/${igUserId}/media_publish?${publishParams.toString()}`, { method: "POST" });
-  const publishData = await publishRes.json();
+        if (asset) {
+            body.specificContent["com.linkedin.ugc.ShareContent"].media = [
+                {
+                    status: "READY",
+                    description: { text: "Center stage!" },
+                    media: asset,
+                    title: { text: "Uploaded Media" }
+                }
+            ];
+        }
 
-  if (publishData.error) {
-    throw new Error(`IG Publish Error: ${publishData.error.message}`);
-  }
+        const res = await fetch(url, {
+             method: "POST",
+             headers: {
+                 "Authorization": `Bearer ${accessToken}`,
+                 "Content-Type": "application/json",
+                 "X-Restli-Protocol-Version": "2.0.0"
+             },
+             body: JSON.stringify(body)
+        });
 
+        const data = await res.json();
+        if (data.status && data.status !== 201) throw new Error(data.message || "Linkedin Post Failed");
+        return data.id;
+    },
 
-  return { id: publishData.id };
-}
+    publishToYoutube: async (payload: SocialPostPayload) => {
+         const { content, mediaUrl, accessToken, refreshToken } = payload;
+         
+         if (!mediaUrl) throw new Error("YouTube requires a video file.");
+         const file = getFileStream(mediaUrl);
 
-export async function replyToComment(commentId: string, message: string, accessToken: string) {
-  const res = await fetch(`https://graph.facebook.com/v19.0/${commentId}/comments`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({
-      message,
-      access_token: accessToken
-    })
-  });
-  const data = await res.json();
-  if (data.error) throw new Error(data.error.message);
-  return data;
-}
+         const oauth2Client = new google.auth.OAuth2(
+            process.env.GOOGLE_CLIENT_ID,
+            process.env.GOOGLE_CLIENT_SECRET
+         );
 
-export async function sendPrivateMessage(recipientId: string, message: string, accessToken: string) {
-  // For Pages messaging users (Messenger Platform)
-  // NOTE: This requires 'pages_messaging' permission
-  const res = await fetch(`https://graph.facebook.com/v19.0/me/messages`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({
-      recipient: { id: recipientId },
-      message: { text: message },
-      access_token: accessToken
-    })
-  });
-  const data = await res.json();
-  if (data.error) throw new Error(data.error.message);
-  return data;
-}
+         oauth2Client.setCredentials({
+             access_token: accessToken,
+             refresh_token: refreshToken
+         });
+
+         const youtube = google.youtube({
+             version: 'v3',
+             auth: oauth2Client
+         });
+
+         const res = await youtube.videos.insert({
+             part: ['snippet', 'status'],
+             requestBody: {
+                 snippet: {
+                     title: content.substring(0, 100), // Title is limited
+                     description: content,
+                 },
+                 status: {
+                     privacyStatus: 'public' // or private/unlisted
+                 }
+             },
+             media: {
+                 body: fs.createReadStream(file.path)
+             }
+         });
 
+         return res.data.id;
+    }
+};

package.json

@@ -28,6 +28,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@google/generative-ai": "^0.21.0",
     "@hookform/resolvers": "^3.9.1",
+    "@icons-pack/react-simple-icons": "^13.8.0",
     "@neondatabase/serverless": "^0.10.3",
     "@paralleldrive/cuid2": "^3.0.6",
     "@radix-ui/react-alert-dialog": "^1.1.15",
@@ -55,6 +56,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "cron-parser": "^5.5.0",
+    "date-fns": "^4.1.0",
     "dotenv": "^17.2.3",
     "drizzle-orm": "^0.37.0",
     "framer-motion": "^12.0.6",
@@ -70,6 +72,7 @@
     "puppeteer": "^24.35.0",
     "react": "19.2.3",
     "react-copy-to-clipboard": "^5.1.0",
+    "react-day-picker": "^8.10.1",
     "react-dom": "19.2.3",
     "react-hook-form": "^7.54.2",
     "reactflow": "^11.11.4",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       '@hookform/resolvers':
         specifier: ^3.9.1
         version: 3.10.0(react-hook-form@7.71.1(react@19.2.3))
+      '@icons-pack/react-simple-icons':
+        specifier: ^13.8.0
+        version: 13.8.0(react@19.2.3)
       '@neondatabase/serverless':
         specifier: ^0.10.3
         version: 0.10.4
@@ -104,6 +107,9 @@ importers:
       cron-parser:
         specifier: ^5.5.0
         version: 5.5.0
+      date-fns:
+        specifier: ^4.1.0
+        version: 4.1.0
       dotenv:
         specifier: ^17.2.3
         version: 17.2.3
@@ -149,6 +155,9 @@ importers:
       react-copy-to-clipboard:
         specifier: ^5.1.0
         version: 5.1.0(react@19.2.3)
+      react-day-picker:
+        specifier: ^8.10.1
+        version: 8.10.1(date-fns@4.1.0)(react@19.2.3)
       react-dom:
         specifier: 19.2.3
         version: 19.2.3(react@19.2.3)
@@ -1023,6 +1032,11 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
+  '@icons-pack/react-simple-icons@13.8.0':
+    resolution: {integrity: sha512-iZrhL1fSklfCCVn68IYHaAoKfcby3RakUTn2tRPyHBkhr2tkYqeQbjJWf+NizIYBzKBn2IarDJXmTdXd6CuEfw==}
+    peerDependencies:
+      react: ^16.13 || ^17 || ^18 || ^19
+
   '@img/colour@1.0.0':
     resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==}
     engines: {node: '>=18'}
@@ -3555,6 +3569,9 @@ packages:
     resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
     engines: {node: '>= 0.4'}
 
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
   debug@3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:
@@ -5437,6 +5454,12 @@ packages:
     peerDependencies:
       react: ^15.3.0 || 16 || 17 || 18
 
+  react-day-picker@8.10.1:
+    resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==}
+    peerDependencies:
+      date-fns: ^2.28.0 || ^3.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+
   react-dom@19.2.3:
     resolution: {integrity: sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==}
     peerDependencies:
@@ -6913,6 +6936,10 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
+  '@icons-pack/react-simple-icons@13.8.0(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+
   '@img/colour@1.0.0':
     optional: true
 
@@ -9741,6 +9768,8 @@ snapshots:
       es-errors: 1.3.0
       is-data-view: 1.0.2
 
+  date-fns@4.1.0: {}
+
   debug@3.2.7:
     dependencies:
       ms: 2.1.3
@@ -11986,6 +12015,11 @@ snapshots:
       prop-types: 15.8.1
       react: 19.2.3
 
+  react-day-picker@8.10.1(date-fns@4.1.0)(react@19.2.3):
+    dependencies:
+      date-fns: 4.1.0
+      react: 19.2.3
+
   react-dom@19.2.3(react@19.2.3):
     dependencies:
       react: 19.2.3

types/index.ts

@@ -121,3 +121,18 @@ export interface WorkflowExecutionContext {
   userId: string;
   workflowId: string;
 }
+
+export interface ConnectedAccount {
+  id: string;
+  userId: string;
+  provider: string;
+  providerAccountId: string;
+  accessToken?: string | null;
+  refreshToken?: string | null;
+  expiresAt?: Date | null;
+  name?: string | null;
+  email?: string | null;
+  metadata?: Record<string, unknown> | null;
+  createdAt: Date;
+  updatedAt: Date;
+}