From 0f7da02a07826ba64b276d92e832320b7f89af69 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Fri, 12 Jun 2026 19:19:42 +0200
Subject: [PATCH] style(inbounds): show total up/down with directional arrows

Replace the ambiguous swap icon on the total traffic statistic with
explicit up/down arrows next to each value.
---
 frontend/src/pages/inbounds/InboundsPage.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/inbounds/InboundsPage.tsx b/frontend/src/pages/inbounds/InboundsPage.tsx
index 5accac5c9..3d2a27cf8 100644
--- a/frontend/src/pages/inbounds/InboundsPage.tsx
+++ b/frontend/src/pages/inbounds/InboundsPage.tsx
@@ -16,7 +16,8 @@ import {
 
 import { setMessageInstance } from '@/utils/messageBus';
 import {
-  SwapOutlined,
+  ArrowUpOutlined,
+  ArrowDownOutlined,
   PieChartOutlined,
   BarsOutlined,
 } from '@ant-design/icons';
@@ -585,8 +586,14 @@ export default function InboundsPage() {
                         <Col xs={12} sm={12} md={8}>
                           <Statistic
                             title={t('pages.inbounds.totalDownUp')}
-                            value={`${SizeFormatter.sizeFormat(totals.up)} / ${SizeFormatter.sizeFormat(totals.down)}`}
-                            prefix={<SwapOutlined />}
+                            value={0}
+                            formatter={() => (
+                              <span>
+                                <ArrowUpOutlined /> {SizeFormatter.sizeFormat(totals.up)}
+                                {' / '}
+                                <ArrowDownOutlined /> {SizeFormatter.sizeFormat(totals.down)}
+                              </span>
+                            )}
                           />
                         </Col>
                         <Col xs={12} sm={12} md={8}>