Reet Budget Tracker App

Create a modern budget tracking application using Next.js, TypeScript, and Tailwind CSS with the following features and specifications:

Core Features

1. Dashboard Overview

   • Total Balance card with dynamic gradient backgrounds
   • Monthly Income card with green gradient
   • Monthly Expenses card with red gradient
   • All cards should have hover animations and transitions

2. Transaction Management

   • CRUD operations for transactions
   • Add new transactions with:
     • Title
     • Amount
     • Date
     • Type (Income/Expense)
   • Edit existing transactions
   • Delete transactions with confirmation
   • Real-time updates to balance calculations

3. Internationalization

   • Support for multiple languages:
     • English
     • Hindi
     • Bengali
   • Currency format support for:
     • Indian Rupee (₹)
     • US Dollar ($)
     • Euro (€)

4. Settings & Preferences

   • Language selection
   • Currency preference
   • Theme selection (Light/Dark/System)
   • Week start day preference
   • Notification preferences:
     • Push notifications
     • Email alerts
     • Budget alerts

Technical Requirements

1. Frontend Framework

   • Next.js 14+ with App Router
   • TypeScript for type safety
   • Tailwind CSS for styling

2. UI Components

   • Custom Card component
   • Modal component for transactions
   • Form components with validation
   • Interactive buttons and inputs

3. State Management

   • React Context for settings
   • Local state for transactions
   • Persistent storage using localStorage

4. Styling

   • Gradient backgrounds for cards
   • Responsive design
   • Dark mode support
   • Smooth transitions and animations

5. Code Organization

   • Component-based architecture
   • Separate utility functions
   • Type definitions
   • Modular CSS

Design Guidelines

1. Colors

   • Use gradient combinations for cards
   • Consistent color scheme throughout
   • Proper contrast for accessibility

2. Layout

   • Responsive grid system
   • Clean and modern interface
   • Proper spacing and alignment

3. Typography

   • Clear hierarchy
   • Readable font sizes
   • Consistent font families

4. Interactions

   • Hover effects on cards
   • Smooth transitions
   • Clear feedback on actions

Implementation Details

1. File Structure

   • Organized component directory
   • Separate contexts
   • Utility functions
   • Type definitions

2. Components

   • Reusable UI components
   • Form components
   • Modal dialogs
   • Navigation elements

3. Features

   • Real-time calculations
   • Data persistence
   • Language switching
   • Theme toggling

4. Error Handling

   • Form validation
   • Type checking
   • Fallback UI

Additional Requirements

1. Performance

   • Optimized renders
   • Memoized calculations
   • Efficient state updates

2. Accessibility

   • ARIA labels
   • Keyboard navigation
   • Screen reader support

3. User Experience

   • Intuitive interface
   • Clear feedback
   • Smooth transitions