Converted to Vite since create-react-app is no longer being developed

frontend/src/App.test.tsx

@@ -1,11 +0,0 @@
-import * as React from "react";
-
-import * as ReactDOM from "react-dom";
-
-import App from "./App";
-
-it("renders without crashing", () => {
-	const div = document.createElement("div");
-	ReactDOM.render(<App />, div);
-	ReactDOM.unmountComponentAtNode(div);
-});

frontend/src/App.tsx

@@ -1,9 +1,10 @@
 import { ChakraProvider } from "@chakra-ui/react";
-import { AuthProvider, LocaleProvider } from "context";
-import { intl } from "locale";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { RawIntlProvider } from "react-intl";
-import { QueryClient, QueryClientProvider } from "react-query";
-import { ReactQueryDevtools } from "react-query/devtools";
+
+import { AuthProvider, LocaleProvider } from "src/context";
+import { intl } from "src/locale";
 
 import Router from "./Router";
 import lightTheme from "./theme/customTheme";
@@ -21,7 +22,7 @@ function App() {
 							<Router />
 						</AuthProvider>
 					</ChakraProvider>
-					<ReactQueryDevtools />
+					<ReactQueryDevtools position="bottom-right" panelPosition="right" />
 				</QueryClientProvider>
 			</LocaleProvider>
 		</RawIntlProvider>

frontend/src/Router.tsx

@@ -1,25 +1,26 @@
 import { lazy, Suspense } from "react";
 
-import { SiteWrapper, SpinnerPage, Unhealthy } from "components";
-import { useAuthState, useLocaleState } from "context";
-import { useHealth } from "hooks";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 
-const AccessLists = lazy(() => import("pages/AccessLists"));
-const AuditLog = lazy(() => import("pages/AuditLog"));
-const Certificates = lazy(() => import("pages/Certificates"));
+import { SiteWrapper, SpinnerPage, Unhealthy } from "src/components";
+import { useAuthState, useLocaleState } from "src/context";
+import { useHealth } from "src/hooks";
+
+const AccessLists = lazy(() => import("src/pages/AccessLists"));
+const AuditLog = lazy(() => import("src/pages/AuditLog"));
+const Certificates = lazy(() => import("src/pages/Certificates"));
 const CertificateAuthorities = lazy(
-	() => import("pages/CertificateAuthorities"),
+	() => import("src/pages/CertificateAuthorities"),
 );
-const Dashboard = lazy(() => import("pages/Dashboard"));
-const DNSProviders = lazy(() => import("pages/DNSProviders"));
-const Hosts = lazy(() => import("pages/Hosts"));
-const NginxTemplates = lazy(() => import("pages/NginxTemplates"));
-const Login = lazy(() => import("pages/Login"));
-const GeneralSettings = lazy(() => import("pages/Settings"));
-const Setup = lazy(() => import("pages/Setup"));
-const Upstreams = lazy(() => import("pages/Upstreams"));
-const Users = lazy(() => import("pages/Users"));
+const Dashboard = lazy(() => import("src/pages/Dashboard"));
+const DNSProviders = lazy(() => import("src/pages/DNSProviders"));
+const Hosts = lazy(() => import("src/pages/Hosts"));
+const NginxTemplates = lazy(() => import("src/pages/NginxTemplates"));
+const Login = lazy(() => import("src/pages/Login"));
+const GeneralSettings = lazy(() => import("src/pages/Settings"));
+const Setup = lazy(() => import("src/pages/Setup"));
+const Upstreams = lazy(() => import("src/pages/Upstreams"));
+const Users = lazy(() => import("src/pages/Users"));
 
 function Router() {
 	const health = useHealth();

frontend/src/api/npm/base.ts

@@ -1,7 +1,8 @@
 import { camelizeKeys, decamelizeKeys } from "humps";
-import AuthStore from "modules/AuthStore";
 import queryString from "query-string";
 
+import AuthStore from "src/modules/AuthStore";
+
 const contentTypeHeader = "Content-Type";
 
 interface BuildUrlArgs {

frontend/src/api/npm/createDNSProvider.ts

@@ -9,7 +9,7 @@ export async function createDNSProvider(
 ): Promise<DNSProvider> {
 	// Because the meta property of the data should not be decamelized,
 	// we're going to decamelize the rest here instead of in base.ts
-	let dcData: any = decamelizeKeys(data);
+	const dcData: any = decamelizeKeys(data);
 	if (typeof data.meta !== "undefined") {
 		dcData.meta = data.meta;
 	}

frontend/src/api/npm/setDNSProvider.ts

@@ -13,7 +13,7 @@ export async function setDNSProvider(
 
 	// Because the meta property of the data should not be decamelized,
 	// we're going to decamelize the rest here instead of in base.ts
-	let dcData: any = decamelizeKeys(data);
+	const dcData: any = decamelizeKeys(data);
 	if (typeof data.meta !== "undefined") {
 		dcData.meta = data.meta;
 	}

frontend/src/components/Footer.tsx

@@ -7,7 +7,8 @@ import {
 	Tooltip,
 	useColorModeValue,
 } from "@chakra-ui/react";
-import { intl } from "locale";
+
+import { intl } from "src/locale";
 
 function Footer() {
 	return (
@@ -47,12 +48,12 @@ function Footer() {
 						rel="noopener noreferrer">
 						{intl.formatMessage({ id: "footer.github" })}
 					</Link>
-					<Tooltip label={process.env.REACT_APP_COMMIT}>
+					<Tooltip label={import.meta.env.VITE_APP_COMMIT}>
 						<Link
 							href="https://github.com/NginxProxyManager/nginx-proxy-manager/releases?utm_source=npm"
 							isExternal
 							rel="noopener noreferrer">
-							v{process.env.REACT_APP_VERSION}
+							v{import.meta.env.VITE_APP_VERSION}
 						</Link>
 					</Tooltip>
 				</Stack>

frontend/src/components/HelpDrawer/HelpDrawer.tsx

@@ -8,11 +8,11 @@ import {
 	DrawerBody,
 	useDisclosure,
 } from "@chakra-ui/react";
-import { getLocale } from "locale";
 import { FiHelpCircle } from "react-icons/fi";
 import ReactMarkdown from "react-markdown";
 
-import { getHelpFile } from "../../locale/src/HelpDoc";
+import { getLocale } from "src/locale";
+import { getHelpFile } from "src/locale/src/HelpDoc";
 
 interface HelpDrawerProps {
 	/**

frontend/src/components/Loading.tsx

@@ -1,5 +1,6 @@
 import { Box } from "@chakra-ui/react";
-import { Loader } from "components";
+
+import { Loader } from "src/components";
 
 function Loading() {
 	return (

frontend/src/components/LocalePicker.tsx

@@ -7,14 +7,15 @@ import {
 	MenuList,
 	MenuItem,
 } from "@chakra-ui/react";
-import { Flag } from "components";
-import { useLocaleState } from "context";
+
+import { Flag } from "src/components";
+import { useLocaleState } from "src/context";
 import {
 	changeLocale,
 	getFlagCodeForLocale,
 	intl,
 	localeOptions,
-} from "locale";
+} from "src/locale";
 
 interface LocalPickerProps {
 	onChange?: any;

frontend/src/components/Navigation/Navigation.tsx

@@ -1,5 +1,6 @@
 import { useDisclosure } from "@chakra-ui/react";
-import { NavigationHeader, NavigationMenu } from "components";
+
+import { NavigationHeader, NavigationMenu } from "src/components";
 
 function Navigation() {
 	const {

frontend/src/components/Navigation/NavigationHeader.tsx

@@ -17,13 +17,14 @@ import {
 	useColorModeValue,
 	useDisclosure,
 } from "@chakra-ui/react";
-import { LocalePicker, ThemeSwitcher } from "components";
-import { useAuthState } from "context";
-import { useUser } from "hooks";
-import { intl } from "locale";
-import { ChangePasswordModal, ProfileModal } from "modals";
 import { FiLock, FiLogOut, FiMenu, FiUser, FiX } from "react-icons/fi";
 
+import { LocalePicker, ThemeSwitcher } from "src/components";
+import { useAuthState } from "src/context";
+import { useUser } from "src/hooks";
+import { intl } from "src/locale";
+import { ChangePasswordModal, ProfileModal } from "src/modals";
+
 interface NavigationHeaderProps {
 	mobileNavIsOpen: boolean;
 	toggleMobileNav: () => void;

frontend/src/components/Navigation/NavigationMenu.tsx

@@ -19,7 +19,6 @@ import {
 	Container,
 	useBreakpointValue,
 } from "@chakra-ui/react";
-import { intl } from "locale";
 import {
 	FiHome,
 	FiSettings,
@@ -32,6 +31,8 @@ import {
 } from "react-icons/fi";
 import { Link as RouterLink, useLocation } from "react-router-dom";
 
+import { intl } from "src/locale";
+
 interface NavItem {
 	/** Displayed label */
 	label: string;

frontend/src/components/Permissions/AdminPermissionSelector.tsx

@@ -1,7 +1,8 @@
 import { MouseEventHandler } from "react";
 
 import { Heading, Stack, Text, useColorModeValue } from "@chakra-ui/react";
-import { intl } from "locale";
+
+import { intl } from "src/locale";
 
 interface AdminPermissionSelectorProps {
 	selected?: boolean;

frontend/src/components/Permissions/PermissionSelector.tsx

@@ -8,7 +8,8 @@ import {
 	Text,
 	useColorModeValue,
 } from "@chakra-ui/react";
-import { intl } from "locale";
+
+import { intl } from "src/locale";
 
 interface PermissionSelectorProps {
 	capabilities: string[];

frontend/src/components/SiteWrapper.tsx

@@ -1,11 +1,12 @@
 import { useEffect, ReactNode } from "react";
 
 import { Box, Container, useToast } from "@chakra-ui/react";
-import { getSSEToken, SSEMessage } from "api/npm";
-import { Footer, Navigation } from "components";
-import { intl } from "locale";
-import AuthStore from "modules/AuthStore";
-import { useQueryClient } from "react-query";
+import { useQueryClient } from "@tanstack/react-query";
+
+import { getSSEToken, SSEMessage } from "src/api/npm";
+import { Footer, Navigation } from "src/components";
+import { intl } from "src/locale";
+import AuthStore from "src/modules/AuthStore";
 
 interface Props {
 	children?: ReactNode;
@@ -26,7 +27,7 @@ function SiteWrapper({ children }: Props) {
 				const j: SSEMessage = JSON.parse(e.data);
 				if (j) {
 					if (j.affects) {
-						queryClient.invalidateQueries(j.affects);
+						queryClient.invalidateQueries([j.affects]);
 					}
 					if (j.type) {
 						toast({

frontend/src/components/Table/Formatters.tsx

@@ -9,9 +9,10 @@ import {
 	PopoverArrow,
 	PopoverBody,
 } from "@chakra-ui/react";
-import { Monospace, RowAction, RowActionsMenu } from "components";
-import { intl } from "locale";
-import getNiceDNSProvider from "modules/Acmesh";
+
+import { Monospace, RowAction, RowActionsMenu } from "src/components";
+import { intl } from "src/locale";
+import getNiceDNSProvider from "src/modules/Acmesh";
 
 const errorColor = "red.400";
 

frontend/src/components/Table/TableLayout.tsx

@@ -17,8 +17,6 @@ import {
 	Tr,
 	VStack,
 } from "@chakra-ui/react";
-import { TablePagination } from "components";
-import { intl } from "locale";
 import {
 	FiChevronsLeft,
 	FiChevronLeft,
@@ -29,6 +27,9 @@ import {
 	FiX,
 } from "react-icons/fi";
 
+import { TablePagination } from "src/components";
+import { intl } from "src/locale";
+
 export interface TableLayoutProps {
 	pagination: TablePagination;
 	getTableProps: any;
@@ -102,10 +103,11 @@ function TableLayout({
 		<>
 			<Table size="sm" {...getTableProps()}>
 				<Thead>
-					{headerGroups.map((headerGroup: any) => (
-						<Tr {...headerGroup.getHeaderGroupProps()}>
-							{headerGroup.headers.map((column: any) => (
+					{headerGroups.map((headerGroup: any, idx: any) => (
+						<Tr key={idx} {...headerGroup.getHeaderGroupProps()}>
+							{headerGroup.headers.map((column: any, idx2: any) => (
 								<Th
+									key={idx2}
 									userSelect="none"
 									className={column.className}
 									isNumeric={column.isNumeric}>
@@ -134,12 +136,13 @@ function TableLayout({
 				</Thead>
 				<Tbody {...getTableBodyProps()}>
 					{rows.length
-						? rows.map((row: any) => {
+						? rows.map((row: any, idx: any) => {
 								prepareRow(row);
 								return (
-									<Tr {...row.getRowProps()}>
-										{row.cells.map((cell: any) => (
+									<Tr key={idx} {...row.getRowProps()}>
+										{row.cells.map((cell: any, idx2: any) => (
 											<Td
+												key={idx2}
 												{...cell.getCellProps([
 													{
 														className: cell.column.className,

frontend/src/components/Table/TextFilter.tsx

@@ -13,13 +13,14 @@ import {
 	useDisclosure,
 	Select,
 } from "@chakra-ui/react";
-import { PrettyButton } from "components";
 import { Formik, Form, Field } from "formik";
-import { intl } from "locale";
-import { validateString } from "modules/Validations";
 import FocusLock from "react-focus-lock";
 import { FiFilter } from "react-icons/fi";
 
+import { PrettyButton } from "src/components";
+import { intl } from "src/locale";
+import { validateString } from "src/modules/Validations";
+
 function TextFilter({ column: { filterValue, setFilter } }: any) {
 	const { onOpen, onClose, isOpen } = useDisclosure();
 

frontend/src/components/ThemeSwitcher.tsx

@@ -4,9 +4,10 @@ import {
 	IconButtonProps,
 	useColorMode,
 } from "@chakra-ui/react";
-import { intl } from "locale";
 import { FiSun, FiMoon } from "react-icons/fi";
 
+import { intl } from "src/locale";
+
 interface ThemeSwitcherProps {
 	background?: "normal" | "transparent";
 }

frontend/src/components/Unhealthy.tsx

@@ -1,8 +1,9 @@
 import { Box, Flex, Heading, Text, Stack } from "@chakra-ui/react";
-import { LocalePicker, ThemeSwitcher } from "components";
-import { intl } from "locale";
 import { FaTimes } from "react-icons/fa";
 
+import { LocalePicker, ThemeSwitcher } from "src/components";
+import { intl } from "src/locale";
+
 function Unhealthy() {
 	return (
 		<>

frontend/src/context/AuthContext.tsx

@@ -1,10 +1,11 @@
 import { ReactNode, createContext, useContext, useState } from "react";
 
-import { getToken, refreshToken, TokenResponse } from "api/npm";
-import AuthStore from "modules/AuthStore";
-import { useQueryClient } from "react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import { useIntervalWhen } from "rooks";
 
+import { getToken, refreshToken, TokenResponse } from "src/api/npm";
+import AuthStore from "src/modules/AuthStore";
+
 // Context
 export interface AuthContextType {
 	authenticated: boolean;
@@ -44,7 +45,7 @@ function AuthProvider({
 	const logout = () => {
 		AuthStore.clear();
 		setAuthenticated(false);
-		queryClient.invalidateQueries("user");
+		queryClient.clear();
 	};
 
 	const refresh = async () => {

frontend/src/context/LocaleContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, ReactNode, useContext, useState } from "react";
 
-import { getLocale } from "locale";
+import { getLocale } from "src/locale";
 
 // Context
 export interface LocaleContextType {

frontend/src/hooks/useAccessLists.ts

@@ -1,10 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
 import {
 	getAccessLists,
 	AccessListsResponse,
 	tableSortToAPI,
 	tableFiltersToAPI,
-} from "api/npm";
-import { useQuery } from "react-query";
+} from "src/api/npm";
 
 const fetchAccessLists = (
 	offset = 0,
@@ -27,15 +28,13 @@ const useAccessLists = (
 	filters?: any,
 	options = {},
 ) => {
-	return useQuery<AccessListsResponse, Error>(
-		["access-lists", { offset, limit, sortBy, filters }],
-		() => fetchAccessLists(offset, limit, sortBy, filters),
-		{
-			keepPreviousData: true,
-			staleTime: 15 * 1000, // 15 seconds
-			...options,
-		},
-	);
+	return useQuery<AccessListsResponse, Error>({
+		queryKey: ["access-lists", { offset, limit, sortBy, filters }],
+		queryFn: () => fetchAccessLists(offset, limit, sortBy, filters),
+		keepPreviousData: true,
+		staleTime: 15 * 1000, // 15 seconds
+		...options,
+	});
 };
 
 export { useAccessLists };

frontend/src/hooks/useCertificate.ts

@@ -1,24 +1,23 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
 import {
 	createCertificate,
 	getCertificate,
 	setCertificate,
 	Certificate,
-} from "api/npm";
-import { useMutation, useQuery, useQueryClient } from "react-query";
+} from "src/api/npm";
 
 const fetchCertificate = (id: any) => {
 	return getCertificate(id);
 };
 
 const useCertificate = (id: number, options = {}) => {
-	return useQuery<Certificate, Error>(
-		["certificate", id],
-		() => fetchCertificate(id),
-		{
-			staleTime: 60 * 1000, // 1 minute
-			...options,
-		},
-	);
+	return useQuery<Certificate, Error>({
+		queryKey: ["certificate", id],
+		queryFn: () => fetchCertificate(id),
+		staleTime: 60 * 1000, // 1 minute
+		...options,
+	});
 };
 
 const useSetCertificate = () => {
@@ -44,10 +43,10 @@ const useSetCertificate = () => {
 				return () =>
 					queryClient.setQueryData(["certificate", values.id], previousObject);
 			},
-			onError: (error, values, rollback: any) => rollback(),
+			onError: (_, __, rollback: any) => rollback(),
 			onSuccess: async ({ id }: Certificate) => {
 				queryClient.invalidateQueries(["certificate", id]);
-				queryClient.invalidateQueries("certificates");
+				queryClient.invalidateQueries(["certificates"]);
 			},
 		},
 	);

frontend/src/hooks/useCertificateAuthorities.ts

@@ -1,10 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
 import {
 	CertificateAuthoritiesResponse,
 	getCertificateAuthorities,
 	tableSortToAPI,
 	tableFiltersToAPI,
-} from "api/npm";
-import { useQuery } from "react-query";
+} from "src/api/npm";
 
 const fetchCertificateAuthorities = (
 	offset = 0,
@@ -27,15 +28,13 @@ const useCertificateAuthorities = (
 	filters?: any,
 	options = {},
 ) => {
-	return useQuery<CertificateAuthoritiesResponse, Error>(
-		["certificate-authorities", { offset, limit, sortBy, filters }],
-		() => fetchCertificateAuthorities(offset, limit, sortBy, filters),
-		{
-			keepPreviousData: true,
-			staleTime: 15 * 1000, // 15 seconds
-			...options,
-		},
-	);
+	return useQuery<CertificateAuthoritiesResponse, Error>({
+		queryKey: ["certificate-authorities", { offset, limit, sortBy, filters }],
+		queryFn: () => fetchCertificateAuthorities(offset, limit, sortBy, filters),
+		keepPreviousData: true,
+		staleTime: 15 * 1000, // 15 seconds
+		...options,
+	});
 };
 
 export { fetchCertificateAuthorities, useCertificateAuthorities };

frontend/src/hooks/useCertificateAuthority.ts

@@ -1,24 +1,23 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
 import {
 	createCertificateAuthority,
 	getCertificateAuthority,
 	setCertificateAuthority,
 	CertificateAuthority,
-} from "api/npm";
-import { useMutation, useQuery, useQueryClient } from "react-query";
+} from "src/api/npm";
 
 const fetchCertificateAuthority = (id: any) => {
 	return getCertificateAuthority(id);
 };
 
 const useCertificateAuthority = (id: number, options = {}) => {
-	return useQuery<CertificateAuthority, Error>(
-		["certificate-authority", id],
-		() => fetchCertificateAuthority(id),
-		{
-			staleTime: 60 * 1000, // 1 minute
-			...options,
-		},
-	);
+	return useQuery<CertificateAuthority, Error>({
+		queryKey: ["certificate-authority", id],
+		queryFn: () => fetchCertificateAuthority(id),
+		staleTime: 60 * 1000, // 1 minute
+		...options,
+	});
 };
 
 const useSetCertificateAuthority = () => {
@@ -50,10 +49,10 @@ const useSetCertificateAuthority = () => {
 						previousObject,
 					);
 			},
-			onError: (error, values, rollback: any) => rollback(),
+			onError: (_, __, rollback: any) => rollback(),
 			onSuccess: async ({ id }: CertificateAuthority) => {
 				queryClient.invalidateQueries(["certificate-authority", id]);
-				queryClient.invalidateQueries("certificate-authorities");
+				queryClient.invalidateQueries(["certificate-authorities"]);
 			},
 		},
 	);

frontend/src/hooks/useCertificates.ts

@@ -1,10 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
 import {
 	getCertificates,
 	CertificatesResponse,
 	tableSortToAPI,
 	tableFiltersToAPI,
-} from "api/npm";
-import { useQuery } from "react-query";
+} from "src/api/npm";
 
 const fetchCertificates = (
 	offset = 0,
@@ -27,15 +28,13 @@ const useCertificates = (
 	filters?: any,
 	options = {},
 ) => {
-	return useQuery<CertificatesResponse, Error>(
-		["certificates", { offset, limit, sortBy, filters }],
-		() => fetchCertificates(offset, limit, sortBy, filters),
-		{
-			keepPreviousData: true,
-			staleTime: 15 * 1000, // 15 seconds
-			...options,
-		},
-	);
+	return useQuery<CertificatesResponse, Error>({
+		queryKey: ["certificates", { offset, limit, sortBy, filters }],
+		queryFn: () => fetchCertificates(offset, limit, sortBy, filters),
+		keepPreviousData: true,
+		staleTime: 15 * 1000, // 15 seconds
+		...options,
+	});
 };
 
 export { fetchCertificates, useCertificates };

frontend/src/hooks/useDNSProvider.ts

@@ -1,24 +1,23 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
 import {
 	createDNSProvider,
 	getDNSProvider,
 	setDNSProvider,
 	DNSProvider,
-} from "api/npm";
-import { useMutation, useQuery, useQueryClient } from "react-query";
+} from "src/api/npm";
 
 const fetchDNSProvider = (id: any) => {
 	return getDNSProvider(id);
 };
 
 const useDNSProvider = (id: number, options = {}) => {
-	return useQuery<DNSProvider, Error>(
-		["dns-provider", id],
-		() => fetchDNSProvider(id),
-		{
-			staleTime: 60 * 1000, // 1 minute
-			...options,
-		},
-	);
+	return useQuery<DNSProvider, Error>({
+		queryKey: ["dns-provider", id],
+		queryFn: () => fetchDNSProvider(id),
+		staleTime: 60 * 1000, // 1 minute
+		...options,
+	});
 };
 
 const useSetDNSProvider = () => {
@@ -44,10 +43,10 @@ const useSetDNSProvider = () => {
 				return () =>
 					queryClient.setQueryData(["dns-provider", values.id], previousObject);
 			},
-			onError: (error, values, rollback: any) => rollback(),
+			onError: (_, __, rollback: any) => rollback(),
 			onSuccess: async ({ id }: DNSProvider) => {
 				queryClient.invalidateQueries(["dns-provider", id]);
-				queryClient.invalidateQueries("dns-providers");
+				queryClient.invalidateQueries(["dns-providers"]);
 			},
 		},
 	);

frontend/src/hooks/useDNSProviders.ts

@@ -1,10 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
 import {
 	getDNSProviders,
 	DNSProvidersResponse,
 	tableSortToAPI,
 	tableFiltersToAPI,
-} from "api/npm";
-import { useQuery } from "react-query";
+} from "src/api/npm";
 
 const fetchDNSProviders = (
 	offset = 0,
@@ -27,15 +28,13 @@ const useDNSProviders = (
 	filters?: any,
 	options = {},
 ) => {
-	return useQuery<DNSProvidersResponse, Error>(
-		["dns-providers", { offset, limit, sortBy, filters }],
-		() => fetchDNSProviders(offset, limit, sortBy, filters),
-		{
-			keepPreviousData: true,
-			staleTime: 15 * 1000, // 15 seconds
-			...options,
-		},
-	);
+	return useQuery<DNSProvidersResponse, Error>({
+		queryKey: ["dns-providers", { offset, limit, sortBy, filters }],
+		queryFn: () => fetchDNSProviders(offset, limit, sortBy, filters),
+		keepPreviousData: true,
+		staleTime: 15 * 1000, // 15 seconds
+		...options,
+	});
 };
 
 export { useDNSProviders };

frontend/src/hooks/useDNSProvidersAcmesh.ts

@@ -1,16 +1,15 @@
-import { DNSProvidersAcmesh, getDNSProvidersAcmesh } from "api/npm";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
+
+import { DNSProvidersAcmesh, getDNSProvidersAcmesh } from "src/api/npm";
 
 const useDNSProvidersAcmesh = (options = {}) => {
-	return useQuery<DNSProvidersAcmesh[], Error>(
-		["dns-providers-acmesh"],
-		() => getDNSProvidersAcmesh(),
-		{
-			keepPreviousData: true,
-			staleTime: 60 * 60 * 1000, // 1 hour
-			...options,
-		},
-	);
+	return useQuery<DNSProvidersAcmesh[], Error>({
+		queryKey: ["dns-providers-acmesh"],
+		queryFn: () => getDNSProvidersAcmesh(),
+		keepPreviousData: true,
+		staleTime: 60 * 60 * 1000, // 1 hour
+		...options,
+	});
 };
 
 export { useDNSProvidersAcmesh };

frontend/src/hooks/useHealth.ts

@@ -1,10 +1,13 @@
-import { getHealth, HealthResponse } from "api/npm";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
+
+import { getHealth, HealthResponse } from "src/api/npm";
 
 const fetchHealth = () => getHealth();
 
 const useHealth = (options = {}) => {
-	return useQuery<HealthResponse, Error>("health", fetchHealth, {
+	return useQuery<HealthResponse, Error>({
+		queryKey: ["health"],
+		queryFn: fetchHealth,
 		refetchOnWindowFocus: false,
 		retry: 5,
 		refetchInterval: 15 * 1000, // 15 seconds

frontend/src/hooks/useHosts.ts

@@ -1,10 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
 import {
 	getHosts,
 	HostsResponse,
 	tableSortToAPI,
 	tableFiltersToAPI,
-} from "api/npm";
-import { useQuery } from "react-query";
+} from "src/api/npm";
 
 const fetchHosts = (offset = 0, limit = 10, sortBy?: any, filters?: any) => {
 	return getHosts(
@@ -22,15 +23,13 @@ const useHosts = (
 	filters?: any,
 	options = {},
 ) => {
-	return useQuery<HostsResponse, Error>(
-		["hosts", { offset, limit, sortBy, filters }],
-		() => fetchHosts(offset, limit, sortBy, filters),
-		{
-			keepPreviousData: true,
-			staleTime: 15 * 1000, // 15 seconds
-			...options,
-		},
-	);
+	return useQuery<HostsResponse, Error>({
+		queryKey: ["hosts", { offset, limit, sortBy, filters }],
+		queryFn: () => fetchHosts(offset, limit, sortBy, filters),
+		keepPreviousData: true,
+		staleTime: 15 * 1000, // 15 seconds
+		...options,
+	});
 };
 
 export { fetchHosts, useHosts };

frontend/src/hooks/useNginxTemplates.ts

@@ -1,10 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
 import {
 	getNginxTemplates,
 	NginxTemplatesResponse,
 	tableSortToAPI,
 	tableFiltersToAPI,
-} from "api/npm";
-import { useQuery } from "react-query";
+} from "src/api/npm";
 
 const fetchNginxTemplates = (
 	offset = 0,
@@ -27,15 +28,13 @@ const useNginxTemplates = (
 	filters?: any,
 	options = {},
 ) => {
-	return useQuery<NginxTemplatesResponse, Error>(
-		["nginx-templates", { offset, limit, sortBy, filters }],
-		() => fetchNginxTemplates(offset, limit, sortBy, filters),
-		{
-			keepPreviousData: true,
-			staleTime: 15 * 1000, // 15 seconds
-			...options,
-		},
-	);
+	return useQuery<NginxTemplatesResponse, Error>({
+		queryKey: ["nginx-templates", { offset, limit, sortBy, filters }],
+		queryFn: () => fetchNginxTemplates(offset, limit, sortBy, filters),
+		keepPreviousData: true,
+		staleTime: 15 * 1000, // 15 seconds
+		...options,
+	});
 };
 
 export { fetchNginxTemplates, useNginxTemplates };

frontend/src/hooks/useSettings.ts

@@ -1,10 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
 import {
 	getSettings,
 	SettingsResponse,
 	tableSortToAPI,
 	tableFiltersToAPI,
-} from "api/npm";
-import { useQuery } from "react-query";
+} from "src/api/npm";
 
 const fetchSettings = (offset = 0, limit = 10, sortBy?: any, filters?: any) => {
 	return getSettings(
@@ -22,15 +23,13 @@ const useSettings = (
 	filters?: any,
 	options = {},
 ) => {
-	return useQuery<SettingsResponse, Error>(
-		["settings", { offset, limit, sortBy, filters }],
-		() => fetchSettings(offset, limit, sortBy, filters),
-		{
-			keepPreviousData: true,
-			staleTime: 15 * 1000, // 15 seconds
-			...options,
-		},
-	);
+	return useQuery<SettingsResponse, Error>({
+		queryKey: ["settings", { offset, limit, sortBy, filters }],
+		queryFn: () => fetchSettings(offset, limit, sortBy, filters),
+		keepPreviousData: true,
+		staleTime: 15 * 1000, // 15 seconds
+		...options,
+	});
 };
 
 export { fetchSettings, useSettings };

frontend/src/hooks/useUpstreamNginxConfig.ts

@@ -1,19 +1,18 @@
-import { getUpstreamNginxConfig } from "api/npm";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
+
+import { getUpstreamNginxConfig } from "src/api/npm";
 
 const fetchUpstreamNginxConfig = (id: any) => {
 	return getUpstreamNginxConfig(id);
 };
 
 const useUpstreamNginxConfig = (id: number, options = {}) => {
-	return useQuery<string, Error>(
-		["upstream-nginx-config", id],
-		() => fetchUpstreamNginxConfig(id),
-		{
-			staleTime: 30 * 1000, // 30 seconds
-			...options,
-		},
-	);
+	return useQuery<string, Error>({
+		queryKey: ["upstream-nginx-config", id],
+		queryFn: () => fetchUpstreamNginxConfig(id),
+		staleTime: 30 * 1000, // 30 seconds
+		...options,
+	});
 };
 
 export { useUpstreamNginxConfig };

frontend/src/hooks/useUpstreams.ts

@@ -1,10 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
 import {
 	getUpstreams,
 	HostsResponse,
 	tableSortToAPI,
 	tableFiltersToAPI,
-} from "api/npm";
-import { useQuery } from "react-query";
+} from "src/api/npm";
 
 const fetchUpstreams = (
 	offset = 0,
@@ -27,15 +28,13 @@ const useUpstreams = (
 	filters?: any,
 	options = {},
 ) => {
-	return useQuery<HostsResponse, Error>(
-		["upstreams", { offset, limit, sortBy, filters }],
-		() => fetchUpstreams(offset, limit, sortBy, filters),
-		{
-			keepPreviousData: true,
-			staleTime: 15 * 1000, // 15 seconds
-			...options,
-		},
-	);
+	return useQuery<HostsResponse, Error>({
+		queryKey: ["upstreams", { offset, limit, sortBy, filters }],
+		queryFn: () => fetchUpstreams(offset, limit, sortBy, filters),
+		keepPreviousData: true,
+		staleTime: 15 * 1000, // 15 seconds
+		...options,
+	});
 };
 
 export { fetchUpstreams, useUpstreams };

frontend/src/hooks/useUser.ts

@@ -1,12 +1,15 @@
-import { getUser, setUser, User } from "api/npm";
-import { useMutation, useQuery, useQueryClient } from "react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { getUser, setUser, User } from "src/api/npm";
 
 const fetchUser = (id: any) => {
 	return getUser(id, { expand: "capabilities" });
 };
 
 const useUser = (id: string | number, options = {}) => {
-	return useQuery<User, Error>(["user", id], () => fetchUser(id), {
+	return useQuery<User, Error>({
+		queryKey: ["user", id],
+		queryFn: () => fetchUser(id),
 		staleTime: 60 * 1000, // 1 minute
 		...options,
 	});
@@ -26,10 +29,10 @@ const useSetUser = () => {
 			return () =>
 				queryClient.setQueryData(["user", values.id], previousObject);
 		},
-		onError: (error, values, rollback: any) => rollback(),
+		onError: (_, __, rollback: any) => rollback(),
 		onSuccess: async ({ id }: User) => {
 			queryClient.invalidateQueries(["user", id]);
-			queryClient.invalidateQueries("users");
+			queryClient.invalidateQueries(["users"]);
 		},
 	});
 };

frontend/src/hooks/useUsers.ts

@@ -1,10 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
 import {
 	getUsers,
 	UsersResponse,
 	tableSortToAPI,
 	tableFiltersToAPI,
-} from "api/npm";
-import { useQuery } from "react-query";
+} from "src/api/npm";
 
 const fetchUsers = (offset = 0, limit = 10, sortBy?: any, filters?: any) => {
 	return getUsers(
@@ -22,15 +23,13 @@ const useUsers = (
 	filters?: any,
 	options = {},
 ) => {
-	return useQuery<UsersResponse, Error>(
-		["users", { offset, limit, sortBy, filters }],
-		() => fetchUsers(offset, limit, sortBy, filters),
-		{
-			keepPreviousData: true,
-			staleTime: 15 * 1000, // 15 seconds
-			...options,
-		},
-	);
+	return useQuery<UsersResponse, Error>({
+		queryKey: ["users", { offset, limit, sortBy, filters }],
+		queryFn: () => fetchUsers(offset, limit, sortBy, filters),
+		keepPreviousData: true,
+		staleTime: 15 * 1000, // 15 seconds
+		...options,
+	});
 };
 
 export { fetchUsers, useUsers };

frontend/src/main.tsx

@@ -19,10 +19,7 @@ declare global {
 	}
 }
 
-const root = ReactDOM.createRoot(
-	document.getElementById("root") as HTMLElement,
-);
-root.render(
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
 	<React.StrictMode>
 		<ColorModeScript initialColorMode={customTheme.config.initialColorMode} />
 		<App />

frontend/src/modals/AccessListCreateModal.tsx

@@ -16,12 +16,13 @@ import {
 	Stack,
 	useToast,
 } from "@chakra-ui/react";
-import { CertificateAuthority } from "api/npm";
-import { PrettyButton } from "components";
 import { Formik, Form, Field } from "formik";
-import { useSetCertificateAuthority } from "hooks";
-import { intl } from "locale";
-import { validateNumber, validateString } from "modules/Validations";
+
+import { CertificateAuthority } from "src/api/npm";
+import { PrettyButton } from "src/components";
+import { useSetCertificateAuthority } from "src/hooks";
+import { intl } from "src/locale";
+import { validateNumber, validateString } from "src/modules/Validations";
 
 interface AccessListCreateModalProps {
 	isOpen: boolean;

frontend/src/modals/CertificateAuthorityCreateModal.tsx

@@ -15,12 +15,13 @@ import {
 	Stack,
 	useToast,
 } from "@chakra-ui/react";
-import { CertificateAuthority } from "api/npm";
-import { PrettyButton } from "components";
 import { Formik, Form, Field } from "formik";
-import { useSetCertificateAuthority } from "hooks";
-import { intl } from "locale";
-import { validateNumber, validateString } from "modules/Validations";
+
+import { CertificateAuthority } from "src/api/npm";
+import { PrettyButton } from "src/components";
+import { useSetCertificateAuthority } from "src/hooks";
+import { intl } from "src/locale";
+import { validateNumber, validateString } from "src/modules/Validations";
 
 interface CertificateAuthorityCreateModalProps {
 	isOpen: boolean;

frontend/src/modals/CertificateAuthorityEditModal.tsx

@@ -15,12 +15,13 @@ import {
 	Stack,
 	useToast,
 } from "@chakra-ui/react";
-import { CertificateAuthority } from "api/npm";
-import { PrettyButton } from "components";
 import { Formik, Form, Field } from "formik";
-import { useCertificateAuthority, useSetCertificateAuthority } from "hooks";
-import { intl } from "locale";
-import { validateNumber, validateString } from "modules/Validations";
+
+import { CertificateAuthority } from "src/api/npm";
+import { PrettyButton } from "src/components";
+import { useCertificateAuthority, useSetCertificateAuthority } from "src/hooks";
+import { intl } from "src/locale";
+import { validateNumber, validateString } from "src/modules/Validations";
 
 interface CertificateAuthorityEditModalProps {
 	editId: number;

frontend/src/modals/CertificateCreateModal/CertificateCreateModal.tsx

@@ -10,11 +10,12 @@ import {
 	Stack,
 	useToast,
 } from "@chakra-ui/react";
-import { Certificate } from "api/npm";
-import { PrettyButton } from "components";
 import { Formik, Form } from "formik";
-import { useSetCertificate } from "hooks";
-import { intl } from "locale";
+
+import { Certificate } from "src/api/npm";
+import { PrettyButton } from "src/components";
+import { useSetCertificate } from "src/hooks";
+import { intl } from "src/locale";
 
 import CustomForm from "./CustomForm";
 import DNSForm from "./DNSForm";

frontend/src/modals/CertificateCreateModal/Common/CertificateAuthorityField.tsx

@@ -4,10 +4,11 @@ import {
 	FormLabel,
 	Select,
 } from "@chakra-ui/react";
-import { CertificateAuthority } from "api/npm";
 import { Field, useFormikContext } from "formik";
-import { useCertificateAuthorities } from "hooks";
-import { intl } from "locale";
+
+import { CertificateAuthority } from "src/api/npm";
+import { useCertificateAuthorities } from "src/hooks";
+import { intl } from "src/locale";
 
 const fieldName = "certificateAuthorityId";
 

frontend/src/modals/CertificateCreateModal/Common/DNSProviderField.tsx

@@ -4,10 +4,11 @@ import {
 	FormLabel,
 	Select,
 } from "@chakra-ui/react";
-import { DNSProvider } from "api/npm";
 import { Field, useFormikContext } from "formik";
-import { useDNSProviders } from "hooks";
-import { intl } from "locale";
+
+import { DNSProvider } from "src/api/npm";
+import { useDNSProviders } from "src/hooks";
+import { intl } from "src/locale";
 
 const fieldName = "dnsProviderId";
 

frontend/src/modals/CertificateCreateModal/Common/DomainNamesField.tsx

@@ -6,7 +6,8 @@ import {
 } from "@chakra-ui/react";
 import { CreatableSelect, OptionBase } from "chakra-react-select";
 import { Field, useFormikContext } from "formik";
-import { intl } from "locale";
+
+import { intl } from "src/locale";
 
 interface SelectOption extends OptionBase {
 	label: string;
@@ -16,13 +17,12 @@ interface DomainNamesFieldProps {
 	maxDomains?: number;
 	isWildcardPermitted?: boolean;
 	dnsProviderWildcardSupported?: boolean;
-	onChange?: (i: string[]) => any;
+	// onChange?: (i: string[]) => any;
 }
 function DomainNamesField({
 	maxDomains,
 	isWildcardPermitted,
-	dnsProviderWildcardSupported,
-	onChange,
+	dnsProviderWildcardSupported, // onChange,
 }: DomainNamesFieldProps) {
 	const { values, setFieldValue } = useFormikContext();
 
@@ -76,7 +76,7 @@ function DomainNamesField({
 		setFieldValue("domainNames", doms);
 	};
 
-	let helperTexts: string[] = [];
+	const helperTexts: string[] = [];
 	if (maxDomains) {
 		helperTexts.push(
 			intl.formatMessage({ id: "domain_names.max" }, { count: maxDomains }),
@@ -110,7 +110,7 @@ function DomainNamesField({
 					/>
 					{helperTexts.length
 						? helperTexts.map((i) => {
-								return <FormHelperText>{i}</FormHelperText>;
+								return <FormHelperText key={i}>{i}</FormHelperText>;
 						  })
 						: null}
 					<FormErrorMessage>{form.errors.domainNames}</FormErrorMessage>

frontend/src/modals/CertificateCreateModal/Common/EccField.tsx

@@ -5,7 +5,8 @@ import {
 	Switch,
 } from "@chakra-ui/react";
 import { Field } from "formik";
-import { intl } from "locale";
+
+import { intl } from "src/locale";
 
 const fieldName = "isEcc";
 

frontend/src/modals/CertificateCreateModal/Common/NameField.tsx

@@ -5,8 +5,9 @@ import {
 	Input,
 } from "@chakra-ui/react";
 import { Field } from "formik";
-import { intl } from "locale";
-import { validateString } from "modules/Validations";
+
+import { intl } from "src/locale";
+import { validateString } from "src/modules/Validations";
 
 function NameField() {
 	return (

frontend/src/modals/CertificateEditModal.tsx

@@ -15,12 +15,13 @@ import {
 	Stack,
 	useToast,
 } from "@chakra-ui/react";
-import { CertificateAuthority } from "api/npm";
-import { PrettyButton } from "components";
 import { Formik, Form, Field } from "formik";
-import { useCertificateAuthority, useSetCertificateAuthority } from "hooks";
-import { intl } from "locale";
-import { validateNumber, validateString } from "modules/Validations";
+
+import { CertificateAuthority } from "src/api/npm";
+import { PrettyButton } from "src/components";
+import { useCertificateAuthority, useSetCertificateAuthority } from "src/hooks";
+import { intl } from "src/locale";
+import { validateNumber, validateString } from "src/modules/Validations";
 
 interface CertificateEditModalProps {
 	editId: number;

frontend/src/modals/ChangePasswordModal.tsx

@@ -14,11 +14,12 @@ import {
 	Stack,
 	useToast,
 } from "@chakra-ui/react";
-import { setAuth } from "api/npm";
-import { PrettyButton } from "components";
 import { Formik, Form, Field } from "formik";
-import { intl } from "locale";
-import { validateString } from "modules/Validations";
+
+import { setAuth } from "src/api/npm";
+import { PrettyButton } from "src/components";
+import { intl } from "src/locale";
+import { validateString } from "src/modules/Validations";
 
 interface ChangePasswordModalProps {
 	isOpen: boolean;
@@ -75,7 +76,7 @@ function ChangePasswordModal({ isOpen, onClose }: ChangePasswordModalProps) {
 						}
 						return errors;
 					}}>
-					{({ isSubmitting, values }: any) => (
+					{({ isSubmitting }: any) => (
 						<Form data-testid="change-password">
 							<ModalHeader>
 								{intl.formatMessage({ id: "change-password" })}

frontend/src/modals/DNSProviderCreateModal.tsx

@@ -19,16 +19,17 @@ import {
 	useToast,
 } from "@chakra-ui/react";
 import Ajv, { Schema } from "ajv";
+import { Formik, Form, Field, getIn } from "formik";
+
 import {
 	DNSProvider,
 	DNSProvidersAcmesh,
 	DNSProvidersAcmeshProperty,
-} from "api/npm";
-import { PrettyButton } from "components";
-import { Formik, Form, Field, getIn } from "formik";
-import { useSetDNSProvider, useDNSProvidersAcmesh } from "hooks";
-import { intl } from "locale";
-import { validateString } from "modules/Validations";
+} from "src/api/npm";
+import { PrettyButton } from "src/components";
+import { useSetDNSProvider, useDNSProvidersAcmesh } from "src/hooks";
+import { intl } from "src/locale";
+import { validateString } from "src/modules/Validations";
 
 interface DNSProviderCreateModalProps {
 	isOpen: boolean;
@@ -82,7 +83,7 @@ function DNSProviderCreateModal({
 		try {
 			const valid = ajv.validate(fullItem as Schema, payload.meta);
 			if (!valid) {
-				let errs: any = {};
+				const errs: any = {};
 				ajv.errors?.forEach((e: any) => {
 					errs["meta"] = {
 						[e.instancePath.substring(1)]: e.message,
@@ -129,7 +130,7 @@ function DNSProviderCreateModal({
 		}
 
 		let type = "text";
-		let props: any = {};
+		const props: any = {};
 
 		if (f.type === "string") {
 			props.minLength = f.minLength || null;
@@ -174,7 +175,7 @@ function DNSProviderCreateModal({
 							} as DNSProvider
 						}
 						onSubmit={onSubmit}>
-						{({ isSubmitting, handleChange, values, setValues }) => (
+						{({ isSubmitting, handleChange, values }) => (
 							<Form>
 								<ModalHeader>
 									{intl.formatMessage({ id: "dns-provider.create" })}
@@ -244,11 +245,12 @@ function DNSProviderCreateModal({
 													)}
 												</Field>
 												{itemProperties
-													? Object.keys(itemProperties).map((fieldName, _) => {
+													? Object.keys(itemProperties).map((fieldName) => {
 															const f = itemProperties[fieldName];
 															const name = `meta[${fieldName}]`;
 															return (
 																<Field
+																	key={fieldName}
 																	name={`meta[${fieldName}]`}
 																	type={
 																		f.type === "boolean"

frontend/src/modals/HostCreateModal.tsx

@@ -15,12 +15,13 @@ import {
 	Stack,
 	useToast,
 } from "@chakra-ui/react";
-import { CertificateAuthority } from "api/npm";
-import { PrettyButton } from "components";
 import { Formik, Form, Field } from "formik";
-import { useSetCertificateAuthority } from "hooks";
-import { intl } from "locale";
-import { validateNumber, validateString } from "modules/Validations";
+
+import { CertificateAuthority } from "src/api/npm";
+import { PrettyButton } from "src/components";
+import { useSetCertificateAuthority } from "src/hooks";
+import { intl } from "src/locale";
+import { validateNumber, validateString } from "src/modules/Validations";
 
 interface HostCreateModalProps {
 	isOpen: boolean;

frontend/src/modals/ProfileModal.tsx

@@ -14,11 +14,12 @@ import {
 	Stack,
 	useToast,
 } from "@chakra-ui/react";
-import { PrettyButton } from "components";
 import { Formik, Form, Field } from "formik";
-import { useUser, useSetUser } from "hooks";
-import { intl } from "locale";
-import { validateEmail, validateString } from "modules/Validations";
+
+import { PrettyButton } from "src/components";
+import { useUser, useSetUser } from "src/hooks";
+import { intl } from "src/locale";
+import { validateEmail, validateString } from "src/modules/Validations";
 
 interface ProfileModalProps {
 	isOpen: boolean;

frontend/src/modals/SetPasswordModal.tsx

@@ -14,11 +14,12 @@ import {
 	Stack,
 	useToast,
 } from "@chakra-ui/react";
-import { setAuth } from "api/npm";
-import { PrettyButton } from "components";
 import { Formik, Form, Field } from "formik";
-import { intl } from "locale";
-import { validateString } from "modules/Validations";
+
+import { setAuth } from "src/api/npm";
+import { PrettyButton } from "src/components";
+import { intl } from "src/locale";
+import { validateString } from "src/modules/Validations";
 
 interface SetPasswordModalProps {
 	userId: number;
@@ -75,7 +76,7 @@ function SetPasswordModal({ userId, isOpen, onClose }: SetPasswordModalProps) {
 						}
 						return errors;
 					}}>
-					{({ isSubmitting, values }: any) => (
+					{({ isSubmitting }: any) => (
 						<Form>
 							<ModalHeader>
 								{intl.formatMessage({ id: "set-password" })}

frontend/src/modals/UpstreamCreateModal.tsx

@@ -16,12 +16,13 @@ import {
 	Stack,
 	useToast,
 } from "@chakra-ui/react";
-import { CertificateAuthority } from "api/npm";
-import { PrettyButton } from "components";
 import { Formik, Form, Field } from "formik";
-import { useSetCertificateAuthority } from "hooks";
-import { intl } from "locale";
-import { validateNumber, validateString } from "modules/Validations";
+
+import { CertificateAuthority } from "src/api/npm";
+import { PrettyButton } from "src/components";
+import { useSetCertificateAuthority } from "src/hooks";
+import { intl } from "src/locale";
+import { validateNumber, validateString } from "src/modules/Validations";
 
 interface UpstreamCreateModalProps {
 	isOpen: boolean;

frontend/src/modals/UpstreamEditModal.tsx

@@ -16,12 +16,13 @@ import {
 	Stack,
 	useToast,
 } from "@chakra-ui/react";
-import { CertificateAuthority } from "api/npm";
-import { PrettyButton } from "components";
 import { Formik, Form, Field } from "formik";
-import { useCertificateAuthority, useSetCertificateAuthority } from "hooks";
-import { intl } from "locale";
-import { validateNumber, validateString } from "modules/Validations";
+
+import { CertificateAuthority } from "src/api/npm";
+import { PrettyButton } from "src/components";
+import { useCertificateAuthority, useSetCertificateAuthority } from "src/hooks";
+import { intl } from "src/locale";
+import { validateNumber, validateString } from "src/modules/Validations";
 
 interface UpstreamEditModalProps {
 	editId: number;

frontend/src/modals/UpstreamNginxConfigModal.tsx

@@ -6,12 +6,13 @@ import {
 	ModalCloseButton,
 	ModalBody,
 } from "@chakra-ui/react";
-import { useUpstreamNginxConfig } from "hooks";
-import { intl } from "locale";
 import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
 import sh from "react-syntax-highlighter/dist/esm/languages/hljs/bash";
 import nord from "react-syntax-highlighter/dist/esm/styles/hljs/nord";
 
+import { useUpstreamNginxConfig } from "src/hooks";
+import { intl } from "src/locale";
+
 interface UpstreamNginxConfigModalProps {
 	upstreamId: number;
 	isOpen: boolean;

frontend/src/modals/UserCreateModal.tsx

@@ -21,16 +21,17 @@ import {
 	TabPanels,
 	useToast,
 } from "@chakra-ui/react";
-import { createUser } from "api/npm";
+import { useQueryClient } from "@tanstack/react-query";
+import { Formik, Form, Field } from "formik";
+
+import { createUser } from "src/api/npm";
 import {
 	AdminPermissionSelector,
 	PermissionSelector,
 	PrettyButton,
-} from "components";
-import { Formik, Form, Field } from "formik";
-import { intl } from "locale";
-import { validateEmail, validateString } from "modules/Validations";
-import { useQueryClient } from "react-query";
+} from "src/components";
+import { intl } from "src/locale";
+import { validateEmail, validateString } from "src/modules/Validations";
 
 interface Payload {
 	name: string;
@@ -50,7 +51,7 @@ function UserCreateModal({ isOpen, onClose }: UserCreateModalProps) {
 	const [capabilityOption, setCapabilityOption] = useState("admin");
 
 	const onSubmit = async (values: Payload, { setSubmitting }: any) => {
-		const { password, ...payload } = {
+		const { ...payload } = {
 			...values,
 			...{
 				isDisabled: false,
@@ -78,7 +79,7 @@ function UserCreateModal({ isOpen, onClose }: UserCreateModalProps) {
 			const response = await createUser(payload);
 			if (response && typeof response.id !== "undefined" && response.id) {
 				// ok
-				queryClient.invalidateQueries("users");
+				queryClient.invalidateQueries(["users"]);
 				onClose();
 				resetForm();
 			} else {

frontend/src/modals/UserEditModal.tsx

@@ -22,15 +22,16 @@ import {
 	TabPanels,
 	useToast,
 } from "@chakra-ui/react";
+import { Formik, Form, Field } from "formik";
+
 import {
 	AdminPermissionSelector,
 	PermissionSelector,
 	PrettyButton,
-} from "components";
-import { Formik, Form, Field } from "formik";
-import { useUser, useSetUser } from "hooks";
-import { intl } from "locale";
-import { validateEmail, validateString } from "modules/Validations";
+} from "src/components";
+import { useUser, useSetUser } from "src/hooks";
+import { intl } from "src/locale";
+import { validateEmail, validateString } from "src/modules/Validations";
 
 interface UserEditModalProps {
 	userId: number;

frontend/src/modules/AuthStore.ts

@@ -1,4 +1,4 @@
-import { TokenResponse } from "api/npm";
+import { TokenResponse } from "src/api/npm";
 
 export const TOKEN_KEY = "authentications";
 

frontend/src/modules/Validations.tsx

@@ -1,4 +1,4 @@
-import { intl } from "locale";
+import { intl } from "src/locale";
 
 const validateString = (minLength = 0, maxLength = 0) => {
 	if (minLength <= 0 && maxLength <= 0) {

frontend/src/pages/AccessLists/Table.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useMemo } from "react";
 
+import { FiEdit } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
 import {
 	tableEvents,
 	ActionsFormatter,
@@ -9,10 +12,8 @@ import {
 	TablePagination,
 	TableSortBy,
 	TextFilter,
-} from "components";
-import { intl } from "locale";
-import { FiEdit } from "react-icons/fi";
-import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+} from "src/components";
+import { intl } from "src/locale";
 
 export interface TableProps {
 	data: any;
@@ -48,7 +49,7 @@ function Table({
 				Cell: ActionsFormatter([
 					{
 						title: intl.formatMessage({ id: "action.edit" }),
-						onClick: (e: any, data: any) => {
+						onClick: (_: any, data: any) => {
 							alert(JSON.stringify(data, null, 2));
 						},
 						icon: <FiEdit />,

frontend/src/pages/AccessLists/TableWrapper.tsx

@@ -1,14 +1,15 @@
 import { useEffect, useReducer, useState } from "react";
 
 import { Alert, AlertIcon } from "@chakra-ui/react";
+
 import {
 	EmptyList,
 	PrettyButton,
 	SpinnerPage,
 	tableEventReducer,
-} from "components";
-import { useAccessLists } from "hooks";
-import { intl } from "locale";
+} from "src/components";
+import { useAccessLists } from "src/hooks";
+import { intl } from "src/locale";
 
 import Table from "./Table";
 

frontend/src/pages/AccessLists/index.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
 
 import { Heading, HStack } from "@chakra-ui/react";
-import { HelpDrawer, PrettyButton } from "components";
-import { intl } from "locale";
-import { AccessListCreateModal } from "modals";
+
+import { HelpDrawer, PrettyButton } from "src/components";
+import { intl } from "src/locale";
+import { AccessListCreateModal } from "src/modals";
 
 import TableWrapper from "./TableWrapper";
 

frontend/src/pages/AuditLog/index.tsx

@@ -1,5 +1,6 @@
 import { Heading } from "@chakra-ui/react";
-import { intl } from "locale";
+
+import { intl } from "src/locale";
 
 function AuditLog() {
 	return (

frontend/src/pages/CertificateAuthorities/Table.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useMemo, useState } from "react";
 
+import { FiEdit } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
 import {
 	tableEvents,
 	ActionsFormatter,
@@ -9,11 +12,9 @@ import {
 	TablePagination,
 	TableSortBy,
 	TextFilter,
-} from "components";
-import { intl } from "locale";
-import { CertificateAuthorityEditModal } from "modals";
-import { FiEdit } from "react-icons/fi";
-import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+} from "src/components";
+import { intl } from "src/locale";
+import { CertificateAuthorityEditModal } from "src/modals";
 
 export interface TableProps {
 	data: any;
@@ -58,7 +59,7 @@ function Table({
 						title: intl.formatMessage({
 							id: "action.edit",
 						}),
-						onClick: (e: any, { id }: any) => setEditId(id),
+						onClick: (_: any, { id }: any) => setEditId(id),
 						icon: <FiEdit />,
 						disabled: (data: any) => data.isReadonly,
 					},

frontend/src/pages/CertificateAuthorities/TableWrapper.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useReducer, useState } from "react";
 
 import { Alert, AlertIcon } from "@chakra-ui/react";
-import { SpinnerPage, tableEventReducer } from "components";
-import { useCertificateAuthorities } from "hooks";
+
+import { SpinnerPage, tableEventReducer } from "src/components";
+import { useCertificateAuthorities } from "src/hooks";
 
 import Table from "./Table";
 

frontend/src/pages/CertificateAuthorities/index.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
 
 import { Heading, HStack } from "@chakra-ui/react";
-import { HelpDrawer, PrettyButton } from "components";
-import { intl } from "locale";
-import { CertificateAuthorityCreateModal } from "modals";
+
+import { HelpDrawer, PrettyButton } from "src/components";
+import { intl } from "src/locale";
+import { CertificateAuthorityCreateModal } from "src/modals";
 
 import TableWrapper from "./TableWrapper";
 

frontend/src/pages/Certificates/Table.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useMemo, useState } from "react";
 
+import { FiDownload, FiEdit, FiRefreshCw, FiTrash2 } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
 import {
 	tableEvents,
 	ActionsFormatter,
@@ -13,11 +16,9 @@ import {
 	TablePagination,
 	TableSortBy,
 	TextFilter,
-} from "components";
-import { intl } from "locale";
-import { CertificateEditModal } from "modals";
-import { FiDownload, FiEdit, FiRefreshCw, FiTrash2 } from "react-icons/fi";
-import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+} from "src/components";
+import { intl } from "src/locale";
+import { CertificateEditModal } from "src/modals";
 
 export interface TableProps {
 	data: any;
@@ -78,7 +79,7 @@ function Table({
 						title: intl.formatMessage({
 							id: "action.edit",
 						}),
-						onClick: (e: any, { id }: any) => alert(id),
+						onClick: (_: any, { id }: any) => alert(id),
 						icon: <FiEdit />,
 						disabled: (data: any) =>
 							data.type === "dns" || data.type === "http",
@@ -87,7 +88,7 @@ function Table({
 						title: intl.formatMessage({
 							id: "action.renew",
 						}),
-						onClick: (e: any, { id }: any) => onRenewal(id),
+						onClick: (_: any, { id }: any) => onRenewal(id),
 						icon: <FiRefreshCw />,
 						disabled: (data: any) =>
 							data.type !== "dns" && data.type !== "http",
@@ -96,7 +97,7 @@ function Table({
 						title: intl.formatMessage({
 							id: "action.download",
 						}),
-						onClick: (e: any, { id }: any) => alert(id),
+						onClick: (_: any, { id }: any) => alert(id),
 						icon: <FiDownload />,
 						disabled: (data: any) => data.isReadonly,
 					},
@@ -104,7 +105,7 @@ function Table({
 						title: intl.formatMessage({
 							id: "action.delete",
 						}),
-						onClick: (e: any, { id }: any) => alert(id),
+						onClick: (_: any, { id }: any) => alert(id),
 						icon: <FiTrash2 />,
 						disabled: (data: any) => data.isReadonly,
 					},

frontend/src/pages/Certificates/TableWrapper.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useReducer, useState } from "react";
 
 import { Alert, AlertIcon, useToast } from "@chakra-ui/react";
-import { renewCertificate } from "api/npm";
-import { EmptyList, SpinnerPage, tableEventReducer } from "components";
-import { useCertificates } from "hooks";
-import { intl } from "locale";
-import { useQueryClient } from "react-query";
+import { useQueryClient } from "@tanstack/react-query";
+
+import { renewCertificate } from "src/api/npm";
+import { EmptyList, SpinnerPage, tableEventReducer } from "src/components";
+import { useCertificates } from "src/hooks";
+import { intl } from "src/locale";
 
 import Table from "./Table";
 
@@ -54,7 +55,7 @@ function TableWrapper() {
 				isClosable: true,
 			});
 			setTimeout(() => {
-				queryClient.invalidateQueries("certificates");
+				queryClient.invalidateQueries(["certificates"]);
 			}, 500);
 		} catch (err: any) {
 			toast({

frontend/src/pages/Certificates/index.tsx

@@ -8,12 +8,13 @@ import {
 	MenuItem,
 	MenuDivider,
 } from "@chakra-ui/react";
-import { HelpDrawer, PrettyMenuButton } from "components";
-import { useDNSProviders } from "hooks";
-import { intl } from "locale";
-import { CertificateCreateModal } from "modals";
 import { FiGlobe, FiServer, FiShieldOff, FiUpload } from "react-icons/fi";
 
+import { HelpDrawer, PrettyMenuButton } from "src/components";
+import { useDNSProviders } from "src/hooks";
+import { intl } from "src/locale";
+import { CertificateCreateModal } from "src/modals";
+
 import TableWrapper from "./TableWrapper";
 
 function Certificates() {

frontend/src/pages/DNSProviders/Table.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useMemo } from "react";
 
+import { FiEdit } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
 import {
 	tableEvents,
 	ActionsFormatter,
@@ -11,10 +14,8 @@ import {
 	TablePagination,
 	TableSortBy,
 	TextFilter,
-} from "components";
-import { intl } from "locale";
-import { FiEdit } from "react-icons/fi";
-import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+} from "src/components";
+import { intl } from "src/locale";
 
 export interface TableProps {
 	data: any;
@@ -63,7 +64,7 @@ function Table({
 				Cell: ActionsFormatter([
 					{
 						title: intl.formatMessage({ id: "action.edit" }),
-						onClick: (e: any, data: any) => {
+						onClick: (_: any, data: any) => {
 							alert(JSON.stringify(data, null, 2));
 						},
 						icon: <FiEdit />,

frontend/src/pages/DNSProviders/TableWrapper.tsx

@@ -1,14 +1,15 @@
 import { useEffect, useReducer, useState } from "react";
 
 import { Alert, AlertIcon } from "@chakra-ui/react";
+
 import {
 	EmptyList,
 	PrettyButton,
 	SpinnerPage,
 	tableEventReducer,
-} from "components";
-import { useDNSProviders } from "hooks";
-import { intl } from "locale";
+} from "src/components";
+import { useDNSProviders } from "src/hooks";
+import { intl } from "src/locale";
 
 import Table from "./Table";
 

frontend/src/pages/DNSProviders/index.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
 
 import { Heading, HStack } from "@chakra-ui/react";
-import { HelpDrawer, PrettyButton } from "components";
-import { intl } from "locale";
-import { DNSProviderCreateModal } from "modals";
+
+import { HelpDrawer, PrettyButton } from "src/components";
+import { intl } from "src/locale";
+import { DNSProviderCreateModal } from "src/modals";
 
 import TableWrapper from "./TableWrapper";
 

frontend/src/pages/Dashboard/index.tsx

@@ -1,5 +1,6 @@
 import { Heading } from "@chakra-ui/react";
-import { intl } from "locale";
+
+import { intl } from "src/locale";
 
 function Dashboard() {
 	return (

frontend/src/pages/Hosts/Table.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useMemo } from "react";
 
+import { FiEdit } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
 import {
 	tableEvents,
 	ActionsFormatter,
@@ -13,10 +16,8 @@ import {
 	TablePagination,
 	TableSortBy,
 	TextFilter,
-} from "components";
-import { intl } from "locale";
-import { FiEdit } from "react-icons/fi";
-import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+} from "src/components";
+import { intl } from "src/locale";
 
 export interface TableProps {
 	data: any;
@@ -74,7 +75,7 @@ function Table({
 				Cell: ActionsFormatter([
 					{
 						title: intl.formatMessage({ id: "action.edit" }),
-						onClick: (e: any, data: any) => {
+						onClick: (_: any, data: any) => {
 							alert(JSON.stringify(data, null, 2));
 						},
 						icon: <FiEdit />,

frontend/src/pages/Hosts/TableWrapper.tsx

@@ -1,14 +1,15 @@
 import { useEffect, useReducer, useState } from "react";
 
 import { Alert, AlertIcon } from "@chakra-ui/react";
+
 import {
 	EmptyList,
 	PrettyButton,
 	SpinnerPage,
 	tableEventReducer,
-} from "components";
-import { useHosts } from "hooks";
-import { intl } from "locale";
+} from "src/components";
+import { useHosts } from "src/hooks";
+import { intl } from "src/locale";
 
 import Table from "./Table";
 

frontend/src/pages/Hosts/index.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
 
 import { Heading, HStack } from "@chakra-ui/react";
-import { HelpDrawer, PrettyButton } from "components";
-import { intl } from "locale";
-import { HostCreateModal } from "modals";
+
+import { HelpDrawer, PrettyButton } from "src/components";
+import { intl } from "src/locale";
+import { HostCreateModal } from "src/modals";
 
 import TableWrapper from "./TableWrapper";
 

frontend/src/pages/Login/index.tsx

@@ -12,13 +12,14 @@ import {
 	useColorModeValue,
 	useToast,
 } from "@chakra-ui/react";
-import { LocalePicker, PrettyButton, ThemeSwitcher } from "components";
-import { useAuthState } from "context";
 import { Formik, Form, Field } from "formik";
-import { intl } from "locale";
-import { validateEmail, validateString } from "modules/Validations";
 
-import logo from "../../img/logo-256.png";
+import { LocalePicker, PrettyButton, ThemeSwitcher } from "src/components";
+import { useAuthState } from "src/context";
+import { intl } from "src/locale";
+import { validateEmail, validateString } from "src/modules/Validations";
+
+// import logo from "../../img/logo-256.png";
 
 function Login() {
 	const toast = useToast();
@@ -67,7 +68,7 @@ function Login() {
 				<Stack spacing={8} mx="auto" maxW="md" w="full" py={4} px={6}>
 					<Box>
 						<Center>
-							<img src={logo} width={100} alt="Logo" />
+							<img src="/images/logo-256.png" width={100} alt="Logo" />
 						</Center>
 					</Box>
 					<Box

frontend/src/pages/NginxTemplates/NginxTemplatesTable.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useMemo } from "react";
 
+import { FiEdit } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
 import {
 	tableEvents,
 	ActionsFormatter,
@@ -10,15 +13,13 @@ import {
 	TablePagination,
 	TableSortBy,
 	TextFilter,
-} from "components";
-import { intl } from "locale";
-import { FiEdit } from "react-icons/fi";
-import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+} from "src/components";
+import { intl } from "src/locale";
 
 const rowActions = [
 	{
 		title: intl.formatMessage({ id: "action.edit" }),
-		onClick: (e: any, data: any) => {
+		onClick: (_: any, data: any) => {
 			alert(JSON.stringify(data, null, 2));
 		},
 		icon: <FiEdit />,

frontend/src/pages/NginxTemplates/index.tsx

@@ -1,14 +1,15 @@
 import { useEffect, useReducer, useState } from "react";
 
 import { Alert, AlertIcon, Heading, HStack } from "@chakra-ui/react";
+
 import {
 	HelpDrawer,
 	PrettyButton,
 	SpinnerPage,
 	tableEventReducer,
-} from "components";
-import { useNginxTemplates } from "hooks";
-import { intl } from "locale";
+} from "src/components";
+import { useNginxTemplates } from "src/hooks";
+import { intl } from "src/locale";
 
 import { NginxTemplatesTable } from "./NginxTemplatesTable";
 

frontend/src/pages/Settings/SettingsTable.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useMemo } from "react";
 
+import { FiEdit } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
 import {
 	tableEvents,
 	ActionsFormatter,
@@ -8,15 +11,13 @@ import {
 	TablePagination,
 	TableSortBy,
 	TextFilter,
-} from "components";
-import { intl } from "locale";
-import { FiEdit } from "react-icons/fi";
-import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+} from "src/components";
+import { intl } from "src/locale";
 
 const rowActions = [
 	{
 		title: intl.formatMessage({ id: "action.edit" }),
-		onClick: (e: any, data: any) => {
+		onClick: (_: any, data: any) => {
 			alert(JSON.stringify(data, null, 2));
 		},
 		icon: <FiEdit />,

frontend/src/pages/Settings/index.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useReducer, useState } from "react";
 
 import { Alert, AlertIcon, Heading } from "@chakra-ui/react";
-import { SpinnerPage, tableEventReducer } from "components";
-import { useSettings } from "hooks";
-import { intl } from "locale";
+
+import { SpinnerPage, tableEventReducer } from "src/components";
+import { useSettings } from "src/hooks";
+import { intl } from "src/locale";
 
 import { SettingsTable } from "./SettingsTable";
 

frontend/src/pages/Setup/index.tsx

@@ -13,15 +13,15 @@ import {
 	useColorModeValue,
 	useToast,
 } from "@chakra-ui/react";
-import { createUser } from "api/npm";
-import { LocalePicker, PrettyButton, ThemeSwitcher } from "components";
-import { useAuthState } from "context";
+import { useQueryClient } from "@tanstack/react-query";
 import { Formik, Form, Field } from "formik";
-import { intl } from "locale";
-import { validateEmail, validateString } from "modules/Validations";
-import { useQueryClient } from "react-query";
 
-import logo from "../../img/logo-256.png";
+import { createUser } from "src/api/npm";
+// import logo from "src/assets/logo-256.png";
+import { LocalePicker, PrettyButton, ThemeSwitcher } from "src/components";
+import { useAuthState } from "src/context";
+import { intl } from "src/locale";
+import { validateEmail, validateString } from "src/modules/Validations";
 
 interface Payload {
 	name: string;
@@ -67,7 +67,7 @@ function Setup() {
 				try {
 					await login(response.email, password);
 					// Trigger a Health change
-					await queryClient.refetchQueries("health");
+					await queryClient.refetchQueries(["health"]);
 					// window.location.reload();
 				} catch (err: any) {
 					showErr(err.message);
@@ -101,7 +101,7 @@ function Setup() {
 				<Stack spacing={8} mx="auto" maxW="md" w="full" py={4} px={6}>
 					<Box>
 						<Center>
-							<img src={logo} width={100} alt="Logo" />
+							<img src="/images/logo-256.png" width={100} alt="Logo" />
 						</Center>
 					</Box>
 					<Box

frontend/src/pages/Upstreams/Table.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useMemo, useState } from "react";
 
+import { FiEdit, FiHardDrive } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
 import {
 	tableEvents,
 	ActionsFormatter,
@@ -11,11 +14,9 @@ import {
 	TableSortBy,
 	TextFilter,
 	UpstreamStatusFormatter,
-} from "components";
-import { intl } from "locale";
-import { UpstreamEditModal, UpstreamNginxConfigModal } from "modals";
-import { FiEdit, FiHardDrive } from "react-icons/fi";
-import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+} from "src/components";
+import { intl } from "src/locale";
+import { UpstreamEditModal, UpstreamNginxConfigModal } from "src/modals";
 
 export interface TableProps {
 	data: any;
@@ -69,12 +70,12 @@ function Table({
 				Cell: ActionsFormatter([
 					{
 						title: intl.formatMessage({ id: "action.edit" }),
-						onClick: (e: any, { id }: any) => setEditId(id),
+						onClick: (_: any, { id }: any) => setEditId(id),
 						icon: <FiEdit />,
 					},
 					{
 						title: intl.formatMessage({ id: "action.nginx-config" }),
-						onClick: (e: any, { id }: any) => setConfigId(id),
+						onClick: (_: any, { id }: any) => setConfigId(id),
 						icon: <FiHardDrive />,
 					},
 				]),

frontend/src/pages/Upstreams/TableWrapper.tsx

@@ -1,14 +1,15 @@
 import { useEffect, useReducer, useState } from "react";
 
 import { Alert, AlertIcon } from "@chakra-ui/react";
+
 import {
 	EmptyList,
 	PrettyButton,
 	SpinnerPage,
 	tableEventReducer,
-} from "components";
-import { useUpstreams } from "hooks";
-import { intl } from "locale";
+} from "src/components";
+import { useUpstreams } from "src/hooks";
+import { intl } from "src/locale";
 
 import Table from "./Table";
 

frontend/src/pages/Upstreams/index.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
 
 import { Heading, HStack } from "@chakra-ui/react";
-import { HelpDrawer, PrettyButton } from "components";
-import { intl } from "locale";
-import { UpstreamCreateModal } from "modals";
+
+import { HelpDrawer, PrettyButton } from "src/components";
+import { intl } from "src/locale";
+import { UpstreamCreateModal } from "src/modals";
 
 import TableWrapper from "./TableWrapper";
 

frontend/src/pages/Users/Table.tsx

@@ -1,5 +1,8 @@
 import { useState, useEffect, useMemo } from "react";
 
+import { FiEdit, FiLock } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
 import {
 	tableEvents,
 	ActionsFormatter,
@@ -11,12 +14,10 @@ import {
 	TablePagination,
 	TableSortBy,
 	TextFilter,
-} from "components";
-import { useUser } from "hooks";
-import { intl } from "locale";
-import { SetPasswordModal, UserEditModal } from "modals";
-import { FiEdit, FiLock } from "react-icons/fi";
-import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+} from "src/components";
+import { useUser } from "src/hooks";
+import { intl } from "src/locale";
+import { SetPasswordModal, UserEditModal } from "src/modals";
 
 export interface TableProps {
 	data: any;
@@ -68,13 +69,13 @@ function Table({
 					{
 						title: intl.formatMessage({ id: "action.edit" }),
 						icon: <FiEdit />,
-						onClick: (e: any, { id }: any) => setEditId(id),
+						onClick: (_: any, { id }: any) => setEditId(id),
 						disabled: (data: any) => data.isSystem || data.id === me?.id,
 					},
 					{
 						title: intl.formatMessage({ id: "action.set-password" }),
 						icon: <FiLock />,
-						onClick: (e: any, { id }: any) => setSetPasswordUserId(id),
+						onClick: (_: any, { id }: any) => setSetPasswordUserId(id),
 						disabled: (data: any) => data.isSystem || data.id === me?.id,
 					},
 				]),

frontend/src/pages/Users/TableWrapper.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useReducer, useState } from "react";
 
 import { Alert, AlertIcon } from "@chakra-ui/react";
-import { SpinnerPage, tableEventReducer } from "components";
-import { useUsers } from "hooks";
+
+import { SpinnerPage, tableEventReducer } from "src/components";
+import { useUsers } from "src/hooks";
 
 import Table from "./Table";