add user usage detail in nodes (#5)

Gozargah · May 2, 2023 · 42f1592 · 42f1592
1 parent 613f1a3
commit 42f1592
Show file tree

Hide file tree

Showing 24 changed files with 2,065 additions and 678 deletions.
diff --git a/app/dashboard/build/404.html b/app/dashboard/build/404.html
@@ -33,8 +33,8 @@
     <meta name="msapplication-TileColor" content="#2b5797" />
     <meta name="msapplication-config" content="/favicon/browserconfig.xml" />
     <meta name="theme-color" content="#3B81F6" />
-    <script type="module" crossorigin src="/dashboard/assets/index.31644f25.js"></script>
-    <link rel="modulepreload" crossorigin href="/dashboard/assets/vendor.8e672767.js">
+    <script type="module" crossorigin src="/dashboard/assets/index.01b5eeb0.js"></script>
+    <link rel="modulepreload" crossorigin href="/dashboard/assets/vendor.b7d32f1b.js">
     <link rel="stylesheet" href="/dashboard/assets/index.16216361.css">
   </head>
   <body>

diff --git a/app/dashboard/build/assets/index.01b5eeb0.js b/app/dashboard/build/assets/index.01b5eeb0.js
diff --git a/app/dashboard/build/assets/index.31644f25.js b/app/dashboard/build/assets/index.31644f25.js
diff --git a/app/dashboard/build/assets/vendor.8e672767.js b/app/dashboard/build/assets/vendor.8e672767.js
diff --git a/app/dashboard/build/assets/vendor.b7d32f1b.js b/app/dashboard/build/assets/vendor.b7d32f1b.js
diff --git a/app/dashboard/build/index.html b/app/dashboard/build/index.html
@@ -33,8 +33,8 @@
     <meta name="msapplication-TileColor" content="#2b5797" />
     <meta name="msapplication-config" content="/favicon/browserconfig.xml" />
     <meta name="theme-color" content="#3B81F6" />
-    <script type="module" crossorigin src="/dashboard/assets/index.31644f25.js"></script>
-    <link rel="modulepreload" crossorigin href="/dashboard/assets/vendor.8e672767.js">
+    <script type="module" crossorigin src="/dashboard/assets/index.01b5eeb0.js"></script>
+    <link rel="modulepreload" crossorigin href="/dashboard/assets/vendor.b7d32f1b.js">
     <link rel="stylesheet" href="/dashboard/assets/index.16216361.css">
   </head>
   <body>

diff --git a/app/dashboard/package-lock.json b/app/dashboard/package-lock.json
diff --git a/app/dashboard/package.json b/app/dashboard/package.json
@@ -15,6 +15,7 @@
     "@emotion/styled": "^11.10.5",
     "@heroicons/react": "^2.0.12",
     "@hookform/resolvers": "^2.9.10",
+    "apexcharts": "^3.40.0",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.6",
     "framer-motion": "^7.6.6",
@@ -24,6 +25,7 @@
     "ohmyfetch": "^0.4.21",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
+    "react-apexcharts": "^1.4.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-datepicker": "^4.8.0",
     "react-dom": "^18.2.0",

diff --git a/app/dashboard/src/components/Header.tsx b/app/dashboard/src/components/Header.tsx
@@ -13,6 +13,7 @@ import {
 import {
   ArrowLeftOnRectangleIcon,
   Bars3Icon,
+  ChartPieIcon,
   CurrencyDollarIcon,
   DocumentMinusIcon,
   LinkIcon,
@@ -42,6 +43,7 @@ const LightIcon = chakra(SunIcon, {
   },
 });
 
+
 type HeaderProps = {
   actions?: ReactNode;
 };
@@ -57,6 +59,7 @@ const LogoutIcon = chakra(ArrowLeftOnRectangleIcon, iconProps);
 const DonationIcon = chakra(CurrencyDollarIcon, iconProps);
 const HostsIcon = chakra(LinkIcon, iconProps);
 const NodesIcon = chakra(SquaresPlusIcon, iconProps);
+const NodesUsageIcon = chakra(ChartPieIcon, iconProps);
 const ResetUsageIcon = chakra(DocumentMinusIcon, iconProps);
 const NotificationCircle = chakra(Box, {
   baseStyle: {
@@ -71,7 +74,7 @@ const NotificationCircle = chakra(Box, {
 const NOTIFICATION_KEY = "marzban-menu-notification";
 
 export const Header: FC<HeaderProps> = ({ actions }) => {
-  const { onEditingHosts, onResetAllUsage, onEditingNodes } = useDashboard();
+  const { onEditingHosts, onResetAllUsage, onEditingNodes, onShowingNodesUsage } = useDashboard();
   const { t } = useTranslation();
   const { colorMode, toggleColorMode } = useColorMode();
   const [notificationsChecked, setNotificationChecked] = useState(
@@ -153,6 +156,14 @@ export const Header: FC<HeaderProps> = ({ actions }) => {
             >
               {t("header.nodesSetting")}
             </MenuItem>
+            <MenuItem
+              maxW="170px"
+              fontSize="sm"
+              icon={<NodesUsageIcon />}
+              onClick={onShowingNodesUsage.bind(null, true)}
+            >
+              {t("header.nodesUsage")}
+            </MenuItem>
             <MenuItem
               maxW="170px"
               fontSize="sm"