Skip to content

[server + web] Add user dashboard #23

@Kuchteq

Description

@Kuchteq

Supersedes #8 (though without mobile clients for now). The groups overview is turning into dashboard overview which is much more complex. Furthermore, the new assignment takes into consideration the changes introduced with the new architecture.

Server

Web

  • Recreate the design present in Figma with hardcoded values. The dashboard is at the root directory i.e. at the / path. Modularize the design so that you make reusable components that can be later on used in future pages. The components would include:
  • Overview - showing the total balance across all groups and who one owes and from whom one borrowed.
  • ExpenseItem - showing a single item that was a part of. Notice how the same component is being used in other parts of the app such as Single Group. For that, you can add a parameter specifying whether to display the origin (i.e. the group) of the expense and the button assosiated with it.
  • GroupCard - showing an overview of a single group. Used for active groups.
  • HorizontalGroupCard - similar to above but is meant to be used for the non-active groups.
  • FriendListItem - showing the avatar, name and number of groups the friend and the user are in. Notice how it is also reused in the CreateGroup page. Maybe it could have some extra parameters as well?
  • Modify +page.svelte to include the aforementioned subcomponents and give them their background.
  • Once the server has its api schema specified modify the +page.ts file to fetch the data from the server and spread it throughout aforementioned components as parameters.

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions