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

@@ -23,9 +23,12 @@
 		"@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",
 		"react": "^18.2.0",
+		"react-dnd": "^16.0.1",
+		"react-dnd-html5-backend": "^16.0.1",
 		"react-dom": "^18.2.0",
 		"react-redux": "9.2.0",
 		"react-router": "^6.23.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/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
 					}}
 				/>
 			}
@@ -114,6 +118,7 @@ Checkbox.propTypes = {
 	value: PropTypes.string,
 	onChange: PropTypes.func,
 	isDisabled: PropTypes.bool,
+	alignSelf: PropTypes.bool,
 };
 
 export default Checkbox;

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

@@ -11,11 +11,15 @@ 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.
  * @returns {JSX.Element} The rendered component.
  */
 
-const ImageField = ({ id, src, loading, onChange }) => {
+const ImageField = ({ id, src, loading, onChange, error, isRound = true }) => {
 	const theme = useTheme();
+	const error_border_style = error ? { borderColor: theme.palette.error.main } : {};
+
+	const roundShape = isRound ? { borderRadius: "50%" } : {};
 
 	const [isDragging, setIsDragging] = useState(false);
 	const handleDragEnter = () => {
@@ -28,7 +32,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
 	return (
 		<>
 			{!checkImage(src) || loading ? (
-				<>
+				<>	
 					<Box
 						className="image-field-wrapper"
 						mt={theme.spacing(8)}
@@ -46,6 +50,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
 								borderColor: theme.palette.primary.main,
 								backgroundColor: "hsl(215, 87%, 51%, 0.05)",
 							},
+							...error_border_style
 						}}
 						onDragEnter={handleDragEnter}
 						onDragLeave={handleDragLeave}
@@ -62,6 +67,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
 									cursor: "pointer",
 									maxWidth: "500px",
 									minHeight: "175px",
+									zIndex: 1,
 								},
 								"& fieldset": {
 									padding: 0,
@@ -78,7 +84,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
 								top: "50%",
 								left: "50%",
 								transform: "translate(-50%, -50%)",
-								zIndex: "-1",
+								zIndex: 0,
 								width: "100%",
 							}}
 						>
@@ -113,7 +119,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
 							>
 								(maximum size: 3MB)
 							</Typography>
-						</Stack>
+						</Stack>								
 					</Box>
 					<Typography
 						component="p"
@@ -122,6 +128,19 @@ const ImageField = ({ id, src, loading, onChange }) => {
 					>
 						Supported formats: JPG, PNG
 					</Typography>
+					{error && (
+						<Typography
+							component="span"
+							className="input-error"
+							color={theme.palette.error.main}
+							mt={theme.spacing(2)}
+							sx={{
+								opacity: 0.8,
+							}}
+						>
+							{error}
+						</Typography>
+					)}									
 				</>
 			) : (
 				<Stack
@@ -132,10 +151,10 @@ const ImageField = ({ id, src, loading, onChange }) => {
 						sx={{
 							width: "250px",
 							height: "250px",
-							borderRadius: "50%",
 							overflow: "hidden",
 							backgroundImage: `url(${src})`,
 							backgroundSize: "cover",
+							...roundShape,
 						}}
 					></Box>
 				</Stack>
@@ -148,6 +167,7 @@ ImageField.propTypes = {
 	id: PropTypes.string.isRequired,
 	src: PropTypes.string,
 	onChange: PropTypes.func.isRequired,
+	isRound: PropTypes.bool,
 };
 
 export default ImageField;

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

@@ -54,6 +54,8 @@ const Search = ({
 	isAdorned = true,
 	error,
 	disabled,
+	startAdornment,
+	endAdornment
 }) => {
 	const theme = useTheme();
 
@@ -66,15 +68,15 @@ const Search = ({
 			onInputChange={(_, newValue) => {
 				handleInputChange(newValue);
 			}}
-			onChange={(_, newValue) => {
-				handleChange && handleChange(newValue);
+			onChange={(e, newValue) => {
+				handleChange && handleChange(e, newValue);
 			}}
 			fullWidth
 			freeSolo
 			disabled={disabled}
 			disableClearable
 			options={options}
-			getOptionLabel={(option) => option[filteredBy]}
+			getOptionLabel={(option) => option[filteredBy]??""}
 			renderInput={(params) => (
 				<Stack>
 					<Typography
@@ -89,9 +91,13 @@ const Search = ({
 						{...params}
 						error={Boolean(error)}
 						placeholder="Type to search"
-						InputProps={{
-							...params.InputProps,
-							...(isAdorned && { startAdornment: <SearchAdornment /> }),
+						slotProps={{
+							input: {
+								...params.InputProps,
+								...(isAdorned && { startAdornment: <SearchAdornment /> }),
+								...(startAdornment && { startAdornment: startAdornment }),
+								...(endAdornment && { endAdornment: endAdornment }),
+							},
 						}}
 						sx={{
 							"& fieldset": {
@@ -188,14 +194,16 @@ Search.propTypes = {
 	options: PropTypes.array.isRequired,
 	filteredBy: PropTypes.string.isRequired,
 	secondaryLabel: PropTypes.string,
-	value: PropTypes.array,
+	value: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
 	inputValue: PropTypes.string.isRequired,
 	handleInputChange: PropTypes.func.isRequired,
 	handleChange: PropTypes.func,
 	isAdorned: PropTypes.bool,
 	sx: PropTypes.object,
 	error: PropTypes.string,
 	disabled: PropTypes.bool,
+	startAdornment: PropTypes.object,
+	endAdornment: PropTypes.object
 };
 
 export default Search;