# Prompt Templates cho LADA Express

Đây là tập hợp các prompt templates chuẩn để giao tiếp hiệu quả với AI Assistant khi phát triển dự án LADA Express.

## Mục lục

1. [Tạo Table Listing](#1-tạo-table-listing)
2. [Tạo Form](#2-tạo-form)
3. [Tạo Chart](#3-tạo-chart)
4. [Tạo Pinia Store](#4-tạo-pinia-store)
5. [Tạo API Service](#5-tạo-api-service)
6. [Tạo Routes](#6-tạo-routes)
7. [Tạo Component](#7-tạo-component)
8. [Refactor Code](#8-refactor-code)
9. [Fix Bug](#9-fix-bug)
10. [Tạo Module Hoàn Chỉnh](#10-tạo-module-hoàn-chỉnh)

---

## 1. Tạo Table Listing

### Template
```
Tạo trang danh sách [TÊN MODULE]

**Yêu cầu:**
- Route: [đường dẫn, ví dụ: /quan-ly/san-pham]
- Route name: [tên route, ví dụ: ProductList]
- Breadcrumb: [Trang chủ > Module > Danh sách]

**Search & Filter:**
- Keyword: [mô tả, ví dụ: tìm theo tên, mã sản phẩm]
- Date range: [trường nào, ví dụ: ngày tạo]
- Filter 1: [tên filter, ví dụ: Danh mục]
- Filter 2: [tên filter, ví dụ: Trạng thái]

**Hiển thị trong table:**
- Cột 1: [tên cột và dữ liệu]
- Cột 2: [tên cột và dữ liệu]
- Cột 3: [tên cột và dữ liệu]

**Actions:**
- [x] Xem chi tiết
- [x] Chỉnh sửa
- [x] Xóa
- [x] Export Excel
- [ ] [Action khác nếu có]

**API Service:**
- Service: [tên service, ví dụ: productService]
- Search method: [tên method, ví dụ: search]
- Delete method: [tên method, ví dụ: delete]
- Export method: [tên method, ví dụ: exportExcel]
```

### Ví dụ cụ thể
```
Tạo trang danh sách Sản phẩm

**Yêu cầu:**
- Route: /quan-ly/san-pham
- Route name: ProductList
- Breadcrumb: Trang chủ > Quản lý > Sản phẩm

**Search & Filter:**
- Keyword: tìm theo tên sản phẩm, mã SKU
- Date range: ngày tạo
- Filter 1: Danh mục (dropdown)
- Filter 2: Trạng thái (Tất cả/Còn hàng/Hết hàng)

**Hiển thị trong table:**
- Cột 1: STT
- Cột 2: Thông tin sản phẩm (Tên, SKU, Danh mục)
- Cột 3: Giá bán (format currency)
- Cột 4: Tồn kho (số lượng)
- Cột 5: Trạng thái (badge)
- Cột 6: Ngày tạo
- Cột 7: Hành động

**Actions:**
- [x] Xem chi tiết
- [x] Chỉnh sửa
- [x] Xóa
- [x] Export Excel

**API Service:**
- Service: productService
- Search method: search
- Delete method: delete
- Export method: exportExcel
```

---

## 2. Tạo Form

### Template
```
Tạo form [TẠO MỚI/CHỈNH SỬA] [TÊN MODULE]

**Yêu cầu:**
- Route create: [đường dẫn]
- Route edit: [đường dẫn với :id]
- Route name: [tên route create và edit]

**Form Fields:**

1. [Tên field 1]
   - Type: [text/select/date/file/...]
   - Label: [nhãn hiển thị]
   - Validation: [required, min, max, email, ...]
   - Placeholder: [nếu có]

2. [Tên field 2]
   - Type: [...]
   - Label: [...]
   - Validation: [...]
   - Options: [nếu là select, list các options]

[... các fields khác]

**Special Requirements:**
- [ ] File upload (images/documents)
- [ ] Dynamic fields (add/remove rows)
- [ ] Conditional validation
- [ ] Auto-fill data
- [ ] [Yêu cầu đặc biệt khác]

**API Service:**
- Service: [tên service]
- Get by ID: [method name]
- Create: [method name]
- Update: [method name]

**After Submit:**
- Success: [redirect về đâu hoặc làm gì]
- Error: [hiển thị toast error]
```

### Ví dụ cụ thể
```
Tạo form TẠO MỚI/CHỈNH SỬA Sản phẩm

**Yêu cầu:**
- Route create: /quan-ly/san-pham/tao-moi
- Route edit: /quan-ly/san-pham/:id/chinh-sua
- Route name: ProductCreate, ProductEdit

**Form Fields:**

1. Tên sản phẩm
   - Type: text
   - Label: Tên sản phẩm
   - Validation: required, min:3, max:200
   - Placeholder: Nhập tên sản phẩm

2. Mã SKU
   - Type: text
   - Label: Mã SKU
   - Validation: required, unique
   - Placeholder: Nhập mã SKU

3. Danh mục
   - Type: v-select
   - Label: Danh mục
   - Validation: required
   - Options: Load từ API categoryService.getAll()

4. Giá bán
   - Type: number (v-money3)
   - Label: Giá bán
   - Validation: required, min:0

5. Mô tả
   - Type: textarea
   - Label: Mô tả
   - Validation: optional, max:1000

6. Hình ảnh
   - Type: file upload (multiple)
   - Label: Hình ảnh sản phẩm
   - Validation: optional, max:5 files, image only

**Special Requirements:**
- [x] File upload (images)
- [ ] Dynamic fields
- [ ] Conditional validation
- [ ] Auto-fill data

**API Service:**
- Service: productService
- Get by ID: getById
- Create: create
- Update: update

**After Submit:**
- Success: Redirect về ProductList với toast success
- Error: Hiển thị toast error
```

---

## 3. Tạo Chart

### Template
```
Tạo chart [LOẠI CHART] cho [MỤC ĐÍCH]

**Loại chart:**
- [ ] Line Chart
- [ ] Bar Chart
- [ ] Pie Chart
- [ ] Donut Chart
- [ ] Stacked Bar Chart
- [ ] Multi-line Chart

**Dữ liệu:**
- X-axis: [dữ liệu trục X, ví dụ: ngày tháng]
- Y-axis: [dữ liệu trục Y, ví dụ: doanh thu]
- Series: [các series nếu có nhiều]

**Filters:**
- Date range: [có/không]
- Filter 1: [nếu có]
- Filter 2: [nếu có]

**API Service:**
- Service: [tên service]
- Method: [method name]
- Response format: [mô tả cấu trúc data]

**Formatting:**
- Currency: [có/không]
- Number: [có/không]
- Percentage: [có/không]
```

### Ví dụ cụ thể
```
Tạo chart Line Chart cho Doanh thu theo ngày

**Loại chart:**
- [x] Line Chart

**Dữ liệu:**
- X-axis: Ngày (DD/MM/YYYY)
- Y-axis: Doanh thu (VND)
- Series: Doanh thu, Thu hộ, Chi phí

**Filters:**
- Date range: Có (default: tháng hiện tại)
- Filter 1: Loại đơn hàng (dropdown)

**API Service:**
- Service: reportService
- Method: getRevenueByDate
- Response format: Array of { Date, Revenue, Collect, Expense }

**Formatting:**
- Currency: Có (VND)
- Number: Có (thousand separator)
- Percentage: Không
```

---

## 4. Tạo Pinia Store

### Template
```
Tạo Pinia store cho [TÊN MODULE]

**State:**
- [tên state 1]: [kiểu dữ liệu, giá trị mặc định]
- [tên state 2]: [kiểu dữ liệu, giá trị mặc định]
- items: [] (danh sách)
- currentItem: null (item hiện tại)
- loading: false
- error: null

**Getters:**
- [tên getter 1]: [mô tả]
- [tên getter 2]: [mô tả]

**Actions:**
- [ ] loadItems (load danh sách)
- [ ] loadItem (load chi tiết)
- [ ] createItem (tạo mới)
- [ ] updateItem (cập nhật)
- [ ] deleteItem (xóa)
- [ ] [Action khác]

**API Service:**
- Service: [tên service]

**LocalStorage:**
- [ ] Persist state to localStorage
- Fields to persist: [list fields]
```

### Ví dụ cụ thể
```
Tạo Pinia store cho Giỏ hàng

**State:**
- items: [] (danh sách sản phẩm trong giỏ)
- totalAmount: 0
- discount: 0
- loading: false
- error: null

**Getters:**
- itemCount: Tổng số sản phẩm trong giỏ
- subtotal: Tổng tiền trước giảm giá
- total: Tổng tiền sau giảm giá

**Actions:**
- [x] loadCart (load giỏ hàng từ API)
- [x] addItem (thêm sản phẩm vào giỏ)
- [x] updateQuantity (cập nhật số lượng)
- [x] removeItem (xóa sản phẩm khỏi giỏ)
- [x] clearCart (xóa toàn bộ giỏ hàng)
- [x] applyDiscount (áp dụng mã giảm giá)

**API Service:**
- Service: cartService

**LocalStorage:**
- [x] Persist state to localStorage
- Fields to persist: items, discount
```

---

## 5. Tạo API Service

### Template
```
Tạo API service cho [TÊN MODULE]

**Service name:** [tên service file]

**API Endpoints:**

1. Search/List
   - Method: POST
   - Path: [API path]
   - Params: searchModel (Pagination, Sort, Search)

2. Get by ID
   - Method: GET
   - Path: [API path với :id]
   - Params: id

3. Create
   - Method: POST
   - Path: [API path]
   - Params: [object structure]

4. Update
   - Method: PUT
   - Path: [API path với :id]
   - Params: id, [object structure]

5. Delete
   - Method: DELETE
   - Path: [API path với :id]
   - Params: id

6. [Method khác nếu có]
   - Method: [GET/POST/PUT/DELETE]
   - Path: [API path]
   - Params: [params]

**API Path Module:**
- File: infrastructure/apiPaths/[moduleName]Path.js
- Base URL: [environment variable]
```

### Ví dụ cụ thể
```
Tạo API service cho Sản phẩm

**Service name:** productService.js

**API Endpoints:**

1. Search/List
   - Method: POST
   - Path: /api/Product/Search
   - Params: searchModel (Pagination, Sort, Search)

2. Get by ID
   - Method: GET
   - Path: /api/Product/:id
   - Params: id

3. Create
   - Method: POST
   - Path: /api/Product
   - Params: { Name, SKU, CategoryId, Price, Description, Images }

4. Update
   - Method: PUT
   - Path: /api/Product/:id
   - Params: id, { Name, SKU, CategoryId, Price, Description, Images }

5. Delete
   - Method: DELETE
   - Path: /api/Product/:id
   - Params: id

6. Export Excel
   - Method: POST
   - Path: /api/Product/Export
   - Params: searchModel

**API Path Module:**
- File: infrastructure/apiPaths/productPath.js
- Base URL: VITE_API_BASE_URL
```

---

## 6. Tạo Routes

### Template
```
Tạo routes cho module [TÊN MODULE]

**Module routes file:** routers/[moduleName].js

**Routes:**

1. List/Index
   - Name: [route name]
   - Path: [path]
   - Component: [component path]
   - Meta: { title, breadcrumb, roles }

2. Create
   - Name: [route name]
   - Path: [path]
   - Component: [component path]
   - Meta: { title, breadcrumb, roles }

3. Edit
   - Name: [route name]
   - Path: [path với :id]
   - Component: [component path]
   - Props: true
   - Meta: { title, breadcrumb, roles }

4. [Route khác nếu có]

**Permissions:**
- Required roles: [list roles]
```

### Ví dụ cụ thể
```
Tạo routes cho module Sản phẩm

**Module routes file:** routers/product.js

**Routes:**

1. List/Index
   - Name: ProductList
   - Path: /quan-ly/san-pham
   - Component: views/products/index.vue
   - Meta: { title: 'Danh sách sản phẩm', breadcrumb: [...], roles: ['Admin', 'Manager'] }

2. Create
   - Name: ProductCreate
   - Path: /quan-ly/san-pham/tao-moi
   - Component: views/products/form.vue
   - Meta: { title: 'Tạo sản phẩm mới', breadcrumb: [...], roles: ['Admin', 'Manager'] }

3. Edit
   - Name: ProductEdit
   - Path: /quan-ly/san-pham/:id/chinh-sua
   - Component: views/products/form.vue
   - Props: true
   - Meta: { title: 'Chỉnh sửa sản phẩm', breadcrumb: [...], roles: ['Admin', 'Manager'] }

**Permissions:**
- Required roles: Admin, Manager
```

---

## 7. Tạo Component

### Template
```
Tạo component [TÊN COMPONENT]

**Component type:**
- [ ] View component (page)
- [ ] Reusable component
- [ ] Layout component

**Location:** [đường dẫn file]

**Props:**
- [prop name 1]: { type, required, default }
- [prop name 2]: { type, required, default }

**Emits:**
- [event name 1]: [mô tả]
- [event name 2]: [mô tả]

**Features:**
- [ ] [Feature 1]
- [ ] [Feature 2]
- [ ] [Feature 3]

**Dependencies:**
- Services: [list services]
- Components: [list components]
- Stores: [list stores]
```

### Ví dụ cụ thể
```
Tạo component ProductCard

**Component type:**
- [x] Reusable component

**Location:** components/products/ProductCard.vue

**Props:**
- product: { type: Object, required: true }
- showActions: { type: Boolean, required: false, default: true }

**Emits:**
- view: Khi click xem chi tiết
- edit: Khi click chỉnh sửa
- delete: Khi click xóa

**Features:**
- [x] Hiển thị hình ảnh sản phẩm
- [x] Hiển thị tên, giá, SKU
- [x] Badge trạng thái
- [x] Action buttons (view/edit/delete)
- [x] Responsive design

**Dependencies:**
- Services: không
- Components: không
- Stores: không
```

---

## 8. Refactor Code

### Template
```
Refactor [TÊN FILE/MODULE]

**File:** [đường dẫn file]

**Vấn đề hiện tại:**
- [Vấn đề 1]
- [Vấn đề 2]
- [Vấn đề 3]

**Yêu cầu refactor:**
- [ ] [Yêu cầu 1]
- [ ] [Yêu cầu 2]
- [ ] [Yêu cầu 3]

**Patterns cần áp dụng:**
- Skill: [tên skill nếu có]
- Reference: [file tham khảo nếu có]

**Lưu ý:**
- [Lưu ý đặc biệt nếu có]
```

### Ví dụ cụ thể
```
Refactor trang danh sách khách hàng

**File:** views/customers/index.vue

**Vấn đề hiện tại:**
- Không có date range picker
- Pagination không hoạt động đúng
- Thiếu export Excel
- Code không follow pattern chuẩn

**Yêu cầu refactor:**
- [x] Thêm date range picker với DateRangeSidebar
- [x] Fix pagination
- [x] Thêm export Excel
- [x] Refactor theo table-listing-pagination skill

**Patterns cần áp dụng:**
- Skill: table-listing-pagination
- Reference: views/fuelManagement/fuelRefill/index.vue

**Lưu ý:**
- Giữ nguyên API service hiện tại
- Không thay đổi route
```

---

## 9. Fix Bug

### Template
```
Fix bug: [MÔ TẢ NGẮN GỌN]

**File:** [đường dẫn file có bug]

**Mô tả chi tiết:**
[Mô tả chi tiết về bug, khi nào xảy ra, expected vs actual behavior]

**Steps to reproduce:**
1. [Bước 1]
2. [Bước 2]
3. [Bước 3]

**Expected behavior:**
[Hành vi mong đợi]

**Actual behavior:**
[Hành vi thực tế]

**Error message (nếu có):**
```
[Error message hoặc screenshot]
```

**Suspected cause:**
[Nguyên nhân nghi ngờ nếu biết]
```

### Ví dụ cụ thể
```
Fix bug: Date picker không hiển thị đúng khoảng thời gian

**File:** views/reports/orderRevenue.vue

**Mô tả chi tiết:**
Khi chọn khoảng thời gian từ DateRangeSidebar, date picker hiển thị 
"Invalid Date - Invalid Date" thay vì "01/01/2024 - 31/01/2024"

**Steps to reproduce:**
1. Mở trang báo cáo doanh thu
2. Click vào date picker
3. Chọn "Tháng này" từ sidebar
4. Date picker hiển thị "Invalid Date - Invalid Date"

**Expected behavior:**
Date picker hiển thị "01/01/2024 - 31/01/2024"

**Actual behavior:**
Date picker hiển thị "Invalid Date - Invalid Date"

**Error message (nếu có):**
Không có error trong console

**Suspected cause:**
Function formatDate có thể không xử lý đúng format date từ sidebar
```

---

## 10. Tạo Module Hoàn Chỉnh

### Template
```
Tạo module hoàn chỉnh: [TÊN MODULE]

**Module structure:**
```
views/[moduleName]/
├── index.vue          # List page
├── form.vue           # Create/Edit form
└── detail.vue         # Detail view (optional)

services/
└── [moduleName]Service.js

stores/
└── [moduleName]Store.js (optional)

routers/
└── [moduleName].js

infrastructure/apiPaths/
└── [moduleName]Path.js
```

**1. Table Listing (index.vue)**
[Sử dụng template "Tạo Table Listing"]

**2. Form (form.vue)**
[Sử dụng template "Tạo Form"]

**3. API Service**
[Sử dụng template "Tạo API Service"]

**4. Routes**
[Sử dụng template "Tạo Routes"]

**5. Store (optional)**
[Sử dụng template "Tạo Pinia Store" nếu cần]

**6. Additional Features:**
- [ ] [Feature 1]
- [ ] [Feature 2]
```

### Ví dụ cụ thể
```
Tạo module hoàn chỉnh: Quản lý Khách hàng

**Module structure:**
```
views/customers/
├── index.vue          # Danh sách khách hàng
├── form.vue           # Form tạo/sửa
└── detail.vue         # Chi tiết khách hàng

services/
└── customerService.js

routers/
└── customer.js

infrastructure/apiPaths/
└── customerPath.js
```

**1. Table Listing (index.vue)**
- Search: tên, email, số điện thoại
- Filter: loại khách hàng, trạng thái
- Date range: ngày đăng ký
- Columns: STT, Thông tin KH, Loại KH, Ngày đăng ký, Tổng đơn, Hành động
- Actions: Xem, Sửa, Xóa, Export Excel

**2. Form (form.vue)**
Fields:
- Tên khách hàng (required)
- Email (required, email format)
- Số điện thoại (required, Vietnam format)
- Địa chỉ (optional)
- Loại khách hàng (v-select, required)
- Ghi chú (textarea, optional)

**3. API Service**
Methods:
- search(searchModel)
- getById(id)
- create(customer)
- update(id, customer)
- delete(id)
- exportExcel(searchModel)

**4. Routes**
- CustomerList: /khach-hang
- CustomerCreate: /khach-hang/tao-moi
- CustomerEdit: /khach-hang/:id/chinh-sua
Roles: Admin, Sales

**5. Store**
Không cần (sử dụng local state)

**6. Additional Features:**
- [x] Validation form với VeeValidate
- [x] Toast notifications
- [x] Confirmation dialog khi xóa
- [x] Responsive design
```

---

## Tips sử dụng Prompts

### 1. Càng chi tiết càng tốt
Cung cấp đầy đủ thông tin giúp AI tạo code chính xác hơn.

### 2. Tham khảo file mẫu
Nếu có file tương tự, mention file đó: `Tham khảo @[path/to/file.vue]`

### 3. Mention skills
Nếu muốn follow pattern cụ thể: `Áp dụng @table-listing-pagination skill`

### 4. Chia nhỏ task
Với module lớn, chia thành nhiều prompts nhỏ sẽ dễ quản lý hơn.

### 5. Review và feedback
Sau khi AI tạo code, review và cung cấp feedback để điều chỉnh.

---

## Lưu ý

- Các templates này là gợi ý, bạn có thể customize theo nhu cầu
- Không nhất thiết phải điền đầy đủ tất cả fields
- Có thể kết hợp nhiều templates cho task phức tạp
- Luôn mention skills liên quan để AI áp dụng đúng patterns
