-
Notifications
You must be signed in to change notification settings - Fork 2
Open
Description
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
- Create an openapi /dashboard path returning the user dashboard information based on the user_id embedded inside jwt. The information that is to be displayed in presented on the figma project: https://www.figma.com/design/lzUOvguPdSF8103bGHBnDX/Split?node-id=0-1&t=MliIxfEemkYLNQTS-1 but in words we need to return as an object the user's:
- Balance overview containing the amount of money they borrowed to the amount owed to them. Furthermore it includes all the people and the references to the groups where that borrowing/lending takes place.
- 4 Latest expenses that the user was a part of with the reference to the group where those expenses are from.
- Active groups overview with the name, how much you borrowed/owed and members of that group. This was already implemented as part of task [server+android+web] Add group overview route #4.
- Archived groups overview with the name, how much you borrowed/owed and members of that group. This requires an implementation of archiving functionality [server] Add archive related database schema changes and api paths #21.
- Returning friends of the user and the amount of groups they are in with the user. This requires an implementation of the friends system carried out in [server] Add friends related db schema changes and queries. #22.
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.
Reactions are currently unavailable