# Bank Management Module

## Tổng quan
Module quản lý ngân hàng cung cấp đầy đủ chức năng CRUD (Create, Read, Update, Delete) để quản lý thông tin các ngân hàng trong hệ thống.

## Cấu trúc thư mục
```
src/views/categories/banks/
├── index.vue                           # Trang chính - danh sách ngân hàng
├── components/
│   ├── CreateOrUpdateBank.vue          # Modal tạo mới/cập nhật ngân hàng
│   └── BankDetail.vue                  # Modal xem chi tiết ngân hàng
└── README.md                           # Tài liệu này
```

## Các file liên quan
```
src/
├── services/
│   └── bankService.js                  # Service xử lý API calls
├── infrastructure/
│   ├── constants/
│   │   └── bankConstants.js            # Constants và enums cho Bank
│   └── apiPaths/
│       └── bankPath.js                 # Định nghĩa API paths
└── routers/
    └── system.js                       # Route configuration (đã thêm bank route)
```

## Chức năng chính

### 1. Danh sách ngân hàng (`index.vue`)
- Hiển thị danh sách ngân hàng với phân trang
- Tìm kiếm theo từ khóa, loại ngân hàng, trạng thái
- Các thao tác: Xem chi tiết, Chỉnh sửa, Xóa
- Khởi tạo dữ liệu mẫu

### 2. Tạo mới/Cập nhật (`CreateOrUpdateBank.vue`)
- Form nhập liệu đầy đủ thông tin ngân hàng
- Validation dữ liệu client-side
- Hỗ trợ cả tạo mới và cập nhật

### 3. Xem chi tiết (`BankDetail.vue`)
- Hiển thị đầy đủ thông tin ngân hàng
- Thông tin được nhóm theo các mục: Cơ bản, Liên hệ, Tài chính, Hệ thống

## API Endpoints

### Base URL
```
http://localhost:5284/api/Bank
https://localhost:7284/api/Bank
```

### Endpoints
- `POST /Search` - Tìm kiếm với phân trang
- `GET /GetAll` - Lấy tất cả ngân hàng hoạt động
- `GET /GetById/{id}` - Lấy chi tiết theo ID
- `POST /Create` - Tạo ngân hàng mới
- `PUT /Update` - Cập nhật thông tin
- `DELETE /Delete/{id}` - Xóa ngân hàng
- `POST /InitializeBankData` - Khởi tạo dữ liệu mẫu

## Data Models

### BankModel (Request)
```javascript
{
  Id: 0,
  BankCode: 970415,           // Mã ngân hàng (6 chữ số)
  BankType: 1,                // Loại ngân hàng (1-5)
  FullName: "string",         // Tên đầy đủ
  EnglishName: "string",      // Tên tiếng Anh
  BrandName: "string",        // Tên thương hiệu
  SwiftCode: "string",        // Mã SWIFT (8-11 ký tự)
  Website: "string",          // Website
  EstablishedDate: "2024-08-26T00:00:00Z", // Ngày thành lập
  CharterCapital: 0,          // Vốn điều lệ (VND)
  IsActive: true,             // Trạng thái hoạt động
  Note: "string"              // Ghi chú
}
```

### BankItem (Response)
```javascript
{
  Id: 0,
  BankCode: 970415,
  BankType: 1,
  BankTypeName: "string",     // Tên loại ngân hàng
  FullName: "string",
  EnglishName: "string",
  BrandName: "string",
  SwiftCode: "string",
  Website: "string",
  EstablishedDate: "2024-08-26T00:00:00Z",
  CharterCapital: 0,
  IsActive: true,
  Note: "string",
  CreatedBy: "string",        // Người tạo
  UpdatedBy: "string",        // Người cập nhật
  CreatedTime: "2024-08-26T00:00:00Z",  // Thời gian tạo
  UpdatedTime: "2024-08-26T00:00:00Z"   // Thời gian cập nhật
}
```

## Constants và Enums

### BankType
```javascript
{
  CommercialBank: 1,    // Ngân hàng thương mại
  StateBank: 2,         // Ngân hàng nhà nước
  CooperativeBank: 3,   // Ngân hàng hợp tác xã
  ForeignBank: 4,       // Ngân hàng nước ngoài
  PolicyBank: 5         // Ngân hàng chính sách
}
```

### Validation Rules
- **BankCode**: Bắt buộc, 6 chữ số
- **FullName**: Bắt buộc, 5-200 ký tự
- **BrandName**: Bắt buộc, 2-50 ký tự
- **SwiftCode**: Tùy chọn, 8-11 ký tự theo chuẩn SWIFT
- **Website**: Tùy chọn, phải bắt đầu bằng http:// hoặc https://
- **CharterCapital**: Tùy chọn, >= 0

## Routing

### Route đã được thêm vào `src/routers/system.js`:
```javascript
{
  name: "bank",
  path: "/quan-ly-ngan-hang",
  component: BankView,
  meta: { title: "Quản lý ngân hàng" },
}
```

### URL truy cập:
```
http://localhost:3000/quan-ly-ngan-hang
```

## Cách sử dụng

### 1. Truy cập module
- Điều hướng đến `/quan-ly-ngan-hang`
- Hoặc thông qua menu hệ thống (nếu đã được cấu hình)

### 2. Khởi tạo dữ liệu mẫu
- Click nút "Khởi tạo dữ liệu mẫu" để tạo 5 ngân hàng lớn của Việt Nam
- Dữ liệu mẫu bao gồm: VietinBank, Vietcombank, BIDV, VPBank, Techcombank

### 3. Tìm kiếm
- Nhập từ khóa để tìm theo tên, mã ngân hàng, SWIFT code
- Lọc theo loại ngân hàng và trạng thái
- Kết quả hiển thị với phân trang

### 4. Thêm mới ngân hàng
- Click nút "Thêm mới"
- Điền đầy đủ thông tin trong form
- Hệ thống sẽ validate dữ liệu trước khi lưu

### 5. Chỉnh sửa ngân hàng
- Click icon "Chỉnh sửa" trong danh sách
- Form sẽ được điền sẵn thông tin hiện tại
- Cập nhật và lưu thay đổi

### 6. Xem chi tiết
- Click icon "Xem chi tiết" để hiển thị đầy đủ thông tin
- Thông tin được nhóm theo các mục rõ ràng

### 7. Xóa ngân hàng
- Click icon "Xóa" và xác nhận
- Thực hiện soft delete (ngân hàng vẫn tồn tại trong DB nhưng bị đánh dấu xóa)

## Lưu ý kỹ thuật

### Dependencies
- Vue 3 Composition API
- Vue Router
- Vue Select (v-select)
- Toast notifications
- Bootstrap 5 classes

### Permissions
- Các quyền `canCreate`, `canEdit`, `canDelete` hiện tại được hardcode
- Cần tích hợp với hệ thống phân quyền thực tế

### Error Handling
- Tất cả API calls đều có error handling
- Hiển thị thông báo lỗi thân thiện với người dùng
- Log chi tiết lỗi trong console để debug

### Performance
- Sử dụng lazy loading cho components
- Phân trang để tránh load quá nhiều dữ liệu
- Debounce cho tìm kiếm (có thể thêm sau)

## Tích hợp với hệ thống

### Menu
- Cần thêm menu item vào database thông qua trang quản lý menu
- Hoặc liên hệ admin để cấu hình menu

### Permissions
- Cần định nghĩa các permission cho module Bank Management
- Tích hợp với hệ thống phân quyền hiện tại

### Audit Log
- Có thể thêm logging cho các thao tác CRUD
- Theo dõi ai đã thực hiện thay đổi gì và khi nào
