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>
This commit is contained in:
Trey t
@@ -0,0 +1,22 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { AssetGallery } from "@/components/asset-gallery";
|
||||
import { PostizPushModal } from "@/components/postiz-push-modal";
|
||||
|
||||
export default function GlobalAssetsPage() {
|
||||
const [pushModalIds, setPushModalIds] = useState<string[] | null>(null);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-3xl font-bold">Asset Library</h1>
|
||||
<AssetGallery onPushToPostiz={(ids) => setPushModalIds(ids)} />
|
||||
{pushModalIds && (
|
||||
<PostizPushModal
|
||||
assetIds={pushModalIds}
|
||||
onClose={() => setPushModalIds(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { use, useState } from "react";
|
||||
import { AssetGallery } from "@/components/asset-gallery";
|
||||
import { PostizPushModal } from "@/components/postiz-push-modal";
|
||||
|
||||
export default function CampaignAssetsPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { id } = use(params);
|
||||
const [pushModalIds, setPushModalIds] = useState<string[] | null>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<AssetGallery
|
||||
campaignId={id}
|
||||
onPushToPostiz={(ids) => setPushModalIds(ids)}
|
||||
/>
|
||||
{pushModalIds && (
|
||||
<PostizPushModal
|
||||
assetIds={pushModalIds}
|
||||
onClose={() => setPushModalIds(null)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import { use } from "react";
|
||||
import { ClaudeChat } from "@/components/claude-chat";
|
||||
|
||||
export default function CampaignChatPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { id } = use(params);
|
||||
|
||||
return <ClaudeChat campaignId={id} />;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { use } from "react";
|
||||
|
||||
const tabs = [
|
||||
{ label: "Details", href: "" },
|
||||
{ label: "Pipeline", href: "/pipeline" },
|
||||
{ label: "Assets", href: "/assets" },
|
||||
{ label: "Claude Chat", href: "/chat" },
|
||||
];
|
||||
|
||||
export default function CampaignDetailLayout({
|
||||
children,
|
||||
params,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { id } = use(params);
|
||||
const pathname = usePathname();
|
||||
const basePath = `/campaigns/${id}`;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<nav className="flex gap-1 border-b">
|
||||
{tabs.map((tab) => {
|
||||
const href = `${basePath}${tab.href}`;
|
||||
const isActive =
|
||||
tab.href === ""
|
||||
? pathname === basePath
|
||||
: pathname.startsWith(href);
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={tab.label}
|
||||
href={href}
|
||||
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
|
||||
isActive
|
||||
? "border-primary text-primary"
|
||||
: "border-transparent text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
"use client";
|
||||
|
||||
import { use, useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { CampaignForm, type CampaignData } from "@/components/campaign-form";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Play } from "lucide-react";
|
||||
|
||||
interface CampaignResponse {
|
||||
id: string;
|
||||
name: string;
|
||||
status: string;
|
||||
platforms: string;
|
||||
config: string | null;
|
||||
}
|
||||
|
||||
export default function CampaignDetailsPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { id } = use(params);
|
||||
const router = useRouter();
|
||||
const [campaign, setCampaign] = useState<CampaignResponse | null>(null);
|
||||
const [launching, setLaunching] = useState(false);
|
||||
const [saved, setSaved] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`/api/campaigns/${id}`)
|
||||
.then((r) => r.json())
|
||||
.then((data) => {
|
||||
setCampaign(data);
|
||||
setSaved(false);
|
||||
})
|
||||
.catch(() => {});
|
||||
}, [id]);
|
||||
|
||||
async function handleLaunch() {
|
||||
setLaunching(true);
|
||||
await fetch(`/api/campaigns/${id}/launch`, { method: "POST" });
|
||||
router.push(`/campaigns/${id}/pipeline`);
|
||||
}
|
||||
|
||||
if (!campaign) {
|
||||
return <p className="text-muted-foreground">Loading...</p>;
|
||||
}
|
||||
|
||||
const config = campaign.config ? JSON.parse(campaign.config) : {};
|
||||
const platforms: string[] = JSON.parse(campaign.platforms);
|
||||
const isDraft = campaign.status === "draft";
|
||||
|
||||
const initialData: CampaignData = {
|
||||
id: campaign.id,
|
||||
name: campaign.name,
|
||||
platforms,
|
||||
config: {
|
||||
goal: config.goal || "app_downloads",
|
||||
keyMessage: config.keyMessage || "",
|
||||
socialProof: config.socialProof || "",
|
||||
targetAudience: config.targetAudience || "",
|
||||
visualDirection: config.visualDirection || "clean",
|
||||
competitorApps: config.competitorApps || "",
|
||||
variations: config.variations ?? 5,
|
||||
useTrendReport: config.useTrendReport || false,
|
||||
screenshots: config.screenshots || [],
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{isDraft && (
|
||||
<div className="flex items-center justify-between rounded-lg border border-primary/20 bg-primary/5 p-4">
|
||||
<div>
|
||||
<p className="font-medium">Ready to launch?</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Review your campaign details below, then launch the pipeline.
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={handleLaunch} disabled={launching}>
|
||||
<Play className="mr-2 h-4 w-4" />
|
||||
{launching ? "Launching..." : "Launch Pipeline"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isDraft && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="secondary">{campaign.status}</Badge>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Campaign is {campaign.status} — fields are read-only.
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="max-w-2xl">
|
||||
{isDraft ? (
|
||||
<CampaignForm initialData={initialData} mode="edit" />
|
||||
) : (
|
||||
<ReadOnlyDetails data={initialData} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ReadOnlyDetails({ data }: { data: CampaignData }) {
|
||||
const goalLabels: Record<string, string> = {
|
||||
app_downloads: "App Downloads",
|
||||
brand_awareness: "Brand Awareness",
|
||||
engagement: "Engagement",
|
||||
};
|
||||
|
||||
const visualLabels: Record<string, string> = {
|
||||
clean: "Clean & Minimal",
|
||||
bold: "Bold & Vibrant",
|
||||
premium: "Premium & Dark",
|
||||
warm: "Warm & Friendly",
|
||||
tech: "Tech & Modern",
|
||||
};
|
||||
|
||||
const fields = [
|
||||
{ label: "Campaign Name", value: data.name },
|
||||
{ label: "Platforms", value: data.platforms.map((p) => p.charAt(0).toUpperCase() + p.slice(1)).join(", ") },
|
||||
{ label: "Goal", value: goalLabels[data.config.goal] || data.config.goal },
|
||||
{ label: "Key Message", value: data.config.keyMessage },
|
||||
{ label: "Social Proof", value: data.config.socialProof },
|
||||
{ label: "Target Audience", value: data.config.targetAudience },
|
||||
{ label: "Visual Direction", value: visualLabels[data.config.visualDirection || ""] || data.config.visualDirection },
|
||||
{ label: "Competitor Apps", value: data.config.competitorApps },
|
||||
{ label: "Variations", value: String(data.config.variations ?? 5) },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border">
|
||||
<div className="divide-y">
|
||||
{fields.map((field) => (
|
||||
<div key={field.label} className="flex gap-4 px-4 py-3">
|
||||
<span className="w-40 shrink-0 text-sm font-medium text-muted-foreground">
|
||||
{field.label}
|
||||
</span>
|
||||
<span className="text-sm">{field.value || "—"}</span>
|
||||
</div>
|
||||
))}
|
||||
{data.config.screenshots && data.config.screenshots.length > 0 && (
|
||||
<div className="flex gap-4 px-4 py-3">
|
||||
<span className="w-40 shrink-0 text-sm font-medium text-muted-foreground">
|
||||
Screenshots
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
{data.config.screenshots.map((path, i) => (
|
||||
<img
|
||||
key={i}
|
||||
src={`/api/files/${path}`}
|
||||
alt={`Screenshot ${i + 1}`}
|
||||
className="h-24 rounded-md border object-cover"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
"use client";
|
||||
|
||||
import { use, useEffect, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { PipelineProgress } from "@/components/pipeline-progress";
|
||||
import { usePipelineProgress } from "@/hooks/use-pipeline-progress";
|
||||
import { Play } from "lucide-react";
|
||||
|
||||
interface Campaign {
|
||||
id: string;
|
||||
name: string;
|
||||
status: string;
|
||||
platforms: string;
|
||||
agentRuns: Array<{
|
||||
id: string;
|
||||
agentName: string;
|
||||
status: string;
|
||||
durationMs?: number;
|
||||
outputSummary?: string;
|
||||
error?: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
export default function CampaignPipelinePage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { id } = use(params);
|
||||
const [campaign, setCampaign] = useState<Campaign | null>(null);
|
||||
const [launching, setLaunching] = useState(false);
|
||||
const { agents, pipelineStatus } = usePipelineProgress(
|
||||
campaign?.status === "running" ? id : null
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`/api/campaigns/${id}`)
|
||||
.then((r) => r.json())
|
||||
.then(setCampaign)
|
||||
.catch(() => {});
|
||||
}, [id, pipelineStatus]);
|
||||
|
||||
async function handleLaunch() {
|
||||
setLaunching(true);
|
||||
await fetch(`/api/campaigns/${id}/launch`, { method: "POST" });
|
||||
setCampaign((prev) => (prev ? { ...prev, status: "running" } : prev));
|
||||
setLaunching(false);
|
||||
}
|
||||
|
||||
if (!campaign) {
|
||||
return <p className="text-muted-foreground">Loading...</p>;
|
||||
}
|
||||
|
||||
// Use SSE agents if pipeline is running, otherwise use stored agentRuns
|
||||
const displayAgents =
|
||||
campaign.status === "running"
|
||||
? agents
|
||||
: campaign.agentRuns.length > 0
|
||||
? campaign.agentRuns.map((r) => ({
|
||||
agentName: r.agentName,
|
||||
status: r.status as "pending" | "running" | "completed" | "failed",
|
||||
durationMs: r.durationMs ?? undefined,
|
||||
outputSummary: r.outputSummary ?? undefined,
|
||||
error: r.error ?? undefined,
|
||||
}))
|
||||
: agents;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">{campaign.name}</h2>
|
||||
<Badge variant="secondary" className="mt-1">
|
||||
{campaign.status}
|
||||
</Badge>
|
||||
</div>
|
||||
{campaign.status === "draft" && (
|
||||
<Button onClick={handleLaunch} disabled={launching}>
|
||||
<Play className="mr-2 h-4 w-4" />
|
||||
{launching ? "Launching..." : "Launch Pipeline"}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<PipelineProgress agents={displayAgents} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { CampaignForm } from "@/components/campaign-form";
|
||||
|
||||
export default function NewCampaignPage() {
|
||||
return (
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<CampaignForm />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { buttonVariants } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
interface Campaign {
|
||||
id: string;
|
||||
name: string;
|
||||
status: string;
|
||||
platforms: string;
|
||||
createdAt: string;
|
||||
_count: { assets: number; agentRuns: number };
|
||||
}
|
||||
|
||||
const statusColors: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
|
||||
draft: "secondary",
|
||||
running: "default",
|
||||
review: "outline",
|
||||
approved: "default",
|
||||
published: "default",
|
||||
};
|
||||
|
||||
export default function CampaignsPage() {
|
||||
const [campaigns, setCampaigns] = useState<Campaign[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/campaigns")
|
||||
.then((r) => r.json())
|
||||
.then(setCampaigns)
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-3xl font-bold">Campaigns</h1>
|
||||
<Link href="/campaigns/new" className={buttonVariants()}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
New Campaign
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{campaigns.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center">
|
||||
<p className="text-muted-foreground">
|
||||
No campaigns yet. Create your first one to get started.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid gap-4">
|
||||
{campaigns.map((campaign) => {
|
||||
const platforms = JSON.parse(campaign.platforms) as string[];
|
||||
return (
|
||||
<Link key={campaign.id} href={`/campaigns/${campaign.id}`}>
|
||||
<Card className="hover:bg-muted/50 transition-colors cursor-pointer">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>{campaign.name}</CardTitle>
|
||||
<Badge variant={statusColors[campaign.status] || "secondary"}>
|
||||
{campaign.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<CardDescription>
|
||||
{platforms.join(", ")} ·{" "}
|
||||
{campaign._count.assets} assets ·{" "}
|
||||
{new Date(campaign.createdAt).toLocaleDateString()}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { AppSidebar } from "@/components/app-sidebar";
|
||||
import { Header } from "@/components/header";
|
||||
import { Providers } from "@/components/providers";
|
||||
|
||||
export default function DashboardLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<Providers>
|
||||
<div className="flex min-h-screen w-full">
|
||||
<AppSidebar />
|
||||
<div className="flex flex-1 flex-col">
|
||||
<Header />
|
||||
<main className="flex-1 p-6">{children}</main>
|
||||
</div>
|
||||
</div>
|
||||
</Providers>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
|
||||
interface QueueAsset {
|
||||
id: string;
|
||||
fileName: string;
|
||||
platform?: string | null;
|
||||
status: string;
|
||||
postizPostId?: string | null;
|
||||
metadata?: string | null;
|
||||
createdAt: string;
|
||||
campaign?: { name: string };
|
||||
}
|
||||
|
||||
export default function QueuePage() {
|
||||
const [assets, setAssets] = useState<QueueAsset[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/assets?status=published")
|
||||
.then((r) => r.json())
|
||||
.then(setAssets)
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-3xl font-bold">Publishing Queue</h1>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Scheduled & Published</CardTitle>
|
||||
<CardDescription>
|
||||
Assets pushed to Postiz for publishing
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{assets.length === 0 ? (
|
||||
<p className="text-center text-muted-foreground py-8">
|
||||
No published assets yet. Approve assets and push them to Postiz.
|
||||
</p>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Asset</TableHead>
|
||||
<TableHead>Campaign</TableHead>
|
||||
<TableHead>Platform</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Post ID</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{assets.map((asset) => {
|
||||
const metadata = asset.metadata
|
||||
? JSON.parse(asset.metadata)
|
||||
: {};
|
||||
return (
|
||||
<TableRow key={asset.id}>
|
||||
<TableCell className="font-medium">
|
||||
{asset.fileName}
|
||||
{metadata.caption && (
|
||||
<p className="text-xs text-muted-foreground line-clamp-1 mt-1">
|
||||
{metadata.caption}
|
||||
</p>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>{asset.campaign?.name || "—"}</TableCell>
|
||||
<TableCell>
|
||||
{asset.platform && (
|
||||
<Badge variant="outline">{asset.platform}</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="default">{asset.status}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-xs text-muted-foreground">
|
||||
{asset.postizPostId || "—"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,281 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { CheckCircle2, XCircle, Loader2, ExternalLink } from "lucide-react";
|
||||
|
||||
interface SettingsGroup {
|
||||
name: string;
|
||||
description: string;
|
||||
docsUrl: string;
|
||||
keys: string[];
|
||||
}
|
||||
|
||||
interface SettingConfig {
|
||||
label: string;
|
||||
placeholder: string;
|
||||
secret?: boolean;
|
||||
}
|
||||
|
||||
const SETTINGS_GROUPS: SettingsGroup[] = [
|
||||
{
|
||||
name: "Postiz",
|
||||
description:
|
||||
"Self-hosted social media scheduling. Handles Instagram and TikTok publishing.",
|
||||
docsUrl: "https://postiz.com",
|
||||
keys: ["POSTIZ_URL", "POSTIZ_API_KEY"],
|
||||
},
|
||||
{
|
||||
name: "Tavily",
|
||||
description:
|
||||
"AI-powered web research. Used by the Trend Scout and Research agents.",
|
||||
docsUrl: "https://tavily.com",
|
||||
keys: ["TAVILY_API_KEY"],
|
||||
},
|
||||
{
|
||||
name: "Gemini",
|
||||
description:
|
||||
"Google Gemini powers NanoBanana MCP for AI image generation in static ads. ~$0.04-0.13/image.",
|
||||
docsUrl: "https://aistudio.google.com/apikey",
|
||||
keys: ["GEMINI_API_KEY"],
|
||||
},
|
||||
{
|
||||
name: "Nextdoor",
|
||||
description:
|
||||
"Direct Nextdoor Ads API integration for local advertising.",
|
||||
docsUrl: "https://developer.nextdoor.com",
|
||||
keys: ["NEXTDOOR_API_TOKEN", "NEXTDOOR_ADVERTISER_ID"],
|
||||
},
|
||||
];
|
||||
|
||||
const SETTINGS_CONFIG: Record<string, SettingConfig> = {
|
||||
POSTIZ_URL: { label: "Postiz URL", placeholder: "http://localhost:5000" },
|
||||
POSTIZ_API_KEY: {
|
||||
label: "Postiz API Key",
|
||||
placeholder: "your-postiz-api-key",
|
||||
secret: true,
|
||||
},
|
||||
TAVILY_API_KEY: {
|
||||
label: "Tavily API Key",
|
||||
placeholder: "tvly-...",
|
||||
secret: true,
|
||||
},
|
||||
GEMINI_API_KEY: {
|
||||
label: "Google Gemini API Key",
|
||||
placeholder: "AIza...",
|
||||
secret: true,
|
||||
},
|
||||
NEXTDOOR_API_TOKEN: {
|
||||
label: "Nextdoor API Token",
|
||||
placeholder: "your-nextdoor-token",
|
||||
secret: true,
|
||||
},
|
||||
NEXTDOOR_ADVERTISER_ID: {
|
||||
label: "Nextdoor Advertiser ID",
|
||||
placeholder: "your-advertiser-id",
|
||||
},
|
||||
};
|
||||
|
||||
type IntegrationStatus = Record<
|
||||
string,
|
||||
{ connected: boolean; error?: string }
|
||||
>;
|
||||
|
||||
export default function SettingsPage() {
|
||||
const [settings, setSettings] = useState<Record<string, string>>({});
|
||||
const [status, setStatus] = useState<IntegrationStatus>({});
|
||||
const [editValues, setEditValues] = useState<Record<string, string>>({});
|
||||
const [saving, setSaving] = useState<string | null>(null);
|
||||
const [saved, setSaved] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/settings?status=true")
|
||||
.then((r) => r.json())
|
||||
.then((data) => {
|
||||
setSettings(data.settings || {});
|
||||
setStatus(data.status || {});
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
async function handleSave(key: string) {
|
||||
const value = editValues[key];
|
||||
if (value === undefined) return;
|
||||
|
||||
setSaving(key);
|
||||
const res = await fetch("/api/settings", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ key, value }),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setSaved(key);
|
||||
// Refresh settings
|
||||
const data = await fetch("/api/settings?status=true").then((r) =>
|
||||
r.json()
|
||||
);
|
||||
setSettings(data.settings || {});
|
||||
setStatus(data.status || {});
|
||||
setEditValues((prev) => {
|
||||
const next = { ...prev };
|
||||
delete next[key];
|
||||
return next;
|
||||
});
|
||||
setTimeout(() => setSaved(null), 2000);
|
||||
}
|
||||
setSaving(null);
|
||||
}
|
||||
|
||||
function getGroupStatus(group: SettingsGroup): {
|
||||
connected: boolean;
|
||||
error?: string;
|
||||
} {
|
||||
const key = group.name.toLowerCase();
|
||||
return status[key] || { connected: false, error: "Unknown" };
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Settings</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Configure your third-party integrations. Values are stored securely in
|
||||
the database and override environment variables.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{SETTINGS_GROUPS.map((group) => {
|
||||
const groupStatus = getGroupStatus(group);
|
||||
|
||||
return (
|
||||
<Card key={group.name}>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<CardTitle>{group.name}</CardTitle>
|
||||
{groupStatus.connected ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-green-600 border-green-200 bg-green-50"
|
||||
>
|
||||
<CheckCircle2 className="h-3 w-3 mr-1" />
|
||||
Connected
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-amber-600 border-amber-200 bg-amber-50"
|
||||
>
|
||||
<XCircle className="h-3 w-3 mr-1" />
|
||||
{groupStatus.error || "Not connected"}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<a
|
||||
href={group.docsUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1"
|
||||
>
|
||||
Docs
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</a>
|
||||
</div>
|
||||
<CardDescription>{group.description}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{group.keys.map((key) => {
|
||||
const config = SETTINGS_CONFIG[key];
|
||||
const currentValue = settings[key] || "";
|
||||
const isEditing = key in editValues;
|
||||
const editValue = editValues[key] ?? "";
|
||||
|
||||
return (
|
||||
<div key={key} className="space-y-2">
|
||||
<Label htmlFor={key}>{config.label}</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id={key}
|
||||
type={config.secret && !isEditing ? "password" : "text"}
|
||||
placeholder={config.placeholder}
|
||||
value={isEditing ? editValue : currentValue}
|
||||
onChange={(e) =>
|
||||
setEditValues((prev) => ({
|
||||
...prev,
|
||||
[key]: e.target.value,
|
||||
}))
|
||||
}
|
||||
onFocus={() => {
|
||||
if (!isEditing) {
|
||||
// Clear masked value on focus for secret fields
|
||||
setEditValues((prev) => ({
|
||||
...prev,
|
||||
[key]: "",
|
||||
}));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{isEditing && (
|
||||
<Button
|
||||
onClick={() => handleSave(key)}
|
||||
disabled={saving === key}
|
||||
size="sm"
|
||||
className="shrink-0"
|
||||
>
|
||||
{saving === key ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : saved === key ? (
|
||||
<CheckCircle2 className="h-4 w-4" />
|
||||
) : (
|
||||
"Save"
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
{isEditing && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="shrink-0"
|
||||
onClick={() =>
|
||||
setEditValues((prev) => {
|
||||
const next = { ...prev };
|
||||
delete next[key];
|
||||
return next;
|
||||
})
|
||||
}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user