@lukoweb/apitogo-plugin-dev-portal-billing 0.1.88 → 0.1.89

package/dist/index.d.mts

@@ -1,10 +1,13 @@
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import * as _lukoweb_apitogo_plugins0 from "@lukoweb/apitogo/plugins";
+import * as _lukoweb_apitogo0 from "@lukoweb/apitogo";
 import * as _tanstack_react_query0 from "@tanstack/react-query";
 
 //#region src/pages/AccountPlansPage.d.ts
 declare const AccountPlansPage: () => react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/pages/OverviewDashboardPage.d.ts
+declare const OverviewDashboardPage: () => react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/types.d.ts
 type DevPortalPricingCompareRow = {
   label: string;
@@ -75,9 +78,10 @@ declare const PRICING_PATH = "/pricing";
 declare const CHECKOUT_PATH = "/checkout";
 declare const SUBSCRIPTIONS_PATH = "/account/subscriptions";
 declare const CREDENTIALS_PATH = "/account/credentials";
+declare const USAGE_PATH = "/account/usage";
 //#endregion
 //#region src/DevPortalBillingPlugin.d.ts
-declare const devPortalBillingPlugin: (options?: DevPortalBillingConfig | undefined) => _lukoweb_apitogo_plugins0.ApitogoPlugin;
+declare const devPortalBillingPlugin: (options?: DevPortalBillingConfig | undefined) => _lukoweb_apitogo0.ApitogoPlugin;
 //#endregion
 //#region src/hooks/useApiKeys.d.ts
 /** Thrown when the developer has hit their plan's per-developer key cap. */
@@ -197,4 +201,4 @@ declare function useCreateApiKey(): _tanstack_react_query0.UseMutationResult<Dev
 }, unknown>;
 declare function useRevokeApiKey(): _tanstack_react_query0.UseMutationResult<void, Error, string, unknown>;
 //#endregion
-export { API_KEY_CAP_REACHED, AccountPlansPage, ApiKeysPanel, CHECKOUT_PATH, CREDENTIALS_PATH, PRICING_PATH, SUBSCRIPTIONS_PATH, devPortalBillingPlugin, useApiKeys, useCreateApiKey, useRevokeApiKey };
+export { API_KEY_CAP_REACHED, AccountPlansPage, ApiKeysPanel, CHECKOUT_PATH, CREDENTIALS_PATH, OverviewDashboardPage, PRICING_PATH, SUBSCRIPTIONS_PATH, USAGE_PATH, devPortalBillingPlugin, useApiKeys, useCreateApiKey, useRevokeApiKey };

package/dist/index.mjs

@@ -1,7 +1,7 @@
-import { Button, Head, Heading, Spinner } from "@lukoweb/apitogo/components";
-import { CreditCardIcon, KeyRoundIcon, ShieldIcon, StarsIcon, TrashIcon } from "@lukoweb/apitogo/icons";
+import { Button, Head, Heading, Link, Spinner } from "@lukoweb/apitogo/components";
+import { ArrowRightIcon, CreditCardIcon, KeyRoundIcon, ShieldIcon, StarsIcon, TrashIcon } from "@lukoweb/apitogo/icons";
 import { createContext, useContext, useEffect, useState } from "react";
-import { Link, Navigate, Outlet, useNavigate, useSearchParams } from "@lukoweb/apitogo/router";
+import { Link as Link$1, Navigate, Outlet, useNavigate, useSearchParams } from "@lukoweb/apitogo/router";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@lukoweb/apitogo/ui/AlertDialog.js";
 import { cn } from "@lukoweb/apitogo/ui/util.js";
 import manifestCatalog from "virtual:apitogo-local-manifest";
@@ -9,11 +9,12 @@ import zudokuConfig from "virtual:zudoku-config";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMutation, useQuery, useQueryClient } from "@lukoweb/apitogo/react-query";
 import { useAuth } from "@lukoweb/apitogo/hooks";
-import { Alert, AlertTitle } from "@lukoweb/apitogo/ui/Alert.js";
 import { Button as Button$1 } from "@lukoweb/apitogo/ui/Button.js";
+import { Alert, AlertTitle } from "@lukoweb/apitogo/ui/Alert.js";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@lukoweb/apitogo/ui/Dialog.js";
 import { Input } from "@lukoweb/apitogo/ui/Input.js";
 import { Secret } from "@lukoweb/apitogo/ui/Secret.js";
+import { AccountLayout } from "@lukoweb/apitogo-module-user-panel";
 import { createPlugin } from "@lukoweb/apitogo/plugins";
 import { Alert as Alert$1, AlertAction, AlertDescription } from "@lukoweb/apitogo/ui/Alert";
 import { Button as Button$2 } from "@lukoweb/apitogo/ui/Button";
@@ -154,6 +155,20 @@ function listPlanFeatureLines(plan) {
 function isActiveSubscription(status) {
 	return status.toLowerCase() === "active";
 }
+/** Returns monthly call quota from plan limitsJson, or null when unknown/unlimited. */
+function parseMonthlyQuotaCalls(limitsJson) {
+	if (!limitsJson?.trim()) return null;
+	try {
+		const quota = JSON.parse(limitsJson).quota;
+		if (!quota || typeof quota !== "object") return null;
+		const { calls, renewalPeriodDays } = quota;
+		if (calls == null || calls < 0) return null;
+		if (renewalPeriodDays == null || renewalPeriodDays === 30 || renewalPeriodDays === 31) return calls;
+		return null;
+	} catch {
+		return null;
+	}
+}
 
 //#endregion
 //#region src/components/PricingCard.tsx
@@ -233,7 +248,7 @@ const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed =
 					variant: featured ? "default" : "outline",
 					className: "w-full",
 					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
+					children: /* @__PURE__ */ jsx(Link$1, {
 						to: `/checkout?planSku=${encodeURIComponent(plan.sku)}`,
 						children: isPlanFree(plan) ? "Get started" : "Subscribe"
 					})
@@ -241,7 +256,7 @@ const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed =
 					variant: "secondary",
 					className: "w-full",
 					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
+					children: /* @__PURE__ */ jsx(Link$1, {
 						to: "/account/subscriptions",
 						children: "Manage subscription"
 					})
@@ -249,7 +264,7 @@ const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed =
 					variant: featured ? "default" : "outline",
 					className: "w-full",
 					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
+					children: /* @__PURE__ */ jsx(Link$1, {
 						to: `/checkout?planSku=${encodeURIComponent(plan.sku)}`,
 						children: publicCtaLabel(plan)
 					})
@@ -348,6 +363,9 @@ function createDemoMeResponse(plans) {
 	return {
 		userId: "00000000-0000-0000-0000-000000000001",
 		displayName: "Demo User",
+		email: "demo@example.com",
+		emailVerified: true,
+		hasNativePassword: true,
 		subscriptions: resolveDemoPlans(plans).map((plan) => ({
 			planSku: plan.sku,
 			status: "Active",
@@ -634,6 +652,394 @@ async function readProblemDetail(response) {
 	}
 }
 
+//#endregion
+//#region src/hooks/useUsage.ts
+function createDemoUsage(range) {
+	const now = /* @__PURE__ */ new Date();
+	const days = range === "24h" ? 1 : range === "7d" ? 7 : range === "90d" ? 90 : range === "mtd" ? Math.max(1, now.getUTCDate()) : 30;
+	const series = [];
+	let total = 0;
+	const today = /* @__PURE__ */ new Date();
+	for (let i = days - 1; i >= 0; i--) {
+		const day = new Date(today);
+		day.setUTCDate(day.getUTCDate() - i);
+		const requestCount = 40 + i * 17 % 80;
+		total += requestCount;
+		series.push({
+			dayUtc: day.toISOString().slice(0, 10),
+			requestCount,
+			errorCount: Math.floor(requestCount * .02),
+			avgLatencyMs: 40 + i % 20
+		});
+	}
+	return {
+		range,
+		fromDayUtc: series[0]?.dayUtc ?? today.toISOString().slice(0, 10),
+		toDayUtc: series.at(-1)?.dayUtc ?? today.toISOString().slice(0, 10),
+		requestCount: total,
+		avgLatencyMs: 48,
+		errorRate: .018,
+		series,
+		byEndpoint: [
+			{
+				path: "GET /pets",
+				count: Math.floor(total * .45)
+			},
+			{
+				path: "POST /pets",
+				count: Math.floor(total * .25)
+			},
+			{
+				path: "GET /pets/{id}",
+				count: Math.floor(total * .2)
+			},
+			{
+				path: "DELETE /pets/{id}",
+				count: Math.floor(total * .1)
+			}
+		],
+		byStatus: [
+			{
+				label: "2xx",
+				count: Math.floor(total * .96)
+			},
+			{
+				label: "4xx",
+				count: Math.floor(total * .03)
+			},
+			{
+				label: "5xx",
+				count: Math.floor(total * .01)
+			}
+		]
+	};
+}
+function createDemoRecent() {
+	const now = Date.now();
+	return { items: [
+		{
+			occurredAtUtc: (/* @__PURE__ */ new Date(now - 6e4)).toISOString(),
+			method: "GET",
+			path: "/pets",
+			statusCode: 200,
+			latencyMs: 42
+		},
+		{
+			occurredAtUtc: (/* @__PURE__ */ new Date(now - 12e4)).toISOString(),
+			method: "POST",
+			path: "/pets",
+			statusCode: 201,
+			latencyMs: 88
+		},
+		{
+			occurredAtUtc: (/* @__PURE__ */ new Date(now - 18e4)).toISOString(),
+			method: "GET",
+			path: "/pets/1",
+			statusCode: 404,
+			latencyMs: 31
+		}
+	] };
+}
+function useUsage(range = "30d") {
+	const auth = useAuth();
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const isPreview = useDevPortalPreviewMode();
+	const isDemoSession = useIsDemoSession();
+	const liveQuery = useQuery({
+		queryKey: [
+			"dev-portal-usage",
+			apiBaseUrl,
+			range
+		],
+		enabled: auth.isAuthenticated && !isPreview && !isDemoSession && Boolean(apiBaseUrl),
+		queryFn: async () => {
+			const response = await fetch(`${apiBaseUrl}/api/v1/usage?range=${encodeURIComponent(range)}`, {
+				method: "GET",
+				headers: { Accept: "application/json" },
+				credentials: "include"
+			});
+			if (!response.ok) throw new Error("Failed to load usage.");
+			return await response.json();
+		}
+	});
+	if (isDemoSession && auth.isAuthenticated) return {
+		...liveQuery,
+		data: createDemoUsage(range),
+		error: null,
+		isError: false,
+		isFetching: false,
+		isLoading: false,
+		isPending: false,
+		isSuccess: true,
+		status: "success"
+	};
+	return liveQuery;
+}
+function useUsageRecent(limit = 20) {
+	const auth = useAuth();
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const isPreview = useDevPortalPreviewMode();
+	const isDemoSession = useIsDemoSession();
+	const liveQuery = useQuery({
+		queryKey: [
+			"dev-portal-usage-recent",
+			apiBaseUrl,
+			limit
+		],
+		enabled: auth.isAuthenticated && !isPreview && !isDemoSession && Boolean(apiBaseUrl),
+		queryFn: async () => {
+			const response = await fetch(`${apiBaseUrl}/api/v1/usage/recent?limit=${limit}`, {
+				method: "GET",
+				headers: { Accept: "application/json" },
+				credentials: "include"
+			});
+			if (!response.ok) throw new Error("Failed to load recent requests.");
+			return await response.json();
+		}
+	});
+	if (isDemoSession && auth.isAuthenticated) return {
+		...liveQuery,
+		data: createDemoRecent(),
+		error: null,
+		isError: false,
+		isFetching: false,
+		isLoading: false,
+		isPending: false,
+		isSuccess: true,
+		status: "success"
+	};
+	return liveQuery;
+}
+
+//#endregion
+//#region src/paths.ts
+const PRICING_PATH = "/pricing";
+const CHECKOUT_PATH = "/checkout";
+const SUBSCRIPTIONS_PATH = "/account/subscriptions";
+const CREDENTIALS_PATH = "/account/credentials";
+const USAGE_PATH = "/account/usage";
+const LOGIN_NAV_PATH = "/signin";
+
+//#endregion
+//#region src/pages/OverviewDashboardPage.tsx
+function StatCard({ label, value, sub, subClassName }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-xl border border-border bg-card p-5",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "text-xs font-medium uppercase tracking-[0.05em] text-muted-foreground",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "mt-1.5 text-[1.7rem] font-bold tracking-[-0.02em] text-foreground",
+				children: value
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: `mt-1 text-xs ${subClassName ?? "text-muted-foreground"}`,
+				children: sub
+			})
+		]
+	});
+}
+function formatNumber$1(value) {
+	return new Intl.NumberFormat().format(value);
+}
+const OverviewDashboardPage = () => {
+	const auth = useAuth();
+	const { data: apiKeys, isLoading: keysLoading } = useApiKeys();
+	const { data: me, isLoading: subsLoading } = useMySubscriptions();
+	const { data: catalog } = usePlans();
+	const { data: usage } = useUsage("30d");
+	const { data: recent } = useUsageRecent(8);
+	const activeKeyCount = apiKeys?.plans.reduce((total, plan) => total + plan.keys.length, 0) ?? 0;
+	const activeSubscription = (me?.subscriptions ?? []).find((sub) => isActiveSubscription(sub.status));
+	const planSku = activeSubscription?.planSku;
+	const planName = catalog?.plans.find((plan) => plan.sku === planSku)?.displayName ?? planSku ?? "—";
+	const renewLabel = activeSubscription?.currentPeriodEnd ? `Renews ${new Date(activeSubscription.currentPeriodEnd).toLocaleDateString(void 0, {
+		month: "short",
+		day: "numeric"
+	})}` : "No active subscription";
+	const statsLoading = auth.isAuthenticated && (keysLoading || subsLoading) && !apiKeys && !me;
+	const chartSeries = (usage?.series ?? []).slice(-14);
+	const maxBar = Math.max(1, ...chartSeries.map((point) => point.requestCount));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "px-8 py-7",
+		children: [
+			/* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: "Overview" }) }),
+			/* @__PURE__ */ jsx("h1", {
+				className: "mb-6 text-[1.6rem] font-bold tracking-[-0.01em] text-foreground",
+				children: "Overview"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4",
+				children: [
+					/* @__PURE__ */ jsx(StatCard, {
+						label: "Requests (30d)",
+						value: usage ? formatNumber$1(usage.requestCount) : statsLoading ? "…" : "—",
+						sub: usage ? `${formatNumber$1(usage.series.reduce((sum, p) => sum + p.errorCount, 0))} errors` : "No usage data yet"
+					}),
+					/* @__PURE__ */ jsx(StatCard, {
+						label: "Active keys",
+						value: statsLoading ? "…" : String(activeKeyCount),
+						sub: activeKeyCount === 1 ? "1 key on your account" : `${activeKeyCount} keys on your account`
+					}),
+					/* @__PURE__ */ jsx(StatCard, {
+						label: "Plan",
+						value: statsLoading ? "…" : planName,
+						sub: renewLabel
+					}),
+					/* @__PURE__ */ jsx(StatCard, {
+						label: "Error rate",
+						value: usage ? `${(usage.errorRate * 100).toFixed(usage.errorRate >= .1 ? 1 : 2)}%` : "—",
+						sub: usage?.avgLatencyMs != null ? `${usage.avgLatencyMs} ms avg latency` : "No telemetry yet"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-5 grid grid-cols-1 gap-5 lg:grid-cols-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "rounded-xl border border-border bg-card p-6",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "mb-4 flex items-center justify-between gap-3",
+						children: [/* @__PURE__ */ jsx("h2", {
+							className: "text-lg font-semibold text-foreground",
+							children: "Requests, last 14 days"
+						}), /* @__PURE__ */ jsx(Link, {
+							to: USAGE_PATH,
+							className: "text-sm font-semibold text-primary hover:underline",
+							children: "View usage"
+						})]
+					}), chartSeries.some((p) => p.requestCount > 0) ? /* @__PURE__ */ jsx("div", {
+						className: "flex h-[150px] items-end gap-1.5",
+						children: chartSeries.map((point) => /* @__PURE__ */ jsx("div", {
+							title: `${point.dayUtc}: ${point.requestCount}`,
+							className: "min-w-0 flex-1 rounded-t-sm bg-primary",
+							style: { height: `${Math.max(4, point.requestCount / maxBar * 100)}%` }
+						}, point.dayUtc))
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "flex min-h-[150px] items-center justify-center rounded-lg border border-dashed border-border bg-muted/30 px-4 text-center text-sm text-muted-foreground",
+						children: "No request traffic in the last 14 days."
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "rounded-xl border border-border bg-card p-6",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "mb-4 text-lg font-semibold text-foreground",
+						children: "Quick links"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-3",
+						children: [
+							/* @__PURE__ */ jsx(Button$1, {
+								asChild: true,
+								variant: "outline",
+								className: "justify-between",
+								children: /* @__PURE__ */ jsxs(Link, {
+									to: CREDENTIALS_PATH,
+									children: ["Manage API keys", /* @__PURE__ */ jsx(ArrowRightIcon, { size: 16 })]
+								})
+							}),
+							/* @__PURE__ */ jsx(Button$1, {
+								asChild: true,
+								variant: "outline",
+								className: "justify-between",
+								children: /* @__PURE__ */ jsxs(Link, {
+									to: USAGE_PATH,
+									children: ["Usage analytics", /* @__PURE__ */ jsx(ArrowRightIcon, { size: 16 })]
+								})
+							}),
+							/* @__PURE__ */ jsx(Button$1, {
+								asChild: true,
+								variant: "outline",
+								className: "justify-between",
+								children: /* @__PURE__ */ jsxs(Link, {
+									to: SUBSCRIPTIONS_PATH,
+									children: ["Billing & subscriptions", /* @__PURE__ */ jsx(ArrowRightIcon, { size: 16 })]
+								})
+							}),
+							/* @__PURE__ */ jsx(Button$1, {
+								asChild: true,
+								variant: "outline",
+								className: "justify-between",
+								children: /* @__PURE__ */ jsxs(Link, {
+									to: "/introduction",
+									children: ["Documentation", /* @__PURE__ */ jsx(ArrowRightIcon, { size: 16 })]
+								})
+							})
+						]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "rounded-xl border border-border bg-card p-6",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "mb-4 text-lg font-semibold text-foreground",
+					children: "Recent requests"
+				}), recent && recent.items.length > 0 ? /* @__PURE__ */ jsx("div", {
+					className: "overflow-x-auto",
+					children: /* @__PURE__ */ jsxs("table", {
+						className: "w-full text-left text-sm",
+						children: [/* @__PURE__ */ jsx("thead", {
+							className: "text-xs uppercase tracking-wide text-muted-foreground",
+							children: /* @__PURE__ */ jsxs("tr", { children: [
+								/* @__PURE__ */ jsx("th", {
+									className: "pb-2 font-medium",
+									children: "Time"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									className: "pb-2 font-medium",
+									children: "Method"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									className: "pb-2 font-medium",
+									children: "Path"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									className: "pb-2 font-medium",
+									children: "Status"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									className: "pb-2 font-medium",
+									children: "Latency"
+								})
+							] })
+						}), /* @__PURE__ */ jsx("tbody", { children: recent.items.map((item) => /* @__PURE__ */ jsxs("tr", {
+							className: "border-t border-border",
+							children: [
+								/* @__PURE__ */ jsx("td", {
+									className: "py-2 text-muted-foreground",
+									children: new Date(item.occurredAtUtc).toLocaleString()
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: "py-2 font-mono",
+									children: item.method
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: "py-2 font-mono",
+									children: item.path
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: "py-2",
+									children: item.statusCode
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: "py-2 text-muted-foreground",
+									children: item.latencyMs != null ? `${item.latencyMs} ms` : "—"
+								})
+							]
+						}, `${item.occurredAtUtc}-${item.method}-${item.path}`)) })]
+					})
+				}) : /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: "No recent requests yet."
+				})]
+			}),
+			!auth.isAuthenticated && auth.isAuthEnabled ? /* @__PURE__ */ jsx("p", {
+				className: "mt-6 text-sm text-muted-foreground",
+				children: "Sign in to see personalized account metrics."
+			}) : null
+		]
+	});
+};
+
 //#endregion
 //#region src/components/ApiKeysPanel.tsx
 /**
@@ -858,14 +1264,6 @@ const RedirectPage = ({ icon: Icon, title, description, url, children }) => {
 	});
 };
 
-//#endregion
-//#region src/paths.ts
-const PRICING_PATH = "/pricing";
-const CHECKOUT_PATH = "/checkout";
-const SUBSCRIPTIONS_PATH = "/account/subscriptions";
-const CREDENTIALS_PATH = "/account/credentials";
-const LOGIN_NAV_PATH = "/signin";
-
 //#endregion
 //#region src/pages/CheckoutPage.tsx
 const ACCOUNT_PLANS_PATH = "/account/plans";
@@ -913,7 +1311,7 @@ const CheckoutPage = () => {
 		children: [
 			"Missing plan SKU.",
 			" ",
-			/* @__PURE__ */ jsx(Link, {
+			/* @__PURE__ */ jsx(Link$1, {
 				to: plansPath,
 				className: "text-primary underline",
 				children: "Back to plans"
@@ -934,7 +1332,7 @@ const CheckoutPage = () => {
 			/* @__PURE__ */ jsx(Button$2, {
 				asChild: true,
 				variant: "outline",
-				children: /* @__PURE__ */ jsx(Link, {
+				children: /* @__PURE__ */ jsx(Link$1, {
 					to: "/account/subscriptions",
 					children: "View demo subscriptions"
 				})
@@ -955,7 +1353,7 @@ const CheckoutPage = () => {
 			/* @__PURE__ */ jsx(Button$2, {
 				asChild: true,
 				variant: "outline",
-				children: /* @__PURE__ */ jsx(Link, {
+				children: /* @__PURE__ */ jsx(Link$1, {
 					to: plansPath,
 					children: "Back to plans"
 				})
@@ -977,7 +1375,7 @@ const CheckoutPage = () => {
 				variant: "outline",
 				size: "xs",
 				asChild: true,
-				children: /* @__PURE__ */ jsx(Link, {
+				children: /* @__PURE__ */ jsx(Link$1, {
 					to: plansPath,
 					children: "Back to plans"
 				})
@@ -1073,7 +1471,7 @@ const CredentialsPage = () => {
 				}), /* @__PURE__ */ jsx(Button$2, {
 					className: "mt-4",
 					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
+					children: /* @__PURE__ */ jsx(Link$1, {
 						to: "/account/plans",
 						children: "View plans"
 					})
@@ -1091,7 +1489,7 @@ const CredentialsPage = () => {
 				}), /* @__PURE__ */ jsx(Button$2, {
 					className: "mt-4",
 					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
+					children: /* @__PURE__ */ jsx(Link$1, {
 						to: "/account/plans",
 						children: "View plans"
 					})
@@ -1107,7 +1505,7 @@ const CredentialsPage = () => {
 					}), /* @__PURE__ */ jsx(Button$2, {
 						className: "mt-4",
 						asChild: true,
-						children: /* @__PURE__ */ jsx(Link, {
+						children: /* @__PURE__ */ jsx(Link$1, {
 							to: "/account/plans",
 							children: "View plans"
 						})
@@ -1141,14 +1539,14 @@ const CredentialsPage = () => {
 				children: [/* @__PURE__ */ jsx(Button$2, {
 					variant: "outline",
 					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
+					children: /* @__PURE__ */ jsx(Link$1, {
 						to: "/account/subscriptions",
 						children: "My subscriptions"
 					})
 				}), /* @__PURE__ */ jsx(Button$2, {
 					variant: "outline",
 					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
+					children: /* @__PURE__ */ jsx(Link$1, {
 						to: "/api",
 						children: "API reference"
 					})
@@ -1381,6 +1779,28 @@ const PricingPage = () => {
 	});
 };
 
+//#endregion
+//#region src/hooks/useBillingPortal.ts
+function useBillingPortal() {
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	return useMutation({ mutationFn: async (returnUrl) => {
+		if (!apiBaseUrl) throw new Error("Dev portal API is not configured.");
+		const response = await fetch(`${apiBaseUrl}/api/v1/subscriptions/billing-portal`, {
+			method: "POST",
+			headers: {
+				Accept: "application/json",
+				"Content-Type": "application/json"
+			},
+			credentials: "include",
+			body: JSON.stringify({ returnUrl: returnUrl ?? `${window.location.origin}/account/subscriptions` })
+		});
+		if (!response.ok) throw new Error("Unable to open billing portal.");
+		const body = await response.json();
+		if (!body.url) throw new Error("Billing portal URL was not returned.");
+		window.location.assign(body.url);
+	} });
+}
+
 //#endregion
 //#region src/pages/SubscriptionsPage.tsx
 const SubscriptionsPage = () => {
@@ -1389,28 +1809,33 @@ const SubscriptionsPage = () => {
 	const checkoutSuccess = searchParams.get("checkout") === "success";
 	const { data: me, isLoading } = useMySubscriptions();
 	const { data: catalog } = usePlans();
+	const billingPortal = useBillingPortal();
+	const { data: usage } = useUsage("mtd");
 	const planBySku = new Map((catalog?.plans ?? []).map((plan) => [plan.sku, plan]));
 	const subscriptions = me?.subscriptions ?? [];
+	const activeSubscription = subscriptions.find((sub) => isActiveSubscription(sub.status));
+	const activePlan = activeSubscription ? planBySku.get(activeSubscription.planSku) : void 0;
+	const monthlyQuota = activePlan ? parseMonthlyQuotaCalls(activePlan.limitsJson) : null;
+	const usedRequests = usage?.requestCount ?? 0;
+	const quotaPct = monthlyQuota && monthlyQuota > 0 ? Math.min(100, Math.round(usedRequests / monthlyQuota * 100)) : null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "mx-auto max-w-screen-lg px-4 pb-16 pt-(--padding-content-top) lg:px-8",
+		className: "px-8 py-7",
 		children: [
-			/* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: "My subscriptions" }) }),
-			/* @__PURE__ */ jsxs("div", {
-				className: "mb-8 space-y-2",
-				children: [/* @__PURE__ */ jsx("h1", {
-					className: "text-3xl font-semibold tracking-tight",
-					children: "My subscriptions"
-				}), /* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground",
-					children: "Review your active plans and manage billing."
-				})]
+			/* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: "Billing" }) }),
+			/* @__PURE__ */ jsx("h1", {
+				className: "mb-2 text-[1.6rem] font-bold tracking-[-0.01em]",
+				children: "Billing"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mb-8 text-muted-foreground",
+				children: "Manage your plan, payment method, and invoices."
 			}),
 			checkoutSuccess ? /* @__PURE__ */ jsxs("div", {
 				className: "mb-6 rounded-xl border border-green-500/30 bg-green-500/10 p-4 text-sm",
 				children: [
 					"Your subscription is active.",
 					" ",
-					/* @__PURE__ */ jsx(Link, {
+					/* @__PURE__ */ jsx(Link$1, {
 						to: CREDENTIALS_PATH,
 						className: "font-medium underline",
 						children: "View your API credentials"
@@ -1420,32 +1845,80 @@ const SubscriptionsPage = () => {
 			}) : null,
 			isLoading ? /* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground",
-				children: "Loading subscriptions…"
+				children: "Loading billing details…"
+			}) : null,
+			!isLoading && activePlan && activeSubscription ? /* @__PURE__ */ jsxs("div", {
+				className: "mb-8 rounded-xl border border-border bg-card p-6",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "text-xs font-medium uppercase tracking-[0.05em] text-muted-foreground",
+						children: "Current plan"
+					}),
+					/* @__PURE__ */ jsx("h2", {
+						className: "mt-2 text-2xl font-bold",
+						children: activePlan.displayName
+					}),
+					/* @__PURE__ */ jsxs("p", {
+						className: "mt-1 text-sm text-muted-foreground",
+						children: [
+							formatPlanPrice(activePlan),
+							" ·",
+							" ",
+							formatBillingPeriod(activePlan.billingPeriod)
+						]
+					}),
+					activeSubscription.currentPeriodEnd ? /* @__PURE__ */ jsxs("p", {
+						className: "mt-3 text-sm text-muted-foreground",
+						children: [
+							"Renews",
+							" ",
+							new Date(activeSubscription.currentPeriodEnd).toLocaleDateString()
+						]
+					}) : null,
+					quotaPct != null && monthlyQuota != null ? /* @__PURE__ */ jsxs("div", {
+						className: "mt-5",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "mb-1.5 flex justify-between text-xs text-muted-foreground",
+							children: [/* @__PURE__ */ jsx("span", { children: "Monthly requests" }), /* @__PURE__ */ jsxs("span", { children: [
+								usedRequests.toLocaleString(),
+								" /",
+								" ",
+								monthlyQuota.toLocaleString()
+							] })]
+						}), /* @__PURE__ */ jsx("div", {
+							className: "h-2 rounded-full bg-muted",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "h-full rounded-full bg-primary transition-[width]",
+								style: { width: `${quotaPct}%` }
+							})
+						})]
+					}) : null
+				]
 			}) : null,
 			!isLoading && subscriptions.length === 0 ? /* @__PURE__ */ jsxs("div", {
-				className: "rounded-xl border border-dashed p-8 text-center",
+				className: "mb-8 rounded-xl border border-dashed p-8 text-center",
 				children: [/* @__PURE__ */ jsx("p", {
 					className: "text-muted-foreground",
 					children: "You do not have an active subscription yet."
-				}), /* @__PURE__ */ jsx(Button$2, {
+				}), /* @__PURE__ */ jsx(Button$1, {
 					className: "mt-4",
 					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
+					children: /* @__PURE__ */ jsx(Link$1, {
 						to: "/account/plans",
 						children: "View plans"
 					})
 				})]
 			}) : null,
-			subscriptions.length > 0 ? /* @__PURE__ */ jsx("div", {
-				className: "space-y-4",
+			!isLoading && subscriptions.length > 1 ? /* @__PURE__ */ jsx("div", {
+				className: "mb-8 space-y-4",
 				children: subscriptions.map((subscription) => {
 					const plan = planBySku.get(subscription.planSku);
-					return /* @__PURE__ */ jsxs("article", {
-						className: "rounded-xl border bg-card/60 p-6",
-						children: [/* @__PURE__ */ jsxs("div", {
+					return /* @__PURE__ */ jsx("article", {
+						className: "rounded-xl border bg-card p-5",
+						children: /* @__PURE__ */ jsxs("div", {
 							className: "flex flex-wrap items-start justify-between gap-4",
-							children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
-								className: "text-lg font-medium",
+							children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+								className: "font-semibold",
 								children: plan?.displayName ?? subscription.planSku
 							}), plan ? /* @__PURE__ */ jsxs("p", {
 								className: "mt-1 text-sm text-muted-foreground",
@@ -1456,48 +1929,238 @@ const SubscriptionsPage = () => {
 									formatBillingPeriod(plan.billingPeriod)
 								]
 							}) : null] }), /* @__PURE__ */ jsx("span", {
-								className: isActiveSubscription(subscription.status) ? "rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary" : "rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground",
+								className: "rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground",
 								children: subscription.status
 							})]
-						}), subscription.currentPeriodEnd ? /* @__PURE__ */ jsxs("p", {
-							className: "mt-3 text-sm text-muted-foreground",
-							children: [
-								"Current period ends",
-								" ",
-								new Date(subscription.currentPeriodEnd).toLocaleDateString()
-							]
-						}) : null]
+						})
 					}, `${subscription.planSku}-${subscription.status}`);
 				})
 			}) : null,
 			/* @__PURE__ */ jsxs("div", {
-				className: "mt-8 flex flex-wrap gap-3",
+				className: "flex flex-wrap gap-3",
 				children: [
-					/* @__PURE__ */ jsx(Button$2, {
+					/* @__PURE__ */ jsx(Button$1, {
 						variant: "outline",
 						asChild: true,
-						children: /* @__PURE__ */ jsx(Link, {
+						children: /* @__PURE__ */ jsx(Link$1, {
 							to: "/account/plans",
 							children: "Change plan"
 						})
 					}),
-					/* @__PURE__ */ jsx(Button$2, {
-						variant: "outline",
-						asChild: true,
-						children: /* @__PURE__ */ jsx(Link, {
-							to: "/account/plans",
-							children: "Billing settings"
-						})
-					}),
-					auth.isAuthenticated ? /* @__PURE__ */ jsx(Button$2, {
+					auth.isAuthenticated ? /* @__PURE__ */ jsx(Button$1, {
+						variant: "default",
+						disabled: billingPortal.isPending,
+						onClick: () => {
+							billingPortal.mutate();
+						},
+						children: billingPortal.isPending ? /* @__PURE__ */ jsx(Spinner, {}) : "Manage payment & invoices"
+					}) : null,
+					auth.isAuthenticated ? /* @__PURE__ */ jsx(Button$1, {
 						variant: "secondary",
 						asChild: true,
-						children: /* @__PURE__ */ jsx(Link, {
+						children: /* @__PURE__ */ jsx(Link$1, {
 							to: CREDENTIALS_PATH,
 							children: "API credentials"
 						})
 					}) : null
 				]
+			}),
+			billingPortal.isError ? /* @__PURE__ */ jsx("p", {
+				className: "mt-4 text-sm text-destructive",
+				children: billingPortal.error instanceof Error ? billingPortal.error.message : "Unable to open billing portal."
+			}) : null
+		]
+	});
+};
+
+//#endregion
+//#region src/pages/UsagePage.tsx
+const RANGES = [
+	{
+		value: "24h",
+		label: "24h"
+	},
+	{
+		value: "7d",
+		label: "7d"
+	},
+	{
+		value: "30d",
+		label: "30d"
+	},
+	{
+		value: "90d",
+		label: "90d"
+	}
+];
+function formatNumber(value) {
+	return new Intl.NumberFormat().format(value);
+}
+function formatPct(rate) {
+	return `${(rate * 100).toFixed(rate >= .1 ? 1 : 2)}%`;
+}
+const UsagePage = () => {
+	const auth = useAuth();
+	const [range, setRange] = useState("30d");
+	const { data, isLoading, isError } = useUsage(range);
+	const maxBar = Math.max(1, ...data?.series.map((point) => point.requestCount) ?? [1]);
+	const endpointTotal = data?.byEndpoint.reduce((sum, item) => sum + item.count, 0) ?? 0;
+	if (!auth.isAuthenticated) return /* @__PURE__ */ jsxs("div", {
+		className: "px-8 py-7",
+		children: [
+			/* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: "Usage" }) }),
+			/* @__PURE__ */ jsx("h1", {
+				className: "mb-2 text-[1.6rem] font-bold tracking-[-0.01em]",
+				children: "Usage"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				children: "Sign in to view your API usage."
+			}),
+			auth.isAuthEnabled ? /* @__PURE__ */ jsx(Button$1, {
+				asChild: true,
+				className: "mt-4",
+				children: /* @__PURE__ */ jsx(Link$1, {
+					to: "/signin",
+					children: "Sign in"
+				})
+			}) : null
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "px-8 py-7",
+		children: [
+			/* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: "Usage" }) }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-6 flex flex-wrap items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("h1", {
+					className: "text-[1.6rem] font-bold tracking-[-0.01em]",
+					children: "Usage"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex gap-1 rounded-lg border border-border bg-card p-1",
+					children: RANGES.map((item) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setRange(item.value),
+						className: `rounded-md px-3 py-1.5 text-xs font-semibold transition-colors ${range === item.value ? "bg-primary/14 text-primary" : "text-muted-foreground hover:text-foreground"}`,
+						children: item.label
+					}, item.value))
+				})]
+			}),
+			isLoading ? /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: "Loading usage…"
+			}) : null,
+			isError ? /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-destructive",
+				children: "Unable to load usage data."
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-5 grid grid-cols-1 gap-4 sm:grid-cols-3",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "rounded-xl border border-border bg-card p-4",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "text-xs uppercase tracking-[0.05em] text-muted-foreground",
+							children: "Requests"
+						}), /* @__PURE__ */ jsx("div", {
+							className: "mt-1.5 text-2xl font-bold",
+							children: data ? formatNumber(data.requestCount) : "—"
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "rounded-xl border border-border bg-card p-4",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "text-xs uppercase tracking-[0.05em] text-muted-foreground",
+							children: "Avg latency"
+						}), /* @__PURE__ */ jsx("div", {
+							className: "mt-1.5 text-2xl font-bold",
+							children: data?.avgLatencyMs != null ? `${data.avgLatencyMs} ms` : "—"
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "rounded-xl border border-border bg-card p-4",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "text-xs uppercase tracking-[0.05em] text-muted-foreground",
+							children: "Error rate"
+						}), /* @__PURE__ */ jsx("div", {
+							className: "mt-1.5 text-2xl font-bold",
+							children: data ? formatPct(data.errorRate) : "—"
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-5 rounded-xl border border-border bg-card p-6",
+				children: [/* @__PURE__ */ jsxs("h2", {
+					className: "mb-4 text-lg font-semibold",
+					children: [
+						"Requests over time (",
+						range,
+						")"
+					]
+				}), data && data.series.some((p) => p.requestCount > 0) ? /* @__PURE__ */ jsx("div", {
+					className: "flex h-40 items-end gap-1.5",
+					children: data.series.map((point) => /* @__PURE__ */ jsx("div", {
+						title: `${point.dayUtc}: ${point.requestCount}`,
+						className: "min-w-0 flex-1 rounded-t-sm bg-primary",
+						style: { height: `${Math.max(4, point.requestCount / maxBar * 100)}%` }
+					}, point.dayUtc))
+				}) : /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: "No request data for this range yet."
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-1 gap-5 lg:grid-cols-[1.2fr_1fr]",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "rounded-xl border border-border bg-card p-6",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "mb-4 text-lg font-semibold",
+						children: "By endpoint"
+					}), data && data.byEndpoint.length > 0 ? /* @__PURE__ */ jsx("div", {
+						className: "space-y-3.5",
+						children: data.byEndpoint.map((item) => {
+							const pct = endpointTotal > 0 ? Math.round(item.count / endpointTotal * 100) : 0;
+							return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+								className: "mb-1 flex justify-between text-[13px]",
+								children: [/* @__PURE__ */ jsx("code", {
+									className: "font-mono text-foreground",
+									children: item.path
+								}), /* @__PURE__ */ jsxs("span", {
+									className: "text-muted-foreground",
+									children: [pct, "%"]
+								})]
+							}), /* @__PURE__ */ jsx("div", {
+								className: "h-1.5 rounded-full bg-muted",
+								children: /* @__PURE__ */ jsx("div", {
+									className: "h-full rounded-full bg-primary",
+									style: { width: `${pct}%` }
+								})
+							})] }, item.path);
+						})
+					}) : /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground",
+						children: "No endpoint data."
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "rounded-xl border border-border bg-card p-6",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "mb-4 text-lg font-semibold",
+						children: "Status codes"
+					}), data && data.byStatus.length > 0 ? /* @__PURE__ */ jsx("div", { children: data.byStatus.map((item) => /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between border-b border-border py-2.5 last:border-0",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-sm font-medium",
+							children: item.label
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-sm font-bold",
+							children: formatNumber(item.count)
+						})]
+					}, item.label)) }) : /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground",
+						children: "No status data."
+					})]
+				})]
 			})
 		]
 	});
@@ -1620,21 +2283,36 @@ const devPortalBillingPlugin = createPlugin((options = {}) => ({
 			{
 				path: SUBSCRIPTIONS_PATH,
 				handle: { layout: "default" },
-				element: /* @__PURE__ */ jsx(SubscriptionsPage, {})
+				element: /* @__PURE__ */ jsx(AccountLayout, {
+					includeBillingNav: true,
+					children: /* @__PURE__ */ jsx(SubscriptionsPage, {})
+				})
 			},
 			{
 				path: CREDENTIALS_PATH,
 				handle: { layout: "default" },
-				element: /* @__PURE__ */ jsx(CredentialsPage, {})
+				element: /* @__PURE__ */ jsx(AccountLayout, {
+					includeBillingNav: true,
+					children: /* @__PURE__ */ jsx(CredentialsPage, {})
+				})
+			},
+			{
+				path: USAGE_PATH,
+				handle: { layout: "default" },
+				element: /* @__PURE__ */ jsx(AccountLayout, {
+					includeBillingNav: true,
+					children: /* @__PURE__ */ jsx(UsagePage, {})
+				})
 			}
 		]
 	}],
 	getProtectedRoutes: () => [
 		CHECKOUT_PATH,
 		SUBSCRIPTIONS_PATH,
-		CREDENTIALS_PATH
+		CREDENTIALS_PATH,
+		USAGE_PATH
 	]
 }));
 
 //#endregion
-export { API_KEY_CAP_REACHED, AccountPlansPage, ApiKeysPanel, CHECKOUT_PATH, CREDENTIALS_PATH, PRICING_PATH, SUBSCRIPTIONS_PATH, devPortalBillingPlugin, useApiKeys, useCreateApiKey, useRevokeApiKey };
+export { API_KEY_CAP_REACHED, AccountPlansPage, ApiKeysPanel, CHECKOUT_PATH, CREDENTIALS_PATH, OverviewDashboardPage, PRICING_PATH, SUBSCRIPTIONS_PATH, USAGE_PATH, devPortalBillingPlugin, useApiKeys, useCreateApiKey, useRevokeApiKey };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukoweb/apitogo-plugin-dev-portal-billing",
-  "version": "0.1.88",
+  "version": "0.1.89",
   "repository": {
     "type": "git",
     "url": "https://github.com/zuplo/zudoku",
@@ -46,11 +46,13 @@
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tsdown": "0.20.3",
-    "@lukoweb/apitogo": "0.1.88"
+    "@lukoweb/apitogo": "0.1.89",
+    "@lukoweb/apitogo-module-user-panel": "0.1.89"
   },
   "peerDependencies": {
     "react": ">=19.2.0",
     "react-dom": ">=19.2.0",
-    "@lukoweb/apitogo": "*"
+    "@lukoweb/apitogo": "*",
+    "@lukoweb/apitogo-module-user-panel": "*"
   }
 }