# User Notification Preferences

## Overview
Individual users can now control their notification preferences across three channels: **Email**, **Push**, and **In-App** notifications.

---

## Features Implemented

### ✅ Backend

1. **Database Schema**
   - Added three boolean fields to `users` table:
     - `email_notifications_enabled` (default: true)
     - `push_notifications_enabled` (default: true)
     - `in_app_notifications_enabled` (default: true)
   - Migration file: `20251203-add-user-notification-preferences.ts`

2. **User Model Updates**
   - `Re_Backend/src/models/User.ts`
   - Added fields: `emailNotificationsEnabled`, `pushNotificationsEnabled`, `inAppNotificationsEnabled`

3. **API Endpoints**
   - **GET** `/api/v1/user/preferences/notifications` - Get current user's preferences
   - **PUT** `/api/v1/user/preferences/notifications` - Update preferences
   - Controller: `Re_Backend/src/controllers/userPreference.controller.ts`
   - Routes: `Re_Backend/src/routes/userPreference.routes.ts`
   - Validator: `Re_Backend/src/validators/userPreference.validator.ts`

4. **Notification Service Enhancement**
   - `Re_Backend/src/services/notification.service.ts`
   - Now checks user preferences before sending notifications
   - Respects individual channel settings (email, push, in-app)

### ✅ Frontend

1. **API Service**
   - `Re_Figma_Code/src/services/userPreferenceApi.ts`
   - Functions: `getNotificationPreferences()`, `updateNotificationPreferences()`

2. **UI Component**
   - `Re_Figma_Code/src/components/settings/NotificationPreferences.tsx`
   - Beautiful card-based UI with toggle switches
   - Real-time updates with loading states
   - Success/error feedback

3. **Settings Page Integration**
   - `Re_Figma_Code/src/pages/Settings/Settings.tsx`
   - Full-width notification preferences card
   - Separate browser push registration button
   - Available for both admin and regular users

---

## How It Works

### User Experience

1. **Navigate to Settings**
   - User clicks on Settings in the navigation

2. **View Notification Preferences**
   - Top card shows three toggle switches:
     - 📧 **Email Notifications** - Receive notifications via email
     - 🔔 **Push Notifications** - Receive browser push notifications
     - 💬 **In-App Notifications** - Show notifications within the application

3. **Toggle Preferences**
   - Click any switch to enable/disable that channel
   - Changes are saved immediately
   - Success message confirms the update

4. **Register Browser for Push** (separate card)
   - One-time setup per browser/device
   - Requests browser permission
   - Registers the browser endpoint for push notifications

### System Behavior

**When sending notifications:**

```typescript
// System checks user preferences
if (user.inAppNotificationsEnabled) {
  // Create in-app notification in database
  // Emit socket event for real-time delivery
}

if (user.pushNotificationsEnabled) {
  // Send browser push notification (if browser is registered)
}

if (user.emailNotificationsEnabled) {
  // Send email notification (when implemented)
}
```

**Benefits:**
- ✅ Users have full control over notification channels
- ✅ Reduces notification fatigue
- ✅ Improves user experience
- ✅ Respects user preferences while ensuring critical alerts are delivered

---

## API Documentation

### Get Notification Preferences

**Request:**
```http
GET /api/v1/user/preferences/notifications
Authorization: Bearer <token>
```

**Response:**
```json
{
  "success": true,
  "data": {
    "emailNotificationsEnabled": true,
    "pushNotificationsEnabled": true,
    "inAppNotificationsEnabled": true
  }
}
```

### Update Notification Preferences

**Request:**
```http
PUT /api/v1/user/preferences/notifications
Authorization: Bearer <token>
Content-Type: application/json

{
  "emailNotificationsEnabled": false,
  "pushNotificationsEnabled": true,
  "inAppNotificationsEnabled": true
}
```

**Response:**
```json
{
  "success": true,
  "message": "Notification preferences updated successfully",
  "data": {
    "emailNotificationsEnabled": false,
    "pushNotificationsEnabled": true,
    "inAppNotificationsEnabled": true
  }
}
```

---

## Database Migration

To apply the migration:

```bash
cd Re_Backend
npm run migrate
```

This will add the three notification preference columns to the `users` table with default value `true` for all existing users.

---

## Admin Configuration vs User Preferences

### Two Levels of Control:

1. **System-Wide (Admin Only)**
   - Settings → Configuration → Notification Rules
   - `ENABLE_EMAIL_NOTIFICATIONS` - Master switch for email
   - `ENABLE_PUSH_NOTIFICATIONS` - Master switch for push
   - If admin disables a channel, it's disabled for ALL users

2. **User-Level (Individual Users)**
   - Settings → User Settings → Notification Preferences
   - Users can disable channels for themselves
   - User preferences are respected only if admin has enabled the channel

### Logic:
```
Notification Sent = Admin Enabled AND User Enabled
```

---

## Future Enhancements

- [ ] Email notification implementation (currently just a preference toggle)
- [ ] SMS notifications support
- [ ] Granular notification types (e.g., only approval requests, only TAT alerts)
- [ ] Quiet hours / Do Not Disturb schedules
- [ ] Notification digest/batching preferences

---

## Testing Checklist

- [x] User can view their notification preferences
- [x] User can toggle email notifications on/off
- [x] User can toggle push notifications on/off
- [x] User can toggle in-app notifications on/off
- [x] Notification service respects user preferences
- [x] In-app notifications are not created if disabled
- [x] Push notifications are not sent if disabled
- [x] UI shows loading states during updates
- [x] UI shows success/error messages
- [x] Migration adds columns with correct defaults
- [x] API endpoints require authentication
- [x] Changes persist after logout/login

---

## Files Modified/Created

### Backend
- ✅ `src/models/User.ts` - Added notification preference fields
- ✅ `src/migrations/20251203-add-user-notification-preferences.ts` - Migration
- ✅ `src/controllers/userPreference.controller.ts` - New controller
- ✅ `src/routes/userPreference.routes.ts` - New routes
- ✅ `src/validators/userPreference.validator.ts` - New validator
- ✅ `src/routes/index.ts` - Registered new routes
- ✅ `src/services/notification.service.ts` - Updated to respect preferences

### Frontend
- ✅ `src/services/userPreferenceApi.ts` - New API service
- ✅ `src/components/settings/NotificationPreferences.tsx` - New component
- ✅ `src/pages/Settings/Settings.tsx` - Integrated new component

---

**Implementation Complete! 🎉**