adserver-dashboard 1.0.0

package/Influence-MW-AdServer-12-02-2026/client/src/pages/assign-creative.tsx

@@ -0,0 +1,781 @@
+import { useState, useMemo } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { useParams, useLocation } from "wouter";
+import {
+  ArrowLeft,
+  Search,
+  Filter,
+  LayoutGrid,
+  LayoutList,
+  Image,
+  Video,
+  Code,
+  FileText,
+  ChevronDown,
+  X,
+  Loader2,
+  GripVertical,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import { cn } from "@/lib/utils";
+import type { Creative, LineItem } from "@shared/schema";
+
+interface CreativeRequirement {
+  id: string;
+  resolution: string;
+  duration: number;
+  format: "VIDEO" | "IMAGE";
+  inventoryCount: number;
+  assignedCreatives: Creative[];
+}
+
+interface AssignmentMap {
+  [requirementId: string]: Creative[];
+}
+
+const TYPE_ICONS: Record<string, typeof Image> = {
+  display: Image,
+  video: Video,
+  html: Code,
+  native: FileText,
+};
+
+const STATUS_STYLES: Record<string, { className: string; label: string }> = {
+  new: { className: "bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-500/20", label: "New" },
+  processing: { className: "bg-yellow-500/15 text-yellow-600 dark:text-yellow-400 border-yellow-500/20", label: "Processing" },
+  accepted: { className: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/20", label: "Accepted" },
+  inadequate: { className: "bg-red-500/15 text-red-600 dark:text-red-400 border-red-500/20", label: "Inadequate" },
+  pending: { className: "bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-500/20", label: "Pending" },
+  rejected: { className: "bg-red-500/15 text-red-600 dark:text-red-400 border-red-500/20", label: "Rejected" },
+};
+
+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";
+}
+
+const MOCK_REQUIREMENTS: CreativeRequirement[] = [
+  { id: "req-1", resolution: "1920x1080", duration: 10, format: "VIDEO", inventoryCount: 15, assignedCreatives: [] },
+  { id: "req-2", resolution: "1280x720", duration: 15, format: "VIDEO", inventoryCount: 8, assignedCreatives: [] },
+  { id: "req-3", resolution: "1024x768", duration: 10, format: "IMAGE", inventoryCount: 12, assignedCreatives: [] },
+  { id: "req-4", resolution: "1920x1080", duration: 20, format: "VIDEO", inventoryCount: 5, assignedCreatives: [] },
+];
+
+type FilterType = "all" | "video" | "display" | "native";
+type FilterStatus = "all" | "accepted" | "pending" | "rejected";
+type FilterFormat = "all" | "mp4" | "jpg_png" | "html5";
+type FilterDuration = "all" | "short" | "medium" | "long";
+type FilterResolution = "all" | "1920x1080" | "1280x720" | "1024x768";
+
+interface Filters {
+  type: FilterType;
+  status: FilterStatus;
+  format: FilterFormat;
+  duration: FilterDuration;
+  resolution: FilterResolution;
+}
+
+const initialFilters: Filters = {
+  type: "all",
+  status: "all",
+  format: "all",
+  duration: "all",
+  resolution: "all",
+};
+
+export default function AssignCreative() {
+  const { dealId, lineItemId } = useParams<{
+    dealId: string;
+    lineItemId: string;
+  }>();
+  const [, setLocation] = useLocation();
+  const { toast } = useToast();
+
+  const [viewBy, setViewBy] = useState<"resolution" | "inventory">("resolution");
+  const [selectedRequirement, setSelectedRequirement] = useState<string | null>(null);
+  const [showRelevantOnly, setShowRelevantOnly] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [filters, setFilters] = useState<Filters>(initialFilters);
+  const [assignments, setAssignments] = useState<AssignmentMap>({});
+  const [draggingCreative, setDraggingCreative] = useState<Creative | null>(null);
+  const [dragOverRequirement, setDragOverRequirement] = useState<string | null>(null);
+
+  const { data: lineItem } = useQuery<LineItem>({
+    queryKey: ["/api/line-items", lineItemId],
+    enabled: !!lineItemId,
+  });
+
+  const { data: creatives = [], isLoading: creativesLoading } = useQuery<Creative[]>({
+    queryKey: ["/api/creatives/assignable"],
+  });
+
+  const assignMutation = useMutation({
+    mutationFn: async (data: { creativeIds: string[] }) => {
+      const promises = data.creativeIds.map((creativeId) =>
+        apiRequest("POST", `/api/line-items/${lineItemId}/creatives`, { creativeId })
+      );
+      return Promise.all(promises);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/line-items", lineItemId, "creatives"] });
+      toast({
+        title: "Assignments saved",
+        description: "Creatives have been assigned successfully.",
+      });
+      setLocation(`/deals/${dealId}/line-items/${lineItemId}/creatives`);
+    },
+    onError: (error: Error) => {
+      toast({
+        title: "Failed to save assignments",
+        description: error.message,
+        variant: "destructive",
+      });
+    },
+  });
+
+  const selectedReq = useMemo(() => {
+    if (!selectedRequirement) return null;
+    return MOCK_REQUIREMENTS.find((r) => r.id === selectedRequirement) || null;
+  }, [selectedRequirement]);
+
+  const filteredCreatives = useMemo(() => {
+    let result = [...creatives];
+
+    result.sort((a, b) => {
+      const aTime = a.uploadedAt ? new Date(a.uploadedAt).getTime() : 0;
+      const bTime = b.uploadedAt ? new Date(b.uploadedAt).getTime() : 0;
+      return bTime - aTime;
+    });
+
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter(
+        (c) =>
+          c.name.toLowerCase().includes(query) ||
+          (c.fileUrl && c.fileUrl.toLowerCase().includes(query))
+      );
+    }
+
+    if (filters.type !== "all") {
+      result = result.filter((c) => c.type === filters.type);
+    }
+
+    if (filters.status !== "all") {
+      result = result.filter((c) => c.status === filters.status);
+    }
+
+    if (filters.format !== "all") {
+      result = result.filter((c) => {
+        const format = c.format.toLowerCase();
+        if (filters.format === "mp4") return format === "mp4";
+        if (filters.format === "jpg_png") return format === "jpg" || format === "png" || format === "jpeg";
+        if (filters.format === "html5") return format === "html" || format === "html5";
+        return true;
+      });
+    }
+
+    if (filters.duration !== "all") {
+      result = result.filter((c) => {
+        const duration = c.duration || 0;
+        if (filters.duration === "short") return duration <= 10;
+        if (filters.duration === "medium") return duration > 10 && duration <= 20;
+        if (filters.duration === "long") return duration > 20;
+        return true;
+      });
+    }
+
+    if (filters.resolution !== "all") {
+      result = result.filter((c) => `${c.width}x${c.height}` === filters.resolution);
+    }
+
+    if (showRelevantOnly && selectedReq) {
+      result = result.filter((c) => {
+        const resMatch = `${c.width}x${c.height}` === selectedReq.resolution;
+        const duration = c.duration || 0;
+        const durationMatch = Math.abs(duration - selectedReq.duration) <= 5;
+        return resMatch && durationMatch;
+      });
+    }
+
+    return result;
+  }, [creatives, searchQuery, filters, showRelevantOnly, selectedReq]);
+
+  const handleDragStart = (e: React.DragEvent, creative: Creative) => {
+    setDraggingCreative(creative);
+    e.dataTransfer.setData("creativeId", creative.id);
+    e.dataTransfer.effectAllowed = "copy";
+  };
+
+  const handleDragEnd = () => {
+    setDraggingCreative(null);
+    setDragOverRequirement(null);
+  };
+
+  const handleDragOver = (e: React.DragEvent, requirementId: string) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+    setDragOverRequirement(requirementId);
+  };
+
+  const handleDragLeave = () => {
+    setDragOverRequirement(null);
+  };
+
+  const handleDrop = (e: React.DragEvent, requirementId: string) => {
+    e.preventDefault();
+    setDragOverRequirement(null);
+
+    const creativeId = e.dataTransfer.getData("creativeId");
+    const creative = creatives.find((c) => c.id === creativeId);
+
+    if (!creative) return;
+
+    setAssignments((prev) => {
+      const existing = prev[requirementId] || [];
+      if (existing.some((c) => c.id === creative.id)) {
+        return prev;
+      }
+      return {
+        ...prev,
+        [requirementId]: [...existing, creative],
+      };
+    });
+  };
+
+  const handleRemoveAssignment = (requirementId: string, creativeId: string) => {
+    setAssignments((prev) => {
+      const existing = prev[requirementId] || [];
+      return {
+        ...prev,
+        [requirementId]: existing.filter((c) => c.id !== creativeId),
+      };
+    });
+  };
+
+  const handleSaveAssignments = () => {
+    const allCreativeIds = Object.values(assignments)
+      .flat()
+      .map((c) => c.id);
+    
+    const uniqueIds = [...new Set(allCreativeIds)];
+    
+    if (uniqueIds.length === 0) {
+      toast({
+        title: "No assignments",
+        description: "Please assign at least one creative before saving.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    assignMutation.mutate({ creativeIds: uniqueIds });
+  };
+
+  const handleClearFilters = () => {
+    setFilters(initialFilters);
+  };
+
+  const handleBack = () => {
+    setLocation(`/deals/${dealId}/line-items/${lineItemId}/creatives`);
+  };
+
+  const totalAssignments = Object.values(assignments).flat().length;
+
+  const CreativeStatusBadge = ({ status }: { status: string }) => {
+    const style = STATUS_STYLES[status] || STATUS_STYLES.pending;
+    return (
+      <Badge variant="outline" className={cn("capitalize border text-xs", style.className)}>
+        {style.label}
+      </Badge>
+    );
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-background flex flex-col"
+      data-testid="page-assign-creative"
+    >
+      <header className="flex items-center gap-4 px-6 py-4 border-b bg-background">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={handleBack}
+          data-testid="button-back"
+        >
+          <ArrowLeft className="h-5 w-5" />
+        </Button>
+        <div className="flex-1">
+          <h1 className="text-xl font-semibold" data-testid="text-page-title">
+            Creative Assignment
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            Use the transcoder to upload the right format for each creative requirement
+          </p>
+        </div>
+      </header>
+
+      <div className="flex-1 flex overflow-hidden">
+        <div className="w-[400px] flex-shrink-0 border-r flex flex-col">
+          <div className="p-4 border-b">
+            <div className="flex items-center justify-between gap-2">
+              <h2 className="font-semibold">Creative Requirements</h2>
+              <Select value={viewBy} onValueChange={(v) => setViewBy(v as "resolution" | "inventory")}>
+                <SelectTrigger className="w-[200px]" data-testid="select-view-by">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="resolution">By Resolution and Duration</SelectItem>
+                  <SelectItem value="inventory">By Selected Inventories</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="flex-1 overflow-auto p-4 space-y-3">
+            {MOCK_REQUIREMENTS.map((req, index) => {
+              const isSelected = selectedRequirement === req.id;
+              const isDragOver = dragOverRequirement === req.id;
+              const assignedCreatives = assignments[req.id] || [];
+
+              return (
+                <div
+                  key={req.id}
+                  className={cn(
+                    "border-2 border-dashed rounded-lg p-4 cursor-pointer transition-colors",
+                    isSelected
+                      ? "border-primary bg-primary/5"
+                      : "border-muted-foreground/30 hover:border-muted-foreground/50",
+                    isDragOver && "border-primary bg-primary/10"
+                  )}
+                  onClick={() => setSelectedRequirement(req.id)}
+                  onDragOver={(e) => handleDragOver(e, req.id)}
+                  onDragLeave={handleDragLeave}
+                  onDrop={(e) => handleDrop(e, req.id)}
+                  data-testid={`requirement-card-${req.id}`}
+                >
+                  <div className="flex items-start gap-3 mb-3">
+                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-muted text-muted-foreground text-sm font-medium">
+                      {index + 1}
+                    </div>
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2 mb-1">
+                        <span className="font-medium">{req.resolution}</span>
+                        <span className="text-muted-foreground">-</span>
+                        <span className="text-muted-foreground">{req.duration} seconds</span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Badge variant="outline" className="text-xs">
+                          {req.format}
+                        </Badge>
+                        <span className="text-xs text-muted-foreground">
+                          {req.inventoryCount} inventories
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+
+                  {assignedCreatives.length === 0 ? (
+                    <div className="text-center py-4 text-sm text-muted-foreground border border-dashed rounded-md">
+                      Drop creatives here to assign
+                    </div>
+                  ) : (
+                    <div className="space-y-2">
+                      {assignedCreatives.map((creative) => {
+                        const TypeIcon = TYPE_ICONS[creative.type] || Image;
+                        return (
+                          <div
+                            key={creative.id}
+                            className="flex items-center gap-2 p-2 bg-muted/50 rounded-md"
+                            data-testid={`assigned-creative-${creative.id}`}
+                          >
+                            <div className="w-10 h-10 bg-muted rounded flex items-center justify-center flex-shrink-0">
+                              {creative.thumbnailUrl ? (
+                                <img
+                                  src={creative.thumbnailUrl}
+                                  alt={creative.name}
+                                  className="w-full h-full object-cover rounded"
+                                />
+                              ) : (
+                                <TypeIcon className="h-4 w-4 text-muted-foreground" />
+                              )}
+                            </div>
+                            <div className="flex-1 min-w-0">
+                              <div className="text-sm font-medium truncate">{creative.name}</div>
+                              <div className="text-xs text-muted-foreground truncate">
+                                {creative.fileUrl || `${creative.width}x${creative.height}`}
+                              </div>
+                            </div>
+                            <CreativeStatusBadge status={creative.status} />
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="h-6 w-6 flex-shrink-0"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleRemoveAssignment(req.id, creative.id);
+                              }}
+                              data-testid={`button-remove-${creative.id}`}
+                            >
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        <div className="flex-1 flex flex-col overflow-hidden">
+          <div className="p-4 border-b space-y-4">
+            <div className="flex items-center justify-between gap-4">
+              <h2 className="font-semibold">Content Hub</h2>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant={showRelevantOnly ? "default" : "outline"}
+                  size="sm"
+                  onClick={() => setShowRelevantOnly(!showRelevantOnly)}
+                  data-testid="button-toggle-relevant"
+                >
+                  {showRelevantOnly ? "Show Relevant Only" : "Show All"}
+                </Button>
+              </div>
+            </div>
+
+            <p className="text-sm text-muted-foreground">
+              {showRelevantOnly && selectedReq
+                ? `Showing creatives matching ${selectedReq.resolution} resolution`
+                : "Showing all available creatives"}
+            </p>
+
+            <div className="flex items-center gap-3">
+              <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 by name or filename..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-9 bg-white dark:bg-background border"
+                  data-testid="input-search-creatives"
+                />
+              </div>
+              <Button
+                variant="outline"
+                onClick={() => setFiltersOpen(true)}
+                className="bg-white dark:bg-background"
+                data-testid="button-open-filters"
+              >
+                <Filter className="h-4 w-4 mr-2" />
+                Filters
+              </Button>
+              <div className="flex items-center border rounded-md bg-white dark:bg-background">
+                <Button
+                  variant={viewMode === "grid" ? "secondary" : "ghost"}
+                  size="icon"
+                  onClick={() => setViewMode("grid")}
+                  className="rounded-r-none"
+                  data-testid="button-view-grid"
+                >
+                  <LayoutGrid className="h-4 w-4" />
+                </Button>
+                <Button
+                  variant={viewMode === "list" ? "secondary" : "ghost"}
+                  size="icon"
+                  onClick={() => setViewMode("list")}
+                  className="rounded-l-none"
+                  data-testid="button-view-list"
+                >
+                  <LayoutList className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex-1 overflow-auto p-4">
+            {creativesLoading ? (
+              viewMode === "grid" ? (
+                <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                  {Array.from({ length: 8 }).map((_, i) => (
+                    <Card key={i} className="overflow-visible">
+                      <Skeleton className="aspect-video" />
+                      <CardContent className="p-3">
+                        <Skeleton className="h-4 w-3/4 mb-2" />
+                        <Skeleton className="h-3 w-1/2" />
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  {Array.from({ length: 6 }).map((_, i) => (
+                    <div key={i} className="flex items-center gap-4 p-3 border rounded-md">
+                      <Skeleton className="w-16 h-12 rounded" />
+                      <div className="flex-1">
+                        <Skeleton className="h-4 w-1/3 mb-2" />
+                        <Skeleton className="h-3 w-1/4" />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )
+            ) : filteredCreatives.length === 0 ? (
+              <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
+                <FileText className="h-12 w-12 mb-4" />
+                <p>No creatives found matching your criteria</p>
+              </div>
+            ) : viewMode === "grid" ? (
+              <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                {filteredCreatives.map((creative) => {
+                  const TypeIcon = TYPE_ICONS[creative.type] || Image;
+                  return (
+                    <Card
+                      key={creative.id}
+                      className={cn(
+                        "overflow-visible cursor-grab active:cursor-grabbing",
+                        draggingCreative?.id === creative.id && "opacity-50"
+                      )}
+                      draggable
+                      onDragStart={(e) => handleDragStart(e, creative)}
+                      onDragEnd={handleDragEnd}
+                      data-testid={`creative-card-${creative.id}`}
+                    >
+                      <div className="aspect-video bg-muted flex items-center justify-center relative">
+                        {creative.thumbnailUrl ? (
+                          <img
+                            src={creative.thumbnailUrl}
+                            alt={creative.name}
+                            className="w-full h-full object-cover"
+                          />
+                        ) : (
+                          <TypeIcon className="h-10 w-10 text-muted-foreground" />
+                        )}
+                        <div className="absolute top-2 right-2">
+                          <CreativeStatusBadge status={creative.status} />
+                        </div>
+                        <div className="absolute top-2 left-2">
+                          <GripVertical className="h-4 w-4 text-muted-foreground" />
+                        </div>
+                      </div>
+                      <CardContent className="p-3">
+                        <h3 className="font-medium text-sm truncate mb-1" title={creative.name}>
+                          {creative.name}
+                        </h3>
+                        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                          {creative.duration && <span>{creative.duration}s</span>}
+                          <span>{creative.width}x{creative.height}</span>
+                          <span>{formatFileSize(creative.fileSize)}</span>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {filteredCreatives.map((creative) => {
+                  const TypeIcon = TYPE_ICONS[creative.type] || Image;
+                  return (
+                    <div
+                      key={creative.id}
+                      className={cn(
+                        "flex items-center gap-4 p-3 border rounded-md cursor-grab active:cursor-grabbing hover-elevate",
+                        draggingCreative?.id === creative.id && "opacity-50"
+                      )}
+                      draggable
+                      onDragStart={(e) => handleDragStart(e, creative)}
+                      onDragEnd={handleDragEnd}
+                      data-testid={`creative-row-${creative.id}`}
+                    >
+                      <GripVertical className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+                      <div className="w-16 h-12 bg-muted rounded flex items-center justify-center flex-shrink-0">
+                        {creative.thumbnailUrl ? (
+                          <img
+                            src={creative.thumbnailUrl}
+                            alt={creative.name}
+                            className="w-full h-full object-cover rounded"
+                          />
+                        ) : (
+                          <TypeIcon className="h-6 w-6 text-muted-foreground" />
+                        )}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="font-medium text-sm truncate">{creative.name}</div>
+                        <div className="text-xs text-muted-foreground truncate">
+                          {creative.fileUrl || creative.format}
+                        </div>
+                      </div>
+                      <div className="text-xs text-muted-foreground whitespace-nowrap">
+                        {creative.duration && `${creative.duration}s`}
+                      </div>
+                      <div className="text-xs text-muted-foreground whitespace-nowrap">
+                        {creative.width}x{creative.height}
+                      </div>
+                      <div className="text-xs text-muted-foreground whitespace-nowrap">
+                        {formatFileSize(creative.fileSize)}
+                      </div>
+                      <CreativeStatusBadge status={creative.status} />
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+
+          <div className="p-4 border-t bg-background flex items-center justify-end gap-3">
+            <Button
+              variant="outline"
+              onClick={handleBack}
+              data-testid="button-cancel"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleSaveAssignments}
+              disabled={assignMutation.isPending}
+              data-testid="button-save-assignment"
+            >
+              {assignMutation.isPending && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+              Save Assignment {totalAssignments > 0 && `(${totalAssignments})`}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <Sheet open={filtersOpen} onOpenChange={setFiltersOpen}>
+        <SheetContent className="w-[320px] overflow-y-auto">
+          <SheetHeader>
+            <SheetTitle>Filters</SheetTitle>
+          </SheetHeader>
+
+          <div className="mt-6 space-y-6">
+            <div className="space-y-2">
+              <Label>Type</Label>
+              <Select
+                value={filters.type}
+                onValueChange={(v) => setFilters((prev) => ({ ...prev, type: v as FilterType }))}
+              >
+                <SelectTrigger data-testid="filter-type">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Types</SelectItem>
+                  <SelectItem value="video">Video</SelectItem>
+                  <SelectItem value="display">Image</SelectItem>
+                  <SelectItem value="native">Native</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label>Status</Label>
+              <Select
+                value={filters.status}
+                onValueChange={(v) => setFilters((prev) => ({ ...prev, status: v as FilterStatus }))}
+              >
+                <SelectTrigger data-testid="filter-status">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Statuses</SelectItem>
+                  <SelectItem value="accepted">Accepted</SelectItem>
+                  <SelectItem value="pending">Pending</SelectItem>
+                  <SelectItem value="rejected">Rejected</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label>Format</Label>
+              <Select
+                value={filters.format}
+                onValueChange={(v) => setFilters((prev) => ({ ...prev, format: v as FilterFormat }))}
+              >
+                <SelectTrigger data-testid="filter-format">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Formats</SelectItem>
+                  <SelectItem value="mp4">MP4</SelectItem>
+                  <SelectItem value="jpg_png">JPG/PNG</SelectItem>
+                  <SelectItem value="html5">HTML5</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label>Duration</Label>
+              <Select
+                value={filters.duration}
+                onValueChange={(v) => setFilters((prev) => ({ ...prev, duration: v as FilterDuration }))}
+              >
+                <SelectTrigger data-testid="filter-duration">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Durations</SelectItem>
+                  <SelectItem value="short">Short (10s or less)</SelectItem>
+                  <SelectItem value="medium">Medium (11-20s)</SelectItem>
+                  <SelectItem value="long">Long (more than 20s)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label>Resolution</Label>
+              <Select
+                value={filters.resolution}
+                onValueChange={(v) => setFilters((prev) => ({ ...prev, resolution: v as FilterResolution }))}
+              >
+                <SelectTrigger data-testid="filter-resolution">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Resolutions</SelectItem>
+                  <SelectItem value="1920x1080">1920x1080</SelectItem>
+                  <SelectItem value="1280x720">1280x720</SelectItem>
+                  <SelectItem value="1024x768">1024x768</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <Button
+              variant="outline"
+              className="w-full"
+              onClick={handleClearFilters}
+              data-testid="button-clear-filters"
+            >
+              Clear All Filters
+            </Button>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+}