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.
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)