@burdenoff/microfe-billing 2026.510.114

package/dist/billing/modules/credits/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/billing/modules/credits/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/billing/modules/credits/index.js

@@ -0,0 +1,8 @@
+import "./hooks/useCredits.js";
+import { CreditsPage as e } from "./pages/CreditsPage.js";
+import { CreditTransactionsPage as t } from "./pages/CreditTransactionsPage.js";
+import { AdminCreditsPage as n } from "./pages/AdminCreditsPage.js";
+import { CreditWithdrawalPage as r } from "./pages/CreditWithdrawalPage.js";
+import "./pages/index.js";
+import "./hooks/index.js";
+export { n as AdminCreditsPage, t as CreditTransactionsPage, r as CreditWithdrawalPage, e as CreditsPage };

package/dist/billing/modules/credits/pages/AdminCreditsPage.d.ts

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

package/dist/billing/modules/credits/pages/AdminCreditsPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminCreditsPage.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/credits/pages/AdminCreditsPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAQnD,eAAO,MAAM,gBAAgB,EAAE,EAqK9B,CAAC"}

package/dist/billing/modules/credits/pages/AdminCreditsPage.js

@@ -0,0 +1,140 @@
+import { AccessDenied as e } from "../../../shared/components/AccessDenied.js";
+import { PageHeader as t } from "../../../shared/components/PageHeader.js";
+import "../../../shared/components/index.js";
+import { useBillingPermissions as n } from "../../../hooks/useBillingPermissions.js";
+import { useGetBillingAccountsSettingsQuery as r } from "../../../../generated/global-operations.js";
+import { useCreditMutations as i, useCreditTransactions as a } from "../hooks/useCredits.js";
+import { useMemo as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/billing/modules/credits/pages/AdminCreditsPage.tsx
+var u = () => {
+	let u = n(), { grantCredits: d } = i(), { data: f, loading: p, refetch: m } = r(), h = o(() => f?.getBillingAccountsByOrg || [], [f]), [g, _] = s(""), [v, y] = s(""), [b, x] = s(""), [S, C] = s(!1), [w, T] = s(null), [E, D] = s(null), O = g || h[0]?.id || "", { transactions: k, isLoading: A, refetch: j } = a({
+		billingAccountId: O,
+		days: 30,
+		page: 1,
+		pageSize: 10
+	});
+	return u.canGrantCredits ? /* @__PURE__ */ l("div", {
+		className: "space-y-6 p-6",
+		children: [/* @__PURE__ */ c(t, {
+			title: "Credit Grants",
+			description: "Grant credits to billing accounts and review the latest credit ledger activity."
+		}), /* @__PURE__ */ l("div", {
+			className: "grid grid-cols-1 xl:grid-cols-[360px_minmax(0,1fr)] gap-6",
+			children: [/* @__PURE__ */ l("div", {
+				className: "border border-border rounded-lg bg-card p-6 space-y-4 h-fit",
+				children: [
+					/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+						className: "block text-sm font-medium text-foreground mb-1",
+						children: "Billing Account"
+					}), /* @__PURE__ */ c("select", {
+						value: O,
+						onChange: (e) => _(e.target.value),
+						className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
+						children: h.map((e) => /* @__PURE__ */ c("option", {
+							value: e.id,
+							children: e.name
+						}, e.id))
+					})] }),
+					/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+						className: "block text-sm font-medium text-foreground mb-1",
+						children: "Credits"
+					}), /* @__PURE__ */ c("input", {
+						type: "number",
+						min: "1",
+						step: "1",
+						value: v,
+						onChange: (e) => y(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: "500"
+					})] }),
+					/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+						className: "block text-sm font-medium text-foreground mb-1",
+						children: "Reason"
+					}), /* @__PURE__ */ c("textarea", {
+						value: b,
+						onChange: (e) => x(e.target.value),
+						className: "w-full min-h-24 px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
+						placeholder: "Promotional credit grant, service recovery, manual adjustment..."
+					})] }),
+					w ? /* @__PURE__ */ c("p", {
+						className: "text-sm text-status-success-text",
+						children: w
+					}) : null,
+					E ? /* @__PURE__ */ c("p", {
+						className: "text-sm text-destructive",
+						children: E
+					}) : null,
+					/* @__PURE__ */ c("button", {
+						type: "button",
+						onClick: async () => {
+							if (!O) {
+								D("Select a billing account first.");
+								return;
+							}
+							if (!v || Number(v) <= 0) {
+								D("Enter a valid credit amount.");
+								return;
+							}
+							C(!0), D(null), T(null);
+							try {
+								await d({
+									billingAccountId: O,
+									amount: Number(v),
+									reason: b
+								}), await Promise.all([m(), j()]), y(""), x(""), T("Credits granted successfully.");
+							} catch (e) {
+								D(e instanceof Error ? e.message : "Failed to grant credits.");
+							} finally {
+								C(!1);
+							}
+						},
+						disabled: p || S || h.length === 0,
+						className: "w-full px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+						children: S ? "Granting Credits..." : "Grant Credits"
+					})
+				]
+			}), /* @__PURE__ */ l("div", {
+				className: "border border-border rounded-lg bg-card overflow-hidden",
+				children: [/* @__PURE__ */ c("div", {
+					className: "p-4 border-b border-border bg-muted/30",
+					children: /* @__PURE__ */ c("h2", {
+						className: "font-semibold text-foreground",
+						children: "Recent Credit Ledger"
+					})
+				}), A ? /* @__PURE__ */ c("div", {
+					className: "p-6 text-sm text-muted-foreground",
+					children: "Loading recent credit activity..."
+				}) : k.length === 0 ? /* @__PURE__ */ c("div", {
+					className: "p-6 text-sm text-muted-foreground",
+					children: "No recent credit transactions found."
+				}) : /* @__PURE__ */ c("div", {
+					className: "divide-y divide-border",
+					children: k.map((e) => /* @__PURE__ */ l("div", {
+						className: "p-4 flex items-center justify-between gap-4",
+						children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", {
+							className: "text-sm font-medium text-foreground",
+							children: e.type
+						}), /* @__PURE__ */ c("p", {
+							className: "text-xs text-muted-foreground",
+							children: e.context?.reason || "No reason"
+						})] }), /* @__PURE__ */ l("div", {
+							className: "text-right",
+							children: [/* @__PURE__ */ l("p", {
+								className: "text-sm font-semibold text-foreground",
+								children: [e.amount > 0 ? "+" : "", e.amount]
+							}), /* @__PURE__ */ c("p", {
+								className: "text-xs text-muted-foreground",
+								children: e.status
+							})]
+						})]
+					}, e.id))
+				})]
+			})]
+		})]
+	}) : /* @__PURE__ */ c(e, { message: "You don't have permission to grant credits." });
+};
+//#endregion
+export { u as AdminCreditsPage };
+
+//# sourceMappingURL=AdminCreditsPage.js.map

package/dist/billing/modules/credits/pages/AdminCreditsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminCreditsPage.js","names":[],"sources":["../../../../../src/billing/modules/credits/pages/AdminCreditsPage.tsx"],"sourcesContent":["import { useMemo, useState, type FC } from 'react';\n\nimport { useGetBillingAccountsSettingsQuery } from '../../../../generated/global-operations';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader } from '../../../shared/components';\nimport type { BillingAccount } from '../../../shared/types';\nimport { useCreditMutations, useCreditTransactions } from '../hooks/useCredits';\n\nexport const AdminCreditsPage: FC = () => {\n  const permissions = useBillingPermissions();\n  const { grantCredits } = useCreditMutations();\n  const { data, loading, refetch } = useGetBillingAccountsSettingsQuery();\n  const billingAccounts = useMemo<BillingAccount[]>(\n    () => data?.getBillingAccountsByOrg || [],\n    [data]\n  );\n  const [selectedBillingAccountId, setSelectedBillingAccountId] = useState<string>('');\n  const [amount, setAmount] = useState<string>('');\n  const [reason, setReason] = useState<string>('');\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [message, setMessage] = useState<string | null>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  const activeBillingAccountId = selectedBillingAccountId || billingAccounts[0]?.id || '';\n  const {\n    transactions,\n    isLoading: isLoadingTransactions,\n    refetch: refetchTransactions,\n  } = useCreditTransactions({\n    billingAccountId: activeBillingAccountId,\n    days: 30,\n    page: 1,\n    pageSize: 10,\n  });\n\n  if (!permissions.canGrantCredits) {\n    return <AccessDenied message=\"You don't have permission to grant credits.\" />;\n  }\n\n  const handleGrantCredits = async () => {\n    if (!activeBillingAccountId) {\n      setError('Select a billing account first.');\n      return;\n    }\n\n    if (!amount || Number(amount) <= 0) {\n      setError('Enter a valid credit amount.');\n      return;\n    }\n\n    setIsSubmitting(true);\n    setError(null);\n    setMessage(null);\n\n    try {\n      await grantCredits({\n        billingAccountId: activeBillingAccountId,\n        amount: Number(amount),\n        reason,\n      });\n\n      await Promise.all([refetch(), refetchTransactions()]);\n      setAmount('');\n      setReason('');\n      setMessage('Credits granted successfully.');\n    } catch (grantError) {\n      setError(grantError instanceof Error ? grantError.message : 'Failed to grant credits.');\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title=\"Credit Grants\"\n        description=\"Grant credits to billing accounts and review the latest credit ledger activity.\"\n      />\n\n      <div className=\"grid grid-cols-1 xl:grid-cols-[360px_minmax(0,1fr)] gap-6\">\n        <div className=\"border border-border rounded-lg bg-card p-6 space-y-4 h-fit\">\n          <div>\n            <label className=\"block text-sm font-medium text-foreground mb-1\">\n              Billing Account\n            </label>\n            <select\n              value={activeBillingAccountId}\n              onChange={(event) => setSelectedBillingAccountId(event.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              {billingAccounts.map((account) => (\n                <option key={account.id} value={account.id}>\n                  {account.name}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          <div>\n            <label className=\"block text-sm font-medium text-foreground mb-1\">Credits</label>\n            <input\n              type=\"number\"\n              min=\"1\"\n              step=\"1\"\n              value={amount}\n              onChange={(event) => setAmount(event.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=\"500\"\n            />\n          </div>\n\n          <div>\n            <label className=\"block text-sm font-medium text-foreground mb-1\">Reason</label>\n            <textarea\n              value={reason}\n              onChange={(event) => setReason(event.target.value)}\n              className=\"w-full min-h-24 px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary\"\n              placeholder=\"Promotional credit grant, service recovery, manual adjustment...\"\n            />\n          </div>\n\n          {message ? <p className=\"text-sm text-status-success-text\">{message}</p> : null}\n          {error ? <p className=\"text-sm text-destructive\">{error}</p> : null}\n\n          <button\n            type=\"button\"\n            onClick={handleGrantCredits}\n            disabled={loading || isSubmitting || billingAccounts.length === 0}\n            className=\"w-full px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n          >\n            {isSubmitting ? 'Granting Credits...' : 'Grant Credits'}\n          </button>\n        </div>\n\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\">Recent Credit Ledger</h2>\n          </div>\n\n          {isLoadingTransactions ? (\n            <div className=\"p-6 text-sm text-muted-foreground\">\n              Loading recent credit activity...\n            </div>\n          ) : transactions.length === 0 ? (\n            <div className=\"p-6 text-sm text-muted-foreground\">\n              No recent credit transactions found.\n            </div>\n          ) : (\n            <div className=\"divide-y divide-border\">\n              {transactions.map((transaction) => (\n                <div key={transaction.id} className=\"p-4 flex items-center justify-between gap-4\">\n                  <div>\n                    <p className=\"text-sm font-medium text-foreground\">{transaction.type}</p>\n                    <p className=\"text-xs text-muted-foreground\">\n                      {(transaction.context as { reason?: string } | undefined)?.reason ||\n                        'No reason'}\n                    </p>\n                  </div>\n                  <div className=\"text-right\">\n                    <p className=\"text-sm font-semibold text-foreground\">\n                      {transaction.amount > 0 ? '+' : ''}\n                      {transaction.amount}\n                    </p>\n                    <p className=\"text-xs text-muted-foreground\">{transaction.status}</p>\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/credits/pages/CreditTransactionsPage.d.ts

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

package/dist/billing/modules/credits/pages/CreditTransactionsPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditTransactionsPage.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/credits/pages/CreditTransactionsPage.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAoC1C,eAAO,MAAM,sBAAsB,EAAE,EAoTpC,CAAC"}

package/dist/billing/modules/credits/pages/CreditTransactionsPage.js

@@ -0,0 +1,331 @@
+import { AccessDenied as e } from "../../../shared/components/AccessDenied.js";
+import { PageHeader as t } from "../../../shared/components/PageHeader.js";
+import { EmptyState as n } from "../../../shared/components/EmptyState.js";
+import { ServerError as r } from "../../../shared/components/ServerError.js";
+import "../../../shared/components/index.js";
+import { formatCreditTransactionType as i, formatDateTime as a, formatRelativeTime as o } from "../../../shared/utils/format.js";
+import { getCreditTransactionStatusColor as s, getStatusBadgeClasses as c } from "../../../shared/utils/status.js";
+import { isServerError as l } from "../../../shared/utils/error.js";
+import "../../../shared/utils/index.js";
+import { useBillingPermissions as u } from "../../../hooks/useBillingPermissions.js";
+import { useGetBillingAccountQuery as d } from "../../../../generated/global-operations.js";
+import { useBillingNavigate as f } from "../../../hooks/useBillingNavigate.js";
+import { useCreditTransactions as p } from "../hooks/useCredits.js";
+import { useState as m } from "react";
+import { ArrowLeft as h, Calendar as g, CheckCircle as _, ChevronLeft as v, ChevronRight as y, Coins as b, CreditCard as x, FileText as S, Mail as C, Minus as w, Plus as T, XCircle as E } from "lucide-react";
+import { useParams as D } from "react-router-dom";
+import { jsx as O, jsxs as k } from "react/jsx-runtime";
+import { useI18n as A } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/billing/modules/credits/pages/CreditTransactionsPage.tsx
+var j = () => {
+	let { t: o } = A(), s = (e, t) => {
+		let n = o(e);
+		return n === e ? t : n;
+	}, { billingAccountId: c } = D(), w = u(), T = f(), [j, N] = m(30), [P, F] = m("all"), [I, L] = m(1), { data: R, loading: z } = d({
+		variables: { id: c },
+		skip: !c
+	}), B = R?.getBillingAccount, { transactions: V, pagination: H, isLoading: U, error: W, refetch: G } = p({
+		billingAccountId: c || "",
+		days: j,
+		page: I,
+		pageSize: 20
+	});
+	if (!w.canViewCredits) return /* @__PURE__ */ O(e, { message: "You don't have permission to view credit history." });
+	if (!c) return /* @__PURE__ */ O("div", {
+		className: "p-6",
+		children: /* @__PURE__ */ O(n, {
+			icon: /* @__PURE__ */ O("svg", {
+				className: "w-6 h-6 text-muted-foreground",
+				fill: "none",
+				viewBox: "0 0 24 24",
+				stroke: "currentColor",
+				children: /* @__PURE__ */ O("path", {
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: 2,
+					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"
+				})
+			}),
+			title: "No billing account selected",
+			description: "Please select a billing account from the overview page to view credit history."
+		})
+	});
+	if (W && l(W)) return /* @__PURE__ */ O("div", {
+		className: "p-6",
+		children: /* @__PURE__ */ O(r, {
+			title: "Server Unavailable",
+			message: "Unable to load credit transactions. The server might be down or experiencing issues.",
+			onRetry: () => G(),
+			showRetry: !0
+		})
+	});
+	let K = z || U, q = P === "all" ? V : V.filter((e) => e.type === P), J = Math.ceil(H.totalCount / 20);
+	return K && !B ? /* @__PURE__ */ k("div", {
+		className: "space-y-6 p-6",
+		children: [/* @__PURE__ */ O("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ O("div", {
+			className: "space-y-2",
+			children: [
+				1,
+				2,
+				3,
+				4,
+				5
+			].map((e) => /* @__PURE__ */ O("div", { className: "h-16 bg-muted animate-pulse rounded" }, e))
+		})]
+	}) : /* @__PURE__ */ k("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ k("button", {
+				onClick: () => T("/overview"),
+				className: "inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors",
+				children: [/* @__PURE__ */ O(h, { className: "w-4 h-4" }), s("billing.credits.backToOverview", "Back to Overview")]
+			}),
+			/* @__PURE__ */ O(t, {
+				title: "Credit History",
+				description: B ? `Credit transactions for ${B.name}` : "View your credit transaction history"
+			}),
+			B && /* @__PURE__ */ O("div", {
+				className: "border border-border rounded-lg p-4 bg-card",
+				children: /* @__PURE__ */ k("div", {
+					className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4",
+					children: [
+						/* @__PURE__ */ k("div", {
+							className: "flex items-start gap-2",
+							children: [/* @__PURE__ */ O(x, { className: "w-4 h-4 text-muted-foreground mt-0.5" }), /* @__PURE__ */ k("div", { children: [
+								/* @__PURE__ */ O("p", {
+									className: "text-xs text-muted-foreground mb-0.5",
+									children: "Account"
+								}),
+								/* @__PURE__ */ O("p", {
+									className: "text-sm font-medium",
+									children: B.name
+								}),
+								B.isActive ? /* @__PURE__ */ k("span", {
+									className: "inline-flex items-center gap-1 mt-1 px-1.5 py-0.5 text-xs font-medium rounded bg-status-success-bg-subtle text-status-success-text",
+									children: [/* @__PURE__ */ O(_, { className: "w-3 h-3" }), "Active"]
+								}) : /* @__PURE__ */ k("span", {
+									className: "inline-flex items-center gap-1 mt-1 px-1.5 py-0.5 text-xs font-medium rounded bg-status-error-bg-subtle text-status-error-text",
+									children: [/* @__PURE__ */ O(E, { className: "w-3 h-3" }), "Inactive"]
+								})
+							] })]
+						}),
+						/* @__PURE__ */ k("div", {
+							className: "flex items-start gap-2",
+							children: [/* @__PURE__ */ O(C, { className: "w-4 h-4 text-muted-foreground mt-0.5" }), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+								className: "text-xs text-muted-foreground mb-0.5",
+								children: "Email"
+							}), /* @__PURE__ */ O("p", {
+								className: "text-sm font-medium break-all",
+								children: B.billingEmail || B.email
+							})] })]
+						}),
+						/* @__PURE__ */ k("div", {
+							className: "flex items-start gap-2",
+							children: [/* @__PURE__ */ O(b, { className: "w-4 h-4 text-muted-foreground mt-0.5" }), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+								className: "text-xs text-muted-foreground mb-0.5",
+								children: "Credit Balance"
+							}), /* @__PURE__ */ k("p", {
+								className: "text-sm font-semibold text-foreground",
+								children: [(B.creditAmount || 0).toLocaleString(), " Credits"]
+							})] })]
+						}),
+						/* @__PURE__ */ k("div", {
+							className: "flex items-start gap-2",
+							children: [/* @__PURE__ */ O(S, { className: "w-4 h-4 text-muted-foreground mt-0.5" }), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+								className: "text-xs text-muted-foreground mb-0.5",
+								children: "Tax ID"
+							}), /* @__PURE__ */ O("p", {
+								className: "text-sm font-medium",
+								children: B.taxId || "-"
+							})] })]
+						}),
+						/* @__PURE__ */ k("div", {
+							className: "flex items-start gap-2",
+							children: [/* @__PURE__ */ O(g, { className: "w-4 h-4 text-muted-foreground mt-0.5" }), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+								className: "text-xs text-muted-foreground mb-0.5",
+								children: "Member Since"
+							}), /* @__PURE__ */ O("p", {
+								className: "text-sm font-medium",
+								children: B.createdAt ? a(B.createdAt) : "-"
+							})] })]
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ k("div", {
+				className: "flex flex-wrap items-center gap-4 pb-4 border-b border-border",
+				children: [
+					/* @__PURE__ */ O("div", {
+						className: "inline-flex rounded-lg border border-border p-1 bg-muted/50",
+						children: [
+							7,
+							30,
+							90
+						].map((e) => /* @__PURE__ */ k("button", {
+							onClick: () => {
+								N(e), L(1);
+							},
+							className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${j === e ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+							children: [e, "d"]
+						}, e))
+					}),
+					/* @__PURE__ */ O("div", {
+						className: "inline-flex rounded-lg border border-border p-1 bg-muted/50",
+						children: [
+							"all",
+							"purchase",
+							"usage",
+							"adjustment"
+						].map((e) => /* @__PURE__ */ O("button", {
+							onClick: () => {
+								F(e), L(1);
+							},
+							className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors capitalize ${P === e ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+							children: e === "all" ? "All" : i(e)
+						}, e))
+					}),
+					/* @__PURE__ */ k("div", {
+						className: "ml-auto text-sm text-muted-foreground",
+						children: [
+							H.totalCount,
+							" transaction",
+							H.totalCount === 1 ? "" : "s",
+							" in last ",
+							j,
+							" ",
+							"days"
+						]
+					})
+				]
+			}),
+			q.length === 0 ? /* @__PURE__ */ O(n, {
+				icon: /* @__PURE__ */ O(b, { className: "w-6 h-6 text-muted-foreground" }),
+				title: "No credit transactions found",
+				description: P === "all" ? "Your credit transaction history will appear here." : "No transactions match your filter."
+			}) : /* @__PURE__ */ O("div", {
+				className: "space-y-3",
+				children: q.map((e) => /* @__PURE__ */ O(M, { transaction: e }, e.id))
+			}),
+			H.totalCount > 0 && /* @__PURE__ */ k("div", {
+				className: "flex items-center justify-between border-t border-border pt-4",
+				children: [/* @__PURE__ */ k("p", {
+					className: "text-sm text-muted-foreground",
+					children: [
+						"Showing ",
+						(I - 1) * 20 + 1,
+						" to",
+						" ",
+						Math.min(I * 20, H.totalCount),
+						" of ",
+						H.totalCount,
+						" ",
+						"transactions"
+					]
+				}), /* @__PURE__ */ k("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ k("button", {
+							onClick: () => {
+								I > 1 && L((e) => e - 1);
+							},
+							disabled: I <= 1,
+							className: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md border border-border bg-background hover:bg-muted/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+							children: [/* @__PURE__ */ O(v, { className: "w-4 h-4" }), "Previous"]
+						}),
+						/* @__PURE__ */ k("span", {
+							className: "text-sm text-muted-foreground px-2",
+							children: [
+								"Page ",
+								I,
+								" of ",
+								J || 1
+							]
+						}),
+						/* @__PURE__ */ k("button", {
+							onClick: () => {
+								H.hasMore && L((e) => e + 1);
+							},
+							disabled: !H.hasMore,
+							className: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md border border-border bg-background hover:bg-muted/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+							children: ["Next", /* @__PURE__ */ O(y, { className: "w-4 h-4" })]
+						})
+					]
+				})]
+			})
+		]
+	});
+}, M = ({ transaction: e }) => {
+	let t = s(e.status), n = Number(e.amount), r = n > 0, l = Math.abs(n);
+	return /* @__PURE__ */ k("div", {
+		className: "flex items-center gap-4 p-4 border border-border rounded-lg bg-card hover:shadow-sm transition-shadow",
+		children: [
+			/* @__PURE__ */ O("div", {
+				className: `w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${(() => {
+					if (e.type === "adjustment") return r ? "bg-status-success-bg-subtle" : "bg-status-error-bg-subtle";
+					switch (e.type) {
+						case "purchase": return "bg-status-success-bg-subtle";
+						case "usage": return "bg-status-warning-bg-subtle";
+						default: return "bg-muted";
+					}
+				})()}`,
+				children: (() => {
+					if (e.type === "adjustment") return r ? /* @__PURE__ */ O(T, { className: "w-4 h-4 text-status-success-text" }) : /* @__PURE__ */ O(w, { className: "w-4 h-4 text-status-error-text" });
+					switch (e.type) {
+						case "purchase": return /* @__PURE__ */ O(T, { className: "w-4 h-4 text-status-success-text" });
+						case "usage": return /* @__PURE__ */ O(w, { className: "w-4 h-4 text-status-warning-text" });
+						default: return /* @__PURE__ */ O(b, { className: "w-4 h-4 text-muted-foreground" });
+					}
+				})()
+			}),
+			/* @__PURE__ */ k("div", {
+				className: "flex-1 min-w-0",
+				children: [
+					/* @__PURE__ */ k("div", {
+						className: "flex items-center gap-2 flex-wrap",
+						children: [
+							/* @__PURE__ */ O("p", {
+								className: "font-medium text-foreground capitalize",
+								children: i(e.type)
+							}),
+							/* @__PURE__ */ O("span", {
+								className: `px-2 py-0.5 text-xs font-medium rounded ${c(t)}`,
+								children: e.status
+							}),
+							e.entityType && /* @__PURE__ */ O("span", {
+								className: "px-2 py-0.5 text-xs font-medium rounded bg-muted text-muted-foreground capitalize",
+								children: e.entityType
+							})
+						]
+					}),
+					/* @__PURE__ */ k("p", {
+						className: "text-sm text-muted-foreground mt-0.5",
+						children: [
+							o(e.createdAt),
+							" • ",
+							a(e.createdAt)
+						]
+					}),
+					e.productId && e.productId !== "default" && /* @__PURE__ */ k("p", {
+						className: "text-xs text-muted-foreground mt-1",
+						children: ["Product: ", e.productId]
+					})
+				]
+			}),
+			/* @__PURE__ */ O("div", {
+				className: "text-right flex-shrink-0",
+				children: /* @__PURE__ */ k("p", {
+					className: `font-semibold text-lg ${r ? "text-status-success-text" : "text-status-error-text"}`,
+					children: [
+						r ? "+" : "-",
+						l.toLocaleString(),
+						" credits"
+					]
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { j as CreditTransactionsPage };
+
+//# sourceMappingURL=CreditTransactionsPage.js.map

package/dist/billing/modules/credits/pages/CreditTransactionsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditTransactionsPage.js","names":[],"sources":["../../../../../src/billing/modules/credits/pages/CreditTransactionsPage.tsx"],"sourcesContent":["/**\n * Credits Module - Credit Transactions Page\n * Displays credit transaction history for a specific billing account\n */\n\nimport { useState, type FC } from 'react';\nimport { useParams } from 'react-router-dom';\nimport {\n  ArrowLeft,\n  Coins,\n  CreditCard,\n  Mail,\n  ChevronLeft,\n  ChevronRight,\n  Plus,\n  Minus,\n  CheckCircle,\n  XCircle,\n  FileText,\n  Calendar,\n} from 'lucide-react';\nimport { useCreditTransactions } from '../hooks/useCredits';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { AccessDenied, PageHeader, EmptyState, ServerError } from '../../../shared/components';\nimport {\n  formatDateTime,\n  formatRelativeTime,\n  formatCreditTransactionType,\n  isServerError,\n} from '../../../shared/utils';\nimport {\n  getCreditTransactionStatusColor,\n  getStatusBadgeClasses,\n} from '../../../shared/utils/status';\nimport type { CreditTransaction, CreditTransactionType } from '../../../shared/types';\nimport { useGetBillingAccountQuery } from '../../../../generated/global-operations';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ntype FilterType = 'all' | CreditTransactionType;\n\nexport const CreditTransactionsPage: 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 { billingAccountId } = useParams<{ billingAccountId: string }>();\n  const permissions = useBillingPermissions();\n  const navigateTo = useBillingNavigate();\n\n  const [days, setDays] = useState(30);\n  const [filterType, setFilterType] = useState<FilterType>('all');\n  const [page, setPage] = useState(1);\n  const pageSize = 20;\n\n  // Fetch billing account details\n  const { data: accountData, loading: isLoadingAccount } = useGetBillingAccountQuery({\n    variables: { id: billingAccountId! },\n    skip: !billingAccountId,\n  });\n\n  const billingAccount = accountData?.getBillingAccount;\n\n  // Fetch credit transactions\n  const {\n    transactions,\n    pagination,\n    isLoading: isLoadingTransactions,\n    error,\n    refetch,\n  } = useCreditTransactions({\n    billingAccountId: billingAccountId || '',\n    days,\n    page,\n    pageSize,\n  });\n\n  // Permission check\n  if (!permissions.canViewCredits) {\n    return <AccessDenied message=\"You don't have permission to view credit history.\" />;\n  }\n\n  // Show error if no billing account ID provided\n  if (!billingAccountId) {\n    return (\n      <div className=\"p-6\">\n        <EmptyState\n          icon={\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 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          }\n          title=\"No billing account selected\"\n          description=\"Please select a billing account from the overview page to view credit history.\"\n        />\n      </div>\n    );\n  }\n\n  // Show server error if backend is down\n  if (error && isServerError(error)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title=\"Server Unavailable\"\n          message=\"Unable to load credit transactions. The server might be down or experiencing issues.\"\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  const isLoading = isLoadingAccount || isLoadingTransactions;\n\n  // Filter transactions\n  const filteredTransactions =\n    filterType === 'all' ? transactions : transactions.filter((t) => t.type === filterType);\n\n  // Calculate total pages\n  const totalPages = Math.ceil(pagination.totalCount / pageSize);\n\n  // Pagination handlers\n  const goToNextPage = () => {\n    if (pagination.hasMore) {\n      setPage((p) => p + 1);\n    }\n  };\n\n  const goToPreviousPage = () => {\n    if (page > 1) {\n      setPage((p) => p - 1);\n    }\n  };\n\n  if (isLoading && !billingAccount) {\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-2\">\n          {[1, 2, 3, 4, 5].map((i) => (\n            <div key={i} className=\"h-16 bg-muted animate-pulse rounded\" />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Back Button */}\n      <button\n        onClick={() => navigateTo('/overview')}\n        className=\"inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors\"\n      >\n        <ArrowLeft className=\"w-4 h-4\" />\n        {tr('billing.credits.backToOverview', 'Back to Overview')}\n      </button>\n\n      <PageHeader\n        title=\"Credit History\"\n        description={\n          billingAccount\n            ? `Credit transactions for ${billingAccount.name}`\n            : 'View your credit transaction history'\n        }\n      />\n\n      {/* Billing Account Info Card */}\n      {billingAccount && (\n        <div className=\"border border-border rounded-lg p-4 bg-card\">\n          <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4\">\n            {/* Account Name & Status */}\n            <div className=\"flex items-start gap-2\">\n              <CreditCard className=\"w-4 h-4 text-muted-foreground mt-0.5\" />\n              <div>\n                <p className=\"text-xs text-muted-foreground mb-0.5\">Account</p>\n                <p className=\"text-sm font-medium\">{billingAccount.name}</p>\n                {billingAccount.isActive ? (\n                  <span className=\"inline-flex items-center gap-1 mt-1 px-1.5 py-0.5 text-xs font-medium rounded bg-status-success-bg-subtle text-status-success-text\">\n                    <CheckCircle className=\"w-3 h-3\" />\n                    Active\n                  </span>\n                ) : (\n                  <span className=\"inline-flex items-center gap-1 mt-1 px-1.5 py-0.5 text-xs font-medium rounded bg-status-error-bg-subtle text-status-error-text\">\n                    <XCircle className=\"w-3 h-3\" />\n                    Inactive\n                  </span>\n                )}\n              </div>\n            </div>\n\n            {/* Email */}\n            <div className=\"flex items-start gap-2\">\n              <Mail className=\"w-4 h-4 text-muted-foreground mt-0.5\" />\n              <div>\n                <p className=\"text-xs text-muted-foreground mb-0.5\">Email</p>\n                <p className=\"text-sm font-medium break-all\">\n                  {billingAccount.billingEmail || billingAccount.email}\n                </p>\n              </div>\n            </div>\n\n            {/* Credit Balance */}\n            <div className=\"flex items-start gap-2\">\n              <Coins className=\"w-4 h-4 text-muted-foreground mt-0.5\" />\n              <div>\n                <p className=\"text-xs text-muted-foreground mb-0.5\">Credit Balance</p>\n                <p className=\"text-sm font-semibold text-foreground\">\n                  {(billingAccount.creditAmount || 0).toLocaleString()} Credits\n                </p>\n              </div>\n            </div>\n\n            {/* Tax ID */}\n            <div className=\"flex items-start gap-2\">\n              <FileText className=\"w-4 h-4 text-muted-foreground mt-0.5\" />\n              <div>\n                <p className=\"text-xs text-muted-foreground mb-0.5\">Tax ID</p>\n                <p className=\"text-sm font-medium\">{billingAccount.taxId || '-'}</p>\n              </div>\n            </div>\n\n            {/* Account Created */}\n            <div className=\"flex items-start gap-2\">\n              <Calendar className=\"w-4 h-4 text-muted-foreground mt-0.5\" />\n              <div>\n                <p className=\"text-xs text-muted-foreground mb-0.5\">Member Since</p>\n                <p className=\"text-sm font-medium\">\n                  {billingAccount.createdAt ? formatDateTime(billingAccount.createdAt) : '-'}\n                </p>\n              </div>\n            </div>\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        {/* Time Range */}\n        <div className=\"inline-flex rounded-lg border border-border p-1 bg-muted/50\">\n          {[7, 30, 90].map((d) => (\n            <button\n              key={d}\n              onClick={() => {\n                setDays(d);\n                setPage(1); // Reset to first page on filter change\n              }}\n              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n                days === d\n                  ? 'bg-background text-foreground shadow-sm'\n                  : 'text-muted-foreground hover:text-foreground'\n              }`}\n            >\n              {d}d\n            </button>\n          ))}\n        </div>\n\n        {/* Transaction Type Filter */}\n        <div className=\"inline-flex rounded-lg border border-border p-1 bg-muted/50\">\n          {(['all', 'purchase', 'usage', 'adjustment'] as FilterType[]).map((type) => (\n            <button\n              key={type}\n              onClick={() => {\n                setFilterType(type);\n                setPage(1); // Reset to first page on filter change\n              }}\n              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors capitalize ${\n                filterType === type\n                  ? 'bg-background text-foreground shadow-sm'\n                  : 'text-muted-foreground hover:text-foreground'\n              }`}\n            >\n              {type === 'all' ? 'All' : formatCreditTransactionType(type as CreditTransactionType)}\n            </button>\n          ))}\n        </div>\n\n        {/* Transaction count */}\n        <div className=\"ml-auto text-sm text-muted-foreground\">\n          {pagination.totalCount} transaction{pagination.totalCount !== 1 ? 's' : ''} in last {days}{' '}\n          days\n        </div>\n      </div>\n\n      {/* Transactions List */}\n      {filteredTransactions.length === 0 ? (\n        <EmptyState\n          icon={<Coins className=\"w-6 h-6 text-muted-foreground\" />}\n          title=\"No credit transactions found\"\n          description={\n            filterType !== 'all'\n              ? 'No transactions match your filter.'\n              : 'Your credit transaction history will appear here.'\n          }\n        />\n      ) : (\n        <div className=\"space-y-3\">\n          {filteredTransactions.map((transaction) => (\n            <CreditTransactionRow key={transaction.id} transaction={transaction} />\n          ))}\n        </div>\n      )}\n\n      {/* Pagination Controls */}\n      {pagination.totalCount > 0 && (\n        <div className=\"flex items-center justify-between border-t border-border pt-4\">\n          <p className=\"text-sm text-muted-foreground\">\n            Showing {(page - 1) * pageSize + 1} to{' '}\n            {Math.min(page * pageSize, pagination.totalCount)} of {pagination.totalCount}{' '}\n            transactions\n          </p>\n          <div className=\"flex items-center gap-2\">\n            <button\n              onClick={goToPreviousPage}\n              disabled={page <= 1}\n              className=\"inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md border border-border bg-background hover:bg-muted/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n            >\n              <ChevronLeft className=\"w-4 h-4\" />\n              Previous\n            </button>\n            <span className=\"text-sm text-muted-foreground px-2\">\n              Page {page} of {totalPages || 1}\n            </span>\n            <button\n              onClick={goToNextPage}\n              disabled={!pagination.hasMore}\n              className=\"inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md border border-border bg-background hover:bg-muted/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n            >\n              Next\n              <ChevronRight className=\"w-4 h-4\" />\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// Credit Transaction Row Component\n// ============================================================================\n\ninterface CreditTransactionRowProps {\n  transaction: CreditTransaction;\n}\n\nconst CreditTransactionRow: FC<CreditTransactionRowProps> = ({ transaction }) => {\n  const statusColor = getCreditTransactionStatusColor(transaction.status);\n\n  // FIX: Check the actual amount value, not just the transaction type\n  // Negative amounts are debits (show red with \"-\"), positive amounts are credits (show green with \"+\")\n  const amount = Number(transaction.amount);\n  const isCredit = amount > 0;\n  const absAmount = Math.abs(amount);\n\n  const getTransactionIcon = () => {\n    // For adjustments, show different icon based on amount sign\n    if (transaction.type === 'adjustment') {\n      return isCredit ? (\n        <Plus className=\"w-4 h-4 text-status-success-text\" />\n      ) : (\n        <Minus className=\"w-4 h-4 text-status-error-text\" />\n      );\n    }\n\n    switch (transaction.type) {\n      case 'purchase':\n        return <Plus className=\"w-4 h-4 text-status-success-text\" />;\n      case 'usage':\n        return <Minus className=\"w-4 h-4 text-status-warning-text\" />;\n      default:\n        return <Coins className=\"w-4 h-4 text-muted-foreground\" />;\n    }\n  };\n\n  const getIconBackground = () => {\n    // For adjustments, show different background based on amount sign\n    if (transaction.type === 'adjustment') {\n      return isCredit ? 'bg-status-success-bg-subtle' : 'bg-status-error-bg-subtle';\n    }\n\n    switch (transaction.type) {\n      case 'purchase':\n        return 'bg-status-success-bg-subtle';\n      case 'usage':\n        return 'bg-status-warning-bg-subtle';\n      default:\n        return 'bg-muted';\n    }\n  };\n\n  return (\n    <div className=\"flex items-center gap-4 p-4 border border-border rounded-lg bg-card hover:shadow-sm transition-shadow\">\n      {/* Icon */}\n      <div\n        className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${getIconBackground()}`}\n      >\n        {getTransactionIcon()}\n      </div>\n\n      {/* Info */}\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"flex items-center gap-2 flex-wrap\">\n          <p className=\"font-medium text-foreground capitalize\">\n            {formatCreditTransactionType(transaction.type)}\n          </p>\n          <span\n            className={`px-2 py-0.5 text-xs font-medium rounded ${getStatusBadgeClasses(statusColor)}`}\n          >\n            {transaction.status}\n          </span>\n          {transaction.entityType && (\n            <span className=\"px-2 py-0.5 text-xs font-medium rounded bg-muted text-muted-foreground capitalize\">\n              {transaction.entityType}\n            </span>\n          )}\n        </div>\n        <p className=\"text-sm text-muted-foreground mt-0.5\">\n          {formatRelativeTime(transaction.createdAt)} • {formatDateTime(transaction.createdAt)}\n        </p>\n        {transaction.productId && transaction.productId !== 'default' && (\n          <p className=\"text-xs text-muted-foreground mt-1\">Product: {transaction.productId}</p>\n        )}\n      </div>\n\n      {/* Amount */}\n      <div className=\"text-right flex-shrink-0\">\n        <p\n          className={`font-semibold text-lg ${isCredit ? 'text-status-success-text' : 'text-status-error-text'}`}\n        >\n          {isCredit ? '+' : '-'}\n          {absAmount.toLocaleString()} credits\n        </p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/credits/pages/CreditWithdrawalPage.d.ts

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

package/dist/billing/modules/credits/pages/CreditWithdrawalPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditWithdrawalPage.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/credits/pages/CreditWithdrawalPage.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAuB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AA0JrD,eAAO,MAAM,oBAAoB,EAAE,EAouBlC,CAAC"}