@burdenoff/microfe-billing 2026.903.2 → 2026.907.1

package/dist/billing/modules/billing/pages/BillingWebhookLogsPage.js

@@ -0,0 +1,364 @@
+import { AccessDenied as e } from "../../../shared/components/AccessDenied.js";
+import { PageHeader as t } from "../../../shared/components/PageHeader.js";
+import { statusTokens as n } from "../../../shared/utils/tokens.js";
+import { ServerError as r } from "../../../shared/components/ServerError.js";
+import "../../../shared/components/index.js";
+import { formatDateTime as i } from "../../../shared/utils/format.js";
+import { isServerError as a } from "../../../shared/utils/error.js";
+import "../../../shared/utils/index.js";
+import { useBillingPermissions as o } from "../../../hooks/useBillingPermissions.js";
+import { useBillingWebhookLogs as s, useRefundMutations as c } from "../hooks/useRefunds.js";
+import "../hooks/index.js";
+import { useState as l } from "react";
+import { AlertTriangle as u, CheckCircle as d, ChevronLeft as f, ChevronRight as p, DollarSign as m, Eye as h, Loader2 as g, RefreshCw as _, X as v } from "lucide-react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { IllustratedEmptyState as x, ResponsiveTable as S } from "@burdenoff/fe-libs/ui";
+//#region src/billing/modules/billing/pages/BillingWebhookLogsPage.tsx
+var C = 25, w = ["stripe", "razorpay"], T = new Set([
+	"payment_intent.succeeded",
+	"charge.succeeded",
+	"payment.captured",
+	"order.paid"
+]), E = (e) => e.processed ? {
+	label: "Processed",
+	className: `${n.success.bg} ${n.success.text}`,
+	icon: d
+} : {
+	label: e.error ? "Failed" : "Pending",
+	className: `${n.error.bg} ${n.error.text}`,
+	icon: u
+}, D = ({ log: e, onClose: t, onCreateRefund: n, isCreatingRefund: r, canCreateRefund: a }) => e ? /* @__PURE__ */ y("div", {
+	className: "fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay p-4",
+	children: /* @__PURE__ */ b("div", {
+		className: "w-full max-w-2xl max-h-[85vh] overflow-y-auto rounded-lg bg-bg-surface border border-border-subtle shadow-[var(--shadow-elevation-2)]",
+		children: [/* @__PURE__ */ b("div", {
+			className: "flex items-center justify-between p-4 border-b border-border-subtle",
+			children: [/* @__PURE__ */ y("h3", {
+				className: "text-base font-semibold text-text-primary",
+				children: "Webhook log details"
+			}), /* @__PURE__ */ y("button", {
+				type: "button",
+				onClick: t,
+				className: "p-1 rounded text-text-muted hover:text-text-primary hover:bg-bg-sunken/50",
+				children: /* @__PURE__ */ y(v, { className: "size-4" })
+			})]
+		}), /* @__PURE__ */ b("div", {
+			className: "p-4 space-y-4",
+			children: [
+				/* @__PURE__ */ b("div", {
+					className: "grid grid-cols-2 gap-4 text-sm",
+					children: [
+						/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+							className: "text-text-muted",
+							children: "Provider"
+						}), /* @__PURE__ */ y("p", {
+							className: "text-text-primary capitalize",
+							children: e.provider
+						})] }),
+						/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+							className: "text-text-muted",
+							children: "Event"
+						}), /* @__PURE__ */ y("p", {
+							className: "text-text-primary font-mono text-xs",
+							children: e.event
+						})] }),
+						/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+							className: "text-text-muted",
+							children: "Received"
+						}), /* @__PURE__ */ y("p", {
+							className: "text-text-primary",
+							children: i(e.createdAt)
+						})] }),
+						/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+							className: "text-text-muted",
+							children: "Processed"
+						}), /* @__PURE__ */ y("p", {
+							className: "text-text-primary",
+							children: e.processed ? "Yes" : "No"
+						})] })
+					]
+				}),
+				e.error && /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+					className: "text-sm text-text-muted mb-1",
+					children: "Error"
+				}), /* @__PURE__ */ y("pre", {
+					className: "text-xs whitespace-pre-wrap p-3 rounded-md bg-status-error-bg-subtle text-status-error-text border border-status-error-border",
+					children: e.error
+				})] }),
+				/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+					className: "text-sm text-text-muted mb-1",
+					children: "Payload"
+				}), /* @__PURE__ */ y("pre", {
+					className: "text-xs whitespace-pre-wrap p-3 rounded-md bg-bg-sunken/60 text-text-secondary max-h-64 overflow-y-auto",
+					children: JSON.stringify(e.payload, null, 2)
+				})] }),
+				!e.processed && a && /* @__PURE__ */ b("button", {
+					type: "button",
+					onClick: () => n(e.id),
+					disabled: r,
+					className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bgHover disabled:opacity-50",
+					children: [r ? /* @__PURE__ */ y(g, { className: "size-4 animate-spin" }) : /* @__PURE__ */ y(m, { className: "size-4" }), "Create refund from this webhook"]
+				})
+			]
+		})]
+	})
+}) : null, O = () => {
+	let n = o(), [u, d] = l(0), [m, g] = l({}), [v, O] = l(null), { logs: k, totalCount: A, isLoading: j, error: M, refetch: N } = s(m, u, C), { createRefundRecordFromWebhook: P, isCreatingFromWebhook: F } = c();
+	if (!n.isBillingAdmin) return /* @__PURE__ */ y(e, { message: "You don't have permission to view billing webhook logs." });
+	if (M && a(M)) return /* @__PURE__ */ y("div", {
+		className: "p-6",
+		children: /* @__PURE__ */ y(r, {
+			title: "Server Unavailable",
+			message: "Unable to load webhook logs. The server might be down or experiencing issues.",
+			onRetry: () => N(),
+			showRetry: !0
+		})
+	});
+	let I = (e, t) => {
+		g((n) => ({
+			...n,
+			[e]: t
+		})), d(0);
+	}, L = async (e) => {
+		await P(e), O(null);
+	}, R = [
+		{
+			key: "date",
+			header: "Received",
+			priority: "primary",
+			cellClassName: "whitespace-nowrap",
+			cell: (e) => /* @__PURE__ */ b("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ y("span", {
+					className: "text-sm text-text-primary",
+					children: i(e.createdAt).split(" ")[0]
+				}), /* @__PURE__ */ y("span", {
+					className: "text-xs text-text-muted",
+					children: i(e.createdAt).split(" ")[1]
+				})]
+			})
+		},
+		{
+			key: "status",
+			header: "Status",
+			cellClassName: "whitespace-nowrap",
+			cell: (e) => {
+				let t = E(e), n = t.icon;
+				return /* @__PURE__ */ b("span", {
+					className: `inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded ${t.className}`,
+					children: [/* @__PURE__ */ y(n, { className: "size-3" }), t.label]
+				});
+			}
+		},
+		{
+			key: "provider",
+			header: "Provider",
+			priority: "hidden-on-mobile",
+			cellClassName: "whitespace-nowrap",
+			cell: (e) => /* @__PURE__ */ y("span", {
+				className: "text-sm text-text-primary capitalize",
+				children: e.provider
+			})
+		},
+		{
+			key: "event",
+			header: "Event",
+			cellClassName: "whitespace-nowrap max-w-[220px] truncate",
+			cell: (e) => /* @__PURE__ */ y("span", {
+				className: "text-sm font-mono text-text-muted",
+				children: e.event
+			})
+		},
+		{
+			key: "error",
+			header: "Error",
+			priority: "hidden-on-mobile",
+			cellClassName: "max-w-[280px] truncate",
+			cell: (e) => /* @__PURE__ */ y("span", {
+				className: "text-sm text-status-error-text",
+				children: e.error || "-"
+			})
+		}
+	], z = Math.max(1, Math.ceil(A / C));
+	return /* @__PURE__ */ b("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ y(t, {
+				title: "Billing Webhook Logs",
+				description: "Every Stripe/Razorpay webhook delivery — investigate processing failures directly.",
+				actions: /* @__PURE__ */ b("button", {
+					type: "button",
+					onClick: () => N(),
+					className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md border border-border-subtle bg-bg-surface hover:bg-bg-sunken/50",
+					children: [/* @__PURE__ */ y(_, { className: "size-4" }), "Refresh"]
+				})
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "p-4 border border-border-subtle rounded-lg bg-bg-sunken/30 grid grid-cols-1 sm:grid-cols-3 gap-4",
+				children: [
+					/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("label", {
+						className: "block text-sm font-medium mb-1",
+						children: "Processed"
+					}), /* @__PURE__ */ b("select", {
+						value: m.processed === void 0 ? "" : String(m.processed),
+						onChange: (e) => I("processed", e.target.value === "" ? void 0 : e.target.value === "true"),
+						className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface",
+						children: [
+							/* @__PURE__ */ y("option", {
+								value: "",
+								children: "All"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "false",
+								children: "Unprocessed / Failed"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "true",
+								children: "Processed"
+							})
+						]
+					})] }),
+					/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("label", {
+						className: "block text-sm font-medium mb-1",
+						children: "Provider"
+					}), /* @__PURE__ */ b("select", {
+						value: m.provider || "",
+						onChange: (e) => I("provider", e.target.value || void 0),
+						className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface",
+						children: [/* @__PURE__ */ y("option", {
+							value: "",
+							children: "All Providers"
+						}), w.map((e) => /* @__PURE__ */ y("option", {
+							value: e,
+							children: e.charAt(0).toUpperCase() + e.slice(1)
+						}, e))]
+					})] }),
+					/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("label", {
+						className: "block text-sm font-medium mb-1",
+						children: "Has Error"
+					}), /* @__PURE__ */ b("select", {
+						value: m.hasError === void 0 ? "" : String(m.hasError),
+						onChange: (e) => I("hasError", e.target.value === "" ? void 0 : e.target.value === "true"),
+						className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface",
+						children: [
+							/* @__PURE__ */ y("option", {
+								value: "",
+								children: "All"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "true",
+								children: "Has error"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "false",
+								children: "No error"
+							})
+						]
+					})] })
+				]
+			}),
+			j && k.length === 0 ? /* @__PURE__ */ y("div", {
+				className: "space-y-2",
+				children: [
+					1,
+					2,
+					3,
+					4,
+					5
+				].map((e) => /* @__PURE__ */ y("div", { className: "h-16 bg-bg-sunken animate-pulse rounded" }, e))
+			}) : k.length === 0 ? /* @__PURE__ */ y(x, {
+				illustration: "empty-data",
+				title: "No webhook logs found",
+				description: "Nothing matches these filters — try widening them, or check back after the next payment."
+			}) : /* @__PURE__ */ y("div", {
+				className: "border border-border-subtle rounded-lg overflow-hidden",
+				children: /* @__PURE__ */ y(S, {
+					columns: R,
+					data: k,
+					rowKey: (e) => e.id,
+					rowActions: (e) => /* @__PURE__ */ b("button", {
+						type: "button",
+						onClick: () => O(e),
+						className: "inline-flex items-center gap-1.5 px-2 py-1 text-sm font-medium rounded-button text-text-secondary hover:text-text-primary hover:bg-bg-sunken/60 transition-colors",
+						children: [/* @__PURE__ */ y(h, { className: "size-4" }), /* @__PURE__ */ y("span", {
+							className: "hidden sm:inline",
+							children: "View"
+						})]
+					})
+				})
+			}),
+			A > 0 && /* @__PURE__ */ b("div", {
+				className: "flex flex-col sm:flex-row items-center justify-between gap-4 border-t border-border-subtle pt-4",
+				children: [/* @__PURE__ */ b("p", {
+					className: "text-sm text-text-muted text-center sm:text-left",
+					children: [
+						"Showing ",
+						u * C + 1,
+						" to ",
+						Math.min((u + 1) * C, A),
+						" of",
+						" ",
+						A,
+						" logs"
+					]
+				}), /* @__PURE__ */ b("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ b("button", {
+							type: "button",
+							onClick: () => d((e) => Math.max(0, e - 1)),
+							disabled: u === 0,
+							className: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-button border border-border-subtle bg-bg-surface hover:bg-bg-sunken/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+							children: [/* @__PURE__ */ y(f, { className: "size-4" }), /* @__PURE__ */ y("span", {
+								className: "hidden sm:inline",
+								children: "Previous"
+							})]
+						}),
+						/* @__PURE__ */ b("span", {
+							className: "text-sm text-text-muted px-2",
+							children: [
+								/* @__PURE__ */ y("span", {
+									className: "hidden sm:inline",
+									children: "Page "
+								}),
+								u + 1,
+								" ",
+								/* @__PURE__ */ y("span", {
+									className: "hidden sm:inline",
+									children: "of"
+								}),
+								/* @__PURE__ */ y("span", {
+									className: "sm:hidden",
+									children: "/"
+								}),
+								" ",
+								z
+							]
+						}),
+						/* @__PURE__ */ b("button", {
+							type: "button",
+							onClick: () => d((e) => e + 1 < z ? e + 1 : e),
+							disabled: u + 1 >= z,
+							className: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-button border border-border-subtle bg-bg-surface hover:bg-bg-sunken/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+							children: [/* @__PURE__ */ y("span", {
+								className: "hidden sm:inline",
+								children: "Next"
+							}), /* @__PURE__ */ y(p, { className: "size-4" })]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ y(D, {
+				log: v,
+				onClose: () => O(null),
+				onCreateRefund: L,
+				isCreatingRefund: F,
+				canCreateRefund: v ? T.has(v.event) && !!v.error : !1
+			})
+		]
+	});
+};
+//#endregion
+export { O as BillingWebhookLogsPage };
+
+//# sourceMappingURL=BillingWebhookLogsPage.js.map

package/dist/billing/modules/billing/pages/BillingWebhookLogsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BillingWebhookLogsPage.js","names":[],"sources":["../../../../../src/billing/modules/billing/pages/BillingWebhookLogsPage.tsx"],"sourcesContent":["/**\n * Billing Module - Billing Webhook Logs Page\n * Admin visibility into every Stripe/Razorpay webhook processing attempt —\n * not just the payment-succeeded subset eligible for automatic refund\n * creation (see RefundsPage's \"Import Failed Webhooks\" action). Lets whoever\n * owns billing ops see and investigate ANY webhook processing failure\n * without needing direct DB access.\n */\n\nimport { useState, type FC } from 'react';\nimport {\n  RefreshCw,\n  ChevronLeft,\n  ChevronRight,\n  CheckCircle,\n  AlertTriangle,\n  X,\n  DollarSign,\n  Loader2,\n  Eye,\n} from 'lucide-react';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport {\n  useBillingWebhookLogs,\n  useRefundMutations,\n  type BillingWebhookLogFilters,\n  type WebhookLog,\n} from '../hooks';\nimport { AccessDenied, PageHeader, ServerError } from '../../../shared/components';\nimport { formatDateTime, isServerError } from '../../../shared/utils';\nimport { statusTokens } from '../../../shared/utils/tokens';\nimport {\n  ResponsiveTable,\n  type ResponsiveTableColumn,\n  IllustratedEmptyState,\n} from '@burdenoff/fe-libs/ui';\n\nconst PAGE_SIZE = 25;\nconst PROVIDER_OPTIONS = ['stripe', 'razorpay'];\nconst REFUND_ELIGIBLE_EVENTS = new Set([\n  'payment_intent.succeeded',\n  'charge.succeeded',\n  'payment.captured',\n  'order.paid',\n]);\n\nconst getBadge = (\n  log: WebhookLog\n): { label: string; className: string; icon: FC<{ className?: string }> } => {\n  if (!log.processed) {\n    return {\n      label: log.error ? 'Failed' : 'Pending',\n      className: `${statusTokens.error.bg} ${statusTokens.error.text}`,\n      icon: AlertTriangle,\n    };\n  }\n  return {\n    label: 'Processed',\n    className: `${statusTokens.success.bg} ${statusTokens.success.text}`,\n    icon: CheckCircle,\n  };\n};\n\nconst WebhookLogDetailModal: FC<{\n  log: WebhookLog | null;\n  onClose: () => void;\n  onCreateRefund: (id: string) => void;\n  isCreatingRefund: boolean;\n  canCreateRefund: boolean;\n}> = ({ log, onClose, onCreateRefund, isCreatingRefund, canCreateRefund }) => {\n  if (!log) return null;\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay p-4\">\n      <div className=\"w-full max-w-2xl max-h-[85vh] overflow-y-auto rounded-lg bg-bg-surface border border-border-subtle shadow-[var(--shadow-elevation-2)]\">\n        <div className=\"flex items-center justify-between p-4 border-b border-border-subtle\">\n          <h3 className=\"text-base font-semibold text-text-primary\">Webhook log details</h3>\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"p-1 rounded text-text-muted hover:text-text-primary hover:bg-bg-sunken/50\"\n          >\n            <X className=\"size-4\" />\n          </button>\n        </div>\n        <div className=\"p-4 space-y-4\">\n          <div className=\"grid grid-cols-2 gap-4 text-sm\">\n            <div>\n              <p className=\"text-text-muted\">Provider</p>\n              <p className=\"text-text-primary capitalize\">{log.provider}</p>\n            </div>\n            <div>\n              <p className=\"text-text-muted\">Event</p>\n              <p className=\"text-text-primary font-mono text-xs\">{log.event}</p>\n            </div>\n            <div>\n              <p className=\"text-text-muted\">Received</p>\n              <p className=\"text-text-primary\">{formatDateTime(log.createdAt)}</p>\n            </div>\n            <div>\n              <p className=\"text-text-muted\">Processed</p>\n              <p className=\"text-text-primary\">{log.processed ? 'Yes' : 'No'}</p>\n            </div>\n          </div>\n          {log.error && (\n            <div>\n              <p className=\"text-sm text-text-muted mb-1\">Error</p>\n              <pre className=\"text-xs whitespace-pre-wrap p-3 rounded-md bg-status-error-bg-subtle text-status-error-text border border-status-error-border\">\n                {log.error}\n              </pre>\n            </div>\n          )}\n          <div>\n            <p className=\"text-sm text-text-muted mb-1\">Payload</p>\n            <pre className=\"text-xs whitespace-pre-wrap p-3 rounded-md bg-bg-sunken/60 text-text-secondary max-h-64 overflow-y-auto\">\n              {JSON.stringify(log.payload, null, 2)}\n            </pre>\n          </div>\n          {!log.processed && canCreateRefund && (\n            <button\n              type=\"button\"\n              onClick={() => onCreateRefund(log.id)}\n              disabled={isCreatingRefund}\n              className=\"inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bgHover disabled:opacity-50\"\n            >\n              {isCreatingRefund ? (\n                <Loader2 className=\"size-4 animate-spin\" />\n              ) : (\n                <DollarSign className=\"size-4\" />\n              )}\n              Create refund from this webhook\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport const BillingWebhookLogsPage: FC = () => {\n  const permissions = useBillingPermissions();\n  const [page, setPage] = useState(0);\n  const [filters, setFilters] = useState<BillingWebhookLogFilters>({});\n  const [selectedLog, setSelectedLog] = useState<WebhookLog | null>(null);\n\n  const { logs, totalCount, isLoading, error, refetch } = useBillingWebhookLogs(\n    filters,\n    page,\n    PAGE_SIZE\n  );\n  const { createRefundRecordFromWebhook, isCreatingFromWebhook } = useRefundMutations();\n\n  if (!permissions.isBillingAdmin) {\n    return <AccessDenied message=\"You don't have permission to view billing webhook logs.\" />;\n  }\n\n  if (error && isServerError(error)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title=\"Server Unavailable\"\n          message=\"Unable to load webhook logs. The server might be down or experiencing issues.\"\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  const handleFilterChange = <K extends keyof BillingWebhookLogFilters>(\n    key: K,\n    value: BillingWebhookLogFilters[K]\n  ) => {\n    setFilters((prev) => ({ ...prev, [key]: value }));\n    setPage(0);\n  };\n\n  const handleCreateRefund = async (webhookLogId: string) => {\n    await createRefundRecordFromWebhook(webhookLogId);\n    setSelectedLog(null);\n  };\n\n  const columns: ResponsiveTableColumn<WebhookLog>[] = [\n    {\n      key: 'date',\n      header: 'Received',\n      priority: 'primary',\n      cellClassName: 'whitespace-nowrap',\n      cell: (log) => (\n        <div className=\"flex flex-col\">\n          <span className=\"text-sm text-text-primary\">\n            {formatDateTime(log.createdAt).split(' ')[0]}\n          </span>\n          <span className=\"text-xs text-text-muted\">\n            {formatDateTime(log.createdAt).split(' ')[1]}\n          </span>\n        </div>\n      ),\n    },\n    {\n      key: 'status',\n      header: 'Status',\n      cellClassName: 'whitespace-nowrap',\n      cell: (log) => {\n        const badge = getBadge(log);\n        const BadgeIcon = badge.icon;\n        return (\n          <span\n            className={`inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded ${badge.className}`}\n          >\n            <BadgeIcon className=\"size-3\" />\n            {badge.label}\n          </span>\n        );\n      },\n    },\n    {\n      key: 'provider',\n      header: 'Provider',\n      priority: 'hidden-on-mobile',\n      cellClassName: 'whitespace-nowrap',\n      cell: (log) => <span className=\"text-sm text-text-primary capitalize\">{log.provider}</span>,\n    },\n    {\n      key: 'event',\n      header: 'Event',\n      cellClassName: 'whitespace-nowrap max-w-[220px] truncate',\n      cell: (log) => <span className=\"text-sm font-mono text-text-muted\">{log.event}</span>,\n    },\n    {\n      key: 'error',\n      header: 'Error',\n      priority: 'hidden-on-mobile',\n      cellClassName: 'max-w-[280px] truncate',\n      cell: (log) => <span className=\"text-sm text-status-error-text\">{log.error || '-'}</span>,\n    },\n  ];\n\n  const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE));\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title=\"Billing Webhook Logs\"\n        description=\"Every Stripe/Razorpay webhook delivery — investigate processing failures directly.\"\n        actions={\n          <button\n            type=\"button\"\n            onClick={() => refetch()}\n            className=\"inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md border border-border-subtle bg-bg-surface hover:bg-bg-sunken/50\"\n          >\n            <RefreshCw className=\"size-4\" />\n            Refresh\n          </button>\n        }\n      />\n\n      {/* Filters */}\n      <div className=\"p-4 border border-border-subtle rounded-lg bg-bg-sunken/30 grid grid-cols-1 sm:grid-cols-3 gap-4\">\n        <div>\n          <label className=\"block text-sm font-medium mb-1\">Processed</label>\n          <select\n            value={filters.processed === undefined ? '' : String(filters.processed)}\n            onChange={(e) =>\n              handleFilterChange(\n                'processed',\n                e.target.value === '' ? undefined : e.target.value === 'true'\n              )\n            }\n            className=\"w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface\"\n          >\n            <option value=\"\">All</option>\n            <option value=\"false\">Unprocessed / Failed</option>\n            <option value=\"true\">Processed</option>\n          </select>\n        </div>\n        <div>\n          <label className=\"block text-sm font-medium mb-1\">Provider</label>\n          <select\n            value={filters.provider || ''}\n            onChange={(e) => handleFilterChange('provider', e.target.value || undefined)}\n            className=\"w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface\"\n          >\n            <option value=\"\">All Providers</option>\n            {PROVIDER_OPTIONS.map((p) => (\n              <option key={p} value={p}>\n                {p.charAt(0).toUpperCase() + p.slice(1)}\n              </option>\n            ))}\n          </select>\n        </div>\n        <div>\n          <label className=\"block text-sm font-medium mb-1\">Has Error</label>\n          <select\n            value={filters.hasError === undefined ? '' : String(filters.hasError)}\n            onChange={(e) =>\n              handleFilterChange(\n                'hasError',\n                e.target.value === '' ? undefined : e.target.value === 'true'\n              )\n            }\n            className=\"w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface\"\n          >\n            <option value=\"\">All</option>\n            <option value=\"true\">Has error</option>\n            <option value=\"false\">No error</option>\n          </select>\n        </div>\n      </div>\n\n      {/* Table */}\n      {isLoading && logs.length === 0 ? (\n        <div className=\"space-y-2\">\n          {[1, 2, 3, 4, 5].map((i) => (\n            <div key={i} className=\"h-16 bg-bg-sunken animate-pulse rounded\" />\n          ))}\n        </div>\n      ) : logs.length === 0 ? (\n        <IllustratedEmptyState\n          illustration=\"empty-data\"\n          title=\"No webhook logs found\"\n          description=\"Nothing matches these filters — try widening them, or check back after the next payment.\"\n        />\n      ) : (\n        <div className=\"border border-border-subtle rounded-lg overflow-hidden\">\n          <ResponsiveTable<WebhookLog>\n            columns={columns}\n            data={logs}\n            rowKey={(log) => log.id}\n            rowActions={(log) => (\n              <button\n                type=\"button\"\n                onClick={() => setSelectedLog(log)}\n                className=\"inline-flex items-center gap-1.5 px-2 py-1 text-sm font-medium rounded-button text-text-secondary hover:text-text-primary hover:bg-bg-sunken/60 transition-colors\"\n              >\n                <Eye className=\"size-4\" />\n                <span className=\"hidden sm:inline\">View</span>\n              </button>\n            )}\n          />\n        </div>\n      )}\n\n      {/* Pagination */}\n      {totalCount > 0 && (\n        <div className=\"flex flex-col sm:flex-row items-center justify-between gap-4 border-t border-border-subtle pt-4\">\n          <p className=\"text-sm text-text-muted text-center sm:text-left\">\n            Showing {page * PAGE_SIZE + 1} to {Math.min((page + 1) * PAGE_SIZE, totalCount)} of{' '}\n            {totalCount} logs\n          </p>\n          <div className=\"flex items-center gap-2\">\n            <button\n              type=\"button\"\n              onClick={() => setPage((p) => Math.max(0, p - 1))}\n              disabled={page === 0}\n              className=\"inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-button border border-border-subtle bg-bg-surface hover:bg-bg-sunken/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n            >\n              <ChevronLeft className=\"size-4\" />\n              <span className=\"hidden sm:inline\">Previous</span>\n            </button>\n            <span className=\"text-sm text-text-muted px-2\">\n              <span className=\"hidden sm:inline\">Page </span>\n              {page + 1} <span className=\"hidden sm:inline\">of</span>\n              <span className=\"sm:hidden\">/</span> {totalPages}\n            </span>\n            <button\n              type=\"button\"\n              onClick={() => setPage((p) => (p + 1 < totalPages ? p + 1 : p))}\n              disabled={page + 1 >= totalPages}\n              className=\"inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-button border border-border-subtle bg-bg-surface hover:bg-bg-sunken/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n            >\n              <span className=\"hidden sm:inline\">Next</span>\n              <ChevronRight className=\"size-4\" />\n            </button>\n          </div>\n        </div>\n      )}\n\n      <WebhookLogDetailModal\n        log={selectedLog}\n        onClose={() => setSelectedLog(null)}\n        onCreateRefund={handleCreateRefund}\n        isCreatingRefund={isCreatingFromWebhook}\n        canCreateRefund={\n          selectedLog\n            ? REFUND_ELIGIBLE_EVENTS.has(selectedLog.event) && Boolean(selectedLog.error)\n            : false\n        }\n      />\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -4,3 +4,4 @@ import "./TransactionsPage.js";
 import "./PaymentMethodsPage.js";
 import "./RefundsPage.js";
 import "./UserRefundsPage.js";
+import "./BillingWebhookLogsPage.js";