- Link general settings and contens to status page in navigation

Client/src/Components/ProgressBars/index.jsx

@@ -169,7 +169,7 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) =>
 
 ProgressUpload.propTypes = {
 	icon: PropTypes.element, // JSX element for the icon (optional)
-	label: PropTypes.string.isRequired, // Label text for the progress item
+	label: PropTypes.string, // Label text for the progress item
 	size: PropTypes.string.isRequired, // Size information for the progress item
 	progress: PropTypes.number.isRequired, // Current progress value (0-100)
 	onClick: PropTypes.func.isRequired, // Function to handle click events on the remove button

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

@@ -7,13 +7,17 @@ import TabPanel from "@mui/lab/TabPanel";
 import TextInput from "../../Inputs/TextInput";
 import ImageField from "../../Inputs/Image";
 import timezones from "../../../Utils/timezones.json";
-import Select from "../../Inputs/Select"
-import { logoImageValidation, publicPageGeneralSettingsValidation } from "../../../Validation/validation"
+import Select from "../../Inputs/Select";
+import {
+	logoImageValidation,
+	publicPageGeneralSettingsValidation,
+} from "../../../Validation/validation";
 import { buildErrors } from "../../../Validation/error";
 import { formatBytes } from "../../../Utils/fileUtils";
 import ProgressUpload from "../../ProgressBars";
 import ImageIcon from "@mui/icons-material/Image";
 import { HttpAdornment } from "../../Inputs/TextInput/Adornments";
+import { hasValidationErrors } from "../../../Validation/error";
 
 const GeneralSettingsPanel = () => {
 	const theme = useTheme();
@@ -32,7 +36,6 @@ const GeneralSettingsPanel = () => {
 		publish: false,
 		logo: null,
 	});
-
 	// Clears specific error from errors state
 	const clearError = (err) => {
 		setErrors((prev) => {
@@ -40,22 +43,17 @@ const GeneralSettingsPanel = () => {
 			if (updatedErrors[err]) delete updatedErrors[err];
 			return updatedErrors;
 		});
-	};	
+	};
 	const removeLogo = () => {
 		errors["logo"] && clearError("logo");
 		setLogo({});
-		// interrupt interval if image upload is canceled prior to completing the process
-		clearInterval(intervalRef.current); 
-		setProgress({ value: 0, isLoading: false });
-	};
-
-	// Updates profile image displayed on UI
-	const handleUpdateLogo = () => {
-		setProgress({ value: 0, isLoading: false });
 		setLocalData((prev) => ({
 			...prev,
-			logo: logo.src,
-		}));		
+			logo: logo?.src,
+		}));
+		// interrupt interval if image upload is canceled prior to completing the process
+		clearInterval(intervalRef.current);
+		setProgress({ value: 0, isLoading: false });
 	};
 
 	const handleChange = (event) => {
@@ -67,7 +65,21 @@ const GeneralSettingsPanel = () => {
 		}));
 	};
 
-	const handleSubmit = () => {};
+	const handleSubmit = () => {
+		//validate rest of the form
+		delete localData.logo;
+		delete localData.publish;
+		if (hasValidationErrors(localData, publicPageGeneralSettingsValidation, setErrors)) {
+			return;
+		}
+		//validate image field
+		let error = validateField(
+			{ type: logo?.type ?? null, size: logo?.size ?? null },
+			logoImageValidation
+		);
+		if (error) return;
+		localData.logo = { ...logo, size: formatBytes(logo?.size) };
+	};
 
 	const handleBlur = (event) => {
 		event.preventDefault();
@@ -92,11 +104,11 @@ const GeneralSettingsPanel = () => {
 			else delete prevErrors[name];
 			return prevErrors;
 		});
-		if (error) return true;		
+		if (error) return true;
 	};
 
 	const handleLogo = (event) => {
-		const pic = event.target.files[0];
+		const pic = event.target?.files?.[0];
 		let error = validateField({ type: pic?.type, size: pic?.size }, logoImageValidation);
 		if (error) return;
 
@@ -104,9 +116,9 @@ const GeneralSettingsPanel = () => {
 		setLogo({
 			src: URL.createObjectURL(pic),
 			name: pic.name,
-			size: formatBytes(pic.size),
+			type: pic.type,
+			size: pic.size,
 		});
-
 		intervalRef.current = setInterval(() => {
 			const buffer = 12;
 			setProgress((prev) => {
@@ -121,7 +133,7 @@ const GeneralSettingsPanel = () => {
 
 	return (
 		<TabPanel
-			value="general settings"
+			value="General Settings"
 			sx={{
 				"& h1, & p, & input": {
 					color: theme.palette.text.tertiary,
@@ -131,7 +143,6 @@ const GeneralSettingsPanel = () => {
 			<Stack
 				component="form"
 				className="status-general-settings-form"
-				onSubmit={handleSubmit}
 				noValidate
 				spellCheck="false"
 				gap={theme.spacing(12)}
@@ -167,7 +178,7 @@ const GeneralSettingsPanel = () => {
 							</Typography>
 						</Stack>
 					</Box>
-					<Stack gap={theme.spacing(6)}>
+					<Stack gap={theme.spacing(18)}>
 						<TextInput
 							id="companyName"
 							type="text"
@@ -175,7 +186,8 @@ const GeneralSettingsPanel = () => {
 							value={localData.companyName}
 							onChange={handleChange}
 							onBlur={handleBlur}
-							error={errors["companyName"]}
+							helperText={errors["companyName"]}
+							error={errors["companyName"] ? true : false}
 						/>
 						<TextInput
 							id="url"
@@ -186,7 +198,8 @@ const GeneralSettingsPanel = () => {
 							//prefix={"http://uptimegenie.com/"}
 							onChange={handleChange}
 							onBlur={handleBlur}
-							error={errors["url"]}
+							helperText={errors["url"]}
+							error={errors["url"] ? true : false}
 						/>
 					</Stack>
 				</ConfigBox>
@@ -219,7 +232,7 @@ const GeneralSettingsPanel = () => {
 							<ProgressUpload
 								icon={<ImageIcon />}
 								label={logo?.name}
-								size={logo?.size}
+								size={formatBytes(logo?.size)}
 								progress={progress.value}
 								onClick={removeLogo}
 								error={errors["logo"]}
@@ -227,35 +240,6 @@ const GeneralSettingsPanel = () => {
 						) : (
 							""
 						)}
-						{logo?.src && (
-							<Stack
-								direction="row"
-								mt={theme.spacing(10)}
-								gap={theme.spacing(5)}
-								justifyContent="flex-end"
-							>
-								<Button
-									variant="text"
-									color="info"
-									onClick={removeLogo}
-								>
-									Remove
-								</Button>
-								<Button
-									variant="contained"
-									color="primary"
-									onClick={handleUpdateLogo}
-									disabled={
-										(Object.keys(errors).length !== 0 && errors?.logo) ||
-										progress.value !== 100
-											? true
-											: false
-									}
-								>
-									Update
-								</Button>
-							</Stack>
-						)}
 						<TextInput
 							id="color"
 							label="Color"
@@ -277,6 +261,18 @@ const GeneralSettingsPanel = () => {
 						/>
 					</Stack>
 				</ConfigBox>
+				<Stack
+					direction="row"
+					justifyContent="flex-end"
+				>
+					<Button
+						variant="contained"
+						color="primary"
+						onClick={handleSubmit}
+					>
+						Next
+					</Button>
+				</Stack>
 			</Stack>
 		</TabPanel>
 	);

Client/src/Pages/Status/CreateStatus/index.jsx

@@ -5,8 +5,10 @@ import { Box, Tab, useTheme } from "@mui/material";
 import TabContext from "@mui/lab/TabContext";
 import TabList from "@mui/lab/TabList";
 import GeneralSettingsPanel from "../../../Components/TabPanels/Status/GeneralSettingsPanel";
-import ImageField from "../../../Components/Inputs/Image";
-import Checkbox from "../../../Components/Inputs/Checkbox";
+import {
+	capitalizeFirstLetter,
+	toLowerCaseFirstLetter,
+} from "../../../Utils/stringUtils";
 
 /**
  * CreateStatus page renders a page with tabs for general settings and contents.
@@ -14,22 +16,19 @@ import Checkbox from "../../../Components/Inputs/Checkbox";
  * @returns {JSX.Element}
  */
 
-const CreateStatus = ({ open = "general settings" }) => {
+const CreateStatus = ({ open = "general-settings" }) => {
 	const theme = useTheme();
 	const navigate = useNavigate();
-	const tab = open;
+	const tab = open
+		.split("-")
+		.map((a) => capitalizeFirstLetter(a))
+		.join(" ");
 	const handleTabChange = (event, newTab) => {
-		navigate(`/status/${newTab}`);
+		let toNavString = newTab.split(" ").map((a) => toLowerCaseFirstLetter(a));
+		toNavString = toNavString.join("-");
+		navigate(`/status/${toNavString}`);
 	};
 	let tabList = ["General Settings", "Contents"];
-	const handlePicture = (event) => {}
-
-	const handleSubmit = () => {};
-
-	const handleChange = () => {};
-
-	const handleBlur = () => {};	
-
 	return (
 		<Box
 			className="status"
@@ -56,7 +55,7 @@ const CreateStatus = ({ open = "general settings" }) => {
 							<Tab
 								label={label}
 								key={index}
-								value={label.toLowerCase()}
+								value={label}
 								sx={{
 									fontSize: 13,
 									color: theme.palette.text.tertiary,
@@ -82,7 +81,7 @@ const CreateStatus = ({ open = "general settings" }) => {
 };
 
 CreateStatus.propTypes = {
-	open: PropTypes.oneOf(["general settings", "contents"]),
+	open: PropTypes.oneOf(["general-settings", "contents"]),
 };
 
 export default CreateStatus;