# Đề xuất bổ sung tính năng cho Layout Component

## ✅ Đã triển khai

1. **Keyboard Shortcuts**
   - `Ctrl/Cmd + K`: Focus vào search input
   - `Ctrl/Cmd + B`: Toggle sidebar
   - `Ctrl/Cmd + P`: Mở profile modal

2. **Code Organization**
   - Tách thành sub-components
   - Custom hooks cho logic phức tạp
   - Constants file riêng

3. **Performance Optimizations**
   - React.memo cho tất cả components
   - useMemo và useCallback
   - Tối ưu re-renders

## 🚀 Đề xuất bổ sung

### 1. Search Functionality (Ưu tiên cao)

**Hiện tại**: Search input chỉ là placeholder

**Đề xuất**:
- Implement global search với debounce
- Search trong:
  - Assets
  - Tickets/Work Orders
  - Projects
  - Users
- Hiển thị kết quả trong dropdown
- Keyboard navigation trong kết quả tìm kiếm
- Recent searches
- Search history

**Implementation**:
```typescript
// hooks/useGlobalSearch.ts
const useGlobalSearch = () => {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<SearchResult[]>([]);
  const [isOpen, setIsOpen] = useState(false);
  
  // Debounced search
  // Multi-source search
  // Keyboard navigation
};
```

### 2. Breadcrumbs Navigation (Ưu tiên trung bình)

**Đề xuất**:
- Hiển thị breadcrumbs dựa trên route hiện tại
- Click để navigate
- Responsive (ẩn trên mobile nếu quá dài)

**Example**:
```
Dashboard > Quản lý Tài sản > Hồ sơ tài sản > Asset Detail
```

### 3. Recent Pages History (Ưu tiên trung bình)

**Đề xuất**:
- Lưu lịch sử các trang đã truy cập
- Hiển thị trong dropdown menu
- Quick access với keyboard shortcut (`Ctrl/Cmd + H`)

### 4. Quick Actions Menu (Ưu tiên thấp)

**Đề xuất**:
- Floating action button hoặc command palette
- Các actions phổ biến:
  - Tạo ticket mới
  - Tạo work order
  - Tạo asset mới
  - Export report
- Mở bằng `Ctrl/Cmd + Shift + P` (giống VS Code)

### 5. User Preferences (Ưu tiên thấp)

**Đề xuất**:
- Lưu preferences trong localStorage:
  - Sidebar width
  - Default expanded menu groups
  - Theme preference (đã có)
  - Language preference
  - Date format
  - Number format

### 6. Notifications Enhancements (Ưu tiên trung bình)

**Đề xuất**:
- Real-time notifications với WebSocket
- Notification sounds (có thể tắt)
- Desktop notifications (browser API)
- Filter notifications theo type/severity
- Mark as read/unread individually
- Archive notifications

### 7. Sidebar Enhancements (Ưu tiên thấp)

**Đề xuất**:
- Pin favorite menu items
- Custom menu order (drag & drop)
- Collapse all/expand all
- Search trong menu items
- Recent menu items section

### 8. Profile Modal Enhancements (Ưu tiên thấp)

**Đề xuất**:
- Upload avatar image
- Two-factor authentication setup
- API keys management
- Connected devices/sessions
- Activity statistics (charts)

### 9. Project Selector Enhancements (Ưu tiên thấp)

**Đề xuất**:
- Search trong projects
- Favorite projects
- Recent projects
- Project quick stats (tooltip)
- Project status indicator

### 10. Accessibility Improvements (Ưu tiên cao)

**Đề xuất**:
- Full keyboard navigation
- Screen reader support
- Focus management
- Skip to content link
- High contrast mode
- Font size adjustment

### 11. Performance Monitoring (Ưu tiên thấp)

**Đề xuất**:
- Performance metrics
- Render time tracking
- Bundle size monitoring
- Lazy load components không cần thiết ngay

### 12. Multi-language Support (Ưu tiên trung bình)

**Đề xuất**:
- i18n integration
- Language switcher trong topbar
- RTL support
- Date/time localization

## Implementation Priority

### Phase 1 (Ngay lập tức)
1. ✅ Keyboard shortcuts
2. ✅ Code refactoring
3. 🔄 Search functionality (cần implement)

### Phase 2 (Trong 1-2 tuần)
1. Breadcrumbs navigation
2. Recent pages history
3. Notifications enhancements

### Phase 3 (Trong 1 tháng)
1. Quick actions menu
2. User preferences
3. Profile modal enhancements

### Phase 4 (Future)
1. Sidebar enhancements
2. Project selector enhancements
3. Performance monitoring
4. Multi-language support

## Notes

- Tất cả các tính năng mới nên có:
  - TypeScript types
  - Unit tests
  - Accessibility support
  - Mobile responsiveness
  - Dark mode support
