refactor: user traffic handling in components

kastov · kastov · commit 3f02a63d04e3 · 2025-11-13T00:57:36.000+03:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
     "@monaco-editor/react": "^4.7.0",
     "@noble/post-quantum": "^0.5.2",
     "@paralleldrive/cuid2": "2.2.2",
-    "@remnawave/backend-contract": "2.3.2",
+    "@remnawave/backend-contract": "2.3.6",
     "@simplewebauthn/browser": "^13.2.2",
     "@stablelib/base64": "^2.0.1",
     "@stablelib/x25519": "^2.0.1",
diff --git a/src/entities/dashboard/users/ui/table-columns/connected-node/connected-node.column.tsx b/src/entities/dashboard/users/ui/table-columns/connected-node/connected-node.column.tsx
@@ -4,7 +4,7 @@ import { Group, Text } from '@mantine/core'
 import { IProps } from './interface'
 
 export function ConnectedNodeColumnEntity(props: IProps) {
-    const { lastConnectedNode } = props
+    const { node } = props
 
     return (
         <Group
@@ -16,17 +16,17 @@ export function ConnectedNodeColumnEntity(props: IProps) {
             }}
             wrap="nowrap"
         >
-            {lastConnectedNode?.countryCode && lastConnectedNode.countryCode !== 'XX' && (
+            {node?.countryCode && node.countryCode !== 'XX' && (
                 <ReactCountryFlag
-                    countryCode={lastConnectedNode.countryCode}
+                    countryCode={node.countryCode}
                     style={{
                         fontSize: '1.1em',
                         borderRadius: '2px'
                     }}
                 />
             )}
             <Text ff="monospace" fw={500} size="md">
-                {lastConnectedNode?.nodeName || '–'}
+                {node?.name || '–'}
             </Text>
         </Group>
     )
diff --git a/src/entities/dashboard/users/ui/table-columns/connected-node/interface.ts b/src/entities/dashboard/users/ui/table-columns/connected-node/interface.ts
@@ -1,5 +1,5 @@
-import { GetAllUsersCommand } from '@remnawave/backend-contract'
+import { GetAllNodesCommand } from '@remnawave/backend-contract'
 
 export interface IProps {
-    lastConnectedNode: GetAllUsersCommand.Response['response']['users'][number]['lastConnectedNode']
+    node: GetAllNodesCommand.Response['response'][number] | undefined
 }
diff --git a/src/entities/dashboard/users/ui/table-columns/data-usage/data-usage.column.tsx b/src/entities/dashboard/users/ui/table-columns/data-usage/data-usage.column.tsx
@@ -11,11 +11,11 @@ export function DataUsageColumnEntity(props: IProps) {
     const { user } = props
 
     const usedTrafficPercentage = user.trafficLimitBytes
-        ? (user.usedTrafficBytes / user.trafficLimitBytes) * 100
+        ? (user.userTraffic.usedTrafficBytes / user.trafficLimitBytes) * 100
         : 0
     const limitBytes = prettyBytesUtil(user.trafficLimitBytes, true)
-    const totalUsedTraffic = prettyBytesUtil(user.usedTrafficBytes, true)
-    const lifetimeUsedTraffic = prettyBytesUtil(user.lifetimeUsedTrafficBytes, true)
+    const totalUsedTraffic = prettyBytesUtil(user.userTraffic.usedTrafficBytes, true)
+    const lifetimeUsedTraffic = prettyBytesUtil(user.userTraffic.lifetimeUsedTrafficBytes, true)
 
     const strategy = {
         [RESET_PERIODS.MONTH]: t('data-usage.column.monthly'),
diff --git a/src/entities/dashboard/users/ui/table-columns/username/username.column.tsx b/src/entities/dashboard/users/ui/table-columns/username/username.column.tsx
@@ -9,8 +9,8 @@ export function UsernameColumnEntity(props: IProps) {
 
     const { user } = props
 
-    const color = getConnectionStatusColorUtil(user.onlineAt)
-    const timeAgo = getTimeAgoUtil(user.onlineAt, t, i18n.language)
+    const color = getConnectionStatusColorUtil(user.userTraffic.onlineAt)
+    const timeAgo = getTimeAgoUtil(user.userTraffic.onlineAt, t, i18n.language)
 
     return (
         <Group align="center" gap="md" pl={10} wrap="nowrap">
diff --git a/src/entities/dashboard/users/users-table-store/users-table-store.ts b/src/entities/dashboard/users/users-table-store/users-table-store.ts
@@ -16,10 +16,7 @@ const DEFAULT_VISIBILITY: MRT_VisibilityState = {
     shortUuid: false,
     createdAt: false,
     subRevokedAt: false,
-    totalUsedBytes: false,
-    onlineAt: false,
     subLastUserAgent: false,
-    lifetimeUsedTrafficBytes: false,
     description: false,
     telegramId: false,
     email: false,
@@ -108,7 +105,7 @@ export const useUsersTableStore = create<IActions & IState>()(
 
         {
             name: 'x-rmnw-users-table',
-            version: 4,
+            version: 5,
             storage: createJSONStorage(() => localStorage),
             partialize: (state) => ({
                 columnVisibility: state.columnVisibility,
diff --git a/src/features/dashboard/users/users-table/model/use-table-columns.tsx b/src/features/dashboard/users/users-table/model/use-table-columns.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable camelcase */
+
 import {
     GetAllNodesCommand,
     GetAllUsersCommand,
@@ -59,7 +60,13 @@ export const useUserTableColumns = (
                 header: t('use-table-columns.last-connected-node'),
                 Cell: ({ cell }) => (
                     <ConnectedNodeColumnEntity
-                        lastConnectedNode={cell.row.original.lastConnectedNode}
+                        node={
+                            nodes?.find(
+                                (node) =>
+                                    node.uuid ===
+                                    cell.row.original.userTraffic.lastConnectedNodeUuid
+                            ) ?? undefined
+                        }
                     />
                 ),
                 filterVariant: 'select',
@@ -254,12 +261,16 @@ export const useUserTableColumns = (
             },
 
             {
-                accessorKey: 'firstConnectedAt',
+                accessorKey: 'userTraffic.firstConnectedAt',
                 header: t('use-table-columns.first-connected-at'),
-                accessorFn: (originalRow) =>
-                    originalRow.firstConnectedAt
-                        ? dayjs(originalRow.firstConnectedAt).format('DD/MM/YYYY, HH:mm')
-                        : '–',
+                accessorFn: (originalRow) => {
+                    if (originalRow.userTraffic && originalRow.userTraffic.firstConnectedAt) {
+                        return dayjs(originalRow.userTraffic.firstConnectedAt).format(
+                            'DD/MM/YYYY, HH:mm'
+                        )
+                    }
+                    return '–'
+                },
                 minSize: 250,
                 size: 400,
 
@@ -290,11 +301,11 @@ export const useUserTableColumns = (
                 }
             },
             {
-                accessorKey: 'onlineAt',
+                accessorKey: 'userTraffic.onlineAt',
                 header: t('use-table-columns.online-at'),
                 accessorFn: (originalRow) =>
-                    originalRow.onlineAt
-                        ? dayjs(originalRow.onlineAt).format('DD/MM/YYYY, HH:mm')
+                    originalRow.userTraffic && originalRow.userTraffic.onlineAt
+                        ? dayjs(originalRow.userTraffic.onlineAt).format('DD/MM/YYYY, HH:mm')
                         : t('use-table-columns.never'),
                 minSize: 170,
                 maxSize: 400,
@@ -334,10 +345,12 @@ export const useUserTableColumns = (
                 }
             },
             {
-                accessorKey: 'lifetimeUsedTrafficBytes',
+                accessorKey: 'userTraffic.lifetimeUsedTrafficBytes',
                 header: t('use-table-columns.lifetime-used'),
                 accessorFn: (originalRow) =>
-                    prettyBytesToAnyUtil(originalRow.lifetimeUsedTrafficBytes) || '–',
+                    originalRow.userTraffic && originalRow.userTraffic.lifetimeUsedTrafficBytes
+                        ? prettyBytesToAnyUtil(originalRow.userTraffic.lifetimeUsedTrafficBytes)
+                        : '–',
                 minSize: 170,
                 maxSize: 300,
                 size: 170,
diff --git a/src/pages/dashboard/home/components/home.page.tsx b/src/pages/dashboard/home/components/home.page.tsx
@@ -148,10 +148,10 @@ export const HomePage = (props: IProps) => {
 
                 <MotionWrapper variants={sectionVariants}>
                     <AnimatedTitle m="xs" ml={0} order={4} variants={titleVariants}>
-                        {t('home.page.system')}
+                        {t('home.page.online-stats')}
                     </AnimatedTitle>
-                    <MotionGrid cols={{ base: 1, sm: 2, xl: 3 }} variants={gridVariants}>
-                        {simpleMetrics.map((metric) => (
+                    <MotionGrid cols={{ base: 1, sm: 2, xl: 4 }} variants={gridVariants}>
+                        {onlineMetrics.map((metric) => (
                             <MotionWrapper key={metric.title} variants={cardVariants}>
                                 <MetricWithIcon {...metric} />
                             </MotionWrapper>
@@ -161,10 +161,10 @@ export const HomePage = (props: IProps) => {
 
                 <MotionWrapper variants={sectionVariants}>
                     <AnimatedTitle m="xs" ml={0} order={4} variants={titleVariants}>
-                        {t('home.page.online-stats')}
+                        {t('home.page.system')}
                     </AnimatedTitle>
-                    <MotionGrid cols={{ base: 1, sm: 2, xl: 4 }} variants={gridVariants}>
-                        {onlineMetrics.map((metric) => (
+                    <MotionGrid cols={{ base: 1, sm: 2, xl: 3 }} variants={gridVariants}>
+                        {simpleMetrics.map((metric) => (
                             <MotionWrapper key={metric.title} variants={cardVariants}>
                                 <MetricWithIcon {...metric} />
                             </MotionWrapper>
diff --git a/src/pages/dashboard/home/components/metrics/simple-metrics.tsx b/src/pages/dashboard/home/components/metrics/simple-metrics.tsx
@@ -1,8 +1,8 @@
-import { PiCpuDuotone, PiMemoryDuotone } from 'react-icons/pi'
+import { PiChartBarDuotone, PiCpuDuotone, PiMemoryDuotone } from 'react-icons/pi'
 import { GetStatsCommand } from '@remnawave/backend-contract'
 import { TFunction } from 'i18next'
 
-import { prettyBytesUtil } from '@shared/utils/bytes'
+import { prettyBytesUtil, prettyBytesUtilWithoutPrefix } from '@shared/utils/bytes'
 
 export const getSimpleMetrics = (
     systemInfo: GetStatsCommand.Response['response'],
@@ -20,12 +20,12 @@ export const getSimpleMetrics = (
             title: t('simple-metrics.total-online-on-nodes'),
             color: 'var(--mantine-color-blue-4)'
         },
-        // {
-        //     value: prettyBytesUtilWithoutPrefix(Number(users.totalTrafficBytes)) ?? 0,
-        //     icon: PiChartBarDuotone,
-        //     title: t('simple-metrics.total-traffic'),
-        //     color: 'var(--mantine-color-green-4)'
-        // },
+        {
+            value: prettyBytesUtilWithoutPrefix(Number(nodes.totalBytesLifetime)) ?? 0,
+            icon: PiChartBarDuotone,
+            title: t('simple-metrics.total-traffic'),
+            color: 'var(--mantine-color-green-4)'
+        },
         {
             value: `${usedRamGB} / ${totalRamGB}`,
             icon: PiMemoryDuotone,
diff --git a/src/shared/api/hooks/index.ts b/src/shared/api/hooks/index.ts
@@ -43,7 +43,9 @@ export * from './subscription-settings/subscription-settings.query.hooks'
 export * from './subscription-template/subscription-template.mutation.hooks'
 
 export * from './subscription-template/subscription-template.query.hooks'
-export * from './system/system.query.hooks'
+export * from './system/system.mutation.hooks'
 
+export * from './system/system.query.hooks'
 export * from './users/users.mutation.hooks'
+
 export * from './users/users.query.hooks'
diff --git a/src/shared/api/hooks/system/system.mutation.hooks.ts b/src/shared/api/hooks/system/system.mutation.hooks.ts
@@ -0,0 +1,10 @@
+import { EncryptHappCryptoLinkCommand } from '@remnawave/backend-contract'
+
+import { createMutationHook } from '@shared/api/tsq-helpers'
+
+export const useEncryptSubscriptionLink = createMutationHook({
+    endpoint: EncryptHappCryptoLinkCommand.TSQ_url,
+    bodySchema: EncryptHappCryptoLinkCommand.RequestSchema,
+    responseSchema: EncryptHappCryptoLinkCommand.ResponseSchema,
+    requestMethod: EncryptHappCryptoLinkCommand.endpointDetails.REQUEST_METHOD
+})
diff --git a/src/shared/ui/forms/users/forms-components/traffic-limits-card.tsx b/src/shared/ui/forms/users/forms-components/traffic-limits-card.tsx
@@ -40,9 +40,11 @@ export const TrafficLimitsCard = <T extends CreateUserCommand.Request | UpdateUs
 
     const MotionWrapper = motionWrapper
 
-    const usedTrafficPercentage = user ? (user.usedTrafficBytes / user.trafficLimitBytes) * 100 : 0
-    const totalUsedTraffic = prettyBytesUtil(user?.usedTrafficBytes, true)
-    const lifetimeUsedTraffic = prettyBytesUtil(user?.lifetimeUsedTrafficBytes, true)
+    const usedTrafficPercentage = user
+        ? (user.userTraffic.usedTrafficBytes / user.trafficLimitBytes) * 100
+        : 0
+    const totalUsedTraffic = prettyBytesUtil(user?.userTraffic.usedTrafficBytes, true)
+    const lifetimeUsedTraffic = prettyBytesUtil(user?.userTraffic.lifetimeUsedTrafficBytes, true)
 
     return (
         <MotionWrapper variants={cardVariants}>
diff --git a/src/widgets/dashboard/users/detailed-user-info-drawer/detailed-user-info-drawer.widget.tsx b/src/widgets/dashboard/users/detailed-user-info-drawer/detailed-user-info-drawer.widget.tsx
@@ -25,27 +25,30 @@ import {
     Tooltip
 } from '@mantine/core'
 import { useTranslation } from 'react-i18next'
+import { useEffect, useState } from 'react'
 import dayjs from 'dayjs'
 
 import {
     useUserModalStoreActions,
     useUserModalStoreDrawerUserUuid,
     useUserModalStoreIsDetailedUserInfoDrawerOpen
 } from '@entities/dashboard/user-modal-store/user-modal-store'
+import { useEncryptSubscriptionLink, useGetUserByUuid } from '@shared/api/hooks'
 import { CopyableFieldShared } from '@shared/ui/copyable-field/copyable-field'
 import { LoaderModalShared } from '@shared/ui/loader-modal'
 import { prettyBytesToAnyUtil } from '@shared/utils/bytes'
-import { useGetUserByUuid } from '@shared/api/hooks'
 
 export const DetailedUserInfoDrawerWidget = () => {
     const { t } = useTranslation()
+    const [encryptedSubscriptionLink, setEncryptedSubscriptionLink] = useState('')
 
     const actions = useUserModalStoreActions()
     const isDetailedUserInfoDrawerOpen = useUserModalStoreIsDetailedUserInfoDrawerOpen()
     const selectedUser = useUserModalStoreDrawerUserUuid()
 
     const cleanUpDrawer = async () => {
         actions.changeDetailedUserInfoDrawerState(false)
+        setEncryptedSubscriptionLink('')
     }
 
     const isQueryEnabled = !!selectedUser
@@ -59,6 +62,21 @@ export const DetailedUserInfoDrawerWidget = () => {
         }
     })
 
+    const { mutateAsync: encryptSubscriptionLink } = useEncryptSubscriptionLink()
+
+    useEffect(() => {
+        if (!user || !selectedUser) return
+        encryptSubscriptionLink({
+            variables: {
+                linkToEncrypt: user.subscriptionUrl
+            }
+        })
+            .then((result) => {
+                setEncryptedSubscriptionLink(result.encryptedLink)
+            })
+            .catch(() => {})
+    }, [selectedUser, user])
+
     const formatDate = (dateString: Date | null | string) => {
         if (!dateString) return '—'
         return dayjs(dateString).format('YYYY-MM-DD HH:mm:ss')
@@ -158,12 +176,17 @@ export const DetailedUserInfoDrawerWidget = () => {
 
                             <CopyableFieldShared
                                 label={t('detailed-user-info-drawer.widget.used-traffic')}
-                                value={prettyBytesToAnyUtil(user.usedTrafficBytes || 0) || '—'}
+                                value={
+                                    prettyBytesToAnyUtil(user.userTraffic.usedTrafficBytes || 0) ||
+                                    '—'
+                                }
                             />
                             <CopyableFieldShared
                                 label={t('detailed-user-info-drawer.widget.lifetime-used-traffic')}
                                 value={
-                                    prettyBytesToAnyUtil(user.lifetimeUsedTrafficBytes || 0) || '—'
+                                    prettyBytesToAnyUtil(
+                                        user.userTraffic.lifetimeUsedTrafficBytes || 0
+                                    ) || '—'
                                 }
                             />
                             <CopyableFieldShared
@@ -198,7 +221,7 @@ export const DetailedUserInfoDrawerWidget = () => {
                             />
                             <CopyableFieldShared
                                 label="Happ Crypto Link"
-                                value={user.happ.cryptoLink}
+                                value={encryptedSubscriptionLink}
                             />
                             <CopyableFieldShared
                                 label={t('detailed-user-info-drawer.widget.expires-at')}
@@ -245,15 +268,19 @@ export const DetailedUserInfoDrawerWidget = () => {
                             />
                             <CopyableFieldShared
                                 label={t('detailed-user-info-drawer.widget.first-connected-at')}
-                                value={formatDate(user.firstConnectedAt)}
+                                value={formatDate(user.userTraffic.firstConnectedAt)}
                             />
                             <CopyableFieldShared
                                 label={t('detailed-user-info-drawer.widget.last-online')}
-                                value={user.onlineAt ? formatDate(user.onlineAt.toString()) : '—'}
+                                value={
+                                    user.userTraffic.onlineAt
+                                        ? formatDate(user.userTraffic.onlineAt.toString())
+                                        : '—'
+                                }
                             />
                             <CopyableFieldShared
                                 label={t('detailed-user-info-drawer.widget.last-connected-node')}
-                                value={user.lastConnectedNode?.nodeName || '—'}
+                                value={user.userTraffic.lastConnectedNodeUuid || '—'}
                             />
                         </Stack>
                     </Paper>
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
@@ -96,6 +96,9 @@ export const UserUsageModalWidget = (props: IProps) => {
         query: {
             start: dateRange[0].toISOString(),
             end: dateRange[1].toISOString()
+        },
+        rQueryParams: {
+            enabled: opened
         }
     })
 

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`		`-import { GetAllUsersCommand } from '@remnawave/backend-contract'`
	`1`	`+import { GetAllNodesCommand } from '@remnawave/backend-contract'`
`2`	`2`
`3`	`3`	`export interface IProps {`
`4`		`- lastConnectedNode: GetAllUsersCommand.Response['response']['users'][number]['lastConnectedNode']`
	`4`	`+ node: GetAllNodesCommand.Response['response'][number] \| undefined`
`5`	`5`	`}`