My Account Settings, Match Invoice Hi-Fi

[theNatePi]

We need to implement a "My Account" section to the settings page in order to allow users to modify account information. In addition, the invoice dashboard page needs to match Hi-Fi, which will be addressed through this sprint.

My Account

The settings page (client/src/components/settings, localhost/settings) has a "My Account" section which should allow a user to modify their information and settings.

For this page, implement the following

• Create a new file for this view
• Keep the existing behavior, for example what happens when you click on My Account right now (you are not directed to a new screen)
• Follow this Figma for the page
• Load information
  • Name
  • Email
  • Password (we don't know their password string, so this can be a fixed length of dots)
• Render the circle next to their name with their initials, this is not an image
• Create the "logout" button, ensure this logs the user out of their session
  • See client/src/contexts/AuthContext.tsx for the logout function, call this from the AuthContext
• Allow the user to edit their info
  • Update the email BOTH in the users table AND in Firebase
    • You may need help from TLs, ask in advance!
  • For resetting the password, look at the functionality from the "Forgot Password" on login
• Implement ALL modals

Match Invoice Hi-Fi

Match the Hi-Fi Figma for the Invoice dashboard (/invoices):

• Update all elements, buttons, colors, styles, etc to match the Hi-Fi on Figma
• Implement the toasts, which should pop up in the bottom right
  • The name, for example "Some Program Title, April 2025 Invoice" should be created from "[first three words of program title], [month] [year] Invoice" invoice
  • See the comments on Figma for more details
• Implement sorting on the table columns (Status, Program, Deadline)
  • See the sorting on /programs for an example
• Clicking on an invoice should navigate to that invoice (/invoices/id)

Acceptance Criteria

• My Account page created
• Editing user account implemented
  • Email updates on BOTH Firebase and in the DB
• Tested My Account page and editing all user info
• The /invoices page matches Hi-Fi perfectly (or as close as possible)
• The toasts on the invoice dashboard are implemented
• The table ordering on invoices is implemented
• Clicking on an invoice in the table navigates to that invoice