adserver-dashboard 1.0.0

package/client/src/pages/create-deal.tsx

@@ -0,0 +1,2093 @@
+import { useState, useRef, useEffect } from "react";
+import { useLocation, useRoute } from "wouter";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useTranslation } from "@/lib/i18n";
+import { Button } from "@moving-walls/design-system";
+import {
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "@moving-walls/design-system";
+import { Input } from "@moving-walls/design-system";
+import {
+  SelectRoot,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@moving-walls/design-system";
+import { Card, CardContent, CardHeader, CardTitle, Checkbox, Textarea } from "@moving-walls/design-system";
+import {
+  FileText,
+  Info,
+  Lightbulb,
+  Search,
+  Plus,
+  X,
+  ArrowLeft,
+  Building2,
+  Globe,
+  ExternalLink,
+  RefreshCw,
+  ChevronDown,
+  Tag,
+} from "lucide-react";
+import { Badge, cn } from "@moving-walls/design-system";
+import { MarketInsightsPanel } from "@/components/deals/market-insights-panel";
+import { useToast } from "@/hooks/use-toast";
+import { useAuth } from "@/contexts/auth-context";
+import {
+  InfluenceDealsAPI,
+  influenceDealsRequest,
+  formatAPIErrorForToast,
+  type Deal,
+} from "@/lib/influence-deals-api";
+import { fetchCompanyBrands, type CompanyBrand } from "@/lib/oauth-service";
+import {
+  fetchDemandSideCompanies,
+  type DemandSideCompany,
+} from "@/lib/company-api";
+import { API_CONFIG } from "@/lib/api-config";
+import { usePageTitle } from "@/hooks/use-page-title";
+import { getDspDropdownList, listDspBuyers, type DspBuyer, type DspDropdownItem } from "@/lib/dsp-buyer-api";
+
+const COUNTRIES = [
+  { value: "Malaysia", code: "MY", currency: "MYR", region: "APAC" },
+  { value: "Singapore", code: "SG", currency: "SGD", region: "APAC" },
+  { value: "Japan", code: "JP", currency: "JPY", region: "APAC" },
+  { value: "Indonesia", code: "ID", currency: "IDR", region: "APAC" },
+  { value: "Thailand", code: "TH", currency: "THB", region: "APAC" },
+  { value: "Philippines", code: "PH", currency: "PHP", region: "APAC" },
+  { value: "Australia", code: "AU", currency: "AUD", region: "APAC" },
+  { value: "United States", code: "US", currency: "USD", region: "NA" },
+  { value: "United Kingdom", code: "GB", currency: "GBP", region: "EMEA" },
+  { value: "Germany", code: "DE", currency: "EUR", region: "EMEA" },
+  { value: "France", code: "FR", currency: "EUR", region: "EMEA" },
+  { value: "India", code: "IN", currency: "INR", region: "APAC" },
+  { value: "China", code: "CN", currency: "CNY", region: "APAC" },
+  { value: "South Korea", code: "KR", currency: "KRW", region: "APAC" },
+  { value: "UAE", code: "AE", currency: "AED", region: "MENA" },
+];
+
+const CURRENCIES = [
+  { value: "USD", label: "USD - US Dollar" },
+  { value: "MYR", label: "MYR - Malaysian Ringgit" },
+  { value: "SGD", label: "SGD - Singapore Dollar" },
+  { value: "JPY", label: "JPY - Japanese Yen" },
+  { value: "GBP", label: "GBP - British Pound" },
+  { value: "EUR", label: "EUR - Euro" },
+  { value: "AUD", label: "AUD - Australian Dollar" },
+  { value: "IDR", label: "IDR - Indonesian Rupiah" },
+  { value: "THB", label: "THB - Thai Baht" },
+  { value: "PHP", label: "PHP - Philippine Peso" },
+  { value: "INR", label: "INR - Indian Rupee" },
+  { value: "CNY", label: "CNY - Chinese Yuan" },
+  { value: "KRW", label: "KRW - Korean Won" },
+  { value: "AED", label: "AED - UAE Dirham" },
+];
+
+const CLIENT_TYPE_OPTIONS = [
+  { value: "DIRECT_ADVERTISER", label: "Direct Advertiser" },
+  { value: "AGENCY", label: "Agency" },
+];
+
+const DEAL_TYPE_OPTIONS = [
+  { value: "GUARANTEED", label: "Programmatic Guaranteed" },
+  { value: "PREFERRED_DEAL", label: "Preferred Deal" },
+  { value: "PRIVATE_AUCTION", label: "Private Auction" },
+  { value: "EVERGREEN_PMP", label: "Evergreen PMP" },
+];
+
+const AUCTION_TYPE_OPTIONS = [
+  { value: "1", label: "First Price" },
+  { value: "2", label: "Second Price" },
+];
+
+const IMPRESSION_MULTIPLIER_OPTIONS = [
+  { value: "MAD", label: "Measure" },
+  { value: "CUSTOM", label: "Custom Impression" },
+];
+
+const TRANSACTION_TYPE_OPTIONS = [
+  { value: "SPOT", label: "Spot" },
+  { value: "AUDIENCE", label: "Audience" },
+];
+
+const COST_TYPE_OPTIONS = [
+  { value: "CPD", label: "CPD - Cost Per Day" },
+  { value: "CPM", label: "CPM - Cost Per Mille" },
+  { value: "CPS", label: "CPS - Cost Per Spot" },
+];
+
+const GOAL_TYPE_OPTIONS = [
+  { value: "IMPRESSIONS", label: "Impressions" },
+  { value: "REACH", label: "Reach" },
+  { value: "SHARE_OF_VOICE", label: "Share of Voice" },
+];
+
+
+const STATUS_OPTIONS = [
+  { value: "ACTIVE", label: "Active" },
+  { value: "PAUSED", label: "Paused" },
+  { value: "DRAFT", label: "Draft" },
+];
+
+const MEDIA_TYPE_OPTIONS = [
+  { value: "DOOH", label: "DOOH - Digital Out-of-Home" },
+  { value: "MOBILE", label: "Mobile" },
+  { value: "DISPLAY", label: "Display" },
+  { value: "VIDEO", label: "Video" },
+];
+
+const SSP_PARTNER_OPTIONS = [
+  { value: "INFLUENCE_SSP", label: "Influence SSP" },
+  { value: "HIVESTACK", label: "Hivestack" },
+  { value: "VISTAR", label: "Vistar" },
+  { value: "PLACE_EXCHANGE", label: "Place Exchange" },
+  { value: "VIOOH", label: "VIOOH" },
+  { value: "BROADSIGN", label: "Broadsign" },
+];
+
+type TipSection = "basic" | "supply" | "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",
+    ],
+  },
+  supply: {
+    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",
+    ],
+  },
+};
+
+const directModeSchemaBase = z.object({
+  mode: z.literal("DIRECT"),
+  name: z
+    .string()
+    .min(3, "Deal name must be at least 3 characters")
+    .max(200, "Deal name must not exceed 200 characters"),
+  brand: z.string().min(1, "Brand is required"),
+  clientType: z.enum(["DIRECT_ADVERTISER", "AGENCY"]),
+  agencyId: z.string().optional(),
+  approvalEmails: z.array(z.string().email()).optional(),
+  country: z.string().min(1, "Country is required"),
+  currency: z.string().min(1, "Currency is required"),
+  totalBudget: z.number().min(0, "Budget must be positive").optional(),
+  dailyBudgetCap: z
+    .number()
+    .min(0, "Daily budget cap must be positive")
+    .optional(),
+  goalType: z.enum(["IMPRESSIONS", "REACH", "SHARE_OF_VOICE"]).optional(),
+  goalValue: z.number().min(0, "Goal value must be positive").optional(),
+});
+
+const programmaticModeSchema = z.object({
+  mode: z.literal("PROGRAMMATIC"),
+  name: z
+    .string()
+    .min(3, "Deal name must be at least 3 characters")
+    .max(200, "Deal name must not exceed 200 characters"),
+  dealType: z.enum([
+    "GUARANTEED",
+    "PREFERRED_DEAL",
+    "PRIVATE_AUCTION",
+    "EVERGREEN_PMP",
+  ]),
+  buyers: z
+    .array(
+      z.object({
+        dsp: z.string().min(1, "DSP is required"),
+        seatId: z.string().min(1, "Seat ID is required"),
+        buyerName: z.string().min(1, "Buyer Name is required"),
+      }),
+    )
+    .min(1, "At least one buyer is required"),
+  auctionType: z.number().min(1).max(3),
+  transactionType: z.enum(["SPOT", "AUDIENCE"]),
+  impMultiplierType: z.enum(["MAD", "CUSTOM"]).optional(),
+  description: z.string().optional(),
+  currency: z.string().optional(),
+});
+
+const formSchema = z.discriminatedUnion("mode", [
+  directModeSchemaBase,
+  programmaticModeSchema,
+]);
+
+type FormData = z.infer<typeof formSchema>;
+
+export default function CreateDealPage() {
+  const { t } = useTranslation();
+  const [, setLocation] = useLocation();
+  const [matchEdit, paramsEdit] = useRoute("/deals/edit/:dealId");
+  const dealId = matchEdit ? paramsEdit?.dealId : null;
+  const isEditMode = !!dealId;
+  usePageTitle(isEditMode ? "Edit Deal" : "Create Deal");
+
+  const { toast } = useToast();
+  const { user } = useAuth();
+  const queryClient = useQueryClient();
+  const [mode, setMode] = useState<"DIRECT" | "PROGRAMMATIC">("DIRECT");
+  const [brandSearchOpen, setBrandSearchOpen] = useState(false);
+  const [brandSearch, setBrandSearch] = useState("");
+  const [debouncedBrandSearch, setDebouncedBrandSearch] = useState("");
+  const [brandPage, setBrandPage] = useState(1);
+  const [accumulatedBrands, setAccumulatedBrands] = useState<CompanyBrand[]>(
+    [],
+  );
+  const [emailInput, setEmailInput] = useState("");
+  const [approvalEmails, setApprovalEmails] = useState<string[]>([]);
+  const [sellerEmail, setSellerEmail] = useState("");
+  const [sellerEmailInitialized, setSellerEmailInitialized] = useState(false);
+  const [selectedAgency, setSelectedAgency] = useState<string>("");
+  const [agencySearchOpen, setAgencySearchOpen] = useState(false);
+  const [agencySearch, setAgencySearch] = useState("");
+  
+  // UI-only fields (not sent in API payload)
+  const [dealStatus, setDealStatus] = useState<string>("DRAFT");
+  const [mediaType, setMediaType] = useState<string>("DOOH");
+  const [sspPartner, setSspPartner] = useState<string>("INFLUENCE_SSP");
+  const [isNonBillable, setIsNonBillable] = useState<boolean>(false);
+  const [isHardStop, setIsHardStop] = useState<boolean>(false);
+  const [buyers, setBuyers] = useState<
+    { dsp: string; seatId: string; buyerName: string; buyerId?: string }[]
+  >([{ dsp: "", seatId: "", buyerName: "" }]);
+  const brandDropdownRef = useRef<HTMLDivElement>(null);
+  const agencyDropdownRef = useRef<HTMLDivElement>(null);
+  const [isDataLoaded, setIsDataLoaded] = useState(false);
+  const [visibleSection, setVisibleSection] = useState<TipSection>("basic");
+  const [isDealTypeLocked, setIsDealTypeLocked] = useState(false);
+  const [isDspLocked, setIsDspLocked] = useState(false);
+  const [selectedTransactionType, setSelectedTransactionType] = useState("");
+  const [impMultiplierType, setImpMultiplierType] = useState<string | null>(null);
+  const [sellerName, setSellerName] = useState("");
+  const [sellerPhone, setSellerPhone] = useState("");
+  const [description, setDescription] = useState("");
+  const formContainerRef = useRef<HTMLDivElement>(null);
+  const basicSectionRef = useRef<HTMLDivElement>(null);
+  const supplySectionRef = useRef<HTMLDivElement>(null);
+  const brandSectionRef = useRef<HTMLDivElement>(null);
+  const budgetSectionRef = useRef<HTMLDivElement>(null);
+
+  // Fetch existing deal data for edit mode
+  const { data: existingDeal, isLoading: isLoadingDeal } = useQuery({
+    queryKey: ["deal", dealId],
+    queryFn: async () => {
+      if (!dealId) return null;
+      const response = await influenceDealsRequest(
+        InfluenceDealsAPI.deals.get(dealId),
+      );
+      return response as Deal;
+    },
+    enabled: !!dealId,
+  });
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { errors },
+    reset,
+  } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      mode: "DIRECT",
+      name: "",
+      brand: "",
+      clientType: "DIRECT_ADVERTISER",
+      country: "Japan",
+      countries: [],
+      currency: "JPY",
+      totalBudget: undefined,
+      dailyBudgetCap: undefined,
+      goalType: undefined,
+      goalValue: undefined,
+    } as any,
+  });
+
+  const brand = watch("brand");
+  const dealType = watch("dealType" as any);
+  const clientType = watch("clientType" as any);
+
+  const { data: agenciesData, isLoading: isAgenciesLoading } = useQuery({
+    queryKey: ["agencies", clientType],
+    queryFn: fetchDemandSideCompanies,
+    staleTime: 0,
+    enabled: clientType === "AGENCY",
+  });
+
+  const agencies: DemandSideCompany[] = agenciesData || [];
+
+  const { data: dspOptions = [] } = useQuery({
+    queryKey: ["dsp-dropdown"],
+    queryFn: getDspDropdownList,
+  });
+
+  const [activeDspName, setActiveDspName] = useState("");
+  const [activeDspId, setActiveDspId] = useState("");
+
+  const { data: buyersForDsp = [] } = useQuery({
+    queryKey: ["dsp-buyers", activeDspName],
+    queryFn: () => listDspBuyers({ size: 200, sort: "seatName,asc", name: activeDspName }),
+    enabled: !!activeDspName,
+    staleTime: 0,
+  });
+
+  const handleAgencyChange = (agencyId: string) => {
+    setSelectedAgency(agencyId);
+    setValue("agencyId" as any, agencyId);
+  };
+
+  const getSelectedAgency = () => {
+    return agencies.find((a) => a.id === selectedAgency);
+  };
+
+  const handleCountryChange = (countryName: string) => {
+    const countryData = COUNTRIES.find((c) => c.value === countryName);
+    if (countryData) {
+      setValue("country" as any, countryName);
+      setValue("currency" as any, countryData.currency);
+    }
+  };
+
+  const normalizeCountry = (countryValue: string): string => {
+    if (!countryValue) return "Japan";
+    const byName = COUNTRIES.find((c) => c.value === countryValue);
+    if (byName) return byName.value;
+    const byCode = COUNTRIES.find(
+      (c) => c.code === countryValue || c.code === countryValue.toUpperCase(),
+    );
+    if (byCode) return byCode.value;
+    return "Japan";
+  };
+
+  useEffect(() => {
+    if (mode === "PROGRAMMATIC" && dealType && dealType !== "PRIVATE_AUCTION") {
+      setValue("auctionType" as any, 3);
+    }
+  }, [mode, dealType, setValue]);
+
+  // Auto-populate country from company's primary address when user data is available
+  useEffect(() => {
+    if (user?.company_country && !dealId) {
+      const normalizedCountry = normalizeCountry(user.company_country);
+      const countryData = COUNTRIES.find((c) => c.value === normalizedCountry);
+      if (countryData) {
+        setValue("country" as any, normalizedCountry);
+        setValue("currency" as any, countryData.currency);
+        console.log(
+          "[Deal] Auto-populated country from company address:",
+          normalizedCountry,
+        );
+      }
+    }
+  }, [user?.company_country, dealId, setValue]);
+
+  // Debounce brand search - reset accumulated brands and page when search changes
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedBrandSearch(brandSearch);
+      setBrandPage(1);
+      setAccumulatedBrands([]);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [brandSearch]);
+
+  // Debug log for user state and auto-refresh if company_id is missing
+  useEffect(() => {
+    console.log("[CreateDeal] User state:", {
+      hasUser: !!user,
+      company_id: user?.company_id,
+      name: user?.name,
+    });
+
+    // If user exists but company_id is missing, try to refresh auth after a delay
+    // Only do this once per session to avoid infinite reload loops
+    const reloadAttemptedKey = "brands_reload_attempted";
+    if (
+      user &&
+      !user.company_id &&
+      !sessionStorage.getItem(reloadAttemptedKey)
+    ) {
+      console.log(
+        "[CreateDeal] No company_id, will try to refresh page once...",
+      );
+      sessionStorage.setItem(reloadAttemptedKey, "true");
+      const timer = setTimeout(() => {
+        console.log(
+          "[CreateDeal] Triggering page reload to refresh user data...",
+        );
+        window.location.reload();
+      }, 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [user]);
+
+  // Reset accumulated brands on mount to ensure fresh state
+  useEffect(() => {
+    console.log("[CreateDeal] Component mounted, resetting accumulated brands");
+    setAccumulatedBrands([]);
+    setBrandPage(1);
+    setBrandSearch("");
+    setDebouncedBrandSearch("");
+  }, []);
+
+  // Fetch brands from API
+  const {
+    data: brandsData,
+    isLoading: isBrandsLoading,
+    isFetching: isBrandsFetching,
+    isPending: isBrandsPending,
+    refetch: refetchBrands,
+  } = useQuery({
+    queryKey: [
+      "company-brands",
+      user?.company_id,
+      debouncedBrandSearch,
+      brandPage,
+    ],
+    queryFn: async () => {
+      console.log(
+        "[CreateDeal] Fetching brands for company_id:",
+        user?.company_id,
+      );
+      if (!user?.company_id)
+        return { brands: [], total: 0, page: 1, limit: 20 };
+      return fetchCompanyBrands(user.company_id, {
+        page: brandPage,
+        limit: 20,
+        search: debouncedBrandSearch || undefined,
+      });
+    },
+    enabled: !!user?.company_id,
+    refetchOnMount: "always",
+    staleTime: 0,
+    gcTime: 0,
+  });
+
+  // Refetch brands when company_id becomes available or component remounts
+  useEffect(() => {
+    if (user?.company_id) {
+      console.log("[CreateDeal] company_id available, refetching brands");
+      refetchBrands();
+    }
+  }, [user?.company_id, refetchBrands]);
+
+  // Accumulate brands as pages are loaded
+  useEffect(() => {
+    console.log("[CreateDeal] brandsData changed:", {
+      hasBrandsData: !!brandsData,
+      brandsCount: brandsData?.brands?.length ?? 0,
+      total: brandsData?.total ?? 0,
+      brandPage,
+      currentAccumulatedCount: accumulatedBrands.length,
+    });
+    if (brandsData?.brands) {
+      if (brandPage === 1) {
+        console.log(
+          "[CreateDeal] Setting accumulated brands (page 1):",
+          brandsData.brands.length,
+          "brands",
+        );
+        setAccumulatedBrands(brandsData.brands);
+      } else {
+        setAccumulatedBrands((prev) => {
+          const existingIds = new Set(prev.map((b) => b.id));
+          const newBrands = brandsData.brands.filter(
+            (b) => !existingIds.has(b.id),
+          );
+          console.log(
+            "[CreateDeal] Accumulating brands (page",
+            brandPage,
+            "):",
+            newBrands.length,
+            "new brands",
+          );
+          return [...prev, ...newBrands];
+        });
+      }
+    }
+  }, [brandsData, brandPage]);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        brandDropdownRef.current &&
+        !brandDropdownRef.current.contains(event.target as Node)
+      ) {
+        setBrandSearchOpen(false);
+      }
+      if (
+        agencyDropdownRef.current &&
+        !agencyDropdownRef.current.contains(event.target as Node)
+      ) {
+        setAgencySearchOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  useEffect(() => {
+    const options = {
+      root: null,
+      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, supplySectionRef.current, brandSectionRef.current, budgetSectionRef.current];
+    sections.forEach((section) => {
+      if (section) observer.observe(section);
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  // Populate form with existing deal data in edit mode
+  useEffect(() => {
+    if (existingDeal && !isDataLoaded) {
+      const deal = existingDeal as any;
+      const dealMode = (deal.mode || "DIRECT") as "DIRECT" | "PROGRAMMATIC";
+      setMode(dealMode);
+
+      // Extract brand name from direct.brand field
+      const brandName =
+        deal.direct?.brand ||
+        (typeof deal.brand === "object"
+          ? deal.brand?.name || ""
+          : deal.brand || "");
+
+      if (dealMode === "DIRECT") {
+        const rawCountry =
+          deal.direct?.marketSelection?.country || deal.country || "Malaysia";
+        const dealCountry = normalizeCountry(rawCountry);
+        const existingAgencyId =
+          deal.direct?.agencyId || deal.advertiser?.id || "";
+
+        if (existingAgencyId) {
+          setSelectedAgency(existingAgencyId);
+        }
+
+        reset({
+          mode: "DIRECT",
+          name: deal.name || "",
+          brand: brandName,
+          clientType: deal.direct?.clientType || "DIRECT_ADVERTISER",
+          agencyId: existingAgencyId,
+          country: dealCountry,
+          currency: deal.currency || "JPY",
+          totalBudget:
+            deal.direct?.budgetSetup?.budgetAmount ||
+            deal.totalBudget ||
+            undefined,
+          dailyBudgetCap: deal.direct?.dailyBudgetCap || undefined,
+          goalType: deal.direct?.campaignGoal?.type || undefined,
+          goalValue: deal.direct?.campaignGoal?.targetValue || undefined,
+        } as any);
+
+        if (deal.direct?.approvalEmails) {
+          setApprovalEmails(deal.direct.approvalEmails);
+        }
+        
+        if (deal.seller?.email) {
+          setSellerEmail(deal.seller.email);
+        }
+        setSellerEmailInitialized(true);
+      } else {
+        const existingBuyers = deal.programmatic?.buyers || [
+          { dsp: "", seatId: "", buyerName: "" },
+        ];
+        const mappedBuyers = existingBuyers.map((b: any) => {
+          let mapped = { ...b };
+          if (b.dsp && dspOptions.length > 0) {
+            const matchById = dspOptions.find((d: any) => d.id === b.dsp);
+            if (!matchById) {
+              const matchByName = dspOptions.find((d: any) => d.name.toLowerCase() === b.dsp.toLowerCase());
+              if (matchByName) {
+                mapped.dsp = matchByName.id;
+              }
+            }
+          }
+          if (!mapped.buyerId && buyersForDsp.length > 0 && mapped.buyerName) {
+            const matchedBuyer = buyersForDsp.find(
+              (ab) => (ab.seatName || ab.name) === mapped.buyerName ||
+                (mapped.seatId && ab.seatId === mapped.seatId)
+            );
+            if (matchedBuyer) {
+              mapped.buyerId = matchedBuyer.id;
+            }
+          }
+          return mapped;
+        });
+        setBuyers(mappedBuyers);
+        const firstDspId = mappedBuyers.find((b: any) => b.dsp)?.dsp;
+        if (firstDspId) {
+          const dsp = dspOptions.find((d: any) => d.id === firstDspId);
+          if (dsp) {
+            setActiveDspId(dsp.id);
+            setActiveDspName(dsp.name);
+          } else {
+            setActiveDspId(firstDspId);
+            setActiveDspName(firstDspId);
+          }
+        }
+        setIsNonBillable(deal.programmatic?.nonBillable || deal.direct?.nonBillable || false);
+        setIsHardStop(deal.programmatic?.stopBidRequests || false);
+
+        const txType = deal.programmatic?.transactionType || "SPOT";
+        setSelectedTransactionType(txType);
+        setImpMultiplierType(deal.programmatic?.impMultiplierType || null);
+        setDescription(deal.description || "");
+        setSellerPhone(deal.seller?.phone || "");
+        setSellerName(deal.seller?.name || "");
+
+        const validBuyers = mappedBuyers.filter((b: any) => b.dsp && b.seatId && b.buyerName);
+        if (validBuyers.length > 0) {
+          setIsDealTypeLocked(true);
+          setIsDspLocked(true);
+        }
+
+        reset({
+          mode: "PROGRAMMATIC",
+          name: deal.name || "",
+          dealType: deal.dealType || "GUARANTEED",
+          buyers: mappedBuyers,
+          auctionType: deal.programmatic?.auctionType || 3,
+          transactionType: txType,
+          currency: deal.currency || "",
+        } as any);
+      }
+
+      setIsDataLoaded(true);
+    }
+  }, [existingDeal, isDataLoaded, reset, dspOptions, buyersForDsp]);
+
+  // Initialize seller email from logged-in user when creating new deal (only once)
+  useEffect(() => {
+    if (!isEditMode && user?.email && !sellerEmailInitialized) {
+      setSellerEmail(user.email);
+      setSellerEmailInitialized(true);
+    }
+  }, [user?.email, isEditMode, sellerEmailInitialized]);
+
+  // Re-validate agency selection when agencies data loads (for edit mode)
+  useEffect(() => {
+    if (existingDeal && agencies.length > 0 && selectedAgency) {
+      const agencyExists = agencies.find((a) => a.id === selectedAgency);
+      if (!agencyExists) {
+        console.warn(
+          `[CreateDeal] Selected agency ${selectedAgency} not found in loaded agencies`,
+        );
+      }
+    }
+  }, [agencies, existingDeal, selectedAgency]);
+
+  const handleModeChange = (newMode: "DIRECT" | "PROGRAMMATIC") => {
+    setMode(newMode);
+    const currentName = watch("name");
+    const currentBrand = watch("brand");
+    const currentCurrency = watch("currency" as any);
+
+    const currentCountry = watch("country" as any);
+    if (newMode === "DIRECT") {
+      reset({
+        mode: "DIRECT",
+        name: currentName,
+        brand: currentBrand,
+        clientType: "DIRECT_ADVERTISER",
+        country: currentCountry || "Japan",
+        currency: currentCurrency || "JPY",
+        totalBudget: undefined,
+        dailyBudgetCap: undefined,
+      } as any);
+      setBuyers([]);
+      setActiveDspId("");
+      setActiveDspName("");
+      setIsDealTypeLocked(false);
+      setIsDspLocked(false);
+      setSelectedTransactionType("");
+      setImpMultiplierType(null);
+      setIsHardStop(false);
+    } else {
+      reset({
+        mode: "PROGRAMMATIC",
+        name: currentName,
+        dealType: "GUARANTEED",
+        buyers: [],
+        auctionType: 3,
+        transactionType: "SPOT",
+        currency: "",
+      } as any);
+      setBuyers([]);
+      setActiveDspId("");
+      setActiveDspName("");
+      setIsDealTypeLocked(false);
+      setIsDspLocked(false);
+      setSelectedTransactionType("");
+      setImpMultiplierType(null);
+      setIsHardStop(false);
+    }
+  };
+
+  // Use brandsData directly if accumulatedBrands hasn't been populated yet
+  // This fixes a timing issue where the dropdown opens before the useEffect runs
+  const filteredBrands: CompanyBrand[] =
+    accumulatedBrands.length > 0 ? accumulatedBrands : brandsData?.brands || [];
+  const hasMoreBrands = brandsData
+    ? brandsData.total > filteredBrands.length
+    : false;
+
+  const filteredAgencies = agencies.filter((a) =>
+    a.name.toLowerCase().includes(agencySearch.toLowerCase()),
+  );
+
+  const addEmail = () => {
+    const email = emailInput.trim();
+    if (
+      email &&
+      /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) &&
+      !approvalEmails.includes(email)
+    ) {
+      const newEmails = [...approvalEmails, email];
+      setApprovalEmails(newEmails);
+      setValue("approvalEmails" as any, newEmails);
+      setEmailInput("");
+    }
+  };
+
+  const removeEmail = (email: string) => {
+    const newEmails = approvalEmails.filter((e) => e !== email);
+    setApprovalEmails(newEmails);
+    setValue("approvalEmails" as any, newEmails);
+  };
+
+  // Legacy handlers removed - using centralized handleDspChange/handleAddBuyer/handleRemoveBuyer instead
+
+  const handleDealTypeChange = (value: string) => {
+    setValue("dealType" as any, value);
+    setActiveDspId("");
+    setActiveDspName("");
+    setBuyers([]);
+    setValue("buyers" as any, []);
+    setValue("transactionType" as any, "");
+    setSelectedTransactionType("");
+    setValue("currency" as any, "");
+    setImpMultiplierType(null);
+    setIsDealTypeLocked(false);
+    setIsDspLocked(false);
+
+    if (value !== "PRIVATE_AUCTION") {
+      setValue("auctionType" as any, 3);
+    } else {
+      setValue("auctionType" as any, undefined);
+    }
+
+    if (value !== "GUARANTEED") {
+      setIsHardStop(false);
+    }
+  };
+
+  const handleDspChange = (dspId: string) => {
+    const selectedDsp = dspOptions.find((d) => d.id === dspId);
+    setActiveDspId(dspId);
+    setActiveDspName(selectedDsp?.name || dspId);
+
+    setBuyers([]);
+    setValue("buyers" as any, []);
+    setValue("transactionType" as any, "");
+    setSelectedTransactionType("");
+    setValue("currency" as any, "");
+    setImpMultiplierType(null);
+    setIsDspLocked(false);
+  };
+
+  const handleAddBuyer = (buyerValue: string) => {
+    const selectedBuyerData = buyersForDsp.find((b) => b.id === buyerValue);
+    if (!selectedBuyerData) return;
+
+    if (buyers.some(b => b.seatId === (selectedBuyerData.seatId || ""))) return;
+
+    if (!allowMultipleBuyers && buyers.length >= 1) return;
+
+    const newBuyer = {
+      dsp: activeDspName,
+      seatId: (selectedBuyerData.seatId || "").trim(),
+      buyerName: selectedBuyerData.seatName || selectedBuyerData.name,
+      buyerId: selectedBuyerData.id,
+      buyerAccountId: (selectedBuyerData as any).buyerAccountId || "",
+    };
+
+    const newBuyers = [...buyers, newBuyer];
+    setBuyers(newBuyers);
+    setValue("buyers" as any, newBuyers);
+
+    setIsDspLocked(true);
+    setIsDealTypeLocked(true);
+  };
+
+  const handleRemoveBuyer = (index: number) => {
+    const newBuyers = buyers.filter((_, i) => i !== index);
+    setBuyers(newBuyers);
+    setValue("buyers" as any, newBuyers);
+
+    if (newBuyers.length === 0) {
+      setIsDealTypeLocked(false);
+      setIsDspLocked(false);
+      setValue("dealType" as any, "");
+      setActiveDspId("");
+      setActiveDspName("");
+      setValue("transactionType" as any, "");
+      setSelectedTransactionType("");
+      setValue("currency" as any, "");
+    }
+  };
+
+  const handleTransactionTypeChange = (value: string) => {
+    setValue("transactionType" as any, value);
+    setSelectedTransactionType(value);
+    if (value !== "AUDIENCE") {
+      setImpMultiplierType(null);
+    }
+  };
+
+  const hasBuyers = buyers.some(b => b.dsp && b.seatId && b.buyerName);
+  void hasBuyers;
+  const isDspEnabled = !!dealType;
+  const isBuyerEnabled = !!activeDspId;
+  const isTransactionTypeEnabled = !!activeDspId;
+  const isCurrencyEnabled = !!activeDspId;
+  const showAuctionType = dealType === "PRIVATE_AUCTION";
+  const showHardStop = dealType === "GUARANTEED";
+  const showImpMultiplier = selectedTransactionType === "AUDIENCE";
+  const allowMultipleBuyers =
+    dealType === "PRIVATE_AUCTION" || dealType === "EVERGREEN_PMP";
+
+  const buildPayload = (data: FormData, isUpdate: boolean = false) => {
+    const agency = getSelectedAgency();
+
+    const payload: any = {
+      name: data.name,
+      mode: data.mode,
+      currency: data.currency,
+      advertiser: agency
+        ? {
+            id: agency.id,
+            seatId: agency.external_id,
+            name: agency.name,
+          }
+        : {
+            name: data.brand,
+          },
+      seller: {
+        id: user?.id || "",
+        name: sellerName || user?.name || "",
+        publisherId: user?.company_id || "",
+        publisherName: user?.company_name || "",
+        email: sellerEmail || user?.email || "",
+        phone: sellerPhone || "",
+      },
+      account: {
+        userId: user?.id || "",
+        companyName: user?.company_name || "",
+        companyId: user?.company_id || "",
+        email: sellerEmail || user?.email || "",
+      },
+    };
+
+    if (!isUpdate) {
+      payload.source = "influence";
+      payload.status = "DRAFT";
+    }
+
+    if (data.mode === "DIRECT") {
+      const countryData = COUNTRIES.find(
+        (c) => c.value === (data as any).country,
+      );
+      if (!isUpdate) {
+        payload.dealType = "DIRECT";
+        payload.country = (data as any).country;
+      }
+      payload.direct = {
+        brand: data.brand,
+        clientType: data.clientType,
+        agencyId: selectedAgency || undefined,
+        approvalEmails: approvalEmails,
+        marketSelection: {
+          country: (data as any).country,
+          currency: data.currency,
+          region: countryData?.region || "APAC",
+        },
+        budgetSetup: {
+          currency: data.currency,
+          budgetAmount: data.totalBudget || 0,
+          budgetType: "TOTAL",
+        },
+        campaignGoal: {
+          type: data.goalType || "IMPRESSIONS",
+          targetValue: data.goalValue || 0,
+        },
+        nonBillable: isNonBillable,
+      };
+    } else {
+      if (!isUpdate) {
+        payload.dealType = data.dealType;
+      }
+      payload.advertiser = undefined;
+      const programmaticPayload: any = {
+        buyers: buyers.filter((b) => b.dsp && b.seatId && b.buyerName).map(b => ({
+          dsp: b.dsp,
+          seatId: b.seatId,
+          name: b.buyerName,
+          buyerAccountId: (b as any).buyerAccountId || "",
+        })),
+        auctionType: dealType === "PRIVATE_AUCTION" ? data.auctionType : 3,
+        transactionType: selectedTransactionType || data.transactionType,
+        nonBillable: isNonBillable,
+        stopBidRequests: isHardStop,
+        published: false,
+        reopened: false,
+      };
+      if (showImpMultiplier && impMultiplierType) {
+        programmaticPayload.impMultiplierType = impMultiplierType;
+      }
+      payload.programmatic = programmaticPayload;
+    }
+
+    return payload;
+  };
+
+  const createDealMutation = useMutation({
+    mutationFn: async (data: FormData) => {
+      const payload = buildPayload(data, false);
+      const response = await influenceDealsRequest<Deal>(
+        InfluenceDealsAPI.deals.create(),
+        "POST",
+        payload,
+      );
+      return response;
+    },
+    onSuccess: (deal) => {
+      queryClient.invalidateQueries({ queryKey: ["direct-campaigns"] });
+      toast({
+        title: t("deals:createDeal.successTitle"),
+        description: t("deals:createDeal.successDescription"),
+      });
+      setLocation(`/deals/${deal.id}/line-items`);
+    },
+    onError: (error: unknown) => {
+      toast({
+        title: t("deals:createDeal.errorTitle"),
+        description: formatAPIErrorForToast(error),
+        variant: "destructive",
+      });
+    },
+  });
+
+  const updateDealMutation = useMutation({
+    mutationFn: async (data: FormData) => {
+      const payload = buildPayload(data, true);
+      const response = await influenceDealsRequest<Deal>(
+        InfluenceDealsAPI.deals.update(dealId!),
+        "PUT",
+        payload,
+      );
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["direct-campaigns"] });
+      toast({
+        title: t("deals:updateDeal.successTitle"),
+        description: t("deals:updateDeal.successDescription"),
+      });
+      setLocation(`/deals/${dealId}/line-items`);
+    },
+    onError: (error: unknown) => {
+      toast({
+        title: t("deals:updateDeal.errorTitle"),
+        description: formatAPIErrorForToast(error),
+        variant: "destructive",
+      });
+    },
+  });
+
+  const onSubmit = (data: FormData) => {
+    if (mode === "PROGRAMMATIC") {
+      (data as any).buyers = buyers.filter(
+        (b) => b.dsp && b.seatId && b.buyerName,
+      );
+    }
+
+    if (mode === "DIRECT" && selectedAgency && !getSelectedAgency()) {
+      toast({
+        title: t("deals:createDeal.pleaseWait"),
+        description: t("deals:createDeal.loadingAgencyData"),
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (isEditMode) {
+      updateDealMutation.mutate(data);
+    } else {
+      createDealMutation.mutate(data);
+    }
+  };
+
+  const isMutating =
+    createDealMutation.isPending || updateDealMutation.isPending;
+
+  const isAuctionTypeDisabled =
+    mode === "PROGRAMMATIC" &&
+    (dealType === "GUARANTEED" || dealType === "PREFERRED_DEAL");
+  void isAuctionTypeDisabled;
+
+  return (
+    <div className="flex flex-col min-h-[calc(100vh-64px)]">
+      {/* Page Header */}
+      <div className="flex-shrink-0 px-6 py-4 border-b border-mw-neutral-100 dark:border-mw-neutral-800 bg-white dark:bg-mw-neutral-900">
+        <div className="w-full">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                isIconOnly
+                onClick={() => setLocation("/deals")}
+              >
+                <ArrowLeft className="h-5 w-5" />
+              </Button>
+              <div className="h-10 w-10 rounded-lg bg-orange-50 dark:bg-orange-900/20 flex items-center justify-center flex-shrink-0">
+                <FileText className="h-5 w-5 text-orange-500 dark:text-orange-400" />
+              </div>
+              <div>
+                <h1 className="text-lg font-semibold text-mw-neutral-900 dark:text-white">
+                  {isEditMode ? "Update Deal" : "New Deal"}
+                </h1>
+                <p className="text-sm text-mw-neutral-500 dark:text-mw-neutral-400">
+                  {isEditMode ? "Update your advertising deal" : "Create a new advertising deal"}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Scrollable Content */}
+      <div className="flex-1 overflow-y-auto" ref={formContainerRef}>
+        <div className="w-full px-6 pt-8 pb-6">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <div className="lg:col-span-2">
+              <Card className="border-mw-neutral-200 dark:border-mw-neutral-700">
+                <CardContent className="p-6">
+                  <div className="flex items-center gap-3 mb-6">
+                    <div className="h-10 w-10 rounded-lg bg-mw-neutral-100 dark:bg-mw-neutral-700 flex items-center justify-center flex-shrink-0">
+                      <FileText className="h-5 w-5 text-mw-neutral-500" />
+                    </div>
+                    <div>
+                      <h2 className="text-base font-semibold text-mw-neutral-900 dark:text-white">Deal Details</h2>
+                      <p className="text-sm text-mw-neutral-500">Set up your deal information</p>
+                    </div>
+                  </div>
+                  <form
+                    onSubmit={handleSubmit(onSubmit)}
+                    className="space-y-6"
+                    id="deal-form"
+                  >
+                    <div ref={basicSectionRef} data-section="basic" className="space-y-6">
+                      <FormItem>
+                        <FormLabel required>
+                          {t("deals:deals.dealName")}
+                        </FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder={t("deals:createDeal.enterDealName")}
+                            maxLength={200}
+                            {...register("name")}
+                            className="border-mw-neutral-200 dark:border-mw-neutral-700"
+                          />
+                        </FormControl>
+                        {errors.name && (
+                          <FormMessage>{errors.name.message}</FormMessage>
+                        )}
+                      </FormItem>
+
+
+                      <FormItem>
+                        <FormLabel>{t("deals:createDeal.mediaType")}</FormLabel>
+                        <SelectRoot
+                          value={mediaType}
+                          onValueChange={setMediaType}
+                          disabled
+                        >
+                          <SelectTrigger className="border-mw-neutral-200 dark:border-mw-neutral-700 bg-mw-neutral-50 dark:bg-mw-neutral-800 cursor-not-allowed">
+                            <SelectValue placeholder={t("deals:createDeal.selectMediaType")} />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {MEDIA_TYPE_OPTIONS.map((option) => (
+                              <SelectItem key={option.value} value={option.value}>
+                                {option.label}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </SelectRoot>
+                      </FormItem>
+
+                      <FormItem>
+                        <FormLabel>{t("deals:createDeal.sspPartner")}</FormLabel>
+                        <SelectRoot
+                          value={sspPartner}
+                          onValueChange={setSspPartner}
+                          disabled
+                        >
+                          <SelectTrigger className="border-mw-neutral-200 dark:border-mw-neutral-700 bg-mw-neutral-50 dark:bg-mw-neutral-800 cursor-not-allowed">
+                            <SelectValue placeholder={t("deals:createDeal.selectSspPartner")} />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {SSP_PARTNER_OPTIONS.map((option) => (
+                              <SelectItem key={option.value} value={option.value}>
+                                {option.label}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </SelectRoot>
+                      </FormItem>
+                    </div>
+
+                    <div ref={supplySectionRef} data-section="supply" className="space-y-6">
+                      <FormItem>
+                        <FormLabel required>
+                          Deal Type
+                        </FormLabel>
+                        <div className="flex gap-0">
+                          <Button
+                            type="button"
+                            variant={mode === "DIRECT" ? "primary" : "outline"}
+                            size="sm"
+                            onClick={() => handleModeChange("DIRECT")}
+                            className="rounded-r-none"
+                          >
+                            Traditional
+                          </Button>
+                          <Button
+                            type="button"
+                            variant={mode === "PROGRAMMATIC" ? "primary" : "outline"}
+                            size="sm"
+                            onClick={() => handleModeChange("PROGRAMMATIC")}
+                            className="rounded-l-none border-l-0"
+                          >
+                            Programmatic
+                          </Button>
+                        </div>
+                      </FormItem>
+
+                      {mode === "DIRECT" && (
+                      <div ref={brandSectionRef} data-section="brand">
+                      <FormItem>
+                        <FormLabel>
+                          <div className="flex items-center gap-1">
+                            <Tag className="h-4 w-4" />
+                            {t("deals:deals.brand")}
+                            <span className="text-destructive">*</span>
+                          </div>
+                        </FormLabel>
+                        <div className="relative" ref={brandDropdownRef}>
+                          <div
+                            className={cn(
+                              "flex h-10 w-full items-center justify-between rounded-md border border-mw-neutral-200 bg-white px-3 py-2 text-sm cursor-pointer",
+                              "hover:border-mw-primary-300 focus-within:border-mw-primary-500 focus-within:ring-2 focus-within:ring-mw-primary-100",
+                              "dark:border-mw-neutral-700 dark:bg-mw-neutral-800",
+                            )}
+                            onClick={() => setBrandSearchOpen(!brandSearchOpen)}
+                          >
+                            <span
+                              className={
+                                brand
+                                  ? "text-mw-neutral-900 dark:text-white"
+                                  : "text-mw-neutral-400"
+                              }
+                            >
+                              {brand || t("deals:createDeal.selectBrand")}
+                            </span>
+                            <Search className="h-4 w-4 text-mw-neutral-400" />
+                          </div>
+
+                          {brandSearchOpen && (
+                            <div className="absolute z-50 mt-1 w-full rounded-md border border-mw-neutral-200 bg-white shadow-lg dark:border-mw-neutral-700 dark:bg-mw-neutral-800">
+                              <div className="p-2 border-b border-mw-neutral-100 dark:border-mw-neutral-700">
+                                <div className="flex items-center gap-2">
+                                  <div className="relative flex-1">
+                                    <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+                                    <Input
+                                      placeholder={t(
+                                        "deals:createDeal.searchBrands",
+                                      )}
+                                      value={brandSearch}
+                                      onChange={(e) =>
+                                        setBrandSearch(e.target.value)
+                                      }
+                                      className="pl-8 h-9 border-mw-neutral-200"
+                                      autoFocus
+                                    />
+                                  </div>
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="sm"
+                                    isIconOnly
+                                    onClick={() => {
+                                      setAccumulatedBrands([]);
+                                      setBrandPage(1);
+                                      queryClient.invalidateQueries({
+                                        queryKey: ["company-brands"],
+                                      });
+                                    }}
+                                    title={t("common:actions.refresh")}
+                                  >
+                                    <RefreshCw
+                                      className={cn(
+                                        "h-4 w-4",
+                                        isBrandsFetching && "animate-spin",
+                                      )}
+                                    />
+                                  </Button>
+                                </div>
+                              </div>
+                              <div className="max-h-48 overflow-y-auto">
+                                {(() => {
+                                  console.log(
+                                    "[CreateDeal] Rendering brands dropdown:",
+                                    {
+                                      isBrandsLoading,
+                                      isBrandsFetching,
+                                      isBrandsPending,
+                                      filteredBrandsCount:
+                                        filteredBrands.length,
+                                      accumulatedBrandsCount:
+                                        accumulatedBrands.length,
+                                      brandSearch,
+                                      brandsDataExists: !!brandsData,
+                                      brandsDataBrandsLength:
+                                        brandsData?.brands?.length ?? 0,
+                                      userCompanyId: user?.company_id,
+                                    },
+                                  );
+                                  return null;
+                                })()}
+                                {!user?.company_id ? (
+                                  <div className="px-3 py-4 text-center text-sm text-mw-neutral-500">
+                                    {t("deals:createDeal.typeToEnterBrand")}
+                                  </div>
+                                ) : (isBrandsLoading ||
+                                  isBrandsFetching ||
+                                  isBrandsPending) &&
+                                filteredBrands.length === 0 ? (
+                                  <div className="px-3 py-4 text-center text-sm text-mw-neutral-500">
+                                    {t("deals:createDeal.loadingBrands")}
+                                  </div>
+                                ) : filteredBrands.length === 0 ? (
+                                  <div className="px-3 py-4 text-center text-sm text-mw-neutral-500">
+                                    {brandSearch
+                                      ? t("deals:createDeal.noBrandsFound")
+                                      : t("deals:createDeal.typeToEnterBrand")}
+                                  </div>
+                                ) : (
+                                  <>
+                                    {filteredBrands.map((b) => (
+                                      <div
+                                        key={b.id}
+                                        className="px-3 py-2.5 hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-700 cursor-pointer"
+                                        onClick={() => {
+                                          setValue("brand", b.name);
+                                          setBrandSearchOpen(false);
+                                          setBrandSearch("");
+                                        }}
+                                      >
+                                        <div className="font-medium text-sm text-mw-neutral-900 dark:text-white">
+                                          {b.name}
+                                        </div>
+                                        <div className="text-xs text-mw-neutral-500">
+                                          {b.code}
+                                        </div>
+                                      </div>
+                                    ))}
+                                    {hasMoreBrands && (
+                                      <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="sm"
+                                        className="w-full"
+                                        onClick={() =>
+                                          setBrandPage((p) => p + 1)
+                                        }
+                                        disabled={isBrandsFetching}
+                                      >
+                                        {isBrandsFetching
+                                          ? t("deals:createDeal.loading")
+                                          : t("deals:createDeal.loadMore")}
+                                      </Button>
+                                    )}
+                                  </>
+                                )}
+                              </div>
+                              <div className="p-2 border-t border-mw-neutral-100 dark:border-mw-neutral-700">
+                                <a
+                                  href={`${API_CONFIG.authFE}/metadata/brands`}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  className="flex items-center gap-1.5 text-sm text-mw-primary-600 hover:text-mw-primary-700 font-medium"
+                                >
+                                  <Plus className="h-4 w-4" />
+                                  {t("deals:createDeal.createNewBrand")}
+                                  <ExternalLink className="h-3 w-3 ml-1" />
+                                </a>
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                        {errors.brand && (
+                          <FormMessage>{errors.brand.message}</FormMessage>
+                        )}
+                      </FormItem>
+                      </div>
+                      )}
+
+                      {mode === "DIRECT" && (
+                        <>
+                          <FormItem>
+                            <FormLabel required>
+                              {t("deals:createDeal.clientType")}
+                            </FormLabel>
+                            <SelectRoot
+                              value={watch("clientType" as any)}
+                              onValueChange={(value) => {
+                                setValue("clientType" as any, value);
+                                if (value !== "AGENCY") {
+                                  setSelectedAgency("");
+                                  setValue("agencyId" as any, "");
+                                }
+                              }}
+                            >
+                              <SelectTrigger className="border-mw-neutral-200 dark:border-mw-neutral-700">
+                                <SelectValue
+                                  placeholder={t(
+                                    "deals:createDeal.selectClientType",
+                                  )}
+                                />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {CLIENT_TYPE_OPTIONS.map((option) => (
+                                  <SelectItem
+                                    key={option.value}
+                                    value={option.value}
+                                  >
+                                    {option.label}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </SelectRoot>
+                            {(errors as any).clientType && (
+                              <FormMessage>
+                                {(errors as any).clientType.message}
+                              </FormMessage>
+                            )}
+                          </FormItem>
+
+                          {clientType === "AGENCY" && (
+                            <FormItem>
+                              <FormLabel required>
+                                {t("deals:deals.agency")}
+                              </FormLabel>
+                              <div className="relative" ref={agencyDropdownRef}>
+                                <div
+                                  className={cn(
+                                    "flex h-10 w-full items-center justify-between rounded-md border border-mw-neutral-200 bg-white px-3 py-2 text-sm cursor-pointer",
+                                    "hover:border-mw-primary-300 focus-within:border-mw-primary-500 focus-within:ring-2 focus-within:ring-mw-primary-100",
+                                    "dark:border-mw-neutral-700 dark:bg-mw-neutral-800",
+                                  )}
+                                  onClick={() =>
+                                    setAgencySearchOpen(!agencySearchOpen)
+                                  }
+                                >
+                                  <span
+                                    className={
+                                      selectedAgency
+                                        ? "text-mw-neutral-900 dark:text-white"
+                                        : "text-mw-neutral-400"
+                                    }
+                                  >
+                                    {getSelectedAgency()?.name ||
+                                      t("deals:createDeal.selectAgency")}
+                                  </span>
+                                  <Search className="h-4 w-4 text-mw-neutral-400" />
+                                </div>
+
+                                {agencySearchOpen && (
+                                  <div className="absolute z-50 mt-1 w-full rounded-md border border-mw-neutral-200 bg-white shadow-lg dark:border-mw-neutral-700 dark:bg-mw-neutral-800">
+                                    <div className="p-2 border-b border-mw-neutral-100 dark:border-mw-neutral-700">
+                                      <div className="relative">
+                                        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+                                        <Input
+                                          placeholder={t(
+                                            "deals:createDeal.searchAgencies",
+                                          )}
+                                          value={agencySearch}
+                                          onChange={(e) =>
+                                            setAgencySearch(e.target.value)
+                                          }
+                                          className="pl-8 h-9 border-mw-neutral-200"
+                                          autoFocus
+                                        />
+                                      </div>
+                                    </div>
+                                    <div className="max-h-48 overflow-y-auto">
+                                      {isAgenciesLoading ? (
+                                        <div className="px-3 py-4 text-center text-sm text-mw-neutral-500">
+                                          {t(
+                                            "deals:createDeal.loadingAgencies",
+                                          )}
+                                        </div>
+                                      ) : filteredAgencies.length === 0 ? (
+                                        <div className="px-3 py-4 text-center text-sm text-mw-neutral-500">
+                                          {t(
+                                            "deals:createDeal.noAgenciesFound",
+                                          )}
+                                        </div>
+                                      ) : (
+                                        filteredAgencies.map((agency) => (
+                                          <div
+                                            key={agency.id}
+                                            className="px-3 py-2.5 hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-700 cursor-pointer"
+                                            onClick={() => {
+                                              handleAgencyChange(agency.id);
+                                              setAgencySearchOpen(false);
+                                              setAgencySearch("");
+                                            }}
+                                          >
+                                            <div className="font-medium text-sm text-mw-neutral-900 dark:text-white">
+                                              {agency.name}
+                                            </div>
+                                            <div className="text-xs text-mw-neutral-500">
+                                              {agency.seat_id ? `Seat ID: ${agency.seat_id}` : "Agency"}
+                                            </div>
+                                          </div>
+                                        ))
+                                      )}
+                                    </div>
+                                  </div>
+                                )}
+                              </div>
+                              {selectedAgency && getSelectedAgency() && (
+                                <p className="text-xs text-mw-neutral-500 mt-1">
+                                  {getSelectedAgency()?.seat_id ? `Seat ID: ${getSelectedAgency()?.seat_id}` : "Agency"}
+                                </p>
+                              )}
+                            </FormItem>
+                          )}
+
+                          <FormItem>
+                            <FormLabel required>
+                              {t("deals:createDeal.country")}
+                            </FormLabel>
+                            <SelectRoot
+                              value={watch("country" as any)}
+                              onValueChange={handleCountryChange}
+                            >
+                              <SelectTrigger className="border-mw-neutral-200 dark:border-mw-neutral-700">
+                                <SelectValue
+                                  placeholder={t("deals:createDeal.selectCountry")}
+                                />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {COUNTRIES.map((country) => (
+                                  <SelectItem
+                                    key={country.code}
+                                    value={country.value}
+                                  >
+                                    <div className="flex items-center gap-2">
+                                      <Globe className="h-4 w-4 text-mw-neutral-400" />
+                                      <span>{country.value}</span>
+                                      <span className="text-xs text-mw-neutral-500">
+                                        ({country.code})
+                                      </span>
+                                    </div>
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </SelectRoot>
+                            {(errors as any).country && (
+                              <FormMessage>
+                                {(errors as any).country.message}
+                              </FormMessage>
+                            )}
+                          </FormItem>
+
+                          <input
+                            type="hidden"
+                            value={watch("country" as any) || "Japan"}
+                          />
+
+                          <div ref={budgetSectionRef} data-section="budget" className="space-y-6">
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                              <FormItem>
+                                <FormLabel required>
+                                  {t("deals:deals.currency")}
+                                </FormLabel>
+                                <SelectRoot
+                                  value={watch("currency" as any)}
+                                  onValueChange={(value) =>
+                                    setValue("currency" as any, value)
+                                  }
+                                >
+                                  <SelectTrigger className="border-mw-neutral-200 dark:border-mw-neutral-700">
+                                    <SelectValue
+                                      placeholder={t(
+                                        "deals:createDeal.selectCurrency",
+                                      )}
+                                    />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {CURRENCIES.map((option) => (
+                                      <SelectItem
+                                        key={option.value}
+                                        value={option.value}
+                                      >
+                                        {option.label}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </SelectRoot>
+                              </FormItem>
+
+                              <FormItem>
+                                <FormLabel>
+                                  {t("deals:createDeal.totalBudget")}
+                                </FormLabel>
+                                <FormControl>
+                                  <Input
+                                    type="number"
+                                    min={0}
+                                    placeholder={t(
+                                      "deals:createDeal.enterTotalBudget",
+                                    )}
+                                    {...register("totalBudget" as any, {
+                                      valueAsNumber: true,
+                                    })}
+                                    className="border-mw-neutral-200 dark:border-mw-neutral-700"
+                                  />
+                                </FormControl>
+                              </FormItem>
+                            </div>
+
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                              <FormItem>
+                                <FormLabel>
+                                  {t("deals:createDeal.goalType")}
+                                </FormLabel>
+                              <SelectRoot
+                                value={watch("goalType" as any) || ""}
+                                onValueChange={(value) =>
+                                  setValue("goalType" as any, value)
+                                }
+                              >
+                                <SelectTrigger className="border-mw-neutral-200 dark:border-mw-neutral-700">
+                                  <SelectValue
+                                    placeholder={t(
+                                      "deals:createDeal.selectGoalType",
+                                    )}
+                                  />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {GOAL_TYPE_OPTIONS.map((option) => (
+                                    <SelectItem
+                                      key={option.value}
+                                      value={option.value}
+                                    >
+                                      {option.label}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </SelectRoot>
+                            </FormItem>
+
+                            <FormItem>
+                              <FormLabel>
+                                {t("deals:createDeal.goalValue")}
+                              </FormLabel>
+                              <FormControl>
+                                <Input
+                                  type="number"
+                                  min={0}
+                                  placeholder={t(
+                                    "deals:createDeal.enterGoalValue",
+                                  )}
+                                  {...register("goalValue" as any, {
+                                    valueAsNumber: true,
+                                  })}
+                                  className="border-mw-neutral-200 dark:border-mw-neutral-700"
+                                />
+                              </FormControl>
+                              </FormItem>
+                            </div>
+                          </div>
+
+                          {/* Non-Billable for Traditional deals */}
+                          <FormItem>
+                            <FormLabel>{t("deals:createDeal.nonBillable")}</FormLabel>
+                            <div className="flex items-center gap-3 h-10">
+                              <Checkbox
+                                id="nonBillableDirect"
+                                checked={isNonBillable}
+                                onChange={(e) => setIsNonBillable(e.target.checked)}
+                              />
+                              <label
+                                htmlFor="nonBillableDirect"
+                                className="text-sm text-mw-neutral-700 dark:text-mw-neutral-300 cursor-pointer"
+                              >
+                                {t("deals:createDeal.nonBillableDescription")}
+                              </label>
+                            </div>
+                          </FormItem>
+                        </>
+                      )}
+                    </div>
+
+                      {mode === "PROGRAMMATIC" && (
+                        <div className="space-y-6">
+                          {/* Row 1: Programmatic Type + Non-Billable */}
+                          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <FormItem>
+                              <FormLabel required>
+                                {t("deals:createDeal.programmaticType")}
+                              </FormLabel>
+                              <SelectRoot
+                                value={watch("dealType" as any) || ""}
+                                onValueChange={handleDealTypeChange}
+                                disabled={isDealTypeLocked || isEditMode}
+                              >
+                                <SelectTrigger className={cn(
+                                  "border-mw-neutral-200 dark:border-mw-neutral-700",
+                                  (isDealTypeLocked || isEditMode) && "bg-mw-neutral-50 dark:bg-mw-neutral-800 cursor-not-allowed"
+                                )}>
+                                  <SelectValue
+                                    placeholder={t(
+                                      "deals:createDeal.selectDealType",
+                                    )}
+                                  />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {DEAL_TYPE_OPTIONS.map((option) => (
+                                    <SelectItem
+                                      key={option.value}
+                                      value={option.value}
+                                    >
+                                      {option.label}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </SelectRoot>
+                            </FormItem>
+
+                            <FormItem>
+                              <FormLabel>{t("deals:createDeal.nonBillable")}</FormLabel>
+                              <div className="flex items-center gap-3 h-10">
+                                <Checkbox
+                                  id="nonBillable"
+                                  checked={isNonBillable}
+                                  onChange={(e) => setIsNonBillable(e.target.checked)}
+                                />
+                                <label
+                                  htmlFor="nonBillable"
+                                  className="text-sm text-mw-neutral-700 dark:text-mw-neutral-300 cursor-pointer"
+                                >
+                                  {t("deals:createDeal.nonBillableDescription")}
+                                </label>
+                              </div>
+                            </FormItem>
+                          </div>
+
+                          {/* Row 2: Hard Stop (conditional - GUARANTEED only) */}
+                          {showHardStop && (
+                            <FormItem>
+                              <FormLabel>{t("deals:createDeal.hardStop")}</FormLabel>
+                              <div className="flex items-center gap-3 h-10">
+                                <Checkbox
+                                  id="hardStop"
+                                  checked={isHardStop}
+                                  onChange={(e) => setIsHardStop(e.target.checked)}
+                                />
+                                <label
+                                  htmlFor="hardStop"
+                                  className="text-sm text-mw-neutral-700 dark:text-mw-neutral-300 cursor-pointer"
+                                >
+                                  {t("deals:createDeal.hardStopDescription")}
+                                </label>
+                              </div>
+                            </FormItem>
+                          )}
+
+                          {/* Row 3: Auction Type (conditional - PRIVATE_AUCTION only) */}
+                          {showAuctionType && (
+                            <FormItem>
+                              <FormLabel required>
+                                {t("deals:createDeal.auctionType")}
+                              </FormLabel>
+                              <SelectRoot
+                                value={String(watch("auctionType" as any) || "")}
+                                onValueChange={(value) =>
+                                  setValue("auctionType" as any, parseInt(value))
+                                }
+                              >
+                                <SelectTrigger className="border-mw-neutral-200 dark:border-mw-neutral-700">
+                                  <SelectValue
+                                    placeholder={t("deals:createDeal.selectAuctionType")}
+                                  />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {AUCTION_TYPE_OPTIONS.map((option) => (
+                                    <SelectItem
+                                      key={option.value}
+                                      value={option.value}
+                                    >
+                                      {option.label}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </SelectRoot>
+                            </FormItem>
+                          )}
+
+                          {/* Row 4: DSP dropdown (centralized) */}
+                          <FormItem>
+                            <FormLabel required>
+                              {t("deals:createDeal.dsp")}
+                            </FormLabel>
+                            <SelectRoot
+                              value={activeDspId}
+                              onValueChange={handleDspChange}
+                              disabled={!isDspEnabled || isDspLocked}
+                            >
+                              <SelectTrigger className={cn(
+                                "border-mw-neutral-200 dark:border-mw-neutral-700",
+                                (!isDspEnabled || isDspLocked) && "bg-mw-neutral-50 dark:bg-mw-neutral-800 cursor-not-allowed"
+                              )}>
+                                <SelectValue placeholder="Select DSP" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {dspOptions.map((option) => (
+                                  <SelectItem key={option.id} value={option.id}>
+                                    {option.name}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </SelectRoot>
+                            {!isDspEnabled && (
+                              <p className="text-xs text-mw-neutral-500 mt-1">
+                                Select a deal type first
+                              </p>
+                            )}
+                          </FormItem>
+
+                          {/* Row 5: Buyer Name dropdown + Buyer Panel */}
+                          <FormItem>
+                            <FormLabel required>
+                              {t("deals:createDeal.buyers")}
+                            </FormLabel>
+                            <div className="space-y-3">
+                              <SelectRoot
+                                value=""
+                                onValueChange={handleAddBuyer}
+                                disabled={!isBuyerEnabled || (!allowMultipleBuyers && buyers.filter(b => b.dsp && b.seatId && b.buyerName).length >= 1)}
+                              >
+                                <SelectTrigger className={cn(
+                                  "border-mw-neutral-200 dark:border-mw-neutral-700",
+                                  (!isBuyerEnabled || (!allowMultipleBuyers && buyers.filter(b => b.dsp && b.seatId && b.buyerName).length >= 1)) && "bg-mw-neutral-50 dark:bg-mw-neutral-800 cursor-not-allowed"
+                                )}>
+                                  <SelectValue placeholder={t("deals:createDeal.buyerName")} />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {buyersForDsp.map((b) => (
+                                    <SelectItem key={b.id} value={b.id}>
+                                      {b.seatName || b.name} {b.seatId ? `(${b.seatId})` : ""}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </SelectRoot>
+                              {!isBuyerEnabled && (
+                                <p className="text-xs text-mw-neutral-500">
+                                  Select a DSP first
+                                </p>
+                              )}
+
+                              {/* Buyer Panel - chips/badges */}
+                              <div className="flex flex-wrap gap-2 min-h-[36px] p-2 rounded-md border border-mw-neutral-200 dark:border-mw-neutral-700 bg-mw-neutral-50 dark:bg-mw-neutral-800/50">
+                                {buyers.filter(b => b.dsp && b.seatId && b.buyerName).length === 0 ? (
+                                  <span className="text-sm text-mw-neutral-400 italic">No buyer selected yet</span>
+                                ) : (
+                                  buyers.filter(b => b.dsp && b.seatId && b.buyerName).map((buyer, index) => (
+                                    <Badge
+                                      key={index}
+                                      variant="secondary"
+                                      className="flex items-center gap-1.5 px-3 py-1.5 text-sm"
+                                    >
+                                      <span>{buyer.buyerName} - Seat ID ({buyer.seatId})</span>
+                                      <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="sm"
+                                        isIconOnly
+                                        onClick={() => handleRemoveBuyer(index)}
+                                        className="ml-1"
+                                      >
+                                        <X className="h-3 w-3" />
+                                      </Button>
+                                    </Badge>
+                                  ))
+                                )}
+                              </div>
+                            </div>
+                          </FormItem>
+
+                          {/* Row 6: Transaction Type + Currency */}
+                          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <FormItem>
+                              <FormLabel required>
+                                {t("deals:createDeal.transactionType")}
+                              </FormLabel>
+                              <SelectRoot
+                                value={selectedTransactionType || watch("transactionType" as any) || ""}
+                                onValueChange={handleTransactionTypeChange}
+                                disabled={!isTransactionTypeEnabled}
+                              >
+                                <SelectTrigger className={cn(
+                                  "border-mw-neutral-200 dark:border-mw-neutral-700",
+                                  !isTransactionTypeEnabled && "bg-mw-neutral-50 dark:bg-mw-neutral-800 cursor-not-allowed"
+                                )}>
+                                  <SelectValue
+                                    placeholder={t("deals:createDeal.selectTransactionType")}
+                                  />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {TRANSACTION_TYPE_OPTIONS.map((option) => (
+                                    <SelectItem
+                                      key={option.value}
+                                      value={option.value}
+                                    >
+                                      {option.label}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </SelectRoot>
+                            </FormItem>
+
+                            <FormItem>
+                              <FormLabel>
+                                {t("deals:deals.currency")}
+                              </FormLabel>
+                              <SelectRoot
+                                value={watch("currency" as any) || ""}
+                                onValueChange={(value) =>
+                                  setValue("currency" as any, value)
+                                }
+                                disabled={!isCurrencyEnabled}
+                              >
+                                <SelectTrigger className={cn(
+                                  "border-mw-neutral-200 dark:border-mw-neutral-700",
+                                  !isCurrencyEnabled && "bg-mw-neutral-50 dark:bg-mw-neutral-800 cursor-not-allowed"
+                                )}>
+                                  <SelectValue
+                                    placeholder={t("deals:createDeal.selectCurrency")}
+                                  />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {CURRENCIES.map((option) => (
+                                    <SelectItem
+                                      key={option.value}
+                                      value={option.value}
+                                    >
+                                      {option.label}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </SelectRoot>
+                            </FormItem>
+                          </div>
+
+                          {/* Row 7: Impression Multiplier Type (conditional - AUDIENCE only) */}
+                          {showImpMultiplier && (
+                            <FormItem>
+                              <FormLabel>Impression Multiplier Type</FormLabel>
+                              <SelectRoot
+                                value={impMultiplierType || ""}
+                                onValueChange={(value) => setImpMultiplierType(value)}
+                              >
+                                <SelectTrigger className="border-mw-neutral-200 dark:border-mw-neutral-700">
+                                  <SelectValue placeholder="Select impression multiplier type" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {IMPRESSION_MULTIPLIER_OPTIONS.map((option) => (
+                                    <SelectItem
+                                      key={option.value}
+                                      value={option.value}
+                                    >
+                                      {option.label}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </SelectRoot>
+                            </FormItem>
+                          )}
+
+                          {/* Row 8: Seller Section */}
+                          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                            <FormItem>
+                              <FormLabel>Seller</FormLabel>
+                              <Input
+                                value={sellerName || user?.name || ""}
+                                onChange={(e) => setSellerName(e.target.value)}
+                                placeholder="Seller name"
+                                className="border-mw-neutral-200 dark:border-mw-neutral-700"
+                              />
+                            </FormItem>
+                            <FormItem>
+                              <FormLabel>Seller Contact Number</FormLabel>
+                              <Input
+                                value={sellerPhone}
+                                onChange={(e) => setSellerPhone(e.target.value)}
+                                placeholder="Enter contact number"
+                                className="border-mw-neutral-200 dark:border-mw-neutral-700"
+                              />
+                            </FormItem>
+                            <FormItem>
+                              <FormLabel>Seller Email</FormLabel>
+                              <Input
+                                value={sellerEmail || user?.email || ""}
+                                onChange={(e) => setSellerEmail(e.target.value)}
+                                placeholder="Enter seller email"
+                                className="border-mw-neutral-200 dark:border-mw-neutral-700"
+                              />
+                            </FormItem>
+                          </div>
+
+                        </div>
+                      )}
+                  </form>
+                </CardContent>
+              </Card>
+            </div>
+
+            <div className="lg:col-span-1">
+              <div className="sticky top-6 space-y-4">
+                <Card className="border-mw-neutral-200 dark:border-mw-neutral-700">
+                  <CardContent className="p-4">
+                    <div className="flex items-center gap-2 mb-3">
+                      <Lightbulb className="h-4 w-4 text-amber-500" />
+                      <h3 className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+                        {SECTION_TIPS[visibleSection].title}
+                      </h3>
+                    </div>
+                    <ul className="space-y-2">
+                      {SECTION_TIPS[visibleSection].tips.map((tip, index) => (
+                        <li key={index} className="flex items-start gap-2 text-sm text-mw-neutral-600 dark:text-mw-neutral-400">
+                          <span className="text-amber-500 mt-0.5 flex-shrink-0">•</span>
+                          <span>{tip}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  </CardContent>
+                </Card>
+
+                <MarketInsightsPanel
+                  selectedCountries={watch("country" as any) ? [watch("country" as any)] : []}
+                  currency={watch("currency" as any) || "USD"}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Sticky Footer */}
+      <div className="sticky bottom-0 z-20 bg-white dark:bg-mw-neutral-900 border-t border-mw-neutral-200 dark:border-mw-neutral-700 px-6 py-4">
+        <div className="w-full flex justify-end gap-3">
+          {isEditMode && (
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setLocation(`/deals/${dealId}/line-items`)}
+              className="px-6"
+            >
+              {t("deals:createDeal.cancel")}
+            </Button>
+          )}
+          <Button
+            type="submit"
+            form="deal-form"
+            disabled={isMutating}
+            className="bg-mw-primary-500 hover:bg-mw-primary-600 text-white px-8"
+          >
+            {isMutating
+              ? isEditMode
+                ? t("deals:createDeal.updating")
+                : t("deals:createDeal.creating")
+              : isEditMode
+                ? t("deals:updateDeal.title")
+                : t("deals:deals.createDeal")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}