FilterBarPremium Pattern

Codebase có đang dùng Filter Pattern không?

✅ Có — Pattern tên: Config-Driven Filter Bar

Codebase đã có pattern filter hoàn chỉnh và đang được dùng rộng rãi (~20 module).

Pattern hoạt động như thế nào

3 lớp rõ ràng:

FilterType     →   FilterBarPremium      →   API Layer
(TypeScript)       (Config-Driven UI)        (server-side filter)

YarnReceiptsFilter   schema: [{              useYarnReceiptList(filters)
{ search, status }     key: 'search',    →   → yarn-receipts.api.ts
}                        type: 'search'      → Supabase query
                       }, {
                         key: 'status',
                         type: 'combobox'
                       }]

Điểm đặc biệt của FilterBarPremium:

Debounce 500ms tích hợp sẵn cho search field
Auto-detect hasActiveFilter → tự hiện nút "Xóa bộ lọc"
Hỗ trợ 3 loại field: search | combobox | date

Module đang dùng pattern chuẩn

Module	Dùng FilterBarPremium	Filter Type
YarnReceipts	✅	search + status
Orders	✅	search + status + date
Quotations	✅	search + status + customer
WorkOrders	✅	search + status
Customers	✅	search + source
Employees	✅	search + status
...12 module khác	✅	—

❌ Module KHÔNG dùng pattern: Operations

// OperationsPage.tsx — tự làm thủ công, không dùng FilterBarPremium
const [search, setSearch] = useState('');
const [assigneeFilter, setAssigneeFilter] = useState<string | undefined>();

// Filter logic nhúng trong hook DnD — sai kiến trúc
taskPool.filter(task =>
  task.title.includes(search) && task.assignee_id === assigneeFilter
)

Cần thêm gì cho Operations

Vì pattern đã có sẵn, không cần tạo mới — chỉ cần adopt:

Tạo TasksFilter type trong types.ts
Tách filter ra khỏi hook DnD → useTaskFilters.ts
Dùng FilterBarPremium với schema config thay vì tự render SearchInput + Combobox

export type TasksFilter = {
  search?: string;
  assignee_id?: string;
  priority?: TaskPriority;
  task_type?: TaskType;
  due?: 'overdue' | 'today' | 'this_week';
};

Hashtags: #ERPDevelopment #ReactJS #TypeScript #FilterPattern #FrontendArchitecture #ConfigDriven #Supabase #CleanCode #WebDevelopment #UIComponent