(M)Badges highlighting number of actions required

[edmofro]

Particularly now we have Customer Requisitions, which we need users to see and process without something so obvious as a pile of stock landing on their doorstep.

Like a facebook notification on the corner of the 'Customer Requisitions' and 'Supplier Invoices' buttons, showing the number of 'In Process' requisitions, and 'In Process' external supplier invoices.

[GaryWilletts]

Love it, something I've been pushing for in mSupply for ages.

[andreievg]

Thumbs Up

[Chris-Petty]

Difficulty with android :/

facebook/react-native#6802
facebook/react-native#3198
facebook/react-native#12534
overflow:visible not quite there yet: https://github.com/facebook/react-native/tree/master/ReactAndroid/src/main/java/com/facebook/react/flat#nodes

[andreievg]

Should also show badges for anything created but not finalised > x days long.

[andreievg]

I've changed priority to High. This is getting urgent as we've become aware that a high number of mSupply Mobile users are not finalising Supplier Invoices (and thus the stock is not introduced in their store).

We need to introduced further UI changes aimed at improving overall usage and enforcing completion of key activities.

Badges will help, but it may require further thought and design. I'll launch an internal discussion via email, conclusion of which will be added as issue.

[andreievg]

@sworup as you are assigned to this issue, can you make some designs before you launch into implementation.

The idea is, we want to use badges to indicate to users that certain activities need to be addressed.

Examples:

• Not finalised supplier Invoices
• Not finalised customer requisitions
• Not finalised supplier requisitions
• Not finalised stock takes
• New supplier invoices
• New customer requisitions

I guess we need to determine what we consider 'Freshly' arrived and Not finalised. Maybe there needs to be a preference similar to this:

{
  supplierInvoices: {
    unFinalisedThresholdDays: 7,
    newThresholdDays: 2,
  },
  stockTake: {
    unFinalisedThresholdDays: 2,
    minimumStocktakePeriodDays: 30,
  }
...
}

The more I think about this, the more I feel we need a way to indicate to user, tasks that don't have a record associated with them, i.e. as per 'minimumStocktakePeriodDays': 30, means if last stocktake date was more then 30 days ago, we need to advise the user somehow.

[Chris-Petty]

The more I think about this, the more I feel we need a way to indicate to user, tasks that don't have a record associated with them, i.e. as per 'minimumStocktakePeriodDays': 30, means if last stocktake date was more then 30 days ago, we need to advise the user somehow.

Some kind of notification system ought to do it. I had originally thought it could be in #441, but should really be it's own separate issue.

[sworup]

@andreievg @Chris-Petty
Do you mean design of badges like this?

• The RED one is for Not finalised and GRAY is for New.
• I am thinking the badges would push to the top right corner (where RED badge is right now), if red has 0 notifications, the badge will disappear and GRAY will be at top. If both are 0, there is no badge.
• We could add icons (cross for not finalized etc.) to the left side of the numbers to give some representation, maybe we can add short abbreviation like NF and NEW right/left side of the number.

I have built a rough version of these badge components that you are seeing in screenshot.

[Chris-Petty]

@sworup yea that is exactly the idea. Is there a good touchscreen way of showing tooltips? Be good to have explanation of what the badges are actually representing!

Another option is it's especially important to finalise supplier invoices - perhaps a regular push notification would help here if some are unfinalised. Probably another issue for that 😉 .

[andreievg]

Some kind of notification system ought to do it. I had originally thought it could be in #441, but should really be it's own separate issue.

@Chris-Petty, i feel like a notification is too easy to dismiss and forget about.
What i was thinking, as an example:

• Stocktake is due to be done
• A badge appears on stocktake menu button
• When stocktake is pressed, a modal appears telling the user that stocktake is overdue and needs to be created

Similar for all other badges, when you actually go into supplier invoices, customer requisitions etc.. there is a modal explaining why there are badges

[andreievg]

@sworup I like the idea of your design. What does the rough version look like btw ? (is it form the screenshot).

I think we also need a way to put a badge on the data table, next to the record that badge is for.

[josh-griffin]

Closed by #1313

[diegoevangelisti]

TESTS

• There is a badge on a button on MenuPage where there are in progress records. [For example: If there 1+ supplier invoice that are in progress (or, not finalised) the badge should appear].
• There is no badge when there are no in progress records.
• The badge correctly states how many in progress records there are [i.e. 3 in progress CI's, should show 3].
• Badges are clickable, opening a popup which displays more information regarding the badge.
• Clicking away closes the popup, when it is open [Try some funny things, like trying to navigate away from the page when the popup is open, or clicking other things quickly before it appears].

All good, just not sure about the last one. Just noticed that clicking a button quickly before the popup appears (e.g. SupplierInvoicesPage button), that page opens and then the popup shows up and disappears briefly.

[josh-griffin]

@diegoevangelisti

The issue you're describing should have been fixed with this one: #1581

The popover should be automatically closed when navigating, maybe it is taking to long? Is it automatically closing?

[diegoevangelisti]

@diegoevangelisti

The issue you're describing should have been fixed with this one: #1581

The popover should be automatically closed when navigating, maybe it is taking to long? Is it automatically closing?

You are right @joshxg , #1581 was tested with a Lenovo tablet (Android 8.1.0) but this one only in the AVD (Android 9.0), which as you mentioned it is taking to long to open the popup. And last, yes, it is automatically closing (in both tablet and emulator).
I reckon it is ok if this is just happening using a VD.

[josh-griffin]

@diegoevangelisti

Cool. I think it's not a great solution but it's pretty edge casey .. lets see how users react!

[emilyporrello]

Docs updated

Badges explained in Getting Started page (with updated screenshots of main screen)
https://docs.msupply.foundation/en:mobile:user_guide:getting_started