# Profile

## Purpose
Profile allows administrators to manage their personal account settings, including personal information, password changes, security settings, and notification preferences. This is the user's personal settings page.

## Components
- Profile header with avatar and user info
- Personal Information form
- Profile Photo upload section
- Change Password form
- Security Settings (toggle options)
- Notification Preferences (toggle options)
- Danger Zone (delete account)

## Header
- **User Name**: "John Admin"
- **Email**: "admin@paygate.com"
- **Role**: "Administrator"
- **Button**: "Edit Profile"

## Filters
None

## Search
None

## Buttons
| Button | Action | Location |
|--------|--------|----------|
| Edit Profile | Enable profile editing | Profile header |
| Save Changes | Save personal information | Personal info form |
| Cancel | Cancel editing | Personal info form |
| Update Password | Save new password | Password form |
| Delete Account | Delete user account | Danger Zone |

## Forms

### Personal Information Form
| Field | ID | Type | Required | Value |
|-------|-----|------|----------|-------|
| First Name | `firstName` | text | Yes | "John" |
| Last Name | `lastName` | text | Yes | "Admin" |
| Email Address | `email` | email | Yes | "admin@paygate.com" |
| Phone Number | `phone` | tel | No | "+1 234 567 890" |
| Role | `role` | text | No (disabled) | "Administrator" |
| Timezone | `timezone` | select | No | UTC, EST, PST |

**Helper Text**: "Contact super admin to change role"
**Buttons**: Save Changes, Cancel

### Profile Photo Section
- Upload area: "Click to upload" / "or drag and drop"
- Accepted formats: PNG, JPG or GIF
- Max size: 2MB

### Change Password Form
| Field | ID | Type | Required |
|-------|-----|------|----------|
| Current Password | `currentPassword` | password | Yes |
| New Password | `newPassword` | password | Yes |
| Confirm New Password | `confirmPassword` | password | Yes |

**Button**: Update Password

### Security Settings (Toggle Options)
| Setting | Description | Default |
|---------|-------------|---------|
| Two-Factor Authentication | Add an extra layer of security to your account | Active |
| Login Notifications | Get notified when someone logs into your account | Active |
| Session Timeout | Automatically log out after 30 minutes of inactivity | Inactive |

### Notification Preferences (Toggle Options)
| Setting | Description | Default |
|---------|-------------|---------|
| Email Notifications | Receive email updates about your account activity | Active |
| Transaction Alerts | Get alerts for all transactions | Active |
| Weekly Reports | Receive weekly summary reports via email | Inactive |

### Danger Zone
- **Title**: "Delete Account"
- **Description**: "Permanently delete your account and all associated data"
- **Button**: "Delete Account" (red/danger style)

## Tables
None

## Action Buttons
| Button | Function |
|--------|----------|
| Save Changes | Save personal information |
| Cancel | Cancel editing |
| Update Password | Save new password |
| Delete Account | Delete user account (with confirmation) |

## Workflow
1. Admin navigates to Profile page
2. Views current profile information
3. Clicks "Edit Profile" to enable editing
4. Updates personal information fields
5. Clicks "Save Changes" to persist
6. Can upload/change profile photo
7. Can change password in separate form
8. Can toggle security settings (2FA, notifications, timeout)
9. Can configure notification preferences
10. Can delete account in danger zone (with confirmation)

## Translation Requirements
| Key | English | Description |
|-----|---------|-------------|
| `profile_settings` | Profile Settings | Page title |
| `manage_account_settings` | Manage your account settings and preferences | Subtitle |
| `back_to_dashboard` | Back to Dashboard | Button text |
| `administrator` | Administrator | Role label |
| `edit_profile` | Edit Profile | Button text |
| `personal_information` | Personal Information | Section title |
| `first_name` | First Name | Field label |
| `last_name` | Last Name | Field label |
| `email_address` | Email Address | Field label |
| `phone_number` | Phone Number | Field label |
| `role` | Role | Field label |
| `contact_admin_to_change_role` | Contact super admin to change role | Helper text |
| `timezone` | Timezone | Field label |
| `save_changes` | Save Changes | Button text |
| `cancel` | Cancel | Button text |
| `profile_photo` | Profile Photo | Section title |
| `click_to_upload` | Click to upload | Upload text |
| `or_drag_drop` | or drag and drop | Upload text |
| `change_password` | Change Password | Section title |
| `current_password` | Current Password | Field label |
| `new_password` | New Password | Field label |
| `confirm_new_password` | Confirm New Password | Field label |
| `update_password` | Update Password | Button text |
| `security_settings` | Security Settings | Section title |
| `two_factor_authentication` | Two-Factor Authentication | Setting label |
| `add_extra_security` | Add an extra layer of security to your account | Setting description |
| `login_notifications` | Login Notifications | Setting label |
| `get_notified_login` | Get notified when someone logs into your account | Setting description |
| `session_timeout` | Session Timeout | Setting label |
| `auto_logout_desc` | Automatically log out after 30 minutes of inactivity | Setting description |
| `notification_preferences` | Notification Preferences | Section title |
| `email_notifications` | Email Notifications | Setting label |
| `receive_email_updates` | Receive email updates about your account activity | Setting description |
| `transaction_alerts` | Transaction Alerts | Setting label |
| `get_transaction_alerts` | Get alerts for all transactions | Setting description |
| `weekly_reports` | Weekly Reports | Setting label |
| `receive_weekly_reports` | Receive weekly summary reports via email | Setting description |
| `danger_zone` | Danger Zone | Section title |
| `delete_account` | Delete Account | Button text |
| `delete_account_warning` | Permanently delete your account and all associated data | Warning text |

## Responsive Requirements

### Desktop (≥1024px)
- Side-by-side profile info and photo
- 2-column security/notification settings
- Full-width password form

### Tablet (768px–1023px)
- Stacked profile sections
- 2-column security/notification settings

### Mobile (<768px)
- Full-width stacked layout
- Single column all sections

## API Dependency
- **Profile API**: GET `/api/profile` — Get user profile
- **Update Profile**: PUT `/api/profile` — Update profile
- **Change Password**: POST `/api/profile/password` — Change password
- **Upload Photo**: POST `/api/profile/photo` — Upload profile photo
- **Delete Account**: DELETE `/api/profile` — Delete account