# Hướng dẫn chuyển đổi headers sang đa ngôn ngữ

## Đã hoàn thành
✅ File ngôn ngữ `vi.js` và `zh.js` đã được bổ sung section `table_headers`
✅ File mẫu `Quote/list.vue` đã được cập nhật

## Cách áp dụng cho các file .vue còn lại

### Bước 1: Tìm section headers trong file .vue
Tìm đoạn code khai báo headers, thường có dạng:
```javascript
headers: [
  {
    text: "Tên cột",
    value: "fieldName",
    ...
  },
  ...
]
```

### Bước 2: Thay thế text bằng $t()
Thay thế mỗi `text: "..."` bằng `text: this.$t('table_headers.key_name')`

### Ví dụ cụ thể:

#### TRƯỚC:
```javascript
headers: [
  {
    text: "ID",
    value: "ID",
    filterable: true
  },
  {
    text: "Tên khách hàng",
    value: "Username",
    filterable: true
  },
  {
    text: "Điện thoại",
    value: "Phone",
    filterable: true
  },
  {
    text: "Thao tác",
    value: "action",
    sortable: false
  }
]
```

#### SAU:
```javascript
headers: [
  {
    text: this.$t('table_headers.id'),
    value: "ID",
    filterable: true
  },
  {
    text: this.$t('table_headers.customer_name'),
    value: "Username",
    filterable: true
  },
  {
    text: this.$t('table_headers.phone'),
    value: "Phone",
    filterable: true
  },
  {
    text: this.$t('table_headers.action'),
    value: "action",
    sortable: false
  }
]
```

## Mapping keys cho các file cụ thể

### Customer/list.vue
```javascript
"ID" → this.$t('table_headers.id')
"Mã khách hàng" → this.$t('table_headers.customer_code')
"Tên" → this.$t('table_headers.full_name')
"Tổng nạp" → this.$t('table_headers.total_deposit')
"Tiền hàng" → this.$t('table_headers.order_amount')
"Công nợ" → this.$t('table_headers.debt')
"Điện thoại" → this.$t('table_headers.phone')
"Trạng thái" → this.$t('table_headers.status')
"Nhân viên sale" → this.$t('table_headers.sale_staff')
"Thao tác" → this.$t('table_headers.action')
```

### Staff/list.vue
```javascript
"ID" → this.$t('table_headers.id')
"User Name" → this.$t('table_headers.username')
"Email" → this.$t('table_headers.email')
"Họ tên" → this.$t('table_headers.full_name')
"Quyền hạn" → this.$t('table_headers.role')
"Trạng thái" → this.$t('table_headers.status')
"Thao tác" → this.$t('table_headers.action')
```

### Storage/list.vue
```javascript
"ID" → this.$t('table_headers.id')
"Tên kho" → this.$t('table_headers.storage_name')
"Khả dụng" → this.$t('table_headers.available')
"Ngày tạo" → this.$t('table_headers.created_date')
"" (action) → this.$t('table_headers.action')
```

### ProductType/list.vue
```javascript
"ID" → this.$t('table_headers.id')
"Tên loại hàng" → this.$t('table_headers.product_type_name')
"Khả dụng" → this.$t('table_headers.available')
"Ngày tạo" → this.$t('table_headers.created_date')
"" (action) → this.$t('table_headers.action')
```

### FeeWeight/list.vue
```javascript
"ID" → this.$t('table_headers.id')
"Kho nhận" → this.$t('table_headers.storage_vn')
"Loại hàng" → this.$t('table_headers.product_type')
"Từ (kg)" → this.$t('table_headers.fee_from_kg')
"Đến (kg)" → this.$t('table_headers.fee_to_kg')
"Đơn giá" → this.$t('table_headers.unit_price')
"Ngày sửa" → this.$t('table_headers.modified_date')
"" (action) → this.$t('table_headers.action')
```

### FeeVolume/list.vue
```javascript
"ID" → this.$t('table_headers.id')
"Kho nhận" → this.$t('table_headers.storage_vn')
"Loại hàng" → this.$t('table_headers.product_type')
"Từ (m3)" → this.$t('table_headers.fee_from_m3')
"Đến (m3)" → this.$t('table_headers.fee_to_m3')
"Đơn giá" → this.$t('table_headers.unit_price')
"Ngày sửa" → this.$t('table_headers.modified_date')
"" (action) → this.$t('table_headers.action')
```

### Tracking/list.vue và tracking.vue
```javascript
"Mã vận đơn" → this.$t('table_headers.tracking_code')
"Khách hàng" → this.$t('table_headers.customer')
"Hàng" → this.$t('table_headers.product_name')
"Mã bao" → this.$t('table_headers.package_code')
"Bill" → this.$t('table_headers.bill_code')
"Trạng thái" → this.$t('table_headers.status')
"S.Kiện" → this.$t('table_headers.s_pack')
"KG" → this.$t('table_headers.kg')
"M3" → this.$t('table_headers.m3')
"P.Ship (¥)" → this.$t('table_headers.shipping_fee_yuan')
"Nhập kho TQ" → this.$t('table_headers.cn_warehouse_date')
"Đóng bao" → this.$t('table_headers.package_date')
"Nhập kho VN" → this.$t('table_headers.vn_warehouse_date')
"Xuất kho VN" → this.$t('table_headers.export_date')
"Người tạo" → this.$t('table_headers.created_by')
```

### Truck/list.vue
```javascript
"Biển số xe" → this.$t('table_headers.license_plate')
"Ngày xếp xe" → this.$t('table_headers.truck_date')
"Ngày nhập kho" → this.$t('table_headers.warehouse_date')
"Số mã ĐH" → this.$t('table_headers.order_count')
"Cân nặng" → this.$t('table_headers.weight')
"Thể tích" → this.$t('table_headers.volume')
"Trạng thái" → this.$t('table_headers.status')
"" (action) → this.$t('table_headers.action')
```

### Truck/detail.vue
```javascript
"Mã KH" → this.$t('table_headers.customer_code')
"Tên KH" → this.$t('table_headers.customer_name')
"Tên hàng TQ" → this.$t('table_headers.product_name_cn')
"Mã vận đơn" → this.$t('table_headers.tracking_code')
"Tổng chi (¥)" hoặc "Chi tệ" → this.$t('table_headers.cost_yuan')
"Cân nặng" → this.$t('table_headers.weight')
"Thể tích" → this.$t('table_headers.volume')
"Tổng kiện" → this.$t('table_headers.number_of_pack')
"Trạng thái" → this.$t('table_headers.status')
"" (action) → this.$t('table_headers.action')
```

### BigPackage/list.vue
```javascript
"Bao hàng" → this.$t('table_headers.big_package_code')
"Mã vào kho" → this.$t('table_headers.warehouse_code')
"KG" → this.$t('table_headers.weight')
"M3" → this.$t('table_headers.volume')
"Số gói" → this.$t('table_headers.package_count')
"Kiện nhập" → this.$t('table_headers.import_pack')
"Kg nhập" → this.$t('table_headers.import_kg')
"M3 nhập" → this.$t('table_headers.import_m3')
"Phí ship (¥)" → this.$t('table_headers.shipping_fee_yuan')
"Trạng thái" → this.$t('table_headers.status')
"Ngày tạo" → this.$t('table_headers.created_date')
"Người tạo" → this.$t('table_headers.created_by')
"Thao tác" → this.$t('table_headers.action')
```

### RechargeHistory/list.vue
```javascript
"ID" → this.$t('table_headers.id')
"User name" → this.$t('table_headers.username')
"Số tiền" → this.$t('table_headers.amount')
"Nội dung" → this.$t('table_headers.content')
"Trạng thái" → this.$t('table_headers.status')
"Ngày tạo" → this.$t('table_headers.created_date')
"Người tạo" → this.$t('table_headers.created_by')
"Thao tác" → this.$t('table_headers.action')
```

### PaymentHistory/PaymentHistoryList.vue
```javascript
"ID" → this.$t('table_headers.id')
"User Name" → this.$t('table_headers.username')
"Số kiện" → this.$t('table_headers.number_of_pack')
"Kg" → this.$t('table_headers.weight')
"M3" → this.$t('table_headers.volume')
"Tiền cước" → this.$t('table_headers.shipping_fee_label')
"Phí khác" → this.$t('table_headers.other_fee')
"Tổng tiền" → this.$t('table_headers.total_amount')
"Ngày thanh toán" → this.$t('table_headers.payment_date')
"Mã bill" → this.$t('table_headers.bill_id')
"Cân" → this.$t('table_headers.weight')
"Khối" → this.$t('table_headers.volume')
"Giá kg" → this.$t('table_headers.price_kg')
"Giá M3" → this.$t('table_headers.price_m3')
"Tổng tiền" → this.$t('table_headers.total_amount')
```

### Product/list.vue
```javascript
"Dài" → this.$t('table_headers.length')
"Rộng" → this.$t('table_headers.width')
"Cao" → this.$t('table_headers.height')
"Cân nặng" → this.$t('table_headers.weight')
"Số kiện" → this.$t('table_headers.number_of_pack')
"Mã KH" → this.$t('table_headers.customer_code')
"Tên khách" → this.$t('table_headers.customer_name')
"Tên hàng" → this.$t('table_headers.product_name')
"Xếp xe" → this.$t('table_headers.load_truck')
"Xuất kho" → this.$t('table_headers.export_warehouse')
"Mã vận đơn" → this.$t('table_headers.tracking_code')
"Tổng chi (¥)" → this.$t('table_headers.total_cost_yuan')
"Cân nặng" → this.$t('table_headers.weight')
"Thể tích" → this.$t('table_headers.volume')
"Phí vận chuyển" → this.$t('table_headers.shipping_cost')
"Thuế nhập khẩu" → this.$t('table_headers.import_tax_fee')
"Thuế VAT" → this.$t('table_headers.vat_tax_fee')
"Phí dịch vụ" → this.$t('table_headers.service_fee_amount')
"Tiền cân gốc" → this.$t('table_headers.original_weight_fee')
"Lợi nhuận" → this.$t('table_headers.profit')
"Nhập kho TQ" → this.$t('table_headers.cn_warehouse_date')
"Xuất kho VN" → this.$t('table_headers.export_date')
"Trạng thái" → this.$t('table_headers.status')
"Kho TQ" → this.$t('table_headers.storage_cn')
"Loại hàng" → this.$t('table_headers.product_type')
"" (action) → this.$t('table_headers.action')
```

### Reports/bao-cao-doanh-thu.vue
```javascript
"Ngày" → this.$t('table_headers.date')
"Số bill" → this.$t('table_headers.bill_count')
"Số kiện" → this.$t('table_headers.pack_count')
"Cân nặng" → this.$t('table_headers.weight')
"Thể tích" → this.$t('table_headers.volume')
"Chi tệ" → this.$t('table_headers.cost_yuan')
"Phí ship" → this.$t('table_headers.shipping_fee')
"Chiết khấu" → this.$t('table_headers.discount')
"Thành tiền" → this.$t('table_headers.subtotal')
"Chi phí" → this.$t('table_headers.cost')
"Lợi nhuận" → this.$t('table_headers.profit')
```

### Complain/detail.vue
```javascript
"ID" → this.$t('table_headers.id')
"Ảnh" → this.$t('table_headers.product_image')
"Thuộc tính" → this.$t('table_headers.attributes')
"Số lượng" → this.$t('table_headers.quantity')
"Giá (¥)" → this.$t('table_headers.price_yuan')
"Thành tiền (¥)" → this.$t('table_headers.total_yuan')
```

## Lưu ý quan trọng

1. **Không cần thêm key mới vào file ngôn ngữ** - Tất cả các key cần thiết đã được thêm vào `table_headers` section.

2. **Nếu thiếu key nào**, bạn có thể thêm vào file `vi.js` và `zh.js` theo cấu trúc:
   ```javascript
   // vi.js
   table_headers: {
     // ...existing keys...
     new_key: 'Văn bản tiếng Việt'
   }
   
   // zh.js
   table_headers: {
     // ...existing keys...
     new_key: '中文文本'
   }
   ```

3. **Headers động** - Nếu headers được tạo động (trong computed hoặc methods), bạn vẫn có thể sử dụng `this.$t()`:
   ```javascript
   computed: {
     dynamicHeaders() {
       return [
         { text: this.$t('table_headers.id'), value: 'ID' },
         { text: this.$t('table_headers.name'), value: 'Name' }
       ]
     }
   }
   ```

4. **Test ngay** - Sau khi sửa mỗi file, hãy kiểm tra ngay để đảm bảo không bị lỗi.

## Danh sách file cần cập nhật

- [ ] Customer/list.vue
- [ ] Staff/list.vue
- [ ] Storage/list.vue
- [ ] ProductType/list.vue
- [ ] FeeWeight/list.vue
- [ ] FeeVolume/list.vue
- [ ] Tracking/list.vue
- [ ] Tracking/tracking.vue
- [ ] Truck/list.vue
- [ ] Truck/detail.vue
- [ ] BigPackage/list.vue
- [ ] RechargeHistory/list.vue
- [ ] PaymentHistory/PaymentHistoryList.vue
- [ ] Product/list.vue
- [ ] Reports/bao-cao-doanh-thu.vue
- [ ] Complain/detail.vue
- [x] Quote/list.vue ✅ (Đã hoàn thành - file mẫu)

## Script tìm kiếm nhanh

Để tìm tất cả các file cần sửa:
```bash
# Tìm tất cả headers trong Vue files
grep -r "text: \"" src/views --include="*.vue"

# Hoặc tìm các file có headers array
grep -r "headers: \[" src/views --include="*.vue"
```