What is the correct way to manage workflow state override in ERPNext

1

In some document, i.e., Expense Claim, the status the combination of docstatus and field status.
image

With the help of this JS code,

frappe.listview_settings['Expense Claim'] = {
	add_fields: ["total_claimed_amount", "docstatus", "company"],
	get_indicator: function(doc) {
		if(doc.status == "Paid") {
			return [__("Paid"), "green", "status,=,Paid"];
		}else if(doc.status == "Unpaid") {
			return [__("Unpaid"), "orange", "status,=,Unpaid"];
		} else if(doc.status == "Rejected") {
			return [__("Rejected"), "grey", "status,=,Rejected"];
		}
	}
};

Ths way, when Expense Claim is Paid, the status Paid will be show,

But when we move to use Workflow State to overide the status, for example, says the workflow state is “Approved”.

  • When the Expense Claim is Paid, the workflow state will still show as “Approved”
  • When the Payment entry is cancelled (and expense status become unpaid), the workflow state still show “Approved”
  • Or even when Expense Claim is later cancelled, the workflow state will still show as “Approved”.

My question is as we choose to use Workflow State to override Status, what is the correct way to handle it when some other field state is changed also (like using JS to control as the above?)

Thanks!