- Pass custom file size to ImageField

- Update getmonitors to match be change (-1 is not accepted as valid param anymore)
- Fix Select not updateable

Client/src/Components/Inputs/Image/index.jsx

@@ -11,11 +11,12 @@ import { checkImage } from "../../../Utils/fileUtils";
  * @param {string} props.id - The unique identifier for the input field.
  * @param {string} props.src - The URL of the image to display.
  * @param {function} props.onChange - The function to handle file input change.
- * @param {string} props.isRound - The shape of the image to display.
+ * @param {boolean} props.isRound - Whether the shape of the image to display is round.
+ * @param {string} props.maxSize - Custom message for the max uploaded file size
  * @returns {JSX.Element} The rendered component.
  */
 
-const ImageField = ({ id, src, loading, onChange, error, isRound = true }) => {
+const ImageField = ({ id, src, loading, onChange, error, isRound = true, maxSize }) => {
 	const theme = useTheme();
 	const error_border_style = error ? { borderColor: theme.palette.error.main } : {};
 
@@ -117,7 +118,7 @@ const ImageField = ({ id, src, loading, onChange, error, isRound = true }) => {
 								color={theme.palette.text.tertiary}
 								sx={{ opacity: 0.6 }}
 							>
-								(maximum size: 3MB)
+								(maximum size: {maxSize??"3MB"})
 							</Typography>
 						</Stack>								
 					</Box>
@@ -168,6 +169,7 @@ ImageField.propTypes = {
 	src: PropTypes.string,
 	onChange: PropTypes.func.isRequired,
 	isRound: PropTypes.bool,
+	maxSize: PropTypes.string
 };
 
 export default ImageField;

Client/src/Components/TabPanels/Status/ContentPanel.jsx

@@ -30,7 +30,7 @@ const ContentPanel = () => {
 				const response = await networkService.getMonitorsByTeamId({
 					authToken: authToken,
 					teamId: user.teamId,
-					limit: -1,
+					limit: 50,
 					types: ["http", "ping", "pagespeed", "hardware"],
 				});
 				if(response.data.data.monitors.length==0){

Client/src/Components/TabPanels/Status/GeneralSettingsPanel.jsx

@@ -54,10 +54,10 @@ const GeneralSettingsPanel = () => {
 
 	const handleChange = (event) => {
 		event.preventDefault();
-		const { value, id } = event.target;
+		const { value, id, name } = event.target;
 		setForm((prev) => ({
 			...prev,
-			[id]: value,
+			[id ?? name]: value,
 		}));
 	};
 
@@ -203,6 +203,7 @@ const GeneralSettingsPanel = () => {
 					<Stack gap={theme.spacing(6)}>
 						<Select
 							id="timezone"
+							name="timezone"
 							label="Display timezone"
 							value={form.timezone}
 							onChange={handleChange}
@@ -216,6 +217,7 @@ const GeneralSettingsPanel = () => {
 							loading={progress.isLoading && progress.value !== 100}
 							onChange={handleLogo}
 							isRound={false}
+							maxSize="640KB"
 						/>
 						{progress.isLoading || progress.value !== 0 || errors["logo"] ? (
 							<ProgressUpload

Client/src/Validation/validation.js

@@ -184,7 +184,7 @@ const logoImageValidation = joi.object({
 		.max(800*800)
 		.messages({
 			"number.base": "File size must be a number.",
-			"number.max": "File size must be less than 640000 pixels.",
+			"number.max": "File size must be less than 640KB.",
 			"number.empty": "File size required.",
 		}),
 });