# IP Management

## Purpose
IP Management handles the whitelist/blacklist configuration for the platform. It allows administrators to control which IP addresses can access the system, manage IP-based security rules, and track IP usage. This is a critical security component for access control.

## Components
- Page header with icon and title
- Statistics cards (4 metrics)
- Add IP form section
- IP list data table
- Add IP modal
- Bulk Import modal
- Delete Confirmation modal
- Business Rules section

## Header
- **Title**: "IP Management"
- **Subtitle**: "Manage IP whitelist and blacklist for security"
- **Page Icon**: Red background with globe icon

### Statistics Cards
| Card | ID | Description |
|------|-----|-------------|
| Total IPs | `totalIPs` | All configured IPs |
| Whitelisted | `whitelistedIPs` | Allowed IPs |
| Blacklisted | `blacklistedIPs` | Blocked IPs |
| Active | `activeIPs` | Currently active |

## Filters
| Filter | ID | Type | Options |
|--------|-----|------|---------|
| Search IP | `searchInput` | text | placeholder: "Search IP addresses..." |
| Type | `filterType` | select | All, Whitelist, Blacklist |
| Status | `filterStatus` | select | All, Active, Inactive |

## Search
- **Input ID**: `searchInput`
- **Placeholder**: "Search IP addresses..."
- **Searches**: IP address, label, description

## Buttons
| Button | Action | Location |
|--------|--------|----------|
| Add IP | Opens add IP modal | Action bar |
| Export | Export IP list to CSV | Action bar |
| Bulk Import | Import IPs from file | Action bar |
| Refresh | Reload IP list | Action bar |

## Forms

### Add IP Section (Inline Form)
| Field | ID | Type | Required | Placeholder |
|-------|-----|------|----------|-------------|
| IP Address | `newIpAddress` | text | Yes | "xxx.xxx.xxx.xxx" |
| Label | `newIpLabel` | text | Yes | — |
| Type | `newIpType` | select | Yes | Whitelist, Blacklist |
| Description | `newIpDescription` | text | No | — |

### Add IP Modal
| Field | ID | Type | Required |
|-------|-----|------|----------|
| IP Address | `modalIpAddress` | text | Yes |
| Label | `modalIpLabel` | text | Yes |
| Type | `modalIpType` | select | Yes |
| Description | `modalIpDescription` | text | No |
| Expiry Date | `modalIpExpiry` | date | No |

### Bulk Import Modal
| Field | ID | Type | Required |
|-------|-----|------|----------|
| File | `importFile` | file | Yes |
| Type | `importType` | select | Yes |

## Tables

### IP List Table
| Column | Description |
|--------|-------------|
| IP Address | The IP address |
| Label | Friendly name |
| Type | Whitelist or Blacklist |
| Description | Additional notes |
| Added By | Who added it |
| Added Date | When it was added |
| Expiry Date | When it expires |
| Status | Active/Inactive |
| Actions | Action buttons |

## Action Buttons

### Row Actions
| Button | Function | Icon |
|--------|----------|------|
| Edit | Edit IP entry | Pencil |
| Delete | Delete IP entry | Trash |
| Toggle Status | Enable/Disable | Toggle |

## Workflow
1. Admin navigates to IP Management page
2. Views statistics cards showing IP counts
3. Can add single IP via inline form or modal
4. Can bulk import IPs from CSV file
5. Views IP list with all details
6. Can edit existing IP entries
7. Can enable/disable IP entries
8. Can delete IP entries (with confirmation)
9. Can export IP list to CSV
10. Can search/filter IPs by type and status

## Translation Requirements
| Key | English | Description |
|-----|---------|-------------|
| `ip_management` | IP Management | Page title |
| `manage_ip_whitelist_blacklist` | Manage IP whitelist and blacklist for security | Subtitle |
| `add_ip` | Add IP | Button text |
| `export` | Export | Button text |
| `bulk_import` | Bulk Import | Button text |
| `refresh` | Refresh | Button text |
| `search_ips` | Search IP addresses... | Placeholder |
| `total_ips` | Total IPs | Stat label |
| `whitelisted` | Whitelisted | Stat label |
| `blacklisted` | Blacklisted | Stat label |
| `active` | Active | Stat label |
| `ip_address` | IP Address | Column/field |
| `label` | Label | Column/field |
| `type` | Type | Column/filter |
| `description` | Description | Column/field |
| `added_by` | Added By | Column |
| `added_date` | Added Date | Column |
| `expiry_date` | Expiry Date | Column/field |
| `status` | Status | Column/filter |
| `actions` | Actions | Column |
| `whitelist` | Whitelist | Type |
| `blacklist` | Blacklist | Type |
| `edit` | Edit | Action |
| `delete` | Delete | Action |
| `toggle_status` | Toggle Status | Action |
| `save` | Save | Button |
| `cancel` | Cancel | Button |
| `import` | Import | Button |
| `select_file` | Select File | Label |

## Responsive Requirements

### Desktop (≥1024px)
- 4-column statistics grid
- Side-by-side inline form
- Full-width data table

### Tablet (768px–1023px)
- 2-column statistics grid
- Stacked form
- Horizontally scrollable table

### Mobile (<768px)
- 2-column statistics grid
- Full-width stacked form
- Horizontally scrollable table

## API Dependency
- **IPs API**: GET `/api/ips` — List all IPs
- **Add IP**: POST `/api/ips` — Add new IP
- **Update IP**: PUT `/api/ips/:id` — Update IP
- **Delete IP**: DELETE `/api/ips/:id` — Delete IP
- **Bulk Import**: POST `/api/ips/import` — Import IPs from file
- **Export IPs**: GET `/api/ips/export` — CSV export