-.cache

-package.json

-package-lock.json

-public

-dist

-{

- "printWidth": 80

-}

- "login": "Login",

- "login.loginYourAccount": "Login to your account",

- "login.welcomeBack": "Welcome back, please enter your details",

- "login.fieldRequired": "This field is required",

- "header.hostSettings": "Host Settings",

- "header.nodeSettings": "Node Settings",

- "header.nodesUsage": "Nodes Usage",

- "header.donation": "Donation",

- "header.logout": "Log out",

- "pageHeaderTitle.Home": "Home",

- "pageHeaderTitle.Users": "Users",

- "pageHeaderTitle.Services": "Services",

- "pageHeaderTitle.Host": "Host",

- "pageHeaderTitle.Nodes": "Nodes",

- "deleteUser.title": "Delete User",

- "deleteUser.prompt": "Are you sure you want to delete <b>{{username}}</b>?",

- "deleteUser.deleteSuccess": "{{username}} deleted successfully.",

- "usersTable.status": "status",

- "usersTable.dataUsage": "data usage",

- "usersTable.noUserMatched": "It seems there is no user matched with what you are looking for",

- "usersTable.noUser": "There is no user added to the system",

- "usersTable.copyLink": "Copy Subscription Link",

- "usersTable.copied": "Copied",

- "usersTable.copyConfigs": "Copy Configs",

- "usersTable.total": "Total",

- "userDialog.dataLimit": "Data Limit",

- "userDialog.periodicUsageReset": "Periodic Usage Reset",

- "userDialog.warningNoProtocol": "Please select at least one protocol",

- "userDialog.expiryDate": "Expiry Date",

- "userDialog.note": "Note",

- "userDialog.resetUsage": "Reset Usage",

- "userDialog.usage": "Usage",

- "userDialog.protocols": "Protocols",

- "userDialog.services": "Services",

- "userDialog.editUserTitle": "Edit user",

- "userDialog.editUser": "Edit user",

- "userDialog.userEdited": "User {{username}} edited.",

- "userDialog.userCreated": "User {{username}} created.",

- "userDialog.userAlreadyExists": "User already exists",

- "userDialog.vmessDesc": "Fast and secure",

- "userDialog.vlessDesc": "Lightweight, fast and secure",

- "userDialog.trojanDesc": "Lightweight, secure and lightening fast",

- "userDialog.shadowsocksDesc": "Fast and secure, but not efficient as others",

- "userDialog.resetStrategyNo": "No",

- "userDialog.resetStrategyDaily": "Daily",

- "userDialog.resetStrategyWeekly": "Weekly",

- "userDialog.resetStrategyMonthly": "Monthly",

- "userDialog.resetStrategyAnnually": "Annually",

- "userDialog.selectOneProtocol": "Please select at least one protocol",

- "userDialog.optional": "optional",

- "userDialog.method": "Method",

- "userDialog.generatedByDefault": "Automatically generated by default",

- "userDialog.hours": "Hours",

- "userDialog.days": "Days",

- "userDialog.weeks": "Weeks",

- "userDialog.months": "Months",

- "userDialog.relative": "Relative",

- "userDialog.absolute": "Absolute",

- "userDialog.custom": "Custom",

- "userDialog.startDate": "Start date",

- "userDialog.endDate": "End date",

- "userDialog.revokeSubscription": "Revoke Subscription",

- "userDialog.total": "Total: ",

- "hostsDialog.title": "Using this setting, you are able to assign specific address for each inbound.",

- "hostsDialog.desc": "Use these variables to make it dynamic",

- "hostsDialog.username": "The username of the user",

- "hostsDialog.dataUsage": "The current usage of the user",

- "hostsDialog.remainingData": "Remaining data of the user",

- "hostsDialog.dataLimit": "The usage limit of the user",

- "hostsDialog.remainingDays": "Remaining days of the user",

- "hostsDialog.expireDate": "Expiry date of the user",

- "hostsDialog.jalaliExpireDate": "Expiry date of the user in solar calendar",

- "hostsDialog.remainingTime": "Remaining time of the user",

- "hostsDialog.statusEmoji": "User status as an emoji (✅,⌛️,🪫,❌,🔌)",

- "hostsDialog.proxyProtocol": "Proxy protocol (e.g. VMess)",

- "hostsDialog.proxyMethod": "Proxy transport method (e.g. ws)",

- "hostsDialog.currentServer": "Current server ip address",

- "hostsDialog.security": "Security Layer",

- "hostsDialog.host": "Request Host",

- "hostsDialog.port": "Port",

- "hostsDialog.path": "Path",

- "hostsDialog.sni": "SNI",

- "hostsDialog.advancedOptions": "Advanced options",

- "hostsDialog.addHost": "Add host",

- "hostsDialog.savedSuccess": "Hosts saved successfully",

- "hostsDialog.loading": "loading...",

- "hostsDialog.apply": "Apply",

- "hostsDialog.port.info": "By default, a host uses the default port of the inbound. You can set a custom port in case this host is a server that forwards traffic from a port that differs from your server's port. For example, the server may forward traffic from port 8443 to the default port of your inbound server.",

- "hostsDialog.path.info": "Set a path for host users, useful behind a reverse proxy.",

- "hostsDialog.sni.info": "By default, a host uses the default SNI of the inbound. You can set a custom SNI in case this host is a server that has a different SNI. For example, the server may receive traffic with a different SSL certificate, perform SSL termination, and forward it to your inbound server.",

- "hostsDialog.host.info": "By default, if a request host is set in the Xray config, this host is used. However, you can set a custom request host here if needed.",

- "hostsDialog.security.info": "If the middleware server of this host uses a different security layer than the inbound's default, you can set a custom security layer here.",

- "hostsDialog.alpn": "ALPN",

- "hostsDialog.fingerprint": "Fingerprint",

- "hostsDialog.host.multiHost": "To set multiple addresses, separate them with <badge>,</badge> Each time an address is chosen randomly.",

- "hostsDialog.host.wildcard": "Use <badge>*</badge> to generate a random string (works for wildcard domain names)",

- "nodes.title": "Using Marzban-Node, you are able to scale up your connection quality by adding different nodes on different servers.",

- "nodes.addNewMarzbanNode": "Add New Marzban Node",

- "nodes.certificate": "Certificate",

- "nodes.connection-hint": "To setup a Marzban Node, you need to set this certificate on the node to initialize a secure connection between main server and the node",

- "nodes.download-certificate": "Download certificate",

- "nodes.show-certificate": "Show certificate",

- "nodes.hide-certificate": "Hide certificate",

- "nodes.addHostForEveryInbound": "Add this node as a new host for every inbound",

- "nodes.addNode": "Add Node",

- "nodes.addNodeSuccess": "Node {{name}} added successfully",

- "nodes.apply": "editNode",

- "nodes.nodeName": "Name",

- "nodes.nodeAddress": "Address",

- "nodes.nodePort": "Port",

- "nodes.nodeAPIPort": "API Port",

- "nodes.editNode": "Update Node",

- "nodes.reconnect": "Reconnect",

- "nodes.reconnecting": "Reconnecting...",

-import { DeleteIcon, DeleteUserModalProps } from './DeleteUserModal';

- t('deleteNode.deleteSuccess', {name: deletingNode && deletingNode.name}),

- {t('deleteNode.prompt', {name: deletingNode.name})}

- chakra,

-import { TrashIcon } from '@heroicons/react/24/outline';

-export const DeleteIcon = chakra(TrashIcon, {

- baseStyle: {

- w: 5,

- h: 5,

- },

-});

-

- deleteCallback?: () => void;

-export const UserDialogModalHeader = ({ HeaderIcon, title }: { HeaderIcon: ChakraIcon, title: string }) => {

-import { DeleteIcon } from './DeleteUserModal';

-import { DeleteIcon } from './DeleteUserModal';

-import { ReloadIcon } from './Filters';

- filters,

-import React from 'react';

-import {

- Button,

- Tooltip,

- HStack,

- IconButton,

- Spinner,

-} from '@chakra-ui/react';

-import { DeleteIcon } from '../DeleteUserModal';

-import { UserUsageIcon } from './UserDialogIcons';

-import { useTranslation } from 'react-i18next';

-import { User } from 'types/User';

-import { ModalFooter } from '@chakra-ui/react';

-

-interface UserDialogFooterProps {

- isEditing: boolean;

- onDeletingUser: (user: User) => void;

- handleUsageToggle: () => void;

- handleResetUsage: () => void;

- handleRevokeSubscription: () => void;

- loading: boolean;

- editingUser: User | null;

- onClose: () => void;

-}

-

-export const UserDialogModalFooter: React.FC<UserDialogFooterProps> = ({

- isEditing,

- onClose, editingUser,

- onDeletingUser,

- handleUsageToggle,

- handleResetUsage,

- handleRevokeSubscription,

- loading,

-}) => {

-

- const { t } = useTranslation();

- return (

-

- <ModalFooter mt="3">

- <HStack

- justifyContent="space-between"

- w="full"

- gap={3}

- flexDirection={{

- base: 'column',

- sm: 'row',

- }}

- >

- <HStack

- justifyContent="flex-start"

- w={{

- base: 'full',

- sm: 'unset',

- }}

- >

- {isEditing && editingUser !== null && (

- <>

- <Tooltip label={t('delete')} placement="top">

- <IconButton

- aria-label="Delete"

- size="sm"

- onClick={() => {

- onDeletingUser(editingUser);

- onClose();

- }}

- >

- <DeleteIcon />

- </IconButton>

- </Tooltip>

- <Tooltip label={t('userDialog.usage')} placement="top">

- <IconButton

- aria-label="usage"

- size="sm"

- onClick={handleUsageToggle}

- >

- <UserUsageIcon />

- </IconButton>

- </Tooltip>

- <Button onClick={handleResetUsage} size="sm">

- {t('userDialog.resetUsage')}

- </Button>

- <Button onClick={handleRevokeSubscription} size="sm">

- {t('userDialog.revokeSubscription')}

- </Button>

- </>

- )}

- </HStack>

- <HStack

- w="full"

- maxW={{ md: '50%', base: 'full' }}

- justify="end"

- >

- <Button

- type="submit"

- size="sm"

- px="8"

- colorScheme="primary"

- leftIcon={loading ? <Spinner size="xs" /> : undefined}

- disabled={false}

- >

- {isEditing ? t('userDialog.editUser') : t('createUser')}

- </Button>

- </HStack>

- </HStack>

- </ModalFooter >

- );

-};

-import { FormControl, FormLabel, FormErrorMessage, Center, Spinner } from '@chakra-ui/react';

- render={({ field }) => {

- {...field}

- chakra,

- Spacer,

- Text,

-import { ServerStackIcon, UsersIcon } from '@heroicons/react/24/outline';

-import { IconBaseStyle } from 'constants/IconBaseStyle';

-import { forwardRef, Ref } from 'react';

-import { ServicePropertyStatus } from './ServicePropertyStatus';

-

-

-const UsersServiceIcon = chakra(UsersIcon, IconBaseStyle);

-

-const InboundsServiceIcon = chakra(ServerStackIcon, IconBaseStyle);

-

-type CustomCheckboxProps = {

- isChecked: boolean;

- onChange: () => void;

- service: Service;

- value: string;

-}

-

-const CustomCheckbox = forwardRef(

- ({ isChecked, onChange, service, ...props }: CustomCheckboxProps, ref: Ref<HTMLDivElement>) => (

- <Box

- ref={ref}

- border={isChecked ? '5px' : '2px'}

- w="full"

- borderColor={isChecked ? 'primary.500' : 'gray.600'}

- boxShadow={isChecked ? '0 0 0 3px rgba(102, 126, 234, 0.6)' : '0 0 0 1px rgba(102, 126, 234, 0.6)'}

- bg={isChecked ? 'gray.100' : 'white'}

- py="4px"

- px="8px"

- borderRadius="md"

- display="flex"

- alignItems="center"

- justifyContent="center"

- _hover={{

- cursor: 'pointer',

- borderColor: 'primary.300',

- }}

- onClick={onChange}

- {...props}

- >

- <Text fontSize="sm" color="gray.700" fontWeight="medium">

- {service.name}

- </Text>

- <Spacer />

- <Flex flexDirection="row" alignItems="center">

- <ServicePropertyStatus value={service.users.length} StatusIcon={UsersServiceIcon} />

- <Text color="primary.600" mx="8px">/</Text>

- <ServicePropertyStatus value={service.inbounds.length} StatusIcon={InboundsServiceIcon} />

- </Flex>

- </Box>

- )

-);

-

- list: Service[];

- function({ list }, ref) {

- <CustomCheckbox

- service={service}

- });

- PencilIcon,

- UserPlusIcon,

-

-export const AddUserIcon = chakra(UserPlusIcon, {

- baseStyle: {

- w: 5,

- h: 5,

- },

-});

-

-export const EditUserIcon = chakra(PencilIcon, {

- baseStyle: {

- w: 5,

- h: 5,

- },

-});

-

-import { AddUserIcon, EditUserIcon } from './UserDialogIcons';

-import { UserDialogModalHeader } from './ModalHeader';

-import { UserDialogModalFooter } from './ModalFooter';

- <UserDialogModalHeader HeaderIcon={isEditing ? EditUserIcon : AddUserIcon} title={isEditing ? t('userDialog.editUserTitle') : t('createNewUser')} />

- <UserDialogModalFooter

- editingUser={isEditing ? editingUser : null}

- onClose={onClose}

- isEditing={isEditing}

- onDeletingUser={onDeletingUser}

- handleUsageToggle={handleUsageToggle}

- handleResetUsage={handleResetUsage}

- handleRevokeSubscription={handleRevokeSubscription}

- loading={loading}

- />

- ...useDashboard.getState().filters,

-export const Filters: FC<FilterProps> = ({ ...props }) => {

- const { loading, filters, onFilterChange, refetchUsers, onCreateUser } =

- id="filters"

-import {

- Accordion,

- AccordionButton,

- AccordionItem,

- AccordionPanel,

- Box,

- Button,

- chakra,

- ExpandedIndex,

- HStack,

- IconButton,

- Select,

- Slider,

- SliderFilledTrack,

- SliderProps,

- SliderTrack,

- Table,

- TableProps,

- Tbody,

- Td,

- Text,

- Th,

- Thead,

- Tooltip,

- Tr,

- useBreakpointValue,

- VStack,

-} from '@chakra-ui/react';

-import {

- CheckIcon,

- ChevronDownIcon,

- ClipboardIcon,

- LinkIcon,

- PencilIcon,

- QrCodeIcon,

-} from '@heroicons/react/24/outline';

-import { ReactComponent as AddFileIcon } from 'assets/add_file.svg';

-import classNames from 'classnames';

-import { resetStrategy, statusColors } from 'constants/UserSettings';

-import { useDashboard } from 'contexts/DashboardContext';

-import { t } from 'i18next';

-import { FC, Fragment, useEffect, useState } from 'react';

-import CopyToClipboard from 'react-copy-to-clipboard';

-import { useTranslation } from 'react-i18next';

-import { User } from 'types/User';

-import { formatBytes } from 'utils/formatByte';

-import { OnlineBadge } from './OnlineBadge';

-import { OnlineStatus } from './OnlineStatus';

-import { Pagination } from './Pagination';

-import { StatusBadge } from './StatusBadge';

-

-const EmptySectionIcon = chakra(AddFileIcon);

-

-const iconProps = {

- baseStyle: {

- w: {

- base: 4,

- md: 5,

- },

- h: {

- base: 4,

- md: 5,

- },

- },

-};

-const CopyIcon = chakra(ClipboardIcon, iconProps);

-const AccordionArrowIcon = chakra(ChevronDownIcon, iconProps);

-const CopiedIcon = chakra(CheckIcon, iconProps);

-const SubscriptionLinkIcon = chakra(LinkIcon, iconProps);

-const QRIcon = chakra(QrCodeIcon, iconProps);

-const EditIcon = chakra(PencilIcon, iconProps);

-const SortIcon = chakra(ChevronDownIcon, {

- baseStyle: {

- width: '15px',

- height: '15px',

- },

-});

-type UsageSliderProps = {

- used: number;

- total: number | null;

- dataLimitResetStrategy: string | null;

- totalUsedTraffic: number;

-} & SliderProps;

-

-const getResetStrategy = (strategy: string): string => {

- for (var i = 0; i < resetStrategy.length; i++) {

- const entry = resetStrategy[i];

- if (entry.value == strategy) {

- return entry.title;

- }

- }

- return 'No';

-};

-const UsageSliderCompact: FC<UsageSliderProps> = (props) => {

- const { used, total } = props;

- const isUnlimited = total === 0 || total === null;

- return (

- <HStack

- justifyContent="space-between"

- fontSize="xs"

- fontWeight="medium"

- color="gray.600"

- _dark={{

- color: 'gray.400',

- }}

- >

- <Text>

- {formatBytes(used)} /{' '}

- {isUnlimited ? (

- <Text as="span" fontFamily="system-ui">

- ∞

- </Text>

- ) : (

- formatBytes(total)

- )}

- </Text>

- </HStack>

- );

-};

-const UsageSlider: FC<UsageSliderProps> = (props) => {

- const {

- used,

- total,

- dataLimitResetStrategy,

- totalUsedTraffic,

- ...restOfProps

- } = props;

- const isUnlimited = total === 0 || total === null;

- const isReached = !isUnlimited && (used / total) * 100 >= 100;

- return (

- <>

- <Slider

- orientation="horizontal"

- value={isUnlimited ? 100 : Math.min((used / total) * 100, 100)}

- colorScheme={isReached ? 'red' : 'primary'}

- {...restOfProps}

- >

- <SliderTrack h="6px" borderRadius="full">

- <SliderFilledTrack borderRadius="full" />

- </SliderTrack>

- </Slider>

- <HStack

- justifyContent="space-between"

- fontSize="xs"

- fontWeight="medium"

- color="gray.600"

- _dark={{

- color: 'gray.400',

- }}

- >

- <Text>

- {formatBytes(used)} /{' '}

- {isUnlimited ? (

- <Text as="span" fontFamily="system-ui">

- ∞

- </Text>

- ) : (

- formatBytes(total) +

- (dataLimitResetStrategy && dataLimitResetStrategy !== 'no_reset'

- ? ' ' +

- t(

- 'userDialog.resetStrategy' +

- getResetStrategy(dataLimitResetStrategy)

- )

- : '')

- )}

- </Text>

- <Text>

- {t('usersTable.total')}: {formatBytes(totalUsedTraffic)}

- </Text>

- </HStack>

- </>

- );

-};

-export type SortType = {

- sort: string;

- column: string;

-};

-export const Sort: FC<SortType> = ({ sort, column }) => {

- if (sort.includes(column))

- return (

- <SortIcon

- transform={sort.startsWith('-') ? undefined : 'rotate(180deg)'}

- />

- );

- return null;

-};

-type UsersTableProps = {} & TableProps;

-export const UsersTable: FC<UsersTableProps> = (props) => {

- const {

- filters,

- users: { users },

- users: totalUsers,

- onEditingUser,

- onFilterChange,

- } = useDashboard();

-

- const { t } = useTranslation();

- const [selectedRow, setSelectedRow] = useState<ExpandedIndex | undefined>(

- undefined

- );

- const marginTop = useBreakpointValue({ base: 120, lg: 72 }) || 72;

- const [top, setTop] = useState(`${marginTop}px`);

- const useTable = useBreakpointValue({ base: false, md: true });

-

- useEffect(() => {

- const calcTop = () => {

- const el = document.querySelectorAll('#filters')[0] as HTMLElement;

- setTop(`${el.offsetHeight}px`);

- };

- window.addEventListener('scroll', calcTop);

- () => window.removeEventListener('scroll', calcTop);

- }, []);

-

- const isFiltered = users.length !== totalUsers.total;

-

- const handleSort = (column: string) => {

- let newSort = filters.sort;

- if (newSort.includes(column)) {

- if (newSort.startsWith('-')) {

- newSort = '-created_at';

- } else {

- newSort = '-' + column;

- }

- } else {

- newSort = column;

- }

- onFilterChange({

- sort: newSort,

- });

- };

- const handleStatusFilter = (e: any) => {

- onFilterChange({

- status: e.target.value.length > 0 ? e.target.value : undefined,

- });

- };

-

- const toggleAccordion = (index: number) => {

- setSelectedRow(index === selectedRow ? undefined : index);

- };

-

- return (

- <Box id="users-table" overflowX={{ base: 'unset', md: 'unset' }}>

- <Accordion

- allowMultiple

- display={{ base: 'block', md: 'none' }}

- index={selectedRow}

- >

- <Table orientation="vertical" zIndex="docked" {...props}>

- <Thead zIndex="docked" position="relative">

- <Tr>

- <Th

- position="sticky"

- top={top}

- minW="120px"

- pl={4}

- pr={4}

- cursor={'pointer'}

- onClick={handleSort.bind(null, 'username')}

- >

- <HStack>

- <span>{t('users')}</span>

- <Sort sort={filters.sort} column="username" />

- </HStack>

- </Th>

- <Th

- position="sticky"

- top={top}

- minW="50px"

- pl={0}

- pr={0}

- w="140px"

- cursor={'pointer'}

- >

- <HStack spacing={0} position="relative">

- <Text

- position="absolute"

- _dark={{

- bg: 'gray.750',

- }}

- _light={{

- bg: '#F9FAFB',

- }}

- userSelect="none"

- pointerEvents="none"

- zIndex={1}

- w="100%"

- >

- {t('usersTable.status')}

- {filters.status ? ': ' + filters.status : ''}

- </Text>

- <Select

- value={filters.sort}

- fontSize="xs"

- fontWeight="extrabold"

- textTransform="uppercase"

- cursor="pointer"

- p={0}

- border={0}

- h="auto"

- w="auto"

- icon={<></>}

- _focusVisible={{

- border: '0 !important',

- }}

- onChange={handleStatusFilter}

- >

- <option></option>

- <option>active</option>

- <option>disabled</option>

- <option>limited</option>

- <option>expired</option>

- </Select>

- </HStack>

- </Th>

- <Th

- position="sticky"

- top={top}

- minW="100px"

- cursor={'pointer'}

- pr={0}

- onClick={handleSort.bind(null, 'used_traffic')}

- >

- <HStack>

- <span>{t('usersTable.dataUsage')}</span>

- <Sort sort={filters.sort} column="used_traffic" />

- </HStack>

- </Th>

- <Th

- position="sticky"

- top={top}

- minW="32px"

- w="32px"

- p={0}

- cursor={'pointer'}

- ></Th>

- </Tr>

- </Thead>

- <Tbody>

- {!useTable &&

- users?.map((user, i) => {

- return (

- <Fragment key={user.username}>

- <Tr

- onClick={toggleAccordion.bind(null, i)}

- cursor="pointer"

- >

- <Td borderBottom={0} minW="100px" pl={4} pr={4}>

- <div className="flex-status">

- <OnlineBadge lastOnline={user.online_at} />

- {user.username}

- </div>

- </Td>

- <Td borderBottom={0} minW="50px" pl={0} pr={0}>

- <StatusBadge

- compact

- showDetail={false}

- expiryDate={user.expire}

- status={user.status}

- />

- </Td>

- <Td borderBottom={0} minW="100px" pr={0}>

- <UsageSliderCompact

- totalUsedTraffic={user.lifetime_used_traffic}

- dataLimitResetStrategy={

- user.data_limit_reset_strategy

- }

- used={user.used_traffic}

- total={user.data_limit}

- colorScheme={statusColors[user.status].bandWidthColor}

- />

- </Td>

- <Td p={0} borderBottom={0} w="32px" minW="32px">

- <AccordionArrowIcon

- color="gray.600"

- _dark={{

- color: 'gray.400',

- }}

- transition="transform .2s ease-out"

- transform={

- selectedRow === i ? 'rotate(180deg)' : '0deg'

- }

- />

- </Td>

- </Tr>

- <Tr

- className="collapsible"

- onClick={toggleAccordion.bind(null, i)}

- >

- <Td p={0} colSpan={4}>

- <AccordionItem border={0}>

- <AccordionButton display="none"></AccordionButton>

- <AccordionPanel

- border={0}

- cursor="pointer"

- px={6}

- py={3}

- >

- <VStack justifyContent="space-between" spacing="4">

- <VStack

- alignItems="flex-start"

- w="full"

- spacing={-1}

- >

- <Text

- textTransform="capitalize"

- fontSize="xs"

- fontWeight="bold"

- color="gray.600"

- _dark={{

- color: 'gray.400',

- }}

- >

- {t('usersTable.dataUsage')}

- </Text>

- <Box width="full" minW="230px">

- <UsageSlider

- totalUsedTraffic={

- user.lifetime_used_traffic

- }

- dataLimitResetStrategy={

- user.data_limit_reset_strategy

- }

- used={user.used_traffic}

- total={user.data_limit}

- colorScheme={

- statusColors[user.status].bandWidthColor

- }

- />

- </Box>

- </VStack>

- <HStack w="full" justifyContent="space-between">

- <Box width="full">

- <StatusBadge

- compact

- expiryDate={user.expire}

- status={user.status}

- />

- <OnlineStatus lastOnline={user.online_at} />

- </Box>

- <HStack>

- <ActionButtons user={user} />

- <Tooltip

- label={t('userDialog.editUser')}

- placement="top"

- >

- <IconButton

- p="0 !important"

- aria-label="Edit user"

- bg="transparent"

- _dark={{

- _hover: {

- bg: 'gray.700',

- },

- }}

- size={{

- base: 'sm',

- md: 'md',

- }}

- onClick={(e) => {

- e.stopPropagation();

- onEditingUser(user);

- }}

- >

- <EditIcon />

- </IconButton>

- </Tooltip>

- </HStack>

- </HStack>

- </VStack>

- </AccordionPanel>

- </AccordionItem>

- </Td>

- </Tr>

- </Fragment>

- );

- })}

- </Tbody>

- </Table>

- </Accordion>

- <Table

- orientation="vertical"

- display={{ base: 'none', md: 'table' }}

- {...props}

- >

- <Thead zIndex="docked" position="relative">

- <Tr>

- <Th

- position="sticky"

- top={{ base: 'unset', md: top }}

- minW="140px"

- cursor={'pointer'}

- onClick={handleSort.bind(null, 'username')}

- >

- <HStack>

- <span>{t('username')}</span>

- <Sort sort={filters.sort} column="username" />

- </HStack>

- </Th>

- <Th

- position="sticky"

- top={{ base: 'unset', md: top }}

- width="400px"

- minW="150px"

- cursor={'pointer'}

- >

- <HStack spacing={0} position="relative">

- <Text

- position="absolute"

- _dark={{

- bg: 'gray.750',

- }}

- _light={{

- bg: '#F9FAFB',

- }}

- userSelect="none"

- pointerEvents="none"

- zIndex={1}

- w="100%"

- >

- {t('usersTable.status')}

- {filters.status ? ': ' + filters.status : ''}

- </Text>

- <Select

- fontSize="xs"

- fontWeight="extrabold"

- textTransform="uppercase"

- cursor="pointer"

- p={0}

- border={0}

- h="auto"

- w="auto"

- icon={<></>}

- _focusVisible={{

- border: '0 !important',

- }}

- value={filters.sort}

- onChange={handleStatusFilter}

- >

- <option></option>

- <option>active</option>

- <option>disabled</option>

- <option>limited</option>

- <option>expired</option>

- </Select>

- </HStack>

- </Th>

- <Th

- position="sticky"

- top={{ base: 'unset', md: top }}

- width="350px"

- minW="230px"

- cursor={'pointer'}

- onClick={handleSort.bind(null, 'used_traffic')}

- >

- <HStack>

- <span>{t('usersTable.dataUsage')}</span>

- <Sort sort={filters.sort} column="used_traffic" />

- </HStack>

- </Th>

- <Th

- position="sticky"

- top={{ base: 'unset', md: top }}

- width="200px"

- minW="180px"

- />

- </Tr>

- </Thead>

- <Tbody>

- {useTable &&

- users?.map((user, i) => {

- return (

- <Tr

- key={user.username}

- className={classNames('interactive', {

- 'last-row': i === users.length - 1,

- })}

- onClick={() => onEditingUser(user)}

- >

- <Td minW="140px">

- <div className="flex-status">

- <OnlineBadge lastOnline={user.online_at} />

- {user.username}

- <OnlineStatus lastOnline={user.online_at} />

- </div>

- </Td>

- <Td width="400px" minW="150px">

- <StatusBadge

- expiryDate={user.expire}

- status={user.status}

- />

- </Td>

- <Td width="350px" minW="230px">

- <UsageSlider

- totalUsedTraffic={user.lifetime_used_traffic}

- dataLimitResetStrategy={user.data_limit_reset_strategy}

- used={user.used_traffic}

- total={user.data_limit}

- colorScheme={statusColors[user.status].bandWidthColor}

- />

- </Td>

- <Td width="200px" minW="180px">

- <ActionButtons user={user} />

- </Td>

- </Tr>

- );

- })}

- {users.length == 0 && (

- <Tr>

- <Td colSpan={4}>

- <EmptySection isFiltered={isFiltered} />

- </Td>

- </Tr>

- )}

- </Tbody>

- </Table>

- <Pagination />

- </Box>

- );

-};

-

-type ActionButtonsProps = {

- user: User;

-};

-

-const ActionButtons: FC<ActionButtonsProps> = ({ user }) => {

- const { setQRCode, setSubLink } = useDashboard();

-

- const proxyLinks = user.links.join('\r\n');

-

- const [copied, setCopied] = useState([-1, false]);

- useEffect(() => {

- if (copied[1]) {

- setTimeout(() => {

- setCopied([-1, false]);

- }, 1000);

- }

- }, [copied]);

- return (

- <HStack

- justifyContent="flex-end"

- onClick={(e) => {

- e.preventDefault();

- e.stopPropagation();

- }}

- >

- <CopyToClipboard

- text={

- user.subscription_url.startsWith('/')

- ? window.location.origin + user.subscription_url

- : user.subscription_url

- }

- onCopy={() => {

- setCopied([0, true]);

- }}

- >

- <div>

- <Tooltip

- label={

- copied[0] == 0 && copied[1]

- ? t('usersTable.copied')

- : t('usersTable.copyLink')

- }

- placement="top"

- >

- <IconButton

- p="0 !important"

- aria-label="copy subscription link"

- bg="transparent"

- _dark={{

- _hover: {

- bg: 'gray.700',

- },

- }}

- size={{

- base: 'sm',

- md: 'md',

- }}

- >

- {copied[0] == 0 && copied[1] ? (

- <CopiedIcon />

- ) : (

- <SubscriptionLinkIcon />

- )}

- </IconButton>

- </Tooltip>

- </div>

- </CopyToClipboard>

- <CopyToClipboard

- text={proxyLinks}

- onCopy={() => {

- setCopied([1, true]);

- }}

- >

- <div>

- <Tooltip

- label={

- copied[0] == 1 && copied[1]

- ? t('usersTable.copied')

- : t('usersTable.copyConfigs')

- }

- placement="top"

- >

- <IconButton

- p="0 !important"

- aria-label="copy configs"

- bg="transparent"

- _dark={{

- _hover: {

- bg: 'gray.700',

- },

- }}

- size={{

- base: 'sm',

- md: 'md',

- }}

- >

- {copied[0] == 1 && copied[1] ? <CopiedIcon /> : <CopyIcon />}

- </IconButton>

- </Tooltip>

- </div>

- </CopyToClipboard>

- <Tooltip label="QR Code" placement="top">

- <IconButton

- p="0 !important"

- aria-label="qr code"

- bg="transparent"

- _dark={{

- _hover: {

- bg: 'gray.700',

- },

- }}

- size={{

- base: 'sm',

- md: 'md',

- }}

- onClick={() => {

- setQRCode(user.links);

- setSubLink(user.subscription_url);

- }}

- >

- <QRIcon />

- </IconButton>

- </Tooltip>

- </HStack>

- );

-};

-

-type EmptySectionProps = {

- isFiltered: boolean;

-};

-

-const EmptySection: FC<EmptySectionProps> = ({ isFiltered }) => {

- const { onCreateUser } = useDashboard();

- return (

- <Box

- padding="5"

- py="8"

- display="flex"

- alignItems="center"

- flexDirection="column"

- gap={4}

- w="full"

- >

- <EmptySectionIcon

- maxHeight="200px"

- maxWidth="200px"

- _dark={{

- 'path[fill="#fff"]': {

- fill: 'gray.800',

- },

- 'path[fill="#f2f2f2"], path[fill="#e6e6e6"], path[fill="#ccc"]': {

- fill: 'gray.700',

- },

- 'circle[fill="#3182CE"]': {

- fill: 'primary.300',

- },

- }}

- _light={{

- 'path[fill="#f2f2f2"], path[fill="#e6e6e6"], path[fill="#ccc"]': {

- fill: 'gray.300',

- },

- 'circle[fill="#3182CE"]': {

- fill: 'primary.500',

- },

- }}

- />

- <Text fontWeight="medium" color="gray.600" _dark={{ color: 'gray.400' }}>

- {isFiltered ? t('usersTable.noUserMatched') : t('usersTable.noUser')}

- </Text>

- {!isFiltered && (

- <Button

- size="sm"

- colorScheme="primary"

- onClick={() => onCreateUser(true)}

- >

- {t('createUser')}

- </Button>

- )}

- </Box>

- );

-};

-import { Service } from 'types/Service';

-import { getUsersPerPageLimitSize } from 'utils/userPreferenceStorage';

-export type FilterType = {

- username?: string;

- limit?: number;

- offset?: number;

- sort: string;

- status?: 'active' | 'disabled' | 'limited' | 'expired' | 'on_hold';

- start?: string;

- end?: string;

- tag: string;

- protocol: ProtocolType;

- network: string;

- tls: string;

- port?: number;

-export type Inbounds = Map<ProtocolType, InboundType[]>;

- isCreatingNewUser: boolean;

- editingUser: User | null | undefined;

- deletingUser: User | null;

- version: string | null;

- users: {

- users: User[];

- total: number;

- };

- inbounds: Inbounds;

- services: Service[];

- loading: boolean;

- filters: FilterType;

- subscribeUrl: string | null;

- QRcodeLinks: string[] | null;

- isEditingHosts: boolean;

- isEditingNodes: boolean;

- isShowingNodesUsage: boolean;

- isResetingAllUsage: boolean;

- resetUsageUser: User | null;

- revokeSubscriptionUser: User | null;

- isEditingCore: boolean;

- activePage: number;

- activatePage: (pageId: PageId) => void;

- onCreateUser: (isOpen: boolean) => void;

- onEditingUser: (user: User | null) => void;

- onDeletingUser: (user: User | null) => void;

- onResetAllUsage: (isResetingAllUsage: boolean) => void;

- refetchUsers: () => void;

- refetchServices: () => void;

- resetAllUsage: () => Promise<void>;

- onFilterChange: (filters: Partial<FilterType>) => void;

- deleteUser: (user: User) => Promise<void>;

- createUser: (user: UserCreate) => Promise<void>;

- editUser: (user: UserCreate) => Promise<void>;

- fetchUserUsage: (user: User, query: FilterUsageType) => Promise<void>;

- setQRCode: (links: string[] | null) => void;

- setSubLink: (subscribeURL: string | null) => void;

- onEditingHosts: (isEditingHosts: boolean) => void;

- onEditingNodes: (isEditingHosts: boolean) => void;

- onShowingNodesUsage: (isShowingNodesUsage: boolean) => void;

- resetDataUsage: (user: User) => Promise<void>;

- revokeSubscription: (user: User) => Promise<void>;

-export const fetchUsers = async (query: FilterType): Promise<User[]> => {

- if (!query[key as keyof FilterType]) delete query[key as keyof FilterType];

-export const fetchServices = async (): Promise<Service[]> => {

- useDashboard.setState({

- inbounds: new Map(Object.entries(inbounds)) as Inbounds,

- });

- filters: {

- inbounds: new Map(),

- fetchServices();

- fetchUsers(get().filters);

- filters: {

- ...get().filters,

- {t('login')}

-import { FC } from 'react';

-import { Text } from '@chakra-ui/react';

- return <Text>Serviced</Text>;

-import { UsersTable } from 'components/UsersTable';

-import { Filters } from 'components/Filters';

- <Filters />

- name: Optional[str] = Field(None, nullable=True)

- return [u.id for u in users]

- return [i.id for i in inbounds]