@dainamite/cpq 0.2.2

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

@@ -0,0 +1,794 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useRouter, useParams } from "next/navigation";
+import { Alert } from "@open-mercato/ui/primitives/alert";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Tag } from "@open-mercato/ui/primitives/tag";
+import { FormHeader } from "@open-mercato/ui/backend/forms";
+import {
+  formatStatusLabel,
+  subscriptionStatusMap
+} from "../../../../../components/statusMaps.js";
+import { StatusPath } from "../../../../../components/StatusPath.js";
+const CHANGE_TYPE_LABELS = {
+  created: "Created",
+  amend: "Amended",
+  renew: "Renewed",
+  cancel: "Cancelled",
+  "merge-result": "Created from merging contracts",
+  "merge-source": "Merged into a new contract"
+};
+const CHANGE_TYPE_VARIANTS = {
+  created: "neutral",
+  amend: "info",
+  renew: "success",
+  cancel: "error",
+  "merge-result": "brand",
+  "merge-source": "warning"
+};
+const ALLOWED_TRANSITIONS = {
+  pending: ["active", "terminated"],
+  active: ["suspended", "terminated", "expired"],
+  suspended: ["active", "terminated"],
+  terminated: [],
+  expired: []
+};
+const STATUS_LABELS = {
+  pending: "Pending",
+  active: "Active",
+  suspended: "Suspended",
+  terminated: "Terminated",
+  expired: "Expired"
+};
+function fmt(amount, currency) {
+  return new Intl.NumberFormat("en-US", { style: "currency", currency }).format(Number(amount));
+}
+function StatusBadge({ status }) {
+  return /* @__PURE__ */ jsx(Tag, { variant: subscriptionStatusMap[status] ?? "neutral", dot: true, children: formatStatusLabel(status) });
+}
+function SubscriptionDetailPage(props) {
+  const router = useRouter();
+  const urlParams = useParams();
+  const subId = props.params?.id ?? urlParams?.id;
+  const [sub, setSub] = React.useState(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const [customerName, setCustomerName] = React.useState(null);
+  const [assets, setAssets] = React.useState([]);
+  const [expandedItems, setExpandedItems] = React.useState(/* @__PURE__ */ new Set());
+  const [transitioning, setTransitioning] = React.useState(false);
+  const [sourceQuoteNumber, setSourceQuoteNumber] = React.useState(null);
+  const [sourceOrderNumber, setSourceOrderNumber] = React.useState(null);
+  const [productNames, setProductNames] = React.useState({});
+  const [offeringNames, setOfferingNames] = React.useState({});
+  const [specNames, setSpecNames] = React.useState({});
+  const [logQuoteNumbers, setLogQuoteNumbers] = React.useState({});
+  const [logOrderNumbers, setLogOrderNumbers] = React.useState({});
+  const [arcInFlight, setArcInFlight] = React.useState(null);
+  const [changeLog, setChangeLog] = React.useState([]);
+  const [changeLogLoading, setChangeLogLoading] = React.useState(false);
+  const startArcQuote = React.useCallback(
+    async (type) => {
+      if (!sub) return;
+      setArcInFlight(type);
+      try {
+        const res = await fetch("/api/cpq/quotes/from-subscription", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ subscriptionId: sub.id, type })
+        });
+        if (!res.ok) {
+          const body = await res.json().catch(() => ({}));
+          if (body.existingQuoteId) {
+            const ok = window.confirm(
+              `${body.error ?? "Subscription has another ARC quote in progress."}
+
+Open the existing quote now?`
+            );
+            if (ok) {
+              router.push(`/backend/cpq/quotes/${body.existingQuoteId}`);
+            }
+            return;
+          }
+          alert(`Failed to start ${type} quote: ${body.error ?? res.statusText}`);
+          return;
+        }
+        const data = await res.json();
+        router.push(`/backend/cpq/quotes/${data.quoteId}`);
+      } finally {
+        setArcInFlight(null);
+      }
+    },
+    [router, sub]
+  );
+  const transitionStatus = async (targetStatus) => {
+    if (!sub) return;
+    try {
+      setTransitioning(true);
+      setError(null);
+      const res = await fetch("/api/cpq/inventory/subscriptions/status", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id: sub.id, targetStatus })
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data?.error ?? "Status transition failed");
+      const [freshSub, freshAssets] = await Promise.all([
+        fetch(`/api/cpq/inventory/subscriptions?id=${sub.id}`).then((r) => r.ok ? r.json() : null),
+        fetch(`/api/cpq/inventory/assets?subscriptionId=${sub.id}&pageSize=50`).then((r) => r.ok ? r.json() : null).then((r) => r?.items ?? [])
+      ]);
+      if (freshSub) {
+        setSub(freshSub);
+      } else {
+        setSub((prev) => prev ? { ...prev, ...data } : prev);
+      }
+      setAssets(freshAssets);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setTransitioning(false);
+    }
+  };
+  React.useEffect(() => {
+    let cancelled = false;
+    async function loadLog() {
+      setChangeLogLoading(true);
+      try {
+        const r = await fetch(`/api/cpq/inventory/subscriptions/${subId}/change-log?pageSize=50`);
+        if (r.ok && !cancelled) {
+          const data = await r.json();
+          const rows = data.items ?? [];
+          setChangeLog(rows);
+          const qIds = new Set(rows.map((r2) => r2.sourceQuoteId).filter((x) => !!x));
+          const oIds = new Set(rows.map((r2) => r2.sourceOrderId).filter((x) => !!x));
+          for (const qId of qIds) {
+            fetch(`/api/cpq/quotes/${qId}`).then((r2) => r2.ok ? r2.json() : null).then((q) => {
+              if (q?.quoteNumber && !cancelled) {
+                setLogQuoteNumbers((prev) => ({ ...prev, [qId]: q.quoteNumber }));
+              }
+            }).catch(() => {
+            });
+          }
+          for (const oId of oIds) {
+            fetch(`/api/cpq/orders/${oId}`).then((r2) => r2.ok ? r2.json() : null).then((o) => {
+              if (o?.orderNumber && !cancelled) {
+                setLogOrderNumbers((prev) => ({ ...prev, [oId]: o.orderNumber }));
+              }
+            }).catch(() => {
+            });
+          }
+        }
+      } finally {
+        if (!cancelled) setChangeLogLoading(false);
+      }
+    }
+    if (subId) void loadLog();
+    return () => {
+      cancelled = true;
+    };
+  }, [subId]);
+  React.useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      try {
+        const res = await fetch(`/api/cpq/inventory/subscriptions?id=${subId}`);
+        if (!res.ok) throw new Error("Subscription not found");
+        const data = await res.json();
+        if (!cancelled) {
+          setSub(data);
+          fetch(`/api/customers/companies?id=${data.customerId}&pageSize=1`).then((r) => r.json()).then((result) => {
+            const items = result.items ?? result ?? [];
+            const c = items[0];
+            if (c && !cancelled) setCustomerName(c.display_name || c.displayName || c.name || null);
+          }).catch(() => {
+          });
+          fetch(`/api/cpq/inventory/assets?subscriptionId=${subId}&pageSize=50`).then((r) => r.json()).then((result) => {
+            if (!cancelled) setAssets(result.items ?? []);
+          }).catch(() => {
+          });
+          if (data.sourceQuoteId) {
+            fetch(`/api/cpq/quotes/${data.sourceQuoteId}`).then((r) => r.ok ? r.json() : null).then((q) => {
+              if (q && !cancelled) setSourceQuoteNumber(q.quoteNumber ?? null);
+            }).catch(() => {
+            });
+          }
+          if (data.sourceOrderId) {
+            fetch(`/api/cpq/orders/${data.sourceOrderId}`).then((r) => r.ok ? r.json() : null).then((o) => {
+              if (o && !cancelled) setSourceOrderNumber(o.orderNumber ?? null);
+            }).catch(() => {
+            });
+          }
+          const flatChildren = (nodes) => nodes.flatMap((n) => [n, ...flatChildren(n.children ?? [])]);
+          const allItems = flatChildren(data.items ?? []);
+          const productIds = new Set(allItems.map((i) => i.productId).filter((x) => !!x));
+          const offeringIds = new Set(allItems.map((i) => i.offeringId).filter((x) => !!x));
+          const specIds = new Set(allItems.map((i) => i.specId).filter((x) => !!x));
+          for (const offeringId of offeringIds) {
+            fetch(`/api/cpq/product-offerings?id=${offeringId}`).then((r) => r.ok ? r.json() : null).then((o) => {
+              if (!o || cancelled) return;
+              if (o.name) setOfferingNames((prev) => ({ ...prev, [offeringId]: o.name }));
+              if (o.specification?.name) setSpecNames((prev) => ({ ...prev, [o.specification.id]: o.specification.name }));
+            }).catch(() => {
+            });
+          }
+          for (const specId of specIds) {
+            fetch(`/api/cpq/product-specifications?id=${specId}`).then((r) => r.ok ? r.json() : null).then((s) => {
+              if (s?.name && !cancelled) setSpecNames((prev) => ({ ...prev, [specId]: s.name }));
+            }).catch(() => {
+            });
+          }
+          for (const productId of productIds) {
+            fetch(`/api/catalog/products?id=${productId}`).then((r) => r.ok ? r.json() : null).then((res2) => {
+              if (!res2 || cancelled) return;
+              const p = (res2.items ?? res2)[0] ?? res2;
+              const name = p?.title ?? p?.name ?? p?.handle ?? null;
+              if (name) setProductNames((prev) => ({ ...prev, [productId]: name }));
+            }).catch(() => {
+            });
+          }
+        }
+      } catch (err) {
+        if (!cancelled) setError(err.message);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [subId]);
+  const toggleItem = (id) => {
+    setExpandedItems((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 (!sub) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("button", { onClick: () => router.push("/backend/cpq/inventory"), className: "text-sm text-muted-foreground hover:text-foreground", children: "\u2190 Back" }),
+      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: "Subscription not found." })
+    ] });
+  }
+  const currency = sub.currencyCode || "USD";
+  const flatItems = flattenItems(sub.items);
+  const canArc = sub.status === "active" || sub.status === "suspended";
+  const statusTransitions = ALLOWED_TRANSITIONS[sub.status] ?? [];
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx(
+      FormHeader,
+      {
+        mode: "detail",
+        backHref: "/backend/cpq/inventory",
+        backLabel: "Back to Customer Inventory",
+        entityTypeLabel: "Subscription",
+        title: sub.name,
+        statusBadge: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 pt-1", children: [
+          /* @__PURE__ */ jsx(Tag, { variant: subscriptionStatusMap[sub.status] ?? "neutral", dot: true, children: STATUS_LABELS[sub.status] ?? formatStatusLabel(sub.status) }),
+          /* @__PURE__ */ jsx(Tag, { variant: "neutral", className: "capitalize", children: sub.billingCycle }),
+          transitioning && /* @__PURE__ */ jsx(Spinner, {})
+        ] }),
+        actionsContent: canArc ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              disabled: arcInFlight !== null,
+              onClick: () => startArcQuote("amend"),
+              children: "Amend"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              disabled: arcInFlight !== null,
+              onClick: () => startArcQuote("renew"),
+              children: "Renew"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "destructive-outline",
+              disabled: arcInFlight !== null,
+              onClick: () => startArcQuote("cancel"),
+              children: "Cancel"
+            }
+          )
+        ] }) : null
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 flex-wrap", children: /* @__PURE__ */ jsx(
+      StatusPath,
+      {
+        current: sub.status,
+        path: ["pending", "active"],
+        terminals: ["suspended", "terminated", "expired"],
+        statusMap: subscriptionStatusMap,
+        labels: STATUS_LABELS,
+        onTransition: transitionStatus,
+        allowedTransitions: statusTransitions,
+        disabled: transitioning,
+        ariaLabel: "Subscription status path"
+      }
+    ) }),
+    error && /* @__PURE__ */ jsx(ErrorBanner, { message: error }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4 space-y-3", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Subscription Details" }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2", children: [
+          /* @__PURE__ */ jsx(Field, { label: "Code", value: sub.code, mono: true }),
+          /* @__PURE__ */ jsx(Field, { label: "Status", value: sub.status }),
+          /* @__PURE__ */ jsx(Field, { label: "Billing Cycle", value: sub.billingCycle }),
+          /* @__PURE__ */ jsx(Field, { label: "Currency", value: currency }),
+          /* @__PURE__ */ jsx(Field, { label: "Auto-Renew", value: sub.autoRenew ? "Yes" : "No" }),
+          sub.termMonths != null && /* @__PURE__ */ jsx(Field, { label: "Term", value: `${sub.termMonths} months` }),
+          sub.startDate && /* @__PURE__ */ jsx(Field, { label: "Start Date", value: new Date(sub.startDate).toLocaleDateString() }),
+          sub.currentTermEnd && /* @__PURE__ */ jsx(Field, { label: "Term End", value: new Date(sub.currentTermEnd).toLocaleDateString() }),
+          sub.activatedAt && /* @__PURE__ */ jsx(Field, { label: "Activated", value: new Date(sub.activatedAt).toLocaleString() }),
+          sub.suspendedAt && /* @__PURE__ */ jsx(Field, { label: "Suspended", value: new Date(sub.suspendedAt).toLocaleString() }),
+          sub.terminatedAt && /* @__PURE__ */ jsx(Field, { label: "Terminated", value: new Date(sub.terminatedAt).toLocaleString() })
+        ] }),
+        sub.description && /* @__PURE__ */ jsxs("div", { className: "pt-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Description" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm", children: sub.description })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4 space-y-3", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Pricing & References" }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__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(sub.mrcAmount, currency) })
+          ] }),
+          /* @__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(sub.nrcAmount, currency) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 pt-1", children: [
+          /* @__PURE__ */ jsx(Field, { label: "Customer", value: customerName ?? sub.customerId.slice(0, 12) + "\u2026" }),
+          /* @__PURE__ */ jsx(Field, { label: "Created", value: new Date(sub.createdAt).toLocaleString() }),
+          sub.sourceQuoteId && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Source Quote" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => router.push(`/backend/cpq/quotes/${sub.sourceQuoteId}`),
+                className: "text-sm text-primary hover:underline",
+                children: sourceQuoteNumber ?? `${sub.sourceQuoteId.slice(0, 8)}\u2026`
+              }
+            )
+          ] }),
+          sub.sourceOrderId && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Source Order" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => router.push(`/backend/cpq/orders/${sub.sourceOrderId}`),
+                className: "text-sm text-primary hover:underline",
+                children: sourceOrderNumber ?? `${sub.sourceOrderId.slice(0, 8)}\u2026`
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }),
+    sub.metadata && Object.keys(sub.metadata).length > 0 && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium mb-2", children: "Metadata" }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-x-4 gap-y-1", children: Object.entries(sub.metadata).map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "text-xs", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          key,
+          ": "
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: String(value) })
+      ] }, key)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("h3", { className: "text-sm font-medium mb-2 px-1", children: [
+        "Subscription Items (",
+        flatItems.length,
+        ")"
+      ] }),
+      flatItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card py-8 text-center text-sm text-muted-foreground", children: "No items." }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card divide-y", children: flatItems.map((item) => {
+        const isExpanded = expandedItems.has(item.id);
+        const indent = item._depth ?? 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 cursor-pointer",
+              style: { paddingLeft: `${16 + indent * 24}px` },
+              onClick: () => toggleItem(item.id),
+              children: [
+                /* @__PURE__ */ jsx("button", { 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__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: item.name }),
+                  item.quantity > 1 && /* @__PURE__ */ jsxs("span", { className: "rounded bg-muted px-1.5 py-0.5 text-xs font-medium", children: [
+                    "x",
+                    item.quantity
+                  ] }),
+                  /* @__PURE__ */ jsx(StatusBadge, { status: item.status })
+                ] }) }),
+                /* @__PURE__ */ jsxs("div", { className: "shrink-0 text-right text-xs space-y-0.5", children: [
+                  Number(item.mrcAmount) > 0 && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "MRC " }),
+                    /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", children: fmt(item.mrcAmount, item.currencyCode || currency) })
+                  ] }),
+                  Number(item.nrcAmount) > 0 && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "NRC " }),
+                    /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", children: fmt(item.nrcAmount, item.currencyCode || currency) })
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          isExpanded && /* @__PURE__ */ jsxs("div", { className: "border-t bg-muted/10 px-12 py-3 space-y-3", style: { paddingLeft: `${40 + indent * 24}px` }, children: [
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-x-4 gap-y-2", children: [
+              item.offeringId && /* @__PURE__ */ jsx(
+                RefField,
+                {
+                  label: "Offering",
+                  name: offeringNames[item.offeringId],
+                  fallback: item.offeringId,
+                  onClick: () => router.push(`/backend/cpq/offerings/${item.offeringId}`)
+                }
+              ),
+              item.specId && /* @__PURE__ */ jsx(
+                RefField,
+                {
+                  label: "Specification",
+                  name: specNames[item.specId],
+                  fallback: item.specId,
+                  onClick: () => router.push(`/backend/cpq/specifications/${item.specId}`)
+                }
+              ),
+              item.productId && /* @__PURE__ */ jsx(
+                RefField,
+                {
+                  label: "Product",
+                  name: productNames[item.productId],
+                  fallback: item.productId,
+                  onClick: () => router.push(`/backend/catalog/products/${item.productId}`)
+                }
+              ),
+              /* @__PURE__ */ jsx(Field, { label: "Currency", value: item.currencyCode || currency }),
+              /* @__PURE__ */ jsx(Field, { label: "Quantity", value: String(item.quantity) }),
+              item.capacityTotal && /* @__PURE__ */ jsx(Field, { label: "Capacity", value: `${item.capacityUsed ?? "0"} / ${item.capacityTotal} ${item.capacityUnit ?? ""}` })
+            ] }),
+            item.configuration && Object.keys(item.configuration).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Configuration" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-x-4 gap-y-1", children: Object.entries(item.configuration).map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "text-xs", children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                  key,
+                  ": "
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: String(value) })
+              ] }, key)) })
+            ] }),
+            item.charges && item.charges.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Charges" }),
+              /* @__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("tbody", { children: item.charges.map((c, i) => /* @__PURE__ */ jsxs("tr", { className: "border-t border-dashed border-border/50", children: [
+                  /* @__PURE__ */ jsx("td", { className: "py-1", children: c.chargeName ?? "\u2014" }),
+                  /* @__PURE__ */ jsx("td", { className: "py-1 uppercase", children: c.chargeType ?? "\u2014" }),
+                  /* @__PURE__ */ jsx("td", { className: "py-1 text-right font-mono", children: c.unitPrice != null ? fmt(c.unitPrice, currency) : "\u2014" }),
+                  /* @__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) : "\u2014" })
+                ] }, i)) })
+              ] })
+            ] }),
+            item.metadata && Object.keys(item.metadata).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Metadata" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-x-4 gap-y-1", children: Object.entries(item.metadata).map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "text-xs", children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                  key,
+                  ": "
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: String(value) })
+              ] }, key)) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-4 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Created: ",
+                new Date(item.createdAt).toLocaleString()
+              ] }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Updated: ",
+                new Date(item.updatedAt).toLocaleString()
+              ] })
+            ] })
+          ] })
+        ] }, item.id);
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("h3", { className: "text-sm font-medium mb-2 px-1", children: [
+        "Change History (",
+        changeLog.length,
+        ")"
+      ] }),
+      changeLogLoading ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card py-6 text-center text-sm text-muted-foreground", children: "Loading\u2026" }) : changeLog.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card py-6 text-center text-sm text-muted-foreground", children: "No ARC changes yet." }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card divide-y", children: changeLog.map((row) => /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 space-y-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Tag, { variant: CHANGE_TYPE_VARIANTS[row.changeType] ?? "neutral", children: CHANGE_TYPE_LABELS[row.changeType] ?? row.changeType }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: new Date(row.effectiveAt).toLocaleString() }),
+          row.sourceQuoteId && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => router.push(`/backend/cpq/quotes/${row.sourceQuoteId}`),
+              className: "text-xs text-primary hover:underline",
+              children: [
+                "Quote ",
+                logQuoteNumbers[row.sourceQuoteId] ?? `${row.sourceQuoteId.slice(0, 8)}\u2026`
+              ]
+            }
+          ),
+          row.sourceOrderId && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => router.push(`/backend/cpq/orders/${row.sourceOrderId}`),
+              className: "text-xs text-primary hover:underline",
+              children: [
+                "Order ",
+                logOrderNumbers[row.sourceOrderId] ?? `${row.sourceOrderId.slice(0, 8)}\u2026`
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(ChangeLogLineDetails, { row, currency }),
+        row.termChange && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+          "Term: ",
+          String(row.termChange.oldTermEnd ?? "\u2014"),
+          " \u2192 ",
+          String(row.termChange.newTermEnd ?? "\u2014")
+        ] }),
+        row.reasonCode && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+          "Reason: ",
+          row.reasonCode,
+          row.reasonText ? ` \u2014 ${row.reasonText}` : ""
+        ] }),
+        row.etfAmount && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+          "ETF: ",
+          row.etfAmount,
+          " ",
+          row.etfCurrency ?? ""
+        ] }),
+        row.mergedIntoSubscriptionId && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+          "Merged into",
+          " ",
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => router.push(`/backend/cpq/inventory/subscriptions/${row.mergedIntoSubscriptionId}`),
+              className: "text-primary hover:underline",
+              children: [
+                "subscription ",
+                row.mergedIntoSubscriptionId.slice(0, 8),
+                "\u2026"
+              ]
+            }
+          )
+        ] }),
+        row.mergedFromSubscriptionIds && row.mergedFromSubscriptionIds.length > 0 && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+          "Merged from ",
+          row.mergedFromSubscriptionIds.length,
+          " subscriptions"
+        ] })
+      ] }, row.id)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("h3", { className: "text-sm font-medium mb-2 px-1", children: [
+        "Linked Assets (",
+        assets.length,
+        ")"
+      ] }),
+      assets.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card py-8 text-center text-sm text-muted-foreground", children: "No assets linked to this subscription." }) : /* @__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: "Status" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-right font-medium", children: "Price" }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-right font-medium", children: "Qty" })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: assets.map((a) => /* @__PURE__ */ jsxs("tr", { onClick: () => router.push(`/backend/cpq/inventory/assets/${a.id}`), className: "border-b cursor-pointer hover:bg-muted/30 transition-colors", children: [
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-muted-foreground", children: a.code }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3 font-medium text-primary", children: a.name }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: a.assetType.replace(/_/g, " ") }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(StatusBadge, { status: a.status }) }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-right font-mono", children: fmt(a.purchasePrice, a.currencyCode || currency) }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-right font-mono", children: a.quantity })
+        ] }, a.id)) })
+      ] }) })
+    ] })
+  ] });
+}
+function flattenItems(items, depth = 0) {
+  const result = [];
+  for (const item of items) {
+    result.push({ ...item, _depth: depth });
+    if (item.children && item.children.length > 0) {
+      result.push(...flattenItems(item.children, depth + 1));
+    }
+  }
+  return result;
+}
+function Field({ label, value, mono }) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("p", { className: `text-sm ${mono ? "font-mono" : ""}`, children: value })
+  ] });
+}
+function RefField({
+  label,
+  name,
+  fallback,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick,
+        className: "text-sm text-primary hover:underline text-left truncate max-w-full",
+        title: name ?? fallback,
+        children: name ?? `${fallback.slice(0, 12)}\u2026`
+      }
+    )
+  ] });
+}
+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 }) {
+  return /* @__PURE__ */ jsx(Alert, { variant: "destructive", children: message });
+}
+function ChangeLogLineDetails({ row, currency }) {
+  const beforeItems = new Map(
+    (row.beforeSnapshot?.items ?? []).map((it) => [it.id, it])
+  );
+  const afterItems = new Map(
+    (row.afterSnapshot?.items ?? []).map((it) => [it.id, it])
+  );
+  const derived = [];
+  if (row.lineChanges && row.lineChanges.length > 0) {
+    for (let i = 0; i < row.lineChanges.length; i++) {
+      const lc = row.lineChanges[i];
+      const itemId = lc.itemId ?? "";
+      const before = beforeItems.get(itemId);
+      const after = afterItems.get(itemId);
+      const item = after ?? before;
+      const beforeMrc = before ? Number(before.mrcAmount ?? 0) : null;
+      const afterMrc = after ? Number(after.mrcAmount ?? 0) : null;
+      const explicitDelta = lc.mrcDelta != null ? Number(lc.mrcDelta) : null;
+      const computedDelta = beforeMrc != null && afterMrc != null ? afterMrc - beforeMrc : null;
+      derived.push({
+        key: `${itemId}-${i}`,
+        action: lc.action,
+        name: item?.name ?? (lc.action === "add" ? "New item" : "Item"),
+        beforeMrc,
+        afterMrc: lc.action === "add" && afterMrc == null && lc.mrcAmount != null ? Number(lc.mrcAmount) : afterMrc,
+        delta: explicitDelta ?? computedDelta
+      });
+    }
+  } else if (row.changeType === "cancel" && row.beforeSnapshot?.items) {
+    for (const it of row.beforeSnapshot.items) {
+      const mrc = Number(it.mrcAmount ?? 0);
+      derived.push({
+        key: it.id,
+        action: "cancel",
+        name: it.name ?? "Item",
+        beforeMrc: mrc,
+        afterMrc: 0,
+        delta: -mrc
+      });
+    }
+  } else if (row.changeType === "merge-result" && row.afterSnapshot?.items) {
+    for (const it of row.afterSnapshot.items) {
+      const mrc = Number(it.mrcAmount ?? 0);
+      derived.push({
+        key: it.id,
+        action: "add",
+        name: it.name ?? "Item",
+        beforeMrc: null,
+        afterMrc: mrc,
+        delta: null
+      });
+    }
+  } else if (row.changeType === "merge-source" && row.beforeSnapshot?.items) {
+    for (const it of row.beforeSnapshot.items) {
+      const mrc = Number(it.mrcAmount ?? 0);
+      derived.push({
+        key: it.id,
+        action: "cancel",
+        name: it.name ?? "Item",
+        beforeMrc: mrc,
+        afterMrc: 0,
+        delta: -mrc
+      });
+    }
+  }
+  if (derived.length === 0) {
+    if (row.changeType === "amend" || row.changeType === "renew") {
+      return /* @__PURE__ */ jsx("div", { className: "mt-1.5 text-xs text-muted-foreground italic", children: "No item-level changes recorded." });
+    }
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "mt-1.5 rounded border bg-muted/20 px-3 py-2 space-y-1", children: derived.map((d) => /* @__PURE__ */ jsx(ChangeLogLineRow, { change: d, currency }, d.key)) });
+}
+const ACTION_GLYPH = {
+  add: { sign: "+", color: "text-status-success-text", label: "added" },
+  modify: { sign: "~", color: "text-status-info-text", label: "modified" },
+  cancel: { sign: "\u2212", color: "text-destructive", label: "removed" }
+};
+function ChangeLogLineRow({
+  change,
+  currency
+}) {
+  const glyph = ACTION_GLYPH[change.action];
+  const showPriceChange = change.action === "modify" && change.beforeMrc != null && change.afterMrc != null && change.beforeMrc !== change.afterMrc;
+  const showSinglePrice = !showPriceChange && (change.action === "add" && change.afterMrc != null && change.afterMrc > 0 || change.action === "cancel" && change.beforeMrc != null && change.beforeMrc > 0);
+  const showDelta = change.delta != null && change.delta !== 0;
+  const isNoopModify = change.action === "modify" && !showPriceChange && !showDelta;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs", children: [
+    /* @__PURE__ */ jsx("span", { className: `font-bold w-3 text-center ${glyph.color}`, title: glyph.label, children: glyph.sign }),
+    /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: change.name }),
+    showPriceChange && /* @__PURE__ */ jsxs("span", { className: "font-mono text-muted-foreground", children: [
+      fmt(change.beforeMrc, currency),
+      " \u2192 ",
+      fmt(change.afterMrc, currency),
+      "/mo"
+    ] }),
+    showSinglePrice && change.action === "add" && /* @__PURE__ */ jsxs("span", { className: "font-mono text-muted-foreground", children: [
+      fmt(change.afterMrc, currency),
+      "/mo"
+    ] }),
+    showSinglePrice && change.action === "cancel" && /* @__PURE__ */ jsxs("span", { className: "font-mono text-muted-foreground", children: [
+      "was ",
+      fmt(change.beforeMrc, currency),
+      "/mo"
+    ] }),
+    showDelta && /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: `font-mono font-medium ${change.delta > 0 ? "text-status-success-text" : "text-destructive"}`,
+        children: [
+          "(",
+          change.delta > 0 ? "+" : "",
+          fmt(change.delta, currency),
+          "/mo)"
+        ]
+      }
+    ),
+    isNoopModify && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground italic", children: "no price change" })
+  ] });
+}
+export {
+  SubscriptionDetailPage as default
+};
+//# sourceMappingURL=page.js.map