[V0_FILE]typescriptreact:file="src/components/ExpenseSummary.tsx" isMerged="true" import { motion } from "framer-motion" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ArrowDownIcon, ArrowUpIcon, DollarSign } from "lucide-react" export default function ExpenseSummary() { return (

Total Expenses

$1,234.56

+20.1% from last month

Highest Expense

$299.99

Electronics category

Lowest Expense

$5.99

Food & Drinks category

) } [V0_FILE]typescriptreact:file="src/components/AddExpenseModal.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { X } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" interface AddExpenseModalProps { isOpen: boolean onClose: () => void } export default function AddExpenseModal({ isOpen, onClose }: AddExpenseModalProps) { const [description, setDescription] = useState("") const [amount, setAmount] = useState("") const [category, setCategory] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle form submission logic here console.log({ description, amount, category }) onClose() } return ( {isOpen && (

Add New Expense

)} ) } [V0_FILE]typescriptreact:file="src/components/Footer.tsx" isEdit="true" isMerged="true" import { Facebook, Twitter, Instagram } from "lucide-react" import Link from "next/link" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="src/components/SummaryCards.tsx" isMerged="true" import { motion } from "framer-motion" import { ArrowDownIcon, ArrowUpIcon, CreditCard, DollarSign, PiggyBank } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" const summaryData = [ { title: "Total Income", amount: "$5,231.89", icon: DollarSign, color: "text-green-600", bgColor: "bg-green-100", change: "+20.1%", changeType: "positive", }, { title: "Total Expenses", amount: "$3,045.50", icon: ArrowUpIcon, color: "text-red-600", bgColor: "bg-red-100", change: "+4.75%", changeType: "negative", }, { title: "Net Savings", amount: "$2,186.39", icon: PiggyBank, color: "text-blue-600", bgColor: "bg-blue-100", change: "+12.5%", changeType: "positive", }, { title: "Upcoming EMIs", amount: "$650.00", icon: CreditCard, color: "text-yellow-600", bgColor: "bg-yellow-100", change: "2 due this month", changeType: "neutral", }, ] export default function SummaryCards() { return (

{summaryData.map((item, index) => ( {item.title}

{item.amount}

{item.changeType === "positive" && } {item.changeType === "negative" && } {item.change}

))}

) } [V0_FILE]typescriptreact:file="src/components/MonthlyChart.tsx" isMerged="true" import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" const data = [ { month: "Jan", income: 4000, expenses: 2400 }, { month: "Feb", income: 3000, expenses: 1398 }, { month: "Mar", income: 2000, expenses: 9800 }, { month: "Apr", income: 2780, expenses: 3908 }, { month: "May", income: 1890, expenses: 4800 }, { month: "Jun", income: 2390, expenses: 3800 }, ] export default function MonthlyChart() { return ( ) } [V0_FILE]typescriptreact:file="src/components/SpendingPieChart.tsx" isMerged="true" import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts" const data = [ { name: "Food", value: 400 }, { name: "Transport", value: 300 }, { name: "Rent", value: 800 }, { name: "Utilities", value: 200 }, { name: "Entertainment", value: 150 }, ] const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884d8"] export default function SpendingPieChart() { return ( `${name} ${(percent * 100).toFixed(0)}%`} > {data.map((entry, index) => ( ))} ) } [V0_FILE]typescriptreact:file="src/components/RecentTransactions.tsx" isMerged="true" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { ArrowDownIcon, ArrowUpIcon } from "lucide-react" const recentTransactions = [ { id: 1, date: "2023-06-01", type: "Expense", description: "Grocery shopping", amount: 85.5, category: "Food", account: "Credit Card", }, { id: 2, date: "2023-06-03", type: "Income", description: "Salary", amount: 3000.0, category: "Salary", account: "Bank Account", }, { id: 3, date: "2023-06-05", type: "Expense", description: "Gas station", amount: 45.0, category: "Transport", account: "Debit Card", }, { id: 4, date: "2023-06-07", type: "Expense", description: "Restaurant dinner", amount: 78.25, category: "Food", account: "Credit Card", }, { id: 5, date: "2023-06-10", type: "Expense", description: "Mobile phone bill", amount: 60.0, category: "Utilities", account: "Bank Account", }, { id: 6, date: "2023-06-12", type: "Income", description: "Freelance work", amount: 500.0, category: "Side Hustle", account: "PayPal", }, { id: 7, date: "2023-06-15", type: "Expense", description: "Movie tickets", amount: 30.0, category: "Entertainment", account: "Credit Card", }, { id: 8, date: "2023-06-18", type: "Expense", description: "Gym membership", amount: 50.0, category: "Health", account: "Debit Card", }, { id: 9, date: "2023-06-20", type: "Income", description: "Dividend payment", amount: 75.5, category: "Investment", account: "Investment Account", }, { id: 10, date: "2023-06-22", type: "Expense", description: "Online course", amount: 199.99, category: "Education", account: "Credit Card", }, ] export default function RecentTransactions() { return ( Date Type Description Category Account Amount {recentTransactions.map((transaction) => ( {transaction.date} {transaction.type === "Income" ? ( Income ) : ( Expense )} {transaction.description} {transaction.category} {transaction.account} ${transaction.amount.toFixed(2)} ))}

) } [V0_FILE]typescriptreact:file="src/components/UpcomingPayments.tsx" isMerged="true" import { motion } from "framer-motion" import { AlertTriangle, Check } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" const upcomingPayments = [ { id: 1, dueDate: "2023-06-30", description: "Car Loan EMI", amount: 450, isOverdue: false }, { id: 2, dueDate: "2023-06-25", description: "Credit Card Bill", amount: 200, isOverdue: true }, { id: 3, dueDate: "2023-07-05", description: "Home Rent", amount: 1200, isOverdue: false }, { id: 4, dueDate: "2023-07-10", description: "Internet Bill", amount: 50, isOverdue: false }, ] export default function UpcomingPayments() { return ( Upcoming Payments

{payment.isOverdue && }

{payment.description}

Due: {payment.dueDate}

${payment.amount}

) } [V0_FILE]typescriptreact:file="src/components/QuickActions.tsx" isMerged="true" import { motion } from "framer-motion" import { DollarSign, PlusCircle, CreditCard, BarChart } from "lucide-react" import { Button } from "@/components/ui/button" const actions = [ { icon: PlusCircle, label: "Add Expense", color: "bg-red-500 hover:bg-red-600" }, { icon: DollarSign, label: "Add Income", color: "bg-green-500 hover:bg-green-600" }, { icon: CreditCard, label: "Add EMI", color: "bg-yellow-500 hover:bg-yellow-600" }, { icon: BarChart, label: "View Reports", color: "bg-blue-500 hover:bg-blue-600" }, ] export default function QuickActions() { return (

{actions.map((action, index) => ( ))}

) } [V0_FILE]typescriptreact:file="src/pages/expenses.tsx" isMerged="true" import { useState } from "react" import { Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import Header from "@/components/Header" import Footer from "@/components/Footer" import ExpenseFilters from "@/components/ExpenseFilters" import ExpenseList from "@/components/ExpenseList" import ExpensePagination from "@/components/ExpensePagination" import AddEditExpenseModal from "@/components/AddEditExpenseModal" export default function ExpensesPage() { const [isModalOpen, setIsModalOpen] = useState(false) const [currentPage, setCurrentPage] = useState(1) const [editingExpense, setEditingExpense] = useState(null) const openAddModal = () => { setEditingExpense(null) setIsModalOpen(true) } const openEditModal = (expense) => { setEditingExpense(expense) setIsModalOpen(true) } return (

Expenses

) } [V0_FILE]typescriptreact:file="src/app/dashboard/page.tsx" isEdit="true" isMerged="true" import Dashboard from "../components/Dashboard" export default function DashboardPage() { return } [V0_FILE]typescriptreact:file="src/app/incomes/page.tsx" isMerged="true" export default function IncomesPage() { return } [V0_FILE]typescriptreact:file="src/components/Incomes/IncomesPage.tsx" isMerged="true" "use client" import { useState } from "react" import { Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import IncomeFilters from "./IncomeFilters" import IncomeList from "./IncomeList" import IncomePagination from "./IncomePagination" import AddEditIncomeModal from "./AddEditIncomeModal" export default function IncomesPage() { const [isModalOpen, setIsModalOpen] = useState(false) const [currentPage, setCurrentPage] = useState(1) const [editingIncome, setEditingIncome] = useState(null) const openAddModal = () => { setEditingIncome(null) setIsModalOpen(true) } const openEditModal = (income) => { setEditingIncome(income) setIsModalOpen(true) } return (

Incomes

setIsModalOpen(false)} income={editingIncome} />

) } [V0_FILE]typescriptreact:file="src/components/Incomes/IncomeFilters.tsx" isMerged="true" import { useState } from "react" import { CalendarIcon, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Calendar } from "@/components/ui/calendar" import { format } from "date-fns" export default function IncomeFilters() { const [date, setDate] = useState() return (

) } [V0_FILE]typescriptreact:file="src/components/Incomes/IncomeList.tsx" isMerged="true" import { Edit, Trash } from "lucide-react" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" const incomes = [ { id: 1, date: "2023-06-01", description: "Salary", category: "Salary", amount: 5000.0 }, { id: 2, date: "2023-06-05", description: "Freelance Project", category: "Freelance", amount: 1500.0 }, { id: 3, date: "2023-06-10", description: "Dividend Payment", category: "Investments", amount: 200.5 }, { id: 4, date: "2023-06-15", description: "Side Gig", category: "Freelance", amount: 500.0 }, { id: 5, date: "2023-06-20", description: "Rental Income", category: "Real Estate", amount: 1200.0 }, ] export default function IncomeList({ onEdit }) { return (

Date Description Category Amount Actions {incomes.map((income) => ( {income.date} {income.description} {income.category} ${income.amount.toFixed(2)}

))}

) } [V0_FILE]typescriptreact:file="src/components/Incomes/IncomePagination.tsx" isMerged="true" import { ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" interface IncomePaginationProps { currentPage: number totalPages: number onPageChange: (page: number) => void } export default function IncomePagination({ currentPage, totalPages, onPageChange }: IncomePaginationProps) { return (

{[...Array(totalPages)].map((_, index) => ( ))}

) } [V0_FILE]typescriptreact:file="src/components/Incomes/AddEditIncomeModal.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import { useState } from "react" import { CalendarIcon } from "lucide-react" 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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Calendar } from "@/components/ui/calendar" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" import { format } from "date-fns" interface AddEditIncomeModalProps { isOpen: boolean onClose: () => void income?: any // Replace with proper type } export default function AddEditIncomeModal({ isOpen, onClose, income }: AddEditIncomeModalProps) { const [date, setDate] = useState(income ? new Date(income.date) : undefined) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle form submission onClose() } return ( ) } [V0_FILE]typescriptreact:file="src/components/Expenses/ExpensePagination.tsx" isEdit="true" isMerged="true" import { ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" interface ExpensePaginationProps { currentPage: number totalPages: number onPageChange: (page: number) => void } export default function ExpensePagination({ currentPage, totalPages, onPageChange }: ExpensePaginationProps) { return (

{[...Array(totalPages)].map((_, index) => ( ))}

) } [V0_FILE]typescriptreact:file="src/components/Accounts/AccountsPage.tsx" isMerged="true" "use client" import { useState } from "react" import { Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import AccountList from "./AccountList" import AccountPagination from "./AccountPagination" import AddEditAccountModal from "./AddEditAccountModal" export default function AccountsPage() { const [isModalOpen, setIsModalOpen] = useState(false) const [currentPage, setCurrentPage] = useState(1) const [editingAccount, setEditingAccount] = useState(null) const openAddModal = () => { setEditingAccount(null) setIsModalOpen(true) } const openEditModal = (account) => { setEditingAccount(account) setIsModalOpen(true) } return (

Accounts

setIsModalOpen(false)} account={editingAccount} />

) } [V0_FILE]typescriptreact:file="src/components/Accounts/AccountList.tsx" isMerged="true" import { Edit, Trash } from "lucide-react" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Card, CardContent } from "@/components/ui/card" const accounts = [ { id: 1, name: "Checking Account", type: "Bank", balance: 5000.0 }, { id: 2, name: "Savings Account", type: "Bank", balance: 10000.0 }, { id: 3, name: "Credit Card", type: "Credit", balance: -1500.0 }, { id: 4, name: "Investment Account", type: "Investment", balance: 25000.0 }, { id: 5, name: "Cash", type: "Cash", balance: 500.0 }, ] export default function AccountList({ onEdit }) { return (

Name Type Balance Actions {accounts.map((account, index) => ( {account.name} {account.type} = 0 ? "text-green-600" : "text-red-600"}`} > ${account.balance.toFixed(2)}

))}

{accounts.map((account) => (

{account.name}

= 0 ? "text-green-600" : "text-red-600"}`}> ${account.balance.toFixed(2)}

{account.type}

))}

) } [V0_FILE]typescriptreact:file="src/components/Accounts/AccountPagination.tsx" isMerged="true" import { ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" interface AccountPaginationProps { currentPage: number totalPages: number onPageChange: (page: number) => void } export default function AccountPagination({ currentPage, totalPages, onPageChange }: AccountPaginationProps) { return (

{[...Array(totalPages)].map((_, index) => ( ))}

) } [V0_FILE]typescriptreact:file="src/components/Accounts/AddEditAccountModal.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import { useState } from "react" 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 { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" interface AddEditAccountModalProps { isOpen: boolean onClose: () => void account?: any // Replace with proper type } export default function AddEditAccountModal({ isOpen, onClose, account }: AddEditAccountModalProps) { const [name, setName] = useState(account?.name || "") const [type, setType] = useState(account?.type || "") const [balance, setBalance] = useState(account?.balance || "") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle form submission onClose() } return ( ) } [V0_FILE]typescriptreact:file="src/components/EMI/EMIPage.tsx" isMerged="true" "use client" import { useState } from "react" import { Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import EMIList from "./EMIList" import EMIPagination from "./EMIPagination" import AddEditEMIModal from "./AddEditEMIModal" export default function EMIPage() { const [isModalOpen, setIsModalOpen] = useState(false) const [currentPage, setCurrentPage] = useState(1) const [editingEMI, setEditingEMI] = useState(null) const openAddModal = () => { setEditingEMI(null) setIsModalOpen(true) } const openEditModal = (emi) => { setEditingEMI(emi) setIsModalOpen(true) } return (

EMIs

setIsModalOpen(false)} emi={editingEMI} />

) } [V0_FILE]typescriptreact:file="src/components/EMI/EMIList.tsx" isMerged="true" import { Edit, Trash } from "lucide-react" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Card, CardContent } from "@/components/ui/card" const emis = [ { id: 1, name: "Car Loan", amount: 500, dueDate: "2023-07-15", remainingPayments: 24 }, { id: 2, name: "Home Loan", amount: 1500, dueDate: "2023-07-01", remainingPayments: 180 }, { id: 3, name: "Personal Loan", amount: 300, dueDate: "2023-07-10", remainingPayments: 12 }, { id: 4, name: "Education Loan", amount: 400, dueDate: "2023-07-05", remainingPayments: 36 }, { id: 5, name: "Appliance Loan", amount: 100, dueDate: "2023-07-20", remainingPayments: 6 }, ] export default function EMIList({ onEdit }) { return (

Name Amount Due Date Remaining Payments Actions {emis.map((emi, index) => ( {emi.name} ${emi.amount.toFixed(2)} {emi.dueDate} {emi.remainingPayments}

))}

{emis.map((emi) => (

{emi.name}

${emi.amount.toFixed(2)}

Due: {emi.dueDate}

Remaining: {emi.remainingPayments} payments

))}

) } [V0_FILE]typescriptreact:file="src/components/EMI/EMIPagination.tsx" isMerged="true" import { ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" interface EMIPaginationProps { currentPage: number totalPages: number onPageChange: (page: number) => void } export default function EMIPagination({ currentPage, totalPages, onPageChange }: EMIPaginationProps) { return (

{[...Array(totalPages)].map((_, index) => ( ))}

) } [V0_FILE]typescriptreact:file="src/components/EMI/AddEditEMIModal.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import { useState } from "react" import { CalendarIcon } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Calendar } from "@/components/ui/calendar" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" import { format } from "date-fns" interface AddEditEMIModalProps { isOpen: boolean onClose: () => void emi?: any // Replace with proper type } export default function AddEditEMIModal({ isOpen, onClose, emi }: AddEditEMIModalProps) { const [name, setName] = useState(emi?.name || "") const [amount, setAmount] = useState(emi?.amount || "") const [dueDate, setDueDate] = useState(emi ? new Date(emi.dueDate) : undefined) const [remainingPayments, setRemainingPayments] = useState(emi?.remainingPayments || "") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle form submission onClose() } return ( ) } [V0_FILE]typescriptreact:file="src/app/emis/page.tsx" isMerged="true" import EMIPage from "../components/EMI/EMIPage" export default function EMIs() { return } [V0_FILE]typescriptreact:file="src/components/Notifications/NotificationsPage.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import NotificationList from "./NotificationList" import NotificationPagination from "./NotificationPagination" export default function NotificationsPage() { const [currentPage, setCurrentPage] = useState(1) return (

Notifications

) } [V0_FILE]typescriptreact:file="src/components/Notifications/NotificationList.tsx" isMerged="true" import { useState } from "react" import { Check, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" const initialNotifications = [ { id: 1, message: "New expense added", isRead: false }, { id: 2, message: "Monthly report is ready", isRead: false }, { id: 3, message: "You've exceeded your budget for 'Entertainment'", isRead: false }, { id: 4, message: "New feature: Track your investments", isRead: true }, { id: 5, message: "Reminder: Pay your credit card bill", isRead: false }, ] export default function NotificationList() { const [notifications, setNotifications] = useState(initialNotifications) const markAsRead = (id: number) => { setNotifications(notifications.map((notif) => (notif.id === id ? { ...notif, isRead: true } : notif))) } const dismiss = (id: number) => { setNotifications(notifications.filter((notif) => notif.id !== id)) } return (

{notifications.map((notification) => (

{notification.message}

{!notification.isRead && ( )}

))}

) } [V0_FILE]typescriptreact:file="src/components/Notifications/NotificationPagination.tsx" isMerged="true" import { ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" interface NotificationPaginationProps { currentPage: number totalPages: number onPageChange: (page: number) => void } export default function NotificationPagination({ currentPage, totalPages, onPageChange }: NotificationPaginationProps) { return (

{[...Array(totalPages)].map((_, index) => ( ))}

) } [V0_FILE]typescriptreact:file="src/app/notifications/page.tsx" isMerged="true" import NotificationsPage from "../components/Notifications/NotificationsPage" export default function Notifications() { return } [V0_FILE]typescriptreact:file="src/components/Friends/FriendsPage.tsx" isMerged="true" "use client" import { useState } from "react" import { Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import FriendsList from "./FriendsList" import FriendsPagination from "./FriendsPagination" import AddEditFriendModal from "./AddEditFriendModal" export default function FriendsPage() { const [isModalOpen, setIsModalOpen] = useState(false) const [currentPage, setCurrentPage] = useState(1) const [editingFriend, setEditingFriend] = useState(null) const openAddModal = () => { setEditingFriend(null) setIsModalOpen(true) } const openEditModal = (friend) => { setEditingFriend(friend) setIsModalOpen(true) } return (

Friends

setIsModalOpen(false)} friend={editingFriend} />

) } [V0_FILE]typescriptreact:file="src/components/Friends/FriendsList.tsx" isMerged="true" import { Edit, Trash } from "lucide-react" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Card, CardContent } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" const friends = [ { id: 1, name: "Alice Johnson", email: "alice@example.com", avatar: "/avatars/alice.jpg" }, { id: 2, name: "Bob Smith", email: "bob@example.com", avatar: "/avatars/bob.jpg" }, { id: 3, name: "Charlie Brown", email: "charlie@example.com", avatar: "/avatars/charlie.jpg" }, { id: 4, name: "Diana Ross", email: "diana@example.com", avatar: "/avatars/diana.jpg" }, { id: 5, name: "Ethan Hunt", email: "ethan@example.com", avatar: "/avatars/ethan.jpg" }, ] export default function FriendsList({ onEdit }) { return (

Name Email Actions {friends.map((friend, index) => ( {friend.name.charAt(0)} {friend.name} {friend.email}

))}

{friends.map((friend) => (

{friend.name.charAt(0)}

{friend.name}

{friend.email}

))}

) } [V0_FILE]typescriptreact:file="src/components/Friends/FriendsPagination.tsx" isMerged="true" import { ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" interface FriendsPaginationProps { currentPage: number totalPages: number onPageChange: (page: number) => void } export default function FriendsPagination({ currentPage, totalPages, onPageChange }: FriendsPaginationProps) { return (

{[...Array(totalPages)].map((_, index) => ( ))}

) } [V0_FILE]typescriptreact:file="src/components/Friends/AddEditFriendModal.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" interface AddEditFriendModalProps { isOpen: boolean onClose: () => void friend?: { name?: string email?: string } } export default function AddEditFriendModal({ isOpen, onClose, friend }: AddEditFriendModalProps) { const [name, setName] = useState(friend?.name || "") const [email, setEmail] = useState(friend?.email || "") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle form submission onClose() } return ( ) } [V0_FILE]typescriptreact:file="src/app/friends/page.tsx" isMerged="true" import FriendsPage from "../components/Friends/FriendsPage" export default function Friends() { return } [V0_FILE]typescriptreact:file="src/components/Profile/ProfilePage.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" export default function ProfilePage() { const [profile, setProfile] = useState({ name: "John Doe", email: "john@example.com", phone: "+1234567890", bio: "Loves traveling", location: "New York, USA", }) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setProfile((prev) => ({ ...prev, [name]: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle form submission console.log("Profile updated:", profile) } return (

Profile

Name

Phone Number

Bio

</div>
            <div className="space-y-2">
              <Label htmlFor="location">Location</Label>
              <Input id="location" name="location" value={profile.location} onChange={handleChange} />
            </div>
            <div className="flex justify-end space-x-2">
              <Button type="button" variant="outline">
                Cancel
              </Button>
              <Button type="submit">Save Changes</Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/app/profile/page.tsx" isMerged="true"
import ProfilePage from "@/components/Profile/ProfilePage"

export default function Profile() {
  return <ProfilePage />
}

[V0_FILE]typescriptreact:file="src/components/Reports/ReportsPage.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { DatePickerWithRange } from "@/components/ui/date-picker"
import { Download } from "lucide-react"
import MonthlyChart from "@/components/MonthlyChart"
import SpendingPieChart from "@/components/SpendingPieChart"

export default function ReportsPage() {
  const [dateRange, setDateRange] = useState({ from: new Date(), to: new Date() })
  const [category, setCategory] = useState("all")
  const [account, setAccount] = useState("all")

const handleExport = (format: "pdf" | "csv") => {
    // Handle export logic
    console.log(`Exporting as ${format}`)
  }

return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold text-gray-900 mb-6">Financial Reports</h1>

<div className="grid gap-6 mb-6">
        <Card>
          <CardContent className="p-6">
            <div className="flex flex-wrap gap-4">
              <DatePickerWithRange dateRange={dateRange} onDateRangeChange={setDateRange} />
              <Select value={category} onValueChange={setCategory}>
                <SelectTrigger className="w-[180px]">
                  <SelectValue placeholder="Select category" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Categories</SelectItem>
                  <SelectItem value="food">Food</SelectItem>
                  <SelectItem value="transport">Transport</SelectItem>
                  <SelectItem value="utilities">Utilities</SelectItem>
                </SelectContent>
              </Select>
              <Select value={account} onValueChange={setAccount}>
                <SelectTrigger className="w-[180px]">
                  <SelectValue placeholder="Select account" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Accounts</SelectItem>
                  <SelectItem value="checking">Checking</SelectItem>
                  <SelectItem value="savings">Savings</SelectItem>
                  <SelectItem value="credit">Credit Card</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </CardContent>
        </Card>
      </div>

<div className="grid gap-6 md:grid-cols-2 mb-6">
        <Card>
          <CardHeader>
            <CardTitle>Monthly Income vs. Expenses</CardTitle>
          </CardHeader>
          <CardContent>
            <MonthlyChart />
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle>Spending by Category</CardTitle>
          </CardHeader>
          <CardContent>
            <SpendingPieChart />
          </CardContent>
        </Card>
      </div>

<div className="flex justify-end space-x-2">
        <Button onClick={() => handleExport("pdf")} variant="outline">
          <Download className="w-4 h-4 mr-2" />
          Export as PDF
        </Button>
        <Button onClick={() => handleExport("csv")} variant="outline">
          <Download className="w-4 h-4 mr-2" />
          Export as CSV
        </Button>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/components/Settings/SettingsPage.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
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 { Switch } from "@/components/ui/switch"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { toast } from "@/components/ui/use-toast"

export default function SettingsPage() {
  const [settings, setSettings] = useState({
    password: "",
    confirmPassword: "",
    emailNotifications: true,
    pushNotifications: false,
    currency: "usd",
    language: "en",
    theme: "light",
  })

const handleChange = (name: string, value: string | boolean) => {
    setSettings((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Handle form submission
    console.log("Settings updated:", settings)
    toast({
      title: "Settings updated",
      description: "Your settings have been successfully updated.",
    })
  }

return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold text-foreground mb-6">Settings</h1>

<Tabs defaultValue="account" className="space-y-4">
        <TabsList>
          <TabsTrigger value="account">Account</TabsTrigger>
          <TabsTrigger value="notifications">Notifications</TabsTrigger>
          <TabsTrigger value="appearance">Appearance</TabsTrigger>
        </TabsList>
        <TabsContent value="account">
          <Card>
            <CardHeader>
              <CardTitle>Account Settings</CardTitle>
              <CardDescription>Update your account settings and preferences.</CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSubmit} className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="password">New Password</Label>
                  <Input
                    id="password"
                    type="password"
                    value={settings.password}
                    onChange={(e) => handleChange("password", e.target.value)}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="confirmPassword">Confirm New Password</Label>
                  <Input
                    id="confirmPassword"
                    type="password"
                    value={settings.confirmPassword}
                    onChange={(e) => handleChange("confirmPassword", e.target.value)}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="currency">Currency</Label>
                  <Select value={settings.currency} onValueChange={(value) => handleChange("currency", value)}>
                    <SelectTrigger>
                      <SelectValue placeholder="Select currency" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="usd">USD ($)</SelectItem>
                      <SelectItem value="eur">EUR (€)</SelectItem>
                      <SelectItem value="gbp">GBP (£)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="language">Language</Label>
                  <Select value={settings.language} onValueChange={(value) => handleChange("language", value)}>
                    <SelectTrigger>
                      <SelectValue placeholder="Select language" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="en">English</SelectItem>
                      <SelectItem value="es">Español</SelectItem>
                      <SelectItem value="fr">Français</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="flex justify-end">
                  <Button type="submit">Save Changes</Button>
                </div>
              </form>
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="notifications">
          <Card>
            <CardHeader>
              <CardTitle>Notification Preferences</CardTitle>
              <CardDescription>Manage your notification settings.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <Label htmlFor="emailNotifications">Email Notifications</Label>
                <Switch
                  id="emailNotifications"
                  checked={settings.emailNotifications}
                  onCheckedChange={(checked) => handleChange("emailNotifications", checked)}
                />
              </div>
              <div className="flex items-center justify-between">
                <Label htmlFor="pushNotifications">Push Notifications</Label>
                <Switch
                  id="pushNotifications"
                  checked={settings.pushNotifications}
                  onCheckedChange={(checked) => handleChange("pushNotifications", checked)}
                />
              </div>
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="appearance">
          <Card>
            <CardHeader>
              <CardTitle>Appearance Settings</CardTitle>
              <CardDescription>Customize the look and feel of the application.</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                <Label htmlFor="theme">Theme</Label>
                <Select value={settings.theme} onValueChange={(value) => handleChange("theme", value)}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select theme" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="light">Light</SelectItem>
                    <SelectItem value="dark">Dark</SelectItem>
                    <SelectItem value="system">System</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/app/settings/page.tsx" isEdit="true" isMerged="true"
import SettingsPage from "@/components/Settings/SettingsPage"

export default function Settings() {
  return <SettingsPage />
}

[V0_FILE]typescript:file="tailwind.config.js" isMerged="true"
const { fontFamily } = require("tailwindcss/defaultTheme")

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: ["app/**/*.{ts,tsx}", "components/**/*.{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)",
      },
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
      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")],
}

[V0_FILE]typescriptreact:file="src/app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-slide-in {
  animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

[V0_FILE]typescriptreact:file="src/components/BudgetProgress.tsx" isMerged="true"
import { Progress } from "@/components/ui/progress"

const budgets = [
  { category: "Food", spent: 450, limit: 500 },
  { category: "Transportation", spent: 200, limit: 300 },
  { category: "Entertainment", spent: 150, limit: 200 },
]

export default function BudgetProgress() {
  return (
    <div className="space-y-4">
      {budgets.map((budget) => (
        <div key={budget.category} className="space-y-2">
          <div className="flex justify-between">
            <span className="font-medium">{budget.category}</span>
            <span className="text-muted-foreground">
              ${budget.spent} / ${budget.limit}
            </span>
          </div>
          <Progress value={(budget.spent / budget.limit) * 100} />
        </div>
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/components/FinancialGoals.tsx" isMerged="true"
import { CheckCircle2, Circle } from "lucide-react"

const goals = [
  { name: "Emergency Fund", target: 5000, current: 3500, completed: false },
  { name: "Vacation Savings", target: 2000, current: 2000, completed: true },
  { name: "New Car", target: 15000, current: 7500, completed: false },
]

export default function FinancialGoals() {
  return (
    <div className="space-y-4">
      {goals.map((goal) => (
        <div key={goal.name} className="flex items-center space-x-4">
          {goal.completed ? <CheckCircle2 className="text-green-500" /> : <Circle className="text-muted-foreground" />}
          <div className="flex-1">
            <div className="flex justify-between">
              <span className="font-medium">{goal.name}</span>
              <span className="text-muted-foreground">
                ${goal.current} / ${goal.target}
              </span>
            </div>
            <progress
              className="w-full [&::-webkit-progress-bar]:rounded-full [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-bar]:bg-secondary [&::-webkit-progress-value]:bg-primary"
              value={goal.current}
              max={goal.target}
            />
          </div>
        </div>
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/components/Expenses/ExpenseFilters.tsx" isEdit="true" isMerged="true"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Button } from "@/components/ui/button"

export default function ExpenseFilters({ filters, setFilters }) {
  const handleChange = (name, value) => {
    setFilters((prev) => ({ ...prev, [name]: value }))
  }

const handleReset = () => {
    setFilters({
      category: "",
      startDate: "",
      endDate: "",
      minAmount: "",
      maxAmount: "",
    })
  }

return (
    <div className="space-y-4 py-4">
      <div className="space-y-2">
        <Label htmlFor="category">Category</Label>
        <Select value={filters.category} onValueChange={(value) => handleChange("category", value)}>
          <SelectTrigger>
            <SelectValue placeholder="Select category" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="food">Food</SelectItem>
            <SelectItem value="transport">Transport</SelectItem>
            <SelectItem value="utilities">Utilities</SelectItem>
            <SelectItem value="entertainment">Entertainment</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div className="space-y-2">
        <Label htmlFor="startDate">Start Date</Label>
        <Input
          id="startDate"
          type="date"
          value={filters.startDate}
          onChange={(e) => handleChange("startDate", e.target.value)}
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="endDate">End Date</Label>
        <Input
          id="endDate"
          type="date"
          value={filters.endDate}
          onChange={(e) => handleChange("endDate", e.target.value)}
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="minAmount">Minimum Amount</Label>
        <Input
          id="minAmount"
          type="number"
          value={filters.minAmount}
          onChange={(e) => handleChange("minAmount", e.target.value)}
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="maxAmount">Maximum Amount</Label>
        <Input
          id="maxAmount"
          type="number"
          value={filters.maxAmount}
          onChange={(e) => handleChange("maxAmount", e.target.value)}
        />
      </div>
      <Button onClick={handleReset} variant="outline" className="w-full">
        Reset Filters
      </Button>
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/components/Expenses/ExpenseStats.tsx" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { DollarSign, TrendingDown, TrendingUp } from "lucide-react"

export default function ExpenseStats({ expenses }) {
  const totalExpenses = expenses.reduce((sum, expense) => sum + expense.amount, 0)
  const averageExpense = totalExpenses / expenses.length || 0
  const highestExpense = Math.max(...expenses.map((expense) => expense.amount), 0)

return (
    <>
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Total Expenses</CardTitle>
          <DollarSign className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">${totalExpenses.toFixed(2)}</div>
        </CardContent>
      </Card>
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Average Expense</CardTitle>
          <TrendingUp className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">${averageExpense.toFixed(2)}</div>
        </CardContent>
      </Card>
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Highest Expense</CardTitle>
          <TrendingDown className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">${highestExpense.toFixed(2)}</div>
        </CardContent>
      </Card>
    </>
  )
}

[V0_FILE]typescriptreact:file="src/components/Expenses/ExpenseList.tsx" isEdit="true" isMerged="true"
import { Edit, Trash } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

export default function ExpenseList({ expenses, onEdit, onDelete }) {
  return (
    <div className="overflow-x-auto">
      <Table className="w-full">
        <TableHeader>
          <TableRow>
            <TableHead>Date</TableHead>
            <TableHead>Description</TableHead>
            <TableHead>Category</TableHead>
            <TableHead className="text-right">Amount</TableHead>
            <TableHead className="text-center">Actions</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {expenses.map((expense, index) => (
            <TableRow key={expense.id} className={index % 2 === 0 ? "bg-muted/50" : ""}>
              <TableCell>{expense.date}</TableCell>
              <TableCell>{expense.description}</TableCell>
              <TableCell>{expense.category}</TableCell>
              <TableCell className="text-right font-medium text-destructive">${expense.amount.toFixed(2)}</TableCell>
              <TableCell>
                <div className="flex justify-center space-x-2">
                  <Button variant="ghost" size="icon" onClick={() => onEdit(expense)}>
                    <Edit className="h-4 w-4" />
                  </Button>
                  <Button variant="ghost" size="icon" onClick={() => onDelete(expense.id)}>
                    <Trash className="h-4 w-4" />
                  </Button>
                </div>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/components/Expenses/AddEditExpenseModal.tsx" isFixed="true" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { CalendarIcon } from "lucide-react"
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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Calendar } from "@/components/ui/calendar"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { format } from "date-fns"

export default function AddEditExpenseModal({ isOpen, onClose, expense, onAdd, onEdit }) {
  const [formData, setFormData] = useState({
    date: new Date(),
    description: "",
    category: "",
    amount: "",
  })

useEffect(() => {
    if (expense) {
      setFormData({
        date: new Date(expense.date),
        description: expense.description,
        category: expense.category,
        amount: expense.amount.toString(),
      })
    } else {
      setFormData({
        date: new Date(),
        description: "",
        category: "",
        amount: "",
      })
    }
  }, [expense])

const handleChange = (name, value) => {
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = (e) => {
    e.preventDefault()
    const expenseData = {
      ...formData,
      amount: Number.parseFloat(formData.amount),
      date: format(formData.date, "yyyy-MM-dd"),
    }
    if (expense) {
      onEdit({ ...expenseData, id: expense.id })
    } else {
      onAdd(expenseData)
    }
    onClose()
  }

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>{expense ? "Edit Expense" : "Add Expense"}</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit}>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="date" className="text-right">
                Date
              </Label>
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    id="date"
                    variant={"outline"}
                    className={`w-full justify-start text-left font-normal ${!formData.date && "text-muted-foreground"}`}
                  >
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {formData.date ? format(formData.date, "PPP") : <span>Pick a date</span>}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0" align="start">
                  <Calendar
                    mode="single"
                    selected={formData.date}
                    onSelect={(date) => handleChange("date", date)}
                    initialFocus
                  />
                </PopoverContent>
              </Popover>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="description" className="text-right">
                Description
              </Label>
              <Input
                id="description"
                value={formData.description}
                onChange={(e) => handleChange("description", e.target.value)}
                className="col-span-3"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="category" className="text-right">
                Category
              </Label>
              <Select value={formData.category} onValueChange={(value) => handleChange("category", value)}>
                <SelectTrigger className="col-span-3">
                  <SelectValue placeholder="Select a category" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="food">Food</SelectItem>
                  <SelectItem value="transport">Transport</SelectItem>
                  <SelectItem value="utilities">Utilities</SelectItem>
                  <SelectItem value="entertainment">Entertainment</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="amount" className="text-right">
                Amount
              </Label>
              <Input
                id="amount"
                type="number"
                value={formData.amount}
                onChange={(e) => handleChange("amount", e.target.value)}
                className="col-span-3"
              />
            </div>
          </div>
          <DialogFooter>
            <Button type="submit" className="bg-primary hover:bg-primary/90">
              {expense ? "Save Changes" : "Add Expense"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}

[V0_FILE]typescriptreact:file="src/components/theme-provider.tsx" isMerged="true"
"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

[V0_FILE]typescriptreact:file="src/components/CreditCardCarousel.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"

const cards = [
  {
    id: 1,
    name: "Platinum Card",
    number: "**** **** **** 1234",
    expiry: "12/25",
    background: "bg-gradient-to-r from-gray-700 to-gray-900",
  },
  {
    id: 2,
    name: "Gold Card",
    number: "**** **** **** 5678",
    expiry: "06/24",
    background: "bg-gradient-to-r from-yellow-400 to-yellow-600",
  },
  {
    id: 3,
    name: "Silver Card",
    number: "**** **** **** 9012",
    expiry: "03/26",
    background: "bg-gradient-to-r from-gray-300 to-gray-500",
  },
]

export default function CreditCardCarousel() {
  const [currentIndex, setCurrentIndex] = useState(0)

const nextCard = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % cards.length)
  }

const prevCard = () => {
    setCurrentIndex((prevIndex) => (prevIndex - 1 + cards.length) % cards.length)
  }

return (
    <div className="relative w-full max-w-md mx-auto">
      <div className="overflow-hidden">
        <AnimatePresence initial={false} custom={currentIndex}>
          <motion.div
            key={currentIndex}
            custom={currentIndex}
            initial={{ opacity: 0, x: 300 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -300 }}
            transition={{ type: "spring", stiffness: 300, damping: 30 }}
            className={`w-full h-56 rounded-xl ${cards[currentIndex].background} text-white p-6 shadow-lg`}
          >
            <div className="flex flex-col h-full justify-between">
              <div className="text-2xl font-bold">{cards[currentIndex].name}</div>
              <div>
                <div className="text-xl">{cards[currentIndex].number}</div>
                <div className="text-sm mt-2">Expires: {cards[currentIndex].expiry}</div>
              </div>
            </div>
          </motion.div>
        </AnimatePresence>
      </div>
      <Button
        variant="ghost"
        size="icon"
        className="absolute top-1/2 left-0 transform -translate-y-1/2 -translate-x-full"
        onClick={prevCard}
      >
        <ChevronLeft className="h-6 w-6" />
      </Button>
      <Button
        variant="ghost"
        size="icon"
        className="absolute top-1/2 right-0 transform -translate-y-1/2 translate-x-full"
        onClick={nextCard}
      >
        <ChevronRight className="h-6 w-6" />
      </Button>
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/components/Expenses/ExpenseChart.tsx" isMerged="true"
"use client"

import { Pie } from "react-chartjs-2"
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js"

ChartJS.register(ArcElement, Tooltip, Legend)

export default function ExpenseChart({ expenses }) {
  const categoryTotals = expenses.reduce((acc, expense) => {
    acc[expense.category] = (acc[expense.category] || 0) + expense.amount
    return acc
  }, {})

const data = {
    labels: Object.keys(categoryTotals),
    datasets: [
      {
        data: Object.values(categoryTotals),
        backgroundColor: [
          "rgba(255, 99, 132, 0.8)",
          "rgba(54, 162, 235, 0.8)",
          "rgba(255, 206, 86, 0.8)",
          "rgba(75, 192, 192, 0.8)",
          "rgba(153, 102, 255, 0.8)",
        ],
        borderColor: [
          "rgba(255, 99, 132, 1)",
          "rgba(54, 162, 235, 1)",
          "rgba(255, 206, 86, 1)",
          "rgba(75, 192, 192, 1)",
          "rgba(153, 102, 255, 1)",
        ],
        borderWidth: 1,
      },
    ],
  }

return <Pie data={data} />
}

[V0_FILE]typescriptreact:file="src/components/Expenses/ExpenseTrend.tsx" isMerged="true"
"use client"

import { Line } from "react-chartjs-2"
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js"

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend)

export default function ExpenseTrend({ expenses }) {
  const sortedExpenses = expenses.sort((a, b) => new Date(a.date) - new Date(b.date))
  const dates = sortedExpenses.map((expense) => expense.date)
  const amounts = sortedExpenses.map((expense) => expense.amount)

const data = {
    labels: dates,
    datasets: [
      {
        label: "Expense Amount",
        data: amounts,
        fill: false,
        borderColor: "rgb(75, 192, 192)",
        tension: 0.1,
      },
    ],
  }

const options = {
    responsive: true,
    plugins: {
      legend: {
        position: "top" as const,
      },
      title: {
        display: true,
        text: "Expense Trend",
      },
    },
  }

return <Line options={options} data={data} />
}

[V0_FILE]typescriptreact:file="src/app/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import { Inter } from "next/font/google"
import { Toaster } from "@/components/ui/toaster"
import Header from "../components/Header"
import Footer from "../components/Footer"
import { ThemeProvider } from "@/components/theme-provider"
import type { Metadata } from "next"
import "./globals.css"
import type React from "react" // Added import for React

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Expense Tracker",
  description: "Track your expenses and manage your finances",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          <div className="flex flex-col min-h-screen bg-background text-foreground">
            <Header />
            <main className="flex-grow">{children}</main>
            <Footer />
          </div>
          <Toaster />
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="src/components/Dashboard.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Plus, TrendingUp } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import SummaryCards from "./SummaryCards"
import SpendingPieChart from "./SpendingPieChart"
import UpcomingPayments from "./UpcomingPayments"
import QuickActions from "./QuickActions"
import AddExpenseModal from "./AddExpenseModal"
import BudgetProgress from "./BudgetProgress"
import FinancialGoals from "./FinancialGoals"
import CardCarousel from "./CardCarousel"
import SummaryWidgets from "./SummaryWidgets"
import InteractiveCharts from "./InteractiveCharts"
import TransactionTimeline from "./TransactionTimeline"

export default function Dashboard() {
  const [isModalOpen, setIsModalOpen] = useState(false)

return (
    <div className="container mx-auto px-4 py-8">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6"
      >
        <div className="mb-4 sm:mb-0">
          <h1 className="text-2xl sm:text-3xl font-bold text-foreground">Welcome back, John!</h1>
          <p className="text-muted-foreground mt-1">Here's your financial overview for today.</p>
        </div>
        <Button onClick={() => setIsModalOpen(true)}>
          <Plus className="mr-2 h-4 w-4" /> Add Transaction
        </Button>
      </motion.div>

<motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: 0.2 }}
      >
        <Alert className="mb-6">
          <TrendingUp className="h-4 w-4" />
          <AlertTitle>Great job!</AlertTitle>
          <AlertDescription>You've reduced your spending by 15% compared to last month. Keep it up!</AlertDescription>
        </Alert>
      </motion.div>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.6 }}
        >
          <QuickActions />
        </motion.div>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.8 }}
        >
          <CardCarousel />
        </motion.div>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 1 }}
        >
          <SummaryWidgets />
        </motion.div>

<Tabs defaultValue="overview" className="space-y-4">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="transactions">Transactions</TabsTrigger>
            <TabsTrigger value="budgets">Budgets & Goals</TabsTrigger>
          </TabsList>
          <TabsContent value="overview">
            <div className="grid gap-6 md:grid-cols-2">
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 1.2 }}
              >
                <Card>
                  <CardHeader>
                    <CardTitle>Monthly Income vs. Expenses</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <InteractiveCharts />
                  </CardContent>
                </Card>
              </motion.div>

<motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 1.4 }}
              >
                <Card>
                  <CardHeader>
                    <CardTitle>Spending by Category</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <SpendingPieChart />
                  </CardContent>
                </Card>
              </motion.div>
            </div>
          </TabsContent>
          <TabsContent value="transactions">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 1.2 }}
            >
              <Card>
                <CardHeader>
                  <CardTitle>Recent Transactions</CardTitle>
                  <CardDescription>Your last 10 transactions</CardDescription>
                </CardHeader>
                <CardContent>
                  <TransactionTimeline />
                </CardContent>
              </Card>
            </motion.div>
          </TabsContent>
          <TabsContent value="budgets">
            <div className="grid gap-6 md:grid-cols-2">
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 1.2 }}
              >
                <Card>
                  <CardHeader>
                    <CardTitle>Budget Progress</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <BudgetProgress />
                  </CardContent>
                </Card>
              </motion.div>
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 1.4 }}
              >
                <Card>
                  <CardHeader>
                    <CardTitle>Financial Goals</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <FinancialGoals />
                  </CardContent>
                </Card>
              </motion.div>
            </div>
          </TabsContent>
        </Tabs>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 1.6 }}
        >
          <UpcomingPayments />
        </motion.div>
      </div>

<AddExpenseModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/components/CardCarousel.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"

const cards = [
  { id: 1, type: "Visa", last4: "1234", name: "John Doe", expiry: "12/24", isDefault: true },
  { id: 2, type: "Mastercard", last4: "5678", name: "John Doe", expiry: "06/25", isDefault: false },
  { id: 3, type: "American Express", last4: "9012", name: "John Doe", expiry: "09/23", isDefault: false },
]

export default function CardCarousel() {
  const [currentIndex, setCurrentIndex] = useState(0)

const nextCard = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % cards.length)
  }

const prevCard = () => {
    setCurrentIndex((prevIndex) => (prevIndex - 1 + cards.length) % cards.length)
  }

return (
    <div className="relative w-full max-w-md mx-auto">
      <div className="overflow-hidden">
        <AnimatePresence initial={false} custom={currentIndex}>
          <motion.div
            key={currentIndex}
            custom={currentIndex}
            initial={{ opacity: 0, x: 300 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -300 }}
            transition={{ type: "spring", stiffness: 300, damping: 30 }}
            className={`w-full h-56 rounded-xl ${
              cards[currentIndex].isDefault ? "shadow-lg shadow-primary/50" : ""
            } text-white p-6`}
            style={{
              background: `linear-gradient(135deg, ${
                cards[currentIndex].type === "Visa"
                  ? "#1a1f71, #0077be"
                  : cards[currentIndex].type === "Mastercard"
                    ? "#eb001b, #f79e1b"
                    : "#2e77bc, #6cc4ee"
              })`,
            }}
          >
            <div className="flex flex-col h-full justify-between">
              <div className="text-2xl font-bold">{cards[currentIndex].type}</div>
              <div>
                <div className="text-xl">**** **** **** {cards[currentIndex].last4}</div>
                <div className="text-sm mt-2">
                  {cards[currentIndex].name} | Expires: {cards[currentIndex].expiry}
                </div>
              </div>
            </div>
          </motion.div>
        </AnimatePresence>
      </div>
      <Button
        variant="ghost"
        size="icon"
        className="absolute top-1/2 left-0 transform -translate-y-1/2 -translate-x-full"
        onClick={prevCard}
      >
        <ChevronLeft className="h-6 w-6" />
      </Button>
      <Button
        variant="ghost"
        size="icon"
        className="absolute top-1/2 right-0 transform -translate-y-1/2 translate-x-full"
        onClick={nextCard}
      >
        <ChevronRight className="h-6 w-6" />
      </Button>
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/components/SummaryWidgets.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"

const budgetCategories = [
  { name: "Groceries", spent: 80, total: 100 },
  { name: "Entertainment", spent: 60, total: 100 },
  { name: "Transportation", spent: 40, total: 100 },
]

const savingsGoals = [
  { name: "Emergency Fund", current: 5000, target: 10000 },
  { name: "Vacation", current: 2000, target: 5000 },
]

export default function SummaryWidgets() {
  return (
    <div className="grid gap-6 md:grid-cols-2">
      <Card>
        <CardHeader>
          <CardTitle>Budget Categories</CardTitle>
        </CardHeader>
        <CardContent>
          {budgetCategories.map((category, index) => (
            <motion.div
              key={category.name}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1 }}
              className="mb-4"
            >
              <div className="flex justify-between mb-1">
                <span>{category.name}</span>
                <span>
                  {category.spent}% of ${category.total}
                </span>
              </div>
              <Progress value={category.spent} className="h-2" />
            </motion.div>
          ))}
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Savings Goals</CardTitle>
        </CardHeader>
        <CardContent>
          {savingsGoals.map((goal, index) => (
            <motion.div
              key={goal.name}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1 }}
              className="mb-4"
            >
              <div className="flex justify-between mb-1">
                <span>{goal.name}</span>
                <span>
                  ${goal.current} of ${goal.target}
                </span>
              </div>
              <Progress value={(goal.current / goal.target) * 100} className="h-2" />
            </motion.div>
          ))}
        </CardContent>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/components/InteractiveCharts.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Bar, Pie } from "react-chartjs-2"
import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, Title } from "chart.js"

ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, Title)

const initialBarData = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
  datasets: [
    {
      label: "Income",
      data: [3000, 3500, 3200, 3800, 3600, 4000],
      backgroundColor: "rgba(75, 192, 192, 0.6)",
    },
    {
      label: "Expenses",
      data: [2500, 2800, 2600, 3000, 2900, 3200],
      backgroundColor: "rgba(255, 99, 132, 0.6)",
    },
  ],
}

const initialPieData = {
  labels: ["Food", "Transport", "Entertainment", "Utilities", "Shopping"],
  datasets: [
    {
      data: [30, 20, 15, 25, 10],
      backgroundColor: [
        "rgba(255, 99, 132, 0.6)",
        "rgba(54, 162, 235, 0.6)",
        "rgba(255, 206, 86, 0.6)",
        "rgba(75, 192, 192, 0.6)",
        "rgba(153, 102, 255, 0.6)",
      ],
    },
  ],
}

export default function InteractiveCharts() {
  const [barData, setBarData] = useState(initialBarData)
  const [pieData, setPieData] = useState(initialPieData)

const handleBarClick = (event, elements) => {
    if (elements.length > 0) {
      const datasetIndex = elements[0].datasetIndex
      const index = elements[0].index
      const newData = { ...barData }
      newData.datasets[datasetIndex].data[index] = Math.floor(Math.random() * 5000)
      setBarData(newData)
    }
  }

const handlePieClick = (event, elements) => {
    if (elements.length > 0) {
      const index = elements[0].index
      const newData = { ...pieData }
      newData.datasets[0].data[index] = Math.floor(Math.random() * 50)
      setPieData(newData)
    }
  }

return (
    <div className="grid gap-6 md:grid-cols-2">
      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
        <h3 className="text-lg font-semibold mb-2">Monthly Income vs Expenses</h3>
        <Bar
          data={barData}
          options={{
            responsive: true,
            onClick: handleBarClick,
          }}
        />
      </motion.div>
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: 0.2 }}
      >
        <h3 className="text-lg font-semibold mb-2">Spending Categories</h3>
        <Pie
          data={pieData}
          options={{
            responsive: true,
            onClick: handlePieClick,
          }}
        />
      </motion.div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/components/TransactionTimeline.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { ShoppingCart, Home, Utensils, Car, Film } from "lucide-react"

const transactions = [
  {
    id: 1,
    date: "2023-06-15",
    description: "Grocery Shopping",
    amount: -85.5,
    icon: ShoppingCart,
    category: "Shopping",
  },
  { id: 2, date: "2023-06-14", description: "Rent Payment", amount: -1200.0, icon: Home, category: "Housing" },
  { id: 3, date: "2023-06-13", description: "Restaurant Dinner", amount: -65.75, icon: Utensils, category: "Food" },
  { id: 4, date: "2023-06-12", description: "Gas Station", amount: -45.0, icon: Car, category: "Transportation" },
  { id: 5, date: "2023-06-11", description: "Movie Tickets", amount: -30.0, icon: Film, category: "Entertainment" },
]

export default function TransactionTimeline() {
  return (
    <div className="space-y-8">
      {transactions.map((transaction, index) => (
        <motion.div
          key={transaction.id}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: index * 0.1 }}
          className="flex items-center space-x-4"
        >
          <div
            className={`p-2 rounded-full ${
              transaction.amount < 0 ? "bg-red-100 text-red-600" : "bg-green-100 text-green-600"
            }`}
          >
            <transaction.icon className="h-6 w-6" />
          </div>
          <div className="flex-grow">
            <p className="font-semibold">{transaction.description}</p>
            <p className="text-sm text-gray-500">{transaction.date}</p>
          </div>
          <div className={`font-semibold ${transaction.amount < 0 ? "text-red-600" : "text-green-600"}`}>
            ${Math.abs(transaction.amount).toFixed(2)}
          </div>
        </motion.div>
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/components/Expenses/ExpenseCards.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Card, CardContent } from "@/components/ui/card"
import { ShoppingBag, Car, Utensils, Home, Music } from "lucide-react"

const categoryIcons = {
  Food: Utensils,
  Transport: Car,
  Entertainment: Music,
  Utilities: Home,
  Shopping: ShoppingBag,
}

const categoryColors = {
  Food: "bg-red-100 text-red-600",
  Transport: "bg-blue-100 text-blue-600",
  Entertainment: "bg-purple-100 text-purple-600",
  Utilities: "bg-green-100 text-green-600",
  Shopping: "bg-yellow-100 text-yellow-600",
}

export default function ExpenseCards({ expenses }) {
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      {expenses.map((expense, index) => {
        const Icon = categoryIcons[expense.category] || ShoppingBag
        const colorClass = categoryColors[expense.category] || "bg-gray-100 text-gray-600"

return (
          <motion.div
            key={expense.id}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.3, delay: index * 0.1 }}
          >
            <Card>
              <CardContent className="flex items-center p-4">
                <div className={`p-3 rounded-full mr-4 ${colorClass}`}>
                  <Icon className="h-6 w-6" />
                </div>
                <div className="flex-grow">
                  <h3 className="font-semibold">{expense.description}</h3>
                  <p className="text-sm text-gray-500">{expense.date}</p>
                </div>
                <div className="text-lg font-bold">${expense.amount.toFixed(2)}</div>
              </CardContent>
            </Card>
          </motion.div>
        )
      })}
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/components/Expenses/CategoryBreakdown.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Sunburst } from "@nivo/sunburst"

export default function CategoryBreakdown({ expenses }) {
  const [hoveredCategory, setHoveredCategory] = useState(null)

const getCategoryData = () => {
    const categories = {}
    expenses.forEach((expense) => {
      if (!categories[expense.category]) {
        categories[expense.category] = {
          name: expense.category,
          children: [],
        }
      }
      categories[expense.category].children.push({
        name: expense.description,
        value: expense.amount,
      })
    })
    return {
      name: "Expenses",
      children: Object.values(categories),
    }
  }

const data = getCategoryData()

return (
    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }} className="h-[400px]">
      <Sunburst
        data={data}
        width={400}
        height={400}
        margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
        id="name"
        value="value"
        cornerRadius={2}
        borderColor={{ theme: "background" }}
        colors={{ scheme: "nivo" }}
        childColor={{ from: "color", modifiers: [["brighter", 0.1]] }}
        enableArcLabels={true}
        arcLabelsSkipAngle={10}
        arcLabelsTextColor={{ from: "color", modifiers: [["darker", 1.4]] }}
        onMouseEnter={(data) => setHoveredCategory(data)}
        onMouseLeave={() => setHoveredCategory(null)}
      />
      {hoveredCategory && (
        <div className="text-center mt-4">
          <p className="font-semibold">{hoveredCategory.id}</p>
          <p>${hoveredCategory.value.toFixed(2)}</p>
        </div>
      )}
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="src/components/Expenses/CalendarView.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { format, startOfMonth, endOfMonth, eachDayOfInterval } from "date-fns"
import { Card, CardContent } from "@/components/ui/card"

export default function CalendarView({ expenses }) {
  const [currentMonth, setCurrentMonth] = useState(new Date())

const getDaysInMonth = (date) => {
    const start = startOfMonth(date)
    const end = endOfMonth(date)
    return eachDayOfInterval({ start, end })
  }

const getExpenseForDay = (day) => {
    return expenses.filter((expense) => expense.date === format(day, "yyyy-MM-dd"))
  }

const getColorIntensity = (amount) => {
    const maxAmount = Math.max(...expenses.map((e) => e.amount))
    const intensity = Math.min(Math.floor((amount / maxAmount) * 255), 255)
    return `rgb(255, ${255 - intensity}, ${255 - intensity})`
  }

const days = getDaysInMonth(currentMonth)

return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
      className="grid grid-cols-7 gap-2"
    >
      {days.map((day, index) => {
        const dayExpenses = getExpenseForDay(day)
        const totalAmount = dayExpenses.reduce((sum, e) => sum + e.amount, 0)
        const backgroundColor = totalAmount > 0 ? getColorIntensity(totalAmount) : "transparent"

return (
          <Card key={index} style={{ backgroundColor }}>
            <CardContent className="p-2 text-center">
              <div className="font-semibold">{format(day, "d")}</div>
              {totalAmount > 0 && <div className="text-xs">${totalAmount.toFixed(2)}</div>}
            </CardContent>
          </Card>
        )
      })}
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="src/components/Expenses/ReceiptUploadPreview.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Upload, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"

export default function ReceiptUploadPreview() {
  const [receipts, setReceipts] = useState([])

const handleFileUpload = (event) => {
    const files = Array.from(event.target.files)
    const newReceipts = files.map((file) => ({
      id: Date.now(),
      name: file.name,
      preview: URL.createObjectURL(file),
    }))
    setReceipts([...receipts, ...newReceipts])
  }

const removeReceipt = (id) => {
    setReceipts(receipts.filter((receipt) => receipt.id !== id))
  }

return (
    <div>
      <div className="mb-4">
        <input
          type="file"
          id="receipt-upload"
          className="hidden"
          multiple
          onChange={handleFileUpload}
          accept="image/*"
        />
        <label htmlFor="receipt-upload">
          <Button as="span" variant="outline">
            <Upload className="w-4 h-4 mr-2" />
            Upload Receipts
          </Button>
        </label>
      </div>
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {receipts.map((receipt, index) => (
          <motion.div
            key={receipt.id}
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.3, delay: index * 0.1 }}
          >
            <Card>
              <CardContent className="p-2 relative">
                <img
                  src={receipt.preview || "/placeholder.svg"}
                  alt={receipt.name}
                  className="w-full h-32 object-cover rounded"
                />
                <Button
                  variant="ghost"
                  size="icon"
                  className="absolute top-1 right-1 bg-white rounded-full"
                  onClick={() => removeReceipt(receipt.id)}
                >
                  <X className="w-4 h-4" />
                </Button>
              </CardContent>
            </Card>
          </motion.div>
        ))}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/app/income/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import IncomePage from "../../components/Incomes/IncomesPage"

export default function Income() {
  return <IncomePage />
}

[V0_FILE]typescriptreact:file="src/app/accounts/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import AccountsPage from "../../components/Accounts/AccountsPage"

export default function Accounts() {
  return <AccountsPage />
}

[V0_FILE]typescriptreact:file="src/app/reports/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import ReportsPage from "../../components/Reports/ReportsPage"

export default function Reports() {
  return <ReportsPage />
}

[V0_FILE]typescriptreact:file="src/components/Header.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Bell, ChevronDown, User, Menu, X, Sun, Moon } from "lucide-react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"

export default function Header() {
  const [isNotificationOpen, setIsNotificationOpen] = useState(false)
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  const pathname = usePathname()
  const { theme, setTheme } = useTheme()

const navItems = [
    { href: "/", label: "Dashboard" },
    { href: "/expenses", label: "Expenses" },
    { href: "/income", label: "Income" },
    { href: "/accounts", label: "Accounts" },
    { href: "/reports", label: "Reports" },
  ]

return (
    <motion.header
      initial={{ y: -100 }}
      animate={{ y: 0 }}
      transition={{ type: "spring", stiffness: 300, damping: 30 }}
      className="bg-background border-b border-border"
    >
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center">
            <Link href="/" className="flex-shrink-0">
              <motion.h1
                initial={{ opacity: 0, scale: 0.5 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.5 }}
                className="text-xl font-bold text-primary"
              >
                Expense Tracker
              </motion.h1>
            </Link>
            <nav className="hidden md:ml-6 md:flex md:space-x-4">
              <AnimatePresence>
                {navItems.map((item) => (
                  <motion.div
                    key={item.href}
                    initial={{ opacity: 0, y: -20 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -20 }}
                    transition={{ duration: 0.2 }}
                  >
                    <Link
                      href={item.href}
                      className={`text-foreground hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                        pathname === item.href ? "bg-primary/10 text-primary" : ""
                      }`}
                    >
                      {item.label}
                    </Link>
                  </motion.div>
                ))}
              </AnimatePresence>
            </nav>
          </div>
          <div className="flex items-center">
            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="mr-4">
              <Button variant="ghost" size="icon" onClick={() => setIsNotificationOpen(!isNotificationOpen)}>
                <Bell className="h-5 w-5" />
              </Button>
            </motion.div>
            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="mr-4">
              <Button variant="ghost" size="icon" onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
                {theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
              </Button>
            </motion.div>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="flex items-center">
                  <User className="h-5 w-5 mr-2" />
                  <span className="hidden sm:inline">John Doe</span>
                  <ChevronDown className="h-4 w-4 ml-2" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>My Account</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <Link href="/profile" className="w-full">
                    Profile
                  </Link>
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <Link href="/settings" className="w-full">
                    Settings
                  </Link>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>Log out</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
            <Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
              <SheetTrigger asChild>
                <Button variant="ghost" size="icon" className="md:hidden ml-2">
                  {isMobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
                </Button>
              </SheetTrigger>
              <SheetContent side="right" className="w-[300px] sm:w-[400px]">
                <nav className="flex flex-col space-y-4 mt-6">
                  {navItems.map((item) => (
                    <Link
                      key={item.label}
                      href={item.href}
                      className={`text-foreground hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                        pathname === item.href ? "bg-primary/10 text-primary" : ""
                      }`}
                      onClick={() => setIsMobileMenuOpen(false)}
                    >
                      {item.label}
                    </Link>
                  ))}
                </nav>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </div>
    </motion.header>
  )
}

[V0_FILE]typescriptreact:file="src/app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Dashboard from "../components/Dashboard"

export default function Home() {
  return <Dashboard />
}

[V0_FILE]typescriptreact:file="src/components/ui/date-picker.tsx" isMerged="true"
"use client"

import * as React from "react"
import { format } from "date-fns"
import { CalendarIcon } from "lucide-react"
import type { DateRange } from "react-day-picker"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

export function DatePickerWithRange({ className }: React.HTMLAttributes<HTMLDivElement>) {
  const [date, setDate] = React.useState<DateRange | undefined>({
    from: new Date(2023, 0, 20),
    to: new Date(2023, 0, 25),
  })

return (
    <div className={cn("grid gap-2", className)}>
      <Popover>
        <PopoverTrigger asChild>
          <Button
            id="date"
            variant={"outline"}
            className={cn("w-[300px] justify-start text-left font-normal", !date && "text-muted-foreground")}
          >
            <CalendarIcon className="mr-2 h-4 w-4" />
            {date?.from ? (
              date.to ? (
                <>
                  {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
                </>
              ) : (
                format(date.from, "LLL dd, y")
              )
            ) : (
              <span>Pick a date</span>
            )}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0" align="start">
          <Calendar
            initialFocus
            mode="range"
            defaultMonth={date?.from}
            selected={date}
            onSelect={setDate}
            numberOfMonths={2}
          />
        </PopoverContent>
      </Popover>
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/app/expenses/page.tsx" isEdit="true" isQuickEdit="true"
import ExpensesPage from "../../components/Expenses/ExpensesPage"

export default function Expenses() {
  return <ExpensesPage />
}

[V0_FILE]typescriptreact:file="src/components/Expenses/ExpensesPage.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { Plus, Filter } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import ExpenseFilters from "./ExpenseFilters"
import ExpenseList from "./ExpenseList"
import ExpensePagination from "./ExpensePagination"
import AddEditExpenseModal from "./AddEditExpenseModal"
import ExpenseStats from "./ExpenseStats"
import ExpenseChart from "./ExpenseChart"
import ExpenseTrend from "./ExpenseTrend"
import ExpenseCards from "./ExpenseCards"
import CategoryBreakdown from "./CategoryBreakdown"
import CalendarView from "./CalendarView"
import ReceiptUploadPreview from "./ReceiptUploadPreview"

// Mock data
const initialExpenses = [
  { id: 1, date: "2023-06-01", description: "Groceries", category: "Food", amount: 85.5 },
  { id: 2, date: "2023-06-03", description: "Gas", category: "Transport", amount: 45.0 },
  { id: 3, date: "2023-06-05", description: "Electricity Bill", category: "Utilities", amount: 120.75 },
  { id: 4, date: "2023-06-07", description: "Dinner", category: "Food", amount: 65.3 },
  { id: 5, date: "2023-06-10", description: "Movie Tickets", category: "Entertainment", amount: 30.0 },
]

export default function ExpensesPage() {
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [currentPage, setCurrentPage] = useState(1)
  const [editingExpense, setEditingExpense] = useState(null)
  const [expenses, setExpenses] = useState(initialExpenses)
  const [filteredExpenses, setFilteredExpenses] = useState(expenses)
  const [filters, setFilters] = useState({
    category: "",
    startDate: "",
    endDate: "",
    minAmount: "",
    maxAmount: "",
  })

const itemsPerPage = 5

useEffect(() => {
    applyFilters()
  }, [filters, expenses])

const openAddModal = () => {
    setEditingExpense(null)
    setIsModalOpen(true)
  }

const openEditModal = (expense) => {
    setEditingExpense(expense)
    setIsModalOpen(true)
  }

const handleAddExpense = (newExpense) => {
    setExpenses([...expenses, { ...newExpense, id: expenses.length + 1 }])
  }

const handleEditExpense = (editedExpense) => {
    setExpenses(expenses.map((expense) => (expense.id === editedExpense.id ? editedExpense : expense)))
  }

const handleDeleteExpense = (id) => {
    setExpenses(expenses.filter((expense) => expense.id !== id))
  }

const applyFilters = () => {
    let filtered = expenses
    if (filters.category) {
      filtered = filtered.filter((expense) => expense.category === filters.category)
    }
    if (filters.startDate) {
      filtered = filtered.filter((expense) => new Date(expense.date) >= new Date(filters.startDate))
    }
    if (filters.endDate) {
      filtered = filtered.filter((expense) => new Date(expense.date) <= new Date(filters.endDate))
    }
    if (filters.minAmount) {
      filtered = filtered.filter((expense) => expense.amount >= Number(filters.minAmount))
    }
    if (filters.maxAmount) {
      filtered = filtered.filter((expense) => expense.amount <= Number(filters.maxAmount))
    }
    setFilteredExpenses(filtered)
    setCurrentPage(1)
  }

const totalPages = Math.ceil(filteredExpenses.length / itemsPerPage)

return (
    <div className="container mx-auto px-4 py-8">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="flex justify-between items-center mb-6"
      >
        <div>
          <h1 className="text-3xl font-bold text-foreground">Expenses</h1>
          <p className="text-muted-foreground mt-1">Manage and track your expenses</p>
        </div>
        <div className="flex space-x-2">
          <Sheet>
            <SheetTrigger asChild>
              <Button variant="outline">
                <Filter className="w-4 h-4 mr-2" />
                Filters
              </Button>
            </SheetTrigger>
            <SheetContent>
              <SheetHeader>
                <SheetTitle>Filter Expenses</SheetTitle>
              </SheetHeader>
              <ExpenseFilters filters={filters} setFilters={setFilters} />
            </SheetContent>
          </Sheet>
          <Button onClick={openAddModal} className="bg-primary hover:bg-primary/90 text-primary-foreground">
            <Plus className="w-5 h-5 mr-2" />
            Add Expense
          </Button>
        </div>
      </motion.div>

<motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: 0.2 }}
        className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mb-6"
      >
        <ExpenseStats expenses={filteredExpenses} />
      </motion.div>

<motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: 0.4 }}
        className="grid gap-6 md:grid-cols-2 mb-6"
      >
        <Card>
          <CardHeader>
            <CardTitle>Expense Trend</CardTitle>
          </CardHeader>
          <CardContent>
            <ExpenseTrend expenses={filteredExpenses} />
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle>Expense by Category</CardTitle>
          </CardHeader>
          <CardContent>
            <ExpenseChart expenses={filteredExpenses} />
          </CardContent>
        </Card>
      </motion.div>

<motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: 0.6 }}
      >
        <ExpenseCards expenses={filteredExpenses} />
      </motion.div>

<motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: 0.8 }}
      >
        <Card className="mb-6">
          <CardHeader>
            <CardTitle>Category Breakdown</CardTitle>
          </CardHeader>
          <CardContent>
            <CategoryBreakdown expenses={filteredExpenses} />
          </CardContent>
        </Card>
      </motion.div>

<motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: 1 }}
      >
        <Card className="mb-6">
          <CardHeader>
            <CardTitle>Calendar View</CardTitle>
          </CardHeader>
          <CardContent>
            <CalendarView expenses={filteredExpenses} />
          </CardContent>
        </Card>
      </motion.div>

<motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: 1.2 }}
      >
        <Card className="mb-6">
          <CardHeader>
            <CardTitle>Receipt Upload Preview</CardTitle>
          </CardHeader>
          <CardContent>
            <ReceiptUploadPreview />
          </CardContent>
        </Card>
      </motion.div>

<motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: 1.4 }}
      >
        <Card>
          <CardHeader>
            <CardTitle>Expense List</CardTitle>
          </CardHeader>
          <CardContent>
            <ExpenseList
              expenses={filteredExpenses.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)}
              onEdit={openEditModal}
              onDelete={handleDeleteExpense}
            />
            {totalPages > 1 && (
              <ExpensePagination currentPage={currentPage} totalPages={totalPages} onPageChange={setCurrentPage} />
            )}
          </CardContent>
        </Card>
      </motion.div>

<AddEditExpenseModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        expense={editingExpense}
        onAdd={handleAddExpense}
        onEdit={handleEditExpense}
      />
    </div>
  )
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More from wittyparth

More Templates Like This

About

Tags

Share

About

Tags

Share

More from wittyparth

More Templates Like This