update attendance report UI

static/css/attendance.css

@@ -1000,6 +1000,12 @@
   border: 1px solid rgba(5, 150, 105, 0.3);
 }
 
+.location-accuracy-badge.accuracy-accurate {
+  background: var(--success-light);
+  color: var(--success-color);
+  border: 1px solid rgba(5, 150, 105, 0.3);
+}
+
 .location-accuracy-badge.accuracy-good {
   background: #ecfdf5;
   color: #059669;
@@ -1018,6 +1024,12 @@
   border: 1px solid rgba(220, 38, 38, 0.3);
 }
 
+.location-accuracy-badge.accuracy-unaccurate {
+  background: var(--danger-light);
+  color: var(--danger-color);
+  border: 1px solid rgba(220, 38, 38, 0.3);
+}
+
 .location-accuracy-badge.accuracy-unknown {
   background: var(--gray-100);
   color: var(--gray-500);

static/js/attendance_report.js

@@ -598,10 +598,8 @@ function extractLocationAccuracy(cell) {
 
 function extractLocationAccuracyLevel(cell) {
   const text = cell.textContent;
-  if (text.includes("excellent")) return "excellent";
-  if (text.includes("good")) return "good";
-  if (text.includes("fair")) return "fair";
-  if (text.includes("poor")) return "poor";
+  if (text.includes("excellent") || text.includes("good")) return "accurate";
+  if (text.includes("fair") || text.includes("poor")) return "unaccurate";
   return "unknown";
 }
 
@@ -794,10 +792,8 @@ function updateFilterStats() {
 // Function to get accuracy level color for charts or displays
 function getAccuracyLevelColor(level) {
   const colors = {
-    excellent: "#059669", // green
-    good: "#10b981", // lighter green
-    fair: "#f59e0b", // yellow
-    poor: "#dc2626", // red
+    accurate: "#059669", // green
+    unaccurate: "#dc2626", // red
     unknown: "#6b7280", // gray
   };
   return colors[level] || colors["unknown"];