From 91f325eca65784e046a2854675c12aa1662510c6 Mon Sep 17 00:00:00 2001 From: MHSanaei Date: Tue, 2 Jun 2026 14:23:52 +0200 Subject: [PATCH] feat(clients): show filtered count in clients list Surface a "Showing X of Y" counter in the clients filter bar that appears whenever a search term or any filter is active, using the server-provided filtered and total counts. Added the showingCount string across all 13 locales. Closes #4808 --- frontend/src/pages/clients/ClientsPage.css | 7 +++++++ frontend/src/pages/clients/ClientsPage.tsx | 7 ++++++- web/translation/ar-EG.json | 1 + web/translation/en-US.json | 1 + web/translation/es-ES.json | 1 + web/translation/fa-IR.json | 1 + web/translation/id-ID.json | 1 + web/translation/ja-JP.json | 1 + web/translation/pt-BR.json | 1 + web/translation/ru-RU.json | 1 + web/translation/tr-TR.json | 1 + web/translation/uk-UA.json | 1 + web/translation/vi-VN.json | 1 + web/translation/zh-CN.json | 1 + web/translation/zh-TW.json | 1 + 15 files changed, 26 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/clients/ClientsPage.css b/frontend/src/pages/clients/ClientsPage.css index 085ce490..a412ebee 100644 --- a/frontend/src/pages/clients/ClientsPage.css +++ b/frontend/src/pages/clients/ClientsPage.css @@ -33,6 +33,13 @@ flex: 0 0 auto; } +.filter-count { + margin-inline-start: auto; + color: var(--ant-color-text-secondary); + font-size: 13px; + white-space: nowrap; +} + .filter-chips { display: flex; flex-wrap: wrap; diff --git a/frontend/src/pages/clients/ClientsPage.tsx b/frontend/src/pages/clients/ClientsPage.tsx index 3e21f34c..44eb4986 100644 --- a/frontend/src/pages/clients/ClientsPage.tsx +++ b/frontend/src/pages/clients/ClientsPage.tsx @@ -188,7 +188,7 @@ export default function ClientsPage() { useEffect(() => { setMessageInstance(messageApi); }, [messageApi]); const { - clients, filtered, + clients, total, filtered, summary: serverSummary, allGroups, setQuery, @@ -993,6 +993,11 @@ export default function ClientsPage() { {t('pages.clients.clearAllFilters')} )} + {(activeCount > 0 || debouncedSearch.trim().length > 0) && ( + + {t('pages.clients.showingCount', { shown: filtered, total })} + + )} {activeCount > 0 && ( diff --git a/web/translation/ar-EG.json b/web/translation/ar-EG.json index a03b2d51..74cb3420 100644 --- a/web/translation/ar-EG.json +++ b/web/translation/ar-EG.json @@ -643,6 +643,7 @@ "searchPlaceholder": "ابحث بالبريد، التعليق، sub ID، UUID، كلمة المرور، auth…", "filterTitle": "تصفية العملاء", "clearAllFilters": "مسح الكل", + "showingCount": "عرض {shown} من {total}", "sortOldest": "الأقدم أولاً", "sortNewest": "الأحدث أولاً", "sortRecentlyUpdated": "محدّث مؤخراً", diff --git a/web/translation/en-US.json b/web/translation/en-US.json index a5d90bc5..09c3bd14 100644 --- a/web/translation/en-US.json +++ b/web/translation/en-US.json @@ -643,6 +643,7 @@ "searchPlaceholder": "Search email, comment, sub ID, UUID, password, auth…", "filterTitle": "Filter clients", "clearAllFilters": "Clear all", + "showingCount": "Showing {shown} of {total}", "sortOldest": "Oldest first", "sortNewest": "Newest first", "sortRecentlyUpdated": "Recently updated", diff --git a/web/translation/es-ES.json b/web/translation/es-ES.json index 70b2915c..baf0703e 100644 --- a/web/translation/es-ES.json +++ b/web/translation/es-ES.json @@ -643,6 +643,7 @@ "searchPlaceholder": "Buscar email, comentario, sub ID, UUID, contraseña, auth…", "filterTitle": "Filtrar clientes", "clearAllFilters": "Limpiar todo", + "showingCount": "Mostrando {shown} de {total}", "sortOldest": "Más antiguos", "sortNewest": "Más recientes", "sortRecentlyUpdated": "Recientemente actualizados", diff --git a/web/translation/fa-IR.json b/web/translation/fa-IR.json index a40bbe60..ae9af552 100644 --- a/web/translation/fa-IR.json +++ b/web/translation/fa-IR.json @@ -643,6 +643,7 @@ "searchPlaceholder": "جستجوی ایمیل، توضیح، Sub ID، UUID، رمز، احراز...", "filterTitle": "فیلتر کاربران", "clearAllFilters": "پاک کردن همه", + "showingCount": "نمایش {shown} از {total}", "sortOldest": "قدیمی‌ترین", "sortNewest": "جدیدترین", "sortRecentlyUpdated": "اخیراً به‌روزشده", diff --git a/web/translation/id-ID.json b/web/translation/id-ID.json index a880b0db..aa54ea8a 100644 --- a/web/translation/id-ID.json +++ b/web/translation/id-ID.json @@ -643,6 +643,7 @@ "searchPlaceholder": "Cari email, komentar, sub ID, UUID, kata sandi, auth…", "filterTitle": "Filter klien", "clearAllFilters": "Hapus semua", + "showingCount": "Menampilkan {shown} dari {total}", "sortOldest": "Terlama dulu", "sortNewest": "Terbaru dulu", "sortRecentlyUpdated": "Baru saja diperbarui", diff --git a/web/translation/ja-JP.json b/web/translation/ja-JP.json index 1cef2e05..a19c95f5 100644 --- a/web/translation/ja-JP.json +++ b/web/translation/ja-JP.json @@ -643,6 +643,7 @@ "searchPlaceholder": "メール、コメント、sub ID、UUID、パスワード、auth を検索…", "filterTitle": "クライアントをフィルタ", "clearAllFilters": "すべてクリア", + "showingCount": "{total} 件中 {shown} 件を表示", "sortOldest": "古い順", "sortNewest": "新しい順", "sortRecentlyUpdated": "最近更新", diff --git a/web/translation/pt-BR.json b/web/translation/pt-BR.json index 6d79030f..0315f6a8 100644 --- a/web/translation/pt-BR.json +++ b/web/translation/pt-BR.json @@ -643,6 +643,7 @@ "searchPlaceholder": "Buscar email, comentário, sub ID, UUID, senha, auth…", "filterTitle": "Filtrar clientes", "clearAllFilters": "Limpar tudo", + "showingCount": "Mostrando {shown} de {total}", "sortOldest": "Mais antigos primeiro", "sortNewest": "Mais novos primeiro", "sortRecentlyUpdated": "Atualizados recentemente", diff --git a/web/translation/ru-RU.json b/web/translation/ru-RU.json index f1c9c0cb..a936c420 100644 --- a/web/translation/ru-RU.json +++ b/web/translation/ru-RU.json @@ -643,6 +643,7 @@ "searchPlaceholder": "Поиск email, комментария, sub ID, UUID, пароля, auth…", "filterTitle": "Фильтр клиентов", "clearAllFilters": "Очистить все", + "showingCount": "Показано {shown} из {total}", "sortOldest": "Сначала старые", "sortNewest": "Сначала новые", "sortRecentlyUpdated": "Недавно обновлены", diff --git a/web/translation/tr-TR.json b/web/translation/tr-TR.json index 515e54d1..1d221a90 100644 --- a/web/translation/tr-TR.json +++ b/web/translation/tr-TR.json @@ -643,6 +643,7 @@ "searchPlaceholder": "Email, yorum, sub ID, UUID, parola, auth ara…", "filterTitle": "İstemcileri filtrele", "clearAllFilters": "Tümünü temizle", + "showingCount": "{total} içinden {shown} gösteriliyor", "sortOldest": "Önce en eski", "sortNewest": "Önce en yeni", "sortRecentlyUpdated": "Son güncellenen", diff --git a/web/translation/uk-UA.json b/web/translation/uk-UA.json index ce907b5a..bfcaa821 100644 --- a/web/translation/uk-UA.json +++ b/web/translation/uk-UA.json @@ -643,6 +643,7 @@ "searchPlaceholder": "Пошук email, коментаря, sub ID, UUID, паролю, auth…", "filterTitle": "Фільтр клієнтів", "clearAllFilters": "Очистити все", + "showingCount": "Показано {shown} з {total}", "sortOldest": "Спочатку старі", "sortNewest": "Спочатку нові", "sortRecentlyUpdated": "Нещодавно оновлені", diff --git a/web/translation/vi-VN.json b/web/translation/vi-VN.json index 98a9f214..9c24b6be 100644 --- a/web/translation/vi-VN.json +++ b/web/translation/vi-VN.json @@ -643,6 +643,7 @@ "searchPlaceholder": "Tìm email, ghi chú, sub ID, UUID, mật khẩu, auth…", "filterTitle": "Lọc client", "clearAllFilters": "Xóa tất cả", + "showingCount": "Hiển thị {shown} trên {total}", "sortOldest": "Cũ nhất trước", "sortNewest": "Mới nhất trước", "sortRecentlyUpdated": "Gần đây cập nhật", diff --git a/web/translation/zh-CN.json b/web/translation/zh-CN.json index 34ae8dc5..6d5767cf 100644 --- a/web/translation/zh-CN.json +++ b/web/translation/zh-CN.json @@ -643,6 +643,7 @@ "searchPlaceholder": "搜索邮箱、备注、sub ID、UUID、密码、auth…", "filterTitle": "筛选客户端", "clearAllFilters": "清除全部", + "showingCount": "显示 {shown} / {total}", "sortOldest": "最旧优先", "sortNewest": "最新优先", "sortRecentlyUpdated": "最近更新", diff --git a/web/translation/zh-TW.json b/web/translation/zh-TW.json index 499aaef1..8a5bbed9 100644 --- a/web/translation/zh-TW.json +++ b/web/translation/zh-TW.json @@ -643,6 +643,7 @@ "searchPlaceholder": "搜尋電子郵件、備註、sub ID、UUID、密碼、auth…", "filterTitle": "篩選客戶端", "clearAllFilters": "清除全部", + "showingCount": "顯示 {shown} / {total}", "sortOldest": "最舊優先", "sortNewest": "最新優先", "sortRecentlyUpdated": "最近更新",