adserver-dashboard 1.0.0

package/Influence-MW-AdServer-12-02-2026/client/src/pages/content-hub.tsx

@@ -0,0 +1,995 @@
+import { useState, useMemo } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { PageHeader } from "@/components/page-header";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Skeleton } from "@/components/ui/skeleton";
+import { DataTable } from "@/components/data-table";
+import { FilterDrawer, FilterField, FilterValues } from "@/components/filter-drawer";
+import {
+  FolderPlus,
+  Upload,
+  Search,
+  Grid3X3,
+  List,
+  MoreVertical,
+  Eye,
+  Download,
+  Shuffle,
+  Trash2,
+  X,
+  Plus,
+  Image,
+  Video,
+  Code,
+  FileText,
+  Check,
+  AlertCircle,
+  Filter,
+} from "lucide-react";
+import { queryClient, apiRequest } from "@/lib/queryClient";
+import { useToast } from "@/hooks/use-toast";
+import type { Creative, CreativeFolder } from "@shared/schema";
+
+const STATUS_COLORS: Record<string, { variant: "default" | "secondary" | "destructive" | "outline"; className: string }> = {
+  new: { variant: "default", className: "bg-blue-500 hover:bg-blue-500" },
+  processing: { variant: "default", className: "bg-yellow-500 hover:bg-yellow-500" },
+  accepted: { variant: "default", className: "bg-green-500 hover:bg-green-500" },
+  inadequate: { variant: "destructive", className: "" },
+  archived: { variant: "secondary", className: "" },
+};
+
+const TYPE_COLORS: Record<string, string> = {
+  display: "bg-purple-100 dark:bg-purple-900",
+  video: "bg-red-100 dark:bg-red-900",
+  html: "bg-orange-100 dark:bg-orange-900",
+  native: "bg-teal-100 dark:bg-teal-900",
+};
+
+const TYPE_ICONS: Record<string, typeof Image> = {
+  display: Image,
+  video: Video,
+  html: Code,
+  native: FileText,
+};
+
+const STATUS_OPTIONS = [
+  { value: "new", label: "New" },
+  { value: "processing", label: "Processing" },
+  { value: "accepted", label: "Accepted" },
+  { value: "inadequate", label: "Inadequate" },
+  { value: "archived", label: "Archived" },
+];
+
+const TYPE_OPTIONS = [
+  { value: "display", label: "Display" },
+  { value: "video", label: "Video" },
+  { value: "html", label: "HTML" },
+  { value: "native", label: "Native" },
+];
+
+const initialFilterValues: FilterValues = {
+  status: [],
+  type: [],
+  folder: [],
+};
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return bytes + " B";
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+  return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+}
+
+function formatDate(dateStr: string | null): string {
+  if (!dateStr) return "N/A";
+  return new Date(dateStr).toLocaleDateString();
+}
+
+export default function ContentHub() {
+  const { toast } = useToast();
+  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [sortBy, setSortBy] = useState<string>("name");
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+  const [filterOpen, setFilterOpen] = useState(false);
+  const [filterValues, setFilterValues] = useState<FilterValues>(initialFilterValues);
+  const [appliedFilters, setAppliedFilters] = useState<FilterValues>(initialFilterValues);
+  const [selectedCreative, setSelectedCreative] = useState<Creative | null>(null);
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  const [isNewFolderDialogOpen, setIsNewFolderDialogOpen] = useState(false);
+  const [isUploadDialogOpen, setIsUploadDialogOpen] = useState(false);
+  const [newFolderName, setNewFolderName] = useState("");
+  const [newTag, setNewTag] = useState("");
+  const [inadequateReason, setInadequateReason] = useState("");
+  const [showInadequateInput, setShowInadequateInput] = useState(false);
+
+  const { data: creatives = [], isLoading: creativesLoading } = useQuery<Creative[]>({
+    queryKey: ["/api/creatives"],
+  });
+
+  const { data: folders = [], isLoading: foldersLoading } = useQuery<CreativeFolder[]>({
+    queryKey: ["/api/creative-folders"],
+  });
+
+  const { data: creativeSpecs } = useQuery<Record<string, {
+    formats: string[];
+    maxFileSize: string;
+    maxFileSizeBytes: number;
+    dimensions: Array<{ width: number; height: number; label: string }>;
+    maxDuration?: number;
+    notes: string[];
+  }>>({
+    queryKey: ["/api/creative-specs"],
+  });
+
+  const folderOptions = useMemo(() => 
+    folders.map(f => ({ value: f.id, label: f.name })),
+    [folders]
+  );
+
+  const filterFields: FilterField[] = [
+    {
+      key: "status",
+      label: "Status",
+      type: "multi-select",
+      options: STATUS_OPTIONS,
+    },
+    {
+      key: "type",
+      label: "Type",
+      type: "multi-select",
+      options: TYPE_OPTIONS,
+    },
+    {
+      key: "folder",
+      label: "Folder",
+      type: "multi-select",
+      options: folderOptions,
+    },
+  ];
+
+  const createFolderMutation = useMutation({
+    mutationFn: async (name: string) => {
+      return apiRequest("POST", "/api/creative-folders", { name });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/creative-folders"] });
+      setIsNewFolderDialogOpen(false);
+      setNewFolderName("");
+      toast({ title: "Folder created successfully" });
+    },
+    onError: () => {
+      toast({ title: "Failed to create folder", variant: "destructive" });
+    },
+  });
+
+  const updateCreativeMutation = useMutation({
+    mutationFn: async ({ id, data }: { id: string; data: Partial<Creative> }) => {
+      return apiRequest("PATCH", `/api/creatives/${id}`, data);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/creatives"] });
+      toast({ title: "Creative updated successfully" });
+    },
+    onError: () => {
+      toast({ title: "Failed to update creative", variant: "destructive" });
+    },
+  });
+
+  const deleteCreativeMutation = useMutation({
+    mutationFn: async (id: string) => {
+      return apiRequest("DELETE", `/api/creatives/${id}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/creatives"] });
+      setIsPreviewOpen(false);
+      setSelectedCreative(null);
+      toast({ title: "Creative deleted successfully" });
+    },
+    onError: () => {
+      toast({ title: "Failed to delete creative", variant: "destructive" });
+    },
+  });
+
+  const handleApplyFilters = () => {
+    setAppliedFilters(filterValues);
+    setFilterOpen(false);
+  };
+
+  const handleClearFilters = () => {
+    setFilterValues(initialFilterValues);
+    setAppliedFilters(initialFilterValues);
+    setFilterOpen(false);
+  };
+
+  const activeFilterCount = useMemo(() => {
+    let count = 0;
+    const statuses = appliedFilters.status as string[];
+    const types = appliedFilters.type as string[];
+    const folderIds = appliedFilters.folder as string[];
+    if (statuses?.length > 0) count++;
+    if (types?.length > 0) count++;
+    if (folderIds?.length > 0) count++;
+    return count;
+  }, [appliedFilters]);
+
+  const handleSort = (key: string) => {
+    if (sortBy === key) {
+      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+    } else {
+      setSortBy(key);
+      setSortOrder("asc");
+    }
+  };
+
+  const filteredCreatives = useMemo(() => {
+    let result = creatives || [];
+
+    if (searchQuery) {
+      result = result.filter((c) =>
+        c.name.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }
+
+    const statuses = appliedFilters.status as string[];
+    if (statuses?.length > 0) {
+      result = result.filter((c) => statuses.includes(c.status));
+    }
+
+    const types = appliedFilters.type as string[];
+    if (types?.length > 0) {
+      result = result.filter((c) => types.includes(c.type));
+    }
+
+    const folderIds = appliedFilters.folder as string[];
+    if (folderIds?.length > 0) {
+      result = result.filter((c) => c.folderId && folderIds.includes(c.folderId));
+    }
+
+    result = [...result].sort((a, b) => {
+      let comparison = 0;
+      switch (sortBy) {
+        case "name":
+          comparison = a.name.localeCompare(b.name);
+          break;
+        case "type":
+          comparison = a.type.localeCompare(b.type);
+          break;
+        case "status":
+          comparison = a.status.localeCompare(b.status);
+          break;
+        case "fileSize":
+          comparison = a.fileSize - b.fileSize;
+          break;
+        case "uploadedAt":
+          const dateA = a.uploadedAt ? new Date(a.uploadedAt).getTime() : 0;
+          const dateB = b.uploadedAt ? new Date(b.uploadedAt).getTime() : 0;
+          comparison = dateA - dateB;
+          break;
+        default:
+          comparison = 0;
+      }
+      return sortOrder === "asc" ? comparison : -comparison;
+    });
+
+    return result;
+  }, [creatives, searchQuery, appliedFilters, sortBy, sortOrder]);
+
+  const handleOpenPreview = (creative: Creative) => {
+    setSelectedCreative(creative);
+    setIsPreviewOpen(true);
+    setShowInadequateInput(false);
+    setInadequateReason("");
+  };
+
+  const handleAddTag = () => {
+    if (!selectedCreative || !newTag.trim()) return;
+    const currentTags = selectedCreative.tags || [];
+    if (currentTags.includes(newTag.trim())) {
+      toast({ title: "Tag already exists", variant: "destructive" });
+      return;
+    }
+    updateCreativeMutation.mutate({
+      id: selectedCreative.id,
+      data: { tags: [...currentTags, newTag.trim()] },
+    });
+    setSelectedCreative({ ...selectedCreative, tags: [...currentTags, newTag.trim()] });
+    setNewTag("");
+  };
+
+  const handleRemoveTag = (tag: string) => {
+    if (!selectedCreative) return;
+    const currentTags = selectedCreative.tags || [];
+    const newTags = currentTags.filter((t) => t !== tag);
+    updateCreativeMutation.mutate({
+      id: selectedCreative.id,
+      data: { tags: newTags },
+    });
+    setSelectedCreative({ ...selectedCreative, tags: newTags });
+  };
+
+  const handleAcceptCreative = () => {
+    if (!selectedCreative) return;
+    updateCreativeMutation.mutate({
+      id: selectedCreative.id,
+      data: { status: "accepted", inadequateReason: null },
+    });
+    setSelectedCreative({ ...selectedCreative, status: "accepted", inadequateReason: null });
+  };
+
+  const handleMarkInadequate = () => {
+    if (!selectedCreative || !inadequateReason.trim()) return;
+    updateCreativeMutation.mutate({
+      id: selectedCreative.id,
+      data: { status: "inadequate", inadequateReason: inadequateReason.trim() },
+    });
+    setSelectedCreative({ ...selectedCreative, status: "inadequate", inadequateReason: inadequateReason.trim() });
+    setShowInadequateInput(false);
+    setInadequateReason("");
+  };
+
+  const StatusBadgeComp = ({ status }: { status: string }) => {
+    const config = STATUS_COLORS[status] || STATUS_COLORS.new;
+    return (
+      <Badge variant={config.variant} className={config.className} data-testid={`badge-status-${status}`}>
+        {status.charAt(0).toUpperCase() + status.slice(1)}
+      </Badge>
+    );
+  };
+
+  const columns = [
+    {
+      key: "name",
+      header: "Name",
+      sortable: true,
+      render: (creative: Creative) => (
+        <div className="flex items-center gap-3">
+          <div className={`w-10 h-10 rounded flex items-center justify-center ${TYPE_COLORS[creative.type] || "bg-muted"}`}>
+            {(() => {
+              const TypeIcon = TYPE_ICONS[creative.type] || Image;
+              return <TypeIcon className="h-5 w-5 text-muted-foreground/50" />;
+            })()}
+          </div>
+          <span className="font-medium">{creative.name}</span>
+        </div>
+      ),
+    },
+    {
+      key: "type",
+      header: "Type",
+      sortable: true,
+      render: (creative: Creative) => (
+        <span className="capitalize">{creative.type}</span>
+      ),
+    },
+    {
+      key: "status",
+      header: "Status",
+      sortable: true,
+      render: (creative: Creative) => <StatusBadgeComp status={creative.status} />,
+    },
+    {
+      key: "dimensions",
+      header: "Dimensions",
+      sortable: false,
+      render: (creative: Creative) => `${creative.width}x${creative.height}`,
+    },
+    {
+      key: "fileSize",
+      header: "Size",
+      sortable: true,
+      render: (creative: Creative) => formatFileSize(creative.fileSize),
+    },
+    {
+      key: "uploadedAt",
+      header: "Uploaded",
+      sortable: true,
+      render: (creative: Creative) => formatDate(creative.uploadedAt),
+    },
+    {
+      key: "actions",
+      header: "",
+      sortable: false,
+      className: "w-12",
+      render: (creative: Creative) => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button size="icon" variant="ghost" data-testid={`button-menu-${creative.id}`}>
+              <MoreVertical className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => handleOpenPreview(creative)} data-testid="menu-item-preview">
+              <Eye className="h-4 w-4 mr-2" />
+              Preview
+            </DropdownMenuItem>
+            <DropdownMenuItem data-testid="menu-item-download">
+              <Download className="h-4 w-4 mr-2" />
+              Download
+            </DropdownMenuItem>
+            <DropdownMenuItem data-testid="menu-item-transcode">
+              <Shuffle className="h-4 w-4 mr-2" />
+              Transcode
+            </DropdownMenuItem>
+            <DropdownMenuItem 
+              className="text-destructive"
+              onClick={() => deleteCreativeMutation.mutate(creative.id)}
+              data-testid="menu-item-delete"
+            >
+              <Trash2 className="h-4 w-4 mr-2" />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    },
+  ];
+
+  const CreativeCard = ({ creative }: { creative: Creative }) => {
+    const TypeIcon = TYPE_ICONS[creative.type] || Image;
+    
+    return (
+      <Card
+        className="relative overflow-visible cursor-pointer hover-elevate"
+        onClick={() => handleOpenPreview(creative)}
+        data-testid={`card-creative-${creative.id}`}
+      >
+        <div className={`aspect-video flex items-center justify-center ${TYPE_COLORS[creative.type] || "bg-muted"}`}>
+          <TypeIcon className="h-12 w-12 text-muted-foreground/50" />
+        </div>
+        
+        <div className="absolute top-2 right-2">
+          <StatusBadgeComp status={creative.status} />
+        </div>
+        
+        <div className="absolute top-2 left-2" onClick={(e) => e.stopPropagation()}>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="icon" variant="secondary" className="h-7 w-7" data-testid={`button-menu-${creative.id}`}>
+                <MoreVertical className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem onClick={() => handleOpenPreview(creative)} data-testid="menu-item-preview">
+                <Eye className="h-4 w-4 mr-2" />
+                Preview
+              </DropdownMenuItem>
+              <DropdownMenuItem data-testid="menu-item-download">
+                <Download className="h-4 w-4 mr-2" />
+                Download
+              </DropdownMenuItem>
+              <DropdownMenuItem data-testid="menu-item-transcode">
+                <Shuffle className="h-4 w-4 mr-2" />
+                Transcode
+              </DropdownMenuItem>
+              <DropdownMenuItem 
+                className="text-destructive"
+                onClick={() => deleteCreativeMutation.mutate(creative.id)}
+                data-testid="menu-item-delete"
+              >
+                <Trash2 className="h-4 w-4 mr-2" />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+        
+        <div className="p-3 space-y-2">
+          <h3 className="font-medium text-sm truncate" title={creative.name}>
+            {creative.name}
+          </h3>
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <span>{creative.format}</span>
+            <span>•</span>
+            <span>{creative.width}x{creative.height}</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" data-testid={`badge-tag-${tag}`}>
+                  {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>{formatFileSize(creative.fileSize)}</span>
+            <span>{formatDate(creative.uploadedAt)}</span>
+          </div>
+        </div>
+      </Card>
+    );
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <PageHeader
+        title="Content Hub"
+        description="Manage and organize your advertising creatives"
+        actions={
+          <>
+            <Button variant="outline" onClick={() => setIsNewFolderDialogOpen(true)} data-testid="button-new-folder">
+              <FolderPlus className="h-4 w-4 mr-2" />
+              New Folder
+            </Button>
+            <Button onClick={() => setIsUploadDialogOpen(true)} data-testid="button-upload-creatives">
+              <Upload className="h-4 w-4 mr-2" />
+              Upload Creatives
+            </Button>
+          </>
+        }
+      />
+
+      <div className="flex flex-col sm:flex-row gap-4">
+        <div className="flex items-center gap-3 flex-1">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Search creatives..."
+              className="pl-9 bg-white dark:bg-background border"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              data-testid="input-search"
+            />
+          </div>
+          <Button
+            variant="outline"
+            onClick={() => setFilterOpen(true)}
+            className="bg-white dark:bg-background"
+            data-testid="button-open-filters"
+          >
+            <Filter className="h-4 w-4 mr-2" />
+            Filters
+            {activeFilterCount > 0 && (
+              <Badge variant="secondary" className="ml-2">{activeFilterCount}</Badge>
+            )}
+          </Button>
+        </div>
+        
+        <div className="flex border rounded-md">
+          <Button
+            variant={viewMode === "grid" ? "default" : "ghost"}
+            size="icon"
+            onClick={() => setViewMode("grid")}
+            data-testid="button-view-grid"
+          >
+            <Grid3X3 className="h-4 w-4" />
+          </Button>
+          <Button
+            variant={viewMode === "list" ? "default" : "ghost"}
+            size="icon"
+            onClick={() => setViewMode("list")}
+            data-testid="button-view-list"
+          >
+            <List className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {creativesLoading || foldersLoading ? (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+          {[...Array(8)].map((_, i) => (
+            <Card key={i} className="overflow-hidden">
+              <Skeleton className="aspect-video" />
+              <div className="p-3 space-y-2">
+                <Skeleton className="h-4 w-3/4" />
+                <Skeleton className="h-3 w-1/2" />
+              </div>
+            </Card>
+          ))}
+        </div>
+      ) : viewMode === "grid" ? (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+          {filteredCreatives.map((creative) => (
+            <CreativeCard key={creative.id} creative={creative} />
+          ))}
+          {filteredCreatives.length === 0 && (
+            <div className="col-span-full text-center py-12 text-muted-foreground">
+              No creatives found. Upload your first creative to get started.
+            </div>
+          )}
+        </div>
+      ) : (
+        <DataTable
+          columns={columns}
+          data={filteredCreatives}
+          isLoading={creativesLoading}
+          emptyMessage="No creatives found. Upload your first creative to get started."
+          onRowClick={handleOpenPreview}
+          sortKey={sortBy}
+          sortOrder={sortOrder}
+          onSort={handleSort}
+        />
+      )}
+
+      <FilterDrawer
+        open={filterOpen}
+        onOpenChange={setFilterOpen}
+        fields={filterFields}
+        values={filterValues}
+        onChange={setFilterValues}
+        onApply={handleApplyFilters}
+        onClear={handleClearFilters}
+        title="Filter Creatives"
+      />
+
+      <Sheet open={isPreviewOpen} onOpenChange={setIsPreviewOpen}>
+        <SheetContent className="w-[400px] sm:w-[540px] overflow-y-auto">
+          {selectedCreative && (
+            <>
+              <SheetHeader>
+                <SheetTitle className="pr-8">{selectedCreative.name}</SheetTitle>
+              </SheetHeader>
+
+              <div className="mt-6 space-y-6">
+                <div className={`aspect-video rounded-lg flex items-center justify-center ${TYPE_COLORS[selectedCreative.type] || "bg-muted"}`}>
+                  {(() => {
+                    const TypeIcon = TYPE_ICONS[selectedCreative.type] || Image;
+                    return <TypeIcon className="h-16 w-16 text-muted-foreground/50" />;
+                  })()}
+                </div>
+
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-muted-foreground">Status</span>
+                    <StatusBadgeComp status={selectedCreative.status} />
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-muted-foreground">Type</span>
+                    <span className="text-sm font-medium capitalize">{selectedCreative.type}</span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-muted-foreground">Format</span>
+                    <span className="text-sm font-medium">{selectedCreative.format}</span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-muted-foreground">Dimensions</span>
+                    <span className="text-sm font-medium">{selectedCreative.width}x{selectedCreative.height}</span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-muted-foreground">File Size</span>
+                    <span className="text-sm font-medium">{formatFileSize(selectedCreative.fileSize)}</span>
+                  </div>
+                  {selectedCreative.duration && (
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm text-muted-foreground">Duration</span>
+                      <span className="text-sm font-medium">{selectedCreative.duration}s</span>
+                    </div>
+                  )}
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-muted-foreground">Uploaded</span>
+                    <span className="text-sm font-medium">{formatDate(selectedCreative.uploadedAt)}</span>
+                  </div>
+                  {selectedCreative.uploadedBy && (
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm text-muted-foreground">Uploaded By</span>
+                      <span className="text-sm font-medium">{selectedCreative.uploadedBy}</span>
+                    </div>
+                  )}
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-muted-foreground">Source</span>
+                    <Badge 
+                      variant="outline" 
+                      className={`text-xs font-medium border-0 ${
+                        (() => {
+                          const platform = selectedCreative.sourcePlatform || "influence";
+                          const platformColors: Record<string, string> = {
+                            planner: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
+                            activate: "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200",
+                            influence: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200",
+                            media_owner: "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200",
+                          };
+                          return platformColors[platform] || platformColors.influence;
+                        })()
+                      }`}
+                    >
+                      {(() => {
+                        const source = selectedCreative.creativeSource || "uploaded";
+                        const platform = selectedCreative.sourcePlatform || "influence";
+                        
+                        const platformLabels: Record<string, string> = {
+                          planner: "Planner",
+                          activate: "Activate",
+                          influence: "Influence",
+                          media_owner: "Media Owner",
+                        };
+                        
+                        const sourceLabels: Record<string, string> = {
+                          uploaded: "Uploaded",
+                          bid_stream_vast: "Bid Stream",
+                          api: "API",
+                          media_owner: "Direct",
+                        };
+                        
+                        return platform === "influence" 
+                          ? sourceLabels[source] || "Uploaded"
+                          : `${platformLabels[platform] || platform} - ${sourceLabels[source] || source}`;
+                      })()}
+                    </Badge>
+                  </div>
+                  {selectedCreative.transcodingEnabled && (
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm text-muted-foreground">Transcoding</span>
+                      <Badge 
+                        variant="outline" 
+                        className={`text-xs ${
+                          selectedCreative.transcodingStatus === "completed" 
+                            ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+                            : selectedCreative.transcodingStatus === "failed"
+                            ? "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
+                            : "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
+                        }`}
+                      >
+                        {selectedCreative.transcodingStatus || "pending"}
+                      </Badge>
+                    </div>
+                  )}
+                </div>
+
+                {selectedCreative.inadequateReason && (
+                  <div className="bg-destructive/10 border border-destructive/20 rounded-md p-3">
+                    <div className="flex items-start gap-2">
+                      <AlertCircle className="h-4 w-4 text-destructive mt-0.5" />
+                      <div>
+                        <p className="text-sm font-medium text-destructive">Inadequate Reason</p>
+                        <p className="text-sm text-muted-foreground">{selectedCreative.inadequateReason}</p>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                <div className="space-y-2">
+                  <Label className="text-sm text-muted-foreground">Tags</Label>
+                  <div className="flex flex-wrap gap-2">
+                    {selectedCreative.tags?.map((tag) => (
+                      <Badge key={tag} variant="secondary" className="gap-1">
+                        {tag}
+                        <button
+                          onClick={() => handleRemoveTag(tag)}
+                          className="ml-1 hover:text-destructive"
+                          data-testid={`button-remove-tag-${tag}`}
+                        >
+                          <X className="h-3 w-3" />
+                        </button>
+                      </Badge>
+                    ))}
+                  </div>
+                  <div className="flex gap-2">
+                    <Input
+                      placeholder="Add tag..."
+                      value={newTag}
+                      onChange={(e) => setNewTag(e.target.value)}
+                      onKeyDown={(e) => e.key === "Enter" && handleAddTag()}
+                      data-testid="input-new-tag"
+                    />
+                    <Button size="icon" onClick={handleAddTag} data-testid="button-add-tag">
+                      <Plus className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="space-y-2 pt-4 border-t">
+                  <Label className="text-sm text-muted-foreground">Actions</Label>
+                  {selectedCreative.status !== "accepted" && (
+                    <Button 
+                      className="w-full" 
+                      onClick={handleAcceptCreative}
+                      data-testid="button-accept-creative"
+                    >
+                      <Check className="h-4 w-4 mr-2" />
+                      Accept Creative
+                    </Button>
+                  )}
+                  {!showInadequateInput && selectedCreative.status !== "inadequate" && (
+                    <Button 
+                      variant="outline" 
+                      className="w-full" 
+                      onClick={() => setShowInadequateInput(true)}
+                      data-testid="button-show-inadequate-form"
+                    >
+                      <AlertCircle className="h-4 w-4 mr-2" />
+                      Mark as Inadequate
+                    </Button>
+                  )}
+                  {showInadequateInput && (
+                    <div className="space-y-2">
+                      <Textarea
+                        placeholder="Enter reason for marking as inadequate..."
+                        value={inadequateReason}
+                        onChange={(e) => setInadequateReason(e.target.value)}
+                        data-testid="textarea-inadequate-reason"
+                      />
+                      <div className="flex gap-2">
+                        <Button 
+                          variant="destructive" 
+                          className="flex-1" 
+                          onClick={handleMarkInadequate}
+                          disabled={!inadequateReason.trim()}
+                          data-testid="button-confirm-inadequate"
+                        >
+                          Confirm
+                        </Button>
+                        <Button 
+                          variant="outline" 
+                          onClick={() => {
+                            setShowInadequateInput(false);
+                            setInadequateReason("");
+                          }}
+                          data-testid="button-cancel-inadequate"
+                        >
+                          Cancel
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </>
+          )}
+        </SheetContent>
+      </Sheet>
+
+      <Dialog open={isNewFolderDialogOpen} onOpenChange={setIsNewFolderDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create New Folder</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="folder-name">Folder Name</Label>
+              <Input
+                id="folder-name"
+                value={newFolderName}
+                onChange={(e) => setNewFolderName(e.target.value)}
+                placeholder="Enter folder name..."
+                data-testid="input-folder-name"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsNewFolderDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button 
+              onClick={() => createFolderMutation.mutate(newFolderName)}
+              disabled={!newFolderName.trim() || createFolderMutation.isPending}
+              data-testid="button-create-folder"
+            >
+              {createFolderMutation.isPending ? "Creating..." : "Create Folder"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={isUploadDialogOpen} onOpenChange={setIsUploadDialogOpen}>
+        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Upload Creatives</DialogTitle>
+          </DialogHeader>
+          
+          <div className="space-y-6 py-4">
+            <div className="border-2 border-dashed border-muted rounded-lg p-8 text-center">
+              <Upload className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
+              <p className="text-lg font-medium mb-2">Drag and drop files here</p>
+              <p className="text-sm text-muted-foreground mb-4">or click to browse files</p>
+              <Button variant="outline" data-testid="button-browse-files">
+                Browse Files
+              </Button>
+            </div>
+
+            <div className="border-t pt-6">
+              <h3 className="text-lg font-semibold mb-4">Creative Specifications</h3>
+              <p className="text-sm text-muted-foreground mb-6">
+                Please ensure your creatives meet the following requirements before uploading.
+              </p>
+              
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {creativeSpecs && Object.entries(creativeSpecs).map(([type, spec]) => (
+                  <Card key={type} className="p-4">
+                    <div className="flex items-center gap-3 mb-4">
+                      {type === "display" && <Image className="h-5 w-5 text-purple-500" />}
+                      {type === "video" && <Video className="h-5 w-5 text-red-500" />}
+                      {type === "html" && <Code className="h-5 w-5 text-orange-500" />}
+                      {type === "native" && <FileText className="h-5 w-5 text-teal-500" />}
+                      <h4 className="font-medium capitalize">{type}</h4>
+                    </div>
+                    
+                    <div className="space-y-3 text-sm">
+                      <div>
+                        <span className="text-muted-foreground">Formats:</span>
+                        <div className="flex flex-wrap gap-1 mt-1">
+                          {spec.formats.map((format) => (
+                            <Badge key={format} variant="secondary">{format}</Badge>
+                          ))}
+                        </div>
+                      </div>
+                      
+                      <div>
+                        <span className="text-muted-foreground">Max File Size:</span>
+                        <span className="ml-2 font-medium">{spec.maxFileSize}</span>
+                      </div>
+                      
+                      <div>
+                        <span className="text-muted-foreground">Dimensions:</span>
+                        <div className="flex flex-wrap gap-1 mt-1">
+                          {spec.dimensions.slice(0, 4).map((dim) => (
+                            <Badge key={dim.label} variant="outline" className="text-xs">
+                              {dim.width}x{dim.height}
+                            </Badge>
+                          ))}
+                          {spec.dimensions.length > 4 && (
+                            <Badge variant="outline" className="text-xs">
+                              +{spec.dimensions.length - 4} more
+                            </Badge>
+                          )}
+                        </div>
+                      </div>
+                      
+                      {spec.maxDuration && (
+                        <div>
+                          <span className="text-muted-foreground">Max Duration:</span>
+                          <span className="ml-2 font-medium">{spec.maxDuration}s</span>
+                        </div>
+                      )}
+                      
+                      {spec.notes.length > 0 && (
+                        <div className="pt-2 border-t">
+                          <span className="text-muted-foreground text-xs">Notes:</span>
+                          <ul className="mt-1 space-y-1">
+                            {spec.notes.map((note, idx) => (
+                              <li key={idx} className="text-xs text-muted-foreground flex items-start gap-1">
+                                <Check className="h-3 w-3 text-green-500 mt-0.5 flex-shrink-0" />
+                                {note}
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      )}
+                    </div>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          </div>
+          
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsUploadDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button data-testid="button-upload-submit" disabled>
+              Upload
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}