@dainamite/cpq 0.2.2

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

@@ -0,0 +1,1289 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useRouter, useParams, useSearchParams } from "next/navigation";
+import ArcQuoteConfigurator from "./_components/ArcQuoteConfigurator.js";
+import { StatusPath } from "../../../../components/StatusPath.js";
+import { ArrowRight, ExternalLink, Plus } from "lucide-react";
+import { Alert, AlertTitle, AlertDescription } from "@open-mercato/ui/primitives/alert";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Tag } from "@open-mercato/ui/primitives/tag";
+import { FormHeader } from "@open-mercato/ui/backend/forms";
+import { NumberInput } from "../../../../components/NumberInput.js";
+import {
+  formatStatusLabel,
+  quoteCpqStatusMap
+} from "../../../../components/statusMaps.js";
+function fmt(amount, currency) {
+  return new Intl.NumberFormat("en-US", { style: "currency", currency }).format(amount);
+}
+const RULE_TYPE_LABELS = {
+  discount_percent: "% discount",
+  discount_absolute: "fixed discount",
+  surcharge_percent: "% surcharge",
+  surcharge_absolute: "fixed surcharge",
+  price_override: "override"
+};
+function fmtRuleValue(adj, currency) {
+  if (adj.ruleType === "discount_percent" || adj.ruleType === "surcharge_percent") return `${adj.value}%`;
+  if (currency) return fmt(adj.value, currency);
+  return String(adj.value);
+}
+async function apiJson(url, init) {
+  const res = await fetch(url, init);
+  const json = await res.json();
+  if (!res.ok) throw new Error(json?.error ?? `Request failed (${res.status})`);
+  return json;
+}
+function MetaCard({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm", children })
+  ] });
+}
+function MoreActionsDropdown({ items }) {
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "relative", ref, children: [
+    /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", onClick: () => setOpen((v) => !v), children: [
+      "Actions",
+      /* @__PURE__ */ jsx("svg", { className: "h-3 w-3 ml-1", fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" }) })
+    ] }),
+    open && /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[200px] rounded-md border bg-popover shadow-md py-1", children: items.map((item) => {
+      const isDelete = item.id === "delete";
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setOpen(false);
+            item.onSelect();
+          },
+          disabled: item.disabled || item.loading,
+          className: "w-full px-3 py-2 text-left text-sm flex items-center gap-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent " + (isDelete ? "text-destructive hover:bg-destructive/10 focus:bg-destructive/10 focus:outline-none" : "hover:bg-accent focus:bg-accent focus:outline-none"),
+          children: [
+            item.icon ? /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4 text-muted-foreground" }) : null,
+            /* @__PURE__ */ jsx("span", { children: item.label })
+          ]
+        },
+        item.id
+      );
+    }) })
+  ] });
+}
+function buildMoreActions({
+  recalculate,
+  submitting,
+  deletable,
+  onDelete,
+  deleting
+}) {
+  const items = [
+    {
+      id: "recalculate",
+      label: "Recalculate",
+      onSelect: recalculate,
+      loading: submitting,
+      disabled: submitting
+    }
+  ];
+  if (deletable) {
+    items.push({
+      id: "delete",
+      label: "Delete",
+      onSelect: onDelete,
+      disabled: deleting,
+      loading: deleting
+    });
+  }
+  return items;
+}
+function CpqQuoteDetailPage(props) {
+  const router = useRouter();
+  const urlParams = useParams();
+  const searchParams = useSearchParams();
+  const cpqConfigId = props.params?.id ?? urlParams?.id;
+  const isNew = cpqConfigId === "new";
+  const [cpqQuote, setCpqQuote] = React.useState(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const [submitting, setSubmitting] = React.useState(false);
+  const [view, setView] = React.useState("summary");
+  const [offerings, setOfferings] = React.useState([]);
+  const [offeringsLoading, setOfferingsLoading] = React.useState(false);
+  const [offeringSearch, setOfferingSearch] = React.useState("");
+  const [selectedOffering, setSelectedOffering] = React.useState(null);
+  const [attributes, setAttributes] = React.useState([]);
+  const [config, setConfig] = React.useState({});
+  const [quantity, setQuantity] = React.useState(1);
+  const [editingLineId, setEditingLineId] = React.useState(null);
+  const [addingToParentLineId, setAddingToParentLineId] = React.useState(null);
+  const [addingTargetSubIds, setAddingTargetSubIds] = React.useState([]);
+  const [expandedLines, setExpandedLines] = React.useState(/* @__PURE__ */ new Set());
+  const [converting, setConverting] = React.useState(false);
+  const [transitioning, setTransitioning] = React.useState(false);
+  const [deleting, setDeleting] = React.useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
+  const [pricingDetail, setPricingDetail] = React.useState(null);
+  const [arcTargets, setArcTargets] = React.useState([]);
+  const [arcQuoteType, setArcQuoteType] = React.useState("new");
+  const [arcDrawerOpen, setArcDrawerOpen] = React.useState(false);
+  const loadArcTargets = React.useCallback(async () => {
+    try {
+      const res = await fetch(`/api/cpq/quotes/${cpqConfigId}/target-subscriptions`);
+      if (!res.ok) return;
+      const data = await res.json();
+      const items = data.items ?? [];
+      setArcTargets(items);
+      if (items.length > 0) {
+        setArcQuoteType(items[0].quoteType);
+      } else {
+        setArcQuoteType("new");
+      }
+    } catch {
+    }
+  }, [cpqConfigId]);
+  React.useEffect(() => {
+    if (!cpqConfigId || isNew) return;
+    void loadArcTargets();
+  }, [cpqConfigId, isNew, loadArcTargets]);
+  React.useEffect(() => {
+    if (isNew) {
+      const quoteId = searchParams.get("quoteId");
+      const customerId = searchParams.get("customerId");
+      if (!customerId) {
+        setError("customerId is required to create a CPQ quote");
+        setLoading(false);
+        return;
+      }
+      async function create() {
+        try {
+          const body = { customerId };
+          if (quoteId) body.quoteId = quoteId;
+          const result = await apiJson("/api/cpq/quotes", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(body)
+          });
+          router.replace(`/backend/cpq/quotes/${result.id}`);
+        } catch (err) {
+          setError(err.message);
+          setLoading(false);
+        }
+      }
+      create();
+      return;
+    }
+    let cancelled = false;
+    async function load() {
+      try {
+        const result = await apiJson(`/api/cpq/quotes/${cpqConfigId}`);
+        if (!cancelled) setCpqQuote(result);
+      } catch (err) {
+        if (!cancelled) setError(err.message);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [cpqConfigId, isNew, searchParams, router]);
+  const loadOfferings = async () => {
+    setOfferingsLoading(true);
+    try {
+      const result = await apiJson("/api/cpq/product-offerings?pageSize=100&lifecycleStatus=active");
+      setOfferings(result.items ?? []);
+    } catch {
+      setOfferings([]);
+    } finally {
+      setOfferingsLoading(false);
+    }
+  };
+  const loadAttributes = async (offeringId, currentConfig = {}) => {
+    try {
+      const params = new URLSearchParams({ offeringId });
+      if (Object.keys(currentConfig).length > 0) params.set("configuration", JSON.stringify(currentConfig));
+      const result = await apiJson(`/api/cpq/quotes/attributes?${params}`);
+      setAttributes(result.attributes ?? []);
+    } catch {
+      setAttributes([]);
+    }
+  };
+  const addItem = async () => {
+    if (!cpqQuote || !selectedOffering) return;
+    try {
+      setSubmitting(true);
+      setError(null);
+      const targetsToPost = addingTargetSubIds.length > 0 ? addingTargetSubIds : [null];
+      let lastResult = null;
+      for (const tid of targetsToPost) {
+        const body = { offeringId: selectedOffering.id, configuration: config, quantity };
+        if (addingToParentLineId) body.parentLineId = addingToParentLineId;
+        if (tid) body.targetSubscriptionId = tid;
+        lastResult = await apiJson(`/api/cpq/quotes/${cpqQuote.id}/items`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(body)
+        });
+      }
+      if (lastResult) setCpqQuote(lastResult);
+      resetConfigState();
+      setView("summary");
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const updateItem = async (lineId) => {
+    if (!cpqQuote) return;
+    try {
+      setSubmitting(true);
+      setError(null);
+      const result = await apiJson(`/api/cpq/quotes/${cpqQuote.id}/items/${lineId}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ configuration: config, quantity })
+      });
+      setCpqQuote(result);
+      resetConfigState();
+      setView("summary");
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const removeItem = async (lineId) => {
+    if (!cpqQuote) return;
+    try {
+      setError(null);
+      const result = await apiJson(`/api/cpq/quotes/${cpqQuote.id}/items/${lineId}`, { method: "DELETE" });
+      setCpqQuote(result);
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+  const recalculate = async () => {
+    if (!cpqQuote) return;
+    try {
+      setSubmitting(true);
+      setError(null);
+      const result = await apiJson(`/api/cpq/quotes/${cpqQuote.id}/recalculate`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ save: true })
+      });
+      setCpqQuote(result);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const convertToOrder = async () => {
+    if (!cpqQuote) return;
+    try {
+      setConverting(true);
+      setError(null);
+      const result = await apiJson("/api/cpq/orders", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ quoteId: cpqQuote.id })
+      });
+      router.push(`/backend/cpq/orders/${result.id}`);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setConverting(false);
+    }
+  };
+  const transitionStatus = async (targetStatus) => {
+    if (!cpqQuote) return;
+    try {
+      setTransitioning(true);
+      setError(null);
+      const result = await apiJson(`/api/cpq/quotes/${cpqQuote.id}/status`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ targetStatus })
+      });
+      setCpqQuote(result);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setTransitioning(false);
+    }
+  };
+  const deleteQuote = async () => {
+    if (!cpqQuote) return;
+    try {
+      setDeleting(true);
+      setError(null);
+      setShowDeleteConfirm(false);
+      await apiJson(`/api/cpq/quotes/${cpqQuote.id}`, { method: "DELETE" });
+      router.push("/backend/cpq/quotes");
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setDeleting(false);
+    }
+  };
+  const resetConfigState = () => {
+    setSelectedOffering(null);
+    setAttributes([]);
+    setConfig({});
+    setQuantity(1);
+    setEditingLineId(null);
+    setAddingToParentLineId(null);
+  };
+  const startAddOffering = () => {
+    resetConfigState();
+    setAddingTargetSubIds(arcTargets.map((t) => t.subscriptionId));
+    loadOfferings();
+    setView("add-offering");
+  };
+  const startAddComponent = async (parentLineId, offeringId) => {
+    setSelectedOffering(null);
+    setAttributes([]);
+    setConfig({});
+    setQuantity(1);
+    setEditingLineId(null);
+    setAddingToParentLineId(parentLineId);
+    const parent = cpqQuote?.lines.find((l) => l.lineId === parentLineId);
+    const inherited = parent?.targetSubscriptionId ?? arcTargets[0]?.subscriptionId;
+    setAddingTargetSubIds(inherited ? [inherited] : []);
+    if (offeringId) {
+      try {
+        const result = await apiJson("/api/cpq/product-offerings?pageSize=100&lifecycleStatus=active");
+        const match = (result.items ?? []).find((o) => o.id === offeringId);
+        if (match) {
+          selectOffering(match);
+          return;
+        }
+      } catch {
+      }
+    }
+    loadOfferings();
+    setView("add-offering");
+  };
+  const selectOffering = (o) => {
+    setSelectedOffering(o);
+    setConfig({});
+    setQuantity(1);
+    loadAttributes(o.id);
+    setView("configure");
+  };
+  const startEditLine = (line) => {
+    setEditingLineId(line.lineId);
+    setConfig(line.configuration ?? {});
+    setQuantity(line.quantity);
+    if (line.offeringId) loadAttributes(line.offeringId, line.configuration ?? {});
+    setView("edit");
+  };
+  const toggleLine = (id) => {
+    setExpandedLines((prev) => {
+      const n = new Set(prev);
+      n.has(id) ? n.delete(id) : n.add(id);
+      return n;
+    });
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-12 justify-center text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Spinner, {}),
+      " Loading\u2026"
+    ] });
+  }
+  if (!cpqQuote) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("button", { onClick: () => router.push("/backend/cpq/quotes"), className: "text-sm text-muted-foreground hover:text-foreground", children: "\u2190 Back to Quotes" }),
+      error && /* @__PURE__ */ jsx(ErrorBanner, { message: error }),
+      /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground", children: "Quote not found." })
+    ] });
+  }
+  const { pricingSummary: summary, currencyCode: currency } = cpqQuote;
+  const arcEditable = ["new", "incomplete", "ready"].includes(cpqQuote.cpqStatus);
+  const isMergeRenew = arcQuoteType === "renew" && arcTargets.length >= 2 && arcTargets.every((t) => t.mergeAction === "absorb");
+  const arcTargetCodeMap = /* @__PURE__ */ new Map();
+  for (const t of arcTargets) {
+    if (t.subscription?.code) arcTargetCodeMap.set(t.subscriptionId, t.subscription.code);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    arcDrawerOpen && /* @__PURE__ */ jsx(
+      ArcQuoteConfigurator,
+      {
+        quoteId: cpqQuote.id,
+        customerId: cpqQuote.customerId,
+        customerName: cpqQuote.customerName,
+        currencyCode: cpqQuote.currencyCode,
+        initialType: arcQuoteType,
+        initialTargets: arcTargets,
+        editable: arcEditable,
+        onClose: () => setArcDrawerOpen(false),
+        onChanged: async () => {
+          await loadArcTargets();
+          try {
+            const fresh = await apiJson(`/api/cpq/quotes/${cpqQuote.id}`);
+            setCpqQuote(fresh);
+          } catch {
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormHeader,
+      {
+        mode: "detail",
+        backHref: "/backend/cpq/quotes",
+        backLabel: "Back to CPQ Quotes",
+        entityTypeLabel: "CPQ Quote",
+        title: cpqQuote.quoteNumber || cpqQuote.customerName || "Untitled",
+        statusBadge: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 pt-1", children: [
+          /* @__PURE__ */ jsx(Tag, { variant: quoteCpqStatusMap[cpqQuote.cpqStatus] ?? "neutral", dot: true, children: formatStatusLabel(cpqQuote.cpqStatus) }),
+          arcQuoteType !== "new" && /* @__PURE__ */ jsx(Tag, { variant: "brand", className: "uppercase", children: arcQuoteType }),
+          cpqQuote.convertedOrderId && /* @__PURE__ */ jsx(Tag, { variant: "success", dot: true, children: "Converted" })
+        ] }),
+        actionsContent: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: () => router.push(`/backend/sales/quotes/${cpqQuote.quoteId}`),
+              children: [
+                /* @__PURE__ */ jsx(ExternalLink, { className: "h-3.5 w-3.5" }),
+                "View Sales Quote"
+              ]
+            }
+          ),
+          cpqQuote.convertedOrderId ? /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              onClick: () => router.push(`/backend/cpq/orders/${cpqQuote.convertedOrderId}`),
+              children: [
+                /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4" }),
+                "Go to order"
+              ]
+            }
+          ) : view !== "summary" ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => {
+            resetConfigState();
+            setView("summary");
+          }, children: "Cancel" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(Button, { type: "button", onClick: startAddOffering, children: [
+              /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+              "Add Offering"
+            ] }),
+            arcEditable && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => setArcDrawerOpen(true), children: "Modify Subscription" }),
+            cpqQuote.cpqStatus === "accepted" && /* @__PURE__ */ jsxs(Button, { type: "button", onClick: convertToOrder, disabled: converting, children: [
+              converting ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4" }),
+              "Convert to Order"
+            ] }),
+            /* @__PURE__ */ jsx(
+              MoreActionsDropdown,
+              {
+                items: buildMoreActions({
+                  recalculate,
+                  submitting,
+                  deletable: !["accepted", "rejected", "cancelled"].includes(cpqQuote.cpqStatus),
+                  onDelete: () => setShowDeleteConfirm(true),
+                  deleting
+                })
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [
+      /* @__PURE__ */ jsx(
+        StatusPath,
+        {
+          current: cpqQuote.cpqStatus,
+          path: cpqQuote.cpqStatus === "pre_approved" ? ["new", "incomplete", "ready", "in_approval", "pre_approved", "with_customer", "accepted"] : ["new", "incomplete", "ready", "in_approval", "approved", "with_customer", "accepted"],
+          terminals: ["rejected", "cancelled"],
+          statusMap: quoteCpqStatusMap,
+          onTransition: transitionStatus,
+          disabled: transitioning,
+          ariaLabel: "Quote status path"
+        }
+      ),
+      transitioning && /* @__PURE__ */ jsx(Spinner, {})
+    ] }),
+    error && /* @__PURE__ */ jsx(ErrorBanner, { message: error, onDismiss: () => setError(null) }),
+    arcQuoteType !== "new" && arcTargets.length > 0 && /* @__PURE__ */ jsx("div", { className: "rounded-md border border-brand-violet/30 bg-brand-violet/10 px-4 py-3 text-sm text-brand-violet", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium uppercase", children: arcQuoteType }),
+      " \u2022 ",
+      arcTargets.length,
+      " target",
+      arcTargets.length === 1 ? "" : "s",
+      ":",
+      " ",
+      arcTargets.map((t, i) => /* @__PURE__ */ jsxs("span", { children: [
+        i > 0 && ", ",
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => router.push(`/backend/cpq/inventory/subscriptions/${t.subscriptionId}`),
+            className: "text-brand-violet hover:underline",
+            children: t.subscription?.code ?? t.subscriptionId.slice(0, 8)
+          }
+        )
+      ] }, t.id)),
+      isMergeRenew && /* @__PURE__ */ jsx("span", { className: "ml-2 text-status-warning-text font-medium", children: "\u2022 Merging into a new contract" })
+    ] }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3", children: [
+      /* @__PURE__ */ jsx(MetaCard, { label: "Customer", children: cpqQuote.customerName ? /* @__PURE__ */ jsx("span", { className: "font-medium", children: cpqQuote.customerName }) : /* @__PURE__ */ jsxs("span", { className: "font-mono text-xs text-muted-foreground", children: [
+        cpqQuote.customerId.slice(0, 8),
+        "\u2026"
+      ] }) }),
+      /* @__PURE__ */ jsx(MetaCard, { label: "Version", children: /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+        "v",
+        cpqQuote.version
+      ] }) }),
+      /* @__PURE__ */ jsx(MetaCard, { label: "Currency", children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: currency }) })
+    ] }),
+    showDeleteConfirm && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", onClick: () => setShowDeleteConfirm(false), children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-sm rounded-lg border bg-card shadow-xl", onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-b", children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Delete Quote" }) }),
+      /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Are you sure you want to delete this quote? This will soft-delete the quote and all its line items." }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 px-4 py-3 border-t", children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => setShowDeleteConfirm(false), children: "Cancel" }),
+        /* @__PURE__ */ jsxs(Button, { type: "button", variant: "destructive", onClick: deleteQuote, disabled: deleting, children: [
+          deleting ? /* @__PURE__ */ jsx(Spinner, {}) : null,
+          " Delete"
+        ] })
+      ] })
+    ] }) }),
+    view === "summary" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium mb-3", children: "Pricing Summary" }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Non-Recurring (NRC)" }),
+            /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold font-mono", children: fmt(summary.nrcTotal, currency) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Monthly Recurring (MRC)" }),
+            /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold font-mono", children: fmt(summary.mrcTotal, currency) })
+          ] }),
+          summary.usageTotalEstimated != null && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Usage (est.)" }),
+            /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold font-mono", children: fmt(summary.usageTotalEstimated, currency) })
+          ] }),
+          summary.usageCharges.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Usage Charges" }),
+            summary.usageCharges.map((uc, i) => /* @__PURE__ */ jsxs("p", { className: "text-xs mt-0.5", children: [
+              uc.chargeName,
+              ": ",
+              fmt(uc.unitPrice, currency),
+              "/unit"
+            ] }, i))
+          ] })
+        ] })
+      ] }),
+      !cpqQuote.validationResult.valid && /* @__PURE__ */ jsxs(Alert, { variant: "warning", children: [
+        /* @__PURE__ */ jsx(AlertTitle, { children: "Validation Issues" }),
+        /* @__PURE__ */ jsx(AlertDescription, { children: /* @__PURE__ */ jsx("span", { className: "text-xs space-y-0.5 block", children: cpqQuote.validationResult.errors.map((e, i) => /* @__PURE__ */ jsxs("span", { className: "block", children: [
+          "\u2014 ",
+          e.message
+        ] }, i)) }) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        QuoteLineTree,
+        {
+          lines: cpqQuote.lines,
+          currency,
+          expandedLines,
+          pricingDetail,
+          targetCodes: arcTargetCodeMap,
+          onToggleLine: toggleLine,
+          onEditLine: startEditLine,
+          onRemoveLine: removeItem,
+          onAddComponent: startAddComponent,
+          onTogglePricingDetail: (lineIdx, chargeIdx) => setPricingDetail(
+            pricingDetail?.lineIdx === lineIdx && pricingDetail?.chargeIdx === chargeIdx ? null : { lineIdx, chargeIdx }
+          )
+        }
+      )
+    ] }),
+    view === "add-offering" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      addingToParentLineId && /* @__PURE__ */ jsxs(Alert, { variant: "info", children: [
+        "Adding component to bundle: ",
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: cpqQuote.lines.find((l) => l.lineId === addingToParentLineId)?.offeringName ?? "Bundle" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        OfferingBrowser,
+        {
+          offerings,
+          loading: offeringsLoading,
+          search: offeringSearch,
+          onSearchChange: setOfferingSearch,
+          onSelect: selectOffering
+        }
+      )
+    ] }),
+    view === "configure" && selectedOffering && /* @__PURE__ */ jsx(
+      ConfigurePanel,
+      {
+        title: addingToParentLineId ? `Add Component: ${selectedOffering.name}` : `Configure: ${selectedOffering.name}`,
+        attributes,
+        config,
+        quantity,
+        arcTargetOptions: arcTargets.length >= 2 && !addingToParentLineId ? arcTargets.map((t) => ({
+          subscriptionId: t.subscriptionId,
+          code: t.subscription?.code ?? t.subscriptionId.slice(0, 8),
+          name: t.subscription?.name ?? null
+        })) : null,
+        arcSelectedTargetIds: addingTargetSubIds,
+        onArcTargetToggle: (subId) => {
+          setAddingTargetSubIds(
+            (prev) => prev.includes(subId) ? prev.filter((id) => id !== subId) : [...prev, subId]
+          );
+        },
+        onConfigChange: (key, value) => {
+          const next = { ...config, [key]: value };
+          setConfig(next);
+          if (selectedOffering) loadAttributes(selectedOffering.id, next);
+        },
+        onQuantityChange: setQuantity,
+        onSubmit: addItem,
+        submitLabel: "Add to Quote",
+        submitting
+      }
+    ),
+    view === "edit" && editingLineId && /* @__PURE__ */ jsx(
+      ConfigurePanel,
+      {
+        title: `Edit: ${cpqQuote.lines.find((l) => l.lineId === editingLineId)?.offeringName ?? "Line"}`,
+        attributes,
+        config,
+        quantity,
+        arcTargetOptions: null,
+        arcSelectedTargetIds: [],
+        onArcTargetToggle: () => {
+        },
+        onConfigChange: (key, value) => {
+          const next = { ...config, [key]: value };
+          setConfig(next);
+          const line = cpqQuote.lines.find((l) => l.lineId === editingLineId);
+          if (line?.offeringId) loadAttributes(line.offeringId, next);
+        },
+        onQuantityChange: setQuantity,
+        onSubmit: () => updateItem(editingLineId),
+        submitLabel: "Update Line",
+        submitting
+      }
+    )
+  ] });
+}
+function QuoteLineTree({ lines, currency, expandedLines, pricingDetail, targetCodes, onToggleLine, onEditLine, onRemoveLine, onAddComponent, onTogglePricingDetail }) {
+  const [bundleTrees, setBundleTrees] = React.useState(/* @__PURE__ */ new Map());
+  const [loadingTrees, setLoadingTrees] = React.useState(/* @__PURE__ */ new Set());
+  const rootLines = lines.filter((l) => !l.parentLineId);
+  const childrenByParent = /* @__PURE__ */ new Map();
+  for (const line of lines) {
+    if (line.parentLineId) {
+      const arr = childrenByParent.get(line.parentLineId) ?? [];
+      arr.push(line);
+      childrenByParent.set(line.parentLineId, arr);
+    }
+  }
+  const fetchBundleTree = React.useCallback(async (offeringId) => {
+    if (bundleTrees.has(offeringId) || loadingTrees.has(offeringId)) return;
+    setLoadingTrees((prev) => new Set(prev).add(offeringId));
+    try {
+      const result = await apiJson(`/api/cpq/bundle-tree?offeringId=${offeringId}`);
+      setBundleTrees((prev) => new Map(prev).set(offeringId, result.tree));
+    } catch {
+    } finally {
+      setLoadingTrees((prev) => {
+        const n = new Set(prev);
+        n.delete(offeringId);
+        return n;
+      });
+    }
+  }, [bundleTrees, loadingTrees]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium mb-2 px-1", children: "Line Items" }),
+    lines.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card py-8 text-center text-sm text-muted-foreground", children: 'No items configured yet. Click "Add Offering" to start.' }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card divide-y", children: rootLines.map((line) => {
+      const lineIdx = lines.indexOf(line);
+      const isBundle = line.offeringType === "bundle";
+      const children = childrenByParent.get(line.lineId) ?? [];
+      const isExpanded = expandedLines.has(line.lineId);
+      const bundleTree = isBundle && line.offeringId ? bundleTrees.get(line.offeringId) : void 0;
+      const treeLoading = isBundle && line.offeringId ? loadingTrees.has(line.offeringId) : false;
+      if (isBundle && isExpanded && line.offeringId && !bundleTree && !treeLoading) {
+        fetchBundleTree(line.offeringId);
+      }
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          QuoteLineRow,
+          {
+            line,
+            lineIdx,
+            currency,
+            isExpanded,
+            pricingDetail,
+            isBundle,
+            childCount: children.length,
+            indent: 0,
+            targetCodes,
+            onToggle: () => onToggleLine(line.lineId),
+            onEdit: () => onEditLine(line),
+            onRemove: () => onRemoveLine(line.lineId),
+            onAddComponent: isBundle ? () => onAddComponent(line.lineId) : void 0,
+            onTogglePricingDetail
+          }
+        ),
+        isBundle && isExpanded && /* @__PURE__ */ jsx(
+          BundleSlotPanel,
+          {
+            bundleTree,
+            treeLoading,
+            children,
+            allLines: lines,
+            currency,
+            expandedLines,
+            pricingDetail,
+            parentLineId: line.lineId,
+            targetCodes,
+            onToggleLine,
+            onEditLine,
+            onRemoveLine,
+            onAddComponent,
+            onTogglePricingDetail
+          }
+        )
+      ] }, line.lineId);
+    }) })
+  ] });
+}
+function BundleSlotPanel({ bundleTree, treeLoading, children, allLines, currency, expandedLines, pricingDetail, parentLineId, targetCodes, onToggleLine, onEditLine, onRemoveLine, onAddComponent, onTogglePricingDetail }) {
+  if (treeLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "border-t bg-muted/5 px-8 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Spinner, {}),
+      " Loading bundle structure\u2026"
+    ] }) });
+  }
+  if (!bundleTree || bundleTree.slots.length === 0) {
+    if (children.length === 0) return null;
+    return /* @__PURE__ */ jsx("div", { className: "border-t bg-muted/5", children: children.map((child) => {
+      const childIdx = allLines.indexOf(child);
+      return /* @__PURE__ */ jsx(
+        QuoteLineRow,
+        {
+          line: child,
+          lineIdx: childIdx,
+          currency,
+          isExpanded: expandedLines.has(child.lineId),
+          pricingDetail,
+          isBundle: false,
+          childCount: 0,
+          indent: 1,
+          targetCodes,
+          onToggle: () => onToggleLine(child.lineId),
+          onEdit: () => onEditLine(child),
+          onRemove: () => onRemoveLine(child.lineId),
+          onTogglePricingDetail
+        },
+        child.lineId
+      );
+    }) });
+  }
+  const childOfferingIds = new Set(children.map((c) => c.offeringId).filter(Boolean));
+  return /* @__PURE__ */ jsxs("div", { className: "border-t bg-muted/5", children: [
+    bundleTree.slots.map((slot) => {
+      const filledChildren = children.filter(
+        (c) => slot.components.some((comp) => comp.childOffering.offeringId === c.offeringId)
+      );
+      const filledCount = filledChildren.length;
+      const isRequired = slot.cardinalityMin > 0;
+      const isFull = slot.cardinalityMax != null && filledCount >= slot.cardinalityMax;
+      const canAdd = !isFull;
+      return /* @__PURE__ */ jsxs("div", { className: "border-b last:border-b-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-6 py-2 bg-muted/20", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: slot.name }),
+          isRequired ? /* @__PURE__ */ jsx(Tag, { variant: "warning", className: "text-[10px] px-1.5", children: "required" }) : /* @__PURE__ */ jsx(Tag, { variant: "neutral", className: "text-[10px] px-1.5", children: "optional" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground", children: [
+            filledCount,
+            "/",
+            slot.cardinalityMax ?? "\u221E",
+            slot.cardinalityMin > 0 && ` (min ${slot.cardinalityMin})`
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: slot.components.map((comp) => {
+            const isFilled = childOfferingIds.has(comp.childOffering.offeringId);
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => !isFilled && canAdd && onAddComponent(parentLineId, comp.childOffering.offeringId),
+                disabled: isFilled || !canAdd,
+                className: `inline-flex items-center gap-1 rounded border px-2 py-1 text-[11px] font-medium transition-colors ${isFilled ? "border-status-success-border bg-status-success-bg text-status-success-text cursor-default" : canAdd ? "border-border hover:border-primary hover:bg-primary/5 hover:text-primary cursor-pointer" : "border-border text-muted-foreground opacity-50 cursor-not-allowed"}`,
+                title: isFilled ? "Already added" : canAdd ? `Add ${comp.childOffering.offeringName}` : "Slot is full",
+                children: [
+                  isFilled ? /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 12.75l6 6 9-13.5" }) }) : /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4.5v15m7.5-7.5h-15" }) }),
+                  comp.childOffering.offeringName
+                ]
+              },
+              comp.componentId
+            );
+          }) })
+        ] }),
+        filledChildren.map((child) => {
+          const childIdx = allLines.indexOf(child);
+          return /* @__PURE__ */ jsx(
+            QuoteLineRow,
+            {
+              line: child,
+              lineIdx: childIdx,
+              currency,
+              isExpanded: expandedLines.has(child.lineId),
+              pricingDetail,
+              isBundle: false,
+              childCount: 0,
+              indent: 1,
+              targetCodes,
+              onToggle: () => onToggleLine(child.lineId),
+              onEdit: () => onEditLine(child),
+              onRemove: () => onRemoveLine(child.lineId),
+              onTogglePricingDetail
+            },
+            child.lineId
+          );
+        })
+      ] }, slot.slotId);
+    }),
+    children.filter((c) => !bundleTree.slots.some((s) => s.components.some((comp) => comp.childOffering.offeringId === c.offeringId))).map((child) => {
+      const childIdx = allLines.indexOf(child);
+      return /* @__PURE__ */ jsx(
+        QuoteLineRow,
+        {
+          line: child,
+          lineIdx: childIdx,
+          currency,
+          isExpanded: expandedLines.has(child.lineId),
+          pricingDetail,
+          isBundle: false,
+          childCount: 0,
+          indent: 1,
+          targetCodes,
+          onToggle: () => onToggleLine(child.lineId),
+          onEdit: () => onEditLine(child),
+          onRemove: () => onRemoveLine(child.lineId),
+          onTogglePricingDetail
+        },
+        child.lineId
+      );
+    })
+  ] });
+}
+function QuoteLineRow({ line, lineIdx, currency, isExpanded, pricingDetail, isBundle, childCount, indent, targetCodes, onToggle, onEdit, onRemove, onAddComponent, onTogglePricingDetail }) {
+  const paddingLeft = indent > 0 ? `${indent * 2 + 1}rem` : void 0;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3 hover:bg-muted/30 transition-colors", style: paddingLeft ? { paddingLeft } : void 0, children: [
+      /* @__PURE__ */ jsx("button", { onClick: onToggle, className: "flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsx("svg", { className: `h-4 w-4 transition-transform ${isExpanded ? "rotate-90" : ""}`, fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          indent > 0 && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: "\u2514" }),
+          isBundle && /* @__PURE__ */ jsx(Tag, { variant: "brand", className: "px-1.5 text-xs", children: "bundle" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: line.offeringName }),
+          line.quantity > 1 && /* @__PURE__ */ jsxs("span", { className: "rounded bg-muted px-1.5 py-0.5 text-xs font-medium", children: [
+            "\xD7",
+            line.quantity
+          ] }),
+          /* @__PURE__ */ jsx(ActionBadge, { action: line.action }),
+          targetCodes.size >= 2 && line.targetSubscriptionId && targetCodes.get(line.targetSubscriptionId) && /* @__PURE__ */ jsxs(
+            Tag,
+            {
+              variant: "brand",
+              className: "px-1.5 text-xs",
+              title: `Acts on subscription ${targetCodes.get(line.targetSubscriptionId)}`,
+              children: [
+                "\u2192 ",
+                targetCodes.get(line.targetSubscriptionId)
+              ]
+            }
+          ),
+          line.isConfigured ? /* @__PURE__ */ jsx(Tag, { variant: "success", className: "px-1.5 text-xs", children: "configured" }) : /* @__PURE__ */ jsx(Tag, { variant: "warning", className: "px-1.5 text-xs", children: "incomplete" }),
+          isBundle && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            childCount,
+            " component",
+            childCount !== 1 ? "s" : ""
+          ] })
+        ] }),
+        line.validationErrors && line.validationErrors.length > 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive mt-0.5", children: line.validationErrors[0].message })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "shrink-0 text-right text-xs space-y-0.5", children: [
+        line.nrcTotal > 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "NRC " }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", children: fmt(line.nrcTotal, currency) })
+        ] }),
+        line.mrcTotal > 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "MRC " }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", children: fmt(line.mrcTotal, currency) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+        onAddComponent && /* @__PURE__ */ jsx("button", { onClick: onAddComponent, className: "rounded p-1.5 text-muted-foreground hover:text-primary hover:bg-primary/5 transition-colors", title: "Add Component", children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4.5v15m7.5-7.5h-15" }) }) }),
+        /* @__PURE__ */ jsx("button", { onClick: onEdit, className: "rounded p-1.5 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors", title: "Edit", children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" }) }) }),
+        /* @__PURE__ */ jsx("button", { onClick: onRemove, className: "rounded p-1.5 text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors", title: "Remove", children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" }) }) })
+      ] })
+    ] }),
+    isExpanded && line.arcSource && /* @__PURE__ */ jsx(ArcLineDiff, { line, currency }),
+    isExpanded && !isBundle && line.charges.length > 0 && /* @__PURE__ */ jsx(ChargeBreakdown, { line, lineIdx, currency, pricingDetail, onTogglePricingDetail }),
+    isExpanded && isBundle && line.charges.length > 0 && /* @__PURE__ */ jsx(ChargeBreakdown, { line, lineIdx, currency, pricingDetail, onTogglePricingDetail }),
+    isExpanded && line.charges.length === 0 && !line.arcSource && /* @__PURE__ */ jsx(LineSummaryFallback, { line, currency })
+  ] });
+}
+function ArcLineDiff({ line, currency }) {
+  const src = line.arcSource;
+  if (!src) return null;
+  const isCancel = line.action === "cancel";
+  const beforeMrc = src.mrcAmount;
+  const beforeNrc = src.nrcAmount;
+  const beforeQty = src.quantity;
+  const afterMrc = isCancel ? 0 : line.mrcTotal;
+  const afterNrc = isCancel ? 0 : line.nrcTotal;
+  const afterQty = isCancel ? 0 : line.quantity;
+  const fmtVal = (v, asCurrency) => asCurrency ? fmt(v, currency) : String(v);
+  const rows = [
+    { label: "Quantity", before: beforeQty, after: afterQty, asCurrency: false },
+    { label: "MRC", before: beforeMrc, after: afterMrc, asCurrency: true },
+    { label: "NRC", before: beforeNrc, after: afterNrc, asCurrency: true }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "border-t bg-muted/10 px-12 py-2 space-y-1.5", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "Change Preview" }),
+    /* @__PURE__ */ jsx("div", { className: "rounded border bg-background overflow-hidden", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-xs", children: [
+      /* @__PURE__ */ jsx("thead", { className: "bg-muted/40", children: /* @__PURE__ */ jsxs("tr", { className: "text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("th", { className: "text-left px-3 py-1.5 font-medium" }),
+        /* @__PURE__ */ jsx("th", { className: "text-right px-3 py-1.5 font-medium", children: "Before" }),
+        /* @__PURE__ */ jsx("th", { className: "text-right px-3 py-1.5 font-medium", children: "After" }),
+        /* @__PURE__ */ jsx("th", { className: "text-right px-3 py-1.5 font-medium", children: "\u0394" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: rows.map((r) => {
+        const delta = r.after - r.before;
+        const showDelta = delta !== 0;
+        return /* @__PURE__ */ jsxs("tr", { className: "border-t border-dashed border-border/40", children: [
+          /* @__PURE__ */ jsx("td", { className: "px-3 py-1 text-muted-foreground", children: r.label }),
+          /* @__PURE__ */ jsx("td", { className: "px-3 py-1 text-right font-mono", children: fmtVal(r.before, r.asCurrency) }),
+          /* @__PURE__ */ jsx("td", { className: `px-3 py-1 text-right font-mono ${isCancel ? "text-muted-foreground line-through" : ""}`, children: fmtVal(r.after, r.asCurrency) }),
+          /* @__PURE__ */ jsx("td", { className: `px-3 py-1 text-right font-mono font-medium ${showDelta ? delta > 0 ? "text-status-success-text" : "text-destructive" : "text-muted-foreground"}`, children: showDelta ? `${delta > 0 ? "+" : ""}${fmtVal(delta, r.asCurrency)}` : "\u2014" })
+        ] }, r.label);
+      }) })
+    ] }) }),
+    isCancel && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive italic", children: "Cancellation \u2014 item will be terminated on activation." })
+  ] });
+}
+function ActionBadge({ action }) {
+  const variantByAction = {
+    add: "info",
+    modify: "warning",
+    cancel: "error"
+  };
+  return /* @__PURE__ */ jsx(Tag, { variant: variantByAction[action], className: "px-1.5 text-xs", children: action });
+}
+function LineSummaryFallback({ line, currency }) {
+  const hasTotals = line.nrcTotal > 0 || line.mrcTotal > 0;
+  const mirroredFromItemId = line.configuration?._arcMirroredFromItemId ?? null;
+  return /* @__PURE__ */ jsxs("div", { className: "border-t bg-muted/10 px-12 py-2 text-xs text-muted-foreground space-y-1", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      "No detailed charge breakdown available for this line.",
+      mirroredFromItemId && " Mirrored from existing subscription item."
+    ] }),
+    hasTotals && /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+      line.nrcTotal > 0 && /* @__PURE__ */ jsxs("span", { children: [
+        "NRC ",
+        /* @__PURE__ */ jsx("span", { className: "font-mono font-medium text-foreground", children: fmt(line.nrcTotal, currency) })
+      ] }),
+      line.mrcTotal > 0 && /* @__PURE__ */ jsxs("span", { children: [
+        "MRC ",
+        /* @__PURE__ */ jsx("span", { className: "font-mono font-medium text-foreground", children: fmt(line.mrcTotal, currency) })
+      ] })
+    ] })
+  ] });
+}
+function ChargeBreakdown({ line, lineIdx, currency, pricingDetail, onTogglePricingDetail }) {
+  return /* @__PURE__ */ jsx("div", { className: "border-t bg-muted/10 px-12 py-2", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-xs", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("th", { className: "text-left py-1 font-medium", children: "Charge" }),
+      /* @__PURE__ */ jsx("th", { className: "text-left py-1 font-medium", children: "Type" }),
+      /* @__PURE__ */ jsx("th", { className: "text-right py-1 font-medium", children: "Unit Price" }),
+      /* @__PURE__ */ jsx("th", { className: "text-right py-1 font-medium", children: "Qty" }),
+      /* @__PURE__ */ jsx("th", { className: "text-right py-1 font-medium", children: "Total" }),
+      /* @__PURE__ */ jsx("th", { className: "w-8" })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: line.charges.map((c, i) => {
+      const hasDetail = !!(c.breakdown?.tiers?.length || c.adjustments?.length);
+      const isDetailOpen = pricingDetail?.lineIdx === lineIdx && pricingDetail?.chargeIdx === i;
+      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsxs("tr", { className: "border-t border-dashed border-border/50", children: [
+          /* @__PURE__ */ jsx("td", { className: "py-1", children: c.chargeName }),
+          /* @__PURE__ */ jsx("td", { className: "py-1 uppercase", children: c.chargeType }),
+          /* @__PURE__ */ jsx("td", { className: "py-1 text-right font-mono", children: fmt(c.unitPrice, currency) }),
+          /* @__PURE__ */ jsx("td", { className: "py-1 text-right font-mono", children: c.quantity ?? "\u2014" }),
+          /* @__PURE__ */ jsx("td", { className: "py-1 text-right font-mono", children: c.totalPrice != null ? fmt(c.totalPrice, currency) : c.note ?? "\u2014" }),
+          /* @__PURE__ */ jsx("td", { className: "py-1 text-center", children: hasDetail && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => onTogglePricingDetail(lineIdx, i),
+              className: "inline-flex items-center justify-center rounded p-0.5 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
+              title: "Show pricing breakdown",
+              children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" }) })
+            }
+          ) })
+        ] }),
+        isDetailOpen && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 6, className: "pb-3 pt-1", children: /* @__PURE__ */ jsxs("div", { className: "rounded border bg-background p-3 space-y-3 text-xs", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("span", { className: "font-semibold text-sm", children: [
+              "Pricing Details \u2014 ",
+              c.chargeName
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: c.pricingMethod ?? "flat" })
+          ] }),
+          c.breakdown?.tiers && c.breakdown.tiers.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "font-medium text-muted-foreground mb-1", children: "Tier Breakdown" }),
+            /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
+              /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-muted-foreground", children: [
+                /* @__PURE__ */ jsx("th", { className: "text-left py-0.5 font-medium", children: "Tier" }),
+                /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: "Range" }),
+                /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: "Price/Unit" }),
+                /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: "Qty" }),
+                /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: "Subtotal" })
+              ] }) }),
+              /* @__PURE__ */ jsxs("tbody", { children: [
+                c.breakdown.tiers.map((t) => /* @__PURE__ */ jsxs("tr", { className: "border-t border-border/30", children: [
+                  /* @__PURE__ */ jsx("td", { className: "py-0.5", children: t.tier }),
+                  /* @__PURE__ */ jsxs("td", { className: "py-0.5 text-right font-mono", children: [
+                    t.from,
+                    "\u2013",
+                    t.to
+                  ] }),
+                  /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right font-mono", children: fmt(t.pricePerUnit, currency) }),
+                  /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right font-mono", children: t.quantity }),
+                  /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right font-mono", children: fmt(t.subtotal, currency) })
+                ] }, t.tier)),
+                /* @__PURE__ */ jsxs("tr", { className: "border-t font-medium", children: [
+                  /* @__PURE__ */ jsx("td", { colSpan: 4, className: "py-0.5 text-right", children: "Tiered Total" }),
+                  /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right font-mono", children: fmt(c.breakdown.tiers.reduce((s, t) => s + t.subtotal, 0), currency) })
+                ] })
+              ] })
+            ] })
+          ] }),
+          c.adjustments && c.adjustments.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "font-medium text-muted-foreground mb-1", children: "Applied Price Rules" }),
+            /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
+              /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-muted-foreground", children: [
+                /* @__PURE__ */ jsx("th", { className: "text-left py-0.5 font-medium", children: "Rule" }),
+                /* @__PURE__ */ jsx("th", { className: "text-left py-0.5 font-medium", children: "Type" }),
+                /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: "Value" }),
+                /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: "Before" }),
+                /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: "After" }),
+                /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: "Delta" })
+              ] }) }),
+              /* @__PURE__ */ jsx("tbody", { children: c.adjustments.map((adj, ai) => /* @__PURE__ */ jsxs("tr", { className: "border-t border-border/30", children: [
+                /* @__PURE__ */ jsx("td", { className: "py-0.5", children: adj.ruleName }),
+                /* @__PURE__ */ jsx("td", { className: "py-0.5", children: RULE_TYPE_LABELS[adj.ruleType] ?? adj.ruleType }),
+                /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right font-mono", children: fmtRuleValue(adj, currency) }),
+                /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right font-mono", children: fmt(adj.unitPriceBefore, currency) }),
+                /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right font-mono", children: fmt(adj.unitPriceAfter, currency) }),
+                /* @__PURE__ */ jsxs("td", { className: `py-0.5 text-right font-mono ${adj.delta < 0 ? "text-destructive" : adj.delta > 0 ? "text-status-success-text" : ""}`, children: [
+                  adj.delta > 0 ? "+" : "",
+                  fmt(adj.delta, currency)
+                ] })
+              ] }, ai)) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-1 border-t text-sm font-semibold", children: [
+            /* @__PURE__ */ jsx("span", { children: "Final Total" }),
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: c.totalPrice != null ? fmt(c.totalPrice, currency) : "\u2014" })
+          ] })
+        ] }) }) })
+      ] }, i);
+    }) })
+  ] }) });
+}
+function Spinner() {
+  return /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })
+  ] });
+}
+function ErrorBanner({ message, onDismiss }) {
+  return /* @__PURE__ */ jsxs(Alert, { variant: "destructive", className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "flex-1", children: message }),
+    onDismiss && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onDismiss,
+        className: "text-destructive/70 hover:text-destructive text-sm font-bold",
+        "aria-label": "Dismiss",
+        children: "\xD7"
+      }
+    )
+  ] });
+}
+function OfferingBrowser({ offerings, loading, search, onSearchChange, onSelect }) {
+  const filtered = offerings.filter((o) => {
+    if (!search.trim()) return true;
+    const q = search.toLowerCase();
+    return o.name.toLowerCase().includes(q) || o.code.toLowerCase().includes(q) || (o.description ?? "").toLowerCase().includes(q);
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium px-1", children: "Select Product Offering" }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("svg", { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground", fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" }) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "Search offerings\u2026",
+          value: search,
+          onChange: (e) => onSearchChange(e.target.value),
+          className: "w-full rounded-md border bg-background pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
+        }
+      )
+    ] }),
+    loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-8 justify-center text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Spinner, {}),
+      " Loading offerings\u2026"
+    ] }) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-8 text-center text-sm text-muted-foreground", children: search ? "No offerings match your search." : "No active offerings available." }) : /* @__PURE__ */ jsx("div", { className: "grid gap-2 sm:grid-cols-2 lg:grid-cols-3", children: filtered.map((offering) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => onSelect(offering),
+        className: "rounded-lg border bg-card p-4 text-left hover:border-primary hover:bg-primary/5 transition-colors group",
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium group-hover:text-primary transition-colors", children: offering.name }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground font-mono mt-0.5", children: offering.code }),
+          offering.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1 line-clamp-2", children: offering.description })
+        ]
+      },
+      offering.id
+    )) })
+  ] });
+}
+function ConfigurePanel({ title, attributes, config, quantity, arcTargetOptions, arcSelectedTargetIds, onArcTargetToggle, onConfigChange, onQuantityChange, onSubmit, submitLabel, submitting }) {
+  const noTargetsPicked = arcTargetOptions !== null && arcTargetOptions.length > 0 && arcSelectedTargetIds.length === 0;
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card", children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b px-4 py-3", children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: title }) }),
+    /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-4", children: [
+      arcTargetOptions && arcTargetOptions.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium mb-1", children: [
+          "Apply to subscription(s)",
+          /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-1.5 rounded-md border bg-background px-3 py-2", children: arcTargetOptions.map((opt) => {
+          const checked = arcSelectedTargetIds.includes(opt.subscriptionId);
+          return /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: "flex items-center gap-2 text-sm cursor-pointer hover:bg-muted/40 rounded px-1 py-0.5",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked,
+                    onChange: () => onArcTargetToggle(opt.subscriptionId),
+                    className: "h-4 w-4 rounded border-border"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", children: opt.code }),
+                opt.name && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                  "\u2014 ",
+                  opt.name
+                ] })
+              ]
+            },
+            opt.subscriptionId
+          );
+        }) }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "Pick one or more \u2014 a separate line will be created on each selected subscription." }),
+        noTargetsPicked && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive mt-1", children: "Select at least one target." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium mb-1", children: "Quantity" }),
+        /* @__PURE__ */ jsx(
+          NumberInput,
+          {
+            integer: true,
+            min: 1,
+            value: quantity,
+            onChange: (n) => onQuantityChange(Math.max(1, n ?? 1)),
+            className: "w-24"
+          }
+        )
+      ] }),
+      attributes.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No configurable attributes for this offering." }) : attributes.map((attr) => /* @__PURE__ */ jsx(AttributeField, { attribute: attr, value: config[attr.code], onChange: (v) => onConfigChange(attr.code, v) }, attr.code))
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "border-t px-4 py-3 flex justify-end", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: onSubmit,
+        disabled: submitting || noTargetsPicked,
+        className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm hover:bg-primary/90 transition-colors disabled:opacity-50",
+        children: [
+          submitting ? /* @__PURE__ */ jsx(Spinner, {}) : null,
+          " ",
+          submitLabel
+        ]
+      }
+    ) })
+  ] });
+}
+function AttributeField({ attribute, value, onChange }) {
+  const { code, name, attributeType, isRequired, options, constraints, helpText, defaultValue } = attribute;
+  const currentValue = value ?? defaultValue ?? "";
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium mb-1", children: [
+      name,
+      isRequired && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-0.5", children: "*" })
+    ] }),
+    (attributeType === "select" || attributeType === "enum") && options && options.length > 0 ? /* @__PURE__ */ jsxs(
+      "select",
+      {
+        value: String(currentValue),
+        onChange: (e) => onChange(e.target.value),
+        className: "w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50",
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "\u2014 Select \u2014" }),
+          options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+        ]
+      }
+    ) : attributeType === "boolean" ? /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("input", { type: "checkbox", checked: Boolean(currentValue), onChange: (e) => onChange(e.target.checked), className: "rounded border-border" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: helpText ?? "Enable" })
+    ] }) : attributeType === "number" ? /* @__PURE__ */ jsx(
+      NumberInput,
+      {
+        value: typeof currentValue === "number" ? currentValue : currentValue === "" || currentValue == null ? null : Number(currentValue),
+        min: constraints?.min,
+        max: constraints?.max,
+        onChange: (n) => onChange(n ?? "")
+      }
+    ) : /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        value: String(currentValue),
+        onChange: (e) => onChange(e.target.value),
+        className: "w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
+      }
+    ),
+    helpText && attributeType !== "boolean" && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: helpText })
+  ] });
+}
+export {
+  CpqQuoteDetailPage as default
+};
+//# sourceMappingURL=page.js.map