adserver-dashboard 1.0.0

package/client/src/pages/line-item-form-page.tsx

@@ -0,0 +1,3261 @@
+import { useState, useEffect, useMemo, useCallback, useRef } from "react";
+import { useParams, useLocation } from "wouter";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useForm, useFieldArray } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Button, cn } from "@moving-walls/design-system";
+import { Input } from "@moving-walls/design-system";
+import { Card, CardContent, CardHeader, CardTitle } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+import { Label } from "@moving-walls/design-system";
+import { Switch } from "@moving-walls/design-system";
+import { Slider } from "@moving-walls/design-system";
+import { Checkbox } from "@moving-walls/design-system";
+import {
+  SelectRoot,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@moving-walls/design-system";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@moving-walls/design-system";
+import { FormInsights } from "@/components/line-items/form-insights";
+import { CampaignForecastPanel } from "@/components/line-items/campaign-forecast-panel";
+import { DateRangePicker } from "@moving-walls/design-system";
+import {
+  ArrowLeft,
+  ChevronDown,
+  ChevronUp,
+  FileText,
+  Palette,
+  Target,
+  Server,
+  Monitor,
+  Calendar,
+  Receipt,
+  DollarSign,
+  TrendingUp,
+  Plus,
+  Trash2,
+  Settings,
+  MapPin,
+  Users,
+  Layers,
+  Clock,
+  Loader2,
+  Map,
+  Pencil,
+  X,
+  Cloud,
+} from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+import { usePageTitle } from "@/hooks/use-page-title";
+import { useTranslation } from "@/lib/i18n";
+import {
+  InfluenceDealsAPI,
+  influenceDealsRequest,
+  generateExternalId,
+  formatAPIErrorForToast,
+  mapInventoryForAPI,
+  mapLineItemForAPI,
+  type Deal,
+} from "@/lib/influence-deals-api";
+import { getDsp } from "@/lib/dsp-buyer-api";
+import { getTodayDateString, toAPIDateString, fromAPIDateString } from "@/lib/date-utils";
+import {
+  submitRecommendation,
+  pollUntilCompleted,
+  getRecommendationResults,
+  type RecommendationRequest,
+  type RecommendedInventory,
+  type PollingProgress,
+} from "@/lib/recommendation-api";
+import { useAuth } from "@/contexts/auth-context";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+} from "@moving-walls/design-system";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@moving-walls/design-system";
+import { ScrollArea } from "@moving-walls/design-system";
+import { PlannerInventoryCard } from "@/components/line-items/planner-inventory-card";
+import { GeofencingMap } from "@/components/line-items/geofencing-map";
+import { ScheduleRuleEditor } from "@/components/line-items/schedule-rule-editor";
+import { 
+  ScheduleRule, 
+  createDefaultSchedule,
+  formatScheduleHours,
+  formatScheduleDays,
+  getScheduleDisplayName,
+} from "@/components/line-items/schedule-rule-types";
+import { Search, Upload, Check, Eye, Sparkles } from "lucide-react";
+import { searchInventories, fetchVenueTypes, fetchCompanies, fetchInventoryTypes, fetchInventoryDisplayFormats, fetchPanelResolutions, fetchPriceDurations, type InventoryItem, type VenueType, type Company, type InventoryTypeItem, type InventoryDisplayFormat } from "@/lib/inventory-api";
+import { ManualInventoryDrawer } from "@/components/line-items/manual-inventory-drawer";
+import { InventoryAvailabilitySection } from "@/components/line-items/inventory-availability-section";
+
+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"]),
+  invoiced: z.boolean().default(true),
+}).refine((data) => {
+  if (data.type === "percentage" && data.amount > 100) {
+    return false;
+  }
+  return true;
+}, { message: "Percentage cannot exceed 100%", path: ["amount"] });
+
+const frequencyCapSchema = z.object({
+  period: z.enum(["hour", "day", "week", "month", "lifetime"]),
+  target: z.number().min(0, "Target must be positive"),
+}).optional();
+
+const lineItemFormSchema = z.object({
+  name: z.string().min(1, "Line item name is required").max(200, "Line item name must not exceed 200 characters"),
+  status: z.enum(["DRAFT", "GENERATED", "ACTIVE", "PAUSED"]).default("DRAFT"),
+  copyFromLineItemId: z.string().optional(),
+  creativeType: z.enum(["DISPLAY", "VIDEO", "AUDIO"]).default("VIDEO"),
+  priority: z.number().min(1).max(10).default(5),
+  startDate: z.string().min(1, "Start date is required"),
+  endDate: z.string().min(1, "End date is required"),
+  currency: z.string().default("USD"),
+  mediaType: z.string().default("DOOH"),
+  geography: z.array(z.string()).default([]),
+  demographics: z.object({
+    ageGroups: z.array(z.string()).default([]),
+    genders: z.array(z.string()).default([]),
+  }).default({}),
+  venueTypes: z.array(z.string()).default([]),
+  selectedPOIs: z.array(z.string()).default([]),
+  adResolution: z.string().optional(),
+  adResolutions: z.array(z.string()).default([]),
+  adDuration: z.number().default(10),
+  sspExchange: z.string().optional(),
+  mediaOwner: z.string().optional(),
+  inventoryFormat: z.string().optional(),
+  selectedInventories: z.array(z.string()).default([]),
+  schedules: z.array(z.object({
+    id: z.string(),
+    type: z.enum(["DEFAULT", "WEEKDAY", "WEEKEND", "CUSTOM"]),
+    validity: z.object({
+      startDate: z.string(),
+      endDate: z.string(),
+    }),
+    hours: z.array(z.object({
+      start: z.number(),
+      end: z.number(),
+    })),
+    priority: z.number().optional(),
+    daysOfWeek: z.array(z.number()).optional(),
+    date: z.string().optional(),
+    name: z.string().optional(),
+  })).default([]),
+  billable: z.boolean().default(true),
+  totalBudget: z.number().min(0, "Total budget must be positive").optional(),
+  budgetConsumption: z.enum(["daily", "weekly", "monthly", "lifetime"]).default("daily"),
+  dailyBudget: z.number().min(0, "Daily budget must be positive").optional(),
+  pacing: z.enum(["even", "asap", "front-loaded"]).default("even"),
+  trafficAllocation: z.number().min(0).max(100).default(100),
+  sov: z.number().min(0).max(100).default(10),
+  maxBid: z.number().min(0, "Max bid must be positive").optional(),
+  bidType: z.enum(["cpm", "cps"]).default("cpm"),
+  auctionType: z.string().optional(),
+  customFees: z.array(customFeeSchema).default([]),
+  bidFloorBase: z.number().min(0, "Bid floor base must be positive").optional(),
+  cpmBase: z.number().min(0, "CPM base must be positive").optional(),
+  estimatedCostBase: z.number().min(0, "Estimated cost base must be positive").optional(),
+  frequencyCap: z.object({
+    period: z.enum(["hour", "day", "week", "month", "lifetime"]),
+    target: z.number().min(0),
+  }).optional(),
+  doohInventories: z.array(z.string()).default([]),
+  inventoryFormats: z.array(z.string()).default([]),
+  inventorySource: z.string().optional(),
+  weatherSignalEnabled: z.boolean().default(false),
+  weatherConditions: z.array(z.string()).default([]),
+  weatherTempEnabled: z.boolean().default(false),
+  weatherTempMin: z.number().optional(),
+  weatherTempMax: z.number().optional(),
+  weatherTempUnit: z.enum(["celsius", "fahrenheit"]).default("celsius"),
+});
+
+type LineItemFormData = z.infer<typeof lineItemFormSchema>;
+
+const AGE_GROUPS = ["18-24", "25-34", "35-44", "45-54", "55-64", "65+"];
+const GENDERS = ["Male", "Female", "Other"];
+const POI_OPTIONS = [
+  { value: "accounting", label: "Accounting" },
+  { value: "airport", label: "Airport" },
+  { value: "amusement_park", label: "Amusement Park" },
+  { value: "aquarium", label: "Aquarium" },
+  { value: "atm", label: "ATM" },
+  { value: "bank", label: "Bank" },
+  { value: "bar", label: "Bar" },
+  { value: "beauty_salon", label: "Beauty Salon" },
+  { value: "cafe", label: "Cafe" },
+  { value: "hospital", label: "Hospital" },
+  { value: "mall", label: "Shopping Mall" },
+  { value: "restaurant", label: "Restaurant" },
+  { value: "school", label: "School" },
+  { value: "university", label: "University" },
+];
+const FALLBACK_RESOLUTIONS = ["1920x1080", "1280x720", "3840x2160", "4096x2160", "1080x1920"];
+const FALLBACK_DURATIONS = [5, 10, 15, 20, 30];
+
+const WEATHER_CONDITIONS = [
+  { value: "sunny", label: "Sunny" },
+  { value: "partly_cloudy", label: "Partly Cloudy" },
+  { value: "cloudy", label: "Cloudy" },
+  { value: "rainy", label: "Rainy" },
+  { value: "stormy", label: "Stormy" },
+  { value: "snowy", label: "Snowy" },
+  { value: "windy", label: "Windy" },
+  { value: "foggy", label: "Foggy" },
+  { value: "hazy", label: "Hazy" },
+];
+
+const MAX_POIS_PER_LOCATION = 5;
+
+const COUNTRIES = [
+  { value: "Malaysia", code: "MY", currency: "MYR" },
+  { value: "Singapore", code: "SG", currency: "SGD" },
+  { value: "Japan", code: "JP", currency: "JPY" },
+  { value: "Indonesia", code: "ID", currency: "IDR" },
+  { value: "Thailand", code: "TH", currency: "THB" },
+  { value: "Philippines", code: "PH", currency: "PHP" },
+  { value: "Australia", code: "AU", currency: "AUD" },
+  { value: "United States", code: "US", currency: "USD" },
+  { value: "United Kingdom", code: "GB", currency: "GBP" },
+  { value: "Germany", code: "DE", currency: "EUR" },
+  { value: "France", code: "FR", currency: "EUR" },
+  { value: "India", code: "IN", currency: "INR" },
+  { value: "China", code: "CN", currency: "CNY" },
+  { value: "South Korea", code: "KR", currency: "KRW" },
+  { value: "UAE", code: "AE", currency: "AED" },
+];
+
+const getCountryCode = (countryName: string): string => {
+  const country = COUNTRIES.find((c) => c.value === countryName || c.code === countryName);
+  return country?.code || countryName;
+};
+
+interface AccordionSectionProps {
+  id: string;
+  title: string;
+  icon: React.ReactNode;
+  isOpen: boolean;
+  onToggle: () => void;
+  children: React.ReactNode;
+  badge?: string;
+}
+
+function AccordionSection({ id, title, icon, isOpen, onToggle, children, badge }: AccordionSectionProps) {
+  return (
+    <Collapsible open={isOpen} onOpenChange={onToggle}>
+      <CollapsibleTrigger asChild>
+        <div
+          className="flex items-center justify-between p-4 bg-mw-neutral-50 dark:bg-mw-neutral-800 rounded-lg cursor-pointer hover:bg-mw-neutral-100 dark:hover:bg-mw-neutral-700 transition-colors"
+          data-testid={`section-trigger-${id}`}
+        >
+          <div className="flex items-center gap-3">
+            <span className="text-mw-primary-500">{icon}</span>
+            <span className="font-semibold text-sm text-mw-neutral-900 dark:text-white">{title}</span>
+            {badge && (
+              <Badge variant="secondary" className="text-xs">
+                {badge}
+              </Badge>
+            )}
+          </div>
+          {isOpen ? (
+            <ChevronUp className="h-4 w-4 text-mw-neutral-500" />
+          ) : (
+            <ChevronDown className="h-4 w-4 text-mw-neutral-500" />
+          )}
+        </div>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="p-4 border border-t-0 border-mw-neutral-200 dark:border-mw-neutral-700 rounded-b-lg bg-white dark:bg-mw-neutral-900">
+          {children}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+function PlainSection({ title, icon, children, badge }: { title: string; icon: React.ReactNode; children: React.ReactNode; badge?: string }) {
+  return (
+    <div className="bg-white dark:bg-mw-neutral-900 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg">
+      <div className="flex items-center gap-3 p-4 border-b border-mw-neutral-100 dark:border-mw-neutral-800">
+        <span className="text-mw-primary-500">{icon}</span>
+        <span className="font-semibold text-sm text-mw-neutral-900 dark:text-white">{title}</span>
+        {badge && (
+          <Badge variant="secondary" className="text-xs">
+            {badge}
+          </Badge>
+        )}
+      </div>
+      <div className="p-4">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default function LineItemFormPage() {
+  usePageTitle("Line Item Form");
+  const { t } = useTranslation("lineItems");
+  const { dealId, lineItemId } = useParams<{ dealId: string; lineItemId?: string }>();
+  const [, setLocation] = useLocation();
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+  const { user } = useAuth();
+
+  const isEditMode = !!lineItemId;
+
+  const [openSections, setOpenSections] = useState<Record<string, boolean>>({
+    details: true,
+    creative: true,
+    targeting: true,
+    inventorySource: true,
+    inventorySelection: false,
+    schedule: false,
+    billing: false,
+    budget: false,
+    bidStrategy: false,
+    customFees: false,
+    pacing: false,
+    advanced: false,
+    signals: false,
+  });
+
+  const [isSaving, setIsSaving] = useState(false);
+  const [fetchedInventoryCount, setFetchedInventoryCount] = useState<number | null>(null);
+  const [isInventoryLoading, setIsInventoryLoading] = useState(false);
+  const [pollingProgress, setPollingProgress] = useState<PollingProgress | null>(null);
+  const [recommendedInventories, setRecommendedInventories] = useState<RecommendedInventory[]>([]);
+  const [recommendationRunId, setRecommendationRunId] = useState<string | null>(null);
+  const [isGeoMapSheetOpen, setIsGeoMapSheetOpen] = useState(false);
+  const [inventorySearchQuery, setInventorySearchQuery] = useState("");
+  const [geoLocations, setGeoLocations] = useState<any[]>([]);
+  const [locationSearchQuery, setLocationSearchQuery] = useState("");
+  const [enableAllLocations, setEnableAllLocations] = useState(true);
+  const [isScheduleEditorOpen, setIsScheduleEditorOpen] = useState(false);
+  const [editingSchedule, setEditingSchedule] = useState<ScheduleRule | null>(null);
+  const [editingScheduleIndex, setEditingScheduleIndex] = useState<number | null>(null);
+  const [addPOIMode, setAddPOIMode] = useState(false);
+  const [selectedLocationIndex, setSelectedLocationIndex] = useState<number | null>(null);
+  const [shouldCenterOnLocation, setShouldCenterOnLocation] = useState(false);
+  const [isManualEditOpen, setIsManualEditOpen] = useState(false);
+  const [manualEditScreens, setManualEditScreens] = useState<InventoryItem[]>([]);
+  const [manualEditLoading, setManualEditLoading] = useState(false);
+  const [manualEditSelection, setManualEditSelection] = useState<string[]>([]);
+  const [isMediaOwnerSheetOpen, setIsMediaOwnerSheetOpen] = useState(false);
+  const [mediaOwnerSearch, setMediaOwnerSearch] = useState("");
+  const [selectedMediaOwners, setSelectedMediaOwners] = useState<string[]>([]);
+  const [mediaOwnerTypeFilter, setMediaOwnerTypeFilter] = useState("all");
+  const [isSSPSheetOpen, setIsSSPSheetOpen] = useState(false);
+  const [isInventoryTypeSheetOpen, setIsInventoryTypeSheetOpen] = useState(false);
+  const [isInventoryFormatSheetOpen, setIsInventoryFormatSheetOpen] = useState(false);
+  const [isPOIDrawerOpen, setIsPOIDrawerOpen] = useState(false);
+  const [selectedPOIs, setSelectedPOIs] = useState<string[]>([]);
+  const [poiSearchQuery, setPOISearchQuery] = useState("");
+  const [localPOIs, setLocalPOIs] = useState<string[]>([]);
+  const [isVenueDrawerOpen, setIsVenueDrawerOpen] = useState(false);
+  const [venueSearchQuery, setVenueSearchQuery] = useState("");
+  const [localVenueTypes, setLocalVenueTypes] = useState<string[]>([]);
+  const [expandedVenueParents, setExpandedVenueParents] = useState<Set<string>>(new Set());
+  const [selectedInventoryTypePaths, setSelectedInventoryTypePaths] = useState<string[]>([]);
+
+  useEffect(() => {
+    form.setValue("doohInventories", selectedInventoryTypePaths);
+  }, [selectedInventoryTypePaths]);
+
+  const toggleSection = (sectionId: string) => {
+    setOpenSections((prev) => ({
+      ...prev,
+      [sectionId]: !prev[sectionId],
+    }));
+  };
+
+  const handleAddSchedule = () => {
+    const startDate = form.watch("startDate") || getTodayDateString();
+    const endDate = form.watch("endDate") || startDate;
+    const newSchedule = createDefaultSchedule(startDate, endDate);
+    setEditingSchedule(newSchedule);
+    setEditingScheduleIndex(null);
+    setIsScheduleEditorOpen(true);
+  };
+
+  const handleEditSchedule = (schedule: ScheduleRule, index: number) => {
+    setEditingSchedule({ ...schedule });
+    setEditingScheduleIndex(index);
+    setIsScheduleEditorOpen(true);
+  };
+
+  const handleSaveSchedule = (updatedSchedule: ScheduleRule) => {
+    const currentSchedules = form.watch("schedules") || [];
+    if (editingScheduleIndex !== null) {
+      const newSchedules = [...currentSchedules];
+      newSchedules[editingScheduleIndex] = updatedSchedule;
+      form.setValue("schedules", newSchedules);
+    } else {
+      form.setValue("schedules", [...currentSchedules, updatedSchedule]);
+    }
+    setIsScheduleEditorOpen(false);
+    setEditingSchedule(null);
+    setEditingScheduleIndex(null);
+  };
+
+  const handleCancelScheduleEdit = () => {
+    setIsScheduleEditorOpen(false);
+    setEditingSchedule(null);
+    setEditingScheduleIndex(null);
+  };
+
+  const handleDeleteSchedule = (index: number) => {
+    const currentSchedules = form.watch("schedules") || [];
+    form.setValue("schedules", currentSchedules.filter((_: any, i: number) => i !== index));
+  };
+
+  const removePoiFromLocation = (locationIndex: number, poiType: string) => {
+    setGeoLocations((prev) =>
+      prev.map((loc, idx) => {
+        if (idx === locationIndex) {
+          const updatedPois = (loc.properties?.pois || []).filter(
+            (p: { type: string }) => p.type !== poiType
+          );
+          return {
+            ...loc,
+            poi: updatedPois.map((p: { type: string }) => p.type),
+            properties: {
+              ...loc.properties,
+              pois: updatedPois,
+            },
+          };
+        }
+        return loc;
+      })
+    );
+  };
+
+  const { data: dealData, isLoading: isLoadingDeal } = useQuery({
+    queryKey: ["deal", dealId],
+    queryFn: async () => {
+      const response = await influenceDealsRequest<Deal>(
+        InfluenceDealsAPI.deals.get(dealId!)
+      );
+      return response;
+    },
+    enabled: !!dealId,
+  });
+
+  const { data: existingLineItem, isLoading: isLoadingLineItem } = useQuery({
+    queryKey: ["lineItem", dealId, lineItemId],
+    queryFn: async () => {
+      const response = await influenceDealsRequest<any>(
+        InfluenceDealsAPI.lineItems.get(dealId!, lineItemId!)
+      );
+      return response;
+    },
+    enabled: !!dealId && !!lineItemId,
+  });
+
+  const { data: existingLineItems } = useQuery({
+    queryKey: ["lineItems", dealId],
+    queryFn: async () => {
+      const response = await influenceDealsRequest<any>(
+        InfluenceDealsAPI.lineItems.list(dealId!)
+      );
+      return response?.data || [];
+    },
+    enabled: !!dealId,
+  });
+
+  const { data: venueTypesData = [], isLoading: isLoadingVenueTypes } = useQuery({
+    queryKey: ["venueTypes"],
+    queryFn: fetchVenueTypes,
+    staleTime: 0,
+    gcTime: 0,
+    enabled: isVenueDrawerOpen,
+  });
+
+  const { data: panelResolutions = [] } = useQuery({
+    queryKey: ["panelResolutions"],
+    queryFn: fetchPanelResolutions,
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const { data: priceDurations = [] } = useQuery({
+    queryKey: ["priceDurations"],
+    queryFn: fetchPriceDurations,
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const { data: companiesData = [], isLoading: isLoadingCompanies } = useQuery({
+    queryKey: ["companies-ssp"],
+    queryFn: fetchCompanies,
+    staleTime: 0,
+    gcTime: 0,
+    enabled: isMediaOwnerSheetOpen,
+  });
+
+  const { data: parentInventoryTypes = [], isLoading: isLoadingInventoryTypes } = useQuery({
+    queryKey: ["inventoryTypes"],
+    queryFn: () => fetchInventoryTypes(),
+    staleTime: 1000 * 60 * 10,
+  });
+
+  const { data: inventoryTypeChildren = {} } = useQuery({
+    queryKey: ["inventoryTypeChildren", parentInventoryTypes.map(p => p.path)],
+    queryFn: async () => {
+      const result: Record<string, InventoryTypeItem[]> = {};
+      await Promise.all(
+        parentInventoryTypes.map(async (parent) => {
+          const children = await fetchInventoryTypes(parent.path);
+          result[parent.path] = children;
+        })
+      );
+      return result;
+    },
+    enabled: parentInventoryTypes.length > 0,
+    staleTime: 1000 * 60 * 10,
+  });
+
+  const { data: inventoryDisplayFormats = [], isLoading: isLoadingDisplayFormats } = useQuery({
+    queryKey: ["inventoryDisplayFormats"],
+    queryFn: fetchInventoryDisplayFormats,
+    staleTime: 0,
+    gcTime: 0,
+    enabled: isInventoryFormatSheetOpen,
+  });
+
+  interface VenueTreeNode extends VenueType {
+    children: VenueTreeNode[];
+  }
+
+  const venueTypeTree = useMemo((): VenueTreeNode[] => {
+    if (!venueTypesData.length) return [];
+    const nodeMap: Record<string, VenueTreeNode> = {};
+    venueTypesData.forEach((vt) => {
+      nodeMap[vt.taxonomyId] = { ...vt, children: [] };
+    });
+    const roots: VenueTreeNode[] = [];
+    venueTypesData.forEach((vt) => {
+      const node = nodeMap[vt.taxonomyId];
+      if (vt.parentId && nodeMap[vt.parentId]) {
+        nodeMap[vt.parentId].children.push(node);
+      } else if (!vt.parentId) {
+        roots.push(node);
+      }
+    });
+    return roots;
+  }, [venueTypesData]);
+
+  const formatGroups = useMemo(() => {
+    const groups: Record<string, { groupName: string; formats: InventoryDisplayFormat[] }> = {};
+    inventoryDisplayFormats.forEach(fmt => {
+      if (!groups[fmt.inventoryTypePath]) {
+        let groupName = fmt.inventoryTypePath;
+        for (const parent of parentInventoryTypes) {
+          const children = inventoryTypeChildren[parent.path] || [];
+          const child = children.find(c => c.path === fmt.inventoryTypePath);
+          if (child) {
+            groupName = `${parent.name} - ${child.name}`;
+            break;
+          }
+        }
+        groups[fmt.inventoryTypePath] = { groupName, formats: [] };
+      }
+      groups[fmt.inventoryTypePath].formats.push(fmt);
+    });
+    return groups;
+  }, [inventoryDisplayFormats, parentInventoryTypes, inventoryTypeChildren]);
+
+  const dealMode = dealData?.mode || "DIRECT";
+  const dealCurrency = dealData?.currency || "USD";
+
+  // Fetch DSP data for PROGRAMMATIC deals to determine allowed creative types
+  const dspIds = useMemo(() => {
+    if (dealMode !== "PROGRAMMATIC") return [];
+    return [...new Set((dealData?.programmatic?.buyers || []).map((b) => b.dsp).filter(Boolean))];
+  }, [dealMode, dealData]);
+
+  const { data: dspDataList = [] } = useQuery({
+    queryKey: ["dsps-for-deal", dspIds],
+    queryFn: () => Promise.all(dspIds.map((id) => getDsp(id))),
+    enabled: dspIds.length > 0,
+  });
+
+  const allowedCreativeTypes = useMemo<string[]>(() => {
+    const all = ["DISPLAY", "VIDEO", "AUDIO"];
+    if (dealMode !== "PROGRAMMATIC" || dspDataList.length === 0) return all;
+    const union = new Set<string>();
+    dspDataList.forEach((dsp) => (dsp.creativeType || []).forEach((t) => union.add(t.toUpperCase())));
+    return all.filter((t) => union.has(t));
+  }, [dealMode, dspDataList]);
+
+  const form = useForm<LineItemFormData>({
+    resolver: zodResolver(lineItemFormSchema),
+    defaultValues: {
+      name: "",
+      status: "DRAFT",
+      creativeType: "VIDEO",
+      priority: 5,
+      startDate: getTodayDateString(),
+      endDate: getTodayDateString(),
+      currency: dealCurrency,
+      mediaType: "DOOH",
+      geography: [],
+      demographics: { ageGroups: [], genders: [] },
+      venueTypes: [],
+      selectedPOIs: [],
+      adResolutions: [],
+      adDuration: 10,
+      selectedInventories: [],
+      schedules: [],
+      billable: true,
+      budgetConsumption: "daily",
+      pacing: "even",
+      trafficAllocation: 100,
+      sov: 10,
+      bidType: "cpm",
+      customFees: [],
+      bidFloorBase: undefined,
+      cpmBase: undefined,
+      estimatedCostBase: undefined,
+    },
+  });
+
+  const { fields: feeFields, append: appendFee, remove: removeFee } = useFieldArray({
+    control: form.control,
+    name: "customFees",
+  });
+
+  useEffect(() => {
+    if (dealData?.currency) {
+      form.setValue("currency", dealData.currency);
+    }
+  }, [dealData, form]);
+
+  useEffect(() => {
+    if (existingLineItem && isEditMode) {
+      const li = existingLineItem as any;
+      form.reset({
+        name: li.name || "",
+        status: li.status || "DRAFT",
+        creativeType: li.creativeType || "VIDEO",
+        priority: li.priority || 5,
+        startDate: li.startDate || getTodayDateString(),
+        endDate: li.endDate || getTodayDateString(),
+        currency: li.currency || dealCurrency,
+        mediaType: "DOOH",
+        geography: li.targeting?.geofencing?.locations?.map((l: any) => l.name) || [],
+        demographics: li.targeting?.demographics || { ageGroups: [], genders: [] },
+        venueTypes: li.targeting?.venueTypes || [],
+        selectedPOIs: li.targeting?.selectedPOIs || [],
+        adDuration: li.duration || 10,
+        selectedInventories: li.inventories?.map((inv: any) => inv.id) || [],
+        schedules: li.schedule || [],
+        billable: li.billable !== false,
+        totalBudget: li.direct?.budgetSetup?.budgetAmount,
+        budgetConsumption: "daily",
+        dailyBudget: li.direct?.pacing?.dailyCap,
+        pacing: li.pacing?.type || "even",
+        trafficAllocation: 100,
+        sov: li.planning?.allocation?.sov || 10,
+        maxBid: li.programmatic?.bidFloor,
+        bidFloorBase: li.programmatic?.bidFloorBase,
+        cpmBase: li.pricing?.cpmBase,
+        estimatedCostBase: li.pricing?.estimatedCostBase,
+        bidType: "cpm",
+        customFees: [],
+        weatherSignalEnabled: !!(li.deliveryTargeting?.signals?.weather),
+        weatherConditions: li.deliveryTargeting?.signals?.weather?.conditions || [],
+        weatherTempEnabled: !!(li.deliveryTargeting?.signals?.weather?.temperature),
+        weatherTempMin: li.deliveryTargeting?.signals?.weather?.temperature?.min,
+        weatherTempMax: li.deliveryTargeting?.signals?.weather?.temperature?.max,
+        weatherTempUnit: li.deliveryTargeting?.signals?.weather?.temperature?.unit || "celsius",
+      });
+      
+      // Initialize selectedPOIs state from form when loading existing line item
+      setSelectedPOIs(li.targeting?.selectedPOIs || []);
+
+      // Initialize geoLocations state from existing geofencing data
+      if (li.targeting?.geofencing?.locations?.length > 0) {
+        const existingGeoLocations = li.targeting.geofencing.locations.map((loc: any, index: number) => ({
+          id: `existing-${index}`,
+          type: "Feature",
+          geometry: loc.lat && loc.lng ? {
+            type: "Point",
+            coordinates: [loc.lng, loc.lat],
+          } : undefined,
+          properties: {
+            name: loc.name || "Location",
+            center: loc.lat && loc.lng ? [loc.lng, loc.lat] : undefined,
+            included: true,
+            ...(loc.radius ? { radius: loc.radius } : {}),
+          },
+        }));
+        setGeoLocations(existingGeoLocations);
+      }
+    }
+  }, [existingLineItem, isEditMode, dealCurrency, form]);
+
+  const watchedValues = form.watch();
+
+  const forecast = useMemo(() => {
+    const selectedIds = watchedValues.selectedInventories || [];
+    const inventoryCount = selectedIds.length;
+    const startDate = watchedValues.startDate ? new Date(watchedValues.startDate) : null;
+    const endDate = watchedValues.endDate ? new Date(watchedValues.endDate) : null;
+
+    if (inventoryCount === 0 || !startDate || !endDate || startDate > endDate) {
+      return {
+        impressions: 0,
+        reach: 0,
+        frequency: 0,
+        adPlays: 0,
+        sov: watchedValues.sov || 10,
+        cpm: 0,
+        ecpm: 0,
+        totalCost: 0,
+        sot: 0,
+      };
+    }
+
+    const days = Math.max(1, Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)) + 1);
+
+    // Use real inventory data when available
+    const selectedInvs = recommendedInventories.filter(inv => selectedIds.includes(inv.inventoryId));
+
+    let estimatedImpressions: number;
+    let avgCpm: number;
+    let totalCost: number;
+
+    if (selectedInvs.length > 0) {
+      // Calculate from actual inventory data
+      const totalDailyImpressions = selectedInvs.reduce(
+        (sum, inv) => sum + (inv.forecast?.estimatedImpressions || 10000), 0
+      );
+      estimatedImpressions = totalDailyImpressions * days;
+
+      const cpmValues = selectedInvs
+        .map(inv => inv.cost?.estimatedCost
+          ? (inv.cost.estimatedCost / Math.max(1, (inv.forecast?.estimatedImpressions || 1000) / 1000))
+          : null)
+        .filter((v): v is number => v !== null && v > 0);
+
+      avgCpm = cpmValues.length > 0
+        ? Math.round((cpmValues.reduce((a, b) => a + b, 0) / cpmValues.length) * 100) / 100
+        : 15;
+
+      const totalInventoryCost = selectedInvs.reduce(
+        (sum, inv) => sum + (inv.cost?.estimatedCost || 0), 0
+      );
+      totalCost = totalInventoryCost > 0 ? totalInventoryCost * days : (estimatedImpressions / 1000) * avgCpm;
+    } else {
+      // Fallback to estimate
+      estimatedImpressions = Math.max(inventoryCount, 1) * 10000 * days;
+      avgCpm = 15;
+      totalCost = (estimatedImpressions / 1000) * avgCpm;
+    }
+
+    const estimatedReach = Math.floor(estimatedImpressions * 0.6);
+
+    return {
+      impressions: estimatedImpressions,
+      reach: estimatedReach,
+      frequency: estimatedReach > 0 ? estimatedImpressions / estimatedReach : 0,
+      adPlays: Math.max(inventoryCount, 1) * days * 100,
+      sov: watchedValues.sov || 10,
+      cpm: avgCpm,
+      ecpm: Math.round(avgCpm * 1.1 * 100) / 100,
+      totalCost,
+      sot: Math.min(100, (watchedValues.trafficAllocation || 100)),
+    };
+  }, [watchedValues, recommendedInventories]);
+
+  const suggestedMaxBid = useMemo(() => {
+    const selectedIds = watchedValues.selectedInventories || [];
+    if (selectedIds.length === 0 || recommendedInventories.length === 0) return null;
+    const selectedInvs = recommendedInventories.filter(inv => selectedIds.includes(inv.inventoryId));
+    if (selectedInvs.length === 0) return null;
+    const cpmValues = selectedInvs
+      .map(inv => inv.cost?.estimatedCost ? (inv.cost.estimatedCost / Math.max(1, (inv.forecast?.estimatedImpressions || 1000) / 1000)) : null)
+      .filter((v): v is number => v !== null && v > 0);
+    if (cpmValues.length === 0) return 15.00;
+    const avg = cpmValues.reduce((a, b) => a + b, 0) / cpmValues.length;
+    return Math.round(avg * 100) / 100;
+  }, [watchedValues.selectedInventories, recommendedInventories]);
+
+  const handleFetchInventory = useCallback(async () => {
+    const formValues = form.getValues();
+
+    if (!formValues.startDate || !formValues.endDate) {
+      toast({
+        title: "Date Required",
+        description: "Please select both start date and end date before fetching inventory",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsInventoryLoading(true);
+    setPollingProgress(null);
+    try {
+      const country = dealData?.country || "Japan";
+      
+      const recommendationRequest: RecommendationRequest = {
+        country,
+        startDate: formValues.startDate,
+        endDate: formValues.endDate,
+        budget: formValues.totalBudget,
+        goal: "IMPRESSIONS",
+        goalValue: forecast.impressions,
+        mediaOwnerIds: user?.company_id ? [user.company_id] : undefined,
+        geographyTargeting: formValues.geography.length > 0 ? {
+          cities: formValues.geography,
+        } : undefined,
+        audienceTargeting: (formValues.demographics?.ageGroups?.length || formValues.demographics?.genders?.length) ? {
+          demographics: {
+            ageGroups: formValues.demographics.ageGroups || [],
+            genders: (formValues.demographics.genders || []).map((g: string) => g.toLowerCase()),
+          },
+        } : undefined,
+      };
+
+      const campaignId = lineItemId || dealId || "new";
+      const statusResponse = await submitRecommendation(campaignId, recommendationRequest);
+      
+      let finalStatus = statusResponse;
+      if (statusResponse.status === "IN_PROGRESS") {
+        setPollingProgress({
+          status: 'IN_PROGRESS',
+          completionPercentage: statusResponse.completionPercentage ?? 0,
+          attempt: 0,
+          maxAttempts: 150,
+          elapsedSeconds: 0,
+        });
+        finalStatus = await pollUntilCompleted(
+          campaignId,
+          recommendationRequest,
+          150,
+          2000,
+          (progress) => setPollingProgress(progress)
+        );
+      }
+      
+      const results = await getRecommendationResults(finalStatus.runId, 0, 50);
+      
+      setRecommendationRunId(finalStatus.runId);
+      setRecommendedInventories(results.recommendations || []);
+      setFetchedInventoryCount(results.pagination?.totalElements || results.recommendations?.length || 0);
+      
+      toast({
+        title: "Inventory Fetched",
+        description: `Found ${results.pagination?.totalElements || results.recommendations?.length || 0} available screens matching your criteria`,
+      });
+    } catch (error) {
+      console.error("Failed to fetch inventory:", error);
+      toast({
+        title: "Error",
+        description: error instanceof Error ? error.message : "Failed to fetch inventory",
+        variant: "destructive",
+      });
+    } finally {
+      setIsInventoryLoading(false);
+      setPollingProgress(null);
+    }
+  }, [toast, form, dealData, lineItemId, dealId, forecast.impressions]);
+
+  // Keep a stable ref to handleFetchInventory so the date-watch effect
+  // always calls the latest version without needing it in the dep array
+  const handleFetchInventoryRef = useRef(handleFetchInventory);
+  useEffect(() => {
+    handleFetchInventoryRef.current = handleFetchInventory;
+  }, [handleFetchInventory]);
+
+  // Auto-fetch recommendations when both dates are set/changed.
+  // After fetch, inventories already in form.selectedInventories are
+  // automatically shown as selected because PlannerInventoryCard reads
+  // from watchedValues.selectedInventories.
+  useEffect(() => {
+    const startDate = watchedValues.startDate;
+    const endDate = watchedValues.endDate;
+    if (!startDate || !endDate) return;
+
+    const timer = setTimeout(() => {
+      handleFetchInventoryRef.current();
+    }, 500);
+
+    return () => clearTimeout(timer);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [watchedValues.startDate, watchedValues.endDate]);
+
+  const handleOpenManualEdit = useCallback(async () => {
+    setIsManualEditOpen(true);
+    setManualEditSelection(form.getValues("selectedInventories") || []);
+    setManualEditLoading(true);
+    try {
+      const result = await searchInventories({}, 1, 100);
+      setManualEditScreens(result.data || []);
+      // Total count tracked internally by ManualInventoryDrawer
+    } catch (error) {
+      console.error("Failed to load screens:", error);
+      toast({
+        title: "Error",
+        description: "Failed to load available screens",
+        variant: "destructive",
+      });
+    } finally {
+      setManualEditLoading(false);
+    }
+  }, [form, toast]);
+
+  const onSubmit = async (data: LineItemFormData) => {
+    setIsSaving(true);
+    try {
+      const targeting = {
+        demographics: data.demographics ? {
+          ageGroups: data.demographics.ageGroups || [],
+          genders: (data.demographics.genders || []).map((g: string) => g.toLowerCase()),
+        } : undefined,
+        venueTypes: data.venueTypes,
+        geofencing: geoLocations.length > 0 ? {
+          locations: geoLocations
+            .filter((loc: any) => loc.properties?.included !== false)
+            .map((loc: any) => {
+              let lat: number | undefined;
+              let lng: number | undefined;
+
+              if (loc.properties?.center) {
+                lng = loc.properties.center[0];
+                lat = loc.properties.center[1];
+              } else if (loc.geometry?.type === 'Point' && loc.geometry?.coordinates) {
+                lng = loc.geometry.coordinates[0];
+                lat = loc.geometry.coordinates[1];
+              } else if (loc.geometry?.type === 'Polygon' && loc.geometry?.coordinates?.[0]) {
+                const ring = loc.geometry.coordinates[0] as [number, number][];
+                const sumLng = ring.reduce((s: number, c: [number, number]) => s + c[0], 0);
+                const sumLat = ring.reduce((s: number, c: [number, number]) => s + c[1], 0);
+                lng = sumLng / ring.length;
+                lat = sumLat / ring.length;
+              }
+
+              return {
+                name: loc.properties?.name || "Location",
+                lat: lat ?? 0,
+                lng: lng ?? 0,
+                ...(loc.properties?.radius ? { radius: loc.properties.radius } : {}),
+              };
+            }),
+        } : undefined,
+      };
+
+      const schedulePayload = (data.schedules || []).map((s: any) => ({
+        type: s.type,
+        hours: s.hours,
+        date: s.date || s.validity?.startDate || data.startDate,
+        ...(s.priority !== undefined && { priority: s.priority }),
+        ...(s.daysOfWeek?.length && { daysOfWeek: s.daysOfWeek }),
+        ...(s.validity && { validity: s.validity }),
+      }));
+
+      const resolutions = data.adResolutions?.length > 0
+        ? data.adResolutions
+        : data.adResolution ? [data.adResolution] : [];
+
+      const lineItemPayload: any = {
+        name: data.name,
+        status: data.status,
+        startDate: data.startDate,
+        endDate: data.endDate,
+        priority: data.priority || 5,
+        currency: data.currency || dealCurrency,
+        creativeType: data.creativeType,
+        duration: data.adDuration,
+        creativeSource: "PUBLISHER",
+        timezoneId: dealData?.timezoneId || Intl.DateTimeFormat().resolvedOptions().timeZone || "Asia/Tokyo",
+        publisherId: user?.company_id || undefined,
+        targeting,
+        ...(resolutions.length > 0 && { resolutions }),
+        ...(schedulePayload.length > 0 && { schedule: schedulePayload }),
+        ...(data.customFees?.length > 0 && { customFees: data.customFees }),
+        ...(data.frequencyCap?.target && data.frequencyCap?.period && { 
+          frequencyCap: { 
+            period: data.frequencyCap.period, 
+            target: data.frequencyCap.target 
+          } 
+        }),
+        ...(data.trafficAllocation !== undefined && data.trafficAllocation !== 100 && { trafficAllocation: data.trafficAllocation }),
+        ...(data.inventorySource && { inventorySource: data.inventorySource }),
+      };
+
+      if (dealMode === "DIRECT") {
+        // Calculate cpmBase and estimatedCostBase from selected inventories
+        const selectedIds = data.selectedInventories || [];
+        const selectedInvs = recommendedInventories.filter(inv => selectedIds.includes(inv.inventoryId));
+
+        let computedCpmBase = data.cpmBase;
+        let computedEstimatedCostBase = data.estimatedCostBase;
+
+        if (selectedInvs.length > 0) {
+          // Calculate average CPM from inventory cost data
+          const cpmValues = selectedInvs
+            .map(inv => inv.cost?.estimatedCost
+              ? (inv.cost.estimatedCost / Math.max(1, (inv.forecast?.estimatedImpressions || 1000) / 1000))
+              : null)
+            .filter((v): v is number => v !== null && v > 0);
+
+          if (cpmValues.length > 0 && !computedCpmBase) {
+            computedCpmBase = Math.round((cpmValues.reduce((a, b) => a + b, 0) / cpmValues.length) * 100) / 100;
+          }
+
+          // Calculate total estimated cost from inventories
+          const totalEstimatedCost = selectedInvs
+            .reduce((sum, inv) => sum + (inv.cost?.estimatedCost || 0), 0);
+
+          if (totalEstimatedCost > 0 && !computedEstimatedCostBase) {
+            computedEstimatedCostBase = Math.round(totalEstimatedCost * 100) / 100;
+          }
+        }
+
+        lineItemPayload.direct = {
+          budgetSetup: {
+            budgetType: "TOTAL",
+            budgetAmount: data.totalBudget,
+            currency: data.currency || dealCurrency,
+          },
+          campaignGoal: {
+            type: "IMPRESSIONS",
+            targetValue: forecast.impressions,
+          },
+          pacing: {
+            type: data.pacing,
+            dailyCap: data.dailyBudget,
+          },
+          pricing: {
+            cpmBase: computedCpmBase || undefined,
+            estimatedCostBase: computedEstimatedCostBase || undefined,
+          },
+        };
+
+        if (data.weatherSignalEnabled && (data.weatherConditions?.length > 0 || data.weatherTempEnabled)) {
+          lineItemPayload.deliveryTargeting = {
+            signals: {
+              weather: {
+                ...(data.weatherConditions?.length > 0 && { conditions: data.weatherConditions }),
+                ...(data.weatherTempEnabled && (data.weatherTempMin !== undefined || data.weatherTempMax !== undefined) && {
+                  temperature: {
+                    ...(data.weatherTempMin !== undefined && { min: data.weatherTempMin }),
+                    ...(data.weatherTempMax !== undefined && { max: data.weatherTempMax }),
+                    unit: data.weatherTempUnit || "celsius",
+                  },
+                }),
+              },
+            },
+          };
+        }
+        
+      } else {
+        const dealAuctionType = dealData?.programmatic?.auctionType;
+        const formAuctionType = data.auctionType ? parseInt(data.auctionType, 10) : undefined;
+
+        lineItemPayload.pacing = { type: data.pacing.toLowerCase() };
+
+        lineItemPayload.programmatic = {
+          auctionType: formAuctionType || dealAuctionType || 3,
+          bidFloor: data.maxBid || 0,
+          bidFloorBase: data.bidFloorBase || data.maxBid || 0,
+          netCost: data.totalBudget || 0,
+          impressions: forecast.impressions,
+          impMultiplier: { type: "ALL_TIME" },
+        };
+
+        if (dealData?.dealType === "GUARANTEED") {
+          const totalDays = Math.max(1, Math.ceil((new Date(data.endDate).getTime() - new Date(data.startDate).getTime()) / (1000 * 60 * 60 * 24)));
+          const dailyThreshold = Math.ceil((forecast.impressions || 0) / totalDays) || 50;
+          lineItemPayload.programmatic.thresholdCountPerDay = dailyThreshold;
+        }
+        
+      }
+
+      const mappedPayload = mapLineItemForAPI(lineItemPayload, dealMode, dealData?.dealType);
+
+      // Build inventories array from selected inventories and recommended inventories
+      const selectedIds = data.selectedInventories || [];
+      const inventoriesPayload = selectedIds.length > 0 
+        ? selectedIds.map(id => {
+            // Find the full inventory data from recommended inventories
+            const fullInventory = recommendedInventories.find(inv => inv.inventoryId === id);
+            if (fullInventory) {
+              return {
+                id: fullInventory.inventoryId,
+                name: fullInventory.name,
+                size: fullInventory.inventoryDetails?.sizes?.[0],
+                publisher: fullInventory.inventoryDetails?.mediaOwnerId ? {
+                  id: fullInventory.inventoryDetails.mediaOwnerId,
+                  name: fullInventory.inventoryDetails.mediaOwnerName,
+                } : undefined,
+                venueType: fullInventory.inventoryDetails?.venueTypes?.[0],
+                latitude: fullInventory.inventoryDetails?.location?.locationCoordinates?.latitude,
+                longitude: fullInventory.inventoryDetails?.location?.locationCoordinates?.longitude,
+              };
+            }
+            // Fallback to just ID if not found in recommendations
+            return { id };
+          })
+        : [];
+
+      if (isEditMode && lineItemId) {
+        // For existing line items: update line item first, then update inventories separately
+        await influenceDealsRequest(
+          InfluenceDealsAPI.lineItems.update(dealId!, lineItemId),
+          "PUT",
+          mappedPayload
+        );
+
+        // Update inventories via separate endpoint if any selected
+        if (inventoriesPayload.length > 0) {
+          await influenceDealsRequest(
+            InfluenceDealsAPI.lineItems.updateInventories(dealId!, lineItemId),
+            "PUT",
+            { inventories: inventoriesPayload }
+          );
+        }
+
+        toast({
+          title: "Success",
+          description: `Line item "${data.name}" updated successfully`,
+        });
+      } else {
+        // For new line items: include inventories directly in the POST body
+        const createPayload = {
+          ...mappedPayload,
+          ...(inventoriesPayload.length > 0 && { inventories: inventoriesPayload }),
+        };
+
+        await influenceDealsRequest(
+          InfluenceDealsAPI.lineItems.create(dealId!),
+          "POST",
+          createPayload
+        );
+        toast({
+          title: "Success",
+          description: `Line item "${data.name}" created successfully`,
+        });
+      }
+
+      queryClient.invalidateQueries({ queryKey: ["lineItems", dealId] });
+      queryClient.invalidateQueries({ queryKey: ["deal-line-items", dealId] });
+      setLocation(`/deals/${dealId}/line-items`);
+    } catch (error) {
+      console.error("Failed to save line item:", error);
+      toast({
+        title: "Error",
+        description: formatAPIErrorForToast(error),
+        variant: "destructive",
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setLocation(`/deals/${dealId}/line-items`);
+  };
+
+  const insights = useMemo(() => {
+    const items = [];
+    if (!watchedValues.name) {
+      items.push({ text: t("lineItems:form.messages.noName"), color: "orange" as const });
+    }
+    if (watchedValues.selectedInventories?.length === 0) {
+      items.push({ text: t("lineItems:form.messages.noInventory"), color: "blue" as const });
+    }
+    if (watchedValues.venueTypes?.length === 0) {
+      items.push({ text: t("lineItems:form.messages.noVenue"), color: "blue" as const });
+    }
+    if (items.length === 0) {
+      items.push({ text: t("lineItems:form.messages.configLooks"), color: "green" as const });
+    }
+    return items;
+  }, [watchedValues, t]);
+
+  const quickTips = [
+    { text: t("lineItems:form.tips.startBroad"), color: "blue" as const },
+    { text: t("lineItems:form.tips.usePacing"), color: "green" as const },
+    { text: t("lineItems:form.tips.monitorSOV"), color: "orange" as const },
+  ];
+
+  if (isLoadingDeal || (isEditMode && isLoadingLineItem)) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <Loader2 className="h-8 w-8 animate-spin text-mw-primary-500" />
+      </div>
+    );
+  }
+
+  const lineItemsForCopy = (existingLineItems || []).filter((li: any) => li.id !== lineItemId);
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center px-6 py-4 border-b border-mw-neutral-200 dark:border-mw-neutral-700 bg-white dark:bg-mw-neutral-900">
+        <div className="flex items-center gap-4">
+          <Button variant="ghost" size="sm" onClick={handleCancel}>
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <div>
+            <h1 className="text-xl font-semibold text-mw-neutral-900 dark:text-white">
+              {isEditMode ? t("lineItems:form.editLineItem") : t("lineItems:form.newLineItem")}
+            </h1>
+            <p className="text-sm text-mw-neutral-500">
+              {dealData?.name || "Deal"}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-auto min-h-0">
+        <div className="p-6">
+          <div className="flex gap-6 items-start">
+            <form onSubmit={form.handleSubmit(onSubmit)} className="flex-1 min-w-0 space-y-4">
+
+              <div className="bg-white dark:bg-mw-neutral-900 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg p-4 space-y-4">
+                <div className="grid grid-cols-1 lg:grid-cols-[1fr_140px] gap-4 items-start">
+                  <div className="space-y-2">
+                    <Label htmlFor="name">{t("lineItems:form.fields.name")} *</Label>
+                    <Input
+                      id="name"
+                      placeholder="Enter line item name"
+                      maxLength={200}
+                      {...form.register("name")}
+                      data-testid="input-name"
+                    />
+                    {form.formState.errors.name && (
+                      <p className="text-xs text-red-500">{form.formState.errors.name.message}</p>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              <div className="bg-white dark:bg-mw-neutral-900 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg">
+                <div className="flex items-center gap-3 p-4 border-b border-mw-neutral-100 dark:border-mw-neutral-800">
+                  <Palette className="h-4 w-4 text-mw-primary-500" />
+                  <span className="font-semibold text-sm text-mw-neutral-900 dark:text-white">{t("lineItems:form.sections.creative")}</span>
+                </div>
+                <div className="p-4 space-y-4">
+                  <div className="space-y-2">
+                    <Label>{t("lineItems:form.fields.creativeType")} *</Label>
+                    <SelectRoot
+                      value={form.watch("creativeType")}
+                      onValueChange={(value) => form.setValue("creativeType", value as any)}
+                    >
+                      <SelectTrigger data-testid="select-creative-type">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {allowedCreativeTypes.includes("DISPLAY") && (
+                          <SelectItem value="DISPLAY">{t("lineItems:form.labels.displayType")}</SelectItem>
+                        )}
+                        {allowedCreativeTypes.includes("VIDEO") && (
+                          <SelectItem value="VIDEO">{t("lineItems:form.labels.videoType")}</SelectItem>
+                        )}
+                        {allowedCreativeTypes.includes("AUDIO") && (
+                          <SelectItem value="AUDIO">{t("lineItems:form.labels.audioType")}</SelectItem>
+                        )}
+                      </SelectContent>
+                    </SelectRoot>
+                  </div>
+                  {dealMode !== "DIRECT" && (
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label>{t("lineItems:form.fields.priority")}</Label>
+                      <span className="text-sm font-medium text-mw-neutral-700 dark:text-mw-neutral-300">{form.watch("priority")}</span>
+                    </div>
+                    <Slider
+                      value={form.watch("priority")}
+                      onChange={(val: number) => form.setValue("priority", val)}
+                      min={1}
+                      max={10}
+                      step={1}
+                      data-testid="slider-priority"
+                    />
+                    <div className="flex justify-between text-xs text-mw-neutral-500">
+                      <span>1 (Highest)</span>
+                      <span className="text-mw-neutral-400">5</span>
+                      <span>10 (Lowest)</span>
+                    </div>
+                    <p className="text-xs text-mw-neutral-500">Lower number means higher priority for ad serving</p>
+                  </div>
+                  )}
+                </div>
+              </div>
+
+              <div className="bg-white dark:bg-mw-neutral-900 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg">
+                <div className="flex items-center gap-3 p-4 border-b border-mw-neutral-100 dark:border-mw-neutral-800">
+                  <Calendar className="h-4 w-4 text-mw-primary-500" />
+                  <span className="font-semibold text-sm text-mw-neutral-900 dark:text-white">Flight Dates</span>
+                </div>
+                <div className="p-4 space-y-4">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <span className="text-sm text-mw-neutral-500">Quick select:</span>
+                    {[
+                      { label: "Next 7 days", days: 7 },
+                      { label: "Next 28 days", days: 28 },
+                      { label: "Next 30 days", days: 30 },
+                      { label: "Next 45 days", days: 45 },
+                      { label: "Next 60 days", days: 60 },
+                    ].map(({ label, days }) => (
+                      <Button
+                        key={days}
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        className="text-xs"
+                        onClick={() => {
+                          const start = new Date();
+                          const end = new Date();
+                          end.setDate(end.getDate() + days);
+                          form.setValue("startDate", start.toISOString().split("T")[0]);
+                          form.setValue("endDate", end.toISOString().split("T")[0]);
+                        }}
+                      >
+                        {label}
+                      </Button>
+                    ))}
+                  </div>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label>{t("lineItems:form.fields.startDate")} *</Label>
+                      <Input
+                        type="date"
+                        {...form.register("startDate")}
+                        data-testid="input-start-date"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label>{t("lineItems:form.fields.endDate")} *</Label>
+                      <Input
+                        type="date"
+                        {...form.register("endDate")}
+                        data-testid="input-end-date"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <PlainSection
+                title="Budget Options"
+                icon={<DollarSign className="h-4 w-4" />}
+              >
+                <div className="space-y-4">
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label>{t("lineItems:form.fields.totalBudget")} *</Label>
+                      <Input
+                        type="number"
+                        min={0}
+                        placeholder="0.00"
+                        {...form.register("totalBudget", { valueAsNumber: true })}
+                        data-testid="input-total-budget"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <div className="flex items-center gap-2">
+                        <Label>{t("lineItems:form.fields.currency")}</Label>
+                        <Badge variant="secondary" className="text-xs">From Deal</Badge>
+                      </div>
+                      <div className="relative">
+                        <div className="absolute left-3 top-1/2 -translate-y-1/2 text-mw-neutral-400">
+                          <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+                            <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+                          </svg>
+                        </div>
+                        <Input
+                          value={form.watch("currency") || "USD"}
+                          disabled
+                          className="bg-mw-neutral-100 dark:bg-mw-neutral-800 pl-10"
+                        />
+                      </div>
+                      <p className="text-xs text-mw-primary-500">Currency is inherited from the parent deal</p>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label>{t("lineItems:form.fields.budgetConsumption")}</Label>
+                      <SelectRoot
+                        value={form.watch("budgetConsumption")}
+                        onValueChange={(value) => form.setValue("budgetConsumption", value as any)}
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="daily">Daily</SelectItem>
+                          <SelectItem value="weekly">Weekly</SelectItem>
+                          <SelectItem value="monthly">Monthly</SelectItem>
+                          <SelectItem value="lifetime">Lifetime</SelectItem>
+                        </SelectContent>
+                      </SelectRoot>
+                    </div>
+                    <div className="space-y-2">
+                      <Label>{t("lineItems:form.fields.dailyBudget")}</Label>
+                      <Input
+                        type="number"
+                        min={0}
+                        placeholder="0.00"
+                        {...form.register("dailyBudget", { valueAsNumber: true })}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </PlainSection>
+
+              {dealMode === "PROGRAMMATIC" && (
+              <PlainSection
+                title="Pacing & Traffic Allocation"
+                icon={<TrendingUp className="h-4 w-4" />}
+              >
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <Label>Pacing</Label>
+                    <SelectRoot
+                      value={form.watch("pacing")}
+                      onValueChange={(value) => form.setValue("pacing", value as any)}
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="even">Even</SelectItem>
+                        <SelectItem value="asap">ASAP</SelectItem>
+                        <SelectItem value="front-loaded">Front-loaded</SelectItem>
+                      </SelectContent>
+                    </SelectRoot>
+                    <p className="text-xs text-mw-neutral-500">Controls how the budget is spent over the deal duration</p>
+                  </div>
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label>Traffic Allocation</Label>
+                      <span className="text-sm font-medium text-mw-primary-500">{form.watch("trafficAllocation")}%</span>
+                    </div>
+                    <Slider
+                      value={form.watch("trafficAllocation")}
+                      onChange={(val: number) => form.setValue("trafficAllocation", val)}
+                      min={0}
+                      max={100}
+                      step={5}
+                    />
+                    <div className="flex justify-between text-xs text-mw-neutral-400">
+                      <span>0%</span>
+                      <span>50%</span>
+                      <span>100%</span>
+                    </div>
+                    <p className="text-xs text-mw-neutral-500">Controls what percentage of eligible impressions this line item receives</p>
+                  </div>
+                </div>
+              </PlainSection>
+              )}
+
+              <PlainSection
+                title={t("lineItems:form.sections.targeting")}
+                icon={<Target className="h-4 w-4" />}
+                badge={`${(watchedValues.venueTypes?.length || 0) + (watchedValues.demographics?.ageGroups?.length || 0) + (watchedValues.demographics?.genders?.length || 0)} selected`}
+              >
+                <div className="space-y-1">
+                  <div className="flex items-center justify-between p-3 bg-mw-neutral-50 dark:bg-mw-neutral-800 rounded-lg">
+                    <div className="flex items-center gap-2">
+                      <Monitor className="h-4 w-4 text-mw-neutral-500" />
+                      <span className="text-sm">{t("lineItems:form.fields.mediaType")}</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-mw-neutral-700 dark:text-mw-neutral-300">DOOH</span>
+                      <Check className="h-4 w-4 text-mw-primary-500" />
+                    </div>
+                  </div>
+
+                  <div
+                    className="flex items-center justify-between p-3 cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 rounded-lg transition-colors"
+                    onClick={() => setIsGeoMapSheetOpen(true)}
+                  >
+                    <div className="flex items-center gap-2">
+                      <MapPin className="h-4 w-4 text-mw-neutral-500" />
+                      <span className="text-sm">{t("lineItems:form.fields.geography")}</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-mw-neutral-500">{form.watch("geography")?.length || 0} locations selected</span>
+                      <Check className="h-4 w-4 text-mw-primary-500" />
+                    </div>
+                  </div>
+
+                  <Collapsible>
+                    <CollapsibleTrigger asChild>
+                      <div className="flex items-center justify-between p-3 cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 rounded-lg transition-colors">
+                        <div className="flex items-center gap-2">
+                          <Users className="h-4 w-4 text-mw-neutral-500" />
+                          <span className="text-sm">Age Groups</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <span className="text-sm text-mw-neutral-500">{form.watch("demographics")?.ageGroups?.length || 0} selected</span>
+                          <Check className="h-4 w-4 text-mw-primary-500" />
+                        </div>
+                      </div>
+                    </CollapsibleTrigger>
+                    <CollapsibleContent>
+                      <div className="px-3 pb-3">
+                        <div className="grid grid-cols-3 gap-x-6 gap-y-2">
+                          {AGE_GROUPS.map((age) => (
+                            <div key={age} className="flex items-center gap-2">
+                              <Checkbox
+                                id={`age-${age}`}
+                                checked={form.watch("demographics")?.ageGroups?.includes(age) || false}
+                                onChange={() => {
+                                  const current = form.watch("demographics")?.ageGroups || [];
+                                  if (current.includes(age)) {
+                                    form.setValue("demographics.ageGroups", current.filter((a) => a !== age));
+                                  } else {
+                                    form.setValue("demographics.ageGroups", [...current, age]);
+                                  }
+                                }}
+                              />
+                              <Label htmlFor={`age-${age}`} className="text-sm font-normal cursor-pointer">
+                                {age}
+                              </Label>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </CollapsibleContent>
+                  </Collapsible>
+
+                  <Collapsible>
+                    <CollapsibleTrigger asChild>
+                      <div className="flex items-center justify-between p-3 cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 rounded-lg transition-colors">
+                        <div className="flex items-center gap-2">
+                          <Users className="h-4 w-4 text-mw-neutral-500" />
+                          <span className="text-sm">Gender</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <span className="text-sm text-mw-neutral-500">{form.watch("demographics")?.genders?.length || 0} selected</span>
+                          <Check className="h-4 w-4 text-mw-primary-500" />
+                        </div>
+                      </div>
+                    </CollapsibleTrigger>
+                    <CollapsibleContent>
+                      <div className="px-3 pb-3">
+                        <div className="grid grid-cols-3 gap-x-6 gap-y-2">
+                          {GENDERS.map((gender) => (
+                            <div key={gender} className="flex items-center gap-2">
+                              <Checkbox
+                                id={`gender-${gender}`}
+                                checked={form.watch("demographics")?.genders?.includes(gender) || false}
+                                onChange={() => {
+                                  const current = form.watch("demographics")?.genders || [];
+                                  if (current.includes(gender)) {
+                                    form.setValue("demographics.genders", current.filter((g) => g !== gender));
+                                  } else {
+                                    form.setValue("demographics.genders", [...current, gender]);
+                                  }
+                                }}
+                              />
+                              <Label htmlFor={`gender-${gender}`} className="text-sm font-normal cursor-pointer">
+                                {gender}
+                              </Label>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </CollapsibleContent>
+                  </Collapsible>
+
+                  <div 
+                    className="flex items-center justify-between p-3 cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 rounded-lg transition-colors"
+                    onClick={() => {
+                      setLocalPOIs([...(form.watch("selectedPOIs") || [])]);
+                      setPOISearchQuery("");
+                      setIsPOIDrawerOpen(true);
+                    }}
+                  >
+                    <div className="flex items-center gap-2">
+                      <MapPin className="h-4 w-4 text-mw-neutral-500" />
+                      <span className="text-sm">POI Targeting</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-mw-neutral-500">{form.watch("selectedPOIs")?.length || 0} POIs selected</span>
+                      <ChevronDown className="h-4 w-4 text-mw-neutral-400" />
+                    </div>
+                  </div>
+
+                  <div 
+                    className="flex items-center justify-between p-3 cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 rounded-lg transition-colors"
+                    onClick={() => {
+                      setLocalVenueTypes([...(form.watch("venueTypes") || [])]);
+                      setVenueSearchQuery("");
+                      setIsVenueDrawerOpen(true);
+                    }}
+                  >
+                    <div className="flex items-center gap-2">
+                      <Layers className="h-4 w-4 text-mw-neutral-500" />
+                      <span className="text-sm">{t("lineItems:form.fields.venueType")}</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-mw-neutral-500">{form.watch("venueTypes")?.length || 0} venue types selected</span>
+                      <ChevronDown className="h-4 w-4 text-mw-neutral-400" />
+                    </div>
+                  </div>
+
+                  <Collapsible>
+                    <CollapsibleTrigger asChild>
+                      <div className="flex items-center justify-between p-3 cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 rounded-lg transition-colors">
+                        <div className="flex items-center gap-2">
+                          <Monitor className="h-4 w-4 text-mw-neutral-500" />
+                          <span className="text-sm">{t("lineItems:form.fields.adResolution")}</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <span className="text-sm text-mw-neutral-500">{form.watch("adResolutions")?.length || 0} Ad Resolutions are selected</span>
+                          <Check className="h-4 w-4 text-mw-primary-500" />
+                        </div>
+                      </div>
+                    </CollapsibleTrigger>
+                    <CollapsibleContent>
+                      <div className="px-3 pb-3">
+                        <div className="grid grid-cols-5 gap-x-4 gap-y-2">
+                          {(panelResolutions.length > 0 ? panelResolutions : FALLBACK_RESOLUTIONS).map((res) => (
+                            <div key={res} className="flex items-center gap-2">
+                              <Checkbox
+                                id={`res-${res}`}
+                                checked={form.watch("adResolutions")?.includes(res) || form.watch("adResolution") === res}
+                                onChange={() => {
+                                  const current = form.watch("adResolutions") || [];
+                                  if (current.includes(res)) {
+                                    form.setValue("adResolutions", current.filter((r: string) => r !== res));
+                                  } else {
+                                    form.setValue("adResolutions", [...current, res]);
+                                  }
+                                  const updated = current.includes(res) ? current.filter((r: string) => r !== res) : [...current, res];
+                                  form.setValue("adResolution", updated[0] || "");
+                                }}
+                              />
+                              <Label htmlFor={`res-${res}`} className="text-sm font-normal cursor-pointer">
+                                {res}
+                              </Label>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </CollapsibleContent>
+                  </Collapsible>
+
+                  <Collapsible>
+                    <CollapsibleTrigger asChild>
+                      <div className="flex items-center justify-between p-3 cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 rounded-lg transition-colors">
+                        <div className="flex items-center gap-2">
+                          <Clock className="h-4 w-4 text-mw-neutral-500" />
+                          <span className="text-sm">{t("lineItems:form.fields.adDuration")}</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <span className="text-sm text-mw-neutral-500">{form.watch("adDuration")}s selected</span>
+                          <Check className="h-4 w-4 text-mw-primary-500" />
+                        </div>
+                      </div>
+                    </CollapsibleTrigger>
+                    <CollapsibleContent>
+                      <div className="px-3 pb-3">
+                        <div className="flex items-center gap-2 flex-wrap">
+                          {(priceDurations.length > 0 ? priceDurations : FALLBACK_DURATIONS).map((d) => (
+                            <Button
+                              key={d}
+                              type="button"
+                              variant={form.watch("adDuration") === d ? "primary" : "outline"}
+                              size="sm"
+                              onClick={() => form.setValue("adDuration", d)}
+                            >
+                              {d}s
+                            </Button>
+                          ))}
+                          <span className="text-sm text-mw-neutral-500 ml-2">Custom:</span>
+                          <Input
+                            type="number"
+                            min={1}
+                            className="w-16 h-8 text-sm"
+                            value={!(priceDurations.length > 0 ? priceDurations : FALLBACK_DURATIONS).includes(form.watch("adDuration")) ? form.watch("adDuration") : ""}
+                            onChange={(e) => {
+                              const val = parseInt(e.target.value);
+                              if (val > 0) form.setValue("adDuration", val);
+                            }}
+                            placeholder="10"
+                          />
+                        </div>
+                      </div>
+                    </CollapsibleContent>
+                  </Collapsible>
+                </div>
+              </PlainSection>
+
+              <PlainSection
+                title="DOOH Inventory Type"
+                icon={<Monitor className="h-4 w-4" />}
+              >
+                <div className="space-y-1">
+                  <div
+                    className="flex items-center justify-between p-3 cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 rounded-lg transition-colors"
+                    onClick={() => setIsSSPSheetOpen(true)}
+                  >
+                    <div className="flex items-center gap-2">
+                      <Server className="h-4 w-4 text-mw-neutral-500" />
+                      <span className="text-sm">SSP / Exchange</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-mw-neutral-500">Influence SSP</span>
+                      <Check className="h-4 w-4 text-mw-primary-500" />
+                    </div>
+                  </div>
+
+                  <div
+                    className="flex items-center justify-between p-3 cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 rounded-lg transition-colors"
+                    onClick={() => setIsMediaOwnerSheetOpen(true)}
+                  >
+                    <div className="flex items-center gap-2">
+                      <Monitor className="h-4 w-4 text-mw-neutral-500" />
+                      <span className="text-sm">Media Owner</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-mw-neutral-500">{selectedMediaOwners.length} Media Owners selected</span>
+                      <ChevronDown className="h-4 w-4 text-mw-neutral-400" />
+                    </div>
+                  </div>
+
+                  <div
+                    className="flex items-center justify-between p-3 cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 rounded-lg transition-colors"
+                    onClick={() => setIsInventoryTypeSheetOpen(true)}
+                  >
+                    <div className="flex items-center gap-2">
+                      <Monitor className="h-4 w-4 text-mw-neutral-500" />
+                      <span className="text-sm">Inventory Type</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-mw-neutral-500">{selectedInventoryTypePaths.length} types selected</span>
+                      <ChevronDown className="h-4 w-4 text-mw-neutral-400" />
+                    </div>
+                  </div>
+
+                  <div
+                    className="flex items-center justify-between p-3 cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 rounded-lg transition-colors"
+                    onClick={() => setIsInventoryFormatSheetOpen(true)}
+                  >
+                    <div className="flex items-center gap-2">
+                      <Layers className="h-4 w-4 text-mw-neutral-500" />
+                      <span className="text-sm">Inventory Format</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-mw-neutral-500">{form.watch("inventoryFormats")?.length || 0} formats selected</span>
+                      <ChevronDown className="h-4 w-4 text-mw-neutral-400" />
+                    </div>
+                  </div>
+                </div>
+              </PlainSection>
+
+              <PlainSection
+                title="AI Inventory Recommendations"
+                icon={<Sparkles className="h-4 w-4" />}
+                badge={fetchedInventoryCount !== null ? `${watchedValues.selectedInventories?.length || 0}/${fetchedInventoryCount} selected` : undefined}
+              >
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <p className="text-sm text-mw-neutral-500">Get AI-powered inventory suggestions based on your campaign parameters</p>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={handleOpenManualEdit}
+                      className="gap-2"
+                    >
+                      <Pencil className="h-4 w-4" />
+                      Manual Edit
+                    </Button>
+                  </div>
+
+                  {(!watchedValues.startDate || !watchedValues.endDate) && (
+                    <div className="flex items-center gap-3 p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-800">
+                      <Calendar className="h-5 w-5 text-amber-500 flex-shrink-0" />
+                      <div>
+                        <p className="text-sm font-medium text-amber-700 dark:text-amber-400">Start & End dates required</p>
+                        <p className="text-xs text-amber-600 dark:text-amber-500 mt-0.5">Please set both start and end dates in the Flight Dates section before fetching inventory recommendations.</p>
+                      </div>
+                    </div>
+                  )}
+
+                  <div className="flex items-center gap-3">
+                    <Button
+                      type="button"
+                      onClick={handleFetchInventory}
+                      disabled={isInventoryLoading || !watchedValues.startDate || !watchedValues.endDate}
+                      variant="primary"
+                      className="bg-emerald-600 hover:bg-emerald-700 text-white border-emerald-600"
+                    >
+                      {isInventoryLoading && !pollingProgress ? (
+                        <>
+                          <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                          Submitting...
+                        </>
+                      ) : !isInventoryLoading ? (
+                        <>
+                          <Monitor className="h-4 w-4 mr-2" />
+                          Fetch Available Inventory
+                        </>
+                      ) : (
+                        <>
+                          <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                          {pollingProgress?.completionPercentage ?? 0}%
+                        </>
+                      )}
+                    </Button>
+                    {fetchedInventoryCount !== null && !isInventoryLoading && (
+                      <span className="text-sm text-mw-neutral-500">
+                        {watchedValues.selectedInventories?.length || 0} of {fetchedInventoryCount} screens selected
+                      </span>
+                    )}
+                  </div>
+
+                  {isInventoryLoading && pollingProgress && (
+                    <div className="space-y-2">
+                      <div className="flex items-center justify-between text-xs text-mw-neutral-500">
+                        <span className="flex items-center gap-2">
+                          <Loader2 className="h-3 w-3 animate-spin text-emerald-500" />
+                          Analyzing inventory...
+                        </span>
+                        <span>{pollingProgress.completionPercentage}% complete</span>
+                      </div>
+                      <div className="w-full h-2 bg-mw-neutral-100 dark:bg-mw-neutral-800 rounded-full overflow-hidden">
+                        <div
+                          className="h-full bg-emerald-500 rounded-full transition-all duration-500 ease-out"
+                          style={{ width: `${pollingProgress.completionPercentage}%` }}
+                        />
+                      </div>
+                      <p className="text-xs text-mw-neutral-400">
+                        {pollingProgress.elapsedSeconds > 0 
+                          ? `Elapsed: ${pollingProgress.elapsedSeconds}s`
+                          : 'Starting recommendation engine...'}
+                      </p>
+                    </div>
+                  )}
+
+                  {recommendedInventories.length > 0 && (
+                    <div className="border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg overflow-hidden">
+                      <div className="flex items-center gap-3 p-3 bg-mw-neutral-50 dark:bg-mw-neutral-800 border-b border-mw-neutral-200 dark:border-mw-neutral-700">
+                        <span className="text-sm text-mw-neutral-500 whitespace-nowrap">{recommendedInventories.length} recommendations</span>
+                        <div className="relative flex-1">
+                          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+                          <Input
+                            placeholder="Search inventories..."
+                            value={inventorySearchQuery}
+                            onChange={(e) => setInventorySearchQuery(e.target.value)}
+                            className="pl-9 h-9"
+                          />
+                        </div>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          onClick={handleFetchInventory}
+                          disabled={isInventoryLoading}
+                        >
+                          Refresh
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="primary"
+                          size="sm"
+                          onClick={() => {
+                            const allIds = recommendedInventories.map(inv => inv.inventoryId);
+                            form.setValue("selectedInventories", allIds);
+                          }}
+                          className="gap-1 bg-emerald-600 hover:bg-emerald-700 text-white border-emerald-600"
+                        >
+                          <Plus className="h-3 w-3" />
+                          Add All
+                        </Button>
+                      </div>
+
+                      <div className="max-h-[500px] overflow-y-auto p-3 space-y-3">
+                        {recommendedInventories
+                          .filter(inv => {
+                            if (!inventorySearchQuery) return true;
+                            const query = inventorySearchQuery.toLowerCase();
+                            return (
+                              inv.name?.toLowerCase().includes(query) ||
+                              inv.inventoryId?.toLowerCase().includes(query) ||
+                              inv.inventoryDetails?.address?.toLowerCase().includes(query) ||
+                              inv.inventoryDetails?.mediaOwnerName?.toLowerCase().includes(query) ||
+                              inv.referenceId?.toLowerCase().includes(query)
+                            );
+                          })
+                          .map((inventory) => (
+                            <PlannerInventoryCard
+                              key={inventory.inventoryId}
+                              id={inventory.inventoryId}
+                              name={inventory.name}
+                              referenceId={inventory.referenceId}
+                              location={inventory.inventoryDetails?.address}
+                              owner={inventory.inventoryDetails?.mediaOwnerName}
+                              publisherName={inventory.inventoryDetails?.mediaOwnerName}
+                              isSelected={watchedValues.selectedInventories?.includes(inventory.inventoryId) || false}
+                              onToggleSelect={() => {
+                                const current = form.getValues("selectedInventories") || [];
+                                if (current.includes(inventory.inventoryId)) {
+                                  form.setValue("selectedInventories", current.filter(id => id !== inventory.inventoryId));
+                                } else {
+                                  form.setValue("selectedInventories", [...current, inventory.inventoryId]);
+                                }
+                              }}
+                              finalScore={inventory.finalScore}
+                              componentScores={inventory.componentScores ? {
+                                geoFit: inventory.componentScores.geoFit,
+                                audienceFit: inventory.componentScores.audienceFit,
+                                availability: inventory.componentScores.availability,
+                                budgetFit: inventory.componentScores.budgetFit,
+                                brandFit: inventory.componentScores.brandFit,
+                                qualityFit: inventory.componentScores.qualityFit,
+                                timeFit: inventory.componentScores.timeFit,
+                              } : undefined}
+                              availability={inventory.availability}
+                              why={inventory.why}
+                              impressions={inventory.forecast?.estimatedImpressions}
+                              reach={inventory.forecast?.estimatedReach}
+                              estimatedCost={inventory.cost?.estimatedCost}
+                              currency={inventory.cost?.currency || watchedValues.currency || "USD"}
+                              tags={inventory.inventoryDetails?.venueTypes?.slice(0, 3).map(type => ({
+                                label: type,
+                                variant: "outline" as const,
+                              })) || []}
+                              showPlanningData={false}
+                            />
+                          ))}
+                      </div>
+
+                      <div className="flex items-center justify-between p-3 bg-mw-neutral-50 dark:bg-mw-neutral-800 border-t border-mw-neutral-200 dark:border-mw-neutral-700">
+                        <p className="text-sm text-mw-neutral-600 dark:text-mw-neutral-400">
+                          {watchedValues.selectedInventories?.length || 0} screens selected
+                          {recommendationRunId && <span className="text-xs ml-2 text-mw-neutral-400">(Run: {recommendationRunId.slice(0, 8)}...)</span>}
+                        </p>
+                      </div>
+                    </div>
+                  )}
+
+                  {recommendedInventories.length === 0 && fetchedInventoryCount === null && (
+                    <div className="text-center py-8 border border-dashed border-mw-neutral-300 dark:border-mw-neutral-600 rounded-lg">
+                      <Monitor className="h-10 w-10 mx-auto mb-3 text-mw-neutral-400" />
+                      <p className="text-sm text-mw-neutral-500">No inventory fetched yet</p>
+                      <p className="text-xs text-mw-neutral-400 mt-1">Configure your targeting criteria and click "Fetch Available Inventory"</p>
+                    </div>
+                  )}
+
+                  {recommendedInventories.length === 0 && fetchedInventoryCount !== null && fetchedInventoryCount === 0 && (
+                    <div className="p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-800">
+                      <p className="text-sm text-amber-700 dark:text-amber-400">
+                        No screens found matching your criteria. Try adjusting your targeting settings.
+                      </p>
+                    </div>
+                  )}
+
+                  {fetchedInventoryCount !== null && fetchedInventoryCount > 0 && recommendedInventories.length === 0 && (
+                    <div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
+                      <p className="text-sm text-green-700 dark:text-green-400">
+                        Found <strong>{fetchedInventoryCount}</strong> matching screens
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </PlainSection>
+
+              {(watchedValues.selectedInventories?.length || 0) > 0 && (
+                <InventoryAvailabilitySection
+                  selectedScreenIds={watchedValues.selectedInventories || []}
+                  startDate={watchedValues.startDate}
+                  endDate={watchedValues.endDate}
+                />
+              )}
+
+              <PlainSection
+                title="Day Parting"
+                icon={<Clock className="h-4 w-4" />}
+              >
+                <div className="space-y-4">
+                  <p className="text-sm text-mw-neutral-500">Set specific days and hours when ads should run</p>
+                  
+                  <Collapsible defaultOpen>
+                    <CollapsibleTrigger asChild>
+                      <div className="flex items-center justify-between p-3 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800">
+                        <div className="flex items-center gap-2">
+                          <Clock className="h-4 w-4 text-mw-neutral-500" />
+                          <span className="text-sm font-medium">{t("lineItems:form.fields.schedules")}</span>
+                        </div>
+                        <span className="text-sm text-mw-neutral-500">
+                          {form.watch("schedules")?.length || 0} {t("lineItems:form.fields.configured")}
+                        </span>
+                      </div>
+                    </CollapsibleTrigger>
+                    <CollapsibleContent>
+                      <div className="p-4 border border-t-0 border-mw-neutral-200 dark:border-mw-neutral-700 rounded-b-lg -mt-1 space-y-3">
+                        {(!form.watch("schedules") || form.watch("schedules")?.length === 0) ? (
+                          <p className="text-sm text-mw-neutral-500">
+                            No schedules configured. Line item will run all day.
+                          </p>
+                        ) : (
+                          <div className="space-y-2">
+                            {form.watch("schedules")?.map((schedule: ScheduleRule, index: number) => (
+                              <div key={schedule.id || index} className="flex items-center justify-between p-3 bg-mw-neutral-50 dark:bg-mw-neutral-800 rounded-lg">
+                                <div className="flex items-center gap-4">
+                                  <span className="text-sm font-medium">{getScheduleDisplayName(schedule, index)}</span>
+                                  <span className="text-sm text-mw-neutral-500">
+                                    {formatScheduleDays(schedule)} • {formatScheduleHours(schedule)}
+                                  </span>
+                                </div>
+                                <div className="flex items-center gap-1">
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="sm"
+                                    onClick={() => handleEditSchedule(schedule, index)}
+                                  >
+                                    <Pencil className="h-4 w-4 text-mw-neutral-500" />
+                                  </Button>
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="sm"
+                                    onClick={() => handleDeleteSchedule(index)}
+                                  >
+                                    <Trash2 className="h-4 w-4 text-red-500" />
+                                  </Button>
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          onClick={handleAddSchedule}
+                          className="w-full"
+                        >
+                          <Plus className="h-4 w-4 mr-2" />
+                          Add Schedule
+                        </Button>
+                      </div>
+                    </CollapsibleContent>
+                  </Collapsible>
+                </div>
+              </PlainSection>
+
+
+              {dealMode === "PROGRAMMATIC" && (
+              <PlainSection
+                title={t("lineItems:form.sections.bidStrategy")}
+                icon={<TrendingUp className="h-4 w-4" />}
+              >
+                <div className="space-y-4">
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label>Max Bid ($)</Label>
+                      <Input
+                        type="number"
+                        min={0}
+                        placeholder="0.00"
+                        {...form.register("maxBid", { valueAsNumber: true })}
+                      />
+                      {suggestedMaxBid !== null ? (
+                        <div className="flex items-center gap-2 p-2 rounded-md bg-mw-neutral-50 dark:bg-mw-neutral-800 border border-mw-neutral-200 dark:border-mw-neutral-700">
+                          <span className="text-sm text-mw-neutral-600 dark:text-mw-neutral-400 flex-1">
+                            Suggested: <span className="font-medium text-mw-neutral-900 dark:text-white">${suggestedMaxBid.toFixed(2)}</span>
+                            <span className="text-xs ml-1">({watchedValues.selectedInventories?.length || 0} selected screens avg)</span>
+                          </span>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            onClick={() => form.setValue("maxBid", suggestedMaxBid)}
+                          >
+                            Apply
+                          </Button>
+                        </div>
+                      ) : (
+                        <p className="text-xs text-mw-primary-500">Maximum bid amount. Select inventory or screens to see a suggested rate.</p>
+                      )}
+                    </div>
+                    <div className="space-y-2">
+                      <Label>{t("lineItems:form.fields.bidType")}</Label>
+                      <SelectRoot
+                        value={form.watch("bidType")}
+                        onValueChange={(value) => form.setValue("bidType", value as any)}
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="cpm">CPM</SelectItem>
+                          <SelectItem value="cps">CPS</SelectItem>
+                        </SelectContent>
+                      </SelectRoot>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-2 gap-4 items-start">
+                    <div className="space-y-2">
+                      <div className="flex items-center gap-2">
+                        <Label>{t("lineItems:form.fields.auctionType")}</Label>
+                        <Badge variant="secondary" className="text-xs flex items-center gap-1">
+                          <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+                            <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+                          </svg>
+                          Auto
+                        </Badge>
+                      </div>
+                      <Input
+                        value={dealData?.dealType === "GUARANTEED" ? "Fixed Price" : "First Price Auction"}
+                        disabled
+                        className="bg-mw-neutral-100 dark:bg-mw-neutral-800"
+                      />
+                      <p className="text-xs text-mw-primary-500">Determined by the deal type</p>
+                    </div>
+                  </div>
+                </div>
+              </PlainSection>
+              )}
+
+              <PlainSection
+                title={t("lineItems:form.sections.customFees")}
+                icon={<DollarSign className="h-4 w-4" />}
+                badge={feeFields.length > 0 ? `${feeFields.length} fees` : undefined}
+              >
+                <div className="space-y-4">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => appendFee({ name: "", amount: 0, type: "fixed", invoiced: true })}
+                    className="gap-2"
+                  >
+                    <Plus className="h-4 w-4" />
+                    {t("lineItems:form.fields.addFee")}
+                  </Button>
+                  {feeFields.map((field, index) => (
+                    <div key={field.id} className="grid grid-cols-5 gap-2 items-end">
+                      <div className="space-y-1">
+                        <Label className="text-xs">Name</Label>
+                        <Input
+                          placeholder="Fee name"
+                          {...form.register(`customFees.${index}.name`)}
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-xs">Amount</Label>
+                        <Input
+                          type="number"
+                          min={0}
+                          placeholder="0"
+                          {...form.register(`customFees.${index}.amount`, { valueAsNumber: true })}
+                        />
+                        {form.watch(`customFees.${index}.type`) === "percentage" && (
+                          <p className="text-xs text-mw-neutral-400">Max 100%</p>
+                        )}
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-xs">Type</Label>
+                        <SelectRoot
+                          value={form.watch(`customFees.${index}.type`)}
+                          onValueChange={(value) => form.setValue(`customFees.${index}.type`, value as any)}
+                        >
+                          <SelectTrigger>
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="fixed">Fixed</SelectItem>
+                            <SelectItem value="percentage">Percentage</SelectItem>
+                          </SelectContent>
+                        </SelectRoot>
+                      </div>
+                      <div className="flex items-center space-x-2 pb-2">
+                        <Checkbox
+                          checked={form.watch(`customFees.${index}.invoiced`)}
+                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => form.setValue(`customFees.${index}.invoiced`, e.target.checked)}
+                        />
+                        <Label className="text-xs">Invoiced</Label>
+                      </div>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => removeFee(index)}
+                      >
+                        <Trash2 className="h-4 w-4 text-red-500" />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              </PlainSection>
+
+              <PlainSection
+                title={t("lineItems:form.sections.advanced")}
+                icon={<Settings className="h-4 w-4" />}
+              >
+                <div className="space-y-4">
+                  <div>
+                    <Label className="text-sm font-medium mb-3 block">Frequency Cap</Label>
+                    <div className="grid grid-cols-2 gap-4">
+                      <div className="space-y-2">
+                        <Label className="text-sm text-mw-neutral-500">Ad Plays</Label>
+                        <Input
+                          type="number"
+                          min={0}
+                          placeholder="e.g., 10"
+                          value={form.watch("frequencyCap.target") || ""}
+                          onChange={(e) => {
+                            const value = e.target.value ? Number(e.target.value) : undefined;
+                            const currentPeriod = form.watch("frequencyCap.period") || "day";
+                            if (value !== undefined) {
+                              form.setValue("frequencyCap", { period: currentPeriod, target: value });
+                            } else {
+                              form.setValue("frequencyCap", undefined);
+                            }
+                          }}
+                        />
+                        <p className="text-xs text-mw-primary-500">Maximum ad plays per inventory per period</p>
+                      </div>
+                      <div className="space-y-2">
+                        <Label className="text-sm text-mw-neutral-500">Period</Label>
+                        <SelectRoot
+                          value={form.watch("frequencyCap.period") || ""}
+                          onValueChange={(value) => {
+                            const currentTarget = form.watch("frequencyCap.target") || 0;
+                            form.setValue("frequencyCap", { period: value as any, target: currentTarget });
+                          }}
+                        >
+                          <SelectTrigger>
+                            <SelectValue placeholder="Select period" />
+                          </SelectTrigger>
+                          <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>
+                        </SelectRoot>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </PlainSection>
+
+
+              {dealMode === "DIRECT" && <PlainSection
+                title="Delivery Signals"
+                icon={<Cloud className="h-4 w-4" />}
+              >
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between p-4 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg">
+                    <div>
+                      <p className="text-sm font-medium">Weather Targeting</p>
+                      <p className="text-xs text-mw-neutral-500">Trigger ads based on weather conditions</p>
+                    </div>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      role="switch"
+                      aria-checked={!!form.watch("weatherSignalEnabled")}
+                      onClick={() => {
+                        const newVal = !form.watch("weatherSignalEnabled");
+                        form.setValue("weatherSignalEnabled", newVal);
+                        if (!newVal) {
+                          form.setValue("weatherConditions", []);
+                          form.setValue("weatherTempEnabled", false);
+                          form.setValue("weatherTempMin", undefined);
+                          form.setValue("weatherTempMax", undefined);
+                        }
+                      }}
+                      className={cn(
+                        "relative inline-flex h-6 w-11 items-center rounded-full",
+                        form.watch("weatherSignalEnabled") ? "bg-mw-primary-500" : "bg-mw-neutral-300"
+                      )}
+                    >
+                      <span
+                        className={cn(
+                          "inline-block h-4 w-4 transform rounded-full bg-white transition-transform",
+                          form.watch("weatherSignalEnabled") ? "translate-x-6" : "translate-x-1"
+                        )}
+                      />
+                    </Button>
+                  </div>
+
+                  {form.watch("weatherSignalEnabled") && (
+                    <>
+                      <div className="space-y-2">
+                        <Label>Weather Conditions</Label>
+                        <div className="grid grid-cols-3 gap-2">
+                          {WEATHER_CONDITIONS.map((condition) => {
+                            const selected = (form.watch("weatherConditions") || []).includes(condition.value);
+                            return (
+                              <Button
+                                key={condition.value}
+                                type="button"
+                                variant={selected ? "primary" : "outline"}
+                                size="sm"
+                                onClick={() => {
+                                  const current = form.watch("weatherConditions") || [];
+                                  if (selected) {
+                                    form.setValue("weatherConditions", current.filter((c: string) => c !== condition.value));
+                                  } else {
+                                    form.setValue("weatherConditions", [...current, condition.value]);
+                                  }
+                                }}
+                              >
+                                {condition.label}
+                              </Button>
+                            );
+                          })}
+                        </div>
+                      </div>
+
+                      <div className="space-y-3 p-4 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg">
+                        <div className="flex items-center justify-between">
+                          <Label>Temperature Range</Label>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            role="switch"
+                            aria-checked={!!form.watch("weatherTempEnabled")}
+                            onClick={() => {
+                              const newVal = !form.watch("weatherTempEnabled");
+                              form.setValue("weatherTempEnabled", newVal);
+                              if (!newVal) {
+                                form.setValue("weatherTempMin", undefined);
+                                form.setValue("weatherTempMax", undefined);
+                              }
+                            }}
+                            className={cn(
+                              "relative inline-flex h-5 w-9 items-center rounded-full",
+                              form.watch("weatherTempEnabled") ? "bg-mw-primary-500" : "bg-mw-neutral-300"
+                            )}
+                          >
+                            <span
+                              className={cn(
+                                "inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform",
+                                form.watch("weatherTempEnabled") ? "translate-x-4" : "translate-x-0.5"
+                              )}
+                            />
+                          </Button>
+                        </div>
+                        {form.watch("weatherTempEnabled") && (
+                          <div className="grid grid-cols-3 gap-3">
+                            <div className="space-y-1">
+                              <Label className="text-xs">Min</Label>
+                              <Input
+                                type="number"
+                                placeholder="e.g. 25"
+                                {...form.register("weatherTempMin", { valueAsNumber: true })}
+                              />
+                            </div>
+                            <div className="space-y-1">
+                              <Label className="text-xs">Max</Label>
+                              <Input
+                                type="number"
+                                placeholder="e.g. 35"
+                                {...form.register("weatherTempMax", { valueAsNumber: true })}
+                              />
+                            </div>
+                            <div className="space-y-1">
+                              <Label className="text-xs">Unit</Label>
+                              <SelectRoot
+                                value={form.watch("weatherTempUnit") || "celsius"}
+                                onValueChange={(value) => form.setValue("weatherTempUnit", value as "celsius" | "fahrenheit")}
+                              >
+                                <SelectTrigger>
+                                  <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="celsius">Celsius</SelectItem>
+                                  <SelectItem value="fahrenheit">Fahrenheit</SelectItem>
+                                </SelectContent>
+                              </SelectRoot>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </>
+                  )}
+                </div>
+              </PlainSection>}
+
+            </form>
+
+            <div className="hidden lg:block w-[280px] flex-shrink-0 self-start sticky top-6 space-y-4">
+                <FormInsights
+                  title={t("lineItems:form.labels.formInsights")}
+                  insights={insights}
+                  className="w-full"
+                />
+                <Card className="w-full">
+                  <CardHeader className="pb-2">
+                    <CardTitle className="text-sm font-semibold flex items-center gap-2">
+                      <Sparkles className="h-4 w-4 text-mw-primary-500" />
+                      Quick Tips
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="pt-0">
+                    <ul className="space-y-2">
+                      {quickTips.map((tip, idx) => (
+                        <li key={idx} className="flex items-start gap-2 text-xs text-mw-neutral-600 dark:text-mw-neutral-400">
+                          <span className={cn(
+                            "mt-1 h-1.5 w-1.5 rounded-full flex-shrink-0",
+                            tip.color === "blue" ? "bg-blue-500" :
+                            tip.color === "green" ? "bg-green-500" :
+                            "bg-orange-500"
+                          )} />
+                          {tip.text}
+                        </li>
+                      ))}
+                    </ul>
+                  </CardContent>
+                </Card>
+                <CampaignForecastPanel
+                  forecast={forecast}
+                  currency={dealCurrency}
+                />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-shrink-0 bg-white dark:bg-mw-neutral-900 border-t border-mw-neutral-200 dark:border-mw-neutral-700 px-6 py-3">
+        <div className="flex items-center justify-end gap-3">
+          <Button type="button" variant="outline" onClick={handleCancel}>
+            {t("common:actions.cancel")}
+          </Button>
+          <Button type="button" onClick={form.handleSubmit(onSubmit, (errors) => {
+            console.error("Form validation errors:", errors);
+            const firstError = Object.entries(errors)[0];
+            if (firstError) {
+              const [field, error] = firstError;
+              toast({
+                title: "Validation Error",
+                description: `${field}: ${(error as any)?.message || "Invalid value"}`,
+                variant: "destructive",
+              });
+            }
+          })} disabled={isSaving}>
+            {isSaving ? (
+              <>
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                {t("lineItems:form.saving")}
+              </>
+            ) : isEditMode ? (
+              t("lineItems:form.saveChanges")
+            ) : (
+              t("lineItems:form.createLineItem")
+            )}
+          </Button>
+        </div>
+      </div>
+
+      {/* Geography Map Sheet */}
+      <Sheet open={isGeoMapSheetOpen} onOpenChange={setIsGeoMapSheetOpen}>
+        <SheetContent side="right" className="w-full sm:max-w-[90vw] lg:max-w-[80vw] overflow-hidden flex flex-col p-0">
+          <div className="flex h-full">
+            {/* Map Section - Left Side */}
+            <div className="flex-1 relative">
+              <GeofencingMap
+                onLocationsChange={(locations) => {
+                  setGeoLocations(locations);
+                  const locationNames = locations
+                    .filter((loc: any) => loc.properties?.included !== false)
+                    .map((loc: any) => loc.properties?.name || "Location")
+                    .filter(Boolean);
+                  form.setValue("geography", locationNames);
+                }}
+                initialLocations={geoLocations}
+                country={dealData?.country || "US"}
+                hasLocations={geoLocations.length > 0}
+                addPOI={addPOIMode}
+                selectedLocation={
+                  selectedLocationIndex !== null
+                    ? geoLocations[selectedLocationIndex]
+                    : null
+                }
+                onCenterOnLocation={shouldCenterOnLocation}
+                onAddPOIChange={(mode) => {
+                  setAddPOIMode(mode);
+                  if (!mode) setSelectedLocationIndex(null);
+                }}
+                onUpdateLocationPOIMetadata={(id, metadata, pois) => {
+                  setGeoLocations((prev) =>
+                    prev.map((loc) => {
+                      if (loc.id === id) {
+                        return {
+                          ...loc,
+                          poi: pois,
+                          metadata: { ...loc.metadata, ...metadata },
+                          properties: {
+                            ...loc.properties,
+                            pois: pois.map((p) => ({
+                              type: p,
+                              label: p,
+                            })),
+                          },
+                        };
+                      }
+                      return loc;
+                    })
+                  );
+                  setAddPOIMode(false);
+                  setSelectedLocationIndex(null);
+                }}
+              />
+            </div>
+            
+            {/* Selected Locations Sidebar - Right Side */}
+            <div className="w-80 border-l border-mw-neutral-200 dark:border-mw-neutral-700 bg-white dark:bg-mw-neutral-900 flex flex-col">
+              <div className="p-4 border-b border-mw-neutral-200 dark:border-mw-neutral-700">
+                <h3 className="font-semibold text-lg text-mw-neutral-900 dark:text-white">Selected Locations</h3>
+                <p className="text-sm text-mw-neutral-500 mt-1">
+                  Click on the map or search to add locations
+                </p>
+              </div>
+              
+              {/* Search Input */}
+              <div className="p-4 border-b border-mw-neutral-200 dark:border-mw-neutral-700">
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+                  <Input
+                    placeholder="Search added locations here..."
+                    value={locationSearchQuery}
+                    onChange={(e) => setLocationSearchQuery(e.target.value)}
+                    className="pl-9"
+                  />
+                </div>
+                <div className="flex items-center gap-2 mt-3">
+                  <Checkbox 
+                    checked={enableAllLocations}
+                    onChange={() => {
+                      setEnableAllLocations(!enableAllLocations);
+                      // Toggle all locations' included status
+                      const updatedLocations = geoLocations.map((loc: any) => ({
+                        ...loc,
+                        properties: {
+                          ...loc.properties,
+                          included: !enableAllLocations,
+                        },
+                      }));
+                      setGeoLocations(updatedLocations);
+                    }}
+                  />
+                  <Label className="text-sm cursor-pointer">Enable all</Label>
+                </div>
+              </div>
+              
+              {/* Locations List */}
+              <ScrollArea className="flex-1">
+                <div className="p-4 space-y-2">
+                  {geoLocations.length === 0 ? (
+                    <div className="text-center py-8 text-mw-neutral-500">
+                      <MapPin className="h-12 w-12 mx-auto mb-3 opacity-50" />
+                      <p>No locations added yet</p>
+                    </div>
+                  ) : (
+                    geoLocations
+                      .filter((loc: any) => {
+                        if (!locationSearchQuery) return true;
+                        const name = loc.properties?.name || "";
+                        return name.toLowerCase().includes(locationSearchQuery.toLowerCase());
+                      })
+                      .map((location: any, index: number) => {
+                        const locationPois = location.properties?.pois || [];
+                        const canAddMorePois = locationPois.length < MAX_POIS_PER_LOCATION;
+                        const isSelected = selectedLocationIndex === index;
+
+                        const handleLocationCardClick = () => {
+                          setSelectedLocationIndex(index);
+                          setShouldCenterOnLocation(true);
+                          setTimeout(() => setShouldCenterOnLocation(false), 100);
+                        };
+
+                        return (
+                          <div
+                            key={location.id || index}
+                            className={`border rounded-lg p-3 cursor-pointer transition-colors ${
+                              isSelected
+                                ? "border-mw-primary-500 bg-mw-primary-50 dark:bg-mw-primary-900/20"
+                                : "border-mw-neutral-200 dark:border-mw-neutral-700 hover:border-mw-primary-300"
+                            }`}
+                            onClick={handleLocationCardClick}
+                          >
+                            <div className="flex items-start justify-between mb-2">
+                              <div className="flex items-start gap-2">
+                                <Checkbox
+                                  checked={location.properties?.included !== false}
+                                  onChange={(e) => {
+                                    e.stopPropagation();
+                                    const updatedLocations = geoLocations.map((loc: any, i: number) =>
+                                      i === index
+                                        ? {
+                                            ...loc,
+                                            properties: {
+                                              ...loc.properties,
+                                              included: loc.properties?.included === false,
+                                            },
+                                          }
+                                        : loc
+                                    );
+                                    setGeoLocations(updatedLocations);
+                                  }}
+                                  onClick={(e) => e.stopPropagation()}
+                                  className="mt-0.5"
+                                />
+                                <div>
+                                  <span className="text-sm font-medium block text-mw-neutral-900 dark:text-white">
+                                    {location.properties?.name || `Location ${index + 1}`}
+                                  </span>
+                                  <span className="text-xs text-mw-neutral-500">
+                                    {location.geometry?.type || "Point"} - Drawn on map
+                                  </span>
+                                </div>
+                              </div>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                className="h-8 w-8 p-0"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  const updatedLocations = geoLocations.filter((_, i) => i !== index);
+                                  setGeoLocations(updatedLocations);
+                                }}
+                              >
+                                <Trash2 className="h-4 w-4 text-mw-neutral-400 hover:text-red-500" />
+                              </Button>
+                            </div>
+
+                            {/* POI Badges */}
+                            {locationPois.length > 0 && (
+                              <div className="flex flex-wrap gap-1 mt-2 mb-2" onClick={(e) => e.stopPropagation()}>
+                                {locationPois.map((poi: { type: string; label: string }) => (
+                                  <Badge key={poi.type} variant="secondary" className="text-xs h-5 px-2 pr-1 flex items-center gap-1">
+                                    {poi.label}
+                                    <Button
+                                      type="button"
+                                      variant="ghost"
+                                      size="sm"
+                                      isIconOnly
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        removePoiFromLocation(index, poi.type);
+                                      }}
+                                    >
+                                      <X className="h-3 w-3" />
+                                    </Button>
+                                  </Badge>
+                                ))}
+                              </div>
+                            )}
+
+                            {/* Add POI Section */}
+                            <div className="flex items-center justify-between border-t border-mw-neutral-100 dark:border-mw-neutral-700 pt-2 mt-2" onClick={(e) => e.stopPropagation()}>
+                              <span className="text-xs text-mw-neutral-500">
+                                {locationPois.length >= MAX_POIS_PER_LOCATION
+                                  ? "Limit reached"
+                                  : `You can add up to ${MAX_POIS_PER_LOCATION} POIs`}
+                              </span>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                className="h-7 text-xs text-mw-primary-500 border-mw-primary-300"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setSelectedLocationIndex(index);
+                                  setAddPOIMode(true);
+                                }}
+                                disabled={!canAddMorePois}
+                              >
+                                <Plus className="h-3 w-3 mr-1" />
+                                Add POI
+                              </Button>
+                            </div>
+                          </div>
+                        );
+                      })
+                  )}
+                </div>
+              </ScrollArea>
+              
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+
+
+      {/* Schedule Rule Editor */}
+      {isScheduleEditorOpen && editingSchedule && (
+        <ScheduleRuleEditor
+          schedule={editingSchedule}
+          lineItemStartDate={form.watch("startDate") || getTodayDateString()}
+          lineItemEndDate={form.watch("endDate") || form.watch("startDate") || getTodayDateString()}
+          onSave={handleSaveSchedule}
+          onCancel={handleCancelScheduleEdit}
+          isOpen={isScheduleEditorOpen}
+        />
+      )}
+
+      <Sheet open={isMediaOwnerSheetOpen} onOpenChange={setIsMediaOwnerSheetOpen}>
+        <SheetContent side="right" className="w-full sm:max-w-md flex flex-col p-0">
+          <SheetHeader className="px-6 py-5 border-b border-mw-neutral-200 flex-shrink-0">
+            <SheetTitle className="flex items-center gap-2">
+              <Monitor className="h-5 w-5" />
+              Select Media Owners
+            </SheetTitle>
+            <SheetDescription>
+              Search and filter media owners by type
+            </SheetDescription>
+          </SheetHeader>
+          <div className="flex-1 flex flex-col gap-4 px-6 pt-4 min-h-0 overflow-hidden">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+              <Input
+                placeholder="Search media owners..."
+                value={mediaOwnerSearch}
+                onChange={(e) => setMediaOwnerSearch(e.target.value)}
+                className="pl-9"
+              />
+            </div>
+            <div>
+              <SelectRoot value={mediaOwnerTypeFilter} onValueChange={setMediaOwnerTypeFilter}>
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="All Types" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Types</SelectItem>
+                  {Array.from(new Set(companiesData.map((c: Company) => c.company_type?.name).filter(Boolean))).map((typeName) => (
+                    <SelectItem key={typeName as string} value={typeName as string}>{typeName as string}</SelectItem>
+                  ))}
+                </SelectContent>
+              </SelectRoot>
+            </div>
+            {isLoadingCompanies ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader2 className="h-6 w-6 animate-spin text-mw-primary-500" />
+                <span className="ml-2 text-sm text-mw-neutral-500">Loading media owners...</span>
+              </div>
+            ) : (
+              <ScrollArea className="flex-1">
+                <div className="space-y-1">
+                  {companiesData
+                    .filter((company: Company) => {
+                      const matchesSearch = !mediaOwnerSearch || company.name.toLowerCase().includes(mediaOwnerSearch.toLowerCase());
+                      const matchesType = mediaOwnerTypeFilter === "all" || company.company_type?.name === mediaOwnerTypeFilter;
+                      return matchesSearch && matchesType;
+                    })
+                    .map((company: Company) => (
+                      <div
+                        key={company.id}
+                        className="flex items-center gap-3 p-3 rounded-lg hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 cursor-pointer"
+                        onClick={() => {
+                          setSelectedMediaOwners(prev =>
+                            prev.includes(company.id)
+                              ? prev.filter(id => id !== company.id)
+                              : [...prev, company.id]
+                          );
+                        }}
+                      >
+                        <Checkbox
+                          checked={selectedMediaOwners.includes(company.id)}
+                          onChange={() => {}}
+                        />
+                        <div>
+                          <p className="text-sm font-medium">{company.name}</p>
+                          <p className="text-xs text-mw-neutral-500">{company.company_type?.name || "Unknown Type"}</p>
+                        </div>
+                      </div>
+                    ))}
+                </div>
+              </ScrollArea>
+            )}
+          </div>
+          <SheetFooter className="px-6 py-4 border-t border-mw-neutral-200 flex-shrink-0">
+            <div className="flex items-center justify-between w-full">
+              <span className="text-sm text-mw-neutral-500">{selectedMediaOwners.length} selected</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setIsMediaOwnerSheetOpen(false)}>Cancel</Button>
+                <Button onClick={() => setIsMediaOwnerSheetOpen(false)}>Apply Selection</Button>
+              </div>
+            </div>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+
+      <Sheet open={isSSPSheetOpen} onOpenChange={setIsSSPSheetOpen}>
+        <SheetContent side="right" className="w-full sm:max-w-md flex flex-col p-0">
+          <SheetHeader className="px-6 py-5 border-b border-mw-neutral-200 flex-shrink-0">
+            <SheetTitle className="flex items-center gap-2">
+              <Server className="h-5 w-5" />
+              Select SSP / Exchange
+            </SheetTitle>
+            <SheetDescription>
+              Choose the SSP or exchange for inventory sourcing
+            </SheetDescription>
+          </SheetHeader>
+          <div className="flex-1 px-6 pt-4">
+            <div className="space-y-1">
+              <div
+                className="flex items-center gap-3 p-3 rounded-lg border border-mw-primary-500 bg-mw-primary-50 dark:bg-mw-primary-900/20"
+              >
+                <div className="w-5 h-5 rounded-full border-2 border-mw-primary-500 flex items-center justify-center">
+                  <div className="w-2.5 h-2.5 rounded-full bg-mw-primary-500" />
+                </div>
+                <div>
+                  <p className="text-sm font-medium">Influence SSP</p>
+                  <p className="text-xs text-mw-neutral-500">Default supply-side platform</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <SheetFooter className="px-6 py-4 border-t border-mw-neutral-200 flex-shrink-0 flex justify-end">
+            <Button onClick={() => setIsSSPSheetOpen(false)}>Done</Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+
+      <Sheet open={isInventoryTypeSheetOpen} onOpenChange={setIsInventoryTypeSheetOpen}>
+        <SheetContent side="right" className="w-full sm:max-w-md flex flex-col p-0">
+          <SheetHeader className="px-6 py-5 border-b border-mw-neutral-200 flex-shrink-0">
+            <SheetTitle className="flex items-center gap-2">
+              <Monitor className="h-5 w-5" />
+              Select Inventory Types
+            </SheetTitle>
+            <SheetDescription>
+              Choose inventory types for your line item
+            </SheetDescription>
+          </SheetHeader>
+          <div className="flex-1 min-h-0 overflow-hidden flex flex-col px-6 pt-4">
+          <ScrollArea className="flex-1">
+            <div className="space-y-1">
+              {isLoadingInventoryTypes && (
+                <p className="text-sm text-mw-neutral-500 py-4 text-center">Loading inventory types...</p>
+              )}
+              {parentInventoryTypes.map((parent) => {
+                const children = inventoryTypeChildren[parent.path] || [];
+                const isParentSelected = selectedInventoryTypePaths.includes(parent.path);
+                const allChildrenSelected = children.length > 0 && children.every(c => selectedInventoryTypePaths.includes(c.path));
+                return (
+                  <Collapsible key={parent.path}>
+                    <div className="flex items-center gap-2 p-2 rounded-lg hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800">
+                      {children.length > 0 && (
+                        <CollapsibleTrigger asChild>
+                          <Button type="button" variant="ghost" size="sm" isIconOnly>
+                            <ChevronDown className="h-4 w-4 text-mw-neutral-500" />
+                          </Button>
+                        </CollapsibleTrigger>
+                      )}
+                      {children.length === 0 && <span className="w-5" />}
+                      <Checkbox
+                        id={`invtype-sheet-${parent.path}`}
+                        checked={isParentSelected || allChildrenSelected}
+                        onChange={() => {
+                          const shouldCheck = !(isParentSelected || allChildrenSelected);
+                          setSelectedInventoryTypePaths(prev => {
+                            let next = shouldCheck
+                              ? [...prev, parent.path]
+                              : prev.filter(p => p !== parent.path);
+                            if (shouldCheck) {
+                              children.forEach(c => { if (!next.includes(c.path)) next.push(c.path); });
+                            } else {
+                              next = next.filter(p => !children.some(c => c.path === p));
+                            }
+                            return next;
+                          });
+                        }}
+                      />
+                      <Label htmlFor={`invtype-sheet-${parent.path}`} className="text-sm font-medium cursor-pointer flex-1">
+                        {parent.name}
+                      </Label>
+                    </div>
+                    {children.length > 0 && (
+                      <CollapsibleContent>
+                        <div className="ml-7 space-y-0.5">
+                          {children.map(child => (
+                            <div key={child.path} className="flex items-center gap-2 p-2 pl-4 rounded-lg hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800">
+                              <Checkbox
+                                id={`invtype-sheet-${child.path}`}
+                                checked={selectedInventoryTypePaths.includes(child.path)}
+                                onChange={() => {
+                                  setSelectedInventoryTypePaths(prev =>
+                                    prev.includes(child.path)
+                                      ? prev.filter(p => p !== child.path)
+                                      : [...prev, child.path]
+                                  );
+                                }}
+                              />
+                              <Label htmlFor={`invtype-sheet-${child.path}`} className="text-sm font-normal cursor-pointer flex-1">
+                                {child.name}
+                              </Label>
+                            </div>
+                          ))}
+                        </div>
+                      </CollapsibleContent>
+                    )}
+                  </Collapsible>
+                );
+              })}
+            </div>
+          </ScrollArea>
+          </div>
+          <SheetFooter className="px-6 py-4 border-t border-mw-neutral-200 flex-shrink-0">
+            <div className="flex items-center justify-between w-full">
+              <span className="text-sm text-mw-neutral-500">{selectedInventoryTypePaths.length} types selected</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setIsInventoryTypeSheetOpen(false)}>Cancel</Button>
+                <Button onClick={() => setIsInventoryTypeSheetOpen(false)}>Apply Selection</Button>
+              </div>
+            </div>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+
+      <Sheet open={isInventoryFormatSheetOpen} onOpenChange={setIsInventoryFormatSheetOpen}>
+        <SheetContent side="right" className="w-full sm:max-w-md flex flex-col p-0">
+          <SheetHeader className="px-6 py-5 border-b border-mw-neutral-200 flex-shrink-0">
+            <SheetTitle className="flex items-center gap-2">
+              <Layers className="h-5 w-5" />
+              Select Inventory Formats
+            </SheetTitle>
+            <SheetDescription>
+              Choose inventory formats grouped by DOOH type
+            </SheetDescription>
+          </SheetHeader>
+          <div className="flex-1 min-h-0 overflow-hidden flex flex-col px-6 pt-4">
+          <ScrollArea className="flex-1">
+            <div className="space-y-6">
+              {isLoadingDisplayFormats && (
+                <p className="text-sm text-mw-neutral-500 py-4 text-center">Loading inventory formats...</p>
+              )}
+              {Object.entries(formatGroups).map(([typePath, { groupName, formats }]) => {
+                const formatIds = formats.map(f => String(f.id));
+                const selectedInGroup = formatIds.filter(id => form.watch("inventoryFormats")?.includes(id));
+                return (
+                  <div key={typePath}>
+                    <div className="flex items-center justify-between mb-3">
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm font-semibold">{groupName}</span>
+                        <span className="text-xs text-mw-neutral-500">{selectedInGroup.length}/{formats.length}</span>
+                      </div>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => {
+                          const current = form.watch("inventoryFormats") || [];
+                          if (selectedInGroup.length === formats.length) {
+                            form.setValue("inventoryFormats", current.filter((f: string) => !formatIds.includes(f)));
+                          } else {
+                            const newFormats = Array.from(new Set([...current, ...formatIds]));
+                            form.setValue("inventoryFormats", newFormats);
+                          }
+                        }}
+                      >
+                        Select All
+                      </Button>
+                    </div>
+                    <div className="space-y-1">
+                      {formats.map((format) => {
+                        const fId = String(format.id);
+                        return (
+                          <div
+                            key={format.id}
+                            className="flex items-center gap-3 p-2 rounded-lg hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 cursor-pointer"
+                            onClick={() => {
+                              const current = form.watch("inventoryFormats") || [];
+                              if (current.includes(fId)) {
+                                form.setValue("inventoryFormats", current.filter((f: string) => f !== fId));
+                              } else {
+                                form.setValue("inventoryFormats", [...current, fId]);
+                              }
+                            }}
+                          >
+                            <Checkbox
+                              checked={form.watch("inventoryFormats")?.includes(fId) || false}
+                              onChange={() => {}}
+                            />
+                            <span className="text-sm">{format.name}</span>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </ScrollArea>
+          </div>
+          <SheetFooter className="px-6 py-4 border-t border-mw-neutral-200 flex-shrink-0">
+            <div className="flex items-center justify-between w-full">
+              <span className="text-sm text-mw-neutral-500">{form.watch("inventoryFormats")?.length || 0} formats selected</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setIsInventoryFormatSheetOpen(false)}>Cancel</Button>
+                <Button onClick={() => setIsInventoryFormatSheetOpen(false)}>Apply Selection</Button>
+              </div>
+            </div>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+
+      <Sheet open={isPOIDrawerOpen} onOpenChange={setIsPOIDrawerOpen}>
+        <SheetContent className="w-[400px] sm:max-w-[400px] flex flex-col p-0">
+          <SheetHeader className="px-6 py-5 border-b border-mw-neutral-200 flex-shrink-0">
+            <SheetTitle>POI Targeting</SheetTitle>
+            <SheetDescription>Select points of interest to target</SheetDescription>
+          </SheetHeader>
+          <div className="flex-1 min-h-0 overflow-hidden flex flex-col px-6 pt-4">
+            <Tabs defaultValue="pois" className="flex-1 flex flex-col min-h-0">
+              <TabsList className="w-full flex-shrink-0">
+                <TabsTrigger value="pois" className="flex-1">POIs</TabsTrigger>
+                <TabsTrigger value="categories" className="flex-1">Categories</TabsTrigger>
+              </TabsList>
+              <TabsContent value="pois" className="flex-1 flex flex-col mt-4 min-h-0">
+                <div className="relative mb-3 flex-shrink-0">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+                  <Input
+                    placeholder="Search POIs..."
+                    value={poiSearchQuery}
+                    onChange={(e) => setPOISearchQuery(e.target.value)}
+                    className="pl-9"
+                  />
+                </div>
+                <ScrollArea className="flex-1">
+                  <div className="space-y-1">
+                    {POI_OPTIONS.filter((poi) =>
+                      poi.label.toLowerCase().includes(poiSearchQuery.toLowerCase())
+                    ).map((poi) => (
+                      <div
+                        key={poi.value}
+                        className="flex items-center gap-3 p-2 rounded-lg hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 transition-colors"
+                      >
+                        <Checkbox
+                          id={`poi-drawer-${poi.value}`}
+                          checked={localPOIs.includes(poi.value)}
+                          onChange={() => {
+                            setLocalPOIs((prev) =>
+                              prev.includes(poi.value)
+                                ? prev.filter((p) => p !== poi.value)
+                                : [...prev, poi.value]
+                            );
+                          }}
+                        />
+                        <Label htmlFor={`poi-drawer-${poi.value}`} className="text-sm font-normal cursor-pointer flex-1">
+                          {poi.label}
+                        </Label>
+                      </div>
+                    ))}
+                  </div>
+                </ScrollArea>
+              </TabsContent>
+              <TabsContent value="categories" className="flex-1 mt-4">
+                <div className="flex items-center justify-center h-32 text-mw-neutral-400 text-sm">
+                  POI category selection coming soon
+                </div>
+              </TabsContent>
+            </Tabs>
+          </div>
+          <SheetFooter className="px-6 py-4 border-t border-mw-neutral-200 flex-shrink-0">
+            <div className="flex items-center justify-between w-full">
+              <span className="text-sm text-mw-neutral-500">{localPOIs.length} POIs selected</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setIsPOIDrawerOpen(false)}>Cancel</Button>
+                <Button onClick={() => {
+                  setSelectedPOIs([...localPOIs]);
+                  form.setValue("selectedPOIs", [...localPOIs]);
+                  setIsPOIDrawerOpen(false);
+                }}>Apply</Button>
+              </div>
+            </div>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+
+      <Sheet open={isVenueDrawerOpen} onOpenChange={setIsVenueDrawerOpen}>
+        <SheetContent className="w-[400px] sm:max-w-[400px] flex flex-col p-0">
+          <SheetHeader className="px-6 py-5 border-b border-mw-neutral-200 flex-shrink-0">
+            <SheetTitle>Venue Types</SheetTitle>
+            <SheetDescription>Select venue types to target</SheetDescription>
+          </SheetHeader>
+          <div className="flex-1 min-h-0 overflow-hidden flex flex-col px-6 pt-4">
+            <div className="relative mb-3 flex-shrink-0">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+              <Input
+                placeholder="Search venue types..."
+                value={venueSearchQuery}
+                onChange={(e) => setVenueSearchQuery(e.target.value)}
+                className="pl-9"
+              />
+            </div>
+            <ScrollArea className="flex-1">
+              <div className="space-y-1">
+                {isLoadingVenueTypes && (
+                  <div className="flex items-center justify-center py-4">
+                    <span className="text-sm text-mw-neutral-500">Loading venue types...</span>
+                  </div>
+                )}
+                {(() => {
+                  const getAllDescendantPaths = (node: typeof venueTypeTree[0]): string[] => {
+                    let paths: string[] = [];
+                    node.children.forEach((child) => {
+                      paths.push(child.path);
+                      paths = paths.concat(getAllDescendantPaths(child));
+                    });
+                    return paths;
+                  };
+
+                  const matchesSearch = (node: typeof venueTypeTree[0], query: string): boolean => {
+                    if (node.name.toLowerCase().includes(query)) return true;
+                    return node.children.some((child) => matchesSearch(child, query));
+                  };
+
+                  const renderNode = (node: typeof venueTypeTree[0], depth: number = 0): React.ReactNode => {
+                    const query = venueSearchQuery.toLowerCase();
+                    if (query && !matchesSearch(node, query)) return null;
+
+                    const isExpanded = expandedVenueParents.has(node.taxonomyId);
+                    const hasChildren = node.children.length > 0;
+                    const isChecked = localVenueTypes.includes(node.path);
+                    const descendantPaths = getAllDescendantPaths(node);
+                    const allDescendantsSelected = descendantPaths.length > 0 && descendantPaths.every((p) => localVenueTypes.includes(p));
+
+                    return (
+                      <div key={node.taxonomyId}>
+                        <div
+                          className="flex items-center gap-2 p-2 rounded-lg hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 transition-colors"
+                          style={{ paddingLeft: `${depth * 20 + 8}px` }}
+                        >
+                          {hasChildren ? (
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="sm"
+                              isIconOnly
+                              className="flex-shrink-0"
+                              onClick={() => {
+                                setExpandedVenueParents((prev) => {
+                                  const next = new Set(prev);
+                                  if (next.has(node.taxonomyId)) next.delete(node.taxonomyId);
+                                  else next.add(node.taxonomyId);
+                                  return next;
+                                });
+                              }}
+                            >
+                              <ChevronDown className={`h-4 w-4 text-mw-neutral-500 transition-transform ${isExpanded ? "" : "-rotate-90"}`} />
+                            </Button>
+                          ) : (
+                            <span className="w-5 flex-shrink-0" />
+                          )}
+                          <Checkbox
+                            id={`venue-${node.taxonomyId}`}
+                            checked={isChecked || allDescendantsSelected}
+                            onChange={() => {
+                              const shouldCheck = !(isChecked || allDescendantsSelected);
+                              setLocalVenueTypes((prev) => {
+                                let next = shouldCheck
+                                  ? [...prev, node.path]
+                                  : prev.filter((p) => p !== node.path);
+                                if (shouldCheck) {
+                                  descendantPaths.forEach((dp) => {
+                                    if (!next.includes(dp)) next.push(dp);
+                                  });
+                                } else {
+                                  next = next.filter((p) => !descendantPaths.includes(p));
+                                }
+                                return next;
+                              });
+                            }}
+                          />
+                          <Label
+                            htmlFor={`venue-${node.taxonomyId}`}
+                            className={`text-sm cursor-pointer flex-1 ${hasChildren ? "font-medium" : "font-normal"}`}
+                          >
+                            {node.name}
+                          </Label>
+                        </div>
+                        {hasChildren && (isExpanded || venueSearchQuery) && (
+                          <div>
+                            {node.children.map((child) => renderNode(child, depth + 1))}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  };
+
+                  return venueTypeTree.map((root) => renderNode(root, 0));
+                })()}
+              </div>
+            </ScrollArea>
+          </div>
+          <SheetFooter className="px-6 py-4 border-t border-mw-neutral-200 flex-shrink-0">
+            <div className="flex items-center justify-between w-full">
+              <span className="text-sm text-mw-neutral-500">{localVenueTypes.length} venue types selected</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setIsVenueDrawerOpen(false)}>Cancel</Button>
+                <Button onClick={() => {
+                  form.setValue("venueTypes", [...localVenueTypes]);
+                  setIsVenueDrawerOpen(false);
+                }}>Apply</Button>
+              </div>
+            </div>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+
+      <ManualInventoryDrawer
+        open={isManualEditOpen}
+        onOpenChange={setIsManualEditOpen}
+        screens={manualEditScreens.map(s => {
+          const resParts = s.resolution?.split('x');
+          return {
+            id: s.id,
+            name: s.name || s.id,
+            city: s.address?.split(',')[0] || undefined,
+            country: s.countryIso2 || undefined,
+            latitude: s.latitude ?? null,
+            longitude: s.longitude ?? null,
+            cpm: s.planning?.pricing?.cpm ? s.planning.pricing.cpm / 100 : null,
+            dailyImpressions: s.planning?.estimates?.impressions || null,
+            width: resParts && resParts.length === 2 ? parseInt(resParts[0]) : null,
+            height: resParts && resParts.length === 2 ? parseInt(resParts[1]) : null,
+            screenType: s.type || null,
+            mediaOwnerId: s.publisherId || s.mediaOwnerId || null,
+            mediaOwnerName: s.publisherName || s.mediaOwnerName || undefined,
+          };
+        })}
+        selectedScreens={manualEditSelection}
+        onSelectionChange={(ids) => {
+          form.setValue("selectedInventories", ids);
+        }}
+        mapCenter={{ lng: 103.8198, lat: 1.3521, zoom: 11 }}
+      />
+    </div>
+  );
+}