resolve conflicts

client/package.json

@@ -25,6 +25,7 @@
 		"@mui/x-charts": "7.29.1",
 		"@mui/x-date-pickers": "7.29.4",
 		"@reduxjs/toolkit": "2.7.0",
+		"@types/maplibre-gl": "^1.13.2",
 		"axios": "^1.7.4",
 		"dayjs": "1.11.13",
 		"flag-icons": "7.3.2",
@@ -33,6 +34,7 @@
 		"i18next": "25.4.2",
 		"joi": "17.13.3",
 		"lucide-react": "^0.562.0",
+		"maplibre-gl": "^5.19.0",
 		"mui-color-input": "^7.0.0",
 		"pretty-bytes": "^7.1.0",
 		"pretty-ms": "^9.3.0",
@@ -41,6 +43,7 @@
 		"react-hook-form": "^7.63.0",
 		"react-i18next": "^15.4.0",
 		"react-icons": "5.5.0",
+		"react-map-gl": "^8.1.0",
 		"react-redux": "9.2.0",
 		"react-router": "^6.23.0",
 		"react-router-dom": "^6.23.1",

client/src/Components/monitors/ControlsFilter.tsx

@@ -5,6 +5,7 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 
 import type { MonitorType } from "@/Types/Monitor";
 import { Typography, useTheme } from "@mui/material";
+import { useTranslation } from "react-i18next";
 
 const types = ["http", "ping", "port", "docker", "game", "grpc"];
 const typeDisplayNames: Record<string, string> = {
@@ -38,6 +39,7 @@ export const ControlsFilter = ({
 	onClearFilters: () => void;
 }) => {
 	const theme = useTheme();
+	const { t } = useTranslation();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const isFilterActive =
 		(selectedTypes?.length ?? 0) > 0 || selectedStatus !== "" || selectedState !== "";
@@ -96,7 +98,7 @@ export const ControlsFilter = ({
 					variant="contained"
 					onClick={onClearFilters}
 				>
-					Clear Filters
+					{t("common.buttons.clearFilters")}
 				</Button>
 			)}
 		</Stack>

client/src/Components/monitors/GeoChecksMap.tsx

@@ -0,0 +1,203 @@
+import { useRef, useEffect, useState } from "react";
+import { Box, Typography, Stack, useTheme, GlobalStyles } from "@mui/material";
+import Map, { Marker, Popup } from "react-map-gl/maplibre";
+import type { MapRef } from "react-map-gl/maplibre";
+import type { FlatGeoCheck } from "@/Types/GeoCheck";
+import "maplibre-gl/dist/maplibre-gl.css";
+
+interface GeoChecksMapProps {
+	geoChecks: FlatGeoCheck[];
+}
+
+export const GeoChecksMap = ({ geoChecks }: GeoChecksMapProps) => {
+	const mapRef = useRef<MapRef>(null);
+	const [selectedCheck, setSelectedCheck] = useState<FlatGeoCheck | null>(null);
+	const theme = useTheme();
+	const isDarkMode = theme.palette.mode === "dark";
+
+	const mapPopupStyles = (
+		<GlobalStyles
+			styles={{
+				".maplibregl-popup-content": {
+					background: "transparent !important",
+					padding: "0 !important",
+					boxShadow: "none !important",
+				},
+				".maplibregl-popup-tip": {
+					display: "none",
+				},
+				".maplibregl-ctrl-attrib": {
+					display: "none",
+				},
+				".maplibregl-ctrl-logo": {
+					display: "none",
+				},
+				".maplibregl-popup-close-button": {
+					color: theme.palette.text.primary,
+					background: "transparent",
+					fontSize: "20px",
+					padding: "4px",
+					"&:hover": {
+						backgroundColor: theme.palette.action.hover,
+					},
+				},
+			}}
+		/>
+	);
+
+	useEffect(() => {
+		if (geoChecks.length === 0 || !mapRef.current) return;
+
+		const bounds = geoChecks.reduce(
+			(acc, check) => {
+				return {
+					minLng: Math.min(acc.minLng, check.location.longitude),
+					maxLng: Math.max(acc.maxLng, check.location.longitude),
+					minLat: Math.min(acc.minLat, check.location.latitude),
+					maxLat: Math.max(acc.maxLat, check.location.latitude),
+				};
+			},
+			{
+				minLng: Infinity,
+				maxLng: -Infinity,
+				minLat: Infinity,
+				maxLat: -Infinity,
+			}
+		);
+
+		if (bounds.minLng !== Infinity) {
+			mapRef.current.fitBounds(
+				[
+					[bounds.minLng, bounds.minLat],
+					[bounds.maxLng, bounds.maxLat],
+				],
+				{ padding: 50, duration: 1000 }
+			);
+		}
+	}, [geoChecks]);
+
+	const getMarkerColor = (status: boolean): string => {
+		return status ? theme.palette.success.main : theme.palette.error.main;
+	};
+
+	const formatResponseTime = (timing: number): string => {
+		return `${timing.toFixed(0)}ms`;
+	};
+
+	return (
+		<>
+			{mapPopupStyles}
+			<Box
+				height={500}
+				width={"100%"}
+				borderRadius={theme.shape.borderRadius}
+				overflow={"hidden"}
+			>
+				<Map
+					ref={mapRef}
+					initialViewState={{
+						longitude: 0,
+						latitude: 20,
+						zoom: 1.5,
+					}}
+					style={{ height: "100%", width: "100%" }}
+					mapStyle={
+						isDarkMode
+							? "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
+							: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+					}
+				>
+					{geoChecks.map((check, index) => (
+						<Marker
+							key={`${check.id}-${index}`}
+							longitude={check.location.longitude}
+							latitude={check.location.latitude}
+							anchor="bottom"
+							onClick={(e: any) => {
+								e.originalEvent.stopPropagation();
+								setSelectedCheck(check);
+							}}
+						>
+							<div
+								style={{
+									width: "10px",
+									height: "10px",
+									borderRadius: "50%",
+									backgroundColor: getMarkerColor(check.status),
+									boxShadow: "0 2px 4px rgba(0,0,0,0.3)",
+									cursor: "pointer",
+								}}
+							/>
+						</Marker>
+					))}
+
+					{selectedCheck && (
+						<Popup
+							longitude={selectedCheck.location.longitude}
+							latitude={selectedCheck.location.latitude}
+							anchor="top"
+							onClose={() => setSelectedCheck(null)}
+							closeOnClick={false}
+						>
+							<Box
+								sx={{
+									minWidth: 200,
+									p: theme.spacing(4),
+									bgcolor: theme.palette.background.paper,
+									borderWidth: 1,
+									borderStyle: "solid",
+									borderColor: theme.palette.divider,
+									borderRadius: 1,
+								}}
+							>
+								<Typography
+									variant="subtitle1"
+									fontWeight="bold"
+									gutterBottom
+								>
+									{selectedCheck.location.city}, {selectedCheck.location.country}
+								</Typography>
+								<Stack spacing={0.5}>
+									<Typography variant="body2">
+										<Typography
+											component="span"
+											fontWeight="medium"
+										>
+											Status:
+										</Typography>{" "}
+										{selectedCheck.status ? "Up" : "Down"}
+									</Typography>
+									<Typography variant="body2">
+										<Typography
+											component="span"
+											fontWeight="medium"
+										>
+											Status Code:
+										</Typography>{" "}
+										{selectedCheck.statusCode}
+									</Typography>
+									<Typography variant="body2">
+										<Typography
+											component="span"
+											fontWeight="medium"
+										>
+											Response Time:
+										</Typography>{" "}
+										{formatResponseTime(selectedCheck.timings.total)}
+									</Typography>
+									<Typography
+										variant="caption"
+										color="text.secondary"
+										sx={{ mt: 0.5 }}
+									>
+										{new Date(selectedCheck.createdAt).toLocaleString()}
+									</Typography>
+								</Stack>
+							</Box>
+						</Popup>
+					)}
+				</Map>
+			</Box>
+		</>
+	);
+};

client/src/Components/monitors/HeaderGeoTabs.tsx

@@ -0,0 +1,54 @@
+import Stack from "@mui/material/Stack";
+import { Tabs, Tab } from "@/Components/design-elements";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+import type { GeoContinent } from "@/Types/GeoCheck";
+
+interface HeaderGeoTabsProps {
+	geoCheckEnabled: boolean;
+	locations: GeoContinent[] | undefined;
+	selectedLocation: GeoContinent;
+	onLocationChange: (location: GeoContinent) => void;
+}
+
+export const HeaderGeoTabs = ({
+	geoCheckEnabled,
+	locations,
+	selectedLocation,
+	onLocationChange,
+}: HeaderGeoTabsProps) => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+
+	if (!geoCheckEnabled || !locations || locations.length === 0) {
+		return null;
+	}
+
+	const handleChange = (_event: React.SyntheticEvent, newValue: GeoContinent) => {
+		onLocationChange(newValue);
+	};
+
+	return (
+		<Stack
+			spacing={{ xs: theme.spacing(8), md: 0 }}
+			direction={{ xs: "column", md: "row" }}
+			alignItems={"center"}
+			justifyContent={"flex-start"}
+		>
+			<Tabs
+				value={selectedLocation}
+				onChange={handleChange}
+			>
+				{locations.map((location) => (
+					<Tab
+						key={location}
+						label={t(
+							`pages.createMonitor.form.geoChecks.option.locations.options.${location}`
+						)}
+						value={location}
+					/>
+				))}
+			</Tabs>
+		</Stack>
+	);
+};

client/src/Components/monitors/index.tsx

@@ -1,6 +1,8 @@
 export * from "./ControlsFilter";
 export * from "./MonitorStatBoxes";
 export * from "./HeaderMonitorControls";
+export * from "./HeaderGeoTabs";
+export * from "./GeoChecksMap";
 export * from "./charts/HistogramStatus";
 export * from "./charts/RadialAvgResponse";
 export * from "./charts/HistogramDetails";

client/src/Hooks/UseApi.ts

@@ -17,7 +17,7 @@ const fetcher = async <T>(url: string, config?: AxiosRequestConfig) => {
 };
 
 export const useGet = <T>(
-	url: string | null,
+	url: string | null | undefined,
 	axiosConfig?: AxiosRequestConfig,
 	swrConfig?: SWRConfiguration
 ) => {

client/src/Hooks/useMonitorForm.ts

@@ -14,6 +14,9 @@ const getBaseDefaults = (data?: Monitor | null) => ({
 	notifications: data?.notifications || [],
 	statusWindowSize: data?.statusWindowSize || 5,
 	statusWindowThreshold: data?.statusWindowThreshold || 60,
+	geoCheckEnabled: data?.geoCheckEnabled ?? false,
+	geoCheckLocations: data?.geoCheckLocations || [],
+	geoCheckInterval: data?.geoCheckInterval || 300000,
 });
 
 export const useMonitorForm = ({

client/src/Pages/CreateMonitor/index.tsx

@@ -15,6 +15,7 @@ import Divider from "@mui/material/Divider";
 import IconButton from "@mui/material/IconButton";
 import { Trash2 } from "lucide-react";
 import { HeaderDeleteControls } from "@/Components/monitors";
+import { GeoContinents } from "@/Types/GeoCheck";
 
 import { BasePage, ConfigBox } from "@/Components/design-elements";
 import {
@@ -192,6 +193,7 @@ const CreateMonitorPage = () => {
 	const watchedType = watch("type") as MonitorType;
 
 	const watchedUseAdvancedMatching = watch("useAdvancedMatching") as boolean;
+	const watchGeoCheckEnabled = watch("geoCheckEnabled") as boolean;
 
 	useEffect(() => {
 		clearErrors();
@@ -881,6 +883,140 @@ const CreateMonitorPage = () => {
 				/>
 			)}
 
+			{watchedType === "http" && (
+				<ConfigBox
+					title={t("pages.createMonitor.form.geoChecks.title")}
+					subtitle={t("pages.createMonitor.form.geoChecks.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(8)}>
+							<Controller
+								name="geoCheckEnabled"
+								control={control}
+								render={({ field }) => (
+									<Stack
+										direction="row"
+										alignItems="center"
+										spacing={theme.spacing(2)}
+									>
+										<Switch
+											checked={field.value ?? false}
+											onChange={(e) => field.onChange(e.target.checked)}
+										/>
+										<Typography>
+											{t("pages.createMonitor.form.geoChecks.option.enabled.label")}
+										</Typography>
+									</Stack>
+								)}
+							/>
+							{watchGeoCheckEnabled && (
+								<Stack spacing={theme.spacing(8)}>
+									<Controller
+										name="geoCheckLocations"
+										control={control}
+										render={({ field }) => {
+											// Map continents to have 'name' property for Autocomplete
+											const locationOptions = GeoContinents.map((continent) => ({
+												id: continent,
+												name: t(
+													`pages.createMonitor.form.geoChecks.option.locations.options.${continent}`
+												),
+											}));
+											const selectedLocations = locationOptions.filter((loc) =>
+												(field.value ?? []).includes(loc.id)
+											);
+											return (
+												<Stack spacing={theme.spacing(4)}>
+													<Autocomplete
+														multiple
+														options={locationOptions}
+														value={selectedLocations}
+														getOptionLabel={(option) => option.name}
+														onChange={(_: unknown, newValue: typeof locationOptions) => {
+															field.onChange(newValue.map((loc) => loc.id));
+														}}
+														isOptionEqualToValue={(option, value) =>
+															option.id === value.id
+														}
+														fieldLabel={t(
+															"pages.createMonitor.form.geoChecks.option.locations.label"
+														)}
+													/>
+													{selectedLocations.length > 0 && (
+														<Stack
+															flex={1}
+															width="100%"
+														>
+															{selectedLocations.map((location, index) => (
+																<Stack
+																	direction="row"
+																	alignItems="center"
+																	key={location.id}
+																	width="100%"
+																>
+																	<Typography flexGrow={1}>{location.name}</Typography>
+																	<IconButton
+																		size="small"
+																		onClick={() => {
+																			field.onChange(
+																				(field.value ?? []).filter(
+																					(id: string) => id !== location.id
+																				)
+																			);
+																		}}
+																		aria-label="Remove location"
+																	>
+																		<Trash2 size={16} />
+																	</IconButton>
+																	{index < selectedLocations.length - 1 && <Divider />}
+																</Stack>
+															))}
+														</Stack>
+													)}
+												</Stack>
+											);
+										}}
+									/>
+									<Controller
+										name="geoCheckInterval"
+										control={control}
+										render={({ field }) => (
+											<Select
+												{...field}
+												value={field.value ?? 300000}
+												fieldLabel={t(
+													"pages.createMonitor.form.geoChecks.option.interval.label"
+												)}
+											>
+												<MenuItem value={300000}>
+													{t(
+														"pages.createMonitor.form.geoChecks.option.interval.value.fiveMinutes"
+													)}
+												</MenuItem>
+												<MenuItem value={600000}>
+													{t(
+														"pages.createMonitor.form.geoChecks.option.interval.value.tenMinutes"
+													)}
+												</MenuItem>
+												<MenuItem value={900000}>
+													{t(
+														"pages.createMonitor.form.geoChecks.option.interval.value.fifteenMinutes"
+													)}
+												</MenuItem>
+												<MenuItem value={1800000}>
+													{t(
+														"pages.createMonitor.form.geoChecks.option.interval.value.thirtyMinutes"
+													)}
+												</MenuItem>
+											</Select>
+										)}
+									/>
+								</Stack>
+							)}
+						</Stack>
+					}
+				/>
+			)}
+
 			<Stack
 				direction="row"
 				justifyContent="flex-end"

client/src/Pages/Logs/index.tsx

@@ -8,7 +8,7 @@ import { useTranslation } from "react-i18next";
 
 const LogsPage = () => {
 	const { t } = useTranslation();
-	const [activeTab, setActiveTab] = useState<number>(2);
+	const [activeTab, setActiveTab] = useState<number>(1);
 	return (
 		<BasePage>
 			<Tabs

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

@@ -20,7 +20,7 @@ const getHeaders = (t: Function, uiTimezone: string) => {
 		},
 		{
 			id: "date",
-			content: t("pages.checks.table.headers.dateTime"),
+			content: t("common.table.headers.dateTime"),
 			render: (row) => {
 				return formatDateWithTz(row.createdAt, "ddd, MMMM D, YYYY, HH:mm A", uiTimezone);
 			},

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

@@ -0,0 +1,107 @@
+import { Table, Pagination, StatusLabel } from "@/Components/design-elements";
+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 } from "@/Utils/TimeUtils";
+import type { RootState } from "@/Types/state";
+import { useSelector } from "react-redux";
+import prettyMilliseconds from "pretty-ms";
+
+const getHeaders = (t: Function, uiTimezone: string) => {
+	const headers: Header<FlatGeoCheck>[] = [
+		{
+			id: "status",
+			content: t("common.table.headers.status"),
+			render: (row) => {
+				const status = row.status ? "up" : "down";
+				return <StatusLabel status={status} />;
+			},
+		},
+		{
+			id: "date",
+			content: t("common.table.headers.dateTime"),
+			render: (row) => {
+				return formatDateWithTz(row.createdAt, "ddd, MMMM D, YYYY, HH:mm A", uiTimezone);
+			},
+		},
+		{
+			id: "statusCode",
+			content: t("pages.checks.table.headers.statusCode"),
+			render: (row) => {
+				return row.statusCode || "N/A";
+			},
+		},
+		{
+			id: "location",
+			content: t("pages.checks.table.headers.location"),
+			render: (row) => {
+				const location = row.location;
+				if (!location) return "N/A";
+				const { continent, country, city } = location;
+				return `${continent} - ${country}, ${city}`;
+			},
+		},
+		{
+			id: "responseTime",
+			content: t("common.table.headers.responseTime"),
+			render: (row) => {
+				if (!row.timings?.total) return "N/A";
+				return prettyMilliseconds(row.timings.total, { compact: true });
+			},
+		},
+	];
+	return headers;
+};
+
+export const GeoChecksTable = ({
+	geoChecks,
+	count,
+	page,
+	setPage,
+	rowsPerPage,
+	setRowsPerPage,
+}: {
+	geoChecks: FlatGeoCheck[];
+	count: number;
+	page: number;
+	setPage: (page: number) => void;
+	rowsPerPage: number;
+	setRowsPerPage: (rowsPerPage: number) => void;
+}) => {
+	const { t } = useTranslation();
+	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
+	const headers = getHeaders(t, uiTimezone);
+
+	const handlePageChange = (
+		_e: React.MouseEvent<HTMLButtonElement> | null,
+		newPage: number
+	) => {
+		setPage(newPage);
+	};
+
+	const handleRowsPerPageChange = (
+		e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+	) => {
+		const value = Number(e.target.value);
+		setPage(0);
+		setRowsPerPage(value);
+	};
+
+	return (
+		<Box>
+			<Table
+				headers={headers}
+				data={geoChecks}
+			/>
+			<Pagination
+				component="div"
+				count={count}
+				page={page}
+				rowsPerPage={rowsPerPage}
+				onPageChange={handlePageChange}
+				onRowsPerPageChange={handleRowsPerPageChange}
+			/>
+		</Box>
+	);
+};

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

@@ -6,9 +6,12 @@ import {
 	RadialAvgResponse,
 	HistogramDetails,
 	HeaderMonitorControls,
+	HeaderGeoTabs,
+	GeoChecksMap,
 } from "@/Components/monitors";
 import { TrendingUp, AlertTriangle } from "lucide-react";
 import { ChecksTable } from "@/Pages/Uptime/Details/Components/ChecksTable";
+import { GeoChecksTable } from "@/Pages/Uptime/Details/Components/GeoChecksTable";
 import { MonitorStatBoxes } from "@/Components/monitors";
 
 import { useTheme } from "@mui/material/styles";
@@ -19,9 +22,15 @@ import { useSelector } from "react-redux";
 import { useGet } from "@/Hooks/UseApi";
 import type { MonitorDetailsResponse } from "@/Types/Monitor";
 import type { ChecksResponse } from "@/Types/Check";
+import type {
+	GeoChecksResult,
+	FlatGeoChecksResponse,
+	GeoContinent,
+} from "@/Types/GeoCheck";
 import type { RootState } from "@/Types/state";
 import { formatDateWithTz } from "@/Utils/TimeUtils";
 import { t } from "i18next";
+import { Typography } from "@mui/material";
 
 const certificateDateFormat = "MMM D, YYYY h A";
 
@@ -37,7 +46,10 @@ const UptimeDetailsPage = () => {
 
 	const [page, setPage] = useState<number>(0);
 	const [rowsPerPage, setRowsPerPage] = useState<number>(5);
+	const [geoPage, setGeoPage] = useState<number>(0);
+	const [geoRowsPerPage, setGeoRowsPerPage] = useState<number>(5);
 	const [dateRange, setDateRange] = useState<string>("recent");
+	const [selectedLocation, setSelectedLocation] = useState<GeoContinent>("NA");
 
 	const monitorDetailsUrl = useMemo(() => {
 		if (!monitorId) {
@@ -56,7 +68,7 @@ const UptimeDetailsPage = () => {
 	} = useGet<MonitorDetailsResponse>(
 		monitorDetailsUrl,
 		{},
-		{ refreshInterval: 10000, keepPreviousData: true }
+		{ refreshInterval: 10000, keepPreviousData: true, revalidateOnFocus: false }
 	);
 
 	const monitorData = monitorDetailsData?.monitorData;
@@ -71,7 +83,11 @@ const UptimeDetailsPage = () => {
 		return `/monitors/certificate/${monitorId}`;
 	}, [monitorId, monitor?.type]);
 
-	const { data: certificateData } = useGet<CertificateResponse>(certificateUrl);
+	const { data: certificateData } = useGet<CertificateResponse>(
+		certificateUrl,
+		{},
+		{ revalidateOnFocus: false }
+	);
 
 	const certificateExpiry = useMemo(() => {
 		if (!certificateData?.certificateDate) {
@@ -102,9 +118,58 @@ const UptimeDetailsPage = () => {
 	const { data: checksData, isLoading: checksIsLoading } = useGet<ChecksResponse>(
 		checksUrl,
 		{},
-		{ keepPreviousData: true }
+		{ keepPreviousData: true, revalidateOnFocus: false }
 	);
 
+	const geoChecksUrl = useMemo(() => {
+		if (!monitorId || monitor?.type !== "http" || !monitor?.geoCheckEnabled) {
+			return null;
+		}
+		const params = new URLSearchParams();
+		params.append("dateRange", dateRange);
+		params.append("continent", selectedLocation);
+		return `/monitors/${monitorId}/geo-checks?${params.toString()}`;
+	}, [monitorId, monitor?.type, monitor?.geoCheckEnabled, dateRange, selectedLocation]);
+
+	const { data: geoGroupedData } = useGet<GeoChecksResult>(
+		geoChecksUrl,
+		{},
+		{ keepPreviousData: true, revalidateOnFocus: false }
+	);
+
+	const geoGroupedChecks = geoGroupedData?.groupedGeoChecks ?? [];
+
+	// Fetch paginated geo checks for the table
+	const geoChecksTableUrl = useMemo(() => {
+		if (!monitorId || monitor?.type !== "http" || !monitor?.geoCheckEnabled) {
+			return null;
+		}
+		const params = new URLSearchParams();
+		params.append("sortOrder", "desc");
+		params.append("dateRange", dateRange);
+		params.append("page", String(geoPage));
+		params.append("rowsPerPage", String(geoRowsPerPage));
+		return `/geo-checks/${monitorId}?${params.toString()}`;
+	}, [
+		monitorId,
+		monitor?.type,
+		monitor?.geoCheckEnabled,
+		dateRange,
+		geoPage,
+		geoRowsPerPage,
+	]);
+
+	const { data: geoChecksTableData } = useGet<FlatGeoChecksResponse>(
+		geoChecksTableUrl,
+		{},
+		{ keepPreviousData: true, revalidateOnFocus: false }
+	);
+
+	const geoChecksForTable = geoChecksTableData?.geoChecks ?? [];
+	const geoChecksCount = geoChecksTableData?.geoChecksCount ?? 0;
+
+	const geoLocations = monitor?.geoCheckLocations;
+
 	const checks = checksData?.checks ?? [];
 	const checksCount = checksData?.checksCount ?? 0;
 
@@ -127,6 +192,7 @@ const UptimeDetailsPage = () => {
 				dateRange={dateRange}
 				setDateRange={setDateRange}
 			/>
+
 			<Stack
 				direction={{ xs: "column", md: "row" }}
 				gap={theme.spacing(8)}
@@ -160,6 +226,31 @@ const UptimeDetailsPage = () => {
 				rowsPerPage={rowsPerPage}
 				setRowsPerPage={setRowsPerPage}
 			/>
+
+			{monitor?.geoCheckEnabled && (
+				<>
+					<Typography variant="h1">Location breakdown</Typography>
+					<HeaderGeoTabs
+						geoCheckEnabled={monitor?.geoCheckEnabled ?? false}
+						locations={geoLocations}
+						selectedLocation={selectedLocation}
+						onLocationChange={setSelectedLocation}
+					/>
+					<HistogramDetails
+						checks={geoGroupedChecks}
+						range={dateRange}
+					/>
+					<GeoChecksTable
+						geoChecks={geoChecksForTable}
+						count={geoChecksCount}
+						page={geoPage}
+						setPage={setGeoPage}
+						rowsPerPage={geoRowsPerPage}
+						setRowsPerPage={setGeoRowsPerPage}
+					/>
+					<GeoChecksMap geoChecks={geoChecksForTable} />
+				</>
+			)}
 		</BasePage>
 	);
 };

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

@@ -42,11 +42,11 @@ const UptimeMonitorsPage = () => {
 	const debouncedSearch = useDebounce<string>(search, 300);
 
 	// Convert filter selections to API filter values
-	// Status: "up" -> true, "down" -> false
+	// Status: pass "up"/"down" directly to the API
 	// State: "active" -> true, "paused" -> false
 	const toFilterStatus = useMemo(() => {
-		if (selectedStatus === "up") return "true";
-		if (selectedStatus === "down") return "false";
+		if (selectedStatus === "up") return "up";
+		if (selectedStatus === "down") return "down";
 		return undefined;
 	}, [selectedStatus]);
 

client/src/Types/GeoCheck.ts

@@ -0,0 +1,80 @@
+export const GeoContinents = ["EU", "NA", "AS", "SA", "AF", "OC"] as const;
+export type GeoContinent = (typeof GeoContinents)[number];
+
+export interface GeoCheckMetadata {
+	monitorId: string;
+	teamId: string;
+	type: string;
+}
+
+export interface GeoCheckTimings {
+	total: number;
+	dns: number;
+	tcp: number;
+	tls: number;
+	firstByte: number;
+	download: number;
+}
+
+export interface GeoCheckLocation {
+	continent: GeoContinent;
+	region: string;
+	country: string;
+	state: string;
+	city: string;
+	longitude: number;
+	latitude: number;
+}
+
+export interface GeoCheckResult {
+	location: GeoCheckLocation;
+	status: boolean;
+	statusCode: number;
+	timings: GeoCheckTimings;
+}
+
+export interface GeoCheck {
+	id: string;
+	metadata: GeoCheckMetadata;
+	results: GeoCheckResult[];
+	expiry: string;
+	__v: number;
+	createdAt: string;
+	updatedAt: string;
+}
+
+export interface FlatGeoCheck {
+	id: string;
+	monitorId: string;
+	teamId: string;
+	type: string;
+	location: GeoCheckLocation;
+	status: boolean;
+	statusCode: number;
+	timings: GeoCheckTimings;
+	createdAt: string;
+	updatedAt: string;
+}
+
+export interface GroupedGeoCheck {
+	bucketDate: string;
+	continent: GeoContinent;
+	avgResponseTime: number;
+	totalChecks: number;
+	uptimePercentage: number;
+}
+
+export interface GeoChecksResult {
+	monitorType: string;
+	groupedGeoChecks: GroupedGeoCheck[];
+}
+
+export interface GeoChecksResponse {
+	geoChecks: GeoCheck[];
+	geoChecksCount: number;
+}
+
+export interface FlatGeoChecksResponse {
+	geoChecks: FlatGeoCheck[];
+	geoChecksCount: number;
+}

client/src/Types/Monitor.ts

@@ -1,5 +1,7 @@
 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";
 
 export const MonitorTypes = [
 	"http",
@@ -61,6 +63,9 @@ export interface Monitor {
 	gameId?: string;
 	grpcServiceName?: string;
 	group: string | null;
+	geoCheckEnabled?: boolean;
+	geoCheckLocations?: GeoContinent[];
+	geoCheckInterval?: number;
 	recentChecks: CheckSnapshot[];
 	createdAt: string;
 	updatedAt: string;

client/src/Types/env.d.ts

@@ -17,3 +17,8 @@ declare module "*.svg?react" {
 	>;
 	export default ReactComponent;
 }
+
+declare module "*.css" {
+	const content: string;
+	export default content;
+}

client/src/Validation/monitor.ts

@@ -1,4 +1,5 @@
 import { z } from "zod";
+import { GeoContinents } from "@/Types/GeoCheck";
 
 // URL schema with custom error message
 const urlSchema = z.url({ message: "Please enter a valid URL" });
@@ -20,6 +21,12 @@ const baseSchema = z.object({
 		.number({ message: "Threshold percentage is required" })
 		.min(1, "Incident percentage must be at least 1")
 		.max(100, "Incident percentage must be at most 100"),
+	geoCheckEnabled: z.boolean().optional(),
+	geoCheckLocations: z.array(z.enum(GeoContinents)).optional(),
+	geoCheckInterval: z
+		.number()
+		.min(300000, "Interval must be at least 5 minutes")
+		.optional(),
 });
 
 // HTTP monitor schema

client/src/locales/en.json

@@ -45,7 +45,8 @@
 			"removeMonitors": "Remove monitors",
 			"sendTestEmail": "Send test email",
 			"exportToJSON": "Export to JSON",
-			"importFromJSON": "Import from JSON"
+			"importFromJSON": "Import from JSON",
+			"clearFilters": "Clear filters"
 		},
 		"charts": {
 			"labels": {
@@ -115,7 +116,8 @@
 				"type": "Type",
 				"url": "Url",
 				"interval": "Interval",
-				"active": "Active"
+				"active": "Active",
+				"responseTime": "Response time"
 			}
 		}
 	},
@@ -372,8 +374,8 @@
 			"table": {
 				"empty": "No down checks in this time range",
 				"headers": {
-					"dateTime": "Date & time",
-					"statusCode": "Status code"
+					"statusCode": "Status code",
+					"location": "Location"
 				}
 			}
 		},
@@ -558,6 +560,36 @@
 						}
 					}
 				},
+				"geoChecks": {
+					"title": "Geo-Distributed Checks",
+					"description": "Run checks from multiple geographic locations to monitor global availability and performance.",
+					"option": {
+						"enabled": {
+							"label": "Enable geo-distributed checks"
+						},
+						"locations": {
+							"label": "Locations",
+							"placeholder": "Select locations",
+							"options": {
+								"EU": "Europe",
+								"NA": "North America",
+								"AS": "Asia",
+								"SA": "South America",
+								"AF": "Africa",
+								"OC": "Oceania"
+							}
+						},
+						"interval": {
+							"label": "Check interval",
+							"value": {
+								"fiveMinutes": "5 minutes",
+								"tenMinutes": "10 minutes",
+								"fifteenMinutes": "15 minutes",
+								"thirtyMinutes": "30 minutes"
+							}
+						}
+					}
+				},
 				"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.",
@@ -627,7 +659,6 @@
 			},
 			"filters": {
 				"allMonitors": "All monitors",
-				"clearFilters": "Clear filters",
 				"monitor": "Monitor",
 				"resolutionType": "Resolution type",
 				"resolutionTypes": {