```
## Stats Cards
Stats cards display key metrics in a 4-column grid layout.
### Structure
```html
Label
0
```
### Color Options
| Color | Use Case | Example |
|-------|----------|---------|
| `blue` | Total counts | Total Users, Total Companies |
| `green` | Positive status | Active, Verified |
| `red` | Negative status | Inactive, Errors |
| `orange` | Special/Admin | Admin users, Warnings |
| `purple` | Primary/Vendors | Active vendors, Main metrics |
### Icon Style
- Icons should be inside a **circular** container (`rounded-full`)
- Icon size: `w-5 h-5`
- Container padding: `p-3`
## Search & Filters Bar
The search and filters bar provides filtering capabilities for list pages.
### Structure
```html
```
### JavaScript Implementation
```javascript
// State
filters: {
search: '',
status: '',
type: ''
},
// Debounced search function
debouncedSearch() {
if (this._searchTimeout) {
clearTimeout(this._searchTimeout);
}
this._searchTimeout = setTimeout(() => {
this.pagination.page = 1; // Reset to first page
this.loadData();
}, 300);
},
// Load data with filters
async loadData() {
const params = new URLSearchParams();
params.append('page', this.pagination.page);
params.append('per_page', this.pagination.per_page);
if (this.filters.search) {
params.append('search', this.filters.search);
}
if (this.filters.status) {
params.append('status', this.filters.status);
}
const response = await apiClient.get(`/admin/resource?${params}`);
// Handle response...
}
```
### Backend API Support
The API endpoint should support these query parameters:
| Parameter | Type | Description |
|-----------|------|-------------|
| `page` | int | Page number (1-based) |
| `per_page` | int | Items per page |
| `search` | string | Search term (searches multiple fields) |
| `{filter}` | string | Filter by specific field |
Example API implementation:
```python
@router.get("", response_model=ListResponse)
def get_all(
page: int = Query(1, ge=1),
per_page: int = Query(10, ge=1, le=100),
search: str = Query("", description="Search term"),
status: str = Query("", description="Filter by status"),
db: Session = Depends(get_db),
):
query = db.query(Model)
# Apply search
if search:
search_term = f"%{search.lower()}%"
query = query.filter(
(Model.name.ilike(search_term)) |
(Model.email.ilike(search_term))
)
# Apply filters
if status:
query = query.filter(Model.status == status)
# Pagination
total = query.count()
items = query.offset((page - 1) * per_page).limit(per_page).all()
return ListResponse(items=items, total=total, page=page, ...)
```
## Data Table
### Structure
```html
Column
Actions
```
### Action Buttons
Standard action buttons for table rows:
```html
```
### Status Badges
```html
```
## Loading & Error States
### Loading State
```html