@burdenoff/microfe-billing 2026.515.6 → 2026.516.1

package/dist/billing/modules/quota/pages/QuotaTemplateEditPage.js

@@ -18,12 +18,14 @@ var h = () => {
 	let { t: h } = m(), g = (e, t) => {
 		let n = h(e);
 		return n === e ? t : n;
-	}, { quotaId: _ } = d(), v = o(), y = a(), { quota: b, isLoading: x, error: S, refetch: C } = s(_), { updateQuota: w, isUpdating: T } = c(), [E, D] = u(""), [O, k] = u("numeric"), [A, j] = u(""), [M, N] = u(""), [P, F] = u(!1), [I, L] = u(r.NEVER), [R, z] = u(!0), [B, V] = u(null), [H, U] = u(!1);
+	}, { quotaId: _ } = d(), v = o(), y = a(), { quota: b, isLoading: x, error: S, refetch: C } = s(_), { updateQuota: w, isUpdating: T } = c(), [E, D] = u(""), [O, k] = u(""), [A, j] = u(""), [M, N] = u("numeric"), [P, F] = u(""), [I, L] = u(""), [R, z] = u(!1), [B, V] = u(r.NEVER), [H, U] = u(!0), [W, G] = u(null), [K, q] = u(!1);
 	return l(() => {
 		if (b) {
-			D(b.name ?? ""), F(b.reusable ?? !1), L(b.resetPeriod ?? r.NEVER), z(b.isActive ?? !0);
+			D(b.name ?? ""), z(b.reusable ?? !1), V(b.resetPeriod ?? r.NEVER), U(b.isActive ?? !0);
 			let e = b.limits;
-			k(e?.type ?? "numeric"), j(String(e?.value ?? "")), N(e?.unit ?? "");
+			N(e?.type ?? "numeric"), F(String(e?.value ?? "")), L(e?.unit ?? "");
+			let t = b.context;
+			k(t?.displayName ?? ""), j(t?.description ?? "");
 		}
 	}, [b]), y.canManageQuotas ? x ? /* @__PURE__ */ p("div", {
 		className: "space-y-6 p-6",
@@ -47,50 +49,54 @@ var h = () => {
 	}) : b ? /* @__PURE__ */ p("div", {
 		className: "space-y-6 p-6",
 		children: [/* @__PURE__ */ f(t, {
-			title: `Edit Quota: ${b.name}`,
+			title: `Edit Quota: ${b.context?.displayName ?? b.name}`,
 			description: "Update the quota template configuration"
 		}), /* @__PURE__ */ p("form", {
 			onSubmit: async (e) => {
-				if (e.preventDefault(), V(null), U(!1), !E.trim()) {
-					V("Quota name is required");
+				if (e.preventDefault(), G(null), q(!1), !E.trim()) {
+					G("Quota name is required");
 					return;
 				}
-				if (!A || isNaN(Number(A)) || Number(A) < 0) {
-					V("Valid limit value is required");
+				if (!P || isNaN(Number(P)) || Number(P) < 0) {
+					G("Valid limit value is required");
 					return;
 				}
-				if (!M.trim()) {
-					V("Unit is required (e.g., bots, GB, seats)");
+				if (!I.trim()) {
+					G("Unit is required (e.g., bots, GB, seats)");
 					return;
 				}
 				let t = {
 					id: _,
 					name: E.trim(),
 					limits: {
-						type: O,
-						value: Number(A),
-						unit: M.trim()
+						type: M,
+						value: Number(P),
+						unit: I.trim()
 					},
-					reusable: P,
-					isActive: R,
-					resetPeriod: I
+					reusable: R,
+					isActive: H,
+					resetPeriod: B,
+					context: {
+						displayName: O.trim() || E.trim(),
+						description: A.trim()
+					}
 				};
 				try {
-					await w(t), U(!0), setTimeout(() => v(`/quotas/${_}`), 1500);
+					await w(t), q(!0), setTimeout(() => v(`/quotas/${_}`), 1500);
 				} catch (e) {
-					V(e instanceof Error ? e.message : "Failed to update quota");
+					G(e instanceof Error ? e.message : "Failed to update quota");
 				}
 			},
 			className: "max-w-2xl space-y-6",
 			children: [
-				B && /* @__PURE__ */ f("div", {
+				W && /* @__PURE__ */ f("div", {
 					className: "p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg",
 					children: /* @__PURE__ */ f("p", {
 						className: "text-sm text-status-error-text",
-						children: B
+						children: W
 					})
 				}),
-				H && /* @__PURE__ */ f("div", {
+				K && /* @__PURE__ */ f("div", {
 					className: "p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg",
 					children: /* @__PURE__ */ f("p", {
 						className: "text-sm text-status-success-text",
@@ -108,19 +114,72 @@ var h = () => {
 					}), /* @__PURE__ */ p("div", {
 						className: "p-4 space-y-4",
 						children: [
-							/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
-								htmlFor: "name",
-								className: "block text-sm font-medium text-foreground mb-1",
-								children: "Quota Name *"
-							}), /* @__PURE__ */ f("input", {
-								id: "name",
-								type: "text",
-								value: E,
-								onChange: (e) => D(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: "e.g., API Calls, Storage, Seats",
-								required: !0
-							})] }),
+							/* @__PURE__ */ p("div", { children: [
+								/* @__PURE__ */ f("label", {
+									htmlFor: "name",
+									className: "block text-sm font-medium text-foreground mb-1",
+									children: "Quota Key *"
+								}),
+								/* @__PURE__ */ f("input", {
+									id: "name",
+									type: "text",
+									value: E,
+									onChange: (e) => D(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 font-mono text-sm",
+									placeholder: "e.g., sessions-started, tunnels-created",
+									required: !0
+								}),
+								/* @__PURE__ */ p("p", {
+									className: "text-xs text-muted-foreground mt-1",
+									children: [
+										"Internal machine key — must match the ",
+										/* @__PURE__ */ f("code", { children: "quotaName" }),
+										" used in",
+										" ",
+										/* @__PURE__ */ f("code", { children: "@usage" }),
+										" directives. Never shown to users."
+									]
+								})
+							] }),
+							/* @__PURE__ */ p("div", { children: [
+								/* @__PURE__ */ f("label", {
+									htmlFor: "displayName",
+									className: "block text-sm font-medium text-foreground mb-1",
+									children: "Display Name *"
+								}),
+								/* @__PURE__ */ f("input", {
+									id: "displayName",
+									type: "text",
+									value: O,
+									onChange: (e) => k(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: "e.g., Tunnels, Session Starts, Webhooks",
+									required: !0
+								}),
+								/* @__PURE__ */ f("p", {
+									className: "text-xs text-muted-foreground mt-1",
+									children: "Human-readable name shown to users in billing and usage UI."
+								})
+							] }),
+							/* @__PURE__ */ p("div", { children: [
+								/* @__PURE__ */ f("label", {
+									htmlFor: "description",
+									className: "block text-sm font-medium text-foreground mb-1",
+									children: "Description"
+								}),
+								/* @__PURE__ */ f("textarea", {
+									id: "description",
+									value: A,
+									onChange: (e) => j(e.target.value),
+									rows: 2,
+									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 resize-none",
+									placeholder: "e.g., Active tunnels created through VibeControls (slot freed on delete)"
+								}),
+								/* @__PURE__ */ f("p", {
+									className: "text-xs text-muted-foreground mt-1",
+									children: "Short explanation shown in billing and usage detail views."
+								})
+							] }),
 							/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
 								className: "block text-sm font-medium text-foreground mb-1",
 								children: "Quota Type"
@@ -136,8 +195,8 @@ var h = () => {
 								children: [/* @__PURE__ */ f("input", {
 									id: "reusable",
 									type: "checkbox",
-									checked: P,
-									onChange: (e) => F(e.target.checked),
+									checked: R,
+									onChange: (e) => z(e.target.checked),
 									className: "w-4 h-4 rounded border-border text-primary focus:ring-primary"
 								}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
 									htmlFor: "reusable",
@@ -156,8 +215,8 @@ var h = () => {
 								}),
 								/* @__PURE__ */ p("select", {
 									id: "resetPeriod",
-									value: I,
-									onChange: (e) => L(e.target.value),
+									value: B,
+									onChange: (e) => V(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__ */ f("option", {
@@ -184,8 +243,8 @@ var h = () => {
 								children: [/* @__PURE__ */ f("input", {
 									id: "isActive",
 									type: "checkbox",
-									checked: R,
-									onChange: (e) => z(e.target.checked),
+									checked: H,
+									onChange: (e) => U(e.target.checked),
 									className: "w-4 h-4 rounded border-border text-primary focus:ring-primary"
 								}), /* @__PURE__ */ f("label", {
 									htmlFor: "isActive",
@@ -213,8 +272,8 @@ var h = () => {
 								children: "Limit Type *"
 							}), /* @__PURE__ */ p("select", {
 								id: "limitType",
-								value: O,
-								onChange: (e) => k(e.target.value),
+								value: M,
+								onChange: (e) => N(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__ */ f("option", {
@@ -245,8 +304,8 @@ var h = () => {
 									id: "limitValue",
 									type: "number",
 									min: "0",
-									value: A,
-									onChange: (e) => j(e.target.value),
+									value: P,
+									onChange: (e) => F(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: "1000",
 									required: !0
@@ -265,8 +324,8 @@ var h = () => {
 								/* @__PURE__ */ f("input", {
 									id: "unit",
 									type: "text",
-									value: M,
-									onChange: (e) => N(e.target.value),
+									value: I,
+									onChange: (e) => L(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: "e.g., bots, GB, MB, seats, workflow runs",
 									required: !0

package/dist/billing/modules/quota/pages/QuotaTemplateEditPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuotaTemplateEditPage.js","names":[],"sources":["../../../../../src/billing/modules/quota/pages/QuotaTemplateEditPage.tsx"],"sourcesContent":["/**\n * Quota Module - Quota Template Edit Page\n * Form to edit an existing quota template\n */\n\nimport { useState, useEffect, type FC, type FormEvent } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useQuotaTemplate, useQuotaTemplateMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader, ServerError } from '../../../shared/components';\nimport { isServerError } from '../../../shared/utils';\nimport { QuotaResetPeriod, type UpdateQuotaInput } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nexport const QuotaTemplateEditPage: 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 { quotaId } = useParams<{ quotaId: string }>();\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const {\n    quota,\n    isLoading: isQuotaLoading,\n    error: quotaError,\n    refetch,\n  } = useQuotaTemplate(quotaId);\n  const { updateQuota, isUpdating } = useQuotaTemplateMutations();\n\n  // Form state\n  const [name, setName] = useState('');\n  const [limitType, setLimitType] = useState('numeric');\n  const [limitValue, setLimitValue] = useState('');\n  const [unit, setUnit] = useState('');\n  const [reusable, setReusable] = useState(false);\n  const [resetPeriod, setResetPeriod] = useState<QuotaResetPeriod>(QuotaResetPeriod.NEVER);\n  const [isActive, setIsActive] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState(false);\n\n  // Populate form when quota data loads\n  useEffect(() => {\n    if (quota) {\n      setName(quota.name ?? '');\n      setReusable(quota.reusable ?? false);\n      setResetPeriod(quota.resetPeriod ?? QuotaResetPeriod.NEVER);\n      setIsActive(quota.isActive ?? true);\n\n      const limits = quota.limits as { type?: string; value?: number; unit?: string } | null;\n      setLimitType(limits?.type ?? 'numeric');\n      setLimitValue(String(limits?.value ?? ''));\n      setUnit(limits?.unit ?? '');\n    }\n  }, [quota]);\n\n  // Permission check\n  if (!permissions.canManageQuotas) {\n    return <AccessDenied message=\"You don't have permission to edit quotas.\" />;\n  }\n\n  // Loading state\n  if (isQuotaLoading) {\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].map((i) => (\n            <div key={i} className=\"h-16 bg-muted animate-pulse rounded\" />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (quotaError && isServerError(quotaError)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title=\"Server Unavailable\"\n          message=\"Unable to load quota. The server might be down or experiencing issues.\"\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  if (!quota) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <h2 className=\"text-lg font-semibold text-foreground\">Quota not found</h2>\n          <button\n            onClick={() => navigateTo('/quotas')}\n            className=\"px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90\"\n          >\n            Back to Quotas\n          </button>\n        </div>\n      </div>\n    );\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('Quota name is required');\n      return;\n    }\n    if (!limitValue || isNaN(Number(limitValue)) || Number(limitValue) < 0) {\n      setError('Valid limit value is required');\n      return;\n    }\n    if (!unit.trim()) {\n      setError('Unit is required (e.g., bots, GB, seats)');\n      return;\n    }\n\n    const input: UpdateQuotaInput = {\n      id: quotaId!,\n      name: name.trim(),\n      limits: {\n        type: limitType,\n        value: Number(limitValue),\n        unit: unit.trim(),\n      },\n      reusable,\n      isActive,\n      resetPeriod,\n    };\n\n    try {\n      await updateQuota(input);\n      setSuccess(true);\n      // Navigate back after short delay\n      setTimeout(() => navigateTo(`/quotas/${quotaId}`), 1500);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to update quota');\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={`Edit Quota: ${quota.name}`}\n        description=\"Update the quota template configuration\"\n      />\n\n      <form onSubmit={handleSubmit} className=\"max-w-2xl 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              Quota updated successfully! Redirecting...\n            </p>\n          </div>\n        )}\n\n        {/* Basic Info */}\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\">Basic Information</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                Quota 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=\"e.g., API Calls, Storage, Seats\"\n                required\n              />\n            </div>\n\n            {/* Quota Type (read-only) */}\n            <div>\n              <label className=\"block text-sm font-medium text-foreground mb-1\">Quota Type</label>\n              <div className=\"px-3 py-2 border border-border rounded-md bg-muted/50 text-muted-foreground\">\n                {quota.quotaType === 'POOLED' ? 'Pooled' : 'Product Specific'}\n                <span className=\"text-xs ml-2\">(cannot be changed)</span>\n              </div>\n            </div>\n\n            {/* Reusable */}\n            <div className=\"flex items-center gap-3\">\n              <input\n                id=\"reusable\"\n                type=\"checkbox\"\n                checked={reusable}\n                onChange={(e) => setReusable(e.target.checked)}\n                className=\"w-4 h-4 rounded border-border text-primary focus:ring-primary\"\n              />\n              <div>\n                <label htmlFor=\"reusable\" className=\"text-sm font-medium text-foreground\">\n                  Reusable Quota\n                </label>\n                <p className=\"text-xs text-muted-foreground\">\n                  Enable for quotas like seats or bots that can be freed up\n                </p>\n              </div>\n            </div>\n\n            {/* Reset Period */}\n            <div>\n              <label\n                htmlFor=\"resetPeriod\"\n                className=\"block text-sm font-medium text-foreground mb-1\"\n              >\n                Reset Period\n              </label>\n              <select\n                id=\"resetPeriod\"\n                value={resetPeriod}\n                onChange={(e) => setResetPeriod(e.target.value as QuotaResetPeriod)}\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={QuotaResetPeriod.NEVER}>Never (one-time limit)</option>\n                <option value={QuotaResetPeriod.DAILY}>Daily (resets every day)</option>\n                <option value={QuotaResetPeriod.MONTHLY}>Monthly (resets every month)</option>\n              </select>\n              <p className=\"text-xs text-muted-foreground mt-1\">\n                How often the quota usage counter is reset to zero\n              </p>\n            </div>\n\n            {/* Status */}\n            <div className=\"flex items-center gap-3\">\n              <input\n                id=\"isActive\"\n                type=\"checkbox\"\n                checked={isActive}\n                onChange={(e) => setIsActive(e.target.checked)}\n                className=\"w-4 h-4 rounded border-border text-primary focus:ring-primary\"\n              />\n              <label htmlFor=\"isActive\" className=\"text-sm font-medium text-foreground\">\n                Quota is active\n              </label>\n            </div>\n          </div>\n        </div>\n\n        {/* Limits Configuration */}\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\">Limits Configuration</h2>\n          </div>\n          <div className=\"p-4 space-y-4\">\n            {/* Limit Type */}\n            <div>\n              <label htmlFor=\"limitType\" className=\"block text-sm font-medium text-foreground mb-1\">\n                Limit Type *\n              </label>\n              <select\n                id=\"limitType\"\n                value={limitType}\n                onChange={(e) => setLimitType(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=\"numeric\">Numeric (count)</option>\n                <option value=\"storage\">Storage (bytes)</option>\n                <option value=\"duration\">Duration (seconds)</option>\n                <option value=\"percentage\">Percentage</option>\n              </select>\n            </div>\n\n            {/* Limit Value */}\n            <div>\n              <label\n                htmlFor=\"limitValue\"\n                className=\"block text-sm font-medium text-foreground mb-1\"\n              >\n                Limit Value *\n              </label>\n              <input\n                id=\"limitValue\"\n                type=\"number\"\n                min=\"0\"\n                value={limitValue}\n                onChange={(e) => setLimitValue(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=\"1000\"\n                required\n              />\n              <p className=\"text-xs text-muted-foreground mt-1\">\n                The maximum limit value for this quota\n              </p>\n            </div>\n\n            {/* Unit */}\n            <div>\n              <label htmlFor=\"unit\" className=\"block text-sm font-medium text-foreground mb-1\">\n                Unit *\n              </label>\n              <input\n                id=\"unit\"\n                type=\"text\"\n                value={unit}\n                onChange={(e) => setUnit(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=\"e.g., bots, GB, MB, seats, workflow runs\"\n                required\n              />\n              <p className=\"text-xs text-muted-foreground mt-1\">\n                The unit of measurement displayed with usage values (e.g., &quot;2/6 bots&quot;)\n              </p>\n            </div>\n          </div>\n        </div>\n\n        {/* Actions */}\n        <div className=\"flex items-center gap-3 pt-4\">\n          <button\n            type=\"submit\"\n            disabled={isUpdating}\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            {isUpdating\n              ? tr('billing.quota.saving', 'Saving...')\n              : tr('billing.quota.saveChanges', 'Save Changes')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo(`/quotas/${quotaId}`)}\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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"}
+{"version":3,"file":"QuotaTemplateEditPage.js","names":[],"sources":["../../../../../src/billing/modules/quota/pages/QuotaTemplateEditPage.tsx"],"sourcesContent":["/**\n * Quota Module - Quota Template Edit Page\n * Form to edit an existing quota template\n */\n\nimport { useState, useEffect, type FC, type FormEvent } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useQuotaTemplate, useQuotaTemplateMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader, ServerError } from '../../../shared/components';\nimport { isServerError } from '../../../shared/utils';\nimport { QuotaResetPeriod, type UpdateQuotaInput } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nexport const QuotaTemplateEditPage: 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 { quotaId } = useParams<{ quotaId: string }>();\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const {\n    quota,\n    isLoading: isQuotaLoading,\n    error: quotaError,\n    refetch,\n  } = useQuotaTemplate(quotaId);\n  const { updateQuota, isUpdating } = useQuotaTemplateMutations();\n\n  // Form state\n  const [name, setName] = useState('');\n  const [displayName, setDisplayName] = useState('');\n  const [description, setDescription] = useState('');\n  const [limitType, setLimitType] = useState('numeric');\n  const [limitValue, setLimitValue] = useState('');\n  const [unit, setUnit] = useState('');\n  const [reusable, setReusable] = useState(false);\n  const [resetPeriod, setResetPeriod] = useState<QuotaResetPeriod>(QuotaResetPeriod.NEVER);\n  const [isActive, setIsActive] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState(false);\n\n  // Populate form when quota data loads\n  useEffect(() => {\n    if (quota) {\n      setName(quota.name ?? '');\n      setReusable(quota.reusable ?? false);\n      setResetPeriod(quota.resetPeriod ?? QuotaResetPeriod.NEVER);\n      setIsActive(quota.isActive ?? true);\n\n      const limits = quota.limits as { type?: string; value?: number; unit?: string } | null;\n      setLimitType(limits?.type ?? 'numeric');\n      setLimitValue(String(limits?.value ?? ''));\n      setUnit(limits?.unit ?? '');\n\n      const ctx = quota.context as { displayName?: string; description?: string } | null;\n      setDisplayName(ctx?.displayName ?? '');\n      setDescription(ctx?.description ?? '');\n    }\n  }, [quota]);\n\n  // Permission check\n  if (!permissions.canManageQuotas) {\n    return <AccessDenied message=\"You don't have permission to edit quotas.\" />;\n  }\n\n  // Loading state\n  if (isQuotaLoading) {\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].map((i) => (\n            <div key={i} className=\"h-16 bg-muted animate-pulse rounded\" />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (quotaError && isServerError(quotaError)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title=\"Server Unavailable\"\n          message=\"Unable to load quota. The server might be down or experiencing issues.\"\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  if (!quota) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <h2 className=\"text-lg font-semibold text-foreground\">Quota not found</h2>\n          <button\n            onClick={() => navigateTo('/quotas')}\n            className=\"px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90\"\n          >\n            Back to Quotas\n          </button>\n        </div>\n      </div>\n    );\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('Quota name is required');\n      return;\n    }\n    if (!limitValue || isNaN(Number(limitValue)) || Number(limitValue) < 0) {\n      setError('Valid limit value is required');\n      return;\n    }\n    if (!unit.trim()) {\n      setError('Unit is required (e.g., bots, GB, seats)');\n      return;\n    }\n\n    const input: UpdateQuotaInput = {\n      id: quotaId!,\n      name: name.trim(),\n      limits: {\n        type: limitType,\n        value: Number(limitValue),\n        unit: unit.trim(),\n      },\n      reusable,\n      isActive,\n      resetPeriod,\n      context: {\n        displayName: displayName.trim() || name.trim(),\n        description: description.trim(),\n      },\n    };\n\n    try {\n      await updateQuota(input);\n      setSuccess(true);\n      // Navigate back after short delay\n      setTimeout(() => navigateTo(`/quotas/${quotaId}`), 1500);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to update quota');\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={`Edit Quota: ${(quota.context as { displayName?: string } | null)?.displayName ?? quota.name}`}\n        description=\"Update the quota template configuration\"\n      />\n\n      <form onSubmit={handleSubmit} className=\"max-w-2xl 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              Quota updated successfully! Redirecting...\n            </p>\n          </div>\n        )}\n\n        {/* Basic Info */}\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\">Basic Information</h2>\n          </div>\n          <div className=\"p-4 space-y-4\">\n            {/* Machine Key (name) */}\n            <div>\n              <label htmlFor=\"name\" className=\"block text-sm font-medium text-foreground mb-1\">\n                Quota Key *\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 font-mono text-sm\"\n                placeholder=\"e.g., sessions-started, tunnels-created\"\n                required\n              />\n              <p className=\"text-xs text-muted-foreground mt-1\">\n                Internal machine key — must match the <code>quotaName</code> used in{' '}\n                <code>@usage</code> directives. Never shown to users.\n              </p>\n            </div>\n\n            {/* Display Name */}\n            <div>\n              <label htmlFor=\"displayName\" className=\"block text-sm font-medium text-foreground mb-1\">\n                Display Name *\n              </label>\n              <input\n                id=\"displayName\"\n                type=\"text\"\n                value={displayName}\n                onChange={(e) => setDisplayName(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=\"e.g., Tunnels, Session Starts, Webhooks\"\n                required\n              />\n              <p className=\"text-xs text-muted-foreground mt-1\">\n                Human-readable name shown to users in billing and usage UI.\n              </p>\n            </div>\n\n            {/* Description */}\n            <div>\n              <label htmlFor=\"description\" className=\"block text-sm font-medium text-foreground mb-1\">\n                Description\n              </label>\n              <textarea\n                id=\"description\"\n                value={description}\n                onChange={(e) => setDescription(e.target.value)}\n                rows={2}\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 resize-none\"\n                placeholder=\"e.g., Active tunnels created through VibeControls (slot freed on delete)\"\n              />\n              <p className=\"text-xs text-muted-foreground mt-1\">\n                Short explanation shown in billing and usage detail views.\n              </p>\n            </div>\n\n            {/* Quota Type (read-only) */}\n            <div>\n              <label className=\"block text-sm font-medium text-foreground mb-1\">Quota Type</label>\n              <div className=\"px-3 py-2 border border-border rounded-md bg-muted/50 text-muted-foreground\">\n                {quota.quotaType === 'POOLED' ? 'Pooled' : 'Product Specific'}\n                <span className=\"text-xs ml-2\">(cannot be changed)</span>\n              </div>\n            </div>\n\n            {/* Reusable */}\n            <div className=\"flex items-center gap-3\">\n              <input\n                id=\"reusable\"\n                type=\"checkbox\"\n                checked={reusable}\n                onChange={(e) => setReusable(e.target.checked)}\n                className=\"w-4 h-4 rounded border-border text-primary focus:ring-primary\"\n              />\n              <div>\n                <label htmlFor=\"reusable\" className=\"text-sm font-medium text-foreground\">\n                  Reusable Quota\n                </label>\n                <p className=\"text-xs text-muted-foreground\">\n                  Enable for quotas like seats or bots that can be freed up\n                </p>\n              </div>\n            </div>\n\n            {/* Reset Period */}\n            <div>\n              <label\n                htmlFor=\"resetPeriod\"\n                className=\"block text-sm font-medium text-foreground mb-1\"\n              >\n                Reset Period\n              </label>\n              <select\n                id=\"resetPeriod\"\n                value={resetPeriod}\n                onChange={(e) => setResetPeriod(e.target.value as QuotaResetPeriod)}\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={QuotaResetPeriod.NEVER}>Never (one-time limit)</option>\n                <option value={QuotaResetPeriod.DAILY}>Daily (resets every day)</option>\n                <option value={QuotaResetPeriod.MONTHLY}>Monthly (resets every month)</option>\n              </select>\n              <p className=\"text-xs text-muted-foreground mt-1\">\n                How often the quota usage counter is reset to zero\n              </p>\n            </div>\n\n            {/* Status */}\n            <div className=\"flex items-center gap-3\">\n              <input\n                id=\"isActive\"\n                type=\"checkbox\"\n                checked={isActive}\n                onChange={(e) => setIsActive(e.target.checked)}\n                className=\"w-4 h-4 rounded border-border text-primary focus:ring-primary\"\n              />\n              <label htmlFor=\"isActive\" className=\"text-sm font-medium text-foreground\">\n                Quota is active\n              </label>\n            </div>\n          </div>\n        </div>\n\n        {/* Limits Configuration */}\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\">Limits Configuration</h2>\n          </div>\n          <div className=\"p-4 space-y-4\">\n            {/* Limit Type */}\n            <div>\n              <label htmlFor=\"limitType\" className=\"block text-sm font-medium text-foreground mb-1\">\n                Limit Type *\n              </label>\n              <select\n                id=\"limitType\"\n                value={limitType}\n                onChange={(e) => setLimitType(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=\"numeric\">Numeric (count)</option>\n                <option value=\"storage\">Storage (bytes)</option>\n                <option value=\"duration\">Duration (seconds)</option>\n                <option value=\"percentage\">Percentage</option>\n              </select>\n            </div>\n\n            {/* Limit Value */}\n            <div>\n              <label\n                htmlFor=\"limitValue\"\n                className=\"block text-sm font-medium text-foreground mb-1\"\n              >\n                Limit Value *\n              </label>\n              <input\n                id=\"limitValue\"\n                type=\"number\"\n                min=\"0\"\n                value={limitValue}\n                onChange={(e) => setLimitValue(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=\"1000\"\n                required\n              />\n              <p className=\"text-xs text-muted-foreground mt-1\">\n                The maximum limit value for this quota\n              </p>\n            </div>\n\n            {/* Unit */}\n            <div>\n              <label htmlFor=\"unit\" className=\"block text-sm font-medium text-foreground mb-1\">\n                Unit *\n              </label>\n              <input\n                id=\"unit\"\n                type=\"text\"\n                value={unit}\n                onChange={(e) => setUnit(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=\"e.g., bots, GB, MB, seats, workflow runs\"\n                required\n              />\n              <p className=\"text-xs text-muted-foreground mt-1\">\n                The unit of measurement displayed with usage values (e.g., &quot;2/6 bots&quot;)\n              </p>\n            </div>\n          </div>\n        </div>\n\n        {/* Actions */}\n        <div className=\"flex items-center gap-3 pt-4\">\n          <button\n            type=\"submit\"\n            disabled={isUpdating}\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            {isUpdating\n              ? tr('billing.quota.saving', 'Saving...')\n              : tr('billing.quota.saveChanges', 'Save Changes')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo(`/quotas/${quotaId}`)}\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/subscriptions/pages/SubscriptionsListPage.js

@@ -239,10 +239,10 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 				]
 			}),
 			/* @__PURE__ */ v("div", {
-				className: "flex flex-wrap items-center gap-4 pb-4 border-b border-border",
+				className: "flex flex-col sm:flex-row flex-wrap items-stretch sm:items-center gap-3 sm:gap-4 pb-4 border-b border-border",
 				children: [
 					/* @__PURE__ */ _("div", {
-						className: "inline-flex rounded-lg border border-border p-1 bg-muted/50",
+						className: "inline-flex rounded-lg border border-border p-1 bg-muted/50 flex-wrap",
 						children: [
 							"all",
 							"active",
@@ -255,7 +255,7 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 						}, e))
 					}),
 					/* @__PURE__ */ v("div", {
-						className: "relative flex-1 min-w-[200px] max-w-md",
+						className: "relative flex-1 min-w-0 w-full sm:max-w-md",
 						children: [/* @__PURE__ */ _("svg", {
 							className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground",
 							fill: "none",

package/dist/billing/modules/subscriptions/pages/SubscriptionsListPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubscriptionsListPage.js","names":[],"sources":["../../../../../src/billing/modules/subscriptions/pages/SubscriptionsListPage.tsx"],"sourcesContent":["/**\n * Subscriptions Module - Subscriptions List Page\n * Displays paginated subscriptions for the selected billing account\n */\n\nimport { useState, useEffect, useRef, type FC } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBillingAccounts, usePaginatedSubscriptions } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { BillingSubscription, SubscriptionStatus, BillingAccount } from '../../../shared/types';\nimport { useBillingAccountSelection } from '../../../hooks/useBillingAccountSelection';\nimport { withBillingAccountId } from '../../../shared/utils/navigation';\nimport {\n  formatCurrency,\n  formatDate,\n  formatPlanDuration,\n  formatSubscriptionStatus,\n} from '../../../shared/utils/format';\nimport { getSubscriptionStatusColor, getStatusBadgeClasses } from '../../../shared/utils/status';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ntype FilterStatus = 'all' | 'active' | 'canceled' | 'inactive';\n\n// Statuses that count as \"inactive\" (historical/past subscriptions)\nconst INACTIVE_STATUSES = ['expired', 'upgraded'] as const;\n\nconst PAGE_SIZE = 10;\n\nexport const SubscriptionsListPage: 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 { orgId } = useBilling();\n\n  // Fetch all billing accounts for the selector\n  const { billingAccounts, isLoading: isLoadingAccounts } = useBillingAccounts();\n\n  // State\n  const {\n    selectedAccountId: selectedBillingAccountId,\n    setSelectedAccountId: setSelectedBillingAccountId,\n  } = useBillingAccountSelection({\n    orgId,\n    billingAccounts,\n    syncFromUrl: true,\n    urlParamName: 'billingAccountId',\n  });\n\n  const [isAccountSelectorOpen, setIsAccountSelectorOpen] = useState(false);\n  const [filterStatus, setFilterStatus] = useState<FilterStatus>('all');\n  const [searchQuery, setSearchQuery] = useState('');\n  const [debouncedSearch, setDebouncedSearch] = useState('');\n  const [currentPage, setCurrentPage] = useState(1);\n  const debounceTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  useEffect(() => {\n    clearTimeout(debounceTimer.current);\n    debounceTimer.current = setTimeout(() => {\n      setDebouncedSearch(searchQuery);\n      setCurrentPage(1);\n    }, 400);\n    return () => clearTimeout(debounceTimer.current);\n  }, [searchQuery]);\n\n  // Fetch paginated subscriptions for selected billing account\n  const {\n    subscriptions,\n    activeSubscriptions,\n    totalCount,\n    totalPages,\n    isLoading: isLoadingSubscriptions,\n    error,\n    refetch,\n  } = usePaginatedSubscriptions(\n    selectedBillingAccountId ?? undefined,\n    currentPage,\n    PAGE_SIZE,\n    debouncedSearch || undefined\n  );\n\n  // Get selected billing account info from the list\n  const selectedBillingAccount = billingAccounts.find((a) => a.id === selectedBillingAccountId);\n\n  // Handle account selection\n  const handleSelectAccount = (account: BillingAccount) => {\n    setSelectedBillingAccountId(account.id);\n    setIsAccountSelectorOpen(false);\n    setCurrentPage(1); // Reset to first page when switching accounts\n  };\n\n  // Handle page change\n  const handlePageChange = (newPage: number) => {\n    setCurrentPage(newPage);\n  };\n\n  // Client-side status filter only; search is handled by the backend\n  const filteredSubscriptions = subscriptions.filter((subscription) => {\n    if (filterStatus === 'all') return true;\n    if (filterStatus === 'inactive') {\n      return INACTIVE_STATUSES.includes(subscription.status as (typeof INACTIVE_STATUSES)[number]);\n    }\n    return subscription.status === filterStatus;\n  });\n\n  const isLoading = isLoadingAccounts || isLoadingSubscriptions;\n\n  // Permission check\n  if (!permissions.canViewSubscriptions) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\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=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-foreground\">Access Denied</h2>\n          <p className=\"text-sm text-muted-foreground max-w-sm\">\n            You don&apos;t have permission to view subscriptions.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  // Loading state\n  if (isLoading && !selectedBillingAccount) {\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=\"space-y-4\">\n          {[1, 2, 3].map((i) => (\n            <div key={i} className=\"border border-border rounded-lg p-6\">\n              <div className=\"flex items-center gap-4\">\n                <div className=\"h-12 w-12 bg-muted animate-pulse rounded\" />\n                <div className=\"flex-1 space-y-2\">\n                  <div className=\"h-5 w-32 bg-muted animate-pulse rounded\" />\n                  <div className=\"h-4 w-48 bg-muted animate-pulse rounded\" />\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error) {\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-destructive/10 flex items-center justify-center\">\n            <svg\n              className=\"w-6 h-6 text-destructive\"\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=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-foreground\">Failed to load subscriptions</h2>\n          <p className=\"text-sm text-muted-foreground\">{error.message}</p>\n          <button\n            onClick={() => refetch()}\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            Try Again\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <h1 className=\"text-2xl font-bold text-foreground\">\n            {tr('billing.subscriptions.title', 'Subscriptions')}\n          </h1>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {tr('billing.subscriptions.subtitle', 'Manage your active and past subscriptions')}\n          </p>\n        </div>\n\n        {permissions.canCreateSubscription && (\n          <button\n            onClick={() => navigateTo('/plans')}\n            className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 4v16m8-8H4\"\n              />\n            </svg>\n            New Subscription\n          </button>\n        )}\n      </div>\n\n      {/* Account Selector (if multiple accounts) */}\n      {billingAccounts.length > 1 && (\n        <div className=\"relative\">\n          <button\n            onClick={() => setIsAccountSelectorOpen(!isAccountSelectorOpen)}\n            className=\"w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border rounded-lg bg-card hover:bg-muted/50 transition-colors\"\n          >\n            <div className=\"flex items-center gap-3\">\n              <div className=\"w-8 h-8 rounded-lg 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=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\n                  />\n                </svg>\n              </div>\n              <div className=\"text-left\">\n                <p className=\"text-sm font-medium text-foreground\">\n                  {selectedBillingAccount?.name || 'Select Account'}\n                </p>\n                <p className=\"text-xs text-muted-foreground\">{selectedBillingAccount?.email}</p>\n              </div>\n            </div>\n            <svg\n              className={`w-4 h-4 text-muted-foreground transition-transform ${isAccountSelectorOpen ? 'rotate-180' : ''}`}\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 9l-7 7-7-7\"\n              />\n            </svg>\n          </button>\n\n          {isAccountSelectorOpen && (\n            <>\n              <div className=\"fixed inset-0 z-10\" onClick={() => setIsAccountSelectorOpen(false)} />\n              <div className=\"absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-popover border border-border rounded-lg shadow-lg z-20 py-1 max-h-60 overflow-y-auto\">\n                {billingAccounts.map((account) => (\n                  <button\n                    key={account.id}\n                    onClick={() => handleSelectAccount(account)}\n                    className=\"w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-muted transition-colors\"\n                  >\n                    <div className=\"flex items-center gap-3 min-w-0\">\n                      <div className=\"w-8 h-8 rounded-lg bg-muted flex items-center justify-center flex-shrink-0\">\n                        <svg\n                          className=\"w-4 h-4 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=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\n                          />\n                        </svg>\n                      </div>\n                      <div className=\"text-left min-w-0\">\n                        <p className=\"text-sm font-medium text-foreground truncate\">\n                          {account.name}\n                        </p>\n                        <p className=\"text-xs text-muted-foreground truncate\">{account.email}</p>\n                      </div>\n                    </div>\n                    {selectedBillingAccount?.id === account.id && (\n                      <svg\n                        className=\"w-4 h-4 text-primary flex-shrink-0\"\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=\"M5 13l4 4L19 7\"\n                        />\n                      </svg>\n                    )}\n                  </button>\n                ))}\n              </div>\n            </>\n          )}\n        </div>\n      )}\n\n      {/* Account Summary */}\n      {selectedBillingAccount && (\n        <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-4\">\n          <div className=\"border border-border rounded-lg bg-card p-4\">\n            <p className=\"text-sm text-muted-foreground\">Account</p>\n            <p className=\"text-lg font-semibold text-foreground mt-1\">\n              {selectedBillingAccount.name}\n            </p>\n          </div>\n          <div className=\"border border-border rounded-lg bg-card p-4\">\n            <p className=\"text-sm text-muted-foreground\">Active Subscriptions</p>\n            <p className=\"text-lg font-semibold text-status-success-text mt-1\">\n              {activeSubscriptions.length}\n            </p>\n          </div>\n          <div className=\"border border-border rounded-lg bg-card p-4\">\n            <p className=\"text-sm text-muted-foreground\">Credit Balance</p>\n            <p className=\"text-lg font-semibold text-foreground mt-1\">\n              {(selectedBillingAccount.creditAmount || 0).toLocaleString()} Credits\n            </p>\n          </div>\n        </div>\n      )}\n\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center gap-4 pb-4 border-b border-border\">\n        {/* Status Filter */}\n        <div className=\"inline-flex rounded-lg border border-border p-1 bg-muted/50\">\n          {(['all', 'active', 'canceled', 'inactive'] as FilterStatus[]).map((status) => (\n            <button\n              key={status}\n              onClick={() => setFilterStatus(status)}\n              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors capitalize ${\n                filterStatus === status\n                  ? 'bg-background text-foreground shadow-sm'\n                  : 'text-muted-foreground hover:text-foreground'\n              }`}\n            >\n              {status === 'inactive' ? 'Inactive' : status}\n            </button>\n          ))}\n        </div>\n\n        {/* Search */}\n        <div className=\"relative flex-1 min-w-[200px] max-w-md\">\n          <svg\n            className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 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=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\n            />\n          </svg>\n          <input\n            type=\"text\"\n            placeholder={tr('billing.subscriptions.searchPlaceholder', 'Search subscriptions...')}\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            className=\"w-full pl-[3.25rem] pr-4 py-2 text-sm border border-border rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent\"\n          />\n        </div>\n\n        {/* Total Count */}\n        <div className=\"text-sm text-muted-foreground\">\n          {totalCount} subscription{totalCount !== 1 ? 's' : ''} total\n        </div>\n      </div>\n\n      {/* Subscriptions List */}\n      {filteredSubscriptions.length === 0 ? (\n        <div className=\"flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg\">\n          <div className=\"w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4\">\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=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\n              />\n            </svg>\n          </div>\n          <h3 className=\"text-lg font-medium text-foreground\">\n            {tr('billing.subscriptions.noSubscriptionsFound', 'No subscriptions found')}\n          </h3>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {filterStatus !== 'all' || debouncedSearch\n              ? 'No subscriptions match your filters.'\n              : \"You don't have any subscriptions yet.\"}\n          </p>\n          {permissions.canCreateSubscription && filterStatus === 'all' && !debouncedSearch && (\n            <button\n              onClick={() => navigateTo('/plans')}\n              className=\"mt-4 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n            >\n              Browse Plans\n            </button>\n          )}\n        </div>\n      ) : (\n        <div className=\"space-y-4\">\n          {filteredSubscriptions.map((subscription) => (\n            <SubscriptionCard\n              key={subscription.id}\n              subscription={subscription}\n              onView={() =>\n                navigateTo(\n                  withBillingAccountId(\n                    `/subscriptions/${subscription.id}`,\n                    subscription.billingAccountId\n                  )\n                )\n              }\n              canCancel={permissions.canCancelSubscription}\n            />\n          ))}\n        </div>\n      )}\n\n      {/* Pagination */}\n      {totalPages > 1 && (\n        <div className=\"flex items-center justify-center gap-2 pt-4\">\n          <button\n            onClick={() => handlePageChange(currentPage - 1)}\n            disabled={currentPage === 1}\n            className=\"px-3 py-1.5 text-sm border border-border rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted transition-colors\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n          </button>\n\n          <div className=\"flex items-center gap-1\">\n            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => {\n              // Show first, last, current, and adjacent pages\n              const showPage =\n                page === 1 || page === totalPages || Math.abs(page - currentPage) <= 1;\n\n              // Show ellipsis\n              const showEllipsisBefore = page === currentPage - 2 && currentPage > 3;\n              const showEllipsisAfter = page === currentPage + 2 && currentPage < totalPages - 2;\n\n              if (showEllipsisBefore || showEllipsisAfter) {\n                return (\n                  <span key={page} className=\"px-2 text-muted-foreground\">\n                    ...\n                  </span>\n                );\n              }\n\n              if (!showPage) return null;\n\n              return (\n                <button\n                  key={page}\n                  onClick={() => handlePageChange(page)}\n                  className={`px-3 py-1.5 text-sm rounded-md transition-colors ${\n                    page === currentPage\n                      ? 'bg-primary text-primary-foreground'\n                      : 'border border-border hover:bg-muted'\n                  }`}\n                >\n                  {page}\n                </button>\n              );\n            })}\n          </div>\n\n          <button\n            onClick={() => handlePageChange(currentPage + 1)}\n            disabled={currentPage === totalPages}\n            className=\"px-3 py-1.5 text-sm border border-border rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted transition-colors\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// Subscription Card Component\n// ============================================================================\n\ninterface SubscriptionCardProps {\n  subscription: BillingSubscription;\n  onView: () => void;\n  canCancel: boolean;\n}\n\nconst SubscriptionCard: FC<SubscriptionCardProps> = ({\n  subscription,\n  onView,\n  canCancel: _canCancel,\n}) => {\n  const plan = subscription.plan;\n  const statusColor = getSubscriptionStatusColor(subscription.status);\n  const isActive = subscription.status === ('active' as SubscriptionStatus);\n\n  // Calculate days remaining\n  const endDate = new Date(subscription.endDate);\n  const now = new Date();\n  const daysRemaining = Math.max(\n    0,\n    Math.ceil((endDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))\n  );\n\n  return (\n    <div\n      className=\"border border-border rounded-lg bg-card hover:shadow-md transition-shadow cursor-pointer\"\n      onClick={onView}\n    >\n      <div className=\"p-6\">\n        <div className=\"flex flex-col sm:flex-row sm:items-center gap-4\">\n          {/* Plan Icon */}\n          <div className=\"w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center shrink-0\">\n            <svg\n              className=\"w-6 h-6 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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"\n              />\n            </svg>\n          </div>\n\n          {/* Subscription Info */}\n          <div className=\"flex-1 min-w-0\">\n            <div className=\"flex items-center gap-2 flex-wrap\">\n              <h3 className=\"font-semibold text-foreground\">{plan?.name || 'Unknown Plan'}</h3>\n              <span\n                className={`px-2 py-0.5 text-xs font-medium rounded ${getStatusBadgeClasses(statusColor)}`}\n              >\n                {formatSubscriptionStatus(subscription.status)}\n              </span>\n            </div>\n            <div className=\"flex items-center gap-4 mt-1 text-sm text-muted-foreground\">\n              <span>\n                {plan ? formatCurrency(plan.price, plan.currency) : '—'} /{' '}\n                {plan ? formatPlanDuration(plan.duration) : '—'}\n              </span>\n              <span className=\"hidden sm:inline\">•</span>\n              <span className=\"hidden sm:inline\">\n                Started {formatDate(subscription.startDate, 'short')}\n              </span>\n            </div>\n          </div>\n\n          {/* Right Side Info */}\n          <div className=\"flex items-center gap-4\">\n            {isActive && (\n              <div className=\"text-right\">\n                <p className=\"text-sm font-medium text-foreground\">{daysRemaining} days</p>\n                <p className=\"text-xs text-muted-foreground\">remaining</p>\n              </div>\n            )}\n            <button\n              onClick={(e) => {\n                e.stopPropagation();\n                onView();\n              }}\n              className=\"px-3 py-1.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n            >\n              View\n            </button>\n          </div>\n        </div>\n\n        {/* Additional Info */}\n        {subscription.addonSubscriptions && subscription.addonSubscriptions.length > 0 && (\n          <div className=\"mt-4 pt-4 border-t border-border\">\n            <p className=\"text-sm text-muted-foreground\">\n              {subscription.addonSubscriptions.length} addon\n              {subscription.addonSubscriptions.length !== 1 ? 's' : ''} attached\n            </p>\n          </div>\n        )}\n\n        {/* Cancellation Info */}\n        {subscription.canceledAt && (\n          <div className=\"mt-4 pt-4 border-t border-border\">\n            <p className=\"text-sm text-muted-foreground\">\n              Canceled on {formatDate(subscription.canceledAt)}\n              {subscription.cancellationReason && <span> — {subscription.cancellationReason}</span>}\n            </p>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"SubscriptionsListPage.js","names":[],"sources":["../../../../../src/billing/modules/subscriptions/pages/SubscriptionsListPage.tsx"],"sourcesContent":["/**\n * Subscriptions Module - Subscriptions List Page\n * Displays paginated subscriptions for the selected billing account\n */\n\nimport { useState, useEffect, useRef, type FC } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBillingAccounts, usePaginatedSubscriptions } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { BillingSubscription, SubscriptionStatus, BillingAccount } from '../../../shared/types';\nimport { useBillingAccountSelection } from '../../../hooks/useBillingAccountSelection';\nimport { withBillingAccountId } from '../../../shared/utils/navigation';\nimport {\n  formatCurrency,\n  formatDate,\n  formatPlanDuration,\n  formatSubscriptionStatus,\n} from '../../../shared/utils/format';\nimport { getSubscriptionStatusColor, getStatusBadgeClasses } from '../../../shared/utils/status';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ntype FilterStatus = 'all' | 'active' | 'canceled' | 'inactive';\n\n// Statuses that count as \"inactive\" (historical/past subscriptions)\nconst INACTIVE_STATUSES = ['expired', 'upgraded'] as const;\n\nconst PAGE_SIZE = 10;\n\nexport const SubscriptionsListPage: 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 { orgId } = useBilling();\n\n  // Fetch all billing accounts for the selector\n  const { billingAccounts, isLoading: isLoadingAccounts } = useBillingAccounts();\n\n  // State\n  const {\n    selectedAccountId: selectedBillingAccountId,\n    setSelectedAccountId: setSelectedBillingAccountId,\n  } = useBillingAccountSelection({\n    orgId,\n    billingAccounts,\n    syncFromUrl: true,\n    urlParamName: 'billingAccountId',\n  });\n\n  const [isAccountSelectorOpen, setIsAccountSelectorOpen] = useState(false);\n  const [filterStatus, setFilterStatus] = useState<FilterStatus>('all');\n  const [searchQuery, setSearchQuery] = useState('');\n  const [debouncedSearch, setDebouncedSearch] = useState('');\n  const [currentPage, setCurrentPage] = useState(1);\n  const debounceTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  useEffect(() => {\n    clearTimeout(debounceTimer.current);\n    debounceTimer.current = setTimeout(() => {\n      setDebouncedSearch(searchQuery);\n      setCurrentPage(1);\n    }, 400);\n    return () => clearTimeout(debounceTimer.current);\n  }, [searchQuery]);\n\n  // Fetch paginated subscriptions for selected billing account\n  const {\n    subscriptions,\n    activeSubscriptions,\n    totalCount,\n    totalPages,\n    isLoading: isLoadingSubscriptions,\n    error,\n    refetch,\n  } = usePaginatedSubscriptions(\n    selectedBillingAccountId ?? undefined,\n    currentPage,\n    PAGE_SIZE,\n    debouncedSearch || undefined\n  );\n\n  // Get selected billing account info from the list\n  const selectedBillingAccount = billingAccounts.find((a) => a.id === selectedBillingAccountId);\n\n  // Handle account selection\n  const handleSelectAccount = (account: BillingAccount) => {\n    setSelectedBillingAccountId(account.id);\n    setIsAccountSelectorOpen(false);\n    setCurrentPage(1); // Reset to first page when switching accounts\n  };\n\n  // Handle page change\n  const handlePageChange = (newPage: number) => {\n    setCurrentPage(newPage);\n  };\n\n  // Client-side status filter only; search is handled by the backend\n  const filteredSubscriptions = subscriptions.filter((subscription) => {\n    if (filterStatus === 'all') return true;\n    if (filterStatus === 'inactive') {\n      return INACTIVE_STATUSES.includes(subscription.status as (typeof INACTIVE_STATUSES)[number]);\n    }\n    return subscription.status === filterStatus;\n  });\n\n  const isLoading = isLoadingAccounts || isLoadingSubscriptions;\n\n  // Permission check\n  if (!permissions.canViewSubscriptions) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\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=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-foreground\">Access Denied</h2>\n          <p className=\"text-sm text-muted-foreground max-w-sm\">\n            You don&apos;t have permission to view subscriptions.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  // Loading state\n  if (isLoading && !selectedBillingAccount) {\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=\"space-y-4\">\n          {[1, 2, 3].map((i) => (\n            <div key={i} className=\"border border-border rounded-lg p-6\">\n              <div className=\"flex items-center gap-4\">\n                <div className=\"h-12 w-12 bg-muted animate-pulse rounded\" />\n                <div className=\"flex-1 space-y-2\">\n                  <div className=\"h-5 w-32 bg-muted animate-pulse rounded\" />\n                  <div className=\"h-4 w-48 bg-muted animate-pulse rounded\" />\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error) {\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-destructive/10 flex items-center justify-center\">\n            <svg\n              className=\"w-6 h-6 text-destructive\"\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=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-foreground\">Failed to load subscriptions</h2>\n          <p className=\"text-sm text-muted-foreground\">{error.message}</p>\n          <button\n            onClick={() => refetch()}\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            Try Again\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <h1 className=\"text-2xl font-bold text-foreground\">\n            {tr('billing.subscriptions.title', 'Subscriptions')}\n          </h1>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {tr('billing.subscriptions.subtitle', 'Manage your active and past subscriptions')}\n          </p>\n        </div>\n\n        {permissions.canCreateSubscription && (\n          <button\n            onClick={() => navigateTo('/plans')}\n            className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 4v16m8-8H4\"\n              />\n            </svg>\n            New Subscription\n          </button>\n        )}\n      </div>\n\n      {/* Account Selector (if multiple accounts) */}\n      {billingAccounts.length > 1 && (\n        <div className=\"relative\">\n          <button\n            onClick={() => setIsAccountSelectorOpen(!isAccountSelectorOpen)}\n            className=\"w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border rounded-lg bg-card hover:bg-muted/50 transition-colors\"\n          >\n            <div className=\"flex items-center gap-3\">\n              <div className=\"w-8 h-8 rounded-lg 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=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\n                  />\n                </svg>\n              </div>\n              <div className=\"text-left\">\n                <p className=\"text-sm font-medium text-foreground\">\n                  {selectedBillingAccount?.name || 'Select Account'}\n                </p>\n                <p className=\"text-xs text-muted-foreground\">{selectedBillingAccount?.email}</p>\n              </div>\n            </div>\n            <svg\n              className={`w-4 h-4 text-muted-foreground transition-transform ${isAccountSelectorOpen ? 'rotate-180' : ''}`}\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 9l-7 7-7-7\"\n              />\n            </svg>\n          </button>\n\n          {isAccountSelectorOpen && (\n            <>\n              <div className=\"fixed inset-0 z-10\" onClick={() => setIsAccountSelectorOpen(false)} />\n              <div className=\"absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-popover border border-border rounded-lg shadow-lg z-20 py-1 max-h-60 overflow-y-auto\">\n                {billingAccounts.map((account) => (\n                  <button\n                    key={account.id}\n                    onClick={() => handleSelectAccount(account)}\n                    className=\"w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-muted transition-colors\"\n                  >\n                    <div className=\"flex items-center gap-3 min-w-0\">\n                      <div className=\"w-8 h-8 rounded-lg bg-muted flex items-center justify-center flex-shrink-0\">\n                        <svg\n                          className=\"w-4 h-4 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=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\n                          />\n                        </svg>\n                      </div>\n                      <div className=\"text-left min-w-0\">\n                        <p className=\"text-sm font-medium text-foreground truncate\">\n                          {account.name}\n                        </p>\n                        <p className=\"text-xs text-muted-foreground truncate\">{account.email}</p>\n                      </div>\n                    </div>\n                    {selectedBillingAccount?.id === account.id && (\n                      <svg\n                        className=\"w-4 h-4 text-primary flex-shrink-0\"\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=\"M5 13l4 4L19 7\"\n                        />\n                      </svg>\n                    )}\n                  </button>\n                ))}\n              </div>\n            </>\n          )}\n        </div>\n      )}\n\n      {/* Account Summary */}\n      {selectedBillingAccount && (\n        <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-4\">\n          <div className=\"border border-border rounded-lg bg-card p-4\">\n            <p className=\"text-sm text-muted-foreground\">Account</p>\n            <p className=\"text-lg font-semibold text-foreground mt-1\">\n              {selectedBillingAccount.name}\n            </p>\n          </div>\n          <div className=\"border border-border rounded-lg bg-card p-4\">\n            <p className=\"text-sm text-muted-foreground\">Active Subscriptions</p>\n            <p className=\"text-lg font-semibold text-status-success-text mt-1\">\n              {activeSubscriptions.length}\n            </p>\n          </div>\n          <div className=\"border border-border rounded-lg bg-card p-4\">\n            <p className=\"text-sm text-muted-foreground\">Credit Balance</p>\n            <p className=\"text-lg font-semibold text-foreground mt-1\">\n              {(selectedBillingAccount.creditAmount || 0).toLocaleString()} Credits\n            </p>\n          </div>\n        </div>\n      )}\n\n      {/* Filters */}\n      <div className=\"flex flex-col sm:flex-row flex-wrap items-stretch sm:items-center gap-3 sm:gap-4 pb-4 border-b border-border\">\n        {/* Status Filter */}\n        <div className=\"inline-flex rounded-lg border border-border p-1 bg-muted/50 flex-wrap\">\n          {(['all', 'active', 'canceled', 'inactive'] as FilterStatus[]).map((status) => (\n            <button\n              key={status}\n              onClick={() => setFilterStatus(status)}\n              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors capitalize ${\n                filterStatus === status\n                  ? 'bg-background text-foreground shadow-sm'\n                  : 'text-muted-foreground hover:text-foreground'\n              }`}\n            >\n              {status === 'inactive' ? 'Inactive' : status}\n            </button>\n          ))}\n        </div>\n\n        {/* Search */}\n        <div className=\"relative flex-1 min-w-0 w-full sm:max-w-md\">\n          <svg\n            className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 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=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\n            />\n          </svg>\n          <input\n            type=\"text\"\n            placeholder={tr('billing.subscriptions.searchPlaceholder', 'Search subscriptions...')}\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            className=\"w-full pl-[3.25rem] pr-4 py-2 text-sm border border-border rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent\"\n          />\n        </div>\n\n        {/* Total Count */}\n        <div className=\"text-sm text-muted-foreground\">\n          {totalCount} subscription{totalCount !== 1 ? 's' : ''} total\n        </div>\n      </div>\n\n      {/* Subscriptions List */}\n      {filteredSubscriptions.length === 0 ? (\n        <div className=\"flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg\">\n          <div className=\"w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4\">\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=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\n              />\n            </svg>\n          </div>\n          <h3 className=\"text-lg font-medium text-foreground\">\n            {tr('billing.subscriptions.noSubscriptionsFound', 'No subscriptions found')}\n          </h3>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {filterStatus !== 'all' || debouncedSearch\n              ? 'No subscriptions match your filters.'\n              : \"You don't have any subscriptions yet.\"}\n          </p>\n          {permissions.canCreateSubscription && filterStatus === 'all' && !debouncedSearch && (\n            <button\n              onClick={() => navigateTo('/plans')}\n              className=\"mt-4 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n            >\n              Browse Plans\n            </button>\n          )}\n        </div>\n      ) : (\n        <div className=\"space-y-4\">\n          {filteredSubscriptions.map((subscription) => (\n            <SubscriptionCard\n              key={subscription.id}\n              subscription={subscription}\n              onView={() =>\n                navigateTo(\n                  withBillingAccountId(\n                    `/subscriptions/${subscription.id}`,\n                    subscription.billingAccountId\n                  )\n                )\n              }\n              canCancel={permissions.canCancelSubscription}\n            />\n          ))}\n        </div>\n      )}\n\n      {/* Pagination */}\n      {totalPages > 1 && (\n        <div className=\"flex items-center justify-center gap-2 pt-4\">\n          <button\n            onClick={() => handlePageChange(currentPage - 1)}\n            disabled={currentPage === 1}\n            className=\"px-3 py-1.5 text-sm border border-border rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted transition-colors\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n          </button>\n\n          <div className=\"flex items-center gap-1\">\n            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => {\n              // Show first, last, current, and adjacent pages\n              const showPage =\n                page === 1 || page === totalPages || Math.abs(page - currentPage) <= 1;\n\n              // Show ellipsis\n              const showEllipsisBefore = page === currentPage - 2 && currentPage > 3;\n              const showEllipsisAfter = page === currentPage + 2 && currentPage < totalPages - 2;\n\n              if (showEllipsisBefore || showEllipsisAfter) {\n                return (\n                  <span key={page} className=\"px-2 text-muted-foreground\">\n                    ...\n                  </span>\n                );\n              }\n\n              if (!showPage) return null;\n\n              return (\n                <button\n                  key={page}\n                  onClick={() => handlePageChange(page)}\n                  className={`px-3 py-1.5 text-sm rounded-md transition-colors ${\n                    page === currentPage\n                      ? 'bg-primary text-primary-foreground'\n                      : 'border border-border hover:bg-muted'\n                  }`}\n                >\n                  {page}\n                </button>\n              );\n            })}\n          </div>\n\n          <button\n            onClick={() => handlePageChange(currentPage + 1)}\n            disabled={currentPage === totalPages}\n            className=\"px-3 py-1.5 text-sm border border-border rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted transition-colors\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// Subscription Card Component\n// ============================================================================\n\ninterface SubscriptionCardProps {\n  subscription: BillingSubscription;\n  onView: () => void;\n  canCancel: boolean;\n}\n\nconst SubscriptionCard: FC<SubscriptionCardProps> = ({\n  subscription,\n  onView,\n  canCancel: _canCancel,\n}) => {\n  const plan = subscription.plan;\n  const statusColor = getSubscriptionStatusColor(subscription.status);\n  const isActive = subscription.status === ('active' as SubscriptionStatus);\n\n  // Calculate days remaining\n  const endDate = new Date(subscription.endDate);\n  const now = new Date();\n  const daysRemaining = Math.max(\n    0,\n    Math.ceil((endDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))\n  );\n\n  return (\n    <div\n      className=\"border border-border rounded-lg bg-card hover:shadow-md transition-shadow cursor-pointer\"\n      onClick={onView}\n    >\n      <div className=\"p-6\">\n        <div className=\"flex flex-col sm:flex-row sm:items-center gap-4\">\n          {/* Plan Icon */}\n          <div className=\"w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center shrink-0\">\n            <svg\n              className=\"w-6 h-6 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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"\n              />\n            </svg>\n          </div>\n\n          {/* Subscription Info */}\n          <div className=\"flex-1 min-w-0\">\n            <div className=\"flex items-center gap-2 flex-wrap\">\n              <h3 className=\"font-semibold text-foreground\">{plan?.name || 'Unknown Plan'}</h3>\n              <span\n                className={`px-2 py-0.5 text-xs font-medium rounded ${getStatusBadgeClasses(statusColor)}`}\n              >\n                {formatSubscriptionStatus(subscription.status)}\n              </span>\n            </div>\n            <div className=\"flex items-center gap-4 mt-1 text-sm text-muted-foreground\">\n              <span>\n                {plan ? formatCurrency(plan.price, plan.currency) : '—'} /{' '}\n                {plan ? formatPlanDuration(plan.duration) : '—'}\n              </span>\n              <span className=\"hidden sm:inline\">•</span>\n              <span className=\"hidden sm:inline\">\n                Started {formatDate(subscription.startDate, 'short')}\n              </span>\n            </div>\n          </div>\n\n          {/* Right Side Info */}\n          <div className=\"flex items-center gap-4\">\n            {isActive && (\n              <div className=\"text-right\">\n                <p className=\"text-sm font-medium text-foreground\">{daysRemaining} days</p>\n                <p className=\"text-xs text-muted-foreground\">remaining</p>\n              </div>\n            )}\n            <button\n              onClick={(e) => {\n                e.stopPropagation();\n                onView();\n              }}\n              className=\"px-3 py-1.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n            >\n              View\n            </button>\n          </div>\n        </div>\n\n        {/* Additional Info */}\n        {subscription.addonSubscriptions && subscription.addonSubscriptions.length > 0 && (\n          <div className=\"mt-4 pt-4 border-t border-border\">\n            <p className=\"text-sm text-muted-foreground\">\n              {subscription.addonSubscriptions.length} addon\n              {subscription.addonSubscriptions.length !== 1 ? 's' : ''} attached\n            </p>\n          </div>\n        )}\n\n        {/* Cancellation Info */}\n        {subscription.canceledAt && (\n          <div className=\"mt-4 pt-4 border-t border-border\">\n            <p className=\"text-sm text-muted-foreground\">\n              Canceled on {formatDate(subscription.canceledAt)}\n              {subscription.cancellationReason && <span> — {subscription.cancellationReason}</span>}\n            </p>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/usage/pages/UsagePage.js

@@ -90,7 +90,7 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 		className: "cursor-pointer hover:bg-muted/40 transition-colors border-b border-border last:border-b-0",
 		children: [
 			/* @__PURE__ */ k("td", {
-				className: "px-4 py-3 min-w-[180px]",
+				className: "px-4 py-3",
 				children: [/* @__PURE__ */ O("span", {
 					className: "text-sm font-medium text-primary hover:underline capitalize",
 					children: e.name.replace(/_/g, " ")
@@ -104,7 +104,7 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 				children: t
 			}),
 			/* @__PURE__ */ O("td", {
-				className: "px-4 py-3 min-w-[180px]",
+				className: "px-4 py-3",
 				children: /* @__PURE__ */ k("div", {
 					className: "space-y-1.5",
 					children: [/* @__PURE__ */ k("span", {
@@ -540,7 +540,7 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 					children: [I.length > 1 && /* @__PURE__ */ O("select", {
 						value: L || "",
 						onChange: (e) => c(e.target.value),
-						className: "px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary min-w-[200px]",
+						className: "px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary w-full sm:min-w-[200px]",
 						children: I.map((e) => /* @__PURE__ */ O("option", {
 							value: e.id,
 							children: e.name