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,109 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { buttonVariants } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+interface TrendReport {
+  id: string;
+  name: string;
+  filePath: string;
+  summary?: string | null;
+  createdAt: string;
+}
+
+export default function TrendsPage() {
+  const [reports, setReports] = useState<TrendReport[]>([]);
+  const [selectedReport, setSelectedReport] = useState<TrendReport | null>(null);
+
+  useEffect(() => {
+    fetch("/api/stats")
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.trendReports) setReports(data.trendReports);
+      })
+      .catch(() => {});
+  }, []);
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-3xl font-bold">Trend Reports</h1>
+
+      {reports.length === 0 ? (
+        <Card>
+          <CardContent className="py-12 text-center">
+            <p className="text-muted-foreground">
+              No trend reports yet. Run the Trend Scout agent to generate
+              reports.
+            </p>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2">
+          {reports.map((report) => (
+            <Card
+              key={report.id}
+              className="cursor-pointer hover:bg-muted/50 transition-colors"
+              onClick={() => setSelectedReport(report)}
+            >
+              <CardHeader>
+                <CardTitle className="text-lg">{report.name}</CardTitle>
+                <CardDescription>
+                  {new Date(report.createdAt).toLocaleDateString()}
+                </CardDescription>
+              </CardHeader>
+              {report.summary && (
+                <CardContent>
+                  <p className="text-sm text-muted-foreground">
+                    {report.summary}
+                  </p>
+                </CardContent>
+              )}
+              <CardContent>
+                <Link
+                  href={`/campaigns/new?trendReport=${report.id}`}
+                  className={buttonVariants({ variant: "outline", size: "sm" })}
+                >
+                  Create Campaign from This
+                </Link>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      {/* Report Viewer */}
+      {selectedReport && (
+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <CardTitle>{selectedReport.name}</CardTitle>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setSelectedReport(null)}
+              >
+                Close
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <iframe
+              src={`/api/files/${selectedReport.filePath}`}
+              className="w-full h-[600px] border rounded-md"
+              title={selectedReport.name}
+            />
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}