adserver-dashboard 1.0.0

package/client/src/pages/deal-line-items.tsx

@@ -0,0 +1,1703 @@
+import { useParams, useLocation } from "wouter";
+import { useTranslation } from "@/lib/i18n";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useToast } from "@/hooks/use-toast";
+import { useState } from "react";
+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 { PageHeader } from "@moving-walls/design-system";
+import { AgGridTable } from "@moving-walls/design-system";
+import type { AgGridTableServerSideConfig, ColDef } from "@moving-walls/design-system";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@moving-walls/design-system";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@moving-walls/design-system";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@moving-walls/design-system";
+import { Input } from "@moving-walls/design-system";
+import {
+  ArrowLeft,
+  Plus,
+  Package,
+  Pencil,
+  Copy,
+  Trash2,
+  Loader2,
+  Calendar,
+  DollarSign,
+  BarChart3,
+  Monitor,
+  MoreHorizontal,
+  FileText,
+  History,
+  Search,
+  X,
+  Image,
+  Send,
+  RotateCcw,
+  Archive,
+  Filter,
+  Eye,
+  PlayCircle,
+  Wallet,
+} from "lucide-react";
+import { RequestApprovalSheet } from "@/components/deals/request-approval-sheet";
+import { ReopenDealSheet } from "@/components/deals/reopen-deal-sheet";
+import { ResendApprovalSheet } from "@/components/deals/resend-approval-sheet";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Tooltip,
+} from "@moving-walls/design-system";
+import {
+  InfluenceDealsAPI,
+  influenceDealsRequest,
+  generateExternalId,
+  isDealEditable,
+  type Deal,
+  type LineItem,
+} from "@/lib/influence-deals-api";
+import { DealStatusBadge } from "@/components/deals/deal-status-badge";
+import { usePageTitle } from "@/hooks/use-page-title";
+
+export default function DealLineItemsPage() {
+  const { t } = useTranslation(['deals', 'common', 'creatives']);
+  const { dealId } = useParams<{ dealId: string }>();
+  const [, setLocation] = useLocation();
+  const queryClient = useQueryClient();
+
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [lineItemToDelete, setLineItemToDelete] = useState<LineItem | null>(
+    null,
+  );
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isCopying, setIsCopying] = useState<string | null>(null);
+  const [isActivating, setIsActivating] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [selectedLineItem, setSelectedLineItem] = useState<LineItem | null>(null);
+  const [lineItemPopoverOpen, setLineItemPopoverOpen] = useState(false);
+  const [inventorySearch, setInventorySearch] = useState("");
+  const [inventoryTab, setInventoryTab] = useState("screens");
+  const [popoverTab, setPopoverTab] = useState<"inventories" | "creatives">("inventories");
+  const [isApprovalSheetOpen, setIsApprovalSheetOpen] = useState(false);
+  const [isReopenSheetOpen, setIsReopenSheetOpen] = useState(false);
+  const [isResendApprovalSheetOpen, setIsResendApprovalSheetOpen] = useState(false);
+  const [activateDialogOpen, setActivateDialogOpen] = useState(false);
+  const [archiveDialogOpen, setArchiveDialogOpen] = useState(false);
+  const [isArchiving, setIsArchiving] = useState(false);
+  const { toast } = useToast();
+  const [historyDrawerOpen, setHistoryDrawerOpen] = useState(false);
+  const [lineItemSearch, setLineItemSearch] = useState("");
+
+  const { data: deal, isLoading: isLoadingDeal } = useQuery({
+    queryKey: ["deal", dealId],
+    queryFn: async () => {
+      const response = await influenceDealsRequest<Deal>(
+        InfluenceDealsAPI.deals.get(dealId!),
+      );
+      return response;
+    },
+    enabled: !!dealId,
+    refetchOnMount: 'always',
+  });
+
+  usePageTitle("Line Items", deal?.name);
+
+  const { data: lineItemsResponse, isLoading: isLoadingLineItems } = useQuery({
+    queryKey: ["deal-line-items", dealId, currentPage, pageSize],
+    queryFn: async () => {
+      const response = await influenceDealsRequest<{ 
+        data: LineItem[]; 
+        pagination?: { page: number; limit: number; total: number; totalPages: number } 
+      }>(
+        InfluenceDealsAPI.lineItems.list(dealId!, { page: currentPage, limit: pageSize }),
+      );
+      return {
+        data: response?.data || response || [],
+        pagination: (response as any)?.pagination || null
+      };
+    },
+    enabled: !!dealId,
+    refetchOnMount: 'always',
+  });
+
+  const lineItems = Array.isArray(lineItemsResponse?.data) ? lineItemsResponse.data : [];
+  const paginationInfo = lineItemsResponse?.pagination;
+  const isLoading = isLoadingDeal || isLoadingLineItems;
+
+  // Fetch full line item details when sheet is open (includes targeting data)
+  const { data: lineItemDetails, isLoading: isLoadingDetails } = useQuery({
+    queryKey: ["line-item-details", dealId, selectedLineItem?.id],
+    queryFn: async () => {
+      const response = await influenceDealsRequest<any>(
+        InfluenceDealsAPI.lineItems.get(dealId!, selectedLineItem!.id),
+      );
+      return response;
+    },
+    enabled: !!dealId && !!selectedLineItem?.id && lineItemPopoverOpen,
+  });
+
+  // Fetch inventories for selected line item when sheet is open
+  const { data: lineItemInventoriesResponse, isLoading: isLoadingInventories } = useQuery({
+    queryKey: ["line-item-inventories", dealId, selectedLineItem?.id],
+    queryFn: async () => {
+      const response = await influenceDealsRequest<{ 
+        data: any[]; 
+        pagination?: { page: number; limit: number; total: number; totalPages: number } 
+      }>(
+        InfluenceDealsAPI.lineItems.inventories(dealId!, selectedLineItem!.id, { page: 1, limit: 100 }),
+      );
+      return {
+        data: response?.data || response || [],
+        pagination: (response as any)?.pagination || null
+      };
+    },
+    enabled: !!dealId && !!selectedLineItem?.id && lineItemPopoverOpen,
+  });
+
+  // Fetch creatives for selected line item when sheet is open
+  const { data: lineItemCreativesResponse, isLoading: isLoadingCreatives } = useQuery({
+    queryKey: ["line-item-creatives", dealId, selectedLineItem?.id],
+    queryFn: async () => {
+      const response = await influenceDealsRequest<{ 
+        data: any[]; 
+        pagination?: { page: number; limit: number; total: number; totalPages: number } 
+      }>(
+        InfluenceDealsAPI.creatives.listByLineItem(dealId!, selectedLineItem!.id, { page: 1, limit: 100 }),
+      );
+      return {
+        data: response?.data || response || [],
+        pagination: (response as any)?.pagination || null
+      };
+    },
+    enabled: !!dealId && !!selectedLineItem?.id && lineItemPopoverOpen,
+  });
+
+  const { data: historyData, isLoading: isLoadingHistory } = useQuery({
+    queryKey: ["deal-history", dealId],
+    queryFn: async () => {
+      const response = await influenceDealsRequest<{
+        dealId: string;
+        total: number;
+        items: Array<{
+          id: string;
+          action: string;
+          entityType: string;
+          entityId: string;
+          field?: string;
+          fieldLabel?: string;
+          summary?: string;
+          previousValue?: any;
+          currentValue?: any;
+          changedBy?: string | null;
+          changedByEmail?: string | null;
+          metadata?: {
+            entityName?: string;
+            totalChanges?: number;
+            changedFields?: string[];
+            approvalAction?: string;
+            decision?: string;
+            approverEmail?: string;
+            approverEmails?: string[];
+          };
+          timestamp: string;
+        }>;
+      }>(
+        InfluenceDealsAPI.deals.history(dealId!),
+        "GET",
+      );
+      return response;
+    },
+    enabled: !!dealId && historyDrawerOpen,
+  });
+
+  const totalPages = paginationInfo?.totalPages || 1;
+  const totalItems = paginationInfo?.total || lineItems.length;
+  const filteredLineItems = lineItems.filter((li) => {
+    if (!lineItemSearch) return true;
+    const search = lineItemSearch.toLowerCase();
+    return (li.name || "").toLowerCase().includes(search);
+  });
+  const paginatedLineItems = filteredLineItems;
+
+  const formatCurrency = (
+    amount: number | undefined,
+    currency: string = "MYR",
+  ): string => {
+    if (!amount) return `${currency} 0`;
+    return `${currency} ${amount.toLocaleString()}`;
+  };
+
+  const formatDate = (dateStr?: string | null): string => {
+    if (!dateStr) return "--";
+    const date = new Date(dateStr);
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "2-digit",
+      year: "numeric",
+    });
+  };
+
+  const formatDateRange = (
+    startDate?: string | null,
+    endDate?: string | null,
+  ): string => {
+    if (!startDate && !endDate) return "--";
+    const start = startDate ? formatDate(startDate) : "--";
+    const end = endDate ? formatDate(endDate) : "--";
+    return `${start} - ${end}`;
+  };
+
+  const formatPacingType = (type?: string | null): string => {
+    if (!type) return "--";
+    const normalizedType = type.toLowerCase().replace(/[_-]/g, '');
+    switch (normalizedType) {
+      case 'even': return 'Even (Default)';
+      case 'asap': return 'ASAP';
+      case 'frontloaded': return 'Front-Loaded';
+      case 'backloaded': return 'Back-Loaded';
+      default: return type.charAt(0).toUpperCase() + type.slice(1);
+    }
+  };
+
+  const calculateDaysRemaining = (endDate?: string | null): string | null => {
+    if (!endDate) return null;
+    const end = new Date(endDate);
+    const now = new Date();
+    const days = Math.ceil(
+      (end.getTime() - now.getTime()) / (1000 * 60 * 60 * 24),
+    );
+    if (days < 0) return "Ended";
+    if (days === 0) return "Ends today";
+    return `${days} days remaining`;
+  };
+
+  // Deal-level budget from deal configuration
+  const dealBudget =
+    (deal as any)?.totalBudget ||
+    (deal as any)?.direct?.budgetSetup?.budgetAmount ||
+    (deal as any)?.programmatic?.dealSetup?.dealFloor ||
+    0;
+
+  // Use deal-level allocated budget if available from API
+  // If not available, don't show allocated vs total comparison
+  const hasAllocatedBudgetData = typeof (deal as any)?.allocatedBudget === 'number';
+  const allocatedBudget = hasAllocatedBudgetData ? (deal as any).allocatedBudget : 0;
+
+  // For backward compatibility
+  const totalBudget = dealBudget;
+
+  // Remaining budget from deal level - only calculate if we have allocated data
+  const remainingBudget = hasAllocatedBudgetData 
+    ? (deal as any)?.remainingBudget || (dealBudget - allocatedBudget)
+    : Infinity;
+  const isBudgetExceeded = hasAllocatedBudgetData && dealBudget > 0 && allocatedBudget >= dealBudget;
+
+  // Use deal-level total impressions if available
+  const totalImpressions = 
+    (deal as any)?.totalImpressions || 
+    (deal as any)?.targetQuantity || 
+    (deal as any)?.impressionsGoal || 
+    0;
+
+  const formatNumber = (num: number): string => {
+    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
+    if (num >= 1000) return `${(num / 1000).toFixed(0)}k`;
+    return num.toString();
+  };
+
+  const generateCopyName = (originalName: string): string => {
+    const copyPattern = /\s*-\s*Copy\s*(\d+)?$/i;
+    const match = originalName.match(copyPattern);
+
+    if (match) {
+      const currentNum = match[1] ? parseInt(match[1], 10) : 1;
+      const baseName = originalName.replace(copyPattern, "");
+      return `${baseName} - Copy ${currentNum + 1}`;
+    }
+
+    const existingCopies = lineItems.filter((li) => {
+      const liName = li.name || "";
+      return liName.startsWith(originalName) && liName.includes("Copy");
+    });
+
+    if (existingCopies.length === 0) {
+      return `${originalName} - Copy 1`;
+    }
+
+    let maxCopyNum = 0;
+    existingCopies.forEach((li) => {
+      const liMatch = (li.name || "").match(/Copy\s*(\d+)/i);
+      if (liMatch) {
+        const num = parseInt(liMatch[1], 10);
+        if (num > maxCopyNum) maxCopyNum = num;
+      }
+    });
+
+    return `${originalName} - Copy ${maxCopyNum + 1}`;
+  };
+
+  const handleDeleteClick = (lineItem: LineItem) => {
+    setLineItemToDelete(lineItem);
+    setDeleteDialogOpen(true);
+  };
+
+  const handleConfirmDelete = async () => {
+    if (!lineItemToDelete || !dealId) return;
+
+    setIsDeleting(true);
+    try {
+      await influenceDealsRequest(
+        InfluenceDealsAPI.lineItems.delete(dealId, lineItemToDelete.id),
+        "DELETE",
+      );
+      queryClient.invalidateQueries({ queryKey: ["deal-line-items", dealId] });
+      setDeleteDialogOpen(false);
+      setLineItemToDelete(null);
+    } catch (error) {
+      console.error("Failed to delete line item:", error);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const handleCopyLineItem = async (lineItem: LineItem) => {
+    if (!dealId) return;
+
+    setIsCopying(lineItem.id);
+    try {
+      const li = lineItem as any;
+      const copyName = generateCopyName(lineItem.name);
+
+      const payload: any = {
+        externalId: generateExternalId(),
+        name: copyName,
+        status: "DRAFT",
+        startDate: li.startDate,
+        endDate: li.endDate,
+        currency: li.currency || deal?.currency || "USD",
+      };
+
+      if (li.direct) {
+        payload.direct = {
+          budgetSetup: li.direct.budgetSetup,
+          campaignGoal: li.direct.campaignGoal,
+        };
+      }
+
+      if (li.impressions) {
+        payload.impressions = li.impressions;
+      }
+      if (li.netCostPerDay) {
+        payload.netCostPerDay = li.netCostPerDay;
+      }
+
+      if (li.targeting) {
+        payload.targeting = li.targeting;
+      }
+
+      await influenceDealsRequest(
+        InfluenceDealsAPI.lineItems.create(dealId),
+        "POST",
+        payload,
+      );
+
+      queryClient.invalidateQueries({ queryKey: ["deal-line-items", dealId] });
+    } catch (error) {
+      console.error("Failed to copy line item:", error);
+    } finally {
+      setIsCopying(null);
+    }
+  };
+
+  const handleActivateCampaign = async () => {
+    if (!dealId || !deal) return;
+
+    setIsActivating(true);
+    try {
+      const startDate = (deal as any)?.startDate;
+      const today = new Date();
+      today.setHours(0, 0, 0, 0);
+
+      let newStatus: string;
+      if (startDate) {
+        const dealStartDate = new Date(startDate);
+        if (isNaN(dealStartDate.getTime())) {
+          newStatus = "LIVE";
+        } else {
+          dealStartDate.setHours(0, 0, 0, 0);
+          newStatus = dealStartDate > today ? "APPROVED" : "LIVE";
+        }
+      } else {
+        newStatus = "LIVE";
+      }
+
+      await influenceDealsRequest(
+        InfluenceDealsAPI.deals.update(dealId),
+        "PUT",
+        { status: newStatus }
+      );
+
+      queryClient.invalidateQueries({ queryKey: ["deal", dealId] });
+      queryClient.invalidateQueries({ queryKey: ["deal-line-items", dealId] });
+    } catch (error) {
+      console.error("Failed to activate campaign:", error);
+    } finally {
+      setIsActivating(false);
+    }
+  };
+
+  const handleArchiveDeal = async () => {
+    if (!dealId) return;
+    setIsArchiving(true);
+    try {
+      await influenceDealsRequest(
+        InfluenceDealsAPI.deals.update(dealId),
+        "PUT",
+        { status: "ARCHIVED" }
+      );
+      queryClient.invalidateQueries({ queryKey: ["deal", dealId] });
+      queryClient.invalidateQueries({ queryKey: ["deals"] });
+      toast({ title: "Deal archived", description: "The deal has been moved to archive.", variant: "success" });
+      setLocation("/deals");
+    } catch (error) {
+      console.error("Failed to archive deal:", error);
+      toast({ title: "Error", description: "Failed to archive deal. Please try again.", variant: "destructive" });
+    } finally {
+      setIsArchiving(false);
+      setArchiveDialogOpen(false);
+    }
+  };
+
+  const handleLineItemClick = (lineItem: LineItem) => {
+    setLocation(`/deals/${dealId}/line-items/${lineItem.id}`);
+  };
+
+  const getInventoryCount = (li: any): number => {
+    return li.totalInventories || li.inventoryIds?.length || li.inventories?.length || 0;
+  };
+
+  interface InventoryItem {
+    id: string;
+    name: string;
+    address?: string;
+    venueType?: string;
+    publisherName?: string;
+    mediaType?: string;
+    estimatedCost?: number;
+    tags?: string[];
+    thumbnail?: string;
+  }
+
+  interface CreativeItem {
+    id: string;
+    name: string;
+    type?: string;
+    status?: string;
+    thumbnailUrl?: string;
+    dimensions?: string;
+    mimeType?: string;
+    mediaUrl?: string;
+  }
+
+  const getLineItemInventories = (lineItem: any): InventoryItem[] => {
+    if (!lineItem.inventories || !Array.isArray(lineItem.inventories) || lineItem.inventories.length === 0) {
+      return [];
+    }
+    
+    return lineItem.inventories.map((inv: any, idx: number) => ({
+      id: inv.id || inv.inventoryId || `inv-${idx}`,
+      name: inv.name || inv.inventoryName || "Unnamed inventory",
+      address: inv.address || inv.location,
+      venueType: inv.venueType,
+      publisherName: inv.publisherName,
+      mediaType: inv.mediaType,
+      estimatedCost: inv.estimatedCost || inv.dailyCost,
+      tags: inv.tags,
+    }));
+  };
+
+  const getLineItemCreatives = (lineItem: any): CreativeItem[] => {
+    if (!lineItem.creatives || !Array.isArray(lineItem.creatives) || lineItem.creatives.length === 0) {
+      return [];
+    }
+    
+    return lineItem.creatives.map((cr: any, idx: number) => ({
+      id: cr.id || cr.creativeId || `cr-${idx}`,
+      name: cr.name || cr.creativeName || "Unnamed creative",
+      type: cr.type || cr.creativeType || cr.mediaType,
+      status: cr.status,
+      thumbnailUrl: cr.thumbnailUrl || cr.thumbnail || cr.creativeUri || cr.previewUrl,
+      dimensions: cr.dimensions || cr.resolution || (cr.width && cr.height ? `${cr.width}x${cr.height}` : undefined),
+    }));
+  };
+
+  // Use fetched inventories from API, fallback to embedded inventories
+  const fetchedInventories = lineItemInventoriesResponse?.data || [];
+  const selectedInventories = fetchedInventories.length > 0 
+    ? fetchedInventories.map((inv: any, idx: number) => ({
+        id: inv.id || inv.inventoryId || `inv-${idx}`,
+        name: inv.name || inv.inventoryName || "Unnamed inventory",
+        address: inv.address || inv.location,
+        venueType: inv.venueType,
+        publisherName: inv.publisherName || inv.publisher?.name,
+        mediaType: inv.mediaType,
+        estimatedCost: inv.estimatedCost || inv.dailyCost,
+        tags: inv.tags,
+        thumbnail: inv.thumbnail || inv.thumbnailUrl || inv.imageUrl,
+      }))
+    : (selectedLineItem ? getLineItemInventories(selectedLineItem) : []);
+  
+  // Use fetched creatives from API, fallback to embedded creatives
+  const fetchedCreatives = lineItemCreativesResponse?.data || [];
+  const selectedCreatives = fetchedCreatives.length > 0 
+    ? fetchedCreatives.map((cr: any, idx: number) => ({
+        id: cr.id || cr.creativeId || `cr-${idx}`,
+        name: cr.name || cr.creativeName || "Unnamed creative",
+        type: cr.type || cr.creativeType,
+        status: cr.status,
+        thumbnailUrl: cr.thumbnail || cr.thumbnailUrl,
+        dimensions: cr.dimensions || cr.resolution,
+        mimeType: cr.mimeType,
+        mediaUrl: cr.creativeUri || cr.mediaUrl || cr.url,
+      }))
+    : (selectedLineItem ? getLineItemCreatives(selectedLineItem) : []);
+  const filteredInventories = selectedInventories.filter((inv: InventoryItem) => 
+    inv.name.toLowerCase().includes(inventorySearch.toLowerCase()) ||
+    inv.address?.toLowerCase().includes(inventorySearch.toLowerCase())
+  );
+  const filteredCreatives = selectedCreatives.filter(cr =>
+    cr.name.toLowerCase().includes(inventorySearch.toLowerCase())
+  );
+
+  const dealMode =
+    (deal as any)?.mode?.toUpperCase() === "PROGRAMMATIC"
+      ? "PROGRAMMATIC"
+      : "DIRECT";
+
+  // Check if this is a Planner deal that can be edited in restricted mode
+  const isPlannerDeal = deal?.source === 'mw-planner';
+  const PLANNER_RESTRICTED_EDIT_STATUSES = ['APPROVED', 'LIVE', 'PENDING'];
+  const isPlannerRestrictedEdit = isPlannerDeal && 
+    deal?.status && 
+    PLANNER_RESTRICTED_EDIT_STATUSES.includes(deal.status.toUpperCase());
+
+  const showRequestApprovalButton = ['GENERATED', 'REOPENED'].includes(deal?.status?.toUpperCase() || '');
+  
+  const showActivateButton = ['DRAFT', 'GENERATED'].includes(deal?.status?.toUpperCase() || '') && totalItems >= 1;
+  
+  const REOPEN_ALLOWED_STATUSES = ['APPROVED', 'LIVE', 'COMPLETED', 'EXPIRED', 'REJECTED', 'ARCHIVED'];
+  const showReopenButton = dealMode === 'DIRECT' && 
+    !isPlannerDeal &&
+    deal?.status && 
+    REOPEN_ALLOWED_STATUSES.includes(deal.status.toUpperCase());
+
+  // Show resend approval email button for PENDING deals
+  const showResendApprovalButton = deal?.status?.toUpperCase() === 'PENDING';
+
+  // Only allow editing in DRAFT, GENERATED, or REOPENED stages (or restricted mode for Planner)
+  const canEdit = isDealEditable(deal?.status);
+  const canEditOrPlannerRestricted = canEdit || isPlannerRestrictedEdit;
+
+  const lineItemColumnDefs: ColDef<LineItem>[] = [
+    {
+      colId: "name",
+      headerName: "Name",
+      field: "name",
+      sortable: true,
+      minWidth: 200,
+      flex: 1,
+      cellRenderer: (params: any) => {
+        const lineItem = params.data as LineItem;
+        if (!lineItem) return null;
+        return (
+          <p
+            className="font-medium text-mw-primary-600 hover:text-mw-primary-700 hover:underline cursor-pointer"
+            onClick={() => handleLineItemClick(lineItem)}
+          >
+            {lineItem.name}
+          </p>
+        );
+      },
+    },
+    {
+      colId: "status",
+      headerName: "Status",
+      sortable: false,
+      cellRenderer: (params: any) => {
+        const li = params.data as any;
+        if (!li) return null;
+        return <DealStatusBadge status={li.status || "DRAFT"} />;
+      },
+    },
+    {
+      colId: "priority",
+      headerName: "Priority",
+      sortable: false,
+      cellRenderer: (params: any) => {
+        const li = params.data as any;
+        if (!li) return null;
+        return (
+          <span className="text-sm text-mw-neutral-900 dark:text-white">
+            {li.priority || "-"}
+          </span>
+        );
+      },
+    },
+    {
+      colId: "creativeType",
+      headerName: "Creative Type",
+      sortable: false,
+      cellRenderer: (params: any) => {
+        const li = params.data as any;
+        if (!li) return null;
+        return (
+          <span className="text-sm text-mw-neutral-900 dark:text-white">
+            {li.creativeType || "-"}
+          </span>
+        );
+      },
+    },
+    {
+      colId: "flightDates",
+      headerName: "Flight Dates",
+      sortable: false,
+      minWidth: 180,
+      cellRenderer: (params: any) => {
+        const li = params.data as any;
+        if (!li) return null;
+        const daysRemaining = calculateDaysRemaining(li.endDate);
+        return (
+          <div>
+            <p className="text-sm text-mw-neutral-900 dark:text-white">
+              {formatDateRange(li.startDate, li.endDate)}
+            </p>
+            {daysRemaining && (
+              <p className={cn("text-xs", daysRemaining === "Ended" ? "text-mw-error-600" : "text-mw-success-600")}>
+                {daysRemaining}
+              </p>
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      colId: "budget",
+      headerName: "Budget",
+      sortable: false,
+      cellRenderer: (params: any) => {
+        const li = params.data as any;
+        if (!li) return null;
+        return (
+          <p className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+            {formatCurrency(
+              li.budget || li.direct?.budgetSetup?.budgetAmount,
+              deal?.currency || "MYR",
+            )}
+          </p>
+        );
+      },
+    },
+    {
+      colId: "trafficAllocation",
+      headerName: "Traffic Allocation",
+      sortable: false,
+      cellRenderer: (params: any) => {
+        const li = params.data as any;
+        if (!li) return null;
+        return (
+          <span className="text-sm text-mw-neutral-900 dark:text-white">
+            {li.trafficAllocation ? `${li.trafficAllocation}%` : "-"}
+          </span>
+        );
+      },
+    },
+    {
+      colId: "impressions",
+      headerName: "Impressions",
+      sortable: false,
+      cellRenderer: (params: any) => {
+        const li = params.data as any;
+        if (!li) return null;
+        return (
+          <span className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+            {(li.targetValue || li.direct?.campaignGoal?.targetValue || li.direct?.goalSetup?.targetValue || li.targetQuantity || li.impressions || 0).toLocaleString()}
+          </span>
+        );
+      },
+    },
+    {
+      colId: "revenue",
+      headerName: "Revenue",
+      sortable: false,
+      cellRenderer: (params: any) => {
+        const li = params.data as any;
+        if (!li) return null;
+        return (
+          <span className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+            {formatCurrency(li.revenue || 0, deal?.currency || "MYR")}
+          </span>
+        );
+      },
+    },
+    {
+      colId: "actions",
+      headerName: "",
+      sortable: false,
+      width: 60,
+      cellRenderer: (params: any) => {
+        const lineItem = params.data as LineItem;
+        if (!lineItem) return null;
+        return (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="sm" className="h-8 w-8 p-0" isIconOnly>
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {canEditOrPlannerRestricted && (
+                <DropdownMenuItem onClick={() => setLocation(`/deals/${dealId}/line-items/${lineItem.id}/edit${isPlannerRestrictedEdit ? '?plannerRestricted=true' : ''}`)}>
+                  <Pencil className="h-4 w-4 mr-2" />
+                  {isPlannerRestrictedEdit ? 'Edit Pacing & Creatives' : 'Edit'}
+                </DropdownMenuItem>
+              )}
+              <DropdownMenuItem onClick={() => setLocation(`/deals/${dealId}/line-items/${lineItem.id}/creatives`)}>
+                <Image className="h-4 w-4 mr-2" />
+                Creatives
+              </DropdownMenuItem>
+              {canEdit && (
+                <>
+                  <DropdownMenuItem
+                    onClick={() => handleCopyLineItem(lineItem)}
+                    disabled={isCopying === lineItem.id}
+                  >
+                    {isCopying === lineItem.id ? (
+                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    ) : (
+                      <Copy className="h-4 w-4 mr-2" />
+                    )}
+                    Copy
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => handleDeleteClick(lineItem)}
+                    className="text-red-600 focus:text-red-600"
+                  >
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Delete
+                  </DropdownMenuItem>
+                </>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        );
+      },
+    },
+  ];
+
+  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-shrink-0 px-6 py-5 bg-white dark:bg-mw-neutral-800">
+        <div className="flex items-start justify-between">
+          <div className="flex items-start gap-3">
+            <Button variant="ghost" size="sm" className="mt-1 h-8 w-8 !p-0" isIconOnly onClick={() => setLocation("/deals")}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <div className="flex items-center gap-3">
+                <h1 className="text-2xl font-semibold text-mw-neutral-900 dark:text-white">
+                  {deal?.name || "Loading..."}
+                </h1>
+                <Badge className="bg-blue-50 text-blue-600 border-blue-200 text-xs">
+                  {(deal as any)?.source || "Activate"}
+                </Badge>
+                <Badge className="bg-amber-50 text-amber-700 border-amber-200 text-xs">
+                  {dealMode === 'PROGRAMMATIC' ? 'Programmatic' : (deal as any)?.dealType || 'RFP'}
+                </Badge>
+              </div>
+              <div className="flex items-center gap-2 mt-1">
+                <p className="text-sm text-mw-neutral-500">
+                  ID: {deal?.dealId || deal?.id?.slice(0, 10) || "--"}
+                </p>
+              </div>
+              <p className="text-sm text-mw-neutral-500 mt-0.5">
+                Deal details and line items
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            {canEdit && (
+              <Button
+                className="bg-mw-primary-500 hover:bg-mw-primary-600 text-white"
+                disabled={isBudgetExceeded}
+                onClick={() => setLocation(`/deals/${dealId}/line-items/new`)}
+              >
+                <Plus className="h-4 w-4 mr-2" />
+                New Line Item
+              </Button>
+            )}
+            {showActivateButton && (
+              <Button
+                className="bg-mw-primary-500 hover:bg-mw-primary-600 text-white"
+                onClick={() => setActivateDialogOpen(true)}
+                disabled={isActivating}
+              >
+                {isActivating ? (
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                ) : (
+                  <PlayCircle className="h-4 w-4 mr-2" />
+                )}
+                Activate Deal
+              </Button>
+            )}
+            {showRequestApprovalButton && (
+              <Button
+                className="bg-mw-primary-500 hover:bg-mw-primary-600 text-white"
+                onClick={() => setIsApprovalSheetOpen(true)}
+              >
+                <Send className="h-4 w-4 mr-2" />
+                Request Acceptance
+              </Button>
+            )}
+            {showResendApprovalButton && (
+              <Button
+                onClick={() => setIsResendApprovalSheetOpen(true)}
+                variant="outline"
+                className="border-mw-info-500 text-mw-info-600 hover:bg-mw-info-50"
+              >
+                <Send className="h-4 w-4 mr-2" />
+                Resend Approval
+              </Button>
+            )}
+            {showReopenButton && (
+              <Button
+                onClick={() => setIsReopenSheetOpen(true)}
+                variant="outline"
+                className="border-amber-500 text-amber-600 hover:bg-amber-50"
+              >
+                <RotateCcw className="h-4 w-4 mr-2" />
+                Reopen Deal
+              </Button>
+            )}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" isIconOnly className="h-9 w-9 !p-0">
+                  <MoreHorizontal className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {canEditOrPlannerRestricted && (
+                  <DropdownMenuItem onClick={() => setLocation(`/deals/edit/${dealId}${isPlannerRestrictedEdit ? '?plannerRestricted=true' : ''}`)}>
+                    <Pencil className="h-4 w-4 mr-2" />
+                    {isPlannerRestrictedEdit ? 'Edit Pacing & Creatives' : 'Edit Deal'}
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuItem
+                  onClick={() => setArchiveDialogOpen(true)}
+                  className="text-red-600 focus:text-red-600"
+                >
+                  <Archive className="h-4 w-4 mr-2" />
+                  Move to Archive
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      </div>
+
+      {/* Main content with padding */}
+      <div className="flex-1 w-full overflow-auto px-6 py-6">
+        <div className="grid grid-cols-5 gap-4 mb-6">
+          {[
+            { label: "Total Line Items", value: totalItems.toLocaleString(), icon: FileText, bgColor: "bg-blue-50", iconColor: "text-blue-500" },
+            { label: "Total Ad Plays", value: ((deal as any)?.totalAdPlays || 0).toLocaleString(), icon: PlayCircle, bgColor: "bg-green-50", iconColor: "text-green-500" },
+            { label: "Total Impressions", value: totalImpressions.toLocaleString(), icon: Eye, bgColor: "bg-purple-50", iconColor: "text-purple-500" },
+            { label: "Revenue", value: formatCurrency((deal as any)?.revenue || 0, deal?.currency || "MYR"), icon: DollarSign, bgColor: "bg-amber-50", iconColor: "text-amber-500" },
+            { label: "Budget", value: formatCurrency(dealBudget || totalBudget, deal?.currency || "MYR"), icon: Wallet, 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="flex flex-col h-auto border-mw-neutral-100">
+          <CardHeader className="p-4 bg-white dark:bg-mw-neutral-800">
+            <div className="flex items-center gap-3">
+              <div className="flex items-center gap-2 text-sm font-medium text-mw-neutral-700 dark:text-mw-neutral-300">
+                <FileText className="h-4 w-4" />
+                Line Items
+              </div>
+              <div className="flex-1 relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+                <Input
+                  placeholder="Search line items..."
+                  className="pl-9 h-9"
+                  value={lineItemSearch}
+                  onChange={(e) => setLineItemSearch(e.target.value)}
+                />
+              </div>
+              <Button variant="outline" size="sm" className="h-9">
+                <Filter className="h-4 w-4 mr-2" />
+                Filters
+              </Button>
+              <Tooltip content="Deal History">
+                <Button 
+                  variant="outline" 
+                  size="sm" 
+                  className="h-9 w-9 !p-0" 
+                  isIconOnly
+                  onClick={() => setHistoryDrawerOpen(true)}
+                >
+                  <History className="h-4 w-4" />
+                </Button>
+              </Tooltip>
+            </div>
+          </CardHeader>
+
+          <CardContent className="p-0 flex-1 flex flex-col overflow-hidden">
+            {lineItems.length === 0 && !isLoading ? (
+              <div className="flex flex-col items-center justify-center py-16 text-center">
+                <div className="w-20 h-20 mb-4 flex items-center justify-center bg-mw-neutral-100 dark:bg-mw-neutral-800 rounded-lg">
+                  <Package className="w-10 h-10 text-mw-neutral-400" />
+                </div>
+                <h3 className="text-lg font-medium text-mw-neutral-900 dark:text-white mb-2">
+                  No Line Items Configured yet
+                </h3>
+                <p className="text-sm text-mw-neutral-500 dark:text-mw-neutral-400 mb-6 max-w-md">
+                  Create line items to define inventory, schedule, and budget
+                  for your campaign.
+                </p>
+                <Button
+                  onClick={() => setLocation(`/deals/${dealId}/line-items/new`)}
+                  className="bg-mw-primary-500 hover:bg-mw-primary-600 text-white"
+                >
+                  <Plus className="h-4 w-4 mr-2" />
+                  New Line Item
+                </Button>
+              </div>
+            ) : (
+              <div className="flex-1 overflow-hidden">
+                <AgGridTable
+                  rowData={paginatedLineItems}
+                  columnDefs={lineItemColumnDefs}
+                  getRowId={(row) => row.id}
+                  loading={isLoading}
+                  emptyMessage="No line items found."
+                  domLayout="autoHeight"
+                  serverSidePagination={true}
+                  serverSideConfig={{
+                    totalCount: totalItems,
+                    currentPage,
+                    pageSize,
+                    onPageChange: setCurrentPage,
+                    onPageSizeChange: (newSize) => {
+                      setPageSize(newSize);
+                      setCurrentPage(1);
+                    },
+                    pageSizeSelector: [10, 25, 50, 100],
+                  }}
+                />
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      <Sheet open={lineItemPopoverOpen} onOpenChange={setLineItemPopoverOpen}>
+        <SheetContent className="w-[640px] sm:max-w-[640px] p-0 flex flex-col">
+          <SheetHeader className="px-6 py-4 border-b border-mw-neutral-200 dark:border-mw-neutral-700 flex-shrink-0">
+            <div className="flex items-center justify-between">
+              <SheetTitle className="text-lg font-semibold">Line Item Details</SheetTitle>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setLineItemPopoverOpen(false)}
+                className="h-8 w-8 p-0"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          </SheetHeader>
+
+          {selectedLineItem && (() => {
+            const displayLineItem = lineItemDetails ? { ...selectedLineItem, ...lineItemDetails } : selectedLineItem;
+            return (
+            <div className="flex flex-col flex-1 overflow-hidden">
+              <div className="px-6 py-4 border-b border-mw-neutral-200 dark:border-mw-neutral-700 flex-shrink-0">
+                <div className="flex items-start justify-between mb-3">
+                  <div>
+                    <h3 className="text-base font-semibold text-mw-neutral-900 dark:text-white">
+                      {displayLineItem.name}
+                    </h3>
+                    <p className="text-xs text-mw-neutral-500 mt-0.5">
+                      LID: {displayLineItem.id?.slice(0, 8)}
+                    </p>
+                  </div>
+                  <DealStatusBadge status={(displayLineItem as any).status || "DRAFT"} />
+                </div>
+
+                <div className="space-y-4 mt-4">
+                  <div className="grid grid-cols-3 gap-3">
+                    <div>
+                      <p className="text-xs text-mw-neutral-500 dark:text-mw-neutral-400">Flight Dates</p>
+                      <p className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+                        {formatDateRange((displayLineItem as any).startDate, (displayLineItem as any).endDate)}
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-xs text-mw-neutral-500 dark:text-mw-neutral-400">Creative Type</p>
+                      <p className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+                        {(displayLineItem as any).creativeType || "--"}
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-xs text-mw-neutral-500 dark:text-mw-neutral-400">Duration</p>
+                      <p className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+                        {(displayLineItem as any).duration ? `${(displayLineItem as any).duration}s` : "--"}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="border-t border-mw-neutral-100 dark:border-mw-neutral-700 pt-3">
+                    <p className="text-xs font-medium text-mw-neutral-600 dark:text-mw-neutral-300 mb-2">Budget & Goals</p>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div>
+                        <p className="text-xs text-mw-neutral-500 dark:text-mw-neutral-400">Budget</p>
+                        <p className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+                          {formatCurrency(
+                            (displayLineItem as any).budget || (displayLineItem as any).direct?.budgetSetup?.budgetAmount,
+                            deal?.currency || "MYR"
+                          )}
+                        </p>
+                      </div>
+                      <div>
+                        <p className="text-xs text-mw-neutral-500 dark:text-mw-neutral-400">Goal Type → Target</p>
+                        <p className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+                          {(displayLineItem as any).goalType || (displayLineItem as any).direct?.campaignGoal?.type || (displayLineItem as any).direct?.goalSetup?.goalType || "Impressions"} → {formatNumber((displayLineItem as any).targetValue || (displayLineItem as any).direct?.campaignGoal?.targetValue || (displayLineItem as any).direct?.goalSetup?.targetValue || (displayLineItem as any).targetQuantity || (displayLineItem as any).impressions || 0)}
+                        </p>
+                      </div>
+                      <div>
+                        <p className="text-xs text-mw-neutral-500 dark:text-mw-neutral-400">Pacing</p>
+                        <p className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+                          {formatPacingType((displayLineItem as any).pacingType || (displayLineItem as any).pacing?.type || (displayLineItem as any).direct?.pacingSetup?.pacingType)}
+                          {((displayLineItem as any).pacing?.dailyCap || (displayLineItem as any).direct?.pacingSetup?.pacingLimit) && 
+                            ` (Daily: ${formatNumber((displayLineItem as any).pacing?.dailyCap || (displayLineItem as any).direct?.pacingSetup?.pacingLimit || 0)})`}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="border-t border-mw-neutral-100 dark:border-mw-neutral-700 pt-3">
+                    <p className="text-xs font-medium text-mw-neutral-600 dark:text-mw-neutral-300 mb-2">Specifications</p>
+                    <div className="grid grid-cols-2 gap-3">
+                      <div>
+                        <p className="text-xs text-mw-neutral-500 dark:text-mw-neutral-400">Resolutions</p>
+                        <p className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+                          {(displayLineItem as any).resolutions?.length > 0 
+                            ? (displayLineItem as any).resolutions.map((r: any) => typeof r === 'string' ? r : `${r.width}x${r.height}`).join(", ")
+                            : "--"}
+                        </p>
+                      </div>
+                      <div>
+                        <p className="text-xs text-mw-neutral-500 dark:text-mw-neutral-400">Inventories</p>
+                        <p className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+                          {getInventoryCount(displayLineItem)}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="border-t border-mw-neutral-100 dark:border-mw-neutral-700 pt-3">
+                    <p className="text-xs font-medium text-mw-neutral-600 dark:text-mw-neutral-300 mb-2">Targeting</p>
+                    <div className="grid grid-cols-2 gap-3">
+                      <div>
+                        <p className="text-xs text-mw-neutral-500 dark:text-mw-neutral-400">Demographics</p>
+                        <p className="text-sm font-medium text-mw-neutral-900 dark:text-white truncate">
+                          {(() => {
+                            const li = displayLineItem as any;
+                            const demo = li.targeting?.demographics || li.demographics || li.deliveryTargeting?.demographics;
+                            if (!demo) return "--";
+                            if (Array.isArray(demo)) return demo.join(", ") || "--";
+                            if (typeof demo === 'object') {
+                              const parts = [];
+                              if (demo.ageGroups?.length) parts.push(`Age: ${demo.ageGroups.join(", ")}`);
+                              if (demo.genders?.length) parts.push(`Gender: ${demo.genders.join(", ")}`);
+                              if (demo.incomeLevel?.length) parts.push(`Income: ${demo.incomeLevel.join(", ")}`);
+                              return parts.join(" | ") || "--";
+                            }
+                            return String(demo);
+                          })()}
+                        </p>
+                      </div>
+                      <div>
+                        <p className="text-xs text-mw-neutral-500 dark:text-mw-neutral-400">GeoFencing</p>
+                        <p className="text-sm font-medium text-mw-neutral-900 dark:text-white truncate">
+                          {(() => {
+                            const li = displayLineItem as any;
+                            const geo = li.targeting?.geoFencing || li.geoZones || li.geoFencing || li.deliveryTargeting?.geoFencing;
+                            if (!geo) return "--";
+                            if (Array.isArray(geo)) return `${geo.length} zone${geo.length !== 1 ? 's' : ''}`;
+                            if (typeof geo === 'object') {
+                              const geometrics = geo.geometrics || [];
+                              const locations = geo.locations || [];
+                              const pois = geo.pois || [];
+                              const total = geometrics.length + locations.length + pois.length;
+                              if (total > 0) return `${total} zone${total !== 1 ? 's' : ''}`;
+                            }
+                            return String(geo);
+                          })()}
+                        </p>
+                      </div>
+                      <div>
+                        <p className="text-xs text-mw-neutral-500 dark:text-mw-neutral-400">Signals</p>
+                        <p className="text-sm font-medium text-mw-neutral-900 dark:text-white truncate">
+                          {(() => {
+                            const li = displayLineItem as any;
+                            const signals = li.targeting?.signals || li.signals || li.deliveryTargeting?.signals;
+                            if (!signals) return "--";
+                            if (Array.isArray(signals)) return signals.length > 0 ? signals.join(", ") : "--";
+                            if (typeof signals === 'object') {
+                              const types = Object.keys(signals).filter(k => signals[k] && Object.keys(signals[k]).length > 0);
+                              if (types.length > 0) return types.map(t => t.charAt(0).toUpperCase() + t.slice(1)).join(", ");
+                            }
+                            return "--";
+                          })()}
+                        </p>
+                      </div>
+                      <div>
+                        <p className="text-xs text-mw-neutral-500 dark:text-mw-neutral-400">Schedule</p>
+                        <p className="text-sm font-medium text-mw-neutral-900 dark:text-white truncate">
+                          {(() => {
+                            const li = displayLineItem as any;
+                            const schedule = li.scheduleRules || li.schedule || li.scheduleGrids;
+                            if (!schedule) return "--";
+                            if (Array.isArray(schedule)) return `${schedule.length} rule${schedule.length !== 1 ? 's' : ''}`;
+                            if (typeof schedule === 'object') {
+                              if (schedule.rules) return `${schedule.rules.length} rule${schedule.rules.length !== 1 ? 's' : ''}`;
+                              const keys = Object.keys(schedule);
+                              if (keys.length > 0) return `${keys.length} day${keys.length !== 1 ? 's' : ''} configured`;
+                            }
+                            return String(schedule);
+                          })()}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex-1 flex flex-col overflow-hidden">
+                <div className="px-6 pt-4">
+                  <div className="flex border-b border-mw-neutral-200 dark:border-mw-neutral-700">
+                    <Button
+                      variant={popoverTab === "inventories" ? "primary" : "ghost"}
+                      size="sm"
+                      className={cn(
+                        "rounded-none border-b-2 -mb-px",
+                        popoverTab === "inventories"
+                          ? "border-mw-primary-500"
+                          : "border-transparent"
+                      )}
+                      onClick={() => setPopoverTab("inventories")}
+                    >
+                      Inventories ({getInventoryCount(displayLineItem)})
+                    </Button>
+                    <Button
+                      variant={popoverTab === "creatives" ? "primary" : "ghost"}
+                      size="sm"
+                      className={cn(
+                        "rounded-none border-b-2 -mb-px",
+                        popoverTab === "creatives"
+                          ? "border-mw-primary-500"
+                          : "border-transparent"
+                      )}
+                      onClick={() => setPopoverTab("creatives")}
+                    >
+                      Creatives ({selectedCreatives.length})
+                    </Button>
+                  </div>
+                </div>
+
+                {popoverTab === "inventories" && (
+                  <div className="flex-1 flex flex-col overflow-hidden px-6 pt-4">
+                    <Tabs value={inventoryTab} onValueChange={setInventoryTab} className="flex-1 flex flex-col overflow-hidden">
+                      <TabsList className="grid grid-cols-3 mb-4 flex-shrink-0">
+                        <TabsTrigger value="screens" className="data-[state=active]:bg-mw-primary-500 data-[state=active]:text-white">
+                          Screens
+                        </TabsTrigger>
+                        <TabsTrigger value="networks">Networks</TabsTrigger>
+                        <TabsTrigger value="packages">Packages</TabsTrigger>
+                      </TabsList>
+
+                      <div className="grid grid-cols-4 gap-4 mb-4 text-center flex-shrink-0">
+                        <div>
+                          <p className="text-sm text-mw-primary-500 font-medium">
+                            {String(filteredInventories.length).padStart(2, "0")}
+                          </p>
+                          <p className="text-xs text-mw-neutral-500">Total selected</p>
+                        </div>
+                        <div>
+                          <p className="text-sm text-mw-neutral-900 dark:text-white font-medium">
+                            {String(filteredInventories.length).padStart(2, "0")}
+                          </p>
+                          <p className="text-xs text-mw-neutral-500">Screens</p>
+                        </div>
+                        <div>
+                          <p className="text-sm text-mw-neutral-900 dark:text-white font-medium">00</p>
+                          <p className="text-xs text-mw-neutral-500">Networks</p>
+                        </div>
+                        <div>
+                          <p className="text-sm text-mw-neutral-900 dark:text-white font-medium">00</p>
+                          <p className="text-xs text-mw-neutral-500">Packages</p>
+                        </div>
+                      </div>
+
+                      <div className="relative mb-4 flex-shrink-0">
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+                        <Input
+                          placeholder="Search screens, network, package here.."
+                          value={inventorySearch}
+                          onChange={(e) => setInventorySearch(e.target.value)}
+                          className="pl-10"
+                        />
+                      </div>
+
+                      <TabsContent value="screens" className="mt-0 flex-1 overflow-y-auto">
+                        <div className="space-y-3 pb-4">
+                          {isLoadingInventories ? (
+                            <div className="text-center py-8 text-mw-neutral-500">
+                              <Loader2 className="h-8 w-8 mx-auto mb-2 animate-spin opacity-50" />
+                              <p>Loading inventories...</p>
+                            </div>
+                          ) : filteredInventories.length === 0 ? (
+                            <div className="text-center py-8 text-mw-neutral-500">
+                              <Monitor className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                              <p>No inventories found</p>
+                            </div>
+                          ) : (
+                            filteredInventories.map((inventory, index) => (
+                              <div 
+                                key={inventory.id}
+                                className="p-3 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg"
+                              >
+                                <div className="flex items-start gap-3">
+                                  <div className="w-12 h-12 rounded bg-mw-neutral-100 dark:bg-mw-neutral-800 flex items-center justify-center flex-shrink-0 overflow-hidden">
+                                    {inventory.thumbnail ? (
+                                      <img 
+                                        src={inventory.thumbnail} 
+                                        alt={inventory.name} 
+                                        className="w-full h-full object-cover"
+                                        onError={(e) => {
+                                          (e.target as HTMLImageElement).style.display = 'none';
+                                          (e.target as HTMLImageElement).parentElement?.classList.add('thumbnail-fallback');
+                                        }}
+                                      />
+                                    ) : (
+                                      <Monitor className="h-5 w-5 text-mw-neutral-500" />
+                                    )}
+                                  </div>
+                                  <div className="flex-1 min-w-0">
+                                    <p className="text-sm font-medium text-mw-neutral-900 dark:text-white truncate">
+                                      {inventory.name}
+                                    </p>
+                                    {inventory.address && (
+                                      <p className="text-xs text-mw-neutral-500 truncate mt-0.5">
+                                        {inventory.address}
+                                      </p>
+                                    )}
+                                    <div className="flex items-center gap-2 mt-1">
+                                      {inventory.venueType && (
+                                        <Badge variant="outline" className="text-xs">
+                                          {inventory.venueType}
+                                        </Badge>
+                                      )}
+                                      {inventory.publisherName && (
+                                        <span className="text-xs text-mw-neutral-500">
+                                          {inventory.publisherName}
+                                        </span>
+                                      )}
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            ))
+                          )}
+                        </div>
+                      </TabsContent>
+
+                      <TabsContent value="networks" className="mt-0 flex-1 overflow-y-auto">
+                        <div className="text-center py-8 text-mw-neutral-500">
+                          <Package className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                          <p>No networks available</p>
+                        </div>
+                      </TabsContent>
+
+                      <TabsContent value="packages" className="mt-0 flex-1 overflow-y-auto">
+                        <div className="text-center py-8 text-mw-neutral-500">
+                          <Package className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                          <p>No packages available</p>
+                        </div>
+                      </TabsContent>
+                    </Tabs>
+                  </div>
+                )}
+
+                {popoverTab === "creatives" && (
+                  <div className="flex-1 overflow-y-auto px-6 pt-4">
+                    <div className="relative mb-4">
+                      <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={inventorySearch}
+                        onChange={(e) => setInventorySearch(e.target.value)}
+                        className="pl-10"
+                      />
+                    </div>
+
+                    <div className="space-y-3 pb-4">
+                      {isLoadingCreatives ? (
+                        <div className="flex items-center justify-center py-8">
+                          <Loader2 className="h-6 w-6 animate-spin text-mw-primary-500" />
+                        </div>
+                      ) : filteredCreatives.length === 0 ? (
+                        <div className="text-center py-8 text-mw-neutral-500">
+                          <Image className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                          <p>No creatives found</p>
+                        </div>
+                      ) : (
+                        filteredCreatives.map((creative) => {
+                          const isVideo = creative.mimeType?.startsWith('video/') || creative.type === 'VIDEO';
+                          const mediaSource = creative.mediaUrl || creative.thumbnailUrl;
+                          
+                          return (
+                            <div 
+                              key={creative.id}
+                              className="p-3 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg"
+                            >
+                              <div className="flex flex-col gap-3">
+                                {/* Media preview */}
+                                <div className="w-full aspect-video rounded bg-mw-neutral-100 dark:bg-mw-neutral-800 flex items-center justify-center overflow-hidden">
+                                  {isVideo && mediaSource ? (
+                                    <video 
+                                      src={mediaSource} 
+                                      controls 
+                                      className="w-full h-full object-contain"
+                                      poster={creative.thumbnailUrl}
+                                    >
+                                      Your browser does not support the video tag.
+                                    </video>
+                                  ) : creative.thumbnailUrl ? (
+                                    <img src={creative.thumbnailUrl} alt={creative.name} className="w-full h-full object-contain" />
+                                  ) : mediaSource ? (
+                                    <img src={mediaSource} alt={creative.name} className="w-full h-full object-contain" />
+                                  ) : (
+                                    <Image className="h-8 w-8 text-mw-neutral-500" />
+                                  )}
+                                </div>
+                                
+                                {/* Creative info */}
+                                <div className="flex-1 min-w-0">
+                                  <p className="text-sm font-medium text-mw-neutral-900 dark:text-white truncate">
+                                    {creative.name}
+                                  </p>
+                                  <div className="flex flex-wrap items-center gap-2 mt-1">
+                                    {creative.type && (
+                                      <Badge variant="outline" className="text-xs">
+                                        {creative.type}
+                                      </Badge>
+                                    )}
+                                    {creative.dimensions && (
+                                      <span className="text-xs text-mw-neutral-500">
+                                        {creative.dimensions}
+                                      </span>
+                                    )}
+                                    {creative.status && (
+                                      <Badge 
+                                        variant="outline" 
+                                        className={cn(
+                                          "text-xs",
+                                          creative.status === "APPROVED" && "bg-green-50 text-green-700 border-green-200",
+                                          creative.status === "PENDING" && "bg-yellow-50 text-yellow-700 border-yellow-200",
+                                          creative.status === "REJECTED" && "bg-red-50 text-red-700 border-red-200"
+                                        )}
+                                      >
+                                        {creative.status}
+                                      </Badge>
+                                    )}
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          );
+                        })
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+          })()}
+        </SheetContent>
+      </Sheet>
+
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Delete Line Item</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete "{lineItemToDelete?.name}"? This
+              action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2">
+            <Button
+              variant="outline"
+              onClick={() => {
+                setDeleteDialogOpen(false);
+                setLineItemToDelete(null);
+              }}
+              disabled={isDeleting}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleConfirmDelete}
+              disabled={isDeleting}
+              className="bg-red-600 hover:bg-red-700 text-white"
+            >
+              {isDeleting ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Deleting...
+                </>
+              ) : (
+                "Delete"
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Sheet open={activateDialogOpen} onOpenChange={setActivateDialogOpen}>
+        <SheetContent className="w-[420px] sm:max-w-[420px] p-0 flex flex-col">
+          <SheetHeader className="px-6 py-4 border-b border-mw-neutral-200 dark:border-mw-neutral-700 flex-shrink-0">
+            <div className="flex items-center justify-between">
+              <SheetTitle className="flex items-center gap-2 text-lg font-semibold">
+                <PlayCircle className="h-5 w-5 text-mw-primary-500" />
+                Activate Deal
+              </SheetTitle>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setActivateDialogOpen(false)}
+                className="h-8 w-8 p-0"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          </SheetHeader>
+          <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
+            <p className="text-sm text-mw-neutral-600 dark:text-mw-neutral-400">
+              Are you sure you want to activate <span className="font-medium text-mw-neutral-900 dark:text-white">"{deal?.name}"</span>?
+            </p>
+            <div className="bg-mw-neutral-50 dark:bg-mw-neutral-800 rounded-lg p-4 space-y-3">
+              <div className="flex justify-between text-sm">
+                <span className="text-mw-neutral-500">Line Items</span>
+                <span className="font-medium text-mw-neutral-900 dark:text-white">{totalItems}</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-mw-neutral-500">Total Impressions</span>
+                <span className="font-medium text-mw-neutral-900 dark:text-white">{totalImpressions.toLocaleString()}</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-mw-neutral-500">Budget</span>
+                <span className="font-medium text-mw-neutral-900 dark:text-white">{deal?.currency || "MYR"} {totalBudget.toLocaleString()}</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-mw-neutral-500">Mode</span>
+                <span className="font-medium text-mw-neutral-900 dark:text-white">{dealMode === 'PROGRAMMATIC' ? 'Programmatic' : 'Traditional'}</span>
+              </div>
+            </div>
+            <p className="text-xs text-mw-neutral-500">
+              Once activated, the deal status will change to Approved or Live based on the start date. This action cannot be undone.
+            </p>
+          </div>
+          <div className="flex-shrink-0 px-6 py-4 border-t border-mw-neutral-200 dark:border-mw-neutral-700 flex items-center justify-end gap-3">
+            <Button variant="outline" onClick={() => setActivateDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              className="bg-mw-primary-500 hover:bg-mw-primary-600 text-white"
+              disabled={isActivating}
+              onClick={async () => {
+                await handleActivateCampaign();
+                setActivateDialogOpen(false);
+              }}
+            >
+              {isActivating ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Activating...
+                </>
+              ) : (
+                <>
+                  <PlayCircle className="h-4 w-4 mr-2" />
+                  Confirm Activation
+                </>
+              )}
+            </Button>
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <Dialog open={archiveDialogOpen} onOpenChange={setArchiveDialogOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Move to Archive</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to archive this deal? Archived deals are no longer active but can be reopened later.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setArchiveDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              disabled={isArchiving}
+              onClick={handleArchiveDeal}
+            >
+              {isArchiving ? (
+                <><Loader2 className="h-4 w-4 mr-2 animate-spin" />Archiving...</>
+              ) : (
+                <><Archive className="h-4 w-4 mr-2" />Archive Deal</>
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <RequestApprovalSheet
+        dealId={dealId!}
+        open={isApprovalSheetOpen}
+        onOpenChange={setIsApprovalSheetOpen}
+        existingEmails={deal?.direct?.approvalEmails || deal?.approvalEmails || []}
+      />
+
+      <ReopenDealSheet
+        dealId={dealId!}
+        open={isReopenSheetOpen}
+        onOpenChange={setIsReopenSheetOpen}
+        dealName={deal?.name}
+        currentStatus={deal?.status}
+      />
+
+      <ResendApprovalSheet
+        dealId={dealId!}
+        open={isResendApprovalSheetOpen}
+        onOpenChange={setIsResendApprovalSheetOpen}
+        existingEmails={deal?.direct?.approvalEmails || deal?.approvalEmails || []}
+      />
+
+      <Sheet open={historyDrawerOpen} onOpenChange={setHistoryDrawerOpen}>
+        <SheetContent className="w-[540px] sm:max-w-[540px] p-0 flex flex-col">
+          <SheetHeader className="px-6 py-4 border-b border-mw-neutral-200 dark:border-mw-neutral-700 flex-shrink-0">
+            <div className="flex items-center justify-between">
+              <SheetTitle className="text-lg font-semibold">Deal History</SheetTitle>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setHistoryDrawerOpen(false)}
+                className="h-8 w-8 p-0"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          </SheetHeader>
+          <div className="flex-1 overflow-y-auto px-6 py-4">
+            {isLoadingHistory ? (
+              <div className="flex items-center justify-center py-16">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-mw-primary-500" />
+              </div>
+            ) : !historyData?.items?.length ? (
+              <div className="flex flex-col items-center justify-center py-16 text-center">
+                <History className="h-10 w-10 text-mw-neutral-300 mb-3" />
+                <p className="text-sm text-mw-neutral-500">No history entries found</p>
+              </div>
+            ) : (
+              <div className="space-y-4">
+                {historyData.items.map((entry) => (
+                  <div key={entry.id} className="flex gap-3 pb-4 border-b border-mw-neutral-100 dark:border-mw-neutral-800 last:border-0">
+                    <div className="h-8 w-8 rounded-full bg-mw-neutral-100 dark:bg-mw-neutral-800 flex items-center justify-center flex-shrink-0 mt-0.5">
+                      <History className="h-4 w-4 text-mw-neutral-500" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-1">
+                        <Badge variant="outline" className={cn(
+                          "text-xs",
+                          entry.action === "CREATE" ? "bg-green-50 text-green-700 border-green-200" :
+                          entry.action === "UPDATE" ? "bg-blue-50 text-blue-700 border-blue-200" :
+                          entry.action === "Status Changed" ? "bg-yellow-50 text-yellow-700 border-yellow-200" :
+                          "bg-gray-50 text-gray-700 border-gray-200"
+                        )}>
+                          {entry.action}
+                        </Badge>
+                        <Badge variant="outline" className="text-xs">
+                          {entry.entityType}
+                        </Badge>
+                      </div>
+                      <p className="text-sm text-mw-neutral-700 dark:text-mw-neutral-300">
+                        {entry.summary || entry.metadata?.entityName || entry.fieldLabel || "-"}
+                      </p>
+                      <div className="flex items-center gap-2 mt-1">
+                        {entry.changedByEmail && (
+                          <span className="text-xs text-mw-neutral-500">{entry.changedByEmail}</span>
+                        )}
+                        <span className="text-xs text-mw-neutral-400">
+                          {new Date(entry.timestamp).toLocaleDateString("en-US", {
+                            month: "short",
+                            day: "numeric",
+                            year: "numeric",
+                            hour: "2-digit",
+                            minute: "2-digit",
+                          })}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+}