Bills & Goals

The bills page tracks recurring payments and subscriptions with timeline and projection views. The goals page helps users set savings targets, monitor progress, and log contributions toward their financial objectives.

Bills & Subscriptions

Route: /bills

The bills page uses a tabbed layout to separate upcoming bill payments from subscription management.

Tab Structure

Tab	Content
Upcoming Bills	Bills timeline + annual projection chart
Subscriptions	Subscription grid with monthly costs

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"

<Tabs defaultValue="upcoming">
  <TabsTrigger value="upcoming">Upcoming Bills</TabsTrigger>
  <TabsTrigger value="subscriptions">Subscriptions</TabsTrigger>
</Tabs>

Bills Timeline

The BillsTimeline component displays upcoming bill payments in chronological order:

• Bill cards with icon, name, amount, and due date
• Status badges -- upcoming, paid, or overdue
• Recurrence label -- weekly, biweekly, monthly, quarterly, or annually
• Auto-pay indicator -- whether the bill is set for automatic payment
• Account linkage -- which account the payment is drawn from

import { BillsTimeline } from "@/components/bills/bills-timeline"
import { BillCard } from "@/components/bills/bill-card"

<BillsTimeline bills={bills} />

Annual Projection Chart

A Recharts chart showing projected annual spending for all recurring bills and subscriptions, helping users understand their total committed costs over the year.

import { AnnualProjectionChart } from "@/components/bills/annual-projection-chart"

<AnnualProjectionChart bills={bills} />

Subscription Grid

The SubscriptionGrid filters bills to show only subscriptions (isSubscription: true) in a card grid layout:

Each SubscriptionCard shows:

• Service icon and name
• Monthly cost with annual cost breakdown
• Category association
• Billing frequency (monthly, annually, etc.)
• Status (active, cancelled)

import { SubscriptionGrid } from "@/components/bills/subscription-grid"
import { SubscriptionCard } from "@/components/bills/subscription-card"

<SubscriptionGrid bills={bills} />

Add Bill Dialog

A dialog form for adding a new bill or subscription with fields for name, amount, due date, recurrence, category, account, and subscription toggle.

import { AddBillDialog } from "@/components/bills/add-bill-dialog"

<AddBillDialog />

Bill TypeScript Interface

interface Bill {
  id: string
  name: string
  icon: string
  amount: number
  dueDate: string
  recurrence: BillRecurrence // "weekly" | "biweekly" | "monthly" | "quarterly" | "annually"
  categoryId: string
  accountId: string
  status: BillStatus // "upcoming" | "paid" | "overdue"
  isSubscription: boolean
  annualCost: number
}

Savings Goals

Route: /goals

The goals page helps users define savings targets, track progress, and record contributions.

Stats Row

Three summary stat cards at the top of the page:

Stat	Icon	Description
Total Saved	PiggyBank	Sum of current amounts across all goals
Monthly Contributions	TrendingUp	Sum of monthly contributions for active goals
Active Goals	Target	Count of goals with status "active"

Goal Grid

The GoalGrid component renders goal cards in a responsive grid layout:

Each GoalCard displays:

• Goal emoji and name
• Progress ring -- circular progress indicator showing percentage toward target
• Current amount vs target amount
• Monthly contribution amount
• Target date with countdown
• Status badge -- active, completed, or paused

import { GoalGrid } from "@/components/goals/goal-grid"
import { GoalCard } from "@/components/goals/goal-card"

<GoalGrid goals={goals} />

Goal Detail Sheet

A slide-out sheet showing comprehensive goal information:

• Full progress visualization with percentage and amounts
• Contribution history -- chronological list of all past contributions with dates and amounts
• Projected completion based on current contribution rate
• Start date and target date

import { GoalDetailSheet } from "@/components/goals/goal-detail-sheet"

Contribution Modal

A modal dialog for recording a new contribution toward a goal:

• Amount input with currency formatting
• Goal selection (when accessed from the general context)
• Date for the contribution

import { ContributionModal } from "@/components/goals/contribution-modal"

Create Goal Dialog

A dialog form for creating a new savings goal with fields for name, emoji, target amount, monthly contribution, start date, and target date.

import { CreateGoalDialog } from "@/components/goals/create-goal-dialog"

<CreateGoalDialog />

Goal TypeScript Interface

interface Goal {
  id: string
  name: string
  emoji: string
  targetAmount: number
  currentAmount: number
  monthlyContribution: number
  startDate: string
  targetDate: string
  status: GoalStatus // "active" | "completed" | "paused"
  contributions: { date: string; amount: number }[]
}

Data Sources

Data	Source	Location
Bills	bills	data/seed.ts
Goals	goals	data/seed.ts
Categories	categories	data/seed.ts
Accounts	accounts	data/seed.ts

Next Steps

• Reports & Settings -- financial reports and application preferences
• Dashboard & Transactions -- overview and transaction ledger