Service urgency/criticality visualization is not consistent across the app

[OleksiyRudenko]

Describe the bug The app draws attention to a service due soon... ... on the dashboard

... and in the bikes list

But not on the schedule list.

To Reproduce Steps to reproduce the behavior:

1. Go to https://bikecare.gerbenbol.com/dashboard/service-schedules
2. See incosistent status icon when the service is due soon or overdue

Expected behavior The service status icon is either yellow or red when the service is due soon or overdue.

Screenshots See as embedded above.

Desktop (please complete the following information):

• OS: MacOS 14.3
• Browser Chrome
• Version 121.0.6167.85 (Official Build) (x86_64)

Smartphone (please complete the following information):

• Device: OnePLus 8T
• OS: Android 13
• Browser Chrome
• Version Latest as of 2024-02-20

Additional context n/a

[Gerben321]

Good find. There's indeed a bit of a difference there. The table only shows overdue, and the other places show almost or overdue.

Indeed a third color would be good. Green for good, yellow for maybe 15% left, and red for overdue? On the pie chart there is green and yellow and orange and red. But that might be overkill for other places.

What do you think? That way I can apply that everywhere.

[OleksiyRudenko]

To me, yellow (with whatever rule you currently have already got in place) for the nearing service and red for overdue would work perfectly fine.

Orange might be good on service with longer utilization period, like chain or cassette replacements (when 15% with yellow is rather early heads-up). Would be nice to predict 1 day due. I.e. in this scenario yellow would stand for "buy a replacement", and orange "be ready to replace in a day or two".

Upd: for a frequent service, like oiling, orange may not make much sense. From the other hand if I get used to have an orange from time to time as a last warning I can easily overlook the yellow status. Maybe for frequent services it makes sense to warn with orange, omitting yellow warning. I do not know, sitting on the fence.

[Gerben321]

This is my proposal:

• 0% left = red.
• 15% or less = orange
• Above 15 = green

And on the component and bike list I will add the icons like for the schedules. I think that should make everything more consistent.

The bike will show the overall lowest icon. So if there's a schedule that's orange, and one that's red, it will show red. If there's one orange and 2 green, it will show orange.

[Gerben321]

I've deployed this update, let me know what you think. Feel free to drop a comment if the percentages need some work or if you still found something that's inconsistent!