docs: align dev setup docs with current server config

## Changes
- Replace stale QUEUE_TYPE env var (superSimpleQueue/lessSimpleQueue) with QUEUE_MODE (primary/worker) to match server/src/config/envValidation.ts
- Mark ORIGIN, TOKEN_TTL and LOG_LEVEL as optional with their defaults; note that only CLIENT_HOST, JWT_SECRET and DB_CONNECTION_STRING are strictly required
- Note that CLIENT_HOST must be a full URL (enforced by env validation)
- Remove Redis port 6379 from the port-conflict troubleshooting list; the server has no Redis dependency
- Point CLAUDE.md at CONTRIBUTING.md as the setup source of truth

## Why
A contributor followed the setup docs and hit references to files and env vars that no longer exist after the repo reorg. This brings the contributor docs in line with the actual dev workflow.

CLAUDE.md

@@ -51,6 +51,7 @@ TOKEN_TTL="99d"
 ORIGIN="localhost"
 LOG_LEVEL="debug"
 ```
+Only `CLIENT_HOST` (must be a full URL), `JWT_SECRET`, and `DB_CONNECTION_STRING` are strictly required; the rest have defaults (see `server/src/config/envValidation.ts`). Setup source of truth: CONTRIBUTING.md.
 
 ### Client `.env`
 ```env

CONTRIBUTING.md

@@ -124,10 +124,12 @@ LOG_LEVEL="debug"
 - `CLIENT_HOST`: Frontend URL (default: http://localhost:5173)
 - `JWT_SECRET`: Secret key for JWT tokens (change to something secure)
 - `DB_CONNECTION_STRING`: MongoDB connection URL
-- `ORIGIN`: Origin for CORS purposes
-- `TOKEN_TTL`: Token time to live (in vercel/ms format)
-- `LOG_LEVEL`: Debug level (debug, info, warn, error)
-- `QUEUE_TYPE`: Job queue implementation (`superSimpleQueue` or `lessSimpleQueue`, optional, default: `superSimpleQueue`)
+- `ORIGIN`: Origin for CORS purposes (optional)
+- `TOKEN_TTL`: Token time to live in vercel/ms format (optional, default: `99d`)
+- `LOG_LEVEL`: Debug level: debug, info, warn, error (optional, default: `debug`)
+- `QUEUE_MODE`: Queue mode, `primary` or `worker` (optional, default: `primary`)
+
+Only `CLIENT_HOST`, `JWT_SECRET`, and `DB_CONNECTION_STRING` are strictly required. Note that `CLIENT_HOST` must be a full URL.
 
 Start the backend server:
 
@@ -203,7 +205,7 @@ docker rm uptime_database_mongo
 
 **Port already in use:**
 
-- Check if another service is using ports 5173, 52345, 27017, or 6379
+- Check if another service is using ports 5173, 52345, or 27017
 - Stop the conflicting service or change the port in `.env` files
 
 **MongoDB connection issues:**

README.md

@@ -80,9 +80,7 @@ Usage instructions can be found [here](https://checkmate.so/docs).
 <a id="installation"></a>
 ## Installation
 
-The quickest way to run Checkmate is the reference Docker Compose file. It starts two services: the all-in-one Checkmate application image (`ghcr.io/bluewave-labs/checkmate`) and a separate MongoDB service.
-
-> **What “all-in-one” means:** the Checkmate application is packaged in a single image; MongoDB is not embedded in that image and remains required. The reference Compose file starts MongoDB for you. For custom deployments, configure `DB_CONNECTION_STRING` to use an external MongoDB instance.
+The quickest way to run Checkmate is the reference Docker Compose file, which runs the all-in-one image (`ghcr.io/bluewave-labs/checkmate`) plus MongoDB:
 
 ```bash
 curl -O https://raw.githubusercontent.com/bluewave-labs/checkmate/master/docker/docker-compose.yaml
@@ -153,7 +151,7 @@ Feel free to ask questions or share your ideas - we'd love to hear from you!
   - Selective disk monitoring with mountpoint selection
 - Incidents at a glance
 - Status pages with 4 beautiful themes
-- E-mail, Webhooks, Discord, Slack, PagerDuty, Matrix, Rocket.Chat, Microsoft Teams, Telegram, Pushover, Twilio (SMS) notifications
+- E-mail, Webhooks, Discord, Slack, PagerDuty, Matrix, Microsoft Teams, Telegram, Pushover, Twilio (SMS) notifications
 - Scheduled maintenance
 - JSON query monitoring
 - Multi-language support for Arabic, Chinese (Simplified), Chinese (Traditional, Taiwan), Czech, English, Finnish, French, German, Japanese, Portuguese (Brazil), Russian, Spanish, Thai, Turkish, Ukrainian, and Vietnamese

client/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "client",
-	"version": "3.10.0",
+	"version": "3.9.2",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "client",
-			"version": "3.10.0",
+			"version": "3.9.2",
 			"dependencies": {
 				"@csstools/css-tokenizer": "^3.0.4",
 				"@emotion/react": "^11.13.3",

client/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "client",
 	"private": true,
-	"version": "3.10.0",
+	"version": "3.9.2",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",

client/src/Components/common/charts/HeatmapResponseTimeTooltip.tsx

@@ -1,7 +1,7 @@
 import Stack from "@mui/material/Stack";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
-import { formatDateWithTz, formatMs } from "@/Utils/TimeUtils";
+import { formatDateWithTz } from "@/Utils/TimeUtils";
 import type { CheckSnapshot } from "@/Types/Check";
 import { useTheme } from "@mui/material/styles";
 import { useSelector } from "react-redux";
@@ -58,7 +58,7 @@ export const HeatmapResponseTimeTooltip = ({
 					</Typography>
 					<Typography>
 						{t("common.labels.responseTime")}:{" "}
-						{check?.responseTime ? formatMs(check.responseTime) : "N/A"}
+						{check?.originalResponseTime?.toFixed() ?? "N/A"} ms
 					</Typography>
 					<Typography textTransform={"capitalize"}>
 						Status:{" "}

client/src/Components/common/charts/HistogramResponseTime.tsx

@@ -8,8 +8,6 @@ import { HeatmapResponseTimeTooltip } from "./HeatmapResponseTimeTooltip";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
-import { computeBarHeights } from "@/Utils/DataUtils";
-import { formatMs } from "@/Utils/TimeUtils";
 
 interface HistogramResponseTimeProps {
 	checks: CheckSnapshot[];
@@ -20,25 +18,25 @@ interface HistogramResponseTimeProps {
 }
 
 interface ResponseTimeStats {
-	max: string | null;
-	avg: string | null;
+	max: number | string;
+	avg: number | string;
 }
 
 const DEFAULT_HEIGHT = 50;
 
 const calculateResponseTimeStats = (checks: CheckSnapshot[]): ResponseTimeStats => {
 	if (!Array.isArray(checks) || checks.length === 0) {
-		return { max: null, avg: null };
+		return { max: "-", avg: "-" };
 	}
 
-	const validChecks = checks.filter((check) => check.responseTime != null);
+	const validChecks = checks.filter((check) => check.originalResponseTime != null);
 	if (validChecks.length === 0) {
-		return { max: null, avg: null };
+		return { max: "-", avg: "-" };
 	}
 
-	const responseTimes = validChecks.map((check) => check.responseTime);
-	const max = formatMs(Math.max(...responseTimes));
-	const avg = formatMs(
+	const responseTimes = validChecks.map((check) => check.originalResponseTime);
+	const max = Math.round(Math.max(...responseTimes));
+	const avg = Math.round(
 		responseTimes.reduce((sum, time) => sum + time, 0) / responseTimes.length
 	);
 
@@ -56,7 +54,7 @@ export const HistogramResponseTime = ({
 	const { t } = useTranslation();
 
 	const stats = useMemo(() => calculateResponseTimeStats(checks), [checks]);
-	const barHeights = useMemo(() => computeBarHeights(checks), [checks]);
+
 	if (!Array.isArray(checks) || checks.length === 0) return null;
 
 	const data =
@@ -70,28 +68,29 @@ export const HistogramResponseTime = ({
 	const chartHeight = typeof height === "number" ? `${height}px` : height;
 	const gridGap = gap ?? theme.spacing(0.5);
 
-	const statsContent = showStats && (stats.max !== null || stats.avg !== null) && (
-		<Stack
-			justifyContent="center"
-			alignItems={statsPosition === "left" ? "flex-end" : "flex-start"}
-			width={110}
-			pr={statsPosition === "left" ? theme.spacing(8) : 0}
-			pl={statsPosition === "right" ? theme.spacing(8) : 0}
-		>
-			<Typography
-				variant="body2"
-				noWrap
+	const statsContent = showStats &&
+		(typeof stats.max === "number" || typeof stats.avg === "number") && (
+			<Stack
+				justifyContent="center"
+				alignItems={statsPosition === "left" ? "flex-end" : "flex-start"}
+				width={110}
+				pr={statsPosition === "left" ? theme.spacing(8) : 0}
+				pl={statsPosition === "right" ? theme.spacing(8) : 0}
 			>
-				{t("common.charts.histogram.avg", { value: stats.avg })}
-			</Typography>
-			<Typography
-				variant="body2"
-				noWrap
-			>
-				{t("common.charts.histogram.max", { value: stats.max })}
-			</Typography>
-		</Stack>
-	);
+				<Typography
+					variant="body2"
+					noWrap
+				>
+					{t("common.charts.histogram.avg", { value: stats.avg })}
+				</Typography>
+				<Typography
+					variant="body2"
+					noWrap
+				>
+					{t("common.charts.histogram.max", { value: stats.max })}
+				</Typography>
+			</Stack>
+		);
 
 	return (
 		<Stack
@@ -112,7 +111,7 @@ export const HistogramResponseTime = ({
 				>
 					{data.map((check, index) => {
 						const isPlaceholder = (check as any).status === "placeholder";
-						const heightPct = `${barHeights[index] ?? 0}%`;
+						const heightPct = `${Math.max(0, Math.min(100, (check as any).responseTime ?? 0))}%`;
 						const barColor =
 							check.status === true
 								? theme.palette.success.light

client/src/Components/design-elements/BaseChart.tsx

@@ -13,7 +13,6 @@ type BaseChartProps = React.PropsWithChildren<{
 	width?: number | string;
 	maxWidth?: number | string;
 	padding?: number | string | ResponsiveStyleValue<number | string>;
-	onClick?: () => void;
 }>;
 
 export const BaseChart = ({
@@ -22,22 +21,16 @@ export const BaseChart = ({
 	width = "100%",
 	maxWidth = "100%",
 	padding,
-	onClick,
 }: BaseChartProps) => {
 	const theme = useTheme();
 	return (
 		<BaseBox
-			onClick={onClick}
 			sx={{
 				padding: padding ?? theme.spacing(LAYOUT.MD),
 				display: "flex",
 				flex: 1,
 				width: width,
 				maxWidth: maxWidth,
-				...(onClick && {
-					cursor: "pointer",
-					"& .recharts-wrapper": { cursor: "pointer !important" },
-				}),
 			}}
 		>
 			<Stack
@@ -47,7 +40,6 @@ export const BaseChart = ({
 				<Typography
 					variant="eyebrow"
 					color="text.secondary"
-					sx={{ overflowWrap: "anywhere" }}
 				>
 					{title}
 				</Typography>

client/src/Components/design-elements/Dot.tsx

@@ -1,28 +1,18 @@
 import type { CSSProperties } from "react";
 
-export const DotSizes = ["xs", "sm", "md", "lg"] as const;
-export type DotSize = (typeof DotSizes)[number];
-
-const DOT_SIZE_PX: Record<DotSize, string> = {
-	xs: "2px",
-	sm: "4px",
-	md: "8px",
-	lg: "12px",
-};
-
 interface DotProps {
 	color?: string;
-	size?: DotSize;
+	size?: string;
 	style?: CSSProperties;
 }
 
-export const Dot = ({ color = "gray", size = "sm", style }: DotProps) => {
+export const Dot = ({ color = "gray", size = "4px", style }: DotProps) => {
 	return (
 		<span
 			style={{
 				content: '""',
-				width: DOT_SIZE_PX[size],
-				height: DOT_SIZE_PX[size],
+				width: size,
+				height: size,
 				borderRadius: "50%",
 				backgroundColor: color,
 				opacity: 0.8,

client/src/Components/design-elements/Icon.tsx

@@ -5,15 +5,13 @@ interface IconProps {
 	size?: number;
 	strokeWidth?: number;
 	stroke?: string;
-	color?: string;
 }
 
-const Icon = ({ icon: Icon, size = 20, strokeWidth = 1.5, color }: IconProps) => {
+const Icon = ({ icon: Icon, size = 20, strokeWidth = 1.5 }: IconProps) => {
 	return (
 		<Icon
 			size={size}
 			strokeWidth={strokeWidth}
-			color={color}
 		/>
 	);
 };

client/src/Components/design-elements/MonitorStatus.tsx

@@ -4,10 +4,10 @@ import Typography from "@mui/material/Typography";
 import { PulseDot, Dot, StrategyBadge } from "@/Components/design-elements";
 import { getStatusColor, formatUrl } from "@/Utils/MonitorUtils";
 import { useTheme } from "@mui/material/styles";
+import prettyMilliseconds from "pretty-ms";
 import { typographyLevels } from "@/Utils/Theme/Palette";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { LAYOUT } from "@/Utils/Theme/constants";
-import { formatDuration } from "@/Utils/TimeUtils";
 export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
@@ -52,7 +52,7 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 					<>
 						<Dot />
 						<Typography>
-							Checking every {formatDuration(monitor?.interval, true)}
+							Checking every {prettyMilliseconds(monitor?.interval, { verbose: true })}
 						</Typography>
 					</>
 				)}

client/src/Components/inputs/AutoComplete.tsx

@@ -6,7 +6,6 @@ import Stack from "@mui/material/Stack";
 import { useTheme } from "@mui/material/styles";
 import { FieldLabel } from "./FieldLabel";
 import { ChevronDown } from "lucide-react";
-import { useTranslation } from "react-i18next";
 
 type AutoCompleteInputProps = Omit<
 	AutocompleteProps<any, boolean, boolean, boolean>,
@@ -16,9 +15,6 @@ type AutoCompleteInputProps = Omit<
 	fieldLabel?: string;
 	required?: boolean;
 	renderOptionContent?: (option: any) => React.ReactNode;
-	placeholder?: string;
-	error?: boolean;
-	helperText?: string;
 };
 
 export const AutoCompleteInput = ({
@@ -26,21 +22,15 @@ export const AutoCompleteInput = ({
 	required,
 	renderInput,
 	renderOptionContent,
-	placeholder,
-	error,
-	helperText,
 	...props
 }: AutoCompleteInputProps) => {
 	const theme = useTheme();
-	const { t } = useTranslation();
 	const multiple = props.multiple;
 	const { renderOption: customRenderOption, ...autocompleteProps } = props;
 	const defaultRenderInput = (params: any) => (
 		<TextField
 			{...params}
-			placeholder={placeholder ?? t("common.form.autocomplete.placeholder")}
-			error={error}
-			helperText={helperText}
+			placeholder="Type to search"
 		/>
 	);
 

client/src/Components/inputs/Radio.tsx

@@ -42,9 +42,6 @@ export const RadioWithDescription = ({
 				"& .MuiButtonBase-root": {
 					mr: theme.spacing(6),
 				},
-				"&:has(.Mui-focusVisible)": {
-					backgroundColor: theme.palette.action.hover,
-				},
 			}}
 		/>
 	);

client/src/Components/inputs/TimePicker.tsx

@@ -3,7 +3,6 @@ import type { MobileTimePickerProps } from "@mui/x-date-pickers/MobileTimePicker
 import type { Dayjs } from "dayjs";
 import { useTheme } from "@mui/material/styles";
 import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
 import { FieldLabel } from "./FieldLabel";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers";
@@ -11,15 +10,11 @@ import { LocalizationProvider } from "@mui/x-date-pickers";
 interface TimePickerComponentProps extends Omit<MobileTimePickerProps<Dayjs>, "label"> {
 	fieldLabel?: string;
 	required?: boolean;
-	error?: boolean;
-	helperText?: string;
 }
 
 export const TimePickerComponent = ({
 	fieldLabel,
 	required,
-	error,
-	helperText,
 	...props
 }: TimePickerComponentProps) => {
 	const theme = useTheme();
@@ -38,12 +33,12 @@ export const TimePickerComponent = ({
 								px: theme.spacing(5),
 							},
 							"& fieldset": {
-								borderColor: error ? theme.palette.error.main : theme.palette.divider,
+								borderColor: theme.palette.divider,
 								borderRadius: theme.shape.borderRadius,
 							},
 							"&:not(:has(.Mui-disabled)):not(:has(.Mui-error)) .MuiOutlinedInput-root:not(:has(input:focus)):hover fieldset":
 								{
-									borderColor: error ? theme.palette.error.main : theme.palette.divider,
+									borderColor: theme.palette.divider,
 								},
 						},
 					},
@@ -53,18 +48,14 @@ export const TimePickerComponent = ({
 		</LocalizationProvider>
 	);
 
-	return (
-		<Stack spacing={theme.spacing(2)}>
-			{fieldLabel && <FieldLabel required={required}>{fieldLabel}</FieldLabel>}
-			{picker}
-			{helperText && (
-				<Typography
-					variant="caption"
-					color={error ? "error" : "text.secondary"}
-				>
-					{helperText}
-				</Typography>
-			)}
-		</Stack>
-	);
+	if (fieldLabel) {
+		return (
+			<Stack spacing={theme.spacing(2)}>
+				<FieldLabel required={required}>{fieldLabel}</FieldLabel>
+				{picker}
+			</Stack>
+		);
+	}
+
+	return picker;
 };

client/src/Components/inputs/forms/FormAutoCompleteField.tsx

@@ -1,52 +0,0 @@
-import {
-	Controller,
-	useFormContext,
-	type FieldPath,
-	type FieldValues,
-} from "react-hook-form";
-import { Autocomplete } from "@/Components/inputs";
-
-export interface AutocompleteOption {
-	id: string;
-	name: string;
-}
-
-interface FormAutocompleteProps<T extends FieldValues, O extends AutocompleteOption> {
-	name: FieldPath<T>;
-	options: O[];
-	fieldLabel?: string;
-	placeholder?: string;
-}
-
-export const FormAutocompleteField = <
-	T extends FieldValues,
-	O extends AutocompleteOption,
->({
-	name,
-	options,
-	fieldLabel,
-	placeholder,
-}: FormAutocompleteProps<T, O>) => {
-	const { control } = useFormContext<T>();
-	return (
-		<Controller
-			name={name}
-			control={control}
-			render={({ field, fieldState }) => (
-				<Autocomplete
-					options={options}
-					getOptionLabel={(option) => option.name}
-					isOptionEqualToValue={(option, value) => option.id === value.id}
-					value={options.find((o) => o.id === field.value) ?? null}
-					onChange={(_: unknown, newValue: O | null) => {
-						field.onChange(newValue?.id ?? "");
-					}}
-					fieldLabel={fieldLabel}
-					placeholder={placeholder}
-					error={!!fieldState.error}
-					helperText={fieldState.error?.message ?? ""}
-				/>
-			)}
-		/>
-	);
-};

client/src/Components/inputs/forms/FormCheckboxField.tsx

@@ -1,38 +0,0 @@
-import {
-	Controller,
-	useFormContext,
-	type FieldPath,
-	type FieldValues,
-} from "react-hook-form";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import { Checkbox } from "@/Components/inputs";
-
-interface FormCheckboxFieldProps<T extends FieldValues> {
-	name: FieldPath<T>;
-	label: string;
-}
-
-export const FormCheckboxField = <T extends FieldValues>({
-	name,
-	label,
-}: FormCheckboxFieldProps<T>) => {
-	const { control } = useFormContext<T>();
-
-	return (
-		<Controller
-			name={name}
-			control={control}
-			render={({ field }) => (
-				<FormControlLabel
-					control={
-						<Checkbox
-							checked={field.value ?? false}
-							onChange={(e) => field.onChange(e.target.checked)}
-						/>
-					}
-					label={label}
-				/>
-			)}
-		/>
-	);
-};

client/src/Components/inputs/forms/FormColorField.tsx

@@ -1,35 +0,0 @@
-import {
-	Controller,
-	useFormContext,
-	type FieldPath,
-	type FieldValues,
-} from "react-hook-form";
-import { ColorInput } from "@/Components/inputs";
-
-interface FormColorFieldProps<T extends FieldValues> {
-	name: FieldPath<T>;
-	fieldLabel?: string;
-}
-
-export const FormColorField = <T extends FieldValues>({
-	name,
-	fieldLabel,
-}: FormColorFieldProps<T>) => {
-	const { control } = useFormContext<T>();
-	return (
-		<Controller
-			name={name}
-			control={control}
-			render={({ field, fieldState }) => (
-				<ColorInput
-					format="hex"
-					value={field.value}
-					onChange={field.onChange}
-					fieldLabel={fieldLabel}
-					error={!!fieldState.error}
-					helperText={fieldState.error?.message ?? ""}
-				/>
-			)}
-		/>
-	);
-};

client/src/Components/inputs/forms/FormDateTimePickerField.tsx

@@ -1,81 +0,0 @@
-import {
-	Controller,
-	useFormContext,
-	type FieldPath,
-	type FieldValues,
-} from "react-hook-form";
-import dayjs, { type Dayjs } from "dayjs";
-import { DatePicker, TimePicker } from "@/Components/inputs";
-
-export interface FormPickerFieldProps<T extends FieldValues> {
-	name: FieldPath<T>;
-	fieldLabel?: string;
-	format?: string;
-	onValueChange?: (value: string) => void; // e.g. () => trigger("startDate")
-}
-
-interface DayjsPickerProps {
-	fieldLabel?: string;
-	value: Dayjs | null;
-	onChange: (value: Dayjs | null) => void;
-	error?: boolean;
-	helperText?: string;
-}
-
-interface FormDayjsPickerFieldProps<
-	T extends FieldValues,
-> extends FormPickerFieldProps<T> {
-	picker: React.ComponentType<DayjsPickerProps>;
-	format: string;
-}
-
-const FormDayjsPickerField = <T extends FieldValues>({
-	name,
-	fieldLabel,
-	format,
-	onValueChange,
-	picker: Picker,
-}: FormDayjsPickerFieldProps<T>) => {
-	const { control } = useFormContext<T>();
-	return (
-		<Controller
-			name={name}
-			control={control}
-			render={({ field, fieldState }) => (
-				<Picker
-					fieldLabel={fieldLabel}
-					value={field.value ? dayjs(field.value, format) : null}
-					onChange={(value) => {
-						const next = value ? value.format(format) : "";
-						field.onChange(next);
-						onValueChange?.(next);
-					}}
-					error={!!fieldState.error}
-					helperText={fieldState.error?.message}
-				/>
-			)}
-		/>
-	);
-};
-
-export const FormDatePickerField = <T extends FieldValues>({
-	format = "YYYY-MM-DD",
-	...rest
-}: FormPickerFieldProps<T>) => (
-	<FormDayjsPickerField
-		{...rest}
-		format={format}
-		picker={DatePicker}
-	/>
-);
-
-export const FormTimePickerField = <T extends FieldValues>({
-	format = "HH:mm",
-	...rest
-}: FormPickerFieldProps<T>) => (
-	<FormDayjsPickerField
-		{...rest}
-		format={format}
-		picker={TimePicker}
-	/>
-);

client/src/Components/inputs/forms/FormMultiSelectField.tsx

@@ -1,187 +0,0 @@
-import { useMemo } from "react";
-import {
-	Controller,
-	useFormContext,
-	type FieldPath,
-	type FieldValues,
-} from "react-hook-form";
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import IconButton from "@mui/material/IconButton";
-import { useTheme } from "@mui/material/styles";
-import { Trash2, GripVertical } from "lucide-react";
-import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
-import type { DropResult } from "@hello-pangea/dnd";
-import { useTranslation } from "react-i18next";
-import { Autocomplete } from "@/Components/inputs";
-import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
-
-export interface MultiSelectOption {
-	id: string | number;
-	name: string;
-}
-
-interface FormMultiSelectFieldProps<T extends FieldValues, O extends MultiSelectOption> {
-	name: FieldPath<T>;
-	options: O[];
-	fieldLabel?: string;
-	placeholder?: string;
-	description?: string;
-	renderRow?: (option: O) => React.ReactNode;
-	renderOptionContent?: (option: O) => React.ReactNode;
-	sortable?: boolean;
-}
-
-export const FormMultiSelectField = <T extends FieldValues, O extends MultiSelectOption>({
-	name,
-	options,
-	fieldLabel,
-	placeholder,
-	description,
-	renderRow,
-	renderOptionContent,
-	sortable = false,
-}: FormMultiSelectFieldProps<T, O>) => {
-	const { control } = useFormContext<T>();
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const optionsById = useMemo(
-		() => new Map<O["id"], O>(options.map((o) => [o.id, o])),
-		[options]
-	);
-	return (
-		<Controller
-			name={name}
-			control={control}
-			render={({ field, fieldState }) => {
-				const selectedIds: O["id"][] = field.value ?? [];
-				const selected = selectedIds
-					.map((id) => optionsById.get(id))
-					.filter((o): o is O => o !== undefined);
-
-				const handleDragEnd = (result: DropResult) => {
-					if (!result.destination) return;
-					const reordered = selected.map((o) => o.id);
-					const [moved] = reordered.splice(result.source.index, 1);
-					reordered.splice(result.destination.index, 0, moved);
-					const unresolved = selectedIds.filter((id) => !optionsById.has(id));
-					field.onChange([...reordered, ...unresolved]);
-				};
-
-				const rowContent = (option: O) =>
-					renderRow ? (
-						renderRow(option)
-					) : (
-						<Typography flexGrow={1}>{option.name}</Typography>
-					);
-
-				const removeButton = (option: O) => (
-					<IconButton
-						size="small"
-						onClick={() => {
-							field.onChange(selectedIds.filter((id) => id !== option.id));
-						}}
-						aria-label={t("common.buttons.removeItem", { item: option.name })}
-					>
-						<Trash2 size={16} />
-					</IconButton>
-				);
-
-				return (
-					<Stack spacing={theme.spacing(LAYOUT.MD)}>
-						<Autocomplete
-							multiple
-							autoHighlight
-							options={options}
-							value={selected}
-							getOptionLabel={(option) => option.name}
-							isOptionEqualToValue={(option, value) => option.id === value.id}
-							onChange={(_: unknown, newValue: O[]) => {
-								// The Autocomplete only sees resolved options, so ids missing
-								// from options must be re-appended or they'd be silently
-								// dropped (e.g. a role excluded from the selectable list).
-								const unresolved = selectedIds.filter((id) => !optionsById.has(id));
-								field.onChange([...newValue.map((o) => o.id), ...unresolved]);
-							}}
-							fieldLabel={fieldLabel}
-							placeholder={selected.length > 0 ? "" : placeholder}
-							renderOptionContent={renderOptionContent}
-							error={!!fieldState.error}
-							helperText={fieldState.error?.message ?? ""}
-						/>
-						{description && (
-							<Typography
-								component="span"
-								color={theme.palette.text.secondary}
-								sx={{ opacity: 0.8 }}
-							>
-								{description}
-							</Typography>
-						)}
-						{sortable
-							? selected.length > 0 && (
-									<DragDropContext onDragEnd={handleDragEnd}>
-										<Droppable droppableId={`${name}-list`}>
-											{(provided) => (
-												<Stack
-													{...provided.droppableProps}
-													ref={provided.innerRef}
-												>
-													{selected.map((option, index) => (
-														<Draggable
-															key={option.id}
-															draggableId={String(option.id)}
-															index={index}
-														>
-															{(provided) => (
-																<Stack
-																	ref={provided.innerRef}
-																	{...provided.draggableProps}
-																	{...provided.dragHandleProps}
-																	direction="row"
-																	alignItems="center"
-																	spacing={theme.spacing(LAYOUT.XS)}
-																	padding={theme.spacing(LAYOUT.XS)}
-																	marginTop={theme.spacing(SPACING.LG)}
-																	borderRadius={1}
-																	border={`1px solid ${theme.palette.divider}`}
-																	sx={{
-																		cursor: "grab",
-																		"&:active": { cursor: "grabbing" },
-																	}}
-																>
-																	<GripVertical size={20} />
-																	{rowContent(option)}
-																	{removeButton(option)}
-																</Stack>
-															)}
-														</Draggable>
-													))}
-													{provided.placeholder}
-												</Stack>
-											)}
-										</Droppable>
-									</DragDropContext>
-								)
-							: selected.map((option) => (
-									<Stack
-										key={option.id}
-										direction="row"
-										alignItems="center"
-										spacing={theme.spacing(LAYOUT.XS)}
-										padding={theme.spacing(LAYOUT.XS)}
-										marginTop={theme.spacing(SPACING.LG)}
-										borderRadius={1}
-										border={`1px solid ${theme.palette.divider}`}
-										width="100%"
-									>
-										{rowContent(option)}
-										{removeButton(option)}
-									</Stack>
-								))}
-					</Stack>
-				);
-			}}
-		/>
-	);
-};

client/src/Components/inputs/forms/FormNumberField.tsx

@@ -1,46 +0,0 @@
-import {
-	Controller,
-	useFormContext,
-	type FieldPath,
-	type FieldValues,
-} from "react-hook-form";
-import { TextField } from "@/Components/inputs";
-
-interface FormNumberFieldProps<T extends FieldValues> extends Omit<
-	React.ComponentProps<typeof TextField>,
-	"name" | "error" | "helperText" | "type"
-> {
-	name: FieldPath<T>;
-	emptyValue?: number; // what an empty input writes to the form; 0 keeps today's sentinel
-}
-
-export const FormNumberField = <T extends FieldValues>({
-	name,
-	emptyValue = 0,
-	...rest
-}: FormNumberFieldProps<T>) => {
-	const { control } = useFormContext<T>();
-	return (
-		<Controller
-			name={name}
-			control={control}
-			render={({ field, fieldState }) => (
-				<TextField
-					{...field}
-					type="number"
-					value={
-						field.value === undefined || field.value === emptyValue ? "" : field.value
-					}
-					onChange={(e) => {
-						const val = e.target.value;
-						field.onChange(val === "" ? emptyValue : Number(val));
-					}}
-					error={!!fieldState.error}
-					helperText={fieldState.error?.message ?? ""}
-					fullWidth
-					{...rest}
-				/>
-			)}
-		/>
-	);
-};

client/src/Components/inputs/forms/FormRadioGroupField.tsx

@@ -1,50 +0,0 @@
-import { RadioGroup, useTheme } from "@mui/material";
-import FormControl from "@mui/material/FormControl";
-import {
-	Controller,
-	useFormContext,
-	type FieldPath,
-	type FieldValues,
-} from "react-hook-form";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { RadioWithDescription } from "@/Components/inputs/Radio";
-export interface FormRadioOption {
-	value: string;
-	label: string;
-	description: string;
-}
-
-interface FormRadioGroupProps<T extends FieldValues> {
-	name: FieldPath<T>;
-	options: FormRadioOption[];
-}
-export const FormRadioGroup = <T extends FieldValues>({
-	name,
-	options,
-}: FormRadioGroupProps<T>) => {
-	const { control } = useFormContext<T>();
-	const theme = useTheme();
-	return (
-		<Controller
-			name={name}
-			control={control}
-			render={({ field, fieldState }) => (
-				<FormControl error={!!fieldState.error}>
-					<RadioGroup
-						{...field}
-						sx={{ gap: theme.spacing(LAYOUT.MD) }}
-					>
-						{options.map((option) => (
-							<RadioWithDescription
-								key={option.value}
-								value={option.value}
-								label={option.label}
-								description={option.description}
-							/>
-						))}
-					</RadioGroup>
-				</FormControl>
-			)}
-		/>
-	);
-};

client/src/Components/inputs/forms/FormSelectField.tsx

@@ -1,60 +0,0 @@
-import {
-	Controller,
-	useFormContext,
-	type FieldValues,
-	type FieldPath,
-} from "react-hook-form";
-import MenuItem from "@mui/material/MenuItem";
-import { Select } from "@/Components/inputs";
-
-export interface FormSelectOption {
-	value: string | number;
-	label: string;
-}
-
-interface FormSelectProps<T extends FieldValues> extends Omit<
-	React.ComponentProps<typeof Select>,
-	"name" | "error" | "value" | "onChange"
-> {
-	name: FieldPath<T>;
-	options: FormSelectOption[];
-	fallbackValue?: string | number; // display value while the field is undefined
-	onValueChange?: (value: string | number) => void; // side effects, see Notes
-}
-
-export const FormSelectField = <T extends FieldValues>({
-	name,
-	options,
-	fallbackValue,
-	onValueChange,
-	...rest
-}: FormSelectProps<T>) => {
-	const { control } = useFormContext<T>();
-	return (
-		<Controller
-			name={name}
-			control={control}
-			render={({ field, fieldState }) => (
-				<Select
-					{...field}
-					value={field.value ?? fallbackValue ?? ""}
-					onChange={(e) => {
-						field.onChange(e.target.value);
-						onValueChange?.(e.target.value as string | number);
-					}}
-					error={!!fieldState.error}
-					{...rest}
-				>
-					{options.map((option) => (
-						<MenuItem
-							key={option.value}
-							value={option.value}
-						>
-							{option.label}
-						</MenuItem>
-					))}
-				</Select>
-			)}
-		/>
-	);
-};

client/src/Components/inputs/forms/FormSliderField.tsx

@@ -1,34 +0,0 @@
-import {
-	Controller,
-	useFormContext,
-	type FieldPath,
-	type FieldValues,
-} from "react-hook-form";
-import { SliderWithLabel } from "@/Components/inputs";
-
-interface FormSliderProps<T extends FieldValues> extends Omit<
-	React.ComponentProps<typeof SliderWithLabel>,
-	"name" | "value" | "onChange"
-> {
-	name: FieldPath<T>;
-}
-
-export const FormSliderField = <T extends FieldValues>({
-	name,
-	...rest
-}: FormSliderProps<T>) => {
-	const { control } = useFormContext<T>();
-	return (
-		<Controller
-			name={name}
-			control={control}
-			render={({ field }) => (
-				<SliderWithLabel
-					{...field}
-					sliderMaxWidth={{ xs: "100%", md: "50%" }}
-					{...rest}
-				/>
-			)}
-		/>
-	);
-};

client/src/Components/inputs/forms/FormSwitchField.tsx

@@ -1,59 +0,0 @@
-import {
-	Controller,
-	useFormContext,
-	type FieldPath,
-	type FieldValues,
-} from "react-hook-form";
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { SwitchComponent } from "@/Components/inputs";
-import { SPACING } from "@/Utils/Theme/constants";
-
-interface FormSwitchProps<T extends FieldValues> {
-	name: FieldPath<T>;
-	label: string;
-	labelPlacement?: "start" | "end"; // left | right
-}
-
-export const FormSwitchField = <T extends FieldValues>({
-	name,
-	label,
-	labelPlacement = "end",
-}: FormSwitchProps<T>) => {
-	const { control } = useFormContext<T>();
-	const theme = useTheme();
-
-	return (
-		<Controller
-			name={name}
-			control={control}
-			render={({ field }) => (
-				<Stack
-					direction="row"
-					alignItems="center"
-					spacing={labelPlacement === "start" ? undefined : theme.spacing(SPACING.LG)}
-					justifyContent={labelPlacement === "start" ? "space-between" : undefined}
-				>
-					{labelPlacement === "start" ? (
-						<>
-							<Typography>{label}</Typography>
-							<SwitchComponent
-								checked={field.value ?? false}
-								onChange={(e) => field.onChange(e.target.checked)}
-							/>
-						</>
-					) : (
-						<>
-							<SwitchComponent
-								checked={field.value ?? false}
-								onChange={(e) => field.onChange(e.target.checked)}
-							/>
-							<Typography>{label}</Typography>
-						</>
-					)}
-				</Stack>
-			)}
-		/>
-	);
-};

client/src/Components/inputs/forms/FormTextField.tsx

@@ -1,40 +0,0 @@
-import {
-	Controller,
-	useFormContext,
-	type FieldPath,
-	type FieldValues,
-} from "react-hook-form";
-
-import { TextField } from "@/Components/inputs";
-
-interface FormTextFieldProps<T extends FieldValues> extends Omit<
-	React.ComponentProps<typeof TextField>,
-	"name" | "error" | "helperText"
-> {
-	name: FieldPath<T>;
-	helperText?: string;
-}
-
-export const FormTextField = <T extends FieldValues>({
-	name,
-	...rest
-}: FormTextFieldProps<T>) => {
-	const { control } = useFormContext<T>();
-	return (
-		<Controller
-			name={name}
-			control={control}
-			render={({ field, fieldState }) => (
-				<TextField
-					{...field}
-					type="text"
-					{...rest}
-					value={field.value ?? ""}
-					error={!!fieldState.error}
-					helperText={fieldState.error?.message ?? rest.helperText ?? ""}
-					fullWidth
-				/>
-			)}
-		/>
-	);
-};

client/src/Components/layout/RootLayout.tsx

@@ -18,13 +18,15 @@ const RootLayout = () => {
 				flex={1}
 				padding={6}
 				overflow={"hidden"}
-				bgcolor={
-					theme.palette.mode === "dark"
-						? "rgba(255, 255, 255, 0.01)"
-						: "rgba(124, 116, 116, 0.01)"
-				}
-				alignItems="center"
-				paddingLeft={isSmall ? `${collapsedWidth + 12}px` : 12}
+				sx={{
+					backgroundColor:
+						theme.palette.mode === "dark"
+							? "rgba(255, 255, 255, 0.01)"
+							: "rgba(0, 0, 0, 0.01)",
+					display: "flex",
+					alignItems: "center",
+					paddingLeft: isSmall ? `${collapsedWidth + 12}px` : 12,
+				}}
 			>
 				<Stack
 					maxWidth={1280}

client/src/Components/monitors/GeoChecksMap.tsx

@@ -6,7 +6,6 @@ import type { FlatGeoCheck } from "@/Types/GeoCheck";
 import { useTranslation } from "react-i18next";
 import { formatStatusCode } from "@/Utils/statusCode";
 import "maplibre-gl/dist/maplibre-gl.css";
-import { formatMs } from "@/Utils/TimeUtils";
 
 interface GeoChecksMapProps {
 	geoChecks: FlatGeoCheck[];
@@ -84,6 +83,10 @@ export const GeoChecksMap = ({ geoChecks }: GeoChecksMapProps) => {
 		return status ? theme.palette.success.main : theme.palette.error.main;
 	};
 
+	const formatResponseTime = (timing: number): string => {
+		return `${timing.toFixed(0)}ms`;
+	};
+
 	return (
 		<>
 			{mapPopupStyles}
@@ -183,7 +186,7 @@ export const GeoChecksMap = ({ geoChecks }: GeoChecksMapProps) => {
 										>
 											Response Time:
 										</Typography>{" "}
-										{formatMs(selectedCheck.timings.total)}
+										{formatResponseTime(selectedCheck.timings.total)}
 									</Typography>
 									<Typography
 										variant="caption"

client/src/Components/monitors/MonitorStatBoxes.tsx

@@ -1,24 +1,22 @@
 import Stack from "@mui/material/Stack";
 import { StatBox } from "@/Components/design-elements";
 
+import prettyMilliseconds from "pretty-ms";
 import { useTheme } from "@mui/material/styles";
 import type { MonitorStats, Monitor } from "@/Types/Monitor";
 import { getStatusPalette } from "@/Utils/MonitorUtils";
 import { useTranslation } from "react-i18next";
-import { formatMs, formatDuration } from "@/Utils/TimeUtils";
 
 interface MonitorStatBoxesProps {
 	monitor?: Monitor;
 	monitorStats: MonitorStats | null;
 	certificateExpiry?: string;
-	domainExpiry?: string;
 }
 
 export const MonitorStatBoxes = ({
 	monitor,
 	monitorStats,
 	certificateExpiry,
-	domainExpiry,
 }: MonitorStatBoxesProps) => {
 	const theme = useTheme();
 	const { t } = useTranslation();
@@ -33,9 +31,14 @@ export const MonitorStatBoxes = ({
 	const timeOfLastCheck = monitorStats?.lastCheckTimestamp || 0;
 	const timeSinceLastCheck = Date.now() - timeOfLastCheck || 0;
 
-	const streakTime = formatDuration(timeSinceLastFailure);
+	const options = {
+		secondsDecimalDigits: 0,
+		millisecondsDecimalDigits: 0,
+	};
 
-	const lastCheckTime = formatDuration(timeSinceLastCheck);
+	const streakTime = prettyMilliseconds(timeSinceLastFailure, options);
+
+	const lastCheckTime = prettyMilliseconds(timeSinceLastCheck, options);
 	const isActive =
 		monitor?.status === "up" ||
 		monitor?.status === "paused" ||
@@ -64,20 +67,14 @@ export const MonitorStatBoxes = ({
 			/>
 			<StatBox
 				title={t("pages.common.monitors.statBoxes.lastResponseTime")}
-				subtitle={formatMs(monitorStats?.lastResponseTime ?? 0)}
+				subtitle={prettyMilliseconds(monitorStats?.lastResponseTime ?? 0)}
 			/>
 
 			{monitor?.type === "http" && (
-				<>
-					<StatBox
-						title={t("pages.common.monitors.statBoxes.certificateExpiry")}
-						subtitle={certificateExpiry || "N/A"}
-					/>
-					<StatBox
-						title={t("pages.common.monitors.statBoxes.domainExpiry")}
-						subtitle={domainExpiry || "N/A"}
-					/>
-				</>
+				<StatBox
+					title={t("pages.common.monitors.statBoxes.certificateExpiry")}
+					subtitle={certificateExpiry || "N/A"}
+				/>
 			)}
 		</Stack>
 	);

client/src/Components/monitors/charts/ChartUtils.ts

@@ -1,34 +0,0 @@
-export const computeYAxisCap = (values: number[]): number | undefined => {
-	const sorted = values.slice().sort((a, b) => a - b);
-	if (sorted.length < 2) return undefined;
-	const p95 = sorted[Math.min(sorted.length - 1, Math.floor(sorted.length * 0.95))];
-	return p95 > 0 ? Math.ceil(p95 * 2) : undefined;
-};
-
-export const PHASE_KEYS = [
-	"avgDns",
-	"avgTcp",
-	"avgTls",
-	"avgRequest",
-	"avgFirstByte",
-	"avgDownload",
-] as const;
-
-export const PHASE_COLOR_KEYS = {
-	avgDns: "dns",
-	avgTcp: "tcp",
-	avgTls: "tls",
-	avgRequest: "request",
-	avgFirstByte: "firstByte",
-	avgDownload: "download",
-} as const;
-
-// i18n keys, resolved with t() at render
-export const PHASE_LABEL_KEYS: Record<(typeof PHASE_KEYS)[number], string> = {
-	avgDns: "common.charts.phases.dns",
-	avgTcp: "common.charts.phases.tcp",
-	avgTls: "common.charts.phases.tls",
-	avgRequest: "common.charts.phases.request",
-	avgFirstByte: "common.charts.phases.firstByte",
-	avgDownload: "common.charts.phases.download",
-};

client/src/Components/monitors/charts/HistogramDetails.tsx

@@ -1,39 +1,53 @@
-import Stack from "@mui/material/Stack";
 import { BaseChart, BaseBox } from "@/Components/design-elements";
 import { Clock } from "lucide-react";
-import { Dot } from "@/Components/design-elements";
 import {
 	AreaChart,
 	Area,
 	XAxis,
-	YAxis,
 	Tooltip,
 	CartesianGrid,
 	ResponsiveContainer,
+	Text,
 } from "recharts";
 import type { TooltipProps } from "recharts";
 import type { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
 import Typography from "@mui/material/Typography";
-import { XTick } from "@/Components/monitors/charts/XTick";
+
 import { useSelector } from "react-redux";
-import { useTranslation } from "react-i18next";
-import { formatDateWithTz, formatMs, tooltipDateFormatLookup } from "@/Utils/TimeUtils";
+import {
+	formatDateWithTz,
+	tickDateFormatLookup,
+	tooltipDateFormatLookup,
+} from "@/Utils/TimeUtils";
 import { useTheme } from "@mui/material/styles";
 import type { Theme } from "@mui/material/styles";
-import type { GroupedCheck, GroupedUptimeCheck } from "@/Types/Check";
+import type { GroupedCheck } from "@/Types/Check";
 import type { RootState } from "@/Types/state";
-import { computeYAxisCap } from "@/Components/monitors/charts/ChartUtils";
 
-import { useMemo, useState } from "react";
-import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
-import {
-	PHASE_COLOR_KEYS,
-	PHASE_KEYS,
-	PHASE_LABEL_KEYS,
-} from "@/Components/monitors/charts/ChartUtils";
+type XTickProps = {
+	x: number;
+	y: number;
+	payload: { value: string };
+	range: string;
+};
 
-type DetailsCheck = GroupedCheck &
-	Partial<Pick<GroupedUptimeCheck, (typeof PHASE_KEYS)[number]>>;
+export const XTick = ({ x, y, payload, range }: XTickProps) => {
+	const format = tickDateFormatLookup(range);
+	const theme = useTheme();
+	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
+	return (
+		<Text
+			x={x}
+			y={y + 10}
+			textAnchor="middle"
+			fill={theme.palette.text.secondary}
+			fontSize={11}
+			fontWeight={400}
+		>
+			{formatDateWithTz(payload?.value, format, uiTimezone)}
+		</Text>
+	);
+};
 
 type ResponseTimeToolTipProps = TooltipProps<ValueType, NameType> & {
 	range: string;
@@ -49,65 +63,17 @@ const ResponseTimeToolTip = ({
 	theme,
 	uiTimezone,
 }: ResponseTimeToolTipProps) => {
-	const { t } = useTranslation();
 	if (!label) return null;
 	if (!payload) return null;
 	if (!active) return null;
 
 	const format = tooltipDateFormatLookup(range);
-	const responseTime = payload[0]?.payload?.avgResponseTime ?? 0;
+	console.log(payload);
+	const responseTime = Math.floor(payload[0]?.payload?.originalAvgResponseTime || 0);
 	return (
 		<BaseBox sx={{ py: theme.spacing(2), px: theme.spacing(4) }}>
 			<Typography>{formatDateWithTz(String(label), format, uiTimezone)}</Typography>
-			<Typography>
-				{t("common.charts.histogram.responseTime", {
-					value: formatMs(responseTime),
-				})}
-			</Typography>
-		</BaseBox>
-	);
-};
-
-type TimingPhaseToolTipProps = TooltipProps<ValueType, NameType> & {
-	range: string;
-	theme: Theme;
-	uiTimezone: string;
-};
-
-const TimingPhasesToolTip = ({
-	active,
-	payload,
-	range,
-	theme,
-	uiTimezone,
-}: TimingPhaseToolTipProps) => {
-	const { t } = useTranslation();
-	if (!active || !payload?.length) return null;
-	const bucket = payload[0].payload as GroupedUptimeCheck;
-	const total = PHASE_KEYS.reduce((sum, key) => sum + bucket[key], 0);
-	const format = tooltipDateFormatLookup(range);
-	return (
-		<BaseBox sx={{ py: theme.spacing(2), px: theme.spacing(4) }}>
-			<Typography>{formatDateWithTz(bucket.bucketDate, format, uiTimezone)}</Typography>
-			<Typography>
-				{t("common.charts.histogram.total", { value: formatMs(total) })}
-			</Typography>
-			{PHASE_KEYS.map((key) => (
-				<Stack
-					alignItems={"center"}
-					direction="row"
-					key={key}
-					gap={SPACING.LG}
-				>
-					<Dot
-						size="lg"
-						color={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
-					/>
-					<Typography>
-						{t(PHASE_LABEL_KEYS[key])}: {formatMs(bucket[key])}
-					</Typography>
-				</Stack>
-			))}
+			<Typography>Response time: {responseTime} ms</Typography>
 		</BaseBox>
 	);
 };
@@ -116,28 +82,11 @@ export const HistogramDetails = ({
 	checks,
 	range,
 }: {
-	checks: DetailsCheck[];
+	checks: GroupedCheck[];
 	range: string;
 }) => {
-	const [showTimingPhases, setShowTimingPhases] = useState(false);
-	const [hoveredPhase, setHoveredPhase] = useState<string | null>(null);
-
-	const { t } = useTranslation();
 	const theme = useTheme();
 	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
-	const yMax = useMemo(() => {
-		const totals = checks.map((check) => {
-			const phaseSum = PHASE_KEYS.reduce((sum, key) => sum + (check[key] ?? 0), 0);
-			return Math.max(check.avgResponseTime ?? 0, phaseSum);
-		});
-		return computeYAxisCap(totals);
-	}, [checks]);
-
-	const hasTimingPhases = useMemo(
-		() => (checks ?? []).some((check) => PHASE_KEYS.some((key) => (check[key] ?? 0) > 0)),
-		[checks]
-	);
-
 	return (
 		<BaseChart
 			icon={
@@ -146,15 +95,7 @@ export const HistogramDetails = ({
 					strokeWidth={1.5}
 				/>
 			}
-			title={
-				showTimingPhases
-					? t("common.charts.labels.timingPhases")
-					: t("common.charts.labels.responseTime")
-			}
-			onClick={() => {
-				if (!hasTimingPhases) return;
-				setShowTimingPhases((prev) => !prev);
-			}}
+			title="Response times"
 		>
 			<ResponsiveContainer
 				width="100%"
@@ -187,34 +128,7 @@ export const HistogramDetails = ({
 								stopOpacity={0}
 							/>
 						</linearGradient>
-						{PHASE_KEYS.map((key) => (
-							<linearGradient
-								key={key}
-								id={`phaseGradient-${key}`}
-								x1="0"
-								y1="0"
-								x2="0"
-								y2="1"
-							>
-								<stop
-									offset="0%"
-									stopColor={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
-									stopOpacity={0.8}
-								/>
-								<stop
-									offset="100%"
-									stopColor={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
-									stopOpacity={0.2}
-								/>
-							</linearGradient>
-						))}
 					</defs>
-					<YAxis
-						hide
-						// scale="sqrt"
-						domain={[0, yMax ?? "auto"]}
-						allowDataOverflow
-					/>
 					<XAxis
 						axisLine={false}
 						tickLine={false}
@@ -227,99 +141,24 @@ export const HistogramDetails = ({
 						)}
 					/>
 
-					{showTimingPhases ? (
-						<Tooltip
-							content={(props) => (
-								<TimingPhasesToolTip
-									{...props}
-									range={range}
-									theme={theme}
-									uiTimezone={uiTimezone}
-								/>
-							)}
-						/>
-					) : (
-						<Tooltip
-							content={(props) => (
-								<ResponseTimeToolTip
-									{...props}
-									range={range}
-									theme={theme}
-									uiTimezone={uiTimezone}
-								/>
-							)}
-						/>
-					)}
-					{!showTimingPhases && (
-						<Area
-							type="monotone"
-							dataKey="avgResponseTime"
-							stroke={theme.palette.primary.main}
-							fill="url(#colorUv)"
-						/>
-					)}
-					{hasTimingPhases &&
-						showTimingPhases &&
-						PHASE_KEYS.map((key) => {
-							const dimmed = hoveredPhase !== null && hoveredPhase !== key;
-							return (
-								<Area
-									key={key}
-									type="monotone"
-									stackId={1}
-									dataKey={key}
-									stroke={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
-									fill={`url(#phaseGradient-${key})`}
-									fillOpacity={dimmed ? 0.2 : undefined}
-									strokeOpacity={dimmed ? 0.2 : undefined}
-								/>
-							);
-						})}
+					<Tooltip
+						content={(props) => (
+							<ResponseTimeToolTip
+								{...props}
+								range={range}
+								theme={theme}
+								uiTimezone={uiTimezone}
+							/>
+						)}
+					/>
+					<Area
+						type="monotone"
+						dataKey="avgResponseTime"
+						stroke={theme.palette.primary.main}
+						fill="url(#colorUv)"
+					/>
 				</AreaChart>
 			</ResponsiveContainer>
-			<Stack
-				justifyContent={"center"}
-				gap={LAYOUT.XS}
-				direction={"row"}
-				flexWrap={"wrap"}
-			>
-				{showTimingPhases ? (
-					PHASE_KEYS.map((key) => {
-						return (
-							<Stack
-								direction="row"
-								alignItems="center"
-								gap={SPACING.LG}
-								key={key}
-								onMouseEnter={() => setHoveredPhase(key)}
-								onMouseLeave={() => setHoveredPhase(null)}
-							>
-								<Dot
-									color={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
-									size="lg"
-								/>
-								<Typography lineHeight={1}>{t(PHASE_LABEL_KEYS[key])}</Typography>
-							</Stack>
-						);
-					})
-				) : (
-					<Stack
-						direction="row"
-						alignItems="center"
-						gap={SPACING.LG}
-						onMouseEnter={() => setHoveredPhase("avgResponseTime")}
-						onMouseLeave={() => setHoveredPhase(null)}
-					>
-						<Dot
-							color={theme.palette.primary.main}
-							size="lg"
-						/>
-						<Typography lineHeight={1}>
-							{t("common.charts.labels.totalResponseTime")}
-						</Typography>
-					</Stack>
-				)}
-			</Stack>
 		</BaseChart>
 	);
 };

client/src/Components/monitors/charts/HistogramInfrastructure.tsx

@@ -8,7 +8,7 @@ import {
 	ResponsiveContainer,
 } from "recharts";
 import { Fragment, useId } from "react";
-import { XTick } from "@/Components/monitors/charts/XTick";
+import { XTick } from "@/Components/monitors";
 
 import { useTheme } from "@mui/material/styles";
 import type { HardwareCheckStats } from "@/Types/Monitor";

client/src/Components/monitors/charts/HistogramPageSpeedDetails.tsx

@@ -1,6 +1,6 @@
 import { BaseChart } from "@/Components/design-elements";
 import { TrendingUp } from "lucide-react";
-import { XTick } from "@/Components/monitors/charts/XTick";
+import { XTick } from "@/Components/monitors";
 import {
 	XAxis,
 	AreaChart,

client/src/Components/monitors/charts/HistogramStatus.tsx

@@ -3,7 +3,7 @@ import Typography from "@mui/material/Typography";
 import { BaseChart } from "@/Components/design-elements";
 import { useTheme } from "@mui/material/styles";
 import { useSelector } from "react-redux";
-import { formatDateWithTz, formatMs } from "@/Utils/TimeUtils";
+import { formatDateWithTz } from "@/Utils/TimeUtils";
 import { useTranslation } from "react-i18next";
 import { ResponsiveContainer, BarChart, XAxis, Bar, Cell, Tooltip } from "recharts";
 import { getResponseTimeColor } from "@/Utils/MonitorUtils";
@@ -100,7 +100,7 @@ export const HistogramStatus = ({
 					</Typography>
 				) : null}
 				<Typography variant="caption">{titleText}</Typography>
-				<Typography variant="body2">{formatMs(avg)}</Typography>
+				<Typography variant="body2">{Math.floor(avg)} ms</Typography>
 			</Stack>
 		);
 	};

client/src/Components/monitors/charts/RadialAvgResponse.tsx

@@ -7,7 +7,6 @@ import { Cell, RadialBarChart, RadialBar, ResponsiveContainer } from "recharts";
 import { useTranslation } from "react-i18next";
 import { getResponseTimeColor } from "@/Utils/MonitorUtils";
 import { useTheme } from "@mui/material/styles";
-import { formatMs } from "@/Utils/TimeUtils";
 
 export const RadialAvgResponse = ({ avg, max }: { avg: number; max: number }) => {
 	const { t } = useTranslation();
@@ -85,9 +84,7 @@ export const RadialAvgResponse = ({ avg, max }: { avg: number; max: number }) =>
 					<Typography
 						variant="h1"
 						textAlign={"center"}
-					>
-						{formatMs(avg)}
-					</Typography>
+					>{`${avg?.toFixed()}ms`}</Typography>
 				</Stack>
 			</Stack>
 		</BaseChart>

client/src/Components/monitors/charts/XTick.tsx

@@ -1,30 +0,0 @@
-import { formatDateWithTz, tickDateFormatLookup } from "@/Utils/TimeUtils";
-import { useSelector } from "react-redux";
-import { Text } from "recharts";
-import { useTheme } from "@mui/material";
-import type { RootState } from "@/Types/state";
-
-type XTickProps = {
-	x: number;
-	y: number;
-	payload: { value: string };
-	range: string;
-};
-
-export const XTick = ({ x, y, payload, range }: XTickProps) => {
-	const format = tickDateFormatLookup(range);
-	const theme = useTheme();
-	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
-	return (
-		<Text
-			x={x}
-			y={y + 10}
-			textAnchor="middle"
-			fill={theme.palette.text.secondary}
-			fontSize={11}
-			fontWeight={400}
-		>
-			{formatDateWithTz(payload?.value, format, uiTimezone)}
-		</Text>
-	);
-};

client/src/Components/sidebar/Authfooter.tsx

@@ -10,11 +10,10 @@ import { useSelector, useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
 import { useState } from "react";
 import { useNavigate } from "react-router";
-import { MoreVertical, LogOut, Moon, Sun } from "lucide-react";
+import { MoreVertical, LogOut } from "lucide-react";
 import { Avatar, Icon } from "@/Components/design-elements";
 import { clearAuthState } from "@/Features/Auth/authSlice.js";
 import type { RootState } from "@/Types/state.js";
-import { setMode } from "@/Features/UI/uiSlice.js";
 
 interface AuthFooterProps {
 	collapsed: boolean;
@@ -28,7 +27,6 @@ interface AuthFooterProps {
 export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
-	const mode = useSelector((state: RootState) => state.ui.mode);
 	const user = useSelector((state: RootState) => state.auth.user);
 	const navigate = useNavigate();
 	const dispatch = useDispatch();
@@ -107,14 +105,13 @@ export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) =>
 						<Typography
 							fontWeight={500}
 							noWrap
-							color={theme.palette.text.primary}
+							sx={{ color: theme.palette.text.primary }}
 						>
 							{user?.firstName} {user?.lastName}
 						</Typography>
 						<Typography
 							noWrap
-							textTransform={"capitalize"}
-							color={theme.palette.text.secondary}
+							sx={{ textTransform: "capitalize", color: theme.palette.text.secondary }}
 						>
 							{getRoleText()}
 						</Typography>
@@ -157,12 +154,15 @@ export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) =>
 						pb={2}
 						sx={{ pointerEvents: "none" }}
 					>
-						<Typography fontWeight={500}>
+						<Typography
+							fontWeight={500}
+							fontSize={13}
+						>
 							{user?.firstName} {user?.lastName}
 						</Typography>
 						<Typography
-							variant="body2"
-							textTransform={"capitalize"}
+							fontSize={12}
+							sx={{ textTransform: "capitalize" }}
 						>
 							{getRoleText()}
 						</Typography>
@@ -178,18 +178,6 @@ export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) =>
 						{item.name}
 					</MenuItem>
 				))}
-				<MenuItem
-					onClick={() => {
-						dispatch(setMode(mode === "light" ? "dark" : "light"));
-						handleMenuClose();
-					}}
-					sx={menuItemSx}
-				>
-					<Icon icon={mode === "light" ? Moon : Sun} />
-					{mode === "light"
-						? t("pages.settings.form.ui.option.theme.dark")
-						: t("pages.settings.form.ui.option.theme.light")}
-				</MenuItem>
 				<MenuItem
 					onClick={handleLogout}
 					sx={menuItemSx}

client/src/Components/sidebar/index.tsx

@@ -102,7 +102,6 @@ export const Sidebar = () => {
 					})}
 				</List>
 				<StarPrompt />
-
 				<Divider sx={{ borderColor: theme.palette.divider }} />
 
 				<AuthFooter

client/src/Hooks/useMonitorForm.ts

@@ -1,10 +1,6 @@
 import { useMemo } from "react";
 import { monitorSchema, type MonitorFormData } from "@/Validation/monitor";
-import {
-	DefaultHttpMethod,
-	DefaultMonitorMatchMethod,
-	DefaultPageSpeedStrategy,
-} from "@/Types/Monitor";
+import { DefaultHttpMethod, DefaultPageSpeedStrategy } from "@/Types/Monitor";
 import type { Monitor, MonitorType } from "@/Types/Monitor";
 
 interface UseMonitorFormOptions {
@@ -47,7 +43,7 @@ export const getMonitorDefaults = (
 				method: data?.method ?? DefaultHttpMethod,
 				ignoreTlsErrors: data?.ignoreTlsErrors || false,
 				useAdvancedMatching: data?.useAdvancedMatching || false,
-				matchMethod: data?.matchMethod || DefaultMonitorMatchMethod,
+				matchMethod: data?.matchMethod || "",
 				expectedValue: data?.expectedValue || "",
 				jsonPath: data?.jsonPath || "",
 				customUpCodes: data?.customUpCodes || [],
@@ -142,7 +138,7 @@ export const getMonitorDefaults = (
 				method: DefaultHttpMethod,
 				ignoreTlsErrors: false,
 				useAdvancedMatching: false,
-				matchMethod: DefaultMonitorMatchMethod,
+				matchMethod: "",
 				expectedValue: "",
 				jsonPath: "",
 				customUpCodes: [],

client/src/Hooks/useNotificationForm.ts

@@ -8,17 +8,89 @@ interface UseNotificationFormOptions {
 }
 
 function buildDefaults(data: Notification | null): NotificationFormData {
+	if (data?.type === "matrix") {
+		return {
+			type: "matrix",
+			notificationName: data.notificationName || "",
+			homeserverUrl: data.homeserverUrl || "",
+			roomId: data.roomId || "",
+			accessToken: data.accessToken || "",
+		};
+	}
+	if (data?.type === "telegram") {
+		return {
+			type: "telegram",
+			notificationName: data.notificationName || "",
+			address: data.address || "",
+			accessToken: data.accessToken || "",
+		};
+	}
+	if (data?.type === "slack") {
+		return {
+			type: "slack",
+			notificationName: data.notificationName || "",
+			address: data.address || "",
+		};
+	}
+	if (data?.type === "discord") {
+		return {
+			type: "discord",
+			notificationName: data.notificationName || "",
+			address: data.address || "",
+		};
+	}
+	if (data?.type === "webhook") {
+		return {
+			type: "webhook",
+			notificationName: data.notificationName || "",
+			address: data.address || "",
+		};
+	}
+	if (data?.type === "pager_duty") {
+		return {
+			type: "pager_duty",
+			notificationName: data.notificationName || "",
+			address: data.address || "",
+		};
+	}
+	if (data?.type === "teams") {
+		return {
+			type: "teams",
+			notificationName: data.notificationName || "",
+			address: data.address || "",
+		};
+	}
+	if (data?.type === "twilio") {
+		return {
+			type: "twilio",
+			notificationName: data.notificationName || "",
+			accountSid: data.accountSid || "",
+			accessToken: data.accessToken || "",
+			phone: data.phone || "",
+			twilioPhoneNumber: data.twilioPhoneNumber || "",
+		};
+	}
+	if (data?.type === "pushover") {
+		return {
+			type: "pushover",
+			notificationName: data.notificationName || "",
+			address: data.address || "",
+			accessToken: data.accessToken || "",
+		};
+	}
+	if (data?.type === "ntfy") {
+		return {
+			type: "ntfy",
+			notificationName: data.notificationName || "",
+			address: data.address || "",
+			topic: data.topic || "",
+		};
+	}
+	// Default: email (covers both data === null and data.type === "email")
 	return {
-		type: data?.type ?? "email",
+		type: "email",
 		notificationName: data?.notificationName || "",
 		address: data?.address || "",
-		accessToken: data?.accessToken || "",
-		accountSid: data?.accountSid || "",
-		phone: data?.phone || "",
-		twilioPhoneNumber: data?.twilioPhoneNumber || "",
-		homeserverUrl: data?.homeserverUrl || "",
-		roomId: data?.roomId || "",
-		topic: data?.topic || "",
 	};
 }
 

client/src/Pages/Account/EditUser/index.tsx

@@ -1,6 +1,11 @@
-import { TextField, Button } from "@/Components/inputs";
+import { Trash2 } from "lucide-react";
+import { TextField, Button, Autocomplete } from "@/Components/inputs";
 import Stack from "@mui/material/Stack";
-import { FormProvider, useForm } from "react-hook-form";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import Divider from "@mui/material/Divider";
+import FormHelperText from "@mui/material/FormHelperText";
+import { useForm, Controller } from "react-hook-form";
 import { ConfigBox, BasePage } from "@/Components/design-elements";
 
 import { UserRoles } from "@/Types/User";
@@ -17,8 +22,6 @@ import { useSelector } from "react-redux";
 import type { RootState } from "@/Types/state";
 import { LAYOUT } from "@/Utils/Theme/constants";
 import { useIsAdmin, useIsSuperAdmin } from "@/Hooks/useIsAdmin";
-import { FormTextField } from "@/Components/inputs/forms/FormTextField";
-import { FormMultiSelectField } from "@/Components/inputs/forms/FormMultiSelectField";
 
 interface RoleOption {
 	id: UserRole;
@@ -40,11 +43,10 @@ const EditUserPage = () => {
 
 	const { data: user, isLoading } = useGet<User>(`/auth/users/${userId}`);
 
-	const form = useForm<EditUserFormData>({
+	const { control, handleSubmit, reset, watch, setValue } = useForm<EditUserFormData>({
 		resolver,
 		defaultValues: defaults,
 	});
-	const { handleSubmit, reset } = form;
 
 	useEffect(() => {
 		if (user) {
@@ -62,6 +64,13 @@ const EditUserPage = () => {
 		name: t(`common.auth.roles.${role}`),
 	}));
 
+	const watchedRoles = watch("role");
+	const selectedRoles = roleOptions.filter((r) => watchedRoles?.includes(r.id));
+	const handleRemoveRole = (roleToRemove: UserRole) => {
+		const newRoles = watchedRoles.filter((role) => role !== roleToRemove);
+		setValue("role", newRoles, { shouldValidate: true });
+	};
+
 	const canDeleteUser =
 		isAdmin &&
 		userId !== currentUser?.id &&
@@ -81,31 +90,42 @@ const EditUserPage = () => {
 	};
 
 	return (
-		<FormProvider {...form}>
-			<BasePage
-				loading={isLoading}
-				component={"form"}
-				onSubmit={handleSubmit(onSubmit)}
-			>
+		<BasePage loading={isLoading}>
+			<form onSubmit={handleSubmit(onSubmit)}>
 				<Stack gap={theme.spacing(8)}>
 					<ConfigBox
 						title={t("pages.account.form.name.title")}
 						subtitle={t("pages.account.form.name.description")}
 						rightContent={
 							<Stack gap={theme.spacing(8)}>
-								<FormTextField
+								<Controller
 									name="firstName"
-									autoComplete="given-name"
-									fieldLabel={t("common.form.name.option.firstName.label")}
-									placeholder={t("common.form.name.option.firstName.placeholder")}
+									control={control}
+									render={({ field, fieldState }) => (
+										<TextField
+											{...field}
+											fieldLabel={t("common.form.name.option.firstName.label")}
+											placeholder={t("common.form.name.option.firstName.placeholder")}
+											error={!!fieldState.error}
+											helperText={fieldState.error?.message}
+											autoComplete="given-name"
+										/>
+									)}
 								/>
-								<FormTextField
+								<Controller
 									name="lastName"
-									autoComplete="family-name"
-									fieldLabel={t("common.form.name.option.lastName.label")}
-									placeholder={t("common.form.name.option.lastName.placeholder")}
+									control={control}
+									render={({ field, fieldState }) => (
+										<TextField
+											{...field}
+											fieldLabel={t("common.form.name.option.lastName.label")}
+											placeholder={t("common.form.name.option.lastName.placeholder")}
+											error={!!fieldState.error}
+											helperText={fieldState.error?.message}
+											autoComplete="family-name"
+										/>
+									)}
 								/>
-
 								<TextField
 									fieldLabel={t("common.form.email.option.email.label")}
 									placeholder={t("common.form.email.option.email.placeholder")}
@@ -119,11 +139,55 @@ const EditUserPage = () => {
 						title={t("pages.editUser.form.roles.title")}
 						subtitle={t("pages.editUser.form.roles.description")}
 						rightContent={
-							<FormMultiSelectField
-								name="role"
-								fieldLabel={t("common.form.role.option.role.label")}
-								options={roleOptions}
-							/>
+							<Stack spacing={theme.spacing(4)}>
+								<Controller
+									name="role"
+									control={control}
+									render={({ field, fieldState }) => (
+										<>
+											<Autocomplete
+												fieldLabel={t("common.form.role.option.role.label")}
+												multiple
+												options={roleOptions}
+												value={selectedRoles}
+												getOptionLabel={(option) => option.name}
+												onChange={(_: unknown, newValue: RoleOption[]) => {
+													field.onChange(newValue.map((r) => r.id));
+												}}
+												isOptionEqualToValue={(option, value) => option.id === value.id}
+											/>
+											{fieldState.error && (
+												<FormHelperText error>{fieldState.error.message}</FormHelperText>
+											)}
+										</>
+									)}
+								/>
+								{selectedRoles.length > 0 && (
+									<Stack
+										flex={1}
+										width="100%"
+									>
+										{selectedRoles.map((role, index) => (
+											<Stack
+												direction="row"
+												alignItems="center"
+												key={role.id}
+												width="100%"
+											>
+												<Typography flexGrow={1}>{role.name}</Typography>
+												<IconButton
+													size="small"
+													onClick={() => handleRemoveRole(role.id)}
+													aria-label="Remove role"
+												>
+													<Trash2 size={16} />
+												</IconButton>
+												{index < selectedRoles.length - 1 && <Divider />}
+											</Stack>
+										))}
+									</Stack>
+								)}
+							</Stack>
 						}
 					/>
 					<Stack
@@ -153,19 +217,19 @@ const EditUserPage = () => {
 						</Button>
 					</Stack>
 				</Stack>
-				<DialogInput
-					open={showDeleteDialog}
-					title={t("pages.editUser.dialog.removeUser.title")}
-					content={t("pages.editUser.dialog.removeUser.content", {
-						name: `${user?.firstName} ${user?.lastName}`,
-					})}
-					onCancel={() => setShowDeleteDialog(false)}
-					onConfirm={handleDeleteUser}
-					confirmText={t("common.buttons.removeUser")}
-					loading={isDeleting}
-				/>
-			</BasePage>
-		</FormProvider>
+			</form>
+			<DialogInput
+				open={showDeleteDialog}
+				title={t("pages.editUser.dialog.removeUser.title")}
+				content={t("pages.editUser.dialog.removeUser.content", {
+					name: `${user?.firstName} ${user?.lastName}`,
+				})}
+				onCancel={() => setShowDeleteDialog(false)}
+				onConfirm={handleDeleteUser}
+				confirmText={t("common.buttons.removeUser")}
+				loading={isDeleting}
+			/>
+		</BasePage>
 	);
 };
 

client/src/Pages/Account/TabPassword.tsx

@@ -1,15 +1,13 @@
 import { Stack } from "@mui/material";
 import { ConfigBox } from "@/Components/design-elements";
-import { Button } from "@/Components/inputs";
+import { TextField, Button } from "@/Components/inputs";
 
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@mui/material";
-import { useForm, FormProvider } from "react-hook-form";
+import { useForm, Controller } from "react-hook-form";
 import { usePasswordForm } from "@/Hooks/usePasswordForm";
 import { usePatch } from "@/Hooks/UseApi";
 import type { PasswordFormData } from "@/Validation/password";
-import { FormTextField } from "@/Components/inputs/forms/FormTextField";
-import { LAYOUT } from "@/Utils/Theme/constants";
 
 export const TabPassword = () => {
 	const { t } = useTranslation();
@@ -17,11 +15,10 @@ export const TabPassword = () => {
 	const { resolver, defaults } = usePasswordForm();
 	const { patch, loading } = usePatch<FormData, void>();
 
-	const form = useForm<PasswordFormData>({
+	const { control, handleSubmit, reset } = useForm<PasswordFormData>({
 		resolver,
 		defaultValues: defaults,
 	});
-	const { handleSubmit, reset } = form;
 
 	const onSubmit = async (data: PasswordFormData) => {
 		const fd = new FormData();
@@ -35,61 +32,85 @@ export const TabPassword = () => {
 	};
 
 	return (
-		<FormProvider {...form}>
-			<Stack
-				gap={theme.spacing(LAYOUT.MD)}
-				component="form"
-				onSubmit={handleSubmit(onSubmit)}
-			>
-				<ConfigBox
-					title={t("pages.account.form.currentPassword.title")}
-					subtitle={t("pages.account.form.currentPassword.description")}
-					rightContent={
-						<FormTextField
-							name="currentPassword"
-							type="password"
-							autoComplete="current-password"
-							fieldLabel={t("pages.account.form.currentPassword.option.label")}
-							placeholder={t("pages.account.form.currentPassword.option.placeholder")}
+		<Stack
+			gap={theme.spacing(8)}
+			component="form"
+			onSubmit={handleSubmit(onSubmit)}
+		>
+			<ConfigBox
+				title={t("pages.account.form.currentPassword.title")}
+				subtitle={t("pages.account.form.currentPassword.description")}
+				rightContent={
+					<Controller
+						name="currentPassword"
+						control={control}
+						render={({ field, fieldState }) => (
+							<TextField
+								{...field}
+								type="password"
+								fieldLabel={t("pages.account.form.currentPassword.option.label")}
+								placeholder={t("pages.account.form.currentPassword.option.placeholder")}
+								autoComplete="current-password"
+								error={!!fieldState.error}
+								helperText={fieldState.error?.message ?? ""}
+							/>
+						)}
+					/>
+				}
+			/>
+			<ConfigBox
+				title={t("pages.account.form.newPassword.title")}
+				subtitle={t("pages.account.form.newPassword.description")}
+				rightContent={
+					<Stack gap={theme.spacing(8)}>
+						<Controller
+							name="newPassword"
+							control={control}
+							render={({ field, fieldState }) => (
+								<TextField
+									{...field}
+									type="password"
+									fieldLabel={t(
+										"pages.account.form.newPassword.option.newPassword.label"
+									)}
+									placeholder={t(
+										"pages.account.form.newPassword.option.newPassword.placeholder"
+									)}
+									autoComplete="new-password"
+									error={!!fieldState.error}
+									helperText={fieldState.error?.message ?? ""}
+								/>
+							)}
 						/>
-					}
-				/>
-				<ConfigBox
-					title={t("pages.account.form.newPassword.title")}
-					subtitle={t("pages.account.form.newPassword.description")}
-					rightContent={
-						<Stack gap={theme.spacing(LAYOUT.MD)}>
-							<FormTextField
-								name="newPassword"
-								type="password"
-								autoComplete="new-password"
-								fieldLabel={t("pages.account.form.newPassword.option.newPassword.label")}
-								placeholder={t(
-									"pages.account.form.newPassword.option.newPassword.placeholder"
-								)}
-							/>
-							<FormTextField
-								name="confirm"
-								type="password"
-								autoComplete="new-password"
-								fieldLabel={t("pages.account.form.newPassword.option.confirm.label")}
-								placeholder={t(
-									"pages.account.form.newPassword.option.confirm.placeholder"
-								)}
-							/>
-						</Stack>
-					}
-				/>
-				<Button
-					type="submit"
-					variant="contained"
-					color="primary"
-					loading={loading}
-					sx={{ alignSelf: "flex-end", minWidth: 100 }}
-				>
-					{t("common.buttons.save")}
-				</Button>
-			</Stack>
-		</FormProvider>
+						<Controller
+							name="confirm"
+							control={control}
+							render={({ field, fieldState }) => (
+								<TextField
+									{...field}
+									type="password"
+									fieldLabel={t("pages.account.form.newPassword.option.confirm.label")}
+									placeholder={t(
+										"pages.account.form.newPassword.option.confirm.placeholder"
+									)}
+									autoComplete="new-password"
+									error={!!fieldState.error}
+									helperText={fieldState.error?.message ?? ""}
+								/>
+							)}
+						/>
+					</Stack>
+				}
+			/>
+			<Button
+				type="submit"
+				variant="contained"
+				color="primary"
+				loading={loading}
+				sx={{ alignSelf: "flex-end", minWidth: 100 }}
+			>
+				{t("common.buttons.save")}
+			</Button>
+		</Stack>
 	);
 };

client/src/Pages/Account/TabProfile.tsx

@@ -1,11 +1,11 @@
 import { Stack } from "@mui/material";
 import { ConfigBox } from "@/Components/design-elements";
-import { Button } from "@/Components/inputs";
+import { TextField, Button } from "@/Components/inputs";
 import { ImageUpload } from "@/Components/inputs";
 
 import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import { useForm, FormProvider } from "react-hook-form";
+import { useForm, Controller } from "react-hook-form";
 import { useSelector, useDispatch } from "react-redux";
 import { useProfileForm } from "@/Hooks/useProfileForm";
 import { usePatch } from "@/Hooks/UseApi";
@@ -13,8 +13,6 @@ import { setUser } from "@/Features/Auth/authSlice";
 import type { ProfileFormData } from "@/Validation/profile";
 import type { RootState } from "@/Types/state";
 import type { User } from "@/Types/User";
-import { FormTextField } from "@/Components/inputs/forms/FormTextField";
-import { LAYOUT } from "@/Utils/Theme/constants";
 
 export const TabProfile = () => {
 	const theme = useTheme();
@@ -24,7 +22,7 @@ export const TabProfile = () => {
 	const { resolver, defaults } = useProfileForm();
 	const { patch, loading: patchLoading } = usePatch<FormData, User>();
 
-	const form = useForm<ProfileFormData>({
+	const { control, handleSubmit, setValue, watch } = useForm<ProfileFormData>({
 		resolver,
 		defaultValues: {
 			firstName: user?.firstName ?? defaults.firstName,
@@ -33,7 +31,7 @@ export const TabProfile = () => {
 			deleteProfileImage: defaults.deleteProfileImage,
 		},
 	});
-	const { handleSubmit, setValue, watch } = form;
+
 	const currentImage = watch("profileImage");
 	const deleteImage = watch("deleteProfileImage");
 
@@ -76,52 +74,66 @@ export const TabProfile = () => {
 	};
 
 	return (
-		<FormProvider {...form}>
-			<Stack
-				gap={theme.spacing(LAYOUT.MD)}
-				component="form"
-				onSubmit={handleSubmit(onSubmit)}
-			>
-				<ConfigBox
-					title={t("pages.account.form.name.title")}
-					subtitle={t("pages.account.form.name.description")}
-					rightContent={
-						<Stack gap={theme.spacing(LAYOUT.MD)}>
-							<FormTextField
-								name="firstName"
-								autoComplete="given-name"
-								fieldLabel={t("common.form.name.option.firstName.label")}
-								placeholder={t("common.form.name.option.firstName.placeholder")}
-							/>
-							<FormTextField
-								name="lastName"
-								autoComplete="family-name"
-								fieldLabel={t("common.form.name.option.lastName.label")}
-								placeholder={t("common.form.name.option.lastName.placeholder")}
-							/>
-						</Stack>
-					}
-				/>
-				<ConfigBox
-					title={t("pages.account.form.photo.title")}
-					subtitle={t("pages.account.form.photo.description")}
-					rightContent={
-						<ImageUpload
-							src={getCurrentImageSrc()}
-							onChange={handleImageChange}
+		<Stack
+			gap={theme.spacing(8)}
+			component="form"
+			onSubmit={handleSubmit(onSubmit)}
+		>
+			<ConfigBox
+				title={t("pages.account.form.name.title")}
+				subtitle={t("pages.account.form.name.description")}
+				rightContent={
+					<Stack gap={theme.spacing(8)}>
+						<Controller
+							name="firstName"
+							control={control}
+							render={({ field, fieldState }) => (
+								<TextField
+									{...field}
+									fieldLabel={t("common.form.name.option.firstName.label")}
+									placeholder={t("common.form.name.option.firstName.placeholder")}
+									autoComplete="given-name"
+									error={!!fieldState.error}
+									helperText={fieldState.error?.message ?? ""}
+								/>
+							)}
 						/>
-					}
-				/>
-				<Button
-					type="submit"
-					variant="contained"
-					color="primary"
-					loading={patchLoading}
-					sx={{ alignSelf: "flex-end", minWidth: 100 }}
-				>
-					{t("common.buttons.save")}
-				</Button>
-			</Stack>
-		</FormProvider>
+						<Controller
+							name="lastName"
+							control={control}
+							render={({ field, fieldState }) => (
+								<TextField
+									{...field}
+									fieldLabel={t("common.form.name.option.lastName.label")}
+									placeholder={t("common.form.name.option.lastName.placeholder")}
+									autoComplete="family-name"
+									error={!!fieldState.error}
+									helperText={fieldState.error?.message ?? ""}
+								/>
+							)}
+						/>
+					</Stack>
+				}
+			/>
+			<ConfigBox
+				title={t("pages.account.form.photo.title")}
+				subtitle={t("pages.account.form.photo.description")}
+				rightContent={
+					<ImageUpload
+						src={getCurrentImageSrc()}
+						onChange={handleImageChange}
+					/>
+				}
+			/>
+			<Button
+				type="submit"
+				variant="contained"
+				color="primary"
+				loading={patchLoading}
+				sx={{ alignSelf: "flex-end", minWidth: 100 }}
+			>
+				{t("common.buttons.save")}
+			</Button>
+		</Stack>
 	);
 };

client/src/Pages/Account/components/AddTeamMemberDialog.tsx

@@ -1,16 +1,15 @@
 import { Stack } from "@mui/material";
+import MenuItem from "@mui/material/MenuItem";
 import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import { useForm, FormProvider } from "react-hook-form";
+import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
-import { Dialog } from "@/Components/inputs";
+import { Dialog, TextField, Select } from "@/Components/inputs";
 import { useAddTeamMemberForm } from "@/Hooks/useAddTeamMemberForm";
 import type { AddTeamMemberFormData } from "@/Validation/addTeamMember";
-import type { User } from "@/Types/User";
+import type { UserRole, User } from "@/Types/User";
 import { usePost } from "@/Hooks/UseApi";
 import { LAYOUT } from "@/Utils/Theme/constants";
-import { FormTextField } from "@/Components/inputs/forms/FormTextField";
-import { RoleSelectField } from "./RoleSelectField";
 
 interface AddTeamMemberDialogProps {
 	open: boolean;
@@ -36,13 +35,17 @@ export const AddTeamMemberDialog = ({
 	const { schema, defaults } = useAddTeamMemberForm();
 	const { post, loading } = usePost<RegisterPayload, User>();
 
-	const form = useForm<AddTeamMemberFormData>({
+	const { control, handleSubmit, reset, setError } = useForm<AddTeamMemberFormData>({
 		resolver: zodResolver(schema),
 		defaultValues: defaults,
 		values: defaults,
 	});
 
-	const { handleSubmit, reset, setError } = form;
+	const roleOptions: { value: UserRole; label: string }[] = [
+		{ value: "admin", label: t("common.auth.roles.admin") },
+		{ value: "user", label: t("common.auth.roles.user") },
+		{ value: "demo", label: t("common.auth.roles.demo") },
+	];
 
 	const handleClose = () => {
 		reset();
@@ -52,7 +55,7 @@ export const AddTeamMemberDialog = ({
 	const onSubmit = async (data: AddTeamMemberFormData) => {
 		if (loading) return;
 
-		const { confirm: _confirm, ...userData } = data;
+		const { confirm, ...userData } = data;
 		const payload: RegisterPayload = userData;
 
 		const result = await post("/auth/users", payload);
@@ -69,64 +72,124 @@ export const AddTeamMemberDialog = ({
 	};
 
 	return (
-		<FormProvider {...form}>
-			<Dialog
-				open={open}
-				title={t("pages.account.team.addMember.title")}
-				content={t("pages.account.team.addMember.description")}
-				onCancel={handleClose}
-				onConfirm={handleSubmit(onSubmit)}
-				confirmText={t("common.buttons.addMember")}
-				loading={loading}
-				maxWidth="sm"
-				fullWidth
-			>
-				<Stack gap={theme.spacing(LAYOUT.XS)}>
-					<Stack
-						direction="row"
-						gap={theme.spacing(LAYOUT.XS)}
-					>
-						<FormTextField
-							name="firstName"
-							fieldLabel={t("common.form.name.option.firstName.label")}
-							placeholder={t("common.form.name.option.firstName.placeholder")}
-						/>
-						<FormTextField
-							name="lastName"
-							fieldLabel={t("common.form.name.option.lastName.label")}
-							placeholder={t("common.form.name.option.lastName.placeholder")}
-						/>
-					</Stack>
-					<FormTextField
-						name="email"
-						type="email"
-						fieldLabel={t("common.form.email.option.email.label")}
-						placeholder={t("common.form.email.option.email.placeholder")}
+		<Dialog
+			open={open}
+			title={t("pages.account.team.addMember.title")}
+			content={t("pages.account.team.addMember.description")}
+			onCancel={handleClose}
+			onConfirm={handleSubmit(onSubmit)}
+			confirmText={t("common.buttons.addMember")}
+			loading={loading}
+			maxWidth="sm"
+			fullWidth
+		>
+			<Stack gap={theme.spacing(LAYOUT.XS)}>
+				<Stack
+					direction="row"
+					gap={theme.spacing(LAYOUT.XS)}
+				>
+					<Controller
+						name="firstName"
+						control={control}
+						render={({ field, fieldState }) => (
+							<TextField
+								{...field}
+								fieldLabel={t("common.form.name.option.firstName.label")}
+								placeholder={t("common.form.name.option.firstName.placeholder")}
+								error={!!fieldState.error}
+								helperText={fieldState.error?.message ?? ""}
+								sx={{ flex: 1 }}
+							/>
+						)}
+					/>
+					<Controller
+						name="lastName"
+						control={control}
+						render={({ field, fieldState }) => (
+							<TextField
+								{...field}
+								fieldLabel={t("common.form.name.option.lastName.label")}
+								placeholder={t("common.form.name.option.lastName.placeholder")}
+								error={!!fieldState.error}
+								helperText={fieldState.error?.message ?? ""}
+								sx={{ flex: 1 }}
+							/>
+						)}
 					/>
-
-					<RoleSelectField />
-
-					<Stack
-						direction="row"
-						gap={theme.spacing(LAYOUT.XS)}
-					>
-						<FormTextField
-							name="password"
-							fieldLabel={t("pages.auth.common.form.option.password.label")}
-							placeholder={t("pages.auth.common.form.option.password.placeholder")}
-							type="password"
-							sx={{ flex: 1 }}
-						/>
-
-						<FormTextField
-							name="confirm"
-							fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
-							placeholder={t("pages.auth.common.form.option.password.placeholder")}
-							type="password"
-						/>
-					</Stack>
 				</Stack>
-			</Dialog>
-		</FormProvider>
+				<Controller
+					name="email"
+					control={control}
+					render={({ field, fieldState }) => (
+						<TextField
+							{...field}
+							fieldLabel={t("common.form.email.option.email.label")}
+							placeholder={t("common.form.email.option.email.placeholder")}
+							type="email"
+							error={!!fieldState.error}
+							helperText={fieldState.error?.message ?? ""}
+							fullWidth
+						/>
+					)}
+				/>
+				<Controller
+					name="role"
+					control={control}
+					render={({ field }) => (
+						<Select
+							{...field}
+							value={field.value[0] ?? "user"}
+							onChange={(e) => field.onChange([e.target.value])}
+							fieldLabel={t("common.form.role.option.role.label")}
+							fullWidth
+						>
+							{roleOptions.map((option) => (
+								<MenuItem
+									key={option.value}
+									value={option.value}
+								>
+									{option.label}
+								</MenuItem>
+							))}
+						</Select>
+					)}
+				/>
+				<Stack
+					direction="row"
+					gap={theme.spacing(LAYOUT.XS)}
+				>
+					<Controller
+						name="password"
+						control={control}
+						render={({ field, fieldState }) => (
+							<TextField
+								{...field}
+								fieldLabel={t("pages.auth.common.form.option.password.label")}
+								placeholder={t("pages.auth.common.form.option.password.placeholder")}
+								type="password"
+								error={!!fieldState.error}
+								helperText={fieldState.error?.message ?? ""}
+								sx={{ flex: 1 }}
+							/>
+						)}
+					/>
+					<Controller
+						name="confirm"
+						control={control}
+						render={({ field, fieldState }) => (
+							<TextField
+								{...field}
+								fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
+								placeholder={t("pages.auth.common.form.option.password.placeholder")}
+								type="password"
+								error={!!fieldState.error}
+								helperText={fieldState.error?.message ?? ""}
+								sx={{ flex: 1 }}
+							/>
+						)}
+					/>
+				</Stack>
+			</Stack>
+		</Dialog>
 	);
 };

client/src/Pages/Account/components/InviteTeamMemberDialog.tsx

@@ -1,16 +1,16 @@
 import { Stack } from "@mui/material";
-import { useTheme, Typography } from "@mui/material";
+import MenuItem from "@mui/material/MenuItem";
+import { useTheme, FormHelperText, Typography } from "@mui/material";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useForm, FormProvider } from "react-hook-form";
-import { Dialog, TextField, Button } from "@/Components/inputs";
+import { useForm, Controller } from "react-hook-form";
+import { Dialog, TextField, Select, Button } from "@/Components/inputs";
+import type { UserRole } from "@/Types/User";
 import { useInviteForm } from "@/Hooks/useInviteForm";
 import type { InviteFormData } from "@/Validation/invite";
 import { usePost } from "@/Hooks/UseApi";
 import { LAYOUT } from "@/Utils/Theme/constants";
 import { runtimeConfig } from "@/Utils/runtimeConfig";
-import { FormTextField } from "@/Components/inputs/forms/FormTextField";
-import { RoleSelectField } from "./RoleSelectField";
 
 const CLIENT_HOST = runtimeConfig.clientHost || import.meta.env.VITE_APP_CLIENT_HOST;
 
@@ -31,12 +31,11 @@ export const InviteTeamMemberDialog = ({
 	const { t } = useTranslation();
 	const { resolver, defaults } = useInviteForm();
 
-	const form = useForm<InviteFormData>({
+	const { control, handleSubmit, reset } = useForm<InviteFormData>({
 		resolver,
 		defaultValues: defaults,
 		values: defaults,
 	});
-	const { handleSubmit, reset } = form;
 
 	const { post: generateToken, loading: generateLoading } = usePost<
 		InviteFormData,
@@ -48,6 +47,12 @@ export const InviteTeamMemberDialog = ({
 	>();
 	const [inviteLink, setInviteLink] = useState<string | null>(null);
 
+	const roleOptions: { value: UserRole; label: string }[] = [
+		{ value: "admin", label: t("common.auth.roles.admin") },
+		{ value: "user", label: t("common.auth.roles.user") },
+		{ value: "demo", label: t("common.auth.roles.demo") },
+	];
+
 	const handleGenerateToken = async (data: InviteFormData) => {
 		const result = await generateToken("/invite", data);
 		if (result?.data?.token) {
@@ -71,55 +76,88 @@ export const InviteTeamMemberDialog = ({
 	};
 
 	return (
-		<FormProvider {...form}>
-			<Dialog
-				open={open}
-				title={t("pages.account.team.invite.title")}
-				content={t("pages.account.team.invite.description")}
-				onCancel={handleClose}
-				onConfirm={handleSubmit(handleSendInvite)}
-				confirmText={t("common.buttons.sendInvite")}
-				loading={sendLoading || generateLoading}
-				maxWidth="sm"
-				fullWidth
-				additionalButtons={
-					<Button
-						variant="contained"
-						color="primary"
-						onClick={handleSubmit(handleGenerateToken)}
-						loading={generateLoading || sendLoading}
-					>
-						{t("common.buttons.generateToken")}
-					</Button>
-				}
-			>
-				<Stack gap={theme.spacing(LAYOUT.XS)}>
-					<FormTextField
-						name="email"
-						type="email"
-						fieldLabel={t("common.form.email.option.email.label")}
-						placeholder={t("common.form.email.option.email.placeholder")}
-					/>
-
-					<RoleSelectField />
-					{inviteLink && (
+		<Dialog
+			open={open}
+			title={t("pages.account.team.invite.title")}
+			content={t("pages.account.team.invite.description")}
+			onCancel={handleClose}
+			onConfirm={handleSubmit(handleSendInvite)}
+			confirmText={t("common.buttons.sendInvite")}
+			loading={sendLoading || generateLoading}
+			maxWidth="sm"
+			fullWidth
+			additionalButtons={
+				<Button
+					variant="contained"
+					color="primary"
+					onClick={handleSubmit(handleGenerateToken)}
+					loading={generateLoading || sendLoading}
+				>
+					{t("common.buttons.generateToken")}
+				</Button>
+			}
+		>
+			<Stack gap={theme.spacing(LAYOUT.XS)}>
+				<Controller
+					name="email"
+					control={control}
+					render={({ field, fieldState }) => (
+						<TextField
+							{...field}
+							fieldLabel={t("common.form.email.option.email.label")}
+							placeholder={t("common.form.email.option.email.placeholder")}
+							type="email"
+							fullWidth
+							error={!!fieldState.error}
+							helperText={fieldState.error?.message ?? ""}
+						/>
+					)}
+				/>
+				<Controller
+					name="role"
+					control={control}
+					render={({ field: { value, onChange, ...field }, fieldState }) => (
 						<>
-							<Typography variant="body2">
-								{t("pages.account.team.invite.linkLabel")}
-							</Typography>
-							<TextField
-								value={inviteLink}
+							<Select
+								{...field}
+								value={Array.isArray(value) ? (value[0] ?? "") : ""}
+								onChange={(e) => onChange([e.target.value as UserRole])}
+								fieldLabel={t("common.form.role.option.role.label")}
 								fullWidth
-								slotProps={{
-									input: {
-										readOnly: true,
-									},
-								}}
-							/>
+								error={!!fieldState.error}
+							>
+								{roleOptions.map((option) => (
+									<MenuItem
+										key={option.value}
+										value={option.value}
+									>
+										{option.label}
+									</MenuItem>
+								))}
+							</Select>
+							{fieldState.error && (
+								<FormHelperText error>{fieldState.error.message}</FormHelperText>
+							)}
 						</>
 					)}
-				</Stack>
-			</Dialog>
-		</FormProvider>
+				/>
+				{inviteLink && (
+					<>
+						<Typography variant="body2">
+							{t("pages.account.team.invite.linkLabel")}
+						</Typography>
+						<TextField
+							value={inviteLink}
+							fullWidth
+							slotProps={{
+								input: {
+									readOnly: true,
+								},
+							}}
+						/>
+					</>
+				)}
+			</Stack>
+		</Dialog>
 	);
 };

client/src/Pages/Account/components/RoleSelectField.tsx

@@ -1,45 +0,0 @@
-import MenuItem from "@mui/material/MenuItem";
-import FormHelperText from "@mui/material/FormHelperText";
-import { useController } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { Select } from "@/Components/inputs";
-import { UserRoles } from "@/Types/User";
-import type { UserRole } from "@/Types/User";
-
-export const RoleSelectField = () => {
-	const { t } = useTranslation();
-	const { field, fieldState } = useController<{ role: UserRole[] }, "role">({
-		name: "role",
-	});
-
-	const editableRoles = UserRoles.filter((role) => role !== "superadmin");
-	const roleOptions: { value: UserRole; label: string }[] = editableRoles.map((role) => ({
-		value: role,
-		label: t(`common.auth.roles.${role}`),
-	}));
-
-	return (
-		<>
-			<Select
-				{...field}
-				value={field.value[0] ?? "user"}
-				onChange={(e) => field.onChange([e.target.value])}
-				fieldLabel={t("common.form.role.option.role.label")}
-				fullWidth
-				error={!!fieldState.error}
-			>
-				{roleOptions.map((option) => (
-					<MenuItem
-						key={option.value}
-						value={option.value}
-					>
-						{option.label}
-					</MenuItem>
-				))}
-			</Select>
-			{fieldState.error && (
-				<FormHelperText error>{fieldState.error.message}</FormHelperText>
-			)}
-		</>
-	);
-};

client/src/Pages/Auth/Login/index.tsx

@@ -1,9 +1,9 @@
 import { BaseAuthPage, TextLink } from "@/Components/design-elements";
-import { Button } from "@/Components/inputs";
+import { Button, TextField } from "@/Components/inputs";
 
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useForm, FormProvider } from "react-hook-form";
+import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
 import { useLoginForm } from "@/Hooks/useLoginForm";
 import type { LoginFormData } from "@/Validation/login";
@@ -11,7 +11,6 @@ import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { setAuthState } from "@/Features/Auth/authSlice";
 import { useLazyGet, usePost } from "@/Hooks/UseApi";
-import { FormTextField } from "@/Components/inputs/forms/FormTextField";
 
 const LoginPage = () => {
 	const { t } = useTranslation();
@@ -32,13 +31,11 @@ const LoginPage = () => {
 
 	const { schema, defaults } = useLoginForm();
 
-	const form = useForm<LoginFormData>({
+	const { control, handleSubmit } = useForm<LoginFormData>({
 		resolver: zodResolver(schema),
 		defaultValues: defaults,
 	});
 
-	const { handleSubmit } = form;
-
 	if (isCheckingAdmin) return null;
 
 	const onSubmit = async (data: LoginFormData) => {
@@ -53,39 +50,53 @@ const LoginPage = () => {
 	};
 
 	return (
-		<FormProvider {...form}>
-			<BaseAuthPage
-				component="form"
-				onSubmit={handleSubmit(onSubmit)}
-				title={t("pages.auth.login.title")}
-				subtitle={t("pages.auth.login.subtitle")}
+		<BaseAuthPage
+			component="form"
+			onSubmit={handleSubmit(onSubmit)}
+			title={t("pages.auth.login.title")}
+			subtitle={t("pages.auth.login.subtitle")}
+		>
+			<Controller
+				name="email"
+				control={control}
+				render={({ field, fieldState }) => (
+					<TextField
+						{...field}
+						fieldLabel={t("pages.auth.common.form.option.email.label")}
+						placeholder={t("pages.auth.common.form.option.email.placeholder")}
+						error={!!fieldState.error}
+						helperText={fieldState.error ? t(fieldState.error.message ?? "") : ""}
+					/>
+				)}
+			/>
+			<Controller
+				name="password"
+				control={control}
+				render={({ field, fieldState }) => (
+					<TextField
+						{...field}
+						type="password"
+						fieldLabel={t("pages.auth.common.form.option.password.label")}
+						placeholder={t("pages.auth.common.form.option.password.placeholder")}
+						error={!!fieldState.error}
+						helperText={fieldState.error ? t(fieldState.error.message ?? "") : ""}
+					/>
+				)}
+			/>
+			<Button
+				variant="contained"
+				type="submit"
+				loading={loading}
 			>
-				<FormTextField
-					name="email"
-					fieldLabel={t("pages.auth.common.form.option.email.label")}
-					placeholder={t("pages.auth.common.form.option.email.placeholder")}
-				/>
-				<FormTextField
-					name="password"
-					type="password"
-					fieldLabel={t("pages.auth.common.form.option.password.label")}
-					placeholder={t("pages.auth.common.form.option.password.placeholder")}
-				/>
-				<Button
-					variant="contained"
-					type="submit"
-					loading={loading}
-				>
-					{t("pages.auth.login.submit")}
-				</Button>
-				<TextLink
-					alignSelf={"center"}
-					text={t("pages.auth.login.links.forgotPassword.text")}
-					linkText={t("pages.auth.login.links.forgotPassword.linkText")}
-					href="/forgot-password"
-				/>
-			</BaseAuthPage>
-		</FormProvider>
+				{t("pages.auth.login.submit")}
+			</Button>
+			<TextLink
+				alignSelf={"center"}
+				text={t("pages.auth.login.links.forgotPassword.text")}
+				linkText={t("pages.auth.login.links.forgotPassword.linkText")}
+				href="/forgot-password"
+			/>
+		</BaseAuthPage>
 	);
 };
 

client/src/Pages/Auth/Recovery/index.tsx

@@ -1,13 +1,12 @@
-import { Button } from "@/Components/inputs";
+import { Button, TextField } from "@/Components/inputs";
 import { BaseAuthPage, TextLink } from "@/Components/design-elements";
 
-import { useForm, FormProvider } from "react-hook-form";
+import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
 import { useRecoveryForm } from "@/Hooks/useRecoveryForm";
 import type { RecoveryFormData } from "@/Validation/recovery";
 import { usePost } from "@/Hooks/UseApi";
 import { useTranslation } from "react-i18next";
-import { FormTextField } from "@/Components/inputs/forms/FormTextField";
 
 const ForgotPasswordPage = () => {
 	const { t } = useTranslation();
@@ -15,11 +14,10 @@ const ForgotPasswordPage = () => {
 
 	const { schema, defaults } = useRecoveryForm();
 
-	const form = useForm<RecoveryFormData>({
+	const { control, handleSubmit } = useForm<RecoveryFormData>({
 		resolver: zodResolver(schema),
 		defaultValues: defaults,
 	});
-	const { handleSubmit } = form;
 
 	const onSubmit = async (data: RecoveryFormData) => {
 		if (loading) return;
@@ -32,33 +30,39 @@ const ForgotPasswordPage = () => {
 	};
 
 	return (
-		<FormProvider {...form}>
-			<BaseAuthPage
-				component="form"
-				onSubmit={handleSubmit(onSubmit)}
-				title={t("pages.auth.forgotPassword.title")}
-				subtitle={t("pages.auth.forgotPassword.subtitle")}
+		<BaseAuthPage
+			component="form"
+			onSubmit={handleSubmit(onSubmit)}
+			title={t("pages.auth.forgotPassword.title")}
+			subtitle={t("pages.auth.forgotPassword.subtitle")}
+		>
+			<Controller
+				name="email"
+				control={control}
+				render={({ field, fieldState }) => (
+					<TextField
+						{...field}
+						fieldLabel={t("pages.auth.common.form.option.email.label")}
+						placeholder={t("pages.auth.common.form.option.email.placeholder")}
+						error={!!fieldState.error}
+						helperText={fieldState.error ? t(fieldState.error.message ?? "") : ""}
+					/>
+				)}
+			/>
+			<Button
+				variant="contained"
+				type="submit"
+				loading={loading}
 			>
-				<FormTextField
-					name="email"
-					fieldLabel={t("pages.auth.common.form.option.email.label")}
-					placeholder={t("pages.auth.common.form.option.email.placeholder")}
-				/>
-				<Button
-					variant="contained"
-					type="submit"
-					loading={loading}
-				>
-					{t("pages.auth.forgotPassword.submit")}
-				</Button>
-				<TextLink
-					alignSelf={"center"}
-					text={t("pages.auth.forgotPassword.links.login.text")}
-					linkText={t("pages.auth.forgotPassword.links.login.linkText")}
-					href="/login"
-				/>
-			</BaseAuthPage>
-		</FormProvider>
+				{t("pages.auth.forgotPassword.submit")}
+			</Button>
+			<TextLink
+				alignSelf={"center"}
+				text={t("pages.auth.forgotPassword.links.login.text")}
+				linkText={t("pages.auth.forgotPassword.links.login.linkText")}
+				href="/login"
+			/>
+		</BaseAuthPage>
 	);
 };
 

client/src/Pages/Auth/Register/index.tsx

@@ -1,7 +1,7 @@
 import { BaseAuthPage } from "@/Components/design-elements";
-import { Button } from "@/Components/inputs";
+import { Button, TextField } from "@/Components/inputs";
 import Alert from "@mui/material/Alert";
-import { useForm, FormProvider } from "react-hook-form";
+import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
 import { useRegisterForm } from "@/Hooks/useRegisterForm";
 import type { RegisterFormData } from "@/Validation/register";
@@ -12,7 +12,6 @@ import { useDispatch } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
 import type { AuthResponse } from "@/Types/User";
 import { useEffect, useRef, useState } from "react";
-import { FormTextField } from "@/Components/inputs/forms/FormTextField";
 
 interface RegisterPayload {
 	user: Omit<RegisterFormData, "confirm">;
@@ -46,11 +45,10 @@ const RegisterPage = () => {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	const form = useForm<RegisterFormData>({
+	const { control, handleSubmit, setError, reset } = useForm<RegisterFormData>({
 		resolver: zodResolver(schema),
 		defaultValues: defaults,
 	});
-	const { handleSubmit, setError, reset } = form;
 
 	useEffect(() => {
 		if (!token || hasVerified.current) return;
@@ -66,14 +64,14 @@ const RegisterPage = () => {
 				navigate("/register", { replace: true });
 			}
 		});
-	}, [token, defaults, navigate, reset, verifyToken]);
+	}, [token]);
 
 	if (isCheckingAdmin) return null;
 
 	const onSubmit = async (data: RegisterFormData) => {
 		if (loading) return;
 
-		const { confirm: _confirm, ...userData } = data;
+		const { confirm, ...userData } = data;
 		const payload: RegisterPayload = { user: userData };
 		if (token) {
 			payload.token = token;
@@ -91,70 +89,105 @@ const RegisterPage = () => {
 	};
 
 	return (
-		<FormProvider {...form}>
-			<BaseAuthPage
-				component="form"
-				onSubmit={handleSubmit(onSubmit)}
-				title={t("pages.auth.register.title")}
-				subtitle={t("pages.auth.register.subtitle")}
-			>
-				{!token && (
-					<Alert
-						severity="info"
-						icon={false}
-						sx={(theme) => ({
-							fontSize: 13,
-							lineHeight: 1.55,
-							color: theme.palette.text.secondary,
-							backgroundColor: theme.palette.action.hover,
-							border: `1px solid ${theme.palette.divider}`,
-							borderRadius: 1,
-							"& .MuiAlert-message": { padding: 0 },
-						})}
-					>
-						{t("pages.auth.register.setupNotice")}
-					</Alert>
-				)}
-				<FormTextField
-					name="firstName"
-					fieldLabel={t("common.form.name.option.firstName.label")}
-					placeholder={t("common.form.name.option.firstName.placeholder")}
-				/>
-				<FormTextField
-					name="lastName"
-					fieldLabel={t("common.form.name.option.lastName.label")}
-					placeholder={t("common.form.name.option.lastName.placeholder")}
-				/>
-				<FormTextField
-					name="email"
-					disabled={!!token}
-					fieldLabel={t("common.form.email.option.email.label")}
-					placeholder={t("common.form.email.option.email.placeholder")}
-				/>
-
-				<FormTextField
-					name="password"
-					type="password"
-					fieldLabel={t("pages.auth.common.form.option.password.label")}
-					placeholder={t("pages.auth.common.form.option.password.placeholder")}
-				/>
-
-				<FormTextField
-					name="confirm"
-					type="password"
-					fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
-					placeholder={t("pages.auth.common.form.option.password.placeholder")}
-				/>
-
-				<Button
-					variant="contained"
-					type="submit"
-					loading={loading}
+		<BaseAuthPage
+			component="form"
+			onSubmit={handleSubmit(onSubmit)}
+			title={t("pages.auth.register.title")}
+			subtitle={t("pages.auth.register.subtitle")}
+		>
+			{!token && (
+				<Alert
+					severity="info"
+					icon={false}
+					sx={(theme) => ({
+						fontSize: 13,
+						lineHeight: 1.55,
+						color: theme.palette.text.secondary,
+						backgroundColor: theme.palette.action.hover,
+						border: `1px solid ${theme.palette.divider}`,
+						borderRadius: 1,
+						"& .MuiAlert-message": { padding: 0 },
+					})}
 				>
-					{t("pages.auth.register.submit")}
-				</Button>
-			</BaseAuthPage>
-		</FormProvider>
+					{t("pages.auth.register.setupNotice")}
+				</Alert>
+			)}
+			<Controller
+				name="firstName"
+				control={control}
+				render={({ field, fieldState }) => (
+					<TextField
+						{...field}
+						fieldLabel={t("common.form.name.option.firstName.label")}
+						placeholder={t("common.form.name.option.firstName.placeholder")}
+						error={!!fieldState.error}
+						helperText={fieldState.error?.message ?? ""}
+					/>
+				)}
+			/>
+			<Controller
+				name="lastName"
+				control={control}
+				render={({ field, fieldState }) => (
+					<TextField
+						{...field}
+						fieldLabel={t("common.form.name.option.lastName.label")}
+						placeholder={t("common.form.name.option.lastName.placeholder")}
+						error={!!fieldState.error}
+						helperText={fieldState.error?.message ?? ""}
+					/>
+				)}
+			/>
+			<Controller
+				name="email"
+				control={control}
+				render={({ field, fieldState }) => (
+					<TextField
+						{...field}
+						disabled={!!token}
+						fieldLabel={t("common.form.email.option.email.label")}
+						placeholder={t("common.form.email.option.email.placeholder")}
+						error={!!fieldState.error}
+						helperText={fieldState.error?.message ?? ""}
+					/>
+				)}
+			/>
+			<Controller
+				name="password"
+				control={control}
+				render={({ field, fieldState }) => (
+					<TextField
+						{...field}
+						type="password"
+						fieldLabel={t("pages.auth.common.form.option.password.label")}
+						placeholder={t("pages.auth.common.form.option.password.placeholder")}
+						error={!!fieldState.error}
+						helperText={fieldState.error?.message ?? ""}
+					/>
+				)}
+			/>
+			<Controller
+				name="confirm"
+				control={control}
+				render={({ field, fieldState }) => (
+					<TextField
+						{...field}
+						type="password"
+						fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
+						placeholder={t("pages.auth.common.form.option.password.placeholder")}
+						error={!!fieldState.error}
+						helperText={fieldState.error?.message ?? ""}
+					/>
+				)}
+			/>
+			<Button
+				variant="contained"
+				type="submit"
+				loading={loading}
+			>
+				{t("pages.auth.register.submit")}
+			</Button>
+		</BaseAuthPage>
 	);
 };
 

client/src/Pages/Auth/SetNewPassword/index.tsx

@@ -1,9 +1,9 @@
 import { BaseAuthPage, BulletPointCheck, TextLink } from "@/Components/design-elements";
-import { Button } from "@/Components/inputs";
+import { Button, TextField } from "@/Components/inputs";
 import Stack from "@mui/material/Stack";
 import { useTheme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
-import { useForm, FormProvider } from "react-hook-form";
+import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
 import { useSetNewPasswordForm } from "@/Hooks/useSetNewPasswordForm";
 import type { SetNewPasswordFormData } from "@/Validation/setNewPassword";
@@ -12,7 +12,6 @@ import { useParams, useNavigate } from "react-router-dom";
 import { usePost } from "@/Hooks/UseApi";
 import { useDispatch } from "react-redux";
 import { setAuthState } from "@/Features/Auth/authSlice";
-import { FormTextField } from "@/Components/inputs/forms/FormTextField";
 
 const SetNewPasswordPage = () => {
 	const theme = useTheme();
@@ -24,11 +23,11 @@ const SetNewPasswordPage = () => {
 
 	const { schema, defaults } = useSetNewPasswordForm();
 
-	const form = useForm<SetNewPasswordFormData>({
+	const { control, handleSubmit, watch } = useForm<SetNewPasswordFormData>({
 		resolver: zodResolver(schema),
 		defaultValues: defaults,
 	});
-	const { handleSubmit, watch } = form;
+
 	const password = watch("password");
 	const confirm = watch("confirm");
 
@@ -58,68 +57,81 @@ const SetNewPasswordPage = () => {
 	};
 
 	return (
-		<FormProvider {...form}>
-			<BaseAuthPage
-				component="form"
-				onSubmit={handleSubmit(onSubmit)}
-				title={t("pages.auth.setNewPassword.title")}
-				subtitle={t("pages.auth.setNewPassword.subtitle")}
+		<BaseAuthPage
+			component="form"
+			onSubmit={handleSubmit(onSubmit)}
+			title={t("pages.auth.setNewPassword.title")}
+			subtitle={t("pages.auth.setNewPassword.subtitle")}
+		>
+			<Controller
+				name="password"
+				control={control}
+				render={({ field, fieldState }) => (
+					<TextField
+						{...field}
+						type="password"
+						fieldLabel={t("pages.auth.common.form.option.password.label")}
+						placeholder={t("pages.auth.common.form.option.password.placeholder")}
+						error={!!fieldState.error}
+						helperText={fieldState.error?.message ?? ""}
+					/>
+				)}
+			/>
+			<Controller
+				name="confirm"
+				control={control}
+				render={({ field, fieldState }) => (
+					<TextField
+						{...field}
+						type="password"
+						fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
+						placeholder={t("pages.auth.common.form.option.password.placeholder")}
+						error={!!fieldState.error}
+						helperText={fieldState.error?.message ?? ""}
+					/>
+				)}
+			/>
+			<Stack gap={theme.spacing(4)}>
+				<BulletPointCheck
+					text={t("pages.auth.common.passwordRules.length")}
+					variant={getVariant(hasLength)}
+				/>
+				<BulletPointCheck
+					text={t("pages.auth.common.passwordRules.special")}
+					variant={getVariant(hasSpecial)}
+				/>
+				<BulletPointCheck
+					text={t("pages.auth.common.passwordRules.number")}
+					variant={getVariant(hasNumber)}
+				/>
+				<BulletPointCheck
+					text={t("pages.auth.common.passwordRules.uppercase")}
+					variant={getVariant(hasUppercase)}
+				/>
+				<BulletPointCheck
+					text={t("pages.auth.common.passwordRules.lowercase")}
+					variant={getVariant(hasLowercase)}
+				/>
+				<BulletPointCheck
+					text={t("pages.auth.common.passwordRules.match")}
+					variant={getVariant(passwordsMatch)}
+				/>
+			</Stack>
+			<Button
+				variant="contained"
+				type="submit"
+				fullWidth
+				loading={loading}
 			>
-				<FormTextField
-					name="password"
-					type="password"
-					fieldLabel={t("pages.auth.common.form.option.password.label")}
-					placeholder={t("pages.auth.common.form.option.password.placeholder")}
-				/>
-				<FormTextField
-					name="confirm"
-					type="password"
-					fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
-					placeholder={t("pages.auth.common.form.option.password.placeholder")}
-				/>
-
-				<Stack gap={theme.spacing(4)}>
-					<BulletPointCheck
-						text={t("pages.auth.common.passwordRules.length")}
-						variant={getVariant(hasLength)}
-					/>
-					<BulletPointCheck
-						text={t("pages.auth.common.passwordRules.special")}
-						variant={getVariant(hasSpecial)}
-					/>
-					<BulletPointCheck
-						text={t("pages.auth.common.passwordRules.number")}
-						variant={getVariant(hasNumber)}
-					/>
-					<BulletPointCheck
-						text={t("pages.auth.common.passwordRules.uppercase")}
-						variant={getVariant(hasUppercase)}
-					/>
-					<BulletPointCheck
-						text={t("pages.auth.common.passwordRules.lowercase")}
-						variant={getVariant(hasLowercase)}
-					/>
-					<BulletPointCheck
-						text={t("pages.auth.common.passwordRules.match")}
-						variant={getVariant(passwordsMatch)}
-					/>
-				</Stack>
-				<Button
-					variant="contained"
-					type="submit"
-					fullWidth
-					loading={loading}
-				>
-					{t("common.buttons.resetPassword")}
-				</Button>
-				<TextLink
-					alignSelf="center"
-					text={t("pages.auth.forgotPassword.links.login.text")}
-					linkText={t("pages.auth.forgotPassword.links.login.linkText")}
-					href="/login"
-				/>
-			</BaseAuthPage>
-		</FormProvider>
+				{t("common.buttons.resetPassword")}
+			</Button>
+			<TextLink
+				alignSelf="center"
+				text={t("pages.auth.forgotPassword.links.login.text")}
+				linkText={t("pages.auth.forgotPassword.links.login.linkText")}
+				href="/login"
+			/>
+		</BaseAuthPage>
 	);
 };
 

client/src/Pages/Incidents/utils.ts

@@ -1,5 +1,5 @@
 import type { Incident, IncidentSummaryItem } from "@/Types/Incident";
-import { formatDuration } from "@/Utils/TimeUtils";
+import prettyMilliseconds from "pretty-ms";
 
 type IncidentLike = Pick<Incident, "startTime" | "endTime" | "status">;
 
@@ -24,5 +24,8 @@ export const getIncidentsDuration = (incident: IncidentLike | IncidentSummaryIte
 		return "-";
 	}
 
-	return formatDuration(durationMs);
+	return prettyMilliseconds(durationMs, {
+		secondsDecimalDigits: 0,
+		millisecondsDecimalDigits: 0,
+	});
 };

client/src/Pages/Infrastructure/Details/Components/Gauges.tsx

@@ -25,11 +25,10 @@ export const InfraDetailsGauges = ({
 		<Stack
 			direction={isSmall ? "column" : "row"}
 			spacing={theme.spacing(8)}
-			alignItems={"stretch"}
+			alignItems={"center"}
 		>
 			<DetailGauge
 				title={t("pages.infrastructure.gauges.memory.title")}
-				maxWidth={260}
 				progress={(snapshot?.memory?.usage_percent || 0) * 100}
 				upperLabel={t("pages.infrastructure.gauges.memory.upperLabel")}
 				upperValue={prettyBytes(snapshot?.memory?.used_bytes || 0)}
@@ -38,7 +37,6 @@ export const InfraDetailsGauges = ({
 			/>
 			<DetailGauge
 				title={t("pages.infrastructure.gauges.cpu.title")}
-				maxWidth={260}
 				progress={(snapshot?.cpu?.usage_percent || 0) * 100}
 				upperLabel={t("pages.infrastructure.gauges.cpu.upperLabel")}
 				upperValue={getFrequency(snapshot?.cpu?.current_frequency || 0)}
@@ -51,7 +49,6 @@ export const InfraDetailsGauges = ({
 						key={disk?.device || 0 + idx}
 						// title={`Disk ${idx} usage`}
 						title={t("pages.infrastructure.gauges.disk.title", { idx })}
-						maxWidth={260}
 						progress={(disk.usage_percent || 0) * 100}
 						upperLabel={t("pages.infrastructure.gauges.disk.upperLabel")}
 						upperValue={prettyBytes(disk?.used_bytes || 0)}

client/src/Pages/Infrastructure/Details/Components/StatusBoxes.tsx

@@ -11,8 +11,7 @@ export const StatusBoxes = ({ monitor }: { monitor: Monitor }) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
 
-	const recentChecks = monitor?.recentChecks ?? [];
-	const latestCheck = recentChecks[recentChecks.length - 1];
+	const latestCheck = monitor?.recentChecks?.[0];
 	// Get data from latest check
 	const physicalCores = getCores(latestCheck?.cpu?.physical_core);
 	const logicalCores = getCores(latestCheck?.cpu?.logical_core);
@@ -22,7 +21,13 @@ export const StatusBoxes = ({ monitor }: { monitor: Monitor }) => {
 	const memoryTotalBytes = latestCheck?.memory?.total_bytes ?? 0;
 	const diskTotalBytes =
 		latestCheck?.disk?.reduce((acc, disk) => acc + (disk.total_bytes || 0), 0) || 0;
-	const osPlatform = getOsAndPlatform(latestCheck?.host);
+	const os = getOsAndPlatform(latestCheck?.host);
+
+	const platform = latestCheck?.host?.platform ?? undefined;
+	const osPlatform =
+		typeof os === "undefined" && typeof platform === "undefined"
+			? undefined
+			: `${os} ${platform}`;
 
 	return (
 		<Stack

client/src/Pages/Infrastructure/Details/Components/TabOverview.tsx

@@ -21,11 +21,10 @@ export const TabOverview = ({
 	}
 
 	const checks = stats?.checks || [];
-	const recentChecks = monitor.recentChecks ?? [];
 	return (
 		<Stack gap={theme.spacing(8)}>
 			<StatusBoxes monitor={monitor} />
-			<InfraDetailsGauges snapshot={recentChecks[recentChecks.length - 1]} />
+			<InfraDetailsGauges snapshot={monitor.recentChecks?.[0]} />
 			<InfraDetailsCharts
 				checks={checks}
 				dateRange={dateRange}

client/src/Pages/Infrastructure/Monitors/Components/MonitorsTable.tsx

@@ -248,8 +248,7 @@ export const InfraMonitorsTable = ({
 				id: "cpu",
 				content: t("pages.infrastructure.table.headers.cpu"),
 				render: (row) => {
-					const recentChecks = row.recentChecks ?? [];
-					const check = recentChecks[recentChecks.length - 1];
+					const check = row.recentChecks?.[0];
 					const cpuUsage = (check?.cpu?.usage_percent || 0) * 100;
 					return <Gauge progress={cpuUsage} />;
 				},
@@ -258,8 +257,7 @@ export const InfraMonitorsTable = ({
 				id: "memory",
 				content: t("pages.infrastructure.table.headers.memory"),
 				render: (row) => {
-					const recentChecks = row.recentChecks ?? [];
-					const check = recentChecks[recentChecks.length - 1];
+					const check = row.recentChecks?.[0];
 					const memoryUsage = (check?.memory?.usage_percent || 0) * 100;
 					return <Gauge progress={memoryUsage} />;
 				},
@@ -268,8 +266,7 @@ export const InfraMonitorsTable = ({
 				id: "disk",
 				content: t("pages.infrastructure.table.headers.disk"),
 				render: (row) => {
-					const recentChecks = row.recentChecks ?? [];
-					const check = recentChecks[recentChecks.length - 1];
+					const check = row.recentChecks?.[0];
 
 					const totalDiskUsage = check?.disk?.reduce(
 						(acc, disk) => acc + (disk?.usage_percent || 0),

client/src/Pages/Logs/components/Stats.tsx

@@ -2,10 +2,10 @@ import Box from "@mui/material/Box";
 import { StatBox } from "@/Components/design-elements";
 
 import prettyBytes from "pretty-bytes";
+import prettyMilliseconds from "pretty-ms";
 import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import type { Diagnostics } from "@/Types/Diagnostics";
-import { formatDuration, formatMs } from "@/Utils/TimeUtils";
 
 interface StatsProps {
 	diagnostics: Diagnostics | null;
@@ -18,9 +18,13 @@ export const Stats = ({ diagnostics }: StatsProps) => {
 	const theme = useTheme();
 
 	const eventLoopDelay = diagnostics
-		? formatMs(diagnostics.eventLoopDelayMs ?? 0)
+		? prettyMilliseconds(diagnostics.eventLoopDelayMs ?? 0, {
+				millisecondsDecimalDigits: 2,
+			})
+		: PLACEHOLDER;
+	const uptime = diagnostics
+		? prettyMilliseconds(diagnostics.uptimeMs ?? 0, { hideSeconds: true })
 		: PLACEHOLDER;
-	const uptime = diagnostics ? formatDuration(diagnostics.uptimeMs ?? 0) : PLACEHOLDER;
 	const usedHeap = diagnostics
 		? prettyBytes(diagnostics.v8HeapStats?.usedHeapSizeBytes ?? 0)
 		: PLACEHOLDER;
@@ -33,10 +37,10 @@ export const Stats = ({ diagnostics }: StatsProps) => {
 
 	return (
 		<Box
-			display="grid"
-			gap={theme.spacing(8)}
 			sx={{
+				display: "grid",
 				gridTemplateColumns: { xs: "1fr", md: "repeat(5, 1fr)" },
+				gap: theme.spacing(8),
 				"& > *": { width: "100% !important" },
 			}}
 		>

client/src/Pages/Logs/components/TableJobs.tsx

@@ -1,6 +1,7 @@
 import { Table, Pagination } from "@/Components/design-elements";
 import { Typography, useTheme } from "@mui/material";
-import { formatDuration, formatTimestamp } from "@/Utils/TimeUtils";
+import prettyMilliseconds from "pretty-ms";
+import { formatTimestamp } from "@/Utils/TimeUtils";
 
 import { useTranslation } from "react-i18next";
 import type { QueueJobFailure, QueueJobSummary, QueueMetrics } from "@/Types/Queue";
@@ -83,7 +84,7 @@ export const TableJobs = ({
 			id: "interval",
 			content: t("common.table.headers.interval"),
 			render: (row) => (
-				<Typography sx={cellSx}>{formatDuration(row.monitorInterval ?? 0)}</Typography>
+				<Typography sx={cellSx}>{prettyMilliseconds(row.monitorInterval ?? 0)}</Typography>
 			),
 		},
 		{

client/src/Pages/Maintenance/MaintenanceWindowTable.tsx

@@ -4,6 +4,7 @@ import { Pagination } from "@/Components/design-elements/Table";
 import { ActionsMenu } from "@/Components/actions-menu";
 import { DialogInput } from "@/Components/inputs/Dialog";
 
+import prettyMilliseconds from "pretty-ms";
 import { useTheme } from "@mui/material";
 import type { Header } from "@/Components/design-elements/Table";
 import type { ActionMenuItem } from "@/Components/actions-menu";
@@ -17,7 +18,6 @@ import { setRowsPerPage } from "@/Features/UI/uiSlice";
 import dayjs from "dayjs";
 import { useState } from "react";
 import { useDelete, usePatch } from "@/Hooks/UseApi";
-import { formatDuration } from "@/Utils/TimeUtils";
 
 interface MaintenanceWindowTableProps {
 	maintenanceWindows: MaintenanceWindow[];
@@ -51,7 +51,7 @@ const getTimeToNextWindow = (
 
 	// Window is in the future
 	if (start.isAfter(now)) {
-		return formatDuration(start.diff(now));
+		return prettyMilliseconds(start.diff(now), { unitCount: 2, hideSeconds: true });
 	}
 
 	return "N/A";
@@ -152,7 +152,9 @@ export const MaintenanceWindowTable = ({
 			id: "repeat",
 			content: t("pages.maintenanceWindow.table.headers.repeat"),
 			render: (row) =>
-				row.repeat === 0 ? t("common.labels.na") : formatDuration(row.repeat),
+				row.repeat === 0
+					? t("common.labels.na")
+					: prettyMilliseconds(row.repeat, { verbose: true }),
 		},
 		{
 			id: "actions",

client/src/Pages/Maintenance/create/index.tsx

@@ -1,8 +1,18 @@
 import Stack from "@mui/material/Stack";
+import MenuItem from "@mui/material/MenuItem";
 import { logger } from "@/Utils/logger";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
 import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
 import { BasePage, ConfigBox } from "@/Components/design-elements";
-import { Button } from "@/Components/inputs";
+import {
+	TextField,
+	Select,
+	DatePicker,
+	TimePicker,
+	Button,
+	Autocomplete,
+} from "@/Components/inputs";
 
 import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
@@ -15,17 +25,10 @@ import { useGet, usePost, usePatch } from "@/Hooks/UseApi";
 import { mutate } from "swr";
 import { useParams, useNavigate } from "react-router-dom";
 import type { Monitor } from "@/Types/Monitor";
-import { useForm, FormProvider } from "react-hook-form";
+import { useForm, Controller } from "react-hook-form";
 import { useEffect } from "react";
 import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
-import { FormTextField } from "@/Components/inputs/forms/FormTextField";
-import { FormSelectField } from "@/Components/inputs/forms/FormSelectField";
-import {
-	FormDatePickerField,
-	FormTimePickerField,
-} from "@/Components/inputs/forms/FormDateTimePickerField";
-import { FormMultiSelectField } from "@/Components/inputs/forms/FormMultiSelectField";
-import { FormNumberField } from "@/Components/inputs/forms/FormNumberField";
+import { Trash2 } from "lucide-react";
 
 const CreateMaintenanceWindowPage = () => {
 	const theme = useTheme();
@@ -54,7 +57,7 @@ const CreateMaintenanceWindowPage = () => {
 		defaultValues: defaults,
 	});
 
-	const { handleSubmit, trigger } = form;
+	const { control, handleSubmit, trigger } = form;
 	useEffect(() => {
 		if (existingMaintenanceWindow) {
 			form.reset(defaults);
@@ -111,117 +114,255 @@ const CreateMaintenanceWindowPage = () => {
 	};
 
 	return (
-		<FormProvider {...form}>
-			<BasePage
-				component={"form"}
-				onSubmit={handleSubmit(onSubmit, onError)}
-			>
-				<ConfigBox
-					title={t("pages.maintenanceWindow.form.general.title")}
-					subtitle={t("pages.maintenanceWindow.form.general.description")}
-					rightContent={
-						<Stack spacing={theme.spacing(LAYOUT.MD)}>
-							<FormTextField
-								name="name"
-								fieldLabel={t("pages.maintenanceWindow.form.general.option.name.label")}
-								placeholder={t(
-									"pages.maintenanceWindow.form.general.option.name.placeholder"
-								)}
-							/>
-							<FormSelectField
-								name="repeat"
-								fieldLabel={t("pages.maintenanceWindow.form.general.option.repeat.label")}
-								options={repeatOptions.map((option) => ({
-									value: option.id,
-									label: option.name,
-								}))}
-							/>
-						</Stack>
-					}
-				/>
-				<ConfigBox
-					title={t("pages.maintenanceWindow.form.startDate.title")}
-					subtitle={t("pages.maintenanceWindow.form.startDate.description")}
-					rightContent={
-						<Stack spacing={theme.spacing(LAYOUT.MD)}>
-							<FormDatePickerField
-								name="startDate"
-								fieldLabel={t(
-									"pages.maintenanceWindow.form.startDate.option.startDate.label"
-								)}
-								onValueChange={() => trigger("startDate")}
-							/>
-						</Stack>
-					}
-				/>
-				<ConfigBox
-					title={t("pages.maintenanceWindow.form.startTime.title")}
-					subtitle={t("pages.maintenanceWindow.form.startTime.description")}
-					rightContent={
-						<Stack spacing={theme.spacing(LAYOUT.MD)}>
-							<FormTimePickerField
-								name="startTime"
-								fieldLabel={t(
-									"pages.maintenanceWindow.form.startTime.option.startTime.label"
-								)}
-								onValueChange={() => trigger("startDate")}
-							/>
-							<Stack
-								direction="row"
-								alignItems="flex-start"
-								spacing={theme.spacing(LAYOUT.MD)}
-							>
-								<FormNumberField
-									name="duration"
-									fieldLabel={t(
-										"pages.maintenanceWindow.form.startTime.option.duration.label"
+		<BasePage
+			component={"form"}
+			onSubmit={handleSubmit(onSubmit, onError)}
+		>
+			<ConfigBox
+				title={t("pages.maintenanceWindow.form.general.title")}
+				subtitle={t("pages.maintenanceWindow.form.general.description")}
+				rightContent={
+					<Stack spacing={theme.spacing(LAYOUT.MD)}>
+						<Controller
+							name="name"
+							control={control}
+							defaultValue={defaults.name}
+							render={({ field, fieldState }) => (
+								<TextField
+									{...field}
+									type="text"
+									fieldLabel={t("pages.maintenanceWindow.form.general.option.name.label")}
+									placeholder={t(
+										"pages.maintenanceWindow.form.general.option.name.placeholder"
 									)}
-									sx={{ width: 120 }}
+									fullWidth
+									error={!!fieldState.error}
+									helperText={fieldState.error?.message ?? ""}
 								/>
-								<FormSelectField
-									name="durationUnit"
-									fieldLabel={" "}
-									options={durationUnitOptions.map((option) => ({
-										value: option.id,
-										label: option.name,
-									}))}
-								/>
-							</Stack>
-						</Stack>
-					}
-				/>
-				<ConfigBox
-					title={t("pages.maintenanceWindow.form.startTime.monitors.title")}
-					subtitle={t("pages.maintenanceWindow.form.startTime.monitors.description")}
-					rightContent={
-						<FormMultiSelectField
-							name="monitors"
-							fieldLabel={t(
-								"pages.maintenanceWindow.form.startTime.monitors.option.addMonitors.label"
 							)}
-							placeholder={t(
-								"pages.maintenanceWindow.form.startTime.monitors.option.addMonitors.label"
-							)}
-							options={monitors ?? []}
 						/>
-					}
-				/>
-				<Stack
-					direction="row"
-					justifyContent="flex-end"
-					spacing={theme.spacing(SPACING.LG)}
+						<Controller
+							name="repeat"
+							control={control}
+							defaultValue={defaults.repeat}
+							render={({ field, fieldState }) => (
+								<Select
+									value={field.value}
+									fieldLabel={t(
+										"pages.maintenanceWindow.form.general.option.repeat.label"
+									)}
+									error={!!fieldState.error}
+									onChange={field.onChange}
+								>
+									{repeatOptions.map((option) => (
+										<MenuItem
+											key={option.id}
+											value={option.id}
+										>
+											<Typography>{option.name}</Typography>
+										</MenuItem>
+									))}
+								</Select>
+							)}
+						/>
+					</Stack>
+				}
+			/>
+			<ConfigBox
+				title={t("pages.maintenanceWindow.form.startDate.title")}
+				subtitle={t("pages.maintenanceWindow.form.startDate.description")}
+				rightContent={
+					<Stack spacing={theme.spacing(LAYOUT.MD)}>
+						<Controller
+							name="startDate"
+							control={control}
+							defaultValue={defaults.startDate}
+							render={({ field, fieldState }) => (
+								<DatePicker
+									fieldLabel={t(
+										"pages.maintenanceWindow.form.startDate.option.startDate.label"
+									)}
+									value={field.value ? dayjs(field.value, "YYYY-MM-DD") : null}
+									onChange={(date) => {
+										field.onChange(date ? date.format("YYYY-MM-DD") : "");
+										trigger("startDate");
+									}}
+									error={!!fieldState.error}
+									helperText={fieldState.error?.message}
+								/>
+							)}
+						/>
+					</Stack>
+				}
+			/>
+			<ConfigBox
+				title={t("pages.maintenanceWindow.form.startTime.title")}
+				subtitle={t("pages.maintenanceWindow.form.startTime.description")}
+				rightContent={
+					<Stack spacing={theme.spacing(LAYOUT.MD)}>
+						<Controller
+							name="startTime"
+							control={control}
+							defaultValue={defaults.startTime}
+							render={({ field }) => (
+								<TimePicker
+									fieldLabel={t(
+										"pages.maintenanceWindow.form.startTime.option.startTime.label"
+									)}
+									value={field.value ? dayjs(field.value, "HH:mm") : null}
+									onChange={(time) => {
+										field.onChange(time ? time.format("HH:mm") : "");
+										trigger("startDate");
+									}}
+								/>
+							)}
+						/>
+						<Stack
+							direction="row"
+							alignItems="flex-start"
+							spacing={theme.spacing(LAYOUT.MD)}
+						>
+							<Controller
+								name="duration"
+								control={control}
+								defaultValue={defaults.duration}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="number"
+										fieldLabel={t(
+											"pages.maintenanceWindow.form.startTime.option.duration.label"
+										)}
+										value={field.value === 0 ? "" : field.value}
+										onChange={(e) => {
+											const val = e.target.value;
+											field.onChange(val === "" ? 0 : Number(val));
+										}}
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+										sx={{ width: 120 }}
+									/>
+								)}
+							/>
+							<Controller
+								name="durationUnit"
+								control={control}
+								defaultValue={defaults.durationUnit}
+								render={({ field }) => (
+									<Select
+										fieldLabel=" "
+										value={field.value}
+										onChange={field.onChange}
+										sx={{ minWidth: 120 }}
+									>
+										{durationUnitOptions.map((option) => (
+											<MenuItem
+												key={option.id}
+												value={option.id}
+											>
+												<Typography>{option.name}</Typography>
+											</MenuItem>
+										))}
+									</Select>
+								)}
+							/>
+						</Stack>
+					</Stack>
+				}
+			/>
+			<ConfigBox
+				title={t("pages.maintenanceWindow.form.startTime.monitors.title")}
+				subtitle={t("pages.maintenanceWindow.form.startTime.monitors.description")}
+				rightContent={
+					<Controller
+						name="monitors"
+						control={control}
+						defaultValue={defaults.monitors}
+						render={({ field, fieldState }) => {
+							const monitorsList = monitors ?? [];
+							const selectedMonitors = field.value
+								.map((id: string) => monitorsList.find((m) => m.id === id))
+								.filter((m): m is Monitor => m !== undefined);
+
+							return (
+								<Stack spacing={theme.spacing(LAYOUT.MD)}>
+									<Autocomplete
+										multiple
+										options={monitorsList}
+										getOptionLabel={(option: Monitor) => option.name}
+										value={selectedMonitors}
+										onChange={(_, newValue) => {
+											field.onChange(newValue.map((m: Monitor) => m.id));
+										}}
+										fieldLabel={t(
+											"pages.maintenanceWindow.form.startTime.monitors.option.addMonitors.label"
+										)}
+										renderInput={(params) => (
+											<TextField
+												{...params}
+												placeholder={
+													selectedMonitors.length === 0
+														? t(
+																"pages.maintenanceWindow.form.startTime.monitors.option.addMonitors.label"
+															)
+														: ""
+												}
+												error={!!fieldState.error}
+												helperText={fieldState.error?.message}
+											/>
+										)}
+									/>
+									{selectedMonitors.length > 0 && (
+										<Stack>
+											{selectedMonitors.map((monitor) => (
+												<Stack
+													key={monitor.id}
+													direction="row"
+													alignItems="center"
+													padding={theme.spacing(LAYOUT.XS)}
+													marginTop={theme.spacing(SPACING.LG)}
+													borderRadius={1}
+													sx={{
+														border: `1px solid ${theme.palette.divider}`,
+													}}
+												>
+													<Typography flexGrow={1}>{monitor.name}</Typography>
+													<IconButton
+														size="small"
+														onClick={() => {
+															field.onChange(
+																field.value.filter((id: string) => id !== monitor.id)
+															);
+														}}
+														aria-label="Remove monitor"
+													>
+														<Trash2 size={16} />
+													</IconButton>
+												</Stack>
+											))}
+										</Stack>
+									)}
+								</Stack>
+							);
+						}}
+					/>
+				}
+			/>
+			<Stack
+				direction="row"
+				justifyContent="flex-end"
+				spacing={theme.spacing(SPACING.LG)}
+			>
+				<Button
+					loading={isLoading}
+					type="submit"
+					variant="contained"
+					color="primary"
 				>
-					<Button
-						loading={isLoading}
-						type="submit"
-						variant="contained"
-						color="primary"
-					>
-						{t("common.buttons.save")}
-					</Button>
-				</Stack>
-			</BasePage>
-		</FormProvider>
+					{t("common.buttons.save")}
+				</Button>
+			</Stack>
+		</BasePage>
 	);
 };
 

client/src/Pages/Notifications/create/index.tsx

@@ -1,12 +1,14 @@
 import { BasePage, ConfigBox } from "@/Components/design-elements";
-import { Button } from "@/Components/inputs";
+import { TextField, Select, Button } from "@/Components/inputs";
+import MenuItem from "@mui/material/MenuItem";
+import Typography from "@mui/material/Typography";
 import Stack from "@mui/material/Stack";
 import { useTheme } from "@mui/material/styles";
 
 import { useEffect, useMemo } from "react";
 import { useParams } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
-import { FormProvider, useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useGet, usePost, usePatch } from "@/Hooks/UseApi";
 import { useNotificationForm } from "@/Hooks/useNotificationForm";
@@ -14,8 +16,6 @@ import type { NotificationFormData } from "@/Validation/notifications";
 import type { Notification } from "@/Types/Notification";
 import { useTranslation } from "react-i18next";
 import { NotificationChannels } from "@/Types/Notification";
-import { FormTextField } from "@/Components/inputs/forms/FormTextField";
-import { FormSelectField } from "@/Components/inputs/forms/FormSelectField";
 
 const NotificationsCreatePage = () => {
 	const { t } = useTranslation();
@@ -39,7 +39,7 @@ const NotificationsCreatePage = () => {
 		defaultValues: defaults,
 	});
 
-	const { watch, reset, handleSubmit, clearErrors, trigger, getValues } = form;
+	const { control, watch, reset, handleSubmit, clearErrors, trigger, getValues } = form;
 
 	useEffect(() => {
 		reset(defaults);
@@ -93,195 +93,384 @@ const NotificationsCreatePage = () => {
 	};
 
 	return (
-		<FormProvider {...form}>
-			<BasePage
-				component="form"
-				onSubmit={handleSubmit(onSubmit)}
+		<BasePage
+			component="form"
+			onSubmit={handleSubmit(onSubmit)}
+		>
+			<ConfigBox
+				title={t("pages.notifications.form.notificationName.title")}
+				subtitle={t("pages.notifications.form.notificationName.description")}
+				rightContent={
+					<Controller
+						name="notificationName"
+						control={control}
+						defaultValue={defaults.notificationName}
+						render={({ field, fieldState }) => (
+							<TextField
+								{...field}
+								type="text"
+								fieldLabel={t("pages.notifications.form.notificationName.optionName")}
+								placeholder={t("pages.notifications.form.notificationName.placeholder")}
+								fullWidth
+								error={!!fieldState.error}
+								helperText={fieldState.error?.message ?? ""}
+							/>
+						)}
+					/>
+				}
+			/>
+			<ConfigBox
+				title={t("pages.notifications.form.type.title")}
+				subtitle={t("pages.notifications.form.type.description")}
+				rightContent={
+					<Controller
+						name="type"
+						control={control}
+						defaultValue={defaults.type}
+						render={({ field, fieldState }) => (
+							<Select
+								value={field.value}
+								fieldLabel={t("pages.notifications.form.type.optionType")}
+								error={!!fieldState.error}
+								onChange={field.onChange}
+							>
+								{NotificationChannels.map((type: string) => (
+									<MenuItem
+										key={type}
+										value={type}
+									>
+										<Typography textTransform="capitalize">{type}</Typography>
+									</MenuItem>
+								))}
+							</Select>
+						)}
+					/>
+				}
+			/>
+			{watchedType !== "matrix" &&
+				watchedType !== "telegram" &&
+				watchedType !== "pushover" &&
+				watchedType !== "twilio" &&
+				watchedType !== "ntfy" && (
+					<ConfigBox
+						title={addressConfig.title}
+						subtitle={addressConfig.description}
+						rightContent={
+							<Controller
+								name="address"
+								control={control}
+								defaultValue={"address" in defaults ? defaults.address : ""}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={addressConfig.fieldLabel}
+										placeholder={addressConfig.placeholder}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+						}
+					/>
+				)}
+			{watchedType === "ntfy" && (
+				<ConfigBox
+					title={t("pages.notifications.form.ntfy.title")}
+					subtitle={t("pages.notifications.form.ntfy.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(8)}>
+							<Controller
+								name="address"
+								control={control}
+								defaultValue={"address" in defaults ? defaults.address : ""}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.ntfy.optionServerUrl")}
+										placeholder={t("pages.notifications.form.ntfy.placeholderServerUrl")}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+							<Controller
+								name="topic"
+								control={control}
+								defaultValue={"topic" in defaults ? defaults.topic : ""}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.ntfy.optionTopic")}
+										placeholder={t("pages.notifications.form.ntfy.placeholderTopic")}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+						</Stack>
+					}
+				/>
+			)}
+			{watchedType === "telegram" && (
+				<ConfigBox
+					title={t("pages.notifications.form.telegram.title")}
+					subtitle={t("pages.notifications.form.telegram.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(8)}>
+							<Controller
+								name="accessToken"
+								control={control}
+								defaultValue={"accessToken" in defaults ? defaults.accessToken : ""}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.telegram.optionBotToken")}
+										placeholder={t(
+											"pages.notifications.form.telegram.placeholderBotToken"
+										)}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+							<Controller
+								name="address"
+								control={control}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.telegram.optionChatId")}
+										placeholder={t("pages.notifications.form.telegram.placeholderChatId")}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+						</Stack>
+					}
+				/>
+			)}
+			{watchedType === "pushover" && (
+				<ConfigBox
+					title={t("pages.notifications.form.pushover.title")}
+					subtitle={t("pages.notifications.form.pushover.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(8)}>
+							<Controller
+								name="accessToken"
+								control={control}
+								defaultValue={"accessToken" in defaults ? defaults.accessToken : ""}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.pushover.optionAppToken")}
+										placeholder={t(
+											"pages.notifications.form.pushover.placeholderAppToken"
+										)}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+							<Controller
+								name="address"
+								control={control}
+								defaultValue={"address" in defaults ? defaults.address : ""}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.pushover.optionUserKey")}
+										placeholder={t(
+											"pages.notifications.form.pushover.placeholderUserKey"
+										)}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+						</Stack>
+					}
+				/>
+			)}
+			{watchedType === "twilio" && (
+				<ConfigBox
+					title={t("pages.notifications.form.twilio.title")}
+					subtitle={t("pages.notifications.form.twilio.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(8)}>
+							<Controller
+								name="accountSid"
+								control={control}
+								defaultValue={"accountSid" in defaults ? defaults.accountSid : ""}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.twilio.optionAccountSid")}
+										placeholder={t(
+											"pages.notifications.form.twilio.placeholderAccountSid"
+										)}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+							<Controller
+								name="accessToken"
+								control={control}
+								defaultValue={"accessToken" in defaults ? defaults.accessToken : ""}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.twilio.optionAuthToken")}
+										placeholder={t(
+											"pages.notifications.form.twilio.placeholderAuthToken"
+										)}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+							<Controller
+								name="twilioPhoneNumber"
+								control={control}
+								defaultValue={
+									"twilioPhoneNumber" in defaults ? defaults.twilioPhoneNumber : ""
+								}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.twilio.optionFromNumber")}
+										placeholder={t(
+											"pages.notifications.form.twilio.placeholderFromNumber"
+										)}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+							<Controller
+								name="phone"
+								control={control}
+								defaultValue={"phone" in defaults ? defaults.phone : ""}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.twilio.optionToNumber")}
+										placeholder={t("pages.notifications.form.twilio.placeholderToNumber")}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+						</Stack>
+					}
+				/>
+			)}
+			{watchedType === "matrix" && (
+				<ConfigBox
+					title={t("pages.notifications.form.matrix.title")}
+					subtitle={t("pages.notifications.form.matrix.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(8)}>
+							<Controller
+								name="homeserverUrl"
+								control={control}
+								defaultValue={"homeserverUrl" in defaults ? defaults.homeserverUrl : ""}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.homeServer.optionHomeServer")}
+										placeholder={t("pages.notifications.form.homeServer.placeholder")}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+							<Controller
+								name="roomId"
+								control={control}
+								defaultValue={"roomId" in defaults ? defaults.roomId : ""}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.roomId.optionRoomId")}
+										placeholder={t("pages.notifications.form.roomId.placeholder")}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+							<Controller
+								name="accessToken"
+								control={control}
+								defaultValue={"accessToken" in defaults ? defaults.accessToken : ""}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t(
+											"pages.notifications.form.accessToken.optionAccessToken"
+										)}
+										placeholder={t("pages.notifications.form.accessToken.placeholder")}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+						</Stack>
+					}
+				/>
+			)}
+			<Stack
+				direction="row"
+				justifyContent="flex-end"
+				spacing={theme.spacing(2)}
 			>
-				<ConfigBox
-					title={t("pages.notifications.form.notificationName.title")}
-					subtitle={t("pages.notifications.form.notificationName.description")}
-					rightContent={
-						<FormTextField
-							name="notificationName"
-							fieldLabel={t("pages.notifications.form.notificationName.optionName")}
-							placeholder={t("pages.notifications.form.notificationName.placeholder")}
-						/>
-					}
-				/>
-				<ConfigBox
-					title={t("pages.notifications.form.type.title")}
-					subtitle={t("pages.notifications.form.type.description")}
-					rightContent={
-						<FormSelectField
-							name="type"
-							fieldLabel={t("pages.notifications.form.type.optionType")}
-							options={NotificationChannels.map((channel) => ({
-								value: channel,
-								label: t(`pages.notifications.form.type.value.${channel}`),
-							}))}
-						/>
-					}
-				/>
-				{watchedType !== "matrix" &&
-					watchedType !== "telegram" &&
-					watchedType !== "pushover" &&
-					watchedType !== "twilio" &&
-					watchedType !== "ntfy" && (
-						<ConfigBox
-							title={addressConfig.title}
-							subtitle={addressConfig.description}
-							rightContent={
-								<FormTextField
-									name="address"
-									fieldLabel={addressConfig.fieldLabel}
-									placeholder={addressConfig.placeholder}
-								/>
-							}
-						/>
-					)}
-				{watchedType === "ntfy" && (
-					<ConfigBox
-						title={t("pages.notifications.form.ntfy.title")}
-						subtitle={t("pages.notifications.form.ntfy.description")}
-						rightContent={
-							<Stack spacing={theme.spacing(8)}>
-								<FormTextField
-									name="address"
-									fieldLabel={t("pages.notifications.form.ntfy.optionServerUrl")}
-									placeholder={t("pages.notifications.form.ntfy.placeholderServerUrl")}
-								/>
-								<FormTextField
-									name="topic"
-									fieldLabel={t("pages.notifications.form.ntfy.optionTopic")}
-									placeholder={t("pages.notifications.form.ntfy.placeholderTopic")}
-								/>
-							</Stack>
-						}
-					/>
-				)}
-				{watchedType === "telegram" && (
-					<ConfigBox
-						title={t("pages.notifications.form.telegram.title")}
-						subtitle={t("pages.notifications.form.telegram.description")}
-						rightContent={
-							<Stack spacing={theme.spacing(8)}>
-								<FormTextField
-									name="accessToken"
-									fieldLabel={t("pages.notifications.form.telegram.optionBotToken")}
-									placeholder={t("pages.notifications.form.telegram.placeholderBotToken")}
-								/>
-								<FormTextField
-									name="address"
-									fieldLabel={t("pages.notifications.form.telegram.optionChatId")}
-									placeholder={t("pages.notifications.form.telegram.placeholderChatId")}
-								/>
-							</Stack>
-						}
-					/>
-				)}
-				{watchedType === "pushover" && (
-					<ConfigBox
-						title={t("pages.notifications.form.pushover.title")}
-						subtitle={t("pages.notifications.form.pushover.description")}
-						rightContent={
-							<Stack spacing={theme.spacing(8)}>
-								<FormTextField
-									name="accessToken"
-									fieldLabel={t("pages.notifications.form.pushover.optionAppToken")}
-									placeholder={t("pages.notifications.form.pushover.placeholderAppToken")}
-								/>
-
-								<FormTextField
-									name="address"
-									fieldLabel={t("pages.notifications.form.pushover.optionUserKey")}
-									placeholder={t("pages.notifications.form.pushover.placeholderUserKey")}
-								/>
-							</Stack>
-						}
-					/>
-				)}
-				{watchedType === "twilio" && (
-					<ConfigBox
-						title={t("pages.notifications.form.twilio.title")}
-						subtitle={t("pages.notifications.form.twilio.description")}
-						rightContent={
-							<Stack spacing={theme.spacing(8)}>
-								<FormTextField
-									name="accountSid"
-									fieldLabel={t("pages.notifications.form.twilio.optionAccountSid")}
-									placeholder={t("pages.notifications.form.twilio.placeholderAccountSid")}
-								/>
-								<FormTextField
-									name="accessToken"
-									fieldLabel={t("pages.notifications.form.twilio.optionAuthToken")}
-									placeholder={t("pages.notifications.form.twilio.placeholderAuthToken")}
-								/>
-
-								<FormTextField
-									name="twilioPhoneNumber"
-									fieldLabel={t("pages.notifications.form.twilio.optionFromNumber")}
-									placeholder={t("pages.notifications.form.twilio.placeholderFromNumber")}
-								/>
-
-								<FormTextField
-									name="phone"
-									fieldLabel={t("pages.notifications.form.twilio.optionToNumber")}
-									placeholder={t("pages.notifications.form.twilio.placeholderToNumber")}
-								/>
-							</Stack>
-						}
-					/>
-				)}
-				{watchedType === "matrix" && (
-					<ConfigBox
-						title={t("pages.notifications.form.matrix.title")}
-						subtitle={t("pages.notifications.form.matrix.description")}
-						rightContent={
-							<Stack spacing={theme.spacing(8)}>
-								<FormTextField
-									name="homeserverUrl"
-									fieldLabel={t("pages.notifications.form.homeServer.optionHomeServer")}
-									placeholder={t("pages.notifications.form.homeServer.placeholder")}
-								/>
-								<FormTextField
-									name="roomId"
-									fieldLabel={t("pages.notifications.form.roomId.optionRoomId")}
-									placeholder={t("pages.notifications.form.roomId.placeholder")}
-								/>
-								<FormTextField
-									name="accessToken"
-									fieldLabel={t("pages.notifications.form.accessToken.optionAccessToken")}
-									placeholder={t("pages.notifications.form.accessToken.placeholder")}
-								/>
-							</Stack>
-						}
-					/>
-				)}
-				<Stack
-					direction="row"
-					justifyContent="flex-end"
-					spacing={theme.spacing(2)}
+				<Button
+					variant="contained"
+					color="primary"
+					onClick={handleTest}
+					loading={isTesting}
 				>
-					<Button
-						variant="contained"
-						color="primary"
-						onClick={handleTest}
-						loading={isTesting}
-					>
-						{t("common.buttons.test")}
-					</Button>
-					<Button
-						loading={isSubmitting || isPatching}
-						type="submit"
-						variant="contained"
-						color="primary"
-					>
-						{t("common.buttons.save")}
-					</Button>
-				</Stack>
-			</BasePage>
-		</FormProvider>
+					{t("common.buttons.test")}
+				</Button>
+				<Button
+					loading={isSubmitting || isPatching}
+					type="submit"
+					variant="contained"
+					color="primary"
+				>
+					{t("common.buttons.save")}
+				</Button>
+			</Stack>
+		</BasePage>
 	);
 };
 

client/src/Pages/PageSpeed/Details/index.tsx

@@ -45,8 +45,6 @@ const PageSpeedDetails = () => {
 	const monitor = monitorData?.monitorData?.monitor;
 	const groupedChecks = monitorData?.monitorData?.groupedChecks || [];
 	const monitorStats = monitorData?.monitorStats || null;
-	const recentChecks = monitor?.recentChecks ?? [];
-	const latestCheck = recentChecks[recentChecks.length - 1];
 
 	return (
 		<BasePage
@@ -77,8 +75,8 @@ const PageSpeedDetails = () => {
 				direction={{ xs: "column", md: "row" }}
 				gap={theme.spacing(10)}
 			>
-				<PiePageSpeed latestCheck={latestCheck} />
-				<PiePageSpeedLegend latestCheck={latestCheck} />
+				<PiePageSpeed latestCheck={monitor?.recentChecks?.[0]} />
+				<PiePageSpeedLegend latestCheck={monitor?.recentChecks?.[0]} />
 			</Stack>
 		</BasePage>
 	);

client/src/Pages/Settings/DummyChart.tsx

@@ -13,12 +13,13 @@ const generateDummyChecks = (): CheckSnapshot[] => {
 	const checks: CheckSnapshot[] = [];
 	for (let i = 0; i < MAX_RECENT_CHECKS; i++) {
 		const isUp = Math.random() > 0.1;
-		const responseTime = Math.floor(Math.random() * 800) + 20;
+		const responseTime = Math.floor(Math.random() * 80) + 20;
 		checks.push({
 			id: `dummy-${i}`,
 			status: isUp,
 			statusCode: isUp ? 200 : 500,
 			responseTime: responseTime,
+			originalResponseTime: responseTime,
 			message: "",
 			createdAt: new Date(Date.now() - i * 60000).toISOString(),
 		});

client/src/Pages/StatusPage/Create/index.tsx

@@ -1,74 +1,56 @@
 import { BasePage, ConfigBox, StepProgress } from "@/Components/design-elements";
 import Stack from "@mui/material/Stack";
 import { logger } from "@/Utils/logger";
-import { LAYOUT } from "@/Utils/Theme/constants";
+import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
 import Typography from "@mui/material/Typography";
-import { ImageUpload, Button, Dialog } from "@/Components/inputs";
+import IconButton from "@mui/material/IconButton";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import { Trash2, GripVertical } from "lucide-react";
+import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
+import type { DropResult } from "@hello-pangea/dnd";
+import {
+	ImageUpload,
+	SwitchComponent,
+	Button,
+	TextField,
+	Autocomplete,
+	Checkbox,
+	Dialog,
+	ColorInput,
+} from "@/Components/inputs";
 
 import { useTheme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 import { useEffect, useMemo, useState } from "react";
-import { useForm, FormProvider, useController } from "react-hook-form";
+import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useStatusPageForm } from "@/Hooks/useStatusPageForm";
 import type { StatusPageFormData } from "@/Validation/statusPage";
 import { statusPageStepCount, statusPageStepFieldsFor } from "@/Validation/statusPage";
 import { useGet, usePost, usePut, useDelete } from "@/Hooks/UseApi";
 import type { Monitor } from "@/Types/Monitor";
-import { SelectableMonitorTypes } from "@/Types/Monitor";
 import type { MonitorDisplayType, StatusPageResponse } from "@/Types/StatusPage";
 import { getMonitorTypeLabel } from "@/Types/StatusPage";
-import { timezoneOptions } from "@/Utils/timezoneOptions";
+import timezones from "@/Utils/timezones.json";
 import { useNavigate, useParams } from "react-router-dom";
 import { mutate } from "swr";
 import axios from "axios";
 import { HeaderConfigStatusControls } from "./Components/HeaderConfigStatusControls";
 import { ThemePicker } from "./Components/ThemePicker";
-import { FormSwitchField } from "@/Components/inputs/forms/FormSwitchField";
-import { FormTextField } from "@/Components/inputs/forms/FormTextField";
-import { FormMultiSelectField } from "@/Components/inputs/forms/FormMultiSelectField";
-import { FormAutocompleteField } from "@/Components/inputs/forms/FormAutoCompleteField";
-import { FormCheckboxField } from "@/Components/inputs/forms/FormCheckboxField";
-import { FormColorField } from "@/Components/inputs/forms/FormColorField";
 
-const ThemePickerField = () => {
-	const { field: themeField } = useController<StatusPageFormData, "theme">({
-		name: "theme",
-	});
-	const { field: modeField } = useController<StatusPageFormData, "themeMode">({
-		name: "themeMode",
-	});
-	return (
-		<ThemePicker
-			theme={themeField.value ?? "refined"}
-			themeMode={modeField.value ?? "auto"}
-			onThemeChange={themeField.onChange}
-			onThemeModeChange={modeField.onChange}
-		/>
-	);
-};
-const LogoUploadField = () => {
-	const { field } = useController<StatusPageFormData, "logo">({ name: "logo" });
-	return (
-		<ImageUpload
-			src={field.value?.data}
-			onChange={(file) => {
-				field.onChange(file ? { data: file.src, contentType: file.file.type } : null);
-			}}
-		/>
-	);
-};
-
-// Derived from SelectableMonitorTypes so a newly supported monitor type is
-// offered here automatically; the previous hardcoded list silently omitted DNS.
-// "hardware" is appended because infrastructure monitors are created on their
-// own page and so are absent from the selectable set.
 const monitorsUrl = (() => {
 	const params = new URLSearchParams();
-	[...SelectableMonitorTypes, "hardware"].forEach((type) => params.append("type", type));
+	["http", "ping", "port", "docker", "game", "grpc", "websocket", "hardware"].forEach(
+		(type) => params.append("type", type)
+	);
 	return `/monitors/team?${params.toString()}`;
 })();
 
+interface TimezoneOption {
+	_id: string;
+	name: string;
+}
+
 const buildStatusPageKey = (slug: string | null | undefined) =>
 	slug ? `/status-page/${slug}?type=uptime&type=infrastructure` : null;
 
@@ -85,7 +67,7 @@ const CreateStatusPage = () => {
 		useGet<StatusPageResponse>(isCreate ? null : buildStatusPageKey(url));
 
 	const { data: monitorsResponse } = useGet<Monitor[]>(monitorsUrl);
-	const monitors = useMemo(() => monitorsResponse ?? [], [monitorsResponse]);
+	const monitors = monitorsResponse ?? [];
 
 	const { post, loading: isSubmittingPost } = usePost();
 	const { put, loading: isSubmittingPut } = usePut();
@@ -105,7 +87,7 @@ const CreateStatusPage = () => {
 		defaultValues: defaults,
 	});
 
-	const { reset, handleSubmit, trigger } = form;
+	const { control, reset, handleSubmit, trigger } = form;
 
 	// Reset form when defaults change (from fetched data)
 	useEffect(() => {
@@ -126,7 +108,7 @@ const CreateStatusPage = () => {
 	};
 	const handleBack = () => setCurrentStep((step) => step - 1);
 
-	const watchedMonitorIds: string[] = form.watch("monitors");
+	const watchedMonitorIds: string[] = form.watch("monitors") ?? [];
 	const computedTypes: MonitorDisplayType[] = useMemo(() => {
 		const selectedMonitors = (watchedMonitorIds ?? [])
 			.map((id) => monitors.find((m) => m.id === id))
@@ -142,7 +124,7 @@ const CreateStatusPage = () => {
 
 	useEffect(() => {
 		form.setValue("type", computedTypes);
-	}, [computedTypes, form]);
+	}, [computedTypes]);
 
 	const onError = (errors: any) => {
 		logger.debug("Status page validation errors", errors);
@@ -234,227 +216,470 @@ const CreateStatusPage = () => {
 		return <BasePage>Loading...</BasePage>;
 	}
 	return (
-		<FormProvider {...form}>
-			<BasePage
-				component="form"
-				onSubmit={handleSubmit(onSubmit, onError)}
-			>
-				{!isCreate && <HeaderConfigStatusControls onDelete={handleDeleteClick} />}
-				{isCreate && (
-					<StepProgress
-						steps={totalSteps}
-						current={currentStep}
-					/>
-				)}
-				{showStep(0) && (
-					<ConfigBox
-						title={t("pages.statusPages.form.access.title")}
-						subtitle={t("pages.statusPages.form.access.description")}
-						rightContent={
-							<FormSwitchField
+		<BasePage
+			component="form"
+			onSubmit={handleSubmit(onSubmit, onError)}
+		>
+			{!isCreate && <HeaderConfigStatusControls onDelete={handleDeleteClick} />}
+			{isCreate && (
+				<StepProgress
+					steps={totalSteps}
+					current={currentStep}
+				/>
+			)}
+			{showStep(0) && (
+				<ConfigBox
+					title={t("pages.statusPages.form.access.title")}
+					subtitle={t("pages.statusPages.form.access.description")}
+					rightContent={
+						<Stack
+							direction="row"
+							alignItems="center"
+							spacing={theme.spacing(SPACING.MD)}
+						>
+							<Controller
 								name="isPublished"
-								label={t("pages.statusPages.form.access.option.published.name")}
+								control={control}
+								render={({ field }) => (
+									<SwitchComponent
+										checked={field.value ?? false}
+										onChange={(e) => field.onChange(e.target.checked)}
+									/>
+								)}
 							/>
-						}
-					/>
-				)}
-				{showStep(0) && (
-					<ConfigBox
-						title={t("pages.statusPages.form.basicInfo.title")}
-						subtitle={t("pages.statusPages.form.basicInfo.description")}
-						rightContent={
-							<Stack spacing={theme.spacing(LAYOUT.MD)}>
-								<FormTextField
-									name="companyName"
-									fieldLabel={t("pages.statusPages.form.basicInfo.option.name.label")}
-									placeholder={t(
-										"pages.statusPages.form.basicInfo.option.name.placeholder"
-									)}
-								/>
+							<Typography>
+								{t("pages.statusPages.form.access.option.published.name")}
+							</Typography>
+						</Stack>
+					}
+				/>
+			)}
+			{showStep(0) && (
+				<ConfigBox
+					title={t("pages.statusPages.form.basicInfo.title")}
+					subtitle={t("pages.statusPages.form.basicInfo.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(LAYOUT.MD)}>
+							<Controller
+								name="companyName"
+								control={control}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										fieldLabel={t("pages.statusPages.form.basicInfo.option.name.label")}
+										placeholder={t(
+											"pages.statusPages.form.basicInfo.option.name.placeholder"
+										)}
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message}
+									/>
+								)}
+							/>
+							<Controller
+								name="url"
+								control={control}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										fieldLabel={t("pages.statusPages.form.basicInfo.option.url.label")}
+										placeholder={t(
+											"pages.statusPages.form.basicInfo.option.url.placeholder"
+										)}
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message}
+									/>
+								)}
+							/>
+							<Controller
+								name="customDomain"
+								control={control}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										value={field.value ?? ""}
+										fieldLabel={t(
+											"pages.statusPages.form.basicInfo.option.customDomain.label"
+										)}
+										placeholder={t(
+											"pages.statusPages.form.basicInfo.option.customDomain.placeholder"
+										)}
+										helperText={
+											fieldState.error?.message ||
+											t("pages.statusPages.form.basicInfo.option.customDomain.helper")
+										}
+										error={!!fieldState.error}
+									/>
+								)}
+							/>
+						</Stack>
+					}
+				/>
+			)}
+			{showStep(0) && (
+				<ConfigBox
+					title={t("pages.statusPages.form.monitors.title")}
+					subtitle={t("pages.statusPages.form.monitors.description")}
+					rightContent={
+						<Controller
+							name="monitors"
+							control={control}
+							render={({ field, fieldState }) => {
+								const selectedMonitors = field.value
+									.map((id: string) => monitors.find((m) => m.id === id))
+									.filter((m): m is Monitor => m !== undefined);
 
-								<FormTextField
-									name="url"
-									fieldLabel={t("pages.statusPages.form.basicInfo.option.url.label")}
-									placeholder={t(
-										"pages.statusPages.form.basicInfo.option.url.placeholder"
+								const handleDragEnd = (result: DropResult) => {
+									if (!result.destination) return;
+									const reordered = Array.from(field.value);
+									const [removed] = reordered.splice(result.source.index, 1);
+									reordered.splice(result.destination.index, 0, removed);
+									field.onChange(reordered);
+								};
+
+								return (
+									<Stack spacing={theme.spacing(LAYOUT.MD)}>
+										<Autocomplete
+											multiple
+											options={monitors}
+											getOptionLabel={(option: Monitor) => option.name}
+											value={selectedMonitors}
+											onChange={(_, newValue) => {
+												field.onChange(newValue.map((m: Monitor) => m.id));
+											}}
+											fieldLabel={t(
+												"pages.statusPages.form.monitors.option.monitors.label"
+											)}
+											renderInput={(params) => (
+												<TextField
+													{...params}
+													placeholder={
+														selectedMonitors.length === 0
+															? t(
+																	"pages.statusPages.form.monitors.option.monitors.placeholder"
+																)
+															: ""
+													}
+													error={!!fieldState.error}
+													helperText={fieldState.error?.message}
+												/>
+											)}
+										/>
+										{selectedMonitors.length > 0 && (
+											<DragDropContext onDragEnd={handleDragEnd}>
+												<Droppable droppableId="monitors-list">
+													{(provided) => (
+														<Stack
+															{...provided.droppableProps}
+															ref={provided.innerRef}
+														>
+															{selectedMonitors.map((monitor, index) => (
+																<Draggable
+																	key={monitor.id}
+																	draggableId={monitor.id}
+																	index={index}
+																>
+																	{(provided) => (
+																		<Stack
+																			ref={provided.innerRef}
+																			{...provided.draggableProps}
+																			{...provided.dragHandleProps}
+																			direction="row"
+																			alignItems="center"
+																			spacing={theme.spacing(LAYOUT.XS)}
+																			padding={theme.spacing(LAYOUT.XS)}
+																			marginTop={theme.spacing(SPACING.LG)}
+																			borderRadius={1}
+																			sx={{
+																				border: `1px solid ${theme.palette.divider}`,
+																				cursor: "grab",
+																				"&:active": { cursor: "grabbing" },
+																			}}
+																		>
+																			<GripVertical size={20} />
+																			<Typography
+																				flexGrow={1}
+																			>{`${monitor.name} (${getMonitorTypeLabel(monitor.type, t)})`}</Typography>
+																			<IconButton
+																				size="small"
+																				onClick={() => {
+																					field.onChange(
+																						field.value.filter(
+																							(id: string) => id !== monitor.id
+																						)
+																					);
+																				}}
+																				aria-label="Remove monitor"
+																			>
+																				<Trash2 size={16} />
+																			</IconButton>
+																		</Stack>
+																	)}
+																</Draggable>
+															))}
+															{provided.placeholder}
+														</Stack>
+													)}
+												</Droppable>
+											</DragDropContext>
+										)}
+									</Stack>
+								);
+							}}
+						/>
+					}
+				/>
+			)}
+			{showStep(0) && (
+				<ConfigBox
+					title={t("pages.statusPages.form.timezone.title")}
+					subtitle={t("pages.statusPages.form.timezone.description")}
+					rightContent={
+						<Controller
+							name="timezone"
+							control={control}
+							render={({ field }) => (
+								<Autocomplete
+									options={timezones}
+									getOptionLabel={(option: TimezoneOption) => option.name}
+									value={
+										timezones.find((tz: TimezoneOption) => tz._id === field.value) ?? null
+									}
+									onChange={(_, newValue: TimezoneOption | null) => {
+										field.onChange(newValue?._id ?? "");
+									}}
+									fieldLabel={t("pages.statusPages.form.timezone.option.timezone.label")}
+									renderInput={(params) => (
+										<TextField
+											{...params}
+											placeholder={t(
+												"pages.statusPages.form.timezone.option.timezone.placeholder"
+											)}
+										/>
 									)}
 								/>
-								<FormTextField
-									name="customDomain"
+							)}
+						/>
+					}
+				/>
+			)}
+			{showStep(1) && (
+				<ConfigBox
+					title={t("pages.statusPages.form.appearance.title")}
+					subtitle={t("pages.statusPages.form.appearance.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(LAYOUT.MD)}>
+							<Stack alignItems={"center"}>
+								<Controller
+									name="logo"
+									control={control}
+									render={({ field }) => (
+										<ImageUpload
+											src={field.value?.data}
+											onChange={(file) => {
+												if (file) {
+													field.onChange({
+														data: file.src,
+														contentType: file.file.type,
+													});
+												} else {
+													field.onChange(null);
+												}
+											}}
+										/>
+									)}
+								/>
+							</Stack>
+							<Controller
+								name="color"
+								control={control}
+								render={({ field }) => (
+									<ColorInput
+										format="hex"
+										value={field.value}
+										onChange={field.onChange}
+										fieldLabel={t("pages.statusPages.form.appearance.option.color.label")}
+									/>
+								)}
+							/>
+						</Stack>
+					}
+				/>
+			)}
+			{showStep(1) && (
+				<ConfigBox
+					title={t("pages.statusPages.form.theme.title")}
+					subtitle={t("pages.statusPages.form.theme.description")}
+					rightContent={
+						<Controller
+							name="theme"
+							control={control}
+							render={({ field: themeField }) => (
+								<Controller
+									name="themeMode"
+									control={control}
+									render={({ field: modeField }) => (
+										<ThemePicker
+											theme={themeField.value ?? "refined"}
+											themeMode={modeField.value ?? "auto"}
+											onThemeChange={themeField.onChange}
+											onThemeModeChange={modeField.onChange}
+										/>
+									)}
+								/>
+							)}
+						/>
+					}
+				/>
+			)}
+			{showStep(1) && (
+				<ConfigBox
+					title={t("pages.statusPages.form.customCSS.title")}
+					subtitle={t("pages.statusPages.form.customCSS.description")}
+					rightContent={
+						<Controller
+							name="customCSS"
+							control={control}
+							render={({ field, fieldState }) => (
+								<TextField
+									{...field}
+									multiline
+									rows={8}
 									fieldLabel={t(
-										"pages.statusPages.form.basicInfo.option.customDomain.label"
+										"pages.statusPages.form.customCSS.option.customCSS.label"
 									)}
 									placeholder={t(
-										"pages.statusPages.form.basicInfo.option.customDomain.placeholder"
-									)}
-									helperText={t(
-										"pages.statusPages.form.basicInfo.option.customDomain.helper"
+										"pages.statusPages.form.customCSS.option.customCSS.placeholder"
 									)}
+									error={!!fieldState.error}
+									helperText={fieldState.error?.message}
 								/>
-							</Stack>
-						}
-					/>
-				)}
-				{showStep(0) && (
-					<ConfigBox
-						title={t("pages.statusPages.form.monitors.title")}
-						subtitle={t("pages.statusPages.form.monitors.description")}
-						rightContent={
-							<FormMultiSelectField
-								sortable
-								name="monitors"
-								fieldLabel={t("pages.statusPages.form.monitors.option.monitors.label")}
-								placeholder={t(
-									"pages.statusPages.form.monitors.option.monitors.placeholder"
-								)}
-								options={monitors}
-								renderRow={(monitor) => (
-									<Typography flexGrow={1}>
-										{`${monitor.name} (${getMonitorTypeLabel(monitor.type, t)})`}
-									</Typography>
+							)}
+						/>
+					}
+				/>
+			)}
+			{showStep(1) && (
+				<ConfigBox
+					title={t("pages.statusPages.form.features.title")}
+					subtitle={t("pages.statusPages.form.features.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(LAYOUT.MD)}>
+							<Controller
+								name="showCharts"
+								control={control}
+								render={({ field }) => (
+									<FormControlLabel
+										control={
+											<Checkbox
+												checked={field.value}
+												onChange={field.onChange}
+											/>
+										}
+										label={t("pages.statusPages.form.features.option.showCharts.label")}
+									/>
 								)}
 							/>
-						}
-					/>
-				)}
-				{showStep(0) && (
-					<ConfigBox
-						title={t("pages.statusPages.form.timezone.title")}
-						subtitle={t("pages.statusPages.form.timezone.description")}
-						rightContent={
-							<FormAutocompleteField
-								name="timezone"
-								options={timezoneOptions}
-								fieldLabel={t("pages.statusPages.form.timezone.option.timezone.label")}
-								placeholder={t(
-									"pages.statusPages.form.timezone.option.timezone.placeholder"
+							<Controller
+								name="showInfrastructure"
+								control={control}
+								render={({ field }) => (
+									<FormControlLabel
+										control={
+											<Checkbox
+												checked={field.value}
+												onChange={field.onChange}
+											/>
+										}
+										label={t(
+											"pages.statusPages.form.features.option.showInfrastructure.label"
+										)}
+									/>
 								)}
 							/>
-						}
-					/>
-				)}
-				{showStep(1) && (
-					<ConfigBox
-						title={t("pages.statusPages.form.appearance.title")}
-						subtitle={t("pages.statusPages.form.appearance.description")}
-						rightContent={
-							<Stack spacing={theme.spacing(LAYOUT.MD)}>
-								<Stack alignItems={"center"}>
-									<LogoUploadField />
-								</Stack>
-								<FormColorField
-									name="color"
-									fieldLabel={t("pages.statusPages.form.appearance.option.color.label")}
-								/>
-							</Stack>
-						}
-					/>
-				)}
-				{showStep(1) && (
-					<ConfigBox
-						title={t("pages.statusPages.form.theme.title")}
-						subtitle={t("pages.statusPages.form.theme.description")}
-						rightContent={<ThemePickerField />}
-					/>
-				)}
-				{showStep(1) && (
-					<ConfigBox
-						title={t("pages.statusPages.form.customCSS.title")}
-						subtitle={t("pages.statusPages.form.customCSS.description")}
-						rightContent={
-							<FormTextField
-								name="customCSS"
-								multiline
-								rows={8}
-								fieldLabel={t("pages.statusPages.form.customCSS.option.customCSS.label")}
-								placeholder={t(
-									"pages.statusPages.form.customCSS.option.customCSS.placeholder"
-								)}
-							/>
-						}
-					/>
-				)}
-				{showStep(1) && (
-					<ConfigBox
-						title={t("pages.statusPages.form.features.title")}
-						subtitle={t("pages.statusPages.form.features.description")}
-						rightContent={
-							<Stack spacing={theme.spacing(LAYOUT.MD)}>
-								<FormCheckboxField
-									name="showCharts"
-									label={t("pages.statusPages.form.features.option.showCharts.label")}
-								/>
-								<FormCheckboxField
-									name="showInfrastructure"
-									label={t(
-										"pages.statusPages.form.features.option.showInfrastructure.label"
-									)}
-								/>
-								{/* 
-								<FormCheckboxField
-									name="showUptimePercentage"
+							{/* <Controller
+							name="showUptimePercentage"
+							control={control}
+							render={({ field }) => (
+								<FormControlLabel
+									control={
+										<Checkbox
+											checked={field.value}
+											onChange={field.onChange}
+										/>
+									}
 									label={t(
 										"pages.statusPages.form.features.option.showUptimePercentage.label"
 									)}
 								/>
-
-								<FormCheckboxField
-									name="showAdminLoginLink"
+							)}
+						/>
+						<Controller
+							name="showAdminLoginLink"
+							control={control}
+							render={({ field }) => (
+								<FormControlLabel
+									control={
+										<Checkbox
+											checked={field.value}
+											onChange={field.onChange}
+										/>
+									}
 									label={t(
 										"pages.statusPages.form.features.option.showAdminLoginLink.label"
 									)}
-								/> */}
-							</Stack>
-						}
-					/>
-				)}
-				<Stack
-					direction="row"
-					justifyContent={isCreate ? "space-between" : "flex-end"}
-				>
-					{isCreate && (
-						<Button
-							type="button"
-							variant="outlined"
-							color="secondary"
-							disabled={currentStep === 0}
-							onClick={handleBack}
-						>
-							{t("common.buttons.back")}
-						</Button>
-					)}
-					{isCreate && currentStep < totalSteps - 1 ? (
-						<Button
-							key="wizard-next"
-							type="button"
-							variant="contained"
-							color="primary"
-							onClick={handleNext}
-						>
-							{t("common.buttons.next")}
-						</Button>
-					) : (
-						<Button
-							key="wizard-save"
-							loading={isSubmitting}
-							type="submit"
-							variant="contained"
-							color="primary"
-						>
-							{t("common.buttons.save")}
-						</Button>
-					)}
-				</Stack>
-				<Dialog
-					open={isDeleteDialogOpen}
-					title={t("common.dialogs.delete.title")}
-					content={t("common.dialogs.delete.description")}
-					onConfirm={handleDeleteConfirm}
-					onCancel={handleDeleteCancel}
-					loading={isDeleting}
+								/>
+							)}
+						/> */}
+						</Stack>
+					}
 				/>
-			</BasePage>
-		</FormProvider>
+			)}
+			<Stack
+				direction="row"
+				justifyContent={isCreate ? "space-between" : "flex-end"}
+			>
+				{isCreate && (
+					<Button
+						type="button"
+						variant="outlined"
+						color="secondary"
+						disabled={currentStep === 0}
+						onClick={handleBack}
+					>
+						{t("common.buttons.back")}
+					</Button>
+				)}
+				{isCreate && currentStep < totalSteps - 1 ? (
+					<Button
+						key="wizard-next"
+						type="button"
+						variant="contained"
+						color="primary"
+						onClick={handleNext}
+					>
+						{t("common.buttons.next")}
+					</Button>
+				) : (
+					<Button
+						key="wizard-save"
+						loading={isSubmitting}
+						type="submit"
+						variant="contained"
+						color="primary"
+					>
+						{t("common.buttons.save")}
+					</Button>
+				)}
+			</Stack>
+			<Dialog
+				open={isDeleteDialogOpen}
+				title={t("common.dialogs.delete.title")}
+				content={t("common.dialogs.delete.description")}
+				onConfirm={handleDeleteConfirm}
+				onCancel={handleDeleteCancel}
+				loading={isDeleting}
+			/>
+		</BasePage>
 	);
 };
 

client/src/Pages/StatusPage/Status/index.tsx

@@ -1,6 +1,6 @@
 import { BasePage, BaseFallback } from "@/Components/design-elements";
 import Typography from "@mui/material/Typography";
-import { Link, useSearchParams } from "react-router-dom";
+import { Link } from "react-router-dom";
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 
@@ -9,11 +9,7 @@ import { useTranslation } from "react-i18next";
 import { useIsAdmin } from "@/Hooks/useIsAdmin";
 import { useLocation, useParams } from "react-router-dom";
 import { useGet } from "@/Hooks/UseApi";
-import {
-	isStatusPageRange,
-	resolveStatusPageTheme,
-	type StatusPageRange,
-} from "@/Types/StatusPage";
+import { resolveStatusPageTheme } from "@/Types/StatusPage";
 import {
 	PUBLIC_STATUS_PAGE_PREFIX,
 	type StatusPageResponse,
@@ -84,36 +80,21 @@ const StatusPageView = () => {
 	const { url } = useParams();
 	const isAdmin = useIsAdmin();
 	const location = useLocation();
-	const [searchParams, setSearchParams] = useSearchParams();
-
-	const onRangeChange = (next: StatusPageRange) => {
-		const updated = new URLSearchParams(searchParams);
-		if (next === "latest") {
-			updated.delete("range");
-		} else {
-			updated.set("range", next);
-		}
-		setSearchParams(updated, { replace: true });
-	};
 
 	const onCustomDomainHost = isCustomDomainHost();
 	const isPublic =
 		onCustomDomainHost || location.pathname.startsWith(PUBLIC_STATUS_PAGE_PREFIX);
 
-	const rawRange = searchParams.get("range");
-	const range = isStatusPageRange(rawRange) ? rawRange : "latest";
-
 	const apiUrl = buildStatusPageApiPath({
 		url,
 		useCustomDomain: onCustomDomainHost,
-		range,
 	});
 
 	const { data, isLoading, error } = useGet<StatusPageResponse>(
 		apiUrl,
 		{},
 		{
-			refreshInterval: range === "latest" ? 10000 : 60000,
+			refreshInterval: 10000,
 		}
 	);
 
@@ -169,10 +150,6 @@ const StatusPageView = () => {
 					statusPage={statusPage}
 					monitors={monitors}
 					config={themeConfig}
-					range={range}
-					onRangeChange={onRangeChange}
-					bucketTimezone={data.bucketTimezone ?? "Etc/UTC"}
-					checkTTLDays={data.checkTTLDays}
 				/>
 			</StatusPageThemeProvider>
 		);

client/src/Pages/StatusPage/Status/themes/bold/styles.ts

@@ -4,10 +4,8 @@ import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus";
 import { BOLD_SANS_STACK, MONO_STACK } from "../shared/fontStacks";
 import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 
-import type { BarKind, HeatCellKind } from "../shared/ChartCells";
-
-export type BoldHeatCell = HeatCellKind;
-export type BoldBarKind = BarKind;
+export type BoldHeatCell = "fast" | "med" | "slow" | "down" | "empty";
+export type BoldBarKind = "up" | "down" | "empty";
 export type BoldGaugeFill = "ok" | "warm" | "hot";
 
 export interface BoldStyles {
@@ -57,7 +55,6 @@ export const boldStyles = (
 		fast: tokens.up,
 		med: `color-mix(in srgb, ${tokens.up} 70%, #ffffff 30%)`,
 		slow: tokens.warn,
-		degraded: tokens.degraded,
 		down: tokens.down,
 		empty: tokens.border,
 	};
@@ -65,14 +62,12 @@ export const boldStyles = (
 		fast: `0 0 6px color-mix(in srgb, ${tokens.up} 18%, transparent)`,
 		med: `0 0 6px color-mix(in srgb, ${tokens.up} 18%, transparent)`,
 		slow: `0 0 6px color-mix(in srgb, ${tokens.warn} 20%, transparent)`,
-		degraded: `0 0 6px color-mix(in srgb, ${tokens.degraded} 20%, transparent)`,
 		down: `0 0 6px color-mix(in srgb, ${tokens.down} 20%, transparent)`,
 		empty: "none",
 	};
 
 	const barBg: Record<BoldBarKind, string> = {
 		up: tokens.up,
-		degraded: tokens.degraded,
 		down: tokens.down,
 		empty: tokens.border,
 	};

client/src/Pages/StatusPage/Status/themes/editorial/styles.ts

@@ -8,10 +8,8 @@ import {
 } from "../shared/fontStacks";
 import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 
-import type { BarKind, HeatCellKind } from "../shared/ChartCells";
-
-export type EditorialHeatCell = HeatCellKind;
-export type EditorialBarKind = BarKind;
+export type EditorialHeatCell = "fast" | "med" | "slow" | "down" | "empty";
+export type EditorialBarKind = "up" | "down" | "empty";
 export type EditorialGaugeFill = "ok" | "warm" | "hot";
 
 export interface EditorialStyles {
@@ -61,14 +59,12 @@ export const editorialStyles = (
 		fast: tokens.up,
 		med: `color-mix(in srgb, ${tokens.up} 60%, ${tokens.bg})`,
 		slow: tokens.warn,
-		degraded: tokens.degraded,
 		down: tokens.down,
 		empty: tokens.border,
 	};
 
 	const barBg: Record<EditorialBarKind, string> = {
 		up: tokens.up,
-		degraded: tokens.degraded,
 		down: tokens.down,
 		empty: tokens.border,
 	};

client/src/Pages/StatusPage/Status/themes/modern/styles.ts

@@ -5,10 +5,8 @@ import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus";
 import { MONO_STACK, SANS_STACK } from "../shared/fontStacks";
 import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 
-import type { BarKind, HeatCellKind } from "../shared/ChartCells";
-
-export type ModernHeatCell = HeatCellKind;
-export type ModernBarKind = BarKind;
+export type ModernHeatCell = "fast" | "med" | "slow" | "down" | "empty";
+export type ModernBarKind = "up" | "down" | "empty";
 export type ModernGaugeFill = "ok" | "warm" | "hot";
 
 export interface ModernStyles {
@@ -88,14 +86,12 @@ export const modernStyles = (
 		fast: `linear-gradient(180deg, ${tokens.up}, ${tokens.upStrong})`,
 		med: `linear-gradient(180deg, color-mix(in srgb, ${tokens.up} 70%, #ffffff 30%), ${tokens.up})`,
 		slow: `linear-gradient(180deg, ${tokens.warn}, ${tokens.degraded})`,
-		degraded: `linear-gradient(180deg, ${tokens.degraded}, color-mix(in srgb, ${tokens.degraded} 70%, #000000 30%))`,
 		down: `linear-gradient(180deg, ${tokens.down}, color-mix(in srgb, ${tokens.down} 70%, #000000 30%))`,
 		empty: tokens.border,
 	};
 
 	const barBg: Record<ModernBarKind, string> = {
 		up: tokens.up,
-		degraded: tokens.degraded,
 		down: tokens.down,
 		empty: tokens.border,
 	};

client/src/Pages/StatusPage/Status/themes/refined/styles.ts

@@ -3,10 +3,8 @@ import type { StatusPageThemeTokens } from "../tokens";
 import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus";
 import { MONO_STACK, SANS_STACK } from "../shared/fontStacks";
 
-import type { BarKind, HeatCellKind } from "../shared/ChartCells";
-
-export type RefinedHeatCell = HeatCellKind;
-export type RefinedBarKind = BarKind;
+export type RefinedHeatCell = "fast" | "med" | "slow" | "down" | "empty";
+export type RefinedBarKind = "up" | "down" | "empty";
 export type RefinedGaugeFill = "ok" | "warm" | "hot";
 import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 
@@ -73,14 +71,12 @@ export const refinedStyles = (
 		fast: tokens.up,
 		med: `color-mix(in srgb, ${tokens.up} 60%, #ffffff 40%)`,
 		slow: tokens.warn,
-		degraded: tokens.degraded,
 		down: tokens.down,
 		empty: tokens.border,
 	};
 
 	const barBg: Record<RefinedBarKind, string> = {
 		up: tokens.up,
-		degraded: tokens.degraded,
 		down: tokens.down,
 		empty: tokens.border,
 	};

client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx

@@ -1,19 +1,20 @@
+import { useMemo, useState } from "react";
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { TriangleAlert } from "lucide-react";
-
+import { useTranslation } from "react-i18next";
 import type { SxProps, Theme } from "@mui/material/styles";
 import type { Monitor } from "@/Types/Monitor";
-import type { StatusPage, StatusPageRange } from "@/Types/StatusPage";
-import {
-	getMonitorTypeLabel,
-	STATUS_PAGE_RANGE_DAYS,
-	STATUS_PAGE_RANGES,
-} from "@/Types/StatusPage";
+import type { StatusPage } from "@/Types/StatusPage";
+import { getMonitorTypeLabel } from "@/Types/StatusPage";
 import type { StatusPageThemeTokens } from "@/Pages/StatusPage/Status/themes/tokens";
-import { ThemedHeatmap } from "@/Pages/StatusPage/Status/themes/shared/ThemedHeatmap";
-import { ThemedHistogram } from "@/Pages/StatusPage/Status/themes/shared/ThemedHistogram";
+import {
+	ThemedHeatmap,
+	type HeatCellKind,
+} from "@/Pages/StatusPage/Status/themes/shared/ThemedHeatmap";
+import {
+	ThemedHistogram,
+	type BarKind,
+} from "@/Pages/StatusPage/Status/themes/shared/ThemedHistogram";
 import {
 	ThemedInfrastructure,
 	type GaugeFillLevel,
@@ -25,22 +26,10 @@ import {
 	resolveOverallStatus,
 	statusBadgeKey,
 } from "@/Pages/StatusPage/Status/themes/shared/overallStatus";
-import { formatPercentage } from "@/Utils/FormatUtils";
-import {
-	checksToCells,
-	dailyBucketsToCells,
-	type BarKind,
-	type HeatCellKind,
-} from "@/Pages/StatusPage/Status/themes/shared/ChartCells";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { Icon } from "@/Components/design-elements";
-
 import { useStatusPageTheme } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider";
-import { useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useTheme } from "@mui/material";
+import { formatPercentage } from "@/Utils/FormatUtils";
 
-type StatusPageMonitor = Monitor;
+type StatusPageMonitor = Monitor & { checks?: Monitor["recentChecks"] };
 
 export interface BaseStyles {
 	page: SxProps<Theme>;
@@ -93,22 +82,9 @@ interface Props {
 	statusPage: StatusPage;
 	monitors: StatusPageMonitor[];
 	config: ThemeConfig<any>;
-	range: StatusPageRange;
-	onRangeChange: (range: StatusPageRange) => void;
-	bucketTimezone: string;
-	checkTTLDays?: number;
 }
 
-export const BaseStatusPage = ({
-	statusPage,
-	monitors,
-	config,
-	range,
-	onRangeChange,
-	bucketTimezone,
-	checkTTLDays,
-}: Props) => {
-	const theme = useTheme();
+export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => {
 	const { t } = useTranslation();
 	const { tokens, mode } = useStatusPageTheme();
 	const styles = useMemo(
@@ -150,75 +126,33 @@ export const BaseStatusPage = ({
 			/>
 
 			{statusPage.showCharts && (
-				<Stack>
-					<Box sx={styles.chartSwitchWrap}>
+				<Box sx={styles.chartSwitchWrap}>
+					<Box
+						sx={styles.chartSwitch}
+						role="radiogroup"
+					>
 						<Box
-							sx={styles.chartSwitch}
-							role="radiogroup"
+							component="button"
+							type="button"
+							role="radio"
+							aria-checked={chartMode === "heatmap"}
+							onClick={() => setChartMode("heatmap")}
+							sx={styles.chartSwitchButton(chartMode === "heatmap")}
 						>
-							<Box
-								component="button"
-								type="button"
-								role="radio"
-								aria-checked={chartMode === "heatmap"}
-								onClick={() => setChartMode("heatmap")}
-								sx={styles.chartSwitchButton(chartMode === "heatmap")}
-							>
-								{t("pages.statusPages.monitorsList.chartTypeHeatmap")}
-							</Box>
-							<Box
-								component="button"
-								type="button"
-								role="radio"
-								aria-checked={chartMode === "histogram"}
-								onClick={() => setChartMode("histogram")}
-								sx={styles.chartSwitchButton(chartMode === "histogram")}
-							>
-								{t("pages.statusPages.monitorsList.chartTypeHistogram")}
-							</Box>
+							{t("pages.statusPages.monitorsList.chartTypeHeatmap")}
+						</Box>
+						<Box
+							component="button"
+							type="button"
+							role="radio"
+							aria-checked={chartMode === "histogram"}
+							onClick={() => setChartMode("histogram")}
+							sx={styles.chartSwitchButton(chartMode === "histogram")}
+						>
+							{t("pages.statusPages.monitorsList.chartTypeHistogram")}
 						</Box>
 					</Box>
-					<Box sx={styles.chartSwitchWrap}>
-						<Box
-							sx={styles.chartSwitch}
-							role="radiogroup"
-							aria-label={t("pages.statusPages.rangeSelectorAria")}
-						>
-							{STATUS_PAGE_RANGES.map((value) => (
-								<Box
-									component="button"
-									type="button"
-									role="radio"
-									key={value}
-									aria-checked={range === value}
-									onClick={() => onRangeChange(value)}
-									sx={styles.chartSwitchButton(range === value)}
-								>
-									{t(`pages.statusPages.range.${value}`)}
-								</Box>
-							))}
-						</Box>
-					</Box>
-					{range !== "latest" &&
-						checkTTLDays &&
-						STATUS_PAGE_RANGE_DAYS[range] > checkTTLDays && (
-							<Stack
-								mb={LAYOUT.XS}
-								alignSelf="flex-end"
-								direction="row"
-								alignItems="center"
-								gap={LAYOUT.XXS}
-							>
-								<Icon
-									icon={TriangleAlert}
-									color={theme.palette.warning.main}
-								/>
-								<Typography>
-									{t("pages.statusPages.rangeExceedsRetention", { days: checkTTLDays })}
-								</Typography>
-							</Stack>
-						)}
-				</Stack>
+				</Box>
 			)}
 
 			<Stack
@@ -232,16 +166,6 @@ export const BaseStatusPage = ({
 					const badgeTone = monitorBadgeTone(monitor.status);
 					const uptimePercentage = formatPercentage(monitor.uptimePercentage ?? 0);
 
-					const cells =
-						range === "latest"
-							? checksToCells(monitor.recentChecks ?? [])
-							: dailyBucketsToCells(
-									monitor.dailyChecks ?? [],
-									STATUS_PAGE_RANGE_DAYS[range],
-									bucketTimezone,
-									t
-								);
-
 					return (
 						<Box
 							component="li"
@@ -302,13 +226,13 @@ export const BaseStatusPage = ({
 							{showChart &&
 								(chartMode === "heatmap" ? (
 									<ThemedHeatmap
-										cells={cells}
+										checks={monitor.recentChecks ?? []}
 										containerSx={styles.heatmap}
 										cellSx={styles.heatmapCell}
 									/>
 								) : (
 									<ThemedHistogram
-										cells={cells}
+										checks={monitor.recentChecks ?? []}
 										containerSx={styles.histogram}
 										barSx={styles.bar}
 										statsSx={styles.chartStats}

client/src/Pages/StatusPage/Status/themes/shared/ChartCells.tsx

@@ -1,113 +0,0 @@
-import {
-	ThemedChartTooltip,
-	ThemedDailyTooltip,
-} from "@/Pages/StatusPage/Status/themes/shared/ThemedChartTooltip";
-import type { CheckSnapshot, DailyCheckBucket } from "@/Types/Check";
-import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
-import {
-	computeBarHeights,
-	computeDayBarHeights,
-	MIN_HEIGHT_PCT,
-} from "@/Utils/DataUtils";
-import { formatPercentage } from "@/Utils/FormatUtils";
-import { enumerateDays, formatMs } from "@/Utils/TimeUtils";
-import type { TFunction } from "i18next";
-
-export type BarKind = "up" | "degraded" | "down" | "empty";
-export type HeatCellKind = "fast" | "med" | "slow" | "degraded" | "down" | "empty";
-
-export interface ChartCell {
-	key: string;
-	barKind: BarKind;
-	heatKind: HeatCellKind;
-	heightPct: number; // histogram bar height
-	responseTime: number; // 0 for empty cells
-	tooltip: React.ReactNode | null;
-	ariaLabel: string;
-}
-
-const DAY_DOWN_THRESHOLD = 0.5;
-
-const classifyDay = (bucket: DailyCheckBucket): BarKind => {
-	if (bucket.totalChecks === 0) return "empty";
-	const upRatio = bucket.upChecks / bucket.totalChecks;
-	if (upRatio >= 1) return "up";
-	if (upRatio < DAY_DOWN_THRESHOLD) return "down";
-	return "degraded";
-};
-
-export const classifyResponseTime = (
-	status: boolean,
-	responseTime: number | undefined
-): Exclude<HeatCellKind, "empty"> => {
-	if (!status) return "down";
-	const rt = responseTime ?? 0;
-	if (rt > 500) return "slow";
-	if (rt > 250) return "med";
-	return "fast";
-};
-
-const emptyCell = (key: string): ChartCell => ({
-	key,
-	barKind: "empty",
-	heatKind: "empty",
-	heightPct: MIN_HEIGHT_PCT,
-	responseTime: 0,
-	tooltip: null,
-	ariaLabel: "",
-});
-
-const padCells = (cells: ChartCell[], length: number): ChartCell[] => [
-	...cells,
-	...Array.from({ length: Math.max(0, length - cells.length) }, (_, i) =>
-		emptyCell(`empty-${cells.length + i}`)
-	),
-];
-
-export const checksToCells = (checks: CheckSnapshot[]): ChartCell[] => {
-	const source = checks.slice(-MAX_RECENT_CHECKS);
-	const heights = computeBarHeights(source);
-	const cells = source.map(
-		(check, i): ChartCell => ({
-			key: check.id ?? String(i),
-			barKind: check.status ? "up" : "down",
-			heatKind: classifyResponseTime(check.status, check.responseTime),
-			heightPct: heights[i] ?? MIN_HEIGHT_PCT,
-			responseTime: check.responseTime ?? 0,
-			tooltip: <ThemedChartTooltip check={check} />,
-			ariaLabel: `${formatMs(check.responseTime)}, ${check.status ? "up" : "down"}`,
-		})
-	);
-	return padCells(cells, MAX_RECENT_CHECKS);
-};
-
-export const dailyBucketsToCells = (
-	buckets: DailyCheckBucket[],
-	days: number,
-	bucketTimezone: string,
-	t: TFunction
-): ChartCell[] => {
-	const byDate = new Map(buckets.map((b) => [b.date, b]));
-	const heights = computeDayBarHeights(buckets);
-	const enumerated = enumerateDays(days, bucketTimezone);
-	return enumerated.map((date) => {
-		const bucket = byDate.get(date);
-		if (!bucket) return emptyCell(`day-${date}`);
-		const barKind = classifyDay(bucket);
-		return {
-			key: `day-${date}`,
-			barKind,
-			heatKind:
-				barKind === "up"
-					? classifyResponseTime(true, bucket.avgResponseTime ?? 0)
-					: barKind,
-			heightPct: heights.get(date) ?? MIN_HEIGHT_PCT,
-			responseTime: bucket.avgResponseTime ?? 0,
-			tooltip: <ThemedDailyTooltip bucket={bucket} />,
-			ariaLabel: t("pages.statusPages.monitorsList.chart.dayAria", {
-				date,
-				uptime: formatPercentage(bucket.upChecks / bucket.totalChecks),
-			}),
-		};
-	});
-};

client/src/Pages/StatusPage/Status/themes/shared/ThemedChartTooltip.tsx

@@ -1,64 +0,0 @@
-import type { CheckSnapshot, DailyCheckBucket } from "@/Types/Check";
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { formatDateWithTz, formatMs } from "@/Utils/TimeUtils";
-import { formatPercentage } from "@/Utils/FormatUtils";
-import { useStatusPageTheme } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider";
-import { useTranslation } from "react-i18next";
-
-export const ThemedChartTooltip = ({ check }: { check: CheckSnapshot }) => {
-	const { t } = useTranslation();
-	const { timezone } = useStatusPageTheme();
-	return (
-		<Stack gap={0.25}>
-			<Typography
-				variant="caption"
-				fontWeight={600}
-			>
-				{check.status
-					? formatMs(check.responseTime)
-					: t("pages.statusPages.monitorsList.chart.downTooltip")}
-			</Typography>
-			<Typography
-				variant="caption"
-				sx={{ opacity: 0.8 }}
-			>
-				{formatDateWithTz(check.createdAt, "ddd, MMMM D, YYYY, HH:mm A", timezone)}
-			</Typography>
-		</Stack>
-	);
-};
-
-export const ThemedDailyTooltip = ({ bucket }: { bucket: DailyCheckBucket }) => {
-	const { t } = useTranslation();
-	return (
-		<Stack gap={0.25}>
-			<Typography
-				variant="caption"
-				fontWeight={600}
-			>
-				{bucket.date}
-			</Typography>
-			<Typography
-				variant="caption"
-				sx={{ opacity: 0.8 }}
-			>
-				{t("pages.statusPages.monitorsList.chart.dayUptime", {
-					uptime: formatPercentage(bucket.upChecks / bucket.totalChecks),
-					upChecks: bucket.upChecks.toLocaleString(),
-					totalChecks: bucket.totalChecks.toLocaleString(),
-				})}
-			</Typography>
-			{bucket.avgResponseTime !== null && (
-				<Typography
-					variant="caption"
-					sx={{ opacity: 0.8 }}
-				>
-					{t("pages.statusPages.monitorsList.chart.dayAvgResponse", {
-						value: formatMs(bucket.avgResponseTime),
-					})}
-				</Typography>
-			)}
-		</Stack>
-	);
-};

client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx

@@ -1,49 +1,86 @@
 import Tooltip from "@mui/material/Tooltip";
 import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
 import type { SxProps, Theme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
-import type {
-	ChartCell,
-	HeatCellKind,
-} from "@/Pages/StatusPage/Status/themes/shared/ChartCells";
+import type { CheckSnapshot } from "@/Types/Check";
+import { formatDateWithTz } from "@/Utils/TimeUtils";
+import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
+import { useStatusPageTheme } from "../StatusPageThemeProvider";
+
+const CELLS = MAX_RECENT_CHECKS;
+
+export type HeatCellKind = "fast" | "med" | "slow" | "down" | "empty";
 
 interface Props {
-	cells: ChartCell[];
+	checks: CheckSnapshot[];
 	containerSx: SxProps<Theme>;
 	cellSx: (kind: HeatCellKind) => SxProps<Theme>;
 }
 
-export const ThemedHeatmap = ({ cells, containerSx, cellSx }: Props) => {
+const classify = (check: CheckSnapshot): Exclude<HeatCellKind, "empty"> => {
+	if (!check.status) return "down";
+	const rt = check.responseTime ?? 0;
+	if (rt > 500) return "slow";
+	if (rt > 250) return "med";
+	return "fast";
+};
+
+export const ThemedHeatmap = ({ checks, containerSx, cellSx }: Props) => {
 	const { t } = useTranslation();
+	const { timezone } = useStatusPageTheme();
+
+	const source = checks.slice(-CELLS);
+	const padded: (CheckSnapshot | null)[] = [
+		...source,
+		...Array.from({ length: Math.max(0, CELLS - source.length) }, () => null),
+	];
 
 	return (
 		<Box
-			sx={[
-				...(Array.isArray(containerSx) ? containerSx : [containerSx]),
-				{ gridTemplateColumns: `repeat(${cells.length}, 1fr)` },
-			]}
+			sx={containerSx}
 			role="img"
 			aria-label={t("pages.statusPages.monitorsList.chart.heatmapAria")}
 		>
-			{cells.map((cell) => {
-				if (cell.heatKind === "empty") {
+			{padded.map((check, i) => {
+				if (!check) {
 					return (
 						<Box
-							key={cell.key}
+							key={`empty-${i}`}
 							sx={cellSx("empty")}
 						/>
 					);
 				}
+				const kind = classify(check);
+				const tooltipContent = (
+					<Stack gap={0.25}>
+						<Typography
+							variant="caption"
+							fontWeight={600}
+						>
+							{check.status
+								? `${check.responseTime} ms`
+								: t("pages.statusPages.monitorsList.chart.downTooltip")}
+						</Typography>
+						<Typography
+							variant="caption"
+							sx={{ opacity: 0.8 }}
+						>
+							{formatDateWithTz(check.createdAt, "ddd, MMMM D, YYYY, HH:mm A", timezone)}
+						</Typography>
+					</Stack>
+				);
 				return (
 					<Tooltip
-						key={cell.key}
-						title={cell.tooltip}
+						key={check.id ?? i}
+						title={tooltipContent}
 						arrow
 						placement="top"
 					>
 						<Box
-							sx={cellSx(cell.heatKind)}
-							aria-label={cell.ariaLabel}
+							sx={cellSx(kind)}
+							aria-label={`${check.responseTime} ms, ${check.status ? "up" : "down"}`}
 						/>
 					</Tooltip>
 				);

client/src/Pages/StatusPage/Status/themes/shared/ThemedHistogram.tsx

@@ -2,67 +2,101 @@ import { useMemo } from "react";
 import Tooltip from "@mui/material/Tooltip";
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
 import type { SxProps, Theme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
-import { formatMs } from "@/Utils/TimeUtils";
-import type {
-	BarKind,
-	ChartCell,
-} from "@/Pages/StatusPage/Status/themes/shared/ChartCells";
+import type { CheckSnapshot } from "@/Types/Check";
+import { formatDateWithTz } from "@/Utils/TimeUtils";
+import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
+import { useStatusPageTheme } from "../StatusPageThemeProvider";
+const CELLS = MAX_RECENT_CHECKS;
+const MIN_HEIGHT_PCT = 6;
+
+export type BarKind = "up" | "down" | "empty";
 
 interface Props {
-	cells: ChartCell[];
+	checks: CheckSnapshot[];
 	containerSx: SxProps<Theme>;
 	barSx: (kind: BarKind, heightPct: number) => SxProps<Theme>;
 	statsSx: SxProps<Theme>;
 	statsGap?: number;
 }
 
+const tone = (check: CheckSnapshot): Exclude<BarKind, "empty"> =>
+	check.status ? "up" : "down";
+
 export const ThemedHistogram = ({
-	cells,
+	checks,
 	containerSx,
 	barSx,
 	statsSx,
 	statsGap = 1,
 }: Props) => {
 	const { t } = useTranslation();
+	const { timezone } = useStatusPageTheme();
 
-	const { avg, peak } = useMemo(() => {
-		const valid = cells.filter((cell) => cell.responseTime > 0);
-		const maxRt = valid.length ? Math.max(...valid.map((cell) => cell.responseTime)) : 0;
+	const { padded, max, avg, peak } = useMemo(() => {
+		const source = checks.slice(-CELLS);
+		const out: (CheckSnapshot | null)[] = [
+			...source,
+			...Array.from({ length: Math.max(0, CELLS - source.length) }, () => null),
+		];
+		const valid = out.filter((c): c is CheckSnapshot => c !== null && c.responseTime > 0);
+		const maxRt = valid.length ? Math.max(...valid.map((c) => c.responseTime)) : 1;
 		const avgRt = valid.length
-			? valid.reduce((sum, cell) => sum + cell.responseTime, 0) / valid.length
+			? Math.round(valid.reduce((s, c) => s + c.responseTime, 0) / valid.length)
 			: 0;
-		return { avg: formatMs(avgRt), peak: formatMs(maxRt) };
-	}, [cells]);
+		return { padded: out, max: maxRt, avg: avgRt, peak: valid.length ? maxRt : 0 };
+	}, [checks]);
 
 	return (
 		<Stack gap={statsGap}>
-			<Box
-				sx={[
-					...(Array.isArray(containerSx) ? containerSx : [containerSx]),
-					{ gridTemplateColumns: `repeat(${cells.length}, 1fr)` },
-				]}
-			>
-				{cells.map((cell) => {
-					if (cell.barKind === "empty") {
+			<Box sx={containerSx}>
+				{padded.map((check, i) => {
+					if (!check) {
 						return (
 							<Box
-								key={cell.key}
-								sx={barSx("empty", cell.heightPct)}
+								key={`empty-${i}`}
+								sx={barSx("empty", MIN_HEIGHT_PCT)}
 							/>
 						);
 					}
+					const height = Math.max(
+						MIN_HEIGHT_PCT,
+						Math.round((check.responseTime / max) * 100)
+					);
+					const tooltipContent = (
+						<Stack gap={0.25}>
+							<Typography
+								variant="caption"
+								fontWeight={600}
+							>
+								{check.status
+									? `${check.responseTime} ms`
+									: t("pages.statusPages.monitorsList.chart.downTooltip")}
+							</Typography>
+							<Typography
+								variant="caption"
+								sx={{ opacity: 0.8 }}
+							>
+								{formatDateWithTz(
+									check.createdAt,
+									"ddd, MMMM D, YYYY, HH:mm A",
+									timezone
+								)}
+							</Typography>
+						</Stack>
+					);
 					return (
 						<Tooltip
-							key={cell.key}
-							title={cell.tooltip}
+							key={check.id ?? i}
+							title={tooltipContent}
 							arrow
 							placement="top"
 						>
 							<Box
-								sx={barSx(cell.barKind, cell.heightPct)}
-								aria-label={cell.ariaLabel}
+								sx={barSx(tone(check), height)}
+								aria-label={`${check.responseTime} ms`}
 							/>
 						</Tooltip>
 					);

client/src/Pages/StatusPage/Status/themes/shared/ThemedInfrastructure.tsx

@@ -18,7 +18,7 @@ export interface InfraSx {
 }
 
 interface Props {
-	monitor: Monitor;
+	monitor: Monitor & { checks?: Monitor["recentChecks"] };
 	sxApi: InfraSx;
 }
 
@@ -36,8 +36,7 @@ const heatLevel = (value: number): GaugeFillLevel =>
 
 export const ThemedInfrastructure = ({ monitor, sxApi }: Props) => {
 	const { t } = useTranslation();
-	const recentChecks = monitor.recentChecks ?? [];
-	const latest = recentChecks[recentChecks.length - 1];
+	const latest = monitor.recentChecks?.[0] ?? monitor.checks?.[0];
 
 	const renderEmpty = () => (
 		<Box sx={sxApi.emptySx}>{t("pages.statusPages.monitorsList.noData")}</Box>

client/src/Pages/Tags/create/index.tsx

@@ -1,12 +1,12 @@
 import { BasePage, ConfigBox } from "@/Components/design-elements";
-import { Button } from "@/Components/inputs";
+import { TextField, Button, ColorInput } from "@/Components/inputs";
 import Stack from "@mui/material/Stack";
 import { useTheme } from "@mui/material/styles";
 
 import { useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
-import { useForm, FormProvider } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { mutate } from "swr";
 import { useGet, usePost, usePatch } from "@/Hooks/UseApi";
@@ -14,8 +14,6 @@ import type { TagFormData } from "@/Validation/tag";
 import type { Tag } from "@/Types/Tag";
 import { useTranslation } from "react-i18next";
 import { useTagsForm } from "@/Hooks/useTagsForm";
-import { FormTextField } from "@/Components/inputs/forms/FormTextField";
-import { FormColorField } from "@/Components/inputs/forms/FormColorField";
 
 const TagsCreatePage = () => {
 	const { t } = useTranslation();
@@ -36,7 +34,7 @@ const TagsCreatePage = () => {
 		defaultValues: defaults,
 	});
 
-	const { reset, handleSubmit } = form;
+	const { control, reset, handleSubmit } = form;
 
 	useEffect(() => {
 		reset(defaults);
@@ -53,49 +51,67 @@ const TagsCreatePage = () => {
 	};
 
 	return (
-		<FormProvider {...form}>
-			<BasePage
-				component="form"
-				onSubmit={handleSubmit(onSubmit)}
-			>
-				<ConfigBox
-					title={t("pages.tags.form.name.title")}
-					subtitle={t("pages.tags.form.name.description")}
-					rightContent={
-						<FormTextField
-							name="name"
-							fieldLabel={t("pages.tags.form.name.optionName")}
-							placeholder={t("pages.tags.form.name.placeholder")}
-						/>
-					}
-				/>
-				<ConfigBox
-					title={t("pages.tags.form.color.title")}
-					subtitle={t("pages.tags.form.color.description")}
-					rightContent={
-						<FormColorField
-							name="color"
-							fieldLabel={t("pages.tags.form.color.optionName")}
-						/>
-					}
-				/>
+		<BasePage
+			component="form"
+			onSubmit={handleSubmit(onSubmit)}
+		>
+			<ConfigBox
+				title={t("pages.tags.form.name.title")}
+				subtitle={t("pages.tags.form.name.description")}
+				rightContent={
+					<Controller
+						name="name"
+						control={control}
+						defaultValue={defaults.name}
+						render={({ field, fieldState }) => (
+							<TextField
+								{...field}
+								type="text"
+								fieldLabel={t("pages.tags.form.name.optionName")}
+								placeholder={t("pages.tags.form.name.placeholder")}
+								fullWidth
+								error={!!fieldState.error}
+								helperText={fieldState.error?.message ?? ""}
+							/>
+						)}
+					/>
+				}
+			/>
+			<ConfigBox
+				title={t("pages.tags.form.color.title")}
+				subtitle={t("pages.tags.form.color.description")}
+				rightContent={
+					<Controller
+						name="color"
+						control={control}
+						defaultValue={defaults.color}
+						render={({ field }) => (
+							<ColorInput
+								format="hex"
+								value={field.value}
+								onChange={field.onChange}
+								fieldLabel={t("pages.tags.form.color.optionName")}
+							/>
+						)}
+					/>
+				}
+			/>
 
-				<Stack
-					direction="row"
-					justifyContent="flex-end"
-					spacing={theme.spacing(2)}
+			<Stack
+				direction="row"
+				justifyContent="flex-end"
+				spacing={theme.spacing(2)}
+			>
+				<Button
+					loading={isSubmitting || isPatching}
+					type="submit"
+					variant="contained"
+					color="primary"
 				>
-					<Button
-						loading={isSubmitting || isPatching}
-						type="submit"
-						variant="contained"
-						color="primary"
-					>
-						{t("common.buttons.save")}
-					</Button>
-				</Stack>
-			</BasePage>
-		</FormProvider>
+					{t("common.buttons.save")}
+				</Button>
+			</Stack>
+		</BasePage>
 	);
 };
 

client/src/Pages/Uptime/Details/Components/GeoChecksTable.tsx

@@ -8,9 +8,10 @@ import Box from "@mui/material/Box";
 import type { Header } from "@/Components/design-elements";
 import type { FlatGeoCheck } from "@/Types/GeoCheck";
 import { useTranslation } from "react-i18next";
-import { formatDateWithTz, formatMs } from "@/Utils/TimeUtils";
+import { formatDateWithTz } from "@/Utils/TimeUtils";
 import type { RootState } from "@/Types/state";
 import { useSelector } from "react-redux";
+import prettyMilliseconds from "pretty-ms";
 
 export const GeoChecksTable = ({
 	geoChecks,
@@ -68,7 +69,7 @@ export const GeoChecksTable = ({
 			content: t("common.table.headers.responseTime"),
 			render: (row) => {
 				if (!row.timings?.total) return "N/A";
-				return formatMs(row.timings.total);
+				return prettyMilliseconds(row.timings.total, { compact: true });
 			},
 		},
 	];

client/src/Pages/Uptime/Details/index.tsx

@@ -38,11 +38,6 @@ interface CertificateResponse {
 	certificateDate: string;
 }
 
-interface DomainResponse {
-	domain: string;
-	expiryDate: string;
-}
-
 const UptimeDetailsPage = () => {
 	const theme = useTheme();
 	const isAdmin = useIsAdmin();
@@ -62,6 +57,7 @@ const UptimeDetailsPage = () => {
 		}
 		const params = new URLSearchParams();
 		params.append("dateRange", dateRange);
+		params.append("normalize", "true");
 		return `/monitors/uptime/details/${monitorId}?${params.toString()}`;
 	}, [monitorId, dateRange]);
 
@@ -76,7 +72,6 @@ const UptimeDetailsPage = () => {
 	);
 
 	const monitorData = monitorDetailsData?.monitorData;
-
 	const monitor = monitorData?.monitor;
 	const monitorStats = monitorDetailsData?.monitorStats ?? null;
 
@@ -107,29 +102,6 @@ const UptimeDetailsPage = () => {
 		);
 	}, [certificateData, uiTimezone]);
 
-	// Domain expiry fetch - only for HTTP monitors
-	const domainUrl = useMemo(() => {
-		if (!monitorId || monitor?.type !== "http") {
-			return null;
-		}
-		return `/monitors/domain/${monitorId}`;
-	}, [monitorId, monitor?.type]);
-
-	const { data: domainData } = useGet<DomainResponse>(
-		domainUrl,
-		{},
-		{ revalidateOnFocus: false }
-	);
-
-	const domainExpiry = useMemo(() => {
-		if (!domainData?.expiryDate) {
-			return undefined;
-		}
-		return (
-			formatDateWithTz(domainData.expiryDate, certificateDateFormat, uiTimezone) ?? "N/A"
-		);
-	}, [domainData, uiTimezone]);
-
 	const checksUrl = useMemo(() => {
 		if (!monitorId || !monitor?.type) {
 			return null;
@@ -193,18 +165,10 @@ const UptimeDetailsPage = () => {
 		{ keepPreviousData: true, revalidateOnFocus: false }
 	);
 
-	if (!monitorData) {
-		return null;
-	}
-
-	if (!monitor) {
-		return null;
-	}
-
 	const geoChecksForTable = geoChecksTableData?.geoChecks ?? [];
 	const geoChecksCount = geoChecksTableData?.geoChecksCount ?? 0;
 
-	const geoLocations = monitor.geoCheckLocations;
+	const geoLocations = monitor?.geoCheckLocations;
 
 	const checks = checksData?.checks ?? [];
 	const checksCount = checksData?.checksCount ?? 0;
@@ -221,7 +185,6 @@ const UptimeDetailsPage = () => {
 				monitor={monitor}
 				monitorStats={monitorStats}
 				certificateExpiry={certificateExpiry}
-				domainExpiry={domainExpiry}
 			/>
 			<HeaderTimeRange
 				isLoading={monitorIsLoading || checksIsLoading}
@@ -252,7 +215,7 @@ const UptimeDetailsPage = () => {
 				/>
 			</Stack>
 			<HistogramDetails
-				checks={monitorData.groupedChecks}
+				checks={monitorData?.groupedChecks || []}
 				range={dateRange}
 			/>
 			<ChecksTable

client/src/Types/Check.ts

@@ -149,15 +149,6 @@ export interface GroupedCheck {
 	totalChecks: number;
 }
 
-export interface GroupedUptimeCheck extends GroupedCheck {
-	avgDns: number;
-	avgTcp: number;
-	avgTls: number;
-	avgRequest: number;
-	avgFirstByte: number;
-	avgDownload: number;
-}
-
 export interface PageSpeedGroupedCheck {
 	bucketDate: string;
 	performance: number;
@@ -250,53 +241,18 @@ export interface ChecksSummary {
 	downChecks: number;
 }
 
-export type SnapshotCpuInfo = Pick<
-	CheckCpuInfo,
-	| "physical_core"
-	| "logical_core"
-	| "frequency"
-	| "current_frequency"
-	| "temperature"
-	| "usage_percent"
->;
-export type SnapshotMemoryInfo = Pick<
-	CheckMemoryInfo,
-	"total_bytes" | "used_bytes" | "usage_percent"
->;
-export type SnapshotDiskInfo = Pick<
-	CheckDiskInfo,
-	"device" | "total_bytes" | "used_bytes" | "usage_percent"
->;
-export type SnapshotHostInfo = Pick<CheckHostInfo, "os" | "platform" | "pretty_name">;
-
-export type CheckSnapshot = Pick<
-	Check,
-	| "id"
-	| "status"
-	| "responseTime"
-	| "statusCode"
-	| "message"
-	| "createdAt"
-	| "accessibility"
-	| "bestPractices"
-	| "seo"
-	| "performance"
-	| "audits"
-> & {
-	cpu?: SnapshotCpuInfo;
-	memory?: SnapshotMemoryInfo;
-	disk?: SnapshotDiskInfo[];
-	host?: SnapshotHostInfo;
+export type CheckSnapshot = Omit<Check, "metadata" | "__v" | "updatedAt"> & {
+	originalResponseTime: number;
 };
+
 export interface HasResponseTime {
 	responseTime: number;
 }
 
-export interface DailyCheckBucket {
-	monitorId: string;
-	date: string;
-	totalChecks: number;
-	upChecks: number;
-	downChecks: number;
-	avgResponseTime: number | null; // null when no check that day recorded a response time
-}
+export type NormalizedCheck<T extends HasResponseTime = Check> = T & {
+	originalResponseTime: number;
+};
+
+export type NormalizedUptimeCheck<T extends GroupedCheck = GroupedCheck> = T & {
+	originalAvgResponseTime: number;
+};

client/src/Types/Monitor.ts

@@ -1,9 +1,4 @@
-import type {
-	GroupedCheck,
-	CheckSnapshot,
-	GroupedUptimeCheck,
-	DailyCheckBucket,
-} from "@/Types/Check";
+import type { GroupedCheck, CheckSnapshot } from "@/Types/Check";
 import type { PageSpeedGroupedCheck } from "@/Types/Check";
 import type { GeoContinent } from "@/Types/GeoCheck";
 export type { GeoContinent } from "@/Types/GeoCheck";
@@ -25,56 +20,6 @@ export const MonitorTypes = [
 ] as const;
 export type MonitorType = (typeof MonitorTypes)[number];
 
-// The subset offered by the CreateMonitor type selector, in display order.
-// pagespeed/hardware are set by their own pages; unknown is never selectable.
-export const SelectableMonitorTypes = [
-	"http",
-	"ping",
-	"docker",
-	"port",
-	"game",
-	"grpc",
-	"websocket",
-	"dns",
-] as const;
-export type SelectableMonitorType = (typeof SelectableMonitorTypes)[number];
-
-// Irregular i18n key fragments shared by the type selector's label
-// (pages.common.monitors.monitorTypes.<fragment>), its description
-// (pages.createMonitor.form.type.<fragment>Description), and status page
-// type labels (via getMonitorTypeLabel). Covers every type with a label;
-// only selectable types have description keys.
-export const monitorTypeLabelKey: Record<SelectableMonitorType, string> &
-	Partial<Record<MonitorType, string>> = {
-	http: "optionHttp",
-	ping: "optionPing",
-	docker: "optionDocker",
-	port: "optionPort",
-	game: "optionGame",
-	grpc: "optionGrpc",
-	websocket: "optionWebSocket",
-	dns: "optionDns",
-	hardware: "optionHardware",
-	pagespeed: "optionPagespeed",
-};
-
-export const MonitorIntervalOptions = [
-	{ value: 15000, labelKey: "fifteenSeconds" },
-	{ value: 30000, labelKey: "thirtySeconds" },
-	{ value: 60000, labelKey: "oneMinute" },
-	{ value: 120000, labelKey: "twoMinutes" },
-	{ value: 180000, labelKey: "threeMinutes" },
-	{ value: 240000, labelKey: "fourMinutes" },
-	{ value: 300000, labelKey: "fiveMinutes" },
-	{ value: 600000, labelKey: "tenMinutes" },
-	{ value: 900000, labelKey: "fifteenMinutes" },
-	{ value: 1800000, labelKey: "thirtyMinutes" },
-] as const;
-
-export const GeoCheckIntervalOptions = MonitorIntervalOptions.filter(
-	({ value }) => value >= 300000
-);
-
 export const DnsRecordTypes = ["A", "AAAA", "CNAME", "MX", "TXT", "NS"] as const;
 export type DnsRecordType = (typeof DnsRecordTypes)[number];
 
@@ -97,9 +42,7 @@ export const MonitorStatuses = [
 ] as const;
 export type MonitorStatus = (typeof MonitorStatuses)[number];
 
-export const MonitorMatchMethods = ["equal", "include", "regex"] as const;
-export type MonitorMatchMethod = (typeof MonitorMatchMethods)[number] | "";
-export const DefaultMonitorMatchMethod: MonitorMatchMethod = "equal";
+export type MonitorMatchMethod = "equal" | "include" | "regex" | "";
 
 export const PageSpeedStrategies = ["desktop", "mobile"] as const;
 export type PageSpeedStrategy = (typeof PageSpeedStrategies)[number];
@@ -154,7 +97,6 @@ export interface Monitor {
 	dnsServer?: string;
 	dnsRecordType?: DnsRecordType;
 	recentChecks: CheckSnapshot[];
-	dailyChecks?: DailyCheckBucket[];
 	createdAt: string;
 	updatedAt: string;
 }
@@ -195,7 +137,7 @@ export interface MonitorStats {
 
 export interface MonitorData {
 	monitor: Monitor;
-	groupedChecks: GroupedUptimeCheck[];
+	groupedChecks: GroupedCheck[];
 	groupedUpChecks: GroupedCheck[];
 	groupedDownChecks: GroupedCheck[];
 	groupedAvgResponseTime: number;

client/src/Types/Notification.ts

@@ -3,7 +3,6 @@ export const NotificationChannels = [
 	"slack",
 	"discord",
 	"webhook",
-	"rocket_chat",
 	"pager_duty",
 	"matrix",
 	"teams",

client/src/Types/StatusPage.ts

@@ -1,13 +1,24 @@
-import { monitorTypeLabelKey } from "@/Types/Monitor";
 import type { Monitor, MonitorType } from "@/Types/Monitor";
 export type MonitorDisplayType = "uptime" | "infrastructure";
 
+export const MONITOR_TYPE_KEYS: Partial<Record<MonitorType, string>> = {
+	http: "pages.common.monitors.monitorTypes.optionHttp",
+	ping: "pages.common.monitors.monitorTypes.optionPing",
+	docker: "pages.common.monitors.monitorTypes.optionDocker",
+	port: "pages.common.monitors.monitorTypes.optionPort",
+	game: "pages.common.monitors.monitorTypes.optionGame",
+	grpc: "pages.common.monitors.monitorTypes.optionGrpc",
+	websocket: "pages.common.monitors.monitorTypes.optionWebSocket",
+	hardware: "pages.common.monitors.monitorTypes.optionHardware",
+	pagespeed: "pages.common.monitors.monitorTypes.optionPagespeed",
+};
+
 export const getMonitorTypeLabel = (
 	type: MonitorType,
 	t: (key: string) => string
 ): string => {
-	const fragment = monitorTypeLabelKey[type];
-	return fragment ? t(`pages.common.monitors.monitorTypes.${fragment}`) : type;
+	const key = MONITOR_TYPE_KEYS[type];
+	return key ? t(key) : type;
 };
 
 export const STATUS_PAGE_THEMES = [
@@ -24,20 +35,6 @@ export const STATUS_PAGE_THEME_MODES = ["auto", "light", "dark"] as const;
 export type StatusPageThemeMode = (typeof STATUS_PAGE_THEME_MODES)[number];
 export const DEFAULT_STATUS_PAGE_THEME_MODE: StatusPageThemeMode = "auto";
 
-export const STATUS_PAGE_DAY_RANGES = ["30d", "60d", "90d"] as const;
-export type StatusPageDayRange = (typeof STATUS_PAGE_DAY_RANGES)[number];
-export const STATUS_PAGE_RANGES = ["latest", ...STATUS_PAGE_DAY_RANGES] as const;
-export type StatusPageRange = (typeof STATUS_PAGE_RANGES)[number];
-
-export const STATUS_PAGE_RANGE_DAYS: Record<StatusPageDayRange, number> = {
-	"30d": 30,
-	"60d": 60,
-	"90d": 90,
-};
-
-export const isStatusPageRange = (value: string | null): value is StatusPageRange =>
-	STATUS_PAGE_RANGES.some((range) => range === value);
-
 export const resolveStatusPageTheme = (
 	value: string | null | undefined
 ): StatusPageTheme =>
@@ -81,7 +78,4 @@ export interface StatusPage {
 export interface StatusPageResponse {
 	statusPage: StatusPage;
 	monitors: Monitor[];
-	range?: StatusPageDayRange; // present only when range !== "latest"
-	bucketTimezone?: string;
-	checkTTLDays?: number;
 }

client/src/Utils/DataUtils.ts

@@ -1,3 +1,47 @@
+const MIN_OUT = 10;
+const MAX_OUT = 100;
+
+export const normalizeResponseTimes = <T, K extends keyof T>(
+	checks: T[],
+	key: K
+): (T & { normalResponseTime: number })[] => {
+	if (!Array.isArray(checks) || checks.length === 0)
+		return checks as (T & {
+			normalResponseTime: number;
+		})[];
+
+	if (checks.length === 1) {
+		return [
+			{
+				...checks[0],
+				normalResponseTime: 50,
+			},
+		];
+	}
+
+	const getVal = (check: T): number => {
+		const v = check[key] as unknown;
+		return typeof v === "number" && Number.isFinite(v) ? v : 0;
+	};
+
+	const { min, max } = checks.reduce(
+		(acc, check) => {
+			const v = getVal(check);
+			if (v > acc.max) acc.max = v;
+			if (v < acc.min) acc.min = v;
+			return acc;
+		},
+		{ max: -Infinity, min: Infinity }
+	);
+
+	const range = max - min || 1;
+
+	return checks.map((check) => ({
+		...check,
+		normalResponseTime: MIN_OUT + ((getVal(check) - min) * (MAX_OUT - MIN_OUT)) / range,
+	}));
+};
+
 // Interpolate color between three theme colors over 0-100 range.
 // 0-50 => start (success.light), 50-75 => mid (warning.light), 75-100 => end (error.light)
 export const getResponseColor = (
@@ -85,53 +129,3 @@ export const getResponseColor = (
 	}
 	return normalizeToHex(safe.end);
 };
-
-export const MIN_HEIGHT_PCT = 8;
-const CAP_PERCENTILE = 95;
-
-const percentile = (sortedValues: number[], p: number): number => {
-	const index = (p / 100) * (sortedValues.length - 1);
-	const lower = Math.floor(index);
-	const upper = lower + 1;
-	const weight = index % 1;
-	if (upper >= sortedValues.length) return sortedValues[lower];
-	return sortedValues[lower] * (1 - weight) + sortedValues[upper] * weight;
-};
-
-export const computeBarHeights = (
-	checks: { responseTime?: number | null }[]
-): number[] => {
-	const values = checks.map((check) => {
-		return typeof check.responseTime === "number" && Number.isFinite(check.responseTime)
-			? Math.max(0, check.responseTime)
-			: 0;
-	});
-
-	const sorted = values.slice().sort((a, b) => a - b);
-	const cap = percentile(sorted, CAP_PERCENTILE);
-	if (cap <= 0) return values.map(() => MIN_HEIGHT_PCT);
-	return values.map((value) => {
-		return Math.max(MIN_HEIGHT_PCT, Math.min(100, (value / cap) * 100));
-	});
-};
-
-export const computeDayBarHeights = (
-	buckets: { date: string; avgResponseTime: number | null }[]
-): Map<string, number> => {
-	const values = buckets.map((bucket) =>
-		typeof bucket.avgResponseTime === "number" && Number.isFinite(bucket.avgResponseTime)
-			? Math.max(0, bucket.avgResponseTime)
-			: 0
-	);
-
-	const sorted = values.slice().sort((a, b) => a - b);
-	const cap = percentile(sorted, CAP_PERCENTILE);
-	return new Map(
-		buckets.map((bucket, i) => [
-			bucket.date,
-			cap <= 0
-				? MIN_HEIGHT_PCT
-				: Math.max(MIN_HEIGHT_PCT, Math.min(100, (values[i] / cap) * 100)),
-		])
-	);
-};

client/src/Utils/Theme/Palette.ts

@@ -20,19 +20,8 @@ export const colors = {
 	brandGreen: "#13715B",
 	brandGreenLight: "#4DAF94",
 	green200: "#ECF7F2",
-	green700: "#008300",
 	yellow200: "#FFF4E5",
-	yellow500: "#EDA100",
-	yellow600: "#C98500",
 	orange500: "#FFA500",
-	orange600: "#EB6834",
-	orange700: "#D95926",
-	blue400: "#3987E5",
-	blue500: "#2A78D6",
-	aqua500: "#1BAF7A",
-	aqua600: "#199E70",
-	magenta300: "#E87BA4",
-	magenta400: "#D55181",
 };
 
 export const lightPalette = {
@@ -49,16 +38,6 @@ export const lightPalette = {
 		running: colors.green200,
 		paused: colors.yellow200,
 	},
-	chart: {
-		phases: {
-			dns: colors.magenta300,
-			tcp: colors.orange600,
-			tls: colors.aqua500,
-			request: colors.yellow500,
-			firstByte: colors.blue500,
-			download: colors.green700,
-		},
-	},
 };
 
 export const darkPalette = {
@@ -79,14 +58,4 @@ export const darkPalette = {
 		running: alpha(colors.brandGreen, 0.18),
 		paused: alpha(colors.orange500, 0.18),
 	},
-	chart: {
-		phases: {
-			dns: colors.magenta400,
-			tcp: colors.orange700,
-			tls: colors.aqua600,
-			request: colors.yellow600,
-			firstByte: colors.blue500,
-			download: colors.green700,
-		},
-	},
 };

client/src/Utils/Theme/Theme.ts

@@ -16,30 +16,10 @@ declare module "@mui/material/styles" {
 	interface Palette {
 		sidebar: { accent: string };
 		rowStatus: { running: string; paused: string };
-		chart: {
-			phases: {
-				dns: string;
-				tcp: string;
-				tls: string;
-				request: string;
-				firstByte: string;
-				download: string;
-			};
-		};
 	}
 	interface PaletteOptions {
 		sidebar?: { accent: string };
 		rowStatus?: { running: string; paused: string };
-		chart?: {
-			phases: {
-				dns: string;
-				tcp: string;
-				tls: string;
-				request: string;
-				firstByte: string;
-				download: string;
-			};
-		};
 	}
 }
 
@@ -124,14 +104,6 @@ export const theme = (mode: string, palette: any) =>
 					disableTouchRipple: true,
 					disableFocusRipple: true,
 				},
-				styleOverrides: {
-					root: ({ theme }) => ({
-						"&.Mui-focusVisible": {
-							outline: `1px solid ${theme.palette.primary.main}`,
-							outlineOffset: 2,
-						},
-					}),
-				},
 			},
 			MuiIconButton: {
 				defaultProps: {

client/src/Utils/TimeUtils.ts

@@ -3,7 +3,6 @@ import duration from "dayjs/plugin/duration";
 import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
 import customParseFormat from "dayjs/plugin/customParseFormat";
-import prettyMilliseconds from "pretty-ms";
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -78,60 +77,3 @@ export const formatTimestamp = (timestamp: string | number | null): string => {
 	const date = new Date(timestamp);
 	return date.toLocaleString();
 };
-
-const DISPLAY_UNITS = [MS_PER_DAY, MS_PER_HOUR, MS_PER_MINUTE, MS_PER_SECOND];
-
-// pretty-ms floors seconds-and-above and truncates fractional ms, so values
-// must be rounded to their display unit first to land on the nearest whole
-// unit (53.6 → "54 ms", 1937 → "2 s", 59500 → "1 m").
-const roundToDisplayUnit = (ms: number): number => {
-	for (const unit of DISPLAY_UNITS) {
-		if (ms >= unit) return Math.round(ms / unit) * unit;
-	}
-	return ms >= 1 ? Math.round(ms) : ms;
-};
-
-export const formatMs = (ms: number, hasSpace: boolean = true): string => {
-	const formatted = prettyMilliseconds(roundToDisplayUnit(ms), {
-		compact: true,
-		formatSubMilliseconds: true,
-		secondsDecimalDigits: 0,
-	});
-
-	if (hasSpace) {
-		return formatted.replace(/^(\d+)(\D+)$/, "$1 $2");
-	}
-	return formatted;
-};
-
-export const formatDuration = (ms: number, verbose: boolean = false, hasSpace = true) => {
-	if (verbose) {
-		return prettyMilliseconds(ms, { verbose: true });
-	}
-
-	const formatted = prettyMilliseconds(ms, {
-		unitCount: 2,
-		secondsDecimalDigits: 0,
-		millisecondsDecimalDigits: 0,
-	});
-
-	if (hasSpace) {
-		return formatted.replace(/^(\d+)(\D+)$/, "$1 $2");
-	}
-	return formatted;
-};
-
-export const enumerateDays = (days: number, timeZone: string): string[] => {
-	const formatter = new Intl.DateTimeFormat("en-CA", {
-		timeZone,
-		year: "numeric",
-		month: "2-digit",
-		day: "2-digit",
-	});
-	const [year, month, day] = formatter.format(new Date()).split("-").map(Number);
-	const todayUtc = Date.UTC(year, month - 1, day);
-	const DAY_MS = 24 * 60 * 60 * 1000;
-	return Array.from({ length: days }, (_, i) =>
-		new Date(todayUtc - (days - 1 - i) * DAY_MS).toISOString().slice(0, 10)
-	);
-};

client/src/Utils/logger.ts

@@ -16,7 +16,11 @@ interface ErrorLogData {
 	timestamp: string;
 	level: LogLevel;
 	message: string;
-	error?: Record<string, unknown>;
+	error?: {
+		message: string;
+		name: string;
+		stack?: string;
+	};
 	context?: LogContext;
 	url: string;
 	userAgent: string;
@@ -30,127 +34,14 @@ const shouldLog = (level: LogLevel): boolean => {
 	return LOG_LEVEL_PRIORITY[level] >= configuredPriority;
 };
 
-/**
- * Keys whose values must never reach the console. Matched case-insensitively
- * against a substring of the key, so `newPassword` and `X-Api-Key` are covered
- * by `password` and `apikey` respectively.
- */
-const SENSITIVE_KEY_PATTERNS = [
-	"password",
-	"passwd",
-	"pwd",
-	"secret",
-	"token",
-	"authorization",
-	"apikey",
-	"credential",
-	"passphrase",
-	"cookie",
-	"jwt",
-	"privatekey",
-	"sessionid",
-	"csrf",
-] as const;
+const formatError = (error?: Error) => {
+	if (!error) return undefined;
 
-const REDACTED = "[REDACTED]";
-
-const isSensitiveKey = (key: string): boolean => {
-	const normalized = key.toLowerCase().replace(/[-_]/g, "");
-	return SENSITIVE_KEY_PATTERNS.some((pattern) => normalized.includes(pattern));
-};
-
-/**
- * Opaque browser types that must not be walked: they carry no useful log data
- * and may hold large buffers. Resolved defensively because these globals are
- * absent in SSR and some test environments.
- */
-const isOpaqueObject = (value: object): boolean => {
-	const opaqueTypes = ["FormData", "Blob", "File", "ArrayBuffer"] as const;
-	return opaqueTypes.some((name) => {
-		const ctor = (globalThis as Record<string, unknown>)[name];
-		return typeof ctor === "function" && value instanceof (ctor as new () => object);
-	});
-};
-
-/**
- * Deep-copies a value with sensitive fields replaced by a placeholder. Walks
- * class instances as well as object literals, so a credential on a DTO is
- * redacted too. Opaque types (FormData, Blob) render as a type marker.
- *
- * `ancestors` tracks only the current path, so the same object appearing twice
- * as a sibling is still rendered in full — only a genuine cycle is cut.
- */
-const redactSensitive = (value: unknown, ancestors: readonly object[] = []): unknown => {
-	if (value === null || typeof value !== "object") return value;
-
-	if (ancestors.includes(value)) return "[CIRCULAR]";
-
-	if (isOpaqueObject(value)) return `[${value.constructor?.name ?? "Object"}]`;
-
-	// Dates and RegExps stringify usefully on their own; walking them yields nothing.
-	if (value instanceof Date || value instanceof RegExp) return value;
-
-	const path = [...ancestors, value];
-
-	if (Array.isArray(value)) {
-		return value.map((item) => redactSensitive(item, path));
-	}
-
-	// Walk own enumerable properties of ANY object, including class instances —
-	// a credential on a DTO must be redacted just as it is on an object literal.
-	const result: Record<string, unknown> = {};
-	for (const [key, entry] of Object.entries(value as Record<string, unknown>)) {
-		result[key] = isSensitiveKey(key) ? REDACTED : redactSensitive(entry, path);
-	}
-	return result;
-};
-
-/**
- * Parses a serialized request body so its fields can be redacted by key. A body
- * that is not JSON is replaced wholesale rather than logged raw, since an
- * unparseable payload (e.g. form-encoded) may still carry credentials.
- */
-const safeJsonParse = (raw: string): unknown => {
-	try {
-		const parsed = JSON.parse(raw);
-		return typeof parsed === "object" && parsed !== null ? parsed : "[UNPARSED BODY]";
-	} catch {
-		return "[UNPARSED BODY]";
-	}
-};
-
-/**
- * Errors are logged as-is by the debug branches, but an AxiosError carries the
- * outgoing request on `config` — including the serialized body and the
- * Authorization header — so the raw object cannot be handed to the console.
- * Returns a redacted plain object safe to print.
- */
-const toSafeError = (error: Error): Record<string, unknown> => {
-	const candidate = error as unknown as {
-		config?: { url?: string; method?: string; data?: unknown; headers?: unknown };
-		response?: { status?: number };
-	};
-
-	const safe: Record<string, unknown> = {
-		name: error.name,
+	return {
 		message: error.message,
+		name: error.name,
 		stack: error.stack,
 	};
-
-	if (candidate.config) {
-		const { url, method, data, headers } = candidate.config;
-		safe.config = {
-			url,
-			method,
-			// Axios serializes the request body to a string, so key-based
-			// redaction cannot reach into it — parse it back first.
-			data: redactSensitive(typeof data === "string" ? safeJsonParse(data) : data),
-			headers: redactSensitive(headers),
-		};
-		safe.status = candidate.response?.status;
-	}
-
-	return redactSensitive(safe) as Record<string, unknown>;
 };
 
 const createLogData = (
@@ -163,8 +54,8 @@ const createLogData = (
 		timestamp: new Date().toISOString(),
 		level,
 		message,
-		error: error === undefined ? undefined : toSafeError(error),
-		context: context === undefined ? undefined : (redactSensitive(context) as LogContext),
+		error: formatError(error),
+		context,
 		url: window.location.href,
 		userAgent: navigator.userAgent,
 	};
@@ -178,10 +69,10 @@ const error = (message: string, error?: Error, context?: LogContext): void => {
 	if (configuredLevel === "debug") {
 		console.group(`ERROR: ${message}`);
 		if (error) {
-			console.error("Error:", toSafeError(error));
+			console.error("Error:", error);
 		}
 		if (context && Object.keys(context).length > 0) {
-			console.log("Context:", logData.context);
+			console.log("Context:", context);
 		}
 		console.log("URL:", logData.url);
 		console.log("Timestamp:", logData.timestamp);
@@ -199,7 +90,7 @@ const warn = (message: string, context?: LogContext): void => {
 	if (configuredLevel === "debug") {
 		console.group(`WARN: ${message}`);
 		if (context && Object.keys(context).length > 0) {
-			console.log("Context:", logData.context);
+			console.log("Context:", context);
 		}
 		console.groupEnd();
 	} else {
@@ -212,7 +103,7 @@ const debug = (message: string, data?: any): void => {
 
 	console.group(`DEBUG: ${message}`);
 	if (data !== undefined) {
-		console.log(redactSensitive(data));
+		console.log(data);
 	}
 	console.groupEnd();
 };
@@ -220,16 +111,14 @@ const debug = (message: string, data?: any): void => {
 const info = (message: string, data?: any): void => {
 	if (!shouldLog("info")) return;
 
-	const safeData = data === undefined ? undefined : redactSensitive(data);
-
 	if (configuredLevel === "debug") {
-		console.log(`INFO: ${message}`, safeData);
+		console.log(`INFO: ${message}`, data);
 	} else {
 		const logData = {
 			timestamp: new Date().toISOString(),
 			level: "info" as LogLevel,
 			message,
-			data: safeData,
+			data,
 		};
 		console.log(JSON.stringify(logData));
 	}

client/src/Utils/statusPageUrl.ts

@@ -1,8 +1,4 @@
-import {
-	PUBLIC_STATUS_PAGE_PREFIX,
-	type StatusPage,
-	type StatusPageRange,
-} from "@/Types/StatusPage";
+import { PUBLIC_STATUS_PAGE_PREFIX, type StatusPage } from "@/Types/StatusPage";
 import { runtimeConfig } from "@/Utils/runtimeConfig";
 
 const CLIENT_HOST =
@@ -90,12 +86,8 @@ export const getStatusPagePreviewUrl = (statusPage: Pick<StatusPage, "url">): st
 export const buildStatusPageApiPath = (options: {
 	url?: string;
 	useCustomDomain?: boolean;
-	range?: StatusPageRange;
 }): string | null => {
-	let query = "type=uptime&type=infrastructure";
-	if (options.range && options.range !== "latest") {
-		query += `&range=${options.range}`;
-	}
+	const query = "type=uptime&type=infrastructure";
 
 	if (options.useCustomDomain && typeof window !== "undefined") {
 		const domain = encodeURIComponent(window.location.hostname);

client/src/Utils/timezoneOptions.ts

@@ -1,13 +0,0 @@
-import timezones from "@/Utils/timezones.json";
-
-export interface TimezoneOption {
-	id: string;
-	name: string;
-}
-
-// timezones.json uses Mongo-style _id; remap once at module load to the
-// { id, name } shape AutoComplete expects.
-export const timezoneOptions: TimezoneOption[] = timezones.map((tz) => ({
-	id: tz._id,
-	name: tz.name,
-}));

client/src/Validation/notifications.ts

@@ -30,14 +30,6 @@ const webhookSchema = baseSchema.extend({
 	address: z.string().min(1, "Webhook URL is required").url("Please enter a valid URL"),
 });
 
-const rocketChatSchema = baseSchema.extend({
-	type: z.literal("rocket_chat"),
-	address: z
-		.string()
-		.min(1, "Webhook URL is required")
-		.url({ protocol: /^https?$/, message: "Please enter a valid URL" }),
-});
-
 const pagerDutySchema = baseSchema.extend({
 	type: z.literal("pager_duty"),
 	address: z.string().min(1, "Integration key is required"),
@@ -89,7 +81,6 @@ export const notificationSchema = z.discriminatedUnion("type", [
 	slackSchema,
 	discordSchema,
 	webhookSchema,
-	rocketChatSchema,
 	pagerDutySchema,
 	matrixSchema,
 	teamsSchema,

client/src/locales/ar.json

@@ -58,8 +58,8 @@
 				"uptime": "وقت التشغيل"
 			},
 			"histogram": {
-				"avg": "المتوسط: {{value}}",
-				"max": "الحد الأقصى: {{value}}"
+				"avg": "المتوسط: {{value}} مللي ثانية",
+				"max": "الحد الأقصى: {{value}} مللي ثانية"
 			}
 		},
 		"dialogs": {
@@ -1352,10 +1352,10 @@
 					"responseTime": "وقت الاستجابة"
 				},
 				"chart": {
-					"avg": "متوسط {{value}}",
+					"avg": "متوسط {{value}} مللي ثانية",
 					"downTooltip": "متوقف",
 					"heatmapAria": "خريطة حرارية لزمن الاستجابة",
-					"max": "أقصى {{value}}"
+					"max": "أقصى {{value}} مللي ثانية"
 				},
 				"status": {
 					"breached": "تم تجاوز الحد",

client/src/locales/ca.json

@@ -58,8 +58,8 @@
 				"uptime": "Temps en línia"
 			},
 			"histogram": {
-				"avg": "Mitjana: {{value}}",
-				"max": "Màx: {{value}}"
+				"avg": "Mitjana: {{value}} ms",
+				"max": "Màx: {{value}} ms"
 			}
 		},
 		"dialogs": {
@@ -1346,8 +1346,8 @@
 					"initializing": "Inicialitzant"
 				},
 				"chart": {
-					"avg": "mitj {{value}}",
-					"max": "màx {{value}}",
+					"avg": "mitj {{value}}ms",
+					"max": "màx {{value}}ms",
 					"downTooltip": "Caigut",
 					"heatmapAria": "Mapa de calor del temps de resposta"
 				},

client/src/locales/cs.json

@@ -58,8 +58,8 @@
 				"uptime": "Dostupnost"
 			},
 			"histogram": {
-				"avg": "Prům.: {{value}}",
-				"max": "Max: {{value}}"
+				"avg": "Prům.: {{value}} ms",
+				"max": "Max: {{value}} ms"
 			}
 		},
 		"dialogs": {
@@ -1352,10 +1352,10 @@
 					"responseTime": "Doba odezvy"
 				},
 				"chart": {
-					"avg": "průměr {{value}}",
+					"avg": "průměr {{value}}ms",
 					"downTooltip": "Mimo provoz",
 					"heatmapAria": "Tepelná mapa doby odezvy",
-					"max": "max {{value}}"
+					"max": "max {{value}}ms"
 				},
 				"status": {
 					"breached": "Překročen limit",

client/src/locales/de.json

@@ -58,8 +58,8 @@
 				"uptime": "Verfügbarkeit"
 			},
 			"histogram": {
-				"avg": "Durchschn.: {{value}}",
-				"max": "Max.: {{value}}"
+				"avg": "Durchschn.: {{value}} ms",
+				"max": "Max.: {{value}} ms"
 			}
 		},
 		"dialogs": {
@@ -825,7 +825,7 @@
 					"netBytesRecv": "{{name}} - Empfangene Bytes",
 					"netBytesSent": "{{name}} - Gesendete Bytes",
 					"netNoTraffic": "Capture meldet null Datenverkehr auf allen Schnittstellen. Das ist normal, wenn Capture in einem Container läuft, der nur Loopback-Schnittstellen sieht — führe Capture direkt auf dem Host aus, um echten Netzwerkverkehr zu sehen.",
-					"temp": "CPU-Temperatur"
+					"temp": "Temp."
 				}
 			},
 			"gauges": {
@@ -841,13 +841,13 @@
 				},
 				"memory": {
 					"lowerLabel": "Frei",
-					"title": "Speicherauslastung",
+					"title": "Arbeitsspeicherauslastung",
 					"upperLabel": "Belegt"
 				}
 			},
 			"statBoxes": {
-				"avgCpuTemperature": "Durchschn. CPU-Temperatur",
-				"cpuFrequency": "CPU-Frequenz",
+				"avgCpuTemperature": "Durchschn. CPU Termperatur",
+				"cpuFrequency": "CPU Frequenz",
 				"cpuLogical": "CPU (logisch)",
 				"cpuPhysical": "CPU (physisch)",
 				"disk": "Festplatte",
@@ -1352,10 +1352,10 @@
 					"responseTime": "Antwortzeit"
 				},
 				"chart": {
-					"avg": "Ø {{value}}",
+					"avg": "Ø {{value}}ms",
 					"downTooltip": "Ausgefallen",
 					"heatmapAria": "Heatmap der Antwortzeit",
-					"max": "max. {{value}}"
+					"max": "max. {{value}}ms"
 				},
 				"status": {
 					"breached": "Schwellenwert überschritten",

client/src/locales/en.json

@@ -60,8 +60,7 @@
 			"exportToJSON": "Export to JSON",
 			"importFromJSON": "Import from JSON",
 			"clearFilters": "Clear filters",
-			"removeUser": "Remove user",
-			"removeItem": "Remove {{item}}"
+			"removeUser": "Remove user"
 		},
 		"charts": {
 			"labels": {
@@ -69,24 +68,11 @@
 				"downtime": "Downtime",
 				"high": "High",
 				"low": "Low",
-				"responseTime": "Response time",
-				"timingPhases": "Timing phases",
-				"totalResponseTime": "Total response time",
 				"uptime": "Uptime"
 			},
 			"histogram": {
-				"avg": "Avg: {{value}}",
-				"max": "Max: {{value}}",
-				"responseTime": "Response time: {{value}}",
-				"total": "Total: {{value}}"
-			},
-			"phases": {
-				"dns": "DNS",
-				"tcp": "TCP",
-				"tls": "TLS",
-				"request": "Request",
-				"firstByte": "First byte",
-				"download": "Download"
+				"avg": "Avg: {{value}} ms",
+				"max": "Max: {{value}} ms"
 			}
 		},
 		"dialogs": {
@@ -105,9 +91,6 @@
 			"responseTime": "Response time"
 		},
 		"form": {
-			"autocomplete": {
-				"placeholder": "Type to search"
-			},
 			"role": {
 				"option": {
 					"role": {
@@ -475,7 +458,6 @@
 				"statBoxes": {
 					"activeFor": "Active for",
 					"certificateExpiry": "Certificate expiry",
-					"domainExpiry": "Domain expiry",
 					"lastCheck": "Last check",
 					"lastResponseTime": "Last response time",
 					"serviceIsDown": "Service is down"
@@ -533,7 +515,8 @@
 						},
 						"customUpCodes": {
 							"label": "Accepted status codes",
-							"description": "Add any non-2xx codes that should also be considered successful."
+							"description": "Add any non-2xx codes that should also be considered successful.",
+							"removeAriaLabel": "Remove status code"
 						}
 					},
 					"title": "Advanced settings"
@@ -587,7 +570,7 @@
 						},
 						"port": {
 							"label": "Port to monitor",
-							"placeholder": "80"
+							"placeholder": 80
 						},
 						"grpcServiceName": {
 							"label": "Service name",
@@ -725,6 +708,17 @@
 						}
 					}
 				},
+				"url": {
+					"title": "Monitor IP/URL on Status Page",
+					"description": "Display the IP address or URL of monitor on the public Status page. If it's disabled, only the monitor name will be shown to protect sensitive information.",
+					"option": {
+						"showURL": {
+							"label": "Display IP/URL on status page",
+							"enabled": "Enabled",
+							"disabled": "Disabled"
+						}
+					}
+				},
 				"stats": {
 					"title": "Monitor history",
 					"description": "Clear all monitoring history and statistics for your team. This action is irreversible.",
@@ -851,7 +845,7 @@
 					"netBytesRecv": "{{name}} - Bytes Received",
 					"netBytesSent": "{{name}} - Bytes Sent",
 					"loopbackOnlyNotice": "Capture is only reporting loopback or container-bridge interfaces (lo, lo0, docker0). This is normal when Capture runs inside a container that can only see its own network namespace — run Capture directly on the host to see real network activity.",
-					"temp": "CPU temperature"
+					"temp": "Temp"
 				}
 			},
 			"gauges": {
@@ -1157,21 +1151,7 @@
 				"type": {
 					"description": "Select the type of notification channel to create.",
 					"optionType": "Type",
-					"title": "Channel type",
-					"value": {
-						"email": "Email",
-						"slack": "Slack",
-						"discord": "Discord",
-						"webhook": "Webhook",
-						"rocket_chat": "Rocket.Chat",
-						"pager_duty": "PagerDuty",
-						"matrix": "Matrix",
-						"teams": "Teams",
-						"telegram": "Telegram",
-						"pushover": "Pushover",
-						"twilio": "Twilio",
-						"ntfy": "ntfy"
-					}
+					"title": "Channel type"
 				},
 				"telegram": {
 					"title": "Telegram configuration",
@@ -1302,7 +1282,9 @@
 					"description": "Display the IP address or URL of monitor on the public Status page. If it's disabled, only the monitor name will be shown to protect sensitive information.",
 					"option": {
 						"showURL": {
-							"label": "Display IP/URL on status page"
+							"label": "Display IP/URL on status page",
+							"enabled": "Enabled",
+							"disabled": "Disabled"
 						}
 					}
 				},
@@ -1442,14 +1424,6 @@
 		},
 		"statusPages": {
 			"deleteSuccess": "Status page deleted successfully",
-			"rangeSelectorAria": "History range",
-			"rangeExceedsRetention": "Check history retention is set to {{days}} days. Increase retention for more data.",
-			"range": {
-				"latest": "Latest",
-				"30d": "30 days",
-				"60d": "60 days",
-				"90d": "90 days"
-			},
 			"fallback": {
 				"title": "No status pages yet",
 				"description": "Publish a public page that shows real-time uptime and incident history to your customers and stakeholders.",
@@ -1468,13 +1442,10 @@
 					"initializing": "Initializing"
 				},
 				"chart": {
-					"avg": "avg {{value}}",
-					"max": "max {{value}}",
+					"avg": "avg {{value}}ms",
+					"max": "max {{value}}ms",
 					"downTooltip": "Down",
-					"heatmapAria": "Response time heatmap",
-					"dayAria": "{{date}}, {{uptime}} uptime",
-					"dayUptime": "Uptime: {{uptime}} ({{upChecks}}/{{totalChecks}} checks)",
-					"dayAvgResponse": "Avg response: {{value}}"
+					"heatmapAria": "Response time heatmap"
 				},
 				"infrastructure": {
 					"title": "Infrastructure",

client/src/locales/es.json

@@ -58,8 +58,8 @@
 				"uptime": "Tiempo de actividad"
 			},
 			"histogram": {
-				"avg": "Prom: {{value}}",
-				"max": "Máx: {{value}}"
+				"avg": "Prom: {{value}} ms",
+				"max": "Máx: {{value}} ms"
 			}
 		},
 		"dialogs": {
@@ -1352,10 +1352,10 @@
 					"responseTime": "Tiempo de respuesta"
 				},
 				"chart": {
-					"avg": "prom {{value}}",
+					"avg": "prom {{value}}ms",
 					"downTooltip": "Caído",
 					"heatmapAria": "Mapa de calor del tiempo de respuesta",
-					"max": "máx {{value}}"
+					"max": "máx {{value}}ms"
 				},
 				"status": {
 					"breached": "Umbral superado",

client/src/locales/fi.json

@@ -58,8 +58,8 @@
 				"uptime": "Käytettävyys"
 			},
 			"histogram": {
-				"avg": "Keskim.: {{value}}",
-				"max": "Maks.: {{value}}"
+				"avg": "Keskim.: {{value}} ms",
+				"max": "Maks.: {{value}} ms"
 			}
 		},
 		"dialogs": {
@@ -1352,10 +1352,10 @@
 					"responseTime": "Vasteaika"
 				},
 				"chart": {
-					"avg": "ka {{value}}",
+					"avg": "ka {{value}}ms",
 					"downTooltip": "Alhaalla",
 					"heatmapAria": "Vasteajan lämpökartta",
-					"max": "max {{value}}"
+					"max": "max {{value}}ms"
 				},
 				"status": {
 					"breached": "Kynnys ylittyi",

client/src/locales/fr.json

@@ -58,8 +58,8 @@
 				"uptime": "Disponibilité"
 			},
 			"histogram": {
-				"avg": "Moy : {{value}}",
-				"max": "Max : {{value}}"
+				"avg": "Moy : {{value}} ms",
+				"max": "Max : {{value}} ms"
 			}
 		},
 		"dialogs": {
@@ -1352,10 +1352,10 @@
 					"responseTime": "Temps de réponse"
 				},
 				"chart": {
-					"avg": "moy {{value}}",
+					"avg": "moy {{value}}ms",
 					"downTooltip": "Hors service",
 					"heatmapAria": "Carte thermique des temps de réponse",
-					"max": "max {{value}}"
+					"max": "max {{value}}ms"
 				},
 				"status": {
 					"breached": "Seuil dépassé",

client/src/locales/it.json

@@ -71,8 +71,8 @@
 				"uptime": "Uptime"
 			},
 			"histogram": {
-				"avg": "Media: {{value}}",
-				"max": "Max: {{value}}"
+				"avg": "Media: {{value}} ms",
+				"max": "Max: {{value}} ms"
 			}
 		},
 		"dialogs": {
@@ -1442,8 +1442,8 @@
 					"initializing": "Inizializzazione"
 				},
 				"chart": {
-					"avg": "media {{value}}",
-					"max": "max {{value}}",
+					"avg": "media {{value}}ms",
+					"max": "max {{value}}ms",
 					"downTooltip": "Non attivo",
 					"heatmapAria": "Heatmap del tempo di risposta"
 				},

client/src/locales/ja.json

@@ -58,8 +58,8 @@
 				"uptime": "稼働時間"
 			},
 			"histogram": {
-				"avg": "平均: {{value}}",
-				"max": "最大: {{value}}"
+				"avg": "平均: {{value}} ms",
+				"max": "最大: {{value}} ms"
 			}
 		},
 		"dialogs": {
@@ -1352,10 +1352,10 @@
 					"responseTime": "応答時間"
 				},
 				"chart": {
-					"avg": "平均 {{value}}",
+					"avg": "平均 {{value}}ms",
 					"downTooltip": "ダウン",
 					"heatmapAria": "応答時間のヒートマップ",
-					"max": "最大 {{value}}"
+					"max": "最大 {{value}}ms"
 				},
 				"status": {
 					"breached": "しきい値超過",