medusa-import-product-plugin 0.0.1

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

@@ -0,0 +1,590 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const reactRouterDom = require("react-router-dom");
+const ui = require("@medusajs/ui");
+const adminSdk = require("@medusajs/admin-sdk");
+const icons = require("@medusajs/icons");
+const STATUS_COLOR$1 = {
+  processing: "blue",
+  paused: "orange",
+  done: "green",
+  failed: "red",
+  pending: "grey"
+};
+const STATUS_ICON$1 = {
+  processing: /* @__PURE__ */ jsxRuntime.jsx(icons.Loader, { className: "w-3.5 h-3.5" }),
+  done: /* @__PURE__ */ jsxRuntime.jsx(icons.CheckCircle, { className: "w-3.5 h-3.5" }),
+  failed: /* @__PURE__ */ jsxRuntime.jsx(icons.XCircle, { className: "w-3.5 h-3.5" }),
+  pending: /* @__PURE__ */ jsxRuntime.jsx(icons.Clock, { className: "w-3.5 h-3.5" })
+};
+const PAGE_SIZE$1 = 10;
+function SkeletonRow() {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Row, { children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-full animate-pulse rounded bg-ui-bg-disabled" }) }, i)) });
+}
+function ImportPage() {
+  const navigate = reactRouterDom.useNavigate();
+  const [file, setFile] = react.useState(null);
+  const inputRef = react.useRef(null);
+  const [uploading, setUploading] = react.useState(false);
+  const [jobs, setJobs] = react.useState([]);
+  const [page, setPage] = react.useState(1);
+  const [totalPages, setTotalPages] = react.useState(1);
+  const [total, setTotal] = react.useState(0);
+  const [loading, setLoading] = react.useState(true);
+  const [deleting, setDeleting] = react.useState(null);
+  const [uploadError, setUploadError] = react.useState(null);
+  const [autoRefresh, setAutoRefresh] = react.useState(false);
+  const intervalRef = react.useRef(null);
+  const fetchJobs = async (p) => {
+    try {
+      const res = await fetch(`/admin/import?page=${p}&limit=${PAGE_SIZE$1}`);
+      if (!res.ok) return;
+      const data = await res.json();
+      setJobs(data.jobs ?? []);
+      setTotalPages(data.totalPages ?? 1);
+      setTotal(data.total ?? 0);
+    } catch {
+    } finally {
+      setLoading(false);
+    }
+  };
+  react.useEffect(() => {
+    fetchJobs(page);
+  }, [page]);
+  react.useEffect(() => {
+    if (autoRefresh) {
+      intervalRef.current = setInterval(() => fetchJobs(page), 5e3);
+    }
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [autoRefresh, page]);
+  const handleUpload = async () => {
+    if (!file || uploading) return;
+    setUploading(true);
+    setUploadError(null);
+    try {
+      const form = new FormData();
+      form.append("file", file);
+      const res = await fetch("/admin/import", { method: "POST", body: form });
+      const data = await res.json();
+      if (!res.ok) {
+        setUploadError(data.error ?? "Upload failed");
+        setUploading(false);
+        return;
+      }
+      setFile(null);
+      navigate(`/import/${data.job_id}`);
+    } catch (err) {
+      setUploadError(err instanceof Error ? err.message : "Upload failed");
+      setUploading(false);
+    }
+  };
+  const formatDate = (val) => {
+    if (!val) return "—";
+    const d = new Date(val);
+    if (isNaN(d.getTime())) return "—";
+    return d.toLocaleString();
+  };
+  const handleDelete = async (jobId) => {
+    if (deleting) return;
+    if (!window.confirm("Delete this import job and all its data?")) return;
+    setDeleting(jobId);
+    try {
+      const res = await fetch(`/admin/import/${jobId}`, { method: "DELETE" });
+      if (res.ok) {
+        await fetchJobs(page);
+      }
+    } finally {
+      setDeleting(null);
+    }
+  };
+  const getProgress = (job) => {
+    if (!job.total) return 0;
+    return Math.round(job.processed / job.total * 100);
+  };
+  const hasActiveJobs = jobs.some((j) => j.status === "processing" || j.status === "paused");
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h1", children: "Product Import" }),
+        total > 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "small", className: "text-ui-fg-subtle", children: total })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: hasActiveJobs && /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          variant: autoRefresh ? "primary" : "secondary",
+          size: "small",
+          onClick: () => setAutoRefresh(!autoRefresh),
+          children: autoRefresh ? "Auto-refresh On" : "Auto-refresh Off"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          onClick: () => {
+            var _a;
+            return (_a = inputRef.current) == null ? void 0 : _a.click();
+          },
+          onKeyDown: (e) => {
+            var _a;
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              (_a = inputRef.current) == null ? void 0 : _a.click();
+            }
+          },
+          onDragOver: (e) => e.preventDefault(),
+          onDrop: (e) => {
+            var _a;
+            e.preventDefault();
+            const dropped = e.dataTransfer.files[0];
+            if ((_a = dropped == null ? void 0 : dropped.name) == null ? void 0 : _a.endsWith(".csv")) setFile(dropped);
+          },
+          className: "group flex flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed border-ui-border-base bg-ui-bg-subtle p-10 cursor-pointer hover:border-ui-border-interactive hover:bg-ui-bg-overlay-hover transition-all",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-full bg-ui-bg-base p-3 shadow-elevation-1low group-hover:shadow-elevation-2", children: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpTray, { className: "text-ui-fg-muted group-hover:text-ui-fg-interactive" }) }),
+            file ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: file.name }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "xsmall", className: "text-ui-fg-muted", children: [
+                (file.size / 1024).toFixed(1),
+                " KB"
+              ] })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", className: "text-ui-fg-base", children: "Drop a CSV file here" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xsmall", className: "text-ui-fg-muted", children: "or click to browse" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "file",
+                accept: ".csv",
+                className: "hidden",
+                onChange: (e) => {
+                  var _a;
+                  return setFile(((_a = e.target.files) == null ? void 0 : _a[0]) ?? null);
+                }
+              }
+            )
+          ]
+        }
+      ),
+      uploadError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 rounded-lg border border-ui-border-error bg-ui-bg-error p-3", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-error", children: uploadError }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            onClick: handleUpload,
+            disabled: !file || uploading,
+            size: "large",
+            children: uploading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-ui-border-base border-t-transparent" }),
+              "Importing..."
+            ] }) : "Start Import"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xsmall", className: "text-ui-fg-muted", children: "Supports .csv files with one row per variant" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Import History" }) }),
+      loading ? /* @__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: "File" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Status" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Progress" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Created" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { className: "w-[100px]" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Body, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, i)) })
+      ] }) : jobs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-16 gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-full bg-ui-bg-subtle p-5", children: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpTray, { className: "text-ui-fg-muted w-6 h-6" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", className: "text-ui-fg-subtle", children: "No imports yet" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xsmall", className: "text-ui-fg-muted", children: "Upload a CSV file above to bulk import products" })
+        ] })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__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: "File" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Status" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Progress" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Created" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { className: "w-[100px]" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Body, { children: jobs.map((job) => {
+            const progress = getProgress(job);
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              ui.Table.Row,
+              {
+                className: "cursor-pointer hover:bg-ui-bg-subtle transition-colors",
+                onClick: () => navigate(`/import/${job.id}`),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", className: "font-mono", children: job.file_name }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.StatusBadge, { color: STATUS_COLOR$1[job.status] ?? "grey", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+                    STATUS_ICON$1[job.status],
+                    job.status
+                  ] }) }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-24 h-1.5 rounded-full bg-ui-bg-base overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: "h-full rounded-full bg-ui-bg-interactive transition-all duration-500",
+                        style: { width: `${progress}%` }
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "xsmall", className: "text-ui-fg-subtle tabular-nums", children: [
+                      job.processed,
+                      "/",
+                      job.total
+                    ] })
+                  ] }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xsmall", className: "text-ui-fg-subtle", children: formatDate(job.created_at) }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { onClick: (e) => e.stopPropagation(), children: ["pending", "failed", "done"].includes(job.status) && /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.Button,
+                    {
+                      variant: "transparent",
+                      size: "small",
+                      disabled: deleting === job.id,
+                      onClick: () => handleDelete(job.id),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "w-4 h-4 text-ui-fg-subtle" })
+                    }
+                  ) })
+                ]
+              },
+              job.id
+            );
+          }) })
+        ] }),
+        totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-1 pt-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "xsmall", className: "text-ui-fg-subtle", children: [
+            "Page ",
+            page,
+            " of ",
+            totalPages
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Button,
+              {
+                variant: "secondary",
+                size: "small",
+                disabled: page <= 1,
+                onClick: () => setPage((p) => Math.max(1, p - 1)),
+                children: "Previous"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Button,
+              {
+                variant: "secondary",
+                size: "small",
+                disabled: page >= totalPages,
+                onClick: () => setPage((p) => Math.min(totalPages, p + 1)),
+                children: "Next"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+const config = adminSdk.defineRouteConfig({
+  label: "Import Products",
+  icon: icons.ArrowUpTray,
+  rank: 1
+});
+const STATUS_COLOR = {
+  processing: "blue",
+  paused: "orange",
+  done: "green",
+  failed: "red",
+  pending: "grey"
+};
+const ROW_STATUS_COLOR = {
+  created: "green",
+  updated: "blue",
+  failed: "red",
+  skipped: "grey"
+};
+const STATUS_ICON = {
+  processing: /* @__PURE__ */ jsxRuntime.jsx(icons.Loader, { className: "w-4 h-4" }),
+  done: /* @__PURE__ */ jsxRuntime.jsx(icons.CheckCircle, { className: "w-4 h-4" }),
+  failed: /* @__PURE__ */ jsxRuntime.jsx(icons.XCircle, { className: "w-4 h-4" }),
+  paused: /* @__PURE__ */ jsxRuntime.jsx(icons.Pause, { className: "w-4 h-4" }),
+  pending: /* @__PURE__ */ jsxRuntime.jsx(icons.Clock, { className: "w-4 h-4" })
+};
+const PAGE_SIZE = 20;
+function DetailSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-4 flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-7 w-48 animate-pulse rounded bg-ui-bg-disabled" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 w-20 animate-pulse rounded-full bg-ui-bg-disabled" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-full animate-pulse rounded bg-ui-bg-disabled mb-2" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-40 animate-pulse rounded bg-ui-bg-disabled" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: /* @__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: "SKU" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Title" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Status" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Error" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Body, { children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Row, { children: Array.from({ length: 4 }).map((_2, j) => /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-full animate-pulse rounded bg-ui-bg-disabled" }) }, j)) }, i)) })
+    ] }) })
+  ] });
+}
+function ProgressBar({ processed, total, progress }) {
+  const pct = Math.min(Math.max(progress ?? 0, 0), 100);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-2.5 rounded-full bg-ui-bg-base overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "h-full rounded-full bg-ui-bg-interactive transition-all duration-700 ease-out",
+          style: { width: `${pct}%` }
+        }
+      ),
+      pct > 0 && pct < 100 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "h-full w-full animate-[shimmer_1.5s_infinite]",
+          style: {
+            background: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%)",
+            backgroundSize: "200% 100%"
+          }
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "xsmall", className: "text-ui-fg-subtle", children: [
+        processed,
+        " / ",
+        total,
+        " products"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "xsmall", weight: "plus", className: "text-ui-fg-base tabular-nums", children: [
+        pct,
+        "%"
+      ] })
+    ] })
+  ] });
+}
+function StatCard({ label, value, color }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 rounded-lg border border-ui-border-base bg-ui-bg-subtle px-4 py-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xsmall", className: "text-ui-fg-muted", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "large", weight: "plus", className: color ?? "text-ui-fg-base", children: value })
+  ] });
+}
+function ImportReportPage() {
+  var _a;
+  const { id } = reactRouterDom.useParams();
+  const navigate = reactRouterDom.useNavigate();
+  const [job, setJob] = react.useState(null);
+  const [page, setPage] = react.useState(1);
+  const intervalRef = react.useRef(null);
+  react.useEffect(() => {
+    let cancelled = false;
+    const tick = async () => {
+      try {
+        const r = await fetch(`/admin/import/${id}`);
+        if (!r.ok) return;
+        const data = await r.json();
+        if (!cancelled) {
+          setJob(data);
+          if (data.status === "done" || data.status === "failed") {
+            if (intervalRef.current) {
+              clearInterval(intervalRef.current);
+              intervalRef.current = null;
+            }
+          }
+        }
+      } catch {
+      }
+    };
+    tick();
+    intervalRef.current = setInterval(tick, 2e3);
+    return () => {
+      cancelled = true;
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [id]);
+  const pause = async () => {
+    await fetch(`/admin/import/${id}/pause`, { method: "POST" });
+  };
+  const resume = async () => {
+    await fetch(`/admin/import/${id}/resume`, { method: "POST" });
+  };
+  const del = async () => {
+    if (!window.confirm("Delete this import job and all its data?")) return;
+    await fetch(`/admin/import/${id}`, { method: "DELETE" });
+    navigate("/import");
+  };
+  const formatError = (err) => {
+    if (!err || err === "[object Object]") return "An unknown error occurred.";
+    return err;
+  };
+  const rows = (job == null ? void 0 : job.rows) ?? [];
+  const totalPages = Math.max(1, Math.ceil(rows.length / PAGE_SIZE));
+  const paginatedRows = react.useMemo(() => {
+    const start = (page - 1) * PAGE_SIZE;
+    return rows.slice(start, start + PAGE_SIZE);
+  }, [rows, page]);
+  react.useEffect(() => {
+    setPage(1);
+  }, [(_a = job == null ? void 0 : job.rows) == null ? void 0 : _a.length]);
+  if (!job) return /* @__PURE__ */ jsxRuntime.jsx(DetailSkeleton, {});
+  const isActive = job.status === "processing" || job.status === "paused";
+  const canDelete = ["pending", "done", "failed", "paused"].includes(job.status);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            variant: "transparent",
+            size: "small",
+            onClick: () => navigate("/import"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowLeft, { className: "w-4 h-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h1", children: job.file_name }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.StatusBadge, { color: STATUS_COLOR[job.status] ?? "grey", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
+            STATUS_ICON[job.status],
+            job.status
+          ] }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        isActive && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", onClick: pause, children: "Pause" }),
+        job.status === "paused" && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", onClick: resume, children: "Resume" }),
+        canDelete && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "danger", size: "small", onClick: del, children: "Delete" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { processed: job.processed, total: job.total, progress: job.progress }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-4 gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(StatCard, { label: "Created", value: job.created, color: "text-ui-fg-interactive" }),
+      /* @__PURE__ */ jsxRuntime.jsx(StatCard, { label: "Updated", value: job.updated, color: "text-ui-fg-interactive" }),
+      /* @__PURE__ */ jsxRuntime.jsx(StatCard, { label: "Failed", value: job.failed, color: job.failed > 0 ? "text-ui-fg-error" : void 0 }),
+      /* @__PURE__ */ jsxRuntime.jsx(StatCard, { label: "Total Rows", value: job.total })
+    ] }) }),
+    job.error_message && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-ui-border-error bg-ui-bg-error p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", className: "text-ui-fg-error mb-1", children: job.status === "failed" ? "Import Failed" : "Errors" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle whitespace-pre-wrap break-words", children: formatError(job.error_message) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Import Rows" }),
+          rows.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "small", className: "text-ui-fg-subtle", children: rows.length })
+        ] }),
+        isActive && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-ui-fg-muted", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowPath, { className: "w-3.5 h-3.5 animate-spin" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xsmall", children: "Live updating" })
+        ] })
+      ] }),
+      /* @__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: "SKU" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Title" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Status" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Error" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Body, { children: [
+          paginatedRows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "font-mono", children: row.sku }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", children: row.title }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.StatusBadge, { color: ROW_STATUS_COLOR[row.status] ?? "grey", children: row.status }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xsmall", className: "text-ui-fg-subtle max-w-[300px] truncate", children: row.error ?? "—" }) })
+          ] }, row.id)),
+          paginatedRows.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Row, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { colSpan: 4, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-muted py-10 block text-center", children: isActive ? "Processing..." : "No rows to display." }) }) })
+        ] })
+      ] }),
+      totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-1 pt-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "xsmall", className: "text-ui-fg-subtle", children: [
+          "Page ",
+          page,
+          " of ",
+          totalPages
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              variant: "secondary",
+              size: "small",
+              disabled: page <= 1,
+              onClick: () => setPage((p) => Math.max(1, p - 1)),
+              children: "Previous"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              variant: "secondary",
+              size: "small",
+              disabled: page >= totalPages,
+              onClick: () => setPage((p) => Math.min(totalPages, p + 1)),
+              children: "Next"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+const i18nTranslations0 = {};
+const widgetModule = { widgets: [] };
+const routeModule = {
+  routes: [
+    {
+      Component: ImportPage,
+      path: "/import"
+    },
+    {
+      Component: ImportReportPage,
+      path: "/import/:id"
+    }
+  ]
+};
+const menuItemModule = {
+  menuItems: [
+    {
+      label: config.label,
+      icon: config.icon,
+      path: "/import",
+      nested: void 0,
+      rank: 1,
+      translationNs: void 0
+    }
+  ]
+};
+const formModule = { customFields: {} };
+const displayModule = {
+  displays: {}
+};
+const i18nModule = { resources: i18nTranslations0 };
+const plugin = {
+  widgetModule,
+  routeModule,
+  menuItemModule,
+  formModule,
+  displayModule,
+  i18nModule
+};
+module.exports = plugin;