feat: complete marketing command center with pipeline, UI, and asset generation

- Dashboard with campaign management, asset gallery, and publishing queue - 7-agent pipeline: trend scout, research, scripts, ad creative, video, copy, distribution - Campaign form with screenshot upload, goal picker, platform selection - Campaign detail view with Details/Pipeline/Assets/Chat tabs - Two-set image generation: Gemini AI (NanoBanana MCP) + Canvas Design posters - Remotion video rendering with phone.png frame and real screenshot alignment - honeyDue branding: blue #0079FF, orange #FF9400, Inter font, warm off-white - Asset cards with source badges (Gemini/Canvas/Remotion/Playwright) - Markdown/JSON render endpoint for viewing pipeline outputs as HTML - Settings page with Tavily, Gemini, Postiz, Nextdoor integration management - Claude Chat for campaign feedback loop with streaming SSE - Postiz publishing modal with scheduling - Auth with NextAuth credentials + JWT sessions - SQLite via Prisma with better-sqlite3 adapter Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 21:05:26 -05:00
parent 6b08cfb73a
commit 66c2bbec8b
113 changed files with 12741 additions and 138 deletions
@@ -0,0 +1,116 @@
+"use client";
+
+import Link from "next/link";
+import { buttonVariants } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Megaphone, Image, Clock, Plus } from "lucide-react";
+import { useEffect, useState } from "react";
+
+interface Stats {
+  activeCampaigns: number;
+  pendingReview: number;
+  publishedThisWeek: number;
+  recentCampaigns: Array<{
+    id: string;
+    name: string;
+    status: string;
+    createdAt: string;
+  }>;
+}
+
+export default function DashboardPage() {
+  const [stats, setStats] = useState<Stats | null>(null);
+
+  useEffect(() => {
+    fetch("/api/stats")
+      .then((r) => r.json())
+      .then(setStats)
+      .catch(() => {});
+  }, []);
+
+  const cards = [
+    {
+      title: "Active Campaigns",
+      value: stats?.activeCampaigns ?? 0,
+      icon: Megaphone,
+      description: "Currently running",
+    },
+    {
+      title: "Pending Review",
+      value: stats?.pendingReview ?? 0,
+      icon: Clock,
+      description: "Assets awaiting approval",
+    },
+    {
+      title: "Published This Week",
+      value: stats?.publishedThisWeek ?? 0,
+      icon: Image,
+      description: "Assets sent to platforms",
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-3xl font-bold">Dashboard</h1>
+        <Link href="/campaigns/new" className={buttonVariants()}>
+          <Plus className="mr-2 h-4 w-4" />
+          New Campaign
+        </Link>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        {cards.map((card) => (
+          <Card key={card.title}>
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <CardTitle className="text-sm font-medium">
+                {card.title}
+              </CardTitle>
+              <card.icon className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{card.value}</div>
+              <p className="text-xs text-muted-foreground">
+                {card.description}
+              </p>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Recent Campaigns</CardTitle>
+          <CardDescription>Your latest marketing campaigns</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {stats?.recentCampaigns && stats.recentCampaigns.length > 0 ? (
+            <div className="space-y-3">
+              {stats.recentCampaigns.map((campaign) => (
+                <Link
+                  key={campaign.id}
+                  href={`/campaigns/${campaign.id}`}
+                  className="flex items-center justify-between rounded-lg border p-3 hover:bg-muted/50 transition-colors"
+                >
+                  <span className="font-medium">{campaign.name}</span>
+                  <Badge variant="secondary">{campaign.status}</Badge>
+                </Link>
+              ))}
+            </div>
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              No campaigns yet. Create your first one to get started.
+            </p>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}