- Update getStatusPageByUrl to match BE

- Change layout to use the one that has vertical line
- Update name to CreateStatusContext instead of TabContext to make it clearer
- Handle errors to land on the respective page tab

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

@@ -1,6 +1,6 @@
 import { useState, useCallback, useContext } from "react";
 import { Button, Box, Stack, Typography } from "@mui/material";
-import { ConfigBox } from "../../../Pages/Settings/styled";
+import { ConfigBox } from "../../../Pages/Uptime/styled";
 import { useTheme } from "@emotion/react";
 import TabPanel from "@mui/lab/TabPanel";
 import { publicPageGeneralSettingsValidation } from "../../../Validation/validation";
@@ -8,7 +8,7 @@ import { buildErrors } from "../../../Validation/error";
 import Card from "./Card";
 import update from "immutability-helper";
 import Checkbox from "../../Inputs/Checkbox";
-import { StatusFormContext } from "../../../Pages/Status/TabContext";
+import { StatusFormContext } from "../../../Pages/Status/CreateStatusContext";
 
 const ContentPanel = () => {
 	const theme = useTheme();
@@ -100,11 +100,12 @@ const ContentPanel = () => {
 					<Box
 						className="status-contents-server-list"
 						sx={{
-							height: "fit-content",
+							margin: theme.spacing(20),
+							//padding: theme.spacing(20),
 							border: "solid",
 							borderRadius: theme.shape.borderRadius,
 							borderColor: theme.palette.border.light,
-							borderWidth: "2px",
+							borderWidth: "1px",
 							transition: "0.2s",
 							"&:hover": {
 								borderColor: theme.palette.primary.main,
@@ -161,7 +162,7 @@ const ContentPanel = () => {
 							<Typography component="p">Show more details on the status page</Typography>
 						</Stack>
 					</Box>
-					<Stack						
+					<Stack	sx={{margin: theme.spacing(20)}}
 					>
 						<Checkbox
 							id="show-barcode"

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

@@ -1,6 +1,6 @@
 import { useState, useRef, useContext } from "react";
 import { Box, Stack, Typography } from "@mui/material";
-import { ConfigBox } from "../../../Pages/Settings/styled";
+import { ConfigBox } from "../../../Pages/Uptime/styled";
 import Checkbox from "../../Inputs/Checkbox";
 import { useTheme } from "@emotion/react";
 import TabPanel from "@mui/lab/TabPanel";
@@ -17,7 +17,7 @@ import { formatBytes } from "../../../Utils/fileUtils";
 import ProgressUpload from "../../ProgressBars";
 import ImageIcon from "@mui/icons-material/Image";
 import { HttpAdornment } from "../../Inputs/TextInput/Adornments";
-import { StatusFormContext } from "../../../Pages/Status/TabContext";
+import { StatusFormContext } from "../../../Pages/Status/CreateStatusContext";
 
 const GeneralSettingsPanel = () => {
 	const theme = useTheme();	

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

@@ -8,7 +8,7 @@ import { capitalizeFirstLetter } from "../../../Utils/stringUtils";
 import ContentPanel from "../../../Components/TabPanels/Status/ContentPanel";
 import { publicPageGeneralSettingsValidation } from "../../../Validation/validation";
 import { hasValidationErrors } from "../../../Validation/error";
-import { StatusFormProvider } from "../TabContext";
+import { StatusFormProvider } from "../CreateStatusContext";
 /**
  * CreateStatus page renders a page with tabs for general settings and contents.
  * @param {string} [props.open] - Specifies the initially open tab: 'general settings' or 'content'.
@@ -19,6 +19,8 @@ const CreateStatus = ({ open = "general-settings", initForm }) => {
 	const theme = useTheme();
 	let tabList = ["General Settings", "Contents"];
 	const [errors, setErrors] = useState({});
+	const error_tab_maping = [["companyName","url","timezone","color","publish","logo"],["monitors",
+	"showUptimePercentage", "showBarcode"]]
 	const [form, setForm] = useState({
 		companyName: "",
 		url: "",
@@ -39,6 +41,7 @@ const CreateStatus = ({ open = "general-settings", initForm }) => {
 	const [tabIdx, setTabIdx] = useState(tabList.indexOf(tab));
 
 	const handleTabChange = (event, newTab) => {
+
 		setTabIdx(tabList.indexOf(newTab));
 	};
 
@@ -57,9 +60,24 @@ const CreateStatus = ({ open = "general-settings", initForm }) => {
 		form.logo = { ...logo, size: formatBytes(logo?.size) };
 	};
 
-	useEffect(() => {
+	useEffect(() => {		
+		let newIdx = -1;
+		Object.keys(errors).map(id=>{
+			console.log("errors id")
+			console.log(id)
+			error_tab_maping.map((val, idx)  => {
+				let anyMatch = val.some(vl=> vl==id )
+				if(anyMatch){
+					newIdx = idx;					
+				}
+			})
+		})
+		console.log("newIdx")
+		console.log(newIdx)
+		if(newIdx!==-1)
+			setTabIdx(newIdx)		
 		setTabIdx(tabList.indexOf(tab));
-	}, [tab]);
+	}, [tab,errors]);
 
 	return (
 		<Box

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

@@ -1,4 +1,4 @@
-import { createContext, useState, React } from "react";
+import { createContext, React } from "react";
 
 const StatusFormContext = createContext({
 	form: {},

Client/src/Utils/NetworkService.js

@@ -847,13 +847,11 @@ class NetworkService {
 		);
 	}
 
-	async getStatusPageByUrl(config){
-		const params = new URLSearchParams();
-		params.append("url", encodeURIComponent(config.url));
-		
-		return this.axiosInstance.get(`/status-page?${params.toString()}`, {
+	async getStatusPageByUrl(config) {
+		const { url, authToken } = config;
+		return this.axiosInstance.get(`/status-page/${url}`, {
 			headers: {
-				Authorization: `Bearer ${config.authToken}`,
+				Authorization: `Bearer ${authToken}`,
 				"Content-Type": "application/json",
 			},
 		});