# Expenses Module

## Cấu trúc thư mục

```
expenses/
├── components/           # Các component tái sử dụng
│   ├── ExpenseForm.vue          # Form tạo/sửa chi phí
│   ├── ExpenseSearchForm.vue    # Form tìm kiếm chi phí
│   ├── ExpenseStatusBadge.vue   # Badge hiển thị trạng thái
│   └── index.js                 # Export các components
├── index.vue             # Trang danh sách chi phí
├── detail.vue            # Trang chi tiết chi phí
├── create-or-update.vue  # Trang tạo/sửa chi phí
├── index.js              # Export các views
└── README.md             # Tài liệu này
```

## Components

### ExpenseForm
- Form tạo mới hoặc chỉnh sửa chi phí
- Validation với VeeValidate và Yup
- Tích hợp với LadaSelect cho danh mục chi phí

### ExpenseSearchForm
- Form tìm kiếm chi phí
- Hỗ trợ tìm kiếm theo từ khóa, danh mục, trạng thái
- Tích hợp với LadaSelect

### ExpenseStatusBadge
- Hiển thị trạng thái chi phí với màu sắc phù hợp
- Sử dụng constants từ `@/components/expense`

## Views

### index.vue
- Trang danh sách chi phí
- Tích hợp tìm kiếm, phân trang
- Modal tạo/sửa chi phí
- Modal xác nhận xóa

### detail.vue
- Trang chi tiết chi phí
- Hiển thị đầy đủ thông tin chi phí
- Hỗ trợ phê duyệt/từ chối chi phí
- Nút chỉnh sửa

### create-or-update.vue
- Trang tạo mới hoặc chỉnh sửa chi phí
- Sử dụng ExpenseForm component
- Xử lý routing động dựa trên params

## Dependencies

- Vue 3 Composition API
- Vue Router 4
- VeeValidate + Yup
- Vue Toastification
- Bootstrap 5
- LadaSelect component

## Services

- `expenseService`: Xử lý API calls cho chi phí
- `expenseCategoryService`: Xử lý API calls cho danh mục chi phí
- `userService`: Xử lý API calls cho người dùng

## Routing

Các routes được định nghĩa trong router configuration:
- `/quan-ly-chi-phi` - Danh sách chi phí
- `/quan-ly-chi-phi/them-moi` - Tạo mới chi phí
- `/quan-ly-chi-phi/chinh-sua/:id` - Chỉnh sửa chi phí
- `/chi-tiet-chi-phi/:id` - Chi tiết chi phí
