adserver-dashboard 1.0.0

package/client/src/pages/dsp-form.tsx

@@ -0,0 +1,803 @@
+import { useState, useEffect } from "react";
+import { useLocation, useRoute } from "wouter";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useTranslation } from "@/lib/i18n";
+import { Button, cn } from "@moving-walls/design-system";
+import {
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "@moving-walls/design-system";
+import { Input } from "@moving-walls/design-system";
+import { Textarea } from "@moving-walls/design-system";
+import { Card, CardContent } from "@moving-walls/design-system";
+import { Switch } from "@moving-walls/design-system";
+import {
+  SelectRoot,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@moving-walls/design-system";
+import {
+  ArrowLeft,
+  Settings,
+  Globe,
+  FileText,
+  CreditCard,
+  BarChart3,
+} from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+import { usePageTitle } from "@/hooks/use-page-title";
+
+const DSP_OPTIONS = [
+  { value: "thetradedesk", label: "The Trade Desk" },
+  { value: "dv360", label: "Google DV360" },
+  { value: "mediamath", label: "MediaMath" },
+  { value: "xandr", label: "Xandr" },
+  { value: "amazon", label: "Amazon DSP" },
+  { value: "verizon", label: "Verizon Media" },
+  { value: "criteo", label: "Criteo" },
+  { value: "adroll", label: "AdRoll" },
+];
+
+const DSP_TYPE_OPTIONS = [
+  { value: "standard", label: "Standard" },
+  { value: "premium", label: "Premium" },
+  { value: "enterprise", label: "Enterprise" },
+];
+
+const TRANSACTION_TYPE_OPTIONS = [
+  { value: "SPOT", label: "Spot" },
+  { value: "AUDIENCE", label: "Audience" },
+];
+
+const COUNTRIES = [
+  { value: "Malaysia", label: "Malaysia" },
+  { value: "Singapore", label: "Singapore" },
+  { value: "Japan", label: "Japan" },
+  { value: "Indonesia", label: "Indonesia" },
+  { value: "Thailand", label: "Thailand" },
+  { value: "Philippines", label: "Philippines" },
+  { value: "Australia", label: "Australia" },
+  { value: "United States", label: "United States" },
+  { value: "United Kingdom", label: "United Kingdom" },
+  { value: "Germany", label: "Germany" },
+  { value: "France", label: "France" },
+  { value: "India", label: "India" },
+];
+
+const INVENTORY_ACCESS_OPTIONS = [
+  { value: "all", label: "All Inventory" },
+  { value: "premium", label: "Premium Only" },
+  { value: "standard", label: "Standard Only" },
+  { value: "custom", label: "Custom Selection" },
+];
+
+const CURRENCY_OPTIONS = [
+  { 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" },
+];
+
+const MEDIA_TYPE_OPTIONS = [
+  { value: "digital", label: "Digital" },
+  { value: "classic", label: "Classic" },
+  { value: "both", label: "Digital & Classic" },
+];
+
+const ASPECT_RATIO_OPTIONS = [
+  { value: "16:9", label: "16:9 (Landscape)" },
+  { value: "9:16", label: "9:16 (Portrait)" },
+  { value: "4:3", label: "4:3" },
+  { value: "1:1", label: "1:1 (Square)" },
+];
+
+const REPORTING_TYPE_OPTIONS = [
+  { value: "daily", label: "Daily" },
+  { value: "weekly", label: "Weekly" },
+  { value: "monthly", label: "Monthly" },
+];
+
+const TIMEZONE_OPTIONS = [
+  { value: "UTC", label: "UTC" },
+  { value: "Asia/Kuala_Lumpur", label: "Asia/Kuala Lumpur (GMT+8)" },
+  { value: "Asia/Singapore", label: "Asia/Singapore (GMT+8)" },
+  { value: "Asia/Tokyo", label: "Asia/Tokyo (GMT+9)" },
+  { value: "America/New_York", label: "America/New York (EST)" },
+  { value: "America/Los_Angeles", label: "America/Los Angeles (PST)" },
+  { value: "Europe/London", label: "Europe/London (GMT)" },
+];
+
+const REPORTING_FIELDS_OPTIONS = [
+  { value: "impressions", label: "Impressions" },
+  { value: "clicks", label: "Clicks" },
+  { value: "spend", label: "Spend" },
+  { value: "ctr", label: "CTR" },
+  { value: "cpm", label: "CPM" },
+  { value: "conversions", label: "Conversions" },
+];
+
+const formSchema = z.object({
+  dsp: z.string().min(1, "DSP is required"),
+  dspType: z.string().min(1, "DSP Type is required"),
+  transactionType: z.string().min(1, "Transaction Type is required"),
+  ipAddress: z.string().min(1, "IP Address is required"),
+  country: z.string().min(1, "Country is required"),
+  inventoryAccess: z.string().min(1, "Inventory Access is required"),
+  currencyAccess: z.string().min(1, "Currency Access is required"),
+  url: z.string().url("Please enter a valid URL"),
+  mediaType: z.string().min(1, "Media Type is required"),
+  accessTokenKey: z.string().optional(),
+  accessTokenSecret: z.string().optional(),
+  creativeOfflineApproval: z.boolean(),
+  dealAutoApproval: z.boolean(),
+  dealReopen: z.boolean(),
+  enableAspectRatio: z.boolean(),
+  disclaimer: z.string().optional(),
+  displayAspectRatio: z.string().optional(),
+  billingName: z.string().min(1, "Billing Name is required"),
+  billingAddress: z.string().min(1, "Billing Address is required"),
+  emailId: z.string().email("Please enter a valid email"),
+  reportingType: z.string().min(1, "Reporting Type is required"),
+  timeZone: z.string().min(1, "Time Zone is required"),
+  reportingEmailId: z.string().email("Please enter a valid email"),
+  reportingFields: z.array(z.string()).min(1, "At least one field is required"),
+  reportingTime: z.string().min(1, "Reporting Time is required"),
+  activate: z.boolean(),
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+// Map Zod error messages to i18n translation keys
+const dspErrorMessageMap: Record<string, string> = {
+  "DSP is required": "form.validation.dspRequired",
+  "DSP Type is required": "form.validation.dspTypeRequired",
+  "Transaction Type is required": "form.validation.transactionTypeRequired",
+  "IP Address is required": "form.validation.ipRequired",
+  "Country is required": "form.validation.countryRequired",
+  "Inventory Access is required": "form.validation.inventoryAccessRequired",
+  "Currency Access is required": "form.validation.currencyAccessRequired",
+  "Please enter a valid URL": "form.validation.urlInvalid",
+  "Media Type is required": "form.validation.mediaTypeRequired",
+  "Billing Name is required": "form.validation.billingNameRequired",
+  "Billing Address is required": "form.validation.billingAddressRequired",
+  "Please enter a valid email": "form.validation.emailInvalid",
+  "Reporting Type is required": "form.validation.reportingTypeRequired",
+  "Time Zone is required": "form.validation.timeZoneRequired",
+  "At least one field is required": "form.validation.atLeastOneFieldRequired",
+};
+
+const getErrorTranslation = (t: any, message: string | undefined): string => {
+  if (!message) return "";
+  const key = dspErrorMessageMap[message];
+  return key ? t(`dsp:${key}`) : message;
+};
+
+const SectionIcon = ({
+  icon: Icon,
+  bgColor,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  bgColor: string;
+}) => (
+  <div className={cn("w-10 h-10 rounded-lg flex items-center justify-center", bgColor)}>
+    <Icon className="h-5 w-5 text-white" />
+  </div>
+);
+
+export default function DSPFormPage() {
+  const { t } = useTranslation(["dsp", "common"]);
+  const [, setLocation] = useLocation();
+  const [matchEdit, paramsEdit] = useRoute("/dsp/edit/:dspId");
+  const dspId = matchEdit ? paramsEdit?.dspId : null;
+  const isEditMode = !!dspId;
+  usePageTitle(isEditMode ? t("dsp:form.editTitle") : t("dsp:form.addTitle"));
+
+  const { toast } = useToast();
+  const [selectedReportingFields, setSelectedReportingFields] = useState<string[]>([]);
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { errors },
+    reset,
+  } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      dsp: "",
+      dspType: "",
+      transactionType: "",
+      ipAddress: "",
+      country: "",
+      inventoryAccess: "",
+      currencyAccess: "",
+      url: "",
+      mediaType: "",
+      accessTokenKey: "",
+      accessTokenSecret: "",
+      creativeOfflineApproval: false,
+      dealAutoApproval: false,
+      dealReopen: false,
+      enableAspectRatio: false,
+      disclaimer: "",
+      displayAspectRatio: "",
+      billingName: "",
+      billingAddress: "",
+      emailId: "",
+      reportingType: "",
+      timeZone: "",
+      reportingEmailId: "",
+      reportingFields: [],
+      reportingTime: "",
+      activate: false,
+    },
+  });
+
+  const enableAspectRatio = watch("enableAspectRatio");
+
+  useEffect(() => {
+    if (isEditMode && dspId) {
+      reset({
+        dsp: "thetradedesk",
+        dspType: "standard",
+        transactionType: "SPOT",
+        ipAddress: "192.168.1.100",
+        country: "United States",
+        inventoryAccess: "all",
+        currencyAccess: "USD",
+        url: "https://thetradedesk.com",
+        mediaType: "digital",
+        accessTokenKey: "tk_12345",
+        accessTokenSecret: "sk_secret",
+        creativeOfflineApproval: true,
+        dealAutoApproval: false,
+        dealReopen: true,
+        enableAspectRatio: true,
+        disclaimer: "Standard terms and conditions apply.",
+        displayAspectRatio: "16:9",
+        billingName: "The Trade Desk Inc.",
+        billingAddress: "42 N Chestnut St, Ventura, CA 93001",
+        emailId: "billing@thetradedesk.com",
+        reportingType: "daily",
+        timeZone: "America/Los_Angeles",
+        reportingEmailId: "reports@thetradedesk.com",
+        reportingFields: ["impressions", "clicks", "spend"],
+        reportingTime: "09:00",
+        activate: true,
+      });
+      setSelectedReportingFields(["impressions", "clicks", "spend"]);
+    }
+  }, [isEditMode, dspId, reset]);
+
+  const handleCancel = () => {
+    setLocation("/dsp");
+  };
+
+  const onSubmit = (data: FormData) => {
+    console.log("Form data:", data);
+    toast({
+      title: t("common:success"),
+      description: t("dsp:form.saveSuccess"),
+      variant: "success",
+    });
+    setLocation("/dsp");
+  };
+
+  const toggleReportingField = (field: string) => {
+    const newFields = selectedReportingFields.includes(field)
+      ? selectedReportingFields.filter((f) => f !== field)
+      : [...selectedReportingFields, field];
+    setSelectedReportingFields(newFields);
+    setValue("reportingFields", newFields);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex-shrink-0 px-6 py-4 border-b border-mw-neutral-100 bg-white">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              isIconOnly
+              onClick={handleCancel}
+            >
+              <ArrowLeft className="h-5 w-5" />
+            </Button>
+            <div className="h-10 w-10 rounded-lg bg-blue-50 flex items-center justify-center flex-shrink-0">
+              <Settings className="h-5 w-5 text-blue-500" />
+            </div>
+            <div>
+              <h1 className="text-lg font-semibold text-mw-neutral-900">
+                {isEditMode ? t("dsp:form.editTitle") : t("dsp:form.addTitle")}
+              </h1>
+              <p className="text-sm text-mw-neutral-500">
+                {t("dsp:form.subtitle")}
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <Button variant="outline" onClick={handleCancel}>
+              {t("dsp:form.cancel")}
+            </Button>
+            <Button onClick={handleSubmit(onSubmit)}>{t("dsp:form.saveDsp")}</Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 p-6 overflow-auto">
+        <div className="max-w-4xl mx-auto space-y-6">
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3 mb-6">
+                <SectionIcon icon={Settings} bgColor="bg-blue-500" />
+                <h2 className="text-lg font-semibold text-mw-neutral-900">{t("dsp:form.sections.dspDetails.title")}</h2>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div className="space-y-2">
+                  <FormLabel>{t("dsp:form.sections.dspDetails.chooseDsp")}</FormLabel>
+                  <SelectRoot
+                    value={watch("dsp")}
+                    onValueChange={(value) => setValue("dsp", value)}
+                  >
+                    <SelectTrigger className={errors.dsp ? "border-red-500" : ""}>
+                      <SelectValue placeholder={t("dsp:form.sections.dspDetails.selectDsp")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {DSP_OPTIONS.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </SelectRoot>
+                  {errors.dsp && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.dsp.message)}</p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <FormLabel>{t("dsp:form.sections.dspDetails.chooseDspType")}</FormLabel>
+                  <SelectRoot
+                    value={watch("dspType")}
+                    onValueChange={(value) => setValue("dspType", value)}
+                  >
+                    <SelectTrigger className={errors.dspType ? "border-red-500" : ""}>
+                      <SelectValue placeholder={t("dsp:form.sections.dspDetails.selectType")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {DSP_TYPE_OPTIONS.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </SelectRoot>
+                  {errors.dspType && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.dspType.message)}</p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <FormLabel>{t("dsp:form.sections.dspDetails.transactionType")}</FormLabel>
+                  <SelectRoot
+                    value={watch("transactionType")}
+                    onValueChange={(value) => setValue("transactionType", value)}
+                  >
+                    <SelectTrigger className={errors.transactionType ? "border-red-500" : ""}>
+                      <SelectValue placeholder={t("dsp:form.sections.dspDetails.selectTransactionType")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {TRANSACTION_TYPE_OPTIONS.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </SelectRoot>
+                  {errors.transactionType && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.transactionType.message)}</p>
+                  )}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3 mb-6">
+                <SectionIcon icon={Globe} bgColor="bg-orange-500" />
+                <h2 className="text-lg font-semibold text-mw-neutral-900">{t("dsp:form.sections.configurationSetup.title")}</h2>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="space-y-2">
+                  <FormLabel>{t("dsp:form.sections.configurationSetup.ipAddress")}</FormLabel>
+                  <Input
+                    placeholder={t("dsp:form.sections.configurationSetup.enterIpAddress")}
+                    {...register("ipAddress")}
+                    className={errors.ipAddress ? "border-red-500" : ""}
+                  />
+                  {errors.ipAddress && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.ipAddress.message)}</p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <FormLabel>{t("dsp:form.sections.configurationSetup.country")}</FormLabel>
+                  <SelectRoot
+                    value={watch("country")}
+                    onValueChange={(value) => setValue("country", value)}
+                  >
+                    <SelectTrigger className={errors.country ? "border-red-500" : ""}>
+                      <SelectValue placeholder={t("dsp:form.sections.configurationSetup.selectCountry")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {COUNTRIES.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </SelectRoot>
+                  {errors.country && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.country.message)}</p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <FormLabel>{t("dsp:form.sections.configurationSetup.inventoryAccess")}</FormLabel>
+                  <SelectRoot
+                    value={watch("inventoryAccess")}
+                    onValueChange={(value) => setValue("inventoryAccess", value)}
+                  >
+                    <SelectTrigger className={errors.inventoryAccess ? "border-red-500" : ""}>
+                      <SelectValue placeholder={t("dsp:form.sections.configurationSetup.selectAccess")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {INVENTORY_ACCESS_OPTIONS.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </SelectRoot>
+                  {errors.inventoryAccess && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.inventoryAccess.message)}</p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <FormLabel>{t("dsp:form.sections.configurationSetup.currencyAccess")}</FormLabel>
+                  <SelectRoot
+                    value={watch("currencyAccess")}
+                    onValueChange={(value) => setValue("currencyAccess", value)}
+                  >
+                    <SelectTrigger className={errors.currencyAccess ? "border-red-500" : ""}>
+                      <SelectValue placeholder={t("dsp:form.sections.configurationSetup.selectCurrency")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {CURRENCY_OPTIONS.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </SelectRoot>
+                  {errors.currencyAccess && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.currencyAccess.message)}</p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <FormLabel>{t("dsp:form.sections.configurationSetup.url")}</FormLabel>
+                  <Input
+                    placeholder={t("dsp:form.sections.configurationSetup.enterUrl")}
+                    {...register("url")}
+                    className={errors.url ? "border-red-500" : ""}
+                  />
+                  {errors.url && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.url.message)}</p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <FormLabel>{t("dsp:form.sections.configurationSetup.mediaType")}</FormLabel>
+                  <SelectRoot
+                    value={watch("mediaType")}
+                    onValueChange={(value) => setValue("mediaType", value)}
+                  >
+                    <SelectTrigger className={errors.mediaType ? "border-red-500" : ""}>
+                      <SelectValue placeholder={t("dsp:form.sections.configurationSetup.selectMediaType")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {MEDIA_TYPE_OPTIONS.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </SelectRoot>
+                  {errors.mediaType && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.mediaType.message)}</p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <FormLabel>{t("dsp:form.sections.configurationSetup.accessTokenKey")}</FormLabel>
+                  <Input
+                    placeholder={t("dsp:form.sections.configurationSetup.enterTokenKey")}
+                    {...register("accessTokenKey")}
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <FormLabel>{t("dsp:form.sections.configurationSetup.accessTokenSecret")}</FormLabel>
+                  <Input
+                    type="password"
+                    placeholder={t("dsp:form.sections.configurationSetup.enterTokenSecret")}
+                    {...register("accessTokenSecret")}
+                  />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3 mb-6">
+                <SectionIcon icon={FileText} bgColor="bg-teal-500" />
+                <h2 className="text-lg font-semibold text-mw-neutral-900">{t("dsp:form.sections.dealSetup.title")}</h2>
+              </div>
+              <div className="space-y-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div className="flex items-center justify-between p-4 bg-mw-neutral-50 rounded-lg">
+                    <span className="text-sm font-medium text-mw-neutral-700">
+                      {t("dsp:form.sections.dealSetup.creativeOfflineApproval")}
+                    </span>
+                    <Switch
+                      checked={watch("creativeOfflineApproval")}
+                      onChange={() =>
+                        setValue("creativeOfflineApproval", !watch("creativeOfflineApproval"))
+                      }
+                    />
+                  </div>
+
+                  <div className="flex items-center justify-between p-4 bg-mw-neutral-50 rounded-lg">
+                    <span className="text-sm font-medium text-mw-neutral-700">
+                      {t("dsp:form.sections.dealSetup.dealAutoApproval")}
+                    </span>
+                    <Switch
+                      checked={watch("dealAutoApproval")}
+                      onChange={() =>
+                        setValue("dealAutoApproval", !watch("dealAutoApproval"))
+                      }
+                    />
+                  </div>
+
+                  <div className="flex items-center justify-between p-4 bg-mw-neutral-50 rounded-lg">
+                    <span className="text-sm font-medium text-mw-neutral-700">
+                      {t("dsp:form.sections.dealSetup.dealReopen")}
+                    </span>
+                    <Switch
+                      checked={watch("dealReopen")}
+                      onChange={() => setValue("dealReopen", !watch("dealReopen"))}
+                    />
+                  </div>
+
+                  <div className="flex items-center justify-between p-4 bg-mw-neutral-50 rounded-lg">
+                    <span className="text-sm font-medium text-mw-neutral-700">
+                      {t("dsp:form.sections.dealSetup.enableAspectRatio")}
+                    </span>
+                    <Switch
+                      checked={watch("enableAspectRatio")}
+                      onChange={() =>
+                        setValue("enableAspectRatio", !watch("enableAspectRatio"))
+                      }
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <FormLabel>{t("dsp:form.sections.dealSetup.disclaimer")}</FormLabel>
+                  <Textarea
+                    placeholder={t("dsp:form.sections.dealSetup.disclaimerPlaceholder")}
+                    {...register("disclaimer")}
+                    rows={3}
+                  />
+                </div>
+
+                {enableAspectRatio && (
+                  <div className="space-y-2">
+                    <FormLabel>{t("dsp:form.sections.dealSetup.displayAspectRatio")}</FormLabel>
+                    <SelectRoot
+                      value={watch("displayAspectRatio")}
+                      onValueChange={(value) => setValue("displayAspectRatio", value)}
+                    >
+                      <SelectTrigger className="w-full md:w-64">
+                        <SelectValue placeholder={t("dsp:form.sections.dealSetup.selectAspectRatio")} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {ASPECT_RATIO_OPTIONS.map((option) => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </SelectRoot>
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3 mb-6">
+                <SectionIcon icon={CreditCard} bgColor="bg-yellow-500" />
+                <h2 className="text-lg font-semibold text-mw-neutral-900">{t("dsp:form.sections.billingInformation.title")}</h2>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="space-y-2">
+                  <FormLabel>{t("dsp:form.sections.billingInformation.billingName")}</FormLabel>
+                  <Input
+                    placeholder={t("dsp:form.sections.billingInformation.enterBillingName")}
+                    {...register("billingName")}
+                    className={errors.billingName ? "border-red-500" : ""}
+                  />
+                  {errors.billingName && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.billingName.message)}</p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <FormLabel>{t("dsp:form.sections.billingInformation.emailId")}</FormLabel>
+                  <Input
+                    type="email"
+                    placeholder={t("dsp:form.sections.billingInformation.enterEmailId")}
+                    {...register("emailId")}
+                    className={errors.emailId ? "border-red-500" : ""}
+                  />
+                  {errors.emailId && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.emailId.message)}</p>
+                  )}
+                </div>
+
+                <div className="md:col-span-2 space-y-2">
+                  <FormLabel>{t("dsp:form.sections.billingInformation.billingAddress")}</FormLabel>
+                  <Textarea
+                    placeholder={t("dsp:form.sections.billingInformation.enterBillingAddress")}
+                    {...register("billingAddress")}
+                    className={errors.billingAddress ? "border-red-500" : ""}
+                    rows={2}
+                  />
+                  {errors.billingAddress && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.billingAddress.message)}</p>
+                  )}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3 mb-6">
+                <SectionIcon icon={BarChart3} bgColor="bg-orange-500" />
+                <h2 className="text-lg font-semibold text-mw-neutral-900">{t("dsp:form.sections.reportingStructure.title")}</h2>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="space-y-2">
+                  <FormLabel>{t("dsp:form.sections.reportingStructure.type")}</FormLabel>
+                  <SelectRoot
+                    value={watch("reportingType")}
+                    onValueChange={(value) => setValue("reportingType", value)}
+                  >
+                    <SelectTrigger className={errors.reportingType ? "border-red-500" : ""}>
+                      <SelectValue placeholder={t("dsp:form.sections.reportingStructure.chooseType")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {REPORTING_TYPE_OPTIONS.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </SelectRoot>
+                  {errors.reportingType && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.reportingType.message)}</p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <FormLabel>{t("dsp:form.sections.reportingStructure.timeZone")}</FormLabel>
+                  <SelectRoot
+                    value={watch("timeZone")}
+                    onValueChange={(value) => setValue("timeZone", value)}
+                  >
+                    <SelectTrigger className={errors.timeZone ? "border-red-500" : ""}>
+                      <SelectValue placeholder={t("dsp:form.sections.reportingStructure.selectTimezone")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {TIMEZONE_OPTIONS.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </SelectRoot>
+                  {errors.timeZone && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.timeZone.message)}</p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <FormLabel>{t("dsp:form.sections.reportingStructure.reportingEmailId")}</FormLabel>
+                  <Input
+                    type="email"
+                    placeholder={t("dsp:form.sections.reportingStructure.enterEmailId")}
+                    {...register("reportingEmailId")}
+                    className={errors.reportingEmailId ? "border-red-500" : ""}
+                  />
+                  {errors.reportingEmailId && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.reportingEmailId.message)}</p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <FormLabel>{t("dsp:form.sections.reportingStructure.reportingTime")}</FormLabel>
+                  <Input
+                    type="time"
+                    {...register("reportingTime")}
+                    className={errors.reportingTime ? "border-red-500" : ""}
+                  />
+                  {errors.reportingTime && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.reportingTime.message)}</p>
+                  )}
+                </div>
+
+                <div className="md:col-span-2 space-y-2">
+                  <FormLabel>{t("dsp:form.sections.reportingStructure.reportingFields")}</FormLabel>
+                  <div className="flex flex-wrap gap-2">
+                    {REPORTING_FIELDS_OPTIONS.map((field) => (
+                      <Button
+                        key={field.value}
+                        type="button"
+                        variant={selectedReportingFields.includes(field.value) ? "primary" : "outline"}
+                        size="sm"
+                        onClick={() => toggleReportingField(field.value)}
+                      >
+                        {field.label}
+                      </Button>
+                    ))}
+                  </div>
+                  {errors.reportingFields && (
+                    <p className="text-sm text-red-500">{getErrorTranslation(t, errors.reportingFields.message)}</p>
+                  )}
+                </div>
+
+                <div className="md:col-span-2 flex items-center justify-between p-4 bg-mw-neutral-50 rounded-lg">
+                  <span className="text-sm font-medium text-mw-neutral-700">{t("dsp:form.sections.reportingStructure.activate")}</span>
+                  <Switch
+                    checked={watch("activate")}
+                    onChange={() => setValue("activate", !watch("activate"))}
+                  />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}