# Support

## Purpose
Support provides a customer support ticket management system. It allows administrators to manage support channels (Telegram, WhatsApp, Pop800, Messenger, Live Chat, Custom), create and track tickets, and provide customer service. The page includes channel configuration and a preview panel.

## Components
- Page header with icon and title
- Statistics cards (4 metrics)
- Add/Edit Support Channel form
- Support Channels data table
- Preview panel
- Delete Confirmation modal
- Business Rules section

## Header
- **Title**: "Customer Support"
- **Subtitle**: "Manage all customer support channels"
- **Page Icon**: Blue background with lifebuoy icon

### Statistics Cards
| Card | ID | Description |
|------|-----|-------------|
| Total Tickets | `totalTickets` | All support tickets |
| Open | `openTickets` | Open tickets |
| In Progress | `inProgressTickets` | Being handled |
| Resolved | `resolvedTickets` | Completed tickets |

## Filters
| Filter | Type | Options |
|--------|------|---------|
| Status | select | All, Open, In Progress, Resolved |
| Priority | select | All, Low, Medium, High |

## Search
- **Placeholder**: "Search tickets..."
- **Searches**: Ticket ID, subject, customer name

## Buttons
| Button | Action | Location |
|--------|--------|----------|
| Add New Support | Add new support channel | Table header |
| Save Support | Save channel configuration | Form |
| Reset | Reset form fields | Form |
| Edit | Edit channel | Row action |
| Delete | Delete channel | Row action |

## Forms

### Add/Edit Support Channel Form
| Field | ID | Type | Required | Options/Notes |
|-------|-----|------|----------|---------------|
| Support Name | `supportName` | select | Yes | Telegram, WhatsApp, Pop800, Messenger, Live Chat, Custom |
| Support URL | `supportUrl` | url | Yes | placeholder: "https://t.me/your_username" |
| Description | `supportDesc` | text | Yes | placeholder: "Payment Issues" |
| Sort Order | `sortOrder` | number | Yes | value="1", min="1" |
| Status | `statusToggle` | checkbox (toggle) | No | Enabled/Disabled |
| Support Icon | `iconFile` | file | No | Accepts image/* (PNG, JPG, SVG, max 2MB) |

**Hints**:
- Support URL: "Enter the support link or contact URL"
- Description: "Enter the purpose of this support channel"
- Sort Order: "Set display order (1 will show first)"
- Icon upload: "PNG, JPG, SVG (Max 2MB)"

**Buttons**: Save Support, Reset

### Delete Confirmation Modal
**Title**: "Delete Support Channel"
**Message**: "Are you sure you want to delete this support channel? This action cannot be undone."
**Buttons**: Cancel, Delete

## Tables

### Support Channels Table
| Column | Description |
|--------|-------------|
| Icon | Channel icon |
| Support Name | Channel name (Telegram, WhatsApp, etc.) |
| Support URL | Channel link |
| Description | Channel purpose |
| Sort Order | Display order |
| Status | Enabled/Disabled |
| Actions | Action buttons |

## Action Buttons

### Row Actions
| Button | Function | Icon |
|--------|----------|------|
| Edit | Edit channel configuration | Pencil |
| Delete | Delete channel | Trash |

### Preview Panel
- Shows enabled channels as cards
- Card title: "Online Customer Service {n}"
- Each card shows: channel name, description, "Open" button

## Workflow
1. Admin navigates to Support page
2. Views statistics cards showing ticket counts
3. Uses form to add new support channel
4. Selects channel type (Telegram, WhatsApp, etc.)
5. Enters URL and description
6. Sets sort order and status
7. Optionally uploads custom icon
8. Saves channel configuration
9. Can edit existing channels
10. Can delete channels (with confirmation)
11. Views preview of enabled channels
12. Can test channel links

## Translation Requirements
| Key | English | Description |
|-----|---------|-------------|
| `customer_support` | Customer Support | Page title |
| `manage_all_support_channels` | Manage all customer support channels | Subtitle |
| `add_support_channel` | Add Support Channel | Button text |
| `support_name` | Support Name | Field label |
| `support_url` | Support URL | Field label |
| `description` | Description | Field label |
| `sort_order` | Sort Order | Field label |
| `status` | Status | Field label |
| `support_icon` | Support Icon | Field label |
| `save_support` | Save Support | Button text |
| `reset` | Reset | Button text |
| `total_tickets` | Total Tickets | Stat label |
| `open` | Open | Stat label |
| `in_progress` | In Progress | Stat label |
| `resolved` | Resolved | Stat label |
| `icon` | Icon | Column |
| `support_name` | Support Name | Column |
| `support_url` | Support URL | Column |
| `description` | Description | Column |
| `sort_order` | Sort Order | Column |
| `status` | Status | Column |
| `actions` | Actions | Column |
| `edit` | Edit | Action |
| `delete` | Delete | Action |
| `telegram` | Telegram | Channel |
| `whatsapp` | WhatsApp | Channel |
| `pop800` | Pop800 | Channel |
| `messenger` | Messenger | Channel |
| `live_chat` | Live Chat | Channel |
| `custom` | Custom | Channel |
| `enabled` | Enabled | Status |
| `disabled` | Disabled | Status |
| `delete_channel` | Delete Support Channel | Modal title |
| `delete_confirmation` | Are you sure you want to delete this support channel? | Modal message |
| `cancel` | Cancel | Button |
| `online_customer_service` | Online Customer Service | Preview title |
| `open` | Open | Preview button |

## Responsive Requirements

### Desktop (≥1024px)
- 4-column statistics grid
- Side-by-side form and table
- Preview panel on right

### Tablet (768px–1023px)
- 2-column statistics grid
- Stacked form and table
- Preview panel below

### Mobile (<768px)
- 2-column statistics grid
- Full-width stacked layout
- Preview panel below

## API Dependency
- **Support API**: GET `/api/support/channels` — List channels
- **Add Channel**: POST `/api/support/channels` — Add channel
- **Update Channel**: PUT `/api/support/channels/:id` — Update channel
- **Delete Channel**: DELETE `/api/support/channels/:id` — Delete channel
- **Upload Icon**: POST `/api/support/channels/:id/icon` — Upload icon