components

client/src/Components/v2/design-elements/BasePage.tsx

@@ -140,8 +140,8 @@ export const MonitorBasePageWithStates = ({
 			<EmptyMonitorFallback
 				page={page}
 				title={t(`pages.${page}.fallback.title`)}
-				bullets={t(`monitors.${page}.fallback.checks`, { returnObjects: true })}
-				actionButtonText={t(`monitors.${page}.fallback.actionButton`)}
+				bullets={t(`pages.${page}.fallback.checks`, { returnObjects: true })}
+				actionButtonText={t(`pages.${page}.fallback.actionButton`)}
 				actionLink={actionLink || ""}
 			/>
 		);

client/src/Components/v2/design-elements/Fallback.tsx

@@ -165,6 +165,15 @@ export const EmptyMonitorFallback = ({
 							/>
 						))}
 				</Stack>
+				<Stack>
+					<Button
+						variant="contained"
+						color="primary"
+						onClick={() => navigate(actionLink)}
+					>
+						{actionButtonText}
+					</Button>
+				</Stack>
 			</Stack>
 		</BaseFallback>
 	);

client/src/Components/v2/inputs/Checkbox.tsx

@@ -0,0 +1,56 @@
+import { forwardRef } from "react";
+import Checkbox from "@mui/material/Checkbox";
+import type { CheckboxProps } from "@mui/material/Checkbox";
+import { Square, SquareCheck } from "lucide-react";
+import { useTheme } from "@mui/material/styles";
+
+type CheckboxInputProps = CheckboxProps & {
+	label?: string;
+};
+export const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(
+	function CheckboxInput(
+		{ sx, ...props }: CheckboxInputProps,
+		ref: React.Ref<HTMLInputElement>
+	) {
+		const theme = useTheme();
+		return (
+			<Checkbox
+				{...props}
+				aria-label={props.label}
+				slotProps={{
+					input: {
+						ref: ref,
+					},
+				}}
+				icon={
+					<Square
+						size={16}
+						strokeWidth={1.5}
+					/>
+				}
+				checkedIcon={
+					<SquareCheck
+						size={16}
+						strokeWidth={1.5}
+					/>
+				}
+				sx={{
+					color: theme.palette.text.secondary,
+					"&.Mui-checked": {
+						color: theme.palette.primary.main,
+					},
+					"&:hover": { backgroundColor: "transparent" },
+					"& svg": {
+						stroke: "currentColor",
+					},
+					"& svg path, & svg line, & svg polyline, & svg rect": {
+						stroke: "currentColor",
+						fill: "none",
+					},
+
+					...sx,
+				}}
+			/>
+		);
+	}
+);

client/src/Components/v2/inputs/FieldLabel.tsx

@@ -0,0 +1,38 @@
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+
+interface FieldLabelProps {
+	children: React.ReactNode;
+	required?: boolean;
+	htmlFor?: string;
+}
+
+export const FieldLabel = ({ children, required = false, htmlFor }: FieldLabelProps) => {
+	const theme = useTheme();
+
+	return (
+		<Typography
+			component="label"
+			htmlFor={htmlFor}
+			sx={{
+				fontSize: "14px",
+				fontWeight: 500,
+				color: theme.palette.text.secondary,
+				marginBottom: theme.spacing(2),
+				display: "block",
+			}}
+		>
+			{children}
+			{required && (
+				<span
+					style={{
+						color: theme.palette.error.main,
+						marginLeft: theme.spacing(2),
+					}}
+				>
+					*
+				</span>
+			)}
+		</Typography>
+	);
+};

client/src/Components/v2/inputs/Select.tsx

@@ -0,0 +1,102 @@
+import Select from "@mui/material/Select";
+import React from "react";
+import { useTheme } from "@mui/material/styles";
+import type { SelectProps } from "@mui/material/Select";
+import Stack from "@mui/material/Stack";
+import { FieldLabel } from "./FieldLabel";
+import { ChevronDown } from "lucide-react";
+import Typography from "@mui/material/Typography";
+
+interface SelectInputProps<T> extends Omit<SelectProps<T>, "label"> {
+	fieldLabel?: string;
+	required?: boolean;
+	placeholder?: string;
+	placeholderColor?: string;
+}
+
+export const SelectInput = <T,>({
+	fieldLabel,
+	required,
+	placeholder,
+	placeholderColor,
+	...props
+}: SelectInputProps<T>) => {
+	const theme = useTheme();
+	const emptyPlaceholderColor = placeholderColor || theme.palette.text.disabled;
+
+	const renderValue = (selected: any) => {
+		const isMultiple = Boolean((props as any).multiple);
+		const isEmpty = isMultiple
+			? !Array.isArray(selected) || selected.length === 0
+			: selected === undefined || selected === null || selected === "";
+
+		if (isEmpty && placeholder) {
+			return <Typography sx={{ color: emptyPlaceholderColor }}>{placeholder}</Typography>;
+		}
+
+		if (isMultiple) {
+			const items: string[] = Array.isArray(selected) ? selected : [];
+			const capitalized = items.map(
+				(item) => item.charAt(0).toUpperCase() + item.slice(1)
+			);
+			return (<Typography>{capitalized.join(" | ")}</Typography>) as any;
+		}
+
+		const nodes = React.Children.toArray(props.children as React.ReactNode);
+		for (const node of nodes) {
+			if (!React.isValidElement(node)) continue;
+			const el = node as React.ReactElement<{
+				value?: unknown;
+				children?: React.ReactNode;
+			}>;
+			if (el.props?.value === selected) {
+				return (el.props.children ?? selected) as React.ReactNode;
+			}
+		}
+		return selected as React.ReactNode;
+	};
+
+	const select = (
+		<Select<T>
+			{...props}
+			displayEmpty
+			renderValue={renderValue}
+			inputProps={{
+				...(props.inputProps || {}),
+				"aria-placeholder": placeholder,
+			}}
+			IconComponent={() => (
+				<ChevronDown
+					size={18}
+					strokeWidth={1.5}
+					style={{ marginRight: theme.spacing(3) }}
+				/>
+			)}
+			sx={{
+				height: "34px",
+				"& .MuiSelect-icon": {
+					right: theme.spacing(3),
+				},
+				"& .MuiOutlinedInput-notchedOutline": {
+					borderRadius: theme.shape.borderRadius,
+					borderColor: theme.palette.divider,
+				},
+				"&:hover .MuiOutlinedInput-notchedOutline": {
+					borderColor: theme.palette.divider,
+				},
+				...props.sx,
+			}}
+		/>
+	);
+
+	if (fieldLabel) {
+		return (
+			<Stack spacing={theme.spacing(2)}>
+				<FieldLabel required={required}>{fieldLabel}</FieldLabel>
+				{select}
+			</Stack>
+		);
+	}
+
+	return select;
+};

client/src/Components/v2/inputs/index.tsx

@@ -1 +1,4 @@
 export { ButtonInput as Button } from "./Button";
+export * from "./FieldLabel";
+export { SelectInput as Select } from "./Select";
+export { CheckboxInput as Checkbox } from "./Checkbox";

client/src/Components/v2/monitors/FilterControls.tsx

@@ -0,0 +1,11 @@
+import Stack from "@mui/material/Stack";
+import { Select } from "@/Components/v2/inputs";
+export const FilterControls = () => {
+	return (
+		<Stack direction="row">
+			<Select placeholder="Type"></Select>
+			<Select placeholder="Status" />
+			<Select placeholder="Priority" />
+		</Stack>
+	);
+};

client/src/Components/v2/monitors/index.tsx

@@ -0,0 +1 @@
+export * from "./FilterControls";

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

@@ -1,15 +1,25 @@
+import { useGet } from "@/Hooks/UseApi";
 import { MonitorBasePageWithStates } from "@/Components/v2/design-elements";
+import { type Monitor } from "@/Types/Monitor";
+import { FilterControls } from "@/Components/v2/monitors";
 
 const UptimeMonitorsPage = () => {
+	const {
+		data: monitors,
+		isLoading,
+		error,
+	} = useGet<Monitor[]>("/monitors/team?type=http&type=ping&type=port&type=docker");
+
 	return (
 		<MonitorBasePageWithStates
-			loading={false}
-			error={false}
-			items={[]}
+			loading={isLoading}
+			error={error}
+			items={monitors || []}
 			page="uptime"
 			actionLink="/uptime/create"
 		>
-			Test
+			<FilterControls />
+			<pre>{JSON.stringify(monitors, null, 2)}</pre>
 		</MonitorBasePageWithStates>
 	);
 };

client/src/locales/en.json

@@ -128,7 +128,14 @@
 	"pages": {
 		"uptime": {
 			"fallback": {
-				"title": "An uptime monitor is used to:"
+				"title": "An uptime monitor is used to:",
+				"actionButton": "Create a monitor!",
+				"checks": [
+					"Check if websites or servers are online & responsive",
+					"Alert teams about downtime or performance issues",
+					"Monitor HTTP endpoints, pings, containers & ports",
+					"Track historical uptime and reliability trends"
+				]
 			}
 		}
 	},