fix: usage based

Author: izadoesdev

apps/dashboard/app/(main)/billing/components/overview-tab.tsx

@@ -25,7 +25,7 @@ import { Progress } from '@/components/ui/progress';
 import { Separator } from '@/components/ui/separator';
 import { Skeleton } from '@/components/ui/skeleton';
 import { cn } from '@/lib/utils';
-import { type FeatureUsage, useBillingData } from '../data/billing-data';
+import { type FeatureUsage, useBillingData } from '../hooks/use-billing';
 import { CancelSubscriptionDialog } from './cancel-subscription-dialog';
 import { NoPaymentMethodDialog } from './no-payment-method-dialog';
 

apps/dashboard/app/(main)/billing/data/billing-data.ts

@@ -1,9 +1,26 @@
-import { useAutumn } from 'autumn-js/react';
+import type { Customer, CustomerProduct } from 'autumn-js';
+import { useAutumn, useCustomer, usePricingTable } from 'autumn-js/react';
 import dayjs from 'dayjs';
 import { useState } from 'react';
 import { toast } from 'sonner';
 import AttachDialog from '@/components/autumn/attach-dialog';
-import type { Customer, CustomerProduct } from '../data/billing-data';
+
+export type FeatureUsage = {
+	id: string;
+	name: string;
+	used: number;
+	limit: number;
+	unlimited: boolean;
+	nextReset: string | null;
+	interval: string | null;
+};
+
+export type Usage = {
+	features: FeatureUsage[];
+};
+
+// Re-export types for compatibility
+export type { Customer, CustomerInvoice as Invoice } from 'autumn-js';
 
 export function useBilling(refetch?: () => void) {
 	const { attach, cancel, check, track, openBillingPortal } = useAutumn();
@@ -26,8 +43,12 @@ export function useBilling(refetch?: () => void) {
 				dialog: AttachDialog,
 				successUrl: `${window.location.origin}/billing`,
 			});
-		} catch (error: any) {
-			toast.error(error.message || 'An unexpected error occurred.');
+		} catch (error) {
+			const message =
+				error instanceof Error
+					? error.message
+					: 'An unexpected error occurred.';
+			toast.error(message);
 		} finally {
 			setIsActionLoading(false);
 		}
@@ -48,8 +69,12 @@ export function useBilling(refetch?: () => void) {
 			if (refetch) {
 				setTimeout(() => refetch(), 500);
 			}
-		} catch (error: any) {
-			toast.error(error.message || 'Failed to cancel subscription.');
+		} catch (error) {
+			const message =
+				error instanceof Error
+					? error.message
+					: 'Failed to cancel subscription.';
+			toast.error(message);
 		} finally {
 			setIsLoading(false);
 		}
@@ -79,15 +104,12 @@ export function useBilling(refetch?: () => void) {
 	};
 
 	const getSubscriptionStatus = (product: CustomerProduct) => {
-		if (product.status === 'canceled') {
-			return 'Cancelled';
+		if (product.canceled_at) {
+			return 'Cancelling';
 		}
 		if (product.status === 'scheduled') {
 			return 'Scheduled';
 		}
-		if (product.canceled_at) {
-			return 'Cancelling';
-		}
 		return 'Active';
 	};
 
@@ -114,13 +136,19 @@ export function useBilling(refetch?: () => void) {
 			return null;
 		}
 
+		const includedUsage = feature.included_usage || 0;
+		const balance = feature.balance || 0;
+		// Calculate used amount: included_usage - balance
+		// If usage field exists and is greater, use that instead (for accuracy)
+		const calculatedUsed = Math.max(0, includedUsage - balance);
+		const reportedUsage = feature.usage || 0;
+		const actualUsed = Math.max(calculatedUsed, reportedUsage);
+
 		return {
 			id: feature.id,
 			name: feature.name,
-			used: feature.usage,
-			limit: feature.unlimited
-				? Number.POSITIVE_INFINITY
-				: feature.included_usage,
+			used: actualUsed,
+			limit: feature.unlimited ? Number.POSITIVE_INFINITY : includedUsage,
 			unlimited: feature.unlimited,
 			nextReset: feature.next_reset_at
 				? dayjs(feature.next_reset_at).format('MMM D, YYYY')
@@ -148,3 +176,64 @@ export function useBilling(refetch?: () => void) {
 		getFeatureUsage,
 	};
 }
+
+// Consolidated billing data hook
+export function useBillingData() {
+	const {
+		customer,
+		isLoading: isCustomerLoading,
+		refetch: refetchCustomer,
+	} = useCustomer({
+		expand: ['invoices'],
+	});
+
+	const {
+		products,
+		isLoading: isPricingLoading,
+		refetch: refetchPricing,
+	} = usePricingTable();
+
+	const isLoading = isCustomerLoading || isPricingLoading;
+
+	const refetch = () => {
+		refetchCustomer();
+		if (typeof refetchPricing === 'function') {
+			refetchPricing();
+		}
+	};
+
+	const usage: Usage = {
+		features: customer
+			? Object.values(customer.features).map((feature) => {
+					const includedUsage = feature.included_usage || 0;
+					const balance = feature.balance || 0;
+					// Calculate used amount: included_usage - balance
+					// If usage field exists and is greater, use that instead (for accuracy)
+					const calculatedUsed = Math.max(0, includedUsage - balance);
+					const reportedUsage = feature.usage || 0;
+					const actualUsed = Math.max(calculatedUsed, reportedUsage);
+
+					return {
+						id: feature.id,
+						name: feature.name,
+						used: actualUsed,
+						limit: feature.unlimited ? Number.POSITIVE_INFINITY : includedUsage,
+						unlimited: !!feature.unlimited,
+						nextReset: feature.next_reset_at
+							? new Date(feature.next_reset_at).toLocaleDateString()
+							: null,
+						interval: feature.interval || null,
+					};
+				})
+			: [],
+	};
+
+	return {
+		products: products || [],
+		usage,
+		customer,
+		customerData: customer, // Alias for backward compatibility
+		isLoading,
+		refetch,
+	};
+}

apps/dashboard/app/(main)/billing/hooks/use-billing.ts

@@ -8,7 +8,7 @@ import {
 	type Customer,
 	type Invoice,
 	useBillingData,
-} from './data/billing-data';
+} from './hooks/use-billing';
 
 const OverviewTab = lazy(() =>
 	import('./components/overview-tab').then((m) => ({ default: m.OverviewTab }))

apps/dashboard/app/(main)/billing/page.tsx

@@ -2,7 +2,7 @@
 
 import { WarningIcon } from '@phosphor-icons/react';
 import { useRouter } from 'next/navigation';
-import { useBillingData } from '@/app/(main)/billing/data/billing-data';
+import { useBillingData } from '@/app/(main)/billing/hooks/use-billing';
 import { Button } from '@/components/ui/button';
 
 export function EventLimitIndicator() {