npm - @burdenoff/microfe-billing - Versions diffs - 2026.625.4 → 2026.626.1 - Mend

@burdenoff/microfe-billing 2026.625.4 → 2026.626.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (96) hide show

package/dist/billing/modules/coupons/pages/CouponDetailPage.js CHANGED Viewed

@@ -9,9 +9,9 @@ import { useEffect as s, useState as c } from "react";
 import { ArrowLeft as l, BarChart2 as u, Calendar as d, ChevronLeft as f, ChevronRight as p, Edit as m, History as h, Package as g, Tag as _, Users as v } from "lucide-react";
 import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 import { useI18n as S } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { CTAOverflowMenu as C, ResponsiveTable as w } from "@burdenoff/fe-libs/ui";
+import { CTAOverflowMenu as C, NextSteps as w, PagePurpose as T, ResponsiveTable as E } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/coupons/pages/CouponDetailPage.tsx
-var T = [
+var D = [
 	{
 		key: "userId",
 		header: "User ID",
@@ -82,7 +82,7 @@ var T = [
 		cell: (e) => new Date(e.usedAt).toLocaleString()
 	}
 ];
-function E({ status: e }) {
+function O({ status: e }) {
 	let { label: t, className: n } = {
 		[o.Active]: {
 			label: "Active",
@@ -109,7 +109,7 @@ function E({ status: e }) {
 		children: t
 	});
 }
-function D({ label: e, value: t }) {
+function k({ label: e, value: t }) {
 	return /* @__PURE__ */ x("div", {
 		className: "flex items-start gap-2 py-3 border-b border-border-subtle last:border-0",
 		children: [/* @__PURE__ */ b("span", {
@@ -121,29 +121,29 @@ function D({ label: e, value: t }) {
 		})]
 	});
 }
-var O = () => {
-	let { t: o } = S(), O = (e, t) => {
+var A = () => {
+	let { t: o } = S(), A = (e, t) => {
 		let n = o(e);
 		return n === e ? t : n;
-	}, k = a(), A = n(), j = window.location.pathname.split("/").filter(Boolean).slice(-1)[0], [M, N] = c("details"), [P, F] = c(0), [I, { data: L, loading: R, error: z }] = r(), { data: B, loading: V } = i({
+	}, j = a(), M = n(), N = window.location.pathname.split("/").filter(Boolean).slice(-1)[0], [P, F] = c("details"), [I, L] = c(0), [R, { data: z, loading: B, error: V }] = r(), { data: H, loading: U } = i({
 		variables: {
-			couponId: j,
+			couponId: N,
 			limit: 20,
-			offset: P * 20
+			offset: I * 20
 		},
-		skip: !j || M !== "usage"
+		skip: !N || P !== "usage"
 	});
 	if (s(() => {
-		j && I({ variables: { id: j } });
-	}, [j, I]), !A.canManageDiscounts) return /* @__PURE__ */ b(e, { message: "You don't have permission to view coupon details." });
-	if (R) return /* @__PURE__ */ x("div", {
+		N && R({ variables: { id: N } });
+	}, [N, R]), !M.canManageDiscounts) return /* @__PURE__ */ b(e, { message: "You don't have permission to view coupon details." });
+	if (B) return /* @__PURE__ */ x("div", {
 		className: "p-8",
 		children: [/* @__PURE__ */ b(t, {
-			title: O("billing.coupons.detailTitle", "Coupon Details"),
+			title: A("billing.coupons.detailTitle", "Coupon Details"),
 			description: "Loading...",
 			actions: /* @__PURE__ */ x("button", {
 				type: "button",
-				onClick: () => k("/coupons"),
+				onClick: () => j("/coupons"),
 				className: "px-4 py-2 rounded-lg border border-border-subtle text-text-primary hover:bg-bg-sunken flex items-center gap-2",
 				children: [/* @__PURE__ */ b(l, { className: "size-4" }), "Back"]
 			})
@@ -152,88 +152,116 @@ var O = () => {
 			children: /* @__PURE__ */ b("div", { className: "size-8 animate-spin rounded-full border-4 border-action-primary-bg border-t-transparent" })
 		})]
 	});
-	if (z || !L?.getCoupon) return /* @__PURE__ */ x("div", {
+	if (V || !z?.getCoupon) return /* @__PURE__ */ x("div", {
 		className: "p-8",
 		children: [/* @__PURE__ */ b(t, {
 			title: "Coupon Details",
 			description: "Coupon not found",
 			actions: /* @__PURE__ */ x("button", {
 				type: "button",
-				onClick: () => k("/coupons"),
+				onClick: () => j("/coupons"),
 				className: "px-4 py-2 rounded-lg border border-border-subtle text-text-primary hover:bg-bg-sunken flex items-center gap-2",
 				children: [/* @__PURE__ */ b(l, { className: "size-4" }), "Back"]
 			})
 		}), /* @__PURE__ */ b("div", {
 			className: "flex items-center justify-center h-64 text-status-error-text text-sm",
-			children: z ? `Error: ${z.message}` : "Coupon not found"
+			children: V ? `Error: ${V.message}` : "Coupon not found"
 		})]
 	});
-	let H = L.getCoupon, U = H.maxTotalUses && H.maxTotalUses > 0 ? Math.round(H.currentUses / H.maxTotalUses * 100) : null, W = (e) => e ? new Date(e).toLocaleDateString(void 0, {
+	let W = z.getCoupon, G = W.maxTotalUses && W.maxTotalUses > 0 ? Math.round(W.currentUses / W.maxTotalUses * 100) : null, K = [
+		{
+			id: "edit",
+			label: "Edit this coupon",
+			description: "Adjust the discount, limits, expiry or applicable products.",
+			onClick: () => j(`/coupons/${W.id}/edit`)
+		},
+		{
+			id: "usage",
+			label: "Review who has redeemed it",
+			description: "Open the Usage History tab to see every redemption.",
+			onClick: () => F("usage")
+		},
+		{
+			id: "back",
+			label: "Manage all coupons",
+			description: "Return to the full list of discount codes.",
+			onClick: () => j("/coupons")
+		}
+	], q = (e) => e ? new Date(e).toLocaleDateString(void 0, {
 		year: "numeric",
 		month: "short",
 		day: "numeric"
-	}) : null, G = () => H.type === "PERCENTAGE" ? `${H.value}%` : `${H.value}${H.currency ? ` ${H.currency}` : ""}`;
+	}) : null, J = () => W.type === "PERCENTAGE" ? `${W.value}%` : `${W.value}${W.currency ? ` ${W.currency}` : ""}`;
 	return /* @__PURE__ */ x("div", {
 		className: "p-8",
 		children: [
 			/* @__PURE__ */ b(t, {
-				title: H.name || H.code,
-				description: H.description || `Coupon code: ${H.code}`,
+				title: W.name || W.code,
+				description: W.description || `Coupon code: ${W.code}`,
 				actions: /* @__PURE__ */ b(C, {
 					primary: {
 						label: "Edit",
-						onSelect: () => k(`/coupons/${H.id}/edit`),
+						onSelect: () => j(`/coupons/${W.id}/edit`),
 						icon: /* @__PURE__ */ b(m, { className: "size-4" })
 					},
 					actions: [{
 						label: "Back to coupons",
-						onSelect: () => k("/coupons"),
+						onSelect: () => j("/coupons"),
 						icon: /* @__PURE__ */ b(l, { className: "size-4" })
 					}]
 				})
 			}),
+			/* @__PURE__ */ b(T, {
+				className: "mt-2",
+				children: "Everything about this coupon — its discount, validity window, usage limits and the full redemption history. Use it to check how it is performing, edit its terms, or stop it being redeemed."
+			}),
+			/* @__PURE__ */ b(w, {
+				storageKey: "billing-coupon-detail",
+				steps: K,
+				className: "mt-4"
+			}),
 			/* @__PURE__ */ b("div", {
 				className: "mt-6 border-b border-border-subtle flex gap-1",
 				children: ["details", "usage"].map((e) => /* @__PURE__ */ x("button", {
 					type: "button",
-					onClick: () => N(e),
-					className: `flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors ${M === e ? "border-action-primary-bg text-text-primary" : "border-transparent text-text-muted hover:text-text-primary"}`,
-					children: [b(e === "details" ? _ : h, { className: "size-4" }), e === "details" ? "Details" : `Usage History${B ? ` (${B.getCouponUsageHistory.total})` : ""}`]
+					onClick: () => F(e),
+					className: `flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors ${P === e ? "border-action-primary-bg text-text-primary" : "border-transparent text-text-muted hover:text-text-primary"}`,
+					children: [b(e === "details" ? _ : h, { className: "size-4" }), e === "details" ? "Details" : `Usage History${H ? ` (${H.getCouponUsageHistory.total})` : ""}`]
 				}, e))
 			}),
-			M === "usage" && /* @__PURE__ */ b("div", {
+			P === "usage" && /* @__PURE__ */ b("div", {
 				className: "mt-6 bg-bg-surface border border-border-subtle rounded-lg overflow-hidden",
-				children: V ? /* @__PURE__ */ b("div", {
+				children: U ? /* @__PURE__ */ b("div", {
 					className: "flex items-center justify-center h-40",
 					children: /* @__PURE__ */ b("div", { className: "size-6 animate-spin rounded-full border-4 border-action-primary-bg border-t-transparent" })
-				}) : B?.getCouponUsageHistory.usages.length ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(w, {
-					data: B.getCouponUsageHistory.usages,
+				}) : H?.getCouponUsageHistory.usages.length ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(E, {
+					data: H.getCouponUsageHistory.usages,
 					rowKey: (e) => e.id,
-					columns: T
-				}), (B.getCouponUsageHistory.total ?? 0) > 20 && /* @__PURE__ */ x("div", {
+					columns: D
+				}), (H.getCouponUsageHistory.total ?? 0) > 20 && /* @__PURE__ */ x("div", {
 					className: "flex items-center justify-between p-4 border-t border-border-subtle",
 					children: [/* @__PURE__ */ x("p", {
 						className: "text-sm text-text-muted",
 						children: [
-							P * 20 + 1,
+							I * 20 + 1,
 							"–",
-							Math.min((P + 1) * 20, B.getCouponUsageHistory.total),
+							Math.min((I + 1) * 20, H.getCouponUsageHistory.total),
 							" ",
 							"of ",
-							B.getCouponUsageHistory.total
+							H.getCouponUsageHistory.total
 						]
 					}), /* @__PURE__ */ x("div", {
 						className: "flex items-center gap-2",
 						children: [/* @__PURE__ */ b("button", {
 							type: "button",
-							onClick: () => F((e) => Math.max(0, e - 1)),
-							disabled: P === 0,
+							onClick: () => L((e) => Math.max(0, e - 1)),
+							disabled: I === 0,
 							className: "p-1.5 rounded border border-border-subtle hover:bg-bg-sunken disabled:opacity-40",
 							children: /* @__PURE__ */ b(f, { className: "size-4" })
 						}), /* @__PURE__ */ b("button", {
 							type: "button",
-							onClick: () => F((e) => e + 1),
-							disabled: !B.getCouponUsageHistory.hasMore,
+							onClick: () => L((e) => e + 1),
+							disabled: !H.getCouponUsageHistory.hasMore,
 							className: "p-1.5 rounded border border-border-subtle hover:bg-bg-sunken disabled:opacity-40",
 							children: /* @__PURE__ */ b(p, { className: "size-4" })
 						})]
@@ -243,7 +271,7 @@ var O = () => {
 					children: "No usage recorded for this coupon yet."
 				})
 			}),
-			M === "details" && /* @__PURE__ */ x("div", {
+			P === "details" && /* @__PURE__ */ x("div", {
 				className: "mt-8 grid grid-cols-1 lg:grid-cols-3 gap-6",
 				children: [
 					/* @__PURE__ */ x("div", {
@@ -259,7 +287,7 @@ var O = () => {
 									})]
 								}), /* @__PURE__ */ b("p", {
 									className: "text-lg font-mono font-bold text-text-primary",
-									children: H.code
+									children: W.code
 								})]
 							}),
 							/* @__PURE__ */ x("div", {
@@ -274,11 +302,11 @@ var O = () => {
 									}),
 									/* @__PURE__ */ b("p", {
 										className: "text-lg font-bold text-text-primary",
-										children: G()
+										children: J()
 									}),
 									/* @__PURE__ */ b("p", {
 										className: "text-xs text-text-muted capitalize",
-										children: H.type.replace("_", " ").toLowerCase()
+										children: W.type.replace("_", " ").toLowerCase()
 									})
 								]
 							}),
@@ -294,13 +322,13 @@ var O = () => {
 									}),
 									/* @__PURE__ */ x("p", {
 										className: "text-lg font-bold text-text-primary",
-										children: [H.currentUses, H.maxTotalUses ? ` / ${H.maxTotalUses}` : ""]
+										children: [W.currentUses, W.maxTotalUses ? ` / ${W.maxTotalUses}` : ""]
 									}),
-									U !== null && /* @__PURE__ */ b("div", {
+									G !== null && /* @__PURE__ */ b("div", {
 										className: "mt-1.5 h-1.5 w-full bg-bg-sunken rounded-full overflow-hidden",
 										children: /* @__PURE__ */ b("div", {
 											className: "h-full bg-action-primary-bg rounded-full",
-											style: { width: `${Math.min(U, 100)}%` }
+											style: { width: `${Math.min(G, 100)}%` }
 										})
 									})
 								]
@@ -317,11 +345,11 @@ var O = () => {
 									}),
 									/* @__PURE__ */ b("div", {
 										className: "mt-1",
-										children: /* @__PURE__ */ b(E, { status: H.status })
+										children: /* @__PURE__ */ b(O, { status: W.status })
 									}),
-									H.validUntil && /* @__PURE__ */ x("p", {
+									W.validUntil && /* @__PURE__ */ x("p", {
 										className: "text-xs text-text-muted mt-1",
-										children: ["Expires ", W(H.validUntil)]
+										children: ["Expires ", q(W.validUntil)]
 									})
 								]
 							})
@@ -336,36 +364,36 @@ var O = () => {
 									className: "text-sm font-semibold text-text-primary uppercase tracking-wide mb-2",
 									children: "Coupon Details"
 								}),
-								/* @__PURE__ */ b(D, {
+								/* @__PURE__ */ b(k, {
 									label: "Code",
 									value: /* @__PURE__ */ b("span", {
 										className: "font-mono",
-										children: H.code
+										children: W.code
 									})
 								}),
-								/* @__PURE__ */ b(D, {
+								/* @__PURE__ */ b(k, {
 									label: "Name",
-									value: H.name
+									value: W.name
 								}),
-								/* @__PURE__ */ b(D, {
+								/* @__PURE__ */ b(k, {
 									label: "Description",
-									value: H.description
+									value: W.description
 								}),
-								/* @__PURE__ */ b(D, {
+								/* @__PURE__ */ b(k, {
 									label: "Type",
-									value: H.type.replace("_", " ").toLowerCase()
+									value: W.type.replace("_", " ").toLowerCase()
 								}),
-								/* @__PURE__ */ b(D, {
+								/* @__PURE__ */ b(k, {
 									label: "Value",
-									value: G()
+									value: J()
 								}),
-								/* @__PURE__ */ b(D, {
+								/* @__PURE__ */ b(k, {
 									label: "Scope",
-									value: H.scope
+									value: W.scope
 								}),
-								/* @__PURE__ */ b(D, {
+								/* @__PURE__ */ b(k, {
 									label: "Status",
-									value: /* @__PURE__ */ b(E, { status: H.status })
+									value: /* @__PURE__ */ b(O, { status: W.status })
 								})
 							]
 						}), /* @__PURE__ */ x("div", {
@@ -375,32 +403,32 @@ var O = () => {
 									className: "text-sm font-semibold text-text-primary uppercase tracking-wide mb-2",
 									children: "Restrictions"
 								}),
-								/* @__PURE__ */ b(D, {
+								/* @__PURE__ */ b(k, {
 									label: "Min Purchase Amount",
-									value: H.minPurchaseAmount == null ? null : `${H.minPurchaseAmount}${H.currency ? ` ${H.currency}` : ""}`
+									value: W.minPurchaseAmount == null ? null : `${W.minPurchaseAmount}${W.currency ? ` ${W.currency}` : ""}`
 								}),
-								/* @__PURE__ */ b(D, {
+								/* @__PURE__ */ b(k, {
 									label: "Max Discount Amount",
-									value: H.maxDiscountAmount == null ? null : `${H.maxDiscountAmount}${H.currency ? ` ${H.currency}` : ""}`
+									value: W.maxDiscountAmount == null ? null : `${W.maxDiscountAmount}${W.currency ? ` ${W.currency}` : ""}`
 								}),
-								/* @__PURE__ */ b(D, {
+								/* @__PURE__ */ b(k, {
 									label: "Max Uses Per User",
-									value: H.maxUsesPerUser
+									value: W.maxUsesPerUser
 								}),
-								/* @__PURE__ */ b(D, {
+								/* @__PURE__ */ b(k, {
 									label: "Restricted Users",
-									value: H.restrictedToUserIds?.length ? /* @__PURE__ */ b("span", {
+									value: W.restrictedToUserIds?.length ? /* @__PURE__ */ b("span", {
 										className: "font-mono text-xs break-all",
-										children: H.restrictedToUserIds.join(", ")
+										children: W.restrictedToUserIds.join(", ")
 									}) : "No restrictions"
 								}),
-								/* @__PURE__ */ b(D, {
+								/* @__PURE__ */ b(k, {
 									label: "Applicable Products",
-									value: H.applicableProducts?.length ? H.applicableProducts.join(", ") : "All products"
+									value: W.applicableProducts?.length ? W.applicableProducts.join(", ") : "All products"
 								}),
-								/* @__PURE__ */ b(D, {
+								/* @__PURE__ */ b(k, {
 									label: "Excluded Products",
-									value: H.excludedProducts?.length ? H.excludedProducts.join(", ") : "None"
+									value: W.excludedProducts?.length ? W.excludedProducts.join(", ") : "None"
 								})
 							]
 						})]
@@ -415,33 +443,33 @@ var O = () => {
 										className: "text-sm font-semibold text-text-primary uppercase tracking-wide mb-2",
 										children: "Validity"
 									}),
-									/* @__PURE__ */ b(D, {
+									/* @__PURE__ */ b(k, {
 										label: "Valid From",
-										value: W(H.validFrom)
+										value: q(W.validFrom)
 									}),
-									/* @__PURE__ */ b(D, {
+									/* @__PURE__ */ b(k, {
 										label: "Valid Until",
-										value: W(H.validUntil) ?? "No expiry"
+										value: q(W.validUntil) ?? "No expiry"
 									})
 								]
 							}),
-							H.campaignId && /* @__PURE__ */ x("div", {
+							W.campaignId && /* @__PURE__ */ x("div", {
 								className: "bg-bg-surface border border-border-subtle rounded-lg p-6",
 								children: [
 									/* @__PURE__ */ b("h3", {
 										className: "text-sm font-semibold text-text-primary uppercase tracking-wide mb-2",
 										children: "Campaign"
 									}),
-									/* @__PURE__ */ b(D, {
+									/* @__PURE__ */ b(k, {
 										label: "Campaign ID",
 										value: /* @__PURE__ */ b("span", {
 											className: "font-mono text-xs",
-											children: H.campaignId
+											children: W.campaignId
 										})
 									}),
-									/* @__PURE__ */ b(D, {
+									/* @__PURE__ */ b(k, {
 										label: "Campaign Name",
-										value: H.campaignName
+										value: W.campaignName
 									})
 								]
 							}),
@@ -452,17 +480,17 @@ var O = () => {
 										className: "text-sm font-semibold text-text-primary uppercase tracking-wide mb-2",
 										children: [/* @__PURE__ */ b(g, { className: "size-4 inline mr-1" }), "Audit"]
 									}),
-									/* @__PURE__ */ b(D, {
+									/* @__PURE__ */ b(k, {
 										label: "Created",
-										value: W(H.createdAt)
+										value: q(W.createdAt)
 									}),
-									/* @__PURE__ */ b(D, {
+									/* @__PURE__ */ b(k, {
 										label: "Last Updated",
-										value: W(H.updatedAt)
+										value: q(W.updatedAt)
 									}),
-									/* @__PURE__ */ b(D, {
+									/* @__PURE__ */ b(k, {
 										label: "Created By",
-										value: H.createdBy ?? null
+										value: W.createdBy ?? null
 									})
 								]
 							})
@@ -474,6 +502,6 @@ var O = () => {
 	});
 };
 //#endregion
-export { O as CouponDetailPage };
+export { A as CouponDetailPage };
 //# sourceMappingURL=CouponDetailPage.js.map

package/dist/billing/modules/coupons/pages/CouponDetailPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CouponDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/coupons/pages/CouponDetailPage.tsx"],"sourcesContent":["import { type FC, useEffect, useState } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport {\n ArrowLeft,\n Edit,\n Tag,\n Calendar,\n Users,\n Package,\n BarChart2,\n History,\n ChevronLeft,\n ChevronRight,\n} from 'lucide-react';\nimport { CTAOverflowMenu } from '@burdenoff/fe-libs/ui';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader } from '../../../shared/components';\nimport {\n useGetCouponLazyQuery,\n useGetCouponUsageHistoryQuery,\n} from '../../../../generated/global-operations';\nimport { Coupon, CouponStatus, CouponUsage } from '../../../../generated/global-types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { ResponsiveTable, type ResponsiveTableColumn } from '@burdenoff/fe-libs/ui';\n\nconst couponUsageColumns: ResponsiveTableColumn<CouponUsage>[] = [\n {\n key: 'userId',\n header: 'User ID',\n priority: 'primary',\n cell: (u) => <span className=\"font-mono\">{u.userId.slice(0, 12)}…</span>,\n },\n {\n key: 'transaction',\n header: 'Transaction',\n cell: (u) =>\n u.transactionId ? (\n <span className=\"font-mono text-xs text-text-link\">{u.transactionId.slice(0, 12)}…</span>\n ) : u.orderId ? (\n <span className=\"text-xs text-text-muted\">Order: {u.orderId.slice(0, 12)}…</span>\n ) : (\n <span className=\"text-text-muted\">, </span>\n ),\n },\n {\n key: 'original',\n header: 'Original',\n cell: (u) => (\n <span className=\"tabular-nums\">\n {u.originalAmount.toFixed(2)} {u.currency}\n </span>\n ),\n },\n {\n key: 'discount',\n header: 'Discount',\n cell: (u) => (\n <span className=\"tabular-nums text-status-success-text font-medium\">\n -{u.discountValue.toFixed(2)} {u.currency}\n </span>\n ),\n },\n {\n key: 'final',\n header: 'Final',\n cell: (u) => (\n <span className=\"tabular-nums font-medium\">\n {u.finalAmount.toFixed(2)} {u.currency}\n </span>\n ),\n },\n {\n key: 'usedAt',\n header: 'Used At',\n cell: (u) => new Date(u.usedAt).toLocaleString(),\n },\n];\n\nfunction StatusBadge({ status }: { status: CouponStatus }) {\n const map: Record<CouponStatus, { label: string; className: string }> = {\n [CouponStatus.Active]: {\n label: 'Active',\n className:\n 'bg-status-success-bg-subtle text-status-success-text border-status-success-bg-subtle',\n },\n [CouponStatus.Inactive]: {\n label: 'Inactive',\n className: 'bg-bg-sunken text-text-muted border-border-subtle',\n },\n [CouponStatus.Expired]: {\n label: 'Expired',\n className:\n 'bg-status-warning-bg-subtle text-status-warning-text border-status-warning-bg-subtle',\n },\n [CouponStatus.Depleted]: {\n label: 'Depleted',\n className: 'bg-status-error-bg-subtle text-status-error-text border-status-error-border',\n },\n };\n const { label, className } = map[status] ?? {\n label: status,\n className: 'bg-bg-sunken text-text-muted',\n };\n return (\n <span\n className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${className}`}\n >\n {label}\n </span>\n );\n}\n\nfunction DetailRow({ label, value }: { label: string; value: React.ReactNode }) {\n return (\n <div className=\"flex items-start gap-2 py-3 border-b border-border-subtle last:border-0\">\n <span className=\"text-sm text-text-muted w-44 shrink-0\">{label}</span>\n <span className=\"text-sm text-text-primary font-medium flex-1\">{value ?? '—'}</span>\n </div>\n );\n}\n\nexport const CouponDetailPage: 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\n const couponId = window.location.pathname.split('/').filter(Boolean).slice(-1)[0];\n const [activeTab, setActiveTab] = useState<'details' \| 'usage'>('details');\n const [usagePage, setUsagePage] = useState(0);\n const USAGE_PAGE_SIZE = 20;\n\n const [getCoupon, { data, loading, error }] = useGetCouponLazyQuery();\n\n const { data: usageData, loading: usageLoading } = useGetCouponUsageHistoryQuery({\n variables: { couponId, limit: USAGE_PAGE_SIZE, offset: usagePage * USAGE_PAGE_SIZE },\n skip: !couponId \|\| activeTab !== 'usage',\n });\n\n useEffect(() => {\n if (couponId) {\n getCoupon({ variables: { id: couponId } });\n }\n }, [couponId, getCoupon]);\n\n if (!permissions.canManageDiscounts) {\n return <AccessDenied message=\"You don't have permission to view coupon details.\" />;\n }\n\n if (loading) {\n return (\n <div className=\"p-8\">\n <PageHeader\n title={tr('billing.coupons.detailTitle', 'Coupon Details')}\n description=\"Loading...\"\n actions={\n <button\n type=\"button\"\n onClick={() => navigateTo('/coupons')}\n className=\"px-4 py-2 rounded-lg border border-border-subtle text-text-primary hover:bg-bg-sunken flex items-center gap-2\"\n >\n <ArrowLeft className=\"size-4\" />\n Back\n </button>\n }\n />\n <div className=\"flex items-center justify-center h-64\">\n <div className=\"size-8 animate-spin rounded-full border-4 border-action-primary-bg border-t-transparent\" />\n </div>\n </div>\n );\n }\n\n if (error \|\| !data?.getCoupon) {\n return (\n <div className=\"p-8\">\n <PageHeader\n title=\"Coupon Details\"\n description=\"Coupon not found\"\n actions={\n <button\n type=\"button\"\n onClick={() => navigateTo('/coupons')}\n className=\"px-4 py-2 rounded-lg border border-border-subtle text-text-primary hover:bg-bg-sunken flex items-center gap-2\"\n >\n <ArrowLeft className=\"size-4\" />\n Back\n </button>\n }\n />\n <div className=\"flex items-center justify-center h-64 text-status-error-text text-sm\">\n {error ? `Error: ${error.message}` : 'Coupon not found'}\n </div>\n </div>\n );\n }\n\n const coupon = data.getCoupon as Coupon;\n const usagePercent =\n coupon.maxTotalUses && coupon.maxTotalUses > 0\n ? Math.round((coupon.currentUses / coupon.maxTotalUses) * 100)\n : null;\n\n const formatDate = (d: string \| null \| undefined) =>\n d\n ? new Date(d).toLocaleDateString(undefined, {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n })\n : null;\n\n const formatValue = () =>\n coupon.type === 'PERCENTAGE'\n ? `${coupon.value}%`\n : `${coupon.value}${coupon.currency ? ` ${coupon.currency}` : ''}`;\n\n return (\n <div className=\"p-8\">\n <PageHeader\n title={coupon.name \|\| coupon.code}\n description={coupon.description \|\| `Coupon code: ${coupon.code}`}\n actions={\n <CTAOverflowMenu\n primary={{\n label: 'Edit',\n onSelect: () => navigateTo(`/coupons/${coupon.id}/edit`),\n icon: <Edit className=\"size-4\" />,\n }}\n actions={[\n {\n label: 'Back to coupons',\n onSelect: () => navigateTo('/coupons'),\n icon: <ArrowLeft className=\"size-4\" />,\n },\n ]}\n />\n }\n />\n\n {/* Tabs /}\n <div className=\"mt-6 border-b border-border-subtle flex gap-1\">\n {(['details', 'usage'] as const).map((tab) => (\n <button\n type=\"button\"\n key={tab}\n onClick={() => setActiveTab(tab)}\n className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors ${\n activeTab === tab\n ? 'border-action-primary-bg text-text-primary'\n : 'border-transparent text-text-muted hover:text-text-primary'\n }`}\n >\n {tab === 'details' ? <Tag className=\"size-4\" /> : <History className=\"size-4\" />}\n {tab === 'details'\n ? 'Details'\n : `Usage History${usageData ? ` (${usageData.getCouponUsageHistory.total})` : ''}`}\n </button>\n ))}\n </div>\n\n {activeTab === 'usage' && (\n <div className=\"mt-6 bg-bg-surface border border-border-subtle rounded-lg overflow-hidden\">\n {usageLoading ? (\n <div className=\"flex items-center justify-center h-40\">\n <div className=\"size-6 animate-spin rounded-full border-4 border-action-primary-bg border-t-transparent\" />\n </div>\n ) : !usageData?.getCouponUsageHistory.usages.length ? (\n <div className=\"p-8 text-center text-sm text-text-muted\">\n No usage recorded for this coupon yet.\n </div>\n ) : (\n <>\n <ResponsiveTable\n data={usageData.getCouponUsageHistory.usages}\n rowKey={(u) => u.id}\n columns={couponUsageColumns}\n />\n {(usageData.getCouponUsageHistory.total ?? 0) > USAGE_PAGE_SIZE && (\n <div className=\"flex items-center justify-between p-4 border-t border-border-subtle\">\n <p className=\"text-sm text-text-muted\">\n {usagePage USAGE_PAGE_SIZE + 1}–\n {Math.min(\n (usagePage + 1) * USAGE_PAGE_SIZE,\n usageData.getCouponUsageHistory.total\n )}{' '}\n of {usageData.getCouponUsageHistory.total}\n </p>\n <div className=\"flex items-center gap-2\">\n <button\n type=\"button\"\n onClick={() => setUsagePage((p) => Math.max(0, p - 1))}\n disabled={usagePage === 0}\n className=\"p-1.5 rounded border border-border-subtle hover:bg-bg-sunken disabled:opacity-40\"\n >\n <ChevronLeft className=\"size-4\" />\n </button>\n <button\n type=\"button\"\n onClick={() => setUsagePage((p) => p + 1)}\n disabled={!usageData.getCouponUsageHistory.hasMore}\n className=\"p-1.5 rounded border border-border-subtle hover:bg-bg-sunken disabled:opacity-40\"\n >\n <ChevronRight className=\"size-4\" />\n </button>\n </div>\n </div>\n )}\n </>\n )}\n </div>\n )}\n\n {activeTab === 'details' && (\n <div className=\"mt-8 grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/* Summary cards /}\n <div className=\"lg:col-span-3 grid grid-cols-2 sm:grid-cols-4 gap-4\">\n <div className=\"bg-bg-surface border border-border-subtle rounded-lg p-4\">\n <div className=\"flex items-center gap-2 text-text-muted mb-1\">\n <Tag className=\"size-4\" />\n <span className=\"text-xs font-medium uppercase tracking-wide\">Code</span>\n </div>\n <p className=\"text-lg font-mono font-bold text-text-primary\">{coupon.code}</p>\n </div>\n\n <div className=\"bg-bg-surface border border-border-subtle rounded-lg p-4\">\n <div className=\"flex items-center gap-2 text-text-muted mb-1\">\n <BarChart2 className=\"size-4\" />\n <span className=\"text-xs font-medium uppercase tracking-wide\">Discount</span>\n </div>\n <p className=\"text-lg font-bold text-text-primary\">{formatValue()}</p>\n <p className=\"text-xs text-text-muted capitalize\">\n {coupon.type.replace('_', ' ').toLowerCase()}\n </p>\n </div>\n\n <div className=\"bg-bg-surface border border-border-subtle rounded-lg p-4\">\n <div className=\"flex items-center gap-2 text-text-muted mb-1\">\n <Users className=\"size-4\" />\n <span className=\"text-xs font-medium uppercase tracking-wide\">Usage</span>\n </div>\n <p className=\"text-lg font-bold text-text-primary\">\n {coupon.currentUses}\n {coupon.maxTotalUses ? ` / ${coupon.maxTotalUses}` : ''}\n </p>\n {usagePercent !== null && (\n <div className=\"mt-1.5 h-1.5 w-full bg-bg-sunken rounded-full overflow-hidden\">\n <div\n className=\"h-full bg-action-primary-bg rounded-full\"\n style={{ width: `${Math.min(usagePercent, 100)}%` }}\n />\n </div>\n )}\n </div>\n\n <div className=\"bg-bg-surface border border-border-subtle rounded-lg p-4\">\n <div className=\"flex items-center gap-2 text-text-muted mb-1\">\n <Calendar className=\"size-4\" />\n <span className=\"text-xs font-medium uppercase tracking-wide\">Status</span>\n </div>\n <div className=\"mt-1\">\n <StatusBadge status={coupon.status} />\n </div>\n {coupon.validUntil && (\n <p className=\"text-xs text-text-muted mt-1\">\n Expires {formatDate(coupon.validUntil)}\n </p>\n )}\n </div>\n </div>\n\n {/ Main details /}\n <div className=\"lg:col-span-2 space-y-4\">\n <div className=\"bg-bg-surface border border-border-subtle rounded-lg p-6\">\n <h3 className=\"text-sm font-semibold text-text-primary uppercase tracking-wide mb-2\">\n Coupon Details\n </h3>\n <DetailRow label=\"Code\" value={<span className=\"font-mono\">{coupon.code}</span>} />\n <DetailRow label=\"Name\" value={coupon.name} />\n <DetailRow label=\"Description\" value={coupon.description} />\n <DetailRow label=\"Type\" value={coupon.type.replace('_', ' ').toLowerCase()} />\n <DetailRow label=\"Value\" value={formatValue()} />\n <DetailRow label=\"Scope\" value={coupon.scope} />\n <DetailRow label=\"Status\" value={<StatusBadge status={coupon.status} />} />\n </div>\n\n <div className=\"bg-bg-surface border border-border-subtle rounded-lg p-6\">\n <h3 className=\"text-sm font-semibold text-text-primary uppercase tracking-wide mb-2\">\n Restrictions\n </h3>\n <DetailRow\n label=\"Min Purchase Amount\"\n value={\n coupon.minPurchaseAmount != null\n ? `${coupon.minPurchaseAmount}${coupon.currency ? ` ${coupon.currency}` : ''}`\n : null\n }\n />\n <DetailRow\n label=\"Max Discount Amount\"\n value={\n coupon.maxDiscountAmount != null\n ? `${coupon.maxDiscountAmount}${coupon.currency ? ` ${coupon.currency}` : ''}`\n : null\n }\n />\n <DetailRow label=\"Max Uses Per User\" value={coupon.maxUsesPerUser} />\n <DetailRow\n label=\"Restricted Users\"\n value={\n coupon.restrictedToUserIds?.length ? (\n <span className=\"font-mono text-xs break-all\">\n {(coupon.restrictedToUserIds as string[]).join(', ')}\n </span>\n ) : (\n 'No restrictions'\n )\n }\n />\n <DetailRow\n label=\"Applicable Products\"\n value={\n coupon.applicableProducts?.length\n ? (coupon.applicableProducts as string[]).join(', ')\n : 'All products'\n }\n />\n <DetailRow\n label=\"Excluded Products\"\n value={\n coupon.excludedProducts?.length\n ? (coupon.excludedProducts as string[]).join(', ')\n : 'None'\n }\n />\n </div>\n </div>\n\n {/ Sidebar */}\n <div className=\"space-y-4\">\n <div className=\"bg-bg-surface border border-border-subtle rounded-lg p-6\">\n <h3 className=\"text-sm font-semibold text-text-primary uppercase tracking-wide mb-2\">\n Validity\n </h3>\n <DetailRow label=\"Valid From\" value={formatDate(coupon.validFrom)} />\n <DetailRow label=\"Valid Until\" value={formatDate(coupon.validUntil) ?? 'No expiry'} />\n </div>\n\n {coupon.campaignId && (\n <div className=\"bg-bg-surface border border-border-subtle rounded-lg p-6\">\n <h3 className=\"text-sm font-semibold text-text-primary uppercase tracking-wide mb-2\">\n Campaign\n </h3>\n <DetailRow\n label=\"Campaign ID\"\n value={<span className=\"font-mono text-xs\">{coupon.campaignId}</span>}\n />\n <DetailRow label=\"Campaign Name\" value={coupon.campaignName} />\n </div>\n )}\n\n <div className=\"bg-bg-surface border border-border-subtle rounded-lg p-6\">\n <h3 className=\"text-sm font-semibold text-text-primary uppercase tracking-wide mb-2\">\n <Package className=\"size-4 inline mr-1\" />\n Audit\n </h3>\n <DetailRow label=\"Created\" value={formatDate(coupon.createdAt)} />\n <DetailRow label=\"Last Updated\" value={formatDate(coupon.updatedAt)} />\n <DetailRow label=\"Created By\" value={coupon.createdBy ?? null} />\n </div>\n </div>\n </div>\n )}\n </div>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"CouponDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/coupons/pages/CouponDetailPage.tsx"],"sourcesContent":["import { type FC, useEffect, useState } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport {\n ArrowLeft,\n Edit,\n Tag,\n Calendar,\n Users,\n Package,\n BarChart2,\n History,\n ChevronLeft,\n ChevronRight,\n} from 'lucide-react';\nimport { CTAOverflowMenu } from '@burdenoff/fe-libs/ui';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader } from '../../../shared/components';\nimport {\n useGetCouponLazyQuery,\n useGetCouponUsageHistoryQuery,\n} from '../../../../generated/global-operations';\nimport { Coupon, CouponStatus, CouponUsage } from '../../../../generated/global-types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n ResponsiveTable,\n type ResponsiveTableColumn,\n PagePurpose,\n NextSteps,\n type NextStep,\n} from '@burdenoff/fe-libs/ui';\n\nconst couponUsageColumns: ResponsiveTableColumn<CouponUsage>[] = [\n {\n key: 'userId',\n header: 'User ID',\n priority: 'primary',\n cell: (u) => <span className=\"font-mono\">{u.userId.slice(0, 12)}…</span>,\n },\n {\n key: 'transaction',\n header: 'Transaction',\n cell: (u) =>\n u.transactionId ? (\n <span className=\"font-mono text-xs text-text-link\">{u.transactionId.slice(0, 12)}…</span>\n ) : u.orderId ? (\n <span className=\"text-xs text-text-muted\">Order: {u.orderId.slice(0, 12)}…</span>\n ) : (\n <span className=\"text-text-muted\">, </span>\n ),\n },\n {\n key: 'original',\n header: 'Original',\n cell: (u) => (\n <span className=\"tabular-nums\">\n {u.originalAmount.toFixed(2)} {u.currency}\n </span>\n ),\n },\n {\n key: 'discount',\n header: 'Discount',\n cell: (u) => (\n <span className=\"tabular-nums text-status-success-text font-medium\">\n -{u.discountValue.toFixed(2)} {u.currency}\n </span>\n ),\n },\n {\n key: 'final',\n header: 'Final',\n cell: (u) => (\n <span className=\"tabular-nums font-medium\">\n {u.finalAmount.toFixed(2)} {u.currency}\n </span>\n ),\n },\n {\n key: 'usedAt',\n header: 'Used At',\n cell: (u) => new Date(u.usedAt).toLocaleString(),\n },\n];\n\nfunction StatusBadge({ status }: { status: CouponStatus }) {\n const map: Record<CouponStatus, { label: string; className: string }> = {\n [CouponStatus.Active]: {\n label: 'Active',\n className:\n 'bg-status-success-bg-subtle text-status-success-text border-status-success-bg-subtle',\n },\n [CouponStatus.Inactive]: {\n label: 'Inactive',\n className: 'bg-bg-sunken text-text-muted border-border-subtle',\n },\n [CouponStatus.Expired]: {\n label: 'Expired',\n className:\n 'bg-status-warning-bg-subtle text-status-warning-text border-status-warning-bg-subtle',\n },\n [CouponStatus.Depleted]: {\n label: 'Depleted',\n className: 'bg-status-error-bg-subtle text-status-error-text border-status-error-border',\n },\n };\n const { label, className } = map[status] ?? {\n label: status,\n className: 'bg-bg-sunken text-text-muted',\n };\n return (\n <span\n className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${className}`}\n >\n {label}\n </span>\n );\n}\n\nfunction DetailRow({ label, value }: { label: string; value: React.ReactNode }) {\n return (\n <div className=\"flex items-start gap-2 py-3 border-b border-border-subtle last:border-0\">\n <span className=\"text-sm text-text-muted w-44 shrink-0\">{label}</span>\n <span className=\"text-sm text-text-primary font-medium flex-1\">{value ?? '—'}</span>\n </div>\n );\n}\n\nexport const CouponDetailPage: 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\n const couponId = window.location.pathname.split('/').filter(Boolean).slice(-1)[0];\n const [activeTab, setActiveTab] = useState<'details' \| 'usage'>('details');\n const [usagePage, setUsagePage] = useState(0);\n const USAGE_PAGE_SIZE = 20;\n\n const [getCoupon, { data, loading, error }] = useGetCouponLazyQuery();\n\n const { data: usageData, loading: usageLoading } = useGetCouponUsageHistoryQuery({\n variables: { couponId, limit: USAGE_PAGE_SIZE, offset: usagePage * USAGE_PAGE_SIZE },\n skip: !couponId \|\| activeTab !== 'usage',\n });\n\n useEffect(() => {\n if (couponId) {\n getCoupon({ variables: { id: couponId } });\n }\n }, [couponId, getCoupon]);\n\n if (!permissions.canManageDiscounts) {\n return <AccessDenied message=\"You don't have permission to view coupon details.\" />;\n }\n\n if (loading) {\n return (\n <div className=\"p-8\">\n <PageHeader\n title={tr('billing.coupons.detailTitle', 'Coupon Details')}\n description=\"Loading...\"\n actions={\n <button\n type=\"button\"\n onClick={() => navigateTo('/coupons')}\n className=\"px-4 py-2 rounded-lg border border-border-subtle text-text-primary hover:bg-bg-sunken flex items-center gap-2\"\n >\n <ArrowLeft className=\"size-4\" />\n Back\n </button>\n }\n />\n <div className=\"flex items-center justify-center h-64\">\n <div className=\"size-8 animate-spin rounded-full border-4 border-action-primary-bg border-t-transparent\" />\n </div>\n </div>\n );\n }\n\n if (error \|\| !data?.getCoupon) {\n return (\n <div className=\"p-8\">\n <PageHeader\n title=\"Coupon Details\"\n description=\"Coupon not found\"\n actions={\n <button\n type=\"button\"\n onClick={() => navigateTo('/coupons')}\n className=\"px-4 py-2 rounded-lg border border-border-subtle text-text-primary hover:bg-bg-sunken flex items-center gap-2\"\n >\n <ArrowLeft className=\"size-4\" />\n Back\n </button>\n }\n />\n <div className=\"flex items-center justify-center h-64 text-status-error-text text-sm\">\n {error ? `Error: ${error.message}` : 'Coupon not found'}\n </div>\n </div>\n );\n }\n\n const coupon = data.getCoupon as Coupon;\n const usagePercent =\n coupon.maxTotalUses && coupon.maxTotalUses > 0\n ? Math.round((coupon.currentUses / coupon.maxTotalUses) * 100)\n : null;\n\n const nextSteps: NextStep[] = [\n {\n id: 'edit',\n label: 'Edit this coupon',\n description: 'Adjust the discount, limits, expiry or applicable products.',\n onClick: () => navigateTo(`/coupons/${coupon.id}/edit`),\n },\n {\n id: 'usage',\n label: 'Review who has redeemed it',\n description: 'Open the Usage History tab to see every redemption.',\n onClick: () => setActiveTab('usage'),\n },\n {\n id: 'back',\n label: 'Manage all coupons',\n description: 'Return to the full list of discount codes.',\n onClick: () => navigateTo('/coupons'),\n },\n ];\n\n const formatDate = (d: string \| null \| undefined) =>\n d\n ? new Date(d).toLocaleDateString(undefined, {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n })\n : null;\n\n const formatValue = () =>\n coupon.type === 'PERCENTAGE'\n ? `${coupon.value}%`\n : `${coupon.value}${coupon.currency ? ` ${coupon.currency}` : ''}`;\n\n return (\n <div className=\"p-8\">\n <PageHeader\n title={coupon.name \|\| coupon.code}\n description={coupon.description \|\| `Coupon code: ${coupon.code}`}\n actions={\n <CTAOverflowMenu\n primary={{\n label: 'Edit',\n onSelect: () => navigateTo(`/coupons/${coupon.id}/edit`),\n icon: <Edit className=\"size-4\" />,\n }}\n actions={[\n {\n label: 'Back to coupons',\n onSelect: () => navigateTo('/coupons'),\n icon: <ArrowLeft className=\"size-4\" />,\n },\n ]}\n />\n }\n />\n\n <PagePurpose className=\"mt-2\">\n Everything about this coupon — its discount, validity window, usage limits and the full\n redemption history. Use it to check how it is performing, edit its terms, or stop it being\n redeemed.\n </PagePurpose>\n\n <NextSteps storageKey=\"billing-coupon-detail\" steps={nextSteps} className=\"mt-4\" />\n\n {/* Tabs /}\n <div className=\"mt-6 border-b border-border-subtle flex gap-1\">\n {(['details', 'usage'] as const).map((tab) => (\n <button\n type=\"button\"\n key={tab}\n onClick={() => setActiveTab(tab)}\n className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors ${\n activeTab === tab\n ? 'border-action-primary-bg text-text-primary'\n : 'border-transparent text-text-muted hover:text-text-primary'\n }`}\n >\n {tab === 'details' ? <Tag className=\"size-4\" /> : <History className=\"size-4\" />}\n {tab === 'details'\n ? 'Details'\n : `Usage History${usageData ? ` (${usageData.getCouponUsageHistory.total})` : ''}`}\n </button>\n ))}\n </div>\n\n {activeTab === 'usage' && (\n <div className=\"mt-6 bg-bg-surface border border-border-subtle rounded-lg overflow-hidden\">\n {usageLoading ? (\n <div className=\"flex items-center justify-center h-40\">\n <div className=\"size-6 animate-spin rounded-full border-4 border-action-primary-bg border-t-transparent\" />\n </div>\n ) : !usageData?.getCouponUsageHistory.usages.length ? (\n <div className=\"p-8 text-center text-sm text-text-muted\">\n No usage recorded for this coupon yet.\n </div>\n ) : (\n <>\n <ResponsiveTable\n data={usageData.getCouponUsageHistory.usages}\n rowKey={(u) => u.id}\n columns={couponUsageColumns}\n />\n {(usageData.getCouponUsageHistory.total ?? 0) > USAGE_PAGE_SIZE && (\n <div className=\"flex items-center justify-between p-4 border-t border-border-subtle\">\n <p className=\"text-sm text-text-muted\">\n {usagePage USAGE_PAGE_SIZE + 1}–\n {Math.min(\n (usagePage + 1) * USAGE_PAGE_SIZE,\n usageData.getCouponUsageHistory.total\n )}{' '}\n of {usageData.getCouponUsageHistory.total}\n </p>\n <div className=\"flex items-center gap-2\">\n <button\n type=\"button\"\n onClick={() => setUsagePage((p) => Math.max(0, p - 1))}\n disabled={usagePage === 0}\n className=\"p-1.5 rounded border border-border-subtle hover:bg-bg-sunken disabled:opacity-40\"\n >\n <ChevronLeft className=\"size-4\" />\n </button>\n <button\n type=\"button\"\n onClick={() => setUsagePage((p) => p + 1)}\n disabled={!usageData.getCouponUsageHistory.hasMore}\n className=\"p-1.5 rounded border border-border-subtle hover:bg-bg-sunken disabled:opacity-40\"\n >\n <ChevronRight className=\"size-4\" />\n </button>\n </div>\n </div>\n )}\n </>\n )}\n </div>\n )}\n\n {activeTab === 'details' && (\n <div className=\"mt-8 grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/* Summary cards /}\n <div className=\"lg:col-span-3 grid grid-cols-2 sm:grid-cols-4 gap-4\">\n <div className=\"bg-bg-surface border border-border-subtle rounded-lg p-4\">\n <div className=\"flex items-center gap-2 text-text-muted mb-1\">\n <Tag className=\"size-4\" />\n <span className=\"text-xs font-medium uppercase tracking-wide\">Code</span>\n </div>\n <p className=\"text-lg font-mono font-bold text-text-primary\">{coupon.code}</p>\n </div>\n\n <div className=\"bg-bg-surface border border-border-subtle rounded-lg p-4\">\n <div className=\"flex items-center gap-2 text-text-muted mb-1\">\n <BarChart2 className=\"size-4\" />\n <span className=\"text-xs font-medium uppercase tracking-wide\">Discount</span>\n </div>\n <p className=\"text-lg font-bold text-text-primary\">{formatValue()}</p>\n <p className=\"text-xs text-text-muted capitalize\">\n {coupon.type.replace('_', ' ').toLowerCase()}\n </p>\n </div>\n\n <div className=\"bg-bg-surface border border-border-subtle rounded-lg p-4\">\n <div className=\"flex items-center gap-2 text-text-muted mb-1\">\n <Users className=\"size-4\" />\n <span className=\"text-xs font-medium uppercase tracking-wide\">Usage</span>\n </div>\n <p className=\"text-lg font-bold text-text-primary\">\n {coupon.currentUses}\n {coupon.maxTotalUses ? ` / ${coupon.maxTotalUses}` : ''}\n </p>\n {usagePercent !== null && (\n <div className=\"mt-1.5 h-1.5 w-full bg-bg-sunken rounded-full overflow-hidden\">\n <div\n className=\"h-full bg-action-primary-bg rounded-full\"\n style={{ width: `${Math.min(usagePercent, 100)}%` }}\n />\n </div>\n )}\n </div>\n\n <div className=\"bg-bg-surface border border-border-subtle rounded-lg p-4\">\n <div className=\"flex items-center gap-2 text-text-muted mb-1\">\n <Calendar className=\"size-4\" />\n <span className=\"text-xs font-medium uppercase tracking-wide\">Status</span>\n </div>\n <div className=\"mt-1\">\n <StatusBadge status={coupon.status} />\n </div>\n {coupon.validUntil && (\n <p className=\"text-xs text-text-muted mt-1\">\n Expires {formatDate(coupon.validUntil)}\n </p>\n )}\n </div>\n </div>\n\n {/ Main details /}\n <div className=\"lg:col-span-2 space-y-4\">\n <div className=\"bg-bg-surface border border-border-subtle rounded-lg p-6\">\n <h3 className=\"text-sm font-semibold text-text-primary uppercase tracking-wide mb-2\">\n Coupon Details\n </h3>\n <DetailRow label=\"Code\" value={<span className=\"font-mono\">{coupon.code}</span>} />\n <DetailRow label=\"Name\" value={coupon.name} />\n <DetailRow label=\"Description\" value={coupon.description} />\n <DetailRow label=\"Type\" value={coupon.type.replace('_', ' ').toLowerCase()} />\n <DetailRow label=\"Value\" value={formatValue()} />\n <DetailRow label=\"Scope\" value={coupon.scope} />\n <DetailRow label=\"Status\" value={<StatusBadge status={coupon.status} />} />\n </div>\n\n <div className=\"bg-bg-surface border border-border-subtle rounded-lg p-6\">\n <h3 className=\"text-sm font-semibold text-text-primary uppercase tracking-wide mb-2\">\n Restrictions\n </h3>\n <DetailRow\n label=\"Min Purchase Amount\"\n value={\n coupon.minPurchaseAmount != null\n ? `${coupon.minPurchaseAmount}${coupon.currency ? ` ${coupon.currency}` : ''}`\n : null\n }\n />\n <DetailRow\n label=\"Max Discount Amount\"\n value={\n coupon.maxDiscountAmount != null\n ? `${coupon.maxDiscountAmount}${coupon.currency ? ` ${coupon.currency}` : ''}`\n : null\n }\n />\n <DetailRow label=\"Max Uses Per User\" value={coupon.maxUsesPerUser} />\n <DetailRow\n label=\"Restricted Users\"\n value={\n coupon.restrictedToUserIds?.length ? (\n <span className=\"font-mono text-xs break-all\">\n {(coupon.restrictedToUserIds as string[]).join(', ')}\n </span>\n ) : (\n 'No restrictions'\n )\n }\n />\n <DetailRow\n label=\"Applicable Products\"\n value={\n coupon.applicableProducts?.length\n ? (coupon.applicableProducts as string[]).join(', ')\n : 'All products'\n }\n />\n <DetailRow\n label=\"Excluded Products\"\n value={\n coupon.excludedProducts?.length\n ? (coupon.excludedProducts as string[]).join(', ')\n : 'None'\n }\n />\n </div>\n </div>\n\n {/ Sidebar */}\n <div className=\"space-y-4\">\n <div className=\"bg-bg-surface border border-border-subtle rounded-lg p-6\">\n <h3 className=\"text-sm font-semibold text-text-primary uppercase tracking-wide mb-2\">\n Validity\n </h3>\n <DetailRow label=\"Valid From\" value={formatDate(coupon.validFrom)} />\n <DetailRow label=\"Valid Until\" value={formatDate(coupon.validUntil) ?? 'No expiry'} />\n </div>\n\n {coupon.campaignId && (\n <div className=\"bg-bg-surface border border-border-subtle rounded-lg p-6\">\n <h3 className=\"text-sm font-semibold text-text-primary uppercase tracking-wide mb-2\">\n Campaign\n </h3>\n <DetailRow\n label=\"Campaign ID\"\n value={<span className=\"font-mono text-xs\">{coupon.campaignId}</span>}\n />\n <DetailRow label=\"Campaign Name\" value={coupon.campaignName} />\n </div>\n )}\n\n <div className=\"bg-bg-surface border border-border-subtle rounded-lg p-6\">\n <h3 className=\"text-sm font-semibold text-text-primary uppercase tracking-wide mb-2\">\n <Package className=\"size-4 inline mr-1\" />\n Audit\n </h3>\n <DetailRow label=\"Created\" value={formatDate(coupon.createdAt)} />\n <DetailRow label=\"Last Updated\" value={formatDate(coupon.updatedAt)} />\n <DetailRow label=\"Created By\" value={coupon.createdBy ?? null} />\n </div>\n </div>\n </div>\n )}\n </div>\n );\n};\n"],"mappings":"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"}