User Interface Desktop - Team-LANS/lepta GitHub Wiki

Here design proposals for several screens of the lepta web application for desktop are provided. Navigation in this variant happens over the navigation bar, wich provides links to the four main sections of the application. The link to "Bills" provides further navigation possibilities using links to New Bills, Assigned Bills and Archive. Access to the user account and logout is provided using the menu on the top right.

Home

This screen is initial view shown to the user after login. It provides basic information about the current state of the account. Access to various actions such as creating a new bill or importing one from a file are provided in the menu under the navigation bar.

Home

New bills

This screen provides an overview over all new bills. Navigation between multiple pages of bills is possible using the carets on the left and right of the bills. When hovering over a single bill, a context menu is shown providing buttons to access to delete, edit and assign. Under the navigation bar, buttons for various actions such as creating a new bill and importing one from a file, as well as sorting or filtering the list are provided.

![New bills](./res/ui/New Bills_2.png)

Create new

This screen enables the user to manually create a new bill. Similar to the mobile version, items can be created by clicking the Add another button. When hovering over items in this mode, the user has access to buttons for changing an item or deleting it.

![Create new](./res/ui/Create new_2.png)

Import Image

Here, the user may choose one or more images to import by clicking the import button. While images are processed, the user is provided with progress bars. After the images are processed the user is redirected to the review import screen.

![Import image](./res/ui/Import image.png)

Review import

Here the user may edit a bill, just like in the Create new view. However, access to the original image is also provided. If more images have been imported, the user may navigate between them using the carets left and right of the main screen.

![Review import](./res/ui/Review import.png)

Assign bills

This view enables the user to assign bill items to either the partners account or shared by clicking on bill items. Navigation between pages of bills is again possible by using the carets on the left and right of the screen.

![Assign bills](./res/ui/Review import.png)

Clear Debt

This view enables the user to initialize settlement of assigned bills.

![Clear debt](./res/ui/Clear Debt_2.png)
![Clear debt](./res/ui/Clear Debt - confirm_2.png)
![Clear debt](./res/ui/Clear Debt-Review.png)