[WIP] Create web-based monthly expense tracker application

[Copilot]

• Analyze existing codebase structure
• Update database models (add monthly_salary, card_type, bank_name, balance, notifications table)
• Add missing API endpoints (analytics, notifications, dashboard summary)
• Create config.py and database.sql
• Create CSS files (main.css, auth.css, dashboard.css, components.css)
• Create JS files (main.js, auth.js, dashboard.js, cards.js, expenses.js, charts.js, notifications.js)
• Update landing page (index.html) with welcome section and auth buttons
• Update login.html to integrate with backend API
• Update signup.html to integrate with backend API
• Update dashboard.html with full features
• Create cards.html for card management
• Create add-expense.html for adding expenses
• Create settings.html for user settings
• Create reports.html for analytics
• Update README.md with setup instructions
• Add .gitignore file
• Test the application and take screenshots

Original prompt

Project Overview

Create a complete web-based monthly expense tracker application that helps users monitor their spending habits.

Requirements

Frontend Pages & Features

1. Index/Landing Page (index.html)

• Welcome section with application overview
• Login button
• Signup button
• Clean, modern design

2. Login Page (login.html)

• Email/username input field
• Password input field
• "Remember me" checkbox
• Login button
• Link to signup page
• Forgot password link

3. Signup Page (signup.html)

• Full name input
• Email input
• Password input
• Confirm password input
• Terms & conditions checkbox
• Signup button
• Link to login page

4. User Dashboard (dashboard.html)

• Welcome message with user's name
• Summary cards showing:
  • Total monthly salary
  • Total expenses
  • Remaining balance
  • Number of transactions
• Quick action buttons (Add Expense, Add Card, View Reports)
• Recent transactions list
• Monthly expense chart (bar/line graph)
• Expense breakdown by category (pie chart)
• Navigation menu

5. Card Management Page (cards.html)

• List of saved credit/debit cards
• Add new card form:
  • Card holder name
  • Card number
  • Expiry date
  • CVV
  • Card type (Credit/Debit)
  • Bank name
• Display total balance across all cards
• Edit/Delete card options

6. Add Expense Page (add-expense.html)

• Expense amount input
• Category dropdown (Food, Transport, Shopping, Bills, Entertainment, Healthcare, Education, Others)
• Description textarea
• Date picker
• Payment method selector (linked cards or cash)
• Submit button

7. User Settings Page (settings.html)

• Profile information section:
  • Update name
  • Update email
  • Update profile picture
• Monthly salary input
• Change password section
• Notification preferences
• Delete account option

8. Reports/Analytics Page (reports.html)

• Date range filter
• Monthly spending graph
• Category-wise expense breakdown
• Comparison with previous months
• Export data button (CSV/PDF)
• Spending trends and insights

Backend (Flask - app.py)

Required Endpoints:

1. Authentication

   • POST /api/signup - User registration
   • POST /api/login - User login
   • POST /api/logout - User logout
   • GET /api/user - Get current user info

2. Card Management

   • GET /api/cards - Get all user cards
   • POST /api/cards - Add new card
   • PUT /api/cards/<id> - Update card
   • DELETE /api/cards/<id> - Delete card

3. Expense Management

   • GET /api/expenses - Get all expenses
   • POST /api/expenses - Add new expense
   • PUT /api/expenses/<id> - Update expense
   • DELETE /api/expenses/<id> - Delete expense
   • GET /api/expenses/monthly - Get monthly summary

4. User Settings

   • PUT /api/user/profile - Update profile
   • PUT /api/user/password - Change password
   • PUT /api/user/salary - Update monthly salary

5. Analytics

   • GET /api/analytics/monthly - Monthly spending data
   • GET /api/analytics/category - Category-wise breakdown
   • GET /api/analytics/trends - Spending trends

Database Schema (MySQL)

Tables:

1. users

- id (INT, PRIMARY KEY, AUTO_INCREMENT)
- full_name (VARCHAR(100))
- email (VARCHAR(100), UNIQUE)
- password_hash (VARCHAR(255))
- monthly_salary (DECIMAL(10,2))
- profile_picture (VARCHAR(255))
- created_at (TIMESTAMP)
- updated_at (TIMESTAMP)

2. cards

- id (INT, PRIMARY KEY, AUTO_INCREMENT)
- user_id (INT, FOREIGN KEY)
- card_holder_name (VARCHAR(100))
- card_number_encrypted (VARCHAR(255))
- card_last_four (VARCHAR(4))
- expiry_date (VARCHAR(7))
- card_type (ENUM: 'credit', 'debit')
- bank_name (VARCHAR(100))
- balance (DECIMAL(10,2))
- created_at (TIMESTAMP)

3. expenses

- id (INT, PRIMARY KEY, AUTO_INCREMENT)
- user_id (INT, FOREIGN KEY)
- amount (DECIMAL(10,2))
- category (VARCHAR(50))
- description (TEXT)
- expense_date (DATE)
- payment_method (VARCHAR(50))
- card_id (INT, FOREIGN KEY, NULLABLE)
- created_at (TIMESTAMP)

4. notifications

- id (INT, PRIMARY KEY, AUTO_INCREMENT)
- user_id (INT, FOREIGN KEY)
- message (TEXT)
- type (ENUM: 'warning', 'info', 'success')
- is_read (BOOLEAN)
- created_at (TIMESTAMP)

CSS Styling Requirements

• Responsive design (mobile, tablet, desktop)
• Modern color scheme (suggest: primary blue, secondary green, accent orange)
• CSS file structure:
  • styles/main.css - Global styles
  • styles/auth.css - Login/Signup pages
  • styles/dashboard.css - Dashboard specific styles
  • styles/components.css - Reusable components (cards, buttons, forms)

JavaScript Functionality

• js/main.js - Global functions and utilities
• js/auth.js - Login/Signup handling
• js/dashboard.js - Dashboard data loading and charts
• js/cards.js - Card management
• js/expenses.js - Expense management
• js/charts.js - Chart.js integration for graphs
• js/notifications.js - Notification handling
  ...

This pull request was created as a result of the following prompt from Copilot chat.

Project Overview

Create a complete web-based monthly expense tracker application that helps users monitor their spending habits.

Requirements

Frontend Pages & Features

1. Index/Landing Page (index.html)

• Welcome section with application overview
• Login button
• Signup button
• Clean, modern design

2. Login Page (login.html)

• Email/username input field
• Password input field
• "Remember me" checkbox
• Login button
• Link to signup page
• Forgot password link

3. Signup Page (signup.html)

• Full name input
• Email input
• Password input
• Confirm password input
• Terms & conditions checkbox
• Signup button
• Link to login page

4. User Dashboard (dashboard.html)

• Welcome message with user's name
• Summary cards showing:
  • Total monthly salary
  • Total expenses
  • Remaining balance
  • Number of transactions
• Quick action buttons (Add Expense, Add Card, View Reports)
• Recent transactions list
• Monthly expense chart (bar/line graph)
• Expense breakdown by category (pie chart)
• Navigation menu

5. Card Management Page (cards.html)

• List of saved credit/debit cards
• Add new card form:
  • Card holder name
  • Card number
  • Expiry date
  • CVV
  • Card type (Credit/Debit)
  • Bank name
• Display total balance across all cards
• Edit/Delete card options

6. Add Expense Page (add-expense.html)

• Expense amount input
• Category dropdown (Food, Transport, Shopping, Bills, Entertainment, Healthcare, Education, Others)
• Description textarea
• Date picker
• Payment method selector (linked cards or cash)
• Submit button

7. User Settings Page (settings.html)

• Profile information section:
  • Update name
  • Update email
  • Update profile picture
• Monthly salary input
• Change password section
• Notification preferences
• Delete account option

8. Reports/Analytics Page (reports.html)

• Date range filter
• Monthly spending graph
• Category-wise expense breakdown
• Comparison with previous months
• Export data button (CSV/PDF)
• Spending trends and insights

Backend (Flask - app.py)

Required Endpoints:

1. Authentication

   • POST /api/signup - User registration
   • POST /api/login - User login
   • POST /api/logout - User logout
   • GET /api/user - Get current user info

2. Card Management

   • GET /api/cards - Get all user cards
   • POST /api/cards - Add new card
   • PUT /api/cards/<id> - Update card
   • DELETE /api/cards/<id> - Delete card

3. Expense Management

   • GET /api/expenses - Get all expenses
   • POST /api/expenses - Add new expense
   • PUT /api/expenses/<id> - Update expense
   • DELETE /api/expenses/<id> - Delete expense
   • GET /api/expenses/monthly - Get monthly summary

4. User Settings

   • PUT /api/user/profile - Update profile
   • PUT /api/user/password - Change password
   • PUT /api/user/salary - Update monthly salary

5. Analytics

   • GET /api/analytics/monthly - Monthly spending data
   • GET /api/analytics/category - Category-wise breakdown
   • GET /api/analytics/trends - Spending trends

Database Schema (MySQL)

Tables:

1. users

- id (INT, PRIMARY KEY, AUTO_INCREMENT)
- full_name (VARCHAR(100))
- email (VARCHAR(100), UNIQUE)
- password_hash (VARCHAR(255))
- monthly_salary (DECIMAL(10,2))
- profile_picture (VARCHAR(255))
- created_at (TIMESTAMP)
- updated_at (TIMESTAMP)

2. cards

- id (INT, PRIMARY KEY, AUTO_INCREMENT)
- user_id (INT, FOREIGN KEY)
- card_holder_name (VARCHAR(100))
- card_number_encrypted (VARCHAR(255))
- card_last_four (VARCHAR(4))
- expiry_date (VARCHAR(7))
- card_type (ENUM: 'credit', 'debit')
- bank_name (VARCHAR(100))
- balance (DECIMAL(10,2))
- created_at (TIMESTAMP)

3. expenses

- id (INT, PRIMARY KEY, AUTO_INCREMENT)
- user_id (INT, FOREIGN KEY)
- amount (DECIMAL(10,2))
- category (VARCHAR(50))
- description (TEXT)
- expense_date (DATE)
- payment_method (VARCHAR(50))
- card_id (INT, FOREIGN KEY, NULLABLE)
- created_at (TIMESTAMP)

4. notifications

- id (INT, PRIMARY KEY, AUTO_INCREMENT)
- user_id (INT, FOREIGN KEY)
- message (TEXT)
- type (ENUM: 'warning', 'info', 'success')
- is_read (BOOLEAN)
- created_at (TIMESTAMP)

CSS Styling Requirements

• Responsive design (mobile, tablet, desktop)
• Modern color scheme (suggest: primary blue, secondary green, accent orange)
• CSS file structure:
  • styles/main.css - Global styles
  • styles/auth.css - Login/Signup pages
  • styles/dashboard.css - Dashboard specific styles
  • styles/components.css - Reusable components (cards, buttons, forms)

JavaScript Functionality

• js/main.js - Global functions and utilities
• js/auth.js - Login/Signup handling
• js/dashboard.js - Dashboard data loading and charts
• js/cards.js - Card management
• js/expenses.js - Expense management
• js/charts.js - Chart.js integration for graphs
• js/notifications.js - Notification handling

Additional Features:

• Session management with Flask sessions
• Password hashing using bcrypt
• Input validation on both frontend and backend
• Error handling and user-friendly error messages
• Loading spinners for async operations
• Chart.js or similar library for data visualization
• Responsive navigation bar
• Toast notifications for success/error messages
• Auto-logout after inactivity
• Budget limit warnings (notification when expenses exceed 80% of salary)

Security:

• SQL injection prevention using parameterized queries
• XSS protection
• CSRF tokens for forms
• Secure password storage (hashed)
• Card number encryption
• HTTPS ready

File Structure:

/
├── app.py
├── requirements.txt
├── config.py
├── database.sql
├── static/
│   ├── css/
│   │   ├── main.css
│   │   ├── auth.css
│   │   ├── dashboard.css
│   │   └── components.css
│   ├── js/
│   │   ├── main.js
│   │   ├── auth.js
│   │   ├── dashboard.js
│   │   ├── cards.js
│   │   ├── expenses.js
│   │   ├── charts.js
│   │   └── notifications.js
│   └── images/
│       └── logo.png
├── templates/
│   ├── index.html
│   ├── login.html
│   ├── signup.html
│   ├── dashboard.html
│   ├── cards.html
│   ├── add-expense.html
│   ├── settings.html
│   └── reports.html
└── README.md

Implementation Notes:

• Use Flask-CORS for API requests
• Use Flask-Session for session management
• Include proper error handling in all API endpoints
• Add logging for debugging
• Include a README with setup instructions
• Add sample data for testing
• Include requirements.txt with all dependencies

Please create all files with complete, production-ready code including comments and proper error handling.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.