Feat/fe/statuspage 1

Client/src/App.jsx

@@ -41,6 +41,7 @@ import { logger } from "./Utils/Logger"; // Import the logger
 import { networkService } from "./main";
 import { Infrastructure } from "./Pages/Infrastructure";
 import InfrastructureDetails from "./Pages/Infrastructure/Details";
+import CreateStatus from "./Pages/Status/CreateStatus";
 function App() {
 	const AdminCheckedRegister = withAdminCheck(Register);
 	const MonitorsWithAdminProp = withAdminProp(Monitors);
@@ -148,6 +149,10 @@ function App() {
 						path="status"
 						element={<ProtectedRoute Component={Status} />}
 					/>
+					<Route
+						path="status/create"
+						element={<ProtectedRoute Component={CreateStatus} />}
+					/>					
 					<Route
 						path="integrations"
 						element={<ProtectedRoute Component={Integrations} />}

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

@@ -15,6 +15,7 @@ import "./index.css";
  * @param {string} [props.value] - The value of the checkbox input.
  * @param {function} [props.onChange] - The function to call when the checkbox value changes.
  * @param {boolean} [props.isDisabled] - Whether the checkbox is disabled or not.
+ * @param {boolean} [props.alignSelf] - Whether the checkbox label should be positioned on flex-start.
  *
  * @returns {JSX.Element}
  *
@@ -25,6 +26,7 @@ import "./index.css";
  *  isChecked={checks.type === "ping"}
  *  value="ping"
  *  onChange={handleChange}
+ *  alignSelf = {alignSelf}
  * />
  */
 
@@ -36,10 +38,12 @@ const Checkbox = ({
 	value,
 	onChange,
 	isDisabled,
+	alignSelf
 }) => {
 	/* TODO move sizes to theme */
 	const sizes = { small: "14px", medium: "16px", large: "18px" };
 	const theme = useTheme();
+	const override = alignSelf?  { alignSelf: "flex-start" } : {}
 	return (
 		<FormControlLabel
 			className="checkbox-wrapper"
@@ -57,7 +61,7 @@ const Checkbox = ({
 					sx={{						
 						"&:hover": { backgroundColor: "transparent" },
 						"& svg": { width: sizes[size], height: sizes[size] },
-						alignSelf: "flex-start",
+                        ...override
 					}}
 				/>
 			}
@@ -95,6 +99,7 @@ Checkbox.propTypes = {
 	value: PropTypes.string,
 	onChange: PropTypes.func,
 	isDisabled: PropTypes.bool,
+	alignSelf: PropTypes.bool,
 };
 
 export default Checkbox;

Client/src/Components/Sidebar/index.jsx

@@ -43,6 +43,7 @@ import DotsVertical from "../../assets/icons/dots-vertical.svg?react";
 import ChangeLog from "../../assets/icons/changeLog.svg?react";
 import Docs from "../../assets/icons/docs.svg?react";
 import Folder from "../../assets/icons/folder.svg?react";
+import StatusPages from "../../assets/icons/status-pages.svg?react";
 
 import "./index.css";
 
@@ -51,7 +52,7 @@ const menu = [
 	{ name: "Pagespeed", path: "pagespeed", icon: <PageSpeed /> },
 	{ name: "Infrastructure", path: "infrastructure", icon: <Integrations /> },
 	{ name: "Incidents", path: "incidents", icon: <Incidents /> },
-	// { name: "Status pages", path: "status", icon: <StatusPages /> },
+	{ name: "Status pages", path: "status", icon: <StatusPages /> },
 	{ name: "Maintenance", path: "maintenance", icon: <Maintenance /> },
 	// { name: "Integrations", path: "integrations", icon: <Integrations /> },
 	{

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

@@ -0,0 +1,66 @@
+import { useState, useRef } from "react";
+import { Box, Stack, Typography } from "@mui/material";
+import { ConfigBox } from "../../../Pages/Monitors/styled";
+import Checkbox from "../../Inputs/Checkbox";
+import { useTheme } from "@emotion/react";
+import { useDispatch, useSelector } from "react-redux";
+import TabPanel from "@mui/lab/TabPanel";
+
+const GeneralSettingsPanel = () => {
+	const theme = useTheme();
+	const dispatch = useDispatch();
+
+	//redux state
+	const { user, authToken, isLoading } = useSelector((state) => state.auth);
+
+	// Local state for form data, errors, and file handling
+	const [localData, setLocalData] = useState({
+	});
+	const [errors, setErrors] = useState({});
+	const [file, setFile] = useState();
+
+	const handleSubmit = () => {};
+
+	const handleChange = () => {};
+
+	const handleBlur = () => {};
+	return (
+		<TabPanel
+			value="general settings"
+			sx={{
+				"& h1, & p, & input": {
+					color: theme.palette.text.tertiary,
+				},
+			}}
+		>
+		<Stack
+			component="form"
+			className="status-general-settings-form"
+			onSubmit={handleSubmit}
+			noValidate
+			spellCheck="false"
+			gap={theme.spacing(12)}
+			mt={theme.spacing(6)}
+		>
+			<ConfigBox>
+				<Box>
+					<Stack gap={theme.spacing(6)}>
+						<Typography component="h2">Access</Typography>
+						<Typography component="p">
+							If your status page is ready, you can mark it as published.
+						</Typography>
+					</Stack>
+				</Box>
+				<Checkbox
+					id="published-to-public"
+					label={`Published and visible to the public`}
+					onChange={(e) => handleChange(e)}
+					onBlur={handleBlur}
+				/>
+			</ConfigBox>
+		</Stack>
+		</TabPanel>		
+	);
+};
+
+export default GeneralSettingsPanel;

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

@@ -0,0 +1,82 @@
+import PropTypes from "prop-types";
+import { useNavigate } from "react-router";
+import { useSelector } from "react-redux";
+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";
+
+/**
+ * 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'.
+ * @returns {JSX.Element}
+ */
+
+const CreateStatus = ({ open = "general settings" }) => {
+	const theme = useTheme();
+	const navigate = useNavigate();
+	const tab = open;
+	const handleTabChange = (event, newTab) => {
+		navigate(`/status/${newTab}`);
+	};
+	const { user } = useSelector((state) => state.auth);
+
+	const requiredRoles = ["superadmin", "admin"];
+	let tabList = ["General Settings", "Contents"];
+
+	return (
+		<Box
+			className="status"
+			px={theme.spacing(20)}
+			py={theme.spacing(12)}
+			border={1}
+			borderColor={theme.palette.border.light}
+			borderRadius={theme.shape.borderRadius}
+			backgroundColor={theme.palette.background.main}
+		>
+			<TabContext value={tab}>
+				<Box
+					sx={{
+						borderBottom: 1,
+						borderColor: theme.palette.border.light,
+						"& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
+					}}
+				>
+					<TabList
+						onChange={handleTabChange}
+						aria-label="status tabs"
+					>
+						{tabList.map((label, index) => (
+							<Tab
+								label={label}
+								key={index}
+								value={label.toLowerCase()}
+								sx={{
+									fontSize: 13,
+									color: theme.palette.text.tertiary,
+									textTransform: "none",
+									minWidth: "fit-content",
+									minHeight: 0,
+									paddingLeft: 0,
+									paddingY: theme.spacing(4),
+									fontWeight: 400,
+									marginRight: theme.spacing(8),
+									"&:focus": {
+										outline: "none",
+									},
+								}}
+							/>
+						))}
+					</TabList>
+				</Box>
+				<GeneralSettingsPanel />
+			</TabContext>
+		</Box>
+	);
+};
+
+CreateStatus.propTypes = {
+	open: PropTypes.oneOf(["general settings", "contents"]),
+};
+
+export default CreateStatus;

Client/src/Pages/Status/index.jsx

@@ -1,10 +1,11 @@
-import { Box } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import Fallback from "../../Components/Fallback";
+import { Box, Button, Stack } from "@mui/material";
+import { useNavigate } from "react-router-dom";
 
 const Status = () => {
 	const theme = useTheme();
-
+	const navigate = useNavigate();
 	return (
 		<Box
 			className="status"
@@ -28,6 +29,21 @@ const Status = () => {
 					"Build trust with your customers",
 				]}
 			/>
+			<Stack
+				alignItems="center"
+				mt={theme.spacing(10)}
+			>
+				<Button
+					variant="contained"
+					color="primary"
+					onClick={() => {
+						navigate("/status/create");
+					}}
+					sx={{ fontWeight: 500 }}
+				>
+					Let's create your status page
+				</Button>
+			</Stack>
 		</Box>
 	);
 };