@lukoweb/apitogo-plugin-dev-portal-billing 0.2.30 → 0.2.34

package/dist/PricingPage-MTslSnCh.mjs

@@ -0,0 +1,233 @@
+import { h as pickFeaturedPlanSku, n as useDevPortalPreviewMode, p as parseManifestPlans } from "./useDevPortalApiBaseUrl-CgygF2z5.mjs";
+import { t as PricingCard } from "./PricingCard-Wra2FUX9.mjs";
+import { n as useDevPortalBillingConfig } from "./DevPortalBillingContext-CR83s4LO.mjs";
+import { t as usePlans } from "./usePlans-DUex2tzT.mjs";
+import { t as isPreviewPricingEnabled } from "./pricing-config-CfhRX9tk.mjs";
+import { i as isPricingLoading, n as buildCompareRows } from "./billing-state-pnT0H1Lm.mjs";
+import { Head, Heading } from "@lukoweb/apitogo/components";
+import { Navigate } from "@lukoweb/apitogo/router";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useAuth } from "@lukoweb/apitogo/hooks";
+
+//#region src/pages/PricingPage.tsx
+const DEFAULT_COMPARE_ROWS = [
+	{
+		label: "Monthly requests",
+		values: [
+			"1,000",
+			"50,000",
+			"500,000",
+			"Unlimited"
+		]
+	},
+	{
+		label: "Rate limit",
+		values: [
+			"10/sec",
+			"50/sec",
+			"200/sec",
+			"Custom"
+		]
+	},
+	{
+		label: "Team seats",
+		values: [
+			"1",
+			"1",
+			"5",
+			"Unlimited"
+		]
+	},
+	{
+		label: "Webhooks",
+		values: [
+			"—",
+			"Included",
+			"Included",
+			"Included"
+		]
+	},
+	{
+		label: "SSO",
+		values: [
+			"—",
+			"—",
+			"—",
+			"Included"
+		]
+	},
+	{
+		label: "Support",
+		values: [
+			"—",
+			"Email",
+			"Priority",
+			"Dedicated SLA"
+		]
+	}
+];
+const DEFAULT_FAQS = [{
+	question: "What happens if I exceed my quota?",
+	answer: "Requests over your monthly quota return a 429 response so you can test rate-limit handling instead of being cut off unexpectedly."
+}, {
+	question: "Can I change plans later?",
+	answer: "Yes, upgrade or downgrade any time from your billing page. Changes apply on your next billing cycle."
+}];
+const PricingPage = () => {
+	const { pricing, previewPlans } = useDevPortalBillingConfig();
+	const isPreview = useDevPortalPreviewMode();
+	const pricingEnabled = isPreviewPricingEnabled() || isPreview;
+	const livePlans = usePlans();
+	const catalog = isPreview ? parseManifestPlans(previewPlans) : livePlans.data;
+	const { isPending: authPending } = useAuth();
+	const isLoading = isPricingLoading({
+		isPreview,
+		plansLoading: livePlans.isLoading,
+		hasPlans: Boolean(catalog?.plans?.length),
+		plansFailed: livePlans.isError,
+		authPending
+	});
+	const isError = isPreview ? false : livePlans.isError;
+	if (!pricingEnabled) return /* @__PURE__ */ jsx(Navigate, {
+		to: "/",
+		replace: true
+	});
+	const title = pricing?.title ?? "Pay for what you call";
+	const subtitle = pricing?.subtitle ?? "Every plan includes the full endpoint catalog. Higher tiers raise your request quota, rate limit, and support level.";
+	const plans = catalog?.plans ?? [];
+	const featuredSku = pickFeaturedPlanSku(plans);
+	const compareRows = buildCompareRows({
+		plans,
+		configuredRows: pricing?.compareRows,
+		isPreview,
+		sampleRows: DEFAULT_COMPARE_ROWS
+	});
+	const faqs = pricing?.faqs && pricing.faqs.length > 0 ? pricing.faqs : DEFAULT_FAQS;
+	const compareHeaders = plans.length > 0 ? plans.map((p) => p.displayName) : [
+		"Free",
+		"Developer",
+		"Team",
+		"Enterprise"
+	];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full",
+		children: [
+			/* @__PURE__ */ jsxs(Head, { children: [/* @__PURE__ */ jsx("title", { children: title }), /* @__PURE__ */ jsx("meta", {
+				name: "description",
+				content: subtitle
+			})] }),
+			/* @__PURE__ */ jsxs("section", {
+				className: "px-6 pb-4 pt-[clamp(3rem,6vw,4.5rem)] text-center",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "text-xs font-bold uppercase tracking-[0.08em] text-primary",
+						children: "Pricing"
+					}),
+					/* @__PURE__ */ jsx(Heading, {
+						level: 1,
+						className: "mt-3 text-[clamp(2rem,3.5vw,3rem)] font-extrabold tracking-[-0.02em]",
+						"data-testid": "title",
+						children: title
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "mx-auto mt-3.5 max-w-[34rem] text-lg leading-relaxed text-muted-foreground",
+						"data-testid": "subtitle",
+						children: subtitle
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "px-6 pb-16 pt-8",
+				children: [
+					isLoading ? /* @__PURE__ */ jsx("p", {
+						className: "text-center text-muted-foreground",
+						children: "Loading plans…"
+					}) : null,
+					isError ? /* @__PURE__ */ jsx("p", {
+						className: "text-center text-destructive",
+						children: "Unable to load plans."
+					}) : null,
+					plans.length > 0 ? /* @__PURE__ */ jsx("div", {
+						className: "mx-auto grid max-w-[1200px] grid-cols-1 items-stretch gap-5 sm:grid-cols-2 lg:grid-cols-4",
+						children: plans.map((plan) => /* @__PURE__ */ jsx(PricingCard, {
+							plan,
+							mode: "public",
+							featured: plan.sku === featuredSku
+						}, plan.sku))
+					}) : !isLoading && !isError ? /* @__PURE__ */ jsx("div", {
+						className: "mx-auto max-w-lg rounded-xl border border-dashed p-8 text-center text-sm text-muted-foreground",
+						"data-testid": "pricing-empty",
+						children: isPreview ? /* @__PURE__ */ jsxs(Fragment, { children: [
+							"No plans are configured yet. Add plans in",
+							" ",
+							/* @__PURE__ */ jsx("code", {
+								className: "rounded bg-muted px-1.5 py-0.5",
+								children: "apitogo.config.json"
+							}),
+							" ",
+							"and set",
+							" ",
+							/* @__PURE__ */ jsx("code", {
+								className: "rounded bg-muted px-1.5 py-0.5",
+								children: "modules.userPanel.plans.enabled"
+							}),
+							" ",
+							"to true."
+						] }) : "Pricing is not available yet. Please check back soon."
+					}) : null
+				]
+			}),
+			isLoading || compareRows.length === 0 ? null : /* @__PURE__ */ jsx("section", {
+				className: "border-t border-border bg-muted/40 px-6 py-16",
+				"data-testid": "pricing-compare",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "mx-auto max-w-[1200px]",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "mb-6 text-[clamp(1.5rem,2.5vw,2.25rem)] font-extrabold tracking-[-0.02em]",
+						children: "Compare plans"
+					}), /* @__PURE__ */ jsx("div", {
+						className: "overflow-x-auto rounded-xl border border-border bg-card",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "min-w-[720px]",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "grid gap-0 border-b border-border px-5 py-3.5 text-[0.78125rem] font-bold uppercase tracking-[0.04em] text-muted-foreground",
+								style: { gridTemplateColumns: `minmax(10rem,1.4fr) repeat(${compareHeaders.length}, minmax(6rem,1fr))` },
+								children: [/* @__PURE__ */ jsx("div", { children: "Feature" }), compareHeaders.map((header) => /* @__PURE__ */ jsx("div", { children: header }, header))]
+							}), compareRows.map((row) => /* @__PURE__ */ jsxs("div", {
+								className: "grid gap-0 border-b border-border px-5 py-3.5 text-[0.84375rem] text-muted-foreground last:border-b-0",
+								style: { gridTemplateColumns: `minmax(10rem,1.4fr) repeat(${compareHeaders.length}, minmax(6rem,1fr))` },
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "font-medium text-foreground",
+									children: row.label
+								}), compareHeaders.map((header, index) => /* @__PURE__ */ jsx("div", { children: row.values[index] ?? "—" }, `${row.label}-${header}`))]
+							}, row.label))]
+						})
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx("section", {
+				className: "px-6 py-16",
+				"data-testid": "pricing-faq",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "mx-auto max-w-4xl",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "mb-8 text-center text-[clamp(1.5rem,2.5vw,2.25rem)] font-extrabold tracking-[-0.02em]",
+						children: "Frequently asked questions"
+					}), /* @__PURE__ */ jsx("div", { children: faqs.map((faq) => /* @__PURE__ */ jsxs("div", {
+						className: "border-b border-border py-5 last:border-b-0",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "text-[0.9375rem] font-bold",
+							children: faq.question
+						}), /* @__PURE__ */ jsx("p", {
+							className: "mt-2 text-sm leading-relaxed text-muted-foreground",
+							children: faq.answer
+						})]
+					}, faq.question)) })]
+				})
+			})
+		]
+	});
+};
+
+//#endregion
+export { PricingPage as default };

package/dist/SubscriptionsPage-9lXnVks7.mjs

@@ -0,0 +1,226 @@
+import { i as CREDENTIALS_PATH, t as ACCOUNT_PLANS_PATH } from "./paths-ujy9wjVK.mjs";
+import { c as isActiveSubscription, i as formatBillingPeriod, m as parseMonthlyQuotaCalls, o as formatPlanPrice, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-CgygF2z5.mjs";
+import "./DevPortalBillingContext-CR83s4LO.mjs";
+import { t as useMySubscriptions } from "./useMySubscriptions-CLh3eFY4.mjs";
+import { t as usePlans } from "./usePlans-DUex2tzT.mjs";
+import { t as useUsage } from "./useUsage-Cx2GB3wg.mjs";
+import { r as checkoutConfirmingText } from "./billing-state-pnT0H1Lm.mjs";
+import { Head, Spinner } from "@lukoweb/apitogo/components";
+import { Link as Link$1, useSearchParams } from "@lukoweb/apitogo/router";
+import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMutation } from "@lukoweb/apitogo/react-query";
+import { useAuth } from "@lukoweb/apitogo/hooks";
+import { Button as Button$1 } from "@lukoweb/apitogo/ui/Button.js";
+
+//#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 = () => {
+	const auth = useAuth();
+	const [searchParams] = useSearchParams();
+	const checkoutSuccess = searchParams.get("checkout") === "success";
+	const checkoutPaid = searchParams.get("paid") !== "0";
+	const { data: me, isLoading, refetch } = 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 confirmingPayment = checkoutSuccess && !isLoading && !activeSubscription;
+	useEffect(() => {
+		if (!confirmingPayment) return;
+		let attempts = 0;
+		const timer = setInterval(() => {
+			attempts += 1;
+			refetch();
+			if (attempts >= 30) clearInterval(timer);
+		}, 2e3);
+		return () => clearInterval(timer);
+	}, [confirmingPayment, refetch]);
+	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: "px-8 py-7",
+		children: [
+			/* @__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."
+			}),
+			confirmingPayment ? /* @__PURE__ */ jsx("div", {
+				className: "mb-6 rounded-xl border border-border bg-card p-4 text-sm",
+				children: checkoutConfirmingText(checkoutPaid)
+			}) : null,
+			checkoutSuccess && activeSubscription ? /* @__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$1, {
+						to: CREDENTIALS_PATH,
+						className: "font-medium underline",
+						children: "View your API credentials"
+					}),
+					"."
+				]
+			}) : null,
+			isLoading ? /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				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: "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$1, {
+					className: "mt-4",
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Link$1, {
+						to: ACCOUNT_PLANS_PATH,
+						children: "View plans"
+					})
+				})]
+			}) : null,
+			!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__ */ 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("h3", {
+								className: "font-semibold",
+								children: plan?.displayName ?? subscription.planSku
+							}), plan ? /* @__PURE__ */ jsxs("p", {
+								className: "mt-1 text-sm text-muted-foreground",
+								children: [
+									formatPlanPrice(plan),
+									" ·",
+									" ",
+									formatBillingPeriod(plan.billingPeriod)
+								]
+							}) : null] }), /* @__PURE__ */ jsx("span", {
+								className: "rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground",
+								children: subscription.status
+							})]
+						})
+					}, `${subscription.planSku}-${subscription.status}`);
+				})
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap gap-3",
+				children: [
+					/* @__PURE__ */ jsx(Button$1, {
+						variant: "outline",
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Link$1, {
+							to: ACCOUNT_PLANS_PATH,
+							children: "Change plan"
+						})
+					}),
+					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$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
+export { SubscriptionsPage as default };

package/dist/UsagePage--mg_NzrA.mjs

@@ -0,0 +1,203 @@
+import "./useDevPortalApiBaseUrl-CgygF2z5.mjs";
+import { t as useUsage } from "./useUsage-Cx2GB3wg.mjs";
+import { Head } from "@lukoweb/apitogo/components";
+import { Link as Link$1 } from "@lukoweb/apitogo/router";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useAuth } from "@lukoweb/apitogo/hooks";
+import { Button as Button$1 } from "@lukoweb/apitogo/ui/Button.js";
+
+//#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."
+					})]
+				})]
+			})
+		]
+	});
+};
+
+//#endregion
+export { UsagePage as default };