[change:ux] Make progress bar in status page more user friendly

[nemesifier]

I believe we should enhance the progress bar on the status page to better indicate the time and/or traffic available to the user.

The main issue I see here is that the unit of measure for the remaining time is missing, I fear users may not easily understand what 03:00:00 means.

Maybe we can communicate the remaining time/traffic too?

If we improve this a bit, I believe we can turn this feature on by default (I think now it's disabled by default).

Update: UX Mockups

See the full Usage Meter Mock Up. on Figma.

The guys at Ura Design did a great job! 👏

With @pandafy we think the mockups on the right (radial version) are very intuitive and we want to go with that option.

However, there's on key point, which is the line which says "* Daily limits reset in N hours".
To implement this, we need to change the OpenWISP RADIUS API to give us this information, because the reset period is defined in the RADIUS counter.

So to summarize, I believe we should:

• Modify OpenWISP RADIUS to return the counter reset in the API (see [change:api] Include reset period in UserRadiusUsageView response openwisp-radius#669)
• Update WLP to be able to retrieve this info
• Implement the radial mockup here in WLP
• Enable this feature by default

[prashxant]

hi!! would love to work on this issue

[sanjayahari]

@nemesifier I would like to Work on this Issue

[nemesifier]

I updated the issue with the mockup and more detailed description.

[PRoIISHAAN]

i would like to work on this

[PRoIISHAAN]

@Dhruv-ub i have started already