Re_Figma_Code/SLA_TRACKING_GUIDE.md

SLA Tracking with Working Hours - Implementation Guide

Overview

The SLA tracking system automatically pauses during non-working hours and resumes during working hours, ensuring accurate TAT (Turnaround Time) calculations.

🎯 Features

✅ Automatic Pause/Resume - Stops counting during:

• Weekends (Saturday & Sunday)
• Non-working hours (before 9 AM, after 6 PM)
• Holidays (from database)

✅ Real-Time Updates - Progress updates every minute ✅ Visual Indicators - Shows when paused vs active ✅ Working Hours Display - Shows elapsed and remaining in working hours (e.g., "2d 3h") ✅ Next Resume Time - Shows when tracking will resume during paused state

📁 Components Created

1. Utility: slaTracker.ts

Core calculation functions:

• isWorkingTime() - Check if current time is working hours
• calculateElapsedWorkingHours() - Count only working hours
• calculateRemainingWorkingHours() - Working hours until deadline
• getSLAStatus() - Complete SLA status with pause/resume info
• formatWorkingHours() - Format hours as "2d 3h"

2. Hook: useSLATracking.ts

React hook for real-time tracking:

const slaStatus = useSLATracking(startDate, deadline);
// Returns: { progress, elapsedHours, remainingHours, isPaused, statusText, ... }

3. Component: SLATracker.tsx

Visual component with pause/resume indicators:

<SLATracker 
  startDate={request.createdAt} 
  deadline={request.dueDate}
  showDetails={true}
/>

🚀 Usage Examples

In MyRequests Page (Already Integrated)

{request.createdAt && request.dueDate && 
 request.status !== 'approved' && request.status !== 'rejected' && (
  <SLATracker 
    startDate={request.createdAt} 
    deadline={request.dueDate}
    showDetails={true}
  />
)}

In RequestDetail Page

Replace the existing SLA progress bar with:

import { SLATracker } from '@/components/sla/SLATracker';

// In the SLA Progress section:
<SLATracker 
  startDate={request.createdAt} 
  deadline={request.slaEndDate}
  showDetails={true}
  className="mt-2"
/>

In OpenRequests Page

{request.createdAt && request.dueDate && (
  <SLATracker 
    startDate={request.createdAt} 
    deadline={request.dueDate}
    showDetails={false}  // Compact view
  />
)}

🎨 Visual States

Active (During Working Hours)

SLA Progress    [▶️ Active]    [On track]
████████░░░░░░░░ 45.2%
Elapsed: 1d 4h  Remaining: 1d 4h

Paused (Outside Working Hours)

SLA Progress    [⏸️ Paused]    [On track]
████████⏸️░░░░░░ 45.2%
Elapsed: 1d 4h  Remaining: 1d 4h
⚠️ Resumes in 14h 30m

Critical (>75%)

SLA Progress    [▶️ Active]    [SLA critical]
█████████████████████░ 87.5%
Elapsed: 6d 6h  Remaining: 1d 2h

Breached (100%)

SLA Progress    [⏸️ Paused]    [SLA breached]
███████████████████████ 100.0%
Elapsed: 8d 0h  Remaining: 0h
⚠️ Resumes in 2h 15m

⚙️ Configuration

Working hours are defined in slaTracker.ts:

const WORK_START_HOUR = 9;  // 9 AM
const WORK_END_HOUR = 18;   // 6 PM
const WORK_START_DAY = 1;   // Monday
const WORK_END_DAY = 5;     // Friday

To change these, update the constants in the utility file.

🔄 How It Works

Backend (Already Implemented)

1. ✅ Calculates deadlines using addWorkingHours() (skips weekends, holidays, non-work hours)
2. ✅ Stores calculated deadline in database
3. ✅ TAT scheduler triggers notifications at 50%, 75%, 100% (accounting for working hours)

Frontend (New Implementation)

1. Receives pre-calculated deadline from backend
2. Calculates real-time elapsed working hours from start to now
3. Displays accurate progress that only counts working time
4. Shows pause indicator when outside working hours
5. Updates every minute automatically

Example Flow:

Friday 4:00 PM (within working hours)

• SLA Progress: [▶️ Active] 25%
• Shows real-time progress

Friday 6:01 PM (after hours)

• SLA Progress: [⏸️ Paused] 25%
• Shows "Resumes in 15h" (Monday 9 AM)

Monday 9:00 AM (work resumes)

• SLA Progress: [▶️ Active] 25%
• Continues from where it left off

Monday 10:00 AM (1 working hour later)

• SLA Progress: [▶️ Active] 30%
• Progress updates only during working hours

🎯 Benefits

1. Accurate SLA Tracking - Only counts actual working time
2. User Transparency - Users see when SLA is paused
3. Realistic Deadlines - No false urgency during weekends
4. Aligned with Backend - Frontend display matches backend calculations
5. Real-Time Updates - Live progress without page refresh

🧪 Testing

Test different scenarios:

1. During working hours → Should show "Active" badge
2. After 6 PM → Should show "Paused" and resume time
3. Weekends → Should show "Paused" and Monday 9 AM resume
4. Progress calculation → Should only count working hours

📝 Notes

• The frontend assumes the backend has already calculated the correct deadline
• Progress bars update every 60 seconds
• Paused state is visual only - actual TAT calculations are on backend
• For holidays, consider integrating with backend holiday API in future enhancement