Add typescript config, move to v1 dir

client/package.json

@@ -5,8 +5,8 @@
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
-		"build": "vite build",
-		"build-dev": "vite build --mode development",
+		"build": "tsc -b && vite build",
+		"build-dev": "tsc -b && vite build --mode development",
 		"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
 		"preview": "vite preview",
 		"format": "prettier --write .",

client/src/Components/ActionsMenu/index.jsx

@@ -12,7 +12,7 @@ import { useNavigate } from "react-router-dom";
 import { createToast } from "../../Utils/toastUtils";
 
 import PropTypes from "prop-types";
-import { usePauseMonitor, useDeleteMonitor } from "../../Hooks/monitorHooks";
+import { usePauseMonitor, useDeleteMonitor } from "../../Hooks/v1/monitorHooks.js";
 
 const ActionsMenu = ({
 	monitor,

client/src/Components/MonitorActions/index.jsx

@@ -11,7 +11,7 @@ import MenuList from "@mui/material/MenuList";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { createToast } from "../../Utils/toastUtils";
-import { useExportMonitors } from "../../Hooks/monitorHooks";
+import { useExportMonitors } from "../../Hooks/v1/monitorHooks.js";
 
 const MonitorActions = ({ isLoading }) => {
 	const [open, setOpen] = React.useState(false);

client/src/Components/MonitorDetailsControlHeader/index.jsx

@@ -12,10 +12,10 @@ import EmailIcon from "@mui/icons-material/Email";
 import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
 import { useTheme } from "@mui/material/styles";
-import { usePauseMonitor } from "../../Hooks/monitorHooks";
-import { useSendTestEmail } from "../../Hooks/useSendTestEmail";
+import { usePauseMonitor } from "../../Hooks/v1/monitorHooks.js";
+import { useSendTestEmail } from "../../Hooks/v1/useSendTestEmail.js";
 import { useTranslation } from "react-i18next";
-import { useTestAllNotifications } from "../../Hooks/useNotifications";
+import { useTestAllNotifications } from "../../Hooks/v1/useNotifications.js";
 /**
  * MonitorDetailsControlHeader component displays the control header for monitor details.
  * It includes status display, pause/resume button, and a configure button for admins.

client/src/Components/MonitorDetailsControlHeader/status.jsx

@@ -7,7 +7,7 @@ import Dot from "../../Components/Dot";
 import { formatDurationRounded } from "../../Utils/timeUtils";
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
-import { useMonitorUtils } from "../../Hooks/useMonitorUtils";
+import { useMonitorUtils } from "../../Hooks/v1/useMonitorUtils.js";
 import { formatMonitorUrl } from "../../Utils/utils";
 /**
  * Status component displays the status information of a monitor.

client/src/Components/PageStateWrapper/index.jsx

@@ -3,7 +3,7 @@ import Fallback from "../Fallback";
 import { Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
-import { useIsAdmin } from "../../Hooks/useIsAdmin";
+import { useIsAdmin } from "../../Hooks/v1/useIsAdmin.js";
 import PropTypes from "prop-types";
 const PageStateWrapper = ({
 	networkError,

client/src/Components/StatBox/index.jsx

@@ -2,7 +2,7 @@ import { Stack, Typography } from "@mui/material";
 import Image from "../Image";
 import { useTheme } from "@mui/material/styles";
 import PropTypes from "prop-types";
-import { useMonitorUtils } from "../../Hooks/useMonitorUtils";
+import { useMonitorUtils } from "../../Hooks/v1/useMonitorUtils.js";
 
 /**
  * StatBox Component

client/src/Hooks/v1/checkHooks.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
-import { networkService } from "../main";
-import { createToast } from "../Utils/toastUtils";
+import { networkService } from "../../main.jsx";
+import { createToast } from "../../Utils/toastUtils.jsx";
 import { useTranslation } from "react-i18next";
 
 const useFetchChecksTeam = ({

client/src/Hooks/v1/inviteHooks.js

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { networkService } from "../main";
+import { networkService } from "../../main.jsx";
 import { useTranslation } from "react-i18next";
 
 const CLIENT_HOST = import.meta.env.VITE_APP_CLIENT_HOST;

client/src/Hooks/v1/logHooks.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
-import { networkService } from "../main";
-import { createToast } from "../Utils/toastUtils";
+import { networkService } from "../../main.jsx";
+import { createToast } from "../../Utils/toastUtils.jsx";
 import { useTranslation } from "react-i18next";
 
 const useFetchLogs = () => {

client/src/Hooks/v1/monitorHooks.js

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
-import { networkService } from "../main";
-import { createToast } from "../Utils/toastUtils";
+import { networkService } from "../../main.jsx";
+import { createToast } from "../../Utils/toastUtils.jsx";
 import { useTheme } from "@emotion/react";
-import { useMonitorUtils } from "./useMonitorUtils";
+import { useMonitorUtils } from "./useMonitorUtils.js";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 

client/src/Hooks/v1/settingsHooks.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
-import { networkService } from "../main";
-import { createToast } from "../Utils/toastUtils";
+import { networkService } from "../../main.jsx";
+import { createToast } from "../../Utils/toastUtils.jsx";
 import { useTranslation } from "react-i18next";
 
 const useFetchSettings = ({ setSettingsData, setIsApiKeySet, setIsEmailPasswordSet }) => {

client/src/Hooks/v1/useNotifications.js

@@ -1,9 +1,9 @@
 import { useState, useEffect, useCallback } from "react";
-import { createToast } from "../Utils/toastUtils";
-import { networkService } from "../main";
+import { createToast } from "../../Utils/toastUtils.jsx";
+import { networkService } from "../../main.jsx";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { NOTIFICATION_TYPES } from "../Pages/Notifications/utils";
+import { NOTIFICATION_TYPES } from "../../Pages/v1/Notifications/utils.js";
 
 const useCreateNotification = () => {
 	const navigate = useNavigate();

client/src/Hooks/v1/useSendTestEmail.js

@@ -1,7 +1,7 @@
 import { useState } from "react";
-import { networkService } from "../main";
+import { networkService } from "../../main.jsx";
 import { useSelector } from "react-redux";
-import { createToast } from "../Utils/toastUtils";
+import { createToast } from "../../Utils/toastUtils.jsx";
 import { useTranslation } from "react-i18next";
 
 const useSendTestEmail = () => {

client/src/Hooks/v1/userHooks.js

@@ -1,6 +1,6 @@
 import { useEffect, useState, useCallback } from "react";
-import { networkService } from "../main";
-import { createToast } from "../Utils/toastUtils";
+import { networkService } from "../../main.jsx";
+import { createToast } from "../../Utils/toastUtils.jsx";
 import { useTranslation } from "react-i18next";
 
 export const useGetUser = (userId) => {

client/src/Pages/v1/About/index.jsx

@@ -1,6 +1,6 @@
 import React from "react";
-import AppBar from "../../Components/Common/AppBar";
-import Footer from "../../Components/Common/Footer";
+import AppBar from "../../../Components/Common/AppBar.jsx";
+import Footer from "../../../Components/Common/Footer.jsx";
 import { useTranslation } from "react-i18next";
 
 const AboutUs = () => {

client/src/Pages/v1/Account/EditUser/hooks/editUser.js

@@ -1,8 +1,8 @@
 import { useState, useEffect } from "react";
-import { ROLES } from "../../../../Utils/roleUtils";
-import { editUserValidation } from "../../../../Validation/validation";
+import { ROLES } from "../../../../../Utils/roleUtils.js";
+import { editUserValidation } from "../../../../../Validation/validation.js";
 import Joi from "joi";
-import { createToast } from "../../../../Utils/toastUtils";
+import { createToast } from "../../../../../Utils/toastUtils.jsx";
 import { useTranslation } from "react-i18next";
 export const useEditUserForm = (user) => {
 	const [searchInput, setSearchInput] = useState("");

client/src/Pages/v1/Account/EditUser/index.jsx

@@ -2,19 +2,19 @@
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-import Breadcrumbs from "../../../Components/Breadcrumbs";
-import TextInput from "../../../Components/Inputs/TextInput";
-import Search from "../../../Components/Inputs/Search";
+import Breadcrumbs from "../../../../Components/Breadcrumbs/index.jsx";
+import TextInput from "../../../../Components/Inputs/TextInput/index.jsx";
+import Search from "../../../../Components/Inputs/Search/index.jsx";
 import Button from "@mui/material/Button";
-import RoleTable from "../components/RoleTable";
+import RoleTable from "../components/RoleTable/index.jsx";
 
 // Utils
 import { useParams } from "react-router-dom";
 import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
-import { useGetUser, useEditUser } from "../../../Hooks/userHooks";
-import { EDITABLE_ROLES, ROLES } from "../../../Utils/roleUtils";
-import { useEditUserForm, useValidateEditUserForm } from "./hooks/editUser";
+import { useGetUser, useEditUser } from "../../../../Hooks/v1/userHooks.js";
+import { EDITABLE_ROLES, ROLES } from "../../../../Utils/roleUtils.js";
+import { useEditUserForm, useValidateEditUserForm } from "./hooks/editUser.js";
 
 const EditUser = () => {
 	const { userId } = useParams();

client/src/Pages/v1/Account/components/AddTeamMember/hooks/useAddTeamMember.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { newOrChangedCredentials } from "../../../../../Validation/validation";
+import { newOrChangedCredentials } from "../../../../../../Validation/validation.js";
 import { useTranslation } from "react-i18next";
 const useAddTeamMember = () => {
 	const { t } = useTranslation();

client/src/Pages/v1/Account/components/AddTeamMember/index.jsx

@@ -1,16 +1,16 @@
 import { Button, Stack } from "@mui/material";
-import { GenericDialog } from "../../../../Components/Dialog/genericDialog";
-import TextInput from "../../../../Components/Inputs/TextInput";
-import Select from "../../../../Components/Inputs/Select";
-import { useGetInviteToken } from "../../../../Hooks/inviteHooks";
+import { GenericDialog } from "../../../../../Components/Dialog/genericDialog.jsx";
+import TextInput from "../../../../../Components/Inputs/TextInput/index.jsx";
+import Select from "../../../../../Components/Inputs/Select/index.jsx";
+import { useGetInviteToken } from "../../../../../Hooks/v1/inviteHooks.js";
 import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
-import { createToast } from "../../../../Utils/toastUtils";
+import { createToast } from "../../../../../Utils/toastUtils.jsx";
 import { useState } from "react";
-import PasswordTooltip from "../../../Auth/components/PasswordTooltip";
-import useAddTeamMember from "./hooks/useAddTeamMember";
-import usePasswordFeedback from "../../../Auth/hooks/usePasswordFeedback";
-import { PasswordEndAdornment } from "../../../../Components/Inputs/TextInput/Adornments";
+import PasswordTooltip from "../../../Auth/components/PasswordTooltip.jsx";
+import useAddTeamMember from "./hooks/useAddTeamMember.jsx";
+import usePasswordFeedback from "../../../Auth/hooks/usePasswordFeedback.jsx";
+import { PasswordEndAdornment } from "../../../../../Components/Inputs/TextInput/Adornments/index.jsx";
 import PropTypes from "prop-types";
 
 const INITIAL_FORM_STATE = {

client/src/Pages/v1/Account/components/PasswordPanel.jsx

@@ -2,14 +2,14 @@ import TabPanel from "@mui/lab/TabPanel";
 import { useState } from "react";
 import { useTheme } from "@emotion/react";
 import { Box, Stack, Typography, Button } from "@mui/material";
-import { PasswordEndAdornment } from "../../../Components/Inputs/TextInput/Adornments";
-import TextInput from "../../../Components/Inputs/TextInput";
-import { newOrChangedCredentials } from "../../../Validation/validation";
-import Alert from "../../../Components/Alert";
-import { update } from "../../../Features/Auth/authSlice";
+import { PasswordEndAdornment } from "../../../../Components/Inputs/TextInput/Adornments/index.jsx";
+import TextInput from "../../../../Components/Inputs/TextInput/index.jsx";
+import { newOrChangedCredentials } from "../../../../Validation/validation.js";
+import Alert from "../../../../Components/Alert/index.jsx";
+import { update } from "../../../../Features/Auth/authSlice.js";
 import { useDispatch, useSelector } from "react-redux";
-import { createToast } from "../../../Utils/toastUtils";
-import { getTouchedFieldErrors } from "../../../Validation/error";
+import { createToast } from "../../../../Utils/toastUtils.jsx";
+import { getTouchedFieldErrors } from "../../../../Validation/error.js";
 import { useTranslation } from "react-i18next";
 
 const defaultPasswordsState = {

client/src/Pages/v1/Account/components/ProfilePanel.jsx

@@ -2,16 +2,16 @@ import { useTheme } from "@emotion/react";
 import { useState } from "react";
 import TabPanel from "@mui/lab/TabPanel";
 import { Box, Button, Divider, Stack, Typography } from "@mui/material";
-import Avatar from "../../../Components/Avatar";
-import TextInput from "../../../Components/Inputs/TextInput";
-import ImageUpload from "../../../Components/Inputs/ImageUpload";
-import { newOrChangedCredentials } from "../../../Validation/validation";
+import Avatar from "../../../../Components/Avatar/index.jsx";
+import TextInput from "../../../../Components/Inputs/TextInput/index.jsx";
+import ImageUpload from "../../../../Components/Inputs/ImageUpload/index.jsx";
+import { newOrChangedCredentials } from "../../../../Validation/validation.js";
 import { useDispatch, useSelector } from "react-redux";
-import { clearAuthState, deleteUser, update } from "../../../Features/Auth/authSlice";
-import { createToast } from "../../../Utils/toastUtils";
-import { logger } from "../../../Utils/Logger";
-import { GenericDialog } from "../../../Components/Dialog/genericDialog";
-import Dialog from "../../../Components/Dialog";
+import { clearAuthState, deleteUser, update } from "../../../../Features/Auth/authSlice.js";
+import { createToast } from "../../../../Utils/toastUtils.jsx";
+import { logger } from "../../../../Utils/Logger.js";
+import { GenericDialog } from "../../../../Components/Dialog/genericDialog.jsx";
+import Dialog from "../../../../Components/Dialog/index.jsx";
 import { useTranslation } from "react-i18next";
 
 /**

client/src/Pages/v1/Account/components/RoleTable/index.jsx

@@ -1,9 +1,9 @@
 import Typography from "@mui/material/Typography";
-import DataTable from "../../../../Components/Table";
+import DataTable from "../../../../../Components/Table/index.jsx";
 import DeleteOutlineRoundedIcon from "@mui/icons-material/DeleteOutlineRounded";
 
 import { useTranslation } from "react-i18next";
-import { ROLES } from "../../../../Utils/roleUtils";
+import { ROLES } from "../../../../../Utils/roleUtils.js";
 
 const RoleTable = ({ roles, handleDeleteRole }) => {
 	const { t } = useTranslation();

client/src/Pages/v1/Account/components/TeamPanel.jsx

@@ -3,18 +3,18 @@ import TabPanel from "@mui/lab/TabPanel";
 import { Button, ButtonGroup, Stack, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import TextInput from "../../../Components/Inputs/TextInput";
-import { newOrChangedCredentials } from "../../../Validation/validation";
-import { networkService } from "../../../main";
-import { createToast } from "../../../Utils/toastUtils";
-import Select from "../../../Components/Inputs/Select";
-import { GenericDialog } from "../../../Components/Dialog/genericDialog";
-import AddTeamMember from "../components/AddTeamMember";
-import DataTable from "../../../Components/Table";
-import { useGetInviteToken } from "../../../Hooks/inviteHooks";
+import TextInput from "../../../../Components/Inputs/TextInput/index.jsx";
+import { newOrChangedCredentials } from "../../../../Validation/validation.js";
+import { networkService } from "../../../../main.jsx";
+import { createToast } from "../../../../Utils/toastUtils.jsx";
+import Select from "../../../../Components/Inputs/Select/index.jsx";
+import { GenericDialog } from "../../../../Components/Dialog/genericDialog.jsx";
+import AddTeamMember from "./AddTeamMember/index.jsx";
+import DataTable from "../../../../Components/Table/index.jsx";
+import { useGetInviteToken } from "../../../../Hooks/v1/inviteHooks.js";
 import { useNavigate } from "react-router-dom";
-import { useIsSuperAdmin } from "../../../Hooks/useIsAdmin";
-import AddMemberMenu from "./AddMemberMenu";
+import { useIsSuperAdmin } from "../../../../Hooks/v1/useIsAdmin.js";
+import AddMemberMenu from "./AddMemberMenu/index.jsx";
 /**
  * TeamPanel component manages the organization and team members,
  * providing functionalities like renaming the organization, managing team members,

client/src/Pages/v1/Account/index.jsx

@@ -3,11 +3,11 @@ import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { Box, Tab, useTheme } from "@mui/material";
-import CustomTabList from "../../Components/Tab";
+import CustomTabList from "../../../Components/Tab/index.jsx";
 import TabContext from "@mui/lab/TabContext";
-import ProfilePanel from "./components/ProfilePanel";
-import PasswordPanel from "./components/PasswordPanel";
-import TeamPanel from "./components/TeamPanel";
+import ProfilePanel from "./components/ProfilePanel.jsx";
+import PasswordPanel from "./components/PasswordPanel.jsx";
+import TeamPanel from "./components/TeamPanel.jsx";
 import { useTranslation } from "react-i18next";
 
 /**

client/src/Pages/v1/Auth/CheckEmail.jsx

@@ -3,13 +3,13 @@ import { useEffect, useState } from "react";
 import { useTheme } from "@emotion/react";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { createToast } from "../../Utils/toastUtils";
-import { forgotPassword } from "../../Features/Auth/authSlice";
+import { createToast } from "../../../Utils/toastUtils.jsx";
+import { forgotPassword } from "../../../Features/Auth/authSlice.js";
 import { Trans, useTranslation } from "react-i18next";
-import Background from "../../assets/Images/background-grid.svg?react";
-import EmailIcon from "../../assets/icons/email.svg?react";
-import Logo from "../../assets/icons/checkmate-icon.svg?react";
-import IconBox from "../../Components/IconBox";
+import Background from "../../../assets/Images/background-grid.svg?react";
+import EmailIcon from "../../../assets/icons/email.svg?react";
+import Logo from "../../../assets/icons/checkmate-icon.svg?react";
+import IconBox from "../../../Components/IconBox/index.jsx";
 import "./index.css";
 
 const CheckEmail = () => {

client/src/Pages/v1/Auth/ForgotPassword.jsx

@@ -1,16 +1,16 @@
 import { Box, Stack, Typography, Button } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import { createToast } from "../../Utils/toastUtils";
+import { createToast } from "../../../Utils/toastUtils.jsx";
 import { useDispatch, useSelector } from "react-redux";
-import { forgotPassword } from "../../Features/Auth/authSlice";
+import { forgotPassword } from "../../../Features/Auth/authSlice.js";
 import { useEffect, useState } from "react";
-import { newOrChangedCredentials } from "../../Validation/validation";
+import { newOrChangedCredentials } from "../../../Validation/validation.js";
 import { useNavigate } from "react-router-dom";
-import TextInput from "../../Components/Inputs/TextInput";
-import Logo from "../../assets/icons/checkmate-icon.svg?react";
-import Key from "../../assets/icons/key.svg?react";
-import Background from "../../assets/Images/background-grid.svg?react";
-import IconBox from "../../Components/IconBox";
+import TextInput from "../../../Components/Inputs/TextInput/index.jsx";
+import Logo from "../../../assets/icons/checkmate-icon.svg?react";
+import Key from "../../../assets/icons/key.svg?react";
+import Background from "../../../assets/Images/background-grid.svg?react";
+import IconBox from "../../../Components/IconBox/index.jsx";
 import { Trans, useTranslation } from "react-i18next";
 import "./index.css";
 

client/src/Pages/v1/Auth/Login/hooks/useLoginSubmit.jsx

@@ -1,7 +1,7 @@
 import { useDispatch } from "react-redux";
-import { login } from "../../../../Features/Auth/authSlice";
+import { login } from "../../../../../Features/Auth/authSlice.js";
 import { useNavigate } from "react-router-dom";
-import { createToast } from "../../../../Utils/toastUtils";
+import { createToast } from "../../../../../Utils/toastUtils.jsx";
 import { useTranslation } from "react-i18next";
 
 const useLoginSubmit = () => {

client/src/Pages/v1/Auth/Login/hooks/useValidateLoginForm.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { loginCredentials } from "../../../../Validation/validation";
+import { loginCredentials } from "../../../../../Validation/validation.js";
 
 const useValidateLoginForm = () => {
 	const [errors, setErrors] = useState({

client/src/Pages/v1/Auth/Login/index.jsx

@@ -1,17 +1,17 @@
 // Components
 import Stack from "@mui/material/Stack";
 import Button from "@mui/material/Button";
-import TextInput from "../../../Components/Inputs/TextInput";
-import { PasswordEndAdornment } from "../../../Components/Inputs/TextInput/Adornments";
-import TextLink from "../../../Components/TextLink";
-import AuthPageWrapper from "../components/AuthPageWrapper";
+import TextInput from "../../../../Components/Inputs/TextInput/index.jsx";
+import { PasswordEndAdornment } from "../../../../Components/Inputs/TextInput/Adornments/index.jsx";
+import TextLink from "../../../../Components/TextLink/index.jsx";
+import AuthPageWrapper from "../components/AuthPageWrapper.jsx";
 // Utils
 import { useTheme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
-import useLoginForm from "./hooks/useLoginForm";
-import useValidateLoginForm from "./hooks/useValidateLoginForm";
-import useLoginSubmit from "./hooks/useLoginSubmit";
-import useLoadingSubmit from "./hooks/useLoadingSubmit";
+import useLoginForm from "./hooks/useLoginForm.jsx";
+import useValidateLoginForm from "./hooks/useValidateLoginForm.jsx";
+import useLoginSubmit from "./hooks/useLoginSubmit.jsx";
+import useLoadingSubmit from "./hooks/useLoadingSubmit.jsx";
 
 const Login = () => {
 	// Hooks

client/src/Pages/v1/Auth/NewPasswordConfirmed.jsx

@@ -2,11 +2,11 @@ import { Box, Button, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
 import { useDispatch } from "react-redux";
-import { clearAuthState } from "../../Features/Auth/authSlice";
-import Background from "../../assets/Images/background-grid.svg?react";
-import ConfirmIcon from "../../assets/icons/check-outlined.svg?react";
-import Logo from "../../assets/icons/checkmate-icon.svg?react";
-import IconBox from "../../Components/IconBox";
+import { clearAuthState } from "../../../Features/Auth/authSlice.js";
+import Background from "../../../assets/Images/background-grid.svg?react";
+import ConfirmIcon from "../../../assets/icons/check-outlined.svg?react";
+import Logo from "../../../assets/icons/checkmate-icon.svg?react";
+import IconBox from "../../../Components/IconBox/index.jsx";
 import { Trans, useTranslation } from "react-i18next";
 import "./index.css";
 

client/src/Pages/v1/Auth/Register/index.jsx

@@ -1,10 +1,10 @@
 // Components
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import TextInput from "../../../Components/Inputs/TextInput";
+import TextInput from "../../../../Components/Inputs/TextInput/index.jsx";
 import Button from "@mui/material/Button";
 import Box from "@mui/material/Box";
-import PasswordTooltip from "../components/PasswordTooltip";
+import PasswordTooltip from "../components/PasswordTooltip.jsx";
 
 // Utils
 import { useTheme } from "@emotion/react";
@@ -13,11 +13,11 @@ import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
-import { networkService } from "../../../main";
-import { newOrChangedCredentials } from "../../../Validation/validation";
-import { register } from "../../../Features/Auth/authSlice";
-import AuthPageWrapper from "../components/AuthPageWrapper";
-import { createToast } from "../../../Utils/toastUtils";
+import { networkService } from "../../../../main.jsx";
+import { newOrChangedCredentials } from "../../../../Validation/validation.js";
+import { register } from "../../../../Features/Auth/authSlice.js";
+import AuthPageWrapper from "../components/AuthPageWrapper.jsx";
+import { createToast } from "../../../../Utils/toastUtils.jsx";
 import PropTypes from "prop-types";
 
 const getFeedbackStatus = (form, errors, field, criteria) => {

client/src/Pages/v1/Auth/SetNewPassword.jsx

@@ -4,18 +4,18 @@ import { useNavigate } from "react-router-dom";
 import { useParams } from "react-router-dom";
 import { useTheme } from "@emotion/react";
 import { Box, Stack, Typography, Button } from "@mui/material";
-import { setNewPassword } from "../../Features/Auth/authSlice";
-import { createToast } from "../../Utils/toastUtils";
-import { newOrChangedCredentials } from "../../Validation/validation";
-import Check from "../../Components/Check/Check";
-import TextInput from "../../Components/Inputs/TextInput";
-import { PasswordEndAdornment } from "../../Components/Inputs/TextInput/Adornments";
-import IconBox from "../../Components/IconBox";
-import LockIcon from "../../assets/icons/lock.svg?react";
-import Logo from "../../assets/icons/checkmate-icon.svg?react";
-import Background from "../../assets/Images/background-grid.svg?react";
+import { setNewPassword } from "../../../Features/Auth/authSlice.js";
+import { createToast } from "../../../Utils/toastUtils.jsx";
+import { newOrChangedCredentials } from "../../../Validation/validation.js";
+import Check from "../../../Components/Check/Check.jsx";
+import TextInput from "../../../Components/Inputs/TextInput/index.jsx";
+import { PasswordEndAdornment } from "../../../Components/Inputs/TextInput/Adornments/index.jsx";
+import IconBox from "../../../Components/IconBox/index.jsx";
+import LockIcon from "../../../assets/icons/lock.svg?react";
+import Logo from "../../../assets/icons/checkmate-icon.svg?react";
+import Background from "../../../assets/Images/background-grid.svg?react";
 import "./index.css";
-import { useValidatePassword } from "./hooks/useValidatePassword";
+import { useValidatePassword } from "./hooks/useValidatePassword.jsx";
 import { Trans, useTranslation } from "react-i18next";
 
 const SetNewPassword = () => {

client/src/Pages/v1/Auth/components/AuthHeader.jsx

@@ -1,9 +1,9 @@
 // Components
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import Logo from "../../../assets/icons/checkmate-icon.svg?react";
-import LanguageSelector from "../../../Components/LanguageSelector";
-import ThemeSwitch from "../../../Components/ThemeSwitch";
+import Logo from "../../../../assets/icons/checkmate-icon.svg?react";
+import LanguageSelector from "../../../../Components/LanguageSelector.jsx";
+import ThemeSwitch from "../../../../Components/ThemeSwitch/index.jsx";
 
 // Utils
 import { useTheme } from "@mui/material/styles";

client/src/Pages/v1/Auth/components/AuthPageWrapper.jsx

@@ -1,10 +1,10 @@
-import Background from "../../../assets/Images/background-grid.svg?react";
+import Background from "../../../../assets/Images/background-grid.svg?react";
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-import AuthHeader from "../components/AuthHeader";
+import AuthHeader from "./AuthHeader.jsx";
 import { useTheme } from "@mui/material/styles";
-import Logo from "../../../assets/icons/checkmate-icon.svg?react";
+import Logo from "../../../../assets/icons/checkmate-icon.svg?react";
 import PropTypes from "prop-types";
 
 const AuthPageWrapper = ({ children, heading, welcome }) => {

client/src/Pages/v1/Auth/components/PasswordTooltip.jsx

@@ -1,4 +1,4 @@
-import Check from "../../../Components/Check/Check";
+import Check from "../../../../Components/Check/Check.jsx";
 import Stack from "@mui/material/Stack";
 import { Tooltip, useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";

client/src/Pages/v1/Auth/hooks/usePasswordFeedback.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { newOrChangedCredentials } from "../../../Validation/validation";
+import { newOrChangedCredentials } from "../../../../Validation/validation.js";
 
 const usePasswordFeedback = () => {
 	const [feedback, setFeedback] = useState({});

client/src/Pages/v1/Auth/hooks/useValidatePassword.jsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from "react";
-import { newOrChangedCredentials } from "../../../Validation/validation";
+import { newOrChangedCredentials } from "../../../../Validation/validation.js";
 
 const getFeedbackStatus = (form, errors, field, criteria) => {
 	const fieldErrors = errors[field];

client/src/Pages/v1/Incidents/Components/IncidentTable/index.jsx

@@ -1,26 +1,26 @@
 //Components
 import Stack from "@mui/material/Stack";
-import DataTable from "../../../../Components/Table";
+import DataTable from "../../../../../Components/Table/index.jsx";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableRow from "@mui/material/TableRow";
 import TableCell from "@mui/material/TableCell";
-import TableSkeleton from "../../../../Components/Table/skeleton";
-import Pagination from "../../../../Components/Table/TablePagination";
-import { StatusLabel } from "../../../../Components/Label";
-import { HttpStatusLabel } from "../../../../Components/HttpStatusLabel";
-import GenericFallback from "../../../../Components/GenericFallback";
-import NetworkError from "../../../../Components/GenericFallback/NetworkError";
+import TableSkeleton from "../../../../../Components/Table/skeleton.jsx";
+import Pagination from "../../../../../Components/Table/TablePagination/index.jsx";
+import { StatusLabel } from "../../../../../Components/Label/index.jsx";
+import { HttpStatusLabel } from "../../../../../Components/HttpStatusLabel/index.jsx";
+import GenericFallback from "../../../../../Components/GenericFallback/index.jsx";
+import NetworkError from "../../../../../Components/GenericFallback/NetworkError.jsx";
 
 //Utils
-import { formatDateWithTz } from "../../../../Utils/timeUtils";
+import { formatDateWithTz } from "../../../../../Utils/timeUtils.js";
 import { useSelector } from "react-redux";
 import { useState } from "react";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
-import { useFetchChecksTeam } from "../../../../Hooks/checkHooks";
-import { useFetchChecksByMonitor } from "../../../../Hooks/checkHooks";
-import { useResolveIncident } from "../../../../Hooks/checkHooks";
+import { useFetchChecksTeam } from "../../../../../Hooks/v1/checkHooks.js";
+import { useFetchChecksByMonitor } from "../../../../../Hooks/v1/checkHooks.js";
+import { useResolveIncident } from "../../../../../Hooks/v1/checkHooks.js";
 import { Button, Typography, useTheme } from "@mui/material";
 import { lighten } from "@mui/material/styles";
 

client/src/Pages/v1/Incidents/Components/OptionsHeader/index.jsx

@@ -1,11 +1,11 @@
 // Components
 import { Stack, Typography, Button, ButtonGroup } from "@mui/material";
-import Select from "../../../../Components/Inputs/Select";
+import Select from "../../../../../Components/Inputs/Select/index.jsx";
 import PropTypes from "prop-types";
 
 //Utils
 import { useTheme } from "@emotion/react";
-import SkeletonLayout from "./skeleton";
+import SkeletonLayout from "./skeleton.jsx";
 import { useTranslation } from "react-i18next";
 
 const OptionsHeader = ({

client/src/Pages/v1/Incidents/Components/StatusBoxes/StatusBox.jsx

@@ -1,11 +1,11 @@
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { Box, Stack, Typography } from "@mui/material";
-import Background from "../../../../assets/Images/background-grid.svg?react";
-import AlertIcon from "../../../../assets/icons/alert-icon.svg?react";
-import CheckIcon from "../../../../assets/icons/check-icon.svg?react";
-import CloseIcon from "../../../../assets/icons/close-icon.svg?react";
-import WarningIcon from "../../../../assets/icons/warning-icon.svg?react";
+import Background from "../../../../../assets/Images/background-grid.svg?react";
+import AlertIcon from "../../../../../assets/icons/alert-icon.svg?react";
+import CheckIcon from "../../../../../assets/icons/check-icon.svg?react";
+import CloseIcon from "../../../../../assets/icons/close-icon.svg?react";
+import WarningIcon from "../../../../../assets/icons/warning-icon.svg?react";
 
 const StatusBox = ({ title, value, status }) => {
 	const theme = useTheme();

client/src/Pages/v1/Incidents/Components/StatusBoxes/index.jsx

@@ -1,9 +1,9 @@
 import PropTypes from "prop-types";
 import { Stack } from "@mui/material";
-import StatusBox from "./StatusBox";
+import StatusBox from "./StatusBox.jsx";
 import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
-import SkeletonLayout from "./skeleton";
+import SkeletonLayout from "./skeleton.jsx";
 
 const StatusBoxes = ({ isLoading, summary }) => {
 	const theme = useTheme();

client/src/Pages/v1/Incidents/index.jsx

@@ -1,19 +1,19 @@
 // Components
 import { Stack } from "@mui/material";
-import Breadcrumbs from "../../Components/Breadcrumbs";
-import GenericFallback from "../../Components/GenericFallback";
-import IncidentTable from "./Components/IncidentTable";
-import OptionsHeader from "./Components/OptionsHeader";
-import StatusBoxes from "./Components/StatusBoxes";
+import Breadcrumbs from "../../../Components/Breadcrumbs/index.jsx";
+import GenericFallback from "../../../Components/GenericFallback/index.jsx";
+import IncidentTable from "./Components/IncidentTable/index.jsx";
+import OptionsHeader from "./Components/OptionsHeader/index.jsx";
+import StatusBoxes from "./Components/StatusBoxes/index.jsx";
 import { Box, Button } from "@mui/material";
 
 //Utils
 import { useTheme } from "@emotion/react";
-import { useFetchMonitorsByTeamId } from "../../Hooks/monitorHooks";
-import { useFetchChecksSummaryByTeamId } from "../../Hooks/checkHooks";
-import { useAcknowledgeChecks } from "../../Hooks/checkHooks";
+import { useFetchMonitorsByTeamId } from "../../../Hooks/v1/monitorHooks.js";
+import { useFetchChecksSummaryByTeamId } from "../../../Hooks/v1/checkHooks.js";
+import { useAcknowledgeChecks } from "../../../Hooks/v1/checkHooks.js";
 import { useState, useEffect } from "react";
-import NetworkError from "../../Components/GenericFallback/NetworkError";
+import NetworkError from "../../../Components/GenericFallback/NetworkError.jsx";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
 

client/src/Pages/v1/Infrastructure/Create/Components/CustomAlertsSection.jsx

@@ -1,7 +1,7 @@
-import ConfigBox from "../../../../Components/ConfigBox";
+import ConfigBox from "../../../../../Components/ConfigBox/index.jsx";
 import { Box, Stack, Typography } from "@mui/material";
-import { CustomThreshold } from "../Components/CustomThreshold";
-import { capitalizeFirstLetter } from "../../../../Utils/stringUtils";
+import { CustomThreshold } from "./CustomThreshold/index.jsx";
+import { capitalizeFirstLetter } from "../../../../../Utils/stringUtils.js";
 import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
 import PropTypes from "prop-types";

client/src/Pages/v1/Infrastructure/Create/Components/CustomThreshold/index.jsx

@@ -1,6 +1,6 @@
 import { Box, Stack, Typography } from "@mui/material";
-import TextInput from "../../../../../Components/Inputs/TextInput";
-import Checkbox from "../../../../../Components/Inputs/Checkbox";
+import TextInput from "../../../../../../Components/Inputs/TextInput/index.jsx";
+import Checkbox from "../../../../../../Components/Inputs/Checkbox/index.jsx";
 import { useTheme } from "@emotion/react";
 import PropTypes from "prop-types";
 

client/src/Pages/v1/Infrastructure/Create/Components/MonitorActionButtons.jsx

@@ -4,7 +4,7 @@ import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
 import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
 import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded";
-import Dialog from "../../../../Components/Dialog";
+import Dialog from "../../../../../Components/Dialog/index.jsx";
 import PropTypes from "prop-types";
 
 const MonitorActionButtons = ({ monitor, isBusy, handlePause, handleRemove }) => {

client/src/Pages/v1/Infrastructure/Create/Components/MonitorStatusHeader.jsx

@@ -1,8 +1,8 @@
 import { Box, Stack, Tooltip, Typography } from "@mui/material";
-import { useMonitorUtils } from "../../../../Hooks/useMonitorUtils";
+import { useMonitorUtils } from "../../../../../Hooks/v1/useMonitorUtils.js";
 import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
-import PulseDot from "../../../../Components/Animated/PulseDot";
+import PulseDot from "../../../../../Components/Animated/PulseDot.jsx";
 import PropTypes from "prop-types";
 const MonitorStatusHeader = ({ monitor, infrastructureMonitor }) => {
 	const theme = useTheme();

client/src/Pages/v1/Infrastructure/Create/hooks/useInfrastructureSubmit.jsx

@@ -1,4 +1,4 @@
-import { useCreateMonitor, useUpdateMonitor } from "../../../../Hooks/monitorHooks";
+import { useCreateMonitor, useUpdateMonitor } from "../../../../../Hooks/v1/monitorHooks.js";
 const useInfrastructureSubmit = () => {
 	const [createMonitor, isCreating] = useCreateMonitor();
 	const [updateMonitor, isUpdating] = useUpdateMonitor();

client/src/Pages/v1/Infrastructure/Create/hooks/useValidateInfrastructureForm.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
-import { infrastructureMonitorValidation } from "../../../../Validation/validation";
-import { createToast } from "../../../../Utils/toastUtils";
+import { infrastructureMonitorValidation } from "../../../../../Validation/validation.js";
+import { createToast } from "../../../../../Utils/toastUtils.jsx";
 const useValidateInfrastructureForm = () => {
 	const [errors, setErrors] = useState({});
 

client/src/Pages/v1/Infrastructure/Create/index.jsx

@@ -1,18 +1,18 @@
 //Components
-import Breadcrumbs from "../../../Components/Breadcrumbs";
-import ConfigBox from "../../../Components/ConfigBox";
-import FieldWrapper from "../../../Components/Inputs/FieldWrapper";
-import Link from "../../../Components/Link";
-import Select from "../../../Components/Inputs/Select";
-import TextInput from "../../../Components/Inputs/TextInput";
+import Breadcrumbs from "../../../../Components/Breadcrumbs/index.jsx";
+import ConfigBox from "../../../../Components/ConfigBox/index.jsx";
+import FieldWrapper from "../../../../Components/Inputs/FieldWrapper/index.jsx";
+import Link from "../../../../Components/Link/index.jsx";
+import Select from "../../../../Components/Inputs/Select/index.jsx";
+import TextInput from "../../../../Components/Inputs/TextInput/index.jsx";
 import { Box, Stack, Typography, Button, ButtonGroup } from "@mui/material";
-import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments";
-import MonitorStatusHeader from "./Components/MonitorStatusHeader";
-import MonitorActionButtons from "./Components/MonitorActionButtons";
-import CustomAlertsSection from "./Components/CustomAlertsSection";
+import { HttpAdornment } from "../../../../Components/Inputs/TextInput/Adornments/index.jsx";
+import MonitorStatusHeader from "./Components/MonitorStatusHeader.jsx";
+import MonitorActionButtons from "./Components/MonitorActionButtons.jsx";
+import CustomAlertsSection from "./Components/CustomAlertsSection.jsx";
 // Utils
-import NotificationsConfig from "../../../Components/NotificationConfig";
-import { useGetNotificationsByTeamId } from "../../../Hooks/useNotifications";
+import NotificationsConfig from "../../../../Components/NotificationConfig/index.jsx";
+import { useGetNotificationsByTeamId } from "../../../../Hooks/v1/useNotifications.js";
 import { useParams } from "react-router-dom";
 import { useState, useEffect } from "react";
 import { useTheme } from "@emotion/react";
@@ -22,10 +22,10 @@ import {
 	useFetchGlobalSettings,
 	useFetchHardwareMonitorById,
 	usePauseMonitor,
-} from "../../../Hooks/monitorHooks";
-import useInfrastructureMonitorForm from "./hooks/useInfrastructureMonitorForm";
-import useValidateInfrastructureForm from "./hooks/useValidateInfrastructureForm";
-import useInfrastructureSubmit from "./hooks/useInfrastructureSubmit";
+} from "../../../../Hooks/v1/monitorHooks.js";
+import useInfrastructureMonitorForm from "./hooks/useInfrastructureMonitorForm.jsx";
+import useValidateInfrastructureForm from "./hooks/useValidateInfrastructureForm.jsx";
+import useInfrastructureSubmit from "./hooks/useInfrastructureSubmit.jsx";
 
 const CreateInfrastructureMonitor = () => {
 	const { monitorId } = useParams();

client/src/Pages/v1/Infrastructure/Details/Components/AreaChartBoxes/InfraAreaChart.jsx

@@ -1,10 +1,10 @@
 // Components
 import { Typography } from "@mui/material";
-import BaseContainer from "../BaseContainer";
-import AreaChart from "../../../../../Components/Charts/AreaChart";
+import BaseContainer from "../BaseContainer/index.jsx";
+import AreaChart from "../../../../../../Components/Charts/AreaChart/index.jsx";
 // Utils
 import { useTheme } from "@emotion/react";
-import { useHardwareUtils } from "../../Hooks/useHardwareUtils";
+import { useHardwareUtils } from "../../Hooks/useHardwareUtils.jsx";
 const InfraAreaChart = ({ config }) => {
 	const theme = useTheme();
 	const { getDimensions } = useHardwareUtils();

client/src/Pages/v1/Infrastructure/Details/Components/AreaChartBoxes/index.jsx

@@ -1,7 +1,7 @@
 // Components
 import { Stack } from "@mui/material";
-import InfraAreaChart from "./InfraAreaChart";
-import SkeletonLayout from "./skeleton";
+import InfraAreaChart from "./InfraAreaChart.jsx";
+import SkeletonLayout from "./skeleton.jsx";
 
 // Utils
 import {
@@ -9,9 +9,9 @@ import {
 	TzTick,
 	InfrastructureTooltip,
 	TemperatureTooltip,
-} from "../../../../../Components/Charts/Utils/chartUtils";
+} from "../../../../../../Components/Charts/Utils/chartUtils.jsx";
 import { useTheme } from "@emotion/react";
-import { useHardwareUtils } from "../../Hooks/useHardwareUtils";
+import { useHardwareUtils } from "../../Hooks/useHardwareUtils.jsx";
 import { useTranslation } from "react-i18next";
 const AreaChartBoxes = ({ shouldRender, monitor, dateRange }) => {
 	const theme = useTheme();

client/src/Pages/v1/Infrastructure/Details/Components/BaseContainer/index.jsx

@@ -11,7 +11,7 @@ import { Box } from "@mui/material";
 
 // Utils
 import { useTheme } from "@emotion/react";
-import { useHardwareUtils } from "../../Hooks/useHardwareUtils";
+import { useHardwareUtils } from "../../Hooks/useHardwareUtils.jsx";
 import PropTypes from "prop-types";
 
 const BaseContainer = ({ children, sx = {} }) => {

client/src/Pages/v1/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx

@@ -1,6 +1,6 @@
 // Components
-import CustomGauge from "../../../../../Components/Charts/CustomGauge";
-import BaseContainer from "../BaseContainer";
+import CustomGauge from "../../../../../../Components/Charts/CustomGauge/index.jsx";
+import BaseContainer from "../BaseContainer/index.jsx";
 import { Stack, Typography, Box } from "@mui/material";
 // Utils
 import { useTheme } from "@emotion/react";

client/src/Pages/v1/Infrastructure/Details/Components/GaugeBoxes/index.jsx

@@ -1,11 +1,11 @@
 // Components
 import { Stack } from "@mui/material";
-import Gauge from "./Gauge";
-import SkeletonLayout from "./skeleton";
+import Gauge from "./Gauge.jsx";
+import SkeletonLayout from "./skeleton.jsx";
 import PropTypes from "prop-types";
 
 // Utils
-import { useHardwareUtils } from "../../Hooks/useHardwareUtils";
+import { useHardwareUtils } from "../../Hooks/useHardwareUtils.jsx";
 import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
 

client/src/Pages/v1/Infrastructure/Details/Components/NetworkStats/NetworkCharts.jsx

@@ -1,15 +1,15 @@
 import PropTypes from "prop-types";
 import { Stack, Typography } from "@mui/material";
-import InfraAreaChart from "../../../../../Pages/Infrastructure/Details/Components/AreaChartBoxes/InfraAreaChart";
+import InfraAreaChart from "../AreaChartBoxes/InfraAreaChart.jsx";
 
 import {
 	TzTick,
 	InfrastructureTooltip,
 	NetworkTick,
-} from "../../../../../Components/Charts/Utils/chartUtils";
+} from "../../../../../../Components/Charts/Utils/chartUtils.jsx";
 import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
-import { useHardwareUtils } from "../../Hooks/useHardwareUtils";
+import { useHardwareUtils } from "../../Hooks/useHardwareUtils.jsx";
 
 const NetworkCharts = ({ ethernetData, dateRange }) => {
 	const theme = useTheme();

client/src/Pages/v1/Infrastructure/Details/Components/NetworkStats/NetworkStatBoxes.jsx

@@ -1,9 +1,9 @@
 import PropTypes from "prop-types";
-import StatusBoxes from "../../../../../Components/StatusBoxes";
-import StatBox from "../../../../../Components/StatBox";
+import StatusBoxes from "../../../../../../Components/StatusBoxes/index.jsx";
+import StatBox from "../../../../../../Components/StatBox/index.jsx";
 import { Typography } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import { useHardwareUtils } from "../../Hooks/useHardwareUtils";
+import { useHardwareUtils } from "../../Hooks/useHardwareUtils.jsx";
 
 function formatNumber(num) {
 	return num != null ? num.toLocaleString() : "0";

client/src/Pages/v1/Infrastructure/Details/Components/NetworkStats/index.jsx

@@ -3,10 +3,10 @@ import { useState, useEffect } from "react";
 import { Box } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@emotion/react";
-import Select from "../../../../../Components/Inputs/Select";
-import NetworkStatBoxes from "./NetworkStatBoxes";
-import NetworkCharts from "./NetworkCharts";
-import MonitorTimeFrameHeader from "../../../../../Components/MonitorTimeFrameHeader";
+import Select from "../../../../../../Components/Inputs/Select/index.jsx";
+import NetworkStatBoxes from "./NetworkStatBoxes.jsx";
+import NetworkCharts from "./NetworkCharts.jsx";
+import MonitorTimeFrameHeader from "../../../../../../Components/MonitorTimeFrameHeader/index.jsx";
 
 const getAvailableInterfaces = (net) => {
 	return (net || []).map((iface) => iface.name).filter(Boolean);

client/src/Pages/v1/Infrastructure/Details/Components/StatusBoxes/index.jsx

@@ -1,11 +1,11 @@
 // Components
 import { Stack, Typography } from "@mui/material";
-import StatusBoxes from "../../../../../Components/StatusBoxes";
-import StatBox from "../../../../../Components/StatBox";
+import StatusBoxes from "../../../../../../Components/StatusBoxes/index.jsx";
+import StatBox from "../../../../../../Components/StatBox/index.jsx";
 
 //Utils
-import { useMonitorUtils } from "../../../../../Hooks/useMonitorUtils";
-import { useHardwareUtils } from "../../Hooks/useHardwareUtils";
+import { useMonitorUtils } from "../../../../../../Hooks/v1/useMonitorUtils.js";
+import { useHardwareUtils } from "../../Hooks/useHardwareUtils.jsx";
 import { useTranslation } from "react-i18next";
 
 const InfraStatBoxes = ({ shouldRender, monitor }) => {

client/src/Pages/v1/Infrastructure/Details/index.jsx

@@ -1,20 +1,20 @@
 // Components
 import { Stack, Typography, Tab } from "@mui/material";
-import Breadcrumbs from "../../../Components/Breadcrumbs";
-import MonitorDetailsControlHeader from "../../../Components/MonitorDetailsControlHeader";
-import MonitorTimeFrameHeader from "../../../Components/MonitorTimeFrameHeader";
-import StatusBoxes from "./Components/StatusBoxes";
-import GaugeBoxes from "./Components/GaugeBoxes";
-import AreaChartBoxes from "./Components/AreaChartBoxes";
-import GenericFallback from "../../../Components/GenericFallback";
-import NetworkStats from "./Components/NetworkStats";
-import CustomTabList from "../../../Components/Tab";
+import Breadcrumbs from "../../../../Components/Breadcrumbs/index.jsx";
+import MonitorDetailsControlHeader from "../../../../Components/MonitorDetailsControlHeader/index.jsx";
+import MonitorTimeFrameHeader from "../../../../Components/MonitorTimeFrameHeader/index.jsx";
+import StatusBoxes from "./Components/StatusBoxes/index.jsx";
+import GaugeBoxes from "./Components/GaugeBoxes/index.jsx";
+import AreaChartBoxes from "./Components/AreaChartBoxes/index.jsx";
+import GenericFallback from "../../../../Components/GenericFallback/index.jsx";
+import NetworkStats from "./Components/NetworkStats/index.jsx";
+import CustomTabList from "../../../../Components/Tab/index.jsx";
 import TabContext from "@mui/lab/TabContext";
 
 // Utils
 import { useTheme } from "@emotion/react";
-import { useIsAdmin } from "../../../Hooks/useIsAdmin";
-import { useFetchHardwareMonitorById } from "../../../Hooks/monitorHooks";
+import { useIsAdmin } from "../../../../Hooks/v1/useIsAdmin.js";
+import { useFetchHardwareMonitorById } from "../../../../Hooks/v1/monitorHooks.js";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";

client/src/Pages/v1/Infrastructure/Monitors/Components/Filters/index.jsx

@@ -1,6 +1,6 @@
 import { useTheme } from "@emotion/react";
 import PropTypes from "prop-types";
-import FilterHeader from "../../../../../Components/FilterHeader";
+import FilterHeader from "../../../../../../Components/FilterHeader/index.jsx";
 import { useMemo } from "react";
 import { Box, Button } from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";

client/src/Pages/v1/Infrastructure/Monitors/Components/MonitorsTable/index.jsx

@@ -1,18 +1,18 @@
 // Components
 import { Box } from "@mui/material";
-import DataTable from "../../../../../Components/Table";
-import Host from "../../../../../Components/Host";
-import { StatusLabel } from "../../../../../Components/Label";
+import DataTable from "../../../../../../Components/Table/index.jsx";
+import Host from "../../../../../../Components/Host/index.jsx";
+import { StatusLabel } from "../../../../../../Components/Label/index.jsx";
 import { Stack } from "@mui/material";
-import { InfrastructureMenu } from "../MonitorsTableMenu";
-import LoadingSpinner from "../../../../Uptime/Monitors/Components/LoadingSpinner";
+import { InfrastructureMenu } from "../MonitorsTableMenu/index.jsx";
+import LoadingSpinner from "../../../../Uptime/Monitors/Components/LoadingSpinner/index.jsx";
 // Assets
-import CPUChipIcon from "../../../../../assets/icons/cpu-chip.svg?react";
-import CustomGauge from "../../../../../Components/Charts/CustomGauge";
+import CPUChipIcon from "../../../../../../assets/icons/cpu-chip.svg?react";
+import CustomGauge from "../../../../../../Components/Charts/CustomGauge/index.jsx";
 
 // Utils
 import { useTheme } from "@emotion/react";
-import { useMonitorUtils } from "../../../../../Hooks/useMonitorUtils";
+import { useMonitorUtils } from "../../../../../../Hooks/v1/useMonitorUtils.js";
 import { useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";

client/src/Pages/v1/Infrastructure/Monitors/Components/MonitorsTableMenu/index.jsx

@@ -3,13 +3,13 @@
 import { useRef, useState } from "react";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
-import { createToast } from "../../../../../Utils/toastUtils";
+import { createToast } from "../../../../../../Utils/toastUtils.jsx";
 import { IconButton, Menu, MenuItem } from "@mui/material";
-import Settings from "../../../../../assets/icons/settings-bold.svg?react";
+import Settings from "../../../../../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
-import Dialog from "../../../../../Components/Dialog";
-import { networkService } from "../../../../../Utils/NetworkService.js";
-import { usePauseMonitor } from "../../../../../Hooks/monitorHooks";
+import Dialog from "../../../../../../Components/Dialog/index.jsx";
+import { networkService } from "../../../../../../Utils/NetworkService.js";
+import { usePauseMonitor } from "../../../../../../Hooks/v1/monitorHooks.js";
 import { useTranslation } from "react-i18next";
 
 /**

client/src/Pages/v1/Infrastructure/Monitors/index.jsx

@@ -1,21 +1,21 @@
 // Components
 import { Stack } from "@mui/material";
-import Breadcrumbs from "../../../Components/Breadcrumbs";
-import MonitorCountHeader from "../../../Components/MonitorCountHeader";
-import MonitorCreateHeader from "../../../Components/MonitorCreateHeader";
-import MonitorsTable from "./Components/MonitorsTable";
-import Pagination from "../../..//Components/Table/TablePagination";
-import PageStateWrapper from "../../../Components/PageStateWrapper";
-import Filter from "./Components/Filters";
-import SearchComponent from "../../Uptime/Monitors/Components/SearchComponent";
+import Breadcrumbs from "../../../../Components/Breadcrumbs/index.jsx";
+import MonitorCountHeader from "../../../../Components/MonitorCountHeader/index.jsx";
+import MonitorCreateHeader from "../../../../Components/MonitorCreateHeader/index.jsx";
+import MonitorsTable from "./Components/MonitorsTable/index.jsx";
+import Pagination from "../../../../Components/Table/TablePagination/index.jsx";
+import PageStateWrapper from "../../../../Components/PageStateWrapper/index.jsx";
+import Filter from "./Components/Filters/index.jsx";
+import SearchComponent from "../../Uptime/Monitors/Components/SearchComponent/index.jsx";
 // Utils
 import { useTheme } from "@emotion/react";
 import { useEffect, useState } from "react";
-import { useIsAdmin } from "../../../Hooks/useIsAdmin";
+import { useIsAdmin } from "../../../../Hooks/v1/useIsAdmin.js";
 import { useTranslation } from "react-i18next";
-import { useFetchMonitorsByTeamId } from "../../../Hooks/monitorHooks";
+import { useFetchMonitorsByTeamId } from "../../../../Hooks/v1/monitorHooks.js";
 import { useDispatch, useSelector } from "react-redux";
-import { setRowsPerPage } from "../../../Features/UI/uiSlice";
+import { setRowsPerPage } from "../../../../Features/UI/uiSlice.js";
 // Constants
 const TYPES = ["hardware"];
 const BREADCRUMBS = [{ name: `infrastructure`, path: "/infrastructure" }];

client/src/Pages/v1/Integrations/index.jsx

@@ -1,9 +1,9 @@
 import PropTypes from "prop-types";
 import { Stack, Typography, Grid, Button } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import Discord from "../../assets/icons/discord-icon.svg?react";
-import Slack from "../../assets/icons/slack-icon.svg?react";
-import Zapier from "../../assets/icons/zapier-icon.svg?react";
+import Discord from "../../../assets/icons/discord-icon.svg?react";
+import Slack from "../../../assets/icons/slack-icon.svg?react";
+import Zapier from "../../../assets/icons/zapier-icon.svg?react";
 import { useTranslation } from "react-i18next";
 
 import "./index.css";

client/src/Pages/v1/Logs/Diagnostics/components/gauges/index.jsx

@@ -1,11 +1,11 @@
 import Stack from "@mui/material/Stack";
-import CustomGauge from "../../../../../Components/Charts/CustomGauge";
+import CustomGauge from "../../../../../../Components/Charts/CustomGauge/index.jsx";
 import Typography from "@mui/material/Typography";
 
 // Utils
 import { useTheme } from "@emotion/react";
 import PropTypes from "prop-types";
-import { getPercentage, formatBytes } from "../../utils/utils";
+import { getPercentage, formatBytes } from "../../utils/utils.js";
 import { useTranslation } from "react-i18next";
 import { Box } from "@mui/material";
 

client/src/Pages/v1/Logs/Diagnostics/components/stats/index.jsx

@@ -7,8 +7,8 @@ import CircularProgress from "@mui/material/CircularProgress";
 import { useTheme } from "@emotion/react";
 import PropTypes from "prop-types";
 
-import { getHumanReadableDuration } from "../../../../../Utils/timeUtils";
-import { formatBytes } from "../../utils/utils";
+import { getHumanReadableDuration } from "../../../../../../Utils/timeUtils.js";
+import { formatBytes } from "../../utils/utils.js";
 import { useTranslation } from "react-i18next";
 
 const StatsCard = ({ title, value, unit = "", isLoading }) => {

client/src/Pages/v1/Logs/Diagnostics/index.jsx

@@ -1,14 +1,14 @@
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
-import Gauges from "./components/gauges";
+import Gauges from "./components/gauges/index.jsx";
 import Button from "@mui/material/Button";
-import StatBox from "../../../Components/StatBox";
-import StatusBoxes from "../../../Components/StatusBoxes";
+import StatBox from "../../../../Components/StatBox/index.jsx";
+import StatusBoxes from "../../../../Components/StatusBoxes/index.jsx";
 import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
-import { useFetchDiagnostics } from "../../../Hooks/logHooks";
-import { getHumanReadableDuration } from "../../../Utils/timeUtils";
-import { formatBytes, getPercentage } from "./utils/utils";
+import { useFetchDiagnostics } from "../../../../Hooks/v1/logHooks.js";
+import { getHumanReadableDuration } from "../../../../Utils/timeUtils.js";
+import { formatBytes, getPercentage } from "./utils/utils.js";
 
 const Diagnostics = () => {
 	// Local state

client/src/Pages/v1/Logs/Logs/index.jsx

@@ -1,10 +1,10 @@
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
-import Select from "../../../Components/Inputs/Select";
+import Select from "../../../../Components/Inputs/Select/index.jsx";
 import Typography from "@mui/material/Typography";
 import Divider from "@mui/material/Divider";
 
-import { useFetchLogs } from "../../../Hooks/logHooks";
+import { useFetchLogs } from "../../../../Hooks/v1/logHooks.js";
 import { useTheme } from "@emotion/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/Pages/v1/Logs/Queue/components/FailedJobTable/index.jsx

@@ -1,10 +1,10 @@
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import DataTable from "../../../../../Components/Table";
+import DataTable from "../../../../../../Components/Table/index.jsx";
 
 import { useNavigate } from "react-router-dom";
 import { useTheme } from "@emotion/react";
-import { TypeToPathMap } from "../../../../../Utils/monitorUtils";
+import { TypeToPathMap } from "../../../../../../Utils/monitorUtils.js";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 

client/src/Pages/v1/Logs/Queue/components/JobTable/index.jsx

@@ -1,13 +1,13 @@
 import Stack from "@mui/material/Stack";
-import DataTable from "../../../../../Components/Table";
+import DataTable from "../../../../../../Components/Table/index.jsx";
 import Typography from "@mui/material/Typography";
 // Utils
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
-import { TypeToPathMap } from "../../../../../Utils/monitorUtils";
+import { TypeToPathMap } from "../../../../../../Utils/monitorUtils.js";
 import { useTranslation } from "react-i18next";
-import { createHeaderFactory } from "../../../../../Components/Table/TableUtils";
+import { createHeaderFactory } from "../../../../../../Components/Table/TableUtils.js";
 
 const JobTable = ({ jobs = [] }) => {
 	const theme = useTheme();

client/src/Pages/v1/Logs/Queue/components/Metrics/index.jsx

@@ -1,6 +1,6 @@
 import Stack from "@mui/material/Stack";
-import StatBox from "../../../../../Components/StatBox";
-import StatusBoxes from "../../../../../Components/StatusBoxes";
+import StatBox from "../../../../../../Components/StatBox/index.jsx";
+import StatusBoxes from "../../../../../../Components/StatusBoxes/index.jsx";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@emotion/react";
 

client/src/Pages/v1/Logs/Queue/components/MetricsTable/index.jsx

@@ -1,6 +1,6 @@
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import DataTable from "../../../../../Components/Table";
+import DataTable from "../../../../../../Components/Table/index.jsx";
 
 // Utils
 import { useTranslation } from "react-i18next";

client/src/Pages/v1/Logs/Queue/index.jsx

@@ -1,8 +1,8 @@
 // Components
 import Stack from "@mui/material/Stack";
-import JobTable from "./components/JobTable";
-import Metrics from "./components/Metrics";
-import FailedJobTable from "./components/FailedJobTable";
+import JobTable from "./components/JobTable/index.jsx";
+import Metrics from "./components/Metrics/index.jsx";
+import FailedJobTable from "./components/FailedJobTable/index.jsx";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
@@ -10,7 +10,7 @@ import Divider from "@mui/material/Divider";
 
 // Utils
 import { useState } from "react";
-import { useFetchQueueData, useFlushQueue } from "../../../Hooks/logHooks";
+import { useFetchQueueData, useFlushQueue } from "../../../../Hooks/v1/logHooks.js";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@emotion/react";
 

client/src/Pages/v1/Logs/index.jsx

@@ -1,10 +1,10 @@
 import Stack from "@mui/material/Stack";
-import Breadcrumbs from "../../Components/Breadcrumbs";
+import Breadcrumbs from "../../../Components/Breadcrumbs/index.jsx";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
-import Queue from "./Queue";
-import LogsComponent from "./Logs";
-import Diagnostics from "./Diagnostics";
+import Queue from "./Queue/index.jsx";
+import LogsComponent from "./Logs/index.jsx";
+import Diagnostics from "./Diagnostics/index.jsx";
 
 import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";

client/src/Pages/v1/Maintenance/CreateMaintenance/Components/ConfigSelect/index.jsx

@@ -1,4 +1,4 @@
-import Select from "../../../../../Components/Inputs/Select";
+import Select from "../../../../../../Components/Inputs/Select/index.jsx";
 import PropTypes from "prop-types";
 const ConfigSelect = ({ configSelection, valueSelect, onChange, ...props }) => {
 	const getValueById = (config, id) => {

client/src/Pages/v1/Maintenance/CreateMaintenance/Components/MonitorsConfig/index.jsx

@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
-import Search from "../../../../../Components/Inputs/Search";
+import Search from "../../../../../../Components/Inputs/Search/index.jsx";
 import { useState } from "react";
-import ConfigRow from "../../../../../Components/ConfigRow";
+import ConfigRow from "../../../../../../Components/ConfigRow/index.jsx";
 
 /**
  * MonitorsConfig is a component that allows users to select and apply a maintenance window to a list of monitors.

client/src/Pages/v1/Maintenance/CreateMaintenance/hooks/useMaintenanceActions.jsx

@@ -1,4 +1,4 @@
-import { networkService } from "../../../../main";
+import { networkService } from "../../../../../main.jsx";
 import dayjs from "dayjs";
 import {
 	MS_PER_SECOND,
@@ -6,7 +6,7 @@ import {
 	MS_PER_HOUR,
 	MS_PER_DAY,
 	MS_PER_WEEK,
-} from "../../../../Utils/timeUtils";
+} from "../../../../../Utils/timeUtils.js";
 
 const useMaintenanceActions = () => {
 	const MS_LOOKUP = {

client/src/Pages/v1/Maintenance/CreateMaintenance/hooks/useMaintenanceData.jsx

@@ -1,4 +1,4 @@
-import { networkService } from "../../../../main";
+import { networkService } from "../../../../../main.jsx";
 import dayjs from "dayjs";
 import {
 	MS_PER_SECOND,
@@ -6,7 +6,7 @@ import {
 	MS_PER_HOUR,
 	MS_PER_DAY,
 	MS_PER_WEEK,
-} from "../../../../Utils/timeUtils";
+} from "../../../../../Utils/timeUtils.js";
 const useMaintenanceData = () => {
 	const REVERSE_REPEAT_LOOKUP = {
 		0: "none",

client/src/Pages/v1/Maintenance/CreateMaintenance/index.jsx

@@ -2,27 +2,27 @@ import { Box, Button, Stack, Typography } from "@mui/material";
 import { useSelector } from "react-redux";
 import { useTheme } from "@emotion/react";
 import { useEffect, useState } from "react";
-import ConfigBox from "../../../Components/ConfigBox";
+import ConfigBox from "../../../../Components/ConfigBox/index.jsx";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
-import { maintenanceWindowValidation } from "../../../Validation/validation";
-import { createToast } from "../../../Utils/toastUtils";
-import MonitorList from "./Components/MonitorList";
-import ConfigSelect from "./Components/ConfigSelect";
-import useMaintenanceData from "./hooks/useMaintenanceData";
-import useMaintenanceActions from "./hooks/useMaintenanceActions";
+import { maintenanceWindowValidation } from "../../../../Validation/validation.js";
+import { createToast } from "../../../../Utils/toastUtils.jsx";
+import MonitorList from "./Components/MonitorList/index.jsx";
+import ConfigSelect from "./Components/ConfigSelect/index.jsx";
+import useMaintenanceData from "./hooks/useMaintenanceData.jsx";
+import useMaintenanceActions from "./hooks/useMaintenanceActions.jsx";
 
-import TextInput from "../../../Components/Inputs/TextInput";
-import Breadcrumbs from "../../../Components/Breadcrumbs";
-import CalendarIcon from "../../../assets/icons/calendar.svg?react";
+import TextInput from "../../../../Components/Inputs/TextInput/index.jsx";
+import Breadcrumbs from "../../../../Components/Breadcrumbs/index.jsx";
+import CalendarIcon from "../../../../assets/icons/calendar.svg?react";
 import "./index.css";
-import Search from "../../../Components/Inputs/Search";
-import { logger } from "../../../Utils/Logger";
+import Search from "../../../../Components/Inputs/Search/index.jsx";
+import { logger } from "../../../../Utils/Logger.js";
 
 import { useNavigate, useParams } from "react-router-dom";
-import { buildErrors, hasValidationErrors } from "../../../Validation/error";
+import { buildErrors, hasValidationErrors } from "../../../../Validation/error.js";
 import { useTranslation } from "react-i18next";
 import dayjs from "dayjs";
 

client/src/Pages/v1/Maintenance/MaintenanceTable/ActionsMenu/index.jsx

@@ -3,14 +3,14 @@ import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { IconButton, Menu, MenuItem } from "@mui/material";
-import { logger } from "../../../../Utils/Logger";
-import Settings from "../../../../assets/icons/settings-bold.svg?react";
+import { logger } from "../../../../../Utils/Logger.js";
+import Settings from "../../../../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
-import { networkService } from "../../../../main";
-import { createToast } from "../../../../Utils/toastUtils";
+import { networkService } from "../../../../../main.jsx";
+import { createToast } from "../../../../../Utils/toastUtils.jsx";
 import { useTranslation } from "react-i18next";
 
-import Dialog from "../../../../Components/Dialog";
+import Dialog from "../../../../../Components/Dialog/index.jsx";
 
 const ActionsMenu = ({ /* isAdmin, */ maintenanceWindow, updateCallback }) => {
 	maintenanceWindow;

client/src/Pages/v1/Maintenance/MaintenanceTable/index.jsx

@@ -1,15 +1,15 @@
 import PropTypes from "prop-types";
 import { Box } from "@mui/material";
-import DataTable from "../../../Components/Table";
-import Pagination from "../../../Components/Table/TablePagination";
+import DataTable from "../../../../Components/Table/index.jsx";
+import Pagination from "../../../../Components/Table/TablePagination/index.jsx";
 import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
 import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded";
-import ActionsMenu from "./ActionsMenu";
+import ActionsMenu from "./ActionsMenu/index.jsx";
 import { memo } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { formatDurationRounded } from "../../../Utils/timeUtils";
-import { StatusLabel } from "../../../Components/Label";
-import { setRowsPerPage } from "../../../Features/UI/uiSlice";
+import { formatDurationRounded } from "../../../../Utils/timeUtils.js";
+import { StatusLabel } from "../../../../Components/Label/index.jsx";
+import { setRowsPerPage } from "../../../../Features/UI/uiSlice.js";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";