[Docs] Web dashboard application user-interface

[truonghoangduy]

Note

• Using an UI-libary nebular. I suggest nebular-iot-dash-board.

• We will use UI library component to design our web dashboard.

• Firebase Auth for login/register

• Firebase firestore: to monitor device status in near realtime

Using sidebar to navigate to each web page.

# sample routing schema. modify as you will
/: "Home Page"
/login: " Login Page"
/signup: "Sign up Page"
/device/{id}: "Device Detail Page"
/device/management: "Device Management Page"
/device/new: "Create new device"
/organization/new : "Create Organization Page"

Page

Home Page

• Showing organization detail, allow to see device id, status, name, and location as a list with paging and sorting to locate the device
• Allow the user to click on the device name to route Device Detail Page

Device Detail Page

• Showing data log belonging to that only device, current device status, and device information.

Device Management Page

• Allow user to see all their device in table with paging
• In table click to device allow them to navigate to "Device Detail Page"
• In table having a selection for remove device,
• Having a button allows the user to add new device and route them to "Create new Device Page"

Create new Device Page ->

• To create device users have to type in their device information when they are finished they are able to submit the form.

• When the form is submitted and successful they will see their device status and their device configured QR code.

Login/Sign up

• Page allows the user to sign in with an Email & Password

• If they don't have an account they could create their account.

Create Organization Page:

• Page allows the user when they first sign-in able to create an organization
• They will be able to type in their organization information
• Upload an .IMG as their organization image.