feat(clients): advanced filter drawer with multi-select state/protocol/inbound + expiry/usage ranges + auto-renew/tg/comment

The old toolbar exposed a single-value Search box, a single bucket
radio, and one Protocol + Inbound dropdown. Real panels with hundreds
of clients across mixed protocols need to slice by combinations
(active + expiring, two specific inbounds, expiring within a window,
high-usage subset, etc.), which the old shape couldn't express.

Backend ClientPageParams now accepts comma-separated multi values for
Filter / Protocol / Inbound and three new structured fields each:
expiry/usage ranges (ms / bytes), and three trinary toggles
(AutoRenew / HasTgID / HasComment with on/off, yes/no). The free-text
search predicate also picks up UUID / Password / Auth, which were
previously invisible to search.

Frontend introduces a dedicated FilterDrawer (multi-select for
state/protocol/inbound, DatePicker.RangePicker for expiry, paired
InputNumbers for usage, radio buttons for the trinary toggles) opened
from a single Filter button with a badge for the active count. Active
filters render as closable chips above the table so the user can drop
them one at a time, with a Clear-all next to the Filter button. The
search box stays inline and always visible.
This commit is contained in:
MHSanaei
2026-05-27 12:54:06 +02:00
parent 5eb80eca8e
commit 3675f88caf
7 changed files with 642 additions and 122 deletions
@@ -33,6 +33,20 @@
flex: 0 0 auto;
}
.filter-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 12px;
padding: 6px 8px;
background: var(--ant-color-fill-quaternary);
border-radius: 8px;
}
.filter-chips .ant-tag {
margin: 0;
}
.dot {
display: inline-block;
width: 8px;