Re_Figma_Code/ADMIN_FEATURES_GUIDE.md

# 🎛️ Admin Features - Frontend Implementation Guide

## ✅ What's Been Implemented

I've successfully integrated the **Admin Configuration & Holiday Management** system into your Settings page!

---

## 📊 **Features Overview**

### **1. System Configuration Manager** ⚙️
- View and edit all system configurations
- Organized by category (TAT Settings, Document Policy, AI Config, etc.)
- Different input types: text, number, sliders, toggles
- Validation rules applied
- Save/Reset to default functionality
- Real-time feedback

### **2. Holiday Calendar Manager** 📅
- View holidays by year
- Add/edit/delete holidays
- Holiday types: National, Regional, Organizational, Optional
- Recurring holiday support
- Month-wise organized view
- Visual calendar interface

### **3. Access Control** 🔒
- Admin-only tabs (System Configuration, Holiday Calendar)
- Non-admin users see only User Settings
- Graceful degradation for non-admin users

---

## 🎨 **UI Components Created**

### **New Files:**
1. `src/services/adminApi.ts` - API service layer
2. `src/components/admin/ConfigurationManager.tsx` - Configuration UI
3. `src/components/admin/HolidayManager.tsx` - Holiday management UI
4. `src/components/admin/index.ts` - Barrel export

### **Updated Files:**
1. `src/pages/Settings/Settings.tsx` - Integrated admin features

---

## 🚀 **How to Use (As Admin)**

### **Access Settings:**
```
Navigate to: Settings (sidebar menu)
```

### **Tabs Available (Admin Users):**
1. **User Settings** - Personal preferences (notifications, appearance, etc.)
2. **System Configuration** - Admin-only system settings
3. **Holiday Calendar** - Admin-only holiday management

### **Tabs Available (Non-Admin Users):**
1. User Settings only

---

## ⚙️ **System Configuration Tab**

### **Categories:**

**TAT Settings:**
- Default TAT for Express Priority (hours)
- Default TAT for Standard Priority (hours)
- First Reminder Threshold (%) - Slider
- Second Reminder Threshold (%) - Slider
- Working Day Start Hour
- Working Day End Hour

**Document Policy:**
- Maximum File Upload Size (MB)
- Allowed File Types
- Document Retention Period (Days)

**AI Configuration:**
- Enable AI Remark Generation - Toggle
- AI Remark Maximum Characters

### **How to Edit:**
1. Navigate to **System Configuration** tab
2. Select a category
3. Modify the value
4. Click **Save**
5. Click **Reset to Default** to restore original value

### **Visual Indicators:**
- 🟡 **Modified Badge** - Value has been changed
- 🟠 **Requires Restart Badge** - Server restart needed after save
- ✅ **Success Message** - Configuration saved
- ❌ **Error Message** - Validation failed or save error

---

## 📅 **Holiday Calendar Tab**

### **Features:**

**Year Selector:**
- View holidays for any year (current year ±2)
- Dropdown selection

**Add Holiday:**
1. Click **+ Add Holiday** button
2. Fill in form:
   - **Date** (required)
   - **Holiday Name** (required)
   - **Description** (optional)
   - **Holiday Type**: National/Regional/Organizational/Optional
   - **Recurring** checkbox (for annual holidays)
3. Click **Add Holiday**

**Edit Holiday:**
1. Find holiday in list
2. Click **Edit** button
3. Modify fields
4. Click **Update Holiday**

**Delete Holiday:**
1. Find holiday in list
2. Click **Delete** button
3. Confirm deletion

**View:**
- Holidays grouped by month
- Badges show holiday type
- "Recurring" badge for annual holidays
- Description shown below holiday name

---

## 🎯 **Configuration Input Types**

### **Text Input:**
```tsx
<Input type="text" value={value} onChange={...} />
```
- Used for: File types, text values

### **Number Input:**
```tsx
<Input type="number" min={1} max={100} value={value} onChange={...} />
```
- Used for: TAT hours, file sizes, retention days
- Validation: min/max enforced

### **Slider:**
```tsx
<Slider value={[50]} min={0} max={100} step={1} onChange={...} />
```
- Used for: Percentage thresholds
- Visual feedback with current value display

### **Toggle Switch:**
```tsx
<Switch checked={true} onCheckedChange={...} />
```
- Used for: Boolean settings (enable/disable features)

---

## 📊 **Backend Integration**

### **API Endpoints Used:**

**Configuration:**
- `GET /api/admin/configurations` - Fetch all configs
- `GET /api/admin/configurations?category=TAT_SETTINGS` - Filter by category
- `PUT /api/admin/configurations/:configKey` - Update value
- `POST /api/admin/configurations/:configKey/reset` - Reset to default

**Holidays:**
- `GET /api/admin/holidays?year=2025` - Get holidays for year
- `POST /api/admin/holidays` - Create holiday
- `PUT /api/admin/holidays/:holidayId` - Update holiday
- `DELETE /api/admin/holidays/:holidayId` - Delete holiday
- `POST /api/admin/holidays/bulk-import` - Import multiple holidays

---

## 🔒 **Security**

### **Frontend:**
- Admin tabs only visible if `user.isAdmin === true`
- Uses `useAuth()` context to check admin status

### **Backend:**
- All admin endpoints protected with `authenticateToken`
- Additional `requireAdmin` middleware
- Non-admin users get 403 Forbidden

---

## 🎨 **UI/UX Features**

### **Success/Error Messages:**
- Green alert for successful operations
- Red alert for errors
- Auto-dismiss after 3 seconds

### **Loading States:**
- Spinner while fetching data
- Disabled buttons during save
- "Saving..." button text

### **Validation:**
- Required field checks
- Min/max validation for numbers
- Visual feedback for invalid input

### **Responsive Design:**
- Grid layout for large screens
- Stack layout for mobile
- Scrollable content areas

---

## 📱 **Mobile Responsiveness**

### **Configuration Manager:**
- Tabs stack on small screens
- Full-width inputs
- Touch-friendly buttons

### **Holiday Manager:**
- Year selector and Add button stack vertically
- Holiday cards full-width on mobile
- Edit/Delete buttons accessible

---

## 🧪 **Testing Guide**

### **Test Configuration Management:**

1. **Login as Admin:**
   - Navigate to Settings
   - Verify 3 tabs visible

2. **Edit TAT Setting:**
   - Go to System Configuration → TAT Settings
   - Change "Default TAT for Express Priority" to 36
   - Click Save
   - Verify success message
   - Check backend: value should be updated in DB

3. **Use Slider:**
   - Go to "First Reminder Threshold"
   - Drag slider to 60%
   - Click Save
   - Verify success message

4. **Toggle AI Feature:**
   - Go to AI Configuration
   - Toggle "Enable AI Remark Generation"
   - Click Save
   - Verify success message

5. **Reset to Default:**
   - Edit any configuration
   - Click "Reset to Default"
   - Confirm
   - Verify value restored

### **Test Holiday Management:**

1. **Add Holiday:**
   - Go to Holiday Calendar tab
   - Click "+ Add Holiday"
   - Fill form:
     - Date: 2025-12-31
     - Name: New Year's Eve
     - Type: Organizational
   - Click "Add Holiday"
   - Verify appears in December section

2. **Edit Holiday:**
   - Find holiday in list
   - Click "Edit"
   - Change description
   - Click "Update Holiday"
   - Verify changes saved

3. **Delete Holiday:**
   - Find holiday
   - Click "Delete"
   - Confirm
   - Verify removed from list

4. **Change Year:**
   - Select different year from dropdown
   - Verify holidays load for that year

### **Test as Non-Admin:**
1. Login as regular user
2. Navigate to Settings
3. Verify only User Settings visible
4. Verify blue info card: "Admin features not accessible"

---

## 🎓 **Configuration Categories**

### **TAT_SETTINGS:**
- Default TAT hours
- Reminder thresholds
- Working hours
- **Impact:** Affects all new workflow requests

### **DOCUMENT_POLICY:**
- Max file size
- Allowed file types
- Retention period
- **Impact:** Affects file uploads system-wide

### **AI_CONFIGURATION:**
- Enable/disable AI
- Max characters
- **Impact:** Affects conclusion remark generation

### **NOTIFICATION_RULES:** (Future)
- Email/SMS preferences
- Notification frequency
- **Impact:** Affects all notifications

### **WORKFLOW_SHARING:** (Future)
- Spectator permissions
- Share link settings
- **Impact:** Affects collaboration features

---

## 🔄 **Data Flow**

```
Settings Page (Admin User)
  ↓
ConfigurationManager Component
  ↓
adminApi.getAllConfigurations()
  ↓
Backend: GET /api/admin/configurations
  ↓
Fetch from admin_configurations table
  ↓
Display by category with appropriate UI components
  ↓
User edits value
  ↓
adminApi.updateConfiguration(key, value)
  ↓
Backend: PUT /api/admin/configurations/:key
  ↓
Update database
  ↓
Success message + refresh
```

---

## 🎨 **Styling Reference**

### **Color Scheme:**
- **TAT Settings:** Blue (`bg-blue-100`)
- **Document Policy:** Purple (`bg-purple-100`)
- **Notification Rules:** Amber (`bg-amber-100`)
- **AI Configuration:** Pink (`bg-pink-100`)
- **Workflow Sharing:** Emerald (`bg-emerald-100`)

### **Holiday Types:**
- **NATIONAL:** Red (`bg-red-100`)
- **REGIONAL:** Blue (`bg-blue-100`)
- **ORGANIZATIONAL:** Purple (`bg-purple-100`)
- **OPTIONAL:** Gray (`bg-gray-100`)

---

## 📋 **Future Enhancements**

### **Configuration Manager:**
1. ✨ Bulk edit mode
2. ✨ Search/filter configurations
3. ✨ Configuration history (audit trail)
4. ✨ Import/export configurations
5. ✨ Configuration templates

### **Holiday Manager:**
1. ✨ Visual calendar view (month grid)
2. ✨ Drag-and-drop dates
3. ✨ Import from Google Calendar
4. ✨ Export to CSV/iCal
5. ✨ Holiday templates by country
6. ✨ Multi-select delete
7. ✨ Holiday conflict detection

---

## 🐛 **Troubleshooting**

### **Admin Tabs Not Showing?**

**Check:**
1. Is user logged in?
2. Is `user.isAdmin` true in database?
3. Check console for authentication errors

**Solution:**
```sql
-- Make user admin
UPDATE users SET is_admin = true WHERE email = 'your-email@example.com';
```

### **Configurations Not Loading?**

**Check:**
1. Backend running?
2. Admin auth token valid?
3. Check network tab for 403/401 errors

**Solution:**
- Verify JWT token is valid
- Check `requireAdmin` middleware is working

### **Holidays Not Saving?**

**Check:**
1. Date format correct? (YYYY-MM-DD)
2. Holiday name filled?
3. Check console for validation errors

---

## 📚 **Component API**

### **ConfigurationManager Props:**
```typescript
interface ConfigurationManagerProps {
  onConfigUpdate?: () => void; // Callback after config updated
}
```

### **HolidayManager Props:**
```typescript
// No props required - fully self-contained
```

---

## ✨ **Sample Screenshots** (Describe UI)

### **Admin View:**
```
┌─────────────────────────────────────────┐
│ Settings                                 │
│ Manage your account settings...          │
└─────────────────────────────────────────┘

┌───────────────────────────────────────────┐
│ [User Settings] [System Config] [Holidays]│
└───────────────────────────────────────────┘

System Configuration Tab:
┌─────────────────────────────────────────┐
│ [TAT_SETTINGS] [DOCUMENT_POLICY] [AI]   │
└─────────────────────────────────────────┘

TAT SETTINGS
┌─────────────────────────────────────────┐
│ ⏰ Default TAT for Express Priority     │
│ Default turnaround time in hours        │
│ Default: 24                             │
│ [24] ← input                            │
│ [Save] [Reset to Default]               │
└─────────────────────────────────────────┘

│ ⏰ First TAT Reminder Threshold (%)     │
│ Send first reminder at...               │
│ 50% ━━●━━━━━━━━ Range: 0-100           │
│ [Save] [Reset to Default]               │
└─────────────────────────────────────────┘
```

---

## 🎯 **Key Points**

1. ✅ **Admin Only:** System Config & Holidays tabs require admin role
2. ✅ **Real-time Validation:** Min/max enforced on save
3. ✅ **Auto-refresh:** Changes reflect immediately
4. ✅ **Holiday TAT Impact:** Holidays automatically excluded from STANDARD priority
5. ✅ **Mobile Friendly:** Responsive design for all screen sizes

---

## 🚀 **Next Steps**

### **Immediate:**
1. ✅ **Test as Admin** - Login and verify tabs visible
2. ✅ **Add Holidays** - Import Indian holidays or add manually
3. ✅ **Configure TAT** - Set organization-specific TAT defaults

### **Future:**
1. 📋 Add visual calendar view for holidays
2. 📋 Add configuration audit trail
3. 📋 Add bulk configuration import/export
4. 📋 Add user role management UI
5. 📋 Add notification template editor

---

## 📞 **Support**

**Common Issues:**
- Admin tabs not showing? → Check `user.isAdmin` in database
- Configurations not loading? → Check backend logs, verify admin token
- Holidays not affecting TAT? → Verify priority is STANDARD, restart backend

**Documentation:**
- Backend Guide: `Re_Backend/HOLIDAY_AND_ADMIN_CONFIG_COMPLETE.md`
- Setup Guide: `Re_Backend/SETUP_COMPLETE.md`
- API Docs: `Re_Backend/docs/HOLIDAY_CALENDAR_SYSTEM.md`

---

**Status:** ✅ **COMPLETE & READY TO USE!**

---

**Last Updated:** November 4, 2025  
**Version:** 1.0.0  
**Team:** Royal Enfield Workflow