[V0_FILE]typescriptreact:file="app/page.tsx" import type { Metadata } from "next" import DashboardPage from "@/components/dashboard-page" export const metadata: Metadata = { title: "Finance Tracker", description: "Track your finances, loans, savings, and more.", } export default function Home() { return } [V0_FILE]typescriptreact:file="components/dashboard-page.tsx" "use client" import { useState } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Overview } from "@/components/overview" import { RecentTransactions } from "@/components/recent-transactions" import { AccountSummary } from "@/components/account-summary" import { FinancialGoals } from "@/components/financial-goals" import { AddTransactionForm } from "@/components/add-transaction-form" import { Button } from "@/components/ui/button" import { Plus } from "lucide-react" import { LoansOverview } from "@/components/loans-overview" import { SavingsOverview } from "@/components/savings-overview" export default function DashboardPage() { const [showAddTransaction, setShowAddTransaction] = useState(false) return (

Finance Dashboard

{showAddTransaction && ( Add New Transaction Record a new expense or income setShowAddTransaction(false)} /> )}

Total Balance

$12,580.00

+$1,245.00 from last month

Monthly Income

$4,395.00

+2.5% from last month

Monthly Expenses

$2,860.00

+18.1% from last month

Savings Rate

34.9%

-4% from last month

Overview Accounts Loans Savings Goals

Financial Overview Recent Transactions You made 12 transactions this month.

) } [V0_FILE]typescriptreact:file="components/overview.tsx" "use client" import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" const data = [ { name: "Jan", Income: 4000, Expenses: 2400, Savings: 1600, }, { name: "Feb", Income: 4200, Expenses: 2800, Savings: 1400, }, { name: "Mar", Income: 4100, Expenses: 2700, Savings: 1400, }, { name: "Apr", Income: 4500, Expenses: 2900, Savings: 1600, }, { name: "May", Income: 4300, Expenses: 3100, Savings: 1200, }, { name: "Jun", Income: 4800, Expenses: 3000, Savings: 1800, }, ] export function Overview() { return ( ) } [V0_FILE]typescriptreact:file="components/recent-transactions.tsx" import { Avatar } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { ArrowDownIcon, ShoppingBag, Home, Car, Coffee, Utensils } from "lucide-react" const transactions = [ { id: "1", description: "Grocery Shopping", amount: -120.5, date: "Today", category: "Food", icon: ShoppingBag, }, { id: "2", description: "Salary Deposit", amount: 2400.0, date: "Yesterday", category: "Income", icon: ArrowDownIcon, }, { id: "3", description: "Rent Payment", amount: -1200.0, date: "Mar 1", category: "Housing", icon: Home, }, { id: "4", description: "Car Insurance", amount: -89.99, date: "Feb 28", category: "Insurance", icon: Car, }, { id: "5", description: "Coffee Shop", amount: -4.5, date: "Feb 27", category: "Food", icon: Coffee, }, { id: "6", description: "Restaurant Dinner", amount: -65.3, date: "Feb 26", category: "Food", icon: Utensils, }, ] export function RecentTransactions() { return (

{transactions.map((transaction) => (

{transaction.description}

{transaction.date}

0 ? "text-green-500" : "text-red-500"}> {transaction.amount > 0 ? "+" : ""}${Math.abs(transaction.amount).toFixed(2)}

{transaction.category}

))}

) } [V0_FILE]typescriptreact:file="components/account-summary.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { CreditCard, Landmark, Wallet } from "lucide-react" const accounts = [ { id: "1", name: "Main Checking", type: "checking", balance: 4580.21, institution: "Chase Bank", lastUpdated: "Today", icon: Landmark, }, { id: "2", name: "Savings Account", type: "savings", balance: 8000.0, institution: "Chase Bank", lastUpdated: "Today", icon: Wallet, }, { id: "3", name: "Credit Card", type: "credit", balance: -1250.3, limit: 5000, institution: "American Express", lastUpdated: "Yesterday", icon: CreditCard, }, ] export function AccountSummary() { return (

{accounts.map((account) => (

{account.name}

{account.type === "credit" ? "-" : ""}${Math.abs(account.balance).toFixed(2)}

{account.institution} • Updated {account.lastUpdated}

{account.type === "credit" && account.limit && (

Credit Used {Math.round((Math.abs(account.balance) / account.limit) * 100)}%

${Math.abs(account.balance).toFixed(2)} of ${account.limit} limit

)} ))}

) } [V0_FILE]typescriptreact:file="components/loans-overview.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Button } from "@/components/ui/button" import { Car, GraduationCap, Home } from "lucide-react" const loans = [ { id: "1", name: "Mortgage", originalAmount: 250000, currentBalance: 198450.32, interestRate: 3.25, monthlyPayment: 1087.62, nextPaymentDate: "Apr 1, 2025", icon: Home, }, { id: "2", name: "Car Loan", originalAmount: 28000, currentBalance: 12450.75, interestRate: 4.5, monthlyPayment: 450.3, nextPaymentDate: "Mar 15, 2025", icon: Car, }, { id: "3", name: "Student Loan", originalAmount: 45000, currentBalance: 22340.18, interestRate: 5.25, monthlyPayment: 380.45, nextPaymentDate: "Mar 21, 2025", icon: GraduationCap, }, ] export function LoansOverview() { return (

{loans.map((loan) => (

{loan.name}

${loan.currentBalance.toFixed(2)}

{((loan.currentBalance / loan.originalAmount) * 100).toFixed(1)}% remaining • {loan.interestRate}% interest

Paid Off {(100 - (loan.currentBalance / loan.originalAmount) * 100).toFixed(1)}%

Next Payment

${loan.monthlyPayment} on {loan.nextPaymentDate}

))}

) } [V0_FILE]typescriptreact:file="components/savings-overview.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Button } from "@/components/ui/button" import { Briefcase, Home, Plane, Umbrella } from "lucide-react" const savingsAccounts = [ { id: "1", name: "Emergency Fund", currentAmount: 12000, targetAmount: 15000, monthlyContribution: 300, icon: Umbrella, }, { id: "2", name: "Vacation Fund", currentAmount: 2450, targetAmount: 5000, monthlyContribution: 200, targetDate: "Dec 2025", icon: Plane, }, { id: "3", name: "House Down Payment", currentAmount: 35000, targetAmount: 60000, monthlyContribution: 800, targetDate: "Jun 2026", icon: Home, }, { id: "4", name: "Retirement", currentAmount: 78500, monthlyContribution: 500, icon: Briefcase, }, ] export function SavingsOverview() { return (

{savingsAccounts.map((account) => (

{account.name}

${account.currentAmount.toFixed(2)}

${account.monthlyContribution}/month contribution

{account.targetAmount && (

Progress {Math.round((account.currentAmount / account.targetAmount) * 100)}%

${account.currentAmount} of ${account.targetAmount} goal {account.targetDate && ` • Target: ${account.targetDate}`}

)}

))}

) } [V0_FILE]typescriptreact:file="components/financial-goals.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Briefcase, Car, Home, Plus, Trash2 } from "lucide-react" const initialGoals = [ { id: "1", name: "Buy a House", currentAmount: 35000, targetAmount: 60000, targetDate: "2026-06-30", category: "housing", icon: Home, }, { id: "2", name: "New Car", currentAmount: 8000, targetAmount: 25000, targetDate: "2025-12-31", category: "transportation", icon: Car, }, { id: "3", name: "Early Retirement", currentAmount: 78500, targetAmount: 500000, targetDate: "2040-01-01", category: "retirement", icon: Briefcase, }, ] export function FinancialGoals() { const [goals, setGoals] = useState(initialGoals) const [showAddGoal, setShowAddGoal] = useState(false) const [newGoal, setNewGoal] = useState({ name: "", targetAmount: "", targetDate: "", category: "", }) const handleAddGoal = () => { if (newGoal.name && newGoal.targetAmount && newGoal.targetDate && newGoal.category) { const goalToAdd = { id: Date.now().toString(), name: newGoal.name, currentAmount: 0, targetAmount: Number.parseFloat(newGoal.targetAmount), targetDate: newGoal.targetDate, category: newGoal.category, icon: Home, // Default icon } setGoals([...goals, goalToAdd]) setNewGoal({ name: "", targetAmount: "", targetDate: "", category: "" }) setShowAddGoal(false) } } const handleDeleteGoal = (id: string) => { setGoals(goals.filter((goal) => goal.id !== id)) } return (

Financial Goals

{showAddGoal && ( Create New Goal Set a new financial goal to track your progress

Goal Name setNewGoal({ ...newGoal, name: e.target.value })} />

Target Amount ($) setNewGoal({ ...newGoal, targetAmount: e.target.value })} />

Target Date setNewGoal({ ...newGoal, targetDate: e.target.value })} />

Category

Description

</div>

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div className="space-y-2">
          <Label htmlFor="account">Account</Label>
          <Select>
            <SelectTrigger id="account">
              <SelectValue placeholder="Select account" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="checking">Main Checking</SelectItem>
              <SelectItem value="savings">Savings Account</SelectItem>
              <SelectItem value="credit">Credit Card</SelectItem>
              <SelectItem value="cash">Cash</SelectItem>
            </SelectContent>
          </Select>
        </div>

{transactionType === "transfer" && (
          <div className="space-y-2">
            <Label htmlFor="to-account">To Account</Label>
            <Select>
              <SelectTrigger id="to-account">
                <SelectValue placeholder="Select destination" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="checking">Main Checking</SelectItem>
                <SelectItem value="savings">Savings Account</SelectItem>
                <SelectItem value="credit">Credit Card</SelectItem>
                <SelectItem value="cash">Cash</SelectItem>
              </SelectContent>
            </Select>
          </div>
        )}
      </div>

<div className="flex justify-end space-x-2">
        <Button type="button" variant="outline" onClick={onComplete}>
          Cancel
        </Button>
        <Button type="submit">Save Transaction</Button>
      </div>
    </form>
  )
}

[V0_FILE]typescriptreact:file="lib/utils.ts"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

[V0_FILE]typescriptreact:file="tailwind.config.js"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}
</article></body></html>

About

About