# Quản lý Thông tin Xuất Hóa đơn VAT Khách hàng

## 📋 Tổng quan

Module quản lý thông tin xuất hóa đơn VAT 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ý thông tin VAT mặc định.

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

### 1. **Danh sách thông tin VAT**

- Hiển thị tất cả thông tin VAT của khách hàng
- Thông tin hiển thị: Tên công ty, Mã số thuế, Email hóa đơn, Địa chỉ, Người liên hệ, Trạng thái mặc định
- Sắp xếp theo thời gian cập nhật
- Responsive design cho mobile

### 2. **Thêm thông tin VAT mới**

- Form validation đầy đủ theo API specification
- Kiểm tra email format
- Tự động trim whitespace
- Tùy chọn đặt làm thông tin VAT mặc định

### 3. **Chỉnh sửa thông tin VAT**

- Load dữ liệu hiện tại vào form
- Validation tương tự form thêm mới
- Cập nhật thông tin theo API

### 4. **Xem chi tiết thông tin VAT**

- Modal hiển thị đầy đủ thông tin
- Chia thành các section: Thông tin công ty, Liên hệ, Bổ sung, Lịch sử
- Format ngày tháng theo locale Việt Nam
- Hiển thị trạng thái mặc định

### 5. **Xóa thông tin VAT**

- Modal xác nhận với thông tin chi tiết
- Cảnh báo đặc biệt cho thông tin VAT mặc định
- Checkbox xác nhận trước khi xóa
- Không thể hoàn tác

### 6. **Đặt làm mặc định**

- Chức năng đặt thông tin VAT làm mặc định
- Tự động bỏ mặc định các thông tin khác
- Hiển thị badge "Mặc định" rõ ràng

## 🏗️ Cấu trúc file

```
src/views/crm/customer/detail/components/
├── VatInfo.vue                    # Component chính
├── CreateOrUpdateVatInfo.vue      # Form thêm/sửa
├── ViewVatInfoDetail.vue          # Modal xem chi tiết
├── ConfirmDeleteVatInfo.vue       # Modal xác nhận xóa
├── index.js                       # Export components
└── VAT_INFO_README.md            # Tài liệu này
```

## 🔧 API Endpoints

### Service: `vatInfoService.js`

```javascript
// Tìm kiếm thông tin VAT
search(searchModel);

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

// Lấy chi tiết thông tin VAT
getById(id);

// Lấy thông tin VAT mặc định
getDefaultByCustomerId(customerId);

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

// Xóa thông tin VAT
delete id;

// Đặt làm mặc định
setAsDefault(id);
```

## 📝 Validation Rules

### Trường bắt buộc:

- **companyName**: Tên công ty (max 200 ký tự)
- **taxCode**: Mã số thuế (max 20 ký tự)
- **invoiceEmail**: Email hóa đơn (max 100 ký tự, format email)
- **address**: Địa chỉ (max 500 ký tự)
- **contactName**: Tên người liên hệ (max 100 ký tự)
- **contactPhone**: Số điện thoại (max 20 ký tự)

### Trường tùy chọn:

- **note**: Ghi chú (max 1000 ký tự)
- **isDefault**: Đặt làm mặc định (boolean)

## 🎨 UI/UX Features

### 1. **Responsive Design**

- Hiển thị tối ưu trên desktop và mobile
- Grid layout linh hoạt
- Dropdown menu cho actions

### 2. **Loading States**

- Spinner khi tải dữ liệu
- Disable buttons khi đang xử lý
- Loading overlay cho các modal

### 3. **Error Handling**

- Toast notifications cho success/error
- Inline validation errors
- Graceful error recovery

### 4. **Accessibility**

- Proper ARIA labels
- Keyboard navigation support
- Screen reader friendly

## 🔒 Security & Permissions

Tất cả API calls đều yêu cầu:

- Bearer Token authentication
- Proper role permissions:
  - `VatInfo.Search`
  - `VatInfo.GetById`
  - `VatInfo.GetDefaultByCustomerId`
  - `VatInfo.CreateOrUpdate`
  - `VatInfo.Delete`
  - `VatInfo.SetAsDefault`

## 📱 Integration

### Trong Customer Detail Page:

1. Tab "THÔNG TIN VAT" được thêm vào navigation
2. Component `VatInfo` được import và sử dụng
3. Truyền `customerId` và `customerName` từ parent component

### Props Required:

- `customerId`: ID của khách hàng (required)
- `customerName`: Tên khách hàng (optional, for display)

## 🧪 Testing Checklist

- [ ] Hiển thị danh sách thông tin VAT
- [ ] Thêm mới thông tin VAT
- [ ] Chỉnh sửa thông tin VAT
- [ ] Xem chi tiết thông tin VAT
- [ ] Xóa thông tin VAT
- [ ] Đặt làm mặc định
- [ ] Validation form
- [ ] Error handling
- [ ] Loading states
- [ ] Responsive design
- [ ] Toast notifications

## 🔄 Business Rules

1. **Mặc định**: Mỗi khách hàng chỉ có thể có 1 thông tin VAT mặc định
2. **Xóa mặc định**: Cảnh báo khi xóa thông tin VAT mặc định
3. **Email**: Phải đúng format email
4. **Mã số thuế**: Bắt buộc và phải hợp lệ

## 🚨 Lưu ý quan trọng

1. **API Response**: Luôn kiểm tra `result` field (1=Success, 2=Failed, 3=SystemError)
2. **Error Messages**: Hiển thị message từ API response
3. **Validation**: Client-side validation + server-side validation
4. **Performance**: Lazy loading cho modal components
