fix: event limit indicator

Author: izadoesdev

apps/dashboard/components/analytics/event-limit-indicator.tsx

@@ -2,12 +2,11 @@
 
 import { WarningIcon } from "@phosphor-icons/react";
 import { useQuery } from "@tanstack/react-query";
-import { useRouter } from "next/navigation";
-import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { buttonVariants } from "@/components/ui/button";
 import { orpc } from "@/lib/orpc";
 
 export function EventLimitIndicator() {
-	const router = useRouter();
 	const { data } = useQuery({
 		...orpc.organizations.getUsage.queryOptions(),
 	});
@@ -18,12 +17,17 @@ export function EventLimitIndicator() {
 
 	const balance = data.balance ?? 0;
 	const planLimit = data.includedUsage ?? 0;
+	const overageAllowed = data.overageAllowed ?? false;
 
 	// Balance > Plan limit = Bonus credits, show remaining
 	// Balance < Plan limit = Normal usage, balance is remaining
 	// Balance < 0 = Overage
 
 	if (balance < 0) {
+		// Don't show overage warning if user is allowed to have overage
+		if (overageAllowed) {
+			return null;
+		}
 		// Overage state
 		const overage = Math.abs(balance);
 		return (
@@ -40,14 +44,16 @@ export function EventLimitIndicator() {
 					</div>
 				</div>
 				{data.canUserUpgrade ? (
-					<Button
-						className="h-6 px-2 text-xs"
-						onClick={() => router.push("/billing?tab=plans")}
-						size="sm"
-						variant="ghost"
+					<Link
+						className={buttonVariants({
+							variant: "ghost",
+							size: "sm",
+							className: "h-6 px-2 text-xs",
+						})}
+						href="/billing/plans"
 					>
 						Upgrade
-					</Button>
+					</Link>
 				) : (
 					<span className="text-muted-foreground text-xs">Contact owner</span>
 				)}
@@ -86,14 +92,16 @@ export function EventLimitIndicator() {
 				</div>
 			</div>
 			{data.canUserUpgrade ? (
-				<Button
-					className="h-6 px-2 text-xs"
-					onClick={() => router.push("/billing?tab=plans")}
-					size="sm"
-					variant="ghost"
+				<Link
+					className={buttonVariants({
+						variant: "ghost",
+						size: "sm",
+						className: "h-6 px-2 text-xs",
+					})}
+					href="/billing/plans"
 				>
 					Upgrade
-				</Button>
+				</Link>
 			) : (
 				<span className="text-muted-foreground text-xs">Contact owner</span>
 			)}

packages/rpc/src/routers/organizations.ts

@@ -260,6 +260,7 @@ export const organizationsRouter = {
 			const unlimited = data.unlimited ?? false;
 			const balance = data.balance ?? 0;
 			const includedUsage = data.included_usage ?? 0;
+			const overageAllowed = data.overage_allowed ?? false;
 
 			const remaining = unlimited ? null : Math.max(0, usageLimit - used);
 
@@ -270,6 +271,7 @@ export const organizationsRouter = {
 				balance,
 				remaining,
 				includedUsage,
+				overageAllowed,
 				isOrganizationUsage: Boolean(orgResult?.activeOrgId),
 				canUserUpgrade:
 					!orgResult?.activeOrgId || orgResult.ownerId === context.user.id,