adserver-dashboard 1.0.0

package/Influence-MW-AdServer-12-02-2026/client/src/pages/line-item-form.tsx

@@ -0,0 +1,3132 @@
+import { useEffect, useState, useMemo, useRef, useCallback } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { useRoute, useLocation } from "wouter";
+import { useForm, useFieldArray, useWatch } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import mapboxgl from "mapbox-gl";
+import { ArrowLeft, Loader2, ChevronDown, ChevronUp, Plus, Trash2, TrendingUp, CalendarIcon, Clock, Lock, Monitor, MapPin, RefreshCw, Edit2, Globe, Check, FileText, BarChart3, AlertCircle, DollarSign, Users, Target, Zap, Layers, Copy, Receipt, Server, Building, Layout, CircleDollarSign, CalendarRange, Gauge, Settings } from "lucide-react";
+import { format, parse } from "date-fns";
+import { Calendar } from "@/components/ui/calendar";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import "mapbox-gl/dist/mapbox-gl.css";
+
+const MAPBOX_TOKEN = import.meta.env.VITE_MAPBOX_PUBLIC_KEY || "";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription,
+} from "@/components/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Slider } from "@/components/ui/slider";
+import { PageHeader } from "@/components/page-header";
+import { SearchableCombobox, ComboboxOption } from "@/components/searchable-combobox";
+import { TrafficSlider } from "@/components/traffic-slider";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Badge } from "@/components/ui/badge";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import { FormInsightsPanel } from "@/components/form-insights-panel";
+import type { CampaignGoalType } from "@shared/schema";
+import { VenueTypeTrigger } from "@/components/venue-type-selector";
+import { InventorySelector } from "@/components/inventory-selector";
+import { MediaOwnerDrawer } from "@/components/media-owner-drawer";
+import { InventoryFormatDrawer } from "@/components/inventory-format-drawer";
+import { POITargetingDrawer } from "@/components/poi-targeting-drawer";
+import { AdvancedMapDrawer } from "@/components/advanced-map-drawer";
+import { VenueTypeDrawer } from "@/components/venue-type-drawer";
+import { InventoryAvailabilitySection } from "@/components/inventory-availability-section";
+import { AvailabilityDrawer } from "@/components/availability-drawer";
+import { AIRecommendationPanel } from "@/components/ai-recommendation-panel";
+import { ManualInventoryDrawer } from "@/components/manual-inventory-drawer";
+import type { LineItem, Deal, Screen, DspPartner, Signal } from "@shared/schema";
+import { Switch } from "@/components/ui/switch";
+import {
+  CREATIVE_TYPES,
+  PACING_OPTIONS,
+  INCOME_BRACKETS,
+  AGE_GROUPS,
+  GENDERS,
+  BEHAVIORS,
+  INTERESTS,
+  INVENTORY_TYPES,
+  INVENTORY_CLASSIFICATIONS,
+  INVENTORY_FORMATS,
+  INVENTORY_FORMATS_BY_TYPE,
+  SCREEN_RESOLUTIONS,
+  COUNTRIES,
+} from "@shared/schema";
+
+// Mock inventory rates - In production, these come from Inventory Management API
+const INVENTORY_RATES: Record<string, { cpm: number; cps: number }> = {
+  // By classification
+  "Digital": { cpm: 15.00, cps: 1.50 },
+  // By type
+  "OOH": { cpm: 12.00, cps: 1.20 },
+  "Transit": { cpm: 10.00, cps: 1.00 },
+  "Retail": { cpm: 14.00, cps: 1.40 },
+  // By format
+  "Static Billboards": { cpm: 6.00, cps: 0.60 },
+  "Digital LED Billboards": { cpm: 18.00, cps: 1.80 },
+  "Street Furniture / Transit Shelters": { cpm: 9.00, cps: 0.90 },
+  "Mall / Retail Screens": { cpm: 16.00, cps: 1.60 },
+  "Cinema Pre-Show / Lobby": { cpm: 22.00, cps: 2.20 },
+  "Airport Terminal Screens": { cpm: 25.00, cps: 2.50 },
+  "Elevator / Lobby Screens": { cpm: 11.00, cps: 1.10 },
+  "Digital Video Walls": { cpm: 20.00, cps: 2.00 },
+  "Digital Kiosk": { cpm: 13.00, cps: 1.30 },
+  "Programmatic DOOH": { cpm: 17.00, cps: 1.70 },
+  // By size category
+  "XS": { cpm: 5.00, cps: 0.50 },
+  "S": { cpm: 8.00, cps: 0.80 },
+  "M": { cpm: 12.00, cps: 1.20 },
+  "L": { cpm: 18.00, cps: 1.80 },
+  "XL": { cpm: 25.00, cps: 2.50 },
+};
+
+const LINE_ITEM_INSIGHTS = [
+  { text: "Targeting determines audience reach - broader targeting increases potential impressions but may reduce relevance" },
+  { text: "Inventory selection affects available impressions - more formats and classifications expand your reach" },
+  { text: "Max bid impacts win rate in programmatic - higher bids increase win rate but may affect budget efficiency" },
+];
+
+const LINE_ITEM_TIPS = [
+  { text: "Start with broader targeting and narrow based on performance data" },
+  { text: "Use suggested max bid based on inventory selection for optimal results" },
+  { text: "Monitor pacing to optimize delivery and prevent early budget exhaustion" },
+];
+
+const SECTION_INSIGHTS = [
+  {
+    section: "Basic Details",
+    insights: [
+      { text: "The line item name helps identify this campaign in reports and dashboards" },
+      { text: "Creative type determines which creative formats can be assigned" },
+    ],
+    tips: [
+      { text: "Use descriptive names that include campaign objective and date range" },
+      { text: "Copy settings from existing line items to save time on similar campaigns" },
+    ],
+  },
+  {
+    section: "Targeting",
+    insights: [
+      { text: "Demographic targeting helps reach specific audience segments" },
+      { text: "POI targeting places ads near relevant points of interest" },
+    ],
+    tips: [
+      { text: "Combine age and gender targeting for more precise audience reach" },
+      { text: "Use POI categories for broader reach or specific POIs for precision" },
+    ],
+  },
+  {
+    section: "Inventory",
+    insights: [
+      { text: "Media owner selection affects available screen inventory" },
+      { text: "Format selection determines compatible creative specifications" },
+    ],
+    tips: [
+      { text: "Use AI recommendations to find optimal inventory for your goals" },
+      { text: "Balance format variety with creative production capabilities" },
+    ],
+  },
+  {
+    section: "Schedule",
+    insights: [
+      { text: "Flight dates determine the campaign delivery window" },
+      { text: "Day-parting optimizes delivery during peak audience times" },
+    ],
+    tips: [
+      { text: "Schedule ads during peak traffic hours for maximum visibility" },
+      { text: "Use dayparting to avoid off-hours when audience is minimal" },
+    ],
+  },
+  {
+    section: "Budget",
+    insights: [
+      { text: "Budget pacing controls how quickly your budget is spent" },
+      { text: "Traffic allocation distributes impressions across line items" },
+    ],
+    tips: [
+      { text: "Even pacing ensures consistent delivery throughout the campaign" },
+      { text: "Front-loaded pacing is useful for time-sensitive promotions" },
+    ],
+  },
+];
+
+const formatNumber = (num: number): string => {
+  return new Intl.NumberFormat('en-US').format(num);
+};
+
+const formatCurrency = (num: number): string => {
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(num);
+};
+
+const customFeeSchema = z.object({
+  name: z.string().min(1, "Fee name is required"),
+  amount: z.number().min(0, "Amount must be positive"),
+  type: z.enum(["fixed", "percentage"]),
+  hidden: z.boolean().default(false),
+});
+
+const lineItemFormSchema = z.object({
+  name: z.string().min(1, "Line item name is required"),
+  dealId: z.string().min(1, "Please select a deal"),
+  status: z.enum(["active", "paused", "draft"]).default("draft"),
+  copiedFromId: z.string().optional(),
+  copyFromLineItemId: z.string().optional(),
+  creativeType: z.enum(["display", "video", "audio"]).default("display"),
+  priority: z.number().min(1).max(10).default(5),
+  demographics: z.array(z.string()).default([]),
+  geography: z.array(z.string()).default([]),
+  selectedPOIs: z.array(z.string()).default([]),
+  incomeBrackets: z.array(z.string()).default([]),
+  behaviors: z.array(z.string()).default([]),
+  interests: z.array(z.string()).default([]),
+  inventoryClassification: z.array(z.string()).default([]),
+  inventoryType: z.array(z.string()).default([]),
+  inventoryFormat: z.array(z.string()).default([]),
+  selectedScreens: z.array(z.string()).default([]),
+  startDate: z.string().optional(),
+  endDate: z.string().optional(),
+  schedules: z.array(z.object({
+    days: z.array(z.number()),
+    startHour: z.number().min(0).max(23),
+    endHour: z.number().min(0).max(23),
+  })).default([]),
+  budget: z.string().optional(),
+  pacing: z.enum(["asap", "even", "front_loaded"]).default("even"),
+  trafficAllocation: z.number().min(0).max(100).default(100),
+  customFees: z.array(customFeeSchema).default([]),
+  frequencyCapImpressions: z.string().optional(),
+  frequencyCapPeriod: z.enum(["hour", "day", "week", "month", "lifetime"]).optional(),
+  dspId: z.string().optional(),
+  dspSeatId: z.string().optional(),
+  pushToDsp: z.boolean().default(false),
+  creativeDuration: z.number().min(1).default(10),
+  triggerEnabled: z.boolean().default(false),
+  triggerId: z.string().optional(),
+  resolution: z.string().optional().default(""),
+  venueTypes: z.array(z.string()).default([]),
+  adResolutions: z.array(z.string()).default([]),
+  adDurations: z.array(z.number()).default([]),
+  billable: z.boolean().default(true),
+  unlimitedBudget: z.boolean().default(false),
+  budgetConsumption: z.enum(["daily", "weekly", "monthly", "lifetime"]).default("daily"),
+  dailyBudget: z.string().optional(),
+  currency: z.string().default("USD"),
+  automatedBidding: z.boolean().default(false),
+  maxBid: z.string().optional(),
+  bidType: z.enum(["cpm", "cps"]).default("cpm"),
+});
+
+const DURATION_OPTIONS = [5, 10, 15, 20, 30];
+
+const COUNTRY_CENTERS: Record<string, { lng: number; lat: number; zoom: number }> = {
+  Malaysia: { lng: 101.9758, lat: 4.2105, zoom: 5 },
+  Singapore: { lng: 103.8198, lat: 1.3521, zoom: 10 },
+  Thailand: { lng: 100.5018, lat: 13.7563, zoom: 5 },
+  Indonesia: { lng: 106.8456, lat: -6.2088, zoom: 4 },
+  Philippines: { lng: 121.774, lat: 12.8797, zoom: 5 },
+  "United States": { lng: -98.5795, lat: 39.8283, zoom: 3 },
+};
+
+type LineItemFormData = z.infer<typeof lineItemFormSchema>;
+
+interface MultiSelectFieldProps {
+  label: string;
+  options: string[];
+  value: string[];
+  onChange: (value: string[]) => void;
+  testIdPrefix: string;
+}
+
+function MultiSelectField({ label, options, value, onChange, testIdPrefix }: MultiSelectFieldProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleToggle = (option: string, checked: boolean) => {
+    if (checked) {
+      onChange([...value, option]);
+    } else {
+      onChange(value.filter((v) => v !== option));
+    }
+  };
+
+  return (
+    <FormItem>
+      <FormLabel>{label}</FormLabel>
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full justify-between font-normal"
+            data-testid={`${testIdPrefix}-trigger`}
+          >
+            <span className="text-muted-foreground">
+              {value.length > 0 ? `${value.length} selected` : `Select ${label.toLowerCase()}...`}
+            </span>
+            {isOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+          <div className="p-3 max-h-48 overflow-y-auto space-y-2">
+            {options.map((option) => (
+              <label
+                key={option}
+                className="flex items-center gap-2 cursor-pointer hover-elevate p-1 rounded"
+              >
+                <Checkbox
+                  checked={value.includes(option)}
+                  onCheckedChange={(checked) => handleToggle(option, checked as boolean)}
+                  data-testid={`${testIdPrefix}-${option.toLowerCase().replace(/\s+/g, "-")}`}
+                />
+                <span className="text-sm">{option}</span>
+              </label>
+            ))}
+          </div>
+        </PopoverContent>
+      </Popover>
+      {value.length > 0 && (
+        <div className="flex flex-wrap gap-1 mt-2">
+          {value.map((v) => (
+            <Badge key={v} variant="secondary" className="text-xs">
+              {v}
+            </Badge>
+          ))}
+        </div>
+      )}
+    </FormItem>
+  );
+}
+
+const DAYS_OF_WEEK = [
+  { value: 0, label: "Sun" },
+  { value: 1, label: "Mon" },
+  { value: 2, label: "Tue" },
+  { value: 3, label: "Wed" },
+  { value: 4, label: "Thu" },
+  { value: 5, label: "Fri" },
+  { value: 6, label: "Sat" },
+];
+
+const HOURS = Array.from({ length: 24 }, (_, i) => ({
+  value: i,
+  label: i.toString().padStart(2, "0") + ":00",
+}));
+
+interface Schedule {
+  days: number[];
+  startHour: number;
+  endHour: number;
+}
+
+interface ScheduleEditorProps {
+  value: Schedule[];
+  onChange: (value: Schedule[]) => void;
+}
+
+function ScheduleEditor({ value, onChange }: ScheduleEditorProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const addSchedule = () => {
+    onChange([...value, { days: [1, 2, 3, 4, 5], startHour: 9, endHour: 17 }]);
+  };
+
+  const removeSchedule = (index: number) => {
+    onChange(value.filter((_, i) => i !== index));
+  };
+
+  const updateSchedule = (index: number, updates: Partial<Schedule>) => {
+    const newSchedules = [...value];
+    newSchedules[index] = { ...newSchedules[index], ...updates };
+    onChange(newSchedules);
+  };
+
+  const toggleDay = (scheduleIndex: number, day: number) => {
+    const schedule = value[scheduleIndex];
+    const newDays = schedule.days.includes(day)
+      ? schedule.days.filter(d => d !== day)
+      : [...schedule.days, day].sort((a, b) => a - b);
+    updateSchedule(scheduleIndex, { days: newDays });
+  };
+
+  const formatScheduleSummary = (schedule: Schedule) => {
+    const dayNames = schedule.days.map(d => DAYS_OF_WEEK.find(dw => dw.value === d)?.label).join(", ");
+    return `${dayNames} ${schedule.startHour.toString().padStart(2, "0")}:00-${schedule.endHour.toString().padStart(2, "0")}:00`;
+  };
+
+  return (
+    <FormItem>
+      <FormLabel>Schedules</FormLabel>
+      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+        <CollapsibleTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full justify-between font-normal"
+            data-testid="schedules-trigger"
+          >
+            <span className="text-muted-foreground flex items-center gap-2">
+              <Clock className="h-4 w-4" />
+              {value.length > 0 ? `${value.length} schedule${value.length !== 1 ? "s" : ""} configured` : "No schedules (runs all day)"}
+            </span>
+            {isOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+          </Button>
+        </CollapsibleTrigger>
+        <CollapsibleContent className="mt-2 space-y-3">
+          {value.map((schedule, index) => (
+            <Card key={index} className="p-3">
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm font-medium">Schedule {index + 1}</span>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => removeSchedule(index)}
+                    className="text-destructive hover:text-destructive"
+                    data-testid={`button-remove-schedule-${index}`}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+
+                <div>
+                  <label className="text-xs text-muted-foreground mb-1 block">Days</label>
+                  <div className="flex gap-1">
+                    {DAYS_OF_WEEK.map(day => (
+                      <Button
+                        key={day.value}
+                        type="button"
+                        variant={schedule.days.includes(day.value) ? "default" : "outline"}
+                        size="sm"
+                        className="px-2 py-1 h-8 text-xs"
+                        onClick={() => toggleDay(index, day.value)}
+                        data-testid={`button-day-${index}-${day.value}`}
+                      >
+                        {day.label}
+                      </Button>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <label className="text-xs text-muted-foreground mb-1 block">Start Hour</label>
+                    <Select
+                      value={schedule.startHour.toString()}
+                      onValueChange={(v) => updateSchedule(index, { startHour: parseInt(v) })}
+                    >
+                      <SelectTrigger data-testid={`select-start-hour-${index}`}>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {HOURS.map(h => (
+                          <SelectItem key={h.value} value={h.value.toString()}>
+                            {h.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div>
+                    <label className="text-xs text-muted-foreground mb-1 block">End Hour</label>
+                    <Select
+                      value={schedule.endHour.toString()}
+                      onValueChange={(v) => updateSchedule(index, { endHour: parseInt(v) })}
+                    >
+                      <SelectTrigger data-testid={`select-end-hour-${index}`}>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {HOURS.map(h => (
+                          <SelectItem key={h.value} value={h.value.toString()}>
+                            {h.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          ))}
+
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={addSchedule}
+            className="w-full"
+            data-testid="button-add-schedule"
+          >
+            <Plus className="h-4 w-4 mr-2" />
+            Add Schedule
+          </Button>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {value.length > 0 && !isOpen && (
+        <div className="flex flex-wrap gap-1 mt-2">
+          {value.map((schedule, i) => (
+            <Badge key={i} variant="secondary" className="text-xs">
+              {formatScheduleSummary(schedule)}
+            </Badge>
+          ))}
+        </div>
+      )}
+    </FormItem>
+  );
+}
+
+interface DatePickerFieldProps {
+  value: string | undefined;
+  onChange: (value: string) => void;
+  label: string;
+  testId: string;
+  required?: boolean;
+}
+
+function DatePickerField({ value, onChange, label, testId, required }: DatePickerFieldProps) {
+  const [open, setOpen] = useState(false);
+
+  const selectedDate = value ? parse(value, "yyyy-MM-dd", new Date()) : undefined;
+
+  const handleSelect = (date: Date | undefined) => {
+    if (date) {
+      onChange(format(date, "yyyy-MM-dd"));
+      setOpen(false);
+    }
+  };
+
+  return (
+    <FormItem>
+      <FormLabel>{label} {required && <span className="text-destructive">*</span>}</FormLabel>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full justify-start text-left font-normal"
+            data-testid={testId}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {selectedDate ? format(selectedDate, "MMM dd, yyyy") : <span className="text-muted-foreground">Select date...</span>}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={selectedDate}
+            onSelect={handleSelect}
+            initialFocus
+          />
+        </PopoverContent>
+      </Popover>
+    </FormItem>
+  );
+}
+
+function InventoryMapComponent({
+  center,
+  zoom,
+  screens,
+  selectedIds,
+  onScreenClick,
+}: {
+  center: { lng: number; lat: number };
+  zoom: number;
+  screens: Screen[];
+  selectedIds: Set<string>;
+  onScreenClick: (id: string) => void;
+}) {
+  const mapContainer = useRef<HTMLDivElement>(null);
+  const map = useRef<mapboxgl.Map | null>(null);
+  const markersRef = useRef<mapboxgl.Marker[]>([]);
+
+  useEffect(() => {
+    if (!mapContainer.current || !MAPBOX_TOKEN) return;
+
+    map.current = new mapboxgl.Map({
+      container: mapContainer.current,
+      style: "mapbox://styles/mapbox/streets-v12",
+      center: [center.lng, center.lat],
+      zoom: zoom,
+      accessToken: MAPBOX_TOKEN,
+    });
+
+    map.current.addControl(new mapboxgl.NavigationControl(), "top-right");
+
+    return () => {
+      map.current?.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!map.current) return;
+
+    map.current.flyTo({
+      center: [center.lng, center.lat],
+      zoom: zoom,
+    });
+  }, [center, zoom]);
+
+  useEffect(() => {
+    if (!map.current) return;
+
+    markersRef.current.forEach((marker) => marker.remove());
+    markersRef.current = [];
+
+    screens.forEach((screen) => {
+      if (screen.latitude && screen.longitude) {
+        const lat = parseFloat(screen.latitude);
+        const lng = parseFloat(screen.longitude);
+        
+        if (!isNaN(lat) && !isNaN(lng)) {
+          const isSelected = selectedIds.has(screen.id);
+          const el = document.createElement("div");
+          el.className = `flex items-center justify-center w-7 h-7 rounded-full shadow-lg cursor-pointer transition-all ${
+            isSelected 
+              ? "bg-primary text-primary-foreground scale-100" 
+              : "bg-muted text-muted-foreground scale-90 opacity-70"
+          }`;
+          el.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg>';
+          el.onclick = () => onScreenClick(screen.id);
+
+          const popup = new mapboxgl.Popup({ offset: 25 }).setHTML(`
+            <div class="p-2">
+              <div class="font-medium text-sm">${screen.name}</div>
+              <div class="text-xs text-gray-500">${screen.city || ''}, ${screen.country || ''}</div>
+              <div class="text-xs mt-1">CPM: $${screen.cpm || '0.00'}</div>
+            </div>
+          `);
+
+          const marker = new mapboxgl.Marker(el)
+            .setLngLat([lng, lat])
+            .setPopup(popup)
+            .addTo(map.current!);
+
+          markersRef.current.push(marker);
+        }
+      }
+    });
+  }, [screens, selectedIds, onScreenClick]);
+
+  if (!MAPBOX_TOKEN) {
+    return (
+      <div className="h-full flex items-center justify-center bg-muted">
+        <div className="text-center text-muted-foreground">
+          <Globe className="h-12 w-12 mx-auto mb-2 opacity-50" />
+          <p>Map unavailable</p>
+          <p className="text-sm">Mapbox token not configured</p>
+        </div>
+      </div>
+    );
+  }
+
+  return <div ref={mapContainer} className="h-full w-full" />;
+}
+
+export default function LineItemForm() {
+  const [, setLocation] = useLocation();
+  const [matchNew, newParams] = useRoute("/deals/:dealId/line-items/new");
+  const [matchEdit, editParams] = useRoute("/deals/:dealId/line-items/:lineItemId/edit");
+  const { toast } = useToast();
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [inventoryLoading, setInventoryLoading] = useState(false);
+  const [fetchedInventoryCount, setFetchedInventoryCount] = useState<number | null>(null);
+  const [inventoryDrawerOpen, setInventoryDrawerOpen] = useState(false);
+  const [fetchedScreens, setFetchedScreens] = useState<Screen[]>([]);
+  
+  const [advancedMapDrawerOpen, setAdvancedMapDrawerOpen] = useState(false);
+  const [venueTypeDrawerOpen, setVenueTypeDrawerOpen] = useState(false);
+  const [availabilityDrawerOpen, setAvailabilityDrawerOpen] = useState(false);
+  const [poiDrawerOpen, setPoiDrawerOpen] = useState(false);
+  const [mediaOwnerDrawerOpen, setMediaOwnerDrawerOpen] = useState(false);
+  const [inventoryFormatDrawerOpen, setInventoryFormatDrawerOpen] = useState(false);
+  const [manualInventoryDrawerOpen, setManualInventoryDrawerOpen] = useState(false);
+  const [activeTargetingSection, setActiveTargetingSection] = useState<string | null>(null);
+  const [selectedPOICategories, setSelectedPOICategories] = useState<string[]>([]);
+  const [selectedMediaOwners, setSelectedMediaOwners] = useState<string[]>([]);
+  const [currentFormSection, setCurrentFormSection] = useState<string>("Basic Details");
+
+  const targetingSectionRef = useRef<HTMLDivElement>(null);
+  const inventorySectionRef = useRef<HTMLDivElement>(null);
+  const basicSectionRef = useRef<HTMLDivElement>(null);
+  const scheduleSectionRef = useRef<HTMLDivElement>(null);
+  const budgetSectionRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (activeTargetingSection) {
+        const target = event.target as HTMLElement;
+        const clickedCollapsible = target.closest('[data-collapsible-section]');
+        const clickedSectionId = clickedCollapsible?.getAttribute('data-collapsible-section');
+        
+        if (!clickedSectionId || clickedSectionId !== activeTargetingSection) {
+          setActiveTargetingSection(null);
+        }
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [activeTargetingSection]);
+
+  useEffect(() => {
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer) return;
+
+    const handleScroll = () => {
+      const sections = [
+        { ref: basicSectionRef, name: "Basic Details" },
+        { ref: targetingSectionRef, name: "Targeting" },
+        { ref: inventorySectionRef, name: "Inventory" },
+        { ref: scheduleSectionRef, name: "Schedule" },
+        { ref: budgetSectionRef, name: "Budget" },
+      ];
+
+      const containerRect = scrollContainer.getBoundingClientRect();
+      const viewportCenter = containerRect.top + containerRect.height / 3;
+
+      for (const { ref, name } of sections) {
+        if (ref.current) {
+          const rect = ref.current.getBoundingClientRect();
+          if (rect.top <= viewportCenter && rect.bottom >= viewportCenter) {
+            setCurrentFormSection(name);
+            break;
+          }
+        }
+      }
+    };
+
+    scrollContainer.addEventListener("scroll", handleScroll);
+    handleScroll();
+
+    return () => scrollContainer.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const isEditing = Boolean(matchEdit);
+  const dealId = isEditing ? editParams?.dealId : newParams?.dealId;
+  const lineItemId = editParams?.lineItemId;
+  const hasDealFromRoute = Boolean(dealId);
+
+  const { data: allDeals, isLoading: dealsLoading } = useQuery<Deal[]>({
+    queryKey: ["/api/deals"],
+  });
+
+  const { data: allLineItems, isLoading: lineItemsLoading } = useQuery<LineItem[]>({
+    queryKey: ["/api/line-items"],
+  });
+
+  const { data: existingLineItem, isLoading: lineItemLoading } = useQuery<LineItem>({
+    queryKey: ["/api/line-items", lineItemId],
+    enabled: isEditing && Boolean(lineItemId),
+  });
+
+  const { data: currentDeal } = useQuery<Deal>({
+    queryKey: ["/api/deals", dealId],
+    enabled: Boolean(dealId),
+  });
+
+  const { data: allScreens = [] } = useQuery<Screen[]>({
+    queryKey: ["/api/screens"],
+  });
+
+  const { data: dspPartners = [] } = useQuery<DspPartner[]>({
+    queryKey: ["/api/dsp-partners"],
+  });
+
+  const { data: signals = [] } = useQuery<Signal[]>({
+    queryKey: ["/api/signals"],
+  });
+
+  const isPGDeal = currentDeal?.dealType === "pg";
+  const isProgrammaticDeal = currentDeal?.dealType !== "traditional";
+  const isTraditionalDeal = currentDeal?.dealType === "traditional";
+  const dealBudget = currentDeal?.budget ? parseFloat(currentDeal.budget) : 0;
+
+  // Line items available for copying (exclude current line item if editing)
+  const lineItemsForCopy = useMemo(() => {
+    if (!allLineItems) return [];
+    return allLineItems.filter((li) => li.id !== lineItemId);
+  }, [allLineItems, lineItemId]);
+
+  const auctionType = useMemo(() => {
+    if (!currentDeal) return null;
+    const dealType = currentDeal.dealType;
+    if (dealType === 'pg' || dealType === 'pd') return 'Fixed Price';
+    if (dealType === 'traditional') return 'Not Applicable';
+    if (dealType === 'always_on' || dealType === 'pmp') return 'First Price Auction';
+    return null;
+  }, [currentDeal]);
+
+  const dealOptions: ComboboxOption[] = (allDeals ?? []).map((deal) => ({
+    value: deal.id,
+    label: deal.name,
+  }));
+
+  const existingLineItemOptions: ComboboxOption[] = (allLineItems ?? [])
+    .filter((li) => li.id !== lineItemId)
+    .map((li) => ({
+      value: li.id,
+      label: li.name,
+    }));
+
+  const form = useForm<LineItemFormData>({
+    resolver: zodResolver(lineItemFormSchema),
+    defaultValues: {
+      name: "",
+      dealId: "",
+      status: "draft",
+      copiedFromId: "",
+      copyFromLineItemId: "",
+      creativeType: "display",
+      priority: 5,
+      demographics: [],
+      geography: [],
+      selectedPOIs: [],
+      incomeBrackets: [],
+      behaviors: [],
+      interests: [],
+      inventoryClassification: [],
+      inventoryType: [],
+      inventoryFormat: [],
+      selectedScreens: [],
+      startDate: "",
+      endDate: "",
+      schedules: [],
+      budget: "",
+      pacing: "even",
+      trafficAllocation: 100,
+      customFees: [],
+      frequencyCapImpressions: "",
+      frequencyCapPeriod: undefined,
+      dspId: "",
+      dspSeatId: "",
+      pushToDsp: false,
+      creativeDuration: 10,
+      triggerEnabled: false,
+      triggerId: "",
+      resolution: "",
+      venueTypes: [],
+      adResolutions: [],
+      adDurations: [],
+      billable: true,
+      unlimitedBudget: false,
+      budgetConsumption: "daily",
+      dailyBudget: "",
+      currency: "USD",
+      automatedBidding: false,
+      maxBid: "",
+      bidType: "cpm",
+    },
+  });
+
+  const watchedSelectedPOIs = useWatch({ control: form.control, name: "selectedPOIs" });
+
+  const handleFetchInventory = useCallback(async () => {
+    setInventoryLoading(true);
+    setFetchedInventoryCount(null);
+    
+    try {
+      const params = new URLSearchParams();
+      const countries = currentDeal?.countries;
+      if (countries && countries.length > 0) {
+        params.set("country", countries[0]);
+      }
+      if (currentDeal?.sspId) {
+        params.set("sspId", currentDeal.sspId);
+      }
+      
+      const url = params.toString() ? `/api/screens?${params.toString()}` : "/api/screens";
+      const response = await fetch(url);
+      const screens: Screen[] = await response.json();
+      
+      setFetchedScreens(screens);
+      setFetchedInventoryCount(screens.length);
+      form.setValue("selectedScreens", screens.map(s => s.id));
+      
+      toast({
+        title: "Inventory fetched",
+        description: `Found ${screens.length} available screens`,
+      });
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Failed to fetch inventory. Please try again.",
+        variant: "destructive",
+      });
+    } finally {
+      setInventoryLoading(false);
+    }
+  }, [currentDeal, form, toast]);
+
+  const handleToggleScreen = useCallback((screenId: string) => {
+    const current = form.getValues("selectedScreens") || [];
+    if (current.includes(screenId)) {
+      form.setValue("selectedScreens", current.filter(id => id !== screenId));
+    } else {
+      form.setValue("selectedScreens", [...current, screenId]);
+    }
+  }, [form]);
+
+  // Watch inventory selections and floor rate type for auto-calculation
+  const watchedInventoryClassification = useWatch({ control: form.control, name: "inventoryClassification" });
+  const watchedInventoryType = useWatch({ control: form.control, name: "inventoryType" });
+  const watchedInventoryFormat = useWatch({ control: form.control, name: "inventoryFormat" });
+  const watchedBidType = useWatch({ control: form.control, name: "bidType" });
+  const watchedSelectedScreens = useWatch({ control: form.control, name: "selectedScreens" });
+  const watchedCreativeDuration = useWatch({ control: form.control, name: "creativeDuration" });
+
+  const selectedScreenIds = useMemo(() => new Set(watchedSelectedScreens || []), [watchedSelectedScreens]);
+
+  const primaryCountry = (currentDeal?.countries && currentDeal.countries.length > 0) ? currentDeal.countries[0] : "Malaysia";
+  const countryName = COUNTRIES.find(c => c.code === primaryCountry)?.name || "Malaysia";
+  const mapCenter = COUNTRY_CENTERS[countryName] || COUNTRY_CENTERS["Malaysia"];
+
+  const { fields: feeFields, append: appendFee, remove: removeFee } = useFieldArray({
+    control: form.control,
+    name: "customFees",
+  });
+
+  // Watch additional values for forecast calculations
+  const watchedStartDate = useWatch({ control: form.control, name: "startDate" });
+  const watchedEndDate = useWatch({ control: form.control, name: "endDate" });
+  const watchedMaxBid = useWatch({ control: form.control, name: "maxBid" });
+  const watchedBudget = useWatch({ control: form.control, name: "budget" });
+  const watchedCustomFees = useWatch({ control: form.control, name: "customFees" });
+  const watchedBillable = useWatch({ control: form.control, name: "billable" });
+  const watchedUnlimitedBudget = useWatch({ control: form.control, name: "unlimitedBudget" });
+  const watchedAutomatedBidding = useWatch({ control: form.control, name: "automatedBidding" });
+  const watchedGeography = useWatch({ control: form.control, name: "geography" });
+  const watchedDemographics = useWatch({ control: form.control, name: "demographics" });
+  const watchedVenueTypes = useWatch({ control: form.control, name: "venueTypes" });
+
+  // Calculate suggested max bid based on selected screens' CPM values
+  const suggestedMaxBid = useMemo(() => {
+    const selectedScreenIds = watchedSelectedScreens || [];
+    const bidType = watchedBidType || "cpm";
+    
+    if (selectedScreenIds.length === 0) {
+      // Fallback to inventory category rates if no screens selected
+      const allSelections = [
+        ...(watchedInventoryClassification || []),
+        ...(watchedInventoryType || []),
+        ...(watchedInventoryFormat || []),
+      ];
+
+      if (allSelections.length === 0) return null;
+
+      const rates: number[] = [];
+      allSelections.forEach((selection) => {
+        const rate = INVENTORY_RATES[selection];
+        if (rate) {
+          rates.push(bidType === "cpm" ? rate.cpm : rate.cps);
+        }
+      });
+
+      if (rates.length === 0) return null;
+      const average = rates.reduce((sum, r) => sum + r, 0) / rates.length;
+      return average.toFixed(2);
+    }
+
+    // Calculate average CPM from selected screens
+    const selectedScreens = allScreens.filter(s => selectedScreenIds.includes(s.id));
+    if (selectedScreens.length === 0) return null;
+
+    const validCpms = selectedScreens
+      .map(s => s.cpm ? parseFloat(s.cpm) : null)
+      .filter((cpm): cpm is number => cpm !== null && !isNaN(cpm));
+
+    if (validCpms.length === 0) return null;
+
+    const avgCpm = validCpms.reduce((sum, cpm) => sum + cpm, 0) / validCpms.length;
+
+    if (bidType === "cpm") {
+      return avgCpm.toFixed(2);
+    } else {
+      // CPS: derive from CPM (CPM / 1000 / avg_duration)
+      const duration = watchedCreativeDuration || 10;
+      const cps = avgCpm / 1000 / duration;
+      return cps.toFixed(4);
+    }
+  }, [watchedSelectedScreens, allScreens, watchedInventoryClassification, watchedInventoryType, watchedInventoryFormat, watchedBidType, watchedCreativeDuration]);
+
+  // Check if current max bid differs from suggestion (using numeric comparison)
+  const maxBidDiffersFromSuggestion = useMemo(() => {
+    if (!suggestedMaxBid || !watchedMaxBid) return false;
+    const currentValue = parseFloat(String(watchedMaxBid));
+    const suggestedValue = parseFloat(suggestedMaxBid);
+    if (isNaN(currentValue) || isNaN(suggestedValue)) return false;
+    // Use a small tolerance for floating point comparison
+    return Math.abs(currentValue - suggestedValue) > 0.001;
+  }, [suggestedMaxBid, watchedMaxBid]);
+
+  const applyMaxBidSuggestion = () => {
+    if (suggestedMaxBid) {
+      form.setValue("maxBid", suggestedMaxBid);
+    }
+  };
+
+  // Calculate forecast based on form values
+  const forecast = useMemo(() => {
+    const allInventorySelections = [
+      ...(watchedInventoryClassification || []),
+      ...(watchedInventoryType || []),
+      ...(watchedInventoryFormat || []),
+    ];
+    const selectedScreenIds = watchedSelectedScreens || [];
+
+    // Use selected screens count if available, otherwise use inventory selections
+    const inventoryCount = selectedScreenIds.length > 0 
+      ? selectedScreenIds.length 
+      : allInventorySelections.length;
+    const startDate = watchedStartDate ? new Date(watchedStartDate) : null;
+    const endDate = watchedEndDate ? new Date(watchedEndDate) : null;
+    const maxBid = watchedMaxBid ? parseFloat(watchedMaxBid) : 0;
+    const lineItemBudget = watchedBudget ? parseFloat(watchedBudget) : 0;
+    const creativeDuration = watchedCreativeDuration || 10;
+    const bidType = watchedBidType || "cpm";
+
+    // Check if we have enough data to calculate forecast
+    if (inventoryCount === 0 || !startDate || !endDate || startDate > endDate) {
+      return null;
+    }
+
+    // Calculate days in range
+    const timeDiff = endDate.getTime() - startDate.getTime();
+    const daysInRange = Math.max(1, Math.ceil(timeDiff / (1000 * 60 * 60 * 24)) + 1);
+
+    // Mock logic: estimated impressions = inventory selections × 10000 × days
+    const estimatedImpressions = inventoryCount * 10000 * daysInRange;
+
+    // Calculate total cost based on bid type
+    let totalCost = 0;
+    if (maxBid > 0) {
+      if (bidType === "cpm") {
+        // CPM: cost = (impressions / 1000) * max_bid
+        totalCost = (estimatedImpressions / 1000) * maxBid;
+      } else {
+        // CPS: cost = impressions * creative_duration * max_bid
+        totalCost = estimatedImpressions * creativeDuration * maxBid;
+      }
+    }
+
+    // Media Cost is the base cost from floor rate
+    const mediaCost = totalCost;
+
+    // Calculate custom fees total
+    let customFeesTotal = 0;
+    const customFeesList = watchedCustomFees || [];
+    customFeesList.forEach((fee: { amount: number; type: string }) => {
+      if (fee.type === "fixed") {
+        customFeesTotal += fee.amount;
+      } else if (fee.type === "percentage") {
+        customFeesTotal += mediaCost * (fee.amount / 100);
+      }
+    });
+
+    // Platform fee (5% of media cost as example)
+    const platformFeePercent = 5;
+    const platformFee = mediaCost * (platformFeePercent / 100);
+
+    // Grand total = Media Cost + Custom Fees + Platform Fee
+    const grandTotal = mediaCost + customFeesTotal + platformFee;
+
+    // Calculate cost efficiency (effective rate)
+    const effectiveCPM = estimatedImpressions > 0 && totalCost > 0 
+      ? (totalCost / estimatedImpressions) * 1000 
+      : 0;
+    const effectiveCPS = estimatedImpressions > 0 && totalCost > 0 
+      ? totalCost / estimatedImpressions 
+      : 0;
+
+    // Calculate budget utilization if budget is set
+    const budgetUtilization = lineItemBudget > 0 && grandTotal > 0 
+      ? Math.min(100, (grandTotal / lineItemBudget) * 100) 
+      : null;
+
+    // Check if cost exceeds deal budget
+    const exceedsDealBudget = dealBudget > 0 && grandTotal > dealBudget;
+    const exceedsLineItemBudget = lineItemBudget > 0 && grandTotal > lineItemBudget;
+
+    return {
+      estimatedImpressions,
+      estimatedSpend: grandTotal,
+      totalCost: grandTotal,
+      mediaCost,
+      customFeesTotal,
+      platformFee,
+      platformFeePercent,
+      hasCustomFees: customFeesList.length > 0 && customFeesTotal > 0,
+      effectiveCPM,
+      effectiveCPS,
+      daysInRange,
+      budgetUtilization,
+      hasBudget: lineItemBudget > 0,
+      hasMaxBid: maxBid > 0,
+      dealBudget,
+      lineItemBudget,
+      exceedsDealBudget,
+      exceedsLineItemBudget,
+      creativeDuration,
+    };
+  }, [
+    watchedInventoryClassification,
+    watchedInventoryType,
+    watchedInventoryFormat,
+    watchedSelectedScreens,
+    watchedStartDate,
+    watchedEndDate,
+    watchedMaxBid,
+    watchedBidType,
+    watchedBudget,
+    watchedCreativeDuration,
+    watchedCustomFees,
+    dealBudget,
+  ]);
+
+  const handleCopyLineItem = (lineItemId: string) => {
+    const sourceLineItem = allLineItems?.find((li) => li.id === lineItemId);
+    if (sourceLineItem) {
+      const targeting = sourceLineItem.targeting as Record<string, string[]> | null;
+      const inventoryFilters = sourceLineItem.inventoryFilters as Record<string, string[]> | null;
+      const customFees = sourceLineItem.customFees as Array<{ name: string; amount: number; type: "fixed" | "percentage"; hidden?: boolean }> | null;
+      const frequencyCap = sourceLineItem.frequencyCap as { impressions: number; period: string } | null;
+
+      form.reset({
+        name: form.getValues("name"),
+        dealId: form.getValues("dealId"),
+        status: (sourceLineItem.status as "active" | "paused" | "draft") ?? "draft",
+        copiedFromId: lineItemId,
+        copyFromLineItemId: lineItemId,
+        creativeType: (sourceLineItem.creativeType as "display" | "video" | "audio") ?? "display",
+        priority: sourceLineItem.priority ?? 5,
+        demographics: targeting?.demographics ?? [],
+        geography: targeting?.geography ?? [],
+        selectedPOIs: targeting?.selectedPOIs ?? [],
+        incomeBrackets: targeting?.incomeBrackets ?? [],
+        behaviors: targeting?.behaviors ?? [],
+        interests: targeting?.interests ?? [],
+        inventoryClassification: inventoryFilters?.classification ?? [],
+        inventoryType: inventoryFilters?.type ?? [],
+        inventoryFormat: inventoryFilters?.format ?? [],
+        startDate: sourceLineItem.startDate ?? "",
+        endDate: sourceLineItem.endDate ?? "",
+        schedules: (sourceLineItem.schedules as Schedule[]) ?? [],
+        budget: sourceLineItem.budget ?? "",
+        pacing: (sourceLineItem.pacing as "asap" | "even" | "front_loaded") ?? "even",
+        trafficAllocation: sourceLineItem.trafficAllocation ?? 100,
+        customFees: customFees ?? [],
+        frequencyCapImpressions: frequencyCap?.impressions?.toString() ?? "",
+        frequencyCapPeriod: frequencyCap?.period as "hour" | "day" | "week" | "month" | "lifetime" | undefined,
+        triggerEnabled: sourceLineItem.triggerEnabled ?? false,
+        triggerId: sourceLineItem.triggerId ?? "",
+        resolution: sourceLineItem.resolution ?? "",
+        venueTypes: form.getValues("venueTypes") ?? [],
+        adResolutions: form.getValues("adResolutions") ?? [],
+        adDurations: form.getValues("adDurations") ?? [],
+        billable: form.getValues("billable") ?? true,
+        unlimitedBudget: form.getValues("unlimitedBudget") ?? false,
+        budgetConsumption: form.getValues("budgetConsumption") ?? "daily",
+        dailyBudget: form.getValues("dailyBudget") ?? "",
+        currency: currentDeal?.currency || "USD",
+        automatedBidding: form.getValues("automatedBidding") ?? false,
+        maxBid: form.getValues("maxBid") ?? "",
+        bidType: form.getValues("bidType") ?? "cpm",
+      });
+
+      toast({
+        title: "Line item copied",
+        description: `Settings copied from "${sourceLineItem.name}"`,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (existingLineItem) {
+      const targeting = existingLineItem.targeting as Record<string, string[]> | null;
+      const inventoryFilters = existingLineItem.inventoryFilters as Record<string, string[]> | null;
+      const customFees = existingLineItem.customFees as Array<{ name: string; amount: number; type: "fixed" | "percentage"; hidden?: boolean }> | null;
+      const frequencyCap = existingLineItem.frequencyCap as { impressions: number; period: string } | null;
+
+      form.reset({
+        name: existingLineItem.name,
+        dealId: existingLineItem.dealId ?? "",
+        status: (existingLineItem.status as "active" | "paused" | "draft") ?? "draft",
+        copiedFromId: existingLineItem.copiedFromId ?? "",
+        creativeType: (existingLineItem.creativeType as "display" | "video" | "audio") ?? "display",
+        priority: existingLineItem.priority ?? 5,
+        demographics: targeting?.demographics ?? [],
+        geography: targeting?.geography ?? [],
+        selectedPOIs: targeting?.selectedPOIs ?? [],
+        incomeBrackets: targeting?.incomeBrackets ?? [],
+        behaviors: targeting?.behaviors ?? [],
+        interests: targeting?.interests ?? [],
+        inventoryClassification: inventoryFilters?.classification ?? [],
+        inventoryType: inventoryFilters?.type ?? [],
+        inventoryFormat: inventoryFilters?.format ?? [],
+        startDate: existingLineItem.startDate ?? "",
+        endDate: existingLineItem.endDate ?? "",
+        schedules: (existingLineItem.schedules as Schedule[]) ?? [],
+        budget: existingLineItem.budget ?? "",
+        pacing: (existingLineItem.pacing as "asap" | "even" | "front_loaded") ?? "even",
+        trafficAllocation: existingLineItem.trafficAllocation ?? 100,
+        customFees: customFees ?? [],
+        frequencyCapImpressions: frequencyCap?.impressions?.toString() ?? "",
+        frequencyCapPeriod: frequencyCap?.period as "hour" | "day" | "week" | "month" | "lifetime" | undefined,
+        dspId: existingLineItem.dspId ?? "",
+        dspSeatId: existingLineItem.dspSeatId ?? "",
+        pushToDsp: existingLineItem.pushToDsp ?? false,
+        creativeDuration: existingLineItem.creativeDuration ?? 10,
+        triggerEnabled: existingLineItem.triggerEnabled ?? false,
+        triggerId: existingLineItem.triggerId ?? "",
+        resolution: existingLineItem.resolution ?? "",
+      });
+    } else if (dealId && !isEditing) {
+      form.setValue("dealId", dealId);
+      // Set pushToDsp to true by default for programmatic deals
+      if (isProgrammaticDeal) {
+        form.setValue("pushToDsp", true);
+      }
+    }
+  }, [existingLineItem, form, dealId, isEditing, isProgrammaticDeal]);
+
+  const createMutation = useMutation({
+    mutationFn: async (data: LineItemFormData) => {
+      return apiRequest("POST", "/api/line-items", {
+        name: data.name,
+        dealId: data.dealId,
+        status: data.status,
+        copiedFromId: data.copiedFromId || undefined,
+        creativeType: data.creativeType,
+        priority: data.priority,
+        targeting: {
+          demographics: data.demographics,
+          geography: data.geography,
+          selectedPOIs: data.selectedPOIs,
+          incomeBrackets: data.incomeBrackets,
+          behaviors: data.behaviors,
+          interests: data.interests,
+        },
+        inventoryFilters: {
+          classification: data.inventoryClassification,
+          type: data.inventoryType,
+          format: data.inventoryFormat,
+        },
+        selectedScreens: data.selectedScreens,
+        startDate: data.startDate || undefined,
+        endDate: data.endDate || undefined,
+        schedules: data.schedules.length > 0 ? data.schedules : undefined,
+        budget: data.budget || undefined,
+        pacing: data.pacing,
+        trafficAllocation: data.trafficAllocation,
+        customFees: data.customFees.length > 0 ? data.customFees : undefined,
+        frequencyCap: data.frequencyCapImpressions && data.frequencyCapPeriod
+          ? { impressions: parseInt(data.frequencyCapImpressions), period: data.frequencyCapPeriod }
+          : undefined,
+        dspId: data.dspId || undefined,
+        dspSeatId: data.dspSeatId || undefined,
+        pushToDsp: data.pushToDsp,
+        creativeDuration: data.creativeDuration,
+        triggerEnabled: data.triggerEnabled,
+        triggerId: data.triggerId || undefined,
+        resolution: data.resolution,
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/line-items"] });
+      toast({
+        title: "Line item created",
+        description: "Your line item has been created successfully.",
+      });
+      setLocation(`/deals/${dealId}`);
+    },
+    onError: () => {
+      toast({
+        title: "Error",
+        description: "Failed to create line item. Please try again.",
+        variant: "destructive",
+      });
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: async (data: LineItemFormData) => {
+      return apiRequest("PATCH", `/api/line-items/${lineItemId}`, {
+        name: data.name,
+        dealId: data.dealId,
+        status: data.status,
+        copiedFromId: data.copiedFromId || undefined,
+        creativeType: data.creativeType,
+        priority: data.priority,
+        targeting: {
+          demographics: data.demographics,
+          geography: data.geography,
+          selectedPOIs: data.selectedPOIs,
+          incomeBrackets: data.incomeBrackets,
+          behaviors: data.behaviors,
+          interests: data.interests,
+        },
+        inventoryFilters: {
+          classification: data.inventoryClassification,
+          type: data.inventoryType,
+          format: data.inventoryFormat,
+        },
+        selectedScreens: data.selectedScreens,
+        startDate: data.startDate || undefined,
+        endDate: data.endDate || undefined,
+        schedules: data.schedules.length > 0 ? data.schedules : undefined,
+        budget: data.budget || undefined,
+        pacing: data.pacing,
+        trafficAllocation: data.trafficAllocation,
+        customFees: data.customFees.length > 0 ? data.customFees : undefined,
+        frequencyCap: data.frequencyCapImpressions && data.frequencyCapPeriod
+          ? { impressions: parseInt(data.frequencyCapImpressions), period: data.frequencyCapPeriod }
+          : undefined,
+        dspId: data.dspId || undefined,
+        dspSeatId: data.dspSeatId || undefined,
+        pushToDsp: data.pushToDsp,
+        creativeDuration: data.creativeDuration,
+        triggerEnabled: data.triggerEnabled,
+        triggerId: data.triggerId || undefined,
+        resolution: data.resolution,
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/line-items"] });
+      queryClient.invalidateQueries({ queryKey: ["/api/line-items", lineItemId] });
+      toast({
+        title: "Line item updated",
+        description: "Your line item has been updated successfully.",
+      });
+      setLocation(`/deals/${dealId}`);
+    },
+    onError: () => {
+      toast({
+        title: "Error",
+        description: "Failed to update line item. Please try again.",
+        variant: "destructive",
+      });
+    },
+  });
+
+  const onSubmit = (data: LineItemFormData) => {
+    if (isEditing) {
+      updateMutation.mutate(data);
+    } else {
+      createMutation.mutate(data);
+    }
+  };
+
+  const handleCancel = () => {
+    setLocation(`/deals/${dealId}`);
+  };
+
+  const isSubmitting = createMutation.isPending || updateMutation.isPending;
+  const isLoadingData = isEditing && lineItemLoading;
+
+  if (isLoadingData) {
+    return (
+      <div className="flex flex-col gap-6 p-6">
+        <PageHeader
+          title={isEditing ? "Edit Line Item" : "New Line Item"}
+          description={isEditing ? "Update line item details" : "Create a new line item"}
+        />
+        <Card>
+          <CardContent className="pt-6 space-y-6">
+            <Skeleton className="h-10 w-full" data-testid="skeleton-name" />
+            <Skeleton className="h-10 w-full" data-testid="skeleton-status" />
+            <Skeleton className="h-10 w-full" data-testid="skeleton-creative-type" />
+            <Skeleton className="h-16 w-full" data-testid="skeleton-priority" />
+            <div className="grid grid-cols-2 gap-4">
+              <Skeleton className="h-10 w-full" data-testid="skeleton-start-date" />
+              <Skeleton className="h-10 w-full" data-testid="skeleton-end-date" />
+            </div>
+            <Skeleton className="h-10 w-full" data-testid="skeleton-budget" />
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  const incomeBracketLabels = INCOME_BRACKETS.map((b) => b.label);
+  const behaviorLabels = BEHAVIORS.map((b) => b.label);
+  const demographicOptions = [...AGE_GROUPS, ...GENDERS];
+
+  // Targeting summary row component
+  const TargetingSummaryRow = ({ 
+    label, 
+    count, 
+    onClick, 
+    icon: Icon 
+  }: { 
+    label: string; 
+    count: number; 
+    onClick: () => void; 
+    icon: React.ElementType;
+  }) => (
+    <div 
+      className="flex items-center justify-between p-3 rounded-md border hover-elevate cursor-pointer"
+      onClick={onClick}
+      data-testid={`targeting-row-${label.toLowerCase().replace(/\s+/g, '-')}`}
+    >
+      <div className="flex items-center gap-3">
+        <Icon className="h-4 w-4 text-muted-foreground" />
+        <span className="text-sm">{label}</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="text-sm text-muted-foreground">
+          {count > 0 ? `${count} ${label} are selected` : `0 ${label} are selected`}
+        </span>
+        <Check className={`h-4 w-4 ${count > 0 ? 'text-primary' : 'text-muted-foreground/30'}`} />
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="relative flex flex-col h-full overflow-hidden">
+      <div ref={scrollContainerRef} className="flex-1 overflow-auto p-6 pb-20">
+        <div className="flex flex-col gap-6">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <h1 className="text-2xl font-bold" data-testid="text-page-title">
+                {isEditing ? "Edit Line Item" : "New Line Item"}
+              </h1>
+            </div>
+            <Button
+              variant="outline"
+              onClick={handleCancel}
+              data-testid="button-back-deal"
+            >
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back
+            </Button>
+          </div>
+
+          <div className="mt-6">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <div className="lg:col-span-2">
+              <Form {...form}>
+                <form id="line-item-form" onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+              
+              {/* Line Item Name and Status */}
+              <Card ref={basicSectionRef as any}>
+                <CardContent className="pt-6">
+                  <div className="flex items-center gap-4 flex-wrap">
+                    <FormField
+                      control={form.control}
+                      name="name"
+                      render={({ field }) => (
+                        <FormItem className="flex-1 min-w-[200px]">
+                          <FormLabel>Line Item Name <span className="text-destructive">*</span></FormLabel>
+                          <FormControl>
+                            <Input
+                              placeholder="Enter line item name"
+                              {...field}
+                              data-testid="input-line-item-name"
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="status"
+                      render={({ field }) => (
+                        <FormItem className="w-32">
+                          <FormLabel>Status</FormLabel>
+                          <Select onValueChange={field.onChange} value={field.value}>
+                            <FormControl>
+                              <SelectTrigger data-testid="select-status">
+                                <SelectValue placeholder="Select status" />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              <SelectItem value="active">Active</SelectItem>
+                              <SelectItem value="paused">Paused</SelectItem>
+                              <SelectItem value="draft">Draft</SelectItem>
+                            </SelectContent>
+                          </Select>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    {!isPGDeal && (
+                      <FormField
+                        control={form.control}
+                        name="copyFromLineItemId"
+                        render={({ field }) => (
+                          <FormItem className="min-w-[200px]">
+                            <FormLabel>Copy from Line Item</FormLabel>
+                            <FormControl>
+                              <SearchableCombobox
+                                options={lineItemsForCopy.map((li: LineItem) => ({
+                                  value: li.id,
+                                  label: li.name,
+                                  description: `Priority: ${li.priority}`,
+                                }))}
+                                value={field.value || ""}
+                                onValueChange={(value) => {
+                                  field.onChange(value);
+                                  if (value) {
+                                    handleCopyLineItem(value);
+                                  }
+                                }}
+                                placeholder="Select to copy..."
+                                searchPlaceholder="Search line items..."
+                                emptyMessage="No line items found."
+                                data-testid="combobox-copy-line-item"
+                              />
+                            </FormControl>
+                          </FormItem>
+                        )}
+                      />
+                    )}
+                  </div>
+
+                  {!hasDealFromRoute && (
+                    <FormField
+                      control={form.control}
+                      name="dealId"
+                      render={({ field }) => (
+                        <FormItem className="mt-4">
+                          <FormLabel>Deal</FormLabel>
+                          <FormControl>
+                            {dealsLoading ? (
+                              <Skeleton className="h-10 w-full" data-testid="skeleton-deal-loading" />
+                            ) : (
+                              <SearchableCombobox
+                                options={dealOptions}
+                                value={field.value}
+                                onValueChange={field.onChange}
+                                placeholder="Select a deal..."
+                                searchPlaceholder="Search deals..."
+                                emptyMessage="No deals found."
+                                data-testid="combobox-deal"
+                              />
+                            )}
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  )}
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader>
+                  <CardTitle>Creative</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <FormField
+                    control={form.control}
+                    name="creativeType"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Creative Type <span className="text-destructive">*</span></FormLabel>
+                        <Select onValueChange={field.onChange} value={field.value}>
+                          <FormControl>
+                            <SelectTrigger data-testid="select-creative-type">
+                              <SelectValue placeholder="Select creative type" />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            {CREATIVE_TYPES.map((type) => (
+                              <SelectItem key={type.value} value={type.value}>
+                                {type.label}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="priority"
+                    render={({ field }) => (
+                      <FormItem>
+                        <div className="flex items-center justify-between">
+                          <FormLabel>Priority</FormLabel>
+                          <span className="text-sm font-medium">
+                            {field.value} {field.value === 1 ? "(Highest)" : field.value === 10 ? "(Lowest)" : ""}
+                          </span>
+                        </div>
+                        <FormControl>
+                          <Slider
+                            value={[field.value]}
+                            onValueChange={([val]) => field.onChange(val)}
+                            min={1}
+                            max={10}
+                            step={1}
+                            className="w-full"
+                            data-testid="slider-priority"
+                          />
+                        </FormControl>
+                        <div className="flex justify-between text-xs text-muted-foreground">
+                          <span>1 (Highest)</span>
+                          <span>5</span>
+                          <span>10 (Lowest)</span>
+                        </div>
+                        <FormDescription>
+                          Lower number means higher priority for ad serving
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </CardContent>
+              </Card>
+
+              {/* Flight Dates Section - Before Targeting */}
+              <Card ref={scheduleSectionRef as any}>
+                <CardHeader className="pb-3">
+                  <div className="flex items-center gap-2">
+                    <CalendarRange className="h-4 w-4 text-muted-foreground" />
+                    <CardTitle className="text-base">Flight Dates</CardTitle>
+                  </div>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  {/* Quick Date Range Selection */}
+                  <div className="flex flex-wrap gap-2">
+                    <span className="text-sm text-muted-foreground mr-2 flex items-center">Quick select:</span>
+                    {[
+                      { label: "7 days", days: 7 },
+                      { label: "28 days", days: 28 },
+                      { label: "30 days", days: 30 },
+                      { label: "45 days", days: 45 },
+                      { label: "60 days", days: 60 },
+                    ].map(({ label, days }) => (
+                      <Button
+                        key={days}
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => {
+                          const today = new Date();
+                          const endDate = new Date(today);
+                          endDate.setDate(today.getDate() + days);
+                          form.setValue("startDate", format(today, "yyyy-MM-dd"));
+                          form.setValue("endDate", format(endDate, "yyyy-MM-dd"));
+                        }}
+                        data-testid={`button-quick-${days}-days`}
+                      >
+                        Next {label}
+                      </Button>
+                    ))}
+                  </div>
+
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <FormField
+                      control={form.control}
+                      name="startDate"
+                      render={({ field }) => (
+                        <DatePickerField
+                          value={field.value}
+                          onChange={field.onChange}
+                          label="Start Date"
+                          testId="input-start-date"
+                          required
+                        />
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="endDate"
+                      render={({ field }) => (
+                        <DatePickerField
+                          value={field.value}
+                          onChange={field.onChange}
+                          label="End Date"
+                          testId="input-end-date"
+                          required
+                        />
+                      )}
+                    />
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* Budget Options Section */}
+              <Card ref={budgetSectionRef as any}>
+                <CardHeader className="pb-3">
+                  <div className="flex items-center gap-2">
+                    <CircleDollarSign className="h-4 w-4 text-muted-foreground" />
+                    <CardTitle className="text-base">Budget Options</CardTitle>
+                  </div>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <FormField
+                    control={form.control}
+                    name="unlimitedBudget"
+                    render={({ field }) => (
+                      <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
+                        <div className="space-y-0.5">
+                          <FormLabel>Unlimited Budget</FormLabel>
+                          <FormDescription>
+                            When enabled, line item will not have a budget cap
+                          </FormDescription>
+                        </div>
+                        <FormControl>
+                          <Switch
+                            checked={field.value || false}
+                            onCheckedChange={field.onChange}
+                            data-testid="switch-unlimited-budget"
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+
+                  {/* Budget field - Only show when unlimited budget is OFF */}
+                  {!watchedUnlimitedBudget && (
+                    <FormField
+                      control={form.control}
+                      name="budget"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Budget <span className="text-destructive">*</span></FormLabel>
+                          <div className="flex gap-2">
+                            <FormControl>
+                              <Input
+                                type="number"
+                                placeholder="0.00"
+                                {...field}
+                                data-testid="input-budget"
+                              />
+                            </FormControl>
+                            <div className="flex h-9 items-center rounded-md border bg-muted/50 px-3 text-sm font-medium">
+                              <Lock className="h-3 w-3 mr-1.5 text-muted-foreground" />
+                              {currentDeal?.currency || "USD"}
+                            </div>
+                          </div>
+                          <FormDescription className="text-xs">
+                            Currency inherited from deal
+                          </FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  )}
+
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <FormField
+                      control={form.control}
+                      name="budgetConsumption"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Budget Consumption</FormLabel>
+                          <Select onValueChange={field.onChange} value={field.value || "daily"}>
+                            <FormControl>
+                              <SelectTrigger data-testid="select-budget-consumption">
+                                <SelectValue placeholder="Select consumption" />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              <SelectItem value="daily">Daily</SelectItem>
+                              <SelectItem value="weekly">Weekly</SelectItem>
+                              <SelectItem value="monthly">Monthly</SelectItem>
+                              <SelectItem value="lifetime">Lifetime</SelectItem>
+                            </SelectContent>
+                          </Select>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="dailyBudget"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Daily Budget ({currentDeal?.currency || "USD"})</FormLabel>
+                          <FormControl>
+                            <Input
+                              type="number"
+                              placeholder="0.00"
+                              {...field}
+                              value={field.value || ""}
+                              onChange={(e) => field.onChange(e.target.value)}
+                              data-testid="input-daily-budget"
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* Pacing & Traffic Allocation Section - Only for programmatic deals */}
+              {!isTraditionalDeal && (
+                <Card>
+                  <CardHeader className="pb-3">
+                    <div className="flex items-center gap-2">
+                      <TrendingUp className="h-4 w-4 text-muted-foreground" />
+                      <CardTitle className="text-base">Pacing & Traffic Allocation</CardTitle>
+                    </div>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <FormField
+                      control={form.control}
+                      name="pacing"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Pacing</FormLabel>
+                          <Select onValueChange={field.onChange} value={field.value}>
+                            <FormControl>
+                              <SelectTrigger data-testid="select-pacing">
+                                <SelectValue placeholder="Select pacing" />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              {PACING_OPTIONS.map((option) => (
+                                <SelectItem key={option.value} value={option.value}>
+                                  {option.label}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                          <FormDescription>
+                            Controls how the budget is spent over the deal duration
+                          </FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="trafficAllocation"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <TrafficSlider
+                              value={field.value}
+                              onChange={field.onChange}
+                              data-testid="slider-traffic-allocation"
+                            />
+                          </FormControl>
+                          <FormDescription>
+                            Controls what percentage of eligible impressions this line item receives
+                          </FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </CardContent>
+                </Card>
+              )}
+
+              {/* Targeting Section - Summary Row Format */}
+              <Card ref={targetingSectionRef as any}>
+                <CardHeader className="pb-3">
+                  <div className="flex items-center gap-2">
+                    <Target className="h-4 w-4 text-muted-foreground" />
+                    <CardTitle className="text-base">Targeting</CardTitle>
+                  </div>
+                </CardHeader>
+                <CardContent className="space-y-2">
+                  {/* Media Type Row */}
+                  <div className="flex items-center justify-between p-3 rounded-md border bg-muted/30">
+                    <div className="flex items-center gap-3">
+                      <Monitor className="h-4 w-4 text-muted-foreground" />
+                      <span className="text-sm">Media Type</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm font-medium">DOOH</span>
+                      <Check className="h-4 w-4 text-primary" />
+                    </div>
+                  </div>
+
+                  {/* Geography Row */}
+                  <FormField
+                    control={form.control}
+                    name="geography"
+                    render={({ field }) => (
+                      <FormItem className="space-y-0">
+                        <div 
+                          className="flex items-center justify-between p-3 rounded-md border hover-elevate cursor-pointer"
+                          onClick={() => setAdvancedMapDrawerOpen(true)}
+                          data-testid="targeting-row-geography"
+                        >
+                          <div className="flex items-center gap-3">
+                            <MapPin className="h-4 w-4 text-muted-foreground" />
+                            <span className="text-sm">Geography</span>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <span className="text-sm text-muted-foreground">
+                              {field.value?.length || 0} locations selected
+                            </span>
+                            <Check className={`h-4 w-4 ${(field.value?.length || 0) > 0 ? 'text-primary' : 'text-muted-foreground/30'}`} />
+                          </div>
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+
+                  {/* Age Targeting Row */}
+                  <FormField
+                    control={form.control}
+                    name="demographics"
+                    render={({ field }) => {
+                      const selectedAges = field.value.filter((v: string) => AGE_GROUPS.includes(v));
+                      const isOpen = activeTargetingSection === "age";
+                      return (
+                        <FormItem className="space-y-0">
+                          <div data-collapsible-section="age">
+                          <Collapsible open={isOpen} onOpenChange={(open) => setActiveTargetingSection(open ? "age" : null)}>
+                            <CollapsibleTrigger asChild>
+                              <div className="flex items-center justify-between p-3 rounded-md border hover-elevate cursor-pointer"
+                                data-testid="targeting-row-age"
+                              >
+                                <div className="flex items-center gap-3">
+                                  <Users className="h-4 w-4 text-muted-foreground" />
+                                  <span className="text-sm">Age Groups</span>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                  <span className="text-sm text-muted-foreground">
+                                    {selectedAges.length} age groups selected
+                                  </span>
+                                  <Check className={`h-4 w-4 ${selectedAges.length > 0 ? 'text-primary' : 'text-muted-foreground/30'}`} />
+                                </div>
+                              </div>
+                            </CollapsibleTrigger>
+                            <CollapsibleContent className="pt-2 pl-10">
+                              <div className="grid grid-cols-2 md:grid-cols-3 gap-2 p-3 bg-muted/30 rounded-md">
+                                {AGE_GROUPS.map((age) => (
+                                  <label key={age} className="flex items-center gap-2 cursor-pointer text-sm">
+                                    <Checkbox
+                                      checked={field.value.includes(age)}
+                                      onCheckedChange={(checked) => {
+                                        if (checked) {
+                                          field.onChange([...field.value, age]);
+                                        } else {
+                                          field.onChange(field.value.filter((v: string) => v !== age));
+                                        }
+                                      }}
+                                    />
+                                    {age}
+                                  </label>
+                                ))}
+                              </div>
+                            </CollapsibleContent>
+                          </Collapsible>
+                          </div>
+                        </FormItem>
+                      );
+                    }}
+                  />
+
+                  {/* Gender Targeting Row */}
+                  <FormField
+                    control={form.control}
+                    name="demographics"
+                    render={({ field }) => {
+                      const selectedGenders = field.value.filter((v: string) => GENDERS.includes(v));
+                      const isOpen = activeTargetingSection === "gender";
+                      return (
+                        <FormItem className="space-y-0">
+                          <div data-collapsible-section="gender">
+                          <Collapsible open={isOpen} onOpenChange={(open) => setActiveTargetingSection(open ? "gender" : null)}>
+                            <CollapsibleTrigger asChild>
+                              <div className="flex items-center justify-between p-3 rounded-md border hover-elevate cursor-pointer"
+                                data-testid="targeting-row-gender"
+                              >
+                                <div className="flex items-center gap-3">
+                                  <Users className="h-4 w-4 text-muted-foreground" />
+                                  <span className="text-sm">Gender</span>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                  <span className="text-sm text-muted-foreground">
+                                    {selectedGenders.length} genders selected
+                                  </span>
+                                  <Check className={`h-4 w-4 ${selectedGenders.length > 0 ? 'text-primary' : 'text-muted-foreground/30'}`} />
+                                </div>
+                              </div>
+                            </CollapsibleTrigger>
+                            <CollapsibleContent className="pt-2 pl-10">
+                              <div className="grid grid-cols-2 gap-2 p-3 bg-muted/30 rounded-md">
+                                {GENDERS.map((gender) => (
+                                  <label key={gender} className="flex items-center gap-2 cursor-pointer text-sm">
+                                    <Checkbox
+                                      checked={field.value.includes(gender)}
+                                      onCheckedChange={(checked) => {
+                                        if (checked) {
+                                          field.onChange([...field.value, gender]);
+                                        } else {
+                                          field.onChange(field.value.filter((v: string) => v !== gender));
+                                        }
+                                      }}
+                                    />
+                                    {gender}
+                                  </label>
+                                ))}
+                              </div>
+                            </CollapsibleContent>
+                          </Collapsible>
+                          </div>
+                        </FormItem>
+                      );
+                    }}
+                  />
+
+                  {/* POI Targeting Row */}
+                  <FormField
+                    control={form.control}
+                    name="selectedPOIs"
+                    render={({ field }) => (
+                      <FormItem className="space-y-0">
+                        <div 
+                          className="flex items-center justify-between p-3 rounded-md border hover-elevate cursor-pointer"
+                          onClick={() => setPoiDrawerOpen(true)}
+                          data-testid="targeting-row-poi"
+                        >
+                          <div className="flex items-center gap-3">
+                            <MapPin className="h-4 w-4 text-muted-foreground" />
+                            <span className="text-sm">POI Targeting</span>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <span className="text-sm text-muted-foreground">
+                              {field.value.length} POIs, {selectedPOICategories.length} categories
+                            </span>
+                            <Check className={`h-4 w-4 ${field.value.length > 0 || selectedPOICategories.length > 0 ? 'text-primary' : 'text-muted-foreground/30'}`} />
+                          </div>
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+
+                  {/* Venue Type Row - Opens Drawer */}
+                  <FormField
+                    control={form.control}
+                    name="venueTypes"
+                    render={({ field }) => (
+                      <FormItem className="space-y-0">
+                        <div 
+                          className="flex items-center justify-between p-3 rounded-md border hover-elevate cursor-pointer"
+                          onClick={() => setVenueTypeDrawerOpen(true)}
+                          data-testid="targeting-row-venue-type"
+                        >
+                          <div className="flex items-center gap-3">
+                            <Layers className="h-4 w-4 text-muted-foreground" />
+                            <span className="text-sm">Venue Type</span>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <span className="text-sm text-muted-foreground">
+                              {field.value.length} venue type{field.value.length !== 1 ? 's' : ''} selected
+                            </span>
+                            <Check className={`h-4 w-4 ${field.value.length > 0 ? 'text-primary' : 'text-muted-foreground/30'}`} />
+                          </div>
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+
+                  {/* Ad Resolution Row */}
+                  <FormField
+                    control={form.control}
+                    name="resolution"
+                    render={({ field }) => (
+                      <FormItem className="space-y-0">
+                        <Collapsible>
+                          <CollapsibleTrigger asChild>
+                            <div className="flex items-center justify-between p-3 rounded-md border hover-elevate cursor-pointer"
+                              data-testid="targeting-row-resolution"
+                            >
+                              <div className="flex items-center gap-3">
+                                <Monitor className="h-4 w-4 text-muted-foreground" />
+                                <span className="text-sm">Ad Resolution</span>
+                              </div>
+                              <div className="flex items-center gap-2">
+                                <span className="text-sm text-muted-foreground">
+                                  {field.value ? `${field.value} selected` : "0 Ad Resolutions are selected"}
+                                </span>
+                                <Check className={`h-4 w-4 ${field.value ? 'text-primary' : 'text-muted-foreground/30'}`} />
+                              </div>
+                            </div>
+                          </CollapsibleTrigger>
+                          <CollapsibleContent className="pt-2 pl-10">
+                            <div className="grid grid-cols-2 md:grid-cols-3 gap-2 p-3 bg-muted/30 rounded-md">
+                              {SCREEN_RESOLUTIONS.map((res) => (
+                                <label key={res} className="flex items-center gap-2 cursor-pointer text-sm">
+                                  <Checkbox
+                                    checked={field.value === res}
+                                    onCheckedChange={(checked) => {
+                                      field.onChange(checked ? res : "");
+                                    }}
+                                  />
+                                  {res}
+                                </label>
+                              ))}
+                            </div>
+                          </CollapsibleContent>
+                        </Collapsible>
+                      </FormItem>
+                    )}
+                  />
+
+                  {/* Ad Duration Row */}
+                  <FormField
+                    control={form.control}
+                    name="creativeDuration"
+                    render={({ field }) => (
+                      <FormItem className="space-y-0">
+                        <Collapsible>
+                          <CollapsibleTrigger asChild>
+                            <div className="flex items-center justify-between p-3 rounded-md border hover-elevate cursor-pointer"
+                              data-testid="targeting-row-duration"
+                            >
+                              <div className="flex items-center gap-3">
+                                <Clock className="h-4 w-4 text-muted-foreground" />
+                                <span className="text-sm">Ad Duration</span>
+                              </div>
+                              <div className="flex items-center gap-2">
+                                <span className="text-sm text-muted-foreground">
+                                  {field.value}s selected
+                                </span>
+                                <Check className={`h-4 w-4 ${field.value ? 'text-primary' : 'text-muted-foreground/30'}`} />
+                              </div>
+                            </div>
+                          </CollapsibleTrigger>
+                          <CollapsibleContent className="pt-2 pl-10">
+                            <div className="flex flex-wrap gap-2 p-3 bg-muted/30 rounded-md">
+                              {DURATION_OPTIONS.map((duration) => (
+                                <Button
+                                  key={duration}
+                                  type="button"
+                                  variant={field.value === duration ? "default" : "outline"}
+                                  size="sm"
+                                  onClick={() => field.onChange(duration)}
+                                >
+                                  {duration}s
+                                </Button>
+                              ))}
+                              <div className="flex items-center gap-2 ml-4">
+                                <span className="text-xs text-muted-foreground">Custom:</span>
+                                <Input
+                                  type="number"
+                                  className="w-20 h-8"
+                                  min={1}
+                                  value={field.value}
+                                  onChange={(e) => field.onChange(parseInt(e.target.value) || 10)}
+                                />
+                              </div>
+                            </div>
+                          </CollapsibleContent>
+                        </Collapsible>
+                      </FormItem>
+                    )}
+                  />
+                </CardContent>
+              </Card>
+
+              {/* DOOH Inventory Type Section */}
+              <Card ref={inventorySectionRef as any}>
+                <CardHeader className="pb-3">
+                  <div className="flex items-center gap-2">
+                    <Monitor className="h-4 w-4 text-muted-foreground" />
+                    <CardTitle className="text-base">DOOH Inventory Type</CardTitle>
+                  </div>
+                </CardHeader>
+                <CardContent className="space-y-2">
+                  {/* SSP / Exchange Row */}
+                  <div className="flex items-center justify-between p-3 rounded-md border bg-muted/30">
+                    <div className="flex items-center gap-3">
+                      <Server className="h-4 w-4 text-muted-foreground" />
+                      <span className="text-sm">SSP / Exchange</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm font-medium">Influence SSP</span>
+                      <Check className="h-4 w-4 text-primary" />
+                    </div>
+                  </div>
+
+                  {/* Media Owner Row */}
+                  <div 
+                    className="flex items-center justify-between p-3 rounded-md border hover-elevate cursor-pointer"
+                    onClick={() => setMediaOwnerDrawerOpen(true)}
+                    data-testid="inventory-row-media-owner"
+                  >
+                    <div className="flex items-center gap-3">
+                      <Building className="h-4 w-4 text-muted-foreground" />
+                      <span className="text-sm">Media Owner</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-muted-foreground">
+                        {selectedMediaOwners.length} Media Owners selected
+                      </span>
+                      <Check className={`h-4 w-4 ${selectedMediaOwners.length > 0 ? 'text-primary' : 'text-muted-foreground/30'}`} />
+                    </div>
+                  </div>
+
+                  {/* DOOH Inventory Type Row */}
+                  <FormField
+                    control={form.control}
+                    name="inventoryType"
+                    render={({ field }) => {
+                      const isOpen = activeTargetingSection === "inventoryType";
+                      return (
+                        <FormItem className="space-y-0">
+                          <div data-collapsible-section="inventoryType">
+                          <Collapsible open={isOpen} onOpenChange={(open) => setActiveTargetingSection(open ? "inventoryType" : null)}>
+                            <CollapsibleTrigger asChild>
+                              <div className="flex items-center justify-between p-3 rounded-md border hover-elevate cursor-pointer"
+                                data-testid="inventory-row-dooh"
+                              >
+                                <div className="flex items-center gap-3">
+                                  <Monitor className="h-4 w-4 text-muted-foreground" />
+                                  <span className="text-sm">Inventory Type</span>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                  <span className="text-sm text-muted-foreground">
+                                    {field.value.length} types selected
+                                  </span>
+                                  <Check className={`h-4 w-4 ${field.value.length > 0 ? 'text-primary' : 'text-muted-foreground/30'}`} />
+                                </div>
+                              </div>
+                            </CollapsibleTrigger>
+                            <CollapsibleContent className="pt-2 pl-10">
+                              <div className="grid grid-cols-2 md:grid-cols-4 gap-2 p-3 bg-muted/30 rounded-md">
+                                {INVENTORY_TYPES.map((option) => (
+                                  <label key={option} className="flex items-center gap-2 cursor-pointer text-sm">
+                                    <Checkbox
+                                      checked={field.value.includes(option)}
+                                      onCheckedChange={(checked) => {
+                                        if (checked) {
+                                          field.onChange([...field.value, option]);
+                                        } else {
+                                          field.onChange(field.value.filter((v: string) => v !== option));
+                                        }
+                                      }}
+                                    />
+                                    {option}
+                                  </label>
+                                ))}
+                              </div>
+                            </CollapsibleContent>
+                          </Collapsible>
+                          </div>
+                        </FormItem>
+                      );
+                    }}
+                  />
+
+                  {/* Inventory Format Row */}
+                  <FormField
+                    control={form.control}
+                    name="inventoryFormat"
+                    render={({ field }) => (
+                      <FormItem className="space-y-0">
+                        <div 
+                          className="flex items-center justify-between p-3 rounded-md border hover-elevate cursor-pointer"
+                          onClick={() => setInventoryFormatDrawerOpen(true)}
+                          data-testid="inventory-row-format"
+                        >
+                          <div className="flex items-center gap-3">
+                            <Layout className="h-4 w-4 text-muted-foreground" />
+                            <span className="text-sm">Inventory Format</span>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <span className="text-sm text-muted-foreground">
+                              {field.value.length} formats selected
+                            </span>
+                            <Check className={`h-4 w-4 ${field.value.length > 0 ? 'text-primary' : 'text-muted-foreground/30'}`} />
+                          </div>
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+                </CardContent>
+              </Card>
+
+              {/* AI Inventory Recommendations Section */}
+              <AIRecommendationPanel
+                dealId={dealId || ""}
+                startDate={watchedStartDate}
+                endDate={watchedEndDate}
+                budget={watchedBudget ? parseFloat(watchedBudget) : undefined}
+                country={currentDeal?.countries?.[0]}
+                selectedScreens={watchedSelectedScreens || []}
+                onAddScreens={(screenIds) => {
+                  const current = form.getValues("selectedScreens") || [];
+                  const newScreens = Array.from(new Set([...current, ...screenIds]));
+                  form.setValue("selectedScreens", newScreens);
+                }}
+                onOpenManualEdit={() => setManualInventoryDrawerOpen(true)}
+              />
+
+              <Sheet open={inventoryDrawerOpen} onOpenChange={setInventoryDrawerOpen}>
+                <SheetContent className="w-full sm:max-w-2xl overflow-hidden flex flex-col">
+                  <SheetHeader>
+                    <SheetTitle>Edit Inventory Selection</SheetTitle>
+                    <SheetDescription>
+                      Select or deselect screens to include in your line item. Click markers on the map or use checkboxes.
+                    </SheetDescription>
+                  </SheetHeader>
+                  <div className="flex-1 overflow-hidden grid grid-cols-1 gap-4 mt-4">
+                    <div className="h-64 rounded-md overflow-hidden border">
+                      <InventoryMapComponent
+                        center={mapCenter}
+                        zoom={mapCenter.zoom}
+                        screens={fetchedScreens}
+                        selectedIds={selectedScreenIds}
+                        onScreenClick={handleToggleScreen}
+                      />
+                    </div>
+                    <div className="flex-1 overflow-hidden">
+                      <div className="flex items-center justify-between mb-2">
+                        <span className="text-sm font-medium">
+                          {(watchedSelectedScreens || []).length} of {fetchedScreens.length} screens selected
+                        </span>
+                        <div className="flex gap-2">
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            onClick={() => form.setValue("selectedScreens", fetchedScreens.map(s => s.id))}
+                            data-testid="button-select-all-screens"
+                          >
+                            Select All
+                          </Button>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            onClick={() => form.setValue("selectedScreens", [])}
+                            data-testid="button-deselect-all-screens"
+                          >
+                            Deselect All
+                          </Button>
+                        </div>
+                      </div>
+                      <ScrollArea className="h-[300px] border rounded-md">
+                        <div className="p-3 space-y-2">
+                          {fetchedScreens.map((screen) => (
+                            <label
+                              key={screen.id}
+                              className="flex items-center gap-3 p-2 rounded-md hover-elevate cursor-pointer"
+                            >
+                              <Checkbox
+                                checked={selectedScreenIds.has(screen.id)}
+                                onCheckedChange={() => handleToggleScreen(screen.id)}
+                                data-testid={`checkbox-screen-${screen.id}`}
+                              />
+                              <div className="flex-1 min-w-0">
+                                <div className="font-medium text-sm truncate">{screen.name}</div>
+                                <div className="text-xs text-muted-foreground">
+                                  {screen.city || ''}{screen.city && screen.country ? ', ' : ''}{screen.country || ''} • CPM: ${screen.cpm || '0.00'}
+                                </div>
+                              </div>
+                              <Monitor className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+                            </label>
+                          ))}
+                          {fetchedScreens.length === 0 && (
+                            <p className="text-sm text-muted-foreground text-center py-4">
+                              No screens available. Fetch inventory first.
+                            </p>
+                          )}
+                        </div>
+                      </ScrollArea>
+                    </div>
+                  </div>
+                  <div className="flex justify-end gap-2 mt-4 pt-4 border-t">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() => setInventoryDrawerOpen(false)}
+                      data-testid="button-cancel-inventory"
+                    >
+                      Cancel
+                    </Button>
+                    <Button
+                      type="button"
+                      onClick={() => setInventoryDrawerOpen(false)}
+                      data-testid="button-apply-inventory"
+                    >
+                      Apply Selection
+                    </Button>
+                  </div>
+                </SheetContent>
+              </Sheet>
+
+              {/* Inventory Availability Section - Shows when screens are selected */}
+              {(watchedSelectedScreens?.length ?? 0) > 0 && (
+                <InventoryAvailabilitySection
+                  selectedScreenIds={watchedSelectedScreens || []}
+                  startDate={watchedStartDate}
+                  endDate={watchedEndDate}
+                  onViewDetails={() => setAvailabilityDrawerOpen(true)}
+                />
+              )}
+
+              {/* Day Parting Section */}
+              <Card>
+                <CardHeader className="pb-3">
+                  <div className="flex items-center gap-2">
+                    <Clock className="h-4 w-4 text-muted-foreground" />
+                    <CardTitle className="text-base">Day Parting</CardTitle>
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    Set specific days and hours when ads should run
+                  </p>
+                </CardHeader>
+                <CardContent>
+                  <FormField
+                    control={form.control}
+                    name="schedules"
+                    render={({ field }) => (
+                      <ScheduleEditor
+                        value={field.value || []}
+                        onChange={field.onChange}
+                      />
+                    )}
+                  />
+                </CardContent>
+              </Card>
+
+              {/* Billing Section */}
+              <Card>
+                <CardHeader className="pb-3">
+                  <div className="flex items-center gap-2">
+                    <Receipt className="h-4 w-4 text-muted-foreground" />
+                    <CardTitle className="text-base">Billing</CardTitle>
+                  </div>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <FormField
+                    control={form.control}
+                    name="billable"
+                    render={({ field }) => (
+                      <FormItem className="space-y-3">
+                        <FormControl>
+                          <RadioGroup
+                            onValueChange={(value) => field.onChange(value === "billable")}
+                            value={field.value ? "billable" : "non_billable"}
+                            className="flex flex-col gap-3"
+                          >
+                            <div className="flex items-center space-x-3 p-3 rounded-md border hover-elevate cursor-pointer">
+                              <RadioGroupItem value="non_billable" id="non_billable" data-testid="radio-non-billable" />
+                              <label htmlFor="non_billable" className="flex-1 cursor-pointer">
+                                <div className="text-sm font-medium">Non Billable</div>
+                                <div className="text-xs text-muted-foreground">This line item will not be billed</div>
+                              </label>
+                            </div>
+                            <div className="flex items-center space-x-3 p-3 rounded-md border hover-elevate cursor-pointer">
+                              <RadioGroupItem value="billable" id="billable" data-testid="radio-billable" />
+                              <label htmlFor="billable" className="flex-1 cursor-pointer">
+                                <div className="text-sm font-medium">Billable</div>
+                                <div className="text-xs text-muted-foreground">This line item will be included in billing</div>
+                              </label>
+                            </div>
+                          </RadioGroup>
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                </CardContent>
+              </Card>
+
+              {/* Bid Strategy Section */}
+              <Card>
+                <CardHeader className="pb-3">
+                  <div className="flex items-center gap-2">
+                    <Gauge className="h-4 w-4 text-muted-foreground" />
+                    <CardTitle className="text-base">Bid Strategy</CardTitle>
+                  </div>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <FormField
+                    control={form.control}
+                    name="automatedBidding"
+                    render={({ field }) => (
+                      <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
+                        <div className="space-y-0.5">
+                          <FormLabel>Automated Bidding</FormLabel>
+                          <FormDescription>
+                            Let the system automatically optimize bid amounts
+                          </FormDescription>
+                        </div>
+                        <FormControl>
+                          <Switch
+                            checked={field.value || false}
+                            onCheckedChange={field.onChange}
+                            data-testid="switch-automated-bidding"
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <FormField
+                      control={form.control}
+                      name="maxBid"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Max Bid ($)</FormLabel>
+                          <div className="space-y-2">
+                            <FormControl>
+                              <Input
+                                type="number"
+                                step="0.01"
+                                placeholder="0.00"
+                                {...field}
+                                data-testid="input-max-bid"
+                              />
+                            </FormControl>
+                            {suggestedMaxBid && !maxBidDiffersFromSuggestion && (
+                              <div className="flex items-center gap-2 p-2 rounded-md bg-muted/50 border">
+                                <span className="text-sm text-muted-foreground">
+                                  Suggested: <span className="font-medium text-foreground">${suggestedMaxBid}</span>
+                                  <span className="text-xs ml-1">
+                                    ({(watchedSelectedScreens?.length || 0) > 0 ? "avg of selected screens" : "based on inventory filters"})
+                                  </span>
+                                </span>
+                                <Button
+                                  type="button"
+                                  variant="outline"
+                                  size="sm"
+                                  onClick={applyMaxBidSuggestion}
+                                  data-testid="button-apply-max-bid"
+                                >
+                                  Apply
+                                </Button>
+                              </div>
+                            )}
+                            {maxBidDiffersFromSuggestion && (
+                              <div className="flex items-center gap-2 p-2 rounded-md bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800">
+                                <span className="text-sm text-muted-foreground flex-1">
+                                  Suggested: <span className="font-medium text-foreground">${suggestedMaxBid}</span>
+                                  <span className="text-xs ml-1 text-amber-600 dark:text-amber-400">
+                                    (differs from current)
+                                  </span>
+                                </span>
+                                <Button
+                                  type="button"
+                                  variant="outline"
+                                  size="sm"
+                                  onClick={applyMaxBidSuggestion}
+                                  data-testid="button-use-suggested-bid"
+                                >
+                                  Use Suggested
+                                </Button>
+                              </div>
+                            )}
+                          </div>
+                          <FormDescription>
+                            Maximum bid amount. {!suggestedMaxBid && "Select inventory or screens to see a suggested rate."}
+                          </FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="bidType"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Bid Type</FormLabel>
+                          <Select onValueChange={field.onChange} value={field.value || "cpm"}>
+                            <FormControl>
+                              <SelectTrigger data-testid="select-bid-type">
+                                <SelectValue placeholder="Select bid type" />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              <SelectItem value="cpm">CPM</SelectItem>
+                              <SelectItem value="cps">CPS</SelectItem>
+                                                          </SelectContent>
+                          </Select>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+
+                  {auctionType && (
+                    <FormItem>
+                      <FormLabel className="flex items-center gap-2">
+                        Auction Type
+                        <Badge variant="outline" className="text-xs font-normal">
+                          <Lock className="h-3 w-3 mr-1" />
+                          Auto
+                        </Badge>
+                      </FormLabel>
+                      <Input
+                        value={auctionType}
+                        disabled
+                        className="bg-muted"
+                        data-testid="input-auction-type"
+                      />
+                      <FormDescription>
+                        Determined by the deal type
+                      </FormDescription>
+                    </FormItem>
+                  )}
+
+                  {isPGDeal && currentDeal && (
+                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
+                      <div className="space-y-0.5">
+                        <div className="flex items-center gap-2">
+                          <FormLabel>Hard Stop</FormLabel>
+                          <Badge variant="outline" className="text-xs">From Deal</Badge>
+                        </div>
+                        <FormDescription>
+                          {currentDeal.hardStop 
+                            ? "Enabled - Delivery stops when budget is exhausted" 
+                            : "Disabled - Delivery continues past budget"}
+                        </FormDescription>
+                      </div>
+                      <Checkbox
+                        checked={currentDeal.hardStop ?? false}
+                        disabled
+                        data-testid="checkbox-hard-stop"
+                      />
+                    </FormItem>
+                  )}
+                </CardContent>
+              </Card>
+
+              {/* Custom Fees Section - Table Format */}
+              <Card>
+                <CardHeader className="pb-3">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <Receipt className="h-4 w-4 text-muted-foreground" />
+                      <CardTitle className="text-base">Custom Fees</CardTitle>
+                    </div>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={() => appendFee({ name: "", amount: 0, type: "fixed", hidden: false })}
+                      data-testid="button-add-fee"
+                    >
+                      <Plus className="h-4 w-4 mr-1" />
+                      Add Fee
+                    </Button>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  {feeFields.length === 0 ? (
+                    <p className="text-sm text-muted-foreground text-center py-4">No custom fees added</p>
+                  ) : (
+                    <div className="border rounded-md overflow-hidden">
+                      <table className="w-full text-sm">
+                        <thead className="bg-muted/50">
+                          <tr>
+                            <th className="text-left p-3 font-medium">Name</th>
+                            <th className="text-left p-3 font-medium">Amount</th>
+                            <th className="text-left p-3 font-medium">Type</th>
+                            <th className="text-center p-3 font-medium">Invoiced</th>
+                            <th className="text-center p-3 font-medium w-12">Action</th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y">
+                          {feeFields.map((feeField, index) => (
+                            <tr key={feeField.id} className="hover-elevate">
+                              <td className="p-2">
+                                <FormField
+                                  control={form.control}
+                                  name={`customFees.${index}.name`}
+                                  render={({ field }) => (
+                                    <Input
+                                      placeholder="Fee name"
+                                      className="h-8"
+                                      {...field}
+                                      data-testid={`input-fee-name-${index}`}
+                                    />
+                                  )}
+                                />
+                              </td>
+                              <td className="p-2">
+                                <FormField
+                                  control={form.control}
+                                  name={`customFees.${index}.amount`}
+                                  render={({ field }) => (
+                                    <Input
+                                      type="number"
+                                      step="0.01"
+                                      placeholder="0.00"
+                                      className="h-8 w-24"
+                                      {...field}
+                                      onChange={(e) => field.onChange(parseFloat(e.target.value) || 0)}
+                                      data-testid={`input-fee-amount-${index}`}
+                                    />
+                                  )}
+                                />
+                              </td>
+                              <td className="p-2">
+                                <FormField
+                                  control={form.control}
+                                  name={`customFees.${index}.type`}
+                                  render={({ field }) => (
+                                    <Select onValueChange={field.onChange} value={field.value}>
+                                      <SelectTrigger className="h-8 w-28" data-testid={`select-fee-type-${index}`}>
+                                        <SelectValue />
+                                      </SelectTrigger>
+                                      <SelectContent>
+                                        <SelectItem value="fixed">Fixed</SelectItem>
+                                        <SelectItem value="percentage">Percentage</SelectItem>
+                                      </SelectContent>
+                                    </Select>
+                                  )}
+                                />
+                              </td>
+                              <td className="p-2 text-center">
+                                <FormField
+                                  control={form.control}
+                                  name={`customFees.${index}.hidden`}
+                                  render={({ field }) => (
+                                    <Checkbox
+                                      checked={!field.value}
+                                      onCheckedChange={(checked) => field.onChange(!checked)}
+                                      data-testid={`checkbox-fee-invoiced-${index}`}
+                                    />
+                                  )}
+                                />
+                              </td>
+                              <td className="p-2 text-center">
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-8 w-8"
+                                  onClick={() => removeFee(index)}
+                                  data-testid={`button-remove-fee-${index}`}
+                                >
+                                  <Trash2 className="h-4 w-4 text-destructive" />
+                                </Button>
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+
+              {/* Advanced Options */}
+              <Card>
+                <CardHeader>
+                  <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+                    <CollapsibleTrigger asChild>
+                      <Button variant="ghost" className="w-full justify-between p-0 h-auto hover:bg-transparent">
+                        <div className="flex items-center gap-2">
+                          <Settings className="h-4 w-4 text-muted-foreground" />
+                          <CardTitle className="text-base">Advanced Options</CardTitle>
+                        </div>
+                        {advancedOpen ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
+                      </Button>
+                    </CollapsibleTrigger>
+                  </Collapsible>
+                </CardHeader>
+                <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+                  <CollapsibleContent>
+                    <CardContent className="space-y-6">
+                      {/* Frequency Cap - only for programmatic deals (not PG or Traditional) */}
+                      {!isPGDeal && !isTraditionalDeal && (
+                        <div className="space-y-4">
+                          <FormLabel className="text-base font-medium">Frequency Cap</FormLabel>
+                          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                            <FormField
+                              control={form.control}
+                              name="frequencyCapImpressions"
+                              render={({ field }) => (
+                                <FormItem>
+                                  <FormLabel>Ad Plays</FormLabel>
+                                  <FormControl>
+                                    <Input
+                                      type="number"
+                                      placeholder="e.g., 5"
+                                      {...field}
+                                      data-testid="input-frequency-impressions"
+                                    />
+                                  </FormControl>
+                                  <FormDescription>
+                                    Maximum ad plays per inventory per period
+                                  </FormDescription>
+                                  <FormMessage />
+                                </FormItem>
+                              )}
+                            />
+
+                            <FormField
+                              control={form.control}
+                              name="frequencyCapPeriod"
+                              render={({ field }) => (
+                                <FormItem>
+                                  <FormLabel>Period</FormLabel>
+                                  <Select onValueChange={field.onChange} value={field.value}>
+                                    <FormControl>
+                                      <SelectTrigger data-testid="select-frequency-period">
+                                        <SelectValue placeholder="Select period" />
+                                      </SelectTrigger>
+                                    </FormControl>
+                                    <SelectContent>
+                                      <SelectItem value="hour">Hour</SelectItem>
+                                      <SelectItem value="day">Day</SelectItem>
+                                      <SelectItem value="week">Week</SelectItem>
+                                      <SelectItem value="month">Month</SelectItem>
+                                      <SelectItem value="lifetime">Lifetime</SelectItem>
+                                    </SelectContent>
+                                  </Select>
+                                  <FormMessage />
+                                </FormItem>
+                              )}
+                            />
+                          </div>
+                        </div>
+                      )}
+                    </CardContent>
+                  </CollapsibleContent>
+                </Collapsible>
+              </Card>
+
+              {/* Signals Section */}
+              <Card>
+                <CardHeader className="pb-3">
+                  <div className="flex items-center gap-2">
+                    <Zap className="h-4 w-4 text-muted-foreground" />
+                    <CardTitle className="text-base">Signals</CardTitle>
+                  </div>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <FormField
+                    control={form.control}
+                    name="triggerEnabled"
+                    render={({ field }) => (
+                      <FormItem className="flex items-center justify-between rounded-lg border p-3">
+                        <div className="space-y-0.5">
+                          <FormLabel>Auto-activate Signal</FormLabel>
+                          <FormDescription>
+                            Automatically activate line item when signal triggers
+                          </FormDescription>
+                        </div>
+                        <FormControl>
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                            data-testid="toggle-signal-auto-activate"
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="triggerId"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Select Signal</FormLabel>
+                        <FormControl>
+                          <SearchableCombobox
+                            options={signals.map((signal) => ({
+                              value: signal.id,
+                              label: signal.name,
+                              description: `${signal.signalType} • ${signal.status}`,
+                            }))}
+                            value={field.value}
+                            onValueChange={field.onChange}
+                            placeholder="Select a signal..."
+                            searchPlaceholder="Search signals..."
+                            emptyMessage="No signals found."
+                            disabled={!form.watch("triggerEnabled")}
+                            data-testid="select-signal"
+                          />
+                        </FormControl>
+                        <FormDescription>
+                          Choose a signal to control when this line item activates
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </CardContent>
+              </Card>
+                </form>
+              </Form>
+
+            </div>
+
+            <div className="lg:col-span-1 space-y-4">
+              <div className="sticky top-6 space-y-4">
+              {!forecast && (
+                <FormInsightsPanel 
+                  insights={LINE_ITEM_INSIGHTS} 
+                  tips={LINE_ITEM_TIPS}
+                  currentSection={currentFormSection}
+                  sectionInsights={SECTION_INSIGHTS}
+                />
+              )}
+
+              <Card data-testid="panel-forecast">
+                <CardHeader className="pb-3">
+                  <CardTitle className="text-sm font-medium flex items-center gap-2">
+                    <TrendingUp className="h-4 w-4 text-green-500" />
+                    Forecast
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="pt-0">
+                  {forecast ? (
+                    <div className="space-y-3">
+                      <div className="space-y-1">
+                        <div className="text-xs text-muted-foreground">Estimated Impressions</div>
+                        <div className="text-lg font-semibold" data-testid="text-estimated-impressions">
+                          {formatNumber(forecast.estimatedImpressions)}
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          Over {forecast.daysInRange} {forecast.daysInRange === 1 ? 'day' : 'days'}
+                        </div>
+                      </div>
+
+                      {forecast.hasMaxBid && (
+                        <div className="space-y-2 pt-2 border-t">
+                          <div className="text-xs text-muted-foreground font-medium">Cost Breakdown</div>
+                          <div className="p-3 rounded-md bg-muted/50 space-y-2" data-testid="panel-cost-breakdown">
+                            <div className="flex items-center justify-between text-xs">
+                              <span>Media Cost</span>
+                              <span className="font-medium">{formatCurrency(forecast.mediaCost)}</span>
+                            </div>
+                            {forecast.hasCustomFees && (
+                              <div className="flex items-center justify-between text-xs">
+                                <span>+ Custom Fees</span>
+                                <span className="font-medium">{formatCurrency(forecast.customFeesTotal)}</span>
+                              </div>
+                            )}
+                            <div className="flex items-center justify-between text-xs">
+                              <span>+ Platform Fee ({forecast.platformFeePercent}%)</span>
+                              <span className="font-medium">{formatCurrency(forecast.platformFee)}</span>
+                            </div>
+                            <div className="flex items-center justify-between text-sm border-t pt-2 mt-2">
+                              <span className="font-semibold">Total</span>
+                              <span className={`font-bold ${
+                                (forecast.exceedsDealBudget || forecast.exceedsLineItemBudget) 
+                                  ? 'text-destructive' 
+                                  : 'text-green-600'
+                              }`} data-testid="text-total-cost">
+                                {formatCurrency(forecast.totalCost)}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      )}
+
+                      {!forecast.hasMaxBid && (
+                        <div className="text-xs text-muted-foreground pt-2 border-t">
+                          Set a floor rate to see cost breakdown
+                        </div>
+                      )}
+
+                      {forecast.hasMaxBid && (forecast.dealBudget > 0 || forecast.lineItemBudget > 0) && (
+                        <div className="space-y-2 pt-2 border-t">
+                          <div className="text-xs text-muted-foreground">Budget Comparison</div>
+                          <div className="p-2 rounded-md bg-muted/30 space-y-1" data-testid="panel-budget-comparison">
+                            {forecast.dealBudget > 0 && (
+                              <div className="flex items-center justify-between text-xs">
+                                <span>Deal Budget:</span>
+                                <span className="font-medium">{formatCurrency(forecast.dealBudget)}</span>
+                              </div>
+                            )}
+                            {forecast.lineItemBudget > 0 && (
+                              <div className="flex items-center justify-between text-xs">
+                                <span>Line Item Budget:</span>
+                                <span className="font-medium">{formatCurrency(forecast.lineItemBudget)}</span>
+                              </div>
+                            )}
+                          </div>
+                          {(forecast.exceedsDealBudget || forecast.exceedsLineItemBudget) && (
+                            <div className="flex items-center gap-1 text-xs text-destructive" data-testid="alert-budget-exceeded">
+                              <span className="w-2 h-2 rounded-full bg-destructive animate-pulse" />
+                              Cost exceeds {forecast.exceedsDealBudget ? "deal" : "line item"} budget
+                            </div>
+                          )}
+                        </div>
+                      )}
+
+                      {forecast.hasMaxBid && (
+                        <div className="space-y-1 pt-2 border-t">
+                          <div className="text-xs text-muted-foreground">Cost Efficiency</div>
+                          <div className="flex flex-wrap gap-2" data-testid="text-cost-efficiency">
+                            <Badge variant="secondary" className="text-xs">
+                              eCPM: {formatCurrency(forecast.effectiveCPM)}
+                            </Badge>
+                            <Badge variant="secondary" className="text-xs">
+                              eCPS: {formatCurrency(forecast.effectiveCPS)}
+                            </Badge>
+                          </div>
+                        </div>
+                      )}
+
+                      {forecast.budgetUtilization !== null && (
+                        <div className="space-y-1 pt-2 border-t">
+                          <div className="text-xs text-muted-foreground">Budget Utilization</div>
+                          <div className="flex items-center gap-2">
+                            <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
+                              <div 
+                                className={`h-full rounded-full ${
+                                  forecast.budgetUtilization > 100 
+                                    ? 'bg-destructive' 
+                                    : forecast.budgetUtilization > 80 
+                                      ? 'bg-amber-500' 
+                                      : 'bg-green-500'
+                                }`}
+                                style={{ width: `${Math.min(100, forecast.budgetUtilization)}%` }}
+                              />
+                            </div>
+                            <span className="text-xs font-medium" data-testid="text-budget-utilization">
+                              {forecast.budgetUtilization.toFixed(0)}%
+                            </span>
+                          </div>
+                          {forecast.budgetUtilization > 100 && (
+                            <div className="text-xs text-destructive">
+                              Estimated spend exceeds budget
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  ) : (
+                    <p className="text-sm text-muted-foreground" data-testid="text-forecast-empty">
+                      Configure inventory and dates to see forecast
+                    </p>
+                  )}
+                </CardContent>
+              </Card>
+              </div>
+            </div>
+          </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="absolute bottom-0 left-0 right-0 border-t bg-background p-4 z-10">
+        <div className="flex justify-end gap-4">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleCancel}
+            disabled={isSubmitting}
+            data-testid="button-cancel"
+          >
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            form="line-item-form"
+            disabled={isSubmitting}
+            data-testid="button-submit"
+          >
+            {isSubmitting && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+            {isEditing ? "Update Line Item" : "Create Line Item"}
+          </Button>
+        </div>
+      </div>
+
+      <MediaOwnerDrawer
+        open={mediaOwnerDrawerOpen}
+        onOpenChange={setMediaOwnerDrawerOpen}
+        selectedMediaOwners={selectedMediaOwners}
+        onSelectionChange={setSelectedMediaOwners}
+      />
+
+      <InventoryFormatDrawer
+        open={inventoryFormatDrawerOpen}
+        onOpenChange={setInventoryFormatDrawerOpen}
+        selectedFormats={form.watch("inventoryFormat")}
+        onSelectionChange={(formats) => form.setValue("inventoryFormat", formats)}
+        selectedTypes={form.watch("inventoryType")}
+      />
+
+      <POITargetingDrawer
+        open={poiDrawerOpen}
+        onOpenChange={setPoiDrawerOpen}
+        selectedPOIs={form.watch("selectedPOIs")}
+        onPOISelectionChange={(pois) => form.setValue("selectedPOIs", pois)}
+        selectedCategories={selectedPOICategories}
+        onCategorySelectionChange={setSelectedPOICategories}
+        mapCenter={{ lng: 103.8198, lat: 1.3521, zoom: 11 }}
+      />
+
+      <AdvancedMapDrawer
+        open={advancedMapDrawerOpen}
+        onOpenChange={setAdvancedMapDrawerOpen}
+        selectedLocations={form.watch("geography")}
+        onSelectionChange={(locations) => form.setValue("geography", locations)}
+      />
+
+      <ManualInventoryDrawer
+        open={manualInventoryDrawerOpen}
+        onOpenChange={setManualInventoryDrawerOpen}
+        screens={fetchedScreens.length > 0 ? fetchedScreens : allScreens}
+        selectedScreens={form.watch("selectedScreens")}
+        onSelectionChange={(screens) => form.setValue("selectedScreens", screens)}
+        mapCenter={{ lng: 103.8198, lat: 1.3521, zoom: 11 }}
+      />
+
+      <VenueTypeDrawer
+        open={venueTypeDrawerOpen}
+        onOpenChange={setVenueTypeDrawerOpen}
+        selectedVenues={form.watch("venueTypes")}
+        onApply={(venues) => form.setValue("venueTypes", venues)}
+      />
+
+      <AvailabilityDrawer
+        open={availabilityDrawerOpen}
+        onOpenChange={setAvailabilityDrawerOpen}
+        screens={allScreens}
+        selectedScreenIds={form.watch("selectedScreens") || []}
+        lineItemStartDate={watchedStartDate}
+        lineItemEndDate={watchedEndDate}
+      />
+    </div>
+  );
+}