# Quản lý Tài khoản Ngân hàng Khách hàng

## 📋 Tổng quan
Module quản lý tài khoản ngân hàng của khách hàng được tích hợp trong trang chi tiết khách hàng. Cho phép thực hiện đầy đủ các chức năng CRUD (Create, Read, Update, Delete) và quản lý tài khoản mặc định.

## 🚀 Tính năng chính

### 1. **Danh sách tài khoản ngân hàng**
- Hiển thị tất cả tài khoản ngân hàng của khách hàng
- Thông tin hiển thị: Số TK, Tên chủ TK, Ngân hàng, Chi nhánh, Trạng thái mặc định
- Sắp xếp theo thời gian tạo
- Responsive design cho mobile

### 2. **Thêm tài khoản ngân hàng mới**
- Form validation đầy đủ
- Kiểm tra số tài khoản (chỉ số, 6-64 ký tự)
- Tự động uppercase tên chủ tài khoản
- Tùy chọn đặt làm tài khoản mặc định

### 3. **Cập nhật tài khoản ngân hàng**
- Chỉnh sửa tất cả thông tin tài khoản
- Validation real-time
- Giữ nguyên dữ liệu khi có lỗi

### 4. **Xem chi tiết tài khoản**
- Hiển thị đầy đủ thông tin tài khoản
- Thông tin hệ thống (ngày tạo, người tạo, cập nhật)
- Tính năng copy số tài khoản

### 5. **Xóa tài khoản ngân hàng**
- Xác nhận trước khi xóa
- Không cho phép xóa tài khoản mặc định duy nhất
- Cảnh báo rõ ràng về hậu quả

### 6. **Quản lý tài khoản mặc định**
- Đặt/bỏ tài khoản mặc định
- Tự động cập nhật trạng thái các tài khoản khác
- Đảm bảo luôn có 1 tài khoản mặc định

## 🏗️ Cấu trúc Component

```
src/views/crm/customer/detail/components/
├── BankAccount.vue                    # Component chính
├── CreateOrUpdateBankAccount.vue      # Form thêm/sửa
├── ViewBankAccountDetail.vue          # Modal xem chi tiết
├── ConfirmDeleteBankAccount.vue       # Modal xác nhận xóa
└── index.js                          # Export components
```

## 🔧 API Endpoints

### Service: `customerBankAccountService.js`

```javascript
// Lấy danh sách theo khách hàng
getByCustomerId(customerId)

// Lấy chi tiết tài khoản
getById(id)

// Tạo mới/cập nhật
createOrUpdate(model)

// Xóa tài khoản
delete(id)

// Đặt làm mặc định
setDefault(id)

// Lấy tài khoản mặc định
getDefaultByCustomerId(customerId)

// Tìm kiếm (nếu cần)
search(searchModel)
```

## 📝 Validation Rules

### Trường bắt buộc:
- **customerId**: Tự động lấy từ context
- **accountNumber**: 6-64 ký tự, chỉ chứa số
- **accountHolderName**: Tối đa 256 ký tự
- **bankCode**: Tối đa 16 ký tự
- **bankName**: Tối đa 256 ký tự

### Trường tùy chọn:
- **branchName**: Tối đa 256 ký tự
- **branchAddress**: Tối đa 512 ký tự
- **note**: Tối đa 512 ký tự
- **isDefault**: Boolean

## 🎯 Business Rules

1. **Tài khoản mặc định**: Mỗi khách hàng chỉ có 1 tài khoản mặc định
2. **Số tài khoản**: Phải unique trong hệ thống
3. **Xóa tài khoản**: Không được xóa tài khoản mặc định nếu là tài khoản duy nhất
4. **Đặt mặc định**: Khi đặt 1 tài khoản làm mặc định, các tài khoản khác tự động bỏ mặc định

## 🎨 UI/UX Features

### 1. **Empty State**
- Hiển thị khi khách hàng chưa có tài khoản nào
- Call-to-action rõ ràng để thêm tài khoản đầu tiên

### 2. **Loading States**
- Skeleton loading khi tải dữ liệu
- Button loading states khi thực hiện actions
- Disable buttons khi đang xử lý

### 3. **Error Handling**
- Toast notifications cho success/error
- Form validation với error messages
- Server error handling

### 4. **Responsive Design**
- Table responsive trên mobile
- Modal responsive
- Button groups adaptive

### 5. **Accessibility**
- Proper ARIA labels
- Keyboard navigation
- Screen reader friendly

## 🔄 Luồng sử dụng

### Thêm tài khoản mới:
1. Click "Thêm tài khoản ngân hàng"
2. Điền form với validation real-time
3. Chọn đặt làm mặc định (nếu muốn)
4. Submit → Toast success → Reload danh sách

### Sửa tài khoản:
1. Click icon "Sửa" trên dòng tài khoản
2. Form hiển thị với dữ liệu hiện tại
3. Chỉnh sửa thông tin
4. Submit → Toast success → Reload danh sách

### Xóa tài khoản:
1. Click icon "Xóa" trên dòng tài khoản
2. Modal xác nhận với thông tin chi tiết
3. Cảnh báo nếu là tài khoản mặc định duy nhất
4. Confirm → Toast success → Reload danh sách

### Đặt mặc định:
1. Click icon "Star" trên tài khoản không phải mặc định
2. Tự động cập nhật trạng thái
3. Toast success → Reload danh sách

## 🧪 Testing

### Test Cases cần kiểm tra:

1. **CRUD Operations**
   - Tạo tài khoản mới thành công
   - Cập nhật tài khoản thành công
   - Xóa tài khoản thành công
   - Xem chi tiết tài khoản

2. **Validation**
   - Số tài khoản không hợp lệ
   - Trường bắt buộc để trống
   - Độ dài ký tự vượt quá giới hạn

3. **Business Logic**
   - Đặt tài khoản mặc định
   - Không cho xóa tài khoản mặc định duy nhất
   - Tự động đặt mặc định khi tạo tài khoản đầu tiên

4. **Error Handling**
   - Server error responses
   - Network errors
   - Validation errors từ server

5. **UI/UX**
   - Responsive trên các device
   - Loading states
   - Empty states
   - Toast notifications

## 🚀 Deployment

### Cần đảm bảo:
1. API endpoints đã được implement
2. Database schema đã được tạo
3. Permissions đã được cấu hình
4. Error handling đã được test

### Files cần deploy:
- `customerBankAccountService.js`
- `BankAccount.vue` và các component con
- Cập nhật `index.vue` của customer detail
- Cập nhật API paths

## 📞 Support

Nếu có vấn đề hoặc cần hỗ trợ, vui lòng liên hệ team development với thông tin:
- Component nào gặp lỗi
- Steps to reproduce
- Expected vs actual behavior
- Browser/device information
