Expense Tracker App

The navbar displays the logo, dashboard text, and a user dropdown with the user's full name on the top right.

The first row contains welcome text and an 'Add New Expense' button.

The second row contains three cards with an icon, a title, an amount, an increase or decrease icon, and a subtitle.

The third row contains a title and area chart.

The fourth row contains a card with title, pie chart and legend

The fourth row contains a card with title and scrollable table

Hovering over the area chart shows a tooltip displaying the month and amount at the cursor.

Hovering over the pie chart shows a tooltip displaying the category and percentage at the cursor.

Clicking the user dropdown opens a dropdown with links to settings, support, and a 'Log Out' button.

Clicking the 'Add New Expense' button opens the 'Add New Expense' modal with the background blurred.

The 'Add New Expense' modal contains a title, a subtitle, an amount input field, a category text field, and two buttons: 'Cancel' and 'Add Expense'.

Clicking 'Cancel' in the modal closes it without adding an expense.

Clicking 'Add Expense' in the modal closes the modal and adds a new row to the 'Expense History' table in the dashboard.

Adding an expense updates all values and charts in the dashboard.

Add a dark mode toggle.

Implement mobile views for the dashboard and modals.

Enable chart filtering by date range using dropdowns or sliders.

Add validation and error messages to the Add Expense form.

Implement export functionality to download the expense history table as a CSV file.

Allow users to edit or delete entries directly from the 'Expense History' table.

Add a sign up/login page using OAuth.