@lodashventure/medusa-campaign 1.3.12 → 1.4.0

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

@@ -1,22 +1,369 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const adminSdk = require("@medusajs/admin-sdk");
-const icons = require("@medusajs/icons");
 const ui = require("@medusajs/ui");
-const dayjs = require("dayjs");
+const icons = require("@medusajs/icons");
 const React = require("react");
 const reactRouterDom = require("react-router-dom");
+const dayjs = require("dayjs");
 const reactQuery = require("@tanstack/react-query");
 const axios = require("axios");
 const z = require("zod");
 const lodash = require("lodash");
 const Medusa = require("@medusajs/js-sdk");
 const _interopDefault = (e2) => e2 && e2.__esModule ? e2 : { default: e2 };
-const dayjs__default = /* @__PURE__ */ _interopDefault(dayjs);
 const React__default = /* @__PURE__ */ _interopDefault(React);
+const dayjs__default = /* @__PURE__ */ _interopDefault(dayjs);
 const axios__default = /* @__PURE__ */ _interopDefault(axios);
 const z__default = /* @__PURE__ */ _interopDefault(z);
 const Medusa__default = /* @__PURE__ */ _interopDefault(Medusa);
+const CampaignDetailWidget = ({ data: promotion }) => {
+  const navigate = reactRouterDom.useNavigate();
+  const [campaign, setCampaign] = React.useState(null);
+  const [campaignDetail, setCampaignDetail] = React.useState(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  React.useEffect(() => {
+    if (promotion == null ? void 0 : promotion.campaign_id) {
+      fetchCampaignAndDetail();
+    } else {
+      setLoading(false);
+    }
+  }, [promotion == null ? void 0 : promotion.campaign_id]);
+  const fetchCampaignAndDetail = async () => {
+    if (!(promotion == null ? void 0 : promotion.campaign_id)) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const campaignResponse = await fetch(
+        `/admin/flash-sales/${promotion.campaign_id}`,
+        {
+          credentials: "include"
+        }
+      );
+      if (campaignResponse.ok) {
+        const campaignData = await campaignResponse.json();
+        setCampaign(campaignData);
+        if (campaignData.campaign_detail) {
+          setCampaignDetail(campaignData.campaign_detail);
+        }
+      }
+    } catch (err) {
+      console.error("Error fetching campaign:", err);
+      setError("Failed to load campaign information");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleEditCampaign = () => {
+    if (campaign == null ? void 0 : campaign.id) {
+      navigate(`/flash-sales/${campaign.id}`);
+    }
+  };
+  const handleViewCampaign = () => {
+    if (campaign == null ? void 0 : campaign.id) {
+      navigate(`/flash-sales/${campaign.id}#details`);
+    }
+  };
+  if (!(promotion == null ? void 0 : promotion.campaign_id)) {
+    return null;
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "divide-y px-0 pb-0 pt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(icons.Sparkles, { className: "text-ui-fg-subtle" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Campaign" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-subtle", children: "Loading campaign..." })
+    ] }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "divide-y px-0 pb-0 pt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(icons.Sparkles, { className: "text-ui-fg-subtle" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Campaign" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Alert, { variant: "error", children: error })
+    ] }) });
+  }
+  if (!campaign) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "divide-y px-0 pb-0 pt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(icons.Sparkles, { className: "text-ui-fg-subtle" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Campaign" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-subtle", children: "This promotion is not part of a campaign" })
+    ] }) });
+  }
+  const hasCampaignDetail = !!campaignDetail;
+  const hasImages = (campaignDetail == null ? void 0 : campaignDetail.image_url) || (campaignDetail == null ? void 0 : campaignDetail.thumbnail_url);
+  const hasContent = (campaignDetail == null ? void 0 : campaignDetail.detail_content) || (campaignDetail == null ? void 0 : campaignDetail.terms_and_conditions);
+  const hasSEO = (campaignDetail == null ? void 0 : campaignDetail.meta_title) || (campaignDetail == null ? void 0 : campaignDetail.meta_description);
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "divide-y px-0 pb-0 pt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(icons.Sparkles, { className: "text-ui-fg-subtle" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Campaign" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-4 rounded-lg border bg-ui-bg-subtle", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "font-semibold text-lg mb-1", children: campaign.name }),
+          campaign.description && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-sm text-ui-fg-subtle line-clamp-2", children: campaign.description })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { color: "purple", size: "small", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(icons.Sparkles, { className: "mr-1" }),
+          "Campaign"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2 mt-3 pt-3 border-t", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(icons.PhotoSolid, { className: `h-4 w-4 ${hasImages ? "text-green-500" : "text-ui-fg-muted"}` }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-xs", children: hasImages ? "Images added" : "No images" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(icons.PencilSquare, { className: `h-4 w-4 ${hasContent ? "text-green-500" : "text-ui-fg-muted"}` }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-xs", children: hasContent ? "Content added" : "No content" })
+        ] })
+      ] })
+    ] }),
+    hasCampaignDetail && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 mb-4", children: [
+      campaignDetail.thumbnail_url && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-xs font-medium text-ui-fg-subtle mb-2", children: "Thumbnail" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: campaignDetail.thumbnail_url,
+            alt: "Campaign thumbnail",
+            className: "w-full h-32 object-cover rounded-lg border"
+          }
+        )
+      ] }),
+      campaignDetail.detail_content && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-xs font-medium text-ui-fg-subtle mb-1", children: "Content Preview" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-sm line-clamp-3 text-ui-fg-muted", children: [
+          campaignDetail.detail_content.substring(0, 150),
+          "..."
+        ] })
+      ] }),
+      campaignDetail.link_url && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "xsmall", color: "blue", children: "CTA Link" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-subtle truncate", children: campaignDetail.link_text || campaignDetail.link_url })
+      ] }),
+      hasSEO && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "xsmall", color: "green", children: "SEO" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-subtle", children: "Meta fields configured" })
+      ] })
+    ] }),
+    !hasCampaignDetail && /* @__PURE__ */ jsxRuntime.jsx(ui.Alert, { variant: "info", className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-sm", children: "No campaign details added yet. Add images, content, and SEO to enhance this campaign." }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Button,
+        {
+          variant: "secondary",
+          size: "small",
+          onClick: handleEditCampaign,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(icons.PencilSquare, { className: "mr-1" }),
+            "Edit Campaign"
+          ]
+        }
+      ),
+      hasCampaignDetail && /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Button,
+        {
+          variant: "secondary",
+          size: "small",
+          onClick: handleViewCampaign,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(icons.Eye, { className: "mr-1" }),
+            "View Details"
+          ]
+        }
+      )
+    ] }),
+    campaignDetail && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 pt-4 border-t grid grid-cols-2 gap-3 text-xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-subtle", children: "Display Order" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "font-medium", children: campaignDetail.display_order })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-subtle", children: "Status" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: hasCampaignDetail ? "green" : "grey", size: "xsmall", children: hasCampaignDetail ? "Complete" : "Incomplete" })
+      ] })
+    ] })
+  ] }) });
+};
+adminSdk.defineWidgetConfig({
+  zone: "promotion.details.side.after"
+});
+const CampaignStatsWidget = () => {
+  const [stats, setStats] = React.useState({
+    total: 0,
+    active: 0,
+    inactive: 0,
+    with_images: 0,
+    with_content: 0,
+    complete: 0
+  });
+  const [loading, setLoading] = React.useState(true);
+  React.useEffect(() => {
+    fetchStats();
+  }, []);
+  const fetchStats = async () => {
+    setLoading(true);
+    try {
+      const response = await fetch("/admin/flash-sales?limit=100", {
+        credentials: "include"
+      });
+      if (response.ok) {
+        const data = await response.json();
+        const campaigns = data.campaigns || [];
+        const now = /* @__PURE__ */ new Date();
+        let active = 0;
+        let inactive = 0;
+        let withImages = 0;
+        let withContent = 0;
+        let complete = 0;
+        campaigns.forEach((campaign) => {
+          if (campaign.ends_at && new Date(campaign.ends_at) > now) {
+            active++;
+          } else {
+            inactive++;
+          }
+          if (campaign.campaign_detail) {
+            if (campaign.campaign_detail.image_url || campaign.campaign_detail.thumbnail_url) {
+              withImages++;
+            }
+            if (campaign.campaign_detail.detail_content) {
+              withContent++;
+            }
+            if ((campaign.campaign_detail.image_url || campaign.campaign_detail.thumbnail_url) && campaign.campaign_detail.detail_content) {
+              complete++;
+            }
+          }
+        });
+        setStats({
+          total: campaigns.length,
+          active,
+          inactive,
+          with_images: withImages,
+          with_content: withContent,
+          complete
+        });
+      }
+    } catch (err) {
+      console.error("Error fetching campaign stats:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "px-6 py-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(icons.Sparkles, { className: "text-ui-fg-subtle" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Campaign Overview" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-subtle", children: "Loading stats..." })
+    ] });
+  }
+  const completionRate = stats.total > 0 ? Math.round(stats.complete / stats.total * 100) : 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "px-6 py-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(icons.Sparkles, { className: "text-ui-fg-subtle" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Campaign Overview" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-4 mb-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 rounded-lg border bg-ui-bg-subtle", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-xs text-ui-fg-subtle", children: "Total" }),
+          /* @__PURE__ */ jsxRuntime.jsx(icons.Sparkles, { className: "h-4 w-4 text-ui-fg-subtle" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-2xl font-bold", children: stats.total })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 rounded-lg border bg-green-50", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-xs text-green-700", children: "Active" }),
+          /* @__PURE__ */ jsxRuntime.jsx(icons.CheckCircleSolid, { className: "h-4 w-4 text-green-600" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-2xl font-bold text-green-700", children: stats.active })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 rounded-lg border bg-gray-50", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-xs text-gray-600", children: "Inactive" }),
+          /* @__PURE__ */ jsxRuntime.jsx(icons.ClockSolid, { className: "h-4 w-4 text-gray-500" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-2xl font-bold text-gray-600", children: stats.inactive })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 mb-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-3 rounded-lg bg-ui-bg-subtle", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(icons.PhotoSolid, { className: "h-4 w-4 text-blue-600" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-sm", children: "With Images" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-sm font-medium", children: stats.with_images }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xsmall", color: "blue", children: [
+            stats.total > 0 ? Math.round(stats.with_images / stats.total * 100) : 0,
+            "%"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-3 rounded-lg bg-ui-bg-subtle", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(icons.CheckCircleSolid, { className: "h-4 w-4 text-green-600" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-sm", children: "With Content" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-sm font-medium", children: stats.with_content }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xsmall", color: "green", children: [
+            stats.total > 0 ? Math.round(stats.with_content / stats.total * 100) : 0,
+            "%"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-3 rounded-lg bg-ui-bg-subtle", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(icons.Sparkles, { className: "h-4 w-4 text-purple-600" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-sm", children: "Complete Details" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-sm font-medium", children: stats.complete }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xsmall", color: "purple", children: [
+            completionRate,
+            "%"
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-4 border-t", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-xs text-ui-fg-subtle", children: "Campaign Completion" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-xs font-medium", children: [
+          completionRate,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 bg-ui-bg-subtle rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "h-full bg-gradient-to-r from-purple-500 to-blue-500 transition-all duration-300",
+          style: { width: `${completionRate}%` }
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-xs text-ui-fg-muted mt-2", children: [
+        stats.complete,
+        " of ",
+        stats.total,
+        " campaigns have complete details"
+      ] })
+    ] }),
+    completionRate < 50 && stats.total > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 p-3 rounded-lg bg-blue-50 border border-blue-200", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-xs text-blue-800", children: "💡 Tip: Add images and content to campaigns to improve customer engagement!" }) })
+  ] });
+};
+adminSdk.defineWidgetConfig({
+  zone: "campaign.list.before"
+});
 const useFlashSales = (pagination) => {
   const query = reactQuery.useQuery({
     queryKey: ["flash-sales", pagination],
@@ -2350,6 +2697,848 @@ const useFlashSaleById = (id) => {
   });
   return query;
 };
+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: (e2) => onChange(e2.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: (e2) => onChange(e2.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((e2) => {
+    e2.preventDefault();
+    e2.stopPropagation();
+    setIsDragging(true);
+  }, []);
+  const handleDragLeave = React.useCallback((e2) => {
+    e2.preventDefault();
+    e2.stopPropagation();
+    setIsDragging(false);
+  }, []);
+  const handleDragOver = React.useCallback((e2) => {
+    e2.preventDefault();
+    e2.stopPropagation();
+  }, []);
+  const handleDrop = React.useCallback((e2) => {
+    var _a;
+    e2.preventDefault();
+    e2.stopPropagation();
+    setIsDragging(false);
+    const file = (_a = e2.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: (e2) => {
+            var _a;
+            const file = (_a = e2.target.files) == null ? void 0 : _a[0];
+            if (file) handleFileUpload(file);
+            e2.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");
+      }
+    } catch (error) {
+      console.error("Error saving campaign detail:", error);
+      ui.toast.error("Error saving campaign details");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  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"
+                ),
+                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: (e2) => {
+                        console.error(
+                          "Failed to load image:",
+                          campaignDetail.image_url
+                        );
+                        e2.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,
+                  {
+                    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",
+                    {
+                      src: campaignDetail.thumbnail_url,
+                      alt: "Thumbnail",
+                      className: "h-full w-full object-cover",
+                      onError: (e2) => {
+                        console.error(
+                          "Failed to load thumbnail:",
+                          campaignDetail.thumbnail_url
+                        );
+                        e2.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,
+                  {
+                    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: (e2) => setFormData({ ...formData, link_url: e2.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: (e2) => setFormData({ ...formData, link_text: e2.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: (e2) => setFormData({ ...formData, meta_title: e2.target.value }),
+                placeholder: "Campaign meta title for SEO"
+              }
+            )
+          ] }),
+          /* @__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: (e2) => setFormData({
+                  ...formData,
+                  meta_description: e2.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: (e2) => setFormData({
+                  ...formData,
+                  meta_keywords: e2.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: (e2) => setFormData({
+                  ...formData,
+                  display_order: parseInt(e2.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
+      }
+    )
+  ] });
+};
 const FlashSaleDetail = () => {
   const { id } = reactRouterDom.useParams();
   const navigate = reactRouterDom.useNavigate();
@@ -2402,18 +3591,42 @@ const FlashSaleDetail = () => {
     starts_at: data.starts_at,
     ends_at: data.ends_at
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FlashSaleForm,
-      {
-        initialData: campaignData,
-        initialProducts: new Map(data.products.map((product) => [product.product.id, product])),
-        onSubmit: handleSubmit,
-        onCancel: () => navigate("/flash-sales"),
-        disabled: !isEditing
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: () => setIsEditing((prev) => !prev), children: "Toggle Edit" })
+  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: data.name }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-fg-subtle", children: "Manage campaign settings and content" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", onClick: () => navigate("/flash-sales"), children: "Back to Campaigns" }),
+        /* @__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: "Campaign Settings" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Trigger, { value: "details", children: "Campaign Details" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Content, { value: "settings", className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+        FlashSaleForm,
+        {
+          initialData: campaignData,
+          initialProducts: new Map(
+            data.products.map((product) => [product.product.id, product])
+          ),
+          onSubmit: handleSubmit,
+          onCancel: () => navigate("/flash-sales"),
+          disabled: !isEditing
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Content, { value: "details", className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+        CampaignDetailForm,
+        {
+          campaignId: id || "",
+          campaignName: data.name || ""
+        }
+      ) })
+    ] })
   ] });
 };
 const config = adminSdk.defineRouteConfig({
@@ -2460,7 +3673,16 @@ const FlashSaleCreate = () => {
     }
   );
 };
-const widgetModule = { widgets: [] };
+const widgetModule = { widgets: [
+  {
+    Component: CampaignDetailWidget,
+    zone: ["promotion.details.side.after"]
+  },
+  {
+    Component: CampaignStatsWidget,
+    zone: ["campaign.list.before"]
+  }
+] };
 const routeModule = {
   routes: [
     {