@burdenoff/microfe-billing 2026.510.114

package/dist/billing/modules/plans/pages/PlanCreatePage.js

@@ -0,0 +1,368 @@
+import { AccessDenied as e } from "../../../shared/components/AccessDenied.js";
+import { PageHeader as t } from "../../../shared/components/PageHeader.js";
+import { CurrencyPriceOverridesEditor as n } from "../../../shared/components/CurrencyPriceOverridesEditor.js";
+import "../../../shared/components/index.js";
+import { PlanDuration as r } from "../../../shared/types/graphql.js";
+import { useBillingPermissions as i } from "../../../hooks/useBillingPermissions.js";
+import { useBillingNavigate as a } from "../../../hooks/useBillingNavigate.js";
+import { usePlanMutations as o } from "../hooks/usePlans.js";
+import { useQuotas as s } from "../hooks/useQuotas.js";
+import "../hooks/index.js";
+import { useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useI18n as f } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/billing/modules/plans/pages/PlanCreatePage.tsx
+var p = () => {
+	let { t: p } = f(), m = (e, t) => {
+		let n = p(e);
+		return n === e ? t : n;
+	}, h = a(), g = i(), { quotas: _, isLoading: v } = s({ onlyActive: !0 }), { createPlan: y, isCreating: b } = o(), [x, S] = c(""), [C, w] = c(""), [T, E] = c("USD"), [D, O] = c(r.MONTHLY), [k, A] = c(""), [j, M] = c([]), [N, P] = c([]), [F, I] = c(null), [L, R] = c(!1);
+	if (!g.canManagePlans) return /* @__PURE__ */ u(e, { message: m("billing.plans.noCreatePermission", "You don't have permission to create plans.") });
+	if (v) return /* @__PURE__ */ d("div", {
+		className: "space-y-6 p-6",
+		children: [/* @__PURE__ */ u("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ u("div", {
+			className: "max-w-2xl space-y-4",
+			children: [
+				1,
+				2,
+				3,
+				4,
+				5
+			].map((e) => /* @__PURE__ */ u("div", { className: "h-16 bg-muted animate-pulse rounded" }, e))
+		})]
+	});
+	let z = () => {
+		M([{
+			quotaId: "",
+			quantity: 1
+		}, ...j]);
+	}, B = (e) => {
+		M(j.filter((t, n) => n !== e));
+	}, V = (e, t, n) => {
+		let r = [...j];
+		t === "quotaId" ? r[e].quotaId = n : r[e].quantity = Number(n), M(r);
+	};
+	return /* @__PURE__ */ d("div", {
+		className: "space-y-6 p-6",
+		children: [/* @__PURE__ */ u(t, {
+			title: m("billing.plans.createNewPlan", "Create New Plan"),
+			description: m("billing.plans.createNewPlanDesc", "Set up a new pricing plan with quotas")
+		}), /* @__PURE__ */ d("form", {
+			onSubmit: async (e) => {
+				if (e.preventDefault(), I(null), R(!1), !x.trim()) {
+					I("Plan name is required");
+					return;
+				}
+				if (!C || isNaN(Number(C)) || Number(C) < 0) {
+					I("Valid price is required");
+					return;
+				}
+				if (!k.trim()) {
+					I("Product ID is required");
+					return;
+				}
+				if (j.length === 0) {
+					I("At least one quota is required");
+					return;
+				}
+				if (j.filter((e) => e.quotaId === "").length > 0) {
+					I("Please select a quota for all allocations");
+					return;
+				}
+				let t = {
+					name: x.trim(),
+					price: Number(C),
+					currency: T,
+					duration: D,
+					productId: k.trim(),
+					quotas: j.map((e) => ({
+						quotaId: e.quotaId,
+						quantity: e.quantity
+					})),
+					...N.length > 0 ? { currencyPriceOverrides: N } : {}
+				};
+				try {
+					await y(t), R(!0), setTimeout(() => h("/plans"), 1500);
+				} catch (e) {
+					I(e instanceof Error ? e.message : "Failed to create plan");
+				}
+			},
+			className: "space-y-6",
+			children: [
+				F && /* @__PURE__ */ u("div", {
+					className: "p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg",
+					children: /* @__PURE__ */ u("p", {
+						className: "text-sm text-status-error-text",
+						children: F
+					})
+				}),
+				L && /* @__PURE__ */ u("div", {
+					className: "p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg",
+					children: /* @__PURE__ */ u("p", {
+						className: "text-sm text-status-success-text",
+						children: m("billing.plans.createSuccess", "Plan created successfully! Redirecting...")
+					})
+				}),
+				/* @__PURE__ */ d("div", {
+					className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
+					children: [/* @__PURE__ */ d("div", {
+						className: "border border-border rounded-lg bg-card overflow-hidden h-fit",
+						children: [/* @__PURE__ */ u("div", {
+							className: "p-4 border-b border-border bg-muted/30",
+							children: /* @__PURE__ */ u("h2", {
+								className: "font-semibold text-foreground",
+								children: m("billing.plans.basicInfo", "Basic Information")
+							})
+						}), /* @__PURE__ */ d("div", {
+							className: "p-4 space-y-4",
+							children: [
+								/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
+									htmlFor: "name",
+									className: "block text-sm font-medium text-foreground mb-1",
+									children: [m("billing.plans.planNameLabel", "Plan Name"), " *"]
+								}), /* @__PURE__ */ u("input", {
+									id: "name",
+									type: "text",
+									value: x,
+									onChange: (e) => S(e.target.value),
+									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
+									placeholder: m("billing.plans.planNamePlaceholder", "e.g., Pro Plan"),
+									required: !0
+								})] }),
+								/* @__PURE__ */ d("div", { children: [
+									/* @__PURE__ */ d("label", {
+										htmlFor: "productId",
+										className: "block text-sm font-medium text-foreground mb-1",
+										children: [m("billing.plans.productId", "Product ID"), " *"]
+									}),
+									/* @__PURE__ */ u("input", {
+										id: "productId",
+										type: "text",
+										value: k,
+										onChange: (e) => A(e.target.value),
+										className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
+										placeholder: m("billing.plans.productIdPlaceholder", "e.g., prod_abc123"),
+										required: !0
+									}),
+									/* @__PURE__ */ u("p", {
+										className: "text-xs text-muted-foreground mt-1",
+										children: m("billing.plans.productIdDesc", "The product this plan belongs to")
+									})
+								] }),
+								/* @__PURE__ */ d("div", {
+									className: "grid grid-cols-2 gap-4",
+									children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
+										htmlFor: "price",
+										className: "block text-sm font-medium text-foreground mb-1",
+										children: [m("billing.plans.priceLabel", "Price"), " *"]
+									}), /* @__PURE__ */ u("input", {
+										id: "price",
+										type: "number",
+										step: "0.01",
+										min: "0",
+										value: C,
+										onChange: (e) => w(e.target.value),
+										className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
+										placeholder: "49.99",
+										required: !0
+									})] }), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
+										htmlFor: "currency",
+										className: "block text-sm font-medium text-foreground mb-1",
+										children: [m("billing.plans.currencyLabel", "Currency"), " *"]
+									}), /* @__PURE__ */ d("select", {
+										id: "currency",
+										value: T,
+										onChange: (e) => E(e.target.value),
+										className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
+										children: [
+											/* @__PURE__ */ u("option", {
+												value: "USD",
+												children: "USD ($)"
+											}),
+											/* @__PURE__ */ u("option", {
+												value: "EUR",
+												children: "EUR"
+											}),
+											/* @__PURE__ */ u("option", {
+												value: "GBP",
+												children: "GBP"
+											}),
+											/* @__PURE__ */ u("option", {
+												value: "INR",
+												children: "INR"
+											}),
+											/* @__PURE__ */ u("option", {
+												value: "AUD",
+												children: "AUD"
+											}),
+											/* @__PURE__ */ u("option", {
+												value: "CAD",
+												children: "CAD"
+											}),
+											/* @__PURE__ */ u("option", {
+												value: "JPY",
+												children: "JPY"
+											}),
+											/* @__PURE__ */ u("option", {
+												value: "SGD",
+												children: "SGD"
+											})
+										]
+									})] })]
+								}),
+								/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
+									htmlFor: "duration",
+									className: "block text-sm font-medium text-foreground mb-1",
+									children: [m("billing.plans.billingPeriodLabel", "Billing Period"), " *"]
+								}), /* @__PURE__ */ d("select", {
+									id: "duration",
+									value: D,
+									onChange: (e) => O(e.target.value),
+									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
+									children: [/* @__PURE__ */ u("option", {
+										value: r.MONTHLY,
+										children: "Monthly"
+									}), /* @__PURE__ */ u("option", {
+										value: r.YEARLY,
+										children: "Yearly"
+									})]
+								})] })
+							]
+						})]
+					}), /* @__PURE__ */ d("div", {
+						className: "border border-border rounded-lg bg-card overflow-hidden h-fit",
+						children: [/* @__PURE__ */ d("div", {
+							className: "p-4 border-b border-border bg-muted/30 flex items-center justify-between",
+							children: [/* @__PURE__ */ d("h2", {
+								className: "font-semibold text-foreground",
+								children: [m("billing.plans.quotaAllocations", "Quota Allocations"), " *"]
+							}), /* @__PURE__ */ u("button", {
+								type: "button",
+								onClick: z,
+								disabled: _.length === 0,
+								className: "px-3 py-1 text-sm font-medium text-primary hover:bg-primary/10 rounded-md transition-colors disabled:opacity-50",
+								children: "+ Add Quota"
+							})]
+						}), /* @__PURE__ */ u("div", {
+							className: "p-4 space-y-3",
+							children: _.length === 0 ? /* @__PURE__ */ u("p", {
+								className: "text-sm text-muted-foreground",
+								children: m("billing.plans.noQuotasAvailable", "No quotas available. Please create quotas first.")
+							}) : j.length === 0 ? /* @__PURE__ */ u("p", {
+								className: "text-sm text-muted-foreground",
+								children: m("billing.plans.noQuotasAllocated", "No quotas allocated. Click \"Add Quota\" to add one.")
+							}) : j.map((e, t) => {
+								let n = _.find((t) => t.id === e.quotaId), r = n?.limits, i = r?.value ?? 0, a = r?.type ?? "unknown", o = i * e.quantity;
+								return /* @__PURE__ */ d("div", {
+									className: "p-3 border border-border rounded-lg bg-muted/20 space-y-3",
+									children: [/* @__PURE__ */ d("div", {
+										className: "flex items-center gap-3",
+										children: [/* @__PURE__ */ d("select", {
+											value: e.quotaId,
+											onChange: (e) => V(t, "quotaId", e.target.value),
+											className: `flex-1 px-3 py-2 border border-border rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-primary ${e.quotaId === "" ? "text-muted-foreground" : "text-foreground"}`,
+											children: [/* @__PURE__ */ u("option", {
+												value: "",
+												disabled: !0,
+												children: m("billing.plans.selectQuota", "Select a quota...")
+											}), _.map((e) => /* @__PURE__ */ u("option", {
+												value: e.id,
+												children: e.name
+											}, e.id))]
+										}), /* @__PURE__ */ u("button", {
+											type: "button",
+											onClick: () => B(t),
+											className: "p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-md transition-colors",
+											title: "Remove quota",
+											children: /* @__PURE__ */ u("svg", {
+												className: "w-5 h-5",
+												fill: "none",
+												viewBox: "0 0 24 24",
+												stroke: "currentColor",
+												children: /* @__PURE__ */ u("path", {
+													strokeLinecap: "round",
+													strokeLinejoin: "round",
+													strokeWidth: 2,
+													d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+												})
+											})
+										})]
+									}), n && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("div", {
+										className: "flex items-center justify-between text-sm",
+										children: /* @__PURE__ */ d("div", {
+											className: "text-muted-foreground",
+											children: [
+												/* @__PURE__ */ d("span", {
+													className: "capitalize",
+													children: ["Type: ", a]
+												}),
+												/* @__PURE__ */ u("span", {
+													className: "mx-2",
+													children: "•"
+												}),
+												/* @__PURE__ */ d("span", { children: [
+													"Value per unit:",
+													" ",
+													/* @__PURE__ */ u("span", {
+														className: "font-medium text-foreground",
+														children: i.toLocaleString()
+													})
+												] })
+											]
+										})
+									}), /* @__PURE__ */ d("div", {
+										className: "flex items-center gap-4",
+										children: [/* @__PURE__ */ d("div", {
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ d("label", {
+												className: "text-sm text-muted-foreground",
+												children: [m("billing.plans.quantity", "Quantity"), ":"]
+											}), /* @__PURE__ */ u("input", {
+												type: "number",
+												min: "1",
+												value: e.quantity,
+												onChange: (e) => V(t, "quantity", e.target.value),
+												className: "w-24 px-3 py-1.5 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary text-center"
+											})]
+										}), /* @__PURE__ */ d("div", {
+											className: "flex items-center gap-2 text-sm",
+											children: [/* @__PURE__ */ u("span", {
+												className: "text-muted-foreground",
+												children: "="
+											}), /* @__PURE__ */ d("span", {
+												className: "font-semibold text-status-success-text",
+												children: [o.toLocaleString(), " total"]
+											})]
+										})]
+									})] })]
+								}, t);
+							})
+						})]
+					})]
+				}),
+				/* @__PURE__ */ u(n, {
+					overrides: N,
+					onChange: P
+				}),
+				/* @__PURE__ */ d("div", {
+					className: "flex items-center gap-3 pt-4",
+					children: [/* @__PURE__ */ u("button", {
+						type: "submit",
+						disabled: b || _.length === 0,
+						className: "px-6 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50",
+						children: b ? m("billing.plans.creating", "Creating...") : m("billing.plans.createPlanBtn", "Create Plan")
+					}), /* @__PURE__ */ u("button", {
+						type: "button",
+						onClick: () => h("/plans"),
+						className: "px-6 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+						children: "Cancel"
+					})]
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { p as PlanCreatePage };
+
+//# sourceMappingURL=PlanCreatePage.js.map

package/dist/billing/modules/plans/pages/PlanCreatePage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlanCreatePage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanCreatePage.tsx"],"sourcesContent":["/**\n * Plans Module - Plan Create Page\n * Form to create a new plan\n */\n\nimport { useState, type FC, type FormEvent } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePlanMutations, useQuotas } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, CurrencyPriceOverridesEditor, PageHeader } from '../../../shared/components';\nimport {\n  PlanDuration,\n  type CreatePlanInput,\n  type CurrencyPriceOverrideInput,\n} from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface QuotaAllocation {\n  quotaId: string;\n  quantity: number;\n}\n\nexport const PlanCreatePage: 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 navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { quotas, isLoading: isQuotasLoading } = useQuotas({ onlyActive: true });\n  const { createPlan, isCreating } = usePlanMutations();\n\n  // Form state\n  const [name, setName] = useState('');\n  const [price, setPrice] = useState('');\n  const [currency, setCurrency] = useState('USD');\n  const [duration, setDuration] = useState<PlanDuration>(PlanDuration.MONTHLY);\n  const [productId, setProductId] = useState('');\n  const [quotaAllocations, setQuotaAllocations] = useState<QuotaAllocation[]>([]);\n  const [currencyPriceOverrides, setCurrencyPriceOverrides] = useState<\n    CurrencyPriceOverrideInput[]\n  >([]);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState(false);\n\n  // Permission check\n  if (!permissions.canManagePlans) {\n    return (\n      <AccessDenied\n        message={tr(\n          'billing.plans.noCreatePermission',\n          \"You don't have permission to create plans.\"\n        )}\n      />\n    );\n  }\n\n  // Loading state\n  if (isQuotasLoading) {\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=\"max-w-2xl space-y-4\">\n          {[1, 2, 3, 4, 5].map((i) => (\n            <div key={i} className=\"h-16 bg-muted animate-pulse rounded\" />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  const handleAddQuota = () => {\n    // Add new quota at the top with empty quotaId (placeholder)\n    setQuotaAllocations([{ quotaId: '', quantity: 1 }, ...quotaAllocations]);\n  };\n\n  const handleRemoveQuota = (index: number) => {\n    setQuotaAllocations(quotaAllocations.filter((_, i) => i !== index));\n  };\n\n  const handleQuotaChange = (\n    index: number,\n    field: 'quotaId' | 'quantity',\n    value: string | number\n  ) => {\n    const updated = [...quotaAllocations];\n    if (field === 'quotaId') {\n      updated[index].quotaId = value as string;\n    } else {\n      updated[index].quantity = Number(value);\n    }\n    setQuotaAllocations(updated);\n  };\n\n  const handleSubmit = async (e: FormEvent) => {\n    e.preventDefault();\n    setError(null);\n    setSuccess(false);\n\n    // Validation\n    if (!name.trim()) {\n      setError('Plan name is required');\n      return;\n    }\n    if (!price || isNaN(Number(price)) || Number(price) < 0) {\n      setError('Valid price is required');\n      return;\n    }\n    if (!productId.trim()) {\n      setError('Product ID is required');\n      return;\n    }\n    if (quotaAllocations.length === 0) {\n      setError('At least one quota is required');\n      return;\n    }\n    // Check for unselected quotas\n    const unselectedQuotas = quotaAllocations.filter((a) => a.quotaId === '');\n    if (unselectedQuotas.length > 0) {\n      setError('Please select a quota for all allocations');\n      return;\n    }\n\n    const input: CreatePlanInput = {\n      name: name.trim(),\n      price: Number(price),\n      currency,\n      duration,\n      productId: productId.trim(),\n      quotas: quotaAllocations.map((a) => ({\n        quotaId: a.quotaId,\n        quantity: a.quantity,\n      })),\n      ...(currencyPriceOverrides.length > 0 ? { currencyPriceOverrides } : {}),\n    };\n\n    try {\n      await createPlan(input);\n      setSuccess(true);\n      // Navigate back after short delay\n      setTimeout(() => navigateTo('/plans'), 1500);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to create plan');\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={tr('billing.plans.createNewPlan', 'Create New Plan')}\n        description={tr('billing.plans.createNewPlanDesc', 'Set up a new pricing plan with quotas')}\n      />\n\n      <form onSubmit={handleSubmit} className=\"space-y-6\">\n        {/* Error/Success Messages */}\n        {error && (\n          <div className=\"p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-error-text\">{error}</p>\n          </div>\n        )}\n        {success && (\n          <div className=\"p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-success-text\">\n              {tr('billing.plans.createSuccess', 'Plan created successfully! Redirecting...')}\n            </p>\n          </div>\n        )}\n\n        {/* Two-column layout on desktop */}\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n          {/* Basic Info */}\n          <div className=\"border border-border rounded-lg bg-card overflow-hidden h-fit\">\n            <div className=\"p-4 border-b border-border bg-muted/30\">\n              <h2 className=\"font-semibold text-foreground\">\n                {tr('billing.plans.basicInfo', 'Basic Information')}\n              </h2>\n            </div>\n            <div className=\"p-4 space-y-4\">\n              {/* Name */}\n              <div>\n                <label htmlFor=\"name\" className=\"block text-sm font-medium text-foreground mb-1\">\n                  {tr('billing.plans.planNameLabel', 'Plan Name')} *\n                </label>\n                <input\n                  id=\"name\"\n                  type=\"text\"\n                  value={name}\n                  onChange={(e) => setName(e.target.value)}\n                  className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary\"\n                  placeholder={tr('billing.plans.planNamePlaceholder', 'e.g., Pro Plan')}\n                  required\n                />\n              </div>\n\n              {/* Product ID */}\n              <div>\n                <label\n                  htmlFor=\"productId\"\n                  className=\"block text-sm font-medium text-foreground mb-1\"\n                >\n                  {tr('billing.plans.productId', 'Product ID')} *\n                </label>\n                <input\n                  id=\"productId\"\n                  type=\"text\"\n                  value={productId}\n                  onChange={(e) => setProductId(e.target.value)}\n                  className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary\"\n                  placeholder={tr('billing.plans.productIdPlaceholder', 'e.g., prod_abc123')}\n                  required\n                />\n                <p className=\"text-xs text-muted-foreground mt-1\">\n                  {tr('billing.plans.productIdDesc', 'The product this plan belongs to')}\n                </p>\n              </div>\n\n              {/* Price & Currency */}\n              <div className=\"grid grid-cols-2 gap-4\">\n                <div>\n                  <label htmlFor=\"price\" className=\"block text-sm font-medium text-foreground mb-1\">\n                    {tr('billing.plans.priceLabel', 'Price')} *\n                  </label>\n                  <input\n                    id=\"price\"\n                    type=\"number\"\n                    step=\"0.01\"\n                    min=\"0\"\n                    value={price}\n                    onChange={(e) => setPrice(e.target.value)}\n                    className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary\"\n                    placeholder=\"49.99\"\n                    required\n                  />\n                </div>\n                <div>\n                  <label\n                    htmlFor=\"currency\"\n                    className=\"block text-sm font-medium text-foreground mb-1\"\n                  >\n                    {tr('billing.plans.currencyLabel', 'Currency')} *\n                  </label>\n                  <select\n                    id=\"currency\"\n                    value={currency}\n                    onChange={(e) => setCurrency(e.target.value)}\n                    className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary\"\n                  >\n                    <option value=\"USD\">USD ($)</option>\n                    <option value=\"EUR\">EUR</option>\n                    <option value=\"GBP\">GBP</option>\n                    <option value=\"INR\">INR</option>\n                    <option value=\"AUD\">AUD</option>\n                    <option value=\"CAD\">CAD</option>\n                    <option value=\"JPY\">JPY</option>\n                    <option value=\"SGD\">SGD</option>\n                  </select>\n                </div>\n              </div>\n\n              {/* Duration */}\n              <div>\n                <label\n                  htmlFor=\"duration\"\n                  className=\"block text-sm font-medium text-foreground mb-1\"\n                >\n                  {tr('billing.plans.billingPeriodLabel', 'Billing Period')} *\n                </label>\n                <select\n                  id=\"duration\"\n                  value={duration}\n                  onChange={(e) => setDuration(e.target.value as PlanDuration)}\n                  className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary\"\n                >\n                  <option value={PlanDuration.MONTHLY}>Monthly</option>\n                  <option value={PlanDuration.YEARLY}>Yearly</option>\n                </select>\n              </div>\n            </div>\n          </div>\n\n          {/* Quota Allocations */}\n          <div className=\"border border-border rounded-lg bg-card overflow-hidden h-fit\">\n            <div className=\"p-4 border-b border-border bg-muted/30 flex items-center justify-between\">\n              <h2 className=\"font-semibold text-foreground\">\n                {tr('billing.plans.quotaAllocations', 'Quota Allocations')} *\n              </h2>\n              <button\n                type=\"button\"\n                onClick={handleAddQuota}\n                disabled={quotas.length === 0}\n                className=\"px-3 py-1 text-sm font-medium text-primary hover:bg-primary/10 rounded-md transition-colors disabled:opacity-50\"\n              >\n                + Add Quota\n              </button>\n            </div>\n            <div className=\"p-4 space-y-3\">\n              {quotas.length === 0 ? (\n                <p className=\"text-sm text-muted-foreground\">\n                  {tr(\n                    'billing.plans.noQuotasAvailable',\n                    'No quotas available. Please create quotas first.'\n                  )}\n                </p>\n              ) : quotaAllocations.length === 0 ? (\n                <p className=\"text-sm text-muted-foreground\">\n                  {tr(\n                    'billing.plans.noQuotasAllocated',\n                    'No quotas allocated. Click \"Add Quota\" to add one.'\n                  )}\n                </p>\n              ) : (\n                quotaAllocations.map((allocation, index) => {\n                  const selectedQuota = quotas.find((q) => q.id === allocation.quotaId);\n                  const limits = selectedQuota?.limits as { type?: string; value?: number } | null;\n                  const limitValue = limits?.value ?? 0;\n                  const limitType = limits?.type ?? 'unknown';\n                  const totalValue = limitValue * allocation.quantity;\n\n                  return (\n                    <div\n                      key={index}\n                      className=\"p-3 border border-border rounded-lg bg-muted/20 space-y-3\"\n                    >\n                      <div className=\"flex items-center gap-3\">\n                        <select\n                          value={allocation.quotaId}\n                          onChange={(e) => handleQuotaChange(index, 'quotaId', e.target.value)}\n                          className={`flex-1 px-3 py-2 border border-border rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-primary ${\n                            allocation.quotaId === '' ? 'text-muted-foreground' : 'text-foreground'\n                          }`}\n                        >\n                          <option value=\"\" disabled>\n                            {tr('billing.plans.selectQuota', 'Select a quota...')}\n                          </option>\n                          {quotas.map((quota) => (\n                            <option key={quota.id} value={quota.id}>\n                              {quota.name}\n                            </option>\n                          ))}\n                        </select>\n                        <button\n                          type=\"button\"\n                          onClick={() => handleRemoveQuota(index)}\n                          className=\"p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-md transition-colors\"\n                          title=\"Remove quota\"\n                        >\n                          <svg\n                            className=\"w-5 h-5\"\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=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n                            />\n                          </svg>\n                        </button>\n                      </div>\n\n                      {/* Quota Info - only show when quota is selected */}\n                      {selectedQuota && (\n                        <>\n                          <div className=\"flex items-center justify-between text-sm\">\n                            <div className=\"text-muted-foreground\">\n                              <span className=\"capitalize\">Type: {limitType}</span>\n                              <span className=\"mx-2\">•</span>\n                              <span>\n                                Value per unit:{' '}\n                                <span className=\"font-medium text-foreground\">\n                                  {limitValue.toLocaleString()}\n                                </span>\n                              </span>\n                            </div>\n                          </div>\n\n                          {/* Quantity & Total */}\n                          <div className=\"flex items-center gap-4\">\n                            <div className=\"flex items-center gap-2\">\n                              <label className=\"text-sm text-muted-foreground\">\n                                {tr('billing.plans.quantity', 'Quantity')}:\n                              </label>\n                              <input\n                                type=\"number\"\n                                min=\"1\"\n                                value={allocation.quantity}\n                                onChange={(e) =>\n                                  handleQuotaChange(index, 'quantity', e.target.value)\n                                }\n                                className=\"w-24 px-3 py-1.5 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary text-center\"\n                              />\n                            </div>\n                            <div className=\"flex items-center gap-2 text-sm\">\n                              <span className=\"text-muted-foreground\">=</span>\n                              <span className=\"font-semibold text-status-success-text\">\n                                {totalValue.toLocaleString()} total\n                              </span>\n                            </div>\n                          </div>\n                        </>\n                      )}\n                    </div>\n                  );\n                })\n              )}\n            </div>\n          </div>\n        </div>\n\n        <CurrencyPriceOverridesEditor\n          overrides={currencyPriceOverrides}\n          onChange={setCurrencyPriceOverrides}\n        />\n\n        {/* Actions */}\n        <div className=\"flex items-center gap-3 pt-4\">\n          <button\n            type=\"submit\"\n            disabled={isCreating || quotas.length === 0}\n            className=\"px-6 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50\"\n          >\n            {isCreating\n              ? tr('billing.plans.creating', 'Creating...')\n              : tr('billing.plans.createPlanBtn', 'Create Plan')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"px-6 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n          >\n            Cancel\n          </button>\n        </div>\n      </form>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/plans/pages/PlanDetailPage.d.ts

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

package/dist/billing/modules/plans/pages/PlanDetailPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlanDetailPage.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/plans/pages/PlanDetailPage.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAW,MAAM,OAAO,CAAC;AA0DzC,eAAO,MAAM,cAAc,EAAE,EA6W5B,CAAC"}