@burdenoff/microfe-billing 2026.510.114

package/dist/billing/modules/addons/pages/AddonDetailPage.js

@@ -0,0 +1,280 @@
+import { AccessDenied as e } from "../../../shared/components/AccessDenied.js";
+import { PageHeader as t } from "../../../shared/components/PageHeader.js";
+import { ServerError as n } from "../../../shared/components/ServerError.js";
+import "../../../shared/components/index.js";
+import { formatCurrency as r, formatPlanDuration as i, formatPlanDurationLabel as a } from "../../../shared/utils/format.js";
+import { isServerError as o } from "../../../shared/utils/error.js";
+import "../../../shared/utils/index.js";
+import { useBillingPermissions as s } from "../../../hooks/useBillingPermissions.js";
+import { useBillingNavigate as c } from "../../../hooks/useBillingNavigate.js";
+import { useAddon as l, useAddonMutations as u } from "../hooks/useAddons.js";
+import "../hooks/index.js";
+import { getDisplayPrice as d, useDefaultBillingCurrency as f } from "../../../hooks/useDefaultBillingCurrency.js";
+import { useMemo as p } from "react";
+import { useParams as m } from "react-router-dom";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useI18n as _ } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/billing/modules/addons/pages/AddonDetailPage.tsx
+function v(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) {
+		if (!n.quota) continue;
+		let e = n.quota.id, r = n.quota.limits, i = r?.value ?? 0, a = r?.type ?? "unknown", o = t.get(e);
+		o ? o.totalValue += i : t.set(e, {
+			quotaId: e,
+			name: n.quota.name ?? "Unknown Quota",
+			totalValue: i,
+			type: a
+		});
+	}
+	return Array.from(t.values());
+}
+var y = () => {
+	let { t: y } = _(), b = (e, t) => {
+		let n = y(e);
+		return n === e ? t : n;
+	}, { addonId: x } = m(), S = c(), C = s(), w = f(), { addon: T, isLoading: E, error: D, refetch: O } = l(x), { toggleAddon: k, isToggling: A } = u(), j = p(() => v(T?.features || []), [T?.features]);
+	return C.canViewAddons ? E ? /* @__PURE__ */ g("div", {
+		className: "space-y-6 p-6",
+		children: [/* @__PURE__ */ h("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ g("div", {
+			className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
+			children: [/* @__PURE__ */ h("div", {
+				className: "lg:col-span-2 space-y-4",
+				children: [
+					1,
+					2,
+					3
+				].map((e) => /* @__PURE__ */ h("div", { className: "h-24 bg-muted animate-pulse rounded" }, e))
+			}), /* @__PURE__ */ h("div", { className: "h-64 bg-muted animate-pulse rounded" })]
+		})]
+	}) : D && o(D) ? /* @__PURE__ */ h("div", {
+		className: "p-6",
+		children: /* @__PURE__ */ h(n, {
+			title: b("billing.addons.serverUnavailable", "Server Unavailable"),
+			message: b("billing.addons.serverUnavailableMessage", "Unable to load addon details. The server might be down or experiencing issues."),
+			onRetry: () => O(),
+			showRetry: !0
+		})
+	}) : T ? /* @__PURE__ */ g("div", {
+		className: "space-y-6 p-6",
+		children: [/* @__PURE__ */ h(t, {
+			title: T.name,
+			description: `${a(T.duration)} addon`
+		}), /* @__PURE__ */ g("div", {
+			className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
+			children: [/* @__PURE__ */ g("div", {
+				className: "lg:col-span-2 space-y-6",
+				children: [/* @__PURE__ */ g("div", {
+					className: "border border-border rounded-lg bg-card overflow-hidden",
+					children: [/* @__PURE__ */ h("div", {
+						className: "p-4 border-b border-border bg-muted/30",
+						children: /* @__PURE__ */ h("h2", {
+							className: "font-semibold text-foreground",
+							children: b("billing.addons.pricing", "Pricing")
+						})
+					}), /* @__PURE__ */ g("div", {
+						className: "p-6",
+						children: [/* @__PURE__ */ g("div", {
+							className: "flex items-baseline gap-2",
+							children: [/* @__PURE__ */ h("span", {
+								className: "text-4xl font-bold text-foreground",
+								children: (() => {
+									let { price: e, currency: t } = d(T.price, T.currency, T.currencyPrices, w);
+									return r(e, t);
+								})()
+							}), /* @__PURE__ */ g("span", {
+								className: "text-lg text-muted-foreground",
+								children: ["/ ", i(T.duration)]
+							})]
+						}), /* @__PURE__ */ g("p", {
+							className: "text-sm text-muted-foreground mt-2",
+							children: [
+								b("billing.addons.billed", "Billed"),
+								" ",
+								T.duration === "monthly" ? b("billing.addons.everyMonth", "every month") : b("billing.addons.annually", "annually")
+							]
+						})]
+					})]
+				}), /* @__PURE__ */ g("div", {
+					className: "border border-border rounded-lg bg-card overflow-hidden",
+					children: [/* @__PURE__ */ h("div", {
+						className: "p-4 border-b border-border bg-muted/30",
+						children: /* @__PURE__ */ g("h2", {
+							className: "font-semibold text-foreground",
+							children: [
+								b("billing.addons.includedQuotas", "Included Quotas"),
+								" (",
+								j.length,
+								")"
+							]
+						})
+					}), /* @__PURE__ */ h("div", {
+						className: "p-4",
+						children: j.length === 0 ? /* @__PURE__ */ h("p", {
+							className: "text-sm text-muted-foreground py-4 text-center",
+							children: b("billing.addons.noQuotas", "No quotas associated with this addon.")
+						}) : /* @__PURE__ */ h("div", {
+							className: "space-y-3",
+							children: j.map((e) => /* @__PURE__ */ g("div", {
+								className: "flex items-center justify-between p-3 border border-border rounded-lg bg-muted/20",
+								children: [/* @__PURE__ */ g("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ h("div", {
+										className: "w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center",
+										children: /* @__PURE__ */ h("svg", {
+											className: "w-4 h-4 text-primary",
+											fill: "none",
+											viewBox: "0 0 24 24",
+											stroke: "currentColor",
+											children: /* @__PURE__ */ h("path", {
+												strokeLinecap: "round",
+												strokeLinejoin: "round",
+												strokeWidth: 2,
+												d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+											})
+										})
+									}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("p", {
+										className: "font-medium text-foreground",
+										children: e.name
+									}), /* @__PURE__ */ g("p", {
+										className: "text-xs text-muted-foreground capitalize",
+										children: ["Type: ", e.type]
+									})] })]
+								}), /* @__PURE__ */ g("div", {
+									className: "text-right",
+									children: [/* @__PURE__ */ h("span", {
+										className: "text-lg font-semibold text-status-success-text",
+										children: e.totalValue.toLocaleString()
+									}), /* @__PURE__ */ h("p", {
+										className: "text-xs text-muted-foreground",
+										children: "total"
+									})]
+								})]
+							}, e.quotaId))
+						})
+					})]
+				})]
+			}), /* @__PURE__ */ g("div", {
+				className: "space-y-6",
+				children: [
+					/* @__PURE__ */ g("div", {
+						className: "border border-border rounded-lg bg-card overflow-hidden",
+						children: [/* @__PURE__ */ h("div", {
+							className: "p-4 border-b border-border bg-muted/30",
+							children: /* @__PURE__ */ h("h2", {
+								className: "font-semibold text-foreground",
+								children: b("billing.addons.statusTitle", "Status")
+							})
+						}), /* @__PURE__ */ g("div", {
+							className: "p-4 space-y-4",
+							children: [
+								/* @__PURE__ */ g("div", {
+									className: "flex items-center justify-between",
+									children: [/* @__PURE__ */ h("span", {
+										className: "text-sm text-muted-foreground",
+										children: b("billing.addons.status", "Status")
+									}), /* @__PURE__ */ h("span", {
+										className: `px-2 py-1 text-xs font-medium rounded ${T.isActive ? "bg-status-success-bg-subtle text-status-success-text" : "bg-muted text-muted-foreground"}`,
+										children: T.isActive ? "Active" : "Inactive"
+									})]
+								}),
+								/* @__PURE__ */ g("div", {
+									className: "flex items-center justify-between",
+									children: [/* @__PURE__ */ h("span", {
+										className: "text-sm text-muted-foreground",
+										children: b("billing.addons.currency", "Currency")
+									}), /* @__PURE__ */ h("span", {
+										className: "text-sm font-medium text-foreground",
+										children: d(T.price, T.currency, T.currencyPrices, w).currency
+									})]
+								}),
+								/* @__PURE__ */ g("div", {
+									className: "flex items-center justify-between",
+									children: [/* @__PURE__ */ h("span", {
+										className: "text-sm text-muted-foreground",
+										children: b("billing.addons.billingLabel", "Billing")
+									}), /* @__PURE__ */ h("span", {
+										className: "text-sm font-medium text-foreground capitalize",
+										children: T.duration
+									})]
+								})
+							]
+						})]
+					}),
+					C.canManageAddons && /* @__PURE__ */ g("div", {
+						className: "border border-border rounded-lg bg-card overflow-hidden",
+						children: [/* @__PURE__ */ h("div", {
+							className: "p-4 border-b border-border bg-muted/30",
+							children: /* @__PURE__ */ h("h2", {
+								className: "font-semibold text-foreground",
+								children: b("billing.addons.actions", "Actions")
+							})
+						}), /* @__PURE__ */ g("div", {
+							className: "p-4 space-y-2",
+							children: [/* @__PURE__ */ h("button", {
+								onClick: () => S(`/addons/${T.id}/edit`),
+								className: "w-full px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+								children: "Edit Addon"
+							}), /* @__PURE__ */ h("button", {
+								onClick: async () => {
+									try {
+										await k(T.id, !T.isActive), O();
+									} catch (e) {
+										console.error("Failed to toggle addon:", e);
+									}
+								},
+								disabled: A,
+								className: `w-full px-4 py-2 text-sm font-medium border border-border rounded-md transition-colors disabled:opacity-50 ${T.isActive ? "text-destructive hover:bg-destructive/10" : "text-status-success-text hover:bg-status-success-bg-subtle"}`,
+								children: A ? b("billing.addons.processing", "Processing...") : T.isActive ? b("billing.addons.deactivateAddon", "Deactivate Addon") : b("billing.addons.activateAddon", "Activate Addon")
+							})]
+						})]
+					}),
+					/* @__PURE__ */ h("button", {
+						onClick: () => S("/addons"),
+						className: "w-full px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+						children: "Back to Addons"
+					})
+				]
+			})]
+		})]
+	}) : /* @__PURE__ */ h("div", {
+		className: "flex items-center justify-center h-full min-h-[400px]",
+		children: /* @__PURE__ */ g("div", {
+			className: "text-center space-y-4",
+			children: [
+				/* @__PURE__ */ h("div", {
+					className: "w-12 h-12 mx-auto rounded-full bg-muted flex items-center justify-center",
+					children: /* @__PURE__ */ h("svg", {
+						className: "w-6 h-6 text-muted-foreground",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ h("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						})
+					})
+				}),
+				/* @__PURE__ */ h("h2", {
+					className: "text-lg font-semibold text-foreground",
+					children: b("billing.addons.addonNotFound", "Addon not found")
+				}),
+				/* @__PURE__ */ h("p", {
+					className: "text-sm text-muted-foreground",
+					children: b("billing.addons.addonNotFoundMessage", "The addon you're looking for doesn't exist or has been removed.")
+				}),
+				/* @__PURE__ */ h("button", {
+					onClick: () => S("/addons"),
+					className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+					children: "Back to Addons"
+				})
+			]
+		})
+	}) : /* @__PURE__ */ h(e, { message: b("billing.addons.noViewPermission", "You don't have permission to view addon details.") });
+};
+//#endregion
+export { y as AddonDetailPage };
+
+//# sourceMappingURL=AddonDetailPage.js.map

package/dist/billing/modules/addons/pages/AddonDetailPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddonDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/addons/pages/AddonDetailPage.tsx"],"sourcesContent":["/**\n * Addons Module - Addon Detail Page\n * Displays detailed information about a specific addon\n */\n\nimport { useMemo, type FC } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useAddon, useAddonMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader, ServerError } from '../../../shared/components';\nimport {\n  formatCurrency,\n  formatPlanDuration,\n  formatPlanDurationLabel,\n  isServerError,\n} from '../../../shared/utils';\nimport type { SubscriptionFeatures } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  useDefaultBillingCurrency,\n  getDisplayPrice,\n} from '../../../hooks/useDefaultBillingCurrency';\n\n/**\n * Combined quota info for display\n */\ninterface CombinedQuota {\n  quotaId: string;\n  name: string;\n  totalValue: number;\n  type: string;\n}\n\n/**\n * Combines duplicate quotas by quota ID and aggregates their values\n */\nfunction combineQuotas(features: SubscriptionFeatures[]): CombinedQuota[] {\n  const quotaMap = new Map<string, CombinedQuota>();\n\n  for (const feature of features) {\n    if (!feature.quota) continue;\n\n    const quotaId = feature.quota.id;\n    const limits = feature.quota.limits as { value?: number; type?: string } | null;\n    const limitValue = limits?.value ?? 0;\n    const limitType = limits?.type ?? 'unknown';\n\n    const existing = quotaMap.get(quotaId);\n    if (existing) {\n      existing.totalValue += limitValue;\n    } else {\n      quotaMap.set(quotaId, {\n        quotaId,\n        name: feature.quota.name ?? 'Unknown Quota',\n        totalValue: limitValue,\n        type: limitType,\n      });\n    }\n  }\n\n  return Array.from(quotaMap.values());\n}\n\nexport const AddonDetailPage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const { addonId } = useParams<{ addonId: string }>();\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const displayCurrency = useDefaultBillingCurrency();\n  const { addon, isLoading, error, refetch } = useAddon(addonId);\n  const { toggleAddon, isToggling } = useAddonMutations();\n\n  // Memoize combined quotas before any conditional returns\n  const combinedQuotas = useMemo(() => combineQuotas(addon?.features || []), [addon?.features]);\n\n  // Permission check\n  if (!permissions.canViewAddons) {\n    return (\n      <AccessDenied\n        message={tr(\n          'billing.addons.noViewPermission',\n          \"You don't have permission to view addon details.\"\n        )}\n      />\n    );\n  }\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-muted animate-pulse rounded\" />\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          <div className=\"lg:col-span-2 space-y-4\">\n            {[1, 2, 3].map((i) => (\n              <div key={i} className=\"h-24 bg-muted animate-pulse rounded\" />\n            ))}\n          </div>\n          <div className=\"h-64 bg-muted animate-pulse rounded\" />\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error && isServerError(error)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title={tr('billing.addons.serverUnavailable', 'Server Unavailable')}\n          message={tr(\n            'billing.addons.serverUnavailableMessage',\n            'Unable to load addon details. The server might be down or experiencing issues.'\n          )}\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  // Not found state\n  if (!addon) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <div className=\"w-12 h-12 mx-auto rounded-full bg-muted flex items-center justify-center\">\n            <svg\n              className=\"w-6 h-6 text-muted-foreground\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-foreground\">\n            {tr('billing.addons.addonNotFound', 'Addon not found')}\n          </h2>\n          <p className=\"text-sm text-muted-foreground\">\n            {tr(\n              'billing.addons.addonNotFoundMessage',\n              \"The addon you're looking for doesn't exist or has been removed.\"\n            )}\n          </p>\n          <button\n            onClick={() => navigateTo('/addons')}\n            className=\"px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n          >\n            Back to Addons\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  const handleToggle = async () => {\n    try {\n      await toggleAddon(addon.id, !addon.isActive);\n      refetch();\n    } catch (err) {\n      console.error('Failed to toggle addon:', err);\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={addon.name}\n        description={`${formatPlanDurationLabel(addon.duration)} addon`}\n      />\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2 space-y-6\">\n          {/* Pricing Card */}\n          <div className=\"border border-border rounded-lg bg-card overflow-hidden\">\n            <div className=\"p-4 border-b border-border bg-muted/30\">\n              <h2 className=\"font-semibold text-foreground\">\n                {tr('billing.addons.pricing', 'Pricing')}\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              <div className=\"flex items-baseline gap-2\">\n                <span className=\"text-4xl font-bold text-foreground\">\n                  {(() => {\n                    const { price, currency } = getDisplayPrice(\n                      addon.price,\n                      addon.currency,\n                      addon.currencyPrices as Record<string, number> | null,\n                      displayCurrency\n                    );\n                    return formatCurrency(price, currency);\n                  })()}\n                </span>\n                <span className=\"text-lg text-muted-foreground\">\n                  / {formatPlanDuration(addon.duration)}\n                </span>\n              </div>\n              <p className=\"text-sm text-muted-foreground mt-2\">\n                {tr('billing.addons.billed', 'Billed')}{' '}\n                {addon.duration === 'monthly'\n                  ? tr('billing.addons.everyMonth', 'every month')\n                  : tr('billing.addons.annually', 'annually')}\n              </p>\n            </div>\n          </div>\n\n          {/* Quotas Card */}\n          <div className=\"border border-border rounded-lg bg-card overflow-hidden\">\n            <div className=\"p-4 border-b border-border bg-muted/30\">\n              <h2 className=\"font-semibold text-foreground\">\n                {tr('billing.addons.includedQuotas', 'Included Quotas')} ({combinedQuotas.length})\n              </h2>\n            </div>\n            <div className=\"p-4\">\n              {combinedQuotas.length === 0 ? (\n                <p className=\"text-sm text-muted-foreground py-4 text-center\">\n                  {tr('billing.addons.noQuotas', 'No quotas associated with this addon.')}\n                </p>\n              ) : (\n                <div className=\"space-y-3\">\n                  {combinedQuotas.map((quota) => (\n                    <div\n                      key={quota.quotaId}\n                      className=\"flex items-center justify-between p-3 border border-border rounded-lg bg-muted/20\"\n                    >\n                      <div className=\"flex items-center gap-3\">\n                        <div className=\"w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center\">\n                          <svg\n                            className=\"w-4 h-4 text-primary\"\n                            fill=\"none\"\n                            viewBox=\"0 0 24 24\"\n                            stroke=\"currentColor\"\n                          >\n                            <path\n                              strokeLinecap=\"round\"\n                              strokeLinejoin=\"round\"\n                              strokeWidth={2}\n                              d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\n                            />\n                          </svg>\n                        </div>\n                        <div>\n                          <p className=\"font-medium text-foreground\">{quota.name}</p>\n                          <p className=\"text-xs text-muted-foreground capitalize\">\n                            Type: {quota.type}\n                          </p>\n                        </div>\n                      </div>\n                      <div className=\"text-right\">\n                        <span className=\"text-lg font-semibold text-status-success-text\">\n                          {quota.totalValue.toLocaleString()}\n                        </span>\n                        <p className=\"text-xs text-muted-foreground\">total</p>\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6\">\n          {/* Status Card */}\n          <div className=\"border border-border rounded-lg bg-card overflow-hidden\">\n            <div className=\"p-4 border-b border-border bg-muted/30\">\n              <h2 className=\"font-semibold text-foreground\">\n                {tr('billing.addons.statusTitle', 'Status')}\n              </h2>\n            </div>\n            <div className=\"p-4 space-y-4\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm text-muted-foreground\">\n                  {tr('billing.addons.status', 'Status')}\n                </span>\n                <span\n                  className={`px-2 py-1 text-xs font-medium rounded ${\n                    addon.isActive\n                      ? 'bg-status-success-bg-subtle text-status-success-text'\n                      : 'bg-muted text-muted-foreground'\n                  }`}\n                >\n                  {addon.isActive ? 'Active' : 'Inactive'}\n                </span>\n              </div>\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm text-muted-foreground\">\n                  {tr('billing.addons.currency', 'Currency')}\n                </span>\n                <span className=\"text-sm font-medium text-foreground\">\n                  {\n                    getDisplayPrice(\n                      addon.price,\n                      addon.currency,\n                      addon.currencyPrices as Record<string, number> | null,\n                      displayCurrency\n                    ).currency\n                  }\n                </span>\n              </div>\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm text-muted-foreground\">\n                  {tr('billing.addons.billingLabel', 'Billing')}\n                </span>\n                <span className=\"text-sm font-medium text-foreground capitalize\">\n                  {addon.duration}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          {/* Actions Card */}\n          {permissions.canManageAddons && (\n            <div className=\"border border-border rounded-lg bg-card overflow-hidden\">\n              <div className=\"p-4 border-b border-border bg-muted/30\">\n                <h2 className=\"font-semibold text-foreground\">\n                  {tr('billing.addons.actions', 'Actions')}\n                </h2>\n              </div>\n              <div className=\"p-4 space-y-2\">\n                <button\n                  onClick={() => navigateTo(`/addons/${addon.id}/edit`)}\n                  className=\"w-full px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n                >\n                  Edit Addon\n                </button>\n                <button\n                  onClick={handleToggle}\n                  disabled={isToggling}\n                  className={`w-full px-4 py-2 text-sm font-medium border border-border rounded-md transition-colors disabled:opacity-50 ${\n                    addon.isActive\n                      ? 'text-destructive hover:bg-destructive/10'\n                      : 'text-status-success-text hover:bg-status-success-bg-subtle'\n                  }`}\n                >\n                  {isToggling\n                    ? tr('billing.addons.processing', 'Processing...')\n                    : addon.isActive\n                      ? tr('billing.addons.deactivateAddon', 'Deactivate Addon')\n                      : tr('billing.addons.activateAddon', 'Activate Addon')}\n                </button>\n              </div>\n            </div>\n          )}\n\n          {/* Back Button */}\n          <button\n            onClick={() => navigateTo('/addons')}\n            className=\"w-full px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n          >\n            Back to Addons\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/addons/pages/AddonEditPage.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+
+export declare const AddonEditPage: FC;
+//# sourceMappingURL=AddonEditPage.d.ts.map

package/dist/billing/modules/addons/pages/AddonEditPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddonEditPage.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/addons/pages/AddonEditPage.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAuB,KAAK,EAAE,EAAkB,MAAM,OAAO,CAAC;AAyBrE,eAAO,MAAM,aAAa,EAAE,EAkd3B,CAAC"}