adserver-dashboard 1.0.0

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

@@ -0,0 +1,1051 @@
+import { useState, useMemo, useRef, useEffect } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { useParams, useLocation, Link } from "wouter";
+import { format, parse, addDays, differenceInDays, isSameDay } from "date-fns";
+import { ArrowLeft, Info, CalendarIcon, Loader2, Play, History, CheckCircle, XCircle, MessageSquare } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Label } from "@/components/ui/label";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Textarea } from "@/components/ui/textarea";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import { cn } from "@/lib/utils";
+import { HistoryDrawer } from "@/components/history-drawer";
+import type { Deal, LineItem, Creative, LineItemCreative, CreativeSchedule } from "@shared/schema";
+
+interface AssignmentWithCreative extends LineItemCreative {
+  creative: Creative;
+}
+
+const STATUS_OPTIONS = [
+  { value: "active", label: "Active" },
+  { value: "paused", label: "Paused" },
+  { value: "draft", label: "Draft" },
+];
+
+const TIER2_STATUS_STYLES: Record<string, { className: string; label: string }> = {
+  pending: { className: "text-amber-600 dark:text-amber-400", label: "Pending" },
+  approved: { className: "text-emerald-600 dark:text-emerald-400", label: "Approved" },
+  rejected: { className: "text-red-600 dark:text-red-400", label: "Rejected" },
+  changes_requested: { className: "text-orange-600 dark:text-orange-400", label: "Changes Requested" },
+};
+
+const HOURS = Array.from({ length: 24 }, (_, i) => {
+  const hour = (i + 6) % 24;
+  return hour.toString().padStart(2, "0");
+});
+
+const DAY_NAMES = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
+
+function TranscodingRow({
+  name,
+  isUploaded,
+  active,
+  scaling,
+  duration,
+  bitrate,
+  dimensions,
+  type,
+  delivery,
+  codecs,
+}: {
+  name: string;
+  isUploaded: boolean;
+  active: boolean;
+  scaling: string;
+  duration: string;
+  bitrate: string;
+  dimensions: string;
+  type: string;
+  delivery: string;
+  codecs: string;
+}) {
+  return (
+    <tr className="border-b last:border-b-0">
+      <td className="py-3 pr-4">
+        <div className="flex items-center gap-2">
+          <span className="font-medium">{name}</span>
+          {isUploaded && (
+            <span className="text-xs bg-muted px-2 py-0.5 rounded">Uploaded asset</span>
+          )}
+        </div>
+      </td>
+      <td className="py-3 px-4">
+        <div 
+          className={cn(
+            "w-10 h-5 rounded-full transition-colors relative cursor-pointer",
+            active ? "bg-primary" : "bg-muted"
+          )}
+          data-testid={`toggle-active-${name.slice(0, 20)}`}
+        >
+          <div 
+            className={cn(
+              "absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform",
+              active ? "translate-x-5" : "translate-x-0.5"
+            )}
+          />
+        </div>
+      </td>
+      <td className="py-3 px-4 text-muted-foreground">{scaling}</td>
+      <td className="py-3 px-4">{duration}</td>
+      <td className="py-3 px-4">{bitrate}</td>
+      <td className="py-3 px-4">{dimensions}</td>
+      <td className="py-3 px-4">{type}</td>
+      <td className="py-3 px-4">{delivery}</td>
+      <td className="py-3 pl-4">{codecs}</td>
+    </tr>
+  );
+}
+
+function formatDateTimeDisplay(dateStr: string | null | undefined): string {
+  if (!dateStr) return "-";
+  try {
+    const d = new Date(dateStr);
+    if (isNaN(d.getTime())) return "-";
+    return format(d, "MMM dd, yyyy, hh:mm a");
+  } catch {
+    return "-";
+  }
+}
+
+function formatDateForRow(date: Date): string {
+  return format(date, "MMM-dd");
+}
+
+function parseSchedule(schedule: unknown): CreativeSchedule {
+  if (!schedule || typeof schedule !== "object") {
+    return { allHours: true, selectedHours: {} };
+  }
+  const s = schedule as CreativeSchedule;
+  return {
+    allHours: s.allHours !== false,
+    selectedHours: s.selectedHours || {},
+  };
+}
+
+function DateTimePicker({
+  value,
+  onChange,
+  label,
+  testId,
+}: {
+  value: Date | undefined;
+  onChange: (date: Date | undefined) => void;
+  label: string;
+  testId: string;
+}) {
+  const [timeValue, setTimeValue] = useState(value ? format(value, "HH:mm") : "00:00");
+
+  useEffect(() => {
+    if (value) {
+      setTimeValue(format(value, "HH:mm"));
+    }
+  }, [value]);
+
+  const handleDateSelect = (date: Date | undefined) => {
+    if (date) {
+      const [hours, minutes] = timeValue.split(":").map(Number);
+      date.setHours(hours, minutes, 0, 0);
+      onChange(date);
+    } else {
+      onChange(undefined);
+    }
+  };
+
+  const handleTimeChange = (time: string) => {
+    setTimeValue(time);
+    if (value) {
+      const [hours, minutes] = time.split(":").map(Number);
+      const newDate = new Date(value);
+      newDate.setHours(hours, minutes, 0, 0);
+      onChange(newDate);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-1">
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            className={cn(
+              "justify-start text-left font-normal",
+              !value && "text-muted-foreground"
+            )}
+            data-testid={testId}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {value ? format(value, "MMM dd, yyyy hh:mm a") : label}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={value}
+            onSelect={handleDateSelect}
+            initialFocus
+          />
+          <div className="p-3 border-t">
+            <Label className="text-xs text-muted-foreground">Time</Label>
+            <input
+              type="time"
+              value={timeValue}
+              onChange={(e) => handleTimeChange(e.target.value)}
+              className="w-full mt-1 px-2 py-1 border rounded text-sm"
+              data-testid={`${testId}-time`}
+            />
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+function ScheduleMatrix({
+  startDate,
+  endDate,
+  schedule,
+  onScheduleChange,
+}: {
+  startDate: Date | undefined;
+  endDate: Date | undefined;
+  schedule: CreativeSchedule;
+  onScheduleChange: (schedule: CreativeSchedule) => void;
+}) {
+  const dates = useMemo(() => {
+    if (!startDate || !endDate) return [];
+    const days = differenceInDays(endDate, startDate) + 1;
+    return Array.from({ length: Math.min(days, 30) }, (_, i) => addDays(startDate, i));
+  }, [startDate, endDate]);
+
+  const isHourSelected = (date: Date, hour: number): boolean => {
+    if (schedule.allHours) return true;
+    const dateKey = format(date, "yyyy-MM-dd");
+    const selectedHours = schedule.selectedHours[dateKey] || [];
+    return selectedHours.includes(hour);
+  };
+
+  const toggleHour = (date: Date, hour: number) => {
+    if (schedule.allHours) return;
+    
+    const dateKey = format(date, "yyyy-MM-dd");
+    const newSelectedHours = { ...schedule.selectedHours };
+    const currentHours = newSelectedHours[dateKey] || [];
+    
+    if (currentHours.includes(hour)) {
+      newSelectedHours[dateKey] = currentHours.filter((h) => h !== hour);
+    } else {
+      newSelectedHours[dateKey] = [...currentHours, hour].sort((a, b) => a - b);
+    }
+    
+    onScheduleChange({ ...schedule, selectedHours: newSelectedHours });
+  };
+
+  const selectAll = () => {
+    if (schedule.allHours) return;
+    
+    const newSelectedHours: Record<string, number[]> = {};
+    dates.forEach((date) => {
+      const dateKey = format(date, "yyyy-MM-dd");
+      newSelectedHours[dateKey] = HOURS.map((h) => parseInt(h));
+    });
+    
+    onScheduleChange({ ...schedule, selectedHours: newSelectedHours });
+  };
+
+  const toggleAllHours = (value: string) => {
+    if (value === "all") {
+      onScheduleChange({ allHours: true, selectedHours: {} });
+    } else {
+      onScheduleChange({ allHours: false, selectedHours: {} });
+    }
+  };
+
+  if (!startDate || !endDate) {
+    return (
+      <div className="text-sm text-muted-foreground text-center py-8">
+        Please select start and end dates to configure the schedule.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <RadioGroup
+          value={schedule.allHours ? "all" : "specific"}
+          onValueChange={toggleAllHours}
+          className="flex gap-6"
+        >
+          <div className="flex items-center gap-2">
+            <RadioGroupItem value="all" id="all-hours" data-testid="radio-all-hours" />
+            <Label htmlFor="all-hours" className="cursor-pointer">All Hours</Label>
+          </div>
+          <div className="flex items-center gap-2">
+            <RadioGroupItem value="specific" id="specific-hours" data-testid="radio-specific-hours" />
+            <Label htmlFor="specific-hours" className="cursor-pointer">Specific Hours</Label>
+          </div>
+        </RadioGroup>
+        
+        {!schedule.allHours && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={selectAll}
+            className="text-primary"
+            data-testid="button-select-all"
+          >
+            Select All
+          </Button>
+        )}
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="w-full text-xs">
+          <thead>
+            <tr>
+              <th className="text-left font-medium text-muted-foreground pb-2 pr-2 sticky left-0 bg-background">DATES</th>
+              {HOURS.map((hour) => (
+                <th key={hour} className="font-medium text-muted-foreground pb-2 px-1 text-center min-w-[28px]">
+                  {hour}
+                </th>
+              ))}
+              <th className="font-medium text-muted-foreground pb-2 pl-2 text-right">DAYS</th>
+            </tr>
+          </thead>
+          <tbody>
+            {dates.map((date) => (
+              <tr key={date.toISOString()}>
+                <td className="py-1 pr-2 text-primary font-medium sticky left-0 bg-background">
+                  {formatDateForRow(date)}
+                </td>
+                {HOURS.map((hourStr) => {
+                  const hour = parseInt(hourStr);
+                  const selected = isHourSelected(date, hour);
+                  
+                  return (
+                    <td key={hourStr} className="py-1 px-1 text-center">
+                      <button
+                        type="button"
+                        onClick={() => toggleHour(date, hour)}
+                        disabled={schedule.allHours}
+                        className={cn(
+                          "w-6 h-6 rounded-full transition-colors",
+                          selected
+                            ? "bg-primary text-primary-foreground"
+                            : "bg-muted hover-elevate",
+                          schedule.allHours && "cursor-default"
+                        )}
+                        data-testid={`schedule-cell-${format(date, "yyyy-MM-dd")}-${hourStr}`}
+                      />
+                    </td>
+                  );
+                })}
+                <td className="py-1 pl-2 text-right text-primary font-medium">
+                  {DAY_NAMES[date.getDay()]}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default function EditCreativeAssignment() {
+  const { dealId, lineItemId, assignmentId } = useParams<{
+    dealId: string;
+    lineItemId: string;
+    assignmentId: string;
+  }>();
+  const [, setLocation] = useLocation();
+  const { toast } = useToast();
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+
+  const [status, setStatus] = useState("active");
+  const [startDate, setStartDate] = useState<Date | undefined>();
+  const [endDate, setEndDate] = useState<Date | undefined>();
+  const [schedule, setSchedule] = useState<CreativeSchedule>({ allHours: true, selectedHours: {} });
+  const [historyDrawerOpen, setHistoryDrawerOpen] = useState(false);
+  const [rejectionDialogOpen, setRejectionDialogOpen] = useState(false);
+  const [rejectionReason, setRejectionReason] = useState("");
+  const [pendingAction, setPendingAction] = useState<"rejected" | "changes_requested" | null>(null);
+
+  const { data: assignment, isLoading: assignmentLoading } = useQuery<AssignmentWithCreative>({
+    queryKey: ["/api/line-item-creatives", assignmentId],
+    enabled: !!assignmentId,
+  });
+
+  const { data: deal } = useQuery<Deal>({
+    queryKey: ["/api/deals", dealId],
+    enabled: !!dealId,
+  });
+
+  const { data: lineItem } = useQuery<LineItem>({
+    queryKey: ["/api/line-items", lineItemId],
+    enabled: !!lineItemId,
+  });
+
+  useEffect(() => {
+    if (assignment) {
+      if (assignment.startTime) {
+        setStartDate(new Date(assignment.startTime));
+      }
+      if (assignment.endTime) {
+        setEndDate(new Date(assignment.endTime));
+      }
+      if (assignment.schedule) {
+        setSchedule(parseSchedule(assignment.schedule));
+      }
+    }
+  }, [assignment]);
+
+  const updateMutation = useMutation({
+    mutationFn: async (data: {
+      startTime?: string;
+      endTime?: string;
+      schedule?: CreativeSchedule;
+      tier2Status?: string;
+      tier2ReviewedBy?: string;
+      tier2RejectionReason?: string;
+    }) => {
+      return apiRequest("PATCH", `/api/line-item-creatives/${assignmentId}`, data);
+    },
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["/api/line-item-creatives", assignmentId] });
+      queryClient.invalidateQueries({ queryKey: ["/api/line-items", lineItemId, "creatives"] });
+      
+      if (variables.tier2Status) {
+        const statusLabels: Record<string, string> = {
+          approved: "approved",
+          rejected: "rejected",
+          changes_requested: "requested changes for",
+          pending: "set to pending for",
+        };
+        toast({
+          title: "Approval status updated",
+          description: `You have ${statusLabels[variables.tier2Status] || "updated"} this creative.`,
+        });
+      } else {
+        toast({
+          title: "Assignment updated",
+          description: "Creative assignment has been updated successfully.",
+        });
+        setLocation(`/deals/${dealId}/line-items/${lineItemId}/creatives`);
+      }
+    },
+    onError: (error: Error) => {
+      toast({
+        title: "Failed to update assignment",
+        description: error.message,
+        variant: "destructive",
+      });
+    },
+  });
+
+  const handleSave = () => {
+    const data: {
+      startTime?: string;
+      endTime?: string;
+      schedule?: CreativeSchedule;
+      tier2Status?: string;
+    } = {};
+
+    if (startDate) {
+      data.startTime = startDate.toISOString();
+    }
+    if (endDate) {
+      data.endTime = endDate.toISOString();
+    }
+    data.schedule = schedule;
+
+    updateMutation.mutate(data);
+  };
+
+  const handleCancel = () => {
+    setLocation(`/deals/${dealId}/line-items/${lineItemId}/creatives`);
+  };
+
+  const handleVideoTimeUpdate = () => {
+    if (videoRef.current) {
+      setCurrentTime(videoRef.current.currentTime);
+    }
+  };
+
+  const togglePlay = () => {
+    if (videoRef.current) {
+      if (isPlaying) {
+        videoRef.current.pause();
+      } else {
+        videoRef.current.play();
+      }
+      setIsPlaying(!isPlaying);
+    }
+  };
+
+  const formatDuration = (seconds: number): string => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+  };
+
+  const handleTier2StatusChange = (newStatus: string) => {
+    if (newStatus === "rejected" || newStatus === "changes_requested") {
+      setPendingAction(newStatus);
+      setRejectionReason("");
+      setRejectionDialogOpen(true);
+    } else {
+      updateMutation.mutate({ 
+        tier2Status: newStatus,
+        tier2ReviewedBy: "Media Owner",
+      });
+    }
+  };
+
+  const handleSubmitRejection = () => {
+    if (!pendingAction) return;
+    if (!rejectionReason.trim()) {
+      toast({
+        title: "Reason required",
+        description: pendingAction === "rejected" 
+          ? "Please provide a reason for rejecting this creative."
+          : "Please describe what changes are needed.",
+        variant: "destructive",
+      });
+      return;
+    }
+    
+    updateMutation.mutate({
+      tier2Status: pendingAction,
+      tier2ReviewedBy: "Media Owner",
+      tier2RejectionReason: rejectionReason.trim(),
+    });
+    setRejectionDialogOpen(false);
+    setPendingAction(null);
+    setRejectionReason("");
+  };
+
+  if (assignmentLoading) {
+    return (
+      <div className="flex flex-col h-full">
+        <div className="p-6 space-y-6">
+          <Skeleton className="h-8 w-64" />
+          <Skeleton className="h-4 w-full max-w-2xl" />
+          <div className="grid grid-cols-3 gap-6">
+            <div className="col-span-2 space-y-4">
+              <Skeleton className="h-32 w-full" />
+              <Skeleton className="h-64 w-full" />
+            </div>
+            <div className="space-y-4">
+              <Skeleton className="h-32 w-full" />
+              <Skeleton className="h-48 w-full" />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!assignment) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-4">
+        <p className="text-muted-foreground">Creative assignment not found.</p>
+        <Button variant="outline" onClick={handleCancel} data-testid="button-back-not-found">
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          Back
+        </Button>
+      </div>
+    );
+  }
+
+  const creative = assignment.creative;
+  const tier2Style = TIER2_STATUS_STYLES[assignment.tier2Status] || TIER2_STATUS_STYLES.pending;
+  const isVideo = creative.type === "video";
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex-1 overflow-auto p-6 pb-24">
+        <div className="flex items-start justify-between gap-4 mb-4">
+          <h1 className="text-2xl font-semibold" data-testid="text-creative-name">
+            {creative.name}
+          </h1>
+          <div className="flex items-center gap-3">
+            <Select value={status} onValueChange={setStatus}>
+              <SelectTrigger className="w-32" data-testid="select-status">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {STATUS_OPTIONS.map((opt) => (
+                  <SelectItem key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => setHistoryDrawerOpen(true)}
+              data-testid="button-view-history"
+            >
+              <History className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              onClick={handleCancel}
+              data-testid="button-back"
+            >
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back
+            </Button>
+          </div>
+        </div>
+
+        <p className="text-sm text-muted-foreground mb-6" data-testid="text-info-message">
+          Please configure trigger with line item to select your preferred rule. Multiple creatives scheduled on same date and time will be played in sequence.
+        </p>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <div className="lg:col-span-2 space-y-6">
+            <Card>
+              <CardContent className="pt-6">
+                <div className="flex items-center gap-2 mb-4">
+                  <Label className="text-sm font-medium">Date</Label>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Info className="h-4 w-4 text-muted-foreground cursor-help" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Set the date range for when this creative will be active.</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+                <div className="flex items-center gap-4 flex-wrap">
+                  <DateTimePicker
+                    value={startDate}
+                    onChange={setStartDate}
+                    label="Start date/time"
+                    testId="datepicker-start"
+                  />
+                  <span className="text-muted-foreground">to</span>
+                  <DateTimePicker
+                    value={endDate}
+                    onChange={setEndDate}
+                    label="End date/time"
+                    testId="datepicker-end"
+                  />
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Schedule</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ScheduleMatrix
+                  startDate={startDate}
+                  endDate={endDate}
+                  schedule={schedule}
+                  onScheduleChange={setSchedule}
+                />
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className="space-y-6">
+            <Card>
+              <CardContent className="pt-6">
+                <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+                  <div>
+                    <span className="text-muted-foreground">Resolution:</span>
+                  </div>
+                  <div className="font-medium" data-testid="text-resolution">
+                    {creative.width}x{creative.height} px (W x H)
+                  </div>
+                  
+                  <div>
+                    <span className="text-muted-foreground">Duration:</span>
+                  </div>
+                  <div className="font-medium" data-testid="text-duration">
+                    {creative.duration ? `${creative.duration} sec` : "-"}
+                  </div>
+                  
+                  <div>
+                    <span className="text-muted-foreground">Status:</span>
+                  </div>
+                  <div className={cn("font-medium", tier2Style.className)} data-testid="text-status">
+                    {tier2Style.label}
+                  </div>
+                  
+                  <div>
+                    <span className="text-muted-foreground">Start Time:</span>
+                  </div>
+                  <div className="font-medium" data-testid="text-start-time">
+                    {formatDateTimeDisplay(assignment.startTime)}
+                  </div>
+                  
+                  <div>
+                    <span className="text-muted-foreground">End Time:</span>
+                  </div>
+                  <div className="font-medium" data-testid="text-end-time">
+                    {formatDateTimeDisplay(assignment.endTime)}
+                  </div>
+                  
+                  <div>
+                    <span className="text-muted-foreground">Format:</span>
+                  </div>
+                  <div className="font-medium uppercase" data-testid="text-format">
+                    {creative.type === "video" ? "VIDEO" : "DISPLAY"}
+                  </div>
+
+                  <div>
+                    <span className="text-muted-foreground">Source:</span>
+                  </div>
+                  <div className="font-medium" data-testid="text-source">
+                    {(() => {
+                      const source = creative.creativeSource || "uploaded";
+                      const platform = creative.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}`;
+                    })()}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Media Owner Approval</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-muted-foreground">Current Status</span>
+                    <span className={cn("font-medium", tier2Style.className)}>{tier2Style.label}</span>
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    <Button
+                      variant={assignment.tier2Status === "approved" ? "default" : "outline"}
+                      className="w-full justify-start"
+                      onClick={() => handleTier2StatusChange("approved")}
+                      disabled={updateMutation.isPending}
+                      data-testid="button-approve"
+                    >
+                      <CheckCircle className="h-4 w-4 mr-2" />
+                      Approve
+                    </Button>
+                    <Button
+                      variant={assignment.tier2Status === "changes_requested" ? "default" : "outline"}
+                      className="w-full justify-start"
+                      onClick={() => handleTier2StatusChange("changes_requested")}
+                      disabled={updateMutation.isPending}
+                      data-testid="button-request-changes"
+                    >
+                      <MessageSquare className="h-4 w-4 mr-2" />
+                      Request Changes
+                    </Button>
+                    <Button
+                      variant={assignment.tier2Status === "rejected" ? "destructive" : "outline"}
+                      className="w-full justify-start"
+                      onClick={() => handleTier2StatusChange("rejected")}
+                      disabled={updateMutation.isPending}
+                      data-testid="button-reject"
+                    >
+                      <XCircle className="h-4 w-4 mr-2" />
+                      Reject
+                    </Button>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Preview</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="relative aspect-video bg-muted rounded-md overflow-hidden">
+                  {isVideo && creative.fileUrl ? (
+                    <>
+                      <video
+                        ref={videoRef}
+                        src={creative.fileUrl}
+                        className="w-full h-full object-contain"
+                        onTimeUpdate={handleVideoTimeUpdate}
+                        onEnded={() => setIsPlaying(false)}
+                        data-testid="video-preview"
+                      />
+                      <button
+                        onClick={togglePlay}
+                        className="absolute inset-0 flex items-center justify-center bg-black/20 hover:bg-black/30 transition-colors"
+                        data-testid="button-play-video"
+                      >
+                        {!isPlaying && (
+                          <div className="w-12 h-12 rounded-full bg-white/90 flex items-center justify-center">
+                            <Play className="h-5 w-5 text-black ml-1" />
+                          </div>
+                        )}
+                      </button>
+                      <div className="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded">
+                        {formatDuration(currentTime)} / {formatDuration(creative.duration || 0)}
+                      </div>
+                    </>
+                  ) : creative.thumbnailUrl ? (
+                    <img
+                      src={creative.thumbnailUrl}
+                      alt={creative.name}
+                      className="w-full h-full object-contain"
+                      data-testid="image-preview"
+                    />
+                  ) : (
+                    <div className="flex items-center justify-center h-full text-muted-foreground">
+                      No preview available
+                    </div>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Creative History</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground" data-testid="text-no-history">
+                  There is no available creative history.
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+
+        <Card className="mt-6">
+          <CardHeader className="flex flex-row items-center justify-between">
+            <div className="space-y-1">
+              <CardTitle className="text-base">Transcoding</CardTitle>
+              <p className="text-sm text-muted-foreground">
+                <span className="font-medium">ID:</span> {creative.id.slice(0, 12)} | 
+                <span className="font-medium ml-2">Master type:</span> {creative.type === "video" ? "Video" : "Display"} | 
+                <span className="font-medium ml-2">Actual size:</span> {creative.width}x{creative.height}
+              </p>
+            </div>
+            <Button variant="ghost" className="text-primary" data-testid="link-master-companions">
+              Master/companions
+            </Button>
+          </CardHeader>
+          <CardContent>
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b">
+                    <th className="text-left font-medium py-2 pr-4">Assets</th>
+                    <th className="text-left font-medium py-2 px-4">Active</th>
+                    <th className="text-left font-medium py-2 px-4">Scaling</th>
+                    <th className="text-left font-medium py-2 px-4">Duration</th>
+                    <th className="text-left font-medium py-2 px-4">Bitrate</th>
+                    <th className="text-left font-medium py-2 px-4">Dimensions</th>
+                    <th className="text-left font-medium py-2 px-4">Type</th>
+                    <th className="text-left font-medium py-2 px-4">Delivery</th>
+                    <th className="text-left font-medium py-2 pl-4">Codecs</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <TranscodingRow 
+                    name={creative.name}
+                    isUploaded={true}
+                    active={true}
+                    scaling="Maintain aspect ratio"
+                    duration={`${((creative.duration || 10) / 1000).toFixed(3)}s`}
+                    bitrate="7254 kbit/s"
+                    dimensions={`${creative.width}x${creative.height}`}
+                    type={creative.format || "video/mp4"}
+                    delivery="Progressive"
+                    codecs=""
+                  />
+                  <TranscodingRow 
+                    name={`${creative.name.replace(/\.[^/.]+$/, "")}-ultralow.m3u8`}
+                    isUploaded={false}
+                    active={true}
+                    scaling="Maintain aspect ratio"
+                    duration={`${((creative.duration || 10) / 1000 + 0.001).toFixed(2)}s`}
+                    bitrate="50 to 3543 kbit/s"
+                    dimensions="186x240"
+                    type="application/x-mpegurl"
+                    delivery="Streaming"
+                    codecs=""
+                  />
+                  <TranscodingRow 
+                    name={`${creative.name.replace(/\.[^/.]+$/, "")}-aac480pQ1.mp4`}
+                    isUploaded={false}
+                    active={true}
+                    scaling="Maintain aspect ratio"
+                    duration={`${((creative.duration || 10) / 1000 + 0.001).toFixed(2)}s`}
+                    bitrate="894 kbit/s"
+                    dimensions="374x480"
+                    type="video/mp4"
+                    delivery="Progressive"
+                    codecs=""
+                  />
+                  <TranscodingRow 
+                    name={`${creative.name.replace(/\.[^/.]+$/, "")}-aac720pQ2.mp4`}
+                    isUploaded={false}
+                    active={true}
+                    scaling="Maintain aspect ratio"
+                    duration={`${((creative.duration || 10) / 1000 + 0.001).toFixed(2)}s`}
+                    bitrate="2135 kbit/s"
+                    dimensions="560x720"
+                    type="video/mp4"
+                    delivery="Progressive"
+                    codecs=""
+                  />
+                  <TranscodingRow 
+                    name={`${creative.name.replace(/\.[^/.]+$/, "")}-higher.mp4`}
+                    isUploaded={false}
+                    active={true}
+                    scaling="Maintain aspect ratio"
+                    duration={`${((creative.duration || 10) / 1000 + 0.001).toFixed(2)}s`}
+                    bitrate="928 kbit/s"
+                    dimensions="560x720"
+                    type="video/mp4"
+                    delivery="Progressive"
+                    codecs=""
+                  />
+                  <TranscodingRow 
+                    name={`${creative.name.replace(/\.[^/.]+$/, "")}-highest.mp4`}
+                    isUploaded={false}
+                    active={true}
+                    scaling="Maintain aspect ratio"
+                    duration={`${((creative.duration || 10) / 1000 + 0.001).toFixed(2)}s`}
+                    bitrate="1544 kbit/s"
+                    dimensions="840x1080"
+                    type="video/mp4"
+                    delivery="Progressive"
+                    codecs=""
+                  />
+                </tbody>
+              </table>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="fixed bottom-0 left-64 right-0 border-t bg-background p-4 flex items-center justify-end gap-3">
+        <Button
+          variant="outline"
+          onClick={handleCancel}
+          disabled={updateMutation.isPending}
+          data-testid="button-cancel"
+        >
+          Cancel
+        </Button>
+        <Button
+          onClick={handleSave}
+          disabled={updateMutation.isPending}
+          data-testid="button-save"
+        >
+          {updateMutation.isPending && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+          Save
+        </Button>
+      </div>
+
+      <HistoryDrawer
+        open={historyDrawerOpen}
+        onOpenChange={setHistoryDrawerOpen}
+        entityId={assignment?.creativeId || ""}
+        entityType="creative"
+        entityName={assignment?.creative?.name}
+        hierarchical={false}
+      />
+
+      <Dialog open={rejectionDialogOpen} onOpenChange={setRejectionDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {pendingAction === "rejected" ? "Reject Creative" : "Request Changes"}
+            </DialogTitle>
+            <DialogDescription>
+              {pendingAction === "rejected" 
+                ? "Please provide a reason for rejecting this creative. This helps the content owner understand what needs to be fixed."
+                : "Please describe what changes are needed for this creative to be approved."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-4">
+            <Textarea
+              placeholder={pendingAction === "rejected" ? "Enter rejection reason..." : "Describe the changes needed..."}
+              value={rejectionReason}
+              onChange={(e) => setRejectionReason(e.target.value)}
+              className="min-h-[100px]"
+              data-testid="textarea-rejection-reason"
+            />
+          </div>
+          <DialogFooter>
+            <Button 
+              variant="outline" 
+              onClick={() => setRejectionDialogOpen(false)}
+              data-testid="button-cancel-rejection"
+            >
+              Cancel
+            </Button>
+            <Button 
+              variant={pendingAction === "rejected" ? "destructive" : "default"}
+              onClick={handleSubmitRejection}
+              disabled={updateMutation.isPending}
+              data-testid="button-confirm-rejection"
+            >
+              {updateMutation.isPending && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+              {pendingAction === "rejected" ? "Reject" : "Request Changes"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}