improving progress bar interface

components/review_dashboard_page.py

@@ -177,16 +177,16 @@ class ReviewDashboardPage:
             return validation_status, is_deleted
 
         def get_review_progress_fn(session):
-            """Calculate review progress for the current reviewer"""
+            """Calculate review progress for the current reviewer with beautiful tqdm-style display"""
             user_id = session.get("user_id")
             username = session.get("username")
             
             if not user_id or not username:
-                return "Review Progress: N/A"
+                return ""
             
             # Check if user is a reviewer
             if username not in conf.REVIEW_MAPPING.values():
-                return "Review Progress: N/A (Not a reviewer)"
+                return ""
             
             # Find target annotator
             target_annotator = None
@@ -196,14 +196,14 @@ class ReviewDashboardPage:
                     break
             
             if not target_annotator:
-                return "Review Progress: N/A (No target annotator)"
+                return ""
             
             with get_db() as db:
                 try:
                     # Get target annotator's ID
                     target_annotator_obj = db.query(Annotator).filter_by(name=target_annotator).first()
                     if not target_annotator_obj:
-                        return f"Review Progress: Error (Annotator '{target_annotator}' not found)"
+                        return f"⚠️ **Error:** Annotator '{target_annotator}' not found"
                     
                     # Count total annotations for target annotator
                     total_count = db.query(Annotation).filter(
@@ -220,13 +220,63 @@ class ReviewDashboardPage:
                     
                     if total_count > 0:
                         percentage = (reviewed_count / total_count) * 100
-                        return f"**Review Progress:** {reviewed_count}/{total_count} ({percentage:.1f}%) - Reviewing {target_annotator}'s work"
+                        
+                        # Create tqdm-style progress bar
+                        bar_width = 30  # Width of the progress bar in characters
+                        filled = int((percentage / 100) * bar_width)
+                        empty = bar_width - filled
+                        
+                        # Different colors based on progress
+                        if percentage < 25:
+                            color = "🔴"  # Red for low progress
+                            bar_color = "progress-bar-low"
+                        elif percentage < 50:
+                            color = "🟡"  # Yellow for medium-low progress
+                            bar_color = "progress-bar-medium-low"
+                        elif percentage < 75:
+                            color = "🟠"  # Orange for medium progress
+                            bar_color = "progress-bar-medium"
+                        elif percentage < 100:
+                            color = "🟢"  # Green for high progress
+                            bar_color = "progress-bar-high"
+                        else:
+                            color = "✅"  # Check mark for complete
+                            bar_color = "progress-bar-complete"
+                        
+                        # Create the visual progress bar with Unicode blocks
+                        progress_bar = "█" * filled + "░" * empty
+                        
+                        # Estimate remaining items
+                        remaining = total_count - reviewed_count
+                        
+                        # Create the beautiful progress display
+                        progress_html = f"""
+                        <div class="progress-container">
+                            <div class="progress-header">
+                                <span class="progress-icon">{color}</span>
+                                <strong>Review Progress - {target_annotator}'s work</strong>
+                            </div>
+                            <div class="progress-bar-container">
+                                <span class="progress-percentage">{percentage:.1f}%</span>
+                                <div class="progress-bar {bar_color}">
+                                    <span class="progress-fill" style="width: {percentage:.1f}%"></span>
+                                </div>
+                                <span class="progress-stats">{reviewed_count}/{total_count}</span>
+                            </div>
+                            <div class="progress-details">
+                                📊 <code>{progress_bar}</code> 
+                                <span class="remaining-items">({remaining} remaining)</span>
+                            </div>
+                        </div>
+                        """
+                        
+                        return progress_html
                     else:
-                        return f"**Review Progress:** No items found for {target_annotator}"
+                        return f"📭 **No items found for {target_annotator}**"
                         
                 except Exception as e:
                     log.error(f"Error calculating review progress for user {user_id}: {e}")
-                    return "Review Progress: Error calculating progress"
+                    return f"⚠️ **Error calculating progress**"
 
         def load_review_items_fn(session):
             user_id = session.get("user_id")