@fluid-app/portal-sdk 0.1.162 → 0.1.164

package/dist/{SubscriptionsScreen-C2iORyT_.cjs → SubscriptionsScreen-BdGF5OLE.cjs}

@@ -206,342 +206,6 @@ function getNextBillDisplay(subscription) {
 	return "N/A";
 }
 //#endregion
-//#region ../../subscriptions/ui/src/lib/format.ts
-/**
-* Format a number as currency (USD).
-*/
-function formatCurrency(value) {
-	return new Intl.NumberFormat("en-US", {
-		style: "currency",
-		currency: "USD"
-	}).format(value);
-}
-/**
-* Convert a snake_case or lowercase string to Start Case.
-* Replaces lodash startCase for simple status strings.
-*/
-function startCase(str) {
-	if (!str) return "";
-	return str.replace(/_/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
-}
-/**
-* Format a next bill date string to M/D/YYYY (UTC).
-*/
-function formatNextBillDate(nextBillDate) {
-	if (!nextBillDate) return "N/A";
-	const date = new Date(nextBillDate);
-	if (isNaN(date.getTime())) return "N/A";
-	return `${date.getUTCMonth() + 1}/${date.getUTCDate()}/${date.getUTCFullYear()}`;
-}
-//#endregion
-//#region ../../subscriptions/ui/src/lib/cn.ts
-function cn(...inputs) {
-	return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
-}
-//#endregion
-//#region ../../subscriptions/ui/src/components/status-pill.tsx
-const STATUS_COLORS = {
-	active: "bg-green-100 text-green-800",
-	paused: "bg-gray-100 text-gray-800",
-	cancelled: "bg-red-100 text-red-800",
-	pending: "bg-yellow-100 text-yellow-800",
-	inactive: "bg-gray-100 text-gray-800",
-	disabled: "bg-red-100 text-red-800",
-	past_due: "bg-gray-100 text-gray-800"
-};
-const STATUS_DOT_COLORS = {
-	active: "bg-green-500",
-	paused: "bg-gray-400",
-	cancelled: "bg-red-500",
-	pending: "bg-yellow-500",
-	inactive: "bg-gray-400",
-	disabled: "bg-red-500",
-	past_due: "bg-gray-400"
-};
-function StatusPill({ status, children }) {
-	const key = status?.toLowerCase() ?? "";
-	const pillColor = STATUS_COLORS[key] ?? "bg-gray-100 text-gray-800";
-	const dotColor = STATUS_DOT_COLORS[key] ?? "bg-gray-400";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: cn("inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium", pillColor),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: cn("h-1.5 w-1.5 rounded-full", dotColor) }), children]
-	});
-}
-//#endregion
-//#region ../../subscriptions/ui/src/components/subscriptions-list.tsx
-function SubscriptionsList({ customerId, onSubscriptionClick, t, pageSize = 10 }) {
-	const [currentPage, setCurrentPage] = (0, react.useState)(1);
-	const [statusFilter, setStatusFilter] = (0, react.useState)(null);
-	const [search, setSearch] = (0, react.useState)(null);
-	const [sortBy, setSortBy] = (0, react.useState)({
-		column: "next_bill_date",
-		direction: "desc"
-	});
-	const { data, isLoading } = useSubscriptions({
-		customerId: customerId ?? 0,
-		page: currentPage,
-		perPage: pageSize,
-		status: statusFilter,
-		search,
-		sortBy: sortBy.column,
-		sortDirection: sortBy.direction
-	}, { enabled: !!customerId });
-	(0, react.useEffect)(() => {
-		setCurrentPage(1);
-	}, [
-		statusFilter,
-		search,
-		sortBy
-	]);
-	const items = data?.subscriptions ?? [];
-	const totalItems = data?.meta?.pagination?.total_count ?? 0;
-	const totalPages = data?.meta?.pagination?.total_pages ?? 1;
-	const handleSubscriptionClick = (token) => {
-		if (token) onSubscriptionClick(token);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "border-border overflow-hidden rounded-lg border shadow-sm",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex flex-col gap-2 p-3 sm:flex-row sm:items-center sm:justify-between",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.ToggleGroup, {
-					type: "single",
-					value: statusFilter ?? "all",
-					onValueChange: (v) => {
-						if (v) setStatusFilter(v === "all" ? null : v);
-					},
-					variant: "ghost",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ToggleGroupItem, {
-							value: "all",
-							children: t("all")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ToggleGroupItem, {
-							value: "active",
-							children: t("active")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ToggleGroupItem, {
-							value: "inactive",
-							children: t("inactive")
-						})
-					]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "w-full max-w-sm",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchSort.SearchSort, {
-						searchValue: search ?? "",
-						onSearchChange: (v) => setSearch(v || null),
-						placeholder: t("search_subscriptions")
-					})
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "block md:hidden",
-				children: isLoading ? Array(5).fill(0).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "border-border border-b p-4",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex space-x-3",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-12 w-12 rounded-md" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex-1 space-y-2",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-3/4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-3 w-1/2" })]
-						})]
-					})
-				}, `skeleton-${index}`)) : items.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "text-muted-foreground px-3 py-8 text-center text-sm",
-					children: t("no_subscriptions_found")
-				}) : items.map((subscription) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "border-border hover:bg-accent cursor-pointer border-b p-4 transition-colors duration-200 ease-in-out last:border-b-0",
-					onClick: () => handleSubscriptionClick(subscription.subscription_token),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex items-start space-x-3",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-							src: subscription.variant?.product?.image_url,
-							alt: subscription.variant?.product?.title,
-							width: 48,
-							height: 48,
-							className: "h-12 w-12 flex-shrink-0 rounded-md object-cover"
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "w-0 min-w-0 flex-1",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-									className: "text-foreground truncate text-sm font-medium",
-									children: subscription.variant?.product?.title
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "mt-2 grid grid-cols-2 gap-x-4 gap-y-1 text-sm",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "text-muted-foreground block text-xs",
-										children: t("next_bill_date")
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "text-muted-foreground",
-										children: formatNextBillDate(subscription.next_bill_date ?? "")
-									})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "text-muted-foreground block text-xs",
-										children: t("price")
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "text-foreground font-medium",
-										children: formatCurrency(subscription.price * subscription.quantity)
-									})] })]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "mt-2",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "text-muted-foreground block text-xs",
-										children: t("status")
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusPill, {
-										status: subscription.status,
-										children: startCase(subscription.status) || t("unknown_status")
-									})]
-								})
-							]
-						})]
-					})
-				}, subscription.subscription_token))
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "hidden md:block",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Table, {
-					className: "min-w-full table-fixed",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("colgroup", { children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "w-[45%] min-w-[240px]" }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "w-[20%] min-w-[100px]" }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "w-[15%] min-w-[100px]" }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "w-[20%] min-w-[100px]" })
-						] }),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableHeader, {
-							className: "bg-muted",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.TableRow, {
-								className: "hover:bg-muted h-10",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_order_status_badge.TableColumn, {
-										label: t("product"),
-										sortable: false
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_order_status_badge.TableColumn, {
-										label: t("next_bill_date"),
-										sortBy: "next_bill_date",
-										sortData: sortBy,
-										onSortClick: (value) => setSortBy({
-											column: value,
-											direction: sortBy.direction === "asc" ? "desc" : "asc"
-										})
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_order_status_badge.TableColumn, {
-										label: t("price"),
-										sortable: false
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_order_status_badge.TableColumn, {
-										label: t("status"),
-										sortable: false
-									})
-								]
-							})
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableBody, {
-							className: "bg-background",
-							children: isLoading ? Array(5).fill(0).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.TableRow, { children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
-									className: "px-3 py-4",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "flex items-center space-x-2",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-9 w-9 rounded-md" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-32" })]
-									})
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
-									className: "px-3 py-4",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-24" })
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
-									className: "px-3 py-4",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-24" })
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
-									className: "px-3 py-4",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-16" })
-								})
-							] }, `skeleton-${index}`)) : items.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
-								colSpan: 4,
-								className: "text-muted-foreground px-3 py-8 text-center text-sm",
-								children: t("no_subscriptions_found")
-							}) }) : items.map((subscription) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.TableRow, {
-								className: "cursor-pointer",
-								onClick: () => handleSubscriptionClick(subscription.subscription_token),
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.TableCell, {
-										className: "text-muted-foreground flex max-w-[280px] items-center space-x-3 py-4 pr-3 pl-3 text-sm",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-											src: subscription.variant?.product?.image_url,
-											alt: subscription.variant?.product?.title,
-											width: 48,
-											height: 48,
-											className: "h-12 w-12 flex-shrink-0 rounded-md object-cover"
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: "text-foreground truncate text-sm font-medium",
-											children: subscription.variant?.product?.title
-										})]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
-										className: "text-muted-foreground px-3 py-4 text-sm whitespace-nowrap",
-										children: formatNextBillDate(subscription.next_bill_date ?? "")
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
-										className: "px-3 py-4 text-sm whitespace-nowrap",
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: "text-muted-foreground",
-											children: formatCurrency(subscription.price * subscription.quantity)
-										})
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
-										className: "px-3 py-4 text-sm whitespace-nowrap",
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusPill, {
-											status: subscription.status,
-											children: startCase(subscription.status) || t("unknown_status")
-										})
-									})
-								]
-							}, subscription.subscription_token))
-						})
-					]
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_order_status_badge.PaginationFooter, {
-				currentPage,
-				totalPages,
-				pageSize,
-				totalItems,
-				onPageChange: setCurrentPage,
-				t
-			})
-		]
-	});
-}
-//#endregion
-//#region ../../subscriptions/ui/src/screens/SubscriptionsListScreen.tsx
-function SubscriptionsListScreen$1({ customerId, onSubscriptionClick, t, isLoadingCustomer }) {
-	require_ScreenHeaderContext.useScreenHeaderBreadcrumbs((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Breadcrumb, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbList, {
-		className: "text-lg",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbPage, {
-			className: "font-semibold",
-			children: "Subscriptions"
-		}) })
-	}) }), []));
-	if (isLoadingCustomer) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "mx-auto max-w-7xl px-4 py-4 sm:px-6 sm:py-6 lg:px-10 lg:py-8",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "space-y-3",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-10 animate-pulse rounded" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-64 animate-pulse rounded" })]
-		})
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "mx-auto max-w-7xl px-4 py-4 sm:px-6 sm:py-6 lg:px-10 lg:py-8",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionsList, {
-			customerId,
-			onSubscriptionClick,
-			t
-		})
-	});
-}
-//#endregion
 //#region src/adapters/subscriptions-api-adapter.ts
 /**
 * Maps the BFF meta envelope to the port's expected shape.
@@ -795,43 +459,388 @@ function mapSubscriptionList(response) {
 		meta: mapMeta(response.meta ?? {})
 	};
 }
-/**
-* Creates a SubscriptionsApi-compatible adapter backed by the portal-tenant BFF.
-*
-* Uses async/await with explicit field mapping. The BFF returns simplified
-* subscription types compared to the full admin API; the adapter maps the
-* response envelope and provides runtime defaults for optional fields.
-*/
-function createPortalSubscriptionsAdapter(client) {
-	return {
-		fetchCustomerSubscriptions: async (params) => {
-			return mapSubscriptionList(await require_portal_tenant.subscriptions_list(client, {
-				"page[cursor]": params.cursor,
-				"page[limit]": params.limit ?? params.perPage
-			}));
-		},
-		fetchSubscription: async (subscriptionToken) => {
-			return mapSubscriptionDetail(await require_portal_tenant.subscriptions_show(client, subscriptionToken));
-		},
-		pauseSubscription: async (subscriptionToken, _params) => {
-			return mapSubscriptionDetail(await require_portal_tenant.subscriptions_pause(client, subscriptionToken));
-		},
-		resumeSubscription: async (subscriptionToken, _params) => {
-			return mapSubscriptionDetail(await require_portal_tenant.subscriptions_resume(client, subscriptionToken));
-		},
-		skipSubscription: async (subscriptionToken, _params) => {
-			return mapSubscriptionDetail(await require_portal_tenant.subscriptions_skip(client, subscriptionToken));
-		},
-		cancelSubscription: async (subscriptionToken, _customerId) => {
-			return mapSubscriptionDetail(await require_portal_tenant.subscriptions_cancel(client, subscriptionToken));
-		},
-		reactivateSubscription: async (subscriptionToken, _params) => {
-			return mapSubscriptionDetail(await require_portal_tenant.subscriptions_reactivate(client, subscriptionToken));
-		},
-		updateSubscriptionInfo: async (subscriptionToken, body) => {
-			return mapSubscriptionDetail(await require_portal_tenant.subscriptions_update(client, subscriptionToken, { subscription: { payment_method_id: body.payment_method_id } }));
-		}
-	};
+/**
+* Creates a SubscriptionsApi-compatible adapter backed by the portal-tenant BFF.
+*
+* Uses async/await with explicit field mapping. The BFF returns simplified
+* subscription types compared to the full admin API; the adapter maps the
+* response envelope and provides runtime defaults for optional fields.
+*/
+function createPortalSubscriptionsAdapter(client) {
+	return {
+		fetchCustomerSubscriptions: async (params) => {
+			return mapSubscriptionList(await require_portal_tenant.subscriptions_list(client, {
+				"page[cursor]": params.cursor,
+				"page[limit]": params.limit ?? params.perPage
+			}));
+		},
+		fetchSubscription: async (subscriptionToken) => {
+			return mapSubscriptionDetail(await require_portal_tenant.subscriptions_show(client, subscriptionToken));
+		},
+		pauseSubscription: async (subscriptionToken, _params) => {
+			return mapSubscriptionDetail(await require_portal_tenant.subscriptions_pause(client, subscriptionToken));
+		},
+		resumeSubscription: async (subscriptionToken, _params) => {
+			return mapSubscriptionDetail(await require_portal_tenant.subscriptions_resume(client, subscriptionToken));
+		},
+		skipSubscription: async (subscriptionToken, _params) => {
+			return mapSubscriptionDetail(await require_portal_tenant.subscriptions_skip(client, subscriptionToken));
+		},
+		cancelSubscription: async (subscriptionToken, _customerId) => {
+			return mapSubscriptionDetail(await require_portal_tenant.subscriptions_cancel(client, subscriptionToken));
+		},
+		reactivateSubscription: async (subscriptionToken, _params) => {
+			return mapSubscriptionDetail(await require_portal_tenant.subscriptions_reactivate(client, subscriptionToken));
+		},
+		updateSubscriptionInfo: async (subscriptionToken, body) => {
+			return mapSubscriptionDetail(await require_portal_tenant.subscriptions_update(client, subscriptionToken, { subscription: { payment_method_id: body.payment_method_id } }));
+		}
+	};
+}
+//#endregion
+//#region src/subscriptions/PortalSubscriptionsApiProvider.tsx
+function PortalSubscriptionsApiProvider({ children }) {
+	const client = require_PortalTenantClientProvider.usePortalTenantClient();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionsCoreProvider, {
+		api: (0, react.useMemo)(() => createPortalSubscriptionsAdapter(client), [client]),
+		children
+	});
+}
+//#endregion
+//#region ../../subscriptions/ui/src/lib/format.ts
+/**
+* Format a number as currency (USD).
+*/
+function formatCurrency(value) {
+	return new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency: "USD"
+	}).format(value);
+}
+/**
+* Convert a snake_case or lowercase string to Start Case.
+* Replaces lodash startCase for simple status strings.
+*/
+function startCase(str) {
+	if (!str) return "";
+	return str.replace(/_/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
+}
+/**
+* Format a next bill date string to M/D/YYYY (UTC).
+*/
+function formatNextBillDate(nextBillDate) {
+	if (!nextBillDate) return "N/A";
+	const date = new Date(nextBillDate);
+	if (isNaN(date.getTime())) return "N/A";
+	return `${date.getUTCMonth() + 1}/${date.getUTCDate()}/${date.getUTCFullYear()}`;
+}
+//#endregion
+//#region ../../subscriptions/ui/src/lib/cn.ts
+function cn(...inputs) {
+	return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
+}
+//#endregion
+//#region ../../subscriptions/ui/src/components/status-pill.tsx
+const STATUS_COLORS = {
+	active: "bg-green-100 text-green-800",
+	paused: "bg-gray-100 text-gray-800",
+	cancelled: "bg-red-100 text-red-800",
+	pending: "bg-yellow-100 text-yellow-800",
+	inactive: "bg-gray-100 text-gray-800",
+	disabled: "bg-red-100 text-red-800",
+	past_due: "bg-gray-100 text-gray-800"
+};
+const STATUS_DOT_COLORS = {
+	active: "bg-green-500",
+	paused: "bg-gray-400",
+	cancelled: "bg-red-500",
+	pending: "bg-yellow-500",
+	inactive: "bg-gray-400",
+	disabled: "bg-red-500",
+	past_due: "bg-gray-400"
+};
+function StatusPill({ status, children }) {
+	const key = status?.toLowerCase() ?? "";
+	const pillColor = STATUS_COLORS[key] ?? "bg-gray-100 text-gray-800";
+	const dotColor = STATUS_DOT_COLORS[key] ?? "bg-gray-400";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: cn("inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium", pillColor),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: cn("h-1.5 w-1.5 rounded-full", dotColor) }), children]
+	});
+}
+//#endregion
+//#region ../../subscriptions/ui/src/components/subscriptions-list.tsx
+function SubscriptionsList({ customerId, onSubscriptionClick, t, pageSize = 10 }) {
+	const [currentPage, setCurrentPage] = (0, react.useState)(1);
+	const [statusFilter, setStatusFilter] = (0, react.useState)(null);
+	const [search, setSearch] = (0, react.useState)(null);
+	const [sortBy, setSortBy] = (0, react.useState)({
+		column: "next_bill_date",
+		direction: "desc"
+	});
+	const { data, isLoading } = useSubscriptions({
+		customerId: customerId ?? 0,
+		page: currentPage,
+		perPage: pageSize,
+		status: statusFilter,
+		search,
+		sortBy: sortBy.column,
+		sortDirection: sortBy.direction
+	}, { enabled: !!customerId });
+	(0, react.useEffect)(() => {
+		setCurrentPage(1);
+	}, [
+		statusFilter,
+		search,
+		sortBy
+	]);
+	const items = data?.subscriptions ?? [];
+	const totalItems = data?.meta?.pagination?.total_count ?? 0;
+	const totalPages = data?.meta?.pagination?.total_pages ?? 1;
+	const handleSubscriptionClick = (token) => {
+		if (token) onSubscriptionClick(token);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "border-border overflow-hidden rounded-lg border shadow-sm",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-2 p-3 sm:flex-row sm:items-center sm:justify-between",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.ToggleGroup, {
+					type: "single",
+					value: statusFilter ?? "all",
+					onValueChange: (v) => {
+						if (v) setStatusFilter(v === "all" ? null : v);
+					},
+					variant: "ghost",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ToggleGroupItem, {
+							value: "all",
+							children: t("all")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ToggleGroupItem, {
+							value: "active",
+							children: t("active")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ToggleGroupItem, {
+							value: "inactive",
+							children: t("inactive")
+						})
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "w-full max-w-sm",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchSort.SearchSort, {
+						searchValue: search ?? "",
+						onSearchChange: (v) => setSearch(v || null),
+						placeholder: t("search_subscriptions")
+					})
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "block md:hidden",
+				children: isLoading ? Array(5).fill(0).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "border-border border-b p-4",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex space-x-3",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-12 w-12 rounded-md" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex-1 space-y-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-3/4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-3 w-1/2" })]
+						})]
+					})
+				}, `skeleton-${index}`)) : items.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-muted-foreground px-3 py-8 text-center text-sm",
+					children: t("no_subscriptions_found")
+				}) : items.map((subscription) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "border-border hover:bg-accent cursor-pointer border-b p-4 transition-colors duration-200 ease-in-out last:border-b-0",
+					onClick: () => handleSubscriptionClick(subscription.subscription_token),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-start space-x-3",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+							src: subscription.variant?.product?.image_url,
+							alt: subscription.variant?.product?.title,
+							width: 48,
+							height: 48,
+							className: "h-12 w-12 flex-shrink-0 rounded-md object-cover"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "w-0 min-w-0 flex-1",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "text-foreground truncate text-sm font-medium",
+									children: subscription.variant?.product?.title
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "mt-2 grid grid-cols-2 gap-x-4 gap-y-1 text-sm",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-muted-foreground block text-xs",
+										children: t("next_bill_date")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-muted-foreground",
+										children: formatNextBillDate(subscription.next_bill_date ?? "")
+									})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-muted-foreground block text-xs",
+										children: t("price")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-foreground font-medium",
+										children: formatCurrency(subscription.price * subscription.quantity)
+									})] })]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "mt-2",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-muted-foreground block text-xs",
+										children: t("status")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusPill, {
+										status: subscription.status,
+										children: startCase(subscription.status) || t("unknown_status")
+									})]
+								})
+							]
+						})]
+					})
+				}, subscription.subscription_token))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "hidden md:block",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Table, {
+					className: "min-w-full table-fixed",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("colgroup", { children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "w-[45%] min-w-[240px]" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "w-[20%] min-w-[100px]" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "w-[15%] min-w-[100px]" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "w-[20%] min-w-[100px]" })
+						] }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableHeader, {
+							className: "bg-muted",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.TableRow, {
+								className: "hover:bg-muted h-10",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_order_status_badge.TableColumn, {
+										label: t("product"),
+										sortable: false
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_order_status_badge.TableColumn, {
+										label: t("next_bill_date"),
+										sortBy: "next_bill_date",
+										sortData: sortBy,
+										onSortClick: (value) => setSortBy({
+											column: value,
+											direction: sortBy.direction === "asc" ? "desc" : "asc"
+										})
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_order_status_badge.TableColumn, {
+										label: t("price"),
+										sortable: false
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_order_status_badge.TableColumn, {
+										label: t("status"),
+										sortable: false
+									})
+								]
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableBody, {
+							className: "bg-background",
+							children: isLoading ? Array(5).fill(0).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.TableRow, { children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
+									className: "px-3 py-4",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "flex items-center space-x-2",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-9 w-9 rounded-md" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-32" })]
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
+									className: "px-3 py-4",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-24" })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
+									className: "px-3 py-4",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-24" })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
+									className: "px-3 py-4",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-16" })
+								})
+							] }, `skeleton-${index}`)) : items.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
+								colSpan: 4,
+								className: "text-muted-foreground px-3 py-8 text-center text-sm",
+								children: t("no_subscriptions_found")
+							}) }) : items.map((subscription) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.TableRow, {
+								className: "cursor-pointer",
+								onClick: () => handleSubscriptionClick(subscription.subscription_token),
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.TableCell, {
+										className: "text-muted-foreground flex max-w-[280px] items-center space-x-3 py-4 pr-3 pl-3 text-sm",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+											src: subscription.variant?.product?.image_url,
+											alt: subscription.variant?.product?.title,
+											width: 48,
+											height: 48,
+											className: "h-12 w-12 flex-shrink-0 rounded-md object-cover"
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "text-foreground truncate text-sm font-medium",
+											children: subscription.variant?.product?.title
+										})]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
+										className: "text-muted-foreground px-3 py-4 text-sm whitespace-nowrap",
+										children: formatNextBillDate(subscription.next_bill_date ?? "")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
+										className: "px-3 py-4 text-sm whitespace-nowrap",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "text-muted-foreground",
+											children: formatCurrency(subscription.price * subscription.quantity)
+										})
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
+										className: "px-3 py-4 text-sm whitespace-nowrap",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusPill, {
+											status: subscription.status,
+											children: startCase(subscription.status) || t("unknown_status")
+										})
+									})
+								]
+							}, subscription.subscription_token))
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_order_status_badge.PaginationFooter, {
+				currentPage,
+				totalPages,
+				pageSize,
+				totalItems,
+				onPageChange: setCurrentPage,
+				t
+			})
+		]
+	});
+}
+//#endregion
+//#region ../../subscriptions/ui/src/screens/SubscriptionsListScreen.tsx
+function SubscriptionsListScreen$1({ customerId, onSubscriptionClick, t, isLoadingCustomer }) {
+	require_ScreenHeaderContext.useScreenHeaderBreadcrumbs((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Breadcrumb, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbList, {
+		className: "text-lg",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbPage, {
+			className: "font-semibold",
+			children: "Subscriptions"
+		}) })
+	}) }), []));
+	if (isLoadingCustomer) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "mx-auto max-w-7xl px-4 py-4 sm:px-6 sm:py-6 lg:px-10 lg:py-8",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "space-y-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-10 animate-pulse rounded" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-64 animate-pulse rounded" })]
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "mx-auto max-w-7xl px-4 py-4 sm:px-6 sm:py-6 lg:px-10 lg:py-8",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionsList, {
+			customerId,
+			onSubscriptionClick,
+			t
+		})
+	});
 }
 //#endregion
 //#region src/screens/SubscriptionsListScreen.tsx
@@ -854,17 +863,12 @@ const translations = {
 	pagination: "Pagination"
 };
 function SubscriptionsListScreen({ customerId, isLoadingCustomer }) {
-	const client = require_PortalTenantClientProvider.usePortalTenantClient();
-	const subscriptionsApi = (0, react.useMemo)(() => createPortalSubscriptionsAdapter(client), [client]);
 	const { navigate } = require_AppNavigationContext.useAppNavigation();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionsCoreProvider, {
-		api: subscriptionsApi,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionsListScreen$1, {
-			customerId,
-			isLoadingCustomer,
-			onSubscriptionClick: (subscriptionToken) => navigate(`subscriptions/${subscriptionToken}`),
-			t: (key) => translations[key] ?? key
-		})
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionsListScreen$1, {
+		customerId,
+		isLoadingCustomer,
+		onSubscriptionClick: (subscriptionToken) => navigate(`subscriptions/${subscriptionToken}`),
+		t: (key) => translations[key] ?? key
 	});
 }
 //#endregion
@@ -1465,28 +1469,23 @@ function SubscriptionDetailScreen$1({ token, onNavigateToList, onNotFound, onErr
 //#endregion
 //#region src/screens/SubscriptionDetailScreen.tsx
 function SubscriptionDetailScreen({ token, onToast }) {
-	const client = require_PortalTenantClientProvider.usePortalTenantClient();
-	const subscriptionsApi = (0, react.useMemo)(() => createPortalSubscriptionsAdapter(client), [client]);
 	const { navigate } = require_AppNavigationContext.useAppNavigation();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionsCoreProvider, {
-		api: subscriptionsApi,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionDetailScreen$1, {
-			token,
-			onNavigateToList: () => navigate("subscriptions"),
-			onNotFound: () => {
-				onToast("Subscription not found", "warning");
-				navigate("subscriptions");
-			},
-			onError: (err) => {
-				onToast(`Failed to load subscription: ${err instanceof Error ? err.message : "An error occurred"}`, "error");
-			},
-			onSuccess: (message) => {
-				onToast(message, "success");
-			},
-			onMutationError: (message, err) => {
-				onToast(`${message}: ${err instanceof Error ? err.message : "An error occurred"}`, "error");
-			}
-		})
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionDetailScreen$1, {
+		token,
+		onNavigateToList: () => navigate("subscriptions"),
+		onNotFound: () => {
+			onToast("Subscription not found", "warning");
+			navigate("subscriptions");
+		},
+		onError: (err) => {
+			onToast(`Failed to load subscription: ${err instanceof Error ? err.message : "An error occurred"}`, "error");
+		},
+		onSuccess: (message) => {
+			onToast(message, "success");
+		},
+		onMutationError: (message, err) => {
+			onToast(`${message}: ${err instanceof Error ? err.message : "An error occurred"}`, "error");
+		}
 	});
 }
 //#endregion
@@ -1505,17 +1504,17 @@ function SubscriptionsScreen({ onToast, background, textColor, accentColor, padd
 	const isLoadingCustomer = account === void 0;
 	if (isDetailView) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		...divProps,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionDetailScreen, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PortalSubscriptionsApiProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionDetailScreen, {
 			token: detailToken,
 			onToast: effectiveToast
-		})
+		}) })
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		...divProps,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionsListScreen, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PortalSubscriptionsApiProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionsListScreen, {
 			customerId,
 			isLoadingCustomer
-		})
+		}) })
 	});
 }
 const subscriptionsScreenPropertySchema = {
@@ -1541,4 +1540,4 @@ Object.defineProperty(exports, "subscriptionsScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=SubscriptionsScreen-C2iORyT_.cjs.map
+//# sourceMappingURL=SubscriptionsScreen-BdGF5OLE.cjs.map