# Transaction Orders

## Purpose
Transaction Orders provides real-time monitoring and management of all merchant payment orders. It displays transaction details including status, amounts, payment methods, and notification status. Administrators can manually process pending transactions, retry notifications, and export transaction data.

## Components
- Page header with icon and title
- Statistics cards (6 metrics)
- Filter section with multiple filter fields
- Transaction list data table
- Manual Process modal
- Transaction Details modal
- Business Rules section

## Header
- **Title**: "Transaction Orders"
- **Subtitle**: "Monitor all merchant payment orders in real-time"
- **Page Icon**: Blue background with credit card icon

### Statistics Cards
| Card | ID | Description |
|------|-----|-------------|
| Total Transactions | `totalTransactions` | All transactions |
| Successful | `successfulTransactions` | Completed transactions |
| Pending | `pendingTransactions` | Awaiting processing |
| Failed | `failedTransactions` | Failed transactions |
| Total Amount | `totalAmount` | Sum of all amounts |
| Today's Transactions | `todayTransactions` | Transactions today |

## Filters
| Filter | ID | Type | Options |
|--------|-----|------|---------|
| Search | `searchInput` | text | placeholder: "Search transactions..." |
| Status | `filterStatus` | select | All, Pending, Completed, Failed, Refunded |
| Method | `filterMethod` | select | All, Mobile Money, Card, Bank |
| Date From | `filterDateFrom` | date | — |
| Date To | `filterDateTo` | date | — |
| Amount Min | `filterAmountMin` | number | — |
| Amount Max | `filterAmountMax` | number | — |

## Search
- **Input ID**: `searchInput`
- **Placeholder**: "Search transactions..."
- **Searches**: Transaction ID, merchant name, order ID

## Buttons
| Button | Action | Location |
|--------|--------|----------|
| Search | Apply search query | Filter bar |
| Reset Filters | Clear all filters | Filter bar |
| Export CSV | Export transactions to CSV | Action bar |
| Refresh | Reload transaction list | Action bar |

## Forms

### Manual Process Modal (`manualProcessModal`)
| Field | ID | Type | Required | Notes |
|-------|-----|------|----------|-------|
| Transaction ID | `manualTransactionId` | text | No (readonly) | — |
| Order Amount | `manualOrderAmount` | text | No (readonly) | — |
| Merchant Name | `manualMerchantName` | text | No (readonly) | — |
| Current Status | `manualCurrentStatus` | text | No (readonly) | — |
| New Status | `manualNewStatus` | select | Yes | Completed, Failed, Refunded |
| Admin Notes | `manualAdminNotes` | textarea | No | — |

**Buttons**: Cancel, Process

## Tables

### Transaction List Table
| Column | Description |
|--------|-------------|
| Transaction ID | Unique transaction identifier |
| User ID | Associated user ID |
| Merchant Name | Merchant business name |
| Agent Name | Agent managing merchant |
| Order ID | Internal order ID |
| Merchant Order ID | Merchant's order reference |
| Currency | Transaction currency |
| Order Amount | Original order amount |
| Paid Amount | Amount actually paid |
| Payment Status | Current payment status |
| Notification Status | Webhook notification status |
| Request Time | When transaction was initiated |
| Processed Time | When transaction was completed |
| Current Status | Current transaction status |
| Actions | Action buttons |

## Action Buttons

### Row Actions
| Button | Function | Icon |
|--------|----------|------|
| Manual Process | Open manual processing modal | Settings |
| View Details | View full transaction details | Eye |
| Retry Notification | Resend webhook notification | Refresh |

## Workflow
1. Admin navigates to Transaction Orders page
2. Views statistics cards showing transaction counts and amounts
3. Uses filters to find specific transactions
4. Can filter by status, method, date range, amount range
5. Views transaction list with all details
6. Can manually process pending transactions
7. Can retry failed webhook notifications
8. Can view full transaction details
9. Can export filtered transactions to CSV
10. Can refresh list to get latest data

## Translation Requirements
| Key | English | Description |
|-----|---------|-------------|
| `transaction_orders` | Transaction Orders | Page title |
| `monitor_all_merchant_payment_orders` | Monitor all merchant payment orders in real-time | Subtitle |
| `total_transactions` | Total Transactions | Stat label |
| `successful` | Successful | Stat label |
| `pending` | Pending | Stat label |
| `failed` | Failed | Stat label |
| `total_amount` | Total Amount | Stat label |
| `todays_transactions` | Today's Transactions | Stat label |
| `search_transactions` | Search transactions... | Placeholder |
| `status` | Status | Filter label |
| `method` | Method | Filter label |
| `date_range` | Date Range | Filter label |
| `amount_range` | Amount Range | Filter label |
| `export_csv` | Export CSV | Button text |
| `refresh` | Refresh | Button text |
| `transaction_id` | Transaction ID | Column |
| `user_id` | User ID | Column |
| `merchant_name` | Merchant Name | Column |
| `agent_name` | Agent Name | Column |
| `order_id` | Order ID | Column |
| `merchant_order_id` | Merchant Order ID | Column |
| `currency` | Currency | Column |
| `order_amount` | Order Amount | Column |
| `paid_amount` | Paid Amount | Column |
| `payment_status` | Payment Status | Column |
| `notification_status` | Notification Status | Column |
| `request_time` | Request Time | Column |
| `processed_time` | Processed Time | Column |
| `current_status` | Current Status | Column |
| `actions` | Actions | Column |
| `manual_process` | Manual Process | Action |
| `view_details` | View Details | Action |
| `retry_notification` | Retry Notification | Action |
| `completed` | Completed | Status |
| `refunded` | Refunded | Status |
| `mobile_money` | Mobile Money | Method |
| `card` | Card | Method |
| `bank` | Bank | Method |
| `new_status` | New Status | Field |
| `admin_notes` | Admin Notes | Field |
| `process` | Process | Button |
| `cancel` | Cancel | Button |

## Responsive Requirements

### Desktop (≥1024px)
- 6-column statistics grid
- Horizontal filter bar
- Full-width data table

### Tablet (768px–1023px)
- 3-column statistics grid
- Stacked filter fields
- Horizontally scrollable table

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

## API Dependency
- **Transactions API**: GET `/api/transactions` — List transactions
- **Transaction Details**: GET `/api/transactions/:id` — Get transaction details
- **Manual Process**: POST `/api/transactions/:id/process` — Manual processing
- **Retry Notification**: POST `/api/transactions/:id/retry-notification` — Retry webhook
- **Export Transactions**: GET `/api/transactions/export` — CSV export