From 68c24f37675c2f9c5d70dcda8b830118a9511f6b Mon Sep 17 00:00:00 2001 From: "mergify[bot]" <37929162+mergify[bot]@users.noreply.github.com> Date: Fri, 31 Jul 2026 09:59:07 +0530 Subject: [PATCH] feat: status based bar colors in Work Order gantt view (backport #57634) (#57635) feat: status based bar colors in Work Order gantt view (#57634) (cherry picked from commit d59c5e36bcb53be84ec46bd5d29b5c0b2f46f929) Co-authored-by: rohitwaghchaure --- .../doctype/work_order/work_order_calendar.js | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/erpnext/manufacturing/doctype/work_order/work_order_calendar.js b/erpnext/manufacturing/doctype/work_order/work_order_calendar.js index 90ce74ce232..9173212f941 100644 --- a/erpnext/manufacturing/doctype/work_order/work_order_calendar.js +++ b/erpnext/manufacturing/doctype/work_order/work_order_calendar.js @@ -46,3 +46,60 @@ frappe.views.calendar["Work Order"] = { ], get_events_method: "frappe.desk.calendar.get_events", }; + +const WORK_ORDER_GANTT_COLORS = { + Draft: "red", + Stopped: "red", + "Not Started": "red", + "In Process": "orange", + Completed: "green", + "Stock Reserved": "blue", + "Stock Partially Reserved": "orange", + Cancelled: "gray", +}; + +if (!frappe.views.GanttView.prototype._work_order_status_colors) { + frappe.views.GanttView.prototype._work_order_status_colors = true; + + const prepare_tasks = frappe.views.GanttView.prototype.prepare_tasks; + frappe.views.GanttView.prototype.prepare_tasks = function () { + prepare_tasks.call(this); + if (this.doctype === "Work Order") { + set_work_order_bar_classes(this); + } + }; + + const set_colors = frappe.views.GanttView.prototype.set_colors; + frappe.views.GanttView.prototype.set_colors = function () { + set_colors.call(this); + if (this.doctype === "Work Order") { + set_work_order_bar_styles(this); + } + }; +} + +function set_work_order_bar_classes(view) { + view.tasks.forEach((task, idx) => { + const color = WORK_ORDER_GANTT_COLORS[view.data[idx].status]; + if (color) { + task.custom_class = "wo-" + color; + } + }); +} + +function set_work_order_bar_styles(view) { + const style = [...new Set(Object.values(WORK_ORDER_GANTT_COLORS))] + .map( + (color) => ` + .gantt .bar-wrapper.wo-${color} .bar { + fill: var(--${color}-300); + } + .gantt .bar-wrapper.wo-${color} .bar-progress { + fill: var(--${color}-300); + } + ` + ) + .join(""); + + view.$result.prepend(``); +}