Merge pull request #2987 from bluewave-labs/feat/v2/components

feat: move components to v1 and v2 dirs

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

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,

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 }) => {

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 }) => {

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";
 
 /**

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";

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";

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.

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 = ({

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 }) => {

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 }) => {

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 }) => {

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";

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.
  *

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";
 

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";

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.

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";
 

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

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 (

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) => {

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.
  *

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";
 
 /**

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) => {

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.

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

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 = () => {

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";
 

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";
 
 /**

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

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";
 
 /**

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.

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";
 

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

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 = {

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 }) => {

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";
 

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

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,

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

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.

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.

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 = ({

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";

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 = {

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,

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 = {

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,

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";
 

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 }) => {