adserver-dashboard 1.0.0

package/client/src/pages/line-item-creatives.tsx

@@ -0,0 +1,789 @@
+import { useState } from "react";
+import { useTranslation } from "@/lib/i18n";
+import { useParams, useLocation } from "wouter";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { Button, cn } from "@moving-walls/design-system";
+import { Card, CardContent, CardHeader } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+import { Input } from "@moving-walls/design-system";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@moving-walls/design-system";
+import { AgGridTable } from "@moving-walls/design-system";
+import type { ColDef } from "@moving-walls/design-system";
+
+import {
+  SelectRoot,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@moving-walls/design-system";
+import { 
+  ArrowLeft, 
+  Plus, 
+  Trash2, 
+  Image as ImageIcon, 
+  Video, 
+  Loader2,
+  Eye,
+  CheckCircle,
+  Clock,
+  XCircle,
+  Search,
+  Filter,
+  LayoutGrid,
+  LayoutList,
+  FileText,
+  MoreHorizontal,
+  Settings2,
+  X,
+  GripVertical,
+  SlidersHorizontal
+} from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+import { InfluenceDealsAPI, influenceDealsRequest } from "@/lib/influence-deals-api";
+import { CreativeSelector, type SelectedCreative } from "@/components/content-hub/creative-selector";
+import { usePageTitle } from "@/hooks/use-page-title";
+import { useCreatives } from "@/lib/content-hub-api";
+import type { Creative as ContentHubCreative } from "@/types/content-hub";
+
+interface Creative {
+  id: string;
+  creativeId?: string;
+  name: string;
+  type: 'IMAGE' | 'VIDEO';
+  mimeType?: string;
+  size?: number;
+  resolution?: string;
+  duration?: number;
+  url?: string;
+  creativeUri?: string;
+  thumbnailUrl?: string;
+  status: string;
+  tags?: string[];
+}
+
+interface AssignedCreative {
+  id: string;
+  name: string;
+  type: "IMAGE" | "VIDEO";
+  thumbnailUrl?: string;
+  resolution?: string;
+  duration?: number;
+}
+
+function getCreativeTypeFromHub(creative: ContentHubCreative): "IMAGE" | "VIDEO" {
+  if (creative.mime_type?.startsWith("video/") || creative.format?.toLowerCase().includes("video")) return "VIDEO";
+  return "IMAGE";
+}
+
+function formatFileSizeAssign(bytes?: number): string {
+  if (!bytes) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export default function LineItemCreativesPage() {
+  const { t } = useTranslation('common');
+  usePageTitle(t('creatives.title'));
+  const { dealId, lineItemId } = useParams<{ dealId: string; lineItemId: string }>();
+  const [, setLocation] = useLocation();
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [viewMode, setViewMode] = useState<"table" | "grid">("table");
+  const [isAssignmentSheetOpen, setIsAssignmentSheetOpen] = useState(false);
+  const [assignSearchQuery, setAssignSearchQuery] = useState("");
+  const [assignViewMode, setAssignViewMode] = useState<"grid" | "list">("grid");
+  const [draggedCreative, setDraggedCreative] = useState<ContentHubCreative | null>(null);
+  const [resolutionRequirements, setResolutionRequirements] = useState([
+    { resolution: "1920x1080", duration: 10, type: "VIDEO" as const, inventoryCount: 15, assignedCreatives: [] as AssignedCreative[] },
+    { resolution: "1280x720", duration: 15, type: "VIDEO" as const, inventoryCount: 8, assignedCreatives: [] as AssignedCreative[] },
+    { resolution: "1024x768", duration: 10, type: "IMAGE" as const, inventoryCount: 12, assignedCreatives: [] as AssignedCreative[] },
+    { resolution: "1920x1080", duration: 20, type: "VIDEO" as const, inventoryCount: 5, assignedCreatives: [] as AssignedCreative[] },
+  ]);
+  const { toast } = useToast();
+
+  const { data: dealData } = useQuery({
+    queryKey: ['deal', dealId],
+    queryFn: async () => {
+      const response = await influenceDealsRequest<any>(
+        InfluenceDealsAPI.deals.get(dealId!)
+      );
+      return response?.data || response;
+    },
+    enabled: !!dealId,
+  });
+
+  const { data: lineItemData, isLoading: isLoadingLineItem } = useQuery({
+    queryKey: ['line-item', dealId, lineItemId],
+    queryFn: async () => {
+      const response = await influenceDealsRequest<any>(
+        InfluenceDealsAPI.lineItems.get(dealId!, lineItemId!)
+      );
+      return response?.data || response || { name: 'Line Item' };
+    },
+    enabled: !!dealId && !!lineItemId,
+  });
+
+  const creativeDealId = dealData?.dealId || dealId;
+  
+  const { data: assignedCreatives = [], isLoading: isLoadingCreatives, refetch: refetchCreatives } = useQuery({
+    queryKey: ['line-item-creatives', creativeDealId, lineItemId],
+    queryFn: async (): Promise<Creative[]> => {
+      const response = await influenceDealsRequest<any>(
+        InfluenceDealsAPI.creatives.listByLineItem(creativeDealId!, lineItemId!)
+      );
+      const creatives = response?.data || response?.creatives || response || [];
+      return Array.isArray(creatives) ? creatives.map((c: any) => ({
+        id: c.id || c._id || c.creativeId,
+        creativeId: c.creativeId || c.id || c._id,
+        name: c.name || 'Untitled Creative',
+        type: c.type || 'IMAGE',
+        mimeType: c.mimeType,
+        size: c.size,
+        resolution: c.resolution,
+        duration: c.duration,
+        url: c.creativeUri || c.url,
+        creativeUri: c.creativeUri,
+        thumbnailUrl: c.thumbnailUrl,
+        status: c.status || 'PENDING',
+        tags: c.tags,
+      })) : [];
+    },
+    enabled: !!dealId && !!lineItemId,
+  });
+
+  const addCreativesMutation = useMutation({
+    mutationFn: async (creatives: SelectedCreative[]) => {
+      for (const creative of creatives) {
+        await influenceDealsRequest<any>(
+          InfluenceDealsAPI.creatives.create(creativeDealId!, lineItemId!),
+          'POST',
+          {
+            creativeId: creative.id,
+            creativeUri: creative.url,
+            creativeType: creative.type === 'VIDEO' ? 'VIDEO' : 'DISPLAY',
+            mimeType: creative.mimeType || (creative.type === 'VIDEO' ? 'video/mp4' : 'image/png'),
+            duration: creative.duration || 0,
+          }
+        );
+      }
+    },
+    onSuccess: () => {
+      toast({
+        title: t('creatives.added'),
+        description: t('creatives.addedDescription'),
+      });
+      refetchCreatives();
+    },
+    onError: (error: any) => {
+      toast({
+        title: t('creatives.errorAdding'),
+        description: error.message || t('creatives.errorAddingDescription'),
+        variant: "destructive",
+      });
+    },
+  });
+
+  const deleteCreativeMutation = useMutation({
+    mutationFn: async (creativeId: string) => {
+      await influenceDealsRequest<any>(
+        InfluenceDealsAPI.creatives.delete(creativeDealId!, lineItemId!, creativeId),
+        'DELETE'
+      );
+    },
+    onSuccess: () => {
+      toast({
+        title: t('creatives.removed'),
+        description: t('creatives.removedDescription'),
+      });
+      refetchCreatives();
+    },
+    onError: (error: any) => {
+      toast({
+        title: t('creatives.errorRemoving'),
+        description: error.message || t('creatives.errorRemovingDescription'),
+        variant: "destructive",
+      });
+    },
+  });
+
+  const handleAddCreatives = (selectedCreatives: SelectedCreative[]) => {
+    addCreativesMutation.mutate(selectedCreatives);
+  };
+
+  const { data: hubCreativesResponse, isLoading: isLoadingHubCreatives } = useCreatives({
+    limit: 50,
+    page: 1,
+  });
+  const hubCreatives = hubCreativesResponse?.data || [];
+
+  const handleDragStart = (e: React.DragEvent, creative: ContentHubCreative) => {
+    setDraggedCreative(creative);
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", creative.id);
+  };
+
+  const handleDragEnd = () => setDraggedCreative(null);
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+  };
+
+  const handleDrop = (e: React.DragEvent, requirementIndex: number) => {
+    e.preventDefault();
+    if (!draggedCreative) return;
+    const creativeType = getCreativeTypeFromHub(draggedCreative);
+    const resolution = draggedCreative.metadata?.resolution || 
+      (draggedCreative.width && draggedCreative.height ? `${draggedCreative.width}x${draggedCreative.height}` : "");
+    const assignedCreative: AssignedCreative = {
+      id: draggedCreative.id,
+      name: draggedCreative.filename || "Untitled",
+      type: creativeType,
+      thumbnailUrl: draggedCreative.thumbnail,
+      resolution,
+      duration: draggedCreative.duration_seconds || draggedCreative.metadata?.duration,
+    };
+    setResolutionRequirements(prev => {
+      const updated = [...prev];
+      updated[requirementIndex] = {
+        ...updated[requirementIndex],
+        assignedCreatives: [...updated[requirementIndex].assignedCreatives, assignedCreative],
+      };
+      return updated;
+    });
+    setDraggedCreative(null);
+  };
+
+  const handleRemoveAssigned = (reqIndex: number, creativeId: string) => {
+    setResolutionRequirements(prev => {
+      const updated = [...prev];
+      updated[reqIndex] = {
+        ...updated[reqIndex],
+        assignedCreatives: updated[reqIndex].assignedCreatives.filter(c => c.id !== creativeId),
+      };
+      return updated;
+    });
+  };
+
+  const handleSaveAssignment = () => {
+    toast({ title: "Assignment saved", description: "Creative assignments have been saved." });
+    setIsAssignmentSheetOpen(false);
+  };
+
+  const formatFileSize = (bytes?: number) => {
+    if (!bytes) return '--';
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+
+  const getStatusBadgeClass = (status: string) => {
+    switch (status?.toUpperCase()) {
+      case 'ACCEPTED':
+      case 'APPROVED':
+        return 'bg-green-50 text-green-700 border-green-200';
+      case 'REJECTED':
+      case 'INADEQUATE':
+        return 'bg-red-50 text-red-700 border-red-200';
+      case 'PROCESSING':
+      case 'PENDING':
+        return 'bg-yellow-50 text-yellow-700 border-yellow-200';
+      default:
+        return 'bg-gray-50 text-gray-700 border-gray-200';
+    }
+  };
+
+  const isLoading = isLoadingLineItem || isLoadingCreatives;
+  const excludeIds = assignedCreatives.map(c => c.id);
+
+  const totalCreatives = assignedCreatives.length;
+  const approvedCount = assignedCreatives.filter(c => c.status === 'APPROVED' || c.status === 'ACCEPTED').length;
+  const pendingCount = assignedCreatives.filter(c => c.status === 'PENDING' || c.status === 'PROCESSING').length;
+  const rejectedCount = assignedCreatives.filter(c => c.status === 'REJECTED' || c.status === 'INADEQUATE').length;
+
+  const filteredCreatives = assignedCreatives.filter(c =>
+    c.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const creativeColumnDefs: ColDef<Creative>[] = [
+    {
+      colId: "name",
+      headerName: "Creative Name",
+      field: "name",
+      sortable: true,
+      minWidth: 200,
+      flex: 1,
+      cellRenderer: (params: any) => {
+        const c = params.data as Creative;
+        if (!c) return null;
+        return (
+          <span className="text-sm font-medium text-mw-primary-500 hover:underline cursor-pointer">
+            {c.name}
+          </span>
+        );
+      },
+    },
+    {
+      colId: "creativeId",
+      headerName: "Creative ID",
+      sortable: false,
+      cellRenderer: (params: any) => {
+        const c = params.data as Creative;
+        if (!c) return null;
+        return (
+          <span className="text-sm text-mw-neutral-600">
+            {c.creativeId || c.id}
+          </span>
+        );
+      },
+    },
+    {
+      colId: "source",
+      headerName: "Source",
+      sortable: false,
+      cellRenderer: () => (
+        <span className="text-sm text-mw-neutral-600">Uploaded</span>
+      ),
+    },
+    {
+      colId: "status",
+      headerName: "Status",
+      field: "status",
+      sortable: true,
+      cellRenderer: (params: any) => {
+        const c = params.data as Creative;
+        if (!c) return null;
+        return (
+          <Badge
+            variant="outline"
+            className={cn("text-xs", getStatusBadgeClass(c.status))}
+          >
+            {c.status}
+          </Badge>
+        );
+      },
+    },
+    {
+      colId: "rule",
+      headerName: "Rule",
+      sortable: false,
+      cellRenderer: () => (
+        <span className="text-sm text-mw-neutral-600">default</span>
+      ),
+    },
+    {
+      colId: "duration",
+      headerName: "Duration",
+      sortable: false,
+      cellRenderer: (params: any) => {
+        const c = params.data as Creative;
+        if (!c) return null;
+        return (
+          <span className="text-sm text-mw-neutral-600">
+            {c.duration ? `${c.duration} sec` : "-"}
+          </span>
+        );
+      },
+    },
+    {
+      colId: "resolution",
+      headerName: "Resolution",
+      sortable: false,
+      cellRenderer: (params: any) => {
+        const c = params.data as Creative;
+        if (!c) return null;
+        return (
+          <span className="text-sm text-mw-neutral-600">
+            {c.resolution || "-"}
+          </span>
+        );
+      },
+    },
+    {
+      colId: "adPlay",
+      headerName: "Ad Play",
+      sortable: false,
+      cellRenderer: () => (
+        <span className="text-sm text-mw-neutral-600">0</span>
+      ),
+    },
+    {
+      colId: "startTime",
+      headerName: "Start Time",
+      sortable: false,
+      cellRenderer: () => (
+        <span className="text-sm text-mw-neutral-600">-</span>
+      ),
+    },
+    {
+      colId: "endTime",
+      headerName: "End Time",
+      sortable: false,
+      cellRenderer: () => (
+        <span className="text-sm text-mw-neutral-600">-</span>
+      ),
+    },
+  ];
+
+  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-1 w-full overflow-auto px-6 py-6 space-y-6">
+        <div className="flex items-center gap-2 text-sm text-mw-neutral-500">
+          <span className="hover:text-mw-primary-500 cursor-pointer" onClick={() => setLocation("/deals")}>Deals</span>
+          <span>›</span>
+          <span className="hover:text-mw-primary-500 cursor-pointer" onClick={() => setLocation(`/deals/${dealId}/line-items`)}>{dealData?.name || "Deal"}</span>
+          <span>›</span>
+          <span className="hover:text-mw-primary-500 cursor-pointer" onClick={() => setLocation(`/deals/${dealId}/line-items`)}>{lineItemData?.name || "Line Item"}</span>
+          <span>›</span>
+          <span className="text-mw-neutral-900 font-medium">Creatives</span>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <Button variant="ghost" size="sm" onClick={() => setLocation(`/deals/${dealId}/line-items`)} isIconOnly className="h-9 w-9 !p-0">
+            <ArrowLeft className="h-5 w-5" />
+          </Button>
+          <div>
+            <h1 className="text-xl font-semibold text-mw-neutral-900 dark:text-white">Line Item Creatives</h1>
+            <p className="text-sm text-mw-neutral-500">Manage creatives assigned to {lineItemData?.name || 'this line item'}</p>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-4 gap-4">
+          {[
+            { label: "Total Creatives", value: totalCreatives, icon: FileText, bgColor: "bg-blue-50", iconColor: "text-blue-500" },
+            { label: "Approved", value: approvedCount, icon: CheckCircle, bgColor: "bg-green-50", iconColor: "text-green-500" },
+            { label: "Pending Review", value: pendingCount, icon: Clock, bgColor: "bg-amber-50", iconColor: "text-amber-500" },
+            { label: "Rejected", value: rejectedCount, icon: XCircle, bgColor: "bg-red-50", iconColor: "text-red-500" },
+          ].map((metric) => (
+            <Card key={metric.label} className="border-blue-100 dark:border-mw-neutral-700">
+              <CardContent className="p-5">
+                <div className="flex items-start justify-between">
+                  <div>
+                    <p className="text-sm text-mw-neutral-500 dark:text-mw-neutral-400">{metric.label}</p>
+                    <p className="text-2xl font-semibold text-mw-neutral-900 dark:text-white mt-2">{metric.value}</p>
+                  </div>
+                  <div className={cn("p-2 rounded-lg", metric.bgColor)}>
+                    <metric.icon className={cn("h-5 w-5", metric.iconColor)} />
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        <Card className="border-mw-neutral-100">
+          <CardContent className="flex items-center justify-between py-3 px-4">
+            <span className="text-sm font-medium text-mw-neutral-700 dark:text-mw-neutral-300">Player Status</span>
+            <div className="flex items-center gap-3 text-sm text-mw-neutral-600">
+              <span className="flex items-center gap-1">
+                <span className="h-2 w-2 rounded-full bg-green-500" />
+                {approvedCount}
+              </span>
+              <span className="flex items-center gap-1">
+                <span className="h-2 w-2 rounded-full bg-red-500" />
+                <span className="h-2 w-2 rounded-full bg-red-500" />
+                {totalCreatives - approvedCount}
+              </span>
+              <span className="text-mw-neutral-400">of {totalCreatives} total</span>
+            </div>
+          </CardContent>
+        </Card>
+
+        <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-mw-neutral-400" />
+            <Input
+              placeholder="Search creatives..."
+              value={searchQuery}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
+              className="pl-9 h-9"
+            />
+          </div>
+          <div className="flex items-center border border-mw-neutral-200 rounded-md">
+            <Button
+              variant={viewMode === "table" ? "secondary" : "ghost"}
+              size="sm"
+              onClick={() => setViewMode("table")}
+              className={cn("rounded-r-none h-9", viewMode === "table" && "bg-mw-neutral-100")}
+              isIconOnly
+            >
+              <LayoutList className="h-4 w-4" />
+            </Button>
+            <Button
+              variant={viewMode === "grid" ? "secondary" : "ghost"}
+              size="sm"
+              onClick={() => setViewMode("grid")}
+              className={cn("rounded-l-none h-9", viewMode === "grid" && "bg-mw-neutral-100")}
+              isIconOnly
+            >
+              <LayoutGrid className="h-4 w-4" />
+            </Button>
+          </div>
+          <Button variant="outline" size="sm" className="h-9">
+            <Filter className="h-4 w-4 mr-2" />
+            Filters
+          </Button>
+          <Button variant="outline" size="sm" className="h-9 w-9 p-0" isIconOnly>
+            <Settings2 className="h-4 w-4" />
+          </Button>
+          <Button
+            className="bg-mw-primary-500 hover:bg-mw-primary-600 text-white h-9"
+            onClick={() => setIsAssignmentSheetOpen(true)}
+          >
+            <Plus className="h-4 w-4 mr-2" />
+            Assign Creative
+          </Button>
+        </div>
+
+        <Card className="border border-mw-neutral-200 dark:border-mw-neutral-700">
+          <CardContent className="p-0">
+            {isLoading ? (
+              <div className="flex items-center justify-center py-12">
+                <Loader2 className="h-8 w-8 animate-spin text-mw-neutral-400" />
+              </div>
+            ) : viewMode === "table" ? (
+              <div className="flex-1 overflow-hidden" style={{ minHeight: '300px' }}>
+                <AgGridTable
+                  rowData={filteredCreatives}
+                  columnDefs={creativeColumnDefs}
+                  getRowId={(row) => row.id}
+                  loading={false}
+                  emptyMessage="No creatives assigned. Click 'Assign Creative' to add creatives to this line item."
+                />
+              </div>
+            ) : (
+              filteredCreatives.length === 0 ? (
+                <div className="text-center py-12 text-mw-neutral-500">
+                  No creatives assigned. Click 'Assign Creative' to add creatives to this line item.
+                </div>
+              ) : (
+                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
+                  {filteredCreatives.map((creative) => (
+                    <div
+                      key={creative.id}
+                      className="border rounded-lg overflow-hidden group relative"
+                    >
+                      <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"
+                          />
+                        ) : creative.type === 'VIDEO' ? (
+                          <Video className="h-12 w-12 text-mw-neutral-400" />
+                        ) : (
+                          <ImageIcon className="h-12 w-12 text-mw-neutral-400" />
+                        )}
+                        <Badge
+                          variant="outline"
+                          className={cn(
+                            "absolute top-2 right-2 text-xs",
+                            getStatusBadgeClass(creative.status)
+                          )}
+                        >
+                          {creative.status}
+                        </Badge>
+                        <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+                          <Button
+                            size="sm"
+                            variant="secondary"
+                            className="h-8 w-8"
+                            onClick={() => window.open(creative.url || creative.creativeUri, '_blank')}
+                          >
+                            <Eye className="h-4 w-4" />
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="destructive"
+                            className="h-8 w-8"
+                            onClick={() => deleteCreativeMutation.mutate(creative.creativeId || creative.id)}
+                            disabled={deleteCreativeMutation.isPending}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </div>
+                      <div className="p-3">
+                        <p className="font-medium text-sm truncate">{creative.name}</p>
+                        <div className="flex items-center gap-2 text-xs text-mw-neutral-500 mt-1">
+                          <span>{creative.type}</span>
+                          {creative.resolution && (
+                            <>
+                              <span>•</span>
+                              <span>{creative.resolution}</span>
+                            </>
+                          )}
+                          {creative.size && (
+                            <>
+                              <span>•</span>
+                              <span>{formatFileSize(creative.size)}</span>
+                            </>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      <CreativeSelector
+        open={showAddModal}
+        onOpenChange={setShowAddModal}
+        onSelect={handleAddCreatives}
+        excludeIds={excludeIds}
+        title={t('creatives.selectTitle')}
+        description={t('creatives.selectDescription')}
+        selectButtonText={t('creatives.addCreatives')}
+      />
+
+      <Sheet open={isAssignmentSheetOpen} onOpenChange={setIsAssignmentSheetOpen}>
+        <SheetContent className="w-full sm:max-w-full p-0 flex flex-col" side="right">
+          <div className="flex items-center gap-3 px-6 py-3 border-b flex-shrink-0">
+            <Button variant="ghost" size="sm" onClick={() => setIsAssignmentSheetOpen(false)} isIconOnly className="h-8 w-8 !p-0">
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-lg font-semibold">Creative Assignment</h1>
+              <p className="text-xs text-mw-neutral-500">Use the transcoder to upload the right format for each creative requirement</p>
+            </div>
+          </div>
+
+          <div className="flex flex-1 overflow-hidden">
+            <div className="w-[220px] flex-shrink-0 h-full overflow-y-auto border-r bg-white dark:bg-mw-neutral-900 p-4">
+              <h2 className="text-sm font-semibold mb-2">Creative Requirements</h2>
+              <SelectRoot value="resolution" onValueChange={() => {}}>
+                <SelectTrigger className="w-full h-8 text-xs mb-4">
+                  <SelectValue placeholder="By Resolution and..." />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="resolution">By Resolution and...</SelectItem>
+                </SelectContent>
+              </SelectRoot>
+
+              <div className="space-y-4">
+                {resolutionRequirements.map((requirement, index) => (
+                  <div key={`${requirement.resolution}-${index}`}>
+                    <div className="flex items-start gap-2 mb-1">
+                      <span className="text-xs font-medium text-mw-neutral-500 mt-0.5">{index + 1}</span>
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-bold">{requirement.resolution}</p>
+                        <p className="text-xs text-mw-neutral-500">— {requirement.duration} Seconds</p>
+                        <div className="flex items-center gap-2 mt-1">
+                          <Badge variant="secondary" className="text-[10px] px-1.5 py-0">{requirement.type}</Badge>
+                          <span className="text-[10px] text-mw-neutral-500">{requirement.inventoryCount} Inventories</span>
+                        </div>
+                      </div>
+                    </div>
+                    {requirement.assignedCreatives.map((creative) => (
+                      <div key={creative.id} className="flex items-center gap-2 p-1.5 border rounded bg-mw-neutral-50 dark:bg-mw-neutral-800 mb-1 ml-4">
+                        <div className="h-8 w-10 bg-mw-neutral-100 dark:bg-mw-neutral-700 rounded overflow-hidden flex items-center justify-center flex-shrink-0">
+                          {creative.thumbnailUrl ? (
+                            <img src={creative.thumbnailUrl} alt={creative.name} className="w-full h-full object-cover" />
+                          ) : creative.type === "VIDEO" ? (
+                            <Video className="h-4 w-4 text-mw-neutral-400" />
+                          ) : (
+                            <ImageIcon className="h-4 w-4 text-mw-neutral-400" />
+                          )}
+                        </div>
+                        <p className="text-[10px] font-medium truncate flex-1 min-w-0">{creative.name}</p>
+                        <Button variant="ghost" size="sm" className="h-5 w-5 p-0" onClick={() => handleRemoveAssigned(index, creative.id)}>
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    ))}
+                    <div
+                      className={cn("border-2 border-dashed rounded-lg p-3 text-center text-[10px] text-mw-neutral-400 ml-4 transition-colors", draggedCreative && "border-mw-primary-500 bg-mw-primary-50")}
+                      onDragOver={handleDragOver}
+                      onDrop={(e) => handleDrop(e, index)}
+                    >
+                      Drop creatives here to assign
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex-1 h-full overflow-y-auto p-4">
+              <div className="flex items-center justify-between mb-1">
+                <h2 className="text-sm font-semibold">Content Hub</h2>
+                <Button variant="ghost" size="sm" className="text-xs h-7">Show All</Button>
+              </div>
+              <p className="text-xs text-mw-neutral-500 mb-3">Showing all available creatives</p>
+              <div className="flex items-center gap-2 mb-4">
+                <div className="relative flex-1">
+                  <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-mw-neutral-400" />
+                  <Input placeholder="Search by name or filename..." value={assignSearchQuery} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAssignSearchQuery(e.target.value)} className="pl-8 h-8 text-xs" />
+                </div>
+                <Button variant="outline" size="sm" className="h-8 text-xs gap-1">
+                  <SlidersHorizontal className="h-3.5 w-3.5" />
+                  Filters
+                </Button>
+                <div className="flex border rounded-md">
+                  <Button variant={assignViewMode === "grid" ? "secondary" : "ghost"} size="sm" className="h-8 w-8 p-0 rounded-r-none" onClick={() => setAssignViewMode("grid")}>
+                    <LayoutGrid className="h-3.5 w-3.5" />
+                  </Button>
+                  <Button variant={assignViewMode === "list" ? "secondary" : "ghost"} size="sm" className="h-8 w-8 p-0 rounded-l-none" onClick={() => setAssignViewMode("list")}>
+                    <LayoutList className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {isLoadingHubCreatives ? (
+                <div className="flex items-center justify-center py-12">
+                  <Loader2 className="h-6 w-6 animate-spin text-mw-neutral-400" />
+                  <span className="ml-2 text-sm text-mw-neutral-500">Loading creatives...</span>
+                </div>
+              ) : (() => {
+                const assignedIds = resolutionRequirements.flatMap(r => r.assignedCreatives.map(c => c.id));
+                const filtered = hubCreatives.filter((c: ContentHubCreative) => {
+                  const matchesSearch = c.filename?.toLowerCase().includes(assignSearchQuery.toLowerCase()) || c.tags?.some(tag => tag.toLowerCase().includes(assignSearchQuery.toLowerCase()));
+                  return matchesSearch && !assignedIds.includes(c.id);
+                });
+                return filtered.length === 0 ? (
+                  <div className="text-center py-12">
+                    <ImageIcon className="h-12 w-12 mx-auto mb-4 text-mw-neutral-400 opacity-50" />
+                    <p className="text-mw-neutral-500">No creatives found</p>
+                    <p className="text-sm text-mw-neutral-400 mt-1">Upload creatives to the Content Hub first</p>
+                  </div>
+                ) : (
+                  <div className="grid grid-cols-4 gap-3">
+                    {filtered.map((creative: ContentHubCreative) => {
+                      const resolution = creative.metadata?.resolution || (creative.width && creative.height ? `${creative.width}x${creative.height}` : "");
+                      const fileSize = formatFileSizeAssign((creative as any).file_size || creative.size_bytes);
+                      const FileIcon = creative.mime_type?.startsWith("video/") ? Video : creative.mime_type?.startsWith("image/") ? ImageIcon : FileText;
+                      return (
+                        <div key={creative.id} draggable onDragStart={(e) => handleDragStart(e, creative)} onDragEnd={handleDragEnd} className="border rounded-lg cursor-grab active:cursor-grabbing hover:border-mw-primary-500 transition-colors bg-white dark:bg-mw-neutral-800 overflow-hidden">
+                          <div className="relative h-28 bg-mw-neutral-100 dark:bg-mw-neutral-700 flex items-center justify-center">
+                            <div className="absolute top-2 left-2"><GripVertical className="h-4 w-4 text-mw-neutral-400" /></div>
+                            <Badge className="absolute top-2 right-2 bg-emerald-100 text-emerald-700 text-[10px] px-1.5 py-0 border-0">Accepted</Badge>
+                            {creative.thumbnail ? (<img src={creative.thumbnail} alt={creative.filename} className="w-full h-full object-cover" />) : (<FileIcon className="h-8 w-8 text-mw-neutral-400" />)}
+                          </div>
+                          <div className="p-2">
+                            <p className="text-xs font-semibold truncate">{creative.filename}</p>
+                            <p className="text-[10px] text-mw-neutral-500 truncate">{resolution}{resolution && fileSize ? " · " : ""}{fileSize}</p>
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                );
+              })()}
+            </div>
+          </div>
+
+          <div className="border-t bg-white dark:bg-mw-neutral-900 px-6 py-3 flex justify-between flex-shrink-0">
+            <Button variant="outline" onClick={() => setIsAssignmentSheetOpen(false)}>Cancel</Button>
+            <Button className="bg-mw-primary-500 hover:bg-mw-primary-600 text-white" onClick={handleSaveAssignment}>Save Assignment</Button>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+}