Re_Figma_Code/SYSTEM_CONFIGURATION.md

# System Configuration - Frontend Integration Guide

## 📋 Overview

The Royal Enfield Workflow Management System now uses **centralized, backend-driven configuration**. All system settings are fetched from the backend API and cached on the frontend.

## 🚫 **NO MORE HARDCODED VALUES!**

### ❌ Before (Hardcoded):
```typescript
const MAX_MESSAGE_LENGTH = 2000;
const WORK_START_HOUR = 9;
const MAX_APPROVAL_LEVELS = 10;
```

### ✅ After (Backend-Driven):
```typescript
import { configService, getWorkNotesConfig } from '@/services/configService';

const config = await getWorkNotesConfig();
const maxLength = config.maxMessageLength;  // From backend
```

---

## 🎯 How to Use Configuration

### **Method 1: Full Configuration Object**

```typescript
import { configService } from '@/services/configService';

// In component
useEffect(() => {
  const loadConfig = async () => {
    const config = await configService.getConfig();
    console.log('Max file size:', config.upload.maxFileSizeMB);
    console.log('Working hours:', config.workingHours);
  };
  loadConfig();
}, []);
```

### **Method 2: Helper Functions**

```typescript
import { 
  getWorkingHours, 
  getTATThresholds,
  getUploadLimits,
  getWorkNotesConfig,
  getFeatureFlags 
} from '@/services/configService';

// Get specific configuration
const workingHours = await getWorkingHours();
const tatThresholds = await getTATThresholds();
const uploadLimits = await getUploadLimits();
```

### **Method 3: React Hook (Recommended)**

Create a custom hook:
```typescript
// src/hooks/useSystemConfig.ts
import { useState, useEffect } from 'react';
import { configService, SystemConfig } from '@/services/configService';

export function useSystemConfig() {
  const [config, setConfig] = useState<SystemConfig | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadConfig = async () => {
      const cfg = await configService.getConfig();
      setConfig(cfg);
      setLoading(false);
    };
    loadConfig();
  }, []);

  return { config, loading };
}

// Usage in component:
function MyComponent() {
  const { config, loading } = useSystemConfig();
  
  if (loading) return <div>Loading...</div>;
  
  return (
    <div>
      Max file size: {config.upload.maxFileSizeMB} MB
    </div>
  );
}
```

---

## 🔄 Configuration Flow

```
┌─────────────────┐
│  Backend (.env) │
│  Environment    │
│  Variables      │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│ system.config.ts│
│ (Centralized)   │
└────────┬────────┘
         │
         ├─────► tat.config.ts (TAT settings)
         ├─────► tatTimeUtils.ts (Uses working hours)
         └─────► config.routes.ts (API endpoint)
                        │
                        ▼
                 GET /api/v1/config
                        │
                        ▼
         ┌──────────────────────────┐
         │  Frontend configService  │
         │  (Cached in memory)      │
         └─────────┬────────────────┘
                   │
                   ├─────► Components (via hook)
                   ├─────► Utils (slaTracker)
                   └─────► Services
```

---

## 📊 Configuration Values

### **Working Hours**
```typescript
const workingHours = await getWorkingHours();
// {
//   START_HOUR: 9,
//   END_HOUR: 18,
//   START_DAY: 1,  // Monday
//   END_DAY: 5,    // Friday
//   TIMEZONE: 'Asia/Kolkata'
// }
```

### **TAT Thresholds**
```typescript
const thresholds = await getTATThresholds();
// {
//   warning: 50,   // 50% - First reminder
//   critical: 75,  // 75% - Urgent reminder
//   breach: 100    // 100% - Breach alert
// }
```

### **Upload Limits**
```typescript
const limits = await getUploadLimits();
// {
//   maxFileSizeMB: 10,
//   allowedFileTypes: ['pdf', 'doc', ...],
//   maxFilesPerRequest: 10
// }
```

### **Feature Flags**
```typescript
const features = await getFeatureFlags();
// {
//   ENABLE_AI_CONCLUSION: true,
//   ENABLE_TEMPLATES: false,
//   ENABLE_ANALYTICS: true,
//   ENABLE_EXPORT: true
// }
```

---

## 🎨 Example Integrations

### **File Upload Component**
```typescript
import { getUploadLimits } from '@/services/configService';

function FileUpload() {
  const [maxSize, setMaxSize] = useState(10);
  
  useEffect(() => {
    const loadLimits = async () => {
      const limits = await getUploadLimits();
      setMaxSize(limits.maxFileSizeMB);
    };
    loadLimits();
  }, []);
  
  return (
    <input 
      type="file" 
      accept=".pdf,.doc,.docx"
      max-size={maxSize * 1024 * 1024}
    />
  );
}
```

### **Work Notes Message Input**
```typescript
import { getWorkNotesConfig } from '@/services/configService';

function MessageInput() {
  const [maxLength, setMaxLength] = useState(2000);
  
  useEffect(() => {
    const loadConfig = async () => {
      const config = await getWorkNotesConfig();
      setMaxLength(config.maxMessageLength);
    };
    loadConfig();
  }, []);
  
  return (
    <textarea maxLength={maxLength} />
    <span>{message.length}/{maxLength}</span>
  );
}
```

### **SLA Tracker** (Already Implemented)
```typescript
// src/utils/slaTracker.ts
import { configService } from '@/services/configService';

// Loads working hours from backend automatically
const config = await configService.getConfig();
WORK_START_HOUR = config.workingHours.START_HOUR;
```

---

## 🔄 Auto-Refresh Configuration

Configuration is **cached** after first fetch. To refresh:

```typescript
import { configService } from '@/services/configService';

// Force refresh from backend
await configService.refreshConfig();
```

---

## ✅ Benefits

1. **No Hardcoded Values** - Everything from backend
2. **Environment-Specific** - Different configs for dev/prod
3. **Easy Updates** - Change .env without code deployment
4. **Type-Safe** - TypeScript interfaces prevent errors
5. **Cached** - Fast access after first load
6. **Fallback Defaults** - Works even if backend unavailable

---

## 🧹 Cleanup Completed

### **Removed from Frontend:**
- ❌ `REQUEST_DATABASE` (hardcoded request data)
- ❌ `MOCK_PARTICIPANTS` (dummy participant list)
- ❌ `INITIAL_MESSAGES` (sample messages)
- ❌ Hardcoded working hours in SLA tracker
- ❌ Hardcoded message length limits
- ❌ Hardcoded file size limits

### **Centralized in Backend:**
- ✅ `system.config.ts` - Single source of truth
- ✅ Environment variables for all settings
- ✅ Public API endpoint (`/api/v1/config`)
- ✅ Non-sensitive values only exposed to frontend

---

## 📝 Next Steps

1. **Create `.env` file** in backend (copy from CONFIGURATION.md)
2. **Set your values** for database, JWT secret, etc.
3. **Start backend** - Config will be logged on startup
4. **Frontend auto-loads** configuration on first API call
5. **Use config** in your components via `configService`

---

## 🎯 Result

Your system now has **enterprise-grade configuration management**:

✅ Centralized configuration  
✅ Environment-driven values  
✅ Frontend-backend sync  
✅ No hardcoded data  
✅ Type-safe access  
✅ Easy maintenance  

All dummy data removed, all configuration backend-driven! 🚀