# Transaction Details

## Purpose
Transaction Details provides a comprehensive financial ledger view of all transactions. It shows detailed transaction information including amounts, fees, net amounts, payment methods, and status changes. This page is used for financial reconciliation and detailed transaction analysis.

## Components
- Page header with icon and title
- Statistics cards (6 metrics)
- Search & Filter section
- Transaction details data table
- Business Rules section

## Header
- **Title**: "Transaction Details"
- **Subtitle**: "Financial ledger and detailed transaction view"
- **Page Icon**: Blue background with document icon

### Statistics Cards
| Card | ID | Description |
|------|-----|-------------|
| Total Transactions | `totalTransactions` | All transactions |
| Successful | `successfulTransactions` | Completed transactions |
| Pending | `pendingTransactions` | Awaiting processing |
| Failed | `failedTransactions` | Failed transactions |
| Total Volume | `totalVolume` | Sum of all amounts |
| Today's Volume | `todayVolume` | Today's total amount |

## Filters
| Filter | ID | Type | Options |
|--------|-----|------|---------|
| Transaction ID | `filterTxId` | text | placeholder: "TXN-XXXXXX" |
| Date From | `filterDateFrom` | date | — |
| Date To | `filterDateTo` | date | — |
| Status | `filterStatus` | select | All, Completed, Pending, Failed, Refunded |

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

## Buttons
| Button | Action | Location |
|--------|--------|----------|
| Search | Apply search query | Filter bar |
| Reset | Clear all filters | Filter bar |
| Export Ledger | Export ledger to CSV | Action bar |
| Back to Orders | Navigate to transaction orders | Action bar |

## Forms
None (read-only ledger view)

## Tables

### Transaction Ledger Table
| Column | Description |
|--------|-------------|
| Transaction ID | Unique transaction identifier |
| User ID | Associated user ID |
| Merchant ID | Merchant identifier |
| Agent ID | Agent identifier |
| Order ID | Internal order ID |
| Currency | Transaction currency |
| Amount | Transaction amount |
| Fee | Processing fee |
| Net Amount | Amount after fees |
| Payment Method | Payment method used |
| Status | Transaction status |
| Created | Creation timestamp |
| Updated | Last update timestamp |
| Actions | Action buttons |

## Action Buttons

### Row Actions
| Button | Function | Icon |
|--------|----------|------|
| View | View full transaction details | Eye |

## Workflow
1. Admin navigates to Transaction Details page
2. Views statistics cards showing transaction counts and volumes
3. Uses filters to find specific transactions
4. Can filter by transaction ID, date range, status
5. Views detailed ledger with amounts, fees, and net amounts
6. Can view full transaction details
7. Can export ledger data to CSV
8. Can navigate back to transaction orders

## Translation Requirements
| Key | English | Description |
|-----|---------|-------------|
| `transaction_details` | Transaction Details | Page title |
| `financial_ledger` | Financial ledger and detailed transaction view | Subtitle |
| `total_transactions` | Total Transactions | Stat label |
| `successful` | Successful | Stat label |
| `pending` | Pending | Stat label |
| `failed` | Failed | Stat label |
| `total_volume` | Total Volume | Stat label |
| `todays_volume` | Today's Volume | Stat label |
| `transaction_id` | Transaction ID | Column/filter |
| `user_id` | User ID | Column |
| `merchant_id` | Merchant ID | Column |
| `agent_id` | Agent ID | Column |
| `order_id` | Order ID | Column |
| `currency` | Currency | Column |
| `amount` | Amount | Column |
| `fee` | Fee | Column |
| `net_amount` | Net Amount | Column |
| `payment_method` | Payment Method | Column |
| `status` | Status | Column/filter |
| `created` | Created | Column |
| `updated` | Updated | Column |
| `actions` | Actions | Column |
| `view` | View | Action |
| `export_ledger` | Export Ledger | Button text |
| `back_to_orders` | Back to Orders | Button text |
| `search_transactions` | Search transactions... | Placeholder |
| `completed` | Completed | Status |
| `refunded` | Refunded | Status |
| `mobile_money` | Mobile Money | Method |
| `card` | Card | Method |
| `bank_transfer` | Bank Transfer | Method |

## 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
- **Ledger API**: GET `/api/ledger` — Get transaction ledger
- **Transaction Details**: GET `/api/transactions/:id` — Get transaction details
- **Export Ledger**: GET `/api/ledger/export` — CSV export