# Cập nhật chức năng quản lý chi phí - API v3.1

## Tổng quan
Đã cập nhật toàn bộ chức năng quản lý chi phí theo tài liệu API v3.1 (cập nhật ngày 2025-12-20). Trọng tâm của phiên bản này là cải thiện trải nghiệm người dùng (UX) thông qua Modal Chi Tiết và bổ sung chức năng "Bỏ duyệt".

## Các thay đổi chính

### 1. Cải tiến UX: Modal Chi Tiết (Read-only)
- ✅ **ExpenseDetailModal.vue**: Tạo component modal mới để hiển thị chi tiết chi phí thay vì chuyển sang trang mới.
- ✅ **Chế độ hiển thị**: Theo yêu cầu, modal này hiện tại chỉ dùng để **xem chi tiết**. Tất cả các nút hành động (Duyệt, Từ chối, Bỏ duyệt, Thanh toán, Chỉnh sửa) đã được loại bỏ khỏi modal để giữ giao diện gọn gàng.
- ✅ **Cách thực hiện hành động**: Người dùng thực hiện Duyệt, Từ chối, Bỏ duyệt... trực tiếp từ menu thao tác trong dánh sách (index.vue).
- ✅ **Lợi ích**: 
  - Tải dữ liệu nhanh hơn (không reload page).
  - Giữ nguyên trạng thái và vị trí của danh sách (keep context).
- ✅ **Tính năng**:
  - Hỗ trợ `variant="modal-full"` để tận dụng không gian màn hình.
  - Hiển thị đầy đủ thông tin chi phí, thông tin ngân hàng và lịch sử thay đổi.

### 2. Chức năng "Bỏ duyệt" (Mới)
- ✅ **API**: Kích hoạt `POST /api/Expense/Unapprove/{id}`.
- ✅ **Logic**: 
  - Chỉ hiển thị cho chi phí có trạng thái **Đã duyệt** (Status = 1).
  - Yêu cầu người dùng nhập lý do bỏ duyệt.
  - Sau khi bỏ duyệt, chi phi quay về trạng thái **Chờ duyệt** (Status = 0).
- ✅ **Lịch sử**: Tự động ghi nhận lịch sử ` Approved → Pending` kèm lý do.

### 3. Cập nhật Lịch sử thay đổi (ExpenseHistory.vue)
- ✅ **Data Model**: Hỗ trợ `OldStatus`, `OldStatusDisplay`, `NewStatus`, `NewStatusDisplay`.
- ✅ **Logic hiển thị**:
  - Hiển thị dải màu trạng thái mới (NewStatus).
  - Hiển thị mũi tên chuyển đổi trạng thái: `Cũ → Mới`.

### 4. Bố cục & Thiết kế
- ✅ **Layout 9:3**: Chia không gian hiển thị thông tin chính (9 phần) và Lịch sử (3 phần).
- ✅ **Thông tin Ngân hàng**: Hiển thị rõ ràng, thuận tiện cho việc đối soát.

## Workflow v3.1

```
Danh sách chi phí 
      ↓
Click "Xem chi tiết" → Mở Modal (Chỉ xem)
      ↓
Cần thao tác? → Sử dụng Menu Dropdown tại danh sách:
├─ [Phê duyệt]
├─ [Từ chối]
├─ [Bỏ duyệt]
└─ [Thanh toán]
```

## Testing Checklist v3.1

- [ ] **Modal Detail**: Click "Xem chi tiết" mở modal full màn hình, giao diện chỉ gồm thông tin, không có nút bấm hành động.
- [ ] **Actions**: Kiểm tra các hành động Duyệt/Bỏ duyệt vẫn hoạt động bình thường từ menu danh sách.
- [ ] **Unapprove**: Thử bỏ duyệt một chi phí "Đã duyệt" từ danh sách và kiểm tra kết quả.
- [ ] **Bank Info**: Kiểm tra thông tin ngân hàng hiển thị đúng trong modal.

## Files Changed

1. ✅ `src/views/finances/expenses/components/ExpenseDetailModal.vue` (Cập nhật: chỉ xem)
2. ✅ `src/views/finances/expenses/index.vue` (Cập nhật trigger modal)
3. ✅ `src/services/expenseService.js` (Method unapprove)
4. ✅ `src/infrastructure/apiPaths/expensePath.js` (Endpoint unapprove)

## Notes

- Modal chi tiết giờ đây là "Read-only" để tối giản hóa interface khi xem nhanh dữ liệu.
- Mọi thay đổi trạng thái chi phí được thực hiện tập trung tại trang danh sách.
