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.
This commit is contained in:
MHSanaei
2026-06-12 16:22:30 +02:00
parent 5af02265ec
commit 85983eec1a
14 changed files with 31 additions and 8 deletions
+18 -8
View File
@@ -29,6 +29,7 @@ import {
EditOutlined, EditOutlined,
LinkOutlined, LinkOutlined,
MoreOutlined, MoreOutlined,
PieChartOutlined,
PlusOutlined, PlusOutlined,
RetweetOutlined, RetweetOutlined,
TagsOutlined, TagsOutlined,
@@ -480,30 +481,39 @@ export default function GroupsPage() {
<Col span={24}> <Col span={24}>
<Card size="small" hoverable className="summary-card"> <Card size="small" hoverable className="summary-card">
<Row gutter={[16, isMobile ? 16 : 12]}> <Row gutter={[16, isMobile ? 16 : 12]}>
<Col xs={12} sm={8}> <Col xs={12} sm={12} md={6}>
<Statistic <Statistic
title={t('pages.groups.totalGroups')} title={t('pages.groups.totalGroups')}
value={String(totalGroups)} value={String(totalGroups)}
prefix={<TagsOutlined />} prefix={<TagsOutlined />}
/> />
</Col> </Col>
<Col xs={12} sm={8}> <Col xs={12} sm={12} md={6}>
<Statistic <Statistic
title={t('pages.groups.totalGroupedClients')} title={t('pages.groups.totalGroupedClients')}
value={String(totalClients)} value={String(totalClients)}
prefix={<TeamOutlined />} prefix={<TeamOutlined />}
/> />
</Col> </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 <Statistic
title={t('pages.groups.totalTraffic')} title={t('pages.groups.totalTraffic')}
value={SizeFormatter.sizeFormat(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> </Col>
</Row> </Row>
</Card> </Card>
+1
View File
@@ -819,6 +819,7 @@
"upload": "رفع", "upload": "رفع",
"download": "تنزيل", "download": "تنزيل",
"totalTraffic": "إجمالي حركة المرور", "totalTraffic": "إجمالي حركة المرور",
"totalUpDown": "إجمالي الرفع / التنزيل",
"addGroup": "إضافة مجموعة", "addGroup": "إضافة مجموعة",
"createSuccess": "تم إنشاء المجموعة «{name}».", "createSuccess": "تم إنشاء المجموعة «{name}».",
"rename": "إعادة تسمية", "rename": "إعادة تسمية",
+1
View File
@@ -820,6 +820,7 @@
"upload": "Upload", "upload": "Upload",
"download": "Download", "download": "Download",
"totalTraffic": "Total traffic", "totalTraffic": "Total traffic",
"totalUpDown": "Total upload / download",
"addGroup": "Add Group", "addGroup": "Add Group",
"createSuccess": "Group \"{name}\" created.", "createSuccess": "Group \"{name}\" created.",
"rename": "Rename", "rename": "Rename",
+1
View File
@@ -819,6 +819,7 @@
"upload": "Subida", "upload": "Subida",
"download": "Bajada", "download": "Bajada",
"totalTraffic": "Tráfico total", "totalTraffic": "Tráfico total",
"totalUpDown": "Subida / bajada total",
"addGroup": "Añadir grupo", "addGroup": "Añadir grupo",
"createSuccess": "Grupo «{name}» creado.", "createSuccess": "Grupo «{name}» creado.",
"rename": "Renombrar", "rename": "Renombrar",
+1
View File
@@ -819,6 +819,7 @@
"upload": "آپلود", "upload": "آپلود",
"download": "دانلود", "download": "دانلود",
"totalTraffic": "مجموع ترافیک", "totalTraffic": "مجموع ترافیک",
"totalUpDown": "مجموع آپلود / دانلود",
"addGroup": "افزودن گروه", "addGroup": "افزودن گروه",
"createSuccess": "گروه «{name}» ایجاد شد.", "createSuccess": "گروه «{name}» ایجاد شد.",
"rename": "تغییر نام", "rename": "تغییر نام",
+1
View File
@@ -819,6 +819,7 @@
"upload": "Unggah", "upload": "Unggah",
"download": "Unduh", "download": "Unduh",
"totalTraffic": "Total trafik", "totalTraffic": "Total trafik",
"totalUpDown": "Total unggah / unduh",
"addGroup": "Tambah grup", "addGroup": "Tambah grup",
"createSuccess": "Grup «{name}» dibuat.", "createSuccess": "Grup «{name}» dibuat.",
"rename": "Ubah nama", "rename": "Ubah nama",
+1
View File
@@ -819,6 +819,7 @@
"upload": "アップロード", "upload": "アップロード",
"download": "ダウンロード", "download": "ダウンロード",
"totalTraffic": "合計トラフィック", "totalTraffic": "合計トラフィック",
"totalUpDown": "合計アップロード / ダウンロード",
"addGroup": "グループ追加", "addGroup": "グループ追加",
"createSuccess": "グループ「{name}」を作成しました。", "createSuccess": "グループ「{name}」を作成しました。",
"rename": "名前変更", "rename": "名前変更",
+1
View File
@@ -819,6 +819,7 @@
"upload": "Envio", "upload": "Envio",
"download": "Recebimento", "download": "Recebimento",
"totalTraffic": "Tráfego total", "totalTraffic": "Tráfego total",
"totalUpDown": "Total de envio / recebimento",
"addGroup": "Adicionar grupo", "addGroup": "Adicionar grupo",
"createSuccess": "Grupo «{name}» criado.", "createSuccess": "Grupo «{name}» criado.",
"rename": "Renomear", "rename": "Renomear",
+1
View File
@@ -819,6 +819,7 @@
"upload": "Отправлено", "upload": "Отправлено",
"download": "Получено", "download": "Получено",
"totalTraffic": "Общий трафик", "totalTraffic": "Общий трафик",
"totalUpDown": "Всего отправлено / получено",
"addGroup": "Добавить группу", "addGroup": "Добавить группу",
"createSuccess": "Группа «{name}» создана.", "createSuccess": "Группа «{name}» создана.",
"rename": "Переименовать", "rename": "Переименовать",
+1
View File
@@ -820,6 +820,7 @@
"upload": "Yükleme", "upload": "Yükleme",
"download": "İndirme", "download": "İndirme",
"totalTraffic": "Toplam trafik", "totalTraffic": "Toplam trafik",
"totalUpDown": "Toplam yükleme / indirme",
"addGroup": "Grup ekle", "addGroup": "Grup ekle",
"createSuccess": "«{name}» grubu oluşturuldu.", "createSuccess": "«{name}» grubu oluşturuldu.",
"rename": "Yeniden adlandır", "rename": "Yeniden adlandır",
+1
View File
@@ -819,6 +819,7 @@
"upload": "Вивантаження", "upload": "Вивантаження",
"download": "Завантаження", "download": "Завантаження",
"totalTraffic": "Загальний трафік", "totalTraffic": "Загальний трафік",
"totalUpDown": "Всього вивантажено / завантажено",
"addGroup": "Додати групу", "addGroup": "Додати групу",
"createSuccess": "Групу «{name}» створено.", "createSuccess": "Групу «{name}» створено.",
"rename": "Перейменувати", "rename": "Перейменувати",
+1
View File
@@ -819,6 +819,7 @@
"upload": "Tải lên", "upload": "Tải lên",
"download": "Tải xuống", "download": "Tải xuống",
"totalTraffic": "Tổng lưu lượng", "totalTraffic": "Tổng lưu lượng",
"totalUpDown": "Tổng tải lên / tải xuống",
"addGroup": "Thêm nhóm", "addGroup": "Thêm nhóm",
"createSuccess": "Đã tạo nhóm «{name}».", "createSuccess": "Đã tạo nhóm «{name}».",
"rename": "Đổi tên", "rename": "Đổi tên",
+1
View File
@@ -819,6 +819,7 @@
"upload": "上传", "upload": "上传",
"download": "下载", "download": "下载",
"totalTraffic": "总流量", "totalTraffic": "总流量",
"totalUpDown": "总上传 / 下载",
"addGroup": "添加分组", "addGroup": "添加分组",
"createSuccess": "已创建分组 “{name}”。", "createSuccess": "已创建分组 “{name}”。",
"rename": "重命名", "rename": "重命名",
+1
View File
@@ -819,6 +819,7 @@
"upload": "上傳", "upload": "上傳",
"download": "下載", "download": "下載",
"totalTraffic": "總流量", "totalTraffic": "總流量",
"totalUpDown": "總上傳 / 下載",
"addGroup": "新增群組", "addGroup": "新增群組",
"createSuccess": "已建立群組「{name}」。", "createSuccess": "已建立群組「{name}」。",
"rename": "重新命名", "rename": "重新命名",