fix(ui): add color in gstin status of the gstin report

resilient-tech · Feb 3, 2025 · db4a736 · db4a736
1 parent 8356569
commit db4a736
Showing 1 changed file with 28 additions and 3 deletions.
diff --git a/india_compliance/gst_india/report/gstin_detailed/gstin_detailed.js b/india_compliance/gst_india/report/gstin_detailed/gstin_detailed.js
@@ -49,11 +49,16 @@ frappe.query_reports["GSTIN Detailed"] = {
 		if (data) {
 			value = default_formatter(value, row, column, data);
 
-			value = `<span fieldname="${column.fieldname}">${value}</span>`
-
-			if (column.fieldname == "update_gstin_details_btn") {
+			if (column.fieldname == "status"){
+				value = get_colored_status(value);
+			}
+			else if (column.fieldname == "update_gstin_details_btn") {
 				value = create_btn_with_gstin_attr(data.gstin);
 			}
+			else{
+				value = `<span fieldname="${column.fieldname}">${value}</span>`
+			}
+
 		}
 
 		return value;
@@ -89,6 +94,26 @@ frappe.query_reports["GSTIN Detailed"] = {
 		})
 	},
 };
+const STATUS_TO_COLOR_MAPPING = {
+    "Active": "rgba(12, 216, 111, 0.7)",       // Green with 70% opacity
+    "Cancelled": "rgba(220, 53, 69, 0.7)",    // Red with 70% opacity
+    "Inactive": "rgba(253, 126, 20, 0.7)",    // Orange with 70% opacity
+    "Provisional": "rgba(255, 193, 7, 0.7)",  // Yellow with 70% opacity
+    "Suspended": "rgba(108, 117, 125, 0.7)",  // Grey with 70% opacity
+};
+
+function get_colored_status(status) {
+    return `<span class="badge" style="
+        background-color: ${STATUS_TO_COLOR_MAPPING[status]};
+        color: black;
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: 500;
+        padding: 6px 12px;
+        display: inline-block;
+        backdrop-filter: blur(5px);
+    ">${status}</span>`;
+}
 
 function toggle_rows_opacity(elements, opacity=null){
 	elements.each(function(){