adserver-dashboard 1.0.0

package/client/src/pages/content-hub.tsx

@@ -0,0 +1,1358 @@
+import { useState, useMemo } from "react";
+import { useLocation } from "wouter";
+import { usePageTitle } from "@/hooks/use-page-title";
+import { useToast } from "@/hooks/use-toast";
+import {
+  useFolders,
+  useCreatives,
+  useDeleteCreative,
+  useApproveCreative,
+  useRejectCreative,
+  useUpdateCreative,
+  useTranscodeCreative,
+  useCreateFolder,
+} from "@/lib/content-hub-api";
+import type { Creative, CreativeFilters, Folder, FolderFilters } from "@/types/content-hub";
+import { CreativeStatus } from "@/types/content-hub";
+
+import { CreativeUpload } from "@/components/content-hub/creative-upload";
+import { FolderCard } from "@/components/creative-library/folder-card";
+import {
+  CreateFolderDialog,
+  UpdateFolderDialog,
+  DeleteFolderDialog,
+} from "@/components/content-hub/folder-dialogs";
+import { TranscodeDialog } from "@/components/content-hub/transcode-dialog";
+import { ApproveDialog, RejectDialog } from "@/components/content-hub/review-dialogs";
+
+import { Button } from "@moving-walls/design-system";
+import { Input } from "@moving-walls/design-system";
+import { Card, CardContent } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+import { Label } from "@moving-walls/design-system";
+import { Separator } from "@moving-walls/design-system";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@moving-walls/design-system";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@moving-walls/design-system";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@moving-walls/design-system";
+import { AgGridTable } from "@moving-walls/design-system";
+import type { AgGridSortState, AgGridTableServerSideConfig, ColDef } from "@moving-walls/design-system";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@moving-walls/design-system";
+import { Textarea } from "@moving-walls/design-system";
+import { PageHeader } from "@moving-walls/design-system";
+import { HStack, Stack, Text, Heading } from "@moving-walls/design-system";
+
+import {
+  Plus,
+  Upload,
+  LayoutGrid,
+  List,
+  Search,
+  Filter,
+  MoreVertical,
+  Eye,
+  Download,
+  Trash2,
+  X,
+  Image as ImageIcon,
+  Video,
+  FileText,
+  Package,
+  Loader2,
+  Check,
+  XCircle,
+  Wand2,
+} from "lucide-react";
+import { useAuth } from "@/contexts/auth-context";
+
+const STATUS_MAP: Record<string, string> = {
+  draft: "Processing",
+  pending_review: "New",
+  approved: "Accepted",
+  rejected: "Inadequate",
+};
+
+const STATUS_COLORS: Record<string, string> = {
+  draft: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300",
+  pending_review: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
+  approved: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
+  rejected: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
+};
+
+const TYPE_COLORS: Record<string, string> = {
+  image: "bg-purple-100 dark:bg-purple-900",
+  video: "bg-red-100 dark:bg-red-900",
+  document: "bg-orange-100 dark:bg-orange-900",
+};
+
+const TYPE_ICONS: Record<string, typeof ImageIcon> = {
+  image: ImageIcon,
+  video: Video,
+  document: FileText,
+};
+
+function getCreativeType(mimeType: string): string {
+  if (mimeType.startsWith("image/")) return "image";
+  if (mimeType.startsWith("video/")) return "video";
+  return "document";
+}
+
+function getCreativeTypeLabel(mimeType: string): string {
+  if (mimeType.startsWith("image/")) return "Display";
+  if (mimeType.startsWith("video/")) return "Video";
+  if (mimeType.includes("html")) return "Html";
+  return "Native";
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+}
+
+function formatDate(dateStr: string): string {
+  const d = new Date(dateStr);
+  return `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const label = STATUS_MAP[status] || status;
+  const colorClass = STATUS_COLORS[status] || "bg-gray-100 text-gray-800";
+  return (
+    <Badge variant="outline" className={`${colorClass} border-0 text-xs`}>
+      {label}
+    </Badge>
+  );
+}
+
+export default function ContentHub() {
+  usePageTitle("Content Hub");
+  const { toast } = useToast();
+  const { user } = useAuth();
+  const [, setLocation] = useLocation();
+
+  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(20);
+  const [sortBy, setSortBy] = useState<string>("created_at");
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
+
+  const [filterOpen, setFilterOpen] = useState(false);
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+  const [typeFilter, setTypeFilter] = useState<string>("all");
+  const [folderFilter, setFolderFilter] = useState<string>("all");
+
+  const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
+  const [createFolderOpen, setCreateFolderOpen] = useState(false);
+  const [updateFolderOpen, setUpdateFolderOpen] = useState(false);
+  const [deleteFolderOpen, setDeleteFolderOpen] = useState(false);
+  const [selectedFolder, setSelectedFolder] = useState<Folder | null>(null);
+
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [selectedCreative, setSelectedCreative] = useState<Creative | null>(null);
+  const [newTag, setNewTag] = useState("");
+
+  const [approveDialogOpen, setApproveDialogOpen] = useState(false);
+  const [rejectDialogOpen, setRejectDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [creativeToDelete, setCreativeToDelete] = useState<Creative | null>(null);
+  const [transcodeCreative, setTranscodeCreative] = useState<Creative | null>(null);
+
+  const apiFilters: CreativeFilters = useMemo(() => {
+    const filters: CreativeFilters = {
+      page: currentPage,
+      limit: pageSize,
+      search: searchQuery || undefined,
+    };
+    if (statusFilter !== "all") {
+      filters.status = statusFilter as CreativeStatus;
+    }
+    if (folderFilter !== "all") {
+      filters.folder_id = folderFilter;
+    }
+    if (typeFilter !== "all") {
+      filters.mime_type = `${typeFilter}/*`;
+    }
+    return filters;
+  }, [currentPage, pageSize, searchQuery, statusFilter, typeFilter, folderFilter]);
+
+  const { data: foldersData } = useFolders({ page: 1, limit: 100 });
+  const folders = foldersData?.data || [];
+
+  const {
+    data: creativesData,
+    isLoading,
+    refetch: refetchCreatives,
+  } = useCreatives(apiFilters);
+  const creatives = creativesData?.data || [];
+  const totalPages = creativesData?.pagination?.total_pages || 1;
+  const totalItems = creativesData?.pagination?.total || 0;
+
+  const deleteCreativeMutation = useDeleteCreative();
+  const approveCreativeMutation = useApproveCreative();
+  const rejectCreativeMutation = useRejectCreative();
+  const updateCreativeMutation = useUpdateCreative();
+  const transcodeCreativeMutation = useTranscodeCreative();
+  const createFolderMutation = useCreateFolder();
+
+  const activeFilterCount = useMemo(() => {
+    let count = 0;
+    if (statusFilter !== "all") count++;
+    if (typeFilter !== "all") count++;
+    if (folderFilter !== "all") count++;
+    return count;
+  }, [statusFilter, typeFilter, folderFilter]);
+
+  const handleSearchChange = (query: string) => {
+    setSearchQuery(query);
+    setCurrentPage(1);
+  };
+
+  const handleSort = (key: string) => {
+    if (sortBy === key) {
+      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+    } else {
+      setSortBy(key);
+      setSortOrder("asc");
+    }
+  };
+
+  const handlePreview = (creative: Creative) => {
+    setSelectedCreative(creative);
+    setPreviewOpen(true);
+  };
+
+  const handleApprove = async (data: { reviewer_id: string; comments?: string }) => {
+    if (!selectedCreative) return;
+    try {
+      await approveCreativeMutation.mutateAsync({
+        creativeId: selectedCreative.id,
+        payload: data,
+      });
+      toast({ title: "Creative approved successfully", variant: "default" });
+      setApproveDialogOpen(false);
+      refetchCreatives();
+      setSelectedCreative((prev) =>
+        prev ? { ...prev, status: "approved" } : null,
+      );
+    } catch (error: any) {
+      toast({
+        title: "Failed to approve creative",
+        description: error?.message,
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleReject = async (data: { reviewer_id: string; comments?: string }) => {
+    if (!selectedCreative) return;
+    try {
+      await rejectCreativeMutation.mutateAsync({
+        creativeId: selectedCreative.id,
+        payload: data,
+      });
+      toast({ title: "Creative rejected", variant: "default" });
+      setRejectDialogOpen(false);
+      refetchCreatives();
+      setSelectedCreative((prev) =>
+        prev ? { ...prev, status: "rejected" } : null,
+      );
+    } catch (error: any) {
+      toast({
+        title: "Failed to reject creative",
+        description: error?.message,
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleAddTag = async () => {
+    if (!selectedCreative || !newTag.trim()) return;
+    const currentTags = selectedCreative.tags || [];
+    if (currentTags.includes(newTag.trim())) {
+      toast({ title: "Tag already exists", variant: "destructive" });
+      return;
+    }
+    const updatedTags = [...currentTags, newTag.trim()];
+    try {
+      await updateCreativeMutation.mutateAsync({
+        creativeId: selectedCreative.id,
+        data: { tags: updatedTags },
+      });
+      setSelectedCreative({ ...selectedCreative, tags: updatedTags });
+      setNewTag("");
+      toast({ title: "Tag added" });
+    } catch (error: any) {
+      toast({
+        title: "Failed to update tags",
+        description: error?.message,
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleRemoveTag = async (tag: string) => {
+    if (!selectedCreative) return;
+    const currentTags = selectedCreative.tags || [];
+    const updatedTags = currentTags.filter((t) => t !== tag);
+    try {
+      await updateCreativeMutation.mutateAsync({
+        creativeId: selectedCreative.id,
+        data: { tags: updatedTags },
+      });
+      setSelectedCreative({ ...selectedCreative, tags: updatedTags });
+      toast({ title: "Tag removed" });
+    } catch (error: any) {
+      toast({
+        title: "Failed to update tags",
+        description: error?.message,
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleDeleteCreative = (creative: Creative) => {
+    setCreativeToDelete(creative);
+    setDeleteDialogOpen(true);
+  };
+
+  const confirmDeleteCreative = async () => {
+    if (!creativeToDelete) return;
+    try {
+      await deleteCreativeMutation.mutateAsync({
+        creativeId: creativeToDelete.id,
+        performerId: user?.id,
+      });
+      toast({ title: "Creative deleted" });
+      setDeleteDialogOpen(false);
+      setCreativeToDelete(null);
+      if (selectedCreative?.id === creativeToDelete.id) {
+        setPreviewOpen(false);
+        setSelectedCreative(null);
+      }
+    } catch (error: any) {
+      toast({
+        title: "Failed to delete creative",
+        description: error?.message,
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleTranscode = (profiles: any[], formats?: any[]) => {
+    if (!transcodeCreative) return;
+    transcodeCreativeMutation.mutate(
+      {
+        creativeId: transcodeCreative.id,
+        payload: { profiles, target_formats: formats },
+      },
+      {
+        onSuccess: () => {
+          toast({ title: "Transcoding started" });
+          setTranscodeCreative(null);
+          refetchCreatives();
+        },
+        onError: (error: any) => {
+          toast({
+            title: "Transcoding failed",
+            description: error?.message,
+            variant: "destructive",
+          });
+        },
+      },
+    );
+  };
+
+  const handleFolderClick = (folderId: string) => {
+    setLocation(`/contenthub/folder/${folderId}`);
+  };
+
+  const getFolderSize = (folder: Folder): string => {
+    const totalFiles = folder.no_of_creatives;
+    return `${totalFiles * 2} MB`;
+  };
+
+  const handleClearFilters = () => {
+    setStatusFilter("all");
+    setTypeFilter("all");
+    setFolderFilter("all");
+    setCurrentPage(1);
+    setFilterOpen(false);
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const handlePageSizeChange = (newSize: number) => {
+    setPageSize(newSize);
+    setCurrentPage(1);
+  };
+
+  const sortedCreatives = useMemo(() => {
+    const arr = [...creatives];
+    arr.sort((a, b) => {
+      let cmp = 0;
+      switch (sortBy) {
+        case "filename":
+          cmp = a.filename.localeCompare(b.filename);
+          break;
+        case "size_bytes":
+          cmp = a.size_bytes - b.size_bytes;
+          break;
+        case "created_at":
+          cmp = new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
+          break;
+        case "status":
+          cmp = a.status.localeCompare(b.status);
+          break;
+        default:
+          cmp = 0;
+      }
+      return sortOrder === "asc" ? cmp : -cmp;
+    });
+    return arr;
+  }, [creatives, sortBy, sortOrder]);
+
+  const contentHubSortState: AgGridSortState[] = sortBy
+    ? [{ key: sortBy, direction: sortOrder }]
+    : [];
+
+  const handleAgGridSortChange = (newSort: AgGridSortState[]) => {
+    if (newSort.length === 0) {
+      setSortBy("created_at");
+      setSortOrder("desc");
+    } else {
+      setSortBy(newSort[0].key);
+      setSortOrder(newSort[0].direction);
+    }
+  };
+
+  const contentHubColumnDefs: ColDef<Creative>[] = [
+    {
+      colId: "filename",
+      headerName: "Name",
+      field: "filename",
+      sortable: true,
+      minWidth: 250,
+      flex: 1,
+      cellRenderer: (params: any) => {
+        const creative = params.data as Creative;
+        if (!creative) return null;
+        const cType = getCreativeType(creative.mime_type);
+        const TypeIcon = TYPE_ICONS[cType] || FileText;
+        return (
+          <div
+            className="flex items-center gap-3 cursor-pointer"
+            onClick={() => handlePreview(creative)}
+          >
+            <div className={`w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0 ${TYPE_COLORS[cType] || "bg-muted"}`}>
+              <TypeIcon className="h-4 w-4 text-muted-foreground/70" />
+            </div>
+            <span className="text-sm font-medium text-mw-neutral-700 dark:text-mw-neutral-200 truncate max-w-[250px]">
+              {creative.filename}
+            </span>
+          </div>
+        );
+      },
+    },
+    {
+      colId: "type",
+      headerName: "Type",
+      sortable: false,
+      cellRenderer: (params: any) => {
+        const creative = params.data as Creative;
+        if (!creative) return null;
+        return (
+          <span className="text-sm text-mw-neutral-600 dark:text-mw-neutral-400">
+            {getCreativeTypeLabel(creative.mime_type)}
+          </span>
+        );
+      },
+    },
+    {
+      colId: "status",
+      headerName: "Status",
+      field: "status",
+      sortable: true,
+      cellRenderer: (params: any) => {
+        const creative = params.data as Creative;
+        if (!creative) return null;
+        return <StatusBadge status={creative.status} />;
+      },
+    },
+    {
+      colId: "dimensions",
+      headerName: "Dimensions",
+      sortable: false,
+      cellRenderer: (params: any) => {
+        const creative = params.data as Creative;
+        if (!creative) return null;
+        return (
+          <span className="text-sm text-mw-neutral-600 dark:text-mw-neutral-400">
+            {creative.width && creative.height
+              ? `${creative.width}\u00d7${creative.height}`
+              : "0x0"}
+          </span>
+        );
+      },
+    },
+    {
+      colId: "size_bytes",
+      headerName: "Size",
+      field: "size_bytes",
+      sortable: true,
+      cellRenderer: (params: any) => {
+        const creative = params.data as Creative;
+        if (!creative) return null;
+        return (
+          <span className="text-sm text-mw-neutral-600 dark:text-mw-neutral-400">
+            {formatBytes(creative.size_bytes)}
+          </span>
+        );
+      },
+    },
+    {
+      colId: "created_at",
+      headerName: "Uploaded",
+      field: "created_at",
+      sortable: true,
+      cellRenderer: (params: any) => {
+        const creative = params.data as Creative;
+        if (!creative) return null;
+        return (
+          <span className="text-sm text-mw-neutral-600 dark:text-mw-neutral-400">
+            {formatDate(creative.created_at)}
+          </span>
+        );
+      },
+    },
+    {
+      colId: "actions",
+      headerName: "",
+      sortable: false,
+      width: 60,
+      cellRenderer: (params: any) => {
+        const creative = params.data as Creative;
+        if (!creative) return null;
+        return (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                isIconOnly
+                className="h-8 w-8 !p-0"
+              >
+                <MoreVertical className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                onClick={() => handlePreview(creative)}
+              >
+                <Eye className="h-4 w-4 mr-2" />
+                Preview
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() =>
+                  window.open(creative.cdn_path, "_blank")
+                }
+              >
+                <Download className="h-4 w-4 mr-2" />
+                Download
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => setTranscodeCreative(creative)}
+              >
+                <Wand2 className="h-4 w-4 mr-2" />
+                Transcode
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="text-destructive"
+                onClick={() => handleDeleteCreative(creative)}
+              >
+                <Trash2 className="h-4 w-4 mr-2" />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        );
+      },
+    },
+  ];
+
+  return (
+    <div className="h-[calc(100vh-72px)] w-full flex flex-col bg-mw-neutral-50 dark:bg-mw-neutral-900 overflow-hidden">
+      <div className="flex-shrink-0">
+        <PageHeader
+          title="Content Hub"
+          subtitle="Manage and organize your advertising creatives"
+          className="px-6 py-4 border-b border-mw-neutral-200"
+          actions={
+            <>
+              <Button
+                variant="outline"
+                onClick={() => setCreateFolderOpen(true)}
+              >
+                <Plus className="w-4 h-4 mr-2" />
+                New Folder
+              </Button>
+              <Button
+                variant="primary"
+                onClick={() => setUploadDialogOpen(true)}
+              >
+                <Upload className="w-4 h-4 mr-2" />
+                Upload Creatives
+              </Button>
+            </>
+          }
+        />
+      </div>
+
+      <Card className="flex-1 flex flex-col min-h-0 overflow-hidden border border-mw-neutral-200 rounded-lg bg-white mx-6 my-6">
+        <div className="flex-shrink-0 px-6 py-3 bg-white dark:bg-mw-neutral-800 border-b border-mw-neutral-100 dark:border-mw-neutral-700">
+          <div className="flex items-center gap-3">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-mw-neutral-400" />
+              <Input
+                placeholder="Search creatives..."
+                value={searchQuery}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  handleSearchChange(e.target.value)
+                }
+                className="w-full pl-10 pr-3 py-2"
+              />
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setFilterOpen(true)}
+              className="relative inline-flex items-center gap-2 px-3 py-2.5 text-sm font-medium"
+            >
+              <Filter className="h-4 w-4" />
+              Filters
+              {activeFilterCount > 0 && (
+                <Badge variant="secondary" className="ml-1">
+                  {activeFilterCount}
+                </Badge>
+              )}
+            </Button>
+            <div className="flex border border-mw-neutral-200 dark:border-mw-neutral-600 rounded-md">
+              <Button
+                variant={viewMode === "grid" ? "primary" : "outline"}
+                size="sm"
+                isIconOnly
+                className="rounded-r-none"
+                onClick={() => setViewMode("grid")}
+              >
+                <LayoutGrid className="w-4 h-4" />
+              </Button>
+              <Button
+                variant={viewMode === "list" ? "primary" : "outline"}
+                size="sm"
+                isIconOnly
+                className="rounded-l-none"
+                onClick={() => setViewMode("list")}
+              >
+                <List className="w-4 h-4" />
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex-1 flex flex-col overflow-y-auto min-h-0">
+          {folders.length > 0 && (
+            <div className="px-6 pt-4 pb-2">
+              <div className="flex items-center justify-between mb-3">
+                <Heading level={6}>Folders</Heading>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setLocation("/contenthub/folders")}
+                  className="text-mw-primary-500 dark:text-mw-primary-400 p-0 h-auto hover:underline"
+                >
+                  View All Folders
+                </Button>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
+                {folders.slice(0, 4).map((folder) => (
+                  <FolderCard
+                    key={folder.id}
+                    id={folder.id}
+                    name={folder.name}
+                    fileCount={folder.no_of_creatives}
+                    size={getFolderSize(folder)}
+                    onClick={() => handleFolderClick(folder.id)}
+                    onRename={() => {
+                      setSelectedFolder(folder);
+                      setUpdateFolderOpen(true);
+                    }}
+                    onDelete={() => {
+                      setSelectedFolder(folder);
+                      setDeleteFolderOpen(true);
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {isLoading ? (
+            <div className="flex items-center justify-center py-16">
+              <Loader2 className="w-8 h-8 animate-spin text-mw-primary-500" />
+            </div>
+          ) : creatives.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-16 text-center gap-4">
+              <Package className="w-16 h-16 text-mw-neutral-400" />
+              <Heading level={4}>No creatives found</Heading>
+              <Text size="sm" variant="muted" className="max-w-sm">
+                Upload your first creative to get started, or adjust your
+                filters.
+              </Text>
+              <Button onClick={() => setUploadDialogOpen(true)}>
+                <Upload className="w-4 h-4 mr-2" />
+                Upload Creatives
+              </Button>
+            </div>
+          ) : viewMode === "grid" ? (
+            <div className="px-6 py-4">
+              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
+              {sortedCreatives.map((creative) => {
+                const cType = getCreativeType(creative.mime_type);
+                const TypeIcon = TYPE_ICONS[cType] || FileText;
+                return (
+                  <Card
+                    key={creative.id}
+                    className="relative overflow-hidden cursor-pointer hover:shadow-md transition-shadow"
+                    onClick={() => handlePreview(creative)}
+                  >
+                    <div
+                      className={`aspect-video flex items-center justify-center ${TYPE_COLORS[cType] || "bg-muted"}`}
+                    >
+                      {creative.thumbnail ? (
+                        <img
+                          src={creative.thumbnail}
+                          alt={creative.filename}
+                          className="w-full h-full object-cover"
+                        />
+                      ) : (
+                        <TypeIcon className="h-10 w-10 text-muted-foreground/50" />
+                      )}
+                    </div>
+                    <div className="absolute top-2 right-2">
+                      <StatusBadge status={creative.status} />
+                    </div>
+                    <div
+                      className="absolute top-2 left-2"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            variant="secondary"
+                            size="sm"
+                            className="h-7 w-7 p-0"
+                          >
+                            <MoreVertical className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="left">
+                          <DropdownMenuItem
+                            onClick={() => handlePreview(creative)}
+                          >
+                            <Eye className="h-4 w-4 mr-2" />
+                            Preview
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            onClick={() =>
+                              window.open(creative.cdn_path, "_blank")
+                            }
+                          >
+                            <Download className="h-4 w-4 mr-2" />
+                            Download
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            onClick={() => setTranscodeCreative(creative)}
+                          >
+                            <Wand2 className="h-4 w-4 mr-2" />
+                            Transcode
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            className="text-destructive"
+                            onClick={() => handleDeleteCreative(creative)}
+                          >
+                            <Trash2 className="h-4 w-4 mr-2" />
+                            Delete
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                    <CardContent className="p-3 space-y-1.5">
+                      <p
+                        className="font-medium text-sm truncate"
+                        title={creative.filename}
+                      >
+                        {creative.filename}
+                      </p>
+                      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                        <span className="capitalize">{cType}</span>
+                        <span>•</span>
+                        <span>
+                          {creative.width && creative.height
+                            ? `${creative.width}x${creative.height}`
+                            : creative.format}
+                        </span>
+                      </div>
+                      {creative.tags && creative.tags.length > 0 && (
+                        <div className="flex flex-wrap gap-1">
+                          {creative.tags.slice(0, 3).map((tag) => (
+                            <Badge
+                              key={tag}
+                              variant="outline"
+                              className="text-xs"
+                            >
+                              {tag}
+                            </Badge>
+                          ))}
+                          {creative.tags.length > 3 && (
+                            <Badge variant="outline" className="text-xs">
+                              +{creative.tags.length - 3}
+                            </Badge>
+                          )}
+                        </div>
+                      )}
+                      <div className="flex items-center justify-between text-xs text-muted-foreground pt-1">
+                        <span>{formatBytes(creative.size_bytes)}</span>
+                        <span>{formatDate(creative.created_at)}</span>
+                      </div>
+                    </CardContent>
+                  </Card>
+                );
+              })}
+              </div>
+            </div>
+          ) : (
+            <div className="px-6 py-4">
+              <AgGridTable
+                rowData={sortedCreatives}
+                columnDefs={contentHubColumnDefs}
+                getRowId={(row) => row.id}
+                loading={false}
+                emptyMessage="No creatives found."
+                sortState={contentHubSortState}
+                onSortChange={handleAgGridSortChange}
+                domLayout="autoHeight"
+                serverSidePagination={true}
+                serverSideConfig={{
+                  totalCount: totalItems,
+                  currentPage,
+                  pageSize,
+                  onPageChange: handlePageChange,
+                  onPageSizeChange: handlePageSizeChange,
+                  pageSizeSelector: [10, 20, 50, 100],
+                }}
+              />
+            </div>
+          )}
+        </div>
+      </Card>
+
+      <Sheet open={previewOpen} onOpenChange={setPreviewOpen}>
+        <SheetContent side="right" className="w-[600px] p-0 overflow-y-auto">
+          {selectedCreative && (
+            <>
+              <SheetHeader className="p-4 border-b sticky top-0 bg-background z-10">
+                <div className="flex items-center justify-between">
+                  <SheetTitle className="text-base truncate pr-4">
+                    {selectedCreative.filename}
+                  </SheetTitle>
+                </div>
+              </SheetHeader>
+
+              <div className="w-full aspect-video bg-muted">
+                {(() => {
+                  const cType = getCreativeType(selectedCreative.mime_type);
+                  const TypeIcon = TYPE_ICONS[cType] || FileText;
+                  if (selectedCreative.thumbnail || selectedCreative.cdn_path) {
+                    if (cType === "video") {
+                      return (
+                        <video
+                          src={
+                            selectedCreative.cdn_path ||
+                            selectedCreative.thumbnail
+                          }
+                          controls
+                          className="w-full h-full object-contain"
+                        />
+                      );
+                    }
+                    return (
+                      <img
+                        src={
+                          selectedCreative.thumbnail ||
+                          selectedCreative.cdn_path
+                        }
+                        alt={selectedCreative.filename}
+                        className="w-full h-full object-contain"
+                      />
+                    );
+                  }
+                  return (
+                    <div
+                      className={`w-full h-full flex items-center justify-center ${TYPE_COLORS[cType] || "bg-muted"}`}
+                    >
+                      <TypeIcon className="h-16 w-16 text-muted-foreground/50" />
+                    </div>
+                  );
+                })()}
+              </div>
+
+              <div className="p-6 space-y-6">
+                <div>
+                  <div className="flex items-center justify-between mb-4">
+                    <h3 className="text-sm font-semibold">Status</h3>
+                    <StatusBadge status={selectedCreative.status} />
+                  </div>
+                  <div className="flex gap-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="text-green-600 border-green-300 hover:bg-green-50 dark:text-green-400 dark:border-green-700 dark:hover:bg-green-900/20"
+                      onClick={() => setApproveDialogOpen(true)}
+                      disabled={
+                        selectedCreative.status === "approved" ||
+                        approveCreativeMutation.isPending
+                      }
+                    >
+                      <Check className="w-4 h-4 mr-1" />
+                      Accept
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="text-red-600 border-red-300 hover:bg-red-50 dark:text-red-400 dark:border-red-700 dark:hover:bg-red-900/20"
+                      onClick={() => setRejectDialogOpen(true)}
+                      disabled={
+                        selectedCreative.status === "rejected" ||
+                        rejectCreativeMutation.isPending
+                      }
+                    >
+                      <XCircle className="w-4 h-4 mr-1" />
+                      Mark Inadequate
+                    </Button>
+                  </div>
+                </div>
+
+                <Separator />
+
+                <div>
+                  <h3 className="text-sm font-semibold mb-4">
+                    Creative Information
+                  </h3>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <p className="text-xs text-muted-foreground mb-1">Type</p>
+                      <p className="text-sm font-medium capitalize">
+                        {getCreativeType(selectedCreative.mime_type)}
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground mb-1">
+                        Format
+                      </p>
+                      <p className="text-sm font-medium">
+                        {selectedCreative.format}
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground mb-1">
+                        Dimensions
+                      </p>
+                      <p className="text-sm font-medium">
+                        {selectedCreative.width && selectedCreative.height
+                          ? `${selectedCreative.width}x${selectedCreative.height}`
+                          : "N/A"}
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground mb-1">
+                        File Size
+                      </p>
+                      <p className="text-sm font-medium">
+                        {formatBytes(selectedCreative.size_bytes)}
+                      </p>
+                    </div>
+                    {selectedCreative.duration_seconds && (
+                      <div>
+                        <p className="text-xs text-muted-foreground mb-1">
+                          Duration
+                        </p>
+                        <p className="text-sm font-medium">
+                          {Math.round(selectedCreative.duration_seconds)}s
+                        </p>
+                      </div>
+                    )}
+                    <div>
+                      <p className="text-xs text-muted-foreground mb-1">
+                        Uploaded
+                      </p>
+                      <p className="text-sm font-medium">
+                        {new Date(
+                          selectedCreative.created_at,
+                        ).toLocaleString()}
+                      </p>
+                    </div>
+                    {selectedCreative.approved_at && (
+                      <div>
+                        <p className="text-xs text-muted-foreground mb-1">
+                          Approved
+                        </p>
+                        <p className="text-sm font-medium">
+                          {new Date(
+                            selectedCreative.approved_at,
+                          ).toLocaleString()}
+                        </p>
+                      </div>
+                    )}
+                    {selectedCreative.approved_by && (
+                      <div>
+                        <p className="text-xs text-muted-foreground mb-1">
+                          Approved By
+                        </p>
+                        <p className="text-sm font-medium">
+                          {selectedCreative.approved_by}
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                <Separator />
+
+                <div>
+                  <h3 className="text-sm font-semibold mb-3">Tags</h3>
+                  <div className="flex flex-wrap gap-2 mb-3">
+                    {selectedCreative.tags &&
+                    selectedCreative.tags.length > 0 ? (
+                      selectedCreative.tags.map((tag) => (
+                        <Badge
+                          key={tag}
+                          variant="secondary"
+                          className="flex items-center gap-1"
+                        >
+                          {tag}
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            isIconOnly
+                            onClick={() => handleRemoveTag(tag)}
+                            className="ml-1 h-auto w-auto p-0"
+                          >
+                            <X className="w-3 h-3" />
+                          </Button>
+                        </Badge>
+                      ))
+                    ) : (
+                      <Text size="sm" variant="muted">
+                        No tags
+                      </Text>
+                    )}
+                  </div>
+                  <div className="flex gap-2">
+                    <Input
+                      placeholder="Add a tag..."
+                      value={newTag}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        setNewTag(e.target.value)
+                      }
+                      onKeyDown={(e: React.KeyboardEvent) => {
+                        if (e.key === "Enter") {
+                          e.preventDefault();
+                          handleAddTag();
+                        }
+                      }}
+                      className="flex-1"
+                    />
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={handleAddTag}
+                      disabled={!newTag.trim()}
+                    >
+                      <Plus className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </div>
+
+                <Separator />
+
+                <div className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    className="flex-1"
+                    onClick={() =>
+                      window.open(selectedCreative.cdn_path, "_blank")
+                    }
+                  >
+                    <Download className="w-4 h-4 mr-2" />
+                    Download
+                  </Button>
+                  <Button
+                    variant="outline"
+                    className="flex-1"
+                    onClick={() => setTranscodeCreative(selectedCreative)}
+                  >
+                    <Wand2 className="w-4 h-4 mr-2" />
+                    Transcode
+                  </Button>
+                  <Button
+                    variant="outline"
+                    className="flex-1 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
+                    onClick={() => handleDeleteCreative(selectedCreative)}
+                  >
+                    <Trash2 className="w-4 h-4 mr-2" />
+                    Delete
+                  </Button>
+                </div>
+              </div>
+            </>
+          )}
+        </SheetContent>
+      </Sheet>
+
+      <Sheet open={filterOpen} onOpenChange={setFilterOpen}>
+        <SheetContent side="right" className="w-[400px]">
+          <SheetHeader>
+            <SheetTitle>Filter Creatives</SheetTitle>
+          </SheetHeader>
+          <div className="py-6 space-y-6">
+            <div className="space-y-2">
+              <Label>Status</Label>
+              <Select
+                options={[
+                  { value: "all", label: "All Statuses" },
+                  { value: CreativeStatus.DRAFT, label: "Processing" },
+                  { value: CreativeStatus.APPROVED, label: "Accepted" },
+                  { value: CreativeStatus.REJECTED, label: "Inadequate" },
+                ]}
+                value={statusFilter}
+                onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                  setStatusFilter(e.target.value)
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="All Statuses" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Statuses</SelectItem>
+                  <SelectItem value={CreativeStatus.DRAFT}>
+                    Processing
+                  </SelectItem>
+                  <SelectItem value={CreativeStatus.APPROVED}>
+                    Accepted
+                  </SelectItem>
+                  <SelectItem value={CreativeStatus.REJECTED}>
+                    Inadequate
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label>Type</Label>
+              <Select
+                options={[
+                  { value: "all", label: "All Types" },
+                  { value: "image", label: "Image" },
+                  { value: "video", label: "Video" },
+                  { value: "audio", label: "Audio" },
+                ]}
+                value={typeFilter}
+                onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                  setTypeFilter(e.target.value)
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="All Types" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Types</SelectItem>
+                  <SelectItem value="image">Image</SelectItem>
+                  <SelectItem value="video">Video</SelectItem>
+                  <SelectItem value="audio">Audio</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label>Folder</Label>
+              <Select
+                options={[
+                  { value: "all", label: "All Folders" },
+                  ...folders.map((f) => ({ value: f.id, label: f.name })),
+                ]}
+                value={folderFilter}
+                onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                  setFolderFilter(e.target.value)
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="All Folders" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Folders</SelectItem>
+                  {folders.map((folder) => (
+                    <SelectItem key={folder.id} value={folder.id}>
+                      {folder.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="flex gap-2 pt-4 border-t">
+            <Button
+              variant="outline"
+              className="flex-1"
+              onClick={handleClearFilters}
+            >
+              Clear All
+            </Button>
+            <Button
+              variant="primary"
+              className="flex-1"
+              onClick={() => {
+                setCurrentPage(1);
+                setFilterOpen(false);
+              }}
+            >
+              Apply Filters
+            </Button>
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <CreateFolderDialog
+        open={createFolderOpen}
+        onOpenChange={setCreateFolderOpen}
+      />
+
+      <UpdateFolderDialog
+        open={updateFolderOpen}
+        onOpenChange={setUpdateFolderOpen}
+        folder={selectedFolder}
+      />
+
+      <DeleteFolderDialog
+        open={deleteFolderOpen}
+        onOpenChange={setDeleteFolderOpen}
+        folder={selectedFolder}
+      />
+
+      <CreativeUpload
+        open={uploadDialogOpen}
+        onOpenChange={setUploadDialogOpen}
+        onUploadComplete={() => {
+          setUploadDialogOpen(false);
+          refetchCreatives();
+        }}
+      />
+
+      {selectedCreative && (
+        <>
+          <ApproveDialog
+            open={approveDialogOpen}
+            onOpenChange={setApproveDialogOpen}
+            creativeFilename={selectedCreative.filename}
+            onConfirm={handleApprove}
+            isPending={approveCreativeMutation.isPending}
+          />
+
+          <RejectDialog
+            open={rejectDialogOpen}
+            onOpenChange={setRejectDialogOpen}
+            creativeFilename={selectedCreative.filename}
+            onConfirm={handleReject}
+            isPending={rejectCreativeMutation.isPending}
+          />
+        </>
+      )}
+
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>Delete Creative</DialogTitle>
+          </DialogHeader>
+          <div className="py-4">
+            <Text>
+              Are you sure you want to delete{" "}
+              <strong>{creativeToDelete?.filename}</strong>?
+            </Text>
+            <Text size="sm" variant="muted" className="mt-2">
+              This action cannot be undone.
+            </Text>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setDeleteDialogOpen(false);
+                setCreativeToDelete(null);
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={confirmDeleteCreative}
+              disabled={deleteCreativeMutation.isPending}
+            >
+              {deleteCreativeMutation.isPending ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  Deleting...
+                </>
+              ) : (
+                "Delete"
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {transcodeCreative && (
+        <TranscodeDialog
+          creative={transcodeCreative}
+          onTranscode={handleTranscode}
+          isTranscoding={transcodeCreativeMutation.isPending}
+        />
+      )}
+    </div>
+  );
+}