Skip to main content

Real-Time Student Status Monitor

Overview​

The Real-Time Student Status Monitor is an advanced live tracking system that provides supervisors with real-time visibility into student work activity. This powerful dashboard uses SignalR technology to deliver instant updates on student clock-in/out status, work duration, and remaining hours.

Realtime Monitoring

Getting Started​

Access this page by clicking the "Realtime Monitoring" card on the Work Program Menu dashboard. The system automatically connects to real-time updates and displays the current semester's active students.

Page Layout and Real-Time Features​

Connection Status Indicator​

At the top of the page, monitor your real-time connection:

  • Green Chip: "Real-time updates active" - Live connection established
  • Red Chip: "Offline mode" - Connection lost, data may be outdated
  • Debug Information: Additional chips show system metrics for monitoring

Live Dashboard Header​

  • Current Time Display: Large digital clock showing real-time
  • Auto-Refresh: Page updates every 30 seconds automatically
  • SignalR Integration: Instant notifications for student status changes

Advanced Filtering System​

Comprehensive Filter Options​

Three-tier filtering system for precise student monitoring:

Semester Selection​

  • Current Semester: Automatically selects current academic semester
  • Historical Data: Access previous semesters for comparison
  • Auto-Load: Data refreshes when semester changes

Job Title Filter​

  • Dynamic Options: Populated from actual job assignments
  • Multi-Position Students: Shows all positions for students with multiple jobs
  • Real-Time Updates: Filter options update as data changes
  • Live Search: Results appear as you type (300ms debounce)
  • ID Support: Search by student ID or name
  • Fuzzy Matching: Flexible search algorithm

Filter Management​

  • Clear All Filters: One-click reset to show all students
  • Results Counter: Shows filtered vs. total student count
  • Smart Indicators: Visual feedback for active filters

Real-Time Student Status Cards​

Individual Student Cards​

Each student is displayed in a comprehensive status card with:

Student Information Section​

  • Student Avatar: Visual representation with person icon
  • Full Name: Student's complete name
  • Student ID: Unique identifier
  • Job Title: Current work position
  • Level Badge: Skill level (1-4) with color coding

Real-Time Status Indicators​

Dynamic status system with four states:

Active Status (Green)​

  • Indicator: Green chip with "Active" label
  • Work Duration: Live countdown timer showing HH:MM:SS
  • Progress Bar: Visual representation of hours used vs. limit
  • Check-In Time: When the student started working

Inactive Status (Gray)​

  • Indicator: Gray chip with "Inactive" label
  • Duration: Shows "00:00:00" when not working
  • Status: "Not currently active" message
  • Ready State: Available for check-in

Overtime Alert (Orange)​

  • Indicator: Orange chip with "Overtime Alert" label
  • Warning: Student approaching weekly hour limit
  • Duration: Live timer showing extended work time
  • Action Required: Supervisor attention needed

Over Limit (Red)​

  • Indicator: Red chip with "Over Limit" label
  • Critical State: Student exceeded weekly hour allowance
  • Immediate Action: Requires supervisor intervention
  • Auto-Alerts: System notifications for critical states

Work Duration Display​

  • Live Timer: Updates every second for active students
  • Format: HH:MM:SS display with leading zeros
  • Start Time: Shows when work session began
  • Precision: Accurate to the second

Remaining Hours System​

Advanced calculation system showing:

Smart Calculation​

  • Weekly Limits: Based on approved hours per week
  • Used Hours: Includes previously logged time
  • Current Session: Adds live work duration
  • Multi-Job Support: Accounts for students with multiple positions

Backend Integration​

  • API Calls: Real-time data from backend services
  • Caching System: Optimized performance with intelligent caching
  • Error Handling: Graceful fallback for network issues

Visual Progress Indicators​

  • Linear Progress Bar: Visual representation of hour usage
  • Color Coding: Green (safe), Orange (warning), Red (critical)
  • Percentage Display: Shows completion percentage

Supervisor Control Functions​

Force Check-In/Check-Out​

Powerful administrative controls for immediate action:

Force Check-Out​

  • Emergency Stop: Immediate check-out for any student
  • Confirmation Dialog: Prevents accidental actions
  • Supervisor Remarks: Automatic logging of forced action
  • Instant Update: Real-time status change across system

Force Check-In​

  • Manual Start: Begin work session for students
  • Administrative Override: Supervisor-initiated sessions
  • Audit Trail: Complete logging of manual interventions
  • Validation: Ensures proper session management

Interactive Actions​

  • Click-to-Expand: Cards provide detailed information
  • Quick Actions: Direct access to force functions
  • Context-Sensitive: Actions based on current student status

Student Details Modal​

Student Detail Modal

Comprehensive Student Information​

Full-screen modal with detailed student work history:

Fixed Header Section​

  • Student Name: Full identification
  • Job Position: Current work assignment
  • Navigation: Close button and breadcrumb information

Summary Statistics Cards​

Four-card layout showing:

Student Information Card​
  • Full Name: Complete student identity
  • Student ID: Unique identifier
  • Visual Avatar: Professional presentation
Position Information Card​
  • Job Title: Current work position
  • Level Assignment: Skill level classification
  • Department: Work assignment details
Pending Hours Card​
  • Current Month: Unprocessed work hours
  • Format: Hours and minutes display
  • Status: Awaiting supervisor approval
Approved Hours Card​
  • Validated Time: Supervisor-approved hours
  • Monthly Total: Current month's approved work
  • Financial Status: Ready for payroll processing

Work Hours Log Table​

Comprehensive table with advanced features:

Column Structure​

  • Reference Number: Unique log identifier
  • Date: Work session date with badge display
  • Clock In/Out: Start and end times with color coding
  • Total Hours: Calculated work duration
  • Status: Current approval status with badges

Advanced Filtering​

  • Search Function: Free-text search across all fields
  • Status Filter: Filter by approval status
  • Clear Options: Reset filters with one click
  • Real-Time Results: Instant filtering as you type

Data Presentation​

  • Color-Coded Badges: Visual status indicators
  • Time Formatting: Consistent time display
  • Sortable Columns: Click headers to sort data
  • Pagination: Handle large datasets efficiently

Real-Time Notifications System​

Advanced real-time communication:

Instant Updates​

  • Clock Status Changes: Immediate notification of check-in/out
  • Status Alerts: Real-time student status changes
  • System Events: Auto-check-out and administrative actions

Enhanced Notifications​

  • Student Actions: Detailed information about student activities
  • Supervisor Alerts: Critical status notifications
  • Action Context: Specific job and time information

Notification Types​

  • Check-In Alerts: Green notifications for work start
  • Check-Out Alerts: Blue notifications for work end
  • Auto-Checkout Warnings: Orange notifications for system actions
  • Critical Alerts: Red notifications for issues requiring attention

Best Practices and Workflows​

Daily Monitoring Routine​

  1. Check Connection: Verify real-time status indicator
  2. Review Active Students: Monitor currently working students
  3. Watch for Alerts: Pay attention to overtime warnings
  4. Handle Critical States: Address over-limit situations immediately
  5. Use Details Modal: Deep-dive into specific student issues

Emergency Procedures​

  • Force Check-Out: Use for students who forgot to clock out
  • Overtime Management: Monitor and prevent excessive hours
  • System Issues: Use force functions when technical problems occur
  • Documentation: All supervisor actions are automatically logged

Efficiency Tips​

  • Filter Usage: Use job and name filters for focused monitoring
  • Real-Time Alerts: Rely on notifications for immediate action items
  • Batch Processing: Handle multiple students efficiently
  • Regular Monitoring: Check dashboard periodically throughout the day

This real-time monitoring system provides complete oversight of student work activities while maintaining system performance and reliability through advanced caching and error handling mechanisms.