feat: add detailed user usage traffic statistics

kastov · kastov · commit 64b86f3f889e · 2025-03-21T08:47:20.000+03:00
- Upgraded @remnawave/backend-contract in package.json and package-lock.json.
- Added new localization entries for user deletion confirmation in English, Persian, and Russian locale files.
- Improved DeleteUserFeature to utilize translations for modal prompts.
- Enhanced ViewUserModal to include GetUserUsageFeature for better user insights.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     "@mantine/nprogress": "^7.17.2",
     "@monaco-editor/react": "^4.7.0",
     "@paralleldrive/cuid2": "2.2.2",
-    "@remnawave/backend-contract": "0.3.49",
+    "@remnawave/backend-contract": "0.3.52",
     "@stablelib/base64": "^2.0.1",
     "@stablelib/x25519": "^2.0.1",
     "@tabler/icons-react": "^3.31.0",
diff --git a/public/locales/en/remnawave.json b/public/locales/en/remnawave.json
@@ -728,5 +728,41 @@
             "show-links": "Show links",
             "no-available-hosts-found-for-this-user": "No available hosts found for this user"
         }
+    },
+    "delete-user": {
+        "feature": {
+            "delete-user": "Delete user",
+            "are-you-sure": "Are you sure you want to delete the user? This action is irreversible.",
+            "delete": "Delete",
+            "cancel": "Cancel"
+        }
+    },
+    "user-usage-modal": {
+        "widget": {
+            "no-data-available-for-the-selected-period": "No data available for the selected period",
+            "no-data-available": "No data available",
+            "click-to-show-all": "Click to show all",
+            "click-to-highlight-only-this-node": "Click to highlight only this node",
+            "traffic-statistics": "Traffic statistics",
+            "usage-by-period": "Usage by period",
+            "7-days": "7 days",
+            "14-days": "14 days",
+            "30-days": "30 days",
+            "60-days": "60 days",
+            "90-days": "90 days",
+            "180-days": "180 days",
+            "365-days": "365 days",
+            "total-traffic": "Total traffic",
+            "top-nodes": "Top nodes",
+            "stacked": "Stacked",
+            "grouped": "Grouped",
+            "filter-nodes": "Filter nodes",
+            "bar-chart": "Bar chart"
+        }
+    },
+    "get-user-usage": {
+        "feature": {
+            "show-usage": "Show usage"
+        }
     }
 }
diff --git a/public/locales/fa/remnawave.json b/public/locales/fa/remnawave.json
@@ -728,5 +728,41 @@
             "subscription-links": "پیوندهای اشتراک",
             "no-available-hosts-found-for-this-user": "هیچ میزبان موجود برای این کاربر یافت نمی شود"
         }
+    },
+    "delete-user": {
+        "feature": {
+            "delete-user": "Delete user",
+            "are-you-sure": "Are you sure you want to delete the user? This action is irreversible.",
+            "delete": "Delete",
+            "cancel": "Cancel"
+        }
+    },
+    "user-usage-modal": {
+        "widget": {
+            "no-data-available-for-the-selected-period": "No data available for the selected period",
+            "no-data-available": "No data available",
+            "click-to-show-all": "Click to show all",
+            "click-to-highlight-only-this-node": "Click to highlight only this node",
+            "traffic-statistics": "Traffic statistics",
+            "usage-by-period": "Usage by period",
+            "7-days": "7 days",
+            "14-days": "14 days",
+            "30-days": "30 days",
+            "60-days": "60 days",
+            "90-days": "90 days",
+            "180-days": "180 days",
+            "365-days": "365 days",
+            "total-traffic": "Total traffic",
+            "top-nodes": "Top nodes",
+            "stacked": "Stacked",
+            "grouped": "Grouped",
+            "filter-nodes": "Filter nodes",
+            "bar-chart": "Bar chart"
+        }
+    },
+    "get-user-usage": {
+        "feature": {
+            "show-usage": "Show usage"
+        }
     }
-}
+}
diff --git a/public/locales/ru/remnawave.json b/public/locales/ru/remnawave.json
@@ -728,5 +728,41 @@
             "subscription-links": "Подписные ссылки",
             "no-available-hosts-found-for-this-user": "Для этого пользователя не найдено доступных хостов"
         }
+    },
+    "delete-user": {
+        "feature": {
+            "delete-user": "Delete user",
+            "are-you-sure": "Are you sure you want to delete the user? This action is irreversible.",
+            "delete": "Delete",
+            "cancel": "Cancel"
+        }
+    },
+    "user-usage-modal": {
+        "widget": {
+            "no-data-available-for-the-selected-period": "No data available for the selected period",
+            "no-data-available": "No data available",
+            "click-to-show-all": "Click to show all",
+            "click-to-highlight-only-this-node": "Click to highlight only this node",
+            "traffic-statistics": "Traffic statistics",
+            "usage-by-period": "Usage by period",
+            "7-days": "7 days",
+            "14-days": "14 days",
+            "30-days": "30 days",
+            "60-days": "60 days",
+            "90-days": "90 days",
+            "180-days": "180 days",
+            "365-days": "365 days",
+            "total-traffic": "Total traffic",
+            "top-nodes": "Top nodes",
+            "stacked": "Stacked",
+            "grouped": "Grouped",
+            "filter-nodes": "Filter nodes",
+            "bar-chart": "Bar chart"
+        }
+    },
+    "get-user-usage": {
+        "feature": {
+            "show-usage": "Show usage"
+        }
     }
-}
+}
diff --git a/src/features/ui/dashboard/users/delete-user/delete-user.feature.tsx b/src/features/ui/dashboard/users/delete-user/delete-user.feature.tsx
@@ -1,5 +1,6 @@
 import { ActionIcon, Text, Tooltip } from '@mantine/core'
 import { PiTrashDuotone } from 'react-icons/pi'
+import { useTranslation } from 'react-i18next'
 import { modals } from '@mantine/modals'
 
 import { useUserModalStoreActions } from '@entities/dashboard/user-modal-store/user-modal-store'
@@ -9,6 +10,8 @@ import { IProps } from './interfaces'
 
 export function DeleteUserFeature(props: IProps) {
     const { userUuid } = props
+    const { t } = useTranslation()
+
     const actions = useUserModalStoreActions()
 
     const { mutate: deleteUser, isPending: isDeleteUserPending } = useDeleteUser({
@@ -29,21 +32,20 @@ export function DeleteUserFeature(props: IProps) {
 
     const openModal = () =>
         modals.openConfirmModal({
-            title: 'Delete user',
-            children: (
-                <Text size="sm">
-                    Are you sure you want to delete the user? This action is irreversible.
-                </Text>
-            ),
-            labels: { confirm: 'Delete', cancel: 'Cancel' },
+            title: t('delete-user.feature.delete-user'),
+            children: <Text size="sm">t('delete-user.feature.are-you-sure')</Text>,
+            labels: {
+                confirm: t('delete-user.feature.delete'),
+                cancel: t('delete-user.feature.cancel')
+            },
             centered: true,
             confirmProps: { color: 'red' },
             onConfirm: () => handleDeleteUser()
         })
 
     return (
-        <Tooltip label="Delete user">
-            <ActionIcon color="red" loading={isDeleteUserPending} onClick={openModal} size="xl">
+        <Tooltip label={t('delete-user.feature.delete-user')}>
+            <ActionIcon color="red.5" loading={isDeleteUserPending} onClick={openModal} size="xl">
                 <PiTrashDuotone size="1.5rem" />
             </ActionIcon>
         </Tooltip>
diff --git a/src/features/ui/dashboard/users/get-user-subscription-links/get-user-subscription-links.feature.tsx b/src/features/ui/dashboard/users/get-user-subscription-links/get-user-subscription-links.feature.tsx
@@ -1,6 +1,5 @@
 import {
     ActionIcon,
-    Button,
     Center,
     CopyButton,
     Drawer,
@@ -22,6 +21,7 @@ import { IProps } from './interfaces'
 export function GetUserSubscriptionLinksFeature(props: IProps) {
     const { shortUuid } = props
     const { t } = useTranslation()
+
     const [opened, handlers] = useDisclosure(false)
 
     const {
@@ -103,15 +103,9 @@ export function GetUserSubscriptionLinksFeature(props: IProps) {
                 )}
             </Drawer>
             <Tooltip label={t('get-user-subscription-links.feature.subscription-links')}>
-                <Button
-                    color="green"
-                    leftSection={<PiLinkBreakDuotone size="1.5rem" />}
-                    onClick={handlers.open}
-                    size="md"
-                    type="button"
-                >
-                    {t('get-user-subscription-links.feature.show-links')}
-                </Button>
+                <ActionIcon color="teal.5" onClick={handlers.open} size="xl">
+                    <PiLinkBreakDuotone size="1.5rem" />
+                </ActionIcon>
             </Tooltip>
         </>
     )
diff --git a/src/features/ui/dashboard/users/get-user-usage/get-user-usage.feature.tsx b/src/features/ui/dashboard/users/get-user-usage/get-user-usage.feature.tsx
@@ -0,0 +1,30 @@
+import { PiChartBarDuotone } from 'react-icons/pi'
+import { useDisclosure } from '@mantine/hooks'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@mantine/core'
+
+import { UserUsageModalWidget } from '@widgets/dashboard/users/user-usage-modal/user-usage-modal.widget'
+
+import { IProps } from './interfaces'
+
+export function GetUserUsageFeature(props: IProps) {
+    const { userUuid } = props
+    const { t } = useTranslation()
+
+    const [opened, handlers] = useDisclosure(false)
+
+    return (
+        <>
+            <Button
+                color="grape"
+                leftSection={<PiChartBarDuotone size="1rem" />}
+                onClick={handlers.open}
+                size="md"
+                variant="outline"
+            >
+                {t('get-user-usage.feature.show-usage')}
+            </Button>
+            <UserUsageModalWidget onClose={handlers.close} opened={opened} userUuid={userUuid} />
+        </>
+    )
+}
diff --git a/src/features/ui/dashboard/users/get-user-usage/index.ts b/src/features/ui/dashboard/users/get-user-usage/index.ts
@@ -0,0 +1 @@
+export * from './get-user-usage.feature'
diff --git a/src/features/ui/dashboard/users/get-user-usage/interfaces/index.ts b/src/features/ui/dashboard/users/get-user-usage/interfaces/index.ts
@@ -0,0 +1 @@
+export * from './props.interface'
diff --git a/src/features/ui/dashboard/users/get-user-usage/interfaces/props.interface.ts b/src/features/ui/dashboard/users/get-user-usage/interfaces/props.interface.ts
@@ -0,0 +1,3 @@
+export interface IProps {
+    userUuid: string
+}
diff --git a/src/shared/api/hooks/users/users.query.hooks.ts b/src/shared/api/hooks/users/users.query.hooks.ts
@@ -1,7 +1,8 @@
 import {
     GetAllUsersV2Command,
     GetSubscriptionInfoByShortUuidCommand,
-    GetUserByUuidCommand
+    GetUserByUuidCommand,
+    GetUserUsageByRangeCommand
 } from '@remnawave/backend-contract'
 import { createQueryKeys } from '@lukemorales/query-key-factory'
 import { keepPreviousData } from '@tanstack/react-query'
@@ -19,6 +20,11 @@ export const usersQueryKeys = createQueryKeys('users', {
     }),
     getSubscriptionInfoByShortUuid: (route: GetSubscriptionInfoByShortUuidCommand.Request) => ({
         queryKey: [route]
+    }),
+    getUserUsageByRange: (
+        query: GetUserUsageByRangeCommand.Request & GetUserUsageByRangeCommand.RequestQuery
+    ) => ({
+        queryKey: [query]
     })
 })
 
@@ -76,3 +82,22 @@ export const useGetSubscriptionInfoByShortUuid = createGetQueryHook({
         })
     }
 })
+
+export const useGetUserUsageByRange = createGetQueryHook({
+    endpoint: GetUserUsageByRangeCommand.TSQ_url,
+    responseSchema: GetUserUsageByRangeCommand.ResponseSchema,
+    requestQuerySchema: GetUserUsageByRangeCommand.RequestQuerySchema,
+    routeParamsSchema: GetUserUsageByRangeCommand.RequestSchema,
+    getQueryKey: ({ route, query }) =>
+        usersQueryKeys.getUserUsageByRange({ ...route!, ...query! }).queryKey,
+    rQueryParams: {
+        staleTime: sToMs(15)
+    },
+    errorHandler: (error) => {
+        notifications.show({
+            title: `${GetUserUsageByRangeCommand.url}`,
+            message: error instanceof Error ? error.message : `Request failed with unknown error.`,
+            color: 'red'
+        })
+    }
+})
diff --git a/src/widgets/dashboard/users/user-usage-modal/index.ts b/src/widgets/dashboard/users/user-usage-modal/index.ts
@@ -0,0 +1 @@
+export * from './user-usage-modal.widget'
diff --git a/src/widgets/dashboard/users/user-usage-modal/interfaces/index.ts b/src/widgets/dashboard/users/user-usage-modal/interfaces/index.ts
@@ -0,0 +1 @@
+export * from './user-usage-modal.interface'
diff --git a/src/widgets/dashboard/users/user-usage-modal/interfaces/user-usage-modal.interface.ts b/src/widgets/dashboard/users/user-usage-modal/interfaces/user-usage-modal.interface.ts
@@ -0,0 +1,5 @@
+export interface IProps {
+    onClose: () => void
+    opened: boolean
+    userUuid: string
+}
diff --git a/src/widgets/dashboard/users/user-usage-modal/user-usage-modal.widget.tsx b/src/widgets/dashboard/users/user-usage-modal/user-usage-modal.widget.tsx
diff --git a/src/widgets/dashboard/users/view-user-modal/view-user-modal.widget.tsx b/src/widgets/dashboard/users/view-user-modal/view-user-modal.widget.tsx

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export * from './get-user-usage.feature'`