diff --git a/client/src/Components/v2/ActionsMenu/index.tsx b/client/src/Components/v2/ActionsMenu/index.tsx deleted file mode 100644 index a143be3f5..000000000 --- a/client/src/Components/v2/ActionsMenu/index.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React, { useState } from "react"; -import Menu from "@mui/material/Menu"; -import MenuItem from "@mui/material/MenuItem"; -import IconButton from "@mui/material/IconButton"; -import Settings from "@/assets/icons/settings-bold.svg?react"; - -export type ActionMenuItem = { - id: number | string; - label: React.ReactNode; - action: Function; - closeMenu?: boolean; -}; - -export const ActionsMenu = ({ items }: { items: ActionMenuItem[] }) => { - const [anchorEl, setAnchorEl] = useState(null); - const open = Boolean(anchorEl); - - const handleClick = (e: React.MouseEvent) => { - e.stopPropagation(); - setAnchorEl(e.currentTarget); - }; - - const handleClose = (e: React.MouseEvent) => { - e.stopPropagation(); - setAnchorEl(null); - }; - - return ( -
- - - - - {items.map((item) => ( - ) => { - e.stopPropagation(); - if (item.closeMenu) handleClose(e); - item.action(); - }} - > - {item.label} - - ))} - -
- ); -}; diff --git a/client/src/Components/v2/Arrows/ArrowLeft.tsx b/client/src/Components/v2/Arrows/ArrowLeft.tsx deleted file mode 100644 index 01d1342c8..000000000 --- a/client/src/Components/v2/Arrows/ArrowLeft.tsx +++ /dev/null @@ -1,36 +0,0 @@ -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"; - -export const ArrowLeft = ({ - type, - color = "#667085", - ...props -}: { - type?: string; - color?: string | undefined; - [key: string]: any; -}) => { - if (type === "double") { - return ( - - ); - } else if (type === "long") { - return ( - - ); - } else { - return ( - - ); - } -}; diff --git a/client/src/Components/v2/Arrows/ArrowRight.tsx b/client/src/Components/v2/Arrows/ArrowRight.tsx deleted file mode 100644 index c73165f16..000000000 --- a/client/src/Components/v2/Arrows/ArrowRight.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import RightArrow from "@/assets/icons/right-arrow.svg?react"; -import RightArrowDouble from "@/assets/icons/right-arrow-double.svg?react"; - -export const ArrowRight = ({ - type, - color = "#667085", - ...props -}: { - type?: string; - color?: string | undefined; - [key: string]: any; -}) => { - if (type === "double") { - return ( - - ); - } else { - return ( - - ); - } -}; diff --git a/client/src/Components/v2/Auth/AuthBasePage.tsx b/client/src/Components/v2/Auth/AuthBasePage.tsx deleted file mode 100644 index ba4230a6d..000000000 --- a/client/src/Components/v2/Auth/AuthBasePage.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import Stack from "@mui/material/Stack"; -import Box from "@mui/material/Box"; -import { HeaderAuth } from "@/Components/v2/Auth"; -import Logo from "@/assets/icons/checkmate-icon.svg?react"; - -import type { StackProps } from "@mui/material/Stack"; -import { useTheme } from "@mui/material/styles"; -import { Typography } from "@mui/material"; - -interface AuthBasePageProps extends StackProps { - title?: string; - subtitle?: string; - children: React.ReactNode; -} - -export const AuthBasePage: React.FC = ({ - children, - title, - subtitle, - ...props -}) => { - const theme = useTheme(); - return ( - - - - - - - {title} - {subtitle} - {children} - - - ); -}; diff --git a/client/src/Components/v2/Auth/HeaderAuth.jsx b/client/src/Components/v2/Auth/HeaderAuth.jsx deleted file mode 100644 index 4e437cd7e..000000000 --- a/client/src/Components/v2/Auth/HeaderAuth.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import Stack from "@mui/material/Stack"; -import Typography from "@mui/material/Typography"; -import Logo from "@/assets/icons/checkmate-icon.svg?react"; - -import { useTheme } from "@mui/material/styles"; -import { useTranslation } from "react-i18next"; -import { LanguageSelector, ThemeSwitch } from "@/Components/v2/Inputs"; - -export const HeaderAuth = () => { - const theme = useTheme(); - const { t } = useTranslation(); - return ( - - - - - ); -}; diff --git a/client/src/Components/v2/Auth/index.jsx b/client/src/Components/v2/Auth/index.jsx deleted file mode 100644 index 84b742113..000000000 --- a/client/src/Components/v2/Auth/index.jsx +++ /dev/null @@ -1,2 +0,0 @@ -export { HeaderAuth } from "./HeaderAuth"; -export { AuthBasePage } from "./AuthBasePage"; diff --git a/client/src/Components/v2/DesignElements/BaseBox.tsx b/client/src/Components/v2/DesignElements/BaseBox.tsx deleted file mode 100644 index 14c4af1c4..000000000 --- a/client/src/Components/v2/DesignElements/BaseBox.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import Box from "@mui/material/Box"; -import { useTheme } from "@mui/material/styles"; -import type { SxProps } from "@mui/material/styles"; - -type BaseBoxProps = React.PropsWithChildren<{ sx?: SxProps }>; - -export const BaseBox: React.FC = ({ children, sx }) => { - const theme = useTheme(); - return ( - - {children} - - ); -}; diff --git a/client/src/Components/v2/DesignElements/BasePage.tsx b/client/src/Components/v2/DesignElements/BasePage.tsx deleted file mode 100644 index f458cbb0a..000000000 --- a/client/src/Components/v2/DesignElements/BasePage.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import Stack from "@mui/material/Stack"; -import { ErrorFallback, EmptyFallback } from "./Fallback"; - -import type { StackProps } from "@mui/material/Stack"; -import { useTheme } from "@mui/material/styles"; -import { useTranslation } from "react-i18next"; -interface BasePageProps extends StackProps { - children: React.ReactNode; -} - -export const BasePage: React.FC = ({ - children, - ...props -}: { - children: React.ReactNode; -}) => { - const theme = useTheme(); - return ( - - {children} - - ); -}; - -interface BasePageWithStatesProps extends StackProps { - loading: boolean; - error: any; - items: any[]; - page: string; - actionLink?: string; - children: React.ReactNode; -} - -const isEmpty = (items: any[]) => { - if (!items) return true; - if (Array.isArray(items) && items.length === 0) return true; - return false; -}; - -export const BasePageWithStates: React.FC = ({ - loading, - error, - items, - page, - actionLink, - children, - ...props -}: BasePageWithStatesProps) => { - const { t } = useTranslation(); - - if (loading) { - return null; - } - - if (error) { - return ( - - ); - } - - if (isEmpty(items)) { - return ( - - ); - } - - return {children}; -}; diff --git a/client/src/Components/v2/DesignElements/BulletPointCheck.tsx b/client/src/Components/v2/DesignElements/BulletPointCheck.tsx deleted file mode 100644 index 03147e011..000000000 --- a/client/src/Components/v2/DesignElements/BulletPointCheck.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import Stack from "@mui/material/Stack"; -import Typography from "@mui/material/Typography"; -import CheckOutlined from "@/assets/icons/check-outlined.svg?react"; -import { useTheme } from "@mui/material/styles"; - -export const BulletPointCheck = ({ - text, - variant = "info", -}: { - text: string; - noHighlightText?: string; - variant?: "success" | "error" | "info"; -}) => { - const theme = useTheme(); - const colors: Record = { - success: theme.palette.success.main, - error: theme.palette.error.main, - info: theme.palette.primary.contrastTextSecondary, - }; - - return ( - - - - {text} - - - ); -}; diff --git a/client/src/Components/v2/DesignElements/Dot.tsx b/client/src/Components/v2/DesignElements/Dot.tsx deleted file mode 100644 index ca3884cfb..000000000 --- a/client/src/Components/v2/DesignElements/Dot.tsx +++ /dev/null @@ -1,23 +0,0 @@ -export const Dot = ({ - color = "gray", - size = "4px", - style, -}: { - color?: string; - size?: string; - style?: React.CSSProperties; -}) => { - return ( - - ); -}; diff --git a/client/src/Components/v2/DesignElements/Fallback.tsx b/client/src/Components/v2/DesignElements/Fallback.tsx deleted file mode 100644 index f7b48a113..000000000 --- a/client/src/Components/v2/DesignElements/Fallback.tsx +++ /dev/null @@ -1,158 +0,0 @@ -import Box from "@mui/material/Box"; -import Stack from "@mui/material/Stack"; -import OutputAnimation from "@/assets/Animations/output.gif"; -import DarkmodeOutput from "@/assets/Animations/darkmodeOutput.gif"; -import Typography from "@mui/material/Typography"; -import { BulletPointCheck } from "@/Components/v2/DesignElements"; -import { Button } from "@/Components/v2/Inputs"; - -import { useNavigate } from "react-router"; -import { useMediaQuery } from "@mui/material"; -import { useTheme } from "@mui/material/styles"; -import { useSelector } from "react-redux"; - -import type { BoxProps } from "@mui/material"; - -interface BaseFallbackProps extends BoxProps { - children: React.ReactNode; -} - -export const BaseFallback: React.FC = ({ children, ...props }) => { - const theme = useTheme(); - const mode = useSelector((state: any) => state.ui.mode); - const isSmall = useMediaQuery(theme.breakpoints.down("md")); - - return ( - - - - - - {children} - - - - ); -}; - -export const ErrorFallback = ({ - title, - subtitle, -}: { - title: string; - subtitle: string; -}) => { - const theme = useTheme(); - return ( - - - {title} - - {subtitle} - - ); -}; - -export const EmptyFallback = ({ - page, - title, - bullets, - actionButtonText, - actionLink, -}: { - page: string; - title: string; - bullets: any; - actionButtonText: string; - actionLink: string; -}) => { - const theme = useTheme(); - const navigate = useNavigate(); - return ( - - - - {title} - - - {bullets?.map((bullet: string, index: number) => ( - - ))} - - - - - - - ); -}; diff --git a/client/src/Components/v2/DesignElements/PulseDot.tsx b/client/src/Components/v2/DesignElements/PulseDot.tsx deleted file mode 100644 index a785b5a0d..000000000 --- a/client/src/Components/v2/DesignElements/PulseDot.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import Stack from "@mui/material/Stack"; -import Box from "@mui/material/Box"; -import { useTheme } from "@mui/material/styles"; -export const PulseDot = ({ color }: { color: string }) => { - const theme = useTheme(); - return ( - - - - ); -}; diff --git a/client/src/Components/v2/DesignElements/SplitBox.tsx b/client/src/Components/v2/DesignElements/SplitBox.tsx deleted file mode 100644 index f5a09d8f5..000000000 --- a/client/src/Components/v2/DesignElements/SplitBox.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { Fragment } from "react"; -import Stack from "@mui/material/Stack"; -import Box from "@mui/material/Box"; -import Typography from "@mui/material/Typography"; -import { useTheme } from "@mui/material/styles"; -import { useMediaQuery } from "@mui/material"; -export const SplitBox = ({ - left, - right, -}: { - left: React.ReactNode; - right: React.ReactNode; -}) => { - const theme = useTheme(); - const isSmall = useMediaQuery(theme.breakpoints.down("md")); - return ( - - - {left} - - - {right} - - - ); -}; - -export const ConfigBox = ({ - title, - subtitle, - rightContent, -}: { - title: string; - subtitle: string; - rightContent: React.ReactNode; -}) => { - return ( - - - {title} - - {subtitle} - - } - right={rightContent} - /> - ); -}; diff --git a/client/src/Components/v2/DesignElements/StatBox.tsx b/client/src/Components/v2/DesignElements/StatBox.tsx deleted file mode 100644 index 3450444b2..000000000 --- a/client/src/Components/v2/DesignElements/StatBox.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import Stack from "@mui/material/Stack"; -import Typography from "@mui/material/Typography"; -import { useTheme } from "@mui/material/styles"; -import { useMediaQuery } from "@mui/material"; -import type { PaletteKey } from "@/Utils/Theme/v2/theme"; -import { BaseBox } from "@/Components/v2/DesignElements"; - -type GradientBox = React.PropsWithChildren<{ palette?: PaletteKey }>; - -export const GradientBox: React.FC = ({ children, palette }) => { - const theme = useTheme(); - const isSmall = useMediaQuery(theme.breakpoints.down("md")); - const bg = palette - ? `linear-gradient(to bottom right, ${theme.palette[palette].main} 30%, ${theme.palette[palette].lowContrast} 70%)` - : `linear-gradient(340deg, ${theme.palette.tertiary.main} 10%, ${theme.palette.primary.main} 45%)`; - - return ( - - {children} - - ); -}; - -type StatBoxProps = React.PropsWithChildren<{ - title: string; - subtitle: string; - palette?: PaletteKey; -}>; - -export const StatBox: React.FC = ({ - title, - subtitle, - palette, - children, -}) => { - const theme = useTheme(); - const textColor = palette ? theme.palette[palette].contrastText : "inherit"; - - return ( - - - {title} - {subtitle} - {children} - - - ); -}; diff --git a/client/src/Components/v2/DesignElements/StatusBox.tsx b/client/src/Components/v2/DesignElements/StatusBox.tsx deleted file mode 100644 index 8cd5cfbc1..000000000 --- a/client/src/Components/v2/DesignElements/StatusBox.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import Stack from "@mui/material/Stack"; -import Typography from "@mui/material/Typography"; -import Box from "@mui/material/Box"; -import { BaseBox } from "@/Components/v2/DesignElements"; -import Background from "@/assets/Images/background-grid.svg?react"; -import { useTranslation } from "react-i18next"; - -import { useTheme } from "@mui/material/styles"; - -type StatusBoxProps = React.PropsWithChildren<{}>; - -export const BGBox: React.FC = ({ children }) => { - const theme = useTheme(); - return ( - - - - - {children} - - ); -}; - -const StatusBox = ({ - label, - n, - color, -}: { - label: string; - n: number; - color: string | undefined; -}) => { - const theme = useTheme(); - return ( - - - - {label} - - - {n} - - - - ); -}; - -export const UpStatusBox = ({ n }: { n: number }) => { - const theme = useTheme(); - const { t } = useTranslation(); - return ( - - ); -}; - -export const DownStatusBox = ({ n }: { n: number }) => { - const theme = useTheme(); - const { t } = useTranslation(); - return ( - - ); -}; - -export const PausedStatusBox = ({ n }: { n: number }) => { - const theme = useTheme(); - const { t } = useTranslation(); - return ( - - ); -}; diff --git a/client/src/Components/v2/DesignElements/StatusLabel.tsx b/client/src/Components/v2/DesignElements/StatusLabel.tsx deleted file mode 100644 index e4d288e63..000000000 --- a/client/src/Components/v2/DesignElements/StatusLabel.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import Box from "@mui/material/Box"; -import { BaseBox } from "@/Components/v2/DesignElements"; -import type { MonitorStatus } from "@/Types/Monitor"; - -import { getStatusPalette } from "@/Utils/v2/MonitorUtils"; -import { useTheme } from "@mui/material/styles"; - -export const StatusLabel = ({ - status, - isActive, -}: { - status: MonitorStatus; - isActive?: boolean; -}) => { - const theme = useTheme(); - const palette = getStatusPalette(status); - const transformedText = status.charAt(0).toUpperCase() + status.slice(1).toLowerCase(); - - return ( - - - {isActive === false ? "Paused" : transformedText} - - ); -}; diff --git a/client/src/Components/v2/DesignElements/Table.tsx b/client/src/Components/v2/DesignElements/Table.tsx deleted file mode 100644 index bf75fd9bf..000000000 --- a/client/src/Components/v2/DesignElements/Table.tsx +++ /dev/null @@ -1,215 +0,0 @@ -import Paper from "@mui/material/Paper"; -import Table from "@mui/material/Table"; -import TableBody from "@mui/material/TableBody"; -import TableCell from "@mui/material/TableCell"; -import TableContainer from "@mui/material/TableContainer"; -import TableHead from "@mui/material/TableHead"; -import TableRow from "@mui/material/TableRow"; - -import IconButton from "@mui/material/IconButton"; -import LastPageIcon from "@mui/icons-material/LastPage"; -import FirstPageIcon from "@mui/icons-material/FirstPage"; -import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft"; -import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight"; - -import Box from "@mui/material/Box"; -import TablePagination from "@mui/material/TablePagination"; -import type { TablePaginationProps } from "@mui/material/TablePagination"; - -import { useTheme } from "@mui/material/styles"; -import { useMediaQuery } from "@mui/material"; -export type Header = { - id: number | string; - content: React.ReactNode; - onClick?: (event: React.MouseEvent, row: T) => void; - render: (row: T) => React.ReactNode; -}; - -type DataTableProps = { - headers: Header[]; - data: T[]; - onRowClick?: (row: T) => void; -}; - -export function DataTable< - T extends { - id?: string | number; - _id?: string | number; - onRowClick?: (row: T) => void; - }, ->({ headers, data, onRowClick }: DataTableProps) { - const theme = useTheme(); - if (data.length === 0 || headers.length === 0) return
No data
; - return ( - - - - - {headers.map((header, idx) => { - return ( - - {header.content} - - ); - })} - - - - {data.map((row) => { - const key = row.id || row._id || Math.random(); - - return ( - (onRowClick ? onRowClick(row) : null)} - > - {headers.map((header, index) => { - return ( - header.onClick!(e, row) : undefined - } - > - {header.render(row)} - - ); - })} - - ); - })} - -
-
- ); -} - -interface TablePaginationActionsProps { - count: number; - page: number; - rowsPerPage: number; - onPageChange: (event: React.MouseEvent, newPage: number) => void; -} - -function TablePaginationActions(props: TablePaginationActionsProps) { - const theme = useTheme(); - const { count, page, rowsPerPage, onPageChange } = props; - - const handleFirstPageButtonClick = (event: React.MouseEvent) => { - onPageChange(event, 0); - }; - - const handleBackButtonClick = (event: React.MouseEvent) => { - onPageChange(event, page - 1); - }; - - const handleNextButtonClick = (event: React.MouseEvent) => { - onPageChange(event, page + 1); - }; - - const handleLastPageButtonClick = (event: React.MouseEvent) => { - onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1)); - }; - - return ( - - - {theme.direction === "rtl" ? : } - - - {theme.direction === "rtl" ? : } - - = Math.ceil(count / rowsPerPage) - 1} - aria-label="next page" - > - {theme.direction === "rtl" ? : } - - = Math.ceil(count / rowsPerPage) - 1} - aria-label="last page" - > - {theme.direction === "rtl" ? : } - - - ); -} - -export const Pagination: React.FC = ({ ...props }) => { - const isSmall = useMediaQuery((theme: any) => theme.breakpoints.down("sm")); - const theme = useTheme(); - return ( - - ); -}; diff --git a/client/src/Components/v2/DesignElements/index.tsx b/client/src/Components/v2/DesignElements/index.tsx deleted file mode 100644 index 3574daffb..000000000 --- a/client/src/Components/v2/DesignElements/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -export { SplitBox as HorizontalSplitBox, ConfigBox } from "./SplitBox"; -export { BasePage, BasePageWithStates } from "./BasePage"; -export { BGBox, UpStatusBox, DownStatusBox, PausedStatusBox } from "./StatusBox"; -export { DataTable as Table, Pagination } from "./Table"; -export { GradientBox, StatBox } from "./StatBox"; -export { BaseBox } from "./BaseBox"; -export { StatusLabel } from "./StatusLabel"; -export { BaseFallback, ErrorFallback, EmptyFallback } from "./Fallback"; -export { BulletPointCheck } from "./BulletPointCheck"; diff --git a/client/src/Components/v2/Inputs/AutoComplete.tsx b/client/src/Components/v2/Inputs/AutoComplete.tsx deleted file mode 100644 index 73afa365a..000000000 --- a/client/src/Components/v2/Inputs/AutoComplete.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import Autocomplete from "@mui/material/Autocomplete"; -import type { AutocompleteProps } from "@mui/material/Autocomplete"; -import { TextInput } from "@/Components/v2/Inputs/TextInput"; -import { CheckboxInput } from "@/Components/v2/Inputs/Checkbox"; -import ListItem from "@mui/material/ListItem"; -import { useTheme } from "@mui/material/styles"; - -type AutoCompleteInputProps = Omit< - AutocompleteProps, - "renderInput" -> & { - renderInput?: AutocompleteProps["renderInput"]; -}; - -export const AutoCompleteInput: React.FC = ({ ...props }) => { - const theme = useTheme(); - return ( - ( - - )} - getOptionKey={(option) => option._id} - renderTags={() => null} - renderOption={(props, option, { selected }) => { - const { key, ...optionProps } = props; - return ( - - - {option.name} - - ); - }} - sx={{ - "&.MuiAutocomplete-root .MuiAutocomplete-input": { - padding: `0 ${theme.spacing(5)}`, - }, - }} - /> - ); -}; diff --git a/client/src/Components/v2/Inputs/Button.tsx b/client/src/Components/v2/Inputs/Button.tsx deleted file mode 100644 index 2f28e8eda..000000000 --- a/client/src/Components/v2/Inputs/Button.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import Button from "@mui/material/Button"; -import type { ButtonProps } from "@mui/material/Button"; - -export const ButtonInput: React.FC = ({ sx, ...props }) => { - return ( -