[V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="expense-tracker.tsx" isEdit="true" "use client" import type React from "react" import { useState } from "react" import { Plus, Search, ArrowUpRight, Wallet, Calendar, MoreHorizontal, PieChart, CreditCard, DollarSign, Home, ShoppingBag, Car, Film, Utensils, Zap, } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "@/components/ui/dialog" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Label } from "@/components/ui/label" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" // Define expense type type Expense = { id: string amount: number description: string category: string date: string } // Define category type with color type Category = { name: string color: string icon: React.ReactNode } export default function ExpenseTracker() { // Sample categories with colors and icons const categories: Category[] = [ { name: "Food", color: "bg-blue-500/80", icon: }, { name: "Transport", color: "bg-green-500/80", icon: }, { name: "Shopping", color: "bg-pink-500/80", icon: }, { name: "Bills", color: "bg-yellow-500/80", icon: }, { name: "Entertainment", color: "bg-orange-500/80", icon: }, { name: "Other", color: "bg-purple-500/80", icon: }, ] // State for expenses const [expenses, setExpenses] = useState([ { id: "1", amount: 45.99, description: "Grocery Shopping", category: "Food", date: "2025-03-05", }, { id: "2", amount: 12.5, description: "Bus Ticket", category: "Transport", date: "2025-03-04", }, { id: "3", amount: 89.99, description: "New Shoes", category: "Shopping", date: "2025-03-03", }, { id: "4", amount: 150.0, description: "Electricity Bill", category: "Bills", date: "2025-03-06", }, { id: "5", amount: 35.0, description: "Movie Tickets", category: "Entertainment", date: "2025-03-07", }, ]) // State for new expense const [newExpense, setNewExpense] = useState({ amount: "", description: "", category: "Food", date: new Date().toISOString().split("T")[0], }) // State for search and filter const [searchTerm, setSearchTerm] = useState("") const [filterCategory, setFilterCategory] = useState("All") const [isAddExpenseOpen, setIsAddExpenseOpen] = useState(false) const [activeTab, setActiveTab] = useState("all") // Calculate total expenses const totalExpenses = expenses.reduce((sum, expense) => sum + expense.amount, 0) // Filter expenses based on search, category, and active tab const filteredExpenses = expenses.filter((expense) => { const matchesSearch = expense.description.toLowerCase().includes(searchTerm.toLowerCase()) const matchesCategory = filterCategory === "All" || expense.category === filterCategory // Filter by time period if needed const expenseDate = new Date(expense.date) const today = new Date() const isToday = expenseDate.toDateString() === today.toDateString() const isThisWeek = expenseDate >= new Date(today.setDate(today.getDate() - today.getDay())) const isThisMonth = expenseDate.getMonth() === new Date().getMonth() && expenseDate.getFullYear() === new Date().getFullYear() let matchesTab = true if (activeTab === "today") matchesTab = isToday else if (activeTab === "week") matchesTab = isThisWeek else if (activeTab === "month") matchesTab = isThisMonth return matchesSearch && matchesCategory && matchesTab }) // Group expenses by category for summary const expensesByCategory = categories .map((category) => { const total = expenses .filter((expense) => expense.category === category.name) .reduce((sum, expense) => sum + expense.amount, 0) return { ...category, total, } }) .sort((a, b) => b.total - a.total) // Handle adding a new expense const handleAddExpense = () => { if (!newExpense.amount || !newExpense.description) return const expense: Expense = { id: Date.now().toString(), amount: Number.parseFloat(newExpense.amount), description: newExpense.description, category: newExpense.category, date: newExpense.date, } setExpenses([expense, ...expenses]) setNewExpense({ amount: "", description: "", category: "Food", date: new Date().toISOString().split("T")[0], }) setIsAddExpenseOpen(false) } // Handle deleting an expense const handleDeleteExpense = (id: string) => { setExpenses(expenses.filter((expense) => expense.id !== id)) } // Get category color const getCategoryColor = (categoryName: string) => { const category = categories.find((c) => c.name === categoryName) return category ? category.color : "bg-gray-500/80" } // Format date const formatDate = (dateString: string) => { const date = new Date(dateString) return date.toLocaleDateString("en-US", { month: "short", day: "numeric" }) } // Get category icon const getCategoryIcon = (categoryName: string) => { const category = categories.find((c) => c.name === categoryName) return category ? category.icon : } return (

{/* Header */}

ExpenseTracker

{/* Main Content */}

{/* Summary Cards */}

Total Expenses ${totalExpenses.toFixed(2)}

12% from last month

Top Category

{expensesByCategory[0]?.name || "None"}

${expensesByCategory[0]?.total.toFixed(2) || "0.00"}

{Math.round((expensesByCategory[0]?.total / totalExpenses) * 100) || 0}% of total expenses

This Month $ {expenses .filter((e) => new Date(e.date).getMonth() === new Date().getMonth()) .reduce((sum, e) => sum + e.amount, 0) .toFixed(2)}

{expenses.filter((e) => new Date(e.date).getMonth() === new Date().getMonth()).length} transactions

{/* Category Distribution */} Expense Distribution

{expensesByCategory .filter((category) => category.total > 0) .map((category) => (

{category.icon}

{category.name}

${category.total.toFixed(2)}

{Math.round((category.total / totalExpenses) * 100)}%

))}

{/* Expense List */}

Recent Expenses

setSearchTerm(e.target.value)} />

All Today This Week This Month

{filteredExpenses.length > 0 ? ( filteredExpenses.map((expense) => (

{getCategoryIcon(expense.category)}

{expense.description}

{expense.category} •

{formatDate(expense.date)}

${expense.amount.toFixed(2)}

Edit handleDeleteExpense(expense.id)} > Delete

)) ) : (

No expenses found.

Add a new expense or adjust your filters.

)}

{filteredExpenses.length > 0 && (

Showing {filteredExpenses.length} of {expenses.length} expenses

)}

) } [V0_FILE]typescriptreact:file="app/globals.css" @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: 222.2 47.4% 11.2%; --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: 222.2 84% 4.9%; --radius: 0.75rem; } .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: 210 40% 98%; --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: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom styles for glassmorphism */ .backdrop-blur-xl { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .backdrop-blur-sm { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }