@dainamite/cpq 0.2.2

package/dist/modules/cpq/backend/cpq/offerings/[id]/page.js

@@ -0,0 +1,917 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { useParams, useRouter } from "next/navigation";
+import { Alert } from "@open-mercato/ui/primitives/alert";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Tag } from "@open-mercato/ui/primitives/tag";
+import { NumberInput } from "../../../../components/NumberInput.js";
+import {
+  chargeTypeMap,
+  formatStatusLabel,
+  lifecycleStatusMap
+} from "../../../../components/statusMaps.js";
+const EMPTY_FORM = {
+  code: "",
+  name: "",
+  description: "",
+  offeringType: "simple",
+  lifecycleStatus: "draft",
+  effectiveFrom: null,
+  effectiveTo: null,
+  isActive: true,
+  specId: ""
+};
+const EMPTY_CHARGE = {
+  code: "",
+  name: "",
+  description: null,
+  chargeType: "mrc",
+  pricingMethod: "flat",
+  pricingTableId: null,
+  priceColumnKey: null,
+  fixedPrice: null,
+  currencyCode: "USD",
+  quantityAttributeCode: null,
+  applicabilityCondition: null,
+  sortOrder: 0,
+  isActive: true
+};
+const PRICING_METHOD_LABELS = {
+  flat: "flat price",
+  fixed: "flat price",
+  // legacy alias — see validators.ts
+  per_unit: "per unit",
+  tiered: "tiered"
+};
+function isChargeComplete(charge) {
+  return chargeMissingFields(charge).length === 0;
+}
+function chargeMissingFields(charge) {
+  const method = charge.pricingMethod === "fixed" ? "flat" : charge.pricingMethod;
+  const missing = [];
+  if (method === "flat") {
+    if (!charge.fixedPrice) missing.push("Fixed Price");
+    if (!charge.currencyCode) missing.push("Currency");
+  } else if (method === "per_unit" || method === "tiered") {
+    if (!charge.pricingTableId) missing.push("Pricing Table");
+    if (!charge.priceColumnKey) missing.push("Price Column");
+    if (!charge.quantityAttributeCode) missing.push("Quantity Attribute");
+  }
+  return missing;
+}
+function OfferingDetailPage(props) {
+  const t = useT();
+  const router = useRouter();
+  const urlParams = useParams();
+  const offeringId = props.params?.id ?? urlParams?.id;
+  const isNew = offeringId === "new";
+  const [tab, setTab] = React.useState("general");
+  const [form, setForm] = React.useState(EMPTY_FORM);
+  const [designTimeValues, setDesignTimeValues] = React.useState({});
+  const [charges, setCharges] = React.useState([]);
+  const [attributes, setAttributes] = React.useState([]);
+  const [specs, setSpecs] = React.useState([]);
+  const [specDetail, setSpecDetail] = React.useState(null);
+  const [pricingTables, setPricingTables] = React.useState([]);
+  const [components, setComponents] = React.useState([]);
+  const [bundleSlots, setBundleSlots] = React.useState([]);
+  const [addingComponent, setAddingComponent] = React.useState(null);
+  const [slotOfferings, setSlotOfferings] = React.useState({});
+  const [loading, setLoading] = React.useState(!isNew);
+  const [saving, setSaving] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [editingCharge, setEditingCharge] = React.useState(null);
+  const [generalMode, setGeneralMode] = React.useState(isNew ? "edit" : "view");
+  const [formSnapshot, setFormSnapshot] = React.useState(null);
+  const [designTimeSnapshot, setDesignTimeSnapshot] = React.useState(null);
+  React.useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      try {
+        const specsRes = await fetch("/api/cpq/product-specifications?pageSize=200");
+        if (specsRes.ok) {
+          const d = await specsRes.json();
+          if (!cancelled) setSpecs(d.items ?? []);
+        }
+        if (isNew) return;
+        const res = await fetch(`/api/cpq/product-offerings?id=${encodeURIComponent(offeringId)}`);
+        if (!res.ok) {
+          if (!cancelled) setError("Failed to load offering");
+          return;
+        }
+        const data = await res.json();
+        if (!cancelled) {
+          setForm({
+            code: data.code,
+            name: data.name,
+            description: data.description ?? "",
+            offeringType: data.offeringType ?? "simple",
+            lifecycleStatus: data.lifecycleStatus,
+            effectiveFrom: data.effectiveFrom,
+            effectiveTo: data.effectiveTo,
+            isActive: data.isActive,
+            specId: data.specId
+          });
+          setDesignTimeValues(data.designTimeValues ?? {});
+          setCharges(data.charges ?? []);
+          setSpecDetail(data.specification ?? null);
+          setComponents(data.components ?? []);
+          if (data.specId) {
+            const attrRes = await fetch(`/api/cpq/product-attributes?specId=${encodeURIComponent(data.specId)}&pageSize=200`);
+            if (attrRes.ok) {
+              const attrData = await attrRes.json();
+              if (!cancelled) setAttributes(attrData.items ?? []);
+            }
+          }
+          if (data.offeringType === "bundle" && data.specId) {
+            const slotsRes = await fetch(`/api/cpq/bundle-slots?specId=${encodeURIComponent(data.specId)}`);
+            if (slotsRes.ok) {
+              const slotsData = await slotsRes.json();
+              if (!cancelled) setBundleSlots(slotsData.items ?? []);
+            }
+          }
+        }
+      } catch (err) {
+        console.error("Failed to load", err);
+        if (!cancelled) setError("Failed to load");
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [offeringId, isNew]);
+  const loadSpecAttributes = async (specId) => {
+    if (!specId) {
+      setAttributes([]);
+      return;
+    }
+    try {
+      const res = await fetch(`/api/cpq/product-attributes?specId=${encodeURIComponent(specId)}&pageSize=200`);
+      if (res.ok) {
+        const data = await res.json();
+        setAttributes(data.items ?? []);
+      }
+    } catch {
+      console.error("Failed to load spec attributes");
+    }
+  };
+  const saveOffering = async () => {
+    setSaving(true);
+    setError(null);
+    try {
+      const payload = isNew ? { ...form, description: form.description || null, designTimeValues, specId: form.specId } : { id: offeringId, ...form, description: form.description || null, designTimeValues };
+      const res = await fetch("/api/cpq/product-offerings", {
+        method: isNew ? "POST" : "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload)
+      });
+      if (!res.ok) {
+        const d = await res.json();
+        setError(d.error ?? "Failed to save");
+        return;
+      }
+      const saved = await res.json();
+      if (isNew) {
+        router.push(`/backend/cpq/offerings/${saved.id}`);
+      } else {
+        setForm({
+          code: saved.code,
+          name: saved.name,
+          description: saved.description ?? "",
+          offeringType: saved.offeringType ?? form.offeringType,
+          lifecycleStatus: saved.lifecycleStatus,
+          effectiveFrom: saved.effectiveFrom,
+          effectiveTo: saved.effectiveTo,
+          isActive: saved.isActive,
+          specId: saved.specId
+        });
+        setDesignTimeValues(saved.designTimeValues ?? {});
+        setFormSnapshot(null);
+        setDesignTimeSnapshot(null);
+        setGeneralMode("view");
+      }
+    } catch {
+      setError("Failed to save");
+    } finally {
+      setSaving(false);
+    }
+  };
+  const deleteOffering = async () => {
+    if (!confirm(t("cpq.offerings.confirmDelete", "Delete this offering and all its charges?"))) return;
+    try {
+      const res = await fetch("/api/cpq/product-offerings", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id: offeringId })
+      });
+      if (res.ok) {
+        router.push("/backend/cpq/offerings");
+      } else {
+        const d = await res.json();
+        setError(d.error ?? "Failed to delete");
+      }
+    } catch {
+      setError("Failed to delete");
+    }
+  };
+  const loadPricingTables = async () => {
+    if (pricingTables.length > 0) return;
+    const res = await fetch("/api/cpq/pricing-tables?pageSize=200");
+    if (res.ok) {
+      const data = await res.json();
+      setPricingTables(data.items ?? []);
+    }
+  };
+  const startEditCharge = (charge) => {
+    const editing = charge ? { ...charge } : { ...EMPTY_CHARGE };
+    setEditingCharge(editing);
+    loadPricingTables();
+  };
+  const saveCharge = async () => {
+    if (!editingCharge) return;
+    setSaving(true);
+    setError(null);
+    try {
+      const isEdit = !!editingCharge.id;
+      const payload = {
+        ...editingCharge,
+        offeringId
+      };
+      const res = await fetch("/api/cpq/product-charges", {
+        method: isEdit ? "PUT" : "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload)
+      });
+      if (!res.ok) {
+        const d = await res.json();
+        setError(d.error ?? "Failed to save charge");
+        return;
+      }
+      const offeringRes = await fetch(`/api/cpq/product-offerings?id=${encodeURIComponent(offeringId)}`);
+      if (offeringRes.ok) {
+        const data = await offeringRes.json();
+        setCharges(data.charges ?? []);
+      }
+      setEditingCharge(null);
+    } catch {
+      setError("Failed to save charge");
+    } finally {
+      setSaving(false);
+    }
+  };
+  const deleteCharge = async (chargeId) => {
+    if (!confirm("Delete this charge?")) return;
+    try {
+      const res = await fetch("/api/cpq/product-charges", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id: chargeId })
+      });
+      if (res.ok) setCharges((prev) => prev.filter((c) => c.id !== chargeId));
+    } catch {
+      setError("Failed to delete charge");
+    }
+  };
+  const selectedPricingTable = editingCharge?.pricingTableId ? pricingTables.find((pt) => pt.id === editingCharge.pricingTableId) : null;
+  const designTimeAttrs = attributes.filter((a) => a.resolutionTime === "design_time");
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: t("common.loading", "Loading...") });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => router.push("/backend/cpq/offerings"),
+            className: "text-sm text-muted-foreground hover:text-foreground",
+            children: [
+              "\u2190 ",
+              t("common.back", "Back")
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold", children: isNew ? t("cpq.offerings.new", "New Offering") : form.name }),
+        !isNew && /* @__PURE__ */ jsx(Tag, { variant: lifecycleStatusMap[form.lifecycleStatus] ?? "neutral", dot: true, children: formatStatusLabel(form.lifecycleStatus) }),
+        specDetail && /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+          "Spec: ",
+          /* @__PURE__ */ jsx("button", { onClick: () => router.push(`/backend/cpq/specifications/${specDetail.id}`), className: "text-primary hover:underline", children: specDetail.name })
+        ] })
+      ] }),
+      !isNew && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        generalMode === "view" && tab === "general" && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            onClick: () => {
+              setFormSnapshot(form);
+              setDesignTimeSnapshot(designTimeValues);
+              setGeneralMode("edit");
+            },
+            children: t("common.edit", "Edit")
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "destructive", onClick: deleteOffering, children: t("common.delete", "Delete") })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx(Alert, { variant: "destructive", children: error }),
+    !isNew && /* @__PURE__ */ jsx("div", { className: "flex gap-1 border-b", children: [
+      "general",
+      "charges",
+      ...form.offeringType === "bundle" ? ["components"] : []
+    ].map((t_) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setTab(t_),
+        className: `px-4 py-2 text-sm font-medium border-b-2 transition-colors ${tab === t_ ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+        children: [
+          t_ === "general" && "General",
+          t_ === "charges" && `Charges (${charges.length})`,
+          t_ === "components" && `Components (${components.length})`
+        ]
+      },
+      t_
+    )) }),
+    (isNew || tab === "general") && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-6 space-y-4", children: [
+      isNew && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium mb-1", children: "Specification" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: form.specId,
+            onChange: (e) => {
+              setForm({ ...form, specId: e.target.value });
+              loadSpecAttributes(e.target.value);
+              setDesignTimeValues({});
+            },
+            className: "w-full rounded-md border px-3 py-2 text-sm",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "Select a specification..." }),
+              specs.map((s) => /* @__PURE__ */ jsxs("option", { value: s.id, children: [
+                s.name,
+                " (",
+                s.code,
+                ")"
+              ] }, s.id))
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium mb-1", children: t("cpq.offerings.code", "Code") }),
+          generalMode === "view" && !isNew ? /* @__PURE__ */ jsx("p", { className: "text-sm font-mono py-2", children: form.code || "\u2014" }) : /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: form.code,
+              onChange: (e) => setForm({ ...form, code: e.target.value }),
+              placeholder: "e.g. gix-cloud-connect-aws",
+              className: "w-full rounded-md border px-3 py-2 text-sm"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium mb-1", children: t("cpq.offerings.name", "Name") }),
+          generalMode === "view" && !isNew ? /* @__PURE__ */ jsx("p", { className: "text-sm py-2", children: form.name || "\u2014" }) : /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: form.name,
+              onChange: (e) => setForm({ ...form, name: e.target.value }),
+              className: "w-full rounded-md border px-3 py-2 text-sm"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium mb-1", children: t("cpq.offerings.lifecycleStatus", "Lifecycle Status") }),
+          generalMode === "view" && !isNew ? /* @__PURE__ */ jsx("div", { className: "py-2", children: /* @__PURE__ */ jsx(Tag, { variant: lifecycleStatusMap[form.lifecycleStatus] ?? "neutral", dot: true, children: formatStatusLabel(form.lifecycleStatus) }) }) : /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: form.lifecycleStatus,
+              onChange: (e) => setForm({ ...form, lifecycleStatus: e.target.value }),
+              className: "w-full rounded-md border px-3 py-2 text-sm",
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "draft", children: "Draft" }),
+                /* @__PURE__ */ jsx("option", { value: "active", children: "Active" }),
+                /* @__PURE__ */ jsx("option", { value: "deprecated", children: "Deprecated" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium mb-1", children: t("cpq.offerings.isActive", "Is Active?") }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center h-[38px]", children: generalMode === "view" && !isNew ? /* @__PURE__ */ jsx(Tag, { variant: form.isActive ? "success" : "neutral", dot: true, children: form.isActive ? t("common.yes", "Yes") : t("common.no", "No") }) : /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: form.isActive,
+              onChange: (e) => setForm({ ...form, isActive: e.target.checked }),
+              className: "rounded border"
+            }
+          ) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium mb-1", children: t("cpq.offerings.description", "Description") }),
+        generalMode === "view" && !isNew ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-2 whitespace-pre-wrap", children: form.description || "\u2014" }) : /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            value: form.description ?? "",
+            onChange: (e) => setForm({ ...form, description: e.target.value }),
+            rows: 3,
+            className: "w-full rounded-md border px-3 py-2 text-sm"
+          }
+        )
+      ] }),
+      designTimeAttrs.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium", children: "Design-Time Values" }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: designTimeAttrs.map((attr) => {
+          const value = designTimeValues[attr.code];
+          const isViewing = generalMode === "view" && !isNew;
+          const optionLabel = (attr.attributeType === "select" || attr.attributeType === "enum") && attr.options ? attr.options.find((o) => o.value === value)?.label : void 0;
+          return /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { className: "block text-xs font-medium mb-1", children: [
+              attr.name,
+              attr.isRequired && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-0.5", children: "*" })
+            ] }),
+            isViewing ? /* @__PURE__ */ jsx("p", { className: "text-sm py-2", children: value == null || value === "" ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2014" }) : attr.attributeType === "boolean" ? /* @__PURE__ */ jsx(Tag, { variant: value ? "success" : "neutral", dot: true, children: value ? t("common.yes", "Yes") : t("common.no", "No") }) : optionLabel ?? String(value) }) : (attr.attributeType === "select" || attr.attributeType === "enum") && attr.options ? /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: String(value ?? ""),
+                onChange: (e) => setDesignTimeValues({ ...designTimeValues, [attr.code]: e.target.value || null }),
+                className: "w-full rounded-md border px-2 py-1.5 text-sm",
+                children: [
+                  /* @__PURE__ */ jsxs("option", { value: "", children: [
+                    "Select ",
+                    attr.name,
+                    "..."
+                  ] }),
+                  attr.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+                ]
+              }
+            ) : attr.attributeType === "number" ? /* @__PURE__ */ jsx(
+              NumberInput,
+              {
+                value: typeof value === "number" ? value : null,
+                onChange: (n) => setDesignTimeValues({ ...designTimeValues, [attr.code]: n })
+              }
+            ) : attr.attributeType === "boolean" ? /* @__PURE__ */ jsx("div", { className: "pt-1", children: /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5 text-sm", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: !!value,
+                  onChange: (e) => setDesignTimeValues({ ...designTimeValues, [attr.code]: e.target.checked }),
+                  className: "rounded border"
+                }
+              ),
+              attr.name
+            ] }) }) : /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: String(value ?? ""),
+                onChange: (e) => setDesignTimeValues({ ...designTimeValues, [attr.code]: e.target.value || null }),
+                className: "w-full rounded-md border px-2 py-1.5 text-sm",
+                placeholder: attr.helpText ?? void 0
+              }
+            ),
+            attr.helpText && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: attr.helpText })
+          ] }, attr.code);
+        }) })
+      ] }),
+      !(generalMode === "view" && !isNew) && /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            onClick: saveOffering,
+            disabled: saving || !form.code || !form.name || isNew && !form.specId,
+            children: saving ? t("common.saving", "Saving...") : t("common.save", "Save")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: () => {
+              if (isNew) {
+                router.push("/backend/cpq/offerings");
+                return;
+              }
+              if (formSnapshot) setForm(formSnapshot);
+              if (designTimeSnapshot) setDesignTimeValues(designTimeSnapshot);
+              setFormSnapshot(null);
+              setDesignTimeSnapshot(null);
+              setGeneralMode("view");
+            },
+            children: t("common.cancel", "Cancel")
+          }
+        )
+      ] })
+    ] }),
+    tab === "charges" && !isNew && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => startEditCharge(),
+          className: "inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90",
+          children: t("cpq.offerings.addCharge", "Add Charge")
+        }
+      ) }),
+      editingCharge && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4 space-y-3", children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-medium text-sm", children: editingCharge.id ? "Edit Charge" : "New Charge" }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-1", children: "Code" }),
+            /* @__PURE__ */ jsx("input", { type: "text", value: editingCharge.code, onChange: (e) => setEditingCharge({ ...editingCharge, code: e.target.value }), placeholder: "e.g. mrc-monthly", className: "w-full rounded-md border px-2 py-1.5 text-sm" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-1", children: "Name" }),
+            /* @__PURE__ */ jsx("input", { type: "text", value: editingCharge.name, onChange: (e) => setEditingCharge({ ...editingCharge, name: e.target.value }), className: "w-full rounded-md border px-2 py-1.5 text-sm" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-1", children: "Charge Type" }),
+            /* @__PURE__ */ jsxs("select", { value: editingCharge.chargeType, onChange: (e) => setEditingCharge({ ...editingCharge, chargeType: e.target.value }), className: "w-full rounded-md border px-2 py-1.5 text-sm", children: [
+              /* @__PURE__ */ jsx("option", { value: "mrc", children: "MRC (Monthly Recurring)" }),
+              /* @__PURE__ */ jsx("option", { value: "nrc", children: "NRC (Non-Recurring)" }),
+              /* @__PURE__ */ jsx("option", { value: "usage", children: "Usage" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-1", children: "Pricing Method" }),
+            /* @__PURE__ */ jsxs("select", { value: editingCharge.pricingMethod, onChange: (e) => {
+              const method = e.target.value;
+              if (method === "flat") {
+                setEditingCharge({ ...editingCharge, pricingMethod: method, pricingTableId: null, priceColumnKey: null, quantityAttributeCode: null });
+              } else {
+                setEditingCharge({ ...editingCharge, pricingMethod: method, fixedPrice: null });
+              }
+            }, className: "w-full rounded-md border px-2 py-1.5 text-sm", children: [
+              /* @__PURE__ */ jsx("option", { value: "flat", children: "Flat Price" }),
+              /* @__PURE__ */ jsx("option", { value: "per_unit", children: "Per Unit (table lookup)" }),
+              /* @__PURE__ */ jsx("option", { value: "tiered", children: "Tiered (table lookup)" })
+            ] })
+          ] }),
+          editingCharge.pricingMethod === "flat" || editingCharge.pricingMethod === "fixed" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("label", { className: "block text-xs font-medium mb-1", children: [
+                "Fixed Price ",
+                /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+              ] }),
+              /* @__PURE__ */ jsx("input", { type: "text", value: editingCharge.fixedPrice ?? "", onChange: (e) => setEditingCharge({ ...editingCharge, fixedPrice: e.target.value || null }), placeholder: "0.00", className: "w-full rounded-md border px-2 py-1.5 text-sm" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("label", { className: "block text-xs font-medium mb-1", children: [
+                "Currency ",
+                /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+              ] }),
+              /* @__PURE__ */ jsx("input", { type: "text", value: editingCharge.currencyCode ?? "USD", onChange: (e) => setEditingCharge({ ...editingCharge, currencyCode: e.target.value || null }), className: "w-full rounded-md border px-2 py-1.5 text-sm" })
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("label", { className: "block text-xs font-medium mb-1", children: [
+                "Pricing Table ",
+                /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+              ] }),
+              /* @__PURE__ */ jsxs("select", { value: editingCharge.pricingTableId ?? "", onChange: (e) => setEditingCharge({ ...editingCharge, pricingTableId: e.target.value || null, priceColumnKey: null }), className: "w-full rounded-md border px-2 py-1.5 text-sm", children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "Select table..." }),
+                pricingTables.map((pt) => /* @__PURE__ */ jsxs("option", { value: pt.id, children: [
+                  pt.name,
+                  " (",
+                  pt.code,
+                  ")"
+                ] }, pt.id))
+              ] }),
+              pricingTables.length === 0 && /* @__PURE__ */ jsxs("p", { className: "text-xs text-warning mt-0.5", children: [
+                "No pricing tables yet \u2014",
+                " ",
+                /* @__PURE__ */ jsx("a", { href: "/backend/cpq/pricing-tables", className: "text-primary hover:underline", children: "create one" }),
+                " ",
+                "before using ",
+                editingCharge.pricingMethod,
+                " pricing."
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("label", { className: "block text-xs font-medium mb-1", children: [
+                "Price Column ",
+                /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+              ] }),
+              /* @__PURE__ */ jsxs("select", { value: editingCharge.priceColumnKey ?? "", onChange: (e) => setEditingCharge({ ...editingCharge, priceColumnKey: e.target.value || null }), className: "w-full rounded-md border px-2 py-1.5 text-sm", disabled: !selectedPricingTable, children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "Select column..." }),
+                selectedPricingTable?.priceColumns.map((col) => /* @__PURE__ */ jsx("option", { value: col.key, children: col.label }, col.key))
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("label", { className: "block text-xs font-medium mb-1", children: [
+                "Quantity Attribute ",
+                /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+              ] }),
+              /* @__PURE__ */ jsxs("select", { value: editingCharge.quantityAttributeCode ?? "", onChange: (e) => setEditingCharge({ ...editingCharge, quantityAttributeCode: e.target.value || null }), className: "w-full rounded-md border px-2 py-1.5 text-sm", children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "Select attribute..." }),
+                attributes.filter((a) => a.attributeType === "number").map((a) => /* @__PURE__ */ jsxs("option", { value: a.code, children: [
+                  a.name,
+                  " (",
+                  a.code,
+                  ")"
+                ] }, a.code))
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Attribute whose value drives the quantity for pricing" }),
+              attributes.filter((a) => a.attributeType === "number").length === 0 && form.specId && /* @__PURE__ */ jsxs("p", { className: "text-xs text-warning mt-0.5", children: [
+                "Spec has no number attributes \u2014",
+                " ",
+                /* @__PURE__ */ jsx("a", { href: `/backend/cpq/specifications/${form.specId}`, className: "text-primary hover:underline", children: "add one to the spec" }),
+                " ",
+                "first."
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-1", children: "Sort Order" }),
+            /* @__PURE__ */ jsx(
+              NumberInput,
+              {
+                integer: true,
+                value: editingCharge.sortOrder,
+                onChange: (n) => setEditingCharge({ ...editingCharge, sortOrder: n ?? 0 })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-1", children: "Description" }),
+          /* @__PURE__ */ jsx("input", { type: "text", value: editingCharge.description ?? "", onChange: (e) => setEditingCharge({ ...editingCharge, description: e.target.value || null }), className: "w-full rounded-md border px-2 py-1.5 text-sm" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-end gap-4", children: /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5 text-sm", children: [
+          /* @__PURE__ */ jsx("input", { type: "checkbox", checked: editingCharge.isActive, onChange: (e) => setEditingCharge({ ...editingCharge, isActive: e.target.checked }), className: "rounded border" }),
+          "Active"
+        ] }) }),
+        (() => {
+          const missing = chargeMissingFields(editingCharge);
+          const blocked = saving || !editingCharge.code || !editingCharge.name || missing.length > 0;
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            missing.length > 0 && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
+              "Missing required field",
+              missing.length > 1 ? "s" : "",
+              " for ",
+              editingCharge.pricingMethod,
+              " pricing: ",
+              missing.join(", ")
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx("button", { onClick: saveCharge, disabled: blocked, className: "inline-flex items-center rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed", children: saving ? "Saving..." : "Save" }),
+              /* @__PURE__ */ jsx("button", { onClick: () => setEditingCharge(null), className: "inline-flex items-center rounded-md border px-3 py-1.5 text-sm font-medium hover:bg-muted", children: "Cancel" })
+            ] })
+          ] });
+        })()
+      ] }),
+      charges.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground", children: "No charges defined. Add recurring, non-recurring, or usage charges to this offering." }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg border", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b bg-muted/50", children: [
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: "Code" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: "Name" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: "Type" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: "Pricing" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: "Price" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: "Active" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-right font-medium", children: "Actions" })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: charges.map((charge) => {
+          const incomplete = !isChargeComplete(charge);
+          const tableRef = charge.pricingTableId ? pricingTables.find((pt) => pt.id === charge.pricingTableId) : null;
+          const qtyAttr = charge.quantityAttributeCode ? attributes.find((a) => a.code === charge.quantityAttributeCode) : null;
+          const isFlat = charge.pricingMethod === "flat" || charge.pricingMethod === "fixed";
+          return /* @__PURE__ */ jsxs("tr", { className: "border-b", children: [
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-3 font-mono text-xs", children: charge.code }),
+            /* @__PURE__ */ jsxs("td", { className: "px-4 py-3", children: [
+              charge.name,
+              incomplete && /* @__PURE__ */ jsx(Tag, { variant: "error", className: "ml-2 px-2 text-[10px]", dot: true, children: "Incomplete" })
+            ] }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(Tag, { variant: chargeTypeMap[charge.chargeType] ?? "neutral", className: "px-2 text-xs", children: charge.chargeType.toUpperCase() }) }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-xs", children: PRICING_METHOD_LABELS[charge.pricingMethod] ?? charge.pricingMethod }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-xs", children: isFlat ? charge.fixedPrice != null ? `${charge.currencyCode ?? "USD"} ${charge.fixedPrice}` : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2014" }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Table:" }),
+                " ",
+                tableRef ? `${tableRef.name} \u2192 ${charge.priceColumnKey ?? "?"}` : /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "missing" })
+              ] }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\xD7 Qty:" }),
+                " ",
+                qtyAttr ? `${qtyAttr.name} (${qtyAttr.code})` : /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "missing" })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: charge.isActive ? "Yes" : "No" }),
+            /* @__PURE__ */ jsxs("td", { className: "px-4 py-3 text-right", children: [
+              /* @__PURE__ */ jsx("button", { onClick: () => startEditCharge(charge), className: "text-xs text-primary hover:underline mr-2", children: "Edit" }),
+              /* @__PURE__ */ jsx("button", { onClick: () => deleteCharge(charge.id), className: "text-xs text-destructive hover:underline", children: "Delete" })
+            ] })
+          ] }, charge.id);
+        }) })
+      ] }) })
+    ] }),
+    tab === "components" && !isNew && form.offeringType === "bundle" && /* @__PURE__ */ jsx("div", { className: "space-y-4", children: bundleSlots.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground", children: "No bundle slots defined on this specification. Add slots on the specification first." }) : /* @__PURE__ */ jsx(Fragment, { children: bundleSlots.map((slot) => {
+      const slotComponents = components.filter((c) => c.slotId === slot.id);
+      return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card overflow-hidden", children: [
+        /* @__PURE__ */ jsxs("div", { className: "bg-muted/50 px-4 py-3 border-b flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: slot.name }),
+            /* @__PURE__ */ jsx(Tag, { variant: "info", className: "ml-2 px-2 text-[10px]", children: slot.componentGroup }),
+            /* @__PURE__ */ jsxs("span", { className: "ml-2 text-xs text-muted-foreground", children: [
+              slot.cardinalityMin,
+              "..",
+              slot.cardinalityMax ?? "\u221E"
+            ] }),
+            slot.targetSpec && /* @__PURE__ */ jsxs("span", { className: "ml-2 text-xs text-muted-foreground", children: [
+              "\u2192 ",
+              slot.targetSpec.name
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: async () => {
+                setAddingComponent({ slotId: slot.id, childOfferingId: "", isDefault: false });
+                if (!slotOfferings[slot.targetSpecId]) {
+                  const res = await fetch(`/api/cpq/product-offerings?specId=${encodeURIComponent(slot.targetSpecId)}&pageSize=100`);
+                  if (res.ok) {
+                    const d = await res.json();
+                    setSlotOfferings((prev) => ({ ...prev, [slot.targetSpecId]: d.items ?? [] }));
+                  }
+                }
+              },
+              className: "inline-flex items-center justify-center rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90",
+              children: "+ Add Component"
+            }
+          )
+        ] }),
+        addingComponent?.slotId === slot.id && /* @__PURE__ */ jsxs("div", { className: "p-4 border-b bg-muted/20 space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "col-span-2", children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-1", children: "Component Offering" }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  value: addingComponent.childOfferingId,
+                  onChange: (e) => setAddingComponent({ ...addingComponent, childOfferingId: e.target.value }),
+                  className: "w-full rounded-md border px-3 py-2 text-sm",
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "", children: "\u2014 Select offering \u2014" }),
+                    (slotOfferings[slot.targetSpecId] ?? []).map((o) => /* @__PURE__ */ jsxs("option", { value: o.id, children: [
+                      o.name,
+                      " (",
+                      o.code,
+                      ")",
+                      o.offeringType === "bundle" ? " [bundle]" : ""
+                    ] }, o.id))
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-1", children: "Default?" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center h-[38px]", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: addingComponent.isDefault,
+                    onChange: (e) => setAddingComponent({ ...addingComponent, isDefault: e.target.checked }),
+                    className: "rounded border"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: "Pre-selected in quote" })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                disabled: saving || !addingComponent.childOfferingId,
+                onClick: async () => {
+                  setSaving(true);
+                  setError(null);
+                  try {
+                    const res = await fetch("/api/cpq/offering-components", {
+                      method: "POST",
+                      headers: { "Content-Type": "application/json" },
+                      body: JSON.stringify({
+                        offeringId,
+                        slotId: addingComponent.slotId,
+                        childOfferingId: addingComponent.childOfferingId,
+                        isDefault: addingComponent.isDefault
+                      })
+                    });
+                    if (!res.ok) {
+                      const d = await res.json();
+                      setError(d.error ?? "Failed to add component");
+                      return;
+                    }
+                    setAddingComponent(null);
+                    const compRes = await fetch(`/api/cpq/offering-components?offeringId=${offeringId}`);
+                    if (compRes.ok) {
+                      const d = await compRes.json();
+                      setComponents(d.items ?? []);
+                    }
+                  } catch {
+                    setError("Failed to add component");
+                  } finally {
+                    setSaving(false);
+                  }
+                },
+                className: "inline-flex items-center justify-center rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50",
+                children: saving ? "Adding..." : "Add"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setAddingComponent(null),
+                className: "inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-xs font-medium hover:bg-muted",
+                children: "Cancel"
+              }
+            )
+          ] })
+        ] }),
+        slotComponents.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "p-4 text-center text-xs text-muted-foreground", children: [
+          "No components assigned to this slot",
+          slot.cardinalityMin > 0 && /* @__PURE__ */ jsxs("span", { className: "ml-1 text-status-warning-text font-medium", children: [
+            "(required: min ",
+            slot.cardinalityMin,
+            ")"
+          ] })
+        ] }) : /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b bg-muted/30", children: [
+            /* @__PURE__ */ jsx("th", { className: "px-4 py-2 text-left text-xs font-medium", children: "Offering" }),
+            /* @__PURE__ */ jsx("th", { className: "px-4 py-2 text-left text-xs font-medium", children: "Code" }),
+            /* @__PURE__ */ jsx("th", { className: "px-4 py-2 text-left text-xs font-medium", children: "Type" }),
+            /* @__PURE__ */ jsx("th", { className: "px-4 py-2 text-left text-xs font-medium", children: "Default" }),
+            /* @__PURE__ */ jsx("th", { className: "px-4 py-2 text-right text-xs font-medium", children: "Actions" })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: slotComponents.map((comp) => /* @__PURE__ */ jsxs("tr", { className: "border-b last:border-0", children: [
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-2.5 font-medium", children: comp.childOffering?.name ?? "Unknown" }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-2.5 text-muted-foreground text-xs", children: comp.childOffering?.code ?? "\u2014" }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-2.5", children: comp.childOffering?.offeringType === "bundle" ? /* @__PURE__ */ jsx(Tag, { variant: "brand", className: "px-2 text-[10px]", children: "bundle" }) : /* @__PURE__ */ jsx(Tag, { variant: "neutral", className: "px-2 text-[10px]", children: "simple" }) }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-2.5", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: async () => {
+                  try {
+                    const res = await fetch("/api/cpq/offering-components", {
+                      method: "PUT",
+                      headers: { "Content-Type": "application/json" },
+                      body: JSON.stringify({ id: comp.id, isDefault: !comp.isDefault })
+                    });
+                    if (res.ok) {
+                      setComponents((prev) => prev.map((c) => c.id === comp.id ? { ...c, isDefault: !c.isDefault } : c));
+                    }
+                  } catch {
+                  }
+                },
+                className: "cursor-pointer",
+                children: /* @__PURE__ */ jsx(Tag, { variant: comp.isDefault ? "success" : "neutral", className: "px-2 text-[10px]", children: comp.isDefault ? "Yes" : "No" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-2.5 text-right", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: async () => {
+                  if (!confirm("Remove this component from the bundle?")) return;
+                  try {
+                    const res = await fetch("/api/cpq/offering-components", {
+                      method: "DELETE",
+                      headers: { "Content-Type": "application/json" },
+                      body: JSON.stringify({ id: comp.id })
+                    });
+                    if (res.ok) {
+                      setComponents((prev) => prev.filter((c) => c.id !== comp.id));
+                    } else {
+                      const d = await res.json();
+                      setError(d.error ?? "Failed to remove");
+                    }
+                  } catch {
+                    setError("Failed to remove component");
+                  }
+                },
+                className: "text-xs text-destructive hover:underline",
+                children: "Remove"
+              }
+            ) })
+          ] }, comp.id)) })
+        ] })
+      ] }, slot.id);
+    }) }) })
+  ] });
+}
+export {
+  OfferingDetailPage as default
+};
+//# sourceMappingURL=page.js.map