Merge branch 'bluewave-labs:develop' into FIX-1847-Incident-Page-Style-Issues

.github/pull_request_template.md

@@ -16,7 +16,7 @@ Mention the issue number(s) this PR addresses (e.g., #123).
 - [ ] I have labelled the PR correctly.
 - [ ] The issue I am working on is assigned to me.
 - [ ] I didn't use any hardcoded values (otherwise it will not scale, and will make it difficult to maintain consistency across the application).
-- [ ] I made sure font sizes, color choices etc are all referenced from the theme.
+- [ ] I made sure font sizes, color choices etc are all referenced from the theme. I have no hardcoded dimensions.
 - [ ] My PR is granular and targeted to one specific feature.
 - [ ] I took a screenshot or a video and attached to this PR if there is a UI change.
 

package-lock.json

@@ -33,7 +33,7 @@
 				"immutability-helper": "^3.1.1",
 				"joi": "17.13.3",
 				"jwt-decode": "^4.0.0",
-				"maplibre-gl": "5.1.1",
+				"maplibre-gl": "5.2.0",
 				"mui-color-input": "^5.0.1",
 				"react": "18.3.1",
 				"react-dnd": "^16.0.1",
@@ -2688,10 +2688,13 @@
 			"license": "MIT"
 		},
 		"node_modules/@fontsource/roboto": {
-			"version": "5.1.1",
-			"resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.1.1.tgz",
-			"integrity": "sha512-XwVVXtERDQIM7HPUIbyDe0FP4SRovpjF7zMI8M7pbqFp3ahLJsJTd18h+E6pkar6UbV3btbwkKjYARr5M+SQow==",
-			"license": "Apache-2.0"
+			"version": "5.2.5",
+			"resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.2.5.tgz",
+			"integrity": "sha512-70r2UZ0raqLn5W+sPeKhqlf8wGvUXFWlofaDlcbt/S3d06+17gXKr3VNqDODB0I1ASme3dGT5OJj9NABt7OTZQ==",
+			"license": "OFL-1.1",
+			"funding": {
+				"url": "https://github.com/sponsors/ayuhito"
+			}
 		},
 		"node_modules/@fractalwagmi/popup-connection": {
 			"version": "1.1.1",
@@ -11412,9 +11415,9 @@
 			}
 		},
 		"node_modules/eslint-plugin-react-hooks": {
-			"version": "5.1.0",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.1.0.tgz",
-			"integrity": "sha512-mpJRtPgHN2tNAvZ35AMfqeB3Xqeo273QxrHJsbBEPWODRM4r0yB6jfoROqKEYrOn27UtRPpcpHc2UqyBSuUNTw==",
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz",
+			"integrity": "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
@@ -14110,9 +14113,9 @@
 			}
 		},
 		"node_modules/maplibre-gl": {
-			"version": "5.1.1",
-			"resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-5.1.1.tgz",
-			"integrity": "sha512-0Z6ODzyFu/grwT6K1eIBpv6MZE4xnJD1AV+Yq1hPzOh/YCY36r9BlSaU7d7n2/HJOaoKOy0b2YF8cS4dD+iEVQ==",
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-5.2.0.tgz",
+			"integrity": "sha512-9zZKD0M80qtDsqBet+EDuAhoCeA/cnAuZAA0p3hcGKGbyjM/SH+R6wQvnBEgvJz9UhDynnkoKdUwhI+fUkHoXQ==",
 			"license": "BSD-3-Clause",
 			"dependencies": {
 				"@mapbox/geojson-rewind": "^0.5.2",
@@ -15639,9 +15642,9 @@
 			}
 		},
 		"node_modules/prettier": {
-			"version": "3.5.2",
-			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.2.tgz",
-			"integrity": "sha512-lc6npv5PH7hVqozBR7lkBNOGXV9vMwROAPlumdBkX0wTbbzPu/U1hk5yL8p2pt4Xoc+2mkT8t/sow2YrV/M5qg==",
+			"version": "3.5.3",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
+			"integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
 			"dev": true,
 			"license": "MIT",
 			"bin": {

package.json

@@ -36,7 +36,7 @@
 		"i18next": "^24.2.2",
 		"immutability-helper": "^3.1.1",
 		"joi": "17.13.3",
-		"maplibre-gl": "5.1.1",
+		"maplibre-gl": "5.2.0",
 		"mui-color-input": "^5.0.1",
 		"react": "18.3.1",
 		"react-dnd": "^16.0.1",

src/App.jsx

@@ -12,17 +12,28 @@ import { logger } from "./Utils/Logger"; // Import the logger
 import { networkService } from "./main";
 import { Routes } from "./Routes";
 import WalletProvider from "./Components/WalletProvider";
+import { useTranslation } from "react-i18next";
+import { setLanguage } from "./Features/UI/uiSlice";
 
 function App() {
 	const mode = useSelector((state) => state.ui.mode);
 	const { authToken } = useSelector((state) => state.auth);
 	const dispatch = useDispatch();
+	const { i18n } = useTranslation();
 
 	useEffect(() => {
 		if (authToken) {
-			dispatch(getAppSettings({ authToken }));
+			dispatch(getAppSettings({ authToken })).then((action) => {
+				if (action.payload && action.payload.success) {
+					const { language } = action.payload.data;
+					if (language) {
+						dispatch(setLanguage(language));
+						i18n.changeLanguage(language);
+					}
+				}
+			});
 		}
-	}, [dispatch, authToken]);
+	}, [dispatch, authToken, i18n]);
 
 	// Cleanup
 	useEffect(() => {

src/Components/Alert/index.jsx

@@ -36,8 +36,8 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => {
 	*/
 
 	const text = theme.palette.secondary.contrastText;
-	const bg = theme.palette.secondary.main;
-	const border = theme.palette.secondary.contrastText;
+	const border = theme.palette.alert.contrastText;
+	const bg = theme.palette.alert.main;
 	const icon = icons[variant];
 
 	return (

src/Components/Charts/CustomGauge/index.jsx

@@ -62,6 +62,7 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold =
 			className="radial-chart"
 			width={radius}
 			height={radius}
+			sx={{ backgroundColor: theme.palette.primary.main, borderRadius: "50%" }}
 		>
 			<svg
 				viewBox={`0 0 ${totalSize} ${totalSize}`}
@@ -70,7 +71,7 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold =
 			>
 				<circle
 					className="radial-chart-base"
-					stroke={theme.palette.primary.lowContrast} // CAIO_REVIEW
+					stroke={theme.palette.secondary.light} // CAIO_REVIEW
 					strokeWidth={strokeWidth}
 					fill="none"
 					cx={totalSize / 2} // Center the circle
@@ -98,8 +99,8 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold =
 					top: "50%",
 					left: "50%",
 					transform: "translate(-50%, -50%)",
-					...theme.typography.body2,
-					fill: theme.typography.body2.color,
+					...theme.typography.h2,
+					fill: theme.typography.h2.color,
 				}}
 			>
 				{`${progressWithinRange.toFixed(1)}%`}

src/Components/LanguageSelector.jsx

@@ -14,7 +14,6 @@ const LanguageSelector = () => {
 		i18n.changeLanguage(newLang);
 	};
 
-	// i18n instance'ından mevcut dilleri al
 	const languages = Object.keys(i18n.options.resources || {});
 
 	return (

src/Components/StatBox/index.jsx

@@ -50,7 +50,7 @@ const StatBox = ({
 				borderColor: theme.palette[themeColor].lowContrast,
 			}
 		: {
-				background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.primary.main} 45%)`,
+				background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 10%, ${theme.palette.primary.main} 45%)`,
 				borderColor: theme.palette.primary.lowContrast,
 			};
 
@@ -62,7 +62,7 @@ const StatBox = ({
 				color: theme.palette.primary.contrastTextSecondary,
 			};
 
-	const spanFixedStyles = { marginLeft: theme.spacing(2), fontSize: 15 };
+	const spanFixedStyles = { marginLeft: theme.spacing(2), fontSize: 15, fontWeight: 600};
 	const detailTextStyles = gradient
 		? {
 				color: theme.palette[themeColor].contrastText,
@@ -120,7 +120,7 @@ const StatBox = ({
 			)}
 			<Stack>
 				<Typography component="h2">{heading}</Typography>
-				<Typography>{subHeading}</Typography>
+				<Typography sx={{fontWeight: 500}}>{subHeading}</Typography>
 			</Stack>
 		</Stack>
 	);

src/Features/Settings/settingsSlice.js

@@ -5,6 +5,7 @@ const initialState = {
 	isLoading: false,
 	apiBaseUrl: "",
 	logLevel: "debug",
+	language: "",
 };
 
 export const getAppSettings = createAsyncThunk(
@@ -34,6 +35,7 @@ export const updateAppSettings = createAsyncThunk(
 			const parsedSettings = {
 				apiBaseUrl: settings.apiBaseUrl,
 				logLevel: settings.logLevel,
+				language: settings.language,
 				clientHost: settings.clientHost,
 				jwtSecret: settings.jwtSecret,
 				dbType: settings.dbType,
@@ -68,6 +70,7 @@ const handleGetSettingsFulfilled = (state, action) => {
 	state.msg = action.payload.msg;
 	state.apiBaseUrl = action.payload.data.apiBaseUrl;
 	state.logLevel = action.payload.data.logLevel;
+	state.language = action.payload.data.language;
 };
 const handleGetSettingsRejected = (state, action) => {
 	state.isLoading = false;

src/Pages/Account/index.jsx

@@ -57,10 +57,6 @@ const Account = ({ open = "profile" }) => {
 			className="account"
 			px={theme.spacing(20)}
 			py={theme.spacing(12)}
-			backgroundColor={theme.palette.primary.main}
-			border={1}
-			borderColor={theme.palette.primary.lowContrast}
-			borderRadius={theme.shape.borderRadius}
 		>
 			<TabContext value={tab}>
 				<Box

src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx

@@ -1,6 +1,5 @@
 import { useState, useEffect, useRef } from "react";
 import { networkService } from "../../../../main";
-import { useSelector } from "react-redux";
 
 const getRandomDevice = () => {
 	const manufacturers = {

src/Pages/DistributedUptime/Monitors/Components/MonitorTable/index.jsx

@@ -20,7 +20,6 @@ const MonitorTable = ({ isLoading, monitors }) => {
 	const theme = useTheme();
 	const navigate = useNavigate();
 	const { determineState } = useMonitorUtils();
-
 	const headers = [
 		{
 			id: "name",

src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx

@@ -24,7 +24,11 @@ const useSubscribeToMonitors = (page, rowsPerPage) => {
 			const cleanup = networkService.subscribeToDistributedUptimeMonitors({
 				teamId: user.teamId,
 				limit: 25,
-				types: ["distributed_http"],
+				types: [
+					typeof import.meta.env.VITE_DEPIN_TESTING === "undefined"
+						? "distributed_http"
+						: "distributed_test",
+				],
 				page,
 				rowsPerPage,
 				filter: null,

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

@@ -9,6 +9,16 @@ import PropTypes from "prop-types";
 const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) => {
 	const theme = useTheme();
 
+	const valueStyle = {
+		borderRadius: theme.spacing(2),
+		backgroundColor: theme.palette.tertiary.main,
+		width: "40%",
+		mb: theme.spacing(2),
+		mt: theme.spacing(2),
+		pr: theme.spacing(2),
+		textAlign: 'right'
+	}
+
 	return (
 		<BaseContainer>
 			<Stack
@@ -16,12 +26,21 @@ const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) =>
 				gap={theme.spacing(2)}
 				alignItems="center"
 			>
-				<CustomGauge
-					progress={value}
-					radius={100}
-					color={theme.palette.primary.main}
-				/>
-				<Typography component="h2">{heading}</Typography>
+				<Box
+					sx={{
+						display: "flex",
+						flexDirection: "column",
+						alignItems: "center",
+						width: "100%",
+						backgroundColor: theme.palette.gradient.color1
+					}}
+				>
+					<CustomGauge
+						progress={value}
+						radius={100}
+					/>
+					<Typography component="h2" sx={{ fontWeight: 600 }}>{heading}</Typography>
+				</Box>
 				<Box
 					sx={{
 						width: "100%",
@@ -31,18 +50,20 @@ const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) =>
 					<Stack
 						justifyContent={"space-between"}
 						direction="row"
+						alignItems="center"
 						gap={theme.spacing(2)}
 					>
 						<Typography>{metricOne}</Typography>
-						<Typography>{valueOne}</Typography>
+						<Typography sx={valueStyle}>{valueOne}</Typography>
 					</Stack>
 					<Stack
 						justifyContent={"space-between"}
 						direction="row"
+						alignItems="center"
 						gap={theme.spacing(2)}
 					>
 						<Typography>{metricTwo}</Typography>
-						<Typography>{valueTwo}</Typography>
+						<Typography sx={valueStyle}>{valueTwo}</Typography>
 					</Stack>
 				</Box>
 			</Stack>

src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx

@@ -64,6 +64,7 @@ const useHardwareUtils = () => {
 			return (
 				<>
 					{Number(MB.toFixed(0))}
+					{space ? " " : ""}
 					<Typography component="span">MB</Typography>
 				</>
 			);

src/Pages/Infrastructure/Details/index.jsx

@@ -62,7 +62,7 @@ const InfrastructureDetails = () => {
 					monitor={monitor}
 				/>
 				<GenericFallback>
-					<Typography>No check history for htis monitor yet.</Typography>
+					<Typography>No check history for this monitor yet.</Typography>
 				</GenericFallback>
 			</Stack>
 		);

src/Pages/Settings/index.jsx

@@ -27,19 +27,24 @@ import {
 	setTimezone,
 	setMode,
 	setDistributedUptimeEnabled,
+	setLanguage,
 } from "../../Features/UI/uiSlice";
 import timezones from "../../Utils/timezones.json";
 import { useState, useEffect } from "react";
 import { networkService } from "../../main";
 import { settingsValidation } from "../../Validation/validation";
+import { updateAppSettings } from "../../Features/Settings/settingsSlice";
+import { useTranslation } from "react-i18next";
 
 // Constants
 const SECONDS_PER_DAY = 86400;
 
 const Settings = () => {
 	const theme = useTheme();
+	const { t, i18n } = useTranslation();
 	const isAdmin = useIsAdmin();
 	const { user } = useSelector((state) => state.auth);
+	const { language } = useSelector((state) => state.ui);
 	const { checkTTL } = user;
 	const { isLoading } = useSelector((state) => state.uptimeMonitors);
 	const { isLoading: authIsLoading } = useSelector((state) => state.auth);
@@ -119,10 +124,13 @@ const Settings = () => {
 			});
 			const updatedUser = { ...user, checkTTL: form.ttl };
 			const action = await dispatch(update({ localData: updatedUser }));
+			const settingsAction = await dispatch(
+				updateAppSettings({ settings: { language: language } })
+			);
 
-			if (action.payload.success) {
+			if (action.payload.success && settingsAction.payload.success) {
 				createToast({
-					body: "Settings saved successfully",
+					body: t("settingsSuccessSaved"),
 				});
 			} else {
 				if (action.payload) {
@@ -139,7 +147,7 @@ const Settings = () => {
 			}
 		} catch (error) {
 			console.log(error);
-			createToast({ body: "Failed to save settings" });
+			createToast({ body: t("settingsFailedToSave") });
 		} finally {
 			setChecksIsLoading(false);
 		}
@@ -147,18 +155,16 @@ const Settings = () => {
 
 	const handleClearStats = async () => {
 		try {
-			const action = await dispatch(
-				deleteMonitorChecksByTeamId({ teamId: user.teamId })
-			);
+			const action = await dispatch(deleteMonitorChecksByTeamId({ teamId: user.teamId }));
 
 			if (deleteMonitorChecksByTeamId.fulfilled.match(action)) {
-				createToast({ body: "Stats cleared successfully" });
+				createToast({ body: t("settingsStatsCleared") });
 			} else {
-				createToast({ body: "Failed to clear stats" });
+				createToast({ body: t("settingsFailedToClearStats") });
 			}
 		} catch (error) {
 			logger.error(error);
-			createToast({ body: "Failed to clear stats" });
+			createToast({ body: t("settingsFailedToClearStats") });
 		} finally {
 			setIsOpen(deleteStatsMonitorsInitState);
 		}
@@ -168,13 +174,13 @@ const Settings = () => {
 		try {
 			const action = await dispatch(addDemoMonitors());
 			if (addDemoMonitors.fulfilled.match(action)) {
-				createToast({ body: "Successfully added demo monitors" });
+				createToast({ body: t("settingsDemoMonitorsAdded") });
 			} else {
-				createToast({ body: "Failed to add demo monitors" });
+				createToast({ body: t("settingsFailedToAddDemoMonitors") });
 			}
 		} catch (error) {
 			logger.error(error);
-			createToast({ Body: "Failed to add demo monitors" });
+			createToast({ Body: t("settingsFailedToAddDemoMonitors") });
 		}
 	};
 
@@ -182,18 +188,20 @@ const Settings = () => {
 		try {
 			const action = await dispatch(deleteAllMonitors());
 			if (deleteAllMonitors.fulfilled.match(action)) {
-				createToast({ body: "Successfully deleted all monitors" });
+				createToast({ body: t("settingsMonitorsDeleted") });
 			} else {
-				createToast({ body: "Failed to add demo monitors" });
+				createToast({ body: t("settingsFailedToDeleteMonitors") });
 			}
 		} catch (error) {
 			logger.error(error);
-			createToast({ Body: "Failed to delete all monitors" });
+			createToast({ Body: t("settingsFailedToDeleteMonitors") });
 		} finally {
 			setIsOpen(deleteStatsMonitorsInitState);
 		}
 	};
 
+	const languages = Object.keys(i18n.options.resources || {});
+
 	return (
 		<Box
 			className="settings"
@@ -209,16 +217,16 @@ const Settings = () => {
 			>
 				<ConfigBox>
 					<Box>
-						<Typography component="h1">General settings</Typography>
+						<Typography component="h1">{t("settingsGeneralSettings")}</Typography>
 						<Typography sx={{ mt: theme.spacing(2), mb: theme.spacing(2) }}>
-							<Typography component="span">Display timezone</Typography>- The timezone of
-							the dashboard you publicly display.
+							<Typography component="span">{t("settingsDisplayTimezone")}</Typography>-{" "}
+							{t("settingsDisplayTimezoneDescription")}
 						</Typography>
 					</Box>
 					<Stack gap={theme.spacing(20)}>
 						<Select
 							id="display-timezones"
-							label="Display timezone"
+							label={t("settingsDisplayTimezone")}
 							value={timezone}
 							onChange={(e) => {
 								dispatch(setTimezone({ timezone: e.target.value }));
@@ -229,15 +237,15 @@ const Settings = () => {
 				</ConfigBox>
 				<ConfigBox>
 					<Box>
-						<Typography component="h1">Appearance</Typography>
+						<Typography component="h1">{t("settingsAppearance")}</Typography>
 						<Typography sx={{ mt: theme.spacing(2), mb: theme.spacing(2) }}>
-							Switch between light and dark mode.
+							{t("settingsAppearanceDescription")}
 						</Typography>
 					</Box>
 					<Stack gap={theme.spacing(20)}>
 						<Select
 							id="theme-mode"
-							label="Theme Mode"
+							label={t("settingsThemeMode")}
 							value={mode}
 							onChange={(e) => {
 								dispatch(setMode(e.target.value));
@@ -247,14 +255,24 @@ const Settings = () => {
 								{ _id: "dark", name: "Dark" },
 							]}
 						></Select>
+						<Select
+							id="language"
+							label={t("settingsLanguage")}
+							value={language}
+							onChange={(e) => {
+								dispatch(setLanguage(e.target.value));
+								i18n.changeLanguage(e.target.value);
+							}}
+							items={languages.map((lang) => ({ _id: lang, name: lang.toUpperCase() }))}
+						></Select>
 					</Stack>
 				</ConfigBox>
 				{isAdmin && (
 					<ConfigBox>
 						<Box>
-							<Typography component="h1">Distributed uptime</Typography>
+							<Typography component="h1">{t("settingsDistributedUptime")}</Typography>
 							<Typography sx={{ mt: theme.spacing(2), mb: theme.spacing(2) }}>
-								Enable/disable distributed uptime monitoring.
+								{t("settingsDistributedUptimeDescription")}
 							</Typography>
 						</Box>
 						<Box>
@@ -266,109 +284,18 @@ const Settings = () => {
 									dispatch(setDistributedUptimeEnabled(e.target.checked));
 								}}
 							/>
-							{distributedUptimeEnabled === true ? "Enabled" : "Disabled"}
+							{distributedUptimeEnabled === true
+								? t("settingsEnabled")
+								: t("settingsDisabled")}
 						</Box>
 					</ConfigBox>
 				)}
 				{isAdmin && (
 					<ConfigBox>
 						<Box>
-							<Typography component="h1">History and monitoring</Typography>
+							<Typography component="h1">{t("settingsWallet")}</Typography>
 							<Typography sx={{ mt: theme.spacing(2) }}>
-								Define here for how long you want to keep the data. You can also remove
-								all past data.
-							</Typography>
-						</Box>
-						<Stack gap={theme.spacing(20)}>
-							<TextInput
-								id="ttl"
-								label="The days you want to keep monitoring history."
-								optionalLabel="0 for infinite"
-								value={form.ttl}
-								onChange={handleChange}
-								error={errors.ttl ? true : false}
-								helperText={errors.ttl}
-							/>
-							<Box>
-								<Typography>Clear all stats. This is irreversible.</Typography>
-								<Button
-									variant="contained"
-									color="error"
-									onClick={() =>
-										setIsOpen({ ...deleteStatsMonitorsInitState, deleteStats: true })
-									}
-									sx={{ mt: theme.spacing(4) }}
-								>
-									Clear all stats
-								</Button>
-							</Box>
-						</Stack>
-						<Dialog
-							open={isOpen.deleteStats}
-							theme={theme}
-							title="Do you want to clear all stats?"
-							description="Once deleted, your monitors cannot be retrieved."
-							onCancel={() => setIsOpen(deleteStatsMonitorsInitState)}
-							confirmationButtonLabel="Yes, clear all stats"
-							onConfirm={handleClearStats}
-							isLoading={isLoading || authIsLoading || checksIsLoading}
-						/>
-					</ConfigBox>
-				)}
-				{isAdmin && (
-					<ConfigBox>
-						<Box>
-							<Typography component="h1">Demo monitors</Typography>
-							<Typography sx={{ mt: theme.spacing(2) }}>
-								Here you can add and remove demo monitors.
-							</Typography>
-						</Box>
-						<Stack gap={theme.spacing(20)}>
-							<Box>
-								<Typography>Add demo monitors</Typography>
-								<Button
-									variant="contained"
-									color="accent"
-									loading={isLoading || authIsLoading || checksIsLoading}
-									onClick={handleInsertDemoMonitors}
-									sx={{ mt: theme.spacing(4) }}
-								>
-									Add demo monitors
-								</Button>
-							</Box>
-							<Box>
-								<Typography>Remove all monitors</Typography>
-								<Button
-									variant="contained"
-									color="error"
-									loading={isLoading || authIsLoading || checksIsLoading}
-									onClick={() =>
-										setIsOpen({ ...deleteStatsMonitorsInitState, deleteMonitors: true })
-									}
-									sx={{ mt: theme.spacing(4) }}
-								>
-									Remove all monitors
-								</Button>
-							</Box>
-						</Stack>
-						<Dialog
-							open={isOpen.deleteMonitors}
-							theme={theme}
-							title="Do you want to remove all monitors?"
-							onCancel={() => setIsOpen(deleteStatsMonitorsInitState)}
-							confirmationButtonLabel="Yes, clear all monitors"
-							onConfirm={handleDeleteAllMonitors}
-							isLoading={isLoading || authIsLoading || checksIsLoading}
-						/>
-					</ConfigBox>
-				)}
-				{isAdmin && (
-					<ConfigBox>
-						<Box>
-							<Typography component="h1">Wallet</Typography>
-							<Typography sx={{ mt: theme.spacing(2) }}>
-								Connect your wallet here. This is required for the Distributed Uptime
-								monitor to connect to multiple nodes globally.
+								{t("settingsWalletDescription")}
 							</Typography>
 						</Box>
 						<Box>
@@ -382,15 +309,106 @@ const Settings = () => {
 						</Box>
 					</ConfigBox>
 				)}
+				{isAdmin && (
+					<ConfigBox>
+						<Box>
+							<Typography component="h1">{t("settingsHistoryAndMonitoring")}</Typography>
+							<Typography sx={{ mt: theme.spacing(2) }}>
+								{t("settingsHistoryAndMonitoringDescription")}
+							</Typography>
+						</Box>
+						<Stack gap={theme.spacing(20)}>
+							<TextInput
+								id="ttl"
+								label={t("settingsTTLLabel")}
+								optionalLabel={t("settingsTTLOptionalLabel")}
+								value={form.ttl}
+								onChange={handleChange}
+								error={errors.ttl ? true : false}
+								helperText={errors.ttl}
+							/>
+							<Box>
+								<Typography>{t("settingsClearAllStats")}</Typography>
+								<Button
+									variant="contained"
+									color="error"
+									onClick={() =>
+										setIsOpen({ ...deleteStatsMonitorsInitState, deleteStats: true })
+									}
+									sx={{ mt: theme.spacing(4) }}
+								>
+									{t("settingsClearAllStatsButton")}
+								</Button>
+							</Box>
+						</Stack>
+						<Dialog
+							open={isOpen.deleteStats}
+							theme={theme}
+							title={t("settingsClearAllStatsDialogTitle")}
+							description={t("settingsClearAllStatsDialogDescription")}
+							onCancel={() => setIsOpen(deleteStatsMonitorsInitState)}
+							confirmationButtonLabel={t("settingsClearAllStatsDialogConfirm")}
+							onConfirm={handleClearStats}
+							isLoading={isLoading || authIsLoading || checksIsLoading}
+						/>
+					</ConfigBox>
+				)}
+				{isAdmin && (
+					<ConfigBox>
+						<Box>
+							<Typography component="h1">{t("settingsDemoMonitors")}</Typography>
+							<Typography sx={{ mt: theme.spacing(2) }}>
+								{t("settingsDemoMonitorsDescription")}
+							</Typography>
+						</Box>
+						<Stack gap={theme.spacing(20)}>
+							<Box>
+								<Typography>{t("settingsAddDemoMonitors")}</Typography>
+								<Button
+									variant="contained"
+									color="accent"
+									loading={isLoading || authIsLoading || checksIsLoading}
+									onClick={handleInsertDemoMonitors}
+									sx={{ mt: theme.spacing(4) }}
+								>
+									{t("settingsAddDemoMonitorsButton")}
+								</Button>
+							</Box>
+							<Box>
+								<Typography>{t("settingsRemoveAllMonitors")}</Typography>
+								<Button
+									variant="contained"
+									color="error"
+									loading={isLoading || authIsLoading || checksIsLoading}
+									onClick={() =>
+										setIsOpen({ ...deleteStatsMonitorsInitState, deleteMonitors: true })
+									}
+									sx={{ mt: theme.spacing(4) }}
+								>
+									{t("settingsRemoveAllMonitorsButton")}
+								</Button>
+							</Box>
+						</Stack>
+						<Dialog
+							open={isOpen.deleteMonitors}
+							theme={theme}
+							title={t("settingsRemoveAllMonitorsDialogTitle")}
+							onCancel={() => setIsOpen(deleteStatsMonitorsInitState)}
+							confirmationButtonLabel={t("settingsRemoveAllMonitorsDialogConfirm")}
+							onConfirm={handleDeleteAllMonitors}
+							isLoading={isLoading || authIsLoading || checksIsLoading}
+						/>
+					</ConfigBox>
+				)}
 
 				<ConfigBox>
 					<Box>
-						<Typography component="h1">About</Typography>
+						<Typography component="h1">{t("settingsAbout")}</Typography>
 					</Box>
 					<Box>
 						<Typography component="h2">Checkmate {version}</Typography>
 						<Typography sx={{ mt: theme.spacing(2), mb: theme.spacing(6), opacity: 0.6 }}>
-							Developed by Bluewave Labs.
+							{t("settingsDevelopedBy")}
 						</Typography>
 						<Link
 							level="secondary"
@@ -411,7 +429,7 @@ const Settings = () => {
 						sx={{ px: theme.spacing(12), mt: theme.spacing(20) }}
 						onClick={handleSave}
 					>
-						Save
+						{t("settingsSave")}
 					</Button>
 				</Stack>
 			</Stack>

src/Pages/StatusPage/Create/Components/Tabs/ConfigStack.jsx

@@ -0,0 +1,26 @@
+import { Stack, Typography } from "@mui/material";
+import ConfigBox from "../../../../../Components/ConfigBox";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+
+// This can be used to add any extra/additional section/stacks on top of existing sections on the tab
+const ConfigStack = ({ title, description, children }) => {
+	const theme = useTheme();
+	return (
+		<ConfigBox>
+			<Stack gap={theme.spacing(6)}>
+				<Typography component="h2">{title}</Typography>
+				<Typography component="p">{description}</Typography>
+			</Stack>
+			{children}
+		</ConfigBox>
+	);
+};
+
+ConfigStack.propTypes = {
+	title: PropTypes.string.isRequired, // Title must be a string and is required
+	description: PropTypes.string.isRequired, // Description must be a string and is required
+	children: PropTypes.node.isRequired,
+};
+
+export default ConfigStack;

src/Pages/StatusPage/Create/Components/Tabs/Content.jsx

@@ -1,13 +1,13 @@
 // Components
-import { Stack, Typography, Button } from "@mui/material";
+import { Stack, Typography } from "@mui/material";
 import { TabPanel } from "@mui/lab";
-import ConfigBox from "../../../../../Components/ConfigBox";
 import MonitorList from "../MonitorList";
 import Search from "../../../../../Components/Inputs/Search";
 import Checkbox from "../../../../../Components/Inputs/Checkbox";
 // Utils
 import { useState } from "react";
 import { useTheme } from "@emotion/react";
+import ConfigStack from "./ConfigStack";
 const Content = ({
 	tabValue,
 	form,
@@ -34,14 +34,10 @@ const Content = ({
 	return (
 		<TabPanel value={tabValue}>
 			<Stack gap={theme.spacing(10)}>
-				<ConfigBox>
-					<Stack gap={theme.spacing(6)}>
-						<Typography component="h2">Status page servers</Typography>
-						<Typography component="p">
-							You can add any number of servers that you monitor to your status page. You
-							can also reorder them for the best viewing experience.
-						</Typography>
-					</Stack>
+				<ConfigStack
+					title="Status page servers"
+					description="You can add any number of servers that you monitor to your status page. You can also reorder them for the best viewing experience."
+				>
 					<Stack>
 						<Stack
 							direction="row"
@@ -72,13 +68,12 @@ const Content = ({
 							setSelectedMonitors={handleMonitorsChange}
 						/>
 					</Stack>
-				</ConfigBox>{" "}
-				<ConfigBox>
-					<Stack gap={theme.spacing(6)}>
-						<Typography component="h2">Features</Typography>
-						<Typography component="p">Show more details on the status page</Typography>
-					</Stack>
-					<Stack sx={{ margin: theme.spacing(6) }}>
+				</ConfigStack>
+				<ConfigStack
+					title="Features"
+					description="Show more details on the status page"
+				>
+					<Stack>
 						<Checkbox
 							id="showCharts"
 							name="showCharts"
@@ -94,9 +89,8 @@ const Content = ({
 							onChange={handleFormChange}
 						/>
 					</Stack>
-				</ConfigBox>
+				</ConfigStack>
 			</Stack>
-			<Stack gap={theme.spacing(6)}></Stack>
 		</TabPanel>
 	);
 };

src/Pages/StatusPage/Create/Components/Tabs/Settings.jsx

@@ -73,6 +73,8 @@ const TabSettings = ({
 							label="Your status page address"
 							value={form.url}
 							onChange={handleFormChange}
+							helperText={errors["url"]}
+							error={errors["url"] ? true : false}
 						/>
 					</Stack>
 				</ConfigBox>

src/Utils/Theme/constants.js

@@ -40,7 +40,6 @@ const paletteColors = {
 	blueGray150: "#667085",
 	blueGray200: "#475467",
 	blueGray400: "#344054",
-	blueGray900: "#1c2130",
 	blueBlueWave: "#1570EF",
 	blue700: "#4E5BA6",
 	purple300: "#664EFF",
@@ -89,11 +88,14 @@ const newColors = {
 	gray100: "#F3F3F3",
 	gray200: "#EFEFEF",
 	gray500: "#A2A3A3",
+	gray900: "#1c1c1c",
 	blueGray50: "#E8F0FE",
 	blueGray500: "#475467",
 	blueGray600: "#344054",
 	blueGray800: "#1C2130",
+	blueGray900: "#515151",
 	blueBlueWave: "#1570EF",
+	lightBlueWave: "#CDE2FF",
 	/* I changed green 100 and green 700. Need to change red and warning as well, and refactor the object following the structure */
 	green100: "#67cd78",
 	green200: "#4B9B77",
@@ -171,6 +173,10 @@ const newSemanticColors = {
 			light: newColors.gray200,
 			dark: "#313131" /* newColors.blueGray600 */,
 		},
+		light: {
+			light: newColors.lightBlueWave,
+			dark: newColors.lightBlueWave,
+		},
 		contrastText: {
 			light: newColors.blueGray600,
 			dark: newColors.gray200,
@@ -290,6 +296,16 @@ const newSemanticColors = {
 			dark: "#C084FC",
 		},
 	},
+	alert: {
+		main: {
+			light: newColors.gray200,
+			dark: newColors.gray900,
+		},
+		contrastText: {
+			light: newColors.blueGray600,
+			dark: newColors.blueGray900,
+		},
+	},
 };
 
 export { typographyLevels, semanticColors as colors, newSemanticColors };

src/Validation/validation.js

@@ -222,7 +222,14 @@ const statusPageValidation = joi.object({
 		.string()
 		.trim()
 		.messages({ "string.empty": "Company name is required." }),
-	url: joi.string().trim().messages({ "string.empty": "URL is required." }),
+	url: joi
+		.string()
+		.pattern(/^[a-zA-Z0-9_-]+$/) // Only allow alphanumeric, underscore, and hyphen
+		.required()
+		.messages({
+			"string.pattern.base":
+				"URL can only contain letters, numbers, underscores, and hyphens",
+		}),
 	timezone: joi.string().trim().messages({ "string.empty": "Timezone is required." }),
 	color: joi.string().trim().messages({ "string.empty": "Color is required." }),
 	theme: joi.string(),

src/locales/gb.json

@@ -65,5 +65,47 @@
 	"distributedStatusSubHeaderText": "Powered by millions devices worldwide, view a system performance by global region, country or city",
 	"distributedRightCategoryTitle": "Monitor",
 	"distributedStatusServerMonitors": "Server Monitors",
-	"distributedStatusServerMonitorsDescription": "Monitor status of related servers"
+	"distributedStatusServerMonitorsDescription": "Monitor status of related servers",
+	
+	"settingsGeneralSettings": "General settings",
+	"settingsDisplayTimezone": "Display timezone",
+	"settingsDisplayTimezoneDescription": "The timezone of the dashboard you publicly display.",
+	"settingsAppearance": "Appearance",
+	"settingsAppearanceDescription": "Switch between light and dark mode, or change user interface language",
+	"settingsThemeMode": "Theme Mode",
+	"settingsLanguage": "Language",
+	"settingsDistributedUptime": "Distributed uptime",
+	"settingsDistributedUptimeDescription": "Enable/disable distributed uptime monitoring.",
+	"settingsEnabled": "Enabled",
+	"settingsDisabled": "Disabled",
+	"settingsHistoryAndMonitoring": "History and monitoring",
+	"settingsHistoryAndMonitoringDescription": "Define here for how long you want to keep the data. You can also remove all past data.",
+	"settingsTTLLabel": "The days you want to keep monitoring history.",
+	"settingsTTLOptionalLabel": "0 for infinite",
+	"settingsClearAllStats": "Clear all stats. This is irreversible.",
+	"settingsClearAllStatsButton": "Clear all stats",
+	"settingsClearAllStatsDialogTitle": "Do you want to clear all stats?",
+	"settingsClearAllStatsDialogDescription": "Once deleted, your monitors cannot be retrieved.",
+	"settingsClearAllStatsDialogConfirm": "Yes, clear all stats",
+	"settingsDemoMonitors": "Demo monitors",
+	"settingsDemoMonitorsDescription": "Here you can add and remove demo monitors.",
+	"settingsAddDemoMonitors": "Add demo monitors",
+	"settingsAddDemoMonitorsButton": "Add demo monitors",
+	"settingsRemoveAllMonitors": "Remove all monitors",
+	"settingsRemoveAllMonitorsButton": "Remove all monitors",
+	"settingsRemoveAllMonitorsDialogTitle": "Do you want to remove all monitors?",
+	"settingsRemoveAllMonitorsDialogConfirm": "Yes, clear all monitors",
+	"settingsWallet": "Wallet",
+	"settingsWalletDescription": "Connect your wallet here. This is required for the Distributed Uptime monitor to connect to multiple nodes globally.",
+	"settingsAbout": "About",
+	"settingsDevelopedBy": "Developed by Bluewave Labs.",
+	"settingsSave": "Save",
+	"settingsSuccessSaved": "Settings saved successfully",
+	"settingsFailedToSave": "Failed to save settings",
+	"settingsStatsCleared": "Stats cleared successfully",
+	"settingsFailedToClearStats": "Failed to clear stats",
+	"settingsDemoMonitorsAdded": "Successfully added demo monitors",
+	"settingsFailedToAddDemoMonitors": "Failed to add demo monitors",
+	"settingsMonitorsDeleted": "Successfully deleted all monitors",
+	"settingsFailedToDeleteMonitors": "Failed to delete all monitors"
 }

src/locales/tr.json

@@ -58,5 +58,48 @@
 	"authRegisterBySigningUp": "Kayıt olarak, aşağıdaki şartları kabul ediyorsunuz:",
 	"distributedStatusHeaderText": "Gerçek zamanlı, Gerçek cihazlar kapsamı",
 	"distributedStatusSubHeaderText": "Dünya çapında milyonlarca cihaz tarafından desteklenen sistem performansını küresel bölgeye, ülkeye veya şehre göre görüntüleyin",
-	"distributedRightCategoryTitle": "Monitör"
+	"distributedRightCatagoryTitle": "Monitör",
+	"distributedRightCatagoryDescription": "Mainnet Beta Kümesi",
+	
+	"settingsGeneralSettings": "Genel ayarlar",
+	"settingsDisplayTimezone": "Görüntüleme saat dilimi",
+	"settingsDisplayTimezoneDescription": "Herkese açık olarak görüntülediğiniz kontrol panelinin saat dilimi.",
+	"settingsAppearance": "Görünüm",
+	"settingsAppearanceDescription": "Açık ve koyu mod arasında geçiş yapın veya kullanıcı arayüzü dilini değiştirin",
+	"settingsThemeMode": "Tema",
+	"settingsLanguage": "Dil",
+	"settingsDistributedUptime": "Dağıtılmış çalışma süresi",
+	"settingsDistributedUptimeDescription": "Dağıtılmış çalışma süresi izlemeyi etkinleştirin/devre dışı bırakın.",
+	"settingsEnabled": "Etkin",
+	"settingsDisabled": "Devre dışı",
+	"settingsHistoryAndMonitoring": "Geçmiş ve izleme",
+	"settingsHistoryAndMonitoringDescription": "Verileri ne kadar süreyle saklamak istediğinizi burada tanımlayın. Ayrıca tüm geçmiş verileri kaldırabilirsiniz.",
+	"settingsTTLLabel": "İzleme geçmişini saklamak istediğiniz gün sayısı.",
+	"settingsTTLOptionalLabel": "Sınırsız için 0",
+	"settingsClearAllStats": "Tüm istatistikleri temizle. Bu geri alınamaz.",
+	"settingsClearAllStatsButton": "Tüm istatistikleri temizle",
+	"settingsClearAllStatsDialogTitle": "Tüm istatistikleri temizlemek istiyor musunuz?",
+	"settingsClearAllStatsDialogDescription": "Silindikten sonra, monitörleriniz geri alınamaz.",
+	"settingsClearAllStatsDialogConfirm": "Evet, tüm istatistikleri temizle",
+	"settingsDemoMonitors": "Demo monitörler",
+	"settingsDemoMonitorsDescription": "Burada demo monitörler ekleyebilir ve kaldırabilirsiniz.",
+	"settingsAddDemoMonitors": "Demo monitörler ekle",
+	"settingsAddDemoMonitorsButton": "Demo monitörler ekle",
+	"settingsRemoveAllMonitors": "Tüm monitörleri kaldır",
+	"settingsRemoveAllMonitorsButton": "Tüm monitörleri kaldır",
+	"settingsRemoveAllMonitorsDialogTitle": "Tüm monitörleri kaldırmak istiyor musunuz?",
+	"settingsRemoveAllMonitorsDialogConfirm": "Evet, tüm monitörleri temizle",
+	"settingsWallet": "Cüzdan",
+	"settingsWalletDescription": "Cüzdanınızı buradan bağlayın. Bu, Dağıtılmış Çalışma Süresi monitörünün küresel olarak birden çok düğüme bağlanması için gereklidir.",
+	"settingsAbout": "Hakkında",
+	"settingsDevelopedBy": "Bluewave Labs tarafından geliştirilmiştir.",
+	"settingsSave": "Kaydet",
+	"settingsSuccessSaved": "Ayarlar başarıyla kaydedildi",
+	"settingsFailedToSave": "Ayarlar kaydedilemedi",
+	"settingsStatsCleared": "İstatistikler başarıyla temizlendi",
+	"settingsFailedToClearStats": "İstatistikler temizlenemedi",
+	"settingsDemoMonitorsAdded": "Demo monitörler başarıyla eklendi",
+	"settingsFailedToAddDemoMonitors": "Demo monitörler eklenemedi",
+	"settingsMonitorsDeleted": "Tüm monitörler başarıyla silindi",
+	"settingsFailedToDeleteMonitors": "Monitörler silinemedi"
 }