diff --git a/client/src/App.jsx b/client/src/App.jsx
index b599890f1..04f0d5b65 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -10,7 +10,7 @@ import { logger } from "./Utils/Logger"; // Import the logger
import { networkService } from "./main";
import { Routes } from "./Routes";
import WalletProvider from "./Components/WalletProvider";
-import AppLayout from "./Components/Layouts/AppLayout";
+import AppLayout from "@/Components/v1/Layouts/AppLayout";
function App() {
const mode = useSelector((state) => state.ui.mode);
diff --git a/client/src/Components/ActionsMenu/index.jsx b/client/src/Components/v1/ActionsMenu/index.jsx
similarity index 94%
rename from client/src/Components/ActionsMenu/index.jsx
rename to client/src/Components/v1/ActionsMenu/index.jsx
index 78d86e1b2..229c7c875 100644
--- a/client/src/Components/ActionsMenu/index.jsx
+++ b/client/src/Components/v1/ActionsMenu/index.jsx
@@ -2,17 +2,17 @@
import IconButton from "@mui/material/IconButton";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
-import Settings from "../../assets/icons/settings-bold.svg?react";
-import Dialog from "../../Components/Dialog";
+import Settings from "../../../assets/icons/settings-bold.svg?react";
+import Dialog from "../Dialog/index.jsx";
// Utils
import { 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 PropTypes from "prop-types";
-import { usePauseMonitor, useDeleteMonitor } from "../../Hooks/v1/monitorHooks.js";
+import { usePauseMonitor, useDeleteMonitor } from "../../../Hooks/v1/monitorHooks.js";
const ActionsMenu = ({
monitor,
diff --git a/client/src/Components/Alert/index.css b/client/src/Components/v1/Alert/index.css
similarity index 100%
rename from client/src/Components/Alert/index.css
rename to client/src/Components/v1/Alert/index.css
diff --git a/client/src/Components/Alert/index.jsx b/client/src/Components/v1/Alert/index.jsx
similarity index 100%
rename from client/src/Components/Alert/index.jsx
rename to client/src/Components/v1/Alert/index.jsx
diff --git a/client/src/Components/Animated/PulseDot.jsx b/client/src/Components/v1/Animated/PulseDot.jsx
similarity index 100%
rename from client/src/Components/Animated/PulseDot.jsx
rename to client/src/Components/v1/Animated/PulseDot.jsx
diff --git a/client/src/Components/ArrowLeft/index.jsx b/client/src/Components/v1/ArrowLeft/index.jsx
similarity index 70%
rename from client/src/Components/ArrowLeft/index.jsx
rename to client/src/Components/v1/ArrowLeft/index.jsx
index 7909441f3..a327d6bb7 100644
--- a/client/src/Components/ArrowLeft/index.jsx
+++ b/client/src/Components/v1/ArrowLeft/index.jsx
@@ -1,6 +1,6 @@
-import LeftArrow from "../../assets/icons/left-arrow.svg?react";
-import LeftArrowDouble from "../../assets/icons/left-arrow-double.svg?react";
-import LeftArrowLong from "../../assets/icons/left-arrow-long.svg?react";
+import LeftArrow from "../../../assets/icons/left-arrow.svg?react";
+import LeftArrowDouble from "../../../assets/icons/left-arrow-double.svg?react";
+import LeftArrowLong from "../../../assets/icons/left-arrow-long.svg?react";
import PropTypes from "prop-types";
const ArrowLeft = ({ type, color = "#667085", ...props }) => {
diff --git a/client/src/Components/ArrowRight/index.jsx b/client/src/Components/v1/ArrowRight/index.jsx
similarity index 73%
rename from client/src/Components/ArrowRight/index.jsx
rename to client/src/Components/v1/ArrowRight/index.jsx
index 335bc19f2..08a2639b0 100644
--- a/client/src/Components/ArrowRight/index.jsx
+++ b/client/src/Components/v1/ArrowRight/index.jsx
@@ -1,5 +1,5 @@
-import RightArrow from "../../assets/icons/right-arrow.svg?react";
-import RightArrowDouble from "../../assets/icons/right-arrow-double.svg?react";
+import RightArrow from "../../../assets/icons/right-arrow.svg?react";
+import RightArrowDouble from "../../../assets/icons/right-arrow-double.svg?react";
import PropTypes from "prop-types";
const ArrowRight = ({ type, color = "#667085", ...props }) => {
diff --git a/client/src/Components/Avatar/index.css b/client/src/Components/v1/Avatar/index.css
similarity index 100%
rename from client/src/Components/Avatar/index.css
rename to client/src/Components/v1/Avatar/index.css
diff --git a/client/src/Components/Avatar/index.jsx b/client/src/Components/v1/Avatar/index.jsx
similarity index 100%
rename from client/src/Components/Avatar/index.jsx
rename to client/src/Components/v1/Avatar/index.jsx
diff --git a/client/src/Components/Breadcrumbs/index.css b/client/src/Components/v1/Breadcrumbs/index.css
similarity index 100%
rename from client/src/Components/Breadcrumbs/index.css
rename to client/src/Components/v1/Breadcrumbs/index.css
diff --git a/client/src/Components/Breadcrumbs/index.jsx b/client/src/Components/v1/Breadcrumbs/index.jsx
similarity index 97%
rename from client/src/Components/Breadcrumbs/index.jsx
rename to client/src/Components/v1/Breadcrumbs/index.jsx
index f1af89790..34e5d5e95 100644
--- a/client/src/Components/Breadcrumbs/index.jsx
+++ b/client/src/Components/v1/Breadcrumbs/index.jsx
@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
import { Box, Breadcrumbs as MUIBreadcrumbs } from "@mui/material";
import { useTheme } from "@emotion/react";
import { useNavigate } from "react-router-dom";
-import ArrowRight from "../ArrowRight";
+import ArrowRight from "../ArrowRight/index.jsx";
import "./index.css";
/**
diff --git a/client/src/Components/Buttons/RoundGradientButton.jsx b/client/src/Components/v1/Buttons/RoundGradientButton.jsx
similarity index 100%
rename from client/src/Components/Buttons/RoundGradientButton.jsx
rename to client/src/Components/v1/Buttons/RoundGradientButton.jsx
diff --git a/client/src/Components/Charts/AreaChart/index.jsx b/client/src/Components/v1/Charts/AreaChart/index.jsx
similarity index 98%
rename from client/src/Components/Charts/AreaChart/index.jsx
rename to client/src/Components/v1/Charts/AreaChart/index.jsx
index e1f1832e5..dd5a900d6 100644
--- a/client/src/Components/Charts/AreaChart/index.jsx
+++ b/client/src/Components/v1/Charts/AreaChart/index.jsx
@@ -61,7 +61,7 @@ import {
Tooltip,
ResponsiveContainer,
} from "recharts";
-import { createGradient } from "../Utils/gradientUtils";
+import { createGradient } from "../Utils/gradientUtils.jsx";
import PropTypes from "prop-types";
import { useTheme } from "@mui/material";
import { useId } from "react";
diff --git a/client/src/Components/Charts/BarChart/index.css b/client/src/Components/v1/Charts/BarChart/index.css
similarity index 100%
rename from client/src/Components/Charts/BarChart/index.css
rename to client/src/Components/v1/Charts/BarChart/index.css
diff --git a/client/src/Components/Charts/BarChart/index.jsx b/client/src/Components/v1/Charts/BarChart/index.jsx
similarity index 98%
rename from client/src/Components/Charts/BarChart/index.jsx
rename to client/src/Components/v1/Charts/BarChart/index.jsx
index 375773b94..2bf8e1798 100644
--- a/client/src/Components/Charts/BarChart/index.jsx
+++ b/client/src/Components/v1/Charts/BarChart/index.jsx
@@ -1,6 +1,6 @@
import { useTheme } from "@emotion/react";
import { Box, Stack, Tooltip, Typography } from "@mui/material";
-import { formatDateWithTz } from "../../../Utils/timeUtils";
+import { formatDateWithTz } from "../../../../Utils/timeUtils.js";
import { useEffect, useState } from "react";
import "./index.css";
import { useSelector } from "react-redux";
diff --git a/client/src/Components/Charts/ChartBox/EmptyView.jsx b/client/src/Components/v1/Charts/ChartBox/EmptyView.jsx
similarity index 98%
rename from client/src/Components/Charts/ChartBox/EmptyView.jsx
rename to client/src/Components/v1/Charts/ChartBox/EmptyView.jsx
index 296197a8c..c1b60632d 100644
--- a/client/src/Components/Charts/ChartBox/EmptyView.jsx
+++ b/client/src/Components/v1/Charts/ChartBox/EmptyView.jsx
@@ -2,7 +2,7 @@
import { Typography, Stack } from "@mui/material";
import PropTypes from "prop-types";
import { useTheme } from "@emotion/react";
-import IconBox from "../../IconBox";
+import IconBox from "../../IconBox/index.jsx";
/**
* `EmptyView` is a functional React component that displays an empty state view with an optional icon, header, and message.
diff --git a/client/src/Components/Charts/ChartBox/index.jsx b/client/src/Components/v1/Charts/ChartBox/index.jsx
similarity index 95%
rename from client/src/Components/Charts/ChartBox/index.jsx
rename to client/src/Components/v1/Charts/ChartBox/index.jsx
index 2c13ece87..be2faf8ed 100644
--- a/client/src/Components/Charts/ChartBox/index.jsx
+++ b/client/src/Components/v1/Charts/ChartBox/index.jsx
@@ -1,7 +1,7 @@
import { Stack, Typography } from "@mui/material";
import { useTheme } from "@emotion/react";
-import IconBox from "../../IconBox";
-import EmptyView from "./EmptyView";
+import IconBox from "../../IconBox/index.jsx";
+import EmptyView from "./EmptyView.jsx";
import PropTypes from "prop-types";
const ChartBox = ({
diff --git a/client/src/Components/Charts/CustomGauge/index.css b/client/src/Components/v1/Charts/CustomGauge/index.css
similarity index 100%
rename from client/src/Components/Charts/CustomGauge/index.css
rename to client/src/Components/v1/Charts/CustomGauge/index.css
diff --git a/client/src/Components/Charts/CustomGauge/index.jsx b/client/src/Components/v1/Charts/CustomGauge/index.jsx
similarity index 100%
rename from client/src/Components/Charts/CustomGauge/index.jsx
rename to client/src/Components/v1/Charts/CustomGauge/index.jsx
diff --git a/client/src/Components/Charts/DePINStatusPageBarChart/index.jsx b/client/src/Components/v1/Charts/DePINStatusPageBarChart/index.jsx
similarity index 98%
rename from client/src/Components/Charts/DePINStatusPageBarChart/index.jsx
rename to client/src/Components/v1/Charts/DePINStatusPageBarChart/index.jsx
index 65c6278f1..b37990e46 100644
--- a/client/src/Components/Charts/DePINStatusPageBarChart/index.jsx
+++ b/client/src/Components/v1/Charts/DePINStatusPageBarChart/index.jsx
@@ -5,7 +5,7 @@ import { Stack, Box, Tooltip, Typography } from "@mui/material";
import { useTheme } from "@emotion/react";
import { useState, useEffect } from "react";
import PropTypes from "prop-types";
-import { formatDateWithTz } from "../../../Utils/timeUtils";
+import { formatDateWithTz } from "../../../../Utils/timeUtils.js";
import { useSelector } from "react-redux";
const PlaceholderCheck = ({ daysToShow }) => {
diff --git a/client/src/Components/Charts/LegendBox/index.jsx b/client/src/Components/v1/Charts/LegendBox/index.jsx
similarity index 95%
rename from client/src/Components/Charts/LegendBox/index.jsx
rename to client/src/Components/v1/Charts/LegendBox/index.jsx
index ac14669e3..f19e09105 100644
--- a/client/src/Components/Charts/LegendBox/index.jsx
+++ b/client/src/Components/v1/Charts/LegendBox/index.jsx
@@ -1,6 +1,6 @@
import { Stack, Typography } from "@mui/material";
import { useTheme } from "@emotion/react";
-import IconBox from "../../IconBox";
+import IconBox from "../../IconBox/index.jsx";
import PropTypes from "prop-types";
const LegendBox = ({ children, icon, header, sx }) => {
diff --git a/client/src/Components/Charts/MonitorDetailsAreaChart/index.css b/client/src/Components/v1/Charts/MonitorDetailsAreaChart/index.css
similarity index 100%
rename from client/src/Components/Charts/MonitorDetailsAreaChart/index.css
rename to client/src/Components/v1/Charts/MonitorDetailsAreaChart/index.css
diff --git a/client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/client/src/Components/v1/Charts/MonitorDetailsAreaChart/index.jsx
similarity index 97%
rename from client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
rename to client/src/Components/v1/Charts/MonitorDetailsAreaChart/index.jsx
index a1ead3cf9..a9ef04a53 100644
--- a/client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
+++ b/client/src/Components/v1/Charts/MonitorDetailsAreaChart/index.jsx
@@ -12,11 +12,11 @@ import { Box, Stack, Typography } from "@mui/material";
import { useTheme } from "@emotion/react";
import { useMemo, useState } from "react";
import { useSelector } from "react-redux";
-import { formatDateWithTz } from "../../../Utils/timeUtils";
+import { formatDateWithTz } from "../../../../Utils/timeUtils.js";
import {
tooltipDateFormatLookup,
tickDateFormatLookup,
-} from "../Utils/chartUtilFunctions";
+} from "../Utils/chartUtilFunctions.js";
import "./index.css";
const CustomToolTip = ({ active, payload, label, dateRange }) => {
diff --git a/client/src/Components/Charts/StatusPageBarChart/index.jsx b/client/src/Components/v1/Charts/StatusPageBarChart/index.jsx
similarity index 98%
rename from client/src/Components/Charts/StatusPageBarChart/index.jsx
rename to client/src/Components/v1/Charts/StatusPageBarChart/index.jsx
index eab0c7d1d..7da4d58ba 100644
--- a/client/src/Components/Charts/StatusPageBarChart/index.jsx
+++ b/client/src/Components/v1/Charts/StatusPageBarChart/index.jsx
@@ -1,6 +1,6 @@
import { useTheme } from "@emotion/react";
import { Box, Stack, Tooltip, Typography } from "@mui/material";
-import { formatDateWithTz } from "../../../Utils/timeUtils";
+import { formatDateWithTz } from "../../../../Utils/timeUtils.js";
import { useEffect, useState, forwardRef } from "react";
import { useSelector } from "react-redux";
import PropTypes from "prop-types";
diff --git a/client/src/Components/Charts/Utils/chartUtilFunctions.js b/client/src/Components/v1/Charts/Utils/chartUtilFunctions.js
similarity index 100%
rename from client/src/Components/Charts/Utils/chartUtilFunctions.js
rename to client/src/Components/v1/Charts/Utils/chartUtilFunctions.js
diff --git a/client/src/Components/Charts/Utils/chartUtils.jsx b/client/src/Components/v1/Charts/Utils/chartUtils.jsx
similarity index 98%
rename from client/src/Components/Charts/Utils/chartUtils.jsx
rename to client/src/Components/v1/Charts/Utils/chartUtils.jsx
index e24881c1c..1bab80595 100644
--- a/client/src/Components/Charts/Utils/chartUtils.jsx
+++ b/client/src/Components/v1/Charts/Utils/chartUtils.jsx
@@ -2,9 +2,9 @@ import PropTypes from "prop-types";
import { useSelector } from "react-redux";
import { useTheme } from "@mui/material";
import { Text } from "recharts";
-import { formatDateWithTz } from "../../../Utils/timeUtils";
+import { formatDateWithTz } from "../../../../Utils/timeUtils.js";
import { Box, Stack, Typography } from "@mui/material";
-import { tickDateFormatLookup, tooltipDateFormatLookup } from "./chartUtilFunctions";
+import { tickDateFormatLookup, tooltipDateFormatLookup } from "./chartUtilFunctions.js";
/**
* Custom tick component for rendering time with timezone.
*
diff --git a/client/src/Components/Charts/Utils/gradientUtils.jsx b/client/src/Components/v1/Charts/Utils/gradientUtils.jsx
similarity index 100%
rename from client/src/Components/Charts/Utils/gradientUtils.jsx
rename to client/src/Components/v1/Charts/Utils/gradientUtils.jsx
diff --git a/client/src/Components/Check/Check.jsx b/client/src/Components/v1/Check/Check.jsx
similarity index 93%
rename from client/src/Components/Check/Check.jsx
rename to client/src/Components/v1/Check/Check.jsx
index 02b9fd78a..53971316b 100644
--- a/client/src/Components/Check/Check.jsx
+++ b/client/src/Components/v1/Check/Check.jsx
@@ -1,7 +1,7 @@
import "./check.css";
import PropTypes from "prop-types";
-import CheckGrey from "../../assets/icons/check.svg?react";
-import CheckOutlined from "../../assets/icons/check-outlined.svg?react";
+import CheckGrey from "../../../assets/icons/check.svg?react";
+import CheckOutlined from "../../../assets/icons/check-outlined.svg?react";
import { Box, Stack, Typography } from "@mui/material";
import { useTheme } from "@emotion/react";
diff --git a/client/src/Components/Check/check.css b/client/src/Components/v1/Check/check.css
similarity index 100%
rename from client/src/Components/Check/check.css
rename to client/src/Components/v1/Check/check.css
diff --git a/client/src/Components/CircularCount/index.jsx b/client/src/Components/v1/CircularCount/index.jsx
similarity index 100%
rename from client/src/Components/CircularCount/index.jsx
rename to client/src/Components/v1/CircularCount/index.jsx
diff --git a/client/src/Components/Common/AppBar.jsx b/client/src/Components/v1/Common/AppBar.jsx
similarity index 99%
rename from client/src/Components/Common/AppBar.jsx
rename to client/src/Components/v1/Common/AppBar.jsx
index de5f0992e..1d5a38ddd 100644
--- a/client/src/Components/Common/AppBar.jsx
+++ b/client/src/Components/v1/Common/AppBar.jsx
@@ -10,7 +10,7 @@ import MenuItem from "@mui/material/MenuItem";
import Drawer from "@mui/material/Drawer";
import MenuIcon from "@mui/icons-material/Menu";
import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
-import ThemeSwitch from "../ThemeSwitch";
+import ThemeSwitch from "../ThemeSwitch/index.jsx";
import { useTheme } from "@mui/material/styles";
import { useSelector } from "react-redux";
import { useLocation, useNavigate } from "react-router-dom";
diff --git a/client/src/Components/Common/Footer.jsx b/client/src/Components/v1/Common/Footer.jsx
similarity index 100%
rename from client/src/Components/Common/Footer.jsx
rename to client/src/Components/v1/Common/Footer.jsx
diff --git a/client/src/Components/ConfigBox/index.jsx b/client/src/Components/v1/ConfigBox/index.jsx
similarity index 100%
rename from client/src/Components/ConfigBox/index.jsx
rename to client/src/Components/v1/ConfigBox/index.jsx
diff --git a/client/src/Components/ConfigRow/index.jsx b/client/src/Components/v1/ConfigRow/index.jsx
similarity index 96%
rename from client/src/Components/ConfigRow/index.jsx
rename to client/src/Components/v1/ConfigRow/index.jsx
index 217085b6d..12fea923e 100644
--- a/client/src/Components/ConfigRow/index.jsx
+++ b/client/src/Components/v1/ConfigRow/index.jsx
@@ -1,7 +1,7 @@
import { Box, Stack, Typography } from "@mui/material";
import PropTypes from "prop-types";
import { useTheme } from "@emotion/react";
-import ConfigBox from "../ConfigBox";
+import ConfigBox from "../ConfigBox/index.jsx";
/**
* ConfigRow is a styled container used to layout content in a row format with specific padding, border, and spacing.
diff --git a/client/src/Components/Dialog/genericDialog.jsx b/client/src/Components/v1/Dialog/genericDialog.jsx
similarity index 100%
rename from client/src/Components/Dialog/genericDialog.jsx
rename to client/src/Components/v1/Dialog/genericDialog.jsx
diff --git a/client/src/Components/Dialog/index.jsx b/client/src/Components/v1/Dialog/index.jsx
similarity index 95%
rename from client/src/Components/Dialog/index.jsx
rename to client/src/Components/v1/Dialog/index.jsx
index 678eb8721..b8cf07439 100644
--- a/client/src/Components/Dialog/index.jsx
+++ b/client/src/Components/v1/Dialog/index.jsx
@@ -1,6 +1,6 @@
import PropTypes from "prop-types";
import { Button, Stack } from "@mui/material";
-import { GenericDialog } from "./genericDialog";
+import { GenericDialog } from "./genericDialog.jsx";
import { useTheme } from "@emotion/react";
import { useTranslation } from "react-i18next";
diff --git a/client/src/Components/Dot/index.jsx b/client/src/Components/v1/Dot/index.jsx
similarity index 100%
rename from client/src/Components/Dot/index.jsx
rename to client/src/Components/v1/Dot/index.jsx
diff --git a/client/src/Components/Fallback/FallBackActionButtons.jsx b/client/src/Components/v1/Fallback/FallBackActionButtons.jsx
similarity index 100%
rename from client/src/Components/Fallback/FallBackActionButtons.jsx
rename to client/src/Components/v1/Fallback/FallBackActionButtons.jsx
diff --git a/client/src/Components/Fallback/FallbackBackground.jsx b/client/src/Components/v1/Fallback/FallbackBackground.jsx
similarity index 78%
rename from client/src/Components/Fallback/FallbackBackground.jsx
rename to client/src/Components/v1/Fallback/FallbackBackground.jsx
index fe46f4064..2182082fd 100644
--- a/client/src/Components/Fallback/FallbackBackground.jsx
+++ b/client/src/Components/v1/Fallback/FallbackBackground.jsx
@@ -1,8 +1,8 @@
import { useTheme } from "@emotion/react";
import Box from "@mui/material/Box";
-import Background from "../../assets/Images/background-grid.svg?react";
-import OutputAnimation from "../../assets/Animations/output.gif";
-import DarkmodeOutput from "../../assets/Animations/darkmodeOutput.gif";
+import Background from "../../../assets/Images/background-grid.svg?react";
+import OutputAnimation from "../../../assets/Animations/output.gif";
+import DarkmodeOutput from "../../../assets/Animations/darkmodeOutput.gif";
import { useSelector } from "react-redux";
const FallbackBackground = () => {
const theme = useTheme();
diff --git a/client/src/Components/Fallback/FallbackCheckList.jsx b/client/src/Components/v1/Fallback/FallbackCheckList.jsx
similarity index 95%
rename from client/src/Components/Fallback/FallbackCheckList.jsx
rename to client/src/Components/v1/Fallback/FallbackCheckList.jsx
index 4d13dead4..befb95185 100644
--- a/client/src/Components/Fallback/FallbackCheckList.jsx
+++ b/client/src/Components/v1/Fallback/FallbackCheckList.jsx
@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
import { useTheme } from "@mui/material/styles";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
-import Check from "../Check/Check";
+import Check from "../Check/Check.jsx";
const FallbackCheckList = ({ checks, type }) => {
const theme = useTheme();
return (
diff --git a/client/src/Components/Fallback/FallbackContainer.jsx b/client/src/Components/v1/Fallback/FallbackContainer.jsx
similarity index 100%
rename from client/src/Components/Fallback/FallbackContainer.jsx
rename to client/src/Components/v1/Fallback/FallbackContainer.jsx
diff --git a/client/src/Components/Fallback/FallbackPageSpeedWarning.jsx b/client/src/Components/v1/Fallback/FallbackPageSpeedWarning.jsx
similarity index 97%
rename from client/src/Components/Fallback/FallbackPageSpeedWarning.jsx
rename to client/src/Components/v1/Fallback/FallbackPageSpeedWarning.jsx
index bcec7300d..2cf52bd88 100644
--- a/client/src/Components/Fallback/FallbackPageSpeedWarning.jsx
+++ b/client/src/Components/v1/Fallback/FallbackPageSpeedWarning.jsx
@@ -3,7 +3,7 @@ import { useTheme } from "@mui/material/styles";
import Link from "@mui/material/Link";
import { Link as RouterLink } from "react-router-dom";
import { useTranslation } from "react-i18next";
-import Alert from "../Alert";
+import Alert from "../Alert/index.jsx";
import PropTypes from "prop-types";
const renderWarningMessage = (t) => {
diff --git a/client/src/Components/Fallback/FallbackTitle.jsx b/client/src/Components/v1/Fallback/FallbackTitle.jsx
similarity index 100%
rename from client/src/Components/Fallback/FallbackTitle.jsx
rename to client/src/Components/v1/Fallback/FallbackTitle.jsx
diff --git a/client/src/Components/Fallback/index.css b/client/src/Components/v1/Fallback/index.css
similarity index 100%
rename from client/src/Components/Fallback/index.css
rename to client/src/Components/v1/Fallback/index.css
diff --git a/client/src/Components/Fallback/index.jsx b/client/src/Components/v1/Fallback/index.jsx
similarity index 87%
rename from client/src/Components/Fallback/index.jsx
rename to client/src/Components/v1/Fallback/index.jsx
index 5fbb958e7..40113f882 100644
--- a/client/src/Components/Fallback/index.jsx
+++ b/client/src/Components/v1/Fallback/index.jsx
@@ -2,11 +2,11 @@ import PropTypes from "prop-types";
import { useTheme } from "@emotion/react";
import { Box, Stack } from "@mui/material";
import "./index.css";
-import FallbackTitle from "./FallbackTitle";
-import FallbackCheckList from "./FallbackCheckList";
-import FallbackActionButtons from "./FallBackActionButtons";
-import FallbackBackground from "./FallbackBackground";
-import FallbackContainer from "./FallbackContainer";
+import FallbackTitle from "./FallbackTitle.jsx";
+import FallbackCheckList from "./FallbackCheckList.jsx";
+import FallbackActionButtons from "./FallBackActionButtons.jsx";
+import FallbackBackground from "./FallbackBackground.jsx";
+import FallbackContainer from "./FallbackContainer.jsx";
/**
* Fallback component to display a fallback UI with a title, a list of checks, and a navigation button.
*
diff --git a/client/src/Components/FilterHeader/index.jsx b/client/src/Components/v1/FilterHeader/index.jsx
similarity index 100%
rename from client/src/Components/FilterHeader/index.jsx
rename to client/src/Components/v1/FilterHeader/index.jsx
diff --git a/client/src/Components/GenericFallback/NetworkError.jsx b/client/src/Components/v1/GenericFallback/NetworkError.jsx
similarity index 100%
rename from client/src/Components/GenericFallback/NetworkError.jsx
rename to client/src/Components/v1/GenericFallback/NetworkError.jsx
diff --git a/client/src/Components/GenericFallback/index.jsx b/client/src/Components/v1/GenericFallback/index.jsx
similarity index 89%
rename from client/src/Components/GenericFallback/index.jsx
rename to client/src/Components/v1/GenericFallback/index.jsx
index 7f6d258ea..137cdd1da 100644
--- a/client/src/Components/GenericFallback/index.jsx
+++ b/client/src/Components/v1/GenericFallback/index.jsx
@@ -1,8 +1,8 @@
import { useTheme } from "@emotion/react";
import { Box, Stack } from "@mui/material";
-import OutputAnimation from "../../assets/Animations/output.gif";
-import DarkmodeOutput from "../../assets/Animations/darkmodeOutput.gif";
-import Background from "../../assets/Images/background-grid.svg?react";
+import OutputAnimation from "../../../assets/Animations/output.gif";
+import DarkmodeOutput from "../../../assets/Animations/darkmodeOutput.gif";
+import Background from "../../../assets/Images/background-grid.svg?react";
import { useSelector } from "react-redux";
/**
diff --git a/client/src/Components/HOC/withAdminCheck.jsx b/client/src/Components/v1/HOC/withAdminCheck.jsx
similarity index 91%
rename from client/src/Components/HOC/withAdminCheck.jsx
rename to client/src/Components/v1/HOC/withAdminCheck.jsx
index 458330a1f..8646c99b6 100644
--- a/client/src/Components/HOC/withAdminCheck.jsx
+++ b/client/src/Components/v1/HOC/withAdminCheck.jsx
@@ -1,8 +1,8 @@
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
-import { logger } from "../../Utils/Logger";
-import { networkService } from "../../main";
+import { logger } from "../../../Utils/Logger.js";
+import { networkService } from "../../../main.jsx";
const withAdminCheck = (WrappedComponent) => {
const WithAdminCheck = (props) => {
diff --git a/client/src/Components/Heading/index.jsx b/client/src/Components/v1/Heading/index.jsx
similarity index 100%
rename from client/src/Components/Heading/index.jsx
rename to client/src/Components/v1/Heading/index.jsx
diff --git a/client/src/Components/Host/index.jsx b/client/src/Components/v1/Host/index.jsx
similarity index 97%
rename from client/src/Components/Host/index.jsx
rename to client/src/Components/v1/Host/index.jsx
index d1cf382b2..772f5b61c 100644
--- a/client/src/Components/Host/index.jsx
+++ b/client/src/Components/v1/Host/index.jsx
@@ -1,7 +1,7 @@
import { Stack, Typography } from "@mui/material";
import PropTypes from "prop-types";
import { useTheme } from "@emotion/react";
-import Dot from "../Dot";
+import Dot from "../Dot/index.jsx";
/**
* Host component.
* This subcomponent receives a params object and displays the host details.
diff --git a/client/src/Components/HttpStatusLabel/index.jsx b/client/src/Components/v1/HttpStatusLabel/index.jsx
similarity index 96%
rename from client/src/Components/HttpStatusLabel/index.jsx
rename to client/src/Components/v1/HttpStatusLabel/index.jsx
index 52676ae7c..2253e323e 100644
--- a/client/src/Components/HttpStatusLabel/index.jsx
+++ b/client/src/Components/v1/HttpStatusLabel/index.jsx
@@ -1,6 +1,6 @@
import PropTypes from "prop-types";
import { useTheme } from "@mui/material";
-import { BaseLabel } from "../Label";
+import { BaseLabel } from "../Label/index.jsx";
/**
* @component
diff --git a/client/src/Components/I18nLoader/index.jsx b/client/src/Components/v1/I18nLoader/index.jsx
similarity index 88%
rename from client/src/Components/I18nLoader/index.jsx
rename to client/src/Components/v1/I18nLoader/index.jsx
index 7c3cbfb85..2a6a4966d 100644
--- a/client/src/Components/I18nLoader/index.jsx
+++ b/client/src/Components/v1/I18nLoader/index.jsx
@@ -1,4 +1,4 @@
-import i18n from "../../Utils/i18n";
+import i18n from "../../../Utils/i18n.js";
import { useSelector } from "react-redux";
import { useEffect } from "react";
const I18nLoader = () => {
diff --git a/client/src/Components/IconBox/index.jsx b/client/src/Components/v1/IconBox/index.jsx
similarity index 100%
rename from client/src/Components/IconBox/index.jsx
rename to client/src/Components/v1/IconBox/index.jsx
diff --git a/client/src/Components/Image/index.jsx b/client/src/Components/v1/Image/index.jsx
similarity index 100%
rename from client/src/Components/Image/index.jsx
rename to client/src/Components/v1/Image/index.jsx
diff --git a/client/src/Components/InfoBox/index.jsx b/client/src/Components/v1/InfoBox/index.jsx
similarity index 88%
rename from client/src/Components/InfoBox/index.jsx
rename to client/src/Components/v1/InfoBox/index.jsx
index 6797d6c9c..96e67975d 100644
--- a/client/src/Components/InfoBox/index.jsx
+++ b/client/src/Components/v1/InfoBox/index.jsx
@@ -1,6 +1,6 @@
-import { RowContainer } from "../StandardContainer";
+import { RowContainer } from "../StandardContainer/index.jsx";
import { Stack, Typography } from "@mui/material";
-import Image from "../Image";
+import Image from "../Image/index.jsx";
import { useTheme } from "@mui/material/styles";
diff --git a/client/src/Components/Inputs/Checkbox/index.css b/client/src/Components/v1/Inputs/Checkbox/index.css
similarity index 100%
rename from client/src/Components/Inputs/Checkbox/index.css
rename to client/src/Components/v1/Inputs/Checkbox/index.css
diff --git a/client/src/Components/Inputs/Checkbox/index.jsx b/client/src/Components/v1/Inputs/Checkbox/index.jsx
similarity index 95%
rename from client/src/Components/Inputs/Checkbox/index.jsx
rename to client/src/Components/v1/Inputs/Checkbox/index.jsx
index 1497c44fb..08af49d84 100644
--- a/client/src/Components/Inputs/Checkbox/index.jsx
+++ b/client/src/Components/v1/Inputs/Checkbox/index.jsx
@@ -1,8 +1,8 @@
import PropTypes from "prop-types";
import { FormControlLabel, Checkbox as MuiCheckbox } from "@mui/material";
import { useTheme } from "@emotion/react";
-import CheckboxOutline from "../../../assets/icons/checkbox-outline.svg?react";
-import CheckboxFilled from "../../../assets/icons/checkbox-filled.svg?react";
+import CheckboxOutline from "../../../../assets/icons/checkbox-outline.svg?react";
+import CheckboxFilled from "../../../../assets/icons/checkbox-filled.svg?react";
import "./index.css";
/**
diff --git a/client/src/Components/Inputs/ColorPicker/index.jsx b/client/src/Components/v1/Inputs/ColorPicker/index.jsx
similarity index 100%
rename from client/src/Components/Inputs/ColorPicker/index.jsx
rename to client/src/Components/v1/Inputs/ColorPicker/index.jsx
diff --git a/client/src/Components/Inputs/FieldWrapper/index.jsx b/client/src/Components/v1/Inputs/FieldWrapper/index.jsx
similarity index 100%
rename from client/src/Components/Inputs/FieldWrapper/index.jsx
rename to client/src/Components/v1/Inputs/FieldWrapper/index.jsx
diff --git a/client/src/Components/Inputs/ImageUpload/index.jsx b/client/src/Components/v1/Inputs/ImageUpload/index.jsx
similarity index 98%
rename from client/src/Components/Inputs/ImageUpload/index.jsx
rename to client/src/Components/v1/Inputs/ImageUpload/index.jsx
index a81c89393..e7415bf8f 100644
--- a/client/src/Components/Inputs/ImageUpload/index.jsx
+++ b/client/src/Components/v1/Inputs/ImageUpload/index.jsx
@@ -1,10 +1,10 @@
// Components
import { Box, Stack, Typography } from "@mui/material";
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
-import Image from "../../../Components/Image";
+import Image from "../../Image/index.jsx";
import TextField from "@mui/material/TextField";
import IconButton from "@mui/material/IconButton";
-import ProgressUpload from "../../ProgressBars";
+import ProgressUpload from "../../ProgressBars/index.jsx";
import ImageIcon from "@mui/icons-material/Image";
// Utils
diff --git a/client/src/Components/Inputs/Radio/index.css b/client/src/Components/v1/Inputs/Radio/index.css
similarity index 100%
rename from client/src/Components/Inputs/Radio/index.css
rename to client/src/Components/v1/Inputs/Radio/index.css
diff --git a/client/src/Components/Inputs/Radio/index.jsx b/client/src/Components/v1/Inputs/Radio/index.jsx
similarity index 96%
rename from client/src/Components/Inputs/Radio/index.jsx
rename to client/src/Components/v1/Inputs/Radio/index.jsx
index 4c687de1e..575c1af74 100644
--- a/client/src/Components/Inputs/Radio/index.jsx
+++ b/client/src/Components/v1/Inputs/Radio/index.jsx
@@ -1,7 +1,7 @@
import PropTypes from "prop-types";
import { FormControlLabel, Radio as MUIRadio, Typography } from "@mui/material";
import { useTheme } from "@emotion/react";
-import RadioChecked from "../../../assets/icons/radio-checked.svg?react";
+import RadioChecked from "../../../../assets/icons/radio-checked.svg?react";
import "./index.css";
/**
diff --git a/client/src/Components/Inputs/Search/index.jsx b/client/src/Components/v1/Inputs/Search/index.jsx
similarity index 98%
rename from client/src/Components/Inputs/Search/index.jsx
rename to client/src/Components/v1/Inputs/Search/index.jsx
index 7202cc2eb..7a3771d47 100644
--- a/client/src/Components/Inputs/Search/index.jsx
+++ b/client/src/Components/v1/Inputs/Search/index.jsx
@@ -8,10 +8,10 @@ import {
Checkbox,
} from "@mui/material";
import { useTheme } from "@emotion/react";
-import SearchIcon from "../../../assets/icons/search.svg?react";
+import SearchIcon from "../../../../assets/icons/search.svg?react";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
-import FieldWrapper from "../FieldWrapper";
+import FieldWrapper from "../FieldWrapper/index.jsx";
/**
* Search component using Material UI's Autocomplete.
diff --git a/client/src/Components/Inputs/Select/index.css b/client/src/Components/v1/Inputs/Select/index.css
similarity index 100%
rename from client/src/Components/Inputs/Select/index.css
rename to client/src/Components/v1/Inputs/Select/index.css
diff --git a/client/src/Components/Inputs/Select/index.jsx b/client/src/Components/v1/Inputs/Select/index.jsx
similarity index 98%
rename from client/src/Components/Inputs/Select/index.jsx
rename to client/src/Components/v1/Inputs/Select/index.jsx
index c5c488f91..37ce30dc1 100644
--- a/client/src/Components/Inputs/Select/index.jsx
+++ b/client/src/Components/v1/Inputs/Select/index.jsx
@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
import { useTheme } from "@emotion/react";
import { MenuItem, Select as MuiSelect, Stack, Typography } from "@mui/material";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import FieldWrapper from "../FieldWrapper";
+import FieldWrapper from "../FieldWrapper/index.jsx";
import "./index.css";
diff --git a/client/src/Components/Inputs/TextInput/Adornments/index.jsx b/client/src/Components/v1/Inputs/TextInput/Adornments/index.jsx
similarity index 96%
rename from client/src/Components/Inputs/TextInput/Adornments/index.jsx
rename to client/src/Components/v1/Inputs/TextInput/Adornments/index.jsx
index d6af2a89e..4e4bbd2af 100644
--- a/client/src/Components/Inputs/TextInput/Adornments/index.jsx
+++ b/client/src/Components/v1/Inputs/TextInput/Adornments/index.jsx
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
import VisibilityOff from "@mui/icons-material/VisibilityOff";
import Visibility from "@mui/icons-material/Visibility";
import ReorderRoundedIcon from "@mui/icons-material/ReorderRounded";
-import DeleteIcon from "../../../../assets/icons/trash-bin.svg?react";
+import DeleteIcon from "../../../../../assets/icons/trash-bin.svg?react";
export const HttpAdornment = ({ https }) => {
const theme = useTheme();
diff --git a/client/src/Components/Inputs/TextInput/index.jsx b/client/src/Components/v1/Inputs/TextInput/index.jsx
similarity index 98%
rename from client/src/Components/Inputs/TextInput/index.jsx
rename to client/src/Components/v1/Inputs/TextInput/index.jsx
index 469791704..7203e5f50 100644
--- a/client/src/Components/Inputs/TextInput/index.jsx
+++ b/client/src/Components/v1/Inputs/TextInput/index.jsx
@@ -2,7 +2,7 @@ import { Stack, TextField, Typography } from "@mui/material";
import { useTheme } from "@emotion/react";
import { forwardRef, useState, cloneElement } from "react";
import PropTypes from "prop-types";
-import FieldWrapper from "../FieldWrapper";
+import FieldWrapper from "../FieldWrapper/index.jsx";
const getSx = (theme, type, maxWidth) => {
const sx = {
diff --git a/client/src/Components/Label/index.css b/client/src/Components/v1/Label/index.css
similarity index 100%
rename from client/src/Components/Label/index.css
rename to client/src/Components/v1/Label/index.css
diff --git a/client/src/Components/Label/index.jsx b/client/src/Components/v1/Label/index.jsx
similarity index 100%
rename from client/src/Components/Label/index.jsx
rename to client/src/Components/v1/Label/index.jsx
diff --git a/client/src/Components/Layouts/AppLayout/index.jsx b/client/src/Components/v1/Layouts/AppLayout/index.jsx
similarity index 91%
rename from client/src/Components/Layouts/AppLayout/index.jsx
rename to client/src/Components/v1/Layouts/AppLayout/index.jsx
index d13f6d879..0dbfb1e7a 100644
--- a/client/src/Components/Layouts/AppLayout/index.jsx
+++ b/client/src/Components/v1/Layouts/AppLayout/index.jsx
@@ -1,7 +1,7 @@
import Box from "@mui/material/Box";
import PropTypes from "prop-types";
import { useTheme } from "@emotion/react";
-import BackgroundSVG from "../../../assets/Images/background.svg";
+import BackgroundSVG from "../../../../assets/Images/background.svg";
import { useSelector } from "react-redux";
const AppLayout = ({ children }) => {
diff --git a/client/src/Components/Layouts/HomeLayout/index.css b/client/src/Components/v1/Layouts/HomeLayout/index.css
similarity index 100%
rename from client/src/Components/Layouts/HomeLayout/index.css
rename to client/src/Components/v1/Layouts/HomeLayout/index.css
diff --git a/client/src/Components/Layouts/HomeLayout/index.jsx b/client/src/Components/v1/Layouts/HomeLayout/index.jsx
similarity index 88%
rename from client/src/Components/Layouts/HomeLayout/index.jsx
rename to client/src/Components/v1/Layouts/HomeLayout/index.jsx
index 55b612522..3e63aff37 100644
--- a/client/src/Components/Layouts/HomeLayout/index.jsx
+++ b/client/src/Components/v1/Layouts/HomeLayout/index.jsx
@@ -1,4 +1,4 @@
-import Sidebar from "../../Sidebar";
+import Sidebar from "../../Sidebar/index.jsx";
import { Outlet } from "react-router";
import { Stack } from "@mui/material";
diff --git a/client/src/Components/Link/index.jsx b/client/src/Components/v1/Link/index.jsx
similarity index 100%
rename from client/src/Components/Link/index.jsx
rename to client/src/Components/v1/Link/index.jsx
diff --git a/client/src/Components/Link/link.css b/client/src/Components/v1/Link/link.css
similarity index 100%
rename from client/src/Components/Link/link.css
rename to client/src/Components/v1/Link/link.css
diff --git a/client/src/Components/MonitorActions/index.jsx b/client/src/Components/v1/MonitorActions/index.jsx
similarity index 95%
rename from client/src/Components/MonitorActions/index.jsx
rename to client/src/Components/v1/MonitorActions/index.jsx
index 9e88e26c5..23cebc972 100644
--- a/client/src/Components/MonitorActions/index.jsx
+++ b/client/src/Components/v1/MonitorActions/index.jsx
@@ -10,8 +10,8 @@ import MenuItem from "@mui/material/MenuItem";
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/v1/monitorHooks.js";
+import { createToast } from "../../../Utils/toastUtils.jsx";
+import { useExportMonitors } from "../../../Hooks/v1/monitorHooks.js";
const MonitorActions = ({ isLoading }) => {
const [open, setOpen] = React.useState(false);
diff --git a/client/src/Components/MonitorCountHeader/index.jsx b/client/src/Components/v1/MonitorCountHeader/index.jsx
similarity index 95%
rename from client/src/Components/MonitorCountHeader/index.jsx
rename to client/src/Components/v1/MonitorCountHeader/index.jsx
index 7610a9d5c..eba644d26 100644
--- a/client/src/Components/MonitorCountHeader/index.jsx
+++ b/client/src/Components/v1/MonitorCountHeader/index.jsx
@@ -1,7 +1,7 @@
import { Stack, Typography } from "@mui/material";
import PropTypes from "prop-types";
import { useTheme } from "@emotion/react";
-import SkeletonLayout from "./skeleton";
+import SkeletonLayout from "./skeleton.jsx";
const MonitorCountHeader = ({
isLoading = false,
diff --git a/client/src/Components/MonitorCountHeader/skeleton.jsx b/client/src/Components/v1/MonitorCountHeader/skeleton.jsx
similarity index 100%
rename from client/src/Components/MonitorCountHeader/skeleton.jsx
rename to client/src/Components/v1/MonitorCountHeader/skeleton.jsx
diff --git a/client/src/Components/MonitorCreateHeader/index.jsx b/client/src/Components/v1/MonitorCreateHeader/index.jsx
similarity index 94%
rename from client/src/Components/MonitorCreateHeader/index.jsx
rename to client/src/Components/v1/MonitorCreateHeader/index.jsx
index b3b50681c..90c12f5ec 100644
--- a/client/src/Components/MonitorCreateHeader/index.jsx
+++ b/client/src/Components/v1/MonitorCreateHeader/index.jsx
@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
import PropTypes from "prop-types";
import { useTranslation } from "react-i18next";
import { useTheme } from "@emotion/react";
-import MonitorActions from "../MonitorActions";
+import MonitorActions from "../MonitorActions/index.jsx";
const CreateMonitorHeader = ({ isAdmin, label, isLoading = true, path, bulkPath }) => {
const navigate = useNavigate();
diff --git a/client/src/Components/MonitorCreateHeader/skeleton.jsx b/client/src/Components/v1/MonitorCreateHeader/skeleton.jsx
similarity index 100%
rename from client/src/Components/MonitorCreateHeader/skeleton.jsx
rename to client/src/Components/v1/MonitorCreateHeader/skeleton.jsx
diff --git a/client/src/Components/MonitorDetailsControlHeader/index.jsx b/client/src/Components/v1/MonitorDetailsControlHeader/index.jsx
similarity index 92%
rename from client/src/Components/MonitorDetailsControlHeader/index.jsx
rename to client/src/Components/v1/MonitorDetailsControlHeader/index.jsx
index cd56394f4..ae565f3bb 100644
--- a/client/src/Components/MonitorDetailsControlHeader/index.jsx
+++ b/client/src/Components/v1/MonitorDetailsControlHeader/index.jsx
@@ -1,6 +1,6 @@
import Stack from "@mui/material/Stack";
-import Status from "./status";
-import Skeleton from "./skeleton";
+import Status from "./status.jsx";
+import Skeleton from "./skeleton.jsx";
import Button from "@mui/material/Button";
import { Tooltip } from "@mui/material";
import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
@@ -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/v1/monitorHooks.js";
-import { useSendTestEmail } from "../../Hooks/v1/useSendTestEmail.js";
+import { usePauseMonitor } from "../../../Hooks/v1/monitorHooks.js";
+import { useSendTestEmail } from "../../../Hooks/v1/useSendTestEmail.js";
import { useTranslation } from "react-i18next";
-import { useTestAllNotifications } from "../../Hooks/v1/useNotifications.js";
+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.
diff --git a/client/src/Components/MonitorDetailsControlHeader/skeleton.jsx b/client/src/Components/v1/MonitorDetailsControlHeader/skeleton.jsx
similarity index 100%
rename from client/src/Components/MonitorDetailsControlHeader/skeleton.jsx
rename to client/src/Components/v1/MonitorDetailsControlHeader/skeleton.jsx
diff --git a/client/src/Components/MonitorDetailsControlHeader/status.jsx b/client/src/Components/v1/MonitorDetailsControlHeader/status.jsx
similarity index 83%
rename from client/src/Components/MonitorDetailsControlHeader/status.jsx
rename to client/src/Components/v1/MonitorDetailsControlHeader/status.jsx
index 2cf749861..d9b7afc40 100644
--- a/client/src/Components/MonitorDetailsControlHeader/status.jsx
+++ b/client/src/Components/v1/MonitorDetailsControlHeader/status.jsx
@@ -1,14 +1,14 @@
// Components
import Stack from "@mui/material/Stack";
-import PulseDot from "../../Components/Animated/PulseDot";
+import PulseDot from "../Animated/PulseDot.jsx";
import Typography from "@mui/material/Typography";
-import Dot from "../../Components/Dot";
+import Dot from "../Dot/index.jsx";
// Utils
-import { formatDurationRounded } from "../../Utils/timeUtils";
+import { formatDurationRounded } from "../../../Utils/timeUtils.js";
import PropTypes from "prop-types";
import { useTheme } from "@emotion/react";
-import { useMonitorUtils } from "../../Hooks/v1/useMonitorUtils.js";
-import { formatMonitorUrl } from "../../Utils/utils";
+import { useMonitorUtils } from "../../../Hooks/v1/useMonitorUtils.js";
+import { formatMonitorUrl } from "../../../Utils/utils.js";
/**
* Status component displays the status information of a monitor.
* It includes the monitor's name, URL, and check interval.
diff --git a/client/src/Components/MonitorTimeFrameHeader/index.jsx b/client/src/Components/v1/MonitorTimeFrameHeader/index.jsx
similarity index 97%
rename from client/src/Components/MonitorTimeFrameHeader/index.jsx
rename to client/src/Components/v1/MonitorTimeFrameHeader/index.jsx
index 3958d507c..9d57edc41 100644
--- a/client/src/Components/MonitorTimeFrameHeader/index.jsx
+++ b/client/src/Components/v1/MonitorTimeFrameHeader/index.jsx
@@ -1,6 +1,6 @@
import { Stack, Typography, Button, ButtonGroup } from "@mui/material";
import { useTheme } from "@emotion/react";
-import SkeletonLayout from "./skeleton";
+import SkeletonLayout from "./skeleton.jsx";
import PropTypes from "prop-types";
const MonitorTimeFrameHeader = ({
diff --git a/client/src/Components/MonitorTimeFrameHeader/skeleton.jsx b/client/src/Components/v1/MonitorTimeFrameHeader/skeleton.jsx
similarity index 100%
rename from client/src/Components/MonitorTimeFrameHeader/skeleton.jsx
rename to client/src/Components/v1/MonitorTimeFrameHeader/skeleton.jsx
diff --git a/client/src/Components/NotificationConfig/index.jsx b/client/src/Components/v1/NotificationConfig/index.jsx
similarity index 98%
rename from client/src/Components/NotificationConfig/index.jsx
rename to client/src/Components/v1/NotificationConfig/index.jsx
index c37889eff..58096881e 100644
--- a/client/src/Components/NotificationConfig/index.jsx
+++ b/client/src/Components/v1/NotificationConfig/index.jsx
@@ -3,7 +3,7 @@ import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import Divider from "@mui/material/Divider";
import DeleteOutlineRoundedIcon from "@mui/icons-material/DeleteOutlineRounded";
-import Search from "../Inputs/Search";
+import Search from "../Inputs/Search/index.jsx";
// Utils
import { useState, useEffect } from "react";
diff --git a/client/src/Components/NotificationIntegrationModal/Components/NotificationIntegrationModal.jsx b/client/src/Components/v1/NotificationIntegrationModal/Components/NotificationIntegrationModal.jsx
similarity index 98%
rename from client/src/Components/NotificationIntegrationModal/Components/NotificationIntegrationModal.jsx
rename to client/src/Components/v1/NotificationIntegrationModal/Components/NotificationIntegrationModal.jsx
index dc94ee731..2aae996f6 100644
--- a/client/src/Components/NotificationIntegrationModal/Components/NotificationIntegrationModal.jsx
+++ b/client/src/Components/v1/NotificationIntegrationModal/Components/NotificationIntegrationModal.jsx
@@ -14,9 +14,9 @@ import {
Stack,
} from "@mui/material";
import { useTheme } from "@emotion/react";
-import TabPanel from "./TabPanel";
-import TabComponent from "./TabComponent";
-import useNotifications from "../Hooks/useNotification";
+import TabPanel from "./TabPanel.jsx";
+import TabComponent from "./TabComponent.jsx";
+import useNotifications from "../Hooks/useNotification.js";
// Define constants for notification types to avoid magic values
const NOTIFICATION_TYPES = {
diff --git a/client/src/Components/NotificationIntegrationModal/Components/TabComponent.jsx b/client/src/Components/v1/NotificationIntegrationModal/Components/TabComponent.jsx
similarity index 95%
rename from client/src/Components/NotificationIntegrationModal/Components/TabComponent.jsx
rename to client/src/Components/v1/NotificationIntegrationModal/Components/TabComponent.jsx
index 571379c7e..87fb2c301 100644
--- a/client/src/Components/NotificationIntegrationModal/Components/TabComponent.jsx
+++ b/client/src/Components/v1/NotificationIntegrationModal/Components/TabComponent.jsx
@@ -2,8 +2,8 @@ import React from "react";
import { Typography, Box, Button, CircularProgress } from "@mui/material";
import { useTranslation } from "react-i18next";
import { useTheme } from "@emotion/react";
-import TextInput from "../../../Components/Inputs/TextInput";
-import Checkbox from "../../../Components/Inputs/Checkbox";
+import TextInput from "../../Inputs/TextInput/index.jsx";
+import Checkbox from "../../Inputs/Checkbox/index.jsx";
const TabComponent = ({
type,
diff --git a/client/src/Components/NotificationIntegrationModal/Components/TabPanel.jsx b/client/src/Components/v1/NotificationIntegrationModal/Components/TabPanel.jsx
similarity index 100%
rename from client/src/Components/NotificationIntegrationModal/Components/TabPanel.jsx
rename to client/src/Components/v1/NotificationIntegrationModal/Components/TabPanel.jsx
diff --git a/client/src/Components/NotificationIntegrationModal/Hooks/useNotification.js b/client/src/Components/v1/NotificationIntegrationModal/Hooks/useNotification.js
similarity index 96%
rename from client/src/Components/NotificationIntegrationModal/Hooks/useNotification.js
rename to client/src/Components/v1/NotificationIntegrationModal/Hooks/useNotification.js
index cdbc11598..c0712fa5f 100644
--- a/client/src/Components/NotificationIntegrationModal/Hooks/useNotification.js
+++ b/client/src/Components/v1/NotificationIntegrationModal/Hooks/useNotification.js
@@ -1,7 +1,7 @@
import { useState } from "react";
import { useTranslation } from "react-i18next";
-import { networkService } from "../../../Utils/NetworkService";
-import { createToast } from "../../../Utils/toastUtils";
+import { networkService } from "../../../../Utils/NetworkService.js";
+import { createToast } from "../../../../Utils/toastUtils.jsx";
// Define constants for notification types to avoid magic values
const NOTIFICATION_TYPES = {
diff --git a/client/src/Components/PageStateWrapper/index.jsx b/client/src/Components/v1/PageStateWrapper/index.jsx
similarity index 90%
rename from client/src/Components/PageStateWrapper/index.jsx
rename to client/src/Components/v1/PageStateWrapper/index.jsx
index c335fcbb3..ac97704df 100644
--- a/client/src/Components/PageStateWrapper/index.jsx
+++ b/client/src/Components/v1/PageStateWrapper/index.jsx
@@ -1,9 +1,9 @@
-import GenericFallback from "../GenericFallback";
-import Fallback from "../Fallback";
+import GenericFallback from "../GenericFallback/index.jsx";
+import Fallback from "../Fallback/index.jsx";
import { Typography } from "@mui/material";
import { useTheme } from "@emotion/react";
import { useTranslation } from "react-i18next";
-import { useIsAdmin } from "../../Hooks/v1/useIsAdmin.js";
+import { useIsAdmin } from "../../../Hooks/v1/useIsAdmin.js";
import PropTypes from "prop-types";
const PageStateWrapper = ({
networkError,
diff --git a/client/src/Components/ProgressBars/index.css b/client/src/Components/v1/ProgressBars/index.css
similarity index 100%
rename from client/src/Components/ProgressBars/index.css
rename to client/src/Components/v1/ProgressBars/index.css
diff --git a/client/src/Components/ProgressBars/index.jsx b/client/src/Components/v1/ProgressBars/index.jsx
similarity index 100%
rename from client/src/Components/ProgressBars/index.jsx
rename to client/src/Components/v1/ProgressBars/index.jsx
diff --git a/client/src/Components/ProgressStepper/index.css b/client/src/Components/v1/ProgressStepper/index.css
similarity index 100%
rename from client/src/Components/ProgressStepper/index.css
rename to client/src/Components/v1/ProgressStepper/index.css
diff --git a/client/src/Components/ProgressStepper/index.jsx b/client/src/Components/v1/ProgressStepper/index.jsx
similarity index 100%
rename from client/src/Components/ProgressStepper/index.jsx
rename to client/src/Components/v1/ProgressStepper/index.jsx
diff --git a/client/src/Components/ProtectedRoute/index.jsx b/client/src/Components/v1/ProtectedRoute/index.jsx
similarity index 100%
rename from client/src/Components/ProtectedRoute/index.jsx
rename to client/src/Components/v1/ProtectedRoute/index.jsx
diff --git a/client/src/Components/RoleProtectedRoute/index.jsx b/client/src/Components/v1/RoleProtectedRoute/index.jsx
similarity index 100%
rename from client/src/Components/RoleProtectedRoute/index.jsx
rename to client/src/Components/v1/RoleProtectedRoute/index.jsx
diff --git a/client/src/Components/ShareComponent/index.jsx b/client/src/Components/v1/ShareComponent/index.jsx
similarity index 100%
rename from client/src/Components/ShareComponent/index.jsx
rename to client/src/Components/v1/ShareComponent/index.jsx
diff --git a/client/src/Components/Sidebar/components/authFooter.jsx b/client/src/Components/v1/Sidebar/components/authFooter.jsx
similarity index 96%
rename from client/src/Components/Sidebar/components/authFooter.jsx
rename to client/src/Components/v1/Sidebar/components/authFooter.jsx
index e94aeddee..2c33a2402 100644
--- a/client/src/Components/Sidebar/components/authFooter.jsx
+++ b/client/src/Components/v1/Sidebar/components/authFooter.jsx
@@ -3,19 +3,19 @@ import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Tooltip from "@mui/material/Tooltip";
import IconButton from "@mui/material/IconButton";
-import Avatar from "../../Avatar";
+import Avatar from "../../Avatar/index.jsx";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import Divider from "@mui/material/Divider";
-import DotsVertical from "../../../assets/icons/dots-vertical.svg?react";
-import LogoutSvg from "../../../assets/icons/logout.svg?react";
+import DotsVertical from "../../../../assets/icons/dots-vertical.svg?react";
+import LogoutSvg from "../../../../assets/icons/logout.svg?react";
import { useTheme } from "@emotion/react";
import { useSelector } from "react-redux";
import { useTranslation } from "react-i18next";
import { useState } from "react";
import { useNavigate } from "react-router";
-import { clearAuthState } from "../../../Features/Auth/authSlice";
+import { clearAuthState } from "../../../../Features/Auth/authSlice.js";
import { useDispatch } from "react-redux";
import PropTypes from "prop-types";
diff --git a/client/src/Components/Sidebar/components/collapseButton.jsx b/client/src/Components/v1/Sidebar/components/collapseButton.jsx
similarity index 88%
rename from client/src/Components/Sidebar/components/collapseButton.jsx
rename to client/src/Components/v1/Sidebar/components/collapseButton.jsx
index e7c382e5a..e3a9c91f5 100644
--- a/client/src/Components/Sidebar/components/collapseButton.jsx
+++ b/client/src/Components/v1/Sidebar/components/collapseButton.jsx
@@ -1,9 +1,9 @@
import IconButton from "@mui/material/IconButton";
-import ArrowRight from "../../ArrowRight";
-import ArrowLeft from "../../ArrowLeft";
+import ArrowRight from "../../ArrowRight/index.jsx";
+import ArrowLeft from "../../ArrowLeft/index.jsx";
import { useTheme } from "@mui/material/styles";
import { useDispatch } from "react-redux";
-import { toggleSidebar } from "../../../Features/UI/uiSlice";
+import { toggleSidebar } from "../../../../Features/UI/uiSlice.js";
import PropTypes from "prop-types";
const CollapseButton = ({ collapsed }) => {
diff --git a/client/src/Components/Sidebar/components/logo.jsx b/client/src/Components/v1/Sidebar/components/logo.jsx
similarity index 100%
rename from client/src/Components/Sidebar/components/logo.jsx
rename to client/src/Components/v1/Sidebar/components/logo.jsx
diff --git a/client/src/Components/Sidebar/components/navItem.jsx b/client/src/Components/v1/Sidebar/components/navItem.jsx
similarity index 100%
rename from client/src/Components/Sidebar/components/navItem.jsx
rename to client/src/Components/v1/Sidebar/components/navItem.jsx
diff --git a/client/src/Components/Sidebar/index.jsx b/client/src/Components/v1/Sidebar/index.jsx
similarity index 75%
rename from client/src/Components/Sidebar/index.jsx
rename to client/src/Components/v1/Sidebar/index.jsx
index 6b7b6577c..bd7400fa6 100644
--- a/client/src/Components/Sidebar/index.jsx
+++ b/client/src/Components/v1/Sidebar/index.jsx
@@ -1,29 +1,29 @@
import Stack from "@mui/material/Stack";
import List from "@mui/material/List";
-import Logo from "./components/logo";
-import CollapseButton from "./components/collapseButton";
+import Logo from "./components/logo.jsx";
+import CollapseButton from "./components/collapseButton.jsx";
import Divider from "@mui/material/Divider";
-import NavItem from "./components/navItem";
-import AuthFooter from "./components/authFooter";
+import NavItem from "./components/navItem.jsx";
+import AuthFooter from "./components/authFooter.jsx";
-import StarPrompt from "../StarPrompt";
-import LockSvg from "../../assets/icons/lock.svg?react";
-import UserSvg from "../../assets/icons/user.svg?react";
-import TeamSvg from "../../assets/icons/user-two.svg?react";
-import Support from "../../assets/icons/support.svg?react";
-import Maintenance from "../../assets/icons/maintenance.svg?react";
-import Monitors from "../../assets/icons/monitors.svg?react";
-import Incidents from "../../assets/icons/incidents.svg?react";
-import Integrations from "../../assets/icons/integrations.svg?react";
-import PageSpeed from "../../assets/icons/page-speed.svg?react";
-import Settings from "../../assets/icons/settings.svg?react";
-import ChangeLog from "../../assets/icons/changeLog.svg?react";
-import Docs from "../../assets/icons/docs.svg?react";
-import StatusPages from "../../assets/icons/status-pages.svg?react";
-import Discussions from "../../assets/icons/discussions.svg?react";
-import Notifications from "../../assets/icons/notifications.svg?react";
-import Logs from "../../assets/icons/logs.svg?react";
+import StarPrompt from "../StarPrompt/index.jsx";
+import LockSvg from "../../../assets/icons/lock.svg?react";
+import UserSvg from "../../../assets/icons/user.svg?react";
+import TeamSvg from "../../../assets/icons/user-two.svg?react";
+import Support from "../../../assets/icons/support.svg?react";
+import Maintenance from "../../../assets/icons/maintenance.svg?react";
+import Monitors from "../../../assets/icons/monitors.svg?react";
+import Incidents from "../../../assets/icons/incidents.svg?react";
+import Integrations from "../../../assets/icons/integrations.svg?react";
+import PageSpeed from "../../../assets/icons/page-speed.svg?react";
+import Settings from "../../../assets/icons/settings.svg?react";
+import ChangeLog from "../../../assets/icons/changeLog.svg?react";
+import Docs from "../../../assets/icons/docs.svg?react";
+import StatusPages from "../../../assets/icons/status-pages.svg?react";
+import Discussions from "../../../assets/icons/discussions.svg?react";
+import Notifications from "../../../assets/icons/notifications.svg?react";
+import Logs from "../../../assets/icons/logs.svg?react";
// Utils
import { useTheme } from "@mui/material/styles";
diff --git a/client/src/Components/Skeletons/FullPage/index.jsx b/client/src/Components/v1/Skeletons/FullPage/index.jsx
similarity index 100%
rename from client/src/Components/Skeletons/FullPage/index.jsx
rename to client/src/Components/v1/Skeletons/FullPage/index.jsx
diff --git a/client/src/Components/StandardContainer/index.jsx b/client/src/Components/v1/StandardContainer/index.jsx
similarity index 100%
rename from client/src/Components/StandardContainer/index.jsx
rename to client/src/Components/v1/StandardContainer/index.jsx
diff --git a/client/src/Components/StarPrompt/index.jsx b/client/src/Components/v1/StarPrompt/index.jsx
similarity index 97%
rename from client/src/Components/StarPrompt/index.jsx
rename to client/src/Components/v1/StarPrompt/index.jsx
index f5f130387..6151544c1 100644
--- a/client/src/Components/StarPrompt/index.jsx
+++ b/client/src/Components/v1/StarPrompt/index.jsx
@@ -4,7 +4,7 @@ import CloseIcon from "@mui/icons-material/Close";
import { useTheme } from "@emotion/react";
import { useSelector, useDispatch } from "react-redux";
import { useTranslation } from "react-i18next";
-import { setStarPromptOpen } from "../../Features/UI/uiSlice";
+import { setStarPromptOpen } from "../../../Features/UI/uiSlice.js";
const StarPrompt = ({ repoUrl = "https://github.com/bluewave-labs/checkmate" }) => {
const theme = useTheme();
diff --git a/client/src/Components/StatBox/index.jsx b/client/src/Components/v1/StatBox/index.jsx
similarity index 97%
rename from client/src/Components/StatBox/index.jsx
rename to client/src/Components/v1/StatBox/index.jsx
index 15eb61f74..1b5f1cf6f 100644
--- a/client/src/Components/StatBox/index.jsx
+++ b/client/src/Components/v1/StatBox/index.jsx
@@ -1,8 +1,8 @@
import { Stack, Typography } from "@mui/material";
-import Image from "../Image";
+import Image from "../Image/index.jsx";
import { useTheme } from "@mui/material/styles";
import PropTypes from "prop-types";
-import { useMonitorUtils } from "../../Hooks/v1/useMonitorUtils.js";
+import { useMonitorUtils } from "../../../Hooks/v1/useMonitorUtils.js";
/**
* StatBox Component
diff --git a/client/src/Components/StatusBoxes/index.jsx b/client/src/Components/v1/StatusBoxes/index.jsx
similarity index 93%
rename from client/src/Components/StatusBoxes/index.jsx
rename to client/src/Components/v1/StatusBoxes/index.jsx
index d97bb6211..a78337ba7 100644
--- a/client/src/Components/StatusBoxes/index.jsx
+++ b/client/src/Components/v1/StatusBoxes/index.jsx
@@ -1,6 +1,6 @@
// Components
import { Stack } from "@mui/material";
-import SkeletonLayout from "./skeleton";
+import SkeletonLayout from "./skeleton.jsx";
// Utils
import { useTheme } from "@mui/material/styles";
import PropTypes from "prop-types";
diff --git a/client/src/Components/StatusBoxes/skeleton.jsx b/client/src/Components/v1/StatusBoxes/skeleton.jsx
similarity index 100%
rename from client/src/Components/StatusBoxes/skeleton.jsx
rename to client/src/Components/v1/StatusBoxes/skeleton.jsx
diff --git a/client/src/Components/Subheader/index.jsx b/client/src/Components/v1/Subheader/index.jsx
similarity index 100%
rename from client/src/Components/Subheader/index.jsx
rename to client/src/Components/v1/Subheader/index.jsx
diff --git a/client/src/Components/Tab/index.jsx b/client/src/Components/v1/Tab/index.jsx
similarity index 100%
rename from client/src/Components/Tab/index.jsx
rename to client/src/Components/v1/Tab/index.jsx
diff --git a/client/src/Components/Table/TablePagination/Actions/index.jsx b/client/src/Components/v1/Table/TablePagination/Actions/index.jsx
similarity index 95%
rename from client/src/Components/Table/TablePagination/Actions/index.jsx
rename to client/src/Components/v1/Table/TablePagination/Actions/index.jsx
index dec72446b..0df62878e 100644
--- a/client/src/Components/Table/TablePagination/Actions/index.jsx
+++ b/client/src/Components/v1/Table/TablePagination/Actions/index.jsx
@@ -1,7 +1,7 @@
import PropTypes from "prop-types";
import { Box, Button } from "@mui/material";
-import LeftArrow from "../../../ArrowLeft";
-import RightArrow from "../../../ArrowRight";
+import LeftArrow from "../../../ArrowLeft/index.jsx";
+import RightArrow from "../../../ArrowRight/index.jsx";
import { useTheme } from "@emotion/react";
TablePaginationActions.propTypes = {
diff --git a/client/src/Components/Table/TablePagination/index.jsx b/client/src/Components/v1/Table/TablePagination/index.jsx
similarity index 96%
rename from client/src/Components/Table/TablePagination/index.jsx
rename to client/src/Components/v1/Table/TablePagination/index.jsx
index 44b127d45..8a5af0cd5 100644
--- a/client/src/Components/Table/TablePagination/index.jsx
+++ b/client/src/Components/v1/Table/TablePagination/index.jsx
@@ -1,8 +1,8 @@
import PropTypes from "prop-types";
import { useTheme } from "@emotion/react";
import { Stack, TablePagination, Typography } from "@mui/material";
-import { TablePaginationActions } from "./Actions";
-import SelectorVertical from "../../../assets/icons/selector-vertical.svg?react";
+import { TablePaginationActions } from "./Actions/index.jsx";
+import SelectorVertical from "../../../../assets/icons/selector-vertical.svg?react";
Pagination.propTypes = {
paginationLabel: PropTypes.string, // Label for the pagination.
diff --git a/client/src/Components/Table/TableUtils.js b/client/src/Components/v1/Table/TableUtils.js
similarity index 100%
rename from client/src/Components/Table/TableUtils.js
rename to client/src/Components/v1/Table/TableUtils.js
diff --git a/client/src/Components/Table/index.jsx b/client/src/Components/v1/Table/index.jsx
similarity index 99%
rename from client/src/Components/Table/index.jsx
rename to client/src/Components/v1/Table/index.jsx
index bfafb5387..2113a2215 100644
--- a/client/src/Components/Table/index.jsx
+++ b/client/src/Components/v1/Table/index.jsx
@@ -8,7 +8,7 @@ import {
TableRow,
} from "@mui/material";
import Tooltip from "@mui/material/Tooltip";
-import SkeletonLayout from "./skeleton";
+import SkeletonLayout from "./skeleton.jsx";
import PropTypes from "prop-types";
import { useTheme } from "@emotion/react";
diff --git a/client/src/Components/Table/skeleton.jsx b/client/src/Components/v1/Table/skeleton.jsx
similarity index 100%
rename from client/src/Components/Table/skeleton.jsx
rename to client/src/Components/v1/Table/skeleton.jsx
diff --git a/client/src/Components/TextLink/index.jsx b/client/src/Components/v1/TextLink/index.jsx
similarity index 100%
rename from client/src/Components/TextLink/index.jsx
rename to client/src/Components/v1/TextLink/index.jsx
diff --git a/client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx b/client/src/Components/v1/ThemeSwitch/SunAndMoonIcon.jsx
similarity index 100%
rename from client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx
rename to client/src/Components/v1/ThemeSwitch/SunAndMoonIcon.jsx
diff --git a/client/src/Components/ThemeSwitch/index.css b/client/src/Components/v1/ThemeSwitch/index.css
similarity index 100%
rename from client/src/Components/ThemeSwitch/index.css
rename to client/src/Components/v1/ThemeSwitch/index.css
diff --git a/client/src/Components/ThemeSwitch/index.jsx b/client/src/Components/v1/ThemeSwitch/index.jsx
similarity index 91%
rename from client/src/Components/ThemeSwitch/index.jsx
rename to client/src/Components/v1/ThemeSwitch/index.jsx
index 5efb17419..60763da90 100644
--- a/client/src/Components/ThemeSwitch/index.jsx
+++ b/client/src/Components/v1/ThemeSwitch/index.jsx
@@ -10,9 +10,9 @@
*/
import { IconButton } from "@mui/material";
-import SunAndMoonIcon from "./SunAndMoonIcon";
+import SunAndMoonIcon from "./SunAndMoonIcon.jsx";
import { useDispatch, useSelector } from "react-redux";
-import { setMode } from "../../Features/UI/uiSlice";
+import { setMode } from "../../../Features/UI/uiSlice.js";
import "./index.css";
import { useTranslation } from "react-i18next";
diff --git a/client/src/Components/Toast/body.jsx b/client/src/Components/v1/Toast/body.jsx
similarity index 100%
rename from client/src/Components/Toast/body.jsx
rename to client/src/Components/v1/Toast/body.jsx
diff --git a/client/src/Components/Toast/index.jsx b/client/src/Components/v1/Toast/index.jsx
similarity index 98%
rename from client/src/Components/Toast/index.jsx
rename to client/src/Components/v1/Toast/index.jsx
index 36df0e631..5d66fca3f 100644
--- a/client/src/Components/Toast/index.jsx
+++ b/client/src/Components/v1/Toast/index.jsx
@@ -2,7 +2,7 @@ import Stack from "@mui/material/Stack";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
-import ToastBody from "./body";
+import ToastBody from "./body.jsx";
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined";
import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined";
diff --git a/client/src/Components/Inputs/TextInput/indexV2.tsx b/client/src/Components/v2/Inputs/TextInput.tsx
similarity index 100%
rename from client/src/Components/Inputs/TextInput/indexV2.tsx
rename to client/src/Components/v2/Inputs/TextInput.tsx
diff --git a/client/src/Pages/v1/About/index.jsx b/client/src/Pages/v1/About/index.jsx
index 0e68089d3..ff7bb6c6b 100644
--- a/client/src/Pages/v1/About/index.jsx
+++ b/client/src/Pages/v1/About/index.jsx
@@ -1,6 +1,6 @@
import React from "react";
-import AppBar from "../../../Components/Common/AppBar.jsx";
-import Footer from "../../../Components/Common/Footer.jsx";
+import AppBar from "@/Components/v1/Common/AppBar.jsx";
+import Footer from "@/Components/v1/Common/Footer.jsx";
import { useTranslation } from "react-i18next";
const AboutUs = () => {
diff --git a/client/src/Pages/v1/Account/EditUser/index.jsx b/client/src/Pages/v1/Account/EditUser/index.jsx
index 658de5144..e2e976916 100644
--- a/client/src/Pages/v1/Account/EditUser/index.jsx
+++ b/client/src/Pages/v1/Account/EditUser/index.jsx
@@ -2,9 +2,9 @@
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
-import Breadcrumbs from "../../../../Components/Breadcrumbs/index.jsx";
-import TextInput from "../../../../Components/Inputs/TextInput/index.jsx";
-import Search from "../../../../Components/Inputs/Search/index.jsx";
+import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
+import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
+import Search from "@/Components/v1/Inputs/Search/index.jsx";
import Button from "@mui/material/Button";
import RoleTable from "../components/RoleTable/index.jsx";
diff --git a/client/src/Pages/v1/Account/components/AddTeamMember/index.jsx b/client/src/Pages/v1/Account/components/AddTeamMember/index.jsx
index e17ed433b..219658b63 100644
--- a/client/src/Pages/v1/Account/components/AddTeamMember/index.jsx
+++ b/client/src/Pages/v1/Account/components/AddTeamMember/index.jsx
@@ -1,7 +1,7 @@
import { Button, Stack } from "@mui/material";
-import { GenericDialog } from "../../../../../Components/Dialog/genericDialog.jsx";
-import TextInput from "../../../../../Components/Inputs/TextInput/index.jsx";
-import Select from "../../../../../Components/Inputs/Select/index.jsx";
+import { GenericDialog } from "@/Components/v1/Dialog/genericDialog.jsx";
+import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
+import Select from "@/Components/v1/Inputs/Select/index.jsx";
import { useGetInviteToken } from "../../../../../Hooks/v1/inviteHooks.js";
import { useTheme } from "@emotion/react";
import { useTranslation } from "react-i18next";
@@ -10,7 +10,7 @@ import { useState } from "react";
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 { PasswordEndAdornment } from "@/Components/v1/Inputs/TextInput/Adornments/index.jsx";
import PropTypes from "prop-types";
const INITIAL_FORM_STATE = {
diff --git a/client/src/Pages/v1/Account/components/PasswordPanel.jsx b/client/src/Pages/v1/Account/components/PasswordPanel.jsx
index 11961bf58..ca2af9205 100644
--- a/client/src/Pages/v1/Account/components/PasswordPanel.jsx
+++ b/client/src/Pages/v1/Account/components/PasswordPanel.jsx
@@ -2,10 +2,10 @@ 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/index.jsx";
-import TextInput from "../../../../Components/Inputs/TextInput/index.jsx";
+import { PasswordEndAdornment } from "@/Components/v1/Inputs/TextInput/Adornments/index.jsx";
+import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
import { newOrChangedCredentials } from "../../../../Validation/validation.js";
-import Alert from "../../../../Components/Alert/index.jsx";
+import Alert from "@/Components/v1/Alert/index.jsx";
import { update } from "../../../../Features/Auth/authSlice.js";
import { useDispatch, useSelector } from "react-redux";
import { createToast } from "../../../../Utils/toastUtils.jsx";
diff --git a/client/src/Pages/v1/Account/components/ProfilePanel.jsx b/client/src/Pages/v1/Account/components/ProfilePanel.jsx
index 1ce1d34da..2035861a2 100644
--- a/client/src/Pages/v1/Account/components/ProfilePanel.jsx
+++ b/client/src/Pages/v1/Account/components/ProfilePanel.jsx
@@ -2,9 +2,9 @@ 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/index.jsx";
-import TextInput from "../../../../Components/Inputs/TextInput/index.jsx";
-import ImageUpload from "../../../../Components/Inputs/ImageUpload/index.jsx";
+import Avatar from "@/Components/v1/Avatar/index.jsx";
+import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
+import ImageUpload from "@/Components/v1/Inputs/ImageUpload/index.jsx";
import { newOrChangedCredentials } from "../../../../Validation/validation.js";
import { useDispatch, useSelector } from "react-redux";
import {
@@ -14,8 +14,8 @@ import {
} 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 { GenericDialog } from "@/Components/v1/Dialog/genericDialog.jsx";
+import Dialog from "@/Components/v1/Dialog/index.jsx";
import { useTranslation } from "react-i18next";
/**
diff --git a/client/src/Pages/v1/Account/components/RoleTable/index.jsx b/client/src/Pages/v1/Account/components/RoleTable/index.jsx
index c42be7bcd..02dcaaf0d 100644
--- a/client/src/Pages/v1/Account/components/RoleTable/index.jsx
+++ b/client/src/Pages/v1/Account/components/RoleTable/index.jsx
@@ -1,5 +1,5 @@
import Typography from "@mui/material/Typography";
-import DataTable from "../../../../../Components/Table/index.jsx";
+import DataTable from "@/Components/v1/Table/index.jsx";
import DeleteOutlineRoundedIcon from "@mui/icons-material/DeleteOutlineRounded";
import { useTranslation } from "react-i18next";
diff --git a/client/src/Pages/v1/Account/components/TeamPanel.jsx b/client/src/Pages/v1/Account/components/TeamPanel.jsx
index 8964cd277..02918eb30 100644
--- a/client/src/Pages/v1/Account/components/TeamPanel.jsx
+++ b/client/src/Pages/v1/Account/components/TeamPanel.jsx
@@ -3,14 +3,14 @@ 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/index.jsx";
+import TextInput from "@/Components/v1/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 Select from "@/Components/v1/Inputs/Select/index.jsx";
+import { GenericDialog } from "@/Components/v1/Dialog/genericDialog.jsx";
import AddTeamMember from "./AddTeamMember/index.jsx";
-import DataTable from "../../../../Components/Table/index.jsx";
+import DataTable from "@/Components/v1/Table/index.jsx";
import { useGetInviteToken } from "../../../../Hooks/v1/inviteHooks.js";
import { useNavigate } from "react-router-dom";
import { useIsSuperAdmin } from "../../../../Hooks/v1/useIsAdmin.js";
diff --git a/client/src/Pages/v1/Account/index.jsx b/client/src/Pages/v1/Account/index.jsx
index a496858b7..ae16ff9d7 100644
--- a/client/src/Pages/v1/Account/index.jsx
+++ b/client/src/Pages/v1/Account/index.jsx
@@ -3,7 +3,7 @@ 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/index.jsx";
+import CustomTabList from "@/Components/v1/Tab/index.jsx";
import TabContext from "@mui/lab/TabContext";
import ProfilePanel from "./components/ProfilePanel.jsx";
import PasswordPanel from "./components/PasswordPanel.jsx";
diff --git a/client/src/Pages/v1/Auth/CheckEmail.jsx b/client/src/Pages/v1/Auth/CheckEmail.jsx
index 95217bcb5..c12a84804 100644
--- a/client/src/Pages/v1/Auth/CheckEmail.jsx
+++ b/client/src/Pages/v1/Auth/CheckEmail.jsx
@@ -9,7 +9,7 @@ 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/index.jsx";
+import IconBox from "@/Components/v1/IconBox/index.jsx";
import "./index.css";
const CheckEmail = () => {
diff --git a/client/src/Pages/v1/Auth/ForgotPassword.jsx b/client/src/Pages/v1/Auth/ForgotPassword.jsx
index 9836f5d77..8cbd85d8a 100644
--- a/client/src/Pages/v1/Auth/ForgotPassword.jsx
+++ b/client/src/Pages/v1/Auth/ForgotPassword.jsx
@@ -6,11 +6,11 @@ import { forgotPassword } from "../../../Features/Auth/authSlice.js";
import { useEffect, useState } from "react";
import { newOrChangedCredentials } from "../../../Validation/validation.js";
import { useNavigate } from "react-router-dom";
-import TextInput from "../../../Components/Inputs/TextInput/index.jsx";
+import TextInput from "@/Components/v1/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 IconBox from "@/Components/v1/IconBox/index.jsx";
import { Trans, useTranslation } from "react-i18next";
import "./index.css";
diff --git a/client/src/Pages/v1/Auth/Login/index.jsx b/client/src/Pages/v1/Auth/Login/index.jsx
index 901edcd8b..7f5dcb5e4 100644
--- a/client/src/Pages/v1/Auth/Login/index.jsx
+++ b/client/src/Pages/v1/Auth/Login/index.jsx
@@ -1,9 +1,9 @@
// Components
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
-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 TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
+import { PasswordEndAdornment } from "@/Components/v1/Inputs/TextInput/Adornments/index.jsx";
+import TextLink from "@/Components/v1/TextLink/index.jsx";
import AuthPageWrapper from "../components/AuthPageWrapper.jsx";
// Utils
import { useTheme } from "@mui/material/styles";
diff --git a/client/src/Pages/v1/Auth/NewPasswordConfirmed.jsx b/client/src/Pages/v1/Auth/NewPasswordConfirmed.jsx
index 2bede1ae4..629494098 100644
--- a/client/src/Pages/v1/Auth/NewPasswordConfirmed.jsx
+++ b/client/src/Pages/v1/Auth/NewPasswordConfirmed.jsx
@@ -6,7 +6,7 @@ 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 IconBox from "@/Components/v1/IconBox/index.jsx";
import { Trans, useTranslation } from "react-i18next";
import "./index.css";
diff --git a/client/src/Pages/v1/Auth/Register/index.jsx b/client/src/Pages/v1/Auth/Register/index.jsx
index a903602d4..d6515b85c 100644
--- a/client/src/Pages/v1/Auth/Register/index.jsx
+++ b/client/src/Pages/v1/Auth/Register/index.jsx
@@ -1,7 +1,7 @@
// Components
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
-import TextInput from "../../../../Components/Inputs/TextInput/index.jsx";
+import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
import Button from "@mui/material/Button";
import Box from "@mui/material/Box";
import PasswordTooltip from "../components/PasswordTooltip.jsx";
diff --git a/client/src/Pages/v1/Auth/SetNewPassword.jsx b/client/src/Pages/v1/Auth/SetNewPassword.jsx
index e9df89d88..45f3351f3 100644
--- a/client/src/Pages/v1/Auth/SetNewPassword.jsx
+++ b/client/src/Pages/v1/Auth/SetNewPassword.jsx
@@ -7,10 +7,10 @@ import { Box, Stack, Typography, Button } from "@mui/material";
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 Check from "@/Components/v1/Check/Check.jsx";
+import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
+import { PasswordEndAdornment } from "@/Components/v1/Inputs/TextInput/Adornments/index.jsx";
+import IconBox from "@/Components/v1/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";
diff --git a/client/src/Pages/v1/Auth/components/AuthHeader.jsx b/client/src/Pages/v1/Auth/components/AuthHeader.jsx
index 067c47d92..a34e83d6a 100644
--- a/client/src/Pages/v1/Auth/components/AuthHeader.jsx
+++ b/client/src/Pages/v1/Auth/components/AuthHeader.jsx
@@ -3,7 +3,7 @@ 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.jsx";
-import ThemeSwitch from "../../../../Components/ThemeSwitch/index.jsx";
+import ThemeSwitch from "@/Components/v1/ThemeSwitch/index.jsx";
// Utils
import { useTheme } from "@mui/material/styles";
diff --git a/client/src/Pages/v1/Auth/components/PasswordTooltip.jsx b/client/src/Pages/v1/Auth/components/PasswordTooltip.jsx
index ff3c2f385..2881eb001 100644
--- a/client/src/Pages/v1/Auth/components/PasswordTooltip.jsx
+++ b/client/src/Pages/v1/Auth/components/PasswordTooltip.jsx
@@ -1,4 +1,4 @@
-import Check from "../../../../Components/Check/Check.jsx";
+import Check from "@/Components/v1/Check/Check.jsx";
import Stack from "@mui/material/Stack";
import { Tooltip, useTheme } from "@mui/material";
import { useTranslation } from "react-i18next";
diff --git a/client/src/Pages/v1/Incidents/Components/IncidentTable/index.jsx b/client/src/Pages/v1/Incidents/Components/IncidentTable/index.jsx
index e204d7167..df457c0e2 100644
--- a/client/src/Pages/v1/Incidents/Components/IncidentTable/index.jsx
+++ b/client/src/Pages/v1/Incidents/Components/IncidentTable/index.jsx
@@ -1,16 +1,16 @@
//Components
import Stack from "@mui/material/Stack";
-import DataTable from "../../../../../Components/Table/index.jsx";
+import DataTable from "@/Components/v1/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.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";
+import TableSkeleton from "@/Components/v1/Table/skeleton.jsx";
+import Pagination from "@/Components/v1/Table/TablePagination/index.jsx";
+import { StatusLabel } from "@/Components/v1/Label/index.jsx";
+import { HttpStatusLabel } from "@/Components/v1/HttpStatusLabel/index.jsx";
+import GenericFallback from "@/Components/v1/GenericFallback/index.jsx";
+import NetworkError from "@/Components/v1/GenericFallback/NetworkError.jsx";
//Utils
import { formatDateWithTz } from "../../../../../Utils/timeUtils.js";
diff --git a/client/src/Pages/v1/Incidents/Components/OptionsHeader/index.jsx b/client/src/Pages/v1/Incidents/Components/OptionsHeader/index.jsx
index b1bde1175..c16f54f18 100644
--- a/client/src/Pages/v1/Incidents/Components/OptionsHeader/index.jsx
+++ b/client/src/Pages/v1/Incidents/Components/OptionsHeader/index.jsx
@@ -1,6 +1,6 @@
// Components
import { Stack, Typography, Button, ButtonGroup } from "@mui/material";
-import Select from "../../../../../Components/Inputs/Select/index.jsx";
+import Select from "@/Components/v1/Inputs/Select/index.jsx";
import PropTypes from "prop-types";
//Utils
diff --git a/client/src/Pages/v1/Incidents/index.jsx b/client/src/Pages/v1/Incidents/index.jsx
index b9281f97c..3c0d7f60f 100644
--- a/client/src/Pages/v1/Incidents/index.jsx
+++ b/client/src/Pages/v1/Incidents/index.jsx
@@ -1,7 +1,7 @@
// Components
import { Stack } from "@mui/material";
-import Breadcrumbs from "../../../Components/Breadcrumbs/index.jsx";
-import GenericFallback from "../../../Components/GenericFallback/index.jsx";
+import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
+import GenericFallback from "@/Components/v1/GenericFallback/index.jsx";
import IncidentTable from "./Components/IncidentTable/index.jsx";
import OptionsHeader from "./Components/OptionsHeader/index.jsx";
import StatusBoxes from "./Components/StatusBoxes/index.jsx";
@@ -13,7 +13,7 @@ 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.jsx";
+import NetworkError from "@/Components/v1/GenericFallback/NetworkError.jsx";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom";
diff --git a/client/src/Pages/v1/Infrastructure/Create/Components/CustomAlertsSection.jsx b/client/src/Pages/v1/Infrastructure/Create/Components/CustomAlertsSection.jsx
index 299331a79..5fe1d8984 100644
--- a/client/src/Pages/v1/Infrastructure/Create/Components/CustomAlertsSection.jsx
+++ b/client/src/Pages/v1/Infrastructure/Create/Components/CustomAlertsSection.jsx
@@ -1,4 +1,4 @@
-import ConfigBox from "../../../../../Components/ConfigBox/index.jsx";
+import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
import { Box, Stack, Typography } from "@mui/material";
import { CustomThreshold } from "./CustomThreshold/index.jsx";
import { capitalizeFirstLetter } from "../../../../../Utils/stringUtils.js";
diff --git a/client/src/Pages/v1/Infrastructure/Create/Components/CustomThreshold/index.jsx b/client/src/Pages/v1/Infrastructure/Create/Components/CustomThreshold/index.jsx
index 4edc0b766..d783f7985 100644
--- a/client/src/Pages/v1/Infrastructure/Create/Components/CustomThreshold/index.jsx
+++ b/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/index.jsx";
-import Checkbox from "../../../../../../Components/Inputs/Checkbox/index.jsx";
+import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
+import Checkbox from "@/Components/v1/Inputs/Checkbox/index.jsx";
import { useTheme } from "@emotion/react";
import PropTypes from "prop-types";
diff --git a/client/src/Pages/v1/Infrastructure/Create/Components/MonitorActionButtons.jsx b/client/src/Pages/v1/Infrastructure/Create/Components/MonitorActionButtons.jsx
index 16df8ad01..871fe0d7b 100644
--- a/client/src/Pages/v1/Infrastructure/Create/Components/MonitorActionButtons.jsx
+++ b/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/index.jsx";
+import Dialog from "@/Components/v1/Dialog/index.jsx";
import PropTypes from "prop-types";
const MonitorActionButtons = ({ monitor, isBusy, handlePause, handleRemove }) => {
diff --git a/client/src/Pages/v1/Infrastructure/Create/Components/MonitorStatusHeader.jsx b/client/src/Pages/v1/Infrastructure/Create/Components/MonitorStatusHeader.jsx
index 4313c34c0..570f38a7e 100644
--- a/client/src/Pages/v1/Infrastructure/Create/Components/MonitorStatusHeader.jsx
+++ b/client/src/Pages/v1/Infrastructure/Create/Components/MonitorStatusHeader.jsx
@@ -2,7 +2,7 @@ import { Box, Stack, Tooltip, Typography } from "@mui/material";
import { useMonitorUtils } from "../../../../../Hooks/v1/useMonitorUtils.js";
import { useTheme } from "@emotion/react";
import { useTranslation } from "react-i18next";
-import PulseDot from "../../../../../Components/Animated/PulseDot.jsx";
+import PulseDot from "@/Components/v1/Animated/PulseDot.jsx";
import PropTypes from "prop-types";
const MonitorStatusHeader = ({ monitor, infrastructureMonitor }) => {
const theme = useTheme();
diff --git a/client/src/Pages/v1/Infrastructure/Create/index.jsx b/client/src/Pages/v1/Infrastructure/Create/index.jsx
index 06ecdff6c..d4fd859ec 100644
--- a/client/src/Pages/v1/Infrastructure/Create/index.jsx
+++ b/client/src/Pages/v1/Infrastructure/Create/index.jsx
@@ -1,17 +1,17 @@
//Components
-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 Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
+import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
+import FieldWrapper from "@/Components/v1/Inputs/FieldWrapper/index.jsx";
+import Link from "@/Components/v1/Link/index.jsx";
+import Select from "@/Components/v1/Inputs/Select/index.jsx";
+import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
import { Box, Stack, Typography, Button, ButtonGroup } from "@mui/material";
-import { HttpAdornment } from "../../../../Components/Inputs/TextInput/Adornments/index.jsx";
+import { HttpAdornment } from "@/Components/v1/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/index.jsx";
+import NotificationsConfig from "@/Components/v1/NotificationConfig/index.jsx";
import { useGetNotificationsByTeamId } from "../../../../Hooks/v1/useNotifications.js";
import { useParams } from "react-router-dom";
import { useState, useEffect } from "react";
diff --git a/client/src/Pages/v1/Infrastructure/Details/Components/AreaChartBoxes/InfraAreaChart.jsx b/client/src/Pages/v1/Infrastructure/Details/Components/AreaChartBoxes/InfraAreaChart.jsx
index 47f33a5e6..ee100bb0e 100644
--- a/client/src/Pages/v1/Infrastructure/Details/Components/AreaChartBoxes/InfraAreaChart.jsx
+++ b/client/src/Pages/v1/Infrastructure/Details/Components/AreaChartBoxes/InfraAreaChart.jsx
@@ -1,7 +1,7 @@
// Components
import { Typography } from "@mui/material";
import BaseContainer from "../BaseContainer/index.jsx";
-import AreaChart from "../../../../../../Components/Charts/AreaChart/index.jsx";
+import AreaChart from "@/Components/v1/Charts/AreaChart/index.jsx";
// Utils
import { useTheme } from "@emotion/react";
import { useHardwareUtils } from "../../Hooks/useHardwareUtils.jsx";
diff --git a/client/src/Pages/v1/Infrastructure/Details/Components/AreaChartBoxes/index.jsx b/client/src/Pages/v1/Infrastructure/Details/Components/AreaChartBoxes/index.jsx
index 3dfb4edd8..3465683d9 100644
--- a/client/src/Pages/v1/Infrastructure/Details/Components/AreaChartBoxes/index.jsx
+++ b/client/src/Pages/v1/Infrastructure/Details/Components/AreaChartBoxes/index.jsx
@@ -9,7 +9,7 @@ import {
TzTick,
InfrastructureTooltip,
TemperatureTooltip,
-} from "../../../../../../Components/Charts/Utils/chartUtils.jsx";
+} from "@/Components/v1/Charts/Utils/chartUtils.jsx";
import { useTheme } from "@emotion/react";
import { useHardwareUtils } from "../../Hooks/useHardwareUtils.jsx";
import { useTranslation } from "react-i18next";
diff --git a/client/src/Pages/v1/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx b/client/src/Pages/v1/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx
index 5c55119ad..cd61b7109 100644
--- a/client/src/Pages/v1/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx
+++ b/client/src/Pages/v1/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx
@@ -1,5 +1,5 @@
// Components
-import CustomGauge from "../../../../../../Components/Charts/CustomGauge/index.jsx";
+import CustomGauge from "@/Components/v1/Charts/CustomGauge/index.jsx";
import BaseContainer from "../BaseContainer/index.jsx";
import { Stack, Typography, Box } from "@mui/material";
// Utils
diff --git a/client/src/Pages/v1/Infrastructure/Details/Components/NetworkStats/NetworkCharts.jsx b/client/src/Pages/v1/Infrastructure/Details/Components/NetworkStats/NetworkCharts.jsx
index 5cfdba350..d9f93311c 100644
--- a/client/src/Pages/v1/Infrastructure/Details/Components/NetworkStats/NetworkCharts.jsx
+++ b/client/src/Pages/v1/Infrastructure/Details/Components/NetworkStats/NetworkCharts.jsx
@@ -6,7 +6,7 @@ import {
TzTick,
InfrastructureTooltip,
NetworkTick,
-} from "../../../../../../Components/Charts/Utils/chartUtils.jsx";
+} from "@/Components/v1/Charts/Utils/chartUtils.jsx";
import { useTheme } from "@emotion/react";
import { useTranslation } from "react-i18next";
import { useHardwareUtils } from "../../Hooks/useHardwareUtils.jsx";
diff --git a/client/src/Pages/v1/Infrastructure/Details/Components/NetworkStats/NetworkStatBoxes.jsx b/client/src/Pages/v1/Infrastructure/Details/Components/NetworkStats/NetworkStatBoxes.jsx
index 52ccf0805..0747dfcd1 100644
--- a/client/src/Pages/v1/Infrastructure/Details/Components/NetworkStats/NetworkStatBoxes.jsx
+++ b/client/src/Pages/v1/Infrastructure/Details/Components/NetworkStats/NetworkStatBoxes.jsx
@@ -1,6 +1,6 @@
import PropTypes from "prop-types";
-import StatusBoxes from "../../../../../../Components/StatusBoxes/index.jsx";
-import StatBox from "../../../../../../Components/StatBox/index.jsx";
+import StatusBoxes from "@/Components/v1/StatusBoxes/index.jsx";
+import StatBox from "@/Components/v1/StatBox/index.jsx";
import { Typography } from "@mui/material";
import { useTranslation } from "react-i18next";
import { useHardwareUtils } from "../../Hooks/useHardwareUtils.jsx";
diff --git a/client/src/Pages/v1/Infrastructure/Details/Components/NetworkStats/index.jsx b/client/src/Pages/v1/Infrastructure/Details/Components/NetworkStats/index.jsx
index e0d6986e1..78db333e6 100644
--- a/client/src/Pages/v1/Infrastructure/Details/Components/NetworkStats/index.jsx
+++ b/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/index.jsx";
+import Select from "@/Components/v1/Inputs/Select/index.jsx";
import NetworkStatBoxes from "./NetworkStatBoxes.jsx";
import NetworkCharts from "./NetworkCharts.jsx";
-import MonitorTimeFrameHeader from "../../../../../../Components/MonitorTimeFrameHeader/index.jsx";
+import MonitorTimeFrameHeader from "@/Components/v1/MonitorTimeFrameHeader/index.jsx";
const getAvailableInterfaces = (net) => {
return (net || []).map((iface) => iface.name).filter(Boolean);
diff --git a/client/src/Pages/v1/Infrastructure/Details/Components/StatusBoxes/index.jsx b/client/src/Pages/v1/Infrastructure/Details/Components/StatusBoxes/index.jsx
index 47862449e..7f09e82d5 100644
--- a/client/src/Pages/v1/Infrastructure/Details/Components/StatusBoxes/index.jsx
+++ b/client/src/Pages/v1/Infrastructure/Details/Components/StatusBoxes/index.jsx
@@ -1,7 +1,7 @@
// Components
import { Stack, Typography } from "@mui/material";
-import StatusBoxes from "../../../../../../Components/StatusBoxes/index.jsx";
-import StatBox from "../../../../../../Components/StatBox/index.jsx";
+import StatusBoxes from "@/Components/v1/StatusBoxes/index.jsx";
+import StatBox from "@/Components/v1/StatBox/index.jsx";
//Utils
import { useMonitorUtils } from "../../../../../../Hooks/v1/useMonitorUtils.js";
diff --git a/client/src/Pages/v1/Infrastructure/Details/index.jsx b/client/src/Pages/v1/Infrastructure/Details/index.jsx
index 04691d985..f9c51c27d 100644
--- a/client/src/Pages/v1/Infrastructure/Details/index.jsx
+++ b/client/src/Pages/v1/Infrastructure/Details/index.jsx
@@ -1,14 +1,14 @@
// Components
import { Stack, Typography, Tab } from "@mui/material";
-import Breadcrumbs from "../../../../Components/Breadcrumbs/index.jsx";
-import MonitorDetailsControlHeader from "../../../../Components/MonitorDetailsControlHeader/index.jsx";
-import MonitorTimeFrameHeader from "../../../../Components/MonitorTimeFrameHeader/index.jsx";
+import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
+import MonitorDetailsControlHeader from "@/Components/v1/MonitorDetailsControlHeader/index.jsx";
+import MonitorTimeFrameHeader from "@/Components/v1/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 GenericFallback from "@/Components/v1/GenericFallback/index.jsx";
import NetworkStats from "./Components/NetworkStats/index.jsx";
-import CustomTabList from "../../../../Components/Tab/index.jsx";
+import CustomTabList from "@/Components/v1/Tab/index.jsx";
import TabContext from "@mui/lab/TabContext";
// Utils
diff --git a/client/src/Pages/v1/Infrastructure/Monitors/Components/Filters/index.jsx b/client/src/Pages/v1/Infrastructure/Monitors/Components/Filters/index.jsx
index bef632e88..70bf502af 100644
--- a/client/src/Pages/v1/Infrastructure/Monitors/Components/Filters/index.jsx
+++ b/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/index.jsx";
+import FilterHeader from "@/Components/v1/FilterHeader/index.jsx";
import { useMemo } from "react";
import { Box, Button } from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
diff --git a/client/src/Pages/v1/Infrastructure/Monitors/Components/MonitorsTable/index.jsx b/client/src/Pages/v1/Infrastructure/Monitors/Components/MonitorsTable/index.jsx
index 801a9bc6a..cc2cd5f98 100644
--- a/client/src/Pages/v1/Infrastructure/Monitors/Components/MonitorsTable/index.jsx
+++ b/client/src/Pages/v1/Infrastructure/Monitors/Components/MonitorsTable/index.jsx
@@ -1,14 +1,14 @@
// Components
import { Box } from "@mui/material";
-import DataTable from "../../../../../../Components/Table/index.jsx";
-import Host from "../../../../../../Components/Host/index.jsx";
-import { StatusLabel } from "../../../../../../Components/Label/index.jsx";
+import DataTable from "@/Components/v1/Table/index.jsx";
+import Host from "@/Components/v1/Host/index.jsx";
+import { StatusLabel } from "@/Components/v1/Label/index.jsx";
import { Stack } from "@mui/material";
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/index.jsx";
+import CustomGauge from "@/Components/v1/Charts/CustomGauge/index.jsx";
// Utils
import { useTheme } from "@emotion/react";
diff --git a/client/src/Pages/v1/Infrastructure/Monitors/Components/MonitorsTableMenu/index.jsx b/client/src/Pages/v1/Infrastructure/Monitors/Components/MonitorsTableMenu/index.jsx
index c2270c691..d3af34d00 100644
--- a/client/src/Pages/v1/Infrastructure/Monitors/Components/MonitorsTableMenu/index.jsx
+++ b/client/src/Pages/v1/Infrastructure/Monitors/Components/MonitorsTableMenu/index.jsx
@@ -7,7 +7,7 @@ import { createToast } from "../../../../../../Utils/toastUtils.jsx";
import { IconButton, Menu, MenuItem } from "@mui/material";
import Settings from "../../../../../../assets/icons/settings-bold.svg?react";
import PropTypes from "prop-types";
-import Dialog from "../../../../../../Components/Dialog/index.jsx";
+import Dialog from "@/Components/v1/Dialog/index.jsx";
import { networkService } from "../../../../../../Utils/NetworkService.js";
import { usePauseMonitor } from "../../../../../../Hooks/v1/monitorHooks.js";
import { useTranslation } from "react-i18next";
diff --git a/client/src/Pages/v1/Infrastructure/Monitors/index.jsx b/client/src/Pages/v1/Infrastructure/Monitors/index.jsx
index 7fbfa1167..6c3a657ab 100644
--- a/client/src/Pages/v1/Infrastructure/Monitors/index.jsx
+++ b/client/src/Pages/v1/Infrastructure/Monitors/index.jsx
@@ -1,11 +1,11 @@
// Components
import { Stack } from "@mui/material";
-import Breadcrumbs from "../../../../Components/Breadcrumbs/index.jsx";
-import MonitorCountHeader from "../../../../Components/MonitorCountHeader/index.jsx";
-import MonitorCreateHeader from "../../../../Components/MonitorCreateHeader/index.jsx";
+import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
+import MonitorCountHeader from "@/Components/v1/MonitorCountHeader/index.jsx";
+import MonitorCreateHeader from "@/Components/v1/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 Pagination from "@/Components/v1/Table/TablePagination/index.jsx";
+import PageStateWrapper from "@/Components/v1/PageStateWrapper/index.jsx";
import Filter from "./Components/Filters/index.jsx";
import SearchComponent from "../../Uptime/Monitors/Components/SearchComponent/index.jsx";
// Utils
diff --git a/client/src/Pages/v1/Logs/Diagnostics/components/gauges/index.jsx b/client/src/Pages/v1/Logs/Diagnostics/components/gauges/index.jsx
index 082be2587..b38837cf2 100644
--- a/client/src/Pages/v1/Logs/Diagnostics/components/gauges/index.jsx
+++ b/client/src/Pages/v1/Logs/Diagnostics/components/gauges/index.jsx
@@ -1,5 +1,5 @@
import Stack from "@mui/material/Stack";
-import CustomGauge from "../../../../../../Components/Charts/CustomGauge/index.jsx";
+import CustomGauge from "@/Components/v1/Charts/CustomGauge/index.jsx";
import Typography from "@mui/material/Typography";
// Utils
diff --git a/client/src/Pages/v1/Logs/Diagnostics/index.jsx b/client/src/Pages/v1/Logs/Diagnostics/index.jsx
index d7a1a8a7c..54feee516 100644
--- a/client/src/Pages/v1/Logs/Diagnostics/index.jsx
+++ b/client/src/Pages/v1/Logs/Diagnostics/index.jsx
@@ -2,8 +2,8 @@ import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import Gauges from "./components/gauges/index.jsx";
import Button from "@mui/material/Button";
-import StatBox from "../../../../Components/StatBox/index.jsx";
-import StatusBoxes from "../../../../Components/StatusBoxes/index.jsx";
+import StatBox from "@/Components/v1/StatBox/index.jsx";
+import StatusBoxes from "@/Components/v1/StatusBoxes/index.jsx";
import { useTheme } from "@emotion/react";
import { useTranslation } from "react-i18next";
import { useFetchDiagnostics } from "../../../../Hooks/v1/logHooks.js";
diff --git a/client/src/Pages/v1/Logs/Logs/index.jsx b/client/src/Pages/v1/Logs/Logs/index.jsx
index 5c7ad9fa9..64c4cb97a 100644
--- a/client/src/Pages/v1/Logs/Logs/index.jsx
+++ b/client/src/Pages/v1/Logs/Logs/index.jsx
@@ -1,6 +1,6 @@
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
-import Select from "../../../../Components/Inputs/Select/index.jsx";
+import Select from "@/Components/v1/Inputs/Select/index.jsx";
import Typography from "@mui/material/Typography";
import Divider from "@mui/material/Divider";
diff --git a/client/src/Pages/v1/Logs/Queue/components/FailedJobTable/index.jsx b/client/src/Pages/v1/Logs/Queue/components/FailedJobTable/index.jsx
index 46be9520c..743f52639 100644
--- a/client/src/Pages/v1/Logs/Queue/components/FailedJobTable/index.jsx
+++ b/client/src/Pages/v1/Logs/Queue/components/FailedJobTable/index.jsx
@@ -1,6 +1,6 @@
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
-import DataTable from "../../../../../../Components/Table/index.jsx";
+import DataTable from "@/Components/v1/Table/index.jsx";
import { useNavigate } from "react-router-dom";
import { useTheme } from "@emotion/react";
diff --git a/client/src/Pages/v1/Logs/Queue/components/JobTable/index.jsx b/client/src/Pages/v1/Logs/Queue/components/JobTable/index.jsx
index 4ac4069bd..7d309e845 100644
--- a/client/src/Pages/v1/Logs/Queue/components/JobTable/index.jsx
+++ b/client/src/Pages/v1/Logs/Queue/components/JobTable/index.jsx
@@ -1,5 +1,5 @@
import Stack from "@mui/material/Stack";
-import DataTable from "../../../../../../Components/Table/index.jsx";
+import DataTable from "@/Components/v1/Table/index.jsx";
import Typography from "@mui/material/Typography";
// Utils
import PropTypes from "prop-types";
@@ -7,7 +7,7 @@ import { useTheme } from "@emotion/react";
import { useNavigate } from "react-router-dom";
import { TypeToPathMap } from "../../../../../../Utils/monitorUtils.js";
import { useTranslation } from "react-i18next";
-import { createHeaderFactory } from "../../../../../../Components/Table/TableUtils.js";
+import { createHeaderFactory } from "@/Components/v1/Table/TableUtils.js";
const JobTable = ({ jobs = [] }) => {
const theme = useTheme();
diff --git a/client/src/Pages/v1/Logs/Queue/components/Metrics/index.jsx b/client/src/Pages/v1/Logs/Queue/components/Metrics/index.jsx
index dd9fdcc6a..c4f4389c3 100644
--- a/client/src/Pages/v1/Logs/Queue/components/Metrics/index.jsx
+++ b/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/index.jsx";
-import StatusBoxes from "../../../../../../Components/StatusBoxes/index.jsx";
+import StatBox from "@/Components/v1/StatBox/index.jsx";
+import StatusBoxes from "@/Components/v1/StatusBoxes/index.jsx";
import { useTranslation } from "react-i18next";
import { useTheme } from "@emotion/react";
diff --git a/client/src/Pages/v1/Logs/Queue/components/MetricsTable/index.jsx b/client/src/Pages/v1/Logs/Queue/components/MetricsTable/index.jsx
index 58f13fd5d..d96f37a20 100644
--- a/client/src/Pages/v1/Logs/Queue/components/MetricsTable/index.jsx
+++ b/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/index.jsx";
+import DataTable from "@/Components/v1/Table/index.jsx";
// Utils
import { useTranslation } from "react-i18next";
diff --git a/client/src/Pages/v1/Logs/index.jsx b/client/src/Pages/v1/Logs/index.jsx
index c6dfe4d99..e5bdf623d 100644
--- a/client/src/Pages/v1/Logs/index.jsx
+++ b/client/src/Pages/v1/Logs/index.jsx
@@ -1,5 +1,5 @@
import Stack from "@mui/material/Stack";
-import Breadcrumbs from "../../../Components/Breadcrumbs/index.jsx";
+import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import Queue from "./Queue/index.jsx";
diff --git a/client/src/Pages/v1/Maintenance/CreateMaintenance/Components/ConfigSelect/index.jsx b/client/src/Pages/v1/Maintenance/CreateMaintenance/Components/ConfigSelect/index.jsx
index b43bcbfc7..8d4c0ae53 100644
--- a/client/src/Pages/v1/Maintenance/CreateMaintenance/Components/ConfigSelect/index.jsx
+++ b/client/src/Pages/v1/Maintenance/CreateMaintenance/Components/ConfigSelect/index.jsx
@@ -1,4 +1,4 @@
-import Select from "../../../../../../Components/Inputs/Select/index.jsx";
+import Select from "@/Components/v1/Inputs/Select/index.jsx";
import PropTypes from "prop-types";
const ConfigSelect = ({ configSelection, valueSelect, onChange, ...props }) => {
const getValueById = (config, id) => {
diff --git a/client/src/Pages/v1/Maintenance/CreateMaintenance/Components/MonitorsConfig/index.jsx b/client/src/Pages/v1/Maintenance/CreateMaintenance/Components/MonitorsConfig/index.jsx
index 91e6a1531..14920d81c 100644
--- a/client/src/Pages/v1/Maintenance/CreateMaintenance/Components/MonitorsConfig/index.jsx
+++ b/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/index.jsx";
+import Search from "@/Components/v1/Inputs/Search/index.jsx";
import { useState } from "react";
-import ConfigRow from "../../../../../../Components/ConfigRow/index.jsx";
+import ConfigRow from "@/Components/v1/ConfigRow/index.jsx";
/**
* MonitorsConfig is a component that allows users to select and apply a maintenance window to a list of monitors.
diff --git a/client/src/Pages/v1/Maintenance/CreateMaintenance/index.jsx b/client/src/Pages/v1/Maintenance/CreateMaintenance/index.jsx
index da3e72d8a..d0e7b03cd 100644
--- a/client/src/Pages/v1/Maintenance/CreateMaintenance/index.jsx
+++ b/client/src/Pages/v1/Maintenance/CreateMaintenance/index.jsx
@@ -2,7 +2,7 @@ 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/index.jsx";
+import ConfigBox from "@/Components/v1/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";
@@ -14,11 +14,11 @@ 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/index.jsx";
-import Breadcrumbs from "../../../../Components/Breadcrumbs/index.jsx";
+import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
+import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
import CalendarIcon from "../../../../assets/icons/calendar.svg?react";
import "./index.css";
-import Search from "../../../../Components/Inputs/Search/index.jsx";
+import Search from "@/Components/v1/Inputs/Search/index.jsx";
import { logger } from "../../../../Utils/Logger.js";
import { useNavigate, useParams } from "react-router-dom";
diff --git a/client/src/Pages/v1/Maintenance/MaintenanceTable/ActionsMenu/index.jsx b/client/src/Pages/v1/Maintenance/MaintenanceTable/ActionsMenu/index.jsx
index cc51697f7..b2654da49 100644
--- a/client/src/Pages/v1/Maintenance/MaintenanceTable/ActionsMenu/index.jsx
+++ b/client/src/Pages/v1/Maintenance/MaintenanceTable/ActionsMenu/index.jsx
@@ -10,7 +10,7 @@ import { networkService } from "../../../../../main.jsx";
import { createToast } from "../../../../../Utils/toastUtils.jsx";
import { useTranslation } from "react-i18next";
-import Dialog from "../../../../../Components/Dialog/index.jsx";
+import Dialog from "@/Components/v1/Dialog/index.jsx";
const ActionsMenu = ({ /* isAdmin, */ maintenanceWindow, updateCallback }) => {
maintenanceWindow;
diff --git a/client/src/Pages/v1/Maintenance/MaintenanceTable/index.jsx b/client/src/Pages/v1/Maintenance/MaintenanceTable/index.jsx
index fb18cd380..f1d44f944 100644
--- a/client/src/Pages/v1/Maintenance/MaintenanceTable/index.jsx
+++ b/client/src/Pages/v1/Maintenance/MaintenanceTable/index.jsx
@@ -1,14 +1,14 @@
import PropTypes from "prop-types";
import { Box } from "@mui/material";
-import DataTable from "../../../../Components/Table/index.jsx";
-import Pagination from "../../../../Components/Table/TablePagination/index.jsx";
+import DataTable from "@/Components/v1/Table/index.jsx";
+import Pagination from "@/Components/v1/Table/TablePagination/index.jsx";
import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded";
import ActionsMenu from "./ActionsMenu/index.jsx";
import { memo } from "react";
import { useDispatch, useSelector } from "react-redux";
import { formatDurationRounded } from "../../../../Utils/timeUtils.js";
-import { StatusLabel } from "../../../../Components/Label/index.jsx";
+import { StatusLabel } from "@/Components/v1/Label/index.jsx";
import { setRowsPerPage } from "../../../../Features/UI/uiSlice.js";
import { useTranslation } from "react-i18next";
import { useTheme } from "@emotion/react";
diff --git a/client/src/Pages/v1/Maintenance/index.jsx b/client/src/Pages/v1/Maintenance/index.jsx
index a993c153f..cba0e9f18 100644
--- a/client/src/Pages/v1/Maintenance/index.jsx
+++ b/client/src/Pages/v1/Maintenance/index.jsx
@@ -5,10 +5,10 @@ import "./index.css";
import MaintenanceTable from "./MaintenanceTable/index.jsx";
import { useSelector } from "react-redux";
import { networkService } from "../../../main.jsx";
-import Breadcrumbs from "../../../Components/Breadcrumbs/index.jsx";
+import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
-import PageStateWrapper from "../../../Components/PageStateWrapper/index.jsx";
+import PageStateWrapper from "@/Components/v1/PageStateWrapper/index.jsx";
const Maintenance = () => {
const theme = useTheme();
diff --git a/client/src/Pages/v1/Notifications/create/index.jsx b/client/src/Pages/v1/Notifications/create/index.jsx
index 0d541736d..eb2b04aa6 100644
--- a/client/src/Pages/v1/Notifications/create/index.jsx
+++ b/client/src/Pages/v1/Notifications/create/index.jsx
@@ -1,13 +1,13 @@
// Components
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
-import Breadcrumbs from "../../../../Components/Breadcrumbs/index.jsx";
+import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
import Button from "@mui/material/Button";
-import ConfigBox from "../../../../Components/ConfigBox/index.jsx";
+import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
import Box from "@mui/material/Box";
-import Select from "../../../../Components/Inputs/Select/index.jsx";
-import TextInput from "../../../../Components/Inputs/TextInput/index.jsx";
-import Dialog from "../../../../Components/Dialog/index.jsx";
+import Select from "@/Components/v1/Inputs/Select/index.jsx";
+import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
+import Dialog from "@/Components/v1/Dialog/index.jsx";
// Utils
import { useState } from "react";
diff --git a/client/src/Pages/v1/Notifications/index.jsx b/client/src/Pages/v1/Notifications/index.jsx
index 5649224b6..78ec6e9bb 100644
--- a/client/src/Pages/v1/Notifications/index.jsx
+++ b/client/src/Pages/v1/Notifications/index.jsx
@@ -1,11 +1,11 @@
// Components
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
-import Breadcrumbs from "../../../Components/Breadcrumbs/index.jsx";
+import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
import Button from "@mui/material/Button";
-import DataTable from "../../../Components/Table/index.jsx";
+import DataTable from "@/Components/v1/Table/index.jsx";
import ActionMenu from "./components/ActionMenu.jsx";
-import PageStateWrapper from "../../../Components/PageStateWrapper/index.jsx";
+import PageStateWrapper from "@/Components/v1/PageStateWrapper/index.jsx";
// Utils
import { useState } from "react";
diff --git a/client/src/Pages/v1/PageSpeed/Create/index.jsx b/client/src/Pages/v1/PageSpeed/Create/index.jsx
index 7cc244848..cb856bd37 100644
--- a/client/src/Pages/v1/PageSpeed/Create/index.jsx
+++ b/client/src/Pages/v1/PageSpeed/Create/index.jsx
@@ -1,17 +1,17 @@
// Components
import { Box, Stack, Tooltip, Typography, Button, ButtonGroup } from "@mui/material";
-import ConfigBox from "../../../../Components/ConfigBox/index.jsx";
-import Select from "../../../../Components/Inputs/Select/index.jsx";
-import TextInput from "../../../../Components/Inputs/TextInput/index.jsx";
+import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
+import Select from "@/Components/v1/Inputs/Select/index.jsx";
+import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
-import Breadcrumbs from "../../../../Components/Breadcrumbs/index.jsx";
-import PulseDot from "../../../../Components/Animated/PulseDot.jsx";
+import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
+import PulseDot from "@/Components/v1/Animated/PulseDot.jsx";
import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded";
import SkeletonLayout from "./skeleton.jsx";
-import NotificationsConfig from "../../../../Components/NotificationConfig/index.jsx";
-import Dialog from "../../../../Components/Dialog/index.jsx";
-import { HttpAdornment } from "../../../../Components/Inputs/TextInput/Adornments/index.jsx";
-import Radio from "../../../../Components/Inputs/Radio/index.jsx";
+import NotificationsConfig from "@/Components/v1/NotificationConfig/index.jsx";
+import Dialog from "@/Components/v1/Dialog/index.jsx";
+import { HttpAdornment } from "@/Components/v1/Inputs/TextInput/Adornments/index.jsx";
+import Radio from "@/Components/v1/Inputs/Radio/index.jsx";
// Utils
import { useState, useEffect } from "react";
diff --git a/client/src/Pages/v1/PageSpeed/Details/Components/Charts/AreaChartLegend.jsx b/client/src/Pages/v1/PageSpeed/Details/Components/Charts/AreaChartLegend.jsx
index cb6f18bd2..c0da1600f 100644
--- a/client/src/Pages/v1/PageSpeed/Details/Components/Charts/AreaChartLegend.jsx
+++ b/client/src/Pages/v1/PageSpeed/Details/Components/Charts/AreaChartLegend.jsx
@@ -1,7 +1,7 @@
import { Box, Typography, Divider } from "@mui/material";
-import Checkbox from "../../../../../../Components/Inputs/Checkbox/index.jsx";
+import Checkbox from "@/Components/v1/Inputs/Checkbox/index.jsx";
import MetricsIcon from "../../../../../../assets/icons/ruler-icon.svg?react";
-import LegendBox from "../../../../../../Components/Charts/LegendBox/index.jsx";
+import LegendBox from "@/Components/v1/Charts/LegendBox/index.jsx";
import { useTranslation } from "react-i18next";
import { useTheme } from "@emotion/react";
diff --git a/client/src/Pages/v1/PageSpeed/Details/Components/Charts/PieChartLegend.jsx b/client/src/Pages/v1/PageSpeed/Details/Components/Charts/PieChartLegend.jsx
index fc4b190d8..1297bd699 100644
--- a/client/src/Pages/v1/PageSpeed/Details/Components/Charts/PieChartLegend.jsx
+++ b/client/src/Pages/v1/PageSpeed/Details/Components/Charts/PieChartLegend.jsx
@@ -1,6 +1,6 @@
import { Stack, Box, Typography } from "@mui/material";
import { useTheme } from "@emotion/react";
-import LegendBox from "../../../../../../Components/Charts/LegendBox/index.jsx";
+import LegendBox from "@/Components/v1/Charts/LegendBox/index.jsx";
import SpeedometerIcon from "../../../../../../assets/icons/speedometer-icon.svg?react";
import PropTypes from "prop-types";
diff --git a/client/src/Pages/v1/PageSpeed/Details/Components/PageSpeedAreaChart/index.jsx b/client/src/Pages/v1/PageSpeed/Details/Components/PageSpeedAreaChart/index.jsx
index bb45117fe..1281a396e 100644
--- a/client/src/Pages/v1/PageSpeed/Details/Components/PageSpeedAreaChart/index.jsx
+++ b/client/src/Pages/v1/PageSpeed/Details/Components/PageSpeedAreaChart/index.jsx
@@ -1,4 +1,4 @@
-import ChartBox from "../../../../../../Components/Charts/ChartBox/index.jsx";
+import ChartBox from "@/Components/v1/Charts/ChartBox/index.jsx";
import AreaChart from "../Charts/AreaChart.jsx";
import AreaChartLegend from "../Charts/AreaChartLegend.jsx";
import SkeletonLayout from "./skeleton.jsx";
diff --git a/client/src/Pages/v1/PageSpeed/Details/Components/PageSpeedStatusBoxes/index.jsx b/client/src/Pages/v1/PageSpeed/Details/Components/PageSpeedStatusBoxes/index.jsx
index 0811ae707..ff265317c 100644
--- a/client/src/Pages/v1/PageSpeed/Details/Components/PageSpeedStatusBoxes/index.jsx
+++ b/client/src/Pages/v1/PageSpeed/Details/Components/PageSpeedStatusBoxes/index.jsx
@@ -1,5 +1,5 @@
-import StatusBoxes from "../../../../../../Components/StatusBoxes/index.jsx";
-import StatBox from "../../../../../../Components/StatBox/index.jsx";
+import StatusBoxes from "@/Components/v1/StatusBoxes/index.jsx";
+import StatBox from "@/Components/v1/StatBox/index.jsx";
import { Typography } from "@mui/material";
import { getHumanReadableDuration } from "../../../../../../Utils/timeUtils.js";
import { useTranslation } from "react-i18next";
diff --git a/client/src/Pages/v1/PageSpeed/Details/Components/PerformanceReport/index.jsx b/client/src/Pages/v1/PageSpeed/Details/Components/PerformanceReport/index.jsx
index ce4704144..27f9e885b 100644
--- a/client/src/Pages/v1/PageSpeed/Details/Components/PerformanceReport/index.jsx
+++ b/client/src/Pages/v1/PageSpeed/Details/Components/PerformanceReport/index.jsx
@@ -1,4 +1,4 @@
-import ChartBox from "../../../../../../Components/Charts/ChartBox/index.jsx";
+import ChartBox from "@/Components/v1/Charts/ChartBox/index.jsx";
import PerformanceIcon from "../../../../../../assets/icons/performance-report.svg?react";
import PieChart from "../Charts/PieChart.jsx";
import { Typography } from "@mui/material";
diff --git a/client/src/Pages/v1/PageSpeed/Details/index.jsx b/client/src/Pages/v1/PageSpeed/Details/index.jsx
index cf9652bce..836f0ca37 100644
--- a/client/src/Pages/v1/PageSpeed/Details/index.jsx
+++ b/client/src/Pages/v1/PageSpeed/Details/index.jsx
@@ -1,12 +1,12 @@
// Components
import { Stack, Typography } from "@mui/material";
-import Breadcrumbs from "../../../../Components/Breadcrumbs/index.jsx";
-import MonitorTimeFrameHeader from "../../../../Components/MonitorTimeFrameHeader/index.jsx";
+import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
+import MonitorTimeFrameHeader from "@/Components/v1/MonitorTimeFrameHeader/index.jsx";
import PageSpeedStatusBoxes from "./Components/PageSpeedStatusBoxes/index.jsx";
-import MonitorDetailsControlHeader from "../../../../Components/MonitorDetailsControlHeader/index.jsx";
+import MonitorDetailsControlHeader from "@/Components/v1/MonitorDetailsControlHeader/index.jsx";
import PageSpeedAreaChart from "./Components/PageSpeedAreaChart/index.jsx";
import PerformanceReport from "./Components/PerformanceReport/index.jsx";
-import GenericFallback from "../../../../Components/GenericFallback/index.jsx";
+import GenericFallback from "@/Components/v1/GenericFallback/index.jsx";
// Utils
import { useTheme } from "@emotion/react";
import { useIsAdmin } from "../../../../Hooks/v1/useIsAdmin.js";
diff --git a/client/src/Pages/v1/PageSpeed/Monitors/Components/Card/index.jsx b/client/src/Pages/v1/PageSpeed/Monitors/Components/Card/index.jsx
index 5857a7a7e..4e551526b 100644
--- a/client/src/Pages/v1/PageSpeed/Monitors/Components/Card/index.jsx
+++ b/client/src/Pages/v1/PageSpeed/Monitors/Components/Card/index.jsx
@@ -1,7 +1,7 @@
import PropTypes from "prop-types";
// import PageSpeedIcon from "../../../../assets/icons/page-speed.svg?react";
import PageSpeedIcon from "../../../../../../assets/icons/page-speed.svg?react";
-import { StatusLabel } from "../../../../../../Components/Label/index.jsx";
+import { StatusLabel } from "@/Components/v1/Label/index.jsx";
import { Box, Grid, Stack, Typography } from "@mui/material";
import { useNavigate } from "react-router-dom";
import { useTheme } from "@emotion/react";
@@ -14,7 +14,7 @@ import {
import { useMonitorUtils } from "../../../../../../Hooks/v1/useMonitorUtils.js";
import { useState } from "react";
import { useTranslation } from "react-i18next";
-import IconBox from "../../../../../../Components/IconBox/index.jsx";
+import IconBox from "@/Components/v1/IconBox/index.jsx";
/**
* CustomToolTip displays a tooltip with formatted date and score information.
* @param {Object} props
diff --git a/client/src/Pages/v1/PageSpeed/Monitors/index.jsx b/client/src/Pages/v1/PageSpeed/Monitors/index.jsx
index e568e8d82..7485a72c9 100644
--- a/client/src/Pages/v1/PageSpeed/Monitors/index.jsx
+++ b/client/src/Pages/v1/PageSpeed/Monitors/index.jsx
@@ -1,12 +1,12 @@
// Components
import { useState } from "react";
-import Breadcrumbs from "../../../../Components/Breadcrumbs/index.jsx";
+import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
import { Stack } from "@mui/material";
-import CreateMonitorHeader from "../../../../Components/MonitorCreateHeader/index.jsx";
-import MonitorCountHeader from "../../../../Components/MonitorCountHeader/index.jsx";
+import CreateMonitorHeader from "@/Components/v1/MonitorCreateHeader/index.jsx";
+import MonitorCountHeader from "@/Components/v1/MonitorCountHeader/index.jsx";
import MonitorGrid from "./Components/MonitorGrid/index.jsx";
-import PageStateWrapper from "../../../../Components/PageStateWrapper/index.jsx";
-import FallbackPageSpeedWarning from "../../../../Components/Fallback/FallbackPageSpeedWarning.jsx";
+import PageStateWrapper from "@/Components/v1/PageStateWrapper/index.jsx";
+import FallbackPageSpeedWarning from "@/Components/v1/Fallback/FallbackPageSpeedWarning.jsx";
// Utils
import { useTheme } from "@emotion/react";
diff --git a/client/src/Pages/v1/ServerUnreachable.jsx b/client/src/Pages/v1/ServerUnreachable.jsx
index 0db697543..8230f473b 100644
--- a/client/src/Pages/v1/ServerUnreachable.jsx
+++ b/client/src/Pages/v1/ServerUnreachable.jsx
@@ -3,12 +3,12 @@ import { Box, Typography, Button, Stack } from "@mui/material";
import { useTheme } from "@emotion/react";
import { useNavigate } from "react-router-dom";
import { networkService } from "../../Utils/NetworkService.js";
-import Alert from "../../Components/Alert/index.jsx";
+import Alert from "@/Components/v1/Alert/index.jsx";
import { createToast } from "../../Utils/toastUtils.jsx";
import { useTranslation } from "react-i18next";
import Background from "../../assets/Images/background-grid.svg?react";
import Logo from "../../assets/icons/checkmate-icon.svg?react";
-import ThemeSwitch from "../../Components/ThemeSwitch/index.jsx";
+import ThemeSwitch from "@/Components/v1/ThemeSwitch/index.jsx";
import LanguageSelector from "../../Components/LanguageSelector.jsx";
const ServerUnreachable = () => {
diff --git a/client/src/Pages/v1/Settings/SettingsAbout.jsx b/client/src/Pages/v1/Settings/SettingsAbout.jsx
index 3d5f5224e..6a8125af3 100644
--- a/client/src/Pages/v1/Settings/SettingsAbout.jsx
+++ b/client/src/Pages/v1/Settings/SettingsAbout.jsx
@@ -1,10 +1,10 @@
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
-import ConfigBox from "../../../Components/ConfigBox/index.jsx";
+import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
// Utils
import { useTheme } from "@emotion/react";
import { useTranslation } from "react-i18next";
-import Link from "../../../Components/Link/index.jsx";
+import Link from "@/Components/v1/Link/index.jsx";
const SettingsAbout = () => {
const theme = useTheme();
diff --git a/client/src/Pages/v1/Settings/SettingsDemoMonitors.jsx b/client/src/Pages/v1/Settings/SettingsDemoMonitors.jsx
index 96f907970..47e699851 100644
--- a/client/src/Pages/v1/Settings/SettingsDemoMonitors.jsx
+++ b/client/src/Pages/v1/Settings/SettingsDemoMonitors.jsx
@@ -1,12 +1,12 @@
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
-import ConfigBox from "../../../Components/ConfigBox/index.jsx";
+import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
// Utils
import { useTheme } from "@emotion/react";
import { PropTypes } from "prop-types";
import { useTranslation } from "react-i18next";
-import Dialog from "../../../Components/Dialog/index.jsx";
+import Dialog from "@/Components/v1/Dialog/index.jsx";
import { useState } from "react";
const SettingsDemoMonitors = ({ isAdmin, HEADER_SX, handleChange, isLoading }) => {
diff --git a/client/src/Pages/v1/Settings/SettingsEmail.jsx b/client/src/Pages/v1/Settings/SettingsEmail.jsx
index c2389b277..7b5ad175e 100644
--- a/client/src/Pages/v1/Settings/SettingsEmail.jsx
+++ b/client/src/Pages/v1/Settings/SettingsEmail.jsx
@@ -1,17 +1,17 @@
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
-import ConfigBox from "../../../Components/ConfigBox/index.jsx";
-import TextInput from "../../../Components/Inputs/TextInput/index.jsx";
+import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
+import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import { Switch } from "@mui/material";
-import TextLink from "../../../Components/TextLink/index.jsx";
+import TextLink from "@/Components/v1/TextLink/index.jsx";
// Utils
import { useTheme } from "@emotion/react";
import { PropTypes } from "prop-types";
import { useState } from "react";
import { useTranslation } from "react-i18next";
-import { PasswordEndAdornment } from "../../../Components/Inputs/TextInput/Adornments/index.jsx";
+import { PasswordEndAdornment } from "@/Components/v1/Inputs/TextInput/Adornments/index.jsx";
import { useSendTestEmail } from "../../../Hooks/v1/useSendTestEmail.js";
import { createToast } from "../../../Utils/toastUtils.jsx";
diff --git a/client/src/Pages/v1/Settings/SettingsGlobalThresholds.jsx b/client/src/Pages/v1/Settings/SettingsGlobalThresholds.jsx
index e238c6475..ea58478e2 100644
--- a/client/src/Pages/v1/Settings/SettingsGlobalThresholds.jsx
+++ b/client/src/Pages/v1/Settings/SettingsGlobalThresholds.jsx
@@ -1,8 +1,8 @@
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
-import ConfigBox from "../../../Components/ConfigBox/index.jsx";
-import TextInput from "../../../Components/Inputs/TextInput/index.jsx";
+import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
+import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
import { useTheme } from "@emotion/react";
import { PropTypes } from "prop-types";
diff --git a/client/src/Pages/v1/Settings/SettingsPagespeed.jsx b/client/src/Pages/v1/Settings/SettingsPagespeed.jsx
index 83b2e23c7..b0d5d6441 100644
--- a/client/src/Pages/v1/Settings/SettingsPagespeed.jsx
+++ b/client/src/Pages/v1/Settings/SettingsPagespeed.jsx
@@ -2,9 +2,9 @@ import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
-import ConfigBox from "../../../Components/ConfigBox/index.jsx";
-import TextInput from "../../../Components/Inputs/TextInput/index.jsx";
-import { PasswordEndAdornment } from "../../../Components/Inputs/TextInput/Adornments/index.jsx";
+import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
+import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
+import { PasswordEndAdornment } from "@/Components/v1/Inputs/TextInput/Adornments/index.jsx";
// Utils
import { useTheme } from "@emotion/react";
import { PropTypes } from "prop-types";
diff --git a/client/src/Pages/v1/Settings/SettingsStats.jsx b/client/src/Pages/v1/Settings/SettingsStats.jsx
index 52f739ecf..b68006ab2 100644
--- a/client/src/Pages/v1/Settings/SettingsStats.jsx
+++ b/client/src/Pages/v1/Settings/SettingsStats.jsx
@@ -2,9 +2,9 @@ import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
-import ConfigBox from "../../../Components/ConfigBox/index.jsx";
-import TextInput from "../../../Components/Inputs/TextInput/index.jsx";
-import Dialog from "../../../Components/Dialog/index.jsx";
+import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
+import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
+import Dialog from "@/Components/v1/Dialog/index.jsx";
// Utils
import { useTheme } from "@emotion/react";
diff --git a/client/src/Pages/v1/Settings/SettingsTimeZone.jsx b/client/src/Pages/v1/Settings/SettingsTimeZone.jsx
index 59b2008f4..f684c871d 100644
--- a/client/src/Pages/v1/Settings/SettingsTimeZone.jsx
+++ b/client/src/Pages/v1/Settings/SettingsTimeZone.jsx
@@ -1,8 +1,8 @@
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
-import ConfigBox from "../../../Components/ConfigBox/index.jsx";
-import Search from "../../../Components/Inputs/Search/index.jsx";
+import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
+import Search from "@/Components/v1/Inputs/Search/index.jsx";
import timezones from "../../../Utils/timezones.json";
// Utils
diff --git a/client/src/Pages/v1/Settings/SettingsUI.jsx b/client/src/Pages/v1/Settings/SettingsUI.jsx
index 91f4cea3c..7129e775b 100644
--- a/client/src/Pages/v1/Settings/SettingsUI.jsx
+++ b/client/src/Pages/v1/Settings/SettingsUI.jsx
@@ -1,8 +1,8 @@
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
-import ConfigBox from "../../../Components/ConfigBox/index.jsx";
-import Select from "../../../Components/Inputs/Select/index.jsx";
+import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
+import Select from "@/Components/v1/Inputs/Select/index.jsx";
// Utils
import { useTheme } from "@emotion/react";
diff --git a/client/src/Pages/v1/Settings/SettingsURL.jsx b/client/src/Pages/v1/Settings/SettingsURL.jsx
index 105658d4f..c52dcf317 100644
--- a/client/src/Pages/v1/Settings/SettingsURL.jsx
+++ b/client/src/Pages/v1/Settings/SettingsURL.jsx
@@ -1,8 +1,8 @@
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
-import ConfigBox from "../../../Components/ConfigBox/index.jsx";
-import Select from "../../../Components/Inputs/Select/index.jsx";
+import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
+import Select from "@/Components/v1/Inputs/Select/index.jsx";
// Utils
import { useTheme } from "@emotion/react";
diff --git a/client/src/Pages/v1/Settings/index.jsx b/client/src/Pages/v1/Settings/index.jsx
index d1788eddf..2732e331a 100644
--- a/client/src/Pages/v1/Settings/index.jsx
+++ b/client/src/Pages/v1/Settings/index.jsx
@@ -1,6 +1,6 @@
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
-import Breadcrumbs from "../../../Components/Breadcrumbs/index.jsx";
+import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
import SettingsTimeZone from "./SettingsTimeZone.jsx";
import SettingsUI from "./SettingsUI.jsx";
import SettingsURL from "./SettingsURL.jsx";
diff --git a/client/src/Pages/v1/StatusPage/Create/Components/Progress/index.jsx b/client/src/Pages/v1/StatusPage/Create/Components/Progress/index.jsx
index c9f7d5f8f..232a12f1d 100644
--- a/client/src/Pages/v1/StatusPage/Create/Components/Progress/index.jsx
+++ b/client/src/Pages/v1/StatusPage/Create/Components/Progress/index.jsx
@@ -1,5 +1,5 @@
import { Button, Box } from "@mui/material";
-import ProgressUpload from "../../../../../../Components/ProgressBars/index.jsx";
+import ProgressUpload from "@/Components/v1/ProgressBars/index.jsx";
import ImageIcon from "@mui/icons-material/Image";
import { useTranslation } from "react-i18next";
import { formatBytes } from "../../../../../../Utils/fileUtils.js";
diff --git a/client/src/Pages/v1/StatusPage/Create/Components/Tabs/ConfigStack.jsx b/client/src/Pages/v1/StatusPage/Create/Components/Tabs/ConfigStack.jsx
index fb5278c4e..f31c456ef 100644
--- a/client/src/Pages/v1/StatusPage/Create/Components/Tabs/ConfigStack.jsx
+++ b/client/src/Pages/v1/StatusPage/Create/Components/Tabs/ConfigStack.jsx
@@ -1,5 +1,5 @@
import { Stack, Typography } from "@mui/material";
-import ConfigBox from "../../../../../../Components/ConfigBox/index.jsx";
+import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
import PropTypes from "prop-types";
import { useTheme } from "@emotion/react";
diff --git a/client/src/Pages/v1/StatusPage/Create/Components/Tabs/Content.jsx b/client/src/Pages/v1/StatusPage/Create/Components/Tabs/Content.jsx
index 23e713c5a..d11825e69 100644
--- a/client/src/Pages/v1/StatusPage/Create/Components/Tabs/Content.jsx
+++ b/client/src/Pages/v1/StatusPage/Create/Components/Tabs/Content.jsx
@@ -2,8 +2,8 @@
import { Stack, Typography } from "@mui/material";
import { TabPanel } from "@mui/lab";
import MonitorList from "../MonitorList/index.jsx";
-import Search from "../../../../../../Components/Inputs/Search/index.jsx";
-import Checkbox from "../../../../../../Components/Inputs/Checkbox/index.jsx";
+import Search from "@/Components/v1/Inputs/Search/index.jsx";
+import Checkbox from "@/Components/v1/Inputs/Checkbox/index.jsx";
// Utils
import { useState } from "react";
import { useTheme } from "@emotion/react";
diff --git a/client/src/Pages/v1/StatusPage/Create/Components/Tabs/Settings.jsx b/client/src/Pages/v1/StatusPage/Create/Components/Tabs/Settings.jsx
index a4612e3da..a668a9db8 100644
--- a/client/src/Pages/v1/StatusPage/Create/Components/Tabs/Settings.jsx
+++ b/client/src/Pages/v1/StatusPage/Create/Components/Tabs/Settings.jsx
@@ -1,12 +1,12 @@
// Components
import { Stack, Typography } from "@mui/material";
import { TabPanel } from "@mui/lab";
-import ConfigBox from "../../../../../../Components/ConfigBox/index.jsx";
-import Checkbox from "../../../../../../Components/Inputs/Checkbox/index.jsx";
-import TextInput from "../../../../../../Components/Inputs/TextInput/index.jsx";
-import Search from "../../../../../../Components/Inputs/Search/index.jsx";
-import ImageUpload from "../../../../../../Components/Inputs/ImageUpload/index.jsx";
-import ColorPicker from "../../../../../../Components/Inputs/ColorPicker/index.jsx";
+import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
+import Checkbox from "@/Components/v1/Inputs/Checkbox/index.jsx";
+import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
+import Search from "@/Components/v1/Inputs/Search/index.jsx";
+import ImageUpload from "@/Components/v1/Inputs/ImageUpload/index.jsx";
+import ColorPicker from "@/Components/v1/Inputs/ColorPicker/index.jsx";
import Progress from "../Progress/index.jsx";
// Utils
diff --git a/client/src/Pages/v1/StatusPage/Create/Components/Tabs/index.jsx b/client/src/Pages/v1/StatusPage/Create/Components/Tabs/index.jsx
index 971b8d85c..e8669c474 100644
--- a/client/src/Pages/v1/StatusPage/Create/Components/Tabs/index.jsx
+++ b/client/src/Pages/v1/StatusPage/Create/Components/Tabs/index.jsx
@@ -6,7 +6,7 @@ import Content from "./Content.jsx";
// Utils
import PropTypes from "prop-types";
-import CustomTabList from "../../../../../../Components/Tab/index.jsx";
+import CustomTabList from "@/Components/v1/Tab/index.jsx";
const Tabs = ({
isCreate,
diff --git a/client/src/Pages/v1/StatusPage/Create/index.jsx b/client/src/Pages/v1/StatusPage/Create/index.jsx
index 674a158ac..d9fafed70 100644
--- a/client/src/Pages/v1/StatusPage/Create/index.jsx
+++ b/client/src/Pages/v1/StatusPage/Create/index.jsx
@@ -1,10 +1,10 @@
// Components
import { Stack, Button, Typography } from "@mui/material";
import Tabs from "./Components/Tabs/index.jsx";
-import GenericFallback from "../../../../Components/GenericFallback/index.jsx";
+import GenericFallback from "@/Components/v1/GenericFallback/index.jsx";
import SkeletonLayout from "./Components/Skeleton/index.jsx";
-import Dialog from "../../../../Components/Dialog/index.jsx";
-import Breadcrumbs from "../../../../Components/Breadcrumbs/index.jsx";
+import Dialog from "@/Components/v1/Dialog/index.jsx";
+import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
//Utils
import { useTheme } from "@emotion/react";
import { useState, useEffect, useRef, useCallback } from "react";
diff --git a/client/src/Pages/v1/StatusPage/Status/Components/ControlsHeader/index.jsx b/client/src/Pages/v1/StatusPage/Status/Components/ControlsHeader/index.jsx
index fa5ed71f1..c56aa40cc 100644
--- a/client/src/Pages/v1/StatusPage/Status/Components/ControlsHeader/index.jsx
+++ b/client/src/Pages/v1/StatusPage/Status/Components/ControlsHeader/index.jsx
@@ -1,8 +1,8 @@
// Components
import { Box, Stack, Typography, Button } from "@mui/material";
-import Image from "../../../../../../Components/Image/index.jsx";
+import Image from "@/Components/v1/Image/index.jsx";
import SettingsIcon from "../../../../../../assets/icons/settings-bold.svg?react";
-import ThemeSwitch from "../../../../../../Components/ThemeSwitch/index.jsx";
+import ThemeSwitch from "@/Components/v1/ThemeSwitch/index.jsx";
import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
//Utils
import { useTheme } from "@mui/material/styles";
diff --git a/client/src/Pages/v1/StatusPage/Status/Components/MonitorsList/index.jsx b/client/src/Pages/v1/StatusPage/Status/Components/MonitorsList/index.jsx
index fd04dae66..59ad4d522 100644
--- a/client/src/Pages/v1/StatusPage/Status/Components/MonitorsList/index.jsx
+++ b/client/src/Pages/v1/StatusPage/Status/Components/MonitorsList/index.jsx
@@ -1,8 +1,8 @@
// Components
import { Stack, Box } from "@mui/material";
-import Host from "../../../../../../Components/Host/index.jsx";
-import StatusPageBarChart from "../../../../../../Components/Charts/StatusPageBarChart/index.jsx";
-import { StatusLabel } from "../../../../../../Components/Label/index.jsx";
+import Host from "@/Components/v1/Host/index.jsx";
+import StatusPageBarChart from "@/Components/v1/Charts/StatusPageBarChart/index.jsx";
+import { StatusLabel } from "@/Components/v1/Label/index.jsx";
//Utils
import { useTheme } from "@mui/material/styles";
diff --git a/client/src/Pages/v1/StatusPage/Status/index.jsx b/client/src/Pages/v1/StatusPage/Status/index.jsx
index 48fc44fc9..e700bbbd9 100644
--- a/client/src/Pages/v1/StatusPage/Status/index.jsx
+++ b/client/src/Pages/v1/StatusPage/Status/index.jsx
@@ -1,13 +1,13 @@
// Components
import { Typography, Stack } from "@mui/material";
-import GenericFallback from "../../../../Components/GenericFallback/index.jsx";
+import GenericFallback from "@/Components/v1/GenericFallback/index.jsx";
import AdminLink from "./Components/AdminLink/index.jsx";
import ControlsHeader from "./Components/ControlsHeader/index.jsx";
import SkeletonLayout from "./Components/Skeleton/index.jsx";
import StatusBar from "./Components/StatusBar/index.jsx";
import MonitorsList from "./Components/MonitorsList/index.jsx";
-import Breadcrumbs from "../../../../Components/Breadcrumbs/index.jsx";
-import TextLink from "../../../../Components/TextLink/index.jsx";
+import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
+import TextLink from "@/Components/v1/TextLink/index.jsx";
// Utils
import { useStatusPageFetch } from "./Hooks/useStatusPageFetch.jsx";
diff --git a/client/src/Pages/v1/StatusPage/StatusPages/Components/StatusPagesTable/index.jsx b/client/src/Pages/v1/StatusPage/StatusPages/Components/StatusPagesTable/index.jsx
index d8d68fb2e..1afe25409 100644
--- a/client/src/Pages/v1/StatusPage/StatusPages/Components/StatusPagesTable/index.jsx
+++ b/client/src/Pages/v1/StatusPage/StatusPages/Components/StatusPagesTable/index.jsx
@@ -1,7 +1,7 @@
-import DataTable from "../../../../../../Components/Table/index.jsx";
+import DataTable from "@/Components/v1/Table/index.jsx";
import { useTheme } from "@emotion/react";
import { useNavigate } from "react-router-dom";
-import { StatusLabel } from "../../../../../../Components/Label/index.jsx";
+import { StatusLabel } from "@/Components/v1/Label/index.jsx";
import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
import { Stack, Typography } from "@mui/material";
import { useTranslation } from "react-i18next";
diff --git a/client/src/Pages/v1/StatusPage/StatusPages/index.jsx b/client/src/Pages/v1/StatusPage/StatusPages/index.jsx
index 8e0c89ce3..3c60fe950 100644
--- a/client/src/Pages/v1/StatusPage/StatusPages/index.jsx
+++ b/client/src/Pages/v1/StatusPage/StatusPages/index.jsx
@@ -1,9 +1,9 @@
// Components
import { Stack } from "@mui/material";
-import Breadcrumbs from "../../../../Components/Breadcrumbs/index.jsx";
-import MonitorCreateHeader from "../../../../Components/MonitorCreateHeader/index.jsx";
+import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
+import MonitorCreateHeader from "@/Components/v1/MonitorCreateHeader/index.jsx";
import StatusPagesTable from "./Components/StatusPagesTable/index.jsx";
-import PageStateWrapper from "../../../../Components/PageStateWrapper/index.jsx";
+import PageStateWrapper from "@/Components/v1/PageStateWrapper/index.jsx";
// Utils
import { useTheme } from "@emotion/react";
import { useStatusPagesFetch } from "./Hooks/useStatusPagesFetch.jsx";
diff --git a/client/src/Pages/v1/Uptime/BulkImport/index.jsx b/client/src/Pages/v1/Uptime/BulkImport/index.jsx
index 412ba0f97..9f3efcd67 100644
--- a/client/src/Pages/v1/Uptime/BulkImport/index.jsx
+++ b/client/src/Pages/v1/Uptime/BulkImport/index.jsx
@@ -6,8 +6,8 @@ import { Box, Stack, Typography, Button, Link } from "@mui/material";
//Components
import { createToast } from "../../../../Utils/toastUtils.jsx";
-import Breadcrumbs from "../../../../Components/Breadcrumbs/index.jsx";
-import ConfigBox from "../../../../Components/ConfigBox/index.jsx";
+import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
+import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
import UploadFile from "./Upload.jsx";
import { useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
diff --git a/client/src/Pages/v1/Uptime/Create/index.jsx b/client/src/Pages/v1/Uptime/Create/index.jsx
index 6bb2a3b33..202f64d85 100644
--- a/client/src/Pages/v1/Uptime/Create/index.jsx
+++ b/client/src/Pages/v1/Uptime/Create/index.jsx
@@ -9,16 +9,16 @@ import {
Tooltip,
Typography,
} from "@mui/material";
-import Breadcrumbs from "../../../../Components/Breadcrumbs/index.jsx";
-import TextInput from "../../../../Components/Inputs/TextInput/index.jsx";
-import { HttpAdornment } from "../../../../Components/Inputs/TextInput/Adornments/index.jsx";
-import Radio from "../../../../Components/Inputs/Radio/index.jsx";
-import Select from "../../../../Components/Inputs/Select/index.jsx";
-import ConfigBox from "../../../../Components/ConfigBox/index.jsx";
-import NotificationsConfig from "../../../../Components/NotificationConfig/index.jsx";
-import Checkbox from "../../../../Components/Inputs/Checkbox/index.jsx";
-import Dialog from "../../../../Components/Dialog/index.jsx";
-import PulseDot from "../../../../Components/Animated/PulseDot.jsx";
+import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
+import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
+import { HttpAdornment } from "@/Components/v1/Inputs/TextInput/Adornments/index.jsx";
+import Radio from "@/Components/v1/Inputs/Radio/index.jsx";
+import Select from "@/Components/v1/Inputs/Select/index.jsx";
+import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
+import NotificationsConfig from "@/Components/v1/NotificationConfig/index.jsx";
+import Checkbox from "@/Components/v1/Inputs/Checkbox/index.jsx";
+import Dialog from "@/Components/v1/Dialog/index.jsx";
+import PulseDot from "@/Components/v1/Animated/PulseDot.jsx";
import SkeletonLayout from "./skeleton.jsx";
// Utils
diff --git a/client/src/Pages/v1/Uptime/Details/Components/ChartBoxes/index.jsx b/client/src/Pages/v1/Uptime/Details/Components/ChartBoxes/index.jsx
index c6b76c289..45f35a42e 100644
--- a/client/src/Pages/v1/Uptime/Details/Components/ChartBoxes/index.jsx
+++ b/client/src/Pages/v1/Uptime/Details/Components/ChartBoxes/index.jsx
@@ -1,6 +1,6 @@
// Components
import { Stack, Typography, Box } from "@mui/material";
-import ChartBox from "../../../../../../Components/Charts/ChartBox/index.jsx";
+import ChartBox from "@/Components/v1/Charts/ChartBox/index.jsx";
import UptimeIcon from "../../../../../../assets/icons/uptime-icon.svg?react";
import IncidentsIcon from "../../../../../../assets/icons/incidents.svg?react";
import AverageResponseIcon from "../../../../../../assets/icons/average-response-icon.svg?react";
diff --git a/client/src/Pages/v1/Uptime/Details/Components/Charts/ResponseTimeChart.jsx b/client/src/Pages/v1/Uptime/Details/Components/Charts/ResponseTimeChart.jsx
index f306dfd76..daa7b4f53 100644
--- a/client/src/Pages/v1/Uptime/Details/Components/Charts/ResponseTimeChart.jsx
+++ b/client/src/Pages/v1/Uptime/Details/Components/Charts/ResponseTimeChart.jsx
@@ -1,5 +1,5 @@
-import ChartBox from "../../../../../../Components/Charts/ChartBox/index.jsx";
-import MonitorDetailsAreaChart from "../../../../../../Components/Charts/MonitorDetailsAreaChart/index.jsx";
+import ChartBox from "@/Components/v1/Charts/ChartBox/index.jsx";
+import MonitorDetailsAreaChart from "@/Components/v1/Charts/MonitorDetailsAreaChart/index.jsx";
import ResponseTimeIcon from "../../../../../../assets/icons/response-time-icon.svg?react";
import SkeletonLayout from "./ResponseTimeChartSkeleton.jsx";
import PropTypes from "prop-types";
diff --git a/client/src/Pages/v1/Uptime/Details/Components/ResponseTable/index.jsx b/client/src/Pages/v1/Uptime/Details/Components/ResponseTable/index.jsx
index cc5745a26..948489ac1 100644
--- a/client/src/Pages/v1/Uptime/Details/Components/ResponseTable/index.jsx
+++ b/client/src/Pages/v1/Uptime/Details/Components/ResponseTable/index.jsx
@@ -1,9 +1,9 @@
-import ChartBox from "../../../../../../Components/Charts/ChartBox/index.jsx";
+import ChartBox from "@/Components/v1/Charts/ChartBox/index.jsx";
import PropTypes from "prop-types";
import HistoryIcon from "../../../../../../assets/icons/history-icon.svg?react";
-import Table from "../../../../../../Components/Table/index.jsx";
-import TablePagination from "../../../../../../Components/Table/TablePagination/index.jsx";
-import { StatusLabel } from "../../../../../../Components/Label/index.jsx";
+import Table from "@/Components/v1/Table/index.jsx";
+import TablePagination from "@/Components/v1/Table/TablePagination/index.jsx";
+import { StatusLabel } from "@/Components/v1/Label/index.jsx";
import { useTranslation } from "react-i18next";
import { formatDateWithTz } from "../../../../../../Utils/timeUtils.js";
import SkeletonLayout from "./skeleton.jsx";
diff --git a/client/src/Pages/v1/Uptime/Details/Components/UptimeStatusBoxes/index.jsx b/client/src/Pages/v1/Uptime/Details/Components/UptimeStatusBoxes/index.jsx
index f0988466c..a7b971839 100644
--- a/client/src/Pages/v1/Uptime/Details/Components/UptimeStatusBoxes/index.jsx
+++ b/client/src/Pages/v1/Uptime/Details/Components/UptimeStatusBoxes/index.jsx
@@ -1,5 +1,5 @@
-import StatusBoxes from "../../../../../../Components/StatusBoxes/index.jsx";
-import StatBox from "../../../../../../Components/StatBox/index.jsx";
+import StatusBoxes from "@/Components/v1/StatusBoxes/index.jsx";
+import StatBox from "@/Components/v1/StatBox/index.jsx";
import PropTypes from "prop-types";
import { getHumanReadableDuration } from "../../../../../../Utils/timeUtils.js";
diff --git a/client/src/Pages/v1/Uptime/Details/index.jsx b/client/src/Pages/v1/Uptime/Details/index.jsx
index 4e773dc2b..f5e283495 100644
--- a/client/src/Pages/v1/Uptime/Details/index.jsx
+++ b/client/src/Pages/v1/Uptime/Details/index.jsx
@@ -1,12 +1,12 @@
// Components
-import Breadcrumbs from "../../../../Components/Breadcrumbs/index.jsx";
-import MonitorDetailsControlHeader from "../../../../Components/MonitorDetailsControlHeader/index.jsx";
-import MonitorTimeFrameHeader from "../../../../Components/MonitorTimeFrameHeader/index.jsx";
+import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
+import MonitorDetailsControlHeader from "@/Components/v1/MonitorDetailsControlHeader/index.jsx";
+import MonitorTimeFrameHeader from "@/Components/v1/MonitorTimeFrameHeader/index.jsx";
import ChartBoxes from "./Components/ChartBoxes/index.jsx";
import ResponseTimeChart from "./Components/Charts/ResponseTimeChart.jsx";
import ResponseTable from "./Components/ResponseTable/index.jsx";
import UptimeStatusBoxes from "./Components/UptimeStatusBoxes/index.jsx";
-import GenericFallback from "../../../../Components/GenericFallback/index.jsx";
+import GenericFallback from "@/Components/v1/GenericFallback/index.jsx";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
diff --git a/client/src/Pages/v1/Uptime/Monitors/Components/Filter/index.jsx b/client/src/Pages/v1/Uptime/Monitors/Components/Filter/index.jsx
index 85c4a8540..b9a6824c1 100644
--- a/client/src/Pages/v1/Uptime/Monitors/Components/Filter/index.jsx
+++ b/client/src/Pages/v1/Uptime/Monitors/Components/Filter/index.jsx
@@ -1,6 +1,6 @@
import { useTheme } from "@emotion/react";
import PropTypes from "prop-types";
-import FilterHeader from "../../../../../../Components/FilterHeader/index.jsx";
+import FilterHeader from "@/Components/v1/FilterHeader/index.jsx";
import { useMemo } from "react";
import { Box, Button } from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
diff --git a/client/src/Pages/v1/Uptime/Monitors/Components/SearchComponent/index.jsx b/client/src/Pages/v1/Uptime/Monitors/Components/SearchComponent/index.jsx
index 3339102a2..64c546a8a 100644
--- a/client/src/Pages/v1/Uptime/Monitors/Components/SearchComponent/index.jsx
+++ b/client/src/Pages/v1/Uptime/Monitors/Components/SearchComponent/index.jsx
@@ -1,5 +1,5 @@
import { useState } from "react";
-import Search from "../../../../../../Components/Inputs/Search/index.jsx";
+import Search from "@/Components/v1/Inputs/Search/index.jsx";
import { Box } from "@mui/material";
import useDebounce from "../../Hooks/useDebounce.jsx";
import { useEffect, useRef } from "react";
diff --git a/client/src/Pages/v1/Uptime/Monitors/Components/UptimeDataTable/index.jsx b/client/src/Pages/v1/Uptime/Monitors/Components/UptimeDataTable/index.jsx
index 575647eab..9cf2d247d 100644
--- a/client/src/Pages/v1/Uptime/Monitors/Components/UptimeDataTable/index.jsx
+++ b/client/src/Pages/v1/Uptime/Monitors/Components/UptimeDataTable/index.jsx
@@ -1,15 +1,15 @@
// Components
import { Box, Stack } from "@mui/material";
-import DataTable from "../../../../../../Components/Table/index.jsx";
+import DataTable from "@/Components/v1/Table/index.jsx";
import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded";
-import Host from "../../../../../../Components/Host/index.jsx";
-import { StatusLabel } from "../../../../../../Components/Label/index.jsx";
-import BarChart from "../../../../../../Components/Charts/BarChart/index.jsx";
-import ActionsMenu from "../../../../../../Components/ActionsMenu/index.jsx";
+import Host from "@/Components/v1/Host/index.jsx";
+import { StatusLabel } from "@/Components/v1/Label/index.jsx";
+import BarChart from "@/Components/v1/Charts/BarChart/index.jsx";
+import ActionsMenu from "@/Components/v1/ActionsMenu/index.jsx";
import LoadingSpinner from "../LoadingSpinner/index.jsx";
-import TableSkeleton from "../../../../../../Components/Table/skeleton.jsx";
+import TableSkeleton from "@/Components/v1/Table/skeleton.jsx";
// Utils
import { useTheme } from "@emotion/react";
diff --git a/client/src/Pages/v1/Uptime/Monitors/index.jsx b/client/src/Pages/v1/Uptime/Monitors/index.jsx
index dae0bc2d5..cacfc23b4 100644
--- a/client/src/Pages/v1/Uptime/Monitors/index.jsx
+++ b/client/src/Pages/v1/Uptime/Monitors/index.jsx
@@ -4,17 +4,17 @@
// 2a.List of monitors must have the total number of monitors that match.
// Components
-import Breadcrumbs from "../../../../Components/Breadcrumbs/index.jsx";
+import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
import Greeting from "../../../../Utils/greeting.jsx";
import StatusBoxes from "./Components/StatusBoxes/index.jsx";
import UptimeDataTable from "./Components/UptimeDataTable/index.jsx";
-import Pagination from "../../../../Components/Table/TablePagination/index.jsx";
-import CreateMonitorHeader from "../../../../Components/MonitorCreateHeader/index.jsx";
+import Pagination from "@/Components/v1/Table/TablePagination/index.jsx";
+import CreateMonitorHeader from "@/Components/v1/MonitorCreateHeader/index.jsx";
import SearchComponent from "./Components/SearchComponent/index.jsx";
import Filter from "./Components/Filter/index.jsx";
-import PageStateWrapper from "../../../../Components/PageStateWrapper/index.jsx";
+import PageStateWrapper from "@/Components/v1/PageStateWrapper/index.jsx";
-import MonitorCountHeader from "../../../../Components/MonitorCountHeader/index.jsx";
+import MonitorCountHeader from "@/Components/v1/MonitorCountHeader/index.jsx";
// MUI Components
import { Stack, Box, Button } from "@mui/material";
diff --git a/client/src/Pages/v2/Auth/Login.tsx b/client/src/Pages/v2/Auth/Login.tsx
index 58eec01dc..fd4a08e93 100644
--- a/client/src/Pages/v2/Auth/Login.tsx
+++ b/client/src/Pages/v2/Auth/Login.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
import { useForm, Controller } from "react-hook-form";
import { useTheme } from "@mui/material/styles";
-import { TextInput } from "@/Components/Inputs/TextInput/indexV2.tsx";
+import { TextInput } from "@/Components/v2/Inputs/TextInput";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import { usePost } from "@/Hooks/v2/UseApi";
diff --git a/client/src/Pages/v2/Auth/Register.tsx b/client/src/Pages/v2/Auth/Register.tsx
index a9043a2c9..2a02c401f 100644
--- a/client/src/Pages/v2/Auth/Register.tsx
+++ b/client/src/Pages/v2/Auth/Register.tsx
@@ -5,7 +5,7 @@ import { useForm, Controller } from "react-hook-form";
import { useTheme } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
-import { TextInput } from "@/Components/Inputs/TextInput/indexV2.tsx";
+import { TextInput } from "@/Components/v2/Inputs/TextInput";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import { usePost } from "@/Hooks/v2/UseApi";
diff --git a/client/src/Routes/index.jsx b/client/src/Routes/index.jsx
index 2e4fd9c50..90dcaa3f5 100644
--- a/client/src/Routes/index.jsx
+++ b/client/src/Routes/index.jsx
@@ -1,7 +1,7 @@
import { useSelector } from "react-redux";
import { lightTheme, darkTheme } from "@/Utils/Theme/v2/theme";
import { Navigate, Route, Routes as LibRoutes } from "react-router";
-import HomeLayout from "../Components/Layouts/HomeLayout";
+import HomeLayout from "@/Components/v1/Layouts/HomeLayout";
import NotFound from "../Pages/v1/NotFound";
// Auth
import AuthLogin from "../Pages/v1/Auth/Login";
@@ -47,10 +47,10 @@ import Settings from "../Pages/v1/Settings";
import Maintenance from "../Pages/v1/Maintenance";
-import ProtectedRoute from "../Components/ProtectedRoute";
-import RoleProtectedRoute from "../Components/RoleProtectedRoute";
+import ProtectedRoute from "../Components/v1/ProtectedRoute";
+import RoleProtectedRoute from "../Components/v1/RoleProtectedRoute";
import CreateNewMaintenanceWindow from "../Pages/v1/Maintenance/CreateMaintenance";
-import withAdminCheck from "../Components/HOC/withAdminCheck";
+import withAdminCheck from "@/Components/v1/HOC/withAdminCheck";
import BulkImport from "../Pages/v1/Uptime/BulkImport";
import Logs from "../Pages/v1/Logs";
diff --git a/client/src/Routes/v2router.tsx b/client/src/Routes/v2router.tsx
index d450854f9..941550026 100644
--- a/client/src/Routes/v2router.tsx
+++ b/client/src/Routes/v2router.tsx
@@ -22,7 +22,7 @@ const V2Routes = ({ mode = "light" }) => {
/>
}
+ element={}
>
diff --git a/server/src/db/v1/modules/monitorModule.js b/server/src/db/v1/modules/monitorModule.js
index 8beb9316c..55cf37799 100755
--- a/server/src/db/v1/modules/monitorModule.js
+++ b/server/src/db/v1/modules/monitorModule.js
@@ -1,578 +1,578 @@
import {
- buildUptimeDetailsPipeline,
- buildHardwareDetailsPipeline,
- buildMonitorSummaryByTeamIdPipeline,
- buildMonitorsByTeamIdPipeline,
- buildMonitorsAndSummaryByTeamIdPipeline,
- buildMonitorsWithChecksByTeamIdPipeline,
- buildFilteredMonitorsByTeamIdPipeline,
+ buildUptimeDetailsPipeline,
+ buildHardwareDetailsPipeline,
+ buildMonitorSummaryByTeamIdPipeline,
+ buildMonitorsByTeamIdPipeline,
+ buildMonitorsAndSummaryByTeamIdPipeline,
+ buildMonitorsWithChecksByTeamIdPipeline,
+ buildFilteredMonitorsByTeamIdPipeline,
} from "./monitorModuleQueries.js";
const SERVICE_NAME = "monitorModule";
class MonitorModule {
- constructor({ Monitor, MonitorStats, Check, stringService, fs, path, fileURLToPath, ObjectId, NormalizeData, NormalizeDataUptimeDetails }) {
- this.Monitor = Monitor;
- this.MonitorStats = MonitorStats;
- this.Check = Check;
- this.stringService = stringService;
- this.fs = fs;
- this.path = path;
- this.fileURLToPath = fileURLToPath;
- this.ObjectId = ObjectId;
- this.NormalizeData = NormalizeData;
- this.NormalizeDataUptimeDetails = NormalizeDataUptimeDetails;
-
- const __filename = fileURLToPath(import.meta.url);
- const __dirname = path.dirname(__filename);
-
- this.demoMonitorsPath = path.resolve(__dirname, "../../../utils/demoMonitors.json");
- }
-
- // Helper
- calculateUptimeDuration = (checks) => {
- if (!checks || checks.length === 0) {
- return 0;
- }
- const latestCheck = new Date(checks[0].createdAt);
- let latestDownCheck = 0;
-
- for (let i = checks.length - 1; i >= 0; i--) {
- if (checks[i].status === false) {
- latestDownCheck = new Date(checks[i].createdAt);
- break;
- }
- }
-
- // If no down check is found, uptime is from the last check to now
- if (latestDownCheck === 0) {
- return Date.now() - new Date(checks[checks.length - 1].createdAt);
- }
-
- // Otherwise the uptime is from the last check to the last down check
- return latestCheck - latestDownCheck;
- };
-
- // Helper
- getLastChecked = (checks) => {
- if (!checks || checks.length === 0) {
- return 0; // Handle case when no checks are available
- }
- // Data is sorted newest->oldest, so last check is the most recent
- return new Date() - new Date(checks[0].createdAt);
- };
- getLatestResponseTime = (checks) => {
- if (!checks || checks.length === 0) {
- return 0;
- }
-
- return checks[0]?.responseTime ?? 0;
- };
-
- // Helper
- getAverageResponseTime = (checks) => {
- if (!checks || checks.length === 0) {
- return 0;
- }
-
- const validChecks = checks.filter((check) => typeof check.responseTime === "number");
- if (validChecks.length === 0) {
- return 0;
- }
- const aggResponseTime = validChecks.reduce((sum, check) => {
- return sum + check.responseTime;
- }, 0);
- return aggResponseTime / validChecks.length;
- };
-
- // Helper
- getUptimePercentage = (checks) => {
- if (!checks || checks.length === 0) {
- return 0;
- }
- const upCount = checks.reduce((count, check) => {
- return check.status === true ? count + 1 : count;
- }, 0);
- return (upCount / checks.length) * 100;
- };
-
- // Helper
- getIncidents = (checks) => {
- if (!checks || checks.length === 0) {
- return 0; // Handle case when no checks are available
- }
- return checks.reduce((acc, check) => {
- return check.status === false ? (acc += 1) : acc;
- }, 0);
- };
-
- // Helper
- getDateRange = (dateRange) => {
- const startDates = {
- recent: new Date(new Date().setHours(new Date().getHours() - 2)),
- day: new Date(new Date().setDate(new Date().getDate() - 1)),
- week: new Date(new Date().setDate(new Date().getDate() - 7)),
- month: new Date(new Date().setMonth(new Date().getMonth() - 1)),
- all: new Date(0),
- };
- return {
- start: startDates[dateRange],
- end: new Date(),
- };
- };
-
- //Helper
- getMonitorChecks = async (monitorId, dateRange, sortOrder) => {
- const indexSpec = {
- monitorId: 1,
- updatedAt: sortOrder, // This will be 1 or -1
- };
-
- const [checksAll, checksForDateRange] = await Promise.all([
- this.Check.find({ monitorId }).sort({ createdAt: sortOrder }).hint(indexSpec).lean(),
- this.Check.find({
- monitorId,
- createdAt: { $gte: dateRange.start, $lte: dateRange.end },
- })
- .hint(indexSpec)
- .lean(),
- ]);
-
- return { checksAll, checksForDateRange };
- };
-
- // Helper
- processChecksForDisplay = (normalizeData, checks, numToDisplay, normalize) => {
- let processedChecks = checks;
- if (numToDisplay && checks.length > numToDisplay) {
- const n = Math.ceil(checks.length / numToDisplay);
- processedChecks = checks.filter((_, index) => index % n === 0);
- }
- return normalize ? normalizeData(processedChecks, 1, 100) : processedChecks;
- };
-
- // Helper
- groupChecksByTime = (checks, dateRange) => {
- return checks.reduce((acc, check) => {
- // Validate the date
- const checkDate = new Date(check.createdAt);
- if (Number.isNaN(checkDate.getTime()) || checkDate.getTime() === 0) {
- return acc;
- }
-
- const time = dateRange === "day" ? checkDate.setMinutes(0, 0, 0) : checkDate.toISOString().split("T")[0];
-
- if (!acc[time]) {
- acc[time] = { time, checks: [] };
- }
- acc[time].checks.push(check);
- return acc;
- }, {});
- };
-
- // Helper
- calculateGroupStats = (group) => {
- const totalChecks = group.checks.length;
-
- const checksWithResponseTime = group.checks.filter((check) => typeof check.responseTime === "number" && !Number.isNaN(check.responseTime));
-
- return {
- time: group.time,
- uptimePercentage: this.getUptimePercentage(group.checks),
- totalChecks,
- totalIncidents: group.checks.filter((check) => !check.status).length,
- avgResponseTime:
- checksWithResponseTime.length > 0
- ? checksWithResponseTime.reduce((sum, check) => sum + check.responseTime, 0) / checksWithResponseTime.length
- : 0,
- };
- };
-
- getAllMonitors = async () => {
- try {
- const monitors = await this.Monitor.find();
- return monitors;
- } catch (error) {
- error.service = SERVICE_NAME;
- error.method = "getAllMonitors";
- throw error;
- }
- };
-
- getMonitorById = async (monitorId) => {
- try {
- const monitor = await this.Monitor.findById(monitorId);
- if (monitor === null || monitor === undefined) {
- const error = new Error(this.stringService.getDbFindMonitorById(monitorId));
- error.status = 404;
- throw error;
- }
-
- return monitor;
- } catch (error) {
- error.service = SERVICE_NAME;
- error.method = "getMonitorById";
- throw error;
- }
- };
-
- getMonitorsByIds = async (monitorIds) => {
- try {
- const objectIds = monitorIds.map((id) => new this.ObjectId(id));
- return await this.Monitor.find({ _id: { $in: objectIds } }, { _id: 1, teamId: 1 }).lean();
- } catch (error) {
- error.service = SERVICE_NAME;
- error.method = "getMonitorsByIds";
- throw error;
- }
- };
- getUptimeDetailsById = async ({ monitorId, dateRange }) => {
- try {
- const dates = this.getDateRange(dateRange);
- const formatLookup = {
- recent: "%Y-%m-%dT%H:%M:00Z",
- day: "%Y-%m-%dT%H:00:00Z",
- week: "%Y-%m-%dT%H:00:00Z",
- month: "%Y-%m-%dT00:00:00Z",
- };
-
- const dateString = formatLookup[dateRange];
-
- const results = await this.Check.aggregate(buildUptimeDetailsPipeline(monitorId, dates, dateString));
-
- const monitorData = results[0];
-
- monitorData.groupedUpChecks = this.NormalizeDataUptimeDetails(monitorData.groupedUpChecks, 10, 100);
-
- monitorData.groupedDownChecks = this.NormalizeDataUptimeDetails(monitorData.groupedDownChecks, 10, 100);
-
- const normalizedGroupChecks = this.NormalizeDataUptimeDetails(monitorData.groupedChecks, 10, 100);
-
- monitorData.groupedChecks = normalizedGroupChecks;
- const monitorStats = await this.MonitorStats.findOne({ monitorId });
- return { monitorData, monitorStats };
- } catch (error) {
- error.service = SERVICE_NAME;
- error.method = "getUptimeDetailsById";
- throw error;
- }
- };
-
- getMonitorStatsById = async ({ monitorId, sortOrder, dateRange, numToDisplay, normalize }) => {
- try {
- // Get monitor, if we can't find it, abort with error
- const monitor = await this.Monitor.findById(monitorId);
- if (monitor === null || monitor === undefined) {
- throw new Error(this.stringService.getDbFindMonitorById(monitorId));
- }
-
- // Get query params
- const sort = sortOrder === "asc" ? 1 : -1;
-
- // Get Checks for monitor in date range requested
- const dates = this.getDateRange(dateRange);
- const { checksAll, checksForDateRange } = await this.getMonitorChecks(monitorId, dates, sort);
-
- // Build monitor stats
- const monitorStats = {
- ...monitor.toObject(),
- uptimeDuration: this.calculateUptimeDuration(checksAll),
- lastChecked: this.getLastChecked(checksAll),
- latestResponseTime: this.getLatestResponseTime(checksAll),
- periodIncidents: this.getIncidents(checksForDateRange),
- periodTotalChecks: checksForDateRange.length,
- checks: this.processChecksForDisplay(this.NormalizeData, checksForDateRange, numToDisplay, normalize),
- };
-
- if (monitor.type === "http" || monitor.type === "ping" || monitor.type === "docker" || monitor.type === "port" || monitor.type === "game") {
- // HTTP/PING Specific stats
- monitorStats.periodAvgResponseTime = this.getAverageResponseTime(checksForDateRange);
- monitorStats.periodUptime = this.getUptimePercentage(checksForDateRange);
- const groupedChecks = this.groupChecksByTime(checksForDateRange, dateRange);
- monitorStats.aggregateData = Object.values(groupedChecks).map(this.calculateGroupStats);
- }
-
- return monitorStats;
- } catch (error) {
- error.service = SERVICE_NAME;
- error.method = "getMonitorStatsById";
- throw error;
- }
- };
-
- getHardwareDetailsById = async ({ monitorId, dateRange }) => {
- try {
- const monitor = await this.Monitor.findById(monitorId);
- const dates = this.getDateRange(dateRange);
-
- const formatLookup = {
- recent: "%Y-%m-%dT%H:%M:00Z",
- day: "%Y-%m-%dT%H:00:00Z",
- week: "%Y-%m-%dT%H:00:00Z",
- month: "%Y-%m-%dT00:00:00Z",
- };
- const dateString = formatLookup[dateRange];
-
- const hardwareStats = await this.Check.aggregate(buildHardwareDetailsPipeline(monitor, dates, dateString));
-
- const stats = hardwareStats[0];
-
- return {
- ...monitor.toObject(),
- stats,
- };
- } catch (error) {
- error.service = SERVICE_NAME;
- error.method = "getHardwareDetailsById";
- throw error;
- }
- };
-
- getMonitorsByTeamId = async ({ limit, type, page, rowsPerPage, filter, field, order, teamId }) => {
- limit = parseInt(limit);
- page = parseInt(page);
- rowsPerPage = parseInt(rowsPerPage);
- if (field === undefined) {
- field = "name";
- order = "asc";
- }
- // Build match stage
- const matchStage = { teamId: new this.ObjectId(teamId) };
- if (type !== undefined) {
- matchStage.type = Array.isArray(type) ? { $in: type } : type;
- }
-
- const summaryResult = await this.Monitor.aggregate(buildMonitorSummaryByTeamIdPipeline({ matchStage }));
- const summary = summaryResult[0];
-
- const monitors = await this.Monitor.aggregate(buildMonitorsByTeamIdPipeline({ matchStage, field, order }));
-
- const filteredMonitors = await this.Monitor.aggregate(
- buildFilteredMonitorsByTeamIdPipeline({
- matchStage,
- filter,
- page,
- rowsPerPage,
- field,
- order,
- limit,
- type,
- })
- );
-
- const normalizedFilteredMonitors = filteredMonitors.map((monitor) => {
- if (!monitor.checks) {
- return monitor;
- }
- monitor.checks = this.NormalizeData(monitor.checks, 10, 100);
- return monitor;
- });
-
- return { summary, monitors, filteredMonitors: normalizedFilteredMonitors };
- };
-
- getMonitorsAndSummaryByTeamId = async ({ type, explain, teamId }) => {
- try {
- const matchStage = { teamId: new this.ObjectId(teamId) };
- if (type !== undefined) {
- matchStage.type = Array.isArray(type) ? { $in: type } : type;
- }
-
- if (explain === true) {
- return this.Monitor.aggregate(buildMonitorsAndSummaryByTeamIdPipeline({ matchStage })).explain("executionStats");
- }
-
- const queryResult = await this.Monitor.aggregate(buildMonitorsAndSummaryByTeamIdPipeline({ matchStage }));
- const { monitors, summary } = queryResult?.[0] ?? {};
- return { monitors, summary };
- } catch (error) {
- error.service = SERVICE_NAME;
- error.method = "getMonitorsAndSummaryByTeamId";
- throw error;
- }
- };
-
- getMonitorsWithChecksByTeamId = async ({ limit, type, page, rowsPerPage, filter, field, order, teamId, explain }) => {
- try {
- limit = parseInt(limit);
- page = parseInt(page);
- rowsPerPage = parseInt(rowsPerPage);
- if (field === undefined) {
- field = "name";
- order = "asc";
- }
- // Build match stage
- const matchStage = { teamId: new this.ObjectId(teamId) };
- if (type !== undefined) {
- matchStage.type = Array.isArray(type) ? { $in: type } : type;
- }
-
- if (explain === true) {
- return this.Monitor.aggregate(
- buildMonitorsWithChecksByTeamIdPipeline({
- matchStage,
- filter,
- page,
- rowsPerPage,
- field,
- order,
- limit,
- type,
- })
- ).explain("executionStats");
- }
-
- const queryResult = await this.Monitor.aggregate(
- buildMonitorsWithChecksByTeamIdPipeline({
- matchStage,
- filter,
- page,
- rowsPerPage,
- field,
- order,
- limit,
- type,
- })
- );
- const monitors = queryResult[0]?.monitors;
- const count = queryResult[0]?.count;
- const normalizedFilteredMonitors = monitors.map((monitor) => {
- if (!monitor.checks) {
- return monitor;
- }
- monitor.checks = this.NormalizeData(monitor.checks, 10, 100);
- return monitor;
- });
- return { count, monitors: normalizedFilteredMonitors };
- } catch (error) {
- error.service = SERVICE_NAME;
- error.method = "getMonitorsWithChecksByTeamId";
- throw error;
- }
- };
- createMonitor = async ({ body, teamId, userId }) => {
- try {
- const monitor = new this.Monitor({ ...body, teamId, userId });
- const saved = await monitor.save();
- return saved;
- } catch (error) {
- error.service = SERVICE_NAME;
- error.method = "createMonitor";
- throw error;
- }
- };
-
- createBulkMonitors = async (req) => {
- try {
- const monitors = req.map((item) => new this.Monitor({ ...item, notifications: undefined }));
- await this.Monitor.bulkSave(monitors);
- return monitors;
- } catch (error) {
- error.service = SERVICE_NAME;
- error.method = "createBulkMonitors";
- throw error;
- }
- };
-
- deleteMonitor = async ({ teamId, monitorId }) => {
- try {
- const deletedMonitor = await this.Monitor.findOneAndDelete({ _id: monitorId, teamId });
-
- if (!deletedMonitor) {
- throw new Error(this.stringService.getDbFindMonitorById(monitorId));
- }
-
- return deletedMonitor;
- } catch (error) {
- error.service = SERVICE_NAME;
- error.method = "deleteMonitor";
- throw error;
- }
- };
-
- deleteAllMonitors = async (teamId) => {
- try {
- const monitors = await this.Monitor.find({ teamId });
- const { deletedCount } = await this.Monitor.deleteMany({ teamId });
-
- return { monitors, deletedCount };
- } catch (error) {
- error.service = SERVICE_NAME;
- error.method = "deleteAllMonitors";
- throw error;
- }
- };
-
- deleteMonitorsByUserId = async (userId) => {
- try {
- const result = await this.Monitor.deleteMany({ userId: userId });
- return result;
- } catch (error) {
- error.service = SERVICE_NAME;
- error.method = "deleteMonitorsByUserId";
- throw error;
- }
- };
-
- editMonitor = async ({ monitorId, body }) => {
- try {
- const editedMonitor = await this.Monitor.findByIdAndUpdate(monitorId, body, {
- new: true,
- });
- return editedMonitor;
- } catch (error) {
- error.service = SERVICE_NAME;
- error.method = "editMonitor";
- throw error;
- }
- };
-
- addDemoMonitors = async (userId, teamId) => {
- try {
- const demoMonitors = JSON.parse(this.fs.readFileSync(this.demoMonitorsPath, "utf8"));
-
- const demoMonitorsToInsert = demoMonitors.map((monitor) => {
- return {
- userId,
- teamId,
- name: monitor.name,
- description: monitor.name,
- type: "http",
- url: monitor.url,
- interval: 60000,
- };
- });
- const insertedMonitors = await this.Monitor.insertMany(demoMonitorsToInsert);
- return insertedMonitors;
- } catch (error) {
- error.service = SERVICE_NAME;
- error.method = "addDemoMonitors";
- throw error;
- }
- };
-
- pauseMonitor = async ({ monitorId }) => {
- try {
- const monitor = await this.Monitor.findOneAndUpdate(
- { _id: monitorId },
- [
- {
- $set: {
- isActive: { $not: "$isActive" },
- status: "$$REMOVE",
- },
- },
- ],
- { new: true }
- );
-
- return monitor;
- } catch (error) {
- error.service = SERVICE_NAME;
- error.method = "pauseMonitor";
- throw error;
- }
- };
+ constructor({ Monitor, MonitorStats, Check, stringService, fs, path, fileURLToPath, ObjectId, NormalizeData, NormalizeDataUptimeDetails }) {
+ this.Monitor = Monitor;
+ this.MonitorStats = MonitorStats;
+ this.Check = Check;
+ this.stringService = stringService;
+ this.fs = fs;
+ this.path = path;
+ this.fileURLToPath = fileURLToPath;
+ this.ObjectId = ObjectId;
+ this.NormalizeData = NormalizeData;
+ this.NormalizeDataUptimeDetails = NormalizeDataUptimeDetails;
+
+ const __filename = fileURLToPath(import.meta.url);
+ const __dirname = path.dirname(__filename);
+
+ this.demoMonitorsPath = path.resolve(__dirname, "../../../utils/demoMonitors.json");
+ }
+
+ // Helper
+ calculateUptimeDuration = (checks) => {
+ if (!checks || checks.length === 0) {
+ return 0;
+ }
+ const latestCheck = new Date(checks[0].createdAt);
+ let latestDownCheck = 0;
+
+ for (let i = checks.length - 1; i >= 0; i--) {
+ if (checks[i].status === false) {
+ latestDownCheck = new Date(checks[i].createdAt);
+ break;
+ }
+ }
+
+ // If no down check is found, uptime is from the last check to now
+ if (latestDownCheck === 0) {
+ return Date.now() - new Date(checks[checks.length - 1].createdAt);
+ }
+
+ // Otherwise the uptime is from the last check to the last down check
+ return latestCheck - latestDownCheck;
+ };
+
+ // Helper
+ getLastChecked = (checks) => {
+ if (!checks || checks.length === 0) {
+ return 0; // Handle case when no checks are available
+ }
+ // Data is sorted newest->oldest, so last check is the most recent
+ return new Date() - new Date(checks[0].createdAt);
+ };
+ getLatestResponseTime = (checks) => {
+ if (!checks || checks.length === 0) {
+ return 0;
+ }
+
+ return checks[0]?.responseTime ?? 0;
+ };
+
+ // Helper
+ getAverageResponseTime = (checks) => {
+ if (!checks || checks.length === 0) {
+ return 0;
+ }
+
+ const validChecks = checks.filter((check) => typeof check.responseTime === "number");
+ if (validChecks.length === 0) {
+ return 0;
+ }
+ const aggResponseTime = validChecks.reduce((sum, check) => {
+ return sum + check.responseTime;
+ }, 0);
+ return aggResponseTime / validChecks.length;
+ };
+
+ // Helper
+ getUptimePercentage = (checks) => {
+ if (!checks || checks.length === 0) {
+ return 0;
+ }
+ const upCount = checks.reduce((count, check) => {
+ return check.status === true ? count + 1 : count;
+ }, 0);
+ return (upCount / checks.length) * 100;
+ };
+
+ // Helper
+ getIncidents = (checks) => {
+ if (!checks || checks.length === 0) {
+ return 0; // Handle case when no checks are available
+ }
+ return checks.reduce((acc, check) => {
+ return check.status === false ? (acc += 1) : acc;
+ }, 0);
+ };
+
+ // Helper
+ getDateRange = (dateRange) => {
+ const startDates = {
+ recent: new Date(new Date().setHours(new Date().getHours() - 2)),
+ day: new Date(new Date().setDate(new Date().getDate() - 1)),
+ week: new Date(new Date().setDate(new Date().getDate() - 7)),
+ month: new Date(new Date().setMonth(new Date().getMonth() - 1)),
+ all: new Date(0),
+ };
+ return {
+ start: startDates[dateRange],
+ end: new Date(),
+ };
+ };
+
+ //Helper
+ getMonitorChecks = async (monitorId, dateRange, sortOrder) => {
+ const indexSpec = {
+ monitorId: 1,
+ updatedAt: sortOrder, // This will be 1 or -1
+ };
+
+ const [checksAll, checksForDateRange] = await Promise.all([
+ this.Check.find({ monitorId }).sort({ createdAt: sortOrder }).hint(indexSpec).lean(),
+ this.Check.find({
+ monitorId,
+ createdAt: { $gte: dateRange.start, $lte: dateRange.end },
+ })
+ .hint(indexSpec)
+ .lean(),
+ ]);
+
+ return { checksAll, checksForDateRange };
+ };
+
+ // Helper
+ processChecksForDisplay = (normalizeData, checks, numToDisplay, normalize) => {
+ let processedChecks = checks;
+ if (numToDisplay && checks.length > numToDisplay) {
+ const n = Math.ceil(checks.length / numToDisplay);
+ processedChecks = checks.filter((_, index) => index % n === 0);
+ }
+ return normalize ? normalizeData(processedChecks, 1, 100) : processedChecks;
+ };
+
+ // Helper
+ groupChecksByTime = (checks, dateRange) => {
+ return checks.reduce((acc, check) => {
+ // Validate the date
+ const checkDate = new Date(check.createdAt);
+ if (Number.isNaN(checkDate.getTime()) || checkDate.getTime() === 0) {
+ return acc;
+ }
+
+ const time = dateRange === "day" ? checkDate.setMinutes(0, 0, 0) : checkDate.toISOString().split("T")[0];
+
+ if (!acc[time]) {
+ acc[time] = { time, checks: [] };
+ }
+ acc[time].checks.push(check);
+ return acc;
+ }, {});
+ };
+
+ // Helper
+ calculateGroupStats = (group) => {
+ const totalChecks = group.checks.length;
+
+ const checksWithResponseTime = group.checks.filter((check) => typeof check.responseTime === "number" && !Number.isNaN(check.responseTime));
+
+ return {
+ time: group.time,
+ uptimePercentage: this.getUptimePercentage(group.checks),
+ totalChecks,
+ totalIncidents: group.checks.filter((check) => !check.status).length,
+ avgResponseTime:
+ checksWithResponseTime.length > 0
+ ? checksWithResponseTime.reduce((sum, check) => sum + check.responseTime, 0) / checksWithResponseTime.length
+ : 0,
+ };
+ };
+
+ getAllMonitors = async () => {
+ try {
+ const monitors = await this.Monitor.find();
+ return monitors;
+ } catch (error) {
+ error.service = SERVICE_NAME;
+ error.method = "getAllMonitors";
+ throw error;
+ }
+ };
+
+ getMonitorById = async (monitorId) => {
+ try {
+ const monitor = await this.Monitor.findById(monitorId);
+ if (monitor === null || monitor === undefined) {
+ const error = new Error(this.stringService.getDbFindMonitorById(monitorId));
+ error.status = 404;
+ throw error;
+ }
+
+ return monitor;
+ } catch (error) {
+ error.service = SERVICE_NAME;
+ error.method = "getMonitorById";
+ throw error;
+ }
+ };
+
+ getMonitorsByIds = async (monitorIds) => {
+ try {
+ const objectIds = monitorIds.map((id) => new this.ObjectId(id));
+ return await this.Monitor.find({ _id: { $in: objectIds } }, { _id: 1, teamId: 1 }).lean();
+ } catch (error) {
+ error.service = SERVICE_NAME;
+ error.method = "getMonitorsByIds";
+ throw error;
+ }
+ };
+ getUptimeDetailsById = async ({ monitorId, dateRange }) => {
+ try {
+ const dates = this.getDateRange(dateRange);
+ const formatLookup = {
+ recent: "%Y-%m-%dT%H:%M:00Z",
+ day: "%Y-%m-%dT%H:00:00Z",
+ week: "%Y-%m-%dT00:00:00Z",
+ month: "%Y-%m-%dT00:00:00Z",
+ };
+
+ const dateString = formatLookup[dateRange];
+
+ const results = await this.Check.aggregate(buildUptimeDetailsPipeline(monitorId, dates, dateString));
+
+ const monitorData = results[0];
+
+ monitorData.groupedUpChecks = this.NormalizeDataUptimeDetails(monitorData.groupedUpChecks, 10, 100);
+
+ monitorData.groupedDownChecks = this.NormalizeDataUptimeDetails(monitorData.groupedDownChecks, 10, 100);
+
+ const normalizedGroupChecks = this.NormalizeDataUptimeDetails(monitorData.groupedChecks, 10, 100);
+
+ monitorData.groupedChecks = normalizedGroupChecks;
+ const monitorStats = await this.MonitorStats.findOne({ monitorId });
+ return { monitorData, monitorStats };
+ } catch (error) {
+ error.service = SERVICE_NAME;
+ error.method = "getUptimeDetailsById";
+ throw error;
+ }
+ };
+
+ getMonitorStatsById = async ({ monitorId, sortOrder, dateRange, numToDisplay, normalize }) => {
+ try {
+ // Get monitor, if we can't find it, abort with error
+ const monitor = await this.Monitor.findById(monitorId);
+ if (monitor === null || monitor === undefined) {
+ throw new Error(this.stringService.getDbFindMonitorById(monitorId));
+ }
+
+ // Get query params
+ const sort = sortOrder === "asc" ? 1 : -1;
+
+ // Get Checks for monitor in date range requested
+ const dates = this.getDateRange(dateRange);
+ const { checksAll, checksForDateRange } = await this.getMonitorChecks(monitorId, dates, sort);
+
+ // Build monitor stats
+ const monitorStats = {
+ ...monitor.toObject(),
+ uptimeDuration: this.calculateUptimeDuration(checksAll),
+ lastChecked: this.getLastChecked(checksAll),
+ latestResponseTime: this.getLatestResponseTime(checksAll),
+ periodIncidents: this.getIncidents(checksForDateRange),
+ periodTotalChecks: checksForDateRange.length,
+ checks: this.processChecksForDisplay(this.NormalizeData, checksForDateRange, numToDisplay, normalize),
+ };
+
+ if (monitor.type === "http" || monitor.type === "ping" || monitor.type === "docker" || monitor.type === "port" || monitor.type === "game") {
+ // HTTP/PING Specific stats
+ monitorStats.periodAvgResponseTime = this.getAverageResponseTime(checksForDateRange);
+ monitorStats.periodUptime = this.getUptimePercentage(checksForDateRange);
+ const groupedChecks = this.groupChecksByTime(checksForDateRange, dateRange);
+ monitorStats.aggregateData = Object.values(groupedChecks).map(this.calculateGroupStats);
+ }
+
+ return monitorStats;
+ } catch (error) {
+ error.service = SERVICE_NAME;
+ error.method = "getMonitorStatsById";
+ throw error;
+ }
+ };
+
+ getHardwareDetailsById = async ({ monitorId, dateRange }) => {
+ try {
+ const monitor = await this.Monitor.findById(monitorId);
+ const dates = this.getDateRange(dateRange);
+
+ const formatLookup = {
+ recent: "%Y-%m-%dT%H:%M:00Z",
+ day: "%Y-%m-%dT%H:00:00Z",
+ week: "%Y-%m-%dT00:00:00Z",
+ month: "%Y-%m-%dT00:00:00Z",
+ };
+ const dateString = formatLookup[dateRange];
+
+ const hardwareStats = await this.Check.aggregate(buildHardwareDetailsPipeline(monitor, dates, dateString));
+
+ const stats = hardwareStats[0];
+
+ return {
+ ...monitor.toObject(),
+ stats,
+ };
+ } catch (error) {
+ error.service = SERVICE_NAME;
+ error.method = "getHardwareDetailsById";
+ throw error;
+ }
+ };
+
+ getMonitorsByTeamId = async ({ limit, type, page, rowsPerPage, filter, field, order, teamId }) => {
+ limit = parseInt(limit);
+ page = parseInt(page);
+ rowsPerPage = parseInt(rowsPerPage);
+ if (field === undefined) {
+ field = "name";
+ order = "asc";
+ }
+ // Build match stage
+ const matchStage = { teamId: new this.ObjectId(teamId) };
+ if (type !== undefined) {
+ matchStage.type = Array.isArray(type) ? { $in: type } : type;
+ }
+
+ const summaryResult = await this.Monitor.aggregate(buildMonitorSummaryByTeamIdPipeline({ matchStage }));
+ const summary = summaryResult[0];
+
+ const monitors = await this.Monitor.aggregate(buildMonitorsByTeamIdPipeline({ matchStage, field, order }));
+
+ const filteredMonitors = await this.Monitor.aggregate(
+ buildFilteredMonitorsByTeamIdPipeline({
+ matchStage,
+ filter,
+ page,
+ rowsPerPage,
+ field,
+ order,
+ limit,
+ type,
+ })
+ );
+
+ const normalizedFilteredMonitors = filteredMonitors.map((monitor) => {
+ if (!monitor.checks) {
+ return monitor;
+ }
+ monitor.checks = this.NormalizeData(monitor.checks, 10, 100);
+ return monitor;
+ });
+
+ return { summary, monitors, filteredMonitors: normalizedFilteredMonitors };
+ };
+
+ getMonitorsAndSummaryByTeamId = async ({ type, explain, teamId }) => {
+ try {
+ const matchStage = { teamId: new this.ObjectId(teamId) };
+ if (type !== undefined) {
+ matchStage.type = Array.isArray(type) ? { $in: type } : type;
+ }
+
+ if (explain === true) {
+ return this.Monitor.aggregate(buildMonitorsAndSummaryByTeamIdPipeline({ matchStage })).explain("executionStats");
+ }
+
+ const queryResult = await this.Monitor.aggregate(buildMonitorsAndSummaryByTeamIdPipeline({ matchStage }));
+ const { monitors, summary } = queryResult?.[0] ?? {};
+ return { monitors, summary };
+ } catch (error) {
+ error.service = SERVICE_NAME;
+ error.method = "getMonitorsAndSummaryByTeamId";
+ throw error;
+ }
+ };
+
+ getMonitorsWithChecksByTeamId = async ({ limit, type, page, rowsPerPage, filter, field, order, teamId, explain }) => {
+ try {
+ limit = parseInt(limit);
+ page = parseInt(page);
+ rowsPerPage = parseInt(rowsPerPage);
+ if (field === undefined) {
+ field = "name";
+ order = "asc";
+ }
+ // Build match stage
+ const matchStage = { teamId: new this.ObjectId(teamId) };
+ if (type !== undefined) {
+ matchStage.type = Array.isArray(type) ? { $in: type } : type;
+ }
+
+ if (explain === true) {
+ return this.Monitor.aggregate(
+ buildMonitorsWithChecksByTeamIdPipeline({
+ matchStage,
+ filter,
+ page,
+ rowsPerPage,
+ field,
+ order,
+ limit,
+ type,
+ })
+ ).explain("executionStats");
+ }
+
+ const queryResult = await this.Monitor.aggregate(
+ buildMonitorsWithChecksByTeamIdPipeline({
+ matchStage,
+ filter,
+ page,
+ rowsPerPage,
+ field,
+ order,
+ limit,
+ type,
+ })
+ );
+ const monitors = queryResult[0]?.monitors;
+ const count = queryResult[0]?.count;
+ const normalizedFilteredMonitors = monitors.map((monitor) => {
+ if (!monitor.checks) {
+ return monitor;
+ }
+ monitor.checks = this.NormalizeData(monitor.checks, 10, 100);
+ return monitor;
+ });
+ return { count, monitors: normalizedFilteredMonitors };
+ } catch (error) {
+ error.service = SERVICE_NAME;
+ error.method = "getMonitorsWithChecksByTeamId";
+ throw error;
+ }
+ };
+ createMonitor = async ({ body, teamId, userId }) => {
+ try {
+ const monitor = new this.Monitor({ ...body, teamId, userId });
+ const saved = await monitor.save();
+ return saved;
+ } catch (error) {
+ error.service = SERVICE_NAME;
+ error.method = "createMonitor";
+ throw error;
+ }
+ };
+
+ createBulkMonitors = async (req) => {
+ try {
+ const monitors = req.map((item) => new this.Monitor({ ...item, notifications: undefined }));
+ await this.Monitor.bulkSave(monitors);
+ return monitors;
+ } catch (error) {
+ error.service = SERVICE_NAME;
+ error.method = "createBulkMonitors";
+ throw error;
+ }
+ };
+
+ deleteMonitor = async ({ teamId, monitorId }) => {
+ try {
+ const deletedMonitor = await this.Monitor.findOneAndDelete({ _id: monitorId, teamId });
+
+ if (!deletedMonitor) {
+ throw new Error(this.stringService.getDbFindMonitorById(monitorId));
+ }
+
+ return deletedMonitor;
+ } catch (error) {
+ error.service = SERVICE_NAME;
+ error.method = "deleteMonitor";
+ throw error;
+ }
+ };
+
+ deleteAllMonitors = async (teamId) => {
+ try {
+ const monitors = await this.Monitor.find({ teamId });
+ const { deletedCount } = await this.Monitor.deleteMany({ teamId });
+
+ return { monitors, deletedCount };
+ } catch (error) {
+ error.service = SERVICE_NAME;
+ error.method = "deleteAllMonitors";
+ throw error;
+ }
+ };
+
+ deleteMonitorsByUserId = async (userId) => {
+ try {
+ const result = await this.Monitor.deleteMany({ userId: userId });
+ return result;
+ } catch (error) {
+ error.service = SERVICE_NAME;
+ error.method = "deleteMonitorsByUserId";
+ throw error;
+ }
+ };
+
+ editMonitor = async ({ monitorId, body }) => {
+ try {
+ const editedMonitor = await this.Monitor.findByIdAndUpdate(monitorId, body, {
+ new: true,
+ });
+ return editedMonitor;
+ } catch (error) {
+ error.service = SERVICE_NAME;
+ error.method = "editMonitor";
+ throw error;
+ }
+ };
+
+ addDemoMonitors = async (userId, teamId) => {
+ try {
+ const demoMonitors = JSON.parse(this.fs.readFileSync(this.demoMonitorsPath, "utf8"));
+
+ const demoMonitorsToInsert = demoMonitors.map((monitor) => {
+ return {
+ userId,
+ teamId,
+ name: monitor.name,
+ description: monitor.name,
+ type: "http",
+ url: monitor.url,
+ interval: 60000,
+ };
+ });
+ const insertedMonitors = await this.Monitor.insertMany(demoMonitorsToInsert);
+ return insertedMonitors;
+ } catch (error) {
+ error.service = SERVICE_NAME;
+ error.method = "addDemoMonitors";
+ throw error;
+ }
+ };
+
+ pauseMonitor = async ({ monitorId }) => {
+ try {
+ const monitor = await this.Monitor.findOneAndUpdate(
+ { _id: monitorId },
+ [
+ {
+ $set: {
+ isActive: { $not: "$isActive" },
+ status: "$$REMOVE",
+ },
+ },
+ ],
+ { new: true }
+ );
+
+ return monitor;
+ } catch (error) {
+ error.service = SERVICE_NAME;
+ error.method = "pauseMonitor";
+ throw error;
+ }
+ };
}
export default MonitorModule;