Redesign billing pages to match cost breakdown page design

[izadoesdev]

Description

The billing pages (Overview, Plans, History tabs) should be redesigned to match the modern design aesthetic of the Cost Breakdown page.

Current State

Cost Breakdown Page (Reference Design)

Located at: apps/dashboard/app/(main)/billing/cost-breakdown/page.tsx

Design features:

• Clean gradient header background (bg-gradient-to-r from-background to-muted/20)
• Icon in rounded container with colored border (rounded-xl border border-primary/20 bg-primary/10)
• Modern typography with tracking-tight
• Two-column flex layout for main content
• Consistent spacing and padding
• Experimental badge styling

Billing Tabs (Need Redesign)

Located at: apps/dashboard/app/(main)/billing/page.tsx

Current tabs:

• Overview Tab (components/overview-tab.tsx)
• Plans Tab (components/plans-tab.tsx)
• History Tab (components/history-tab.tsx)

Design issues:

• Header styling differs from cost breakdown
• Layout inconsistencies across tabs
• Different card styling and spacing
• Missing modern design elements

Proposed Changes

1. Update Main Billing Page Layout

• Match the header gradient and icon styling from cost breakdown
• Ensure consistent spacing and typography
• Apply same rounded container style for icons

2. Redesign Overview Tab

• Update card layouts to match cost breakdown styling
• Consistent use of badges and typography
• Modern spacing between sections
• Match color scheme and borders

3. Redesign Plans Tab

• Currently uses PricingTable component
• Ensure consistent with overall billing design system
• Match card/border styling from cost breakdown

4. Redesign History Tab

• Update invoice cards to match modern design
• Consistent badge styling
• Match spacing and typography
• Apply same color scheme

Code References

Reference (cost breakdown):

• apps/dashboard/app/(main)/billing/cost-breakdown/page.tsx
• Lines 68-92: Header design

Current billing:

• apps/dashboard/app/(main)/billing/page.tsx
• Lines 83-106: Current header styling
• apps/dashboard/app/(main)/billing/components/overview-tab.tsx
• apps/dashboard/app/(main)/billing/components/plans-tab.tsx
• apps/dashboard/app/(main)/billing/components/history-tab.tsx

Design Consistency Goals

• Unified gradient header across all billing pages
• Consistent icon container styling
• Matching typography (font-bold text-2xl tracking-tight)
• Same border and background patterns
• Consistent spacing (p-4, px-6, py-6)
• Unified color scheme and badge styling

Labels

• enhancement
• design
• good first issue