feat(members-time-sheet): enhance tooltip display with utilization status and color coding

worklenz-frontend/src/pages/reporting/time-reports/members-time-sheet/members-time-sheet.tsx

@@ -83,17 +83,38 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
       },
       tooltip: {
         callbacks: {
-          label: function(context: any) {
+          label: function (context: any) {
             const idx = context.dataIndex;
             const member = jsonData[idx];
             const hours = member?.utilized_hours || '0.00';
-            const percent = member?.utilization_percent || '0.00';
+            const percent = parseFloat(member?.utilization_percent || '0.00');
             const overUnder = member?.over_under_utilized_hours || '0.00';
+            let status = '';
+            let color = '';
+            if (percent < 90) {
+              status = 'Under';
+            } else if (percent <= 110) {
+              status = 'Optimal';
+            } else {
+              status = 'Over';
+            }
             return [
               `${context.dataset.label}: ${hours} h`,
               `Utilization: ${percent}%`,
-              `Over/Under Utilized: ${overUnder} h`
+              `${status} Utilized: ${overUnder} h`
             ];
+          },
+          labelTextColor: function (context: any) {
+            const idx = context.dataIndex;
+            const member = jsonData[idx];
+            const utilization = parseFloat(member?.utilization_percent || '0');
+            if (utilization < 90) {
+              return '#FFB546';
+            } else if (utilization >= 90 && utilization <= 110) {
+              return '#B2EF9A';
+            } else {
+              return '#FE7173';
+            }
           }
         }
       }