Clarify category labels with percentage ranges

Update CATEGORY_SCALE labels to include score ranges and clearer wording across JobSheetTemplate.tsx and report-editor.js. Several labels were adjusted (e.g. "Excellent" -> "Excellent (100%)", "Poor" -> "Unsatisfactory (75-95%)", "Worse" -> "Poor (50-75%)") to make severity/score meaning explicit. No class names or other logic were changed—this is a UI label update for clearer reporting.

frontend/src/components/JobSheetTemplate.tsx

@@ -36,37 +36,37 @@ type RatingTone = {
 
 const CATEGORY_SCALE: Record<string, RatingTone> = {
   "0": {
-    label: "Excellent",
+    label: "Excellent (100%)",
     bg: "bg-green-100",
     text: "text-green-800",
     border: "border-green-200",
   },
   "1": {
-    label: "Good",
+    label: "Good (100%)",
     bg: "bg-green-200",
     text: "text-green-800",
     border: "border-green-200",
   },
   "2": {
-    label: "Fair",
+    label: "Fair (95-100%)",
     bg: "bg-yellow-100",
     text: "text-yellow-800",
     border: "border-yellow-200",
   },
   "3": {
-    label: "Poor",
+    label: "Unsatisfactory (75-95%)",
     bg: "bg-yellow-200",
     text: "text-yellow-800",
     border: "border-yellow-200",
   },
   "4": {
-    label: "Worse",
+    label: "Poor (50-75%)",
     bg: "bg-orange-200",
     text: "text-orange-800",
     border: "border-orange-200",
   },
   "5": {
-    label: "Severe",
+    label: "Severe (<50%)",
     bg: "bg-red-200",
     text: "text-red-800",
     border: "border-red-200",

frontend/src/components/report-editor.js

@@ -2,12 +2,12 @@
 import * as feather from "feather-icons";
 
 const CATEGORY_SCALE = {
-  "0": { label: "Excellent", className: "bg-green-100 text-green-800 border-green-200" },
-  "1": { label: "Good", className: "bg-green-200 text-green-800 border-green-200" },
-  "2": { label: "Fair", className: "bg-yellow-100 text-yellow-800 border-yellow-200" },
-  "3": { label: "Poor", className: "bg-yellow-200 text-yellow-800 border-yellow-200" },
-  "4": { label: "Worse", className: "bg-orange-200 text-orange-800 border-orange-200" },
-  "5": { label: "Severe", className: "bg-red-200 text-red-800 border-red-200" },
+  "0": { label: "Excellent (100%)", className: "bg-green-100 text-green-800 border-green-200" },
+  "1": { label: "Good (100%)", className: "bg-green-200 text-green-800 border-green-200" },
+  "2": { label: "Fair (95-100%)", className: "bg-yellow-100 text-yellow-800 border-yellow-200" },
+  "3": { label: "Unsatisfactory (75-95%)", className: "bg-yellow-200 text-yellow-800 border-yellow-200" },
+  "4": { label: "Poor (50-75%)", className: "bg-orange-200 text-orange-800 border-orange-200" },
+  "5": { label: "Severe (<50%)", className: "bg-red-200 text-red-800 border-red-200" },
 };
 
 const PRIORITY_SCALE = {
@@ -1034,12 +1034,12 @@ class ReportEditor extends HTMLElement {
     const requiredAction = template.required_action || "";
 
     const categoryScale = {
-      "0": { label: "Excellent", bg: "bg-green-100", text: "text-green-800", border: "border-green-200" },
-      "1": { label: "Good", bg: "bg-green-200", text: "text-green-800", border: "border-green-200" },
-      "2": { label: "Fair", bg: "bg-yellow-100", text: "text-yellow-800", border: "border-yellow-200" },
-      "3": { label: "Poor", bg: "bg-yellow-200", text: "text-yellow-800", border: "border-yellow-200" },
-      "4": { label: "Worse", bg: "bg-orange-200", text: "text-orange-800", border: "border-orange-200" },
-      "5": { label: "Severe", bg: "bg-red-200", text: "text-red-800", border: "border-red-200" },
+      "0": { label: "Excellent (100%)", bg: "bg-green-100", text: "text-green-800", border: "border-green-200" },
+      "1": { label: "Good (100%)", bg: "bg-green-200", text: "text-green-800", border: "border-green-200" },
+      "2": { label: "Fair (95-100%)", bg: "bg-yellow-100", text: "text-yellow-800", border: "border-yellow-200" },
+      "3": { label: "Unsatisfactory (75-95%)", bg: "bg-yellow-200", text: "text-yellow-800", border: "border-yellow-200" },
+      "4": { label: "Poor (50-75%)", bg: "bg-orange-200", text: "text-orange-800", border: "border-orange-200" },
+      "5": { label: "Severe (<50%)", bg: "bg-red-200", text: "text-red-800", border: "border-red-200" },
     };
     const priorityScale = {
       "1": { label: "Immediate", bg: "bg-red-200", text: "text-red-800", border: "border-red-200" },