adserver-dashboard 1.0.0

package/client/src/components/line-items/steps/line-item-details-step.tsx

@@ -0,0 +1,916 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useEffect, useState } from "react";
+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 { FileText, ChevronRight, ChevronLeft, DollarSign, Target } from "lucide-react";
+import { FormInsights } from "../form-insights";
+import { DateRangePicker } from "@moving-walls/design-system";
+import { cn } from "@moving-walls/design-system";
+import { getTodayDate, toAPIDateString, fromAPIDateString } from "@/lib/date-utils";
+import { useMemo } from "react";
+
+interface PacingDeliveryGraphProps {
+  pacingType: 'even' | 'asap' | 'front-loaded' | 'back-loaded';
+  days?: number;
+}
+
+function PacingDeliveryGraph({ pacingType, days = 30 }: PacingDeliveryGraphProps) {
+  const { t } = useTranslation('lineItems');
+  const data = useMemo(() => {
+    const result: number[] = [];
+    for (let i = 0; i < days; i++) {
+      if (pacingType === 'even') {
+        result.push(50);
+      } else if (pacingType === 'asap') {
+        const base = 100 - (i * 3.5);
+        result.push(Math.max(5, base));
+      } else if (pacingType === 'front-loaded') {
+        const decay = Math.exp(-i / 12) * 100;
+        result.push(Math.max(5, decay));
+      } else if (pacingType === 'back-loaded') {
+        const growth = (1 - Math.exp(-(i) / 12)) * 100;
+        result.push(Math.min(100, Math.max(5, growth)));
+      }
+    }
+    return result;
+  }, [pacingType, days]);
+
+  const maxValue = 100;
+  const chartWidth = 420;
+  const chartHeight = 100;
+  const barWidth = chartWidth / days - 1;
+  const yAxisLabels = [100, 75, 50, 25, 0];
+
+  return (
+    <div className="mt-4 p-4 bg-white dark:bg-mw-neutral-900 rounded-lg border border-mw-neutral-200 dark:border-mw-neutral-700">
+      <div className="flex items-center gap-2 mb-3">
+        <span className="text-sm font-medium text-mw-neutral-700 dark:text-mw-neutral-300">
+          {t('wizard.details.projectedPacingDelivery')}
+        </span>
+        <span 
+          className="inline-flex items-center justify-center w-4 h-4 rounded-full border border-mw-neutral-300 text-[10px] text-mw-neutral-400 cursor-help"
+          title={t('wizard.details.pacingGraphTooltip')}
+        >
+          ?
+        </span>
+      </div>
+
+      <div className="grid grid-cols-[20px_32px_1fr] gap-1">
+        <div className="flex items-center justify-center" style={{ height: chartHeight }}>
+          <span className="text-[10px] text-mw-neutral-500 -rotate-90 whitespace-nowrap origin-center">
+            {t('wizard.details.goalPercentage')}
+          </span>
+        </div>
+        
+        <div className="flex flex-col justify-between text-[10px] text-mw-neutral-500 text-right pr-1" style={{ height: chartHeight }}>
+          {yAxisLabels.map((label) => (
+            <span key={label} className="leading-none">{label}</span>
+          ))}
+        </div>
+        
+        <div className="flex-1">
+          <svg width="100%" height={chartHeight} viewBox={`0 0 ${chartWidth} ${chartHeight}`} preserveAspectRatio="none">
+            {[0, 25, 50, 75, 100].map((y) => (
+              <line
+                key={y}
+                x1={0}
+                y1={chartHeight - (y / maxValue) * chartHeight}
+                x2={chartWidth}
+                y2={chartHeight - (y / maxValue) * chartHeight}
+                stroke="#e5e7eb"
+                strokeWidth={0.5}
+                strokeDasharray={y === 0 ? "0" : "2,2"}
+              />
+            ))}
+
+            {data.map((value, index) => {
+              const barHeight = (value / maxValue) * chartHeight;
+              const x = index * (chartWidth / days);
+              return (
+                <rect
+                  key={index}
+                  x={x}
+                  y={chartHeight - barHeight}
+                  width={barWidth}
+                  height={barHeight}
+                  fill="#2176cc"
+                  rx={1}
+                />
+              );
+            })}
+          </svg>
+
+          <div className="flex justify-between text-[10px] text-mw-neutral-500 mt-1">
+            <span>0</span>
+            {Array.from({ length: 5 }, (_, i) => {
+              const step = Math.ceil(days / 5);
+              const label = Math.min((i + 1) * step, days);
+              return <span key={i}>{label}</span>;
+            })}
+          </div>
+          <div className="text-center text-[10px] text-mw-neutral-500 mt-1">
+            {t('wizard.details.numberOfDays')}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const lineItemDetailsSchema = z.object({
+  name: z.string().min(3, "Line item name must be at least 3 characters").max(200, "Line item name must not exceed 200 characters"),
+  start_date: z.string().min(1, "Start date is required"),
+  end_date: z.string().min(1, "End date is required"),
+  budget_amount: z.number().min(0, "Budget amount must be a positive number").nullish(),
+  currency: z.string().min(1, "Currency is required"),
+  creative_type: z.enum(["DISPLAY", "VIDEO", "AUDIO"], {
+    errorMap: () => ({ message: "Please select a creative type" })
+  }).default("VIDEO"),
+  duration: z.number().min(1, "Duration must be at least 1 second").max(300, "Duration must not exceed 300 seconds").nullish(),
+  goal_type: z.enum(["IMPRESSIONS", "REACH", "SHARE_OF_VOICE"], {
+    errorMap: () => ({ message: "Please select a goal type" })
+  }),
+  target_value: z.number().min(0, "Target value must be a positive number").nullish(),
+  daily_budget_cap: z.number().min(0, "Daily budget cap must be a positive number").nullish(),
+  impressions: z.number().min(0, "Impressions must be a positive number").nullish(),
+  pacing_type: z.enum(["asap", "even", "front-loaded", "back-loaded"], {
+    errorMap: () => ({ message: "Please select a pacing type" })
+  }).default("even"),
+  pacing_daily_cap: z.preprocess(
+    (val) => (val === "" || val === null || val === undefined || Number.isNaN(val) ? undefined : Number(val)),
+    z.number().min(0, "Daily cap must be a positive number").optional()
+  ),
+  pacing_hourly_cap: z.preprocess(
+    (val) => (val === "" || val === null || val === undefined || Number.isNaN(val) ? undefined : Number(val)),
+    z.number().min(0, "Hourly cap must be a positive number").optional()
+  ),
+  threshold_count_per_day: z.number().min(1, "Threshold count per day must be at least 1").nullish(),
+  bid_floor: z.number().min(0, "Bid floor must be a positive number").nullish(),
+  net_cost: z.number().min(0, "Net cost must be a positive number").nullish(),
+  target_impressions: z.number().min(0, "Target impressions must be a positive number").nullish(),
+  imp_multiplier: z.number().min(0, "Impression multiplier must be a positive number").default(1.0).nullish(),
+  bid_floor_base: z.number().min(0, "Base bid floor must be a positive number").nullish(),
+  cpm_base: z.number().min(0, "Base CPM must be a positive number").nullish(),
+  estimated_cost_base: z.number().min(0, "Base estimated cost must be a positive number").nullish(),
+}).refine((data) => {
+  return data.end_date > data.start_date;
+}, {
+  message: "End date must be after start date",
+  path: ["end_date"],
+}).refine((data) => {
+  if (data.goal_type === "SHARE_OF_VOICE" && data.target_value != null) {
+    return data.target_value >= 0 && data.target_value <= 100;
+  }
+  return true;
+}, {
+  message: "Share of Voice must be between 0 and 100%",
+  path: ["target_value"],
+});
+
+type LineItemDetailsFormData = z.infer<typeof lineItemDetailsSchema>;
+
+interface LineItemDetailsStepProps {
+  data?: any;
+  dealData?: any;
+  onComplete: (data: any) => void;
+  onBack?: () => void;
+  isLoading?: boolean;
+  formId?: string;
+  isPlannerRestricted?: boolean;
+  dealMode?: "DIRECT" | "PROGRAMMATIC";
+  dealType?: "GUARANTEED" | "PREFERRED_DEAL" | "PRIVATE_AUCTION" | "EVERGREEN_PMP" | "DIRECT";
+}
+
+
+const GOAL_TYPE_OPTIONS = [
+  { value: "IMPRESSIONS", label: "Impressions" },
+  { value: "REACH", label: "Reach" },
+  { value: "SHARE_OF_VOICE", label: "Share of Voice" },
+];
+
+const CREATIVE_TYPE_OPTIONS = [
+  { value: "DISPLAY", label: "Display", description: "Static images and banners" },
+  { value: "VIDEO", label: "Video", description: "Video content and animations" },
+  { value: "AUDIO", label: "Audio", description: "Audio advertisements" },
+];
+
+
+const PACING_OPTIONS = [
+  { 
+    value: "even", 
+    label: "Even (Default)",
+    description: "Budget will be distributed evenly across the entire flight duration."
+  },
+  { 
+    value: "asap", 
+    label: "ASAP",
+    description: "The allocated budget will be fully used to achieve target quantity as soon as possible at the earliest of the flight date."
+  },
+  { 
+    value: "front-loaded", 
+    label: "Front-Loaded",
+    description: "Higher budget allocation at the start of the campaign, tapering off towards the end."
+  },
+  { 
+    value: "back-loaded", 
+    label: "Back-Loaded",
+    description: "Lower budget allocation at the start, increasing towards the end of the campaign."
+  },
+];
+
+const formatDateForInput = (dateString: string | null | undefined) => {
+  if (!dateString) return "";
+  return dateString.split('T')[0];
+};
+
+export function LineItemDetailsStep({ data, dealData, onComplete, onBack, isLoading, formId = "line-item-details-form", isPlannerRestricted = false, dealMode = "DIRECT", dealType }: LineItemDetailsStepProps) {
+  const { t } = useTranslation('lineItems');
+  const defaultCurrency = dealData?.direct?.budgetSetup?.currency || dealData?.currency || "USD";
+  const isProgrammatic = dealMode === "PROGRAMMATIC";
+  const isGuaranteed = dealType === "GUARANTEED";
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { errors },
+    reset,
+  } = useForm<LineItemDetailsFormData>({
+    resolver: zodResolver(lineItemDetailsSchema),
+    defaultValues: {
+      name: data?.name || "",
+      start_date: formatDateForInput(data?.startDate || data?.start_date || dealData?.start_date),
+      end_date: formatDateForInput(data?.endDate || data?.end_date || dealData?.end_date),
+      budget_amount: data?.direct?.budgetSetup?.budgetAmount || undefined,
+      currency: defaultCurrency,
+      creative_type: data?.creativeType || "VIDEO",
+      duration: data?.duration || 10,
+      goal_type: data?.direct?.campaignGoal?.type || "IMPRESSIONS",
+      target_value: data?.direct?.campaignGoal?.targetValue || undefined,
+      daily_budget_cap: data?.netCostPerDay || undefined,
+      impressions: data?.impressions || undefined,
+      pacing_type: (data?.direct?.pacing?.type || "even").toLowerCase(),
+      pacing_daily_cap: data?.direct?.pacing?.dailyCap || undefined,
+      pacing_hourly_cap: data?.direct?.pacing?.hourlyCap || undefined,
+      threshold_count_per_day: data?.thresholdCountPerDay || undefined,
+      bid_floor: data?.programmatic?.bidFloor || undefined,
+      net_cost: data?.programmatic?.netCost || undefined,
+      target_impressions: data?.programmatic?.impressions || undefined,
+      imp_multiplier: data?.programmatic?.impMultiplier ?? 1.0,
+      bid_floor_base: data?.programmatic?.bidFloorBase || undefined,
+      cpm_base: data?.pricing?.cpmBase || undefined,
+      estimated_cost_base: data?.pricing?.estimatedCostBase || undefined,
+    },
+  });
+
+  const currency = watch("currency");
+  const creativeType = watch("creative_type");
+  const goalType = watch("goal_type");
+  const pacingType = watch("pacing_type");
+  const targetValue = watch("target_value");
+
+  // For Planner restricted mode: allow editing budget_amount and target_value if they were originally null/empty/0
+  const initialBudgetWasEmpty = useMemo(() => {
+    const initialValue = data?.direct?.budgetSetup?.budgetAmount;
+    return initialValue === null || initialValue === undefined || initialValue === 0;
+  }, [data]);
+
+  const initialTargetValueWasEmpty = useMemo(() => {
+    const initialValue = data?.direct?.campaignGoal?.targetValue;
+    return initialValue === null || initialValue === undefined || initialValue === 0;
+  }, [data]);
+
+  // Determine if these specific fields should be disabled (for Planner restricted mode exceptions)
+  const isBudgetAmountDisabled = isPlannerRestricted && !initialBudgetWasEmpty;
+  const isTargetValueDisabled = isPlannerRestricted && !initialTargetValueWasEmpty;
+
+  const [dateRange, setDateRange] = useState<{ from: Date | null; to: Date | null }>({ from: null, to: null });
+
+  // Calculate flight duration in days from selected date range
+  const flightDays = useMemo(() => {
+    if (dateRange.from && dateRange.to) {
+      const diffTime = Math.abs(dateRange.to.getTime() - dateRange.from.getTime());
+      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1; // +1 to include both start and end dates
+      return Math.max(1, diffDays);
+    }
+    return 30; // Default to 30 days if no date range selected
+  }, [dateRange.from, dateRange.to]);
+
+  const [previousGoalType, setPreviousGoalType] = useState(goalType);
+
+  useEffect(() => {
+    if (goalType !== previousGoalType) {
+      setValue("target_value", undefined, { shouldValidate: false });
+      setPreviousGoalType(goalType);
+    }
+  }, [goalType, previousGoalType, setValue]);
+
+  useEffect(() => {
+    if (goalType === "SHARE_OF_VOICE" && targetValue != null && targetValue > 100) {
+      setValue("target_value", 100, { shouldValidate: true });
+    }
+  }, [goalType, targetValue, setValue]);
+
+  useEffect(() => {
+    const startDate = watch("start_date");
+    const endDate = watch("end_date");
+    if (startDate && endDate) {
+      try {
+        setDateRange({
+          from: fromAPIDateString(startDate),
+          to: fromAPIDateString(endDate),
+        });
+      } catch (e) {
+        console.error("Error parsing dates:", e);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    if (data && Object.keys(data).length > 0) {
+      const pacingValue = (data?.direct?.pacing?.type || "even").toLowerCase();
+      console.log('📋 LineItemDetailsStep received data:', data);
+      console.log('📋 Pacing value to set:', pacingValue, 'from:', data?.direct?.pacing);
+      reset({
+        name: data.name || "",
+        start_date: formatDateForInput(data.startDate || data.start_date || dealData?.start_date),
+        end_date: formatDateForInput(data.endDate || data.end_date || dealData?.end_date),
+        budget_amount: data?.direct?.budgetSetup?.budgetAmount || undefined,
+        currency: defaultCurrency,
+        creative_type: data?.creativeType || "VIDEO",
+        duration: data?.duration || 10,
+        goal_type: data?.direct?.campaignGoal?.type || "IMPRESSIONS",
+        target_value: data?.direct?.campaignGoal?.targetValue || undefined,
+        daily_budget_cap: data?.netCostPerDay || undefined,
+        impressions: data?.impressions || undefined,
+        pacing_type: pacingValue,
+        pacing_daily_cap: data?.direct?.pacing?.dailyCap || undefined,
+        pacing_hourly_cap: data?.direct?.pacing?.hourlyCap || undefined,
+        threshold_count_per_day: data?.thresholdCountPerDay || undefined,
+        bid_floor: data?.programmatic?.bidFloor || undefined,
+        net_cost: data?.programmatic?.netCost || undefined,
+        target_impressions: data?.programmatic?.impressions || undefined,
+        imp_multiplier: data?.programmatic?.impMultiplier ?? 1.0,
+        bid_floor_base: data?.programmatic?.bidFloorBase || undefined,
+        cpm_base: data?.pricing?.cpmBase || undefined,
+        estimated_cost_base: data?.pricing?.estimatedCostBase || undefined,
+      });
+
+      const startDate = data.startDate || data.start_date || dealData?.start_date;
+      const endDate = data.endDate || data.end_date || dealData?.end_date;
+      if (startDate && endDate) {
+        try {
+          setDateRange({
+            from: fromAPIDateString(formatDateForInput(startDate)),
+            to: fromAPIDateString(formatDateForInput(endDate)),
+          });
+        } catch (e) {
+          console.error("Error parsing dates:", e);
+        }
+      }
+    }
+  }, [data, dealData, reset, defaultCurrency]);
+
+  const handleDateRangeChange = (value: { from: Date | null; to: Date | null }) => {
+    setDateRange(value);
+    if (value.from && value.to) {
+      setValue("start_date", toAPIDateString(value.from), { shouldValidate: true });
+      setValue("end_date", toAPIDateString(value.to), { shouldValidate: true });
+    }
+  };
+
+  const onSubmit = (values: LineItemDetailsFormData) => {
+    const pacing: any = {
+      type: values.pacing_type,
+    };
+    if (values.pacing_daily_cap) {
+      pacing.dailyCap = values.pacing_daily_cap;
+    }
+    if (values.pacing_hourly_cap) {
+      pacing.hourlyCap = values.pacing_hourly_cap;
+    }
+    
+    const apiPayload: any = {
+      name: values.name,
+      startDate: values.start_date,
+      endDate: values.end_date,
+      currency: values.currency,
+      creativeType: values.creative_type,
+      duration: values.duration || 10,
+    };
+
+    if (isProgrammatic) {
+      apiPayload.programmatic = {
+        bidFloor: values.bid_floor || undefined,
+        bidFloorBase: values.bid_floor_base || undefined,
+        netCost: values.net_cost || undefined,
+        impressions: values.target_impressions || undefined,
+        impMultiplier: values.imp_multiplier ?? 1.0,
+      };
+      if (isGuaranteed && values.threshold_count_per_day) {
+        apiPayload.thresholdCountPerDay = values.threshold_count_per_day;
+      }
+    } else {
+      apiPayload.pricing = {
+        cpmBase: values.cpm_base || undefined,
+        estimatedCostBase: values.estimated_cost_base || undefined,
+      };
+      apiPayload.impressions = values.impressions || undefined;
+      apiPayload.netCostPerDay = values.daily_budget_cap || undefined;
+      apiPayload.direct = {
+        budgetSetup: {
+          budgetType: "TOTAL",
+          budgetAmount: values.budget_amount,
+          currency: values.currency,
+        },
+        campaignGoal: {
+          type: values.goal_type,
+          targetValue: values.target_value || 0,
+        },
+        pacing,
+      };
+      if (isGuaranteed && values.threshold_count_per_day) {
+        apiPayload.thresholdCountPerDay = values.threshold_count_per_day;
+      }
+    }
+    
+    console.log('✅ Line Item Details submitted:', apiPayload);
+    onComplete(apiPayload);
+  };
+
+  const dateError = errors.start_date?.message || errors.end_date?.message;
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Main Content Area */}
+      <div className="flex-1 flex gap-6">
+        <div className="flex-1 min-w-0">
+        <form id={formId} onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+          {isPlannerRestricted && (
+            <div className="mb-4 p-3 bg-purple-50 border border-purple-200 rounded-lg">
+              <p className="text-sm text-purple-700 font-medium">{t('wizard.details.restrictedEditMode')}</p>
+              <p className="text-xs text-purple-600">{t('wizard.details.restrictedEditModeDesc')}{(initialBudgetWasEmpty || initialTargetValueWasEmpty) && ` ${t('wizard.details.restrictedEditModeWithBudget')}`}</p>
+            </div>
+          )}
+
+          <div className="flex items-start gap-3 pb-4 border-b border-mw-neutral-100 dark:border-mw-neutral-800">
+            <div className="h-10 w-10 rounded-lg bg-mw-primary-50 dark:bg-mw-primary-900/20 flex items-center justify-center flex-shrink-0">
+              <FileText className="h-5 w-5 text-mw-primary-500 dark:text-mw-primary-400" />
+            </div>
+            <div>
+              <h2 className="text-sm font-medium text-mw-neutral-900 dark:text-white">{t('deals:wizard.details.title')}</h2>
+              <p className="text-xs text-mw-neutral-500 dark:text-mw-neutral-400">{t('deals:wizard.details.subtitle')}</p>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <FormItem>
+              <FormLabel required>{t('deals:wizard.details.lineItemName')}</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder={t('deals:wizard.details.enterLineItemName')}
+                  maxLength={200}
+                  {...register("name")}
+                  className={cn("border-mw-neutral-200 dark:border-mw-neutral-700", isPlannerRestricted && "bg-mw-neutral-100 cursor-not-allowed")}
+                  disabled={isPlannerRestricted}
+                />
+              </FormControl>
+              {errors.name && <FormMessage>{errors.name.message}</FormMessage>}
+            </FormItem>
+
+            <FormItem>
+              <FormLabel required>{t('deals:wizard.details.flightDates')}</FormLabel>
+              <DateRangePicker
+                value={dateRange}
+                onChange={handleDateRangeChange}
+                placeholder={t('deals:wizard.details.selectFlightDates')}
+                minDate={getTodayDate()}
+                format="dd/MM/yyyy"
+                numberOfMonths={2}
+                disabled={isPlannerRestricted}
+              />
+              {dateError && <FormMessage>{dateError}</FormMessage>}
+            </FormItem>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <FormItem>
+              <FormLabel required>{t('deals:wizard.details.creativeType')}</FormLabel>
+              <input type="hidden" {...register("creative_type")} />
+              <SelectRoot value={creativeType} onValueChange={(value) => setValue("creative_type", value as "DISPLAY" | "VIDEO" | "AUDIO", { shouldValidate: true, shouldDirty: true })} disabled={isPlannerRestricted}>
+                <SelectTrigger className={cn("border-mw-neutral-200 dark:border-mw-neutral-700", isPlannerRestricted && "bg-mw-neutral-100 cursor-not-allowed")}>
+                  <SelectValue placeholder={t('deals:wizard.details.selectCreativeType')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {CREATIVE_TYPE_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </SelectRoot>
+              <p className="text-xs text-mw-neutral-500">
+                {CREATIVE_TYPE_OPTIONS.find(c => c.value === creativeType)?.description}
+              </p>
+              {errors.creative_type && <FormMessage>{errors.creative_type.message}</FormMessage>}
+            </FormItem>
+
+            <FormItem>
+              <FormLabel>{t('deals:wizard.details.creativeDuration')}</FormLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  placeholder={t('deals:wizard.details.durationPlaceholder')}
+                  min={1}
+                  max={300}
+                  {...register("duration", { valueAsNumber: true })}
+                  className={cn("border-mw-neutral-200 dark:border-mw-neutral-700", isPlannerRestricted && "bg-mw-neutral-100 cursor-not-allowed")}
+                  disabled={isPlannerRestricted}
+                />
+              </FormControl>
+              <p className="text-xs text-mw-neutral-500">{t('deals:wizard.details.durationOfPlayback')}</p>
+              {errors.duration && <FormMessage>{errors.duration.message}</FormMessage>}
+            </FormItem>
+
+            {!isProgrammatic && (
+              <FormItem>
+                <FormLabel required>{t('deals:wizard.details.budgetAmount')} ({currency})</FormLabel>
+                <FormControl>
+                  <div className="relative">
+                    <span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm font-medium text-mw-neutral-500">{currency}</span>
+                    <Input
+                      type="number"
+                      min={0}
+                      placeholder={t('deals:wizard.details.enterAmount')}
+                      {...register("budget_amount", { valueAsNumber: true })}
+                      className={cn("pl-14 border-mw-neutral-200 dark:border-mw-neutral-700", isBudgetAmountDisabled && "bg-mw-neutral-100 cursor-not-allowed")}
+                      disabled={isBudgetAmountDisabled}
+                    />
+                  </div>
+                </FormControl>
+                <p className="text-xs text-mw-neutral-500">{t('deals:wizard.details.currencyInherited')}</p>
+                {isPlannerRestricted && initialBudgetWasEmpty && (
+                  <p className="text-xs text-orange-600 flex items-center gap-1">
+                    <span className="inline-block w-1.5 h-1.5 bg-orange-500 rounded-full"></span>
+                    Expected number, received nan
+                  </p>
+                )}
+                {errors.budget_amount && <FormMessage>{errors.budget_amount.message}</FormMessage>}
+              </FormItem>
+            )}
+          </div>
+
+          {isProgrammatic ? (
+            <>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <FormItem>
+                  <FormLabel>Bid Floor ({currency})</FormLabel>
+                  <FormControl>
+                    <div className="relative">
+                      <DollarSign className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+                      <Input
+                        type="number"
+                        min={0}
+                        step="0.01"
+                        placeholder="Enter bid floor"
+                        {...register("bid_floor", { valueAsNumber: true })}
+                        className="pl-9 border-mw-neutral-200 dark:border-mw-neutral-700"
+                        disabled={isPlannerRestricted}
+                      />
+                    </div>
+                  </FormControl>
+                  <p className="text-xs text-mw-neutral-500">Minimum CPM bid for programmatic auctions</p>
+                  {errors.bid_floor && <FormMessage>{errors.bid_floor.message}</FormMessage>}
+                </FormItem>
+
+                <FormItem>
+                  <FormLabel>Base Bid Floor ({currency})</FormLabel>
+                  <FormControl>
+                    <div className="relative">
+                      <DollarSign className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+                      <Input
+                        type="number"
+                        min={0}
+                        step="0.01"
+                        placeholder="Enter base bid floor"
+                        {...register("bid_floor_base", { valueAsNumber: true })}
+                        className="pl-9 border-mw-neutral-200 dark:border-mw-neutral-700"
+                        disabled={isPlannerRestricted}
+                      />
+                    </div>
+                  </FormControl>
+                  <p className="text-xs text-mw-neutral-500">Original bid floor before custom fees</p>
+                  {errors.bid_floor_base && <FormMessage>{errors.bid_floor_base.message}</FormMessage>}
+                </FormItem>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <FormItem>
+                  <FormLabel>Net Cost ({currency})</FormLabel>
+                  <FormControl>
+                    <div className="relative">
+                      <DollarSign className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+                      <Input
+                        type="number"
+                        min={0}
+                        step="0.01"
+                        placeholder="Enter net cost"
+                        {...register("net_cost", { valueAsNumber: true })}
+                        className="pl-9 border-mw-neutral-200 dark:border-mw-neutral-700"
+                        disabled={isPlannerRestricted}
+                      />
+                    </div>
+                  </FormControl>
+                  <p className="text-xs text-mw-neutral-500">Total net cost for the line item</p>
+                  {errors.net_cost && <FormMessage>{errors.net_cost.message}</FormMessage>}
+                </FormItem>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <FormItem>
+                  <FormLabel>Target Impressions</FormLabel>
+                  <FormControl>
+                    <div className="relative">
+                      <Target className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+                      <Input
+                        type="number"
+                        min={0}
+                        placeholder="Enter target impressions"
+                        {...register("target_impressions", { valueAsNumber: true })}
+                        className="pl-9 border-mw-neutral-200 dark:border-mw-neutral-700"
+                        disabled={isPlannerRestricted}
+                      />
+                    </div>
+                  </FormControl>
+                  <p className="text-xs text-mw-neutral-500">Number of impressions to deliver</p>
+                  {errors.target_impressions && <FormMessage>{errors.target_impressions.message}</FormMessage>}
+                </FormItem>
+
+                <FormItem>
+                  <FormLabel>Impression Multiplier</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="number"
+                      step="0.1"
+                      min="0"
+                      placeholder="1.0"
+                      {...register("imp_multiplier", { valueAsNumber: true })}
+                      className="border-mw-neutral-200 dark:border-mw-neutral-700"
+                      disabled={isPlannerRestricted}
+                    />
+                  </FormControl>
+                  <p className="text-xs text-mw-neutral-500">Multiplier applied to impression counts (default: 1.0)</p>
+                  {errors.imp_multiplier && <FormMessage>{errors.imp_multiplier.message}</FormMessage>}
+                </FormItem>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <FormItem>
+                  <FormLabel>Base CPM ({currency})</FormLabel>
+                  <FormControl>
+                    <div className="relative">
+                      <DollarSign className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+                      <Input
+                        type="number"
+                        min={0}
+                        step="0.01"
+                        placeholder="Enter base CPM"
+                        {...register("cpm_base", { valueAsNumber: true })}
+                        className="pl-9 border-mw-neutral-200 dark:border-mw-neutral-700"
+                        disabled={isPlannerRestricted}
+                      />
+                    </div>
+                  </FormControl>
+                  <p className="text-xs text-mw-neutral-500">Original CPM before custom fees</p>
+                  {errors.cpm_base && <FormMessage>{errors.cpm_base.message}</FormMessage>}
+                </FormItem>
+
+                <FormItem>
+                  <FormLabel>Base Estimated Cost ({currency})</FormLabel>
+                  <FormControl>
+                    <div className="relative">
+                      <DollarSign className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+                      <Input
+                        type="number"
+                        min={0}
+                        step="0.01"
+                        placeholder="Enter base estimated cost"
+                        {...register("estimated_cost_base", { valueAsNumber: true })}
+                        className="pl-9 border-mw-neutral-200 dark:border-mw-neutral-700"
+                        disabled={isPlannerRestricted}
+                      />
+                    </div>
+                  </FormControl>
+                  <p className="text-xs text-mw-neutral-500">Original estimated cost before custom fees</p>
+                  {errors.estimated_cost_base && <FormMessage>{errors.estimated_cost_base.message}</FormMessage>}
+                </FormItem>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <FormItem>
+                  <FormLabel required>{t('deals:wizard.details.goalType')}</FormLabel>
+                  <SelectRoot value={goalType} onValueChange={(value) => setValue("goal_type", value as "IMPRESSIONS" | "REACH" | "SHARE_OF_VOICE")} disabled={isPlannerRestricted}>
+                    <SelectTrigger className={cn("border-mw-neutral-200 dark:border-mw-neutral-700", isPlannerRestricted && "bg-mw-neutral-100 cursor-not-allowed")}>
+                      <SelectValue placeholder={t('deals:wizard.details.selectGoalType')} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {GOAL_TYPE_OPTIONS.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </SelectRoot>
+                  {errors.goal_type && <FormMessage>{errors.goal_type.message}</FormMessage>}
+                </FormItem>
+
+                <FormItem>
+                  <FormLabel required>{t('deals:wizard.details.targetValue')}</FormLabel>
+                  <FormControl>
+                    <div className="relative">
+                      {goalType === "SHARE_OF_VOICE" ? (
+                        <span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-mw-neutral-400">%</span>
+                      ) : (
+                        <Target className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+                      )}
+                      <Input
+                        type="number"
+                        placeholder={
+                          goalType === "SHARE_OF_VOICE" 
+                            ? t('deals:wizard.details.enterPercentage')
+                            : goalType === "IMPRESSIONS" 
+                              ? t('deals:wizard.details.enterImpressions')
+                              : t('deals:wizard.details.enterUsers')
+                        }
+                        min={0}
+                        max={goalType === "SHARE_OF_VOICE" ? 100 : undefined}
+                        {...register("target_value", { valueAsNumber: true })}
+                        className={cn("pl-9 border-mw-neutral-200 dark:border-mw-neutral-700", isTargetValueDisabled && "bg-mw-neutral-100 cursor-not-allowed")}
+                        disabled={isTargetValueDisabled}
+                      />
+                    </div>
+                  </FormControl>
+                  <p className="text-xs text-mw-neutral-500">
+                    {goalType === "IMPRESSIONS" && t('deals:wizard.details.impressionsDesc')}
+                    {goalType === "REACH" && t('deals:wizard.details.reachDesc')}
+                    {goalType === "SHARE_OF_VOICE" && t('deals:wizard.details.sovDesc')}
+                  </p>
+                  {isPlannerRestricted && initialTargetValueWasEmpty && (
+                    <p className="text-xs text-orange-600 flex items-center gap-1">
+                      <span className="inline-block w-1.5 h-1.5 bg-orange-500 rounded-full"></span>
+                      Expected number, received nan
+                    </p>
+                  )}
+                  {errors.target_value && <FormMessage>{errors.target_value.message}</FormMessage>}
+                </FormItem>
+              </div>
+
+              <FormItem>
+                <FormLabel>{t('deals:wizard.details.pacing')}</FormLabel>
+                <SelectRoot value={pacingType || "even"} onValueChange={(value) => setValue("pacing_type", value as "asap" | "even" | "front-loaded" | "back-loaded")}>
+                  <SelectTrigger className="border-mw-neutral-200 dark:border-mw-neutral-700">
+                    <SelectValue placeholder={t('deals:wizard.details.selectPacing')} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {PACING_OPTIONS.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </SelectRoot>
+                <p className="text-xs text-mw-neutral-500 flex items-start gap-1.5 mt-1">
+                  <span className="inline-block w-3.5 h-3.5 rounded-full border border-mw-neutral-300 flex-shrink-0 mt-0.5 flex items-center justify-center text-[10px] text-mw-neutral-400">i</span>
+                  <span>{PACING_OPTIONS.find(p => p.value === (pacingType || "even"))?.description}</span>
+                </p>
+                {errors.pacing_type && <FormMessage>{errors.pacing_type.message}</FormMessage>}
+              </FormItem>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <FormItem>
+                  <FormLabel>
+                    {goalType === "IMPRESSIONS" && "Daily Impression Cap"}
+                    {goalType === "REACH" && "Daily Reach Cap"}
+                    {goalType === "SHARE_OF_VOICE" && "Daily SOV Cap"}
+                    {!goalType && "Daily Cap"}
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      type="number"
+                      min={0}
+                      placeholder={t('deals:wizard.details.optionalDailyLimit')}
+                      {...register("pacing_daily_cap", { valueAsNumber: true })}
+                      className="border-mw-neutral-200 dark:border-mw-neutral-700"
+                    />
+                  </FormControl>
+                  <p className="text-xs text-mw-neutral-500">
+                    {goalType === "IMPRESSIONS" && "Maximum impressions per day"}
+                    {goalType === "REACH" && "Maximum reach per day"}
+                    {goalType === "SHARE_OF_VOICE" && "Maximum SOV per day"}
+                    {!goalType && "Maximum per day"}
+                  </p>
+                  {errors.pacing_daily_cap && <FormMessage>{errors.pacing_daily_cap.message}</FormMessage>}
+                </FormItem>
+
+                <FormItem>
+                  <FormLabel>
+                    {goalType === "IMPRESSIONS" && "Hourly Impression Cap"}
+                    {goalType === "REACH" && "Hourly Reach Cap"}
+                    {goalType === "SHARE_OF_VOICE" && "Hourly SOV Cap"}
+                    {!goalType && "Hourly Cap"}
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      type="number"
+                      min={0}
+                      placeholder="Optional hourly limit"
+                      {...register("pacing_hourly_cap", { valueAsNumber: true })}
+                      className="border-mw-neutral-200 dark:border-mw-neutral-700"
+                    />
+                  </FormControl>
+                  <p className="text-xs text-mw-neutral-500">
+                    {goalType === "IMPRESSIONS" && "Maximum impressions per hour"}
+                    {goalType === "REACH" && "Maximum reach per hour"}
+                    {goalType === "SHARE_OF_VOICE" && "Maximum SOV per hour"}
+                    {!goalType && "Maximum per hour"}
+                  </p>
+                  {errors.pacing_hourly_cap && <FormMessage>{errors.pacing_hourly_cap.message}</FormMessage>}
+                </FormItem>
+              </div>
+
+              <PacingDeliveryGraph pacingType={pacingType} days={flightDays} />
+            </>
+          )}
+
+          {isGuaranteed && (
+            <div className="space-y-4">
+              <div className="flex items-start gap-3 pb-4 border-b border-mw-neutral-100 dark:border-mw-neutral-800">
+                <div className="h-10 w-10 rounded-lg bg-mw-green-50 dark:bg-mw-green-900/20 flex items-center justify-center flex-shrink-0">
+                  <Target className="h-5 w-5 text-mw-green-500 dark:text-mw-green-400" />
+                </div>
+                <div>
+                  <h2 className="text-sm font-medium text-mw-neutral-900 dark:text-white">Guaranteed Delivery Settings</h2>
+                  <p className="text-xs text-mw-neutral-500 dark:text-mw-neutral-400">Configure guaranteed impression delivery thresholds</p>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <FormItem>
+                  <FormLabel required>Threshold Count Per Day</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="number"
+                      min={1}
+                      placeholder="Enter daily threshold count"
+                      {...register("threshold_count_per_day", { valueAsNumber: true })}
+                      className="border-mw-neutral-200 dark:border-mw-neutral-700"
+                    />
+                  </FormControl>
+                  <p className="text-xs text-mw-neutral-500">
+                    Minimum number of impressions to be delivered per day for guaranteed deals
+                  </p>
+                  {errors.threshold_count_per_day && <FormMessage>{errors.threshold_count_per_day.message}</FormMessage>}
+                </FormItem>
+              </div>
+            </div>
+          )}
+
+        </form>
+      </div>
+
+      <FormInsights
+        insights={[
+          { text: "Line item name should be descriptive for easy identification", color: "green" },
+          { text: "Set realistic campaign dates for better inventory availability", color: "green" },
+          { text: "Selecting a brand helps with targeting recommendations", color: "green" },
+        ]}
+        quickTips={[
+          { text: "Selecting a brand helps with better recommendations", color: "blue" },
+          { text: "Targetting and Signals are set in the next step", color: "green" },
+          { text: "You can always change these details later", color: "blue" },
+        ]}
+      />
+      </div>
+    </div>
+  );
+}