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

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();