+ setPushModalIds(ids)} />
+ {pushModalIds && (
+ setPushModalIds(null)}
+ />
+ )}
+
+ );
+}
diff --git a/app/(dashboard)/campaigns/[id]/assets/page.tsx b/app/(dashboard)/campaigns/[id]/assets/page.tsx
new file mode 100644
index 0000000..288e1a7
--- /dev/null
+++ b/app/(dashboard)/campaigns/[id]/assets/page.tsx
@@ -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] = useStateAsset Library
+
+
+ {children}
+
+ );
+}
diff --git a/app/(dashboard)/campaigns/[id]/page.tsx b/app/(dashboard)/campaigns/[id]/page.tsx
new file mode 100644
index 0000000..d0c9073
--- /dev/null
+++ b/app/(dashboard)/campaigns/[id]/page.tsx
@@ -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] = useStateLoading...
; + } + + 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 ( +
+ {isDraft && (
+
+ );
+}
+
+function ReadOnlyDetails({ data }: { data: CampaignData }) {
+ const goalLabels: Record
+
+ )}
+
+ {!isDraft && (
+
+
+
+ Ready to launch?
++ Review your campaign details below, then launch the pipeline. +
+
+ {campaign.status}
+
+ Campaign is {campaign.status} — fields are read-only.
+
+
+ )}
+
+
+ {isDraft ? (
+
+
+
+ );
+}
diff --git a/app/(dashboard)/campaigns/[id]/pipeline/page.tsx b/app/(dashboard)/campaigns/[id]/pipeline/page.tsx
new file mode 100644
index 0000000..9c6dcfb
--- /dev/null
+++ b/app/(dashboard)/campaigns/[id]/pipeline/page.tsx
@@ -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
+ {fields.map((field) => (
+
+
+
+ {field.label}
+
+ {field.value || "—"}
+
+ ))}
+ {data.config.screenshots && data.config.screenshots.length > 0 && (
+
+
+ Screenshots
+
+
+ )}
+
+ {data.config.screenshots.map((path, i) => (
+ 
+ ))}
+
+ Loading...
; + } + + // 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 ( +
+
+ );
+}
diff --git a/app/(dashboard)/campaigns/new/page.tsx b/app/(dashboard)/campaigns/new/page.tsx
new file mode 100644
index 0000000..ceb371a
--- /dev/null
+++ b/app/(dashboard)/campaigns/new/page.tsx
@@ -0,0 +1,9 @@
+import { CampaignForm } from "@/components/campaign-form";
+
+export default function NewCampaignPage() {
+ return (
+
+
+
+
+
+ {campaign.status}
+
+
+ {campaign.status === "draft" && (
+
+ )}
+ {campaign.name}
+
+
+ );
+}
diff --git a/app/(dashboard)/campaigns/page.tsx b/app/(dashboard)/campaigns/page.tsx
new file mode 100644
index 0000000..53b7990
--- /dev/null
+++ b/app/(dashboard)/campaigns/page.tsx
@@ -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
+
+
+
+
+ ) : (
+
+ );
+}
diff --git a/app/(dashboard)/layout.tsx b/app/(dashboard)/layout.tsx
new file mode 100644
index 0000000..a6765d1
--- /dev/null
+++ b/app/(dashboard)/layout.tsx
@@ -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 (
+
+
+
+ {campaigns.length === 0 ? (
+ Campaigns
+ ++ No campaigns yet. Create your first one to get started. +
+
+ {campaigns.map((campaign) => {
+ const platforms = JSON.parse(campaign.platforms) as string[];
+ return (
+
+
+
+
+ {platforms.join(", ")} ·{" "}
+ {campaign._count.assets} assets ·{" "}
+ {new Date(campaign.createdAt).toLocaleDateString()}
+
+
+
+
+ );
+ })}
+
+ )}
+
+ {campaign.name}
+
+ {campaign.status}
+
+
+
+
+
+ {children}
+
+
+
+
+ Recent Campaigns
+ Your latest marketing campaigns
+
+
+ {stats?.recentCampaigns && stats.recentCampaigns.length > 0 ? (
+
+
+
+ );
+}
diff --git a/app/(dashboard)/queue/page.tsx b/app/(dashboard)/queue/page.tsx
new file mode 100644
index 0000000..d4b2eb5
--- /dev/null
+++ b/app/(dashboard)/queue/page.tsx
@@ -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
+
+
+ Dashboard
+ +
+ {cards.map((card) => (
+
+
+
+ {card.title}
+
+
+
+
+
+ ))}
+
+
+ {card.value}
+ + {card.description} +
+
+ {stats.recentCampaigns.map((campaign) => (
+
+ {campaign.name}
+ {campaign.status}
+
+ ))}
+
+ ) : (
+ + No campaigns yet. Create your first one to get started. +
+ )} +
+
+
+ Scheduled & Published
+
+ Assets pushed to Postiz for publishing
+
+
+
+ {assets.length === 0 ? (
+
+
+ )}
+
+
+
+ );
+}
diff --git a/app/(dashboard)/settings/page.tsx b/app/(dashboard)/settings/page.tsx
new file mode 100644
index 0000000..41d8450
--- /dev/null
+++ b/app/(dashboard)/settings/page.tsx
@@ -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: RecordPublishing Queue
+ ++ No published assets yet. Approve assets and push them to Postiz. +
+ ) : ( +
+
+ );
+ }
+
+ return (
+
+
+
+ {group.description}
+
+
+ {group.keys.map((key) => {
+ const config = SETTINGS_CONFIG[key];
+ const currentValue = settings[key] || "";
+ const isEditing = key in editValues;
+ const editValue = editValues[key] ?? "";
+
+ return (
+
+
+ );
+ })}
+
+ );
+}
diff --git a/app/(dashboard)/trends/page.tsx b/app/(dashboard)/trends/page.tsx
new file mode 100644
index 0000000..4bd7912
--- /dev/null
+++ b/app/(dashboard)/trends/page.tsx
@@ -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
+
+
+ {SETTINGS_GROUPS.map((group) => {
+ const groupStatus = getGroupStatus(group);
+
+ return (
+ Settings
++ Configure your third-party integrations. Values are stored securely in + the database and override environment variables. +
+
+
+
+ {group.name}
+ {groupStatus.connected ? (
+
+
+ ) : (
+
+
+ )}
+
+
+ Docs
+
+
+
+ );
+ })}
+
+
+ setEditValues((prev) => ({
+ ...prev,
+ [key]: e.target.value,
+ }))
+ }
+ onFocus={() => {
+ if (!isEditing) {
+ // Clear masked value on focus for secret fields
+ setEditValues((prev) => ({
+ ...prev,
+ [key]: "",
+ }));
+ }
+ }}
+ />
+ {isEditing && (
+
+ )}
+ {isEditing && (
+
+ )}
+
+
+
+
+
+
+ ) : (
+
+
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/app/api/assets/[id]/route.ts b/app/api/assets/[id]/route.ts
new file mode 100644
index 0000000..199e94f
--- /dev/null
+++ b/app/api/assets/[id]/route.ts
@@ -0,0 +1,20 @@
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+
+export async function PATCH(
+ request: Request,
+ { params }: { params: Promise<{ id: string }> }
+) {
+ const session = await auth();
+ if (!session) return new Response("Unauthorized", { status: 401 });
+
+ const { id } = await params;
+ const body = await request.json();
+
+ const asset = await prisma.asset.update({
+ where: { id },
+ data: body,
+ });
+
+ return Response.json(asset);
+}
diff --git a/app/api/assets/route.ts b/app/api/assets/route.ts
new file mode 100644
index 0000000..daaaa8d
--- /dev/null
+++ b/app/api/assets/route.ts
@@ -0,0 +1,34 @@
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+
+export async function GET(request: Request) {
+ const session = await auth();
+ if (!session) return new Response("Unauthorized", { status: 401 });
+
+ const { searchParams } = new URL(request.url);
+ const campaignId = searchParams.get("campaignId");
+ const type = searchParams.get("type");
+ const platform = searchParams.get("platform");
+ const status = searchParams.get("status");
+ const search = searchParams.get("search");
+
+ const where: RecordTrend Reports
+ + {reports.length === 0 ? ( ++ No trend reports yet. Run the Trend Scout agent to generate + reports. +
+
+ {reports.map((report) => (
+ setSelectedReport(report)}
+ >
+
+ {report.name}
+
+ {new Date(report.createdAt).toLocaleDateString()}
+
+
+ {report.summary && (
+
+
+ )}
+
+
+ Create Campaign from This
+
+
+
+ ))}
+
+ )}
+
+ {/* Report Viewer */}
+ {selectedReport && (
+ + {report.summary} +
+
+ {selectedReport.name}
+
+
+ $1
") + .replace(/^#{5}\s+(.+)$/gm, "$1
") + .replace(/^#{4}\s+(.+)$/gm, "$1
") + .replace(/^###\s+(.+)$/gm, "$1
") + .replace(/^##\s+(.+)$/gm, "$1
") + .replace(/^#\s+(.+)$/gm, "$1
") + // Bold and italic + .replace(/\*\*\*(.+?)\*\*\*/g, "$1") + .replace(/\*\*(.+?)\*\*/g, "$1") + .replace(/\*(.+?)\*/g, "$1") + // Code blocks + .replace(/```(\w*)\n([\s\S]*?)```/g, "$2$1")
+ // Unordered lists
+ .replace(/^[-*]\s+(.+)$/gm, "") + // Line breaks to paragraphs + .replace(/\n\n+/g, "
")
+ // Single newlines in context
+ .replace(/\n/g, "
");
+
+ // Wrap consecutive
-
+ html = html.replace(/((?:
- .*?<\/li>
?)+)/g, "- $1
${c.trim()} `) + .join(""); + const rows = body + .trim() + .split("\n") + .map((row: string) => { + const tds = row + .split("|") + .filter((c: string) => c.trim()) + .map((c: string) => `${c.trim()} `) + .join(""); + return `${tds} `; + }) + .join(""); + return `
`; + } + ); + + return ` + + + + + + +${ths} ${rows}${html}
+`; +} + +export async function GET( + _request: Request, + { params }: { params: Promise<{ path: string[] }> } +) { + const session = await auth(); + if (!session) return new Response("Unauthorized", { status: 401 }); + + const { path: segments } = await params; + const filePath = path.join(PIPELINE_ROOT, ...segments); + + const resolved = path.resolve(filePath); + if (!resolved.startsWith(path.resolve(PIPELINE_ROOT))) { + return new Response("Forbidden", { status: 403 }); + } + + try { + const content = await readFile(resolved, "utf-8"); + const ext = path.extname(resolved).toLowerCase(); + + if (ext === ".md") { + return new Response(markdownToHtml(content), { + headers: { "Content-Type": "text/html; charset=utf-8" }, + }); + } + + if (ext === ".json") { + const pretty = JSON.stringify(JSON.parse(content), null, 2); + return new Response( + `${pretty.replace(/`, + { headers: { "Content-Type": "text/html; charset=utf-8" } } + ); + } + + // HTML files served as-is + if (ext === ".html") { + return new Response(content, { + headers: { "Content-Type": "text/html; charset=utf-8" }, + }); + } + + // Fallback: plain text + return new Response(content, { + headers: { "Content-Type": "text/plain; charset=utf-8" }, + }); + } catch { + return new Response("Not found", { status: 404 }); + } +} diff --git a/app/api/nextdoor/route.ts b/app/api/nextdoor/route.ts new file mode 100644 index 0000000..f9ddca7 --- /dev/null +++ b/app/api/nextdoor/route.ts @@ -0,0 +1,83 @@ +import { auth } from "@/lib/auth"; +import { prisma } from "@/lib/prisma"; +import { + createNextdoorCampaign, + createNextdoorAdGroup, + uploadNextdoorCreative, + createNextdoorAd, +} from "@/lib/nextdoor"; + +export async function POST(request: Request) { + const session = await auth(); + if (!session) return new Response("Unauthorized", { status: 401 }); + + const { assetIds, budget, schedule, targeting, copy } = await request.json(); + + if (!assetIds?.length) { + return Response.json({ error: "assetIds required" }, { status: 400 }); + } + + try { + // Create campaign + const campaignResult = await createNextdoorCampaign( + `Auto Campaign ${new Date().toISOString().slice(0, 10)}`, + budget || 50, + schedule || { + startDate: new Date().toISOString(), + endDate: new Date(Date.now() + 7 * 86400000).toISOString(), + } + ); + const ndCampaignId = campaignResult.createCampaign.campaign.id; + + // Create ad group + const adGroupResult = await createNextdoorAdGroup( + ndCampaignId, + targeting || {} + ); + const adGroupId = adGroupResult.createAdGroup.adGroup.id; + + const results = []; + + for (const id of assetIds) { + const asset = await prisma.asset.findUnique({ where: { id } }); + if (!asset) continue; + + try { + // Upload creative (requires public URL — would need Postiz upload first) + const creativeResult = await uploadNextdoorCreative( + `/api/files/${asset.filePath}` + ); + const creativeId = creativeResult.createCreative.creative.id; + + // Create ad + const metadata = asset.metadata ? JSON.parse(asset.metadata) : {}; + await createNextdoorAd(adGroupId, creativeId, { + headline: metadata.headline || "Check this out", + body: metadata.caption || "", + ctaText: copy?.ctaText || "Learn More", + destinationUrl: copy?.destinationUrl || "https://example.com", + }); + + await prisma.asset.update({ + where: { id }, + data: { status: "published", publishedTo: JSON.stringify(["nextdoor"]) }, + }); + + results.push({ id, status: "published" }); + } catch (error) { + results.push({ + id, + status: "failed", + error: error instanceof Error ? error.message : "Unknown error", + }); + } + } + + return Response.json({ campaignId: ndCampaignId, adGroupId, results }); + } catch (error) { + return Response.json( + { error: error instanceof Error ? error.message : "Failed" }, + { status: 500 } + ); + } +} diff --git a/app/api/postiz/route.ts b/app/api/postiz/route.ts new file mode 100644 index 0000000..08ea2ef --- /dev/null +++ b/app/api/postiz/route.ts @@ -0,0 +1,61 @@ +import { auth } from "@/lib/auth"; +import { prisma } from "@/lib/prisma"; +import { pushToPostiz, getPostizIntegrations } from "@/lib/postiz"; + +export async function GET() { + const session = await auth(); + if (!session) return new Response("Unauthorized", { status: 401 }); + + try { + const integrations = await getPostizIntegrations(); + return Response.json(integrations); + } catch (error) { + return Response.json( + { error: error instanceof Error ? error.message : "Failed to fetch integrations" }, + { status: 500 } + ); + } +} + +export async function POST(request: Request) { + const session = await auth(); + if (!session) return new Response("Unauthorized", { status: 401 }); + + const { assetIds, scheduledAt } = await request.json(); + + if (!assetIds?.length || !scheduledAt) { + return Response.json( + { error: "assetIds and scheduledAt required" }, + { status: 400 } + ); + } + + const results = []; + + for (const id of assetIds) { + const asset = await prisma.asset.findUnique({ where: { id } }); + if (!asset) continue; + + try { + const post = await pushToPostiz(asset, scheduledAt); + + await prisma.asset.update({ + where: { id }, + data: { + status: "published", + postizPostId: post.id, + }, + }); + + results.push({ id, status: "scheduled", postId: post.id }); + } catch (error) { + results.push({ + id, + status: "failed", + error: error instanceof Error ? error.message : "Unknown error", + }); + } + } + + return Response.json({ results }); +} diff --git a/app/api/settings/route.ts b/app/api/settings/route.ts new file mode 100644 index 0000000..d73dd84 --- /dev/null +++ b/app/api/settings/route.ts @@ -0,0 +1,57 @@ +import { auth } from "@/lib/auth"; +import { + getAllSettings, + saveSetting, + checkIntegrationStatus, + SETTINGS_CONFIG, + type SettingKey, +} from "@/lib/settings"; + +export async function GET(request: Request) { + const session = await auth(); + if (!session) return new Response("Unauthorized", { status: 401 }); + + const { searchParams } = new URL(request.url); + const includeStatus = searchParams.get("status") === "true"; + + const settings = await getAllSettings(); + + // Mask secret values for display + const masked: Record-- ); -} diff --git a/components/app-sidebar.tsx b/components/app-sidebar.tsx new file mode 100644 index 0000000..290cb68 --- /dev/null +++ b/components/app-sidebar.tsx @@ -0,0 +1,73 @@ +"use client"; + +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import { + LayoutDashboard, + Megaphone, + Image, + TrendingUp, + Calendar, + Settings, +} from "lucide-react"; +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarHeader, +} from "@/components/ui/sidebar"; + +const navItems = [ + { title: "Dashboard", href: "/", icon: LayoutDashboard }, + { title: "Campaigns", href: "/campaigns", icon: Megaphone }, + { title: "Assets", href: "/assets", icon: Image }, + { title: "Trends", href: "/trends", icon: TrendingUp }, + { title: "Queue", href: "/queue", icon: Calendar }, + { title: "Settings", href: "/settings", icon: Settings }, +]; + +export function AppSidebar() { + const pathname = usePathname(); + + return ( +- -- -- -- To get started, edit the page.tsx file. -
-- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -
-+ + ); +} diff --git a/components/asset-card.tsx b/components/asset-card.tsx new file mode 100644 index 0000000..208c7d5 --- /dev/null +++ b/components/asset-card.tsx @@ -0,0 +1,195 @@ +"use client"; + +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { Check, X, Play } from "lucide-react"; + +interface Asset { + id: string; + type: string; + platform?: string | null; + format?: string | null; + fileName: string; + filePath: string; + dimensions?: string | null; + metadata?: string | null; + status: string; + campaign?: { name: string }; +} + +interface AssetCardProps { + asset: Asset; + onStatusChange: (id: string, status: string) => void; + selected?: boolean; + onSelect?: (id: string) => void; +} + +export function AssetCard({ + asset, + onStatusChange, + selected, + onSelect, +}: AssetCardProps) { + const metadata = asset.metadata ? JSON.parse(asset.metadata) : {}; + const isImage = asset.type === "image" || asset.format === "png" || asset.format === "jpg"; + const isVideo = asset.type === "video" || asset.format === "mp4"; + const fileSrc = `/api/files/${asset.filePath}`; + + const pathLower = asset.filePath.toLowerCase(); + const source = pathLower.includes("/gemini/") + ? "Gemini" + : pathLower.includes("/posters/") + ? "Canvas Design" + : isVideo + ? "Remotion" + : isImage + ? "Playwright" + : null; + + const sourceColors: Record+ + +++ honeyDue Marketing + ++ + ++ +Navigation ++ ++ {navItems.map((item) => ( + ++ + ))} +} + isActive={ + item.href === "/" + ? pathname === "/" + : pathname.startsWith(item.href) + } + > + + {item.title} + + + {/* Preview */} ++ ); +} diff --git a/components/asset-gallery.tsx b/components/asset-gallery.tsx new file mode 100644 index 0000000..195683a --- /dev/null +++ b/components/asset-gallery.tsx @@ -0,0 +1,190 @@ +"use client"; + +import { useEffect, useState, useCallback } from "react"; +import { AssetCard } from "@/components/asset-card"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; + +interface Asset { + id: string; + type: string; + platform?: string | null; + format?: string | null; + fileName: string; + filePath: string; + dimensions?: string | null; + metadata?: string | null; + status: string; + campaign?: { name: string }; +} + +interface AssetGalleryProps { + campaignId?: string; + onPushToPostiz?: (assetIds: string[]) => void; +} + +export function AssetGallery({ campaignId, onPushToPostiz }: AssetGalleryProps) { + const [assets, setAssets] = useStateonSelect?.(asset.id)} + > + {isImage && ( + e.stopPropagation()} + > ++ + {/* Info */} ++ + )} + {isVideo && ( + <> + + e.stopPropagation()} + className="absolute inset-0 flex items-center justify-center bg-black/0 hover:bg-black/40 transition-colors group/play" + > +
++ + + )} + {!isImage && !isVideo && ( + e.stopPropagation()} + className="flex h-full flex-col items-center justify-center gap-2 px-4 text-center hover:bg-muted/50 transition-colors" + > + + {asset.type} + + + {asset.fileName} + + + )} ++ +++ {source && ( ++ + {metadata.caption && ( ++ {source} + + )} + {asset.platform && ( ++ {asset.platform} + + )} + {asset.dimensions && ( ++ {asset.dimensions} + + )} ++ {asset.status} + ++ {metadata.caption} +
+ )} + + {asset.campaign && ( ++ {asset.campaign.name} +
+ )} + + {/* Actions — only for images and videos */} + {(isImage || isVideo) ? ( ++ + ++ ) : ( +Auto-accepted
+ )} ++ {/* Filters */} ++ ); +} diff --git a/components/campaign-form.tsx b/components/campaign-form.tsx new file mode 100644 index 0000000..6bf67d1 --- /dev/null +++ b/components/campaign-form.tsx @@ -0,0 +1,450 @@ +"use client"; + +import { useRef, useState } from "react"; +import { useRouter } from "next/navigation"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { Textarea } from "@/components/ui/textarea"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { ImagePlus, X, Loader2 } from "lucide-react"; + +export const PLATFORMS = ["instagram", "tiktok", "nextdoor"] as const; +export const GOALS = [ + { value: "app_downloads", label: "App Downloads", description: "Drive installs from App Store and Google Play" }, + { value: "brand_awareness", label: "Brand Awareness", description: "Maximize reach and impressions across platforms" }, + { value: "engagement", label: "Engagement", description: "Boost likes, comments, shares, and saves" }, +] as const; + +export interface CampaignData { + id?: string; + name: string; + platforms: string[]; + config: { + goal: string; + keyMessage: string; + socialProof?: string; + targetAudience?: string; + visualDirection?: string; + competitorApps?: string; + variations?: number; + useTrendReport?: boolean; + screenshots?: string[]; + }; +} + +interface CampaignFormProps { + initialData?: CampaignData; + mode?: "create" | "edit"; +} + +export function CampaignForm({ initialData, mode = "create" }: CampaignFormProps) { + const router = useRouter(); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(""); + const [selectedPlatforms, setSelectedPlatforms] = useState+ + + + + + + setSearch(e.target.value)} + className="h-9 w-48" + /> + + {selectedIds.size > 0 && ( ++ + {/* Grid */} + {assets.length === 0 ? ( ++ + + {onPushToPostiz && ( + + )} ++ )} ++ No assets yet. Launch a pipeline to generate content. +
+ ) : ( ++ {assets.map((asset) => ( ++ )} ++ ))} + (null); + + function handleFilesSelected(files: FileList | null) { + if (!files) return; + const newScreenshots = Array.from(files) + .filter((f) => f.type.startsWith("image/")) + .map((file) => ({ + file, + preview: URL.createObjectURL(file), + })); + setScreenshots((prev) => [...prev, ...newScreenshots]); + } + + function removeScreenshot(index: number) { + setScreenshots((prev) => { + const next = [...prev]; + if (next[index].preview.startsWith("blob:")) { + URL.revokeObjectURL(next[index].preview); + } + next.splice(index, 1); + return next; + }); + } + + async function uploadScreenshots(): Promise ) { + e.preventDefault(); + setError(""); + + if (selectedPlatforms.length === 0) { + setError("Select at least one platform."); + return; + } + + setLoading(true); + + let screenshotPaths: string[] = []; + try { + screenshotPaths = await uploadScreenshots(); + } catch { + setError("Failed to upload screenshots. Please try again."); + setLoading(false); + return; + } + + const formData = new FormData(e.currentTarget); + + const body = { + name: formData.get("name") as string, + platforms: selectedPlatforms, + config: { + goal: formData.get("goal") as string, + keyMessage: formData.get("keyMessage") as string, + socialProof: formData.get("socialProof") as string, + targetAudience: formData.get("targetAudience") as string, + visualDirection: formData.get("visualDirection") as string, + competitorApps: formData.get("competitorApps") as string, + variations: Number(formData.get("variations")) || 5, + useTrendReport: formData.get("useTrendReport") === "on", + screenshots: screenshotPaths, + }, + }; + + const isEdit = mode === "edit" && initialData?.id; + const url = isEdit + ? `/api/campaigns/${initialData.id}` + : "/api/campaigns"; + const method = isEdit ? "PATCH" : "POST"; + + const res = await fetch(url, { + method, + headers: { "Content-Type": "application/json" }, + body: JSON.stringify( + isEdit + ? { name: body.name, platforms: JSON.stringify(body.platforms), config: JSON.stringify(body.config) } + : body + ), + }); + + if (res.ok) { + if (isEdit) { + router.refresh(); + } else { + const campaign = await res.json(); + router.push(`/campaigns/${campaign.id}`); + } + } else { + const data = await res.json().catch(() => null); + setError(data?.error || "Failed to save campaign. Please try again."); + setLoading(false); + } + } + + function togglePlatform(platform: string) { + setSelectedPlatforms((prev) => + prev.includes(platform) + ? prev.filter((p) => p !== platform) + : [...prev, platform] + ); + } + + return ( + + + ); +} diff --git a/components/claude-chat.tsx b/components/claude-chat.tsx new file mode 100644 index 0000000..de81c3b --- /dev/null +++ b/components/claude-chat.tsx @@ -0,0 +1,82 @@ +"use client"; + +import { useRef, useEffect, useState } from "react"; +import { Button } from "@/components/ui/button"; +import { Textarea } from "@/components/ui/textarea"; +import { useClaudeChat } from "@/hooks/use-claude-chat"; +import { Send, Loader2 } from "lucide-react"; + +export function ClaudeChat({ campaignId }: { campaignId: string }) { + const { messages, sendMessage, isStreaming } = useClaudeChat(campaignId); + const [input, setInput] = useState(""); + const messagesEndRef = useRef+ +{mode === "edit" ? "Edit Campaign" : "New Campaign"} ++ {mode === "edit" + ? "Update campaign details before launching" + : "Configure your campaign and launch the AI pipeline"} + ++ + +(null); + + useEffect(() => { + messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); + }, [messages]); + + function handleSubmit(e: React.FormEvent) { + e.preventDefault(); + if (!input.trim() || isStreaming) return; + sendMessage(input.trim()); + setInput(""); + } + + function handleKeyDown(e: React.KeyboardEvent) { + if (e.key === "Enter" && !e.shiftKey) { + e.preventDefault(); + handleSubmit(e); + } + } + + return ( + + {/* Messages */} ++ {messages.length === 0 && ( ++ + {/* Input */} ++ Chat with Claude about this campaign. Ask for edits, new variations, + or feedback on generated content. +
+ )} + {messages.map((msg, i) => ( +++ ))} + ++ {msg.content} + {isStreaming && i === messages.length - 1 && msg.role === "assistant" && ( +++ )} +