@lodashventure/medusa-campaign 1.5.1 → 1.5.3

package/.medusa/server/src/admin/index.js

@@ -698,1396 +698,1274 @@ const CouponForm = ({
     )
   ] });
 };
-const useCouponById = (id) => {
-  const [data, setData] = react.useState(null);
-  const [isLoading, setIsLoading] = react.useState(true);
-  const [error, setError] = react.useState(null);
-  const fetchCoupon = async () => {
-    if (!id) {
-      return;
-    }
-    setIsLoading(true);
-    setError(null);
+const CouponCreate = () => {
+  const navigate = reactRouterDom.useNavigate();
+  const handleSubmit = async (formData) => {
+    var _a, _b;
     try {
-      const response = await axios__default.default.get(`/admin/coupons/${id}`);
-      setData(response.data);
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error("Failed to fetch coupon"));
-    } finally {
-      setIsLoading(false);
+      await axios__default.default.post("/admin/coupons", {
+        ...formData,
+        starts_at: new Date(formData.starts_at).toUTCString(),
+        ends_at: new Date(formData.ends_at).toUTCString(),
+        currency_code: formData.discount_type === "fixed" ? formData.currency_code : void 0
+      });
+      ui.toast.success("Coupon created successfully");
+      navigate("/coupons");
+    } catch (error) {
+      let message = "Failed to create coupon";
+      if (axios__default.default.isAxiosError(error)) {
+        message = ((_b = (_a = error.response) == null ? void 0 : _a.data) == null ? void 0 : _b.message) ?? message;
+      } else if (error instanceof Error) {
+        message = error.message;
+      }
+      ui.toast.error("Failed to create coupon", {
+        description: message
+      });
     }
   };
-  react.useEffect(() => {
-    fetchCoupon();
-  }, [id]);
-  return {
-    data,
-    isLoading,
-    error,
-    refetch: fetchCoupon
-  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CouponForm,
+    {
+      onSubmit: handleSubmit,
+      onCancel: () => navigate("/coupons")
+    }
+  );
 };
-const MarkdownEditor = ({
-  label,
-  value,
-  onChange,
-  placeholder,
-  helpText,
-  rows = 10,
-  showPreview = true
+const sdk = new Medusa__default.default({
+  baseUrl: "/",
+  debug: false,
+  auth: {
+    type: "session"
+  }
+});
+const columnHelper = ui.createDataTableColumnHelper();
+const columns = [
+  columnHelper.accessor("title", {
+    header: "Title",
+    cell: (info) => /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "large", className: "py-2", children: info.getValue() })
+  }),
+  columnHelper.accessor("description", {
+    header: "Description",
+    cell: (info) => /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "large", className: "py-2", children: info.getValue() })
+  })
+];
+const ProductSelector = ({
+  selectedProductIds,
+  onSelectProduct
 }) => {
-  const [activeTab, setActiveTab] = react.useState("write");
-  const insertMarkdown = (before, after = "") => {
-    const textarea = document.getElementById(
-      `markdown-${label}`
+  const [search, setSearch] = react.useState("");
+  const debouncedSearchHandler = lodash.debounce((value) => {
+    setSearch(value);
+  }, 500);
+  const [products, setProducts] = react.useState(null);
+  const [isLoading, setIsLoading] = react.useState(true);
+  react.useEffect(() => {
+    const fetchProducts = async () => {
+      setIsLoading(true);
+      try {
+        const result = await sdk.admin.product.list({
+          q: search,
+          limit: 100
+        });
+        setProducts(result);
+      } catch (error) {
+        console.error("Failed to fetch products:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchProducts();
+  }, [selectedProductIds, search]);
+  const selectableProducts = react.useMemo(() => {
+    var _a;
+    return (_a = products == null ? void 0 : products.products) == null ? void 0 : _a.filter(
+      (product) => !selectedProductIds.includes(product.id)
     );
-    if (!textarea) return;
-    const start = textarea.selectionStart;
-    const end = textarea.selectionEnd;
-    const selectedText = value.substring(start, end);
-    const newText = value.substring(0, start) + before + selectedText + after + value.substring(end);
-    onChange(newText);
-    setTimeout(() => {
-      textarea.focus();
-      textarea.setSelectionRange(
-        start + before.length,
-        start + before.length + selectedText.length
-      );
-    }, 0);
+  }, [products == null ? void 0 : products.products, selectedProductIds]);
+  const table = ui.useDataTable({
+    data: selectableProducts || [],
+    columns,
+    getRowId: (product) => product.id,
+    onRowClick: (_, row) => {
+      onSelectProduct == null ? void 0 : onSelectProduct(row.original);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Input,
+      {
+        className: "text-lg py-2",
+        placeholder: "Search products...",
+        onChange: (e) => debouncedSearchHandler(e.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.DataTable, { instance: table, children: /* @__PURE__ */ jsxRuntime.jsx(ui.DataTable.Table, {}) })
+  ] });
+};
+const customCampaignSchema = z__default.default.object({
+  name: z__default.default.string().min(1, "Name is required"),
+  description: z__default.default.string().min(1, "Description is required"),
+  type: z__default.default.literal("flash-sale"),
+  starts_at: z__default.default.string().min(1, "Start date is required"),
+  ends_at: z__default.default.string().min(1, "End date is required")
+});
+const campaignProductSchema = z__default.default.object({
+  product: z__default.default.object({
+    id: z__default.default.string(),
+    title: z__default.default.string()
+  }),
+  discountType: z__default.default.enum([
+    "percentage"
+    // , "fixed"
+  ]),
+  discountValue: z__default.default.number().min(1),
+  limit: z__default.default.number().min(1),
+  maxQty: z__default.default.number().min(1)
+});
+const campaignDataSchema = customCampaignSchema.extend({
+  products: z__default.default.array(campaignProductSchema).min(1, "At least one product is required")
+}).refine(
+  (data) => new Date(data.starts_at) < new Date(data.ends_at),
+  "End date must be after start date"
+);
+const FlashSaleForm = ({
+  initialData,
+  initialProducts,
+  onSubmit,
+  onCancel,
+  disabled = false
+}) => {
+  var _a;
+  const {
+    control,
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors }
+  } = reactHookForm.useForm({
+    resolver: zod.zodResolver(campaignDataSchema),
+    defaultValues: {
+      name: (initialData == null ? void 0 : initialData.name) || "",
+      description: (initialData == null ? void 0 : initialData.description) || "",
+      type: "flash-sale",
+      starts_at: (initialData == null ? void 0 : initialData.starts_at) || "",
+      ends_at: (initialData == null ? void 0 : initialData.ends_at) || "",
+      products: initialProducts ? Array.from(initialProducts.values()) : []
+    }
+  });
+  const { fields, append, remove, update } = reactHookForm.useFieldArray({
+    control,
+    name: "products"
+  });
+  const [openProductModal, setOpenProductModal] = react.useState(false);
+  const startsAt = watch("starts_at");
+  const endsAt = watch("ends_at");
+  const handleDateTimeChange = (field, type, value) => {
+    const currentValue = watch(field);
+    if (type === "date") {
+      const time = currentValue ? dayjs__default.default(currentValue).format("HH:mm") : field === "starts_at" ? "00:00" : "23:59";
+      setValue(field, `${value}T${time}`);
+    } else {
+      const date = currentValue ? dayjs__default.default(currentValue).format("YYYY-MM-DD") : dayjs__default.default().format("YYYY-MM-DD");
+      setValue(field, `${date}T${value}`);
+    }
   };
-  const renderMarkdownPreview = (markdown) => {
-    let html = markdown;
-    html = html.replace(/^### (.*$)/gim, "<h3>$1</h3>");
-    html = html.replace(/^## (.*$)/gim, "<h2>$1</h2>");
-    html = html.replace(/^# (.*$)/gim, "<h1>$1</h1>");
-    html = html.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
-    html = html.replace(/__(.+?)__/g, "<strong>$1</strong>");
-    html = html.replace(/\*(.+?)\*/g, "<em>$1</em>");
-    html = html.replace(/_(.+?)_/g, "<em>$1</em>");
-    html = html.replace(
-      /```(\w+)?\n([\s\S]+?)```/g,
-      '<pre class="bg-ui-bg-subtle p-4 rounded-lg overflow-x-auto"><code class="language-$1">$2</code></pre>'
-    );
-    html = html.replace(
-      /`([^`]+)`/g,
-      '<code class="bg-ui-bg-subtle px-1 py-0.5 rounded text-sm">$1</code>'
-    );
-    html = html.replace(
-      /\[([^\]]+)\]\(([^)]+)\)/g,
-      '<a href="$2" class="text-ui-fg-interactive underline">$1</a>'
-    );
-    html = html.replace(
-      /!\[([^\]]*)\]\(([^)]+)\)/g,
-      '<img src="$2" alt="$1" class="max-w-full h-auto rounded-lg my-2" />'
-    );
-    html = html.replace(/^\* (.+)$/gim, "<li>$1</li>");
-    html = html.replace(/^\- (.+)$/gim, "<li>$1</li>");
-    html = html.replace(
-      /(<li>.*<\/li>)/s,
-      "<ul class='list-disc ml-6'>$1</ul>"
-    );
-    html = html.replace(/\n\n/g, "</p><p>");
-    html = `<p>${html}</p>`;
-    return html;
+  const onFormSubmit = (data) => {
+    onSubmit(data);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: `markdown-${label}`, className: "font-medium", children: label }),
-      helpText && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-xs text-ui-fg-subtle", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(icons.InformationCircle, { className: "h-4 w-4" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: helpText })
-      ] })
-    ] }),
-    showPreview ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs, { value: activeTab, onValueChange: (v) => setActiveTab(v), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs.List, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Trigger, { value: "write", children: "Write" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Trigger, { value: "preview", children: "Preview" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Content, { value: "write", className: "mt-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2 border-b pb-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Button,
-            {
-              type: "button",
-              variant: "secondary",
-              size: "small",
-              onClick: () => insertMarkdown("**", "**"),
-              title: "Bold",
-              children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "B" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Button,
-            {
-              type: "button",
-              variant: "secondary",
-              size: "small",
-              onClick: () => insertMarkdown("*", "*"),
-              title: "Italic",
-              children: /* @__PURE__ */ jsxRuntime.jsx("em", { children: "I" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Button,
-            {
-              type: "button",
-              variant: "secondary",
-              size: "small",
-              onClick: () => insertMarkdown("`", "`"),
-              title: "Inline Code",
-              children: /* @__PURE__ */ jsxRuntime.jsx(icons.CommandLine, { className: "h-4 w-4" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Button,
-            {
-              type: "button",
-              variant: "secondary",
-              size: "small",
-              onClick: () => insertMarkdown("## "),
-              title: "Heading",
-              children: "H2"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Button,
-            {
-              type: "button",
-              variant: "secondary",
-              size: "small",
-              onClick: () => insertMarkdown("### "),
-              title: "Heading",
-              children: "H3"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Button,
-            {
-              type: "button",
-              variant: "secondary",
-              size: "small",
-              onClick: () => insertMarkdown("[", "](url)"),
-              title: "Link",
-              children: "Link"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Button,
-            {
-              type: "button",
-              variant: "secondary",
-              size: "small",
-              onClick: () => insertMarkdown("![alt](", ")"),
-              title: "Image",
-              children: "Image"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Button,
-            {
-              type: "button",
-              variant: "secondary",
-              size: "small",
-              onClick: () => insertMarkdown("```\n", "\n```"),
-              title: "Code Block",
-              children: "Code"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Button,
-            {
-              type: "button",
-              variant: "secondary",
-              size: "small",
-              onClick: () => insertMarkdown("- "),
-              title: "List",
-              children: "List"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Textarea,
-          {
-            id: `markdown-${label}`,
-            value,
-            onChange: (e) => onChange(e.target.value),
-            placeholder,
-            rows,
-            className: "font-mono text-sm"
-          }
-        )
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Content, { value: "preview", className: "mt-4", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: ui.clx(
-            "min-h-[200px] rounded-lg border border-ui-border-base bg-ui-bg-subtle p-4",
-            "prose prose-sm max-w-none"
-          ),
-          dangerouslySetInnerHTML: {
-            __html: value ? renderMarkdownPreview(value) : '<p class="text-ui-fg-subtle">Nothing to preview</p>'
-          }
-        }
-      ) })
-    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2 border-b pb-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
-          {
-            type: "button",
-            variant: "secondary",
-            size: "small",
-            onClick: () => insertMarkdown("**", "**"),
-            title: "Bold",
-            children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "B" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
-          {
-            type: "button",
-            variant: "secondary",
-            size: "small",
-            onClick: () => insertMarkdown("*", "*"),
-            title: "Italic",
-            children: /* @__PURE__ */ jsxRuntime.jsx("em", { children: "I" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
-          {
-            type: "button",
-            variant: "secondary",
-            size: "small",
-            onClick: () => insertMarkdown("`", "`"),
-            title: "Inline Code",
-            children: /* @__PURE__ */ jsxRuntime.jsx(icons.CommandLine, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
-          {
-            type: "button",
-            variant: "secondary",
-            size: "small",
-            onClick: () => insertMarkdown("```\n", "\n```"),
-            title: "Code Block",
-            children: "Code"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Textarea,
-        {
-          id: `markdown-${label}`,
-          value,
-          onChange: (e) => onChange(e.target.value),
-          placeholder,
-          rows,
-          className: "font-mono text-sm"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-ui-fg-subtle", children: "Supports Markdown formatting: **bold**, *italic*, `code`, ```code blocks```, [links](url), ![images](url), and lists" })
-  ] });
-};
-const CampaignImageUploader = ({
-  campaignId,
-  imageType,
-  currentImageUrl,
-  onClose,
-  onSuccess
-}) => {
-  const [displayImage, setDisplayImage] = react.useState(currentImageUrl || null);
-  const [isUploading, setIsUploading] = react.useState(false);
-  const [isDragging, setIsDragging] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  const [previewUrl, setPreviewUrl] = react.useState(null);
-  const isThumbnail = imageType === "thumbnail";
-  const maxSize = 5;
-  const allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"];
-  const formatFileTypes = () => {
-    return "JPEG, PNG, GIF, or WebP";
-  };
-  const validateFile = (file) => {
-    if (!allowedTypes.includes(file.type)) {
-      setError(`Please upload a valid image file (${formatFileTypes()})`);
-      return false;
-    }
-    if (file.size > maxSize * 1024 * 1024) {
-      setError(`File size must be less than ${maxSize}MB`);
-      return false;
-    }
-    return true;
-  };
-  const handleFileUpload = async (file) => {
-    var _a, _b;
-    if (!validateFile(file)) return;
-    setError(null);
-    const reader = new FileReader();
-    reader.onloadend = () => {
-      setPreviewUrl(reader.result);
-    };
-    reader.readAsDataURL(file);
-    setIsUploading(true);
-    const formData = new FormData();
-    formData.append("file", file);
-    try {
-      const response = await fetch(
-        `/admin/campaigns/${campaignId}/${imageType}`,
-        {
-          method: "POST",
-          body: formData,
-          credentials: "include"
-        }
-      );
-      if (response.ok) {
-        const result = await response.json();
-        const newImageUrl = imageType === "image" ? (_a = result.campaign_detail) == null ? void 0 : _a.image_url : (_b = result.campaign_detail) == null ? void 0 : _b.thumbnail_url;
-        setDisplayImage(newImageUrl);
-        setPreviewUrl(null);
-        onSuccess == null ? void 0 : onSuccess();
-        setTimeout(() => {
-          onClose();
-        }, 1e3);
-      } else {
-        const errorData = await response.json();
-        setError(errorData.error || `Failed to upload ${imageType}`);
-        setPreviewUrl(null);
-      }
-    } catch (err) {
-      setError(`Error uploading ${imageType}`);
-      setPreviewUrl(null);
-      console.error(`Error uploading ${imageType}:`, err);
-    } finally {
-      setIsUploading(false);
-    }
-  };
-  const handleDelete = async () => {
-    if (!confirm(`Are you sure you want to delete the ${imageType}?`)) return;
-    setIsUploading(true);
-    setError(null);
-    try {
-      const response = await fetch(
-        `/admin/campaigns/${campaignId}/${imageType}`,
-        {
-          method: "DELETE",
-          credentials: "include"
-        }
-      );
-      if (response.ok) {
-        setDisplayImage(null);
-        setPreviewUrl(null);
-        onSuccess == null ? void 0 : onSuccess();
-        setTimeout(() => {
-          onClose();
-        }, 500);
-      } else {
-        const errorData = await response.json();
-        setError(errorData.error || `Failed to delete ${imageType}`);
-      }
-    } catch (err) {
-      setError(`Error deleting ${imageType}`);
-      console.error(`Error deleting ${imageType}:`, err);
-    } finally {
-      setIsUploading(false);
-    }
-  };
-  const handleDragEnter = react.useCallback((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragging(true);
-  }, []);
-  const handleDragLeave = react.useCallback((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragging(false);
-  }, []);
-  const handleDragOver = react.useCallback((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-  }, []);
-  const handleDrop = react.useCallback((e) => {
-    var _a;
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragging(false);
-    const file = (_a = e.dataTransfer.files) == null ? void 0 : _a[0];
-    if (file) {
-      handleFileUpload(file);
-    }
-  }, []);
-  const imageToDisplay = previewUrl || displayImage;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-2xl rounded-lg bg-ui-bg-base p-6", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Heading, { level: "h2", children: [
-          "Upload Campaign ",
-          isThumbnail ? "Thumbnail" : "Image"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-subtle", children: isThumbnail ? "Thumbnail for campaign listing" : "Main campaign image" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(icons.X, {}) })
-    ] }),
-    error && /* @__PURE__ */ jsxRuntime.jsx(ui.Alert, { variant: "error", dismissible: true, className: "mb-4", children: error }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-      imageToDisplay ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-hidden rounded-lg border border-ui-border-base bg-ui-bg-subtle", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: imageToDisplay,
-              alt: `Campaign ${imageType}`,
-              className: ui.clx(
-                "w-full object-contain",
-                isThumbnail ? "h-32" : "h-64"
-              )
-            }
-          ),
-          isUploading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-white", children: "Uploading..." }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            ui.Button,
-            {
-              variant: "secondary",
-              disabled: isUploading,
-              onClick: () => {
-                var _a;
-                return (_a = document.getElementById(`${imageType}-file-input`)) == null ? void 0 : _a.click();
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(icons.CloudArrowUp, { className: "mr-2" }),
-                "Replace"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            ui.Button,
-            {
-              variant: "danger",
-              disabled: isUploading,
-              onClick: handleDelete,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "mr-2" }),
-                "Delete"
-              ]
-            }
-          )
-        ] })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: ui.clx(
-            "flex flex-col items-center justify-center rounded-lg border-2 border-dashed transition-colors",
-            isThumbnail ? "h-48" : "h-64",
-            isDragging ? "border-ui-border-interactive bg-ui-bg-highlight" : "border-ui-border-base bg-ui-bg-subtle",
-            !isUploading && "cursor-pointer"
-          ),
-          onDragEnter: handleDragEnter,
-          onDragLeave: handleDragLeave,
-          onDragOver: handleDragOver,
-          onDrop: handleDrop,
-          onClick: () => {
-            var _a;
-            return !isUploading && ((_a = document.getElementById(`${imageType}-file-input`)) == null ? void 0 : _a.click());
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(icons.PhotoSolid, { className: "mb-4 h-12 w-12 text-ui-fg-subtle" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mb-2 text-lg font-medium", children: isDragging ? `Drop ${imageType} here` : `Upload ${isThumbnail ? "Thumbnail" : "Image"}` }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mb-4 text-center text-ui-fg-subtle", children: "Drag and drop an image here, or click to select" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-sm text-ui-fg-subtle", children: [
-              formatFileTypes(),
-              " • Max ",
-              maxSize,
-              "MB"
-            ] }),
-            isThumbnail && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mt-2 text-xs text-ui-fg-subtle", children: "Recommended: 16:9 aspect ratio, minimum 400x225px" }),
-            !isThumbnail && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mt-2 text-xs text-ui-fg-subtle", children: "Recommended: High resolution, minimum 1200x600px" }),
-            isUploading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "Uploading..." }) })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          id: `${imageType}-file-input`,
-          type: "file",
-          accept: allowedTypes.join(","),
-          onChange: (e) => {
-            var _a;
-            const file = (_a = e.target.files) == null ? void 0 : _a[0];
-            if (file) handleFileUpload(file);
-            e.target.value = "";
-          },
-          className: "hidden"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 flex items-center justify-between border-t pt-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-sm text-ui-fg-subtle", children: isThumbnail ? "Thumbnail will be displayed in campaign listings" : "Main image for the campaign detail page" }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", onClick: onClose, children: "Close" })
-    ] })
-  ] }) });
-};
-const CampaignDetailForm = ({
-  campaignId,
-  campaignName
-}) => {
-  const [campaignDetail, setCampaignDetail] = react.useState(
-    null
-  );
-  const [isLoading, setIsLoading] = react.useState(true);
-  const [isSaving, setIsSaving] = react.useState(false);
-  const [showImageUploader, setShowImageUploader] = react.useState(null);
-  const [formData, setFormData] = react.useState({
-    detail_content: "",
-    terms_and_conditions: "",
-    meta_title: "",
-    meta_description: "",
-    meta_keywords: "",
-    link_url: "",
-    link_text: "",
-    display_order: 0
-  });
-  react.useEffect(() => {
-    fetchCampaignDetail();
-  }, [campaignId]);
-  const fetchCampaignDetail = async () => {
-    setIsLoading(true);
-    try {
-      const response = await fetch(`/admin/campaigns/${campaignId}/detail`, {
-        credentials: "include"
-      });
-      if (response.ok) {
-        const data = await response.json();
-        if (data.campaign_detail) {
-          console.log("Campaign detail loaded:", {
-            image_url: data.campaign_detail.image_url,
-            thumbnail_url: data.campaign_detail.thumbnail_url,
-            decoded_image: data.campaign_detail.image_url ? decodeURIComponent(data.campaign_detail.image_url) : null,
-            decoded_thumbnail: data.campaign_detail.thumbnail_url ? decodeURIComponent(data.campaign_detail.thumbnail_url) : null
-          });
-          setCampaignDetail(data.campaign_detail);
-          setFormData({
-            detail_content: data.campaign_detail.detail_content || "",
-            terms_and_conditions: data.campaign_detail.terms_and_conditions || "",
-            meta_title: data.campaign_detail.meta_title || "",
-            meta_description: data.campaign_detail.meta_description || "",
-            meta_keywords: data.campaign_detail.meta_keywords || "",
-            link_url: data.campaign_detail.link_url || "",
-            link_text: data.campaign_detail.link_text || "",
-            display_order: data.campaign_detail.display_order || 0
-          });
-        }
-      } else if (response.status !== 404) {
-        console.error("Failed to fetch campaign detail");
-      }
-    } catch (error) {
-      console.error("Error fetching campaign detail:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-  const handleSave = async () => {
-    setIsSaving(true);
-    try {
-      const response = await fetch(`/admin/campaigns/${campaignId}/detail`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify(formData),
-        credentials: "include"
-      });
-      if (response.ok) {
-        const data = await response.json();
-        setCampaignDetail(data.campaign_detail);
-        ui.toast.success("Campaign details saved successfully");
-      } else {
-        const errorData = await response.json();
-        ui.toast.error(errorData.error || "Failed to save campaign details");
+  const onFormError = () => {
+    const errorMessages = Object.entries(errors).map(([key, value]) => {
+      var _a2;
+      if (key === "products" && Array.isArray(value)) {
+        return value.map(
+          (item, index) => item ? `Product ${index + 1}: ${Object.values(item).join(", ")}` : ""
+        ).filter(Boolean).join(", ");
       }
-    } catch (error) {
-      console.error("Error saving campaign detail:", error);
-      ui.toast.error("Error saving campaign details");
-    } finally {
-      setIsSaving(false);
-    }
+      return (value == null ? void 0 : value.message) || ((_a2 = value == null ? void 0 : value.root) == null ? void 0 : _a2.message);
+    }).filter(Boolean).join(", ");
+    ui.toast.error("Invalid data", {
+      description: errorMessages
+    });
   };
-  if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-8 text-center", children: "Loading campaign details..." }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "space-y-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Campaign Details" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-ui-fg-subtle", children: campaignName })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: handleSave, isLoading: isSaving, children: "Save Details" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", children: "Images" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Main Campaign Image" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: ui.clx(
-                  "relative flex h-64 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed",
-                  (campaignDetail == null ? void 0 : campaignDetail.image_url) ? "border-ui-border-base" : "border-ui-border-base bg-ui-bg-subtle"
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold", children: "Flash sale campaign" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "transparent", onClick: onCancel, children: "Cancel" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "form",
+      {
+        onSubmit: handleSubmit(onFormSubmit, onFormError),
+        className: "space-y-4 my-8",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Name" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...register("name"), disabled }),
+            errors.name && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-500 text-sm mt-1", children: errors.name.message })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Description" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Textarea, { ...register("description"), disabled }),
+            errors.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-500 text-sm mt-1", children: errors.description.message })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Start Date" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Input,
+                  {
+                    type: "date",
+                    value: startsAt ? dayjs__default.default(startsAt).format("YYYY-MM-DD") : "",
+                    onChange: (e) => handleDateTimeChange("starts_at", "date", e.target.value),
+                    disabled,
+                    className: "flex-1"
+                  }
                 ),
-                children: (campaignDetail == null ? void 0 : campaignDetail.image_url) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "img",
-                    {
-                      src: campaignDetail.image_url,
-                      alt: "Campaign",
-                      className: "h-full w-full object-cover",
-                      onError: (e) => {
-                        console.error(
-                          "Failed to load image:",
-                          campaignDetail.image_url
-                        );
-                        e.currentTarget.style.display = "none";
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    ui.Button,
-                    {
-                      variant: "secondary",
-                      size: "small",
-                      className: "absolute bottom-2 right-2",
-                      onClick: () => setShowImageUploader("image"),
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(icons.PencilSquare, { className: "mr-1" }),
-                        "Change"
-                      ]
-                    }
-                  )
-                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
-                  ui.Button,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Input,
                   {
-                    variant: "secondary",
-                    onClick: () => setShowImageUploader("image"),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(icons.PhotoSolid, { className: "mr-2" }),
-                      "Upload Image"
-                    ]
+                    type: "time",
+                    value: startsAt ? dayjs__default.default(startsAt).format("HH:mm") : "",
+                    onChange: (e) => handleDateTimeChange("starts_at", "time", e.target.value),
+                    disabled,
+                    className: "w-32"
                   }
                 )
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Thumbnail" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: ui.clx(
-                  "relative flex h-64 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed",
-                  (campaignDetail == null ? void 0 : campaignDetail.thumbnail_url) ? "border-ui-border-base" : "border-ui-border-base bg-ui-bg-subtle"
+              ] }),
+              errors.starts_at && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-500 text-sm mt-1", children: errors.starts_at.message })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "End Date" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Input,
+                  {
+                    type: "date",
+                    value: endsAt ? dayjs__default.default(endsAt).format("YYYY-MM-DD") : "",
+                    onChange: (e) => handleDateTimeChange("ends_at", "date", e.target.value),
+                    disabled,
+                    className: "flex-1"
+                  }
                 ),
-                children: (campaignDetail == null ? void 0 : campaignDetail.thumbnail_url) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "img",
-                    {
-                      src: campaignDetail.thumbnail_url,
-                      alt: "Thumbnail",
-                      className: "h-full w-full object-cover",
-                      onError: (e) => {
-                        console.error(
-                          "Failed to load thumbnail:",
-                          campaignDetail.thumbnail_url
-                        );
-                        e.currentTarget.style.display = "none";
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    ui.Button,
-                    {
-                      variant: "secondary",
-                      size: "small",
-                      className: "absolute bottom-2 right-2",
-                      onClick: () => setShowImageUploader("thumbnail"),
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(icons.PencilSquare, { className: "mr-1" }),
-                        "Change"
-                      ]
-                    }
-                  )
-                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
-                  ui.Button,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Input,
                   {
-                    variant: "secondary",
-                    onClick: () => setShowImageUploader("thumbnail"),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(icons.PhotoSolid, { className: "mr-2" }),
-                      "Upload Thumbnail"
-                    ]
+                    type: "time",
+                    value: endsAt ? dayjs__default.default(endsAt).format("HH:mm") : "",
+                    onChange: (e) => handleDateTimeChange("ends_at", "time", e.target.value),
+                    disabled,
+                    className: "w-32"
                   }
                 )
-              }
-            )
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsx(
-        MarkdownEditor,
-        {
-          label: "Campaign Detail Content",
-          value: formData.detail_content,
-          onChange: (value) => setFormData({ ...formData, detail_content: value }),
-          placeholder: "Enter campaign details in Markdown format. You can include images, links, code blocks, and more...",
-          helpText: "Supports Markdown and code syntax",
-          rows: 12,
-          showPreview: true
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsx(
-        MarkdownEditor,
-        {
-          label: "Terms and Conditions",
-          value: formData.terms_and_conditions,
-          onChange: (value) => setFormData({ ...formData, terms_and_conditions: value }),
-          placeholder: "Enter terms and conditions for this campaign...",
-          helpText: "Optional - Campaign specific terms",
-          rows: 8,
-          showPreview: true
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", children: "Call to Action Link" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "link-url", children: "Link URL" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Input,
-              {
-                id: "link-url",
-                type: "url",
-                value: formData.link_url,
-                onChange: (e) => setFormData({ ...formData, link_url: e.target.value }),
-                placeholder: "https://example.com/campaign"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "link-text", children: "Link Text" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Input,
-              {
-                id: "link-text",
-                value: formData.link_text,
-                onChange: (e) => setFormData({ ...formData, link_text: e.target.value }),
-                placeholder: "Shop Now"
-              }
-            )
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", children: "SEO & Metadata" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "meta-title", children: "Meta Title" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Input,
-              {
-                id: "meta-title",
-                value: formData.meta_title,
-                onChange: (e) => setFormData({ ...formData, meta_title: e.target.value }),
-                placeholder: "Campaign meta title for SEO"
-              }
-            )
+              ] }),
+              errors.ends_at && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-500 text-sm mt-1", children: errors.ends_at.message })
+            ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "meta-description", children: "Meta Description" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Products" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Input,
+              ui.Button,
               {
-                id: "meta-description",
-                value: formData.meta_description,
-                onChange: (e) => setFormData({
-                  ...formData,
-                  meta_description: e.target.value
-                }),
-                placeholder: "Campaign meta description for SEO"
+                type: "button",
+                variant: "secondary",
+                onClick: () => setOpenProductModal(true),
+                disabled,
+                children: "Add Product"
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "meta-keywords", children: "Meta Keywords" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Input,
-              {
-                id: "meta-keywords",
-                value: formData.meta_keywords,
-                onChange: (e) => setFormData({
-                  ...formData,
-                  meta_keywords: e.target.value
-                }),
-                placeholder: "keyword1, keyword2, keyword3"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-ui-fg-subtle", children: "Comma-separated keywords for SEO" })
+          ((_a = errors.products) == null ? void 0 : _a.root) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-500 text-sm", children: errors.products.root.message }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Table, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Product" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Discount Type" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Discount Value" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Limit" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Max Qty per Order" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Actions" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Body, { children: fields.map((field, index) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: field.product.title }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                reactHookForm.Controller,
+                {
+                  name: `products.${index}.discountType`,
+                  control,
+                  render: ({ field: field2 }) => /* @__PURE__ */ jsxRuntime.jsxs(
+                    ui.Select,
+                    {
+                      value: field2.value,
+                      onValueChange: field2.onChange,
+                      disabled,
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, { placeholder: "Select discount type" }) }),
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: "percentage", children: "Percentage" }) })
+                      ]
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                reactHookForm.Controller,
+                {
+                  name: `products.${index}.discountValue`,
+                  control,
+                  render: ({ field: field2 }) => /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.Input,
+                    {
+                      type: "number",
+                      value: field2.value,
+                      onChange: (e) => field2.onChange(Number(e.target.value)),
+                      disabled
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                reactHookForm.Controller,
+                {
+                  name: `products.${index}.limit`,
+                  control,
+                  render: ({ field: field2 }) => /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.Input,
+                    {
+                      type: "number",
+                      value: field2.value,
+                      onChange: (e) => field2.onChange(Number(e.target.value)),
+                      disabled
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                reactHookForm.Controller,
+                {
+                  name: `products.${index}.maxQty`,
+                  control,
+                  render: ({ field: field2 }) => /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.Input,
+                    {
+                      type: "number",
+                      value: field2.value,
+                      onChange: (e) => field2.onChange(Number(e.target.value)),
+                      disabled
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Button,
+                {
+                  type: "button",
+                  variant: "danger",
+                  onClick: () => remove(index),
+                  disabled,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
+                }
+              ) })
+            ] }, field.id)) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "display-order", children: "Display Order" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Input,
-              {
-                id: "display-order",
-                type: "number",
-                value: formData.display_order,
-                onChange: (e) => setFormData({
-                  ...formData,
-                  display_order: parseInt(e.target.value) || 0
-                }),
-                placeholder: "0"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-ui-fg-subtle", children: "Lower numbers appear first in listings" })
-          ] })
-        ] })
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { type: "submit", disabled, children: "Save" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.FocusModal, { open: openProductModal, onOpenChange: setOpenProductModal, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.FocusModal.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.FocusModal.Header, { title: "Add Product" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.FocusModal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        ProductSelector,
+        {
+          selectedProductIds: fields.map((f) => f.product.id),
+          onSelectProduct: (product) => {
+            append({
+              product,
+              discountType: "percentage",
+              discountValue: 10,
+              limit: 10,
+              maxQty: 1
+            });
+            setOpenProductModal(false);
+          }
+        }
+      ) })
+    ] }) })
+  ] });
+};
+const useFlashSaleById = (id) => {
+  const [data, setData] = react.useState(null);
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  const fetchFlashSale = async () => {
+    if (!id) {
+      setIsLoading(false);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await axios__default.default.get(`/admin/flash-sales/${id}`);
+      setData(response.data);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to fetch flash sale")
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  react.useEffect(() => {
+    fetchFlashSale();
+  }, [id]);
+  return {
+    data,
+    isLoading,
+    error,
+    refetch: fetchFlashSale
+  };
+};
+const MarkdownEditor = ({
+  label,
+  value,
+  onChange,
+  placeholder,
+  helpText,
+  rows = 10,
+  showPreview = true
+}) => {
+  const [activeTab, setActiveTab] = react.useState("write");
+  const insertMarkdown = (before, after = "") => {
+    const textarea = document.getElementById(
+      `markdown-${label}`
+    );
+    if (!textarea) return;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const selectedText = value.substring(start, end);
+    const newText = value.substring(0, start) + before + selectedText + after + value.substring(end);
+    onChange(newText);
+    setTimeout(() => {
+      textarea.focus();
+      textarea.setSelectionRange(
+        start + before.length,
+        start + before.length + selectedText.length
+      );
+    }, 0);
+  };
+  const renderMarkdownPreview = (markdown) => {
+    let html = markdown;
+    html = html.replace(/^### (.*$)/gim, "<h3>$1</h3>");
+    html = html.replace(/^## (.*$)/gim, "<h2>$1</h2>");
+    html = html.replace(/^# (.*$)/gim, "<h1>$1</h1>");
+    html = html.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+    html = html.replace(/__(.+?)__/g, "<strong>$1</strong>");
+    html = html.replace(/\*(.+?)\*/g, "<em>$1</em>");
+    html = html.replace(/_(.+?)_/g, "<em>$1</em>");
+    html = html.replace(
+      /```(\w+)?\n([\s\S]+?)```/g,
+      '<pre class="bg-ui-bg-subtle p-4 rounded-lg overflow-x-auto"><code class="language-$1">$2</code></pre>'
+    );
+    html = html.replace(
+      /`([^`]+)`/g,
+      '<code class="bg-ui-bg-subtle px-1 py-0.5 rounded text-sm">$1</code>'
+    );
+    html = html.replace(
+      /\[([^\]]+)\]\(([^)]+)\)/g,
+      '<a href="$2" class="text-ui-fg-interactive underline">$1</a>'
+    );
+    html = html.replace(
+      /!\[([^\]]*)\]\(([^)]+)\)/g,
+      '<img src="$2" alt="$1" class="max-w-full h-auto rounded-lg my-2" />'
+    );
+    html = html.replace(/^\* (.+)$/gim, "<li>$1</li>");
+    html = html.replace(/^\- (.+)$/gim, "<li>$1</li>");
+    html = html.replace(
+      /(<li>.*<\/li>)/s,
+      "<ul class='list-disc ml-6'>$1</ul>"
+    );
+    html = html.replace(/\n\n/g, "</p><p>");
+    html = `<p>${html}</p>`;
+    return html;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: `markdown-${label}`, className: "font-medium", children: label }),
+      helpText && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-xs text-ui-fg-subtle", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(icons.InformationCircle, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: helpText })
+      ] })
+    ] }),
+    showPreview ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs, { value: activeTab, onValueChange: (v) => setActiveTab(v), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs.List, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Trigger, { value: "write", children: "Write" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Trigger, { value: "preview", children: "Preview" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Content, { value: "write", className: "mt-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2 border-b pb-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              type: "button",
+              variant: "secondary",
+              size: "small",
+              onClick: () => insertMarkdown("**", "**"),
+              title: "Bold",
+              children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "B" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              type: "button",
+              variant: "secondary",
+              size: "small",
+              onClick: () => insertMarkdown("*", "*"),
+              title: "Italic",
+              children: /* @__PURE__ */ jsxRuntime.jsx("em", { children: "I" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              type: "button",
+              variant: "secondary",
+              size: "small",
+              onClick: () => insertMarkdown("`", "`"),
+              title: "Inline Code",
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons.CommandLine, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              type: "button",
+              variant: "secondary",
+              size: "small",
+              onClick: () => insertMarkdown("## "),
+              title: "Heading",
+              children: "H2"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              type: "button",
+              variant: "secondary",
+              size: "small",
+              onClick: () => insertMarkdown("### "),
+              title: "Heading",
+              children: "H3"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              type: "button",
+              variant: "secondary",
+              size: "small",
+              onClick: () => insertMarkdown("[", "](url)"),
+              title: "Link",
+              children: "Link"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              type: "button",
+              variant: "secondary",
+              size: "small",
+              onClick: () => insertMarkdown("![alt](", ")"),
+              title: "Image",
+              children: "Image"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              type: "button",
+              variant: "secondary",
+              size: "small",
+              onClick: () => insertMarkdown("```\n", "\n```"),
+              title: "Code Block",
+              children: "Code"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              type: "button",
+              variant: "secondary",
+              size: "small",
+              onClick: () => insertMarkdown("- "),
+              title: "List",
+              children: "List"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Textarea,
+          {
+            id: `markdown-${label}`,
+            value,
+            onChange: (e) => onChange(e.target.value),
+            placeholder,
+            rows,
+            className: "font-mono text-sm"
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Content, { value: "preview", className: "mt-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: ui.clx(
+            "min-h-[200px] rounded-lg border border-ui-border-base bg-ui-bg-subtle p-4",
+            "prose prose-sm max-w-none"
+          ),
+          dangerouslySetInnerHTML: {
+            __html: value ? renderMarkdownPreview(value) : '<p class="text-ui-fg-subtle">Nothing to preview</p>'
+          }
+        }
+      ) })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2 border-b pb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            type: "button",
+            variant: "secondary",
+            size: "small",
+            onClick: () => insertMarkdown("**", "**"),
+            title: "Bold",
+            children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "B" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            type: "button",
+            variant: "secondary",
+            size: "small",
+            onClick: () => insertMarkdown("*", "*"),
+            title: "Italic",
+            children: /* @__PURE__ */ jsxRuntime.jsx("em", { children: "I" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            type: "button",
+            variant: "secondary",
+            size: "small",
+            onClick: () => insertMarkdown("`", "`"),
+            title: "Inline Code",
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.CommandLine, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            type: "button",
+            variant: "secondary",
+            size: "small",
+            onClick: () => insertMarkdown("```\n", "\n```"),
+            title: "Code Block",
+            children: "Code"
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end border-t pt-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: handleSave, isLoading: isSaving, children: "Save Campaign Details" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Textarea,
+        {
+          id: `markdown-${label}`,
+          value,
+          onChange: (e) => onChange(e.target.value),
+          placeholder,
+          rows,
+          className: "font-mono text-sm"
+        }
+      )
     ] }),
-    showImageUploader && /* @__PURE__ */ jsxRuntime.jsx(
-      CampaignImageUploader,
-      {
-        campaignId,
-        imageType: showImageUploader,
-        currentImageUrl: showImageUploader === "image" ? campaignDetail == null ? void 0 : campaignDetail.image_url : campaignDetail == null ? void 0 : campaignDetail.thumbnail_url,
-        onClose: () => setShowImageUploader(null),
-        onSuccess: fetchCampaignDetail
-      }
-    )
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-ui-fg-subtle", children: "Supports Markdown formatting: **bold**, *italic*, `code`, ```code blocks```, [links](url), ![images](url), and lists" })
   ] });
 };
-const CouponDetail = () => {
-  var _a, _b, _c, _d, _e, _f, _g;
-  const { id } = reactRouterDom.useParams();
-  const navigate = reactRouterDom.useNavigate();
-  const [isEditing, setIsEditing] = react.useState(false);
-  const { data, isLoading, refetch } = useCouponById(id ?? "");
-  if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin h-10 w-10 border-4 border-primary rounded-full border-t-transparent" }) });
-  }
-  if (!(data == null ? void 0 : data.campaign)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Coupon not found" }) });
-  }
-  const campaign = data.campaign;
-  const promotion = (_a = campaign.promotions) == null ? void 0 : _a[0];
-  const initialValues = {
-    name: campaign.name ?? "",
-    description: campaign.description ?? "",
-    type: "coupon",
-    code: (promotion == null ? void 0 : promotion.code) ?? "",
-    discount_type: ((_b = promotion == null ? void 0 : promotion.application_method) == null ? void 0 : _b.type) ?? "percentage",
-    discount_value: Number(((_c = promotion == null ? void 0 : promotion.application_method) == null ? void 0 : _c.value) ?? 0),
-    currency_code: ((_d = promotion == null ? void 0 : promotion.application_method) == null ? void 0 : _d.currency_code) ?? void 0,
-    starts_at: campaign.starts_at ? dayjs__default.default(campaign.starts_at).format("YYYY-MM-DDTHH:mm") : void 0,
-    ends_at: campaign.ends_at ? dayjs__default.default(campaign.ends_at).format("YYYY-MM-DDTHH:mm") : void 0,
-    allocation: ((_e = promotion == null ? void 0 : promotion.application_method) == null ? void 0 : _e.allocation) === "total" ? "across" : ((_f = promotion == null ? void 0 : promotion.application_method) == null ? void 0 : _f.allocation) ?? "across",
-    target_type: ((_g = promotion == null ? void 0 : promotion.application_method) == null ? void 0 : _g.target_type) ?? "order"
+const CampaignImageUploader = ({
+  campaignId,
+  imageType,
+  currentImageUrl,
+  onClose,
+  onSuccess
+}) => {
+  const [displayImage, setDisplayImage] = react.useState(currentImageUrl || null);
+  const [isUploading, setIsUploading] = react.useState(false);
+  const [isDragging, setIsDragging] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [previewUrl, setPreviewUrl] = react.useState(null);
+  const isThumbnail = imageType === "thumbnail";
+  const maxSize = 5;
+  const allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"];
+  const formatFileTypes = () => {
+    return "JPEG, PNG, GIF, or WebP";
   };
-  const handleSubmit = async (formData) => {
-    var _a2, _b2;
-    if (!id) {
-      return;
+  const validateFile = (file) => {
+    if (!allowedTypes.includes(file.type)) {
+      setError(`Please upload a valid image file (${formatFileTypes()})`);
+      return false;
+    }
+    if (file.size > maxSize * 1024 * 1024) {
+      setError(`File size must be less than ${maxSize}MB`);
+      return false;
     }
+    return true;
+  };
+  const handleFileUpload = async (file) => {
+    var _a, _b;
+    if (!validateFile(file)) return;
+    setError(null);
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setPreviewUrl(reader.result);
+    };
+    reader.readAsDataURL(file);
+    setIsUploading(true);
+    const formData = new FormData();
+    formData.append("file", file);
     try {
-      await axios__default.default.put(`/admin/coupons/${id}`, {
-        ...formData,
-        starts_at: new Date(formData.starts_at).toUTCString(),
-        ends_at: new Date(formData.ends_at).toUTCString(),
-        currency_code: formData.discount_type === "fixed" ? formData.currency_code : void 0
-      });
-      ui.toast.success("Coupon updated successfully");
-      setIsEditing(false);
-      refetch();
-    } catch (error) {
-      let message = "Failed to update coupon";
-      if (axios__default.default.isAxiosError(error)) {
-        message = ((_b2 = (_a2 = error.response) == null ? void 0 : _a2.data) == null ? void 0 : _b2.message) ?? message;
-      } else if (error instanceof Error) {
-        message = error.message;
+      const response = await fetch(
+        `/admin/campaigns/${campaignId}/${imageType}`,
+        {
+          method: "POST",
+          body: formData,
+          credentials: "include"
+        }
+      );
+      if (response.ok) {
+        const result = await response.json();
+        const newImageUrl = imageType === "image" ? (_a = result.campaign_detail) == null ? void 0 : _a.image_url : (_b = result.campaign_detail) == null ? void 0 : _b.thumbnail_url;
+        setDisplayImage(newImageUrl);
+        setPreviewUrl(null);
+        onSuccess == null ? void 0 : onSuccess();
+        setTimeout(() => {
+          onClose();
+        }, 1e3);
+      } else {
+        const errorData = await response.json();
+        setError(errorData.error || `Failed to upload ${imageType}`);
+        setPreviewUrl(null);
       }
-      ui.toast.error("Failed to update coupon", {
-        description: message
-      });
+    } catch (err) {
+      setError(`Error uploading ${imageType}`);
+      setPreviewUrl(null);
+      console.error(`Error uploading ${imageType}:`, err);
+    } finally {
+      setIsUploading(false);
+    }
+  };
+  const handleDelete = async () => {
+    if (!confirm(`Are you sure you want to delete the ${imageType}?`)) return;
+    setIsUploading(true);
+    setError(null);
+    try {
+      const response = await fetch(
+        `/admin/campaigns/${campaignId}/${imageType}`,
+        {
+          method: "DELETE",
+          credentials: "include"
+        }
+      );
+      if (response.ok) {
+        setDisplayImage(null);
+        setPreviewUrl(null);
+        onSuccess == null ? void 0 : onSuccess();
+        setTimeout(() => {
+          onClose();
+        }, 500);
+      } else {
+        const errorData = await response.json();
+        setError(errorData.error || `Failed to delete ${imageType}`);
+      }
+    } catch (err) {
+      setError(`Error deleting ${imageType}`);
+      console.error(`Error deleting ${imageType}:`, err);
+    } finally {
+      setIsUploading(false);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { children: [
+  const handleDragEnter = react.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  }, []);
+  const handleDragLeave = react.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  }, []);
+  const handleDragOver = react.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  const handleDrop = react.useCallback((e) => {
+    var _a;
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    const file = (_a = e.dataTransfer.files) == null ? void 0 : _a[0];
+    if (file) {
+      handleFileUpload(file);
+    }
+  }, []);
+  const imageToDisplay = previewUrl || displayImage;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-2xl rounded-lg bg-ui-bg-base p-6", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 flex items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-semibold mb-1", children: campaign.name }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-fg-subtle", children: "Manage coupon configuration and content" })
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Heading, { level: "h2", children: [
+          "Upload Campaign ",
+          isThumbnail ? "Thumbnail" : "Image"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-subtle", children: isThumbnail ? "Thumbnail for campaign listing" : "Main campaign image" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", onClick: () => navigate("/coupons"), children: "Back to Coupons" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: () => setIsEditing((prev) => !prev), children: isEditing ? "View Mode" : "Edit Mode" })
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(icons.X, {}) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs, { defaultValue: "settings", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs.List, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Trigger, { value: "settings", children: "Coupon Settings" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Trigger, { value: "details", children: "Coupon Details" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Content, { value: "settings", className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsx(
-        CouponForm,
+    error && /* @__PURE__ */ jsxRuntime.jsx(ui.Alert, { variant: "error", dismissible: true, className: "mb-4", children: error }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+      imageToDisplay ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-hidden rounded-lg border border-ui-border-base bg-ui-bg-subtle", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: imageToDisplay,
+              alt: `Campaign ${imageType}`,
+              className: ui.clx(
+                "w-full object-contain",
+                isThumbnail ? "h-32" : "h-64"
+              )
+            }
+          ),
+          isUploading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-white", children: "Uploading..." }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Button,
+            {
+              variant: "secondary",
+              disabled: isUploading,
+              onClick: () => {
+                var _a;
+                return (_a = document.getElementById(`${imageType}-file-input`)) == null ? void 0 : _a.click();
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(icons.CloudArrowUp, { className: "mr-2" }),
+                "Replace"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Button,
+            {
+              variant: "danger",
+              disabled: isUploading,
+              onClick: handleDelete,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "mr-2" }),
+                "Delete"
+              ]
+            }
+          )
+        ] })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
         {
-          initialData: initialValues,
-          onSubmit: handleSubmit,
-          onCancel: () => navigate("/coupons"),
-          disabled: !isEditing
+          className: ui.clx(
+            "flex flex-col items-center justify-center rounded-lg border-2 border-dashed transition-colors",
+            isThumbnail ? "h-48" : "h-64",
+            isDragging ? "border-ui-border-interactive bg-ui-bg-highlight" : "border-ui-border-base bg-ui-bg-subtle",
+            !isUploading && "cursor-pointer"
+          ),
+          onDragEnter: handleDragEnter,
+          onDragLeave: handleDragLeave,
+          onDragOver: handleDragOver,
+          onDrop: handleDrop,
+          onClick: () => {
+            var _a;
+            return !isUploading && ((_a = document.getElementById(`${imageType}-file-input`)) == null ? void 0 : _a.click());
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(icons.PhotoSolid, { className: "mb-4 h-12 w-12 text-ui-fg-subtle" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mb-2 text-lg font-medium", children: isDragging ? `Drop ${imageType} here` : `Upload ${isThumbnail ? "Thumbnail" : "Image"}` }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mb-4 text-center text-ui-fg-subtle", children: "Drag and drop an image here, or click to select" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-sm text-ui-fg-subtle", children: [
+              formatFileTypes(),
+              " • Max ",
+              maxSize,
+              "MB"
+            ] }),
+            isThumbnail && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mt-2 text-xs text-ui-fg-subtle", children: "Recommended: 16:9 aspect ratio, minimum 400x225px" }),
+            !isThumbnail && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mt-2 text-xs text-ui-fg-subtle", children: "Recommended: High resolution, minimum 1200x600px" }),
+            isUploading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "Uploading..." }) })
+          ]
         }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Content, { value: "details", className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsx(
-        CampaignDetailForm,
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
         {
-          campaignId: campaign.id,
-          campaignName: campaign.name ?? ""
-        }
-      ) })
-    ] })
-  ] });
-};
-const config$1 = adminSdk.defineRouteConfig({
-  label: "Coupon Detail",
-  icon: icons.Tag
-});
-const CouponCreate = () => {
-  const navigate = reactRouterDom.useNavigate();
-  const handleSubmit = async (formData) => {
-    var _a, _b;
-    try {
-      await axios__default.default.post("/admin/coupons", {
-        ...formData,
-        starts_at: new Date(formData.starts_at).toUTCString(),
-        ends_at: new Date(formData.ends_at).toUTCString(),
-        currency_code: formData.discount_type === "fixed" ? formData.currency_code : void 0
-      });
-      ui.toast.success("Coupon created successfully");
-      navigate("/coupons");
-    } catch (error) {
-      let message = "Failed to create coupon";
-      if (axios__default.default.isAxiosError(error)) {
-        message = ((_b = (_a = error.response) == null ? void 0 : _a.data) == null ? void 0 : _b.message) ?? message;
-      } else if (error instanceof Error) {
-        message = error.message;
-      }
-      ui.toast.error("Failed to create coupon", {
-        description: message
-      });
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    CouponForm,
-    {
-      onSubmit: handleSubmit,
-      onCancel: () => navigate("/coupons")
-    }
-  );
-};
-const sdk = new Medusa__default.default({
-  baseUrl: "/",
-  debug: false,
-  auth: {
-    type: "session"
-  }
-});
-const columnHelper = ui.createDataTableColumnHelper();
-const columns = [
-  columnHelper.accessor("title", {
-    header: "Title",
-    cell: (info) => /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "large", className: "py-2", children: info.getValue() })
-  }),
-  columnHelper.accessor("description", {
-    header: "Description",
-    cell: (info) => /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "large", className: "py-2", children: info.getValue() })
-  })
-];
-const ProductSelector = ({
-  selectedProductIds,
-  onSelectProduct
-}) => {
-  const [search, setSearch] = react.useState("");
-  const debouncedSearchHandler = lodash.debounce((value) => {
-    setSearch(value);
-  }, 500);
-  const [products, setProducts] = react.useState(null);
-  const [isLoading, setIsLoading] = react.useState(true);
-  react.useEffect(() => {
-    const fetchProducts = async () => {
-      setIsLoading(true);
-      try {
-        const result = await sdk.admin.product.list({
-          q: search,
-          limit: 100
-        });
-        setProducts(result);
-      } catch (error) {
-        console.error("Failed to fetch products:", error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchProducts();
-  }, [selectedProductIds, search]);
-  const selectableProducts = react.useMemo(() => {
-    var _a;
-    return (_a = products == null ? void 0 : products.products) == null ? void 0 : _a.filter(
-      (product) => !selectedProductIds.includes(product.id)
-    );
-  }, [products == null ? void 0 : products.products, selectedProductIds]);
-  const table = ui.useDataTable({
-    data: selectableProducts || [],
-    columns,
-    getRowId: (product) => product.id,
-    onRowClick: (_, row) => {
-      onSelectProduct == null ? void 0 : onSelectProduct(row.original);
-    }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Input,
-      {
-        className: "text-lg py-2",
-        placeholder: "Search products...",
-        onChange: (e) => debouncedSearchHandler(e.target.value)
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.DataTable, { instance: table, children: /* @__PURE__ */ jsxRuntime.jsx(ui.DataTable.Table, {}) })
-  ] });
+          id: `${imageType}-file-input`,
+          type: "file",
+          accept: allowedTypes.join(","),
+          onChange: (e) => {
+            var _a;
+            const file = (_a = e.target.files) == null ? void 0 : _a[0];
+            if (file) handleFileUpload(file);
+            e.target.value = "";
+          },
+          className: "hidden"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 flex items-center justify-between border-t pt-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-sm text-ui-fg-subtle", children: isThumbnail ? "Thumbnail will be displayed in campaign listings" : "Main image for the campaign detail page" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", onClick: onClose, children: "Close" })
+    ] })
+  ] }) });
 };
-const customCampaignSchema = z__default.default.object({
-  name: z__default.default.string().min(1, "Name is required"),
-  description: z__default.default.string().min(1, "Description is required"),
-  type: z__default.default.literal("flash-sale"),
-  starts_at: z__default.default.string().min(1, "Start date is required"),
-  ends_at: z__default.default.string().min(1, "End date is required")
-});
-const campaignProductSchema = z__default.default.object({
-  product: z__default.default.object({
-    id: z__default.default.string(),
-    title: z__default.default.string()
-  }),
-  discountType: z__default.default.enum([
-    "percentage"
-    // , "fixed"
-  ]),
-  discountValue: z__default.default.number().min(1),
-  limit: z__default.default.number().min(1),
-  maxQty: z__default.default.number().min(1)
-});
-const campaignDataSchema = customCampaignSchema.extend({
-  products: z__default.default.array(campaignProductSchema).min(1, "At least one product is required")
-}).refine(
-  (data) => new Date(data.starts_at) < new Date(data.ends_at),
-  "End date must be after start date"
-);
-const FlashSaleForm = ({
-  initialData,
-  initialProducts,
-  onSubmit,
-  onCancel,
-  disabled = false
+const CampaignDetailForm = ({
+  campaignId,
+  campaignName
 }) => {
-  var _a;
-  const {
-    control,
-    register,
-    handleSubmit,
-    watch,
-    setValue,
-    formState: { errors }
-  } = reactHookForm.useForm({
-    resolver: zod.zodResolver(campaignDataSchema),
-    defaultValues: {
-      name: (initialData == null ? void 0 : initialData.name) || "",
-      description: (initialData == null ? void 0 : initialData.description) || "",
-      type: "flash-sale",
-      starts_at: (initialData == null ? void 0 : initialData.starts_at) || "",
-      ends_at: (initialData == null ? void 0 : initialData.ends_at) || "",
-      products: initialProducts ? Array.from(initialProducts.values()) : []
-    }
-  });
-  const { fields, append, remove, update } = reactHookForm.useFieldArray({
-    control,
-    name: "products"
+  const [campaignDetail, setCampaignDetail] = react.useState(
+    null
+  );
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [isSaving, setIsSaving] = react.useState(false);
+  const [showImageUploader, setShowImageUploader] = react.useState(null);
+  const [formData, setFormData] = react.useState({
+    detail_content: "",
+    terms_and_conditions: "",
+    meta_title: "",
+    meta_description: "",
+    meta_keywords: "",
+    link_url: "",
+    link_text: "",
+    display_order: 0
   });
-  const [openProductModal, setOpenProductModal] = react.useState(false);
-  const startsAt = watch("starts_at");
-  const endsAt = watch("ends_at");
-  const handleDateTimeChange = (field, type, value) => {
-    const currentValue = watch(field);
-    if (type === "date") {
-      const time = currentValue ? dayjs__default.default(currentValue).format("HH:mm") : field === "starts_at" ? "00:00" : "23:59";
-      setValue(field, `${value}T${time}`);
-    } else {
-      const date = currentValue ? dayjs__default.default(currentValue).format("YYYY-MM-DD") : dayjs__default.default().format("YYYY-MM-DD");
-      setValue(field, `${date}T${value}`);
+  react.useEffect(() => {
+    fetchCampaignDetail();
+  }, [campaignId]);
+  const fetchCampaignDetail = async () => {
+    setIsLoading(true);
+    try {
+      const response = await fetch(`/admin/campaigns/${campaignId}/detail`, {
+        credentials: "include"
+      });
+      if (response.ok) {
+        const data = await response.json();
+        if (data.campaign_detail) {
+          console.log("Campaign detail loaded:", {
+            image_url: data.campaign_detail.image_url,
+            thumbnail_url: data.campaign_detail.thumbnail_url,
+            decoded_image: data.campaign_detail.image_url ? decodeURIComponent(data.campaign_detail.image_url) : null,
+            decoded_thumbnail: data.campaign_detail.thumbnail_url ? decodeURIComponent(data.campaign_detail.thumbnail_url) : null
+          });
+          setCampaignDetail(data.campaign_detail);
+          setFormData({
+            detail_content: data.campaign_detail.detail_content || "",
+            terms_and_conditions: data.campaign_detail.terms_and_conditions || "",
+            meta_title: data.campaign_detail.meta_title || "",
+            meta_description: data.campaign_detail.meta_description || "",
+            meta_keywords: data.campaign_detail.meta_keywords || "",
+            link_url: data.campaign_detail.link_url || "",
+            link_text: data.campaign_detail.link_text || "",
+            display_order: data.campaign_detail.display_order || 0
+          });
+        }
+      } else if (response.status !== 404) {
+        console.error("Failed to fetch campaign detail");
+      }
+    } catch (error) {
+      console.error("Error fetching campaign detail:", error);
+    } finally {
+      setIsLoading(false);
     }
   };
-  const onFormSubmit = (data) => {
-    onSubmit(data);
-  };
-  const onFormError = () => {
-    const errorMessages = Object.entries(errors).map(([key, value]) => {
-      var _a2;
-      if (key === "products" && Array.isArray(value)) {
-        return value.map(
-          (item, index) => item ? `Product ${index + 1}: ${Object.values(item).join(", ")}` : ""
-        ).filter(Boolean).join(", ");
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      const response = await fetch(`/admin/campaigns/${campaignId}/detail`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(formData),
+        credentials: "include"
+      });
+      if (response.ok) {
+        const data = await response.json();
+        setCampaignDetail(data.campaign_detail);
+        ui.toast.success("Campaign details saved successfully");
+      } else {
+        const errorData = await response.json();
+        ui.toast.error(errorData.error || "Failed to save campaign details");
       }
-      return (value == null ? void 0 : value.message) || ((_a2 = value == null ? void 0 : value.root) == null ? void 0 : _a2.message);
-    }).filter(Boolean).join(", ");
-    ui.toast.error("Invalid data", {
-      description: errorMessages
-    });
+    } catch (error) {
+      console.error("Error saving campaign detail:", error);
+      ui.toast.error("Error saving campaign details");
+    } finally {
+      setIsSaving(false);
+    }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold", children: "Flash sale campaign" }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "transparent", onClick: onCancel, children: "Cancel" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "form",
-      {
-        onSubmit: handleSubmit(onFormSubmit, onFormError),
-        className: "space-y-4 my-8",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Name" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...register("name"), disabled }),
-            errors.name && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-500 text-sm mt-1", children: errors.name.message })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Description" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Textarea, { ...register("description"), disabled }),
-            errors.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-500 text-sm mt-1", children: errors.description.message })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Start Date" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.Input,
-                  {
-                    type: "date",
-                    value: startsAt ? dayjs__default.default(startsAt).format("YYYY-MM-DD") : "",
-                    onChange: (e) => handleDateTimeChange("starts_at", "date", e.target.value),
-                    disabled,
-                    className: "flex-1"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.Input,
-                  {
-                    type: "time",
-                    value: startsAt ? dayjs__default.default(startsAt).format("HH:mm") : "",
-                    onChange: (e) => handleDateTimeChange("starts_at", "time", e.target.value),
-                    disabled,
-                    className: "w-32"
-                  }
-                )
-              ] }),
-              errors.starts_at && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-500 text-sm mt-1", children: errors.starts_at.message })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "End Date" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.Input,
-                  {
-                    type: "date",
-                    value: endsAt ? dayjs__default.default(endsAt).format("YYYY-MM-DD") : "",
-                    onChange: (e) => handleDateTimeChange("ends_at", "date", e.target.value),
-                    disabled,
-                    className: "flex-1"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.Input,
-                  {
-                    type: "time",
-                    value: endsAt ? dayjs__default.default(endsAt).format("HH:mm") : "",
-                    onChange: (e) => handleDateTimeChange("ends_at", "time", e.target.value),
-                    disabled,
-                    className: "w-32"
-                  }
-                )
-              ] }),
-              errors.ends_at && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-500 text-sm mt-1", children: errors.ends_at.message })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Products" }),
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-8 text-center", children: "Loading campaign details..." }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Campaign Details" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-ui-fg-subtle", children: campaignName })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: handleSave, isLoading: isSaving, children: "Save Details" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", children: "Images" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Main Campaign Image" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Button,
+              "div",
               {
-                type: "button",
-                variant: "secondary",
-                onClick: () => setOpenProductModal(true),
-                disabled,
-                children: "Add Product"
-              }
-            )
-          ] }),
-          ((_a = errors.products) == null ? void 0 : _a.root) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-500 text-sm", children: errors.products.root.message }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.Table, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Product" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Discount Type" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Discount Value" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Limit" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Max Qty per Order" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Actions" })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Body, { children: fields.map((field, index) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: field.product.title }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                reactHookForm.Controller,
-                {
-                  name: `products.${index}.discountType`,
-                  control,
-                  render: ({ field: field2 }) => /* @__PURE__ */ jsxRuntime.jsxs(
-                    ui.Select,
+                className: ui.clx(
+                  "relative flex h-64 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed",
+                  (campaignDetail == null ? void 0 : campaignDetail.image_url) ? "border-ui-border-base" : "border-ui-border-base bg-ui-bg-subtle"
+                ),
+                children: (campaignDetail == null ? void 0 : campaignDetail.image_url) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
                     {
-                      value: field2.value,
-                      onValueChange: field2.onChange,
-                      disabled,
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, { placeholder: "Select discount type" }) }),
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: "percentage", children: "Percentage" }) })
-                      ]
+                      src: campaignDetail.image_url,
+                      alt: "Campaign",
+                      className: "h-full w-full object-cover",
+                      onError: (e) => {
+                        console.error(
+                          "Failed to load image:",
+                          campaignDetail.image_url
+                        );
+                        e.currentTarget.style.display = "none";
+                      }
                     }
-                  )
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                reactHookForm.Controller,
-                {
-                  name: `products.${index}.discountValue`,
-                  control,
-                  render: ({ field: field2 }) => /* @__PURE__ */ jsxRuntime.jsx(
-                    ui.Input,
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    ui.Button,
                     {
-                      type: "number",
-                      value: field2.value,
-                      onChange: (e) => field2.onChange(Number(e.target.value)),
-                      disabled
+                      variant: "secondary",
+                      size: "small",
+                      className: "absolute bottom-2 right-2",
+                      onClick: () => setShowImageUploader("image"),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(icons.PencilSquare, { className: "mr-1" }),
+                        "Change"
+                      ]
                     }
                   )
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                reactHookForm.Controller,
-                {
-                  name: `products.${index}.limit`,
-                  control,
-                  render: ({ field: field2 }) => /* @__PURE__ */ jsxRuntime.jsx(
-                    ui.Input,
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+                  ui.Button,
+                  {
+                    variant: "secondary",
+                    onClick: () => setShowImageUploader("image"),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(icons.PhotoSolid, { className: "mr-2" }),
+                      "Upload Image"
+                    ]
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Thumbnail" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: ui.clx(
+                  "relative flex h-64 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed",
+                  (campaignDetail == null ? void 0 : campaignDetail.thumbnail_url) ? "border-ui-border-base" : "border-ui-border-base bg-ui-bg-subtle"
+                ),
+                children: (campaignDetail == null ? void 0 : campaignDetail.thumbnail_url) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
                     {
-                      type: "number",
-                      value: field2.value,
-                      onChange: (e) => field2.onChange(Number(e.target.value)),
-                      disabled
+                      src: campaignDetail.thumbnail_url,
+                      alt: "Thumbnail",
+                      className: "h-full w-full object-cover",
+                      onError: (e) => {
+                        console.error(
+                          "Failed to load thumbnail:",
+                          campaignDetail.thumbnail_url
+                        );
+                        e.currentTarget.style.display = "none";
+                      }
                     }
-                  )
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                reactHookForm.Controller,
-                {
-                  name: `products.${index}.maxQty`,
-                  control,
-                  render: ({ field: field2 }) => /* @__PURE__ */ jsxRuntime.jsx(
-                    ui.Input,
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    ui.Button,
                     {
-                      type: "number",
-                      value: field2.value,
-                      onChange: (e) => field2.onChange(Number(e.target.value)),
-                      disabled
+                      variant: "secondary",
+                      size: "small",
+                      className: "absolute bottom-2 right-2",
+                      onClick: () => setShowImageUploader("thumbnail"),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(icons.PencilSquare, { className: "mr-1" }),
+                        "Change"
+                      ]
                     }
                   )
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Button,
-                {
-                  type: "button",
-                  variant: "danger",
-                  onClick: () => remove(index),
-                  disabled,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
-                }
-              ) })
-            ] }, field.id)) })
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+                  ui.Button,
+                  {
+                    variant: "secondary",
+                    onClick: () => setShowImageUploader("thumbnail"),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(icons.PhotoSolid, { className: "mr-2" }),
+                      "Upload Thumbnail"
+                    ]
+                  }
+                )
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+        MarkdownEditor,
+        {
+          label: "Campaign Detail Content",
+          value: formData.detail_content,
+          onChange: (value) => setFormData({ ...formData, detail_content: value }),
+          placeholder: "Enter campaign details in Markdown format. You can include images, links, code blocks, and more...",
+          helpText: "Supports Markdown and code syntax",
+          rows: 12,
+          showPreview: true
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+        MarkdownEditor,
+        {
+          label: "Terms and Conditions",
+          value: formData.terms_and_conditions,
+          onChange: (value) => setFormData({ ...formData, terms_and_conditions: value }),
+          placeholder: "Enter terms and conditions for this campaign...",
+          helpText: "Optional - Campaign specific terms",
+          rows: 8,
+          showPreview: true
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", children: "Call to Action Link" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "link-url", children: "Link URL" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Input,
+              {
+                id: "link-url",
+                type: "url",
+                value: formData.link_url,
+                onChange: (e) => setFormData({ ...formData, link_url: e.target.value }),
+                placeholder: "https://example.com/campaign"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "link-text", children: "Link Text" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Input,
+              {
+                id: "link-text",
+                value: formData.link_text,
+                onChange: (e) => setFormData({ ...formData, link_text: e.target.value }),
+                placeholder: "Shop Now"
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", children: "SEO & Metadata" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "meta-title", children: "Meta Title" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Input,
+              {
+                id: "meta-title",
+                value: formData.meta_title,
+                onChange: (e) => setFormData({ ...formData, meta_title: e.target.value }),
+                placeholder: "Campaign meta title for SEO"
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { type: "submit", disabled, children: "Save" })
-        ]
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "meta-description", children: "Meta Description" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Input,
+              {
+                id: "meta-description",
+                value: formData.meta_description,
+                onChange: (e) => setFormData({
+                  ...formData,
+                  meta_description: e.target.value
+                }),
+                placeholder: "Campaign meta description for SEO"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "meta-keywords", children: "Meta Keywords" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Input,
+              {
+                id: "meta-keywords",
+                value: formData.meta_keywords,
+                onChange: (e) => setFormData({
+                  ...formData,
+                  meta_keywords: e.target.value
+                }),
+                placeholder: "keyword1, keyword2, keyword3"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-ui-fg-subtle", children: "Comma-separated keywords for SEO" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "display-order", children: "Display Order" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Input,
+              {
+                id: "display-order",
+                type: "number",
+                value: formData.display_order,
+                onChange: (e) => setFormData({
+                  ...formData,
+                  display_order: parseInt(e.target.value) || 0
+                }),
+                placeholder: "0"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-ui-fg-subtle", children: "Lower numbers appear first in listings" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end border-t pt-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: handleSave, isLoading: isSaving, children: "Save Campaign Details" }) })
+    ] }),
+    showImageUploader && /* @__PURE__ */ jsxRuntime.jsx(
+      CampaignImageUploader,
+      {
+        campaignId,
+        imageType: showImageUploader,
+        currentImageUrl: showImageUploader === "image" ? campaignDetail == null ? void 0 : campaignDetail.image_url : campaignDetail == null ? void 0 : campaignDetail.thumbnail_url,
+        onClose: () => setShowImageUploader(null),
+        onSuccess: fetchCampaignDetail
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.FocusModal, { open: openProductModal, onOpenChange: setOpenProductModal, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.FocusModal.Content, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.FocusModal.Header, { title: "Add Product" }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.FocusModal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        ProductSelector,
-        {
-          selectedProductIds: fields.map((f) => f.product.id),
-          onSelectProduct: (product) => {
-            append({
-              product,
-              discountType: "percentage",
-              discountValue: 10,
-              limit: 10,
-              maxQty: 1
-            });
-            setOpenProductModal(false);
-          }
-        }
-      ) })
-    ] }) })
+    )
   ] });
 };
-const useFlashSaleById = (id) => {
-  const [data, setData] = react.useState(null);
-  const [isLoading, setIsLoading] = react.useState(true);
-  const [error, setError] = react.useState(null);
-  const fetchFlashSale = async () => {
-    if (!id) {
-      setIsLoading(false);
-      return;
-    }
-    setIsLoading(true);
-    setError(null);
-    try {
-      const response = await axios__default.default.get(`/admin/flash-sales/${id}`);
-      setData(response.data);
-    } catch (err) {
-      setError(
-        err instanceof Error ? err : new Error("Failed to fetch flash sale")
-      );
-    } finally {
-      setIsLoading(false);
-    }
-  };
-  react.useEffect(() => {
-    fetchFlashSale();
-  }, [id]);
-  return {
-    data,
-    isLoading,
-    error,
-    refetch: fetchFlashSale
-  };
-};
 const FlashSaleDetail = () => {
   const { id } = reactRouterDom.useParams();
   const navigate = reactRouterDom.useNavigate();
@@ -2170,7 +2048,7 @@ const FlashSaleDetail = () => {
     ] })
   ] });
 };
-const config = adminSdk.defineRouteConfig({
+const config$1 = adminSdk.defineRouteConfig({
   label: "Flash Sale Detail",
   icon: icons.Sparkles
 });
@@ -2209,6 +2087,128 @@ const FlashSaleCreate = () => {
     }
   );
 };
+const useCouponById = (id) => {
+  const [data, setData] = react.useState(null);
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  const fetchCoupon = async () => {
+    if (!id) {
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await axios__default.default.get(`/admin/coupons/${id}`);
+      setData(response.data);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to fetch coupon"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  react.useEffect(() => {
+    fetchCoupon();
+  }, [id]);
+  return {
+    data,
+    isLoading,
+    error,
+    refetch: fetchCoupon
+  };
+};
+const CouponDetail = () => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { id } = reactRouterDom.useParams();
+  const navigate = reactRouterDom.useNavigate();
+  const [isEditing, setIsEditing] = react.useState(false);
+  const { data, isLoading, refetch } = useCouponById(id ?? "");
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin h-10 w-10 border-4 border-primary rounded-full border-t-transparent" }) });
+  }
+  if (!(data == null ? void 0 : data.campaign)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Coupon not found" }) });
+  }
+  const campaign = data.campaign;
+  const promotion = (_a = campaign.promotions) == null ? void 0 : _a[0];
+  const initialValues = {
+    name: campaign.name ?? "",
+    description: campaign.description ?? "",
+    type: "coupon",
+    code: (promotion == null ? void 0 : promotion.code) ?? "",
+    discount_type: ((_b = promotion == null ? void 0 : promotion.application_method) == null ? void 0 : _b.type) ?? "percentage",
+    discount_value: Number(((_c = promotion == null ? void 0 : promotion.application_method) == null ? void 0 : _c.value) ?? 0),
+    currency_code: ((_d = promotion == null ? void 0 : promotion.application_method) == null ? void 0 : _d.currency_code) ?? void 0,
+    starts_at: campaign.starts_at ? dayjs__default.default(campaign.starts_at).format("YYYY-MM-DDTHH:mm") : void 0,
+    ends_at: campaign.ends_at ? dayjs__default.default(campaign.ends_at).format("YYYY-MM-DDTHH:mm") : void 0,
+    allocation: ((_e = promotion == null ? void 0 : promotion.application_method) == null ? void 0 : _e.allocation) === "total" ? "across" : ((_f = promotion == null ? void 0 : promotion.application_method) == null ? void 0 : _f.allocation) ?? "across",
+    target_type: ((_g = promotion == null ? void 0 : promotion.application_method) == null ? void 0 : _g.target_type) ?? "order"
+  };
+  const handleSubmit = async (formData) => {
+    var _a2, _b2;
+    if (!id) {
+      return;
+    }
+    try {
+      await axios__default.default.put(`/admin/coupons/${id}`, {
+        ...formData,
+        starts_at: new Date(formData.starts_at).toUTCString(),
+        ends_at: new Date(formData.ends_at).toUTCString(),
+        currency_code: formData.discount_type === "fixed" ? formData.currency_code : void 0
+      });
+      ui.toast.success("Coupon updated successfully");
+      setIsEditing(false);
+      refetch();
+    } catch (error) {
+      let message = "Failed to update coupon";
+      if (axios__default.default.isAxiosError(error)) {
+        message = ((_b2 = (_a2 = error.response) == null ? void 0 : _a2.data) == null ? void 0 : _b2.message) ?? message;
+      } else if (error instanceof Error) {
+        message = error.message;
+      }
+      ui.toast.error("Failed to update coupon", {
+        description: message
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-semibold mb-1", children: campaign.name }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-fg-subtle", children: "Manage coupon configuration and content" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", onClick: () => navigate("/coupons"), children: "Back to Coupons" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: () => setIsEditing((prev) => !prev), children: isEditing ? "View Mode" : "Edit Mode" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs, { defaultValue: "settings", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs.List, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Trigger, { value: "settings", children: "Coupon Settings" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Trigger, { value: "details", children: "Coupon Details" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Content, { value: "settings", className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+        CouponForm,
+        {
+          initialData: initialValues,
+          onSubmit: handleSubmit,
+          onCancel: () => navigate("/coupons"),
+          disabled: !isEditing
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Content, { value: "details", className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+        CampaignDetailForm,
+        {
+          campaignId: campaign.id,
+          campaignName: campaign.name ?? ""
+        }
+      ) })
+    ] })
+  ] });
+};
+const config = adminSdk.defineRouteConfig({
+  label: "Coupon Detail",
+  icon: icons.Tag
+});
 const widgetModule = { widgets: [
   {
     Component: CampaignDetailWidget,
@@ -2225,10 +2225,6 @@ const routeModule = {
       Component: FlashSale,
       path: "/flash-sales"
     },
-    {
-      Component: CouponDetail,
-      path: "/coupons/:id"
-    },
     {
       Component: CouponCreate,
       path: "/coupons/create"
@@ -2240,6 +2236,10 @@ const routeModule = {
     {
       Component: FlashSaleCreate,
       path: "/flash-sales/create"
+    },
+    {
+      Component: CouponDetail,
+      path: "/coupons/:id"
     }
   ]
 };
@@ -2258,14 +2258,14 @@ const menuItemModule = {
       nested: void 0
     },
     {
-      label: config$1.label,
-      icon: config$1.icon,
+      label: config.label,
+      icon: config.icon,
       path: "/coupons/:id",
       nested: void 0
     },
     {
-      label: config.label,
-      icon: config.icon,
+      label: config$1.label,
+      icon: config$1.icon,
       path: "/flash-sales/:id",
       nested: void 0
     }