# Chức năng Quản lý CallLog

## Tổng quan
Chức năng quản lý CallLog trong hệ thống CRM cho phép theo dõi, quản lý và phân tích các cuộc gọi tổng đài.

## Cấu trúc thư mục
```
src/views/crm/calllog/
├── index.vue                    # Trang chính quản lý CallLog
├── dashboard.vue               # Trang dashboard thống kê
├── components/
│   ├── CallLogStatistics.vue   # Component thống kê tổng quan
│   ├── CallLogModal.vue        # Modal tạo/sửa CallLog
│   ├── CallLogDetailModal.vue  # Modal xem chi tiết CallLog
│   └── CallLogDashboard.vue    # Component dashboard chi tiết
└── README.md                   # Tài liệu hướng dẫn
```

## Tính năng chính

### 1. Quản lý CallLog (`/call-log`)
- **Tìm kiếm và lọc**: Tìm kiếm theo từ khóa, khoảng thời gian, loại cuộc gọi, trạng thái Lead
- **Xem danh sách**: Hiển thị danh sách CallLog với phân trang
- **Tạo mới**: Tạo CallLog mới với đầy đủ thông tin
- **Chỉnh sửa**: Cập nhật thông tin CallLog
- **Xem chi tiết**: Xem thông tin chi tiết và cập nhật trạng thái Lead
- **Xóa**: Xóa CallLog (có xác nhận)
- **Thống kê**: Hiển thị thống kê tổng quan

### 2. Dashboard CallLog (`/call-log-dashboard`)
- **Thống kê tổng quan**: Tổng cuộc gọi, thời lượng, chi phí
- **Biểu đồ phân tích**: Lượng cuộc gọi theo giờ, phân bố thời lượng
- **Top số điện thoại**: Danh sách số gọi nhiều nhất
- **Tỷ lệ thành công**: Phân tích tỷ lệ thành công cuộc gọi
- **Xuất báo cáo**: Xuất dữ liệu ra Excel, PDF, CSV

## API Endpoints sử dụng

### CallLog Service
- `search(searchModel)`: Tìm kiếm CallLog
- `getById(id)`: Lấy CallLog theo ID
- `createOrUpdate(callLogModel)`: Tạo hoặc cập nhật CallLog
- `create(callLogModel)`: Tạo CallLog mới
- `delete(id)`: Xóa CallLog
- `updateLeadStatus(id, statusModel)`: Cập nhật trạng thái Lead
- `getByPhoneNumber(phoneNumber)`: Lấy CallLog theo số điện thoại
- `getStatistics(startDate, endDate)`: Lấy thống kê CallLog

### API Paths
```javascript
callLog: {
  search: "/api/CallLog/Search",
  getById: "/api/CallLog/GetById/",
  createOrUpdate: "/api/CallLog/CreateOrUpdate",
  create: "/api/CallLog/Create",
  delete: "/api/CallLog/Delete/",
  updateLeadStatus: "/api/CallLog/UpdateLeadStatus/",
  getByPhoneNumber: "/api/CallLog/GetByPhoneNumber/",
  statistics: "/api/CallLog/Statistics"
}
```

## Cấu trúc dữ liệu

### CallLog Model
```javascript
{
  Id: number,
  HistoryID: string,
  CallID: string,
  Duration: string,
  TimeStart: datetime,
  TimeAnswered: datetime,
  TimeEnd: datetime,
  ReasonTerminated: string,
  FromNo: string,
  ToNo: string,
  FromDN: string,
  ToDN: string,
  DialNo: string,
  ReasonChanged: string,
  FinalNumber: string,
  FinalDN: string,
  BillCode: string,
  BillRate: decimal,
  BillCost: decimal,
  BillName: string,
  Chain: string,
  FromType: string,
  ToType: string,
  FinalType: string,
  FromDispName: string,
  ToDispName: string,
  FinalDispName: string,
  MissedQueueCalls: string,
  CallType: string,
  LeadStatus: number,
  StatusContent: string,
  CreatedTime: datetime,
  UpdatedTime: datetime,
  CreatedBy: number,
  CreatedByUserName: string,
  UpdatedBy: number,
  UpdatedByUserName: string
}
```

### Search Model
```javascript
{
  Pagination: {
    PageIndex: number,
    PageSize: number
  },
  Search: {
    PredicateObject: {
      Keyword: string,
      TimeStart: datetime,
      TimeEnd: datetime,
      LeadStatus: number,
      CallType: string,
      FromNo: string,
      ToNo: string
    }
  },
  Sort: {
    Predicate: string,
    Reverse: boolean
  }
}
```

## Trạng thái Lead
- `1`: Tạo mới (New) - màu xanh dương
- `2`: Đã tiếp nhận (Assigned) - màu vàng
- `3`: Thành công (Success) - màu xanh lá
- `4`: Thất bại (Failed) - màu đỏ

## Loại cuộc gọi
- `Inbound`: Cuộc gọi đến - màu xanh lá
- `Outbound`: Cuộc gọi đi - màu vàng

## Cách sử dụng

### 1. Truy cập trang quản lý
```
http://domain.com/call-log
```

### 2. Tìm kiếm CallLog
- Nhập từ khóa vào ô "Từ khóa"
- Chọn khoảng thời gian
- Chọn loại cuộc gọi và trạng thái Lead
- Nhấn "Tìm kiếm"

### 3. Tạo CallLog mới
- Nhấn nút "Tạo CallLog"
- Điền đầy đủ thông tin bắt buộc
- Nhấn "Tạo mới"

### 4. Xem chi tiết và cập nhật trạng thái
- Nhấn nút "Xem chi tiết" (biểu tượng mắt)
- Xem thông tin chi tiết
- Cập nhật trạng thái Lead nếu cần

### 5. Xem dashboard
```
http://domain.com/call-log-dashboard
```

## Quyền truy cập
Các endpoint yêu cầu quyền tương ứng:
- `CallLog.Search`: Tìm kiếm CallLog
- `CallLog.GetById`: Xem chi tiết CallLog
- `CallLog.CreateOrUpdate`: Tạo/cập nhật CallLog
- `CallLog.Create`: Tạo CallLog mới
- `CallLog.Delete`: Xóa CallLog
- `CallLog.UpdateLeadStatus`: Cập nhật trạng thái Lead
- `CallLog.GetByPhoneNumber`: Tìm theo số điện thoại
- `CallLog.Statistics`: Xem thống kê

## Lưu ý kỹ thuật

### Dependencies
- Vue 3 Composition API
- Bootstrap 5 cho UI
- Font Awesome cho icons
- Axios cho HTTP requests

### Toast Notifications
Sử dụng `this.$toast` để hiển thị thông báo:
```javascript
this.$toast.success("Thành công");
this.$toast.error("Có lỗi xảy ra");
this.$toast.info("Thông tin");
```

### Error Handling
Tất cả API calls đều có error handling và hiển thị thông báo lỗi phù hợp.

### Responsive Design
Giao diện được thiết kế responsive, hoạt động tốt trên desktop và mobile.

## Tính năng mở rộng

### 1. Biểu đồ nâng cao
- Tích hợp Chart.js hoặc D3.js cho biểu đồ chi tiết hơn
- Biểu đồ real-time

### 2. Export nâng cao
- Xuất báo cáo theo template
- Lên lịch xuất báo cáo tự động

### 3. Tích hợp AI
- Phân tích sentiment cuộc gọi
- Gợi ý trạng thái Lead tự động

### 4. Notification
- Thông báo real-time khi có cuộc gọi mới
- Email báo cáo định kỳ
