@dainamite/cpq 0.2.2

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

@@ -0,0 +1,1399 @@
+"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 { Tag } from "@open-mercato/ui/primitives/tag";
+import { Alert } from "@open-mercato/ui/primitives/alert";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { NumberInput } from "../../../../components/NumberInput.js";
+import {
+  formatStatusLabel,
+  lifecycleStatusMap,
+  specificationLifecycleStatusMap
+} from "../../../../components/statusMaps.js";
+import { DependsOnRulesEditor } from "./DependsOnRulesEditor.js";
+const EMPTY_SPEC = {
+  code: "",
+  name: "",
+  description: "",
+  specType: "simple",
+  isAssetizable: false,
+  lifecycleStatus: "draft",
+  version: 1,
+  effectiveFrom: null,
+  effectiveTo: null,
+  isActive: true
+};
+const EMPTY_SLOT = {
+  targetSpecId: "",
+  componentGroup: "",
+  name: "",
+  description: "",
+  cardinalityMin: 0,
+  cardinalityMax: null,
+  sortOrder: 0
+};
+const EMPTY_ATTRIBUTE = {
+  code: "",
+  name: "",
+  attributeType: "text",
+  resolutionTime: "run_time",
+  options: null,
+  constraints: null,
+  referenceEntity: null,
+  referenceFilter: null,
+  dependsOn: null,
+  defaultValue: null,
+  helpText: null,
+  sortOrder: 0,
+  isRequired: true,
+  isActive: true
+};
+const EMPTY_OFFERING = {
+  code: "",
+  name: "",
+  description: null,
+  offeringType: "simple",
+  designTimeValues: {},
+  lifecycleStatus: "draft",
+  isActive: true
+};
+const EMPTY_CHARGE = {
+  code: "",
+  name: "",
+  description: null,
+  chargeType: "mrc",
+  pricingMethod: "flat",
+  pricingTableId: null,
+  priceColumnKey: null,
+  fixedPrice: null,
+  currencyCode: null,
+  quantityAttributeCode: null,
+  applicabilityCondition: null,
+  sortOrder: 0,
+  isActive: true
+};
+const EMPTY_RELATIONSHIP = {
+  sourceSpecId: "",
+  targetSpecId: "",
+  relationshipType: "requires",
+  cardinalityMin: 0,
+  cardinalityMax: null,
+  condition: null,
+  isActive: true
+};
+function SpecificationDetailPage(props) {
+  const t = useT();
+  const router = useRouter();
+  const urlParams = useParams();
+  const specId = props.params?.id ?? urlParams?.id;
+  const isNew = specId === "new";
+  const [tab, setTab] = React.useState("general");
+  const [form, setForm] = React.useState(EMPTY_SPEC);
+  const [attributes, setAttributes] = React.useState([]);
+  const [offerings, setOfferings] = React.useState([]);
+  const [relationships, setRelationships] = React.useState([]);
+  const [bundleSlots, setBundleSlots] = React.useState([]);
+  const [allSpecs, setAllSpecs] = React.useState([]);
+  const [loading, setLoading] = React.useState(!isNew);
+  const [saving, setSaving] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [editingAttr, setEditingAttr] = React.useState(null);
+  const [editingOffering, setEditingOffering] = React.useState(null);
+  const [editingRel, setEditingRel] = React.useState(null);
+  const [editingSlot, setEditingSlot] = React.useState(null);
+  const [editingOptions, setEditingOptions] = React.useState([]);
+  const [editingDtValues, setEditingDtValues] = React.useState({});
+  const [selectedOfferingIds, setSelectedOfferingIds] = React.useState(/* @__PURE__ */ new Set());
+  const [offeringCharges, setOfferingCharges] = React.useState({});
+  const [chargeFormOpen, setChargeFormOpen] = React.useState(false);
+  const [chargeForm, setChargeForm] = React.useState({ code: "", name: "", description: "", chargeType: "mrc", pricingMethod: "flat" });
+  const [chargePrices, setChargePrices] = React.useState({});
+  const [chargePricingTableId, setChargePricingTableId] = React.useState(null);
+  const [chargePriceColumnKey, setChargePriceColumnKey] = React.useState(null);
+  const [chargeCurrency, setChargeCurrency] = React.useState("USD");
+  const [pricingTables, setPricingTables] = React.useState([]);
+  const [conditionJson, setConditionJson] = React.useState("null");
+  const [dependsOnAttrCode, setDependsOnAttrCode] = React.useState("");
+  const [dependsOnEffect, setDependsOnEffect] = React.useState("filter_options");
+  const [dependsOnEnabled, setDependsOnEnabled] = React.useState(false);
+  const [dependsOnRules, setDependsOnRules] = React.useState([]);
+  const [generalMode, setGeneralMode] = React.useState(isNew ? "edit" : "view");
+  const [formSnapshot, setFormSnapshot] = React.useState(null);
+  React.useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      try {
+        if (isNew) {
+          return;
+        }
+        const specsRes = await fetch("/api/cpq/product-specifications?pageSize=200");
+        if (specsRes.ok) {
+          const d = await specsRes.json();
+          if (!cancelled) setAllSpecs(d.items ?? []);
+        }
+        const res = await fetch(`/api/cpq/product-specifications?id=${encodeURIComponent(specId)}`);
+        if (!res.ok) {
+          if (!cancelled) setError("Failed to load specification");
+          return;
+        }
+        const spec = await res.json();
+        if (!cancelled) {
+          setForm({
+            code: spec.code,
+            name: spec.name,
+            description: spec.description ?? "",
+            specType: spec.specType ?? "simple",
+            isAssetizable: spec.isAssetizable ?? false,
+            lifecycleStatus: spec.lifecycleStatus,
+            version: spec.version,
+            effectiveFrom: spec.effectiveFrom,
+            effectiveTo: spec.effectiveTo,
+            isActive: spec.isActive
+          });
+          setAttributes(spec.attributes ?? []);
+          setOfferings(spec.offerings ?? []);
+          setRelationships(spec.relationships ?? []);
+          setBundleSlots(spec.slots ?? []);
+        }
+      } catch (err) {
+        console.error("Failed to load", err);
+        if (!cancelled) setError("Failed to load");
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [specId, isNew]);
+  const saveSpec = async () => {
+    setSaving(true);
+    setError(null);
+    try {
+      const { ...formData } = form;
+      const payload = isNew ? { ...formData, description: formData.description || null } : { id: specId, ...formData, description: formData.description || null };
+      const res = await fetch("/api/cpq/product-specifications", {
+        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/specifications/${saved.id}`);
+      } else {
+        setForm({
+          code: saved.code,
+          name: saved.name,
+          description: saved.description ?? "",
+          specType: saved.specType ?? form.specType,
+          isAssetizable: saved.isAssetizable ?? form.isAssetizable,
+          lifecycleStatus: saved.lifecycleStatus,
+          version: saved.version,
+          effectiveFrom: saved.effectiveFrom,
+          effectiveTo: saved.effectiveTo,
+          isActive: saved.isActive
+        });
+        setFormSnapshot(null);
+        setGeneralMode("view");
+      }
+    } catch {
+      setError("Failed to save");
+    } finally {
+      setSaving(false);
+    }
+  };
+  const deleteSpec = async () => {
+    if (!confirm(t("cpq.specifications.confirmDelete", "Delete this specification and all its offerings, attributes and relationships?"))) return;
+    try {
+      const res = await fetch("/api/cpq/product-specifications", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id: specId })
+      });
+      if (res.ok) {
+        router.push("/backend/cpq/specifications");
+      } else {
+        const d = await res.json();
+        setError(d.error ?? "Failed to delete");
+      }
+    } catch {
+      setError("Failed to delete");
+    }
+  };
+  const saveAttribute = async () => {
+    if (!editingAttr) return;
+    setSaving(true);
+    setError(null);
+    try {
+      const options = editingAttr.attributeType === "select" || editingAttr.attributeType === "multi-select" ? editingOptions.filter((o) => o.value.trim() !== "") : null;
+      const dependsOn = dependsOnEnabled && dependsOnAttrCode ? {
+        attributeCode: dependsOnAttrCode,
+        effect: dependsOnEffect,
+        rules: dependsOnRules.filter((r) => r.when.trim().length > 0)
+      } : null;
+      const isEdit = !!editingAttr.id;
+      const payload = {
+        ...editingAttr,
+        options,
+        dependsOn,
+        specId
+      };
+      const res = await fetch("/api/cpq/product-attributes", {
+        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 attribute");
+        return;
+      }
+      const saved = await res.json();
+      if (isEdit) {
+        setAttributes((prev) => prev.map((a) => a.id === saved.id ? saved : a));
+      } else {
+        setAttributes((prev) => [...prev, saved]);
+      }
+      setEditingAttr(null);
+    } catch {
+      setError("Failed to save attribute");
+    } finally {
+      setSaving(false);
+    }
+  };
+  const deleteAttribute = async (attrId) => {
+    if (!confirm("Delete this attribute?")) return;
+    try {
+      const res = await fetch("/api/cpq/product-attributes", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id: attrId })
+      });
+      if (res.ok) setAttributes((prev) => prev.filter((a) => a.id !== attrId));
+    } catch {
+      setError("Failed to delete attribute");
+    }
+  };
+  const startEditAttr = (attr) => {
+    const editing = attr ? { ...attr } : { ...EMPTY_ATTRIBUTE };
+    if (editing.attributeType === "enum") editing.attributeType = "select";
+    setEditingAttr(editing);
+    setEditingOptions(editing.options ? [...editing.options] : []);
+    const dep = editing.dependsOn;
+    setDependsOnEnabled(!!dep);
+    setDependsOnAttrCode(dep?.attributeCode ?? "");
+    setDependsOnEffect(dep?.effect ?? "filter_options");
+    setDependsOnRules(Array.isArray(dep?.rules) ? dep.rules : []);
+  };
+  const saveOffering = async () => {
+    if (!editingOffering) return;
+    setSaving(true);
+    setError(null);
+    try {
+      const isEdit = !!editingOffering.id;
+      const payload = {
+        ...editingOffering,
+        designTimeValues: editingDtValues,
+        specId
+      };
+      const res = await fetch("/api/cpq/product-offerings", {
+        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 offering");
+        return;
+      }
+      const saved = await res.json();
+      if (isEdit) {
+        setOfferings((prev) => prev.map((o) => o.id === saved.id ? saved : o));
+      } else {
+        setOfferings((prev) => [...prev, saved]);
+      }
+      setEditingOffering(null);
+    } catch {
+      setError("Failed to save offering");
+    } finally {
+      setSaving(false);
+    }
+  };
+  const deleteOffering = async (offeringId) => {
+    if (!confirm("Delete this offering?")) 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) setOfferings((prev) => prev.filter((o) => o.id !== offeringId));
+    } catch {
+      setError("Failed to delete offering");
+    }
+  };
+  const startEditOffering = (offering) => {
+    const editing = offering ? { ...offering } : { ...EMPTY_OFFERING };
+    setEditingOffering(editing);
+    setEditingDtValues(editing.designTimeValues ? { ...editing.designTimeValues } : {});
+  };
+  const loadAllOfferingCharges = async () => {
+    try {
+      const results = await Promise.all(
+        offerings.map((o) => fetch(`/api/cpq/product-offerings?id=${encodeURIComponent(o.id)}`).then((r) => r.ok ? r.json() : null))
+      );
+      const chargeMap = {};
+      results.forEach((data, idx) => {
+        if (data) chargeMap[offerings[idx].id] = data.charges ?? [];
+      });
+      setOfferingCharges(chargeMap);
+    } catch {
+      console.error("Failed to load charges");
+    }
+  };
+  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 toggleOfferingSelection = (id) => {
+    setSelectedOfferingIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  const toggleAllOfferings = () => {
+    if (selectedOfferingIds.size === offerings.length) {
+      setSelectedOfferingIds(/* @__PURE__ */ new Set());
+    } else {
+      setSelectedOfferingIds(new Set(offerings.map((o) => o.id)));
+    }
+  };
+  const openChargeForm = () => {
+    setChargeForm({ code: "", name: "", description: "", chargeType: "mrc", pricingMethod: "flat" });
+    setChargePrices({});
+    setChargePricingTableId(null);
+    setChargePriceColumnKey(null);
+    setChargeCurrency("USD");
+    setChargeFormOpen(true);
+    loadPricingTables();
+  };
+  const saveChargesForSelected = async () => {
+    const targets = offerings.filter((o) => selectedOfferingIds.has(o.id));
+    if (!targets.length || !chargeForm.code || !chargeForm.name) return;
+    setSaving(true);
+    setError(null);
+    try {
+      for (const offering of targets) {
+        const chargeCode = targets.length > 1 ? `${offering.code}--${chargeForm.code}` : chargeForm.code;
+        const payload = {
+          offeringId: offering.id,
+          code: chargeCode,
+          name: chargeForm.name,
+          description: chargeForm.description || null,
+          chargeType: chargeForm.chargeType,
+          pricingMethod: chargeForm.pricingMethod === "flat" ? "flat" : chargeForm.pricingMethod,
+          isActive: true,
+          sortOrder: 0
+        };
+        if (chargeForm.pricingMethod === "flat") {
+          payload.fixedPrice = chargePrices[offering.id] || null;
+          payload.currencyCode = chargeCurrency;
+        } else {
+          payload.pricingTableId = chargePricingTableId;
+          payload.priceColumnKey = chargePriceColumnKey;
+        }
+        const res = await fetch("/api/cpq/product-charges", {
+          method: "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 for ${offering.name}`);
+          break;
+        }
+      }
+      setChargeFormOpen(false);
+      await loadAllOfferingCharges();
+    } catch {
+      setError("Failed to save charges");
+    } finally {
+      setSaving(false);
+    }
+  };
+  const deleteCharge = async (offeringId, 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) {
+        setOfferingCharges((prev) => ({
+          ...prev,
+          [offeringId]: (prev[offeringId] ?? []).filter((c) => c.id !== chargeId)
+        }));
+      }
+    } catch {
+      setError("Failed to delete charge");
+    }
+  };
+  const selectedPricingTableRef = chargePricingTableId ? pricingTables.find((pt) => pt.id === chargePricingTableId) : null;
+  const saveRelationship = async () => {
+    if (!editingRel) return;
+    setSaving(true);
+    setError(null);
+    try {
+      let parsedCondition = editingRel.condition;
+      try {
+        parsedCondition = conditionJson === "null" ? null : JSON.parse(conditionJson);
+      } catch {
+      }
+      const isEdit = !!editingRel.id;
+      const payload = {
+        ...editingRel,
+        condition: parsedCondition,
+        sourceSpecId: editingRel.sourceSpecId || specId
+      };
+      const res = await fetch("/api/cpq/product-relationships", {
+        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 relationship");
+        return;
+      }
+      const saved = await res.json();
+      if (isEdit) {
+        setRelationships((prev) => prev.map((r) => r.id === saved.id ? saved : r));
+      } else {
+        setRelationships((prev) => [...prev, saved]);
+      }
+      setEditingRel(null);
+    } catch {
+      setError("Failed to save relationship");
+    } finally {
+      setSaving(false);
+    }
+  };
+  const deleteRelationship = async (relId) => {
+    if (!confirm("Delete this relationship?")) return;
+    try {
+      const res = await fetch("/api/cpq/product-relationships", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id: relId })
+      });
+      if (res.ok) setRelationships((prev) => prev.filter((r) => r.id !== relId));
+    } catch {
+      setError("Failed to delete relationship");
+    }
+  };
+  const startEditRel = (rel) => {
+    const editing = rel ? { ...rel } : { ...EMPTY_RELATIONSHIP, sourceSpecId: specId };
+    setEditingRel(editing);
+    setConditionJson(editing.condition ? JSON.stringify(editing.condition, null, 2) : "null");
+  };
+  const getSpecName = (id) => allSpecs.find((s) => s.id === id)?.name ?? id.slice(0, 8);
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: t("common.loading", "Loading...") });
+  }
+  const designTimeAttrs = attributes.filter((a) => a.resolutionTime === "design_time");
+  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/specifications"),
+            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.specifications.new", "New Specification") : form.name }),
+        !isNew && /* @__PURE__ */ jsx(Tag, { variant: specificationLifecycleStatusMap[form.lifecycleStatus] ?? "neutral", dot: true, children: formatStatusLabel(form.lifecycleStatus) })
+      ] }),
+      !isNew && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        generalMode === "view" && tab === "general" && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            onClick: () => {
+              setFormSnapshot(form);
+              setGeneralMode("edit");
+            },
+            children: t("common.edit", "Edit")
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "destructive", onClick: deleteSpec, 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",
+      "attributes",
+      "offerings",
+      "relationships",
+      ...form.specType === "bundle" ? ["slots"] : []
+    ].map((t_) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => {
+          setTab(t_);
+          if (t_ === "offerings" && offerings.length > 0 && Object.keys(offeringCharges).length === 0) loadAllOfferingCharges();
+        },
+        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_ === "attributes" && `Attributes (${attributes.length})`,
+          t_ === "offerings" && `Offerings (${offerings.length})`,
+          t_ === "relationships" && `Relationships (${relationships.length})`,
+          t_ === "slots" && `Bundle Slots (${bundleSlots.length})`
+        ]
+      },
+      t_
+    )) }),
+    (isNew || tab === "general") && (() => {
+      const isViewing = generalMode === "view" && !isNew;
+      const specTypeLocked = !isNew && (offerings.length > 0 || bundleSlots.length > 0);
+      return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-6 space-y-4", children: [
+        /* @__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.specifications.code", "Code") }),
+            isViewing ? /* @__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-access-port",
+                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.specifications.name", "Name") }),
+            isViewing ? /* @__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.specifications.lifecycleStatus", "Lifecycle Status") }),
+            isViewing ? /* @__PURE__ */ jsx("div", { className: "py-2", children: /* @__PURE__ */ jsx(Tag, { variant: specificationLifecycleStatusMap[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.specifications.isActive", "Is Active?") }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center h-[38px]", children: isViewing ? /* @__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: "Spec Type" }),
+            isViewing ? /* @__PURE__ */ jsx("p", { className: "text-sm py-2", children: form.specType === "bundle" ? "Bundle" : "Simple" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  value: form.specType,
+                  onChange: (e) => setForm({ ...form, specType: e.target.value }),
+                  disabled: specTypeLocked,
+                  className: "w-full rounded-md border px-3 py-2 text-sm disabled:opacity-50",
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "simple", children: "Simple" }),
+                    /* @__PURE__ */ jsx("option", { value: "bundle", children: "Bundle" })
+                  ]
+                }
+              ),
+              specTypeLocked && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "Cannot change after offerings or slots exist" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium mb-1", children: "Is Assetizable?" }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center h-[38px]", children: isViewing ? /* @__PURE__ */ jsx(Tag, { variant: form.isAssetizable ? "warning" : "neutral", dot: true, children: form.isAssetizable ? t("common.yes", "Yes") : t("common.no", "No") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: form.isAssetizable,
+                  onChange: (e) => setForm({ ...form, isAssetizable: e.target.checked }),
+                  className: "rounded border"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: "Creates asset records during fulfilment" })
+            ] }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium mb-1", children: t("cpq.specifications.description", "Description") }),
+          isViewing ? /* @__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"
+            }
+          )
+        ] }),
+        !isNew && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          "Version ",
+          form.version
+        ] }),
+        !isViewing && /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              onClick: saveSpec,
+              disabled: saving || !form.code || !form.name,
+              children: saving ? t("common.saving", "Saving...") : t("common.save", "Save")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: () => {
+                if (isNew) {
+                  router.push("/backend/cpq/specifications");
+                  return;
+                }
+                if (formSnapshot) setForm(formSnapshot);
+                setFormSnapshot(null);
+                setGeneralMode("view");
+              },
+              children: t("common.cancel", "Cancel")
+            }
+          )
+        ] })
+      ] });
+    })(),
+    tab === "attributes" && !isNew && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => startEditAttr(),
+          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.specifications.addAttribute", "Add Attribute")
+        }
+      ) }),
+      editingAttr && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4 space-y-3", children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-medium text-sm", children: editingAttr.id ? "Edit Attribute" : "New Attribute" }),
+        /* @__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: editingAttr.code, onChange: (e) => setEditingAttr({ ...editingAttr, code: 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: "Name" }),
+            /* @__PURE__ */ jsx("input", { type: "text", value: editingAttr.name, onChange: (e) => setEditingAttr({ ...editingAttr, 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: "Type" }),
+            /* @__PURE__ */ jsxs("select", { value: editingAttr.attributeType, onChange: (e) => setEditingAttr({ ...editingAttr, attributeType: e.target.value }), className: "w-full rounded-md border px-2 py-1.5 text-sm", children: [
+              /* @__PURE__ */ jsx("option", { value: "text", children: "Text" }),
+              /* @__PURE__ */ jsx("option", { value: "number", children: "Number" }),
+              /* @__PURE__ */ jsx("option", { value: "boolean", children: "Boolean" }),
+              /* @__PURE__ */ jsx("option", { value: "select", children: "Select" }),
+              /* @__PURE__ */ jsx("option", { value: "multi-select", children: "Multi-Select" }),
+              /* @__PURE__ */ jsx("option", { value: "reference", children: "Reference" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-1", children: "Resolution Time" }),
+            /* @__PURE__ */ jsxs("select", { value: editingAttr.resolutionTime, onChange: (e) => setEditingAttr({ ...editingAttr, resolutionTime: e.target.value }), className: "w-full rounded-md border px-2 py-1.5 text-sm", children: [
+              /* @__PURE__ */ jsx("option", { value: "run_time", children: "Run-time (quoting)" }),
+              /* @__PURE__ */ jsx("option", { value: "design_time", children: "Design-time (offering)" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-1", children: "Sort Order" }),
+            /* @__PURE__ */ jsx(
+              NumberInput,
+              {
+                integer: true,
+                value: editingAttr.sortOrder,
+                onChange: (n) => setEditingAttr({ ...editingAttr, sortOrder: n ?? 0 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-1", children: "Help Text" }),
+            /* @__PURE__ */ jsx("input", { type: "text", value: editingAttr.helpText ?? "", onChange: (e) => setEditingAttr({ ...editingAttr, helpText: e.target.value || null }), className: "w-full rounded-md border px-2 py-1.5 text-sm" })
+          ] }),
+          editingAttr.attributeType === "reference" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-1", children: "Reference Entity" }),
+            /* @__PURE__ */ jsx("input", { type: "text", value: editingAttr.referenceEntity ?? "", onChange: (e) => setEditingAttr({ ...editingAttr, referenceEntity: e.target.value || null }), placeholder: "e.g. CatalogProduct", className: "w-full rounded-md border px-2 py-1.5 text-sm" })
+          ] }) }),
+          (editingAttr.attributeType === "select" || editingAttr.attributeType === "multi-select") && /* @__PURE__ */ jsxs("div", { className: "col-span-3 space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium", children: "Options" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setEditingOptions([...editingOptions, { value: "", label: "" }]),
+                  className: "text-xs text-primary hover:underline",
+                  children: "+ Add option"
+                }
+              )
+            ] }),
+            editingOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground py-2", children: 'No options defined. Click "Add option" to start.' }) : /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: editingOptions.map((opt, idx) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  value: opt.value,
+                  onChange: (e) => {
+                    const next = [...editingOptions];
+                    next[idx] = { ...next[idx], value: e.target.value };
+                    setEditingOptions(next);
+                  },
+                  placeholder: "Value (e.g. aws)",
+                  className: "flex-1 rounded-md border px-2 py-1.5 text-sm"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  value: opt.label,
+                  onChange: (e) => {
+                    const next = [...editingOptions];
+                    next[idx] = { ...next[idx], label: e.target.value };
+                    setEditingOptions(next);
+                  },
+                  placeholder: "Label (e.g. Amazon Web Services)",
+                  className: "flex-1 rounded-md border px-2 py-1.5 text-sm"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setEditingOptions(editingOptions.filter((_, i) => i !== idx)),
+                  className: "text-destructive hover:text-destructive/80 text-sm px-1",
+                  title: "Remove",
+                  children: "\xD7"
+                }
+              )
+            ] }, idx)) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "col-span-3 space-y-2", children: [
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5 text-xs font-medium", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: dependsOnEnabled,
+                  onChange: (e) => setDependsOnEnabled(e.target.checked),
+                  className: "rounded border"
+                }
+              ),
+              "Depends on another attribute"
+            ] }),
+            dependsOnEnabled && (() => {
+              const parentAttr = attributes.find((a) => a.code === dependsOnAttrCode);
+              return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-1", children: "Parent Attribute Code" }),
+                    /* @__PURE__ */ jsxs(
+                      "select",
+                      {
+                        value: dependsOnAttrCode,
+                        onChange: (e) => {
+                          setDependsOnAttrCode(e.target.value);
+                        },
+                        className: "w-full rounded-md border px-2 py-1.5 text-sm",
+                        children: [
+                          /* @__PURE__ */ jsx("option", { value: "", children: "Select attribute..." }),
+                          attributes.filter((a) => editingAttr && a.code !== editingAttr.code).map((a) => /* @__PURE__ */ jsxs("option", { value: a.code, children: [
+                            a.name,
+                            " (",
+                            a.code,
+                            ")"
+                          ] }, a.code))
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-1", children: "Effect" }),
+                    /* @__PURE__ */ jsxs(
+                      "select",
+                      {
+                        value: dependsOnEffect,
+                        onChange: (e) => {
+                          const next = e.target.value;
+                          setDependsOnEffect(next);
+                          setDependsOnRules([]);
+                        },
+                        className: "w-full rounded-md border px-2 py-1.5 text-sm",
+                        children: [
+                          /* @__PURE__ */ jsx("option", { value: "filter_options", children: "Filter options" }),
+                          /* @__PURE__ */ jsx("option", { value: "set_value", children: "Set value" }),
+                          /* @__PURE__ */ jsx("option", { value: "toggle_required", children: "Toggle required" })
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-2", children: "Rules" }),
+                  /* @__PURE__ */ jsx(
+                    DependsOnRulesEditor,
+                    {
+                      effect: dependsOnEffect,
+                      rules: dependsOnRules,
+                      onChange: setDependsOnRules,
+                      parentOptions: parentAttr?.options ?? null,
+                      childOptions: editingOptions.length > 0 ? editingOptions : null
+                    }
+                  )
+                ] })
+              ] });
+            })()
+          ] }),
+          /* @__PURE__ */ jsxs("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: editingAttr.isRequired, onChange: (e) => setEditingAttr({ ...editingAttr, isRequired: e.target.checked }), className: "rounded border" }),
+              "Required"
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5 text-sm", children: [
+              /* @__PURE__ */ jsx("input", { type: "checkbox", checked: editingAttr.isActive, onChange: (e) => setEditingAttr({ ...editingAttr, isActive: e.target.checked }), className: "rounded border" }),
+              "Active"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx("button", { onClick: saveAttribute, disabled: saving, 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", children: saving ? "Saving..." : "Save" }),
+          /* @__PURE__ */ jsx("button", { onClick: () => setEditingAttr(null), className: "inline-flex items-center rounded-md border px-3 py-1.5 text-sm font-medium hover:bg-muted", children: "Cancel" })
+        ] })
+      ] }),
+      attributes.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground", children: "No attributes defined. Add design-time and run-time attributes for this specification." }) : /* @__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: "Resolution" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: "Options" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: "Required" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-right font-medium", children: "Actions" })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: attributes.map((attr) => /* @__PURE__ */ jsxs("tr", { className: "border-b", children: [
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3 font-mono text-xs", children: attr.code }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: attr.name }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: attr.attributeType }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(Tag, { variant: attr.resolutionTime === "design_time" ? "info" : "neutral", className: "px-2 text-xs", children: attr.resolutionTime === "design_time" ? "design" : "run" }) }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-muted-foreground", children: attr.options ? `${attr.options.length} options` : "\u2014" }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: attr.isRequired ? "Yes" : "No" }),
+          /* @__PURE__ */ jsxs("td", { className: "px-4 py-3 text-right", children: [
+            /* @__PURE__ */ jsx("button", { onClick: () => startEditAttr(attr), className: "text-xs text-primary hover:underline mr-2", children: "Edit" }),
+            /* @__PURE__ */ jsx("button", { onClick: () => deleteAttribute(attr.id), className: "text-xs text-destructive hover:underline", children: "Delete" })
+          ] })
+        ] }, attr.id)) })
+      ] }) })
+    ] }),
+    tab === "offerings" && !isNew && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => startEditOffering(),
+          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.specifications.addOffering", "Add Offering")
+        }
+      ) }),
+      editingOffering && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4 space-y-3", children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-medium text-sm", children: editingOffering.id ? "Edit Offering" : "New Offering" }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 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: editingOffering.code, onChange: (e) => setEditingOffering({ ...editingOffering, code: e.target.value }), placeholder: "e.g. gix-cloud-connect-aws", 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: editingOffering.name, onChange: (e) => setEditingOffering({ ...editingOffering, 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: "Lifecycle Status" }),
+            /* @__PURE__ */ jsxs("select", { value: editingOffering.lifecycleStatus, onChange: (e) => setEditingOffering({ ...editingOffering, lifecycleStatus: e.target.value }), className: "w-full rounded-md border px-2 py-1.5 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-xs font-medium mb-1", children: "Is Active?" }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center h-[30px]", children: /* @__PURE__ */ jsx("input", { type: "checkbox", checked: editingOffering.isActive, onChange: (e) => setEditingOffering({ ...editingOffering, isActive: e.target.checked }), className: "rounded border" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-1", children: "Description" }),
+          /* @__PURE__ */ jsx("input", { type: "text", value: editingOffering.description ?? "", onChange: (e) => setEditingOffering({ ...editingOffering, description: e.target.value || null }), className: "w-full rounded-md border px-2 py-1.5 text-sm" })
+        ] }),
+        designTimeAttrs.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium", children: "Design-Time Values" }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: designTimeAttrs.map((attr) => /* @__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: "*" })
+            ] }),
+            (attr.attributeType === "select" || attr.attributeType === "enum") && attr.options ? /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: String(editingDtValues[attr.code] ?? ""),
+                onChange: (e) => setEditingDtValues({ ...editingDtValues, [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 editingDtValues[attr.code] === "number" ? editingDtValues[attr.code] : null,
+                onChange: (n) => setEditingDtValues({ ...editingDtValues, [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: !!editingDtValues[attr.code],
+                  onChange: (e) => setEditingDtValues({ ...editingDtValues, [attr.code]: e.target.checked }),
+                  className: "rounded border"
+                }
+              ),
+              attr.name
+            ] }) }) : /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: String(editingDtValues[attr.code] ?? ""),
+                onChange: (e) => setEditingDtValues({ ...editingDtValues, [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)) })
+        ] }) : /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground py-1", children: "No design-time attributes defined on this specification. All attributes are run-time." }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx("button", { onClick: saveOffering, disabled: saving, 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", children: saving ? "Saving..." : "Save" }),
+          /* @__PURE__ */ jsx("button", { onClick: () => setEditingOffering(null), className: "inline-flex items-center rounded-md border px-3 py-1.5 text-sm font-medium hover:bg-muted", children: "Cancel" })
+        ] })
+      ] }),
+      offerings.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground", children: "No offerings created. An offering is a sellable instance of this specification with fixed design-time values and attached charges." }) : /* @__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-3 py-3 text-left font-medium", children: "Code" }),
+          /* @__PURE__ */ jsx("th", { className: "px-3 py-3 text-left font-medium", children: "Name" }),
+          /* @__PURE__ */ jsx("th", { className: "px-3 py-3 text-left font-medium", children: "Status" }),
+          /* @__PURE__ */ jsx("th", { className: "px-3 py-3 text-left font-medium", children: "Design-Time Values" }),
+          /* @__PURE__ */ jsx("th", { className: "px-3 py-3 text-right font-medium", children: "Actions" })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: offerings.map((o) => /* @__PURE__ */ jsxs(
+          "tr",
+          {
+            onClick: () => router.push(`/backend/cpq/offerings/${o.id}`),
+            className: "border-b cursor-pointer hover:bg-muted/30 transition-colors",
+            children: [
+              /* @__PURE__ */ jsx("td", { className: "px-3 py-3 font-mono text-xs", children: o.code }),
+              /* @__PURE__ */ jsx("td", { className: "px-3 py-3 font-medium", children: o.name }),
+              /* @__PURE__ */ jsx("td", { className: "px-3 py-3", children: /* @__PURE__ */ jsx(Tag, { variant: lifecycleStatusMap[o.lifecycleStatus] ?? "neutral", dot: true, children: formatStatusLabel(o.lifecycleStatus) }) }),
+              /* @__PURE__ */ jsx("td", { className: "px-3 py-3 text-muted-foreground text-xs", children: Object.keys(o.designTimeValues).length > 0 ? Object.entries(o.designTimeValues).map(([k, v]) => `${k}=${v}`).join(", ") : "\u2014" }),
+              /* @__PURE__ */ jsxs("td", { className: "px-3 py-3 text-right", children: [
+                /* @__PURE__ */ jsx("button", { onClick: (e) => {
+                  e.stopPropagation();
+                  startEditOffering(o);
+                }, className: "text-xs text-primary hover:underline mr-2", children: "Edit" }),
+                /* @__PURE__ */ jsx("button", { onClick: (e) => {
+                  e.stopPropagation();
+                  deleteOffering(o.id);
+                }, className: "text-xs text-destructive hover:underline", children: "Delete" })
+              ] })
+            ]
+          },
+          o.id
+        )) })
+      ] }) })
+    ] }),
+    tab === "relationships" && !isNew && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => startEditRel(),
+          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.specifications.addRelationship", "Add Relationship")
+        }
+      ) }),
+      editingRel && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4 space-y-3", children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-medium text-sm", children: editingRel.id ? "Edit Relationship" : "New Relationship" }),
+        /* @__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: "Type" }),
+            /* @__PURE__ */ jsxs("select", { value: editingRel.relationshipType, onChange: (e) => setEditingRel({ ...editingRel, relationshipType: e.target.value }), className: "w-full rounded-md border px-2 py-1.5 text-sm", children: [
+              /* @__PURE__ */ jsx("option", { value: "parent_child", children: "Parent / Child" }),
+              /* @__PURE__ */ jsx("option", { value: "requires", children: "Requires" }),
+              /* @__PURE__ */ jsx("option", { value: "excludes", children: "Excludes" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-1", children: "Target Specification" }),
+            /* @__PURE__ */ jsxs("select", { value: editingRel.targetSpecId, onChange: (e) => setEditingRel({ ...editingRel, targetSpecId: e.target.value }), className: "w-full rounded-md border px-2 py-1.5 text-sm", children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "Select..." }),
+              allSpecs.filter((s) => s.id !== specId).map((s) => /* @__PURE__ */ jsxs("option", { value: s.id, children: [
+                s.name,
+                " (",
+                s.code,
+                ")"
+              ] }, s.id))
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-1", children: "Min" }),
+              /* @__PURE__ */ jsx(
+                NumberInput,
+                {
+                  integer: true,
+                  min: 0,
+                  value: editingRel.cardinalityMin,
+                  onChange: (n) => setEditingRel({ ...editingRel, cardinalityMin: n ?? 0 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-1", children: "Max" }),
+              /* @__PURE__ */ jsx(
+                NumberInput,
+                {
+                  integer: true,
+                  min: 0,
+                  value: editingRel.cardinalityMax,
+                  onChange: (n) => setEditingRel({ ...editingRel, cardinalityMax: n }),
+                  placeholder: "\u221E"
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-1", children: "Condition (JSON)" }),
+          /* @__PURE__ */ jsx("textarea", { value: conditionJson, onChange: (e) => setConditionJson(e.target.value), rows: 3, className: "w-full rounded-md border px-2 py-1.5 text-sm font-mono", placeholder: 'null or {"attribute":"direction","operator":"in","value":["inbound"]}' })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx("button", { onClick: saveRelationship, disabled: saving, 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", children: saving ? "Saving..." : "Save" }),
+          /* @__PURE__ */ jsx("button", { onClick: () => setEditingRel(null), className: "inline-flex items-center rounded-md border px-3 py-1.5 text-sm font-medium hover:bg-muted", children: "Cancel" })
+        ] })
+      ] }),
+      relationships.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground", children: "No relationships defined. Declare parent/child, requires, or excludes relationships with other specifications." }) : /* @__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: "Type" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: "Source" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: "Target" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: "Cardinality" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: "Condition" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-right font-medium", children: "Actions" })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: relationships.map((rel) => /* @__PURE__ */ jsxs("tr", { className: "border-b", children: [
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(
+            Tag,
+            {
+              variant: rel.relationshipType === "parent_child" ? "brand" : rel.relationshipType === "requires" ? "info" : "error",
+              children: rel.relationshipType
+            }
+          ) }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-sm", children: getSpecName(rel.sourceSpecId) }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-sm", children: getSpecName(rel.targetSpecId) }),
+          /* @__PURE__ */ jsxs("td", { className: "px-4 py-3 text-muted-foreground", children: [
+            rel.cardinalityMin,
+            "..",
+            rel.cardinalityMax ?? "\u221E"
+          ] }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-muted-foreground text-xs", children: rel.condition ? JSON.stringify(rel.condition) : "\u2014" }),
+          /* @__PURE__ */ jsxs("td", { className: "px-4 py-3 text-right", children: [
+            /* @__PURE__ */ jsx("button", { onClick: () => startEditRel(rel), className: "text-xs text-primary hover:underline mr-2", children: "Edit" }),
+            /* @__PURE__ */ jsx("button", { onClick: () => deleteRelationship(rel.id), className: "text-xs text-destructive hover:underline", children: "Delete" })
+          ] })
+        ] }, rel.id)) })
+      ] }) })
+    ] }),
+    tab === "slots" && !isNew && form.specType === "bundle" && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setEditingSlot({ ...EMPTY_SLOT }),
+          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: "+ Add Slot"
+        }
+      ) }),
+      editingSlot && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-6 space-y-4", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: editingSlot.id ? "Edit Bundle Slot" : "New Bundle Slot" }),
+        /* @__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: "Name" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: editingSlot.name,
+                onChange: (e) => setEditingSlot({ ...editingSlot, name: e.target.value }),
+                placeholder: "e.g. Internet Component",
+                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: "Component Group" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: editingSlot.componentGroup,
+                onChange: (e) => setEditingSlot({ ...editingSlot, componentGroup: e.target.value }),
+                placeholder: "e.g. internet, tv, phone",
+                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: "Target Specification" }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: editingSlot.targetSpecId,
+                onChange: (e) => setEditingSlot({ ...editingSlot, targetSpecId: e.target.value }),
+                className: "w-full rounded-md border px-3 py-2 text-sm",
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", children: "\u2014 Select specification \u2014" }),
+                  allSpecs.filter((s) => s.id !== specId).map((s) => /* @__PURE__ */ jsxs("option", { value: s.id, children: [
+                    s.name,
+                    " (",
+                    s.code,
+                    ")"
+                  ] }, s.id))
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium mb-1", children: "Sort Order" }),
+            /* @__PURE__ */ jsx(
+              NumberInput,
+              {
+                integer: true,
+                value: editingSlot.sortOrder,
+                onChange: (n) => setEditingSlot({ ...editingSlot, sortOrder: n ?? 0 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium mb-1", children: "Cardinality Min" }),
+            /* @__PURE__ */ jsx(
+              NumberInput,
+              {
+                integer: true,
+                min: 0,
+                value: editingSlot.cardinalityMin,
+                onChange: (n) => setEditingSlot({ ...editingSlot, cardinalityMin: n ?? 0 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium mb-1", children: "Cardinality Max" }),
+            /* @__PURE__ */ jsx(
+              NumberInput,
+              {
+                integer: true,
+                min: 0,
+                placeholder: "\u221E (unlimited)",
+                value: editingSlot.cardinalityMax,
+                onChange: (n) => setEditingSlot({ ...editingSlot, cardinalityMax: n })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium mb-1", children: "Description" }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              value: editingSlot.description ?? "",
+              onChange: (e) => setEditingSlot({ ...editingSlot, description: e.target.value }),
+              rows: 2,
+              className: "w-full rounded-md border px-3 py-2 text-sm"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: async () => {
+                setSaving(true);
+                setError(null);
+                try {
+                  const isEdit = !!editingSlot.id;
+                  const payload = isEdit ? { id: editingSlot.id, ...editingSlot, description: editingSlot.description || null } : { specId, ...editingSlot, description: editingSlot.description || null };
+                  const res = await fetch("/api/cpq/bundle-slots", {
+                    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 slot");
+                    return;
+                  }
+                  setEditingSlot(null);
+                  const slotsRes = await fetch(`/api/cpq/bundle-slots?specId=${specId}`);
+                  if (slotsRes.ok) {
+                    const d = await slotsRes.json();
+                    setBundleSlots(d.items ?? []);
+                  }
+                } catch {
+                  setError("Failed to save slot");
+                } finally {
+                  setSaving(false);
+                }
+              },
+              disabled: saving || !editingSlot.name || !editingSlot.componentGroup || !editingSlot.targetSpecId,
+              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 disabled:opacity-50",
+              children: saving ? "Saving..." : editingSlot.id ? "Update" : "Create"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setEditingSlot(null),
+              className: "inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted",
+              children: "Cancel"
+            }
+          )
+        ] })
+      ] }),
+      bundleSlots.length === 0 && !editingSlot ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground", children: "No bundle slots defined yet. Add slots to define what component specifications can fill this bundle." }) : bundleSlots.length > 0 && /* @__PURE__ */ jsx("div", { className: "rounded-lg border overflow-hidden", 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: "Name" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: "Group" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: "Target Spec" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: "Cardinality" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: "Order" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-right font-medium", children: "Actions" })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: bundleSlots.map((slot) => /* @__PURE__ */ jsxs("tr", { className: "border-b", children: [
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3 font-medium", children: slot.name }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(Tag, { variant: "info", children: slot.componentGroup }) }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-sm", children: slot.targetSpec ? /* @__PURE__ */ jsxs("span", { children: [
+            slot.targetSpec.name,
+            slot.targetSpec.specType === "bundle" && /* @__PURE__ */ jsx(Tag, { variant: "brand", className: "ml-1 px-1.5 text-[10px]", children: "bundle" })
+          ] }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Unknown" }) }),
+          /* @__PURE__ */ jsxs("td", { className: "px-4 py-3 text-muted-foreground", children: [
+            slot.cardinalityMin,
+            "..",
+            slot.cardinalityMax ?? "\u221E"
+          ] }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-muted-foreground", children: slot.sortOrder }),
+          /* @__PURE__ */ jsxs("td", { className: "px-4 py-3 text-right", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setEditingSlot({
+                  id: slot.id,
+                  targetSpecId: slot.targetSpecId,
+                  componentGroup: slot.componentGroup,
+                  name: slot.name,
+                  description: slot.description ?? "",
+                  cardinalityMin: slot.cardinalityMin,
+                  cardinalityMax: slot.cardinalityMax,
+                  sortOrder: slot.sortOrder
+                }),
+                className: "text-xs text-primary hover:underline mr-2",
+                children: "Edit"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: async () => {
+                  if (!confirm("Delete this bundle slot?")) return;
+                  try {
+                    const res = await fetch("/api/cpq/bundle-slots", {
+                      method: "DELETE",
+                      headers: { "Content-Type": "application/json" },
+                      body: JSON.stringify({ id: slot.id })
+                    });
+                    if (res.ok) {
+                      setBundleSlots((prev) => prev.filter((s) => s.id !== slot.id));
+                    } else {
+                      const d = await res.json();
+                      setError(d.error ?? "Failed to delete slot");
+                    }
+                  } catch {
+                    setError("Failed to delete slot");
+                  }
+                },
+                className: "text-xs text-destructive hover:underline",
+                children: "Delete"
+              }
+            )
+          ] })
+        ] }, slot.id)) })
+      ] }) })
+    ] })
+  ] });
+}
+export {
+  SpecificationDetailPage as default
+};
+//# sourceMappingURL=page.js.map