First look at the revised design for the frontend for Carpe Debitum



So what's going on in the above screen grab?

  • A dashboard-like area in the blue.
  • The "Expense Balance" will now update when new expenses are added, deleted, or updated.
    • This was done through the use of Vuex to store the state of that balance.
    • The value itself is pulled into the component as a computed property that watches the state in the Vuex store.
  • The data in the table in "Summary of Expenses" gets loaded when the page component is mounted.  If an access token is present, which it should be if the user is logged in, then the app makes a call to the API to get all expenses for that user.  This also triggers the expense balance to be updated also.  
  • The columns are sortable.
  • 2 buttons for the user to add a new expense in case the list gets long and the user doesn't want to scroll back to the top of the page.
  • "Monthly Net Income" and "Summary" aren't implemented yet, but...
    • "Monthly Net Income" will be a value that is manually put in by the user.
    • "Summary" and the bar that it sits on will be a secondary top navigation menu that belongs to just this section.  Other sections will have something similar.