Problem or Need

Currently, when an error occurs in the application (e.g., a failed API call during login or a receipt upload failure), the feedback to the user is inconsistent and not user-friendly. Errors are often logged silently to the developer console, which the user never sees. This can leave users confused about why an action failed, leading to a poor experience.

Proposed Solution

Implement a global "toast" notification system to display clear, user-friendly error messages. (Toasts are small, non-blocking pop-up messages that appear on the screen to provide timely feedback.) This system will be used whenever an operation fails, ensuring the user is always informed.

Expected Behavior

1. A user performs an action that results in an error (e.g., enters the wrong password for login).
2. Instead of a disruptive alert or silent failure, a small notification animates onto the screen (e.g., top-center or top-right).
3. The toast displays a concise and helpful error message, such as "Invalid email or password. Please try again."
4. The toast remains visible for a few seconds and then automatically dismisses itself without requiring user interaction.

Benefits

• Improved UX: Provides immediate, clear, and non-disruptive feedback for user actions.
• Consistent Error Handling: Establishes a professional and uniform way to communicate problems to the user throughout the application.
• Increased Clarity: The user is never left wondering why a button click or form submission didn't work as expected.

Possible Implementation

• Frontend:
  • Install a lightweight, modern toast notification library, such as react-hot-toast.
  • Add the library's provider component (e.g., <Toaster />) to the root of the application, likely in main.jsx or App.jsx, to make it globally available.
  • Go through all frontend files that contain try...catch blocks for API calls (AuthContext.jsx, DashboardPage.jsx, TransactionsPage.jsx, ReceiptsPage.jsx, etc.).
  • In each catch block, replace the existing console.error() or alert() with a toast.error() call that provides a user-friendly message.

Alternatives Considered

• We could use native browser alert() boxes, but this is a blocking action that interrupts the user's workflow and is generally considered a poor UX pattern in modern web applications.
• A custom notification system could be built from scratch, but using a well-maintained, accessible library like react-hot-toast is significantly faster and more reliable.