# Demo Data cho AppConfig

## 🧪 Test Data

### Sample AppConfig Records:

```json
[
  {
    "Key": "SEO.HomePage.Title",
    "Value": "LADA Express - Dịch vụ chuyển phát nhanh hàng đầu Việt Nam",
    "Description": "Tiêu đề SEO cho trang chủ website"
  },
  {
    "Key": "SEO.HomePage.Description",
    "Value": "LADA Express cung cấp dịch vụ chuyển phát nhanh, giao hàng tận nơi với mạng lưới phủ sóng toàn quốc. Cam kết giao hàng nhanh chóng, an toàn.",
    "Description": "Mô tả SEO cho trang chủ website"
  },
  {
    "Key": "System.MaxFileUploadSize",
    "Value": "10485760",
    "Description": "Kích thước tối đa file upload (bytes) - 10MB"
  },
  {
    "Key": "Email.SMTP.Host",
    "Value": "smtp.gmail.com",
    "Description": "SMTP server host cho gửi email"
  },
  {
    "Key": "Email.SMTP.Port",
    "Value": "587",
    "Description": "SMTP server port"
  },
  {
    "Key": "Payment.VNPay.TmnCode",
    "Value": "LADA2024",
    "Description": "Mã terminal VNPay"
  },
  {
    "Key": "Cache.DefaultExpiration",
    "Value": "3600",
    "Description": "Thời gian cache mặc định (giây) - 1 giờ"
  },
  {
    "Key": "API.RateLimit.RequestsPerMinute",
    "Value": "100",
    "Description": "Giới hạn số request API per minute"
  },
  {
    "Key": "UI.Theme.PrimaryColor",
    "Value": "#007bff",
    "Description": "Màu chủ đạo của giao diện"
  },
  {
    "Key": "Business.WorkingHours.Start",
    "Value": "08:00",
    "Description": "Giờ bắt đầu làm việc"
  },
  {
    "Key": "Business.WorkingHours.End",
    "Value": "18:00",
    "Description": "Giờ kết thúc làm việc"
  },
  {
    "Key": "Notification.SMS.Provider",
    "Value": "Viettel",
    "Description": "Nhà cung cấp dịch vụ SMS"
  }
]
```

## 🔧 Test Scenarios

### 1. Test Search Functionality:
- Tìm kiếm với Key: "SEO"
- Tìm kiếm với Value: "LADA"
- Tìm kiếm với date range
- Test pagination với nhiều records

### 2. Test CRUD Operations:

#### Create New Config:
```json
{
  "Key": "Test.NewConfig",
  "Value": "Test Value",
  "Description": "This is a test configuration"
}
```

#### Update Existing Config:
- Chọn một config có sẵn
- Thay đổi Value và Description
- Verify Key không thể thay đổi

#### Delete Config:
- Chọn config test để xóa
- Verify confirmation dialog
- Check record bị xóa khỏi list

### 3. Test Validation:

#### Invalid Key Patterns:
- `"Invalid Key!"` (có dấu cách và ký tự đặc biệt)
- `"key with spaces"` (có dấu cách)
- `"key@domain.com"` (có ký tự @)

#### Valid Key Patterns:
- `"Valid.Key.Name"`
- `"valid_key_name"`
- `"valid-key-name"`
- `"ValidKey123"`

#### Length Validation:
- Key > 512 characters
- Value > 1024 characters  
- Description > 2048 characters

### 4. Test Cache Reload:
- Click "Reload Cache" button
- Verify loading state
- Check success/error message

## 🎯 Expected Behaviors

### Search Results:
- Results should be paginated
- Search should be case-insensitive
- Date range filter should work correctly
- Reset button should clear all filters

### Form Validation:
- Required fields should show error messages
- Character limits should be enforced
- Key pattern validation should work
- Form should prevent submission with invalid data

### CRUD Operations:
- Create should add new record to list
- Update should modify existing record
- Delete should remove record with confirmation
- All operations should show appropriate toast messages

### Cache Management:
- Reload cache should show loading state
- Success/error messages should be displayed
- Operation should not affect the current list view

## 🐛 Common Issues to Test

### Error Scenarios:
1. **Network Error**: Disconnect internet and test operations
2. **API Error**: Test with invalid API responses
3. **Permission Error**: Test with user lacking permissions
4. **Validation Error**: Test form with invalid data

### Edge Cases:
1. **Empty Search Results**: Search for non-existent data
2. **Large Data Sets**: Test with many records (pagination)
3. **Special Characters**: Test with Unicode characters in values
4. **Concurrent Updates**: Multiple users editing same config

## 📊 Performance Considerations

### Load Testing:
- Test with 1000+ config records
- Verify pagination performance
- Check search response time
- Monitor memory usage during operations

### UI Responsiveness:
- Test on mobile devices
- Verify table scrolling on small screens
- Check form usability on touch devices
- Test dropdown menus on mobile

## ✅ Acceptance Criteria

### Must Have:
- ✅ All CRUD operations work correctly
- ✅ Search and filtering function properly
- ✅ Form validation prevents invalid data
- ✅ Cache reload functionality works
- ✅ Responsive design on all devices
- ✅ Error handling with user-friendly messages

### Nice to Have:
- ✅ Keyboard shortcuts for common actions
- ✅ Bulk operations (select multiple configs)
- ✅ Export/Import functionality
- ✅ Advanced search with multiple criteria
- ✅ Real-time updates via WebSocket

## 🔍 Debug Commands

### Browser Console:
```javascript
// Check current search model
console.log(searchModel);

// Check loaded items
console.log(items);

// Test API directly
fetch('/api/AppConfig/Search', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ page: 1, pageSize: 10 })
}).then(r => r.json()).then(console.log);
```

### Vue DevTools:
- Check reactive data in Components tab
- Monitor API calls in Network tab
- Verify router navigation in Router tab
- Check Pinia store state if used
