651 lines
15 KiB
Markdown
651 lines
15 KiB
Markdown
# ✅ Enhanced TAT Alerts Display - Complete Guide
|
|
|
|
## 🎯 What's Been Enhanced
|
|
|
|
TAT alerts now display **detailed time tracking information** inline with each approver, making it crystal clear what's happening!
|
|
|
|
---
|
|
|
|
## 📊 Enhanced Alert Display
|
|
|
|
### **What Shows Now:**
|
|
|
|
```
|
|
┌──────────────────────────────────────────────────────┐
|
|
│ ⏳ Reminder 1 - 50% TAT Threshold [WARNING] │
|
|
│ │
|
|
│ 50% of SLA breach reminder have been sent │
|
|
│ │
|
|
│ ┌──────────────┬──────────────┐ │
|
|
│ │ Allocated: │ Elapsed: │ │
|
|
│ │ 12h │ 6.0h │ │
|
|
│ ├──────────────┼──────────────┤ │
|
|
│ │ Remaining: │ Due by: │ │
|
|
│ │ 6.0h │ Oct 7, 2024 │ │
|
|
│ └──────────────┴──────────────┘ │
|
|
│ │
|
|
│ Reminder sent by system automatically [TEST MODE] │
|
|
│ Sent at: Oct 6 at 2:30 PM │
|
|
│ Note: Test mode active (1 hour = 1 minute) │
|
|
└──────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## 🔑 Key Information Displayed
|
|
|
|
### **For Each Alert:**
|
|
|
|
| Field | Description | Example |
|
|
|-------|-------------|---------|
|
|
| **Reminder #** | Sequential number | "Reminder 1" |
|
|
| **Threshold** | Percentage reached | "50% TAT Threshold" |
|
|
| **Status Badge** | Warning or Breach | `WARNING` / `BREACHED` |
|
|
| **Allocated** | Total TAT hours | "12h" |
|
|
| **Elapsed** | Hours used when alert sent | "6.0h" |
|
|
| **Remaining** | Hours left when alert sent | "6.0h" |
|
|
| **Due by** | Expected completion date | "Oct 7, 2024" |
|
|
| **Sent at** | When reminder was sent | "Oct 6 at 2:30 PM" |
|
|
| **Test Mode** | If in test mode | Purple badge + note |
|
|
|
|
---
|
|
|
|
## 🎨 Color Coding
|
|
|
|
### **50% Alert (⏳):**
|
|
- Background: `bg-yellow-50`
|
|
- Border: `border-yellow-200`
|
|
- Badge: `bg-amber-100 text-amber-800`
|
|
- Icon: ⏳
|
|
|
|
### **75% Alert (⚠️):**
|
|
- Background: `bg-orange-50`
|
|
- Border: `border-orange-200`
|
|
- Badge: `bg-amber-100 text-amber-800`
|
|
- Icon: ⚠️
|
|
|
|
### **100% Breach (⏰):**
|
|
- Background: `bg-red-50`
|
|
- Border: `border-red-200`
|
|
- Badge: `bg-red-100 text-red-800`
|
|
- Icon: ⏰
|
|
- Text: Shows "BREACHED" instead of "WARNING"
|
|
|
|
---
|
|
|
|
## 🧪 Test Mode vs Production Mode
|
|
|
|
### **Test Mode (TAT_TEST_MODE=true):**
|
|
|
|
**Purpose**: Fast testing during development
|
|
|
|
**Behavior:**
|
|
- ✅ 1 hour = 1 minute
|
|
- ✅ 6-hour TAT = 6 minutes
|
|
- ✅ Purple "TEST MODE" badge shown
|
|
- ✅ Note: "Test mode active (1 hour = 1 minute)"
|
|
- ✅ All times are in working time (no weekend skip)
|
|
|
|
**Example Alert (Test Mode):**
|
|
```
|
|
⏳ Reminder 1 - 50% TAT Threshold [WARNING] [TEST MODE]
|
|
|
|
Allocated: 6h | Elapsed: 3.0h
|
|
Remaining: 3.0h | Due by: Today 2:06 PM
|
|
|
|
Note: Test mode active (1 hour = 1 minute)
|
|
Sent at: Today at 2:03 PM
|
|
```
|
|
|
|
**Timeline:**
|
|
- Submit at 2:00 PM
|
|
- 50% alert at 2:03 PM (3 minutes)
|
|
- 75% alert at 2:04:30 PM (4.5 minutes)
|
|
- 100% breach at 2:06 PM (6 minutes)
|
|
|
|
---
|
|
|
|
### **Production Mode (TAT_TEST_MODE=false):**
|
|
|
|
**Purpose**: Real-world usage
|
|
|
|
**Behavior:**
|
|
- ✅ 1 hour = 1 hour (real time)
|
|
- ✅ 48-hour TAT = 48 hours
|
|
- ✅ No "TEST MODE" badge
|
|
- ✅ No test mode note
|
|
- ✅ Respects working hours (Mon-Fri, 9 AM-6 PM)
|
|
- ✅ Skips weekends
|
|
|
|
**Example Alert (Production Mode):**
|
|
```
|
|
⏳ Reminder 1 - 50% TAT Threshold [WARNING]
|
|
|
|
Allocated: 48h | Elapsed: 24.0h
|
|
Remaining: 24.0h | Due by: Oct 8, 2024
|
|
|
|
Reminder sent by system automatically
|
|
Sent at: Oct 6 at 10:00 AM
|
|
```
|
|
|
|
**Timeline:**
|
|
- Submit Monday 10:00 AM
|
|
- 50% alert Tuesday 10:00 AM (24 hours)
|
|
- 75% alert Wednesday 10:00 AM (36 hours)
|
|
- 100% breach Thursday 10:00 AM (48 hours)
|
|
|
|
---
|
|
|
|
## 📡 New API Endpoints
|
|
|
|
### **1. Get TAT Alerts for Request**
|
|
```
|
|
GET /api/tat/alerts/request/:requestId
|
|
```
|
|
|
|
**Response:**
|
|
```json
|
|
{
|
|
"success": true,
|
|
"data": [
|
|
{
|
|
"alertId": "...",
|
|
"alertType": "TAT_50",
|
|
"thresholdPercentage": 50,
|
|
"tatHoursAllocated": 12,
|
|
"tatHoursElapsed": 6.0,
|
|
"tatHoursRemaining": 6.0,
|
|
"alertSentAt": "2024-10-06T14:30:00Z",
|
|
"level": {
|
|
"levelNumber": 2,
|
|
"approverName": "Lisa Wong",
|
|
"status": "PENDING"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
### **2. Get TAT Compliance Summary**
|
|
```
|
|
GET /api/tat/compliance/summary?startDate=2024-10-01&endDate=2024-10-31
|
|
```
|
|
|
|
**Response:**
|
|
```json
|
|
{
|
|
"success": true,
|
|
"data": {
|
|
"total_alerts": 150,
|
|
"alerts_50": 50,
|
|
"alerts_75": 45,
|
|
"breaches": 25,
|
|
"completed_on_time": 35,
|
|
"completed_late": 15,
|
|
"compliance_percentage": 70.00
|
|
}
|
|
}
|
|
```
|
|
|
|
### **3. Get TAT Breach Report**
|
|
```
|
|
GET /api/tat/breaches
|
|
```
|
|
|
|
### **4. Get Approver Performance**
|
|
```
|
|
GET /api/tat/performance/:approverId
|
|
```
|
|
|
|
---
|
|
|
|
## 🔍 Database Fields Available
|
|
|
|
### **In `tat_alerts` Table:**
|
|
|
|
| Field | Type | Use In UI |
|
|
|-------|------|-----------|
|
|
| `alert_type` | ENUM | Determine icon (⏳/⚠️/⏰) |
|
|
| `threshold_percentage` | INT | Show "50%", "75%", "100%" |
|
|
| `tat_hours_allocated` | DECIMAL | Display "Allocated: Xh" |
|
|
| `tat_hours_elapsed` | DECIMAL | Display "Elapsed: Xh" |
|
|
| `tat_hours_remaining` | DECIMAL | Display "Remaining: Xh" (red if < 2h) |
|
|
| `level_start_time` | TIMESTAMP | Calculate time since start |
|
|
| `alert_sent_at` | TIMESTAMP | Show "Sent at: ..." |
|
|
| `expected_completion_time` | TIMESTAMP | Show "Due by: ..." |
|
|
| `alert_message` | TEXT | Full notification message |
|
|
| `is_breached` | BOOLEAN | Show "BREACHED" badge |
|
|
| `metadata` | JSONB | Test mode indicator, priority, etc. |
|
|
| `was_completed_on_time` | BOOLEAN | Show compliance status |
|
|
| `completion_time` | TIMESTAMP | Show actual completion |
|
|
|
|
---
|
|
|
|
## 💡 Production Recommendation
|
|
|
|
### **For Development/Testing:**
|
|
```bash
|
|
# .env
|
|
TAT_TEST_MODE=true
|
|
WORK_START_HOUR=9
|
|
WORK_END_HOUR=18
|
|
```
|
|
|
|
**Benefits:**
|
|
- ✅ Fast feedback (minutes instead of hours/days)
|
|
- ✅ Easy to test multiple scenarios
|
|
- ✅ Clear test mode indicators prevent confusion
|
|
|
|
### **For Production:**
|
|
```bash
|
|
# .env
|
|
TAT_TEST_MODE=false
|
|
WORK_START_HOUR=9
|
|
WORK_END_HOUR=18
|
|
```
|
|
|
|
**Benefits:**
|
|
- ✅ Real-world timing
|
|
- ✅ Accurate TAT tracking
|
|
- ✅ Meaningful metrics
|
|
|
|
---
|
|
|
|
## 📋 Complete Alert Card Template
|
|
|
|
### **Full Display Structure:**
|
|
|
|
```tsx
|
|
<div className="bg-yellow-50 border-yellow-200 p-3 rounded-lg">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<span>⏳ Reminder 1 - 50% TAT Threshold</span>
|
|
<Badge>WARNING</Badge>
|
|
{testMode && <Badge>TEST MODE</Badge>}
|
|
</div>
|
|
|
|
{/* Main Message */}
|
|
<p>50% of SLA breach reminder have been sent</p>
|
|
|
|
{/* Time Grid */}
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div>Allocated: 12h</div>
|
|
<div>Elapsed: 6.0h</div>
|
|
<div>Remaining: 6.0h</div>
|
|
<div>Due by: Oct 7</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="border-t pt-2">
|
|
<p>Reminder sent by system automatically</p>
|
|
<p>Sent at: Oct 6 at 2:30 PM</p>
|
|
{testMode && <p>Note: Test mode (1h = 1min)</p>}
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 Key Benefits of Enhanced Display
|
|
|
|
### **1. Full Transparency**
|
|
Users see exactly:
|
|
- How much time was allocated
|
|
- How much was used when alert fired
|
|
- How much was remaining
|
|
- When it's due
|
|
|
|
### **2. Context Awareness**
|
|
- Test mode clearly indicated
|
|
- Color-coded by severity
|
|
- Badge shows warning vs breach
|
|
|
|
### **3. Actionable Information**
|
|
- "Remaining: 2.5h" → Approver knows they have 2.5h left
|
|
- "Due by: Oct 7 at 6 PM" → Clear deadline
|
|
- "Elapsed: 6h" → Understand how long it's been
|
|
|
|
### **4. Confusion Prevention**
|
|
- Test mode badge prevents misunderstanding
|
|
- Note explains "1 hour = 1 minute" in test mode
|
|
- Clear visual distinction from production
|
|
|
|
---
|
|
|
|
## 🧪 Testing Workflow
|
|
|
|
### **Step 1: Enable Detailed Logging**
|
|
|
|
In `Re_Backend/.env`:
|
|
```bash
|
|
TAT_TEST_MODE=true
|
|
LOG_LEVEL=debug
|
|
```
|
|
|
|
### **Step 2: Create Test Request**
|
|
|
|
- TAT: 6 hours
|
|
- Priority: Standard or Express
|
|
- Submit request
|
|
|
|
### **Step 3: Watch Alerts Populate**
|
|
|
|
**At 3 minutes (50%):**
|
|
```
|
|
⏳ Reminder 1 - 50% TAT Threshold [WARNING] [TEST MODE]
|
|
|
|
Allocated: 6h | Elapsed: 3.0h
|
|
Remaining: 3.0h | Due by: Today 2:06 PM
|
|
|
|
Note: Test mode active (1 hour = 1 minute)
|
|
```
|
|
|
|
**At 4.5 minutes (75%):**
|
|
```
|
|
⚠️ Reminder 2 - 75% TAT Threshold [WARNING] [TEST MODE]
|
|
|
|
Allocated: 6h | Elapsed: 4.5h
|
|
Remaining: 1.5h | Due by: Today 2:06 PM
|
|
|
|
Note: Test mode active (1 hour = 1 minute)
|
|
```
|
|
|
|
**At 6 minutes (100%):**
|
|
```
|
|
⏰ Reminder 3 - 100% TAT Threshold [BREACHED] [TEST MODE]
|
|
|
|
Allocated: 6h | Elapsed: 6.0h
|
|
Remaining: 0.0h | Due by: Today 2:06 PM (OVERDUE)
|
|
|
|
Note: Test mode active (1 hour = 1 minute)
|
|
```
|
|
|
|
---
|
|
|
|
## 📊 KPI Queries Using Alert Data
|
|
|
|
### **Average Response Time After Each Alert Type:**
|
|
|
|
```sql
|
|
SELECT
|
|
alert_type,
|
|
ROUND(AVG(tat_hours_elapsed), 2) as avg_elapsed,
|
|
ROUND(AVG(tat_hours_remaining), 2) as avg_remaining,
|
|
COUNT(*) as alert_count,
|
|
COUNT(CASE WHEN was_completed_on_time = true THEN 1 END) as completed_on_time
|
|
FROM tat_alerts
|
|
GROUP BY alert_type
|
|
ORDER BY threshold_percentage;
|
|
```
|
|
|
|
### **Approvers Who Frequently Breach:**
|
|
|
|
```sql
|
|
SELECT
|
|
u.display_name,
|
|
u.department,
|
|
COUNT(CASE WHEN ta.is_breached = true THEN 1 END) as breach_count,
|
|
AVG(ta.tat_hours_elapsed) as avg_time_taken,
|
|
COUNT(DISTINCT ta.level_id) as total_approvals
|
|
FROM tat_alerts ta
|
|
JOIN users u ON ta.approver_id = u.user_id
|
|
WHERE ta.is_breached = true
|
|
GROUP BY u.user_id, u.display_name, u.department
|
|
ORDER BY breach_count DESC
|
|
LIMIT 10;
|
|
```
|
|
|
|
### **Time-to-Action After Alert:**
|
|
|
|
```sql
|
|
SELECT
|
|
alert_type,
|
|
threshold_percentage,
|
|
ROUND(AVG(
|
|
EXTRACT(EPOCH FROM (completion_time - alert_sent_at)) / 3600
|
|
), 2) as avg_hours_to_respond_after_alert
|
|
FROM tat_alerts
|
|
WHERE completion_time IS NOT NULL
|
|
GROUP BY alert_type, threshold_percentage
|
|
ORDER BY threshold_percentage;
|
|
```
|
|
|
|
---
|
|
|
|
## 🔄 Alert Lifecycle
|
|
|
|
### **1. Alert Created (When Threshold Reached)**
|
|
```typescript
|
|
{
|
|
alertType: 'TAT_50',
|
|
thresholdPercentage: 50,
|
|
tatHoursAllocated: 12,
|
|
tatHoursElapsed: 6.0,
|
|
tatHoursRemaining: 6.0,
|
|
alertSentAt: '2024-10-06T14:30:00Z',
|
|
expectedCompletionTime: '2024-10-06T18:00:00Z',
|
|
isBreached: false,
|
|
wasCompletedOnTime: null, // Not completed yet
|
|
metadata: { testMode: true, ... }
|
|
}
|
|
```
|
|
|
|
### **2. Approver Takes Action**
|
|
```typescript
|
|
// Updated when level is approved/rejected
|
|
{
|
|
...existingFields,
|
|
wasCompletedOnTime: true, // or false
|
|
completionTime: '2024-10-06T16:00:00Z'
|
|
}
|
|
```
|
|
|
|
### **3. Displayed in UI**
|
|
```tsx
|
|
// Shows all historical alerts for that level
|
|
// Color-coded by threshold
|
|
// Shows completion status if completed
|
|
```
|
|
|
|
---
|
|
|
|
## 🎓 Understanding the Data
|
|
|
|
### **Allocated Hours (tat_hours_allocated)**
|
|
Total TAT time given to approver for this level
|
|
```
|
|
Example: 12 hours
|
|
Meaning: Approver has 12 hours to approve/reject
|
|
```
|
|
|
|
### **Elapsed Hours (tat_hours_elapsed)**
|
|
Time used when the alert was sent
|
|
```
|
|
Example: 6.0 hours (at 50% alert)
|
|
Meaning: 6 hours have passed since level started
|
|
```
|
|
|
|
### **Remaining Hours (tat_hours_remaining)**
|
|
Time left when the alert was sent
|
|
```
|
|
Example: 6.0 hours (at 50% alert)
|
|
Meaning: 6 hours remaining before TAT breach
|
|
Note: Turns red if < 2 hours
|
|
```
|
|
|
|
### **Expected Completion Time**
|
|
When the level should be completed
|
|
```
|
|
Example: Oct 6 at 6:00 PM
|
|
Meaning: Deadline for this approval level
|
|
```
|
|
|
|
---
|
|
|
|
## ⚙️ Configuration Options
|
|
|
|
### **Disable Test Mode for Production:**
|
|
|
|
Edit `.env`:
|
|
```bash
|
|
# Production settings
|
|
TAT_TEST_MODE=false
|
|
WORK_START_HOUR=9
|
|
WORK_END_HOUR=18
|
|
```
|
|
|
|
### **Adjust Working Hours:**
|
|
|
|
```bash
|
|
# Custom working hours (e.g., 8 AM - 5 PM)
|
|
WORK_START_HOUR=8
|
|
WORK_END_HOUR=17
|
|
```
|
|
|
|
### **Redis Configuration:**
|
|
|
|
```bash
|
|
# Upstash (recommended)
|
|
REDIS_URL=rediss://default:PASSWORD@host.upstash.io:6379
|
|
|
|
# Local Redis
|
|
REDIS_URL=redis://localhost:6379
|
|
|
|
# Production Redis with auth
|
|
REDIS_URL=redis://username:password@prod-redis.com:6379
|
|
```
|
|
|
|
---
|
|
|
|
## 📱 Mobile Responsive
|
|
|
|
The alert cards are responsive:
|
|
- ✅ 2-column grid on desktop
|
|
- ✅ Single column on mobile
|
|
- ✅ All information remains visible
|
|
- ✅ Touch-friendly spacing
|
|
|
|
---
|
|
|
|
## 🚀 API Endpoints Available
|
|
|
|
### **Get Alerts for Request:**
|
|
```bash
|
|
GET /api/tat/alerts/request/:requestId
|
|
```
|
|
|
|
### **Get Alerts for Level:**
|
|
```bash
|
|
GET /api/tat/alerts/level/:levelId
|
|
```
|
|
|
|
### **Get Compliance Summary:**
|
|
```bash
|
|
GET /api/tat/compliance/summary
|
|
GET /api/tat/compliance/summary?startDate=2024-10-01&endDate=2024-10-31
|
|
```
|
|
|
|
### **Get Breach Report:**
|
|
```bash
|
|
GET /api/tat/breaches
|
|
```
|
|
|
|
### **Get Approver Performance:**
|
|
```bash
|
|
GET /api/tat/performance/:approverId
|
|
```
|
|
|
|
---
|
|
|
|
## ✅ Benefits Summary
|
|
|
|
### **For Users:**
|
|
1. **Clear Visibility** - See exact time tracking
|
|
2. **No Confusion** - Test mode clearly labeled
|
|
3. **Actionable Data** - Know exactly how much time left
|
|
4. **Historical Record** - All alerts preserved
|
|
|
|
### **For Management:**
|
|
1. **KPI Ready** - All data for reporting
|
|
2. **Compliance Tracking** - On-time vs late completion
|
|
3. **Performance Analysis** - Response time after alerts
|
|
4. **Trend Analysis** - Breach patterns
|
|
|
|
### **For System:**
|
|
1. **Audit Trail** - Every alert logged
|
|
2. **Scalable** - Queue-based architecture
|
|
3. **Reliable** - Automatic retries
|
|
4. **Maintainable** - Clear configuration
|
|
|
|
---
|
|
|
|
## 🎯 Quick Switch Between Modes
|
|
|
|
### **Development (Fast Testing):**
|
|
```bash
|
|
# .env
|
|
TAT_TEST_MODE=true
|
|
```
|
|
Restart backend → Alerts fire in minutes
|
|
|
|
### **Staging (Semi-Real):**
|
|
```bash
|
|
# .env
|
|
TAT_TEST_MODE=false
|
|
# But use shorter TATs (2-4 hours instead of 48 hours)
|
|
```
|
|
Restart backend → Alerts fire in hours
|
|
|
|
### **Production (Real):**
|
|
```bash
|
|
# .env
|
|
TAT_TEST_MODE=false
|
|
# Use actual TATs (24-48 hours)
|
|
```
|
|
Restart backend → Alerts fire in days
|
|
|
|
---
|
|
|
|
## 📊 What You See in Workflow Tab
|
|
|
|
For each approval level, you'll see:
|
|
|
|
```
|
|
┌────────────────────────────────────────────┐
|
|
│ Step 2: Lisa Wong (Finance Manager) │
|
|
│ Status: pending │
|
|
│ TAT: 12 hours │
|
|
│ Elapsed: 8h │
|
|
│ │
|
|
│ [50% Alert Card with full details] │
|
|
│ [75% Alert Card with full details] │
|
|
│ │
|
|
│ Comment: (if any) │
|
|
└────────────────────────────────────────────┘
|
|
```
|
|
|
|
**Clear, informative, and actionable!**
|
|
|
|
---
|
|
|
|
## 🎉 Status: READY!
|
|
|
|
✅ **Enhanced display** with all timing details
|
|
✅ **Test mode indicator** to prevent confusion
|
|
✅ **Color-coded** by severity
|
|
✅ **Responsive** design
|
|
✅ **API endpoints** for custom queries
|
|
✅ **KPI-ready** data structure
|
|
|
|
---
|
|
|
|
**Just setup Upstash Redis and start testing!**
|
|
|
|
See: `START_HERE.md` for 2-minute Redis setup
|
|
|
|
---
|
|
|
|
**Last Updated**: November 4, 2025
|
|
**Team**: Royal Enfield Workflow
|
|
|