even more cleanup

Author: izadoesdev

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

@@ -3,7 +3,7 @@
 import { CreditCardIcon } from "@phosphor-icons/react";
 import { usePathname } from "next/navigation";
 
-const PAGE_TITLES = {
+const PAGE_TITLES: Record<string, { title: string; description: string }> = {
 	"/billing": {
 		title: "Usage & Metrics",
 		description: "Monitor your usage and billing metrics",
@@ -25,12 +25,11 @@ const DEFAULT_TITLE = {
 
 export function BillingHeader() {
 	const pathname = usePathname();
-	const { title, description } =
-		PAGE_TITLES[pathname as keyof typeof PAGE_TITLES] ?? DEFAULT_TITLE;
+	const { title, description } = PAGE_TITLES[pathname] ?? DEFAULT_TITLE;
 
 	return (
 		<div className="border-b bg-linear-to-r from-background via-background to-muted/20">
-			<div className="flex flex-col justify-between gap-3 p-4 sm:flex-row sm:items-center sm:gap-0 sm:px-6 sm:py-6">
+			<div className="flex h-24 items-center px-4 sm:px-6">
 				<div className="min-w-0 flex-1">
 					<div className="flex items-center gap-4">
 						<div className="rounded-xl border border-primary/20 bg-primary/10 p-3">

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

@@ -200,15 +200,11 @@ function SubscriptionItem({ product }: { product: ProductStatus }) {
 			<div
 				className={cn(
 					"mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full",
-					isActive ? "bg-emerald-500/10" : "bg-muted"
+					isActive ? "bg-primary/10" : "bg-muted"
 				)}
 			>
 				{isActive ? (
-					<CheckCircleIcon
-						className="text-emerald-500"
-						size={14}
-						weight="fill"
-					/>
+					<CheckCircleIcon className="text-primary" size={14} weight="fill" />
 				) : (
 					<ClockIcon className="text-muted-foreground" size={14} />
 				)}
@@ -219,10 +215,7 @@ function SubscriptionItem({ product }: { product: ProductStatus }) {
 						{product.name || product.id}
 					</span>
 					{isActive && (
-						<Badge
-							className="bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
-							variant="secondary"
-						>
+						<Badge className="bg-primary/10 text-primary" variant="secondary">
 							Active
 						</Badge>
 					)}
@@ -296,13 +289,15 @@ function BillingSummary({ invoices }: { invoices: CustomerInvoice[] }) {
 function EmptyInvoices() {
 	return (
 		<div className="flex flex-col items-center justify-center py-16 text-center">
-			<ReceiptIcon
-				className="mb-3 text-muted-foreground"
-				size={32}
-				weight="duotone"
-			/>
-			<p className="font-medium">No invoices yet</p>
-			<p className="text-muted-foreground text-sm">
+			<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-muted">
+				<ReceiptIcon
+					className="text-muted-foreground"
+					size={24}
+					weight="duotone"
+				/>
+			</div>
+			<p className="font-semibold">No invoices yet</p>
+			<p className="mt-1 max-w-xs text-muted-foreground text-sm">
 				Invoices will appear here after your first payment
 			</p>
 		</div>

apps/dashboard/app/(main)/billing/types/billing.ts

@@ -30,18 +30,3 @@ export type PaymentMethod = {
 export type CustomerWithPaymentMethod = AutumnCustomer & {
     payment_method?: PaymentMethod;
 };
-
-export type InvoiceStatus =
-    | "paid"
-    | "open"
-    | "pending"
-    | "failed"
-    | "draft"
-    | "void";
-
-export type InvoiceStatusConfig = {
-    variant: "default" | "secondary" | "destructive" | "outline";
-    className: string;
-    text: string;
-};
-