UI Menus & Layouts

this is a revamp guide on the new development of oelite business suite app ( obsapp ) as of todate, we are re developing the app to make it more usable the ui mock ups provided in this site may change as they are linked to figma please make sure to always double check if any changes have been made before you continue reading the mock up design related documentation the ui mock ups provided in this site may change as they are linked to figma please make sure to always double check if any changes have been made before you continue reading the mock up design related documentation ui resource files ui resource files https //files webcider com/d/3a5d4397d2714ec89e07/ splash screen the obsapp should be designed to be responsive and work on most popular mobile devices, such as ipad, android tablets; the design should also consider the usability of the app on smaller screen defvices, such as iphone and android phones the splash screen will apply a full screen image (currently white blank background) and our oelite logo should be always centered at the screen and clear at high quality at the bottom right of the screen, please leave a version variable which can be later updated each time when we deploy the app the splash sceen should last no more than 2 seconds, among the 2 seconds, please make sure the server connection status is checked implement the docid\ pugkkdi8q2 67xjqinnmi whilst showing the splash screen if any of the health check fails, show "error cannot connect to central server " at the top of the next screen (login screen), disable the login input controls and retry every 5 seconds till the connection is established login screen the relevant ui resources have been made available as mentioned at the top of this page the following logic tests and flow should be implemented please validate the email address is in correct format if not, show small red text below the textbox as "please correct your email address" when user tap "login" button, use the docid\ i5xftfwh0cee6gn qiaxe to verify the user's account if multiple accounts are associated to the user (detailed flow in the api documentation), show a list of the accounts fetched from the server and let the user to choose which account to login on successful login, the dashboard layout should be displayed dashboard screen the relevant ui resources have been made available as mentioned at the top of this page the following logic tests and flow should be implemented vertical navigations the left navigation icons are for (from first green icon to the last cog icon) dashboard icon this is for the dashboard page, which is also the first highlighted button as dashboard page is the first screen when user logs in shopping bag icon when shopping bag icon is tapped, navigate the page to "new order" screen product tag icon when product tag icon is tapped, navigate the page to "product search" screen customer icon (two people icon) when customer icon is tapped, navigate the page to "customer list" screen document icon when document icon is tapped, navigate the page to "order history" screen main screen the main screen is consisted of multiple tiles , each tile is actually a button which navigates to the related page new order tile this is for navigating to "new order" screen for creating new order (point of sale) new customer tile this is for navigating to "new customer" screen which is used for creating new customer product search tile this is for navigating to "product search" screen which is for searching product & details page order history tile this is for navigating to "order history" screen which is for searching historical order & details page customer list tile this is for navigating to "customer list" screen which is for searching customers & details page settings tile this is for navigating to "settings" screen which is designed for app settings right sidebar cart view the right sidebar is designed to be always available as shopping cart when in smaller screen (such as mobile view), please make it a drawer with a toggle icon on top right (next to the "connected" status text) so user can toggle the view the cart view is split into 4 sections top section 2 buttons are to be displayed here clear cart button this button is designed to be a quick action to clear all items in the current cart more actions button this is a list button which will show a list of actions in menu when tapped the following actions should be listed assign customer assign a customer for current cart (i e order for a selected customer) add discount apply a custom discount for current order main section the main section should show a list of existing items having been added to the cart, detailed ui layout can be found in "new order" screen shipping section the shipping section has a button "select shipping" which shows a pop up allowing user to select a shipping method for the current order on selection, the calculated shipping cost will then be applied to the right total section the total section displays the calculated total amount for the order and the "checkout" button will become enabled once the amount is displayed greater than 0 and with more than 1 item in the cart