adserver-dashboard 1.0.0

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

@@ -0,0 +1,1570 @@
+import { useEffect, useMemo, useState, useRef, useCallback } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { useRoute, useLocation } from "wouter";
+import { useForm, useWatch } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { ArrowLeft, Loader2, User, Tag, Globe, ChevronDown, X, Plus, Lightbulb, Building2, DollarSign, Target, AlertTriangle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Badge } from "@/components/ui/badge";
+import { Switch } from "@/components/ui/switch";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription,
+} from "@/components/ui/form";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { PageHeader } from "@/components/page-header";
+import { SearchableCombobox, ComboboxOption } from "@/components/searchable-combobox";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import type { Deal, Brand, Agency, SspPartner, DspPartner } from "@shared/schema";
+import { MEDIA_TYPES, ADPLAY_VERIFICATION_PROVIDERS, DEAL_TYPES, GOAL_TYPES } from "@shared/schema";
+import { BrandInsightsPanel } from "@/components/brand-insights-panel";
+import { MarketInsightsPanel } from "@/components/market-insights-panel";
+import { CreateBrandDrawer } from "@/components/create-brand-drawer";
+import { CreateAgencyDrawer } from "@/components/create-agency-drawer";
+
+// Section-specific Quick Tips that change based on scroll position
+type TipSection = "basic" | "ssp" | "brand" | "budget";
+
+interface QuickTip {
+  title: string;
+  tips: string[];
+}
+
+const SECTION_TIPS: Record<TipSection, QuickTip> = {
+  basic: {
+    title: "Deal Basics",
+    tips: [
+      "Deal Name should be descriptive and unique to easily identify it in lists",
+      "Status controls whether the deal is Active (running) or Paused (stopped)",
+      "Media Type defines the channel - DOOH (Digital Out-of-Home) is for digital screens",
+      "External Deal ID helps sync with external systems like your CRM",
+      "Billable flag determines if this deal is included in invoicing",
+    ],
+  },
+  ssp: {
+    title: "Supply Configuration",
+    tips: [
+      "SSP Partner (Supply-Side Platform) provides access to inventory networks",
+      "Deal Type determines pricing model - Traditional or Programmatic",
+      "Programmatic deals enable automated real-time bidding with DSP partners",
+      "Media Owner is selected at Line Item level for more granular control",
+      "Client Type indicates if this is a direct client or through an agency",
+    ],
+  },
+  brand: {
+    title: "Brand & Verification",
+    tips: [
+      "Selecting a brand enables brand-specific insights and recommendations",
+      "AdPlay Verification ensures ads are actually played on screens",
+      "Countries selected here limit geography targeting in line items",
+      "Line items can only target cities/areas within the deal's countries",
+    ],
+  },
+  budget: {
+    title: "Budget & Goals",
+    tips: [
+      "Currency determines the monetary unit for all budget and pricing",
+      "Currency margin (3%) applies when inventory uses different currencies",
+      "Goal Type sets what you're optimizing for - Impressions, Reach, etc.",
+      "Budget and Goal values help with better inventory recommendations in Line Items",
+      "Setting budget enables spend tracking and pacing recommendations",
+    ],
+  },
+};
+
+interface CountryOption {
+  code: string;
+  name: string;
+  flag: string;
+}
+
+const COUNTRIES: CountryOption[] = [
+  { code: "MY", name: "Malaysia", flag: "MY" },
+  { code: "US", name: "United States", flag: "US" },
+  { code: "CN", name: "China", flag: "CN" },
+  { code: "IN", name: "India", flag: "IN" },
+  { code: "GB", name: "United Kingdom", flag: "GB" },
+  { code: "SG", name: "Singapore", flag: "SG" },
+  { code: "TH", name: "Thailand", flag: "TH" },
+  { code: "ID", name: "Indonesia", flag: "ID" },
+  { code: "PH", name: "Philippines", flag: "PH" },
+  { code: "VN", name: "Vietnam", flag: "VN" },
+  { code: "AU", name: "Australia", flag: "AU" },
+  { code: "JP", name: "Japan", flag: "JP" },
+  { code: "KR", name: "South Korea", flag: "KR" },
+  { code: "DE", name: "Germany", flag: "DE" },
+  { code: "FR", name: "France", flag: "FR" },
+  { code: "BR", name: "Brazil", flag: "BR" },
+  { code: "MX", name: "Mexico", flag: "MX" },
+  { code: "CA", name: "Canada", flag: "CA" },
+  { code: "AE", name: "UAE", flag: "AE" },
+  { code: "SA", name: "Saudi Arabia", flag: "SA" },
+];
+
+// Country to currency mapping
+const COUNTRY_CURRENCY_MAP: Record<string, string> = {
+  MY: "MYR",
+  US: "USD",
+  CN: "CNY",
+  IN: "INR",
+  GB: "GBP",
+  SG: "SGD",
+  TH: "USD", // Thailand uses USD for DOOH typically
+  ID: "USD", // Indonesia uses USD for DOOH typically
+  PH: "USD", // Philippines uses USD for DOOH typically
+  VN: "USD", // Vietnam uses USD for DOOH typically
+  AU: "AUD",
+  JP: "JPY",
+  KR: "USD", // South Korea uses USD for DOOH typically
+  DE: "EUR",
+  FR: "EUR",
+  BR: "USD", // Brazil uses USD for DOOH typically
+  MX: "USD", // Mexico uses USD for DOOH typically
+  CA: "CAD",
+  AE: "AED",
+  SA: "USD", // Saudi Arabia uses USD for DOOH typically
+};
+
+const CURRENCIES: { value: string; label: string }[] = [
+  { value: "USD", label: "USD - US Dollar" },
+  { value: "EUR", label: "EUR - Euro" },
+  { value: "GBP", label: "GBP - British Pound" },
+  { value: "MYR", label: "MYR - Malaysian Ringgit" },
+  { value: "SGD", label: "SGD - Singapore Dollar" },
+  { value: "AUD", label: "AUD - Australian Dollar" },
+  { value: "JPY", label: "JPY - Japanese Yen" },
+  { value: "INR", label: "INR - Indian Rupee" },
+  { value: "CNY", label: "CNY - Chinese Yuan" },
+  { value: "AED", label: "AED - UAE Dirham" },
+];
+
+// Dummy DSP seats for demo - in production this comes from Admin Console
+// Seat IDs are 6-7 digit numbers
+const DUMMY_DSP_SEATS: { dspId: string; seatName: string; seatId: string }[] = [
+  { dspId: "dsp-activate-default", seatName: "Activate Primary", seatId: "123456" },
+  { dspId: "dsp-activate-default", seatName: "Activate Agency Desk", seatId: "234567" },
+  { dspId: "dsp-activate-default", seatName: "Activate Self-Serve", seatId: "3456789" },
+  { dspId: "dsp-1", seatName: "Main Trading Desk", seatId: "456789" },
+  { dspId: "dsp-1", seatName: "Secondary Desk", seatId: "567890" },
+  { dspId: "dsp-2", seatName: "Primary Account", seatId: "6789012" },
+  { dspId: "dsp-2", seatName: "Agency Account", seatId: "789012" },
+];
+
+const dealFormSchema = z.object({
+  name: z.string().min(1, "Deal name is required"),
+  status: z.enum(["active", "paused"]).default("active"),
+  externalDealId: z.string().optional(),
+  billable: z.boolean().default(true),
+  mediaType: z.enum(["dooh", "mobile", "youtube", "ctv"]).default("dooh"),
+  sspId: z.string().min(1, "SSP Partner is required"),
+  dealType: z.enum(["traditional", "pg", "preferred_deal", "pmp", "always_on", "open_auction"]).default("traditional"),
+  brandId: z.string().optional(),
+  clientType: z.enum(["direct", "agency"]).default("direct"),
+  agencyId: z.string().optional(),
+  dspId: z.string().optional(),
+  seatName: z.string().optional(),
+  seatId: z.string().optional(),
+  adPlayVerificationEnabled: z.boolean().default(false),
+  adPlayVerificationProvider: z.string().optional(),
+  countries: z.array(z.string()).min(1, "At least one country is required").default(["MY"]),
+  currency: z.string().min(1, "Currency is required").default("USD"),
+  budget: z.string().optional(),
+  goalType: z.string().optional(),
+  goalValue: z.string().optional(),
+  minimumTargetThreshold: z.string().optional(),
+  hardStop: z.boolean().default(false),
+}).refine((data) => {
+  if (data.adPlayVerificationEnabled && !data.adPlayVerificationProvider) {
+    return false;
+  }
+  return true;
+}, {
+  message: "Service provider is required when AdPlay Verification is enabled",
+  path: ["adPlayVerificationProvider"],
+}).refine((data) => {
+  if (data.clientType === "agency" && !data.agencyId) {
+    return false;
+  }
+  return true;
+}, {
+  message: "Please select an agency",
+  path: ["agencyId"],
+}).refine((data) => {
+  if (data.dealType === "pg" && !data.minimumTargetThreshold) {
+    return false;
+  }
+  return true;
+}, {
+  message: "Minimum Target Threshold is required for Programmatic Guaranteed deals",
+  path: ["minimumTargetThreshold"],
+});
+
+type DealFormData = z.infer<typeof dealFormSchema>;
+
+const statusOptions: ComboboxOption[] = [
+  { value: "active", label: "Active" },
+  { value: "paused", label: "Paused" },
+];
+
+const clientTypeOptions: ComboboxOption[] = [
+  { value: "direct", label: "Direct Advertiser" },
+  { value: "agency", label: "Agency" },
+];
+
+const mediaTypeOptions: ComboboxOption[] = MEDIA_TYPES.map((mt) => ({
+  value: mt.value,
+  label: mt.label,
+  disabled: mt.disabled,
+}));
+
+const dealTypeOptions: ComboboxOption[] = [
+  { value: "traditional", label: "Traditional" },
+  { value: "programmatic", label: "Programmatic" },
+];
+
+const programmaticSubtypeOptions: ComboboxOption[] = [
+  { value: "pg", label: "Programmatic Guaranteed" },
+  { value: "preferred_deal", label: "Preferred Deal" },
+  { value: "pmp", label: "Private Marketplace (PMP)" },
+  { value: "always_on", label: "Always On" },
+  { value: "open_auction", label: "Open Auction" },
+];
+
+const providerOptions: ComboboxOption[] = ADPLAY_VERIFICATION_PROVIDERS.map((provider) => ({
+  value: provider,
+  label: provider,
+}));
+
+// Currency options will be computed dynamically based on selected countries
+
+const goalTypeOptions: ComboboxOption[] = GOAL_TYPES.map((gt) => ({
+  value: gt.value,
+  label: gt.label,
+}));
+
+export default function DealForm() {
+  const [, setLocation] = useLocation();
+  const [matchNew] = useRoute("/deals/new");
+  const [matchEdit, params] = useRoute("/deals/:id/edit");
+  const { toast } = useToast();
+
+  const isEditing = Boolean(matchEdit);
+  const dealId = params?.id;
+
+  const { data: existingDeal, isLoading: dealLoading } = useQuery<Deal>({
+    queryKey: ["/api/deals", dealId],
+    enabled: isEditing && Boolean(dealId),
+  });
+
+  const { data: brands } = useQuery<Brand[]>({
+    queryKey: ["/api/brands"],
+  });
+
+  const { data: agencies } = useQuery<Agency[]>({
+    queryKey: ["/api/agencies"],
+  });
+
+  const { data: sspPartners } = useQuery<SspPartner[]>({
+    queryKey: ["/api/ssp-partners"],
+  });
+
+  const { data: dspPartners } = useQuery<DspPartner[]>({
+    queryKey: ["/api/dsp-partners"],
+  });
+
+  const brandOptions: ComboboxOption[] = useMemo(() => {
+    return (brands || []).map((brand) => ({
+      value: brand.id,
+      label: brand.name,
+    }));
+  }, [brands]);
+
+  const agencyOptions: ComboboxOption[] = useMemo(() => {
+    return (agencies || []).map((agency) => {
+      const countryName = agency.country 
+        ? COUNTRIES.find(c => c.code === agency.country)?.name || agency.country
+        : undefined;
+      return {
+        value: agency.id,
+        label: agency.name,
+        description: countryName,
+      };
+    });
+  }, [agencies]);
+
+  const sspOptions: ComboboxOption[] = useMemo(() => {
+    return (sspPartners || []).map((ssp) => ({
+      value: ssp.id,
+      label: ssp.name,
+    }));
+  }, [sspPartners]);
+
+  const dspOptions: ComboboxOption[] = useMemo(() => {
+    return (dspPartners || []).map((dsp) => ({
+      value: dsp.id,
+      label: dsp.name,
+    }));
+  }, [dspPartners]);
+
+  // Generate default deal name with format Deal_Jan_23_26_001
+  const generateDealName = () => {
+    const now = new Date();
+    const month = now.toLocaleDateString("en-US", { month: "short" });
+    const day = now.getDate().toString().padStart(2, "0");
+    const year = now.getFullYear().toString().slice(-2);
+    return `Deal_${month}_${day}_${year}_001`;
+  };
+  const defaultDealName = isEditing ? "" : generateDealName();
+
+  const form = useForm<DealFormData>({
+    resolver: zodResolver(dealFormSchema),
+    defaultValues: {
+      name: defaultDealName,
+      status: "active",
+      externalDealId: "",
+      billable: true,
+      mediaType: "dooh",
+      sspId: "ssp-influence-default",
+      dealType: "traditional",
+      brandId: "",
+      clientType: "direct",
+      agencyId: "",
+      dspId: "dsp-activate-default",
+      seatName: "",
+      seatId: "",
+      adPlayVerificationEnabled: false,
+      adPlayVerificationProvider: "",
+      countries: ["MY"],
+      currency: "USD",
+      budget: "",
+      goalType: "",
+      goalValue: "",
+      minimumTargetThreshold: "",
+      hardStop: false,
+    },
+  });
+
+  // Watch fields for conditional logic
+  const watchedClientType = useWatch({ control: form.control, name: "clientType" });
+  const watchedDealType = useWatch({ control: form.control, name: "dealType" });
+  const watchedBrandId = useWatch({ control: form.control, name: "brandId" });
+  const watchedAgencyId = useWatch({ control: form.control, name: "agencyId" });
+  const watchedDspId = useWatch({ control: form.control, name: "dspId" });
+  const watchedSspId = useWatch({ control: form.control, name: "sspId" });
+  const watchedCountries = useWatch({ control: form.control, name: "countries" });
+  const watchedSeatName = useWatch({ control: form.control, name: "seatName" });
+  const watchedCurrency = useWatch({ control: form.control, name: "currency" });
+  const adPlayVerificationEnabled = useWatch({ control: form.control, name: "adPlayVerificationEnabled" });
+
+  // Check if deal type is programmatic
+  const isProgrammatic = watchedDealType !== "traditional";
+  const isPG = watchedDealType === "pg";
+
+  // Show DSP fields when programmatic AND (agency or brand selected)
+  const showDspFields = isProgrammatic && (watchedAgencyId || watchedBrandId);
+
+  // Get seat options for selected DSP
+  const seatOptions: ComboboxOption[] = useMemo(() => {
+    if (!watchedDspId) return [];
+    return DUMMY_DSP_SEATS
+      .filter((seat) => seat.dspId === watchedDspId)
+      .map((seat) => ({
+        value: seat.seatName,
+        label: seat.seatName,
+      }));
+  }, [watchedDspId]);
+
+  // Get seat ID for selected seat name
+  const selectedSeatId = useMemo(() => {
+    if (!watchedDspId || !watchedSeatName) return "";
+    const seat = DUMMY_DSP_SEATS.find(
+      (s) => s.dspId === watchedDspId && s.seatName === watchedSeatName
+    );
+    return seat?.seatId || "";
+  }, [watchedDspId, watchedSeatName]);
+
+  // Update seat ID when seat name changes
+  useEffect(() => {
+    form.setValue("seatId", selectedSeatId);
+  }, [selectedSeatId, form]);
+
+  // Update currency when countries change (use first country's currency)
+  useEffect(() => {
+    if (watchedCountries && watchedCountries.length > 0 && !isEditing) {
+      const firstCountry = watchedCountries[0];
+      const currency = COUNTRY_CURRENCY_MAP[firstCountry] || "USD";
+      form.setValue("currency", currency);
+    }
+  }, [watchedCountries, form, isEditing]);
+
+  // State for countries popover
+  const [countriesOpen, setCountriesOpen] = useState(false);
+  
+  // State for create brand/agency drawer
+  const [brandDrawerOpen, setBrandDrawerOpen] = useState(false);
+  const [agencyDrawerOpen, setAgencyDrawerOpen] = useState(false);
+
+  // State for deal type selection
+  const [dealTypeCategory, setDealTypeCategory] = useState<"traditional" | "programmatic">("traditional");
+
+  // State for tracking visible section for Quick Tips
+  const [visibleSection, setVisibleSection] = useState<TipSection>("basic");
+
+  // Refs for section tracking
+  const basicSectionRef = useRef<HTMLDivElement>(null);
+  const sspSectionRef = useRef<HTMLDivElement>(null);
+  const brandSectionRef = useRef<HTMLDivElement>(null);
+  const budgetSectionRef = useRef<HTMLDivElement>(null);
+  const formContainerRef = useRef<HTMLDivElement>(null);
+
+  // IntersectionObserver for tracking visible sections
+  useEffect(() => {
+    const options = {
+      root: formContainerRef.current,
+      rootMargin: "-20% 0px -60% 0px",
+      threshold: 0,
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const sectionId = entry.target.getAttribute("data-section");
+          if (sectionId) {
+            setVisibleSection(sectionId as TipSection);
+          }
+        }
+      });
+    }, options);
+
+    const sections = [basicSectionRef.current, sspSectionRef.current, brandSectionRef.current, budgetSectionRef.current];
+    sections.forEach((section) => {
+      if (section) observer.observe(section);
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  // Find the selected brand for insights panel
+  const selectedBrand = useMemo(() => {
+    if (!watchedBrandId || !brands) return null;
+    return brands.find((b) => b.id === watchedBrandId) || null;
+  }, [watchedBrandId, brands]);
+
+  // Dynamic currency options based on selected countries
+  const currencyOptions: ComboboxOption[] = useMemo(() => {
+    if (!watchedCountries || watchedCountries.length === 0) {
+      // Show all currencies when no countries selected
+      return CURRENCIES.map((c) => ({ value: c.value, label: c.label }));
+    }
+    
+    // Get unique currencies from selected countries
+    const countryCurrencies = new Set<string>();
+    watchedCountries.forEach((countryCode) => {
+      const currency = COUNTRY_CURRENCY_MAP[countryCode];
+      if (currency) {
+        countryCurrencies.add(currency);
+      }
+    });
+    
+    // Always include USD as a fallback option
+    countryCurrencies.add("USD");
+    
+    // Filter CURRENCIES to only include those from selected countries
+    return CURRENCIES
+      .filter((c) => countryCurrencies.has(c.value))
+      .map((c) => ({ value: c.value, label: c.label }));
+  }, [watchedCountries]);
+
+  // Check if selected currency differs from any selected country's currency (for margin warning)
+  const currencyMismatchWarning = useMemo(() => {
+    if (!watchedCurrency || !watchedCountries || watchedCountries.length === 0) return null;
+    
+    const mismatchedCountries: string[] = [];
+    watchedCountries.forEach((countryCode) => {
+      const countryCurrency = COUNTRY_CURRENCY_MAP[countryCode];
+      if (countryCurrency && countryCurrency !== watchedCurrency) {
+        const country = COUNTRIES.find((c) => c.code === countryCode);
+        if (country) {
+          mismatchedCountries.push(country.name);
+        }
+      }
+    });
+    
+    if (mismatchedCountries.length === 0) return null;
+    return mismatchedCountries;
+  }, [watchedCurrency, watchedCountries]);
+
+  useEffect(() => {
+    if (existingDeal) {
+      const isProgDeal = existingDeal.dealType !== "traditional";
+      setDealTypeCategory(isProgDeal ? "programmatic" : "traditional");
+      
+      form.reset({
+        name: existingDeal.name,
+        status: (existingDeal.status as "active" | "paused") ?? "active",
+        externalDealId: existingDeal.externalDealId ?? "",
+        billable: existingDeal.billable ?? true,
+        mediaType: (existingDeal.mediaType as "dooh" | "mobile" | "youtube" | "ctv") ?? "dooh",
+        sspId: existingDeal.sspId ?? "ssp-influence-default",
+        dealType: (existingDeal.dealType as any) ?? "traditional",
+        brandId: existingDeal.brandId ?? "",
+        clientType: (existingDeal.clientType as "direct" | "agency") ?? "direct",
+        agencyId: existingDeal.agencyId ?? "",
+        dspId: existingDeal.dspId ?? "dsp-activate-default",
+        seatName: existingDeal.seatName ?? "",
+        seatId: existingDeal.seatId ?? "",
+        adPlayVerificationEnabled: existingDeal.adPlayVerificationEnabled ?? false,
+        adPlayVerificationProvider: existingDeal.adPlayVerificationProvider ?? "",
+        countries: existingDeal.countries ?? ["MY"],
+        currency: existingDeal.currency ?? "USD",
+        budget: existingDeal.budget ? String(existingDeal.budget) : "",
+        goalType: existingDeal.goalType ?? "",
+        goalValue: existingDeal.goalValue ? String(existingDeal.goalValue) : "",
+        minimumTargetThreshold: existingDeal.minimumTargetThreshold ? String(existingDeal.minimumTargetThreshold) : "",
+        hardStop: existingDeal.hardStop ?? false,
+      });
+    }
+  }, [existingDeal, form]);
+
+  const createMutation = useMutation({
+    mutationFn: async (data: DealFormData) => {
+      return apiRequest("POST", "/api/deals", {
+        ...data,
+        brandId: data.brandId || undefined,
+        agencyId: data.agencyId || undefined,
+
+        dspId: data.dspId || undefined,
+        countries: data.countries.length > 0 ? data.countries : undefined,
+        budget: data.budget ? parseFloat(data.budget) : undefined,
+        goalValue: data.goalValue ? parseInt(data.goalValue) : undefined,
+        minimumTargetThreshold: data.minimumTargetThreshold ? parseInt(data.minimumTargetThreshold) : undefined,
+        adPlayVerificationProvider: data.adPlayVerificationEnabled ? data.adPlayVerificationProvider : undefined,
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/deals"] });
+      toast({
+        title: "Deal created",
+        description: "Your deal has been created successfully.",
+      });
+      setLocation("/deals");
+    },
+    onError: () => {
+      toast({
+        title: "Error",
+        description: "Failed to create deal. Please try again.",
+        variant: "destructive",
+      });
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: async (data: DealFormData) => {
+      return apiRequest("PATCH", `/api/deals/${dealId}`, {
+        ...data,
+        brandId: data.brandId || undefined,
+        agencyId: data.agencyId || undefined,
+
+        dspId: data.dspId || undefined,
+        countries: data.countries.length > 0 ? data.countries : undefined,
+        budget: data.budget ? parseFloat(data.budget) : undefined,
+        goalValue: data.goalValue ? parseInt(data.goalValue) : undefined,
+        minimumTargetThreshold: data.minimumTargetThreshold ? parseInt(data.minimumTargetThreshold) : undefined,
+        adPlayVerificationProvider: data.adPlayVerificationEnabled ? data.adPlayVerificationProvider : undefined,
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/deals"] });
+      queryClient.invalidateQueries({ queryKey: ["/api/deals", dealId] });
+      toast({
+        title: "Deal updated",
+        description: "Your deal has been updated successfully.",
+      });
+      setLocation("/deals");
+    },
+    onError: () => {
+      toast({
+        title: "Error",
+        description: "Failed to update deal. Please try again.",
+        variant: "destructive",
+      });
+    },
+  });
+
+  const onSubmit = (data: DealFormData) => {
+    if (isEditing) {
+      updateMutation.mutate(data);
+    } else {
+      createMutation.mutate(data);
+    }
+  };
+
+  const handleCancel = () => {
+    setLocation("/deals");
+  };
+
+  const isSubmitting = createMutation.isPending || updateMutation.isPending;
+  const isLoadingData = isEditing && dealLoading;
+
+  if (isLoadingData) {
+    return (
+      <div className="flex flex-col gap-6 p-6">
+        <PageHeader
+          title={isEditing ? "Edit Deal" : "New Deal"}
+          description={isEditing ? "Update deal details" : "Create a new advertising deal"}
+        />
+        <Card>
+          <CardContent className="pt-6 space-y-6">
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-6 w-48" />
+            <Skeleton className="h-10 w-full" />
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col min-h-0 h-full">
+      <div ref={formContainerRef} className="flex-1 min-h-0 overflow-auto">
+        <div className="flex flex-col gap-6 p-6 pb-6">
+          <PageHeader
+            title={isEditing ? "Edit Deal" : "New Deal"}
+            description={isEditing ? "Update deal details" : "Create a new advertising deal"}
+            actions={
+              <Button
+                variant="outline"
+                onClick={handleCancel}
+                data-testid="button-back-deals"
+              >
+                <ArrowLeft className="h-4 w-4 mr-2" />
+                Back to Deals
+              </Button>
+            }
+          />
+
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <div className="lg:col-span-2">
+              <Card>
+                <CardContent className="pt-6">
+                  <div className="flex items-center gap-3 mb-6">
+                    <div className="p-2 rounded-lg bg-muted">
+                      <User className="h-5 w-5 text-muted-foreground" />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold">Deal Details</h3>
+                      <p className="text-sm text-muted-foreground">Set up your deal information</p>
+                    </div>
+                  </div>
+                  <Form {...form}>
+                    <form id="deal-form" onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+                      {/* Section: Basic Info (Name, Status, External ID, Billable, Media Type) */}
+                      <div ref={basicSectionRef} data-section="basic" className="space-y-6">
+                        {/* Row 1: Name + Status */}
+                      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                        <FormField
+                          control={form.control}
+                          name="name"
+                          render={({ field }) => (
+                            <FormItem className="md:col-span-3">
+                              <FormLabel>Deal Name <span className="text-destructive">*</span></FormLabel>
+                              <FormControl>
+                                <Input
+                                  placeholder="Enter deal name"
+                                  {...field}
+                                  data-testid="input-deal-name"
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={form.control}
+                          name="status"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>Status</FormLabel>
+                              <FormControl>
+                                <SearchableCombobox
+                                  options={statusOptions}
+                                  value={field.value}
+                                  onValueChange={field.onChange}
+                                  placeholder="Select..."
+                                  searchPlaceholder="Search..."
+                                  emptyMessage="No status found."
+                                  disabled={existingDeal?.reopened ?? false}
+                                  data-testid="combobox-status"
+                                />
+                              </FormControl>
+                              {existingDeal?.reopened && (
+                                <p className="text-xs text-muted-foreground">Status cannot be changed after reopening</p>
+                              )}
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      </div>
+
+                      {/* Row 2: External Deal ID + Billable */}
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <FormField
+                          control={form.control}
+                          name="externalDealId"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>External Deal ID</FormLabel>
+                              <FormControl>
+                                <Input
+                                  placeholder="Enter external deal ID"
+                                  {...field}
+                                  disabled={existingDeal?.reopened ?? false}
+                                  data-testid="input-external-deal-id"
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={form.control}
+                          name="billable"
+                          render={({ field }) => (
+                            <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                              <div className="space-y-0.5">
+                                <FormLabel className="text-base">Billable</FormLabel>
+                                <FormDescription>
+                                  Mark this deal as billable
+                                </FormDescription>
+                              </div>
+                              <FormControl>
+                                <Switch
+                                  checked={field.value}
+                                  onCheckedChange={field.onChange}
+                                  disabled={existingDeal?.reopened ?? false}
+                                  data-testid="switch-billable"
+                                />
+                              </FormControl>
+                            </FormItem>
+                          )}
+                        />
+                      </div>
+
+                      {/* Media Type */}
+                      <FormField
+                        control={form.control}
+                        name="mediaType"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>Media Type <span className="text-destructive">*</span></FormLabel>
+                            <FormControl>
+                              <SearchableCombobox
+                                options={mediaTypeOptions}
+                                value={field.value}
+                                onValueChange={field.onChange}
+                                placeholder="Select media type..."
+                                searchPlaceholder="Search media types..."
+                                emptyMessage="No media types found."
+                                disabled={existingDeal?.reopened ?? false}
+                                data-testid="combobox-media-type"
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+
+                      </div>
+                      {/* End of Basic Section */}
+
+                      {/* Section: SSP and Deal Type */}
+                      <div ref={sspSectionRef} data-section="ssp" className="space-y-6">
+                      {/* SSP Partner */}
+                      <FormField
+                        control={form.control}
+                        name="sspId"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>SSP Partner <span className="text-destructive">*</span></FormLabel>
+                            <FormControl>
+                              <SearchableCombobox
+                                options={sspOptions}
+                                value={field.value}
+                                onValueChange={field.onChange}
+                                placeholder="Select SSP partner..."
+                                searchPlaceholder="Search SSP partners..."
+                                emptyMessage="No SSP partners found."
+                                disabled={existingDeal?.reopened ?? false}
+                                data-testid="combobox-ssp"
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+
+                      {/* Deal Type */}
+                      <div className="space-y-4">
+                        <FormItem>
+                          <FormLabel>Deal Type <span className="text-destructive">*</span></FormLabel>
+                          {existingDeal?.reopened ? (
+                            <div className="space-y-2">
+                              <div className="flex items-center gap-2">
+                                <Badge variant="outline" className="text-sm">
+                                  {dealTypeCategory === "traditional" ? "Traditional" : "Programmatic"}
+                                  {dealTypeCategory === "programmatic" && watchedDealType !== "traditional" && (
+                                    <span className="ml-1">({DEAL_TYPES.find(dt => dt.value === watchedDealType)?.label || watchedDealType})</span>
+                                  )}
+                                </Badge>
+                                <Badge variant="secondary" className="text-xs">From Deal</Badge>
+                              </div>
+                              <p className="text-sm text-muted-foreground">
+                                Deal type cannot be changed after the deal has been reopened.
+                              </p>
+                            </div>
+                          ) : (
+                            <div className="flex gap-2">
+                              <Button
+                                type="button"
+                                variant={dealTypeCategory === "traditional" ? "default" : "outline"}
+                                onClick={() => {
+                                  setDealTypeCategory("traditional");
+                                  form.setValue("dealType", "traditional");
+                                }}
+                                data-testid="button-deal-type-traditional"
+                              >
+                                Traditional
+                              </Button>
+                              <Button
+                                type="button"
+                                variant={dealTypeCategory === "programmatic" ? "default" : "outline"}
+                                onClick={() => {
+                                  setDealTypeCategory("programmatic");
+                                  form.setValue("dealType", "pg");
+                                }}
+                                data-testid="button-deal-type-programmatic"
+                              >
+                                Programmatic
+                              </Button>
+                            </div>
+                          )}
+                        </FormItem>
+
+                        {dealTypeCategory === "programmatic" && !existingDeal?.reopened && (
+                          <FormField
+                            control={form.control}
+                            name="dealType"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>Programmatic Type</FormLabel>
+                                <FormControl>
+                                  <SearchableCombobox
+                                    options={programmaticSubtypeOptions}
+                                    value={field.value}
+                                    onValueChange={field.onChange}
+                                    placeholder="Select programmatic type..."
+                                    searchPlaceholder="Search..."
+                                    emptyMessage="No types found."
+                                    data-testid="combobox-programmatic-type"
+                                  />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                        )}
+                      </div>
+                      </div>
+                      {/* End of SSP Section */}
+
+                      {/* Section: Brand and Client */}
+                      <div ref={brandSectionRef} data-section="brand" className="space-y-6">
+                      {/* Brand */}
+                      <FormField
+                        control={form.control}
+                        name="brandId"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>
+                              <div className="flex items-center gap-2">
+                                <Tag className="h-4 w-4" />
+                                Brand
+                              </div>
+                            </FormLabel>
+                            <FormControl>
+                              <SearchableCombobox
+                                options={brandOptions}
+                                value={field.value}
+                                onValueChange={field.onChange}
+                                placeholder="Select brand..."
+                                searchPlaceholder="Search brands..."
+                                emptyMessage="No brands found."
+                                disabled={existingDeal?.reopened ?? false}
+                                data-testid="combobox-brand"
+                                footer={
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="sm"
+                                    className="w-full justify-start"
+                                    data-testid="button-create-brand"
+                                  >
+                                    <Plus className="h-4 w-4 mr-2" />
+                                    Create New Brand
+                                  </Button>
+                                }
+                                onFooterClick={() => setBrandDrawerOpen(true)}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+
+                      {/* Client Type */}
+                      <FormField
+                        control={form.control}
+                        name="clientType"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>
+                              <div className="flex items-center gap-2">
+                                <User className="h-4 w-4" />
+                                Client <span className="text-destructive">*</span>
+                              </div>
+                            </FormLabel>
+                            <FormControl>
+                              <SearchableCombobox
+                                options={clientTypeOptions}
+                                value={field.value}
+                                onValueChange={(value) => {
+                                  field.onChange(value);
+                                  if (value === "direct") {
+                                    form.setValue("agencyId", "");
+                                  }
+                                }}
+                                placeholder="Select client type..."
+                                searchPlaceholder="Search..."
+                                emptyMessage="No options found."
+                                disabled={existingDeal?.reopened ?? false}
+                                data-testid="combobox-client-type"
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+
+                      {watchedClientType === "agency" && (
+                        <FormField
+                          control={form.control}
+                          name="agencyId"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>
+                                <div className="flex items-center gap-2">
+                                  <Building2 className="h-4 w-4" />
+                                  Agency
+                                </div>
+                              </FormLabel>
+                              <FormControl>
+                                <SearchableCombobox
+                                  options={agencyOptions}
+                                  value={field.value}
+                                  onValueChange={field.onChange}
+                                  placeholder="Select agency..."
+                                  searchPlaceholder="Search agencies..."
+                                  emptyMessage="No agencies found."
+                                  disabled={existingDeal?.reopened ?? false}
+                                  data-testid="combobox-agency"
+                                  footer={
+                                    <Button
+                                      type="button"
+                                      variant="ghost"
+                                      size="sm"
+                                      className="w-full justify-start"
+                                      data-testid="button-create-agency"
+                                    >
+                                      <Plus className="mr-2 h-4 w-4" />
+                                      Add Agency
+                                    </Button>
+                                  }
+                                  onFooterClick={() => setAgencyDrawerOpen(true)}
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      )}
+
+                      {/* DSP Configuration - Show when Programmatic AND (Agency or Brand selected) */}
+                      {showDspFields && (
+                        <div className="space-y-4 p-4 border rounded-lg bg-muted/50">
+                          <h4 className="font-medium text-sm">DSP Configuration</h4>
+                          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                            <FormField
+                              control={form.control}
+                              name="dspId"
+                              render={({ field }) => (
+                                <FormItem>
+                                  <FormLabel>DSP Partner</FormLabel>
+                                  <FormControl>
+                                    <SearchableCombobox
+                                      options={dspOptions}
+                                      value={field.value}
+                                      onValueChange={(value) => {
+                                        field.onChange(value);
+                                        form.setValue("seatName", "");
+                                        form.setValue("seatId", "");
+                                      }}
+                                      placeholder="Select DSP..."
+                                      searchPlaceholder="Search DSPs..."
+                                      emptyMessage="No DSPs found."
+                                      disabled={existingDeal?.reopened ?? false}
+                                      data-testid="combobox-dsp"
+                                    />
+                                  </FormControl>
+                                  <FormMessage />
+                                </FormItem>
+                              )}
+                            />
+
+                            <FormField
+                              control={form.control}
+                              name="seatName"
+                              render={({ field }) => (
+                                <FormItem>
+                                  <FormLabel>Seat Name</FormLabel>
+                                  <FormControl>
+                                    <SearchableCombobox
+                                      options={seatOptions}
+                                      value={field.value}
+                                      onValueChange={field.onChange}
+                                      placeholder="Select seat..."
+                                      searchPlaceholder="Search seats..."
+                                      emptyMessage="No seats found."
+                                      disabled={!watchedDspId || (existingDeal?.reopened ?? false)}
+                                      data-testid="combobox-seat-name"
+                                    />
+                                  </FormControl>
+                                  <FormMessage />
+                                </FormItem>
+                              )}
+                            />
+
+                            <FormField
+                              control={form.control}
+                              name="seatId"
+                              render={({ field }) => (
+                                <FormItem>
+                                  <FormLabel>Seat ID</FormLabel>
+                                  <FormControl>
+                                    <Input
+                                      {...field}
+                                      disabled
+                                      placeholder="Auto-populated"
+                                      data-testid="input-seat-id"
+                                    />
+                                  </FormControl>
+                                  <FormDescription>
+                                    Fetched from Admin Console
+                                  </FormDescription>
+                                  <FormMessage />
+                                </FormItem>
+                              )}
+                            />
+                          </div>
+                        </div>
+                      )}
+
+                      </div>
+                      {/* End of Brand Section */}
+
+                      {/* Section: Budget, Goals, and Verification */}
+                      <div ref={budgetSectionRef} data-section="budget" className="space-y-6">
+                      {/* AdPlay Verification */}
+                      <FormField
+                        control={form.control}
+                        name="adPlayVerificationEnabled"
+                        render={({ field }) => (
+                          <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                            <FormControl>
+                              <Checkbox
+                                checked={field.value}
+                                onCheckedChange={field.onChange}
+                                data-testid="checkbox-adplay-verification"
+                              />
+                            </FormControl>
+                            <div className="space-y-1 leading-none">
+                              <FormLabel>AdPlay Verification Report</FormLabel>
+                            </div>
+                          </FormItem>
+                        )}
+                      />
+
+                      {adPlayVerificationEnabled && (
+                        <FormField
+                          control={form.control}
+                          name="adPlayVerificationProvider"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>Service Provider</FormLabel>
+                              <FormControl>
+                                <SearchableCombobox
+                                  options={providerOptions}
+                                  value={field.value}
+                                  onValueChange={field.onChange}
+                                  placeholder="Select service provider..."
+                                  searchPlaceholder="Search providers..."
+                                  emptyMessage="No providers found."
+                                  data-testid="combobox-service-provider"
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      )}
+
+                      {/* Countries */}
+                      <FormField
+                        control={form.control}
+                        name="countries"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>
+                              <div className="flex items-center gap-2">
+                                <Globe className="h-4 w-4" />
+                                Countries <span className="text-destructive">*</span>
+                              </div>
+                            </FormLabel>
+                            <FormDescription>
+                              Select countries for this deal. Line items can only target locations within these countries.
+                            </FormDescription>
+                            <Popover open={countriesOpen} onOpenChange={setCountriesOpen}>
+                              <PopoverTrigger asChild>
+                                <FormControl>
+                                  <Button
+                                    variant="outline"
+                                    role="combobox"
+                                    className="w-full justify-between h-auto min-h-10"
+                                    disabled={existingDeal?.reopened ?? false}
+                                    data-testid="button-countries-select"
+                                  >
+                                    {(field.value || []).length > 0 ? (
+                                      <div className="flex flex-wrap gap-1">
+                                        {(field.value || []).slice(0, 3).map((code) => {
+                                          const country = COUNTRIES.find((c) => c.code === code);
+                                          return country ? (
+                                            <Badge
+                                              key={code}
+                                              variant="secondary"
+                                              className="flex items-center gap-1"
+                                              data-testid={`badge-country-${code}`}
+                                            >
+                                              <span>{country.flag}</span>
+                                              <span>{country.name}</span>
+                                              <button
+                                                type="button"
+                                                className="h-3 w-3 cursor-pointer hover:opacity-70"
+                                                onClick={(e) => {
+                                                  e.stopPropagation();
+                                                  field.onChange((field.value || []).filter((v) => v !== code));
+                                                }}
+                                                data-testid={`button-remove-country-${code}`}
+                                              >
+                                                <X className="h-3 w-3" />
+                                              </button>
+                                            </Badge>
+                                          ) : null;
+                                        })}
+                                        {(field.value || []).length > 3 && (
+                                          <Badge variant="secondary" data-testid="badge-country-more">
+                                            +{(field.value || []).length - 3} more
+                                          </Badge>
+                                        )}
+                                      </div>
+                                    ) : (
+                                      <span className="text-muted-foreground">Select countries...</span>
+                                    )}
+                                    <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                  </Button>
+                                </FormControl>
+                              </PopoverTrigger>
+                              <PopoverContent className="w-[400px] p-0" align="start">
+                                <Command>
+                                  <CommandInput placeholder="Search countries..." data-testid="input-search-countries" />
+                                  <CommandList>
+                                    <CommandEmpty>No country found.</CommandEmpty>
+                                    <CommandGroup>
+                                      {COUNTRIES.map((country) => {
+                                        const values = field.value || [];
+                                        const isSelected = values.includes(country.code);
+                                        return (
+                                          <CommandItem
+                                            key={country.code}
+                                            value={country.name}
+                                            onSelect={() => {
+                                              if (isSelected) {
+                                                field.onChange(values.filter((v) => v !== country.code));
+                                              } else {
+                                                field.onChange([...values, country.code]);
+                                              }
+                                            }}
+                                            data-testid={`option-country-${country.code}`}
+                                          >
+                                            <div className="flex items-center gap-2 w-full">
+                                              <Checkbox checked={isSelected} className="pointer-events-none" />
+                                              <span>{country.flag}</span>
+                                              <span>{country.name}</span>
+                                            </div>
+                                          </CommandItem>
+                                        );
+                                      })}
+                                    </CommandGroup>
+                                  </CommandList>
+                                </Command>
+                              </PopoverContent>
+                            </Popover>
+                            {(field.value || []).length > 0 && (
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => field.onChange([])}
+                                className="mt-1"
+                                data-testid="button-clear-countries"
+                              >
+                                <X className="h-3 w-3 mr-1" />
+                                Clear all
+                              </Button>
+                            )}
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+
+                      {/* Currency + Budget */}
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <FormField
+                          control={form.control}
+                          name="currency"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>
+                                <div className="flex items-center gap-2">
+                                  <DollarSign className="h-4 w-4" />
+                                  Currency <span className="text-destructive">*</span>
+                                </div>
+                              </FormLabel>
+                              <FormControl>
+                                <SearchableCombobox
+                                  options={currencyOptions}
+                                  value={field.value}
+                                  onValueChange={field.onChange}
+                                  placeholder="Select currency..."
+                                  searchPlaceholder="Search currencies..."
+                                  emptyMessage="No currencies found."
+                                  disabled={existingDeal?.reopened ?? false}
+                                  data-testid="combobox-currency"
+                                />
+                              </FormControl>
+                              <FormMessage />
+                              {currencyMismatchWarning && currencyMismatchWarning.length > 0 && (
+                                <div className="mt-2 p-2 rounded-md bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800" data-testid="currency-margin-warning">
+                                  <div className="flex items-start gap-2">
+                                    <AlertTriangle className="h-3.5 w-3.5 text-amber-600 dark:text-amber-400 mt-0.5 flex-shrink-0" />
+                                    <div className="text-xs">
+                                      <span className="font-medium text-amber-800 dark:text-amber-300">
+                                        3% margin applied
+                                      </span>
+                                      <span className="text-amber-700 dark:text-amber-400">
+                                        {" "}for {currencyMismatchWarning.join(", ")} floor rates
+                                      </span>
+                                    </div>
+                                  </div>
+                                </div>
+                              )}
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={form.control}
+                          name="budget"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>Budget</FormLabel>
+                              <FormControl>
+                                <Input
+                                  type="number"
+                                  placeholder="Enter budget amount"
+                                  {...field}
+                                  disabled={existingDeal?.reopened ?? false}
+                                  data-testid="input-budget"
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      </div>
+
+                      {/* Goal */}
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <FormField
+                          control={form.control}
+                          name="goalType"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>
+                                <div className="flex items-center gap-2">
+                                  <Target className="h-4 w-4" />
+                                  Goal Type
+                                </div>
+                              </FormLabel>
+                              <FormControl>
+                                <SearchableCombobox
+                                  options={goalTypeOptions}
+                                  value={field.value}
+                                  onValueChange={field.onChange}
+                                  placeholder="Select goal type..."
+                                  searchPlaceholder="Search goal types..."
+                                  emptyMessage="No goal types found."
+                                  disabled={existingDeal?.reopened ?? false}
+                                  data-testid="combobox-goal-type"
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={form.control}
+                          name="goalValue"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>Goal Value</FormLabel>
+                              <FormControl>
+                                <Input
+                                  type="number"
+                                  placeholder="Enter goal value"
+                                  {...field}
+                                  disabled={existingDeal?.reopened ?? false}
+                                  data-testid="input-goal-value"
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      </div>
+
+                      {/* PG-only fields: Minimum Target Threshold + Hard Stop */}
+                      {isPG && (
+                        <div className="space-y-4 p-4 border rounded-lg bg-muted/50">
+                          <h4 className="font-medium text-sm">Programmatic Guaranteed Settings</h4>
+                          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <FormField
+                              control={form.control}
+                              name="minimumTargetThreshold"
+                              render={({ field }) => (
+                                <FormItem>
+                                  <FormLabel>Minimum Target Threshold <span className="text-destructive">*</span></FormLabel>
+                                  <FormControl>
+                                    <Input
+                                      type="number"
+                                      placeholder="Enter threshold"
+                                      {...field}
+                                      disabled={existingDeal?.reopened ?? false}
+                                      data-testid="input-minimum-target-threshold"
+                                    />
+                                  </FormControl>
+                                  <FormDescription>
+                                    Minimum impressions guaranteed (required for PG)
+                                  </FormDescription>
+                                  <FormMessage />
+                                </FormItem>
+                              )}
+                            />
+
+                            <FormField
+                              control={form.control}
+                              name="hardStop"
+                              render={({ field }) => (
+                                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4 bg-background">
+                                  <div className="space-y-0.5">
+                                    <FormLabel className="text-base">Hard Stop</FormLabel>
+                                    <FormDescription>
+                                      Stop delivery when goal is reached
+                                    </FormDescription>
+                                  </div>
+                                  <FormControl>
+                                    <Switch
+                                      checked={field.value}
+                                      onCheckedChange={field.onChange}
+                                      disabled={existingDeal?.reopened ?? false}
+                                      data-testid="switch-hard-stop"
+                                    />
+                                  </FormControl>
+                                </FormItem>
+                              )}
+                            />
+                          </div>
+                        </div>
+                      )}
+                      </div>
+                      {/* End of Budget Section */}
+                    </form>
+                  </Form>
+                </CardContent>
+              </Card>
+            </div>
+
+            <div className="lg:col-span-1">
+              <div className="sticky top-6 space-y-4">
+                {/* Show Brand Info card when brand is selected and in brand section */}
+                {selectedBrand && visibleSection === "brand" ? (
+                  <Card data-testid="card-brand-info">
+                    <CardHeader className="pb-3">
+                      <CardTitle className="text-sm font-medium flex items-center gap-2" data-testid="title-brand-info">
+                        <Tag className="h-4 w-4 text-primary" />
+                        Brand Information
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent className="pt-0 space-y-4">
+                      {/* Brand Logo Placeholder */}
+                      <div className="flex items-center gap-3">
+                        <div className="w-16 h-16 rounded-lg bg-muted flex items-center justify-center border">
+                          <span className="text-2xl font-bold text-muted-foreground">
+                            {selectedBrand.name.charAt(0).toUpperCase()}
+                          </span>
+                        </div>
+                        <div>
+                          <h4 className="font-semibold" data-testid="text-brand-name">{selectedBrand.name}</h4>
+                          <p className="text-sm text-muted-foreground" data-testid="text-brand-status">
+                            {selectedBrand.status === "active" ? "Active Brand" : "Inactive Brand"}
+                          </p>
+                        </div>
+                      </div>
+                      
+                      {/* IAB Category */}
+                      {selectedBrand.iabCategory && (
+                        <div className="space-y-1">
+                          <label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                            IAB Category
+                          </label>
+                          <div className="flex items-center gap-2">
+                            <Badge variant="secondary" data-testid="badge-iab-category">
+                              {selectedBrand.iabCategory}
+                            </Badge>
+                          </div>
+                          <p className="text-xs text-muted-foreground mt-1" data-testid="text-iab-code">
+                            IAB Code: {selectedBrand.iabCategory.split(" ").map(word => word.charAt(0)).join("").toUpperCase()}
+                          </p>
+                        </div>
+                      )}
+                      
+                      {/* Brand Insights Link */}
+                      <div className="pt-2 border-t">
+                        <p className="text-xs text-muted-foreground">
+                          Brand selection enables personalized inventory recommendations in line items.
+                        </p>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ) : (
+                  /* Dynamic Quick Tips based on visible section */
+                  <Card data-testid="card-quick-tips">
+                    <CardHeader className="pb-3">
+                      <CardTitle className="text-sm font-medium flex items-center gap-2" data-testid="title-quick-tips">
+                        <Lightbulb className="h-4 w-4 text-amber-500" />
+                        {SECTION_TIPS[visibleSection].title}
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent className="pt-0">
+                      <ul className="space-y-2 text-sm text-muted-foreground">
+                        {SECTION_TIPS[visibleSection].tips.map((tip, index) => (
+                          <li key={index} className="flex items-start gap-2" data-testid={`text-tip-${index}`}>
+                            <span className="text-amber-500 mt-1 flex-shrink-0">•</span>
+                            <span>{tip}</span>
+                          </li>
+                        ))}
+                      </ul>
+                    </CardContent>
+                  </Card>
+                )}
+
+                {/* Market Insights when countries are selected */}
+                {watchedCountries && watchedCountries.length > 0 && (
+                  <MarketInsightsPanel selectedCountries={watchedCountries} />
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="shrink-0 border-t bg-background p-4">
+        <div className="flex justify-end gap-4">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleCancel}
+            disabled={isSubmitting}
+            data-testid="button-cancel"
+          >
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            form="deal-form"
+            disabled={isSubmitting}
+            data-testid="button-submit"
+          >
+            {isSubmitting && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+            {isEditing ? "Update Deal" : "Create Deal"}
+          </Button>
+        </div>
+      </div>
+
+      <CreateBrandDrawer
+        open={brandDrawerOpen}
+        onOpenChange={setBrandDrawerOpen}
+        onBrandCreated={(brandId) => {
+          form.setValue("brandId", brandId);
+        }}
+      />
+
+      <CreateAgencyDrawer
+        open={agencyDrawerOpen}
+        onOpenChange={setAgencyDrawerOpen}
+        onAgencyCreated={(agencyId) => {
+          form.setValue("agencyId", agencyId);
+        }}
+      />
+    </div>
+  );
+}