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,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<string, string> = {
|
||||
Gemini: "text-purple-600 border-purple-200 bg-purple-50",
|
||||
"Canvas Design": "text-amber-600 border-amber-200 bg-amber-50",
|
||||
Remotion: "text-blue-600 border-blue-200 bg-blue-50",
|
||||
Playwright: "text-emerald-600 border-emerald-200 bg-emerald-50",
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`rounded-lg border overflow-hidden transition-colors ${
|
||||
selected ? "ring-2 ring-primary" : ""
|
||||
}`}
|
||||
>
|
||||
{/* Preview */}
|
||||
<div
|
||||
className="relative aspect-square bg-muted cursor-pointer"
|
||||
onClick={() => onSelect?.(asset.id)}
|
||||
>
|
||||
{isImage && (
|
||||
<a
|
||||
href={fileSrc}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<img
|
||||
src={fileSrc}
|
||||
alt={asset.fileName}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
{isVideo && (
|
||||
<>
|
||||
<video
|
||||
src={`${fileSrc}#t=0.5`}
|
||||
className="h-full w-full object-cover"
|
||||
muted
|
||||
playsInline
|
||||
preload="metadata"
|
||||
/>
|
||||
<a
|
||||
href={fileSrc}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="absolute inset-0 flex items-center justify-center bg-black/0 hover:bg-black/40 transition-colors group/play"
|
||||
>
|
||||
<div className="rounded-full bg-white/90 p-3 opacity-0 group-hover/play:opacity-100 transition-opacity shadow-lg">
|
||||
<Play className="h-6 w-6 text-foreground fill-foreground" />
|
||||
</div>
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
{!isImage && !isVideo && (
|
||||
<a
|
||||
href={`/api/files/render/${asset.filePath}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="flex h-full flex-col items-center justify-center gap-2 px-4 text-center hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
<span className="text-xs font-medium text-muted-foreground/60 uppercase tracking-wider">
|
||||
{asset.type}
|
||||
</span>
|
||||
<span className="text-sm font-medium text-muted-foreground line-clamp-2">
|
||||
{asset.fileName}
|
||||
</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="p-3 space-y-2 overflow-hidden">
|
||||
<div className="flex items-center gap-1.5 flex-wrap">
|
||||
{source && (
|
||||
<Badge variant="outline" className={`text-xs ${sourceColors[source] || ""}`}>
|
||||
{source}
|
||||
</Badge>
|
||||
)}
|
||||
{asset.platform && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{asset.platform}
|
||||
</Badge>
|
||||
)}
|
||||
{asset.dimensions && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{asset.dimensions}
|
||||
</Badge>
|
||||
)}
|
||||
<Badge
|
||||
variant={
|
||||
asset.status === "approved"
|
||||
? "default"
|
||||
: asset.status === "rejected"
|
||||
? "destructive"
|
||||
: "secondary"
|
||||
}
|
||||
className="text-xs"
|
||||
>
|
||||
{asset.status}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{metadata.caption && (
|
||||
<p className="text-xs text-muted-foreground line-clamp-2">
|
||||
{metadata.caption}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{asset.campaign && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{asset.campaign.name}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Actions — only for images and videos */}
|
||||
{(isImage || isVideo) ? (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="flex-1 min-w-0 overflow-hidden text-green-600 hover:text-green-700 hover:bg-green-50"
|
||||
onClick={() => onStatusChange(asset.id, "approved")}
|
||||
disabled={asset.status === "approved"}
|
||||
>
|
||||
<Check className="h-3 w-3 shrink-0" />
|
||||
<span className="truncate">Approve</span>
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="flex-1 min-w-0 overflow-hidden text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||
onClick={() => onStatusChange(asset.id, "rejected")}
|
||||
disabled={asset.status === "rejected"}
|
||||
>
|
||||
<X className="h-3 w-3 shrink-0" />
|
||||
<span className="truncate">Reject</span>
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground text-center">Auto-accepted</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user