How to dynamically implement milestone bar?

I have to create a milestone bar which changes it's steps dynamically.


The resources I have is :

A look up table, "status_ref" containing statuses: "Pending", "Approved", "Ordered" and "Fulfilled", which represent the different statuses of a request.


We have two more statuses to deal with, those are "Canceled" and "Rejected" but those are not handled by the "status_ref". They are handled with boolean flags/columns, "is_canceled" and "is_rejected" in a "request" table containing all the requests.


I have the requirement of a milestone where first step should always be "Pending", then next possible steps shown are "Approved", then "Ordered" and then "Fulfilled". I am able to achieve this by simply using a query.

It should look like: "Pending">"Approved">"Ordered">Fulfilled".


But at any moment if request is "Pending", user can cancel the request. If it is canceled, then it should look like:


"Pending">"Canceled" (No further steps should be shown)


Or if it's Rejected then:


"Pending">"Rejected" (No further steps should be shown)


Now, the catch is, a request can be canceled after it is approved or ordered. Then milestone bar should look like:


"Pending">"Approved">"Canceled" (If Canceled after request is approved)
"Pending">"Approved">"Ordered">"Canceled" (If Canceled after request is ordered)


How can I achieve this pattern, please suggest any good dynamic approach to implement the solution.
Attaching few screenshots for better understanding showing how it should look like.
Any help is appreciated. Thanks

  Discussion posts and replies are publicly visible