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:
```typescript
const slaStatus = useSLATracking(startDate, deadline);
// Returns: { progress, elapsedHours, remainingHours, isPaused, statusText, ... }
```

### 3. **Component: `SLATracker.tsx`**
Visual component with pause/resume indicators:
```tsx
<SLATracker 
  startDate={request.createdAt} 
  deadline={request.dueDate}
  showDetails={true}
/>
```

## 🚀 Usage Examples

### In MyRequests Page (Already Integrated)
```tsx
{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:
```tsx
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
```tsx
{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`:
```typescript
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