@nubitio/admin 0.5.23 → 0.5.24

package/dist/index.cjs

@@ -481,6 +481,190 @@ function FeatureGate({ featureKey, ...props }) {
 	});
 }
 //#endregion
+//#region packages/admin/quota/QuotaUsageBanner.tsx
+function QuotaUsageBanner({ count, max, unitLabel, planLabel, atLimitMessage, nearLimitMessage, defaultMessage, upgradeHref, upgradeLabel = "View plans", className = "" }) {
+	if (max <= 0) return null;
+	const atLimit = count >= max;
+	const nearLimit = count === max - 1;
+	const tone = atLimit ? "limit" : nearLimit ? "warn" : "default";
+	const detail = atLimit ? atLimitMessage ?? `You reached your ${planLabel ?? "plan"} limit.` : nearLimit ? nearLimitMessage ?? `Only 1 ${unitLabel} slot left on your ${planLabel ?? "plan"}.` : defaultMessage ?? `${planLabel ?? "Plan"} usage.`;
+	const upgradeLink = upgradeHref ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		className: "nb-quota-banner__cta",
+		href: upgradeHref,
+		children: upgradeLabel
+	}) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `nb-quota-banner nb-quota-banner--${tone}${className ? ` ${className}` : ""}`,
+		role: "status",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "nb-quota-banner__copy",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", { children: [
+				count,
+				" / ",
+				max,
+				" ",
+				unitLabel
+			] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: detail })]
+		}), (atLimit || nearLimit) && upgradeLink]
+	});
+}
+function quotaUsageAboveGrid(banner) {
+	return () => banner;
+}
+//#endregion
+//#region packages/admin/billing/PlanPanel.tsx
+function formatTrialEnds(iso) {
+	const date = new Date(iso);
+	if (Number.isNaN(date.getTime())) return iso;
+	return new Intl.DateTimeFormat(void 0, { dateStyle: "medium" }).format(date);
+}
+function PlanPanel({ plans, currentPlanId, subscriptionStatus, trialEndsAt, onSelectPlan, selectingPlanId = null, labels, className = "" }) {
+	const title = labels?.title ?? "Plans";
+	const subtitle = labels?.subtitle ?? "Choose the plan that fits your team.";
+	const currentBadge = labels?.currentBadge ?? "Current plan";
+	const selectingLabel = labels?.selecting ?? "Updating…";
+	let statusLine = null;
+	if (subscriptionStatus === "trialing" && trialEndsAt) statusLine = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: "nb-plan-panel__status",
+		children: (labels?.trialEnds ?? "Trial ends {date}").replace("{date}", formatTrialEnds(trialEndsAt))
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: `nb-plan-panel${className ? ` ${className}` : ""}`,
+		"aria-labelledby": "plan-panel-title",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+			className: "nb-plan-panel__header",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+					id: "plan-panel-title",
+					className: "nb-plan-panel__title",
+					children: title
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "nb-plan-panel__subtitle",
+					children: subtitle
+				}),
+				statusLine
+			] })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "nb-plan-panel__grid",
+			role: "list",
+			children: plans.map((plan) => {
+				const isCurrent = plan.id === currentPlanId;
+				const isSelecting = selectingPlanId === plan.id;
+				const ctaLabel = plan.ctaLabel ?? (isCurrent ? currentBadge : `Choose ${plan.name}`);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
+					role: "listitem",
+					className: [
+						"nb-plan-card",
+						plan.highlighted ? "nb-plan-card--highlighted" : "",
+						isCurrent ? "nb-plan-card--current" : ""
+					].filter(Boolean).join(" "),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "nb-plan-card__head",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+								className: "nb-plan-card__name",
+								children: plan.name
+							}), isCurrent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Badge, {
+								variant: "primary",
+								size: "sm",
+								pill: true,
+								children: currentBadge
+							}) : null]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "nb-plan-card__price",
+							children: plan.priceLabel
+						}),
+						plan.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "nb-plan-card__description",
+							children: plan.description
+						}) : null,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+							className: "nb-plan-card__features",
+							children: plan.features.map((feature) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: feature }, feature))
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Button, {
+							variant: plan.highlighted && !isCurrent ? "primary" : "secondary",
+							size: "sm",
+							disabled: isCurrent || !onSelectPlan || isSelecting,
+							onClick: () => void onSelectPlan?.(plan.id),
+							children: isSelecting ? selectingLabel : ctaLabel
+						})
+					]
+				}, plan.id);
+			})
+		})]
+	});
+}
+//#endregion
+//#region packages/admin/quota/parseQuotaError.ts
+function readErrorDetail(error) {
+	if (typeof error !== "object" || error === null) return "";
+	const record = error;
+	return record.data?.detail ?? record.data?.message ?? record.message ?? "";
+}
+function parseQuotaError(error) {
+	if (typeof error !== "object" || error === null) return null;
+	if (error.status !== 429) return null;
+	const detail = readErrorDetail(error);
+	const match = detail.match(/Quota exceeded for "([^"]+)": (\d+)\/(\d+)/);
+	if (!match) return {
+		resource: "unknown",
+		current: 0,
+		limit: 0,
+		message: detail || "Plan limit reached."
+	};
+	return {
+		resource: match[1],
+		current: Number(match[2]),
+		limit: Number(match[3]),
+		message: detail
+	};
+}
+function quotaErrorToastMessage(quota, labels) {
+	const label = labels?.[quota.resource] ?? quota.resource;
+	return `Plan limit reached: ${quota.current}/${quota.limit} ${label}. Upgrade your plan to continue.`;
+}
+//#endregion
+//#region packages/admin/quota/useQuotaUsage.ts
+function readCollectionTotal(body) {
+	if (Array.isArray(body)) return body.length;
+	if (typeof body !== "object" || body === null) return 0;
+	const record = body;
+	const member = record["hydra:member"] ?? record["member"];
+	const listed = Array.isArray(member) ? member.length : 0;
+	return Number(record["hydra:totalItems"] ?? record["totalItems"] ?? listed);
+}
+function useQuotaUsage({ featureKey, collectionPath, staleTimeMs = 1e4 }) {
+	const http = (0, _nubitio_core.useCoreHttpClient)();
+	const config = useFeatureConfig(featureKey);
+	const max = Number(config.max ?? 0);
+	const query = (0, _tanstack_react_query.useQuery)({
+		queryKey: [
+			"quota-usage",
+			featureKey,
+			collectionPath
+		],
+		queryFn: async () => {
+			return readCollectionTotal((await http.get(`${collectionPath}?itemsPerPage=100`, { headers: { Accept: "application/ld+json" } })).data);
+		},
+		staleTime: staleTimeMs
+	});
+	const count = query.data ?? 0;
+	const atLimit = max > 0 && count >= max;
+	const nearLimit = max > 0 && count === max - 1;
+	const refetch = (0, react.useCallback)(() => query.refetch(), [query]);
+	return {
+		count,
+		max,
+		atLimit,
+		nearLimit,
+		loading: query.isLoading,
+		refetch
+	};
+}
+//#endregion
 //#region packages/admin/auth/LoginPage.tsx
 function joinApiPath$2(apiBaseUrl, path) {
 	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
@@ -961,6 +1145,8 @@ exports.AdminShell = AdminShell;
 exports.AdminSidebarMenu = AdminSidebarMenu;
 exports.FeatureGate = FeatureGate;
 exports.LoginPage = LoginPage;
+exports.PlanPanel = PlanPanel;
+exports.QuotaUsageBanner = QuotaUsageBanner;
 exports.RegisterPage = RegisterPage;
 exports.SessionProvider = SessionProvider;
 exports.StaticSessionProvider = StaticSessionProvider;
@@ -968,9 +1154,13 @@ exports.ToastHost = ToastHost;
 exports.createNubitApp = createNubitApp;
 exports.filterMenuByRoles = filterMenuByRoles;
 exports.hasAnyRole = hasAnyRole;
+exports.parseQuotaError = parseQuotaError;
+exports.quotaErrorToastMessage = quotaErrorToastMessage;
+exports.quotaUsageAboveGrid = quotaUsageAboveGrid;
 exports.useAppRuntime = useAppRuntime;
 exports.useFeature = useFeature;
 exports.useFeatureConfig = useFeatureConfig;
+exports.useQuotaUsage = useQuotaUsage;
 exports.useRuntimeConfig = useRuntimeConfig;
 exports.useScreenSize = useScreenSize;
 exports.useScreenSizeClass = useScreenSizeClass;

package/dist/index.d.cts

@@ -168,6 +168,100 @@ declare function FeatureGate({
   ...props
 }: FeatureGateProps): React$1.JSX.Element;
 //#endregion
+//#region packages/admin/quota/QuotaUsageBanner.d.ts
+interface QuotaUsageBannerProps {
+  count: number;
+  max: number;
+  unitLabel: string;
+  planLabel?: string;
+  atLimitMessage?: string;
+  nearLimitMessage?: string;
+  defaultMessage?: string;
+  upgradeHref?: string;
+  upgradeLabel?: string;
+  className?: string;
+}
+declare function QuotaUsageBanner({
+  count,
+  max,
+  unitLabel,
+  planLabel,
+  atLimitMessage,
+  nearLimitMessage,
+  defaultMessage,
+  upgradeHref,
+  upgradeLabel,
+  className
+}: QuotaUsageBannerProps): import("react").JSX.Element | null;
+declare function quotaUsageAboveGrid(banner: ReactNode): () => ReactNode;
+//#endregion
+//#region packages/admin/billing/PlanPanel.d.ts
+interface PlanDefinition {
+  id: string;
+  name: string;
+  priceLabel: string;
+  description?: string;
+  features: string[];
+  highlighted?: boolean;
+  ctaLabel?: string;
+}
+interface PlanPanelLabels {
+  title?: string;
+  subtitle?: string;
+  currentBadge?: string;
+  trialEnds?: string;
+  selecting?: string;
+}
+interface PlanPanelProps {
+  plans: PlanDefinition[];
+  currentPlanId: string;
+  subscriptionStatus?: string;
+  trialEndsAt?: string | null;
+  onSelectPlan?: (planId: string) => void | Promise<void>;
+  selectingPlanId?: string | null;
+  labels?: PlanPanelLabels;
+  className?: string;
+}
+declare function PlanPanel({
+  plans,
+  currentPlanId,
+  subscriptionStatus,
+  trialEndsAt,
+  onSelectPlan,
+  selectingPlanId,
+  labels,
+  className
+}: PlanPanelProps): import("react").JSX.Element;
+//#endregion
+//#region packages/admin/quota/parseQuotaError.d.ts
+interface ParsedQuotaError {
+  resource: string;
+  current: number;
+  limit: number;
+  message: string;
+}
+declare function parseQuotaError(error: unknown): ParsedQuotaError | null;
+declare function quotaErrorToastMessage(quota: ParsedQuotaError, labels?: Partial<Record<string, string>>): string;
+//#endregion
+//#region packages/admin/quota/useQuotaUsage.d.ts
+interface UseQuotaUsageOptions {
+  featureKey: string;
+  collectionPath: string;
+  staleTimeMs?: number;
+}
+declare function useQuotaUsage({
+  featureKey,
+  collectionPath,
+  staleTimeMs
+}: UseQuotaUsageOptions): {
+  count: number;
+  max: number;
+  atLimit: boolean;
+  nearLimit: boolean;
+  loading: boolean;
+  refetch: () => Promise<import("@tanstack/react-query").QueryObserverResult<number, Error>>;
+};
+//#endregion
 //#region packages/admin/auth/LoginPage.d.ts
 interface LoginPageProps {
   onLoggedIn: () => void;
@@ -350,4 +444,4 @@ declare function hasAnyRole(required: string | string[] | undefined, roles: stri
  */
 declare function filterMenuByRoles(items: NubitAppMenuItem[], roles: string[]): AdminMenuItem[];
 //#endregion
-export { AdminHeader, type AdminHeaderAction, type AdminHeaderProps, type AdminMenuItem, type AdminMenuSubItem, AdminShell, type AdminShellProps, AdminSidebarMenu, type AdminSidebarMenuProps, type AdminSidebarMenuSelectEvent, type AppProfile, type CreateNubitAppConfig, FeatureGate, type FeatureGateProps, LoginPage, type LoginPageProps, type NotificationType, type NubitApp, type NubitAppMenuContext, type NubitAppMenuItem, type NubitAppMenuSubItem, type NubitAppRoute, type NubitAppUserMenuContext, type RegisterField, type RegisterFieldType, RegisterPage, type RegisterPageProps, type RegisterSelectOption, type RuntimeConfig, type RuntimeConfigState, type SessionContextValue, type SessionFeatureEntitlement, type SessionProfile, SessionProvider, type SessionProviderConfig, type SessionState, type SessionTenant, StaticSessionProvider, ToastHost, type ToastHostProps, type ToastItem, type UseRuntimeConfigOptions, createNubitApp, filterMenuByRoles, hasAnyRole, useAppRuntime, useFeature, useFeatureConfig, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };
+export { AdminHeader, type AdminHeaderAction, type AdminHeaderProps, type AdminMenuItem, type AdminMenuSubItem, AdminShell, type AdminShellProps, AdminSidebarMenu, type AdminSidebarMenuProps, type AdminSidebarMenuSelectEvent, type AppProfile, type CreateNubitAppConfig, FeatureGate, type FeatureGateProps, LoginPage, type LoginPageProps, type NotificationType, type NubitApp, type NubitAppMenuContext, type NubitAppMenuItem, type NubitAppMenuSubItem, type NubitAppRoute, type NubitAppUserMenuContext, type ParsedQuotaError, type PlanDefinition, PlanPanel, type PlanPanelLabels, type PlanPanelProps, QuotaUsageBanner, type QuotaUsageBannerProps, type RegisterField, type RegisterFieldType, RegisterPage, type RegisterPageProps, type RegisterSelectOption, type RuntimeConfig, type RuntimeConfigState, type SessionContextValue, type SessionFeatureEntitlement, type SessionProfile, SessionProvider, type SessionProviderConfig, type SessionState, type SessionTenant, StaticSessionProvider, ToastHost, type ToastHostProps, type ToastItem, type UseQuotaUsageOptions, type UseRuntimeConfigOptions, createNubitApp, filterMenuByRoles, hasAnyRole, parseQuotaError, quotaErrorToastMessage, quotaUsageAboveGrid, useAppRuntime, useFeature, useFeatureConfig, useQuotaUsage, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };

package/dist/index.d.mts

@@ -168,6 +168,100 @@ declare function FeatureGate({
   ...props
 }: FeatureGateProps): React$1.JSX.Element;
 //#endregion
+//#region packages/admin/quota/QuotaUsageBanner.d.ts
+interface QuotaUsageBannerProps {
+  count: number;
+  max: number;
+  unitLabel: string;
+  planLabel?: string;
+  atLimitMessage?: string;
+  nearLimitMessage?: string;
+  defaultMessage?: string;
+  upgradeHref?: string;
+  upgradeLabel?: string;
+  className?: string;
+}
+declare function QuotaUsageBanner({
+  count,
+  max,
+  unitLabel,
+  planLabel,
+  atLimitMessage,
+  nearLimitMessage,
+  defaultMessage,
+  upgradeHref,
+  upgradeLabel,
+  className
+}: QuotaUsageBannerProps): import("react").JSX.Element | null;
+declare function quotaUsageAboveGrid(banner: ReactNode): () => ReactNode;
+//#endregion
+//#region packages/admin/billing/PlanPanel.d.ts
+interface PlanDefinition {
+  id: string;
+  name: string;
+  priceLabel: string;
+  description?: string;
+  features: string[];
+  highlighted?: boolean;
+  ctaLabel?: string;
+}
+interface PlanPanelLabels {
+  title?: string;
+  subtitle?: string;
+  currentBadge?: string;
+  trialEnds?: string;
+  selecting?: string;
+}
+interface PlanPanelProps {
+  plans: PlanDefinition[];
+  currentPlanId: string;
+  subscriptionStatus?: string;
+  trialEndsAt?: string | null;
+  onSelectPlan?: (planId: string) => void | Promise<void>;
+  selectingPlanId?: string | null;
+  labels?: PlanPanelLabels;
+  className?: string;
+}
+declare function PlanPanel({
+  plans,
+  currentPlanId,
+  subscriptionStatus,
+  trialEndsAt,
+  onSelectPlan,
+  selectingPlanId,
+  labels,
+  className
+}: PlanPanelProps): import("react").JSX.Element;
+//#endregion
+//#region packages/admin/quota/parseQuotaError.d.ts
+interface ParsedQuotaError {
+  resource: string;
+  current: number;
+  limit: number;
+  message: string;
+}
+declare function parseQuotaError(error: unknown): ParsedQuotaError | null;
+declare function quotaErrorToastMessage(quota: ParsedQuotaError, labels?: Partial<Record<string, string>>): string;
+//#endregion
+//#region packages/admin/quota/useQuotaUsage.d.ts
+interface UseQuotaUsageOptions {
+  featureKey: string;
+  collectionPath: string;
+  staleTimeMs?: number;
+}
+declare function useQuotaUsage({
+  featureKey,
+  collectionPath,
+  staleTimeMs
+}: UseQuotaUsageOptions): {
+  count: number;
+  max: number;
+  atLimit: boolean;
+  nearLimit: boolean;
+  loading: boolean;
+  refetch: () => Promise<import("@tanstack/react-query").QueryObserverResult<number, Error>>;
+};
+//#endregion
 //#region packages/admin/auth/LoginPage.d.ts
 interface LoginPageProps {
   onLoggedIn: () => void;
@@ -350,4 +444,4 @@ declare function hasAnyRole(required: string | string[] | undefined, roles: stri
  */
 declare function filterMenuByRoles(items: NubitAppMenuItem[], roles: string[]): AdminMenuItem[];
 //#endregion
-export { AdminHeader, type AdminHeaderAction, type AdminHeaderProps, type AdminMenuItem, type AdminMenuSubItem, AdminShell, type AdminShellProps, AdminSidebarMenu, type AdminSidebarMenuProps, type AdminSidebarMenuSelectEvent, type AppProfile, type CreateNubitAppConfig, FeatureGate, type FeatureGateProps, LoginPage, type LoginPageProps, type NotificationType, type NubitApp, type NubitAppMenuContext, type NubitAppMenuItem, type NubitAppMenuSubItem, type NubitAppRoute, type NubitAppUserMenuContext, type RegisterField, type RegisterFieldType, RegisterPage, type RegisterPageProps, type RegisterSelectOption, type RuntimeConfig, type RuntimeConfigState, type SessionContextValue, type SessionFeatureEntitlement, type SessionProfile, SessionProvider, type SessionProviderConfig, type SessionState, type SessionTenant, StaticSessionProvider, ToastHost, type ToastHostProps, type ToastItem, type UseRuntimeConfigOptions, createNubitApp, filterMenuByRoles, hasAnyRole, useAppRuntime, useFeature, useFeatureConfig, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };
+export { AdminHeader, type AdminHeaderAction, type AdminHeaderProps, type AdminMenuItem, type AdminMenuSubItem, AdminShell, type AdminShellProps, AdminSidebarMenu, type AdminSidebarMenuProps, type AdminSidebarMenuSelectEvent, type AppProfile, type CreateNubitAppConfig, FeatureGate, type FeatureGateProps, LoginPage, type LoginPageProps, type NotificationType, type NubitApp, type NubitAppMenuContext, type NubitAppMenuItem, type NubitAppMenuSubItem, type NubitAppRoute, type NubitAppUserMenuContext, type ParsedQuotaError, type PlanDefinition, PlanPanel, type PlanPanelLabels, type PlanPanelProps, QuotaUsageBanner, type QuotaUsageBannerProps, type RegisterField, type RegisterFieldType, RegisterPage, type RegisterPageProps, type RegisterSelectOption, type RuntimeConfig, type RuntimeConfigState, type SessionContextValue, type SessionFeatureEntitlement, type SessionProfile, SessionProvider, type SessionProviderConfig, type SessionState, type SessionTenant, StaticSessionProvider, ToastHost, type ToastHostProps, type ToastItem, type UseQuotaUsageOptions, type UseRuntimeConfigOptions, createNubitApp, filterMenuByRoles, hasAnyRole, parseQuotaError, quotaErrorToastMessage, quotaUsageAboveGrid, useAppRuntime, useFeature, useFeatureConfig, useQuotaUsage, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };

package/dist/index.mjs

@@ -2,8 +2,8 @@ import React, { createContext, useCallback, useContext, useEffect, useMemo, useS
 import { BrowserRouter, Link, Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom";
 import { Badge, Button, Card, FeatureGate as FeatureGate$1, IconButton, TextField, ThemeProvider, ThemeSwitcher, useFloatingPanel } from "@nubitio/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { CoreConfigProvider, CoreProvider, MercureProvider } from "@nubitio/core";
+import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
+import { CoreConfigProvider, CoreProvider, MercureProvider, useCoreHttpClient } from "@nubitio/core";
 import { SmartCrudRolesProvider } from "@nubitio/crud";
 import { HydraResourceSchemaProvider, HydraResourceStoreProvider, SchemaProvider } from "@nubitio/hydra";
 //#region packages/admin/AdminHeader.tsx
@@ -457,6 +457,190 @@ function FeatureGate({ featureKey, ...props }) {
 	});
 }
 //#endregion
+//#region packages/admin/quota/QuotaUsageBanner.tsx
+function QuotaUsageBanner({ count, max, unitLabel, planLabel, atLimitMessage, nearLimitMessage, defaultMessage, upgradeHref, upgradeLabel = "View plans", className = "" }) {
+	if (max <= 0) return null;
+	const atLimit = count >= max;
+	const nearLimit = count === max - 1;
+	const tone = atLimit ? "limit" : nearLimit ? "warn" : "default";
+	const detail = atLimit ? atLimitMessage ?? `You reached your ${planLabel ?? "plan"} limit.` : nearLimit ? nearLimitMessage ?? `Only 1 ${unitLabel} slot left on your ${planLabel ?? "plan"}.` : defaultMessage ?? `${planLabel ?? "Plan"} usage.`;
+	const upgradeLink = upgradeHref ? /* @__PURE__ */ jsx("a", {
+		className: "nb-quota-banner__cta",
+		href: upgradeHref,
+		children: upgradeLabel
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `nb-quota-banner nb-quota-banner--${tone}${className ? ` ${className}` : ""}`,
+		role: "status",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "nb-quota-banner__copy",
+			children: [/* @__PURE__ */ jsxs("strong", { children: [
+				count,
+				" / ",
+				max,
+				" ",
+				unitLabel
+			] }), /* @__PURE__ */ jsx("span", { children: detail })]
+		}), (atLimit || nearLimit) && upgradeLink]
+	});
+}
+function quotaUsageAboveGrid(banner) {
+	return () => banner;
+}
+//#endregion
+//#region packages/admin/billing/PlanPanel.tsx
+function formatTrialEnds(iso) {
+	const date = new Date(iso);
+	if (Number.isNaN(date.getTime())) return iso;
+	return new Intl.DateTimeFormat(void 0, { dateStyle: "medium" }).format(date);
+}
+function PlanPanel({ plans, currentPlanId, subscriptionStatus, trialEndsAt, onSelectPlan, selectingPlanId = null, labels, className = "" }) {
+	const title = labels?.title ?? "Plans";
+	const subtitle = labels?.subtitle ?? "Choose the plan that fits your team.";
+	const currentBadge = labels?.currentBadge ?? "Current plan";
+	const selectingLabel = labels?.selecting ?? "Updating…";
+	let statusLine = null;
+	if (subscriptionStatus === "trialing" && trialEndsAt) statusLine = /* @__PURE__ */ jsx("p", {
+		className: "nb-plan-panel__status",
+		children: (labels?.trialEnds ?? "Trial ends {date}").replace("{date}", formatTrialEnds(trialEndsAt))
+	});
+	return /* @__PURE__ */ jsxs("section", {
+		className: `nb-plan-panel${className ? ` ${className}` : ""}`,
+		"aria-labelledby": "plan-panel-title",
+		children: [/* @__PURE__ */ jsx("header", {
+			className: "nb-plan-panel__header",
+			children: /* @__PURE__ */ jsxs("div", { children: [
+				/* @__PURE__ */ jsx("h2", {
+					id: "plan-panel-title",
+					className: "nb-plan-panel__title",
+					children: title
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "nb-plan-panel__subtitle",
+					children: subtitle
+				}),
+				statusLine
+			] })
+		}), /* @__PURE__ */ jsx("div", {
+			className: "nb-plan-panel__grid",
+			role: "list",
+			children: plans.map((plan) => {
+				const isCurrent = plan.id === currentPlanId;
+				const isSelecting = selectingPlanId === plan.id;
+				const ctaLabel = plan.ctaLabel ?? (isCurrent ? currentBadge : `Choose ${plan.name}`);
+				return /* @__PURE__ */ jsxs("article", {
+					role: "listitem",
+					className: [
+						"nb-plan-card",
+						plan.highlighted ? "nb-plan-card--highlighted" : "",
+						isCurrent ? "nb-plan-card--current" : ""
+					].filter(Boolean).join(" "),
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "nb-plan-card__head",
+							children: [/* @__PURE__ */ jsx("h3", {
+								className: "nb-plan-card__name",
+								children: plan.name
+							}), isCurrent ? /* @__PURE__ */ jsx(Badge, {
+								variant: "primary",
+								size: "sm",
+								pill: true,
+								children: currentBadge
+							}) : null]
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "nb-plan-card__price",
+							children: plan.priceLabel
+						}),
+						plan.description ? /* @__PURE__ */ jsx("p", {
+							className: "nb-plan-card__description",
+							children: plan.description
+						}) : null,
+						/* @__PURE__ */ jsx("ul", {
+							className: "nb-plan-card__features",
+							children: plan.features.map((feature) => /* @__PURE__ */ jsx("li", { children: feature }, feature))
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: plan.highlighted && !isCurrent ? "primary" : "secondary",
+							size: "sm",
+							disabled: isCurrent || !onSelectPlan || isSelecting,
+							onClick: () => void onSelectPlan?.(plan.id),
+							children: isSelecting ? selectingLabel : ctaLabel
+						})
+					]
+				}, plan.id);
+			})
+		})]
+	});
+}
+//#endregion
+//#region packages/admin/quota/parseQuotaError.ts
+function readErrorDetail(error) {
+	if (typeof error !== "object" || error === null) return "";
+	const record = error;
+	return record.data?.detail ?? record.data?.message ?? record.message ?? "";
+}
+function parseQuotaError(error) {
+	if (typeof error !== "object" || error === null) return null;
+	if (error.status !== 429) return null;
+	const detail = readErrorDetail(error);
+	const match = detail.match(/Quota exceeded for "([^"]+)": (\d+)\/(\d+)/);
+	if (!match) return {
+		resource: "unknown",
+		current: 0,
+		limit: 0,
+		message: detail || "Plan limit reached."
+	};
+	return {
+		resource: match[1],
+		current: Number(match[2]),
+		limit: Number(match[3]),
+		message: detail
+	};
+}
+function quotaErrorToastMessage(quota, labels) {
+	const label = labels?.[quota.resource] ?? quota.resource;
+	return `Plan limit reached: ${quota.current}/${quota.limit} ${label}. Upgrade your plan to continue.`;
+}
+//#endregion
+//#region packages/admin/quota/useQuotaUsage.ts
+function readCollectionTotal(body) {
+	if (Array.isArray(body)) return body.length;
+	if (typeof body !== "object" || body === null) return 0;
+	const record = body;
+	const member = record["hydra:member"] ?? record["member"];
+	const listed = Array.isArray(member) ? member.length : 0;
+	return Number(record["hydra:totalItems"] ?? record["totalItems"] ?? listed);
+}
+function useQuotaUsage({ featureKey, collectionPath, staleTimeMs = 1e4 }) {
+	const http = useCoreHttpClient();
+	const config = useFeatureConfig(featureKey);
+	const max = Number(config.max ?? 0);
+	const query = useQuery({
+		queryKey: [
+			"quota-usage",
+			featureKey,
+			collectionPath
+		],
+		queryFn: async () => {
+			return readCollectionTotal((await http.get(`${collectionPath}?itemsPerPage=100`, { headers: { Accept: "application/ld+json" } })).data);
+		},
+		staleTime: staleTimeMs
+	});
+	const count = query.data ?? 0;
+	const atLimit = max > 0 && count >= max;
+	const nearLimit = max > 0 && count === max - 1;
+	const refetch = useCallback(() => query.refetch(), [query]);
+	return {
+		count,
+		max,
+		atLimit,
+		nearLimit,
+		loading: query.isLoading,
+		refetch
+	};
+}
+//#endregion
 //#region packages/admin/auth/LoginPage.tsx
 function joinApiPath$2(apiBaseUrl, path) {
 	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
@@ -932,4 +1116,4 @@ function createNubitApp(config) {
 	return { App };
 }
 //#endregion
-export { AdminHeader, AdminShell, AdminSidebarMenu, FeatureGate, LoginPage, RegisterPage, SessionProvider, StaticSessionProvider, ToastHost, createNubitApp, filterMenuByRoles, hasAnyRole, useAppRuntime, useFeature, useFeatureConfig, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };
+export { AdminHeader, AdminShell, AdminSidebarMenu, FeatureGate, LoginPage, PlanPanel, QuotaUsageBanner, RegisterPage, SessionProvider, StaticSessionProvider, ToastHost, createNubitApp, filterMenuByRoles, hasAnyRole, parseQuotaError, quotaErrorToastMessage, quotaUsageAboveGrid, useAppRuntime, useFeature, useFeatureConfig, useQuotaUsage, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };

package/dist/style.css

@@ -369,6 +369,151 @@
   opacity: 0;
   pointer-events: none;
 }
+.nb-quota-banner {
+  align-items: center;
+  background: color-mix(in srgb, var(--accent-color, #888) 8%, var(--surface-1, transparent));
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  color: var(--text-primary);
+  display: flex;
+  gap: var(--space-3);
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  width: 100%;
+}
+
+.nb-quota-banner--warn {
+  background: color-mix(in srgb, var(--color-warning, #f59e0b) 10%, var(--surface-1, transparent));
+  border-color: color-mix(in srgb, var(--color-warning, #f59e0b) 45%, var(--border-subtle));
+}
+
+.nb-quota-banner--limit {
+  background: color-mix(in srgb, var(--color-error, #dc2626) 8%, var(--surface-1, transparent));
+  border-color: color-mix(in srgb, var(--color-error, #dc2626) 40%, var(--border-subtle));
+}
+
+.nb-quota-banner__copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 0.9rem;
+}
+
+.nb-quota-banner__copy span {
+  color: var(--text-secondary);
+}
+
+.nb-quota-banner__cta {
+  color: var(--accent-color);
+  flex-shrink: 0;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.nb-quota-banner__cta:hover {
+  text-decoration: underline;
+}
+@charset "UTF-8";
+.nb-plan-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  width: 100%;
+}
+
+.nb-plan-panel__header {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.nb-plan-panel__title {
+  font-size: 1.15rem;
+  font-weight: 700;
+  margin: 0;
+}
+
+.nb-plan-panel__subtitle {
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  margin: var(--space-1) 0 0;
+}
+
+.nb-plan-panel__status {
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+  margin: var(--space-2) 0 0;
+}
+
+.nb-plan-panel__grid {
+  display: grid;
+  gap: var(--space-3);
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+.nb-plan-card {
+  background: var(--surface-1);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-width: 0;
+  padding: var(--space-4);
+}
+
+.nb-plan-card--highlighted {
+  border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-subtle));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 20%, transparent);
+}
+
+.nb-plan-card--current {
+  background: color-mix(in srgb, var(--accent-color) 6%, var(--surface-1));
+}
+
+.nb-plan-card__head {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--space-2);
+  justify-content: space-between;
+}
+
+.nb-plan-card__name {
+  font-size: 1rem;
+  font-weight: 700;
+  margin: 0;
+}
+
+.nb-plan-card__price {
+  font-size: 1.35rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  margin: 0;
+}
+
+.nb-plan-card__description {
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+  margin: 0;
+}
+
+.nb-plan-card__features {
+  color: var(--text-primary);
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  font-size: 0.85rem;
+  gap: var(--space-1);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nb-plan-card__features li::before {
+  color: var(--accent-color);
+  content: "✓ ";
+  font-weight: 700;
+}
 .nb-toast-host {
   position: fixed;
   right: 1rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nubitio/admin",
-  "version": "0.5.23",
+  "version": "0.5.24",
   "type": "module",
   "description": "Admin shell layout components: responsive sidebar, header, and screen size utilities for Nubit apps.",
   "license": "MIT",
@@ -53,9 +53,9 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^6.0.0",
-    "@nubitio/crud": "^0.5.23",
-    "@nubitio/core": "^0.5.23",
-    "@nubitio/hydra": "^0.5.23",
-    "@nubitio/ui": "^0.5.23"
+    "@nubitio/hydra": "^0.5.24",
+    "@nubitio/crud": "^0.5.24",
+    "@nubitio/ui": "^0.5.24",
+    "@nubitio/core": "^0.5.24"
   }
 }