remove unused

client/index.html

@@ -18,7 +18,7 @@
 		<div id="root"></div>
 		<script
 			type="module"
-			src="/src/main.jsx"
+			src="/src/main.tsx"
 		></script>
 	</body>
 </html>

client/src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, type CSSProperties } from "react";
 import { useSelector } from "react-redux";
 import "react-toastify/dist/ReactToastify.css";
 import { ToastContainer } from "react-toastify";
@@ -9,9 +9,10 @@ import { CssBaseline, GlobalStyles } from "@mui/material";
 import { logger } from "./Utils/Logger"; // Import the logger
 import { Routes } from "./Routes";
 import AppLayout from "@/Components/v1/Layouts/AppLayout";
+import type { RootState } from "@/Types/state";
 
 function App() {
-	const mode = useSelector((state) => state.ui.mode);
+	const mode = useSelector((state: RootState) => state.ui.mode);
 
 	// Cleanup
 	useEffect(() => {
@@ -28,6 +29,7 @@ function App() {
 			<GlobalStyles
 				styles={{
 					body: {
+						// @ts-ignore
 						backgroundColor: theme.palette.background.main,
 					},
 				}}
@@ -38,10 +40,12 @@ function App() {
 			<ToastContainer
 				newestOnTop={true}
 				theme={mode}
-				style={{
-					"--toastify-color-progress-light": "#7C8BA1",
-					"--toastify-color-progress-dark": "#7C8BA1",
-				}}
+				style={
+					{
+						"--toastify-color-progress-light": "#7C8BA1",
+						"--toastify-color-progress-dark": "#7C8BA1",
+					} as CSSProperties
+				}
 			/>
 		</ThemeProvider>
 	);

client/src/Components/v1/StatBox/index.jsx

@@ -1,149 +0,0 @@
-import { Stack, Typography } from "@mui/material";
-import Image from "../Image/index.jsx";
-import { useTheme } from "@mui/material/styles";
-import PropTypes from "prop-types";
-import { useMonitorUtils } from "../../../Hooks/useMonitorUtils.js";
-
-/**
- * StatBox Component
- *
- * A reusable component that displays a statistic with a heading and subheading
- * in a styled box with a gradient background.
- *
- * @component
- * @param {Object} props - The component props
- * @param {string} props.heading - The primary heading/title of the statistic
- * @param {string|React.ReactNode} props.subHeading - The value or description of the statistic
- * @param {boolean} [props.gradient=false] - Determines if the box should have a gradient background
- * @param {string} [props.status] - The status of the statistic
- * @param {Object} [props.sx] - Additional custom styling to be applied to the box
- *
- * @example
- * return (
- *   <StatBox
- *     heading="Total Users"
- *     subHeading="1,234"
- *     sx={{ width: 300 }}
- *   />
- * )
- *
- * @returns {React.ReactElement} A styled box containing the statistic
- */
-
-const StatBox = ({
-	img,
-	icon: Icon,
-	alt,
-	heading,
-	subHeading,
-	gradient = false,
-	status = "",
-	sx,
-}) => {
-	const theme = useTheme();
-	const { statusToTheme } = useMonitorUtils();
-	const themeColor = statusToTheme[status];
-
-	const statusBoxStyles = gradient
-		? {
-				background: `linear-gradient(to bottom right, ${theme.palette[themeColor].main} 30%, ${theme.palette[themeColor].lowContrast} 70%)`,
-				borderColor: theme.palette[themeColor].lowContrast,
-			}
-		: {
-				background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 10%, ${theme.palette.primary.main} 45%)`,
-				borderColor: theme.palette.primary.lowContrast,
-			};
-
-	const headingStyles = gradient
-		? {
-				color: theme.palette[themeColor].contrastText,
-			}
-		: {
-				color: theme.palette.primary.contrastTextSecondary,
-			};
-
-	const spanFixedStyles = { marginLeft: theme.spacing(2), fontSize: 15, fontWeight: 600 };
-	const detailTextStyles = gradient
-		? {
-				color: theme.palette[themeColor].contrastText,
-				"& span": {
-					color: theme.palette[themeColor].contrastText,
-					...spanFixedStyles,
-				},
-			}
-		: {
-				color: theme.palette.primary.contrastText,
-				"& span": {
-					color: theme.palette.primary.contrastTextTertiary,
-					...spanFixedStyles,
-				},
-			};
-
-	const responsiveWidths = {
-		default: `calc(25% - (3 * ${theme.spacing(8)} / 4))`,
-		md: `calc(50% - (1 * ${theme.spacing(8)} / 2))`,
-	};
-
-	return (
-		<Stack
-			direction="row"
-			sx={{
-				padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
-				/* TODO why are we using width and min width here? */
-				minWidth: 200,
-				// this is for status box to be reponsive on diff screens
-				width: responsiveWidths.default, // Default: 4 items per row
-				[theme.breakpoints.down("md")]: {
-					width: responsiveWidths.md, // 2 items per row
-				},
-				border: 1,
-				borderStyle: "solid",
-				borderRadius: 4,
-				...statusBoxStyles,
-				"& h2": {
-					/* TODO font size should come from theme */
-					fontSize: 13,
-					fontWeight: 500,
-					textTransform: "uppercase",
-					...headingStyles,
-				},
-				"& p": {
-					fontSize: 18,
-					marginTop: theme.spacing(2),
-					...detailTextStyles,
-				},
-				...sx,
-			}}
-		>
-			{img && (
-				<Image
-					src={img}
-					height={"30px"}
-					width={"30px"}
-					alt={alt}
-					sx={{ marginRight: theme.spacing(8) }}
-				/>
-			)}
-			{Icon && (
-				<Icon sx={{ width: "30px", height: "30px", marginRight: theme.spacing(8) }} />
-			)}
-			<Stack>
-				<Typography component="h2">{heading}</Typography>
-				<Typography sx={{ fontWeight: 500 }}>{subHeading}</Typography>
-			</Stack>
-		</Stack>
-	);
-};
-
-StatBox.propTypes = {
-	heading: PropTypes.string,
-	subHeading: PropTypes.node,
-	gradient: PropTypes.bool,
-	status: PropTypes.string,
-	sx: PropTypes.object,
-	icon: PropTypes.elementType,
-	img: PropTypes.node,
-	alt: PropTypes.string,
-};
-
-export default StatBox;

client/src/Hooks/useIsAdmin.js

@@ -1,17 +0,0 @@
-import { useSelector } from "react-redux";
-
-const useIsAdmin = () => {
-	const { user } = useSelector((state) => state.auth);
-	const isAdmin =
-		(user?.role?.includes("admin") ?? false) ||
-		(user?.role?.includes("superadmin") ?? false);
-	return isAdmin;
-};
-
-const useIsSuperAdmin = () => {
-	const { user } = useSelector((state) => state.auth);
-	const isSuperAdmin = user?.role?.includes("superadmin");
-	return isSuperAdmin;
-};
-
-export { useIsAdmin, useIsSuperAdmin };

client/src/Hooks/useIsAdmin.ts

@@ -0,0 +1,18 @@
+import type { RootState } from "@/Types/state";
+import { useSelector } from "react-redux";
+
+const useIsAdmin = (): boolean => {
+	const { user } = useSelector((state: RootState) => state.auth);
+	const isAdmin =
+		(user?.role?.includes("admin") ?? false) ||
+		(user?.role?.includes("superadmin") ?? false);
+	return isAdmin;
+};
+
+const useIsSuperAdmin = (): boolean => {
+	const { user } = useSelector((state: RootState) => state.auth);
+	const isSuperAdmin = user?.role?.includes("superadmin") ?? false;
+	return isSuperAdmin;
+};
+
+export { useIsAdmin, useIsSuperAdmin };

client/src/Hooks/useMonitorUtils.js

@@ -1,72 +0,0 @@
-import { useCallback } from "react";
-import { useTheme } from "@mui/material";
-
-const useMonitorUtils = () => {
-	const getMonitorWithPercentage = useCallback((monitor, theme) => {
-		let uptimePercentage = "";
-		let percentageColor = "";
-
-		if (monitor?.uptimePercentage !== undefined) {
-			uptimePercentage =
-				monitor?.uptimePercentage === 0
-					? "0"
-					: (monitor?.uptimePercentage * 100).toFixed(2);
-
-			percentageColor =
-				monitor?.uptimePercentage < 0.25
-					? theme.palette.error.main
-					: monitor?.uptimePercentage < 0.5
-						? theme.palette.warning.main
-						: monitor?.uptimePercentage < 0.75
-							? theme.palette.success.main
-							: theme.palette.success.main;
-		}
-
-		return {
-			...monitor,
-			percentage: uptimePercentage,
-			percentageColor,
-			monitor: monitor,
-		};
-	}, []);
-
-	const determineState = useCallback((monitor) => {
-		if (typeof monitor === "undefined") return "pending";
-		if (monitor?.isActive === false) return "paused";
-		if (monitor?.status === undefined) return "pending";
-		return monitor?.status == true ? "up" : "down";
-	}, []);
-
-	const theme = useTheme();
-
-	const statusColor = {
-		up: theme.palette.success.lowContrast,
-		down: theme.palette.error.lowContrast,
-		paused: theme.palette.warning.lowContrast,
-		pending: theme.palette.warning.lowContrast,
-	};
-
-	const statusToTheme = {
-		up: "success",
-		down: "error",
-		paused: "warning",
-		pending: "secondary",
-		"cannot resolve": "tertiary",
-	};
-
-	const pagespeedStatusMsg = {
-		up: "Live (collecting data)",
-		down: "Inactive",
-		paused: "Paused",
-	};
-
-	return {
-		getMonitorWithPercentage,
-		determineState,
-		statusColor,
-		statusToTheme,
-		pagespeedStatusMsg,
-	};
-};
-
-export { useMonitorUtils };

client/src/main.tsx

@@ -3,14 +3,14 @@ import App from "./App.jsx";
 import "./index.css";
 import { BrowserRouter as Router } from "react-router-dom";
 import { Provider } from "react-redux";
-import { persistor, store } from "./store";
+import { persistor, store } from "./store.js";
 import { PersistGate } from "redux-persist/integration/react";
-import I18nLoader from "./Components/v1/I18nLoader";
-import { initApiClient } from "./Utils/ApiClient";
+import I18nLoader from "./Components/v1/I18nLoader/index.jsx";
+import { initApiClient } from "./Utils/ApiClient.js";
 
 initApiClient(store);
 
-ReactDOM.createRoot(document.getElementById("root")).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
 	<Provider store={store}>
 		<PersistGate
 			loading={null}