From 85983eec1a357567ba1a5905f74848c70762a869 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Fri, 12 Jun 2026 16:22:30 +0200
Subject: [PATCH] refactor(groups): restyle traffic summary into
 upload/download + usage cards

Split the group traffic summary into two inbound-style cards: a "Total
upload / download" card with up/down arrow icons and a "Total Usage" card
with the pie icon. Add the totalUpDown label across all locales.
---
 frontend/src/pages/groups/GroupsPage.tsx | 26 ++++++++++++++++--------
 internal/web/translation/ar-EG.json      |  1 +
 internal/web/translation/en-US.json      |  1 +
 internal/web/translation/es-ES.json      |  1 +
 internal/web/translation/fa-IR.json      |  1 +
 internal/web/translation/id-ID.json      |  1 +
 internal/web/translation/ja-JP.json      |  1 +
 internal/web/translation/pt-BR.json      |  1 +
 internal/web/translation/ru-RU.json      |  1 +
 internal/web/translation/tr-TR.json      |  1 +
 internal/web/translation/uk-UA.json      |  1 +
 internal/web/translation/vi-VN.json      |  1 +
 internal/web/translation/zh-CN.json      |  1 +
 internal/web/translation/zh-TW.json      |  1 +
 14 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/groups/GroupsPage.tsx b/frontend/src/pages/groups/GroupsPage.tsx
index e8ce06957..bb952fcd3 100644
--- a/frontend/src/pages/groups/GroupsPage.tsx
+++ b/frontend/src/pages/groups/GroupsPage.tsx
@@ -29,6 +29,7 @@ import {
   EditOutlined,
   LinkOutlined,
   MoreOutlined,
+  PieChartOutlined,
   PlusOutlined,
   RetweetOutlined,
   TagsOutlined,
@@ -480,30 +481,39 @@ export default function GroupsPage() {
                   <Col span={24}>
                     <Card size="small" hoverable className="summary-card">
                       <Row gutter={[16, isMobile ? 16 : 12]}>
-                        <Col xs={12} sm={8}>
+                        <Col xs={12} sm={12} md={6}>
                           <Statistic
                             title={t('pages.groups.totalGroups')}
                             value={String(totalGroups)}
                             prefix={<TagsOutlined />}
                           />
                         </Col>
-                        <Col xs={12} sm={8}>
+                        <Col xs={12} sm={12} md={6}>
                           <Statistic
                             title={t('pages.groups.totalGroupedClients')}
                             value={String(totalClients)}
                             prefix={<TeamOutlined />}
                           />
                         </Col>
-                        <Col xs={24} sm={8}>
+                        <Col xs={12} sm={12} md={6}>
+                          <Statistic
+                            title={t('pages.groups.totalUpDown')}
+                            value={0}
+                            formatter={() => (
+                              <span>
+                                <ArrowUpOutlined /> {SizeFormatter.sizeFormat(totalUpload)}
+                                {' / '}
+                                <ArrowDownOutlined /> {SizeFormatter.sizeFormat(totalDownload)}
+                              </span>
+                            )}
+                          />
+                        </Col>
+                        <Col xs={12} sm={12} md={6}>
                           <Statistic
                             title={t('pages.groups.totalTraffic')}
                             value={SizeFormatter.sizeFormat(totalTraffic)}
-                            prefix={<RetweetOutlined />}
+                            prefix={<PieChartOutlined />}
                           />
-                          <Space size={16} style={{ marginTop: 4, color: 'var(--ant-color-text-secondary)', fontSize: 13 }}>
-                            <span><ArrowUpOutlined /> {SizeFormatter.sizeFormat(totalUpload)}</span>
-                            <span><ArrowDownOutlined /> {SizeFormatter.sizeFormat(totalDownload)}</span>
-                          </Space>
                         </Col>
                       </Row>
                     </Card>
diff --git a/internal/web/translation/ar-EG.json b/internal/web/translation/ar-EG.json
index 2956a042a..e781bb81e 100644
--- a/internal/web/translation/ar-EG.json
+++ b/internal/web/translation/ar-EG.json
@@ -819,6 +819,7 @@
       "upload": "رفع",
       "download": "تنزيل",
       "totalTraffic": "إجمالي حركة المرور",
+      "totalUpDown": "إجمالي الرفع / التنزيل",
       "addGroup": "إضافة مجموعة",
       "createSuccess": "تم إنشاء المجموعة «{name}».",
       "rename": "إعادة تسمية",
diff --git a/internal/web/translation/en-US.json b/internal/web/translation/en-US.json
index c7dc19cd9..128a204fd 100644
--- a/internal/web/translation/en-US.json
+++ b/internal/web/translation/en-US.json
@@ -820,6 +820,7 @@
       "upload": "Upload",
       "download": "Download",
       "totalTraffic": "Total traffic",
+      "totalUpDown": "Total upload / download",
       "addGroup": "Add Group",
       "createSuccess": "Group \"{name}\" created.",
       "rename": "Rename",
diff --git a/internal/web/translation/es-ES.json b/internal/web/translation/es-ES.json
index 2226aaf12..eddf5562f 100644
--- a/internal/web/translation/es-ES.json
+++ b/internal/web/translation/es-ES.json
@@ -819,6 +819,7 @@
       "upload": "Subida",
       "download": "Bajada",
       "totalTraffic": "Tráfico total",
+      "totalUpDown": "Subida / bajada total",
       "addGroup": "Añadir grupo",
       "createSuccess": "Grupo «{name}» creado.",
       "rename": "Renombrar",
diff --git a/internal/web/translation/fa-IR.json b/internal/web/translation/fa-IR.json
index 1980cb79c..e9b08bc32 100644
--- a/internal/web/translation/fa-IR.json
+++ b/internal/web/translation/fa-IR.json
@@ -819,6 +819,7 @@
       "upload": "آپلود",
       "download": "دانلود",
       "totalTraffic": "مجموع ترافیک",
+      "totalUpDown": "مجموع آپلود / دانلود",
       "addGroup": "افزودن گروه",
       "createSuccess": "گروه «{name}» ایجاد شد.",
       "rename": "تغییر نام",
diff --git a/internal/web/translation/id-ID.json b/internal/web/translation/id-ID.json
index ad3075bb2..aa3273be4 100644
--- a/internal/web/translation/id-ID.json
+++ b/internal/web/translation/id-ID.json
@@ -819,6 +819,7 @@
       "upload": "Unggah",
       "download": "Unduh",
       "totalTraffic": "Total trafik",
+      "totalUpDown": "Total unggah / unduh",
       "addGroup": "Tambah grup",
       "createSuccess": "Grup «{name}» dibuat.",
       "rename": "Ubah nama",
diff --git a/internal/web/translation/ja-JP.json b/internal/web/translation/ja-JP.json
index 6d02d4ff7..a0bbb3f11 100644
--- a/internal/web/translation/ja-JP.json
+++ b/internal/web/translation/ja-JP.json
@@ -819,6 +819,7 @@
       "upload": "アップロード",
       "download": "ダウンロード",
       "totalTraffic": "合計トラフィック",
+      "totalUpDown": "合計アップロード / ダウンロード",
       "addGroup": "グループ追加",
       "createSuccess": "グループ「{name}」を作成しました。",
       "rename": "名前変更",
diff --git a/internal/web/translation/pt-BR.json b/internal/web/translation/pt-BR.json
index 3567ad0bd..b52e6c0bb 100644
--- a/internal/web/translation/pt-BR.json
+++ b/internal/web/translation/pt-BR.json
@@ -819,6 +819,7 @@
       "upload": "Envio",
       "download": "Recebimento",
       "totalTraffic": "Tráfego total",
+      "totalUpDown": "Total de envio / recebimento",
       "addGroup": "Adicionar grupo",
       "createSuccess": "Grupo «{name}» criado.",
       "rename": "Renomear",
diff --git a/internal/web/translation/ru-RU.json b/internal/web/translation/ru-RU.json
index 58f2b1c39..60a85ca59 100644
--- a/internal/web/translation/ru-RU.json
+++ b/internal/web/translation/ru-RU.json
@@ -819,6 +819,7 @@
       "upload": "Отправлено",
       "download": "Получено",
       "totalTraffic": "Общий трафик",
+      "totalUpDown": "Всего отправлено / получено",
       "addGroup": "Добавить группу",
       "createSuccess": "Группа «{name}» создана.",
       "rename": "Переименовать",
diff --git a/internal/web/translation/tr-TR.json b/internal/web/translation/tr-TR.json
index b55107647..0c10b3e96 100644
--- a/internal/web/translation/tr-TR.json
+++ b/internal/web/translation/tr-TR.json
@@ -820,6 +820,7 @@
       "upload": "Yükleme",
       "download": "İndirme",
       "totalTraffic": "Toplam trafik",
+      "totalUpDown": "Toplam yükleme / indirme",
       "addGroup": "Grup ekle",
       "createSuccess": "«{name}» grubu oluşturuldu.",
       "rename": "Yeniden adlandır",
diff --git a/internal/web/translation/uk-UA.json b/internal/web/translation/uk-UA.json
index 29a7fb06e..a18beaa24 100644
--- a/internal/web/translation/uk-UA.json
+++ b/internal/web/translation/uk-UA.json
@@ -819,6 +819,7 @@
       "upload": "Вивантаження",
       "download": "Завантаження",
       "totalTraffic": "Загальний трафік",
+      "totalUpDown": "Всього вивантажено / завантажено",
       "addGroup": "Додати групу",
       "createSuccess": "Групу «{name}» створено.",
       "rename": "Перейменувати",
diff --git a/internal/web/translation/vi-VN.json b/internal/web/translation/vi-VN.json
index aaa16155f..751eb66d8 100644
--- a/internal/web/translation/vi-VN.json
+++ b/internal/web/translation/vi-VN.json
@@ -819,6 +819,7 @@
       "upload": "Tải lên",
       "download": "Tải xuống",
       "totalTraffic": "Tổng lưu lượng",
+      "totalUpDown": "Tổng tải lên / tải xuống",
       "addGroup": "Thêm nhóm",
       "createSuccess": "Đã tạo nhóm «{name}».",
       "rename": "Đổi tên",
diff --git a/internal/web/translation/zh-CN.json b/internal/web/translation/zh-CN.json
index 946678a0c..70969ac38 100644
--- a/internal/web/translation/zh-CN.json
+++ b/internal/web/translation/zh-CN.json
@@ -819,6 +819,7 @@
       "upload": "上传",
       "download": "下载",
       "totalTraffic": "总流量",
+      "totalUpDown": "总上传 / 下载",
       "addGroup": "添加分组",
       "createSuccess": "已创建分组 “{name}”。",
       "rename": "重命名",
diff --git a/internal/web/translation/zh-TW.json b/internal/web/translation/zh-TW.json
index 5485693cb..f6cdeb836 100644
--- a/internal/web/translation/zh-TW.json
+++ b/internal/web/translation/zh-TW.json
@@ -819,6 +819,7 @@
       "upload": "上傳",
       "download": "下載",
       "totalTraffic": "總流量",
+      "totalUpDown": "總上傳 / 下載",
       "addGroup": "新增群組",
       "createSuccess": "已建立群組「{name}」。",
       "rename": "重新命名",