Remzona54/Remnawave_frontend
1
0
Fork 0
mirror of https://github.com/remnawave/frontend.git synced 2026-05-13 12:16:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: enhance mobile infra-billing widgets with improved no-data displays and updated icons

Browse source
This commit is contained in:
kastov 2026-03-27 17:46:12 +03:00
parent 752f356e50
commit 3de00ae844
No known key found for this signature in database
GPG key ID: 1B27BE29057F4C90
4 changed files with 86 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/widgets/dashboard/infra-billing/mobile/mobile-infra-billing.widget.tsx
View file

@ -1,4 +1,4 @@
import { TbCloud, TbHistory, TbPlus, TbRefresh, TbServer } from 'react-icons/tb'
import { TbCloud, TbCreditCard, TbPlus, TbRefresh, TbServer } from 'react-icons/tb'
import { ActionIcon, Group, Stack, Tabs, Transition } from '@mantine/core'
import { useTranslation } from 'react-i18next'
import { useState } from 'react'
@ -100,7 +100,7 @@ export function MobileInfraBillingWidget() {
<Tabs.Tab leftSection={<TbServer size={16} />} value="nodes">
{t('constants.nodes')}
</Tabs.Tab>
<Tabs.Tab leftSection={<TbHistory size={16} />} value="records">
<Tabs.Tab leftSection={<TbCreditCard size={16} />} value="records">
{t('mobile-infra-billing.widget.history')}
</Tabs.Tab>
<Tabs.Tab leftSection={<TbCloud size={16} />} value="providers">

33
src/widgets/dashboard/infra-billing/mobile/mobile-nodes-list.widget.tsx
View file

@ -1,4 +1,13 @@
import { ActionIcon, Badge, Group, MantineStyleProp, Stack, Text } from '@mantine/core'
import {
ActionIcon,
Badge,
Center,
Group,
MantineStyleProp,
Stack,
Text,
ThemeIcon
} from '@mantine/core'
import { TbCalendar, TbCheck, TbCreditCard, TbServer } from 'react-icons/tb'
import { GetInfraBillingNodesCommand } from '@remnawave/backend-contract'
import { useTranslation } from 'react-i18next'
@ -67,11 +76,23 @@ export function MobileNodesListWidget(props: IProps) {
if (nodes.length === 0) {
return (
<Stack align="center" gap="xs" py="xl">
<Text c="dimmed" size="sm">
{t('infra-billing-nodes.widget.no-nodes-found')}
</Text>
</Stack>
<SectionCard.Root p="xl">
<SectionCard.Section>
<Center py="xl">
<Stack align="center" gap="lg">
<ThemeIcon color="gray" radius="xl" size={64} variant="soft">
<TbServer size={32} />
</ThemeIcon>
<Stack align="center" gap="xs">
<Text c="dimmed" fw={600} size="md" ta="center">
{t('infra-billing-nodes.widget.no-nodes-found')}
</Text>
</Stack>
</Stack>
</Center>
</SectionCard.Section>
</SectionCard.Root>
)
}

33
src/widgets/dashboard/infra-billing/mobile/mobile-providers-list.widget.tsx
View file

@ -1,4 +1,13 @@
import { ActionIcon, Avatar, Group, MantineStyleProp, Stack, Text } from '@mantine/core'
import {
ActionIcon,
Avatar,
Center,
Group,
MantineStyleProp,
Stack,
Text,
ThemeIcon
} from '@mantine/core'
import { GetInfraProvidersCommand } from '@remnawave/backend-contract'
import { TbCloud, TbEdit, TbLink, TbTrash } from 'react-icons/tb'
import { useTranslation } from 'react-i18next'
@ -53,11 +62,23 @@ export function MobileProvidersListWidget(props: IProps) {
if (providers.length === 0) {
return (
<Stack align="center" gap="xs" py="xl">
<Text c="dimmed" size="sm">
{t('infra-providers-table.widget.no-providers-found')}
</Text>
</Stack>
<SectionCard.Root p="xl">
<SectionCard.Section>
<Center py="xl">
<Stack align="center" gap="lg">
<ThemeIcon color="gray" radius="xl" size={64} variant="soft">
<TbCloud size={32} />
</ThemeIcon>
<Stack align="center" gap="xs">
<Text c="dimmed" fw={600} size="md" ta="center">
{t('infra-providers-table.widget.no-providers-found')}
</Text>
</Stack>
</Stack>
</Center>
</SectionCard.Section>
</SectionCard.Root>
)
}

36
src/widgets/dashboard/infra-billing/mobile/mobile-records-list.widget.tsx
View file

@ -1,4 +1,14 @@
import { ActionIcon, Avatar, Divider, Group, MantineStyleProp, Stack, Text } from '@mantine/core'
import {
ActionIcon,
Avatar,
Center,
Divider,
Group,
MantineStyleProp,
Stack,
Text,
ThemeIcon
} from '@mantine/core'
import { GetInfraBillingHistoryRecordsCommand } from '@remnawave/backend-contract'
import { TbCreditCard, TbTrash } from 'react-icons/tb'
import { useTranslation } from 'react-i18next'
@ -68,11 +78,25 @@ export function MobileRecordsListWidget(props: IProps) {
if (records.length === 0) {
return (
<Stack align="center" gap="xs" py="xl">
<Text c="dimmed" size="sm">
{t('infra-billing-records-table.widget.no-billing-records-found')}
</Text>
</Stack>
<SectionCard.Root p="xl">
<SectionCard.Section>
<Center py="xl">
<Stack align="center" gap="lg">
<ThemeIcon color="gray" radius="xl" size={64} variant="soft">
<TbCreditCard size={32} />
</ThemeIcon>
<Stack align="center" gap="xs">
<Text c="dimmed" fw={600} size="md" ta="center">
{t(
'infra-billing-records-table.widget.no-billing-records-found'
)}
</Text>
</Stack>
</Stack>
</Center>
</SectionCard.Section>
</SectionCard.Root>
)
}