adserver-dashboard 1.0.0

package/Influence-MW-AdServer-12-02-2026/client/src/pages/deal-detail.tsx

@@ -0,0 +1,1062 @@
+import { useState, useMemo } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { useLocation, useParams } from "wouter";
+import {
+  ArrowLeft,
+  Plus,
+  Search,
+  Filter,
+  MoreHorizontal,
+  Trash2,
+  Edit,
+  FileText,
+  PlayCircle,
+  Eye,
+  DollarSign,
+  Wallet,
+  AlertTriangle,
+  History,
+  Copy,
+  Send,
+  RotateCcw,
+  Lock,
+  Info,
+  Sparkles,
+  Loader2,
+  Link2,
+  Download,
+  FileCode,
+  Package,
+  Check,
+  ClipboardCopy,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { PageHeader } from "@/components/page-header";
+import { DataTable } from "@/components/data-table";
+import { MetricCard } from "@/components/metric-card";
+import { StatusBadge } from "@/components/status-badge";
+import { FilterDrawer, FilterField, FilterValues } from "@/components/filter-drawer";
+import { HistoryDrawer } from "@/components/history-drawer";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import { formatDate, formatCurrency } from "@/lib/utils";
+import type { Deal, SspPartner, MediaOwner, LineItem } from "@shared/schema";
+
+const STATUS_OPTIONS = [
+  { value: "active", label: "Active" },
+  { value: "paused", label: "Paused" },
+];
+
+const initialFilterValues: FilterValues = {
+  status: [],
+  mediaOwner: [],
+  dateRange: { start: undefined, end: undefined },
+  budgetRange: { min: undefined, max: undefined },
+};
+
+export default function DealDetail() {
+  const { id: dealId } = useParams<{ id: string }>();
+  const [, setLocation] = useLocation();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [sortBy, setSortBy] = useState<string>("name");
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+  const [filterOpen, setFilterOpen] = useState(false);
+  const [filterValues, setFilterValues] = useState<FilterValues>(initialFilterValues);
+  const [appliedFilters, setAppliedFilters] = useState<FilterValues>(initialFilterValues);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [lineItemToDelete, setLineItemToDelete] = useState<LineItem | null>(null);
+  const [historyDrawerOpen, setHistoryDrawerOpen] = useState(false);
+  const [optimizeDialogOpen, setOptimizeDialogOpen] = useState(false);
+  const [lineItemToOptimize, setLineItemToOptimize] = useState<LineItem | null>(null);
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+  const { toast } = useToast();
+
+  const { data: deal, isLoading: dealLoading } = useQuery<Deal>({
+    queryKey: ["/api/deals", dealId],
+    enabled: !!dealId,
+  });
+
+  const { data: lineItems, isLoading: lineItemsLoading } = useQuery<LineItem[]>({
+    queryKey: ["/api/deals", dealId, "line-items"],
+    enabled: !!dealId,
+  });
+
+  const { data: sspPartners } = useQuery<SspPartner[]>({
+    queryKey: ["/api/ssp-partners"],
+  });
+
+  const { data: mediaOwners } = useQuery<MediaOwner[]>({
+    queryKey: ["/api/media-owners"],
+  });
+
+  interface DistributionLineItem {
+    lineItemId: string;
+    lineItemName: string;
+    status: string;
+    creativeType: string | null;
+    vastUrl: string;
+  }
+
+  interface DistributionData {
+    dealId: string;
+    dealName: string;
+    dealType: string;
+    lineItems: DistributionLineItem[];
+  }
+
+  const { data: distributionData, isLoading: distributionLoading } = useQuery<DistributionData>({
+    queryKey: ["/api/deals", dealId, "distribution"],
+    enabled: !!dealId && !!deal?.acceptanceSent,
+  });
+
+  const handleCopyVastUrl = (url: string, lineItemId: string) => {
+    navigator.clipboard.writeText(url).then(() => {
+      setCopiedId(lineItemId);
+      setTimeout(() => setCopiedId(null), 2000);
+      toast({ title: "Copied", description: "VAST URL copied to clipboard" });
+    });
+  };
+
+  const handleDownloadHtml = (lineItemId: string) => {
+    window.open(`/api/deals/${dealId}/line-items/${lineItemId}/vast-tag/html`, "_blank");
+  };
+
+  const handleDownloadZip = (lineItemId: string) => {
+    window.open(`/api/deals/${dealId}/line-items/${lineItemId}/vast-tag/zip`, "_blank");
+  };
+
+  const handleDownloadAll = () => {
+    window.open(`/api/deals/${dealId}/distribution/download-all`, "_blank");
+  };
+
+  const isProgrammatic = useMemo(() => {
+    if (!deal) return false;
+    return ['pg', 'pd', 'pmp', 'always_on'].includes(deal.dealType || '');
+  }, [deal]);
+
+  const mediaOwnerOptions = useMemo(() => 
+    (mediaOwners ?? []).map(mo => ({ value: mo.id, label: mo.name })),
+    [mediaOwners]
+  );
+
+  const filterFields: FilterField[] = [
+    {
+      key: "status",
+      label: "Status",
+      type: "multi-select",
+      options: STATUS_OPTIONS,
+    },
+    {
+      key: "mediaOwner",
+      label: "Media Owner",
+      type: "multi-select",
+      options: mediaOwnerOptions,
+    },
+    {
+      key: "dateRange",
+      label: "Flight Date Range",
+      type: "date-range",
+    },
+    {
+      key: "budgetRange",
+      label: "Budget Range",
+      type: "number-range",
+      minPlaceholder: "Min budget",
+      maxPlaceholder: "Max budget",
+    },
+  ];
+
+  const deleteMutation = useMutation({
+    mutationFn: async (id: string) => {
+      return apiRequest("DELETE", `/api/line-items/${id}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/deals", dealId, "line-items"] });
+      queryClient.invalidateQueries({ queryKey: ["/api/line-items"] });
+      toast({
+        title: "Line item deleted",
+        description: "The line item has been deleted.",
+      });
+      setDeleteDialogOpen(false);
+      setLineItemToDelete(null);
+    },
+  });
+
+  const duplicateLineItemMutation = useMutation({
+    mutationFn: async (id: string) => {
+      return apiRequest("POST", `/api/line-items/${id}/duplicate`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/deals", dealId, "line-items"] });
+      queryClient.invalidateQueries({ queryKey: ["/api/line-items"] });
+      toast({
+        title: "Line item duplicated",
+        description: "A copy of the line item has been created.",
+      });
+    },
+  });
+
+  const autoOptimizeMutation = useMutation({
+    mutationFn: async (id: string) => {
+      return apiRequest("POST", `/api/line-items/${id}/auto-optimize`, {
+        maxInventories: 5,
+      });
+    },
+    onSuccess: async (response) => {
+      const result = await response.json();
+      queryClient.invalidateQueries({ queryKey: ["/api/deals", dealId, "line-items"] });
+      queryClient.invalidateQueries({ queryKey: ["/api/line-items"] });
+      setOptimizeDialogOpen(false);
+      setLineItemToOptimize(null);
+      toast({
+        title: "Optimization Complete",
+        description: `Added ${result.summary?.inventoriesAdded || 0} recommended inventories`,
+      });
+    },
+    onError: () => {
+      setOptimizeDialogOpen(false);
+      setLineItemToOptimize(null);
+      toast({
+        title: "Optimization Failed",
+        description: "Failed to auto-optimize line item. Please try again.",
+        variant: "destructive",
+      });
+    },
+  });
+
+  const handleOptimizeClick = (lineItem: LineItem) => {
+    setLineItemToOptimize(lineItem);
+    setOptimizeDialogOpen(true);
+  };
+
+  const handleConfirmOptimize = () => {
+    if (lineItemToOptimize) {
+      autoOptimizeMutation.mutate(lineItemToOptimize.id);
+    }
+  };
+
+  const handleDeleteClick = (lineItem: LineItem) => {
+    setLineItemToDelete(lineItem);
+    setDeleteDialogOpen(true);
+  };
+
+  const handleConfirmDelete = () => {
+    if (lineItemToDelete) {
+      deleteMutation.mutate(lineItemToDelete.id);
+    }
+  };
+
+  const handleApplyFilters = () => {
+    setAppliedFilters(filterValues);
+    setFilterOpen(false);
+  };
+
+  const handleClearFilters = () => {
+    setFilterValues(initialFilterValues);
+    setAppliedFilters(initialFilterValues);
+    setFilterOpen(false);
+  };
+
+  const requestAcceptanceMutation = useMutation({
+    mutationFn: async () => {
+      return apiRequest("PATCH", `/api/deals/${dealId}`, { acceptanceSent: true });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/deals", dealId] });
+      toast({
+        title: "Request Sent",
+        description: "Acceptance request has been sent to DSP partners.",
+      });
+    },
+  });
+
+  const activateDealMutation = useMutation({
+    mutationFn: async () => {
+      return apiRequest("PATCH", `/api/deals/${dealId}`, { acceptanceSent: true });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/deals", dealId] });
+      toast({
+        title: "Deal Activated",
+        description: "Deal has been sent to CMS for activation.",
+      });
+    },
+  });
+
+  const reopenDealMutation = useMutation({
+    mutationFn: async () => {
+      return apiRequest("PATCH", `/api/deals/${dealId}`, { reopened: true });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/deals", dealId] });
+      toast({
+        title: "Deal Reopened",
+        description: "You can now make changes. Limited editing is available after reopening.",
+      });
+    },
+  });
+
+  const handleRequestAcceptance = () => {
+    requestAcceptanceMutation.mutate();
+  };
+
+  const handleActivateDeal = () => {
+    activateDealMutation.mutate();
+  };
+
+  const handleReopenDeal = () => {
+    reopenDealMutation.mutate();
+  };
+
+  // Check if deal is locked (sent but not reopened)
+  const isDealLocked = deal?.acceptanceSent && !deal?.reopened;
+  
+  // Check if deal can be edited (not sent, or sent and reopened)
+  const canEditDeal = !deal?.acceptanceSent || deal?.reopened;
+
+  const activeFilterCount = useMemo(() => {
+    let count = 0;
+    const statuses = appliedFilters.status as string[];
+    const mediaOwnerIds = appliedFilters.mediaOwner as string[];
+    const dateRange = appliedFilters.dateRange as { start?: Date; end?: Date };
+    const budgetRange = appliedFilters.budgetRange as { min?: number; max?: number };
+
+    if (statuses?.length > 0) count++;
+    if (mediaOwnerIds?.length > 0) count++;
+    if (dateRange?.start || dateRange?.end) count++;
+    if (budgetRange?.min !== undefined || budgetRange?.max !== undefined) count++;
+
+    return count;
+  }, [appliedFilters]);
+
+  const handleSort = (key: string) => {
+    if (sortBy === key) {
+      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+    } else {
+      setSortBy(key);
+      setSortOrder("asc");
+    }
+  };
+
+  const filteredLineItems = useMemo(() => {
+    if (!lineItems) return [];
+
+    let result = lineItems.filter((lineItem) => {
+      const matchesSearch = lineItem.name.toLowerCase().includes(searchQuery.toLowerCase());
+
+      const statuses = appliedFilters.status as string[];
+      const matchesStatus = statuses.length === 0 || statuses.includes(lineItem.status);
+
+      const mediaOwnerIds = appliedFilters.mediaOwner as string[];
+      const matchesMediaOwner = mediaOwnerIds.length === 0 || (lineItem.mediaOwnerId && mediaOwnerIds.includes(lineItem.mediaOwnerId));
+
+      const dateRange = appliedFilters.dateRange as { start?: Date; end?: Date };
+      let matchesDateRange = true;
+      if (dateRange?.start && lineItem.startDate) {
+        const itemStart = new Date(lineItem.startDate);
+        matchesDateRange = matchesDateRange && itemStart >= dateRange.start;
+      }
+      if (dateRange?.end && lineItem.endDate) {
+        const itemEnd = new Date(lineItem.endDate);
+        matchesDateRange = matchesDateRange && itemEnd <= dateRange.end;
+      }
+
+      const budgetRange = appliedFilters.budgetRange as { min?: number; max?: number };
+      let matchesBudget = true;
+      if (lineItem.budget) {
+        const budget = parseFloat(lineItem.budget);
+        if (budgetRange?.min !== undefined) {
+          matchesBudget = matchesBudget && budget >= budgetRange.min;
+        }
+        if (budgetRange?.max !== undefined) {
+          matchesBudget = matchesBudget && budget <= budgetRange.max;
+        }
+      }
+
+      return matchesSearch && matchesStatus && matchesMediaOwner && matchesDateRange && matchesBudget;
+    });
+
+    result = [...result].sort((a, b) => {
+      let comparison = 0;
+      switch (sortBy) {
+        case "name":
+          comparison = a.name.localeCompare(b.name);
+          break;
+        case "status":
+          comparison = a.status.localeCompare(b.status);
+          break;
+        case "budget":
+          const budgetA = a.budget ? parseFloat(a.budget) : 0;
+          const budgetB = b.budget ? parseFloat(b.budget) : 0;
+          comparison = budgetA - budgetB;
+          break;
+        case "dates":
+          const dateA = a.startDate ? new Date(a.startDate).getTime() : 0;
+          const dateB = b.startDate ? new Date(b.startDate).getTime() : 0;
+          comparison = dateA - dateB;
+          break;
+        case "trafficAllocation":
+          comparison = (a.trafficAllocation ?? 100) - (b.trafficAllocation ?? 100);
+          break;
+        case "priority":
+          comparison = (a.priority ?? 5) - (b.priority ?? 5);
+          break;
+        default:
+          comparison = 0;
+      }
+      return sortOrder === "asc" ? comparison : -comparison;
+    });
+
+    return result;
+  }, [lineItems, searchQuery, appliedFilters, sortBy, sortOrder]);
+
+  const summaryStats = useMemo(() => {
+    if (!lineItems || !deal) {
+      return {
+        totalLineItems: 0,
+        totalAdPlays: 0,
+        totalImpressions: 0,
+        totalRevenue: 0,
+        budget: 0,
+        deliveryProgress: 0,
+      };
+    }
+
+    const totalLineItems = lineItems.length;
+    const totalRevenue = lineItems.reduce((sum, item) => sum + parseFloat(item.spent || "0"), 0);
+    const budget = parseFloat(deal.budget || "0");
+    const totalImpressions = Math.round(totalRevenue / 10 * 1000);
+    const totalAdPlays = Math.round(totalImpressions * 0.85);
+    const deliveryProgress = budget > 0 ? Math.round((totalRevenue / budget) * 100) : 0;
+
+    return {
+      totalLineItems,
+      totalAdPlays,
+      totalImpressions,
+      totalRevenue,
+      budget,
+      deliveryProgress,
+    };
+  }, [lineItems, deal]);
+
+  const getMediaOwnerName = (id: string | null | undefined) => {
+    if (!id) return "-";
+    const owner = mediaOwners?.find(o => o.id === id);
+    return owner?.name ?? "-";
+  };
+
+  const getSspName = (id: string | null | undefined) => {
+    if (!id) return "-";
+    const ssp = sspPartners?.find(s => s.id === id);
+    return ssp?.name ?? "-";
+  };
+
+  const getMissingLineItemFields = (lineItem: LineItem): string[] => {
+    const missingFields: string[] = [];
+    if (!lineItem.name) missingFields.push("Name");
+    if (!lineItem.startDate) missingFields.push("Start Date");
+    if (!lineItem.endDate) missingFields.push("End Date");
+    return missingFields;
+  };
+
+  const columns = [
+    {
+      key: "name",
+      header: "Name",
+      sortable: true,
+      render: (lineItem: LineItem) => {
+        const missingFields = getMissingLineItemFields(lineItem);
+        return (
+          <div className="flex items-center gap-2">
+            <span className="font-medium text-primary hover:underline cursor-pointer">{lineItem.name}</span>
+            {missingFields.length > 0 && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <AlertTriangle className="h-4 w-4 text-amber-500 flex-shrink-0" data-testid={`warning-line-item-${lineItem.id}`} />
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p className="font-medium">Missing required fields:</p>
+                  <ul className="list-disc list-inside">
+                    {missingFields.map((field) => (
+                      <li key={field}>{field}</li>
+                    ))}
+                  </ul>
+                </TooltipContent>
+              </Tooltip>
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      key: "status",
+      header: "Status",
+      sortable: true,
+      render: (lineItem: LineItem) => <StatusBadge status={lineItem.status} />,
+    },
+    {
+      key: "priority",
+      header: "Priority",
+      sortable: true,
+      render: (lineItem: LineItem) => (
+        <Badge variant="outline" data-testid={`text-priority-${lineItem.id}`}>
+          {lineItem.priority ?? 5}
+        </Badge>
+      ),
+    },
+    {
+      key: "creativeType",
+      header: "Creative Type",
+      sortable: false,
+      render: (lineItem: LineItem) => (
+        <Badge variant="secondary" className="capitalize">
+          {lineItem.creativeType || "-"}
+        </Badge>
+      ),
+    },
+    {
+      key: "dates",
+      header: "Flight Dates",
+      sortable: true,
+      render: (lineItem: LineItem) =>
+        lineItem.startDate && lineItem.endDate
+          ? `${formatDate(lineItem.startDate)} - ${formatDate(lineItem.endDate)}`
+          : "-",
+    },
+    {
+      key: "budget",
+      header: "Budget",
+      sortable: true,
+      render: (lineItem: LineItem) => formatCurrency(lineItem.budget),
+    },
+    {
+      key: "trafficAllocation",
+      header: "Traffic Allocation",
+      sortable: true,
+      render: (lineItem: LineItem) => `${lineItem.trafficAllocation ?? 100}%`,
+    },
+    {
+      key: "impressions",
+      header: "Impressions",
+      sortable: false,
+      render: (lineItem: LineItem) => {
+        const spent = parseFloat(lineItem.spent || "0");
+        const impressions = Math.round(spent / 10 * 1000);
+        return impressions.toLocaleString();
+      },
+    },
+    {
+      key: "revenue",
+      header: "Revenue",
+      sortable: true,
+      render: (lineItem: LineItem) => formatCurrency(lineItem.spent ?? 0),
+    },
+    {
+      key: "actions",
+      header: "",
+      className: "w-12",
+      sortable: false,
+      render: (lineItem: LineItem) => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              data-testid={`line-item-actions-${lineItem.id}`}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.stopPropagation();
+                setLocation(`/deals/${dealId}/line-items/${lineItem.id}/creatives`);
+              }}
+              data-testid={`view-line-item-${lineItem.id}`}
+            >
+              <Eye className="h-4 w-4 mr-2" />
+              View Detail
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.stopPropagation();
+                setLocation(`/deals/${dealId}/line-items/${lineItem.id}/edit`);
+              }}
+              disabled={isDealLocked ?? false}
+              data-testid={`edit-line-item-${lineItem.id}`}
+            >
+              <Edit className="h-4 w-4 mr-2" />
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.stopPropagation();
+                duplicateLineItemMutation.mutate(lineItem.id);
+              }}
+              disabled={isDealLocked ?? false}
+              data-testid={`duplicate-line-item-${lineItem.id}`}
+            >
+              <Copy className="h-4 w-4 mr-2" />
+              Duplicate
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.stopPropagation();
+                handleOptimizeClick(lineItem);
+              }}
+              disabled={isDealLocked ?? false}
+              data-testid={`auto-optimize-line-item-${lineItem.id}`}
+            >
+              <Sparkles className="h-4 w-4 mr-2" />
+              Auto-Optimize
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="text-destructive"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleDeleteClick(lineItem);
+              }}
+              disabled={isDealLocked ?? false}
+              data-testid={`delete-line-item-${lineItem.id}`}
+            >
+              <Trash2 className="h-4 w-4 mr-2" />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    },
+  ];
+
+  const handleRowClick = (lineItem: LineItem) => {
+    setLocation(`/deals/${dealId}/line-items/${lineItem.id}/creatives`);
+  };
+
+  const isLoading = dealLoading || lineItemsLoading;
+
+  if (dealLoading) {
+    return (
+      <div className="flex flex-col gap-6 p-6">
+        <div className="animate-pulse">
+          <div className="h-8 bg-muted rounded w-64 mb-2" />
+          <div className="h-4 bg-muted rounded w-96" />
+        </div>
+      </div>
+    );
+  }
+
+  if (!deal) {
+    return (
+      <div className="flex flex-col gap-6 p-6">
+        <div className="text-center py-12">
+          <h2 className="text-xl font-semibold">Deal not found</h2>
+          <p className="text-muted-foreground mt-2">The deal you're looking for doesn't exist.</p>
+          <Button onClick={() => setLocation("/deals")} className="mt-4">
+            Back to Deals
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6 p-6">
+      <PageHeader
+        title={
+          <div className="flex items-center gap-4">
+            <div className="flex flex-col">
+              <span>{deal.name}</span>
+              {deal.externalDealId && (
+                <span className="text-sm font-normal text-muted-foreground">ID: {deal.externalDealId}</span>
+              )}
+            </div>
+            <div className="flex flex-col gap-1">
+              <Badge variant="outline" className="text-xs capitalize w-fit">
+                {deal.source || "influence"}
+              </Badge>
+              {deal.isRfp && (
+                <Badge variant="outline" className="bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200 border-amber-200 dark:border-amber-800 text-xs w-fit">
+                  RFP
+                </Badge>
+              )}
+            </div>
+          </div>
+        }
+        description={`Deal details and line items`}
+        actions={
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              onClick={() => setLocation("/deals")}
+              data-testid="button-back-deals"
+            >
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back
+            </Button>
+            <Button
+              onClick={() => setLocation(`/deals/${dealId}/line-items/new`)}
+              disabled={isDealLocked ?? false}
+              data-testid="button-new-line-item"
+            >
+              <Plus className="h-4 w-4 mr-2" />
+              New Line Item
+            </Button>
+            {lineItems && lineItems.length > 0 && (
+              deal?.acceptanceSent ? (
+                <Button 
+                  onClick={() => handleReopenDeal()}
+                  variant="outline"
+                  disabled={deal?.reopened ?? false}
+                  data-testid="button-reopen-deal"
+                >
+                  <RotateCcw className="h-4 w-4 mr-2" />
+                  {deal?.reopened ? "Reopened" : "Reopen"}
+                </Button>
+              ) : isProgrammatic ? (
+                <Button 
+                  onClick={() => handleRequestAcceptance()}
+                  variant="default"
+                  data-testid="button-request-acceptance"
+                >
+                  <Send className="h-4 w-4 mr-2" />
+                  Request Acceptance
+                </Button>
+              ) : (
+                <Button 
+                  onClick={() => handleActivateDeal()}
+                  variant="default"
+                  data-testid="button-activate-deal"
+                >
+                  <PlayCircle className="h-4 w-4 mr-2" />
+                  Activate Deal
+                </Button>
+              )
+            )}
+          </div>
+        }
+      />
+
+      {isDealLocked && (
+        <Card className="border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950">
+          <CardContent className="py-4">
+            <div className="flex items-center gap-3">
+              <Lock className="h-5 w-5 text-amber-600 dark:text-amber-400 flex-shrink-0" />
+              <div>
+                <p className="font-medium text-amber-800 dark:text-amber-200">Deal and Line Items are locked for editing</p>
+                <p className="text-sm text-amber-700 dark:text-amber-300">
+                  This deal has been sent to stakeholders for approval. All deal and line item editing, duplication, and deletion is disabled to maintain data integrity with external systems. Click "Reopen" to make changes. Note: After reopening, only the deal name and ad-play verification settings can be modified. Deal type cannot be changed.
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5">
+        <MetricCard
+          title="Total Line Items"
+          value={summaryStats.totalLineItems}
+          icon={FileText}
+        />
+        <MetricCard
+          title="Total Ad Plays"
+          value={summaryStats.totalAdPlays.toLocaleString()}
+          icon={PlayCircle}
+        />
+        <MetricCard
+          title="Total Impressions"
+          value={summaryStats.totalImpressions.toLocaleString()}
+          icon={Eye}
+        />
+        <MetricCard
+          title="Revenue"
+          value={formatCurrency(summaryStats.totalRevenue)}
+          icon={DollarSign}
+        />
+        <MetricCard
+          title="Budget"
+          value={formatCurrency(summaryStats.budget)}
+          icon={Wallet}
+        />
+      </div>
+
+      <Tabs defaultValue="line-items" data-testid="deal-detail-tabs">
+        <TabsList>
+          <TabsTrigger value="line-items" data-testid="tab-line-items">
+            <FileText className="h-4 w-4 mr-2" />
+            Line Items
+          </TabsTrigger>
+          {deal?.acceptanceSent && (
+            <TabsTrigger value="distribution" data-testid="tab-distribution">
+              <Link2 className="h-4 w-4 mr-2" />
+              Distribution
+            </TabsTrigger>
+          )}
+        </TabsList>
+
+        <TabsContent value="line-items">
+          <div className="flex items-center gap-3 mb-4">
+            <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 line items..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9 bg-white dark:bg-background border"
+                data-testid="input-search"
+              />
+            </div>
+            <Button
+              variant="outline"
+              onClick={() => setFilterOpen(true)}
+              className="bg-white dark:bg-background"
+              data-testid="button-open-filters"
+            >
+              <Filter className="h-4 w-4 mr-2" />
+              Filters
+              {activeFilterCount > 0 && (
+                <Badge variant="secondary" className="ml-2">{activeFilterCount}</Badge>
+              )}
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => setHistoryDrawerOpen(true)}
+              data-testid="button-view-history"
+            >
+              <History className="h-4 w-4" />
+            </Button>
+          </div>
+
+          <Card>
+            <CardContent className="pt-6">
+              <DataTable
+                columns={columns}
+                data={filteredLineItems}
+                isLoading={lineItemsLoading}
+                emptyMessage="No line items found. Create your first line item to get started."
+                onRowClick={handleRowClick}
+                sortKey={sortBy}
+                sortOrder={sortOrder}
+                onSort={handleSort}
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {deal?.acceptanceSent && (
+          <TabsContent value="distribution">
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between gap-2">
+                <div>
+                  <h3 className="text-lg font-semibold" data-testid="text-distribution-title">VAST Tag Distribution</h3>
+                  <p className="text-sm text-muted-foreground">
+                    Distribute VAST endpoints to CMS platforms for ad delivery. Choose the format that matches your CMS capabilities.
+                  </p>
+                </div>
+                {distributionData && distributionData.lineItems.length > 0 && (
+                  <Button
+                    variant="outline"
+                    onClick={handleDownloadAll}
+                    data-testid="button-download-all"
+                  >
+                    <Download className="h-4 w-4 mr-2" />
+                    Download All
+                  </Button>
+                )}
+              </CardHeader>
+              <CardContent>
+                {distributionLoading ? (
+                  <div className="flex items-center justify-center py-12">
+                    <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                  </div>
+                ) : !distributionData || distributionData.lineItems.length === 0 ? (
+                  <div className="text-center py-12 text-muted-foreground" data-testid="text-no-distribution">
+                    <Link2 className="h-10 w-10 mx-auto mb-3 opacity-50" />
+                    <p>No line items available for distribution.</p>
+                  </div>
+                ) : (
+                  <div className="space-y-4">
+                    {distributionData.lineItems.map((item) => (
+                      <Card key={item.lineItemId} data-testid={`distribution-card-${item.lineItemId}`}>
+                        <CardContent className="py-4">
+                          <div className="flex flex-col gap-3">
+                            <div className="flex items-center justify-between gap-2 flex-wrap">
+                              <div className="flex items-center gap-2">
+                                <span className="font-medium" data-testid={`text-distribution-name-${item.lineItemId}`}>{item.lineItemName}</span>
+                                <StatusBadge status={item.status} />
+                                {item.creativeType && (
+                                  <Badge variant="secondary" className="capitalize text-xs">
+                                    {item.creativeType}
+                                  </Badge>
+                                )}
+                              </div>
+                              <div className="flex items-center gap-2">
+                                <Tooltip>
+                                  <TooltipTrigger asChild>
+                                    <Button
+                                      variant="outline"
+                                      size="sm"
+                                      onClick={() => handleDownloadHtml(item.lineItemId)}
+                                      data-testid={`button-download-html-${item.lineItemId}`}
+                                    >
+                                      <FileCode className="h-4 w-4 mr-1" />
+                                      HTML
+                                    </Button>
+                                  </TooltipTrigger>
+                                  <TooltipContent>
+                                    <p>Download HTML player file for CMS platforms that support web content scheduling</p>
+                                  </TooltipContent>
+                                </Tooltip>
+                                <Tooltip>
+                                  <TooltipTrigger asChild>
+                                    <Button
+                                      variant="outline"
+                                      size="sm"
+                                      onClick={() => handleDownloadZip(item.lineItemId)}
+                                      data-testid={`button-download-zip-${item.lineItemId}`}
+                                    >
+                                      <Package className="h-4 w-4 mr-1" />
+                                      ZIP
+                                    </Button>
+                                  </TooltipTrigger>
+                                  <TooltipContent>
+                                    <p>Download ZIP package for CMS platforms that only accept offline file uploads</p>
+                                  </TooltipContent>
+                                </Tooltip>
+                              </div>
+                            </div>
+                            <div className="flex items-center gap-2">
+                              <code className="flex-1 text-xs bg-muted px-3 py-2 rounded-md font-mono break-all" data-testid={`text-vast-url-${item.lineItemId}`}>
+                                {item.vastUrl}
+                              </code>
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <Button
+                                    variant="outline"
+                                    size="icon"
+                                    onClick={() => handleCopyVastUrl(item.vastUrl, item.lineItemId)}
+                                    data-testid={`button-copy-vast-${item.lineItemId}`}
+                                  >
+                                    {copiedId === item.lineItemId ? (
+                                      <Check className="h-4 w-4 text-green-600" />
+                                    ) : (
+                                      <ClipboardCopy className="h-4 w-4" />
+                                    )}
+                                  </Button>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                  <p>Copy VAST endpoint URL for CMS platforms with native VAST support</p>
+                                </TooltipContent>
+                              </Tooltip>
+                            </div>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </TabsContent>
+        )}
+      </Tabs>
+
+      <FilterDrawer
+        open={filterOpen}
+        onOpenChange={setFilterOpen}
+        fields={filterFields}
+        values={filterValues}
+        onChange={setFilterValues}
+        onApply={handleApplyFilters}
+        onClear={handleClearFilters}
+        title="Filter Insertion Orders"
+      />
+
+      <HistoryDrawer
+        open={historyDrawerOpen}
+        onOpenChange={setHistoryDrawerOpen}
+        entityId={dealId || ""}
+        entityType="deal"
+        entityName={deal?.name}
+        hierarchical={true}
+      />
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Line Item</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete "{lineItemToDelete?.name}"? This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel data-testid="button-cancel-delete">Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirmDelete}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              data-testid="button-confirm-delete"
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <AlertDialog open={optimizeDialogOpen} onOpenChange={setOptimizeDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Auto-Optimize Line Item</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will use AI recommendations to add up to 5 optimal inventories to "{lineItemToOptimize?.name}". 
+              Existing inventory selections will be preserved.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel data-testid="button-cancel-optimize">Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirmOptimize}
+              disabled={autoOptimizeMutation.isPending}
+              data-testid="button-confirm-optimize"
+            >
+              {autoOptimizeMutation.isPending ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Optimizing...
+                </>
+              ) : (
+                <>
+                  <Sparkles className="h-4 w-4 mr-2" />
+                  Optimize
+                </>
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}