Create status page PR2

Client/.env.production

@@ -1 +1,2 @@
 VITE_APP_API_BASE_URL=UPTIME_APP_API_BASE_URL
+VITE_STATUS_PAGE_SUBDOMAIN_PREFIX=UPTIME_STATUS_PAGE_SUBDOMAIN_PREFIX

Client/package.json

@@ -14,6 +14,7 @@
 		"@emotion/react": "^11.13.3",
 		"@emotion/styled": "^11.13.0",
 		"@fontsource/roboto": "^5.0.13",
+		"@hello-pangea/dnd": "^17.0.0",
 		"@mui/icons-material": "6.4.0",
 		"@mui/lab": "6.0.0-beta.23",
 		"@mui/material": "6.4.0",
@@ -23,8 +24,10 @@
 		"@reduxjs/toolkit": "2.5.0",
 		"axios": "^1.7.4",
 		"dayjs": "1.11.13",
+		"immutability-helper": "^3.1.1",
 		"joi": "17.13.3",
 		"jwt-decode": "^4.0.0",
+		"mui-color-input": "^5.0.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-redux": "9.2.0",

Client/src/App.jsx

@@ -12,6 +12,7 @@ import { logger } from "./Utils/Logger"; // Import the logger
 import { networkService } from "./main";
 import { Routes } from "./Routes";
 
+import CreateStatus from "./Pages/Status/CreateStatus";
 function App() {
 	const mode = useSelector((state) => state.ui.mode);
 	const { authToken } = useSelector((state) => state.auth);

Client/src/Components/ConfigBox/index.jsx

@@ -29,10 +29,7 @@ const ConfigBox = styled(Stack)(({ theme }) => ({
 	},
 	"& h1, & h2": {
 		color: theme.palette.text.secondary,
-	},
-	"& p": {
-		color: theme.palette.text.tertiary,
-	},
+	}
 }));
 
 export default ConfigBox;

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

@@ -21,6 +21,7 @@ import "./index.css";
  * @param {string} [props.value] - Optional value associated with the checkbox
  * @param {Function} [props.onChange] - Callback function triggered when checkbox state changes
  * @param {boolean} [props.isDisabled] - Determines if the checkbox is disabled
+ * @param {boolean} [props.alignSelf] - Whether the checkbox label should be positioned on flex-start.
  *
  * @returns {React.ReactElement} Rendered Checkbox component
  *
@@ -42,6 +43,7 @@ import "./index.css";
  *   isChecked={isAdvanced}
  *   isDisabled={!canModify}
  *   onChange={handleAdvancedToggle}
+ *   alignSelf = {alignSelf}
  * />
  */
 const Checkbox = ({
@@ -53,10 +55,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"
@@ -75,7 +79,7 @@ const Checkbox = ({
 					sx={{
 						"&:hover": { backgroundColor: "transparent" },
 						"& svg": { width: sizes[size], height: sizes[size] },
-						alignSelf: "flex-start",
+                        ...override
 					}}
 				/>
 			}
@@ -111,9 +115,10 @@ Checkbox.propTypes = {
 	label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
 	size: PropTypes.oneOf(["small", "medium", "large"]),
 	isChecked: PropTypes.bool.isRequired,
-	value: PropTypes.string,
+	value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 	onChange: PropTypes.func,
 	isDisabled: PropTypes.bool,
+	alignSelf: PropTypes.bool,
 };
 
 export default Checkbox;

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

@@ -0,0 +1,60 @@
+import PropTypes from "prop-types";
+import { Stack, Typography } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import { MuiColorInput } from "mui-color-input";
+
+/**
+ *
+ * @param {*} id The ID of the component
+ * @param {*} value The color value of the component
+ * @param {*} error The error of the component
+ * @param {*} onChange The Change handler function
+ * @param {*} onBlur The Blur handler function
+ * @returns The ColorPicker component
+ * Example usage:
+ * 	<ColorPicker
+ *		id="color"
+ *		value={form.color}
+ *		error={errors["color"]}
+ *		onChange={handleColorChange}
+ *		onBlur={handleBlur}
+ *		>
+ *	</ColorPicker>
+ */
+const ColorPicker = ({ id, value, error, onChange, onBlur }) => {
+	const theme = useTheme();
+	return (
+		<Stack gap={theme.spacing(4)}>
+			<MuiColorInput
+				format="hex"
+				value={value}
+				id={id}
+				onChange={onChange}
+				onBlur={onBlur}
+			/>
+			{error && (
+				<Typography
+					component="span"
+					className="input-error"
+					color={theme.palette.error.main}
+					mt={theme.spacing(2)}
+					sx={{
+						opacity: 0.8,
+					}}
+				>
+					{error}
+				</Typography>
+			)}
+		</Stack>
+	);
+};
+
+ColorPicker.propTypes = {
+	id: PropTypes.string.isRequired,
+	value: PropTypes.string,
+	error: PropTypes.string,
+	onChange: PropTypes.func.isRequired,
+	onBlur: PropTypes.func.isRequired,
+};
+
+export default ColorPicker;