= ({ filters, handleStatusFilter, options }) => {
- return (
-
-
-
- )
-}
diff --git a/app/dashboard/src/components/textarea/index.tsx b/app/dashboard/src/components/textarea/index.tsx
deleted file mode 100644
index 04dfebf..0000000
--- a/app/dashboard/src/components/textarea/index.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import {
- chakra,
- FormControl,
- FormErrorMessage,
- FormLabel,
- InputGroup,
- InputLeftAddon,
- InputRightAddon,
- InputRightElement,
- Textarea as ChakraTextarea,
- TextareaProps as ChakraTextareaProps,
-} from '@chakra-ui/react';
-import { XMarkIcon } from '@heroicons/react/24/outline';
-import classNames from 'classnames';
-import React, { PropsWithChildren, ReactNode } from 'react';
-
-const ClearIcon = chakra(XMarkIcon, {
- baseStyle: {
- w: 4,
- h: 4,
- },
-});
-
-export type TextareaProps = PropsWithChildren<
- {
- value?: string;
- className?: string;
- endAdornment?: ReactNode;
- startAdornment?: ReactNode;
- type?: string;
- placeholder?: string;
- onChange?: (e: any) => void;
- onBlur?: (e: any) => void;
- onClick?: (e: any) => void;
- name?: string;
- error?: string;
- disabled?: boolean;
- step?: number;
- label?: string;
- clearable?: boolean;
- } & ChakraTextareaProps
->;
-
-export const Textarea = React.forwardRef(
- (
- {
- disabled,
- step,
- label,
- className,
- startAdornment,
- endAdornment,
- placeholder,
- onChange,
- onBlur,
- name,
- value,
- onClick,
- error,
- clearable = false,
- ...props
- },
- ref
- ) => {
- const clear = () => {
- if (onChange)
- onChange({
- target: {
- value: '',
- name,
- },
- });
- };
- const { size = 'md' } = props;
-
- return (
-
- {label && {label}}
-
- {startAdornment && {startAdornment}}
- {/* @ts-ignore */}
-
- {endAdornment && (
-
- {endAdornment}
-
- )}
- {clearable && value && value.length && (
-
-
-
- )}
-
- {!!error && {error}}
-
- );
- }
-);
diff --git a/app/dashboard/src/components/theme-toggler/index.tsx b/app/dashboard/src/components/theme-toggler/index.tsx
deleted file mode 100644
index f00e1b6..0000000
--- a/app/dashboard/src/components/theme-toggler/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-
-import { IconButton, chakra, useColorMode } from '@chakra-ui/react';
-import { MoonIcon, SunIcon } from '@heroicons/react/24/outline';
-import { updateThemeColor } from 'utils/themeColor';
-
-const iconProps = {
- baseStyle: {
- w: 4,
- h: 4,
- },
-};
-
-const DarkThemeIcon = chakra(MoonIcon, iconProps);
-const LightThemeIcon = chakra(SunIcon, iconProps);
-
-export const ThemeToggle = () => {
- const { colorMode, toggleColorMode } = useColorMode();
- return (
- {
- updateThemeColor(colorMode == 'dark' ? 'light' : 'dark');
- toggleColorMode();
- }}
- >
- {colorMode === 'light' ? : }
-
- );
-};
diff --git a/app/dashboard/src/components/usage-filter/index.tsx b/app/dashboard/src/components/usage-filter/index.tsx
deleted file mode 100644
index 36576fd..0000000
--- a/app/dashboard/src/components/usage-filter/index.tsx
+++ /dev/null
@@ -1,379 +0,0 @@
-import {
- Box,
- ColorMode,
- HStack,
- Icon,
- SimpleGrid,
- Tab,
- TabList,
- TabPanel,
- TabPanels,
- Tabs,
- Text,
- UseRadioProps,
- VStack,
- useBreakpointValue,
- useDisclosure,
- useOutsideClick,
- useRadio,
- useRadioGroup,
-} from '@chakra-ui/react';
-import { CalendarIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
-import { ApexOptions } from 'apexcharts';
-import { FilterUsageType } from 'types/filter';
-import dayjs, { ManipulateType } from 'dayjs';
-import { FC, useRef, useState } from 'react';
-import ReactDatePicker from 'react-datepicker';
-import { useTranslation } from 'react-i18next';
-import { generateDistinctColors } from 'utils/color';
-import { formatBytes } from 'utils/formatByte';
-
-type DateType = Date | null;
-
-const FilterItem: FC = ({
- border,
- ...props
-}) => {
- const { getInputProps, getRadioProps } = useRadio(props);
- const fontSize = useBreakpointValue({ base: 'xs', md: 'sm' });
- return (
-
-
-
- {props.children}
-
-
- );
-};
-
-export type UsageFilterProps = {
- onChange: (filter: string, query: FilterUsageType) => void;
- defaultValue: string;
-};
-
-export const UsageFilter: FC = ({
- onChange,
- defaultValue,
- ...props
-}) => {
- const { t, i18n } = useTranslation();
-
- const filterOptions = useBreakpointValue({
- base: ['7h', '1d', '3d', '1w'],
- md: ['7h', '1d', '3d', '1w', '1m', '3m'],
- })!;
- const filterOptionTypes = {
- h: 'hour',
- d: 'day',
- w: 'week',
- m: 'month',
- y: 'year',
- };
- const customFilterOptions = useBreakpointValue({
- base: [
- { title: 'hours', options: ['1h', '3h', '6h', '12h'] },
- { title: 'days', options: ['1d', '2d', '3d', '4d'] },
- { title: 'weeks', options: ['1w', '2w', '3w', '4w'] },
- { title: 'months', options: ['1m', '2m', '3m', '6m'] },
- ],
- md: [
- { title: 'hours', options: ['1h', '2h', '3h', '6h', '8h', '12h'] },
- { title: 'days', options: ['1d', '2d', '3d', '4d', '5d', '6d'] },
- { title: 'weeks', options: ['1w', '2w', '3w', '4w'] },
- { title: 'months', options: ['1m', '2m', '3m', '6m', '8m'] },
- ],
- })!;
- const {
- getRootProps,
- getRadioProps,
- } = useRadioGroup({
- name: 'filter',
- defaultValue: defaultValue,
- onChange: (value: string) => {
- if (value === 'custom') {
- return;
- }
-
- closeCustom();
-
- if (filterOptions.indexOf(value) >= 0) {
- setCustomLabel(t('userDialog.custom'));
- setCustom(false);
- } else {
- setCustomLabel(t('userDialog.custom') + ` (${value})`);
- setCustom(true);
- }
-
- const num = Number(value.substring(0, value.length - 1));
- const unit =
- filterOptionTypes[
- value[value.length - 1] as keyof typeof filterOptionTypes
- ];
- onChange(value, {
- start: dayjs()
- .utc()
- .subtract(num, unit as ManipulateType)
- .format('YYYY-MM-DDTHH:00:00'),
- });
- },
- });
-
- const {
- isOpen: isCustomOpen,
- onOpen: openCustom,
- onClose: closeCustom,
- } = useDisclosure();
- const customRef = useRef(null);
- useOutsideClick({ ref: customRef, handler: closeCustom });
-
- const [customLabel, setCustomLabel] = useState(t('userDialog.custom'));
- const [custom, setCustom] = useState(false);
- const [tabIndex, setTabIndex] = useState(0);
-
- const monthsShown = useBreakpointValue({ base: 1, md: 2 });
- const fontSize = useBreakpointValue({ base: 'xs', md: 'sm' });
- const [startDate, setStartDate] = useState(null as DateType);
- const [endDate, setEndDate] = useState(null as DateType);
- const onDateChange = (dates: [DateType, DateType]) => {
- const [start, end] = dates;
- if (endDate && !end) {
- setStartDate(null);
- setEndDate(null);
- } else {
- setStartDate(start);
- setEndDate(end);
- if (start && end) {
- closeCustom();
- onChange('custom', {
- start: dayjs(start).format('YYYY-MM-DDT00:00:00'),
- end: dayjs(end).format('YYYY-MM-DDT23:59:59'),
- });
- }
- }
- };
-
- return (
-
- {tabIndex == 0 && (
-
- {filterOptions.map((value) => {
- return (
-
- {value}
-
- );
- })}
- {
- setStartDate(null);
- setEndDate(null);
- openCustom();
- }}
- cursor="pointer"
- borderRadius="md"
- w="full"
- fontSize={fontSize}
- px={3}
- py={1}
- bg={custom ? 'primary.500' : 'unset'}
- color={custom ? 'white' : 'unset'}
- borderColor={custom ? 'primary.500' : 'unset'}
- >
-
- {customLabel}
-
-
-
-
- )}
- {tabIndex == 1 && (
-
-
- {startDate
- ? dayjs(startDate).format('YYYY-MM-DD (00:00)')
- : t('userDialog.startDate')}
-
-
-
- {endDate
- ? dayjs(endDate).format('YYYY-MM-DD (23:59)')
- : t('userDialog.endDate')}
-
-
-
- )}
-
- setTabIndex(index)}>
-
- {t('userDialog.relative')}
- {t('userDialog.absolute')}
-
-
-
-
- {customFilterOptions.map((row) => {
- return (
-
-
-
- {t('userDialog.' + row.title)}
-
- {row.options.map((value: string) => {
- return (
-
- {value}
-
- );
- })}
-
-
- );
- })}
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export function createUsageConfig(
- colorMode: ColorMode,
- title: string,
- series: any = [],
- labels: any = []
-) {
- const total = formatBytes((series as [number]).reduce((t, c) => (t += c), 0));
- return {
- series: series,
- options: {
- labels: labels,
- chart: {
- width: '100%',
- height: '100%',
- type: 'donut',
- animations: {
- enabled: false,
- },
- },
- title: {
- text: `${title}${total}`,
- align: 'center',
- style: {
- fontWeight: 'var(--chakra-fontWeights-medium)',
- color:
- colorMode === 'dark' ? 'var(--chakra-colors-gray-300)' : undefined,
- },
- },
- legend: {
- position: 'bottom',
- labels: {
- colors: colorMode === 'dark' ? '#CBD5E0' : undefined,
- useSeriesColors: false,
- },
- },
- stroke: {
- width: 1,
- colors: undefined,
- },
- dataLabels: {
- formatter: (_, { seriesIndex, w }) => {
- return formatBytes(w.config.series[seriesIndex], 1);
- },
- },
- tooltip: {
- custom: ({ series, seriesIndex, w }) => {
- const readable = formatBytes(series[seriesIndex], 1);
- const total = Math.max(
- (series as [number]).reduce((t, c) => (t += c)),
- 1
- );
- const percent =
- Math.round((series[seriesIndex] / total) * 1000) / 10 + '%';
- return `
-
- ${w.config.labels[seriesIndex]}: ${percent}, ${readable}
-
- `;
- },
- },
- colors: generateDistinctColors(series.length),
- } as ApexOptions,
- };
-}
diff --git a/app/dashboard/src/constants/IconBaseStyle.ts b/app/dashboard/src/constants/IconBaseStyle.ts
deleted file mode 100644
index 32ba980..0000000
--- a/app/dashboard/src/constants/IconBaseStyle.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-
-export const IconBaseStyle = {
- baseStyle: {
- strokeWidth: '2px',
- color: 'primary.500',
- w: 5,
- h: 5,
- mx: '6px',
- },
-}
diff --git a/app/dashboard/src/constants/NodesSettings.tsx b/app/dashboard/src/constants/NodesSettings.tsx
deleted file mode 100644
index f8ffcbf..0000000
--- a/app/dashboard/src/constants/NodesSettings.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-export const statusColors: {
- [key: string]: {
- statusColor: string;
- };
-} = {
- connected: {
- statusColor: 'green',
- },
- disabled: {
- statusColor: 'gray',
- },
- connecting: {
- statusColor: 'orange',
- },
- error: {
- statusColor: 'red',
- },
-};
diff --git a/app/dashboard/src/constants/Project.ts b/app/dashboard/src/constants/Project.ts
deleted file mode 100644
index 8532b7d..0000000
--- a/app/dashboard/src/constants/Project.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const REPO_URL = 'https://github.com/khodedawsh/Marzneshin';
-export const ORGANIZATION_URL = 'https://github.com/khodedawosh';
-export const CO_CONTRIBUTOR = 'https://mardin.cc/';
-export const DONATION_URL = 'https://github.com/khodedawosh/Marzneshin#donation';
diff --git a/app/dashboard/src/constants/Proxies.tsx b/app/dashboard/src/constants/Proxies.tsx
deleted file mode 100644
index ba5cbb1..0000000
--- a/app/dashboard/src/constants/Proxies.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { ProxyHostSecurity } from 'types';
-
-export const proxyHostSecurity: { title: string; value: ProxyHostSecurity }[] =
- [
- {
- title: 'Inbound\'s default',
- value: 'inbound_default',
- },
- {
- title: 'TLS',
- value: 'tls',
- },
- {
- title: 'None',
- value: 'none',
- },
- ];
-
-export const proxyALPN: { title: string; value: string }[] = [
- {
- title: '',
- value: '',
- },
- {
- title: 'h2',
- value: 'h2',
- },
- {
- title: 'http/1.1',
- value: 'http/1.1',
- },
- {
- title: 'h2, http/1.1',
- value: 'h2,http/1.1',
- },
-];
-
-export const proxyFingerprint: { title: string; value: string }[] = [
- {
- title: '',
- value: '',
- },
- ...[
- 'chrome',
- 'firefox',
- 'safari',
- 'ios',
- 'android',
- 'edge',
- '360',
- 'qq',
- 'random',
- 'randomized',
- ].map((key) => ({ title: key, value: key })),
-];
-
-export const XTLSFlows = [
- { title: 'none', value: '' },
- { title: 'xtls-rprx-vision', value: 'xtls-rprx-vision' },
-];
-
-export const shadowsocksMethods = [
- 'aes-128-gcm',
- 'aes-256-gcm',
- 'chacha20-ietf-poly1305',
-];
diff --git a/app/dashboard/src/constants/Settings.tsx b/app/dashboard/src/constants/Settings.tsx
deleted file mode 100644
index f8c92a3..0000000
--- a/app/dashboard/src/constants/Settings.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { chakra, ChakraComponent } from '@chakra-ui/react';
-import {
- ClockIcon,
- ExclamationCircleIcon,
- NoSymbolIcon,
- WifiIcon,
-} from '@heroicons/react/24/outline';
-import { ForwardRefExoticComponent, SVGProps } from 'react';
-import { DataLimitResetStrategy } from 'types';
-
-const iconProps = {
- baseStyle: {
- strokeWidth: '2px',
- w: 4,
- h: 4,
- },
-};
-const ActiveStatusIcon = chakra(WifiIcon, iconProps);
-const DisabledStatusIcon = chakra(NoSymbolIcon, iconProps);
-const LimitedStatusIcon = chakra(ExclamationCircleIcon, iconProps);
-const ExpiredStatusIcon = chakra(ClockIcon, iconProps);
-const On_holdStatusIcon = chakra(ClockIcon, iconProps);
-
-export const resetStrategy: { title: string; value: DataLimitResetStrategy }[] =
- [
- {
- title: 'No',
- value: 'no_reset',
- },
- {
- title: 'Daily',
- value: 'day',
- },
- {
- title: 'Weekly',
- value: 'week',
- },
- {
- title: 'Monthly',
- value: 'month',
- },
- {
- title: 'Annually',
- value: 'year',
- },
- ];
-
-export const statusColors: {
- [key: string]: {
- statusColor: string;
- bandWidthColor: string;
- icon: ChakraComponent>>;
- };
-} = {
- active: {
- statusColor: 'green',
- bandWidthColor: 'primary',
- icon: ActiveStatusIcon,
- },
- connected: {
- statusColor: 'green',
- bandWidthColor: 'primary',
- icon: ActiveStatusIcon,
- },
- healthy: {
- statusColor: 'green',
- bandWidthColor: 'primary',
- icon: ActiveStatusIcon,
- },
- disabled: {
- statusColor: 'gray',
- bandWidthColor: 'gray',
- icon: DisabledStatusIcon,
- },
- expired: {
- statusColor: 'orange',
- bandWidthColor: 'orange',
- icon: ExpiredStatusIcon,
- },
- on_hold: {
- statusColor: 'purple',
- bandWidthColor: 'purple',
- icon: On_holdStatusIcon,
- },
- connecting: {
- statusColor: 'orange',
- bandWidthColor: 'orange',
- icon: ExpiredStatusIcon,
- },
- unhealthy: {
- statusColor: 'red',
- bandWidthColor: 'red',
- icon: LimitedStatusIcon,
- },
- limited: {
- statusColor: 'red',
- bandWidthColor: 'red',
- icon: LimitedStatusIcon,
- },
- error: {
- statusColor: 'red',
- bandWidthColor: 'red',
- icon: LimitedStatusIcon,
- },
-};
diff --git a/app/dashboard/src/constants/query-ids.ts b/app/dashboard/src/constants/query-ids.ts
deleted file mode 100644
index 9ded4b9..0000000
--- a/app/dashboard/src/constants/query-ids.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-
-export const queryIds = {
- hosts: 'hosts',
- inbounds: 'inbounds',
- users: 'users',
- nodes: 'nodes',
- services: 'services',
-};
diff --git a/app/dashboard/src/index.scss b/app/dashboard/src/index.scss
deleted file mode 100644
index 782a579..0000000
--- a/app/dashboard/src/index.scss
+++ /dev/null
@@ -1,292 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
-
-body {
- overflow: hidden;
-}
-
-.bg-blue-animate {
- animation: blur-animate 200ms ease-in;
- backdrop-filter: blur(10px);
-}
-
-@keyframes blur-animate {
- from {
- backdrop-filter: blur(1px);
- }
-
- to {
- backdrop-filter: blur(10px);
- }
-}
-
-.animate-spin {
- animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
- from {
- transform: rotate(0deg);
- }
-
- to {
- transform: rotate(360deg);
- }
-}
-
-table thead {
- th:first-of-type {
- border-top-left-radius: 8px;
- }
-
- th:last-of-type {
- border-top-right-radius: 8px;
- }
-}
-
-.last-row {
- td:first-of-type {
- border-bottom-left-radius: 8px;
- }
-
- td:last-of-type {
- border-bottom-right-radius: 8px;
- }
-}
-
-.slick-prev {
- left: -40px;
-}
-
-.slick-next {
- right: -40px;
-}
-
-.slick-prev,
-.slick-next {
- z-index: 100;
-}
-
-.chakra-popover__popper {
- z-index: 9999 !important;
-}
-
-.inbound-item .chakra-checkbox__label {
- max-width: 100%;
- width: 100%;
-}
-
-// data picker
-.react-datepicker__navigation.react-datepicker__navigation--previous,
-.react-datepicker__navigation.react-datepicker__navigation--next {
- padding-top: 6px;
-}
-
-.react-datepicker {
- background-color: var(--chakra-colors-white) !important;
- border: 1px solid var(--chakra-colors-gray-200);
- border-radius: var(--chakra-radii-md) !important;
- position: relative;
-}
-
-.chakra-ui-dark .react-datepicker {
- background-color: var(--chakra-colors-gray-700) !important;
- border: 1px solid var(--chakra-colors-gray-600);
- border-radius: var(--chakra-radii-md) !important;
- position: relative;
-}
-
-.react-datepicker__header {
- text-align: center;
- background-color: unset;
- position: relative;
- border-bottom: 1px solid var(--chakra-colors-gray-200);
-}
-
-.chakra-ui-dark .react-datepicker__header {
- border-bottom: 1px solid var(--chakra-colors-gray-600);
-}
-
-.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
- border-top: none;
- border-bottom-color: var(--chakra-colors-white);
-}
-
-.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
- top: -1px;
- border-bottom-color: var(--chakra-colors-gray-200);
-}
-
-.chakra-ui-dark .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
- border-top: none;
- border-bottom-color: var(--chakra-colors-gray-700);
-}
-
-.chakra-ui-dark .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
- top: -1px;
- border-bottom-color: var(--chakra-colors-gray-600);
-}
-
-.react-datepicker__current-month,
-.react-datepicker__day-name,
-.react-datepicker__day {
- color: var(--chakra-colors-chakra-body-text) !important;
-}
-
-.chakra-ui-dark .react-datepicker__current-month,
-.chakra-ui-dark .react-datepicker__day-name,
-.chakra-ui-dark .react-datepicker__day {
- color: var(--chakra-colors-gray-300) !important;
-}
-
-.react-datepicker__day:hover {
- border-radius: 0.3rem;
- background-color: var(--chakra-colors-primary-300) !important;
- color: var(--chakra-colors-white) !important;
-}
-
-.chakra-ui-dark .react-datepicker__day:hover {
- border-radius: 0.3rem;
- background-color: var(--chakra-colors-primary-500) !important;
- color: var(--chakra-colors-gray-800) !important;
-}
-
-.react-datepicker__day--disabled {
- color: var(--chakra-colors-gray-400) !important;
-}
-
-.react-datepicker__day--disabled:hover {
- background-color: transparent !important;
- color: var(--chakra-colors-gray-400) !important;
-}
-
-.chakra-ui-dark .react-datepicker__day--disabled {
- color: var(--chakra-colors-gray-500) !important;
-}
-
-.chakra-ui-dark .react-datepicker__day--disabled:hover {
- background-color: transparent !important;
- color: var(--chakra-colors-gray-500) !important;
-}
-
-.react-datepicker__day--keyboard-selected,
-.react-datepicker__day--selected,
-.react-datepicker__day--in-selecting-range,
-.react-datepicker__day--in-range {
- border-radius: 0.3rem;
- background-color: var(--chakra-colors-primary-500) !important;
- color: var(--chakra-colors-white) !important;
-}
-
-.chakra-ui-dark .react-datepicker__day--keyboard-selected,
-.chakra-ui-dark .react-datepicker__day--selected,
-.chakra-ui-dark .react-datepicker__day--in-selecting-range,
-.chakra-ui-dark .react-datepicker__day--in-range {
- border-radius: 0.3rem;
- background-color: var(--chakra-colors-primary-200) !important;
- color: var(--chakra-colors-gray-800) !important;
-}
-
-.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
- border-radius: 0.3rem;
- background-color: var(--chakra-colors-primary-400) !important;
-}
-
-.chakra-ui-dark .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
- border-radius: 0.3rem;
- background-color: var(--chakra-colors-primary-400) !important;
-}
-
-.react-datepicker__day--outside-month {
- visibility: hidden;
-}
-
-.datepicker-panel .react-datepicker {
- background-color: unset;
- border: unset;
- border-radius: unset;
- display: inline-block;
- position: relative;
-}
-
-.green {
- background: #66ff99;
-}
-
-.red {
- background: #e53e3e;
-}
-
-.orange {
- background: #fbd38d;
-}
-
-.circle {
- min-width: 10px;
- min-height: 10px;
- border-radius: 50%;
-
- box-shadow: 0px 0px 1px 1px #0000001a;
-}
-
-.pulse {
- animation: pulse-animation 3s infinite;
-}
-
-.pulse.green {
- animation: green-pulse-animation 3s infinite;
-}
-
-.pulse.red {
- animation: red-pulse-animation 3s infinite;
-}
-
-.pulse.orange {
- animation: orange-pulse-animation 3s infinite;
-}
-
-@keyframes pulse-animation {
- 0% {
- box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.4);
- }
-
- 100% {
- box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
- }
-}
-
-@keyframes green-pulse-animation {
- 0% {
- box-shadow: 0 0 0 0px #66ff9975;
- }
-
- 100% {
- box-shadow: 0 0 0 10px #66ff9900;
- }
-}
-
-@keyframes red-pulse-animation {
- 0% {
- box-shadow: 0 0 0 0px #e53e3e8c;
- }
-
- 100% {
- box-shadow: 0 0 0 10px #e53e3e00;
- }
-}
-
-@keyframes orange-pulse-animation {
- 0% {
- box-shadow: 0 0 0 0px #fbd38d85;
- }
-
- 100% {
- box-shadow: 0 0 0 10px #fbd38d00;
- }
-}
-
-.flex-status {
- display: flex;
- align-items: center;
- justify-content: start;
- gap: .7rem;
-}
diff --git a/app/dashboard/src/index.tsx b/app/dashboard/src/index.tsx
deleted file mode 100644
index 2dd49f0..0000000
--- a/app/dashboard/src/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { ChakraProvider, localStorageManager } from '@chakra-ui/react';
-import dayjs from 'dayjs';
-import Duration from 'dayjs/plugin/duration';
-import LocalizedFormat from 'dayjs/plugin/localizedFormat';
-import RelativeTime from 'dayjs/plugin/relativeTime';
-import Timezone from 'dayjs/plugin/timezone';
-import utc from 'dayjs/plugin/utc';
-import 'locales/i18n';
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { queryClient } from 'service/react-query';
-import { updateThemeColor } from 'utils/themeColor';
-import { theme } from '../chakra.config';
-import App from './App';
-import 'index.scss';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-
-dayjs.extend(Timezone);
-dayjs.extend(LocalizedFormat);
-dayjs.extend(utc);
-dayjs.extend(RelativeTime);
-dayjs.extend(Duration);
-
-updateThemeColor(localStorageManager.get() || 'light');
-
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-
-
-
-
-
-
-
-
-);
diff --git a/app/dashboard/src/layouts/console-layout.tsx b/app/dashboard/src/layouts/console-layout.tsx
deleted file mode 100644
index b932b3c..0000000
--- a/app/dashboard/src/layouts/console-layout.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Box } from '@chakra-ui/react';
-import { PanelGroup, Panel, PanelResizeHandle, ImperativePanelHandle } from 'react-resizable-panels';
-import { Footer } from 'components/footer';
-import { Header } from 'components/header';
-import { Sidebar } from 'components/sidebar';
-import { Suspense, useRef } from 'react';
-import { Outlet } from 'react-router-dom';
-import { useDashboard } from 'stores';
-
-export const ConsoleLayout = () => {
- const ref = useRef(null);
- const { collapseSidebar, expandSidebar } = useDashboard();
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default ConsoleLayout;
diff --git a/app/dashboard/src/locales/i18n.ts b/app/dashboard/src/locales/i18n.ts
deleted file mode 100644
index a05afb8..0000000
--- a/app/dashboard/src/locales/i18n.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { joinPaths } from '@remix-run/router';
-
-import fa from 'date-fns/locale/fa-IR';
-import ru from 'date-fns/locale/ru';
-import zh from 'date-fns/locale/zh-CN';
-import dayjs from 'dayjs';
-import i18n from 'i18next';
-import LanguageDetector from 'i18next-browser-languagedetector';
-import HttpApi from 'i18next-http-backend';
-import { registerLocale } from 'react-datepicker';
-import { initReactI18next } from 'react-i18next';
-
-declare module 'i18next' {
- interface CustomTypeOptions {
- returnNull: false;
- }
-}
-
-i18n
- .use(LanguageDetector)
- .use(initReactI18next)
- .use(HttpApi)
- .init(
- {
- debug: import.meta.env.NODE_ENV === 'development',
- returnNull: false,
- fallbackLng: 'en',
- interpolation: {
- escapeValue: false,
- },
- react: {
- useSuspense: false,
- },
- load: 'languageOnly',
- detection: {
- caches: ['localStorage', 'sessionStorage', 'cookie'],
- },
- backend: {
- loadPath: joinPaths([import.meta.env.BASE_URL, 'locales/{{lng}}.json']),
- },
- },
- function() {
- dayjs.locale(i18n.language);
- }
- );
-
-i18n.on('languageChanged', (lng) => {
- dayjs.locale(lng);
-});
-
-// DataPicker
-registerLocale('zh-cn', zh);
-registerLocale('ru', ru);
-registerLocale('fa', fa);
-
-export default i18n;
diff --git a/app/dashboard/src/pages/home/index.tsx b/app/dashboard/src/pages/home/index.tsx
deleted file mode 100644
index d9cf7f9..0000000
--- a/app/dashboard/src/pages/home/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-
-import Page from 'components/page';
-import { FC } from 'react';
-import { Statistics } from './statistics';
-import { pages } from 'stores';
-
-export const Home: FC = () => {
- return (
-
-
-
- );
-};
-
-export default Home;
diff --git a/app/dashboard/src/pages/home/statistics.tsx b/app/dashboard/src/pages/home/statistics.tsx
deleted file mode 100644
index a6cac6b..0000000
--- a/app/dashboard/src/pages/home/statistics.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { BoxProps, chakra, HStack, Text } from '@chakra-ui/react';
-import {
- ChartBarIcon,
- ChartPieIcon,
- UsersIcon,
-} from '@heroicons/react/24/outline';
-import { useDashboard } from 'stores';
-import { FC } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useQuery } from '@tanstack/react-query';
-import { fetch } from 'service/http';
-import { formatBytes, numberWithCommas } from 'utils/formatByte';
-import { useEffect } from 'react';
-import { StatisticsCardInLine, StatisticsQueryKey } from 'components/statistics-card';
-
-const TotalUsersIcon = chakra(UsersIcon, {
- baseStyle: {
- w: 5,
- h: 5,
- position: 'relative',
- zIndex: '2',
- },
-});
-
-const NetworkIcon = chakra(ChartBarIcon, {
- baseStyle: {
- w: 5,
- h: 5,
- position: 'relative',
- zIndex: '2',
- },
-});
-
-const MemoryIcon = chakra(ChartPieIcon, {
- baseStyle: {
- w: 5,
- h: 5,
- position: 'relative',
- zIndex: '2',
- },
-});
-
-
-export const Statistics: FC = (props) => {
- const { version: currentVersion } = useDashboard();
- const { data: systemData } = useQuery({
- queryKey: [StatisticsQueryKey],
- queryFn: () => fetch('/system'),
- refetchInterval: 5000,
- });
-
- useEffect(() => {
- if (systemData?.version !== currentVersion && systemData !== undefined)
- useDashboard.setState({ version: systemData.version })
- }, [systemData]);
-
- const { t } = useTranslation();
- return (
-
-
- {numberWithCommas(systemData.users_active)}
-
- / {numberWithCommas(systemData.total_user)}
-
-
- )
- }
- icon={}
- />
- }
- />
-
- {formatBytes(systemData.mem_used, 1, true)[0]}
-
- {formatBytes(systemData.mem_used, 1, true)[1]} /{' '}
- {formatBytes(systemData.mem_total, 1)}
-
-
- )
- }
- icon={}
- />
-
- );
-};
diff --git a/app/dashboard/src/pages/hosts/container.tsx b/app/dashboard/src/pages/hosts/container.tsx
deleted file mode 100644
index aafaf0f..0000000
--- a/app/dashboard/src/pages/hosts/container.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { InboundsHostsFilters } from './filters'
-import { InboundsSidebar } from './inbounds-sidebar'
-import { HostsTable } from './table'
-import { queryIds } from 'constants/query-ids';
-import { useQuery } from '@tanstack/react-query';
-import { fetchInbounds, fetchInboundHosts, useInbounds } from 'stores';
-import { Grid, GridItem, } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
-import { Callout } from 'components/callout';
-
-export const InboundsHostsManager = () => {
- const { selectedInbound } = useInbounds();
-
- const { data: inbounds } = useQuery({
- queryKey: [queryIds.inbounds],
- initialData: [],
- queryFn: () => {
- return fetchInbounds();
- }
- });
-
- const { data: hosts } = useQuery({
- queryKey: [queryIds.hosts, selectedInbound?.id],
- initialData: [],
- queryFn: () => {
- return fetchInboundHosts(selectedInbound?.id);
- }
- });
-
- const { t } = useTranslation('noInboundsCallout');
-
- return inbounds.length === 0 ?
-
- : (
- <>
-
-
-
-
-
-
-
-
-
-
-
- )
-}
diff --git a/app/dashboard/src/pages/hosts/dialog/default-values.ts b/app/dashboard/src/pages/hosts/dialog/default-values.ts
deleted file mode 100644
index f6627cc..0000000
--- a/app/dashboard/src/pages/hosts/dialog/default-values.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { HostSchema } from 'stores';
-export const getDefaultValues = (): HostSchema => {
- return {
- host: '',
- sni: '',
- port: null,
- path: '',
- address: '',
- remark: '',
- security: 'inbound_default',
- alpn: '',
- fingerprint: '',
- }
-};
diff --git a/app/dashboard/src/pages/hosts/dialog/icons.tsx b/app/dashboard/src/pages/hosts/dialog/icons.tsx
deleted file mode 100644
index 2787c25..0000000
--- a/app/dashboard/src/pages/hosts/dialog/icons.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-
-import { chakra } from '@chakra-ui/react';
-import { InformationCircleIcon, LinkIcon } from '@heroicons/react/24/outline';
-
-export const ModalIcon = chakra(LinkIcon, {
- baseStyle: {
- w: 5,
- h: 5,
- },
-});
-
-export const InfoIcon = chakra(InformationCircleIcon, {
- baseStyle: {
- w: 4,
- h: 4,
- color: 'gray.400',
- cursor: 'pointer',
- },
-});
diff --git a/app/dashboard/src/pages/hosts/dialog/index.tsx b/app/dashboard/src/pages/hosts/dialog/index.tsx
deleted file mode 100644
index 4ff37ab..0000000
--- a/app/dashboard/src/pages/hosts/dialog/index.tsx
+++ /dev/null
@@ -1,475 +0,0 @@
-import {
- Button,
- Select as ChakraSelect,
- FormControl,
- FormLabel,
- HStack,
- IconButton,
- Modal,
- ModalBody,
- ModalCloseButton,
- ModalContent,
- ModalOverlay,
- Tooltip,
- VStack,
- chakra,
- useToast,
- Spacer,
- Popover,
- PopoverTrigger,
- Portal,
- PopoverContent,
- PopoverArrow,
- PopoverCloseButton,
- Text,
- Badge,
- Alert,
- AlertIcon,
- InputRightElement,
- InputGroup,
-} from '@chakra-ui/react';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { FC, useEffect, useState } from 'react';
-import { useInbounds, HostType, HostSchema, hostSchema } from 'stores';
-import { Trans, useTranslation } from 'react-i18next';
-import { getDefaultValues } from './default-values';
-import { useForm } from 'react-hook-form';
-import 'slick-carousel/slick/slick-theme.css';
-import 'slick-carousel/slick/slick.css';
-import { DialogModalHeader, AddIcon, DeleteIcon } from 'components/dialog';
-import { Input as CustomInput } from 'components/input';
-import { EditIcon } from 'components/table';
-import { InfoIcon } from './icons';
-import {
- proxyALPN,
- proxyFingerprint,
- proxyHostSecurity,
-} from 'constants/Proxies';
-import { RemarkFieldPopover } from './remark-field-popover';
-
-export const Select = chakra(ChakraSelect, {
- baseStyle: {
- bg: 'white',
- _dark: {
- bg: 'gray.700',
- },
- },
-});
-
-export const Input = chakra(CustomInput, {
- baseStyle: {
- bg: 'white',
- _dark: {
- bg: 'gray.700',
- },
- },
-});
-
-/* TODO: Impelement specific errors and input verifications
- * */
-export const HostsDialog: FC = () => {
- const {
- selectedHost, isEditingHost, isCreatingHost, selectedInbound,
- onEditingHost, editHost, createHost, onCreatingHost, onDeletingHost
- } = useInbounds();
- const [loading, setLoading] = useState(false);
- const [error, setError] = useState('');
- const { t } = useTranslation();
- const toast = useToast();
-
- const defaultValueHost: HostSchema = (isEditingHost === true && selectedHost !== null) ? selectedHost : getDefaultValues();
-
- const form = useForm({
- resolver: zodResolver(hostSchema),
- defaultValues: defaultValueHost,
- });
-
- const isOpen = isEditingHost || isCreatingHost;
- const onClose = () => {
- onCreatingHost(false);
- onEditingHost(false, null);
- };
-
- useEffect(() => {
- (isOpen) && form.reset(defaultValueHost);
- }, [isOpen]);
-
- const submit = async (values: HostSchema | HostType) => {
- setLoading(true);
- const methods = { edited: editHost, created: createHost };
- const method = isEditingHost ? 'edited' : 'created';
- const refId = (isEditingHost ? selectedHost?.id : null) ?? selectedInbound?.id;
- setError(null);
- await methods[method](refId, values)
- .then(() => {
- toast({
- title: t(
- isEditingHost ? 'hostsDialog.editHost' : 'hostsDialog.createHost',
- { hoshtName: values.host }
- ),
- status: 'success',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- onClose();
- })
- .catch((err) => {
- if (err?.response?.status === 409 || err?.response?.status === 400)
- setError(err?.response?._data?.detail);
- if (err?.response?.status === 422) {
- Object.keys(err.response._data.detail).forEach((key) => {
- setError(err?.response._data.detail[key] as string);
- form.setError(
- key as 'address' | 'port' | 'host' | 'path' | 'remark' | 'sni' | 'security' | 'alpn' | 'fingerprint',
- {
- type: 'custom',
- message: err.response._data.detail[key],
- }
- );
- });
- }
- })
- .finally(() => {
- setLoading(false);
- });
- };
-
- return (
-
-
-
-
-
-
- {loading && 'loading...'}
-
-
-
-
- );
-};
diff --git a/app/dashboard/src/pages/hosts/dialog/remark-field-popover.tsx b/app/dashboard/src/pages/hosts/dialog/remark-field-popover.tsx
deleted file mode 100644
index 0e665ed..0000000
--- a/app/dashboard/src/pages/hosts/dialog/remark-field-popover.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-
-import { InfoIcon } from './icons';
-import {
- Badge,
- Box,
- Popover,
- PopoverArrow,
- PopoverBody,
- PopoverCloseButton,
- PopoverContent,
- PopoverTrigger,
- Portal,
- Text,
-} from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
-import 'slick-carousel/slick/slick-theme.css';
-import 'slick-carousel/slick/slick.css';
-
-export const RemarkFieldPopover = () => {
- const { t } = useTranslation();
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- {t('hostsDialog.desc')}
-
-
- {'{'}SERVER_IP{'}'}
- {' '}
- {t('hostsDialog.currentServer')}
-
-
-
- {'{'}USERNAME{'}'}
- {' '}
- {t('hostsDialog.username')}
-
-
-
- {'{'}DATA_USAGE{'}'}
- {' '}
- {t('hostsDialog.dataUsage')}
-
-
-
- {'{'}DATA_LEFT{'}'}
- {' '}
- {t('hostsDialog.remainingData')}
-
-
-
- {'{'}DATA_LIMIT{'}'}
- {' '}
- {t('hostsDialog.dataLimit')}
-
-
-
- {'{'}DAYS_LEFT{'}'}
- {' '}
- {t('hostsDialog.remainingDays')}
-
-
-
- {'{'}EXPIRE_DATE{'}'}
- {' '}
- {t('hostsDialog.expireDate')}
-
-
-
- {'{'}JALALI_EXPIRE_DATE{'}'}
- {' '}
- {t('hostsDialog.jalaliExpireDate')}
-
-
-
- {'{'}TIME_LEFT{'}'}
- {' '}
- {t('hostsDialog.remainingTime')}
-
-
-
- {'{'}STATUS_EMOJI{'}'}
- {' '}
- {t('hostsDialog.statusEmoji')}
-
-
-
- {'{'}PROTOCOL{'}'}
- {' '}
- {t('hostsDialog.proxyProtocol')}
-
-
-
- {'{'}TRANSPORT{'}'}
- {' '}
- {t('hostsDialog.proxyMethod')}
-
-
-
-
-
-
- );
-}
diff --git a/app/dashboard/src/pages/hosts/filters.tsx b/app/dashboard/src/pages/hosts/filters.tsx
deleted file mode 100644
index 898a1ee..0000000
--- a/app/dashboard/src/pages/hosts/filters.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import {
- BoxProps,
- Button,
- chakra,
- Grid,
- GridItem,
- HStack,
- IconButton,
- Input,
- InputGroup,
- InputLeftElement,
- InputRightElement,
- Spinner,
- useToast,
-} from '@chakra-ui/react';
-import {
- ArrowPathIcon,
- MagnifyingGlassIcon,
- XMarkIcon,
-} from '@heroicons/react/24/outline';
-import classNames from 'classnames';
-import { useDashboard, useInbounds } from 'stores';
-import debounce from 'lodash.debounce';
-import React, { FC, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const iconProps = {
- baseStyle: {
- w: 4,
- h: 4,
- },
-};
-
-const SearchIcon = chakra(MagnifyingGlassIcon, iconProps);
-const ClearIcon = chakra(XMarkIcon, iconProps);
-export const ReloadIcon = chakra(ArrowPathIcon, iconProps);
-
-export type FilterProps = {} & BoxProps;
-const setSearchField = debounce((tag: string) => {
- useInbounds.getState().onInboundsFilterChange({
- ...useInbounds.getState().inboundsFilters,
- offset: 0,
- tag,
- });
-}, 300);
-
-export const InboundsHostsFilters: FC = ({ ...props }) => {
- const { loading } = useDashboard();
- const {
- inboundsFilters: filters,
- onInboundsFilterChange,
- refetchHosts,
- onCreatingHost,
- selectedInbound,
- } = useInbounds();
- const toast = useToast();
- const onCreateClick = () => {
- if (selectedInbound) {
- onCreatingHost(true);
- } else {
- toast({
- title: t('hostsTable.inboundIsNotSelectedToCreate'),
- status: 'error',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- }
- }
-
- const { t } = useTranslation();
- const [search, setSearch] = useState('');
- const onChange = (e: React.ChangeEvent) => {
- setSearch(e.target.value);
- setSearchField(e.target.value);
- };
- const clear = () => {
- setSearch('');
- onInboundsFilterChange({
- ...filters,
- offset: 0,
- tag: '',
- });
- };
-
- return (
-
-
-
- } />
-
-
- {loading && }
- {filters.tag && filters.tag.length > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
diff --git a/app/dashboard/src/pages/hosts/inbounds-sidebar/index.tsx b/app/dashboard/src/pages/hosts/inbounds-sidebar/index.tsx
deleted file mode 100644
index 1f9736d..0000000
--- a/app/dashboard/src/pages/hosts/inbounds-sidebar/index.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Box, Table, Thead, Tbody, Th, Td, Tr, HStack } from '@chakra-ui/react';
-import classNames from 'classnames';
-import { InboundCard } from 'components/inbounds-card';
-import { handleSort } from 'components/table';
-import { FC } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useEffect } from 'react';
-import { useInbounds } from 'stores';
-import { InboundType } from 'types';
-
-type InboundsSidebarProps = {
- inbounds: InboundType[];
-}
-
-export const InboundsSidebar: FC = ({
- inbounds,
-}) => {
- const {
- onInboundsFilterChange,
- inboundsFilters: filters,
- selectedInbound,
- selectInbound,
- refetchHosts,
- } = useInbounds();
-
- useEffect(() => {
- selectedInbound === undefined && selectInbound(inbounds[0]);
- }, [selectedInbound, inbounds]);
-
- const { t } = useTranslation();
-
- return (
-
-
-
-
- |
-
- {t('inbounds')}
-
- |
-
-
-
- {inbounds?.map((inbound, i) => {
- const active = inbounds[i] == selectedInbound
- return (
- {
- selectInbound(inbound);
- refetchHosts();
- }}>
- |
-
- |
-
);
- })}
-
-
-
- )
-}
diff --git a/app/dashboard/src/pages/hosts/index.tsx b/app/dashboard/src/pages/hosts/index.tsx
deleted file mode 100644
index 8229892..0000000
--- a/app/dashboard/src/pages/hosts/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { HostsDialog } from './dialog';
-import Page from 'components/page';
-import { pages } from 'stores';
-import { InboundsHostsManager } from './container';
-
-const HostsPage = () => {
- return (
-
-
-
-
- )
-}
-
-export default HostsPage;
diff --git a/app/dashboard/src/pages/hosts/table/index.tsx b/app/dashboard/src/pages/hosts/table/index.tsx
deleted file mode 100644
index 86d1890..0000000
--- a/app/dashboard/src/pages/hosts/table/index.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import {
- Box,
- HStack,
- Table,
- TableProps,
- Tbody,
- Td,
- Th,
- Thead,
- Tr,
-} from '@chakra-ui/react';
-import classNames from 'classnames';
-import { FC } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
- EmptySection,
- Sort,
- handleSort,
-} from 'components/table';
-import { useInbounds, HostType } from 'stores';
-
-
-type NodesTableProps = {
- hosts: HostType[];
-} & TableProps;
-
-export const HostsTable: FC = ({ hosts }) => {
- const {
- hostsFilters: filters,
- onHostsFilterChange,
- onEditingHost,
- } = useInbounds();
-
- const { t } = useTranslation();
-
- return (
-
-
-
-
- |
-
- {t('remark')}
-
-
- |
-
-
- {t('hostsTable.address')}
-
-
- |
-
-
- {t('hostsTable.port')}
-
-
- |
-
-
-
- {hosts?.map((host, i) => {
- return (
- onEditingHost(true, host)}
- >
- |
-
- {host.remark}
-
- |
-
- {host.address}
- |
-
- {host.port}
- |
-
- );
- })}
- {(hosts?.length === 0 || hosts === undefined) && (
-
- |
-
- |
-
- )}
-
-
- {/* TODO:
- *
- */}
-
- );
-};
diff --git a/app/dashboard/src/pages/login/index.tsx b/app/dashboard/src/pages/login/index.tsx
deleted file mode 100644
index ffb8b50..0000000
--- a/app/dashboard/src/pages/login/index.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import {
- Alert,
- AlertDescription,
- AlertIcon,
- Box,
- Button,
- chakra,
- FormControl,
- HStack,
- Text,
- VStack,
-} from '@chakra-ui/react';
-import { ArrowRightStartOnRectangleIcon } from '@heroicons/react/24/outline';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { FC, useEffect, useState } from 'react';
-import { FieldValues, useForm } from 'react-hook-form';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { z } from 'zod';
-import { Footer } from 'components/footer';
-import { Input } from 'components/input';
-import { fetch } from 'service/http';
-import { ReactComponent as Logo } from 'assets/logo.svg';
-import { useTranslation } from 'react-i18next';
-import { Language } from 'components/language';
-import { useAdmin } from 'stores';
-
-const schema = z.object({
- username: z.string().min(1, 'login.fieldRequired'),
- password: z.string().min(1, 'login.fieldRequired'),
-});
-
-export const LogoIcon = chakra(Logo, {
- baseStyle: {
- strokeWidth: '10px',
- w: 12,
- h: 12,
- },
-});
-
-const LoginIcon = chakra(ArrowRightStartOnRectangleIcon, {
- baseStyle: {
- w: 5,
- h: 5,
- strokeWidth: '2px',
- },
-});
-
-export const Login: FC = () => {
- const [error, setError] = useState('');
- const [loading, setLoading] = useState(false);
- const navigate = useNavigate();
- const { setAuthToken, removeAuthToken } = useAdmin();
- const { t } = useTranslation();
- let location = useLocation();
- const {
- register,
- formState: { errors },
- handleSubmit,
- } = useForm({
- resolver: zodResolver(schema),
- });
- useEffect(() => {
- removeAuthToken();
- if (location.pathname !== '/login') {
- navigate('/login', { replace: true });
- }
- }, []);
- const login = (values: FieldValues) => {
- setError('');
- const formData = new FormData();
- formData.append('username', values.username);
- formData.append('password', values.password);
- formData.append('grant_type', 'password');
- setLoading(true);
- fetch('/admins/token', { method: 'post', body: formData })
- .then(({ access_token: token }) => {
- setAuthToken(token);
- navigate('/');
- })
- .catch((err) => {
- setError(err.response._data.detail);
- })
- .finally(setLoading.bind(null, false));
- };
- return (
-
-
-
-
-
-
-
-
-
-
- {t('login.loginYourAccount')}
-
-
- {t('login.welcomeBack')}
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default Login;
diff --git a/app/dashboard/src/pages/nodes/dialog.tsx b/app/dashboard/src/pages/nodes/dialog.tsx
deleted file mode 100644
index 738da0a..0000000
--- a/app/dashboard/src/pages/nodes/dialog.tsx
+++ /dev/null
@@ -1,241 +0,0 @@
-import {
- Box,
- Button,
- chakra,
- Checkbox,
- FormControl,
- FormLabel,
- HStack,
- Modal,
- ModalBody,
- ModalCloseButton,
- ModalContent,
- ModalOverlay,
- Switch,
- Tooltip,
- useToast,
- VStack, IconButton, Spacer
-} from '@chakra-ui/react';
-import { zodResolver } from '@hookform/resolvers/zod';
-import {
- getNodeCreateDefaultValues,
- NodeCreate,
- NodeCreateSchema,
- useNodes,
-} from 'stores';
-import { FC, useEffect, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import 'slick-carousel/slick/slick-theme.css';
-import 'slick-carousel/slick/slick.css';
-import { DialogModalHeader, DeleteIcon, AddIcon, EditIcon } from 'components/dialog';
-import { Input } from 'components/input';
-
-const CustomInput = chakra(Input, {
- baseStyle: {
- bg: 'white',
- _dark: {
- bg: 'gray.700',
- },
- },
-});
-
-export const NodesDialog: FC = () => {
- const { editingNode, isEditingNode, onEditingNode, isAddingNode, refetchNodes, updateNode, addNode, onAddingNode, onDeletingNode } = useNodes();
- const [loading, setLoading] = useState(false);
- const [, setError] = useState('');
-
- const { t } = useTranslation();
- const toast = useToast();
- const defaultValueNode: NodeCreate = (isEditingNode === true && editingNode !== null && editingNode !== undefined) ? editingNode : getNodeCreateDefaultValues();
- const form = useForm({
- resolver: zodResolver(NodeCreateSchema),
- defaultValues: defaultValueNode,
- });
- const isOpen = isEditingNode || isAddingNode;
- const onClose = () => {
- onAddingNode(false);
- onEditingNode(undefined);
- };
- useEffect(() => {
- if (isOpen) {
- refetchNodes();
- form.reset(defaultValueNode);
- }
- }, [isOpen]);
-
- const submit = async (values: NodeCreate) => {
- setLoading(true);
- const methods = { edited: updateNode, created: addNode };
- const method = isEditingNode ? 'edited' : 'created';
- const { name, port, id, address, usage_coefficient } = values;
- setError(null);
- let body: NodeCreate = {
- id,
- name,
- address,
- port,
- status: values.status,
- usage_coefficient,
- add_as_new_host: values.add_as_new_host,
- };
-
- await methods[method](body)
- .then(() => {
- toast({
- title: t(
- isEditingNode ? 'nodeDialog.editNode' : 'nodeDialog.createNewNode',
- { name: values.name }
- ),
- status: 'success',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- refetchNodes();
- onClose();
- })
- .catch((err) => {
- if (err?.response?.status === 409 || err?.response?.status === 400)
- setError(err?.response?._data?.detail);
- if (err?.response?.status === 422) {
- Object.keys(err.response._data.detail).forEach((key) => {
- setError(err?.response._data.detail[key] as string);
- form.setError(
- key as 'address' | 'port' | 'name' | 'status',
- {
- type: 'custom',
- message: err.response._data.detail[key],
- }
- );
- });
- }
- })
- .finally(() => {
- setLoading(false);
- });
- };
-
- return (
- <>
-
-
-
-
-
-
-
- {loading && 'loading...'}
-
-
-
-
-
-
-
- );
-}
diff --git a/app/dashboard/src/pages/nodes/filters.tsx b/app/dashboard/src/pages/nodes/filters.tsx
deleted file mode 100644
index 25865c9..0000000
--- a/app/dashboard/src/pages/nodes/filters.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import {
- BoxProps,
- Button,
- chakra,
- Grid,
- GridItem,
- HStack,
- IconButton,
- Input,
- InputGroup,
- InputLeftElement,
- InputRightElement,
- Spinner,
- Tooltip,
-} from '@chakra-ui/react';
-import {
- ArrowPathIcon,
- MagnifyingGlassIcon,
- XMarkIcon,
-} from '@heroicons/react/24/outline';
-import classNames from 'classnames';
-import { useNodes, useDashboard } from 'stores';
-import debounce from 'lodash.debounce';
-import React, { FC, useEffect, useState } from 'react';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import { useTranslation } from 'react-i18next';
-import { CopiedIcon, SubscriptionLinkIcon } from 'components/table';
-
-const iconProps = {
- baseStyle: {
- w: 4,
- h: 4,
- },
-};
-
-const SearchIcon = chakra(MagnifyingGlassIcon, iconProps);
-const ClearIcon = chakra(XMarkIcon, iconProps);
-export const ReloadIcon = chakra(ArrowPathIcon, iconProps);
-
-export type FilterProps = {} & BoxProps;
-const setSearchField = debounce((name: string) => {
- useNodes.getState().onFilterChange({
- ...useNodes.getState().nodesFilters,
- offset: 0,
- name,
- });
-}, 300);
-
-export const NodesFilters: FC = ({ ...props }) => {
- const { loading } = useDashboard();
- const { nodesFilters: filters, onFilterChange, refetchNodes, onAddingNode: onAddNodes } = useNodes();
- const { t } = useTranslation();
- const [search, setSearch] = useState('');
- const onChange = (e: React.ChangeEvent) => {
- setSearch(e.target.value);
- setSearchField(e.target.value);
- };
- const clear = () => {
- setSearch('');
- onFilterChange({
- ...filters,
- offset: 0,
- name: '',
- });
- };
-
- const { certificate, refetchCertificate } = useNodes();
- const [copied, setCopied] = useState([-1, false]);
- useEffect(() => {
- if (copied[1]) {
- setTimeout(() => {
- setCopied([-1, false]);
- }, 1000);
- }
- }, [copied]);
-
- useEffect(() => {
- certificate === '' && refetchCertificate();
- }, [certificate])
-
- return (
-
-
-
- } />
-
-
- {loading && }
- {filters.name && filters.name.length > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
- {
- setCopied([0, true]);
- }}
- >
-
-
-
- {copied[0] == 0 && copied[1] ? (
-
- ) : (
-
- )}
-
-
-
-
-
-
-
-
- );
-};
diff --git a/app/dashboard/src/pages/nodes/index.tsx b/app/dashboard/src/pages/nodes/index.tsx
deleted file mode 100644
index 41778c4..0000000
--- a/app/dashboard/src/pages/nodes/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-
-import { FC } from 'react';
-import { CoreSettingsModal } from './modals/core-settings';
-import { NodesDialog } from './dialog';
-import { NodesUsage } from './usage';
-import { NodesTable } from './table';
-import { NodesFilters } from './filters';
-import { DeleteNodeModal } from './modals/delete-modal';
-import { pages } from 'stores';
-import Page from 'components/page';
-
-const NodesPage: FC = () => {
- return (
-
-
-
-
-
-
-
-
- );
-}
-
-export default NodesPage;
diff --git a/app/dashboard/src/pages/nodes/modals/core-settings/content.tsx b/app/dashboard/src/pages/nodes/modals/core-settings/content.tsx
deleted file mode 100644
index 3b2d3e8..0000000
--- a/app/dashboard/src/pages/nodes/modals/core-settings/content.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-import {
- Box,
- Button,
- CircularProgress,
- FormControl,
- FormLabel,
- HStack,
- IconButton,
- ModalBody,
- ModalFooter,
- Text,
- useToast,
-} from '@chakra-ui/react';
-import { useCoreSettings } from 'stores';
-import debounce from 'lodash.debounce';
-import { FC, useCallback, useEffect, useRef, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { useWebSocket } from 'react-use-websocket/dist/lib/use-websocket';
-import { JsonEditor } from 'components/json-editor';
-import 'components/json-editor/themes.js';
-import { ExitFullScreenIcon, FullScreenIcon } from './icon';
-import { getStatus, getWebsocketUrl } from './helper';
-import { MAX_NUMBER_OF_LOGS } from '.';
-
-let logsTmp: string[] = [];
-
-export const CoreSettingModalContent: FC = () => {
- const {
- fetchCoreSettings,
- updateConfig,
- isLoading,
- config,
- isPostLoading,
- selectedNode,
- } = useCoreSettings();
- const logsDiv = useRef(null);
- const [logs, setLogs] = useState([]);
- const { t } = useTranslation();
- const toast = useToast();
- const form = useForm({
- defaultValues: { config: config || {} },
- });
-
- useEffect(() => {
- if (config) form.setValue('config', config);
- }, [config]);
-
- useEffect(() => {
- if (selectedNode) fetchCoreSettings();
- }, [selectedNode]);
- ''.startsWith;
- const scrollShouldStayOnEnd = useRef(true);
- const updateLogs = useCallback(
- debounce((logs: string[]) => {
- const isScrollOnEnd =
- Math.abs(
- (logsDiv.current?.scrollTop || 0) -
- (logsDiv.current?.scrollHeight || 0) +
- (logsDiv.current?.offsetHeight || 0)
- ) < 10;
- if (logsDiv.current && isScrollOnEnd)
- scrollShouldStayOnEnd.current = true;
- else scrollShouldStayOnEnd.current = false;
- if (logs.length < 40) setLogs(logs);
- }, 300),
- []
- );
-
- const { readyState } = useWebSocket(selectedNode?.id ? getWebsocketUrl(selectedNode.id) : '', {
- onMessage: (e: any) => {
- logsTmp.push(e.data);
- if (logsTmp.length > MAX_NUMBER_OF_LOGS)
- logsTmp = logsTmp.splice(0, logsTmp.length - MAX_NUMBER_OF_LOGS);
- updateLogs([...logsTmp]);
- },
- shouldReconnect: () => true,
- reconnectAttempts: 10,
- reconnectInterval: 1000,
- });
-
- useEffect(() => {
- if (logsDiv.current && scrollShouldStayOnEnd.current)
- logsDiv.current.scrollTop = logsDiv.current?.scrollHeight;
- }, [logs]);
-
- useEffect(() => {
- return () => {
- logsTmp = [];
- };
- }, []);
-
- const status = getStatus(readyState.toString());
-
- // const {
- // mutate: handleRestartCore,
- // isPending: isRestarting
- // } = useMutation({ mutationFn: restartCore });
-
- const handleOnSave = ({ config }: any) => {
- updateConfig(config)
- .then(() => {
- toast({
- title: t('core.successMessage'),
- status: 'success',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- })
- .catch((e) => {
- let message = t('core.generalErrorMessage');
- if (typeof e.response._data.detail === 'object')
- message =
- e.response._data.detail[Object.keys(e.response._data.detail)[0]];
- if (typeof e.response._data.detail === 'string')
- message = e.response._data.detail;
-
- toast({
- title: message,
- status: 'error',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- });
- };
-
- const editorRef = useRef(null);
- const [isFullScreen, setFullScreen] = useState(false);
- const handleFullScreen = () => {
- if (document.fullscreenElement) {
- document.exitFullscreen();
- setFullScreen(false);
- } else {
- editorRef.current?.requestFullscreen();
- setFullScreen(true);
- }
- };
- return (
-
- );
-};
diff --git a/app/dashboard/src/pages/nodes/modals/core-settings/helper.ts b/app/dashboard/src/pages/nodes/modals/core-settings/helper.ts
deleted file mode 100644
index 96aa177..0000000
--- a/app/dashboard/src/pages/nodes/modals/core-settings/helper.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { ReadyState } from 'react-use-websocket';
-import { joinPaths } from '@remix-run/router';
-import { getAuthToken } from 'service/auth-storage';
-
-export const getStatus = (status: string) => {
- return {
- [ReadyState.CONNECTING]: 'connecting',
- [ReadyState.OPEN]: 'connected',
- [ReadyState.CLOSING]: 'closed',
- [ReadyState.CLOSED]: 'closed',
- [ReadyState.UNINSTANTIATED]: 'closed',
- }[status];
-};
-
-export const getWebsocketUrl = (node_id: number) => {
- try {
- let baseURL = new URL(
- import.meta.env.VITE_BASE_API.startsWith('/')
- ? window.location.origin + import.meta.env.VITE_BASE_API
- : import.meta.env.VITE_BASE_API
- );
-
- return (
- (baseURL.protocol === 'https:' ? 'wss://' : 'ws://') +
- joinPaths([baseURL.host + baseURL.pathname, `/nodes/${node_id}/logs`]) +
- '?interval=1&token=' +
- getAuthToken()
- );
- } catch (e) {
- console.error('Unable to generate websocket url');
- console.error(e);
- return null;
- }
-};
diff --git a/app/dashboard/src/pages/nodes/modals/core-settings/icon.tsx b/app/dashboard/src/pages/nodes/modals/core-settings/icon.tsx
deleted file mode 100644
index a4818f1..0000000
--- a/app/dashboard/src/pages/nodes/modals/core-settings/icon.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { chakra } from '@chakra-ui/react';
-import {
- ArrowPathIcon,
- ArrowsPointingInIcon,
- ArrowsPointingOutIcon,
- Cog6ToothIcon,
-} from '@heroicons/react/24/outline';
-
-export const UsageIcon = chakra(Cog6ToothIcon, {
- baseStyle: {
- w: 5,
- h: 5,
- },
-});
-
-export const ReloadIcon = chakra(ArrowPathIcon, {
- baseStyle: {
- w: 4,
- h: 4,
- },
-});
-
-export const FullScreenIcon = chakra(ArrowsPointingOutIcon, {
- baseStyle: {
- w: 4,
- h: 4,
- },
-});
-export const ExitFullScreenIcon = chakra(ArrowsPointingInIcon, {
- baseStyle: {
- w: 3,
- h: 3,
- },
-});
diff --git a/app/dashboard/src/pages/nodes/modals/core-settings/index.tsx b/app/dashboard/src/pages/nodes/modals/core-settings/index.tsx
deleted file mode 100644
index d40cdb7..0000000
--- a/app/dashboard/src/pages/nodes/modals/core-settings/index.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import {
- HStack,
- Modal,
- ModalCloseButton,
- ModalContent,
- ModalHeader,
- ModalOverlay,
- Text
-} from '@chakra-ui/react';
-import { Icon } from 'components/icon';
-import { FC } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useCoreSettings } from 'stores';
-import { CoreSettingModalContent } from './content';
-import { UsageIcon } from './icon';
-
-export const MAX_NUMBER_OF_LOGS = 500;
-
-
-export const CoreSettingsModal: FC = () => {
- const { selectedNode } = useCoreSettings();
- const onClose = useCoreSettings.setState.bind(null, { selectedNode: null });
- const { t } = useTranslation();
-
- return (
-
-
-
-
-
-
-
-
-
- {t('core.title')}
-
-
-
-
-
-
-
- );
-};
diff --git a/app/dashboard/src/pages/nodes/modals/delete-modal.tsx b/app/dashboard/src/pages/nodes/modals/delete-modal.tsx
deleted file mode 100644
index 7b61390..0000000
--- a/app/dashboard/src/pages/nodes/modals/delete-modal.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import {
- useToast,
-} from '@chakra-ui/react';
-import { useNodes } from 'stores';
-import { FC, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { DeleteModal } from 'components/delete-modal';
-
-export const DeleteNodeModal: FC = () => {
- const { deleteNode, refetchNodes, deletingNode, onDeletingNode } = useNodes();
- const { t } = useTranslation();
- const toast = useToast();
- const [loading, setLoading] = useState(false);
- const onClose = () => {
- onDeletingNode(undefined);
- };
-
- const onDelete = () => {
- if (deletingNode) {
- setLoading(true);
- deleteNode(deletingNode)
- .then(() => {
- refetchNodes();
- toast({
- title: t('deleteNode.deleteSuccess', { name: deletingNode.name }),
- status: 'success',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- })
- .then(onClose)
- .finally(setLoading.bind(null, false));
- }
- };
-
- return (
-
- );
-};
diff --git a/app/dashboard/src/pages/nodes/table/action-buttons.tsx b/app/dashboard/src/pages/nodes/table/action-buttons.tsx
deleted file mode 100644
index c340f60..0000000
--- a/app/dashboard/src/pages/nodes/table/action-buttons.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-
-import { t } from 'i18next';
-import { Cog6ToothIcon } from '@heroicons/react/24/outline';
-import { chakra, HStack, IconButton, Tooltip } from '@chakra-ui/react';
-import { NodeType, useCoreSettings } from 'stores';
-import { FC } from 'react';
-
-const iconProps = {
- baseStyle: {
- w: 4,
- h: 4,
- },
-};
-const CoreSettingsIcon = chakra(Cog6ToothIcon, iconProps);
-
-type ActionButtonsProps = {
- node: NodeType,
-};
-
-export const ActionButtons: FC = ({ node }) => {
- return (
- {
- e.preventDefault();
- e.stopPropagation();
- }}
- >
-
- {
- useCoreSettings.setState({ selectedNode: node });
- }}
- >
-
-
-
-
- );
-};
diff --git a/app/dashboard/src/pages/nodes/table/index.tsx b/app/dashboard/src/pages/nodes/table/index.tsx
deleted file mode 100644
index a306c13..0000000
--- a/app/dashboard/src/pages/nodes/table/index.tsx
+++ /dev/null
@@ -1,395 +0,0 @@
-
-import {
- Accordion,
- AccordionButton,
- AccordionItem,
- AccordionPanel,
- Box,
- HStack,
- IconButton,
- Table,
- TableProps,
- Tbody,
- Td,
- Text,
- Th,
- Thead,
- Tooltip,
- Tr,
- useBreakpointValue,
- VStack,
-} from '@chakra-ui/react';
-import classNames from 'classnames';
-import { ActionButtons } from './action-buttons';
-import { pageSizeManagers } from 'utils/userPreferenceStorage';
-import { FC, Fragment, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { StatusBadge } from 'components/status-badge';
-import {
- Pagination,
- EmptySection,
- AccordionArrowIcon,
- EditIcon,
- Sort,
- StatusSortSelect,
- handleSort,
-} from 'components/table';
-import { fetchNodes, useNodes } from 'stores';
-import { useQuery } from '@tanstack/react-query';
-import { queryIds } from 'constants/query-ids';
-
-type ExpandedIndex = number | number[];
-
-type NodesTableProps = {} & TableProps;
-
-export const NodesTable: FC = (props) => {
- const {
- nodesFilters: filters,
- onEditingNode,
- onAddingNode,
- onFilterChange,
- } = useNodes();
- const { data: nodes } = useQuery({ queryKey: [queryIds.nodes], queryFn: fetchNodes });
- const total = nodes?.length || 0;
-
- const { t } = useTranslation();
- const [selectedRow, setSelectedRow] = useState(
- undefined
- );
-
- const useTable = useBreakpointValue({ base: false, md: true });
-
- // TODO: Find a different mechancism to to detect ftiler
- // const isFiltered = users.length !== total;
-
- const handleStatusFilter = (e: any) => {
- onFilterChange({
- status: e.target.value.length > 0 ? e.target.value : undefined,
- });
- };
-
- const toggleAccordion = (index: number) => {
- setSelectedRow(index === selectedRow ? undefined : index);
- };
-
- const StatusSortSelectNodes = () => (
-
- );
-
- return (
-
-
-
-
-
- |
-
- {t('name')}
-
-
- |
-
-
-
- {t('nodesTable.status')}
- {filters.status ? ': ' + filters.status : ''}
-
-
-
- |
-
-
- {t('nodesTable.xrayVersion')}
-
-
- |
-
- {t('nodesTable.ipPort')}
- |
- {/* Action buttons (certificate, core settings)*/}
- |
-
-
-
- {!useTable &&
- nodes?.map((node, i) => {
- return (
-
-
- |
- {node.name}
- |
-
-
- |
-
- {node.xray_version}
- |
-
-
- |
-
-
- |
-
-
-
-
-
-
- {t('nodesTable.ipPort')}
-
-
- {node.address}:{node.port}
-
-
-
-
-
-
- {
- e.stopPropagation();
- onEditingNode(node);
- }}
- >
-
-
-
-
-
-
-
-
- |
-
-
- );
- })}
-
-
-
-
-
-
- |
-
- {t('name')}
-
-
- |
-
-
-
- {t('nodesTable.status')}
- {filters.status ? ': ' + filters.status : ''}
-
-
-
- |
-
-
- {t('nodesTable.xrayVersion')}
-
-
- |
-
-
- {t('nodesTable.ipPort')}
-
-
- |
- |
-
-
-
- {useTable &&
- nodes?.map((node, i) => {
- return (
- onEditingNode(node)}
- >
- |
-
- {node.name}
-
- |
-
-
- |
-
- {node.xray_version}
- |
-
- {node.address}:{node.port}
- |
-
-
- |
-
- );
- })}
- {nodes?.length == 0 && (
-
- |
-
- |
-
- )}
-
-
-
-
- );
-};
diff --git a/app/dashboard/src/pages/nodes/usage.tsx b/app/dashboard/src/pages/nodes/usage.tsx
deleted file mode 100644
index 757eeda..0000000
--- a/app/dashboard/src/pages/nodes/usage.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import {
- Box,
- CircularProgress,
- VStack,
- chakra,
- useColorMode,
-} from '@chakra-ui/react';
-import { ChartPieIcon } from '@heroicons/react/24/outline';
-import { FilterUsageType } from 'types/filter';
-import { useNodes } from 'stores';
-import dayjs from 'dayjs';
-import { FC, Suspense, useEffect, useState } from 'react';
-import ReactApexChart from 'react-apexcharts';
-import { useTranslation } from 'react-i18next';
-import { Icon } from 'components/icon';
-import { UsageFilter, createUsageConfig } from 'components/usage-filter';
-import { StatisticsCardWide } from 'components/statistics-card';
-
-const UsageIcon = chakra(ChartPieIcon, {
- baseStyle: {
- w: 5,
- h: 5,
- },
-});
-
-export type NodesUsageProps = {};
-
-export const NodesUsage: FC = () => {
- const { isShowingNodesUsage } = useNodes();
- const { fetchNodesUsage } = useNodes();
- const { t } = useTranslation();
- const { colorMode } = useColorMode();
-
- const usageTitle = t('userDialog.total');
- const [usage, setUsage] = useState(createUsageConfig(colorMode, usageTitle));
- const [usageFilter, setUsageFilter] = useState('1m');
- const fetchUsageWithFilter = (query: FilterUsageType) => {
- fetchNodesUsage(query).then((data: any) => {
- const labels = [];
- const series = [];
- for (const key in data.usages) {
- const entry = data.usages[key];
- series.push(entry.uplink + entry.downlink);
- labels.push(entry.node_name);
- }
- setUsage(createUsageConfig(colorMode, usageTitle, series, labels));
- });
- };
-
- useEffect(() => {
- if (isShowingNodesUsage) {
- fetchUsageWithFilter({
- start: dayjs().utc().subtract(30, 'day').format('YYYY-MM-DDTHH:00:00'),
- });
- }
- }, [isShowingNodesUsage]);
-
- return (
-
- }
- content={
-
- {
- setUsageFilter(filter);
- fetchUsageWithFilter(query);
- }}
- />
-
- }>
-
-
-
-
-
- } />
- );
-};
diff --git a/app/dashboard/src/pages/routes.tsx b/app/dashboard/src/pages/routes.tsx
deleted file mode 100644
index 663b68b..0000000
--- a/app/dashboard/src/pages/routes.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { lazy } from 'react';
-import { createHashRouter } from 'react-router-dom';
-import { fetchAdminLoader } from 'service/http';
-import { pages } from 'stores';
-
-const ConsoleLayout = lazy(() => import('layouts/console-layout'));
-const Home = lazy(() => import('./home'));
-const Hosts = lazy(() => import('./hosts'));
-const Users = lazy(() => import('./users'));
-const Login = lazy(() => import('./login'));
-const Nodes = lazy(() => import('./nodes'));
-const Services = lazy(() => import('./services'));
-
-export const router = createHashRouter([
- {
- path: '/',
- errorElement: ,
- loader: fetchAdminLoader,
- element: ,
- children: [
- {
- path: pages.home.path,
- element: ,
- },
- {
- path: pages.users.path,
- element: ,
- },
- {
- path: pages.services.path,
- element: ,
- },
- {
- path: pages.nodes.path,
- element: ,
- },
- {
- path: pages.hosts.path,
- element: ,
- },
- ],
- },
- {
- path: '/login/',
- element: ,
- },
-]);
diff --git a/app/dashboard/src/pages/services/dialog/default-values.ts b/app/dashboard/src/pages/services/dialog/default-values.ts
deleted file mode 100644
index 371860c..0000000
--- a/app/dashboard/src/pages/services/dialog/default-values.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-import { FormType } from './form-schema';
-
-export const getDefaultValues = (): FormType => {
- return {
- name: '',
- inbounds: [],
- };
-};
diff --git a/app/dashboard/src/pages/services/dialog/form-schema.ts b/app/dashboard/src/pages/services/dialog/form-schema.ts
deleted file mode 100644
index 79fb2b1..0000000
--- a/app/dashboard/src/pages/services/dialog/form-schema.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-
-import { z } from 'zod';
-import { ServiceCreate } from 'types';
-
-export type FormType = Pick;
-export const schema = z.object({
- name: z.string().min(1, { message: 'Name is required' }),
- inbounds: z.array(z.number()).nonempty({ message: 'At least one inbounds is required' }),
-});
diff --git a/app/dashboard/src/pages/services/dialog/inbounds-field.tsx b/app/dashboard/src/pages/services/dialog/inbounds-field.tsx
deleted file mode 100644
index a2a2ecc..0000000
--- a/app/dashboard/src/pages/services/dialog/inbounds-field.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { FormControl, FormLabel, FormErrorMessage, Center, Spinner } from '@chakra-ui/react';
-import { Inbounds, InboundType } from 'types';
-import { TFunction } from 'i18next';
-import { Controller } from 'react-hook-form';
-import { InboundsSelectList } from './inbounds-select-list';
-import { InboundCard } from 'components/inbounds-card';
-
-
-interface InboundsFieldProps {
- form: any;
- inbounds: Inbounds;
- t: TFunction<'translation', undefined, 'translation'>;
-}
-
-export const InboundsField = ({ form, t, inbounds }: InboundsFieldProps) => {
- return inbounds.length === 0 ? (
-
- ) : (
-
- {t('inbounds')}
- {
- return (
- (
-
- )}
- />
- );
- }}
- />
-
- {t(form.formState.errors.services?.message as string)}
-
-
- );
-}
diff --git a/app/dashboard/src/pages/services/dialog/inbounds-select-list.tsx b/app/dashboard/src/pages/services/dialog/inbounds-select-list.tsx
deleted file mode 100644
index 84222e9..0000000
--- a/app/dashboard/src/pages/services/dialog/inbounds-select-list.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-
-import {
- Stack,
-} from '@chakra-ui/react';
-import { ListCheckBox } from 'components/list-check-box';
-import { Inbounds, InboundType } from 'types';
-import { forwardRef, Fragment, ReactNode } from 'react';
-import {
- useFormContext,
-} from 'react-hook-form';
-
-interface InboundsSelectListProps {
- list: Inbounds;
- renderCheckboxContent: (inbound: InboundType) => ReactNode;
-}
-
-export const InboundsSelectList = forwardRef(
- function({ list, renderCheckboxContent }, ref) {
- const form = useFormContext();
-
- const handleInboundToggle = (inboundId: number) => {
- const currentInbounds = form.getValues('inbounds');
- const isSelected = currentInbounds.includes(inboundId);
-
- let updatedInbounds = currentInbounds.filter((id: number) => id !== inboundId);
-
- if (!isSelected) {
- updatedInbounds = [...currentInbounds, inboundId];
- }
-
- form.setValue('inbounds', updatedInbounds, { shouldValidate: true });
- };
-
- return (
-
- {list.map((inbound: InboundType) => (
-
- handleInboundToggle(inbound.id)}
- value={String(inbound.id)}
- renderContent={() => renderCheckboxContent(inbound)}
- />
-
- ))}
-
- );
- }
-);
diff --git a/app/dashboard/src/pages/services/dialog/index.tsx b/app/dashboard/src/pages/services/dialog/index.tsx
deleted file mode 100644
index 4f31a3d..0000000
--- a/app/dashboard/src/pages/services/dialog/index.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-
-import {
- Alert,
- AlertIcon,
- Flex,
- Button,
- Tooltip,
- HStack,
- Spinner,
- ModalBody,
- ModalCloseButton,
- ModalContent,
- Modal,
- VStack,
- useToast,
- ModalOverlay,
- IconButton,
-} from '@chakra-ui/react';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { FC, useEffect, useState } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import {
- AddIcon,
- DialogModalHeader,
- DialogModalFooter,
- DeleteIcon,
- EditIcon
-} from 'components/dialog';
-import { getDefaultValues } from './default-values';
-import { schema, FormType } from './form-schema';
-import { InboundsField } from './inbounds-field';
-import { NameField } from './name-field';
-import { InboundType, Service, ServiceCreate } from 'types';
-import { fetchInbounds, useInbounds, useServices } from 'stores';
-import { useQuery } from '@tanstack/react-query';
-import { queryIds } from 'constants/query-ids';
-
-const formatService = (service: Service): FormType => {
- const inbounds: number[] = service.inbounds.map((inbound: number | InboundType): number => {
- return (typeof inbound !== 'number') ? inbound.id : inbound;
- });
- return {
- ...service,
- inbounds,
- };
-};
-
-export type ServiceDialogProps = {};
-
-export const ServiceDialog: FC = () => {
- const {
- editingService,
- isCreatingNewService,
- onCreateService,
- editService,
- onEditingService,
- createService,
- onDeletingService,
- } = useServices();
- const { refetchInbounds } = useInbounds();
- const {
- data: inbounds,
- } = useQuery({ queryKey: [queryIds.inbounds], queryFn: () => fetchInbounds() });
- const isEditing = !!editingService;
- const isOpen = isCreatingNewService || isEditing;
- const [loading, setLoading] = useState(false);
- const [error, setError] = useState('');
- const toast = useToast();
- const { t } = useTranslation();
-
- const form = useForm({
- defaultValues: getDefaultValues(),
- resolver: zodResolver(schema),
- });
-
- useEffect(() => {
- if (isOpen) {
- refetchInbounds();
- form.reset();
- }
- }, [isOpen]);
-
-
- useEffect(() => {
- if (editingService) {
- form.reset(formatService(editingService));
- }
- }, [editingService]);
-
- const submit = async (values: FormType) => {
- setLoading(true);
- const methods = { edited: editService, created: createService };
- const method = isEditing ? 'edited' : 'created';
- setError(null);
- const { inbounds, name } = values;
-
- let body: ServiceCreate = { name, inbounds, id: editingService?.id };
-
- await methods[method](body)
- .then(() => {
- toast({
- title: t(
- isEditing ? 'serviceDialog.serviceEdited' : 'serviceDialog.serviceCreated',
- { name: values.name }
- ),
- status: 'success',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- onClose();
- })
- .catch((err) => {
- if (err?.response?.status === 409 || err?.response?.status === 400)
- setError(err?.response?._data?.detail);
- if (err?.response?.status === 422) {
- Object.keys(err.response._data.detail).forEach((key) => {
- setError(err?.response._data.detail[key] as string);
- form.setError(key as 'name' | 'inbounds', { type: 'custom', message: err.response._data.detail[key], });
- });
- }
- })
- .finally(() => {
- setLoading(false);
- });
- };
-
- const onClose = () => {
- form.reset(getDefaultValues());
- onCreateService(false);
- onEditingService(null);
- setError(null);
- };
-
- const disabled = loading;
-
- return (
-
-
-
-
-
-
-
-
- );
-};
diff --git a/app/dashboard/src/pages/services/dialog/name-field.tsx b/app/dashboard/src/pages/services/dialog/name-field.tsx
deleted file mode 100644
index 240d677..0000000
--- a/app/dashboard/src/pages/services/dialog/name-field.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-
-import { HStack, Input, Tooltip, Box, Switch, FormControl, FormLabel } from '@chakra-ui/react';
-import { TFunction } from 'i18next';
-import { Controller } from 'react-hook-form';
-
-interface NameFieldProps {
- form: any;
- isEditing: boolean;
- t: TFunction<'translation', undefined, 'translation'>;
- disabled: boolean;
-}
-
-export const NameField = ({ form, isEditing, t, disabled }: NameFieldProps) => {
- return (
-
- {t('name')}
-
-
- {isEditing && (
-
- {
- return (
-
-
- {
- if (e.target.checked) {
- field.onChange('active');
- } else {
- field.onChange('disabled');
- }
- }}
- />
-
-
- );
- }}
- />
-
- )}
-
-
- )
-}
diff --git a/app/dashboard/src/pages/services/filters.tsx b/app/dashboard/src/pages/services/filters.tsx
deleted file mode 100644
index e846b0a..0000000
--- a/app/dashboard/src/pages/services/filters.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import {
- BoxProps,
- Button,
- chakra,
- Grid,
- GridItem,
- HStack,
- IconButton,
- Input,
- InputGroup,
- InputLeftElement,
- InputRightElement,
- Spinner,
-} from '@chakra-ui/react';
-import {
- ArrowPathIcon,
- MagnifyingGlassIcon,
- XMarkIcon,
-} from '@heroicons/react/24/outline';
-import classNames from 'classnames';
-import { useDashboard, useServices } from 'stores';
-import debounce from 'lodash.debounce';
-import React, { FC, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const iconProps = {
- baseStyle: {
- w: 4,
- h: 4,
- },
-};
-
-const SearchIcon = chakra(MagnifyingGlassIcon, iconProps);
-const ClearIcon = chakra(XMarkIcon, iconProps);
-export const ReloadIcon = chakra(ArrowPathIcon, iconProps);
-
-export type FilterProps = {} & BoxProps;
-const setSearchField = debounce((name: string) => {
- useServices.getState().onFilterChange({
- ...useServices.getState().servicesFilters,
- offset: 0,
- name,
- });
-}, 300);
-
-export const ServicesFilters: FC = ({ ...props }) => {
- const { loading } =
- useDashboard();
- const { servicesFilters: filters, refetchServices, onFilterChange, onCreateService } = useServices();
- const { t } = useTranslation();
- const [search, setSearch] = useState('');
- const onChange = (e: React.ChangeEvent) => {
- setSearch(e.target.value);
- setSearchField(e.target.value);
- };
- const clear = () => {
- setSearch('');
- onFilterChange({
- ...filters,
- offset: 0,
- name: '',
- });
- };
- return (
-
-
-
- } />
-
-
- {loading && }
- {filters.name && filters.name.length > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
diff --git a/app/dashboard/src/pages/services/index.tsx b/app/dashboard/src/pages/services/index.tsx
deleted file mode 100644
index 105566c..0000000
--- a/app/dashboard/src/pages/services/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-
-import { FC } from 'react';
-import { ServicesFilters } from './filters';
-import { ServicesTable } from './table';
-import { pages } from 'stores';
-import { ServiceDialog } from './dialog';
-import { DeleteServiceModal } from './modals/delete-modal';
-import Page from 'components/page';
-
-
-const ServicesPage: FC = () => {
- return (
-
-
-
-
-
-
- )
-}
-
-export default ServicesPage;
diff --git a/app/dashboard/src/pages/services/modals/delete-modal.tsx b/app/dashboard/src/pages/services/modals/delete-modal.tsx
deleted file mode 100644
index e8d8d0f..0000000
--- a/app/dashboard/src/pages/services/modals/delete-modal.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import {
- useToast,
-} from '@chakra-ui/react';
-import { useServices } from 'stores';
-import { FC, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { DeleteModal } from 'components/delete-modal';
-
-export const DeleteServiceModal: FC = () => {
- const { deleteService, refetchServices, deletingService, onDeletingService } = useServices();
- const { t } = useTranslation();
- const toast = useToast();
- const [loading, setLoading] = useState(false);
- const onClose = () => {
- onDeletingService(null);
- };
-
- const onDelete = () => {
- if (deletingService) {
- setLoading(true);
- deleteService(deletingService)
- .then(() => {
- refetchServices();
- toast({
- title: t('deleteService.deleteSuccess', { name: deletingService.name }),
- status: 'success',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- })
- .then(onClose)
- .finally(setLoading.bind(null, false));
- }
- };
-
- return (
-
- );
-};
diff --git a/app/dashboard/src/pages/services/table.tsx b/app/dashboard/src/pages/services/table.tsx
deleted file mode 100644
index 281e6b4..0000000
--- a/app/dashboard/src/pages/services/table.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-
-import {
- Box,
- HStack,
- Table,
- TableProps,
- Tbody,
- Td,
- Th,
- Thead,
- Tr,
-} from '@chakra-ui/react';
-
-import classNames from 'classnames';
-import { FC } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
- EmptySection,
- handleSort,
- Pagination,
- Sort
-} from 'components/table';
-import { fetchServices, useServices } from 'stores';
-import { pageSizeManagers } from 'utils/userPreferenceStorage';
-import { useQuery } from '@tanstack/react-query';
-import { queryIds } from 'constants/query-ids';
-
-type ServicesTableProps = {} & TableProps;
-
-export const ServicesTable: FC = (props) => {
- const {
- servicesFilters: filters,
- onEditingService,
- onCreateService,
- onFilterChange,
- } = useServices();
- const { data: services } = useQuery({
- queryKey: [queryIds.services],
- queryFn: () => { return fetchServices(filters) }
- });
- const { t } = useTranslation();
-
- return (
-
-
-
-
- |
-
- {t('services')}
-
-
- |
-
-
- {t('servicesTable.usersNumber')}
-
-
- |
-
-
- {t('servicesTable.inboundsNumber')}
-
-
- |
-
-
-
- {services?.map((service, i) => {
- return (
- {
- e.stopPropagation();
- onEditingService(service);
- }}
- >
- |
- {service.name}
- |
-
- {service.users.length}
- |
-
- {service.inbounds.length}
- |
-
- );
- })}
- {services?.length == 0 && (
-
- |
-
- |
-
- )}
-
-
-
-
- );
-};
diff --git a/app/dashboard/src/pages/users/dialog/data-limit-field.tsx b/app/dashboard/src/pages/users/dialog/data-limit-field.tsx
deleted file mode 100644
index d225b53..0000000
--- a/app/dashboard/src/pages/users/dialog/data-limit-field.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { FormControl, FormLabel } from '@chakra-ui/react';
-import { Input } from 'components/input';
-import { TFunction } from 'i18next';
-import { Controller } from 'react-hook-form';
-
-
-interface DataLimitFieldProps {
- form: any;
- disabled: boolean;
- t: TFunction<'translation', undefined, 'translation'>;
-}
-
-export const DataLimitField = ({ form, disabled, t }: DataLimitFieldProps) => {
- return (
-
- {t('userDialog.dataLimit')}
- {
- return (
-
- );
- }}
- />
-
- )
-}
diff --git a/app/dashboard/src/pages/users/dialog/default-values.ts b/app/dashboard/src/pages/users/dialog/default-values.ts
deleted file mode 100644
index 3c516d3..0000000
--- a/app/dashboard/src/pages/users/dialog/default-values.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-
-import { FormType } from './form-schema';
-
-export const getDefaultValues = (): FormType => {
-
- return {
- services: [],
- data_limit: 0,
- expire: null,
- username: '',
- data_limit_reset_strategy: 'no_reset',
- status: 'active',
- note: '',
- };
-};
diff --git a/app/dashboard/src/pages/users/dialog/expire-date-field.tsx b/app/dashboard/src/pages/users/dialog/expire-date-field.tsx
deleted file mode 100644
index 7019df8..0000000
--- a/app/dashboard/src/pages/users/dialog/expire-date-field.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import {
- FormControl,
- FormHelperText,
- FormLabel,
-} from '@chakra-ui/react';
-import dayjs from 'dayjs';
-import { i18n, TFunction } from 'i18next';
-import ReactDatePicker from 'react-datepicker';
-import { Controller } from 'react-hook-form';
-import { relativeExpiryDate } from 'utils/dateFormatter';
-import { Input } from 'components/input';
-
-interface ExpireDateFieldProps {
- form: any;
- disabled: boolean;
- t: TFunction<'translation', undefined, 'translation'>;
- i18n: i18n;
-}
-
-export const ExpireDateField = ({ form, t, i18n, disabled }: ExpireDateFieldProps) => {
- return (
-
- {t('userDialog.expiryDate')}
- {
- function createDateAsUTC(num: number) {
- return dayjs(
- dayjs(num * 1000).utc()
- // .format("MMMM D, YYYY") // exception with: dayjs.locale(lng);
- ).toDate();
- }
- const { status, time } = relativeExpiryDate(
- field.value
- );
- return (
- <>
- {
- field.onChange({
- target: {
- value: date
- ? dayjs(
- dayjs(date)
- .set('hour', 23)
- .set('minute', 59)
- .set('second', 59)
- )
- .utc()
- .valueOf() / 1000
- : 0,
- name: 'expire',
- },
- });
- }}
- customInput={
-
- }
- />
- {field.value ? (
-
- {t(status, { time: time })}
-
- ) : (
- ''
- )}
-
- );
- }}
- />
-
- )
-}
diff --git a/app/dashboard/src/pages/users/dialog/form-schema.ts b/app/dashboard/src/pages/users/dialog/form-schema.ts
deleted file mode 100644
index 9f452c8..0000000
--- a/app/dashboard/src/pages/users/dialog/form-schema.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-
-import { z } from 'zod';
-import { UserCreate } from 'types';
-
-export type FormType = Pick;
-export const schema = z.object({
- username: z.string().min(1, { message: 'Username is required' }),
- note: z.string().nullable(),
- data_limit: z
- .string()
- .min(0, 'The minimum number is 0')
- .or(z.number())
- .nullable()
- .transform((str) => {
- if (str) return Number((parseFloat(String(str)) * 1073741824).toFixed(5));
- return 0;
- }),
- expire: z.number().nullable(),
- data_limit_reset_strategy: z.string(),
- status: z.string(),
- services: z.array(z.number()).nonempty({ message: 'At least one service is required' }),
-});
diff --git a/app/dashboard/src/pages/users/dialog/icons.ts b/app/dashboard/src/pages/users/dialog/icons.ts
deleted file mode 100644
index 8f02730..0000000
--- a/app/dashboard/src/pages/users/dialog/icons.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-
-import { chakra } from '@chakra-ui/react';
-import {
- ChartPieIcon,
-} from '@heroicons/react/24/outline';
-export const UserUsageIcon = chakra(ChartPieIcon, {
- baseStyle: {
- w: 5,
- h: 5,
- },
-});
diff --git a/app/dashboard/src/pages/users/dialog/index.tsx b/app/dashboard/src/pages/users/dialog/index.tsx
deleted file mode 100644
index d2ac165..0000000
--- a/app/dashboard/src/pages/users/dialog/index.tsx
+++ /dev/null
@@ -1,372 +0,0 @@
-import {
- Alert,
- Button,
- Tooltip,
- IconButton,
- Spinner,
- AlertIcon,
- Box,
- Collapse,
- Flex,
- Grid,
- GridItem,
- ModalBody,
- ModalCloseButton,
- ModalContent,
- Modal,
- VStack,
- useColorMode,
- useToast,
- ModalOverlay,
- HStack,
-} from '@chakra-ui/react';
-import { zodResolver } from '@hookform/resolvers/zod';
-import dayjs from 'dayjs';
-import { FC, useEffect, useState } from 'react';
-import ReactApexChart from 'react-apexcharts';
-import { FormProvider, useForm, useWatch } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import {
- User,
- FilterUsageType,
- UserCreate,
- Service
-} from 'types';
-import { UsageFilter, createUsageConfig } from 'components/usage-filter';
-import {
- AddIcon,
- EditIcon,
- DialogModalHeader,
- DialogModalFooter,
- DeleteIcon
-} from 'components/dialog';
-import { UserUsageIcon } from './icons';
-import { getDefaultValues } from './default-values';
-import { schema, FormType } from './form-schema';
-import { ServicesField } from './services-field';
-import { UsernameField } from './username-field';
-import { DataLimitField } from './data-limit-field';
-import { PeriodicUsageReset } from './periodic-usage-reset';
-import { ExpireDateField } from './expire-date-field';
-import { NoteField } from './note-field';
-import { useUsers, useServices, fetchServices } from 'stores';
-import { queryIds } from 'constants/query-ids';
-import { useQuery } from '@tanstack/react-query';
-
-const formatUser = (user: User): FormType => {
- const services: number[] = user.services.map((service: number | Service): number => {
- return (typeof service !== 'number') ? service.id : service;
- });
- return {
- ...user,
- services,
- data_limit: user.data_limit
- ? Number((user.data_limit / 1073741824).toFixed(5))
- : user.data_limit,
- };
-};
-
-export type UserDialogProps = {};
-
-export const UserDialog: FC = () => {
- const {
- editingUser,
- isCreatingNewUser,
- onCreateUser,
- editUser,
- fetchUserUsage,
- onEditingUser,
- createUser,
- onDeletingUser,
- } = useUsers();
- const { refetchServices, servicesFilters: filters } = useServices();
- const { data: services } = useQuery({
- queryKey: [queryIds.services],
- initialData: [],
- queryFn: () => {
- return fetchServices(filters);
- }
- });
- const isEditing = !!editingUser;
- const isOpen = isCreatingNewUser || isEditing;
- const [loading, setLoading] = useState(false);
- const [error, setError] = useState('');
- const toast = useToast();
- const { t, i18n } = useTranslation();
-
- const { colorMode } = useColorMode();
-
- const [usageVisible, setUsageVisible] = useState(false);
- const handleUsageToggle = () => {
- setUsageVisible((current) => !current);
- };
-
- const form = useForm({
- defaultValues: getDefaultValues(),
- resolver: zodResolver(schema),
- });
-
- const [dataLimit] = useWatch({
- control: form.control,
- name: ['data_limit'],
- });
-
- const usageTitle = t('userDialog.total');
- const [usage, setUsage] = useState(createUsageConfig(colorMode, usageTitle));
- const [usageFilter, setUsageFilter] = useState('1m');
- const fetchUsageWithFilter = (query: FilterUsageType) => {
- fetchUserUsage(editingUser!, query).then((data: any) => {
- const labels = [];
- const series = [];
- for (const key in data.usages) {
- series.push(data.usages[key].used_traffic);
- labels.push(data.usages[key].node_name);
- }
- setUsage(createUsageConfig(colorMode, usageTitle, series, labels));
- });
- };
-
- useEffect(() => {
- if (isOpen) {
- refetchServices();
- }
- }, [isOpen]);
-
-
- useEffect(() => {
- if (editingUser) {
- form.reset(formatUser(editingUser));
-
- fetchUsageWithFilter({
- start: dayjs().utc().subtract(30, 'day').format('YYYY-MM-DDTHH:00:00'),
- });
- }
- }, [editingUser]);
-
- const submit = async (values: FormType) => {
- setLoading(true);
- const methods = { edited: editUser, created: createUser };
- const method = isEditing ? 'edited' : 'created';
- setError(null);
- const { services, username, ...rest } = values;
-
- let body: UserCreate = {
- ...rest,
- username,
- services,
- data_limit: values.data_limit,
- data_limit_reset_strategy:
- values.data_limit && values.data_limit > 0
- ? values.data_limit_reset_strategy
- : 'no_reset',
- status:
- values.status === 'active' || values.status === 'disabled'
- ? values.status
- : 'active',
- };
-
- await methods[method](body)
- .then(() => {
- toast({
- title: t(
- isEditing ? 'userDialog.userEdited' : 'userDialog.userCreated',
- { username: values.username }
- ),
- status: 'success',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- onClose();
- })
- .catch((err) => {
- if (err?.response?.status === 409 || err?.response?.status === 400)
- setError(err?.response?._data?.detail);
- if (err?.response?.status === 422) {
- Object.keys(err.response._data.detail).forEach((key) => {
- setError(err?.response._data.detail[key] as string);
- form.setError(
- key as 'services' | 'username' | 'data_limit' | 'expire',
- {
- type: 'custom',
- message: err.response._data.detail[key],
- }
- );
- });
- }
- })
- .finally(() => {
- setLoading(false);
- });
- };
-
- const onClose = () => {
- form.reset(getDefaultValues());
- onCreateUser(false);
- onEditingUser(null);
- setError(null);
- setUsageVisible(false);
- setUsageFilter('1m');
- };
-
- const handleResetUsage = () => {
- useUsers.setState({ resetUsageUser: editingUser });
- };
-
- const handleRevokeSubscription = () => {
- useUsers.setState({ revokeSubscriptionUser: editingUser });
- };
-
- const disabled = loading;
-
- return (
-
-
-
-
-
-
-
-
- );
-};
diff --git a/app/dashboard/src/pages/users/dialog/note-field.tsx b/app/dashboard/src/pages/users/dialog/note-field.tsx
deleted file mode 100644
index 618a0f6..0000000
--- a/app/dashboard/src/pages/users/dialog/note-field.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { FormControl, FormLabel, Textarea, FormErrorMessage } from '@chakra-ui/react';
-import { TFunction } from 'i18next';
-
-interface NoteFieldProps {
- form: any;
- t: TFunction<'translation', undefined, 'translation'>;
-}
-
-export const NoteField = ({ t, form }: NoteFieldProps) => {
- return (
-
- {t('userDialog.note')}
-
-
- {form.formState.errors?.note?.message}
-
-
- )
-}
diff --git a/app/dashboard/src/pages/users/dialog/periodic-usage-reset.tsx b/app/dashboard/src/pages/users/dialog/periodic-usage-reset.tsx
deleted file mode 100644
index 5a7d530..0000000
--- a/app/dashboard/src/pages/users/dialog/periodic-usage-reset.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { FormControl, FormLabel, Select } from '@chakra-ui/react';
-import { Controller } from 'react-hook-form';
-import { resetStrategy } from 'constants/Settings';
-import { TFunction } from 'i18next';
-
-
-interface PreiodicUsageResetProps {
- form: any;
- t: TFunction<'translation', undefined, 'translation'>;
-}
-
-export const PeriodicUsageReset = ({ form, t }: PreiodicUsageResetProps) => {
- return (
-
-
- {t('userDialog.periodicUsageReset')}
-
- {
- return (
-
- );
- }}
- />
-
- )
-}
diff --git a/app/dashboard/src/pages/users/dialog/services-field.tsx b/app/dashboard/src/pages/users/dialog/services-field.tsx
deleted file mode 100644
index 7cfd724..0000000
--- a/app/dashboard/src/pages/users/dialog/services-field.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { FormControl, FormLabel, FormErrorMessage, Center, Spinner, Text, Flex, chakra } from '@chakra-ui/react';
-import { UsersIcon, ServerStackIcon } from '@heroicons/react/24/outline';
-import { IconBaseStyle } from 'constants/IconBaseStyle';
-import { TFunction } from 'i18next';
-import { Controller } from 'react-hook-form';
-import { Service } from 'types';
-import { SystemPropertyStatus } from 'components/system-property-status';
-import { ServicesSelectList } from './services-select-list';
-
-const UsersServiceIcon = chakra(UsersIcon, IconBaseStyle);
-const InboundsServiceIcon = chakra(ServerStackIcon, IconBaseStyle);
-
-interface ServicesFieldProps {
- form: any;
- services: Service[];
- t: TFunction<'translation', undefined, 'translation'>;
-}
-
-export const ServicesField = ({ form, t, services }: ServicesFieldProps) => {
- return services.length === 0 ? (
-
- ) : (
-
- {t('userDialog.services')}
- {
- return (
- (
-
-
- {service.name}
-
-
-
- /
-
-
-
- )}
- />
- );
- }}
- />
-
- {t(
- form.formState.errors.services
- ?.message as string
- )}
-
-
- );
-}
diff --git a/app/dashboard/src/pages/users/dialog/services-select-list.tsx b/app/dashboard/src/pages/users/dialog/services-select-list.tsx
deleted file mode 100644
index ee3e4b4..0000000
--- a/app/dashboard/src/pages/users/dialog/services-select-list.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-
-import {
- Box,
- Flex,
- Stack,
-} from '@chakra-ui/react';
-import { ListCheckBox } from 'components/list-check-box';
-import { forwardRef, ReactNode } from 'react';
-import {
- useFormContext,
-} from 'react-hook-form';
-import { Service } from 'types';
-
-interface ServicesSelectListProps {
- list: Service[];
- renderCheckboxContent: (service: Service) => ReactNode;
-}
-
-export const ServicesSelectList = forwardRef(
- function({ list, renderCheckboxContent }, ref) {
- const form = useFormContext();
-
- const handleServiceToggle = (serviceId: number) => {
- const currentServices = form.getValues('services');
- const isSelected = currentServices.includes(serviceId);
-
- let updatedServices;
-
- if (isSelected) {
- updatedServices = currentServices.filter((id: number) => id !== serviceId);
- } else {
- updatedServices = [...currentServices, serviceId];
- }
-
- form.setValue('services', updatedServices, { shouldValidate: true });
- };
-
- return (
-
- {list.map((service: Service) => (
-
-
- handleServiceToggle(service.id)}
- value={String(service.id)}
- renderContent={() => renderCheckboxContent(service)}
- />
-
-
- ))}
-
- );
- }
-);
diff --git a/app/dashboard/src/pages/users/dialog/username-field.tsx b/app/dashboard/src/pages/users/dialog/username-field.tsx
deleted file mode 100644
index 05007ca..0000000
--- a/app/dashboard/src/pages/users/dialog/username-field.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { HStack, Input, Tooltip, Box, Switch, FormControl, FormLabel } from '@chakra-ui/react';
-import { TFunction } from 'i18next';
-import { Controller } from 'react-hook-form';
-
-interface UsernameFieldProps {
- form: any;
- isEditing: boolean;
- t: TFunction<'translation', undefined, 'translation'>;
- disabled: boolean;
-}
-
-export const UsernameField = ({ form, isEditing, t, disabled }: UsernameFieldProps) => {
- return (
-
- {t('username')}
-
-
- {isEditing && (
-
- {
- return (
-
-
- {
- if (e.target.checked) {
- field.onChange('active');
- } else {
- field.onChange('disabled');
- }
- }}
- />
-
-
- );
- }}
- />
-
- )}
-
-
- )
-}
diff --git a/app/dashboard/src/pages/users/filters.tsx b/app/dashboard/src/pages/users/filters.tsx
deleted file mode 100644
index 4cd071f..0000000
--- a/app/dashboard/src/pages/users/filters.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import {
- BoxProps,
- Button,
- chakra,
- Grid,
- GridItem,
- HStack,
- IconButton,
- Input,
- InputGroup,
- InputLeftElement,
- InputRightElement,
- Spinner,
-} from '@chakra-ui/react';
-import {
- ArrowPathIcon,
- MagnifyingGlassIcon,
- XMarkIcon,
-} from '@heroicons/react/24/outline';
-import classNames from 'classnames';
-import { useDashboard, useUsers } from 'stores';
-import debounce from 'lodash.debounce';
-import React, { FC, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const iconProps = {
- baseStyle: {
- w: 4,
- h: 4,
- },
-};
-
-const SearchIcon = chakra(MagnifyingGlassIcon, iconProps);
-const ClearIcon = chakra(XMarkIcon, iconProps);
-export const ReloadIcon = chakra(ArrowPathIcon, iconProps);
-
-export type FilterProps = {} & BoxProps;
-const setSearchField = debounce((username: string) => {
- useUsers.getState().onFilterChange({
- ...useUsers.getState().usersFilters,
- offset: 0,
- username,
- });
-}, 300);
-
-export const UsersFilters: FC = ({ ...props }) => {
- const { loading, } = useDashboard();
- const { usersFilters: filters, onFilterChange, refetchUsers, onCreateUser, onResetAllUsage } = useUsers();
- const { t } = useTranslation();
- const [search, setSearch] = useState('');
- const onChange = (e: React.ChangeEvent) => {
- setSearch(e.target.value);
- setSearchField(e.target.value);
- };
- const clear = () => {
- setSearch('');
- onFilterChange({
- ...filters,
- offset: 0,
- username: '',
- });
- };
- return (
-
-
-
- } />
-
-
- {loading && }
- {filters.username && filters.username.length > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
diff --git a/app/dashboard/src/pages/users/index.tsx b/app/dashboard/src/pages/users/index.tsx
deleted file mode 100644
index 7e4d74c..0000000
--- a/app/dashboard/src/pages/users/index.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { UserDialog } from './dialog';
-import { UsersTable } from './table';
-import { UsersFilters } from './filters';
-import {
- ResetAllUsageModal,
- DeleteUserModal,
- QRCodeDialog,
- ResetUserUsageModal,
- RevokeSubscriptionModal
-} from './modals';
-import { pages } from 'stores';
-import Page from 'components/page';
-
-const UsersPage = () => {
- return (
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-export default UsersPage;
diff --git a/app/dashboard/src/pages/users/modals/delete-modal.tsx b/app/dashboard/src/pages/users/modals/delete-modal.tsx
deleted file mode 100644
index 69b11f4..0000000
--- a/app/dashboard/src/pages/users/modals/delete-modal.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import {
- useToast,
-} from '@chakra-ui/react';
-import { FC, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useUsers } from 'stores';
-import { DeleteModal } from 'components/delete-modal';
-
-type DeleteUserModalProps = {
- deleteCallback?: () => void;
-};
-
-export const DeleteUserModal: FC = () => {
- const [loading, setLoading] = useState(false);
- const { deletingUser, onDeletingUser, deleteUser } = useUsers();
- const { t } = useTranslation();
- const toast = useToast();
- const onClose = () => {
- onDeletingUser(null);
- };
- const onDelete = () => {
- if (deletingUser) {
- setLoading(true);
- deleteUser(deletingUser)
- .then(() => {
- toast({
- title: t('deleteUser.deleteSuccess', { username: deletingUser.username }),
- status: 'success',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- })
- .then(onClose)
- .finally(setLoading.bind(null, false));
- }
- };
- return (
-
- );
-};
diff --git a/app/dashboard/src/pages/users/modals/index.tsx b/app/dashboard/src/pages/users/modals/index.tsx
deleted file mode 100644
index b90cacb..0000000
--- a/app/dashboard/src/pages/users/modals/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './reset-all-usage-modal';
-export * from './delete-modal';
-export * from './qrcode-modals';
-export * from './reset-user-usage-modal';
-export * from './revoke-subscription-modal';
diff --git a/app/dashboard/src/pages/users/modals/qrcode-modals.tsx b/app/dashboard/src/pages/users/modals/qrcode-modals.tsx
deleted file mode 100644
index f1ee343..0000000
--- a/app/dashboard/src/pages/users/modals/qrcode-modals.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import {
- Box,
- chakra,
- HStack,
- IconButton,
- Modal,
- ModalBody,
- ModalCloseButton,
- ModalContent,
- ModalHeader,
- ModalOverlay,
- Text,
- VStack,
-} from '@chakra-ui/react';
-import {
- ChevronLeftIcon,
- ChevronRightIcon,
- QrCodeIcon,
-} from '@heroicons/react/24/outline';
-import { QRCodeCanvas } from 'qrcode.react';
-import { FC, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import Slider from 'react-slick';
-import 'slick-carousel/slick/slick-theme.css';
-import 'slick-carousel/slick/slick.css';
-import { Icon } from 'components/icon';
-import { useUsers } from 'stores';
-
-const QRCode = chakra(QRCodeCanvas);
-const NextIcon = chakra(ChevronRightIcon, {
- baseStyle: {
- w: 6,
- h: 6,
- color: 'gray.600',
- _dark: {
- color: 'white',
- },
- },
-});
-const PrevIcon = chakra(ChevronLeftIcon, {
- baseStyle: {
- w: 6,
- h: 6,
- color: 'gray.600',
- _dark: {
- color: 'white',
- },
- },
-});
-const QRIcon = chakra(QrCodeIcon, {
- baseStyle: {
- w: 5,
- h: 5,
- },
-});
-
-export const QRCodeDialog: FC = () => {
- const { QRcodeLinks, setQRCode, setSubLink, subscribeUrl } = useUsers();
- const isOpen = QRcodeLinks !== null;
- const [index, setIndex] = useState(0);
- const { t } = useTranslation();
- const onClose = () => {
- setQRCode(null);
- setSubLink(null);
- };
-
- const subscribeQrLink = String(subscribeUrl).startsWith('/')
- ? window.location.origin + subscribeUrl
- : String(subscribeUrl);
-
- return (
-
-
-
-
-
-
-
-
-
- {QRcodeLinks && (
-
- {subscribeUrl && (
-
-
-
- {t('qrcodeDialog.sublink')}
-
-
- )}
-
- setIndex(0)}
- nextArrow={
-
-
-
- }
- prevArrow={
-
-
-
- }
- >
- {QRcodeLinks.map((link, i) => {
- return (
-
-
-
- );
- })}
-
-
- {index + 1} / {QRcodeLinks.length}
-
-
-
- )}
-
-
- );
-};
diff --git a/app/dashboard/src/pages/users/modals/reset-all-usage-modal.tsx b/app/dashboard/src/pages/users/modals/reset-all-usage-modal.tsx
deleted file mode 100644
index ef4159d..0000000
--- a/app/dashboard/src/pages/users/modals/reset-all-usage-modal.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import {
- Button,
- chakra,
- Modal,
- ModalBody,
- ModalCloseButton,
- ModalContent,
- ModalFooter,
- ModalHeader,
- ModalOverlay,
- Spinner,
- Text,
- useToast,
-} from '@chakra-ui/react';
-import { FC, useState } from 'react';
-import { DocumentMinusIcon } from '@heroicons/react/24/outline';
-import { Icon } from 'components/icon';
-import { useTranslation } from 'react-i18next';
-import { useUsers } from 'stores';
-
-export const ResetIcon = chakra(DocumentMinusIcon, {
- baseStyle: {
- w: 5,
- h: 5,
- },
-});
-
-type DeleteUserModalProps = {};
-
-export const ResetAllUsageModal: FC = () => {
- const [loading, setLoading] = useState(false);
- const { isResetingAllUsage, onResetAllUsage, resetAllUsage } = useUsers();
- const { t } = useTranslation();
- const toast = useToast();
- const onClose = () => {
- onResetAllUsage(false);
- };
- const onReset = () => {
- setLoading(true);
- resetAllUsage()
- .then(() => {
- toast({
- title: t('resetAllUsage.success'),
- status: 'success',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- })
- .catch(() => {
- toast({
- title: t('resetAllUsage.error'),
- status: 'error',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- })
- .finally(() => {
- setLoading(false);
- });
- };
- return (
-
-
-
-
-
-
-
-
-
-
-
- {t('resetAllUsage.title')}
-
- {isResetingAllUsage && (
-
- {t('resetAllUsage.prompt')}
-
- )}
-
-
-
- : undefined}
- >
- {t('reset')}
-
-
-
-
- );
-};
diff --git a/app/dashboard/src/pages/users/modals/reset-user-usage-modal.tsx b/app/dashboard/src/pages/users/modals/reset-user-usage-modal.tsx
deleted file mode 100644
index b043c23..0000000
--- a/app/dashboard/src/pages/users/modals/reset-user-usage-modal.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import {
- Button,
- chakra,
- Modal,
- ModalBody,
- ModalCloseButton,
- ModalContent,
- ModalFooter,
- ModalHeader,
- ModalOverlay,
- Spinner,
- Text,
- useToast,
-} from '@chakra-ui/react';
-import { FC, useState } from 'react';
-import { ArrowPathIcon } from '@heroicons/react/24/outline';
-import { Icon } from 'components/icon';
-import { useTranslation, Trans } from 'react-i18next';
-import { useUsers } from 'stores';
-
-const ResetIcon = chakra(ArrowPathIcon, {
- baseStyle: {
- w: 5,
- h: 5,
- },
-});
-
-type DeleteUserModalProps = {};
-
-export const ResetUserUsageModal: FC = () => {
- const [loading, setLoading] = useState(false);
- const { resetUsageUser: user, resetDataUsage } = useUsers();
- const { t } = useTranslation();
- const toast = useToast();
- const onClose = () => {
- useUsers.setState({ resetUsageUser: null });
- };
- const onReset = () => {
- if (user) {
- setLoading(true);
- resetDataUsage(user)
- .then(() => {
- toast({
- title: t('resetUserUsage.success', { username: user.username }),
- status: 'success',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- })
- .catch(() => {
- toast({
- title: t('resetUserUsage.error'),
- status: 'error',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- })
- .finally(() => {
- setLoading(false);
- });
- }
- };
- return (
-
-
-
-
-
-
-
-
-
-
-
- {t('resetUserUsage.title')}
-
- {user && (
-
- }}>
- {t('resetUserUsage.prompt', { username: user.username })}
-
-
- )}
-
-
-
- : undefined}
- >
- {t('reset')}
-
-
-
-
- );
-};
diff --git a/app/dashboard/src/pages/users/modals/revoke-subscription-modal.tsx b/app/dashboard/src/pages/users/modals/revoke-subscription-modal.tsx
deleted file mode 100644
index cff25ab..0000000
--- a/app/dashboard/src/pages/users/modals/revoke-subscription-modal.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import {
- Button,
- chakra,
- Modal,
- ModalBody,
- ModalCloseButton,
- ModalContent,
- ModalFooter,
- ModalHeader,
- ModalOverlay,
- Spinner,
- Text,
- useToast,
-} from '@chakra-ui/react';
-import { ArrowPathIcon } from '@heroicons/react/24/outline';
-import { useUsers } from 'stores';
-import { FC, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import { Icon } from 'components/icon';
-
-const ResetIcon = chakra(ArrowPathIcon, {
- baseStyle: {
- w: 5,
- h: 5,
- },
-});
-
-export type RevokeSubscriptionModalProps = {};
-
-export const RevokeSubscriptionModal: FC = () => {
- const [loading, setLoading] = useState(false);
- const { revokeSubscriptionUser: user, revokeSubscription } = useUsers();
- const { t } = useTranslation();
- const toast = useToast();
- const onClose = () => {
- useUsers.setState({ revokeSubscriptionUser: null });
- };
- const onReset = () => {
- if (user) {
- setLoading(true);
- revokeSubscription(user)
- .then(() => {
- toast({
- title: t('revokeUserSub.success', { username: user.username }),
- status: 'success',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- })
- .catch(() => {
- toast({
- title: t('revokeUserSub.error'),
- status: 'error',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- })
- .finally(() => {
- setLoading(false);
- });
- }
- };
- return (
-
-
-
-
-
-
-
-
-
-
-
- {t('revokeUserSub.title')}
-
- {user && (
-
- }}>
- {t('revokeUserSub.prompt', { username: user.username })}
-
-
- )}
-
-
-
- : undefined}
- >
- {t('revoke')}
-
-
-
-
- );
-};
diff --git a/app/dashboard/src/pages/users/table/action-buttons.tsx b/app/dashboard/src/pages/users/table/action-buttons.tsx
deleted file mode 100644
index b44941d..0000000
--- a/app/dashboard/src/pages/users/table/action-buttons.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-
-import { t } from 'i18next';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import { User } from 'types';
-import {
- CopiedIcon,
- CopyIcon,
- QRIcon,
- SubscriptionLinkIcon
-} from 'components/table';
-import {
- HStack,
- IconButton,
- Tooltip,
-} from '@chakra-ui/react';
-import { FC, useEffect, useState } from 'react';
-import { useUsers } from 'stores';
-
-type ActionButtonsProps = {
- user: User;
-};
-
-export const ActionButtons: FC = ({ user }) => {
- const { setQRCode, setSubLink } = useUsers();
-
- const proxyLinks = user.links.join('\r\n');
-
- const [copied, setCopied] = useState([-1, false]);
- useEffect(() => {
- if (copied[1]) {
- setTimeout(() => {
- setCopied([-1, false]);
- }, 1000);
- }
- }, [copied]);
- return (
- {
- e.preventDefault();
- e.stopPropagation();
- }}
- >
- {
- setCopied([0, true]);
- }}
- >
-
-
-
- {copied[0] == 0 && copied[1] ? (
-
- ) : (
-
- )}
-
-
-
-
- {
- setCopied([1, true]);
- }}
- >
-
-
-
- {copied[0] == 1 && copied[1] ? : }
-
-
-
-
-
- {
- setQRCode(user.links);
- setSubLink(user.subscription_url);
- }}
- >
-
-
-
-
- );
-};
diff --git a/app/dashboard/src/pages/users/table/index.tsx b/app/dashboard/src/pages/users/table/index.tsx
deleted file mode 100644
index 123ada5..0000000
--- a/app/dashboard/src/pages/users/table/index.tsx
+++ /dev/null
@@ -1,411 +0,0 @@
-
-import {
- Accordion,
- AccordionButton,
- AccordionItem,
- AccordionPanel,
- Box,
- HStack,
- IconButton,
- Table,
- TableProps,
- Tbody,
- Td,
- Text,
- Th,
- Thead,
- Tooltip,
- Tr,
- useBreakpointValue,
- VStack,
-} from '@chakra-ui/react';
-import classNames from 'classnames';
-import { statusColors } from 'constants/Settings';
-import { FC, Fragment, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { OnlineBadge } from 'components/online-badge';
-import { OnlineStatus } from 'components/online-status';
-import { StatusBadge } from 'components/status-badge';
-import {
- Pagination,
- EmptySection,
- AccordionArrowIcon,
- handleSort,
- EditIcon,
- StatusSortSelect,
- Sort,
-} from 'components/table';
-import { UsageSlider, UsageSliderCompact } from './usage-slider';
-import { fetchUsers, useUsers } from 'stores';
-import { ActionButtons } from './action-buttons';
-import { pageSizeManagers } from 'utils/userPreferenceStorage';
-import { useQuery } from '@tanstack/react-query';
-import { User } from 'types';
-import { queryIds } from 'constants/query-ids';
-
-type ExpandedIndex = number | number[];
-
-type UsersTableProps = {} & TableProps;
-
-export const UsersTable: FC = (props) => {
- const {
- usersFilters: filters,
- onEditingUser,
- onCreateUser,
- onFilterChange,
- } = useUsers();
- const { data } = useQuery({
- queryKey: [queryIds.users],
- queryFn: () => { return fetchUsers(filters) },
- initialData: { total: 0, users: [] },
- });
- const { t } = useTranslation();
- const [selectedRow, setSelectedRow] = useState(
- undefined
- );
- const useTable = useBreakpointValue({ base: false, md: true });
-
- const handleStatusFilter = (e: any) => {
- onFilterChange({
- status: e.target.value.length > 0 ? e.target.value : undefined,
- });
- };
- const isFiltered = data?.total !== data?.users.length;
- const toggleAccordion = (index: number) => {
- setSelectedRow(index === selectedRow ? undefined : index);
- };
- return (
-
-
-
-
-
- |
-
- {t('users')}
-
-
- |
-
-
-
- {t('usersTable.status')}
- {filters.status ? ': ' + filters.status : ''}
-
-
-
- |
-
-
- {t('usersTable.dataUsage')}
-
-
- |
- |
-
-
-
- {!useTable &&
- data?.users.map((user, i) => {
- return (
-
-
- |
-
-
- {user.username}
-
- |
-
-
- |
-
-
- |
-
-
- |
-
-
- |
-
-
-
-
-
-
- {t('usersTable.dataUsage')}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {
- e.stopPropagation();
- onEditingUser(user);
- }}
- >
-
-
-
-
-
-
-
-
- |
-
-
- );
- })}
-
-
-
-
-
-
- |
-
- {t('username')}
-
-
- |
-
-
-
- {t('usersTable.status')}
- {filters.status ? ': ' + filters.status : ''}
-
-
-
- |
-
-
- {t('usersTable.dataUsage')}
-
-
- |
- |
-
-
-
- {useTable &&
- data?.users.map((user: User, i) => {
- return (
- onEditingUser(user)}
- >
- |
-
-
- {user.username}
-
-
- |
-
-
- |
-
-
- |
-
-
- |
-
- );
- })}
- {data?.users.length == 0 && (
-
- |
-
- |
-
- )}
-
-
-
-
- );
-};
diff --git a/app/dashboard/src/pages/users/table/usage-slider.tsx b/app/dashboard/src/pages/users/table/usage-slider.tsx
deleted file mode 100644
index cf17e65..0000000
--- a/app/dashboard/src/pages/users/table/usage-slider.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { HStack, Text, SliderTrack, SliderFilledTrack, Slider, SliderProps } from '@chakra-ui/react';
-import { resetStrategy } from 'constants/Settings';
-import { formatBytes } from 'utils/formatByte';
-import { useTranslation } from 'react-i18next';
-import { FC } from 'react';
-
-export const UsageSliderCompact: FC = (props) => {
- const { used, total } = props;
- const isUnlimited = total === 0 || total === null;
- return (
-
-
- {formatBytes(used)} /{' '}
- {isUnlimited ? (
-
- ∞
-
- ) : (
- formatBytes(total)
- )}
-
-
- );
-};
-
-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';
-};
-
-export const UsageSlider: FC = (props) => {
- const {
- used,
- total,
- dataLimitResetStrategy,
- totalUsedTraffic,
- ...restOfProps
- } = props;
- const isUnlimited = total === 0 || total === null;
- const isReached = !isUnlimited && (used / total) * 100 >= 100;
- const { t } = useTranslation();
- return (
- <>
-
-
-
-
-
-
-
- {formatBytes(used)} /{' '}
- {isUnlimited ? (
-
- ∞
-
- ) : (
- formatBytes(total) +
- (dataLimitResetStrategy && dataLimitResetStrategy !== 'no_reset'
- ? ' ' +
- t(
- 'userDialog.resetStrategy' +
- getResetStrategy(dataLimitResetStrategy)
- )
- : '')
- )}
-
-
- {t('usersTable.total')}: {formatBytes(totalUsedTraffic)}
-
-
-
- );
-};
diff --git a/app/dashboard/src/service/auth-storage.ts b/app/dashboard/src/service/auth-storage.ts
deleted file mode 100644
index c242f5c..0000000
--- a/app/dashboard/src/service/auth-storage.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const getAuthToken = () => {
- return localStorage.getItem('token');
-};
-
-export const setAuthToken = (token: string) => {
- localStorage.setItem('token', token);
-};
-
-export const removeAuthToken = () => {
- localStorage.removeItem('token');
-};
diff --git a/app/dashboard/src/service/http.ts b/app/dashboard/src/service/http.ts
deleted file mode 100644
index f2268f1..0000000
--- a/app/dashboard/src/service/http.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { FetchOptions, $fetch as ohMyFetch } from 'ohmyfetch';
-import { getAuthToken } from 'service/auth-storage';
-
-export const $fetch = ohMyFetch.create({
- baseURL: import.meta.env.VITE_BASE_API,
-});
-
-export const fetcher = (
- url: string,
- ops: FetchOptions<'json'> = {}
-) => {
- const token = getAuthToken();
- if (token) {
- ops['headers'] = {
- ...(ops?.headers || {}),
- Authorization: `Bearer ${getAuthToken()}`,
- };
- }
- return $fetch(url, ops);
-};
-
-export const fetch = fetcher;
-
-export const fetchAdminLoader = () => {
- return fetch('/admins', {
- headers: {
- Authorization: `Bearer ${getAuthToken()}`,
- },
- });
-};
diff --git a/app/dashboard/src/service/react-query.ts b/app/dashboard/src/service/react-query.ts
deleted file mode 100644
index 6d46de5..0000000
--- a/app/dashboard/src/service/react-query.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { QueryClient } from '@tanstack/react-query';
-
-export const queryClient = new QueryClient();
diff --git a/app/dashboard/src/stores/admin.store.ts b/app/dashboard/src/stores/admin.store.ts
deleted file mode 100644
index 2494d8a..0000000
--- a/app/dashboard/src/stores/admin.store.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { create } from 'zustand';
-import { subscribeWithSelector } from 'zustand/middleware';
-
-type AdminStateType = {
- isLoggedIn: boolean,
- getAuthToken: () => string | null;
- setAuthToken: (token: string) => void;
- removeAuthToken: () => void;
-}
-
-export const useAdmin = create(
- subscribeWithSelector((set,) => ({
- isLoggedIn: false,
- getAuthToken: () => {
- return localStorage.getItem('token');
- },
- setAuthToken: (token: string) => {
- localStorage.setItem('token', token);
- set({ isLoggedIn: true });
- },
-
- removeAuthToken: () => {
- localStorage.removeItem('token');
- set({ isLoggedIn: false });
- },
- }))
-)
diff --git a/app/dashboard/src/stores/core-settings.store.ts b/app/dashboard/src/stores/core-settings.store.ts
deleted file mode 100644
index 16ca112..0000000
--- a/app/dashboard/src/stores/core-settings.store.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { fetch } from 'service/http';
-import { create } from 'zustand';
-import { NodeType } from './nodes.store';
-
-type CoreSettingsStore = {
- isLoading: boolean;
- isPostLoading: boolean;
- fetchCoreSettings: () => void;
- updateConfig: (json: string) => Promise;
- restartCore: () => Promise;
- config: string;
- selectedNode: NodeType | null;
- isEditingCore: boolean;
-};
-
-export const useCoreSettings = create((set, get) => ({
- isLoading: true,
- isPostLoading: false,
- isEditingCore: false,
- config: '',
- selectedNode: null,
- fetchCoreSettings: () => {
- set({ isLoading: true });
- Promise.all([
- fetch(`/nodes/${get().selectedNode?.id}/xray_config`).then((config) => set({ config })),
- ]).finally(() => set({ isLoading: false }));
- },
- updateConfig: async (body) => {
- set({ isPostLoading: true });
- return fetch(`/nodes/${get().selectedNode?.id}/xray_config`, { method: 'PUT', body }).finally(() => {
- set({ isPostLoading: false });
- });
- },
- restartCore: () => {
- return fetch('/core/restart', { method: 'POST' });
- },
-}));
diff --git a/app/dashboard/src/stores/dashboard.store.ts b/app/dashboard/src/stores/dashboard.store.ts
deleted file mode 100644
index 89dc0e3..0000000
--- a/app/dashboard/src/stores/dashboard.store.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { create } from 'zustand';
-import { subscribeWithSelector } from 'zustand/middleware';
-import { PageType, Pages } from 'types';
-import { chakra } from '@chakra-ui/react';
-import { CubeIcon, HomeIcon, ServerIcon, ServerStackIcon, UsersIcon } from '@heroicons/react/24/outline';
-import { IconBaseStyle } from 'constants/IconBaseStyle';
-
-const UsersSidebarItemIcon = chakra(UsersIcon, IconBaseStyle);
-const ServicesSidebarItemIcon = chakra(ServerStackIcon, IconBaseStyle);
-const NodesSidebarItemIcon = chakra(CubeIcon, IconBaseStyle);
-const HostSidebarItemIcon = chakra(ServerIcon, IconBaseStyle);
-const HomeSidebarItemIcon = chakra(HomeIcon, IconBaseStyle);
-
-
-export const pages: Pages = {
- home: {
- name: 'home',
- path: '/',
- itemIcon: HomeSidebarItemIcon,
- },
- users: {
- name: 'users',
- path: '/users',
- itemIcon: UsersSidebarItemIcon,
- },
- services: {
- name: 'services',
- path: '/services',
- itemIcon: ServicesSidebarItemIcon,
- },
- nodes: {
- name: 'nodes',
- path: '/nodes',
- itemIcon: NodesSidebarItemIcon,
- },
- hosts: {
- name: 'hosts',
- path: '/hosts',
- itemIcon: HostSidebarItemIcon,
- },
-};
-
-type DashboardStateType = {
- version: string | null;
- loading: boolean;
- activePage: PageType;
- isCollapsed: boolean;
- collapseSidebar: () => void;
- expandSidebar: () => void;
- activatePage: (pageId: PageType) => void;
-};
-
-export const useDashboard = create(
- subscribeWithSelector((set,) => ({
- version: null,
- loading: true,
- activePage: pages.home,
- isCollapsed: false,
- expandSidebar: () => {
- set({ isCollapsed: false })
- },
- collapseSidebar: () => {
- set({ isCollapsed: true })
- },
- activatePage: (page) => {
- set({ activePage: page });
- },
- }))
-);
diff --git a/app/dashboard/src/stores/inbounds.store.ts b/app/dashboard/src/stores/inbounds.store.ts
deleted file mode 100644
index 7b6974b..0000000
--- a/app/dashboard/src/stores/inbounds.store.ts
+++ /dev/null
@@ -1,175 +0,0 @@
-import { create } from 'zustand';
-import { subscribeWithSelector } from 'zustand/middleware';
-import { useDashboard } from './dashboard.store';
-import { fetch } from 'service/http';
-import { Inbounds, InboundType } from 'types/inbounds';
-import { z } from 'zod';
-import { HostsFilterType, InboundsFilterType } from 'types';
-import { pageSizeManagers } from 'utils/userPreferenceStorage';
-import { queryClient } from 'service/react-query';
-import { queryIds } from 'constants/query-ids';
-
-export const hostSchema = z.object({
- remark: z.string().min(1, 'Remark is required'),
- address: z.string().min(1, 'Address is required'),
- port: z.coerce.number()
- .gte(1, 'Port must be more than 1')
- .lte(65535, 'Port can not be more than 65535')
- .or(z.string().nullable()),
- path: z.string(),
- sni: z.string(),
- host: z.string(),
- security: z.enum(['inbound_default', 'none', 'tls']),
- alpn: z.string().optional(),
- fingerprint: z.string().optional(),
-});
-
-export type HostSchema = z.infer;
-export type HostType = HostSchema & { id?: number };
-export type Hosts = HostType[];
-
-export const fetchInbounds = async () => {
- useDashboard.setState({ loading: true });
- return fetch('/inbounds')
- .then((inbounds: Inbounds) => inbounds)
- .finally(() => {
- useDashboard.setState({ loading: false });
- });
-};
-
-export const fetchInboundHosts = async (id: number | undefined): Promise => {
- if (id !== undefined) {
- useDashboard.setState({ loading: true });
- return fetch(`/inbounds/${id}/hosts`)
- .then((hosts: Hosts) => {
- return hosts
- })
- .finally(() => {
- useDashboard.setState({ loading: false });
- });
- } else { return [] }
-};
-
-type InboundsStateType = {
- // Loading
- loading: boolean;
- setLoading: (value: boolean) => void;
- // Inbounds
- selectedInbound: InboundType | undefined;
- selectInbound: (inbound: InboundType) => void;
- refetchInbounds: () => void;
- // Hosts
- refetchHosts: () => void;
- hostsFilters: HostsFilterType;
- inboundsFilters: InboundsFilterType;
- onHostsFilterChange: (filters: Partial) => void;
- onInboundsFilterChange: (filters: Partial) => void;
- selectedHost: HostType | null;
- selectHost: (host: HostType) => void;
- isEditingHost: boolean;
- onEditingHost: (isEditingHost: boolean, host: HostType | null) => void;
- editHost: (inboundId: number | undefined, host: HostType) => Promise;
- isCreatingHost: boolean;
- onCreatingHost: (isCreatingHost: boolean) => void;
- createHost: (inboundId: number | undefined, host: HostSchema) => Promise;
- isDeletingHost: boolean;
- onDeletingHost: (isDeletingHost: boolean, host: HostType) => void;
- deleteHost: (hostId: number) => void;
-};
-
-export const useInbounds = create(
- subscribeWithSelector((set, get) => ({
- selectedHost: null,
- selectedInbound: undefined,
- loading: false,
- isDeletingHost: false,
- isCreatingHost: false,
- isEditingHost: false,
- hostsFilters: {
- name: '',
- limit: pageSizeManagers.hosts.getPageSize(),
- sort: '-created_at',
- },
- inboundsFilters: {
- name: '',
- limit: pageSizeManagers.inbounds.getPageSize(),
- sort: '-created_at',
- },
- onHostsFilterChange: (filters) => {
- set({
- hostsFilters: {
- ...get().hostsFilters,
- ...filters,
- },
- });
- },
- onInboundsFilterChange: (filters) => {
- set({
- hostsFilters: {
- ...get().inboundsFilters,
- ...filters,
- },
- });
- },
- setLoading: (value) => {
- set({ loading: value })
- },
- refetchInbounds: () => {
- queryClient.invalidateQueries({ queryKey: [queryIds.inbounds] });
- },
- refetchHosts: async () => {
- queryClient.invalidateQueries({ queryKey: [queryIds.hosts] });
- },
- selectInbound: (host): void => {
- set({ selectedInbound: host })
- },
- selectHost: (host: HostType): void => {
- set({ selectedHost: host })
- },
- onEditingHost: (isEditingHost: boolean, host: HostType | null) => {
- set({ isEditingHost, selectedHost: host });
- },
- editHost: async (hostId: number | undefined, body: HostSchema): Promise => {
- if (hostId !== undefined) {
- useDashboard.setState({ loading: true });
- return fetch(`/inbounds/hosts/${hostId}`, { method: 'PUT', body })
- .then(() => true)
- .catch(() => false)
- .finally(() => {
- useDashboard.setState({ loading: false });
- get().refetchHosts();
- });
- }
- },
- onCreatingHost: (isCreatingHost: boolean) => {
- set({ isCreatingHost });
- },
- createHost: async (inboundId: number | undefined, body: HostSchema): Promise => {
- if (inboundId !== undefined) {
- useDashboard.setState({ loading: true });
- return fetch(`/inbounds/${inboundId}/hosts`, { method: 'POST', body })
- .then(() => true)
- .catch(() => false)
- .finally(() => {
- useDashboard.setState({ loading: false });
- get().refetchHosts();
- });
- }
- },
- onDeletingHost: (isDeletingHost: boolean, host: HostType | null) => {
- set({ isDeletingHost, selectedHost: host });
- },
- deleteHost: async (hostId: number): Promise => {
- useDashboard.setState({ loading: true });
- return fetch(`/inbounds/hosts/${hostId}`, { method: 'DELETE' })
- .then(() => {
- get().refetchHosts();
- return true;
- })
- .catch(() => false)
- .finally(() => {
- useDashboard.setState({ loading: false });
- });
- },
- }))
-);
diff --git a/app/dashboard/src/stores/index.ts b/app/dashboard/src/stores/index.ts
deleted file mode 100644
index afc1b15..0000000
--- a/app/dashboard/src/stores/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from './admin.store';
-export * from './inbounds.store';
-export * from './users.store';
-export * from './services.store';
-export * from './core-settings.store';
-export * from './dashboard.store';
-export * from './nodes.store';
diff --git a/app/dashboard/src/stores/nodes.store.ts b/app/dashboard/src/stores/nodes.store.ts
deleted file mode 100644
index e54e883..0000000
--- a/app/dashboard/src/stores/nodes.store.ts
+++ /dev/null
@@ -1,185 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { fetch } from 'service/http';
-import { create } from 'zustand';
-import { z } from 'zod';
-import { FilterUsageType, NodesFilterType } from 'types/filter';
-import { pageSizeManagers } from 'utils/userPreferenceStorage';
-import { useDashboard } from './dashboard.store';
-import { queryClient } from 'service/react-query';
-import { queryIds } from 'constants/query-ids';
-
-export const NodeSchema = z.object({
- name: z.string().min(1),
- address: z.string().min(1),
- port: z
- .number()
- .min(1)
- .or(z.string().transform((v) => parseFloat(v))),
- xray_version: z.string().nullable().optional(),
- id: z.number().nullable().optional(),
- status: z
- .enum(['healthy', 'unhealthy', 'disabled']),
- message: z.string().nullable().optional(),
- usage_coefficient: z.number().default(1),
- add_as_new_host: z.boolean(),
-});
-
-export const NodeCreateSchema = z.object({
- name: z.string().min(1),
- address: z.string().min(1),
- port: z
- .number()
- .min(1)
- .or(z.string().transform((v) => parseFloat(v))),
- id: z.number().nullable().optional(),
- status: z
- .enum(['none', 'disabled']),
- usage_coefficient: z.number().default(1),
- add_as_new_host: z.boolean().optional(),
-});
-
-export type NodeType = z.infer;
-export type NodeCreate = z.infer;
-
-export const getNodeDefaultValues = (): NodeType => ({
- name: '',
- address: '',
- status: 'unhealthy',
- port: 62050,
- xray_version: '',
- add_as_new_host: false,
- usage_coefficient: 1,
-});
-
-export const getNodeCreateDefaultValues = (): NodeCreate => ({
- name: '',
- address: '',
- status: 'none',
- port: 62050,
- add_as_new_host: false,
- usage_coefficient: 1,
- id: 0,
-});
-
-export const FetchNodesQueryKey = 'fetch-nodes-query-key';
-
-export async function fetchNodes(): Promise {
- useDashboard.setState({ loading: true })
- return fetch('/nodes').then((nodes) => {
- return nodes;
- }).finally(() => {
- useDashboard.setState({ loading: false })
- });
-}
-
-export type NodeStore = {
- certificate: string,
- deletingNode?: NodeCreate | null;
- editingNode: NodeCreate | null;
- isAddingNode: boolean;
- isShowingNodesUsage: boolean;
- isEditingNode: boolean;
- nodesFilters: NodesFilterType;
- refetchNodes: () => void;
- refetchCertificate: () => void;
- fetchNodesUsage: (query: FilterUsageType) => Promise;
- addNode: (node: NodeCreate) => Promise;
- deleteNode: (node: NodeCreate) => Promise;
- updateNode: (node: NodeCreate) => Promise;
- reconnectNode: (node: NodeType) => Promise;
- onDeletingNode: (node: NodeCreate | undefined) => void;
- onEditingNode: (node: NodeType | undefined) => void;
- onAddingNode: (isAddingNode: boolean) => void;
- onFilterChange: (filters: Partial) => void;
- onShowingNodesUsage: (isShowingNodesUsage: boolean) => void;
-};
-
-// TODO: Refactor all useQuery for inbounds, hosts,
-// services and uses to be a custom hook like this.
-export const useNodesQuery = () => {
- return useQuery({
- queryKey: [FetchNodesQueryKey],
- queryFn: fetchNodes,
- refetchInterval: useNodes.getState().editingNode ? 3000 : undefined,
- refetchOnWindowFocus: false,
- });
-};
-
-export const useNodes = create((set, get) => ({
- certificate: '',
- editingNode: null,
- deletingNode: null,
- isAddingNode: false,
- isEditingNode: false,
- isShowingNodesUsage: false,
- isEditingCore: false,
- nodesFilters: {
- name: '',
- limit: pageSizeManagers.nodes.getPageSize(),
- sort: '-created_at',
- },
- onFilterChange: (filters) => {
- set({
- nodesFilters: {
- ...get().nodesFilters,
- ...filters,
- },
- });
- get().refetchNodes();
- },
- addNode: async (body) => {
- return fetch('/nodes', { method: 'POST', body }).then(() => { get().refetchCertificate() });
- },
- refetchNodes: () => {
- queryClient.invalidateQueries({ queryKey: [queryIds.nodes] });
- },
- refetchCertificate: () => {
- fetch('/nodes/settings').then((res) => {
- set({ certificate: res.certificate });
- })
- },
- fetchNodesUsage: (query: FilterUsageType) => {
- return fetch('/nodes/usage', { query });
- },
- updateNode: (body) => {
- console.log('update: ' + body.id)
- return fetch(`/nodes/${body.id}`, {
- method: 'PUT',
- body,
- });
- },
- onDeletingNode: (node: NodeCreate | undefined) => {
- if (node !== undefined) {
- set({ deletingNode: node });
- }
- else {
- set({ deletingNode: undefined });
- }
- },
- reconnectNode: (body) => {
- return fetch(`/nodes/${body.id}/reconnect`, {
- method: 'POST',
- });
- },
- deleteNode: () => {
- return fetch(`/nodes/${get().deletingNode?.id}`, {
- method: 'DELETE',
- });
- },
- onEditingNode: (editingNode: NodeType | undefined) => {
- if (editingNode !== undefined) {
- const { status, ...rest } = editingNode;
- set({ editingNode: { ...rest, status: (status === 'healthy' || status === 'unhealthy') ? 'none' : 'disabled' }, isEditingNode: true });
- }
- else {
- set({ editingNode: undefined, isEditingNode: false });
-
- }
- },
- onAddingNode: (isAddingNode: boolean) => {
- set({ isAddingNode });
- },
- onShowingNodesUsage: (isShowingNodesUsage: boolean) => {
- set({ isShowingNodesUsage });
- },
-}));
diff --git a/app/dashboard/src/stores/services.store.ts b/app/dashboard/src/stores/services.store.ts
deleted file mode 100644
index b76f795..0000000
--- a/app/dashboard/src/stores/services.store.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { queryClient } from 'service/react-query';
-import { Service, ServiceCreate } from 'types/service';
-import { pageSizeManagers } from 'utils/userPreferenceStorage';
-import { create } from 'zustand';
-import { subscribeWithSelector } from 'zustand/middleware';
-import { fetch } from 'service/http';
-import { ServicesFilterType } from 'types/filter';
-import { useDashboard, useUsers } from 'stores';
-import { queryIds } from 'constants/query-ids';
-
-type ServicesStateType = {
- isCreatingNewService: boolean;
- editingService: Service | null | undefined;
- deletingService: Service | null;
- servicesFilters: ServicesFilterType;
- onCreateService: (isOpen: boolean) => void;
- onEditingService: (service: Service | null) => void;
- onDeletingService: (service: Service | null) => void;
- refetchServices: () => void;
- deleteService: (service: Service) => Promise;
- createService: (service: ServiceCreate) => Promise;
- editService: (service: ServiceCreate) => Promise;
- onFilterChange: (filters: Partial) => void;
-};
-
-export const fetchServices = async (query: ServicesFilterType): Promise => {
- for (const key in query) {
- if (!query[key as keyof ServicesFilterType]) delete query[key as keyof ServicesFilterType];
- }
-
- useDashboard.setState({ loading: true });
-
- return fetch('/services')
- .then((services) => {
- return services;
- })
- .finally(() => {
- useDashboard.setState({ loading: false });
- });
-};
-
-export const useServices = create(
- subscribeWithSelector((set, get) => ({
- editingService: null,
- deletingService: null,
- isCreatingNewService: false,
- servicesFilters: {
- name: '',
- limit: pageSizeManagers.services.getPageSize(),
- sort: '-created_at',
- },
- onFilterChange: (filters) => {
- set({
- servicesFilters: {
- ...get().servicesFilters,
- ...filters,
- },
- });
- get().refetchServices();
- },
- refetchServices: () => {
- queryClient.invalidateQueries({ queryKey: [queryIds.services] });
- },
- onCreateService: (isCreatingNewService) => set({ isCreatingNewService }),
- onEditingService: (editingService) => {
- set({ editingService });
- },
- onDeletingService: (deletingService) => {
- set({ deletingService });
- },
- deleteService: async (service: Service) => {
- set({ editingService: null });
- return fetch(`/services/${service.id}`, { method: 'DELETE' }).then(() => {
- set({ deletingService: null });
- get().refetchServices();
- useUsers.getState().refetchUsers();
- });
- },
- createService: async (body: ServiceCreate) => {
- return fetch('/services', { method: 'POST', body }).then(() => {
- set({ editingService: null });
- get().refetchServices();
- });
- },
- editService: async (body: ServiceCreate) => {
- return fetch(`/services/${body.id}`, { method: 'PUT', body }).then(
- () => {
- get().onEditingService(null);
- get().refetchServices();
- }
- );
- },
- }))
-);
diff --git a/app/dashboard/src/stores/users.store.ts b/app/dashboard/src/stores/users.store.ts
deleted file mode 100644
index e8c2238..0000000
--- a/app/dashboard/src/stores/users.store.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-import { User, UserCreate } from 'types/user';
-import { subscribeWithSelector } from 'zustand/middleware';
-import { create } from 'zustand';
-import { pageSizeManagers } from 'utils/userPreferenceStorage';
-import { fetch } from 'service/http';
-import { useServices, useDashboard } from 'stores';
-import { StatisticsQueryKey } from 'components/statistics-card';
-import { queryClient } from 'service/react-query';
-import { UsersFilterType, FilterUsageType } from 'types/filter';
-import { queryIds } from 'constants/query-ids';
-
-type UsersStateType = {
- isCreatingNewUser: boolean;
- editingUser: User | null | undefined;
- deletingUser: User | null;
- usersFilters: UsersFilterType;
- resetUsageUser: User | null;
- revokeSubscriptionUser: User | null;
- isResetingAllUsage: boolean;
- subscribeUrl: string | null;
- QRcodeLinks: string[] | null;
- setQRCode: (links: string[] | null) => void;
- setSubLink: (subscribeURL: string | null) => void;
- onResetAllUsage: (isResetingAllUsage: boolean) => void;
- resetAllUsage: () => Promise;
- resetDataUsage: (user: User) => Promise;
- revokeSubscription: (user: User) => Promise;
- onCreateUser: (isOpen: boolean) => void;
- onEditingUser: (user: User | null) => void;
- onDeletingUser: (user: User | null) => void;
- refetchUsers: () => void;
- onFilterChange: (filters: Partial) => void;
- deleteUser: (user: User) => Promise;
- createUser: (user: UserCreate) => Promise;
- editUser: (user: UserCreate) => Promise;
- fetchUserUsage: (user: User, query: FilterUsageType) => Promise;
-}
-
-type UserResponse = {
- total: number,
- users: User[]
-}
-
-export const fetchUsers = async (query: UsersFilterType): Promise => {
- for (const key in query) {
- if (!query[key as keyof UsersFilterType]) delete query[key as keyof UsersFilterType];
- }
- useDashboard.setState({ loading: true });
- return fetch('/users', { query })
- .then((users) => {
- for (let i = 0; i < users.users.length; i++) {
- users.users[i].service = users.users[i].service_ids;
- }
- return users;
- })
- .finally(() => {
- useDashboard.setState({ loading: false });
- });
-};
-
-export const useUsers = create(subscribeWithSelector((set, get) => ({
- editingUser: null,
- deletingUser: null,
- isCreatingNewUser: false,
- resetUsageUser: null,
- revokeSubscriptionUser: null,
- isResetingAllUsage: false,
- usersFilters: {
- username: '',
- limit: pageSizeManagers.users.getPageSize(),
- sort: '-created_at',
- },
- QRcodeLinks: null,
- subscribeUrl: null,
- setQRCode: (QRcodeLinks) => {
- set({ QRcodeLinks });
- },
- setSubLink: (subscribeUrl) => {
- set({ subscribeUrl });
- },
- refetchUsers: () => {
- queryClient.invalidateQueries({ queryKey: [queryIds.users] });
- },
- resetAllUsage: async () => {
- return fetch('/users/reset', { method: 'POST' }).then(() => {
- get().onResetAllUsage(false);
- get().refetchUsers();
- });
- },
- onResetAllUsage: (isResetingAllUsage) => set({ isResetingAllUsage }),
- onCreateUser: (isCreatingNewUser) => set({ isCreatingNewUser }),
- onEditingUser: (editingUser) => {
- set({ editingUser });
- },
- onDeletingUser: (deletingUser) => {
- set({ deletingUser });
- },
- onFilterChange: (filters) => {
- set({
- usersFilters: {
- ...get().usersFilters,
- ...filters,
- },
- });
- get().refetchUsers();
- },
- deleteUser: async (user: User) => {
- set({ editingUser: null });
- return fetch(`/users/${user.username}`, { method: 'DELETE' }).then(() => {
- set({ deletingUser: null });
- get().refetchUsers();
- queryClient.invalidateQueries({ queryKey: [StatisticsQueryKey] });
- });
- },
- createUser: async (body: UserCreate) => {
- return fetch('/users', { method: 'POST', body }).then(() => {
- set({ editingUser: null });
- get().refetchUsers();
- useServices.getState().refetchServices();
- queryClient.invalidateQueries({ queryKey: [StatisticsQueryKey] });
- });
- },
- editUser: async (body: UserCreate) => {
- return fetch(`/users/${body.username}`, { method: 'PUT', body }).then(
- () => {
- get().onEditingUser(null);
- get().refetchUsers();
- }
- );
- },
-
- fetchUserUsage: (body: User, query: FilterUsageType) => {
- for (const key in query) {
- if (!query[key as keyof FilterUsageType])
- delete query[key as keyof FilterUsageType];
- }
- return fetch(`/users/${body.username}/usage`, { method: 'GET', query });
- },
- resetDataUsage: async (user) => {
- return fetch(`/users/${user.username}/reset`, { method: 'POST' }).then(
- () => {
- set({ resetUsageUser: null });
- get().refetchUsers();
- }
- );
- },
- revokeSubscription: async (user) => {
- return fetch(`/users/${user.username}/revoke_sub`, {
- method: 'POST',
- }).then((user) => {
- set({ revokeSubscriptionUser: null, editingUser: user });
- get().refetchUsers();
- });
- },
-})));
diff --git a/app/dashboard/src/types/chakra-icon.ts b/app/dashboard/src/types/chakra-icon.ts
deleted file mode 100644
index 1d2f2e9..0000000
--- a/app/dashboard/src/types/chakra-icon.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-
-import { SVGProps, ForwardRefExoticComponent } from 'react';
-import { ChakraComponent } from '@chakra-ui/react';
-
-export type ChakraIcon = ChakraComponent>>;
diff --git a/app/dashboard/src/types/filter.ts b/app/dashboard/src/types/filter.ts
deleted file mode 100644
index 0f413a5..0000000
--- a/app/dashboard/src/types/filter.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-
-
-export type FilterType = {
- limit?: number;
- offset?: number;
- sort: string;
-}
-
-export type UsersFilterType = FilterType & {
- username?: string;
- status?: 'active' | 'disabled' | 'limited' | 'expired' | 'on_hold';
-};
-
-export type FilterUsageType = {
- start?: string;
- end?: string;
-};
-
-export type ServicesFilterType = FilterType & {
- name?: string;
- users?: number;
- inbounds?: number;
-};
-
-export type NodesFilterType = FilterType & {
- name?: string;
- address?: string;
- port?: number;
- xray_version?: number;
- status?: 'healthy' | 'disabled' | 'healthy';
-}
-
-export type HostsFilterType = FilterType & {
- name?: string;
- address?: string;
- port?: number;
- security?: number;
-}
-
-export type InboundsFilterType = FilterType & {
- tag?: string;
-}
diff --git a/app/dashboard/src/types/inbounds.ts b/app/dashboard/src/types/inbounds.ts
deleted file mode 100644
index 349729c..0000000
--- a/app/dashboard/src/types/inbounds.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ProtocolType } from './protocol';
-import { NodeType } from 'stores';
-
-export type InboundType = {
- id: number;
- tag: string;
- protocol: ProtocolType;
- network: string;
- node: NodeType;
- tls: string;
- port?: number;
-};
-
-export type Inbounds = InboundType[];
diff --git a/app/dashboard/src/types/index.ts b/app/dashboard/src/types/index.ts
deleted file mode 100644
index 0a04667..0000000
--- a/app/dashboard/src/types/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export * from './inbounds';
-export * from './user';
-export * from './service';
-export * from './page';
-export * from './protocol';
-export * from './filter';
-export * from './proxy-hosts';
-export * from './chakra-icon';
diff --git a/app/dashboard/src/types/page.ts b/app/dashboard/src/types/page.ts
deleted file mode 100644
index 6559857..0000000
--- a/app/dashboard/src/types/page.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ChakraIcon } from 'types'
-
-export type PageType = {
- path: string;
- name: string;
- itemIcon: ChakraIcon;
-}
-
-export interface Pages {
- home: PageType;
- users: PageType;
- services: PageType;
- nodes: PageType;
- hosts: PageType;
-}
diff --git a/app/dashboard/src/types/protocol.ts b/app/dashboard/src/types/protocol.ts
deleted file mode 100644
index d01bfe8..0000000
--- a/app/dashboard/src/types/protocol.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-
-export type ProtocolType = 'vmess' | 'vless' | 'trojan' | 'shadowsocks';
-
diff --git a/app/dashboard/src/types/proxy-hosts.ts b/app/dashboard/src/types/proxy-hosts.ts
deleted file mode 100644
index 513aca3..0000000
--- a/app/dashboard/src/types/proxy-hosts.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type ProxyHostSecurity = 'inbound_default' | 'none' | 'tls'
diff --git a/app/dashboard/src/types/service.ts b/app/dashboard/src/types/service.ts
deleted file mode 100644
index 4331754..0000000
--- a/app/dashboard/src/types/service.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-
-export type Service = {
- id: number;
- name: string;
- users: number[];
- inbounds: number[];
-}
-
-export type ServiceCreate = {
- id: number | undefined;
- name: string;
- inbounds: number[];
-}
diff --git a/app/dashboard/src/types/user.ts b/app/dashboard/src/types/user.ts
deleted file mode 100644
index a31a45e..0000000
--- a/app/dashboard/src/types/user.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-export type Status =
- | 'active'
- | 'disabled'
- | 'limited'
- | 'expired'
- | 'on_hold'
- | 'error'
- | 'connecting'
- | 'healthy'
- | 'unhealthy'
- | 'connected';
-export type ProxyKeys = ('vmess' | 'vless' | 'trojan' | 'shadowsocks')[];
-export type ProxyType = {
- vmess?: {
- id?: string;
- };
- vless?: {
- id?: string;
- flow?: string;
- };
- trojan?: {
- password?: string;
- };
- shadowsocks?: {
- password?: string;
- method?: string;
- };
-};
-
-export type DataLimitResetStrategy =
- | 'no_reset'
- | 'day'
- | 'week'
- | 'month'
- | 'year';
-
-type serviceId = number;
-
-export type User = {
- expire: number | null;
- data_limit: number | null;
- data_limit_reset_strategy: DataLimitResetStrategy;
- lifetime_used_traffic: number;
- username: string;
- used_traffic: number;
- status: Status;
- links: string[];
- subscription_url: string;
- services: serviceId[];
- note: string;
- online_at: string;
-};
-
-export type UserCreate = Pick<
-
- User,
- | 'services'
- | 'expire'
- | 'data_limit'
- | 'data_limit_reset_strategy'
- | 'username'
- | 'status'
- | 'note'
->;
diff --git a/app/dashboard/src/utils/color.ts b/app/dashboard/src/utils/color.ts
deleted file mode 100644
index 82c028a..0000000
--- a/app/dashboard/src/utils/color.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-export function generateDistinctColors(numColors: number) {
- const hueStep = 360 / numColors;
- const saturation = 90;
- const lightness = 47;
- const colors = [];
-
- for (let i = 0; i < numColors; i++) {
- const hue = ((i * hueStep) % 360) + 140;
- const color = hslToHex(hue, saturation, lightness);
- colors.push(color);
- }
-
- return colors;
-}
-
-function hslToHex(h: number, s: number, l: number) {
- h /= 360;
- s /= 100;
- l /= 100;
-
- let r, g, b;
-
- if (s === 0) {
- r = g = b = l;
- } else {
- const hueToRgb = (p: number, q: number, t: number) => {
- if (t < 0) t += 1;
- if (t > 1) t -= 1;
- if (t < 1 / 6) return p + (q - p) * 6 * t;
- if (t < 1 / 2) return q;
- if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
- return p;
- };
-
- const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
- const p = 2 * l - q;
-
- r = Math.round(hueToRgb(p, q, h + 1 / 3) * 255);
- g = Math.round(hueToRgb(p, q, h) * 255);
- b = Math.round(hueToRgb(p, q, h - 1 / 3) * 255);
- }
-
- const toHex = (c: number) => {
- const hex = c.toString(16);
- return hex.length === 1 ? '0' + hex : hex;
- };
-
- return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
diff --git a/app/dashboard/src/utils/dateFormatter.ts b/app/dashboard/src/utils/dateFormatter.ts
deleted file mode 100644
index 8fd284a..0000000
--- a/app/dashboard/src/utils/dateFormatter.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import dayjs from 'dayjs';
-
-export const relativeExpiryDate = (expiryDate: number | null | undefined) => {
- let dateInfo = { status: '', time: '' };
- if (expiryDate) {
- if (
- dayjs(expiryDate * 1000)
- .utc()
- .isAfter(dayjs().utc())
- ) {
- dateInfo.status = 'expires';
- } else {
- dateInfo.status = 'expired';
- }
- const durationSlots: string[] = [];
- const duration = dayjs.duration(
- dayjs(expiryDate * 1000)
- .utc()
- .diff(dayjs())
- );
- if (duration.years() != 0) {
- durationSlots.push(
- Math.abs(duration.years()) +
- ' year' +
- (Math.abs(duration.years()) != 1 ? 's' : '')
- );
- }
- if (duration.months() != 0) {
- durationSlots.push(
- Math.abs(duration.months()) +
- ' month' +
- (Math.abs(duration.months()) != 1 ? 's' : '')
- );
- }
- if (duration.days() != 0) {
- durationSlots.push(
- Math.abs(duration.days()) +
- ' day' +
- (Math.abs(duration.days()) != 1 ? 's' : '')
- );
- }
- if (durationSlots.length === 0) {
- if (duration.hours() != 0) {
- durationSlots.push(
- Math.abs(duration.hours()) +
- ' hour' +
- (Math.abs(duration.hours()) != 1 ? 's' : '')
- );
- }
- if (duration.minutes() != 0) {
- durationSlots.push(
- Math.abs(duration.minutes()) +
- ' min' +
- (Math.abs(duration.minutes()) != 1 ? 's' : '')
- );
- }
- }
- dateInfo.time = durationSlots.join(', ');
- }
- return dateInfo;
-};
diff --git a/app/dashboard/src/utils/formatByte.tsx b/app/dashboard/src/utils/formatByte.tsx
deleted file mode 100644
index c377830..0000000
--- a/app/dashboard/src/utils/formatByte.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-export function formatBytes(bytes: number, decimals = 2, asArray = false) {
- if (!+bytes) return '0 B';
-
- const k = 1024;
- const dm = decimals < 0 ? 0 : decimals;
- const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
- const i = Math.floor(Math.log(bytes) / Math.log(k));
- if (!asArray)
- return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
- else return [parseFloat((bytes / Math.pow(k, i)).toFixed(dm)), sizes[i]];
-}
-
-export const numberWithCommas = (x: number) => {
- if (x !== null) return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-};
diff --git a/app/dashboard/src/utils/themeColor.ts b/app/dashboard/src/utils/themeColor.ts
deleted file mode 100644
index e010b0d..0000000
--- a/app/dashboard/src/utils/themeColor.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ColorMode } from '@chakra-ui/react';
-
-export const updateThemeColor = (colorMode: ColorMode) => {
- const el = document.querySelector('meta[name="theme-color"]');
- el?.setAttribute('content', colorMode == 'dark' ? '#1A202C' : '#3B81F6');
-};
diff --git a/app/dashboard/src/utils/toastHandler.ts b/app/dashboard/src/utils/toastHandler.ts
deleted file mode 100644
index 00a896f..0000000
--- a/app/dashboard/src/utils/toastHandler.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { CreateToastFnReturn } from '@chakra-ui/react';
-import { UseFormReturn } from 'react-hook-form';
-
-export const generateErrorMessage = (
- e: any,
- toast: CreateToastFnReturn,
- form?: UseFormReturn
-) => {
- if (e.response && e.response._data) {
- if (typeof e.response._data.detail === 'string')
- return toast({
- title: e.response._data.detail,
- status: 'error',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- if (typeof e.response._data.detail === 'object')
- if (form) {
- Object.keys(e.response._data.detail).forEach((errorKey) =>
- form.setError(errorKey, {
- message: e.response._data.detail[errorKey],
- })
- );
- return;
- }
- }
- return toast({
- title: 'Something went wrong!',
- status: 'error',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
-};
-
-export const generateSuccessMessage = (
- message: string,
- toast: CreateToastFnReturn
-) => {
- return toast({
- title: message,
- status: 'success',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
-};
diff --git a/app/dashboard/src/utils/userPreferenceStorage.ts b/app/dashboard/src/utils/userPreferenceStorage.ts
deleted file mode 100644
index 9547945..0000000
--- a/app/dashboard/src/utils/userPreferenceStorage.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-
-
-export class PageSizeManager {
- private localStorageKey: string;
- private defaultPageSize: number;
-
- constructor(localStorageKey: string, defaultPageSize: number) {
- this.localStorageKey = `marzneshin-num-${localStorageKey}-per-page`;
- this.defaultPageSize = defaultPageSize;
- }
-
- private getStoredPageSize(): string | null {
- return localStorage.getItem(this.localStorageKey);
- }
-
- getPageSize(): number {
- const storedPageSize = this.getStoredPageSize();
- const parsedPageSize = parseInt(storedPageSize || '', 10);
- return isNaN(parsedPageSize) ? this.defaultPageSize : parsedPageSize;
- }
-
- setPageSize(value: string): void {
- localStorage.setItem(this.localStorageKey, value);
- }
-}
-
-export const pageSizeManagers = {
- users: new PageSizeManager('users', 10),
- inbounds: new PageSizeManager('inbounds', 10),
- nodes: new PageSizeManager('nodes', 10),
- hosts: new PageSizeManager('hosts', 10),
- services: new PageSizeManager('services', 10),
-}
diff --git a/app/dashboard/src/vite-env.d.ts b/app/dashboard/src/vite-env.d.ts
deleted file mode 100644
index b1f45c7..0000000
--- a/app/dashboard/src/vite-env.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-///
-///
diff --git a/app/dashboard/tsconfig.json b/app/dashboard/tsconfig.json
deleted file mode 100644
index 86213d4..0000000
--- a/app/dashboard/tsconfig.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
- "compilerOptions": {
- "target": "ESNext",
- "useDefineForClassFields": true,
- "lib": [
- "DOM",
- "DOM.Iterable",
- "ESNext"
- ],
- "allowJs": false,
- "skipLibCheck": true,
- "esModuleInterop": false,
- "allowSyntheticDefaultImports": true,
- "strict": true,
- "forceConsistentCasingInFileNames": true,
- "module": "ESNext",
- "moduleResolution": "Node",
- "resolveJsonModule": true,
- "isolatedModules": true,
- "noEmit": true,
- "jsx": "react-jsx",
- "baseUrl": "./src"
- },
- "include": [
- "src"
- ],
- "references": [
- {
- "path": "./tsconfig.node.json"
- }
- ]
-}
diff --git a/app/dashboard/tsconfig.node.json b/app/dashboard/tsconfig.node.json
deleted file mode 100644
index 9d31e2a..0000000
--- a/app/dashboard/tsconfig.node.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "compilerOptions": {
- "composite": true,
- "module": "ESNext",
- "moduleResolution": "Node",
- "allowSyntheticDefaultImports": true
- },
- "include": ["vite.config.ts"]
-}
diff --git a/app/dashboard/vite.config.ts b/app/dashboard/vite.config.ts
deleted file mode 100644
index d59af4c..0000000
--- a/app/dashboard/vite.config.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import react from '@vitejs/plugin-react';
-import { defineConfig, splitVendorChunkPlugin } from 'vite';
-import svgr from 'vite-plugin-svgr';
-import { visualizer } from 'rollup-plugin-visualizer';
-import tsconfigPaths from 'vite-tsconfig-paths';
-
-// https://vitejs.dev/config/
-export default defineConfig({
- build: {
- chunkSizeWarningLimit: 100,
- rollupOptions: {
- onwarn(warning, warn) {
- if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
- return
- }
- warn(warning)
- }
- }
- },
- plugins: [
- tsconfigPaths(),
- react({
- include: '**/*.tsx',
- }),
- svgr(),
- visualizer(),
- splitVendorChunkPlugin(),
- ],
-});
diff --git a/makefile b/makefile
index 7e31509..05baf39 100644
--- a/makefile
+++ b/makefile
@@ -3,26 +3,25 @@ start:
alembic upgrade head
python main.py
-install-deps:
- npm install --prefix './app/dashboard'
+dashboard-deps:
+ pnpm install --prefix ./dashboard
-dashboard-build: install-deps
- VITE_BASE_API=/api/ npm run build --prefix './app/dashboard' --if-present -- --outDir dist --base '/dashboard/'
- cp ./app/dashboard/dist/index.html ./app/dashboard/dist/404.html
+dashboard-build:
+ cd dashboard; VITE_BASE_API=/api/ npm run build --if-present -- --outDir dist --base '/dashboard/'
dashboard-dev:
VITE_BASE_API=http://0.0.0.0:8000/api/ npm run dev \
- --prefix './app/dashboard/' \
+ --prefix './dashboard/' \
-- --host 0.0.0.0 \
--base /dashboard/ \
--clearScreen false
dashboard-preview:
VITE_BASE_API=http://0.0.0.0:8000/api/ npm run preview \
- --prefix './app/dashboard/' \
+ --prefix './dashboard/' \
-- --host 0.0.0.0 \
--base /dashboard/ \
--clearScreen false
dashboard-cleanup:
- rm -rf app/dashboard/node_modules/
+ rm -rf ./dashboard/node_modules/